/* ═══════════════════════════════════════════════════════════════
   Panel de menú móvil, a pantalla completa.

   Los dos controles son <button type="button"> de verdad, con
   aria-expanded y aria-controls; js/responsive-navbar.js abre, cierra,
   bloquea el desplazamiento del fondo, atrapa la tabulación dentro del
   panel y devuelve el foco al botón que lo abrió. Hay CUATRO vías de
   cierre: Escape, ✕, pulsar una entrada del menú y ensanchar la ventana
   por encima del punto de ruptura. En esa cuarta el foco no vuelve al
   botón porque a ese ancho ya está oculto; vuelve al documento. Sin
   JavaScript el panel no se abre, pero el menú completo sigue disponible
   en el pie de cada página.

   El panel es opaco y cubre la ventana entera, así que no lleva capa
   oscura detrás: quedaría tapada por el propio panel.

   Las reglas no van dentro de una consulta de medios: el botón que
   abre el panel vive en #device-header-bar, que ya está oculto por
   encima de 1160 px, así que el panel es inalcanzable ahí. Y si se
   ensancha la ventana con el panel abierto, lo cierra el script: lo
   abre con estilo en línea y ninguna consulta de medios podría ganarle
   sin !important.
   ═══════════════════════════════════════════════════════════════ */

/* Controles: <button> reales, sin aspecto de botón del navegador. */
#device-menu-open,
#device-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--tinta);
    border-radius: 10px;
    background: none;
    color: var(--tinta);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

#device-menu-open:hover,
#device-menu-close:hover {
    background: var(--tinta);
    color: var(--hueso);
}

/*
 * Bloqueo del desplazamiento del fondo mientras el panel está abierto.
 * El script pone y quita .sin-scroll en <body>. Sin esto la página de
 * detrás sigue desplazándose con la rueda o el dedo y el usuario cierra
 * el menú en un punto distinto del que estaba. Gana a body{overflow-x}
 * de style-generic.css por especificidad, no por orden de carga.
 *
 * Comprobado con eventos de rueda reales: basta con la clase en <body>.
 * Al medirlo con window.scrollBy() parece que no bloquea, pero eso es un
 * artefacto de la prueba: overflow:hidden impide el desplazamiento del
 * usuario, no el que hace un script. No añadir la clase en <html>: no
 * cambia el resultado.
 */
body.sin-scroll {
    overflow: hidden;
}

/*
 * Cerrado de partida; el script lo pone en display:block al abrir.
 * Cerrado tiene que ser display:none y no quedarse fuera de pantalla:
 * un elemento de 100 vw desplazado a un lado cuenta como desborde en
 * las medidas de anchura del control de calidad.
 */
#device-menu-container {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--hueso);
}

#device-menu-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;   /* el panel no encadena su scroll al fondo */
    -webkit-overflow-scrolling: touch;
}

/* ── CABECERA DEL PANEL ───────────────────────────────────────── */
/*
 * Logotipo y ✕ en la misma banda, con el mismo acolchado lateral que el
 * resto del panel. El ✕ ya no va en posición absoluta: al ser un hijo
 * más de la fila, el orden de tabulación es el que se ve.
 */
.panel-cab {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--linea);
}

.panel-cab img {
    height: 30px;
    width: auto;
}

/* ── MENÚ ─────────────────────────────────────────────────────── */
#device-menu {
    padding: 12px 22px 6px;
}

#device-menu nav,
#device-menu nav ul,
#device-menu nav li {
    width: 100%;
}

#device-menu nav ul {
    flex-direction: column;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

#device-menu nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 16px 0;
    border-bottom: 1px solid var(--linea);
    font-family: var(--font-headers);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tinta);
    text-decoration: none;
}

#device-menu nav a:hover,
#device-menu nav a[aria-current="page"] {
    color: var(--morado);
}

/* Los separadores decorativos no pintan nada en una lista vertical. */
#device-menu nav .separator-line {
    display: none;
}

/* ── INSCRIPCIÓN ──────────────────────────────────────────────── */
/*
 * El bloque entero lo emite header.php solo si hay alguna inscripción
 * abierta: aquí no hay ningún estado «cerrado» que pintar.
 */
.panel-inscripcion {
    padding: 24px 22px 40px;
}

.panel-inscripcion .rotulo {
    margin: 0 0 10px;
    font-size: var(--txt-rotulo);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gris);
}

/*
 * .inscripciones y .insc-chip son los de la portada (style-buttons.css);
 * aquí solo se apilan. El flex:none es imprescindible: en una columna la
 * base flexible de .insc-chip (1 1 300px) sería su ALTURA y cada enlace
 * mediría 300 px de alto.
 */
.inscripciones.en-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.inscripciones.en-panel .insc-chip {
    flex: none;
    padding: 13px 18px;
}
