/* Hoja única. Sin marco de terceros: son ocho páginas y se ven en el móvil
   de un voluntario tanto como en el portátil de la responsable. */
:root {
  --fondo: #fbfaf8;
  --texto: #1d1c1a;
  --apagado: #6b6862;
  --borde: #ddd9d2;
  --acento: #2f5d50;
  --si: #e3f1e6;
  --no: #f7e2e0;
  --parcial: #fdf0d9;
  --duda: #eceaf3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17181a; --texto: #ececea; --apagado: #9b9892; --borde: #35373a;
    --acento: #8fc6b3; --si: #1f3a2a; --no: #3d2422; --parcial: #3b3020; --duda: #2a2833;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
a { color: var(--acento); }

.barra { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
         justify-content: space-between; border-bottom: 1px solid var(--borde);
         padding-bottom: .75rem; margin-bottom: 1rem; }
.barra nav { display: flex; gap: 1rem; align-items: baseline; }

form.estrecho { max-width: 28rem; }
label { display: block; margin: .75rem 0; }
label.casilla { display: flex; gap: .5rem; align-items: center; margin: .35rem 0; }
input[type=text], input[type=email], input[type=password], input[type=tel] {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem;
  border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto); font: inherit;
}
button {
  margin-top: 1rem; padding: .55rem 1.1rem; border: 0; border-radius: 6px;
  background: var(--acento); color: #fff; font: inherit; cursor: pointer;
}
button.enlace { background: none; color: var(--acento); padding: 0; margin: 0;
                text-decoration: underline; }
form { display: inline; }

/* El campo trampa: invisible para una persona, visible para un robot que lee
   el HTML. Fuera de pantalla en vez de display:none, que algunos detectan. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lista { list-style: none; padding: 0; }
.lista li { padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.apagado { color: var(--apagado); }
.error { background: var(--no); padding: .6rem .8rem; border-radius: 6px; }
.aviso { background: var(--parcial); padding: .6rem .8rem; border-radius: 6px; }
.etiqueta { display: inline-block; background: var(--duda); border-radius: 999px;
            padding: .1rem .6rem; margin-right: .3rem; font-size: .85rem; }
.alta.apagada { opacity: .55; }

.desplazable { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { border: 1px solid var(--borde); padding: .4rem .5rem; text-align: left;
         vertical-align: top; }
th { background: var(--duda); position: sticky; top: 0; }
.estado-si { background: var(--si); }
.estado-no { background: var(--no); }
.estado-parcial { background: var(--parcial); }
.estado-duda { background: var(--duda); }
.estado-sin_respuesta { color: var(--apagado); }