/* =========================================================
   PortalGraf - Reset / coordinación de menús
   v1.2.4

   Principio:
   - Bootstrap y MetisMenu conservan íntegramente sus estados y ciclos.
   - Esta hoja solo modifica la presentación DURANTE su estado nativo
     collapsing/mm-collapsing.
   - Movimiento de referencia: Cuenta PortalGraf móvil (150 ms).
   ========================================================= */

@keyframes pgm-panel-account-open {
  from {
    opacity: 0;
    transform: translate3d(0, -0.12rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pgm-panel-account-close {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -0.12rem, 0);
  }
}

/*
 * MetisMenu: mismo movimiento en escritorio y móvil.
 * La altura sigue perteneciendo al ciclo nativo; solo se ajusta su duración
 * al ritmo de Cuenta. La animación de opacidad queda en fill: both para que
 * un panel que ya mide 1-2 px no vuelva a hacerse visible antes de ocultarse.
 */
.container-header .mm-collapsing.pgm-panel-opening,
.container-header .mm-collapse.collapsing.pgm-panel-opening {
  overflow: hidden !important;
  animation: pgm-panel-account-open 150ms ease-out both !important;
  transition: height 150ms ease-out !important;
  will-change: height, opacity, transform;
  backface-visibility: hidden;
}

.container-header .mm-collapsing.pgm-panel-closing,
.container-header .mm-collapse.collapsing.pgm-panel-closing {
  overflow: hidden !important;
  pointer-events: none;
  animation: pgm-panel-account-close 150ms ease-in both !important;
  transition: height 150ms ease-in !important;
  will-change: height, opacity, transform;
  backface-visibility: hidden;
}

/* Navbar de Joomla: solo entra en collapsing en la vista móvil. */
@media (max-width: 991.98px) {
  /*
   * El navbar completo usa una sola transición: la altura nativa de Bootstrap.
   * No se anima opacidad ni transform en este nivel, evitando el parpadeo que
   * aparecía al superponer dos animaciones sobre el mismo panel. Los submenús
   * conservan el movimiento tipo Cuenta de 150 ms.
   */
  .container-header .navbar-collapse.collapsing.pgm-panel-opening {
    display: block !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: height 190ms cubic-bezier(.22, .61, .36, 1) !important;
    will-change: height;
  }

  .container-header .navbar-collapse.collapsing.pgm-panel-closing {
    display: block !important;
    overflow: hidden !important;
    pointer-events: none;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: height 175ms cubic-bezier(.4, 0, .2, 1) !important;
    will-change: height;
  }

  /* Limpieza instantánea al restaurar historial / bfcache. */
  html.pgm-mobile-menu-history-cleaning .container-header .navbar-collapse.show,
  html.pgm-mobile-menu-history-cleaning .container-header .navbar-collapse.collapsing,
  html.pgm-mobile-menu-history-cleaning .container-header .mm-collapse.mm-show,
  html.pgm-mobile-menu-history-cleaning .container-header .mm-collapse.show,
  html.pgm-mobile-menu-history-cleaning .container-header .mm-collapse.collapsing,
  html.pgm-mobile-menu-history-cleaning .container-header .mm-collapsing {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    animation: none !important;
    transition: none !important;
    pointer-events: none !important;
  }
}


/*
 * Cambio entre menús: el panel saliente desaparece sin transición, pero su
 * control nativo sigue ejecutando el cierre para mantener estado y ARIA.
 */
.container-header .pgm-panel-switch-closing,
.container-header .pgm-panel-switch-closing.collapsing,
.container-header .pgm-panel-switch-closing.mm-collapsing {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .container-header .pgm-panel-opening,
  .container-header .pgm-panel-closing {
    animation: none !important;
  }
}