/* ============================================================
   AUT-INOS ACADEMIA — CURSO v2
   Superficie de LECTURA, no landing.

   Criterio: el alumno pasa 25-50 min en una misma página. Por eso
   el fondo de lectura es neutro y el color aparece SOLO como señal
   semántica (verificar / practicar / peligro / problema), en el
   filete lateral y la etiqueta — nunca rellenando el bloque.

   Todo se apoya en una escala de espacio y una escala tipográfica.
   Original intacto en ../assets/estilo.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- Superficies (bajo contraste, sin brillo) --- */
  --bg:#f4f1ea;            /* fondo cálido: menos fatiga que el blanco puro */
  --cream:#f4f1ea;
  --paper:#faf8f3;
  --white:#ffffff;
  --sunk:#efece4;

  /* --- Tinta --- */
  --text:#16161c;
  --ink:#16161c;
  --muted:#5a5e6e;
  --soft:#8c8f9c;

  /* --- Líneas: una sola familia --- */
  --border:#16161c;
  --line:rgba(22,22,28,.14);
  --line-soft:rgba(22,22,28,.08);

  /* --- Señales semánticas (desaturadas, para filete y etiqueta) --- */
  --sig-verifica:#2f7d5b;   /* confirmar */
  --sig-practica:#3f35ff;   /* acción */
  --sig-problema:#b35c1e;   /* cuidado */
  --sig-peligro:#b03a58;    /* riesgo */
  --sig-dato:#2c6f88;       /* información */

  /* --- Fondos de bloque ---
     Antes todos los paneles eran blanco puro con el mismo borde: la
     página se leía como un muro parejo y cansaba la vista. Cada tipo
     de bloque tiene ahora su propio tono, muy lavado (2-4% de color),
     suficiente para distinguirlos sin gritar. */
  --surf:#faf8f3;               /* panel neutro */
  --surf-verifica:#f1f7f3;
  --surf-practica:#f1f2fd;
  --surf-problema:#fbf4ed;
  --surf-peligro:#fcf1f3;
  --surf-dato:#eff5f7;
  --surf-analogia:#f5f2fc;
  --sombra-bloque:0 1px 2px rgba(22,22,28,.04), 0 6px 16px rgba(22,22,28,.05);

  /* Marca (solo acentos puntuales) */
  --azul:#3f35ff; --purpura:#8158ff; --rosa:#ff6bb5;
  --cyan:#4fd7ff; --lima:#d6ff65; --naranja:#ff7b2c;
  --grad:linear-gradient(100deg,#3f35ff,#8158ff 55%,#ff6bb5);
  --ok:#2f7d5b; --err:#b03a58;

  /* --- ESCALA DE ESPACIO (única fuente de verdad) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* --- Radios --- */
  --r1:8px; --r2:12px; --r3:16px;

  /* --- Bordes: un solo grosor --- */
  --bw:2px;

  --font-head:'Sora',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh:3px 3px 0 var(--border);
  --radius:var(--r3);

  /* Ancho de lectura cómodo */
  --measure:68ch;
}

/* ============================================================
   MODO OSCURO
   Solo redefine variables: ni una regla de maquetación cambia.
   No se usa negro puro (#000) ni blanco puro sobre él — el
   contraste extremo es justamente lo que cansa en lecturas largas.
   ============================================================ */
:root[data-tema="oscuro"]{
  --bg:#14141a;
  --cream:#14141a;
  --paper:#1c1c24;
  --white:#1c1c24;
  --sunk:#101015;

  --text:#e8e6e3;
  --ink:#f2f0ed;
  --muted:#a8a8b4;
  --soft:#7c7c8a;

  --border:#3a3a46;
  --line:rgba(232,230,227,.16);
  --line-soft:rgba(232,230,227,.09);

  /* Señales aclaradas: los tonos oscuros no se leen sobre fondo oscuro */
  --sig-verifica:#5fc79b;
  --sig-practica:#8f88ff;
  --sig-problema:#e0965a;
  --sig-peligro:#f0849e;
  --sig-dato:#6fbcd8;
  --azul:#8f88ff;
  --purpura:#a68bff;

  --surf:#1c1c24;
  --surf-verifica:#182420;
  --surf-practica:#1b1b2c;
  --surf-problema:#241e18;
  --surf-peligro:#261a1f;
  --surf-dato:#172226;
  --surf-analogia:#201b2b;
  --sombra-bloque:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
}
:root[data-tema="oscuro"] .topbar{background:rgba(20,20,26,.95)}
:root[data-tema="oscuro"] img:not([src$=".svg"]){filter:brightness(.92)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);
  font-size:17px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

a{color:var(--azul);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--ink);background:rgba(63,53,255,.08)}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.87em;
  background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
}

/* ============================================================
   CABECERA
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) clamp(var(--s4),4vw,var(--s7));
  background:rgba(244,241,234,.95);backdrop-filter:blur(12px);
  border-bottom:var(--bw) solid var(--border);
}
.brand{font-family:var(--font-head);font-weight:800;font-size:1rem;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.brand:hover{background:none;color:var(--ink)}
.brand span{color:var(--azul)}
.pill{
  font-family:var(--font-head);font-weight:700;font-size:.72rem;
  background:var(--white);border:var(--bw) solid var(--border);
  padding:var(--s1) var(--s3);border-radius:100px;white-space:nowrap;
}
/* Botón de tema */
.tema-btn{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:var(--white);border:var(--bw) solid var(--border);
  color:var(--ink);
  transition:transform .2s var(--ease),background .2s;
}
.tema-btn:hover{transform:translateY(-1px);background:var(--sunk)}
.tema-btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.tema-btn .i-luna{display:none}
:root[data-tema="oscuro"] .tema-btn .i-sol{display:none}
:root[data-tema="oscuro"] .tema-btn .i-luna{display:block}

.progress{height:5px;background:var(--sunk);border-bottom:var(--bw) solid var(--border);position:sticky;top:56px;z-index:49}
.progress-fill{height:100%;width:0;background:var(--azul);transition:width .1s linear}

/* ============================================================
   CONTENEDOR Y RITMO
   ============================================================ */
.wrap{
  width:min(100% - var(--s6),820px);
  margin:0 auto;
  padding:var(--s7) 0 var(--s8);
}

/* ============================================================
   TIPOGRAFÍA — escala fija
   ============================================================ */
h1{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.14;letter-spacing:-.03em;
  margin-bottom:var(--s4);max-width:24ch;
}
/* Un h2 abre un tema nuevo: se le da aire arriba para que el ojo
   registre el corte antes de leer. */
h2{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.35rem,2.5vw,1.78rem);line-height:1.25;letter-spacing:-.022em;
  margin:calc(var(--s8) + var(--s5)) 0 var(--s5);padding-top:var(--s6);
  border-top:var(--bw) solid var(--line);max-width:32ch;
}
h2:first-of-type{border-top:none;padding-top:0;margin-top:var(--s6)}
h3{
  font-family:var(--font-head);font-weight:700;
  font-size:1.11rem;line-height:1.4;letter-spacing:-.015em;
  margin:var(--s7) 0 var(--s3);
}
p{margin-bottom:var(--s4);max-width:var(--measure)}
strong,b{font-weight:700;color:var(--ink)}
.lead{
  font-size:1.1rem;color:var(--muted);line-height:1.75;
  margin-bottom:var(--s6);max-width:60ch;
}
/* Antes: degradado azul→púrpura→rosa. Chocaba con la superficie de
   lectura (todo lo demás es tinta + señales desaturadas) y además el
   color no significaba nada. Ahora el énfasis es tipográfico: la misma
   tinta, subrayada con un trazo de marcador. */
.grad-text{
  background:none;color:inherit;
  box-shadow:inset 0 -.28em 0 rgba(214,255,101,.55);  /* marcador lima */
  padding:0 .06em;
}
ul,ol{margin:0 0 var(--s4) var(--s5);max-width:var(--measure)}
li{margin-bottom:var(--s2)}
li:last-child{margin-bottom:0}

/* Etiquetas */
.nivel,.badge{
  display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.7rem;
  padding:var(--s1) var(--s3);border-radius:100px;border:var(--bw) solid var(--border);
  background:var(--white);letter-spacing:.04em;
}
.badge{margin-bottom:var(--s3)}
.nivel.base{background:var(--white)}
.nivel.avanzado{background:var(--sunk)}

/* ============================================================
   BLOQUE BASE — todo panel comparte estas medidas
   ============================================================ */
.ficha,.objetivos,.medidor,.os-panel,.chat-demo,.quiz,
.camino,.explicacion,.callout,.verifica,.practica,.problemas,
.analogia{
  background:var(--surf);
  border:var(--bw) solid var(--border);
  border-radius:var(--r3);
  padding:var(--s5);
  margin:var(--s6) 0;          /* 32px: antes 24 y los bloques se pegaban */
  box-shadow:var(--sombra-bloque);
}
.ficha > *:last-child,.objetivos > *:last-child,.callout > *:last-child,
.verifica > *:last-child,.practica > *:last-child,.problemas > *:last-child,
.explicacion > *:last-child,.analogia > *:last-child,
.camino > *:last-child,.quiz > *:last-child{margin-bottom:0}

/* ============================================================
   BLOQUES SEMÁNTICOS — el color va en el filete, no en el fondo
   ============================================================ */
.verifica,.practica,.problemas,.callout,.analogia,.problema,.dato{
  border-left-width:6px;
  position:relative;
}
/* Cada bloque lleva su tono de fondo además del filete: así se
   distinguen de un vistazo al hojear, sin leer la etiqueta. */
.verifica{border-left-color:var(--sig-verifica);background:var(--surf-verifica)}
.practica{border-left-color:var(--sig-practica);background:var(--surf-practica)}
.problemas,.problema{border-left-color:var(--sig-problema);background:var(--surf-problema)}
.callout.peligro{border-left-color:var(--sig-peligro);background:var(--surf-peligro)}
.callout.tip,.dato,.callout.dato{border-left-color:var(--sig-dato);background:var(--surf-dato)}
.callout.tip{border-left-color:var(--sig-verifica);background:var(--surf-verifica)}
.analogia{border-left-color:var(--purpura);background:var(--surf-analogia)}

/* Etiqueta del bloque.
   OJO: .practica, .verifica y .objetivos YA traen su propio
   <span class="titulo"> en el HTML — no se les añade ::before
   (duplicaba el encabezado). Solo .problemas carece de título. */
.problemas::before{
  content:"Problemas comunes";
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sig-problema);margin-bottom:var(--s4);
}
.titulo{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:.98rem;line-height:1.4;margin-bottom:var(--s3);color:var(--ink);
}
/* El título hereda el color de la señal del bloque */
.verifica > .titulo{color:var(--sig-verifica)}
.practica > .titulo{color:var(--sig-practica)}
.verifica > .titulo::before{content:"✓ "}
.practica > .titulo::before{content:"⌨ "}
.callout.peligro > .titulo{color:var(--sig-peligro)}
.callout.tip > .titulo{color:var(--sig-verifica)}
.problemas h3:first-of-type{margin-top:0}

/* ---- FICHA: fila de datos del módulo (chips, no tarjetas) ---- */
.ficha{
  background:var(--paper);
  display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s4);
  align-items:center;
  padding:var(--s4) var(--s5);
  margin-bottom:var(--s6);
}
.ficha .dato{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:.86rem;color:var(--muted);line-height:1.5;
  /* sin fondo, sin borde, sin margen: es un dato, no un panel */
  background:none;border:none;padding:0;margin:0;border-radius:0;
}
.ficha .dato b{color:var(--ink);font-family:var(--font-head);font-weight:700}
.ficha .dato + .dato{padding-left:var(--s4);border-left:1px solid var(--line)}
@media(max-width:640px){
  .ficha{gap:var(--s3) var(--s4)}
  .ficha .dato + .dato{padding-left:0;border-left:none}
}
.ficha p{margin-bottom:var(--s2);font-size:.94rem}
.ficha strong{font-family:var(--font-head)}
.objetivos h3{margin-top:0}
.objetivos ol,.objetivos ul{margin-bottom:0}

/* ---- PROBLEMA: acordeón dentro de "Problemas comunes" ---- */
.problema{
  border:1px solid var(--line);border-radius:var(--r2);
  background:var(--paper);margin-bottom:var(--s3);overflow:hidden;
}
.problema:last-child{margin-bottom:0}
.problema > summary{
  cursor:pointer;list-style:none;
  padding:var(--s3) var(--s5) var(--s3) var(--s4);
  font-family:var(--font-head);font-weight:700;font-size:.92rem;line-height:1.5;
  position:relative;transition:background .2s var(--ease);
}
.problema > summary::-webkit-details-marker{display:none}
.problema > summary::after{
  content:"+";position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);
  font-size:1.3rem;font-weight:400;color:var(--sig-problema);line-height:1;
}
.problema[open] > summary{background:var(--sunk);border-bottom:1px solid var(--line)}
.problema[open] > summary::after{content:"−"}
.problema > summary:hover{background:var(--sunk)}
.cuerpo{font-size:.93rem;padding:var(--s4)}
.cuerpo > *:last-child{margin-bottom:0}

/* ============================================================
   PASOS
   ============================================================ */
.pasos{counter-reset:paso;list-style:none;margin:var(--s5) 0;padding:0;max-width:none}
.pasos > li{
  position:relative;list-style:none;
  background:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r3);
  padding:var(--s5) var(--s5) var(--s5) 66px;
  margin-bottom:var(--s3);
  transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.pasos > li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:var(--s5);top:var(--s5);
  width:28px;height:28px;border-radius:50%;
  background:var(--sunk);border:var(--bw) solid var(--border);
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:.8rem;line-height:1;
}
.pasos > li:hover{box-shadow:var(--sh)}
/* nav.js marca el estado en el <li> con la clase "listo" */
.pasos > li.listo{background:var(--paper);border-color:var(--sig-verifica)}
.pasos > li.listo::before{background:var(--sig-verifica);border-color:var(--sig-verifica);color:#fff}
.pasos > li p:last-of-type{margin-bottom:0}

/* ============================================================
   BOTONES — separación garantizada del texto
   ============================================================ */
.marcar,.copy-btn,.btn-completar,.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-head);font-weight:700;
  background:var(--white);color:var(--ink);text-decoration:none;
  border:var(--bw) solid var(--border);border-radius:100px;
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
}
.marcar{
  font-size:.78rem;padding:var(--s2) var(--s4);
  margin-top:var(--s4);       /* respiro obligatorio respecto al texto */
  min-height:38px;
  box-shadow:0 2px 0 var(--border);
}
/* El botón Copiar lo inyecta nav.js DENTRO del <pre> (pre.appendChild).
   Debe salir del flujo, o se imprime encima del código. */
.copy-btn{
  position:absolute;top:var(--s2);right:var(--s2);
  font-size:.74rem;padding:var(--s1) var(--s3);
  margin:0;min-height:30px;
  background:var(--white);
  box-shadow:0 2px 0 var(--border);
  z-index:2;
}
.copy-btn.ok{background:var(--lima)}
.btn-completar,.cta{
  font-size:.94rem;padding:var(--s3) var(--s5);
  margin-top:var(--s5);
  box-shadow:0 3px 0 var(--border);
}
.marcar:hover,.copy-btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--border);background:var(--paper)}
.btn-completar:hover,.cta:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--border);background:var(--lima);color:var(--ink)}
.marcar:active,.copy-btn:active,.btn-completar:active,.cta:active{transform:translateY(1px);box-shadow:0 1px 0 var(--border)}

/* ============================================================
   CÓDIGO
   ============================================================ */
pre{
  position:relative;                 /* ancla del botón Copiar */
  background:var(--sunk);border:var(--bw) solid var(--line);border-radius:var(--r2);
  /* reserva de espacio a la derecha para que el código no pase bajo el botón */
  padding:var(--s5) 92px var(--s4) var(--s4);
  margin:var(--s4) 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;line-height:1.75;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
}
pre code{background:none;border:none;padding:0;font-size:inherit}
.practica pre{margin-top:var(--s4)}

/* ============================================================
   QUIZ
   ============================================================ */
.quiz .pregunta{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:1.02rem;line-height:1.45;margin-bottom:var(--s4);
}
.quiz .opciones{display:flex;flex-direction:column;gap:var(--s2);margin:0;list-style:none}
.quiz .opcion{
  display:block;text-align:left;width:100%;cursor:pointer;
  background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);
  font-family:var(--font-body);font-size:.93rem;line-height:1.55;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s;
}
.quiz .opcion:hover{border-color:var(--border);background:var(--white)}
.quiz .opcion.correcta{border-color:var(--sig-verifica);background:rgba(47,125,91,.09);font-weight:600}
.quiz .opcion.correcta::after{content:" ✓";color:var(--sig-verifica);font-weight:800}
.quiz .opcion.incorrecta{border-color:var(--sig-peligro);background:rgba(176,58,88,.08)}
.quiz .opcion.incorrecta::after{content:" ✕";color:var(--sig-peligro);font-weight:800}

/* La explicación permanece oculta hasta responder; el JS le pone "ver".
   Sin esto, la respuesta correcta quedaría a la vista desde el inicio. */
.quiz .explicacion{
  display:none;margin:var(--s4) 0 0;padding:var(--s4);
  background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--azul);border-radius:var(--r2);
  font-size:.9rem;line-height:1.7;box-shadow:none;
}
.quiz .explicacion.ver{display:block;animation:aparece .3s var(--ease)}
@keyframes aparece{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   TABLA
   ============================================================ */
.tabla{
  overflow-x:auto;margin:var(--s5) 0;
  border:var(--bw) solid var(--border);border-radius:var(--r3);background:var(--white);
}
.tabla table{width:100%;border-collapse:collapse;font-size:.91rem}
.tabla th{
  background:var(--sunk);font-family:var(--font-head);font-weight:800;text-align:left;
  padding:var(--s3) var(--s4);border-bottom:var(--bw) solid var(--border);font-size:.85rem;
}
.tabla td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.65}
.tabla tr:last-child td{border-bottom:none}

/* ============================================================
   CHECKLIST
   ============================================================ */
.checklist{list-style:none;margin:var(--s4) 0;padding:0;max-width:var(--measure)}
.checklist li{position:relative;padding-left:var(--s6);margin-bottom:var(--s3);line-height:1.65}
.checklist li::before{
  content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:5px;
  background:var(--white);border:var(--bw) solid var(--border);
}
.checklist li::after{
  content:"";position:absolute;left:5px;top:10px;width:8px;height:4px;
  border-left:2px solid var(--border);border-bottom:2px solid var(--border);transform:rotate(-45deg);
}

/* ============================================================
   ÍNDICE — tarjetas de módulo
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s3);margin:var(--s5) 0}
.card{
  position:relative;
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r3);
  padding:var(--s5);min-height:200px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* Módulo ya completado (nav.js añade "completado") */
.card.completado{border-color:var(--sig-verifica)}
.card.completado::after{
  content:"✓";position:absolute;top:var(--s4);right:var(--s4);
  width:24px;height:24px;border-radius:50%;
  background:var(--sig-verifica);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.8rem;line-height:1;
}
.card.completado .num{background:rgba(47,125,91,.14);border-color:var(--sig-verifica)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh);background:var(--white)}
.card .num{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--sunk);border:var(--bw) solid var(--border);
  font-family:var(--font-head);font-weight:800;font-size:.78rem;line-height:1;
  margin-bottom:var(--s3);
}
.card h3{font-size:1.02rem;margin:0 0 var(--s2);line-height:1.35}
.card p{font-size:.86rem;color:var(--muted);line-height:1.62;margin-bottom:var(--s4);max-width:none}
.card .tiempo{margin-top:auto;font-size:.74rem;color:var(--soft);font-weight:600}

/* ============================================================
   PROGRESO GLOBAL
   ============================================================ */
.progreso-global{
  background:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r3);
  padding:var(--s5);margin:var(--s5) 0;
}
.progreso-global .cabecera{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap;
}
.progreso-global b{font-family:var(--font-head);font-weight:800}
.progreso-global span{font-size:.85rem;color:var(--muted);font-weight:500}
.barra{height:12px;background:var(--sunk);border:var(--bw) solid var(--border);border-radius:100px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--lima);transition:width .5s var(--ease)}
.reset{
  margin-top:var(--s4);font-family:var(--font-body);font-weight:600;font-size:.78rem;
  background:none;border:none;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0;
}
.reset:hover{color:var(--ink)}

/* ============================================================
   DOS CAMINOS / FLUJO / TABS
   ============================================================ */
.dos-caminos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s5) 0}
@media(max-width:700px){.dos-caminos{grid-template-columns:1fr}}
.camino h3{margin-top:0}
.camino ul{margin-bottom:0}
.camino li{font-size:.92rem}

.flow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:var(--s5) 0;justify-content:center}
.flow-node{
  background:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r2);
  padding:var(--s3) var(--s4);text-align:center;
  font-family:var(--font-head);font-weight:700;font-size:.85rem;line-height:1.4;min-width:112px;
}
.flow-node small{display:block;font-family:var(--font-body);font-weight:400;font-size:.72rem;color:var(--muted);margin-top:2px}
.flow-wire{display:flex;align-items:center;color:var(--border)}
.flow-wire i{display:block;width:24px;height:2px;background:var(--border)}
.flow-wire::after{content:"";border-left:7px solid var(--border);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* nav.js usa la clase "on" (no "activo") para pestaña y panel activos */
.os-tabs{display:flex;gap:var(--s1);margin:var(--s5) 0 0}
.os-tabs button{
  font-family:var(--font-head);font-weight:700;font-size:.85rem;cursor:pointer;
  background:var(--sunk);border:var(--bw) solid var(--border);border-bottom:none;
  border-radius:var(--r2) var(--r2) 0 0;padding:var(--s3) var(--s5);color:var(--muted);
}
.os-tabs button.on,.os-tabs button.activo{
  background:var(--white);color:var(--ink);
  box-shadow:0 -3px 0 var(--azul) inset;
}
/* Sin esta regla se mostrarían Windows y Mac al mismo tiempo */
.os-panel{border-radius:0 var(--r3) var(--r3) var(--r3);margin-top:0;display:none}
.os-panel.on{display:block}
.os-panel > *:first-child{margin-top:0}

.chat-demo{padding:var(--s4)}
.chat-b{
  border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);
  font-size:.91rem;line-height:1.65;max-width:86%;
}
.chat-b:last-child{margin-bottom:0}
/* El HTML usa .yo para el usuario (no .user) */
.chat-b.yo,.chat-b.user{background:var(--sunk);margin-left:auto}
.chat-b.ia{background:var(--paper);border-left:4px solid var(--azul)}
.chat-b .quien{
  display:block;font-family:var(--font-head);font-weight:700;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--azul);margin-bottom:var(--s1);
}

/* ============================================================
   COMPLEMENTOS — clases usadas por módulos específicos
   ============================================================ */

/* Salida esperada de terminal (sin botón Copiar → sin reserva) */
pre.salida{
  background:#12171f;border-color:#2b3543;color:#dfe6f0;
  padding:var(--s4);
}
pre.salida code{color:#dfe6f0}

/* Botón "marcar paso" — el JS le inyecta <span class="box">✓</span> + .txt
   y pone la clase "listo" en el <li> contenedor, no en el botón. */
.marcar .box{
  display:inline-grid;place-items:center;
  width:18px;height:18px;flex:none;
  border:var(--bw) solid var(--border);border-radius:4px;
  background:var(--white);
  font-size:.72rem;font-weight:700;line-height:1;
  color:transparent;              /* el ✓ está oculto hasta marcarse */
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.marcar .txt{line-height:1}
/* Marcado: aparece el tick */
.pasos > li.listo .marcar .box{
  background:var(--sig-verifica);
  border-color:var(--sig-verifica);
  color:#fff;
}
.pasos > li.listo .marcar{border-color:var(--sig-verifica);color:var(--sig-verifica)}

/* Botón "completar módulo" — el JS le pone la clase "hecho" */
.btn-completar.hecho{
  background:var(--sig-verifica);color:#fff;border-color:var(--sig-verifica);
  box-shadow:0 3px 0 rgba(22,22,28,.55);
}
.btn-completar.hecho:hover{background:#286a4d;color:#fff}

/* Píldora de la cabecera cuando el módulo está completo */
.pill.done{background:var(--sig-verifica);color:#fff;border-color:var(--sig-verifica)}
.pill.done::before{content:"✓ "}

/* Variante de callout */
.callout.atencion{border-left-color:var(--sig-problema)}
.callout.atencion > .titulo{color:var(--sig-problema)}

/* Caminos: visual vs código */
.camino .etiqueta{
  display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;
  padding:var(--s1) var(--s3);margin-bottom:var(--s3);
}
.camino.visual{border-left:5px solid var(--cyan)}
.camino.codigo{border-left:5px solid var(--purpura)}
.camino.visual .etiqueta{color:var(--sig-dato)}
.camino.codigo .etiqueta{color:var(--purpura)}

/* Icono dentro de un nodo de flujo */
.flow-node .ico{display:block;font-size:1.15rem;margin-bottom:var(--s1);line-height:1}

/* Barra comparativa (módulo de automatización) */
.fila{margin:var(--s4) 0}
.fila .etq{
  display:block;font-family:var(--font-head);font-weight:700;font-size:.8rem;
  color:var(--ink);margin-bottom:var(--s2);
}
.barra2{
  display:flex;width:100%;overflow:hidden;
  border:var(--bw) solid var(--border);border-radius:var(--r1);
  background:var(--sunk);
}
.barra2 .seg{
  display:flex;align-items:center;justify-content:center;
  padding:var(--s2) var(--s3);
  font-family:var(--font-head);font-weight:700;font-size:.76rem;
  line-height:1.3;text-align:center;color:var(--ink);
  background:var(--paper);border-right:1px solid var(--line);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.barra2 .seg:last-child{border-right:none}
.barra2 .seg.cod{background:var(--sunk)}
.barra2 .seg.n8n{background:rgba(63,53,255,.10)}
@media(max-width:640px){
  .barra2{flex-direction:column}
  .barra2 .seg{width:100%!important;border-right:none;border-bottom:1px solid var(--line);white-space:normal}
  .barra2 .seg:last-child{border-bottom:none}
}

/* Bloques del módulo 1 */
.fable,.haiku,.opus,.sonnet{
  background:var(--paper);border:var(--bw) solid var(--line);border-left:5px solid var(--border);
  border-radius:var(--r2);padding:var(--s4);margin:var(--s3) 0;font-size:.91rem;line-height:1.65;
}
.fable{border-left-color:var(--rosa)}
.haiku{border-left-color:var(--cyan)}
.opus{border-left-color:var(--purpura)}
.sonnet{border-left-color:var(--azul)}

/* ============================================================
   CIERRE
   ============================================================ */
.cierre{
  background:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r3);
  padding:clamp(var(--s5),4vw,var(--s7));margin:var(--s8) 0 0;text-align:center;
}
.cierre h2{margin-top:0;border-top:none;padding-top:0;max-width:none;margin-inline:auto}
.cierre p{color:var(--muted);max-width:54ch;margin-inline:auto}

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.pager{
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  width:min(100% - var(--s6),820px);margin:0 auto var(--s8);
}
.pager a{
  flex:1;min-width:190px;text-decoration:none;color:var(--ink);
  background:var(--white);border:var(--bw) solid var(--border);border-radius:var(--r3);
  padding:var(--s4) var(--s5);
  font-family:var(--font-head);font-weight:700;font-size:.9rem;line-height:1.4;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pager a:hover{transform:translateY(-2px);box-shadow:var(--sh);background:var(--white)}
.pager a small{
  display:block;font-family:var(--font-body);font-weight:600;font-size:.7rem;
  color:var(--muted);margin-bottom:var(--s1);text-transform:uppercase;letter-spacing:.08em;
}
.pager a.next{text-align:right}

/* ============================================================
   PIE
   ============================================================ */
.foot{
  border-top:var(--bw) solid var(--border);
  padding:var(--s7) var(--s5) var(--s8);text-align:center;
  font-size:.86rem;color:var(--muted);line-height:1.7;
}
.foot a{font-weight:600}
.foot .cta{margin-bottom:var(--s4)}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:var(--r1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card,.pasos > li,.pager a{transform:none!important}
}

@media(max-width:640px){
  body{font-size:16px}
  .wrap{width:min(100% - var(--s5),820px);padding:var(--s6) 0 var(--s7)}
  h2{margin-top:var(--s7)}
  .pasos > li{padding:var(--s4) var(--s4) var(--s4) 52px}
  .pasos > li::before{left:var(--s3);top:var(--s4)}
  .ficha,.objetivos,.callout,.verifica,.practica,.problemas,.quiz,.card{padding:var(--s4)}
  .flow{flex-direction:column}
  .flow-wire{transform:rotate(90deg)}

  /* En móvil el botón no puede robarle ancho al código:
     se ubica arriba y el código empieza más abajo. */
  pre{padding:44px var(--s3) var(--s3);font-size:.82rem}
  .copy-btn{top:var(--s2);right:var(--s2);min-height:32px}

  /* Objetivos táctiles cómodos */
  .marcar,.btn-completar,.cta,.quiz .opcion,.os-tabs button{min-height:44px}
  .quiz .opcion{padding:var(--s3)}
  .os-tabs button{padding:var(--s3) var(--s4);font-size:.82rem}
  .pager a{min-width:100%;text-align:left}
  .pager a.next{text-align:left}
  .tabla{font-size:.86rem}
  .chat-b{max-width:100%}
}

/* Tablet: la ficha y el grid respiran distinto */
@media(min-width:641px) and (max-width:900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* ============================================================
   IMPRESIÓN — los alumnos imprimen los módulos para seguirlos
   ============================================================ */
@media print{
  .topbar,.progress,.pager,.foot,.copy-btn,.marcar,
  .cierre,.progreso-global,.os-tabs,.reset{display:none!important}
  body{background:#fff;font-size:11pt;color:#000}
  .wrap{width:100%;max-width:100%;padding:0}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  pre{background:#f4f4f4;border:1px solid #ccc;padding:10px;color:#000}
  pre.salida{background:#f4f4f4;color:#000}
  pre.salida code{color:#000}
  /* Al imprimir se muestra todo: ambos sistemas y las respuestas */
  .os-panel{display:block!important;border-radius:8px;margin-bottom:10px}
  .problema .cuerpo{display:block!important}
  .quiz .explicacion{display:block!important}
  .ficha,.objetivos,.callout,.verifica,.practica,.problemas,
  .quiz,.pasos > li,.tabla{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
}