/* Reservalo · tokens de marca V3.3 — para páginas públicas (reservalo.test),
   no para el back office (que usa Modernist, ver modernist.css). Copiado
   tal cual de reservalo-manual-completo.html, sección 08 Implementación.

   Estos tokens (--primario / --tinta / --fondo / --e-* / --r-* / --f-*) los
   sobrescribe tema_publico.php por comercio en tiempo de render. El sistema
   paralelo del back-office (--color-* en modernist.css) tiene los mismos
   valores base con otros nombres — mapa y regla en docs/tokens.md. */
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  --fondo: #FBF9F5;
  --fondo-2: #F4EFE7;
  --superficie: #FFFFFF;
  --tinta: #231733;
  --tinta-2: #6B6275;
  --tinta-3: #9A93A6;
  --borde: #ECE6DF;
  --borde-fuerte: #DED6CC;

  --primario: #7A4BD6;
  --primario-hover: #6A3DC4;
  --primario-texto: #6438B8;
  --primario-suave: #F1EBFB;
  --sobre-primario: #FFFFFF;

  --acento: #FF6B4A;
  --acento-texto: #D9482A;
  --acento-suave: #FFEDE7;

  --confirmado: #2E7D5B;
  --confirmado-suave: #E6F3EC;
  --pendiente: #A8741A;
  --pendiente-suave: #F8EFDD;
  --cancelado: #B0453A;
  --cancelado-suave: #F8E7E4;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(35, 23, 51, .05);
  --sombra-2: 0 1px 2px rgba(35, 23, 51, .05), 0 6px 20px rgba(35, 23, 51, .06);
  --sombra-3: 0 12px 40px rgba(35, 23, 51, .10);

  --f-display: 'Gabarito', system-ui, sans-serif;
  --f-texto: 'Instrument Sans', system-ui, sans-serif;
  --f-dato: 'Spline Sans Mono', ui-monospace, monospace;

  --transicion: .2s cubic-bezier(.4, 0, .2, 1);
}

[data-tema="oscuro"] {
  --fondo: #171226;
  --fondo-2: #1E1833;
  --superficie: #201A33;
  --tinta: #F1EDF8;
  --tinta-2: #ADA3C0;
  --tinta-3: #7C7391;
  --borde: #322B47;
  --borde-fuerte: #453C60;

  --primario: #A98BFF;
  --primario-hover: #BBA2FF;
  --primario-texto: #C3AEFF;
  --primario-suave: #241A3D;
  --sobre-primario: #1A1030;

  --acento: #FF8A6E;
  --acento-texto: #FF8A6E;
  --acento-suave: #3A2018;

  --confirmado: #5CBE97;
  --confirmado-suave: #17322A;
  --pendiente: #E0A64B;
  --pendiente-suave: #33280F;
  --cancelado: #E0715A;
  --cancelado-suave: #331A16;

  --sombra-1: none;
  --sombra-2: 0 8px 28px rgba(0, 0, 0, .35);
  --sombra-3: 0 16px 48px rgba(0, 0, 0, .5);
}

/* — componentes reales del manual (sección 06), listos para reusar — */

.btn { font-family: var(--f-texto); font-weight: 600; font-size: 15px; border-radius: var(--r-full); padding: 12px 24px; border: 1.5px solid transparent; cursor: pointer; transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion); display: inline-flex; align-items: center; gap: 8px; }
.btn-primario { background: var(--primario); color: var(--sobre-primario); }
.btn-secundario { background: transparent; color: var(--primario-texto); border-color: var(--primario); }
.btn-fantasma { background: transparent; color: var(--tinta-2); border-color: var(--borde-fuerte); }
.btn-acento { background: var(--acento); color: #fff; }
.btn:focus-visible, .chip-hora:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-chico { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--tinta); }
/* 16px y no 15: con menos, Safari de iOS hace zoom al tocar el campo y
   desacomoda el formulario (justo el de la reserva). */
.campo input, .campo select, .campo textarea { font-family: var(--f-texto); font-size: 16px; padding: 11px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); color: var(--tinta); transition: border-color var(--transicion); width: 100%; }
/* --tinta-2 y no --tinta-3: el placeholder también es texto (WCAG 1.4.3) y
   #9A93A6 daba 3:1. Sigue distinguiéndose del valor cargado (--tinta). */
.campo input::placeholder { color: var(--tinta-2); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--primario); }
.campo .ayuda { font-size: 12px; color: var(--tinta-2); }
.campo.error input { border-color: var(--cancelado); }
.campo.error .ayuda { color: var(--cancelado); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-hora { font-family: var(--f-dato); font-size: 14px; font-weight: 500; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-full); padding: 8px 15px; background: var(--superficie); color: var(--tinta); cursor: pointer; transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion); }
.chip-hora[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }

/* Hover solo con mouse o trackpad: en el teléfono, después de tocar, el
   estado :hover queda "pegado" (una tarjeta o botón tocado parecía elegido
   al volver). En pantallas táctiles el feedback es :active (más abajo). */
@media (hover: hover) {
  .btn-primario:hover { background: var(--primario-hover); }
  .btn-secundario:hover { background: var(--primario-suave); }
  .btn-fantasma:hover { color: var(--tinta); border-color: var(--tinta-2); }
  .chip-hora:hover { border-color: var(--primario); }
}

/* Feedback al tocar, en vez del destello celeste del navegador. */
.btn, .chip-hora { -webkit-tap-highlight-color: transparent; }
.btn-primario:active { background: var(--primario-hover); }
.btn-secundario:active { background: var(--primario-suave); }
.btn-fantasma:active { border-color: var(--tinta-2); }
.chip-hora:active { border-color: var(--primario); background: var(--primario-suave); }

/* Horarios: 44px de alto como mínimo (eran 34), la zona cómoda para el
   pulgar. Son el control principal del paso de día y horario. */
.chip-hora { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: var(--r-full); padding: 4px 12px; }
.badge.ok { background: var(--confirmado-suave); color: var(--confirmado); }
.badge.pend { background: var(--pendiente-suave); color: var(--pendiente); }
.badge.canc { background: var(--cancelado-suave); color: var(--cancelado); }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sombra-1); }

.aviso { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); background: var(--primario-suave); border: 1px solid color-mix(in srgb, var(--primario) 30%, transparent); font-size: 14px; color: var(--tinta); }

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--f-texto); background: var(--fondo); color: var(--tinta);
  line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--tinta); margin: 0 0 var(--e-2); }
a { color: var(--primario-texto); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.mono { font-family: var(--f-dato); }

/* — Accesibilidad — */

/* Foco visible en los campos: antes el foco solo cambiaba el borde, muy
   sutil para quien navega con teclado. */
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primario); outline-offset: 1px;
}

/* Respeta "menos movimiento" del sistema/navegador. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link: oculto hasta el foco, para saltar directo a la reserva. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--primario); color: var(--sobre-primario); padding: 10px 16px;
  border-radius: var(--r-md, 12px); font-weight: 700; font-size: 14px;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }