/* Maneja Bien — el sistema visual entero.
   Un solo fichero: es lo bastante pequeño para caber en la cabeza, y partirlo
   obligaría a saltar entre ficheros para entender un componente.

   ── Neo-brutalismo pastel, a la manera de greb ──────────────────────────────
   Tres reglas, y de ellas sale todo lo demás:

   1. **Todo lleva filete negro.** 2 px, 3 px en lo que manda. El borde es la
      estructura, no un adorno: se ve dónde empieza y acaba cada cosa sin tener
      que sombrear nada.
   2. **Las sombras son duras y negras** (`4px 4px 0`), nunca difuminadas. Una
      sombra con blur imita luz; esta imita papel recortado y pegado encima.
   3. **Los rellenos son pastel planos.** Sin degradados. Cada familia de
      contenido tiene su color, y ese color es cómo se reconoce de lejos —igual
      que un rombo amarillo es «preventiva» antes de leer nada.

   El pastel además resuelve un problema real: las señales de verdad son
   amarillo, rojo y azul saturados. Sobre un fondo pastel apagado destacan
   solas; sobre uno oscuro o sobre otro saturado, competirían. */

:root {
  --papel:   #fbf6ee;
  /* La tinta no es negra: es el azul marino del uniforme de Mr. Driver. Todo
     el filete del sitio sale de ahí, así que la marca está en cada borde y no
     solo en el logo. */
  --tinta:   #0b2a4d;
  --gris:    #5d6b7d;

  /* Los pasteles, derivados de los tres colores del personaje. El orden
     importa: los módulos los recorren en este orden. */
  --menta:   #b8e8c4;
  --melon:   #ffd3c6;
  --lila:    #ddd6fa;
  --butter:  #ffe6a3;
  --cielo:   #c2ddff;
  --rosa:    #ffd2e6;

  /* Los saturados del arte, solo para lo que tiene que gritar. */
  --azul:    #1070f8;
  --coral:   #f85848;
  --verde:   #25a63c;
  --ambar:   #f5b301;
  --rojo:    #e5342b;

  --filete:  2px solid var(--tinta);
  --grueso:  3px solid var(--tinta);
  --sombra:  4px 4px 0 var(--tinta);
  --sombra-g: 6px 6px 0 var(--tinta);
  --r:       10px;
  --ancho:   780px;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* La retícula del fondo: papel cuadriculado, no un lienzo liso. Se ve poco a
     propósito — está para dar textura, no para leerse. */
  background-image:
    linear-gradient(rgba(20,20,20,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,20,.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 800; }

.mb-app { min-height: 100vh; display: flex; flex-direction: column; }
.mb-vista {
  flex: 1; width: 100%; max-width: var(--ancho);
  margin: 0 auto; padding: 22px 16px 110px;
  animation: mb-entra .16s ease-out;
}
.mb-vista.es-ancho { max-width: 1180px; }
@keyframes mb-entra { from { opacity: 0; transform: translateY(5px); } }

.mb-muted { color: var(--gris); }
.mb-cargando { color: var(--gris); padding: 32px 0; font-family: var(--mono); }

/* ── Barra de arriba ─────────────────────────────────────────────────────── */

.mb-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--butter);
  border-bottom: var(--grueso);
}
.mb-marca { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px; }
.mb-marca-icono {
  display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--verde); border: var(--filete); border-radius: 6px; font-size: 13px;
}
.mb-topnav { display: flex; align-items: center; gap: 6px; }
.mb-topnav a {
  padding: 5px 11px; border: 2px solid transparent; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.mb-topnav a:hover { border-color: var(--tinta); background: var(--papel); }
.mb-yo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px; border: var(--filete); border-radius: 999px;
  background: var(--papel); font-size: 13px; font-weight: 700;
}
.mb-yo:hover { background: var(--cielo); }
.mb-yo-inicial {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); color: #fff; font-size: 11px; font-weight: 900;
}

.mb-consola-btn {
  background: var(--papel); border: var(--filete); border-radius: 8px;
  padding: 4px 9px; font-size: 12px; font-family: var(--mono); font-weight: 700;
  cursor: pointer; box-shadow: 2px 2px 0 var(--tinta);
}
.mb-consola-btn:hover { background: var(--lila); }
.mb-consola-btn:active { box-shadow: none; transform: translate(2px, 2px); }

/* ── Barra de abajo (móvil) ──────────────────────────────────────────────── */

.mb-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: none; background: var(--menta); border-top: var(--grueso);
  padding-bottom: env(safe-area-inset-bottom);
}
.mb-tabbar a, .mb-tabbar button {
  flex: 1; text-align: center; padding: 13px 4px; font-size: 13px; font-weight: 700;
  background: none; border: 0; border-right: var(--filete); cursor: pointer;
}
.mb-tabbar > *:last-child { border-right: 0; }
.mb-tabbar .es-on { background: var(--tinta); color: var(--papel); }

/* ── Portada ─────────────────────────────────────────────────────────────── */

.mb-hero { padding: 12px 0 24px; }
.mb-hero h1 {
  font-size: 38px; margin: 0 0 10px; font-weight: 900; line-height: 1.05;
  /* El subrayado grueso es el gesto de la casa: aparece aquí y en cada <h1>
     de sección, y es lo que ata la portada con el resto. */
  display: inline-block; box-shadow: inset 0 -14px 0 var(--butter);
}
.mb-hero p { margin: 0; color: var(--gris); max-width: 44ch; font-size: 16px; }

.mb-mods { display: grid; gap: 14px; }
.mb-mod {
  display: flex; align-items: center; gap: 14px;
  border: var(--grueso); border-radius: var(--r);
  padding: 16px; box-shadow: var(--sombra);
  transition: transform .12s, box-shadow .12s;
}
.mb-mod:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-mod:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
/* Un color por módulo, en el orden de la portada. Con seis pasteles y seis
   módulos no hace falta ciclar; si algún día hay más, `nth-child` los repite. */
.mb-mods > *:nth-child(6n+1) { background: var(--menta); }
.mb-mods > *:nth-child(6n+2) { background: var(--melon); }
.mb-mods > *:nth-child(6n+3) { background: var(--lila); }
.mb-mods > *:nth-child(6n+4) { background: var(--butter); }
.mb-mods > *:nth-child(6n+5) { background: var(--cielo); }
.mb-mods > *:nth-child(6n+6) { background: var(--rosa); }
/* La chapa va en papel sobre el pastel de su tarjeta: el mismo color sobre sí
   mismo no se ve, y la chapa es lo que hay que distinguir. */
.mb-mod-n { background: var(--papel); }
.mb-mod-n {
  flex: none; width: 40px; height: 40px; border: var(--filete); border-radius: 8px;
  display: grid; place-items: center; font-weight: 900; font-size: 17px;
}
.mb-mod-txt { flex: 1; min-width: 0; }
.mb-mod-txt h2 { margin: 0 0 3px; font-size: 18px; }
.mb-mod-txt p { margin: 0 0 7px; font-size: 14px; }
.mb-mod-meta {
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--tinta); color: var(--papel); padding: 2px 7px; border-radius: 5px;
}
.mb-mod-flecha { font-size: 22px; font-weight: 900; }

.mb-sesiones-link {
  display: block; margin-top: 20px; padding: 16px;
  background: var(--cielo); border: var(--grueso); border-radius: var(--r);
  box-shadow: var(--sombra);
}
.mb-sesiones-link:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-sesiones-link strong { display: flex; margin-bottom: 5px; font-size: 17px; font-weight: 800; }
.mb-sesiones-link span { font-size: 14px; }

/* ── Módulo y listas de lecciones ────────────────────────────────────────── */

.mb-vuelta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mb-vuelta a { font-size: 13px; font-weight: 700; font-family: var(--mono); }
.mb-vuelta a:hover { box-shadow: inset 0 -8px 0 var(--butter); }

.mb-mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mb-mod-head h1 {
  margin: 0 0 6px; font-size: 27px;
  display: inline-block; box-shadow: inset 0 -11px 0 var(--melon);
}
.mb-mod-desc { color: var(--gris); font-size: 14px; margin: 8px 0 24px; max-width: 52ch; }

.mb-grupo { margin-bottom: 26px; }
.mb-grupo-tit {
  display: inline-block; font-size: 11px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  background: var(--lila); border: var(--filete); border-radius: 6px;
  padding: 3px 9px; margin: 0 0 10px;
}
.mb-lecs { display: grid; gap: 8px; }
.mb-lec {
  display: flex; align-items: center; gap: 12px;
  background: var(--papel); border: var(--filete); border-radius: 8px;
  padding: 9px 12px; box-shadow: 3px 3px 0 var(--tinta);
  transition: transform .1s, box-shadow .1s;
}
.mb-lec:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.mb-lec:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tinta); }
/* Ya leída: se apaga el relleno y se quita la sombra. Sigue estando, pero deja
   de pedir turno — que es justo lo que uno quiere de lo que ya se estudió. */
.mb-lec.es-vista { background: #f0eae0; box-shadow: none; color: var(--gris); }
.mb-lec-tit { flex: 1; font-size: 15px; font-weight: 600; }
.mb-lec-n { font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 20px; }
.mb-lec-check {
  background: var(--verde); color: #fff; border: var(--filete); border-radius: 50%;
  width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 900;
}

/* ── La chapa de una señal ───────────────────────────────────────────────── */
/* Forma y color, sin imágenes. El glifo va en su propia capa porque el rombo
   se pinta rotando el contenedor, y si no saldría girado con él.
   Los colores son los de la calle y NO son pastel: una señal que no se
   distingue de la tarjeta que la contiene ha dejado de ser una señal. */

.mb-senal {
  flex: none; display: grid; place-items: center; position: relative;
  /* El relleno y el frente van por variable, no directos: el octágono y el
     triángulo necesitan repintar el relleno en un `::before` —ver abajo— y sin
     la variable habría que repetir cada esquema dos veces. */
  --relleno: var(--papel);
  --frente: var(--tinta);
  background: var(--relleno); color: var(--frente);
  border: 2px solid var(--tinta);
}
.mb-senal-sm { width: 34px; height: 34px; font-size: 15px; border-radius: 5px; }
.mb-senal-md { width: 52px; height: 52px; font-size: 22px; border-radius: 7px; }
.mb-senal-lg {
  width: 96px; height: 96px; font-size: 40px; border-radius: 9px;
  border-width: 3px; box-shadow: var(--sombra);
}
.mb-senal-glifo { line-height: 1; }
.mb-senal-glifo.es-texto { font-size: .4em; font-weight: 900; letter-spacing: .02em; }
.mb-senal-num { background: transparent; border-color: transparent; box-shadow: none; font-family: var(--mono); font-size: 13px; font-weight: 700; }

.mb-forma-circle   { border-radius: 50%; }
.mb-forma-diamond  { transform: rotate(45deg); border-radius: 5px; }
.mb-forma-diamond .mb-senal-glifo { transform: rotate(-45deg); }
.mb-forma-octagon  { clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); border-radius: 0; }
.mb-forma-triangle-down { clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 0; }
.mb-forma-line     { border-radius: 3px; }
/* El `clip-path` recorta el borde y la sombra, así que el filete no se puede
   pintar con `border`. La primera versión lo devolvía con un `inset`, pero un
   inset es un rectángulo: en los cortes del octágono salían dos barras negras
   rectas arriba y abajo en vez de seguir el filo.
   Lo que sí funciona: el elemento entero es negro, y un `::before` recortado
   igual y metido 3 px hacia dentro devuelve el relleno. El filete que queda es
   la diferencia entre los dos recortes, así que sigue el contorno sea cual sea. */
.mb-forma-octagon, .mb-forma-triangle-down {
  border: 0; background: var(--tinta);
}
.mb-forma-octagon::before, .mb-forma-triangle-down::before {
  content: ""; position: absolute; inset: 3px;
  background: var(--relleno); clip-path: inherit;
}
/* El glifo tiene que quedar por encima del relleno recuperado. */
.mb-forma-octagon .mb-senal-glifo, .mb-forma-triangle-down .mb-senal-glifo { position: relative; z-index: 1; }
.mb-senal-lg.mb-forma-octagon::before, .mb-senal-lg.mb-forma-triangle-down::before { inset: 4px; }

.mb-esq-yellow          { --relleno: var(--ambar); --frente: #141414; }
.mb-esq-red             { --relleno: var(--rojo);  --frente: #fff; }
.mb-esq-blue            { --relleno: var(--azul);  --frente: #fff; }
.mb-esq-white-red-ring  { --relleno: #fff; --frente: #141414; box-shadow: inset 0 0 0 5px var(--rojo); }
.mb-esq-white-red-text  { --relleno: #fff; --frente: var(--rojo); }
.mb-esq-black-white     { --relleno: #fff; --frente: #141414; }
.mb-esq-pavement-yellow { --relleno: #3a3a3a; --frente: var(--ambar); }
.mb-esq-pavement-white  { --relleno: #3a3a3a; --frente: #f4f4f4; }
/* La chapa grande ya lleva sombra; el `inset` del aro rojo la pisaría. */
.mb-senal-lg.mb-esq-white-red-ring { box-shadow: inset 0 0 0 7px var(--rojo), var(--sombra); }

/* ── El lector ───────────────────────────────────────────────────────────── */

.mb-progreso { height: 10px; background: var(--papel); border: var(--filete); border-radius: 6px; overflow: hidden; }
.mb-progreso-barra { height: 100%; background: var(--azul); border-right: var(--filete); transition: width .25s; }
.mb-lec-pos { font-size: 11px; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 7px 0 18px; }

.mb-lec-cuerpo {
  background: #fff; border: var(--grueso); border-radius: var(--r);
  padding: 26px 22px; box-shadow: var(--sombra-g);
}
.mb-lec-senal { display: flex; justify-content: center; margin-bottom: 20px; }
.mb-lec-cuerpo h1 { font-size: 25px; margin: 0 0 8px; text-align: center; }
.mb-lec-resumen { text-align: center; color: var(--gris); margin: 0 0 24px; font-size: 15px; }
.mb-lec-sub {
  display: inline-block; font-size: 11px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  background: var(--tinta); color: var(--papel); border-radius: 5px;
  padding: 2px 8px; margin: 24px 0 8px;
}
.mb-lec-exp { font-size: 17px; margin: 0; }

.mb-aviso { border: var(--filete); border-radius: 9px; padding: 13px 15px; margin: 18px 0; box-shadow: 3px 3px 0 var(--tinta); }
.mb-aviso strong { display: block; font-size: 13px; margin-bottom: 4px; font-weight: 800; }
.mb-aviso p { margin: 0; font-size: 15px; }
.mb-aviso.es-consejo { background: var(--menta); }
.mb-aviso.es-error   { background: var(--melon); }

.mb-refs { margin-top: 26px; border-top: var(--filete); padding-top: 16px; }
.mb-ref {
  margin: 12px 0 0; padding: 13px 15px;
  background: var(--butter); border: var(--filete); border-radius: 9px;
  box-shadow: 3px 3px 0 var(--tinta);
}
.mb-ref cite { display: block; font-style: normal; font-size: 11px; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.mb-ref p { margin: 0; font-size: 14px; }

.mb-lec-nav { display: flex; gap: 12px; margin-top: 20px; }
.mb-lec-nav > * { flex: 1; text-align: center; }

/* ── Quiz ────────────────────────────────────────────────────────────────── */

.mb-quiz { margin-top: 28px; border-top: var(--filete); padding-top: 8px; }
.mb-quiz-preg { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.mb-quiz-ops { display: grid; gap: 9px; }
.mb-quiz-op {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  background: var(--papel); border: var(--filete); border-radius: 9px;
  padding: 11px 13px; cursor: pointer; box-shadow: 3px 3px 0 var(--tinta);
  transition: transform .1s, box-shadow .1s;
}
.mb-quiz-op:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.mb-quiz-op:disabled { cursor: default; }
.mb-quiz-op.es-bien    { background: var(--menta); }
.mb-quiz-op.es-mal     { background: var(--melon); }
.mb-quiz-op.es-apagada { opacity: .5; box-shadow: none; }
.mb-quiz-letra {
  flex: none; width: 26px; height: 26px; border: var(--filete); border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; background: #fff;
}
.mb-quiz-op > span:nth-child(2) { flex: 1; }
.mb-quiz-marca { font-weight: 900; font-size: 18px; }
.mb-quiz-exp { margin-top: 14px; font-size: 14px; padding: 12px 14px; border: var(--filete); border-radius: 9px; }
.mb-quiz-exp.es-bien { background: var(--menta); }
.mb-quiz-exp.es-mal  { background: var(--melon); }

/* ── Botones y formularios ───────────────────────────────────────────────── */

.mb-btn {
  display: inline-block; text-align: center; cursor: pointer;
  background: var(--azul); color: #fff;
  border: var(--grueso); border-radius: 9px;
  padding: 10px 18px; font-size: 15px; font-weight: 800;
  box-shadow: var(--sombra); transition: transform .1s, box-shadow .1s;
}
.mb-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.mb-btn.es-suave { background: var(--papel); color: var(--tinta); }
/* El verde se reserva para lo que significa «aprobado»: terminar el curso,
   acertar, el certificado. Si tiñera también los botones normales dejaría de
   querer decir nada. */
.mb-btn.es-bien { background: var(--verde); color: #fff; }
.mb-btn.es-off, .mb-btn:disabled {
  background: #e6ded2; color: var(--gris); box-shadow: none;
  transform: none; pointer-events: none;
}

.mb-link-btn { background: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 700; padding: 4px 0; }
.mb-link-btn:hover { box-shadow: inset 0 -8px 0 var(--butter); }
.mb-link-btn.es-peligro { color: var(--rojo); }
.mb-link-btn.es-peligro:hover { box-shadow: inset 0 -8px 0 var(--melon); }
.mb-editar-link { font-size: 13px; font-weight: 700; font-family: var(--mono); }
.mb-editar-link:hover { box-shadow: inset 0 -8px 0 var(--butter); }

.mb-input {
  width: 100%; background: #fff; border: var(--filete); color: var(--tinta);
  border-radius: 8px; padding: 9px 11px; font: inherit;
}
.mb-input:focus { outline: none; box-shadow: 3px 3px 0 var(--tinta); }
.mb-input-corto { max-width: 120px; }
.mb-field { display: block; margin-bottom: 15px; }
.mb-field-label {
  display: block; font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.mb-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mb-check input { width: 17px; height: 17px; accent-color: var(--tinta); }
.mb-form { max-width: 400px; }
.mb-form h1 { font-size: 27px; display: inline-block; box-shadow: inset 0 -11px 0 var(--menta); }

.mb-aviso-linea {
  background: var(--butter); border: var(--filete); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; margin: 12px 0;
  box-shadow: 3px 3px 0 var(--tinta);
}
.mb-vacio {
  text-align: center; padding: 36px 20px;
  background: var(--papel); border: 3px dashed var(--tinta); border-radius: var(--r);
}
.mb-vacio .mb-btn { margin-top: 14px; }
.mb-tag {
  font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; background: var(--melon); border: var(--filete);
  border-radius: 5px; padding: 1px 6px;
}
.mb-chip {
  background: var(--papel); border: var(--filete); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 2px 2px 0 var(--tinta);
}
.mb-chip:hover { background: var(--lila); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tinta); }

/* ── Sesiones ────────────────────────────────────────────────────────────── */

.mb-ses-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mb-ses-head h1 { margin: 0 0 6px; font-size: 27px; display: inline-block; box-shadow: inset 0 -11px 0 var(--cielo); }
.mb-ses-head p { margin: 0; font-size: 14px; color: var(--gris); max-width: 46ch; }
.mb-ses-desde { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 22px; font-size: 12px; font-family: var(--mono); font-weight: 700; }
.mb-ses-lista { display: grid; gap: 14px; }
.mb-ses-card {
  background: var(--rosa); border: var(--grueso); border-radius: var(--r);
  padding: 16px; box-shadow: var(--sombra);
}
.mb-ses-card:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-ses-card h2 { margin: 0 0 5px; font-size: 18px; }
.mb-ses-card p { margin: 0 0 8px; font-size: 14px; }
.mb-ses-meta { font-size: 11px; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--tinta); color: var(--papel); padding: 2px 7px; border-radius: 5px; }
.mb-ses-card.es-cert { background: var(--menta); }
.mb-ses-acciones { display: flex; gap: 16px; margin-top: 10px; border-top: var(--filete); padding-top: 8px; }

/* ── Modales y el armador ────────────────────────────────────────────────── */

.mb-modal-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(20,20,20,.5);
  display: grid; place-items: center; padding: 16px;
}
.mb-modal {
  background: var(--papel); border: var(--grueso); border-radius: var(--r);
  width: 100%; max-width: 780px; max-height: 88vh; overflow: auto;
  padding: 20px; box-shadow: 8px 8px 0 var(--tinta);
}
.mb-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mb-modal-head h3 { margin: 0; font-size: 19px; display: inline-block; box-shadow: inset 0 -9px 0 var(--butter); }
.mb-modal-pie { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }

.mb-arm-campos { display: grid; gap: 10px; margin-bottom: 14px; }
/* `minmax(0, 1fr)` y no `1fr`: por defecto una columna de grid no baja de su
   contenido mínimo, así que una fila con un título largo empujaba la columna y
   sacaba los botones de mover fuera del modal, con barra horizontal incluida. */
.mb-arm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mb-arm-izq, .mb-arm-der { min-width: 0; }
@media (max-width: 660px) { .mb-arm-cols { grid-template-columns: minmax(0, 1fr); } }
.mb-arm-izq h4, .mb-arm-der h4 { margin: 0 0 8px; font-size: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.mb-arm-cands { max-height: 320px; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 9px; padding: 2px; }
.mb-arm-cand {
  display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  background: #fff; border: var(--filete); border-radius: 7px;
  padding: 7px 9px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.mb-arm-cand:hover { box-shadow: 3px 3px 0 var(--tinta); }
.mb-arm-cand.es-dentro { background: var(--menta); box-shadow: 3px 3px 0 var(--tinta); }
.mb-arm-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-arm-mas { font-weight: 900; font-size: 16px; flex: none; }
.mb-arm-lista { list-style: none; margin: 9px 0 0; padding: 2px; max-height: 320px; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mb-arm-fila {
  display: flex; align-items: center; gap: 9px;
  background: var(--cielo); border: var(--filete); border-radius: 7px;
  padding: 7px 9px; font-size: 14px; font-weight: 600;
}
.mb-arm-n { font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 20px; }
.mb-arm-mover { display: flex; gap: 4px; flex: none; }
.mb-arm-mover button {
  background: #fff; border: var(--filete); border-radius: 6px;
  width: 27px; height: 27px; cursor: pointer; font-weight: 700;
}
.mb-arm-mover button:hover:not(:disabled) { background: var(--butter); }
.mb-arm-mover button:disabled { opacity: .35; cursor: default; }
.mb-arm-mover .es-peligro:hover { background: var(--melon); }

/* ── El panel ────────────────────────────────────────────────────────────── */

.mb-panel h1 { font-size: 27px; margin: 0 0 6px; display: inline-block; box-shadow: inset 0 -11px 0 var(--lila); }
.mb-panel-lista { display: grid; gap: 8px; margin-top: 16px; }
.mb-panel-fila {
  display: flex; align-items: center; gap: 12px;
  background: var(--papel); border: var(--filete); border-radius: 8px;
  padding: 9px 12px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-panel-fila:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.mb-panel-fila.es-oculta { background: #efe8dd; box-shadow: none; color: var(--gris); }
.mb-panel-fila-n { font-family: var(--mono); font-size: 12px; font-weight: 700; min-width: 24px; }
.mb-panel-fila-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.mb-panel-fila-tit .mb-muted { font-size: 11px; font-family: var(--mono); font-weight: 400; }
.mb-panel-nueva { display: flex; gap: 10px; margin: 16px 0; }

.mb-panel-barra {
  position: sticky; top: 54px; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--butter); border: var(--grueso); border-radius: 9px;
  padding: 10px 13px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.mb-panel-titulo { flex: 1; min-width: 120px; font-weight: 800; }
.mb-panel-cols { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 880px) { .mb-panel-cols { grid-template-columns: 1fr; } }
.mb-panel-caja {
  background: #fff; border: var(--filete); border-radius: var(--r);
  padding: 15px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.mb-panel-caja h3 { margin: 0 0 6px; font-size: 15px; display: inline-block; box-shadow: inset 0 -8px 0 var(--cielo); }
.mb-panel-caja .mb-muted { font-size: 13px; margin-top: 0; }
.mb-panel-preview { display: flex; justify-content: center; padding: 12px 0 20px; }
.mb-quiz-edit { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.mb-quiz-edit input[type=radio] { width: 17px; height: 17px; accent-color: var(--tinta); }
.mb-ref-edit { border: var(--filete); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: var(--papel); }
.mb-ref-edit-cab { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
/* Los dos campos son `width: 100%`, así que en un flex se repartían el ancho a
   partes iguales: el nombre de la ley —que es largo— quedaba tan estrecho como
   el número de artículo, que son tres caracteres. */
.mb-ref-edit-cab .mb-input { flex: 1; min-width: 0; }
.mb-ref-edit-cab .mb-input-corto { flex: none; width: 92px; }
.mb-ref-edit-cab .mb-link-btn { flex: none; }

/* ── El editor de bloques ────────────────────────────────────────────────── */

.mb-toolbar {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  border: var(--filete); border-bottom: 0; border-radius: 8px 8px 0 0;
  padding: 7px; background: var(--lila);
}
.mb-tb-btn {
  background: var(--papel); border: var(--filete); border-radius: 6px;
  padding: 4px 9px; cursor: pointer; font-size: 13px; font-weight: 700;
}
.mb-tb-btn:hover { background: var(--butter); box-shadow: 2px 2px 0 var(--tinta); }
.mb-tb-sep { width: 2px; height: 20px; background: var(--tinta); margin: 0 3px; }

.mb-editable {
  min-height: 280px; border: var(--filete); border-radius: 0 0 8px 8px;
  padding: 18px; background: #fff; font-size: 16px; line-height: 1.6;
}
.mb-editable:focus { outline: none; }
.mb-editable h2 { font-size: 20px; }
.mb-editable h3 { font-size: 17px; }
/* Un bloque atómico se ve como una pieza, para que se entienda que se toca por
   dentro y no por fuera. */
.mb-editable [data-mb-bloque] { outline: 2px dashed var(--tinta); outline-offset: 5px; }

.mb-bloque-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.mb-bloque-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--papel); border: var(--filete); border-radius: 9px;
  padding: 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-bloque-card:hover { background: var(--menta); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.mb-bloque-icono { font-size: 19px; font-weight: 900; }
.mb-bloque-nombre { font-weight: 800; font-size: 14px; }
.mb-bloque-desc { font-size: 12px; color: var(--gris); }

/* ── Los bloques, tal como se ven en la lección publicada ─────────────────── */

.mb-html h2 { font-size: 20px; margin: 26px 0 8px; }
.mb-html h3 { font-size: 17px; margin: 22px 0 6px; }
.mb-html p  { margin: 0 0 13px; }
.mb-html a  { box-shadow: inset 0 -8px 0 var(--butter); font-weight: 600; }

.mb-pasos { list-style: none; counter-reset: paso; margin: 18px 0; padding: 0; }
.mb-pasos li {
  counter-increment: paso; position: relative; padding: 10px 0 10px 46px;
  border-bottom: var(--filete);
}
.mb-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 8px;
  width: 30px; height: 30px; border: var(--filete); border-radius: 7px;
  display: grid; place-items: center; background: var(--butter);
  font-size: 14px; font-weight: 900;
}
.mb-compara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
@media (max-width: 540px) { .mb-compara { grid-template-columns: 1fr; } }
.mb-compara > div { border: var(--filete); border-radius: 9px; padding: 13px; box-shadow: 3px 3px 0 var(--tinta); }
.mb-compara-si { background: var(--menta); }
.mb-compara-no { background: var(--melon); }
.mb-compara p { margin: 5px 0 0; font-size: 14px; }

.mb-multa { list-style: none; margin: 18px 0; padding: 0; border: var(--filete); border-radius: 9px; overflow: hidden; box-shadow: 3px 3px 0 var(--tinta); background: #fff; }
.mb-multa li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: var(--filete); font-size: 14px; }
.mb-multa li:last-child { border-bottom: 0; }
.mb-multa b { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.mb-checklist { list-style: none; margin: 18px 0; padding: 0; }
.mb-checklist li { position: relative; padding: 7px 0 7px 32px; font-size: 15px; }
.mb-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  width: 22px; height: 22px; border: var(--filete); border-radius: 5px;
  display: grid; place-items: center; background: var(--menta); font-size: 12px; font-weight: 900;
}

.mb-pull {
  margin: 22px 0; padding: 16px 18px;
  background: var(--butter); border: var(--grueso); border-radius: 9px;
  box-shadow: var(--sombra); font-size: 19px; font-weight: 700; font-style: italic;
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.mb-footer {
  border-top: var(--grueso); padding: 22px 16px 90px;
  font-size: 13px; color: var(--gris);
  max-width: var(--ancho); margin: 0 auto; width: 100%;
}
/* El pie sigue al ancho de la vista: si no, en el panel el filete se cortaba
   mucho antes que las tarjetas y parecía que faltaba media página. */
.mb-app:has(.mb-vista.es-ancho) .mb-footer { max-width: 1180px; }
.mb-footer p { margin: 0 0 7px; }
.mb-footer strong { color: var(--tinta); box-shadow: inset 0 -7px 0 var(--butter); }

/* ── Iconos ──────────────────────────────────────────────────────────────────
   Todo lo que lleva icono es un flex con hueco, y siempre en el mismo sentido:
   el icono a la izquierda del texto. Declararlo una vez aquí —en vez de en
   cada componente— es lo que evita que unos queden centrados y otros no. */

.mb-topnav a, .mb-tabbar a, .mb-tabbar button, .mb-vuelta a, .mb-btn,
.mb-link-btn, .mb-chip, .mb-grupo-tit, .mb-panel-caja h3,
.mb-editar-link, .mb-tb-btn, .mb-arm-mover button {
  display: inline-flex; align-items: center; gap: 7px;
}
/* Estos dos son de bloque —debajo va su párrafo—, así que `flex` y no
   `inline-flex`: con `inline-flex` el texto de al lado se les subía a la misma
   línea y la tarjeta salía descuadrada. */
.mb-aviso strong, .mb-sesiones-link strong { display: flex; align-items: center; gap: 7px; }
.mb-tabbar a, .mb-tabbar button { flex-direction: column; gap: 3px; justify-content: center; }
.mb-arm-mover button, .mb-quiz-marca, .mb-lec-check, .mb-arm-mas,
.mb-mod-flecha, .mb-marca-icono { justify-content: center; }
.mb-btn { justify-content: center; }
.mb-grupo-tit svg { margin-left: -1px; }

/* El número del módulo va debajo de su icono, en pequeño: la chapa dice a la
   vez de qué va y por dónde va. */
.mb-mod-n { flex-direction: column; gap: 0; line-height: 1; }
.mb-mod-n b { font-size: 10px; font-family: var(--mono); }

.mb-panel-fila-n { display: flex; align-items: center; justify-content: center; }
.mb-mod-flecha, .mb-panel-fila > span:last-child { display: flex; align-items: center; }

/* En el pie de una lección la flecha va del lado al que lleva: la de «Anterior»
   delante del texto, la de «Siguiente» detrás. No hace falta regla —cada botón
   ya pone su icono en el sitio— pero sí dejarlo dicho, porque la tentación de
   «unificarlos» vuelve cada vez que alguien mira el fichero. */

/* Un rombo es un cuadrado girado 45°, así que su diagonal —lo que realmente
   ocupa— es 1,41 veces su lado. Sin encoger el cuadrado, un rombo de 34 px se
   come 48 px de fila y se sale por el filete. Se le da el lado que hace que la
   diagonal mida lo mismo que ocupan las demás chapas. */
.mb-senal-sm.mb-forma-diamond { width: 24px; height: 24px; margin: 0 5px; }
.mb-senal-md.mb-forma-diamond { width: 37px; height: 37px; margin: 0 7px; }
.mb-senal-lg.mb-forma-diamond { width: 68px; height: 68px; margin: 14px; }

/* ── El logo ─────────────────────────────────────────────────────────────────
   El PNG es un recorte cuadrado del render, así que sus cuatro esquinas son el
   fondo negro que rodeaba al icono. El `border-radius` las tapa —el icono ya
   venía redondeado por dentro, así que no se le quita nada suyo. */

/* El icono ya viene opaco y a sangre, así que el filete apoya sobre el azul.
   Antes, con las esquinas transparentes del recorte, entre el borde y el dibujo
   se colaba el color de la barra y parecía un marco claro. */
.mb-marca-logo {
  width: 30px; height: 30px; border-radius: 26%;
  border: var(--filete); display: block; flex: none;
}

/* ── El escritorio ───────────────────────────────────────────────────────────
   Dos columnas: a la izquierda la baldosa con el número que se mira a diario y
   el filtro por grupos; a la derecha las tarjetas. El filtro es un filtro y no
   un menú —quedarse en «Todo» es lo normal—, por eso son botones y no enlaces:
   no hay URL a la que llegar filtrado. */

.mb-esc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.mb-esc-head h1 { margin: 0; font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-esc-head p { margin: 2px 0 0; font-size: 14px; }
.mb-esc-avatar {
  flex: none; width: 46px; height: 46px; border: var(--grueso); border-radius: 10px;
  display: grid; place-items: center; background: var(--cielo);
  font-weight: 900; font-size: 20px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-rol {
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  border: var(--filete); border-radius: 5px; padding: 1px 7px; background: var(--butter);
}
.mb-rol-admin { background: var(--rosa); }
.mb-rol-lectura { background: var(--papel); }

.mb-esc-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 780px) { .mb-esc-cols { grid-template-columns: minmax(0, 1fr); } }

.mb-esc-lado { display: grid; gap: 14px; }
.mb-esc-baldosa {
  display: block; background: var(--papel); border: var(--grueso); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--sombra);
}
.mb-esc-baldosa:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-esc-baldosa-kicker {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gris);
}
.mb-esc-baldosa-cifra { display: block; font-size: 40px; font-weight: 900; line-height: 1.05; margin: 4px 0 2px; }
.mb-esc-baldosa-pie { font-size: 12px; color: var(--gris); }

.mb-esc-nav { display: grid; gap: 4px; }
.mb-esc-navi {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 2px solid transparent; border-radius: 8px;
  padding: 8px 11px; cursor: pointer; font-size: 14px; font-weight: 700;
}
.mb-esc-navi em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gris); }
.mb-esc-navi:hover { border-color: var(--tinta); background: var(--papel); }
.mb-esc-navi.es-activo { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.mb-esc-navi.es-activo em { color: var(--papel); opacity: .75; }

.mb-esc-grupo { margin-bottom: 24px; }
.mb-esc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mb-esc-t {
  display: block; background: var(--papel); border: var(--filete); border-radius: var(--r);
  padding: 15px; box-shadow: var(--sombra); transition: transform .1s, box-shadow .1s;
}
.mb-esc-t:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-esc-t:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
/* El icono en su chapa de color: es lo que distingue una tarjeta de otra de
   un vistazo, antes de leer el título. */
.mb-esc-t-ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: var(--filete); border-radius: 9px; margin-bottom: 11px;
}
.mb-esc-t-tit { display: block; font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.mb-esc-t-desc { display: block; font-size: 13px; color: var(--gris); }
.mb-esc-t.es-menta  .mb-esc-t-ico { background: var(--menta); }
.mb-esc-t.es-melon  .mb-esc-t-ico { background: var(--melon); }
.mb-esc-t.es-lila   .mb-esc-t-ico { background: var(--lila); }
.mb-esc-t.es-butter .mb-esc-t-ico { background: var(--butter); }
.mb-esc-t.es-cielo  .mb-esc-t-ico { background: var(--cielo); }
.mb-esc-t.es-rosa   .mb-esc-t-ico { background: var(--rosa); }
.mb-esc-t.es-tinta  .mb-esc-t-ico { background: var(--tinta); color: var(--papel); }

/* ── La clave recién generada ────────────────────────────────────────────────
   Se enseña una vez y no vuelve: el aviso tiene que gritar, porque cerrarlo sin
   copiarla obliga a dar de alta otra vez. */

.mb-clave-nueva {
  background: var(--menta); border: var(--grueso); border-radius: var(--r);
  padding: 15px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.mb-clave-nueva strong { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.mb-clave-nueva p { margin: 6px 0 10px; font-size: 14px; }
.mb-clave {
  display: block; background: #fff; border: var(--filete); border-radius: 8px;
  padding: 11px 14px; font-family: var(--mono); font-size: 18px; font-weight: 700;
  letter-spacing: .06em; margin-bottom: 10px; user-select: all;
}

/* ── Mr. Driver, el personaje ────────────────────────────────────────────────
   Sale cuando dice algo, no de adorno. El bocadillo es un recuadro con pico:
   dos triángulos superpuestos, el de fuera del color del filete y el de dentro
   del relleno, que es como se dibuja un borde en una punta sin SVG. */

.mb-mascota { display: block; height: 120px; width: auto; flex: none; }

.mb-dice { display: flex; align-items: center; gap: 6px; margin: 22px 0; }
.mb-dice-globo {
  position: relative; flex: 1; min-width: 0;
  background: var(--butter); border: var(--grueso); border-radius: var(--r);
  padding: 15px 17px; box-shadow: var(--sombra);
}
.mb-dice-globo::before, .mb-dice-globo::after {
  content: ""; position: absolute; top: 30px; width: 0; height: 0;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.mb-dice-globo::before { left: -16px; border-right: 14px solid var(--tinta); }
.mb-dice-globo::after  { left: -12px; border-right: 14px solid var(--butter); }
.mb-dice-globo strong { display: block; font-size: 16px; margin-bottom: 5px; }
.mb-dice-globo p { margin: 0 0 8px; font-size: 15px; }
.mb-dice-globo p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .mb-dice { flex-direction: column; align-items: stretch; gap: 0; }
  .mb-mascota { height: 96px; margin: 0 auto; }
  /* En columna el pico pasa de apuntar al lado a apuntar hacia arriba. */
  .mb-dice-globo::before, .mb-dice-globo::after {
    top: auto; left: 34px; border: 0;
    border-left: 11px solid transparent; border-right: 11px solid transparent;
  }
  .mb-dice-globo::before { bottom: 100%; border-bottom: 14px solid var(--tinta); }
  .mb-dice-globo::after  { bottom: calc(100% - 4px); border-bottom: 14px solid var(--butter); }
}

/* ── La portada de quien no ha entrado ───────────────────────────────────────
   Enseña el programa, no el índice: quien llega sin saber qué es esto necesita
   saber si es para él antes que un menú de seis módulos. */

.mb-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  background: var(--coral); color: #fff; border: var(--filete);
  border-radius: 6px; padding: 3px 9px;
}

.mb-portada { display: flex; align-items: center; gap: 20px; padding: 14px 0 30px; }
.mb-portada-txt { flex: 1; min-width: 0; }
.mb-portada h1 { font-size: 42px; line-height: 1.03; margin: 14px 0 12px; }
.mb-portada h1 em { font-style: normal; box-shadow: inset 0 -14px 0 var(--butter); }
.mb-portada-sub { margin: 0 0 20px; font-size: 16px; max-width: 44ch; }
.mb-portada-botones { display: flex; flex-wrap: wrap; gap: 11px; }
.mb-portada-nota { margin: 12px 0 0; font-size: 13px; color: var(--gris); max-width: 40ch; }
.mb-portada-mascota { height: 230px; }
@media (max-width: 700px) {
  .mb-portada { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .mb-portada h1 { font-size: 32px; }
  .mb-portada-mascota { height: 150px; }
}

.mb-pasos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.mb-paso {
  position: relative; border: var(--grueso); border-radius: var(--r);
  padding: 16px; box-shadow: var(--sombra);
}
.mb-paso.es-cielo { background: var(--cielo); }
.mb-paso.es-butter { background: var(--butter); }
.mb-paso.es-menta { background: var(--menta); }
.mb-paso-n {
  position: absolute; top: -13px; right: 14px;
  width: 28px; height: 28px; border: var(--filete); border-radius: 50%;
  display: grid; place-items: center; background: var(--papel);
  font-weight: 900; font-size: 14px;
}
.mb-paso-ico {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: var(--filete); border-radius: 9px; background: var(--papel); margin-bottom: 11px;
}
.mb-paso strong { display: block; font-size: 16px; margin-bottom: 5px; }
.mb-paso p { margin: 0; font-size: 14px; }

.mb-para-quien { margin: 30px 0; }

.mb-temario { list-style: none; counter-reset: tema; margin: 0; padding: 0; display: grid; gap: 8px; }
.mb-temario li { counter-increment: tema; }
.mb-temario a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  background: var(--papel); border: var(--filete); border-radius: 9px;
  padding: 11px 14px 11px 46px; position: relative; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-temario a::before {
  content: counter(tema); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: var(--filete); border-radius: 6px;
  display: grid; place-items: center; background: var(--cielo);
  font-size: 12px; font-weight: 900;
}
.mb-temario a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.mb-temario strong { grid-column: 1; font-size: 15px; }
.mb-temario .mb-muted { grid-column: 1; font-size: 13px; }
.mb-temario em {
  /* Columna explícita: con solo `grid-row` la colocación automática metía la
     etiqueta en la primera columna y empujaba el título a la segunda —salía la
     píldora estirada a la izquierda y el nombre del módulo a la derecha. */
  grid-column: 2; grid-row: 1 / span 2;
  font-style: normal; font-family: var(--mono);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--tinta); color: var(--papel); border-radius: 5px; padding: 2px 7px;
}

.mb-cierre {
  margin-top: 34px; text-align: center; padding: 26px 18px;
  background: var(--cielo); border: var(--grueso); border-radius: var(--r);
  box-shadow: var(--sombra);
}
.mb-cierre h2 { margin: 0 0 6px; font-size: 24px; }
.mb-cierre p { margin: 0 0 16px; font-size: 15px; }

.mb-form-pie { margin-top: 14px; font-size: 14px; }

/* ── El curso ────────────────────────────────────────────────────────────────
   Una ruta, no un índice: los módulos en su orden, con cuánto llevas de cada
   uno, y el examen al final. */

/* El saludo: la cara de Mr. Driver y tu nombre. Es lo primero, y lo único de
   la pantalla que cambia según quién eres. */
.mb-curso-yo { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.mb-curso-yo-mascota { height: 92px; }
.mb-curso-yo-txt { flex: 1; min-width: 0; }
.mb-curso-yo h1 { margin: 0 0 4px; font-size: 30px; display: inline-block; box-shadow: inset 0 -12px 0 var(--butter); }
.mb-curso-yo-sub { margin: 0; font-size: 15px; color: var(--gris); }
@media (max-width: 560px) {
  .mb-curso-yo-mascota { height: 68px; }
  .mb-curso-yo h1 { font-size: 24px; }
}

/* Las baldosas: los cuatro números que se miran al entrar. */
.mb-baldosas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-bottom: 14px;
}
@media (max-width: 620px) { .mb-baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mb-baldosa {
  background: var(--papel); border: var(--filete); border-radius: 9px;
  padding: 11px 13px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-baldosa.es-bien { background: var(--menta); }
.mb-baldosa-etq {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gris);
}
.mb-baldosa strong { display: block; font-size: 28px; line-height: 1.1; margin: 4px 0 1px; }
.mb-baldosa-pie { font-size: 11px; color: var(--gris); }

/* La meta: cuánto falta para el examen. Grande a propósito — es el número por
   el que se vuelve a esta pantalla. */
.mb-meta {
  background: var(--cielo); border: var(--grueso); border-radius: var(--r);
  padding: 15px 17px; box-shadow: var(--sombra); margin-bottom: 14px;
}
.mb-meta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.mb-meta-etq {
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.mb-meta-cifra { font-size: 26px; font-weight: 900; font-family: var(--mono); }
.mb-progreso.es-grande { height: 18px; position: relative; }
.mb-meta-hito {
  position: absolute; top: 50%; transform: translate(-130%, -50%);
  display: grid; place-items: center; color: var(--papel);
}
.mb-meta-pie { margin: 8px 0 0; font-size: 13px; }

.mb-continuar { width: 100%; margin-bottom: 22px; }

.mb-curso-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.mb-curso-head h1 { margin: 0 0 4px; font-size: 27px; display: inline-block; box-shadow: inset 0 -11px 0 var(--butter); }
.mb-curso-pasos { display: grid; gap: 10px; }
.mb-curso-paso {
  display: flex; align-items: center; gap: 14px;
  background: var(--papel); border: var(--grueso); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--sombra);
}
.mb-curso-paso:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-curso-paso.es-hecho { background: var(--menta); }
.mb-curso-n {
  flex: none; width: 38px; height: 38px; border: var(--filete); border-radius: 9px;
  display: grid; place-items: center; background: var(--cielo);
  font-weight: 900; font-size: 16px;
}
.mb-curso-paso.es-hecho .mb-curso-n { background: var(--verde); color: #fff; }
.mb-curso-txt { flex: 1; min-width: 0; }
.mb-curso-txt strong { display: block; font-size: 17px; }
.mb-curso-txt p { margin: 2px 0 9px; font-size: 13px; color: var(--gris); }
.mb-curso-meta { display: block; margin-top: 5px; font-size: 11px; font-family: var(--mono); font-weight: 700; }
.mb-curso-ico { flex: none; }
@media (max-width: 520px) { .mb-curso-ico { display: none; } }

.mb-examen-caja {
  margin-top: 20px; padding: 20px; text-align: center;
  background: var(--butter); border: var(--grueso); border-radius: var(--r);
  box-shadow: var(--sombra);
}
.mb-examen-caja .mb-paso-ico { margin: 0 auto 11px; }
.mb-examen-caja strong { display: block; font-size: 19px; margin-bottom: 7px; }
.mb-examen-caja p { margin: 0 auto 15px; font-size: 15px; max-width: 46ch; }
.mb-examen-caja.es-cerrado { background: #efe8dd; box-shadow: none; }

/* ── El examen ───────────────────────────────────────────────────────────── */

.mb-ex-head { margin-bottom: 22px; }
.mb-ex-head h1 { margin: 0 0 4px; font-size: 27px; display: inline-block; box-shadow: inset 0 -11px 0 var(--cielo); }
.mb-ex-head p { margin: 0 0 9px; font-size: 14px; }
.mb-ex-preg {
  position: relative; background: #fff; border: var(--filete); border-radius: var(--r);
  padding: 18px 18px 18px 20px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.mb-ex-n {
  position: absolute; top: -12px; left: 16px;
  width: 28px; height: 28px; border: var(--filete); border-radius: 7px;
  display: grid; place-items: center; background: var(--cielo);
  font-weight: 900; font-size: 13px;
}
.mb-ex-preg .mb-quiz-preg { margin-top: 6px; }
.mb-ex-de { display: block; font-size: 11px; font-family: var(--mono); margin: -8px 0 12px; }
/* En el examen no se dice si vas bien: elegida es elegida, sin color de juicio. */
.mb-quiz-op.es-elegida { background: var(--cielo); box-shadow: 5px 5px 0 var(--tinta); }
.mb-ex-entregar { text-align: center; margin-top: 20px; }
.mb-ex-entregar p { margin: 0 0 10px; font-size: 14px; }
.mb-ex-fin-botones { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 18px; }

/* ── El certificado ──────────────────────────────────────────────────────────
   Papel: fondo blanco, doble filete y todo centrado. Es lo único del sitio que
   se imagina impreso, y se nota. */

.mb-cert {
  background: #fff; border: var(--grueso); border-radius: var(--r);
  padding: 34px 26px; text-align: center; box-shadow: var(--sombra-g);
  outline: 2px solid var(--tinta); outline-offset: -9px;
}
.mb-cert-cab { margin-bottom: 22px; }
.mb-cert-sello {
  height: 76px; width: 76px; border-radius: 26%; border: var(--filete);
  margin: 0 auto 14px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-cert h1 { margin: 12px 0 0; font-size: 26px; }
.mb-cert-otorga { margin: 0; font-size: 13px; color: var(--gris); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.mb-cert-nombre { display: block; font-size: 32px; margin: 8px 0 16px; box-shadow: inset 0 -12px 0 var(--butter); }
.mb-cert-texto { margin: 0 auto 24px; max-width: 46ch; font-size: 15px; }
.mb-cert-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 20px; }
.mb-cert-datos > div {
  border: var(--filete); border-radius: 9px; padding: 9px 15px; min-width: 110px;
  background: var(--papel);
}
.mb-cert-datos span { display: block; font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--gris); }
.mb-cert-datos strong { font-size: 17px; }
.mb-cert-codigo { font-family: var(--mono); letter-spacing: .04em; user-select: all; }
.mb-cert-nota { margin: 0; font-size: 12px; color: var(--gris); max-width: 44ch; margin-inline: auto; }

/* ── Pantalla pequeña ────────────────────────────────────────────────────────
   Va al final a propósito: la sección de iconos de arriba pone `inline-flex` en
   los mismos selectores, y si esto fuera antes, la cascada le daría la razón a
   ella y el menú de escritorio reaparecería en el móvil —desbordando la barra y
   sacando una barra de scroll horizontal en toda la página. */

@media (max-width: 600px) {
  .mb-topnav a:not(.mb-yo) { display: none; }
  .mb-tabbar { display: flex; }
  .mb-marca { font-size: 15px; }
  .mb-vista { padding: 18px 13px 100px; }
  .mb-hero h1 { font-size: 31px; }
  .mb-lec-cuerpo { padding: 20px 16px; }
  .mb-modal { padding: 16px; }
  .mb-panel-barra { top: 50px; }
  /* Con el pie de lección a dos botones y pantallas de 320 px, «Terminar
     módulo» no cabe en una línea: se apilan antes de que se parta la palabra. */
  .mb-lec-nav { flex-wrap: wrap; }
  .mb-lec-nav > * { min-width: 140px; }
  .mb-esc-head h1 { font-size: 22px; }
  .mb-esc-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mb-cert { padding: 24px 16px; }
  .mb-cert-nombre { font-size: 24px; }
}

/* ── La lista de cursos ──────────────────────────────────────────────────────
   Existe desde que hay más de uno: con uno solo, elegir habría sido un trámite.
   Las tarjetas son grandes porque la elección se hace una vez y decide el resto
   del recorrido. */

.mb-cursos-lista { display: grid; gap: 14px; }
.mb-curso-card {
  display: flex; align-items: center; gap: 16px;
  border: var(--grueso); border-radius: var(--r);
  padding: 18px; box-shadow: var(--sombra);
  transition: transform .12s, box-shadow .12s;
}
.mb-curso-card:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-g); }
.mb-curso-card.es-cielo { background: var(--cielo); }
.mb-curso-card.es-melon { background: var(--melon); }
.mb-curso-card.es-lila { background: var(--lila); }
.mb-curso-card-ico {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px;
  background: var(--papel); border: var(--filete); border-radius: 11px;
}
.mb-curso-card > div { flex: 1; min-width: 0; }
.mb-curso-card-sub {
  display: inline-block; font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--tinta); color: var(--papel); border-radius: 5px; padding: 2px 7px;
}
.mb-curso-card h2 { margin: 6px 0 4px; font-size: 21px; }
.mb-curso-card p { margin: 0 0 8px; font-size: 14px; }
.mb-curso-card-meta { font-size: 12px; font-family: var(--mono); font-weight: 700; }
.mb-curso-card-ir { flex: none; }
@media (max-width: 560px) { .mb-curso-card-ir { display: none; } }

/* Qué curso se está mirando, y cómo cambiarlo. */
.mb-curso-cual {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}

/* ── La barra, del color de su curso ─────────────────────────────────────────
   Con dos cursos que comparten casi todo el temario, saber en cuál estás sin
   leer nada evita estudiar el equivocado. */

.mb-topbar.es-maneja-bien      { background: var(--butter); }
.mb-topbar.es-maneja-bien-moto { background: var(--melon); }
.mb-topbar.es-maneja-bien-camion { background: var(--lila); }
.mb-topbar.es-maneja-bien-moto .mb-marca-logo { border-color: var(--tinta); }

/* ── El chat de preguntas ────────────────────────────────────────────────────
   Sin IA: las respuestas están escritas y el servidor las encuentra. Por eso el
   globo enseña el porcentaje de coincidencia — quien lee tiene derecho a saber
   cuánto se parecía su pregunta a la que sí tiene respuesta. */

/* El hueco de abajo es el alto de la caja pegajosa: sin él, la caja se sienta
   encima del último mensaje justo cuando acaba de llegar. */
.mb-chat-hilo { display: grid; gap: 16px; margin: 18px 0 22px; padding-bottom: 84px; }
.mb-chat-yo {
  justify-self: end; max-width: 80%;
  background: var(--cielo); border: var(--filete); border-radius: 12px 12px 3px 12px;
  padding: 11px 14px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-chat-yo p { margin: 0; font-size: 15px; font-weight: 600; }
.mb-chat-mr { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; }
.mb-chat-cara { height: 62px; flex: none; }
.mb-chat-globo {
  flex: 1; min-width: 0;
  background: var(--papel); border: var(--filete); border-radius: 12px 12px 12px 3px;
  padding: 13px 15px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-chat-globo.ok { background: var(--papel); }
.mb-chat-globo.no { background: var(--melon); }
.mb-chat-globo p { margin: 0 0 8px; font-size: 15px; }
.mb-chat-globo p:last-child { margin-bottom: 0; }
.mb-chat-eco {
  font-size: 11px !important; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gris);
}
.mb-chat-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mb-chat-conf { font-size: 11px; font-family: var(--mono); color: var(--gris); }
.mb-chat-otras { margin-top: 11px; border-top: var(--filete); padding-top: 9px; }
.mb-chat-otras > span { display: block; font-size: 12px; color: var(--gris); margin-bottom: 6px; }
.mb-chat-otras .mb-chip { margin: 0 6px 6px 0; text-align: left; }
.mb-chat-error { color: var(--rojo); }
.mb-chat-ejemplos { margin: 18px 0; }
.mb-chat-ejemplos > span { display: block; margin-bottom: 8px; font-size: 13px; }
.mb-chat-ejemplos .mb-chip { margin: 0 7px 7px 0; text-align: left; }
.mb-chat-caja {
  position: sticky; bottom: 78px; display: flex; gap: 9px;
  background: var(--papel); border: var(--grueso); border-radius: var(--r);
  padding: 9px; box-shadow: var(--sombra);
}
.mb-chat-caja .mb-input { border-width: 0; box-shadow: none; }
.mb-chat-caja .mb-input:focus { box-shadow: none; }
.mb-chat-caja .mb-btn { flex: none; }
@media (max-width: 600px) { .mb-chat-caja { bottom: 66px; } }

/* ── El perfil y su línea de tiempo ──────────────────────────────────────── */

.mb-perfil .mb-curso-yo { align-items: center; }
.mb-perfil .mb-curso-yo .mb-btn { flex: none; }
@media (max-width: 600px) {
  .mb-perfil .mb-curso-yo { flex-wrap: wrap; }
  .mb-perfil .mb-curso-yo .mb-btn { width: 100%; }
}

.mb-linea { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
/* El hilo vertical que une los hitos. Va en el `::before` de la lista y no en
   cada hito, para que no se corte entre uno y otro. */
.mb-linea::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 3px; background: var(--tinta); border-radius: 2px;
}
.mb-hito { position: relative; padding: 0 0 18px 20px; }
.mb-hito-punto {
  position: absolute; left: -26px; top: 0;
  width: 26px; height: 26px; border: var(--filete); border-radius: 50%;
  display: grid; place-items: center; background: var(--papel);
}
.mb-hito.es-certificado .mb-hito-punto { background: var(--menta); }
.mb-hito.es-alta .mb-hito-punto { background: var(--cielo); }
.mb-hito-fecha {
  display: block; font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gris);
}
.mb-hito-txt strong { display: block; font-size: 15px; margin-top: 2px; }
.mb-hito-txt p { margin: 3px 0 0; font-size: 13px; color: var(--gris); }

/* ── La bandeja de preguntas por revisar ─────────────────────────────────── */

.mb-revisar-lista { display: grid; gap: 11px; margin-top: 16px; }
.mb-revisar {
  background: var(--papel); border: var(--filete); border-radius: var(--r);
  padding: 14px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-revisar-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mb-revisar-cab strong { flex: 1; min-width: 180px; font-size: 15px; }
.mb-revisar-cab .mb-muted { font-size: 11px; font-family: var(--mono); }
.mb-revisar-veces {
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  background: var(--tinta); color: var(--papel); border-radius: 5px; padding: 2px 7px;
}
.mb-revisar-pista {
  display: flex; align-items: center; gap: 6px;
  margin: 9px 0 0; font-size: 12px; color: var(--gris);
}
.mb-revisar-acciones { display: flex; gap: 16px; margin-top: 10px; border-top: var(--filete); padding-top: 8px; }
.mb-revisar-form { margin-top: 12px; border-top: var(--filete); padding-top: 12px; }

/* ── Dónde continuar ─────────────────────────────────────────────────────────
   El repaso va primero a propósito: quien llega al perfil ya estudió algo, y su
   problema no es que le falte materia, es que se le olvida. */

.mb-seguir { margin: 26px 0; }
.mb-esc-t.es-butter .mb-esc-t-ico { background: var(--butter); }

/* ── Mr. Driver pensando ─────────────────────────────────────────────────────
   El buscador contesta en un milisegundo, y una respuesta instantánea se lee
   como si no hubiera pasado nada. Los puntos ocupan el sitio de la respuesta
   durante medio segundo, así que cuando llega no salta nada. */

.mb-chat-globo.pensando {
  display: flex; align-items: center; gap: 6px;
  width: fit-content; padding: 16px 18px;
}
.mb-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tinta); animation: mb-late 1s ease-in-out infinite;
}
.mb-punto:nth-child(2) { animation-delay: .16s; }
.mb-punto:nth-child(3) { animation-delay: .32s; }
@keyframes mb-late {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}
/* Quien haya pedido menos movimiento no necesita tres puntos saltando. */
@media (prefers-reduced-motion: reduce) {
  .mb-punto { animation: none; opacity: .5; }
}

/* ── Los manuales del INTRANT ────────────────────────────────────────────────
   Son la fuente: el curso explica lo que dicen. Que estén a un clic es lo que
   separa un material de estudio de una colección de afirmaciones. */

.mb-manuales-lista { display: grid; gap: 14px; }
.mb-manual {
  border: var(--grueso); border-radius: var(--r);
  padding: 18px; box-shadow: var(--sombra);
}
.mb-manual.es-cielo { background: var(--cielo); }
.mb-manual.es-melon { background: var(--melon); }
.mb-manual.es-lila  { background: var(--lila); }
.mb-manual-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mb-manual-cat {
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--tinta); color: var(--papel); border-radius: 5px; padding: 3px 9px;
}
.mb-manual-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--papel); border: var(--filete); border-radius: 10px;
}
.mb-manual h2 { margin: 0 0 5px; font-size: 18px; }
.mb-manual-sub { margin: 0 0 8px; font-size: 14px; }
.mb-manual-meta { margin: 0 0 14px; font-size: 12px; font-family: var(--mono); font-weight: 700; }
.mb-manual-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* El aviso de derechos no es letra pequeña escondida: el manual es de otro y
   eso se dice donde se ve. */
.mb-manual-aviso {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 22px; padding: 13px 15px; font-size: 13px;
  background: var(--papel); border: var(--filete); border-radius: var(--r);
}
.mb-manual-aviso svg { flex: none; margin-top: 2px; }

/* ── Los documentos ──────────────────────────────────────────────────────────
   El libro y los manuales van juntos —son la fuente— y en bloques separados,
   porque no son del mismo dueño. Esa diferencia es lo único que no se puede
   borrar aquí. */

.mb-docs-lista { display: grid; gap: 14px; margin-bottom: 8px; }
.mb-doc { border: var(--grueso); border-radius: var(--r); padding: 18px; box-shadow: var(--sombra); }
.mb-doc.es-cielo { background: var(--cielo); }
.mb-doc.es-melon { background: var(--melon); }
.mb-doc.es-lila  { background: var(--lila); }
/* El libro de la casa lleva el amarillo de la marca: se distingue de un vistazo
   de lo que es de otro. */
.mb-doc.es-libro { background: var(--butter); }
.mb-doc-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mb-doc-etq {
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--tinta); color: var(--papel); border-radius: 5px; padding: 3px 9px;
}
.mb-doc-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--papel); border: var(--filete); border-radius: 10px;
}
.mb-doc h3 { margin: 0 0 5px; font-size: 18px; }
.mb-doc-sub { margin: 0 0 8px; font-size: 14px; }
.mb-doc-meta { margin: 0 0 8px; font-size: 12px; font-family: var(--mono); font-weight: 700; }
.mb-doc-nota { margin: 0 0 14px; font-size: 12px; color: var(--gris); }
.mb-doc-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── El libro dentro de la lección ───────────────────────────────────────────
   Va plegado: quien solo quiere la regla ya la leyó arriba. Quien quiere que se
   la cuenten, abre. */

.mb-libro { margin-top: 24px; border-top: var(--filete); padding-top: 16px; }
.mb-libro-cab {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--butter); border: var(--filete); border-radius: var(--r);
  padding: 10px 13px; cursor: pointer; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-libro-cab:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.mb-libro-cara { height: 44px; width: 44px; border-radius: 26%; border: var(--filete); flex: none; }
.mb-libro-txt { flex: 1; min-width: 0; }
.mb-libro-etq {
  display: block; font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.mb-libro-txt strong { display: block; font-size: 15px; }
.mb-libro-txt .mb-muted { font-size: 11px; font-family: var(--mono); }
.mb-libro-cuerpo {
  margin: 14px 0 10px; padding: 16px 18px;
  background: #fff; border: var(--filete); border-radius: var(--r);
}
.mb-libro-cuerpo h3 { margin: 0 0 10px; font-size: 17px; }
.mb-libro-cuerpo p { font-size: 15px; }

/* Los apartes del libro. En su maqueta se distinguen por color y sitio en la
   página; aquí, incrustados, van compactos: tres frases lapidarias seguidas
   gritan todas a la vez y no se lee ninguna. */
.mb-libro-aparte {
  margin: 14px 0; padding: 11px 14px;
  background: var(--butter); border-left: 4px solid var(--tinta); border-radius: 0 8px 8px 0;
}
.mb-libro-aparte p { margin: 0 0 6px; font-size: 14px; }
.mb-libro-aparte p:last-child { margin-bottom: 0; }

/* ── El lector del libro ─────────────────────────────────────────────────────
   El índice se agrupa por cinturón —no por capítulo— porque el cinturón es la
   unidad del método: dice hasta dónde llevar cada tarea, no en qué orden
   leerla. Cada grupo lleva su color. */

.mb-libro-resumen { font-family: var(--mono); font-size: 12px; margin: 0 0 18px; }
.mb-libro-grupo {
  border: var(--filete); border-radius: var(--r);
  padding: 14px; margin-bottom: 14px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-libro-grupo.es-butter { background: var(--butter); }
.mb-libro-grupo.es-melon  { background: var(--melon); }
.mb-libro-grupo.es-cielo  { background: var(--cielo); }
.mb-libro-grupo.es-lila   { background: var(--lila); }
.mb-libro-grupo.es-papel  { background: var(--papel); }
.mb-libro-filas { display: grid; gap: 5px; }
.mb-libro-fila {
  display: flex; align-items: center; gap: 11px;
  background: var(--papel); border: var(--filete); border-radius: 7px;
  padding: 7px 11px; font-size: 14px;
}
.mb-libro-fila:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--tinta); }
.mb-libro-num { font-family: var(--mono); font-size: 11px; font-weight: 700; min-width: 22px; color: var(--gris); }
.mb-libro-tit { flex: 1; min-width: 0; font-weight: 600; }
.mb-libro-pal { font-family: var(--mono); font-size: 11px; color: var(--gris); white-space: nowrap; }
@media (max-width: 520px) { .mb-libro-pal { display: none; } }

/* La hoja: papel blanco y columna estrecha. Es lo único del sitio que se lee
   seguido, no a saltos, y la medida de línea importa más que el ancho. */
.mb-libro-hoja {
  background: #fff; border: var(--grueso); border-radius: var(--r);
  padding: 28px 26px; box-shadow: var(--sombra-g); margin: 16px 0;
}
.mb-libro-cinturon {
  display: inline-block; font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--tinta); color: var(--papel); border-radius: 5px; padding: 3px 9px;
}
.mb-libro-hoja h1 { font-size: 27px; margin: 12px 0 18px; }
.mb-libro-hoja .mb-html { max-width: 62ch; }
.mb-libro-hoja .mb-html p { font-size: 16px; line-height: 1.62; }
.mb-libro-lecciones {
  margin-top: 24px; border-top: var(--filete); padding-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.mb-libro-lecciones > span { font-size: 13px; width: 100%; }

/* La portada al lado y no de fondo: es la tapa de un libro, y una tapa se
   reconoce entera. De fondo, con texto encima, no se reconoce ninguna. */
.mb-doc { display: flex; gap: 18px; align-items: flex-start; }
.mb-doc-txt { flex: 1; min-width: 0; }
.mb-doc-portada { flex: none; display: block; width: 124px; }
.mb-doc-portada img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  border: var(--filete); box-shadow: 3px 3px 0 var(--tinta);
}
.mb-doc-portada:hover img { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
@media (max-width: 560px) {
  .mb-doc { flex-direction: column; }
  .mb-doc-portada { width: 96px; }
}

/* Las listas de chequeo del libro: cada punto con su porqué, que es lo que las
   hace útiles y no un adorno. */
.mb-checklist { list-style: none; margin: 16px 0; padding: 0; }
.mb-checklist li { position: relative; padding: 8px 0 8px 30px; font-size: 15px; border-bottom: 1px solid var(--linea, rgba(11,42,77,.12)); }
.mb-checklist li:last-child { border-bottom: 0; }
.mb-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 21px; height: 21px; border: var(--filete); border-radius: 5px;
  display: grid; place-items: center; background: var(--menta);
  font-size: 11px; font-weight: 900;
}
.mb-libro-fig { margin: 20px 0; }
.mb-libro-fig img {
  display: block; width: 100%; height: auto;
  border: var(--filete); border-radius: 9px; box-shadow: 3px 3px 0 var(--tinta);
}
.mb-libro-fig figcaption { margin-top: 8px; font-size: 13px; color: var(--gris); }
.mb-pull cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; font-weight: 400; }
.mb-libro-hoja h4 { margin: 18px 0 4px; font-size: 15px; }