/* V11 08/08/2026 — flotantes estables + menú tablet separado del encabezado */

/* =========================================================
   1) ACCIONES FLOTANTES — un solo anclaje fijo, sin solaparse
   ========================================================= */
.acciones-flotantes {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  top: auto !important;
  left: auto !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Los dos controles viven DENTRO del contenedor fijo. Ninguno se posiciona por separado. */
.acciones-flotantes .whatsapp-flotante,
.acciones-flotantes .volver-arriba {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  will-change: auto !important;
}

.acciones-flotantes .whatsapp-flotante {
  width: 48px !important;
  height: 48px !important;
}

.acciones-flotantes .volver-arriba {
  width: 46px !important;
  height: 46px !important;
}

/* Evita saltos/parpadeos por animaciones de posición. */
.acciones-flotantes .volver-arriba,
.acciones-flotantes .volver-arriba.visible {
  transition: opacity .2s ease, visibility .2s ease !important;
}
.acciones-flotantes .volver-arriba:hover,
.acciones-flotantes .volver-arriba:focus,
.acciones-flotantes .volver-arriba:active,
.acciones-flotantes .whatsapp-flotante:hover,
.acciones-flotantes .whatsapp-flotante:focus,
.acciones-flotantes .whatsapp-flotante:active {
  transform: none !important;
}

/* En páginas legales, el botón volver arriba debe respetar su estado real y no quedar forzado visible. */
body.pagina-legal .volver-arriba {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.pagina-legal .volver-arriba.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 720px) {
  .acciones-flotantes {
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 9px !important;
  }
  .acciones-flotantes .whatsapp-flotante,
  .acciones-flotantes .volver-arriba {
    width: 46px !important;
    height: 46px !important;
  }
}

/* =========================================================
   2) MENÚ TABLET/MÓVIL — panel SIEMPRE debajo del encabezado
   La variable se calcula por JS usando la altura real del header.
   ========================================================= */
@media (max-width: 1120px) {
  .menu-zona {
    position: fixed !important;
    inset: var(--menu-panel-top, 102px) 0 0 0 !important;
    top: var(--menu-panel-top, 102px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--menu-panel-top, 102px)) !important;
    padding: 14px max(28px, 8vw) 28px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    z-index: 1490 !important;
  }
  .menu-lista {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }
  .menu-lista a,
  .desplegable > button {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .portal-menu-movil {
    margin-top: 12px !important;
  }
}

@media (min-width: 721px) and (max-width: 1120px) {
  /* El encabezado queda por encima del panel; el panel ya no invade logo ni controles. */
  .menu-envuelto,
  .menu-principal,
  .logo,
  .controles-movil {
    position: relative !important;
    z-index: 1500 !important;
  }
  .menu-zona {
    padding-top: 16px !important;
  }
}

@media (max-width: 720px) {
  .menu-zona {
    padding: 12px 22px 24px !important;
  }
}