/* ==========================================================
   PLATAFORMA NOVA • IA-HUMANO (SISTEMA GE&PA)
   ARCHIVO: style.css - ESTADO: OPERATIVO AL MILLÓN
   MODIFICACIÓN: CAPA INVISIBLE DE INTERACCIÓN MAESTRA
   ========================================================== */

/* 1. REGISTRO DE FUENTE - IDENTIDAD NOVA */
@font-face {
    font-family: 'Orbitron';
    src: url('../assets/fonts/orbitron.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 2. RESET Y BASES TÉCNICAS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --neon-blue: #00f2ff;
    --neon-purple: #bc13fe;
    --dark-deep: #020204;
    --font-nova: 'Orbitron', sans-serif;
}

body {
    background-color: var(--dark-deep);
    color: white;
    font-family: var(--font-nova);
    overflow: hidden; 
    min-height: 100vh;
    /* LA IMAGEN ES LA ÚNICA VERDAD */
    background: url('../assets/img/bg-hardware.jpg') no-repeat center center fixed;
    background-size: cover;
}

.main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* 3. CABECERA (Invisible sobre el logo de hardware) */
header {
    position: absolute;
    top: 2%;
    left: 30%;
    width: 40%;
    height: 12%;
    cursor: pointer;
    z-index: 10;
}

/* 4. VISUAL CENTRAL (Brillo sutil sobre el cerebro de la imagen) */
.central-core {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.1) 0%, transparent 70%);
}

/* 5. MALLA DE INTERACCIÓN (Zonas de clic invisibles - Captura 1) */
.interaction-mesh {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.hit-area {
    position: absolute;
    background: transparent;
    cursor: pointer;
    transition: background 0.3s;
}

.hit-area:hover {
    background: rgba(0, 242, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(0, 242, 255, 0.1);
}

/* COORDENADAS EXACTAS SOBRE EL HARDWARE (Ajuste según captura) */
.presentations { top: 32%; left: 28%; width: 14%; height: 16%; }
.oorav { top: 32%; left: 44.5%; width: 11%; height: 16%; }
.kairoma { top: 32%; left: 58%; width: 14%; height: 16%; }

.saydone { top: 51%; left: 28%; width: 14%; height: 16%; }
.alvorahola { top: 51%; left: 44.5%; width: 11%; height: 16%; }
.veridia { top: 51%; left: 58%; width: 14%; height: 16%; }

.genesios { top: 73%; left: 44.5%; width: 13%; height: 12%; }

/* 6. PANEL SOC (Datos reales sobre el monitor de la imagen) */
.soc-data-overlay {
    position: absolute;
    top: 36.5%;
    right: 10.5%;
    width: 12%;
    color: var(--neon-blue);
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 32px; /* Alineado con los campos de la imagen */
    text-shadow: 0 0 10px var(--neon-blue);
    pointer-events: none;
}

.traffic-meter {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
}

#traffic-load {
    height: 100%;
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}

/* 7. DOCK SOCIAL (Las 10 zonas de clic de la Captura 2) */
.social-hotspots {
    position: absolute;
    bottom: 4.8%;
    left: 41.2%;
    width: 18.2%;
    height: 3.5%;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    background: transparent;
}

.social-hit {
    width: 8.5%; /* Espaciado para los 10 iconos */
    height: 100%;
    cursor: pointer;
    background: transparent;
    transition: 0.2s;
}

.social-hit:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}