/* reto.css — la pagina del reto financiero diario (D4, 2026-10-04).
 *
 * Este fichero NO declara tokens: `tokens.css` es su unico origen. Ni un hex, ni un color con
 * nombre: el color lo pone el sistema de diseno, y una cifra suelta aqui seria un color que
 * solo existe en esta pagina y en ninguna de las dos pieles.
 *
 * TODO cuelga de `.herramientas`, el contenedor que pone `seo._estatica`. Ni un selector suelto:
 * `/empresas/` usa las mismas clases de prosa que estas paginas, asi que un `h2` global en esta
 * hoja cambiaria el titulo de las mil cuatrocientas notas.
 *
 * El aire y el tamano de los TITULOS los pone `catalogo.css`, que ya esta cargado en la pagina:
 * aqui solo lo que el reto tiene de suyo —la caja de la pregunta, las opciones, el veredicto y
 * el area de copiar— y lo unico que se repite al responder.
 */

/* ——— la caja del reto ———
   Una caja, no tres: la pregunta es un bloque y las opciones son sus hijos. El borde se levanta
   con `--ds-superficie-2` en tema oscuro, donde una sombra negra sobre negro no se ve. */
.herramientas .reto-caja {
  margin-block: var(--ds-esp-5);
  padding: var(--ds-esp-5);
  border: 1px solid var(--fantasma);
  border-radius: 14px;
  background: var(--panel);
}

.herramientas .reto-fecha {
  margin: 0 0 var(--ds-esp-2);
  font: 500 var(--ds-rotulo)/1.4 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--hueso-3);
}

/* El enunciado no se cierra ni en dos lineas ni en seis: `text-wrap: balance` reparte el peso a
   los dos lados y `pretty` evita que la ultima linea quede con una palabra suelta. */
.herramientas .reto-pregunta {
  margin: 0 0 var(--ds-esp-5);
  font: 600 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
  color: var(--hueso);
  text-wrap: balance;
}

/* ——— las opciones ———
   Botones de ancho entero y apilados: la pregunta se lee de arriba abajo y el dedo tiene ancho
   de sobra en movil. El min-height de 48 px es el objetivo tactil, no una decoracion. */
.herramientas .reto-opciones {
  display: grid;
  gap: var(--ds-esp-2);
}

.herramientas .reto-opcion {
  min-height: 48px;
  padding: var(--ds-esp-3) var(--ds-esp-4);
  border: 1px solid var(--fantasma);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-toque) var(--curva-llegada),
              background var(--t-toque) var(--curva-llegada);
}

.herramientas .reto-opcion:hover:not(:disabled),
.herramientas .reto-opcion:focus-visible {
  border-color: var(--catodo);
  background: var(--pozo);
}

.herramientas .reto-opcion:disabled {
  cursor: default;
  opacity: .72;
}

/* La correcta se marca con el filo de bronce y la fallada con la tinta de error del sistema.
   El color NO es lo unico que las distingue: cada una lleva su icono y su texto debajo. */
.herramientas .reto-opcion-correcta {
  border-color: var(--catodo);
  background: var(--pozo);
  opacity: 1;
}

.herramientas .reto-opcion-fallada {
  border-color: var(--aviso);
  opacity: 1;
}

/* ——— el veredicto y la explicacion ———
   Lo que aparece al responder. Sin `hidden` visible: el hueco no se reserva porque el area nace
   con la respuesta ya pintada en el HTML horneado y solo se sustituye al responder. */
.herramientas .reto-zona:not([hidden]) {
  margin-block-start: var(--ds-esp-4);
}

.herramientas .reto-veredicto {
  margin: 0 0 var(--ds-esp-2);
  font: 600 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--condensada);
  color: var(--hueso);
}

.herramientas .reto-texto {
  margin: 0;
  color: var(--hueso-2);
  max-width: 68ch;
  text-wrap: pretty;
}

/* La fuente va con la explicacion y por debajo de ella: es el remate, no un titular. Tinta
   secundaria —la misma de la fecha y de las etiquetas— porque ahi esta el enlace de apoyo. */
.herramientas .reto-fuente {
  font-size: .875em;
  margin-top: .5rem;
  color: var(--hueso-3);
}

/* ——— el texto para compartir ———
   El area se pinta siempre, no solo cuando la copia funciona: si el portapapeles esta bloqueado,
   el texto esta ahi para seleccionarlo a mano, que es lo que hace la excepcion del boton. */
.herramientas .reto-compartir {
  margin-block-start: var(--ds-esp-5);
  padding-block-start: var(--ds-esp-4);
  border-block-start: 1px solid var(--rejilla);
}

.herramientas .reto-etiqueta {
  display: block;
  margin-block-end: var(--ds-esp-2);
  font: 500 var(--ds-rotulo)/1.4 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--hueso-3);
}

.herramientas .reto-texto-copia {
  display: block;
  width: 100%;
  padding: var(--ds-esp-3);
  border: 1px solid var(--fantasma);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--hueso-2);
  font: 400 var(--ds-pie)/1.5 var(--datos);
  resize: vertical;
}

.herramientas .reto-copiar {
  margin-block-start: var(--ds-esp-3);
  min-height: 44px;
  padding: var(--ds-esp-2) var(--ds-esp-4);
  border: 1px solid var(--catodo);
  border-radius: 999px;
  background: transparent;
  color: var(--catodo);
  font: 500 var(--ds-cuerpo)/1.2 var(--condensada);
  cursor: pointer;
  transition: background var(--t-toque) var(--curva-llegada);
}

.herramientas .reto-copiar:hover,
.herramientas .reto-copiar:focus-visible {
  background: var(--pozo);
}

/* ——— el resumen del progreso ———
   Dos cifras y ninguna más: dias y aciertos. Es informacion del visitante, no un premio, y no
   hay con que compararla porque no se envia a ninguna parte. */
.herramientas .reto-resumen {
  margin: 0 0 var(--ds-esp-4);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

@media (prefers-reduced-motion: reduce) {
  .herramientas .reto-opcion,
  .herramientas .reto-copiar {
    transition: none;
  }
}