:root {
    --tactical-green: #4ade80;
    --tactical-bg: #050805;
    --tactical-border: #14532d;
    --tactical-dim: #166534;
}

body {
    background-color: var(--tactical-bg);
    color: var(--tactical-green);
    font-family: 'JetBrains Mono', monospace;
    background-image: 
        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, 255, 0, 0.06));
    background-size: 100% 4px, 3px 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Evitamos el overflow hidden en el body para permitir scroll en móvil */
    overflow-y: auto !important; 
    overflow-x: hidden;
}

/* Forzamos que el contenedor principal sea vertical en móvil */
.flex.flex-1.gap-6 {
    flex-direction: column !important;
    overflow: visible !important;
    display: flex !important;
}

/* En pantallas grandes (Desktop), restauramos el layout original */
@media (min-width: 1024px) {
    body { height: 100vh; overflow: hidden !important; }
    .flex.flex-1.gap-6 { 
        flex-direction: row !important; 
        overflow: hidden !important; 
    }
    aside { width: 320px !important; }
}

.tactical-panel {
    border: 1px solid var(--tactical-border);
    background: rgba(5, 8, 5, 0.9);
    position: relative;
    width: 100%;
}

.tactical-panel::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 10px; height: 10px;
    border-top: 2px solid var(--tactical-green);
    border-left: 2px solid var(--tactical-green);
}

/* Hacemos que los canvas sean totalmente responsivos */
canvas {
    image-rendering: pixelated;
    background-color: #000;
    border: 1px solid var(--tactical-border);
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Ajuste del contenedor CRT para que no se desborde */
.crt-container {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--tactical-border);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.05);
    width: 100%;
    max-width: 640px; /* Máximo ancho del protocolo PD120 */
}

.scanline {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.1) 50%
    ), linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.02), 
        rgba(0, 255, 0, 0.01), 
        rgba(0, 0, 255, 0.02)
    );
    background-size: 100% 3px, 3px 100%;
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 10;
}

/* Ajustes de HUD para móvil */
@media (max-width: 768px) {
    header h1 { font-size: 1.25rem !important; }
    .absolute.top-8 { top: 1rem !important; }
    .absolute.left-8 { left: 1rem !important; }
    .absolute.right-8 { right: 1rem !important; }
    aside { order: 2; } /* Ponemos los controles debajo del canvas en móvil */
    main { order: 1; }
}

.status-dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; }
.scanning { background-color: var(--tactical-green); box-shadow: 0 0 8px var(--tactical-green); animation: pulse 1.5s infinite; }
.idle { background-color: var(--tactical-dim); }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

input[type=range] { accent-color: var(--tactical-green); appearance: none; background: var(--tactical-border); height: 4px; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--tactical-green); cursor: pointer; border-radius: 0; }

.log-entry { border-left: 2px solid var(--tactical-dim); padding-left: 8px; margin-bottom: 4px; font-size: 10px; color: var(--tactical-green); opacity: 0.8; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--tactical-bg); }
::-webkit-scrollbar-thumb { background: var(--tactical-border); }