/* INASOR Oficina Técnica · tokens (PLAN-067, tarea 11: identidad corporativa).
   Tres capas: primitivos de marca (--esh-*) → semánticos (--c-*) → componente.
   Las pantallas solo usan los semánticos y los de componente: para cambiar el aspecto
   se cambian VALORES aquí, nunca nombres. Los primitivos no se usan fuera de este fichero.

   Marca de Inasor, sacada de https://inasor.com/ (21/10/2026): verde #038A4D, gris #5F6268, Sintony. Base heredada de ESshipping: verde corporativo #1C735D (cabecera,
   pie, theme-color), menta #2DC29C (detalle), casi negro #2A282A, IBM Plex Sans, esquinas
   rectas. El gris de texto de la web (#808080, 3,95:1) NO se usa: no llega a AA.

   Todas las parejas texto/fondo van en colores opacos #rrggbb para que su contraste se pueda
   medir (tests/test_marca.php las comprueba en los dos temas). Cifras en eshipping/DESIGN.md. */

:root {
  /* ---------- Primitivos de marca (nombres heredados, valores de Inasor) ---------- */
  --esh-verde-900: #06331f;   /* cabecera en tema oscuro */
  --esh-verde-800: #075733;   /* verde oscuro de la web de Inasor: hover del acento y cabecera */
  --esh-verde-700: #027a44;   /* verde corporativo #038A4D oscurecido un punto para texto (5,43:1 sobre blanco) */
  --esh-verde-100: #e1f3e9;   /* tinte del acento */
  --esh-menta-500: #27cc82;   /* verde claro de la web de Inasor: acento en tema oscuro */
  --esh-menta-300: #5fdca3;   /* hover del verde claro */
  --esh-tinta-900: #1f2422;   /* casi negro (la web usa #252525) */
  --esh-tinta-600: #4f5357;   /* gris de marca #5F6268 oscurecido para texto secundario */
  --esh-tinta-400: #6b6f74;
  --esh-niebla-50: #f5f7f6;
  --esh-niebla-100: #edf1ef;
  --esh-niebla-150: #eef2f0;
  --esh-niebla-200: #dce3e0;
  --esh-niebla-300: #bfcac5;
  --esh-niebla-500: #86938d;
  --esh-noche-950: #0d1311;
  --esh-noche-900: #111815;
  --esh-noche-850: #151c19;
  --esh-noche-800: #1d2622;
  --esh-noche-700: #29332f;
  --esh-noche-600: #3a4641;

  /* ---------- Escalas ---------- */
  --c-esp-1: 4px;  --c-esp-2: 8px;  --c-esp-3: 12px; --c-esp-4: 16px;
  --c-esp-6: 24px; --c-esp-8: 32px; --c-esp-12: 48px;
  /* Esquinas casi rectas, como la web de ESshipping (botones de 0-1 px). Un panel denso con
     esquinas de 0 px dentellea en pantallas de baja densidad: 2 px en campos y botones y 4 px
     en fichas se leen rectos y no se ven serrados. La pastilla deja de ser una píldora: una
     etiqueta rectangular, como la de un bulto o un contenedor. */
  --c-radio-campo: 2px; --c-radio-ficha: 4px; --c-radio-pastilla: 2px;
  /* Superficie que envuelve controles pegados a su borde: radio de fuera ≥ radio de dentro. */
  --c-radio-ficha-alta: 6px;
  --c-tipo-meta: .8125rem; --c-tipo-tabla: .875rem; --c-tipo-cuerpo: 1rem;
  --c-tipo-seccion: 1.125rem; --c-tipo-ficha: 1.375rem; --c-tipo-pagina: 1.75rem;
  /* Sintony solo existe en 400 y 700: 500 se pinta como 400 y 600 como 700. Los nombres se
     quedan (los usan todas las pantallas); el contraste de pesos real es 400 frente a 700. */
  --c-peso-normal: 400; --c-peso-medio: 500; --c-peso-fuerte: 600;
  --c-fuente: 'Sintony', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Curvas: `--c-ease` (ease-out fuerte) para lo que entra o sale; `--c-ease-morfar`
     (ease-in-out fuerte) para lo que se mueve o cambia de tamaño. Nunca `ease-in`. */
  --c-ease: cubic-bezier(.23, 1, .32, 1);
  --c-ease-morfar: cubic-bezier(.77, 0, .175, 1);
  /* Cruce de dos iconos en el mismo sitio (conmutador de tema). */
  --c-ease-icono: cubic-bezier(.2, 0, 0, 1);
  --c-rapido: 150ms; --c-normal: 200ms;
  /* Abrir enseña algo y puede tomarse su tiempo; cerrar se quita de en medio. Nada pasa de 300 ms. */
  --c-abrir: 260ms; --c-cerrar: 190ms;
  --c-foco: 0 0 0 3px var(--c-acento-suave), 0 0 0 5px var(--c-acento);

  /* ---------- Movimiento (sección «Movimiento y estilo» de COMUN.md) ----------
     Se suman a las curvas y duraciones de arriba, que siguen valiendo. Regla: lo que la persona
     dispara cien veces al día (teclado, filtros, hover) no se anima o dura ≤ 150 ms; lo que entra
     una vez (página, fichas, KPI) entra en 200-300 ms y no se repite; nada rebota. */
  --c-mov-instante: 100ms;    /* pulsación y color */
  --c-mov-rapido: 150ms;      /* hover, foco, conmutadores */
  --c-mov-normal: 200ms;      /* desplegables, popovers */
  --c-mov-entrada: 280ms;     /* fichas, filas y KPI que entran */
  --c-mov-pagina: 220ms;      /* transición entre páginas (lo nuevo); lo viejo sale en --c-mov-instante */
  --c-mov-contador: 900ms;    /* contadores que suben una vez */
  --c-mov-realce: 1400ms;     /* fondo que se apaga tras un cambio («acabo de cambiar») */
  --c-mov-paso: 40ms;         /* escalonado entre elementos hermanos (tope: 10 pasos) */
  --c-mov-dist-1: 4px;        /* lo que se despliega pegado a su origen */
  --c-mov-dist-2: 8px;        /* lo que entra en la página */
  --c-mov-dist-3: 16px;       /* paneles laterales y cajones */
  --c-mov-pulsar: .98;        /* escala al pulsar un botón o control */
  --c-mov-pulsar-grande: .995;/* escala al pulsar una ficha o fila entera */
  --c-mov-asomar: .97;        /* escala de partida de un popover o panel (nunca 0) */
  /* Cajón (menú móvil, paneles que entran desde un lado) y trazo de un plano que se dibuja. */
  --c-ease-cajon: cubic-bezier(.32, .72, 0, 1);
  --c-ease-trazo: cubic-bezier(.65, 0, .35, 1);

  /* ---------- Semánticos (tema claro) ---------- */
  --c-fondo: var(--esh-niebla-50);
  --c-superficie: #ffffff;
  --c-superficie-2: var(--esh-niebla-100);
  --c-lateral: var(--esh-niebla-150);
  --c-borde: var(--esh-niebla-200);
  --c-borde-fuerte: var(--esh-niebla-300);
  --c-texto: var(--esh-tinta-900);
  --c-texto-2: var(--esh-tinta-600);
  --c-texto-3: var(--esh-tinta-400);
  --c-acento: var(--esh-verde-700);
  --c-acento-hover: var(--esh-verde-800);
  --c-acento-suave: var(--esh-verde-100);
  --c-acento-texto: #ffffff;
  /* Estados: tinta oscura de la familia del color sobre su propio tinte, opacos. El verde de
     «ok» se aparta a propósito del verde de marca (más amarillo) para no confundir un estado
     con el acento; y el color nunca va solo: la pastilla lleva texto. */
  --c-atencion: #a4430a;
  --c-atencion-suave: #fcede3;
  --c-ok: #1d6b35;
  --c-ok-suave: #e5f3e8;
  --c-aviso: #8a5300;
  --c-aviso-suave: #fcf0da;
  --c-error: #b3261e;
  --c-error-suave: #fcebe9;
  /* Cabecera en el verde corporativo, como la web: el logotipo va en blanco encima. */
  --c-cabecera: var(--esh-verde-800);
  --c-cabecera-2: var(--esh-verde-900);      /* buscador, pastilla y hover sobre la cabecera */
  --c-cabecera-borde: #9fd3c3;               /* borde del buscador: 3,44:1 sobre la cabecera (1.4.11) */
  --c-cabecera-texto: #ffffff;
  --c-cabecera-texto-2: #e0f0ea;
  --c-sombra: 0 1px 2px rgba(23,33,29,.05), 0 1px 3px rgba(23,33,29,.06);
  --c-sombra-alta: 0 8px 28px rgba(23,33,29,.10);
}

:root[data-bs-theme="dark"] {
  --c-fondo: var(--esh-noche-950);
  --c-superficie: var(--esh-noche-850);
  --c-superficie-2: var(--esh-noche-800);
  --c-lateral: var(--esh-noche-900);
  --c-borde: var(--esh-noche-700);
  --c-borde-fuerte: var(--esh-noche-600);
  --c-texto: #e4ebe8;
  --c-texto-2: #aab8b2;
  --c-texto-3: #7e8c86;
  /* En oscuro el verde corporativo se hunde (2,9:1 sobre la superficie): el acento pasa al
     menta de la web, que es su pareja clara, y el texto sobre él va oscuro. */
  --c-acento: var(--esh-menta-500);
  --c-acento-hover: var(--esh-menta-300);
  --c-acento-suave: #173a31;
  --c-acento-texto: #06231b;
  --c-atencion: #ffa46b;
  --c-atencion-suave: #3a2517;
  --c-ok: #7fd48f;
  --c-ok-suave: #17301e;
  --c-aviso: #f2b84b;
  --c-aviso-suave: #372a12;
  --c-error: #ff8e86;
  --c-error-suave: #3a1d1b;
  --c-cabecera: var(--esh-verde-900);
  --c-cabecera-2: #0b2c24;
  --c-cabecera-borde: #5e9887;
  --c-cabecera-texto: #ffffff;
  --c-cabecera-texto-2: #c3ded4;
  --c-sombra: none;
  --c-sombra-alta: none;
}

/* ---------- Componente ---------- */
:root {
  --boton-fondo: var(--c-acento);
  --boton-fondo-hover: var(--c-acento-hover);
  --boton-texto: var(--c-acento-texto);
  --boton-alto: 44px;
  /* Un control compacto (acciones de una fila) nunca baja de 40 px en escritorio; con dedo, 44. */
  --boton-alto-compacto: 40px;
  --campo-fondo: var(--c-superficie);
  /* Borde de campo a 3:1 sobre su fondo (WCAG 1.4.11): --c-borde-fuerte solo da 1,6:1. */
  --campo-borde: var(--esh-niebla-500);
  --campo-borde-foco: var(--c-acento);
  --campo-alto: 44px;
  --ficha-fondo: var(--c-superficie);
  --ficha-borde: var(--c-borde);
  --ficha-radio: var(--c-radio-ficha);
  --lista-fila-alto: 56px;
  --lista-fila-hover: var(--c-superficie-2);
  --nav-ancho: 232px;
  /* Ancho útil del contenido. En una pantalla de 1920-2150 px el panel se centra en el hueco
     que deja el menú en vez de quedarse pegado a la izquierda con 900 px vacíos; hasta 1600 px
     las tablas de trabajo (Expedientes) caben enteras. La prosa lleva su propio tope en ch. */
  --contenido-max: 1600px;
  /* Corchetes decorativos del acceso: el menta de la web sobre el paño verde. */
  --marca-corchete: var(--esh-menta-500);
  --nav-activo-fondo: var(--c-acento-suave);
  --nav-activo-texto: var(--c-acento-hover);
  --semaforo-ok: var(--c-ok);
  --semaforo-aviso: var(--c-aviso);
  --semaforo-error: var(--c-error);
  --semaforo-neutro: var(--c-texto-3);
  --estado-guardado: var(--c-texto-2);
  --estado-aplicando: var(--c-aviso);
  --estado-en-uso: var(--c-ok);
  /* Campanita de avisos: el número sobre la cabecera verde y el tinte de cada nivel en el panel. */
  --campana-revisar: #f0a050;
  --campana-revisar-texto: #2a1704;
  --campana-grave: #ff6b6b;
  --campana-grave-texto: #2b0606;
  /* Plano técnico del acceso (sobre el paño verde, en los dos temas). */
  --plano-trazo: #ffffff;
  --plano-cota: #7ff0b8;
  /* Esqueleto de carga: bloque y brillo que lo recorre. */
  --esqueleto-fondo: var(--c-superficie-2);
  --esqueleto-brillo: rgba(255,255,255,.55);
}

/* Componente, tema oscuro: el borde de campo sigue a 3:1 sobre la superficie oscura (3,97:1). */
:root[data-bs-theme="dark"] {
  --campo-borde: #6e7c76;
  --esqueleto-brillo: rgba(255,255,255,.05);
}