/* Mobile-first. Sin fuentes externas: en un Android de 2016 cada descarga
   cuenta, y la fuente del sistema soporta el latino uzbeko sin problemas. */

/* Paleta: cambiar solo estas variables para retocar los colores del
   cuestionario (acento, fondo de pagina, tarjetas...). */
:root{
  --ink:#16202b; --muted:#5b6b7c; --line:#f2c9d8; --bg:#fbe4ec;
  --accent:#e3006e; --accent-soft:#fbdcea; --err:#b3261e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.wrap{max-width:780px;margin:0 auto;padding:0 16px}

.hdr{
  background:#fff;color:var(--ink);
  border-top:6px solid var(--accent);border-radius:0 0 10px 10px;
  box-shadow:0 2px 8px rgba(22,32,43,.08);
}
.hdr .wrap{padding:18px 16px 20px}
.crest{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.hdr h1{font-size:19px;margin:8px 0 4px;line-height:1.3;color:var(--ink)}
.sub{margin:0;font-size:14px;color:var(--muted)}

.note{
  background:#fff;border-left:3px solid var(--accent);
  padding:12px 14px;margin:16px 0;font-size:14px;color:var(--muted);border-radius:0 4px 4px 0;
}
.err{color:var(--err);padding:16px}

.choices{display:grid;gap:10px;margin:16px 0}
.pick{
  display:block;width:100%;padding:18px 16px;font-size:16px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;
}
.pick:active{background:var(--accent-soft)}

.sect{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;margin:16px 0}
.sect h2{font-size:15px;color:var(--accent);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}

.q{margin:0 0 22px;padding:10px;border-radius:6px;transition:background .15s}
.q:last-child{margin-bottom:4px}
.q.missing{background:#fdf1f0;box-shadow:0 0 0 1px var(--err)}
.label{font-weight:600;margin:0 0 8px;font-size:15px}
.hint{margin:-4px 0 8px;font-size:13px;color:var(--muted)}

.opts{display:grid;gap:8px}
.opt{
  /* 48px minimo: es el objetivo tactil que no falla con dedos y guantes */
  min-height:48px;padding:12px 14px;font-size:15px;text-align:left;line-height:1.35;
  background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer;
}
.opt:active{background:var(--accent-soft)}
.opt.on{background:var(--accent-soft);border-color:var(--accent);font-weight:600}
.opt.on::before{content:"\2713\00a0\00a0";color:var(--accent)}

textarea,input[type=text],input[type=search],select{
  width:100%;padding:12px;font-size:16px;  /* 16px evita el zoom automatico en iOS */
  font-family:inherit;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);
}
select{min-height:48px}
select[size]{height:auto;padding:4px}
select[size] option{padding:10px 8px;border-bottom:1px solid #eef2f6}
.other{margin-top:4px}
.tier{margin-top:14px}

.bar{position:sticky;bottom:0;background:var(--bg);padding:12px 0 18px;margin-top:8px}
.primary{
  width:100%;min-height:52px;font-size:17px;font-weight:600;
  background:var(--accent);color:#fff;border:0;border-radius:8px;cursor:pointer;
}
.primary:disabled{opacity:.6}
.status{margin:8px 0 0;font-size:14px;color:var(--err);text-align:center;min-height:20px}

.done{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 18px;text-align:center;margin:24px 0}
.done h2{color:var(--accent);margin:0 0 8px}

.ftr{padding:18px 16px 32px;font-size:13px;color:var(--muted);text-align:center}

@media (min-width:640px){
  .hdr h1{font-size:22px}
  .opts{grid-template-columns:1fr 1fr}
  .opts .other{grid-column:1/-1}
  .primary{max-width:280px;margin:0 auto;display:block}
}