/* ─────────────────────────────────────────────────────────────────────────────
   Encuesta de IA — El Espartano

   🎨 La estetica sale de la MARCA, no de las apps de planta. Verificado contra
   tienda.elespartano.com el 04/09: fondo BLANCO puro, texto NEGRO puro,
   "Plus Jakarta Sans" de cuerpo + "DM Sans" de titulos en peso LIVIANO (400),
   acento ocre #dc8f38 y mucho aire. Editorial, no industrial.
   No lleva el naranja de Cesped ni los neutros oliva de las apps de planta:
   esos son de otra familia.

   📐 Y se adapta de verdad: en la computadora NO es la columna del celular
   estirada. La pregunta y los botones quedan fijos a la izquierda y las
   opciones a la derecha, en dos columnas si son muchas, para que entre todo
   sin scrollear. El scroll, si hace falta, vive DENTRO de las opciones.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --papel:#ffffff;          /* fondo: blanco puro, como la tienda */
  --tinta:#000000;          /* texto: negro puro (21:1, el maximo posible) */
  --gris:#5c5c5c;           /* secundario, 7:1 sobre blanco */
  --gris-claro:#8a8a8a;     /* terciario, 3.5:1 — solo para lo prescindible */
  --linea:#e4e4e4;
  --linea-firme:#111111;
  --hueso:#f6f6f4;          /* segunda superficie */
  --ocre:#dc8f38;           /* el acento de la marca */
  --ocre-dato:#b5701f;      /* un paso mas oscuro: el que se usa en DATOS y texto.
                               El #dc8f38 da 2,55:1 y no llega al minimo de 3:1
                               para una marca de grafico (validado con dataviz). */
  --ocre-velo:#fdf5ec;
  --rojo:#b3261e;
  --rojo-velo:#fdeceb;

  --titulos:"DM Sans", system-ui, sans-serif;
  --cuerpo:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* ── Escala de letra ──────────────────────────────────────────────────────
     ISO 9241-303: altura_mm >= distancia_mm x 0,00582. Un celular en la mano a
     ~45 cm da 15 px; x1,3 por presbicia -> 20 px de PISO. Lo contesta gente que
     ve poco, asi que las opciones van a 20 y nada baja de 17.
     Los pesos son LIVIANOS como la marca: se compensa con negro puro sobre
     blanco puro, que es mas legible que una negrita gris. */
  --t-opcion:20px;
  --t-cuerpo:18px;
  --t-minimo:17px;
  --t-label:12px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--cuerpo); background:var(--papel); color:var(--tinta);
  font-size:var(--t-cuerpo); line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column;
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:18px; flex:none;
  padding:18px 28px; border-bottom:1px solid var(--linea); background:var(--papel);
}
/* 36 px de alto: en la tienda el logo del header mide 32 y ahi se lee. A 26 px
   quedaba chico y era lo primero que se notaba. */
.topbar img{height:44px; width:auto; flex:none; filter:brightness(0)}
.topbar .sub{
  font-family:var(--titulos); font-size:var(--t-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
  padding-left:18px; border-left:1px solid var(--linea);
}

/* ── Progreso ───────────────────────────────────────────────────────────── */
.progreso{flex:none; padding:14px 28px; border-bottom:1px solid var(--linea)}
.progreso-fila{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:18px}
.progreso-texto{
  font-family:var(--titulos); font-size:var(--t-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris); white-space:nowrap;
}
.progreso-barra{flex:1; height:3px; background:var(--linea); overflow:hidden}
.progreso-barra i{
  display:block; height:100%; width:100%; background:var(--tinta);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,1,.36,1);
}

/* ── Hoja ───────────────────────────────────────────────────────────────── */
main{flex:1; min-height:0; display:flex; padding:32px 28px 36px}
.hoja{width:100%; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; min-height:0}

/* ── Un paso ─────────────────────────────────────────────────────────────── */
.paso{display:grid; gap:26px; grid-template-areas:"titulo" "cuerpo" "acciones"; min-height:0}
.paso-titulo{grid-area:titulo}
.paso-cuerpo{grid-area:cuerpo; min-height:0}
.acciones{grid-area:acciones}

h1.pregunta{
  font-family:var(--titulos); font-size:clamp(28px, 3.4vw, 42px); font-weight:400;
  line-height:1.12; letter-spacing:-.02em; color:var(--tinta); text-wrap:balance;
}
p.ayuda{
  font-size:var(--t-minimo); color:var(--gris); margin-top:14px; max-width:52ch;
  text-wrap:pretty;
}

/* ── Opciones ──────────────────────────────────────────────────────────────
   "Lo tocable se ve tocable": borde firme y 62 px de alto. El radio nativo es
   un puntito de 16 px que ni se ve ni se acierta. La opcion ENTERA es el boton. */
.opciones{display:grid; gap:10px; align-content:start}
.opcion{
  display:flex; align-items:center; gap:16px; width:100%; min-height:62px;
  padding:14px 20px; text-align:left; cursor:pointer;
  background:var(--papel); border:1px solid var(--linea); border-radius:2px;
  font-family:var(--cuerpo); font-size:var(--t-opcion); font-weight:500; color:var(--tinta);
  transition:border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.opcion:hover{border-color:var(--linea-firme)}
.opcion:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}
.opcion .testigo{
  flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--gris-claro);
  background:var(--papel); display:grid; place-items:center; transition:all 160ms ease;
}
.opcion.multi .testigo{border-radius:2px}
.opcion.elegida{border-color:var(--tinta); background:var(--tinta); color:var(--papel)}
.opcion.elegida .testigo{border-color:var(--papel); background:var(--papel)}
.opcion.elegida .testigo::after{
  content:""; width:6px; height:11px; border:solid var(--tinta); border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* ── Texto libre ────────────────────────────────────────────────────────── */
.campo{
  width:100%; padding:16px 20px; min-height:62px;
  font-family:var(--cuerpo); font-size:var(--t-opcion); font-weight:500; color:var(--tinta);
  background:var(--papel); border:1px solid var(--linea); border-radius:2px;
}
textarea.campo{min-height:180px; font-weight:400; line-height:1.6; resize:vertical}
.campo::placeholder{color:var(--gris-claro); font-weight:400}
.campo:focus{outline:none; border-color:var(--tinta); box-shadow:inset 0 0 0 1px var(--tinta)}

/* ── Pantalla de arranque: nombre + sector juntos ───────────────────────────
   Son el "quien sos", no dos preguntas. El sector va en un desplegable porque
   acá se busca rapidez (lo contesta administración y supervisión, no una mano
   de planta sobre una tablet) y porque el selector nativo del celular abre a
   pantalla completa, que para ojos cansados es MEJOR que once botones. */
.dupla{display:grid; gap:22px; align-content:start}
.dupla-campo{display:flex; flex-direction:column; gap:9px}
.etq{
  font-family:var(--titulos); font-size:var(--t-label); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
}
/* El select nativo se cae de la escala: sin esto queda en 13 px al lado de
   campos de 20. Se le repone el tamaño y se le dibuja la flecha, porque al
   sacarle la apariencia nativa se la lleva puesta. */
select.campo{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:52px; line-height:1.3;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center;
}
select.campo:invalid, select.campo option[value=""]{color:var(--gris-claro)}
@media (min-width: 900px){
  .dupla{grid-template-columns:1fr 1fr; gap:26px 24px}
}

/* ── Acciones ───────────────────────────────────────────────────────────── */
.acciones{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.btn{
  font-family:var(--titulos); font-size:var(--t-opcion); font-weight:500; cursor:pointer;
  border-radius:2px; padding:16px 34px; min-height:62px; border:1px solid transparent;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-principal{background:var(--tinta); color:var(--papel); flex:1; min-width:180px}
.btn-principal:hover{background:var(--ocre-dato)}
.btn-atras{background:var(--papel); color:var(--tinta); border-color:var(--linea)}
.btn-atras:hover{border-color:var(--linea-firme)}
.btn:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}

.aviso-error{
  margin-top:16px; padding:14px 18px; border-radius:2px;
  background:var(--rojo-velo); border:1px solid #f0cdc9; color:var(--rojo);
  font-size:var(--t-minimo); font-weight:500;
}
.aviso-retomar{
  margin-bottom:20px; padding:14px 18px; border-radius:2px;
  background:var(--ocre-velo); border:1px solid #f2ddc2; color:var(--ocre-dato);
  font-size:var(--t-minimo); font-weight:500;
}

/* ── Cierre ─────────────────────────────────────────────────────────────── */
.centro{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; flex:1; gap:20px; max-width:620px}
.sello{width:56px; height:56px; border-radius:50%; background:var(--tinta); display:grid; place-items:center; flex:none}
.sello::after{content:""; width:14px; height:26px; border:solid var(--papel); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-3px)}

/* ── Resultados ─────────────────────────────────────────────────────────── */
.res-cab{margin-bottom:28px}
.hero{border-bottom:1px solid var(--linea); padding-bottom:24px; margin-bottom:32px; display:flex; align-items:baseline; gap:18px}
.hero .n{font-family:var(--titulos); font-size:clamp(52px,7vw,84px); font-weight:400; letter-spacing:-.03em; line-height:.9; color:var(--tinta)}
.hero .que{font-size:var(--t-cuerpo); color:var(--gris)}

/* ── El tablero en vivo ─────────────────────────────────────────────────────
   El rotulo es un BOTON: ademas de decir cuando se actualizo, tocandolo se
   actualiza al toque. Un tablero proyectado siempre tiene a alguien que quiere
   apurarlo, y un boton aparte al lado seria una perilla mas para explicar. */
.res-linea{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.res-linea p.ayuda{margin-top:0}
.vivo{
  flex:none; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:none; border:1px solid var(--linea); border-radius:2px; padding:8px 14px;
  font-family:var(--titulos); font-size:var(--t-label); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
  white-space:nowrap; transition:border-color 160ms ease, color 160ms ease;
}
.vivo:hover{border-color:var(--linea-firme); color:var(--tinta)}
.vivo:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}
.vivo .punto{
  width:9px; height:9px; border-radius:50%; background:var(--ocre-dato); flex:none;
  animation:latido 2.4s ease-in-out infinite;
}
.vivo.fallo{border-color:var(--rojo); color:var(--rojo)}
.vivo.fallo .punto{background:var(--rojo); animation:none}
@keyframes latido{0%,100%{opacity:1} 50%{opacity:.2}}

/* Avance sobre el padron: "37 de 90 · 41% ya contesto". Es lo que se mira todos
   los dias mientras la encuesta esta abierta. Solo aparece si hay padron. */
.hero-lado{flex:1; min-width:200px}
.hero-riel{height:8px; background:var(--hueso); margin-top:12px; max-width:420px}
.hero-riel i{display:block; height:100%; background:var(--ocre-dato)}

/* Dos columnas de graficos en pantalla ancha: si no, la pagina de resultados es
   una tira de 6 metros que obliga a scrollear para comparar dos numeros. */
.graficos{display:grid; gap:28px 40px}
.grafico{break-inside:avoid}
.grafico h2{font-family:var(--titulos); font-size:22px; font-weight:400; letter-spacing:-.01em; color:var(--tinta); line-height:1.25; text-wrap:balance}
.grafico .base{font-size:var(--t-label); letter-spacing:.10em; text-transform:uppercase; color:var(--gris-claro); margin-top:6px; font-weight:500}
.barras{margin-top:18px; display:flex; flex-direction:column; gap:14px}
.barra-fila{display:flex; flex-direction:column; gap:6px}
.barra-etq{font-size:var(--t-minimo); font-weight:500; color:var(--tinta)}
.barra-pista{display:flex; align-items:center; gap:14px}
.barra-riel{flex:1; height:22px; background:var(--hueso)}
/* Extremo del dato con 4 px de radio, anclado a la linea de base. */
.barra-riel i{display:block; height:100%; background:var(--ocre-dato); border-radius:0 4px 4px 0}
.barra-val{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--tinta); min-width:74px; text-align:right; font-feature-settings:"tnum"; white-space:nowrap}
/* Dos pasos del MISMO tono, no dos colores: el oscuro es lo que hay que enseñar.
   Al ser una escala de claridad se distingue con cualquier daltonismo y en papel. */
.apilada{flex:1; display:flex; height:22px; overflow:hidden; background:var(--hueso)}
.apilada i{display:block; height:100%}
.apilada .no{background:var(--ocre-dato)}
.apilada .si{background:#ddd8d2; border-left:2px solid var(--papel)}
.leyenda{display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:var(--t-label); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--gris)}
.leyenda span{display:flex; align-items:center; gap:8px}
.leyenda .pastilla{width:14px; height:14px; flex:none}
/* El mismo gris que dibuja la barra .apilada .si — si se cambia uno se cambia
   el otro, por eso van juntos y no sueltos en el HTML. */
.leyenda .pastilla-si{background:#ddd8d2}

/* Tablero sin una sola respuesta (el dia 1). */
.vacio{padding:8px 0 40px}
.vacio p{font-family:var(--titulos); font-size:24px; font-weight:400; color:var(--tinta)}
.vacio p.ayuda{font-family:var(--cuerpo); font-size:var(--t-minimo); color:var(--gris); margin-top:12px}

.abiertas{margin-top:16px; display:flex; flex-direction:column; gap:0}
.abiertas li{list-style:none; border-top:1px solid var(--linea); padding:14px 0; font-size:var(--t-minimo); color:var(--tinta); line-height:1.55}

.tabla-envoltorio{overflow-x:auto; margin-top:20px; border:1px solid var(--linea)}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--linea); white-space:nowrap}
th{background:var(--hueso); font-weight:700; position:sticky; top:0}

.cargando{padding:48px 0; color:var(--gris); font-size:var(--t-cuerpo)}
/* Aviso de arranque en frio de Apps Script (medido: 22 s la primera llamada).
   Aparece recien a los 5 segundos: si contesta rapido, nadie lo ve. */
.frio{
  display:block; margin-top:18px; max-width:46ch; font-size:var(--t-minimo);
  color:var(--tinta); background:var(--ocre-velo); border-left:3px solid var(--ocre-dato);
  padding:14px 18px; line-height:1.5;
}
.pie-link{margin-top:36px; padding-top:20px; border-top:1px solid var(--linea)}
.pie-link button{
  background:none; border:none; color:var(--gris); font-family:var(--cuerpo);
  font-size:var(--t-minimo); font-weight:500; cursor:pointer; text-decoration:underline;
  text-underline-offset:4px; padding:6px 0;
}
.pie-link button:hover{color:var(--tinta)}

[hidden]{display:none !important}

@keyframes entra{from{opacity:0} to{opacity:1}}
.anima{animation:entra 220ms ease both}
@media (prefers-reduced-motion: reduce){
  .anima{animation:none}
  .vivo .punto{animation:none}
  *{transition-duration:1ms !important}
}

/* ── Computadora ────────────────────────────────────────────────────────────
   🔴 Acá está el arreglo de fondo: NO es la columna del celular estirada.
   La pregunta y los botones quedan a la izquierda y las opciones a la derecha,
   asi la pregunta no se va de pantalla y entra todo sin scrollear. */
@media (min-width: 900px){
  main{padding:44px 28px 44px; overflow:hidden}
  .paso{
    grid-template-columns:minmax(300px, 400px) 1fr;
    grid-template-areas:"titulo cuerpo" "acciones cuerpo";
    grid-template-rows:auto 1fr;
    align-content:start; gap:36px 56px; flex:1; min-height:0;
  }
  .paso-titulo{align-self:start}
  .acciones{align-self:start}
  /* Si las opciones no entran, el scroll vive ACA adentro y la pregunta se
     queda quieta. Nunca se scrollea la pantalla entera. */
  .paso-cuerpo{overflow-y:auto; padding-right:4px}
  /* Muchas opciones cortas -> dos columnas: 11 sectores en una tira son 760 px
     de alto y no entran; en dos columnas son 6 filas y entran de sobra. */
  .opciones.muchas{grid-template-columns:1fr 1fr; gap:10px 12px}
  .graficos{grid-template-columns:1fr 1fr}
  .centro{justify-content:center}
}

@media (min-width: 1320px){
  .graficos{grid-template-columns:repeat(3, 1fr)}
}