/*!
 * BIZARRO · Micro-lección de tres minutos (Hito M).
 * Se carga solo en /micro-leccion/. Usa los tokens de styles.css: no define ningún color nuevo (D-17).
 *
 * Dos clases de ayuda gobiernan el funcionamiento sin JavaScript:
 *   .lsn-only-js  controles que solo tienen sentido con JavaScript (se ocultan si no lo hay)
 *   .lsn-no-js    el texto equivalente para quien no lo tiene (se oculta cuando sí lo hay)
 * La clase «js» la pone el propio documento en <html> antes de pintar, así que no hay parpadeo.
 */

html:not(.js) .lsn-only-js { display: none !important; }
.js .lsn-no-js { display: none !important; }

/* Cualquier regla propia de «display» gana al atributo hidden del navegador, así que aquí se
   restablece para toda la lección: lo que lesson.js oculta debe quedar oculto de verdad. */
.lsn [hidden] { display: none !important; }

/* ---------- Sub-portada ---------- */
.lsn__badge {
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--plata);
  margin: 0;
}

/* ---------- Estructura ---------- */
.lsn__wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); }

/* En pantallas anchas, la indicación queda a la izquierda y el correo a la derecha, fijo mientras se
   busca. En las dos últimas pantallas el correo desaparece y el texto ocupa todo el ancho (is-single).
   El orden del documento no cambia: el tabulador sigue yendo de la indicación a las señales. */
@media (min-width: 64em) {
  .lsn__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    grid-template-areas: "prog prog" "panes mail";
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .lsn__prog { grid-area: prog; }
  .lsn__panes { grid-area: panes; }
  .lsn__mail { grid-area: mail; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .lsn__wrap.is-single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prog" "panes"; }
}

/* Avance: números a la izquierda, rótulo al lado. En móvil solo quedan los números. */
.lsn__prog {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(11, 11, 12, .14);
  font-size: .92rem;
  color: var(--gris);
}
.lsn__prog li { display: inline-flex; align-items: center; gap: .5rem; }
.lsn__prog-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(11, 11, 12, .3);
  border-radius: 50%;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.lsn__prog .is-done .lsn__prog-n { background: rgba(11, 11, 12, .1); border-color: rgba(11, 11, 12, .18); }
.lsn__prog .is-now { color: var(--negro); font-weight: 600; }
.lsn__prog .is-now .lsn__prog-n { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
@media (max-width: 47.99em) {
  .lsn__prog-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lsn__prog { gap: .5rem; }
}

/* ---------- El correo de ejemplo ---------- */
.lsn__mail { display: grid; gap: 0; }
.mail {
  border: 1px solid rgba(11, 11, 12, .22);
  background: var(--blanco);
  max-width: 44rem;
}
.mail__head {
  display: grid;
  gap: .35rem;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--hueso);
  border-bottom: 1px solid rgba(11, 11, 12, .14);
}
.mail__row { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .95rem; line-height: 1.5; }
.mail__tag { color: var(--gris); min-width: 4rem; }
.mail__val { flex: 1 1 14rem; word-break: break-word; }
.mail__body { padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: .9rem; font-size: 1rem; line-height: 1.65; }
.mail__body p { margin: 0; word-break: break-word; }
.mail__sep { height: 0; }

/* Señales: fragmentos marcados. Nacen desactivados (sin JavaScript se leen como texto resaltado). */
.lsn__flag {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px dashed rgba(11, 11, 12, .45);
  border-radius: 2px;
  padding: .15em .3em;
  margin: 0 -.05em;
  cursor: pointer;
  text-align: left;
  display: inline;
  position: relative;
}
.lsn__flag[disabled] { cursor: default; border-style: solid; border-color: rgba(11, 11, 12, .25); }
.lsn__flag:hover:not([disabled]) { border-color: var(--negro); background: rgba(11, 11, 12, .06); }
.lsn__flag:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }
.lsn__flag.is-found { background: var(--negro); color: var(--blanco); border-color: var(--negro); border-style: solid; cursor: default; }
.lsn__flag-n {
  display: none;
  margin-left: .4em;
  font-size: .75em;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.lsn__flag.is-found .lsn__flag-n { display: inline; }

/* ---------- Pantallas ---------- */
.lsn__pane { display: grid; gap: 1rem; max-width: 44rem; }
.lsn__pane h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.lsn__pane h3:focus-visible { outline: 2px solid var(--negro); outline-offset: 4px; }
.lsn__pane p { margin: 0; }
.lsn__count { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Explicación de cada señal */
.lsn__why { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.lsn__why > li { display: grid; gap: .35rem; border-top: 1px solid rgba(11, 11, 12, .14); padding-top: 1.1rem; }
.lsn__why-text { display: flex; gap: .6rem; align-items: baseline; }
.lsn__why-n {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--negro);
  color: var(--blanco);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
}
.lsn__quote { font-weight: 600; word-break: break-word; }
.lsn__why-why { color: var(--gris); }
.lsn__why-state { font-size: .9rem; font-weight: 600; }
.lsn__why-state.is-ok { color: var(--negro); }
.lsn__why-state.is-missed { color: var(--gris); }
.lsn__rule { border-left: 3px solid var(--negro); padding-left: 1rem; font-weight: 600; }

/* ---------- Preguntas ---------- */
.lsn__q { border: 0; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .5rem; }
.lsn__q legend { font-weight: 600; font-size: 1.05rem; padding: 0; margin-bottom: .5rem; }
.lsn__opt { display: flex; align-items: flex-start; gap: .75rem; }
.lsn__opt input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; align-self: center; accent-color: #0b0b0c; }
.lsn__opt label {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .35rem .5rem .35rem 0;
  cursor: pointer;
  line-height: 1.5;
}
.lsn__q.is-answered .lsn__opt label { cursor: default; }
.lsn__opt label.is-correct { font-weight: 600; }
.lsn__opt input:focus-visible + label { outline: 2px solid var(--negro); outline-offset: 2px; }
.lsn__fb { font-weight: 600; }
.lsn__fb.is-ok { color: var(--negro); }
.lsn__fb.is-wrong { color: var(--error); }
.lsn__ok { color: var(--gris); font-weight: 400; }

/* ---------- Cierre ---------- */
.lsn__close .actions { margin-top: .5rem; }
.lsn__score { font-weight: 600; font-variant-numeric: tabular-nums; }
.lsn__restart {
  font: inherit;
  background: none;
  border: 0;
  padding: .5rem 0;
  min-height: 2.75rem;
  color: var(--gris);
  text-decoration: underline;
  cursor: pointer;
}
.lsn__restart:hover { color: var(--negro); }
.lsn__restart:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }