/* css/style.css - Corvium Hub */
:root {
    --obsidiana: #050A12;
    --aeroespacial: #FF6600;
    --tecnico: #E2E8F0;
    --negro-puro: #020408;
    --grid-line: rgba(255, 102, 0, 0.04);
}

body {
    background-color: var(--obsidiana);
    background-image: 
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--tecnico);
    font-family: 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
}

.glass-panel {
    background: rgba(2, 4, 8, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 102, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
    border-color: rgba(255, 102, 0, 0.25);
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.03);
}

.accent-border { border-color: var(--aeroespacial); }
.text-accent { color: var(--aeroespacial); }
.bg-accent { background-color: var(--aeroespacial); }

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--negro-puro); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--aeroespacial); }

/* Animaciones */
@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(255, 102, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); }
}

.active-dot {
    width: 8px;
    height: 8px;
    background: var(--aeroespacial);
    border-radius: 50%;
    animation: pulse-orange 2.2s infinite;
}

.shimmer-active {
    position: relative;
    overflow: hidden;
}
.shimmer-active::after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.03) 20%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2.5s infinite;
    content: '';
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* Indicadores de Semáforos */
.stage-indicator {
    transition: all 0.3s ease;
}
.stage-active {
    border-color: var(--aeroespacial) !important;
    background: rgba(255, 102, 0, 0.08) !important;
    color: white !important;
}