/* ===============================
   NAV MEGA – UNIFICADO (Desktop/Mobile)
   Objetivo:
   - Mantener tu estilo actual
   - Mega panel visible con hover/focus
   - Quitar líneas naranjas del hover
   - Anular reglas del dropdown estándar dentro del mega-panel
   - Ajustar capas y desbordes
   - Dejar fallback móvil igual que antes
   =============================== */

/* ===== Desktop (mismo breakpoint que main.css) ===== */
@media (min-width: 1200px){

  /* Evita que el header recorte el panel */
  .header, .header .container-xl{ overflow: visible !important; }

  /* Capa del nav */
  .navmenu{ position: relative; z-index: 2000; }

  /* El <li> padre no limita ancho */
  .navmenu > ul > li.mega{ position: static; }

  /* --- Quitar líneas naranjas en hover del item principal --- */
  /* main.css agrega ::before/::after en .navmenu li:hover>a */
  .navmenu li:hover > a::before,
  .navmenu li:hover > a::after{
    content: none !important;
  }

  /* --- Panel mega oculto por defecto; se muestra con hover/focus --- */
  .navmenu > ul > li.mega > .mega-panel{
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 2px);
    display: none;
    background: var(--nav-dropdown-background-color, #fff);
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 24px 48px rgba(7,9,120,.08);
    padding: 24px 0;
    z-index: 2100;
    max-width: 100vw;                /* no salir del viewport */
  }
  .navmenu > ul > li.mega:hover > .mega-panel,
  .navmenu > ul > li.mega:focus-within > .mega-panel{
    display: block;
  }

  /* Contenido del panel con scroll si es muy alto */
  .navmenu > ul > li.mega > .mega-panel > .container-xl{
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  /* --- Anular reglas del dropdown estándar dentro del mega-panel ---
     (en main.css `.navmenu .dropdown ul` es absoluto/oculto). */
  .navmenu .mega-panel ul{
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    left: auto !important; top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .navmenu .mega-panel .mega-list{ list-style: none; }
  .navmenu .mega-panel .mega-list li{ margin: 8px 0; min-width: auto; }

  /* Títulos y enlaces del panel */
  .navmenu .mega-title{
    font-weight: 700;
    color: var(--heading-color, #0d2351);
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-bottom: 6px;
  }
  .navmenu .mega-list a,
  .navmenu .mega-list a:focus,
  .navmenu .mega-list a:active{
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--nav-dropdown-color, #060606) !important;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 10px;
  }
  .navmenu .mega-list a:hover{
    background: rgba(13,35,81,.06);
    color: var(--heading-color, #0d2351) !important;
  }

  /* Ajuste de columnas para pantallas medianas (que no se corte) */
  @media (max-width: 1399.98px){
    .navmenu .mega-panel .row{ row-gap: 20px; }
    .navmenu .mega-panel .col-lg-3,
    .navmenu .mega-panel .col-lg-4{
      flex: 0 0 33.333% !important;
      max-width: 33.333% !important;
    }
  }

  /* Ocultar el menú móvil en desktop */
  .navmenu .mobile-only{ display: none !important; }
}

/* ===== Mobile: se mantiene tu dropdown estándar ===== */
@media (max-width: 1199.98px){
  .navmenu .mega-panel{ display: none !important; }
  .navmenu .mobile-only{ display: block; }
}

/* ============== MEGA MENÚ – AJUSTES FINOS (v3) ============== */
@media (min-width: 1200px){

  /* 1) Nada recorta el panel y el item padre no limita ancho */
  .header, .header .container-xl { overflow: visible !important; }
  .navmenu { position: relative; z-index: 2000; }
  .navmenu > ul > li.mega { position: static; }

  /* 2) Panel: ancho completo, sin desborde, con acolchado interno */
  .navmenu > ul > li.mega > .mega-panel{
    position: absolute; left: 0; right: 0;
    top: calc(100% + 2px);
    display: none;
    background: var(--nav-dropdown-background-color, #fff);
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 24px 48px rgba(7,9,120,.08);
    padding: 18px 0;
    z-index: 2100;
    max-width: 100vw;  /* no salir horizontalmente del viewport */
  }
  .navmenu > ul > li.mega:hover > .mega-panel,
  .navmenu > ul > li.mega:focus-within > .mega-panel{ display:block; }

  /* Padding horizontal moderado dentro del panel y altura con scroll */
  .navmenu > ul > li.mega > .mega-panel > .container-xl{
    padding-inline: 20px;               /* evita que “toque” los bordes */
    max-height: calc(100vh - 140px);    /* no sobrepasa altura de pantalla */
    overflow-y: auto;
  }

  /* 3) Quitar líneas/ornamentos heredados dentro del panel */
  .navmenu .mega-panel hr{ display:none !important; }
  .navmenu .mega-panel a::before,
  .navmenu .mega-panel a::after{ content:none !important; }

  /* 4) Anular dropdown estándar dentro del panel (evita ocultamiento) */
  .navmenu .mega-panel ul{
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    left: auto !important; top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
  }

  /* 5) Tipografía/espaciados más compactos */
  .navmenu .mega-title{
    font-weight: 700; color: var(--heading-color, #2a2c39);
    margin: 0 0 6px; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 4px;
    font-size: 14px;
  }
  .navmenu .mega-list{ list-style: none; }
  .navmenu .mega-list li{ margin: 6px 0; }
  .navmenu .mega-list a,
  .navmenu .mega-list a:focus,
  .navmenu .mega-list a:active{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 10px;
    font-size: 15px; line-height: 1.25;
    color: var(--nav-dropdown-color, #060606) !important; /* nunca blanco */
    text-decoration: none;
  }

  /* 6) Hover/Focus/Active con color de marca #009aa4 */
  .navmenu .mega-list a:hover,
  .navmenu .mega-list a:focus,
  .navmenu .mega-list a:active{
    background: rgba(0,154,164,.08);
    color: #009aa4 !important;
  }

  /* 7) Ajuste de columnas para que todo QUEPA en desktop medianos */
  .navmenu .mega-panel .row{ row-gap: 16px; }
  @media (max-width: 1399.98px){
    .navmenu .mega-panel .col-lg-3,
    .navmenu .mega-panel .col-lg-4{
      flex: 0 0 33.333% !important;
      max-width: 33.333% !important;
    }
  }

  /* 8) Ocultar fallback móvil en desktop */
  .navmenu .mobile-only{ display: none !important; }
}
/* En móviles sigues con tu dropdown estándar (sin cambios) */
/* ===== Mega Menu – Fix 4 columnas que se desborda ===== */
/* Aplica solo en desktop; reduce a 3 columnas cuando el ancho no alcanza
   y evita que la última columna se corte a la derecha. */
@media (min-width: 1200px){

  /* Asegura panel a pantalla completa pero contenido con límite centrado */
  .navmenu > ul > li.mega > .mega-panel{ left: 0; right: 0; }
  .navmenu > ul > li.mega > .mega-panel > .container-xl{
    max-width: 1260px;         /* limita el ancho interno */
    margin-inline: auto;
    padding-inline: 16px;
  }

  /* --- Cambiar 4→3 columnas en anchos medianos --- */
  @media (max-width: 1450px){
    .navmenu .mega-panel .col-lg-3,
    .navmenu .mega-panel .col-lg-4{
      flex: 0 0 33.333% !important;
      max-width: 33.333% !important;
    }
  }

  /* --- Si todavía no cabe, cae a 2 columnas --- */
  @media (max-width: 1100px){
    .navmenu .mega-panel .col-lg-3,
    .navmenu .mega-panel .col-lg-4{
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }
  }

  /* Texto y espaciado un poco más compacto solo cuando hay 4 columnas */
  @media (min-width: 1451px){
    .navmenu .mega-list a{ font-size: 14px; padding: 5px 6px; gap: 8px; }
  }
}