/* biblical-earth · estilos de la búsqueda y de las vistas de estudio: grafo, conexión, lectura, recorridos, portada,
   presentación, reunión y letra grande. Parte de kit/tokens.css y kit/components.css. Dueño durante el reparto: app-estudio. */

/* ---------- Búsqueda ---------- */
.buscador { position: relative; flex: 0 1 470px; min-width: 0; }
.buscador .be-search { max-width: none; cursor: text; }
.be-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 500 var(--fs-md)/1 var(--font-sans); color: var(--ink); padding: 0; }
.be-search input::placeholder { color: var(--ink-3); }
.be-search input::-webkit-search-cancel-button { display: none; }
.be-search:focus-within { background: var(--surface); border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent); }
.resultados { top: 46px; left: 0; width: min(560px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; }
.be-result { cursor: pointer; }
.be-result:hover { background: var(--surface-2); }
.be-result--active:hover { background: var(--gold-soft); }
.res-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.res-texto .be-row__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-fecha { margin-left: auto; flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--gold-ink); background: var(--gold-soft); border-radius: var(--r-pill); padding: 2px 8px; font-variant-numeric: tabular-nums; }
.res-etiqueta { font-size: var(--fs-2xs); font-weight: 700; color: var(--secular); background: var(--secular-soft); border-radius: var(--r-pill); padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.be-result mark { background: #f3e2b3; color: inherit; border-radius: 2px; padding: 0 1px; }
.sin-resultados { padding: 14px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.sin-resultados__pista { display: block; margin-top: 6px; color: var(--ink-3); }
.filtro { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px 0 14px; border-radius: var(--r-pill); background: var(--ink); color: #fbf7ef; border: 0; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; max-width: 300px; }
.filtro span:first-child { overflow: hidden; text-overflow: ellipsis; }
.filtro-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 15px; line-height: 1; }
.filtro[hidden] { display: none; }

/* ---------- Piezas comunes ---------- */
.enlace-texto { border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.enlace-texto:hover { text-decoration: underline; }
.enlace-titulo { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.enlace-titulo:hover { color: var(--accent); }
.be-card__eyebrow .enlace-texto { font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.subgrupo { margin: 10px 0 4px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.interruptor { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.interruptor input { accent-color: var(--ink); }
.etiqueta-deducido { color: #4d3f62; background: #efe9f4; border-color: #d9cfe6; font-size: var(--fs-2xs); height: 20px; padding: 0 7px; }
span.etiqueta-deducido, span.etiqueta-incierto, span.etiqueta-texto { border-radius: var(--r-pill); padding: 1px 7px; font-weight: 700; }
.etiqueta-incierto { color: var(--zone); background: #efe9f4; }
.etiqueta-texto { color: var(--tier1); background: var(--tier1-soft); }
.acciones-estudio { display: flex; justify-content: flex-end; gap: 6px; margin-top: -6px; }
.acciones-persona { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vista[hidden] { display: none !important; }
.vista-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; flex-wrap: wrap; }
.vista-cerrar { margin-left: auto; }

/* ---------- Ficha de persona (F-01) ---------- */
.en-una-frase { font-size: var(--fs-md); }
.vida { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 2px; }
.vida-barra { display: block; height: 10px; border-radius: 5px; background: var(--node-persona); }
.vida-barra--ini { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
.vida-barra--fin { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.vida-barra--ini.vida-barra--fin { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.vida-texto { font-size: var(--fs-xs); }
/* La fecha de actividad puede llevar una aclaración larga (Pablo): que parta en líneas y no se salga de la tarjeta. */
.vida-texto .be-chrono { white-space: normal; height: auto; min-height: 24px; max-width: 100%; padding-top: 2px; padding-bottom: 2px; }
/* Ficha de hallazgo: los chips largos («Jesús, luz del mundo, da la vista a un ciego…») parten en líneas en vez de
   estrechar la columna de rótulos y salirse de la tarjeta. */
.hallazgo-kv { grid-template-columns: max-content minmax(0, 1fr); }
.hallazgo-kv dd { min-width: 0; }
.hallazgo-kv .be-chip, .hallazgo-kv .be-chrono { white-space: normal; height: auto; min-height: 24px; max-width: 100%; padding-top: 2px; padding-bottom: 2px; text-align: left; }
/* Familia: padres, cónyuges, hijos y hermanos, cada uno un enlace a su ficha. */
.familia-lista { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; font-size: var(--fs-sm); }
.familia-lista dt { color: var(--ink-3); font-size: var(--fs-xs); padding-top: 2px; }
.familia-lista dd { margin: 0; min-width: 0; }
.familia-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.familia-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.fam-fecha { color: var(--ink-3); font-size: var(--fs-2xs); }
.fam-refs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fam-refs .be-ref { font-size: var(--fs-2xs); }
.relaciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.relaciones li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-sm); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.relaciones li:last-child { border-bottom: 0; padding-bottom: 0; }
.rel-verbo { color: var(--ink-3); min-width: 88px; }
.rel-meta { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; font-size: var(--fs-xs); color: var(--ink-3); align-items: center; }
.rel-razon { width: 100%; font-size: var(--fs-xs); color: var(--ink-2); }
.no-afirmamos { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.aviso-recorrido .enlace-texto { font-size: inherit; }

/* ---------- Libro y capítulos (F-10, A-09) ---------- */
.capitulos { display: flex; flex-wrap: wrap; gap: 4px; }
.cap { min-width: 30px; height: 28px; padding: 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font: 600 var(--fs-xs)/1 var(--font-sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.cap:hover { border-color: var(--ink-3); color: var(--ink); }
.cap--datos { color: var(--ink); border-color: var(--line-2); box-shadow: inset 0 -3px 0 var(--gold); }
.cap--leido { background: var(--tier1-soft); border-color: #bcd6c6; color: var(--tier1); }
.cap--actual { background: var(--ink); border-color: var(--ink); color: #fbf7ef; box-shadow: none; }
.leyenda-caps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); margin: 8px 0 0; }
.leyenda-caps .cap { min-width: 14px; height: 12px; padding: 0; cursor: default; }

/* ---------- Grafo (07) y conexión (10) ---------- */
.vista-grafo, .vista-conexion { position: absolute; top: 0; left: 0; bottom: 0; width: min(64%, 1000px); z-index: 5; display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line); box-shadow: var(--shadow-2); outline: none; }
.vista-conexion { overflow: auto; }
.migas-grafo { flex-wrap: wrap; gap: 4px; }
.miga { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); padding: 3px 10px 3px 4px; font: 600 var(--fs-sm)/1 var(--font-sans); color: var(--ink-2); cursor: pointer; }
.miga--actual { background: var(--gold-soft); border-color: var(--gold-line); color: var(--ink); }
.grafo-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 16px 8px; }
.grafo-filtros .be-chip { cursor: pointer; opacity: .55; }
.grafo-filtros .be-chip--active { background: var(--surface); color: var(--ink); border-color: var(--line-2); opacity: 1; }
.grafo-filtros .be-chip.chip-vigente { background: var(--ink); color: #fbf7ef; border-color: var(--ink); }
.grafo-modo .be-seg__opt { border: 0; background: transparent; cursor: pointer; }
.grafo-modo .be-seg__opt--on { background: var(--surface); }
.sector-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.sector-punto--personas { background: var(--node-persona); }
.sector-punto--lugares { background: var(--node-lugar); }
.sector-punto--cartas { background: var(--node-texto); }
.sector-punto--hechos { background: var(--node-evento); }
.grafo-oculto { font-size: var(--fs-xs); }
.grafo-lienzo { flex: none; margin: 0 8px; }
.grafo-lienzo svg { pointer-events: none; }
.arista line { stroke: var(--ink-4); stroke-width: 1.6; }
.arista--fuerte line { stroke: var(--accent); stroke-width: 3.5; }
.arista--deducida line { stroke-dasharray: 7 5; }
.arista--incierta line { stroke: var(--zone); stroke-dasharray: 6 5; }
.arista--pasado line { stroke-dasharray: 2 5; opacity: .55; }
.arista--futuro line { stroke: var(--line-2); stroke-dasharray: 9 6; }
.arista--grupo { stroke: var(--line-2); stroke-width: 1.2; }
.arista line.arista-toque { stroke: transparent; stroke-width: 14; stroke-dasharray: none; pointer-events: stroke; cursor: help; opacity: 1; }
.gnodo { border: 0; background: none; padding: 2px; cursor: pointer; font: inherit; color: inherit; z-index: 1; max-width: 190px; }
.gnodo:hover { z-index: 3; }
.gnodo:hover .be-node, .gnodo:focus-visible .be-node { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold), var(--shadow-2); }
.gnodo .be-gnode__label, .gnodo .be-gnode__meta { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.gnodo--pasado, .gnodo--futuro { opacity: .5; }
.gnodo--pasado:hover, .gnodo--futuro:hover, .gnodo--pasado:focus-visible, .gnodo--futuro:focus-visible { opacity: 1; }
.gnodo--incierto .be-node { background: var(--surface); color: var(--zone); box-shadow: inset 0 0 0 2px var(--zone); outline: 2px dashed var(--zone); outline-offset: 2px; }
.gnodo--nuevo { animation: gnodo-entra .45s ease-out; }
@keyframes gnodo-entra { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.gnodo--grupo .burbuja { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); font-family: var(--font-sans); font-size: 11px; width: 34px; height: 34px; }
.gnodo-centro { z-index: 2; pointer-events: none; }
.gnodo-centro .be-gnode__label { font: 600 var(--fs-xl)/1.2 var(--font-serif); }
.sector-rotulo { position: absolute; transform: translate(-50%, -50%); color: var(--ink-3); font-size: var(--fs-2xs); pointer-events: none; }
.grafo-vacio { position: absolute; left: 50%; top: 68%; transform: translateX(-50%); width: min(420px, 90%); text-align: center; }
.grafo-vacio .fila-chips { justify-content: center; }
.grafo-vacio .be-chip { cursor: pointer; }
.grafo-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: auto 12px 12px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--ink-2); }
.grafo-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.lin { display: inline-block; width: 26px; border-top: 2px solid var(--ink-3); }
.lin--deducida { border-top-style: dashed; }
.lin--incierta { border-top: 2px dashed var(--zone); }
.lin--pasado { border-top: 2px dotted var(--ink-4); }
.lin--futuro { border-top: 2px dashed var(--line-2); }
.grafo-tarjeta { z-index: 8; pointer-events: none; }
.grafo-tarjeta .be-card__pad { padding: 12px 14px; }
.tarjeta-arista + .tarjeta-arista { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.tarjeta-verbo { font-size: var(--fs-sm); margin: 4px 0; }
.tarjeta-razon { margin: 6px 0 4px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
.grafo-lista { overflow: auto; padding: 4px 16px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; flex: 1; }
.grafo-lista__sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.grafo-lista__sec h3 { display: flex; align-items: center; gap: 6px; }
.grafo-lista ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-fila { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lista-fila:last-child { border-bottom: 0; }
.lista-fila--pasado, .lista-fila--futuro { opacity: .65; }
.lista-arista { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-2); padding-left: 8px; border-left: 2px solid var(--ink-4); }
.lista-arista.arista--deducida { border-left-style: dashed; }
.lista-arista.arista--incierta { border-left: 2px dashed var(--zone); }
.lista-arista.arista--fuerte { border-left-color: var(--accent); }
.lista-verbo { font-weight: 600; color: var(--ink); }

.conexion-cab { align-items: flex-start; }
.pregunta-fija { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 var(--fs-xl)/1.3 var(--font-serif); }
.casilla { height: 36px; width: 180px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); font: 600 var(--fs-md)/1 var(--font-sans); color: var(--ink); }
.casilla:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent); }
.conexion-cuerpo { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.conexion-pista { font-size: var(--fs-md); }
/* overflow-y: hidden y sin margen negativo: la raya de la pestaña ya no sobresale un píxel, y sin ese píxel no sale una
   barra vertical diminuta con sus dos flechas junto a las pestañas. */
.pestanas-camino { margin: 0; overflow-x: auto; overflow-y: hidden; }
.pestanas-camino .be-tab { border: 0; border-bottom: 2px solid transparent; margin-bottom: 0; background: none; cursor: pointer; }
.pestanas-camino .be-tab--on { border-bottom-color: var(--ink); }
.be-tab--debil { font-style: italic; }
.cadena { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 8px 2px; }
.cadena-nodo { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 4px; min-width: 90px; font: inherit; color: inherit; }
.cadena-nombre { font: 600 var(--fs-lg)/1.2 var(--font-serif); text-align: center; }
.cadena-arista { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; padding: 0 4px; position: relative; font: inherit; color: inherit; }
.cadena-arista::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2.5px solid var(--ink-3); z-index: 0; }
.cadena-arista--deducida::before { border-top-style: dashed; }
.cadena-arista--lugar::before { border-top: 2.5px dashed var(--line-2); }
.cadena-num { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fbf7ef; font-size: 11px; font-weight: 700; order: 2; }
.cadena-verbo { font-size: var(--fs-sm); font-weight: 600; order: 1; text-align: center; padding-bottom: 4px; }
.cadena-fecha { font-size: var(--fs-xs); color: var(--ink-3); order: 3; text-align: center; padding-top: 4px; }
.cadena--plegada { display: none; }
.cadena-desplegar { cursor: pointer; }
.acciones-camino .be-btn { cursor: pointer; }
.pasos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.paso-titulo { margin: 4px 0 6px; font: 600 var(--fs-lg)/1.25 var(--font-serif); }
.paso-tarjeta--activo { box-shadow: 0 0 0 2px var(--gold), var(--shadow-2); }
.paso-tarjeta .fuentes { margin: 0; }

/* ---------- Modo lectura (12) ---------- */
.vista-lectura { position: absolute; top: var(--topbar-h); left: 0; bottom: var(--timeline-h); width: 390px; z-index: 6; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-2); }
.lectura-cab { align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.lectura-libro select { border: 0; background: none; font: 600 var(--fs-xs)/1 var(--font-sans); color: var(--ink-3); padding: 0; margin-top: 4px; cursor: pointer; }
.lectura-titulo { margin: 2px 0 0; font: 600 var(--fs-3xl)/1.1 var(--font-serif); }
.lectura-cuerpo { overflow: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lectura-cuerpo > * { flex-shrink: 0; }
.capitulos--lectura { max-height: 96px; overflow: auto; }
.lectura-wol { height: 42px; font-size: var(--fs-md); text-decoration: none; }
.lectura-nota { margin: -6px 0 0; font-size: var(--fs-xs); }
.lectura-controles, .lectura-acciones { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.lectura-acciones .be-btn { cursor: pointer; }
.lectura-acciones .be-btn[disabled] { opacity: .4; cursor: default; }
.indice-pasajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pasaje-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.pasaje-item--abierto { background: var(--surface); border-color: var(--gold); box-shadow: var(--shadow-1); }
.pasaje-boton { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.pasaje-num { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink-3); font-size: 12px; font-weight: 700; }
.pasaje-item--visto .pasaje-num { background: var(--tier1); border-color: var(--tier1); color: #fff; }
.pasaje-item--abierto .pasaje-num { background: var(--gold); border-color: var(--gold); color: #fff; }
.pasaje-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pasaje-ref { font-size: var(--fs-xs); color: var(--tier1); font-weight: 700; }
.pasaje-tit { font-size: var(--fs-sm); font-weight: 600; }
.pasaje-detalle { padding: 0 12px 12px 44px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.pasaje-detalle p { margin: 0; line-height: 1.45; }
.pasaje-detalle .be-chip { cursor: pointer; }
.siguiente-cap { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; border-radius: var(--r-md); background: var(--ink); color: #fbf7ef; padding: 12px 14px; cursor: pointer; }
.siguiente-cap__tit { font: 600 var(--fs-xl)/1.2 var(--font-serif); }
.siguiente-cap__lug { font-size: var(--fs-xs); opacity: .8; }
.marca-num { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; border: 2px solid #fff; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink-3), var(--shadow-2); font: 700 12px/1 var(--font-sans); cursor: pointer; }
.marca-num--vista { background: var(--tier1); color: #fff; box-shadow: 0 0 0 1.5px var(--tier1), var(--shadow-2); }
.marca-num--activa { background: var(--gold); color: #fff; box-shadow: 0 0 0 1.5px var(--gold), var(--shadow-2); min-width: 30px; height: 30px; border-radius: 15px; font-size: 14px; }
.marca-num.sin-etiqueta { visibility: hidden; }

/* ---------- Recorrido guiado (14) ---------- */
.progreso { display: flex; gap: 4px; margin: 10px 0 14px; }
.progreso-tramo { flex: 1; display: flex; flex-direction: column; gap: 5px; border: 0; background: none; padding: 0; cursor: pointer; min-width: 0; }
.progreso-barra { display: block; height: 6px; border-radius: 3px; background: var(--paper-2); }
.progreso-tramo--visto .progreso-barra { background: var(--tier1); }
.progreso-tramo--actual .progreso-barra { background: var(--gold); }
.progreso-anio { font-size: var(--fs-2xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.progreso-tramo--actual .progreso-anio { color: var(--ink); font-weight: 700; }
/* Con muchas paradas cada tramo mide 20 px y su año quedaba en «3…»: sin sitio para el año entero, no se escribe (la
   fecha de la parada va en su píldora, debajo). El tramo sigue siendo el mismo botón, con su nombre para el lector. */
.progreso-tramo { container-type: inline-size; }
@container (max-width: 46px) { .progreso-anio { visibility: hidden; } }
.recorrido-entrada { margin-bottom: 10px; }
.parada-cab { display: flex; align-items: center; gap: 8px; }
.parada-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700; }
.recorrido-texto { font: 400 var(--fs-xl)/1.5 var(--font-serif); color: var(--ink); margin: 8px 0 12px; }
.pregunta-texto { font-weight: 600; margin: 4px 0 10px; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.opcion { height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer; }
.opcion--elegida { border-color: var(--ink-3); background: var(--paper-2); }
.opcion--correcta, .opcion--bien { border-color: var(--tier1); background: var(--tier1-soft); color: var(--tier1); }
.explicacion { margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.45; }
.resumen-recorrido { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.recorrido-nav { display: flex; gap: 8px; }
.recorrido-nav .be-btn { cursor: pointer; }
.recorrido-sig { flex: 1; height: auto; min-height: 48px; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 14px; white-space: normal; text-align: left; }
.recorrido-sig .be-caps { color: #d8cfbf; font-size: var(--fs-2xs); }
.recorrido-ant { height: auto; min-height: 48px; white-space: normal; text-align: left; }
.recorrido-herramientas .be-btn { cursor: pointer; }
.vista-recorrido { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; flex-direction: column; gap: 8px; max-width: 300px; pointer-events: none; }
.vista-recorrido > * { pointer-events: auto; }
.recorrido-flota { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: var(--fs-sm); }
.recorrido-flota .be-btn { align-self: flex-start; margin: 4px 0 0 -8px; cursor: pointer; }
.recorrido-nosabemos { padding: 10px 12px; font-size: var(--fs-sm); background: #f4eff8; }
.recorrido-nosabemos p { margin: 4px 0 0; }

/* ---------- Menú «Estudio» ---------- */
.estudio-ajustes { position: relative; }
#estudio-boton { cursor: pointer; }
.estudio-menu { top: 40px; right: 0; left: auto; width: 290px; display: flex; flex-direction: column; }
.estudio-menu[hidden] { display: none; }
.estudio-menu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: var(--r-sm); font: 500 var(--fs-sm)/1.2 var(--font-sans); cursor: pointer; color: var(--ink); }
.estudio-menu button:hover, .estudio-menu button:focus-visible { background: var(--surface-2); }
.estudio-menu [aria-checked="true"]::after { content: " ✓"; color: var(--tier1); font-weight: 700; }
.menu-titulo { padding: 8px 10px 2px; }

/* ---------- Portada (15) ---------- */
.vista-portada { position: absolute; inset: 0; z-index: 30; overflow: auto; background: var(--paper); }
.portada { max-width: 1280px; margin: 0 auto; padding: 0 40px 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 40px; }
.portada-cab { grid-column: 1 / -1; display: flex; align-items: center; height: 64px; border-bottom: 1px solid var(--line); }
.portada-cab .be-btn { cursor: pointer; font-size: var(--fs-sm); }
.portada-heroe { padding-top: 28px; }
.portada-eyebrow { color: var(--tier1); }
.portada-titulo { font: 600 clamp(34px, 4.4vw, 58px)/1.05 var(--font-serif); margin: 12px 0 14px; letter-spacing: -.01em; }
.portada-sub { font: 400 var(--fs-xl)/1.5 var(--font-serif); color: var(--ink-2); margin: 0 0 22px; max-width: 620px; }
.portada-busca { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 6px 6px 6px 12px; box-shadow: var(--shadow-1); max-width: 640px; }
.portada-busca .be-search { flex: 1; border: 0; background: none; box-shadow: none; height: 44px; max-width: none; }
.portada-busca input { font-size: var(--fs-lg); }
.portada-busca .be-btn { height: 44px; cursor: pointer; }
.portada-ejemplos { margin-top: 12px; }
.portada-ejemplos .be-chip { cursor: pointer; height: 30px; font-size: var(--fs-sm); }
.portada-seguir { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; border: 1px dashed var(--line-2); background: var(--surface-2); border-radius: var(--r-md); padding: 10px 14px; text-align: left; cursor: pointer; font: 500 var(--fs-md)/1.3 var(--font-sans); color: var(--ink); max-width: 640px; }
.portada-preguntas { align-self: end; }
.pregunta-guia { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 2px; text-align: left; font: 600 var(--fs-md)/1.35 var(--font-sans); color: var(--ink); cursor: pointer; }
.pregunta-guia:first-of-type { margin-top: 8px; }
.pregunta-guia span:last-child { color: var(--accent); }
.portada-epocas, .portada-abajo, .portada-pie { grid-column: 1 / -1; }
.portada-sec-cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.portada-sec-cab h2 { margin: 0; font: 600 var(--fs-2xl)/1.2 var(--font-serif); }
.epocas { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.epoca { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--r-md); background: var(--surface); padding: 10px 10px 12px; cursor: pointer; min-height: 150px; font: inherit; color: inherit; }
.epoca:hover, .epoca:focus-visible { box-shadow: 0 0 0 2px var(--c), var(--shadow-2); }
.epoca--sin-libro { background: repeating-linear-gradient(135deg, var(--surface) 0 8px, var(--surface-2) 8px 16px); border-style: dashed; border-top-style: solid; }
.epoca-num { font-size: var(--fs-2xs); color: var(--ink-3); }
.epoca-nombre { font: 600 var(--fs-lg)/1.15 var(--font-serif); }
.epoca-fecha { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.epoca-libros { font-size: var(--fs-xs); color: var(--ink-3); }
.escala-real { display: flex; height: 10px; margin-top: 14px; border-radius: 5px; overflow: hidden; }
.escala-tramo { border: 0; padding: 0; background: var(--c); cursor: pointer; min-width: 3px; }
.escala-tramo:hover { filter: brightness(1.15); }
.escala-nota { font-size: var(--fs-xs); margin: 6px 0 0; }
.portada-abajo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.recorridos-portada { display: contents; }
.tarjeta-recorrido { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; cursor: pointer; font: inherit; color: inherit; }
.tarjeta-recorrido .be-caps { color: var(--tier1); }
.tarjeta-recorrido__tit { font: 600 var(--fs-2xl)/1.15 var(--font-serif); }
.tarjeta-recorrido__ir { margin-top: auto; font-weight: 700; font-size: var(--fs-sm); }
.fuentes-portada { background: var(--tier1-soft); }
.fuentes-portada p { display: flex; gap: 10px; align-items: baseline; margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.portada-pie { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Hoja de impresión del recorrido (A-16) ---------- */
.hoja-impresion { display: none; }
@media print {
  body > *:not(.hoja-impresion) { display: none !important; }
  .hoja-impresion { display: block; font: 11pt/1.45 var(--font-serif); color: #000; }
  .hoja-impresion h1 { font-size: 20pt; margin: 0 0 4pt; }
  .hoja-impresion h2 { font-size: 13pt; margin: 14pt 0 4pt; }
  .hoja-meta { font: 9pt var(--font-sans); color: #444; }
  .hoja-escala { width: 100%; height: 60px; }
  .hoja-escala line { stroke: #888; stroke-width: 2; }
  .hoja-escala circle { fill: #fff; stroke: #000; stroke-width: 2; }
  .hoja-escala text { font: 700 11px var(--font-sans); text-anchor: middle; }
  .hoja-escala .hoja-anio { font-weight: 400; font-size: 10px; }
  .hoja-paradas li, .hoja-preguntas li, .hoja-respuestas li { margin-bottom: 6pt; page-break-inside: avoid; }
  .hoja-fecha { font: 9pt var(--font-sans); color: #444; }
}

/* ---------- Letra grande (D-11) ---------- */
.be-letra-grande { --fs-2xs: 12.5px; --fs-xs: 13.5px; --fs-sm: 15px; --fs-md: 16.5px; --fs-lg: 18.5px; --fs-xl: 22px; --fs-2xl: 27px; --fs-3xl: 33px; }
.be-letra-grande .be-node--sm { width: 26px; height: 26px; font-size: 13px; }

/* ---------- Modo reunión (D-02): fondo oscuro, brillo bajo, sin animaciones ---------- */
/* Cálido, como siempre, y con cada par de texto y fondo en AA (4,5:1; 3:1 el texto grande). Los colores que en claro
   sirven de texto sobre un fondo suave (fuentes, fechas, enlaces, avisos) pasan a tonos claros; los que sirven de relleno
   bajo letra blanca (personas, lugares, Pablo, reproducir) se quedan en su tono medio, y donde un relleno claro lleva
   letra encima, esa letra pasa a oscura. Medido con el guion de contraste del informe de be-68c.1. */
.be-reunion { color-scheme: dark;
  --paper: #1b1813; --paper-2: #24201a; --surface: #211d17; --surface-2: #28231c;
  --ink: #efe7d8; --ink-2: #cfc4b1; --ink-3: #b1a58d; --ink-4: #9c907c; --line: #3a3328; --line-2: #5a5042; --focus: #6cb8bd;
  --accent: #a3432b; --accent-2: #c7684d; --accent-soft: #3b2a22; --accent-ink: #e0856c;
  --gold: #b8892f; --gold-soft: #3a3020; --gold-ink: #e8c983; --gold-line: #6b5629; --gold-hint: #cdb27a; --gold-wash: #fff8e6;
  --tier1: #86c7ab; --tier1-soft: #1f322b; --tier1-line: #2e4a3f; --tier2: #d9b36a; --tier2-soft: #36301f;
  --secular: #a9b8cc; --secular-soft: #262d38; --unverified: #e59ab0; --unverified-soft: #3a222b; --zone: #c1a6d6; --link: #8fb8d3;
  --node-persona: #a3432b; --node-lugar: #2f6f73; --node-evento: #b8892f; --route-todo: #a3432b; --rejilla: rgba(211, 198, 176, .16);
  --emp-egipto: #c29a3b; --emp-asiria: #8e4b3a; --emp-babilonia: #3f5e8c; --emp-persia: #7a5c8e; --emp-grecia: #3c7f86; --emp-roma: #a23b2e; --emp-israel: #5b7d3a;
  --map-label: #efe7d8; --map-label-halo: rgba(27, 24, 19, .9);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .3); --shadow-2: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .35); --shadow-3: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .45); }
.be-reunion body { background: var(--paper); color: var(--ink); }
.be-reunion *, .be-reunion *::before, .be-reunion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* Mapa: más oscuro, y sus controles con el fondo del resto. */
.be-reunion .mapa-gl { filter: brightness(.72) saturate(.8); }
.be-reunion .be-float { background: rgba(33, 29, 23, .96); }
.be-reunion .maplibregl-ctrl-group { background: var(--surface); }
.be-reunion .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.be-reunion .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) sepia(.2); }
.be-reunion .maplibregl-ctrl-attrib { background: rgba(33, 29, 23, .88) !important; color: var(--ink-2); }
.be-reunion .maplibregl-ctrl-attrib a { color: var(--ink-2); }
.be-reunion .maplibregl-ctrl-attrib-button { filter: invert(1); }
.be-reunion .maplibregl-ctrl-scale { background: rgba(33, 29, 23, .9); }
/* Rellenos claros (la tinta, que en oscuro es clara) con letra oscura encima. */
.be-reunion .be-btn--primary, .be-reunion .be-chip--active, .be-reunion .filtro, .be-reunion .siguiente-cap, .be-reunion .cap--actual { background: #efe7d8; color: #1b1813; border-color: #efe7d8; }
.be-reunion .grafo-filtros .be-chip.chip-vigente, .be-reunion .cadena-num, .be-reunion .aviso { color: #1b1813; }
.be-reunion .filtro-x { background: rgba(0, 0, 0, .12); }
.be-reunion .recorrido-sig .be-caps { color: #5b503f; }
.be-reunion .regla-texto { fill: #1b1813; }
.be-reunion .regla-quitar path { stroke: #1b1813; }
/* El oro y el verde de las fuentes, rellenos bajo letra: letra oscura, que en blanco no llega a 4,5:1. */
.be-reunion .be-node--evento, .be-reunion .be-cursor__flag, .be-reunion .marca-num--activa, .be-reunion .marca-num--vista,
.be-reunion .pasaje-item--abierto .pasaje-num, .be-reunion .pasaje-item--visto .pasaje-num, .be-reunion .parada-num,
.be-reunion .insignia summary, .be-reunion .be-tier--unverified::before { color: #1b1813; }
.be-reunion .cursor-texto { fill: #1b1813; }
.be-reunion .sinc-cursor::before { color: #1b1813; }
/* El color de Pablo como texto: un tono más claro que el del relleno. */
.be-reunion .enlace-titulo:hover, .be-reunion .pregunta-guia span:last-child, .be-reunion .carriles-boton b, .be-reunion .carril-pin.on,
.be-reunion .menu-carril.on .be-i, .be-reunion .proxima b, .be-reunion .proxima-icono { color: var(--accent-ink); }
/* Búsqueda: el trozo que coincide, en marcador ámbar con letra oscura (antes, amarillo claro con letra clara). */
.be-reunion .be-result mark { background: #e8c983; color: #1b1813; }
/* Fondos pastel fijos de las fichas, las etiquetas y los avisos. */
.be-reunion .be-gnode__label { background: rgba(33, 29, 23, .92); }
.be-reunion .be-date { background: var(--gold-soft); border-color: var(--gold-line); }
.be-reunion .be-date__value { color: #efe7d8; }
.be-reunion .be-note { background: #262d38; color: #cfd8e3; }
.be-reunion .be-note--uncertain, .be-reunion .recorrido-nosabemos { background: #2e2638; color: #d9cfe6; }
.be-reunion .etiqueta-deducido { color: #d9cfe6; background: #2e2638; border-color: #4a3d5c; }
.be-reunion .etiqueta-incierto { background: #2e2638; }
.be-reunion .cap--leido { border-color: var(--tier1-line); }
.be-reunion .bloque-nivel--1 { background: #1f2a25; }
.be-reunion .bloque-nivel--2 { background: #2b2518; }
.be-reunion .fecha-secular .fecha-grande { color: #cfd8e3; }
.be-reunion .fecha-secular, .be-reunion .be-chrono--secular { border-color: #56657a; }
.be-reunion .prec { background: rgba(0, 0, 0, .25); }
.be-reunion .sin-verificar { background: repeating-linear-gradient(45deg, var(--unverified-soft) 0 3px, #2a1a20 3px 6px); }
/* Línea de tiempo: las cajas de cartas y sucesos, y las filas alternas, con el fondo oscuro. */
.be-reunion .tramo-carta, .be-reunion .tramo-evento { fill: #2b261e; }
.be-reunion .texto-carta, .be-reunion .texto-evento { fill: var(--gold-ink); }
.be-reunion .evento-fondo .tramo-evento { fill: rgba(43, 38, 30, .7); }
.be-reunion .sinc-fila:nth-child(even) .sinc-pista { background: rgba(255, 255, 255, .03); }

/* ---------- Presentación (A-11): pantalla completa, letra grande, se avanza con flechas o mando ---------- */
.be-presentando { --fs-sm: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 25px; --fs-2xl: 30px; --fs-3xl: 40px; --panel-w: 500px; }
.be-presentando .buscador, .be-presentando .modos, .be-presentando #compartir, .be-presentando .filtro { display: none !important; }
.be-presentando .recorrido-texto { font-size: 26px; }
.be-presentando .marca-num { transform: scale(1.3); }

/* ---------- Movimiento reducido (D-10) ---------- */
@media (prefers-reduced-motion: reduce) {
  .gnodo--nuevo { animation: none; }
  .vista-grafo *, .vista-conexion *, .vista-lectura *, .vista-portada * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 1180px) {
  .epocas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 760px) {
  #q-kbd, .filtro { display: none !important; }
  .buscador { flex: 1; }
  .resultados { position: fixed; top: calc(var(--topbar-h) - 6px); left: 12px; right: 12px; width: auto; }
  .be-search input { font-size: 15px; }
  #estudio-boton { padding: 0 4px; width: 30px; }
  .estudio-texto { display: none; }
  .capitulos--lectura { flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .capitulos--lectura .cap { flex: none; }
  .estudio-menu { position: fixed; top: calc(var(--topbar-h) - 4px); right: 8px; width: min(300px, calc(100vw - 16px)); }
  .vista-grafo, .vista-conexion { width: 100%; border-right: 0; padding-bottom: 36vh; }
  .vista-grafo { padding-bottom: 92px; }   /* el grafo pliega la hoja: quedan su asa y la fila del suceso */
  .vista-grafo .grafo-leyenda { display: none; }
  .grafo-lista { grid-template-columns: 1fr; }
  .gnodo .be-gnode__meta { display: none; }
  .pregunta-fija { font-size: var(--fs-lg); }
  .casilla { width: 130px; }
  .cadena { flex-direction: column; align-items: stretch; }
  .cadena-arista { min-height: 64px; flex-direction: row; justify-content: center; gap: 8px; }
  .cadena-arista::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2.5px solid var(--ink-3); }
  .cadena-arista--deducida::before { border-left-style: dashed; }
  .cadena-verbo, .cadena-fecha { background: var(--paper); position: relative; z-index: 1; padding: 0 4px; }
  .vista-lectura { top: auto; left: 0; right: 0; width: auto; bottom: var(--timeline-h); max-height: 46vh; border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 30px rgba(40, 28, 10, .18); }
  .lectura-titulo { font-size: var(--fs-2xl); }
  .marca-num { min-width: 30px; height: 30px; border-radius: 15px; font-size: 14px; }
  .vista-recorrido { top: 50px; left: 10px; max-width: 60%; }
  .recorrido-nosabemos { display: none; }
  .recorrido-texto { font-size: var(--fs-lg); }
  .portada { grid-template-columns: minmax(0, 1fr); padding: 0 16px 20px; gap: 18px; }
  .portada-titulo { font-size: 32px; }
  .portada-busca .be-btn { padding: 0 12px; }
  .portada-cab { height: 56px; }
  .portada-heroe { padding-top: 12px; }
  .portada-sub { font-size: var(--fs-lg); }
  .portada-pie .be-spacer { display: none; }
}

/* ---------- Marca del tipo de fuente, sin jerga ---------- */
/* Un punto lleno: Biblia o publicación de jw.org. Un aro: otra fuente que jw.org ha usado. El nombre va en el texto
   emergente y en aria-label (ficha.js, marcaNivel). La forma distingue los dos sin depender solo del color. */
.marca-nivel { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; background: var(--tier1); }
.marca-nivel--2 { background: transparent; box-shadow: inset 0 0 0 2px var(--tier2); }
.fuentes li > .marca-nivel { margin-top: 5px; }
.insignia summary { min-width: 0; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: transparent; }
.insignia--2 summary { background: transparent; }
.insignia summary:hover { background: var(--paper-2); }
.insignia-pop .marca-nivel { margin-right: 4px; }
/* Las píldoras que quedan («Biblia y jw.org», «Historia y arqueología», la leyenda, las fuentes de una fecha secular)
   llevan la misma marca en lugar del número 1 o 2 del kit. */
.be-tier--1::before, .be-tier--2::before { content: ""; width: 10px; height: 10px; }
.be-tier--2::before { background: transparent; box-shadow: inset 0 0 0 2px var(--tier2); }

/* Grafo (ronda 3): interruptor «Solo lo vigente», leyenda plegable, lista en columnas, pestañas de caminos que parten
   en líneas y lo de otras fechas sin opacidad en el texto. */
.interruptor-grafo { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 600 var(--fs-xs)/1 var(--font-sans); cursor: pointer; }
.interruptor-grafo:hover { border-color: var(--ink-3); }
.interruptor-grafo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.interruptor-pista { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: background .15s; }
.interruptor-bola { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: left .15s; }
.interruptor-grafo[aria-checked="true"] .interruptor-pista { background: var(--ink); box-shadow: none; }
.interruptor-grafo[aria-checked="true"] .interruptor-bola { left: 19px; background: var(--surface); }
.interruptor-estado { min-width: 2ch; color: var(--ink-2); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .interruptor-pista, .interruptor-bola { transition: none; } }
details.grafo-leyenda { display: block; }
.grafo-leyenda > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.grafo-leyenda[open] > summary { margin-bottom: 6px; }
.grafo-leyenda__filas { display: flex; flex-direction: column; gap: 6px; }
.grafo-leyenda__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.grafo-leyenda__fila > .be-caps { min-width: 4.5em; }
.leyenda-nodo { width: 14px; height: 14px; font-size: 0; box-shadow: none; }
.grafo-lista { display: block; }
.grafo-lista__cols { columns: 230px; column-gap: 12px; }
.grafo-lista__sec { break-inside: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin: 0 0 12px; }
.grafo-lista__sec h3 { break-after: avoid; }
.lista-fila { break-inside: avoid; }
/* Lo de otras fechas se distingue por su palabra («ya pasó», «aún no») y un círculo más tenue, no por texto
   transparente: con opacidad .5 los nombres bajaban de 4,5:1. */
.gnodo--pasado, .gnodo--futuro, .lista-fila--pasado, .lista-fila--futuro { opacity: 1; }
.gnodo--pasado .be-node, .gnodo--futuro .be-node { opacity: .55; }
.gnodo--pasado .be-gnode__label, .gnodo--futuro .be-gnode__label { color: var(--ink-2); font-weight: 500; }
.lista-cuando { margin-left: 6px; font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
/* Las pestañas de los caminos parten en líneas en vez de desplazarse: su desplazamiento sacaba dos barras dentro de
   «¿Cómo se relaciona?» (una horizontal y otra vertical de 2 px por el margen negativo de cada pestaña). */
.pestanas-camino { overflow: visible; flex-wrap: wrap; column-gap: 18px; row-gap: 0; }
@media (max-width: 560px) { .pregunta-fija .casilla { flex: 1 1 130px; width: auto; min-width: 0; } }

/* ---------- Tabletas en vertical (761 a 900 px) ---------- */
/* Junto a la ficha el mapa mide unos 370 px: el grafo y la conexión lo tapan entero en vez de dejar una columna de
   235 px, y la lectura va encima de la ficha, así el mapa sigue a la vista mientras se lee. */
@media (min-width: 761px) and (max-width: 900px) {
  .vista-grafo, .vista-conexion { width: 100%; border-right: 0; }
  .vista-lectura { left: auto; right: 0; width: var(--panel-w); border-right: 0; border-left: 1px solid var(--line); }
  /* Las tarjetas de arriba a la izquierda no tapan la columna de botones del mapa. */
  .vista-ahora { max-width: calc(100% - 82px); }
  .vista-recorrido { max-width: min(300px, calc(100% - 82px)); }
}
/* Grafo y conexión estrechos, en el móvil o en la tableta: la cadena de la conexión va de arriba abajo, como en el
   móvil. Mide la vista, no la ventana: a 768 px la vista es tan estrecha como un móvil. */
.vista-grafo, .vista-conexion { container-type: inline-size; }
@container (max-width: 560px) {
  .cadena { flex-direction: column; align-items: stretch; }
  .cadena-arista { min-height: 64px; flex-direction: row; justify-content: center; gap: 8px; }
  .cadena-arista::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2.5px solid var(--ink-3); }
  .cadena-arista--deducida::before { border-left-style: dashed; }
  .cadena-arista--lugar::before { border-top: 0; border-left: 2.5px dashed var(--line-2); }
  .cadena-verbo, .cadena-fecha { background: var(--paper); position: relative; z-index: 1; padding: 0 4px; }
  .pregunta-fija { font-size: var(--fs-lg); }
  .pregunta-fija .casilla { flex: 1 1 130px; width: auto; min-width: 0; }
  .gnodo .be-gnode__meta { display: none; }
}
/* En círculo y estrecho (pedido a mano), los rótulos más cortos se pisan menos entre vecinos. */
@container (max-width: 480px) {
  .gnodo, .gnodo .be-gnode__label { max-width: 104px; }
}