/* Visualizaciones de resultados — compartidas por facilitador, proyección y participante.
   Usa las variables --q-* de dilogo.css. --u escala todo el tamaño:
   consola y participante = 1, proyección para Zoom = 1.6. */

.res{--u:1; width:100%;}
.res--proy{--u:1.6;}

@keyframes res-entra{from{opacity:0; transform:translateY(6px);} to{opacity:1;}}
.res .entra{animation:res-entra .35s ease;}
@media (prefers-reduced-motion: reduce){ .res .entra{animation:none;} .res *{transition:none !important;} }

.res-vacio{margin:0; padding:calc(var(--u)*18px) 0; font-size:calc(var(--u)*14px); color:var(--q-texto-tenue); font-style:italic;}
.chip-mia{display:inline-flex; align-items:center; gap:3px; font-family:var(--q-fuente); font-size:10.5px; font-weight:600; color:var(--q-acento); background:var(--q-acento-suave); padding:2px 8px; border-radius:999px; margin-left:6px; white-space:nowrap;}

/* ---- Opción múltiple: barras ---- */
.res-fila{margin-bottom:calc(var(--u)*16px);}
.res-etq{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:calc(var(--u)*14px); font-weight:600; margin-bottom:calc(var(--u)*6px); color:var(--q-texto);}
.res-num{font-weight:400; color:var(--q-texto-tenue); font-family:var(--q-fuente-mono, var(--q-fuente)); font-size:calc(var(--u)*12.5px); white-space:nowrap;}
.res-pista{background:var(--q-superficie-2); border-radius:999px; height:calc(var(--u)*14px); overflow:hidden;}
.res-relleno{background:var(--q-acento); height:100%; width:0; border-radius:999px; transition:width .5s ease;}

/* ---- Mural de frases ---- */
.res-mural{display:flex; flex-wrap:wrap; gap:calc(var(--u)*14px); padding:calc(var(--u)*6px) 0;}
.res-tarjeta{
  position:relative; max-width:calc(var(--u)*240px); color:var(--q-texto);
  background:var(--q-lienzo); border:1px solid var(--q-borde); border-radius:calc(var(--u)*10px);
  padding:calc(var(--u)*12px) calc(var(--u)*16px);
  font-family:var(--q-fuente-titulo); font-size:calc(var(--u)*14.5px); font-weight:500; line-height:1.45;
  box-shadow:var(--q-sombra); overflow-wrap:anywhere;
}
.res-tarjeta .res-texto::before,.res-tarjeta .res-texto::after{font-family:Georgia, serif; font-size:1.35em; line-height:0; color:var(--q-acento); opacity:.55;}
.res-tarjeta .res-texto::before{content:"\201C"; margin-right:.04em; vertical-align:-.2em;}
.res-tarjeta .res-texto::after{content:"\201D"; margin-left:-.02em; vertical-align:-.3em;}
.res-tarjeta.tono-0{background:var(--q-acento-velo); border-color:var(--q-acento-borde);}
.res-tarjeta.tono-1{}
.res-tarjeta.tono-2{background:var(--q-t2-suave); border-color:#C4E8E4;}
.res-tarjeta.mia{border:2px solid var(--q-acento);}
.res-etiqueta-mia{display:block; font-family:var(--q-fuente); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--q-acento); margin-bottom:4px;}
.res-prof{
  display:block; margin-top:8px; font-family:var(--q-fuente); font-size:12px; font-weight:600; cursor:pointer; min-height:28px;
  color:var(--q-acento); background:var(--q-acento-suave); border:1px solid var(--q-acento-borde);
  border-radius:999px; padding:4px 11px;
}
.res-prof:hover{background:var(--q-acento-sel);}

/* ---- Confesión anónima: notas sin nombre ---- */
.res-corcho{background:var(--q-acento-velo); border:1px solid var(--q-acento-borde); border-radius:var(--radius-md, 14px); padding:calc(var(--u)*18px); display:flex; flex-wrap:wrap; gap:calc(var(--u)*14px);}
.res-nota{
  width:calc(var(--u)*176px); min-height:calc(var(--u)*92px); box-sizing:border-box;
  background:var(--q-lienzo); border:1px solid var(--q-acento-borde); border-top:3px solid var(--dilogo-lavender, #B7A7F6); border-radius:calc(var(--u)*8px);
  box-shadow:var(--q-sombra);
  padding:calc(var(--u)*12px) calc(var(--u)*14px); font-family:var(--q-fuente-titulo); font-size:calc(var(--u)*14px); font-weight:500; line-height:1.45; color:var(--q-texto);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left; gap:8px; overflow-wrap:anywhere;
}
.res-corcho .res-vacio{color:var(--q-texto-tenue);}

/* ---- Termómetro ---- */
.res-term{display:flex; gap:calc(var(--u)*22px); align-items:flex-end; padding:calc(var(--u)*6px) 0 calc(var(--u)*18px);}
.res-term-tubo{position:relative; width:calc(var(--u)*54px); height:calc(var(--u)*200px); flex-shrink:0;}
.res-term-vidrio{position:absolute; top:0; bottom:0; left:calc(var(--u)*9px); width:calc(var(--u)*36px); box-sizing:border-box; border-radius:calc(var(--u)*18px) calc(var(--u)*18px) 0 0; background:var(--q-superficie-2); border:2px solid var(--q-borde-fuerte); overflow:hidden;}
.res-term-relleno{position:absolute; bottom:0; left:0; right:0; height:0; background:var(--q-acento); transition:height .5s ease;}
.res-term-bulbo{position:absolute; bottom:calc(var(--u)*-16px); left:0; width:calc(var(--u)*54px); height:calc(var(--u)*54px); border-radius:50%; background:var(--q-acento);}
.res-term-marca{position:absolute; left:calc(var(--u)*62px); font-size:calc(var(--u)*13px); font-weight:700; color:var(--q-texto-tenue); transform:translateY(50%);}
.res-term-punto{position:absolute; width:calc(var(--u)*13px); height:calc(var(--u)*13px); box-sizing:border-box; border-radius:50%; background:var(--q-t2); border:2px solid var(--q-lienzo); box-shadow:0 0 0 1px var(--q-borde-fuerte); transform:translateY(50%);}
.res-term-punto.mia{width:calc(var(--u)*17px); height:calc(var(--u)*17px); background:var(--q-acento); z-index:2;}
.res-term-lectura{flex:1;}
.res-term-numero{font-family:var(--q-fuente-titulo); font-size:calc(var(--u)*44px); font-weight:600; color:var(--q-acento); line-height:1;}
.res-term-numero span{font-size:calc(var(--u)*18px); color:var(--q-texto-tenue); font-weight:400;}
.res-term-desc{margin:calc(var(--u)*6px) 0 0; font-size:calc(var(--u)*13.5px); color:var(--q-texto-medio);}

/* ---- Antes / Después ---- */
.res-ad{display:grid; grid-template-columns:1fr auto 1fr; gap:calc(var(--u)*14px); align-items:start; max-width:calc(var(--u)*440px); padding:calc(var(--u)*6px) 0;}
.res-ad-col h3{font-family:var(--q-fuente-titulo); font-size:calc(var(--u)*14px); font-weight:600; margin:0 0 calc(var(--u)*10px); text-align:center;}
.res-ad-col.antes h3{color:var(--q-texto-tenue);}
.res-ad-col.ahora h3{color:var(--q-acento);}
.res-ad-flecha{color:var(--q-borde-fuerte); padding-top:calc(var(--u)*4px); display:grid; place-items:center;}
.res-ad-flecha svg{width:calc(var(--u)*22px); height:calc(var(--u)*22px);}
.res-ad-tarjeta{border-radius:calc(var(--u)*8px); padding:calc(var(--u)*10px) calc(var(--u)*12px); font-size:calc(var(--u)*13.5px); font-weight:600; margin-bottom:calc(var(--u)*8px); text-align:center; overflow-wrap:anywhere;}
.res-ad-col.antes .res-ad-tarjeta{background:var(--q-superficie-2); color:var(--q-texto-medio); border:1px solid var(--q-borde);}
.res-ad-col.ahora .res-ad-tarjeta{background:var(--q-acento-velo); color:var(--q-acento); border:1px solid var(--q-acento-borde);}
.res-ad-tarjeta.mia{border-width:2px; border-color:var(--q-acento);}

/* ---- Mosaico de emojis ---- */
.res-mosaico{display:flex; flex-wrap:wrap; gap:calc(var(--u)*12px); align-items:flex-end; padding:calc(var(--u)*6px) 0;}
.res-emoji{display:flex; align-items:center; gap:calc(var(--u)*8px); background:var(--q-superficie); border:1px solid var(--q-borde); border-radius:999px; padding:calc(var(--u)*10px) calc(var(--u)*16px);}
.res-emoji .e{line-height:1;}
.res-emoji .n{font-family:var(--q-fuente); font-size:calc(var(--u)*13px); font-weight:700; color:var(--q-texto-inverso); background:var(--q-texto-tenue); min-width:calc(var(--u)*20px); height:calc(var(--u)*20px); border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 calc(var(--u)*6px);}
.res-emoji.grande{padding:calc(var(--u)*16px) calc(var(--u)*22px);}
.res-emoji.grande .e{font-size:calc(var(--u)*44px);}
.res-emoji.grande .n{background:var(--q-acento);}
.res-emoji.mediano .e{font-size:calc(var(--u)*34px);}
.res-emoji.chico .e{font-size:calc(var(--u)*26px);}
.res-emoji.mia{border:2px solid var(--q-acento); background:var(--q-acento-suave);}

/* ---- Ajustes por modo ---- */
.res--proy .res-etq{font-size:calc(var(--u)*13.5px);}
.res--proy .res-tarjeta{max-width:calc(var(--u)*230px);}
.res--proy .res-fila{max-width:calc(var(--u)*640px);}
.res--proy .res-term{justify-content:center; gap:calc(var(--u)*40px); padding-top:calc(var(--u)*12px);}
.res--proy .res-term-lectura{flex:0 1 auto;}
.res--proy .res-term-tubo{height:calc(var(--u)*220px);}
.res--proy .res-ad{margin:0 auto; max-width:calc(var(--u)*560px);}
.res--proy .res-mosaico{justify-content:center;}

.res--part .res-relleno{background:var(--q-borde-fuerte);}
.res--part .res-fila.mia .res-relleno,
.res--part.res--sinmia .res-relleno{background:var(--q-acento);}
.res--part .res-fila.mia .res-etq{color:var(--q-acento);}
.res--part .res-etq{font-size:14px;}
.res--part .res-pista{height:13px;}
.res--part .res-mural{flex-direction:column; gap:12px;}
.res--part .res-tarjeta{max-width:none; font-size:15px;}
.res--part .res-corcho{flex-direction:column; padding:16px; gap:12px;}
.res--part .res-nota{width:auto; min-height:56px;}
.res--part .res-term-tubo{height:180px;}
.res--part .res-term-numero{font-size:38px;}
.res--part .res-ad{gap:8px; max-width:none;}
.res--part .res-ad-tarjeta{font-size:12.5px; padding:9px 8px;}

@media (max-width:780px){
  .res--consola .res-tarjeta{flex:1 1 100%; max-width:none;}
  .res--consola .res-nota{width:100%;}
}