/* ============================================================================
   Tema QHOTSPOT — identidad QORVEX

   Manda el Manual de Identidad Visual de QORVEX S.A.S. v1.0 (23 sep 2026),
   tomado de QCONTRACTUAL (`Gestion_informes`), que es su implementación de
   referencia. Los tres colores del manual:

     Obsidian Core  #050B14  fondo primario (texto blanco: 19,8:1)
     Cyan Vector    #00F2FE  el vector de la «Q»: foco y acción principal
     Cobalt Deep    #0EA5E9  la escala de interfaz gira alrededor de él

   CAMBIO DE RUMBO (1 oct 2026)
   ----------------------------
   Hasta esta fecha este archivo era el tema institucional de INNOLAB (azul
   Jamundí), compartido con el Sistema de Gestión del Riesgo. Por decisión de
   Andrés se adopta QORVEX en las dos caras, panel y portal. Lo anterior queda
   en el historial, no en el código.

   La Alcaldía de Jamundí es el CLIENTE, no el proveedor. Por eso el cromo pasa
   a QORVEX pero el contenido configurable del portal —pie, colores por router—
   sigue siendo del operador: ver `specs/002-identidad-visual-qorvex/research.md`.

   QCONTRACTUAL es SvelteKit + Tailwind 4; esto es CSS a mano sin paso de
   construcción. Los componentes NO se copian: se reexpresan (principio VII).

   EL OSCURO ES EL VALOR POR OMISIÓN
   ---------------------------------
   Va en `:root`, sin consulta de medios. Antes era al contrario y hacía falta
   un script en `index.html` para evitar el destello blanco al recargar en
   oscuro. Ahora el caso frecuente ya no depende de que JavaScript llegue a
   tiempo; el script solo cubre la elección explícita.

   El tema claro REDEFINE LOS TOKENS, no las reglas: las ~1500 líneas de
   `shell.css` no se enteran de que hay dos temas. Por eso ninguna otra hoja
   puede contener un color — un color literal es un píxel que no se enterará.

   Los contrastes de los comentarios están calculados, no estimados. La tabla
   completa está en `specs/002-identidad-visual-qorvex/data-model.md`.
   ============================================================================ */

:root {
	color-scheme: dark;

	/* ── Los tres colores del manual, por su nombre ───────────────────── */
	--color-obsidiana: #050b14;
	--color-vector: #00f2fe;
	--color-cobalto: #0ea5e9;

	/* ── Marca ─────────────────────────────────────────────────────────
	 * `--color-primary` es el color de TEXTO y BORDE de marca; el RELLENO de
	 * los botones es otro token. No son lo mismo y confundirlos es el error
	 * clásico: Cobalt Deep con texto blanco de 12 px da 2,8:1, y el manual
	 * exige AA. El relleno es la variante oscura #0369A1, que da 5,9:1.
	 */
	--color-primary: #38bdf8; /* texto de marca sobre oscuro: 11,8:1 */
	--color-primary-fuerte: #0ea5e9; /* estado activo */
	--color-primary-dark: #0ea5e9; /* nombre heredado; = fuerte */
	--color-primary-light: #7dd3fc;
	--color-primary-deep: #050b14; /* fondo de la pantalla de acceso */
	--relleno-primary: #0369a1; /* relleno de botón, 5,9:1 con blanco */
	--relleno-primary-hover: #075985;
	--color-sobre-relleno: #ffffff; /* texto encima del relleno */
	--color-sobre-vector: #050b14; /* texto encima de Cyan: 14,2:1 */

	/* Acción principal: degradado Cyan→Cobalt con texto Obsidian. Una por
	 * vista, y es el único sitio donde hay brillo. */
	--gradient-brand: linear-gradient(135deg, #00f2fe 0%, #0ea5e9 100%);

	/* `--color-highlight` señala el elemento activo del menú. Era el amarillo
	 * dorado de Jamundí; ahora es el Cyan de la «Q». Lo que NO cambia es el
	 * mecanismo: una barra, no solo un cambio de fondo. El color por sí solo
	 * no basta para quien no lo distingue. */
	--color-highlight: var(--color-vector);
	--color-highlight-dark: var(--color-cobalto);

	/* Tokens heredados del tema anterior. Se mantienen los NOMBRES porque los
	 * usan cientos de líneas, y se reencuadran en la paleta nueva. Renombrarlos
	 * tocaría medio proyecto sin mover un píxel. */
	--color-secondary: var(--color-vector);
	--color-secondary-light: #7dd3fc;
	--color-secondary-dark: var(--color-cobalto);
	--color-accent: var(--color-cobalto);
	--color-accent-dark: #0369a1;

	/* ── Superficies ───────────────────────────────────────────────────
	 * Tres niveles: la página en Obsidian Core, la tarjeta un escalón por
	 * encima, y el #0B1528 que el manual usa en los encabezados de tabla.
	 */
	--color-bg: #050b14;
	--color-surface: #0f1b30;
	--color-surface-alt: #0b1528;

	/* ── Texto ─────────────────────────────────────────────────────────── */
	--color-text: #f1f5f9; /* 18,0:1 sobre el fondo */
	--color-muted: #94a3b8; /* 7,7:1 — mínimo legible del manual */

	/* OJO: 4,15:1, que es AA solo para texto GRANDE. Por eso tiene token
	 * propio y no es `--color-muted`. Está reservado a controles
	 * deshabilitados y a adornos. NINGÚN texto de contenido lo usa. Es la
	 * única excepción de la paleta; no la amplíes. */
	--color-apagado: #64748b;

	--color-border: rgb(255 255 255 / 10%);
	--color-border-strong: rgb(255 255 255 / 18%);

	/* ── Estado ────────────────────────────────────────────────────────
	 * esmeralda en línea · brand en curso · ámbar pendiente · rosa caído.
	 * Comunican, no son marca: por eso no se tocaron al cambiar de identidad.
	 *
	 * Los fondos y bordes salen del tono con `color-mix()` al 10 % y al 20 %,
	 * como manda `.interface-design/system.md`: así un cambio de tono arrastra
	 * su fondo y su borde, y no se quedan desparejados.
	 */
	--color-success: #34d399; /* 10,3:1 */
	--color-warning: #fbbf24; /* 11,8:1 */
	--color-danger: #fb7185; /* 7,3:1 */
	--color-danger-fuerte: #e11d48; /* relleno de botón de peligro */
	--color-info: #38bdf8; /* 11,8:1 */

	--color-success-bg: color-mix(in srgb, var(--color-success) 10%, transparent);
	--color-warning-bg: color-mix(in srgb, var(--color-warning) 10%, transparent);
	--color-danger-bg: color-mix(in srgb, var(--color-danger) 10%, transparent);
	--color-info-bg: color-mix(in srgb, var(--color-info) 10%, transparent);

	/* Avisos: el texto y el borde necesitan token propio porque el fondo ya se
	 * adaptaba al tema y el color de la letra no. Es el caso clásico de una
	 * pareja fondo/texto donde solo la mitad era variable, y se veía como texto
	 * ilegible al cambiar de tema. */
	--aviso-error-texto: var(--color-danger);
	--aviso-error-borde: color-mix(in srgb, var(--color-danger) 20%, transparent);
	--aviso-ok-texto: var(--color-success);
	--aviso-ok-borde: color-mix(in srgb, var(--color-success) 20%, transparent);
	--aviso-info-texto: var(--color-info);
	--aviso-info-borde: color-mix(in srgb, var(--color-info) 20%, transparent);
	--aviso-alerta-fondo: color-mix(in srgb, var(--color-warning) 10%, transparent);
	--aviso-alerta-texto: var(--color-warning);
	--aviso-alerta-borde: color-mix(in srgb, var(--color-warning) 20%, transparent);

	/* Estado de un equipo de red: se apoya en los tokens de estado para no
	 * introducir colores nuevos. */
	--estado-en-linea: var(--color-success);
	--estado-degradado: var(--color-warning);
	--estado-caido: var(--color-danger);
	--estado-apagado: var(--color-apagado);

	/* ── Cromo que NO se invierte ──────────────────────────────────────
	 * El menú ya vivía siempre en oscuro, y por una razón buena e independiente
	 * del manual: una columna que acompaña toda la jornada no debe competir con
	 * el contenido. Ahora se le suma el motivo del §7 — el logotipo lleva la
	 * palabra en blanco y está prohibido recolorearlo—, que extiende el patrón
	 * a la barra superior y a la pantalla de acceso con `.siempre-oscuro`.
	 */
	--menu-bg: linear-gradient(180deg, #0b1528 0%, #050b14 100%);
	--menu-texto: #e2e8f0;
	--menu-texto-suave: #94a3b8;
	--menu-borde: rgb(255 255 255 / 8%);
	--menu-borde-fuerte: rgb(255 255 255 / 14%);
	--menu-hover: rgb(255 255 255 / 6%);
	--menu-activo: rgb(0 242 254 / 10%);
	--menu-avatar: #1e293b;

	/* ── Tipografía ────────────────────────────────────────────────────
	 * Las tres familias se sirven desde este mismo dominio, desde
	 * `assets/fuentes/`. El primer respaldo es siempre la del sistema, así que
	 * mientras llega el woff2 no hay hueco en blanco.
	 */
	--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.75rem;
	--fs-3xl: 2.25rem;

	/* ── Radios ──────────────────────────────────────────────────────── */
	--radius-sm: 8px;
	--radius: 12px; /* controles y filas */
	--radius-lg: 16px; /* tarjetas */
	--radius-xl: 24px; /* banners */
	--radius-full: 999px;

	/* ── Sombra y brillo ──────────────────────────────────────────────
	 * En una consola oscura la sombra es profundidad, no color: negro
	 * translúcido. El BRILLO es otra cosa y está acotado a 8 px por el §4 del
	 * manual; aparece solo en la acción principal.
	 */
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
	--shadow: 0 2px 6px rgb(0 0 0 / 28%), 0 8px 24px rgb(0 0 0 / 32%);
	--shadow-lg: 0 6px 16px rgb(0 0 0 / 34%), 0 20px 44px rgb(0 0 0 / 44%);
	--shadow-glow: 0 0 8px -2px rgb(0 242 254 / 45%);

	/* `--ring` acompaña al ratón y al estado activo; el FOCO DE TECLADO es un
	 * `outline` de 2 px en Cyan Vector y no se sustituyen entre sí. */
	--ring: 0 0 0 3px rgb(0 242 254 / 25%);

	/* ── Medidas de página ─────────────────────────────────────────────
	 * Tomado de QCONTRACTUAL, que lo resolvió primero y por buenas razones.
	 *
	 * El margen lateral es FLUIDO, no una escala de escalones: 16 px en el
	 * teléfono y, desde 640, el 5 % del ancho con tope de 80 px. Con escalones
	 * fijos de 16/24/32, en un portátil de 1280 el contenido quedaba a 32 px
	 * del borde y las tablas se veían de lado a lado. En el móvil manda el
	 * contenido y el margen solo evita que el texto toque el vidrio.
	 */
	--margen-lateral: 1rem;

	/* 1152 px. AQUÍ DIVERGE de QCONTRACTUAL, que usa 896 para todo.
	 *
	 * Allí el contenido son contratos y formularios, y una medida de lectura
	 * estrecha es lo correcto. Esto es una consola de red: la auditoría, las
	 * sesiones activas y los IP-bindings son tablas de cinco y seis columnas
	 * con MAC, IP, tráfico y tiempo activo. A 896 px se pasarían el día con
	 * desplazamiento horizontal dentro de la tarjeta, que es justo lo que uno
	 * no quiere mirando quién está conectado.
	 */
	--ancho-pagina: 72rem;

	/* ── Espaciado ─────────────────────────────────────────────────────
	 * `system.md` los nombra por intención —relleno de tarjeta, relleno de
	 * inserto, espacio de sección—. Aquí siguen con su nombre de escala porque
	 * los usan cientos de líneas; los nombres de allí describen para qué sirve
	 * cada uno, estos son el mecanismo.
	 */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem; /* relleno de inserto, móvil */
	--space-4: 1rem; /* relleno de inserto lg · relleno de tarjeta móvil */
	--space-5: 1.5rem; /* relleno de tarjeta lg · espacio de sección */
	--space-6: 2rem;
	--space-8: 3rem;

	--transition: 0.2s ease;
}

@media (min-width: 640px) {
	:root {
		--margen-lateral: clamp(2rem, 5vw, 5rem);
	}
}

/* ============================================================================
   TEMA CLARO

   Se declara dos veces —una para quien lo pide en el sistema y otra para quien
   lo elige a mano— porque no hay forma de combinar una consulta de medios con
   un selector de atributo. Es la misma duplicación que tenía el tema oscuro
   antes de invertir el valor por omisión.

   La escala se invierte sobre blanco y los tonos de marca y de estado bajan a
   su variante oscura para seguir en AA. Lo semántico no cambia: esmeralda sigue
   siendo «en línea» y rosa, «caído».

   Cyan Vector NO aparece como color de texto: sobre blanco da 1,39:1. Aquí solo
   vive en el contorno del foco, donde no se lee.
   ============================================================================ */

@media (prefers-color-scheme: light) {
	:root:not([data-theme='dark']) {
		color-scheme: light;

		--color-primary: #0369a1; /* 5,9:1 sobre blanco */
		--color-primary-fuerte: #075985; /* 7,6:1 */
		--color-primary-dark: #075985;
		--color-primary-light: #0ea5e9;
		--color-primary-deep: #050b14;
		--color-sobre-relleno: #ffffff;

		--color-secondary: #0369a1;
		--color-secondary-dark: #075985;
		--color-accent: #0369a1;
		--color-accent-dark: #075985;
		--color-highlight: #0369a1;
		--color-highlight-dark: #075985;

		--color-bg: #eef2f7;
		--color-surface: #ffffff;
		--color-surface-alt: #f6f8fb;

		--color-text: #0b1528; /* 16,2:1 sobre el fondo */
		--color-muted: #475569; /* 6,7:1 */
		--color-border: #e2e8f0;
		--color-border-strong: #cbd5e1;

		--color-success: #047857; /* 5,5:1 */
		--color-warning: #b45309; /* 5,0:1 */
		--color-danger: #be123c; /* 6,3:1 */
		--color-danger-fuerte: #9f1239;
		--color-info: #0369a1; /* 5,9:1 */

		--shadow-sm: 0 1px 2px rgb(5 11 20 / 6%);
		--shadow: 0 2px 6px rgb(5 11 20 / 6%), 0 8px 24px rgb(5 11 20 / 8%);
		--shadow-lg: 0 6px 16px rgb(5 11 20 / 10%), 0 20px 44px rgb(5 11 20 / 16%);
	}
}

:root[data-theme='light'] {
	color-scheme: light;

	--color-primary: #0369a1;
	--color-primary-fuerte: #075985;
	--color-primary-dark: #075985;
	--color-primary-light: #0ea5e9;
	--color-primary-deep: #050b14;
	--color-sobre-relleno: #ffffff;

	--color-secondary: #0369a1;
	--color-secondary-dark: #075985;
	--color-accent: #0369a1;
	--color-accent-dark: #075985;
	--color-highlight: #0369a1;
	--color-highlight-dark: #075985;

	--color-bg: #eef2f7;
	--color-surface: #ffffff;
	--color-surface-alt: #f6f8fb;

	--color-text: #0b1528;
	--color-muted: #475569;
	--color-border: #e2e8f0;
	--color-border-strong: #cbd5e1;

	--color-success: #047857;
	--color-warning: #b45309;
	--color-danger: #be123c;
	--color-danger-fuerte: #9f1239;
	--color-info: #0369a1;

	--shadow-sm: 0 1px 2px rgb(5 11 20 / 6%);
	--shadow: 0 2px 6px rgb(5 11 20 / 6%), 0 8px 24px rgb(5 11 20 / 8%);
	--shadow-lg: 0 6px 16px rgb(5 11 20 / 10%), 0 20px 44px rgb(5 11 20 / 16%);
}

/* ============================================================================
   `.siempre-oscuro` — el cromo que no se invierte

   Barra superior, menú lateral y pantalla de acceso. Dentro de esto el tema
   claro no entra: el logotipo lleva la palabra en blanco y el §7 del manual
   prohíbe recolorearlo, así que sobre una barra blanca desaparecería.

   Contrato: todo lo que esté dentro se pinta oscuro en los DOS temas. Quien la
   use debe asumir que el texto de sus hijos es claro y no fijar colores a mano.
   ============================================================================ */

.siempre-oscuro {
	color-scheme: dark;

	--color-primary: #38bdf8;
	--color-primary-fuerte: #0ea5e9;
	--color-primary-dark: #0ea5e9;
	--color-primary-light: #7dd3fc;
	--color-highlight: var(--color-vector);
	--color-highlight-dark: var(--color-cobalto);

	--color-bg: #050b14;
	--color-surface: #0f1b30;
	--color-surface-alt: #0b1528;

	--color-text: #f1f5f9;
	--color-muted: #94a3b8;
	--color-border: rgb(255 255 255 / 10%);
	--color-border-strong: rgb(255 255 255 / 18%);

	--color-success: #34d399;
	--color-warning: #fbbf24;
	--color-danger: #fb7185;
	--color-info: #38bdf8;

	--shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
	--shadow: 0 2px 6px rgb(0 0 0 / 28%), 0 8px 24px rgb(0 0 0 / 32%);
	--shadow-lg: 0 6px 16px rgb(0 0 0 / 34%), 0 20px 44px rgb(0 0 0 / 44%);
}

/* ============================================================================
   Base
   ============================================================================ */

html {
	/* El navegador tiene que saber que la página es oscura: sin esto pinta sus
	 * controles nativos para fondo claro y el icono del calendario sale negro
	 * sobre una superficie oscura. También aclara las flechas de los
	 * desplegables y las barras de desplazamiento. Lo reportó Andrés en
	 * QCONTRACTUAL; aquí se previene. */
	accent-color: var(--color-cobalto);
	background: var(--color-bg);
}

/* Foco de teclado: contorno de 2 px en Cyan Vector (§4 del manual). Solo con
 * teclado: con el ratón o el dedo no aparece. */
:focus-visible {
	outline: 2px solid var(--color-vector);
	outline-offset: 2px;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-surface-alt);
}

::-webkit-scrollbar-thumb {
	background: var(--color-border-strong);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
   Serie de los desgloses demográficos — Beneficiarios (012)

   Cinco tonos para distinguir categorías en las listas de distribución de edad
   y sexo. Dos advertencias que son el motivo de que existan como tokens:

   1. **El color nunca es el único portador.** Cada fila lleva su rótulo
      completo al lado y su cifra; el tono solo ayuda a seguir una categoría
      entre la lista y su barra. Quien no distinga estos tonos no pierde nada.
   2. **No es una paleta nueva.** Se queda en la familia de marca y en los
      neutros ya definidos. Las dos últimas (`d` y `e`) son deliberadamente
      grises: están reservadas a «prefirió no decirlo» y «no se le preguntó»,
      que no son rasgos de nadie y no deben parecer un grupo demográfico más.
   ============================================================================ */

:root {
	--serie-a: #38bdf8;
	--serie-b: #22d3ee;
	--serie-c: #a5b4fc;
	--serie-d: #94a3b8;
	--serie-e: #64748b;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme='dark']) {
		--serie-a: #0369a1; /* 5,9:1 sobre blanco */
		--serie-b: #0e7490; /* 5,3:1 */
		--serie-c: #4f46e5; /* 6,3:1 */
		--serie-d: #475569; /* 8,1:1 */
		--serie-e: #64748b; /* 5,1:1 */
	}
}

:root[data-theme='light'] {
	--serie-a: #0369a1;
	--serie-b: #0e7490;
	--serie-c: #4f46e5;
	--serie-d: #475569;
	--serie-e: #64748b;
}