/* ============================================================================
   RETOS · assets/estilos.css — Estilo común de las páginas de los retos
   Los colores son variables (--r-…): los define nucleo/sitio.php de cada web
   (rosa/granate en enviaunarosa.com, dorado/ámbar en velario.es). Aquí van
   unos valores por defecto por si faltaran. Cada reto puede añadir su
   juego.css en su carpeta.
   ========================================================================== */
/* :where() tiene especificidad 0: estos valores de reserva NUNCA pisan los
   colores de la web (el <style> que genera retos_css_tema()), se carguen en
   el orden que se carguen. */
:where(:root) {
  --r-fondo: #000; --r-tarjeta: #141414; --r-borde: #3a1620; --r-borde-fuerte: #7a2238;
  --r-acento: #e8546e; --r-acento-claro: #ff6b85; --r-boton: #b8235a; --r-boton-hover: #d42a69; --r-seleccion: #1d0c12;
}

/* --- Base ------------------------------------------------------------------ */
.retos {
  margin: 0;
  background: var(--r-fondo);
  color: #f2f2f2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
.retos *, .retos *::before, .retos *::after { box-sizing: border-box; }
.retos a { color: var(--r-acento); }
.retos-caja { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }

/* --- Cabecera ----------------------------------------------------------------- */
.retos-cabecera { text-align: center; margin-bottom: 24px; }
.retos-volver { display: inline-block; font-size: 14px; text-decoration: none; margin-bottom: 18px; }
.retos-antetitulo { color: var(--r-acento); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 10px; }
.retos h1 { font-size: clamp(26px, 6vw, 34px); margin: 0 0 10px; color: #fff; line-height: 1.2; }
.retos-sub { margin: 0 auto 16px; max-width: 560px; color: #ddd; }
.retos-reglas { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.retos-reglas li { background: #1c1c1c; border: 1px solid var(--r-borde); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.retos-reglas strong { color: var(--r-acento-claro); }
.retos-pista { font-size: 14px; color: #ccc; margin: 0; }

/* --- Tarjetas ----------------------------------------------------------------- */
.retos-tarjeta { background: var(--r-tarjeta); border: 1px solid var(--r-borde); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.retos-tarjeta h2 { font-size: 20px; margin: 0 0 14px; color: #fff; }
.retos-pasos { margin: 0 0 18px; padding-left: 20px; }
.retos-letra { font-size: 13px; color: #aaa; margin: 12px 0 0; }

/* --- Avisos --------------------------------------------------------------------- */
.retos-aviso { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: #1f1f1f; border: 1px solid #333; }
.retos-aviso--ok { background: #10241a; border-color: #1f6b43; color: #c9f5dc; }
.retos-aviso--prueba { background: #2a2410; border-color: #8a7420; color: #ffe9a6; }
.retos-boton--prueba { margin-top: 10px; background: #5a4a12; }
.retos-boton--prueba:hover { background: #7a6418; }
.retos-aviso--error { background: #2a0f15; border-color: #7a2238; color: #ffd0d8; }

/* --- Formulario --------------------------------------------------------------- */
.retos-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.retos-form input[type=email] {
  width: 100%; padding: 14px; border-radius: 12px; border: 1px solid #444;
  background: #0b0b0b; color: #fff; font-size: 16px; margin-bottom: 14px;
}
.retos-form input[type=email]:focus { outline: 2px solid var(--r-acento); border-color: transparent; }
.retos-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Botón principal ------------------------------------------------------------- */
.retos-boton {
  display: inline-block; width: 100%; border: 0; cursor: pointer;
  background: var(--r-boton); color: #fff; font-weight: 700; font-size: 17px;
  padding: 15px 24px; border-radius: 999px; transition: background .2s ease;
}
.retos-boton:hover { background: var(--r-boton-hover); }
a.retos-boton, .retos a.retos-boton { color: #fff; text-decoration: none; text-align: center; }
.retos-boton:disabled { background: #3a3a3a; color: #aaa; cursor: not-allowed; }

/* --- Lista de rosas ------------------------------------------------------------------ */
.retos-rosas { display: grid; gap: 10px; }
.retos-rosa { display: flex; gap: 12px; align-items: flex-start; background: #0e0e0e; border: 1px solid #2c2c2c; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.retos-rosa:has(input:checked) { border-color: var(--r-acento); background: var(--r-seleccion); }
.retos-rosa input { margin-top: 5px; accent-color: var(--r-acento); }
.retos-rosa-texto { display: grid; gap: 2px; min-width: 0; }
.retos-rosa-texto small { color: #999; }
.retos-rosa-texto em { color: #ccc; font-size: 14px; overflow-wrap: anywhere; }
.retos-rosa--bloqueada { opacity: .5; cursor: not-allowed; }

/* --- Juego ------------------------------------------------------------------------- */
.retos-marcador { display: flex; justify-content: space-between; font-weight: 700; color: #ccc; margin-bottom: 8px; }
#retos-reloj { color: var(--r-acento-claro); font-variant-numeric: tabular-nums; }
.retos-barra { height: 8px; background: #2a2a2a; border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
#retos-barra-relleno { height: 100%; width: 100%; background: linear-gradient(90deg, var(--r-boton), var(--r-acento-claro)); transform-origin: left; }
.retos-juego h2 { font-size: 21px; line-height: 1.35; min-height: 2.7em; }
.retos-opciones { display: grid; gap: 10px; }
.retos-opcion {
  text-align: left; width: 100%; cursor: pointer; font-size: 16px; color: #fff;
  background: #0e0e0e; border: 1px solid #3a3a3a; border-radius: 12px; padding: 14px 16px;
  transition: border-color .15s ease, background .15s ease;
}
.retos-opcion:disabled { opacity: .6; cursor: wait; }
/* Resaltado al pasar el ratón: SOLO con ratón (hover real) y solo después de
   moverlo sobre la pregunta nueva (clase retos-opciones--raton, la pone
   juego.js). Así, en el móvil el último toque no deja «marcada» la opción que
   aparece en la misma posición en la pregunta siguiente. */
@media (hover: hover) and (pointer: fine) {
  .retos-opciones--raton .retos-opcion:hover:not(:disabled) { border-color: var(--r-acento); background: var(--r-seleccion); }
}
/* La opción que la persona acaba de pulsar (mientras se envía). */
.retos-opcion.retos-opcion--elegida, .retos-opcion.retos-opcion--elegida:disabled {
  opacity: 1; border-color: var(--r-acento); background: var(--r-seleccion); box-shadow: 0 0 0 2px var(--r-acento) inset;
}
/* Teclado: marco visible solo al navegar con el tabulador. */
.retos-opcion:focus { outline: none; }
.retos-opcion:focus-visible { outline: 2px solid var(--r-acento-claro); outline-offset: 2px; }
.retos-juego--urgente #retos-reloj { animation: retos-latido 1s infinite; }
@keyframes retos-latido { 50% { opacity: .35; } }

/* --- Resultado ---------------------------------------------------------------------- */
.retos-resultado { text-align: center; }
.retos-resultado .retos-emoji { font-size: 56px; line-height: 1; margin: 0 0 8px; }
.retos-resultado h2 { font-size: 26px; }
.retos-puntos { font-size: 18px; margin: 0 0 16px; }
.retos-correcciones { text-align: left; margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.retos-correcciones li { background: #0e0e0e; border-radius: 10px; padding: 10px 12px; border-left: 4px solid var(--r-borde-fuerte); font-size: 14px; }
.retos-correcciones li.ok { border-left-color: #1f6b43; }

@media (max-width: 480px) {
  .retos-tarjeta { padding: 18px 16px; }
  .retos-juego h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .retos-juego--urgente #retos-reloj { animation: none; }
}


/* --- Compartir el reto ---------------------------------------------------------- */
.retos-compartir { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.retos-compartir .retos-letra { width: 100%; margin: 0; }
/* Mismo tamaño y letra sea enlace (WhatsApp) o botón (Copiar enlace). */
.retos button, .retos input { font-family: inherit; }
.retos-boton--secundario { width: auto; padding: 10px 18px; font-size: 15px; line-height: 1.3; background: transparent; border: 1px solid var(--r-acento); color: var(--r-acento-claro); }
.retos-boton--secundario:hover { background: var(--r-seleccion); }
a.retos-boton--secundario, .retos a.retos-boton--secundario { color: var(--r-acento-claro); }

/* --- Portada de los retos: tarjetas con imagen ------------------------------------ */
/* Portada más ancha y retos en 2 columnas (1 en el móvil): se van sumando
   retos sin tocar nada. Los botones «Jugar» quedan alineados abajo. */
.retos-caja--portada { max-width: 1040px; }
.retos-caja--portada .retos-cabecera { max-width: 720px; margin-left: auto; margin-right: auto; }
.retos-lista { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .retos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.retos-lista > .retos-tarjeta { margin: 0; }
.retos-ficha { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.retos-ficha-cuerpo { flex: 1; display: flex; flex-direction: column; }
.retos-ficha-cuerpo .retos-boton { margin-top: auto; }
.retos-ficha img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.retos-ficha-cuerpo { padding: 18px 20px 22px; }
.retos-ficha-cuerpo h2 { margin: 0 0 8px; }
.retos-ficha-cuerpo p { margin: 0 0 14px; color: #ddd; }

/* --- Sin copiar ni pegar (opción «Impedir copiar y pegar» del reto) ------------
   El texto del juego no se puede seleccionar ni copiar (tampoco con pulsación
   larga en el móvil). Las casillas de respuesta sí permiten escribir y corregir.
   Los lectores de pantalla siguen leyendo el texto con normalidad. */
.retos-sin-copia #retos-juego {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.retos-sin-copia #retos-juego input, .retos-sin-copia #retos-juego textarea {
  -webkit-user-select: text; user-select: text;
}

/* Aviso dentro del juego (pegar no permitido, salidas de la página…). */
.retos-aviso-juego {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; text-align: center;
  background: #2a2410; border: 1px solid #8a7420; color: #ffe9a6;
}
.retos-aviso-juego[hidden] { display: none; }

/* --- Música de fondo: botón (▶ / 🔊 / 🔇) y volumen ---------------------------- */
.retos-musica { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; justify-content: flex-end; }
.retos-musica-boton {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--r-borde-fuerte);
  background: var(--r-seleccion); color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.retos-musica-boton:hover { border-color: var(--r-acento); }
.retos-musica-volumen { width: 120px; accent-color: var(--r-acento); }
.retos-musica-texto { font-size: 13px; color: #aaa; }
.retos-musica--muda .retos-musica-texto { text-decoration: line-through; }
.retos-musica[hidden] { display: none; }

/* --- Retos de temporada ------------------------------------------------------- */
.retos-temporada {
  display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; font-size: 14px;
  background: var(--r-seleccion); border: 1px solid var(--r-borde-fuerte); color: #f2f2f2;
}
.retos-temporada strong { color: var(--r-acento-claro); }
.retos-temporada--cerrada { opacity: .85; }
.retos-ficha-cuerpo .retos-temporada { align-self: flex-start; }
.retos-ficha--temporada { border-color: var(--r-borde-fuerte); }
.retos-ficha--proxima img { filter: grayscale(.55) brightness(.7); }
.retos-boton--apagado { background: #2a2a2a; color: #ddd; }
.retos-boton--apagado:hover { background: #333; }
.retos-seccion { margin: 36px 0 16px; text-align: center; font-size: 22px; color: var(--r-acento); }
.retos-cerrado { text-align: center; }