/* =============================================================
   PURETRÓN — Estilo retro terminal años 80
   ============================================================= */

:root {
    --verde:       #00ff41;
    --verde-suave: #00cc33;
    --verde-dim:   #005c18;
    --fondo:       #030a03;
    --glow:        0 0 8px rgba(0,255,65,0.8), 0 0 20px rgba(0,255,65,0.3);
    --glow-suave:  0 0 4px rgba(0,255,65,0.5);
    --ancho:       700px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: #000;
    color: var(--verde);
    font-family: 'Courier New', Courier, monospace;
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
}

/* --- FONDO COMPLETO CON SCANLINES CRT (bien visibles) --- */
#pantalla {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: var(--fondo);
}

#pantalla::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0) 1px,
        rgba(0,0,0,0.35) 1px,
        rgba(0,0,0,0.35) 2px
    );
}

/* --- TERMINAL: el centrado vertical de la línea activa
   lo controla JavaScript (función scrollAbajo) en cada carácter
   del typewriter, no CSS, para evitar que toque el borde inferior
   mientras el texto está creciendo --- */
#terminal {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#terminal::-webkit-scrollbar { width: 3px; }
#terminal::-webkit-scrollbar-track { background: transparent; }
#terminal::-webkit-scrollbar-thumb { background: var(--verde-dim); }

/* --- SALIDA: ancho máximo centrado --- */
#salida {
    width: 100%;
    max-width: var(--ancho);
    display: flex;
    flex-direction: column;
}

/* --- SPACER: garantiza que siempre hay espacio vacío debajo
   de la última línea, para que pueda centrarse en el medio
   de la pantalla incluso cuando el historial ya es largo --- */
#spacer-inferior {
    width: 100%;
    max-width: var(--ancho);
    flex-shrink: 0;
    height: 50vh;
}

/* --- LÍNEAS --- */
.linea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
}

.linea-sistema   { color: var(--verde-suave); text-shadow: var(--glow-suave); }
.linea-respuesta { color: var(--verde);       text-shadow: var(--glow); }
.linea-usuario   { color: var(--verde-dim);   margin-top: 0.6rem; }
.linea-espera    { color: var(--verde-suave); opacity: 0.7; }
.linea-error     { color: #ff4444; text-shadow: 0 0 8px rgba(255,68,68,0.8); }
.linea-espacio   { height: 0.5rem; }

/* --- INPUT ACTIVO: cursor pegado al texto, sin justificar a la derecha --- */
.linea-input-activa {
    display: flex;
    align-items: baseline;
    width: 100%;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.prompt {
    color: var(--verde);
    text-shadow: var(--glow);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
}

.campo-input {
    flex: 0 1 auto;
    display: inline-block;
    background: transparent;
    border: none;
    outline: none;
    color: var(--verde);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    text-shadow: var(--glow);
    /* Cursor en bloque sólido (Chrome/Edge). Se mueve correctamente
       con el texto en saltos de línea porque es el caret nativo. */
    caret-color: var(--verde);
    caret-shape: block;
    min-width: 2px;
    max-width: calc(100% - 3rem);
    word-break: break-all;
    line-height: 1.6;
    white-space: pre-wrap;
    animation: parpadeo-caret 1s step-end infinite;
}

@keyframes parpadeo-caret {
    0%, 100% { caret-color: var(--verde); }
    50% { caret-color: transparent; }
}

/* --- BARRA INFERIOR --- */
#barra-inferior {
    position: relative;
    z-index: 51;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border-top: 1px solid var(--verde-dim);
    flex-shrink: 0;
}

.btn-barra {
    color: var(--verde-suave);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.05em;
    transition: color 0.15s, text-shadow 0.15s;
    text-shadow: var(--glow-suave);
}

.btn-barra:hover {
    color: var(--verde);
    text-shadow: var(--glow);
}

/* --- POPUP INFO --- */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 5, 0, 0.92);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.popup-overlay[hidden] { display: none; }

#popup-contenido {
    width: 100%;
    max-width: 560px;
    background: var(--fondo);
    border: 1px solid var(--verde-dim);
    padding: 2rem;
    box-shadow: var(--glow-suave);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.btn-verde {
    margin-top: 1rem;
    background: none;
    border: none;
    color: var(--verde-suave);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    padding: 0;
    text-shadow: var(--glow-suave);
    transition: color 0.15s, text-shadow 0.15s;
}

.btn-verde:hover {
    color: var(--verde);
    text-shadow: var(--glow);
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    html, body { font-size: 14px; }
    #terminal   { padding: 1rem 0.75rem; }
    #barra-inferior { gap: 1.5rem; }
    #popup-contenido { padding: 1.25rem; }
}