/* Massiva · MIA — hoja de estilos del cliente de entrevista.
   Color por rol (contraste AA verificado en ambos temas):
     --marca   celeste  → Massiva, MIA, acción principal, barras de resultados, foco
     --verde   verde    → lo que dice o elige la persona, lo registrado, éxito
     --acento  amarillo → solo acentos: "tu respuesta" en las gráficas, corregida
     --alerta  naranja  → cuidado, terminar
     --error   coral    → falla
   Oscuro por defecto (la entrevista se hace con el celular en la mano); claro gris-azul frío, sin blancos puros. */
:root{
  color-scheme:dark;
  --fondo:#10131a; --fondo-2:#171b25; --fondo-3:#202533;
  --tinta:#e6e9f0; --tinta-2:#a0a8b8; --linea:#2a3040;
  --marca:#5cc8ff; --marca-tinta:#06202f; --marca-suave:rgba(92,200,255,.14);
  --verde:#4ee39a; --verde-suave:rgba(78,227,154,.14);
  --acento:#f5c451; --alerta:#f0a35e; --error:#ef8a7a;
  --voz:var(--verde); --exito:var(--verde); --barras:var(--marca);
  --radio:14px; --fuente:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sombra:0 12px 28px -14px rgba(0,0,0,.65);
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --fondo:#e8edf3; --fondo-2:#f0f3f7; --fondo-3:#dce3ec;
    --tinta:#1a2030; --tinta-2:#566073; --linea:#cad2de;
    --marca:#0a64a0; --marca-tinta:#f2f7fb; --marca-suave:rgba(10,100,160,.10);
    --verde:#0f7a47; --verde-suave:rgba(15,122,71,.10);
    --acento:#875600; --alerta:#9e4708; --error:#b23b2e;
    --sombra:0 12px 24px -16px rgba(26,32,48,.35);
  }
}

*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--tinta);font-family:var(--fuente);-webkit-font-smoothing:antialiased;
     padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);caret-color:var(--marca)}
::selection{background:var(--marca);color:var(--marca-tinta)}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:6px}
#app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

.pantalla{display:none;flex:1;flex-direction:column;gap:14px;padding:18px 0 24px}
.pantalla.activa{display:flex;animation:aparecer .42s cubic-bezier(.16,1,.3,1) both}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.pantalla.activa{animation:none}.relleno{transition:none!important}}

/* cabecera */
.cabecera{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--tinta-2)}
.marca{color:var(--marca);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.progreso{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--tinta-2);transition:color .3s}
.progreso.completo{color:var(--verde)}

h1{font-size:30px;line-height:1.12;margin:10px 0 0;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:24px;line-height:1.18;margin:10px 0 0;font-weight:680;letter-spacing:-.015em;text-wrap:balance}
h3{font-size:19px;line-height:1.25;margin:0;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.meta{color:var(--tinta-2);margin:0;font-size:15px;line-height:1.45}
.meta.exito-texto{color:var(--verde)}
.briefing{font-size:17px;line-height:1.5;background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;margin:4px 0}
.consentimiento{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--tinta-2)}
.consentimiento input{width:22px;height:22px;margin-top:1px;accent-color:var(--marca);flex:none}

/* botones */
button{font:inherit;border:0;border-radius:var(--radio);padding:16px 18px;font-size:17px;font-weight:600;cursor:pointer;width:100%;
       transition:transform .12s ease,filter .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease}
button:disabled{opacity:.4;cursor:default}
button:not(:disabled):active{transform:translateY(1px) scale(.99)}
.primario{background:var(--marca);color:var(--marca-tinta);box-shadow:var(--sombra)}
.primario:not(:disabled):hover{filter:brightness(1.07)}
.secundario{background:var(--fondo-2);color:var(--tinta);border:1px solid var(--linea)}
.secundario:not(:disabled):hover{background:var(--fondo-3)}
.terciario{background:none;color:var(--tinta-2);padding:12px;font-size:15px;font-weight:500}
.terciario:hover{color:var(--tinta)}
.enlace{width:auto;background:none;padding:6px 0;font-size:14px;font-weight:600;color:var(--marca);text-decoration:underline;text-underline-offset:3px}
#btn-terminar{color:var(--alerta);border-color:color-mix(in srgb,var(--alerta) 35%,var(--linea))}
.pie{color:var(--tinta-2);font-size:13px;text-align:center;margin:0}

/* chequeo de dispositivo */
.chequeos{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:10px}
.chequeos li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:12px;
             background:var(--fondo-2);border:1px solid var(--linea);color:var(--tinta-2);transition:color .3s,border-color .3s}
.chequeos li::after{content:"";width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--linea);transition:border-color .3s}
.chequeos li.ok::after,.chequeos li.mal::after{border:0;border-radius:0;-webkit-mask:var(--icono) center/contain no-repeat;mask:var(--icono) center/contain no-repeat}
.chequeos li.ok{color:var(--tinta);border-color:color-mix(in srgb,var(--verde) 40%,var(--linea))}
.chequeos li.ok::after{background:var(--verde);
  --icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E")}
.chequeos li.mal{color:var(--tinta);border-color:color-mix(in srgb,var(--error) 45%,var(--linea))}
.chequeos li.mal::after{background:var(--error);
  --icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.aviso{color:var(--alerta);font-size:15px;line-height:1.4;margin:0}
.oculto{display:none!important}

/* entrevista */
.titulo-corto{font-size:16px;color:var(--tinta-2);font-weight:500;margin:0;text-align:center}
.visual{display:flex;justify-content:center;align-items:center;margin:18px 0 0}
canvas{width:min(320px,100%);height:120px}
.estado-voz{text-align:center;color:var(--tinta-2);font-size:14px;letter-spacing:.04em;margin:0;min-height:1.2em;transition:color .25s}
body.escuchando{--barras:var(--verde)}
body.escuchando .estado-voz{color:var(--verde)}
.subtitulos{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:8px 2px}
.sub-mia{font-size:22px;line-height:1.35;margin:0;color:var(--tinta);min-height:1.4em;text-wrap:pretty}
.sub-yo{font-size:17px;line-height:1.35;margin:0;color:var(--verde);font-weight:500}
.sub-yo:empty{display:none}
.sub-yo::before{content:"Tú · ";color:var(--tinta-2);font-weight:400;letter-spacing:.04em}
.pie-entrevista{display:flex;align-items:center;gap:12px}
.pie-entrevista button{width:auto;padding:12px 18px;font-size:15px}
.costo{flex:1;color:var(--tinta-2);font-size:13px;font-variant-numeric:tabular-nums}

/* revisión de respuestas */
.revision{list-style:none;margin:4px 0 0;padding:0}
.revision li{padding:14px 0;border-bottom:1px solid var(--linea)}
.revision li:first-child{border-top:1px solid var(--linea)}
.revision .q{font-size:13px;line-height:1.35;color:var(--tinta-2);margin:0 0 6px}
.revision .fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.revision .v{font-size:17px;line-height:1.35;margin:0;color:var(--verde);font-weight:550;text-wrap:pretty}
.revision .etiqueta-corr{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acento);vertical-align:2px}
.editor{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{width:auto;padding:10px 14px;font-size:15px;font-weight:500;border-radius:999px;background:var(--fondo-2);color:var(--tinta);border:1px solid var(--linea)}
.chip[aria-pressed="true"]{background:var(--verde-suave);border-color:var(--verde);color:var(--verde);font-weight:600}
textarea,input[type=email],input[type=tel],input[type=text]{width:100%;font:inherit;font-size:17px;color:var(--tinta);background:var(--fondo-2);
  border:1px solid var(--linea);border-radius:12px;padding:13px 14px;transition:border-color .2s}
textarea{min-height:88px;resize:vertical;line-height:1.4}
textarea:focus,input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave)}
::placeholder{color:var(--tinta-2);opacity:.8}
.editor .botones{display:flex;gap:10px}
.editor .botones button{padding:12px 16px;font-size:15px}
.acciones{position:sticky;bottom:0;display:flex;flex-direction:column;gap:4px;margin-top:auto;
          padding:16px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--fondo) 28%)}

/* resultados: láminas deslizables */
.carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px -16px 0;padding:4px 16px 8px;
          scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.carrusel::-webkit-scrollbar{display:none}
.lamina{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;gap:14px;background:var(--fondo-2);
        border:1px solid var(--linea);border-radius:18px;padding:20px 18px}
.lamina .pregunta{font-size:14px;line-height:1.4;color:var(--tinta-2);margin:-6px 0 0}
.lamina .total{font-size:13px;color:var(--tinta-2);margin:auto 0 0;font-variant-numeric:tabular-nums}
.promedio{display:flex;align-items:baseline;gap:8px;margin:0}
.promedio strong{font-size:34px;line-height:1;font-weight:700;color:var(--marca);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.promedio span{font-size:14px;color:var(--tinta-2)}
.barras-h{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.barra{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.barra .etq{font-size:15px;line-height:1.3;color:var(--tinta)}
.barra .pct{font-size:15px;font-weight:650;color:var(--tinta);font-variant-numeric:tabular-nums}
.barra .pista{grid-column:1/-1;height:10px;background:var(--fondo-3);border-radius:999px;overflow:hidden}
.barra .relleno{display:block;height:100%;width:100%;background:var(--marca);border-radius:inherit;transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.barra.tuya .relleno{background:var(--verde)}
.barra.tuya .etq{font-weight:600}
.barra .tu{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.barra.cero .etq,.barra.cero .pct{color:var(--tinta-2)}
.puntos{display:flex;justify-content:center;gap:6px;margin:2px 0 0}
.puntos span{width:7px;height:7px;border-radius:999px;background:var(--linea);transition:transform .3s,background-color .3s}
.puntos span.activo{background:var(--marca);transform:scale(1.45)}
.desliza{font-size:13px;color:var(--tinta-2);text-align:center;margin:0}

/* registro al panel */
.formulario{display:flex;flex-direction:column;gap:12px}
.formulario label.campo{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tinta-2)}
.formulario .error{color:var(--error);font-size:14px;margin:0;min-height:1.2em}

/* cierre */
.detalle{color:var(--tinta-2);font-size:13px}
.detalle summary{cursor:pointer;padding:6px 0}
pre{white-space:pre-wrap;font-size:12px;background:var(--fondo-2);border-radius:10px;padding:10px;border:1px solid var(--linea);font-variant-numeric:tabular-nums}

/* panel privado de avance */
body.es-panel #app{max-width:760px}
.avance{display:flex;flex-direction:column;gap:10px;padding:4px 0 6px}
.avance-frase{margin:0;font-size:20px;line-height:1.3;color:var(--tinta)}
.avance-frase strong{font-size:40px;line-height:1;font-weight:750;color:var(--verde);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-right:4px}
.pista-grande{display:block;height:14px;background:var(--fondo-3);border-radius:999px;overflow:hidden}
.pista-grande .relleno{display:block;height:100%;width:100%;background:var(--verde);border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.datos{margin:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--linea)}
.datos div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--linea)}
.datos dt{color:var(--tinta-2);font-size:15px}
.datos dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.compartir{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.compartir .q{font-size:13px;color:var(--tinta-2);margin:0}
.liga{margin:0;font-size:17px;color:var(--marca);font-weight:600;word-break:break-all}
.botones-fila{display:flex;gap:10px}
.botones-fila>*{flex:1}
.boton-wa{display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:var(--radio);padding:16px 18px;font-size:17px;font-weight:600;
          background:var(--verde);color:var(--marca-tinta)}
.graficas{display:grid;grid-template-columns:1fr;gap:12px}
.grafica{display:flex;flex-direction:column;gap:12px;background:var(--fondo-2);border:1px solid var(--linea);border-radius:18px;padding:18px}
.grafica .pregunta{font-size:14px;line-height:1.4;color:var(--tinta-2);margin:-6px 0 0}
.grafica .total{font-size:13px;color:var(--tinta-2);margin:0}
.barra .pct small{font-weight:400;color:var(--tinta-2)}
.ultimas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.ultimas li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--linea);font-size:14px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.ultimas .u-hora{color:var(--tinta);min-width:120px}
.ultimas .u-estado{color:var(--alerta)}
.ultimas .u-estado.ok{color:var(--verde)}
@media (min-width:720px){ .graficas{grid-template-columns:1fr 1fr} .datos{grid-template-columns:1fr 1fr;column-gap:28px} }