/* ===================================
   Navigation Padding Fix
   Evita que los dots de navegación se solapen con el contenido
   =================================== */

/* ===== AJUSTE DE NAVEGACIÓN LATERAL ===== */
@media (min-width: 769px) {
    /* Reposicionar side-nav más a la izquierda y hacerla más pequeña */
    .side-nav {
        position: fixed !important;
        left: 20px !important; /* Reducido de var(--spacing-lg) que era 3rem */
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important; /* Reducido de 3rem */
    }

    /* Hacer los dots más compactos */
    .nav-dots {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important; /* Reducido de 1rem */
    }

    /* Dots más pequeños */
    .nav-dot {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        padding: 5px !important; /* Añadir padding clickeable */
    }

    .dot {
        width: 6px !important; /* Reducido de 8px */
        height: 6px !important;
        background: var(--text-muted) !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
    }

    /* Estado activo y hover */
    .nav-dot.active .dot,
    .nav-dot:hover .dot {
        background: var(--accent) !important;
        transform: scale(1.8) !important; /* Un poco más grande en hover */
        box-shadow: 0 0 15px var(--accent) !important;
    }

    /* Label de navegación */
    .dot-label {
        position: absolute !important;
        left: 20px !important; /* Posición de la etiqueta */
        white-space: nowrap !important;
        background: rgba(10, 10, 10, 0.95) !important;
        padding: 5px 10px !important;
        border-radius: 5px !important;
        font-size: 0.75rem !important;
        color: var(--text-primary) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-10px) !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(139, 92, 246, 0.3) !important;
    }

    .nav-dot:hover .dot-label {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    /* ===== AJUSTE DEL CONTENIDO PRINCIPAL ===== */

    /* Añadir padding izquierdo al contenedor principal para evitar solapamiento */
    .main-container {
        padding-left: 80px !important; /* Espacio para la navegación */
        padding-right: 40px !important; /* Balance visual */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ajustar secciones para respetar el padding */
    section,
    .section {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Hero section con padding adicional */
    #home,
    .hero-section {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Modern sections */
    .modern-hero,
    .modern-experience,
    .modern-projects {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Unified about section */
    .unified-about-section {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Curriculum section */
    .curriculum-section {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Contact section */
    #contact,
    .contact-section {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    /* Work showcase section */
    .work-showcase-section {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

/* ===== PANTALLAS MÁS GRANDES ===== */
@media (min-width: 1200px) {
    /* En pantallas grandes, más espacio */
    .side-nav {
        left: 30px !important;
    }

    .main-container {
        padding-left: 100px !important;
        padding-right: 60px !important;
    }

    section,
    .section {
        max-width: 1600px !important;
    }
}

/* ===== PANTALLAS MUY GRANDES ===== */
@media (min-width: 1600px) {
    /* En pantallas muy grandes, centrar mejor */
    .side-nav {
        left: 40px !important;
    }

    .main-container {
        padding-left: 120px !important;
        padding-right: 80px !important;
    }

    section,
    .section {
        max-width: 1800px !important;
    }
}

/* ===== AJUSTES ESPECÍFICOS ===== */

/* Section indicator no debe solaparse */
#sectionIndicator {
    left: 80px !important; /* Alineado con el padding del contenedor */
}

/* Asegurar que los elementos flotantes respeten el padding */
.hero-info {
    right: 60px !important; /* Dentro del padding derecho */
}

/* Scroll indicator centrado en el área de contenido */
.scroll-indicator {
    left: calc(50% + 20px) !important; /* Compensar por el padding asimétrico */
    transform: translateX(-50%) !important;
}

/* ===== MEJORAS VISUALES ===== */

/* Línea conectora opcional entre dots - COMENTADA/DESACTIVADA */
/* Si quieres activar la línea conectora, descomenta este bloque:
.side-nav::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(139, 92, 246, 0.2) 20%,
        rgba(139, 92, 246, 0.2) 80%,
        transparent
    );
    pointer-events: none;
}
*/

/* Efecto de respiración para el dot activo */
@keyframes breathe {
    0%, 100% {
        transform: scale(1.5);
        opacity: 1;
    }
    50% {
        transform: scale(1.8);
        opacity: 0.8;
    }
}

.nav-dot.active .dot {
    animation: breathe 2s ease-in-out infinite;
}

/* ===== RESPONSIVE PARA TABLETS ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* En tablets, reducir un poco el padding */
    .main-container {
        padding-left: 60px !important;
        padding-right: 30px !important;
    }

    .side-nav {
        left: 15px !important;
    }

    section,
    .section {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ===== FIX PARA ELEMENTOS ESPECÍFICOS ===== */

/* Logo KOmbo no debe verse afectado */
.kombo-logo {
    left: 20px !important; /* Mantener posición original */
}

/* Experience mode button */
.experience-mode-btn {
    right: 20px !important; /* Mantener posición original */
}

/* Theme toggle */
.theme-toggle {
    right: 20px !important; /* Mantener posición original */
}

/* ===== OCULTAR EN MÓVIL ===== */
@media (max-width: 768px) {
    /* En móvil no hay side-nav, así que no necesitamos padding extra */
    .main-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .side-nav {
        display: none !important;
    }
}