/* Omega · Encuestas — pensada primero para un celular de 375 px.
   El color de cada encuesta llega como --c (lo pone app.js); el resto es la
   paleta del portal. Botones de 48 px de alto como mínimo: se contesta con
   el pulgar, a veces con guantes. */
:root{--navy:#0A2540;--deep:#06192B;--c:#B41318;--tinta:#16202B;--gris:#5B6672;--linea:#E3E8EE;--suave:#F5F7FA;--bien:#12A15A;--mal:#E23E2C;--papel:#FFFFFF}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;color:var(--tinta);background:var(--suave);-webkit-font-smoothing:antialiased;min-height:100vh}
.barra{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--navy);color:#fff;font-size:13px}
.barra .marca{font-weight:800;letter-spacing:.02em}
.barra .tema{opacity:.8}
.banda{background:#FFF4D6;color:#7A5200;border-bottom:1px solid #F0D68A;text-align:center;font-size:13px;font-weight:700;padding:8px 16px}
.caja{max-width:560px;margin:0 auto;padding:20px 16px 28px}
.centro{text-align:center;padding-top:48px}
h1{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:12px 0 8px}
.preg{font-size:20px;line-height:1.3;margin:14px 0 18px}
.sub{color:var(--gris);font-size:15px;line-height:1.5;margin:6px 0}
.meta{color:var(--gris);font-size:13px;margin:10px 0 0}
.logo{width:72px;height:72px;margin:0 auto;border-radius:20px;display:grid;place-items:center;font-size:40px;font-weight:800;color:#fff;background:var(--c)}
.portada{text-align:center}
.omi-portada{display:block;width:min(56vw,220px);height:auto;margin:8px auto 4px}
.aviso{background:#EEF4FB;border:1px solid #CFE0F3;color:#123A63;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45;margin:4px 0 18px}
.campo{display:block;margin:0 0 14px}
.campo span{display:block;font-size:13px;font-weight:700;color:var(--gris);margin:0 0 6px}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--tinta);background:var(--papel);border:1.5px solid var(--linea);border-radius:12px;padding:12px 14px;min-height:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px rgba(10,37,64,.08)}
textarea{min-height:150px;resize:vertical;line-height:1.45}
.cont{display:flex;justify-content:space-between;font-size:12px;color:var(--gris);margin:6px 2px 0}
.ayuda{font-size:13px;color:var(--gris);margin:10px 2px 0}
.err{color:var(--mal);font-size:14px;font-weight:600;margin:-6px 2px 12px}
.enc{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--gris);font-weight:700}
.enc progress{flex:1;height:6px;border:0;border-radius:6px;background:var(--linea);overflow:hidden;-webkit-appearance:none;appearance:none}
.enc progress::-webkit-progress-bar{background:var(--linea);border-radius:6px}
.enc progress::-webkit-progress-value{background:var(--c);border-radius:6px}
.enc progress::-moz-progress-bar{background:var(--c);border-radius:6px}
.escala{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.omi{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 10px;border:2px solid var(--linea);border-radius:14px;background:var(--papel);cursor:pointer;font:inherit;color:var(--tinta);min-height:48px;transition:transform .1s ease,border-color .1s ease}
.omi img{width:100%;max-width:64px;height:auto;aspect-ratio:1}
.omi .et{font-size:11px;line-height:1.2;text-align:center;color:var(--gris)}
.omi:active{transform:scale(.97)}
.omi.on{border-color:var(--c);background:#FFF7F6;box-shadow:0 0 0 3px rgba(180,19,24,.12)}
.omi.on .et{color:var(--tinta);font-weight:700}
.pata{display:flex;align-items:center;gap:10px;margin-top:24px}
.pata .sp{flex:1}
.portada .pata{justify-content:center}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;border:0;font:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--navy);cursor:pointer;text-decoration:none}
.b.quieto{background:transparent;color:var(--navy);border:1.5px solid var(--linea)}
.b:disabled{opacity:.55;cursor:default}
.b:focus-visible,.omi:focus-visible{outline:3px solid #F59B22;outline-offset:2px}
.portada .b{min-width:200px;background:var(--c)}
.palomita{width:72px;height:72px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:800;color:#fff;background:var(--bien)}
@media (min-width:600px){.caja{padding-top:36px}.omi .et{font-size:12px}h1{font-size:28px}}