/* ============================================================
   BASE: tokens y componentes compartidos por TODAS las páginas
   (login, tablero, CDE). Cada página carga fondo.css, base.css y
   después su propia hoja, que solo contiene lo suyo.
   Regla: un componente tiene UNA clase base con su aspecto; las
   instancias solo añaden posición, margen o tamaño. Nunca aspecto.
   ============================================================ */

/* ============================================================
   TOKENS: todo valor que se repite vive aquí, en un único :root.
   ============================================================ */
:root {
    /* Colores base. Los *-rgb son el triplete para usar con transparencia:
       rgba(var(--hud-cyan-rgb), 0.3) */
    --bg-main: #010206;
    --hud-cyan: #00f3ff;
    --hud-cyan-rgb: 0, 243, 255;
    --hud-red: #ff003c;
    --hud-red-rgb: 255, 0, 60;
    --hud-amber: #ffd700;
    --hud-amber-rgb: 255, 215, 0;
    --hud-emerald: #00ffa3;
    --hud-border: rgba(0, 243, 255, 0.15);
    --text-main: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.4);

    /* Escala única de avance (%): < 30 crítico · 30–59 bajo · 60–84 medio · 85–99 avanzado · 100 completo.
       La usan velocímetros, filas de tableros, tarjetas de cartera y reporte CUI (script3: PROGRESS_LEVELS). */
    --nivel-critico: #ff003c;   --nivel-critico-rgb: 255, 0, 60;
    --nivel-bajo: #ff8c00;      --nivel-bajo-rgb: 255, 140, 0;
    --nivel-medio: #ffd700;     --nivel-medio-rgb: 255, 215, 0;
    --nivel-avanzado: #00e676;  --nivel-avanzado-rgb: 0, 230, 118;
    --nivel-completo: #00f3ff;  --nivel-completo-rgb: 0, 243, 255;
    /* Los mismos niveles para la hoja blanca del reporte (triplete R,G,B, más oscuros para imprimir) */
    --nivel-critico-impresion: 192, 57, 43;
    --nivel-bajo-impresion: 211, 84, 0;
    --nivel-medio-impresion: 217, 164, 6;
    --nivel-avanzado-impresion: 31, 157, 87;

    /* Anillos del visual central (cada SVG redefine los suyos más abajo) */
    --hud-active: #3b82f6;
    --hud-glow: rgba(59, 130, 246, 0.6);
    --hud-rest-fill: rgba(48, 68, 100, 0.36);     /* relleno de los sectores en reposo */
    --hud-rest-stroke: rgba(120, 175, 235, 0.2);  /* borde de los sectores en reposo */
    --hud-hot-fill: rgba(59, 130, 246, 0.4);      /* relleno al pasar el cursor */
    --hud-core-stroke: rgba(59, 130, 246, 0.4);   /* borde del núcleo central */

    /* Reporte institucional (hoja blanca del CUI) */
    --inst-red:  #9c1b22;   /* rojo institucional (franja Perú) */
    --inst-navy: #14315c;   /* azul institucional (títulos)     */
    --inst-ink:  #1f2937;   /* texto principal                  */
    --inst-soft: #6b7280;   /* etiquetas / texto secundario     */
    --inst-line: #e3e7ec;   /* líneas / bordes                  */

    /* Capas (z-index) de la página, de abajo arriba. Los valores 1–101 que quedan sueltos
       son locales de cada componente y no compiten con estas capas. */
    --z-fondo: -1;            /* aurora del fondo */
    --z-velo: 999;            /* velo del menú móvil, rejilla de la app */
    --z-barra: 1000;          /* barra superior, menú, paneles de tableros */
    --z-barra-alta: 1001;     /* bloques izquierdo y derecho de la barra */
    --z-visitas: 1200;
    --z-menu-movil: 1500;     /* menú lateral convertido en panel (≤ 1024 px) */
    --z-pestanas: 2000;       /* pestañas del anillo, tarjeta de usuario */
    --z-pestanas-tip: 2100;   /* rótulo emergente de las pestañas */
    --z-modal-velo: 3000;     /* velo de las cinco ventanas modales */
    --z-modal: 3001;
    --z-flotante: 9999;       /* menú lateral de escritorio, bots */
    --z-alerta: 10000;        /* líneas CRT */
    --z-entrada: 99998;       /* velo de entrada al cargar */
    --z-tooltip: 99999;

    /* Duraciones y radios más usados */
    --dur-rapida: 0.2s;
    --dur-media: 0.3s;
    --dur-lenta: 0.6s;
    --radio-xs: 2px;
    --radio-sm: 4px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-pildora: 999px;

    /* Bordes, fondos de vidrio y sombras: tres intensidades como mucho por familia */
    --borde-cian-suave: 1px solid rgba(var(--hud-cyan-rgb), 0.15);
    --borde-cian: 1px solid rgba(var(--hud-cyan-rgb), 0.3);
    --borde-cian-fuerte: 1px solid rgba(var(--hud-cyan-rgb), 0.45);
    --borde-blanco-suave: 1px solid rgba(255, 255, 255, 0.08);
    --borde-blanco: 1px solid rgba(255, 255, 255, 0.2);
    --vidrio: rgba(3, 8, 18, 0.95);          /* paneles y menús sobre el fondo */
    --vidrio-claro: rgba(3, 8, 18, 0.85);    /* widgets pequeños */
    --velo: rgba(0, 3, 10, 0.75);            /* fondo oscuro detrás de una ventana */
    --sombra-flotante: 0 20px 50px rgba(0, 0, 0, 0.8);
    --sombra-modal: 0 30px 70px rgba(0, 0, 0, 0.75);
    --brillo-cian: 0 0 20px rgba(var(--hud-cyan-rgb), 0.2);

    /* Fuentes */
    --fuente-hud: 'Rajdhani', sans-serif;
    --fuente-mono: 'JetBrains Mono', monospace;
    --fuente-texto: 'Outfit', sans-serif;

    /* Tramos de pantalla. Una variable no sirve dentro de @media: estos valores se repiten a mano
       en las @media y el JS lee --bp-md (script3: esMovil). Tramos: ≤ 380 · ≤ 640 · ≤ 1024 ·
       1025–1180 · 1181–1320 · 1321–1599 · 1600–1899 · ≥ 1900. */
    --bp-md: 1024px;
}

/* ============================================================
   BOTONES: una base (.btn) y sus variantes. Cada botón concreto solo
   añade lo suyo: tamaño fijo, posición o margen. Nunca su aspecto.
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    font-family: var(--fuente-hud);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radio-md);
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    transition: background var(--dur-media), color var(--dur-media), border-color var(--dur-media), box-shadow var(--dur-media), transform var(--dur-rapida);
}
.btn i, .btn svg { width: 14px; height: 14px; }
/* Tamaños: el normal mide 38 px */
.btn--sm { height: 32px; padding: 0 12px; font-size: 0.72rem; letter-spacing: 1px; }
.btn--lg { height: 44px; padding: 0 26px; font-size: 0.95rem; letter-spacing: 1.5px; }
/* Solo icono: cuadrado o círculo */
.btn--icono, .btn--circulo { width: 38px; padding: 0; }
.btn--circulo { border-radius: 50%; }
/* Cian: la acción del HUD */
.btn--cian { color: var(--hud-cyan); background: rgba(var(--hud-cyan-rgb), 0.1); border: var(--borde-cian-fuerte); }
.btn--cian:hover { background: rgba(var(--hud-cyan-rgb), 0.18); border-color: var(--hud-cyan); box-shadow: var(--brillo-cian); }
/* Cian que se rellena al pasar el cursor: la acción principal de un formulario */
.btn--cian-lleno { color: var(--hud-cyan); background: rgba(var(--hud-cyan-rgb), 0.12); border: var(--borde-cian-fuerte); }
.btn--cian-lleno:hover { background: var(--hud-cyan); color: #02121a; box-shadow: 0 0 16px rgba(var(--hud-cyan-rgb), 0.4); transform: scale(1.03); }
/* Sólido: la acción principal de una página entera (entrar) */
.btn--solido { color: #02121a; background: var(--hud-cyan); border: 1px solid var(--hud-cyan); }
.btn--solido:hover { background: #fff; border-color: #fff; box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); }
/* Neutro: acciones secundarias */
.btn--neutro { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); border: var(--borde-blanco); }
.btn--neutro:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }
/* Peligro: se pone rojo al pasar el cursor (cerrar, limpiar) */
.btn--peligro:hover { color: var(--hud-red); background: rgba(var(--hud-red-rgb), 0.15); border-color: var(--hud-red); }

/* ============================================================
   PANELES: tres cascarones y un adorno.
   .panel-flotante  menús, tarjeta de usuario, tooltip, leyenda, widgets
   .panel-suave     bloques dentro de una ventana (columnas, medidores)
   .tarjeta-acento  tarjeta teñida por --acento (R, G, B); quien la usa
                    define --acento y, si necesita fondo opaco, --tarjeta-fondo
   .esquinas        L-corners, firma visual de la Torre (usa --acento o cian)
   ============================================================ */
.panel-flotante {
    background: var(--vidrio);
    border: var(--borde-cian);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-flotante);
    backdrop-filter: blur(12px);
}
.panel-suave {
    background: rgba(var(--hud-cyan-rgb), 0.03);
    border: var(--borde-cian-suave);
    border-radius: var(--radio-sm);
}
.tarjeta-acento {
    position: relative;
    background:
        linear-gradient(160deg, rgba(var(--acento), 0.18) 0%, rgba(var(--acento), 0.05) 58%, rgba(var(--acento), 0.02) 100%),
        var(--tarjeta-fondo, transparent);
    border: 1px solid rgba(var(--acento), 0.45);
    border-radius: var(--radio-sm);
    box-shadow: inset 0 0 24px rgba(var(--acento), 0.13), 0 0 14px rgba(var(--acento), 0.1);
}
.esquinas::before, .esquinas::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid rgb(var(--acento, var(--hud-cyan-rgb)));
    pointer-events: none;
}
.esquinas::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.esquinas::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ============================================================
   CHIPS: etiqueta pequeña (estado, programa, severidad, CUI...).
   Color por --acento (R, G, B) heredado o puesto en línea; cian si no hay.
   ============================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-family: var(--fuente-hud);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    color: rgb(var(--acento, var(--hud-cyan-rgb)));
    background: rgba(var(--acento, var(--hud-cyan-rgb)), 0.12);
    border: 1px solid rgba(var(--acento, var(--hud-cyan-rgb)), 0.55);
    border-radius: var(--radio-sm);
}
a.chip:hover { background: rgba(var(--acento, var(--hud-cyan-rgb)), 0.22); box-shadow: 0 0 14px rgba(var(--acento, var(--hud-cyan-rgb)), 0.45); }
.chip--neutro { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.chip--contorno { background: transparent; border-color: currentColor; }   /* el color lo pone quien lo usa */
.chip--inst { color: var(--inst-navy); background: rgba(20, 49, 92, 0.08); border-color: rgba(20, 49, 92, 0.35); text-transform: none; letter-spacing: 0.4px; }

/* ============================================================
   ETIQUETAS: rótulo pequeño en mayúsculas (título de widget, cabecera
   de tabla, leyenda, fecha). Quien lo usa solo añade margen o alineación.
   ============================================================ */
.etiqueta {
    font-family: var(--fuente-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.etiqueta--cian { color: rgba(var(--hud-cyan-rgb), 0.75); }
.etiqueta--acento { color: rgba(var(--acento, var(--hud-cyan-rgb)), 0.75); }

/* ============================================================
   CAMPOS: entrada de datos (buscador, filtros desplegables).
   Al pasar el cursor sube; con el foco, o abierto, enciende el borde.
   ============================================================ */
.campo {
    background: rgba(var(--hud-cyan-rgb), 0.05);
    border: var(--borde-cian);
    border-radius: var(--radio-md);
    color: #fff;
    transition: border-color var(--dur-media), background var(--dur-media), box-shadow var(--dur-media);
}
.campo:hover { background: rgba(var(--hud-cyan-rgb), 0.08); }
.campo:focus, .campo:focus-within, .is-open > .campo {
    outline: none;
    border-color: var(--hud-cyan);
    background: rgba(var(--hud-cyan-rgb), 0.1);
    box-shadow: 0 0 16px rgba(var(--hud-cyan-rgb), 0.25);
}
.campo::placeholder { color: var(--text-dim); }

/* ============================================================
   VENTANAS MODALES: un velo (.velo) y una caja (.ventana), las cinco
   con la misma mecánica (script3 openModal: .is-open en ambos).
   La base es la ventana HUD (rejilla + scanlines); los modificadores
   cambian tamaño o la convierten en hoja lisa.
   ============================================================ */
.velo {
    position: fixed;
    inset: 0;
    background: var(--velo);
    backdrop-filter: blur(16px);
    z-index: var(--z-modal-velo);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-lenta) cubic-bezier(0.2, 0.8, 0.2, 1), visibility var(--dur-lenta);
}
.velo.is-open { opacity: 1; visibility: visible; }

.ventana {
    position: fixed;
    top: 50%; left: 50%;
    width: 98vw;
    height: 97vh; height: 97dvh;
    max-width: 2200px;
    max-height: 1320px;
    z-index: var(--z-modal);
    background-image:
        linear-gradient(rgba(var(--hud-cyan-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--hud-cyan-rgb), 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    border: var(--borde-cian);
    border-radius: var(--radio-sm);
    box-shadow: 0 0 150px rgba(0, 0, 0, 1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity var(--dur-lenta) cubic-bezier(0.19, 1, 0.22, 1), transform var(--dur-lenta) cubic-bezier(0.19, 1, 0.22, 1), visibility var(--dur-lenta);
}
.ventana.is-open { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ventana:focus { outline: none; }   /* recibe el foco al abrirse (tabindex=-1): el foco visible va en sus controles */
.ventana::after {                    /* scanlines */
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 10;
}
/* Telemetría: algo más pequeña */
.ventana--compacta {
    width: 95vw;
    height: 90vh; height: 90dvh;
    max-width: 1400px;
    max-height: 900px;
}
/* Alerta: hoja lisa, alto según contenido */
.ventana--dialogo {
    width: min(760px, 90vw);
    height: auto;
    max-height: 85vh; max-height: 85dvh;
    overflow-y: auto;
    background: #0a1424;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-modal), 0 0 40px rgba(var(--hud-cyan-rgb), 0.08);
}
/* Aviso («en construcción»): caja pequeña centrada */
.ventana--aviso {
    width: auto;
    min-width: 340px;
    height: auto;
    padding: 40px 48px;
    text-align: center;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-modal), 0 0 40px rgba(var(--hud-cyan-rgb), 0.08);
}
.ventana--dialogo::after, .ventana--aviso::after { content: none; }

/* Aviso de prototipo (datos simulados), al pie de tablero, CDE, login y reporte por CUI.
   Estilo HUD: vidrio oscuro, borde cian, esquinas y título en Rajdhani. */
.aviso-prototipo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 720px;
    margin: 32px auto 16px;
    padding: 9px 36px 9px 18px;
    background: var(--vidrio-claro);
    border: var(--borde-cian);
    border-radius: var(--radio-sm);
    box-shadow: inset 0 0 18px rgba(var(--hud-cyan-rgb), 0.08), 0 0 14px rgba(var(--hud-cyan-rgb), 0.08);
    backdrop-filter: blur(10px);
    text-align: center;
    letter-spacing: normal;
}
.aviso-prototipo__cerrar {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 28px !important;
    height: 28px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.4);
}
.aviso-prototipo__cerrar svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.5;
}
.aviso-prototipo::before, .aviso-prototipo::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border: 2px solid var(--hud-cyan);
    pointer-events: none;
}
.aviso-prototipo::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.aviso-prototipo::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.aviso-prototipo strong {
    font-family: var(--fuente-hud);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hud-cyan);
    text-shadow: 0 0 10px rgba(var(--hud-cyan-rgb), 0.4);
}
.aviso-prototipo span {
    font-family: var(--fuente-texto);
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}
/* Tablero: franja fija abajo al centro, entre el contador de visitas y los bots */
.aviso-prototipo--fijo {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 420px));
    margin: 0;
    z-index: var(--z-barra);
}
@media (max-width: 1024px) {
    .aviso-prototipo--fijo { left: 16px; right: 16px; bottom: 84px; width: auto; transform: none; }
}
/* Documento blanco del reporte por CUI (y su PDF): misma pieza en colores de impresión */
.aviso-prototipo--papel {
    margin: 14px 0 0;
    background: #f4f8fb;
    border-color: var(--inst-line);
    box-shadow: none;
    backdrop-filter: none;
}
.aviso-prototipo--papel::before, .aviso-prototipo--papel::after { border-color: var(--inst-navy); }
.aviso-prototipo--papel strong { color: var(--inst-navy); text-shadow: none; }
.aviso-prototipo--papel span { color: var(--inst-soft); }