/* Noymar Gestión · tokens.
   Tres capas: primitivos de marca (--esh-*, nombre heredado del núcleo) → 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.

   Marca de Noymar, sacada de https://noymar.com/ (23/10/2026): rojo corporativo #bd162d sobre
   grafito y blanco. El rojo se oscurece un punto para texto (#ad1429, 6,5:1 sobre blanco). La
   cabecera va en grafito (el escaparate de un concesionario: carrocería oscura, detalle rojo) y
   el fondo es un blanco cálido, de papel: el producto viene a sustituir a los archivadores. */

:root {
  /* ---------- Primitivos de marca ---------- */
  --esh-verde-900: #121317;   /* grafito profundo: cabecera en tema oscuro */
  --esh-verde-800: #8f1023;   /* rojo Noymar oscuro: hover del acento */
  --esh-verde-700: #ad1429;   /* rojo Noymar #bd162d oscurecido para texto y botones */
  --esh-verde-100: #fbe9eb;   /* tinte del rojo */
  --esh-menta-500: #ff6b7d;   /* rojo claro: acento en tema oscuro */
  --esh-menta-300: #ff98a5;
  --esh-tinta-900: #1b1c20;
  --esh-tinta-600: #4d5058;
  --esh-tinta-400: #686b73;
  --esh-niebla-50: #f6f5f2;
  --esh-niebla-100: #efede9;
  --esh-niebla-150: #f1efeb;
  --esh-niebla-200: #e1ded8;
  --esh-niebla-300: #c7c2ba;
  --esh-niebla-500: #8a857d;
  --esh-noche-950: #0f1012;
  --esh-noche-900: #141518;
  --esh-noche-850: #18191d;
  --esh-noche-800: #202227;
  --esh-noche-700: #2c2e34;
  --esh-noche-600: #3c3f47;
  /* ---------- 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: 6px; --c-radio-ficha: 10px; --c-radio-pastilla: 999px;
  /* Superficie que envuelve controles pegados a su borde: radio de fuera ≥ radio de dentro. */
  --c-radio-ficha-alta: 14px;
  --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: 650;
  --c-fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-mono: 'JetBrains 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-tinta-900);
  --c-cabecera-2: #2b2d33;      /* buscador, pastilla y hover sobre la cabecera */
  --c-cabecera-borde: #8b8e97;               /* borde del buscador: 3,44:1 sobre la cabecera (1.4.11) */
  --c-cabecera-texto: #ffffff;
  --c-cabecera-texto-2: #d6d7dc;
  --c-sombra: 0 1px 2px rgba(27,28,32,.05), 0 2px 6px rgba(27,28,32,.05);
  --c-sombra-alta: 0 12px 36px rgba(27,28,32,.12);
}

: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: #ecebe8;
  --c-texto-2: #b5b3ae;
  --c-texto-3: #8b8984;
  /* 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: #3a1820;
  --c-acento-texto: #2a0509;
  --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: #24262c;
  --c-cabecera-borde: #6f727b;
  --c-cabecera-texto: #ffffff;
  --c-cabecera-texto-2: #c9cad0;
  --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: rojo claro sobre el grafito. */
  --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: #ff7a8a;
  /* 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: #76736d;
  --esqueleto-brillo: rgba(255,255,255,.05);
}

/* ---------- Propios de Noymar ---------- */
:root {
  /* Display ancho para titulares y cifras (Archivo con su eje de anchura). */
  --c-fuente-titular: 'Archivo', system-ui, sans-serif;
  --c-titular-ancho: 112%;
  /* Matrícula española (UE): banda azul con la «E» y caracteres negros sobre blanco. */
  --matricula-fondo: #ffffff;
  --matricula-texto: #111111;
  --matricula-borde: #2b2b2b;
  --matricula-banda: #003399;
  --matricula-banda-texto: #ffd200;
  /* Línea de vida del expediente: carretera y fase activa. */
  --vida-carretera: var(--c-borde-fuerte);
  --vida-hecha: var(--c-ok);
  --vida-activa: var(--c-acento);
  --confianza-alta: var(--c-ok);
  --confianza-media: var(--c-aviso);
  --confianza-baja: var(--c-error);
}