/* ════════════════════════════════════════════════════════════
   VL BARBER — BASE
   Tokens de marca, reset y componentes compartidos entre la web
   pública, el panel y las páginas simples (404 / cancelación).
   Negro carbón + dorado, con plata para lo secundario.
════════════════════════════════════════════════════════════ */
:root{
  /* Superficies */
  --bg:      #08080a;
  --bg-2:    #0c0c0f;
  --panel:   #121216;
  --panel-2: #17171d;
  --panel-3: #1e1e26;
  --line:    #22222b;
  --line-2:  #30303c;

  /* Marca */
  --oro:      #d4af37;
  --oro-luz:  #f2d98a;
  --oro-oscuro:#a8842a;
  --plata:    #c9cfd8;

  /* Texto */
  --text:  #f6f6f8;
  --text-2:#b8b8c2;
  --dim:   #82828d;
  --mute:  #55555f;

  /* Estado */
  --ok:  #4ade80;
  --err: #f87171;
  --warn:#fbbf24;

  /* Forma y movimiento */
  --r:    20px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-fast: cubic-bezier(.4,0,.2,1);

  /* Tipografía */
  --fD: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --fB: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Efectos */
  --sombra:     0 18px 40px -18px rgba(0,0,0,.9);
  --brillo-oro: 0 0 0 1px rgba(212,175,55,.45), 0 10px 34px -12px rgba(212,175,55,.35);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--fB);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-feature-settings:'tnum' 1;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; border-radius:6px }
::selection{ background:var(--oro); color:#0a0a0c }

::-webkit-scrollbar{ width:8px; height:8px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px }

/* ── Tipografía de marca ─────────────────────────────────── */
.display{
  font-family:var(--fD);
  font-weight:400;
  letter-spacing:.02em;
  line-height:.92;
  text-transform:uppercase;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro);
}
.tag::before{ content:''; width:22px; height:1px; background:var(--oro); opacity:.7 }

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--panel-2);
  --btn-fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px;
  min-height:48px;                     /* objetivo táctil cómodo en móvil */
  border-radius:var(--r-md);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--line-2);
  font-weight:700; font-size:.94rem; letter-spacing:.02em;
  transition:transform .18s var(--ease), background .18s var(--ease-fast),
             border-color .18s var(--ease-fast), box-shadow .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ border-color:var(--oro); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.985) }
.btn[disabled],.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; border-color:var(--line) }

.btn-oro{
  --btn-bg:linear-gradient(135deg,var(--oro-luz),var(--oro) 55%,var(--oro-oscuro));
  --btn-fg:#0a0a0c;
  border-color:transparent;
  font-weight:800;
}
.btn-oro:hover{ box-shadow:var(--brillo-oro) }
.btn-fantasma{ --btn-bg:transparent; border-color:var(--line-2); color:var(--text-2) }
.btn-fantasma:hover{ color:var(--text) }
.btn-peligro{ --btn-bg:transparent; border-color:rgba(248,113,113,.35); color:var(--err) }
.btn-peligro:hover{ border-color:var(--err); background:rgba(248,113,113,.08) }
.btn-bloque{ width:100% }
.btn-sm{ padding:9px 14px; min-height:38px; font-size:.82rem; border-radius:var(--r-sm) }

/* ── Tarjetas y campos ───────────────────────────────────── */
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sombra);
}
.campo{ display:flex; flex-direction:column; gap:7px }
.campo label{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim) }
.campo input,.campo select,.campo textarea{
  width:100%; padding:14px 16px; min-height:50px;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-md); color:var(--text);
  transition:border-color .18s var(--ease-fast), background .18s var(--ease-fast);
}
.campo input::placeholder,.campo textarea::placeholder{ color:var(--mute) }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--oro); background:var(--panel-2);
}
.campo .ayuda{ font-size:.78rem; color:var(--dim) }

.check{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.86rem; color:var(--text-2); cursor:pointer;
}
.check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--oro); flex:0 0 auto }

/* ── Avisos y toasts ─────────────────────────────────────── */
.aviso{
  padding:12px 15px; border-radius:var(--r-sm); font-size:.87rem;
  border:1px solid var(--line-2); background:var(--panel-2);
}
.aviso-error{ border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.08); color:#ffd4d4 }
.aviso-ok{ border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.08); color:#d6ffe4 }

#toast{
  position:fixed; left:50%; bottom:calc(22px + var(--safe-b)); transform:translate(-50%,140%);
  z-index:120; max-width:min(92vw,420px);
  padding:13px 18px; border-radius:var(--r-md);
  background:var(--panel-3); border:1px solid var(--line-2); color:var(--text);
  font-size:.88rem; font-weight:600; box-shadow:var(--sombra);
  transition:transform .4s var(--ease), opacity .3s var(--ease-fast);
  opacity:0; pointer-events:none;
}
#toast.visible{ transform:translate(-50%,0); opacity:1 }
#toast.ok{ border-color:rgba(74,222,128,.5) }
#toast.error{ border-color:rgba(248,113,113,.5) }

/* ── Utilidades ──────────────────────────────────────────── */
.oculto{ display:none !important }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skeleton{
  background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 50%,var(--panel-2) 75%);
  background-size:220% 100%; animation:brillo 1.3s infinite linear; border-radius:var(--r-sm);
}
@keyframes brillo{ from{background-position:220% 0} to{background-position:-20% 0} }
@keyframes aparecer{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.aparece{ animation:aparecer .45s var(--ease) both }

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

/* ── Páginas simples servidas desde el servidor (404, cancelar) ── */
.pagina-simple{ display:grid; place-items:center; min-height:100dvh; padding:24px }
.tarjeta-simple{
  text-align:center; max-width:440px; width:100%;
  padding:44px 30px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);
}
.tarjeta-simple h1{ font-family:var(--fD); font-size:2.6rem; letter-spacing:.02em; margin-bottom:10px }
.tarjeta-simple p{ color:var(--text-2); margin-bottom:26px }