/* ==========================================================================
   iLESSO · Barra de navegación pública
   Solo vive aquí lo que Tailwind no resuelve con comodidad: el recorte del
   logotipo, la transición de los mega-desplegables, el puente de hover,
   la animación del acordeón móvil y los ajustes para pantallas táctiles.
   Depende del marcado de app/views/components/public_navbar.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOGOTIPO — isotipo · iLESSO · eslogan
   ilessologo.svg (1280x463) es un lockup completo: escudo a la derecha,
   la palabra iLESSO arriba a la izquierda y, debajo, el eslogan grabado en
   un cuerpo diminuto que a la altura de una cabecera resulta ilegible.
   En vez de encoger todo el SVG, lo usamos como sprite y recortamos dos
   piezas; el eslogan se pinta como texto real en el PHP. Así se respeta el
   orden pedido (logotipo · iLESSO · eslogan) sin duplicar la frase.

   Coordenadas del recorte sobre el SVG original:
     · escudo   x 880..1270  ·  alto completo   -> 390x463
     · wordmark x   0.. 810  ·  y 105..300      -> 810x195
   Si algún día se sustituye ilessologo.svg hay que recalcular estos números.
   -------------------------------------------------------------------------- */
.nav-logo-shield,
.nav-logo-word {
  display: block;
  flex: none;
  background-image: url('../images/ilessologo.svg');
  background-repeat: no-repeat;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-logo-shield {
  height: 2.125rem;                 /* 34px */
  aspect-ratio: 390 / 463;
  background-size: 328.205% 100%;   /* 1280/390 · 463/463 */
  background-position: 98.876% 0;   /* 880 / (1280-390) */
}

.nav-logo-word {
  height: 1.375rem;                 /* 22px */
  aspect-ratio: 810 / 195;
  background-size: 158.025% 237.436%; /* 1280/810 · 463/195 */
  background-position: 0 39.179%;     /* 105 / (463-195) */
}

@media (min-width: 640px) {
  .nav-logo-shield { height: 2.375rem; }
  .nav-logo-word   { height: 1.5rem; }
}

@media (min-width: 1280px) {
  .nav-logo-shield { height: 2.5rem; }
  .nav-logo-word   { height: 1.625rem; }
}

.nav-logo:hover .nav-logo-shield { transform: scale(1.06); }
.nav-logo:hover .nav-logo-word   { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .nav-logo-shield,
  .nav-logo-word { transition: none; }
}

/* --------------------------------------------------------------------------
   2. ANCHO Y DENSIDAD DEL MENÚ PRINCIPAL
   Son 10 ítems y el ancho aprieta, así que la cabecera se adapta en tres
   tramos. Los cortes no coinciden con los breakpoints de Tailwind (medidos
   sobre el menú real), por eso viven aquí y no en clases utilitarias:

     < 1280px            hamburguesa; el eslogan siempre visible bajo el wordmark
     1280px - 1439px     menú completo con las etiquetas LARGAS, tipografía ceñida
     >= 1440px           menú completo holgado, cabecera más ancha

   El cliente pidió los 10 rótulos con su nombre completo ("Prendas de
   protección", no "Prendas"), así que las etiquetas largas se muestran en
   cuanto aparece el menú de escritorio. Medido sobre el menú real: con 13px
   pedía 1278px y solo había 1201; a 12px y con el padding ceñido entra.

   .nav-shell y .mega-panel comparten anchura: el desplegable se ancla a la
   cabecera y debe cuadrar con el contenedor.
   -------------------------------------------------------------------------- */
.nav-shell { max-width: 80rem; }              /* = max-w-7xl */

/* Las etiquetas cortas ya no se usan en escritorio; se conservan como refuerzo
   por si algún día se añade un tramo aún más estrecho. */
.nav-label-short { display: none; }
.nav-label-full  { display: inline; }

/* El eslogan va apilado bajo el wordmark: no compite por el ancho del menú.
   Solo se esconde en pantallas muy angostas, donde el alto de la cabecera manda. */
.nav-tagline     { display: none; }
.nav-tagline-sep { display: none; }

@media (min-width: 480px) {
  .nav-tagline { display: block; }
}

/* Tramo justo: el menú completo entra si ceñimos tipografía y padding. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  /* Gana por especificidad al text-[13px]/px-1.5 que Tailwind pone en el botón. */
  #app-header nav[aria-label="Menú principal"] .nav-btn {
    font-size: 12px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  /* El logotipo también cede unos píxeles en este tramo. */
  .nav-logo-shield { height: 2.125rem; }
  .nav-logo-word   { height: 1.375rem; }
  .nav-tagline     { font-size: 9px; }
  /* Con solo 9px de holgura el menú quedaba a merced del renderizado de fuentes
     de cada sistema. Ceñir el acolchado lateral devuelve ~32px de margen. */
  #app-header .nav-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1440px) {
  .nav-shell { max-width: 1560px; }
}

@media (min-width: 1600px) {
  .nav-shell { max-width: 1600px; }
}

/* El subrayado de la pestaña activa lo define public-components.css a ancho
   completo; con el padding horizontal quedaba desbordado, así que lo ceñimos
   al texto. El prefijo #app-header gana por especificidad sin depender del
   orden en que se carguen las hojas. */
#app-header .nav-btn.active::after {
  left: 0.375rem;
  right: 0.375rem;
  width: auto;
}

.nav-chevron {
  transition: transform 0.2s ease;
}

.nav-item.is-open .nav-chevron {
  transform: rotate(180deg);
}

.nav-item.is-open > .nav-trigger {
  color: #122937;
  background-color: #f8fafc;
}

/* --------------------------------------------------------------------------
   3. MEGA-DESPLEGABLES
   El panel se ancla a #app-header (sticky, y por tanto bloque contenedor) en
   lugar de al ítem: así reproduce exactamente el ancho del contenedor de la
   cabecera y nunca puede desbordar la ventana por la derecha. Dentro, la caja
   .mega-inner se alinea a izquierda, centro o derecha según el ítem.
   Los valores de max-width y padding replican
   `max-w-7xl 2xl:max-w-[1600px] px-4 sm:px-6 lg:px-8` del PHP.
   -------------------------------------------------------------------------- */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100%;
  max-width: 80rem;
  z-index: 60;
  padding: 10px 1rem 0;   /* el padding-top es la separación con la cabecera */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  /* La visibilidad se retrasa hasta el final del fundido al cerrar y es
     inmediata al abrir; así el panel oculto no captura el ratón. */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;   /* la franja vacía a los lados deja pasar el ratón */
}

@media (min-width: 640px)  { .mega-panel { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .mega-panel { padding-left: 2rem;   padding-right: 2rem; } }
/* Debe seguir a .nav-shell para que el panel cuadre con el contenedor. */
@media (min-width: 1440px) { .mega-panel { max-width: 1560px; } }
@media (min-width: 1600px) { .mega-panel { max-width: 1600px; } }

.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Puente invisible sobre el hueco entre el botón y el panel: sin él, bajar el
   ratón hacia el desplegable dispara el mouseleave del ítem y se cierra. */
.mega-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: auto;
}

.mega-inner {
  position: relative;
  pointer-events: auto;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  padding: 0.75rem;
  box-shadow: 0 24px 48px -18px rgba(18, 41, 55, 0.28), 0 8px 20px -12px rgba(18, 41, 55, 0.16);
}

.mega-align-left   { margin-left: 0;    margin-right: auto; }
.mega-align-center { margin-left: auto; margin-right: auto; }
.mega-align-right  { margin-left: auto; margin-right: 0; }

.mega-link:focus-visible,
.mega-cta:focus-visible {
  outline: 2px solid #f3a946;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel {
    transition: opacity 0.01s linear, visibility 0s;
    transform: translateX(-50%);
  }
  .mega-panel.is-open { transform: translateX(-50%); }
}

/* En táctil no hay hover real: el panel se abre por clic (lo gestiona
   public-nav.js) y el puente sobra, porque taparía contenido de la página. */
@media (hover: none) {
  .mega-panel::before { display: none; }
  .nav-item.is-open > .nav-trigger { background-color: transparent; }
}

/* --------------------------------------------------------------------------
   4. MENÚ MÓVIL / ACORDEÓN
   -------------------------------------------------------------------------- */

/* public-components.css declara #mobile-menu.open{display:block} con un ID,
   así que la utilidad xl:hidden de Tailwind pierde por especificidad. Este
   selector (dos IDs) la restablece a partir de xl, que es donde aparece el
   menú de escritorio. */
@media (min-width: 1280px) {
  #app-header #mobile-menu.open { display: none; }
}

/* Plegado con max-height: además de recortar, hay que sacar el contenido del
   orden de tabulación y del árbol de accesibilidad. Sin `visibility` el cajón
   abierto dejaría ~100 botones invisibles pero enfocables con el tabulador.
   La visibilidad se retrasa hasta el final del plegado y es inmediata al abrir
   (mismo patrón que .mega-panel). */
.m-acc-panel {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

.m-acc.is-open > .m-acc-panel {
  visibility: visible;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

.m-acc-chevron {
  transition: transform 0.25s ease;
}

.m-acc.is-open > .m-acc-trigger {
  color: #122937;
  background-color: #f8fafc;
}

.m-acc.is-open .m-acc-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .m-acc-panel,
  .m-acc.is-open > .m-acc-panel,
  .m-acc-chevron { transition: none; }
}

/* --------------------------------------------------------------------------
   5. TEXTO LARGO EN COLUMNAS ESTRECHAS
   La rejilla de especialidades del cajón móvil deja ~120px de texto por celda
   a 375px y "Otorrinolaringología" mide 119px: cabe por menos de un píxel, y
   con otra fuente de sistema se recortaría (el acordeón tiene overflow:hidden).
   Los <span> son ítems flex, así que además de permitir el corte hay que
   dejarlos encoger por debajo de su tamaño mínimo de contenido.
   -------------------------------------------------------------------------- */
.mega-link,
.mobile-subnav-btn { overflow-wrap: break-word; }

.mega-link > span,
.mobile-subnav-btn > span { min-width: 0; }

/* Los subenlaces del acordeón comparten [data-nav] con los botones de
   pestaña, pero no deben heredar el resaltado de .mobile-nav-btn.active:
   habría decenas marcados a la vez. Se distinguen por su propia clase. */
.mobile-subnav-btn:focus-visible {
  outline: 2px solid #f3a946;
  outline-offset: -2px;
  border-radius: 0.5rem;
}

/* Barra de scroll discreta dentro del cajón móvil y de los paneles. */
#mobile-menu,
.mega-inner {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

#mobile-menu::-webkit-scrollbar,
.mega-inner::-webkit-scrollbar {
  width: 6px;
}

#mobile-menu::-webkit-scrollbar-thumb,
.mega-inner::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
}