/* meEdificio · Herramientas · Encuestas.
   Capa sobre /meedificio.css, que es donde viven los tokens. Acá solo va lo
   propio de estas tres páginas —crear, votar, resultado—; si algo de aquí le
   sirviera a otra página del sitio, sube al sistema, no se copia.

   Los nombres de clase son los que ya usan el JS y ci/encuestas_humo.js: se
   conservan tal cual aunque el aspecto cambie entero. */

/* ── pasos ──
   El número va en un círculo de filete, no de relleno: Forest Ink es tinta, no
   fondo, y el sistema lo prohíbe expresamente como superficie. */
.paso{padding-top:var(--s42);margin-top:var(--s42);border-top:1px solid var(--border-mist)}
.paso:first-of-type{border-top:0;margin-top:var(--s28);padding-top:0}
.paso-cab{display:flex;align-items:center;gap:var(--s14);flex-wrap:wrap}
.paso-n{font-family:var(--sans);font-size:12px;color:var(--forest-ink);
  border:1px solid var(--forest-ink);border-radius:var(--radio-pill);
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.paso-cab h2{font-size:var(--text-heading-sm);letter-spacing:0;line-height:1.2}
.paso-cab .chip{margin-left:auto}
.paso-pista{color:var(--texto-suave);font-size:13px;margin:var(--s11) 0 0;max-width:68ch}
.paso > label:first-of-type{margin-top:var(--s21)}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* El estado de cada paso. Los nombres c-ok/c-at/c-cr vienen del JS. */
.chip{font-family:var(--sans);font-size:11px;letter-spacing:.04em;padding:var(--s7) var(--s14)}
.c-ok{background:var(--keylime-wash);color:var(--forest-ink)}
.c-at{background:var(--sage-mist);color:var(--forest-ink)}
.c-cr{background:var(--slate-hush);color:var(--forest-ink)}
.c-neutro{background:var(--border-mist);color:var(--texto-suave)}

/* ── cajas ── */
.caja{background:var(--keylime-wash);border-radius:var(--radio);
  padding:var(--s28);margin-top:var(--s28)}
.caja h2{margin:0 0 var(--s11);font-size:var(--text-heading-sm);letter-spacing:0}
/* La guía va sobre menta: un escalón por debajo del keylime de los pasos, para
   que se lea como preámbulo y no como un paso más. */
.guia{background:var(--mint-veil);margin-bottom:var(--s14)}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s28);margin-top:var(--s9)}
@media (max-width:640px){.dos-col{grid-template-columns:1fr}}
.dos-col p{margin:var(--s9) 0 0;font-size:var(--text-body);color:var(--charcoal)}
.mini-rot{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest-ink)}
.no-sirve{margin:var(--s9) 0 0;padding:0;list-style:none}
.no-sirve li{position:relative;padding:var(--s7) 0 var(--s7) var(--s28);
  font-size:var(--text-body);color:var(--charcoal)}
.no-sirve li::before,.no-sirve li::after{content:"";position:absolute;left:2px;top:15px;
  width:12px;height:1.5px;background:var(--forest-ink);border-radius:2px}
.no-sirve li::before{transform:rotate(45deg)}
.no-sirve li::after{transform:rotate(-45deg)}

/* ── el ayudante: opcional, y se ve que lo es ── */
.ayudante{background:var(--cream-paper);border:1px dashed var(--sage-mist)}
.ayudante h2{display:flex;align-items:center;gap:var(--s11)}
.ayudante h2 .dot{width:7px;height:7px;border-radius:var(--radio-pill);
  background:var(--forest-ink);flex:0 0 auto}

/* ── donde se escribe ──
   En el sistema oscuro anterior esto era una hoja blanca sobre azul. Acá el
   canvas YA es papel, así que la señal de «aquí se redacta» pasa a ser la
   serif: lo que uno escribe se ve compuesto, no capturado. */
textarea.papel{background:var(--cream-paper);color:var(--charcoal);
  font-family:var(--serif);font-size:19px;line-height:1.55;padding:var(--s21);min-height:150px}
textarea.papel::placeholder{color:var(--texto-suave);font-family:var(--serif)}
/* Y lo que se PEGA es una tabla: monoespaciada sobre menta, para que se
   distinga de un sitio donde se redacta sin leer una sola etiqueta. */
textarea#padron{font-family:var(--mono);font-size:13px;line-height:1.55;
  background:var(--mint-veil);border-color:transparent}

/* ── preguntas ── */
/* La tarjeta va tintada y los campos de papel. Antes era crema sobre crema:
   no se veía dónde terminaba una pregunta ni dónde se escribía. */
.pregunta{background:var(--keylime-wash);border:0;
  border-radius:var(--radio);padding:var(--s28);margin-top:var(--s18);
  transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
.pregunta .cabeza{display:flex;align-items:center;gap:var(--s11);flex-wrap:wrap}
.pregunta .num{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest-ink)}
.pregunta .quitar{margin-left:auto;background:var(--cream-paper);border:1px solid transparent;
  color:var(--texto-suave);border-radius:var(--radio-pill);padding:var(--s4) var(--s14);
  font-size:13px;font-family:var(--sans);cursor:pointer}
.pregunta .quitar:hover{border-color:var(--forest-ink);color:var(--forest-ink)}
.pregunta label{margin-top:var(--s18)}
.pregunta .txt,.pregunta .op{background:var(--cream-paper);border-color:transparent}
/* La pregunta es multilínea: una de copropiedad no cabe en un renglón. */
.pregunta textarea.txt{min-height:0;font-size:16px;line-height:1.45;
  padding:var(--s14);resize:vertical}
.pregunta .interruptor{display:inline-flex;align-items:center;gap:var(--s9);
  background:var(--cream-paper);border:1px solid transparent;
  border-radius:var(--radio-pill);padding:var(--s7) var(--s14);cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--texto-suave);margin:0;min-height:36px}
.pregunta .interruptor input{width:17px;height:17px;accent-color:var(--forest-ink);cursor:pointer}
.pregunta .interruptor:has(input:checked){border-color:var(--forest-ink);color:var(--forest-ink)}
.pregunta .marca{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream-paper);background:var(--forest-ink);
  border-radius:var(--radio-pill);padding:var(--s4) var(--s11)}
.pregunta.apagada{opacity:.45}
.pregunta.apagada .marca{background:var(--texto-suave)}
.pregunta.entra{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){
  .pregunta{transition:none} .pregunta.entra{opacity:1;transform:none}
}
.opciones{display:flex;gap:var(--s9);flex-wrap:wrap;margin-top:var(--s9)}
.opciones input{flex:1 1 120px;min-width:100px;width:auto}
.resumen-preg{font-family:var(--sans);font-size:12px;letter-spacing:.04em;
  color:var(--forest-ink);margin:var(--s18) 0 0}
.resumen-preg.vacio{color:var(--charcoal)}
.umbrales{display:grid;grid-template-columns:1fr 1fr;gap:var(--s18)}
@media (max-width:560px){.umbrales{grid-template-columns:1fr}}
.umbrales label{margin-top:0}

/* ── la papeleta: objetivo táctil grande, para un sótano mal iluminado ── */
.papeleta{margin-top:var(--s11);display:grid;gap:var(--s9)}
.papeleta .opcion{display:flex;align-items:center;gap:var(--s14);
  background:var(--cream-paper);border:1px solid var(--border-mist);
  border-radius:var(--radio);padding:var(--s14) var(--s18);cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--charcoal);margin:0;min-height:56px}
.papeleta .opcion:hover{border-color:var(--sage-mist)}
.papeleta .opcion input{width:22px;height:22px;accent-color:var(--forest-ink);flex:0 0 auto}
.papeleta .opcion.marcada{border-color:var(--forest-ink);background:var(--keylime-wash)}

/* ── apartamentos ── */
.buscador{margin-top:var(--s11)}
.unidades{display:flex;flex-wrap:wrap;gap:var(--s9);margin-top:var(--s14);
  max-height:320px;overflow:auto;padding:2px;
  scrollbar-width:thin;scrollbar-color:var(--sage-mist) transparent}
.unidades::-webkit-scrollbar{width:10px}
.unidades::-webkit-scrollbar-thumb{background:var(--sage-mist);border-radius:var(--radio-pill);
  border:3px solid var(--cream-paper)}
.uni{display:inline-flex;align-items:center;gap:var(--s9);background:var(--cream-paper);
  border:1px solid var(--border-mist);border-radius:var(--radio-pill);
  padding:var(--s9) var(--s18);font-family:var(--sans);font-size:15px;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--charcoal);margin:0;
  cursor:pointer;min-height:44px}
.uni input{width:18px;height:18px;accent-color:var(--forest-ink)}
.uni .coef{font-family:var(--mono);font-size:11px;color:var(--texto-suave);
  font-variant-numeric:lining-nums tabular-nums}
.uni.marcada{border-color:var(--forest-ink);background:var(--keylime-wash)}
.uni.tomada{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.resumen-sel{margin-top:var(--s18);font-size:var(--text-body);color:var(--charcoal)}
.resumen-sel b{color:var(--forest-ink);font-variant-numeric:lining-nums tabular-nums}

/* ── lo que falta y lo que se sugiere ──
   Sin pestaña de color al costado: el sistema construye jerarquía con relleno. */
.faltan{background:var(--keylime-wash);border-radius:var(--radio);
  padding:var(--s18);margin-top:var(--s18);font-size:var(--text-body);color:var(--charcoal)}
.faltan b{color:var(--forest-ink)}
.faltan ul{margin:var(--s9) 0 0;padding-left:var(--s21)}
.faltan li{margin-bottom:var(--s4)}
.faltan span{display:block;margin-top:var(--s11);color:var(--texto-suave);font-size:13px}
.sugerencia{background:var(--sage-mist);border-radius:var(--radio);
  padding:var(--s18);margin-top:var(--s18);font-size:var(--text-body);color:var(--forest-ink)}
.sugerencia b{display:block;margin-bottom:var(--s7)}
.sugerencia .motivo{display:block;margin:0 0 var(--s14)}
/* En bloque y con aire: pegado al final del párrafo parecía parte de la frase. */
.sugerencia .btn{display:inline-flex;margin-top:0}
.sugerencia span{display:block;margin-top:var(--s11);color:var(--forest-shadow);font-size:13px}
.antes-despues{display:grid;gap:var(--s14);margin-top:var(--s14)}
.antes-despues > div{background:var(--cream-paper);border-radius:var(--radio);padding:var(--s18)}
.antes-despues p{margin:var(--s7) 0 0;font-family:var(--serif);font-size:18px;
  line-height:1.5;color:var(--charcoal)}

/* ── el QR, el enlace y la clave ── */

/* ── resultados ── */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s14);margin-top:var(--s21)}
.cifra{background:var(--keylime-wash);border-radius:var(--radio);padding:var(--s21)}
.cifra.umbral{background:var(--sage-mist)}
.cifra .rotulo{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest-ink)}
.cifra .valor{font-family:var(--serif);font-size:38px;font-weight:300;line-height:1.1;
  color:var(--forest-ink);margin-top:var(--s7);font-variant-numeric:lining-nums tabular-nums}
.cifra .valor.ojo{color:var(--forest-shadow)}
.cifra .pie{font-size:12px;color:var(--texto-suave);margin-top:var(--s4)}
.barra{background:var(--cream-paper);border-radius:var(--radio-pill);height:10px;
  overflow:hidden;margin-top:var(--s7)}
.barra i{display:block;height:100%;background:var(--forest-ink);border-radius:var(--radio-pill)}
/* La barra fuerte es la de la moneda que DECIDE esta consulta, no la del
   coeficiente por costumbre: si en una consulta por unidad el coeficiente se
   dibuja más oscuro, el ojo lee lo contrario de lo que manda. */
.barra.secundaria i{background:var(--slate-hush)}
.res-opcion{margin-top:var(--s21)}
.res-opcion .fila{display:flex;align-items:baseline;gap:var(--s11);font-size:16px}
.res-opcion .fila b{margin-left:auto;font-variant-numeric:lining-nums tabular-nums;color:var(--forest-ink);
  font-size:21px;font-weight:400;display:flex;align-items:baseline;gap:var(--s7)}
/* «de lo votado» se dice una vez, pegado al número al que califica. Antes se
   repetía tres veces por opción y era lo que hacía leer un 100 % de siete
   unidades como si fuera el edificio entero. */
.res-opcion .fila b small{font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-suave)}
/* Una opción sin votos se dice en un renglón: seis renglones de ceros tapan lo
   que sí pasó. */
.res-opcion.vacia .fila{color:var(--texto-suave)}
.res-opcion.vacia .fila b{font-size:13px;color:var(--texto-suave)}
.monedas{display:flex;flex-direction:column;gap:var(--s9);margin-top:var(--s9)}
.moneda .mini{display:flex;align-items:center;gap:var(--s7);flex-wrap:wrap;
  text-transform:none;letter-spacing:0;font-weight:400;margin-top:var(--s4)}
.moneda .mini b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.decide{background:var(--keylime-wash);color:var(--forest-ink);border-radius:var(--radio-pill);
  padding:1px var(--s7);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.res-opcion .mini{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-suave)}
.vs-umbral{display:block;font-family:var(--sans);font-size:12px;font-weight:400;margin-top:var(--s4)}
.vs-umbral.supera{color:var(--forest-ink)} .vs-umbral.no-supera{color:var(--texto-suave)}
table.votos{margin-top:var(--s14)}
table.votos td.coef{font-family:var(--mono);font-size:12px;color:var(--texto-suave);
  white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
/* Un voto anulado sigue en la tabla, tachado: se tiene que poder leer qué
   decía y por qué se anuló. Se apaga, no se esconde. */
table.votos tr.anulado td{color:var(--texto-suave);text-decoration:line-through;
  text-decoration-thickness:1px}
table.votos tr.anulado td.motivo{text-decoration:none;font-size:12px;
  color:var(--forest-ink);background:var(--mint-veil);white-space:normal;min-width:180px}
table.votos td .anular{padding:var(--s4) var(--s9);font-size:11px}
table.votos td.desde{white-space:nowrap}
table.votos .bandera{width:18px;height:13.5px;vertical-align:-1px;margin-right:var(--s7);
  border:1px solid var(--border-mist);border-radius:2px}
table.votos .ip{font-family:var(--mono);font-size:11px;color:var(--texto-suave)}
.tabla-scroll{overflow-x:auto}
.integra{display:inline-flex;align-items:center;gap:var(--s9);font-size:var(--text-body);
  border-radius:var(--radio-pill);padding:var(--s9) var(--s18);margin-top:var(--s14);
  color:var(--forest-ink)}
.integra.si{background:var(--keylime-wash)}
.integra.no{background:var(--slate-hush)}

/* ── la hoja que se imprime ──
   Queda solo lo que hay que guardar. La clave está hasheada y no se puede
   reenviar: el papel es la copia de seguridad. */
@media print{
  .topbar,footer,#f,.no-imprimir,.guia{display:none !important}
  body{background:#fff}
  .exito{background:#fff;padding:0}
  .qr{border:1px solid var(--border-mist);width:min(260px,60%)}
  .clavecaja{border:2px dashed var(--forest-ink);background:#fff;page-break-inside:avoid}
  .enlace,.clave{background:var(--border-mist)}
  .fila-btn{display:none !important}
  .huella{font-size:9px}
}

/* ── registro de propietarios (inscribirse.html · avance.html) ──
   Reusa la ficha de unidad de votar: el mismo objeto, otro estado. */
.uni.inscrita{border-color:var(--forest-ink);background:var(--keylime-wash);cursor:default}
.uni.inscrita .marca-si{margin-right:-2px}
.cifra .valor small{font-family:var(--sans);font-size:14px;color:var(--texto-suave);font-weight:400}
.filtros{display:flex;gap:var(--s9);flex-wrap:wrap;align-items:center;margin-top:var(--s14)}
.filtro{background:var(--cream-paper);border:1px solid var(--border-mist);color:var(--charcoal);
  border-radius:var(--radio-pill);padding:var(--s9) var(--s18);font-family:var(--sans);
  font-size:13px;cursor:pointer;min-height:40px}
.filtro:hover{border-color:var(--sage-mist)}
.filtro.activo{border-color:var(--forest-ink);background:var(--keylime-wash);color:var(--forest-ink)}
.grupo-rot{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest-ink);margin:var(--s21) 0 0}
#tablaTipos td.coef{font-family:var(--mono);font-size:12px;color:var(--texto-suave);
  white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.anular-fila{display:grid;grid-template-columns:1fr 2fr;gap:var(--s18)}
@media (max-width:560px){.anular-fila{grid-template-columns:1fr}}
.caja.enlaces{background:var(--mint-veil)}
.caja.enlaces ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s7)}
.caja.enlaces li a{display:block;background:var(--cream-paper);border-radius:var(--radio);
  padding:var(--s14) var(--s18);text-decoration:none;color:var(--forest-ink);font-size:16px}
.caja.enlaces li a:hover{background:var(--keylime-wash)}
.caja.aviso-datos{margin-top:var(--s35)}
.caja.aviso-datos p{font-size:var(--text-body)}
.consentimiento{display:flex;align-items:flex-start;gap:var(--s14);
  background:var(--cream-paper);border:1px solid var(--border-mist);border-radius:var(--radio);
  padding:var(--s14) var(--s18);margin:var(--s14) 0 0;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--charcoal);line-height:1.45}
.consentimiento input{width:22px;height:22px;accent-color:var(--forest-ink);flex:0 0 auto;margin-top:1px}
.consentimiento:has(input:checked){border-color:var(--forest-ink);background:var(--keylime-wash)}
/* Dentro de una caja keylime, el «guardado» va sobre papel para que se vea. */
.caja .nota-ok{background:var(--cream-paper)}
/* La unidad que inscribió un apoderado: misma ficha, con su rótulo. */
.uni .poder{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream-paper);background:var(--forest-ink);
  border-radius:var(--radio-pill);padding:2px var(--s7)}