/* FAMA · estilos comunes de la portada, el panel y el generador de QR.
   Colores de bar de día: crema, tinta oscura y el dorado de las estrellas.
   Se mira sobre todo en el móvil del dueño, detrás de la barra. */
:root{
  --fondo:#FBF7F0; --capa:#FFFFFF; --capa-2:#F4EDE1; --linea:#E6DCCB;
  --tinta:#1F1A14; --tinta-2:#5F564A; --tinta-3:#8C8273;
  --acento:#0E5A43; --acento-2:#127357; --acento-suave:#E2F0EA; --acento-tinta:#FFFFFF;
  --oro:#E8A317; --oro-suave:#FFF4DB;
  --mal:#B3261E; --mal-suave:#FCE9E7;
  --radio:16px; --radio-s:10px;
  --sombra:0 1px 2px rgba(31,26,20,.06),0 6px 20px rgba(31,26,20,.06);
  --display:"Fraunces",Georgia,serif; --texto:"Inter",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#15120E; --capa:#1E1A15; --capa-2:#27221B; --linea:#3A3228;
    --tinta:#F5EFE6; --tinta-2:#C9BFB0; --tinta-3:#978C7C;
    --acento:#3FBF93; --acento-2:#5AD3A8; --acento-suave:#123328; --acento-tinta:#0B1F18;
    --oro:#F2B53B; --oro-suave:#35290F; --mal:#FF8A80; --mal-suave:#3A1714;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --fondo:#15120E; --capa:#1E1A15; --capa-2:#27221B; --linea:#3A3228;
  --tinta:#F5EFE6; --tinta-2:#C9BFB0; --tinta-3:#978C7C;
  --acento:#3FBF93; --acento-2:#5AD3A8; --acento-suave:#123328; --acento-tinta:#0B1F18;
  --oro:#F2B53B; --oro-suave:#35290F; --mal:#FF8A80; --mal-suave:#3A1714;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 var(--texto)}
a{color:var(--acento)}
.envoltura{max-width:980px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em;line-height:1.12;margin:0}
.barra{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra .envoltura{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.marca{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:22px;color:var(--tinta);text-decoration:none}
.marca i{font-style:normal;color:var(--oro)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--texto);cursor:pointer;text-decoration:none;transition:transform .08s ease,background .15s ease}
.boton:active{transform:scale(.97)}
.boton.primario{background:var(--acento);color:var(--acento-tinta)}
.boton.primario:hover{background:var(--acento-2)}
.boton.secundario{background:var(--capa);color:var(--tinta);border-color:var(--linea)}
.boton.fantasma{background:transparent;color:var(--acento);padding:0 10px}
.boton.peque{min-height:38px;padding:0 14px;font-size:14px}
.boton[disabled]{opacity:.55;cursor:default}
.tarjeta{background:var(--capa);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.etiqueta{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--texto);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--capa-2);color:var(--tinta-2)}
.etiqueta.ejemplo{background:var(--oro-suave);color:#7A5200}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .etiqueta.ejemplo{color:var(--oro)}}
.etiqueta.ok{background:var(--acento-suave);color:var(--acento)}
.etiqueta.mal{background:var(--mal-suave);color:var(--mal)}
.estrellas{color:var(--oro);letter-spacing:1px;font-size:15px;white-space:nowrap}
.estrellas .apagada{color:var(--linea)}
.muted{color:var(--tinta-2)}
.pequeno{font-size:13.5px}
textarea,input,select{font:15px/1.45 var(--texto);color:var(--tinta);background:var(--capa);border:1px solid var(--linea);border-radius:var(--radio-s);padding:11px 12px;width:100%}
textarea{min-height:150px;resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:transparent}
label{font-weight:600;font-size:14px;display:block;margin:0 0 6px}
.segmentado{display:inline-flex;background:var(--capa-2);border-radius:999px;padding:3px;gap:2px}
.segmentado button{border:0;background:transparent;color:var(--tinta-2);font:600 14px/1 var(--texto);padding:10px 14px;border-radius:999px;cursor:pointer;min-height:38px}
.segmentado button[aria-pressed="true"]{background:var(--capa);color:var(--tinta);box-shadow:var(--sombra)}
.aviso{border-radius:var(--radio-s);padding:12px 14px;font-size:14px;background:var(--oro-suave);color:var(--tinta)}
.aviso.ok{background:var(--acento-suave)}
.resena{padding:16px}
.resena .cabeza{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.resena .autor{font-weight:700}
.resena .texto{margin:10px 0 0;white-space:pre-line}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto}
.propuesta{margin-top:12px;border-top:1px dashed var(--linea);padding-top:12px}
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.brindis{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--tinta);color:var(--fondo);padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;transition:all .2s ease;pointer-events:none;z-index:20;max-width:calc(100% - 32px);text-align:center}
.brindis.ver{opacity:1;transform:translateX(-50%) translateY(0)}
.pie{padding:32px 0 48px;color:var(--tinta-3);font-size:13.5px;border-top:1px solid var(--linea);margin-top:40px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}