/* HONIRA · pantallas completas: antesala y resultados */

/* qué se ve en cada fase (data-fase en el body) */
.antesala, .cabecera, .log, .dock, .pantalla, .marca-agua { display: none; }
body[data-fase="antesala"] .antesala { display: block; }
body[data-fase="nombre"] .cabecera, body[data-fase="confirmar"] .cabecera, body[data-fase="chat"] .cabecera, body[data-fase="texto"] .cabecera { display: block; }
body[data-fase="nombre"] .dock, body[data-fase="confirmar"] .dock, body[data-fase="chat"] .dock, body[data-fase="texto"] .dock { display: block; }
body[data-fase="nombre"] .log, body[data-fase="confirmar"] .log, body[data-fase="chat"] .log, body[data-fase="texto"] .log { display: flex; }
body[data-fase="chat"] .marca-agua, body[data-fase="texto"] .marca-agua { display: block; }
body[data-fase="resultados"] .pantalla, body[data-fase="enviando"] .pantalla,
body[data-fase="guardado"] .pantalla, body[data-fase="error"] .pantalla { display: block; }
/* al tocar «Empezar» la antesala sigue visible mientras sube como un telón */
body:not([data-fase="antesala"]) .antesala.saliendo { display: block; }

/* ---- antesala: siempre en oscuro ---- */
.antesala {
  --bg: var(--oscuro-bg); --ink: var(--oscuro-ink); --card: var(--oscuro-card); --line: var(--oscuro-line);
  --muted: var(--oscuro-muted); --muted-2: var(--oscuro-muted-2); --inverso: var(--oscuro-bg);
  position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--ink); overflow: auto;
  padding: calc(var(--e3) + var(--banner-h) + env(safe-area-inset-top)) var(--gutter) calc(var(--e3) + env(safe-area-inset-bottom));
  transition: transform .45s var(--suave), opacity .45s var(--suave);
}
.antesala.saliendo { transform: translateY(-100%); opacity: .7; pointer-events: none; }
.antesala-inner {
  max-width: 520px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; gap: var(--e3);
}
.antesala .fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; row-gap: var(--e1); }
.antesala .fila .btn-sonido { margin-left: auto; font-size: 13px; min-height: 36px; padding: 2px var(--e2); border-color: var(--oscuro-velo); }
.antesala .marca { display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; }
.antesala .logo { filter: invert(1); mix-blend-mode: screen; }   /* el fondo blanco del PNG, invertido a negro, desaparece sobre el negro */
.antesala .wordmark.grande { font-size: clamp(22px, 6vw, 28px); }

/* el hero: las seis letras del método, las tres de esta semana encendidas */
.antesala .hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--e2); padding: var(--e3) 0; min-height: 34vh; }
.antesala .letras {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .04em;
  font-weight: 800; font-size: clamp(88px, 27vw, 150px); line-height: .82; letter-spacing: -.06em;
  color: var(--ink); user-select: none;
}
.antesala .letras span { opacity: .07; text-align: center; transition: opacity .6s var(--suave); }
.antesala .letras span.hoy { animation: encender .7s var(--suave) both; }
.antesala .letras span.hoy:nth-child(1) { animation-delay: .45s; }
.antesala .letras span.hoy:nth-child(3) { animation-delay: .60s; }
.antesala .letras span.hoy:nth-child(5) { animation-delay: .75s; }
@keyframes encender { from { opacity: .07; } to { opacity: 1; } }
.antesala .hoy-texto { display: flex; flex-direction: column; gap: 2px; }
.antesala .hoy-texto .eyebrow { color: var(--muted); }
.antesala .hoy-texto b { color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: 0; }

/* el texto y el botón */
.antesala .texto { display: flex; flex-direction: column; gap: var(--e2); }
.antesala .eyebrow { color: var(--muted); }
.antesala h1 { font-size: clamp(34px, 9vw, 48px); line-height: 1.02; letter-spacing: -.025em; font-weight: 800; }
.antesala .lead { font-size: 18px; color: var(--muted); line-height: 1.4; }
.antesala .btn.relleno { background: var(--ink); color: var(--inverso); border-color: var(--ink); }
.antesala .btn.grande { margin-top: var(--e1); }
.antesala .micro { display: flex; align-items: center; gap: var(--e1); }
.antesala .micro .icono { width: 14px; height: 14px; flex: 0 0 auto; }
/* aviso del interruptor de silencio: solo en iPhone (lo destapa app.js), alineado con el texto del micro */
.antesala .micro.aviso-ios { margin-top: calc(-1 * var(--e1)); padding-left: calc(14px + var(--e1)); }
.antesala .tarjeta { background: transparent; border-color: var(--oscuro-velo); }
.antesala .tarjeta p { margin-bottom: var(--e2); }
.antesala .tarjeta .fila-botones { display: flex; gap: var(--e1); flex-wrap: wrap; }
.antesala .tarjeta .btn { flex: 1 1 140px; }

/* señal de voz: 32 barras finas que respiran despacio; mientras suena algo, más rápido */
.antesala .onda { display: flex; align-items: center; gap: 3px; height: 28px; margin: var(--e0) 0; }
.antesala .onda i {
  display: block; flex: 1 1 0; height: calc(4px + var(--h, 0) * 20px); max-width: 5px; border-radius: 1px;
  background: var(--ink); opacity: .55; transform-origin: center;
  animation: respirar 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.11s);
}
body.sonando .antesala .onda i { animation-duration: .55s; opacity: .9; }
@keyframes respirar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* entrada escalonada: marca, letras, texto, botón */
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }
.antesala .fila, .antesala .hero, .antesala .texto > * { animation: subir .5s var(--suave) both; }
.antesala .fila { animation-delay: 0ms; }
.antesala .hero { animation-delay: 80ms; }
.antesala .texto > :nth-child(1) { animation-delay: 160ms; }
.antesala .texto > :nth-child(2) { animation-delay: 200ms; }
.antesala .texto > :nth-child(3) { animation-delay: 240ms; }
.antesala .texto > :nth-child(n+4) { animation-delay: 300ms; }

/* escritorio: dos columnas, el texto a la izquierda y las letras a la derecha */
@media (min-width: 900px) {
  .antesala { padding-left: var(--e6); padding-right: var(--e6); }
  .antesala-inner {
    max-width: 1100px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr;
    grid-template-areas: "fila fila" "texto hero"; column-gap: var(--e6); row-gap: var(--e4); align-items: center;
  }
  .antesala .fila { grid-area: fila; }
  .antesala .hero { grid-area: hero; min-height: 0; padding: 0; }
  .antesala .letras { font-size: clamp(120px, 16vw, 200px); }
  .antesala .texto { grid-area: texto; max-width: 480px; }
  .antesala h1 { font-size: 56px; }
}
@media (max-height: 640px) {
  .antesala .hero { min-height: 0; }
  .antesala .letras { font-size: clamp(64px, 18vw, 96px); }
}

/* ---- resultados ---- */
.pantalla {
  max-width: var(--col); margin: 0 auto;
  padding: calc(var(--e4) + var(--banner-h) + env(safe-area-inset-top)) var(--gutter) calc(var(--e5) + env(safe-area-inset-bottom));
}
/* el foco programático del título (para el lector de pantalla) no necesita anillo visible */
.pantalla h2[tabindex]:focus, .pantalla h2[tabindex]:focus-visible { box-shadow: none; outline: none; }
/* guardado y error: la pantalla ocupa el alto entero y su contenido se centra */
body[data-fase="guardado"] .pantalla, body[data-fase="error"] .pantalla {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.pantalla .cabecera-res {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e0);
  margin-bottom: var(--e4); padding-bottom: var(--e2); border-bottom: 1px solid var(--line);
}
.pantalla .cabecera-res .marca { display: inline-flex; align-items: center; gap: var(--e1); }
@media (min-width: 640px) {
  .pantalla .cabecera-res { flex-direction: row; align-items: center; gap: var(--e3); border-bottom: 0; padding-bottom: 0; }
}
.resumen h2 { font-size: clamp(28px, 6vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin: var(--e1) 0 var(--e4); }
.pilares { display: grid; gap: var(--e2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
.pilar-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--card); border-radius: var(--radio); padding: var(--e3);
  display: flex; flex-direction: column; gap: var(--e1); align-items: flex-start;
}
.pilar-card .letra {
  position: absolute; right: -.04em; bottom: -.12em; font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
  opacity: .06; pointer-events: none; user-select: none;
}
.pilar-card .nombre { font-size: 15px; font-weight: 600; color: var(--muted); }
.pilar-card .puntos { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pilar-card .puntos b { font-size: clamp(28px, 5.5vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pilar-card .puntos small { font-size: 15px; color: var(--muted); }

/* barra de puntos: pista, relleno animado y las dos marcas de corte del §5.1 */
.medidor { position: relative; display: block; width: 100%; height: 6px; background: var(--line); border-radius: 3px; margin: var(--e0) 0; }
.medidor i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--ink); border-radius: 3px;
  transform-origin: left; animation: llenar .6s var(--suave) both;
}
@keyframes llenar { from { transform: scaleX(0); } }
.medidor u { position: absolute; top: -3px; width: 1px; height: 12px; background: var(--muted); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: var(--e0) var(--e1); border: 1px solid currentColor; border-radius: 3px; line-height: 1.2; justify-self: start;
}
.tag::before { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 9px; letter-spacing: .12em; line-height: 1; }
.tag.rojo { color: var(--rojo); border-color: var(--rojo); background: var(--bg); }
.tag.rojo::before { content: "\25CF\25CB\25CB"; }
.tag.amarillo { color: var(--ink); border-color: var(--ink); background: var(--bg); }
.tag.amarillo::before { content: "\25CF\25CF\25CB"; }
.tag.verde { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag.verde::before { content: "\25CF\25CF\25CF"; }
.como-se-lee { margin-top: var(--e2); font-size: 13px; color: var(--muted); line-height: 1.45; }

.score {
  margin-top: var(--e3); padding: var(--e3); border: 1px solid var(--ink); border-radius: var(--radio);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
}
.score span { font-weight: 600; }
.score b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.notas { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e1); color: var(--muted); font-size: 16px; }
.comentario { margin-top: var(--e3); padding: var(--e3); border-left: 3px solid var(--ink); background: var(--card); font-size: 16px; }
.comentario .eyebrow { margin-bottom: var(--e0); }
.acciones-res { margin-top: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.acciones-res .enlace { align-self: center; }
.confirmar { border: 1px solid var(--ink); border-radius: var(--radio); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.confirmar .fila-botones { display: flex; gap: var(--e1); }
.confirmar .btn { flex: 1; }
.aviso-pie { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.5; }
.tardando { font-size: 15px; color: var(--muted); text-align: center; }

/* ---- guardado ---- */
.hecho-pantalla {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: var(--e3);
}
.hecho-pantalla .check { margin-top: auto; width: 96px; height: 96px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hecho-pantalla .check circle { stroke-dasharray: 283; stroke-dashoffset: 283; animation: trazo-circulo .55s var(--suave) forwards; }
.hecho-pantalla .check path { stroke-dasharray: 62; stroke-dashoffset: 62; animation: trazo-check .32s .4s var(--suave) forwards; }
@keyframes trazo-circulo { to { stroke-dashoffset: 0; } }
@keyframes trazo-check { to { stroke-dashoffset: 0; } }
.hecho-pantalla h2 { font-size: clamp(32px, 8vw, 44px); letter-spacing: -.02em; line-height: 1.05; }
.hecho-pantalla p { font-size: 19px; color: var(--muted); max-width: 32ch; }
.hecho-pantalla .fila-botones { display: flex; gap: var(--e1); width: 100%; max-width: 360px; }
.hecho-pantalla .fila-botones .btn { flex: 1; min-height: 56px; }
.hecho-pantalla .aviso-pie { width: 100%; text-align: left; margin-top: auto; }

/* ---- error ---- */
.error-card {
  margin: auto 0; display: flex; flex-direction: column; gap: var(--e2);
  border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--radio);
  padding: var(--e3);
}
body[data-fase="error"] .pantalla > .aviso-pie { margin-top: var(--e4); }
.error-card h2 { font-size: 24px; line-height: 1.2; }
.error-card p { color: var(--muted); }
.error-card .codigo { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.error-card .fila-botones { display: flex; gap: var(--e1); margin-top: var(--e0); }
.error-card .btn { flex: 1; min-height: 56px; }