/* ==========================================================================
   Controles de la barra superior en movil: atras, recargar y foto de usuario.
   Los inserta pwa-topbar.js dentro de la .navbar-top que ya trae nav.php, asi
   que aqui solo se les da forma. Todo va acotado a <=768px: en escritorio la
   vista queda exactamente como estaba, que es un requisito del estandar.
   ========================================================================== */

/* La hamburguesa del topnav solo sirve entre 769 y 1199px: ahi el sidenav esta
   fuera de pantalla y la barra inferior de la PWA todavia no existe. En movil se
   oculta porque duplica el boton MENU central, que es lo que pide el estandar.
   (De 1200px en adelante ya la oculta d-xl-none.) */
@media (max-width: 768px) {
  .pwa-hamb-tablet { display: none !important; }
}

@media (max-width: 768px) {

  .pwa-tbr {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-right: 4px;
  }

  /* Sin fondo ni pastilla: solo el icono sobre la barra.
     El cuadro de 44x44 se conserva igual aunque no se vea, porque es el area
     tactil minima del estandar (guia de Apple); el icono mide 21px, asi que sin
     este cuadro el blanco de acierto seria la mitad de lo exigido. */
  .pwa-tbr-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 150ms ease, transform 120ms ease;
  }

  .pwa-tbr-btn + .pwa-tbr-btn { margin-left: 2px; }
  /* La respuesta al toque pasa a ser la opacidad, ya que no hay fondo que
     aclarar: sin ninguna senal el usuario vuelve a tocar. */
  .pwa-tbr-btn:hover,
  .pwa-tbr-btn:focus { opacity: .72; color: #fff; outline: none; }
  .pwa-tbr-btn:active { transform: scale(0.92); opacity: .6; }
  .pwa-tbr-btn svg { width: 21px; height: 21px; display: block; }

  /* Gira mientras la pagina se recarga: sin esto el toque no da ninguna senal y
     el usuario vuelve a tocar. */
  .pwa-tbr-recargar.girando svg { animation: pwa-tbr-gira 0.8s linear infinite; }
  @keyframes pwa-tbr-gira { to { transform: rotate(360deg); } }

  /* El notch y la isla dinamica: la barra respeta el area segura de arriba. */
  body.pwa-topbar-on nav.navbar-top {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
  }

  /* ---- Reparto de la barra en movil ----
     Una sola fila, centrada en vertical. El centrado es lo que corrige que los
     iconos se vieran pegados arriba: sin align-items los hijos se estiran a todo
     el alto de la barra y el contenido queda arriba del todo. nowrap evita que
     al no caber salten a una segunda linea y agranden la barra. */
  body.pwa-topbar-on nav.navbar-top .navbar-collapse {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }

  /* Atras y recargar a la izquierda; todo lo demas empujado a la derecha con un
     unico margin-left:auto en el primer <ul>, para que los dos <ul> (iconos y
     avatar) queden pegados entre si y no repartidos. */
  body.pwa-topbar-on nav.navbar-top .navbar-collapse > .navbar-nav:first-of-type {
    margin-left: auto !important;
  }

  body.pwa-topbar-on nav.navbar-top .navbar-nav {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
  }

  /* El avatar del nav (#fotoajus) es el unico que queda: alineado al extremo
     derecho y centrado con los iconos de al lado. */
  body.pwa-topbar-on nav.navbar-top .navbar-collapse > .navbar-nav:last-of-type {
    margin-left: .35rem !important;
    margin-right: 0;
  }
  body.pwa-topbar-on nav.navbar-top #fotoajus {
    display: block;
    flex: 0 0 auto;
  }
  body.pwa-topbar-on nav.navbar-top .media.align-items-center {
    display: flex;
    align-items: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .pwa-tbr-recargar.girando svg { animation: none; }
    .pwa-tbr-btn { transition: none; }
  }
}