/* ============================================================
   curso.css — componentes didácticos del curso "Entiende la IA"
   Extiende v2.css (sistema "Dos Voces"). NO redefine tokens:
   usa exclusivamente la paleta de 3 (paper/ink/teal) + --err.
   Cargar SIEMPRE después de v2.css en las páginas del curso.
   ============================================================ */

/* ================= GATE DE ACCESO (capa conmutable) ================= */
/* Overlay opaco: mientras el modo no sea 'open', el contenido no se ve. */
#curso-gate{position:fixed;inset:0;z-index:90000;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
#curso-gate .gate-card{position:relative;max-width:480px;width:100%;border:1.5px solid var(--teal);border-radius:24px;padding:2.4rem 2.1rem;background:var(--paper)}
#curso-gate .gate-cerrar{position:absolute;top:.9rem;right:1.1rem;background:none;border:none;font-size:1.7rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:.1rem .4rem;border-radius:8px}
#curso-gate .gate-cerrar:hover{color:var(--teal)}
#curso-gate .gate-card .kicker{display:block;margin-bottom:1rem}
#curso-gate .gate-card h2{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;line-height:1.2;margin-bottom:.7rem}
#curso-gate .gate-card p{font-family:var(--font-mono);font-size:.85rem;line-height:1.8;color:var(--ink-soft);margin-bottom:1.4rem}
#curso-gate .form-input{margin-bottom:1.2rem}
#curso-gate .gate-error{display:none;font-family:var(--font-mono);font-size:.78rem;color:var(--err);margin:-.6rem 0 1rem}
#curso-gate .gate-error::before{content:"# "}
body.curso-locked{overflow:hidden}
#curso-gate .gate-link{background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:.74rem;color:var(--teal);text-decoration:underline;padding:0}
#curso-gate .gate-link:hover{color:var(--ink)}

/* ================= BARRA DE PROGRESO DEL CURSO ================= */
.curso-progress{border:1.5px solid var(--teal);border-radius:18px;padding:1rem 1.3rem;margin-top:2.2rem}
.curso-progress .cp-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft)}
.curso-progress .cp-line strong{color:var(--teal);font-weight:600}
.curso-progress .cp-bar{height:6px;background:#1111111a;border-radius:100px;margin-top:.75rem;overflow:hidden}
.curso-progress .cp-fill{height:100%;width:0;background:var(--teal);border-radius:100px;transition:width .8s var(--ease-out)}

/* ================= CAJA DE DEMO (contenedor de interactivos) ================= */
.demo-box{border:1.5px solid var(--teal);border-radius:24px;padding:1.7rem;margin:2.2rem 0 0}
.demo-box .demo-label{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--teal);margin-bottom:1rem}
.demo-box .demo-label::before{content:"// "}
.demo-box .demo-note{font-family:var(--font-mono);font-size:.7rem;line-height:1.7;color:var(--ink-soft);margin-top:1rem}
.demo-box .demo-note::before{content:"# ";color:var(--teal)}
.demo-box .form-input{font-size:.95rem}
.demo-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.demo-actions .btn{font-size:.78rem;padding:.7rem 1.2rem}

/* Contadores/valores grandes dentro de demos */
.demo-stat{font-family:var(--font-sans);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink)}
.demo-stat span{font-family:var(--font-mono);font-size:.74rem;font-weight:400;color:var(--ink-soft)}

/* ================= TOKENS (píldoras del tokenizador) =================
   4 variantes alternadas: transparencias de teal y tinta — la paleta
   de 3 no se rompe, solo se vela. */
.tk-out{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.1rem;min-height:2.2rem;align-items:flex-start}
.tk{font-family:var(--font-mono);font-size:.85rem;line-height:1.4;padding:.18rem .5rem;border-radius:8px;border:1px solid #1111112b;white-space:pre}
.tk.t1{background:#23727a1f}
.tk.t2{background:#1111110d}
.tk.t3{background:#23727a3a}
.tk.t4{background:#23727a0f;border-color:#23727a66}

/* ================= DEMO "VENTANA DE CONTEXTO" ================= */
.ctx-win{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.ctx-msg{font-family:var(--font-mono);font-size:.8rem;line-height:1.6;border:1.5px solid var(--line);border-radius:14px;padding:.6rem .9rem;color:var(--ink);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.ctx-msg .who{color:var(--teal);font-weight:600}
.ctx-msg.out{opacity:.25;border-style:dashed;transform:translateX(-6px)}
.ctx-msg.out .who{color:var(--ink-soft)}
.ctx-frame{border:1.5px solid var(--teal);border-radius:18px;padding:.9rem;position:relative}
.ctx-frame::before{content:"ventana de contexto (lo que la IA ve)";font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--teal);display:block;margin-bottom:.6rem}

/* ================= QUIZ ================= */
.quiz-q{border:1.5px solid var(--teal);border-radius:24px;padding:1.6rem;margin-bottom:1rem}
.quiz-q .qn{display:block;font-family:var(--font-mono);font-size:.74rem;color:var(--teal);margin-bottom:.5rem}
.quiz-q .qq{font-family:var(--font-sans);font-weight:700;font-size:1rem;line-height:1.4;margin-bottom:1rem}
.quiz-opt{display:block;width:100%;text-align:left;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:14px;padding:.75rem 1rem;margin-bottom:.55rem;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.quiz-opt:hover{border-color:var(--teal);color:var(--teal)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.ok{border-color:var(--teal);background:#23727a14;color:var(--ink);font-weight:600}
.quiz-opt.ko{border-color:var(--err);color:var(--err)}
.quiz-opt:disabled:not(.ok):not(.ko){opacity:.45}
.quiz-exp{display:none;font-family:var(--font-mono);font-size:.78rem;line-height:1.75;color:var(--ink-soft);margin-top:.7rem}
.quiz-exp::before{content:"# ";color:var(--teal)}
.quiz-q.done .quiz-exp{display:block}
.quiz-res{border:1.5px solid var(--teal);border-radius:24px;padding:2rem;text-align:center;margin-top:1.6rem}
.quiz-res h3{font-family:var(--font-sans);font-weight:700;font-size:1.3rem;margin:.4rem 0 .6rem}
.quiz-res p{font-family:var(--font-mono);font-size:.85rem;line-height:1.8;color:var(--ink-soft)}
.quiz-res .acts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.quiz-res.fail{border-color:var(--err)}

/* ================= FLIP CARDS (mito/realidad, pregunta/respuesta) =================
   Sin 3D: alternancia accesible por clase .on (JS delegado en curso.js). */
button.flip{position:relative;width:100%;text-align:left;background:transparent;border:1.5px solid var(--teal);border-radius:24px;padding:1.7rem;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:.55rem;transition:transform .35s var(--ease-out);font-family:var(--font-mono)}
button.flip:hover{transform:translateY(-4px)}
button.flip .idx{display:block;width:100%;font-family:var(--font-mono);font-size:.8rem;color:var(--teal);border-bottom:1.5px solid var(--line);padding-bottom:.7rem;margin-bottom:.4rem;text-align:left}
button.flip h3{font-family:var(--font-sans);font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.3}
button.flip p{color:var(--ink-soft);font-size:.8rem;font-weight:400;line-height:1.75}
button.flip .f-hint{font-family:var(--font-mono);color:var(--teal);font-size:.68rem;font-weight:600;letter-spacing:.1em;margin-top:auto;padding-top:.5rem}
button.flip .f-back{display:none}
button.flip.on .f-front{display:none}
button.flip.on .f-back{display:block}
button.flip.on{background:#23727a0d}

/* ================= ESTADOS DE MÓDULO (portada) ================= */
.card .mod-meta{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);margin-top:auto;padding-top:.6rem}
.card .mod-done{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--teal)}
.card .mod-done svg{flex-shrink:0}
.card.locked{opacity:.5;pointer-events:none}
.card.locked .go{color:var(--ink-soft)}

/* ================= NAVEGACIÓN ENTRE MÓDULOS ================= */
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:2px solid var(--rule);margin-top:clamp(4rem,8vw,6rem);padding-top:var(--sp-3)}
.lesson-nav a{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;max-width:45%}
.lesson-nav a:hover{text-decoration:underline}
.lesson-nav a.idx-link{color:var(--ink-soft);max-width:none}
.lesson-nav svg{flex-shrink:0}

/* ================= PÍLDORAS DE CONCEPTO (mini-glosario en línea) ================= */
.term{border-bottom:1.5px dashed var(--teal);cursor:help;position:relative}

/* ================= AJUSTES RESPONSIVE ================= */
@media(max-width:640px){
  .demo-box{padding:1.2rem}
  #curso-gate .gate-card{padding:1.8rem 1.4rem}
  .lesson-nav a{max-width:100%}
}

/* ================= REDUCED MOTION ================= */
@media(prefers-reduced-motion:reduce){
  .curso-progress .cp-fill{transition:none}
  .ctx-msg{transition:none}
  button.flip:hover{transform:none}
}

/* ================= CERTIFICADO ================= */
.cert{border:1.5px solid var(--teal);border-radius:30px;padding:clamp(2rem,5vw,4rem);text-align:center;background:var(--paper);position:relative}
.cert .cert-inner{border:1px solid var(--line);border-radius:20px;padding:clamp(1.6rem,4vw,3rem)}
.cert img.cert-logo{height:56px;width:auto;margin:0 auto 1.4rem;display:block}
.cert .cert-kicker{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:lowercase;color:var(--teal);margin-bottom:1.2rem}
.cert .cert-kicker::before{content:"// "}
.cert h2.cert-curso{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.6rem,4.5vw,2.6rem);letter-spacing:-.02em;text-transform:uppercase;line-height:1.1;margin-bottom:1.6rem}
.cert h2.cert-curso em{font-style:normal;color:var(--teal)}
.cert .cert-otorga{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft)}
.cert .cert-nombre{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-.01em;margin:.6rem 0 1.4rem;border-bottom:2px solid var(--teal);display:inline-block;padding:0 1.2rem .5rem}
.cert .cert-texto{font-family:var(--font-mono);font-size:.85rem;line-height:1.9;color:var(--ink-soft);max-width:52ch;margin:0 auto 1.6rem}
.cert .cert-meta{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);margin-bottom:1.6rem}
.cert .cert-meta strong{display:block;color:var(--ink);font-weight:600;font-size:.85rem}
.cert .cert-firma{font-family:var(--font-mono);font-size:.72rem;color:var(--teal);border-top:1px solid var(--line);padding-top:1.2rem}
.cert-acts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
@media print{
  @page{size:A4 landscape;margin:0}
  /* display:none (no visibility): el contenido oculto no debe ocupar paginas,
     y el diploma fluye normal (position:fixed se estampa en CADA pagina impresa) */
  body.cert-imprimiendo nav.main,
  body.cert-imprimiendo .mobile-menu,
  body.cert-imprimiendo header.hero,
  body.cert-imprimiendo footer.v2,
  body.cert-imprimiendo .cert-acts,
  body.cert-imprimiendo .demo-note,
  body.cert-imprimiendo #smc-widget{display:none!important}
  body.cert-imprimiendo section.block{padding:0}
  body.cert-imprimiendo .wrap{max-width:none;padding:0}
  body.cert-imprimiendo .cert{margin:1cm;border-radius:0;padding:1.2cm;page-break-inside:avoid}
  body.cert-imprimiendo .cert .cert-inner{padding:1cm}
}