/**
 * ════════════════════════════════════════════════════════════════════════════
 * NAVBAR FIJO EN DISPOSITIVOS NO FULL HD
 * ════════════════════════════════════════════════════════════════════════════
 *
 * PROPÓSITO:
 * En pantallas menores a Full HD (≤1920px), el navbar se mantiene FIJO
 * en la parte superior de la pantalla y NO cambia a modo flotante.
 *
 * COMPORTAMIENTO:
 * - PANTALLAS ≤1920px: Navbar siempre fijo arriba, sin efecto flotante
 * - FULL HD+ (>1920px): Comportamiento flotante normal al hacer scroll
 *
 * ARCHIVOS RELACIONADOS (Nov 2025):
 * 1. js/gep-floating-navbar.js: NO aplica clase "navbar-floating" en pantallas ≤1920px
 * 2. js/gep-reading-progress-navbar.js: NO aplica efectos de escala/bordes en pantallas ≤1920px
 * 3. Este archivo CSS: Fuerza propiedades estáticas en pantallas ≤1920px
 *
 * PROBLEMA SOLUCIONADO:
 * El navbar se encogía en móvil/tablet debido a estilos INLINE aplicados por JavaScript
 * (navbar.style.transform = 'scale(0.8)'). Los estilos inline tienen máxima prioridad
 * sobre CSS, por lo que fue necesario modificar AMBOS archivos JS para prevenir la escala.
 *
 * SOLUCIÓN IMPLEMENTADA:
 * - CSS: Deshabilitar transitions + forzar propiedades estáticas
 * - JS (gep-reading-progress-navbar.js): Resetear transform/borderRadius/boxShadow en ≤1920px
 * - JS (gep-floating-navbar.js): No agregar clase navbar-floating en ≤1920px
 *
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════════════════
   📱 NAVBAR FIJO EN PANTALLAS NO FULL HD (<1920px)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1919px) {
    
    /* ✨ AJUSTAR POSICIÓN DE LOGO - MÁS CONSERVADOR */
    .navbar-static .navbar-brand,
    .navbar-floating .navbar-brand,
    .navbar.scrolled .navbar-brand,
    .navbar-static.scrolled .navbar-brand,
    .navbar-floating.scrolled .navbar-brand,
    .navbar-logo-independent,
    .logo-coin-container {
        top: 25px !important;  /* Posición más conservadora para el logo */
        transform: translateY(-50%) !important;  /* Centrar verticalmente */
    }
    
    /* ✨ AJUSTAR ENLACES DE NAVEGACIÓN - MÁS CONSERVADOR */
    .navbar-static .nav-link,
    .navbar-floating .nav-link,
    .navbar.scrolled .nav-link,
    .navbar-static.scrolled .nav-link,
    .navbar-floating.scrolled .nav-link {
        padding-top: 25px !important;  /* Posición más conservadora para los enlaces */
        padding-bottom: 10px !important;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════
       FORZAR que navbar-floating sea IDÉNTICO a navbar-static
       ════════════════════════════════════════════════════════════════════════════
       Copiar TODAS las propiedades de .navbar-static para anular completamente
       el comportamiento flotante en pantallas <1920px
       ════════════════════════════════════════════════════════════════════════════ */
    
    .navbar-floating {
        /* Copiar estilos de .navbar-static EXACTAMENTE */
        position: fixed !important;
        top: 0 !important; /* NO -18px como en el flotante original */
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background-color: var(--navbar-bg-color) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        color: var(--gep-dark-blue) !important;
        width: 100% !important;
        overflow: visible !important;
        transition: none !important; /* DESACTIVAR transiciones que causan el encogimiento */
    }

    /* Ocultar las franjas decorativas del navbar flotante */
    .navbar-floating::before,
    .navbar-floating::after {
        display: none !important;
    }

    /* FORZAR altura del container-fluid - REDUCCIÓN MODERADA */
    .navbar-static .container-fluid,
    .navbar-floating .container-fluid,
    .navbar.scrolled .container-fluid,
    .navbar-static.scrolled .container-fluid,
    .navbar-floating.scrolled .container-fluid {
        height: 100px !important;  /* Altura moderada para que se vean los elementos */
        min-height: 100px !important;
        padding: inherit !important;
        background: transparent !important;
    }

    /* FORZAR altura del navbar-collapse - REDUCCIÓN MODERADA */
    .navbar-static .navbar-collapse,
    .navbar-floating .navbar-collapse,
    .navbar.scrolled .navbar-collapse,
    .navbar-static.scrolled .navbar-collapse,
    .navbar-floating.scrolled .navbar-collapse {
        height: 110px !important;  /* Altura moderada para que se vean los enlaces */
        padding: inherit !important;
        background: transparent !important;
    }

    /* Mantener el tamaño de los links igual que navbar-static */
    .navbar-floating .nav-link {
        font-size: inherit !important;
        padding: inherit !important;
        color: inherit !important;
    }

    .navbar-floating .nav-link:hover {
        color: inherit !important;
    }

    /* También aplicar a navbar-static para asegurar consistencia */
    .navbar-static {
        transition: none !important; /* DESACTIVAR transiciones */
    }

    #myNavbar {
        transition: none !important; /* DESACTIVAR transiciones */
    }

    /* 📏 ESPACIO DEBAJO DEL NAVBAR - CONTROL PRINCIPAL */
    body {
        padding-top: 100px !important; /* ← 🔧 REDUCIR para menos espacio debajo del navbar (90px, 100px, 110px) */
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   🖥️ FULL HD+ (>1920px) - Comportamiento flotante normal
   ════════════════════════════════════════════════════════════════════════════
   En pantallas Full HD o mayores, el navbar funciona con efecto flotante:
   - navbar-static cuando estás arriba (scroll = 0)
   - navbar-floating cuando haces scroll hacia abajo
   
   No se aplican reglas especiales aquí, usa los estilos de gep-theme.css
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   📏 BREAKPOINTS ADICIONALES - PADDING DEL BODY
   ════════════════════════════════════════════════════════════════════════════
   Ajustes específicos de padding para diferentes tamaños de pantalla
   ════════════════════════════════════════════════════════════════════════════ */

/* Dispositivos muy pequeños (≤480px) - AJUSTADO PARA NO TAPAR TÍTULOS */
@media (max-width: 480px) {
    body {
        padding-top: 120px !important; /* Aumentado para que no se coman los títulos */
    }
}

/* Tablets (481px - 768px) - AJUSTADO PARA NO TAPAR TÍTULOS */
@media (min-width: 481px) and (max-width: 768px) {
    body {
        padding-top: 125px !important; /* Aumentado para que no se coman los títulos */
    }
}

/* Tablets grandes y desktop pequeño (769px - 1366px) */
@media (min-width: 769px) and (max-width: 1366px) {
    body {
        padding-top: 65px !important;
    }
}

/* Desktop HD (1367px - 1920px) */
@media (min-width: 1367px) and (max-width: 1920px) {
    body {
        padding-top: 70px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   📱 TRANSICIÓN SUAVE DEL MENÚ HAMBURGUESA - OCULTAR CONTENIDO RÁPIDAMENTE
   ════════════════════════════════════════════════════════════════════════════
   
   PROBLEMA SOLUCIONADO (Nov 2025):
   Al cerrar el menú hamburguesa, el texto permanecía visible mientras el fondo
   blanco se cerraba, creando un efecto visual desagradable.
   
   SOLUCIÓN:
   - El contenido del menú (nav-link, texto) desaparece INMEDIATAMENTE (opacity: 0)
   - El fondo blanco se cierra con la animación normal de Bootstrap
   - Esto crea una transición limpia y profesional
   
   IMPORTANTE: Solo aplicar en móviles donde el navbar-toggler está visible
   
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    
    /* ────────────────────────────────────────────────────────────────────────
       MENÚ ABIERTO: Contenido visible
       ──────────────────────────────────────────────────────────────────────── */
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.show .nav-link,
    .navbar-collapse.show .dropdown-menu {
        opacity: 1 !important;
        transition: opacity 0.15s ease-in !important;
    }
    
    /* ────────────────────────────────────────────────────────────────────────
       MENÚ CERRÁNDOSE: Contenido desaparece INMEDIATAMENTE
       ──────────────────────────────────────────────────────────────────────── */
    .navbar-collapse.collapsing .navbar-nav,
    .navbar-collapse.collapsing .nav-link,
    .navbar-collapse.collapsing .dropdown-menu {
        opacity: 0 !important;
        transition: opacity 0.05s ease-out !important;
    }
    
    /* ────────────────────────────────────────────────────────────────────────
       MENÚ CERRADO: Contenido invisible
       ──────────────────────────────────────────────────────────────────────── */
    .navbar-collapse:not(.show):not(.collapsing) .navbar-nav,
    .navbar-collapse:not(.show):not(.collapsing) .nav-link,
    .navbar-collapse:not(.show):not(.collapsing) .dropdown-menu {
        opacity: 0 !important;
    }
    
    /* ────────────────────────────────────────────────────────────────────────
       AJUSTE FINO: Prevenir que el texto se vea durante la animación
       ──────────────────────────────────────────────────────────────────────── */
    .navbar-collapse.collapsing {
        overflow: hidden !important;
    }
    
    /* Asegurar que el menú desplegado tenga overflow visible */
    .navbar-collapse.show {
        overflow: visible !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   🎯 NOTAS DE CONFIGURACIÓN
   ════════════════════════════════════════════════════════════════════════════
   
   AJUSTAR ALTURA DEL NAVBAR:
   Si tu navbar tiene una altura diferente, ajusta el valor de padding-top
   en las reglas @media de arriba. Usa las DevTools del navegador para medir
   la altura real de #myNavbar.
   
   CAMBIAR BREAKPOINT FULL HD:
   Si quieres que el navbar flotante se active en una resolución diferente,
   cambia el valor 1920px por otro en:
   - js/gep-floating-navbar.js (línea ~57): const isFullHDorLarger = window.innerWidth > 1920;
   - Este archivo (línea ~25): @media (max-width: 1920px) {
   
   DESACTIVAR COMPLETAMENTE EL NAVBAR FLOTANTE:
   Si quieres que el navbar NUNCA sea flotante (ni en Full HD+), cambia el breakpoint
   a un valor muy alto (ej: 9999px) o elimina la lógica en js/gep-floating-navbar.js.
   
   ════════════════════════════════════════════════════════════════════════════ */