/* ─────────────────────────────────────────────────────────────────────────
   Identidad de marca MegaFlux — fuente de verdad de colores y tipografías (AGENTS.md §17).
   Único lugar donde se declaran los colores de marca como variables --mfx-*.
   NUNCA escribir un hex de marca como literal en un componente o style inline.
   ───────────────────────────────────────────────────────────────────────── */

/* Tipografías de marca — cargar solo los pesos en uso (§17.3) */
@font-face {
	font-family: "GT Flexa";
	src: url("/fonts/GTFlexa-Regular.otf") format("opentype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "GT Flexa";
	src: url("/fonts/GTFlexa-Bold.otf") format("opentype");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Acumin Pro";
	src: url("/fonts/AcuminPro-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Acumin Pro";
	src: url("/fonts/AcuminPro-Bold.otf") format("opentype");
	font-weight: 700;
	font-display: swap;
}

:root {
	/* Base — Azul noche (Pantone 296 C) */
	--mfx-base: #0D192B;
	--mfx-base-80: rgba(13, 25, 43, 0.8);
	--mfx-base-50: rgba(13, 25, 43, 0.5);
	--mfx-base-30: rgba(13, 25, 43, 0.3);

	/* Acento — Verde MegaFlux (Pantone 7488 C) */
	--mfx-acento: #70D052;
	--mfx-acento-80: rgba(112, 208, 82, 0.8);
	--mfx-acento-50: rgba(112, 208, 82, 0.5);
	--mfx-acento-30: rgba(112, 208, 82, 0.3);

	/* Secundarios */
	--mfx-acento-claro: #A3D052;
	--mfx-base-profundo: #0D1352;

	/* ── Superficies y texto del MODO OSCURO (derivados, no literales del manual) ──────────
	   El manual es dark-first ("Use over backgrounds": identidad sobre azul noche/negro con
	   acento verde y logo blanco), pero NO define una UI de modo oscuro. Estos tonos se DERIVAN
	   de la base azul noche (#0D192B) como exige esa sección: el fondo es la base y las
	   superficies (tarjetas, hero, paneles) suben 1-2 tonos para separarse del fondo; el texto
	   es un casi-blanco frío. Sirven para construir la PaletteDark de MudBlazor (TemaMarca.cs) y
	   los overrides de marca de abajo. No inventan color de marca: son escalas de la base. */
	--mfx-superficie-oscura: #14243A;   /* tarjetas/hero/paneles sobre el fondo azul noche */
	--mfx-superficie-oscura-2: #1B2E4A; /* segundo nivel: hover, realce, appbar/drawer */
	--mfx-texto-claro: #E7ECF3;         /* texto casi-blanco frío (legible sobre azul noche) */
	--mfx-texto-claro-sutil: rgba(231, 236, 243, 0.72); /* texto secundario en oscuro */

	/* ── Tokens SEMÁNTICOS conmutables por tema ────────────────────────────────────────────
	   El texto y las superficies de marca dejan de ser fijos: apuntan a estos tokens, que el
	   modo oscuro (.mfx-oscuro, aplicado por MainLayout al MudLayout) redefine. Así el modo
	   claro queda idéntico y el oscuro se vuelve legible sin escribir hex sueltos en cada regla. */
	--mfx-texto: var(--mfx-base);        /* color de texto principal (títulos y cuerpo) */
	--mfx-texto-sutil: var(--mfx-base-80); /* texto secundario/atenuado */
	--mfx-superficie: #FFFFFF;           /* fondo de tarjetas/paneles de marca */
	--mfx-borde: var(--mfx-base-30);     /* bordes y separadores de marca */

	/* Tipografías */
	--mfx-fuente-titulo: "GT Flexa", system-ui, sans-serif;
	--mfx-fuente-texto: "Acumin Pro", system-ui, sans-serif;
}

/* Modo oscuro de marca: MainLayout pone la clase .mfx-oscuro en el MudLayout cuando el tema es
   oscuro (mismo interruptor que alimenta el MudThemeProvider). Solo REDEFINE los tokens
   semánticos; el resto del CSS de marca no cambia y el modo claro no se toca. */
.mfx-oscuro {
	--mfx-texto: var(--mfx-texto-claro);
	--mfx-texto-sutil: var(--mfx-texto-claro-sutil);
	--mfx-superficie: var(--mfx-superficie-oscura);
	--mfx-borde: rgba(231, 236, 243, 0.18);
}

/* Swap de logo por tema (dark-first del manual: sobre azul noche va el logo BLANCO). Se marcan
   dos imágenes con .mfx-logo-claro / .mfx-logo-oscuro; por defecto (claro) se ve la azul y en
   .mfx-oscuro se intercambia. Global (no scoped) porque .mfx-oscuro es un ancestro (el MudLayout)
   y lo consumen el Home y el Login por igual. */
.mfx-logo-oscuro {
	display: none;
}
.mfx-oscuro .mfx-logo-claro {
	display: none;
}
.mfx-oscuro .mfx-logo-oscuro {
	display: inline-block;
}

body {
	font-family: var(--mfx-fuente-texto);
	color: var(--mfx-texto);
}

h1, h2, h3, .mfx-titulo {
	font-family: var(--mfx-fuente-titulo);
	font-weight: 700;
	color: var(--mfx-texto);
}

a {
	color: var(--mfx-acento);
}

/* Botón primario de marca (acento sobre base) */
.btn-primary,
.mfx-btn-primario {
	background-color: var(--mfx-acento);
	border-color: var(--mfx-acento);
	color: var(--mfx-base);
}
.btn-primary:hover,
.mfx-btn-primario:hover {
	background-color: var(--mfx-acento-claro);
	border-color: var(--mfx-acento-claro);
}

/* ─────────────────────────────────────────────────────────────────────────
   Drawer (menú lateral): SIEMPRE es azul noche de marca en ambos temas
   (PaletteLight y PaletteDark fijan DrawerBackground al azul noche). MudBlazor
   pinta el texto de los MudNavLink con text-primary, que en MODO CLARO es
   oscuro → texto oscuro sobre drawer oscuro = invisible. Forzamos el texto y
   los íconos del nav a claro dentro del drawer, en ambos temas. El enlace
   activo conserva el acento verde.
   ───────────────────────────────────────────────────────────────────────── */
.mud-drawer .mud-navmenu .mud-nav-link,
.mud-drawer .mud-navmenu .mud-nav-group .mud-nav-link,
.mud-drawer .mud-navmenu .mud-nav-group-title,
.mud-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
	color: var(--mfx-texto-claro);
}

/* Enlace activo (ruta actual): acento verde de marca. */
.mud-drawer .mud-navmenu .mud-nav-link.active,
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-icon-root {
	color: var(--mfx-acento);
}

/* Hover: realce sutil sin perder legibilidad. */
.mud-drawer .mud-navmenu .mud-nav-link:hover {
	background-color: var(--mfx-superficie-oscura-2);
	color: #FFFFFF;
}

/* Módulos "próximamente" (deshabilitados): atenuados pero LEGIBLES sobre el
   azul noche (antes quedaban casi negros sobre oscuro). */
.mud-drawer .mud-navmenu .mud-nav-link.mud-nav-link-disabled,
.mud-drawer .mud-navmenu .mud-nav-link.mud-nav-link-disabled .mud-icon-root {
	color: var(--mfx-texto-claro-sutil);
}