/* educa · tema claro, tipo campus virtual: fondo gris muy suave, tarjetas blancas, cabecera blanca.
   Paleta de NGV (docs/marca-ngv.md): el naranja #ee7221 solo en superficies y detalles; como texto, #ad5318. */
:root {
  --fondo: #f5f6f8; --blanco: #ffffff; --linea: #e3e6eb; --linea-2: #eef0f3;
  --tinta: #1b2844; --suave: #5b6475; --acento: #ad5318; --naranja: #ee7221; --azul: #211590;
  --crema: #fff6ee; --crema-borde: #f6d9c2; --pendiente: #fff1a8;
  --sombra: 0 1px 2px rgba(27, 40, 68, .06), 0 1px 1px rgba(27, 40, 68, .04);
  --sombra-alta: 0 10px 30px rgba(27, 40, 68, .14);
  --cabecera: 64px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --letra-titulos: var(--letra);
  --bien: #e6f2e3; --bien-borde: #b9d8b3; --fallo: #fbe9e4; --fallo-borde: #efc3b6;
  color-scheme: light;
}

/* ---- Estilo «editorial», uno de los que cada persona elige en la cabecera: lino, terracota y salvia, Fraunces en
   los títulos e Inter en el texto. Las fuentes se sirven desde aquí (src/fuentes, licencia OFL), no desde Google Fonts. ---- */
@font-face { font-family: "Fraunces"; src: url("/fuentes/fraunces.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fuentes/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
[data-tema="editorial"] {
  --fondo: #f6f1ea; --blanco: #fffdf9; --linea: #e4dacd; --linea-2: #efe7dc;
  --tinta: #2b2622; --suave: #685e55; --acento: #9a4e2b; --naranja: #c06a42; --azul: #8a4325;
  --crema: #f6e6db; --crema-borde: #e8cbb8; --salvia: #5f6f4d;
  --sombra: 0 1px 2px rgba(43, 38, 34, .05), 0 6px 24px rgba(43, 38, 34, .05);
  --sombra-alta: 0 10px 30px rgba(43, 38, 34, .12);
  --letra: "Inter", system-ui, -apple-system, sans-serif; --letra-titulos: "Fraunces", Georgia, serif;
}
[data-tema="editorial"] :is(h1, h2, h3, .anverso) { font-weight: 500; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 16px); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 17px/1.65 var(--letra); }
h1, h2, h3, .anverso { font-family: var(--letra-titulos); }
a { color: var(--azul); text-underline-offset: 2px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 8px; background: var(--blanco); padding: 8px; z-index: 30; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* ---- Cabecera ---- */
.top { background: var(--blanco); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--cabecera); }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca img { display: block; height: auto; }
.marca .logo-iso { display: none; }
.top nav > ul { display: flex; gap: 4px 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--suave); text-decoration: none; font-weight: 500; }
.top nav a:hover { color: var(--tinta); }
.lectura { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.lectura span { display: block; height: 100%; width: 0; background: var(--naranja); }

/* ---- Desplegables de la cabecera: idioma y usuario ---- */
.desplegable { position: relative; }
.desplegable summary { list-style: none; cursor: pointer; }
.desplegable summary::-webkit-details-marker { display: none; }
.idioma summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--suave); font-weight: 500; }
.idioma summary:hover, .idioma[open] summary { color: var(--tinta); }
.flecha { display: block; transform-origin: 50% 50%; transform-box: fill-box; transition: transform .15s; }
.desplegable[open] .flecha { transform: rotate(180deg); }
.idioma .menu { width: 180px; padding: 6px; list-style: none; margin: 0; }
.idioma .menu a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.idioma .menu a:hover { background: var(--fondo); }
.idioma .menu a[aria-current="true"] { font-weight: 700; }
.idioma .menu a[aria-current="true"]::after { content: "✓"; color: var(--acento); }

/* ---- Estilo visual: el desplegable de la paleta ---- */
.tema summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--suave); }
.tema summary:hover, .tema[open] summary { color: var(--tinta); }
.tema .menu { width: 210px; padding: 6px; list-style: none; margin: 0; }
.menu-titulo { padding: 4px 12px 6px; font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.tema .menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
                     background: none; color: var(--tinta); font-weight: 500; text-align: left; }
.tema .menu button:hover { background: var(--fondo); }
.tema .menu button[aria-current="true"] { font-weight: 700; }
.tema .menu button[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--acento); }
.muestra { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linea); }

/* ---- Menú de usuario ---- */
.usuario summary { display: flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--naranja); color: #11182a; display: grid; place-items: center; font-weight: 700; }
.usuario[open] .avatar { box-shadow: 0 0 0 3px var(--crema), 0 0 0 5px var(--naranja); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); width: min(280px, calc(100vw - 32px)); background: var(--blanco); border: 1px solid var(--linea);
        border-radius: 12px; box-shadow: var(--sombra-alta); padding: 14px; }
.quien { margin: 0 0 12px; font-size: .92rem; overflow-wrap: anywhere; }
.quien span { display: block; font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.menu button { width: 100%; }

/* ---- Botones ---- */
button, .boton { font: inherit; min-height: 44px; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--tinta); background: var(--tinta); color: var(--blanco); cursor: pointer; }
.boton { display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; }
button.sec { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
button.sec:hover { border-color: var(--tinta); }
#sesion > button { padding: 6px 16px; }

/* ---- Tipografía y bloques ---- */
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 2em 0 .6em; }
h3 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
.meta { color: var(--suave); font-size: .9rem; }
.antetitulo { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .8rem; color: var(--acento); }
.entrada { font-size: 1.08rem; color: var(--suave); margin: 0 0 14px; }
main { padding: 20px 0 8px; }
.panel, .leccion, .hero { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); padding: 28px 32px; }
@media (max-width: 600px) { .panel, .leccion, .hero { padding: 20px 16px; border-radius: 12px; } }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0; }
.chips li { background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; padding: 3px 12px; font-size: .85rem; color: var(--suave); }
.chips strong { color: var(--tinta); }

/* ---- Portada ---- */
.hero { background: linear-gradient(120deg, var(--blanco) 50%, var(--crema)); padding: 40px; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); margin-bottom: 0; }
.hero p:last-child { max-width: 60ch; margin-bottom: 0; }
.lema { font-size: 1.25rem; font-weight: 600; color: var(--acento); margin: 0 0 10px; }
.cursos { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.curso { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.curso:hover { border-color: var(--crema-borde); box-shadow: var(--sombra-alta); }
.curso > a { display: block; color: inherit; text-decoration: none; padding-bottom: 6px; }
.curso > a::before { content: ""; display: block; height: 120px; border-bottom: 1px solid var(--linea-2);
  background: url("/iso.svg") 24px center / 64px no-repeat, radial-gradient(circle at 85% 30%, #ffe2c8 0 22%, transparent 23%),
              radial-gradient(circle at 70% 90%, #ffeedd 0 18%, transparent 19%), linear-gradient(120deg, var(--crema), #fffaf5); }
.con-portada > a::before { display: none; }
.portada-curso { display: block; height: 120px; border-bottom: 1px solid var(--linea-2); overflow: hidden; }
.portada-curso svg { display: block; width: 100%; height: 100%; }
.curso h2 { margin: 18px 24px 6px; font-size: 1.3rem; }
.curso p { margin: 0 24px 8px; color: var(--suave); }
.curso .chips { margin: 12px 24px 14px; }
.curso .progreso { margin: 0 24px 18px; padding: 0; }

/* ---- Página de curso ---- */
.cabecera-curso { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .cabecera-curso { grid-template-columns: minmax(0, 1fr) 320px; } }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.cifras div { background: var(--crema); border: 1px solid var(--crema-borde); border-radius: 12px; padding: 14px 16px; }
.cifras dt { font-size: 1.5rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.cifras dd { margin: 2px 0 0; color: var(--suave); font-size: .88rem; }
.modulos { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .modulos { grid-template-columns: 1fr 1fr; } }
.modulo { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.modulo > a, .modulo > div { display: flex; gap: 14px; padding: 18px; color: inherit; text-decoration: none; flex: 1; }
.modulo:not(.vacio):hover { border-color: var(--naranja); }
.modulo.vacio { background: transparent; border-style: dashed; box-shadow: none; }
.modulo.vacio strong, .modulo.vacio .desc { color: var(--suave); }
.num { flex: none; min-width: 36px; padding: 0 5px; height: 36px; border-radius: 10px; background: var(--crema); color: var(--acento); display: grid; place-items: center; font-weight: 800; border: 1px solid var(--crema-borde); }
.vacio .num { background: var(--linea-2); color: var(--suave); border-color: var(--linea); }
.desc { display: block; color: var(--suave); font-size: .95rem; margin-top: 2px; }
.modulo .meta { display: block; margin-top: 8px; font-weight: 600; }
.progreso { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .88rem; color: var(--suave); }
.modulo .progreso { padding: 0 18px 16px; }
.barra { flex: 1; height: 8px; border-radius: 4px; background: var(--linea-2); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--naranja); border-radius: 4px; }
.enlaces { display: flex; gap: 20px; flex-wrap: wrap; margin: 6px 0 0; }
.enlaces a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.modulos .bloque { grid-column: 1 / -1; }
.modulos .bloque h2 { margin: 18px 0 0; font-size: 1.2rem; color: var(--acento); }
.modulos .bloque:first-child h2 { margin-top: 0; }
.sello { display: inline-block; margin-left: 6px; padding: 0 9px; border-radius: 999px; background: var(--bien); border: 1px solid var(--bien-borde); font-size: .8rem; font-weight: 700; vertical-align: 2px; }
.modulo.superado { border-color: var(--bien-borde); }
.titulo-cursos { margin: 28px 0 0; font-size: 1.3rem; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }

/* ---- Migas ---- */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 6px; padding: 0; margin: 0 0 6px; font-size: .9rem; }
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--suave); }
.migas a { display: inline-flex; min-height: 44px; align-items: center; color: var(--suave); }

/* ---- Índice lateral ---- */
.con-indice { display: block; }
.principal { min-width: 0; }
.indice { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; font-size: .93rem; }
.indice-cab { position: relative; padding: 18px 18px 14px; border-bottom: 1px solid var(--linea-2); }
.indice-curso { display: block; font-weight: 700; color: var(--tinta); text-decoration: none; margin-bottom: 10px; line-height: 1.35; padding-right: 36px; }
.indice-cab .progreso { padding: 0; }
.indice-modulos, .lecciones-indice, .apartados { list-style: none; margin: 0; padding: 0; }
.indice-modulos { padding: 8px; }
.indice-modulos > li > details > summary, .indice-modulos .mod { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-weight: 600; line-height: 1.3; }
.indice-modulos summary { list-style: none; }
.indice-modulos summary::-webkit-details-marker { display: none; }
.indice-modulos summary::after { content: "▸"; margin-left: auto; color: var(--suave); transition: transform .15s; }
.indice-modulos details[open] > summary::after { transform: rotate(90deg); }
.indice-modulos summary:hover { background: var(--fondo); }
.indice-modulos .num { min-width: 26px; padding: 0 3px; height: 26px; border-radius: 7px; font-size: .78rem; }
.indice-modulos .vacio .mod { color: var(--suave); font-weight: 500; min-height: 40px; }
.lecciones-indice { margin: 2px 0 8px 22px; border-left: 2px solid var(--linea-2); }
.lecciones-indice a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--tinta); text-decoration: none; line-height: 1.35; }
.lecciones-indice a:hover { background: var(--fondo); }
.lecciones-indice .presentacion a { color: var(--suave); }
.lecciones-indice li.leida > a::after { content: "✓"; margin-left: auto; padding-left: 8px; color: var(--acento); font-weight: 700; }
.lecciones-indice .actual > a { border-left-color: var(--naranja); background: var(--crema); font-weight: 700; }
.apartados { margin: 2px 0 8px 14px; }
.apartados a { display: block; min-height: 0; padding: 4px 10px; font-size: .86rem; color: var(--suave); border-left: 0; }
.apartados a.aqui { color: var(--acento); font-weight: 700; }
.abrir-indice { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.cerrar-indice { position: absolute; right: 10px; top: 10px; width: 44px; padding: 0; font-size: 1.4rem; line-height: 1; }

@media (min-width: 1024px) {
  .con-indice { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
  .indice { position: sticky; top: calc(var(--cabecera) + 16px); max-height: calc(100vh - var(--cabecera) - 32px); overflow: auto; }
  .abrir-indice, .cerrar-indice { display: none; }
}
@media (max-width: 1023px) {
  .indice { position: fixed; z-index: 25; left: 0; top: 0; bottom: 0; width: min(360px, 88vw); border-radius: 0 16px 16px 0; overflow: auto;
            transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--sombra-alta); visibility: hidden; }
  .indice.abierto { transform: none; visibility: visible; }
  body.indice-abierto::after { content: ""; position: fixed; inset: 0; background: rgba(17, 24, 42, .35); z-index: 20; }
}
@media (prefers-reduced-motion: reduce) { .indice { transition: none; } }

/* ---- Módulo: vídeo resumen ---- */
.video-modulo { margin: 20px 0; }
.video-modulo video { display: block; width: 100%; height: auto; border-radius: 14px; background: #242321; box-shadow: var(--sombra); }
.video-modulo figcaption { color: var(--suave); font-size: .9rem; margin-top: 8px; }

/* ---- Módulo: pasos ---- */
.pasos { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.pasos li { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); }
.pasos li:hover { border-color: var(--naranja); }
.pasos a { display: flex; gap: 16px; padding: 18px; color: inherit; text-decoration: none; }
.paso { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--naranja); color: var(--acento); display: grid; place-items: center; font-weight: 800; }
.pasos li.leida .paso { background: var(--naranja); color: #11182a; }
.pasos .meta { display: block; margin-top: 6px; }

/* ---- Lección ---- */
.cab-leccion { border-bottom: 1px solid var(--linea-2); padding-bottom: 10px; margin-bottom: 8px; }
.texto > p, .texto > ul, .texto > ol, .texto section > p, .texto section > ul { max-width: 75ch; }
.texto h2 { scroll-margin-top: calc(var(--cabecera) + 16px); }
.texto > h2::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--naranja); margin-bottom: 12px; }
.leccion .idea { font-size: 1.12rem; background: var(--crema); border-left: 4px solid var(--naranja); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 22px 0; max-width: none; }
.tabla { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--linea); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { border-bottom: 1px solid var(--linea); padding: 10px 12px; text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { background: var(--fondo); font-weight: 700; }
tbody tr:nth-child(even) td { background: #fafbfc; }
figure { margin: 1.6em 0; background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 18px; }
figure svg { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
figcaption { color: var(--suave); font-size: .9rem; margin-top: 10px; }
.caso, .sistemas { border-radius: 14px; padding: 6px 22px 12px; margin: 2em 0; }
.caso { background: #f3f6fb; border: 1px solid #dfe6f2; }
.sistemas { background: var(--crema); border: 1px solid var(--crema-borde); }
.caso h2, .sistemas h2 { margin-top: .8em; font-size: 1.2rem; }
/* Ejemplos de mensajes (HL7, FHIR…): el bloque se desplaza por dentro y el código suelto parte la línea, para
   que una línea larga no haga desplazar la página entera en el móvil */
.texto pre { max-width: 100%; overflow-x: auto; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; font-size: .85rem; line-height: 1.5; }
.texto code { overflow-wrap: anywhere; }
.texto pre code { overflow-wrap: normal; }
sup.cita a { text-decoration: none; font-weight: 700; padding: 0 2px; font-size: .8em; }
mark.pendiente { background: var(--pendiente); color: inherit; padding: 0 3px; border-radius: 3px; }
.marcar { margin: 2em 0 1em; }
.marcar button[aria-pressed="true"] { background: var(--blanco); color: var(--acento); border-color: var(--acento); }
.tarjetas { border-top: 1px solid var(--linea-2); }
.tarjetas dl { display: grid; gap: 10px; margin: 6px 0 12px; }
@media (min-width: 760px) { .tarjetas dl { grid-template-columns: 1fr 1fr; } }
.tarjetas dl > div { background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; }
dt { font-weight: 700; }
dd { margin: 2px 0 0; }
.fuentes h2 { font-size: 1.1rem; }
.fuentes ol { padding-left: 1.4em; font-size: .9rem; color: var(--suave); }
.fuentes li { margin: 6px 0; overflow-wrap: anywhere; scroll-margin-top: calc(var(--cabecera) + 16px); }
.fuentes li:target { background: var(--pendiente); }
.vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 0; }
.vecinas a { display: block; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 14px; text-decoration: none; background: var(--blanco); box-shadow: var(--sombra); font-weight: 600; color: var(--tinta); }
.vecinas a:hover { border-color: var(--naranja); }
.vecinas a span { display: block; font-size: .85rem; color: var(--acento); font-weight: 700; margin-bottom: 2px; }
.vecinas .sig { grid-column: 2; text-align: right; }
@media (max-width: 600px) { .vecinas { grid-template-columns: 1fr; } .vecinas .sig { grid-column: 1; } }

/* ---- Glosario y repaso ---- */
.glosario { margin: 20px 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .glosario { grid-template-columns: 1fr 1fr; } }
.glosario > div { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; }
#repaso { margin: 20px 0; }
.tarjeta { max-width: 640px; margin: 0 auto 16px; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); box-shadow: var(--sombra-alta); padding: 32px 24px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.anverso { font-size: 1.6rem; font-weight: 800; margin: 0; }
.reverso { margin: 16px 0 0; }
.botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#repaso > .meta { text-align: center; }
.aviso-nube { background: var(--pendiente); padding: 8px 12px; border-radius: 8px; }
.prosa { max-width: 820px; }

/* ---- Pantalla de acceso: en las páginas de curso, sin sesión solo se ve esto. Va en el HTML; app.js pone .sin-sesion ---- */
body[data-privada]:not(.con-sesion) #contenido > :not(.puerta) { display: none; }
.puerta { display: none; }
body.sin-sesion .puerta { display: grid; }
.puerta { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; margin: 4px 0 16px; padding: 48px; border-radius: 24px;
          border: 1px solid var(--crema-borde); box-shadow: var(--sombra-alta); overflow: hidden;
          background: radial-gradient(circle at 96% 4%, #ffe2c8 0 140px, transparent 141px), radial-gradient(circle at 2% 98%, #ffeedd 0 110px, transparent 111px),
                      linear-gradient(135deg, var(--blanco) 35%, var(--crema)); }
@media (min-width: 960px) { .puerta { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 56px 64px; min-height: calc(100vh - var(--cabecera) - 64px); } }
@media (max-width: 600px) { .puerta { padding: 28px 18px; border-radius: 18px; } }
.puerta h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 14px; }
.puerta .entrada { font-size: 1.15rem; max-width: 46ch; }
.ventajas { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 16px; }
.ventajas li { display: grid; grid-template-columns: 30px 1fr; gap: 0 14px; }
.ventajas li::before { content: "✓"; grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--naranja); color: #11182a; display: grid; place-items: center; font-weight: 800; }
.ventajas span { color: var(--suave); font-size: .95rem; }
.puerta .cifras { grid-template-columns: repeat(3, 1fr); max-width: 440px; }
.puerta .cifras div { background: var(--blanco); }
.puerta-lado { display: grid; gap: 20px; }
.puerta-arte svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.acceso { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 26px; box-shadow: var(--sombra-alta); text-align: center; max-width: 440px; width: 100%; margin: 0 auto; }
.acceso h2 { margin: 0 0 6px; font-size: 1.35rem; }
.acceso p { margin: 0 0 14px; color: var(--suave); }
.acceso button.google { width: 100%; justify-content: center; font-weight: 600; }
.acceso .meta { margin: 0; }
/* En móvil, el botón de acceso sube justo debajo de la entradilla: título → entrar → ventajas → cifras → ilustración */
@media (max-width: 959px) {
  .puerta { gap: 0; }
  .puerta-texto, .puerta-lado { display: contents; }
  .puerta .antetitulo, .puerta h1, .puerta .entrada { order: 1; }
  .acceso { order: 2; margin: 8px 0 4px; }
  .ventajas { order: 3; }
  .puerta .cifras { order: 4; }
  .puerta-arte { order: 5; margin-top: 24px; }
  .puerta-arte svg { max-width: 360px; }
}
button.google { color: var(--tinta); border-color: var(--linea); padding-left: 48px;
                background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.6 5.4 2.6 13.2l7.9 6.2C12.4 13.7 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.6c0-1.6-.1-3.1-.4-4.6H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.8c4.3-4 6.9-9.9 6.9-17.1z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.6c-.5-1.4-.8-3-.8-4.6s.3-3.2.8-4.6l-7.9-6.2C1 16.5 0 20.1 0 24s1 7.5 2.6 10.8l7.9-6.2z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.4-5.8c-2.1 1.4-4.8 2.2-8.5 2.2-6.3 0-11.6-4.2-13.5-10l-7.9 6.2C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") 16px center / 20px no-repeat; }
button.google:hover { border-color: var(--tinta); }

footer { margin-top: 48px; padding: 18px 0 32px; color: var(--suave); font-size: .9rem; border-top: 1px solid var(--linea); background: var(--blanco); }
footer p { max-width: 90ch; }
footer a { display: inline-flex; min-height: 44px; align-items: center; color: var(--suave); }
@media (max-width: 420px) { .top nav > ul { gap: 4px 12px; } .marca .logo-completo { display: none; } .marca .logo-iso { display: block; } }

/* ---- Siglas: subrayado punteado y burbuja con la definición (app.js) ---- */
abbr.sigla { text-decoration: underline dotted var(--acento); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; }
tspan.sigla { text-decoration: underline; cursor: help; font-weight: 700; }
.pop-sigla { position: absolute; z-index: 40; max-width: min(340px, calc(100vw - 16px)); background: var(--tinta); color: var(--blanco);
             font-size: .9rem; line-height: 1.5; padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra-alta); }
.pop-sigla strong { color: #ffd2ad; margin-right: 4px; }

/* ---- Test (lecciones con «preguntas»): cada respuesta se guarda sola y se corrige al responder ---- */
.preguntas { border-top: 1px solid var(--linea-2); margin-top: 2em; }
.pregunta { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 18px 16px; margin: 0 0 14px; background: var(--blanco); min-width: 0; }
.pregunta legend { font-weight: 700; padding: 0 6px; margin-left: -6px; }
.pregunta .n { color: var(--acento); }
.opciones { display: grid; gap: 2px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.opcion:hover { background: var(--fondo); }
.opcion input { flex: none; margin: .3em 0 0; width: 18px; height: 18px; accent-color: var(--naranja); }
.correccion { display: none; margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; }
.acierto .correccion, .fallo .correccion { display: block; }
.acierto .correccion { background: var(--bien); }
.fallo .correccion { background: var(--fallo); }
.acierto .ko, .fallo .ok { display: none; }
.acierto { border-color: var(--bien-borde); }
.fallo { border-color: var(--fallo-borde); }
.nota { font-weight: 700; padding: 12px 16px; border-radius: 10px; background: var(--fallo); border: 1px solid var(--fallo-borde); }
.nota.superada { background: var(--bien); border-color: var(--bien-borde); }

/* ---- Revisión y envío al tutor (página del módulo) ---- */
.envio { margin: 20px 0; }
.envio h2 { margin-top: 0; }
.estado-envio { padding-left: 1.2em; }
.envio .botones { justify-content: flex-start; }
.aviso-envio { background: var(--bien); padding: 8px 12px; border-radius: 8px; }

/* ---- Clases de contenido del curso de interiorismo (tools/formato-leccion.md) ---- */
.practica, .entrega { border-radius: 14px; padding: 6px 20px 8px; margin: 1.6em 0; }
.practica { background: var(--crema); border: 1px solid var(--crema-borde); border-left: 4px solid var(--naranja); }
.entrega { background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.entrega h3 { margin-top: .8em; }
.pieza { border: 1px solid var(--linea); border-radius: 14px; padding: 4px 20px 8px; margin: 1.4em 0; background: var(--fondo); }
.pieza-cab { font-weight: 700; margin-bottom: .4em; }
.pieza-cab span { display: inline-block; margin-right: 8px; padding: 0 9px; border-radius: 999px; background: var(--naranja); color: #11182a; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; vertical-align: 2px; }
.cronologia { list-style: none; padding: 0; margin: 1.2em 0 1.2em 6px; border-left: 2px solid var(--crema-borde); }
.cronologia > li { position: relative; padding: 0 0 14px 22px; }
.cronologia > li::before { content: ""; position: absolute; left: -7px; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--naranja); }
.cronologia > li > strong:first-child { display: block; color: var(--acento); }
a.cerca { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; margin: 2px 2px 2px 0; border: 1px solid var(--linea); border-radius: 999px; font-size: .85rem; text-decoration: none; white-space: nowrap; }
a.cerca::before { content: "↗"; margin-right: 5px; }
a.cerca:hover { border-color: var(--naranja); }

/* ---- Ficha resumen del módulo: se imprime o se guarda en PDF desde el navegador ---- */
.ficha-leccion { break-inside: avoid; border-top: 1px solid var(--linea-2); padding-top: 4px; }
.ficha-leccion h2 { margin: 1em 0 .2em; font-size: 1.2rem; }
.ficha-apartados { columns: 2 220px; margin: .4em 0; }
.ficha dl { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: .6em 0 1em; font-size: .93rem; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; font-size: 10pt; }
  .top, footer, .migas, .no-imprimir, .saltar { display: none !important; }
  main { padding: 0; }
  .panel { border: 0; box-shadow: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}