/* ==========================================
   INDEX.CSS — Página de inicio
   Portafolio CJ_CORE — Cristia Gimenez
   ========================================== */


        :root {
            --primary-cyan: #00f0ff;
            --surface-dark: #0a0b10;
        }
        body {
            background-color: var(--surface-dark);
            overflow-x: hidden;
            cursor: crosshair;
        }

        /* ==========================================
           SIDEBAR — Click para abrir/cerrar, queda abierto
           (Fusionado desde los <style> inline del index.html)
           ========================================== */
        #sidebar {
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #sidebar.open {
            width: 240px !important;
        }
        #sidebar.open .sidebar-label,
        #sidebar.open .opacity-0 {
            opacity: 1 !important;
        }
        #sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 45;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(2px);
        }
        #sidebar-backdrop.active {
            display: block;
        }

        /* ==========================================
           LOGO TYPEWRITER — el JS dispara la animación tras el boot
           ========================================== */
        #cj-logo.is-animating .cj-letter {
            opacity: 0;
            animation: cj-type-in 0.4s ease-out forwards;
        }
        #cj-logo.is-animating .cj-letter:nth-of-type(1) {
            animation-delay: 0.1s;
        }
        #cj-logo.is-animating .cj-letter:nth-of-type(2) {
            animation-delay: 0.8s;
        }
        @keyframes cj-type-in {
            from { opacity: 0; transform: translateY(-2px); }
            to { opacity: 1; transform: translateY(0); }
        }


        /* ==========================================
           BARRAS DE TECNOLOGÍAS — crecen al cargar y laten
           ========================================== */
        .tech-bar {
            height: 100%;
            background: var(--primary-cyan);
            box-shadow: 0 0 6px var(--primary-cyan);
            width: 0;
            transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .tech-bar.is-pulsing {
            animation: tech-pulse 2.5s ease-in-out infinite;
        }
        @keyframes tech-pulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--primary-cyan); }
            50% { opacity: 0.6; box-shadow: 0 0 16px var(--primary-cyan); }
        }

        /* Tech Nebula Background */
        .tech-nebula-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            background: 
                radial-gradient(circle at 15% 20%, rgba(0, 240, 255, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(0, 79, 84, 0.12) 0%, transparent 50%),
                linear-gradient(160deg, #050608 0%, #0d0e13 100%);
            overflow: hidden;
        }
        
        .data-stream-line {
            position: absolute;
            background: linear-gradient(to bottom, transparent, var(--primary-cyan), transparent);
            width: 1px;
            opacity: 0.15;
            animation: move-stream 10s linear infinite;
        }
        @keyframes move-stream {
            0% { transform: translateY(-100%) rotate(15deg); }
            100% { transform: translateY(200%) rotate(15deg); }
        }

        .data-particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--primary-cyan);
            border-radius: 50%;
            opacity: 0.2;
            pointer-events: none;
            animation: drift-particle 20s linear infinite;
        }
        @keyframes drift-particle {
            0% { transform: translate(0, 100vh); opacity: 0; }
            10% { opacity: 0.5; }
            90% { opacity: 0.5; }
            100% { transform: translate(100px, -10vh); opacity: 0; }
        }

        .hud-grid {
            background-image: 
                linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: center;
        }

        .scanning-line {
            position: fixed;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, transparent, #00f0ff, transparent);
            left: 0;
            top: -4px;
            animation: scan 6s linear infinite;
            z-index: 60;
            pointer-events: none;
            opacity: 0.2;
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
        }

        @keyframes scan {
            0% { top: -4px; }
            100% { top: 100%; }
        }

        .hud-rotate { animation: rotate 20s linear infinite; }
        .hud-rotate-reverse { animation: rotate-reverse 30s linear infinite; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes rotate-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
        
        /* Glitch Animation */
        .glitch-container {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: #0A0B10;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: glitch-fade-out 0.5s ease-in 3.5s forwards;
            padding: 20px;
        }

        .glitch-text {
            color: #00F0FF;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 900;
            font-size: clamp(1.5rem, 8vw, 4rem);
            position: relative;
            animation: text-glitch 0.2s infinite;
            text-align: center;
            line-height: 1.1;
        }

        @keyframes glitch-fade-out {
            0% { opacity: 1; visibility: visible; }
            100% { opacity: 0; visibility: hidden; }
        }

        @keyframes text-glitch {
            0% { transform: translate(0); text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9; }
            20% { transform: translate(-2px, 2px); text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9; }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }

        /* Bio Sync Animation */
        .bio-bar {
            width: 4px;
            background: var(--primary-cyan);
            border-radius: 2px;
            animation: bio-pulse 1s infinite alternate;
        }
        @keyframes bio-pulse {
            from { height: 4px; opacity: 0.3; }
            to { height: 24px; opacity: 1; }
        }

        /* Circular Progress */
        .hud-circle-svg {
            transform: rotate(-90deg);
        }
        .hud-circle-path {
            stroke-dasharray: 100 100;
            stroke-dashoffset: 100;
            animation: circle-fill 4s linear infinite;
        }
        @keyframes circle-fill {
            0% { stroke-dashoffset: 100; }
            50% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 100; }
        }

        /* Power Off Mode */
        .power-off #main-content {
            opacity: 0.1;
            filter: grayscale(1) blur(4px);
            pointer-events: none;
        }
        .power-off .scanning-line { display: none; }
        #standby-overlay { display: none; }
        .power-off #standby-overlay { display: flex; z-index: 900; }

        /* Reset Overlay */
        #reset-overlay { display: none; z-index: 950; }
        #reset-overlay.active { display: flex; }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        #terminal-overlay {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 320px;
            height: 224px;
            background: rgba(10, 11, 16, 0.95);
            border: 1px solid var(--primary-cyan);
            z-index: 150;
            font-family: monospace;
            font-size: 10px;
            padding: 10px;
            color: var(--primary-cyan);
            box-shadow: 0 0 30px rgba(0, 240, 255, 0.15);
        }
        #terminal-overlay.active { display: flex; flex-direction: column; }
    


@media (min-width: 769px) {
    #main-content { left: 70px; }
}

@media (max-width: 768px) {
    #main-content {
        position: relative !important;
        height: auto !important;
        min-height: calc(100vh - 3.5rem) !important;
        overflow: visible !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        margin-top: 3.5rem !important;
        padding-left: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ==========================================
   FIX MÓVIL/TABLET — Inicio (idéntico a Proyectos)
   ========================================== */

/* Sidebar coherente: solo expande con click en touch */
@media (max-width: 1024px) {
    #sidebar {
        z-index: 60 !important;
        width: 70px !important;
    }
    /* Evitar que el hover (Tailwind hover:w-[240px]) expanda al tocar */
    #sidebar:hover { width: 70px !important; }
    #sidebar.locked,
    #sidebar.open {
        width: 240px !important;
    }
    #sidebar.locked .opacity-0,
    #sidebar.open .opacity-0,
    #sidebar.locked .group-hover\:opacity-100,
    #sidebar.open .group-hover\:opacity-100 {
        opacity: 1 !important;
    }
    /* Cuerpo scrollable en mobile/tablet */
    body { overflow-y: auto !important; }
}

/* Móvil (≤768px) */
@media (max-width: 768px) {
    nav .hidden.md\:flex { display: none !important; }

    /* HUD ocupa pantalla con padding para el sidebar de 70px */
    #main-content {
        padding-left: 70px !important;
        padding-right: 0 !important;
    }
    /* Footer fijo en HUD: ajustar a ancho disponible */
    #main-content > .absolute.bottom-3 {
        left: calc(50% + 35px) !important;
        padding: 0 0.5rem !important;
        text-align: center !important;
    }
    #main-content > .absolute.bottom-3 > div:first-child {
        font-size: 7px !important;
        white-space: normal !important;
        line-height: 1.6 !important;
    }
}

/* Móvil pequeño (≤480px) */
@media (max-width: 480px) {
    #main-content { padding-left: 60px !important; }
    #main-content > .absolute.bottom-3 { left: calc(50% + 30px) !important; }
}

/* ==========================================
   HOME MÓVIL — Panel interactivo (solo ≤768px)
   El escritorio NO se toca: #mobile-home oculto por defecto.
   ========================================== */
#mobile-home { display: none; }

@media (max-width: 768px) {
    body { cursor: auto; overflow-y: auto !important; }

    /* En el inicio móvil: fuera el HUD circular y el rail lateral */
    #main-content { display: none !important; }
    #sidebar { display: none !important; }
    #sidebar-backdrop { display: none !important; }

    #mobile-home {
        display: flex !important;
        flex-direction: column;
        position: relative;
        z-index: 40;
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        padding: 76px 18px 26px;
        gap: 14px;
    }

    /* ---- Línea de estado ---- */
    .mh-status {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: 'Space Grotesk', monospace;
        font-size: 11px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(0, 240, 255, 0.7);
    }
    .mh-status .mh-clock {
        margin-left: auto;
        color: rgba(0, 240, 255, 0.4);
        letter-spacing: 0.12em;
        font-variant-numeric: tabular-nums;
    }
    .mh-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--primary-cyan);
        box-shadow: 0 0 10px var(--primary-cyan);
        animation: mh-blink 1.6s ease-in-out infinite;
    }

    /* ---- Tarjeta de identidad ---- */
    .mh-id {
        position: relative;
        border: 1px solid rgba(0, 240, 255, 0.22);
        background: linear-gradient(160deg, rgba(13, 14, 19, 0.92), rgba(10, 11, 16, 0.7));
        backdrop-filter: blur(8px);
        padding: 24px 18px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }
    /* esquinas tácticas */
    .mh-id::before, .mh-id::after {
        content: "";
        position: absolute;
        width: 18px; height: 18px;
        border: 2px solid var(--primary-cyan);
        opacity: 0.55;
    }
    .mh-id::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
    .mh-id::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

    .mh-avatar {
        width: 96px; height: 96px;
        border-radius: 50%;
        border: 2px solid rgba(0, 240, 255, 0.6);
        padding: 3px;
        background: #0a0b10;
        box-shadow: 0 0 26px rgba(0, 240, 255, 0.28);
        overflow: hidden;
        flex: none;
    }
    .mh-avatar img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: 50% 16%;
        border-radius: 50%;
    }

    .mh-tagline {
        margin-top: 14px;
        font-family: 'Space Grotesk', monospace;
        font-size: 9.5px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(0, 240, 255, 0.55);
    }
    .mh-name {
        margin-top: 8px;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 26px;
        letter-spacing: 0.1em;
        color: #fff;
        line-height: 1.05;
    }
    .mh-role {
        margin-top: 7px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--primary-cyan);
        text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
    }
    .mh-term {
        margin-top: 16px;
        width: 100%;
        border: 1px solid rgba(0, 240, 255, 0.16);
        background: rgba(0, 240, 255, 0.04);
        padding: 10px 12px;
        font-family: 'Space Grotesk', monospace;
        font-size: 13px;
        color: rgba(227, 225, 233, 0.92);
        text-align: left;
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    .mh-term .mh-prompt { color: var(--primary-cyan); margin-right: 7px; font-weight: 700; }
    .mh-caret {
        display: inline-block;
        width: 8px; height: 1.05em;
        margin-left: 3px;
        vertical-align: -2px;
        background: var(--primary-cyan);
        box-shadow: 0 0 8px var(--primary-cyan);
        animation: mh-caret-blink 1s steps(1) infinite;
    }

    .mh-chips {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: center;
    }
    .mh-chip {
        font-family: 'Space Grotesk', monospace;
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(0, 240, 255, 0.82);
        border: 1px solid rgba(0, 240, 255, 0.3);
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(0, 240, 255, 0.05);
        transition: all 0.25s;
        cursor: pointer;
    }
    .mh-chip.is-active,
    .mh-chip:active {
        background: var(--primary-cyan);
        color: #001417;
        border-color: var(--primary-cyan);
        box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
    }

    /* ---- Navegación ---- */
    .mh-nav { display: flex; flex-direction: column; gap: 12px; }

    .mh-proyectos {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 7px;
        border: 1px solid rgba(0, 240, 255, 0.5);
        background: linear-gradient(150deg, rgba(0, 240, 255, 0.13), rgba(0, 240, 255, 0.03) 55%, rgba(10, 11, 16, 0.6));
        padding: 18px 18px 16px;
        text-decoration: none;
        overflow: hidden;
        opacity: 0;
        animation: mh-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 4.1s forwards,
                   mh-pulse-border 2.8s ease-in-out 4.9s infinite;
    }
    .mh-proyectos:active { transform: scale(0.985); }
    .mh-pj-head { display: flex; align-items: center; justify-content: space-between; }
    .mh-pj-head .material-symbols-outlined {
        font-size: 30px;
        color: var(--primary-cyan);
        filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
    }
    .mh-pj-tag {
        font-family: 'Space Grotesk', monospace;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: #001417;
        background: var(--primary-cyan);
        padding: 4px 9px;
        border-radius: 999px;
        box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
    }
    .mh-pj-title {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 30px;
        letter-spacing: 0.06em;
        color: #fff;
        line-height: 1;
        text-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
    }
    .mh-pj-sub { font-size: 12.5px; color: rgba(227, 225, 233, 0.7); }
    .mh-pj-cta {
        margin-top: 5px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: flex-start;
        font-family: 'Space Grotesk', monospace;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--primary-cyan);
    }
    .mh-pj-cta .material-symbols-outlined {
        font-size: 18px;
        animation: mh-nudge 1.6s ease-in-out infinite;
    }

    .mh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mh-tile {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
        border: 1px solid rgba(0, 240, 255, 0.2);
        background: rgba(13, 14, 19, 0.72);
        padding: 16px 14px;
        text-decoration: none;
        transition: border-color 0.25s, background 0.25s, transform 0.15s;
    }
    .mh-tile:active {
        border-color: rgba(0, 240, 255, 0.7);
        background: rgba(0, 240, 255, 0.08);
        transform: scale(0.97);
    }
    .mh-tile .material-symbols-outlined { font-size: 26px; color: var(--primary-cyan); }
    .mh-tile-t {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #fff;
    }
    .mh-tile-s { font-size: 11px; color: rgba(227, 225, 233, 0.55); letter-spacing: 0.04em; }

    .mh-foot {
        margin-top: auto;
        padding-top: 12px;
        text-align: center;
        font-family: 'Space Grotesk', monospace;
        font-size: 9px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(0, 240, 255, 0.3);
    }

    /* ---- Animaciones del panel ---- */
    .mh-rise { opacity: 0; animation: mh-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
}

@keyframes mh-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes mh-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes mh-caret-blink { 50% { opacity: 0; } }
@keyframes mh-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes mh-pulse-border {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.12); border-color: rgba(0, 240, 255, 0.45); }
    50% { box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.8), 0 0 36px rgba(0, 240, 255, 0.32); border-color: rgba(0, 240, 255, 0.85); }
}