/* ============================================================
   Banquetería Control — Design Tokens
   Sprint 1 (frontend-fundaciones) — 35 variables + regla x-cloak.

   Extraído literal (byte-a-byte hex) de:
     banqueteria_control/app/css/styles.css:10-94
     (:root { --color-primario ... --alto-header }).

   Los breakpoints Tailwind-like son adición nueva del sprint
   (ratificados en Q-S1-J — sprint-ratifications #321).
   ============================================================ */
:root {
  /* === Primarios (styles.css:12-17) === */
  --color-primario: #1B3A5C;
  --color-primario-claro: #2A5080;
  --color-primario-oscuro: #112540;
  --color-secundario: #4A6741;
  --color-secundario-claro: #5C7F52;
  --color-secundario-oscuro: #384F30;

  /* === Centros de Costo (styles.css:20-34) === */
  --cc-cocina: #E8A838;
  --cc-cocina-claro: #F0BD60;
  --cc-cocina-oscuro: #C48820;
  --cc-logistica: #4A90D9;
  --cc-logistica-claro: #6AA8E8;
  --cc-logistica-oscuro: #2A70B8;
  --cc-montaje: #7B4FA3;
  --cc-montaje-claro: #9668BE;
  --cc-montaje-oscuro: #5C3880;
  --cc-servicio: #D94F4F;
  --cc-servicio-claro: #E87070;
  --cc-servicio-oscuro: #B83030;
  --cc-admin: #1B3A5C;
  --cc-admin-claro: #2A5080;
  --cc-admin-oscuro: #112540;

  /* === Colores de Estado (styles.css:37-40) === */
  --color-exito: #28A745;
  --color-advertencia: #FFC107;
  --color-peligro: #DC3545;
  --color-info: #17A2B8;

  /* === Neutros (styles.css:43-52) === */
  --color-blanco: #FFFFFF;
  --color-fondo: #F5F7FA;
  --color-fondo-card: #FFFFFF;
  --color-borde: #DEE2E6;
  --color-borde-suave: #E9ECEF;
  --color-texto: #2C3E50;
  --color-texto-suave: #6C757D;
  --color-texto-claro: #ADB5BD;
  --color-sombra: rgba(0, 0, 0, 0.08);
  --color-sombra-hover: rgba(0, 0, 0, 0.15);

  /* === Tipografía (styles.css:55-61) === */
  --fuente-principal: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fuente-mono: 'Consolas', 'Monaco', monospace;
  --tamano-base: 16px;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* === Espaciado 8pt (styles.css:64-70) === */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 16px;
  --espacio-lg: 24px;
  --espacio-xl: 32px;
  --espacio-xxl: 48px;
  --espacio-xxxl: 64px;

  /* === Bordes (styles.css:73-77) === */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 12px;
  --radio-xl: 16px;
  --radio-pill: 999px;

  /* === Sombras (styles.css:80-83) === */
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --sombra-xl: 0 16px 40px rgba(0, 0, 0, 0.15);

  /* === Transiciones (styles.css:86-88) === */
  --transicion-rapida: 150ms ease;
  --transicion-normal: 250ms ease;
  --transicion-lenta: 400ms ease;

  /* === Layout (styles.css:91-93) === */
  --ancho-maximo: 1200px;
  --ancho-sidebar: 260px;
  --alto-header: 64px;

  /* === Rol → color (derivado de CONFIG.ROLES) === */
  --rol-gerencia: #1B3A5C;
  --rol-afc: #4A6741;
  --rol-cocina: #E8A838;
  --rol-op-externas: #4A90D9;
  --rol-op-internas: #7B4FA3;

  /* === Breakpoints Tailwind-like (Q-S1-J, adición del sprint) === */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Alpine: oculta elementos con x-cloak hasta que Alpine hidrata. */
[x-cloak] {
  display: none !important;
}