/* ============================================================================
   DeCA — Pretium Gestión · Design Tokens (canonical values)
   These values are the single source of truth. SPEC/design-tokens.md mirrors them.
   All strings in the UI are translatable (es base; ca/eu/gl/en). No emojis.

   Paleta: la del issue #20, que manda «mantener la identidad azul actual» —
   navy de estructura + azul interactivo + cian de acento, con turquesa/ámbar/rojo
   como colores semánticos. Los hex del issue son "aproximados": aquí se ajustan a
   tonos que cumplen contraste AA cuando llevan texto encima (badges, botones),
   reservando los tonos vivos para rellenos, bordes, iconos y degradados.

   REDISEÑO #339 (S-221, D-339-4/D-339-5): los VALORES pasan a la paleta de las nueve maquetas
   aprobadas por el cliente (navy #073066, azul #0d7ddd, tinta #153554, borde #e1e9f2, lienzo
   #f4f7fb). Los NOMBRES de token no cambian: `app.css` los consume en todas las áreas, así que
   las que aún no tienen su slice de rediseño se mueven a la vez y no quedan a dos paletas.
   Donde un literal de la maqueta no llega a WCAG 2.2 AA se usa el tono más cercano que sí llega,
   y se dice al lado. Esta hoja ya NO es la referencia de correos, PDF, Redsys ni del panel
   interno: conservan la paleta anterior (D-339-5; su referencia vive en
   `tests/fixtures/paleta-documentos.php`).

   Geometría, tipografía y elevación vienen del design system de Design,
   `docs/design-handoff/Rediseño app con design system/_ds/…/tokens/`. Su capa de
   color (navy + verde de acción) NO se adopta: contradice el issue #20. El design
   system separa color del resto de tokens, así que el intercambio es limpio.
   ============================================================================ */

:root {
  /* ---- Color · neutrals (gris azulado, muy claro) ---- */
  --color-bg:            #f4f7fb;  /* lienzo de la maqueta (--canvas) */
  --color-surface:       #ffffff;  /* cards, panels, table */
  --color-surface-2:     #eef5fc;  /* subtle fills, headers, hover rows */
  --color-surface-3:     #e0efff;  /* pressed / active fills */
  --color-border:        #e1e9f2;  /* default 1px borders */
  --color-border-strong: #cfdeec;  /* inputs, dividers needing weight */

  /* ---- Color · text (AA on surfaces) ---- */
  --color-text:          #153554;  /* tinta de la maqueta (--ink, 12.6:1 sobre #fff) */
  /* Secundario. La maqueta de la familia A pide #657a91, que se queda en 4,42:1 sobre blanco y
     4,12:1 sobre el lienzo: se usa #5d7289 (4,96 / 4,62). La familia B (#59718a, 5,06 / 4,71)
     entra tal cual desde `body.app--familia-b` en app.css. */
  --color-text-muted:    #5d7289;
  --color-text-subtle:   #566d85;  /* terciario: 4,58:1 en la peor superficie (surface-3) */
  --color-text-invert:   #ffffff;

  /* ---- Color · brand · navy + azul (issue #20: sidebar, enlaces, activos) ---- */
  --color-primary-700:   #073066;  /* NAVY de la maqueta — títulos, corporativo */
  /* Interactivo con TEXTO (enlaces, botón sólido). El --blue de la maqueta (#0d7ddd) da 4,20:1
     como texto sobre blanco, así que el texto usa su --blue-hover: 5,41:1 sobre blanco y 4,62:1
     sobre surface-3. El azul vivo queda en -500 para rellenos, iconos y el anillo de foco. */
  --color-primary-600:   #086bc1;
  --color-primary-500:   #0d7ddd;  /* AZUL de la maqueta (--blue) — activo, iconos, acentos */
  --color-primary-100:   #d9e9fb;  /* borde del botón suave */
  --color-primary-050:   #edf5ff;  /* fondo del botón suave y de los avisos informativos */

  /* ---- Color · cian de acento (decorativo, degradados; sin texto encima) ---- */
  --color-cyan-500:      #16c6e8;
  --color-cyan-300:      #48d3ef;
  --color-cyan-100:      #d6f4fb;

  /* ---- Color · acento turquesa/verde (familia éxito: emitido, validaciones) ---- */
  --color-accent-700:    #0b7d69;  /* texto sobre blanco (AA) */
  --color-accent-600:    #0aaf8f;  /* turquesa vivo — rellenos, bordes, dots */
  --color-accent-100:    #d8f5ee;
  --color-on-accent:     #ffffff;

  /* ---- Degradados de marca ---- */
  /* El CTA lleva texto blanco encima, así que el extremo cian se oscurece hasta
     #0d7aad (4.8:1 con blanco). El #16c6e8 del issue #20 solo daría 2.8:1: los hex
     del issue son "aproximados" y el cian vivo queda para rellenos sin texto. */
  /* #339: la maqueta dibuja el primario #168bea → #0d75d2, pero el blanco sobre #168bea se queda
     en 3,55:1 y el rótulo del botón es texto normal (15 px). Se desplaza un paso hacia el oscuro
     de la propia maqueta: #0d75d2 (4,67:1) → #086bc1 (5,41:1). */
  --grad-primary: linear-gradient(110deg, #0d75d2 0%, #086bc1 100%);
  --grad-brand:   linear-gradient(166deg, #092b56 0%, #0b3264 75%, #103e76 100%);

  /* ---- Color · semantic feedback ---- */
  --color-success:       #0c8168;  --color-success-bg: #dcf5ee;
  --color-warning:       #8f5c00;  --color-warning-bg: #fdf1d9;  /* 5.07:1 sobre su propio bg */
  --color-danger:        #c93a2d;  --color-danger-bg:  #fdeae6;
  --color-info:          #086bc1;  --color-info-bg:    #edf5ff;

  /* Anillo de foco. La maqueta pide #55bcff en todas partes, pero sobre blanco da 2,10:1 y 2.4.11
     exige 3:1: en las superficies claras se usa su --blue (#0d7ddd: 4,20 sobre blanco, 3,60 en la
     peor), y el #55bcff literal se queda para la barra lateral oscura, donde da 5,08:1 o más
     (ahí el #0d7ddd bajaría a 2,53:1). */
  --color-focus-ring:         #0d7ddd;
  --color-focus-ring-on-dark: #55bcff;

  /* ---- Color · barra lateral (#339; todos medidos contra el extremo CLARO del degradado, #103e76) ---- */
  --sidebar-text:        #d0e1f4;  /* 7,99:1 */
  --sidebar-text-strong: #ffffff;
  --sidebar-label:       #94b2d2;  /* 4,85:1 */
  --sidebar-icon:        #abc7e5;
  --sidebar-icon-active: #55c9ff;
  --sidebar-dot:         #64d3ff;
  --sidebar-strong:      #bcd4ec;  /* 6,98:1 */
  /* La maqueta pinta el pie en #88a9ca (4,35:1 sobre #103e76, que es justo el color del fondo
     ABAJO, donde vive el pie): se usa el mismo tono que las etiquetas de grupo. */
  --sidebar-muted:       #94b2d2;
  --sidebar-brand-check: #45b7ff;  /* check del isotipo */
  --sidebar-scroll:      #496e9a;
  --sidebar-hover:       #ffffff0a;
  --sidebar-active:      linear-gradient(105deg, #1c80cb52, #1975b831);
  --sidebar-active-line: #58b5f333;
  --sidebar-line:        #ffffff15;
  --topbar-bg:           #ffffffed;  /* blanco casi opaco; el desenfoque lo pone app.css */

  /* ---- Color · botones de la maqueta ---- */
  --btn-outline-fg:      #356286;  /* contorno: 6,48:1 sobre blanco */
  --btn-outline-hover:   #f1f8ff;
  --btn-danger-bg:       #fff8f7;
  --btn-danger-border:   #eddddd;
  --color-border-hover:  #9bbfdc;  /* campo al pasar el raton */
  /* Texto secundario de la familia B, literal de su maqueta (5,06:1 sobre blanco). */
  --color-text-muted-b:  #59718a;

  /* ---- Color · Panel (#339, S-222): tarjeta de consumo, sobre azul marino ----
     Todos medidos contra el extremo CLARO del degradado (#104a88), que es el caso peor. La maqueta
     reparte cuatro azules casi iguales para el texto secundario (#aacde9, #b4d2ee, #b5d2ed y
     #b9d6f0): se quedan en uno. */
  --grad-consumo:        linear-gradient(112deg, #0b366b 0%, #104a88 100%);
  --consumo-text:        #ffffff;  /* cifra principal y titulo: 8,91:1 */
  --consumo-strong:      #f1f8ff;  /* valores (fecha de renovacion, datos del periodo gratuito) */
  --consumo-label:       #c0d9ef;  /* rotulo bajo cada cifra: 6,11:1 */
  --consumo-muted:       #b4d2ee;  /* texto secundario: 5,68:1 */
  --consumo-accent:      #7ee5ff;  /* documentos disponibles: 6,17:1 */
  --consumo-badge-fg:    #d9f0ff;  /* distintivo del plan y enlace del pie */
  --consumo-icon:        #8ee3ff;  /* dibujo del grafico */
  --consumo-line:        #ffffff1c;  /* divisores y filetes */
  /* Barra de consumo. El carril es SOLIDO (el #ffffff1c de la maqueta, ya mezclado con el fondo)
     para poder medirlo: el relleno de la maqueta arranca en #2ab4ee, que contra el carril se queda
     en 2,83:1, y un grafico pide 3:1 (1.4.11). Arranca en #3cbdf2 (3,11:1). */
  --consumo-track:       #2a5e95;
  --consumo-fill-from:   #3cbdf2;
  --consumo-fill-to:     #7be7fc;
  /* La barra de consumo cambia de color al 90 % y al 100 % (regla anterior al rediseno, que la
     maqueta no dibuja). Sobre navy el ambar y el rojo de las superficies claras no se ven: se usan
     sus tonos claros. El dato lo dicen ademas el porcentaje y las cifras, no solo el color. */
  --consumo-fill-warn:   #ffc457;
  --consumo-fill-full:   #ff9a8f;
  --home-quick-borde:    #badbf6;  /* borde de «Crear DeCA», la tarjeta destacada */

  /* ---- Color · Documentos (#339, S-223): listado, ficha, ventanas y visor ----
     Fondos azulados de la maqueta. El texto que llevan encima es siempre la tinta o el secundario
     (`--color-text-muted`: 4,5:1 o mas sobre todos ellos, caso 181), no los grises de la maqueta. */
  --docs-campo-bg:       #f9fbfe;  /* caja de los filtros */
  --docs-th-bg:          #eff5fb;  /* cabecera de la tabla */
  --docs-fila-hover:     #f8fbff;
  --docs-fila-sel:       #f0f7ff;  /* fila seleccionada para el ZIP */
  --docs-sel-bg:         #eff7ff;  /* barra de seleccion con documentos marcados */
  --docs-sel-borde:      #bbd9f3;
  --docs-aviso-bg:       #edf6fc;  /* aviso de la seleccion */
  --docs-franja-bg:      #edf5fd;  /* franja de titulo de envios / servicios */
  --docs-suave-bg:       #f8fbfe;  /* tiras y filas interiores: hash, documento de la ventana, adjuntos */
  --docs-casilla-borde:  #6f8fb0;  /* la maqueta pide #bfd2e4 (1,5:1 sobre blanco); un control pide 3:1 */
  --docs-punto:          #4b9cd7;  /* trayecto: origen */
  --docs-punto-destino:  #7da7c8;  /* trayecto: destino */
  --docs-tesela:         linear-gradient(140deg, #e4f3ff, #f4faff);
  --docs-tesela-borde:   #cce4f9;
  --docs-acceso:         linear-gradient(135deg, #f7fbff 0%, #ffffff 75%);
  --docs-ventana-cab:    linear-gradient(118deg, #eff7ff 0%, #f8fbff 62%, #ffffff 100%);
  --docs-ventana-sombra: 0 30px 95px #09294a45, 0 8px 24px #09294a1f;
  --docs-velo:           rgb(9 32 59 / 48%);
  --docs-visor-lienzo:   #eaf1f7;
  --color-whatsapp:      #25d366;  /* verde de la marca: solo en su pictograma, decorativo */
  --color-whatsapp-bg:   #effaf3;
  --docs-ico-descarga:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  /* ---- Color · Crear DeCA (#339, S-224/S-225): mercancias y viajeros ----
     Los tres semanticos son literales de la maqueta y solo existen aqui (--form-green, --form-red,
     --form-amber): 4,96 / 5,53 / 4,96:1 sobre blanco, y 4,5:1 o mas sobre su propio fondo suave.
     Los grises de texto de la maqueta (#73879a, #8293a5, #7b8fa2, #8a9cac…) se quedan entre 3,0 y
     3,9:1: el texto secundario es siempre `--color-text-muted`, o `--color-text-subtle` sobre la
     tarjeta de la empresa propia, donde el secundario baja a 4,46:1 (caso 181). */
  --form-green:          #207e64;
  --form-red:            #b1444c;
  --form-amber:          #956718;
  --crear-rotulo:        #385974;  /* etiqueta de campo y leyendas: 7,37:1 sobre blanco */
  --crear-titulo-tipo:   #54738f;  /* «de mercancías» en el titulo: 4,62:1 sobre el lienzo */
  --crear-paso-bg:       #f5f9fd;  /* paso bajo el cursor */
  --crear-paso-actual:   linear-gradient(100deg, #eef7ff 0%, #f3f9ff 100%);
  --crear-num-bg:        #f1f5f9;  /* numero de un paso sin visitar */
  --crear-num-borde:     #e6edf4;
  --crear-ok-bg:         #edf7f2;  /* paso completo */
  --crear-ok-borde:      #dceee4;
  --crear-mal-bg:        #fcf2f2;  /* paso con datos pendientes */
  --crear-mal-borde:     #efd9d9;
  --crear-icono-bg:      #edf6ff;  /* baldosa del dibujo de cada apartado */
  --crear-icono-borde:   #e0eef9;
  --crear-icono:         #2b86c8;  /* dibujo decorativo; el texto de al lado es quien nombra */
  --crear-cuenta:        #c3d3e3;  /* «01», «02»: adorno, fuera del arbol de accesibilidad */
  --crear-plantilla:     linear-gradient(100deg, #f1f7fe 0%, #f8fbff 100%);
  --crear-plantilla-borde: #dbe9f6;
  --crear-aplicada-bg:   #f1faf5;  /* plantilla aplicada */
  --crear-aplicada-borde: #d7eae0;
  --crear-propia:        linear-gradient(110deg, #eaf4ff 0%, #f5faff 100%);  /* TU EMPRESA */
  --crear-propia-borde:  #bddaf2;
  --crear-propia-filo:   #1381d6;
  --crear-papel-sel:     linear-gradient(120deg, #f1f8ff 0%, #f8fbff 100%);  /* papel elegido */
  --crear-papel-borde:   #80bae9;
  --crear-nota-bg:       #eff6fc;  /* nota informativa */
  --crear-nota-borde:    #e0ebf5;
  --crear-linea-cab:     linear-gradient(100deg, #f9fbfe 0%, #ffffff 100%);  /* cabecera de un envio */
  --crear-indice-bg:     #eaf4fd;  /* baldosa con el numero del envio */
  --crear-indice-borde:  #dbeafa;
  --crear-direccion-bg:  #fcfdff;  /* bloque de origen o destino */
  --crear-direccion-borde: #e2ebf4;
  --crear-buscar-bg:     #f2f7fc;  /* buscador de direcciones guardadas */
  --crear-destino-bg:    #edf5f3;  /* baldosa del destino */
  --crear-destino:       #39877a;
  --crear-condicional-bg: #f4f9fd;  /* campo que aparece: otra magnitud, autorizacion, servicio referido */
  --crear-condicional-filo: #a4cce9;
  --crear-filete:        #edf2f7;  /* divisores dentro de una tarjeta */
  --crear-anadir-bg:     #f7fbff;  /* «Añadir envío» */
  --crear-anadir-borde:  #8fbadb;
  --crear-aviso-bg:      #fffaf0;  /* texto anterior de la ficha, avisos de la revision */
  --crear-aviso-borde:   #ecdfc1;
  --crear-barra-bg:      #ffffffed;  /* barra de acciones pegada abajo */
  --crear-barra-borde:   #dee7f0;
  --crear-viajeros-bg:   linear-gradient(140deg, #ddf5f1 0%, #effbfa 100%);  /* baldosa de la cabecera de viajeros */
  --crear-viajeros-borde: #cee9e4;
  --crear-mercancias-bg: linear-gradient(145deg, #e0f2ff 0%, #f0f8ff 100%);
  --crear-mercancias-borde: #d1e8fb;
  /* Borde de un control dibujado (el circulo del papel elegido). La maqueta pide #d5e0eb, 1,3:1 sobre
     blanco; un control pide 3:1 (1.4.11): mismo tono que la casilla de Documentos. */
  --crear-control-borde: #6f8fb0;
  /* #339, ajuste del 06/10: tarjeta lateral «Tu DeCA» (maqueta `creation-summary`). El subtitulo y el dibujo se
     miden contra las dos paradas de la cabecera (caso 321). */
  --crear-ficha-cab:     linear-gradient(120deg, #0b366b 0%, #134b7f 100%);
  --crear-ficha-cab-sub: #b2cde5;
  --crear-ficha-cab-icono: #83d4ff;
  --crear-ficha-cab-baldosa: #ffffff0d;
  --crear-ficha-cab-baldosa-borde: #ffffff1c;
  --crear-ficha-pista:   #ebf1f7;  /* fondo de la barra de progreso */
  --crear-ficha-barra:   linear-gradient(90deg, #2ca8f0 0%, #54c7ef 100%);
  --crear-ficha-nota-bg: #f7fafd;
  /* ---- Color · Maestros (#339, S-226): menú de categorías, listado y ficha ----
     Literales de la maqueta corregida del 04/10. Los grises de texto que dibuja (#61809c, #71859b,
     #7489a0, #6b8198, #668099, #698299, #70879c, #7890a5, #7790a5…) se quedan entre 3,3 y 3,9:1:
     el texto secundario es siempre `--color-text-muted` (familia B: 4,6:1 o más sobre cada fondo
     de esta sección) o `--color-text-subtle` sobre el distintivo de la ficha, donde el secundario
     baja a 4,47:1 (caso 181). */
  --maes-nav-texto:        #4f6b86;  /* categoría: 5,17:1 sobre el lienzo y 4,92:1 bajo el cursor */
  --maes-nav-hover:        #eaf2fa;
  --maes-nav-caja:         #f8fbfe;  /* categoría en rejilla (hasta 1230 px) */
  --maes-nav-icono-bg:     #eaf2fb;
  --maes-nav-actual:       linear-gradient(110deg, #e0efff 0%, #edf6ff 100%);
  --maes-nav-actual-borde: #cbdff4;
  --maes-nav-actual-texto: #115f9f;  /* 5,68:1 en el extremo oscuro del degradado */
  --maes-nav-actual-filo:  #1986df;
  --maes-nav-cuenta-bg:    #d3e8fb;  /* contador de la categoría actual: 5,28:1 con su texto */
  --maes-cab:              linear-gradient(120deg, #f0f7ff 0%, #fbfdff 74%);  /* cabecera del listado */
  --maes-cab-borde:        #e2ecf6;
  --maes-ficha-cab:        linear-gradient(125deg, #edf6ff 0%, #fcfdff 100%);  /* cabecera de la ficha */
  --maes-dibujo-bg:        #e2f0fe;  /* baldosa del dibujo de la categoría */
  --maes-dibujo-borde:     #d2e8fa;
  --maes-rotulo:           #294f72;  /* etiqueta de campo: 8,55:1 */
  --maes-franja-bg:        #fcfdff;  /* barra de resultados y «Más detalles» */
  --maes-filete:           #e7eef6;
  --maes-th-bg:            #f5f9fd;
  --maes-celda:            #40617f;  /* 6,49:1 sobre blanco, 6,24:1 en la fila bajo el cursor */
  --maes-fila-hover:       #f7fbff;
  --maes-nombre:           #194e7d;  /* nombre de la ficha en el listado */
  --maes-placa-bg:         #f5f8fd;  /* matrícula */
  --maes-placa-borde:      #dae6f0;
  --maes-placa-filo:       #1984d4;
  --maes-placa-texto:      #284d70;
  --maes-chip-bg:          #f0f6fc;  /* módulo o rol */
  --maes-chip-texto:       #4b7396;  /* 4,60:1 */
  --maes-activo-bg:        #edf8f3;
  --maes-activo-texto:     #257b61;  /* 4,73:1 */
  --maes-pag-bg:           #eaf4ff;  /* número de la página actual */
  --maes-cupo-pista:       #e7eff7;
  --maes-marca-bg:         #e9f2fb;  /* «Ficha de Maestros» */
  --maes-marca-borde:      #d8e7f4;
  --maes-seccion:          #265c86;  /* título de apartado de la ficha */
  --maes-mas:              #366890;  /* «Más detalles» */
  --maes-casilla:          #436987;  /* texto de una casilla */
  --maes-extremo-bg:       #fcfdff;  /* origen */
  --maes-extremo-borde:    #dce9f4;
  --maes-extremo-titulo:   #27658e;
  --maes-destino-bg:       #f8fcfd;
  --maes-destino-borde:    #daebef;
  --maes-destino-titulo:   #267a8d;  /* 4,78:1 */
  --maes-legado-rotulo:    #826735;  /* texto anterior: 5,12:1 sobre su fondo (la maqueta pinta la nota en #8b784f, 4,12:1) */
  --maes-legado-campo:     #fffdf7;
  --maes-legado-campo-borde: #e5d9bd;
  --maes-legado-texto:     #6d624c;
  --maes-emblema:          linear-gradient(145deg, #e5f3ff 0%, #f8fbff 100%);
  --maes-emblema-borde:    #dceafb;
  --maes-emblema-trazo:    #3184c8;  /* dibujo decorativo: 3,53:1 */
  --maes-ir-bg:            #eef6ff;  /* desplegable de categorías en móvil */
  --maes-ir-borde:         #c9e0f6;

  /* ---- Suscripción y pagos (#339, S-227) ----
     Maqueta `Docarga-suscripcion-pagos-redisenado.html` (familia B). Sus grises secundarios (#6a839a,
     #7890a6, #70869c, #8a9eaf…) dan entre 2,6:1 y 4,2:1: el texto secundario es siempre
     `--color-text-muted` (4,6:1 o más sobre cada fondo de esta sección) o `--color-text-subtle`
     sobre los fondos azulados. La tarjeta de consumo, el dibujo de la tarjeta bancaria y el total a
     pagar comparten `--grad-consumo` y sus tonos, ya medidos en el Panel. */
  --susc-texto:            #466985;  /* texto de cuerpo: 5,80:1 sobre blanco; 5,3:1 o más sobre los lavados azules */
  --susc-fuerte:           #254f76;  /* valores y cifras */
  --susc-filete:           #e7eef6;  /* divisores interiores */
  --susc-pestanas-bg:      #eaf1f9;
  --susc-pestanas-borde:   #e0e9f4;
  --susc-icono-bg:         #edf6ff;
  --susc-icono-borde:      #e3eef9;
  --susc-icono-trazo:      #3184c8;  /* dibujos decorativos: 3,5:1 sobre su fondo (la maqueta, #3888c4) */
  --susc-plan-borde:       #dde7f2;
  --susc-actual:           linear-gradient(170deg, #f4faff 0%, #ffffff 30%);  /* tarjeta del plan de la empresa */
  --susc-actual-borde:     #77b5e5;
  --susc-actual-bg:        #eaf4ff;  /* «Plan actual»: la maqueta pinta #2175b5 (4,42:1); se usa el azul primario (4,86:1) */
  --susc-actual-linde:     #d8eafb;
  --susc-th-bg:            #f5f8fd;  /* cabeceras de tabla */
  --susc-col-actual:       #f2f8ff;  /* columna del plan de la empresa en la comparativa */
  --susc-col-actual-cab:   #e9f3ff;
  --susc-fila-hover:       #f8fbff;
  --susc-resalte-bg:       #eaf5ff;  /* columna resaltada al pulsar «Ver límites de Maestros» (maqueta `comparison-highlight`) */
  --susc-resalte-texto:    #146aa8;
  --susc-resalte-filo:     #72b7e433;
  --susc-resumen:          linear-gradient(135deg, #edf7ff 0%, #f4f9ff 100%);  /* franja del plan */
  --susc-nota-bg:          #f7fafd;
  --susc-nota-borde:       #e9eff6;
  --susc-pista:            #e6f0fa;  /* pista de la barra de documentos: el relleno primario da 4,69:1 */
  --susc-paso-bg:          #e7eef6;
  --susc-paso-hecho:       #e2f0fd;
  --susc-pasos-caja:       #f0f5fb;
  --susc-velo:             #ffffff0e;  /* fondo del distintivo sobre el azul de la tarjeta de consumo */
  --susc-chip:             #b8daed;  /* chip del dibujo de la tarjeta */
  --susc-chip-trazo:       #497593;
  --susc-mc-rojo:          #eb001b;  /* los tres colores de la marca Mastercard, solo en su logotipo */
  --susc-mc-ambar:         #f79e1b;
  --susc-mc-naranja:       #ff5f00;

  /* ---- Soporte (#339, S-228) ----
     Maqueta `Docarga-soporte-redisenado.html` (familia B). Sus grises secundarios (#7a90a4, #8297aa,
     #7690a6, #6b859b, #7e93a7, #879bad…) dan entre 2,7:1 y 4,2:1: el texto secundario es siempre
     `--color-text-muted` (4,6:1 o más sobre cada fondo de esta sección). Los tonos de texto que sí
     llegan a 4,5:1 se conservan tal como los pinta la maqueta. */
  --sop-texto:             #53728d;  /* celdas del listado: 5,05:1 sobre blanco y 4,86:1 sobre la fila señalada */
  --sop-fuerte:            #234e75;  /* asunto del ticket */
  --sop-cuerpo:            #3e607c;  /* texto de un mensaje: 6,63:1 sobre blanco y 6,07:1 sobre el globo de la empresa */
  --sop-original:          #4e6e87;  /* consulta original: 5,13:1 en la parada más oscura de su tarjeta */
  --sop-rotulo:            #496984;  /* etiquetas de campo */
  --sop-campo:             #345b7b;  /* lo que se escribe en un campo */
  --sop-autor:             #547794;  /* quien firma el mensaje, Pretium: 4,60:1 sobre el fondo del hilo */
  --sop-autor-empresa:     #3477ad;  /* quien firma el mensaje, la empresa: 4,66:1 */
  --sop-adjunto:           #426a8a;  /* nombre de un fichero adjunto */
  --sop-guia:              #3d6a8e;  /* titular de la guía, sobre el lienzo: 5,35:1 */
  --sop-filete:            #eaf0f6;  /* divisores interiores */
  --sop-th-bg:             #fafcfe;  /* cabecera de la tabla */
  --sop-fila-hover:        #f8fbff;
  --sop-cab:               linear-gradient(106deg, #f2f8ff 0%, #ffffff 60%);  /* cabecera de la tarjeta del listado */
  --sop-pie-bg:            #fcfdff;  /* pie de tarjeta: nota del listado y acciones del formulario */
  --sop-contador-bg:       #f8fbff;
  --sop-contador-borde:    #e0eaf4;
  --sop-icono-bg:          #edf6ff;  /* cajas de los dibujos de sección */
  --sop-icono-borde:       #dceaf8;
  --sop-icono-trazo:       #3184c8;  /* dibujos decorativos: 3,65:1 sobre su caja (la maqueta, #3689c7) */
  --sop-original-bg:       linear-gradient(166deg, #f6faff 0%, #ffffff 110px);
  --sop-original-borde:    #dbe8f4;
  --sop-hilo:              linear-gradient(180deg, #ffffff 0%, #fafcff 100%);  /* fondo de la conversación */
  --sop-globo-borde:       #e2eaf3;
  --sop-globo-empresa:     linear-gradient(115deg, #edf6ff 0%, #f4f9ff 100%);
  --sop-globo-empresa-borde: #d6e8f9;
  --sop-avatar-bg:         #eef6fd;
  --sop-avatar-borde:      #dde9f5;
  --sop-avatar-empresa-bg: #e8f3ff;
  --sop-avatar-empresa-borde: #cee4f7;
  --sop-adjunto-borde:     #dfe9f3;
  --sop-adjunto-hover:     #8ec0e4;
  --sop-fichero-bg:        #edf5ff;  /* caja del dibujo de fichero */
  --sop-campo-borde:       #d1dfed;
  --sop-subir:             linear-gradient(120deg, #f8fbff 0%, #fcfdff 100%);  /* caja de adjuntar */
  --sop-subir-borde:       #b9cfe4;  /* línea discontinua: la maqueta pinta #cddded; se oscurece para que el control se vea */
  --sop-abierta-bg:        #eaf4ff;  /* distintivo de ticket en curso: el azul primario da 4,86:1 */
  --sop-arte-fondo:        #eaf5ff;  /* el dibujo de la guía, solo decorativo */
  --sop-arte-linde:        #d9edfe;
  --sop-arte-sombra:       #b8ddf7;
  --sop-arte-a:            #238fdd;
  --sop-arte-b:            #0864b5;
  --sop-arte-linea:        #c9eeff;
  --sop-arte-globo:        #9bcbed;
  --sop-arte-claro:        #e4f1ff;
  --sop-arte-borde:        #c9e3f8;
  --sop-arte-p1:           #5db3ed;
  --sop-arte-p2:           #3296d9;
  --sop-arte-p3:           #1176c2;
  --sop-arte-chispa:       #6cbcf1;

  /* ---- Cuenta (#339, S-229) ----
     Maqueta `Docarga-cuenta-redisenada.html`, corregida el 04/10 (familia B). Sus grises secundarios
     (#738ea6, #7890a4, #6c859a, #60809a, #8097aa, #7e94a7…) dan entre 2,9:1 y 4,1:1: el texto secundario
     es siempre `--color-text-muted` (4,6:1 o más sobre cada fondo de esta sección). Los tonos de texto
     que sí llegan a 4,5:1 se conservan tal como los pinta la maqueta. El menú lateral y el emblema son
     los de Maestros (`--maes-nav-*`, `--maes-emblema*`): la maqueta los dibuja iguales. */
  --cta-texto:             #4e6e87;  /* párrafos de tarjeta: 5,13:1 sobre blanco (la maqueta, #60809a: 4,08:1) */
  --cta-rotulo:            #496984;  /* etiquetas de campo */
  --cta-campo:             #345b7b;  /* lo que se escribe en un campo */
  --cta-campo-borde:       #d1dfed;
  --cta-casilla:           #416685;  /* texto de una casilla o de una opción */
  --cta-leyenda:           #376386;  /* título de un grupo de campos */
  --cta-subtitulo:         #346b94;  /* h3 de perfiles y de documentos legales */
  --cta-fuerte:            #2d628d;  /* dato de la banda de identidad: 5,74:1 en su parada más oscura */
  --cta-nombre:            #355f80;  /* nombre de usuario en el listado */
  --cta-cifra:             #284f72;  /* cifras grandes del resumen de suscripción */
  --cta-codigo:            #1f6397;  /* numeración y claves en monoespaciada (la maqueta, #2e77ac: 4,38:1 sobre su caja) */
  --cta-filete:            #e7eef6;  /* divisores interiores */
  --cta-cab:               linear-gradient(106deg, #f6faff 0%, #ffffff 65%);  /* cabecera de tarjeta */
  --cta-pie-bg:            #fcfdff;  /* pie de acciones */
  --cta-icono-bg:          #edf6ff;  /* cajas de los dibujos */
  --cta-icono-borde:       #dceaf8;
  --cta-icono-trazo:       #3184c8;  /* dibujos decorativos: 3,65:1 sobre su caja (la maqueta, #3689c7) */
  --cta-nota-bg:           #f6faff;  /* nota informativa */
  --cta-nota-borde:        #e0ebf5;
  --cta-banda:             linear-gradient(105deg, #edf6ff 0%, #f6faff 100%);  /* banda de identidad */
  --cta-banda-borde:       #deebf7;
  --cta-caja-bg:           #fbfdff;  /* opción sin marcar, banda de seguridad */
  --cta-caja-borde:        #dbe6f1;
  --cta-marcada:           linear-gradient(120deg, #edf7ff 0%, #f6fbff 100%);  /* opción marcada */
  --cta-marcada-borde:     #5fa9e0;  /* la maqueta pinta #80bdec (2,0:1 contra la caja sin marcar); se oscurece para que la marca no dependa solo del fondo */
  --cta-adjuntos-bg:       #f4f9fd;  /* preferencia de adjuntos, colgada del envío automático */
  --cta-adjuntos-filo:     #a4cce9;
  --cta-neutro-bg:         #f8fafc;  /* plazo de conservación y rol fijo */
  --cta-neutro-borde:      #e2eaf2;
  --cta-etiqueta-bg:       #eef3f8;  /* «Solo lectura» y perfil del usuario */
  --cta-etiqueta-borde:    #e0e8f0;
  --cta-etiqueta:          #45627c;  /* 5,62:1 sobre su fondo (la maqueta, #8398aa: 2,7:1) */
  --cta-th-bg:             #f9fbfe;  /* cabecera de tabla */
  --cta-fila-hover:        #fbfdff;
  --cta-perfil-admin:      linear-gradient(130deg, #eff7ff 0%, #f8fbff 100%);
  --cta-perfil-borde:      #d7e8f7;
  --cta-plan:              linear-gradient(140deg, #ecf6ff 0%, #f4f9ff 100%);  /* tarjeta del plan */
  --cta-plan-borde:        #d9e9f7;
  --cta-plan-nombre:       #236598;  /* 5,68:1 en la parada más oscura */
  --cta-codigo-bg:         #eef6ff;  /* caja de la numeración y del ID de operador */
  --cta-codigo-borde:      #d9e9f7;
  --cta-punto:             #57a2d7;  /* punto del historial, decorativo */
  --cta-punto-halo:        #eff6fc;
  --cta-ayuda:             linear-gradient(132deg, #ffffff 0%, #f5faff 100%);  /* tarjeta «¿Necesitas ayuda?» */

  /* ---- Registro y acceso (#339, S-230) ----
     Maqueta `Docarga-registro-acceso-redisenados.html`. Campos, rótulos, notas y dibujos son los de Cuenta
     (`--cta-*`): la maqueta los pinta iguales. Aquí solo va lo propio de esta página: el lienzo con sus dos
     manchas azules y el panel de marca. En el panel, los textos secundarios de la maqueta (#87b3d7, #92b7d7,
     #83a7c9) dan entre 3,4:1 y 4,1:1 en el extremo claro del degradado; se aclaran a un solo tono. */
  --acc-lienzo:            radial-gradient(ellipse at 9% 4%, #e9f2fd 0, transparent 43%), radial-gradient(ellipse at 92% 92%, #eaf4fc 0, transparent 38%);
  --acc-lienzo-movil:      radial-gradient(ellipse at 0 0, #eaf3fd, transparent 55%);
  --acc-panel:             linear-gradient(153deg, #092b56 0%, #0b3264 50%, #174d83 100%);
  --acc-panel-titulo:      #f3f9ff;  /* lema: 8,16:1 en el extremo claro */
  --acc-panel-acento:      #9ad9ff;  /* segunda línea del lema: 5,67:1 */
  --acc-panel-suave:       #a9c9e6;  /* antetítulo, subtítulo y pie: 5,02:1 */
  --acc-panel-filete:      #ffffff13;
  --acc-panel-aro:         #ffffff0d;  /* los dos aros de adorno */

  /* ---- Color · document states (solid badge bg, white text, all AA) ---- */
  --state-borrador:    #5b6b82;  --state-borrador-bg:    #eef2f7;  --state-borrador-fg:    #45566d;
  --state-emitido:     #0c8168;  --state-emitido-bg:     #dcf5ee;  --state-emitido-fg:     #0a6c58;
  --state-modificado:  #b5790a;  --state-modificado-bg:  #fdf1d9;  --state-modificado-fg:  #8a5c07;
  --state-anulado:     #c93a2d;  --state-anulado-bg:     #fdeae6;  --state-anulado-fg:     #9c281d;
  --state-sustituido:  #6b4f9e;  --state-sustituido-bg:  #efeaf7;  --state-sustituido-fg:  #533c7c;
  --state-expirado:    #6a7789;  --state-expirado-bg:    #eef1f5;  --state-expirado-fg:    #55606f;

  /* ---- Typography ---- */
  /* #339 / D-339-5: Inter autoalojada (fonts.css). IBM Plex Mono sigue siendo la monoespaciada. */
  --font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", monospace;

  --fs-display: 28px;  --lh-display: 34px;  --fw-display: 600;
  --fs-h1:      29px;  --lh-h1:      36px;  --fw-h1:      730;  /* h1 de la maqueta (#339) */
  --fs-h2:      18px;  --lh-h2:      24px;  --fw-h2:      600;
  --fs-h3:      16px;  --lh-h3:      22px;  --fw-h3:      600;
  --fs-body:    14px;  --lh-body:    20px;  --fw-body:    400;
  --fs-body-lg: 16px;  --lh-body-lg: 24px;
  --fs-label:   13px;  --lh-label:   18px;  --fw-label:   500;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-mono:    13px;  --lh-mono:    18px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-btn:      650;  /* peso de los botones de la maqueta (Inter es variable) */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* ---- Radius (contenidos, según las capturas) ---- */
  --r-sm:   6px;    /* chips, controles pequeños */
  --r-md:   9px;    /* inputs, botones, botones de icono (maqueta: 9px) */
  --r-lg:   12px;   /* avisos, formularios laterales, modales (maqueta: 12px) */
  --r-xl:   18px;   /* tarjetas de contenido (maqueta: --radius 18px) */
  --r-pill: 999px;  /* badges, avatares, barra de cuota */

  /* ---- Borders ---- */
  --bw-1: 1px;  --bw-2: 2px;

  /* ---- Shadows (navy-blue, low opacity) ---- */
  /* #339: la sombra de tarjeta de la maqueta es casi imperceptible a propósito (--shadow). */
  --sh-sm:    0 1px 3px #193b6405;
  --sh-md:    0 5px 20px #193b6405, 0 1px 3px #193b6405;
  --sh-lg:    0 20px 60px #092f6326, 0 3px 12px #092f630c;
  /* D-011: anillo SOLIDO. En rgba(.35) se quedaba en 1,6:1 — el foco se veia (2.4.7) pero
     2.4.11 «Focus Appearance» (AA en WCAG 2.2) mide el indicador contra lo que lo rodea, y un
     translucido no es medible sin suponer el fondo. Solido: 4,12:1 en el peor caso. */
  --sh-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms;  --dur-base: 180ms;  --dur-slow: 240ms;

  /* ---- z-index ---- */
  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100;
  --z-backdrop: 1200; --z-modal: 1300; --z-toast: 1400;

  /* ---- Layout ---- */
  /* #339: anchos de la familia A (Panel, Documentos, Crear DeCA). La familia B los cambia desde
     `body.app--familia-b` (app.css); el raíl de iconos y la cabecera son comunes. */
  --sidebar-w: 248px;          /* más de 1230 px */
  --sidebar-w-mid: 232px;      /* de 1001 a 1230 px, y expandida entre 761 y 1000 px */
  --sidebar-w-collapse: 76px;  /* raíl de iconos */
  --topbar-h: 68px;
  --content-max: 1480px;
  --btn-min-h: 44px;
  /* Familia B (Suscripción y pagos, Soporte, Maestros, Cuenta): auditoría §3. */
  --sidebar-w-b: 232px;
  --sidebar-w-mid-b: 205px;
  --btn-min-h-b: 46px;
  --bp-mobile: 480px;  --bp-tablet: 768px;  --bp-desktop: 1024px;  --bp-wide: 1280px;
}