/*
 * styles.css — pensado primero para celular y para gente de todas las edades.
 *
 * Decisiones a propósito:
 * - Texto base de 18 px, preguntas de 20 px.
 * - Zonas tocables de 56 px de alto: un dedo no acierta un radio button de 16 px.
 * - Contraste AA en todo. Nada de texto gris claro.
 * - Doble declaración de color (valor fijo y luego var) para navegadores antiguos.
 */

:root {
  --primario: #1d6f42;
  --primario-oscuro: #14532d;
  /*
   * La respuesta elegida va en azul, no en el verde del botón Enviar:
   * dos bloques del mismo color se confunden entre sí y la persona no
   * distingue lo que eligió de la acción de enviar.
   */
  --seleccion: #185fa5;
  --texto: #1a1a1a;
  --texto-suave: #4a4a4a;
  --borde: #b8b8b8;
  --fondo: #ffffff;
  --fondo-suave: #f4f4f2;
  --error: #a4262c;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  background: var(--fondo, #ffffff);
  color: #1a1a1a;
  color: var(--texto, #1a1a1a);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.contenedor {
  max-width: 34rem;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Banda verde con el nombre de la encuesta. Con el saludo debajo forman
   una sola pieza, por eso las esquinas de abajo se cuadran cuando hay
   saludo (clase con-saludo en el body). */
.cabecera {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: 8px;
  background: #1d6f42;
  background: var(--primario, #1d6f42);
}

body.con-saludo .cabecera {
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.titulo {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.25;
}

.subtitulo {
  margin: 3px 0 0;
  /* Blanco al 82 %: se lee sobre el verde sin competir con el título. */
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
}

.cargando {
  padding: 32px 0;
  font-size: 19px;
}

.saludo {
  margin: 0 0 20px;
  padding: 16px;
  background: #f4f4f2;
  background: var(--fondo-suave, #f4f4f2);
  border-radius: 0 0 8px 8px;
}

/* Nombre y congregación en líneas distintas: juntos se leen como si la
   congregación fuera parte del nombre. */
.saludo-nombre {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.saludo-congregacion {
  display: block;
  margin-top: 4px;
  color: #4a4a4a;
  color: var(--texto-suave, #4a4a4a);
  font-size: 17px;
  line-height: 1.35;
}

/* Texto del evento: la instrucción de qué se está preguntando. */
.intro {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.5;
}

.ayuda {
  margin: 0 0 24px;
  font-size: 18px;
}

.ayuda-campo {
  margin: 8px 0 0;
  color: #4a4a4a;
  color: var(--texto-suave, #4a4a4a);
  font-size: 16px;
}

/* ----------------------------------------------------------------- */
/* Campos de texto                                                    */
/* ----------------------------------------------------------------- */

.campo {
  margin-bottom: 24px;
}

.etiqueta {
  display: block;
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 700;
}

.entrada,
.area {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 2px solid #b8b8b8;
  border: 2px solid var(--borde, #b8b8b8);
  border-radius: 8px;
  background: #ffffff;
  color: #1a1a1a;
  color: var(--texto, #1a1a1a);
  font-family: inherit;
  font-size: 19px;
}

.area {
  min-height: 120px;
  line-height: 1.45;
  resize: vertical;
}

.entrada:focus,
.area:focus {
  outline: 3px solid #14532d;
  outline: 3px solid var(--primario-oscuro, #14532d);
  outline-offset: 2px;
}

.telefono {
  display: flex;
  align-items: stretch;
}

.prefijo {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 2px solid #b8b8b8;
  border: 2px solid var(--borde, #b8b8b8);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #f4f4f2;
  background: var(--fondo-suave, #f4f4f2);
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.entrada-telefono {
  border-radius: 0 8px 8px 0;
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------- */
/* Preguntas                                                          */
/* ----------------------------------------------------------------- */

.pregunta {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

.pregunta-texto {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.requerida {
  color: #a4262c;
  color: var(--error, #a4262c);
}

.opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opciones-fila {
  flex-direction: row;
  flex-wrap: wrap;
}

.opciones-fila .opcion {
  flex: 1 1 40%;
}

/*
 * El input real cubre todo el botón y es transparente: así sigue siendo
 * el que recibe el toque, el foco y la lectura del lector de pantalla,
 * mientras el span de abajo pone el aspecto. Encogerlo a 1px lo deja
 * fuera del alcance de algunas ayudas técnicas.
 */
.opcion {
  position: relative;
  display: block;
}

.opcion input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid #b8b8b8;
  border: 2px solid var(--borde, #b8b8b8);
  border-radius: 8px;
  background: #ffffff;
  font-size: 19px;
  text-align: center;
  cursor: pointer;
}

.opcion input:checked + span {
  border-color: #185fa5;
  border-color: var(--seleccion, #185fa5);
  background: #185fa5;
  background: var(--seleccion, #185fa5);
  color: #ffffff;
  font-weight: 700;
}

/* La marca acompaña al color: quien no distingue bien los tonos igual
   ve cuál respuesta quedó elegida. */
.opcion input:checked + span::before {
  content: '\2713';
  margin-right: 8px;
}

/* El anillo de foco va en gris oscuro, no en verde: sobre la opción ya
   elegida (azul) el verde se confunde con el botón Enviar. */
.opcion input:focus + span {
  outline: 3px solid #1a1a1a;
  outline: 3px solid var(--texto, #1a1a1a);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- */
/* Botones                                                            */
/* ----------------------------------------------------------------- */

.boton {
  display: inline-block;
  min-height: 56px;
  padding: 14px 28px;
  border: 0;
  border-radius: 8px;
  background: #1d6f42;
  background: var(--primario, #1d6f42);
  color: #ffffff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.boton-grande {
  width: 100%;
  min-height: 64px;
  font-size: 21px;
}

.boton:focus {
  outline: 3px solid #14532d;
  outline: 3px solid var(--primario-oscuro, #14532d);
  outline-offset: 3px;
}

.boton[disabled] {
  background: #6b6b6b;
  cursor: default;
}

/* ----------------------------------------------------------------- */
/* Avisos                                                             */
/* ----------------------------------------------------------------- */

.aviso {
  margin: 0 0 20px;
  padding: 16px;
  border-radius: 8px;
  background: #f4f4f2;
  background: var(--fondo-suave, #f4f4f2);
  font-size: 19px;
}

.aviso-error {
  border-left: 6px solid #a4262c;
  border-left: 6px solid var(--error, #a4262c);
  background: #fdf2f2;
  color: #7d1d22;
}

/* ----------------------------------------------------------------- */
/* Pantalla final                                                     */
/* ----------------------------------------------------------------- */

.final {
  padding: 20px 18px;
  border-radius: 12px;
  background: #eef7f1;
  text-align: center;
}

.marca {
  margin: 0 0 4px;
  color: #1d6f42;
  color: var(--primario, #1d6f42);
  font-size: 34px;
  line-height: 1;
}

.final-titulo {
  margin: 0 0 6px;
  font-size: 21px;
}

.final-texto {
  margin: 0;
  font-size: 17px;
}

/* ----------------------------------------------------------------- */
/* Bloque posterior al agradecimiento: la segunda petición            */
/* ----------------------------------------------------------------- */

.extra {
  margin-top: 28px;
}

.extra-titulo {
  margin: 0 0 8px;
  font-size: 20px;
}

.extra-texto {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.5;
}

/* El video ocupa el ancho disponible y conserva su proporción.
   max-height evita que un video vertical empuje todo fuera de pantalla. */
.extra-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  border-radius: 8px;
  background: #000000;
  object-fit: contain;
}

.extra-descarga {
  margin: 12px 0 0;
  font-size: 17px;
}

.extra-cierre {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 600;
}

/* ----------------------------------------------------------------- */
/* Revisión por congregación                                          */
/* ----------------------------------------------------------------- */

/* Cuántos voluntarios quedan. Se queda arriba al desplazar, porque en
   una lista larga es la única referencia de cuánto falta. */
.contador {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #faeeda;
  color: #633806;
  font-size: 17px;
  font-weight: 700;
}

.contador-completo {
  background: #eaf3de;
  color: #27500a;
}

/* Cada voluntario en su propia tarjeta: sin un borde que los separe,
   una lista de 30 personas se vuelve una sola pared de preguntas. */
.voluntario {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid #e3e3df;
  border-radius: 10px;
  /* Sin esto, al saltar al voluntario que falta el contador pegado
     arriba le tapa el nombre. */
  scroll-margin-top: 64px;
}

.voluntario-cabecera {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e3e3df;
}

.voluntario-numero {
  display: block;
  color: #4a4a4a;
  color: var(--texto-suave, #4a4a4a);
  font-size: 14px;
}

.voluntario-nombre {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.25;
}

/* Las preguntas que dependen de otra van indentadas: se ve que son
   consecuencia de la respuesta anterior y no una pregunta más. */
.subpregunta {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 3px solid #e3e3df;
}

/* ----------------------------------------------------------------- */
/* WhatsApp de ayuda                                                  */
/* ----------------------------------------------------------------- */

.ayuda-contacto {
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #e3e3df;
}

.ayuda-contacto-texto {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.5;
  color: #4a4a4a;
  color: var(--texto-suave, #4a4a4a);
}

/* Contorneado, no sólido: es una salida de emergencia, no la acción
   principal de la pantalla. */
.boton-wsp {
  background: #ffffff;
  border: 2px solid #1d6f42;
  border: 2px solid var(--primario, #1d6f42);
  color: #1d6f42;
  color: var(--primario, #1d6f42);
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  line-height: 28px;
}

/* ----------------------------------------------------------------- */
/* Honeypot: invisible para personas, visible para bots              */
/* ----------------------------------------------------------------- */

.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}