/* Cantina La 20 · sistema visual compartido
   Salón Art Déco en Zona 10: verde botella, filetes de oro, hueso de carta impresa y un toque de grana.
   Los nombres de las variables vienen del proyecto base; su valor es el de La 20. */
:root{
  color-scheme:dark;
  --madera:#0E2A22; --madera-2:#12352B; --veta:#163D31; --veta-2:#1B4739; --linea:#265141; --linea-2:#33634F;
  --papel:#F3EBDD; --papel-2:#E6D9C2; --tinta:#1A1512; --suave-p:#5C5347; --blanco:#FBF8F2;
  --crema:#F3EBDD; --suave:#C9C3B3; --apagado:#93A198;
  --rojo:#D2463A; --rojo-d:#A8231C; --rojo-dd:#861A15; --cafe:#4A1512; --oro:#C9A24A; --oro-d:#B08A34; --oro-c:#E6CB86; --rosa:#E0217A;
  --verde:#3E9B6A; --verde-c:#E1F2E8; --verde-t:#2F7F5E; --alerta-c:#FBE3DF;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --western:"Fraunces",Georgia,serif;
  --cond:"Josefin Sans","Century Gothic","Futura",sans-serif;
  --cuerpo:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:8px; --r-l:14px;
  --sombra:0 18px 40px -18px rgba(0,0,0,.65);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
body{
  min-height:100vh;color:var(--crema);font:17px/1.5 var(--cuerpo);-webkit-font-smoothing:antialiased;
  background-color:var(--madera);
  background-image:radial-gradient(90% 60% at 50% -10%,rgba(201,162,74,.10),transparent 60%),radial-gradient(120% 90% at 50% 0%,var(--madera-2),var(--madera));
  background-attachment:fixed;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--oro);outline-offset:2px;border-radius:4px}
input::placeholder,textarea::placeholder{color:var(--apagado)}
a{color:var(--oro)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{margin:0;font-weight:400;line-height:1.04;text-wrap:balance}
.display{font-family:var(--display)}
.western{font-family:var(--western)}
.ceja{font:600 12.5px/1.2 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
em.rojo,.rojo{font-style:italic;color:var(--oro)}

/* hoja de carta */
.papel{background:var(--papel);color:var(--tinta);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(201,162,74,.35),var(--sombra)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:999px;border:0;
  font:700 15px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .12s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn-rojo{background:var(--rojo-d);color:#fff}.btn-rojo:hover{background:var(--rojo-dd)}
.btn-oro{background:var(--oro);color:var(--tinta)}.btn-oro:hover{background:var(--oro-d)}
.btn-borde{background:transparent;color:var(--oro);border:1px solid var(--oro)}.btn-borde:hover{background:rgba(201,162,74,.12)}
.btn-osc{background:var(--tinta);color:var(--crema)}
.btn-txt{background:transparent;color:var(--suave);min-height:44px}
.btn:disabled{opacity:.45}
.btn-bloque{width:100%}

/* campos */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label,.campo .lbl{font-size:15px;color:var(--suave)}
.campo input,.campo select,.campo textarea{min-height:50px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--linea);background:var(--veta);color:var(--crema);font-size:17px;width:100%}
.campo textarea{min-height:90px;resize:vertical;line-height:1.4}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);outline:none;box-shadow:0 0 0 3px rgba(201,162,74,.22)}
.campo .error{color:#FF8A80;font-size:14px;display:none}
.campo.mal input,.campo.mal select{border-color:#FF6B5E}
.campo.mal .error{display:block}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--crema);font:600 14px var(--cond);letter-spacing:.08em;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{border-color:var(--oro);background:var(--oro);color:var(--madera)}

/* avisos */
.toast-zona{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:100;display:grid;gap:8px;width:min(440px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--papel);color:var(--tinta);border-radius:10px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-weight:600;display:flex;gap:10px;align-items:center;animation:toast .35s var(--ease)}
.toast.mal{background:#FFE1DC;color:#7A0D0D}
.toast.bien{background:var(--verde-c);color:#1F5E43}
@keyframes toast{from{opacity:0;transform:translateY(12px)}}

.skeleton{background:linear-gradient(90deg,var(--veta) 0%,var(--veta-2) 50%,var(--veta) 100%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--r)}
@keyframes sk{to{background-position:-200% 0}}

.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca svg{width:34px;height:34px;flex:none}
.marca b{display:block;font:italic 600 21px/1 var(--western);white-space:nowrap}
.marca small{white-space:nowrap}
.marca small{display:block;font:500 12px var(--cond);letter-spacing:.14em;color:var(--suave);text-transform:uppercase;margin-top:3px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}