:root {
  /* Colores Principales */
  --primary-navy: #001871;      /* Azul principal (C:100 M:82 Y:03 K:00) */
  --secondary-navy: #103799;    /* Azul acento (C:100 M:91 Y:31 K:19) */
  --accent-cyan: #3EB1CC;       /* Cian detalles (C:69 M:07 Y:18 K:00) */
  --accent-teal: #00BFB3;       /* Verde éxito (C:71 M:00 Y:38 K:00) */
  --accent-magenta: #B236A1;    /* Magenta alertas (C:43 M:85 Y:00 K:00) */

  /* Colores Secundarios */
  --secondary-dark: #000D3E;    /* Azul oscuro (C:100 M:92 Y:42 K:57) */
  --secondary-teal: #008C83;    /* Verde azulado (C:82 M:22 Y:51 K:06) */
  --secondary-purple: #7F0568;  /* Morado oscuro (C:58 M:100 Y:19 K:11) */

  /* Colores de Texto */
  --text-dark: #0F172A;         /* Texto principal */
  --text-muted: #64748B;        /* Texto secundario */
  --text-light: #94A3B8;        /* Texto terciario */

  /* Fondos */
  --bg-body: #F1F5F9;           /* Fondo general */
  --bg-white: #FFFFFF;          /* Fondo blanco */
  --bg-light: #F8FAFC;          /* Fondo claro */

  /* Bordes */
  --border-light: #E2E8F0;      /* Borde claro */
  --border-medium: #CBD5E1;     /* Borde medio */

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 24, 113, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 24, 113, 0.12);
  --shadow-lg: 0 8px 20px rgba(0, 24, 113, 0.16);
  --shadow-button: 0 8px 20px rgba(0, 24, 113, 0.4);
  /* Sombras de desplazamiento de tablas anchas ("scroll shadows"): el degradado
     necesita el navy corporativo con alfa y su version transparente. */
  --shadow-scroll-edge: rgba(0, 24, 113, 0.12);
  --shadow-scroll-edge-fade: rgba(0, 24, 113, 0);

  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 50%;

  /* Tipografía — Montserrat es la fuente de marca (2026-07-29). Sustituye a
     Open Sans, que estaba oficializada en D-2/Fase 3 por ser la que ya
     renderizaba la app. Se carga vía Google Fonts en los tres layouts
     (web_layout, login_layout, diagram_editor_layout) con los pesos del manual
     de marca: 100–800. Open Sans queda como primer fallback para no cambiar el
     render de golpe si la fuente no llega a cargar.
     Se cablea a Bootstrap vía --bs-font-sans-serif más abajo. */
  --font-sans: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Mapeo de variables de Bootstrap → corporate-theme */
  --bs-primary: var(--primary-navy);
  --bs-secondary: var(--secondary-navy);
  --bs-success: var(--accent-teal);
  --bs-info: var(--accent-cyan);
  --bs-warning: var(--state-warning);
  --bs-danger: var(--state-danger);
  --bs-dark: var(--state-dark);
  --bs-light: var(--state-light);
  --bs-body-bg: var(--bg-body);
  --bs-font-sans-serif: var(--font-sans);

  /* Backdrop de modales */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);

  /* Estados Hover / Active (Derivados) */
  --primary-navy-hover: #001669;
  --primary-navy-active: #001666;
  --secondary-navy-hover: #0f338e;
  --secondary-navy-active: #0e328a;
  --accent-teal-hover: #00b1a6;
  --accent-teal-active: #00aca1;
  --accent-cyan-hover: #39a4bd;
  --accent-cyan-active: #389fb8;

  /* Alertas (Derivados) */
  --alert-primary-bg: #e8edf5;
  --alert-secondary-bg: #e4e9f2;
  --alert-success-bg: #e6faf9;
  --alert-success-text: #0a6e68;
  --alert-info-bg: #eaf7fb;
  --alert-info-text: #1a6b7f;

  /* Estados semánticos warning/danger/dark/light (D-4, Fase 3).
     danger/warning: promoción de los valores de facto de materiality-v2. */
  --state-warning: #E6A817;
  --state-warning-hover: #d49b15;
  --state-warning-active: #cf9714;
  --state-danger: #DC3545;
  --state-danger-hover: #bb2d3b;
  --state-danger-active: #b02a37;
  --state-dark: var(--secondary-dark);
  --state-dark-hover: #000a30;
  --state-dark-active: #00092b;
  --state-light: var(--bg-light);
  --state-light-hover: #eef2f7;
  --state-light-active: #e9eef5;
  --alert-warning-bg: #fdf6e3;
  --alert-warning-text: #8a6512;
  --alert-danger-bg: #fbebed;
  --alert-danger-text: #a12433;

  /* Breakpoints (FD2/D-7) — referencia documental del sistema (escala Bootstrap 5).
     CSS no permite var() dentro de @media: usar estos valores en literal y
     anotar el token en un comentario. No inventar breakpoints fuera de escala. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* Superficies derivadas (hover de filas en grids, anillos de foco) */
  --bg-row-hover: #F4F7FF;
  --focus-ring-info: rgba(62, 177, 204, 0.25);
  --focus-ring-info-soft: rgba(62, 177, 204, 0.15);

  /* Superficies sobre fondo navy — portada del dashboard (v2, 2026-07-28).
     Son transparencias de blanco sobre el degradado de marca: no existe un
     hex equivalente, por eso viven aquí como tokens y no como literales. */
  --on-navy-text-soft: rgba(255, 255, 255, 0.78);
  --on-navy-text-muted: rgba(255, 255, 255, 0.65);
  --on-navy-label: rgba(255, 255, 255, 0.72);
  --on-navy-surface: rgba(255, 255, 255, 0.09);
  --on-navy-surface-strong: rgba(255, 255, 255, 0.14);
  --on-navy-border: rgba(255, 255, 255, 0.16);
  --on-navy-border-strong: rgba(255, 255, 255, 0.25);
  --on-navy-btn-bg: rgba(255, 255, 255, 0.08);
  --on-navy-btn-border: rgba(255, 255, 255, 0.35);
  --on-navy-btn-hover: rgba(255, 255, 255, 0.18);
  /* Halos decorativos de la portada (cian y magenta de marca, difuminados) */
  --halo-cyan: rgba(62, 177, 204, 0.28);
  --halo-magenta: rgba(178, 54, 161, 0.22);
  /* Píldoras de tendencia legibles sobre navy (teal/ámbar aclarados) */
  --trend-ok-bg: rgba(0, 191, 179, 0.25);
  --trend-ok-text: #7FF0E8;
  --trend-warn-bg: rgba(230, 168, 23, 0.25);
  --trend-warn-text: #FFD98A;
  /* Superficie suave de magenta (chips y avatares de revisión) */
  --surface-magenta-soft: #F9EEF7;

  /* Afirmaciones del modulo de riesgo por cuenta.
     Los siete primeros pares son los de la hoja `Design Tokens` del modelo
     (MODULO DE RIESGO DE CUENTAS.xlsx), aplicados exactamente como exige.
     Ocurrencia y Corte no traian color en la hoja pese a ser columnas del
     modelo de 8: se derivan en la misma familia (fondo muy claro + texto
     oscuro del mismo tono), en verde azulado y oliva, que son los matices
     libres y quedan lejos del naranja del riesgo significativo. */
  --assertion-integrity-bg: #E6F1FB;
  --assertion-integrity-fg: #0C447C;
  --assertion-existence-bg: #EAF3DE;
  --assertion-existence-fg: #27500A;
  --assertion-accuracy-bg: #FAEEDA;
  --assertion-accuracy-fg: #633806;
  --assertion-valuation-bg: #EDE9FD;
  --assertion-valuation-fg: #3C3489;
  --assertion-obligations-bg: #FBEAF0;
  --assertion-obligations-fg: #72243E;
  --assertion-classification-bg: #F1EFE8;
  --assertion-classification-fg: #444441;
  --assertion-occurrence-bg: #E0F2F1;
  --assertion-occurrence-fg: #14524C;
  --assertion-cutoff-bg: #F4F1DC;
  --assertion-cutoff-fg: #5C5211;
  /* Niveles de riesgo, de la hoja `Design Tokens` del modelo. Son los mismos
     valores que `inherentRiskLogic.ts` ya usaba como literales; aqui pasan a ser
     token para que la tabla del panel los consuma sin duplicar hex.
     El color debe seguir al GRADO, no a la afirmacion: un "Alto" pintado de verde
     porque su columna es verde dice lo contrario de lo que significa. */
  --risk-level-low-bg: #E2F0D9;
  --risk-level-low-fg: #1E7A1E;
  --risk-level-medium-bg: #FFF2CC;
  --risk-level-medium-fg: #7F6000;
  --risk-level-high-bg: #FCE4D6;
  --risk-level-high-fg: #833C00;
  --risk-level-significant-bg: #FCE4D6;
  --risk-level-significant-fg: #C55A11;

  /* Estructura de la tabla del modelo. Antes copiaba los hex de la hoja
     `Design Tokens` del Excel (navy #1F3864, azul #2E5FA3, celeste #D6E4F0):
     tres azules saturados que no son de la marca. Desde 2026-10-01 apuntan a
     la paleta corporativa: cabecera navy, sub-cabecera y filas de clase en los
     fondos claros de la marca y separadores finos. */
  --account-risk-header-bg: var(--alert-primary-bg);
  --account-risk-header-fg: var(--primary-navy);
  --account-risk-subheader-bg: var(--bg-light);
  --account-risk-subheader-fg: var(--primary-navy);
  --account-risk-account-bg: var(--state-light-hover);
  --account-risk-account-fg: var(--primary-navy);
  --account-risk-row-even-bg: var(--bg-light);
  --account-risk-separator: var(--border-medium);

  --assertion-empty-bg: #F2F2F2;
  --assertion-empty-fg: #BFBFBF;

  /* Los tokens --dashboard-* fueron RETIRADOS (D-5, Fase 6): el dashboard
     converge a la marca (navy→--text-dark, berry→--secondary-purple,
     teal→--accent-cyan, bg→--bg-body). No reintroducir. */
}

/* Compactación global de tipografía (2026-08-19, a pedido del usuario).
   La app nunca fijaba un font-size en `html`, así que heredaba el default
   del navegador (16px). Como el sistema de tipografía y espaciado es casi
   todo `rem`, bajar la base aquí compacta texto y espaciados de forma
   proporcional en toda la app con un solo cambio. 93.75% = 15px efectivos. */
html {
  font-size: 93.75%;
}

/* -----------------------------------------------------
   Overrides de soft-ui-dashboard.css
   soft-ui hardcodea --bs-btn-bg y .bg-* con !important,
   así que sobreescribimos al mismo nivel de especificidad.
   ----------------------------------------------------- */

/* Enlaces: soft-ui-dashboard.css define --bs-link-color/--bs-link-hover-color
   en :root con el magenta de fábrica (#cb0c9f). Cualquier <a> o .btn-link sin
   una clase de color explícita (text-secondary, etc.) hereda ese magenta en
   vez del azul de marca — mismo patrón de bug que los botones deshabilitados. */
:root {
  --bs-link-color: var(--primary-navy);
  --bs-link-hover-color: var(--primary-navy-hover);
}

/* Botones */
.btn-primary {
  --bs-btn-bg: var(--primary-navy);
  --bs-btn-border-color: var(--primary-navy);
  --bs-btn-hover-bg: var(--primary-navy-hover);
  --bs-btn-hover-border-color: var(--primary-navy-hover);
  --bs-btn-active-bg: var(--primary-navy-active);
  --bs-btn-active-border-color: var(--primary-navy-active);
  --bs-btn-focus-shadow-rgb: 0, 6, 28;
  --bs-btn-disabled-bg: var(--primary-navy);
  --bs-btn-disabled-border-color: var(--primary-navy);
}
.btn-secondary {
  --bs-btn-bg: var(--secondary-navy);
  --bs-btn-border-color: var(--secondary-navy);
  --bs-btn-hover-bg: var(--secondary-navy-hover);
  --bs-btn-hover-border-color: var(--secondary-navy-hover);
  --bs-btn-active-bg: var(--secondary-navy-active);
  --bs-btn-active-border-color: var(--secondary-navy-active);
  --bs-btn-focus-shadow-rgb: 4, 14, 38;
  --bs-btn-disabled-bg: var(--secondary-navy);
  --bs-btn-disabled-border-color: var(--secondary-navy);
}
.btn-success {
  --bs-btn-bg: var(--accent-teal);
  --bs-btn-border-color: var(--accent-teal);
  --bs-btn-hover-bg: var(--accent-teal-hover);
  --bs-btn-hover-border-color: var(--accent-teal-hover);
  --bs-btn-active-bg: var(--accent-teal-active);
  --bs-btn-active-border-color: var(--accent-teal-active);
  --bs-btn-focus-shadow-rgb: 0, 48, 45;
  --bs-btn-disabled-bg: var(--accent-teal);
  --bs-btn-disabled-border-color: var(--accent-teal);
}
.btn-info {
  --bs-btn-bg: var(--accent-cyan);
  --bs-btn-border-color: var(--accent-cyan);
  --bs-btn-hover-bg: var(--accent-cyan-hover);
  --bs-btn-hover-border-color: var(--accent-cyan-hover);
  --bs-btn-active-bg: var(--accent-cyan-active);
  --bs-btn-active-border-color: var(--accent-cyan-active);
  --bs-btn-focus-shadow-rgb: 16, 44, 51;
  --bs-btn-disabled-bg: var(--accent-cyan);
  --bs-btn-disabled-border-color: var(--accent-cyan);
}
.btn-warning {
  --bs-btn-bg: var(--state-warning);
  --bs-btn-border-color: var(--state-warning);
  --bs-btn-hover-bg: var(--state-warning-hover);
  --bs-btn-hover-border-color: var(--state-warning-hover);
  --bs-btn-active-bg: var(--state-warning-active);
  --bs-btn-active-border-color: var(--state-warning-active);
  --bs-btn-focus-shadow-rgb: 230, 168, 23;
  --bs-btn-disabled-bg: var(--state-warning);
  --bs-btn-disabled-border-color: var(--state-warning);
}
.btn-danger {
  --bs-btn-bg: var(--state-danger);
  --bs-btn-border-color: var(--state-danger);
  --bs-btn-hover-bg: var(--state-danger-hover);
  --bs-btn-hover-border-color: var(--state-danger-hover);
  --bs-btn-active-bg: var(--state-danger-active);
  --bs-btn-active-border-color: var(--state-danger-active);
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-disabled-bg: var(--state-danger);
  --bs-btn-disabled-border-color: var(--state-danger);
}
.btn-dark {
  --bs-btn-bg: var(--state-dark);
  --bs-btn-border-color: var(--state-dark);
  --bs-btn-hover-bg: var(--state-dark-hover);
  --bs-btn-hover-border-color: var(--state-dark-hover);
  --bs-btn-active-bg: var(--state-dark-active);
  --bs-btn-active-border-color: var(--state-dark-active);
  --bs-btn-focus-shadow-rgb: 0, 13, 62;
  --bs-btn-disabled-bg: var(--state-dark);
  --bs-btn-disabled-border-color: var(--state-dark);
}
.btn-light {
  --bs-btn-color: var(--text-dark);
  --bs-btn-bg: var(--state-light);
  --bs-btn-border-color: var(--border-light);
  --bs-btn-hover-color: var(--text-dark);
  --bs-btn-hover-bg: var(--state-light-hover);
  --bs-btn-hover-border-color: var(--border-medium);
  --bs-btn-active-color: var(--text-dark);
  --bs-btn-active-bg: var(--state-light-active);
  --bs-btn-active-border-color: var(--border-medium);
}

/* Fondos de fondo (bg-*) — necesitan !important para beater soft-ui */
.bg-primary   { background-color: var(--primary-navy) !important; }
.bg-secondary { background-color: var(--secondary-navy) !important; }
.bg-success   { background-color: var(--accent-teal) !important; }
.bg-info      { background-color: var(--accent-cyan) !important; }
.bg-warning   { background-color: var(--state-warning) !important; }
.bg-danger    { background-color: var(--state-danger) !important; }
.bg-dark      { background-color: var(--state-dark) !important; }
.bg-light     { background-color: var(--state-light) !important; }

/* Texto colorido
   Nota: .text-light NO se sobreescribe a propósito — en Bootstrap/Soft UI es un
   texto casi blanco para fondos oscuros; mapearlo a --text-light (#94A3B8)
   rompería contraste. .text-white tampoco se toca. */
.text-primary   { color: var(--primary-navy) !important; }
.text-secondary { color: var(--secondary-navy) !important; }
.text-success   { color: var(--accent-teal) !important; }
.text-info      { color: var(--accent-cyan) !important; }
.text-warning   { color: var(--state-warning) !important; }
.text-danger    { color: var(--state-danger) !important; }
.text-dark      { color: var(--text-dark) !important; }

/* Badges */
.badge.bg-primary   { background-color: var(--primary-navy) !important; }
.badge.bg-secondary { background-color: var(--secondary-navy) !important; }
.badge.bg-success   { background-color: var(--accent-teal) !important; }
.badge.bg-info      { background-color: var(--accent-cyan) !important; }
.badge.bg-warning   { background-color: var(--state-warning) !important; }
.badge.bg-danger    { background-color: var(--state-danger) !important; }
.badge.bg-dark      { background-color: var(--state-dark) !important; }

/* Bordes */
.border-primary   { border-color: var(--primary-navy) !important; }
.border-secondary { border-color: var(--secondary-navy) !important; }
.border-success   { border-color: var(--accent-teal) !important; }
.border-info      { border-color: var(--accent-cyan) !important; }
.border-warning   { border-color: var(--state-warning) !important; }
.border-danger    { border-color: var(--state-danger) !important; }
.border-dark      { border-color: var(--state-dark) !important; }

/* Botones outline */
.btn-outline-primary {
  --bs-btn-color: var(--primary-navy);
  --bs-btn-border-color: var(--primary-navy);
  --bs-btn-hover-bg: var(--primary-navy);
  --bs-btn-hover-border-color: var(--primary-navy);
  --bs-btn-active-bg: var(--primary-navy);
  --bs-btn-active-border-color: var(--primary-navy);
  --bs-btn-focus-shadow-rgb: 0, 6, 28;
  --bs-btn-disabled-color: var(--primary-navy);
  --bs-btn-disabled-border-color: var(--primary-navy);
}
/* soft-ui-dashboard.css fija `color: #cb0c9f` (denylist) directamente en el :hover,
   sin pasar por las variables: el botón volvía a rosado al pasar el cursor. */
.btn-outline-primary:hover:not(.active) {
  color: var(--primary-navy);
}
.btn-outline-secondary {
  --bs-btn-color: var(--secondary-navy);
  --bs-btn-border-color: var(--secondary-navy);
  --bs-btn-hover-bg: var(--secondary-navy);
  --bs-btn-hover-border-color: var(--secondary-navy);
  --bs-btn-active-bg: var(--secondary-navy);
  --bs-btn-active-border-color: var(--secondary-navy);
}
.btn-outline-success {
  --bs-btn-color: var(--accent-teal);
  --bs-btn-border-color: var(--accent-teal);
  --bs-btn-hover-bg: var(--accent-teal);
  --bs-btn-hover-border-color: var(--accent-teal);
  --bs-btn-active-bg: var(--accent-teal);
  --bs-btn-active-border-color: var(--accent-teal);
}
.btn-outline-info {
  --bs-btn-color: var(--accent-cyan);
  --bs-btn-border-color: var(--accent-cyan);
  --bs-btn-hover-bg: var(--accent-cyan);
  --bs-btn-hover-border-color: var(--accent-cyan);
  --bs-btn-active-bg: var(--accent-cyan);
  --bs-btn-active-border-color: var(--accent-cyan);
}
.btn-outline-warning {
  --bs-btn-color: var(--state-warning);
  --bs-btn-border-color: var(--state-warning);
  --bs-btn-hover-bg: var(--state-warning);
  --bs-btn-hover-border-color: var(--state-warning);
  --bs-btn-active-bg: var(--state-warning);
  --bs-btn-active-border-color: var(--state-warning);
}
.btn-outline-danger {
  --bs-btn-color: var(--state-danger);
  --bs-btn-border-color: var(--state-danger);
  --bs-btn-hover-bg: var(--state-danger);
  --bs-btn-hover-border-color: var(--state-danger);
  --bs-btn-active-bg: var(--state-danger);
  --bs-btn-active-border-color: var(--state-danger);
}
.btn-outline-dark {
  --bs-btn-color: var(--state-dark);
  --bs-btn-border-color: var(--state-dark);
  --bs-btn-hover-bg: var(--state-dark);
  --bs-btn-hover-border-color: var(--state-dark);
  --bs-btn-active-bg: var(--state-dark);
  --bs-btn-active-border-color: var(--state-dark);
}

/* Input-group-lg: sufijo "%" superpuesto sobre el valor (2026-08-13, plan de ajuste visual)
 *
 * Soft UI Dashboard pone `.input-group .form-control+.input-group-text` en
 * `position: absolute` (soft-ui-dashboard.css:21758) — pensado para iconos que
 * se superponen en un padding reservado en OTROS inputs. `PercentageInput.tsx`
 * (Materialidad V2 — Porcentaje de Materialidad Global/Desempeño/Trivial) no
 * reserva ese padding, así que el badge "%" queda flotando encima del valor
 * en vez de al lado. `.input-group-lg` solo lo usa este componente en toda la
 * app, así que se acota aquí sin riesgo de afectar otros patrones de ícono.
 */
.input-group-lg .form-control + .input-group-text {
  position: static !important;
}

/* Paginación de vanilla-datatables: "Procesando..." desborda el círculo (2026-08-13)
 *
 * Al hacer clic en un número de página, web2py (`web2py.js:602-618`) reemplaza
 * el contenido del enlace con el texto de `w2p_ajax_disable_with_message`
 * ("Procesando..." en es.py) mientras espera la respuesta AJAX. El círculo de
 * paginación mide 36×36px (soft-ui-dashboard.css:32467) — ese texto no cabe y
 * se desborda visualmente sobre el número/botón vecino. Se contiene el
 * desborde sin usar `:contains` (no existe en CSS) ni depender de detectar
 * el estado "disabled" (esa misma clase también la usan, permanentemente,
 * las flechas de "anterior/siguiente" en el límite de la paginación — no se
 * puede diferenciar un `.disabled` del otro solo con CSS, así que no se les
 * cambia el color/contenido, solo se evita que el texto se salga del círculo).
 */
.dataTable-pagination-list a {
  overflow: hidden;
  white-space: nowrap;
}

/* Alertas
 *
 * `background-image: none` NO es decorativo: es lo que hace que estas reglas
 * surtan efecto. El tema Soft UI pinta las alertas con un `linear-gradient` en
 * `background-image`, que se dibuja ENCIMA de `background-color`. Sin anularlo,
 * los `background-color !important` de abajo quedaban invisibles y las alertas
 * seguían saliendo en degradado —el `alert-warning` llegaba a un naranja→rojo
 * que parecía un error y dejaba el texto ilegible—.
 *
 * `materiality-v2.css` ya había descubierto esto y lo resolvió con la misma
 * técnica, pero scopeado a `.materiality-modal` y `.phase-edit-form`. Aquí se
 * eleva al sistema para que valga en toda la aplicación, que es donde debía
 * estar (D-11: fuente única de color).
 */
.alert           { background-image: none !important; }
.alert-primary   { background-color: var(--alert-primary-bg) !important; border-color: var(--primary-navy) !important; color: var(--primary-navy) !important; }
.alert-secondary { background-color: var(--alert-secondary-bg) !important; border-color: var(--secondary-navy) !important; color: var(--secondary-navy) !important; }
.alert-success   { background-color: var(--alert-success-bg) !important; border-color: var(--accent-teal) !important; color: var(--alert-success-text) !important; }
.alert-info      { background-color: var(--alert-info-bg) !important; border-color: var(--accent-cyan) !important; color: var(--alert-info-text) !important; }
.alert-warning   { background-color: var(--alert-warning-bg) !important; border-color: var(--state-warning) !important; color: var(--alert-warning-text) !important; }
.alert-danger    { background-color: var(--alert-danger-bg) !important; border-color: var(--state-danger) !important; color: var(--alert-danger-text) !important; }

/* Accordion (2026-08-13, hallazgo H9 del plan de ajuste visual)
 *
 * Soft UI Dashboard desactiva a propósito el chevron de expandir/colapsar
 * (`--bs-accordion-btn-icon: none` en soft-ui-dashboard.css) en TODO el tema,
 * dejando los accordion-button sin ninguna pista visual de que son
 * interactivos. Se restaura aquí con el SVG estándar de Bootstrap, coloreado
 * con los hex resueltos de los tokens de marca (un SVG en background-image no
 * admite var(), igual que brandTokens/PRINT_TOKENS para Chart.js/exportación):
 * --text-muted (#64748B) en reposo, --primary-navy (#001871) expandido.
 * El ancho se fija en la propia regla (no depende de --bs-accordion-btn-icon-width,
 * que solo existe dentro de un wrapper `.accordion` que algunos renderers omiten).
 */
.accordion-button::after {
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-size: 1.25rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23001871'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Gradientes Soft UI → identidad IARA (solo color / background-image) */
.bg-gradient-primary {
  background-image: linear-gradient(310deg, var(--secondary-navy) 0%, var(--primary-navy) 100%) !important;
}
.bg-gradient-success {
  background-image: linear-gradient(310deg, var(--secondary-teal) 0%, var(--accent-teal) 100%) !important;
}
.bg-gradient-info {
  background-image: linear-gradient(310deg, var(--secondary-navy) 0%, var(--accent-cyan) 100%) !important;
}
.bg-gradient-warning {
  background-image: linear-gradient(310deg, var(--state-warning-active) 0%, var(--state-warning) 100%) !important;
}
.bg-gradient-danger {
  background-image: linear-gradient(310deg, var(--state-danger-active) 0%, var(--state-danger) 100%) !important;
}
/* DEPRECATED (D-3, Fase 3): bg-gradient-dark era la CTA de facto en ~63 usos
   (vistas server-rendered + Python). Se remapea aquí al gradiente navy corporativo
   para re-tematizarlos de golpe, pero la clase canónica de CTA es .btn-primary:
   NO usar bg-gradient-dark en código nuevo; migrar gradualmente los existentes. */
.bg-gradient-dark {
  background-image: linear-gradient(310deg, var(--secondary-dark) 0%, var(--primary-navy) 100%) !important;
}
.bg-gradient-light {
  background-image: linear-gradient(310deg, var(--border-medium) 0%, var(--bg-light) 100%) !important;
}

/* Paginación de vanilla-datatables (2026-08-13, hallazgo del plan de ajuste visual)
 *
 * `.dataTable-pagination-list .active a` en soft-ui-dashboard.css pinta la
 * página activa con el degradado prohibido #7928CA→#FF0080 (denylist del gate
 * check_style_tokens.py). No lo detecta el gate porque vive en el CSS vendor,
 * fuera de su alcance de escaneo — y el override existente en app.css
 * (`.iara-grid .dataTable-pagination-list .active .button`) apunta a una clase
 * que esta regla del vendor no usa, así que no lo neutraliza. Se corrige aquí,
 * sin depender de `.iara-grid`, para que ninguna tabla de la app (con o sin
 * ese wrapper) muestre el magenta/morado de Soft UI.
 */
.dataTable-pagination-list .active a,
.dataTable-pagination-list .active a:hover,
.dataTable-pagination-list .active a:focus {
  background-image: linear-gradient(310deg, var(--secondary-navy) 0%, var(--primary-navy) 100%) !important;
}

/* Hover/active Soft UI pinta background-color magenta sobre .btn.bg-gradient-* */
.btn.bg-gradient-primary:hover,
.btn.bg-gradient-primary:focus,
.btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
.btn.bg-gradient-primary:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--secondary-navy) 0%, var(--primary-navy) 100%) !important;
  background-color: var(--primary-navy) !important;
  border-color: var(--primary-navy) !important;
}
.btn.bg-gradient-success:hover,
.btn.bg-gradient-success:focus,
.btn.bg-gradient-success:not(:disabled):not(.disabled).active,
.btn.bg-gradient-success:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--secondary-teal) 0%, var(--accent-teal) 100%) !important;
  background-color: var(--accent-teal) !important;
  border-color: var(--accent-teal) !important;
}
.btn.bg-gradient-info:hover,
.btn.bg-gradient-info:focus,
.btn.bg-gradient-info:not(:disabled):not(.disabled).active,
.btn.bg-gradient-info:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--secondary-navy) 0%, var(--accent-cyan) 100%) !important;
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
}
.btn.bg-gradient-warning:hover,
.btn.bg-gradient-warning:focus,
.btn.bg-gradient-warning:not(:disabled):not(.disabled).active,
.btn.bg-gradient-warning:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--state-warning-active) 0%, var(--state-warning) 100%) !important;
  background-color: var(--state-warning) !important;
  border-color: var(--state-warning) !important;
}
.btn.bg-gradient-danger:hover,
.btn.bg-gradient-danger:focus,
.btn.bg-gradient-danger:not(:disabled):not(.disabled).active,
.btn.bg-gradient-danger:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--state-danger-active) 0%, var(--state-danger) 100%) !important;
  background-color: var(--state-danger) !important;
  border-color: var(--state-danger) !important;
}
.btn.bg-gradient-dark:hover,
.btn.bg-gradient-dark:focus,
.btn.bg-gradient-dark:not(:disabled):not(.disabled).active,
.btn.bg-gradient-dark:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--secondary-dark) 0%, var(--primary-navy) 100%) !important;
  background-color: var(--primary-navy) !important;
  border-color: var(--primary-navy) !important;
}

/* Login: CTA en magenta corporativo (acotado a .login-page para no afectar
   los botones primary del resto de la app, que siguen en navy) */
.login-page .btn.bg-gradient-primary,
.login-page .btn.bg-gradient-primary:hover,
.login-page .btn.bg-gradient-primary:focus,
.login-page .btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
.login-page .btn.bg-gradient-primary:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(310deg, var(--secondary-purple) 0%, var(--accent-magenta) 100%) !important;
  background-color: var(--accent-magenta) !important;
  border-color: var(--accent-magenta) !important;
}

/* Enlaces Soft UI .text-primary.text-gradient (login Registrarse / Recuperar) */
.text-gradient.text-primary {
  background-image: linear-gradient(310deg, var(--secondary-navy), var(--primary-navy)) !important;
}
.text-gradient.text-success {
  background-image: linear-gradient(310deg, var(--secondary-teal), var(--accent-teal)) !important;
}
.text-gradient.text-info {
  background-image: linear-gradient(310deg, var(--secondary-navy), var(--accent-cyan)) !important;
}

/* Print Optimization */
@media print {
  :root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-button: none;
  }

  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
  }
}

/* ---------------------------------------------------------------------------
   Tipografía de marca — Montserrat gana sobre el tema vendor (2026-07-29)

   `static/assets/css/soft-ui-dashboard.css` es un tema de TERCEROS y declara
   Open Sans en tres puntos:
     · --bs-font-sans-serif: Open Sans;   → ya recableado en :root (arriba)
     · .card .card-body { font-family: "Open Sans"; }
     · .text-sans-serif  { font-family: "Open Sans" !important; }

   No se edita ese archivo (se perdería al actualizar el tema y rompería la
   regla de fuente única). Se sobrescribe aquí, que es la fuente canónica de
   estilos, reusando el token --font-sans. Si mañana cambia la fuente de marca,
   se cambia SOLO el token.
   --------------------------------------------------------------------------- */
body,
.card .card-body {
  font-family: var(--font-sans);
}

/* El vendor usa !important en esta utilidad; se necesita la misma fuerza. */
.text-sans-serif {
  font-family: var(--font-sans) !important;
}