/* Paleta Nodal Environment — capa de tokens
 *
 * POR QUÉ EXISTE ESTE ARCHIVO
 *
 * La identidad aprobada de «Nodal Environment — by INSIDE» (V06, 23/09/2026)
 * congela ocho colores y una base oscura carbón `#1F2527`. El resto de la
 * aplicación no se repinta a mano: ya cuelga de una capa de tokens base
 * —`--inside-dark-*` y `--inside-light-*`— y de capas de módulo que derivan de
 * ella. Cambiando la base cambian los doce módulos de una vez.
 *
 * Esta hoja NO trae reglas de componentes: solo tokens. Las hojas barridas el
 * 23/09 consumen los semánticos `--nodal-*` con el valor oscuro de respaldo,
 * así que sin esta hoja la aplicación ya no vuelve al verde de antes: se queda
 * en Nodal oscuro y el tema claro pierde sus tonos.
 *
 * Va escrita a mano y cargada aparte, no en SCSS: el compilado de Sass
 * sobreescribe las hojas escritas a mano, y ya pasó cuatro veces.
 * Se carga de última, después de `inside-command-center-allowlist.css`, que es
 * la que manda sobre la navegación global.
 *
 * LOS OCHO APROBADOS       `#1F2527` `#0C3D3A` `#15706B` `#68C4C1`
 *                          `#A7B4BB` `#D9E0E2` `#F4F7F7` `#FFFFFF`
 * EXCLUIDO                 `#6B767B`
 *
 * Fuente única: REGISTRO_MAESTRO_DECISIONES_APROBADAS.md de la V06. Todo color
 * de esta hoja es uno de los ocho o uno de ellos con transparencia. La única
 * excepción son los tres «derivados del carbón» de abajo: la paleta no trae
 * niveles de elevación y la regla del encargo permite sacarlos del carbón,
 * dejándolo dicho. Ningún otro tono: ni hovers aclarados, ni colores de estado.
 *
 * DE LA DEMO E12.1 (01/10/2026) `#465256` `#EEF3F3`
 * Gustavo dio como referencia de cómo debe verse la demo geométrica E12.1
 * (NODAL_COLORES_DEMO_GEOMETRICA_E12_V01.md): usa estos mismos ocho, con
 * superficies planas, y agrega dos para el tema claro que la paleta no traía:
 * el texto secundario opaco #465256 (8,07:1 sobre blanco, contra 5,39:1 del
 * carbón al 68 %) y la superficie elevada #EEF3F3 de las cabeceras. Cristian
 * decidió tomarlos, y también la niebla como texto del botón principal.
 */

:root {
  /* los ocho aprobados, con su nombre */
  --nodal-carbon: #1f2527;
  --nodal-verde-profundo: #0c3d3a;
  --nodal-teal: #15706b;
  --nodal-teal-claro: #68c4c1;
  --nodal-gris: #a7b4bb;
  --nodal-gris-claro: #d9e0e2;
  --nodal-niebla: #f4f7f7;
  --nodal-blanco: #ffffff;

  /* derivados del carbón, para separar planos en oscuro */
  --nodal-carbon-panel: #262e30;
  --nodal-carbon-elevado: #2d3639;
  --nodal-carbon-borde: #3a4547;

  /* de la demo E12.1, para el tema claro */
  --nodal-gris-oscuro: #465256;
  --nodal-niebla-elevada: #eef3f3;

  /* La tipografía, decidida por Gustavo el 23/09. El registro pide Helvetica,
     pero servirla en la web cuesta licencia, y nombrarla a secas dejaba la
     letra al azar de cada máquina. Arimo es gratis y comparte los anchos de
     Helvetica y Arial: la misma línea ocupa lo mismo en cualquier sistema.
     Helvetica y Arial quedan detrás por si la descarga falla. */
  --nodal-tipografia: "Arimo", Helvetica, Arial, sans-serif;

  /* El hover del acento sobre carbón era un teal aclarado (#8ed3d1), que no
     está en la paleta. Ahora sube a niebla: más luz, y sigue siendo aprobado. */
  --nodal-teal-hover: var(--nodal-niebla);
}

/* ---------------------------------------------------------
   Semánticos · lo que consumen las hojas y los componentes
   Cambian solos con el tema: una regla escrita una sola vez
   sale bien en claro y en oscuro. Oscuro es el de omisión.

   `.nodal-oscuro` y `.nodal-claro` fijan el tema en un
   contenedor aunque el body diga otro; sirven para la galería
   de componentes y para cualquier pieza que viva en el otro
   tema (un panel oscuro dentro de una página clara).

   Estados (ok, info, aviso, error): la lámina 06 los pinta en
   verde, azul, ámbar y rojo, pero el registro maestro solo
   aprueba ocho colores y ninguno es de estado. Se resuelven con
   la paleta y se distinguen por el icono (✓ i ! ×), no por el
   tono: ok en el acento, info en gris, aviso en el verde
   profundo o el gris claro, y error en el de mayor contraste
   del tema (carbón en claro, blanco en oscuro).
   PREGUNTA ABIERTA para Gustavo: si quiere los colores de la
   lámina, se aprueban primero en el registro y se cambian aquí.
   --------------------------------------------------------- */
:root,
body:not(.theme-light),
.nodal-oscuro {
  --nodal-superficie: var(--nodal-carbon);
  --nodal-superficie-panel: var(--nodal-carbon-panel);
  --nodal-superficie-elevada: var(--nodal-carbon-elevado);
  /* La banda del encabezado de una tabla (26/09/2026). La lámina la dibuja
     un poco más clara que las filas en oscuro y gris niebla sobre blanco en
     claro: en claro la elevada es blanca y no alcanza. Dos colores aprobados,
     ninguno nuevo. */
  --nodal-superficie-encabezado: var(--nodal-carbon-elevado);
  /* La pestaña elegida (26/09/2026): la lámina la rellena de acento en oscuro
     y la deja en el plano del panel en claro. El componente lo intentaba con
     .nodal-oscuro, que en la aplicación nadie pone (el tema va por el body). */
  --nodal-pestana-elegida-fondo: var(--nodal-primario);
  --nodal-pestana-elegida-texto: var(--nodal-sobre-primario);
  --nodal-borde: var(--nodal-carbon-borde);
  --nodal-borde-suave: rgba(217, 224, 226, 0.1);
  /* el borde de un campo tiene que verse: gris aprobado al 45 % */
  --nodal-borde-control: rgba(167, 180, 187, 0.45);

  --nodal-texto: var(--nodal-niebla);
  --nodal-texto-2: var(--nodal-gris-claro);
  --nodal-atenuado: var(--nodal-gris);

  --nodal-acento: var(--nodal-teal-claro);
  --nodal-acento-rgb: 104, 196, 193;
  --nodal-acento-hover: var(--nodal-teal-hover);
  --nodal-sobre-acento: var(--nodal-carbon);

  --nodal-primario: var(--nodal-teal);
  /* en oscuro la lámina aclara el primario al pasar el ratón: el más claro
     aprobado es el teal claro, y encima el texto pasa a carbón (7,6:1) */
  --nodal-primario-hover: var(--nodal-teal-claro);
  --nodal-sobre-primario-hover: var(--nodal-carbon);
  --nodal-primario-presionado: var(--nodal-verde-profundo);
  /* la niebla, como en la demo E12.1 (5,47:1 sobre el teal) */
  --nodal-sobre-primario: var(--nodal-niebla);

  --nodal-secundario: var(--nodal-verde-profundo);
  --nodal-sobre-secundario: var(--nodal-blanco);
  /* al pasar el ratón el secundario toma el fondo niebla del terciario, y el
     blanco encima no se leía: el texto pasa a carbón, como el del primario
     (30/09/2026, decidido por Cristian) */
  --nodal-sobre-secundario-hover: var(--nodal-carbon);
  --nodal-terciario: var(--nodal-gris-claro);
  --nodal-terciario-hover: var(--nodal-niebla);
  --nodal-sobre-terciario: var(--nodal-carbon);

  --nodal-deshabilitado: var(--nodal-carbon-borde);
  --nodal-sobre-deshabilitado: var(--nodal-gris);

  --nodal-foco: rgba(104, 196, 193, 0.35);
  --nodal-seleccion: rgba(104, 196, 193, 0.14);

  --nodal-estado-ok: var(--nodal-teal-claro);
  --nodal-estado-info: var(--nodal-gris);
  /* lo que va encima de un relleno de info (la «i» del aviso): carbón sobre el
     gris en oscuro; en claro, blanco sobre el carbón al 68 % */
  --nodal-sobre-estado-info: var(--nodal-carbon);
  --nodal-estado-aviso: var(--nodal-gris-claro);
  --nodal-estado-error: var(--nodal-blanco);
  --nodal-texto-error: var(--nodal-blanco);

  /* Los avisos (grupo 13) con los colores de la lámina 4B, tal cual: Cristian,
     02/10/2026 («las imágenes de Gustavo tenían colores, debe quedar tal
     cual»). Salen del registro de ocho y Gustavo tiene que confirmarlos.
     Tomados de la imagen por moda de píxeles: ícono, fondo y borde de cada
     barra. El texto en oscuro es el del tema. Desde el 03/10/2026 también
     los usan las insignias de estado (grupo 6) y el campo con error (grupo
     2), opción A de Cristian; el resto (el botón de peligro, la acción de
     peligro) sigue con --nodal-estado-* y --nodal-texto-error. */
  --nodal-aviso-ok-icono: #00bc44;
  --nodal-aviso-ok-fondo: #012f32;
  --nodal-aviso-ok-borde: #3eafb0;
  --nodal-aviso-ok-texto: var(--nodal-texto);
  --nodal-aviso-ok-glifo: var(--nodal-blanco);
  --nodal-aviso-aviso-icono: #fcc004;
  --nodal-aviso-aviso-fondo: #112328;
  --nodal-aviso-aviso-borde: #3f5257;
  --nodal-aviso-aviso-texto: var(--nodal-texto);
  --nodal-aviso-aviso-glifo: var(--nodal-carbon);
  --nodal-aviso-error-icono: #f42424;
  --nodal-aviso-error-fondo: #2a1c1f;
  --nodal-aviso-error-borde: #ea5a51;
  --nodal-aviso-error-texto: var(--nodal-texto);
  --nodal-aviso-error-glifo: var(--nodal-blanco);
  --nodal-aviso-info-icono: #0084f8;
  --nodal-aviso-info-fondo: #022446;
  --nodal-aviso-info-borde: #469bee;
  --nodal-aviso-info-texto: var(--nodal-texto);
  --nodal-aviso-info-glifo: var(--nodal-blanco);

  /* Ciclo de vida · lo que pintan las barras del Gantt, las etiquetas de
     estado y las filas del Planificador. Criterio acordado con Cristian el
     24/09: el color dice en qué punto va el trabajo, no cuánto urge — la
     paleta no tiene rojo ni ámbar con que decir «urgente», así que eso va por
     glifo y peso. La escala es de cuánto salta sobre el fondo: lo que está
     vivo salta más, lo detenido se apaga. Por eso los cuatro cambian con el
     tema y no son un hex fijo: sobre carbón resalta lo claro, sobre niebla
     resalta lo oscuro, y al revés se leería invertido. */
  --nodal-ciclo-en-curso: var(--nodal-teal-claro);
  --nodal-ciclo-terminado: var(--nodal-teal);
  --nodal-ciclo-sin-empezar: var(--nodal-gris);
  --nodal-ciclo-detenido: var(--nodal-verde-profundo);
}

body.theme-light,
.nodal-claro {
  --nodal-superficie: var(--nodal-niebla);
  --nodal-superficie-panel: var(--nodal-blanco);
  --nodal-superficie-elevada: var(--nodal-blanco);
  /* la superficie elevada de la demo E12.1 (01/10/2026) */
  --nodal-superficie-encabezado: var(--nodal-niebla-elevada);
  --nodal-pestana-elegida-fondo: var(--nodal-superficie-panel);
  --nodal-pestana-elegida-texto: var(--nodal-texto);
  --nodal-borde: var(--nodal-gris-claro);
  --nodal-borde-suave: rgba(31, 37, 39, 0.08);
  /* sobre blanco, el gris aprobado es lo más claro que todavía se ve */
  --nodal-borde-control: var(--nodal-gris);

  --nodal-texto: var(--nodal-carbon);
  --nodal-texto-2: rgba(31, 37, 39, 0.8);
  /* el gris aprobado no llega a 4,5 sobre blanco. Hasta el 01/10/2026 era el
     carbón al 68 % (5,4:1 sobre blanco, 5,2:1 sobre niebla); desde entonces, el
     secundario opaco de la demo E12.1: 8,07:1 sobre blanco, 7,49:1 sobre
     niebla y 7,21:1 sobre la superficie elevada. */
  --nodal-atenuado: var(--nodal-gris-oscuro);

  --nodal-acento: var(--nodal-teal);
  --nodal-acento-rgb: 21, 112, 107;
  --nodal-acento-hover: var(--nodal-verde-profundo);
  --nodal-sobre-acento: var(--nodal-blanco);

  --nodal-primario: var(--nodal-teal);
  --nodal-primario-hover: var(--nodal-verde-profundo);
  --nodal-sobre-primario-hover: var(--nodal-niebla);
  --nodal-primario-presionado: var(--nodal-verde-profundo);
  /* la niebla, como en la demo E12.1 (5,47:1 sobre el teal) */
  --nodal-sobre-primario: var(--nodal-niebla);

  --nodal-secundario: var(--nodal-blanco);
  --nodal-sobre-secundario: var(--nodal-teal);
  /* el teal sobre el gris claro del hover daba 4,41:1, bajo el 4,5 de la regla
     11: verde profundo, ~9:1 (30/09/2026, decidido por Cristian) */
  --nodal-sobre-secundario-hover: var(--nodal-verde-profundo);
  --nodal-terciario: var(--nodal-niebla);
  --nodal-terciario-hover: var(--nodal-gris-claro);
  --nodal-sobre-terciario: var(--nodal-carbon);

  --nodal-deshabilitado: var(--nodal-gris-claro);
  --nodal-sobre-deshabilitado: rgba(31, 37, 39, 0.45);

  --nodal-foco: rgba(21, 112, 107, 0.25);
  --nodal-seleccion: rgba(21, 112, 107, 0.08);

  --nodal-estado-ok: var(--nodal-teal);
  /* el gris aprobado daba 2,12:1 sobre blanco (el glifo «i» de la insignia):
     en claro, info toma el texto atenuado y sigue siendo neutro (30/09/2026,
     decidido por Cristian); desde el 01/10 ese atenuado es #465256, ~8:1 */
  --nodal-estado-info: var(--nodal-atenuado);
  --nodal-sobre-estado-info: var(--nodal-blanco);
  --nodal-estado-aviso: var(--nodal-verde-profundo);
  --nodal-estado-error: var(--nodal-carbon);
  --nodal-texto-error: var(--nodal-carbon);

  /* Los avisos con los colores de la lámina, en claro (02/10/2026). En la
     lámina el texto de error va rojo y el de info azul: el mismo tono,
     oscurecido lo justo para llegar a 4,5:1 sobre su fondo (#C90306 4,61:1;
     #0762D6 4,52:1). Ok y aviso, con el texto del tema. */
  --nodal-aviso-ok-icono: #00a434;
  --nodal-aviso-ok-fondo: #d1fbe7;
  --nodal-aviso-ok-borde: #a2e8c8;
  --nodal-aviso-ok-texto: var(--nodal-texto);
  --nodal-aviso-ok-glifo: var(--nodal-blanco);
  --nodal-aviso-aviso-icono: #feb909;
  --nodal-aviso-aviso-fondo: #fff2b2;
  --nodal-aviso-aviso-borde: #fde788;
  --nodal-aviso-aviso-texto: var(--nodal-texto);
  --nodal-aviso-aviso-glifo: var(--nodal-carbon);
  --nodal-aviso-error-icono: #fc0408;
  --nodal-aviso-error-fondo: #fed9d9;
  --nodal-aviso-error-borde: #f9b2ad;
  --nodal-aviso-error-texto: #c90306;
  --nodal-aviso-error-glifo: var(--nodal-blanco);
  --nodal-aviso-info-icono: #0870f4;
  --nodal-aviso-info-fondo: #cfeafd;
  --nodal-aviso-info-borde: #a8d9fa;
  --nodal-aviso-info-texto: #0762d6;
  --nodal-aviso-info-glifo: var(--nodal-blanco);

  /* En claro la escala se da vuelta: sobre niebla y blanco, lo que salta es
     lo oscuro. «En curso» toma el teal, que es el que más contrasta, y lo
     detenido se va al gris claro, que casi se funde con el fondo. */
  --nodal-ciclo-en-curso: var(--nodal-teal);
  --nodal-ciclo-terminado: var(--nodal-verde-profundo);
  --nodal-ciclo-sin-empezar: var(--nodal-gris);
  --nodal-ciclo-detenido: var(--nodal-gris-claro);
}

/* ---------------------------------------------------------
   Tema oscuro · la base carbón
   Mismo selector que `SCSS/styles.scss`, y esta hoja carga después.
   --------------------------------------------------------- */
body.inside-app-body:not(.theme-light) {
  --inside-dark-bg: var(--nodal-carbon);
  --inside-dark-panel: var(--nodal-carbon-panel);
  --inside-dark-raised: var(--nodal-carbon-elevado);
  --inside-dark-border: var(--nodal-carbon-borde);
  --inside-dark-border-soft: rgba(217, 224, 226, 0.1);
  --inside-dark-text: var(--nodal-niebla);
  --inside-dark-muted: var(--nodal-gris);
  --inside-dark-accent: var(--nodal-teal-claro);
  --inside-dark-accent-hover: var(--nodal-teal-hover);
}

/* ---------------------------------------------------------
   Tema claro · niebla y blanco, con el teal profundo de acento
   El claro de antes era crema tibio; Nodal lo quiere frío.
   --------------------------------------------------------- */
body.theme-light {
  --inside-light-surface: var(--nodal-blanco);
  --inside-light-surface-2: var(--nodal-niebla);
  --inside-light-surface-strong: var(--nodal-blanco);

  --inside-light-border: rgba(31, 37, 39, 0.12);
  --inside-light-border-strong: rgba(21, 112, 107, 0.26);

  --inside-light-title: var(--nodal-carbon);
  --inside-light-text: rgba(31, 37, 39, 0.8);
  /* el gris aprobado no llega a contraste para texto sobre blanco:
     queda para bordes e iconos, y el texto atenuado usa el secundario opaco de
     la demo E12.1 (8,07:1; antes el carbón al 68 %, 5,4:1) */
  --inside-light-muted: var(--nodal-gris-oscuro);

  --inside-light-accent: var(--nodal-teal);
  --inside-light-accent-2: var(--nodal-verde-profundo);
  --inside-light-accent-soft: rgba(21, 112, 107, 0.1);
  --inside-light-accent-soft-2: rgba(21, 112, 107, 0.16);
}

/* Presupuestos: sus tokens `--pres-*` se enchufan a los semánticos de arriba
   desde `presupuestos-tema.css`; aquí ya no se pisan. */