/* ==========================================================================
   TURNITO — Sistema de diseño
   --------------------------------------------------------------------------
   Un solo archivo para toda la aplicación: la página de reservas del cliente,
   el comprobante, el seguimiento y el panel del negocio.

   La identidad viene del ticket de turno: el papelito que se saca en la
   fiambrería o el banco. De ahí salen el naranja, la línea de perforación
   y el código en monoespaciada.

   Reglas de uso:
   1. Nunca escribas un color a mano. Siempre una variable var(--algo).
   2. No inventes componentes nuevos si acá hay uno que sirve.
   3. Mobile primero: todo tiene que funcionar con el dedo en un celular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   El bloque :root define el tema claro completo. Los otros dos bloques solo
   redefinen los mismos nombres. Ningún color se define únicamente adentro de
   un media query, porque entonces no existiría en el estado por defecto.
   -------------------------------------------------------------------------- */
:root {
  /* Tinta y neutros: grises con una leve inclinación al violeta, para que no
     se vean "sucios" al lado del naranja */
  --ink:          #17171C;
  --ink-soft:     #3A3A45;
  --muted:        #6E6E7B;
  --line:         #E2E0DB;
  --line-soft:    #EFEDE8;

  /* Superficies */
  --paper:        #FAF9F6;
  --surface:      #FFFFFF;
  --surface-2:    #F2F0EB;

  /* Acento: el naranja del ticket de turno */
  --turno:        #E8552A;
  --turno-deep:   #C33F18;
  --turno-wash:   #FCEDE7;
  --on-turno:     #FFF8F5;

  /* Color semántico: es estado, no decoración. Nunca se usa como acento. */
  --ok:           #187A47;
  --ok-wash:      #E6F4EC;
  --on-ok:        #FFFFFF;
  --warn:         #8F5208;
  --warn-wash:    #FDF1DF;
  --danger:       #B82B22;
  --danger-wash:  #FBEAE8;
  --on-danger:    #FFFFFF;
  --info:         #235C96;
  --info-wash:    #E8F0FA;

  /* Borde de los campos y botones. --line es muy claro (1,3:1) y los campos
     casi no se distinguían del fondo; la norma pide 3:1 en controles. */
  --control-border: #85838D;

  /* Profundidad: dos niveles, no diez */
  --shadow:       0 1px 2px rgba(23,23,28,.05), 0 8px 24px rgba(23,23,28,.06);
  --shadow-lift:  0 2px 4px rgba(23,23,28,.06), 0 18px 44px rgba(23,23,28,.11);

  /* Tipografía */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --step--2: .76rem;
  --step--1: .875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
  --step-3:  clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem);
  --step-4:  clamp(2.1rem, 1.5rem + 3vw, 3.4rem);

  /* Espaciado y formas */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 100px;

  --gutter: clamp(1rem, 4vw, 2rem);

  /* Altura mínima para tocar con el dedo. No bajar de acá en móvil. */
  --tap: 44px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:         #F3F1EC;
    --ink-soft:    #C8C5BE;
    --muted:       #918E9B;
    --line:        #2E2E38;
    --line-soft:   #26262E;
    --paper:       #121216;
    --surface:     #1A1A20;
    --surface-2:   #22222A;
    --turno:       #FF7346;
    --turno-deep:  #FF8F69;
    --turno-wash:  #2E1A13;
    --on-turno:    #1A0D07;
    --ok:          #46C483;
    --ok-wash:     #14271D;
    --on-ok:       #06160D;
    --warn:        #E5A845;
    --warn-wash:   #2B2113;
    --danger:      #F0736A;
    --danger-wash: #2E1614;
    --on-danger:   #2A0A07;
    --info:        #6BA8E8;
    --info-wash:   #13202E;
    --control-border: #6E6E7B;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
  --ink:         #F3F1EC;
  --ink-soft:    #C8C5BE;
  --muted:       #918E9B;
  --line:        #2E2E38;
  --line-soft:   #26262E;
  --paper:       #121216;
  --surface:     #1A1A20;
  --surface-2:   #22222A;
  --turno:       #FF7346;
  --turno-deep:  #FF8F69;
  --turno-wash:  #2E1A13;
  --on-turno:    #1A0D07;
  --ok:          #46C483;
  --ok-wash:     #14271D;
  --warn:        #E5A845;
  --warn-wash:   #2B2113;
  --danger:      #F0736A;
  --danger-wash: #2E1614;
  --info:        #6BA8E8;
  --info-wash:   #13202E;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganar siempre.
   Sin esto, cualquier clase con display (.empty, .row, .stack...) lo pisa
   y el elemento se sigue viendo aunque el JS lo haya ocultado. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Deja aire bajo el header pegajoso: sin esto, al tabular el elemento
     enfocado queda tapado por la barra superior. */
  scroll-padding-block: 80px;
  /* Hace que los controles nativos (calendario, reloj, select) sigan el tema */
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: 700; }

p { margin: 0; }
a { color: var(--turno); }

img { max-width: 100%; height: auto; }

.t-mono { font-family: var(--font-mono); }
.t-muted { color: var(--muted); }
.t-small { font-size: var(--step--1); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turno);
}

/* El foco del teclado siempre tiene que verse */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--turno);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* --------------------------------------------------------------------------
   3. ESTRUCTURA
   -------------------------------------------------------------------------- */
.shell {
  width: min(1160px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.shell-narrow { width: min(680px, 100% - var(--gutter) * 2); margin-inline: auto; }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.75rem; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row-end { margin-left: auto; }

/* Línea de perforación del ticket. Se usa para separar secciones. */
.perf {
  position: relative;
  border-top: 2px dashed var(--line);
  height: 0;
  margin-block: 2rem;
}
.perf::before, .perf::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
}
.perf::before { left: -10px; border-right-color: transparent; border-top-color: transparent; }
.perf::after  { right: -10px; border-left-color: transparent; border-top-color: transparent; }

/* --------------------------------------------------------------------------
   4. MARCA
   -------------------------------------------------------------------------- */
.brand {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
}
.brand span { color: var(--turno); }

/* Barra superior de la aplicación */
.appbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.appbar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
}

/* --------------------------------------------------------------------------
   5. BOTONES
   Un botón dice exactamente qué va a pasar. Nunca bajan de --tap de alto.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .7rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -.01em;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease), opacity .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary { background: var(--turno); color: var(--on-turno); }
.btn-primary:hover { background: var(--turno-deep); }

.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-quiet { color: var(--muted); }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn-ok { background: var(--ok); color: var(--on-ok); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-whatsapp { background: #25D366; color: #08331B; }
.btn-whatsapp:hover { background: #1EBE5A; }

.btn-sm { min-height: 36px; padding: .4rem .8rem; font-size: var(--step--1); }

/* Con el dedo no alcanza 36px. Se recupera --tap en dos casos: pantalla
   táctil, o pantalla angosta (cubre el celular aunque el navegador no
   reporte bien el tipo de puntero). */
@media (pointer: coarse), (max-width: 720px) {
  .btn-sm { min-height: var(--tap); padding: .5rem 1rem; }
}
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; }

.label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink);
}

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .65rem .8rem;
  font-family: var(--font-body);
  /* 16px evita que iOS haga zoom al enfocar el campo */
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--control-border);
  border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--turno);
  box-shadow: 0 0 0 3px var(--turno-wash);
}
.input:disabled, .select:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}
.hint { font-size: var(--step--2); color: var(--muted); }

/* Aviso de error pegado al campo que lo causó */
.field-error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--danger);
  margin-top: .3rem;
}

/* --------------------------------------------------------------------------
   7. TARJETAS Y PANELES
   No todo es una tarjeta: el borde y la sombra dicen "objeto aparte".
   Usalos cuando eso sea cierto.
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.card-lift { box-shadow: var(--shadow); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem clamp(1rem, 3vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.panel-body { padding: clamp(1rem, 3vw, 1.4rem); }

/* --------------------------------------------------------------------------
   8. ESTADO
   El estado se lee de un vistazo: color + forma, no solo texto.
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  font-weight: 700;
  white-space: nowrap;
}
.pill-pending   { background: var(--warn-wash);   color: var(--warn); }
.pill-confirmed { background: var(--info-wash);   color: var(--info); }
.pill-completed { background: var(--ok-wash);     color: var(--ok); }
.pill-cancelled { background: var(--danger-wash); color: var(--danger); }

/* Avisos */
.note {
  display: flex;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  border: 1.5px solid;
  font-size: var(--step--1);
  line-height: 1.5;
}
.note-ok     { background: var(--ok-wash);     border-color: var(--ok);     color: var(--ok); }
.note-warn   { background: var(--warn-wash);   border-color: var(--warn);   color: var(--warn); }
.note-danger { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
.note-info   { background: var(--info-wash);   border-color: var(--info);   color: var(--info); }

/* --------------------------------------------------------------------------
   9. MÉTRICAS
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
}
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-label {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.stat-accent .stat-value { color: var(--turno); }

/* --------------------------------------------------------------------------
   10. TABLAS
   En celular una tabla no entra. Por eso cada fila se convierte en tarjeta,
   usando data-label para no perder el encabezado.
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

@media (max-width: 720px) {
  .table, .table thead, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: .75rem;
    padding: .35rem .2rem;
  }
  .table tbody tr:hover { background: var(--surface); }
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--line-soft);
    padding: .7rem .9rem;
    text-align: right;
  }
  .table td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    text-align: left;
    flex: none;
  }
  /* La celda de acciones ocupa todo el ancho, sin etiqueta */
  .table td.cell-actions { flex-direction: column; align-items: stretch; text-align: left; }
  .table td.cell-actions::before { display: none; }
}

/* Grupo de acciones dentro de una fila */
.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 720px) {
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. ESTADO VACÍO
   Una pantalla sin datos tiene que explicar qué hacer, nunca quedar en blanco.
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
  max-width: 52ch;
  margin-inline: auto;
}
.empty p { color: var(--muted); }

/* --------------------------------------------------------------------------
   12. SELECTOR DE HORARIOS
   Elegir la hora es la acción principal del cliente. Botones grandes, no un
   desplegable: se ve todo lo disponible de una y se toca cómodo.
   -------------------------------------------------------------------------- */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .5rem;
}
.slot {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--control-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .14s var(--ease), background-color .14s var(--ease),
              transform .14s var(--ease);
}
.slot:hover { border-color: var(--turno); transform: translateY(-1px); }
.slot[aria-pressed="true"] {
  background: var(--turno);
  border-color: var(--turno);
  color: var(--on-turno);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. CÓDIGO Y QR DEL COMPROBANTE
   -------------------------------------------------------------------------- */
.code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--ink);
}
.qr-frame {
  width: min(200px, 60vw);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 10px;
  background: #FFFFFF;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-frame img, .qr-frame canvas { width: 100% !important; height: auto !important; display: block; }

/* --------------------------------------------------------------------------
   14. CARGANDO
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   15. UTILIDADES
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   16. IMPRESIÓN
   Solo el comprobante. Sin botones, sin fondos, sin navegación.
   -------------------------------------------------------------------------- */
@media print {
  /* En papel siempre va la paleta clara. Sin esto, quien tiene el sistema en
     modo oscuro imprimía el comprobante con fondo negro y letras claras. */
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    --ink: #17171C;
    --ink-soft: #3A3A45;
    --muted: #555560;
    --line: #BDBDC4;
    --line-soft: #DDDDE2;
    --paper: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F2F0EB;
    --turno: #C33F18;
  }

  body { background: #FFF; color: #000; }
  .appbar, .actions, .btn, .no-print { display: none !important; }
  .card, .panel { box-shadow: none; border-color: #CCC; }
  .qr-frame { box-shadow: none; }
}

/* Marca del logo (T + punto) junto al nombre */
.brand { display: inline-flex; align-items: center; gap: .4em; }
.brand-mark { width: 1.15em; height: 1.15em; flex: none; }

/* Aviso para instalar la app (js/pwa.js) */
.pwa-aviso {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: grid; gap: .6rem; max-width: 520px; margin-inline: auto;
}
.pwa-aviso p { margin: 0; font-size: .95rem; }
.pwa-aviso-acciones { display: flex; gap: .5rem; justify-content: flex-end; }