/* 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 }

/* El telón de teatro pinta sobre fondo oscuro: ahí la etiqueta necesita
   contraste propio. */
.telon form.alta label{ color:#E8D9C0 }

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

/* Las cajas de la estantería y el "+ Añadir juego" eran <div> con role="button"
   y ahora son <button> de verdad (teclado y lector de pantalla gratis). Los
   botones no heredan tipografía ni alineación del padre, así que hay que
   devolvérselas o el título de la caja sale centrado y con la fuente del
   sistema. El padding ya lo resetea el `*` de 01-base.css. */
.jdm-caja,
.jdm-caja-nueva{
  font:inherit; color:inherit; text-align:left; -webkit-appearance:none; appearance:none;
}
.jdm-caja-nueva{ text-align:center }


/* ══════════ Juegos: ficha y estado "de otra persona" ══════════ */

/* Los cuatro estados se pintan como PEGATINA redondeada, al estilo de las de
   un videoclub: pequeñas, arriba a la derecha, y siempre visibles tanto en la
   estantería como en la ficha del juego. Antes eran galones con cola (::after)
   y solo tres estados; ahora la forma es la misma para los cuatro y lo que
   cambia es el color, que es lo que se lee de un vistazo. */
.jdm-ribbon{
  border-radius:999px; right:6px; padding:2px 8px;
}
.jdm-ribbon::after{display:none}
.jdm-ribbon span{color:#fff; position:relative}

.jdm-ribbon.tienes{background:#2E6E4E}
/* Verde vivo, claramente distinto del verde oscuro de "en la estantería":
   uno es el estado normal y el otro una intención de compra. */
.jdm-ribbon.quieres{background:#3DBB5E}
/* Ámbar de la paleta cálida de la app: fue vuestro y ya no lo es. Con texto
   oscuro, que sobre ámbar se lee mucho mejor que el blanco. */
.jdm-ribbon.fuera{background:#D8973C}
.jdm-ribbon.fuera span{color:#3B2408}
.jdm-ribbon.ajeno{background:#C62828}

/* Los datos del juego, en UNA línea de etiquetas pequeñas en lugar de las ocho
   filas apiladas de antes. Si no caben, la línea se desplaza en horizontal:
   preferimos eso a partirla en dos o a recortar datos. */
.jdm-ficha-badges{
  display:flex; flex-wrap:nowrap; gap:4px; align-items:center;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:2px 0 8px; margin-bottom:4px;
  scrollbar-width:none;
}
.jdm-ficha-badges::-webkit-scrollbar{display:none}
.jdm-ficha-badges .jdm-badge{flex:0 0 auto; font-size:.54rem; padding:3px 6px}

/* Colores de las etiquetas que solo existen en la ficha. */
.jdm-badge.dur{background:#B79CE8; color:#231239}
.jdm-badge.dif{background:#F2A65A; color:#3A1D00}
.jdm-badge.coop{background:#7FD1AE; color:#04321D}
.jdm-badge.mejor{background:#E8D9A0; color:#3B2408}
.jdm-badge.estado{background:rgba(255,255,255,.9); color:#3B2408}
.jdm-badge.estado.ajeno{background:#C62828; color:#fff}
.jdm-badge.estado.fuera{background:#8A8A8A; color:#fff}

/* Las partidas jugadas pasan a ser el dato con más peso de la ficha: es lo que
   de verdad se consulta de un juego, y antes quedaba escondido en un h4 debajo
   de ocho filas de datos técnicos. */
.jdm-partidas-destacado{
  display:flex; align-items:center; gap:12px;
  background:rgba(0,0,0,.24); border-radius:12px;
  padding:12px 14px; margin-bottom:12px;
}
.jdm-partidas-destacado b{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:2.1rem;
  line-height:1; color:var(--jdm-acento);
}
.jdm-partidas-destacado span{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:#FFDDA8; flex:1;
}
.jdm-partidas-destacado .jdm-btn{flex:0 0 auto}

/* Los botones de acción reparten el ancho completo de la línea. Al sacar
   "Registrar partida" de esta fila —ahora vive junto al contador de partidas—
   los dos que quedaban se veían pequeños y descolgados a la izquierda. */
.jdm-btn-row .jdm-btn{flex:1 1 0; text-align:center; padding:11px 14px; font-size:.8rem}
/* El de registrar, en cambio, NO se estira: va pegado al contador. */
.jdm-partidas-destacado .jdm-btn{flex:0 0 auto}

/* ── Ordenar la colección ──
   Un "Ordenar por" pequeño y con palabras, a la derecha. Sustituye a la fila
   de chips con iconos, que no se entendía. */
.jdm-orden-fila{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  margin-bottom:10px;
}
.jdm-orden-fila label{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.06em; color:#FFEDD3;
}
.jdm-orden-fila select{
  width:auto; max-width:230px; font-size:.78rem; padding:6px 8px; border-radius:9px;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(0,0,0,.25); color:#FFEDD3;
}

/* ══════════ 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 ══════════ */
.mem{padding-bottom:24px}
.mem-intro{display:flex; align-items:end; justify-content:space-between; gap:18px; margin:8px 0 14px}
.mem-intro > div span,.mem-hero-fecha small,.mem-estacion-cab small{
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave)
}
.mem-intro h2{font-family:'Bricolage Grotesque',sans-serif; font-size:1.7rem; line-height:1; margin-top:3px}
.mem-intro p{max-width:42ch; font-size:.76rem; line-height:1.45; color:var(--tinta-suave); text-align:right}
.mem-tabs{display:flex; gap:4px; padding:4px; margin-bottom:14px; border:1.5px solid var(--linea); border-radius:999px; background:var(--blanco)}
.mem-tabs button{flex:1; border:0; border-radius:999px; background:transparent; color:var(--tinta); padding:8px 7px; font-family:'IBM Plex Mono',monospace; font-size:.64rem; cursor:pointer}
.mem-tabs button.on{background:var(--tinta); color:var(--papel)}
.mem-hoy{display:block!important; background:var(--blanco); border:1.5px solid var(--linea); border-left:4px solid var(--sello); border-radius:var(--radio); padding:14px; margin-bottom:20px}
.mem-hero-fecha{display:flex; align-items:baseline; gap:10px}
.mem-hero-fecha > span{font-family:'Bricolage Grotesque',sans-serif; color:var(--sello); font-size:1.2rem; font-weight:800}
.mem-hoy > h3{font-family:'Bricolage Grotesque',sans-serif; font-size:1.35rem; line-height:1.12; margin:6px 0 12px}
.mem-recuerdos-dia{display:grid; gap:9px}
.mem-recuerdo-dia{display:grid; grid-template-columns:minmax(130px,34%) minmax(0,1fr); min-height:150px; overflow:hidden; border:1.5px solid var(--linea); border-radius:12px; background:var(--papel)}
.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(--linea)}
.mem-recuerdo-foto img{display:block; width:100%; height:100%; object-fit:cover}
.mem-recuerdo-cuerpo{padding:13px 14px}
.mem-recuerdo-cuerpo > small{font-family:'IBM Plex Mono',monospace; color:var(--sello); font-size:.58rem; font-weight:600; letter-spacing:.06em}
.mem-recuerdo-cuerpo h4{font-family:'Bricolage Grotesque',sans-serif; font-size:1.3rem; line-height:1.08; margin:3px 0 4px}
.mem-recuerdo-cuerpo > p{font-size:.76rem; line-height:1.4; color:var(--tinta-suave)}
.mem-hoy-alternativo .mem-viaje{margin:0}
.mem-sin-coincidencia{font-size:.7rem; line-height:1.45; margin:9px 2px 0; color:var(--tinta-suave)}
.mem-conexiones{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px}
.mem-conexiones button,.mem-conexiones span{display:flex; align-items:center; gap:5px; border:1.5px solid var(--linea); border-radius:999px; padding:6px 9px; background:var(--papel); color:var(--tinta); font-family:'IBM Plex Mono',monospace; font-size:.59rem}
.mem-conexiones button{cursor:pointer}.mem-conexiones button:hover{border-color:var(--tinta)}
.mem-conexiones i{font-style:normal; color:var(--sello)}
.mem-abrir{border:0; background:transparent; color:var(--sello); font-family:'IBM Plex Mono',monospace; font-size:.65rem; font-weight:600; cursor:pointer; padding:4px 0}
.mem-bloque{display:block!important; margin:0 0 20px}
.mem-titulo{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:9px}
.mem-titulo > div{display:flex; align-items:baseline; gap:8px}
.mem-titulo span{font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--sello); font-weight:600}
.mem-titulo h3{font-family:'Bricolage Grotesque',sans-serif; font-size:1.15rem}
.mem-titulo > button{border:0; background:transparent; color:var(--tinta-suave); font-family:'IBM Plex Mono',monospace; font-size:.58rem; cursor:pointer}
.mem-linea{position:relative; padding-left:16px}
.mem-linea::before{content:""; position:absolute; left:3px; top:8px; bottom:8px; border-left:2px solid var(--sello)}
.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; margin-bottom:7px; text-align:left; font:inherit; color:inherit; cursor:pointer; border:1.5px solid var(--linea); border-radius:11px; background:var(--blanco); position:relative}
.mem-linea .mem-viaje::before{content:""; position:absolute; left:-18px; top:50%; width:8px; height:8px; margin-top:-5px; border:2px solid var(--sello); border-radius:50%; background:var(--papel)}
.mem-viaje img,.mem-viaje-sin-foto{display:block; width:72px; height:58px; border-radius:8px; object-fit:cover; background:var(--papel)}
.mem-viaje-sin-foto{display:flex; align-items:center; justify-content:center; color:var(--tinta-suave); font-size:1.2rem}
.mem-viaje-texto{min-width:0}.mem-viaje-texto small{display:block; font-family:'IBM Plex Mono',monospace; font-size:.57rem; color:var(--tinta-suave)}
.mem-viaje-texto b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:.9rem; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mem-viaje-texto > span{display:block; font-size:.68rem; color:var(--tinta-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mem-viaje > i{font-style:normal; font-size:1.3rem; color:var(--tinta-suave)}
.mem-estacion{display:block!important; background:var(--tinta); color:var(--papel); border-radius:var(--radio); padding:15px; margin-bottom:18px}
.mem-estacion-cab{display:flex; align-items:baseline; justify-content:space-between}.mem-estacion-cab span{font-family:'Bricolage Grotesque',sans-serif; font-size:1.15rem; font-weight:800}.mem-estacion-cab small{color:var(--ambar)}
.mem-kpis{display:grid; grid-template-columns:repeat(3,1fr); margin:14px 0; text-align:center}
.mem-kpis div+div{border-left:1px solid rgba(253,253,252,.25)}.mem-kpis b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.55rem}.mem-kpis span{font-family:'IBM Plex Mono',monospace; font-size:.57rem; color:var(--ambar); text-transform:uppercase}
.mem-estacion > button{width:100%; border:1.5px solid var(--papel); background:transparent; color:var(--papel); border-radius:9px; padding:8px; font-family:'IBM Plex Mono',monospace; font-size:.62rem; cursor:pointer}
.mem-anio-grupo{display:grid!important; grid-template-columns:72px minmax(0,1fr); gap:12px; padding-bottom:12px}
.mem-anio-marca{border-right:2px solid var(--sello); padding-right:12px; text-align:right}.mem-anio-marca b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.25rem}.mem-anio-marca span{font-family:'IBM Plex Mono',monospace; font-size:.52rem; color:var(--tinta-suave)}
.mem-selector{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:8px}.mem-selector label{font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase; color:var(--tinta-suave)}.mem-selector select{border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta); border-radius:8px; padding:7px 10px; font:inherit}
.mem-anuario-portada{background:var(--sello); color:#fff; border-radius:var(--radio); padding:18px; margin-bottom:9px}.mem-anuario-portada small{display:block; font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.14em}.mem-anuario-portada b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:3.8rem; line-height:1; margin:10px 0 2px}.mem-anuario-portada span{font-size:.78rem; opacity:.85}
.mem-anuario-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:9px}.mem-anuario-kpis div{background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px; padding:9px 4px; text-align:center}.mem-anuario-kpis b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.15rem}.mem-anuario-kpis span{font-family:'IBM Plex Mono',monospace; font-size:.52rem; color:var(--tinta-suave); text-transform:uppercase}
.mem-meses{height:105px; display:flex; align-items:end; gap:5px; padding:10px 9px 7px; margin-bottom:20px; border:1.5px solid var(--linea); border-radius:var(--radio); background:var(--blanco)}
.mem-meses div{display:flex; flex:1; height:100%; align-items:center; justify-content: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(--visado)}.mem-meses small{font-family:'IBM Plex Mono',monospace; font-size:.5rem; color:var(--tinta-suave)}
@media(max-width:560px){.mem-intro{display:block}.mem-intro p{text-align:left;margin-top:6px}.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-tabs button{font-size:.57rem}}
@media(min-width:900px){.mem-hoy{padding:18px}.mem-hoy > h3{font-size:1.65rem}.mem-linea{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.mem-linea::before,.mem-linea .mem-viaje::before{display:none}.mem-linea{padding-left:0}.mem-anuario-kpis{grid-template-columns:repeat(6,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 }

/* Filtro de viajeros. "Todos los viajes" se separa del resto con un hueco y
   otro color porque NO es lo mismo que marcar a las tres personas: es la
   confusión que había que evitar. */
.vj-filtro{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:10px 12px; margin-bottom:12px;
}
.vj-filtro-fila{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px }
.vj-filtro-rotulo{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-suave);
}
.vj-filtro-fila b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.9rem }
.vj-filtro-nota{ font-size:.72rem; color:var(--tinta-suave); margin:8px 0 0 }

.vj-chips{ display:flex; flex-wrap:wrap; gap:6px }
.vj-chip{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600;
  padding:7px 12px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--tinta); background:var(--papel); color:var(--tinta);
}
/* Variante de UNA línea (el filtro de la pestaña Viajes): rótulo y chips
   compactos en la misma fila, con scroll lateral si algún día no cupieran. */
.vj-chips-linea{
  flex-wrap:nowrap; align-items:center; gap:4px;
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.vj-chips-linea::-webkit-scrollbar{ display:none }
.vj-chips-linea .vj-filtro-rotulo{ flex-shrink:0; margin-right:2px }
.vj-chips-linea .vj-chip{ font-size:.6rem; padding:5px 9px; flex-shrink:0 }
.vj-chips-linea .vj-chip.todos{ margin-right:2px }
.vj-chip.on{ background:var(--tinta); color:var(--papel) }
.vj-chip.todos{ border-style:dashed; margin-right:6px }
.vj-chip.todos.on{ background:var(--visado); border-color:var(--visado); color:#fff }

/* Las cuatro en una sola fila incluso en móvil: más pequeñas que antes
   (menos relleno, letra más chica) para que quepan sin apretarse. */
.vj-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:12px }
.vj-kpi{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px;
  padding:6px 2px; text-align:center; min-width:0;
}
.vj-kpi b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.05rem; line-height:1.1 }
.vj-kpi span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.52rem; text-transform:uppercase;
  letter-spacing:.02em; color:var(--tinta-suave); line-height:1.25;
}

/* Tarjeta de viaje. Es un <button> porque se pulsa: teclado y lector de
   pantalla gratis, sin role ni tabindex a mano. */
.vj-tarjeta{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--blanco); border:1.5px solid var(--linea); border-left:4px solid var(--sello);
  border-radius:var(--radio); padding:11px 13px; margin-bottom:8px; font:inherit; color:inherit;
}
.vj-tarjeta.abierta{ cursor:default; border-left-color:var(--visado); margin-bottom:14px }
.vj-fechas{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  color:var(--tinta-suave); margin-bottom:3px;
}
.vj-paises{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.95rem; margin:0 }
.vj-viajeros{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.64rem;
  color:var(--visado); margin-top:3px;
}

.vj-h4{ font-family:'Bricolage Grotesque',sans-serif; font-size:.85rem; margin:16px 0 8px }
.vj-nota{ font-size:.74rem; color:var(--tinta-suave); 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;
}

.vj-dia{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:12px;
  padding:10px 12px; margin-bottom:8px; font-size:.82rem;
}
.vj-dia b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.85rem }
.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(--blanco); border:1.5px dashed var(--visado); border-radius:10px;
  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) }
.vj-detectado>button{
  flex-shrink:0; font-size:.72rem; font-weight:700; cursor:pointer;
  background:var(--visado); color:#fff; border:1.5px solid var(--visado); border-radius:8px; padding:7px 10px;
}
/* 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) }

/* El formulario con la estética de los viajes: papel con borde troquelado (el
   dashed de los formularios de alta), rótulo tipo documento y campos amplios. */
.vj-form{
  background:var(--blanco); border:1.5px dashed var(--tinta); border-radius:var(--radio); padding:14px;
}
.vj-form strong{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave);
  margin-bottom:6px; padding-bottom:8px; border-bottom:1.5px solid var(--linea);
}
.vj-form label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta-suave); margin:12px 0 5px;
}
.vj-form input, .vj-form select{
  width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.88rem;
  padding:9px 10px; border-radius:8px; border:1.5px solid var(--linea); background:var(--papel); color:var(--tinta);
}
/* 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:'Instrument Sans',sans-serif; font-size:.9rem;
  line-height:1.5; padding:10px 11px; border-radius:8px; border:1.5px solid var(--linea);
  background:var(--papel); color:var(--tinta); min-height:110px; resize:vertical;
}
.vj-form input:focus, .vj-form select:focus, .vj-form textarea:focus{ outline:2px solid var(--ambar); outline-offset:1px }
.vj-form .dos{ display:flex; gap:8px }
.vj-form .dos > div{ flex:1 }

/* ── 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(--linea); border-radius:12px; background:var(--papel); 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:#DDEAE2; border-radius:0 }
.cal-rango-dia.punta{ background:var(--visado); 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;
}

/* ── Tarjeta de embarque ──
   Cada viaje del cuaderno es una tarjeta de embarque: franja superior de
   compañía, ruta en códigos grandes, datos en columnas de documento y talón
   derecho troquelado con el código de barras. El troquel son dos muescas
   circulares del color del papel de fondo, recortadas sobre la tarjeta. */
.bp{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  position:relative; overflow:hidden; margin-bottom:10px; padding:0 64px 0 0;
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:14px;
}
.bp-cab{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--tinta); color:var(--papel); padding:5px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
}
/* La "aerolínea", chiquitita y fina: es decoración, no dato. */
.bp-cab > span{ font-size:.5rem; font-weight:400; letter-spacing:.2em; opacity:.75 }
.bp-cab i{ font-style:normal; letter-spacing:0 }
/* El lápiz de la franja: editar el viaje sin entrar en él. */
.bp-edit{
  border:none; background:rgba(242,244,241,.14); color:var(--papel);
  border-radius:6px; padding:2px 7px; cursor:pointer; font-size:.72rem; line-height:1.4;
}
.bp-edit:hover{ background:rgba(242,244,241,.28) }
.bp-cuerpo{ padding:10px 12px 12px; position:relative }
/* El sello de aduana: cuántas paradas tiene ya el viaje, en la esquina de la
   parte blanca de la tarjeta — azul marino (--tinta) y ligeramente girado,
   como un timbrado de verdad. Apagado y a rayas cuando el viaje sigue vacío,
   para que se note de un vistazo cuál falta por rellenar. */
.bp-sello-paradas{
  position:absolute; top:8px; right:10px; z-index:1;
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--tinta);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--tinta); transform:rotate(-14deg); opacity:.8;
  font-family:'IBM Plex Mono',monospace; line-height:1.1;
}
.bp-sello-paradas b{ font-size:.92rem }
.bp-sello-paradas small{ font-size:.4rem; text-transform:uppercase; letter-spacing:.02em }
.bp-sello-paradas.sin{ opacity:.35; border-style:dashed }
.bp-ruta{ display:flex; align-items:center; gap:10px; margin-bottom:2px }
/* Jerarquía a favor del NOMBRE del viaje: los códigos IATA bajan un punto y el
   nombre sube y se tiñe del rojo de sello — es lo que se busca en la lista. */
.bp-cod{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.22rem; letter-spacing:.02em; line-height:1.1; color:var(--tinta-suave) }
.bp-avion{ color:var(--tinta-suave); font-size:.8rem; flex-shrink:0 }
.bp-nombre{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.18rem; margin:3px 0 8px; color:var(--sello) }
.bp-datos{ display:flex; flex-wrap:wrap; gap:10px 18px }
.bp-datos span{ display:flex; flex-direction:column; gap:1px }
.bp-datos i{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:.52rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave);
}
.bp-datos b{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:600 }
.bp-banderas{ font-size:.95rem; letter-spacing:2px }
/* Talón derecho: línea de troquel, muescas y código de barras vertical. */
.bp-talon{
  position:absolute; top:0; right:0; bottom:0; width:64px;
  border-left:2px dashed var(--linea);
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--blanco);
}
.bp::before, .bp::after{
  content:""; position:absolute; right:56px; width:16px; height:16px; border-radius:50%;
  background:var(--papel); border:1.5px solid var(--tinta); z-index:1;
}
.bp::before{ top:-9px }
.bp::after{ bottom:-9px }
.bp-barras{
  width:26px; align-self:stretch; margin:12px 0;
  background:repeating-linear-gradient(to bottom, var(--tinta) 0 2px, transparent 2px 5px, var(--tinta) 5px 6px, transparent 6px 10px);
}
.bp-anio{
  writing-mode:vertical-rl; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  letter-spacing:.2em; color:var(--tinta-suave);
}
/* ── Página del artista: cartel de festival (mockup 2026-08-11) ──
   Todo el contenido vive dentro de un marco fosforito con marquesinas arriba
   y abajo y un filete interior a trazos, sobre el fondo oscuro de .rock. Los
   menús de la app quedan fuera y no se tocan. */
.artv{
  position:relative; background:#18121A; border:2px solid #E4FF3B;
  box-shadow:0 0 24px rgba(228,255,59,.18); overflow:hidden; margin-top:10px;
}
.artv-marq{
  display:flex; overflow:hidden; white-space:nowrap; background:#E4FF3B; color:#18121A;
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; padding:4px 0;
}
.artv-marq span{ flex:none; animation:artv-marq 60s linear infinite }
@keyframes artv-marq{ to{ transform:translateX(-100%) } }
@media (prefers-reduced-motion:reduce){ .artv-marq span{ animation:none } }
.artv-int{ position:relative; padding:16px 18px 20px }
.artv-int::before{
  content:""; position:absolute; inset:8px; border:1px dashed rgba(228,255,59,.35);
  pointer-events:none; z-index:1;
}
.artv-miga{
  display:flex; align-items:baseline; gap:6px; position:relative;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.14em;
  color:#B9AEC2; text-transform:uppercase;
}
.artv-miga b{ color:#E4FF3B; font-weight:600 }
.artv-volver{
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  color:#B9AEC2; letter-spacing:inherit; text-transform:inherit;
}
.artv-volver:hover{ color:#E4FF3B }
.artv-corregir{
  margin-left:auto; background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:.56rem; color:#FF3B7A; letter-spacing:.1em; text-transform:uppercase;
}
.artv-hero{ display:flex; gap:20px; align-items:stretch; margin-top:14px; position:relative }
.artv-foto{
  flex:none; width:210px; min-height:190px; background:#241A28 center/cover no-repeat;
  border:1.5px solid #E4FF3B; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:3.4rem; color:#C9BFD6;
}
.artv-dcha{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end }
/* Aire a la derecha del título para que un nombre largo no se meta bajo el
 * sello Nº X (los KPIs de abajo sí aprovechan el ancho entero). */
.artv-tit{ padding-right:150px }
.artv-foto::before, .artv-foto::after{
  content:""; position:absolute; width:14px; height:14px; border:2px solid #FF3B7A;
}
.artv-foto::before{ top:-6px; left:-6px; border-right:none; border-bottom:none }
.artv-foto::after{ bottom:-6px; right:-6px; border-left:none; border-top:none }
.artv-velo{ display:none }
.artv-tit{ min-width:0; flex:1 }
.artv-ceja{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.28em;
  color:#FF3B7A; text-transform:uppercase;
}
.artv-tit h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; line-height:1;
  font-size:clamp(2rem, 5vw, 3.3rem); color:#F4EDE3; margin:4px 0 0;
  text-shadow:0 0 22px rgba(228,255,59,.25); overflow-wrap:anywhere;
}
.artv-generos{
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; color:#B9AEC2; margin-top:6px;
}
.artv-sello{
  position:absolute; top:0; right:0; transform:rotate(2deg); z-index:2;
  border:1.5px solid #FF3B7A; background:rgba(24,18,26,.75); padding:5px 10px;
  text-align:center; max-width:150px;
}
.artv-sello b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.15rem; line-height:1.1; color:#FF3B7A }
.artv-sello span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:.48rem; letter-spacing:.12em; color:#B9AEC2; text-transform:uppercase }
.artv-sello i{ display:block; font-family:'Caveat',cursive; font-style:normal; font-size:.85rem; line-height:1.1; color:#C9BFD6 }
.artv-stats{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:16px; position:relative }
.artv-stats > div{ min-width:0 }
.artv-stats b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.35rem; line-height:1.1; color:#E4FF3B;
}
.artv-stats b em{ font-style:normal; font-size:.62em }
.artv-stats b.rosa{ color:#FF3B7A }
.artv-stats span{
  font-family:'IBM Plex Mono',monospace; font-size:.52rem; letter-spacing:.1em;
  color:#B9AEC2; text-transform:uppercase;
}
.artv-aviso{ margin-top:12px; position:relative }
.artv-div{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; position:relative }
.artv-div::before, .artv-div::after{
  content:""; flex:1; height:5px;
  border-top:1.5px solid #E4FF3B; border-bottom:1px solid rgba(228,255,59,.45);
}
.artv-div i{ color:#FF3B7A; font-style:normal; font-size:.8rem }
.artv-cuerpo{ display:grid; grid-template-columns:1.25fr 1fr; gap:0 24px; position:relative }
.artv-der{ border-left:1px dashed rgba(228,255,59,.35); padding-left:24px; min-width:0 }
.artv-izq{ min-width:0 }
.artv-h{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:#E4FF3B; margin:18px 0 8px;
}
.artv-h i{
  font-family:'Caveat',cursive; font-style:normal; font-weight:500; font-size:.95rem;
  letter-spacing:0; color:#B9AEC2; text-transform:none;
}
.artv-h i.mono{ font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:.58rem; letter-spacing:.06em }
.artv-h .solo-movil{ display:none }
.artv-barras{
  display:flex; align-items:flex-end; gap:4px; height:96px; padding-top:14px;
  border-bottom:1.5px solid #E4FF3B; box-sizing:content-box;
}
.artv-barra{ flex:1; background:#E4FF3B; opacity:.75; position:relative; min-width:0 }
.artv-barra.record{ background:#FF3B7A; opacity:1; box-shadow:0 0 10px rgba(255,59,122,.5) }
.artv-barra.actual{
  background:repeating-linear-gradient(45deg, #E4FF3B, #E4FF3B 3px, transparent 3px, transparent 6px);
  opacity:.85;
}
.artv-barra em{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font:400 .46rem 'IBM Plex Mono',monospace; font-style:normal; color:#B9AEC2; white-space:nowrap;
}
.artv-anios{ display:flex; gap:4px; padding-top:3px }
.artv-anios span{
  flex:1; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:.5rem;
  color:#B9AEC2; white-space:nowrap; min-width:0;
}
.artv-anios span.rosa{ color:#FF3B7A; font-weight:600 }
.artv-cancion{ display:flex; align-items:baseline; gap:9px; padding:6px 0 }
.artv-cancion .n{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; font-weight:600; color:#FF3B7A; width:26px; flex:none }
.artv-cancion b{
  font-family:'Bricolage Grotesque',sans-serif; font-size:1rem; color:#F4EDE3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.artv-cancion .punteado{ flex:1; border-bottom:2px dotted rgba(228,255,59,.25); min-width:14px }
.artv-cancion small{ font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:#B9AEC2; flex:none }
.artv-mas{
  background:none; border:none; padding:6px 0 0; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:500;
  letter-spacing:.1em; color:#FF3B7A; text-transform:uppercase;
}
.artv-discos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px 10px }
.artv-disco{ position:relative; min-width:0 }
.artv-caratula{
  aspect-ratio:1; background:#241A28 center/cover no-repeat;
  border:1px solid rgba(228,255,59,.25); display:flex; align-items:center;
  justify-content:center; color:#4A3A50; font-size:1.4rem;
}
.artv-disco.top .artv-caratula{ border:1.5px solid #FF3B7A }
.artv-disco-etq{
  position:absolute; top:6px; left:0; background:#FF3B7A; color:#18121A;
  font:600 .48rem 'IBM Plex Mono',monospace; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 6px;
}
.artv-disco b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:.72rem;
  line-height:1.2; color:#F4EDE3; margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.artv-disco span{ font-family:'IBM Plex Mono',monospace; font-size:.54rem; color:#B9AEC2 }
.artv-ticket{ background:#E4FF3B; color:#18121A; padding:8px 16px; position:relative; margin-top:6px; cursor:pointer }
.artv-ticket::before, .artv-ticket::after{
  content:""; position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  background:#18121A; transform:translateY(-50%);
}
.artv-ticket::before{ left:-7px }
.artv-ticket::after{ right:-7px }
.artv-ticket-l1{ display:flex; align-items:baseline; gap:8px }
.artv-ticket-l1 .fecha{ font:600 .58rem 'IBM Plex Mono',monospace; flex:none }
.artv-ticket-l1 b{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.88rem;
  text-transform:uppercase; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.artv-ticket-l1 .pill{
  margin-left:auto; font:600 .52rem 'IBM Plex Mono',monospace; text-transform:uppercase;
  border:1px solid #18121A; border-radius:999px; padding:1px 7px; flex:none;
}
.artv-ticket > i{ font-family:'Caveat',cursive; font-style:normal; font-size:.95rem; display:block; margin-top:1px }
.artv-entrada{
  border:1px solid rgba(228,255,59,.35); border-left:4px solid #E4FF3B;
  padding:6px 10px; display:flex; align-items:baseline; gap:8px; margin-top:5px; cursor:pointer;
}
.artv-entrada:hover{ background:rgba(255,255,255,.04) }
.artv-entrada .fecha{ font:400 .56rem 'IBM Plex Mono',monospace; color:#B9AEC2; flex:none }
.artv-entrada b{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.8rem; color:#F4EDE3;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.artv-entrada small{
  margin-left:auto; font:400 .52rem 'IBM Plex Mono',monospace; color:#B9AEC2;
  text-transform:uppercase; flex:none; max-width:38%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
/* En móvil el héroe se vuelve pancarta (la foto de fondo, el nombre encima),
   las columnas se apilan y la discografía se desliza en horizontal. */
@media (max-width:760px){
  .artv-int{ padding:12px 14px 16px }
  .artv-hero{ display:block; padding-top:170px }
  .artv-foto{
    position:absolute; top:0; left:0; right:0; height:170px; width:auto; min-height:0;
    background-position:center 30%; font-size:4rem;
  }
  .artv-foto::before, .artv-foto::after{ display:none }
  .artv-velo{
    display:block; position:absolute; top:0; left:0; right:0; height:170px; pointer-events:none;
    background:linear-gradient(to top, rgba(24,18,26,.88), rgba(24,18,26,.15) 55%, transparent);
  }
  .artv-dcha{ display:block }
  .artv-tit{ position:absolute; left:12px; right:96px; top:162px; transform:translateY(-100%); padding-right:0 }
  .artv-tit h2{ font-size:clamp(1.7rem, 9vw, 2.4rem) }
  .artv-sello{ top:8px; right:8px }
  .artv-stats{ justify-content:space-between; gap:8px 12px; margin-top:12px }
  .artv-stats b{ font-size:1.1rem }
  .artv-cancion b{ font-size:.92rem }
  .artv-cuerpo{ display:block }
  .artv-der{ border-left:none; padding-left:0 }
  .artv-h .solo-movil{ display:inline }
  .artv-barra em{ display:none }
  .artv-barras{ padding-top:4px; height:74px }
  .artv-discos{
    display:flex; overflow-x:auto; gap:10px; padding-bottom:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .artv-discos::-webkit-scrollbar{ display:none }
  .artv-disco{ width:96px; flex:none }
}

/* ── La landing de Música: el mismo cartel, ahora con MI MÚSICA y
   CONCIERTOS seguidos, en una sola página con scroll (mockup 2026-08-11). */
.musv-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; position:relative }
.musv-etq{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.2em;
  color:#B9AEC2; text-transform:uppercase;
}
.musv-sync{
  background:#E4FF3B; color:#18121A; border:none; cursor:pointer;
  font:600 .6rem 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; display:flex; align-items:center; gap:5px;
}
.musv-sync:disabled{ opacity:.6; cursor:default }
.musv-syncmsg{
  margin:4px 0 0; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#B9AEC2;
  min-height:1em; position:relative;
}
.musv-seccion-cab{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:16px }
.musv-seccion-cab .artv-h{ margin:0 }
.artv-ticket-l1 .etq{
  font:600 .56rem 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; flex:none;
}
.musv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; position:relative }
.musv-kpi{
  border:1px solid rgba(228,255,59,.35); padding:9px 12px; text-align:left;
  background:none; cursor:default; font:inherit; min-width:0;
}
.musv-kpi.rosa{ border-color:#FF3B7A; background:rgba(255,59,122,.06) }
.musv-kpi.toca{ cursor:pointer }
.musv-kpi.toca:hover{ background:rgba(255,59,122,.12) }
.musv-kpi b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.15rem;
  line-height:1.1; color:#F4EDE3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.musv-kpi.rosa b{ color:#FF3B7A }
.musv-kpi b em{ font-style:normal; font-size:.6em; margin-left:2px }
.musv-kpi span{
  display:block; margin-top:2px; font-family:'IBM Plex Mono',monospace; font-size:.56rem;
  letter-spacing:.04em; color:#B9AEC2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.musv-top10{ display:grid; grid-template-columns:repeat(10,1fr); gap:10px; margin-top:8px }
.musv-item{ position:relative; min-width:0 }
.musv-item[role="button"]{ cursor:pointer }
.musv-cara{
  aspect-ratio:1; background:#241A28 center/cover no-repeat; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; color:#4A3A50; font-size:1.2rem;
}
.musv-item.top .musv-cara{ border-color:#E4FF3B }
.musv-item.top.cancion .musv-cara{ border-color:#FF3B7A }
.musv-badge{
  position:absolute; top:3px; left:3px; width:16px; height:16px; display:flex;
  align-items:center; justify-content:center; background:#E4FF3B; color:#18121A;
  font:800 .62rem 'Bricolage Grotesque',sans-serif;
}
.musv-item.cancion .musv-badge{ background:#FF3B7A }
.musv-item b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.64rem;
  color:#F4EDE3; margin-top:3px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.musv-item small{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:.5rem; color:#9C93A3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.musv-vertop{ text-align:right; margin-top:6px }
.musv-boton{
  display:inline-flex; align-items:center; gap:4px; background:none; cursor:pointer;
  border:1px solid #E4FF3B; color:#E4FF3B;
  font:500 .58rem 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px;
}
.musv-boton.rosa{ border-color:#FF3B7A; color:#FF3B7A }
.musv-evo{
  display:flex; align-items:flex-end; gap:5px; height:100px; padding-top:14px;
  border-bottom:1.5px solid #E4FF3B; margin-top:6px; box-sizing:content-box;
}
.musv-evo-col{
  flex:1; min-width:0; position:relative; display:flex; flex-direction:column-reverse; align-items:stretch;
  background:none; border:none; padding:0; cursor:pointer;
}
.musv-evo-col .pas{ display:block; width:100%; background:#E4FF3B }
.musv-evo-col .fut{ display:block; width:100%; background:#FF3B7A }
.musv-evo-col em{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px;
  font:400 .5rem 'IBM Plex Mono',monospace; font-style:normal; color:#B9AEC2; white-space:nowrap;
}
.musv-leyenda{
  display:flex; gap:14px; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:.56rem; color:#B9AEC2;
}
.musv-leyenda span{ display:flex; align-items:center; gap:4px }
.musv-leyenda i{ width:8px; height:8px; flex:none }
.musv-leyenda i.fosf{ background:#E4FF3B }
.musv-leyenda i.rosa{ background:#FF3B7A }
.musv-botones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
@media (max-width:760px){
  .musv-kpis{ grid-template-columns:repeat(3,1fr); gap:6px }
  .musv-kpis > :nth-child(4){ display:none }
  .musv-top10{ grid-template-columns:repeat(5,1fr); gap:7px }
}

/* ── La ficha de un festival: mismo cartel, cabecera con su logo y las
   ediciones vividas como chips que despliegan el line-up por día. */
.festv-cab{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap }
/* La imagen la pega Jorge, así que puede llegar cuadrada, apaisada o alta:
   la caja fija solo el ALTO y dentro la imagen encoge entera sin recortarse
   ni deformarse (como un logo de patrocinador, no como una foto de carné).
   Sin imagen, cae a una cajita cuadrada con la inicial, igual que un
   artista sin foto. */
.festv-logo{
  flex:none; background:#241A28; border:1.5px solid rgba(228,255,59,.35);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:1.8rem; color:#C9BFD6;
}
.festv-logo.sin-imagen{ width:84px; height:84px }
.festv-logo.con-imagen{ height:84px; max-width:240px; padding:8px 12px }
.festv-logo.con-imagen img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto }
.festv-tit{ min-width:0 }
.festv-tit h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(1.6rem, 4vw, 2.4rem);
  color:#F4EDE3; line-height:1.05; text-shadow:0 0 18px rgba(228,255,59,.2); margin:0;
}
.festv-imgform{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap }
.festv-imgform input{
  flex:1; min-width:160px; background:#18121A; border:1px solid rgba(228,255,59,.3); color:#F4EDE3;
  font:400 .74rem 'Instrument Sans',sans-serif; padding:8px 10px;
}
.festv-edic{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 16px }
.festv-dias{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 20px; margin-top:8px }
.festv-dia h4{
  font:600 .62rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase;
  color:#FF3B7A; border-bottom:1.5px solid #FF3B7A; padding-bottom:5px; margin-bottom:7px;
}
.festv-artista{ display:flex; align-items:center; gap:8px; padding:5px 4px; cursor:pointer }
.festv-artista:hover{ background:rgba(255,255,255,.04) }
.festv-artista b{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.8rem; color:#F4EDE3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:760px){
  .festv-dias{ grid-template-columns:1fr; gap:14px }
  .festv-logo{ font-size:1.4rem }
  .festv-logo.sin-imagen{ width:64px; height:64px }
  .festv-logo.con-imagen{ height:64px; max-width:180px; padding:6px 10px }
}
.disco-fila{
  display:flex; align-items:baseline; gap:10px; padding:6px 4px;
  border-bottom:1px dashed rgba(201,191,214,.25); font-size:.84rem;
}
.disco-fila:last-child{ border-bottom:none }
.disco-fila .mono{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#C9BFD6; flex-shrink:0; width:64px;
}
.disco-fila b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.84rem }
.disco-fila small{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#C9BFD6; margin-left:auto; text-align:right }
.disco-fila.toca, .rank-fila.toca, .billete-toca{ cursor:pointer }
.rank-fila.toca:hover, .disco-fila.toca:hover{ background:rgba(255,255,255,.04) }
.enlace-artista{
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  color:#E4FF3B; font-weight:600; text-decoration:underline; text-underline-offset:3px;
}

/* ── 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 oscuro de música. */
.rock .sw-tabs button{ border-color:#4A3A50; color:#C9BFD6 }
.rock .sw-tabs button.on{ background:#E4FF3B; border-color:#E4FF3B; color:#1C1220 }
/* 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 }

/* ── Lo escuchado (stats.fm) ── */
.fm-rangos{ display:flex; gap:5px; margin-bottom:12px }
.fm-pos{
  flex-shrink:0; width:22px; text-align:right;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#C9BFD6;
}
.fm-fila{
  display:flex; align-items:center; gap:10px; padding:6px 4px;
  border-bottom:1px dashed rgba(201,191,214,.25);
}
.fm-fila:last-child{ border-bottom:none }
.fm-fila b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.86rem; flex:1; min-width:0 }
.fm-fila > small{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#C9BFD6; flex-shrink:0; text-align:right }
.fm-cara{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:#241A28 center/cover no-repeat; border:1px solid #4A3A50;
}
.fm-cara.cuadrada{ border-radius:7px }
.fm-tema{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.fm-tema b{ flex:none }
.fm-tema small{ font-family:'IBM Plex Mono',monospace; font-size:.58rem; color:#C9BFD6 }
/* La carátula pequeña en la lista de discos del artista. */
.disco-cara{
  flex-shrink:0; width:30px; height:30px; border-radius:6px;
  background:#241A28 center/cover no-repeat; border:1px solid #4A3A50;
}

/* ── Sugerencias de artista (MusicBrainz) ──
   El mismo gesto que las de TMDB en el cine. En la agenda salen sobre papel;
   dentro de .rock (música) se visten de oscuro. */
#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);
}
.rock .mb-sug{ background:#241A28; border-color:#4A3A50; color:#EDE4F4 }
.rock .mb-sug span{ color:#C9BFD6 }
.rock .mb-sug:hover{ border-color:#E4FF3B }
.rock .mb-sin{ color:#C9BFD6 }
.rock .mb-elegido{ color:#E4FF3B }

/* ── 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) o
   granate (teatro) lo tiñen debajo. */
.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 }
/* Música (fondo oscuro) y teatro (granate): el filtro se viste de la casa. */
.rock .fp-rotulo{ color:#C9BFD6 }
.rock .fp-chip{ background:#241A28; border-color:#4A3A50; color:#EDE4F4 }
.rock .fp-chip.on{ background:#E4FF3B; border-color:#E4FF3B; color:#1C1220 }
.rock .fp-chip.todos.on{ background:#FF3B7A; border-color:#FF3B7A; color:#fff }
.telon .fp-rotulo{ color:#C9A97F }
.telon .fp-chip{ background:#3B0F1B; border-color:#6B2436; color:#F4E9D8 }
.telon .fp-chip.on{ background:#D9B24A; border-color:#D9B24A; color:#3B0F1B }

/* 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 }
/* En los temas oscuros los colores globales (papel claro / tinta) se leen AL
   REVÉS: el chip sin marcar quedaba crema —parecía encendido sobre el fondo
   oscuro— y el marcado, tinta oscura que se fundía con el fondo. En música
   el marcado va en el fosforito de la casa, como el filtro de arriba; en
   teatro, en su dorado. */
.rock .chip-check span{ background:#241A28; border-color:#4A3A50; color:#EDE4F4 }
.rock .chip-check input:checked + span{ background:#E4FF3B; border-color:#E4FF3B; color:#1C1220 }
.telon .chip-check span{ background:#3B0F1B; border-color:#6B2436; color:#F4E9D8 }
.telon .chip-check input:checked + span{ background:#D9B24A; border-color:#D9B24A; color:#3B0F1B }

/* ── 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(--sello); font-size:.78rem; margin:10px 0 0; font-weight:600 }

.vj-btn-row{ display:flex; gap:8px; margin:12px 0 }
.vj-btn-row button{
  flex:1; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.8rem;
  padding:11px 14px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--tinta); background:var(--tinta); color:var(--papel);
}
.vj-btn-row button:last-child{ background:var(--blanco); color:var(--tinta) }
.vj-btn-row button:disabled{ opacity:.5; cursor:not-allowed }
/* Los botones de acción del cuaderno (añadir viaje, fotos, importar
   cronología, actualizar coordenadas) son hasta cuatro a la vez — letra más
   chica y menos relleno para que no se coman media pantalla, y envuelven en
   dos filas si no caben en una en vez de apretarse hasta ilegibles. */
.vj-btn-row-viajes{ flex-wrap:wrap }
.vj-btn-row-viajes button{ flex:1 1 auto; min-width:120px; font-size:.68rem; padding:9px 10px }

/* ── 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(--sello); 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-detalle-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.vj-detalle-top .volver,
.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: portada y visor de fotos deslizable. */
/* La portada es un <img> (ver Portada() en Cuaderno.tsx): así se entera uno de
   que no carga, cosa que un fondo CSS no cuenta jamás. */
.vj-hero{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:14px; margin-bottom:10px;
  background:var(--blanco); border:1.5px solid var(--tinta);
}
.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 formulario de país en la pestaña Viajes reutiliza el estilo de .alta y solo
   necesita que el select y las etiquetas encajen. */
.vj-form-pais select{
  width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.88rem;
  padding:9px 10px; border-radius:8px; border:1.5px solid var(--linea); background:var(--papel); color:var(--tinta);
}
.vj-form-pais .dos > div{ display:flex; flex-direction:column; flex:1 }
.vj-form-pais .vj-chips{ margin-top:4px }

/* POR QUÉ ESTO EXISTE: los chips de viajeros no se podían marcar ni desmarcar.
   No era el JavaScript —el estado cambiaba bien—, era que no se veía.
   `form.alta button` pinta TODOS los botones del formulario con fondo oscuro y
   letra clara, y gana en especificidad (0,1,2) a `.vj-chip` (0,1,0). Así que el
   chip apagado se pintaba igual que el encendido, que usa exactamente los mismos
   colores: tres chips oscuros que nunca cambiaban de aspecto.
   Se repiten aquí las dos caras con la especificidad suficiente. */
form.alta .vj-chip{
  background:var(--papel); color:var(--tinta);
  border:1.5px solid var(--linea); text-transform:none; letter-spacing:0;
  font-family:'Instrument Sans',sans-serif; font-size:.82rem; font-weight:600; padding:7px 12px;
}
form.alta .vj-chip.on{ background:var(--tinta); color:var(--papel); border-color:var(--tinta) }
form.alta .vj-chip.todos{ border-style:dashed }
form.alta .vj-chip.todos.on{ background:var(--visado); border-color:var(--visado); color:#fff }

/* Botón para revelar el siguiente campo de ciudad. Es un enlace, no una acción:
   no debe competir visualmente con «Guardar parada». */
.vj-anadir-campo{
  background:none; border:none; color:var(--visado); font-weight:600;
  font-size:.8rem; text-align:left; padding:2px 0; cursor:pointer; justify-self:start;
}
.vj-anadir-campo:hover{ text-decoration:underline }

/* 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 acceso al cuaderno desde Viajes. Mismo formato que «Todos los viajes» y
   «Página de sellos», en el verde de los sellos para que se distinga de un
   vistazo sin salirse de la paleta. */
.banner-cuaderno{ background:var(--visado); border-color:var(--visado) }
.banner-cuaderno h3, .banner-cuaderno span{ color:#fff }

/* El formulario antiguo queda plegado: sigue ahí, pero no compite con el nuevo. */
.vj-antiguo{ margin-top:14px }
.vj-antiguo summary{
  cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  color:var(--tinta-suave); padding:6px 0;
}
.vj-antiguo .vj-nota{ margin-bottom:8px }

/* ═══════════ ESCAPE ROOMS ═══════════
   Fondo blanco y color, al estilo de Experiencity y sus "Experiencias" por
   colores: la sección se lee como una caja de rotuladores. Cada sala recibe
   SIEMPRE el mismo color, derivado de su nombre (ver colorDe en Escapes.tsx),
   así la lista tiene ritmo sin que haya que elegir nada a mano.

   Las siete tintas de la paleta. Se aplican con .c-<nombre> sobre el elemento
   que manda: la tarjeta, la barra, el punto o el KPI. */
.esc-color .c-rojo{ --tinta-esc:#E4344A; --suave-esc:#FDECEE }
.esc-color .c-ambar{ --tinta-esc:#F0A028; --suave-esc:#FEF4E6 }
.esc-color .c-verde{ --tinta-esc:#2FA96B; --suave-esc:#EAF7F1 }
.esc-color .c-azul{ --tinta-esc:#2D7DD2; --suave-esc:#EAF2FC }
.esc-color .c-morado{ --tinta-esc:#8E44AD; --suave-esc:#F5EDF8 }
.esc-color .c-rosa{ --tinta-esc:#E0459B; --suave-esc:#FDECF5 }
.esc-color .c-turquesa{ --tinta-esc:#1FA9A0; --suave-esc:#E7F7F6 }

.esc-color{ padding:2px 0 10px }
.esc-cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 2px 12px }
.esc-cab h2{
  margin:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.5rem; color:var(--tinta);
}
.esc-cab-sub{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave);
}

/* La vitrina: cuatro fichas blancas, cada una con su color. */
.esc-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 14px }
.esc-kpi{
  background:var(--blanco); border:1.5px solid var(--linea); border-top:4px solid var(--tinta-esc);
  border-radius:12px; padding:11px 6px; text-align:center; min-width:0;
}
.esc-kpi b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.2rem; line-height:1.15; color:var(--tinta-esc);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.esc-kpi span{
  font-family:'IBM Plex Mono',monospace; font-size:.52rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-suave);
}

/* Pestañas tipo píldora. */
.esc-tabs{ display:flex; gap:6px; margin-bottom:14px }
.esc-tabs button{
  flex:1; font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; padding:10px 6px; border-radius:999px;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta-suave);
  cursor:pointer;
}
.esc-tabs button:hover{ border-color:var(--tinta) }
.esc-tabs button.on{ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }

.esc-resumen{ font-size:.85rem; color:var(--tinta-suave); margin:4px 0 12px }

/* ── La tarjeta de una sala hecha ──
   Franja de color a la izquierda, foto pequeña a la derecha. */
.esc-tarjeta{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--blanco); border:1.5px solid var(--linea);
  border-left:5px solid var(--tinta-esc); border-radius:14px;
  padding:13px 14px; margin-bottom:10px;
}
.esc-tarjeta-txt{ flex:1; min-width:0; order:1 }
.esc-tarjeta h3{
  margin:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.02rem; color:var(--tinta-esc); line-height:1.25;
}
.esc-empresa{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-suave); margin:3px 0 0;
}
.esc-datos{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--tinta-suave); margin-top:6px }
.esc-nota{ font-size:.84rem; margin-top:6px }
.esc-acciones{ display:flex; align-items:center; gap:6px; margin-top:9px }
.esc-acciones button{
  background:var(--suave-esc); border:1.5px solid transparent; border-radius:8px;
  cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  color:var(--tinta-esc); padding:5px 10px; font-weight:600;
}
.esc-acciones button:hover{ border-color:var(--tinta-esc) }
.esc-acciones .borrar{ margin-left:auto; background:none; color:var(--tinta-suave); font-size:1rem; padding:2px 8px }
.esc-acciones .borrar:hover{ color:var(--sello); border-color:transparent }

/* La foto: pequeña, cuadrada y a la derecha; se abre entera al tocarla. */
.esc-foto{ order:2; flex:0 0 auto; display:block; line-height:0 }
.esc-foto img{
  width:76px; height:76px; object-fit:cover; border-radius:10px;
  border:1.5px solid var(--linea); display:block;
}
.esc-foto:hover img{ border-color:var(--tinta-esc) }

/* ── Catálogo ── */
.esc-cat-titulo{ margin:20px 0 4px; font-size:1rem }
.esc-manual{
  background:none; border:none; color:var(--sello); font-weight:700;
  font-size:.85rem; padding:0; cursor:pointer; text-decoration:underline;
}
.esc-buscar{ width:100%; margin-bottom:10px }
.esc-ciudad{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--tinta-suave); margin:16px 0 6px;
  border-bottom:1.5px solid var(--linea); padding-bottom:4px;
}
.esc-fila{
  display:flex; align-items:center; gap:10px;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px;
  padding:9px 11px; margin-bottom:6px;
}
.esc-punto{ flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--tinta-esc) }
.esc-fila-txt{ display:flex; flex-direction:column; min-width:0; flex:1 }
.esc-fila-txt b{ font-size:.9rem }
.esc-fila-txt span{ font-size:.7rem; color:var(--tinta-suave) }
.esc-fila > button{
  flex-shrink:0; background:var(--tinta); border:none; border-radius:999px;
  cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.6rem;
  color:var(--blanco); padding:7px 13px; font-weight:600; letter-spacing:.04em;
}
.esc-fila > button:hover{ background:var(--sello) }
.esc-fila.hecha{ background:#F7F9F7 }
.esc-fila.hecha .esc-fila-txt{ opacity:.6 }
.esc-check{
  flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  color:var(--visado); font-weight:700;
}

/* ── Datos: cartas blancas con barras de color ── */
.esc-carta{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:14px;
  padding:14px; margin-bottom:10px;
}
.esc-carta h3{
  margin:0 0 4px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem;
}
.esc-barras{ margin-top:10px; display:grid; gap:7px }
.esc-barra-fila{ display:flex; align-items:center; gap:9px; width:100%; text-align:left }
/* Las barras de "salas por año" son botones: se abren para ver las salas. */
button.esc-barra-fila{ background:none; border:none; padding:3px 2px; border-radius:8px; cursor:pointer; font:inherit }
button.esc-barra-fila:hover{ background:#F4F6F4 }
button.esc-barra-fila.on{ background:#EEF2EE }
.esc-barra-rotulo{
  flex:0 0 92px; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.esc-barra-pista{ flex:1; background:#EDEFED; border-radius:999px; height:12px; overflow:hidden }
.esc-barra-pista i{ display:block; height:100%; border-radius:999px; background:var(--tinta-suave) }
.esc-barra-pista i.c-rojo{ background:#E4344A }
.esc-barra-pista i.c-ambar{ background:#F0A028 }
.esc-barra-pista i.c-verde{ background:#2FA96B }
.esc-barra-pista i.c-azul{ background:#2D7DD2 }
.esc-barra-pista i.c-morado{ background:#8E44AD }
.esc-barra-pista i.c-rosa{ background:#E0459B }
.esc-barra-pista i.c-turquesa{ background:#1FA9A0 }
.esc-barra-fila b{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta); min-width:22px; text-align:right }

/* El desplegable de un año: las salas de ese año, en pequeño. */
.esc-desplegable{ border-color:var(--tinta) }
.esc-mini{
  border-left:4px solid var(--tinta-esc); background:var(--suave-esc);
  border-radius:8px; padding:8px 10px; margin-top:7px;
}
.esc-mini b{ display:block; font-size:.88rem }
.esc-mini span{ font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:var(--tinta-suave) }

/* ── Formulario ── */
.esc-otra-persona{ display:flex; gap:8px; margin-top:6px }
.esc-otra-persona input{ flex:1 }
.esc-otra-persona button{
  flex-shrink:0; background:var(--papel); color:var(--tinta);
  border:1.5px solid var(--linea); border-radius:8px; padding:6px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; cursor:pointer;
}
.esc-otra-persona button:disabled{ opacity:.4; cursor:default }
.esc-error{ color:#C0392B; font-size:.8rem; margin-top:4px }

/* ══════════ 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);
}

/* ── La nota, dibujada ──
   Un aro que se rellena según la puntuación (conic-gradient hasta --pct) con el
   número dentro, en el color de su tramo. El ::after tapa el centro para que el
   círculo relleno se vuelva un aro; por eso el número necesita su z-index. */
.esc-tarjeta-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.esc-circulo-nota{
  position:relative; flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--nota-c) var(--pct), #E9ECE9 0);
}
.esc-circulo-nota::after{
  content:""; position:absolute; inset:5px; border-radius:50%; background:var(--blanco);
}
.esc-circulo-nota b{
  position:relative; z-index:1; color:var(--nota-c);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.95rem; line-height:1;
}
.esc-circulo-nota.t-diez{ --nota-c:#1E8E5A }
.esc-circulo-nota.t-alta{ --nota-c:#2FA96B }
.esc-circulo-nota.t-media{ --nota-c:#F0A028 }
.esc-circulo-nota.t-baja{ --nota-c:#E8763B }
.esc-circulo-nota.t-mala{ --nota-c:#E4344A }

/* ── 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 (.telon, .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 }
}

/* ── Escapes: los dos filtros, en UNA línea ──
   "Quién" a la izquierda y "Ordenar por" a la derecha. Los rótulos van cortos a
   propósito: con "Con quién" y "Todo el mundo" no cabían y la fila se partía en
   dos, robando una altura que no vale lo que cuesta. Los desplegables se
   encogen antes que desbordar (min-width:0 sobre el flex). */
.esc-barra-filtros{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.esc-barra-filtros > div{ margin:0; flex:1 1 0; min-width:0 }
.esc-filtro-compi{ display:flex; align-items:center; gap:8px }
.esc-filtro-compi label, .esc-barra-filtros .ordenar-fila label{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-suave); flex-shrink:0;
}
.esc-barra-filtros select{
  flex:1 1 0; min-width:0; width:auto; max-width:none;
  font-size:.74rem; padding:5px 7px;
}

/* ── Cuaderno: filtro de tipo y "Ordenar por", en una línea ──
   Mismo patrón que las dos cajas de Escapes: cada mitad se encoge antes que
   desbordar (min-width:0), y las etiquetas van cortas para que quepan. */
.vj-filtros-fila{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:10px 0; flex-wrap:wrap;
}
.vj-filtros-fila > div{ display:flex; align-items:center; gap:8px; flex:1 1 0; min-width:0 }
.vj-filtros-fila label{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-suave); flex-shrink:0;
}
.vj-filtros-fila select{
  flex:1 1 0; min-width:0; width:auto; max-width:none;
  font-size:.74rem; padding:5px 7px; text-transform:capitalize;
}

/* El buscador de viajes: un botoncito redondo que no le roba sitio a Tipo /
   Ordenar por mientras está cerrado (flex:0 0 auto, no el flex:1 1 0 de sus
   hermanos) — solo al abrirlo pide su propio hueco, y si no cabe en la fila
   (flex-wrap de arriba), baja a su propia línea en vez de apretar el resto. */
.vj-filtros-fila > .vj-buscador{ flex:0 0 auto }
/* "Tipo" tiene menos que decir (tres palabras cortas de opción) que "Ordenar
   por" ("Más recientes primero"…), así que no se reparten el hueco a partes
   iguales: Tipo se encoge y Ordenar por crece, en vez de los dos igual de
   estrechos. */
.vj-filtros-fila > .vj-tipo-fila{ flex:.75 1 0 }
.vj-filtros-fila > .ordenar-fila{ flex:1.25 1 0 }
/* flex-basis:100% con flex-wrap fuerza su PROPIA línea aunque hubiera hueco
   de sobra: la alternativa —compartir fila con Tipo/Ordenar— los dejaba tan
   estrechos que el desplegable se quedaba en solo la flechita, ilegible. */
.vj-filtros-fila > .vj-buscador.abierto{ flex:1 1 100% }
.vj-buscador-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; padding:0; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--tinta); background:var(--papel); color:var(--tinta); font-size:.82rem;
}
.vj-buscador-btn.on{ background:var(--tinta); color:var(--papel) }
.vj-buscador-input{ flex:1 1 auto; min-width:0; font-size:.74rem; padding:5px 9px }

/* 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 MapaItinerario.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;
}

/* ═══════════ RESTAURANTES ═══════════
   Carta de menú: página blanca con marco fino de tinta, título en serif
   (Fraunces), cifras entre filetes, filas separadas por filetes en vez de
   tarjetas, y el carmín de bistró para los acentos. En escritorio la lista
   convive con la rejilla de barrios y el top a la derecha (.rest-cols); en
   móvil esas piezas viven en sus pestañas y aparece el + flotante. */
.rest-tema{
  --serif:'Fraunces',Georgia,serif;
  background:#FFFFFF; border:1.5px solid #26324B; border-radius:6px;
  padding:16px 14px 20px; margin:0 -4px;
  color:#26324B; position:relative; overflow:hidden;
}
.rest-tema .c-carmin{ --rt:#AE2B21 }
.rest-tema .c-ambar{ --rt:#C4831F }
.rest-tema .c-verde{ --rt:#337D48 }
.rest-tema .c-tinta{ --rt:#26324B }

/* ── La cabecera de carta ── */
.rest-carta-cab{ text-align:center; margin-bottom:12px }
.rest-casa{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:600;
  letter-spacing:.35em; text-transform:uppercase; color:#AE2B21; margin:2px 0 4px;
}
.rest-carta-cab h2{
  font-family:var(--serif); font-weight:700; font-size:1.65rem; line-height:1.15;
  color:#1E2A44; margin:0 0 10px;
}
.rest-adorno{ color:#AE2B21; font-size:.7rem; margin:8px 0 0 }

.rest-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  border-top:1px solid #26324B; border-bottom:1px solid #26324B; padding:9px 0;
}
.rest-kpi{ text-align:center; min-width:0 }
.rest-kpi b{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:1.25rem; line-height:1.15; color:var(--rt,#26324B);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rest-kpi span{
  font-family:'IBM Plex Mono',monospace; font-size:.5rem; letter-spacing:.05em;
  text-transform:uppercase; color:#8C8677;
}

.rest-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap }
.rest-tabs button{
  flex:1; font-family:'IBM Plex Mono',monospace; font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; padding:9px 4px; border-radius:999px;
  border:1.5px solid #D9D2C0; background:#FFF; color:#26324B; cursor:pointer;
}
.rest-tabs button:hover{ border-color:#26324B }
.rest-tabs button.on{ background:#26324B; border-color:#26324B; color:#F6F2E9; font-weight:700 }

.rest-tema .ordenar-fila label{ color:#8C8677 }
.rest-tema .ordenar-fila select{ background:#FFF; border-color:#D9D2C0; color:#26324B }
.rest-btn-row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap }
.rest-btn-nuevo{
  background:#AE2B21; color:#FBF6EC; border:none; border-radius:999px; padding:9px 16px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.82rem; cursor:pointer;
}
.rest-quitar-filtro{
  background:#FFF; border:1.5px solid #AE2B21; color:#AE2B21; border-radius:999px;
  padding:6px 12px; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
}
.rest-orden-sola{ justify-content:flex-end }
.rest-resumen{ font-size:.8rem; color:#6E6858; margin:6px 0 10px; line-height:1.5 }

/* ── Las dos columnas de escritorio y los paneles laterales ── */
.rest-cols{ display:grid; grid-template-columns:1fr; gap:12px; align-items:start }
.rest-lado{ display:none; min-width:0 }
@media (min-width:960px){
  .rest-cols{ grid-template-columns:minmax(0,3fr) minmax(0,2fr) }
  .rest-lado{ display:block }
}
.rest-col-lista{ min-width:0 }
.rest-panel{
  background:#FFF; border:1.5px solid #E3DCCB; border-radius:14px;
  padding:12px 14px; margin-bottom:12px;
}
.rest-panel-cab, .rest-panel-pie{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#8C8677;
}
.rest-panel-cab{ margin-bottom:10px }
.rest-panel-pie{ margin-top:10px; font-weight:400 }
.rest-panel-cab .aviso{ color:#AE2B21 }
.rest-rank-nota{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.92rem; color:#26324B }
.rest-rank-lugar{
  font-family:'IBM Plex Mono',monospace; font-size:.54rem; letter-spacing:.05em;
  text-transform:uppercase; color:#8C8677; margin-left:7px;
}
.rest-mas{
  width:100%; box-sizing:border-box; border:1.5px dashed #C9C1AC; background:transparent;
  border-radius:14px; padding:11px; font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  font-weight:600; color:#6E6858; cursor:pointer; margin:2px 0 10px;
}
.rest-mas:hover{ border-color:#26324B; color:#26324B }

/* ── La fila de un restaurante: renglón de carta, con filete inferior ── */
.rest-tarjeta{
  display:flex; gap:11px; align-items:flex-start;
  background:transparent; border:0; border-bottom:1px solid #E2E0D6;
  border-radius:0; padding:11px 2px; margin-bottom:0;
}
.rest-tarjeta.pulsable{ cursor:pointer }
.rest-tarjeta.pulsable:hover, .rest-tarjeta.pulsable:focus-visible{ background:#FAF8F2 }
/* Una recomendación (sin ir aún): filete a trazos ámbar y su sello. */
.rest-tarjeta.recomendada{ border-bottom-style:dashed; border-bottom-color:#C4831F }
.rest-etq-reco{
  display:inline-block; vertical-align:2px; margin-left:8px;
  font-family:'IBM Plex Mono',monospace; font-style:normal; font-weight:600;
  font-size:.54rem; letter-spacing:.05em; text-transform:uppercase;
  color:#8A5B12; background:rgba(216,151,60,.16); border:1px dashed #C4831F;
  border-radius:999px; padding:2px 7px;
}
/* El aviso de "sitio ya conocido" en el alta de comida. */
.rest-sitio-conocido{ color:#2E7D46; margin:6px 0 2px }
/* Las estrellas Michelin, en su rojo de guía, junto al nombre. */
.rest-michelin{
  font-style:normal; color:#C41E3A; margin-left:7px; letter-spacing:2px;
  font-size:.82em; vertical-align:1px;
}
.rest-tarjeta-txt{ flex:1; min-width:0; order:1 }
.rest-tarjeta-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
/* La estrella de favorito de la ficha: dorada cuando está puesta. */
.rest-fav{
  background:none; border:none; cursor:pointer; padding:0 6px 0 0;
  font-size:1.15rem; line-height:1; color:#B9B2A4; vertical-align:-1px;
}
.rest-fav.on{ color:#D9A21B }
.rest-fav:hover{ color:#D9A21B }
.rest-fav:disabled{ opacity:.5; cursor:wait }
.rest-enlace-viaje{
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  color:inherit; text-decoration:underline; text-underline-offset:2px;
}
.rest-enlace-viaje:hover{ color:#26324B }
.rest-tarjeta h3{
  margin:0; font-family:var(--serif,'Fraunces',serif); font-weight:700;
  font-size:1.02rem; color:#1E2A44; line-height:1.25;
}
.rest-lugar{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.04em;
  text-transform:uppercase; color:#8C8677; margin:5px 0 0;
}
.rest-datos{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:#8C8677; margin-top:6px }
/* Los platos, en cursiva de carta (Fraunces itálica). */
.rest-platos{
  font-family:var(--serif,'Fraunces',serif); font-style:italic; font-weight:500;
  font-size:.9rem; color:#2E4470; margin-top:5px; line-height:1.35;
}
.rest-nota-txt{ font-size:.84rem; margin-top:6px; color:#26324B }
.rest-acciones{ display:flex; align-items:center; gap:6px; margin-top:9px }
.rest-acciones button{
  background:#F4EFE3; border:1.5px solid transparent; border-radius:8px;
  cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  color:#26324B; padding:5px 10px; font-weight:600;
}
.rest-acciones button:hover{ border-color:#26324B }
.rest-acciones .borrar{ margin-left:auto; background:none; color:#8C8677; font-size:1rem; padding:2px 8px }
.rest-acciones .borrar:hover{ color:#AE2B21; border-color:transparent }

.rest-foto{ order:0; flex:0 0 auto; display:block; line-height:0 }
.rest-foto img{
  width:48px; height:48px; object-fit:cover; border-radius:8px;
  border:1px solid #E2E0D6; display:block;
}
.rest-foto:hover img{ border-color:#26324B }
/* Sin foto: una miniatura de color suave, estable por nombre. */
.rest-foto-ph{ order:0; flex:0 0 auto; width:48px; height:48px; border-radius:8px }

/* ── Las piezas de carta del mockup ── */
.rest-seccion-cab{
  margin:16px 0 2px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace; font-weight:600; color:#1E2A44;
}
.rest-seccion-cab i{
  font-family:var(--serif,'Fraunces',serif); font-style:italic; font-weight:500;
  text-transform:none; letter-spacing:0; color:#2E4470; font-size:.78rem;
}
.rest-chef{
  border:1.5px solid #AE2B21; border-radius:8px; padding:2px 10px 4px;
  margin:16px 0 6px; position:relative;
}
.rest-chef-etq{
  position:absolute; top:-8px; left:10px; background:#FFF; padding:0 7px;
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#AE2B21;
}
.rest-chef .rest-tarjeta{ border-bottom:0 }
/* Puntos conductores del top, como en una carta de vinos. */
.rest-top-fila{ align-items:baseline }
.rest-puntos{ flex:1; min-width:14px; margin:0 7px; border-bottom:2px dotted #B9C0CC }
.rest-barrio-caja{
  border:1.5px solid #26324B; border-radius:6px; padding:8px 10px; margin-top:10px;
  background:#FAF8F2;
}
.rest-barrio-caja b{ font-family:var(--serif,'Fraunces',serif); font-weight:700; font-size:.85rem; color:#1E2A44 }
.rest-barrio-caja p{
  margin:3px 0 0; font-family:var(--serif,'Fraunces',serif); font-style:italic;
  font-weight:500; font-size:.78rem; color:#2E4470;
}
.rest-barrio-caja p i{ font-style:italic; font-weight:700 }
/* El + flotante, solo en móvil (en escritorio ya hay botón arriba). */
.rest-fab{
  display:none; position:fixed; right:16px; bottom:72px; z-index:40;
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:#AE2B21; color:#FBF6EC; font-size:1.8rem; line-height:1;
  box-shadow:0 4px 14px rgba(30,42,68,.35);
}
@media (max-width:959px){ .rest-fab{ display:grid; place-items:center } }

/* ── Ajustes solo de móvil ──
   Las pestañas (5, con flex:1) y los botones grandes se pensaron para el
   ancho de escritorio: en 375px, flex-wrap las apilaba en 2-3 filas cada
   uno y entre las dos cosas se comían casi toda la pantalla — la primera
   ficha quedaba fuera de la vista sin desplazar. Las pestañas pasan a
   deslizarse en horizontal (mismo idioma que otros carruseles de la app)
   en vez de apilarse; los dos botones grandes se quedan cada uno en su
   fila entera en vez de partirse a media palabra. El ajuste de los
   selects de filtro vive junto a `.rest-filtros-fila` más abajo, que es
   donde de verdad manda por orden de aparición en la hoja. En escritorio
   nada de esto cambia. */
@media (max-width:959px){
  .rest-tabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -4px 12px; padding:0 4px 2px;
  }
  .rest-tabs::-webkit-scrollbar{ display:none }
  .rest-tabs button{ flex:0 0 auto; white-space:nowrap; padding:9px 13px }
  .rest-btn-row{ flex-direction:column; align-items:stretch }
  .rest-btn-row .rest-btn-nuevo{ width:100%; box-sizing:border-box; text-align:center }
  .rest-btn-row .rest-quitar-filtro{ align-self:flex-start }
}

/* ── El formulario, blanco sobre el mantel ── */
.rest-tema form.alta{ background:#FFF; border-color:#E3DCCB }
.rest-tema form.alta strong{ color:#AE2B21 }
.rest-tema form.alta label{ color:#8C8677 }
.rest-tema form.alta input, .rest-tema form.alta select, .rest-tema form.alta textarea{
  background:#FBF8F1; border-color:#D9D2C0; color:#26324B;
}
.rest-tema form.alta button[type=submit]{ background:#AE2B21; color:#FBF6EC; border-color:#AE2B21 }
.rest-tema .chip-check span{ background:#FBF8F1; border-color:#D9D2C0; color:#26324B }
.rest-tema .chip-check input:checked + span{ background:#26324B; border-color:#26324B; color:#F6F2E9 }
.rest-error{ color:#AE2B21; font-size:.8rem; margin-top:4px }
/* Volver de la ficha, botón discreto como el "← Cine" de las películas. */
.rest-btn-volver{
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; padding:7px 11px;
  border-radius:8px; border:1.5px solid #D9D2C0; background:#FFF; color:#26324B;
  cursor:pointer; margin-bottom:10px;
}
/* El aviso de vínculo con un viaje dentro del formulario de visita. */
.rest-viaje-aviso{ border:1.5px dashed #337D48; border-radius:10px; padding:8px 10px; margin:10px 0 }
.rest-viaje-aviso .rest-resumen{ margin:0 0 6px }
.rest-sitio-nuevo{ border:1.5px dashed #C4831F; border-radius:10px; padding:8px 10px; margin:8px 0 }
.rest-sitio-nuevo .rest-resumen{ margin:0 0 6px }
/* Una visita dentro de la ficha: la misma tarjeta, un pelín rebajada. */
.rest-visita{ border-style:dashed }
.rest-tema .fp-chip{ background:#FFF; border-color:#D9D2C0; color:#26324B }
.rest-tema .fp-chip.on{ background:#26324B; border-color:#26324B; color:#F6F2E9 }
.rest-tema .fp-chip.todos.on{ background:#26324B; border-color:#26324B; color:#F6F2E9 }
.rest-tema .fp-rotulo{ color:#8C8677 }
.rest-tema .vacio{ background:#FFF; border-color:#E3DCCB; color:#8C8677 }
.rest-tema .aviso-deshacer{ background:#FFF; color:#26324B }

/* ── La nota, el mismo aro que en Escapes, con su propia paleta. También lo
   usan Videojuegos y el «Dónde comimos» del cuaderno — ambos sobre papel,
   así que la pista clara y los tramos verde/ámbar valen para todos. ── */
.rest-circulo-nota{
  position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--nota-c) var(--pct), #E7E1D2 0);
}
.rest-circulo-nota::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:#FFF }
.rest-circulo-nota b{
  position:relative; z-index:1; color:var(--nota-c);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.9rem; line-height:1;
}
.rest-circulo-nota.t-diez{ --nota-c:#2E7D46 }
.rest-circulo-nota.t-alta{ --nota-c:#4C8C3F }
.rest-circulo-nota.t-media{ --nota-c:#C4831F }
.rest-circulo-nota.t-baja{ --nota-c:#BC5A22 }
.rest-circulo-nota.t-mala{ --nota-c:#AE2B21 }

/* ── El mapa REAL (Leaflet, Fase 2) ── */
.rest-mapa-real{
  height:62vh; min-height:340px; border-radius:14px; overflow:hidden;
  border:1.5px solid #E3DCCB; background:#EFEBE0; position:relative;
  display:grid; place-items:center;
}
.rest-mapa-cargando{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:#8C8677 }
/* 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; border-radius:50%;
  background:#26324B; color:#FFF; border:2.5px solid #FFF;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.72rem;
  box-shadow:0 2px 6px rgba(38,50,75,.35);
}
.rest-pin.favorito{ background:#E9B949; color:#26324B }
.rest-pin.pendiente{ background:#FFF; border-style:dashed; border-color:#8C8677; color:#6E6858 }
.rest-pin.no-reco{ background:#AE2B21; color:#FFF3EE }
.rest-pin.cerrado{ background:#A49E90; color:#FFF }
.rest-leyenda{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#6E6858;
}
.rest-leyenda .rest-pin{ width:18px; height:18px; font-size:.55rem; border-width:1.5px; box-shadow:none; margin-left:10px }
.rest-leyenda .rest-pin:first-child{ margin-left:0 }
/* El popup de Leaflet, con la paleta de la sección. */
.rest-popup b{ font-family:'Bricolage Grotesque',sans-serif; font-size:.9rem }
.rest-popup p{ margin:3px 0; font-size:.76rem; color:#5A4A3A }
.rest-popup button{
  margin-top:6px; padding:5px 10px; border-radius:8px; border:1.5px solid #AE2B21;
  background:#AE2B21; color:#FBF6EC; font-family:'IBM Plex Mono',monospace;
  font-size:.66rem; cursor:pointer;
}

/* ── Fase 3: fusión, recomendador, rankings y línea temporal ── */
.rest-fusion{ margin-top:12px; border-top:1.5px dashed #D9D2C0; padding-top:10px }
.rest-fusion summary{
  cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:#8C8677;
}
.rest-fusion .rest-resumen{ margin:8px 0 }
.rest-fusion button{
  padding:7px 11px; border-radius:8px; border:1.5px solid #AE2B21; background:#AE2B21;
  color:#FBF6EC; font-family:'IBM Plex Mono',monospace; font-size:.66rem; cursor:pointer;
}
.rest-fusion button:disabled{ opacity:.5; cursor:default }
.rest-btn-reco{ background:#FFF; border:1.5px solid #337D48; color:#337D48 }
.rest-enlace{
  background:none; border:0; padding:0; text-align:left; cursor:pointer;
  color:inherit; font:inherit;
}
.rest-top-sub{ display:block; font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#8C8677; text-transform:none; letter-spacing:0 }
.rest-rank-dim{ margin-top:10px }
.rest-rank-titulo{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.05em; color:#C4831F; margin:0 0 4px;
}
.rest-stats-lineas p{ margin:6px 0; font-size:.8rem; color:#26324B }
.rest-stats-lineas b{ color:#AE2B21 }
.rest-crono-anio{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem;
  color:#AE2B21; margin:12px 0 4px;
}

/* ── La barra de filtros de Visitados (Fase 2) ── */
.rest-filtros{ margin-bottom:12px }
.rest-filtros input[type=search]{
  width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.88rem;
  padding:9px 11px; border-radius:9px; border:1.5px solid #D9D2C0; background:#FFF; color:#26324B;
  margin-bottom:7px;
}
.rest-filtros-fila{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.rest-filtros-fila select{
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; padding:7px 8px;
  border-radius:8px; border:1.5px solid #D9D2C0; background:#FFF; color:#26324B;
}
/* En móvil, el ancho libre de cada select (según su texto) los hacía caer
   uno por fila casi siempre — cuatro filas de filtro antes de ver el
   primer restaurante. Con una rejilla de 2 columnas fija ocupan la mitad
   de espacio para lo mismo. */
@media (max-width:959px){
  .rest-filtros-fila{ display:grid; grid-template-columns:1fr 1fr }
  .rest-filtros-fila select{ width:100%; box-sizing:border-box }
}

/* ── El mapa esquemático de distritos (pestaña y panel lateral) ── */
.rest-mapa{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:52px; gap:5px;
}
.rest-panel .rest-mapa{ grid-auto-rows:46px; gap:4px }
.rest-distrito{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; border-radius:9px; border:1.5px solid #E3DCCB; background:#FDFBF5;
  cursor:pointer; padding:3px 2px; overflow:hidden;
}
.rest-distrito.con-visitas{
  background:color-mix(in srgb, #C07A22 calc(var(--intensidad) * 100%), #F7E9CE);
  border-color:#C07A22;
}
.rest-distrito.on{ border:2px solid #26324B; padding:2.5px 1.5px }
.rest-distrito-nombre{
  font-family:'IBM Plex Mono',monospace; font-size:.48rem; text-transform:uppercase;
  letter-spacing:.02em; color:#26324B; line-height:1.15; text-align:center;
}
.rest-distrito-n{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.78rem; color:#3B2A12;
}
.rest-distrito:not(.con-visitas) .rest-distrito-n{ display:none }
.rest-distrito:not(.con-visitas) .rest-distrito-nombre{ color:#A49E90 }

/* ── Datos: cartas blancas con barras ámbar ── */
.rest-carta{
  background:#FFF; border:1.5px solid #E3DCCB; border-radius:14px;
  padding:14px; margin-bottom:10px;
}
.rest-carta h3{ margin:0 0 8px; font-family:var(--serif,'Fraunces',serif); font-weight:700; font-size:1.05rem; color:#1E2A44 }
.rest-top-lista{ display:grid; gap:8px }
.rest-top-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.rest-top-nombre{ font-size:.88rem; color:#26324B }
.rest-barras{ display:grid; gap:7px }
.rest-barra-fila{ display:flex; align-items:center; gap:9px }
.rest-barra-rotulo{
  flex:0 0 120px; font-family:'IBM Plex Mono',monospace; font-size:.64rem;
  color:#26324B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rest-barra-pista{ flex:1; background:#EFE9DB; border-radius:999px; height:11px; overflow:hidden }
.rest-barra-pista i{ display:block; height:100%; border-radius:999px; background:#C4831F }
.rest-barra-fila b{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:#AE2B21; min-width:18px; text-align:right }

/* ═══════════ 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. */

/* ── La estantería ──
   Cuatro portadas en rejilla 2x2, ocupando la pantalla. Los títulos van dentro
   de la propia ilustración, así que aquí solo se añade un pie con el dato vivo
   de cada libro. */
.estanteria{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:4px 0 8px;
}
.estante-libro{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  border-radius:12px; min-width:0;
}
.estante-libro img{
  width:100%; height:auto; display:block; border-radius:10px;
  box-shadow:0 2px 10px rgba(27,42,65,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.estante-libro:hover img{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(27,42,65,.22) }
.estante-libro:active img{ transform:translateY(0) }
.estante-libro:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px }
.estante-pie{
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave); text-align:center;
  line-height:1.3; padding:0 2px; flex:0 0 auto;
}

/* En el móvil, los cuatro libros tienen que caber ENTEROS sin bajar la
   pantalla. En vez de fijarles un tamaño a ojo —que encaja en un móvil y se
   sale en el siguiente—, la estantería se mide contra el alto real de la
   ventana y los libros se encogen lo que haga falta.

   Los 300px que se restan son lo que ocupa todo lo demás: la cabecera y el
   menú de arriba (~200px) y el hueco que el body reserva abajo para la barra
   fija (90px), más un respiro. `dvh` y no `vh` porque en el móvil la barra de
   direcciones aparece y desaparece, y `vh` se queda con el alto de cuando no
   está — justo el caso en que se saldría. */
@media (max-width:899px){
  .estanteria{
    height:calc(100dvh - 300px);
    /* Un suelo bajo a propósito: en una pantalla muy corta preferimos libros
       pequeños a que reaparezca el scroll, que es justo lo que se quería
       quitar. Por debajo de esto ya no encogen más. */
    min-height:250px;
    grid-template-rows:1fr 1fr;
    align-content:stretch;
  }
  .estante-libro{ min-height:0 }
  /* `contain` y no `cover`: una portada recortada es justo lo que no se
     quiere. Prefiere dejar aire a los lados antes que comerse el dibujo. */
  .estante-libro img{ min-height:0; flex:1 1 auto; height:100%; object-fit:contain }
}

/* ── Cuentos ── */
.cue-titulo{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.6rem; margin:6px 0 2px }
.cue-sub{
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-suave); margin-bottom:12px;
}
.cue-btn-nuevo{
  background:#8B7BB8; color:#fff; border:none; border-radius:999px; padding:10px 18px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.85rem;
  cursor:pointer; margin-bottom:12px;
}
.cue-tarjeta{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--blanco); border:1.5px solid var(--linea); border-left:5px solid #8B7BB8;
  border-radius:14px; padding:13px 14px; margin-bottom:10px;
}
.cue-lomo{ font-size:1.5rem; line-height:1; flex:0 0 auto }
.cue-txt{ flex:1; min-width:0 }
.cue-tarjeta h3{
  margin:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.02rem; line-height:1.25; color:var(--tinta);
}
.cue-fecha{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tinta-suave); margin-top:3px;
}
.cue-notas{ font-size:.84rem; color:var(--tinta-suave); line-height:1.45; margin-top:6px }
.cue-nota{ font-size:.76rem; color:var(--tinta-suave); line-height:1.4; margin:2px 0 4px }
.cue-error{ color:var(--sello); font-size:.8rem; margin-top:4px }
.cue-acciones{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap }
.cue-leer{
  background:#8B7BB8; color:#fff; border-radius:999px; padding:6px 14px;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
}
.cue-leer:hover{ background:#7566A5 }
.cue-acciones button{
  background:var(--papel); border:1.5px solid transparent; border-radius:8px;
  cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  color:var(--tinta-suave); padding:5px 10px; font-weight:600;
}
.cue-acciones button:hover{ border-color:var(--tinta-suave) }
.cue-acciones .borrar{ margin-left:auto; background:none; font-size:1rem; padding:2px 8px }
.cue-acciones .borrar:hover{ color:var(--sello); border-color:transparent }

.opo-titulo{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.6rem; margin:6px 0 2px }
.opo-sub{ font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-suave); margin-bottom:12px }

.opo-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px }
.opo-kpi{
  background:var(--blanco); border:1.5px solid var(--tinta); border-top:4px solid var(--kc,var(--sello));
  border-radius:12px; padding:11px 6px; text-align:center; min-width:0;
}
.opo-kpi b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.5rem; line-height:1.1; color:var(--kc,var(--sello));
}
.opo-kpi span{
  font-family:'IBM Plex Mono',monospace; font-size:.5rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-suave); line-height:1.3; display:block; margin-top:3px;
}
.opo-kpi.k-dias{ --kc:#A4243B }
.opo-kpi.k-pct{ --kc:#2E6E4E }
.opo-kpi.k-mes{ --kc:#D8973C }

.opo-fecha{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.opo-fecha button{
  background:none; border:none; font-family:'IBM Plex Mono',monospace; font-size:.64rem;
  color:var(--tinta-suave); cursor:pointer; padding:2px 0; text-decoration:underline dotted;
}
.opo-fecha button:hover{ color:var(--tinta) }
.opo-fecha label{ font-family:'IBM Plex Mono',monospace; font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave) }
.opo-fecha input{ border:1.5px solid var(--linea); border-radius:8px; padding:5px 8px; font:inherit; font-size:.8rem }

/* La barra grande: el temario entero de un vistazo. */
.opo-barra-total{
  height:12px; background:var(--blanco); border:1.5px solid var(--tinta);
  border-radius:999px; overflow:hidden; margin-bottom:16px;
}
.opo-barra-total i{
  display:block; height:100%;
  background:linear-gradient(90deg,#2E6E4E,#5FA97C);
  transition:width .35s ease;
}

.opo-sw-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.opo-sw-flechas{ display:flex; gap:6px; flex:0 0 auto }
.opo-sw-flechas button{
  width:30px; height:30px; border-radius:9px; border:2px solid var(--tinta);
  background:var(--blanco); color:var(--tinta); font-size:1rem; font-weight:700;
  cursor:pointer; line-height:1;
}
.opo-sw-flechas button:disabled{ opacity:.3; cursor:default }
.opo-filtro{ display:flex; align-items:center; gap:8px; margin:6px 0 8px }
.opo-filtro label{
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-suave); flex:0 0 auto;
}
.opo-filtro select{
  flex:1; min-width:0; border:1.5px solid var(--linea); border-radius:8px;
  padding:6px 8px; font:inherit; font-size:.8rem; background:var(--blanco); color:var(--tinta);
}
.opo-carta-pie{
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.04em;
  color:var(--tinta-suave); margin:-6px 0 10px;
}
.opo-sw-rango{ font-family:'IBM Plex Mono',monospace; font-size:.58rem;
  letter-spacing:.06em; color:var(--tinta-suave) }

/* El carrusel: una página de quince temas por pantalla, con imán de scroll —
   el mismo gesto que los tops de cine. */
.opo-sw{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; gap:0; margin:0 -4px;
}
.opo-sw::-webkit-scrollbar{ display:none }
.opo-sw-pag{
  flex:0 0 100%; scroll-snap-align:start; padding:0 4px;
  display:flex; flex-direction:column; gap:5px;
}

.opo-tema{ background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px; overflow:hidden }
.opo-tema.con-avance{ border-color:var(--tinta) }
.opo-tema-cab{
  width:100%; display:flex; align-items:center; gap:9px; padding:8px 10px;
  background:none; border:none; font:inherit; text-align:left; cursor:pointer;
}
.opo-tema-cab:hover{ background:var(--papel) }
.opo-tema-n{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px; color:#fff;
  display:grid; place-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:600;
}
.opo-tema-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.opo-tema-txt b{ font-size:.86rem; font-weight:600; color:var(--tinta); line-height:1.25 }
.opo-tema-txt i{
  font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:.54rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave);
}
.opo-tema-pct{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--tinta-suave); flex:0 0 auto }
.opo-tema-barra{ height:3px; background:var(--papel) }
.opo-tema-barra i{ display:block; height:100%; transition:width .3s ease }

.opo-tema-cuerpo{ padding:2px 10px 10px; border-top:1px solid var(--papel) }
.opo-tema-largo{ font-size:.76rem; color:var(--tinta-suave); line-height:1.45; margin:8px 0 9px }
.opo-fases{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px }
.opo-fase{
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta-suave);
  border-radius:8px; padding:8px 2px; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; font-weight:600;
}
.opo-fase:hover{ border-color:var(--tinta); color:var(--tinta) }
.opo-fase.on{ background:var(--visado); border-color:var(--visado); color:#fff }
.opo-fase:disabled{ opacity:.5; cursor:default }

/* ── Los exámenes tipo test de un tema (ExamenTema.tsx) ── */
.opoex-abrir{
  display:block; width:100%; margin-top:9px; padding:9px 10px; cursor:pointer;
  border:1.5px solid var(--sello); border-radius:8px; background:var(--blanco);
  color:var(--sello); font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:700;
  text-align:left;
}
.opoex-abrir:hover{ background:var(--sello); color:#fff }
.opoex{ max-width:640px }
.opoex-tit{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.3rem; margin:6px 0 2px }
.opoex-sub{ font-size:.8rem; color:var(--tinta-suave); margin:0 0 14px }
.opoex-etq{
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave); margin:10px 0 6px;
}
.opoex-barra{ height:4px; background:var(--linea); border-radius:2px; margin-bottom:12px }
.opoex-barra i{ display:block; height:100%; background:var(--visado); border-radius:2px; transition:width .2s ease }
/* El enunciado va en su propia tarjeta con borde marcado: en móvil, sin
   marco, pregunta y opciones se fundían y costaba leer dónde acababa una. */
.opoex-origen{
  font-size:.62rem; font-style:italic; text-align:right;
  color:var(--tinta); opacity:.55; margin:0 0 4px;
}
.opoex-enunciado{
  font-size:.94rem; line-height:1.5; font-weight:600; margin:0 0 12px;
  background:var(--blanco); border:2px solid var(--tinta); border-radius:12px;
  padding:13px 14px;
}
.opoex-opciones{ display:grid; gap:8px }
.opoex-opcion{
  display:flex; gap:10px; align-items:flex-start; text-align:left; cursor:pointer;
  background:var(--blanco); border:1.5px solid var(--tinta-suave); border-radius:10px;
  padding:11px 12px; font-family:inherit; color:var(--tinta); font-size:.86rem; line-height:1.4;
}
.opoex-opcion b{ font-family:'IBM Plex Mono',monospace; flex-shrink:0 }
.opoex-opcion:hover:not(:disabled){ border-color:var(--tinta) }
.opoex-opcion.correcta{ border:2px solid var(--visado); background:#E7F1EA }
.opoex-opcion.fallada{ border:2px solid var(--sello); background:#F7E6E9 }
.opoex-opcion.apagada{ opacity:.55 }
.opoex-opcion:disabled{ cursor:default }
.opoex-veredicto{
  margin-top:10px; padding:9px 12px; border-radius:9px; font-weight:700; font-size:.86rem;
}
.opoex-veredicto.bien{ background:#E7F1EA; color:var(--visado) }
.opoex-veredicto.mal{ background:#F7E6E9; color:var(--sello) }
.opoex-btn{
  display:block; margin-top:12px; padding:11px 16px; width:100%; cursor:pointer;
  background:var(--tinta); color:var(--blanco); border:1.5px solid var(--tinta); border-radius:10px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.88rem;
}
.opoex-btn:disabled{ opacity:.45; cursor:default }
.opoex-tarjeta{
  display:flex; align-items:center; gap:10px;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px;
  padding:11px 13px; margin-bottom:8px;
}
.opoex-tarjeta.bloqueada{ opacity:.55 }
.opoex-tarjeta.hecha{ border-color:var(--visado) }
.opoex-tarjeta-txt{ flex:1; min-width:0 }
.opoex-tarjeta-txt b{ display:block; font-size:.88rem }
.opoex-tarjeta-txt small{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta-suave) }
.opoex-tarjeta .opoex-btn{ width:auto; margin:0; padding:8px 14px; flex-shrink:0 }
.opoex-pct{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.94rem; flex-shrink:0 }
.opoex-pct.bien, .opoex-resumen b.bien{ color:var(--visado) }
.opoex-pct.mal, .opoex-resumen b.mal{ color:var(--sello) }
.opoex-candado{ flex-shrink:0 }
.opoex-resumen{
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:var(--radio);
  padding:22px 16px; text-align:center; margin-top:10px;
}
.opoex-resumen b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:2.6rem; font-weight:800 }
.opoex-resumen p{ margin:6px 0 0; font-size:.86rem }
.opoex-nota{ color:var(--tinta-suave); font-size:.76rem !important }
.opoex-resumen .opoex-btn{ max-width:260px; margin:14px auto 0 }
.opoex-feedback{
  margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  color:var(--tinta-suave); line-height:1.6;
}

.opo-carta{
  background:var(--blanco); border:1.5px solid var(--tinta); border-radius:var(--radio);
  padding:14px; margin-bottom:10px;
}
.opo-carta h3{ margin:0 0 10px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem }
.opo-barras{ display:grid; gap:7px }
.opo-barra-fila{ display:flex; align-items:center; gap:9px }
.opo-barra-fila.apagada{ opacity:.55 }
.opo-barra-rotulo{ flex:0 0 92px; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--tinta) }
.opo-barra-pista{ flex:1; background:var(--papel); border-radius:999px; height:10px; overflow:hidden }
.opo-barra-pista i{ display:block; height:100%; border-radius:999px; background:var(--visado) }
.opo-barra-fila.apagada .opo-barra-pista i{ background:var(--linea) }
.opo-barra-fila b{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; min-width:20px; text-align:right }

.opo-ritmo-cifra{ display:flex; align-items:baseline; gap:7px; margin-bottom:6px }
.opo-ritmo-cifra b{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.9rem; color:var(--sello); line-height:1 }
.opo-ritmo-cifra span{ font-size:.78rem; color:var(--tinta-suave); line-height:1.3 }
.opo-ritmo-nota{ font-size:.78rem; color:var(--tinta-suave); line-height:1.5 }
.opo-ritmo-veredicto{ font-size:.8rem; line-height:1.45; margin-top:8px; padding:8px 10px; border-radius:9px }
.opo-ritmo-veredicto.bien{ background:rgba(46,110,78,.1); color:var(--visado); border:1.5px solid rgba(46,110,78,.3) }
.opo-ritmo-veredicto.flojo{ background:rgba(216,151,60,.12); color:#8A5B12; border:1.5px solid rgba(216,151,60,.35) }

.opo-ultimos{ display:grid; gap:6px }
.opo-ultimo{ display:flex; align-items:center; gap:9px }
.opo-ultimo-f{ flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--tinta-suave) }
.opo-ultimo-n{ flex:1; min-width:0; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.opo-ultimo i{
  flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:.54rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--visado);
}

/* ── Plan semanal ── */
.opo-plan-atrasados{
  font-size:.76rem; line-height:1.5; color:#8A5B12; background:rgba(216,151,60,.12);
  border:1.5px solid rgba(216,151,60,.35); border-radius:9px; padding:8px 10px; margin-bottom:10px;
}
/* Carrusel horizontal por PÁGINAS de dos semanas, una debajo de la otra:
   la lista vertical de 50 semanas obligaba a bucear; así la actual y la
   siguiente están delante (apiladas, a todo el ancho) y cada gesto a la
   derecha trae las dos siguientes (lo pasado queda a la izquierda — el
   arranque se coloca solo en la semana actual). */
.opo-semanas{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px;
  scroll-snap-type:x mandatory;
}
.opo-semanas-pag{
  flex:0 0 100%; min-width:0; scroll-snap-align:start;
  display:grid; gap:8px; align-content:start;
}
.opo-semana{
  box-sizing:border-box; min-width:0;
  border:1.5px solid var(--linea); border-radius:10px; padding:8px 10px; background:var(--papel);
}
.opo-semana.actual{ border-color:var(--visado) }
.opo-semana.atrasada{ border-color:var(--sello) }
.opo-semana-cab{ display:flex; align-items:center; gap:7px; margin-bottom:7px; flex-wrap:wrap }
.opo-semana-cab b{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--tinta) }
.opo-semana-etq{
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--visado); background:rgba(46,110,78,.1); border-radius:999px; padding:2px 7px;
}
.opo-semana-etq.atrasada{ color:var(--sello); background:rgba(164,36,59,.1) }
/* El marcador de la esquina: cumplidos / planteados de esa semana. */
.opo-semana-stat{
  margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:600;
  color:var(--tinta-suave);
}
.opo-semana-stat.completa{ color:var(--visado); font-weight:700 }
/* En columna y a lo ancho: el nombre del tema se escribe entero, hay sitio. */
.opo-semana-temas{ display:flex; flex-direction:column; gap:6px; align-items:stretch }
.opo-plan-tema{ display:flex; flex-direction:column; gap:6px }
.opo-plan-chip{
  display:flex; align-items:center; gap:6px; width:100%; box-sizing:border-box;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; text-align:left;
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta-suave);
  border-radius:10px; padding:5px 8px; cursor:pointer; line-height:1.35;
}
.opo-plan-chip-txt{ flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere }
.opo-plan-chip.hecho{ border-color:var(--visado); color:var(--visado); background:rgba(46,110,78,.08) }
/* La fase planteada, como sello de color a la derecha del tema. */
.opo-plan-fase-etq{
  flex:0 0 auto; font-style:normal; font-size:.56rem; font-weight:700; letter-spacing:.03em;
  color:#FFF; border-radius:999px; padding:2px 6px;
}
.opo-plan-editor{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:9px; padding:8px;
  display:flex; flex-direction:column; gap:7px; width:100%;
}
.opo-plan-quitar{
  border:none; background:none; color:var(--sello); font-family:'IBM Plex Mono',monospace;
  font-size:.62rem; cursor:pointer; padding:2px 0; text-align:left;
}
.opo-plan-anadir{
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--tinta-suave);
  border:1.5px dashed var(--linea); background:none; border-radius:999px; padding:5px 10px; cursor:pointer;
}
.opo-plan-anadir:hover{ border-color:var(--tinta); color:var(--tinta) }
.opo-plan-anadir-fila{ display:flex; gap:6px; align-items:center; min-width:0 }
.opo-plan-fase-sel{ font-size:.68rem; padding:5px 4px; flex:0 0 auto }
.opo-plan-anadir-sel{ font-size:.68rem; padding:5px 6px; flex:1; min-width:0 }

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

.lr-titulo{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; margin:6px 0 8px }
.lr-intro{ font-size:.82rem; color:var(--tinta-suave); line-height:1.5; margin-bottom:10px }
.lr-enlace{
  width:100%; border:1.5px solid var(--linea); border-radius:9px;
  padding:9px 10px; font:inherit; font-size:.85rem; background:var(--blanco);
}
.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 }
.lr-btn{
  background:var(--tinta); color:var(--papel); border:none; border-radius:999px;
  padding:10px 18px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:.85rem; cursor:pointer;
}
.lr-btn:disabled{ opacity:.6; cursor:default }
.lr-error{ color:var(--sello); font-size:.82rem; 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(--blanco); border:1.5px solid var(--linea); border-radius:12px;
  padding:10px; 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; background:var(--visado); color:#fff; border:none; border-radius:999px;
  padding:7px 13px; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
}
.lr-enlazar.hecho{ background:none; color:var(--visado); 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. */
.aba-lupa{
  position:fixed; inset:0; z-index:60; 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 }

/* 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:.72rem; color:var(--sello); background:rgba(164,36,59,.08);
  border-radius:6px; padding:5px 8px; margin-top:6px !important;
}