:root{
  --papel:#F2F4F1; --tinta:#1B2A41; --tinta-suave:#4A5A72;
  --sello:#A4243B; --visado:#2E6E4E; --ambar:#D8973C;
  --linea:#C9CFC9; --blanco:#FDFDFC;
  --radio:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px; overflow-x:clip}
body{
  background:var(--papel); color:var(--tinta);
  font-family:'Instrument Sans',system-ui,sans-serif;
  min-height:100vh; padding-bottom:90px;
  background-image:radial-gradient(circle at 1px 1px, rgba(27,42,65,.05) 1px, transparent 0);
  background-size:22px 22px;
  /* Varias secciones (agenda, teatro, música, juegos…) bleeden con márgenes
     negativos para pegar sus tarjetas al borde. Sin este cierre, un rebote de
     scroll (overscroll) en un móvil de verdad puede asomar ese sobrante un
     instante y da la sensación de que "cambia el ancho" de la página. Ningún
     contenido de la app necesita scroll horizontal de la PÁGINA — los
     carruseles internos ya llevan su propio overflow-x:auto.

     `clip`, NO `hidden`: son casi lo mismo salvo en un detalle que aquí es
     todo. `hidden` convierte el elemento en contenedor de scroll, y entonces
     cualquier position:sticky de dentro deja de agarrarse a la ventana — así
     se rompió el mapa fijo de la cronología de viajes. `clip` recorta igual
     pero sin crear ese contenedor, y el sticky sigue vivo. */
  overflow-x:clip;
}
/* ── El móvil deja de hacer zoom al tocar un campo ──
   Este era el "cambia el ancho todo el rato" de la agenda, y costó encontrarlo
   porque no es un fallo de anchura: es el navegador.

   Safari en iOS (y Chrome en Android) hacen ZOOM automático al enfocar un
   campo cuya letra mida MENOS de 16px, para que se lea. Y se quedan zoomados.
   Todos los campos de la app median 14,4px (0.9rem), así que en cuanto tocabas
   uno la página entera se reescalaba y parecía que el contenido ya no encajaba
   a lo ancho. La agenda era la más escandalosa porque es la única sección que
   enseña SIEMPRE un formulario ("Apuntar un plan") nada más entrar.

   16px exactos bastan: es el umbral, no una preferencia estética. Solo se
   fuerza en pantallas de móvil; en escritorio no hay zoom que evitar y los
   campos se quedan como estaban.

   Va con !important a conciencia: cada sección se pinta sus campos (form.alta,
   .rest-tema, cine…) con reglas más específicas que esta, y aquí no se está
   eligiendo un tamaño de letra sino poniendo un suelo de comportamiento. Si
   alguien baja de 16px en cualquier sección, vuelve el zoom y vuelve el
   fantasma del "ancho que cambia solo". */
@media (max-width:899px){
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea{ font-size:16px !important }
}
.mono{font-family:'IBM Plex Mono',monospace}
.login-pantalla{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--papel); padding:20px; box-sizing:border-box;
}
.login-caja{
  max-width:360px; width:100%; background:var(--blanco); border:2px solid var(--tinta);
  border-radius:var(--radio); padding:28px 24px; box-shadow:0 8px 24px rgba(27,42,65,.15);
}
.login-caja label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:14px 0 5px}
.login-caja label:first-of-type{margin-top:0}
.login-caja input{width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.9rem; padding:10px 12px; border-radius:8px; border:1.5px solid var(--linea)}
.login-btn{
  width:100%; margin-top:12px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.85rem;
  padding:11px 14px; border-radius:9px; border:1.5px solid var(--tinta); background:var(--blanco); color:var(--tinta); cursor:pointer;
}
.login-btn.primario{background:var(--sello); border-color:var(--sello); color:#fff}
.login-o{text-align:center; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave); margin:16px 0 4px}
.login-estado{font-size:.8rem; margin-top:14px; text-align:center; min-height:1.2em}
.login-estado.error{color:var(--sello)}
.login-estado.ok{color:var(--visado)}
#appEnvoltura{display:contents}
#appEnvoltura[hidden]{display:none}
/* El salto al contenido: invisible hasta que recibe el foco con Tab. */
.saltar-a-main{
  position:absolute; left:-9999px; top:8px; z-index:100;
  background:var(--tinta); color:var(--blanco); border-radius:8px;
  padding:9px 14px; font-weight:700; font-size:.82rem; text-decoration:none;
}
.saltar-a-main:focus{left:8px}
/* Foco visible con teclado en los controles que no lo tenían: el anillo
 * del navegador se pintaba solo en los campos de formulario. */
nav button:focus-visible, .miga:focus-visible, .borrar:focus-visible,
#btnBuscar:focus-visible, #btnBackup:focus-visible,
[role="button"]:focus-visible{
  outline:2.5px solid var(--sello); outline-offset:2px;
}
/* Acotado a LA cabecera de la app (#lateral>header). Con el selector de
 * elemento a secas, este flex+space-between alcanzaba cualquier <header>
 * anidado de las secciones React: en Restaurantes aplastaba los KPIs de la
 * carta a 8px por columna (números y etiquetas montados unos sobre otros), y
 * Teatro tuvo que defenderse con seis anulaciones en 04-teatro.css. */
#lateral>header{
  padding:22px 18px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  max-width:820px; margin:0 auto;
}
h1{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.9rem;
  letter-spacing:-.02em; line-height:1;
}
h1 small{display:block; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.62rem; letter-spacing:.22em; color:var(--tinta-suave); margin-top:6px; text-transform:uppercase}
/* Buscar y copia de seguridad: mismo tamaño y juntos, en las dos versiones.
   Antes el de buscar heredaba estilos sueltos y salía más pequeño y separado. */
.cab-acciones{ display:flex; gap:8px; flex-shrink:0; align-self:flex-start }
#btnBuscar, #btnBackup{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--linea);
  background:var(--papel); font-size:1.05rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
#btnBuscar:hover, #btnBackup:hover{ border-color:var(--tinta) }
.panel-backup{
  max-width:820px; margin:0 auto 14px; padding:14px 18px; background:var(--papel);
  border:1.5px solid var(--sello); border-radius:var(--radio); font-size:.86rem; line-height:1.5;
}
.panel-backup textarea{width:100%; box-sizing:border-box; font-family:'IBM Plex Mono',monospace; font-size:.72rem; padding:8px; border-radius:8px; border:1.5px solid var(--linea)}
.panel-buscar #buscarGlobalInput{
  width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.92rem;
  padding:10px 12px; border-radius:8px; border:1.5px solid var(--linea); margin-top:6px;
}
.resultado-busqueda{
  display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px dashed var(--linea); cursor:pointer;
}
.resultado-busqueda:last-child{border-bottom:0}
.resultado-busqueda .ico{font-size:1.1rem; width:24px; text-align:center; flex-shrink:0}
.resultado-busqueda .info{flex:1; min-width:0}
.resultado-busqueda .info b{display:block; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.resultado-busqueda .info span{display:block; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave)}
.resultado-busqueda .cat{font-family:'IBM Plex Mono',monospace; font-size:.56rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-suave); flex-shrink:0}
.sin-resultados{font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:var(--tinta-suave); padding:10px 4px}
nav{
  display:flex; gap:8px; overflow-x:auto; padding:4px 18px 14px; max-width:820px; margin:0 auto;
  scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}
nav button{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:500; letter-spacing:.06em;
  padding:9px 14px 9px 22px; border:1.5px solid var(--tinta); background:var(--blanco); color:var(--tinta);
  border-radius:999px; white-space:nowrap; cursor:pointer; position:relative; transition:background .15s,color .15s;
}
nav button::before{
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--papel); border:1.5px solid var(--tinta);
}
nav button.on{background:var(--tinta); color:var(--papel)}
nav button.on::before{background:var(--ambar); border-color:var(--ambar)}
main{max-width:820px; margin:0 auto; padding:4px 18px}
section{display:none}
section.on{display:block; animation:sube .25s ease}
@keyframes sube{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ section.on{animation:none} }



/* ══════════ El logo ══════════
   Sustituye al rótulo "BITÁCORA" y su bajada, y ocupa exactamente su hueco:
   la ALTURA es la que manda (50px, lo que medía el rótulo) y el ancho va
   detrás, para que la cabecera no crezca ni empuje el menú hacia abajo.

   El <span> de texto es el respaldo: solo se ve si la imagen no carga, porque
   entonces el onerror del <img> la quita del DOM y deja de cumplirse el
   selector de hermanos. */
header h1.logo{ display:flex; align-items:center; min-width:0; margin:0 }
/* 66px y no los 50 que medía el rótulo: el dibujo es un banner muy apaisado
   —el arco de iconos ocupa todo el ancho— y a 50 no se leía "a thousand left".
   Recortar no era opción: se midió y la ilustración ya llegaba al borde (6-10px
   de aire en 582), así que la única forma de que se vea más grande es esta. La
   cabecera crece 16px y sigue sin llegar a lo que ocupaba el rótulo de ancho. */
header h1.logo img{
  display:block; max-height:66px; max-width:100%;
  width:auto; height:auto; object-fit:contain;
}
header h1.logo img ~ .logo-txt{ display:none }

/* El logo en la pantalla de entrada. Aquí sí puede lucir: es lo primero que se
   ve y la caja tiene sitio de sobra, así que va al ancho de la caja (con tope,
   para que no se desdibuje en pantallas grandes) en vez de atado a una altura
   como en la cabecera. El respaldo de texto funciona igual: si la imagen no
   carga, el onerror la quita y el selector de hermanos deja de esconder el
   rótulo. */
.login-caja h1.login-logo{
  display:flex; justify-content:center; margin:0 0 20px; font-size:1.6rem;
}
.login-caja h1.login-logo img{
  display:block; width:100%; max-width:270px; height:auto;
}
.login-caja h1.login-logo img ~ .logo-txt{ display:none }

/* El nombre de la pestaña, entre el logo y los botones. Manuscrito para que
   converse con el logo, y en gris suave: sitúa sin robar atención.
   Sin nowrap: "Juegos de mesa" o "Escape rooms" no caben en una línea a este
   ancho, así que se dejan partir en dos en vez de recortarlas con "…". */
.sec-nombre{
  flex:1; min-width:0; text-align:center; align-self:center;
  font-family:'Caveat',cursive; font-size:1.38rem; line-height:1.05;
  color:var(--tinta-suave); opacity:.85;
  overflow:hidden; white-space:normal; word-break:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sec-nombre:empty{ display:none }

/* Bandera de país como SVG propio (public/img/banderas/, de flag-icons, MIT):
   el emoji de bandera no se ve en Windows (Segoe UI Emoji no trae esos
   glifos), así que agenda/cuaderno/cronología usan esta imagen en vez del
   emoji. Tamaño por defecto para uso en línea, junto a texto; cada sitio
   que la use más grande (p. ej. de fondo en una celda del calendario) lo
   sobrescribe. */
.bandera-img{
  width:1.3em; height:1em; object-fit:cover; border-radius:2px;
  vertical-align:-0.15em; display:inline-block;
}