/* ==========================================================================
   Llado CRM - Tokens de diseño (sistema visual OmniPRIT)
   Fuente: OmniPRIT-Manual-de-marca/03-Colores/OmniPRIT-colores.css
   Se carga antes de llado-custom.css. Cambiar un color = cambiarlo aquí.
   ========================================================================== */

/* --- Paleta de marca (copia literal del manual) --- */
:root {
  --omni-azul: #0047FF;           /* Color principal: botones, enlaces y acentos */
  --omni-tinta: #0C1424;          /* Títulos y textos sobre fondo claro */
  --omni-noche: #060A14;          /* Fondos oscuros de marca */
  --omni-blanco: #FFFFFF;
  --omni-azul-profundo: #0A1F7A;  /* Fondos de bloque y degradados oscuros */
  --omni-azul-brillante: #2E6BFF; /* Estados activos y realces sobre claro */
  --omni-azul-claro: #3B82F6;     /* Interfaz de la app / primario en oscuro */
  --omni-azul-cielo: #7FA6FF;     /* Acentos y etiquetas sobre fondos oscuros */
  --omni-azul-suave: #EAF0FF;     /* Fondos de tarjetas y resaltados suaves */
  --omni-tinta-2: #2A3550;        /* Texto de párrafo */
  --omni-gris: #5E6B85;           /* Texto secundario y notas */
  --omni-linea: #E2E0D8;          /* Bordes y divisores */
  --omni-papel: #F5F4F0;          /* Fondo cálido */
  --omni-noche-2: #0B1222;        /* Superficies sobre fondo oscuro */
  --omni-noche-3: #121B30;        /* Tarjetas sobre fondo oscuro */
  --omni-verde: #109A55;          /* Éxito */
  --omni-ambar: #8A4F00;          /* Avisos (sobre fondo #FBF1E2) */
  --omni-rojo: #EF4444;           /* Errores y acciones destructivas */
}

/* --- Derivados para la interfaz (no son colores de marca: contraste y superficies oscuras) --- */
:root {
  --omni-noche-borde: #1E2942;    /* bordes sobre Noche */
  --omni-noche-input: #2A3654;    /* bordes de campos sobre Noche */
  --omni-texto-noche: #C9D3E6;    /* párrafo sobre Noche */
  --omni-texto-noche-2: #8C97AD;  /* texto secundario sobre Noche */
  --llado-success-solid: #0B7A43; /* verde éxito oscurecido: AA con texto blanco */
  --llado-success-solid-hover: #086536;
  --llado-danger-solid: #DC2626;  /* rojo oscurecido: AA con texto blanco */
  --llado-danger-solid-hover: #B91C1C;
  --llado-danger-on-dark: #FCA5A5;
}

/* --- Tokens semánticos de la app: modo claro --- */
:root {
  /* Primario */
  --llado-primary: var(--omni-azul);
  --llado-primary-rgb: 0, 71, 255;
  --llado-primary-hover: #003BE5;          /* último tono del degradado del símbolo */
  --llado-primary-dark: var(--llado-primary-hover);
  --llado-primary-light: var(--omni-azul-suave);
  --llado-focus-ring: rgba(0, 71, 255, 0.18);

  /* Texto */
  --llado-text-heading: var(--omni-tinta);
  --llado-text-dark: var(--omni-tinta-2);
  --llado-text-muted: var(--omni-gris);
  --llado-text-primary: var(--omni-azul);
  --llado-card-header-text: var(--omni-tinta);
  --llado-on-primary: #FFFFFF;

  /* Superficies y bordes */
  --llado-bg-page: var(--omni-papel);
  --llado-bg-white: #FFFFFF;
  --llado-bg-light: var(--omni-papel);
  --llado-bg-subtle: #FAF9F6;              /* cabeceras de tabla, input-group */
  --llado-card-header-bg: #FFFFFF;
  --llado-border: var(--omni-linea);
  --llado-border-input: #CFCCC2;           /* algo más de contraste que la línea */
  --llado-row-hover: rgba(0, 71, 255, 0.035);
  --llado-shadow-sm: 0 1px 2px rgba(12, 20, 36, 0.05);
  --llado-shadow-md: 0 6px 16px -6px rgba(12, 20, 36, 0.14);
  --llado-shadow-lg: 0 24px 48px -16px rgba(12, 20, 36, 0.28);
  --llado-radius: 8px;
  --llado-radius-lg: 12px;

  /* Estados: color de relleno, texto legible sobre claro y fondo suave */
  --llado-success: var(--omni-verde);
  --llado-success-text: #0B7A43;
  --llado-success-light: #E6F5ED;
  --llado-warning: var(--omni-ambar);
  --llado-warning-text: var(--omni-ambar);
  --llado-warning-light: #FBF1E2;
  --llado-danger: var(--omni-rojo);
  --llado-danger-text: #B91C1C;
  --llado-danger-light: #FDECEC;
  --llado-info: var(--omni-azul-claro);
  --llado-info-text: var(--omni-azul-brillante);
  --llado-info-light: var(--omni-azul-suave);
  --llado-neutral: var(--omni-gris);
  --llado-neutral-light: #EEEDE8;

  /* Estados de contenedor (semánticos, igual que las clases badge-*) */
  --container-available: var(--llado-success-text);
  --container-rented: var(--llado-warning-text);
  --container-maintenance: var(--llado-danger-text);
  --container-transit: var(--llado-info-text);

  /* Barra lateral y cabecera */
  --llado-sidebar-bg: #FFFFFF;
  --llado-sidebar-active-bg: var(--omni-azul-suave);
  --llado-sidebar-active-text: var(--omni-azul);
  --llado-header-bg: #FFFFFF;

  /* Tipografía (manual: Inter para la interfaz, Archivo para títulos, Plex Mono para datos) */
  --llado-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --llado-font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --llado-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --llado-tracking-title: -0.03em;
  --llado-tracking-eyebrow: 0.14em;
}

/* --- Modo oscuro (la plantilla pone body.dark-only) --- */
body.dark-only {
  --llado-primary: var(--omni-azul-claro);
  --llado-primary-rgb: 59, 130, 246;
  --llado-primary-hover: var(--omni-azul-brillante);
  --llado-primary-light: rgba(59, 130, 246, 0.16);
  --llado-focus-ring: rgba(59, 130, 246, 0.3);

  --llado-text-heading: #FFFFFF;
  --llado-text-dark: var(--omni-texto-noche);
  --llado-text-muted: var(--omni-texto-noche-2);
  --llado-text-primary: var(--omni-azul-cielo);
  --llado-card-header-text: #F1F4FA;

  --llado-bg-page: var(--omni-noche);
  --llado-bg-white: var(--omni-noche-3);
  --llado-bg-light: var(--omni-noche-2);
  --llado-bg-subtle: var(--omni-noche-2);
  --llado-card-header-bg: var(--omni-noche-3);
  --llado-border: var(--omni-noche-borde);
  --llado-border-input: var(--omni-noche-input);
  --llado-row-hover: rgba(59, 130, 246, 0.07);
  --llado-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --llado-shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  --llado-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.6);

  --llado-success-text: #4CC98A;
  --llado-success-light: rgba(16, 154, 85, 0.16);
  --llado-warning-text: #F2B45A;
  --llado-warning-light: rgba(242, 180, 90, 0.14);
  --llado-danger-text: #F87171;
  --llado-danger-light: rgba(239, 68, 68, 0.16);
  --llado-info-text: var(--omni-azul-cielo);
  --llado-info-light: rgba(127, 166, 255, 0.14);
  --llado-neutral: var(--omni-texto-noche-2);
  --llado-neutral-light: rgba(140, 151, 173, 0.14);

  --llado-sidebar-bg: var(--omni-noche-2);
  --llado-sidebar-active-bg: rgba(59, 130, 246, 0.16);
  --llado-sidebar-active-text: #FFFFFF;
  --llado-header-bg: var(--omni-noche-2);
}