/*
 * Carpeta:  css/
 * Fichero:  zuricar-tokens.css
 * Permisos: 644
 *
 * Tokens de diseño compartidos de ZURICAR (portal, app y web).
 * SOLO custom properties con prefijo --z-. Sin reglas de componentes.
 *
 * Tema CLARO por defecto (:root). Tema OSCURO con <html data-theme="dark">
 * (valores de la app Flutter). Documentación y ratios de contraste:
 * docs/rediseno/tokens.md. Vista previa: docs/rediseno/tokens-preview.html.
 *
 * Fuentes: Orbitron (cifras, botones), Poppins (resto) y Barlow Semi Condensed (matrículas), alojadas
 * en fonts/marca/ (SIL OFL 1.1). Los @font-face usan rutas relativas a este
 * fichero (../fonts/marca/).
 */

@font-face {
  font-family: "Orbitron";
  src: url("../fonts/marca/orbitron.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/marca/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/marca/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/marca/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Color: lienzo y superficies ---- */
  --z-fondo: #F6F4F0;            /* lienzo cálido-neutro, no blanco puro */
  --z-superficie: #FFFFFF;       /* tarjetas, paneles, inputs */
  --z-anidado: #E6E1D6;          /* zona hija de filas desplegables y hover de líneas de documento: distinta de la cabecera (superficie-alta) */
  --z-superficie-alta: #EFECE6;  /* cabeceras de tabla, hover, elementos elevados */
  --z-borde: #DDD8CF;
  --z-borde-fuerte: #8F897E;    /* bordes de inputs (contraste de componente >= 3:1 sobre superficie) */

  /* ---- Color: texto ---- */
  --z-texto: #14171C;
  --z-texto-suave: #4A515B;
  --z-texto-invertido: #F2F2F2;

  /* ---- Color: marca ---- */
  --z-marca: #EF8018;            /* rellenos, iconos grandes, acentos */
  --z-marca-hover: #D96F0B;
  --z-marca-oscuro: #BF6613;     /* web: --primary-dark */
  --z-marca-texto: #A34D00;      /* enlaces y texto pequeño de marca (AA sobre fondo y superficie) */
  --z-marca-suave: #FDEBD7;      /* fondo suave de marca */
  --z-sobre-marca: #0B0C0E;      /* texto sobre relleno naranja */
  --z-foco: #1F5FBF;             /* anillo de foco: contraste >= 3:1 con fondo y superficie, distinto del naranja */

  /* ---- Color: estados (texto/icono) ---- */
  --z-ok: #157A3E;
  --z-aviso: #8A5A00;
  --z-error: #C62828;
  --z-info: #1F5FBF;
  /* Estados: fondos suaves */
  --z-ok-suave: #E3F3E9;
  --z-aviso-suave: #FFF1CC;
  --z-error-suave: #FBE6E6;
  --z-info-suave: #E4EDFA;
  /* Estados: relleno sólido y texto sobre él */
  --z-ok-solido: #2ECC71;

  /* ---- Estados del vehículo en una orden (única fuente de color de los estados) ----
     recepcionado = azul · en curso = amarillo · esperando pieza = naranja · listo = verde
     (Cita, Entregado, Cerrada y cita pendiente = gris). Cada uno: color sólido, fondo suave y texto. */
  --z-est-rec: var(--z-info);        --z-est-rec-suave: var(--z-info-suave);   --z-est-rec-texto: var(--z-info);
  --z-est-cur: var(--z-aviso-solido); --z-est-cur-suave: var(--z-aviso-suave); --z-est-cur-texto: var(--z-aviso);
  --z-est-pie: var(--z-marca);       --z-est-pie-suave: var(--z-marca-suave);  --z-est-pie-texto: var(--z-marca-texto);
  --z-est-lis: var(--z-ok);          --z-est-lis-suave: var(--z-ok-suave);     --z-est-lis-texto: var(--z-ok);
  --z-est-ne: var(--z-texto-suave);  --z-est-ne-suave: var(--z-superficie-alta); --z-est-ne-texto: var(--z-texto-suave);
  --z-aviso-solido: #FFC107;
  --z-error-solido: #E04848;     /* app: rojoSalida */
  --z-sobre-solido: #0B0C0E;

  /* ---- Tipografía ---- */
  --z-font-display: "Orbitron", "Eurostile", "Bank Gothic", "Segoe UI", system-ui, sans-serif;
  --z-font-matricula: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --z-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --z-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --z-text-xs: 12px;
  --z-text-sm: 13px;
  --z-text-md: 14px;
  --z-text-base: 16px;
  --z-text-lg: 18px;
  --z-text-xl: 22px;
  --z-text-2xl: 28px;
  --z-text-3xl: 36px;
  --z-weight-regular: 400;
  --z-weight-medium: 500;
  --z-weight-semibold: 600;      /* Poppins 600 no está alojado: el navegador sintetiza; usar con moderación */
  --z-weight-bold: 700;          /* idem; Orbitron sí cubre 500-900 */
  --z-leading-tight: 1.2;
  --z-leading-normal: 1.5;
  --z-tracking-display: 0.04em;

  /* ---- Espaciado (base 4px) ---- */
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 12px;
  --z-space-4: 16px;
  --z-space-5: 20px;
  --z-space-6: 24px;
  --z-space-8: 32px;
  --z-space-10: 40px;
  --z-space-12: 48px;

  /* ---- Radios ---- */
  --z-radius-sm: 6px;
  --z-radius-md: 10px;
  --z-radius-lg: 14px;           /* app: input */
  --z-radius-xl: 18px;           /* app: tarjeta */
  --z-radius-pill: 999px;        /* app: botón */

  /* ---- Sombras (claro: suaves) ---- */
  --z-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06), 0 1px 1px rgba(20, 23, 28, 0.04);
  --z-shadow-md: 0 4px 12px rgba(20, 23, 28, 0.08), 0 1px 3px rgba(20, 23, 28, 0.06);
  --z-shadow-lg: 0 12px 32px rgba(20, 23, 28, 0.12), 0 2px 6px rgba(20, 23, 28, 0.06);
  --z-shadow-marca: 0 6px 18px rgba(239, 128, 24, 0.28);
  --z-shadow-foco: 0 0 0 3px rgba(31, 95, 191, 0.35);

  /* ---- Alturas de control ---- */
  --z-control-sm: 32px;
  --z-control-md: 40px;
  --z-control-lg: 52px;          /* táctil / app */

  /* ---- Transiciones ---- */
  --z-duration-fast: 120ms;
  --z-duration-base: 200ms;
  --z-duration-slow: 320ms;
  --z-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* web: --transition */
  --z-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Shell del portal: cabecera oscura en ambos temas y matrícula ---- */
  --z-cab-fondo: #14171C;
  --z-cab-texto: #F2F2F2;
  --z-cab-texto-suave: #C9CDD2;
  --z-cab-elevado: #2A2D33;
  --z-cab-borde: #3A3F47;
  --z-matricula-fondo: #FFFFFF;
  --z-matricula-ue: #1F4FA8;     /* franja azul UE de la matrícula */

  /* ---- Capas (z-index) ---- */
  --z-layer-base: 1;
  --z-layer-sticky: 100;
  --z-layer-nav: 1000;
  --z-layer-dropdown: 1100;
  --z-layer-modal: 1200;
  --z-layer-toast: 1300;
}

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

  --z-fondo: #111317;            /* app: fondo */
  --z-superficie: #1B1E23;       /* app: tarjeta */
  --z-anidado: #353941;          /* zona hija de filas desplegables y hover de líneas de documento */
  --z-superficie-alta: #2A2D33;  /* app: fondoAlto */
  --z-borde: #2C3038;            /* app: borde */
  --z-borde-fuerte: #6B727D;

  --z-texto: #F2F2F2;
  --z-texto-suave: #AEAFB0;      /* app: texto al 70 % sobre fondo */
  --z-texto-invertido: #14171C;

  --z-marca: #EF8018;
  --z-marca-hover: #F59A3F;
  --z-marca-oscuro: #BF6613;
  --z-marca-texto: #EF8018;      /* sobre oscuro el naranja ya cumple AA */
  --z-marca-suave: rgba(239, 128, 24, 0.16);
  --z-sobre-marca: #0B0C0E;      /* app: sobreNaranja */
  --z-foco: #6FA8FF;

  --z-ok: #2ECC71;               /* app: ok */
  --z-aviso: #FFC107;            /* app: aviso */
  --z-error: #FF7B7B;            /* app: error */
  --z-info: #6FA8FF;
  --z-ok-suave: rgba(46, 204, 113, 0.14);
  --z-aviso-suave: rgba(255, 193, 7, 0.14);
  --z-error-suave: rgba(255, 123, 123, 0.14);
  --z-info-suave: rgba(111, 168, 255, 0.14);
  --z-ok-solido: #2ECC71;
  --z-aviso-solido: #FFC107;
  --z-error-solido: #E04848;
  --z-sobre-solido: #0B0C0E;

  /* Sombras oscuras con brillo naranja, como la app y la web */
  --z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --z-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
  --z-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);   /* web: --shadow-card */
  --z-shadow-marca: 0 0 30px rgba(239, 128, 24, 0.3); /* web: --shadow-glow */
  --z-shadow-foco: 0 0 0 3px rgba(111, 168, 255, 0.45);
}

/* Paleta «Tierra» de los paneles (Previsión, Contabilidad, Configuración, Panel general):
   se activa con la clase z-paleta-tierra en <html>. La marca no cambia. */
html.z-paleta-tierra {
  --z-ok: #3F6B46;
  --z-aviso: #7A5A12;
  --z-error: #9C4430;
  --z-info: #2F6F7E;
  --z-ok-suave: #E4EEE3;
  --z-aviso-suave: #F8EED6;
  --z-error-suave: #F6E4DE;
  --z-info-suave: #E0EEF0;
  --z-ok-solido: #5E8C61;
  --z-aviso-solido: #D2A03D;
  --z-error-solido: #B5533C;
}

html.z-paleta-tierra[data-theme="dark"] {
  --z-ok: #A3CBA5;
  --z-aviso: #E6C27A;
  --z-error: #E8957F;
  --z-info: #5FA6B5;
  --z-ok-suave: rgba(141, 187, 143, 0.16);
  --z-aviso-suave: rgba(221, 178, 90, 0.14);
  --z-error-suave: rgba(208, 112, 90, 0.16);
  --z-info-suave: rgba(95, 166, 181, 0.16);
  --z-ok-solido: #8DBB8F;
  --z-aviso-solido: #DDB25A;
  --z-error-solido: #D0705A;
}