/* Scrollbar industrial y limpio */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #030303; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }

body {
    background-color: #030303;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   PATRÓN DE DISEÑO SUTIL: Ruido (Grain) + Resplandor (Glow)
   ========================================================================== */

/* 1. Resplandor difuminado técnico en la parte superior */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 50% -20%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
}

/* Opción 3: Scanlines Globales */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    /* Líneas horizontales oscuras que simulan barrido de pantalla */
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.10) 50%);
    background-size: 100% 4px;
    z-index: -1;
    pointer-events: none;
}


/* Estilo "Panel de Hardware" para tarjetas (Más refinado) */
.tech-panel {
    background-color: #0a0a0a;
    border: 1px solid #262626;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.tech-panel:hover {
    border-color: #0ea5e9;
    background-color: #141414;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(14, 165, 233, 0.1);
}

/* Scanlines decorativas sutiles para el header */
.scanlines::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.15;
}

/* Botones estilo técnico */
.btn-tech {
    position: relative;
    overflow: hidden;
}
.btn-tech::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 2px;
    background-color: rgba(255,255,255,0.2);
}
.btn-tech:active {
    transform: translateY(1px);
}

/* Cursor parpadeante para la terminal */
.cursor-blink {
    animation: blink 1s step-end infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}