/* biblical-earth · estilos de la línea de tiempo, «Ahora mismo», la sincronía y las tarjetas de fecha.
   Dueño durante el reparto: app-tiempo. */

/* ---------- Línea de tiempo ---------- */
.linea { grid-template-columns: 150px 1fr; }
.app.linea-grande, .app.con-sincronia { --timeline-h: min(62vh, 600px); }
.linea-barra { gap: 12px; }
.be-play__main, .be-play__btn { border: 0; cursor: pointer; }
.be-play__btn { background: none; }
.be-play__main { background: var(--accent); }
.be-play__main .icono-pausa, .be-play__main.en-marcha .icono-play { display: none; }
.be-play__main.en-marcha .icono-pausa { display: block; }
.zoom { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--paper-2); flex: none; }
.zoom button { border: 0; background: none; padding: 4px 10px; font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); cursor: pointer; }
.zoom button + button { border-left: 1px solid var(--line); }
/* La escala elegida en tinta invertida: en el modo reunión la tinta es clara y el texto blanco no se leía (be-64b.3). */
.zoom button.on { background: var(--ink); color: var(--surface); }
.zoom .z-corto { display: none; }
.zoom-select { display: none; }   /* el desplegable de escalas es de la pantalla estrecha */
/* Velocidad de reproducción (be-64b.2): − «3 meses por segundo» +. Fija el ancho del texto para que la barra no salte. */
.velocidad { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.velocidad .be-speed { min-width: 19ch; text-align: center; }
.velocidad.manual .be-speed { border-color: var(--ink-3); color: var(--ink); }
.vel-boton { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); font: 700 15px/1 var(--font-sans); cursor: pointer; }
.vel-boton:hover:not(:disabled) { background: var(--paper-2); }
.vel-boton:disabled { cursor: default; color: var(--ink-4); }
.menu-velocidad { padding: 2px 8px 4px; }
.linea-estado { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.linea-barra > .be-spacer { flex: 0 1 0; }
.cronologia { flex: none; }
/* «Sobre las fechas» (be-64b.6): un botón de texto que dice lo que hace, y su tarjeta. */
.linea-barra .fechas-boton { border: 1px solid transparent; background: none; padding: 3px 8px; border-radius: var(--r-pill); color: var(--ink-2); font: 600 var(--fs-xs) var(--font-sans); cursor: pointer; white-space: nowrap; }
.linea-barra .fechas-boton:hover, .linea-barra .fechas-boton[aria-expanded="true"] { background: var(--paper-2); border-color: var(--line); color: var(--ink); }
.fechas-ayuda { position: fixed; z-index: 30; overflow: auto; padding: 12px 14px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.fechas-ayuda[hidden] { display: none; }
.fa-cabecera { display: flex; align-items: center; justify-content: space-between; }
.fa-cabecera .be-card__eyebrow { margin: 0; }
.fa-texto { margin: 0; color: var(--ink); line-height: 1.4; }
.fa-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; line-height: 1.35; }
.fa-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.fa-muestra { margin-top: 2px; }
.fa-c { font: 700 var(--fs-sm) var(--font-sans); color: var(--ink); text-align: center; }
.fa-casilla { padding: 4px 0; }
.fa-mas { color: var(--link); font-weight: 600; }
.linea-botones { display: inline-flex; gap: 2px; flex: none; }
.linea-boton { width: 32px; height: 32px; cursor: pointer; }
.linea-boton[aria-pressed="true"], .linea-boton[aria-expanded="true"] { background: var(--gold-soft); color: var(--gold-ink); }
.minimapa { flex: 0 1 200px; min-width: 90px; height: 14px; opacity: 1; cursor: pointer; background: var(--paper-2); border: 1px solid var(--line); box-sizing: border-box; }
.minimapa .be-minimap__win { top: -4px; bottom: -4px; min-width: 4px; border-width: 1.5px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.minimapa-cursor { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--gold); pointer-events: none; }

/* Fecha de la barra superior: se puede escribir (T-20). */
#fecha { cursor: text; position: relative; }
#fecha.editando .be-date__value, #fecha.editando .be-date__hint, #fecha.editando .fecha-otra { visibility: hidden; }
.fecha-entrada { position: absolute; inset: 3px 6px; width: calc(100% - 12px); border: 1px solid var(--gold); border-radius: var(--r-sm); padding: 0 8px; font: 600 var(--fs-md) var(--font-sans); color: var(--ink); background: var(--surface); outline: none; }

/* Carriles */
.carriles-eje { height: 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 6px 0 12px; }
.carriles-boton { white-space: nowrap; border: 0; background: none; padding: 2px 6px; margin-left: -6px; border-radius: var(--r-sm); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
.carriles-boton:hover { background: var(--paper-2); color: var(--ink); }
.carriles-boton b { color: var(--accent); font-weight: 700; }
.linea-carriles { overflow: hidden; }
.linea-carriles .be-lane-label { font-size: var(--fs-sm); position: relative; overflow: hidden; }
.linea-carriles .be-lane-label > span:not(.edad):not(.be-tier) { overflow: hidden; text-overflow: ellipsis; }
.carril-nombre { flex: 0 0 auto; max-width: 75%; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edad { flex: 0 1 auto; min-width: 0; overflow: hidden; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.carril-pin { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: var(--surface-2); padding: 2px; border-radius: var(--r-xs); color: var(--ink-4); cursor: pointer; opacity: 0; }
.be-lane-label:hover .carril-pin, .carril-pin:focus-visible { opacity: 1; }
.carril-pin.on { opacity: 1; background: none; }
.be-lane-label:has(.carril-pin.on) { padding-right: 24px; }
.carril-pin.on { color: var(--accent); }
.nivel-carril { height: 18px; margin-left: auto; }
.linea-pista { cursor: crosshair; touch-action: none; }
.linea-pista.modo-regla { cursor: ew-resize; }
.linea-pista:focus-visible { outline-offset: -2px; }
.linea-svg { position: absolute; left: 0; top: 0; display: block; user-select: none; }
.linea-svg text { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; pointer-events: none; }
/* Los rótulos de los elementos se pulsan como su forma (linea.js, rotulo). El eje, el cursor y la regla, no. */
.linea-svg .item-texto { cursor: pointer; }
.linea-svg .item-texto text { pointer-events: auto; }
.linea-svg .item-texto:hover text { text-decoration: underline; }
.fila-par { fill: var(--surface-2); }
.tick-mayor { stroke: var(--line-2); }
.tick-menor { stroke: var(--line-2); opacity: .7; }
.rejilla { stroke: var(--rejilla); }
.linea-eje { stroke: var(--line); }
.tick-texto { fill: var(--ink-3); }
.densidad { fill: rgba(123, 111, 96, .28); }
.item { cursor: pointer; }
.item:focus { outline: none; }
.item:focus-visible rect { stroke: var(--focus); stroke-width: 2.5; }
/* Contraste (be-64b.1): las barras van a color pleno y su texto en blanco o, si lee mejor, en tinta oscura (linea.js,
   tonos). Una barra que casi no se distingue del fondo lleva borde. */
.viaje:hover .barra-viaje, .viaje.encima .barra-viaje, .estancia:hover .barra-estancia, .estancia.encima .barra-estancia { stroke: var(--ink); stroke-width: 1.5; }
.texto-barra { fill: #fff; }
/* Halo del color pleno de su barra (linea.js pone el trazo): donde la barra se difumina, el texto se sigue leyendo. */
.linea-svg .texto-barra { paint-order: stroke; stroke-width: 3px; stroke-linejoin: round; }
.linea-svg .item-texto.atenuado text { stroke: none !important; }
.linea-svg .sobre-claro { fill: #18221c; }
.con-borde { stroke: var(--ink-3); stroke-width: 1; }
.texto-fuera { fill: var(--ink-2); }
/* Paradas en contorno: el color del viaje y su nombre se siguen leyendo debajo. La sombra oscura las separa también donde
   la barra se difumina (fecha aproximada). */
.marca-parada { fill: none; stroke: #fff; stroke-width: 1; pointer-events: all; filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .75)); }
.marca-parada.narrativa { stroke-dasharray: 2 2; }
.marca-parada.en-borde, .parada.resaltado .marca-parada.en-borde { stroke: var(--ink); filter: none; }
.parada:hover .marca-parada { fill: rgba(255, 255, 255, .3); stroke-width: 2; }
.rombo { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.carta.seleccionada .rombo { fill: var(--accent); }
.carta.seleccionada .tramo-carta { stroke: var(--accent); stroke-width: 2.5; }
.texto-punto { fill: var(--ink-2); }
.tramo-carta { fill: var(--surface); stroke: var(--gold); stroke-width: 1.5; }
.texto-carta { fill: var(--gold); }
.tramo-evento { fill: var(--surface); stroke: var(--gold); stroke-width: 1.5; }
.rombo-evento { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.evento-fondo .tramo-evento { fill-opacity: .6; stroke-opacity: .85; }
.texto-evento { fill: var(--gold); }
/* Cálculo nuestro, sin verificar (C-03): rombo hueco y rosa, tramo rayado. */
.rombo-evento.calculo { fill: var(--surface); stroke: var(--unverified); stroke-width: 1.6; }
.tramo-evento.calculo { fill: var(--unverified-soft); stroke: var(--unverified); stroke-dasharray: 4 3; }
.texto-calculo { fill: var(--unverified); }
.pildora { fill: var(--ink); }
.texto-pildora { fill: var(--surface); }
.grupo-sucesos:hover .pildora { fill: var(--ink-2); }
/* El color de cada periodo lo pone linea.js (colorPeriodo); las eras alternan dos tonos. */
.barra-periodo { fill: var(--emp-roma); }
/* Personas: actividad de fondo, estancias encima (rayadas si la fecha es estimada) y el camino entre ellas. */
/* Las estancias largas («vivió en») van detrás, en contorno de su color: las cortas, llenas, se leen encima. */
.estancia.larga .barra-estancia { fill: var(--surface-2); stroke-width: 1.5; }
.texto-estancia-larga { fill: var(--ink-2); }
.camino { stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .7; }
.banda-juntos { fill: color-mix(in srgb, var(--gold) 16%, transparent); stroke: color-mix(in srgb, var(--gold) 45%, transparent); stroke-dasharray: 2 2; pointer-events: none; }
/* Meses (T-19): nuestros meses en contorno y letra de interfaz; los hebreos rellenos, rayados y en letra de libro.
   Se distinguen por la etiqueta, la forma y la letra, no solo por el color (daltonismo e impresión). */
.mes-caja { stroke-width: 1; }
.mes--nuestros .mes-caja { fill: var(--surface); stroke: var(--line-2); }
.mes--nuestros.mes-1 .mes-caja { fill: var(--surface-2); }
.mes--nuestros .mes-texto { fill: var(--ink-2); font-weight: 500; }
.mes--hebreos .mes-caja { fill: var(--line); stroke: var(--ink-4); }
.mes--hebreos.mes-1 .mes-caja { fill: var(--paper-2); }
.linea-svg .mes--hebreos .mes-texto { fill: var(--ink); font-family: var(--font-serif); font-size: 13px; font-weight: 700; }
.linea-svg .mes--hebreos.anacronico .mes-texto { font-style: italic; font-weight: 500; fill: var(--ink-2); }
.mes--hebreos.anadido .mes-caja { stroke-dasharray: 4 2; stroke: var(--ink-3); }
.mes-dia { stroke: var(--ink-4); stroke-width: 1; }
.linea-svg .mes-num { fill: var(--ink-3); font-size: 9.5px; font-weight: 500; }
.mes--hebreos .mes-num { fill: var(--ink-2); }
/* Horas entre la puesta de sol y nuestra medianoche: ya son el día hebreo siguiente (Perspicacia «Día»). */
.noche-hebrea rect { fill: rgba(31, 26, 20, .07); pointer-events: none; }
/* Fiestas del calendario hebreo, a escala de días. */
.fiesta-caja { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.2; }
.fiesta-texto, .fiesta-texto--fuera { fill: var(--ink); }
/* Etiquetas de las filas de meses y el enlace a la página del calendario. */
.linea-carriles .carril-mes--hebreos > span { font-family: var(--font-serif); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.linea-carriles .carril-mes--nuestros > span { font-weight: 500; }
.carril-ayuda { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--link); font-size: var(--fs-2xs); font-weight: 700; text-decoration: none; }
.carril-ayuda:hover { background: var(--paper-2); }
.carril-ayuda, .nombre-corto { display: none; }   /* en la pantalla ancha, «¿Qué meses son estos?» va en la barra */
.menu-meses { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 2px 8px 6px; }
/* Selector «Meses» de la barra: el mismo control segmentado que el del mapa, en pequeño. */
.meses-control { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.meses-control[hidden] { display: none; }
.meses-etiqueta { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.meses-seg { padding: 2px; gap: 1px; }
.meses-seg .be-seg__opt { height: 22px; padding: 0 8px; border: 0; background: transparent; font-size: var(--fs-2xs); cursor: pointer; }
.meses-seg .be-seg__opt--on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.meses-que { font-size: var(--fs-xs); font-weight: 500; color: var(--link); white-space: nowrap; }
/* La fecha en el otro calendario, en la barra superior. */
.fecha-otra { font-size: var(--fs-xs); font-weight: 500; color: var(--gold-hint); white-space: nowrap; }
.fecha-otra[hidden] { display: none; }
.fecha-otra.anacronico { font-style: italic; }
#fecha-valor i { font-style: italic; }
/* Fechas seculares como nota (C-02, C-04). */
.tramo-secular { fill: var(--secular-soft); stroke: var(--secular); stroke-width: 1.2; stroke-dasharray: 4 3; }
.texto-secular { fill: var(--secular); }
/* Con algo seleccionado (be-64b.1). Lo que no tiene que ver pasa a gris y hueco, pero se sigue leyendo: texto a 4,5:1 y
   borde a 3:1. Lo que tiene que ver conserva su color y lleva borde grueso. Lo seleccionado, además, un anillo de tinta.
   La diferencia es de forma (lleno o hueco, anillo) y no solo de color. Si nada de lo que se ve tiene que ver con la
   selección, no se atenúa nada (linea.js, clase sin-foco). */
.linea-svg:not(.sin-foco) .item.atenuado :is(.barra-viaje, .barra-periodo, .barra-estancia, .barra-actividad, .tramo-carta, .tramo-evento, .tramo-secular, .pildora) { fill: var(--surface-2) !important; stroke: var(--ink-3) !important; stroke-width: 1; stroke-opacity: 1; stroke-dasharray: none; }
.linea-svg:not(.sin-foco) .item.atenuado :is(.rombo, .rombo-evento) { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.5; }
.linea-svg:not(.sin-foco) .item.atenuado .marca-parada { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.linea-svg:not(.sin-foco) .item.atenuado rect[fill="url(#p-rayas-claras)"] { fill: url(#p-rayas-grises); }
.linea-svg:not(.sin-foco) .item.atenuado .texto-pildora, .linea-svg:not(.sin-foco) .item-texto.atenuado text { fill: var(--ink-3) !important; font-weight: 500; }
.item.resaltado :is(.barra-viaje, .barra-periodo, .tramo-carta, .tramo-evento, .barra-estancia, .tramo-secular) { stroke: var(--gold); stroke-width: 2.5; }
.item.resaltado :is(.tramo-carta, .tramo-evento) { fill: var(--gold-soft); }
.item.resaltado :is(.rombo, .rombo-evento) { stroke: var(--gold); stroke-width: 2.5; }
.parada.resaltado .marca-parada { stroke: #fff; stroke-width: 2; }
.parada.elegido .marca-parada { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.item-texto.resaltado text { font-weight: 700; }
.item-texto.resaltado :is(.texto-evento, .texto-carta) { fill: var(--ink); }
.anillo-elegido { fill: none; stroke: var(--ink); stroke-width: 2.5; pointer-events: none; }
.cursor-linea { stroke: var(--gold); stroke-width: 2; }
.cursor-bandera { fill: var(--gold); }
.cursor-texto { fill: #fff; font-weight: 700 !important; }
.banda-incierta { pointer-events: none; }
#linea-cursor { pointer-events: none; }
/* Regla (T-15), bucle (T-12) y marcadores (T-14). */
.regla-banda { fill: color-mix(in srgb, var(--gold) 10%, transparent); pointer-events: none; }
.regla-borde { stroke: var(--gold); stroke-dasharray: 3 3; pointer-events: none; }
.regla-etiqueta { fill: var(--ink); }
.regla-texto { fill: var(--surface); }
.regla-quitar { cursor: pointer; }
.regla-quitar circle { fill: rgba(255, 255, 255, .18); }
.regla-quitar path { stroke: var(--surface); stroke-width: 1.5; }
.bucle-marca { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .8; }
.marcador { fill: var(--accent); cursor: pointer; }

/* Lista de elementos que se solapan en el punto pulsado (linea.js, elegirEntre) */
.linea-eleccion { position: fixed; z-index: 31; overflow: auto; padding: 10px 10px 8px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); }
.linea-eleccion .be-card__eyebrow { margin: 0 8px 4px; }
.linea-eleccion .eleccion-fila { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 8px; text-align: left; }
.eleccion-fila span { font-weight: 600; color: var(--ink); }
.eleccion-fila small { color: var(--ink-3); font-size: var(--fs-2xs); }
.eleccion-fila:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Menú de la línea y elección de carriles */
.linea-menu { position: fixed; z-index: 30; overflow: auto; padding: 12px 14px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.linea-menu[hidden] { display: none; }
.linea-menu .be-card__eyebrow { margin: 8px 0 4px; }
.linea-menu .be-card__eyebrow:first-child { margin-top: 0; }
.menu-fila { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; }
.menu-boton, .menu-carril { border: 0; background: none; text-align: left; cursor: pointer; width: 100%; }
.menu-boton:hover, .menu-carril:hover, label.menu-fila:hover { background: var(--paper-2); }
.menu-boton .be-kbd { margin-left: auto; }
.menu-carril .be-i { color: var(--ink-4); }
.menu-carril.on .be-i { color: var(--accent); }
.menu-carril small { margin-left: auto; color: var(--ink-3); font-size: var(--fs-2xs); }
.menu-persona select { margin-left: auto; max-width: 60%; font: inherit; }
.menu-sub { margin: 6px 8px 2px; font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.menu-marcador { display: flex; align-items: center; gap: 6px; padding: 2px 8px; }
.menu-marcador .enlace-titulo { color: var(--link); flex: 1; }
.menu-x { border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--ink-3); padding: 2px 6px; border-radius: var(--r-xs); }
.menu-x:hover { background: var(--paper-2); color: var(--ink); }
.menu-ayuda { margin: 0 8px 4px; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.35; }

/* ---------- «Ahora mismo» (T-09) ---------- */
.ahora-kv { grid-template-columns: minmax(70px, auto) 1fr; }
.ahora-kv dt .enlace-titulo { color: var(--ink-3); font-weight: 500; }
.ahora-kv dd .enlace-titulo { font-weight: 600; }
.ahora-kv dd .be-ref { margin-left: 6px; }
.vista-ahora { position: absolute; left: 14px; top: 14px; z-index: 3; width: 320px; max-width: calc(100% - 28px); max-height: calc(100% - 28px); overflow: auto; }
.vista-ahora[hidden] { display: none; }
.ahora-flotante { padding: 12px 14px; }
.ahora-cabecera { display: flex; align-items: center; justify-content: space-between; }
.ahora-cabecera .be-card__eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.ahora-cabecera .be-i { width: 14px; height: 14px; }
.ahora-fecha { font: 600 var(--fs-2xl)/1.1 var(--font-serif); margin: 2px 0 2px; }

/* ---------- Sincronía (A-12) ---------- */
.vista-sincronia { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 4; background: var(--surface); display: flex; flex-direction: column; }
.vista-sincronia[hidden] { display: none; }
.sinc-cabecera { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sinc-pregunta { font: 500 var(--fs-xl)/1.3 var(--font-serif); color: var(--ink); }
.sinc-pregunta select { font: 600 var(--fs-lg) var(--font-serif); color: var(--node-periodo); border: 0; border-bottom: 1.5px solid var(--node-periodo); background: none; padding: 0 2px; max-width: 16em; cursor: pointer; }
.sinc-nota { font-size: var(--fs-xs); color: var(--ink-3); }
.sinc-cuerpo { flex: 1; overflow: auto; }
.sinc-tabla { position: relative; min-width: 640px; padding-bottom: 12px; }
.sinc-grupo { padding: 8px 12px 2px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--line); }
.sinc-grupo .enlace-titulo { text-transform: uppercase; letter-spacing: .07em; }
.sinc-fila { display: grid; grid-template-columns: var(--etiq) 1fr; min-height: 28px; }
.sinc-fila:nth-child(even) .sinc-pista { background: rgba(246, 241, 231, .45); }
.sinc-nombre { padding: 0 8px 0 12px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sinc-nombre small { color: var(--ink-3); font-weight: 500; }
.sinc-secular { color: var(--secular); }
.sinc-pista { position: relative; }
.sinc-eje { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 24px; }
.sinc-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); padding: 5px 0 0 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.sinc-barra { position: absolute; top: 4px; height: 20px; border: 0; border-radius: 5px; padding: 0 7px; background: var(--c, var(--emp-persia)); color: #fff; font: 600 var(--fs-2xs)/20px var(--font-sans); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; box-sizing: border-box; }
.sinc-barra span { overflow: hidden; text-overflow: ellipsis; display: block; }
.sinc-periodo { --c: var(--emp-persia); }
.sinc-barra.aprox { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.sinc-barra.abierta { -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 60%, transparent 100%); }
.sinc-barra.estimada, .sinc-barra.narrativa { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 4px, transparent 4px 8px); }
.sinc-barra.larga { opacity: .72; }
.sinc-alt { background: var(--secular-soft); color: var(--secular); border: 1px dashed var(--secular); }
.sinc-rombo { position: absolute; top: 4px; height: 20px; border: 0; background: none; padding: 0; display: flex; align-items: center; gap: 6px; transform: translateX(-7px); font: 600 var(--fs-2xs) var(--font-sans); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.sinc-rombo i { width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); border: 1.5px solid #fff; flex: none; }
.sinc-rombo.calculo i { background: var(--surface); border-color: var(--unverified); }
.sinc-rombo.calculo { color: var(--unverified); }
/* Lo que cae fuera del periodo elegido va hueco y gris, no transparente: con opacidad .3 su nombre bajaba a 1,9:1. */
.sinc-barra.fuera { background: var(--surface); background-image: none; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); -webkit-mask-image: none; mask-image: none; }
.sinc-rombo.fuera { color: var(--ink-3); }
.sinc-rombo.fuera i { background: var(--surface); border-color: var(--ink-3); }
.sinc-barra.corta { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
.sinc-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); pointer-events: none; z-index: 3; }
.sinc-cursor::before { content: attr(data-fecha); position: absolute; top: 2px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font: 700 var(--fs-2xs)/18px var(--font-sans); padding: 0 7px; border-radius: 5px; white-space: nowrap; }
.sinc-vacio { padding: 16px; color: var(--ink-2); font-size: var(--fs-md); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sinc-vacio .be-chip { cursor: pointer; }

/* ---------- Tarjetas de fecha (13b · C-02, C-04, C-05) ---------- */
.fechas { display: grid; gap: 10px; }
.fechas--dos { grid-template-columns: 1fr 1fr; }
.fecha-tarjeta { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; font: inherit; }
.fecha-tnm { background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-ink); }
.fecha-secular { background: var(--secular-soft); border: 1.5px dashed #b8c2cf; color: var(--secular); }
.fecha-calculo { background: var(--unverified-soft); border: 1.5px dashed var(--unverified); color: var(--unverified); }
.fecha-eyebrow { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.fecha-grande { font: 600 var(--fs-2xl)/1.15 var(--font-serif); color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.fecha-secular .fecha-grande { color: #3d4a5c; }
.fecha-grande--larga { font-size: var(--fs-lg); }
.fecha-sub { font-size: var(--fs-sm); }
.fecha-nota { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.35; }
.fecha-linea { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.fecha-fuentes a { margin-right: 8px; display: inline-flex; align-items: center; gap: 4px; }
.fecha-fuentes .be-tier { height: 16px; padding: 0; }
.fecha-regla { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.prec { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 4px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .7); border: 1px solid currentColor; font: 700 var(--fs-2xs) var(--font-sans); color: var(--gold-ink); }

/* Barra compactada por pasos cuando no cabe (linea.js, ajustarBarra). */
.linea-barra[data-compacta="1"] :is(.meses-etiqueta, .meses-que), .linea-barra[data-compacta="2"] :is(.meses-etiqueta, .meses-que), .linea-barra[data-compacta="3"] :is(.meses-etiqueta, .meses-que) { display: none; }
.linea-barra:not([data-compacta="0"]) ~ .linea-carriles .carril-ayuda { display: inline-grid; }
.linea-barra[data-compacta="2"] .zoom .z-largo, .linea-barra[data-compacta="3"] .zoom .z-largo { display: none; }
.linea-barra[data-compacta="2"] .zoom .z-corto, .linea-barra[data-compacta="3"] .zoom .z-corto { display: inline; }
.linea-barra[data-compacta="3"] :is(.velocidad, .cronologia) { display: none; }

/* ---------- Tabletas: la barra no cabe entera. La velocidad y «Sobre las fechas» pasan al menú de la línea (…), como en
   el móvil, y la frase de contexto se va: así el menú no se sale por la derecha. ---------- */
@media (max-width: 900px) {
  .linea-barra .velocidad, .linea-barra .cronologia, .linea-estado { display: none !important; }
  .linea-barra > .be-spacer { flex: 1 1 0; min-width: 0; }
}

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 760px) {
  .linea-estado, .linea-barra .velocidad, .cronologia, .minimapa { display: none !important; }
  .linea-carriles .be-lane-label .be-i { display: none; }
  .linea { grid-template-columns: 92px 1fr; }
  .linea-barra { gap: 4px; padding: 0 6px; }
  .linea-barra > .be-spacer { flex: 1 1 0; min-width: 0; }
  .linea-barra .be-play { gap: 2px; }
  /* Las seis escalas, en un desplegable: en fila no caben con dianas para el dedo (be-f1w). */
  .zoom { display: none; }
  .zoom-select { display: block; flex: 0 1 auto; min-width: 0; height: 36px; padding: 0 26px 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; color: var(--ink); font: 600 var(--fs-sm)/1 var(--font-sans); appearance: none; -webkit-appearance: none; cursor: pointer; }
  .be-reunion .zoom-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23d8cdb8' stroke-width='2'/%3E%3C/svg%3E"); }
  .linea-barra .meses-control { display: none; }   /* no cabe: el selector va en el menú de la línea */
  .carril-ayuda { display: inline-grid; }
  .linea-carriles .nombre-largo { display: none; }
  .linea-carriles .nombre-corto { display: inline; }
  #fecha:has(.fecha-otra:not([hidden])) { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 2px; padding-bottom: 2px; }
  #fecha:has(.fecha-otra:not([hidden])) .be-date__value { font-size: 15px; }
  .fecha-otra { font-size: 10.5px; line-height: 1.1; }
  .linea-boton { width: 30px; height: 30px; }
  .linea-carriles .be-lane-label { padding: 0 6px 0 10px; font-size: var(--fs-xs); gap: 5px; }
  .carril-pin { display: none; }
  .carriles-eje { padding: 0 4px 0 10px; }
  .carriles-boton { font-size: 9.5px; letter-spacing: 0; }
  .nivel-carril { display: none; }
  .edad { display: none; }
  .vista-ahora { left: 8px; right: 8px; top: 48px; width: auto; max-height: 45%; }
  .fechas--dos { grid-template-columns: 1fr; }
  .sinc-cabecera { padding: 6px 10px; gap: 6px; }
  .sinc-pregunta { font-size: var(--fs-md); }
  .sinc-pregunta select { font-size: var(--fs-md); }
  .sinc-nota { display: none; }
  .sinc-tabla { --etiq: 96px !important; }
  .app.linea-grande, .app.con-sincronia { --timeline-h: 50vh; }
}