/*
 * Catálogo semántico común de OPN Risk.
 *
 * Este archivo se carga antes de las hojas de producto. Los nombres de
 * compatibilidad que aún usan hojas antiguas se mantienen aquí junto a los
 * roles semánticos; las hojas nuevas deben consumir primero estos nombres.
 * El selector de tema sigue siendo el contrato existente, sin introducir un
 * mecanismo nuevo.
 *
 * :root solo declara geometría compartida. Cada html[data-theme] declara el
 * catálogo completo de color y superficie; un tercer tema no hereda el oscuro.
 */

:root {
    --border-input-select-width: 1px;
    --font-line-body: 1.5;
    --font-measure-reading: 68ch;
    --font-size-body: 1rem;
    --font-size-label: .78rem;
    --font-size-title: 1.5rem;
    --info-gap: 1rem;
    --info-radius: 16px;
    --input-select-repeat: no-repeat;
    --layout-control-height: 42px;
    --layout-severity-gap: .3em;
    --layout-severity-marker-size: .45em;
    --layout-state-icon-size: 1.58rem;
    --layout-switch-height: 1.15em;
    --layout-switch-width: 2.2em;
    --radius-lg: 12px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --reading-measure: 68ch;
    --reading-size: 16px;
}

html[data-theme="dark"] {
    --accent-primary: #4f7cff;
    /* Superficies, texto y bordes */
    --surface-canvas: #0f1115;
    --surface-1: #1a1d23;
    --surface-2: #232730;
    --surface-3: #2f3440;
    --surface-sunken: #11141a;
    --surface-hover: rgba(59, 130, 246, .13);
    --surface-selected: rgba(59, 130, 246, .16);
    --surface-overlay: rgba(8, 12, 20, .88);
    --surface-panel: rgba(26, 29, 35, .82);
    --surface-panel-strong: rgba(35, 39, 48, .96);
    --surface-modal: rgba(8, 13, 25, .985);
    /* Superficie genérica de cabecera de diálogo; la apariencia vive aquí,
       no en una rama de tema del componente. */
    --surface-dialog-header: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 100%);
    --border-dialog-header: rgba(160, 166, 177, .34);
    --text-dialog-header: #ffffff;
    --text-dialog-title: #ffffff;
    --accent-dialog-marker: #3b82f6;
    --surface-summary: rgba(96, 165, 250, .055);
    --surface-summary-item: rgba(15, 23, 42, .32);
    --surface-summary-next: rgba(14, 165, 233, .10);
    --text-primary: #ffffff;
    --text-secondary: #a0a6b1;
    --text-muted: #6b7280;
    --text-subtle: #94a3b8;
    --text-disabled: #4b5563;
    --text-inverse: #11151b;
    --text-link: #3b82f6;
    --text-link-strong: #93bbff;
    --text-link-hover: #6ba4ff;
    --border-subtle: rgba(160, 166, 177, .22);
    --border-strong: rgba(160, 166, 177, .34);
    --border-focus: rgba(59, 130, 246, .28);
    --border-inverse: rgba(255, 255, 255, .34);
    --border-summary-item: rgba(148, 163, 184, .22);
    --border-summary-next: rgba(56, 189, 248, .28);
    --text-summary-next: #7dd3fc;

    /* Acciones */
    --action-primary-bg: #3b82f6;
    --action-primary-bg-hover: #5b8cff;
    --action-primary-fg: #ffffff;
    --action-primary-border: #3b82f6;
    --action-secondary-bg: #4f7cff;
    --action-secondary-bg-hover: #6ba4ff;
    --action-secondary-fg: #ffffff;
    --action-quiet-fg: #a0a6b1;
    --action-danger-bg: #ff1f1f;
    --action-danger-fg: #ffffff;
    --focus-ring: var(--border-focus);

    /* Estados y gravedad: la forma sigue siendo responsabilidad del módulo. */
    --state-success-fg: #30d158;
    --state-success-bg: rgba(48, 209, 88, .14);
    --state-info-fg: #3b82f6;
    --state-info-bg: rgba(59, 130, 246, .12);
    --state-warning-fg: #ffd60a;
    --state-warning-bg: rgba(255, 214, 10, .14);
    --state-danger-fg: #ff1f1f;
    --state-danger-bg: rgba(255, 31, 31, .14);
    --severity-critical-fg: #ff1f1f;
    --severity-critical-bg: rgba(255, 31, 31, .14);
    --severity-critical-border: rgba(255, 31, 31, .32);
    --severity-high-fg: #ff8a00;
    --severity-high-bg: rgba(255, 138, 0, .14);
    --severity-high-border: rgba(255, 138, 0, .32);
    --severity-medium-fg: #ffd60a;
    --severity-medium-bg: rgba(255, 214, 10, .14);
    --severity-medium-border: rgba(255, 214, 10, .32);
    --severity-low-fg: #30d158;
    --severity-low-bg: rgba(48, 209, 88, .14);
    --severity-low-border: rgba(48, 209, 88, .32);
    --severity-unknown-fg: #94a3b8;
    --severity-unknown-bg: rgba(148, 163, 184, .14);
    --severity-unknown-border: rgba(148, 163, 184, .22);

    /* Datos y elevación */
    --data-series-1: #4f7cff;
    --data-series-2: #38bdf8;
    --data-series-3: #22d3ee;
    --data-series-4: #7aa2ff;
    --data-series-5: #94a3b8;
    --data-series-6: #f59e0b;
    --data-grid: rgba(255, 255, 255, .12);
    --data-axis: rgba(255, 255, 255, .18);
    --data-threshold: #ffd60a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .20);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .24);
    --shadow-lg: 0 16px 30px rgba(0, 0, 0, .36);
    --shadow-panel: 0 16px 44px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .18);
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;

    /* O4-B1: roles compartidos para superficies de configuración y bandejas. */
    --surface-workspace: var(--surface-canvas);
    --surface-workspace-raised: color-mix(in srgb, var(--surface-workspace) 88%, #ffffff 12%);
    --text-workspace: var(--text-primary);
    --border-workspace: color-mix(in srgb, var(--border-subtle) 76%, transparent);
    --text-workspace-muted: color-mix(in srgb, var(--text-primary) 68%, transparent);
    --accent-brand: #3b82f6;
    --accent-interactive: #3b82f6;
    --shadow-card-soft: 0 8px 26px rgb(0 0 0 / 7%);
    --shadow-dialog: 0 1.5rem 4rem rgb(0 0 0 / 35%);
    --surface-dialog-backdrop: rgb(5 9 16 / 68%);
    --border-layout: var(--border-subtle);
    --border-input-layout: var(--border-layout);
    --surface-interactive-active: rgba(59, 130, 246, .12);
    --surface-list-item: transparent;
    --surface-list-selected: var(--overlay-soft);
    --surface-message: var(--overlay-soft);
    --surface-message-internal: rgba(255, 214, 10, .06);
    --border-status-success: rgba(48, 209, 88, .35);
    --border-status-warning: rgba(255, 214, 10, .35);
    --text-warning-attention: #ffd60a;
    --border-warning-attention: rgba(255, 214, 10, .35);
    --surface-warning-banner: transparent;
    --surface-status-warning-active: rgba(255, 214, 10, .12);
    --outline-status-warning: rgba(255, 214, 10, .28);
    --surface-modal-backdrop: rgba(5, 9, 16, .72);
    --surface-context-backdrop: rgba(0, 0, 0, .45);
    --shadow-modal: 0 22px 70px rgba(0, 0, 0, .5);

    /* Roles de preservación O2: composición y estados del shell compartido. */
    --surface-utility: rgba(255, 255, 255, .03);
    --border-utility: var(--border-color);
    --text-utility: var(--text-primary);
    --shadow-utility: none;
    --surface-utility-hover: rgba(255, 255, 255, .08);
    --border-utility-hover: rgba(255, 255, 255, .22);
    --text-utility-hover: var(--text-primary);
    --shadow-utility-hover: none;
    --surface-utility-expanded: rgba(255, 255, 255, .03);
    --border-utility-expanded: var(--border-color);
    --border-danger-control: rgba(220, 38, 38, .35);
    --text-danger-control: #fecaca;
    --surface-danger-control-hover: rgba(127, 29, 29, .35);
    --border-danger-control-hover: rgba(248, 113, 113, .75);
    --text-danger-control-hover: #fee2e2;
    --surface-popover: rgba(7, 12, 22, .86);
    --shadow-popover: none;
    --text-popover-label: var(--text-secondary);
    --text-link-floating: #ffffff;
    --surface-control: rgba(255, 255, 255, .03);
    --border-control: transparent;
    --text-control: var(--text-primary);
    --border-control-hover: transparent;
    --surface-control-selected: rgba(56, 189, 248, .13);
    --border-control-selected: rgba(56, 189, 248, .52);
    --text-control-selected: var(--text-primary);
    --shadow-control-selected: none;
    --surface-selection-status: rgba(34, 197, 94, .13);
    --border-selection-status: rgba(34, 197, 94, .52);
    --surface-selection-accent: rgba(249, 115, 22, .13);
    --border-selection-accent: rgba(249, 115, 22, .52);
    --surface-emphasis-control: var(--bg-card);

    --surface-floating: var(--surface-elevated, #151a23);
    --border-floating: var(--border-color, rgba(148, 163, 184, .32));
    --text-floating: var(--text-primary, #f8fafc);
    --shadow-floating: 0 22px 55px rgba(0, 0, 0, .38), 0 2px 0 rgba(255, 255, 255, .04) inset;
    --text-floating-description: var(--text-secondary, #cbd5e1);
    --border-floating-control: var(--border-color, rgba(148, 163, 184, .32));
    --text-floating-control: var(--text-secondary, #cbd5e1);
    --border-floating-control-focus: var(--secondary-color, #38bdf8);
    --text-floating-control-focus: var(--text-primary, #f8fafc);
    --border-floating-hover: var(--border-color, rgba(148, 163, 184, .42));
    --surface-floating-hover: rgba(148, 163, 184, .1);
    --border-floating-icon: rgba(56, 189, 248, .28);
    --surface-floating-icon: rgba(56, 189, 248, .1);
    --text-floating-icon: var(--secondary-color, #7dd3fc);
    --text-floating-muted: var(--text-muted, #94a3b8);
    --border-floating-divider: var(--border-subtle, rgba(148, 163, 184, .18));

    /* Tipografía: los valores oscuros reproducen el estado actual. */
    --font-ui: "Chakra Petch", "Segoe UI", "Inter", "Roboto", sans-serif;
    --font-display: "Chakra Petch", "Segoe UI", "Inter", "Roboto", sans-serif;
    --font-reading: "Chakra Petch", "Segoe UI", "Inter", "Roboto", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --font-size-body: 1rem;
    --font-size-label: .78rem;
    --font-size-title: 1.5rem;
    --font-line-body: 1.5;
    --font-measure-reading: 68ch;
    --text-wrap-reading: wrap;
    --text-reading-leading: 1.48;

    /* Roles semánticos O1 consolidados: valores dark preservados. */
    --action-emphasis-surface: linear-gradient(135deg, rgba(14, 165, 233, 0.92), rgba(37, 99, 235, 0.9));
    --action-emphasis-border: rgba(56, 189, 248, 0.52);
    --action-emphasis-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    --action-emphasis-hover-border: rgba(125, 211, 252, 0.76);
    --action-emphasis-hover-shadow: 0 16px 28px rgba(37, 99, 235, 0.24);
    --action-quiet-border: rgba(148, 163, 184, 0.26);
    --action-quiet-shadow: none;
    --action-quiet-hover-surface: rgba(30, 41, 59, 0.68);
    --action-quiet-hover-border: rgba(148, 163, 184, 0.46);
    --action-quiet-hover-foreground: #ffffff;
    --text-meta: var(--text-secondary);
    --state-predictive-surface: rgba(139, 92, 246, .16);
    --state-predictive-panel-surface: rgba(139, 92, 246, .10);
    --state-predictive-foreground: #c4b5fd;
    --state-predictive-border: rgba(139, 92, 246, .45);
    --state-predictive-hover-surface: rgba(139, 92, 246, .08);
    --surface-row: rgba(6, 12, 22, .34);
    --border-row: rgba(148, 163, 184, .2);
    --text-label: rgba(148, 163, 184, .92);
    --text-value: rgba(226, 232, 240, .95);
    --surface-info-soft: rgba(59, 130, 246, .11);
    --text-info-strong: #b8e1ff;
    --surface-accent-soft: rgba(124, 58, 237, .07);
    --text-accent-strong: #efe6ff;
    --text-accent: #b794f6;
    --text-warning-strong: #ffb020;
    --surface-warning-soft: rgba(255, 176, 32, .12);
    --text-danger-strong: #e35d6a;
    --text-status-danger-strong: #ff8a8a;
    --text-status-neutral: #a0a6b1;
    --text-outline-strong: #b8c0cc;
    --border-focus-strong: rgba(59, 130, 246, .38);
    --surface-indicator: linear-gradient(180deg, var(--card-bg), var(--bg-secondary));
    --border-modal-header: var(--opn-hairline, var(--sentinel-border-strong));
    --surface-modal-header: linear-gradient(180deg, var(--sentinel-surface-raised) 0%, var(--sentinel-surface-raised) 100%);
    --surface-outline: transparent;
    --border-outline: var(--border-strong);
    --text-outline: var(--text-primary);
    --surface-selected-strong: var(--sentinel-border-critical);
    --border-selected-strong: var(--sentinel-border-critical);
    --text-selected-inverse: var(--sentinel-text-inverse);

    /* O4-C4: primitivas compartidas de contexto, navegación y estados. */
    --text-heading: #ffffff;
    --surface-context: rgba(26, 29, 35, .72);
    --border-context: var(--border-subtle);
    --text-context: var(--text-secondary);
    --text-context-hover: var(--text-link-hover);
    --text-context-active: var(--text-primary);
    --text-context-divider: var(--text-muted);
    --font-weight-context-item: 400;
    --font-weight-context-active: 400;
    --shadow-navigation: none;
    --text-navigation: var(--text-secondary);
    --text-navigation-icon: var(--text-muted);
    --surface-navigation-hover: var(--sidebar-link-hover-bg);
    --surface-navigation-active: linear-gradient(90deg, color-mix(in srgb, var(--ux-accent) 28%, transparent), color-mix(in srgb, var(--ux-accent) 8%, transparent) 62%, transparent 100%);
    --text-navigation-active: var(--text-primary);
    --accent-navigation: var(--accent-blue);
    --border-navigation-active: transparent;
    --text-status-badge-base: #ffffff;
    --surface-status-badge-success: transparent;
    --text-status-badge-success: #ffffff;
    --surface-status-badge-danger: transparent;
    --surface-status-badge-warning: transparent;
    --text-status-badge-warning: #ffffff;
    --surface-status-badge-info: transparent;
    --text-status-badge-info: #ffffff;
    --surface-status-badge-secondary: rgba(107, 114, 128, .35);
    --text-status-badge-secondary: #d1d5db;
    --surface-status-badge-primary: transparent;
    --text-status-badge-emphasis: #ffffff;
    --surface-control-outline: transparent;
    --border-control-outline: var(--border-strong);
    --text-control-outline: var(--text-primary);
    --surface-control-outline-hover: rgba(47, 52, 64, .88);
    --border-control-outline-hover: rgba(160, 166, 177, .46);
    --text-control-outline-hover: var(--text-primary);

    /* Geometría compartida: no depende del tema. */
    --layout-control-height: 42px;
    --layout-switch-width: 2.2em;
    --layout-switch-height: 1.15em;
    --layout-state-icon-size: 1.58rem;
    --layout-severity-gap: .3em;
    --layout-severity-marker-size: .45em;

    /* Catálogo semántico de Sentinel: una paleta pequeña para ambos temas. */
    --sentinel-surface-canvas: #0f1115;
    --sentinel-surface-panel: rgba(30, 41, 59, .8);
    --sentinel-surface-raised: #1e293b;
    --sentinel-surface-sunken: rgba(8, 16, 32, 0.62);
    --sentinel-surface-overlay: rgba(8, 12, 20, .88);
    --sentinel-surface-hover: rgba(59, 130, 246, .13);
    --sentinel-surface-selected: rgba(59, 130, 246, .16);
    --sentinel-surface-soft: rgba(148, 163, 184, .08);
    --sentinel-text-primary: rgba(241, 245, 249, .94);
    --sentinel-text-secondary: rgba(171, 186, 210, .9);
    --sentinel-text-muted: #6b7280;
    --sentinel-text-subtle: #6b7280;
    --sentinel-text-inverse: #ffffff;
    --sentinel-text-warm: #f1d8cf;
    --sentinel-text-link: #60a5fa;
    --sentinel-text-danger: #8f1722;
    --sentinel-text-danger-soft: #fca5a5;
    --sentinel-text-warning: #fcd34d;
    --sentinel-text-success: #86efac;
    --sentinel-text-info: rgba(125, 211, 252, .96);
    --sentinel-border-subtle: rgba(148, 163, 184, .16);
    --sentinel-border-normal: rgba(148, 163, 184, .24);
    --sentinel-border-strong: #e4d4ce;
    --sentinel-border-focus: #5ca9ff;
    --sentinel-border-critical: rgba(179, 38, 47, .28);
    --sentinel-border-warning: rgba(251, 191, 36, .45);
    --sentinel-border-success: rgba(74, 222, 128, 0.38);
    --sentinel-border-info: rgba(125, 211, 252, .48);
    --sentinel-border-dark: rgba(91, 35, 36, 0.18);
    --sentinel-accent-primary: rgba(59, 130, 246, 0.96);
    --sentinel-accent-primary-soft: rgba(59, 130, 246, .12);
    --sentinel-accent-secondary: #4f7cff;
    --sentinel-accent-cyan: #22d3ee;
    --sentinel-accent-cyan-soft: rgba(34, 211, 238, .14);
    --sentinel-accent-danger: #c23542;
    --sentinel-accent-danger-soft: rgba(179, 38, 47, .10);
    --sentinel-accent-warning: #f59e0b;
    --sentinel-accent-warning-soft: rgba(251, 146, 60, 0.13);
    --sentinel-accent-success: #30d158;
    --sentinel-accent-success-soft: rgba(8, 127, 91, .10);
    --sentinel-accent-info: #38bdf8;
    --sentinel-accent-info-soft: rgba(14, 165, 233, .11);
    --sentinel-severity-critical: #ff1f1f;
    --sentinel-severity-critical-soft: rgba(255, 31, 31, .14);
    --sentinel-severity-high: #ff8a00;
    --sentinel-severity-high-soft: rgba(255, 138, 0, .14);
    --sentinel-severity-medium: #ffd60a;
    --sentinel-severity-medium-soft: rgba(255, 214, 10, .14);
    --sentinel-severity-low: #30d158;
    --sentinel-severity-low-soft: rgba(48, 209, 88, .14);
    --sentinel-effect-shadow: rgba(0, 0, 0, .55);
    --sentinel-effect-shadow-soft: rgba(73, 24, 18, .06);
    --sentinel-effect-highlight: rgba(255, 255, 255, .04);
    --sentinel-effect-accent: rgba(56, 189, 248, 0.14);
    --sentinel-effect-mask: #000;
    --sentinel-data-grid: rgba(255,255,255,.12);
    --sentinel-data-axis: rgba(255,255,255,.18);
/* BEGIN semantic-approval:sentinel-b-token-roles */
    --sentinel-signals-pager-surface: var(--card-bg, var(--bg-card, #0f1b2e));
    --sentinel-signals-expanded-row-surface: rgba(15, 27, 46, .42);
    --sentinel-signals-inline-details-surface: rgba(6, 12, 22, .28);
    --sentinel-signals-detail-value-foreground: var(--text-primary, #e5edf7);
    --sentinel-filter-ghost-surface: rgba(15, 23, 42, 0.42);
    --sentinel-filter-ghost-foreground: rgba(226, 232, 240, 0.9);
    --sentinel-filter-primary-foreground: #ffffff;
    --sentinel-asset-notes-surface: var(--sentinel-surface-sunken);
    --sentinel-asset-notes-foreground: var(--sentinel-text-secondary);
/* END semantic-approval:sentinel-b-token-roles */
    --sentinel-data-series-1: #4f7cff;
    --sentinel-data-series-2: #38bdf8;
    --sentinel-data-series-3: #22d3ee;

    /* Acento compartido de Sentinel: relleno y tinta tienen trabajos distintos. */
    --es-accent: #2b6fdd;
    --es-accent-hover: #3576d6;
    --es-accent-fg: #93bbff;

    /* Command Center: estados y superficies de monitorización. */
    --cc-ok: #2fbf71;
    --cc-warn: #f2b134;
    --cc-crit: #ef4444;
    --cc-breach: #111418;
    --cc-info: #4c9aff;
    --cc-muted: rgba(255, 255, 255, 0.55);
    --cc-track: rgba(255, 255, 255, 0.10);
    --cc-banner-base: #0b0d10;
    --cc-banner-warn-text: #ffd98a;
    --cc-banner-crit-text: #ffb4b4;
    --info-radius: 16px;
    --info-gap: 1rem;
    --info-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    --info-panel-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.22);
    --esg-bg: var(--bg-primary);
    --esg-panel: color-mix(in srgb, var(--card-bg) 88%, transparent);
    --esg-panel-2: color-mix(in srgb, var(--surface-elevated) 82%, transparent);
    --esg-line: var(--border-subtle);
    --esg-text: var(--text-primary);
    --esg-muted: var(--sentinel-text-secondary);
    --esg-green: var(--risk-low);
    --esg-cyan: var(--es-accent-fg);
    --esg-yellow: var(--risk-medium);
    --esg-orange: var(--risk-high);
    --esg-red: var(--risk-critical);

    /* Sentinel Fuentes: paleta de la superficie de conectores. */
    --es-src-bg: #0f151f;
    --es-src-bg-rail: #0d131d;
    --es-src-bg-rail-foot: #0b111a;
    --es-src-bg-bar: #111925;
    --es-src-bg-card: #121b27;
    --es-src-bg-band: linear-gradient(180deg, #121a26, #0f151f);
    --es-src-bg-row-hover: #141d29;
    --es-src-bg-rail-hover: #16202e;
    --es-src-bg-rail-active: #1a2534;
    --es-src-bg-input: #111a26;
    --es-src-bg-drawer: #111925;
    --es-src-bg-neutral-btn: #1b2532;
    --es-src-bg-neutral-btn-hover: #22303f;
    --es-src-bd: #26313f;
    --es-src-bd-soft: #1e2836;
    --es-src-bd-card: #22303f;
    --es-src-bd-input: #2a3644;
    --es-src-bd-row: #18212e;
    --es-src-bd-btn: #36445a;
    --es-src-bd-box: #46566d;
    --es-src-fg: #e6ebf2;
    --es-src-fg-2: #cfd8e3;
    --es-src-fg-muted: #8a97a8;
    --es-src-fg-weak: #8b96a8;
    --es-src-fg-mono: #7d8a9c;
    --es-src-fg-inverse: #ffffff;
    --es-src-backdrop: rgba(6, 9, 14, .55);
    --es-src-ok-soft: rgba(34, 197, 94, .14);
    --es-src-ok-border: rgba(34, 197, 94, .4);
    --es-src-ok-pill-border: rgba(34, 197, 94, .35);
    --es-src-ok-pill-bg: rgba(34, 197, 94, .10);
    --es-src-warn-soft: rgba(234, 179, 8, .14);
    --es-src-warn-border: rgba(234, 179, 8, .4);
    --es-src-warn-pill-border: rgba(234, 179, 8, .38);
    --es-src-warn-pill-bg: rgba(234, 179, 8, .10);
    --es-src-err-soft: rgba(239, 68, 68, .14);
    --es-src-err-border: rgba(239, 68, 68, .4);
    --es-src-err-pill-border: rgba(239, 68, 68, .38);
    --es-src-err-pill-bg: rgba(239, 68, 68, .10);
    --es-src-silent-soft: rgba(100, 116, 139, .16);
    --es-src-silent-pill-border: rgba(100, 116, 139, .4);
    --es-src-silent-pill-bg: rgba(100, 116, 139, .12);
    --es-src-paused-pill-border: rgba(71, 85, 105, .5);
    --es-src-paused-pill-bg: rgba(71, 85, 105, .14);
    --es-src-human-soft: rgba(127, 176, 255, .14);
    --es-src-human-pill-border: rgba(127, 176, 255, .32);
    --es-src-human-pill-bg: rgba(127, 176, 255, .10);
    --es-src-ok: #22c55e;
    --es-src-ok-fg: #6ede97;
    --es-src-warn: #eab308;
    --es-src-warn-fg: #e6c35a;
    --es-src-err: #ef4444;
    --es-src-err-fg: #f08a8a;
    --es-src-silent: #64748b;
    --es-src-silent-fg: #93a2b6;
    --es-src-paused: #475569;
    --es-src-human-fg: #9dc2ff;
    --es-src-accent: var(--es-accent);
    --es-src-accent-hover: var(--es-accent-hover);
    --es-src-accent-fg: var(--es-accent-fg);
    --es-src-accent-soft: rgba(47, 124, 246, .12);
    --es-src-accent-bd: rgba(47, 124, 246, .35);
    --es-src-cat-media-bg: rgba(127, 176, 255, .14);
    --es-src-cat-media-fg: #9dc2ff;
    --es-src-cat-reg-bg: rgba(167, 139, 250, .14);
    --es-src-cat-reg-fg: #c0aeff;
    --es-src-cat-social-bg: rgba(94, 234, 212, .12);
    --es-src-cat-social-fg: #7fdccb;
    --es-src-cat-tg-bg: rgba(56, 189, 248, .13);
    --es-src-cat-tg-fg: #7cd3f7;
    --es-src-cat-cyber-bg: rgba(248, 113, 113, .13);
    --es-src-cat-cyber-fg: #f0a0a0;
    --es-src-cat-people-bg: rgba(251, 191, 36, .13);
    --es-src-cat-people-fg: #e8c46a;
    --es-src-cat-manual-bg: rgba(148, 163, 184, .14);
    --es-src-cat-manual-fg: #a9b6c7;

    /* 57 propiedades que antes solo se escribían en light_red. */
    --action-primary: #3b82f6;
    --action-primary-dark: #2563eb;
    --action-primary-soft: rgba(59, 130, 246, .12);
    --action-secondary: #4f7cff;
    --action-secondary-dark: #3b5fd1;
    --bs-border-color-translucent: rgba(160, 166, 177, .24);
    --bs-danger-bg-subtle: rgba(255, 31, 31, .14);
    --bs-danger-border-subtle: rgba(255, 31, 31, .32);
    --bs-danger-text-emphasis: #ff8a8a;
    --bs-emphasis-color: #f8fafc;
    --bs-focus-ring-color: rgba(59, 130, 246, .28);
    --bs-info: #3b82f6;
    --bs-light: #f8fafc;
    --bs-light-border-subtle: rgba(148, 163, 184, .22);
    --bs-primary: #3b82f6;
    --bs-secondary-bg-subtle: rgba(148, 163, 184, .14);
    --bs-secondary-border-subtle: rgba(148, 163, 184, .22);
    --bs-secondary-text-emphasis: #cbd5e1;
    --bs-warning: #ffd60a;
    --bs-warning-bg-subtle: rgba(255, 214, 10, .14);
    --bs-warning-border-subtle: rgba(255, 214, 10, .32);
    --bs-warning-rgb: 255, 214, 10;
    --bs-warning-text-emphasis: #ffe783;
    --cc-mono: "IBM Plex Mono", ui-monospace, monospace;
    --font-sans: "Inter", "Segoe UI", sans-serif;
    --input-focus-border: #5b8cff;
    --opn-filter-panel: #1a1d23;
    --opn-ground: #11141a;
    --opn-hairline: rgba(160, 166, 177, .22);
    --opn-hairline-soft: rgba(160, 166, 177, .14);
    --opn-ink: #ffffff;
    --opn-label: #a0a6b1;
    --opn-placeholder: #94a3b8;
    --opn-red: #ff1f1f;
    --opn-surface: #232730;
    --opn-warning: #ff8a00;
    --reading-leading: 1.55;
    --reading-measure: 68ch;
    --reading-size: 16px;
    --risk-critical-line: rgba(255, 31, 31, .32);
    --risk-critical-soft: rgba(255, 31, 31, .14);
    --risk-high-ink: #ffb15c;
    --risk-high-line: rgba(255, 138, 0, .32);
    --risk-high-soft: rgba(255, 138, 0, .14);
    --risk-low-ink: #7ee89a;
    --risk-low-line: rgba(48, 209, 88, .32);
    --risk-low-soft: rgba(48, 209, 88, .14);
    --risk-medium-ink: #ffe783;
    --risk-medium-line: rgba(255, 214, 10, .32);
    --risk-medium-soft: rgba(255, 214, 10, .14);
    --ux-accent: #3b82f6;
    --ux-accent-2: #4f7cff;
    /* Acciones compactas de tablas: misma geometría, paleta del tema. */
    --ux-table-action-fg: color-mix(in srgb, var(--ux-accent) 72%, #ffffff);
    --ux-table-action-border: rgba(124, 139, 173, 0.28);
    --ux-table-action-bg: radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--ux-accent) 18%, transparent), transparent 1.8rem), rgba(18, 24, 36, 0.72);
    --ux-table-action-hover-fg: #ffffff;
    --ux-table-action-hover-border: color-mix(in srgb, var(--ux-accent) 48%, transparent);
    --ux-table-action-hover-bg: radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--ux-accent) 24%, transparent), transparent 1.8rem), rgba(30, 39, 58, 0.92);
    --ux-table-action-menu-border: rgba(124, 139, 173, 0.24);
    --ux-table-action-menu-bg: radial-gradient(circle at 16% 0%, rgba(79, 124, 255, 0.14), transparent 10rem), linear-gradient(180deg, rgba(25, 31, 45, 0.98), rgba(14, 19, 31, 0.98));
    --ux-table-action-menu-divider: rgba(124, 139, 173, 0.18);
    --ux-table-action-menu-fg: rgba(241, 245, 249, 0.9);
    --ux-table-action-menu-icon: color-mix(in srgb, var(--ux-accent) 76%, #ffffff);
    --ux-table-action-menu-hover-fg: #ffffff;
    --ux-table-action-menu-hover-bg: rgba(79, 124, 255, 0.14);
    --ux-table-action-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --ux-table-action-menu-shadow: 0 22px 52px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --ux-table-action-info-fg: #7dd3fc;
    --ux-table-action-info-border: rgba(56, 189, 248, 0.34);
    --ux-table-action-primary-fg: #86a7ff;
    --ux-table-action-primary-border: rgba(79, 124, 255, 0.42);
    --ux-table-action-warning-fg: #facc15;
    --ux-table-action-warning-border: rgba(245, 158, 11, 0.38);
    --ux-table-action-success-fg: #67e8f9;
    --ux-table-action-success-border: rgba(56, 189, 248, 0.3);
    --ux-table-action-danger-fg: #fb7185;
    --ux-table-action-danger-border: rgba(244, 63, 94, 0.38);
/* BEGIN O4-A-AUTOMATIC-ROLES */
    --action-info-foreground: var(--text-action-outline-readable);
    --border-action-outline-hover: rgba(160, 166, 177, .46);
    --border-input-hover: var(--accent-blue);
    --border-table-header: var(--border-subtle);
    --surface-action-info: transparent;
    --surface-action-outline: transparent;
    --surface-action-outline-hover: rgba(47, 52, 64, .88);
    --surface-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --text-action-outline: var(--text-primary);
    --text-input-placeholder: var(--text-muted);
/* END O4-A-AUTOMATIC-ROLES */

    /* O4-C1: roles transversales para controles, feedback y gravedad. */
    --shadow-modal-content: 0 20px 50px rgba(0, 0, 0, 0.3);
    --surface-action-ripple: rgba(255, 255, 255, 0.3);
    --surface-action-primary: var(--action-primary-bg);
    --surface-action-primary-hover: var(--action-primary-bg-hover);
    --shadow-action-primary: 0 4px 15px rgba(59, 130, 246, 0.3);
    --shadow-action-primary-hover: 0 6px 20px rgba(59, 130, 246, 0.4);
    --border-action-primary: var(--accent-blue);
    --border-action-outline: var(--border-strong);
    --text-action-outline-hover: var(--text-action-outline);
    --border-action-info: var(--accent-blue);
    --surface-action-info-hover: var(--accent-blue);
    --action-warning: var(--warning-color);
    --surface-action-warning: transparent;
    --surface-input: linear-gradient(135deg, var(--bg-secondary), var(--surface-elevated));
    --border-input: var(--border-subtle);
    --text-input: var(--text-primary);
    --shadow-input: none;
    --surface-input-focus: var(--surface-elevated);
    --border-input-focus: var(--accent-blue);
    --shadow-input-focus: 0 0 0 4px color(srgb 1 0.121569 0.121569 / 0.2);
    --shadow-select-focus: 0 0 0 4px color(srgb 1 0.121569 0.121569 / 0.2);
    --surface-select-focus: var(--input-focus-bg);
    --surface-input-select-image: linear-gradient(45deg, transparent 40%, var(--accent-blue) 51%), linear-gradient(-45deg, transparent 40%, var(--accent-blue) 51%);
    --surface-input-select-focus-image: var(--surface-input-select-image);
    --shadow-input-hover: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --border-input-select-width: 1px;
    --border-input-select: var(--border-subtle);
    --border-select-hover: var(--border-input-hover);
    --input-select-position: calc(100% - 1rem) center;
    --input-select-focus-position: var(--input-select-position);
    --input-select-size: 8px 8px;
    --input-select-repeat: no-repeat;
    --input-placeholder-opacity: 0.7;
    --surface-toast: transparent;
    --text-toast: inherit;
    --border-toast: none;
    --surface-toast-danger: transparent;
    --border-toast-danger: currentColor;
    --surface-toast-success: transparent;
    --border-toast-success: currentColor;
    --surface-toast-warning: transparent;
    --border-toast-warning: currentColor;
    --surface-toast-info: transparent;
    --border-toast-info: currentColor;
    --border-badge: rgba(255, 255, 255, 0.2);
    --shadow-badge-hover: 0 4px 12px rgba(0, 0, 0, 0.2);
    --gravity-critical-surface: linear-gradient(135deg, rgba(255, 31, 31, 0.2), rgba(255, 31, 31, 0.1));
    --gravity-critical-foreground: #ff1f1f;
    --gravity-critical-border: rgba(255, 31, 31, 0.3);
    --gravity-critical-shadow: inset 0 0 10px rgba(255, 31, 31, 0.1);
    --gravity-high-surface: linear-gradient(135deg, rgba(255, 154, 0, 0.2), rgba(255, 154, 0, 0.1));
    --gravity-high-foreground: #ff9a00;
    --gravity-high-border: rgba(255, 154, 0, 0.3);
    --gravity-high-shadow: inset 0 0 10px rgba(255, 154, 0, 0.1);
    --gravity-medium-surface: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    --gravity-medium-foreground: #ffc107;
    --gravity-medium-border: rgba(255, 193, 7, 0.3);
    --gravity-medium-shadow: inset 0 0 10px rgba(255, 193, 7, 0.1);
    --gravity-low-surface: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    --gravity-low-foreground: #4caf50;
    --gravity-low-border: rgba(76, 175, 80, 0.3);
    --gravity-low-shadow: inset 0 0 10px rgba(76, 175, 80, 0.1);
    --state-closed-surface: linear-gradient(135deg, rgba(158, 158, 158, 0.2), rgba(158, 158, 158, 0.1));
    --state-closed-foreground: #9e9e9e;
    --state-closed-border: rgba(158, 158, 158, 0.3);
    --shadow-badge-pulse-start: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 15px rgba(59, 130, 246, 0.3);
    --shadow-badge-pulse-end: inset 0 0 15px rgba(0, 0, 0, 0.15), 0 0 25px rgba(59, 130, 246, 0.5);
    --surface-action-secondary-soft: color-mix(in srgb, var(--action-secondary, var(--accent-blue)) 8%, var(--card-bg));
    --border-action-secondary-soft: color-mix(in srgb, var(--action-secondary, var(--accent-blue)) 42%, var(--border-subtle));
    --surface-action-danger-soft: color-mix(in srgb, var(--danger-color) 5%, var(--card-bg));
    --border-action-danger-soft: color-mix(in srgb, var(--danger-color) 38%, var(--border-subtle));
    --surface-action-danger: transparent;

    --warning: #ff8a00;

    /* O4-C2: primitivas compartidas preservadas desde la cascada efectiva. */
    --surface-card: linear-gradient(180deg, rgba(41, 46, 56, 0.98) 0%, rgba(35, 39, 48, 0.98) 100%);
    --border-card: #ffffff;
    --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.18);
    --border-card-hover: #ffffff;
    --shadow-card-hover: 0 18px 42px rgba(0, 0, 0, 0.22);
    --surface-modal-primitive: linear-gradient(180deg, rgba(41, 46, 56, 0.98) 0%, rgba(35, 39, 48, 0.98) 100%);
    --border-modal-primitive: #ffffff;
    --shadow-modal-primitive: none;
    --surface-table-header: rgba(26, 29, 35, 0.9);
    --text-table-header: var(--text-secondary);
    --border-table-cell: rgba(160, 166, 177, 0.14);
    --surface-table-row-hover: transparent;
    --surface-table-sticky-header: linear-gradient(180deg, rgba(31, 37, 50, 0.98), rgba(20, 24, 34, 0.98));
    --shadow-table-sticky-header: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 var(--border-subtle, rgba(160, 166, 177, 0.22)), 0 10px 22px rgba(0, 0, 0, 0.22);
    --border-table-sticky-header: var(--border-subtle);
    --text-table-sticky-header: color-mix(in srgb, var(--text-secondary, #a0a6b1) 86%, #ffffff);
    --text-state-critical-strong: color-mix(in srgb, var(--risk-critical) 50%, var(--text-primary));
    --surface-table-operational-header: radial-gradient(circle at 8% 0%, rgba(79, 124, 255, 0.12), transparent 10rem), linear-gradient(180deg, rgba(24, 29, 42, 0.99), rgba(17, 21, 31, 0.99));
    --border-table-operational-header: rgba(124, 139, 173, 0.26);

    /* O4-C9B: composiciones reutilizables de evidencia, preservadas por tema. */
    --surface-evidence-card: radial-gradient(circle at 12% 0%, rgba(79, 124, 255, 0.12), transparent 9rem), linear-gradient(180deg, rgba(25, 31, 45, 0.94), rgba(15, 20, 32, 0.94));
    --border-evidence-card: rgba(124, 139, 173, 0.2);
    --shadow-evidence-card: 0 16px 36px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --surface-evidence-marker: rgba(79, 124, 255, 0.12);
    --border-evidence-marker: rgba(79, 124, 255, 0.35);
    --text-evidence-marker: color-mix(in srgb, var(--ux-accent, #4f7cff) 72%, white);
    --text-evidence-accent: color-mix(in srgb, var(--ux-accent, #4f7cff) 78%, white);
    --surface-evidence-modal: radial-gradient(circle at 12% 0%, rgba(79, 124, 255, 0.12), transparent 18rem), linear-gradient(180deg, rgba(23, 29, 43, 0.99), rgba(13, 18, 30, 0.99));
    --border-evidence-modal: rgba(124, 139, 173, 0.24);
    --text-evidence-modal: var(--text-primary);
    --shadow-evidence-modal: 0 28px 76px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --surface-evidence-modal-bar: rgba(12, 17, 28, 0.28);
    --surface-action-primary-default: var(--action-primary-bg);
    --border-action-primary-default: #ffffff;
    --shadow-action-primary-default: 0 4px 15px rgba(59, 130, 246, 0.3);
    --shadow-action-primary-hover: 0 6px 20px rgba(59, 130, 246, 0.4);

    /* Foco de controles compactos: conserva la composición original de los
       campos de las bibliotecas sin convertirla en una rama de componente. */
    --surface-input-inline-focus: color(srgb 0.0588235 0.0666667 0.0823529 / 0.92);
    --border-input-inline-focus: color(srgb 0.627451 0.65098 0.694118 / 0.166902);
    --shadow-input-inline-focus: 0 0 0 0 rgba(0, 0, 0, 0);

    /* O4-C3: acciones y superficies compartidas preservadas de ux-polish.css. */
    --surface-action-utility: linear-gradient(135deg, var(--accent-blue), #5a7dd8);
    --surface-action-utility-hover: #2563eb;
    --border-action-utility: var(--accent-blue);
    --border-action-utility-hover: #2563eb;
    --text-action-utility: #ffffff;
    --text-action-utility-hover: #ffffff;
    --shadow-action-utility: 0 4px 15px rgba(59, 130, 246, 0.3);
    --shadow-action-utility-hover: 0 6px 20px rgba(59, 130, 246, 0.4);
    --surface-action-info-fallback: #efefef;
    --surface-action-info-fallback-hover: #efefef;
    --border-action-info-fallback: #000000;
    --border-action-info-fallback-hover: #000000;
    --text-action-contrast: #000000;
    --text-action-outline-danger: #ff9aa8;
    --text-on-action: #ffffff;
    --surface-action-success-default: #efefef;
    --surface-action-success-hover: #efefef;
    --border-action-success-default: #000000;
    --border-action-success-hover: #000000;
    --surface-action-warning-default: #efefef;
    --surface-action-warning-hover: #efefef;
    --border-action-warning-default: #000000;
    --border-action-warning-hover: #000000;
    --surface-action-outline-info: transparent;
    --surface-action-outline-info-hover: rgba(59, 130, 246, 0.22);
    --border-action-outline-info: var(--accent-blue);
    --text-action-outline-info: var(--text-action-outline-readable);
    --surface-card-header: linear-gradient(180deg, color-mix(in srgb, var(--ux-accent) 5%, transparent), transparent);
    --border-card-header: var(--border-subtle);
    --surface-action-quiet: #efefef;
    --surface-action-quiet-hover: #efefef;
    --action-quiet: #000000;
    --action-quiet-hover: #000000;

    /* O4-C5: roles comunes para overlays, carga y compatibilidad operativa. */
    --surface-feedback-panel: rgba(16, 20, 27, .78);
    --surface-popover-panel: rgba(22, 26, 34, .9);
    --surface-utility-panel: transparent;
    --surface-popover-hover: rgba(59, 130, 246, .12);
    --surface-scrollbar-thumb-hover: rgba(255, 255, 255, .16);
    --surface-loading-bar: linear-gradient(90deg, rgba(71, 85, 105, .28), rgba(148, 163, 184, .48), rgba(71, 85, 105, .28));
    --surface-loading-line: linear-gradient(90deg, rgba(71, 85, 105, .3), rgba(148, 163, 184, .46), rgba(71, 85, 105, .3));
    --accent-operational: var(--risk-critical);
    --action-operational-bg: #2b6fdd;
    --action-operational-bg-hover: #3576d6;
    --action-operational-info-bg: #2b6fdd;
    --action-operational-info-bg-hover: #3576d6;
    --border-operational: #2b6fdd;
    --text-operational-on: #ffffff;
    --text-operational-outline: #3b82f6;
    --border-operational-outline: #3b82f6;
    --surface-operational-outline-hover: rgba(59, 130, 246, .22);
    --surface-operational-subtle: color-mix(in srgb, var(--risk-critical) 16%, transparent);
    --border-operational-subtle: color-mix(in srgb, var(--risk-critical) 34%, transparent);
    --surface-operational-info-subtle: color-mix(in srgb, var(--action-operational-info-bg) 16%, transparent);
    --border-operational-info-subtle: color-mix(in srgb, var(--action-operational-info-bg) 34%, transparent);
    --text-operational-info: color-mix(in srgb, var(--action-operational-bg) 50%, var(--text-primary));
    --text-operational-success: var(--risk-low);
    --surface-operational-success-subtle: color-mix(in srgb, var(--risk-low) 16%, transparent);
    --border-operational-success-subtle: color-mix(in srgb, var(--risk-low) 34%, transparent);
    --text-operational-link: color-mix(in srgb, var(--risk-critical) 50%, var(--text-primary));
    --bs-operational-primary-rgb: 43, 111, 221;
    --bs-operational-info-rgb: 43, 111, 221;
    --bs-operational-link-rgb: 255, 143, 143;

    /* O4-C6: primitivas compartidas de tablas, estados y modal administrativo.
       Los valores se extraen de la cascada efectiva; no son tokens de pantalla. */
    --surface-table-dark: #212529;
    --border-table-dark: currentColor;
    --surface-table-dark-header: var(--surface-table-header);
    --surface-utility-contrast: rgba(0, 0, 0, .25);
    --border-utility-contrast: currentColor;
    --surface-badge-neutral: #e2e3e5;
    --border-badge-neutral: rgba(255, 255, 255, .2);
    --text-badge-neutral: #1a1714;
    --surface-badge-status-info: rgba(59, 130, 246, .18);
    --text-badge-status-info: #93c5fd;
    --surface-badge-status-warning: rgba(255, 214, 10, .17);
    --text-badge-status-warning: var(--risk-medium);
    --surface-badge-status-neutral: rgba(107, 114, 128, .33);
    --text-badge-status-neutral: #d1d5db;
    --surface-badge-status-info-strong: rgba(59, 130, 246, .22);
    --text-badge-status-info-strong: #bfdbfe;
    --surface-badge-status-critical: rgba(255, 31, 31, .17);
    --text-badge-status-critical: var(--risk-critical);
    --surface-badge-severity-low: var(--gravity-low-surface);
    --text-badge-severity-low: #ffffff;
    --border-badge-severity-low: var(--gravity-low-border);
    --shadow-badge-severity-low: var(--gravity-low-shadow);
    --surface-badge-severity-medium: var(--gravity-medium-surface);
    --text-badge-severity-medium: #ffffff;
    --border-badge-severity-medium: var(--gravity-medium-border);
    --shadow-badge-severity-medium: var(--gravity-medium-shadow);
    --surface-badge-severity-high: var(--gravity-high-surface);
    --text-badge-severity-high: #ffffff;
    --border-badge-severity-high: var(--gravity-high-border);
    --shadow-badge-severity-high: var(--gravity-high-shadow);
    --surface-badge-severity-critical: var(--gravity-critical-surface);
    --text-badge-severity-critical: var(--gravity-critical-foreground);
    --border-badge-severity-critical: var(--gravity-critical-border);
    --shadow-badge-severity-critical: var(--gravity-critical-shadow);
    --surface-badge-status-closed: var(--state-closed-surface);
    --text-badge-status-closed: var(--state-closed-foreground);
    --weight-badge-neutral: 600;
    --tracking-badge-neutral: .3px;
    --text-modal-content: #f8f9fa;
    --text-modal-root: #ffffff;
    --text-modal-muted: var(--text-secondary);
    --text-form-placeholder: #6b7280;
    --surface-form-color: transparent;
    --border-form-strong: var(--border-subtle);
    --surface-form-check: #ffffff;
    --border-form-check: rgba(0, 0, 0, .25);
    --surface-form-check-checked: #0d6efd;

    /* O4-C7: valores computados de las familias restantes de theme.css. */
    --surface-body-background: radial-gradient(ellipse at 10% -10%, rgba(59, 130, 246, 0.15) 0%, transparent 40%), radial-gradient(ellipse at 95% 0%, rgba(124, 58, 237, 0.11) 0%, transparent 35%), linear-gradient(180deg, #11141A 0%, var(--bg-primary) 45%, #0D0F13 100%);
    --surface-floating-panel: linear-gradient(180deg, rgba(41, 46, 56, 0.99) 0%, rgba(26, 29, 35, 0.99) 100%);
    --shadow-floating-panel: var(--shadow-lg);
    --surface-filter-panel: radial-gradient(circle at 8% 0%, rgba(236, 48, 92, 0.12), transparent 34%), linear-gradient(145deg, rgba(35, 39, 48, 0.96), rgba(24, 27, 35, 0.94));
    --border-filter-panel: rgba(236, 48, 92, 0.28);
    --surface-filter-meta: rgba(8, 10, 16, 0.26);
    --surface-filter-actions: rgba(8, 10, 16, 0.22);
    --border-filter-meta: rgba(160, 166, 177, 0.18);
    --border-filter-actions: rgba(160, 166, 177, 0.14);
    --surface-filter-control: rgba(12, 14, 22, 0.68);
    --border-filter-control: rgba(236, 48, 92, 0.24);
    --surface-shared-card: var(--surface-card);
    --shadow-shared-card: var(--shadow-card);
    --surface-shared-modal: var(--surface-modal-primitive);
    --shadow-shared-modal: var(--shadow-modal-primitive);
    --surface-indicator-critical: rgba(255, 31, 31, 0.16);
    --text-indicator-critical: var(--risk-critical);
    --surface-indicator-high: rgba(255, 138, 0, 0.16);
    --text-indicator-high: var(--risk-high);
    --border-indicator-neutral: currentColor;
    --surface-feedback-toast: rgba(26, 29, 35, 0.94);
    --text-feedback-toast: var(--text-primary);
    --border-feedback-toast: var(--border-strong);
    --shadow-feedback-toast: var(--shadow-lg);
    --border-feedback-success: rgba(48, 209, 88, 0.55);
    --shadow-feedback-success: var(--shadow-lg);
    --border-feedback-warning: rgba(255, 214, 10, 0.55);
    --shadow-feedback-warning: var(--shadow-lg);
    --border-feedback-danger: rgba(255, 31, 31, 0.55);
    --shadow-feedback-danger: var(--shadow-lg);
    --border-feedback-info: rgba(59, 130, 246, 0.55);
    --shadow-feedback-info: var(--shadow-lg);
    --surface-modal-form: var(--surface-modal-primitive);
    --border-modal-form: var(--border-modal-primitive);
    --shadow-modal-form: var(--shadow-modal-primitive);
}

/* O4-C9C: roles transversales para superficies ejecutivas y de operación. */
html[data-theme="dark"] {
    --accent-priority: #ff4d5a;
    --accent-context: #4f7cff;
    --accent-evidence: #8b5cf6;
    --accent-action: #f59e0b;
    --accent-critical: #ff4d5a;
    --accent-warning: #f59e0b;
    --surface-hero: radial-gradient(circle at 8% 0%, rgba(79, 124, 255, .16), transparent 22rem), radial-gradient(circle at 92% 8%, rgba(255, 77, 90, .12), transparent 24rem), linear-gradient(135deg, rgba(20, 26, 39, .96), rgba(10, 13, 22, .94));
    --border-hero: rgba(124, 139, 173, .2);
    --border-hero-decoration: rgba(79, 124, 255, .14);
    --shadow-hero: 0 24px 64px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .05);
    --text-hero-secondary: color-mix(in srgb, var(--text-secondary) 88%, #ffffff);
    --text-role-pill: #f8fafc;
    --surface-role-pill: rgba(15, 23, 42, .72);
    --border-role-pill: rgba(148, 163, 184, .36);
    --shadow-role-pill: inset 0 1px 0 rgba(255, 255, 255, .08);
    --surface-command: radial-gradient(circle at 14% 0%, rgba(79, 124, 255, .12), transparent 16rem), rgba(9, 13, 23, .6);
    --border-command: rgba(124, 139, 173, .22);
    --shadow-command: inset 0 1px 0 rgba(255, 255, 255, .05);
    --text-control-label: color-mix(in srgb, var(--accent-context) 72%, #ffffff);
    --surface-control-operational: rgba(15, 23, 42, .58);
    --border-control-operational: rgba(124, 139, 173, .28);
    --text-control: var(--text-primary);
    --shadow-control: inset 0 1px 0 rgba(255, 255, 255, .04);
    --border-control-focus: color-mix(in srgb, var(--accent-context) 58%, transparent);
    --shadow-control-focus: 0 0 0 .2rem color-mix(in srgb, var(--accent-context) 18%, transparent);
    --surface-action-emphasis: linear-gradient(135deg, color-mix(in srgb, var(--accent-critical) 86%, var(--accent-warning)), color-mix(in srgb, var(--accent-warning) 72%, #7f151f));
    --border-action-emphasis: color-mix(in srgb, var(--accent-critical) 62%, transparent);
    --text-on-action: #ffffff;
    --text-accent-emphasis: color-mix(in srgb, var(--accent-contextual) 76%, #2d1715);
    /* Lecturas AA para acciones y estados de las superficies ejecutivas. */
    --text-action-primary-readable: #07111f;
    --text-action-outline-readable: #b8e1ff;
    --text-info-readable: #e5f1ff;
    --text-empty-readable: var(--text-primary);
    --text-status-danger-rgb: 254, 202, 202;
    --text-badge-status-info-rgb: 147, 197, 253;
    --shadow-action-emphasis: 0 12px 24px color-mix(in srgb, var(--accent-critical) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
    --shadow-action-emphasis-hover: 0 16px 30px color-mix(in srgb, var(--accent-critical) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26);
    --border-info-banner: color-mix(in srgb, var(--accent-context) 28%, transparent);
    --text-info-banner: color-mix(in srgb, var(--accent-context) 74%, white);
    --surface-info-banner: radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--accent-context) 18%, transparent), transparent 16rem), linear-gradient(180deg, rgba(19, 27, 43, .94), rgba(13, 18, 30, .92));
    --shadow-info-banner: 0 14px 32px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .045);
    --border-feature-shell: var(--border-subtle);
    --surface-feature-shell: linear-gradient(180deg, rgba(25, 30, 42, .96), rgba(18, 23, 35, .94));
    --shadow-feature-shell: 0 22px 54px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
    --surface-feature-shell-highlight: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-context) 18%, transparent), transparent 34%), radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent-critical) 14%, transparent), transparent 30%);
    --border-feature: var(--border-subtle);
    --surface-feature: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-contextual) 16%, transparent), transparent 14rem), linear-gradient(180deg, rgba(24, 31, 46, .97), rgba(14, 19, 31, .96));
    --shadow-feature: 0 16px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-feature-control: inset 0 1px 0 rgba(255, 255, 255, .06);
    --surface-feature-sheen: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 36%);
    --border-queue: rgba(124, 139, 173, .22);
    --surface-queue: radial-gradient(circle at 9% 0%, rgba(79, 124, 255, .08), transparent 16rem), linear-gradient(180deg, rgba(32, 38, 52, .97), rgba(20, 25, 37, .95));
    --shadow-queue: 0 16px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045);
    --surface-queue-header: linear-gradient(90deg, rgba(79, 124, 255, .11), rgba(255, 77, 90, .035), transparent 72%);
    --border-queue-header: rgba(124, 139, 173, .18);
    --shadow-list-accent: 0 0 12px rgba(79, 124, 255, .22);
    --border-badge-fact: rgba(124, 139, 173, .13);
    --surface-badge-fact: rgba(255, 255, 255, .06);
    --text-badge-fact: var(--text-secondary);
    --border-badge-warning: rgba(245, 158, 11, .2);
    --surface-badge-warning: color-mix(in srgb, var(--accent-warning) 14%, transparent);
    --text-badge-warning: var(--text-on-action);
    --text-status-complete: color-mix(in srgb, var(--accent-warning) 82%, white);
    --surface-status-complete: linear-gradient(90deg, color-mix(in srgb, var(--accent-warning) 8%, transparent), transparent 72%);
    --border-widget: rgba(124, 139, 173, .16);
    --border-badge-neutral: rgba(79, 124, 255, .28);
    --surface-badge-neutral: rgba(79, 124, 255, .14);
    --text-badge-neutral: color-mix(in srgb, var(--accent-context) 68%, white);
    --border-story: rgba(124, 139, 173, .2);
    --surface-story: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-contextual) 15%, transparent), transparent 13rem), linear-gradient(180deg, rgba(23, 30, 44, .98), rgba(13, 18, 30, .96));
    --shadow-story: 0 14px 30px rgba(0, 0, 0, .21), inset 0 1px 0 rgba(255, 255, 255, .05);
    --text-story: var(--text-primary);
    --border-empty: color-mix(in srgb, var(--accent-warning) 26%, transparent);
    --text-empty: color-mix(in srgb, var(--accent-warning) 78%, white);
    --surface-empty: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent-warning) 13%, transparent), transparent 12rem), linear-gradient(180deg, rgba(24, 31, 46, .95), rgba(15, 20, 32, .93));
    --shadow-empty: inset 0 1px 0 rgba(255, 255, 255, .045);
    --border-summary: rgba(124, 139, 173, .2);
    --surface-summary: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-contextual) 17%, transparent), transparent 13rem), linear-gradient(135deg, rgba(18, 25, 39, .95), rgba(11, 15, 24, .86));
    --shadow-summary: inset 0 1px 0 rgba(255, 255, 255, .045);
    --border-metric: rgba(124, 139, 173, .16);
    --surface-metric: rgba(255, 255, 255, .035);
    --border-flow: rgba(124, 139, 173, .18);
    --surface-flow: rgba(255, 255, 255, .035);
    --surface-focus-item: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-contextual) 13%, transparent), transparent 9rem), rgba(255, 255, 255, .032);
    --surface-governance: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-contextual) 12%, transparent), transparent 9rem), rgba(255, 255, 255, .032);
    --border-footnote: rgba(124, 139, 173, .13);

    /* Compatibilidad declarada también en el catálogo oscuro. Estos nombres
       heredados ya los consumen hojas comunes; mantenerlos en ambos bloques
       evita que el tema claro sea el único que los declare. */
    --accent-blue: #3B82F6;
    --accent-color: var(--risk-critical);
    --accent-violet: #7C3AED;
    --bg-card: var(--card-bg);
    --bg-card-hover: var(--surface-elevated);
    --bg-dark: var(--bg-primary);
    --bg-primary: var(--surface-canvas);
    --bg-secondary: var(--surface-1);
    --bg-surface: var(--bg-secondary);
    --border-color: var(--border-subtle);
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border-subtle);
    --bs-danger: var(--risk-critical);
    --bs-danger-rgb: 255, 31, 31;
    --bs-info-bg-subtle: rgba(59, 130, 246, 0.12);
    --bs-info-border-subtle: rgba(59, 130, 246, 0.28);
    --bs-info-rgb: 59, 130, 246;
    --bs-info-text-emphasis: #bcd6ff;
    --bs-link-color: #3B82F6;
    --bs-link-color-rgb: 59, 130, 246;
    --bs-link-hover-color: #6ba4ff;
    --bs-primary-rgb: 59, 130, 246;
    --bs-secondary-color: var(--text-secondary);
    --bs-success: var(--risk-low);
    --bs-success-bg-subtle: rgba(48, 209, 88, 0.14);
    --bs-success-border-subtle: rgba(48, 209, 88, 0.32);
    --bs-success-rgb: 48, 209, 88;
    --bs-success-text-emphasis: var(--risk-low);
    --card-bg: var(--surface-2);
    --danger-color: var(--risk-critical);
    --heading-color: var(--text-primary);
    --input-bg: var(--bg-secondary);
    --input-focus-bg: rgba(47, 52, 64, 0.95);
    --modal-close-filter: invert(1) grayscale(100%) brightness(1.85);
    --modal-close-filter-hover: invert(1) grayscale(100%) brightness(2.15);
    --overlay-soft: rgba(160, 166, 177, 0.08);
    --overlay-strong: rgba(160, 166, 177, 0.16);
    --primary-color: var(--accent-blue);
    --primary-light: #60A5FA;
    --risk-critical: #FF1F1F;
    --risk-high: #FF8A00;
    --risk-low: #30D158;
    --risk-medium: #FFD60A;
    --secondary-color: var(--accent-blue);
    --sidebar-gradient-end: #171B23;
    --sidebar-gradient-start: #13161D;
    --sidebar-link-active-color: var(--text-primary);
    --sidebar-link-hover-bg: rgba(59, 130, 246, 0.13);
    --strong-color: var(--text-primary);
    --success-color: var(--risk-low);
    --surface-elevated: var(--surface-3);
    --warning-color: var(--risk-medium);

    /* Roles transversales para estados y superficies de las pantallas no
       Sentinel. Sus pares mantienen la apariencia existente al retirar
       ramas de tema de las hojas de componente. */
    --shadow-surface-soft: 0 10px 24px rgba(0, 0, 0, .08);
    --surface-selection-row: color-mix(in srgb, var(--accent-blue) 10%, transparent);
    --border-selection-indicator: var(--accent-blue);
    --severity-critical-ink: #ffffff;
    --severity-critical-surface: var(--risk-critical);
    --severity-critical-border: transparent;
    --severity-high-ink: #ffffff;
    --severity-high-surface: var(--risk-high);
    --severity-high-border: transparent;
    --severity-medium-ink: color-mix(in srgb, var(--risk-medium) 30%, #1f1600);
    --severity-medium-surface: color-mix(in srgb, var(--risk-medium) 30%, transparent);
    --severity-medium-border: transparent;
    --severity-low-ink: color-mix(in srgb, var(--risk-low) 70%, var(--text-primary));
    --severity-low-surface: color-mix(in srgb, var(--risk-low) 16%, transparent);
    --severity-low-border: transparent;
    --surface-notice: color-mix(in srgb, var(--accent-blue) 8%, transparent);
    --surface-selection-active: color-mix(in srgb, var(--accent-blue) 16%, transparent);
    --surface-result: var(--bg-secondary);
    --surface-summary-feature: linear-gradient(135deg, rgba(9, 38, 32, .72), rgba(15, 23, 42, .78));
    --border-summary-feature: rgba(34, 197, 94, .24);
    --shadow-summary-feature: 0 12px 28px rgba(0, 0, 0, .22);
    --surface-summary-metric: rgba(15, 23, 42, .46);
    --border-summary-metric: rgba(148, 163, 184, .22);
    --surface-disclosure-panel: var(--card-bg);
    --surface-neutral-pill: transparent;

    /* Visualización de grafos: el lienzo y Cytoscape leen el catálogo. */
    --viz-accent: #4f7cff;
    --viz-accent-secondary: #38bdf8;
    --viz-danger: #ff4d5a;
    --viz-warm: #f59e0b;
    --viz-panel: rgba(22, 29, 43, 0.90);
    --viz-panel-soft: rgba(29, 39, 58, 0.74);
    --viz-line: rgba(126, 150, 190, 0.28);
    --viz-canvas-1: rgba(10, 16, 27, 0.98);
    --viz-canvas-2: rgba(19, 24, 39, 0.96);
    --viz-glow: rgba(79, 124, 255, 0.18);
    --viz-text-muted: rgba(203, 213, 225, 0.76);
    --shadow-viz-card: 0 22px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-viz-toolbar: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --shadow-viz-canvas: 0 22px 54px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.075);
    --shadow-viz-legend: 0 10px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-viz-empty: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --surface-viz-empty: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--viz-accent-secondary) 10%, transparent), transparent 12rem), linear-gradient(180deg, color-mix(in srgb, var(--viz-panel-soft) 78%, transparent), color-mix(in srgb, var(--viz-panel) 82%, transparent));
    --viz-department-fill: rgba(24, 34, 52, 0.74);
    --viz-department-border: rgba(126, 150, 190, 0.46);
    --viz-department-label: rgba(238, 244, 255, 0.94);
    --viz-node-border: rgba(255, 255, 255, 0.68);
    --viz-node-text: #F8FAFC;
    --viz-node-text-bg: rgba(8, 12, 20, 0.88);
    --viz-node-outline: rgba(6, 10, 18, 0.96);
    --viz-edge-real: rgba(96, 165, 250, 0.78);
    --viz-edge-reference: rgba(125, 211, 252, 0.50);
    --viz-selected: #F8FAFC;
    --viz-highlight: #38BDF8;
    --viz-dim-opacity: 0.13;
    --viz-fallback-bg: rgba(12, 18, 29, 0.48);
    --viz-fallback-text: #EAF1FF;
    --viz-severity-critical: #FF4D5A;
    --viz-severity-high: #F59E0B;
    --viz-severity-medium: #D6A533;
    --viz-severity-low: #4F7CFF;
    --viz-tech-account: #4F7CFF;
    --viz-tech-device: #38BDF8;
    --viz-tech-application: #F59E0B;
    --viz-tech-external-alert: #FF4D5A;
    --viz-tech-external-neutral: #94A3B8;
    --viz-edge-account: rgba(79, 124, 255, 0.72);
    --viz-edge-device: rgba(56, 189, 248, 0.66);
    --viz-edge-application: rgba(245, 158, 11, 0.68);
    --viz-edge-external-alert: rgba(255, 77, 90, 0.78);
    --viz-edge-external-neutral: rgba(148, 163, 184, 0.58);
    --viz-relation-manager: #60A5FA;
    --viz-relation-peer: #4F7CFF;
    --viz-relation-mentor: #F59E0B;
    --viz-relation-collaboration: #38BDF8;
    --viz-relation-project: #22D3EE;
    --viz-relation-reporting: #7AA2FF;
    --viz-relation-internal: #94A3B8;
    --viz-community-1: #4F7CFF;
    --viz-community-2: #38BDF8;
    --viz-community-3: #FF4D5A;
    --viz-community-4: #F59E0B;
    --viz-community-5: #94A3B8;
    --viz-community-6: #22D3EE;
    --viz-community-7: #7AA2FF;
}

html[data-theme="light_red"] {
    --accent-primary: #a61f2b;
    --accent-priority: #a61f2b;
    --accent-context: #8f1721;
    --accent-evidence: #b98234;
    --accent-action: #7c3f58;
    --accent-critical: #7f151f;
    --accent-warning: #b98234;
    --surface-hero: radial-gradient(circle at 8% 0%, rgba(166, 31, 43, .09), transparent 22rem), radial-gradient(circle at 92% 8%, rgba(185, 130, 52, .11), transparent 24rem), linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(255, 247, 244, .93));
    --border-hero: rgba(166, 31, 43, .13);
    --border-hero-decoration: rgba(166, 31, 43, .1);
    --shadow-hero: 0 24px 62px rgba(73, 24, 18, .08), inset 0 1px 0 rgba(255, 255, 255, .94);
    --text-hero-secondary: #6e5c55;
    --text-role-pill: #4a2c28;
    --surface-role-pill: rgba(255, 255, 255, .78);
    --border-role-pill: rgba(166, 31, 43, .22);
    --surface-command: radial-gradient(circle at 14% 0%, rgba(166, 31, 43, .06), transparent 16rem), rgba(255, 250, 248, .78);
    --border-command: rgba(166, 31, 43, .12);
    --text-control-label: #8f1721;
    --surface-control-operational: rgba(255, 255, 255, .88);
    --border-control-operational: rgba(166, 31, 43, .2);
    --text-control: #241916;
    --border-control-focus: color-mix(in srgb, var(--accent-context) 58%, transparent);
    --shadow-control-focus: 0 0 0 .2rem color-mix(in srgb, var(--accent-context) 18%, transparent);
    --surface-action-emphasis: linear-gradient(135deg, color-mix(in srgb, var(--accent-critical) 86%, var(--accent-warning)), color-mix(in srgb, var(--accent-warning) 72%, #7f151f));
    --border-action-emphasis: color-mix(in srgb, var(--accent-critical) 62%, transparent);
    --shadow-action-emphasis: 0 12px 24px color-mix(in srgb, var(--accent-critical) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
    --shadow-action-emphasis-hover: 0 16px 30px color-mix(in srgb, var(--accent-critical) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26);
    --border-info-banner: rgba(166, 31, 43, .2);
    --text-info-banner: #5e2a2b;
    --text-action-primary-readable: #ffffff;
    --text-action-outline-readable: #2f4a63;
    --text-info-readable: #5e2a2b;
    --text-empty-readable: var(--text-primary);
    --text-status-danger-rgb: 154, 27, 46;
    --text-badge-status-info-rgb: 11, 88, 114;
    --surface-info-banner: radial-gradient(circle at 4% 0%, rgba(166, 31, 43, .09), transparent 16rem), linear-gradient(180deg, #fff8f5, #fff2ee);
    --shadow-info-banner: 0 12px 28px rgba(73, 24, 18, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
    --surface-feature-shell: radial-gradient(circle at 12% 0%, rgba(166, 31, 43, .055), transparent 24rem), linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 248, 245, .92));
    --shadow-feature-shell: 0 22px 52px rgba(73, 24, 18, .08), inset 0 1px 0 rgba(255, 255, 255, .94);
    --surface-feature-shell-highlight: radial-gradient(circle at 12% 0%, rgba(166, 31, 43, .08), transparent 34%), radial-gradient(circle at 88% 12%, rgba(185, 130, 52, .11), transparent 30%);
    --surface-feature: radial-gradient(circle at 13% 0%, color-mix(in srgb, var(--accent-contextual) 8%, transparent), transparent 13rem), linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 244, .92));
    --shadow-feature: 0 15px 32px rgba(73, 24, 18, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
    --surface-feature-sheen: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 36%);
    --border-queue: rgba(166, 31, 43, .11);
    --surface-queue: radial-gradient(circle at 10% 0%, rgba(166, 31, 43, .043), transparent 16rem), linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 249, 247, .93));
    --shadow-queue: 0 16px 34px rgba(73, 24, 18, .07), inset 0 1px 0 rgba(255, 255, 255, .92);
    --surface-queue-header: linear-gradient(90deg, rgba(166, 31, 43, .065), rgba(185, 130, 52, .034), transparent 74%);
    --border-queue-header: rgba(166, 31, 43, .105);
    --shadow-list-accent: 0 0 12px rgba(166, 31, 43, .22);
    --border-badge-fact: rgba(166, 31, 43, .13);
    --surface-badge-fact: linear-gradient(180deg, #fff8f5, #f0e2dd);
    --text-badge-fact: #5b3935;
    --border-badge-warning: rgba(185, 130, 52, .2);
    --surface-badge-warning: linear-gradient(180deg, #fff6eb, #f4e4cf);
    --text-badge-warning: #71450d;
    --text-status-complete: #74511f;
    --surface-status-complete: linear-gradient(90deg, rgba(185, 130, 52, .08), transparent 72%);
    --border-widget: rgba(166, 31, 43, .1);
    --border-badge-neutral: rgba(166, 31, 43, .12);
    --surface-badge-neutral: linear-gradient(180deg, #fff8f5, #f0e2dd);
    --text-badge-neutral: #5b3935;
    --border-story: rgba(166, 31, 43, .1);
    --surface-story: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-contextual) 8%, transparent), transparent 13rem), linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 244, .92));
    --shadow-story: 0 14px 30px rgba(73, 24, 18, .065), inset 0 1px 0 rgba(255, 255, 255, .92);
    --text-story: #211614;
    --border-empty: rgba(185, 130, 52, .2);
    --text-empty: #74511f;
    --surface-empty: radial-gradient(circle at 8% 0%, rgba(185, 130, 52, .09), transparent 12rem), linear-gradient(180deg, #fffaf4, #f8eee2);
    --shadow-empty: inset 0 1px 0 rgba(255, 255, 255, .88);
    --border-summary: rgba(166, 31, 43, .11);
    --surface-summary: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-contextual) 9%, transparent), transparent 13rem), linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 247, 244, .92));
    --shadow-summary: inset 0 1px 0 rgba(255, 255, 255, .9);
    --border-metric: rgba(166, 31, 43, .105);
    --surface-metric: rgba(255, 255, 255, .62);
    --border-flow: rgba(166, 31, 43, .105);
    --surface-flow: rgba(255, 255, 255, .62);
    --surface-focus-item: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-contextual) 7%, transparent), transparent 9rem), rgba(255, 255, 255, .74);
    --surface-governance: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-contextual) 7%, transparent), transparent 9rem), rgba(255, 255, 255, .74);
    --border-footnote: rgba(166, 31, 43, .09);
}

html {
    /* El contraste se compone sobre un fondo real, no sobre el blanco del UA. */
    background-color: var(--surface-canvas);
}

html[data-theme="light_red"] {
    /* O4-B1: mismos roles, con los valores visuales exactos de las hojas. */
    --surface-workspace: #fff8f7;
    --surface-workspace-raised: #ffffff;
    --text-workspace: #2e2228;
    --border-workspace: #e5cfd0;
    --text-workspace-muted: #6e5c64;
    --accent-brand: #a53b4d;
    --accent-interactive: #2f4a63;
    --border-layout: rgba(42, 36, 32, .16);
    --border-input-layout: rgba(42, 36, 32, .22);
    --surface-interactive-active: rgba(59, 130, 246, .12);
    --surface-list-item: #ffffff;
    --surface-list-selected: #ffffff;
    --surface-message: #ffffff;
    --surface-message-internal: #ffffff;
    --text-warning-attention: #8a5a17;
    --border-warning-attention: rgba(138, 90, 23, .35);
    --surface-warning-banner: #fff8e8;

    --es-accent: #1f5fc4;
    --es-accent-hover: #1a53ad;
    --es-accent-fg: #1f5fc4;

    --cc-ok: #28744a;
    --cc-warn: #a66a00;
    --cc-crit: #a61f2b;
    --cc-breach: #fff3f1;
    --cc-info: #2f4a63;
    --cc-muted: #685853;
    --cc-track: rgba(166, 31, 43, 0.14);
    --cc-banner-base: #fff3f1;
    --cc-banner-warn-text: #7a5200;
    --cc-banner-crit-text: #a61f2b;
    --info-panel-shadow: 0 16px 38px rgba(73, 24, 18, 0.07);
    --info-panel-shadow-hover: 0 18px 44px rgba(73, 24, 18, 0.1);
    --info-radius: 16px;
    --info-gap: 1rem;

    /* Sentinel Fuentes: equivalentes claros, definidos en el catálogo. */
    --es-src-bg: #fcfbfa;
    --es-src-bg-rail: #f4f1ee;
    --es-src-bg-rail-foot: #efeae6;
    --es-src-bg-bar: #f7f5f3;
    --es-src-bg-card: #ffffff;
    --es-src-bg-band: linear-gradient(180deg, #f7f5f3, #fcfbfa);
    --es-src-bg-row-hover: #f4f1ee;
    --es-src-bg-rail-hover: #eee9e5;
    --es-src-bg-rail-active: #e6ded9;
    --es-src-bg-input: #ffffff;
    --es-src-bg-drawer: #ffffff;
    --es-src-bg-neutral-btn: #f2efec;
    --es-src-bg-neutral-btn-hover: #e8e3df;
    --es-src-bd: #ddd2cc;
    --es-src-bd-soft: #e8dcd7;
    --es-src-bd-card: #e2d7d2;
    --es-src-bd-input: #cfc0b9;
    --es-src-bd-row: #ece3df;
    --es-src-bd-btn: #cfc0b9;
    --es-src-bd-box: #a89890;
    --es-src-fg: #1a1714;
    --es-src-fg-2: #3c332e;
    --es-src-fg-muted: #6b5a54;
    --es-src-fg-weak: #645853;
    --es-src-fg-mono: #5f534e;
    --es-src-fg-inverse: #ffffff;
    --es-src-backdrop: rgba(26, 23, 20, .32);
    --es-src-ok-soft: rgba(29, 138, 78, .12);
    --es-src-ok-border: rgba(29, 138, 78, .4);
    --es-src-ok-pill-border: rgba(29, 138, 78, .35);
    --es-src-ok-pill-bg: rgba(29, 138, 78, .10);
    --es-src-warn-soft: rgba(176, 125, 10, .12);
    --es-src-warn-border: rgba(176, 125, 10, .4);
    --es-src-warn-pill-border: rgba(176, 125, 10, .38);
    --es-src-warn-pill-bg: rgba(176, 125, 10, .10);
    --es-src-err-soft: rgba(192, 57, 43, .12);
    --es-src-err-border: rgba(192, 57, 43, .4);
    --es-src-err-pill-border: rgba(192, 57, 43, .38);
    --es-src-err-pill-bg: rgba(192, 57, 43, .10);
    --es-src-silent-soft: rgba(138, 124, 118, .16);
    --es-src-silent-pill-border: rgba(138, 124, 118, .4);
    --es-src-silent-pill-bg: rgba(138, 124, 118, .12);
    --es-src-paused-pill-border: rgba(156, 141, 134, .5);
    --es-src-paused-pill-bg: rgba(156, 141, 134, .14);
    --es-src-human-soft: rgba(44, 93, 158, .14);
    --es-src-human-pill-border: rgba(44, 93, 158, .32);
    --es-src-human-pill-bg: rgba(44, 93, 158, .10);
    --esg-bg: #fbf7f5;
    --esg-panel: rgba(255, 255, 255, 0.94);
    --esg-panel-2: rgba(255, 252, 250, 0.96);
    --esg-line: rgba(166, 31, 43, 0.14);
    --esg-text: #1e1512;
    --esg-muted: #685853;
    --esg-green: #28744a;
    --esg-cyan: #a61f2b;
    --esg-yellow: #a66a00;
    --esg-orange: #b45309;
    --esg-red: #a61f2b;
    --es-src-ok: #1d8a4e;
    --es-src-ok-fg: #15703e;
    --es-src-warn: #b07d0a;
    --es-src-warn-fg: #8a5f06;
    --es-src-err: #c0392b;
    --es-src-err-fg: #9a1b2e;
    --es-src-silent: #8a7c76;
    --es-src-silent-fg: #6b5a54;
    --es-src-paused: #9c8d86;
    --es-src-human-fg: #2c5d9e;
    --es-src-accent: var(--es-accent);
    --es-src-accent-hover: var(--es-accent-hover);
    --es-src-accent-fg: var(--es-accent-fg);
    --es-src-accent-soft: rgba(31, 95, 196, .09);
    --es-src-accent-bd: rgba(31, 95, 196, .32);
    --es-src-cat-media-bg: rgba(31, 95, 196, .10);
    --es-src-cat-media-fg: #1f5fc4;
    --es-src-cat-reg-bg: rgba(109, 63, 176, .10);
    --es-src-cat-reg-fg: #6d3fb0;
    --es-src-cat-social-bg: rgba(13, 124, 106, .10);
    --es-src-cat-social-fg: #0a6355;
    --es-src-cat-tg-bg: rgba(11, 111, 150, .10);
    --es-src-cat-tg-fg: #0b6f96;
    --es-src-cat-cyber-bg: rgba(154, 27, 46, .09);
    --es-src-cat-cyber-fg: #9a1b2e;
    --es-src-cat-people-bg: rgba(138, 90, 6, .10);
    --es-src-cat-people-fg: #75500a;
    --es-src-cat-manual-bg: rgba(107, 90, 84, .10);
    --es-src-cat-manual-fg: #6b5a54;

    --surface-canvas: #f7f5f3;
    --surface-1: #fcfbfa;
    --surface-2: #ffffff;
    --surface-3: #f2efec;
    --surface-sunken: #f4f2ef;
    --surface-hover: rgba(26, 23, 20, .045);
    --surface-selected: rgba(154, 27, 46, .10);
    --surface-overlay: rgba(255, 252, 249, .92);
    --surface-panel: rgba(255, 252, 250, .94);
    --surface-panel-strong: #ffffff;
    --surface-modal: rgba(255, 252, 249, .92);
    --surface-dialog-header: linear-gradient(180deg, #fffefd, #f2e7e4);
    --border-dialog-header: #ddc9c3;
    --text-dialog-header: #1a1a1a;
    --text-dialog-title: #191311;
    --accent-dialog-marker: #2f4a63;
    --surface-summary: rgba(166, 31, 43, .045);
    --surface-summary-item: rgba(15, 23, 42, .32);
    --surface-summary-next: rgba(166, 31, 43, .075);
    --text-primary: #1a1714;
    --text-secondary: #55504b;
    --text-muted: #6f6862;
    --text-subtle: #79726b;
    --text-disabled: #a8a09a;
    --text-inverse: #ffffff;
    --text-link: #2f4a63;
    --text-link-strong: #2f4a63;
    --text-link-hover: #74111f;
    --border-subtle: #e8e3de;
    --border-strong: #cfc7bf;
    --border-focus: rgba(47, 74, 99, .20);
    --border-inverse: rgba(26, 23, 20, .24);
    --border-summary-item: rgba(148, 163, 184, .22);
    --border-summary-next: rgba(166, 31, 43, .22);
    --text-summary-next: #9a1b2e;
    --action-primary-bg: #9a1b2e;
    --action-primary-bg-hover: #74111f;
    --action-primary-fg: #ffffff;
    --action-primary-border: #9a1b2e;
    --action-secondary-bg: #2f4a63;
    --action-secondary-bg-hover: #22374a;
    --action-secondary-fg: #ffffff;
    --action-quiet-fg: #635c56;
    --action-danger-bg: #9a1b2e;
    --action-danger-fg: #ffffff;
    --focus-ring: var(--border-focus);
    --state-success-fg: #0f6b4f;
    --state-success-bg: #eaf3ef;
    --state-info-fg: #2f4a63;
    --state-info-bg: #f3f5f7;
    --state-warning-fg: #a34a0c;
    --state-warning-bg: #fbf0e4;
    --state-danger-fg: #9a1b2e;
    --state-danger-bg: #f8eaec;
    --severity-critical-fg: #9a1b2e;
    --severity-critical-bg: #f8eaec;
    --severity-critical-border: #eed3d7;
    --severity-high-fg: #a34a0c;
    --severity-high-bg: #fbf0e4;
    --severity-high-border: #e5cba6;
    --severity-medium-fg: #8a6a12;
    --severity-medium-bg: #f8f2de;
    --severity-medium-border: #e2d3a4;
    --severity-low-fg: #0f6b4f;
    --severity-low-bg: #eaf3ef;
    --severity-low-border: #c3ddd1;
    --severity-unknown-fg: #79726b;
    --severity-unknown-bg: #f1edea;
    --severity-unknown-border: #d8d0ca;
    --data-series-1: #3154c9;
    --data-series-2: #0f6f8f;
    --data-series-3: #0e8b96;
    --data-series-4: #7c3f58;
    --data-series-5: #b5afa3;
    --data-series-6: #b98234;
    --data-grid: rgba(26, 23, 20, .12);
    --data-axis: rgba(26, 23, 20, .18);
    --data-threshold: #c79a4b;
    --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-reading: 'Source Serif 4', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --font-ui: var(--font-sans);
    --font-display: var(--font-sans);
    --font-measure-reading: 68ch;
    --text-wrap-reading: pretty;
    --text-reading-leading: 1.65;

    /* Roles semánticos O1 consolidados: valores light_red preservados. */
    --action-emphasis-surface: var(--card-bg);
    --action-emphasis-border: var(--action-primary);
    --action-emphasis-shadow: none;
    --action-emphasis-hover-border: rgba(125, 211, 252, 0.76);
    --action-emphasis-hover-shadow: 0 16px 28px rgba(37, 99, 235, 0.24);
    --action-quiet-border: #d7c2bc;
    --action-quiet-shadow: none;
    --action-quiet-hover-surface: #fff4f1;
    --action-quiet-hover-border: rgba(166, 31, 43, 0.34);
    --action-quiet-hover-foreground: #7f151f;
    --text-meta: var(--text-muted);
    --state-predictive-surface: rgba(124, 58, 237, .12);
    --state-predictive-panel-surface: rgba(124, 58, 237, .07);
    --state-predictive-foreground: #6d28d9;
    --state-predictive-border: rgba(124, 58, 237, .4);
    --state-predictive-hover-surface: rgba(124, 58, 237, .08);
    --surface-row: rgba(255, 255, 255, .84);
    --border-row: rgba(166, 31, 43, .11);
    --text-label: #7b6963;
    --text-value: #1e1512;
    --surface-info-soft: rgba(37, 107, 146, .10);
    --text-info-strong: #155a7a;
    --surface-accent-soft: rgba(104, 64, 162, .08);
    --text-accent-strong: #4b2a76;
    --text-accent: #6840a2;
    --text-warning-strong: #9b5f1b;
    --surface-warning-soft: rgba(155, 95, 27, .10);
    --text-danger-strong: #a63e42;
    --text-status-danger-strong: #9a1b2e;
    --text-status-neutral: #6f6862;
    --text-outline-strong: #332622;
    --border-focus-strong: rgba(47, 74, 99, .38);
    --surface-indicator: linear-gradient(45deg, transparent 40%, var(--sentinel-border-critical) 51%), linear-gradient(-45deg, transparent 40%, var(--sentinel-border-critical) 51%), linear-gradient(180deg, var(--sentinel-text-primary), var(--sentinel-surface-raised));
    --border-modal-header: var(--opn-hairline, var(--sentinel-border-strong));
    --surface-modal-header: linear-gradient(180deg, var(--sentinel-surface-raised) 0%, var(--sentinel-surface-raised) 100%);
    --surface-outline: var(--sentinel-surface-raised);
    --border-outline: var(--sentinel-border-strong);
    --text-outline: var(--sentinel-text-primary);
    --surface-selected-strong: var(--bs-info);
    --border-selected-strong: var(--bs-info);
    --text-selected-inverse: var(--action-primary-fg);

    /* Catálogo semántico de Sentinel: una paleta pequeña para ambos temas. */
    --sentinel-surface-canvas: #f7f5f3;
    --sentinel-surface-panel: rgba(255, 252, 250, .94);
    --sentinel-surface-raised: #ffffff;
    --sentinel-surface-sunken: #f4f2ef;
    --sentinel-surface-overlay: rgba(255, 252, 249, .92);
    --sentinel-surface-hover: rgba(26, 23, 20, .045);
    --sentinel-surface-selected: rgba(154, 27, 46, .10);
    --sentinel-surface-soft: rgba(26, 23, 20, .04);
    --sentinel-text-primary: #1a1714;
    --sentinel-text-secondary: #55504b;
    --sentinel-text-muted: #6f6862;
    --sentinel-text-subtle: #79726b;
    --sentinel-text-inverse: #1f1714;
    --sentinel-text-warm: #5d4e48;
    --sentinel-text-link: #2f4a63;
    --sentinel-text-danger: #9a1b2e;
    --sentinel-text-danger-soft: #b54b58;
    --sentinel-text-warning: #a34a0c;
    --sentinel-text-success: #0f6b4f;
    --sentinel-text-info: #2f4a63;
    --sentinel-border-subtle: #e8e3de;
    --sentinel-border-normal: #ded7d0;
    --sentinel-border-strong: #cfc7bf;
    --sentinel-border-focus: rgba(47, 74, 99, .20);
    --sentinel-border-critical: rgba(154, 27, 46, .28);
    --sentinel-border-warning: rgba(163, 74, 12, .30);
    --sentinel-border-success: rgba(15, 107, 79, .30);
    --sentinel-border-info: rgba(47, 74, 99, .30);
    --sentinel-border-dark: rgba(26, 23, 20, .18);
    --sentinel-accent-primary: #1f5fc4;
    --sentinel-accent-primary-soft: rgba(31, 95, 196, .12);
    --sentinel-accent-secondary: #2f4a63;
    --sentinel-accent-cyan: #0f6f8f;
    --sentinel-accent-cyan-soft: rgba(15, 111, 143, .12);
    --sentinel-accent-danger: #9a1b2e;
    --sentinel-accent-danger-soft: rgba(154, 27, 46, .10);
    --sentinel-accent-warning: #a34a0c;
    --sentinel-accent-warning-soft: rgba(163, 74, 12, .10);
    --sentinel-accent-success: #0f6b4f;
    --sentinel-accent-success-soft: rgba(15, 107, 79, .10);
    --sentinel-accent-info: #0f6f8f;
    --sentinel-accent-info-soft: rgba(15, 111, 143, .11);
    --sentinel-severity-critical: #9a1b2e;
    --sentinel-severity-critical-soft: #f8eaec;
    --sentinel-severity-high: #a34a0c;
    --sentinel-severity-high-soft: #fbf0e4;
    --sentinel-severity-medium: #8a6a12;
    --sentinel-severity-medium-soft: #f8f2de;
    --sentinel-severity-low: #0f6b4f;
    --sentinel-severity-low-soft: #eaf3ef;
    --sentinel-effect-shadow: rgba(73, 24, 18, .18);
    --sentinel-effect-shadow-soft: rgba(73, 24, 18, .06);
    --sentinel-effect-highlight: rgba(255, 255, 255, .65);
    --sentinel-effect-accent: rgba(154, 27, 46, .12);
    --sentinel-effect-mask: #ffffff;
    --sentinel-data-grid: rgba(26, 23, 20, .12);
    --sentinel-data-axis: rgba(26, 23, 20, .18);
/* BEGIN semantic-approval:sentinel-b-token-roles */
    --sentinel-signals-pager-surface: rgba(255, 255, 255, 0.96);
    --sentinel-signals-expanded-row-surface: rgba(255, 255, 255, .72);
    --sentinel-signals-inline-details-surface: rgba(255, 255, 255, .8);
    --sentinel-signals-detail-value-foreground: #2d2522;
    --sentinel-filter-ghost-surface: #fffdfc;
    --sentinel-filter-ghost-foreground: #4b302d;
    --sentinel-filter-primary-foreground: var(--action-primary);
    --sentinel-asset-notes-surface: var(--surface-elevated, var(--sentinel-surface-raised));
    --sentinel-asset-notes-foreground: var(--text-secondary, var(--sentinel-text-warm));
/* END semantic-approval:sentinel-b-token-roles */
    --sentinel-data-series-1: #3154c9;
    --sentinel-data-series-2: #0f6f8f;
    --sentinel-data-series-3: #0e8b96;


    --font-size-body: 1rem;
    --font-size-label: .78rem;
    --font-size-title: 1.5rem;
    --font-line-body: 1.5;
    /* Geometría compartida: no depende del tema. */
    --layout-control-height: 42px;
    --layout-switch-width: 2.2em;
    --layout-switch-height: 1.15em;
    --layout-state-icon-size: 1.58rem;
    --layout-severity-gap: .3em;
    --layout-severity-marker-size: .45em;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(30, 22, 20, .05);
    --shadow-md: 0 1px 2px rgba(30, 22, 20, .04), 0 8px 20px -12px rgba(30, 22, 20, .16);
    --shadow-lg: 0 1px 2px rgba(30, 22, 20, .05), 0 24px 48px -28px rgba(30, 22, 20, .22);
    --shadow-panel: 0 16px 44px rgba(30, 22, 20, .12), 0 2px 8px rgba(30, 22, 20, .08);

    /* Roles de preservación O2: mismos roles, valores claros explícitos. */
    --surface-utility: linear-gradient(180deg, #ffffff, #f8efec);
    --border-utility: #d7c2bc;
    --text-utility: #5a4039;
    --shadow-utility: 0 6px 14px rgba(71, 35, 28, .08);
    --surface-utility-hover: linear-gradient(180deg, var(--surface-1), var(--surface-3));
    --border-utility-hover: #a61f2b;
    --text-utility-hover: #8f1721;
    --shadow-utility-hover: 0 10px 22px rgba(166, 31, 43, .14);
    --surface-utility-expanded: linear-gradient(180deg, var(--surface-1), var(--surface-3));
    --border-utility-expanded: #a61f2b;
    --border-danger-control: rgba(179, 38, 47, .28);
    --text-danger-control: #9f1d2a;
    --surface-danger-control-hover: #fff1f0;
    --border-danger-control-hover: #b3262f;
    --text-danger-control-hover: #8f1721;
    --surface-popover: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 244, .98));
    --shadow-popover: 0 22px 48px rgba(71, 35, 28, .18), 0 1px 0 rgba(255, 255, 255, .88) inset;
    --text-popover-label: #7a625b;
    --text-link-floating: #2f4a63;
    --surface-control: linear-gradient(180deg, #ffffff, #fbf4f1);
    --border-control: #eadbd7;
    --text-control: #211916;
    --border-control-hover: #c9aaa3;
    --surface-control-selected: linear-gradient(135deg, rgba(166, 31, 43, .12), rgba(255, 255, 255, .94));
    --border-control-selected: #a61f2b;
    --text-control-selected: #7d1720;
    --shadow-control-selected: inset 3px 0 0 #a61f2b;
    --surface-selection-status: linear-gradient(135deg, rgba(166, 31, 43, .12), rgba(255, 255, 255, .94));
    --border-selection-status: #a61f2b;
    --surface-selection-accent: linear-gradient(135deg, rgba(166, 31, 43, .12), rgba(255, 255, 255, .94));
    --border-selection-accent: #a61f2b;
    --surface-emphasis-control: rgba(255, 255, 255, .86);

    --surface-floating: linear-gradient(180deg, #fff, #fff7f4);
    --border-floating: #d7c2bc;
    --text-floating: #402b28;
    --shadow-floating: 0 22px 55px rgba(71, 35, 28, .2), 0 1px 0 rgba(255, 255, 255, .92) inset;
    --text-floating-description: #765e58;
    --border-floating-control: var(--border-color, rgba(148, 163, 184, .32));
    --text-floating-control: var(--text-secondary, #cbd5e1);
    --border-floating-control-focus: var(--secondary-color, #38bdf8);
    --text-floating-control-focus: var(--text-primary, #f8fafc);
    --border-floating-hover: #d7c2bc;
    --surface-floating-hover: #fff0ed;
    --border-floating-icon: rgba(166, 31, 43, .22);
    --surface-floating-icon: rgba(166, 31, 43, .08);
    --text-floating-icon: #a61f2b;
    --text-floating-muted: #765e58;
    --border-floating-divider: var(--border-subtle, rgba(148, 163, 184, .18));


    /* Los mismos 57 nombres, ahora con valores claros explícitos. */
    --action-primary: #9a1b2e;
    --action-primary-dark: #74111f;
    --action-primary-soft: #f7eef0;
    --action-secondary: #2f4a63;
    --action-secondary-dark: #22374a;
    --bs-border-color-translucent: rgba(26, 23, 20, .09);
    --bs-danger-bg-subtle: #f8eaec;
    --bs-danger-border-subtle: #eed3d7;
    --bs-danger-text-emphasis: #8a1728;
    --bs-emphasis-color: #121110;
    --bs-focus-ring-color: rgba(47, 74, 99, .20);
    --bs-info: #2f4a63;
    --bs-light: #f7f5f3;
    --bs-light-border-subtle: #e8e3de;
    --bs-primary: #9a1b2e;
    --bs-secondary-bg-subtle: #f4f2ef;
    --bs-secondary-border-subtle: #e8e3de;
    --bs-secondary-text-emphasis: #3b3531;
    --bs-warning: #a34a0c;
    --bs-warning-bg-subtle: #fbf0e4;
    --bs-warning-border-subtle: #e5cba6;
    --bs-warning-rgb: 163, 74, 12;
    --bs-warning-text-emphasis: #8f4009;
    --cc-mono: var(--font-mono);
    --input-focus-border: #2f4a63;
    --opn-filter-panel: #f4f2ef;
    --opn-ground: #faf8f6;
    --opn-hairline: #e8e3de;
    --opn-hairline-soft: #f1edea;
    --opn-ink: #262220;
    --opn-label: #635c56;
    --opn-placeholder: #79726b;
    --opn-red: #9a1b2e;
    --opn-surface: #ffffff;
    --opn-warning: #a34a0c;
    --reading-leading: 1.65;
    --reading-measure: 68ch;
    --reading-size: 16px;
    --risk-critical-line: #eed3d7;
    --risk-critical-soft: #f8eaec;
    --risk-high-ink: #8f4009;
    --risk-high-line: #e5cba6;
    --risk-high-soft: #fbf0e4;
    --risk-low-ink: #0d5c44;
    --risk-low-line: #c3ddd1;
    --risk-low-soft: #eaf3ef;
    --risk-medium-ink: #74580f;
    --risk-medium-line: #e2d3a4;
    --risk-medium-soft: #f8f2de;
    --ux-accent: var(--action-primary-bg);
    --ux-accent-2: var(--action-secondary-bg);
    --ux-table-action-fg: #7f151f;
    --ux-table-action-border: rgba(166, 31, 43, 0.18);
    --ux-table-action-bg: radial-gradient(circle at 24% 0%, rgba(166, 31, 43, 0.075), transparent 1.8rem), rgba(255, 255, 255, 0.86);
    --ux-table-action-hover-fg: #5e1118;
    --ux-table-action-hover-border: rgba(166, 31, 43, 0.32);
    --ux-table-action-hover-bg: radial-gradient(circle at 24% 0%, rgba(166, 31, 43, 0.11), transparent 1.8rem), #fff8f5;
    --ux-table-action-menu-border: rgba(166, 31, 43, 0.14);
    --ux-table-action-menu-bg: radial-gradient(circle at 14% 0%, rgba(166, 31, 43, 0.075), transparent 10rem), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 245, 0.97));
    --ux-table-action-menu-divider: rgba(166, 31, 43, 0.12);
    --ux-table-action-menu-fg: #2b1b18;
    --ux-table-action-menu-icon: #7f151f;
    --ux-table-action-menu-hover-fg: #2b1b18;
    --ux-table-action-menu-hover-bg: rgba(166, 31, 43, 0.075);
    --ux-table-action-shadow: 0 8px 18px rgba(73, 24, 18, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --ux-table-action-menu-shadow: 0 22px 46px rgba(73, 24, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --ux-table-action-info-fg: #8f1721;
    --ux-table-action-info-border: rgba(166, 31, 43, 0.28);
    --ux-table-action-primary-fg: #8f1721;
    --ux-table-action-primary-border: rgba(166, 31, 43, 0.28);
    --ux-table-action-warning-fg: #8a540b;
    --ux-table-action-warning-border: rgba(185, 130, 52, 0.26);
    --ux-table-action-success-fg: #8f1721;
    --ux-table-action-success-border: rgba(166, 31, 43, 0.28);
    --ux-table-action-danger-fg: #a61f2b;
    --ux-table-action-danger-border: rgba(166, 31, 43, 0.28);
/* BEGIN O4-A-AUTOMATIC-ROLES */
    --action-info-foreground: var(--text-action-outline-readable);
    --border-action-outline-hover: #b9958d;
    --border-input-hover: #b9958d;
    --border-table-header: #ddc9c3;
    --surface-action-info: var(--surface-2);
    --surface-action-outline: rgba(255, 255, 255, 0.86);
    --surface-action-outline-hover: #f2e7e4;
    --surface-scrollbar-thumb: rgba(25, 19, 17, 0.16);
    --text-action-outline: #332622;
    --text-input-placeholder: #8a7c77;
/* END O4-A-AUTOMATIC-ROLES */

    /* O4-C1: roles transversales para controles, feedback y gravedad. */
    --shadow-modal-content: 0 20px 50px rgba(0, 0, 0, 0.3);
    --surface-action-ripple: rgba(255, 255, 255, 0.3);
    --surface-action-primary: linear-gradient(135deg, #a61f2b, #c98742);
    --surface-action-primary-hover: linear-gradient(135deg, #7f151f, #8a4f1b);
    --shadow-action-primary: 0 10px 22px rgba(166, 31, 43, 0.18);
    --shadow-action-primary-hover: 0 12px 26px rgba(166, 31, 43, 0.22);
    --border-action-primary: #8f1721;
    --border-action-outline: #d7c2bc;
    --text-action-outline-hover: #191311;
    --border-action-info: #d7dfe6;
    --surface-action-info-hover: linear-gradient(135deg, #a61f2b, #b98234);
    --action-warning: #b91c1c;
    --surface-action-warning: transparent;
    --surface-input: linear-gradient(180deg, #ffffff, #fbf7f5);
    --border-input: #d9c7c1;
    --text-input: #1f1714;
    --shadow-input: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    --surface-input-focus: #ffffff;
    --border-input-focus: #a61f2b;
    --shadow-input-focus: 0 0 0 4px rgba(166, 31, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow-select-focus: 0 0 0 4px rgba(166, 31, 43, 0.08);
    --surface-select-focus: #ffffff;
    --surface-input-select-image: linear-gradient(45deg, transparent 40%, #a61f2b 51%), linear-gradient(-45deg, transparent 40%, #a61f2b 51%), linear-gradient(180deg, #ffffff, #fbf7f5);
    --surface-input-select-focus-image: none;
    --shadow-input-hover: 0 0 0 3px rgba(166, 31, 43, 0.08);
    --border-input-select-width: 1px;
    --border-input-select: #d9c7c1;
    --border-select-hover: var(--border-input);
    --input-select-position: calc(100% - 1.05rem) calc(50% - 0.12rem), calc(100% - 0.78rem) calc(50% - 0.12rem), 0 0;
    --input-select-focus-position: initial;
    --input-select-size: 0.38rem 0.38rem, 0.38rem 0.38rem, 100% 100%;
    --input-select-repeat: no-repeat;
    --input-placeholder-opacity: 1;
    --surface-toast: #f5f0f0;
    --text-toast: #1a1a1a;
    --border-toast: 1px solid #e0d7d7;
    --surface-toast-danger: #fef2f2;
    --border-toast-danger: #fecaca;
    --surface-toast-success: #f0fdf4;
    --border-toast-success: #bbf7d0;
    --surface-toast-warning: #fffbeb;
    --border-toast-warning: #fef08a;
    --surface-toast-info: #f0f9ff;
    --border-toast-info: #bae6fd;
    --border-badge: rgba(255, 255, 255, 0.2);
    --shadow-badge-hover: 0 4px 12px rgba(0, 0, 0, 0.2);
    --gravity-critical-surface: linear-gradient(135deg, rgba(255, 31, 31, 0.2), rgba(255, 31, 31, 0.1));
    --gravity-critical-foreground: #ff1f1f;
    --gravity-critical-border: rgba(255, 31, 31, 0.3);
    --gravity-critical-shadow: inset 0 0 10px rgba(255, 31, 31, 0.1);
    --gravity-high-surface: linear-gradient(135deg, rgba(255, 154, 0, 0.2), rgba(255, 154, 0, 0.1));
    --gravity-high-foreground: #ff9a00;
    --gravity-high-border: rgba(255, 154, 0, 0.3);
    --gravity-high-shadow: inset 0 0 10px rgba(255, 154, 0, 0.1);
    --gravity-medium-surface: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    --gravity-medium-foreground: #ffc107;
    --gravity-medium-border: rgba(255, 193, 7, 0.3);
    --gravity-medium-shadow: inset 0 0 10px rgba(255, 193, 7, 0.1);
    --gravity-low-surface: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    --gravity-low-foreground: #4caf50;
    --gravity-low-border: rgba(76, 175, 80, 0.3);
    --gravity-low-shadow: inset 0 0 10px rgba(76, 175, 80, 0.1);
    --state-closed-surface: linear-gradient(135deg, rgba(158, 158, 158, 0.2), rgba(158, 158, 158, 0.1));
    --state-closed-foreground: #9e9e9e;
    --state-closed-border: rgba(158, 158, 158, 0.3);
    --shadow-badge-pulse-start: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 15px rgba(59, 130, 246, 0.3);
    --shadow-badge-pulse-end: inset 0 0 15px rgba(0, 0, 0, 0.15), 0 0 25px rgba(59, 130, 246, 0.5);
    --surface-action-secondary-soft: #f4f6f8;
    --border-action-secondary-soft: #c5d0d9;
    --surface-action-danger-soft: #fbf6f6;
    --border-action-danger-soft: #e4c8cc;
    --surface-action-danger: #ffffff;

    --warning: #a34a0c;

    /* Pares claros exactos de las primitivas compartidas O4-C2. */
    --surface-card: rgba(255, 255, 255, 0.9);
    --border-card: rgba(166, 31, 43, 0.1);
    --shadow-card: 0 18px 44px rgba(71, 35, 28, 0.08), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    --border-card-hover: #c9aaa3;
    --shadow-card-hover: 0 20px 50px rgba(71, 35, 28, 0.11);
    --surface-modal-primitive: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 252, 250, 0.99));
    --border-modal-primitive: #e3d2cd;
    --shadow-modal-primitive: 0 18px 44px rgba(71, 35, 28, 0.08), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    --surface-table-header: #f2efec;
    --text-table-header: #453b37;
    --border-table-cell: #eadbd7;
    --surface-table-row-hover: rgba(166, 31, 43, 0.045);
    --surface-table-sticky-header: radial-gradient(circle at 8% 0%, rgba(166, 31, 43, 0.07), transparent 10rem), linear-gradient(180deg, rgba(255, 250, 248, 0.99), rgba(250, 239, 235, 0.99));
    --shadow-table-sticky-header: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(166, 31, 43, 0.12), 0 10px 22px rgba(73, 24, 18, 0.08);
    --border-table-sticky-header: rgba(166, 31, 43, 0.13);
    --text-table-sticky-header: #6d5751;
    --text-state-critical-strong: var(--bs-danger, var(--risk-critical));
    --surface-table-operational-header: radial-gradient(circle at 8% 0%, rgba(166, 31, 43, 0.07), transparent 10rem), linear-gradient(180deg, rgba(255, 250, 248, 0.99), rgba(250, 239, 235, 0.99));
    --border-table-operational-header: rgba(166, 31, 43, 0.12);

    /* O4-C9B: pares claros exactos de las composiciones de evidencia. */
    --surface-evidence-card: radial-gradient(circle at 12% 0%, rgba(166, 31, 43, 0.065), transparent 9rem), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 245, 0.94));
    --border-evidence-card: rgba(166, 31, 43, 0.12);
    --shadow-evidence-card: 0 16px 34px rgba(73, 24, 18, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --surface-evidence-marker: rgba(166, 31, 43, 0.075);
    --border-evidence-marker: rgba(166, 31, 43, 0.18);
    --text-evidence-marker: #7f151f;
    --text-evidence-accent: #7f151f;
    --surface-evidence-modal: radial-gradient(circle at 12% 0%, rgba(166, 31, 43, 0.07), transparent 18rem), linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(255, 248, 245, 0.995));
    --border-evidence-modal: rgba(166, 31, 43, 0.16);
    --text-evidence-modal: #2b1b18;
    --shadow-evidence-modal: 0 30px 80px rgba(73, 24, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --surface-evidence-modal-bar: rgba(255, 248, 245, 0.72);
    --surface-action-primary-default: #9a1b2e;
    --border-action-primary-default: #74111f;
    --shadow-action-primary-default: rgba(30, 22, 20, 0.05) 0 1px 2px;
    --shadow-action-primary-hover: rgba(30, 22, 20, 0.05) 0 1px 2px;

    /* Par claro del foco compacto; el campo no añade una superficie opaca. */
    --surface-input-inline-focus: transparent;
    --border-input-inline-focus: #d9c7c1;
    --shadow-input-inline-focus: 0 0 0 4px rgba(166, 31, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --surface-action-utility: #ffffff;
    --surface-action-utility-hover: var(--action-primary-soft);
    --border-action-utility: var(--action-primary);
    --border-action-utility-hover: var(--action-primary-dark);
    --text-action-utility: var(--action-primary);
    --text-action-utility-hover: var(--action-primary-dark);
    --shadow-action-utility: none;
    --shadow-action-utility-hover: none;
    --surface-action-info-fallback: var(--bs-info);
    --surface-action-info-fallback-hover: var(--action-secondary-dark);
    --border-action-info-fallback: var(--bs-info);
    --border-action-info-fallback-hover: var(--action-secondary-dark);
    --text-action-contrast: #ffffff;
    --text-action-outline-danger: #9a1b2e;
    --text-on-action: #ffffff;
    --surface-action-success-default: var(--bs-success);
    --surface-action-success-hover: var(--bs-success-text-emphasis);
    --border-action-success-default: var(--bs-success);
    --border-action-success-hover: var(--bs-success-text-emphasis);
    --surface-action-warning-default: var(--bs-warning);
    --surface-action-warning-hover: var(--bs-warning-text-emphasis);
    --border-action-warning-default: var(--bs-warning);
    --border-action-warning-hover: var(--bs-warning-text-emphasis);
    --surface-action-outline-info: var(--card-bg);
    --surface-action-outline-info-hover: var(--bs-info);
    --border-action-outline-info: var(--bs-info-border-subtle);
    --text-action-outline-info: var(--text-action-outline-readable);
    --surface-card-header: linear-gradient(180deg, rgba(166, 31, 43, 0.045), transparent);
    --border-card-header: rgba(166, 31, 43, 0.1);
    --surface-action-quiet: #ffffff;
    --surface-action-quiet-hover: var(--action-primary-soft);
    --action-quiet: var(--action-primary);
    --action-quiet-hover: var(--action-primary-dark);

    /* O4-C4: pares claros de contexto, navegación y estados compartidos. */
    --text-heading: #121110;
    --surface-context: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 240, 240, .95));
    --border-context: rgba(196, 30, 58, .20);
    --text-context: #b91c1c;
    --text-context-hover: #74111f;
    --text-context-active: #1a1a1a;
    --text-context-divider: #c41e3a;
    --font-weight-context-item: 500;
    --font-weight-context-active: 600;
    --shadow-navigation: 8px 0 28px rgba(87, 42, 35, .06);
    --text-navigation: #5f5551;
    --text-navigation-icon: #7f706b;
    --surface-navigation-hover: linear-gradient(90deg, rgba(166, 31, 43, .11), rgba(166, 31, 43, .025));
    --surface-navigation-active: linear-gradient(90deg, rgba(166, 31, 43, .11), rgba(166, 31, 43, .025));
    --text-navigation-active: #7d1720;
    --accent-navigation: #a61f2b;
    --border-navigation-active: #a61f2b;
    --text-status-badge-base: #1a1a1a;
    --surface-status-badge-success: rgba(5, 150, 105, .15);
    --text-status-badge-success: #047857;
    --surface-status-badge-danger: rgba(185, 28, 28, .15);
    --surface-status-badge-warning: rgba(217, 119, 6, .15);
    --text-status-badge-warning: #b45309;
    --surface-status-badge-info: rgba(166, 31, 43, .13);
    --text-status-badge-info: #7f151f;
    --surface-status-badge-secondary: rgba(107, 114, 128, .12);
    --text-status-badge-secondary: #4b5563;
    --surface-status-badge-primary: rgba(185, 28, 28, .12);
    --text-status-badge-emphasis: #991b1b;
    --surface-control-outline: rgba(255, 255, 255, .86);
    --border-control-outline: #d7c2bc;
    --text-control-outline: #332622;
    --surface-control-outline-hover: #f2e7e4;
    --border-control-outline-hover: #b9958d;
    --text-control-outline-hover: #191311;

    /* O4-C5: pares claros exactos de los roles operativos compartidos. */
    --surface-feedback-panel: rgba(255, 255, 255, .88);
    --surface-popover-panel: rgba(255, 255, 255, .88);
    --surface-utility-panel: rgba(255, 255, 255, .88);
    --surface-popover-hover: rgba(59, 130, 246, .12);
    --surface-scrollbar-thumb-hover: rgba(25, 19, 17, .16);
    --surface-loading-bar: linear-gradient(90deg, rgba(166, 31, 43, .10), rgba(181, 127, 113, .24), rgba(166, 31, 43, .10));
    --surface-loading-line: linear-gradient(90deg, rgba(166, 31, 43, .10), rgba(181, 127, 113, .24), rgba(166, 31, 43, .10));
    --accent-operational: var(--action-primary-bg);
    --action-operational-bg: #9a1b2e;
    --action-operational-bg-hover: #74111f;
    --action-operational-info-bg: #2f4a63;
    --action-operational-info-bg-hover: #22374a;
    --border-operational: #74111f;
    --text-operational-on: #ffffff;
    --text-operational-outline: #2f4a63;
    --border-operational-outline: #d7dfe6;
    --surface-operational-outline-hover: #2f4a63;
    --surface-operational-subtle: #f3f5f7;
    --border-operational-subtle: #d7dfe6;
    --surface-operational-info-subtle: #f3f5f7;
    --border-operational-info-subtle: #d7dfe6;
    --text-operational-info: #243b4f;
    --text-operational-success: #1a1a1a;
    --surface-operational-success-subtle: transparent;
    --border-operational-success-subtle: rgba(255, 255, 255, .2);
    --text-operational-link: #2f4a63;
    --bs-operational-primary-rgb: 154, 27, 46;
    --bs-operational-info-rgb: 47, 74, 99;
    --bs-operational-link-rgb: 47, 74, 99;

    /* O4-C6: valores claros de las mismas primitivas compartidas. */
    --surface-table-dark: transparent;
    --border-table-dark: var(--border-subtle);
    --surface-table-dark-header: rgba(196, 30, 58, .05);
    --surface-utility-contrast: rgba(196, 30, 58, .08);
    --border-utility-contrast: rgba(196, 30, 58, .20);
    --surface-badge-neutral: linear-gradient(135deg, #fffefd, #e7edf2);
    --border-badge-neutral: #7b8b96;
    --text-badge-neutral: #26323a;
    --surface-badge-status-info: rgba(15, 111, 143, .12);
    --text-badge-status-info: #0b5872;
    --surface-badge-status-warning: rgba(138, 90, 0, .13);
    --text-badge-status-warning: #6f4700;
    --surface-badge-status-neutral: rgba(77, 69, 64, .12);
    --text-badge-status-neutral: #554a45;
    --surface-badge-status-info-strong: rgba(15, 111, 143, .12);
    --text-badge-status-info-strong: #0b5872;
    --surface-badge-status-critical: rgba(179, 38, 47, .12);
    --text-badge-status-critical: #8f1721;
    --surface-badge-severity-low: rgba(8, 127, 91, .12);
    --text-badge-severity-low: #075f46;
    --border-badge-severity-low: rgba(76, 175, 80, .3);
    --shadow-badge-severity-low: var(--gravity-low-shadow);
    --surface-badge-severity-medium: rgba(138, 90, 0, .13);
    --text-badge-severity-medium: #6f4700;
    --border-badge-severity-medium: var(--gravity-medium-border);
    --shadow-badge-severity-medium: var(--gravity-medium-shadow);
    --surface-badge-severity-high: rgba(180, 83, 9, .13);
    --text-badge-severity-high: #8b3f07;
    --border-badge-severity-high: var(--gravity-high-border);
    --shadow-badge-severity-high: var(--gravity-high-shadow);
    --surface-badge-severity-critical: rgba(179, 38, 47, .12);
    --text-badge-severity-critical: #8f1721;
    --border-badge-severity-critical: var(--gravity-critical-border);
    --shadow-badge-severity-critical: var(--gravity-critical-shadow);
    --surface-badge-status-closed: rgba(8, 127, 91, .12);
    --text-badge-status-closed: #075f46;
    --weight-badge-neutral: 700;
    --tracking-badge-neutral: .02em;
    --text-modal-content: #2b2b2b;
    --text-modal-root: #2b2b2b;
    --text-modal-muted: #6b6b6b;
    --text-form-placeholder: #9a9a9a;
    --surface-form-color: #ffffff;
    --border-form-strong: rgba(196, 30, 58, .25);
    --surface-form-check: #ffffff;
    --border-form-check: rgba(196, 30, 58, .45);
    --surface-form-check-checked: #c41e3a;

    /* O4-C7: alias de compatibilidad legado trasladado desde theme.css.
       Los valores de tema viven aquí para que las hojas de componentes no
       necesiten una rama por nombre de tema. */
    --bg-primary: var(--surface-canvas);
    --bg-secondary: var(--surface-1);
    --card-bg: var(--surface-2);
    --input-bg: #ffffff;
    --surface-elevated: var(--surface-3);
    --input-focus-bg: #ffffff;
    --bs-info-bg-subtle: #f3f5f7;
    --heading-color: #121110;
    --strong-color: #121110;
    --primary-color: #9a1b2e;
    --primary-light: #c0424f;
    --bs-link-hover-color: #74111f;
    --sidebar-link-active-color: #8a1728;
    --accent-blue: #2f4a63;
    --secondary-color: #2f4a63;
    --bs-link-color: #2f4a63;
    --bs-info-text-emphasis: #243b4f;
    --accent-violet: #5f3b63;
    --accent-color: #8a5a17;
    --risk-critical: #9a1b2e;
    --danger-color: #9a1b2e;
    --risk-high: #a34a0c;
    --risk-medium: #8a6a12;
    --risk-low: #0f6b4f;
    --success-color: #0f6b4f;
    --bs-info-border-subtle: #d7dfe6;
    --overlay-soft: rgba(154, 27, 46, .05);
    --overlay-strong: rgba(154, 27, 46, .10);
    --sidebar-link-hover-bg: rgba(26, 23, 20, .045);
    --sidebar-gradient-start: #ffffff;
    --sidebar-gradient-end: #f6f3f0;
    --bs-danger: #9a1b2e;
    --bs-success: #0f6b4f;
    --bs-success-bg-subtle: #eaf3ef;
    --bs-success-border-subtle: #c3ddd1;
    --bs-success-text-emphasis: #0d5c44;
    --warning-color: var(--warning);
    --bg-dark: var(--bg-primary);
    --bg-card: var(--card-bg);
    --bg-card-hover: var(--surface-elevated);
    --bg-surface: var(--bg-secondary);
    --border-color: var(--border-subtle);
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-border-color: var(--border-subtle);
    --bs-primary-rgb: 154, 27, 46;
    --bs-info-rgb: 47, 74, 99;
    --bs-success-rgb: 15, 107, 79;
    --bs-danger-rgb: 154, 27, 46;
    --bs-link-color-rgb: 47, 74, 99;
    --modal-close-filter: sepia(1) saturate(2200%) hue-rotate(330deg) brightness(0.72) contrast(1.2);
    --modal-close-filter-hover: sepia(1) saturate(2600%) hue-rotate(330deg) brightness(0.62) contrast(1.28);

    /* O4-C7: pares claros de las familias restantes de theme.css. */
    --surface-body-background: radial-gradient(ellipse at 10% -12%, rgba(154, 27, 46, .035) 0%, transparent 42%), linear-gradient(180deg, #fcfbfa 0%, #f9f7f5 55%, #f5f2ef 100%);
    --surface-floating-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 245, 245, 0.99) 100%);
    --shadow-floating-panel: 0 6px 16px rgba(191, 31, 31, 0.09);
    --surface-filter-panel: radial-gradient(circle at 8% 0%, rgba(191, 31, 31, 0.08), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 247, 0.94));
    --border-filter-panel: rgba(191, 31, 31, 0.18);
    --surface-filter-meta: rgba(255, 255, 255, 0.72);
    --surface-filter-actions: rgba(255, 255, 255, 0.72);
    --border-filter-meta: rgba(160, 166, 177, 0.18);
    --border-filter-actions: rgba(160, 166, 177, 0.14);
    --surface-filter-control: rgba(255, 255, 255, 0.92);
    --border-filter-control: rgba(191, 31, 31, 0.22);
    --surface-shared-card: #ffffff;
    --shadow-shared-card: var(--shadow-md);
    --surface-shared-modal: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
    --shadow-shared-modal: var(--shadow-md);
    --surface-indicator-critical: rgba(196, 30, 58, 0.12);
    --text-indicator-critical: var(--risk-critical);
    --surface-indicator-high: rgba(217, 119, 6, 0.12);
    --text-indicator-high: var(--risk-high);
    --border-indicator-neutral: rgba(196, 30, 58, 0.15);
    --surface-feedback-toast: rgba(255, 255, 255, 0.96);
    --text-feedback-toast: #191311;
    --border-feedback-toast: #c7aaa3;
    --shadow-feedback-toast: 0 24px 60px rgba(42, 30, 26, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    --border-feedback-success: #0b8a62;
    --shadow-feedback-success: 0 24px 60px rgba(8, 127, 91, 0.18);
    --border-feedback-warning: #b45309;
    --shadow-feedback-warning: 0 24px 60px rgba(180, 83, 9, 0.18);
    --border-feedback-danger: #b3262f;
    --shadow-feedback-danger: 0 24px 60px rgba(179, 38, 47, 0.20);
    --border-feedback-info: #a61f2b;
    --shadow-feedback-info: 0 24px 60px rgba(166, 31, 43, 0.16);
    --surface-modal-form: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
    --border-modal-form: #e3d2cd;
    --shadow-modal-form: 0 18px 44px rgba(71, 35, 28, 0.08), 0 1px 0 rgba(255, 255, 255, 0.85) inset;

    /* Paridad explícita de claves. Los valores claros son propios del tema y
       no deben heredar superficies ni sombras del catálogo oscuro. */
    --border-feature: var(--border-subtle);
    --border-feature-shell: var(--border-subtle);
    --border-status-success: var(--risk-low-line);
    --border-status-warning: var(--risk-medium-line);
    --outline-status-warning: var(--border-warning-attention);
    --shadow-card-soft: var(--shadow-card);
    --shadow-command: inset 0 1px 0 rgba(255, 255, 255, .72);
    --shadow-control: inset 0 1px 0 rgba(255, 255, 255, .74);
    --shadow-dialog: var(--shadow-modal-form);
    --shadow-feature-control: inset 0 1px 0 rgba(255, 255, 255, .88);
    --shadow-modal: var(--shadow-modal-form);
    --shadow-role-pill: inset 0 1px 0 rgba(255, 255, 255, .74);
    --surface-context-backdrop: rgba(255, 252, 249, .45);
    --surface-dialog-backdrop: rgba(42, 30, 26, .40);
    --surface-modal-backdrop: rgba(42, 30, 26, .35);
    --surface-status-warning-active: var(--surface-warning-soft);
    --text-accent-emphasis: var(--text-accent-strong);

    --shadow-surface-soft: 0 14px 30px rgba(88, 40, 31, .08);
    --surface-selection-row: var(--action-primary-soft);
    --border-selection-indicator: #a61f2b;
    --severity-critical-ink: #ffffff;
    --severity-critical-surface: var(--risk-critical);
    --severity-critical-border: var(--risk-critical);
    --severity-high-ink: var(--risk-high-ink);
    --severity-high-surface: var(--risk-high-soft);
    --severity-high-border: var(--risk-high-line);
    --severity-medium-ink: var(--risk-medium-ink);
    --severity-medium-surface: var(--risk-medium-soft);
    --severity-medium-border: var(--risk-medium-line);
    --severity-low-ink: var(--risk-low-ink);
    --severity-low-surface: var(--risk-low-soft);
    --severity-low-border: var(--risk-low-line);
    --surface-notice: color-mix(in srgb, var(--accent-blue) 12%, #ffffff);
    --surface-selection-active: color-mix(in srgb, var(--accent-blue) 14%, #ffffff);
    --surface-result: var(--surface-elevated);
    --surface-summary-feature: linear-gradient(135deg, #ffffff, #f8efec);
    --border-summary-feature: color-mix(in srgb, var(--accent-blue) 28%, var(--border-subtle));
    --shadow-summary-feature: 0 .75rem 1.75rem rgba(71, 35, 28, .1);
    --surface-summary-metric: color-mix(in srgb, var(--card-bg) 92%, var(--accent-blue) 8%);
    --border-summary-metric: var(--border-subtle);
    --surface-disclosure-panel: var(--surface-elevated);
    --surface-neutral-pill: var(--surface-elevated);

    --viz-accent: #a61f2b;
    --viz-accent-secondary: #b98234;
    --viz-danger: #b3262f;
    --viz-warm: #b98234;
    --viz-panel: rgba(255, 255, 255, 0.94);
    --viz-panel-soft: rgba(255, 248, 245, 0.88);
    --viz-line: rgba(166, 31, 43, 0.16);
    --viz-canvas-1: rgba(255, 253, 250, 0.98);
    --viz-canvas-2: rgba(250, 240, 236, 0.96);
    --viz-glow: rgba(166, 31, 43, 0.10);
    --viz-text-muted: #6e5c55;
    --shadow-viz-card: 0 22px 50px rgba(72, 34, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --shadow-viz-toolbar: 0 12px 28px rgba(71, 35, 28, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --shadow-viz-canvas: 0 24px 58px rgba(72, 34, 26, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    --shadow-viz-legend: 0 10px 24px rgba(72, 34, 26, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --shadow-viz-empty: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --surface-viz-empty: radial-gradient(circle at 8% 0%, rgba(15, 111, 143, 0.07), transparent 12rem), linear-gradient(180deg, #fffdfa, #fbf1ed);
    --viz-department-fill: rgba(255, 250, 247, 0.90);
    --viz-department-border: rgba(166, 31, 43, 0.24);
    --viz-department-label: #3C2622;
    --viz-node-border: rgba(255, 255, 255, 0.94);
    --viz-node-text: #201715;
    --viz-node-text-bg: rgba(255, 252, 249, 0.92);
    --viz-node-outline: rgba(255, 255, 255, 0.72);
    --viz-edge-real: rgba(166, 31, 43, 0.64);
    --viz-edge-reference: rgba(15, 111, 143, 0.46);
    --viz-selected: #A61F2B;
    --viz-highlight: #0F6F8F;
    --viz-dim-opacity: 0.18;
    --viz-fallback-bg: rgba(255, 248, 245, 0.76);
    --viz-fallback-text: #241715;
    --viz-severity-critical: #B3262F;
    --viz-severity-high: #B98234;
    --viz-severity-medium: #8A5A00;
    --viz-severity-low: #0F6F8F;
    --viz-tech-account: #0F6F8F;
    --viz-tech-device: #3154C9;
    --viz-tech-application: #B98234;
    --viz-tech-external-alert: #B3262F;
    --viz-tech-external-neutral: #7B8B96;
    --viz-edge-account: rgba(15, 111, 143, 0.58);
    --viz-edge-device: rgba(49, 84, 201, 0.54);
    --viz-edge-application: rgba(185, 130, 52, 0.58);
    --viz-edge-external-alert: rgba(179, 38, 47, 0.62);
    --viz-edge-external-neutral: rgba(123, 139, 150, 0.52);
    --viz-relation-manager: #A61F2B;
    --viz-relation-peer: #0F6F8F;
    --viz-relation-mentor: #B98234;
    --viz-relation-collaboration: #7C3F58;
    --viz-relation-project: #0F6F8F;
    --viz-relation-reporting: #B45B63;
    --viz-relation-internal: #7B8B96;
    --viz-community-1: #A61F2B;
    --viz-community-2: #0F6F8F;
    --viz-community-3: #B98234;
    --viz-community-4: #7C3F58;
    --viz-community-5: #7B8B96;
    --viz-community-6: #B45B63;
    --viz-community-7: #3154C9;
}