/* Estilos de las secciones ya migradas a React.
   Va al final por el mismo motivo que el resto: el orden importa y este
   archivo puede necesitar ganar a los anteriores. */

/* Aviso de deshacer tras un borrado. Sustituye al confirm() del navegador:
   no corta el paso, y permite recuperar lo borrado durante un rato. */
.aviso-deshacer{
  display:flex; align-items:center; gap:10px;
  background:var(--tinta); color:var(--blanco);
  border-radius:var(--radio); padding:10px 12px; margin-bottom:12px;
  font-size:.82rem; box-shadow:0 6px 18px rgba(27,42,65,.18);
}
.aviso-deshacer span{ flex:1 }
.aviso-deshacer button{
  background:var(--blanco); color:var(--tinta); border:none;
  border-radius:8px; padding:6px 12px; font:inherit; font-weight:600;
  cursor:pointer;
}
.aviso-deshacer button:hover{ background:var(--ambar) }
.aviso-deshacer .descartar{
  background:transparent; color:var(--blanco); padding:6px 8px;
  font-size:1.1rem; line-height:1;
}
.aviso-deshacer .descartar:hover{ background:rgba(253,253,252,.15) }
/* La variante FLOTANTE la usa el lado clásico (mostrarDeshacer, nucleo.js):
   sus vistas se repintan enteras con innerHTML, así que el aviso vive fuera
   de #main, como toast fijo sobre el pie, y sobrevive a los repintados. */
.aviso-deshacer.flotante{
  position:fixed; left:50%; bottom:64px; transform:translateX(-50%);
  z-index:60; margin:0; width:min(480px, calc(100vw - 24px));
}

/* Etiquetas visibles en los formularios. Antes solo había placeholders, que
   desaparecen al escribir y no los anuncia bien un lector de pantalla. */
form.alta label{
  display:block; font-family:'IBM Plex Mono',monospace;
  font-size:.62rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tinta-suave); margin:8px 0 3px;
}
form.alta .dos > div{ display:flex; flex-direction:column }
form.alta .dos > div > label{ margin-top:0 }
/* El alta clásica usa <span> para el par etiqueta+campo (mismo trato). */
form.alta .dos > span{ display:flex; flex-direction:column }
form.alta .dos > span > label{ margin-top:0 }

form.alta button[type="submit"]:disabled{
  opacity:.5; cursor:not-allowed;
}

/* ══════════ Menú con iconos ══════════ */

/* MÓVIL: solo el icono, en rejilla de 6×2.
   Con once secciones, una sola fila de píldoras con texto obligaba a arrastrar
   la barra a la derecha y las últimas quedaban escondidas. Seis por fila deja
   las once en dos filas justas (6+5) en vez de tres (5+5+1): todo visible de
   un vistazo y sin desplazamiento lateral.
   El texto NO se borra del DOM, solo se oculta: los lectores de pantalla lo
   siguen leyendo, y además cada botón lleva aria-label. */
nav{
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  overflow:visible;
}
nav button{
  padding:8px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:44px;             /* zona táctil cómoda */
  border-radius:12px;
}
nav button > span{display:none}
nav button > i{font-style:normal; font-size:1.15rem; line-height:1}
/* El punto indicador estorba cuando solo hay un icono: el estado activo ya se
   ve por el fondo relleno. */
nav button::before{display:none}

/* ESCRITORIO: icono Y texto, que el menú es una columna y sobra sitio. */
@media (min-width:900px){
  nav{
    display:flex; grid-template-columns:none;
  }
  nav button{
    flex-direction:row; justify-content:flex-start; gap:9px;
    padding:10px 14px; border-radius:999px; min-height:0;
  }
  nav button > span{display:inline}
  nav button > i{font-size:1rem}
}

/* ══════════ Paneles de buscar y copia: solapaban el menú ══════════ */

/* En escritorio el body es una rejilla y #appEnvoltura usa display:contents, así
   que estos paneles SON elementos de la rejilla. Nadie les había asignado
   celda, de modo que se auto-colocaban en la columna del menú y se montaban
   encima. Se sacan del flujo y pasan a ser una capa flotante centrada, que
   además es lo que corresponde a un panel que se abre y se cierra. */
@media (min-width:900px){
  .panel-backup{
    position:fixed; top:24px; left:50%; transform:translateX(-50%);
    width:min(760px, calc(100vw - 56px)); max-height:calc(100vh - 48px);
    overflow:auto; z-index:60;
    box-shadow:0 18px 48px rgba(27,42,65,.28);
    margin:0;
  }
}

/* ══════════ Barra lateral (cabecera + menú) ══════════ */

/* En móvil no existe como caja: cabecera y menú se comportan igual que antes. */
#lateral{display:contents}

@media (min-width:900px){
  /* En escritorio SÍ es una caja, y ocupa una sola celda de la rejilla. Es lo
     que arregla que el menú apareciera a 800px de altura: al no compartir filas
     con <main>, la altura de main ya no infla nada.
     El sticky y el desbordamiento propio están aquí, no en cabecera y nav por
     separado: con diez secciones el conjunto puede pasar del alto de pantalla en
     un portátil, y así se desplaza por dentro en lugar de quedar cortado. */
  #lateral{
    display:flex; flex-direction:column;
    grid-column:1; grid-row:1;
    position:sticky; top:0; align-self:start;
    max-height:100vh; overflow-y:auto;
    scrollbar-width:none;
  }
  #lateral::-webkit-scrollbar{display:none}
  /* Ya no necesitan pegarse por su cuenta: lo hace el contenedor. (Acotados
   * a los de la app: un header/nav anidado de una sección no pinta nada aquí.) */
  #lateral>header{position:static; top:auto}
  #lateral>nav{position:static; top:auto}
  /* main deja de abarcar filas: una sola, junto a la barra lateral. */
  main{grid-row:1}
}

/* Diario de sincronización del panel 💾. Monoespaciado y compacto: es para leer
   de un vistazo o copiar y pegar, no para lucirse. */
ul.diario{list-style:none; margin:0; padding:0; font-family:'IBM Plex Mono',monospace; font-size:.68rem; line-height:1.5}
ul.diario li{padding:3px 0; border-bottom:1px dashed var(--linea); word-break:break-word}
ul.diario li:last-child{border-bottom:0}
ul.diario i{color:var(--tinta-suave); font-style:normal}

/* ══════════ Memoria · vista derivada de toda la bitácora ══════════
   Vive en la Agenda (body[data-area="agenda"]). Cabecera común —banda,
   pestañas y filtros— y cajas del sistema; sin título editorial ni portadas:
   el título lo pone la barra. En escritorio, la columna derecha (.sis-dos)
   lleva la temporada y los viajes del anuario. */
.mem{ padding-bottom:24px }
.mem > .miga{ padding-bottom:10px }
.mem-filtro-nota{ margin:-4px 0 12px; font-size:12.5px; color:var(--tx2) }

/* ── Hoy ── */
.mem-hoy{ gap:10px }
.mem-recuerdo-dia{
  display:grid; grid-template-columns:minmax(130px,34%) minmax(0,1fr); min-height:150px; overflow:hidden;
  border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2);
}
.mem-recuerdo-dia.sin-foto{ display:block; min-height:0 }
.mem-recuerdo-foto{ display:block; width:100%; height:100%; min-height:150px; padding:0; border:0; overflow:hidden; cursor:pointer; background:var(--borde-s) }
.mem-recuerdo-foto img{ display:block; width:100%; height:100%; object-fit:cover }
.mem-recuerdo-cuerpo{ padding:13px 14px; display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.mem-recuerdo-cuerpo h4{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:1.3rem; line-height:1.1; letter-spacing:-.01em }
.mem-recuerdo-cuerpo > p{ margin:0; font-size:13px; line-height:1.4; color:var(--tx2) }
.mem-conexiones{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px }
.mem-conexiones .sis-chip i{ font-style:normal; color:var(--tx2) }
.mem-sin-coincidencia{ margin:0; font-size:12.5px; line-height:1.45; color:var(--tx2) }

/* «Tal día como hoy» con todas las áreas (src/memoria/talDia.ts): el año a
   la izquierda y lo de ese día, cada cosa con la etiqueta de su tipo sobre
   el mismo pastel que en el calendario. */
.mem-taldia-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.mem-taldia-lista > li{ display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:start }
.mem-taldia-anio{ font-family:var(--f-tit); font-weight:800; font-size:1.3rem; line-height:1; color:var(--tx) }
.mem-taldia-anio small{ display:block; margin-top:4px; font-family:var(--f-mono); font-weight:500; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3) }
.mem-taldia-lista ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.mem-taldia-lista button{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; min-height:44px;
  padding:7px 10px; border-radius:var(--r-m); border:1px solid var(--borde-s); background:var(--sup); color:var(--tx); font:inherit;
}
.mem-taldia-lista button:hover, .mem-taldia-lista button:focus-visible{ border-color:var(--tx) }
.mem-taldia-lista button span{ display:flex; flex-direction:column; min-width:0 }
.mem-taldia-lista button b{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mem-taldia-lista button small{ font-size:12px; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sis-etq.mem-taldia-tipo{ flex-shrink:0; min-width:78px; justify-content:center; font-style:normal; --et:var(--tx); --ef:var(--neutro-suave) }
.mem-taldia-tipo.t-viaje{ --ef:#EAF2FB } .mem-taldia-tipo.t-concierto{ --ef:#F3E6EF }
.mem-taldia-tipo.t-teatro{ --ef:#FEEDE1 } .mem-taldia-tipo.t-cine{ --ef:#EAEBED }
.mem-taldia-tipo.t-comida{ --ef:#FEECDF } .mem-taldia-tipo.t-partida{ --ef:#EEE9F6 }
.mem-taldia-tipo.t-escape{ --ef:#FEE9DB } .mem-taldia-tipo.t-plan{ --ef:#E7F1E8 }

/* ── La tarjeta de un viaje (Hoy, Línea temporal y Anuarios) ── */
.mem-rejilla{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px }
.mem-viaje{
  display:grid; grid-template-columns:72px minmax(0,1fr) 14px; align-items:center; gap:10px; width:100%; min-height:78px;
  padding:8px 10px; box-sizing:border-box; text-align:left; font:inherit; color:inherit; cursor:pointer;
  border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup);
}
.mem-viaje:hover{ border-color:var(--borde) }
.sis-caja > .mem-viaje + .mem-viaje{ margin-top:-4px }
.mem-viaje img, .mem-viaje-sin-foto{ display:block; width:72px; height:58px; border-radius:var(--r-s); object-fit:cover; background:var(--sup2) }
.mem-viaje-sin-foto{ display:flex; align-items:center; justify-content:center; color:var(--tx3); font-size:1.2rem }
.mem-viaje-texto{ min-width:0 }
.mem-viaje-texto small{ display:block; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--tx3) }
.mem-viaje-texto b{ display:block; margin:2px 0; font-family:var(--f-tit); font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mem-viaje-texto > span{ display:block; font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mem-viaje > i{ font-style:normal; font-size:1.3rem; color:var(--tx3) }

/* ── Cifras de la temporada y del anuario ── */
.mem-cifras{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 12px }
.mem-total{ font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.mem-meses{ height:105px; display:flex; align-items:flex-end; gap:5px; padding:10px 0 0; border-top:1px solid var(--borde-s) }
.mem-meses div{ display:flex; flex:1; height:100%; align-items:center; justify-content:flex-end; flex-direction:column; gap:4px }
.mem-meses span{ display:block; width:100%; max-width:22px; min-height:4px; border-radius:3px 3px 0 0; background:var(--area) }
.mem-meses small{ font-family:var(--f-mono); font-size:9.5px; color:var(--tx3) }

/* ── Línea temporal: el año a la izquierda y sus viajes ── */
.mem-crono{ display:flex; flex-direction:column; gap:16px }
.mem-anio-grupo{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px }
.mem-anio-marca{ padding-right:12px; border-right:2px solid var(--borde); text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.mem-anio-marca b{ font-family:var(--f-tit); font-weight:800; font-size:1.25rem }

@media (max-width:560px){
  .mem-recuerdo-dia{ grid-template-columns:1fr }
  .mem-recuerdo-foto{ height:185px; min-height:0 }
  .mem-anio-grupo{ grid-template-columns:52px minmax(0,1fr); gap:8px }
  .mem-viaje{ grid-template-columns:62px minmax(0,1fr) 10px }
  .mem-viaje img, .mem-viaje-sin-foto{ width:62px; height:54px }
  .mem-taldia-lista > li{ grid-template-columns:60px minmax(0,1fr); gap:8px }
}
/* Escritorio: las tarjetas de viaje a dos o tres columnas, y las seis cifras
   del anuario en una fila. */
@media (min-width:900px){
  .mem-rejilla{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) }
  .mem-cifras-seis{ grid-template-columns:repeat(6, minmax(0,1fr)) }
}


/* Marca de fichas de cine duplicadas. En rojo suave porque es algo que conviene
   limpiar, no un error grave. */
.cine-dup{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:700;
  background:#C62828; color:#fff; padding:1px 5px; border-radius:999px;
  margin-left:6px; white-space:nowrap;
}
/* El aviso de deshacer dentro de cine va sobre fondo oscuro. */
.cine .aviso-deshacer{background:#F6E9D2; color:#2A1200}
.cine .aviso-deshacer button{background:#2A1200; color:#F6E9D2}
.cine .aviso-deshacer .descartar{background:transparent; color:#2A1200}

/* ══════════ Cuaderno de viajes ══════════ */
.vj{ padding:2px 0 }

/* El filtro de viajeros ya es el .fp del sistema (16-sistema.css). Aquí
   quedan los chips de «¿Quién va?» de los formularios: los de Viajes usan ya
   .sis-chip, pero el alta de un viaje desde la Agenda (agenda.js) sigue
   pintando .vj-chip, que se viste igual. */
.vj-chips{ display:flex; flex-wrap:wrap; gap:6px }
.vj-chip{
  height:var(--h-s); box-sizing:border-box; padding:0 12px; border-radius:var(--r-pill); cursor:pointer;
  border:1.5px solid var(--borde); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:13px; font-weight:400;
}
.vj-chip.on{ background:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600 }

/* Lo que dicen los viajes que pasan los filtros del Cuaderno (noches y días
   fuera): una línea de rótulo, no cajas —las cifras grandes son de la banda—. */
.vj-resultado{ margin:0 0 10px }
.vj-resultado .sis-rotulo{ white-space:normal; line-height:1.6 }
/* Las herramientas del Cuaderno (Lightroom, coordenadas), al final de la lista. */
.vj-herramientas{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px }

.vj-h4{ font-family:var(--f-tit); font-weight:800; font-size:15px; margin:18px 0 8px; color:var(--tx) }
.vj-nota{ font-size:13px; line-height:1.5; color:var(--tx2); margin:0 0 8px }
.vj-notas p{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:12px 14px; font-size:.86rem; line-height:1.55; white-space:pre-wrap; max-width:70ch;
}

.vj-costes-cab{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; padding:0; margin:0 0 8px; cursor:pointer; text-align:left;
}
.vj-costes-cab .vj-h4{ margin:0 }
.vj-costes-total{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.78rem; color:var(--tinta) }
.vj-costes-flecha{ font-style:normal; display:inline-block; transition:transform .15s ease; color:var(--tinta-suave) }
.vj-costes-flecha.abierta{ transform:rotate(180deg) }
.vj-coste-fila{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; margin-bottom:5px;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:9px; font-size:.8rem;
}
.vj-coste-fila b{ font-family:'IBM Plex Mono',monospace; font-weight:600 }

.vj-pais-fila{
  display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:5px;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:9px; font-size:.8rem;
}
.vj-pais-fila > span:first-child{ flex:1 }
.vj-pais-fila i{ display:block; font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave) }
.vj-quien{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--visado) }
.vj-pais-fila button{
  border:none; background:transparent; color:var(--sello); font-size:1.1rem;
  cursor:pointer; padding:0 4px; line-height:1;
}

/* Una parada en la página del viaje: una caja del sistema. */
.vj-dia{
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l);
  padding:12px 14px; margin-bottom:8px; font-size:14px;
}
.vj-dia b{ font-family:var(--f-tit); font-size:15px }
.vj-dia p{ margin:5px 0 0 }
.vj-dia-pais{ font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:var(--tinta-suave) }

/* ── "Dónde comimos": las visitas a restaurantes dentro de una parada ──
   Aro de nota heredado de Restaurantes (.rest-circulo-nota) pero sobre papel
   claro: se le cambia el fondo interior para que no parezca un agujero. */
.vj-comidas{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--linea) }
.vj-comidas-titulo{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:0 0 4px }
.vj-comida{ padding:5px 0 }
.vj-comida + .vj-comida{ border-top:1px solid var(--linea) }
.vj-comida-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.vj-comida-cab b{ font-size:.8rem }
.vj-comida-enlace{
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  font-weight:700; font-size:.8rem; color:var(--tinta); font-family:inherit;
}
.vj-comida-enlace:hover{ color:var(--sello); text-decoration:underline }
/* «Durante este viaje»: los cruces con las otras áreas, cada fila una puerta. */
.vj-cruces{ display:grid; gap:6px }
.vj-cruce{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px;
  padding:9px 12px; font-family:inherit; color:var(--tinta);
}
.vj-cruce:hover{ border-color:var(--tinta) }
.vj-cruce-ico{ font-size:1rem; flex-shrink:0 }
.vj-cruce-txt{ flex:1; min-width:0 }
.vj-cruce-txt b{ display:block; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vj-cruce-txt small{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--tinta-suave) }
.vj-cruce-ir{ color:var(--tinta-suave); flex-shrink:0 }
/* Viajes detectados en las ubicaciones y sin registrar. */
.vj-detectados{ margin-top:20px }
.vj-detectado{
  display:flex; align-items:center; gap:10px;
  background:var(--sup); border:1.5px dashed var(--area); border-radius:var(--r-l);
  padding:10px 12px; margin-top:8px;
}
.vj-detectado-txt{ flex:1; min-width:0 }
.vj-detectado-txt b{ display:block; font-size:.84rem }
.vj-detectado-txt small{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave) }
/* «Darlo de alta»: secundario pequeño; el principal de la pantalla es el +. */
.vj-detectado>button{
  flex-shrink:0; height:var(--h-s); padding:0 12px; cursor:pointer; border-radius:var(--r-m);
  background:var(--sup); color:var(--tx); border:1.5px solid var(--tx);
  font-family:var(--f-txt); font-size:13px; font-weight:600;
}
/* Gestión de las fotos de Lightroom: reasignar y desenlazar. */
.vj-fotos-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.vj-fotos-cab .vj-h4{ margin-bottom:8px }
.vj-gestfotos-abrir{
  flex-shrink:0; cursor:pointer; font-size:.7rem; font-weight:700;
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:8px; padding:5px 10px;
}
.vj-gestfotos{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:12px 14px; margin-bottom:12px;
}
.vj-gestfotos-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.vj-gestfotos-cab b{ font-size:.88rem }
.vj-gestfotos-cab button{
  cursor:pointer; font-size:.7rem; font-weight:700; background:var(--blanco);
  border:1.5px solid var(--linea); border-radius:8px; padding:5px 9px;
}
.vj-gestfotos-aviso{
  background:#E7F1EA; color:var(--visado); border-radius:8px;
  padding:7px 10px; font-size:.78rem; font-weight:600; margin:8px 0;
}
.vj-gestfotos-dia{ margin-top:10px }
.vj-gestfotos-diacab{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer;
  background:var(--papel); border:none; border-radius:7px; padding:6px 9px;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:700; color:var(--tinta);
}
.vj-gestfotos-diacab i{ font-style:normal; margin-left:auto; color:var(--tinta-suave); font-weight:500 }
.vj-gestfotos-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:5px; margin-top:6px;
}
.vj-gestfotos-foto{
  position:relative; aspect-ratio:1; border-radius:7px; cursor:pointer;
  background-size:cover; background-position:center; background-color:var(--papel);
  border:2px solid transparent; padding:0;
}
.vj-gestfotos-foto.on{ border-color:var(--visado) }
.vj-gestfotos-foto i{
  position:absolute; top:3px; right:3px; font-style:normal;
  background:var(--visado); color:#fff; border-radius:50%;
  width:18px; height:18px; display:grid; place-items:center; font-size:.66rem;
}
.vj-gestfotos-acciones{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--linea);
}
.vj-gestfotos-n{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--tinta-suave) }
.vj-gestfotos-acciones select{
  flex:1; min-width:150px; font-size:.78rem; padding:7px 8px;
  border:1.5px solid var(--linea); border-radius:8px; background:var(--blanco);
}
.vj-gestfotos-acciones button{
  cursor:pointer; font-size:.74rem; font-weight:700; padding:7px 12px;
  background:var(--tinta); color:var(--blanco); border:1.5px solid var(--tinta); border-radius:8px;
}
.vj-gestfotos-acciones button.borrar{ background:var(--blanco); color:var(--sello); border-color:var(--sello) }
.vj-gestfotos-acciones button:disabled{ opacity:.45; cursor:default }
.vj-comida-sub{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave) }
.vj-comida-platos{ font-size:.76rem }
.vj-comidas .rest-circulo-nota{ width:34px; height:34px }
.vj-comidas .rest-circulo-nota::after{ background:var(--blanco) }
.vj-comidas .rest-circulo-nota b{ font-size:.72rem }
.vj-comidas-sueltas{ background:var(--blanco); border:1.5px solid var(--linea); border-radius:12px; padding:10px 12px; margin-bottom:8px; border-top:1.5px solid var(--linea) }

/* Los formularios de Viajes (alta, edición y parada; también el alta clásica
   de la portada): caja blanca del sistema, rótulos en mono, campos de la
   altura común y, al pie, .sis-acciones con Cancelar y Guardar. */
.vj-form{
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:16px 18px;
  margin:0 0 14px; box-sizing:border-box;
}
.vj-form strong{
  display:block; font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx2);
  margin-bottom:4px; padding-bottom:10px; border-bottom:1px solid var(--borde-s);
}
.vj-form label{
  display:block; font-family:var(--f-mono); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--tx3); margin:14px 0 6px;
}
.vj-form input, .vj-form select{
  width:100%; box-sizing:border-box; height:var(--h-m); font-family:var(--f-txt); font-size:14px;
  padding:0 12px; border-radius:var(--r-m); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx);
}
.vj-form input[type="file"]{ height:auto; padding:8px 12px }
/* Los textos largos (puntos de interés, restaurantes, recuerdos) necesitan
   sitio para escribir y RELEER: altura de verdad y redimensionables. */
.vj-form textarea{
  width:100%; box-sizing:border-box; font-family:var(--f-txt); font-size:14px;
  line-height:1.5; padding:10px 12px; border-radius:var(--r-m); border:1.5px solid var(--borde);
  background:var(--sup); color:var(--tx); min-height:110px; resize:vertical;
}
.vj-form input:focus, .vj-form select:focus, .vj-form textarea:focus{ outline:none; border-color:var(--tx) }
.vj-form .dos{ display:flex; gap:10px }
.vj-form .dos > div{ flex:1; min-width:0 }
.vj-form .vj-nota{ margin:12px 0 0 }
.vj-form .sis-acciones{ margin-top:16px }

/* ── Calendario de rango de la parada ──
   Un solo calendario para ida y vuelta: primer toque marca el inicio, el
   segundo el final; un solo día marcado = parada de un día. */
.cal-rango{ border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup2); padding:10px; margin-top:4px }
.cal-rango-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.cal-rango-nav b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.9rem; text-transform:capitalize }
/* Mes y año, elegibles de un salto. Se pintan como el rótulo que sustituyen
   —sin marco ni flechita— para que sigan leyéndose como el título del
   calendario y no como dos campos más de formulario. */
.cal-rango-salto{ display:flex; align-items:center; gap:4px; min-width:0 }
.cal-rango-salto select{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.9rem; font-weight:600;
  color:var(--tinta); background:transparent; border:none; border-radius:6px;
  padding:2px 4px; cursor:pointer; text-transform:capitalize;
  appearance:none; -webkit-appearance:none; text-align:center;
}
.cal-rango-salto select:hover{ background:var(--papel) }
.cal-rango-salto select:focus-visible{ outline:2px solid var(--ambar); outline-offset:1px }
.cal-rango-nav button{
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta); font-size:.9rem;
  border-radius:8px; width:30px; height:30px; cursor:pointer; line-height:1;
}
.cal-rango-nav button:disabled{ opacity:.3; cursor:default }
.cal-rango-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.cal-rango-dow{
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; text-transform:uppercase;
  color:var(--tinta-suave); text-align:center; padding:2px 0;
}
/* Altura fija y no aspect-ratio: la altura derivada del ratio no cuenta para el
   alto de la fila de la rejilla y los botones desbordaban sobre el pie. */
.cal-rango-dia{
  height:38px; border:none; background:transparent; color:var(--tinta); font:inherit; font-size:.8rem;
  border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cal-rango-dia:disabled{ color:var(--linea); cursor:default }
.cal-rango-dia.dentro{ background:var(--area-suave); border-radius:0 }
.cal-rango-dia.punta{ background:var(--area); color:#fff; font-weight:700 }
.cal-rango-dia.ini{ border-radius:8px 0 0 8px }
.cal-rango-dia.fin{ border-radius:0 8px 8px 0 }
.cal-rango-dia.ini.fin{ border-radius:8px }
.cal-rango-pie{
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:var(--tinta-suave);
  text-align:center; margin-top:8px;
}

/* ── Carrusel deslizable ──
   Paneles a pantalla completa del contenedor con imán de scroll horizontal, y
   pestañitas encima que se sincronizan con el deslizamiento (eventos.js). Lo
   usan los tops de música y las estadísticas de cine. */
.sw{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; margin:0 -4px;
}
.sw::-webkit-scrollbar{ display:none }
.sw-panel{ flex:0 0 100%; scroll-snap-align:start; padding:0 4px; box-sizing:border-box }
.sw-tabs{ display:flex; gap:4px }
.sw-tabs button{
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 8px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea); background:transparent; color:var(--tinta-suave);
}
.sw-tabs button.on{ background:var(--tinta); border-color:var(--tinta); color:var(--papel) }
/* Dentro del tema de cine (violeta oscuro). */
.cine .sw-tabs button{ border-color:#5A4668; color:#C9BFD6 }
.cine .sw-tabs button.on{ background:#F6C453; border-color:#F6C453; color:#2A1B33 }

/* ── Sugerencias de artista (MusicBrainz) ──
   El mismo gesto que las de TMDB en el cine. Sobre papel en la agenda; en
   Música las repinta su propio CSS (06-musica.css, dentro de .mus). */
#mb-sugerencias{ display:flex; flex-direction:column; gap:4px; margin-top:6px }
.mb-sug{
  display:flex; align-items:baseline; gap:8px; text-align:left; cursor:pointer;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:9px; padding:8px 10px;
  font:inherit; color:var(--tinta);
}
.mb-sug:hover{ border-color:var(--tinta) }
.mb-sug b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.86rem }
.mb-sug span{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--tinta-suave) }
.mb-sin{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta-suave); margin-top:6px }
.mb-elegido{
  margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--visado);
}

/* ── Filtro de personas ──
   Una sola línea, pequeño, y compartido por agenda, música, teatro y comida.
   El tono base es el papel de la app; las páginas con tema oscuro (música) lo
   tiñen debajo. Teatro ya no tiene telón granate: usa el filtro común tal
   cual (16-sistema.css). */
.fp{
  display:flex; align-items:center; gap:4px; margin:0 0 10px;
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.fp::-webkit-scrollbar{ display:none }
.fp-rotulo{
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave); flex-shrink:0; margin-right:2px;
}
.fp-chip{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:600;
  padding:4px 9px; border-radius:999px; cursor:pointer; flex-shrink:0;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta);
}
.fp-chip.on{ background:var(--tinta); border-color:var(--tinta); color:var(--papel) }
.fp-chip.todos{ border-style:dashed }
.fp-chip.todos.on{ background:var(--visado); border-color:var(--visado); color:#fff }

/* Chips-checkbox de "¿quién?" en los formularios: checkboxes de verdad
   vestidos de chip, así FormData los recoge sin JavaScript de estado. */
.chips-check{ display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 }
/* El chip es el contenedor de posicionamiento de su checkbox. Sin esto, el
   `width:100%` que `form.alta input` (02-viajes.css) pinta sobre TODOS los
   inputs se resolvía contra la sección entera (339px en un móvil), y como el
   checkbox absoluto arranca donde le toca en la fila, los de los chips de en
   medio sobresalían hasta 112px por el borde derecho. Invisibles (opacity:0)
   pero de verdad: el desbordamiento horizontal hacía que el móvil encogiera
   y desplazara la página al tocarla — el famoso baile de ancho de la Agenda,
   la única sección que siempre pinta este formulario nada más entrar. */
.chip-check{ position:relative }
.chip-check input{ position:absolute; inset:0; height:100%; opacity:0; pointer-events:none }
.chip-check span{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.64rem; font-weight:600;
  padding:6px 11px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--linea); background:var(--papel); color:var(--tinta);
}
.chip-check input:checked + span{ background:var(--tinta); border-color:var(--tinta); color:var(--papel) }
.chip-check input:focus-visible + span{ outline:2px solid var(--ambar); outline-offset:1px }
/* ── Mapa del itinerario en la ficha del viaje ── */
.mapa-itin{
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:14px;
  overflow:hidden; margin-bottom:12px;
}
.mapa-itin svg{ display:block; width:100% }
.mapa-itin path{ fill:#DFE4DF; stroke:var(--blanco); stroke-width:.4; vector-effect:non-scaling-stroke }
.mapa-itin path.pais-viaje{ fill:var(--visado) }
.mapa-itin .ruta-itin{
  fill:none; stroke:var(--sello); stroke-dasharray:3 2.4; stroke-linecap:round;
  vector-effect:non-scaling-stroke; stroke-width:2px;
}
.mapa-itin circle{ fill:var(--sello); stroke:var(--blanco); vector-effect:non-scaling-stroke; stroke-width:1.5px }
.mapa-itin text{
  fill:var(--tinta); stroke:var(--blanco); paint-order:stroke; stroke-linejoin:round;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
}
.vj-error{ color:var(--error); font-size:13px; margin:10px 0 0; font-weight:600 }

/* Las filas de botones que quedan (proponer paradas, viajes detectados, la
   página del viaje): botones secundarios del sistema. El principal de la
   pantalla es el + único. */
.vj-btn-row{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
.vj-btn-row button{
  height:var(--h-m); padding:0 14px; box-sizing:border-box; border-radius:var(--r-m); cursor:pointer;
  border:1.5px solid var(--tx); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-weight:600; font-size:14px; white-space:nowrap;
}
.vj-btn-row button:disabled{ opacity:.55; cursor:default }

/* ── La cabecera del viaje ──
   La portada a sangre y el título naciendo del propio fundido.

   La gracia está en dónde muere el degradado: la foto se disuelve hasta el
   color del papel ANTES de que empiece el texto, así que el título se lee
   sobre fondo claro y no hace falta ni sombra ni cortina oscura encima de la
   foto. Es lo que evita el típico banner con el texto peleándose con la
   imagen.

   No hace falta margen negativo para sacarla a sangre: la sección de viajes ya
   va de borde a borde (.vj no tiene padding lateral). Se probó con -18px y lo
   único que hacía era recortar 36px de foto para nada. */
.vj-cab{ position:relative; margin:0 0 12px }
/* El alto total deja sitio al texto POR DEBAJO de la foto. La foto manda casi
   toda la altura a propósito (pedido expreso: más espacio para la imagen, así
   un sujeto que no está centrado verticalmente en la foto original no se
   recorta tan a lo bruto) — el bloque de título, ahora con letras más
   grandes y la línea de "quién fue", necesita algo más de sitio que antes. */
.vj-cab.con-foto{ min-height:430px; display:flex; flex-direction:column; justify-content:flex-end }
.vj-cab-foto{
  position:absolute; top:0; left:0; right:0; height:320px;
  width:100%; object-fit:cover; display:block; z-index:0;
}
/* El velo cubre la foto entera y llega al color del papel justo donde ella
   acaba: a partir de ahí ya no hay imagen que estorbe al texto. */
.vj-cab-velo{
  position:absolute; top:0; left:0; right:0; height:320px; z-index:1;
  background:linear-gradient(to bottom,
    rgba(13,27,42,.34) 0%,
    rgba(13,27,42,0) 28%,
    rgba(242,244,241,0) 44%,
    rgba(242,244,241,.72) 76%,
    var(--papel) 100%);
}
.vj-cab-botones{ position:relative; z-index:2; display:flex; align-items:center; gap:10px; padding-top:12px }
/* Sobre la foto flotan, así que se despegan del canto; el texto de abajo sí va
   alineado con el billete y las paradas, en el 0 de la sección. */
.vj-cab.con-foto .vj-cab-botones{ position:absolute; top:12px; left:10px; right:10px; padding-top:0 }
/* Sobre la foto los botones van en pastilla clara: el mismo botón tiene que
   leerse igual sobre un cielo de Islandia que sobre un desierto. */
.vj-cab.con-foto .volver,
.vj-cab.con-foto .vj-editar-viaje{
  background:rgba(253,253,252,.92); border-color:transparent;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.vj-cab-txt{ position:relative; z-index:2; padding:10px 0 2px }
.vj-cab.con-foto .vj-cab-txt{ padding-top:0 }
.vj-cab-tipo{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--area); margin-bottom:3px;
}
.vj-cab-nombre{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:2.3rem;
  line-height:1.05; letter-spacing:-.02em; color:var(--tinta); margin:0;
  /* Los nombres largos ("Países bálticos y San Petersburgo") caben en dos
     líneas antes que encogerse hasta no leerse. */
  overflow-wrap:break-word;
}
.vj-cab-fechas{
  font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--tinta-suave); margin-top:5px;
}
.vj-cab-banderas{ letter-spacing:2px }
/* Quién fue: lo decía la tarjeta de embarque (ya quitada de esta página) —
   se rescata aquí para no perder el dato, en un tono más discreto que la
   fecha, que es lo que de verdad manda en esta línea. */
.vj-cab-quien{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--tinta-suave);
  opacity:.8; margin-top:2px;
}

/* ── La página del viaje en ESCRITORIO ──
   Las proporciones de móvil están bien y no se tocan; lo que falla es que en
   una columna de 960px los mismos números dan otra cosa muy distinta. Medido a
   1425px de ventana: la portada salía de 960x230 (una tira de 4:1), el mapa de
   960x577 (más alto que ancho útil) y las tarjetas del abanico a 445px, que
   estiran la miniatura de 640 y la pixelan. */
@media (min-width:900px){
  /* La portada crece a lo alto para dejar de ser una tira. */
  .vj-cab.con-foto{ min-height:620px }
  .vj-cab-foto, .vj-cab-velo{ height:520px }
  .vj-cab-nombre{ font-size:3rem }
  .vj-cab-fechas{ font-size:.95rem }
  .vj-cab-quien{ font-size:.8rem }

  /* El mapa se queda a un tamaño de lámina, centrado, en vez de comerse la
     pantalla: su alto sale del ancho, así que basta con acotar el ancho.
     Dentro de .vj-mapa-costes esto se anula: ahí el ancho lo decide el
     propio flex, no un máximo fijo ni un centrado a solas. */
  .mapa-itin{ max-width:520px; margin-left:auto; margin-right:auto }

  /* Costes al lado del mapa, no debajo: el desglose es un detalle que se
     pide con un toque, así que puede convivir con el mapa sin pelearse por
     el ancho. flex-basis:0 con grow reparte el hueco por el ratio de grow
     —y si uno de los dos no está (viaje sin fechas, o sin gasto asignado
     todavía), el otro ocupa solo él todo el ancho, no una mitad vacía. */
  .vj-mapa-costes{ display:flex; align-items:flex-start; gap:20px }
  .vj-mapa-costes .mapa-itin{ flex:1.4 1 0; max-width:none; margin:0; min-width:0 }
  .vj-mapa-costes .vj-costes{ flex:1 1 0; min-width:0 }
}

.vj-cab .volver{
  border:1.5px solid var(--tinta); background:var(--blanco); color:var(--tinta);
  border-radius:999px; width:34px; height:34px; cursor:pointer; font-size:1rem;
  flex:0 0 auto;
}
.vj-editar-viaje{
  margin-left:auto; flex:0 0 auto;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta);
  border-radius:999px; padding:7px 12px; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
}
.vj-editar-viaje:hover{ border-color:var(--tinta) }

/* La página del viaje: la portada rota y el visor de fotos deslizable. */
.vj-hero-rota{
  aspect-ratio:16/9; border-radius:14px; margin-bottom:10px;
  border:1.5px dashed var(--sello); background:var(--blanco);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:14px; text-align:center;
}
.vj-hero-rota b{ font-size:.92rem; color:var(--sello) }
.vj-hero-rota span{ font-size:.78rem; color:var(--tinta-suave); line-height:1.45; max-width:34ch }
.vj-hero-rota a{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.vj-fotos{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px; margin-bottom:10px;
}
.vj-fotos::-webkit-scrollbar{ display:none }
.vj-fotos a{ flex:0 0 78%; scroll-snap-align:center }
.vj-foto{
  aspect-ratio:4/3; border-radius:12px;
  background:var(--blanco) center/cover no-repeat; border:1.5px solid var(--linea);
  transition:transform .25s ease;
}
.vj-fotos a:hover .vj-foto{ transform:scale(1.02) }

.vj-por-datar{ display:flex; flex-wrap:wrap; gap:5px }
.vj-por-datar span{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  background:var(--blanco); border:1px dashed var(--linea); border-radius:999px; padding:4px 9px;
}

/* Once secciones a seis por fila: dos filas justas, y botones más compactos
   para que el menú robe menos pantalla al contenido. */
nav{ grid-template-columns:repeat(6,1fr); gap:5px }
nav button{ min-height:38px; padding:6px 2px; border-radius:10px }
nav button > i{ font-size:1rem }
@media (min-width:900px){
  nav{ grid-template-columns:none }
  nav button{ min-height:0; padding:10px 14px; border-radius:999px }
}

/* El alta de viaje de la portada clásica es un .vj-form más (ver arriba): ya
   no lleva .alta. Solo el select y las dos fechas necesitan encajar. */
.vj-form-pais .dos > div{ display:flex; flex-direction:column }
.vj-form-pais .vj-chips{ margin-top:4px }

/* POR QUÉ ESTO EXISTE: `form.alta button` pinta TODOS los botones de un
   formulario .alta con fondo oscuro y letra clara, y gana en especificidad
   (0,1,2) a `.vj-chip` (0,1,0): el chip apagado se pintaba igual que el
   encendido. El alta de un viaje desde la Agenda sigue siendo form.alta con
   chips .vj-chip, así que se repiten aquí sus dos caras. */
form.alta .vj-chip{
  height:var(--h-s); padding:0 12px; border-radius:var(--r-pill);
  background:var(--sup); color:var(--tx); border:1.5px solid var(--borde);
  text-transform:none; letter-spacing:0; font-family:var(--f-txt); font-size:13px; font-weight:400;
}
form.alta .vj-chip.on{ background:var(--tx); color:#FFF; border-color:var(--tx); font-weight:600 }

/* Revelar el siguiente campo de ciudad: un enlace (.sis-btn.enlace), no una
   acción que compita con «Guardar parada». */
.vj-anadir-campo{ margin-top:6px }

/* Cabecera de una parada: fechas a la izquierda, editar y borrar a la derecha. */
.vj-dia-top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.vj-dia-top > span{ display:flex; gap:4px; flex-shrink:0 }
.vj-dia-top button{
  background:none; border:1px solid var(--linea); border-radius:6px; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave); padding:3px 7px;
}
.vj-dia-ciudad{ font-weight:600 }

/* El formulario antiguo queda plegado: sigue ahí, pero no compite con el nuevo.
   Sigue siendo form.alta (lo envía el alta genérica de eventos.js); por
   dentro se viste con las piezas del sistema. */
.vj-antiguo{ margin:0 0 14px }
.vj-antiguo summary{
  cursor:pointer; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em;
  color:var(--tx2); padding:6px 0;
}
.vj-antiguo .vj-nota{ margin-bottom:8px }
.vj-antiguo form.alta{ background:var(--sup); border:1px dashed var(--borde); border-radius:var(--r-l); margin:8px 0 0 }
.vj-antiguo form.alta input, .vj-antiguo form.alta select{ height:var(--h-m); background:var(--sup); border-color:var(--borde); border-radius:var(--r-m) }
.vj-antiguo form.alta button{
  justify-self:end; height:var(--h-m); padding:0 14px; border-radius:var(--r-m);
  background:var(--sup); color:var(--tx); border:1.5px solid var(--tx);
  font-family:var(--f-txt); font-size:14px; letter-spacing:0; text-transform:none;
}

/* ═══════════ ESCAPE ROOMS ═══════════
   Con el sistema visual común (29/09/2026): banda, pestañas, filtros, aro de
   nota, cajas, ranking, vacío y botones salen de 16-sistema.css. Fuera la
   caja de rotuladores de Experiencity (siete tintas por sala) y la copia del
   aro con otra paleta: el color del área es var(--area) y la nota, <Nota>.
   Lo único propio es LA FICHA DE SALA (tablero SisFirma): el precinto en la
   esquina y el tiempo en grande. */
.esc{ padding-bottom:28px }
.sis-col.esc-principal{ gap:12px }
.esc-principal > .sis-pestanas, .esc-principal > .sis-filtros{ margin:0 }
/* ¿Quién? + la cuadrilla, juntos: se leen como un solo grupo del filtro. */
.esc-quien{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
/* Lo secundario va a la derecha en escritorio; en el móvil ya está en Datos. */
@media (max-width:899px){ .sis-col.esc-lateral{ display:none } }
.esc-resumen{ margin:0; font-size:13px; color:var(--tx2) }

/* ── Las salas hechas: una columna en el móvil, 2–3 en escritorio ── */
.esc-rejilla{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px }
@media (min-width:900px){ .esc-rejilla{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) } }

/* ── La ficha de sala (pieza propia) ── */
.esc-ficha{
  position:relative; overflow:hidden; min-width:0; box-sizing:border-box;
  display:flex; flex-direction:column; gap:8px; padding:14px 16px 10px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l);
}
/* El precinto: la cinta de «no pasar» cruzando la esquina. */
.esc-precinto{
  position:absolute; right:-34px; top:6px; width:130px; height:12px; transform:rotate(35deg); pointer-events:none;
  background:repeating-linear-gradient(-45deg, var(--area) 0 8px, #F7C99E 8px 16px);
}
.esc-ficha-cuerpo{ display:flex; align-items:flex-start; gap:12px; min-width:0 }
.esc-ficha-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding-right:20px }
.esc-ficha h3{ margin:0; font-size:15px; font-weight:600; line-height:1.25; color:var(--tx) }
.esc-ficha-sub{ margin:0; font-size:12.5px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.esc-ficha-etq{ display:flex; gap:6px; margin-top:4px }
/* El tiempo en grande y el aro debajo; bajados para no pisar el precinto. */
.esc-ficha-marca{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-top:22px }
.esc-tiempo{ font-family:var(--f-mono); font-weight:600; font-size:24px; line-height:1; color:var(--area); font-variant-numeric:tabular-nums }
.esc-nota{
  margin:0; font-size:13px; color:var(--tx2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.esc-ficha-pie{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:8px; border-top:1px solid var(--borde-s) }
.esc-ficha-pie > span{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-mono); font-size:11px; color:var(--tx3);
}
.esc-ficha-pie .esc-borrar{ width:var(--h-s); height:var(--h-s); border-color:transparent; color:var(--tx3); font-size:18px }
.esc-ficha-pie .esc-borrar:hover{ color:var(--error); border-color:var(--error) }
/* La foto: pequeña y a la izquierda; se abre entera al tocarla. */
.esc-foto{ flex:0 0 auto; display:block; line-height:0 }
.esc-foto img{ width:48px; height:48px; object-fit:cover; display:block; border-radius:var(--r-m); border:1px solid var(--borde-s) }
.esc-foto:hover img{ border-color:var(--tx) }

/* ── Catálogo: por ciudades, en filas; a dos o tres columnas en escritorio ── */
.esc-cat{ display:flex; flex-direction:column; gap:14px }
.esc-ciudad{ display:flex; align-items:baseline; gap:6px; margin:0 0 6px; padding-bottom:4px; border-bottom:1px solid var(--borde-s) }
.esc-ciudad .n{ font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.esc-cat-filas{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px }
@media (min-width:900px){ .esc-cat-filas{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) } }
.esc-fila{
  display:flex; align-items:center; gap:10px; min-width:0; padding:8px 8px 8px 12px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m);
}
.esc-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column }
.esc-fila-txt b{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.esc-fila-txt span{ font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Hecha = apagada, como manda el sistema (55 %), con su etiqueta a la vista. */
.esc-fila.hecha .esc-fila-txt{ opacity:.55 }

/* ── Datos: cajas comunes en rejilla ── */
.esc-datos-rejilla{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start }
@media (min-width:900px){ .esc-datos-rejilla{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) } }
.esc-caja-pista{ font-size:12px; color:var(--tx3) }
.sis-caja.esc-desplegable{ border-top:3px solid var(--area) }
.esc-mini{ padding:7px 10px; border-left:3px solid var(--area); border-radius:0 var(--r-s) var(--r-s) 0; background:var(--sup2) }
.esc-mini b{ display:block; font-size:14px; font-weight:600 }
.esc-mini span{ font-family:var(--f-mono); font-size:11px; color:var(--tx2) }

/* ── Formulario: campos del sistema y Cancelar a la izquierda de Guardar ──
   Ya no es un form.alta: el «form.alta button» de 02-viajes.css pintaba
   todos los botones de tinta y en mayúsculas (ganaba a .sis-btn), y
   eventos.js engancha su onsubmit clásico a todo form.alta que encuentre. */
.esc-form{
  max-width:680px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:22px;
}
.esc-form h2{ margin:0 0 2px; font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.02em }
.esc-form-sub{ margin:-8px 0 0; font-size:13px; color:var(--tx2) }
.esc-form label:not(.chip-check){
  display:block; margin:0 0 6px;
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.esc-form-nota{ margin:0 0 6px; font-family:var(--f-txt); font-size:12.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tx2) }
.esc-form input:not([type=checkbox]):not([type=file]){
  width:100%; height:var(--h-m); box-sizing:border-box; padding:0 12px;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:14px;
}
.esc-form input:focus{ border-color:var(--tx); outline:none }
.esc-form input[type=file]{ font-size:13px; color:var(--tx2) }
.esc-form-dos{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
/* Los chips de «¿Quién?» y «¿Salisteis?», con la forma de los chips del sistema. */
.esc-form .chips-check{ gap:6px; margin:0 }
.esc-form .chip-check span{
  display:inline-flex; align-items:center; height:var(--h-s); box-sizing:border-box; padding:0 12px;
  border-radius:var(--r-pill); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:13px; font-weight:400;
}
.esc-form .chip-check input:checked + span{ background:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600 }
.esc-form .chip-check input:focus-visible + span{ outline:2px solid var(--acento); outline-offset:1px }
.esc-otra-persona{ display:flex; gap:8px; margin-top:8px }
.esc-otra-persona input{ flex:1 }
.esc-form .sis-aviso{ margin:6px 0 0 }
.esc-form .sis-acciones{ margin-top:4px }
@media (max-width:899px){
  .esc-form{ padding:16px }
  .esc-form-dos{ grid-template-columns:1fr }
}

/* ══════════ Los iconos del menú ══════════
   Dibujos de la misma familia que el logo, en vez de emoji. Van dentro del <i>
   de siempre, así que todo lo que ya posicionaba el emoji sigue sirviendo.

   El botón NO se pone azul al marcarlo. Se probó y quedaba mal: el filtro que
   hacía visible el icono sobre el fondo oscuro (brightness(0) invert(1)) no
   pinta los trazos de blanco, convierte el icono ENTERO en una silueta blanca
   —rellenos incluidos—, así que el cuaderno salía como un ladrillo. Ahora cada
   botón lleva de fondo el color pastel de su propio icono y el marcado se
   distingue por el borde y la sombra: el dibujo se ve siempre tal cual. */

/* ── El color de cada botón ──
   El de la tarjeta de su icono en la lámina original, así que icono y fondo son
   la misma pieza y cualquier resto de recorte se funde con el botón. */
nav button[data-id="viajes"]{ background:#F2EFE6 }
nav button[data-id="agenda"]{ background:#FEEEE2 }
nav button[data-id="musica"]{ background:#F3E9EF }
nav button[data-id="teatro"]{ background:#FEEDE1 }
nav button[data-id="cine"]{ background:#EAEBED }
nav button[data-id="comida"]{ background:#FEECDF }
nav button[data-id="finanzas"]{ background:#F6F3EB }
nav button[data-id="juegos"]{ background:#F3E9EF }
nav button[data-id="escape"]{ background:#FEE9DB }
nav button[data-id="libros"]{ background:#F2EFE6 }

/* En reposo, el borde casi no se ve: manda el color. Al marcarlo, el borde se
   cierra en azul tinta y la sombra lo levanta — sin tocar el icono. */
nav button{ border-color:rgba(27,42,65,.14) }
nav button.on{
  border:2px solid var(--tinta); color:var(--tinta); font-weight:700;
  box-shadow:0 3px 10px rgba(27,42,65,.22);
}

/* ── Tamaño de los iconos del menú ──
   Caja más ancha que alta y object-fit:contain. Los iconos se guardan con SU
   proporción (no en lienzo cuadrado), así que el apaisado —avión, máscaras,
   libro— llena el ancho en vez de quedarse enano por culpa de un cuadrado que
   le sobraba por los lados. */
nav button > i img{ display:block; width:34px; height:22px; object-fit:contain }
@media (min-width:900px){
  nav button > i img{ width:30px; height:20px }
}

/* ── El botón marcado: fondo oscuro y dibujo claro ──
   La versión clara de cada icono es un archivo aparte (iconos/claro/), no un
   filtro: un filtro CSS aplana el dibujo y lo convierte en una silueta maciza.
   Estas se generaron pasando la tinta a crema y desvaneciendo lo pálido según
   su luminancia, así que conservan el trazo y los huecos. */
nav button > i .ico-clr{ display:none }
nav button.on{
  background:var(--tinta); border-color:var(--tinta); color:var(--papel);
  box-shadow:0 3px 10px rgba(27,42,65,.28);
}
nav button.on > i .ico-osc{ display:none }
nav button.on > i .ico-clr{ display:block }

/* ── Ancho de agenda en móvil ──
   El resto de secciones dejan sus tarjetas a 8px de cada borde: las temáticas
   por su propio envoltorio (.tea, .jdm, .rest-tema…) y las clásicas por el
   padding de #main. Agenda se quedaba 10px más estrecha por cada lado; ahora
   cae donde las demás.

   Solo en móvil: en escritorio #main no tiene padding lateral y un margen
   negativo sacaría la agenda fuera de su columna. */
@media (max-width:899px){
  .agenda-ancho{ margin:0 -10px }
}

/* El crédito a OpenStreetMap, solo cuando el mapa usa una ciudad geocodificada
   en directo (ver geocodificar.ts): discreto, no compite con el mapa. */
.mapa-itin-credito{
  display:block; text-align:right; padding:2px 8px 4px;
  font-family:'IBM Plex Mono',monospace; font-size:.5rem; color:var(--tinta-suave); opacity:.7;
}

/* La leyenda de la ruta real: solo lleva los medios que de verdad salen en ese
   viaje (ver MapaDibujado.tsx), así que nunca hace falta hueco para los
   cuatro a la vez. */
.mapa-itin-leyenda{
  display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 10px 2px;
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--tinta-suave);
}
.mapa-itin-km{ font-weight:600; color:var(--tinta) }
/* Los km por medio: pastillas más grandes y con icono, el borde del color
   con el que ese medio se pinta en el mapa. */
.mapa-itin-medios{ gap:8px; padding-top:10px }
.mapa-itin-medio{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:999px;
  padding:6px 12px;
}
.mapa-itin-medio em{ font-style:normal; font-size:1.05rem; line-height:1 }
.mapa-itin-medio b{ font-size:.82rem; color:var(--tinta); font-family:'IBM Plex Mono',monospace }
.mapa-itin-medio small{ font-size:.62rem; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.04em }
.mapa-itin-leyenda i{
  display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:4px; vertical-align:-1px;
}

/* ═══════════ COMIDA (restaurantes) · sistema visual (29/09/2026) ═══════════
   Tableros PruComida y PruComidaMovil. Se acabó la carta con marco de tinta,
   su cabecera y sus colores propios: todo sale de los tokens y las piezas de
   16-sistema.css. Arriba, la banda común; debajo, en escritorio, la lista en
   su tarjeta blanca (.rest-lienzo) con las pestañas y los filtros, y a la
   derecha (.sis-dos) barrios y los mejor puntuados. Lo único propio del área
   es el renglón de carta (.rest-renglon, RenglonCarta.tsx) y el nombre de los
   sitios en Fraunces (--f-firma). El color del área, solo como var(--area). */

.rest{ color:var(--tx) }
@media (max-width:899px){ .rest{ padding-bottom:72px } } /* aire para el + flotante */

/* ── Tipos de texto de la casa ── */
.rest-nombre{ margin:0; font-family:var(--f-firma); font-weight:600; letter-spacing:0; color:var(--tx) }
.rest-meta{ margin:0; font-size:12.5px; line-height:1.4; color:var(--tx2) }
.rest-plato{ margin:0; font-family:var(--f-firma); font-style:italic; font-weight:500; font-size:13px; line-height:1.4; color:var(--tx2) }
.rest-texto{ margin:0; font-size:14px; line-height:1.5; color:var(--tx); max-width:70ch; white-space:pre-line }
.rest-ayuda{ margin:0 0 10px; font-size:12.5px; line-height:1.5; color:var(--tx2) }
.rest-lienzo > .sis-rotulo, .rest-siempre > .sis-rotulo, .rest-det-sitios > .sis-rotulo{ display:block; margin:14px 0 4px }
.rest .sis-col > .sis-rotulo{ display:block; margin:4px 0 -6px }
.rest-caja-n{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--area); white-space:nowrap }

/* ── La tarjeta de la lista (escritorio) y la columna derecha ── */
.rest-lienzo{ min-width:0 }
@media (min-width:900px){
  .rest-lienzo{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:4px 20px 18px; box-sizing:border-box }
}
@media (max-width:899px){ .rest-lado{ display:none } }

/* ── La barra de filtros de Visitados ──
   Una sola barra para los dos tamaños. Escritorio: todo en línea y sin el
   botón «Filtros» ni la fila de activos (cada chip ya enseña su estado).
   Móvil: buscar y «Filtros (n)»; los chips de sección se van a la hoja, los
   activos salen debajo con su ×, y los dos atajos, en su propia línea. */
/* Lo que retoca una pieza del sistema lleva delante «.rest »: 16-sistema.css
   carga después y, con la misma especificidad, ganaría. */
.rest .rest-btn-filtros{ flex-shrink:0 }
.rest .rest-btn-filtros.on{ background:var(--tx); border-color:var(--tx); color:#FFF }
.rest-n{
  min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--acento); color:#FFF; font-family:var(--f-mono); font-size:11px; font-weight:600;
}
.rest-atajos{ display:inline-flex; flex-wrap:wrap; gap:8px }
.rest-activos{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-4px 0 12px }
.rest .sis-btn.rest-limpiar{ color:var(--acento); text-decoration:none }
@media (min-width:900px){
  .rest .rest-btn-filtros, .rest-activos{ display:none }
}
/* Un <select> mide lo que su opción más larga («Cocina: Española /
   tradicional»): con field-sizing mide lo elegido, como un chip de verdad
   (donde no se entiende, se queda como antes). */
.rest .sis-chip-menu{ field-sizing:content }
@media (max-width:899px){
  .rest-filtros-lista .sis-filtros > .fp,
  .rest-filtros-lista .sis-filtros > .sis-chip-menu,
  .rest-filtros-lista .sis-filtros > .sis-chip{ display:none }
  .rest-filtros-lista .sis-buscar{ max-width:none }
  .rest-atajos{ flex-basis:100% }
}

/* ── La fila de un restaurante (tablero «FILA · listas largas») ── */
.rest-lista{ display:grid; grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){ .rest-lista{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:28px } }
@media (min-width:1800px){ .rest-lista{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.rest-fila{
  display:flex; align-items:center; gap:12px; min-width:0; padding:10px 0;
  border-bottom:1px solid var(--borde-s); cursor:pointer;
}
.rest-fila:hover .rest-nombre{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.rest-fila:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:var(--r-s) }
.rest-fila.apagado{ opacity:.55 }
.rest-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.rest-fila-cab{ display:flex; align-items:center; gap:8px; min-width:0 }
.rest-fila .rest-nombre{ font-size:15.5px; line-height:1.25; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rest-fila .rest-meta, .rest-fila .rest-plato{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rest-fila-cab .sis-etq, .rest-michelin{ flex-shrink:0 }
.rest-michelin{ display:inline-flex }
.rest-fav-marca{ flex-shrink:0; color:var(--aviso); font-size:14px; line-height:1 }
.rest .rest-mas{ width:100%; margin-top:12px; border-style:dashed }

/* ── Los de siempre: su tira (desliza en móvil; en escritorio, en fila) ── */
.rest-siempre-tira{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px }
.rest-siempre-tira::-webkit-scrollbar{ display:none }
@media (min-width:900px){ .rest-siempre-tira{ flex-wrap:wrap; overflow:visible } }
.rest-siempre-item{
  flex:0 0 auto; min-width:150px; max-width:230px; box-sizing:border-box; padding:8px 12px;
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2); color:var(--tx); font:inherit;
}
.rest-siempre-item:hover, .rest-siempre-item:focus-visible{ border-color:var(--tx) }
.rest-siempre-item .rest-nombre{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rest-siempre-item span{ font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── La rejilla de barrios: calor en el color del área sobre su pastel ── */
.rest-mapa{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:46px; gap:4px }
.rest-distritos-pestana{ display:flex; flex-direction:column; gap:12px; max-width:760px }
.rest-distritos-pestana .rest-mapa{ grid-auto-rows:60px; gap:6px }
.rest-distrito{
  min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px;
  overflow:hidden; cursor:pointer; font:inherit; color:var(--tx3);
  border:1px solid var(--borde-s); border-radius:var(--r-s); background:var(--sup2);
}
.rest-distrito.con-visitas{
  color:var(--tx); border-color:transparent;
  background:color-mix(in srgb, var(--area) calc(var(--intensidad) * 100%), var(--area-suave));
}
.rest-distrito.fuerte{ color:#FFF }
/* Seleccionado: borde de 2 px en tinta (sin mover la rejilla). */
.rest-distrito.on{ box-shadow:0 0 0 2px var(--tx) }
.rest-distrito:focus-visible{ outline:2px solid var(--acento); outline-offset:1px }
.rest-distrito-nombre{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; text-align:center; line-height:1.15;
  font-family:var(--f-mono); font-size:8.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
.rest-distrito-n{ font-family:var(--f-tit); font-weight:800; font-size:12px; line-height:1 }
.rest-barrio-caja{ padding:10px 12px; border-radius:var(--r-m); background:var(--area-suave) }
.rest-barrio-caja b{ font-family:var(--f-firma); font-weight:600; font-size:14px }
.rest-barrio-caja p{ margin:3px 0 0; font-size:12.5px; color:var(--tx2) }
.rest-barrio-caja i{ font-family:var(--f-firma); font-style:italic; font-weight:600; color:var(--tx) }
.rest-lado .rest-ayuda{ margin:0 }

/* Los nombres del ranking, en la letra de la casa. */
.rest-ranking .sis-ranking .nom{ font-family:var(--f-firma); font-weight:600; font-size:14.5px }

/* ── LA PIEZA PROPIA: el renglón de carta (tablero SisFirma) ── */
.rest-renglon{ display:flex; flex-direction:column; gap:10px; padding:10px 4px; border-top:1px solid var(--area); border-bottom:1px solid var(--area) }
.rest-renglon-tit{ font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; text-align:center; color:var(--area) }
.rest-renglon-fila{
  width:100%; min-width:0; display:flex; align-items:baseline; gap:8px; padding:0; margin:0;
  border:0; background:none; text-align:left; color:var(--tx); font:inherit;
}
button.rest-renglon-fila{ cursor:pointer }
.rest-renglon-plato{ flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--f-firma); font-style:italic; font-weight:600; font-size:15px }
.rest-renglon-puntos{ flex:1 1 16px; min-width:16px; border-bottom:1.5px dotted var(--borde); transform:translateY(-4px) }
.rest-renglon-donde{ flex:0 1 auto; max-width:45%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; color:var(--tx2) }
.rest-renglon-extra{ flex-shrink:0; font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--tx2) }

/* ── La ficha ── */
.rest-barra-sub{ display:flex; align-items:center; gap:6px; margin:0 0 12px }
.rest-hueco{ flex:1 }
.rest .rest-fav{ font-size:18px; line-height:1; color:var(--tx2) }
.rest .rest-fav.on, .rest .rest-fav:hover{ color:var(--aviso) }
.rest .rest-fav:disabled{ opacity:.55; cursor:wait }
.rest-mas-menu{ position:relative }
.rest-mas-menu > summary{ list-style:none; font-size:18px; line-height:1 }
.rest-mas-menu > summary::-webkit-details-marker{ display:none }
.rest-mas-menu[open] > summary{ border-color:var(--tx) }
.rest-mas-menu-caja{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:min(320px, calc(100vw - 32px)); box-sizing:border-box;
  padding:12px; display:flex; flex-direction:column; gap:10px;
  background:var(--sup); border:1px solid var(--borde); border-radius:var(--r-l); box-shadow:var(--sombra-2);
}
.rest-fusion > summary{ cursor:pointer; font-size:13px; color:var(--tx2) }
.rest-fusion[open] > summary{ margin-bottom:8px }
.rest-fusion .rest-ayuda{ margin:0 0 8px }
.rest-fusion-fila{ display:flex; align-items:center; gap:6px }
.rest-select{
  flex:1; min-width:0; height:var(--h-s); box-sizing:border-box; padding:0 10px;
  border:1.5px solid var(--borde); border-radius:var(--r-s); background:var(--sup); color:var(--tx); font:inherit; font-size:13px;
}
.rest-select:focus{ outline:none; border-color:var(--tx) }
.rest-ficha-sola{ max-width:760px }
.rest-ficha-tit{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.rest-ficha-cab h2.rest-nombre{ font-size:24px; font-weight:700; line-height:1.15 }
.rest-ficha-cab .rest-ficha-tit .rest-meta{ margin-top:4px }
.rest-etiquetas{ display:flex; flex-wrap:wrap; gap:6px }
.rest-cifras{ display:flex; flex-wrap:wrap; gap:14px 28px }
.rest-ficha-acc{ display:flex; gap:8px }
.rest-ficha-cab .sis-aviso{ margin:0 }
.rest .rest-visita{ gap:8px }
.rest-visita-cab{ display:flex; align-items:center; gap:12px }
.rest-visita-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.rest-visita-fecha{ font-family:var(--f-tit); font-weight:700; font-size:15px }
.rest-foto{ flex-shrink:0; display:block; line-height:0 }
.rest-foto img{ width:48px; height:48px; object-fit:cover; display:block; border-radius:var(--r-s); border:1px solid var(--borde-s) }
.rest-foto:hover img{ border-color:var(--tx) }
.rest-visita-acc{ display:flex; align-items:center; gap:8px }
.rest .rest-borrar{ margin-left:auto; color:var(--tx2) }
.rest .rest-borrar:hover{ color:var(--error) }

/* ── Líneas de las cajas (recomendador, Datos) ── */
.rest-linea{ display:flex; align-items:center; gap:10px; min-width:0; padding:6px 0; border-bottom:1px solid var(--borde-s) }
.rest-linea:last-child{ border-bottom:0 }
.rest-linea-btn{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; padding:0;
  border:0; background:none; text-align:left; cursor:pointer; color:var(--tx); font:inherit;
}
.rest-linea-btn:disabled{ cursor:default }
.rest-linea-btn .rest-nombre{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rest-linea-btn .rest-meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rest-linea-btn:not(:disabled):hover .rest-nombre{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }

/* ── Datos: cajas en rejilla ── */
.rest-datos{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding-top:4px }
@media (min-width:900px){
  .rest-datos{ grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); align-items:start }
  .rest-datos-ancha{ grid-column:1 / -1 }
}
.rest-lineas p{ margin:0 0 4px; font-size:13.5px; color:var(--tx2) }
.rest-lineas b{ color:var(--tx); font-weight:600 }
.rest-apartado{ display:flex; flex-direction:column }
.rest-apartado + .rest-apartado{ margin-top:6px }
.rest-apartado-tit{ margin-bottom:2px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--area) }
@media (min-width:900px){ .rest-crono{ columns:2; column-gap:28px } }
.rest-crono-item{ break-inside:avoid }
.rest-crono-anio{ margin:10px 0 2px; font-family:var(--f-tit); font-weight:800; font-size:16px; color:var(--area) }

/* ── Subvistas: recomendador y «¿Dónde hemos comido?» ── */
.rest-sub-tit{ margin:0 0 10px; font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.01em; color:var(--tx) }
.rest-rejilla-2{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start }
@media (min-width:900px){ .rest-rejilla-2{ grid-template-columns:repeat(2, minmax(0,1fr)) } }

/* ── Los formularios (visita y sitio): una caja con los campos del sistema ── */
.rest-form.sis-caja{ display:grid; gap:4px; max-width:680px; margin:0 0 16px }
.rest-form-tit{ margin:0 0 6px; font-family:var(--f-tit); font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--tx) }
.rest-form label{
  display:block; margin:10px 0 4px; color:var(--tx3);
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.rest-form .rest-label-nota{ text-transform:none; letter-spacing:0; font-weight:400 }
.rest-form input:not([type=checkbox]):not([type=radio]), .rest-form select, .rest-form textarea{
  width:100%; box-sizing:border-box; height:var(--h-m); padding:0 12px;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:14px;
}
.rest-form textarea{ height:auto; min-height:84px; padding:10px 12px; line-height:1.45; resize:vertical }
.rest-form input:focus, .rest-form select:focus, .rest-form textarea:focus{ outline:none; border-color:var(--tx) }
.rest-form input:disabled{ background:var(--sup2); color:var(--tx2) }
.rest-form .dos > div{ display:flex; flex-direction:column; min-width:0 }
/* ¿Quién? y la terraza: chips del sistema con su checkbox de verdad debajo. */
.rest-form label.chip-check{ display:inline-flex; margin:0; font:inherit; letter-spacing:0; text-transform:none; color:var(--tx) }
.rest-form .chips-check{ gap:6px }
.rest-form .chip-check span{
  height:var(--h-s); box-sizing:border-box; display:inline-flex; align-items:center; padding:0 12px;
  border-radius:var(--r-pill); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:13px; font-weight:400;
}
.rest-form .chip-check input:checked + span{ background:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600 }
.rest-form .chip-check input:focus-visible + span{ outline:2px solid var(--acento); outline-offset:1px }
.rest-form-check, .rest-form .dos > .rest-form-check{ display:flex; flex-direction:row; align-items:flex-end; padding:10px 0 4px }
.rest-form-fila{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 2px }
.rest-form-fila .rest-ayuda{ margin:0 }
.rest-form .rest-ayuda{ margin:4px 0 }
.rest-form .sis-aviso{ margin:6px 0 2px }
.rest-form-acciones{ margin-top:14px }
.rest-sitio-nuevo{ margin:8px 0; padding:12px; border-radius:var(--r-m); background:var(--sup2); border:1px solid var(--borde-s) }
.rest-sitio-nuevo > .rest-ayuda:first-child{ margin-top:0 }
.rest-viaje-aviso{ margin:8px 0; padding:12px; border-radius:var(--r-m); background:var(--info-suave) }
.rest-viaje-aviso > .rest-ayuda{ margin:0 0 4px; color:var(--info) }
.rest-mas-datos{ margin:10px 0 2px }
.rest-mas-datos > summary{
  min-height:var(--h-s); display:flex; align-items:center; padding:0 12px; cursor:pointer;
  border:1.5px dashed var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx2); font-size:13px;
}
.rest-mas-datos[open] > summary{ margin-bottom:4px }
@media (max-width:899px){
  /* Guardar y Cancelar, siempre a la vista, encima de la barra de áreas. */
  .rest-form-acciones{
    position:sticky; bottom:var(--barra-areas, 0px); z-index:5; margin:14px -18px -16px; padding:10px 18px;
    background:var(--sup); border-top:1px solid var(--borde-s); border-radius:0 0 var(--r-l) var(--r-l);
  }
}

/* ── La hoja de filtros: sube desde abajo en móvil; en escritorio, centrada ── */
.rest-hoja{ position:fixed; inset:0; z-index:70 }
.rest-hoja-fondo{ position:absolute; inset:0; background:rgba(19,28,42,.45) }
.rest-hoja-caja{
  position:absolute; left:0; right:0; bottom:0; max-height:86vh; display:flex; flex-direction:column;
  background:var(--sup); color:var(--tx); border-radius:18px 18px 0 0; box-shadow:var(--sombra-3);
}
.rest-hoja-asa{ flex-shrink:0; width:40px; height:4px; margin:8px auto 0; border-radius:2px; background:var(--borde) }
.rest-hoja-cab{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px; border-bottom:1px solid var(--borde-s) }
.rest-hoja-cab h3{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:18px }
.rest-hoja-cuerpo{ overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:16px }
.rest-hoja fieldset{ border:0; margin:0; padding:0; min-width:0 }
.rest-hoja legend{ padding:0 0 8px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.rest-chips{ display:flex; flex-wrap:wrap; gap:8px }
/* El .fp común lleva overflow-x:auto (su carrusel): en la columna flex de
   la hoja eso lo encogía a 0 px de alto y el ¿Quién? desaparecía. */
.rest-hoja .fp{ margin:0; flex-shrink:0; overflow:visible }
.rest-hoja .fp-rotulo{ width:100% }
.rest-hoja-pie{ padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--borde-s) }
.rest .rest-hoja-ver{ width:100%; background:var(--tx); border-color:var(--tx); color:#FFF }
@media (min-width:900px){
  .rest-hoja-caja{ left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); width:520px; max-height:80vh; border-radius:var(--r-l) }
  .rest-hoja-asa{ display:none }
}

/* ── El mapa real (Leaflet) ── */
.rest-mapa-real{
  position:relative; height:62vh; min-height:340px; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-l); border:1px solid var(--borde-s); background:var(--sup2);
}
.rest-mapa-cargando{ font-family:var(--f-mono); font-size:12px; color:var(--tx3) }
/* El marcador: un aro pequeño con la nota (o ★ si es favorito). */
.rest-pin{
  display:inline-grid; place-items:center; width:30px; height:30px; box-sizing:border-box; border-radius:50%;
  background:var(--tx); color:#FFF; border:2.5px solid #FFF; box-shadow:var(--sombra-1);
  font-family:var(--f-tit); font-weight:800; font-size:11px;
}
.rest-pin.favorito{ background:var(--aviso); color:var(--tx) }
.rest-pin.pendiente{ background:var(--sup); border-style:dashed; border-color:var(--tx3); color:var(--tx2) }
.rest-pin.no-reco{ background:var(--error) }
.rest-pin.cerrado{ background:var(--borde); color:var(--tx2) }
.rest-leyenda{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 0; font-size:12.5px; color:var(--tx2) }
.rest-leyenda .rest-pin{ width:18px; height:18px; margin-left:10px; border-width:1.5px; box-shadow:none; font-size:9px }
.rest-leyenda .rest-pin:first-child{ margin-left:0 }
.rest-popup b{ font-family:var(--f-firma); font-weight:600; font-size:15px }
.rest-popup p{ margin:3px 0; font-size:12.5px; color:var(--tx2) }
.rest-popup button{
  margin-top:6px; height:30px; padding:0 12px; cursor:pointer;
  border:1.5px solid var(--tx); border-radius:var(--r-s); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-weight:600; font-size:13px;
}

/* ── «¿Dónde hemos comido?»: comidas vistas en las ubicaciones ── */
.rest-detectadas > .sis-aviso{ margin:0 0 10px }
.rest-det-ventana{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px }
.rest-det-lista{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px }
@media (min-width:1100px){ .rest-det-lista{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start } }
.rest-det-fila{ padding:10px 12px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l) }
.rest-det-fila.abierta{ border:2px solid var(--tx); padding:9px 11px }
.rest-det-cab{ display:flex; align-items:center; gap:6px }
.rest-det-quien{
  flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:4px 0;
  border:0; background:none; text-align:left; cursor:pointer; color:var(--tx); font:inherit;
}
.rest-det-quien b{ font-family:var(--f-tit); font-weight:700; font-size:15px; text-transform:capitalize }
.rest-det-horas{ font-family:var(--f-mono); font-size:11.5px; color:var(--tx2); font-variant-numeric:tabular-nums }
.rest .rest-det-ico{ width:var(--h-s); height:var(--h-s); font-size:13px }
.rest-det-aviso{ margin:8px 0 0 }
.rest-det-lugares{ display:flex; flex-direction:column; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--borde-s) }
.rest-det-lugares .sis-aviso{ margin:0 }
.rest-det-cargando{ margin:0; font-size:12.5px; color:var(--tx2) }
.rest-det-lugar{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; padding:8px 12px; text-align:left; cursor:pointer;
  border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2); color:var(--tx); font:inherit;
}
.rest-det-lugar:hover, .rest-det-lugar:focus-visible{ border-color:var(--tx); outline:none }
.rest-det-lugar b{ font-family:var(--f-firma); font-weight:600; font-size:14.5px }
.rest-det-lugar span{ grid-column:1; font-size:12.5px; color:var(--tx2) }
.rest-det-lugar i{ grid-column:2; grid-row:1 / span 2; align-self:center; font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--tx3); font-variant-numeric:tabular-nums }
.rest-det-lugar.mio{ background:var(--ok-suave); border-color:transparent }
.rest-det-lugar.otro{ background:var(--sup); border-style:dashed; border-color:var(--borde) }
.rest-det-fuente{ margin:2px 0 0; text-align:right; font-size:11px; color:var(--tx3) }
.rest-det-marcar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--borde-s) }
.rest-det-marcar p{ flex-basis:100%; margin:0; font-size:12.5px; color:var(--tx2) }
.rest-det-marcar .rest-select{ flex:1 1 180px; height:var(--h-m); font-size:14px }
.rest-det-botones{ flex-basis:100% }
.rest-det-borrar{ margin-right:auto }
.rest-det-sitios{ margin-top:20px }
.rest-det-sitios ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.rest-det-sitio{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:8px 0; border-bottom:1px solid var(--borde-s) }
.rest-det-sitio b{ font-size:14px; font-weight:600 }
.rest-det-sitio span{ flex:1; font-size:12.5px; color:var(--tx2) }

/* ═══════════ A POR LA OPOSICIÓN ═══════════
   Papel y tinta, sin tema oscuro: esto no es una vitrina de recuerdos como el
   resto de la app, es una herramienta de trabajo que se mira todos los días.
   Que se lea rápido y no canse importa más que que luzca. */

/* (29/09/2026) Todo lo de Libros —la estantería de antes, Cuentos, la
   oposición y sus exámenes— vive ahora en 14-biblioteca.css, con el sistema
   visual. Aquí ya no queda nada suyo. */

/* ═══════════ FOTOS DE LIGHTROOM ═══════════ */

.lr-titulo{ font-family:var(--f-tit); font-weight:800; font-size:1.5rem; margin:6px 0 8px }
.lr-intro{ font-size:14px; color:var(--tx2); line-height:1.5; margin-bottom:10px }
.lr-enlace{
  width:100%; box-sizing:border-box; height:var(--h-m); border:1.5px solid var(--borde); border-radius:var(--r-m);
  padding:0 12px; font:inherit; font-size:14px; background:var(--sup);
}
.lr-enlace:focus{ outline:none; border-color:var(--tx) }
.lr-aviso{
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; color:var(--tinta-suave);
  line-height:1.5; margin:6px 0 10px;
}
.lr-btn-row{ display:flex; gap:8px; margin-bottom:10px }
/* «Leer el álbum» es el botón de la pantalla (aquí no hay +): el principal. */
.lr-btn{
  height:var(--h-m); padding:0 16px; border-radius:var(--r-m); cursor:pointer;
  background:var(--acento); color:#FFF; border:1.5px solid var(--acento);
  font-family:var(--f-txt); font-weight:600; font-size:14px;
}
.lr-btn:disabled{ opacity:.55; cursor:default }
.lr-error{ color:var(--error); font-size:14px; line-height:1.5; margin-bottom:10px }

/* Cada grupo detectado: cuatro miniaturas, lo que es, y el botón de enlazar. */
.lr-grupo{
  display:flex; align-items:center; gap:11px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l);
  padding:10px 12px; margin-bottom:8px;
}
.lr-grupo.apagado{ opacity:.62; border-style:dashed }
.lr-tiras{ display:flex; flex:0 0 auto }
.lr-tiras img{
  width:34px; height:34px; object-fit:cover; border-radius:6px;
  border:2px solid var(--blanco); margin-left:-10px;
}
.lr-tiras img:first-child{ margin-left:0 }
.lr-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.lr-txt b{ font-size:.9rem; color:var(--tinta); line-height:1.25 }
.lr-txt i{
  font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:.58rem;
  letter-spacing:.04em; color:var(--tinta-suave);
}
.lr-sitios{
  font-size:.72rem; color:var(--tinta-suave); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.lr-enlazar{
  flex:0 0 auto; height:var(--h-s); padding:0 12px; border-radius:var(--r-m); cursor:pointer;
  background:var(--sup); color:var(--tx); border:1.5px solid var(--tx);
  font-family:var(--f-txt); font-size:13px; font-weight:600;
}
.lr-enlazar.hecho{ border-color:transparent; color:var(--ok); cursor:default }
.lr-enlazar:disabled{ cursor:default }

/* ── El abanico ──
   Las cartas se solapan con margen negativo y se inclinan según lo lejos que
   estén del centro (el giro lo pone Abanico.tsx en cada scroll). El imán de
   scroll hace que siempre quede una centrada. */
.aba{ margin:0 -4px 12px }
/* OJO con el relleno lateral: en porcentaje NO vale.
   El `flex-basis:46%` de las cartas se calcula contra la caja de contenido de
   la pista, y un padding del 42% a cada lado deja esa caja en el 16% — las
   cartas salían de 29px. El hueco para que la primera y la última puedan
   centrarse se da con MÁRGENES en la primera y la última, que se calculan
   contra el mismo ancho y no encogen nada. */
.aba-pista{
  display:flex; align-items:center; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:22px 0 26px; gap:0;
}
.aba-pista::-webkit-scrollbar{ display:none }
.aba-carta{
  flex:0 0 46%; scroll-snap-align:center; margin-left:-9%;
  background:none; border:none; padding:0; cursor:pointer;
  transition:transform .22s ease;
}
.aba-carta:first-child{ margin-left:27% }
.aba-carta:last-child{ margin-right:27% }
.aba-carta img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:10px; border:3px solid var(--blanco);
  box-shadow:0 3px 12px rgba(27,42,65,.25);
}
.aba-carta.centro img{ box-shadow:0 6px 22px rgba(27,42,65,.38) }
.aba-carta:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px }
.aba-pie{ text-align:center; display:flex; flex-direction:column; gap:2px }
.aba-pie b{ font-size:.9rem; color:var(--tinta) }
.aba-pie span{
  font-family:'IBM Plex Mono',monospace; font-size:.58rem;
  letter-spacing:.05em; color:var(--tinta-suave);
}

/* A pantalla completa.
   OJO con el z-index: las cartas del abanico llevan uno propio, en línea y
   hasta 100, para solaparse como una baraja (ver Abanico.tsx) — y son
   hermanas de esta capa, así que con z-index:60 la foto ampliada salía
   DEBAJO de las miniaturas y no se veía. Va por encima de todo lo que tiene
   capa en la app (la de Biblioteca está en 80). */
.aba-lupa{
  position:fixed; inset:0; z-index:300; background:rgba(12,18,28,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px; gap:12px;
}
.aba-lupa img{ max-width:100%; max-height:76vh; object-fit:contain; border-radius:8px }
.aba-lupa-pie{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
}
.aba-lupa-pie span{
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:#C9D4E2;
}
.aba-lupa-pie i{ font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:.6rem; color:var(--ambar) }
.aba-lupa-pie button{
  background:var(--ambar); color:#241811; border:none; border-radius:999px;
  padding:7px 14px; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
}
.aba-lupa-pie .aba-cerrar{ background:rgba(255,255,255,.16); color:#fff }
/* Pasar de foto sin cerrar. Grandes y a los lados: en el móvil se llega con
   el pulgar sin tapar la foto. */
.aba-lupa-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  width:46px; height:46px; border-radius:999px; border:none;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.7rem; line-height:1;
  display:grid; place-items:center; cursor:pointer;
}
.aba-lupa-nav:hover{ background:rgba(255,255,255,.3) }
.aba-lupa-nav:disabled{ opacity:.2; cursor:default }
.aba-lupa-nav.izq{ left:8px }
.aba-lupa-nav.der{ right:8px }

/* Flechas del abanico. En móvil no salen: se desliza con el dedo. En escritorio
   son la ÚNICA forma de recorrerlo, porque la barra de scroll va escondida y la
   rueda del ratón no desplaza en horizontal — de ahí que allí "el swipe no
   funcione". */
.aba-flecha{
  display:none; position:absolute; top:calc(50% - 34px); z-index:5;
  width:38px; height:38px; place-items:center; border-radius:999px;
  border:1.5px solid var(--tinta); background:rgba(253,253,252,.94); color:var(--tinta);
  cursor:pointer; font-size:1.1rem; line-height:1;
}
.aba-flecha:hover{ background:var(--blanco) }
.aba-flecha:disabled{ opacity:.35; cursor:default }
.aba-flecha.izq{ left:6px }
.aba-flecha.der{ right:6px }

/* El abanico en escritorio.
   OJO con el ORDEN: estas reglas tienen que ir DESPUÉS de las base del abanico,
   no arriba con las de la cabecera. Puestas antes, la base (.aba-carta a 46%)
   las pisaba por orden de aparición y las tarjetas seguían saliendo a 445px. */
@media (min-width:900px){
  .aba{ position:relative }
  .aba-flecha{ display:grid }
  /* Tarjetas más pequeñas y más a la vista: se acaba el estirado —445px de caja
     para una fuente de 640— y el abanico se abre de verdad, que es lo que pide
     una pantalla ancha. */
  .aba-carta{ flex:0 0 24%; margin-left:-4% }
  .aba-carta:first-child{ margin-left:38% }
  .aba-carta:last-child{ margin-right:38% }
  .aba-pista{ padding:26px 0 30px }
}

/* ═══════════ PROPONER PARADAS (desde la cronología) ═══════════ */
.vj-prop-explica{ font-size:.8rem; color:var(--tinta-suave); line-height:1.55; margin:0 0 12px }
.vj-prop-avance{
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--tinta-suave);
  line-height:1.5; margin:6px 0 0;
}
.vj-prop-cuenta{
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--tinta-suave); margin:14px 0 8px;
}
/* Misma tarjeta que una parada guardada (.vj-dia): una candidata es "casi" una
   parada, y que se parezcan es lo que deja claro que al confirmarla se
   convierte en una. El borde punteado es la única diferencia — recuerda que
   TODAVÍA no es un dato guardado, solo una propuesta. */
.vj-prop-candidata{ border-style:dashed }
.vj-prop-aviso{
  font-size:13px; color:var(--error); background:var(--error-suave);
  border-radius:var(--r-s); padding:5px 8px; margin-top:6px !important;
}

/* ══════════ MÓVIL: cabecera en una línea y barra de áreas abajo ══════════
   (nucleo.js, «La barra de áreas del MÓVIL»). Antes cabecera y rejilla de
   doce iconos ocupaban 200 px arriba en todas las áreas; ahora la cabecera
   es una línea y las áreas van a una barra fija al alcance del pulgar: cinco
   favoritas y «Todas», que abre la hoja con las doce. */
.nav-corto, .nav-todas, .hoja-areas{ display:none }
/* El 💾 ya no se ve (el panel se abre desde «Todas» o el enlace lateral). */
#btnBackup{ display:none !important }
.lateral-copia{ display:none }
@media (min-width:900px){
  .lateral-copia{
    display:block; margin:10px 0 24px; padding:6px 0; border:0; background:none; cursor:pointer; text-align:left;
    font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave);
  }
  .lateral-copia:hover{ color:var(--tinta) }
}
@media (max-width:899px){
  :root{
    --barra-pie:max(4px, calc(env(safe-area-inset-bottom) - 18px));
    --barra-areas:calc(56px + var(--barra-pie));
  }
  body{ padding-bottom:calc(var(--barra-areas) + 18px) }

  /* env(safe-area-inset-top): la Dynamic Island. Con viewport-fit=cover la
     app llega hasta arriba del todo, y sin este margen la cabecera quedaba
     bajo la barra de estado, difuminada. */
  #lateral>header{ padding:calc(8px + env(safe-area-inset-top)) 12px 6px; align-items:center; gap:8px }
  header h1.logo img{ max-height:40px }
  .sec-nombre{ font-size:1.55rem; -webkit-line-clamp:1 }
  .cab-acciones{ align-self:center; gap:6px }
  #btnBuscar, #btnBackup, #btnAvisos{ width:36px; height:36px; font-size:.95rem }
  .campanita-n{ top:-5px; right:-5px }

  nav{
    position:fixed; left:0; right:0; bottom:0; z-index:50; margin:0; max-width:none;
    display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:3px;
    padding:4px 5px var(--barra-pie);
    background:var(--papel); border-top:1.5px solid var(--tinta);
    box-shadow:0 -4px 14px rgba(27,42,65,.08);
  }
  nav button:not(.fav):not(.nav-todas){ display:none }
  nav button, nav .nav-todas{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:48px; padding:3px 2px; border-radius:10px; min-width:0;
  }
  nav button > i{ position:relative; font-size:1.2rem }
  nav button > i img{ width:28px; height:28px; object-fit:contain; display:block }
  .nav-corto{
    display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:'Instrument Sans',system-ui,sans-serif; font-size:.6rem; font-weight:600;
    letter-spacing:0; text-transform:none; line-height:1.1;
  }
  nav .nav-todas{ border:1.5px solid rgba(27,42,65,.14); background:var(--blanco); color:var(--tinta); cursor:pointer }
  nav .nav-todas.on{ border:2px solid var(--tinta); box-shadow:0 3px 10px rgba(27,42,65,.22) }
  .nav-todas-marca{
    position:absolute; right:-7px; bottom:-5px; width:16px; height:16px; border-radius:50%;
    background:var(--tinta); color:var(--papel); display:flex; align-items:center; justify-content:center;
  }
  .nav-todas-marca svg{ width:10px; height:10px }

  /* El pie oscuro solo cuando hay algo que avisar, y encima de la barra. */
  footer{ bottom:var(--barra-areas); padding:7px 14px }
  footer.todo-bien{ display:none }
  .aviso-deshacer.flotante{ bottom:calc(var(--barra-areas) + 12px) }
  .rest-fab{ bottom:calc(var(--barra-areas) + 16px) }

  /* La hoja con las doce, justo encima de la barra. */
  .hoja-areas:not([hidden]){ display:block; position:fixed; inset:0; z-index:45 }
  .hoja-areas-fondo{ position:absolute; inset:0; background:rgba(27,42,65,.45) }
  .hoja-areas-caja{
    position:absolute; left:0; right:0; bottom:var(--barra-areas); max-height:calc(100vh - var(--barra-areas) - 40px);
    overflow:auto; padding:8px 12px 14px; background:var(--blanco); border-radius:18px 18px 0 0;
    box-shadow:0 -8px 30px rgba(27,42,65,.2);
  }
  .hoja-areas-asa{ width:40px; height:4px; border-radius:2px; background:var(--linea); margin:0 auto 10px }
  .hoja-areas-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px 10px }
  .hoja-areas-cab h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.15rem; margin:0 }
  .hoja-areas-elegir{
    min-height:36px; padding:0 10px; border:0; background:transparent; cursor:pointer;
    font-family:'IBM Plex Mono',monospace; font-size:.64rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sello);
  }
  .hoja-areas-ayuda{ margin:-4px 4px 10px; font-size:.78rem; color:var(--tinta-suave) }
  .hoja-areas-rejilla{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px }
  .hoja-areas-rejilla button{
    min-height:80px; border-radius:12px; border:1.5px solid rgba(27,42,65,.12); background:var(--papel);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:6px 2px;
    font-family:'Instrument Sans',system-ui,sans-serif; font-size:.72rem; color:var(--tinta); text-align:center; line-height:1.15; cursor:pointer;
  }
  .hoja-areas-rejilla button img{ width:34px; height:34px; object-fit:contain }
  .hoja-areas-rejilla button > span:not(:last-child){ font-size:1.6rem; line-height:34px }
  .hoja-areas-rejilla button.on{ border:2px solid var(--tinta); font-weight:700 }
  .hoja-areas-rejilla button.marcada{ border:2px solid var(--sello); background:#FBEDEE; font-weight:700 }
  .hoja-areas-copia{
    display:block; width:100%; margin-top:12px; min-height:40px; border:0; border-top:1px solid var(--linea); background:none; cursor:pointer;
    font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave);
  }
  .hoja-areas-copia[hidden]{ display:none }
  .hoja-areas-rejilla button:focus-visible, .hoja-areas-elegir:focus-visible, nav .nav-todas:focus-visible{ outline:2.5px solid var(--sello); outline-offset:2px }
}


/* ══════════ El + único (src/BotonNuevo.tsx) ══════════
   Móvil: círculo rojo fijo encima de la barra de áreas, con su texto hasta
   que se hace scroll. Escritorio: botón rojo de la barra superior. */
.nuevo-fab{
  position:fixed; right:16px; bottom:calc(var(--barra-areas, 0px) + 16px); z-index:40;
  width:54px; height:54px; border-radius:27px; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--sello); color:#FFFFFF; box-shadow:0 4px 14px rgba(30,42,68,.35);
  font-size:1.7rem; line-height:1;
}
.nuevo-fab.largo{ width:auto; padding:0 20px 0 16px }
.nuevo-fab-txt{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.95rem; line-height:1 }
.nuevo-fab:focus-visible, .nuevo-sup:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px }
body.con-hoja-areas .nuevo-fab{ display:none }
.nuevo-sup{
  height:40px; display:flex; align-items:center; gap:8px; padding:0 18px; border:0; border-radius:10px; cursor:pointer;
  background:var(--sello); color:#FFFFFF; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.9rem; white-space:nowrap;
}
.nuevo-sup:hover{ filter:brightness(.93) }

/* ══════════ Memoria · el anuario dibujado (src/memoria/AnuarioDibujado.tsx) ══════════
   La foto del año (108 em × 192 em; 1 em = 10 px al descargarla) y Mi año en
   detalle (46 em de ancho). Todo en em: el componente ajusta el tamaño de
   letra del lienzo al hueco, y al descargar sale a 1080 px de ancho. El
   trazo es el del logo: tinta azul marino, círculos pastel y discontinuas.
   Maqueta: referencia/lienzo/AnuarioDibujado.html. */
.anu{
  --anu-tinta:#1B2A41; --anu-tinta2:#4A5A72; --anu-tinta3:#7A8579; --anu-papel:#FFFDF8; --anu-linea:#C9CFC9;
  --anu-melocoton:#FBE3D2; --anu-lila:#E9E3F4; --anu-menta:#DCEFE4; --anu-cielo:#DCE8F7; --anu-rosa:#F8E2EB; --anu-vainilla:#FBF0D3; --anu-salvia:#E3F0E8;
  --anu-mano:"Caveat",cursive;
  max-width:520px; margin:0 auto; padding-bottom:24px;
}
.anu-acciones{ display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap; margin:0 0 12px }
.anu-pista{ text-align:center; font-size:12.5px; color:var(--tx3); margin:10px 0 0 }
.anu-vacio{ text-align:center; color:var(--tx2); padding:32px 0 }
.anu-hueco{ width:100% }
.anu img{ display:block }
.anu-trama{ position:relative; background:var(--anu-papel); color:var(--anu-tinta); overflow:hidden }
.anu-trama::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(rgba(27,42,65,.05) .1em,transparent .1em); background-size:.5em .5em }
.anu-mano{ font-family:var(--anu-mano) }
.anu-chapa{ position:absolute; background:var(--anu-papel); border:solid var(--anu-tinta); font-family:var(--f-tit); font-weight:800; display:grid; place-items:center; letter-spacing:-.02em; box-sizing:border-box; color:var(--anu-tinta) }

/* ── La foto del año ── */
.anu-foto{ width:108em; height:192em; border-radius:1.4em; box-shadow:0 18px 40px -22px rgba(27,42,65,.45); border:1px solid #E6E2D8; box-sizing:border-box }
.anu-foto-cab{ position:absolute; left:0; right:0; top:7em; text-align:center; z-index:1 }
.anu-foto-cab h1{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:11.2em; line-height:.9; letter-spacing:-.04em; color:var(--anu-tinta) }
.anu-foto-cab .anu-quien{ font-family:var(--anu-mano); font-size:5.2em; line-height:1; margin-top:.25em }
.anu-foto-cab .anu-total{ font-family:var(--f-mono); font-size:2.1em; color:var(--anu-tinta3); margin-top:.7em; letter-spacing:.04em }
.anu-foto-arco{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none }
.anu-foto-arco path{ fill:none; stroke:var(--anu-tinta); stroke-width:3; stroke-dasharray:9 12; stroke-linecap:round; opacity:.5 }
.anu-ins{ position:absolute; width:15em; transform:translate(-50%,-50%); text-align:center; background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit; font-size:1em; z-index:2 }
.anu-circ{ width:11.2em; height:11.2em; margin:0 auto; border-radius:50%; border:.3em solid var(--anu-tinta); position:relative; display:grid; place-items:center; box-sizing:border-box; transition:transform .15s }
.anu-circ > img{ width:7em; height:7em; object-fit:contain }
.anu-circ .anu-chapa{ font-size:2.8em; right:-.65em; bottom:-.3em; min-width:1.93em; height:1.93em; padding:0 .3em; border-width:.11em; border-radius:1em }
.anu-ins-et{ display:block; margin-top:1.2em; font-family:var(--f-mono); font-size:1.6em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--anu-tinta2); white-space:nowrap }
.anu-ins.on .anu-circ{ box-shadow:0 0 0 .7em var(--anu-papel),0 0 0 1em #B04E2E; transform:scale(1.04) }
.anu-ins:focus-visible{ outline:none }
.anu-ins:focus-visible .anu-circ{ box-shadow:0 0 0 .7em var(--anu-papel),0 0 0 1em var(--anu-tinta) }
.anu-exportando .anu-ins.on .anu-circ, .anu-exportando .anu-ins:focus-visible .anu-circ{ box-shadow:none; transform:none }
.anu-foto-familia{ position:absolute; left:50%; top:47.6em; width:48em; height:30.6em; margin-left:-24em; overflow:hidden; pointer-events:none }
.anu-foto-familia img{ position:absolute; width:72.8em; left:-13em; top:-15em; max-width:none }
.anu-foto-abajo{ position:absolute; left:6.4em; right:6.4em; top:81em; bottom:13em; overflow:hidden }
.anu-foto-abajo.sin-firma{ bottom:4em }
.anu-foto-abajo-in{ display:flex; flex-direction:column; gap:3.4em; width:100%; margin:0 auto; padding:1.4em 1.4em 0; box-sizing:border-box }
.anu-foto-rot{ display:flex; align-items:center; gap:.76em; font-family:var(--f-mono); font-size:2.1em; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--anu-tinta2); margin-bottom:1em }
.anu-foto-rot::after{ content:""; flex:1; border-top:.15em dashed var(--anu-linea) }
.anu-foto-rot b{ font-family:var(--f-tit); font-size:1.45em; color:var(--anu-tinta); letter-spacing:0; text-transform:none }
.anu-foto-mas{ margin:.33em 0 0; text-align:center; font-family:var(--anu-mano); font-size:3em; color:var(--anu-tinta2) }
.anu-postales{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2em 2em }
.anu-pst{ background:#fff; border:.3em solid var(--anu-tinta); border-radius:1.2em; padding:1em 1em 1.2em; text-align:center; min-width:0 }
.anu-pst.grande{ background:var(--anu-salvia) }
.anu-pst-img{ height:13.2em; border-radius:.7em; overflow:hidden; position:relative; background:#fff }
.anu-pst-img > img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) }
.anu-pst-img.sin{ display:grid; place-items:center; border:.3em dashed var(--anu-linea); box-sizing:border-box }
.anu-pst-img.sin > img{ width:7em; height:7em; border-radius:50%; border:.3em solid var(--anu-tinta); object-fit:cover; box-sizing:border-box }
.anu-bm{ position:absolute; right:.8em; bottom:.8em; width:3.4em; height:3.4em; border-radius:50%; overflow:hidden; border:.3em solid #fff; box-sizing:border-box }
.anu-bm img{ width:100%; height:100%; object-fit:cover }
.anu-pst b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:3em; line-height:1.05; margin-top:.33em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-pst small{ display:block; font-family:var(--anu-mano); font-size:3em; line-height:1; color:var(--anu-tinta2); margin-top:.07em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-caras-foto{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2em 1em; text-align:center }
.anu-cara{ text-align:center; min-width:0 }
.anu-cara-f{ width:9.6em; height:9.6em; margin:0 auto; border-radius:50%; padding:.5em; background:var(--anu-rosa); border:.3em solid var(--anu-tinta); position:relative; box-sizing:border-box; display:grid; place-items:center; font-family:var(--anu-mano); font-weight:600; color:var(--anu-tinta) }
.anu-cara-f img{ width:100%; height:100%; border-radius:50%; object-fit:cover; filter:saturate(.75) }
.anu-cara-f.sin{ background:var(--anu-vainilla); font-size:1em }
.anu-ini{ font-size:4.6em; line-height:1 }
.anu-x{ position:absolute; top:-.5em; right:-.7em; min-width:2.3em; height:2.3em; border-radius:1.15em; background:var(--anu-tinta); color:#fff; font-family:var(--f-mono); font-size:2em; font-weight:600; display:grid; place-items:center; border:.2em solid var(--anu-papel); box-sizing:border-box }
.anu-cara > span{ display:block; margin-top:.48em; font-size:2.1em; font-weight:600; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.anu-foto-seccion{ font-size:2.07em }
.anu-foto-seccion .anu-bloque{ margin-top:0 }
.anu-foto-firma{ position:absolute; left:0; right:0; bottom:2.2em; text-align:center; font-family:var(--f-mono); font-size:2em; letter-spacing:.2em; text-transform:uppercase; color:var(--anu-tinta2) }
.anu-foto-firma .anu-mano{ display:block; font-size:2.2em; letter-spacing:0; text-transform:none; color:var(--anu-tinta); margin-bottom:.15em }

/* ── Mi año en detalle ── */
.anu-detalle{ width:46em; border-radius:1.8em; border:1px solid #E6E2D8; box-shadow:0 18px 40px -24px rgba(27,42,65,.35); padding:2.6em 2.2em 0; box-sizing:border-box }
.anu-det-cab{ text-align:center }
.anu-det-cab h1{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:7.6em; line-height:.9; letter-spacing:-.04em; color:var(--anu-tinta) }
.anu-det-cab .anu-quien{ font-family:var(--anu-mano); font-size:2.6em; line-height:1; margin-top:.4em }
.anu-det-cab .anu-total{ font-family:var(--f-mono); font-size:1.1em; color:var(--anu-tinta3); margin-top:.6em }
.anu-bloque{ margin-top:2.6em }
.anu-rotulo{ display:flex; align-items:center; gap:.8em; font-family:var(--f-mono); font-size:1em; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--anu-tinta2); margin:0 .2em 1em }
.anu-rotulo::after{ content:""; flex:1; border-top:.15em dashed var(--anu-linea) }
.anu-rotulo b{ font-family:var(--f-tit); font-size:1.3em; letter-spacing:0; color:var(--anu-tinta); text-transform:none }
.anu-ruta{ position:relative }
.anu-ruta svg{ position:absolute; inset:0; width:100%; height:100% }
.anu-ruta svg path{ fill:none; stroke:var(--anu-tinta); stroke-width:1.6; stroke-dasharray:5 6; stroke-linecap:round; opacity:.55 }
.anu-casa{ position:absolute; transform:translate(-50%,-50%); font-family:var(--anu-mano); font-size:1.8em; color:var(--anu-tinta2) }
.anu-casa::before{ content:""; display:block; width:.67em; height:.67em; border-radius:50%; background:var(--anu-tinta); margin:0 auto .15em; box-shadow:0 0 0 .22em var(--anu-papel),0 0 0 .3em var(--anu-tinta) }
.anu-parada{ position:absolute; width:12.2em; transform:translate(-50%,-50%); text-align:center }
.anu-postal{ background:#fff; border:.15em solid var(--anu-tinta); border-radius:.6em; padding:.6em .6em .7em; box-shadow:0 .6em 1.4em -1em rgba(27,42,65,.5) }
.anu-postal.grande{ background:var(--anu-salvia) }
.anu-portada{ width:100%; height:5.6em; border-radius:.3em; overflow:hidden; position:relative; background:#fff }
.anu-portada > img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) }
.anu-portada .anu-bm{ right:.4em; bottom:.4em; width:1.8em; height:1.8em; border-width:.15em }
.anu-portada.sin{ display:grid; place-items:center; border:.15em dashed var(--anu-linea); box-sizing:border-box }
.anu-bg{ width:3.2em; height:3.2em; border-radius:50%; overflow:hidden; border:.15em solid var(--anu-tinta); box-sizing:border-box }
.anu-bg img{ width:100%; height:100%; object-fit:cover }
.anu-postal b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:1.35em; line-height:1.05; margin-top:.37em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-postal small{ display:block; font-size:.95em; color:var(--anu-tinta2); margin-top:.2em; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-mes{ display:inline-block; margin-top:.22em; font-family:var(--anu-mano); font-size:1.8em; line-height:1 }
.anu-mes i{ font-style:normal; color:var(--anu-tinta3); font-family:var(--f-mono); font-size:.53em; margin-left:.4em; vertical-align:.2em }
.anu-conciertos{ display:grid; grid-template-columns:auto 1fr; gap:.4em 1.4em; align-items:center }
.anu-con-num{ grid-row:1/3; text-align:center }
.anu-con-num b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:5.6em; line-height:.85; letter-spacing:-.03em }
.anu-con-num > span:last-child{ font-family:var(--f-mono); font-size:1em; letter-spacing:.1em; text-transform:uppercase; color:var(--anu-tinta2) }
.anu-con-ico{ width:4.2em; height:4.2em; border-radius:50%; background:var(--anu-rosa); border:.15em solid var(--anu-tinta); margin:0 auto .6em; display:grid; place-items:center; box-sizing:border-box }
.anu-con-ico img{ width:2.8em }
.anu-guirnalda{ position:relative; height:8.4em }
.anu-guirnalda svg{ position:absolute; left:0; right:0; top:0; width:100%; height:3em; overflow:visible }
.anu-guirnalda svg path{ fill:none; stroke:var(--anu-tinta); stroke-width:1.3; stroke-dasharray:3 5; opacity:.5 }
.anu-guirnalda-caras{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) }
.anu-cara.peq .anu-cara-f{ width:4.2em; height:4.2em; padding:.25em; border-width:.15em }
.anu-cara.peq .anu-ini{ font-size:1.9em }
.anu-cara.peq .anu-x{ font-size:.95em; top:-.6em; right:-.9em }
.anu-cara.peq > span{ font-size:.95em; margin-top:.4em }
.anu-con-mas{ grid-column:2; font-family:var(--anu-mano); font-size:1.7em; color:var(--anu-tinta2); line-height:1.1; padding-left:.1em }
.anu-top{ display:grid; grid-template-columns:auto 1fr; gap:1.2em; align-items:start }
.anu-medalla{ width:6.4em; text-align:center }
.anu-disco{ width:5.6em; height:5.6em; margin:0 auto; border-radius:50%; border:.15em solid var(--anu-tinta); display:grid; place-items:center; position:relative; box-sizing:border-box }
.anu-disco > img{ width:3.4em; height:3.4em; object-fit:contain }
.anu-disco .anu-chapa{ font-size:1.5em; right:-.8em; bottom:-.4em; min-width:2em; height:2em; padding:0 .4em; border-width:.1em; border-radius:1em }
.anu-medalla > span{ display:block; margin-top:.9em; font-size:1.05em; color:var(--anu-tinta2); line-height:1.15 }
.anu-tiras{ min-width:0 }
.anu-que{ font-family:var(--anu-mano); font-size:1.8em; line-height:1; margin:0 0 .35em; color:var(--anu-tinta) }
.anu-fila{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:.8em }
.anu-pieza{ position:relative; min-width:0 }
.anu-marco{ border-radius:.6em; overflow:hidden; border:.15em solid var(--anu-tinta); background:#fff; position:relative; box-sizing:border-box }
.anu-marco > img{ width:100%; height:100%; object-fit:cover }
.anu-pieza.cartel .anu-marco, .anu-pieza.libro .anu-marco{ aspect-ratio:2/3 }
.anu-pieza.apaisada .anu-marco{ aspect-ratio:4/3 }
.anu-pieza.cuadro .anu-marco{ aspect-ratio:1/1 }
/* La nota arriba a la DERECHA, como la cifra de cada apartado; las veces
   (juegos jugados más de una vez), a la izquierda. */
.anu-nota{ position:absolute; top:-.6em; right:-.5em; min-width:2.2em; height:1.85em; padding:0 .5em; border-radius:1em; background:var(--anu-papel); border:.12em solid var(--anu-tinta); font-family:var(--f-tit); font-weight:800; font-size:1.2em; display:grid; place-items:center; z-index:2; box-sizing:border-box }
.anu-veces{ position:absolute; top:-.7em; left:-.6em; min-width:2.4em; height:2.2em; padding:0 .5em; border-radius:1.1em; background:var(--anu-tinta); color:#fff; font-family:var(--f-mono); font-size:1em; font-weight:600; display:grid; place-items:center; z-index:2; box-sizing:border-box }
.anu-pieza > b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.5em; font-size:1.05em; font-weight:600; line-height:1.15 }
.anu-pieza > small{ display:block; font-size:.95em; color:var(--anu-tinta3); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-marco.dibujo{ display:grid; place-items:center; background:var(--anu-vainilla); border-style:dashed }
.anu-marco.dibujo > img{ width:46%; height:auto; object-fit:contain }
.anu-marco.dibujo .t{ position:absolute; left:.4em; right:.4em; bottom:.4em; font-family:var(--anu-mano); font-size:1.5em; line-height:1; text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.anu-det-pie{ position:relative; margin:2.4em -2.2em 0; height:18.2em; background:linear-gradient(transparent 0 58%,#EEF4EC 58%) }
.anu-det-familia{ position:absolute; left:50%; bottom:2.6em; width:38em; height:15em; margin-left:-19em; overflow:hidden }
.anu-det-familia img{ position:absolute; width:56em; left:-9.2em; top:-11.8em; max-width:none }
.anu-det-firma{ position:absolute; left:0; right:0; bottom:.8em; text-align:center; font-family:var(--f-mono); font-size:.95em; letter-spacing:.14em; text-transform:uppercase; color:var(--anu-tinta2) }

/* ── El podio de los restaurantes (las tres piezas) ── */
.anu-podio-todo{ width:100% }
.anu-podio{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:end; gap:.8em }
.anu-puesto{ text-align:center; min-width:0 }
.anu-medalla-p{ width:5.6em; height:5.6em; margin:0 auto .6em; border-radius:50%; display:grid; place-items:center; border:.15em solid var(--anu-tinta); box-shadow:inset 0 0 0 .35em rgba(255,255,255,.55); box-sizing:border-box }
.anu-medalla-p span{ font-family:var(--f-tit); font-weight:800; font-size:2em; line-height:1; letter-spacing:-.02em; color:var(--anu-tinta) }
.anu-puesto.oro .anu-medalla-p{ width:6.4em; height:6.4em; background:radial-gradient(circle at 35% 30%,#FFF4CC,#F3D27A 45%,#C99A2E) }
.anu-puesto.oro .anu-medalla-p span{ font-size:2.3em }
.anu-puesto.plata .anu-medalla-p{ background:radial-gradient(circle at 35% 30%,#FFFFFF,#E6E9EE 45%,#9AA3AF) }
.anu-puesto.bronce .anu-medalla-p{ background:radial-gradient(circle at 35% 30%,#FBE2CF,#E7B18A 45%,#A9643A) }
.anu-escalon{ border:.15em solid var(--anu-tinta); border-bottom:0; border-radius:.6em .6em 0 0; background:var(--anu-papel); display:flex; flex-direction:column; align-items:center; padding:.8em .5em 0; text-align:center; box-sizing:border-box; min-width:0 }
.anu-escalon b{ max-width:100%; font-family:var(--f-tit); font-weight:800; font-size:1.35em; line-height:1.05; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--anu-tinta) }
.anu-escalon small{ display:block; max-width:100%; font-family:var(--anu-mano); font-size:1.55em; line-height:1; color:var(--anu-tinta2); margin-top:.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-puesto.oro .anu-escalon{ height:8.6em } .anu-puesto.plata .anu-escalon{ height:6.8em } .anu-puesto.bronce .anu-escalon{ height:5.6em }
.anu-podio-suelo{ height:.15em; background:var(--anu-tinta); border-radius:.1em; margin-top:-.15em }
.anu-menciones{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8em; margin-top:1.2em }
.anu-mencion{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35em; background:var(--anu-papel); border:.15em dashed var(--anu-tinta); border-radius:1em; padding:.7em .5em .6em; min-width:0; box-sizing:border-box }
.anu-plato{ width:3.4em; height:3.4em; border-radius:50%; border:.15em solid var(--anu-tinta); display:grid; place-items:center; background:#fff; position:relative; box-sizing:border-box }
.anu-plato img{ width:2.1em }
.anu-plato em{ position:absolute; top:-.5em; right:-.9em; min-width:2em; height:2em; border-radius:1em; background:var(--anu-tinta); color:#fff; font-style:normal; font-family:var(--f-mono); font-size:.85em; font-weight:600; display:grid; place-items:center }
.anu-mencion b{ display:block; max-width:100%; font-size:1.1em; font-weight:600; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-mencion small{ display:block; max-width:100%; font-family:var(--f-mono); font-size:.85em; color:var(--anu-tinta2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-mencion i{ font-style:normal; font-family:var(--f-tit); font-weight:800; color:var(--anu-tinta) }

/* ── Mi año en detalle, horizontal (ordenador): 192 × 108 em ── */
.anu.anu-ancha{ max-width:none }
.anu-hor{ width:192em; height:108em; display:flex; gap:1.8em; padding:3.6em; border-radius:1.4em; border:1px solid #E6E2D8; box-shadow:0 18px 40px -24px rgba(27,42,65,.35); box-sizing:border-box }
.anu-hor-izq{ width:50em; flex-shrink:0; display:flex; flex-direction:column; gap:1.8em; min-height:0 }
.anu-hor-anio{ position:relative; height:30em; flex-shrink:0; padding-top:.4em; box-sizing:border-box }
.anu-hor-anio h1{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:12em; line-height:.82; letter-spacing:-.05em; color:var(--anu-tinta) }
.anu-hor-anio .anu-quien{ font-family:var(--anu-mano); font-size:3.6em; line-height:1; margin-top:.2em }
.anu-hor-resumen{ display:flex; gap:1.6em; margin-top:1.6em; flex-wrap:wrap }
.anu-hor-resumen span{ font-family:var(--f-mono); font-size:1.1em; letter-spacing:.06em; color:var(--anu-tinta2) }
.anu-hor-resumen b{ font-family:var(--f-tit); font-weight:800; font-size:1.6em; color:var(--anu-tinta); margin-right:.25em; letter-spacing:0 }
.anu-hor-familia{ position:absolute; right:0; bottom:0; width:26em; height:12.4em; overflow:hidden; pointer-events:none }
.anu-hor-familia img{ position:absolute; width:40em; max-width:none; left:-7em; top:-8.2em }
.anu-hor-izq > .anu-tarjeta{ flex:1 1 0 }
.anu-hor-der{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1.8em }
.anu-hor-fila{ flex:1 1 0; min-height:0; display:flex; gap:1.8em }
.anu-tarjeta{ flex:1 1 0; min-width:0; min-height:0; border-radius:1.8em; padding:2em 2.2em; display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box }
.anu-tarjeta.t-viajes{ background:#E3F0E8 } .anu-tarjeta.t-conciertos{ background:#F8E2EB } .anu-tarjeta.t-cine{ background:#DCE8F7 } .anu-tarjeta.t-teatro{ background:#FBE3D2 }
.anu-tarjeta.t-escape{ background:#FBF0D3 } .anu-tarjeta.t-juegos{ background:#E9E3F4 } .anu-tarjeta.t-comida{ background:#FCE6DC } .anu-tarjeta.t-libros{ background:#DCEFE4 }
.anu-t-cab{ display:flex; align-items:center; gap:1.2em; margin-bottom:1.6em; flex-shrink:0 }
.anu-t-ico{ width:5.2em; height:5.2em; border-radius:50%; background:var(--anu-papel); border:.15em solid var(--anu-tinta); display:grid; place-items:center; flex-shrink:0; box-sizing:border-box }
.anu-t-ico img{ width:3.2em; height:3.2em; object-fit:contain }
.anu-t-tit{ flex:1; min-width:0 }
.anu-t-tit b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:2.4em; line-height:1; letter-spacing:-.01em; color:var(--anu-tinta) }
.anu-t-tit span{ display:block; font-family:var(--anu-mano); font-size:2em; line-height:1; color:var(--anu-tinta2); margin-top:.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.anu-t-num{ text-align:right; flex-shrink:0 }
.anu-t-num b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:5.4em; line-height:.85; letter-spacing:-.03em; color:var(--anu-tinta) }
.anu-t-num span{ font-family:var(--f-mono); font-size:1.05em; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--anu-tinta2) }
.anu-encaje{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center }
.anu-encaje-in{ width:100%; margin:0 auto; padding:.8em .6em 0; box-sizing:border-box }
.anu-hor .anu-fila{ gap:1.4em }
.anu-hor .anu-fila-cine{ grid-template-columns:repeat(5,minmax(0,13.4em)); justify-content:space-between }
.anu-hor .anu-postal.grande{ outline:.35em solid var(--anu-papel); outline-offset:-.5em }
.anu-hor-mas{ margin:.6em 0 0; font-family:var(--anu-mano); font-size:1.8em; line-height:1.1; color:var(--anu-tinta2); text-align:center }
.anu-guirnalda.larga{ height:13em }
.anu-guirnalda.larga svg{ height:4em }
.anu-cara.med .anu-cara-f{ width:6.4em; height:6.4em; padding:.3em; border-width:.15em; background:var(--anu-papel) }
.anu-cara.med .anu-cara-f.sin{ background:var(--anu-vainilla) }
.anu-cara.med .anu-ini{ font-size:2.6em }
.anu-cara.med .anu-x{ font-size:1em; top:-.5em; right:-.8em; border-color:#F8E2EB }
.anu-cara.med > span{ font-size:1.2em; margin-top:.5em }
.anu-fest{ display:block; text-align:center; font-family:var(--f-mono); font-size:.85em; letter-spacing:.08em; text-transform:uppercase; color:var(--anu-tinta2); margin-top:.2em }

/* Sin tercer puesto (o segundo), el hueco no se ve; sin nota, los cubiertos en la medalla. */
.anu-puesto.vacio{ visibility:hidden }
.anu-medalla-p > img{ width:55%; height:55%; object-fit:contain }
/* El dibujo de un festival sin cartel, en su cara */
.anu-cara-f .anu-dib-fest{ width:82%; height:82% }
.anu-cara-f.fest{ background:var(--anu-vainilla) }

/* La foto del año: bajo la silueta va el «a thousand left» manuscrito del
   propio logo (el recorte llega hasta él); abajo solo queda la frase. */
.anu-acciones-bajar{ display:flex; gap:8px; flex-wrap:wrap }
/* La lámina horizontal que se baja desde el móvil: fuera de la pantalla. */
.anu-fuera{ position:fixed; left:-30000px; top:0; width:1100px; pointer-events:none }

/* ── El visor del viaje (src/viajes/VisorViaje.tsx) ──
   Maqueta en referencia/lienzo/VisorViaje.html: la portada a sangre (o el
   sobre con sellos si no hay fotos), las cifras en círculos de pastel, quién
   fue a mano, y cada sección con su rótulo en mono y la línea discontinua.
   Columna de lectura: en escritorio no pasa de 820 px. */
.vj.vv{ max-width:820px; margin:0 auto; padding-bottom:0 }
.vv-barra{ position:absolute; top:12px; left:12px; right:12px; z-index:3; display:flex; justify-content:space-between; gap:8px }
.vv-bt{
  height:36px; padding:0 14px; border-radius:18px; cursor:pointer;
  background:rgba(255,253,248,.92); border:1.5px solid var(--tx); color:var(--tx);
  font:600 14px var(--f-txt); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.vv-bt:hover{ background:#fff }
.vv-portada{ position:relative; height:clamp(260px,46vw,400px); border-radius:20px; overflow:hidden; margin:0 0 4px; background:var(--noche) }
.vv-portada > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vv-portada:not(.sin-foto)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(27,42,65,.18),rgba(27,42,65,0) 30%,rgba(27,42,65,.8));
}
.vv-portada-txt{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; color:#fff }
.vv-portada h2{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:clamp(34px,7vw,54px); line-height:.92; letter-spacing:-.035em; overflow-wrap:anywhere }
.vv-fechas{ margin:4px 0 0; font-family:"Caveat",cursive; font-size:clamp(22px,4vw,28px); line-height:1 }
.vv-banderas{ display:flex; gap:5px; margin-bottom:10px }
.vv-banderas .bandera-img,.vv-sello .bandera-img{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; border:2.5px solid #fff; box-sizing:border-box }
/* Sin fotos: el sobre */
.vv-portada.sin-foto{ height:auto; background:#EEF4EC; padding:64px 18px 22px }
.vv-sobre{
  position:relative; background-color:#FFFDF8; border:1.5px solid var(--tx); border-radius:6px;
  padding:22px 20px 22px; box-shadow:0 10px 24px -18px rgba(27,42,65,.5); color:var(--tx);
  background-image:repeating-linear-gradient(135deg,#B04E2E 0 10px,transparent 10px 20px,#2F6FED 20px 30px,transparent 30px 40px);
  background-size:100% 6px; background-repeat:no-repeat; background-position:0 0;
}
.vv-sellos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 18px; min-height:70px }
.vv-sello{
  width:58px; height:68px; display:grid; place-items:center; background:#fff; color:var(--tx);
  border:5px dotted #DCE8F7; outline:1.2px solid var(--tx); outline-offset:-9px; box-shadow:0 2px 6px -3px rgba(27,42,65,.4);
}
.vv-sello .bandera-img{ width:32px; height:32px; border:1.5px solid var(--tx) }
.vv-sello svg{ width:26px; height:26px }
.vv-matasellos{
  order:-1; margin-right:auto; width:76px; height:76px; border-radius:50%; border:2px solid rgba(176,78,46,.75);
  color:rgba(176,78,46,.85); display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-12deg); font-family:var(--f-mono); line-height:1.1;
}
.vv-matasellos b{ font-size:15px; letter-spacing:.08em }
.vv-matasellos i{ font-style:normal; font-size:11px }
.vv-sobre h2{ color:var(--tx) }
.vv-sobre .vv-fechas{ color:var(--tx2) }
/* Cifras y quién fue */
.vv-cifras{ display:grid; gap:10px; padding:22px 4px 0; text-align:center; max-width:520px; margin:0 auto }
.vv-cifra-c{ width:64px; height:64px; margin:0 auto; border-radius:50%; border:1.5px solid var(--tx); display:grid; place-items:center }
.vv-cifra-c b{ font-family:var(--f-tit); font-weight:800; font-size:24px; line-height:1; letter-spacing:-.03em }
.vv-cifra span{ display:block; margin-top:6px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.vv-quien{ margin:14px 0 0; text-align:center; font-family:"Caveat",cursive; font-size:24px; line-height:1.1; color:var(--tx2) }
.vv-diario{ margin:8px 0 0; padding:8px 11px; border-radius:10px; background:#FBF0D3; font-family:"Caveat",cursive; font-size:21px; line-height:1.1; color:var(--tx); white-space:pre-line }
.vv-notas{ margin-top:16px }
/* Rótulos de sección */
.vv-rot{ display:flex; align-items:center; gap:10px; margin:30px 0 12px; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tx2) }
.vv-rot > span{ flex-shrink:0 }
.vv-rot::after{ content:""; flex:1; order:1; border-top:1.5px dashed var(--borde) }
.vv-rot b{ font-family:var(--f-tit); font-size:14px; letter-spacing:0; color:var(--tx); text-transform:none; margin-left:4px }
.vv-rot-bt{ order:2; flex-shrink:0; height:28px; padding:0 11px; border-radius:14px; border:1px solid var(--borde); background:var(--sup); color:var(--tx2); font:600 12px var(--f-txt); letter-spacing:0; text-transform:none; cursor:pointer }
.vv-rot-bt:hover{ color:var(--tx); border-color:var(--tx) }
.vv-vacio{ margin:0; font-size:14px; line-height:1.5; color:var(--tx3) }
.vv-mapa-dib{ max-width:600px; margin:0 auto; border:1.5px solid var(--tx); border-radius:18px; overflow:hidden; background:#EAF1F6 }
.vv-mapa-dib svg{ display:block; width:100%; height:auto }
.vv-mapa-dib path{ fill:#F3F1EA; stroke:#C9CFC9; stroke-width:.8; vector-effect:non-scaling-stroke }
.vv-mapa-dib path.suyo{ fill:#E3F0E8; stroke:#2E6E4E; stroke-width:1.2 }
.vv-mapa-ruta{ fill:none; stroke:var(--tx); stroke-linecap:round; stroke-linejoin:round }
.vv-mapa-pin circle{ fill:var(--tx); stroke:#FFFDF8 }
.vv-mapa-pin text{ fill:#fff; font-family:var(--f-mono); font-weight:600 }
.vv-mapa-pin text.vv-mapa-nombre{ fill:var(--tx); font-family:"Caveat",cursive; font-weight:600; stroke:#FFFDF8; paint-order:stroke; stroke-linejoin:round }
.vv-mapa-pais{ fill:#7A8579; font-family:var(--f-mono); font-weight:600; letter-spacing:.06em }
.vv-mapa-km{ justify-content:center; padding:10px 0 0 }
.vv-mapa-foto{ fill:#B04E2E; opacity:.55 }
/* Día a día */
.vv-dias{ position:relative }
.vv-dias::before{ content:""; position:absolute; left:26px; top:14px; bottom:14px; border-left:2px dashed var(--borde) }
.vv-dia{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; margin-bottom:22px }
.vv-dia-f{
  width:52px; height:58px; border-radius:12px; background:var(--tx); color:#fff; text-align:center;
  display:flex; flex-direction:column; justify-content:center; box-shadow:0 0 0 4px var(--fondo); box-sizing:border-box;
}
.vv-dia-f b{ font-family:var(--f-tit); font-weight:800; font-size:21px; line-height:.95; letter-spacing:-.02em; white-space:nowrap }
.vv-dia-f span{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; white-space:nowrap }
.vv-dia.tramo .vv-dia-f b{ font-size:16px; letter-spacing:-.04em }
.vv-dia.llano .vv-dia-f{ background:var(--sup); color:var(--tx); border:1.5px solid var(--tx) }
.vv-dia-cuerpo{ min-width:0 }
.vv-donde{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; margin:3px 0 8px }
.vv-lugar{ display:inline-flex; align-items:center; gap:6px }
.vv-lugar b{ font-family:var(--f-tit); font-weight:800; font-size:19px; line-height:1.05 }
.vv-lugar i{ font-style:normal; font-family:"Caveat",cursive; font-size:20px; color:var(--tx3) }
.vv-num{ width:20px; height:20px; border-radius:50%; background:var(--tx); color:#fff; display:grid; place-items:center; font:600 10px var(--f-mono); flex-shrink:0 }
.vv-dia-acciones{ margin-left:auto; display:inline-flex; gap:4px }
.vv-dia-acciones button{
  width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--borde-s); border-radius:var(--r-s); background:var(--sup); color:var(--tx3); font-size:16px;
}
.vv-dia-acciones button:hover{ color:var(--tx); border-color:var(--tx) }
.vv-tira{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 0 8px; max-width:420px }
.vv-tira > div{ position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1.5px solid var(--tx); background:var(--sup2) }
.vv-tira img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) }
.vv-tira > div:nth-child(4),.vv-mas.escritorio{ display:none }
@media (min-width:900px){
  .vv-tira{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:600px }
  .vv-tira > div:nth-child(4){ display:block }
  .vv-mas.movil{ display:none }
  .vv-mas.escritorio{ display:grid }
}
.vv-mas{ position:absolute; inset:0; background:rgba(27,42,65,.82); color:#fff; display:grid; place-items:center; font:800 17px var(--f-tit) }
.vv-items{ display:grid; gap:6px }
.vv-item{ display:flex; align-items:flex-start; gap:8px; font-size:14.5px; line-height:1.35; white-space:pre-line }
.vv-item > span:last-child{ padding-top:3px; min-width:0 }
.vv-ic{ width:26px; height:26px; flex-shrink:0; border-radius:50%; border:1.2px solid var(--tx); display:grid; place-items:center; color:var(--tx) }
.vv-ic svg{ width:15px; height:15px }
.vv-ic img{ width:16px; height:16px; object-fit:contain }
.vv-item.vis .vv-ic{ background:#DCE8F7 }
.vv-item.comer .vv-ic{ background:#FCE6DC }
.vv-dia .vj-comidas{ margin-top:8px }
/* Lo que costó */
.vv-coste{ background:#DCEFE4; border-radius:18px; padding:16px 18px }
.vv-coste-cab{ width:100%; display:block; padding:0; border:0; background:none; color:var(--tx); text-align:left; cursor:pointer; font:inherit }
.vv-coste-cab:disabled{ cursor:default }
.vv-coste-total{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap }
.vv-coste-total b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:32px; line-height:.9; letter-spacing:-.03em }
.vv-coste-total .pp{ text-align:right }
.vv-coste-total .pp b{ font-size:21px }
.vv-coste-total small{ display:block; margin-top:5px; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.vv-coste-abrir{ display:block; margin-top:12px; font-family:"Caveat",cursive; font-size:20px; color:var(--tx2) }
.vv-coste-abrir i{ display:inline-block; font-style:normal; transition:transform .15s }
.vv-coste-abrir i.abierta{ transform:rotate(90deg) }
.vv-barras{ margin-top:12px; display:grid; gap:7px }
.vv-barra-c{ display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto; align-items:center; gap:10px; font-size:13.5px }
.vv-pista{ height:10px; border-radius:5px; background:rgba(255,255,255,.7); overflow:hidden }
.vv-pista i{ display:block; height:100%; border-radius:5px; background:#2E6E4E }
.vv-imp{ font-family:var(--f-mono); font-size:12px; font-weight:600; white-space:nowrap }
.vv-de{ margin:6px 0 0; font-family:"Caveat",cursive; font-size:18px; color:var(--tx2) }
/* El pie: la familia del logo, con su «a thousand left» */
.vv-pie{ position:relative; height:205px; margin-top:28px; background:linear-gradient(transparent 0 55%,#EEF4EC 55%); border-radius:0 0 20px 20px; overflow:hidden }
.vv-pie-fam{ position:absolute; left:50%; bottom:4px; width:300px; height:191px; margin-left:-150px; overflow:hidden }
.vv-pie-fam img{ position:absolute; width:455px; max-width:none; left:-81px; top:-94px }
@media (max-width:520px){
  .vv-portada{ border-radius:16px }
  .vv-cifra-c{ width:56px; height:56px }
  .vv-cifra-c b{ font-size:21px }
}

/* ── Las piezas del viaje (fase 3): el +, sus formularios, ida y vuelta y
   dónde dormimos. Maqueta: referencia/lienzo/VisorViaje.html ── */
.vv-form-tit{ margin:4px 0 2px; font-family:var(--f-tit); font-weight:800; font-size:24px; letter-spacing:-.02em }
.vv-form-sub{ margin:0 0 14px; font-size:14px; color:var(--tx2) }
.vv-form-resumen{ margin:6px 0 0; font-family:"Caveat",cursive; font-size:21px; color:var(--tx) }
.vv-form .vv-campo{ margin-bottom:14px }
.vv-form .vv-campo > label{ display:block; margin:0 0 6px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.vv-form .vv-campo input,.vv-form .vv-campo textarea{ width:100%; box-sizing:border-box }
.vv-dos{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.vv-tres{ display:grid; grid-template-columns:1fr 1fr 7.5em; gap:10px }
@media (max-width:420px){ .vv-tres{ grid-template-columns:1fr 1fr } .vv-tres > :last-child{ grid-column:1/-1 } }
.vv-chips{ display:flex; flex-wrap:wrap; gap:6px }
.vv-chips button{
  height:34px; padding:0 13px; border-radius:17px; cursor:pointer;
  border:1.3px solid var(--borde); background:var(--sup); color:var(--tx); font:500 14px var(--f-txt);
}
.vv-chips button.on{ background:var(--tx); border-color:var(--tx); color:#fff; font-weight:600 }
/* El menú del + */
.vv-tipos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px }
.vv-tipo{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; cursor:pointer;
  border:1.5px solid var(--tx); border-radius:16px; padding:14px 8px 12px; background:#FFFDF8; color:var(--tx); font:inherit;
}
.vv-tipo:hover{ box-shadow:0 6px 14px -10px rgba(27,42,65,.6) }
.vv-tipo b{ font-size:14.5px }
.vv-tipo small{ font-size:12px; line-height:1.25; color:var(--tx3) }
.vv-tipo-ic{ width:46px; height:46px; margin-bottom:5px; border-radius:50%; border:1.3px solid var(--tx); display:grid; place-items:center; background:#fff }
.vv-tipo-ic svg{ width:24px; height:24px }
.vv-tipo-ic img{ width:26px; height:26px; object-fit:contain }
.vv-tipo.primero{ grid-column:1/-1; flex-direction:row; text-align:left; gap:12px; background:#E3F0E8; padding:12px 14px }
.vv-tipo.primero .vv-tipo-ic{ margin:0 }
.vv-tipo.primero span:last-child{ display:flex; flex-direction:column; gap:2px }
@media (max-width:420px){ .vv-tipos{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* Ida y vuelta: los billetes */
.vv-billetes{ display:grid; gap:10px }
@media (min-width:900px){ .vv-billetes{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.vv-billete{
  display:grid; grid-template-columns:minmax(0,1fr) 84px; padding:0; cursor:pointer; text-align:left; font:inherit; color:var(--tx);
  border:1.5px solid var(--tx); border-radius:14px; overflow:hidden; background:#fff;
}
.vv-billete-ruta{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:12px 14px }
.vv-billete .ap b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:26px; line-height:.9; letter-spacing:-.02em }
.vv-billete .ap small{ display:block; font-size:12px; color:var(--tx2); max-width:7em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vv-billete .ap.der{ text-align:right }
.vv-billete .medio{ text-align:center; color:var(--tx3); min-width:0 }
.vv-billete .medio svg{ width:24px; height:24px; display:block; margin:0 auto; color:var(--tx) }
.vv-billete .medio span{ display:block; margin-top:3px; padding-top:2px; border-top:1.5px dashed var(--borde); font-family:var(--f-mono); font-size:10px; white-space:nowrap }
.vv-billete-talon{
  border-left:1.5px dashed var(--tx); background:#DCE8F7; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:6px; gap:1px; min-width:0;
}
.vv-billete-talon small{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.vv-billete-talon b{ font-family:var(--f-tit); font-weight:800; font-size:15px; white-space:nowrap }
.vv-billete-talon i{ font-style:normal; font-family:"Caveat",cursive; font-size:17px; color:var(--tx2); line-height:1; overflow:hidden; text-overflow:ellipsis; max-width:100% }
/* Dónde dormimos */
.vv-alojas{ display:grid; gap:10px }
.vv-aloja{ position:relative; background:#E9E3F4; border-radius:16px }
.vv-aloja-abrir{
  width:100%; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:10px 12px; border:0; background:none; color:var(--tx); text-align:left; font:inherit; cursor:pointer;
}
.vv-aloja-cama{ width:52px; height:52px; border-radius:11px; background:#fff; border:1.3px solid var(--tx); display:grid; place-items:center }
.vv-aloja-cama svg{ width:26px; height:26px }
.vv-aloja-txt b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:16px; line-height:1.1 }
.vv-aloja-txt small{ display:block; font-family:"Caveat",cursive; font-size:18px; color:var(--tx2); line-height:1.1 }
.vv-aloja-noches{ text-align:center; font-family:var(--f-tit); font-weight:800 }
.vv-aloja-noches b{ display:block; font-size:24px; line-height:1 }
.vv-aloja-noches span{ display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.vv-aloja-enlace{
  display:inline-block; margin:0 0 10px 76px; font-family:var(--f-mono); font-size:11px; font-weight:600;
  color:#fff; background:var(--tx2); border-radius:7px; padding:2px 8px; text-decoration:none;
}
.vv-aloja-enlace.booking{ background:#003580 }
.vv-aloja-enlace.airbnb{ background:#FF5A5F }
/* Las piezas en el día a día: se pueden tocar para editarlas */
button.vv-item{ width:100%; padding:0; border:0; background:none; color:var(--tx); font:inherit; text-align:left; cursor:pointer }
button.vv-item:hover > span:last-child{ text-decoration:underline; text-underline-offset:3px }
.vv-item small{ color:var(--tx3) }
.vv-item.act .vv-ic{ background:#FBF0D3 }
.vv-item.tra .vv-ic{ background:#EFE7D8 }
button.vv-diario-pieza{ display:block; width:100%; border:0; text-align:left; cursor:pointer }
.vv-dia-f b.sin-dia{ font-size:18px }

/* ── Las cuentas del viaje (fase 4): el gasto y quién debe a quién ── */
.vv-persona{
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; flex-shrink:0;
  color:#fff; font:700 10px var(--f-txt); vertical-align:-5px; margin:0 3px 0 1px;
}
.vv-gasto-dos{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:10px }
.vv-reparto{ display:grid; gap:6px }
.vv-reparto > button{
  display:grid; grid-template-columns:22px auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 12px; cursor:pointer;
  border:1.3px solid var(--borde); border-radius:12px; background:var(--sup); color:var(--tx3); font:500 14.5px var(--f-txt); text-align:left;
}
.vv-reparto > button.on{ border-color:var(--tx); color:var(--tx); background:#FFFDF8 }
.vv-marca{ width:20px; height:20px; border-radius:6px; border:1.3px solid var(--borde); display:grid; place-items:center; font-size:12px; font-weight:700 }
.vv-reparto > button.on .vv-marca{ background:var(--tx); border-color:var(--tx); color:#fff }
.vv-reparto > button .vv-persona{ width:24px; height:24px; font-size:11px; margin:0 }
.vv-reparto > button:not(.on) .vv-persona{ opacity:.45 }
.vv-cuota{ font-family:var(--f-mono); font-size:12px; font-weight:600 }
.vv-otra{ display:flex; gap:8px; margin-top:8px }
.vv-otra input{ flex:1; min-width:0 }
.vv-cuentas{ margin-top:12px; border:1.5px solid var(--tx); border-radius:18px; padding:14px 16px; background:#FFFDF8 }
.vv-cuentas-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.vv-cuentas-cab b{ font-family:var(--f-tit); font-weight:800; font-size:18px }
.vv-gastos{ display:grid; gap:2px; margin-bottom:12px }
.vv-gasto{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 4px; cursor:pointer;
  border:0; border-bottom:1px dashed var(--borde); background:none; color:var(--tx); font:inherit; text-align:left;
}
.vv-gasto:hover b{ text-decoration:underline; text-underline-offset:3px }
.vv-gasto-f{ font-family:var(--f-mono); font-size:10.5px; color:var(--tx2); text-transform:uppercase; text-align:center; line-height:1.2 }
.vv-gasto-txt b{ display:block; font-size:14.5px }
.vv-gasto-txt small{ display:block; font-size:12.5px; color:var(--tx2); margin-top:2px }
.vv-saldos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:12px }
.vv-saldo{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:8px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--sup2); border:1px solid var(--borde-s) }
.vv-saldo .vv-persona{ grid-row:1/3; width:30px; height:30px; font-size:13px; margin:0 }
.vv-saldo b{ font-family:var(--f-tit); font-weight:800; font-size:17px }
.vv-saldo small{ font-size:11.5px; color:var(--tx2) }
.vv-saldo > span:last-child{ grid-column:1/-1; margin-top:6px; font-family:var(--f-mono); font-size:12.5px; font-weight:600 }
.vv-saldo .mas{ color:var(--ok) }
.vv-saldo .menos{ color:var(--error) }
.vv-paz h4{ margin:0 0 8px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2) }
.vv-pago{ display:flex; align-items:center; gap:6px; padding:8px 12px; margin-bottom:6px; border-radius:12px; background:#FBF0D3; font-size:14.5px }
.vv-pago .vv-persona{ width:24px; height:24px; font-size:11px; margin:0 }
.vv-flecha{ flex:0 0 34px; height:2px; margin:0 4px; background:var(--tx); position:relative }
.vv-flecha::after{ content:""; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left:7px solid var(--tx); border-right:0 }
.vv-cuanto{ margin-left:auto; font-family:var(--f-tit); font-weight:800; font-size:16px }
.lr-aviso{ color:var(--ok); background:var(--ok-suave); border-radius:10px; padding:8px 12px; font-size:14px; line-height:1.5; margin-bottom:10px }
.vv-form .vv-campo select{ width:100%; box-sizing:border-box }

/* ── El viaje en una imagen horizontal (src/viajes/ResumenViaje.tsx) ──
   192 × 108 em; el tamaño de letra lo pone el componente (ancho / 192) y la
   descarga sale a 1920 × 1080. Maqueta: referencia/lienzo/ViajeHorizontal.html */
.vv-compartir{ display:flex; justify-content:center; margin-top:10px }
.rv-acciones{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px }
.rv-hueco{ width:100%; overflow:hidden }
.rv-lamina{
  --rv-tinta:#1B2A41; --rv-tinta2:#4A5A72; --rv-papel:#FFFDF8;
  width:192em; height:108em; box-sizing:border-box; position:relative; overflow:hidden; color:var(--rv-tinta);
  display:grid; grid-template-columns:56em minmax(0,1fr); gap:1.8em; padding:3.2em;
  background:var(--rv-papel); border-radius:1.4em; font-family:var(--f-txt);
}
.rv-lamina *{ box-sizing:border-box }
.rv-izq{ display:flex; flex-direction:column; gap:1.8em; min-height:0 }
.rv-der{ display:grid; gap:1.8em; min-height:0; min-width:0 }
.rv-t{ border-radius:1.8em; padding:1.8em 2em; min-width:0; min-height:0; overflow:hidden; position:relative; display:flex; flex-direction:column }
.rv-t .anu-encaje{ flex:1; min-height:0 }
.rv-cab{ display:flex; align-items:center; gap:1em; margin-bottom:1.2em; flex-shrink:0 }
.rv-ico{ width:4.4em; height:4.4em; border-radius:50%; background:var(--rv-papel); border:.15em solid var(--rv-tinta); display:grid; place-items:center; flex-shrink:0 }
.rv-ico svg,.rv-ico img{ width:2.6em; height:2.6em; object-fit:contain }
.rv-tit{ flex:1; min-width:0 }
.rv-tit b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:2.1em; line-height:1 }
.rv-tit > span{ display:block; font-family:"Caveat",cursive; font-size:1.8em; color:var(--rv-tinta2); line-height:1; margin-top:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rv-num{ text-align:right }
.rv-num b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:4.2em; line-height:.85; letter-spacing:-.03em }
.rv-num span{ font-family:var(--f-mono); font-size:1em; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--rv-tinta2) }
/* La portada */
.rv-portada{ height:44em; border-radius:1.8em; overflow:hidden; position:relative; flex-shrink:0; background:#131C2A }
.rv-portada > img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-lamina:not(.sin-fotos) .rv-portada::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(27,42,65,0) 35%,rgba(27,42,65,.82)) }
.rv-portada-txt{ position:absolute; left:2.6em; right:2.6em; bottom:2.4em; color:#fff; z-index:2 }
.rv-banderas{ display:flex; gap:.5em; margin-bottom:1em }
.rv-banderas span{ width:3.4em; height:3.4em; border-radius:50%; overflow:hidden; border:.25em solid #fff }
.rv-banderas img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-portada h1{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:7em; line-height:.88; letter-spacing:-.04em; overflow-wrap:anywhere }
.rv-fechas{ font-family:"Caveat",cursive; font-size:3em; line-height:1; margin-top:.2em }
.rv-quien{ font-family:"Caveat",cursive; font-size:2.4em; opacity:.9; margin-top:.15em }
/* Sin fotos: el sobre con los sellos */
.sin-fotos .rv-portada{ background:linear-gradient(135deg,#DCE8F7 0 33%,#FBF0D3 33% 66%,#F8E2EB 66%) }
.sin-fotos .rv-portada-txt{ color:var(--rv-tinta) }
.rv-sobre{ position:absolute; inset:0 }
.rv-sello-g{ position:absolute; width:12em; height:12em; border-radius:50%; display:grid; place-items:center; background:var(--rv-papel); border:.25em dashed var(--rv-tinta); box-shadow:0 0 0 .6em var(--rv-papel) }
.rv-sello-g img{ width:7.4em; height:7.4em; border-radius:50%; object-fit:cover; border:.25em solid var(--rv-tinta) }
.rv-sello-g svg{ width:5em; height:5em }
.rv-matasellos{ position:absolute; right:2.2em; top:2.4em; width:13em; height:13em; border-radius:50%; border:.3em solid #B04E2E; color:#B04E2E; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-12deg); font-family:var(--f-mono); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:1.05em; line-height:1.3; opacity:.85 }
.rv-matasellos b{ display:block; font-family:var(--f-tit); font-size:2.6em; letter-spacing:0; line-height:1 }
/* Cifras y mapa */
.rv-cifras{ display:grid; gap:.8em; text-align:center; flex-shrink:0 }
.rv-cifra-c{ width:6.4em; height:6.4em; margin:0 auto; border-radius:50%; border:.15em solid var(--rv-tinta); display:grid; place-items:center }
.rv-cifra-c b{ font-family:var(--f-tit); font-weight:800; font-size:2.7em; line-height:1; letter-spacing:-.03em }
.rv-cifra span{ display:block; margin-top:.5em; font-family:var(--f-mono); font-size:1em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--rv-tinta2) }
.rv-mapa{ flex:1; min-height:0; border-radius:1.8em; overflow:hidden; border:.15em solid var(--rv-tinta); background:#EAF1F6; position:relative; display:flex; align-items:center }
.rv-mapa .vv-mapa-dib{ max-width:none; width:100%; border:0; border-radius:0 }
.rv-mapa-rot{ position:absolute; left:1.4em; top:1.2em; z-index:2; font-family:var(--f-mono); font-size:1em; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rv-tinta2); background:rgba(255,253,248,.9); padding:.4em .8em; border-radius:1em }
/* Fila 1: ida y vuelta y dónde dormimos */
.rv-fila1{ display:grid; gap:1.8em; min-height:0 }
.rv-vuelos{ background:#DCE8F7 }
.rv-dormir{ background:#E9E3F4 }
.rv-billete{ display:grid; grid-template-columns:1fr 8em; border:.15em solid var(--rv-tinta); border-radius:1.1em; overflow:hidden; background:#fff; margin-bottom:.7em }
.rv-billete-ruta{ display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; align-items:center; gap:.8em; padding:.6em 1.1em }
.rv-billete .ap b{ display:block; white-space:nowrap; font-family:var(--f-tit); font-weight:800; font-size:2.2em; line-height:.9 }
.rv-billete .ap small{ display:block; font-size:1em; color:var(--rv-tinta2); max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rv-billete .ap.der{ text-align:right }
.rv-billete .medio{ text-align:center; color:#7A8579 }
.rv-billete .medio svg{ width:2.2em; height:2.2em; display:block; margin:0 auto }
.rv-billete .medio span{ display:block; border-top:.15em dashed #C9CFC9; margin-top:.2em; padding-top:.15em; font-family:var(--f-mono); font-size:.9em; white-space:nowrap }
.rv-billete-talon{ border-left:.15em dashed var(--rv-tinta); background:var(--rv-papel); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center }
.rv-billete-talon b{ font-family:var(--f-tit); font-weight:800; font-size:1.5em }
.rv-billete-talon small{ font-family:var(--f-mono); font-size:.85em; letter-spacing:.06em; text-transform:uppercase; color:var(--rv-tinta2) }
.rv-aloja{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:1em; background:var(--rv-papel); border:.15em solid var(--rv-tinta); border-radius:1.1em; padding:.8em 1.1em; margin-bottom:.7em }
.rv-aloja b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:1.6em; line-height:1.05 }
.rv-aloja small{ display:block; font-family:"Caveat",cursive; font-size:1.6em; color:var(--rv-tinta2); line-height:1 }
.rv-aloja .noches{ text-align:center }
.rv-aloja .noches b{ font-size:2.4em; line-height:1 }
.rv-aloja .noches span{ font-family:var(--f-mono); font-size:.85em; letter-spacing:.08em; text-transform:uppercase; color:var(--rv-tinta2) }
/* Fila 2: el día a día */
.rv-dias{ background:#E3F0E8 }
.rv-dias-tira{ flex:1; min-height:0; display:grid; gap:1em; position:relative }
.rv-dias-tira::before{ content:""; position:absolute; left:2%; right:2%; top:2.4em; border-top:.18em dashed #2E6E4E; opacity:.55 }
.rv-dia{ display:flex; flex-direction:column; min-width:0; min-height:0 }
.rv-dia-f{ align-self:center; width:4.8em; height:4.8em; border-radius:50%; background:var(--rv-tinta); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; box-shadow:0 0 0 .4em #E3F0E8 }
.rv-dia-f b{ font-family:var(--f-tit); font-weight:800; font-size:1.7em; line-height:.9; white-space:nowrap; letter-spacing:-.04em }
.rv-dia-f span{ font-family:var(--f-mono); font-size:.75em; text-transform:uppercase; letter-spacing:.06em; opacity:.85 }
.rv-dia-sitio{ display:flex; align-items:center; justify-content:center; gap:.35em; text-align:center; margin:.6em 0 .5em; font-family:var(--f-tit); font-weight:800; font-size:1.3em; line-height:1.05; min-height:2.1em; overflow:hidden }
.rv-dia-sitio i{ flex-shrink:0; width:1.5em; height:1.5em; border-radius:50%; background:var(--rv-tinta); color:#fff; display:grid; place-items:center; font:600 .6em var(--f-mono) }
.rv-dia-foto{ flex:1; min-height:0; border-radius:.9em; overflow:hidden; border:.15em solid var(--rv-tinta); background:var(--rv-papel) }
.rv-dia-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-dia-sello{ flex:1; min-height:0; position:relative; border-radius:.4em; border:.5em dotted rgba(255,255,255,.9) }
.rv-dia-sello .dentro{ position:absolute; inset:.5em; background:#fff; border-radius:.3em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4em; text-align:center; border:.12em solid var(--rv-tinta) }
.rv-dia-sello .bm{ width:4.4em; height:4.4em; border-radius:50%; overflow:hidden; border:.15em solid var(--rv-tinta) }
.rv-dia-sello .bm img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-dia-sello .ico{ width:3.6em; height:3.6em; border-radius:50%; background:var(--rv-papel); border:.12em solid var(--rv-tinta); display:grid; place-items:center }
.rv-dia-sello .ico svg{ width:1.8em; height:1.8em }
.rv-dia-sello .lugar{ font-family:"Caveat",cursive; font-size:1.7em; line-height:1; padding:0 .2em }
.rv-dia-que{ margin-top:.5em; font-size:1.05em; line-height:1.2; color:var(--rv-tinta2); text-align:center; min-height:2.4em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
/* Fila 3: qué hicimos, dónde comimos y la firma */
.rv-fila3{ display:grid; gap:1.8em; align-items:stretch; min-height:0 }
.rv-hicimos{ background:#FBF0D3 }
.rv-comimos{ background:#FCE6DC }
.rv-porciudad{ display:grid; grid-template-columns:1fr 1fr; gap:.9em 2em; align-items:start }
.rv-grupo{ display:flex; flex-direction:column; gap:.35em; min-width:0 }
.rv-ciu{ display:flex; align-items:center; gap:.5em; white-space:nowrap }
.rv-ciu .n{ width:2em; height:2em; border-radius:50%; background:var(--rv-tinta); color:#fff; display:grid; place-items:center; font-family:var(--f-mono); font-size:.85em; font-weight:600 }
.rv-ciu b{ font-family:var(--f-tit); font-weight:800; font-size:1.4em }
.rv-chips{ display:flex; flex-wrap:wrap; gap:.4em }
.rv-chip{ display:inline-flex; align-items:center; gap:.4em; font-size:1.05em; line-height:1; padding:.45em .8em .45em .45em; border-radius:2em; background:var(--rv-papel); border:.12em solid var(--rv-tinta); font-weight:500 }
.rv-chip i{ width:1.8em; height:1.8em; border-radius:50%; display:grid; place-items:center; border:.1em solid var(--rv-tinta) }
.rv-chip i svg{ width:1.1em; height:1.1em }
.rv-chip.act i{ background:#FBF0D3 }
.rv-chip.vis i{ background:#DCE8F7 }
.rv-rest{ display:flex; align-items:center; gap:.7em; background:var(--rv-papel); border:.12em solid var(--rv-tinta); border-radius:1.1em; padding:.6em .9em; margin-bottom:.6em }
.rv-rest-f{ flex-shrink:0; width:4.6em; height:4.6em; border-radius:50%; background:var(--rv-tinta); color:#fff; display:grid; place-items:center; text-align:center; font-family:var(--f-mono); font-size:.95em; font-weight:600; line-height:1.05; padding:.3em }
.rv-rest b{ display:block; font-size:1.3em }
.rv-rest small{ display:block; font-family:"Caveat",cursive; font-size:1.5em; color:var(--rv-tinta2); line-height:1 }
.rv-firma{ width:22em; display:flex; flex-direction:column; justify-content:flex-end; align-items:center }
.rv-firma.sola{ width:auto; align-items:flex-end }
.rv-fam{ width:22em; height:14em; overflow:hidden; position:relative }
.rv-fam img{ position:absolute; width:33.4em; max-width:none; left:-5.96em; top:-6.87em }
.rv-dias-tira.pocos .rv-dia-sello .bm{ width:9em; height:9em }
.rv-dias-tira.pocos .rv-dia-sello .lugar{ font-size:3em }
.rv-dias-tira.pocos .rv-dia-sitio{ font-size:1.8em }
.rv-dias-tira.pocos .rv-dia-que{ font-size:1.4em }

/* ══ Retos viajeros (src/viajes/Retos.tsx · maqueta referencia/lienzo/RetosViajeros.html) ══ */
.rt-svg{ display:block; width:100%; height:100% }
.rt-svg svg{ display:block; width:100%; height:100% }
.rt-arriba{ display:grid; gap:14px }
@media (min-width:900px){ .rt-arriba{ grid-template-columns:1.1fr 1fr; align-items:start } .rt-arriba .rt-rot:first-child{ margin-top:0 } }
.rt-marcador{ position:relative; background:#FFFDF8; border:1.5px solid var(--tx); border-radius:22px; padding:16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; overflow:hidden; color:var(--tx) }
.rt-anillo{ position:relative; width:96px; height:96px }
.rt-anillo svg{ width:100%; height:100%; transform:rotate(-90deg) }
.rt-num{ position:absolute; inset:0; display:grid; place-items:center; text-align:center }
.rt-num b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:28px; line-height:.9; letter-spacing:-.03em }
.rt-num span{ font-family:var(--f-mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.rt-rango{ min-width:0 }
.rt-rango small{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tx2) }
.rt-rango b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:24px; letter-spacing:-.02em; line-height:1.05; margin:2px 0 }
.rt-rango i{ display:block; font-style:normal; font-family:"Caveat",cursive; font-size:18px; color:var(--tx2); line-height:1.1 }
.rt-escalera{ display:flex; gap:4px; margin-top:10px }
.rt-escalera span{ flex:1; height:8px; border-radius:4px; background:#E6E8E3 }
.rt-escalera span.si{ background:#2E6E4E }
.rt-escalera span.aqui{ background:linear-gradient(90deg,#2E6E4E 50%,#E6E8E3 50%) }
.rt-escalera-n{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:9px; color:var(--tx3); margin-top:4px; text-transform:uppercase; letter-spacing:.04em }
.rt-rot{ display:flex; align-items:center; gap:10px; margin:24px 0 12px; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tx2) }
.rt-rot::after{ content:""; flex:1; border-top:1.5px dashed var(--borde) }
.rt-atiro{ display:grid; gap:8px }
.rt-atiro > div{ display:flex; align-items:center; gap:10px; background:var(--sup); border:1px solid var(--borde-s); border-radius:14px; padding:9px 12px; font-size:14px; line-height:1.3; color:var(--tx) }
.rt-ic{ width:34px; height:34px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; border:1.3px solid var(--tx); padding:6px; box-sizing:border-box }
.rt-atiro small{ display:block; font-family:"Caveat",cursive; font-size:17px; color:var(--tx2) }
/* Los grupos */
.rt-rejilla{ display:block }
@media (min-width:1100px){ .rt-rejilla{ columns:2; column-gap:16px } .rt-rejilla .rt-grupo{ break-inside:avoid; margin-top:0; margin-bottom:16px } }
.rt-grupo{ border-radius:22px; padding:16px; margin-top:14px; color:var(--tx) }
.rt-grupo-cab{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.rt-med{ width:46px; height:46px; border-radius:50%; background:#FFFDF8; border:1.5px solid var(--tx); display:grid; place-items:center; flex-shrink:0; padding:8px; box-sizing:border-box }
.rt-grupo-cab b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:20px; letter-spacing:-.01em; line-height:1.05 }
.rt-grupo-cab small{ display:block; font-family:"Caveat",cursive; font-size:18px; color:var(--tx2); line-height:1 }
.rt-pc{ margin-left:auto; text-align:right }
.rt-pc b{ font-size:26px !important; letter-spacing:-.03em }
.rt-pc span{ font-family:var(--f-mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.rt-reto{ background:rgba(255,253,248,.88); border-radius:16px; padding:12px; margin-top:10px }
.rt-reto-cab{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-bottom:8px }
.rt-reto-cab b{ font-family:var(--f-tit); font-weight:800; font-size:15px }
.rt-reto-n{ margin-left:auto; font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--tx2) }
.rt-hecho{ display:inline-flex; align-items:center; font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#2E6E4E; border-radius:8px; padding:2px 7px }
.rt-barra{ height:10px; border-radius:5px; background:#E6E8E3; overflow:hidden; margin:0 0 10px }
.rt-barra i{ display:block; height:100%; border-radius:5px; background:#2E6E4E }
.rt-barra.completa i{ background:repeating-linear-gradient(135deg,#2E6E4E 0 8px,#3F8A64 8px 16px) }
.rt-nota{ margin:4px 0 8px; font-size:13px; color:var(--tx2) }
/* Las láminas */
.rt-laminas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.rt-laminas.cinco{ grid-template-columns:repeat(5,minmax(0,1fr)) }
.rt-laminas.seis{ grid-template-columns:repeat(3,minmax(0,1fr)) }
/* En el ordenador, las aventuras en cinco por fila: en tres salían enormes. */
@media (min-width:900px){ .rt-laminas.seis{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.rt-lam{ position:relative; text-align:center; padding:0; border:0; background:none; font:inherit; color:var(--tx); cursor:pointer }
.rt-dib{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; border-radius:14px; border:1.5px solid var(--tx); background:#fff; overflow:hidden; padding:9%; box-sizing:border-box }
.rt-lam b{ display:block; font-size:11.5px; font-weight:600; line-height:1.15; margin-top:5px }
.rt-lam small{ display:block; font-family:"Caveat",cursive; font-size:14px; color:var(--tx2); line-height:1 }
.rt-lam.no .rt-dib{ background:#F4F4F1; border-style:dashed; border-color:#A9AFA9 }
.rt-lam.no .rt-svg{ filter:grayscale(1); opacity:.42 }
.rt-lam.no b{ color:var(--tx3); font-weight:500 }
.rt-lam.cerca .rt-dib{ border-color:#B8732A; border-style:dashed; background:#FFF8EA }
.rt-lam.cerca .rt-svg{ filter:grayscale(.6); opacity:.65 }
.rt-lam.cerca small{ color:#9A6A22 }
.rt-sello{ position:absolute; right:-5px; top:-6px; width:26px; height:26px; border-radius:50%; background:#2E6E4E; color:#fff; display:grid; place-items:center; font-size:14px; font-weight:700; border:2px solid #FFFDF8; transform:rotate(-12deg); box-shadow:0 2px 4px rgba(0,0,0,.15) }
.rt-marcar{ position:absolute; left:50%; bottom:5px; transform:translateX(-50%); font-family:var(--f-mono); font-size:8.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:#fff; border:1px solid #B8732A; color:#9A6A22; border-radius:7px; padding:1px 5px; white-space:nowrap }
/* Continentes y hemisferios */
.rt-mundo{ border-radius:12px; overflow:hidden; background:#EAF1F6 }
.rt-mundo svg{ display:block; width:100%; height:auto }
.rt-conti{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:8px; text-align:center }
.rt-conti button{ border-radius:10px; padding:6px 1px; font:600 10px/1.15 var(--f-txt); border:1.3px solid var(--tx); color:var(--tx); cursor:pointer }
.rt-conti button.no{ border:1.3px dashed #A9AFA9; color:var(--tx3); font-weight:500; background:transparent !important }
.rt-conti i{ display:block; font-style:normal; font-size:13px }
.rt-hemis{ display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center }
.rt-hemis svg{ width:86px; height:86px }
.rt-hemis p{ margin:0; font-size:13px; line-height:1.5; color:var(--tx2) }
.rt-enlace{ display:block; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer }
.rt-enlace b{ color:var(--tx) }
/* Patrimonio: el álbum de sellos, tres filas y «Ver los N» */
.rt-niveles{ display:flex; gap:6px; margin:0 0 10px }
.rt-niveles span{ flex:1; text-align:center; border-radius:10px; padding:5px 0; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.04em; border:1.3px solid var(--tx) }
.rt-niveles b{ display:block; font-family:var(--f-tit); font-size:16px; letter-spacing:0 }
.rt-niveles .bronce{ background:#F3DDC6 } .rt-niveles .plata{ background:#E7EAEE } .rt-niveles .oro{ background:#FBEBB5 }
.rt-niveles .falta{ background:#FFF8EA; border-style:dashed; color:var(--tx3) }
/* Los países: banderas redondas con su nombre, en fila; cerradas, dos filas. */
.rt-banderas{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px 6px; margin-top:10px }
@media (min-width:900px){ .rt-banderas{ grid-template-columns:repeat(9,minmax(0,1fr)) } }
.rt-banderas:not(.abierto) > :nth-child(n+13){ display:none }
@media (min-width:900px){ .rt-banderas:not(.abierto) > :nth-child(n+13){ display:flex } .rt-banderas:not(.abierto) > :nth-child(n+19){ display:none } }
.rt-banderas span{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0 }
.rt-banderas img{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1.5px solid #fff; box-shadow:0 0 0 1px var(--tx) }
.rt-banderas small{ font-size:9.5px; line-height:1.1; text-align:center; color:var(--tx2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rt-mares{ display:flex; flex-wrap:wrap; gap:5px }
.rt-mares button{ padding:5px 10px; font-size:11px }
.rt-album{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px }
.rt-album:not(.abierto) > :nth-child(n+16){ display:none }
/* En el ordenador, sellos más pequeños y más por fila (nueve, tres filas cerradas). */
@media (min-width:900px){ .rt-album{ grid-template-columns:repeat(9,minmax(0,1fr)); gap:5px } .rt-album:not(.abierto) > :nth-child(n+16){ display:flex } .rt-album:not(.abierto) > :nth-child(n+28){ display:none } .rt-album button{ aspect-ratio:1/1.1; border-width:3px; outline-offset:-6px; padding:5px 3px } .rt-album span{ font-size:9px; -webkit-line-clamp:2 } .rt-album img{ width:16px; height:16px } }
.rt-album button{ aspect-ratio:3/3.7; background:#fff; border:4px dotted var(--c,#DCE8F7); outline:1px solid var(--tx); outline-offset:-7px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7px 4px; text-align:center; cursor:pointer; font:inherit; color:var(--tx); min-width:0 }
.rt-album img{ width:20px; height:20px; border-radius:50%; border:1px solid var(--tx); object-fit:cover }
.rt-album span{ font-size:9.5px; line-height:1.1; margin-top:4px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical }
.rt-album small{ font-family:var(--f-mono); font-size:8.5px; color:var(--tx2); margin-top:2px }
.rt-ver{ display:block; width:100%; margin-top:10px; text-align:center; font:600 13px var(--f-txt); color:var(--tx); padding:8px; border:1.3px dashed var(--tx); border-radius:12px; background:rgba(255,255,255,.6); cursor:pointer }
/* España */
.rt-espana{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; align-items:center }
.rt-mapa-es{ border-radius:12px; background:#EAF1F6; overflow:hidden }
.rt-mapa-es svg{ display:block; width:100%; height:auto }
.rt-faltan{ font-size:13px; line-height:1.45; color:var(--tx2) }
.rt-chip{ display:inline-block; margin:3px 3px 0 0; padding:3px 9px; border-radius:12px; border:1.3px dashed #B8732A; background:#FFF8EA; color:#9A6A22; font:600 12px var(--f-txt); cursor:pointer }
.rt-chip.mas{ border-style:solid; background:#fff }
/* La hoja de un logro */
.rt-hoja-fondo{ position:fixed; inset:0; z-index:60; background:rgba(19,28,42,.38); display:flex; align-items:flex-end; justify-content:center; padding:12px }
@media (min-width:700px){ .rt-hoja-fondo{ align-items:center } }
.rt-hoja{ width:100%; max-width:420px; background:#FFFDF8; border:1.5px solid var(--tx); border-radius:22px; padding:16px; color:var(--tx); box-shadow:var(--sombra-3) }
.rt-hoja-cab{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.rt-hoja-dib{ width:64px; height:64px; flex-shrink:0; border-radius:14px; border:1.5px solid var(--tx); padding:8px; box-sizing:border-box }
.rt-hoja-cab b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:20px; line-height:1.1 }
.rt-hoja-cab small{ display:block; font-family:"Caveat",cursive; font-size:18px; color:var(--tx2); line-height:1.1; margin-top:2px }

/* Retos · la fila de las seis colecciones bajo el rango, las medallas de los
   grupos y quién lo hizo (maqueta referencia/lienzo/RetosMedallas.html). */
.rt-medallas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:14px 6px; margin-top:14px; background:#FFFDF8; border:1.5px solid var(--tx); border-radius:22px; padding:16px 8px 14px }
.rt-med-fila{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0; border:0; background:none; font:inherit; color:var(--tx); cursor:pointer }
.rt-disco{ position:relative; display:block; width:88px; height:88px }
.rt-disco-anillo{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.rt-cara{ position:absolute; inset:9px; border-radius:50%; border:1.8px solid var(--tx); overflow:hidden }
.rt-cara::after, .rt-medalla-g::after{ content:""; position:absolute; inset:4px; border-radius:50%; border:1.2px dashed rgba(27,42,65,.35); pointer-events:none }
.rt-cara .rt-svg, .rt-medalla-g .rt-svg{ width:100%; height:100% }
.rt-estrella{ position:absolute; right:-2px; top:2px; width:26px; height:26px; border-radius:50%; background:#2E6E4E; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; border:2px solid #FFFDF8; transform:rotate(-12deg) }
.rt-med-fila b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:13px; line-height:1.1; margin-top:6px }
.rt-med-pc{ display:block; font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--tx2); margin-top:2px }
.rt-med-pc i{ font-style:normal; color:#2E6E4E }
.rt-medalla-g{ position:relative; width:62px; height:62px; flex-shrink:0; border-radius:50%; border:1.8px solid var(--tx); overflow:hidden }
.rt-grupo{ scroll-margin-top:80px }
.rt-quien{ margin:4px 0 12px }
.rt-quien > span{ display:block; margin-bottom:6px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.rt-quien div{ display:flex; flex-wrap:wrap; gap:6px }
.rt-quien button{ height:34px; padding:0 14px; border-radius:17px; border:1.3px solid var(--borde); background:var(--sup); color:var(--tx); font:500 14px var(--f-txt); cursor:pointer }
.rt-quien button.on{ background:var(--tx); border-color:var(--tx); color:#fff; font-weight:600 }
.rt-cuando select, .rt-cuando input{ display:block; width:100%; margin-top:8px; height:40px; box-sizing:border-box; border:1.3px solid var(--borde); border-radius:12px; padding:0 10px; font:14px var(--f-txt); color:var(--tx); background:var(--sup) }

/* ══════════ La barra del móvil, flotante y con burbuja (barra-flotante.js) ══════════
   Como la de Apple Music: flota sobre la página, translúcida (el contenido se
   ve detrás, desenfocado), y el área activa la marca una burbuja que se
   desliza de un botón a otro —y sigue al dedo si se arrastra por la barra—.
   Al bajar por la página se encoge (sin nombres); al subir, vuelve. */
.nav-burbuja{ display:none }
@media (max-width:899px){
  :root{ --barra-areas:calc(72px + var(--barra-pie)) }
  nav{
    left:10px; right:10px; bottom:calc(var(--barra-pie) + 8px);
    padding:5px; gap:0; border:0; border-radius:32px;
    background:rgba(251,249,244,.6);
    -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
    box-shadow:0 12px 32px rgba(27,42,65,.20), 0 0 0 .5px rgba(27,42,65,.14), inset 0 1px 0 rgba(255,255,255,.85);
    touch-action:none; -webkit-user-select:none; user-select:none;
  }
  nav button, nav .nav-todas{
    position:relative; z-index:1; min-height:54px; border-radius:26px;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    color:var(--tinta); -webkit-tap-highlight-color:transparent;
    transition:min-height .3s ease, transform .2s ease;
  }
  /* El activo, bien a la vista: burbuja azul tinta con el dibujo y el nombre
   * en claro (los iconos claros de iconos/claro/, como en el menú de siempre). */
  nav button.on, nav .nav-todas.on{ color:var(--papel) !important; font-weight:700 }
  nav button.on > i .ico-osc{ display:none }
  nav button.on > i .ico-clr{ display:block }
  nav .nav-corto{ max-height:14px; transition:opacity .2s ease, max-height .3s ease }
  .nav-burbuja{
    display:block; position:absolute; z-index:0; left:0; top:5px; bottom:5px; width:0; border-radius:26px;
    background:var(--tinta);
    box-shadow:0 4px 14px rgba(27,42,65,.35);
    pointer-events:none; opacity:0;
    transition:transform .55s cubic-bezier(.34,1.42,.5,1), width .35s ease, scale .22s ease, opacity .2s ease, background .2s ease;
  }
  .nav-burbuja.quieta{ transition:scale .22s ease, opacity .2s ease, background .2s ease }
  /* Arrastrando: la burbuja crece y se vuelve más de cristal, como una lupa. */
  nav.arrastrando .nav-burbuja{
    scale:1.14 1.1; background:rgba(27,42,65,.82);
    box-shadow:0 8px 22px rgba(27,42,65,.35), inset 0 0 0 1.5px rgba(255,255,255,.35);
  }
  /* Mientras se arrastra, el que queda bajo el dedo es el que se ve en claro. */
  nav.arrastrando button.on:not(.bajo-dedo), nav.arrastrando .nav-todas.on:not(.bajo-dedo){ color:var(--tinta) !important }
  nav.arrastrando button.on:not(.bajo-dedo) > i .ico-osc{ display:block }
  nav.arrastrando button.on:not(.bajo-dedo) > i .ico-clr{ display:none }
  nav.arrastrando button.bajo-dedo{ color:var(--papel) !important }
  nav.arrastrando button.bajo-dedo > i .ico-osc{ display:none }
  nav.arrastrando button.bajo-dedo > i .ico-clr{ display:block }
  nav button.bajo-dedo{ transform:scale(1.08) }
  /* Con el teclado o un desplegable abierto, fuera de la vista (barra-flotante.js). */
  nav{ transition:opacity .2s ease, translate .25s ease }
  nav.con-teclado{ opacity:0; translate:0 24px; pointer-events:none }
  /* Encogida al bajar por la página. */
  nav.compacta button, nav.compacta .nav-todas{ min-height:42px }
  nav.compacta .nav-corto{ opacity:0; max-height:0 }
  @media (prefers-reduced-motion:reduce){
    .nav-burbuja, nav button, nav .nav-corto{ transition:none }
  }
}

/* ══════════ Tirar hacia abajo para actualizar (tirar-actualizar.js), solo móvil ══════════ */
.tirar-ind{ display:none }
@keyframes tirarGira{ to{ transform:rotate(360deg) } }
@media (max-width:899px){
  /* Sin el gesto nativo de Chrome en Android: el nuestro es el único. */
  html, body{ overscroll-behavior-y:contain }
  .tirar-ind{
    display:grid; place-items:center; position:fixed; z-index:4000; left:50%; top:calc(env(safe-area-inset-top) + 8px);
    width:40px; height:40px; border-radius:50%; background:#FFFFFF; color:var(--tinta);
    box-shadow:0 4px 14px rgba(27,42,65,.25), 0 0 0 .5px rgba(27,42,65,.12);
    transform:translate(-50%, -48px); opacity:0; pointer-events:none;
  }
  .tirar-ind.listo, .tirar-ind.girando{ background:var(--sello); color:#FFFFFF }
  .tirar-ind.vuelve{ transition:transform .25s ease, opacity .25s ease }
  .tirar-ind.girando{ transition:transform .2s ease }
  .tirar-ind.girando svg{ animation:tirarGira .8s linear infinite }
}

/* Buscar en Lightroom las fotos de un viaje (src/viajes/BuscarFotosLR.tsx) */
.lr-buscar{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:6px 0 14px }
.lr-buscar .vj-nota, .lr-buscar .vj-error{ margin:0 }
.lr-buscar-tira{ display:flex; gap:4px; flex-wrap:wrap; align-items:center }
.lr-buscar-tira img{ width:56px; height:56px; object-fit:cover; border-radius:6px; display:block; background:var(--sup2) }
.lr-buscar-tira span{ font:600 12px var(--f-mono); color:var(--tx2); padding:0 6px }