/* Billetera Saludable — Chequeo de tu Billetera (/test)
   Se carga después de estilos.css y reutiliza su mundo: recibo, campos, botones y cierre. */

.chequeo { min-height: calc(100svh - 4.5rem - 9rem); }
.chequeo__paso { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }
.chequeo__rejilla { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.chequeo [tabindex="-1"]:focus { outline: none; }

/* ---------- Portada ---------- */
.chequeo__inicio-texto .cabecera__titulo .acento { margin-top: 0.24em; } /* la cola del "¿" no debe tocar el renglón de abajo */
.chequeo__inicio-texto .boton { margin-top: 0.25rem; }
.chequeo__nota { margin: 0.9rem 0 0; font-size: 0.98rem; color: var(--tenue); }
.chequeo__inicio { display: grid; grid-template-columns: 7fr 5fr; grid-template-areas: "texto recibo" "recibes recibo"; gap: 0 clamp(2rem, 6vw, 5rem); align-items: start; width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.chequeo__inicio-texto { grid-area: texto; }
.chequeo__inicio-recibo { grid-area: recibo; }
.chequeo__recibes { grid-area: recibes; margin-top: clamp(2rem, 4vw, 3rem); }
.chequeo__recibes .lista-guion { margin-bottom: 0; }

/* ---------- Progreso ---------- */
.progreso { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.progreso__datos { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.98rem; font-weight: 700; color: var(--texto-2); margin: 0 0 0.6rem; }
.progreso__datos span:last-child { color: var(--tenue); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progreso__carril { height: 4px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.progreso__avance { display: block; height: 100%; width: 100%; background: var(--amarillo); transform-origin: left; transition: transform 0.45s var(--salida); }

/* ---------- Pregunta ---------- */
.pregunta__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); text-wrap: balance;
}
.respuestas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.respuesta {
  display: block; width: 100%; min-height: 4rem; padding: 0.9rem 1.15rem;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde-campo); border-radius: var(--radio);
  font: inherit; font-weight: 600; font-size: 1.05rem; line-height: 1.35; text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s var(--salida), border-color 0.18s var(--salida), color 0.18s var(--salida), transform 0.18s var(--salida);
}
.respuesta:active { transform: scale(0.99); }
.respuesta[aria-pressed="true"] { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); }
@media (hover: hover) {
  .respuesta:hover { border-color: var(--amarillo); }
}

.chequeo__pie-pregunta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.recibo-tira { display: none; margin: 0; padding: 0.35rem 0.7rem; background: var(--papel); color: var(--tinta); border-radius: 3px; transform: rotate(-1.4deg); font-family: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace; font-size: 0.92rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.chequeo__volver {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.25rem 0;
  background: none; border: 0; color: var(--texto-2); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.chequeo__volver:hover { color: var(--amarillo); }
.chequeo__volver .icono { width: 1.15rem; height: 1.15rem; }

/* La pregunta nueva entra deslizándose; las respuestas no se animan una por una */
.pregunta--entra { animation: pregunta-entra 0.32s var(--salida) backwards; }
@keyframes pregunta-entra { from { opacity: 0; transform: translateX(14px); } }

/* ---------- Recibo del chequeo ---------- */
.recibo__estado { font-weight: 400; color: #4a4741; }
.recibo__estado--listo { font-weight: 700; color: var(--tinta); }
.recibo__estado--nuevo { display: inline-block; animation: listo-imprime 0.45s var(--salida) 0.25s backwards; }
@keyframes listo-imprime { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.recibo__papel .recibo__datos span { overflow-wrap: anywhere; }
.resultado__recibo .recibo__tabla tfoot td { font-size: 5rem; }
.recibo__perfil {
  margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px dashed #8d897f;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; line-height: 1; color: var(--tinta);
}
.recibo__tabla tfoot td.recibo__total--bien { color: var(--tinta); }
.recibo__papel--imprimir { animation: recibo-imprime 1.2s var(--salida) 0.15s backwards; }
@keyframes recibo-imprime {
  from { clip-path: inset(0 -3rem 100% -3rem); translate: 0 -1.25rem; }
  to { clip-path: inset(0 -3rem -5rem -3rem); translate: 0 0; }
}

/* ---------- Datos antes del resultado ---------- */
.chequeo__formulario { max-width: 40rem; }
.chequeo__formulario-entrada { color: var(--texto-2); margin: -0.75rem 0 1.5rem; }
.campo .casilla { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; margin: 0; font-weight: 400; font-size: 0.98rem; line-height: 1.45; color: var(--texto-2); cursor: pointer; }
.casilla input {
  appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; cursor: pointer;
  background: var(--fondo) center / 1.05rem no-repeat; border: 1px solid var(--borde-campo); border-radius: 4px;
  transition: background-color 0.18s var(--salida), border-color 0.18s var(--salida);
}
.casilla:hover input { border-color: var(--amarillo); }
.casilla input:checked { background-color: var(--amarillo); border-color: var(--amarillo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141412' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.casilla input[aria-invalid="true"] { border-color: var(--rojo); }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.boton[disabled] { opacity: 0.7; cursor: wait; transform: none; }

/* ---------- Resultado ---------- */
.resultado { display: grid; grid-template-columns: 7fr 5fr; grid-template-areas: "titulo recibo" "detalle recibo"; gap: 0 clamp(2rem, 6vw, 5rem); align-items: start; }
.resultado__titulo { grid-area: titulo; }
.resultado__titulo h1 { overflow-wrap: anywhere; line-height: 1.1; }
.resultado__titulo h1 .acento { margin-top: 0.14em; }
.resultado__mensaje { color: var(--texto-2); font-size: 1.2rem; max-width: 52ch; }
.resultado__recibo { grid-area: recibo; }
.resultado__detalle { grid-area: detalle; margin-top: 1rem; }
.resultado__detalle { border-top: 2px solid var(--texto); padding-top: 1.75rem; }
.resultado__detalle > p { color: var(--texto-2); max-width: 58ch; }
.resultado__frase { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.08; margin: 0 0 1.25rem; text-wrap: balance; }
.resultado__frase--segunda { margin-top: 2.25rem; margin-bottom: 0.75rem; }
.fases { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; align-items: end; height: 12rem; }
.fases__escalon { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.25rem; padding: 0.7rem 0.75rem; background: #3d3b37; color: var(--texto-2); border-radius: 4px; }
.fases__escalon:nth-child(1) { height: 40%; }
.fases__escalon:nth-child(2) { height: 60%; }
.fases__escalon:nth-child(3) { height: 80%; }
.fases__escalon:nth-child(4) { height: 100%; }
.fases__nombre { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.fases__palomita { width: 1.35rem; height: 1.35rem; color: var(--amarillo); stroke-width: 3; }
.fases__escalon--actual { background: var(--amarillo); color: var(--tinta); }
.resultado__envio { margin: 1.25rem 0 0; font-size: 0.98rem; font-weight: 600; color: var(--texto-2); }
.resultado__envio:empty { display: none; }
.resultado__envio--ok { color: var(--verde); }
.resultado__envio--error { color: var(--rojo); }

.cierre--chequeo .cierre__titulo { max-width: 16ch; line-height: 1.08; }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1rem; }
.cierre__acciones .boton { margin-top: 0; }
.cierre__secundario { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }
.cierre__secundario:hover { color: var(--superficie-2); }
.cierre .cierre__nota { font-size: 1rem; margin: 1.25rem 0 0; }

/* ---------- Pie compacto ---------- */
.pie--chequeo { padding-block: 1.75rem 2rem; }
.pie--chequeo p { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--tenue); max-width: 90ch; }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .chequeo__rejilla { grid-template-columns: 1fr; }
  .chequeo__rejilla--pregunta .recibo { display: none; }
  .recibo-tira { display: block; }
  .chequeo__inicio { grid-template-columns: 1fr; grid-template-areas: "texto" "recibo" "recibes"; }
  .chequeo__inicio-recibo { margin-top: 2.25rem; }
  .resultado { grid-template-columns: 1fr; grid-template-areas: "titulo" "recibo" "detalle"; }
  .resultado__recibo { margin-bottom: 2.5rem; }
}
@media (max-width: 560px) {
  .chequeo__inicio-texto .boton, .cierre__acciones .boton { width: 100%; }
  .respuesta { min-height: 3.75rem; font-size: 1rem; }
  .fases { display: block; height: auto; }
  .fases__escalon:nth-child(n) { height: auto; margin-bottom: 0.4rem; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.5rem; }
  .fases__escalon:nth-child(2) { margin-left: 6%; }
  .fases__escalon:nth-child(3) { margin-left: 12%; }
  .fases__escalon:nth-child(4) { margin-left: 18%; }
}