/* Hilo de pasos (2026-10-29) — js/lib/hilo.js. La barra de Vacía tu vaso, para cualquier página
   que pida entrar o datos. Negro y crema, números grandes; el dorado nunca sobre crema. */
.hilo { --hc: #F2EDE4; --hc2: #D9D2C5; --hn: #0B0B0A; --hl: #4A453E;
  width: 100%; max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.hilo__cuenta { margin: 0; color: var(--hc2); font: 700 1rem/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.hilo__pasos { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(var(--hilo-n, 3), minmax(0, 1fr)); gap: .35rem; }
.hilo__pasos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: #9A9389; font: 500 1rem/1.2 'DM Sans', system-ui, sans-serif; }
/* La línea que une los círculos: el hilo. */
.hilo__pasos li + li::before { content: ''; position: absolute; top: 1.25rem; right: calc(50% + 1.45rem); width: calc(100% - 2.9rem + .35rem); height: 2px; background: var(--hl); }
.hilo__pasos li.is-hecho + li::before { background: var(--hc2); }
.hilo__n { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--hl); font-weight: 700; font-size: 1.0625rem; background: var(--hn); }
.hilo__pasos li.is-hecho { color: var(--hc2); }
.hilo__pasos li.is-hecho .hilo__n { background: var(--hc2); border-color: var(--hc2); color: var(--hn); }
.hilo__pasos li.is-ahora { color: var(--hc); font-weight: 700; }
.hilo__pasos li.is-ahora .hilo__n { background: var(--hc); border-color: var(--hc); color: var(--hn); }
.hilo__ir { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-height: 44px; border-radius: .5rem; }
.hilo__ir:hover .hilo__n { border-color: var(--hc); }
.hilo__ir:focus-visible, .hilo__atras:focus-visible { outline: 2px solid var(--hc); outline-offset: 4px; }
.hilo__atras { all: unset; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font: 700 1.0625rem/1.2 'DM Sans', system-ui, sans-serif; color: var(--hc2); border-radius: .25rem; }
.hilo__atras:hover { color: var(--hc); }

/* En el teléfono no caben todos los nombres: solo se lee el del paso de ahora (y «Paso N de M» arriba). */
@media (max-width: 479px) {
  .hilo__pasos li:not(.is-ahora) .hilo__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hilo__pasos li.is-ahora .hilo__t { white-space: nowrap; }
}
@media (max-width: 399px) {
  .hilo__n { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .hilo__pasos li + li::before { top: 1.1rem; right: calc(50% + 1.3rem); width: calc(100% - 2.6rem + .35rem); }
}

/* Tu espacio (registro.html): la instrucción del paso, grande y en crema. */
.hilo-slot .hilo { margin: 1.25rem auto 1.5rem; }
.registro-paso { margin: 0 0 1rem; color: #F2EDE4; font: 700 1.375rem/1.3 'DM Sans', system-ui, sans-serif; }
#state-no-session .registro-note, #state-signin .registro-note { font-size: 1.0625rem; color: #D9D2C5; }
#state-no-session .registro-note a, #state-signin .registro-note a { color: #F2EDE4; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#state-no-session .btn, #state-signin .btn { min-height: 58px; font-size: 1.125rem; font-weight: 700; }
/* La puerta de Tu espacio va de noche, como Tu espacio abierto (css/style-espacio-noche.css). */
.ritual .registro-flow-card:has(#state-no-session.is-active, #state-signin.is-active) { background-color: #12110F; color: #F2EDE4; border: 1px solid rgba(242, 237, 228, 0.2); }
.ritual .registro-flow-card:has(#state-no-session.is-active, #state-signin.is-active)::before,
.ritual .registro-flow-card:has(#state-no-session.is-active, #state-signin.is-active) > .papel-luz { display: none; }
#state-no-session .registro-heading, #state-signin .registro-copy { color: #F2EDE4; }
#state-no-session .registro-heading { font-size: clamp(1.75rem, 6vw, 2.25rem); }
#state-no-session, #state-signin { text-align: center; }