/* ============================================== */
/* ESTILOS BASE (ESCRITORIO / PC)
/* ============================================== */

/* Contenedor principal */
.nav-wrapper {
    position: relative; 
    z-index: 100; /* Z-index alto para estar sobre todo */
    width: 100%;
    display: block;
    margin-top: 12px;
}

/* Estilo base barras (Glassmorphism para PC) */
.nav-top-bar,
.nav-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    background-color: rgba(10, 5, 15, 0.65); /* Un poco más oscuro para legibilidad */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- BARRA SUPERIOR --- */
.nav-top-bar {
    max-width: 1150px;
    margin: 0 auto;
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    position: relative;
    z-index: 102;
}

/* Logo */
.nav-top-bar .brand-badge {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.nav-top-bar .brand-badge i { font-size: 1.4rem; color: #00bfff; }

/* Botones Usuario (PC) */
.nav-user-buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.nav-user-buttons .nav-cta-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #eee;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: 0.2s;
}
.nav-user-buttons .nav-cta-secondary:hover { background: rgba(255,255,255,0.15); color: #fff; }

.nav-user-buttons .nav-cta-primary {
    background-color: #00bfff;
    border: 1px solid #00bfff;
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: 0.2s;
}
.nav-user-buttons .nav-cta-primary:hover { background-color: #33ccff; box-shadow: 0 0 12px rgba(0, 191, 255, 0.4); }


/* --- BARRA INFERIOR --- */
.nav-bottom-bar {
    justify-content: center; 
    max-width: 1150px;
    margin: 0 auto; 
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    z-index: 101;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link-btn {
    background: transparent;
    border: none;
    color: #ccc;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-link-btn:hover, .nav-link-btn.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-toggle { display: none; } /* Oculto en PC */

/* --- DROPDOWNS --- */
.nav-dropdown { position: relative; }

.dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: rgba(20, 15, 25, 0.95); /* Casi sólido */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    margin-top: 8px;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 200;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.dropdown-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-panel a {
    color: #ddd;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}
.dropdown-panel a:hover { background: rgba(255,255,255,0.1); color: #fff; }


/* ========================================================================== */
/* RESPONSIVE (CORREGIDO: ALINEACIÓN Y TOGGLE)                               */
/* ========================================================================== */

@media (max-width: 992px) {
    
    /* 1. Ajuste del Wrapper */
    .nav-wrapper {
        margin: 0;
        position: sticky;
        top: 0;
    }

    /* 2. Barra Superior */
    .nav-top-bar {
        max-width: 100%;
        border-radius: 0;
        border: none;
        background-color: #1a1621;
        padding: 0.8rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: none; 
        justify-content: space-between;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        font-size: 1.1rem;
        width: 38px;
        height: 38px;
        border-radius: 6px;
        cursor: pointer;
    }

    /* 3. Barra Inferior (Menú Desplegable) */
    .nav-bottom-bar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0 0 10px 10px;
        border: none;
        background-color: #15111a;
        padding: 0;
        
        display: none;
        flex-direction: column;
        align-items: flex-start;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    }

    .nav-bottom-bar.open {
        display: flex;
        animation: slideDown 0.25s ease-out forwards;
    }

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

    /* 4. Lista de Enlaces - CORRECCIÓN DE ALINEACIÓN AQUÍ */
    .nav-links {
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    /* Estilo unificado para botones (Repositorio) y links (Acerca de) */
    .nav-link-btn {
        width: 100%;
        padding: 1rem 1.5rem;
        border-radius: 0;
        border: none; /* Quitamos bordes por defecto del button */
        border-bottom: 1px solid rgba(255,255,255,0.05);
        background: transparent; /* Asegurar fondo transparente */
        
        /* ALINEACIÓN CLAVE */
        display: flex;
        justify-content: space-between; /* Texto a la izquierda, flecha a la derecha */
        align-items: center;
        text-align: left; /* Forzar texto a la izquierda */
        
        font-size: 1rem;
        color: #ccc; /* Color base */
    }
    
    /* El span que contiene el texto e icono inicial */
    .nav-link-btn span { 
        flex-grow: 1; /* Ocupa el espacio disponible */
        display: flex; /* Para alinear icono y texto si están separados */
        align-items: center;
        gap: 10px; /* Separación entre icono y texto */
    }
    
    /* Corrección específica para cuando es botón */
    button.nav-link-btn {
        font-family: inherit; /* Heredar fuente */
        cursor: pointer;
    }

    /* Rotación de flecha */
    .nav-link-btn .caret { 
        transform: rotate(-90deg); 
        transition: transform 0.2s;
    }
    
    /* Cuando el menú (su hermano siguiente) está abierto, rotar flecha hacia abajo */
    /* Nota: Esto requiere CSS avanzado selectores hermanos, pero visualmente la flecha derecha está bien */

    /* 5. Submenús */
    .nav-dropdown { width: 100%; }

    .dropdown-panel {
        position: relative;
        width: 100%;
        background: #0d0a10; 
        box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
        border: none;
        border-radius: 0;
        display: none;
        padding: 0;
    }

    .dropdown-panel.show { display: flex; }

    .dropdown-panel a {
        padding: 0.9rem 1rem 0.9rem 2.5rem; 
        border-bottom: 1px solid rgba(255,255,255,0.03);
        justify-content: flex-start; /* Subitems alineados a la izquierda */
    }

    /* 6. Botones Usuario */
    .nav-user-buttons {
        width: 100%;
        flex-direction: column;
        padding: 1.5rem;
        background-color: #1a1621;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: auto;
    }

    .nav-user-buttons .nav-cta-secondary,
    .nav-user-buttons .nav-cta-primary {
        width: 100%;
        text-align: center;
        padding: 0.8rem;
        font-size: 1rem;
    }
}