/* Terminal de campo — identidad ESTRATEGIA.
   Se usa de pie, con una mano, a pleno sol y a veces con guantes: de ahi los
   objetivos tactiles grandes y el contraste alto.

   Reparto de la paleta corporativa, medido, no elegido por gusto:
     #131F3B  barra y superficies oscuras   (blanco encima 16,3:1)
     #1F5C99  acciones y estado marcado     (sobre el crema 6,1:1)
     #FFC300  SOLO bloques que no se pueden pasar por alto
              (negro encima 11.03:1, pero sobre blanco 1.61:1, o sea que
               NUNCA como color de texto) */

:root {
  --marca: #1F5C99;
  /* Paleta azul compartida del ecosistema (24-08-2026): el mismo navy que
     el panel y que las demas aplicaciones. */
  --marca-honda: #131F3B;
  --ambar: #FFC300;
  --ambar-tinta: #3A2A00;

  /* Fondo "papel" (opcion B aprobada): quita el brillo del blanco puro y,
     sobre todo, hace que las opciones —que siguen blancas— se despeguen
     como tarjetas sin depender solo de su borde. */
  --fondo: #f7f1e3;
  --superficie: #ffffff;
  --tarjeta: #fdfbf6;
  --texto: #111827;
  --tenue: #5b6b85;
  --borde: #ddd5c4;
  --acento: var(--marca);
  --acento-texto: #ffffff;
  --aviso: #b42318;
  /* La instruccion para el encuestador NO comparte token con los errores:
     de noche el rojo de aviso se aclara hasta rosa y deja de leerse como
     rojo, que es justo lo que le dice al encuestador "esto no se lee en
     voz alta". Se le da un rojo propio en cada tema. */
  --instruccion: #c0170a;
  /* Codigos 95-99. Blanco tirado al ambar corporativo (#FFC300 al 4%), pedido asi por el
     usuario. A este nivel el tinte apenas insinua: lo que de verdad delimita
     la opcion es el borde de la tarjeta, no el relleno.
     En hexadecimal y no en rgba porque .opcion pinta su propio fondo: con
     rgba compondria contra el beige de la pagina y saldria mas saturado. */
  --no-sustantiva: #fffdf5;
  --bien: #0a7c48;
  --barra-fondo: var(--marca-honda);
  --barra-texto: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Mismo tinte sobre la superficie oscura: el amarillo claro de dia seria
       una mancha de noche. */
    --no-sustantiva: #222b37;
    /* De noche el beige es contraproducente: se mantiene el oscuro. */
    --fondo: #0c1424;
    --superficie: #16233a;
    --tarjeta: #16233a;
    --texto: #edf2fa;
    --tenue: #98a9c4;
    --borde: #263650;
    /* El azul se aclara de noche: el corporativo sobre fondo oscuro se apaga
       y deja de leerse como accion. */
    --acento: #6fa1ff;
    --acento-texto: #08122a;
    --aviso: #ff9c92;
    --instruccion: #ff6b5e;
    --bien: #5fd79c;
    /* La barra NO se oscurece de noche: es el azul de marca y tiene que ser
       el mismo en los dos temas. El blanco encima da 9.36:1 en ambos. */
  }
}

* { box-sizing: border-box; }

/* Sin esto, "header { display: flex }" gana sobre el display:none que el
   navegador aplica a [hidden] —los estilos de autor pisan los del navegador—
   y la barra de sincronizar aparece en la pantalla de login. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  font-synthesis: weight style;
  -webkit-text-size-adjust: 100%;
}

/* ---- Barra de marca ---------------------------------------------------- */

header {
  position: sticky; top: 0; z-index: 2;
  display: grid; gap: .5rem;
  padding: .7rem max(.9rem, env(safe-area-inset-left));
  padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--barra-fondo);
  color: var(--barra-texto);
}

/* flex-wrap y min-width:0 son lo que impide que la fila se salga de la
   pantalla: con nombres largos, el texto se recorta y los botones bajan de
   linea en vez de desaparecer por el borde derecho. */
.barra-alta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem .6rem; flex-wrap: wrap; min-width: 0;
}

/* El logotipo es blanco sobre transparente, asi que SOLO vale sobre fondo
   oscuro: vive en la barra azul y no se puede reutilizar sobre blanco sin una
   version en negativo.
   max-width en vw para que en pantallas estrechas encoja el logo y no empuje
   fuera el indicador de cobertura, que es informacion operativa. */
.glifo {
  height: 2rem; width: auto; max-width: 52vw;
  object-fit: contain; object-position: left center; display: block;
}

.identidad { display: grid; gap: .1rem; flex: 1 1 8rem; min-width: 0; }

.quien {
  font-size: .85rem; opacity: .85;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Avance del encuestador: lo que lleva hecho hoy y en todo el estudio. Se
   cuenta en el aparato, asi que funciona sin cobertura. */
.contadores {
  font-size: .78rem; font-weight: 700; color: var(--ambar);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acciones { display: flex; gap: .4rem; flex: 0 0 auto; }

header button {
  min-height: 2.4rem; padding: .4rem .8rem; font-size: .9rem;
  border-radius: .45rem; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .14); color: var(--barra-texto);
}

/* El selector .plano tiene mas peso que "header button", asi que sin esta
   regla el texto salia azul sobre la barra azul: ilegible. */
header button.plano {
  background: transparent;
  color: var(--barra-texto);
  border-color: rgba(255, 255, 255, .55);
}

/* Trabajar sin señal es lo normal aqui: se informa, no se alarma. El rojo
   queda reservado para lo que de verdad esta mal. */
.senal {
  flex: none;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: var(--barra-texto);
}

.senal::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #6fe3ac; }
.senal.sin::before { background: var(--ambar); }
.senal.mal::before { background: #ff9c92; }

/* ---- Estructura -------------------------------------------------------- */

main {
  flex: 1; width: 100%;
  display: flex; flex-direction: column;
  padding: 1.1rem max(.9rem, env(safe-area-inset-left)) 5.5rem;
  max-width: 46rem; margin: 0 auto;
}

/* Las tarjetas se reparten el alto libre en filas iguales, en vez de
   amontonarse arriba y dejar media pantalla vacia. Objetivos mas grandes
   para un pulgar, que es como se usa esto. */
/* Las tarjetas toman su altura natural y, si hay varias, todas igualan a la
   mas alta. NO se estiran para llenar la pantalla: con una sola tarjeta eso
   dejaba un vacio enorme con el boton perdido al fondo. */
.lista-tarjetas { display: grid; grid-auto-rows: 1fr; gap: .75rem; }

footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde); background: var(--superficie);
  color: var(--tenue); font-size: .9rem;
}

/* El unico dato que puede costar dinero: entrevistas que se quedaron en el
   aparato. Ambar de bloque con texto oscuro: 11:1, lo mas visible de la
   pantalla. */
.cuenta {
  flex: none;
  background: var(--ambar); color: var(--ambar-tinta);
  font-weight: 800; font-variant-numeric: tabular-nums;
  padding: .1rem .48rem; border-radius: 999px; font-size: .8rem;
}

/* El peso va explicito: "font" como atajo en body reinicia font-weight, y
   apoyarse en el valor por defecto del navegador deja titulares que en unos
   telefonos salen gruesos y en otros no. */
h1 { font-size: 1.55rem; font-weight: 700; margin: 0 0 .15rem; letter-spacing: -.02em; }

/* Encabezado de la pantalla de inicio. */
.cabecera-inicio { margin-bottom: 1.1rem; }
.cabecera-inicio .sub-titulo { margin: 0; font-size: .95rem; }

/* Resultado de la ultima sincronizacion: informativo y discreto, no un
   bloque de texto verde a media pantalla. */
.parte-sync {
  display: flex; gap: .55rem; align-items: flex-start;
  border-left: .25rem solid var(--bien);
  background: var(--tarjeta);
  border-radius: 0 .45rem .45rem 0;
  padding: .6rem .75rem; margin: 0 0 1rem;
  font-size: .95rem; color: var(--texto);
}
.parte-sync.mal { border-left-color: var(--aviso); }
.parte-sync b { font-weight: 700; }
.parte-sync span { color: var(--tenue); font-size: .88rem; display: block; margin-top: .1rem; }

/* Botoncito dentro de la banda de aviso: «Arreglarlo» tiene que caber en la
   misma banda sin estirarse al ancho de la pantalla, que es lo que hace la
   regla general de los botones dentro de una tarjeta. */
.parte-sync button {
  margin-top: .5rem; min-height: 2.4rem; padding: .35rem .8rem;
  font-size: .9rem; width: auto;
}

/* ---- Preparar el equipo (permisos) -------------------------------------- */
/* Una tarjeta por permiso, con el estado en una pastilla a la derecha del
   titulo: se ve cual de los dos falta sin leer nada. El color del filo
   izquierdo repite ese estado, porque a pleno sol una pastilla pequeña se
   pierde y una barra de tres milimetros no. */
.lista-permisos { display: grid; gap: .75rem; margin: 0 0 1.25rem; }

.permiso {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-left: .3rem solid var(--borde);
  border-radius: .6rem; padding: .85rem .9rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.permiso.bien { border-left-color: var(--bien); }
.permiso.mal { border-left-color: var(--aviso); }

.permiso-cabeza { display: flex; align-items: center; gap: .6rem; }
.permiso-cabeza h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }

/* La pastilla lleva el estado ESCRITO ademas del color: en blanco y negro, o
   sin distinguir rojo y verde, el color solo no dice nada. Es la misma regla
   que siguen las variaciones del panel. */
.pastilla-permiso {
  margin-left: auto; flex: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.pastilla-permiso.bien { color: var(--bien); }
.pastilla-permiso.mal { color: var(--aviso); }
.pastilla-permiso.sin { color: var(--tenue); }

.permiso .pista { margin: 0; font-size: .92rem; }
.permiso button { width: 100%; margin-top: .1rem; }

.resultado-permiso { margin: 0; font-size: .95rem; font-weight: 600; }

/* Los pasos van NUMERADOS porque hay que darlos en ese orden, y sangrados
   para que se lean como una lista de cosas que hacer y no como un parrafo. */
.arreglo {
  margin: 0; padding: .6rem .75rem .6rem 1.9rem;
  background: var(--fondo); border-radius: .45rem;
  font-size: .92rem; color: var(--texto);
}
.arreglo li { margin: .2rem 0; }

/* Tarjeta de cuestionario: nombre grande, datos discretos, boton al pie. */
/* LA TARJETA DEL FORMULARIO, EN DOS ZONAS (propuesta B, elegida). Antes el
   nombre, el estudio, las preguntas, la version y el avance compartian el
   mismo peso y la tarjeta se leia como una lista de datos sueltos. La cabecera
   de color separa QUE ES de QUE SE HACE con el. */
/* LA MAQUETA NUEVA SE ACOTA CON UNA CLASE PROPIA, y esto no es cosmetica.
   `.tarjeta-cuestionario` la llevan DOS tarjetas: la del formulario disponible
   —cabecera de color y cuerpo— y la del formulario RETIRADO, que es plana:
   h3 y datos sueltos sobre el fondo de la tarjeta. Sin acotar, todo lo de la
   maqueta nueva le caia encima a la retirada, y el titulo salia BLANCO SOBRE
   BLANCO: 1,03:1, invisible. Ademas se quedaba con un relleno de .55rem
   mientras las demas tarjetas de la aplicacion llevan .9rem. */
.tarjeta-cuestionario.con-cabecera { padding: .55rem; gap: .55rem; }

/* EL ORDEN DE ESTAS DOS REGLAS IMPORTA, y aqui estaba el fallo. Las genericas
   van PRIMERO y las de la cabecera DESPUES, porque las dos pesan lo mismo
   (0-2-0 y 0-2-1) y a igualdad decide el orden. Al reves —que es como estaba—
   `.tarjeta-cuestionario .datos b { color: var(--texto) }` pisaba el blanco de
   la cabecera y el NUMERO DE PREGUNTAS salia en tinta oscura sobre el fondo de
   color: invisible. Y `.datos` salia en gris de cuerpo, ilegible tambien. Es
   la trampa de la especificidad de siempre, por la puerta del orden. */
.tarjeta-cuestionario .datos {
  display: flex; flex-wrap: wrap; gap: .3rem .7rem;
  color: var(--tenue); font-size: .92rem; margin: 0;
}
.tarjeta-cuestionario .datos b { color: var(--texto); font-weight: 600; }

/* LA CABECERA VA EN #0B5ED7 Y CON LAS CUATRO ESQUINAS REDONDEADAS (peticion
   del usuario). Va METIDA dentro de la tarjeta, no a sangre: pegada a los
   bordes, el redondeo de arriba seria el de la tarjeta y el de abajo no se
   veria, o sea que no se leeria como un bloque redondeado.
   OJO: es un literal y no un token. #0B5ED7 es el azul generico que se retiro
   de todo el arbol al adoptar la paleta de marca (--marca #1F5C99), asi que
   NO existe como variable y no debe volver a existir: aqui es una eleccion
   puntual para esta tarjeta, pedida a la vista. */
.cabecera-cuestionario {
  background: #0B5ED7; padding: .8rem .9rem; border-radius: .5rem;
  display: flex; flex-direction: column; gap: .25rem;
}
/* DOS CLASES Y UN ELEMENTO (0-2-1) A PROPOSITO: `.tarjeta h3` es 0-1-1 y va
   MAS ABAJO en esta hoja, asi que con un selector de igual peso ganaria por
   orden y esta regla quedaria a medias. El h3 de la tarjeta RETIRADA no lleva
   `.con-cabecera`, asi que se queda con `.tarjeta h3` y su color de texto
   normal, que es lo correcto: ahi no hay fondo de color debajo. */
.tarjeta-cuestionario.con-cabecera h3 {
  font-size: 1.1rem; letter-spacing: -.015em; color: #fff; margin: 0;
  line-height: 1.25;
}
/* SOBRE ESTE AZUL NO CABE EL SECUNDARIO DE ANTES: #A9BBD4 da 2,99:1, por
   debajo del 4,5:1 que pide un texto. El azul es mas claro que el navy y deja
   muy poco margen entre el blanco y el suspenso, asi que el secundario es un
   blanco apenas teñido (4,86:1) y la jerarquia la lleva el TAMAÑO, no el
   color: el titulo va a 1,1rem y estos datos a 0,92rem. */
.cabecera-cuestionario .datos { color: #E2EBF9; }
.cabecera-cuestionario .datos b { color: #fff; }
.cuerpo-cuestionario {
  padding: .35rem .35rem .1rem; display: flex; flex-direction: column; gap: .6rem;
}

/* CUANTO LLEVA DE LO QUE LE TOCA. Solo se pinta si hay cuota: sin muestra
   declarada o sin asignados no se puede saber, y una barra sobre un
   denominador inventado dice algo falso con aspecto de dato. */
.avance-cuota { display: flex; flex-direction: column; gap: .35rem; }
/* NOMBRE PROPIO Y NO `.avance-cifras`: esa clase YA EXISTE mas abajo, en el
   avance del motor de entrevista, y al ir despues ganaba por orden y le
   cambiaba a esta el tamaño y el grosor. Dos cosas distintas no pueden
   compartir clase. */
.cuota-cifras {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .92rem; color: var(--tenue);
}
.cuota-cifras b {
  color: var(--acento); font-size: 1.2rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* EL CARRIL ES UN LITERAL FIJO EN LOS DOS TEMAS, a proposito. El relleno
   tambien lo es, asi que si el carril siguiera a `--borde` la pareja dejaria
   de contrastar en uno de los dos: medido, el azul contra el borde de noche da
   2,08:1. Fijos los dos, dan 4,22:1 siempre.
   Y ASI SE ARREGLA UN DEFECTO QUE ESTABA: el carril era #eee6d6 y el relleno
   ambar, o sea 1,30:1 — la barra no se veia. */
.barra-cuota {
  height: 7px; border-radius: 4px; background: #D3DCEA; overflow: hidden;
}
/* EL RELLENO PASA A SER EL AZUL DE LA CABECERA porque el ambar se lo lleva
   ahora el boton. Dos cosas distintas del mismo color en la misma tarjeta se
   leen como una, y el boton es lo que el usuario pidio en ambar. */
.barra-cuota-lleno { height: 100%; border-radius: 4px; background: #0B5ED7; }

/* EL BOTON DE ENTREVISTA, EN AMBAR (peticion del usuario). Se escribe
   `button.boton-entrevista` y no `.boton-entrevista` a secas por la trampa de
   siempre: en esta hoja hay reglas de tipo `button.algo` (0-1-1) que le
   ganarian a una clase sola (0-1-0) por mucho que esta vaya despues.
   EL TEXTO VA EN --ambar-tinta Y NO EN BLANCO: sobre el ambar el blanco da
   1,61:1 y no se lee. La tinta da 8,64:1. Es la misma regla de siempre —el
   ambar es relleno, nunca texto— aplicada al reves. */
button.boton-entrevista { background: var(--ambar); color: var(--ambar-tinta); }

/* Lo que lleva hecho el encuestador en ese formulario. */
.avance-encuestador {
  display: flex; gap: 1rem; margin-top: .1rem;
  font-size: .92rem; color: var(--tenue);
}
.avance-encuestador b { color: var(--acento); font-size: 1.1rem; font-variant-numeric: tabular-nums; }


.vacio-inicio {
  border: 1px dashed var(--borde); border-radius: .6rem;
  padding: 1.75rem 1rem; text-align: center; color: var(--tenue);
}

.sub-titulo { color: var(--tenue); margin: 0 0 1.75rem; }

/* Franja de marca al pie, hermana del encabezado: mismo azul, misma altura
   de aire. Cierra la pantalla de entrada, que si no queda flotando sobre un
   vacio muy grande en pantallas altas. */
.pie-marca {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--barra-fondo); color: var(--barra-texto);
  padding: .85rem .9rem calc(.85rem + env(safe-area-inset-bottom));
  text-align: center; font-size: .92rem; font-weight: 600; letter-spacing: .01em;
}
/* La pregunta se lee en voz alta a otra persona: tiene que poder leerse de
   un golpe de vista, sujetando el telefono a distancia de brazo. */
.enunciado { font-size: 1.65rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
/* La instruccion del encuestador NO se lee en voz alta: va en rojo y
   negrita para que se distinga de un vistazo del enunciado que si se lee. */
.ayuda { color: var(--instruccion); font-weight: 700; font-size: 1.08rem; margin: 0 0 1rem; }

/* Tarjeta de inicio de bloque. */
.tarjeta-capitulo {
  background: var(--marca-honda); color: #fff;
  border-radius: .55rem; padding: .7rem .9rem; margin: 0 0 1rem;
  display: grid; gap: .15rem;
}
.tarjeta-capitulo strong { font-size: 1.15rem; letter-spacing: -.01em; }
.tarjeta-capitulo p { margin: .2rem 0 0; font-size: .95rem; opacity: .85; }
.rotulo-capitulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ambar);
}

/* Acordeon de tabla: ambar = pendiente, azul = contestada. */
.acordeon { display: grid; gap: .5rem; margin: 1rem 0; }

.acordeon-cabecera {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  text-align: left; font-size: 1.08rem; font-weight: 700;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-left: .3rem solid var(--ambar);
  border-radius: .5rem; padding: .8rem .85rem;
}

.contestada > .acordeon-cabecera { border-left-color: var(--acento); }

.respuesta-elegida { font-size: .9rem; font-weight: 600; color: var(--acento); text-align: right; flex: none; }
.acordeon-fila:not(.contestada) .respuesta-elegida { color: var(--tenue); font-weight: 400; }

.acordeon-cuerpo { display: grid; gap: .5rem; padding: .5rem .1rem .2rem; }

/* En una tabla, el evaluado de esta pantalla (el candidato) manda. */
.fila-tabla {
  margin: 0 0 .75rem; padding: .55rem .8rem;
  border-left: .3rem solid var(--ambar);
  background: var(--tarjeta); border-radius: 0 .45rem .45rem 0;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
}

/* La instruccion la lee el encuestador mientras habla: si es pequeña, no la
   lee. Sube casi al cuerpo del texto normal. */
.pista { color: var(--tenue); font-size: 1.05rem; margin: .5rem 0 0; }

/* Fuera de la entrevista sigue siendo texto secundario. */
.tarjeta .pista, .pie-marca + .pista, form .pista { font-size: .92rem; }

/* ---- Controles --------------------------------------------------------- */

button {
  font: inherit; font-weight: 700; padding: .7rem 1rem; min-height: 3rem;
  /* Sin borde en el boton lleno: el borde del mismo color solo engorda la
     forma y le quita nitidez al bloque de color. */
  border: 0; border-radius: .45rem;
  background: var(--acento); color: var(--acento-texto); cursor: pointer;
}

button.plano { background: transparent; color: var(--acento); border: 1px solid var(--borde); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

.campo {
  font: inherit; width: 100%; padding: .8rem; min-height: 3rem;
  border: 1px solid var(--borde); border-radius: .5rem;
  background: var(--superficie); color: var(--texto);
}

.campo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(11, 94, 215, .18); }

/* Campo de contrasena con ojo */
.campo-clave { position: relative; display: block; }
.campo-clave .campo { padding-right: 3.4rem; }
.campo-clave .campo::-ms-reveal { display: none; }

.ojo {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  /* 2.6rem de lado: se acierta con el pulgar y con guantes. */
  width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: .4rem;
  color: var(--tenue); cursor: pointer;
}
.ojo:hover { color: var(--texto); }
.ojo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.ojo[aria-pressed="true"] { color: var(--acento); }

/* ---- Opciones ---------------------------------------------------------- */

.opciones { display: grid; gap: .5rem; margin: 1rem 0 0; }
.opciones-caja { display: grid; gap: .5rem; }

/* QUE SE LLEVO LA OPCION EXCLUSIVA. El hueco se reserva SIEMPRE, tenga o no
   texto: si el renglon naciera al marcar, empujaria «Siguiente» hacia abajo en
   el instante exacto en que el pulgar va hacia el —el mismo fallo que se acaba
   de arreglar con el peso constante de la fila—. min-height y no una altura
   fija, para que un mensaje de dos lineas siga cabiendo. */
.aviso-exclusiva.reservado { min-height: 1.5rem; }
.aviso-exclusiva {
  margin: 0; padding: 0 .15rem; line-height: 1.25;
  font-size: .95rem; font-weight: 600; color: var(--ambar-tostado);
}
.aviso-exclusiva:not(:empty) {
  background: var(--relleno-ambar); border-radius: .4rem;
  padding: .4rem .6rem;
}

/* Fondo BLANCO, no gris: la opcion es una superficie sobre la que se actua,
   y el gris la hacia parecer un bloque inerte. El borde es lo que la separa. */
.opcion {
  display: flex; align-items: center; gap: .7rem;
  /* El relleno izquierdo va DENTRO del atajo y no en una declaracion aparte:
     suelto, cualquiera que reescriba `padding` despues se lo come y el texto
     se pega a la banda. */
  padding: .8rem .85rem .8rem 1.15rem;
  border: 1px solid var(--borde); border-radius: .5rem;
  background: var(--superficie); cursor: pointer;
  font-size: 1.08rem; line-height: 1.3;
  /* PESO CONSTANTE, y esto NO es cosmetica. Marcada, la fila llevaba
     font-weight 600, que con font-synthesis se resuelve a 700: una respuesta
     cerca del corte pasaba de una linea a DOS al tocarla, la fila crecia ~26 px
     y todo lo de abajo bajaba con ella. En una multiple, el siguiente objetivo
     se movia media fila entre un toque y el siguiente, con el pulgar ya
     bajando: eso guarda respuestas equivocadas. La senal de marcado se la
     lleva la banda, que no toca el tamano de nada. */
  font-weight: 500;
  position: relative;
  /* Sin esto Android espera por si el gesto es un doble toque para hacer zoom,
     y ese retardo se come el acuse. */
  touch-action: manipulation;
  /* El velo del navegador se apaga: no se puede medir, no se puede coordinar
     con los demas estados y, sobre todo, no se puede temporizar —desaparece con
     el dedo, que es justo lo que tapa la fila mientras dura—. */
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, background-color .18s, color .18s, transform .18s;
}

/* LA BANDA: el area de color que dice si esta marcada. Existe SIEMPRE y solo
   cambia de tono, asi que marcar no mueve ni un pixel. El relleno del 10% que
   llevaba esa senal da 1,16:1 —al sol no existe—; la banda da 6,9:1.
   Va con `~` y no con `:has()`: ver armarOpcion() en entrevista.js. */
.opcion .banda {
  position: absolute; left: 0; top: 0; bottom: 0; width: .4rem;
  background: var(--borde); border-radius: .5rem 0 0 .5rem;
  transition: background-color .12s;
}
.opcion input:checked ~ .banda { background: var(--acento); }

/* EL ACUSE DEL TOQUE. Entre que el dedo baja y la opcion queda marcada no
   pasaba NADA —cero `:active` en todo el terminal—, asi que el encuestador
   duda de si registro y vuelve a tocar.
   LA TRANSICION ES ASIMETRICA A PROPOSITO: entra en 0 ms y sale en 180 ms.
   Mientras el dedo esta abajo el acuse esta TAPADO por el propio dedo; lo que
   de verdad se lee es el desvanecido al soltar, que es cuando la fila queda
   destapada. Y de paso los 8 px de hueco entre opciones pasan a informar: si
   no acusa nada, es que se fallo el objetivo. */
.opcion:active {
  background: var(--marca-honda); border-color: var(--marca-honda);
  color: #fff; transform: scale(.985);
  transition: none;
}
.opcion:active input { border-color: rgba(255, 255, 255, .75); }
.opcion:active .banda { background: rgba(255, 255, 255, .55); }

/* El control se dibuja aqui en vez de dejarlo al sistema: el nativo de cada
   Android tiene su propio grosor, color y tamaño, y el terminal debe verse
   igual en todos los aparatos del equipo de campo.
   Circulo para seleccion unica, cuadrado para multiple: esa diferencia es
   informacion —dice si se puede marcar una o varias— y por eso se conserva. */
.opcion input {
  appearance: none; -webkit-appearance: none;
  width: 1.4rem; height: 1.4rem; flex: none; margin: 0;
  border: 2px solid var(--borde); background: var(--superficie);
  background-repeat: no-repeat; background-position: center;
  transition: border-color .12s, background-color .12s;
}

.opcion input[type="radio"] { border-radius: 50%; }
.opcion input[type="checkbox"] { border-radius: .3rem; }

.opcion input:checked { border-color: var(--acento); }

/* Punto interior y palomita como imagen de fondo, no como ::after: los
   pseudoelementos sobre <input> no estan garantizados en todos los motores. */
.opcion input[type="radio"]:checked {
  background-image: radial-gradient(circle at center, var(--acento) 0 42%, transparent 44%);
}

.opcion input[type="checkbox"]:checked {
  background-color: var(--acento);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: .95rem .95rem;
}

@media (prefers-reduced-motion: reduce) {
  .opcion, .opcion input, .opcion .banda { transition: none; }
  /* El color del acuse se queda; lo que se retira es el movimiento. */
  .opcion:active { transform: none; }
}

/* Al sol un punto pequeño se pierde; un bloque entero teñido no. Por eso lo
   marcado cambia borde, fondo y peso de letra, no solo el circulo. */
/* Lista desplegable propia: el <select> nativo de Android no admite color
   de fondo en sus opciones, asi que se dibuja aqui. */
.desplegable { display: grid; gap: .5rem; }

.desplegable-boton {
  width: 100%; text-align: left; font-weight: 600;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: .5rem;
  padding: .8rem 2.2rem .8rem .85rem; min-height: 3rem;
  position: relative; font-size: 1.08rem;
}
.desplegable-boton.vacio { color: var(--tenue); font-weight: 400; }
.desplegable-boton::after {
  content: "▾"; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--tenue);
}
.desplegable-boton[aria-expanded="true"] { border-color: var(--acento); }
.desplegable-boton[aria-expanded="true"]::after { content: "▴"; }

/* Lista larga (municipios, ocupaciones): se desplaza dentro del panel. */
.desplegable-panel { max-height: 22rem; overflow-y: auto; }
.desplegable-panel .opciones { margin: 0; }

/* Codigos 95-99 (Ninguno, Otro, No aplica, NS/NR): los aparta de las
   respuestas sustantivas de un vistazo. El borde de la tarjeta sigue ahi, y
   es lo que las delimita: el fondo beige de la pagina queda entre el blanco
   y el ambar, asi que el relleno solo no bastaria para separarlas. */
.opcion.no-sustantiva { background: var(--no-sustantiva); }
option.no-sustantiva { background: var(--no-sustantiva); }

/* Va DESPUES del tinte: si esta marcada manda el azul, porque primero hay
   que saber que se eligio. */
/* El borde y el tinte se quedan como estaban —suman—, pero YA NO LLEVAN EL
   PESO: eso es lo que hacia crecer la fila al marcarla. Y si `:has()` no
   existe en ese WebView, esta regla entera se cae y la banda sigue diciendo
   lo que hay, que es para lo que se puso. */
.opcion:has(input:checked) {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, var(--superficie));
}

.opcion:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* ---- Navegacion y avance ------------------------------------------------ */

/* Franja de ancho completo bajo la barra. Metido entre los otros botones
   los empujaba fuera de la pantalla; aparte, no compite con nada y se lee
   entero. Ambar de bloque con texto oscuro: 11:1. */
#btn-actualizar {
  width: 100%; min-height: 2.6rem; padding: .55rem .8rem;
  background: var(--ambar); color: var(--ambar-tinta);
  border: 0; border-radius: .45rem; font-weight: 700; font-size: .92rem;
}

/* Inmediatamente despues de la ultima opcion (decision del usuario): el
   flujo de lectura termina en las opciones y ahi mismo se avanza, sin el
   hueco muerto hasta el fondo de la pantalla. */
/* Misma separacion que entre opciones (.opciones usa gap .5rem): los
   botones se leen como el paso siguiente de la misma lista, sin hueco. */
.navegacion { display: flex; gap: .75rem; margin-top: .5rem; }
.navegacion button { flex: 1; }

.pista-limites { margin: 0 0 .25rem; }

.avance { display: grid; gap: .35rem; margin-bottom: 1.25rem; }

.avance-cifras {
  display: flex; justify-content: space-between;
  font-size: .75rem; font-weight: 700; color: var(--tenue);
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}

.progreso { height: .35rem; background: var(--borde); border-radius: 999px; overflow: hidden; }
.progreso > div { height: 100%; background: var(--ambar); border-radius: 999px; transition: width .15s; }

@media (prefers-reduced-motion: reduce) { .progreso > div { transition: none; } }

/* ---- Tarjetas ----------------------------------------------------------- */

.tarjeta {
  border: 1px solid var(--borde); border-radius: .6rem; background: var(--tarjeta);
  padding: .9rem;
  /* gap en lugar de margenes sueltos: el ritmo vertical sale igual siempre,
     tenga la tarjeta dos elementos o cuatro. */
  display: flex; flex-direction: column; gap: .5rem;
}

/* Fuera de la lista repartida siguen necesitando separacion propia. */
main > .tarjeta { margin-bottom: .75rem; }

.tarjeta h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
/* Dato secundario: baja de cuerpo para que el nombre del cuestionario mande. */
.tarjeta p { margin: 0; color: var(--tenue); font-size: .88rem; }

/* El boton ocupa la tarjeta entera y se pega abajo, para que en tarjetas de
   distinta altura todos queden a la misma linea. Es el gesto que se hace
   cien veces al dia, de pie y con el pulgar. */
.tarjeta button { width: 100%; margin-top: auto; }

/* Dos acciones en una tarjeta: la principal manda, la de descartar se ve
   pero no se pulsa por accidente. */
.acciones-tarjeta { display: flex; gap: .5rem; margin-top: auto; padding-top: .25rem; }
.acciones-tarjeta button { margin-top: 0; }
.acciones-tarjeta .principal { flex: 2; }
.acciones-tarjeta .descartar { flex: 1; color: var(--aviso); border-color: var(--borde); background: transparent; }
.tarjeta.atencion { border-left: .3rem solid var(--ambar); }

.error { color: var(--aviso); margin: .75rem 0 0; }

/* Pantalla «Instale la app» (iPhone abierto en Safari). Ambar con filete a la
   izquierda, como .tarjeta.atencion: es un aviso que impide seguir, no un
   error. El texto va en --texto (no en ambar) para que se lea igual de claro
   en tema oscuro. Sin anchos fijos: sirve igual a 390 px que a 1.366 px. */
.aviso-instalar {
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--borde); border-left: .3rem solid var(--ambar);
  border-radius: .5rem; padding: .8rem 1rem; margin: .9rem 0;
  font-size: 1.02rem; line-height: 1.45;
}
.aviso-instalar p { margin: 0; }
.aviso-instalar p + p { margin-top: .6rem; }
.resultado-envio { margin: .9rem 0 0; font-size: .98rem; line-height: 1.4; color: var(--texto); }
.resultado-envio:empty { display: none; }
.resultado-envio.mal { color: var(--aviso); font-weight: 600; }
/* «Qué hacer:» va pegado a su lista; el margen de .sub-titulo está pensado para separarlo de un formulario. */
.aviso-instalar ~ .sub-titulo { margin-bottom: .2rem; }

form { display: grid; gap: 1.1rem; }

/* Las etiquetas se leen de un vistazo y de pie: mas cuerpo, mas peso y el
   color del texto, no el gris tenue, que a pleno sol se pierde. */
label.bloque {
  display: grid; gap: .4rem;
  font-size: .95rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--texto);
}

/* Boton de instalar. Mismo sitio y misma forma que el de actualizar —ambos
   son avisos de la barra, no acciones de la entrevista— pero en ambar, para
   que no se confunda con "hay version nueva", que es rojo de urgencia. */
#btn-instalar {
  width: 100%; margin-top: .5rem;
  background: var(--ambar); color: var(--ambar-tinta);
  border: 0; border-radius: .5rem; padding: .7rem;
  font-weight: 700; font-size: 1rem;
}
#btn-instalar[disabled] { opacity: .6; }

/* Pasos para desbloquear el almacenamiento del navegador. Van en lista y no
   en un parrafo: quien los lee esta de pie con el celular en la mano y tiene
   que poder seguirlos uno a uno sin perder el sitio. */
.pasos-arreglo {
  margin: .4rem 0 1.4rem;
  padding-left: 1.3rem;
  display: grid;
  gap: .6rem;
  line-height: 1.45;
}

/* El teléfono de soporte, al pie de la lista de cuestionarios. Se busca cuando
   algo falla, así que no compite con lo que se mira todos los días: va abajo,
   separado por una línea, y sin el azul de las acciones. */
.pie-soporte {
  margin: 1.4rem .2rem .4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}
.pie-soporte .soporte {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: .6rem;
  background: var(--tarjeta); border: 1px solid var(--borde);
  color: var(--texto); text-decoration: none;
}
/* El objetivo táctil entero, no solo el texto: se pulsa con el pulgar y a
   veces con guantes. */
.pie-soporte .soporte span { display: block; }
.pie-soporte .soporte b { display: block; font-size: .95rem; }
.pie-soporte .soporte .numero { font-size: .86rem; color: var(--tenue); }
/* Verde de WhatsApp, que es la marca a la que lleva: en el azul de la
   aplicación no se reconocería a qué abre. */
.pie-soporte .icono-wa {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center; font-size: 1.15rem;
}
.pie-soporte .soporte:active { background: var(--fondo); }

/* ---- El ensayo, en rojo (variante B: contorno) ----------------------------
   Un formulario de práctica y el de verdad se llaman IGUAL —crearEnsayo copia
   el nombre— así que sin esto no hay forma de distinguirlos en la lista.
   Contorno y no relleno: en una capacitación TODO es ensayo, y una lista de
   pastillas rojas macizas cansa la vista y deja de avisar de nada. */
.marca-ensayo {
  display: inline-block; vertical-align: middle;
  margin-right: .4rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  /* RELLENO Y NO CONTORNO. Se probaron las dos y se eligió esta viéndolas en
     pantalla: es la que no se pasa por alto cuando en la lista conviven el
     ensayo y el formulario de verdad con el mismo nombre, que es justo cuando
     hace falta. Blanco sobre #b42318 da 6,6:1, de sobra para leerse. */
  color: #fff;
  background: var(--aviso);
  border-radius: .28rem; padding: .12rem .42rem;
}
/* El mismo rojo de --aviso, no uno nuevo: dos rojos distintos significando
   cosas parecidas se acaban confundiendo. Aquí es texto sobre el papel, con
   contraste de sobra. */
.tarjeta-cuestionario.es-ensayo { border-left: 4px solid var(--aviso); }

/* Los contadores en ámbar mientras quede trabajo dentro del aparato. No es una
   alarma —la encuesta está a salvo, solo no ha salido— pero tiene que verse sin
   buscarlo: es lo que decide si el encuestador puede irse a casa. */
.contadores.pendiente { color: var(--ambar); font-weight: 700; }

/* El GPS mientras converge, en la cabecera de avance. Se ve la cifra Y la
   palabra: «±14 m» no le dice nada a quien no sabe que es bueno, y «óptimo»
   a secas no deja comprobarlo. */
.gps-vivo {
  margin-top: .35rem; padding: .2rem .5rem; border-radius: .35rem;
  font-size: .82rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--tenue);
}
.gps-vivo.bien { color: var(--bien); border-color: var(--bien); }
.gps-vivo.medio { color: var(--ambar-tinta); background: var(--no-sustantiva); border-color: var(--ambar); }
/* El aviso de ubicación aproximada va aquí y en rojo: es lo único de los tres
   que NO se arregla esperando —hay que tocar los ajustes del teléfono—. */
.gps-vivo.mal { color: var(--aviso); border-color: var(--aviso); }