/* NOMBRE_APP · reto del día (fase 6): /reto, /reto/:libro y /reto/:libro/:día.
   Una sola hoja en el centro del papel, como un recorte del libro: titular grande, la pregunta en su
   tarjeta de siempre (test.css) y, al responder, las opciones se convierten en el recuento del día
   (cada una se llena hasta el % de gente que la eligió). Debajo, la ficha de la ley y la invitación
   a seguir en la app. Tokens en base.css; los propios, con prefijo --reto-. */

.reto {
  --reto-columna: 46rem;
  --t-pregunta: 21px; --t-opcion: 17px; --t-cita: 17px; --t-linea: 1.45; --t-linea-cita: 1.7;
  max-width: calc(var(--reto-columna) + 2 * clamp(16px, 3vw, 32px));
  padding-block: var(--esp-5) 0;
}
@media (min-width: 768px) { .reto { --t-pregunta: 24px; --t-opcion: 18px; --t-cita: 18px; padding-top: var(--esp-7); } }

/* Migas */
.reto-migas ol { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; color: var(--tenue); font-size: var(--tam-m); }
.reto-migas li { display: inline-flex; align-items: center; }
.reto-migas li + li::before { content: '/'; margin-inline: 8px; color: var(--linea-fuerte); }
.reto-migas a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tenue); text-underline-offset: .2em; }
.reto-migas a:hover { color: var(--marca); }
.reto-migas [aria-current] { color: var(--tinta-2); font-weight: 600; }

/* Cabecera */
.reto-cabeza { margin: var(--esp-4) 0 var(--esp-6); }
.reto-cabeza__titulo {
  font: 700 var(--tam-display-3)/1.02 var(--letra-display); letter-spacing: -.03em; color: var(--tinta);
}
.reto-cabeza__ley {
  display: block; margin-top: 10px; font: 500 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.25 var(--letra-serif);
  letter-spacing: -.01em; color: var(--tinta-2);
}
.reto-cabeza__fecha { margin-top: var(--esp-4); color: var(--tenue); font-size: var(--tam-m); font-weight: 600; font-variant-numeric: tabular-nums; }
.reto-cabeza__entradilla { max-width: var(--medida); margin-top: var(--esp-2); color: var(--texto, var(--tinta-2)); font-size: var(--tam-base); line-height: 1.55; text-wrap: pretty; }
.reto-cabeza__cuenta { display: flex; align-items: center; gap: 8px; margin-top: var(--esp-3); color: var(--tenue); font-size: var(--tam-m); }
.reto-cabeza__cuenta svg.icono { width: 18px; height: 18px; color: var(--ambar-tinta, #8a5a12); }

/* La pregunta: la misma hoja que en el test */
.reto-pregunta { min-width: 0; overflow-wrap: anywhere; }
.reto-pregunta .pregunta__enunciado { max-width: 36ch; }
.reto-nojs { margin-top: var(--esp-4); color: var(--tenue); font-size: var(--tam-m); }

/* Tras responder, cada opción se llena hasta su % del día */
.opcion.reto-con-pct { isolation: isolate; overflow: hidden; }
.opcion.reto-con-pct::before {
  content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--reto-pct, 0%);
  background: rgb(23 25 31 / .045); transform-origin: left center;
}
.opcion.reto-con-pct.es-buena::before { background: rgb(46 125 79 / .14); }
.opcion.reto-con-pct.es-mala::before { background: rgb(194 54 47 / .12); }
.opcion.reto-con-pct .opcion__texto { padding-right: 4px; }
.reto-pct {
  flex: none; align-self: center; min-width: 3.4em; text-align: right; color: var(--tenue);
  font: 700 15px/1 var(--letra-cond); font-variant-numeric: tabular-nums;
}
.opcion.es-buena .reto-pct { color: var(--ok-tinta); }
.opcion.es-mala .reto-pct { color: var(--mal-tinta); }
/* Sin animación, una opción deshabilitada no debe parecer «apagada» de más: el % se lee igual */
.opcion.es-apagada .reto-pct { color: var(--tenue); }

/* Veredicto y recuento (en la hoja) */
.reto .pregunta__despues { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linea-suave); }
.reto .pregunta__despues:empty { display: none; }
.reto .veredicto strong:focus { outline: none; }
.reto-recuento { max-width: 52ch; margin-top: 12px; color: var(--tinta-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.reto-recuento__cifra { display: inline-block; color: var(--tinta); font: 700 1.5em/1 var(--letra-cond); letter-spacing: -.01em; vertical-align: -.08em; }

/* Antes de responder: la racha que sigue viva (solo con lo guardado en este navegador) */
.reto-racha-previa {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--esp-4); padding: 8px 16px 8px 12px;
  border: 1px solid var(--ambar-borde); border-radius: var(--radio-pildora); background: var(--ambar-suave);
  color: var(--ambar-tinta); font-size: var(--tam-m); font-weight: 650; line-height: 1.35;
}
.reto-racha-previa[hidden] { display: none; }
.reto-racha-previa svg.icono { flex: none; width: 18px; height: 18px; }

/* Fase 9: el resultado para compartir, una papeleta en la banda oscura */
.reto-resultado {
  --reto-sobre: var(--navy-texto); --reto-llama: #f2b64c;
  margin-top: 14px; padding: clamp(20px, 4vw, 32px); border-radius: var(--radio-xl);
  background: var(--navy); color: #fff;
}
.reto-resultado__papeleta { padding-bottom: 20px; border-bottom: 1px dashed rgb(255 255 255 / .28); }
.reto-resultado__cabeza {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--reto-sobre); font-size: var(--tam-m); font-weight: 650;
}
.reto-resultado__cabeza time { color: #fff; font: 700 28px/1 var(--letra-cond); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.reto-resultado__titulo {
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  font: 700 clamp(2.25rem, 1.8rem + 2vw, 3rem)/1 var(--letra-display); letter-spacing: var(--tracking-display); color: #fff;
}
.reto-resultado__sello {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ok-tinta);
}
.reto-resultado.es-fallo .reto-resultado__sello { color: var(--mal-tinta); }
.reto-resultado__sello svg.icono { width: 28px; height: 28px; }

/* La semana: 7 días, marcados los que respondiste el reto ese mismo día */
.reto-semana { margin-top: 18px; }
.reto-semana__titulo { display: flex; justify-content: space-between; gap: 12px; color: #fff; font-size: var(--tam-m); font-weight: 650; }
.reto-semana__titulo span { color: var(--reto-sobre); font-weight: 600; font-variant-numeric: tabular-nums; }
.reto-semana__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.reto-semana__dia { display: grid; justify-items: center; gap: 6px; }
.reto-semana__marca {
  display: grid; place-items: center; width: min(100%, 38px); aspect-ratio: 1; border-radius: 50%;
  background: rgb(255 255 255 / .1); color: var(--navy);
}
.reto-semana__dia.es-hecho .reto-semana__marca { background: #fff; }
.reto-semana__dia.es-hoy:not(.es-hecho) .reto-semana__marca { background: transparent; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5); }
.reto-semana__marca svg.icono { width: 18px; height: 18px; }
.reto-semana__inicial { color: var(--reto-sobre); font: 600 13px/1 var(--letra); }
.reto-semana__dia.es-hoy .reto-semana__inicial { color: #fff; font-weight: 750; }
.reto-resultado__racha { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #fff; font-weight: 650; }
.reto-resultado__racha svg.icono { flex: none; width: 20px; height: 20px; color: var(--reto-llama); }

.reto-resultado__compartir { margin-top: 20px; }
.reto-resultado .reto-compartir { width: 100%; border-color: #fff; background: #fff; color: var(--navy); }
.reto-resultado .reto-compartir:hover { border-color: var(--crema); background: var(--crema); }
.reto-resultado .reto-compartir svg.icono { width: 20px; height: 20px; }
.reto-resultado__otros { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; margin-top: 6px; font-size: var(--tam-m); }
.reto-resultado__otros a, .reto-copiar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none;
  color: #fff; font: inherit; font-weight: 650; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .45);
  text-underline-offset: .22em; cursor: pointer;
}
.reto-resultado__otros a:hover, .reto-copiar:hover { text-decoration-color: #fff; }
.reto-resultado :focus-visible { outline: 2px solid var(--marino-claro); outline-offset: 2px; border-radius: 8px; }
.reto-resultado .reto-compartir:focus-visible { border-radius: var(--radio-pildora); }
.reto-resultado__estado { min-height: 0; color: #fff; font-size: var(--tam-m); font-weight: 600; text-align: center; }
.reto-resultado__estado:not(:empty) { margin-top: 4px; }
.reto-resultado__nota { margin-top: 12px; color: var(--reto-sobre); font-size: var(--tam-s); line-height: 1.45; text-align: center; text-wrap: pretty; }
@media (min-width: 640px) {
  .reto-semana { max-width: 440px; }
  .reto-resultado__compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .reto-resultado .reto-compartir { width: auto; padding-inline: 28px; }
  .reto-resultado__otros { margin-top: 0; }
  .reto-resultado__estado { flex-basis: 100%; text-align: left; }
  .reto-resultado__nota { text-align: left; }
}

/* ¿Quieres más? (ya en el HTML; reto.mjs afina el segundo botón al responder) */
.reto-mas { margin-top: var(--esp-7); padding: clamp(20px, 4vw, 32px); border: 1px solid var(--marino-borde); border-radius: var(--radio-xl); background: var(--marino-suave); }
.reto-mas h2 { font: 700 var(--tam-2xl)/1.15 var(--letra-display); letter-spacing: -.02em; color: var(--tinta); }
.reto-mas p { max-width: var(--medida); margin-top: var(--esp-2); color: var(--tinta-2); line-height: 1.55; text-wrap: pretty; }
.reto-mas__oferta strong { color: var(--tinta); }
.reto-mas .fila { margin-top: var(--esp-4); }

/* Día anterior y siguiente */
.reto-dias {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--esp-3); margin-top: var(--esp-7);
  border-block: 1px solid var(--linea);
}
.reto-dias__prev, .reto-dias__next {
  display: flex; align-items: center; gap: 8px; min-height: 64px; padding-block: 10px;
  color: var(--tinta-2); font-weight: 650; text-decoration: none;
}
.reto-dias__next { flex-direction: row-reverse; text-align: right; }
.reto-dias__prev > span, .reto-dias__next > span { display: grid; gap: 2px; }
.reto-dias__texto { color: var(--tenue); font-size: var(--tam-s); font-weight: 600; }
.reto-dias__prev:hover, .reto-dias__next:hover { color: var(--marca); }
.reto-dias svg.icono { flex: none; width: 18px; height: 18px; }
.reto-dias__todos {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  border-top: 1px solid var(--linea-suave); font-weight: 650; text-align: center;
}

/* Archivo (últimos días) y explicación */
.reto-archivo, .reto-como { margin-top: var(--esp-8); }
.reto-archivo h2, .reto-como h2, .reto-mes h2 { font: 600 var(--tam-xl)/1.2 var(--letra-serif); letter-spacing: -.01em; color: var(--tinta); }
.reto-archivo ul { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-3) 0 0; padding: 0; list-style: none; }
.reto-archivo a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linea);
  border-radius: var(--radio-pildora); background: var(--superficie); color: var(--tinta-2); font-size: var(--tam-m); font-weight: 600;
  text-decoration: none; transition: var(--mv-b);
}
.reto-archivo a:hover { border-color: var(--marca); color: var(--marca); }
.reto-como p { max-width: var(--medida); margin-top: var(--esp-2); color: var(--tinta-2); line-height: 1.6; }
.reto-como__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.reto-como__enlaces a:not(.enlace-externo) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; }
.reto-como__enlaces svg.icono { width: 18px; height: 18px; }
.reto-pasos { display: grid; gap: var(--esp-3); max-width: var(--medida); margin: var(--esp-4) 0 0; padding: 0; list-style: none; counter-reset: paso; }
.reto-pasos li {
  position: relative; padding-left: 48px; color: var(--tinta-2); line-height: 1.55; counter-increment: paso;
}
.reto-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--crema); color: var(--tinta); font: 700 16px/1 var(--letra-cond);
}
.reto-pasos strong { color: var(--tinta); }

/* Archivo completo: un calendario por mes */
.reto-cabeza__accion { margin-top: var(--esp-5); }
.reto-mes { margin-top: var(--esp-7); }
.reto-mes__dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--esp-2); margin: var(--esp-3) 0 0; padding: 0; list-style: none; }
.reto-mes__dias a {
  display: grid; gap: 6px; min-height: 44px; height: 100%; padding: 12px 14px; border: 1px solid var(--linea);
  border-radius: var(--radio-16); background: var(--superficie); color: var(--tinta-2); text-decoration: none; transition: var(--mv-b);
}
.reto-mes__dias a:hover { border-color: var(--marca); }
.reto-mes__dias time { display: flex; align-items: baseline; gap: 8px; }
.reto-mes__num { color: var(--tinta); font: 700 26px/1 var(--letra-cond); font-variant-numeric: tabular-nums; }
.reto-mes__semana { color: var(--tenue); font-size: var(--tam-s); font-weight: 600; }
.reto-mes__art { color: var(--tinta-2); font-size: var(--tam-m); font-weight: 600; line-height: 1.3; }
.reto-mes__dias a:hover .reto-mes__art { color: var(--marca); }

/* Índice /reto */
.reto-lista { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.reto-lista__item {
  border: 1px solid var(--linea-suave); border-radius: var(--radio-xl); background: var(--superficie); box-shadow: var(--sombra-suave);
  overflow: hidden; transition: border-color var(--mv), box-shadow var(--mv);
}
.reto-lista__item:hover { border-color: var(--marca-borde); box-shadow: var(--sombra-flotante); }
.reto-lista__enlace { display: grid; gap: 10px; padding: 22px clamp(18px, 3vw, 28px) 18px; color: var(--tinta-2); text-decoration: none; }
.reto-lista__enlace:hover { text-decoration: none; }
.reto-lista__enlace:focus-visible { outline-offset: -4px; border-radius: var(--radio-xl); }
.reto-lista__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.reto-lista__ley { color: var(--tenue); font-size: var(--tam-m); font-weight: 650; }
.reto-lista__hecho[hidden] { display: none; }
.reto-lista__hecho svg.icono { width: 14px; height: 14px; }
.reto-lista__art { justify-self: start; padding: 5px 12px; border-radius: var(--radio-pildora); background: var(--crema); font-size: 15px; }
.reto-lista__enunciado { color: var(--tinta); font: 600 var(--tam-xl)/1.35 var(--letra); letter-spacing: -.01em; text-wrap: pretty; }
.reto-lista__ir { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--marca); font-weight: 700; }
.reto-lista__ir svg.icono { width: 16px; height: 16px; }
.reto-lista__archivo {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 clamp(18px, 3vw, 28px);
  border-top: 1px solid var(--linea-suave); color: var(--tinta-2); font-size: var(--tam-m); font-weight: 650; text-decoration: none;
}
.reto-lista__archivo:hover { color: var(--marca); }
.reto-lista__archivo svg.icono { width: 16px; height: 16px; }

.reto-vacio h1 { font: 700 var(--tam-2xl)/1.2 var(--letra-display); }

@media (max-width: 419px) {
  .reto .pregunta__hoja { padding-inline: 14px; }
  .reto-pct { min-width: 2.9em; font-size: 14px; }
  .reto-mas .fila .boton { width: 100%; }
  .reto-resultado { padding-inline: 16px; }
  .reto-semana__dias { gap: 4px; }
  .reto-resultado__otros { gap: 0 2px; }
  .reto-resultado__otros a, .reto-copiar { padding-inline: 6px; }
  .reto-dias__prev, .reto-dias__next { font-size: var(--tam-m); }
  .reto-mes__dias { grid-template-columns: 1fr 1fr; }
}

/* El momento con movimiento: al responder, las opciones se llenan con el recuento del día y la papeleta
   sale con su sello. Nada se anima al cargar. */
@media (prefers-reduced-motion: no-preference) {
  .pregunta__hoja.es-recien .opcion.reto-con-pct::before { animation: reto-llena 520ms 120ms var(--mv-curva) both; }
  .pregunta__hoja.es-recien .reto-pct { animation: mv-sube var(--mv-larga) 200ms var(--mv-curva) both; }
  #retoResultado.es-recien .reto-resultado { animation: mv-sube var(--mv-larga) 260ms var(--mv-curva) both; }
  #retoResultado.es-recien .reto-resultado__sello { animation: reto-sello 380ms 520ms cubic-bezier(.16, 1, .3, 1) both; }
  .reto-lista__item:active { transform: scale(.99); }
}
@keyframes reto-llena { from { transform: scaleX(0); } }
@keyframes reto-sello { from { transform: scale(1.5) rotate(-12deg); opacity: 0; } }