/* La cabecera de la web, sola (sesión 99): la banda turquesa con la marca, el menú, el botón de
   claro/oscuro y el selector de idioma. Estaba dentro de estilo.css y se saca aquí para que la
   página del duelo, que tiene su propio estilo (duelo.css) y NO carga estilo.css —sus reglas de
   `.pie`, `.expediente`, `.ficha` y `.tablero` le pisaban la mesa—, pueda llevar la misma
   cabecera que el resto. Las demás páginas cargan las dos hojas, esta primero. Los colores y las
   fuentes vienen de tablero.css. */
.cabecera{
  display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap;
  padding:9px 18px; background:var(--banda); border-bottom:3px solid var(--borde);
  position:relative; z-index:30;
}
/* Incrustada en el iframe de itch.io (sesión 174, `_head.html`): ahí no cabe una cabecera
   entera, y ya lleva su propio enlace a la web en la barra de arriba del envoltorio. */
:root[data-incrustado] .cabecera{ display:none; }
.cabecera .marca{ font-family:var(--tipo-display); font-size:1.4rem; line-height:1.1; color:#fff; text-decoration:none; text-shadow:0 2px 0 rgba(0,0,0,.22); }
.cabecera .marca b{ color:var(--naranja); font-weight:400; }
.cabecera .derecha{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.boton-icono{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border:2px solid rgba(255,255,255,.7); border-radius:9px; background:rgba(255,255,255,.16);
  color:#fff; cursor:pointer; line-height:1; transition:background .15s, transform .12s;
}
.boton-icono:hover{ background:rgba(255,255,255,.32); }
.boton-icono:active{ transform:translateY(1px); }
.idiomas{ position:relative; }
.idiomas summary{ list-style:none; cursor:pointer; }
.idiomas summary::-webkit-details-marker{ display:none; }
.idiomas summary .boton-icono{ width:auto; padding:0 10px; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.idiomas .menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40; margin:0; padding:6px; list-style:none;
  background:var(--paper-3); border:2px solid var(--borde); border-radius:10px; box-shadow:var(--shadow); min-width:150px;
}
.idiomas .menu a{ display:block; padding:6px 10px; border-radius:6px; text-decoration:none; color:var(--ink); font-size:.92rem; }
.idiomas .menu a:hover{ background:var(--paper-2); }
.idiomas .menu a.actual{ color:var(--acento); font-weight:600; }
/* El menú envuelve. Sin esto, en un móvil de 390 px la fila de enlaces es más ancha que la
   pantalla y arrastra a TODA la página: el texto de cualquier artículo se salía por la derecha.
   Con `wrap` la cabecera pasa a dos filas en pantallas estrechas y la página deja de moverse. */
.cabecera .nav{ display:flex; gap:6px; flex-wrap:wrap; }
.cabecera .nav a{ padding:6px 12px; border-radius:9px; text-decoration:none; color:#fff; font-size:.95rem; font-weight:500; background:rgba(255,255,255,.14); border:2px solid transparent; }
.cabecera .nav a:hover{ background:rgba(255,255,255,.3); }
.cabecera .nav a.actual{ background:var(--paper-3); color:var(--ink); border-color:var(--borde); }
/* El duelo iba en latón desde la 101 para anunciarlo como novedad; desde la 192 (Remi) es una
   entrada más, con sus dos caras y el VS. El color queda libre para «El libro» cuando salga. */
/* El nombre corto del duelo en el móvil (sesión 126). Con «Tienda» dentro, el menú se iba a una
   tercera fila en seis de los siete idiomas —«Duelo de detectives» solo ya son 193 px de los 373
   que hay—. La entrada sigue ahí y lleva al mismo sitio: lo único que cambia es el rótulo. */
.cabecera .nav .nav-corto{ display:none; }
@media (max-width:560px){
  .cabecera .nav .nav-largo{ display:none; }
  .cabecera .nav .nav-corto{ display:inline; }
}
/* La tienda (sesión 126). Es la única entrada del menú que SALE de la web, así que lo dice: una
   flecha pequeña detrás. De color no se distingue —el latón ya es del duelo y el blanco es el
   del resto—, que una entrada de menú gritando es lo que se aprende a no mirar. */
.cabecera .nav a.nav-tienda::after{ content:"↗"; margin-left:5px; font-size:.82em; opacity:.85; }
/* Las dos caras y el VS del duelo (sesión 182). Ocupan el hueco del banderín de «Nuevo» sin
   agrandar la pastilla: las caras miden lo que la línea de texto. El VS va en el rojo del
   expediente con borde de papel —el oro de la portada del duelo se perdía sobre el latón— y
   se pisa con las dos caras, que así no ensancha. Late despacio, como latía el «Nuevo»; con el
   movimiento reducido se queda quieto. */
.cabecera .nav .nav-vs{ display:inline-flex; align-items:center; margin-left:6px; vertical-align:middle;
                         height:1em; }   /* las caras sobresalen de la línea sin estirar la pastilla */
.cabecera .nav .nav-vs img{
  width:24px; height:24px; border-radius:50%; display:block; background:#4c5c9c;
  box-shadow:0 0 0 1.5px #1d1a17;
}
/* el rival mira al detective. Sin clase: `.rival` ya es del duelo, que carga esta hoja */
.cabecera .nav .nav-vs img:last-child{ transform:scaleX(-1); }
.cabecera .nav .nav-vs b{
  position:relative; z-index:1; margin:0 -5px; font-family:var(--tipo-display); font-weight:400;
  font-size:.8rem; line-height:1; color:#b3402b; transform:rotate(-8deg);
  text-shadow:-1px -1px 0 #fff9ec, 1px -1px 0 #fff9ec, -1px 1px 0 #fff9ec, 1px 1px 0 #fff9ec;
  animation:nav-vs-late 3.4s ease-in-out infinite;
}
@keyframes nav-vs-late{
  0%, 82%, 100%{ transform:rotate(-8deg) scale(1); }
  88%{ transform:rotate(-8deg) scale(1.18); }
  94%{ transform:rotate(-8deg) scale(.98); }
}
@media (prefers-reduced-motion:reduce){ .cabecera .nav .nav-vs b{ animation:none; } }
@media (max-width:560px){ .cabecera .nav .nav-vs img{ width:22px; height:22px; } }

/* El desplegable «Artículos» de la cabecera (sesión 38). Es un <details>, así que funciona con
   el dedo y con el teclado sin JavaScript; en el ordenador se abre además al pasar el ratón
   (assets/sitio.js lo abre en pointer fino). La flecha la pone el CSS. */
.nav-menu{ position:relative; }
.nav-menu summary{ list-style:none; cursor:pointer; }
.nav-menu summary::-webkit-details-marker{ display:none; }
.nav-menu summary > span{ display:inline-block; padding:6px 12px; border-radius:9px; color:#fff; font-size:.95rem; font-weight:500; background:rgba(255,255,255,.14); border:2px solid transparent; }
.nav-menu summary > span::after{ content:"▾"; margin-left:6px; font-size:.75em; opacity:.85; }
.nav-menu summary:hover > span{ background:rgba(255,255,255,.3); }
.nav-menu[open] summary > span, .nav-menu.actual summary > span{ background:var(--paper-3); color:var(--ink); border-color:var(--borde); }
.nav-menu .menu{
  position:absolute; left:0; top:calc(100% + 8px); z-index:40; margin:0; padding:6px; list-style:none;
  background:var(--paper-3); border:2px solid var(--borde); border-radius:10px; box-shadow:var(--shadow); min-width:220px;
}
/* El puente. El menú va despegado del botón, y ese hueco de 8 px no era de nadie: el ratón lo
   cruzaba, salía del <details> y el menú se cerraba en la cara. Esta banda invisible pertenece
   al menú, así que cruzarla es seguir dentro. (Y `sitio.js` espera un momento antes de cerrar,
   por si el ratón se sale por un lado.) */
.nav-menu .menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav-menu .menu a{ display:block; padding:7px 10px; border-radius:6px; text-decoration:none; color:var(--ink); font-size:.92rem; }
.nav-menu .menu a:hover{ background:var(--paper-2); }
.nav-menu .menu .todos{ margin-top:4px; padding-top:5px; border-top:2px dashed var(--line); }
.nav-menu .menu .todos a{ font-weight:600; color:var(--turquesa); }
/* En pantallas estrechas el menú no puede colgar del botón a las bravas: «Artículos» cae en la
   segunda fila y, según el idioma, a un lado o a otro, así que se salía por la izquierda
   (sesión 45). Se colgó entonces de la barra entera, y quedó el problema contrario: el menú
   aparecía pegado al borde izquierdo, a más de 200 px de su botón, como una caja caída ahí
   (Remi en el móvil, sesión 118). Ahora se hace en dos pisos:
   1. El suelo, para cualquier navegador: colgado de la barra y del ancho de la barra. Nunca se
      sale por ningún lado, en ninguno de los siete idiomas, y se lee como lo que es: el menú de
      la cabecera.
   2. Donde el navegador sabe anclar (`position-area`), justo debajo de su botón, y si por ese
      lado no cabe se da la vuelta solo (`flip-inline`) en vez de salirse. */
@media (max-width:820px){
  .cabecera .nav{ position:relative; }
  .nav-menu{ position:static; }
  .nav-menu .menu{ left:0; right:0; max-width:none; min-width:0; }
  @supports (position-area: block-end span-inline-start){
    .nav-menu summary > span{ anchor-name:--menu-articulos; }
    .nav-menu .menu{
      position-anchor:--menu-articulos; position-area:block-end span-inline-start;
      position-try-fallbacks:flip-inline;
      left:auto; right:auto; top:auto; margin-top:8px;
      min-width:220px; max-width:calc(100vw - 20px);
    }
  }
}
/* EN EL MÓVIL SÍ CABE, medido a 390 px en un iframe de verdad (el navegador sin cabeza miente
   con --window-size: maqueta a 485 aunque la ventana sea más estrecha). Con la cabecera
   envolviendo, «Artículos» cae a la segunda fila y no se sale nada. Solo se quita en la
   pantalla de juego, donde cada fila de cabecera es sitio que le falta al plano —igual que ya
   se hacía con «Cómo se juega»—; allí los artículos se llegan por el pie. */
/* (Sesión 45: Remi quiere la misma cabecera en todas las páginas, también en la de juego; se
   quitó la regla que escondía «Artículos» ahí, y la de «Cómo se juega» más abajo.) */
@media (max-width:820px){ .cabecera{ gap:6px 10px; padding:7px 12px; } }
/* En el móvil, los botones de idioma y de tema van arriba a la derecha, en la fila de la
   marca, en vez de ocupar una tercera fila ellos solos (sesión 45). */
/* Los botones van en absoluto y no cuentan para la altura de la fila, así que la fila de la marca
   (unos 25 px de letra) quedaba más baja que ellos (34 px) y pisaban la primera fila del menú
   (Remi, sesión 101). La marca mide ahora lo que los botones y la fila del menú empieza debajo. */
@media (max-width:560px){
  .cabecera .marca{ margin-right:100px; min-height:34px; display:inline-flex; align-items:center; }
  .cabecera .nav{ flex-basis:100%; margin-top:4px; }
  .cabecera .derecha{ position:absolute; right:10px; top:7px; margin:0; }
}
@media (max-width:480px){
  .cabecera{ padding:6px 10px; gap:4px 8px; }
  .cabecera .marca{ font-size:1.1rem; min-height:30px; }
  .cabecera .nav a{ padding:5px 9px; font-size:.86rem; }
  .boton-icono{ width:30px; height:30px; }
}
/* Con ocho entradas (sesión 126: entró «Tienda») el menú va justo: unos pocos píxeles por
   entrada deciden si hay dos filas o tres. Se aprieta lo justo —la pastilla sigue midiendo
   28 px de alto, que es dedo de sobra— y se gana una fila en el francés y en el alemán. */
@media (max-width:440px){
  .cabecera .nav{ gap:5px; }
  .cabecera .nav a, .cabecera .nav-menu summary > span{ padding:5px 7px; font-size:.83rem; }
}


/* ===== La cabecera plegada (sesión 99) =====
   Una página que va a pantalla completa y no hace scroll (el duelo) no tiene sitio en el móvil
   para la segunda fila del menú (Remi: «quizá no haga falta todo el menú dentro del juego y
   solo un botón que lo despliegue»). La fábrica le pone `plegable` a la cabecera y el botón ☰
   (`pag.navPlegable`): debajo de 62rem el menú se esconde tras el botón y, al pulsarlo, cae
   como una lista sobre la página, sin moverla. En escritorio, la cabecera de siempre. Lo abre
   y lo cierra assets/sitio.js. */
.nav-boton{ display:none; font-size:1.1rem; }
@media (max-width:62rem){
  .cabecera.plegable .nav-boton{ display:inline-flex; }
  .cabecera.plegable{ flex-wrap:nowrap; gap:8px; }
  .cabecera.plegable .marca{ margin-right:auto; }
  .cabecera.plegable .derecha{ position:static; margin:0; }
  .cabecera.plegable .nav{ display:none; }
  .cabecera.plegable.nav-abierto .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; left:0; right:0; top:100%; z-index:40;
    padding:8px 10px 10px; background:var(--banda); border-bottom:3px solid var(--borde);
    box-shadow:0 8px 0 rgba(0,0,0,.25);
  }
  .cabecera.plegable.nav-abierto .nav > a, .cabecera.plegable.nav-abierto .nav-menu summary > span{ display:block; text-align:left; }
  /* El buzón (sesión 178) solo entra en el menú plegado de dentro de un caso: el mando del
     móvil no tiene sitio para él. */
  .cabecera.plegable.nav-abierto .nav > a.nav-buzon{ margin-top:6px; padding-top:10px; border-top:2px dashed var(--line-strong); }
  .cabecera.plegable.nav-abierto .nav-menu{ position:static; }
  .cabecera.plegable.nav-abierto .nav-menu .menu{ position:static; max-width:none; margin-top:4px; }
}

/* La portada, en el móvil (sesión 192): la misma cabecera plegada, para que quepan en la
   primera pantalla el título, jugar e imprimir y el plano. Solo en el móvil: de 761 px para
   arriba, la cabecera de siempre. */
@media (max-width:760px){
  .cabecera.plegable-movil .nav-boton{ display:inline-flex; }
  .cabecera.plegable-movil{ flex-wrap:nowrap; gap:8px; }
  .cabecera.plegable-movil .marca{ margin-right:auto; }
  .cabecera.plegable-movil .derecha{ position:static; margin:0; }
  .cabecera.plegable-movil .nav{ display:none; }
  .cabecera.plegable-movil.nav-abierto .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; left:0; right:0; top:100%; z-index:40;
    padding:8px 10px 10px; background:var(--banda); border-bottom:3px solid var(--borde);
    box-shadow:0 8px 0 rgba(0,0,0,.25);
  }
  .cabecera.plegable-movil.nav-abierto .nav > a, .cabecera.plegable-movil.nav-abierto .nav-menu summary > span{ display:block; text-align:left; }
  .cabecera.plegable-movil.nav-abierto .nav-menu{ position:static; }
  .cabecera.plegable-movil.nav-abierto .nav-menu .menu{ position:static; max-width:none; margin-top:4px; }
}

/* ===== «Gira el móvil para jugar» (sesión 120) =====
   Las dos pantallas de juego —la partida y el duelo— llenan el móvil y no se desplazan: están
   pensadas para el móvil DE PIE. Tumbado, con 390 px de alto, no hay colocación que valga y
   además nadie juega así a un sudoku en una pantalla pequeña. Se tapa con esto, que lo pone
   `assets/sitio.js` midiendo lo que se ve de verdad. Una web no puede bloquear el giro —eso
   solo lo pueden hacer las apps—, así que lo que se puede hacer es pedirlo.
   La tablet apaisada NO entra: ahí se juega bien, y es como juega Remi. */
.gira-movil{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:16px calc(16px + env(safe-area-inset-right, 0px)) 16px calc(16px + env(safe-area-inset-left, 0px));
  background:var(--banda, #0e9fa3); color:#fff;
}
.gira-movil[hidden]{ display:none; }
.gira-hoja{ display:flex; align-items:center; gap:18px; max-width:560px; }
.gira-icono{ width:74px; height:74px; flex:none; fill:none;
             stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.gira-icono .gira-punta{ fill:currentColor; stroke:none; }
.gira-hoja p{ margin:0; font-family:var(--display, "Lilita One", system-ui, sans-serif);
              font-size:clamp(1.1rem, 4.4vw, 1.7rem); line-height:1.15;
              text-shadow:0 2px 0 rgba(0,0,0,.28); }
/* mientras está puesta, la página de debajo no se toca ni se desplaza */
html.pide-de-pie, html.pide-de-pie body{ overflow:hidden !important; touch-action:none; }

/* El buzón en el menú (sesión 178): fuera del menú plegado no sale nunca. */
.nav > a.nav-buzon{ display:none; }
.cabecera.plegable.nav-abierto .nav > a.nav-buzon{ display:block; }

/* «Niños» (sesión 191): la lupa asoma de la pastilla, más grande que la letra, sin agrandar el
   botón (márgenes negativos, como las caras del duelo). **De pie, con el mango hacia abajo**
   (sesión 192, Remi): tumbada, en el móvil se metía en «El libro», que es el botón que se
   anunciará cuando salga el libro y no puede taparlo nada. Y tampoco toca «Jugar» ni ningún otro:
   se queda dentro de su fila (lo mide el dibujo de verdad, no su caja girada). */
.cabecera .nav a.nav-ninos{ position:relative; padding-right:26px; }
.cabecera .nav .nav-lupa{ position:absolute; right:-1px; top:-4px; width:26px; height:26px; transform:rotate(36deg);
  filter:drop-shadow(1px 2px 0 rgba(0,0,0,.22)); pointer-events:none; }
/* Con «Niños» dentro, a 360 px el menú se iba a una tercera fila en cuatro idiomas: en los
   móviles estrechos la lupa pide el sitio justo para no tapar su rótulo, y por debajo de 370 px
   es un poco más pequeña (con 15 px de hueco, el alemán bajaba a tres filas). Lo mide
   `node fabrica/prueba-lupa.js`. */
@media (max-width:440px){
  .cabecera .nav a.nav-ninos{ padding-right:17px; }
  .cabecera .nav .nav-lupa{ width:22px; height:22px; right:-4px; top:-3px; }
}
@media (max-width:370px){
  .cabecera .nav{ gap:4px; }
  .cabecera .nav a, .cabecera .nav-menu summary > span{ padding:5px 6px; }
  .cabecera .nav a.nav-ninos{ padding-right:14px; }
  .cabecera .nav .nav-lupa{ width:20px; height:20px; right:-4px; top:-2px; }
}