/* ============================================================
   SYMBIOTIQ — Mini examen al final de un artículo (assets/quiz.js)

   Verde y rojo solo para acierto / error: es un indicador de estado,
   la excepción autorizada a la paleta. Viven como tokens locales de
   .qz, con los mismos valores del analizador y del diagnóstico.
   ============================================================ */
.qz{
  --qz-bien:#3fd684;
  --qz-bien-f:rgba(63,214,132,.1);
  --qz-mal:#ff4f63;
  --qz-mal-f:rgba(255,79,99,.1);

  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:20px;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(21,186,255,.08),transparent 55%),
    radial-gradient(90% 80% at 0% 100%,rgba(130,7,234,.1),transparent 60%),
    rgba(255,255,255,.02);
  padding:30px clamp(20px,5vw,40px) 32px;
}
.quiz-wrap{max-width:var(--read);margin:0 auto 40px;padding:0 clamp(1.25rem,6vw,3rem)}

.qz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Cabecera ─────────────────────────────────────────────── */
.qz-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.qz-kicker{
  font-family:var(--font-body);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px;
}
.qz-titulo{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.2;letter-spacing:-.02em;color:#fff;
}
.qz-marcador{
  flex:none;display:flex;align-items:baseline;
  font-family:var(--font-display);font-weight:800;color:#fff;
  padding:8px 14px;border-radius:var(--pill);
  border:1px solid rgba(255,105,47,.35);background:rgba(255,105,47,.08);
}
.qz-puntos{font-size:1.25rem;line-height:1;color:var(--orange)}
.qz-de{font-size:.85rem;color:var(--text-muted);margin-left:2px}
.qz-salta{animation:qz-salta .45s var(--ease)}
@keyframes qz-salta{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

.qz-barra{display:flex;gap:6px;margin:20px 0 26px}
.qz-seg{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.09);transition:background .3s}
.qz-seg.actual{background:rgba(255,255,255,.4)}
.qz-seg.ok{background:var(--qz-bien)}
.qz-seg.mal{background:var(--qz-mal)}

/* ── Pregunta ─────────────────────────────────────────────── */
.qz-num{font-size:.78rem;color:var(--text-dim);letter-spacing:.04em;margin-bottom:6px}
.qz-q{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.02rem,2.4vw,1.14rem);line-height:1.45;color:#fff;margin-bottom:18px;
}
.qz-opciones{display:grid;gap:10px}
.qz-op{
  display:flex;align-items:center;gap:14px;width:100%;
  text-align:left;cursor:pointer;
  font:400 .96rem/1.45 var(--font-body);color:#e6e5ee;
  padding:13px 16px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  transition:border-color .2s,background .2s,transform .2s var(--ease),opacity .25s;
}
.qz-op:hover:not(:disabled){border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.06);transform:translateX(3px)}
.qz-op:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.qz-op:disabled{cursor:default}
.qz-letra{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font:700 .8rem var(--font-display);color:var(--text-muted);
  border:1px solid rgba(255,255,255,.18);transition:background .2s,color .2s,border-color .2s;
}
.qz-op:hover:not(:disabled) .qz-letra{color:#fff;border-color:rgba(255,255,255,.4)}

.qz-op.es-correcta{border-color:var(--qz-bien);background:var(--qz-bien-f);color:#fff}
.qz-op.es-correcta .qz-letra{background:var(--qz-bien);border-color:var(--qz-bien);color:#04150b}
.qz-op.es-incorrecta{border-color:var(--qz-mal);background:var(--qz-mal-f);color:#fff}
.qz-op.es-incorrecta .qz-letra{background:var(--qz-mal);border-color:var(--qz-mal);color:#1a0206}
.qz-op.apagada{opacity:.42}

/* ── Explicación ──────────────────────────────────────────── */
.qz-fb{margin-top:18px;padding:16px 18px;border-radius:12px;border-left:3px solid;background:rgba(255,255,255,.03)}
.qz-fb.bien{border-left-color:var(--qz-bien)}
.qz-fb.mal{border-left-color:var(--qz-mal)}
.qz-fb-titulo{font:700 .95rem var(--font-display);margin-bottom:4px}
.qz-fb.bien .qz-fb-titulo{color:var(--qz-bien)}
.qz-fb.mal .qz-fb-titulo{color:var(--qz-mal)}
.qz-fb-texto{font-size:.93rem;line-height:1.65;color:#cfced9}
.qz-fb-fila{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:14px}
.qz-sig{padding:11px 22px;cursor:pointer;font-size:.88rem}
.qz-repaso,.qz-otra{
  font:500 .88rem var(--font-body);color:var(--cyan);background:none;border:none;padding:4px 0;cursor:pointer;
  text-decoration:none;border-bottom:1px solid rgba(21,186,255,.35);
}
.qz-repaso:hover,.qz-otra:hover{color:#7ad6ff;border-bottom-color:var(--cyan)}

/* ── Resultado ────────────────────────────────────────────── */
.qz-final{text-align:left}
.qz-nota{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.qz-nota-num{
  font:800 clamp(3rem,9vw,4.2rem)/1 var(--font-display);letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--orange),var(--orange-warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.qz-nota-de{font:700 1.1rem var(--font-display);color:var(--text-muted)}
.qz-final-titulo{font:800 clamp(1.15rem,2.8vw,1.35rem)/1.3 var(--font-display);color:#fff;outline:none}
.qz-final-texto{margin-top:6px;color:var(--text-muted);font-size:.96rem;line-height:1.65;max-width:52ch}
.qz-repasar-t{margin-top:20px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.qz-repasar{list-style:none;padding:0;margin-top:8px;display:grid;gap:6px}
.qz-repasar a{
  font-size:.9rem;line-height:1.5;color:#cfced9;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.qz-repasar a:hover{color:#fff;border-bottom-color:var(--cyan)}
.qz-final-fila{margin-top:24px;align-items:center}
.qz-final-fila .cta-btn{cursor:pointer}

/* ── Contexto: intro, caso, chat, ayuda ───────────────────── */
.qz-intro{margin-top:8px;color:var(--text-muted);font-size:.93rem;line-height:1.6;max-width:52ch}
.qz-caso{
  font-size:.92rem;line-height:1.6;color:#cfced9;margin-bottom:14px;
  padding:12px 14px;border-radius:10px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02);
}
.qz-ayuda{font-size:.84rem;color:var(--text-muted);margin:-8px 0 16px}
.qz-afirmacion{
  font-size:clamp(1.08rem,2.6vw,1.24rem);padding-left:16px;border-left:2px solid var(--orange);
}

.qz-chat{
  display:flex;flex-direction:column;gap:8px;margin-bottom:18px;
  padding:14px;border-radius:14px;background:var(--bg-dark);border:1px solid var(--line);
}
.qz-burbuja{max-width:82%;padding:8px 12px 9px;border-radius:14px;font-size:.92rem;line-height:1.5;color:#ececf2}
.qz-burbuja.cliente{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.qz-burbuja.bot{align-self:flex-end;background:rgba(21,186,255,.14);border:1px solid rgba(21,186,255,.22);border-bottom-right-radius:4px}
.qz-quien{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px}
.qz-burbuja.bot .qz-quien{color:var(--cyan)}

/* ── Mito o realidad ──────────────────────────────────────── */
.qz-mito{grid-template-columns:1fr 1fr}
.qz-mito .qz-op{justify-content:center;padding:16px;font:700 1rem var(--font-display)}

/* ── Botón de revisar (tipos de varios toques) ────────────── */
.qz-revisar{
  margin-top:16px;cursor:pointer;
  font:700 .88rem var(--font-display);color:#fff;
  padding:11px 22px;border-radius:var(--pill);border:1px solid transparent;
  background:linear-gradient(120deg,var(--orange),var(--orange-warm));
  transition:opacity .2s,transform .25s var(--ease);
}
.qz-revisar:hover:not(:disabled){transform:translateY(-2px)}
.qz-revisar:disabled{opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.14)}
.qz-revisar:focus-visible,.qz-grupo:focus-visible,.qz-paso:focus-visible,.qz-frase:focus-visible,.qz-rango:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ── Clasificar ───────────────────────────────────────────── */
.qz-clasificar{display:grid;gap:8px}
.qz-fila{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  padding:10px 12px 10px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s;
}
.qz-fila-texto{flex:1 1 220px;font-size:.94rem;line-height:1.45;color:#e6e5ee}
.qz-grupos{display:flex;gap:6px;flex-wrap:wrap}
.qz-grupo{
  cursor:pointer;font:500 .8rem var(--font-body);color:var(--text-muted);
  padding:7px 12px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.16);background:transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.qz-grupo:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.35)}
.qz-grupo[aria-pressed="true"]{color:#fff;border-color:var(--orange);background:rgba(255,105,47,.16)}
.qz-grupo:disabled{cursor:default}
.qz-fila.ok{border-color:rgba(63,214,132,.5);background:var(--qz-bien-f)}
.qz-fila.mal{border-color:rgba(255,79,99,.5);background:var(--qz-mal-f)}
.qz-marca{font-size:.8rem;font-weight:500}
.qz-fila .qz-marca{flex-basis:100%}
.qz-fila.ok .qz-marca{flex-basis:auto}
.qz-fila.ok .qz-marca,.qz-paso.ok .qz-marca{color:var(--qz-bien)}
.qz-fila.mal .qz-marca,.qz-paso.mal .qz-marca{color:var(--qz-mal)}

/* ── Ordenar ──────────────────────────────────────────────── */
.qz-ordenar{display:grid;gap:8px}
.qz-paso{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;width:100%;text-align:left;cursor:pointer;
  font:400 .94rem/1.45 var(--font-body);color:#e6e5ee;
  padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);
  transition:border-color .2s,background .2s;
}
.qz-paso:hover:not(:disabled){border-color:rgba(255,255,255,.26)}
.qz-paso:disabled{cursor:default}
.qz-paso-num{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font:800 .85rem var(--font-display);color:#fff;border:1px dashed rgba(255,255,255,.25);
}
.qz-paso-texto{flex:1 1 200px}
.qz-paso.puesto{border-color:rgba(255,105,47,.45);background:rgba(255,105,47,.07)}
.qz-paso.puesto .qz-paso-num{border-color:transparent;background:linear-gradient(120deg,var(--orange),var(--orange-warm))}
.qz-paso.ok{border-color:rgba(63,214,132,.5);background:var(--qz-bien-f)}
.qz-paso.ok .qz-paso-num{background:var(--qz-bien);color:#04150b}
.qz-paso.mal{border-color:rgba(255,79,99,.5);background:var(--qz-mal-f)}
.qz-paso.mal .qz-paso-num{background:var(--qz-mal);color:#1a0206}

/* ── Detectar: una publicación de ejemplo ─────────────────── */
.qz-post{border-radius:14px;border:1px solid var(--line);background:var(--bg-dark);padding:14px 16px 16px}
.qz-post-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qz-post-avatar{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,#ffd08a 0%,var(--orange-warm) 34%,var(--orange) 70%);
}
.qz-post-autor{font:700 .88rem var(--font-display);color:#fff}
.qz-post-texto{display:grid;gap:4px;font-size:.97rem;line-height:1.55;color:#cfced9}
.qz-frase{
  display:block;width:100%;cursor:pointer;text-align:left;
  font:inherit;line-height:inherit;color:inherit;background:none;
  padding:7px 10px;border-radius:8px;border:none;
  border-left:2px dashed rgba(255,255,255,.22);
  transition:background .2s,color .2s,border-color .2s;
}
.qz-frase:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.06)}
.qz-frase[aria-pressed="true"]{color:#fff;background:rgba(255,105,47,.2);border-left:2px solid var(--orange)}
.qz-frase:disabled{cursor:default}
.qz-frase.atrapada,.qz-ley.atrapada{color:#fff;background:rgba(63,214,132,.16);border-left:2px solid var(--qz-bien)}
.qz-frase.se-paso,.qz-ley.se-paso{color:#fff;background:rgba(255,79,99,.06);border-left:2px dashed var(--qz-mal)}
.qz-frase.falsa,.qz-ley.falsa{color:#fff;background:rgba(255,79,99,.18);border-left:2px solid var(--qz-mal)}
.qz-frase.limpia{border-left-color:transparent;color:var(--text-muted)}
.qz-leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:.78rem}
.qz-ley{padding:2px 8px;border-radius:4px}

/* ── Estimar ──────────────────────────────────────────────── */
.qz-estimar{padding:6px 2px 0}
.qz-valor{
  font:800 clamp(2rem,6vw,2.6rem)/1.1 var(--font-display);letter-spacing:-.03em;color:#fff;margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.qz-rango{
  --qz-lleno:50%;
  -webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0;
}
.qz-rango:disabled{cursor:default;opacity:.6}
.qz-rango::-webkit-slider-runnable-track{
  height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--orange) 0,var(--orange-warm) var(--qz-lleno),rgba(255,255,255,.12) var(--qz-lleno));
}
.qz-rango::-moz-range-track{height:6px;border-radius:6px;background:rgba(255,255,255,.12)}
.qz-rango::-moz-range-progress{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--orange),var(--orange-warm))}
.qz-rango::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:#fff;border:3px solid var(--orange);box-shadow:0 2px 12px rgba(255,105,47,.45);
}
.qz-rango::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--orange)}
.qz-extremos{display:flex;justify-content:space-between;font-size:.76rem;color:var(--text-dim);margin-top:2px}
.qz-regla{position:relative;height:40px;margin:22px 12px 4px;border-top:1px solid rgba(255,255,255,.12)}
.qz-zona{
  position:absolute;top:-4px;height:8px;border-radius:8px;
  background:var(--qz-bien);box-shadow:0 0 14px rgba(63,214,132,.45);
}
.qz-tu{
  position:absolute;top:10px;transform:translateX(-50%);
  font:700 .72rem var(--font-display);padding:3px 8px;border-radius:var(--pill);white-space:nowrap;
}
.qz-tu::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:10px;margin-left:-1px;background:currentColor}
.qz-tu.ok{background:rgba(63,214,132,.2);color:var(--qz-bien)}
.qz-tu.mal{background:rgba(255,79,99,.2);color:var(--qz-mal)}
.qz-rango-real{font-size:.86rem;color:#cfced9}
.qz-valor.vacio{color:var(--text-dim);font-size:clamp(1.4rem,4vw,1.7rem);line-height:1.6}

/* ── Libreta del caso (preguntas conectadas) ──────────────── */
.qz-libreta{
  margin:-6px 0 22px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(21,186,255,.22);background:rgba(21,186,255,.05);
}
.qz-libreta-t{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.qz-libreta-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 18px;margin:0}
.qz-nota-fila{min-width:0}
.qz-nota-fila dt{font-size:.74rem;color:var(--text-muted);line-height:1.3}
.qz-nota-fila dd{margin:0;font:700 .95rem var(--font-display);color:#fff}
.qz-nota-fila.nueva dd{color:var(--orange-warm)}
.qz-nota-fila.nueva{animation:qz-anota .6s var(--ease) backwards}
@keyframes qz-anota{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.qz-fb.casi{border-left-color:var(--orange-warm)}
.qz-fb.casi .qz-fb-titulo{color:var(--orange-warm)}

/* ── Movimiento ───────────────────────────────────────────── */
.qz-entra{animation:qz-entra .45s var(--ease) backwards}
.qz-entra .qz-op,.qz-entra .qz-fila,.qz-entra .qz-paso{animation:qz-entra .45s var(--ease) backwards}
.qz-entra .qz-op:nth-child(2),.qz-entra .qz-fila:nth-child(2),.qz-entra .qz-paso:nth-child(2){animation-delay:.05s}
.qz-entra .qz-op:nth-child(3),.qz-entra .qz-fila:nth-child(3),.qz-entra .qz-paso:nth-child(3){animation-delay:.1s}
.qz-entra .qz-op:nth-child(4),.qz-entra .qz-fila:nth-child(4),.qz-entra .qz-paso:nth-child(4){animation-delay:.15s}
.qz-entra .qz-op:nth-child(5),.qz-entra .qz-fila:nth-child(5),.qz-entra .qz-paso:nth-child(5){animation-delay:.2s}
@keyframes qz-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .qz-entra,.qz-entra .qz-op,.qz-entra .qz-fila,.qz-entra .qz-paso,.qz-salta,.qz-nota-fila.nueva{animation:none}
  .qz-op,.qz-seg{transition:none}
}

@media (max-width:520px){
  .qz{padding:24px 18px 26px;border-radius:16px}
  .qz-marcador{padding:6px 11px}
  .qz-op{padding:12px 13px;gap:12px;font-size:.93rem}
  .qz-letra{width:27px;height:27px}
  .qz-final-fila .cta-btn{width:100%;justify-content:center}
  .qz-fila{padding:10px 12px}
  .qz-grupos{width:100%}
  .qz-grupo{flex:1}
  .qz-paso{padding:11px 13px}
  .qz-libreta-lista{grid-template-columns:1fr 1fr}
  .qz-burbuja{max-width:92%}
}