@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
       
        html, body {
            height: 100%;
            margin: 0;
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            line-height: 1.6;
        }

         body {
            padding: 2rem;
            box-sizing: border-box;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: 'Courier New', Courier, monospace; 
        }
        
        a { color: var(--text-main); text-decoration: none; cursor: pointer; }

        /* Estructura de consola */
        .log-line { 
            display: flex; 
            margin-bottom: 4px; 
            opacity: 0;
            align-items: flex-start;
        }
        
        .timestamp { width: 120px; color: var(--text-dim); margin-right: 15px; text-align: right; user-select: none; flex-shrink: 0;}
        .success { color: var(--success); font-weight: bold; }
        .accent { color: var(--accent); font-weight: bold; }
        
        /* ASCII Art */
        /*
        .ascii-art {
            color: var(--accent);
            white-space: pre;
            font-weight: bold;
            margin: 20px 0;
            line-height: 1.15;
            font-size: 11px;
            opacity: 0;
        } 
        */

        .ascii-art {
            color: var(--accent);
            white-space: pre; 
            font-weight: bold;
            margin: 20px 0;
            line-height: 1.15;
            font-size: 11px;
            opacity: 0;
            display: block; 
            font-family: monospace;
        }

        a { 
            color: var(--text-main); 
            text-decoration: none; 
            cursor: pointer; 
        }
        
        /* Secciones */
        .view { display: none; }
        .active { display: block; }

        /* Cursor parpadeante */
        .cursor {
            display: inline-block;
            width: 8px;
            height: 15px;
            background-color: var(--text-main);
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 2px;
        }
        @keyframes blink { 50% { opacity: 0; } }

        /* LISTADO DE CARPETAS */
        .dir-list {
            margin-left: 135px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .dir-row {
            display: flex;
            align-items: center;
            opacity: 0; /* Controlado por el JS al final de la carga */
        }
        .dir-perms {
            color: var(--text-dim);
            margin-right: 15px;
            user-select: none;
        }
        .dir-item-box {
            background-color: var(--file-bg);
            padding: 2px 8px;
            border-radius: 2px;
            font-weight: bold;
            transition: background-color 0.2s;
        }
        .dir-item-box:hover {
            background-color: var(--accent);
            color: var(--bg-color);
        }
 
    /* FOOTER PERSISTENTE RESPONSIVE */
        .persistent-footer {
            margin-top: auto;
            margin-top: 3rem;
            width: 100%;
            background-color: #1a1a1a;
            border-top: 1px solid #333;
            padding: 15px 2rem;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            font-size: 12px;
            gap: 10px;
        }

        @media (max-width: 600px) {
            .persistent-footer {
                flex-direction: column;
                text-align: center;
                padding: 12px 1rem;
            }
        }

        .footer-links {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer-links a {
            color: var(--text-dim);
            font-weight: normal;
        }

        .footer-links a:hover {
            color: var(--accent);
            text-decoration: underline;
        }    

        @media (max-width: 768px) {

        body {padding: 1rem;
        }
        .timestamp {display: none;
        }
        .dir-list {margin-left: 0;
        }
        .log-line {display: block;
        }
        .ascii-art {
        display:none;
        }
        .mobile-title {
        display: block;
        text-align: center;
        color: var(--accent);
        font-weight: bold;
        font-size: 18px;
        margin: 20px 0;
        letter-spacing: 2px;
        }
        #view-whoami > div,
        #view-contact > div,
        #view-legal > div,
        #view-privacy > div,
        #view-cookies > div,
        #article-content {
            margin-left: 0 !important;
            max-width: 100% !important;
        }
    }