/* ─────────────────────────────────────────────────────────────────────────
   kc-tokens.css — Sistema de diseño de Kids Club Café: la ÚNICA fuente de
   colores, tipografía, espacios, radios y sombras (MAPA_DEL_SISTEMA §16).

   Tres experiencias, mismos tokens:
     · Panel (administración, Mi oficina): tema claro, el de :root.
     · Operación (tablets: cocina, operación, check-in): [data-kc-tema="operacion"].
     · Público (reservar, Mi Club, gift cards): usa la marca y los pasteles.

   Reglas que fija este archivo (antes cada pantalla resolvía a su manera):
     · Botón principal = magenta fuerte. Uno por pantalla/zona.
     · Elegido = relleno azul marino + ✓ (nunca solo un borde o un color claro).
     · Estado (ok / atención / error / info) = color + ícono, nunca solo color.
     · Todo texto con contraste ≥ 4,5 (lo verifica tests/diseno.test.js).
   Ver la guía viva en /admin/diseno.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Marca (la de la reserva pública y el hub) ─────────────────────────── */
  --kc-navy: #262848;            /* estructura: barra de arriba, títulos, elegido */
  --kc-navy-2: #3A3D63;          /* hover sobre azul marino */
  --kc-navy-suave: #4B4F6E;
  --kc-magenta: #E0309F;         /* acento de marca: superficies grandes, íconos, gráficos */
  --kc-magenta-fuerte: #C8237F;  /* botones y texto magenta (blanco encima: 5,25) */
  --kc-magenta-oscuro: #A51D6B;  /* hover / apretado del botón principal */
  --kc-magenta-suave: #FDF0F7;   /* fondos de lo destacado */
  --kc-magenta-borde: #F6C6E2;
  --kc-sobre-primario: #FFFFFF;  /* texto sobre el botón principal */
  --kc-cyan: #0EBBEC;
  --kc-naranja: #F08527;
  --kc-verde-marca: #3DA585;
  --kc-pastel-celeste: #B8DCEC;
  --kc-pastel-rosa: #F5DBF0;
  --kc-pastel-amarillo: #FFF1C8;

  /* ── Neutros (tema claro) ──────────────────────────────────────────────── */
  --kc-fondo: #F7F5F2;           /* fondo de página, cálido */
  --kc-superficie: #FFFFFF;      /* tarjetas, modales */
  --kc-superficie-2: #FAF9F7;    /* encabezados de tarjeta, filas alternas */
  --kc-linea: #E7E3DD;
  --kc-linea-fuerte: #D6D1C9;
  --kc-texto: #1F2033;           /* 14,7 sobre el fondo */
  --kc-texto-2: #5B5E73;         /* secundario: 5,9 sobre el fondo */
  --kc-texto-3: #8A8C9C;         /* solo placeholders y cosas que no hay que leer */

  /* ── Estados: siempre con ícono (✅ ⚠️ ⛔ ℹ️) además del color ─────────── */
  --kc-ok: #15803D;        --kc-ok-fondo: #F0FDF4;        --kc-ok-borde: #BBF7D0;
  --kc-atencion: #B45309;  --kc-atencion-fondo: #FFFBEB;  --kc-atencion-borde: #FDE68A;
  --kc-error: #B91C1C;     --kc-error-fondo: #FEF2F2;     --kc-error-borde: #FECACA;
  --kc-info: #0369A1;      --kc-info-fondo: #F0F9FF;      --kc-info-borde: #BAE6FD;

  /* ── Elegido y foco ────────────────────────────────────────────────────── */
  --kc-elegido: var(--kc-navy);
  --kc-elegido-texto: #FFFFFF;
  --kc-foco: rgba(224, 48, 159, .55);

  /* ── Barra de arriba (igual en todo el panel) ──────────────────────────── */
  --kc-barra: var(--kc-navy);
  --kc-barra-texto: #FFFFFF;
  --kc-barra-texto-2: rgba(255, 255, 255, .72);
  --kc-barra-boton: rgba(255, 255, 255, .14);
  --kc-barra-boton-hover: rgba(255, 255, 255, .24);
  --kc-barra-borde: rgba(255, 255, 255, .22);

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --kc-fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kc-fuente-titulo: 'Baloo 2', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kc-t-xs: 12px; --kc-t-sm: 13px; --kc-t-md: 15px; --kc-t-lg: 18px; --kc-t-xl: 22px; --kc-t-2xl: 28px;

  /* ── Espacios, radios, sombras, toque ──────────────────────────────────── */
  --kc-e-1: 4px; --kc-e-2: 8px; --kc-e-3: 12px; --kc-e-4: 16px; --kc-e-5: 24px; --kc-e-6: 32px;
  --kc-r-sm: 8px; --kc-r-md: 12px; --kc-r-lg: 16px; --kc-r-pill: 999px;
  --kc-sombra: 0 1px 2px rgba(38, 40, 72, .06), 0 2px 6px rgba(38, 40, 72, .07);
  --kc-sombra-media: 0 4px 14px rgba(38, 40, 72, .10), 0 2px 5px rgba(38, 40, 72, .06);
  --kc-sombra-alta: 0 18px 44px rgba(38, 40, 72, .18), 0 5px 12px rgba(38, 40, 72, .08);
  --kc-toque: 44px;          /* alto mínimo de algo que se toca */
  --kc-toque-tablet: 56px;   /* en las tablets de operación */
  --kc-curva: cubic-bezier(.22, .61, .36, 1);
}

/* ── Operación: tablets de cocina, operación y check-in (tema oscuro) ──────
   Se activa con <html data-kc-tema="operacion">. Mismos nombres, otros valores:
   los componentes .kc-* funcionan igual en los dos temas. */
[data-kc-tema="operacion"] {
  --kc-fondo: #0B1220;
  --kc-superficie: #111827;
  --kc-superficie-2: #1F2937;
  --kc-linea: #263041;
  --kc-linea-fuerte: #374151;
  --kc-texto: #F3F4F6;        /* 17 sobre el fondo */
  --kc-texto-2: #A3A9B8;      /* 7,5 sobre la superficie */
  --kc-texto-3: #6B7280;
  --kc-magenta-fuerte: #F472B6;  /* sobre oscuro el magenta tiene que ser más claro */
  --kc-magenta-oscuro: #EC4899;
  --kc-magenta-suave: rgba(236, 72, 153, .14);
  --kc-magenta-borde: rgba(236, 72, 153, .45);
  --kc-sobre-primario: #111827;  /* sobre el magenta claro va texto oscuro (6,7) */
  --kc-ok: #4ADE80;        --kc-ok-fondo: rgba(34, 197, 94, .12);   --kc-ok-borde: rgba(34, 197, 94, .4);
  --kc-atencion: #FBBF24;  --kc-atencion-fondo: rgba(245, 158, 11, .12); --kc-atencion-borde: rgba(245, 158, 11, .4);
  --kc-error: #F87171;     --kc-error-fondo: rgba(239, 68, 68, .12);  --kc-error-borde: rgba(239, 68, 68, .4);
  --kc-info: #7DD3FC;      --kc-info-fondo: rgba(14, 165, 233, .12);  --kc-info-borde: rgba(14, 165, 233, .4);
  --kc-elegido: #F3F4F6;
  --kc-elegido-texto: #111827;
  --kc-barra: #0F172A;
  --kc-sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --kc-sombra-media: 0 6px 18px rgba(0, 0, 0, .35);
  --kc-sombra-alta: 0 20px 60px rgba(0, 0, 0, .45);
  --kc-toque: var(--kc-toque-tablet);
}