:root {
  /* ── Rampa de superficies (modo oscuro) ───────────────────────────────
     El fondo de página (--bg) se mantiene profundo; las superficies
     (--bg2 tarjetas/tablas, --bg3 hover/anidado, --bg4 controles/activos)
     se elevan en pasos tonales claramente perceptibles para que cada
     tarjeta y tabla "flote" sobre el fondo sin depender de sombras. El
     salto --bg → --bg2 da un contraste ≈1.26 (antes ≈1.10, demasiado
     plano). La profundidad se expresa por tono, no por sombra. */
  --bg: #0c1017;
  --bg2: #1c2634;
  --bg3: #2a3646;
  --bg4: #3b4a5e;
  /* Superficie blanca fija (igual en los dos temas) y su texto. */
  --surface-white: #ffffff;
  --on-surface-white: #172033;
  /* Bordes reforzados: son el trazo que delimita cada superficie sobre el
     fondo y las divisiones internas de tabla. A opacidades más altas los
     bordes de tarjeta y las líneas de fila se leen sin endurecer la UI. */
  --border: rgba(211,222,240,0.14);
  --border2: rgba(211,222,240,0.26);
  --text: #f1f4f8;
  --text2: #aab5c5;
  --text3: #77859a;
  --accent: #5B8AF0;
  --accent2: #3d6fd4;
  --accent-soft: rgba(91,138,240,0.12);
  --green: #35b779;
  --green-soft: rgba(53,183,121,0.13);
  --amber: #d39224;
  --amber-soft: rgba(211,146,36,0.14);
  --red: #d45a5a;
  --red-soft: rgba(212,90,90,0.13);
  --pink: #8b6ee6;
  --pink-soft: rgba(139,110,230,0.13);
  --teal: #2c9bae;
  --teal-soft: rgba(44,155,174,0.13);
  --granate: #821a29;
  --granate-hover: #962031;
  --granate-border: #6a1421;
  --granate-border-hover: #7b1927;
  --granate-light-text: #ff8c9b;
  --granate-light-hover: #ffa4b1;
  /* Aviso (semáforo ámbar, notas de calidad, nivel/criticidad media, datos
     pendientes): tono propio, amarillo, para que el ámbar quede reservado a
     costes. Se distingue del ámbar por luminosidad (más claro en oscuro, más
     oscuro en claro) y va siempre con texto o icono, nunca solo color.
     --warning-ink es la tinta legible sobre --warning. */
  --warning: #e0bb3c;
  --warning-soft: rgba(224,187,60,0.15);
  --warning-ink: #1b2330;
  /* Texto e iconos sobre superficies de color (botón primario, badges
     rellenos, cabeceras de columna Kanban…). Igual en los dos temas. */
  --on-accent: #ffffff;
  /* Anillo de foco / selección suave derivado del acento del tema. */
  --accent-ring: color-mix(in srgb, var(--accent) 35%, transparent);
  /* Tinta de sombras y velos (backdrop de modales). */
  --shadow-color: #000000;
  --semantic-delivery: var(--accent);
  --semantic-value: var(--green);
  --semantic-cost: var(--amber);
  --semantic-risk: var(--red);
  --semantic-knowledge: var(--pink);
  --semantic-compliance: var(--teal);
  /* Neutro para categorías de gráfico sin color semántico propio (p. ej. la
     6ª+ categoría de la dona de costes). Se redefine en tema claro. */
  --chart-neutral: #a4a3ad;
  --capex: #f28c28;
  --capex-soft: rgba(242,140,40,0.14);
  /* OPEX: magenta propio (antes compartía el violeta de «conocimiento»). */
  --opex: #d06aae;
  --opex-soft: rgba(208,106,174,0.14);
  /* Series de ejecución presupuestaria (Hub Presupuestario): pasos de ámbar
     (comprometido = coste) y verde (recepcionado = valor) elegidos por tema y
     validados sobre --bg2 (banda de luminosidad, croma y separación para
     daltonismo ΔE ≥ 8). El presupuesto se dibuja como barra hueca en --text2. */
  --chart-comprometido: #bd8320;
  --chart-recepcionado: #2fa46c;
  /* Tramos de pedido de la distribución mensual (ficha de presupuesto del Hub
     Presupuestario): escala de naranjas alrededor de --chart-comprometido para
     distinguir los pedidos de un mismo mes, apilados en la misma barra. */
  --chart-pedido-1: #bd8320;
  --chart-pedido-2: #e0a24e;
  --chart-pedido-3: #9a5f12;
  --chart-pedido-4: #efc07e;
  --chart-pedido-5: #7a4a0c;
  /* Estrella de favorito: amarillo dorado, semántica propia (no reutiliza ámbar
     de costes). Igual en ambos temas — una estrella se lee dorada siempre. */
  --favorite: #f0b400;
  --favorite-soft: rgba(240,180,0,0.16);
  /* Paleta de 12 pasteles para las VISTAS personalizadas de iniciativas
     (etiquetas elegidas por el usuario, sin carga semántica: son marcadores
     decorativos de vistas, no estados/badges). Tonos suaves legibles sobre las
     superficies oscuras; se redefinen algo más saturados en tema claro. */
  --view-1: #e88ea0;  --view-2: #eaa47f;  --view-3: #e6c877;  --view-4: #bcd97e;
  --view-5: #8fd6a4;  --view-6: #7fd3cb;  --view-7: #84c2e8;  --view-8: #8ea6e8;
  --view-9: #b199e6;  --view-10: #d193dd; --view-11: #e690bd; --view-12: #aab4c2;
  /* Hub Presupuestario: tono pastel fijo por empresa (--empresa-N) y por año
     académico (--ano-N), como CAPEX/OPEX. Salen de la paleta de pasteles y se
     redeclaran en tema claro para tomar su variante. Evitan los tonos con
     significado (capex, opex, rojo riesgo, ámbar coste). */
  --empresa-1: var(--view-7);  --empresa-2: var(--view-12); --empresa-3: var(--view-5);  --empresa-4: var(--view-6);
  --empresa-5: var(--view-1);  --empresa-6: var(--view-4);  --empresa-7: var(--view-10); --empresa-8: var(--view-8);
  --ano-1: var(--view-6);  --ano-2: var(--view-11); --ano-3: var(--view-9);
  --ano-4: var(--view-3);  --ano-5: var(--view-2);  --ano-6: var(--view-4);
  /* Etiquetas decorativas sin significado semántico (salen de los pasteles):
     ámbito de un impacto, área del grupo en el dashboard y apartados del Intake. */
  --scope-estudiante: var(--view-5); --scope-docente: var(--view-7);
  --scope-operaciones: var(--view-2); --scope-empleado: var(--view-9);
  --area-1: var(--view-7); --area-2: var(--view-6); --area-3: var(--view-5);
  --area-4: var(--view-11); --area-5: var(--view-3); --area-6: var(--view-1);
  /* Portfolio Data: los 7 estados oficiales del ciclo de vida (badges,
     columnas Kanban, barras del cronograma y gráficos). Salen de la paleta de
     pasteles y se redeclaran en tema claro para tomar su variante; la tinta
     --pd-estado-ink se lee sobre cualquiera de ellos en ambos temas. */
  --pd-estado-1: var(--view-12); --pd-estado-2: var(--view-7); --pd-estado-3: var(--view-9);
  --pd-estado-4: var(--view-3);  --pd-estado-5: var(--view-10); --pd-estado-6: var(--view-1);
  --pd-estado-7: var(--view-5);
  --pd-estado-ink: #1b2330;
  /* Fila cabecera de grupo en tablas agrupadas: azul pastel muy sutil. */
  --group-row-bg: color-mix(in srgb, var(--accent) 12%, var(--bg2));
  /* Indicador de entorno de datos Test (Cosmos): tinte de la barra superior.
     Semántica propia (no reutiliza el ámbar de costes). Dark: naranja cálido
     profundo (texto claro legible). Light se redefine más abajo en pastel. */
  --cosmos-test-bar: #6b431d;
  --logo-gradient-start: #5B8AF0;
  --logo-gradient-end: #8b5cf6;
  /* Degradado del favicon (cian → azul profundo). Reservado para el CTA
     principal "Crear iniciativa", que hereda la identidad del icono de la app.
     El extremo claro arranca en un cian nítido (no casi-blanco) para que el
     botón mantenga bordes definidos sobre el fondo claro del menú. Constante
     en ambos temas, igual que el favicon. */
  --favicon-gradient: linear-gradient(140deg, #22C4F0 0%, #0A78DC 55%, #0A50A6 100%);
  --favicon-gradient-hover: linear-gradient(140deg, #3AD1F7 0%, #1388EC 55%, #0A5DC0 100%);
  /* Resplandor del CTA con el degradado del favicon. */
  --favicon-glow: rgba(2,133,233,0.32);
  /* Pantalla de carga (esfera de marca): fondo nocturno y aro teal propios de
     la identidad de Digital Core, iguales en los dos temas. */
  --intro-bg-1: #15203f;
  --intro-bg-2: #0b1020;
  --intro-bg-3: #05070f;
  --intro-teal: #00c4a7;
  /* Tareas (Portfolio IA y Portfolio Data): estado de la tarjeta/fila
     (--task-st-* relleno, *-ink tinta), bloques de columnas de la lista, tinte
     de cabecera del modal por tipo y degradados de progreso. */
  --task-st-pend: #a8b2c1;  --task-st-pend-ink: #243040;
  --task-st-prog: #6ea1ee;  --task-st-prog-ink: #0e2c53;
  --task-st-done: #4ac088;  --task-st-done-ink: #0b3a24;
  --task-st-block: #df8585; --task-st-block-ink: #5a1c1c;
  --task-group-info: #5a6478;  --task-group-people: #57706e;
  --task-group-dates: #726a5a; --task-group-effort: #6a5c72;
  --task-tint-epic: #3b2168; --task-tint-tarea: #1c3a63; --task-tint-hito: #6b4610;
  --task-epic: var(--pink); --task-tarea: var(--accent); --task-hito: var(--amber); --task-clave: var(--accent);
  --progress-full-gradient: linear-gradient(140deg, #3fd08e 0%, #22a86b 55%, #178a55 100%);
  --progress-full-gradient-h: linear-gradient(90deg, #3fd08e 0%, #22a86b 55%, #178a55 100%);
  --favicon-gradient-h: linear-gradient(90deg, #22C4F0 0%, #0A78DC 55%, #0A50A6 100%);
  /* Diagrama del modelo de datos (Portfolio IA): tipo de tabla y tipo de
     columna (clave primaria, lookup, calculada). dataModel.js los lee por
     getComputedStyle para pintar el SVG. */
  --dm-hechos: #f59e0b; --dm-relacional: #6366f1; --dm-catalogo: #10b981; --dm-operacional: #3b82f6;
  --dm-pk: #f59e0b; --dm-lk: #818cf8; --dm-calc: #34d399;
  --dm-pk-text: #fbbf24; --dm-lk-text: #a5b4fc; --dm-calc-text: #6ee7b7; --dm-col-text: #f3f4f6;
  --dm-type-base: #9ca3af; --dm-body: #131722; --dm-separator: #1e2340; --dm-shadow: rgba(0,0,0,0.40);
  --dm-header-text: #ffffff;
  /* Portfolio IA · estados del ciclo de vida (ESTADO_COLOR en config.js). */
  --ia-estado-1: #98979f; --ia-estado-2: #f0eff2; --ia-estado-3: #5b8af0; --ia-estado-4: #8b6ee6;
  --ia-estado-5: #ffd24a; --ia-estado-6: #35b779; --ia-estado-7: #d45a5a; --ia-estado-8: #e47777;
  /* Tinta legible sobre un color de estado claro u oscuro (stepper). */
  --ink-on-light: #07130d; --ink-on-dark: #f7f4ff;
  /* Mapa de prioridad del dashboard (criticidad|complejidad): relleno y borde. */
  --prio-bb: rgba(134,211,170,0.72); --prio-bb-border: rgba(75,166,119,0.95);
  --prio-bm: rgba(129,204,205,0.70); --prio-bm-border: rgba(73,154,162,0.95);
  --prio-ba: rgba(147,177,238,0.68); --prio-ba-border: rgba(96,130,211,0.95);
  --prio-mb: rgba(188,214,126,0.72); --prio-mb-border: rgba(139,169,72,0.95);
  --prio-mm: rgba(237,196,115,0.72); --prio-mm-border: rgba(196,145,55,0.95);
  --prio-ma: rgba(238,171,130,0.72); --prio-ma-border: rgba(204,116,68,0.95);
  --prio-ab: rgba(236,166,150,0.72); --prio-ab-border: rgba(202,103,86,0.95);
  --prio-am: rgba(232,145,145,0.72); --prio-am-border: rgba(196,84,88,0.95);
  --prio-aa: rgba(214,124,150,0.74); --prio-aa-border: rgba(171,67,101,0.95);
  --chart-shadow: rgba(0,0,0,0.22);
  /* Color identificativo de cada iniciativa en las vistas de tareas y línea
     de separación de iniciativa en el Excel de cronograma. */
  --ini-1: #6366f1; --ini-2: #0d9488; --ini-3: #d97706; --ini-4: #db2777;
  --ini-5: #0ea5e9; --ini-6: #65a30d; --ini-7: #9333ea; --ini-8: #0891b2;
  --task-line: #3c4658;
  /* Destello del icono de Portia. */
  --portia-spark: #9ed4ff;
  /* Shadow vocabulary (see DESIGN.md §4). Recurring resting/response shadows
     live here so the same elevation reads identically everywhere. */
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.18);          /* dropdowns, popovers, menus */
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.2);    /* clickable card hover lift */
  --shadow-card-active: 0 10px 24px rgba(0,0,0,0.12); /* active card drop (paired with semantic ring) */
  /* Una única curva para superficies y controles. Las formas circulares y
     cápsulas se reservan para avatares, iconos y etiquetas compactas. */
  --radius: 12px;
  --radius-lg: 12px;
  --radius-sm: 12px;
  /* Escala de radios para controles pequeños y cápsulas. */
  --radius-xs: 6px;
  --radius-pill: 999px;
  /* Escala de espaciado (base 4 px) y alturas de control comunes: todos los
     botones, selects, buscadores y botones de icono miden una de estas. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --control-h-sm: 28px;
  --control-h: 32px;
  --control-h-lg: 40px;
  --icon-size: 16px;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --sidebar-w: 220px;
  --header-h: 60px;
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --transition-fast: 120ms var(--ease-out);
  --transition: 180ms var(--ease-out);
}

:root[data-theme="light"],
body[data-theme="light"] {
  --bg: #f5f7fb;
  --bg2: #fcfdff;
  --bg3: #f0f3f8;
  --bg4: #e5eaf2;
  --border: rgba(28,38,55,0.10);
  --border2: rgba(28,38,55,0.18);
  --text: #172033;
  --text2: #617087;
  --text3: #95a0af;
  --accent: #3769da;
  --accent2: #2854b9;
  --green: #218a5a;
  --amber: #ad7118;
  --red: #bd4a4a;
  --pink: #7058c7;
  --teal: #1f8294;
  --capex: #c76f17;
  --opex: #a8488a;
  --chart-comprometido: #c0801c;
  --chart-recepcionado: #1d7a50;
  --chart-pedido-1: #c0801c;
  --chart-pedido-2: #dd9f45;
  --chart-pedido-3: #94570f;
  --chart-pedido-4: #ecbd78;
  --chart-pedido-5: #6e4209;
  --capex-soft: rgba(199,111,23,0.14);
  --opex-soft: rgba(168,72,138,0.13);
  --accent-soft: rgba(55,105,218,0.11);
  --green-soft: rgba(33,138,90,0.12);
  --amber-soft: rgba(173,113,24,0.14);
  --red-soft: rgba(189,74,74,0.12);
  --pink-soft: rgba(112,88,199,0.13);
  --teal-soft: rgba(31,130,148,0.12);
  --warning: #8a6d00;
  --warning-soft: rgba(176,140,0,0.14);
  --warning-ink: #ffffff;
  --chart-neutral: #64748b;
  --shadow-pop: 0 8px 24px rgba(20,35,60,0.16);
  --shadow-card-hover: 0 4px 16px rgba(20,35,60,0.16);
  --shadow-card-active: 0 10px 24px rgba(20,35,60,0.10);
  /* Light: naranja pastel para la barra en entorno Test (texto oscuro). */
  --cosmos-test-bar: #ffdcb0;
  /* Pasteles de vistas: algo más saturados para leerse sobre fondo claro. */
  --view-1: #e07b90;  --view-2: #e0925f;  --view-3: #d6ab4b;  --view-4: #9cc457;
  --view-5: #5fc088;  --view-6: #3fb8ad;  --view-7: #5aa9dc;  --view-8: #6a86dc;
  --view-9: #8f74d6;  --view-10: #b45db6; --view-11: #d96aa0; --view-12: #8593a5;
  /* Hub Presupuestario: tono pastel fijo por empresa (--empresa-N) y por año
     académico (--ano-N), como CAPEX/OPEX. Salen de la paleta de pasteles y se
     redeclaran en tema claro para tomar su variante. Evitan los tonos con
     significado (capex, opex, rojo riesgo, ámbar coste). */
  --empresa-1: var(--view-7);  --empresa-2: var(--view-12); --empresa-3: var(--view-5);  --empresa-4: var(--view-6);
  --empresa-5: var(--view-1);  --empresa-6: var(--view-4);  --empresa-7: var(--view-10); --empresa-8: var(--view-8);
  --ano-1: var(--view-6);  --ano-2: var(--view-11); --ano-3: var(--view-9);
  --ano-4: var(--view-3);  --ano-5: var(--view-2);  --ano-6: var(--view-4);
  /* Portfolio Data: estados con la variante clara de los pasteles. */
  --pd-estado-1: var(--view-12); --pd-estado-2: var(--view-7); --pd-estado-3: var(--view-9);
  --pd-estado-4: var(--view-3);  --pd-estado-5: var(--view-10); --pd-estado-6: var(--view-1);
  --pd-estado-7: var(--view-5);
  /* Fila cabecera de grupo en tablas agrupadas: azul pastel muy sutil. */
  --group-row-bg: color-mix(in srgb, var(--accent) 8%, var(--bg2));
  --dm-hechos: #d97706; --dm-relacional: #4f46e5; --dm-catalogo: #059669; --dm-operacional: #2563eb;
  --dm-pk: #b45309; --dm-lk: #4338ca; --dm-calc: #047857;
  --dm-pk-text: #92400e; --dm-lk-text: #3730a3; --dm-calc-text: #065f46; --dm-col-text: #1e293b;
  --dm-type-base: #64748b; --dm-body: #ffffff; --dm-separator: rgba(15,23,42,0.06); --dm-shadow: rgba(15,23,42,0.08);
  --dm-header-text: #ffffff;
  --ia-estado-1: #718098; --ia-estado-2: #172033; --ia-estado-3: #3769da; --ia-estado-4: #7058c7;
  --ia-estado-5: #bf9000; --ia-estado-6: #218a5a; --ia-estado-7: #bd4a4a; --ia-estado-8: #8b1a1a;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }