/*
  El menú del teléfono (`layouts/_partials/nav-movil.html`, con el init en `assets/js/nav-movil.js`).

  El cliente pidió que, al hacer scroll en el teléfono, quede un «menú de sandwich» permanente «por
  si uno quiere seguir navegando», y que al tocarlo se despliegue el menú en vez de tener que subir
  «a lo bestia» hasta la banda. Así que hay dos piezas: un **botón cuadrado** fijo —el mismo cuadrado
  de 1 px de borde con el que el theme dibuja sus controles— que se asoma cuando la banda ya salió de
  la vista, y un **panel** que entra deslizándose desde el borde derecho con los enlaces.

  Todo vive dentro de la consulta de la banda angosta (`@media (max-width: 960px), (max-aspect-ratio:
  1/1)`), que es la misma con la que el theme rearma la banda en el móvil: en escritorio el botón no
  se muestra y el panel no existe.

  Los colores son los del tema (`--bg`/`--fg`, que se invierten solos entre el claro y el oscuro) y
  las líneas, la salvia de siempre. Nada de acá depende del paquete del theme, así que el orden de
  las hojas no importa; los selectores llevan `body` delante por la misma costumbre del resto de las
  hojas propias (esta se carga antes que el theme).
*/

/* En escritorio no hay ni botón ni panel: la banda está a la vista y el menú con ella. */
.nav-movil-boton,
.nav-movil-panel {
  display: none;
}

@media (max-width: 960px), (max-aspect-ratio: 1/1) {
  /* --- el botón ---------------------------------------------------------------- */
  /* Va fijo arriba a la derecha, a la misma distancia del canto que los controles del theme
     (`--frame-pad`), y oculto —`visibility`, no sólo opacidad: así no se puede tabular ni anunciar
     un botón que no está— hasta que el init le pone la clase al `body`. El init lo muestra recién
     cuando el canto superior derecho quedó libre (ni la banda ni el botón de tema del theme a la
     vista), así que el botón no pisa otro control (ver `assets/js/nav-movil.js`). */
  body .nav-movil-boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: var(--frame-pad, 24px);
    right: var(--frame-pad, 24px);
    z-index: 40;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid currentColor;
    background: var(--bg);
    color: var(--fg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  /* El botón aparece cuando el init marca el `body`: mientras la banda se ve, el menú ya está a la
     vista y un botón flotante sólo estorbaría. */
  body.nav-movil-activa .nav-movil-boton {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  body .nav-movil-boton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  body .nav-movil-boton[aria-expanded="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body .nav-movil-raya {
    display: block;
    inline-size: 20px;
    block-size: 2px;
    background: currentColor;
  }

  /* --- el panel ---------------------------------------------------------------- */
  /* Cubre la pantalla y entra deslizándose desde la derecha: es el gesto de «traer el menú desde
     el canto», el mismo lado donde vive el botón. Fondo opaco del tema para que el texto de la
     página no se lea por debajo. */
  body .nav-movil-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 45;
    padding: calc(var(--frame-pad, 24px) + 4px) 24px 32px;
    background: var(--bg);
    color: var(--fg);
    overflow-y: auto;
    animation: nav-movil-entrada 0.24s ease-out;
  }

  body .nav-movil-panel[hidden] {
    display: none;
  }

  @keyframes nav-movil-entrada {
    from { transform: translateX(100%); }
    to { transform: none; }
  }

  body .nav-movil-panel-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.4rem;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid rgba(var(--em-salvia-rgb), 0.4);
  }

  body .nav-movil-panel-rotulo {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--em-rotulo);
  }

  body .nav-movil-cerrar {
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid currentColor;
    background: var(--bg);
    color: var(--fg);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
  }

  /* Los enlaces del panel: los mismos del partial `menu.html`, con el tamaño de la banda (16 px)
     y no el del menú de escritorio —`.menu-list a` del theme es `clamp(34px, 6.5vh, 68px)`, que en
     el panel saldría enorme—. Un objetivo de toque cómodo por renglón y separados por la hairline
     de siempre. */
  body .nav-movil-panel .menu-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
  }

  body .nav-movil-panel .menu-list a {
    display: block;
    padding: 1rem 0.2rem;
    border-block-end: 1px solid rgba(var(--em-salvia-rgb), 0.3);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg);
  }

  body .nav-movil-panel .menu-list a[aria-current="page"] {
    color: var(--em-acento-texto);
  }

  body .nav-movil-panel .menu-list a:hover,
  body .nav-movil-panel .menu-list a:focus-visible {
    background: var(--fg);
    color: var(--bg);
  }

  /* Con el movimiento apagado en el sistema el panel aparece sin deslizarse. */
  @media (prefers-reduced-motion: reduce) {
    body .nav-movil-panel {
      animation: none;
    }
    body .nav-movil-boton {
      transition: none;
    }
  }
}