/* Encuesta EcoAgua — estilos móviles. Tokens derivados de wit-ui (WITDATA) con el verde EcoAgua. */
:root {
  --canvas:#F7F8FA; --surface:#FFFFFF; --surface-2:#F1F3F6; --border:#D3D9E2; --border-subtle:#E3E7ED;
  --text:#1B2432; --text-2:#45536A; --muted:#5C6B80;
  --accent:#359A4F; --accent-solid:#2C8244; --accent-hover:#24763B; --accent-text:#227038; --accent-soft:#E7F3EB; --ring:rgba(44,130,68,.32);
  --danger:#DC2626; --danger-soft:#FDECEC; --warn-soft:#FDF3E3; --warn-text:#92400E; --info-soft:#E9F1FA; --info-text:#2C6299;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --r:10px; --shadow:0 1px 2px rgba(27,36,50,.06),0 0 0 1px rgba(27,36,50,.04);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100dvh}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--accent-text)}
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface)}
@media(min-width:560px){body{padding:24px 0}.app{min-height:calc(100dvh - 48px);border-radius:16px;box-shadow:0 12px 40px -12px rgba(27,36,50,.18),0 0 0 1px rgba(27,36,50,.05);overflow:hidden}}
.top{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--border-subtle);background:var(--surface);position:sticky;top:0;z-index:5}
.top h1{margin:0;font-size:19px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.top h1 small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.top img{height:42px;width:auto}
.progress{height:4px;background:var(--surface-2)}
.progress > i{display:block;height:100%;background:var(--accent-solid);transition:width .25s cubic-bezier(.4,0,.2,1)}
.main{flex:1;padding:20px 20px 28px;display:flex;flex-direction:column;gap:18px}
.chip-sec{display:flex;justify-content:space-between;align-items:center;background:var(--accent-soft);color:var(--accent-text);border-radius:8px;padding:9px 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.chip-sec span:last-child{font-family:var(--mono);font-weight:500;text-transform:none;letter-spacing:0}
.q-title{margin:6px 0 0;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.q-text{margin:4px 0 0;color:var(--text-2);font-size:16px}
.label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin:6px 0 10px}
.hint{font-size:13px;color:var(--muted);margin:-4px 0 10px}
.lead{font-size:16px;color:var(--text-2);margin:0}
.lead b{color:var(--text)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--text-2)}
.input{width:100%;height:48px;border:1.5px solid var(--border);border-radius:var(--r);padding:0 14px;background:var(--surface);outline:none;transition:border-color .12s,box-shadow .12s}
textarea.input{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.input:focus{border-color:var(--accent-solid);box-shadow:0 0 0 3px var(--ring)}
.input[readonly]{background:var(--surface-2);color:var(--text-2)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale button{aspect-ratio:1;border-radius:50%;border:2px solid var(--border);background:var(--surface);font-size:20px;font-weight:700;color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.scale button:active{transform:scale(.94)}
.scale button[aria-pressed="true"]{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;box-shadow:0 0 0 4px var(--ring)}
.scale-legend{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.scale-word{text-align:center;font-weight:600;color:var(--accent-text);min-height:22px;margin-top:6px;font-size:15px}
.na{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border:1.5px dashed var(--border);border-radius:var(--r);cursor:pointer;color:var(--text-2);font-size:14px;user-select:none}
.na input{width:20px;height:20px;accent-color:var(--accent-solid)}
.na.on{border-style:solid;border-color:var(--accent-solid);background:var(--accent-soft);color:var(--accent-text)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts button{height:50px;border:2px solid var(--border);border-radius:var(--r);background:var(--surface);font-weight:600;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 14px;transition:all .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.opts button::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex:none;transition:all .12s}
.opts button[aria-pressed="true"]{border-color:var(--accent-solid);background:var(--accent-soft);color:var(--accent-text)}
.opts button[aria-pressed="true"]::before{border-color:var(--accent-solid);background:var(--accent-solid);box-shadow:inset 0 0 0 3px var(--accent-soft)}
.nav{display:flex;gap:10px;padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle);background:var(--surface);position:sticky;bottom:0}
.btn{height:50px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--surface);font-weight:600;font-size:16px;padding:0 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-decoration:none;color:var(--text)}
.btn:active{transform:scale(.98)}
.btn-primary{flex:1;background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{color:var(--text-2)}
.btn-sm{height:36px;font-size:13px;padding:0 12px}
.foot{padding:10px 20px;font-size:10.5px;color:var(--muted);font-family:var(--mono);text-align:center;border-top:1px solid var(--border-subtle);background:var(--surface-2)}
.note{background:var(--info-soft);color:var(--info-text);border-radius:var(--r);padding:12px 14px;font-size:13.5px;line-height:1.5}
.note b{font-weight:700}
.warn{background:var(--warn-soft);color:var(--warn-text);border-radius:var(--r);padding:12px 14px;font-size:13.5px}
.err{color:var(--danger);font-size:13px;font-weight:600;min-height:18px}
.done{text-align:center;padding:36px 8px;display:flex;flex-direction:column;align-items:center;gap:14px}
.done .ok{width:76px;height:76px;border-radius:50%;background:var(--accent-soft);color:var(--accent-solid);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700}
.done h2{margin:0;font-size:24px}
.done p{margin:0;color:var(--text-2)}
.review{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;text-align:left;width:100%}
.review div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--border-subtle);font-size:13.5px}
.review div:first-child{border-top:0;background:var(--surface-2);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.review b{font-family:var(--mono);font-weight:600;color:var(--accent-text);white-space:nowrap}
.fade{animation:fade .22s cubic-bezier(.4,0,.2,1)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}