/* =========================================================================
   CSS: EL DISEÑO Y LA PINTURA DE LA PÁGINA
   ========================================================================= */

/* 1. PALETA DE COLORES (Variables Globales) */
:root {
    --neon-cyan: #00f3ff;       
    --neon-magenta: #ff0055;    
    --neon-yellow: #fcee0a;     
    --bg-dark: #020202;         
    --terminal-green: #00ff41;  
    --font-main: 'Courier New', Courier, monospace; 
}


        /* 2. REGLA UNIVERSAL (*) */

        * { 

            box-sizing: border-box; 

            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%2300f3ff" stroke="%23020202" stroke-width="1.5" d="M2,2 L2,18 L7,13 L10,19 L13,17 L10,12 L16,12 Z"/></svg>'), auto;

            scrollbar-width: thin; 

            scrollbar-color: var(--neon-cyan) var(--bg-dark); 

        }



        /* 3. EL CUERPO PRINCIPAL (body) */

        body {

            background-color: var(--bg-dark); 

            color: var(--neon-cyan);         

            font-family: var(--font-main);   

            margin: 0;                       

            height: 100vh;                   

            overflow: hidden;                 

        }



        /* 4. EFECTOS DE TELEVISIÓN ANTIGUA (CRT) */

        #crt-screen {

            position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column;

            overflow: hidden; 

            animation: turn-on 1s ease-out forwards; 

        }



        #matrix-canvas { position: absolute; inset: 0; z-index: -2; opacity: 0.15; }



        .crt-overlay {

            position: absolute; inset: 0; z-index: 9998; 

            pointer-events: none; 

            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), radial-gradient(circle, transparent 50%, #000 120%);

            background-size: 100% 4px, 100% 100%; 

            animation: flicker 0.2s infinite; 

        }



        /* 5. EL CREADOR DE ANIMACIONES (@keyframes) */

        @keyframes turn-on { 0%, 40% { transform: scaleY(0.001); filter: brightness(5); } 100% { transform: scaleY(1); filter: brightness(1); } }

        @keyframes flicker { 0%, 10% { opacity: 0.95; } 5%, 100% { opacity: 1; } }

        @keyframes glitch-simple { 0%, 100% { transform: translate(0); } 25% { transform: translate(-2px, 2px); } 75% { transform: translate(2px, -2px); } }

        @keyframes fadeInContent { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

        .global-glitch { animation: glitch-simple 0.2s infinite; filter: hue-rotate(90deg); }



        /* 6. DISEÑO DEL DIBUJO ASCII */

        .hack-art-output {

            color: var(--terminal-green); font-family: var(--font-main); 

            font-size: 4px; 

            line-height: 1; white-space: pre; margin: 10px 0; overflow-x: hidden; 

            text-shadow: 0 0 5px rgba(0, 255, 65, 0.5); 

        }



        /* 7. CABECERA */

        header { text-align: center; padding: 20px 0; border-bottom: 1px solid rgba(0,243,255,0.3); }

        .glitch-box { font-size: 2.5rem; font-weight: 900; letter-spacing: 10px; color: var(--neon-cyan); text-shadow: 2px 2px var(--neon-magenta); }

        .subtitle-header { font-size: 0.8rem; color: var(--neon-yellow); margin-top: 5px; }



        /* 8. ESTRUCTURA PRINCIPAL */

        .main-wrapper { 

            display: grid; 

            max-width: 1800px; 

            grid-template-columns: 300px 1px 1fr 1px 450px; 

            gap: 15px; padding: 20px; 

            height: calc(100vh - 100px); 

            margin: auto; 

        }

        .cyan-line { background: var(--neon-cyan); opacity: 0.3; } 



        /* 9. PANELES IZQUIERDOS Y MÓDULOS */

        .side-panel { display: flex; flex-direction: column; gap: 15px; overflow-y: auto; } 

        

        .module { background: rgba(5, 5, 5, 0.9); border: 1px solid rgba(0,243,255,0.3); padding: 15px; position: relative; transition: 0.2s; }

        .module:hover { border-color: var(--neon-cyan); } 

        

        .module-header { color: var(--neon-yellow); font-size: 0.85rem; margin-bottom: 10px; border-bottom: 1px dashed rgba(0,243,255,0.3); padding-bottom: 5px; }



        .btn-cyber { background: rgba(0,0,0,0.5); border: 1px solid rgba(0,243,255,0.3); color: var(--neon-cyan); width: 100%; padding: 10px; font-weight: bold; font-family: inherit; margin-bottom: 8px; transition: 0.2s; text-align: left; border-radius: 0; }

        .btn-cyber:hover, .btn-cyber.active { background: rgba(0, 243, 255, 0.1); border-color: var(--neon-cyan); padding-left: 20px; } 

        .btn-cyber.active { border-color: var(--neon-magenta); color: #fff; background: rgba(255,0,85,0.15); } 



        /* FILTRO HORIZONTAL SUPERIOR */

        .top-filter-module {

            background: rgba(5, 5, 5, 0.9); border: 1px solid rgba(0,243,255,0.3); padding: 15px; margin-bottom: 25px; transition: 0.2s;

        }

        .top-filter-module:hover { border-color: var(--neon-cyan); }

        .horizontal-filters { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }

        .horizontal-filters .btn-cyber { width: auto; flex-grow: 1; text-align: center; margin-bottom: 0; }

        .horizontal-filters .btn-cyber:hover, .horizontal-filters .btn-cyber.active { padding-left: 10px; transform: translateY(-2px); }



        /* 10. ZONA CENTRAL */

        #center-zone { padding: 0 20px; overflow-y: auto; }

        .category-container { display: block; margin-bottom: 30px; transition: opacity 0.3s; }

        .category-header { color: var(--neon-magenta); font-size: 1.2rem; margin-bottom: 15px; text-shadow: 0 0 5px rgba(255,0,85,0.5); }

        

        .post-card { background: rgba(0,0,0,0.8); border: 1px solid rgba(0,243,255,0.2); padding: 15px; margin-bottom: 10px; border-left: 3px solid var(--neon-cyan); transition: 0.2s; }

        .post-card:hover { border-color: var(--neon-cyan); border-left-color: var(--neon-magenta); background: rgba(0,243,255,0.05); }

        .post-title { font-size: 1.1rem; color: #fff; margin-bottom: 5px; text-transform: uppercase; }

        .post-card:hover .post-title { color: var(--neon-cyan); transition: color 0.3s ease; }

        .post-date { color: var(--terminal-green); font-size: 0.8rem; margin-bottom: 10px; }

        

        .btn-action { display: inline-block; background: var(--neon-cyan); color: var(--bg-dark); border: none; font-family: inherit; padding: 4px 10px; font-size: 0.8rem; font-weight: bold; transition: 0.2s; cursor: pointer; text-decoration: none; }

        .btn-action:hover { background: #fff; color: #000; }



        /* CONTENIDO EXPANDIBLE DEL POST */

        .post-content {

            display: none;

            margin-top: 15px;

            border-top: 1px dashed rgba(0,243,255,0.3);

            padding-top: 15px;

            font-size: 0.95rem;

            color: #d1d1d1;

            line-height: 1.6;

            animation: fadeInContent 0.3s ease-in-out;

            text-shadow: none;

        }

        

        .post-content a { color: var(--neon-magenta); text-decoration: underline; }

        .post-content img { max-width: 100%; height: auto; border: 1px solid var(--neon-cyan); border-radius: 4px; margin: 10px 0; }

        .post-content h1, .post-content h2, .post-content h3 { color: #fff; }

        .post-content code { background: rgba(0, 243, 255, 0.1); padding: 2px 5px; color: var(--terminal-green); }



        /* =========================================================================

           10.5 NUEVO: MÓDULO ABOUT ME (Perfil del Usuario)

           ========================================================================= */

        .about-me-module {

            background: rgba(5, 5, 5, 0.9);

            border: 1px solid var(--neon-magenta);

            padding: 20px;

            margin-bottom: 25px;

            position: relative;

            box-shadow: inset 0 0 15px rgba(255, 0, 85, 0.1);

            transition: 0.3s;

        }

        .about-me-module:hover {

            border-color: var(--neon-cyan);

            box-shadow: inset 0 0 15px rgba(0, 243, 255, 0.1);

        }

        .about-me-content {

            color: #d1d1d1;

            font-size: 0.95rem;

            line-height: 1.6;

            animation: fadeInContent 0.5s ease-in-out;

        }

        .about-me-content h3 {

            color: var(--neon-cyan);

            margin: 5px 0 15px 0;

            text-transform: uppercase;

            letter-spacing: 1px;

            text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);

        }

        .about-me-content h4 {

            color: var(--neon-yellow);

            margin: 20px 0 10px 0;

            font-size: 0.9rem;

        }

        .about-me-content ul {

            padding-left: 20px;

            margin: 10px 0;

        }

        .about-me-content li {

            margin-bottom: 8px;

            color: var(--terminal-green); /* Color de las viñetas */

        }

        .about-me-content li .text {

            color: #d1d1d1; /* Color del texto de la lista */

        }

        .highlight-magenta {

            color: var(--neon-magenta);

            font-weight: bold;

        }

        .about-me-content blockquote {

            border-left: 3px solid var(--neon-cyan);

            background: rgba(0, 243, 255, 0.05);

            margin: 20px 0 0 0;

            padding: 15px;

            font-style: italic;

            color: var(--terminal-green);

        }



        /* 11. ESTRUCTURA DE LA COLUMNA DERECHA */

        .side-panel-right { display: grid; grid-template-columns: 200px 1fr; gap: 15px; height: 100%; overflow: hidden; }

        .sub-col-gifs { display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }

        .terminal-module { display: flex; flex-direction: column; height: 100%; margin: 0; }



        /* 12. LA TERMINAL DE COMANDOS */

        #sys-log-container { display: flex; flex-direction: column; flex-grow: 1; height: 0; overflow-y: auto; font-size: 0.75rem; color: #aaa; }

        .terminal-input-wrapper { display: flex; margin-top: 10px; border-top: 1px dashed rgba(0,243,255,0.3); padding-top: 10px; }

        .terminal-input-wrapper input { background: transparent; border: none; color: var(--terminal-green); font-family: inherit; width: 100%; outline: none; }

        

        /* 13. PANTALLA NEGRA DE CARGA */

        #splash { position: fixed; inset: 0; background: var(--bg-dark); z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.3s; }

        #boot-text { color: var(--terminal-green); font-size: 1rem; width: 60vw; height: 200px; }

        #enter-btn { background: transparent; color: var(--neon-cyan); border: 2px solid var(--neon-cyan); padding: 15px 40px; font-size: 1.5rem; font-family: inherit; display: none; transition: 0.2s; }

        #enter-btn:hover { background: var(--neon-cyan); color: #000; }



        /* 14. LOS GIFs DE MONITOREO */

        .cyber-gif { width: 100%; height: auto; display: block; border: 1px solid rgba(0,243,255,0.3); filter: contrast(120%) brightness(90%); }

        .neighbor-img { width: 100%; height: auto; display: block; border: 1px solid rgba(0,243,255,0.3); filter: contrast(120%) brightness(80%); transition: all 0.3s ease; }

        .neighbor-img:hover { border-color: var(--neon-magenta); filter: contrast(100%) brightness(110%); transform: scale(1.03); }

/* =========================================================================
           NUEVO: ANIMACIÓN DE DESENCRIPTADO PARA EL CONTENIDO
           ========================================================================= */
        .decrypt-anim {
            /* Usamos steps() para que parezca un barrido de terminal en lugar de un fade suave */
            animation: decryptFade 0.5s steps(10, end) forwards;
        }

        @keyframes decryptFade {
            0% { opacity: 0; filter: blur(4px) hue-rotate(90deg); transform: translateX(-10px); }
            50% { opacity: 0.8; filter: blur(1px) invert(20%); transform: translateX(5px); }
            100% { opacity: 1; filter: none; transform: translateX(0); }
        }

      /* 15. RESPONSIVE DESIGN */
    @media (max-width: 1200px) { 
        .main-wrapper { grid-template-columns: 1fr; height: auto; overflow: auto; } 
        .cyan-line { display: none; } 
        .side-panel-right { grid-template-columns: 1fr; height: auto; } 
        .terminal-module { height: 400px; }
        .horizontal-filters .btn-cyber { width: 100%; flex-basis: 100%; }
    }