/* El Establo · sistema visual compartido
   Madera oscura del salón, papel de afiche, rojo de la herradura y oro de la barra. */
:root{
  color-scheme:dark;
  --madera:#1A110D; --madera-2:#24170F; --veta:#2E1E14; --veta-2:#38261A; --linea:#3D2A1D; --linea-2:#54392A;
  --papel:#EFE3C8; --papel-2:#E4D3AE; --tinta:#2B1A12; --suave-p:#6B5443; --blanco:#FFFCF6;
  --crema:#F3E9D7; --suave:#BFA88F; --apagado:#8F7A66;
  --rojo:#EB1818; --rojo-d:#B91010; --rojo-dd:#8E0B0B; --cafe:#531E18; --oro:#E7B04A; --oro-d:#C8912C;
  --verde:#3E9B5F; --verde-c:#E1F2E8; --verde-t:#2F7F5E; --alerta-c:#FBE3DF;
  --display:"Ultra","Rockwell",Georgia,serif;
  --western:"Rye",Georgia,serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --cuerpo:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:6px; --r-l:12px;
  --sombra:0 18px 40px -18px rgba(0,0,0,.7);
  --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:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(90deg,transparent 0 140px,rgba(0,0,0,.25) 140px 143px),
    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:700 13px/1.2 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
em.rojo,.rojo{font-style:normal;color:var(--rojo)}

/* papel de afiche */
.papel{background:var(--papel);color:var(--tinta);border-radius:var(--r);
  box-shadow:0 2px 0 var(--papel-2) inset,var(--sombra);
  background-image:radial-gradient(circle at 12% 18%,rgba(120,80,40,.10),transparent 40%),radial-gradient(circle at 88% 82%,rgba(120,80,40,.12),transparent 45%)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--r);border:0;
  font:700 18px/1 var(--cond);letter-spacing:.1em;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(--madera)}.btn-oro:hover{background:var(--oro-d)}
.btn-borde{background:transparent;color:var(--oro);border:1px solid var(--oro)}.btn-borde:hover{background:rgba(231,176,74,.1)}
.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(231,176,74,.18)}
.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 16px var(--cond);letter-spacing:.04em;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:400 22px/1 var(--western)}
.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}}