/* =============================================================
   DPROMA Dashboard — Contrato visual SIO · fuente única de verdad
   © DPROMA. Todos los derechos reservados.

   Ningún otro archivo define color, radio, sombra ni tipografía.
   Si un componente necesita un valor nuevo, se agrega aquí primero.

   Fuente: _sio-tokens.css (propuesta v2, 2026-07-28).
   Plan de adopción: docs/PLAN_SIO_RESPONSIVE.md
   ============================================================= */

/* ── Tipografía embebida — Barlow Semi Condensed (DIN 1451 libre, OFL) ──
   Auto-hospedada en /assets/fonts/ para no bloquear el render con una
   petición externa. */
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-semicondensed-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-semicondensed-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-semicondensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-semicondensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ══ Tipografía ══════════════════════════════════════════════
     SIO expresa la escala en px. Aquí va en rem con el mismo valor
     computado: px en font-size impide que el usuario escale el texto
     desde el navegador (WCAG 1.4.4). El resultado visual es idéntico. */
  --font-ui:    'Barlow Semi Condensed', 'Bahnschrift', 'DIN Alternate', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand: 'Ethnocentric Rg', 'Michroma', var(--font-ui);  /* solo momentos de marca */

  --fs-meta:  0.75rem;    /* 12px · captions, metadatos */
  --fs-dense: 0.8125rem;  /* 13px · tablas densas */
  --fs-base:  0.875rem;   /* 14px · base UI */
  --fs-sub:   1rem;       /* 16px · subtítulos */
  --fs-lg:    1.125rem;   /* 18px · extensión: no está en SIO, la usan 2 vistas */
  --fs-2xl:   1.5rem;     /* 24px · extensión */
  /* Fluidos: escalan con el ancho en vez de saltar en un breakpoint.
     Solo donde el salto se nota — la UI densa se queda fija a propósito,
     una tabla no debe cambiar de tamaño mientras se redimensiona. */
  --fs-title: clamp(1.125rem, 1.02rem + 0.5vw, 1.25rem);   /* 18 → 20px */
  --fs-kpi:   clamp(1.5rem,   1.24rem + 1.3vw, 1.875rem);  /* 24 → 30px */

  /* Respiro del contenedor de vista */
  --pad-view: clamp(0.875rem, 0.55rem + 1.6vw, 1.5rem);

  /* ══ Espaciado — escala de 4 px ══════════════════════════════ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  --row-comfy: 40px;    /* densidad de tabla cómoda */
  --row-compact: 32px;  /* densidad compacta (con toggle) */

  /* ══ Radios ══════════════════════════════════════════════════ */
  --r-ctrl: 6px; --r-card: 10px; --r-modal: 16px; --r-pill: 999px;

  /* ══ Movimiento ══════════════════════════════════════════════ */
  --dur-micro: 120ms;  /* hover, press, checkbox */
  --dur-base: 200ms;   /* dropdowns, tema, popovers */
  --dur-enter: 300ms;  /* entrada de vistas — techo duro de la UI */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* solo píldora de pestañas */
  --stagger: 40ms;

  /* ══ Foco (idéntico en ambos temas) ══════════════════════════ */
  --focus-w: 2px;
  --focus-offset: 2px;

  /* ══ Capas — z-index en escala, no en números mágicos ════════
     Antes había 9999, 9990, 9502… Un valor así no indica prioridad,
     indica que nadie sabía cuál usar. */
  --z-base: 0;
  --z-sticky: 10;      /* encabezado de tabla, primera columna anclada */
  --z-rail: 20;        /* riel lateral en escritorio */
  --z-dropdown: 30;    /* desplegables, autocompletar */
  --z-overlay: 40;     /* velo detrás de un modal o del panel móvil */
  --z-modal: 50;       /* modal, panel de navegación móvil */
  --z-fab: 55;         /* botón flotante: sobre el panel, para poder cerrarlo */
  --z-toast: 60;       /* avisos: siempre visibles, incluso sobre un modal */
  --z-tour: 70;        /* el tour señala elementos, va sobre todo lo anterior */
  --z-login: 80;       /* la sesión cerrada tapa la aplicación entera */
  --z-splash: 90;      /* pantalla de carga inicial: lo primero y lo más alto */

  /* ══ Armazón ═════════════════════════════════════════════════ */
  --rail-w: 240px;
  --rail-w-collapsed: 64px;
  --header-h: 56px;
  --rail-transition: var(--dur-base) var(--ease-in-out);

  /* Objetivo táctil mínimo: 44px. Se usa en controles de móvil. */
  --touch-min: 44px;

  color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════
   TEMA CLARO — neutro 60 / azul-chrome 30 / verde 10
   Es la base: se aplica sin atributo y cuando [data-theme="light"].
   ══════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --chrome:      #1E4E79;   /* azul de marca — SOLO estructura, nunca fondo de página */
  --chrome-ink:  #F2F5F7;
  --chrome-dim:  rgba(242,245,247,.72);
  --chrome-line: rgba(242,245,247,.14);
  /* Acento legible SOBRE el azul-chrome. El --accent de la app (#3E7A4C)
     da ~2:1 contra el chrome y no se ve; el riel necesita el suyo. */
  --chrome-accent: #8FD3A2;

  --bg:        #F2F5F7;
  --surface:   #FAFCFD;   /* nunca blanco absoluto — EN 301 549 */
  --surface-2: #E7EDF3;
  --border:    rgba(27,36,48,.14);
  --border-2:  rgba(27,36,48,.26);

  --text:   #1B2430;
  --text-2: #4C5A6B;
  --text-3: #66717F;

  --accent:      #3E7A4C;   /* acción — distinto del verde de estado a propósito */
  --accent-ink:  #F7FAF9;
  --accent-soft: rgba(62,122,76,.10);

  /* Semáforo de 5 estados */
  --ok:    #2F8F6F;  --ok-fill:    rgba(47,143,111,.12);
  --warn:  #B98A1E;  --warn-fill:  rgba(185,138,30,.14);
  --err:   #C24238;  --err-fill:   rgba(194,66,56,.11);
  --block: #9678CC;  --block-fill: rgba(150,120,204,.13);
  --pause: #4A5560;  --pause-fill: rgba(74,85,96,.11);

  /* Variante "ink": mismo estado, oscurecido a AA para texto e iconos
     sobre superficie clara. */
  --ok-ink: #22705A; --warn-ink: #7E5B0E; --err-ink: #B03A31;
  --block-ink: #6D4FA3; --pause-ink: #4A5560;

  /* Fondos OPACOS de estado: el contraste no depende del contenedor */
  --ok-bg:#E2EFEC; --warn-bg:#F1ECDE; --err-bg:#F4E8E7;
  --block-bg:#EDEBF7; --pause-bg:#E7EAEC;

  --link: #2F6B3C;

  /* Series de gráfica — nunca reutilizan color de estado */
  --serie-1: #2C6CA8;
  --serie-2: #7A5FA8;
  --serie-3: #B5651D;   /* extensión: SIO da dos series y los OEM son tres */

  /* Categóricos OEM — son marcas, no estados. Se apoyan en las series
     para no colisionar con el semáforo. --serie-2 y --block quedan
     cercanos en tono; se distinguen por contexto (etiqueta vs píldora)
     y porque nunca aparecen en la misma celda. */
  --oem-changan: var(--serie-1);
  --oem-ocn:     var(--serie-3);
  --oem-fame:    var(--serie-2);

  --sh-rest:  0 1px 2px rgba(19,29,43,.07);
  --sh-float: 0 6px 18px rgba(19,29,43,.10);
  --sh-modal: 0 24px 60px rgba(19,29,43,.22);

  /* Velo de modales y del tour */
  --overlay: rgba(11,18,26,.55);
  /* Anillo de foco de los campos — más suave que el outline de :focus-visible,
     que sigue siendo el indicador de teclado */
  --ring: rgba(62,122,76,.26);
  /* Texto sobre un relleno de estado saturado (botón peligro, cinta).
     En claro los estados son oscuros, así que el texto va claro. */
  --on-status: #FAFCFD;
  /* Filo del riel contra el contenido */
  --rail-edge: 1px 0 0 rgba(11,18,26,.14);
}

/* ══════════════════════════════════════════════════════════════
   TEMA OSCURO
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --chrome:      #122740;
  --chrome-ink:  #E7ECF2;
  --chrome-dim:  rgba(231,236,242,.72);
  --chrome-line: rgba(231,236,242,.10);
  --chrome-accent: #8FD3A2;

  --bg:        #10161F;
  --surface:   #171F2C;
  --surface-2: #1D2735;
  --border:    rgba(231,236,242,.12);
  --border-2:  rgba(231,236,242,.24);

  --text:   #E7ECF2;
  --text-2: #A8B3C2;
  --text-3: #8B96A6;

  --accent:      #4A8F5A;
  --accent-ink:  #08120D;
  --accent-soft: rgba(74,143,90,.16);

  --ok:    #4FBF98;  --ok-fill:    rgba(79,191,152,.14);
  --warn:  #E8C24C;  --warn-fill:  rgba(232,194,76,.14);
  --err:   #EE6E5F;  --err-fill:   rgba(238,110,95,.14);
  --block: #C0A9F0;  --block-fill: rgba(192,169,240,.14);
  --pause: #6B7684;  --pause-fill: rgba(107,118,132,.20);

  /* En oscuro el color de estado ya cumple AA sobre superficie: ink = base */
  --ok-ink: #4FBF98; --warn-ink: #E8C24C; --err-ink: #EE6E5F;
  --block-ink: #C0A9F0; --pause-ink: #98A4B4;

  --ok-bg:#1F353B; --warn-bg:#343630; --err-bg:#352A33;
  --block-bg:#2F3247; --pause-bg:#28303E;

  --link: #7FC08F;

  --serie-1: #6FA8DC;
  --serie-2: #B69BE0;
  --serie-3: #E0A063;

  --sh-rest:  0 1px 2px rgba(0,0,0,.35);
  --sh-float: 0 6px 18px rgba(0,0,0,.40);
  --sh-modal: 0 24px 60px rgba(0,0,0,.55);

  --overlay: rgba(0,0,0,.66);
  --ring: rgba(74,143,90,.34);
  /* En oscuro los estados son claros, así que el texto encima va oscuro */
  --on-status: #10161F;
  --rail-edge: 1px 0 0 rgba(0,0,0,.30);
}

/* ══════════════════════════════════════════════════════════════
   Reducción de movimiento
   No es "cero animación": se conservan opacidad y color, se elimina
   todo desplazamiento y escala.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms; --dur-base: 120ms; --dur-enter: 120ms;
    --ease-spring: linear; --stagger: 0ms;
    --rail-transition: 1ms linear;
  }
}