/* Guía del recorrido (DC): bienvenida, fila de pasos, escena, panel y hoja del celular.
   Formas y movimiento del prototipo aprobado (docs/demo/prototipo-demo.html), pasados a los tokens. Ningún color suelto. */

:root { --alto-barra: 56px; --alto-pasos: 66px; }

/* ---------- Pestañas de otras pantallas: atenuadas, no ocultas ---------- */
.tab.atenuada { opacity: 0.8; }
.tab { transition: color var(--d-corta) var(--sale), opacity var(--d-corta) var(--sale); }

/* ---------- Fila de pasos ---------- */
.pasos { position: sticky; top: var(--alto-barra); z-index: 19; display: flex; align-items: center; padding: 14px 40px; background: var(--bg); border-bottom: 1px solid var(--hair); }
.chip { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; border-radius: var(--g-r-chip); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; flex: none; }
.chip-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--border); flex: none; transition: background var(--d-corta) var(--sale), color var(--d-corta) var(--sale); }
.chip.actual { color: var(--ink); }
.chip.actual .chip-n { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-hi); }
.chip.hecho { color: var(--ink2); }
.chip.hecho .chip-n { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.chip.trabado { opacity: 0.8; cursor: default; }
.chip .icono { width: 18px; height: 18px; stroke-width: 2.6; }
.chip .tilde { stroke-dasharray: 24; stroke-dashoffset: 24; animation: dibujar var(--d-tilde) var(--sale) 0.05s forwards; }
.sep { flex: 1; height: 3px; margin: 0 12px; border-radius: 3px; background: var(--hair); position: relative; overflow: hidden; min-width: 16px; }
.sep i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--d-larga) var(--sale); }
.sep.lleno i { transform: scaleX(1); }

@media (min-width: 860px) { .pasos.en-bienvenida { display: none; } }
.pasos.entra { animation: fundidoLargo 0.42s var(--sale) both; }

/* ---------- Cuerpo con la guía ---------- */
.cuerpo > .guia { align-self: flex-start; }
/* sin panel (bienvenida, cierre) el contenido va centrado en la página */
.cuerpo > .guia[hidden] ~ .contenido { margin-inline: auto; }
/* mientras la confirmación de «Volver a empezar» está abierta, la guía queda debajo del velo */
.guia.bajo-ventana { z-index: 30; }
/* en el tema claro, la capa clara de la guía se separa del fondo con un borde fino */
[data-theme='light'] .guia, [data-theme='light'] .bienvenida, [data-theme='light'] .aviso-suave { box-shadow: 0 0 0 1px var(--guia-linea), 0 8px 24px var(--track); }

/* ---------- Panel de la guía ---------- */
.guia { position: sticky; top: calc(var(--alto-barra) + var(--alto-pasos) + 16px); z-index: 45; width: var(--panel-w); flex: none; background: var(--guia); color: var(--guia-ink); border-radius: var(--g-r); padding: 24px; display: grid; gap: 16px; animation: entraIzq var(--d-media) var(--sale) both; }
@keyframes entraIzq { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.guia-region { display: contents; }
.guia-region:empty { display: none; }
.guia-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--guia-suave); }
.guia-cabeza:empty { display: none; }
.barrita { height: 5px; border-radius: 5px; background: var(--guia-linea); overflow: hidden; }
.barrita i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform var(--d-larga) var(--sale); }
.guia-texto { display: grid; gap: 8px; animation: fundido 0.22s var(--sale) both; }
.que-hacer { margin: 0; font-size: 24px; line-height: 1.22; font-weight: 700; letter-spacing: -0.01em; outline: none; }
.pista { margin: 0; font-size: 15px; color: var(--guia-suave); font-weight: 500; }
.para-que { background: none; border: 0; padding: 0; justify-self: start; color: var(--guia-ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; text-align: left; }
.para-que-texto { margin: 0; font-size: 14px; line-height: 1.45; color: var(--guia-suave); background: var(--guia-blanco); border-radius: 14px; padding: 10px 12px; animation: fundido 0.2s var(--sale) both; }
.logro { display: grid; gap: 10px; background: var(--guia-blanco); border-radius: 16px; padding: 14px; animation: subir 0.3s var(--sale) both; }
.logro-fila { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 15px; }
.logro-fila .icono { width: 22px; height: 22px; color: var(--guia-acento); stroke-width: 2.4; }
.logro-siga { margin: 0; font-size: 14px; color: var(--guia-suave); }
.deshacer { justify-self: center; background: none; border: 0; color: var(--guia-suave); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; padding: 0 8px; }
.guia-acciones { display: grid; gap: 8px; }
.btn-sig { width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--guia-ink); color: var(--guia); font-weight: 700; font-size: 16px; transition: opacity var(--d-corta) var(--sale), transform var(--d-toque) var(--sale), background var(--d-corta) var(--sale); }
.btn-sig.apagado { opacity: 0.45; cursor: not-allowed; }
.btn-sig.llama { background: var(--accent); color: var(--accent-ink); animation: llamar var(--d-latido) var(--sale) 2; }
.btn-sig:active:not(.apagado) { transform: scale(0.98); }
@keyframes llamar { 0% { box-shadow: 0 0 0 0 var(--accent-halo); } 70% { box-shadow: 0 0 0 14px var(--accent-halo-0); } 100% { box-shadow: 0 0 0 0 var(--accent-halo-0); } }
.guia-bloqueo { margin: 0; font-size: 13px; font-weight: 600; color: var(--guia-acento); text-align: center; animation: fundido 0.2s var(--sale) both; }
.guia-links { display: flex; justify-content: space-between; }
.guia-links button { background: none; border: 0; color: var(--guia-suave); font-size: 13px; min-height: 36px; padding: 0; }
.guia-links button[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.guia :focus-visible { outline-color: var(--guia-acento); }

/* ---------- Lo que hay que tocar: borde fijo y latido dos veces (después queda quieto) ---------- */
/* el aro va separado del botón (outline con aire): sobre un botón naranja se sigue viendo */
.resaltar { position: relative; outline: 2px solid var(--accent); outline-offset: 3px; z-index: 2; }
.resaltar.late { animation: latido var(--d-latido) var(--sale) 2; }
@keyframes latido { 0% { box-shadow: 0 0 0 3px var(--accent-halo); } 70% { box-shadow: 0 0 0 14px var(--accent-halo-0); } 100% { box-shadow: 0 0 0 3px var(--accent-halo-0); } }

/* hoja del celular: escena (hora + título) y relato; en escritorio no se muestran */
.hoja-escena, .hoja-relato { display: none; }

/* ---------- Escena: el relato del día, arriba de cada pantalla ---------- */
.escena { display: grid; gap: 10px; margin: 0 0 32px; max-width: 640px; }
.escena-arriba { display: flex; align-items: center; gap: 14px; }
.reloj { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 64px; padding: 0 12px; border-radius: var(--g-r-chip); background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; }
.escena-lugar { font-size: 14px; color: var(--muted); }
.escena-lugar b { color: var(--ink2); font-weight: 600; }
.escena-titulo { margin: 0; font-size: 46px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.escena-relato { margin: 0; font-size: 19px; line-height: 1.45; color: var(--ink2); max-width: 46ch; }
.escena.entra .escena-arriba { animation: fundidoLargo 0.36s var(--sale) both; }
.escena.entra .escena-titulo { animation: fundidoLargo 0.42s var(--sale) 0.08s both; }
.escena.entra .escena-relato { animation: fundidoLargo 0.42s var(--sale) 0.16s both; }

/* ---------- Bienvenida ---------- */
.bienvenida { max-width: 520px; margin: 0 auto; background: var(--guia); color: var(--guia-ink); border-radius: 28px; padding: 36px; display: grid; gap: 18px; animation: subir var(--d-media) var(--sale) both; }
.bienvenida h2 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
.bienvenida p { margin: 0; color: var(--guia-suave); font-size: 16px; line-height: 1.5; }
.bienvenida .bv-nota { font-size: 13px; }
.bienvenida ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--guia-suave); }
.bienvenida li { display: flex; gap: 10px; align-items: center; }
.bienvenida li i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--guia-linea); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--guia-ink); flex: none; }
.btn-grande { min-height: 56px; border-radius: 14px; font-size: 17px; }
.bienvenida :focus-visible { outline-color: var(--guia-acento); }

/* ---------- Bienvenida con dos salidas y cierre ---------- */
.bienvenida a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bienvenida .btn-sec { background: none; color: var(--guia-ink); box-shadow: inset 0 0 0 1.5px var(--guia-linea); border: 0; }
.bienvenida.cierre { max-width: 560px; text-align: center; justify-items: stretch; padding: 44px 36px; }
.bienvenida.cierre h2 { font-size: 40px; }
.bienvenida.cierre .semilla-nota { margin-top: -8px; font-size: 14px; }
.bienvenida.cierre p { font-size: 17px; max-width: 44ch; margin-inline: auto; }
.bienvenida.cierre h2:focus { outline: none; }
.btn-texto-guia { justify-self: center; background: none; border: 0; min-height: 44px; padding: 0 12px; color: var(--guia-suave); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Festejo: papelitos naranjas y grises, 1,6 s, una sola vez ---------- */
.papelitos { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.papel { position: absolute; top: 18vh; left: var(--x); width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: papel 1.35s var(--sale) var(--d) both; }
.papel.n { background: var(--accent); }
.papel.g { background: var(--series); }
.papel.c { background: var(--accent-hi); }
@keyframes papel { 0% { opacity: 0; transform: translate(0, -24px) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--caida)) rotate(var(--giro)); } }

/* ---------- Modo libre: píldora abajo a la izquierda ---------- */
.pildora { position: fixed; z-index: 45; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--g-r-chip); background: var(--guia); color: var(--guia-ink); box-shadow: 0 8px 24px var(--track); animation: fundido var(--d-media) var(--sale) both; }
.pildora a, .pildora button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: none; border: 0; min-height: 40px; padding: 0 16px; border-radius: var(--g-r-chip); font-size: 14px; font-weight: 600; color: var(--guia-ink); white-space: nowrap; }
.pildora button:first-child { background: var(--accent); color: var(--accent-ink); }
.pildora a { color: var(--guia-ink); box-shadow: inset 0 0 0 1.5px var(--guia-linea); }
.pildora button:last-child { color: var(--guia-suave); }
.pildora :focus-visible { outline-color: var(--guia-acento); }
[data-theme='light'] .pildora { box-shadow: 0 0 0 1px var(--guia-linea), 0 8px 24px var(--track); }
.modo-libre .cuerpo { padding-bottom: 96px; }

/* ---------- Aviso suave pegado a lo que se tocó ---------- */
.aviso-suave { position: fixed; z-index: 70; background: var(--guia); color: var(--guia-ink); font-size: 13px; font-weight: 600; line-height: 1.35; padding: 10px 14px; border-radius: 12px; animation: fundido 0.2s var(--sale) both; max-width: 260px; pointer-events: none; }

.nota-grande { font-size: 15px; line-height: 1.5; color: var(--ink2); }

/* ---------- Escritorio angosto: en la fila de pasos solo se lee el nombre del actual ---------- */
@media (max-width: 1400px) {
  .chip:not(.actual) .nombre { display: none; }
  .pasos { padding-left: 24px; padding-right: 24px; }
  .cuerpo { gap: 28px; padding-left: 24px; padding-right: 24px; }
}

/* ---------- Celular: la guía es una hoja abajo (máximo 36 % del alto), sobre la barra de abajo ---------- */
@media (max-width: 859px) {
  :root { --alto-barra: 52px; --alto-pasos: 48px; }
  .pasos { padding: 10px 16px; overflow: hidden; }
  .chip .nombre, .chip:not(.actual) .nombre { display: none; }
  .chip { padding: 0; }
  .chip-n { width: 28px; height: 28px; font-size: 12px; }
  .chip .icono { width: 15px; height: 15px; }
  .sep { margin: 0 3px; min-width: 4px; }
  .cuerpo { padding: 20px 16px calc(36dvh + var(--tabs-h) + 28px); }
  .guia { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabs-h) + 8px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; max-height: 36dvh; overflow: auto; overscroll-behavior: contain; padding: 14px 16px 0; gap: 10px; border-radius: 20px; z-index: 45; animation: entraAbajo var(--d-media) var(--sale) both; }
  /* la hoja entra con un corrimiento corto (28 px) y no deslizándose desde afuera de la pantalla: «Siguiente paso» ya está casi en su lugar y un toque apurado no se pierde */
  @keyframes entraAbajo { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes entraArriba { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
  /* el «Paso N de 7» sigue para quien lo lee con lector, pero no ocupa lugar: la escena de arriba y la fila de pasos ya lo dicen */
  .guia-cabeza { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hoja-escena { display: flex; align-items: baseline; gap: 6px; font-size: 15px; line-height: 1.2; color: var(--guia-ink); }
  .hoja-hora { color: var(--guia-acento); font-weight: 700; }
  .hoja-relato { display: block; margin: 0; font-size: 14px; line-height: 1.38; color: var(--guia-suave); }
  .guia.sin-relato .hoja-relato { display: none; }
  .que-hacer { font-size: 19px; }
  .pista { font-size: 14px; }
  .para-que { min-height: 32px; }
  .logro { padding: 10px 12px; gap: 4px; }
  .logro-siga { display: none; }
  .deshacer { min-height: 32px; }
  .btn-sig { min-height: 48px; }
  /* si el texto no entra, lo que sobra se desliza adentro de la hoja y «Siguiente paso» queda siempre a la vista */
  .guia-acciones { position: sticky; bottom: 0; background: var(--guia); padding: 6px 0 8px; gap: 4px; }
  .guia-links button { min-height: 40px; }
  /* Con una ventana abierta, la ventana sube desde abajo: la guía pasa arriba, chica, para que la instrucción se siga viendo */
  .guia.sobre-ventana { bottom: auto; top: calc(var(--alto-barra) + var(--alto-pasos) + 8px); max-height: none; overflow: visible; padding: 10px 16px; animation: entraArriba var(--d-corta) var(--sale) both; }
  .guia.sobre-ventana .hoja-escena, .guia.sobre-ventana .hoja-relato, .guia.sobre-ventana .barrita, .guia.sobre-ventana .guia-acciones, .guia.sobre-ventana .para-que, .guia.sobre-ventana .para-que-texto, .guia.sobre-ventana .logro, .guia.sobre-ventana .guia-cabeza { display: none; }
  .guia.sobre-ventana .que-hacer { font-size: 17px; }
  /* Con el paso hecho, lo que importa es el logro entero y «Siguiente paso»: la escena, el «Listo.» (que sigue para el lector de pantalla) y la barrita ya no hacen falta, así el logro entra entero en el 36 % */
  .guia.con-logro .hoja-escena, .guia.con-logro .barrita { display: none; }
  .guia.con-logro .guia-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .escena { margin-bottom: 20px; gap: 6px; }
  .escena-titulo { font-size: 30px; }
  .escena-relato { font-size: 16px; }
  .reloj { height: 28px; font-size: 14px; }
  .bienvenida { padding: 26px; border-radius: 24px; }
  .bienvenida.cierre { padding: 32px 22px; }
  .bienvenida.cierre h2 { font-size: 30px; }
  .pildora { left: 8px; right: 8px; bottom: calc(var(--tabs-h) + 10px + env(safe-area-inset-bottom, 0px)); justify-content: space-between; }
  .pildora a, .pildora button { flex: 1 1 0; min-width: 0; padding: 4px 6px; min-height: 44px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
  .modo-libre .cuerpo { padding-bottom: calc(var(--tabs-h) + 84px); }
  .modo-libre .aviso { bottom: calc(var(--tabs-h) + 70px + env(safe-area-inset-bottom, 0px)); }
  .bienvenida h2 { font-size: 28px; }
  .aviso-suave { max-width: calc(100vw - 16px); }
}