/* Modo Enfoque · «Sigue el hilo» (js/hilo.js). Mismo lenguaje que el resto del overlay v4: mono en mayúsculas, oro solo en lo actual. */
#focusOverlay .hilo-fila{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; align-self:center; }
#focusOverlay .hilo-fila .fx-breath-toggle{ margin-bottom:0; }
#focusOverlay .hilo-toggle svg{ width:13px; height:13px; fill:currentColor; stroke:currentColor; stroke-width:1.1; }

#focusOverlay .hilo-rastro{ display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0; margin-top:4px; }
#focusOverlay .hilo-rastro:empty{ display:none; }
#focusOverlay .hilo-linea{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 0; max-width:min(92vw,560px); }
#focusOverlay .hilo-paso{ font:500 10.5px/1.3 "Geist Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(236,238,243,.42); white-space:nowrap; transition:color .3s; animation:hiloEntra .3s ease-out; }
#focusOverlay .hilo-paso.ahora{ color:#C9A84C; }
/* el hilo entre pasos: una línea fina con una luz que la recorre; un salto a otro versículo curado = línea punteada */
#focusOverlay .hilo-sep{ position:relative; width:26px; height:1px; margin:0 8px; background:rgba(236,238,243,.22); overflow:hidden; }
#focusOverlay .hilo-sep::after{ content:""; position:absolute; top:0; left:-40%; width:40%; height:1px; background:#F4F2EC; animation:hiloLuz 2.6s ease-in-out infinite; }
#focusOverlay .hilo-sep.salto{ background:none; border-top:1px dashed rgba(236,238,243,.22); height:0; }
#focusOverlay .hilo-sep.salto::after{ display:none; }
#focusOverlay .hilo-pie{ font:400 11px/1.3 Inter,system-ui,sans-serif; color:rgba(134,139,153,.8); }

@keyframes hiloLuz{ 0%{ left:-40%; } 60%,100%{ left:100%; } }
@keyframes hiloEntra{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ #focusOverlay .hilo-sep::after{ animation:none; display:none; } #focusOverlay .hilo-paso{ animation:none; } }

/* Con voz (RV-SDV Femenina): mientras lee, la cita actual respira en oro; si el navegador pide un toque antes de sonar, el botón lo avisa */
#focusOverlay .hilo-habla .hilo-paso.ahora{ animation:hiloHabla 1.8s ease-in-out infinite; }
#focusOverlay .hilo-toggle.hilo-toca{ box-shadow:0 0 0 1px rgba(201,168,76,.55); animation:hiloHabla 1.4s ease-in-out infinite; }
#focusOverlay .hilo-toggle.hilo-toca::after{ content:" · toca para oír"; color:#C9A84C; }
@keyframes hiloHabla{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@media (prefers-reduced-motion:reduce){ #focusOverlay .hilo-habla .hilo-paso.ahora, #focusOverlay .hilo-toggle.hilo-toca{ animation:none; } }