/* =========================
   MENÚ MULTINIVEL (L2 / L3)
   ========================= */

/* ---- Variables (ajusta si deseas) ---- */
#menu-desktop{
  --l2-w: 210px;   /* ancho panel 2º nivel */
  --l3-w: 240px;   /* ancho panel 3º nivel */
  --gap-top: 8px;  /* puente vertical L1->L2 (salva md:pt-2) */
  --bridge: 22px;  /* puente lateral L2->L3 (evita hueco) */
  --l3-shift: 16px;/* desplazamiento visual de L3 hacia la derecha */
}

/* ---- Base: paneles sin reflow y sin recortes ---- */
#menu-desktop li{ position: relative; }
#menu-desktop .submenu-panel{
  display: block !important;          /* vence .hidden de Tailwind */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  white-space: nowrap;
  overflow: visible !important;       /* ningún panel corta a sus hijos (L2 visible) */
  z-index: 2000;
}

/* =========
   NIVEL 1 → mostrar panel de 2º
   (abrir SOLO cuando el <a> está hovered/focused, no el <li>)
   ========= */
#menu-desktop li.group > a:hover + div > .submenu-panel,
#menu-desktop li.group > a:focus + div > .submenu-panel,
#menu-desktop li.group > div > .submenu-panel:hover{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Mantener abierto L2 si algún subpanel está hovered (si el navegador soporta :has) */
@supports(selector(:has(*))){
  #menu-desktop li.group:has(.submenu-panel:hover) > div > .submenu-panel{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Evitar que el wrapper <div> interfiera entre L1 y L2 */
#menu-desktop li.group > div{ pointer-events: none; }
#menu-desktop li.group > div > .submenu-panel{ pointer-events: auto; }

/* ---- Panel de 2º nivel: tamaño + puentes ---- */
#menu-desktop li.group > div > .submenu-panel{
  position: relative;
  min-width: var(--l2-w) !important;
}
/* Puente vertical (cubre el espacio al bajar del link de L1 al panel L2) */
#menu-desktop li.group > div > .submenu-panel::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--gap-top));
  width: 100%;
  height: var(--gap-top);
}
/* Puente lateral (evita hueco al pasar L2 -> L3) */
#menu-desktop li.group > div > .submenu-panel::after{
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--bridge));
  width: var(--bridge);
  height: 100%;
}

/* =========
   NIVEL 2 → 3 (panel a la derecha con pequeño desplazamiento)
   ========= */
#menu-desktop .group\/menu > .submenu-panel{
  position: absolute;
  top: 0 !important;
  /* Solapamos (bridge - l3-shift) para NO dejar hueco,
     pero se ve más a la derecha por --l3-shift */
  left: calc(100% - (var(--bridge) - var(--l3-shift))) !important;
  min-width: var(--l3-w) !important;
  z-index: 2100;
  /* L3 puede recortar para respetar esquinas redondeadas del HTML */
  overflow: hidden;          /* mantiene bordes redondeados perfectos en L3 */
  border-radius: inherit;    /* usa el md:rounded-2xl que ya tienes en el HTML */
}

/* Mostrar/retener L3 */
#menu-desktop .group\/menu > a:hover + .submenu-panel,
#menu-desktop .group\/menu > a:focus + .submenu-panel,
#menu-desktop .group\/menu > .submenu-panel:hover{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Mantener abierto L3 si el panel está hovered (con :has) */
@supports(selector(:has(*))){
  #menu-desktop .group\/menu:has(> .submenu-panel:hover) > .submenu-panel{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========
   Trigger L2 que abre L3: ancho, padding simétrico y chevron a la derecha
   ========= */
#menu-desktop .group\/menu > a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--l2-w);
  padding-left: 1rem;    /* espacio antes del texto */
  padding-right: 2rem;   /* reserva para el chevron */
  line-height: 1.25rem;
}
#menu-desktop .group\/menu > a .fa-chevron-right{
  position: absolute;
  right: .5rem;          /* pegado al borde derecho del bloque */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---- Feedback visual (opcional) ---- */
#menu-desktop li.group > a:hover .fa-chevron-down,
#menu-desktop li.group > a:focus .fa-chevron-down{
  transform: rotate(180deg);
  transition: transform .18s ease;
}
#menu-desktop .group\/menu > a:hover .fa-chevron-right,
#menu-desktop .group\/menu > a:focus .fa-chevron-right{
  transform: translateY(-50%) rotate(90deg);
  transition: transform .18s ease;
}

/* ---- Accesibilidad ---- */
#menu-desktop a:focus{
  outline: 2px solid #94a3b8;  /* slate-400 aprox */
  outline-offset: 2px;
  border-radius: .5rem;
}

/* ---- Respeto a reduce motion ---- */
@media (prefers-reduced-motion: reduce){
  #menu-desktop .submenu-panel{ transition: none; }
}

/* === Radios coherentes para ambos niveles === */
#menu-desktop { --panel-radius: 1rem; } /* igual a md:rounded-2xl (~16px) */

/* L2: mantiene overflow visible para los puentes, pero dibujamos el redondeo en los <a> extremos */
#menu-desktop li.group > div > .submenu-panel{
  border-radius: var(--panel-radius);              /* borde del bloque L2 */
  box-shadow: 0 10px 30px rgba(2,6,23,.08);        /* sombra consistente */
}

/* Redondear visual del "fondo" en los ítems primero/último del L2 para que no se vea cuadrado al hover */
#menu-desktop li.group > div > .submenu-panel > li:first-child > a{
  border-top-left-radius: var(--panel-radius);
  border-top-right-radius: var(--panel-radius);
}
#menu-desktop li.group > div > .submenu-panel > li:last-child > a{
  border-bottom-left-radius: var(--panel-radius);
  border-bottom-right-radius: var(--panel-radius);
}

/* Evitar que los ítems del medio tengan esquinas (solo extremos deben redondear) */
#menu-desktop li.group > div > .submenu-panel > li:not(:first-child):not(:last-child) > a{
  border-radius: 0;
}

/* L3: aquí sí podemos recortar, así el panel respeta perfectamente sus esquinas redondeadas */
#menu-desktop .group\/menu > .submenu-panel{
  border-radius: var(--panel-radius);
  overflow: hidden;                                  /* recorta el hover interno */
  box-shadow: 0 10px 30px rgba(2,6,23,.08);          /* misma sombra */
}

/* Si algún submenú anidado L3 vuelve a tener hijos (otro nivel), 
   no uses overflow:hidden en ese caso. Por ahora no hay L4, así que OK. */

/* Redondear solo los extremos del bloque de Nivel 3 */
#menu-desktop { --panel-radius: 1rem; } /* usa el mismo valor que md:rounded-2xl */

#menu-desktop .group\/menu > .submenu-panel > li:first-child > a{
  border-top-left-radius: var(--panel-radius);
  border-top-right-radius: var(--panel-radius);
}

#menu-desktop .group\/menu > .submenu-panel > li:last-child > a{
  border-bottom-left-radius: var(--panel-radius);
  border-bottom-right-radius: var(--panel-radius);
}

/* Los ítems intermedios no deben tener esquinas redondeadas */
#menu-desktop .group\/menu > .submenu-panel > li:not(:first-child):not(:last-child) > a{
  border-radius: 0;
}

/* === Ajuste fino: subir un poquito el panel de Nivel 3 === */
#menu-desktop {
  --l3-offset-y: -4px; /* súbelo o bájalo: -2px, -4px, -8px, etc. */
}

#menu-desktop .group\/menu > .submenu-panel{
  /* sobreescribe el md:top-0 del HTML */
  top: var(--l3-offset-y) !important;
}

/* Eliminar el gap entre Nivel 1 (link) y Nivel 2 (panel) */
#menu-desktop { 
  --gap-top: 0px;           /* sin puente vertical necesario */
}

/* Anula el padding top del wrapper que crea el hueco (md:pt-2) */
#menu-desktop li.group > div{
  padding-top: 0 !important;  /* quita el espacio que hacía “caer” el hover */
  pointer-events: none;       /* mantiene tu regla actual */
}

/* Mantén el panel operable */
#menu-desktop li.group > div > .submenu-panel{
  pointer-events: auto;
}

/* (Opcional) si quieres conservar un pequeño “aire” visual sin romper el hover,
   usa sombra en el panel en lugar de padding/margin del wrapper */
#menu-desktop li.group > div > .submenu-panel{
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* Pequeño desplazamiento extra a la derecha para L3, manteniendo solape seguro */
#menu-desktop{
  --l3-shift: 18px;  /* antes 16px */
  --bridge: 24px;    /* antes 22px → mantiene ~6px de solape (24-18) */
}

/* Asegura que el puente lateral del L2 coincida con el nuevo --bridge */
#menu-desktop li.group > div > .submenu-panel::after{
  right: calc(-1 * var(--bridge));
  width: var(--bridge);
}

/* L3 se coloca más a la derecha pero sin dejar hueco con L2 */
#menu-desktop .group\/menu > .submenu-panel{
  left: calc(100% - (var(--bridge) - var(--l3-shift))) !important;
}