/* VARIABLES GLOBALES */
:root {
    --bg-color: #050505;
    --text-color: #00ff41;
    --border-color: #008f11;
    --font-terminal: 'Courier New', Courier, monospace;
}

body, html {
    font-family: var(--font-terminal);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
}

/* EFECTO CRT Y MODO ROOT */
.scanlines {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    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));
    background-size: 100% 2px, 3px 100%; 
    pointer-events: none; 
    z-index: 100;
}

body.root-mode { --text-color: #ff3333; --border-color: #cc0000; }
body.root-mode .scanlines {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(20, 0, 0, 0.4) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

/* EFECTO MATRIX (Oculto por defecto) */
#matrix-canvas {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; /* Por encima de todo */
    background: #000;
    cursor: pointer;
}

.highlight { background: var(--border-color); color: var(--bg-color); padding: 0 4px; font-weight: bold; }
.ascii-art { font-family: monospace; white-space: pre-wrap; color: var(--text-color); margin-bottom: 1rem; font-size: 0.85rem; }
.badge-img { margin-top: 10px; margin-bottom: 10px; max-width: 100%; border: 1px dashed var(--border-color); padding: 5px; }

/* LOGIN & RRHH BYPASS */
.terminal-container { height: 100vh; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s; }
.login-box { border: 2px solid var(--border-color); padding: 2rem; width: 90%; max-width: 400px; background: #0a0a0a; z-index: 10;}
.input-group { margin-bottom: 1.5rem; }
.input-group label { display: block; margin-bottom: 0.5rem; }
input[type="text"], input[type="password"] { width: 90%; padding: 0.5rem; background: transparent; border: 1px solid var(--border-color); color: var(--text-color); font-family: var(--font-terminal); outline: none; }
.btn-hack { background: var(--text-color); color: var(--bg-color); border: none; padding: 1rem; font-family: var(--font-terminal); font-weight: bold; cursor: pointer; width: 100%; margin-top: 1rem; transition: 0.3s; }
.btn-hack:hover { background: var(--bg-color); color: var(--text-color); border: 1px solid var(--text-color); }
.blinking-text { animation: blink 1s step-end infinite; color: var(--text-color); font-weight: bold; }
@keyframes blink { 50% { opacity: 0; } }

.hr-bypass { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--border-color); text-align: center; }
.hr-bypass p { margin-bottom: 0.5rem; font-size: 0.9rem; }
.hr-link { color: var(--text-color); text-decoration: none; font-weight: bold; font-size: 0.95rem; transition: 0.3s; display: inline-block; }
.hr-link:hover { background: var(--text-color); color: var(--bg-color); }

.hidden { display: none !important; }
.fade-out { opacity: 0; pointer-events: none; }

/* TERMINAL PRINCIPAL */
#portfolio-content { padding: 1rem; height: 100vh; box-sizing: border-box; animation: fadeIn 1s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#terminal-wrapper { height: 95%; display: flex; flex-direction: column; max-width: 1000px; margin: auto; border: 1px solid var(--border-color); padding: 1rem; background: rgba(5, 5, 5, 0.9); position: relative; z-index: 10; }
#terminal-output { flex-grow: 1; overflow-y: auto; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
#terminal-output::-webkit-scrollbar { width: 8px; }
#terminal-output::-webkit-scrollbar-thumb { background: var(--border-color); }

.output-block { border-left: 2px solid var(--border-color); padding-left: 1rem; margin-top: 0.5rem; background: #0a0a0a; padding-top: 0.5rem; padding-bottom: 0.5rem;}
.error-msg { color: #ff3333; }

/* MENU Y COMANDOS */
.cmd-menu { display: flex; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap; border-top: 1px dashed var(--border-color); padding-top: 1rem;}
.cmd-btn { background: transparent; color: var(--text-color); border: 1px dashed var(--border-color); padding: 5px 10px; cursor: pointer; font-family: var(--font-terminal); transition: 0.2s;}
.cmd-btn:hover { background: var(--text-color); color: var(--bg-color); }
.input-line { display: flex; align-items: center; }
.prompt { font-weight: bold; margin-right: 10px; white-space: nowrap; }
#cmd-input { flex-grow: 1; border: none; background: transparent; color: var(--text-color); font-family: var(--font-terminal); font-size: 1rem; outline: none; }

/* GRID GITHUB */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { border: 1px solid var(--border-color); padding: 1rem; transition: transform 0.2s; background: #0d0d0d;}
.card:hover { transform: translateY(-3px); border-color: var(--text-color);}
.card a { color: var(--text-color); text-decoration: none; font-weight: bold;}
.card a:hover { text-decoration: underline; }