/* =====================================================================
   ARCHIVO GENERADO por gweb/herramientas/estilos.py — NO EDITAR A MANO.
   Fuente: assets/css/base.css (+ assets/css/curso.css de este curso).
   Generado: 2026-09-29 00:56
   ===================================================================== */

/* ===================================================================
   Gedankia — hoja base
   Es la ÚNICA hoja que se edita. gweb/herramientas/estilos.py la concatena
   con el curso.css de cada curso y escribe los estilos.css que cargan las
   páginas. La cadena ../../../../../assets/fonts/ se sustituye por la ruta a assets/fonts.
   =================================================================== */

/* --- Tipografía: Inter Variable, servida desde el propio sitio ---
   Antes se pedía «Inter» sin cargarla, así que cada dispositivo ponía la
   suya. Un solo archivo variable cubre los pesos 100 a 900; el itálico va
   aparte. Licencia SIL OFL, en assets/fonts/LICENSE-Inter.txt. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../../../../../assets/fonts/inter-variable.woff2) format("woff2-variations"),
       url(../../../../../assets/fonts/inter-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../../../../../assets/fonts/inter-variable-italic.woff2) format("woff2-variations"),
       url(../../../../../assets/fonts/inter-variable-italic.woff2) format("woff2");
}

:root {
  --azul-oscuro: #003366;
  --azul-medio: #0a4d8c;
  --azul-claro: #e8f0f9;
  --cielo: #dff1fb;         /* azul cielo: fondo de los talleres en las listas */
  --cielo-borde: #7fc4e8;
  --cielo-texto: #0b4f76;
  --verde: #00643c;
  --verde-claro: #e6f4ec;
  --gris-azul: #465a6e;
  --gris-azul-claro: #eef2f7;
  --gris-calido: #5f5f69;
  --gris-calido-claro: #f2f2f6;
  --morado: #5a0078;
  --morado-claro: #f4ecf9;
  --naranja: #b46400;
  --naranja-claro: #fdf3e3;
  --rojo: #b41e1e;
  --rojo-claro: #fdeced;

  --texto: #171c24;
  --texto-suave: #5b6675;
  --borde: #e6e9ee;
  /* Para tarjetas y separadores: el borde a media tinta. La mayor parte del
     «aire» del rediseño viene de usar este en vez del borde pleno. */
  --borde-suave: color-mix(in srgb, var(--borde) 55%, transparent);
  --fondo: #ffffff;
  --fondo-alt: #f7f9fc;
  --tarjeta: #ffffff;
  --nav-fondo: rgba(255, 255, 255, .86);
  --hero-1: rgba(10, 77, 140, .11);
  --hero-2: rgba(0, 100, 60, .07);
  --brillo-fig: none;

  /* --- Escala de espaciado ------------------------------------------
     Todo padding, margin y gap del sitio sale de aquí. Antes había 43
     valores distintos en píxeles (5, 6, 7, 9, 10, 11, 13, 14…): el rastro
     de ajustar cada componente por separado. El ojo no mide, compara: no
     distingue 13 de 14, pero sí siente que dos bloques iguales no llevan
     lo mismo.

     Es la escala de Refactoring UI (Wathan & Schoger, pp. 60-64): parte
     de 16px y ningún par de escalones vecinos difiere menos de un 25 %,
     así que elegir es fácil y la diferencia siempre se percibe. El número
     del nombre es el valor en múltiplos de 4 (--e6 = 24px), como en
     Tailwind, del mismo autor.

     Regla: espaciar SOLO con estas variables. Los 1-3px que quedan por ahí
     son ajustes ópticos (alinear un icono), no decisiones de espaciado. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e6: 24px;
  --e8: 32px;
  --e12: 48px;
  --e16: 64px;
  --e24: 96px;
  --e32: 128px;

  /* --- Escala tipográfica --------------------------------------------
     Todo font-size del sitio sale de aquí (salvo los encabezados fluidos
     con clamp() y la hoja de impresión). Antes había 79 tamaños distintos
     entre 10.4 y 38 px, con medios píxeles y décimas que el navegador ni
     siquiera puede dibujar distinto: 12.4, 12.6, 13.8, 14.3…

     Refactoring UI, «Establish a type scale» (pp. 88-93): un conjunto
     corto elegido a mano, sin dos valores que no se distingan. Ésta parte
     del cuerpo de 17px y cada escalón difiere del vecino entre 12 y 23 %.
     Se declara en rem (de los 16px del navegador) para respetar el tamaño
     de letra que el usuario tenga configurado; el nombre dice los px que
     da con la configuración por omisión.

     El escalón de 11 existe porque hay 58 usos de etiquetas diminutas.
     El libro preferiría 12 como piso: si se sube, es aquí y en un solo
     lugar. */
  --letra-11: .6875rem;
  --letra-13: .8125rem;
  --letra-15: .9375rem;
  --letra-17: 1.0625rem;   /* cuerpo */
  --letra-19: 1.1875rem;
  --letra-22: 1.375rem;
  --letra-26: 1.625rem;
  --letra-32: 2rem;
  --letra-38: 2.375rem;

  --radio: 12px;
  --radio-sm: 8px;
  --sombra: 0 1px 1px rgba(16, 30, 54, .03), 0 2px 6px rgba(16, 30, 54, .035), 0 12px 32px rgba(16, 30, 54, .05);
  --sombra-hover: 0 2px 4px rgba(16, 30, 54, .05), 0 16px 40px rgba(16, 30, 54, .10);
  --ancho: 1140px;
  --sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --alto-nav: 64px;
}

/* ===================================================================
   Tema oscuro
   Los acentos se aclaran (para leerse sobre fondo oscuro) y los fondos
   «claros» de las cajas didácticas se vuelven tintes profundos del
   mismo color, conservando el código cromático del apunte.
   =================================================================== */
[data-tema="oscuro"] {
  --azul-oscuro: #8ab8ea;
  --azul-medio: #6ba6e4;
  --azul-claro: #15273d;
  --cielo: #0f2f43;
  --cielo-borde: #3f8fbf;
  --cielo-texto: #a9dcf5;
  --verde: #6fd0a4;
  --verde-claro: #0e2a20;
  --gris-azul: #a8bacd;
  --gris-azul-claro: #1b2431;
  --gris-calido: #b2b2bf;
  --gris-calido-claro: #1f1f28;
  --morado: #cba0e2;
  --morado-claro: #241531;
  --naranja: #e2a755;
  --naranja-claro: #2b2010;
  --rojo: #ee9091;
  --rojo-claro: #2e1618;

  --texto: #e7e9ed;
  --texto-suave: #9ba3ae;
  --borde: #262c36;
  --borde-suave: color-mix(in srgb, var(--borde) 75%, transparent);
  --fondo: #0e1116;
  --fondo-alt: #12161c;
  --tarjeta: #161b22;
  --nav-fondo: rgba(14, 17, 22, .86);
  --hero-1: rgba(107, 166, 228, .12);
  --hero-2: rgba(111, 208, 164, .07);
  --brillo-fig: brightness(.9) contrast(1.02);

  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
  --sombra-hover: 0 2px 4px rgba(0, 0, 0, .34), 0 14px 34px rgba(0, 0, 0, .42);

  color-scheme: dark;
}

/* ===================================================================
   Modo lectura — fondo de papel cálido
   Pensado para leer los apuntes largos sin fatiga: el texto no es negro
   puro sino pardo oscuro, porque sobre un fondo crema el negro absoluto
   produce demasiado contraste. Los acentos se desplazan hacia el cálido
   para que no compitan con el papel, conservando el código cromático de
   las cajas didácticas.
   =================================================================== */
[data-tema="lectura"] {
  --azul-oscuro: #33417d;
  --azul-medio: #4c5a9c;
  --azul-claro: #e9e4dd;
  --cielo: #dde9ee;
  --cielo-borde: #8fb3c4;
  --cielo-texto: #2f5a73;
  --verde: #4a6a2f;
  --verde-claro: #e8ecd9;
  --gris-azul: #5a5f56;
  --gris-azul-claro: #ece7d8;
  --gris-calido: #6b6154;
  --gris-calido-claro: #f0e9d9;
  --morado: #6b4074;
  --morado-claro: #efe6e9;
  --naranja: #9c5a12;
  --naranja-claro: #f6ead4;
  --rojo: #9c3323;
  --rojo-claro: #f7e3d8;

  --texto: #3b3226;
  --texto-suave: #6f6354;
  --borde: #ded1b6;
  --fondo: #f7f0de;
  --fondo-alt: #f1e8d1;
  --tarjeta: #fbf5e7;
  --nav-fondo: rgba(247, 240, 222, .88);
  --hero-1: rgba(76, 90, 156, .10);
  --hero-2: rgba(156, 90, 18, .07);
  /* Las fotografías se entibian para que no destellen sobre el papel */
  --brillo-fig: sepia(.22) brightness(.99) contrast(1.02) saturate(.95);

  --sombra: 0 1px 2px rgba(90, 70, 40, .05), 0 6px 20px rgba(90, 70, 40, .08);
  --sombra-hover: 0 2px 4px rgba(90, 70, 40, .08), 0 14px 34px rgba(90, 70, 40, .14);

  color-scheme: light;
}

html { transition: none; }
body, .nav, .bloque, .caja, .instructor, table, .glosario div, .nav-apuntes a {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-nav) + var(--e6)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--letra-17);
  line-height: 1.7;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.022em; margin: 0 0 .5em; font-weight: 650; text-wrap: balance; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e6); }

/* ===================================================================
   Barra de navegación
   =================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--alto-nav);
  background: var(--nav-fondo);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde-suave);
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--e8); }
/* --- Marca gedankia en la barra: regreso al listado de cursos --- */
.nav__gedankia { display: flex; align-items: center; flex: none; }
.nav__gedankia img { width: 94px; height: auto; display: block; }
.nav__gedankia:hover img { opacity: .7; }
[data-tema="oscuro"] .nav__gedankia img { filter: invert(1); }
.nav__sep { width: 1px; height: 26px; background: var(--borde); flex: none; }
/* En móvil el logotipo completo no cabe: la «g» ocupa el lugar que tenía la
   insignia SE1. Se resuelve con fondo, sin añadir imagen al HTML, y el enlace
   sigue llevando al listado de cursos. */
@media (max-width: 700px) {
  .nav__gedankia img { display: none; }
  .nav__gedankia {
    width: 34px; height: 34px; flex: none;
    background: url(../../../../../assets/marca/icono-64.png) center / contain no-repeat;
  }
  [data-tema="oscuro"] .nav__gedankia { filter: invert(1); }
  .nav__logo, .nav__sep { display: none; }
  .nav__inner { gap: var(--e3); }
  .nav__marca span { font-size: var(--letra-15); }
}

.nav__marca { display: flex; align-items: center; gap: var(--e3); font-weight: 700; color: var(--texto); letter-spacing: -.02em; }
.nav__marca:hover { text-decoration: none; }
.nav__logo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--azul-medio), var(--azul-oscuro));
  color: #fff; display: grid; place-items: center;
  font-size: var(--letra-13); font-weight: 800; letter-spacing: -.03em;
}
.nav__marca span { font-size: var(--letra-15); }
.nav__marca small { display: block; font-size: var(--letra-13); font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.nav__links { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
.nav__links a {
  color: var(--texto-suave); font-size: var(--letra-15); font-weight: 500;
  padding: var(--e2) var(--e3); border-radius: 8px; transition: .18s;
}
.nav__links a:hover { background: var(--fondo-alt); color: var(--azul-oscuro); text-decoration: none; }
.nav__links a.activo { color: var(--azul-oscuro); background: var(--azul-claro); font-weight: 600; }

/* --- Menú «Contenido» --- */
.menu { position: relative; margin-left: auto; }
.menu__btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  font: inherit; font-size: var(--letra-15); font-weight: 600;
  color: var(--texto); background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: 9px;
  padding: var(--e2) var(--e3); cursor: pointer; transition: .18s;
}
.menu__btn:hover { border-color: color-mix(in srgb, var(--azul-medio) 38%, var(--fondo)); color: var(--azul-oscuro); }
.menu__btn:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }
.menu__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.menu.abierto .menu__btn { background: var(--azul-claro); border-color: color-mix(in srgb, var(--azul-medio) 42%, var(--fondo)); color: var(--azul-oscuro); }
.menu.abierto .menu__btn svg { transform: rotate(180deg); }

.menu__panel {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 200;
  width: min(430px, calc(100vw - 32px));
  max-height: min(72vh, 640px); overflow-y: auto;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-hover);
  padding: var(--e2);
}
.menu__panel[hidden] { display: none; }

.menu__bloque {
  display: flex; flex-direction: column; gap: 1px;
  margin: var(--e3) 0 var(--e2); padding: 0 var(--e3);
  font-size: var(--letra-15); font-weight: 700; color: var(--texto); letter-spacing: -.01em;
}
.menu__bloque:first-child { margin-top: var(--e1); }
.menu__bloque span {
  font-size: var(--letra-11); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--azul-medio);
}

.menu__lista { list-style: none; margin: 0 0 var(--e1); padding: 0; }
.menu__lista li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3); border-radius: var(--radio-sm);
}
/* Sin clave (Dibujo, y las filas «directo»): la columna de 30px sobra y el
   título se metía en ella palabra por palabra. */
.menu__lista li:not(:has(.menu__clave)) { grid-template-columns: minmax(0, 1fr) auto; }
.menu__lista li:hover { background: var(--fondo-alt); }
.menu__clave { font-size: var(--letra-13); font-weight: 800; color: var(--azul-medio); }
.menu__tema { font-size: var(--letra-15); color: var(--texto); line-height: 1.4; }
.menu__accesos { display: flex; gap: var(--e2); }
.menu__accesos a {
  font-size: var(--letra-13); font-weight: 600; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 999px; padding: 3px var(--e3);
  white-space: nowrap; transition: .16s;
}
.menu__accesos a:hover { background: var(--azul-claro); border-color: color-mix(in srgb, var(--azul-medio) 40%, var(--fondo)); color: var(--azul-oscuro); text-decoration: none; }
.menu__accesos a.aqui { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: var(--fondo); }
[data-tema="oscuro"] .menu__accesos a.aqui { color: #0f1520; }
.menu__pendiente { font-size: var(--letra-13); color: var(--texto-suave); font-style: italic; white-space: nowrap; }

.menu__inicio {
  display: block; margin: var(--e2) 0 2px; padding: var(--e3) var(--e3);
  border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  font-size: var(--letra-13); font-weight: 600; color: var(--azul-medio);
}
.menu__inicio:hover { background: var(--fondo-alt); text-decoration: none; }

.menu__respaldo { margin-left: auto; font-size: var(--letra-15); font-weight: 500; color: var(--texto-suave); }

.menu__btn .ico-lista { display: none; }
.menu__fondo { display: none; }

/* ---- Móvil: el panel deja de flotar y se ancla bajo la barra ---- */
@media (max-width: 700px) {
  /* El texto no cabe, pero un galón suelto no significa nada: se cambia por un
     icono de lista, y el botón conserva su nombre accesible en el aria-label. */
  .menu__btn span, .menu__btn .ico-galon { display: none; }
  .menu__btn .ico-lista { display: block; width: 21px; height: 21px; }
  .menu__btn { padding: var(--e2) var(--e2); }

  /* Se posiciona respecto a la ventana, no al botón: así ocupa todo el ancho
     sin depender de la posición del botón ni del padding del contenedor. */
  .menu { position: static; }
  .menu__panel {
    position: fixed; left: 0; right: 0; top: var(--alto-nav);
    width: auto; max-height: calc(100vh - var(--alto-nav));
    max-height: calc(100dvh - var(--alto-nav));
    border-radius: 0; border-left: 0; border-right: 0;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
    padding: var(--e1) var(--e2) calc(var(--e4) + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .menu__fondo {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(9, 13, 20, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .menu__fondo[hidden] { display: none; }

  body.menu-abierto { overflow: hidden; }

  /* Dos renglones por subtema y objetivos táctiles más grandes */
  .menu__bloque { padding: 0 var(--e4); margin: var(--e4) 0 var(--e1); }
  .menu__lista li {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: var(--e2); padding: var(--e3) var(--e4); align-items: start;
  }
  .menu__tema { font-size: var(--letra-15); }
  .menu__accesos, .menu__pendiente { grid-column: 2; }
  .menu__lista li:not(:has(.menu__clave)) { grid-template-columns: minmax(0, 1fr); }
  .menu__lista li:not(:has(.menu__clave)) .menu__accesos { grid-column: 1; }
  .menu__accesos a { padding: var(--e2) var(--e4); font-size: var(--letra-13); }
  .menu__inicio { padding: var(--e4); margin-top: var(--e2); }
}

/* --- Interruptor de tema --- */
.tema-btn {
  margin-left: var(--e2); flex-shrink: 0;
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 9px;
  cursor: pointer; transition: .18s;
}
.tema-btn:hover { color: var(--azul-oscuro); background: var(--fondo-alt); border-color: color-mix(in srgb, var(--azul-medio) 38%, var(--fondo)); }
.tema-btn:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }
.tema-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* El botón muestra el icono del modo activo; el title dice a cuál se pasa.
   Ciclo: claro (sol) → lectura (libro) → oscuro (luna) */
.tema-btn svg { display: none; }
.tema-btn .sol { display: block; }
[data-tema="lectura"] .tema-btn .sol,
[data-tema="oscuro"] .tema-btn .sol { display: none; }
[data-tema="lectura"] .tema-btn .libro { display: block; }
[data-tema="oscuro"] .tema-btn .luna { display: block; }
[data-tema="lectura"] .tema-btn { color: var(--naranja); }

/* ===================================================================
   Portada (hero)
   =================================================================== */
.hero {
  background:
    radial-gradient(1100px 480px at 82% -12%, var(--hero-1), transparent 62%),
    radial-gradient(760px 400px at 8% 8%, var(--hero-2), transparent 60%),
    var(--fondo-alt);
  border-bottom: 1px solid var(--borde-suave);
  padding: var(--e24) 0 var(--e16);
}
.hero__etiqueta {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--letra-13); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--azul-medio); background: var(--azul-claro);
  border: 0; border-radius: 999px; padding: var(--e2) var(--e4); margin-bottom: var(--e6);
}
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.5rem); margin-bottom: .3em; letter-spacing: -.035em; }
.hero__sub { font-size: clamp(1.02rem, 2.1vw, 1.2rem); color: var(--texto-suave); max-width: 640px; margin: 0 0 var(--e8); }
.hero__datos { display: flex; flex-wrap: wrap; gap: var(--e3); }
.dato {
  background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: 10px;
  padding: var(--e2) var(--e4); font-size: var(--letra-15); color: var(--texto-suave);
}
.dato strong { color: var(--texto); font-weight: 600; }

/* ===================================================================
   Secciones
   =================================================================== */
.seccion { padding: var(--e16) 0; }
.seccion--alt { background: var(--fondo-alt); border-block: 1px solid var(--borde-suave); }
.seccion__titulo { font-size: var(--letra-17); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--azul-medio); margin-bottom: var(--e2); }
.seccion__desc { color: var(--texto-suave); margin: 0 0 var(--e8); max-width: 620px; }

/* ===================================================================
   Tarjetas de bloque
   =================================================================== */
/* min(330px, 100%) evita que la pista mínima supere el ancho de un celular angosto */
.bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: var(--e6); }

.bloque {
  background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--radio);
  padding: var(--e8) var(--e8) var(--e8); box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bloque:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); border-color: color-mix(in srgb, var(--azul-medio) 30%, var(--fondo)); }
.bloque__cab { display: flex; align-items: flex-start; gap: var(--e4); margin-bottom: var(--e4); }
.bloque__num {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: var(--letra-19); font-weight: 800;
  background: var(--azul-claro); color: var(--azul-oscuro);
}
.bloque--2 .bloque__num { background: var(--verde-claro); color: var(--verde); }
.bloque__cab h3 { font-size: var(--letra-22); margin: 3px 0 3px; }
.bloque__cab p { margin: 0; font-size: var(--letra-13); color: var(--texto-suave); }
.bloque > p { color: var(--texto-suave); font-size: var(--letra-15); margin: 0 0 var(--e6); }

.subtemas { list-style: none; margin: 0 0 var(--e6); padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
/* Solo los hijos directos: los <span> internos (clave, texto, flecha) no son tarjetas. */
.subtemas li > a, .subtemas li > span {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--radio-sm);
  background: var(--fondo-alt); border: 1px solid transparent;
  font-size: var(--letra-15); color: var(--texto); transition: .18s;
}
.subtemas li a:hover { background: var(--azul-claro); border-color: color-mix(in srgb, var(--azul-medio) 34%, var(--fondo)); text-decoration: none; }
.subtemas li > span { color: var(--texto-suave); }
/* Talleres: azul cielo, para distinguirlos de los apuntes a primera vista. */
.subtemas li.es-taller a {
  background: var(--cielo);
  border-color: color-mix(in srgb, var(--cielo-borde) 55%, transparent);
  color: var(--cielo-texto);
}
.subtemas li.es-taller a .flecha { color: var(--cielo-texto); }
.subtemas li.es-taller a:hover {
  background: color-mix(in srgb, var(--cielo) 82%, var(--cielo-borde));
  border-color: var(--cielo-borde);
}
.subtemas .clave { font-weight: 700; color: var(--azul-medio); font-size: var(--letra-13); min-width: 26px; }
.bloque--2 .subtemas .clave { color: var(--verde); }
.subtemas .flecha { margin-left: auto; color: var(--texto-suave); font-size: var(--letra-15); }

.bloque__pie { margin-top: auto; padding-top: var(--e4); border-top: 1px solid var(--borde-suave); display: flex; align-items: center; gap: var(--e3); }

.chip {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--letra-13); font-weight: 600; letter-spacing: .03em;
  padding: var(--e1) var(--e3); border-radius: 999px;
}
.chip--ok { background: var(--verde-claro); color: var(--verde); }
.chip--wip { background: var(--naranja-claro); color: var(--naranja); }
.chip--info { background: var(--azul-claro); color: var(--azul-oscuro); }
.chip--llave { background: var(--morado-claro); color: var(--morado); }

/* ===================================================================
   Instructor
   =================================================================== */
.instructor {
  display: flex; align-items: center; gap: var(--e8);
  background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--radio);
  padding: var(--e8) var(--e8); box-shadow: var(--sombra); max-width: 680px;
}
.instructor__foto {
  width: 156px; height: 156px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; object-position: center 42%;
  background: var(--tarjeta);
  border: 4px solid var(--tarjeta);
  box-shadow: 0 0 0 1px var(--borde), 0 8px 24px rgba(16, 30, 54, .13);
}
.instructor__nombre { font-size: var(--letra-22); margin: 0 0 3px; letter-spacing: -.025em; }
.instructor__rol { font-size: var(--letra-15); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--azul-medio); margin: 0 0 var(--e3); }
.instructor__nota { margin: 0; color: var(--texto-suave); font-size: var(--letra-15); line-height: 1.6; }

@media (max-width: 620px) {
  .instructor { flex-direction: column; text-align: center; gap: var(--e6); padding: var(--e8) var(--e6); }
  .instructor__foto { width: 132px; height: 132px; }
}

/* ===================================================================
   Botones
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e6); border-radius: 9px; font-size: var(--letra-15); font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: .18s;
}
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--azul-oscuro); color: #fff;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn--primario:hover { background: var(--azul-medio); }
.btn--sec { background: var(--tarjeta); color: var(--texto); border-color: var(--borde); }
.btn--sec:hover { border-color: color-mix(in srgb, var(--azul-medio) 38%, var(--fondo)); background: var(--fondo-alt); }

/* ===================================================================
   Página de apunte: layout con índice lateral
   =================================================================== */
.apunte-layout {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e6);
  display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: var(--e12);
  align-items: start;
}

.toc {
  position: sticky; top: calc(var(--alto-nav) + 26px);
  max-height: calc(100vh - var(--alto-nav) - 52px); overflow-y: auto;
  padding: var(--e6) 0 var(--e12); font-size: var(--letra-15);
}
.toc__titulo { font-size: var(--letra-13); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--e4); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.toc li a {
  display: block; padding: var(--e2) 0 var(--e2) var(--e4); margin-left: -2px;
  border-left: 2px solid transparent; color: var(--texto-suave); line-height: 1.45; transition: .16s;
}
.toc li a:hover { color: var(--azul-oscuro); text-decoration: none; }
.toc li a.activo { color: var(--azul-oscuro); font-weight: 600; border-left-color: var(--azul-medio); }
.toc li.sub a { padding-left: var(--e6); font-size: var(--letra-13); }

/* Ancho de la columna de lectura. Con cuerpo de 17px, 660px son unos 75
   caracteres por línea, el tope del rango 45-75 que da Refactoring UI
   («Keep your line length in check», p. 99). Antes eran 780px ≈ 92
   caracteres: pasado de 75 el ojo pierde el renglón al volver, y en un
   apunte largo eso es fatiga que se acumula. */
.apunte { padding: var(--e6) 0 var(--e24); min-width: 0; max-width: 660px; }

.miga { font-size: var(--letra-13); color: var(--texto-suave); margin-bottom: var(--e6); }
.miga a { color: var(--texto-suave); }
.miga span { margin: 0 var(--e2); opacity: .55; }

.apunte__cab { padding-bottom: var(--e8); border-bottom: 1px solid var(--borde); margin-bottom: var(--e3); }
.apunte__cab .etiqueta {
  display: inline-block; font-size: var(--letra-13); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul-medio); background: var(--azul-claro); padding: var(--e1) var(--e3); border-radius: 999px; margin-bottom: var(--e4);
}
.apunte__cab h1 { font-size: clamp(1.95rem, 4.2vw, 2.7rem); margin-bottom: .3em; }
.apunte__cab .bajada { color: var(--texto-suave); font-size: var(--letra-17); margin: 0 0 var(--e6); }
.apunte__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

.apunte h2 {
  font-size: var(--letra-26); margin: 2.4em 0 .7em; padding-top: .35em;
  scroll-margin-top: calc(var(--alto-nav) + var(--e6));
}
.apunte h2:first-of-type { margin-top: 1.6em; }
.apunte h3 { font-size: var(--letra-19); margin: 1.9em 0 .55em; color: var(--azul-oscuro); scroll-margin-top: calc(var(--alto-nav) + var(--e6)); }
.apunte p { margin: 0 0 1.15em; }
.apunte ul, .apunte ol { margin: 0 0 1.25em; padding-left: 1.45em; }
.apunte li { margin-bottom: .45em; }
.apunte li::marker { color: var(--azul-medio); }

.divisor-parte {
  display: flex; align-items: center; gap: var(--e4);
  margin: 3.4em 0 2em; color: var(--azul-oscuro);
  font-size: var(--letra-13); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  scroll-margin-top: calc(var(--alto-nav) + var(--e6));
}
.divisor-parte::before, .divisor-parte::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--azul-medio) 45%, var(--fondo)), transparent); }

/* --- Cajas didácticas --- */
.caja {
  /* Antes cada tipo de caja traía su propio color de fondo y de marco:
     cinco tintes en una misma página. Ahora el fondo es neutro para todas
     y el tipo se reconoce por el rótulo y por un filete fino a la izquierda.
     El código cromático sobrevive en ese filete. */
  border-radius: var(--radio-sm); border: 1px solid transparent; border-left-width: 3px;
  background: var(--fondo-alt);
  padding: var(--e6) var(--e6) var(--e6) var(--e6); margin: 1.8em 0; font-size: var(--letra-17);
}
.caja__titulo {
  font-weight: 700; font-size: var(--letra-13); letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: var(--e3); display: flex; align-items: center; gap: var(--e2);
}
.caja p:last-child, .caja ul:last-child, .caja ol:last-child { margin-bottom: 0; }
.caja ul, .caja ol { margin-bottom: .6em; }

.caja--definicion { border-left-color: var(--azul-oscuro); }
.caja--definicion .caja__titulo { color: var(--azul-oscuro); }
.caja--concepto { border-left-color: var(--verde); }
.caja--concepto .caja__titulo { color: var(--verde); }
.caja--alerta { border-left-color: var(--gris-azul); }
.caja--alerta .caja__titulo { color: var(--gris-azul); }
.caja--recordatorio { border-left-color: var(--gris-calido); }
.caja--recordatorio .caja__titulo { color: var(--gris-calido); }
.caja--reflexion { border-left-color: var(--morado); }
.caja--reflexion .caja__titulo { color: var(--morado); }
.caja--practica { border-left-color: var(--naranja); }
.caja--practica .caja__titulo { color: var(--naranja); }

/* --- Figuras --- */
figure { margin: 2em 0; }
figure img { border-radius: var(--radio-sm); border: 1px solid var(--borde); margin: 0 auto; filter: var(--brillo-fig); }
/* En modo lectura los diagramas de fondo blanco se funden con el papel
   multiplicando: el blanco desaparece y solo quedan los trazos, como si
   estuvieran impresos en la hoja. Las fotografías (.foto) se excluyen,
   porque el multiply las oscurecería. */
[data-tema="lectura"] figure img:not(.foto) {
  background: transparent;
  filter: none;
  mix-blend-mode: multiply;
}
figcaption { font-size: var(--letra-13); color: var(--texto-suave); line-height: 1.55; margin-top: var(--e3); text-align: center; }
figcaption b { color: var(--texto); font-weight: 600; }
.fig-doble { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: end; }
.fig-doble figcaption { margin-top: var(--e2); font-size: var(--letra-13); }
.fig-estrecha img { max-width: min(460px, 100%); }
.fig-media img { max-width: min(600px, 100%); }

/* --- Tablas --- */
.tabla-envoltura { overflow-x: auto; margin: 1.9em 0; border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); }
table { width: 100%; border-collapse: collapse; font-size: var(--letra-15); font-variant-numeric: tabular-nums; }
thead th {
  background: var(--fondo-alt); text-align: left; font-weight: 700; font-size: var(--letra-13);
  letter-spacing: .02em; color: var(--azul-oscuro); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde);
}
tbody td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde-suave); vertical-align: top; line-height: 1.55; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--fondo-alt); }
table.centrada td, table.centrada th { text-align: center; }
.tabla-titulo { font-size: var(--letra-13); color: var(--texto-suave); margin: -1.1em 0 1.9em; text-align: center; }

/* --- Línea de tiempo --- */
.timeline { margin: 2.2em 0 1.4em; overflow-x: auto; padding-bottom: var(--e2);
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
@media (min-width: 780px) { .timeline { mask-image: none; -webkit-mask-image: none; } }
.timeline__pista { display: flex; gap: 0; min-width: 700px; position: relative; padding-top: var(--e2); }
.timeline__pista::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--azul-medio) 32%, var(--fondo)), var(--azul-medio)); }
.hito { flex: 1; text-align: center; position: relative; padding-top: 0; }
.hito__anio { font-size: var(--letra-13); font-weight: 700; color: var(--azul-oscuro); margin-bottom: var(--e2); }
.hito__punto { width: 13px; height: 13px; border-radius: 50%; background: var(--tarjeta); border: 3px solid var(--azul-medio); margin: 0 auto var(--e3); position: relative; z-index: 1; }
.hito__texto { font-size: var(--letra-13); color: var(--texto-suave); line-height: 1.45; padding: 0 var(--e2); }

/* --- Glosario --- */
.glosario { display: grid; gap: 2px; margin: 1.6em 0; border: 1px solid var(--borde); border-radius: var(--radio-sm); overflow: hidden; }
.glosario div { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: var(--e4); padding: var(--e4) var(--e4); background: var(--tarjeta); border-bottom: 1px solid var(--borde); font-size: var(--letra-15); }
.glosario div:last-child { border-bottom: none; }
.glosario dt { font-weight: 700; color: var(--azul-oscuro); margin: 0; }
.glosario dd { margin: 0; color: var(--texto-suave); }

/* --- Referencias / créditos --- */
.referencias { font-size: var(--letra-15); }
.referencias li { margin-bottom: .8em; }
.creditos { font-size: var(--letra-13); color: var(--texto-suave); background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e4) var(--e6); margin-top: 2.2em; line-height: 1.6; }

/* --- Navegación entre apuntes --- */
.nav-apuntes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-top: 3.4em; padding-top: 2.2em; border-top: 1px solid var(--borde); }
.nav-apuntes a {
  border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e4) var(--e4);
  background: var(--tarjeta); transition: .18s; display: block;
}
.nav-apuntes a:hover { border-color: color-mix(in srgb, var(--azul-medio) 38%, var(--fondo)); box-shadow: var(--sombra); text-decoration: none; }
.nav-apuntes small { display: block; font-size: var(--letra-13); color: var(--texto-suave); margin-bottom: var(--e1); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.nav-apuntes strong { font-size: var(--letra-15); color: var(--texto); font-weight: 600; }
.nav-apuntes .der { text-align: right; }

/* --- Ecuaciones --- */
mjx-container[display="true"] { margin: 1.4em 0 !important; overflow-x: auto; overflow-y: hidden; }

/* ===================================================================
   Taller interactivo
   =================================================================== */
.taller-barra {
  position: sticky; top: var(--alto-nav); z-index: 50;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3);
  padding: var(--e3) var(--e4); margin: 0 0 var(--e8);
  background: var(--nav-fondo);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
.taller-barra .marcador { font-size: var(--letra-15); color: var(--texto-suave); margin-right: auto; }
.taller-barra .marcador strong { color: var(--texto); }
.taller-barra .btn { padding: var(--e2) var(--e4); font-size: var(--letra-13); }

.actividad {
  margin: 2.6em 0 0; padding-top: .4em;
  scroll-margin-top: calc(var(--alto-nav) + var(--e16));
}
.actividad__cab {
  display: flex; align-items: center; gap: var(--e3);
  background: var(--azul-oscuro); color: var(--fondo);
  border-radius: var(--radio-sm); padding: var(--e3) var(--e6); margin-bottom: var(--e4);
}
[data-tema="oscuro"] .actividad__cab { color: #0f1520; }
.actividad__cab .n {
  width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--letra-13); font-weight: 800;
  background: rgba(255, 255, 255, .22);
}
.actividad__cab h2 { font-size: var(--letra-19); margin: 0; letter-spacing: -.02em; }

.modelo { background: var(--verde-claro); border-color: color-mix(in srgb, var(--verde) 32%, var(--verde-claro)); border-left-color: var(--verde); }
.modelo .caja__titulo { color: var(--verde); }
.pista { background: var(--naranja-claro); border-color: color-mix(in srgb, var(--naranja) 30%, var(--naranja-claro)); border-left-color: var(--naranja); font-size: var(--letra-15); }
.pista .caja__titulo { color: var(--naranja); }

.ejercicio { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e6) var(--e6); margin: 1.5em 0; background: var(--tarjeta); }
.ejercicio__num { font-weight: 700; color: var(--azul-oscuro); font-size: var(--letra-15); display: block; margin-bottom: var(--e1); }
.ejercicio__num .tipo { font-weight: 600; font-size: var(--letra-13); letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); margin-left: var(--e2); }
.ejercicio > p:last-child, .ejercicio > ol:last-child, .ejercicio > div:last-child { margin-bottom: 0; }

/* --- Campos --- */
.hueco, .hueco-sel {
  font: inherit; font-size: var(--letra-15); color: var(--texto);
  background: var(--fondo-alt);
  border: 1px solid var(--borde); border-bottom: 2px solid var(--texto-suave);
  border-radius: 5px 5px 0 0; padding: 3px var(--e2); margin: 0 2px;
  transition: .16s; max-width: 100%;
}
.hueco:focus, .hueco-sel:focus { outline: none; border-bottom-color: var(--azul-medio); background: var(--azul-claro); }
.hueco-sel { padding: var(--e1) var(--e2); }
.abierta {
  font: inherit; font-size: var(--letra-15); line-height: 1.6; color: var(--texto);
  width: 100%; background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: var(--e3) var(--e3); margin-top: var(--e2); resize: vertical;
}
.abierta:focus { outline: none; border-color: var(--azul-medio); }
/* El cuadro crece con el texto (lo estira taller.js): sin scroll interno,
   así nunca queda texto escondido que luego se pierda al imprimir. */
.abierta { overflow: hidden; min-height: 3.4em; }

/* Copia imprimible de las respuestas: invisible en pantalla, es la que
   sale en el papel. Un párrafo no recorta el texto como sí lo hace un
   textarea con scroll. */
.respuesta-impresa { display: none; }

.eleccion { display: inline-flex; gap: var(--e1); vertical-align: middle; margin-right: var(--e2); }
.eleccion button {
  font: inherit; font-size: var(--letra-15); font-weight: 700; line-height: 1;
  min-width: 34px; padding: var(--e2) var(--e2); cursor: pointer;
  color: var(--texto-suave); background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: 7px; transition: .16s;
}
.eleccion button:hover { border-color: var(--azul-medio); color: var(--azul-oscuro); }
.eleccion button[aria-pressed="true"] { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: var(--fondo); }
[data-tema="oscuro"] .eleccion button[aria-pressed="true"] { color: #0f1520; }

.opciones { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e6); margin: var(--e2) 0 0; }
.opciones label { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--letra-15); cursor: pointer; }
.opciones input { accent-color: var(--azul-medio); width: 16px; height: 16px; }

.lista-ej { list-style: none; padding: 0; margin: var(--e3) 0 0; }
.lista-ej > li { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
.lista-ej > li:last-child { border-bottom: none; }
.lista-ej .enun { flex: 1; min-width: 0; }
.lista-ej .justif { display: block; width: 100%; margin-top: var(--e2); }

/* --- Estado de corrección --- */
.bien  { border-color: var(--verde) !important; background: var(--verde-claro) !important; }
.mal   { border-color: var(--naranja) !important; background: var(--naranja-claro) !important; }
.marca { font-size: var(--letra-15); font-weight: 700; margin-left: var(--e2); vertical-align: middle; }
.marca.ok  { color: var(--verde); }
.marca.no  { color: var(--naranja); }
.revisar {
  display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e2);
  font-size: var(--letra-13); color: var(--texto-suave);
  background: var(--gris-calido-claro); border: 1px solid var(--borde);
  border-radius: 999px; padding: var(--e1) var(--e3);
}
.revisar a { font-weight: 600; }

/* --- Emparejar / receta / mapa --- */
.emparejar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--e6); margin-top: var(--e3); }
.emparejar ol { margin: 0; padding-left: 1.3em; }
.emparejar > div > p { font-size: var(--letra-13); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 var(--e2); }
.emparejar li { margin-bottom: var(--e2); }

.flujo { display: grid; gap: var(--e3); margin: var(--e4) 0 0; }
.flujo__fila { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); font-size: var(--letra-15); }
.ficha { background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: 8px; padding: var(--e2) var(--e4); font-weight: 600; }
.ficha--fuerte { background: var(--azul-oscuro); color: var(--fondo); border-color: var(--azul-oscuro); }
[data-tema="oscuro"] .ficha--fuerte { color: #0f1520; }
.flujo__op { color: var(--azul-medio); font-weight: 800; }

.mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e4); margin-top: var(--e4); align-items: center; }
.mapa .nodo { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e4) var(--e4); text-align: center; font-size: var(--letra-15); background: var(--fondo-alt); }
.mapa .nodo strong { display: block; margin-bottom: var(--e2); color: var(--azul-oscuro); }

.obras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e6); margin-top: var(--e4); }
.obras--duo { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: start; }
.obras figure { margin: 0; }
.obras img { width: 100%; height: auto; max-height: 220px; object-fit: contain; background: var(--tarjeta); filter: var(--brillo-fig); }
.obras .campos { margin-top: var(--e2); font-size: var(--letra-15); display: grid; gap: var(--e2); }

@media (max-width: 700px) {
  .obras, .obras--duo { grid-template-columns: 1fr; }
  .obras img { max-height: 46vh; }
  .emparejar { grid-template-columns: 1fr; gap: var(--e4); }
  .taller-barra { top: 0; }
  .actividad__cab h2 { font-size: var(--letra-17); }
  .lista-ej > li { flex-wrap: wrap; }
}

@media print {
  .taller-barra { display: none !important; }
  .hueco, .hueco-sel, .abierta { background: none; border-bottom: 1px solid #000; }
  .actividad { break-inside: avoid; }

  /* --- Respuestas completas en el papel ---
     Los controles se sustituyen por su copia de texto: un <textarea>
     imprime solo lo que cabe en su ventana, mientras que un párrafo
     con pre-wrap imprime todo, se parta en varios renglones o páginas. */
  .abierta, .hueco, .hueco-sel { display: none !important; }

  .respuesta-impresa {
    display: block;
    white-space: pre-wrap;      /* conserva los saltos de línea escritos */
    overflow-wrap: break-word;  /* parte palabras larguísimas sin desbordar */
    font-size: 10.5pt; line-height: 1.5; color: #000;
    border-bottom: 1px solid #000; padding: 2px 0 3px; margin-top: var(--e1);
    min-height: 1.4em;
  }
  /* Los espacios en blanco dentro de una frase siguen en línea */
  .respuesta-impresa--linea {
    display: inline; white-space: pre-wrap;
    border-bottom: 1px solid #000; padding: 0 3px; margin: 0;
    min-height: 0;
  }
  /* Si el alumno no contestó, queda una línea en blanco para escribir a mano */
  .respuesta-impresa.vacia { min-height: 2.6em; }
  .respuesta-impresa--linea.vacia { display: inline-block; min-width: 90px; }

  /* Un ejercicio no debería partirse entre dos hojas... */
  .ejercicio { break-inside: avoid; page-break-inside: avoid; }
  /* ...salvo que la respuesta sea larguísima: entonces se deja fluir de
     una hoja a la siguiente en vez de recortarla o dejar media página
     en blanco. */
  .respuesta-impresa { break-inside: auto; page-break-inside: auto; }
}

/* ===================================================================
   Lupa: ampliar figuras al tocarlas
   =================================================================== */
.lupa-env { position: relative; display: block; }
.ampliable { cursor: zoom-in; }
figure .ampliable:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 3px; }

/* Distintivo discreto que aparece al pasar el cursor (en táctil no estorba) */
.lupa-marca {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(15, 21, 32, .62); color: #fff;
  opacity: 0; transform: scale(.85); transition: .18s;
}
.lupa-marca svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.lupa-env:hover .lupa-marca, .ampliable:focus-visible + .lupa-marca { opacity: 1; transform: scale(1); }
@media (hover: none) { .lupa-marca { opacity: .85; transform: scale(1); } }

.visor {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column;
  background: rgba(9, 13, 20, .93);
  opacity: 0; transition: opacity .18s;
}
.visor[hidden] { display: none; }
.visor.visible { opacity: 1; }

.visor__barra {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); flex-shrink: 0;
  color: #e8eef6; font-size: var(--letra-13);
}
.visor__titulo { margin-right: auto; opacity: .85; font-weight: 600; letter-spacing: .02em; }
.visor__accion {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  font: inherit; color: #e8eef6; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; cursor: pointer; transition: .16s;
}
.visor__accion:hover { background: rgba(255, 255, 255, .2); }
.visor__accion:focus-visible { outline: 2px solid #8ab8ea; outline-offset: 2px; }
.visor__accion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.visor__lienzo {
  flex: 1; min-height: 0; overflow: auto; padding: 0 var(--e4);
  display: flex; align-items: center; justify-content: center;
  -webkit-overflow-scrolling: touch;
}
.visor__lienzo img, .visor__lienzo svg {
  display: block; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  background: #fff; border-radius: 6px;
  transition: none;      /* el zoom no se anima: en móvil se siente más directo */
}
.visor__lienzo svg { padding: var(--e3); }
/* Con zoom: la imagen crece y el lienzo se desplaza */
.visor.zoom .visor__lienzo { align-items: flex-start; justify-content: flex-start; cursor: grab; }
.visor.zoom .visor__lienzo img, .visor.zoom .visor__lienzo svg {
  max-width: none; max-height: none;
  width: var(--zoom-ancho, 210%); height: auto; margin: 0;
}

.visor__pie {
  flex-shrink: 0; padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  color: #c3cede; font-size: var(--letra-13); line-height: 1.55;
  max-height: 32vh; overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.visor__pie b { color: #eef3f9; }
.visor__pie em { color: #d5dee9; }

@media (max-width: 640px) {
  .visor__pie { font-size: var(--letra-13); max-height: 26vh; padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom)); }
  .visor__lienzo { padding: 0 var(--e2); }
}

@media print { .visor, .lupa-marca { display: none !important; } }

/* ===================================================================
   Pie de página
   =================================================================== */
.pie { background: var(--fondo-alt); border-top: 1px solid var(--borde-suave); padding: var(--e12) 0 var(--e12); font-size: var(--letra-15); color: var(--texto-suave); }
.pie__inner { display: flex; flex-wrap: wrap; gap: var(--e6); justify-content: space-between; align-items: flex-start; }
.pie strong { color: var(--texto); display: block; margin-bottom: var(--e1); font-size: var(--letra-15); }
.pie__nota { max-width: 470px; font-size: var(--letra-13); line-height: 1.6; }
.pie__contacto { margin: var(--e3) 0 0; }
.pie__contacto a { color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
.pie__contacto a:hover { color: var(--azul-oscuro); border-color: var(--azul-oscuro); text-decoration: none; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 980px) {
  .apunte-layout { grid-template-columns: 1fr; gap: 0; }
  .toc {
    position: static; max-height: none; overflow: visible;
    background: var(--fondo-alt); border: 1px solid var(--borde);
    border-radius: var(--radio-sm); padding: var(--e4) var(--e6); margin: var(--e6) 0 var(--e1);
  }
  .toc ol { column-count: 2; column-gap: var(--e6); }
  .toc li { break-inside: avoid; }
  /* Antes aquí se quitaba el tope de ancho del apunte (max-width: none), y
     en una tableta de 980px el texto corría a más de 100 caracteres por
     línea. Se conserva el tope de 660px de la regla general. */
}
@media (max-width: 700px) {
  body { font-size: var(--letra-17); }
  .contenedor, .apunte-layout { padding: 0 var(--e4); }
  .nav__links a { padding: var(--e2) var(--e2); font-size: var(--letra-13); }
  .nav__marca small { display: none; }
  .hero { padding: var(--e12) 0 var(--e12); }
  .seccion { padding: var(--e12) 0; }
  .bloque { padding: var(--e6) var(--e6) var(--e6); }
  .fig-doble { grid-template-columns: 1fr; }
  .toc ol { column-count: 1; }
  .glosario div { grid-template-columns: 1fr; gap: var(--e1); }
  .nav-apuntes { grid-template-columns: 1fr; }
  .nav-apuntes .der { text-align: left; }
  .caja { padding: var(--e4) var(--e4); }
}

/* --- Impresión --- */

/* ===================================================================
   Candado — pantalla de acceso de los talleres cifrados
   =================================================================== */

/* Sin barra lateral, el artículo ocupa las dos columnas */
.apunte-layout > .apunte:only-child { grid-column: 1 / -1; }

/* Candadito junto a los talleres que piden código */
.ico-candado {
  width: 12.5px; height: 12.5px; flex: none;
  margin-left: var(--e1); vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; opacity: .7;
}
.subtemas .ico-candado { margin-left: 2px; opacity: .55; }
.subtemas li a:hover .ico-candado, .menu__accesos a:hover .ico-candado { opacity: 1; }

.candado {
  /* Sin tarjeta, sin marco, sin sombra: es la primera pantalla que ve cada
     alumno en cada curso, y lo único que tiene que hacer es teclear un
     código. Todo lo demás se quitó del camino. */
  max-width: 440px; margin: var(--e16) auto var(--e24); padding: 0 var(--e6); text-align: center;
  background: transparent; border: 0; box-shadow: none;
}

.candado__marca {
  width: 44px; height: 44px; margin: 0 auto var(--e6);
  display: grid; place-items: center; border-radius: 50%;
  background: transparent; color: var(--texto-suave);
}
.candado__marca svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.candado__marca circle { fill: currentColor; stroke: none; }

.candado__etiqueta {
  font-size: var(--letra-13); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul-medio); margin: 0 0 var(--e3);
}
.candado__titulo {
  font-size: clamp(1.65rem, 4.2vw, 2.15rem); line-height: 1.15; letter-spacing: -.03em;
  margin: 0 0 var(--e8); color: var(--texto);
}
/* El párrafo explicativo ya no se genera; la regla queda por si alguna
   página vieja lo trae, y en ese caso se oculta. */
.candado__texto { display: none; }

.candado__forma { margin: 0; }
/* El rótulo sigue ahí para los lectores de pantalla; a la vista sobra. */
.candado__rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.candado__fila { display: flex; flex-direction: column; gap: var(--e3); }

.candado__campo {
  width: 100%; min-width: 0;
  padding: var(--e4) var(--e4); font-size: var(--letra-19); font-family: inherit; font-weight: 600;
  letter-spacing: .1em; text-align: center;
  color: var(--texto); background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.candado__campo::placeholder { font-weight: 400; letter-spacing: normal; }
.candado__campo:focus {
  outline: none; border-color: var(--azul-medio);
  box-shadow: var(--sombra), 0 0 0 4px color-mix(in srgb, var(--azul-medio) 16%, transparent);
}
.candado__campo:read-only { opacity: .65; }

.candado__btn { width: 100%; justify-content: center; padding: var(--e4) var(--e6); font-size: var(--letra-15); border-radius: 12px; }
.candado__btn:disabled { opacity: .6; cursor: progress; }

.candado__aviso {
  min-height: 21px; margin: var(--e4) 0 0; font-size: var(--letra-15); line-height: 1.45;
  color: var(--texto-suave);
}
.candado__aviso--error { color: var(--rojo); font-weight: 600; }

.candado__pie {
  margin: var(--e8) 0 0; padding: 0; border: 0;
  font-size: var(--letra-13); color: var(--texto-suave);
}
.candado__pie a { color: var(--azul-medio); font-weight: 600; }

/* La portada del curso no vive dentro de un apunte: lleva su propio aire
   vertical, más generoso, porque es la única cosa en la pantalla. */
.candado--curso { max-width: 440px; margin: 0 auto; padding: var(--e24) var(--e6) var(--e32); }

.candado__sello {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin: var(--e4) 0 0; padding: var(--e2) var(--e4); border-radius: 999px;
  background: var(--verde-claro); color: var(--verde);
  font-size: var(--letra-13); font-weight: 600;
}
.candado__sello svg {
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Salida para computadoras compartidas: borra el código guardado. Va discreta
   dentro del propio sello, no como botón aparte, porque casi nadie la necesita. */
.candado__olvidar {
  border: 0; background: none; padding: 0 0 1px; margin-left: 2px;
  font: inherit; font-weight: 500; color: inherit; opacity: .72;
  cursor: pointer; border-bottom: 1px solid currentColor;
}
.candado__olvidar:hover { opacity: 1; }
@media print { .candado__olvidar { display: none; } }

/* Latido mientras se deriva la llave (tarda ~1 s a propósito) */
.candado--trabajando .candado__marca { animation: candado-latido 1.15s ease-in-out infinite; }
@keyframes candado-latido {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%      { transform: scale(1.07); opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .candado--trabajando .candado__marca { animation: none; }
}

@media (max-width: 640px) {
  .candado { margin: var(--e8) auto var(--e16); }
  .candado--curso { padding: var(--e16) var(--e6) var(--e24); }
  .candado__titulo { margin-bottom: var(--e8); }
}
/* ===================================================================
   Láminas de la sesión — las diapositivas dentro del apunte
   =================================================================== */
.lamina { margin: var(--e6) 0 var(--e8); }
.lamina img {
  width: 100%; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--tarjeta);
}
.lamina figcaption { max-width: 62ch; margin-inline: auto; }

@media (max-width: 640px) {
  .lamina { margin: var(--e4) 0 var(--e6); }
}

@media print {
  /* En papel siempre se imprime en claro, sea cual sea el modo en pantalla */
  :root, [data-tema="lectura"], [data-tema="oscuro"] {
    --texto: #000; --texto-suave: #444; --borde: #bbb;
    --fondo: #fff; --fondo-alt: #fff; --tarjeta: #fff;
    --brillo-fig: none; --sombra: none; --sombra-hover: none;
  }
  body { background: #fff; color: #000; }
  [data-tema="lectura"] figure img { mix-blend-mode: normal; }
  .nav, .toc, .apunte__acciones, .nav-apuntes, .pie, .miga { display: none !important; }
  .apunte-layout { display: block; padding: 0; }
  body { font-size: 11pt; }
  .caja, figure, table { break-inside: avoid; }
}


/* --- Botones de asistencia en la portada de un curso -----------------
   Viven dentro del contenido cifrado: solo aparecen con el curso abierto.
   En pantalla ancha van a la derecha, a la altura del sello «Curso abierto»;
   en móvil bajan debajo de él para no encimarse. */
#bloques > .contenedor { position: relative; }
.asistencia {
  position: absolute; top: var(--e4); right: var(--e6);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2);
}
.asistencia-btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4); border-radius: 999px;
  background: var(--rojo); color: #fff;
  font-size: var(--letra-13); font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transition: .16s;
}
.asistencia-btn:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.asistencia-btn:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.asistencia-btn svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[data-tema="oscuro"] .asistencia-btn, [data-tema="oscuro"] .asistencia-btn:hover { color: #1a0a0a; }
@media (max-width: 700px) {
  .asistencia { position: static; justify-content: flex-start; margin-top: var(--e3); }
}
@media print { .asistencia { display: none; } }


/* ===================================================================
   revolucion-cuantica — reglas propias del curso
   Se concatenan DESPUÉS de assets/css/base.css al generar estilos.css
   con gweb/herramientas/estilos.py. No edites estilos.css a mano.
   =================================================================== */



html { transition: none; }


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}



/* En móvil el logotipo completo no cabe: la «g» ocupa el lugar que tenía la
   insignia FRC. Se resuelve con fondo, sin añadir imagen al HTML, y el enlace
   sigue llevando al listado de cursos. */

@media (max-width: 700px) {
  .nav__gedankia img { display: none; }
  .nav__gedankia {
    width: 34px; height: 34px; flex: none;
    background: url(../../../../../assets/marca/icono-64.png) center / contain no-repeat;
  }
  [data-tema="oscuro"] .nav__gedankia { filter: invert(1); }
  .nav__logo, .nav__sep { display: none; }
  .nav__inner { gap: var(--e3); }
  .nav__marca span { font-size: var(--letra-15); }
}



/* ---- Móvil: el panel deja de flotar y se ancla bajo la barra ---- */

@media (max-width: 700px) {
  /* El texto no cabe, pero un galón suelto no significa nada: se cambia por un
     icono de lista, y el botón conserva su nombre accesible en el aria-label. */
  .menu__btn span, .menu__btn .ico-galon { display: none; }
  .menu__btn .ico-lista { display: block; width: 21px; height: 21px; }
  .menu__btn { padding: var(--e2) var(--e2); }

  /* Se posiciona respecto a la ventana, no al botón: así ocupa todo el ancho
     sin depender de la posición del botón ni del padding del contenedor. */
  .menu { position: static; }
  .menu__panel {
    position: fixed; left: 0; right: 0; top: var(--alto-nav);
    width: auto; max-height: calc(100vh - var(--alto-nav));
    max-height: calc(100dvh - var(--alto-nav));
    border-radius: 0; border-left: 0; border-right: 0;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
    padding: var(--e1) var(--e2) calc(var(--e4) + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .menu__fondo {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(9, 13, 20, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .menu__fondo[hidden] { display: none; }

  body.menu-abierto { overflow: hidden; }

  /* Dos renglones por subtema y objetivos táctiles más grandes */
  .menu__bloque { padding: 0 var(--e4); margin: var(--e4) 0 var(--e1); }
  .menu__lista li {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: var(--e2); padding: var(--e3) var(--e4); align-items: start;
  }
  .menu__tema { font-size: var(--letra-15); }
  .menu__accesos, .menu__pendiente { grid-column: 2; }
  .menu__accesos a { padding: var(--e2) var(--e4); font-size: var(--letra-13); }
  .menu__inicio { padding: var(--e4); margin-top: var(--e2); }
}



/* --- Interruptor de tema --- */

.tema-btn,
.imprimir-btn {
  margin-left: var(--e2); flex-shrink: 0;
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 9px;
  cursor: pointer; transition: .18s;
}


.tema-btn:hover,
.imprimir-btn:hover { color: var(--azul-oscuro); background: var(--fondo-alt); border-color: color-mix(in srgb, var(--azul-medio) 38%, var(--fondo)); }


.tema-btn:focus-visible,
.imprimir-btn:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }


.tema-btn svg,
.imprimir-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }


/* se muestra el icono del tema al que se cambiará */

.tema-btn .luna { display: block; }


.tema-btn .sol  { display: none; }


[data-tema="oscuro"] .tema-btn .luna { display: none; }


[data-tema="oscuro"] .tema-btn .sol  { display: block; }


.instructor + .instructor { margin-top: var(--e6); }



/* Rejilla del equipo docente: apilada en móvil, en fila en escritorio */

.docentes { display: grid; gap: var(--e6); }


.docentes .instructor + .instructor { margin-top: 0; }



@media (min-width: 900px) {
  .docentes { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .docentes .instructor { max-width: none; gap: var(--e6); padding: var(--e8) var(--e8); }
  .docentes .instructor__foto { width: 118px; height: 118px; }
  .docentes .instructor__nombre { font-size: var(--letra-22); }
}



/* ===================================================================
   Descarga del encuadre
   =================================================================== */

.encuadre__descarga {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e4); margin: var(--e8) 0 0;
}


.encuadre__meta { font-size: var(--letra-13); color: var(--texto-suave); }



/* ===================================================================
   Tarjeta de enlace destacada (encuadre en el índice)
   =================================================================== */

.seccion--compacta { padding: var(--e6) 0 var(--e12); }



.tarjeta-enlace {
  display: flex; align-items: center; gap: var(--e6);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e6) var(--e8); box-shadow: var(--sombra);
  color: inherit; text-decoration: none; transition: .18s;
}


.tarjeta-enlace:hover {
  text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra-hover);
  border-color: color-mix(in srgb, var(--azul-medio) 30%, var(--fondo));
}


.tarjeta-enlace__icono {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--azul-claro); color: var(--azul-oscuro);
}


.tarjeta-enlace__icono svg { width: 26px; height: 26px; }


.tarjeta-enlace__texto { display: grid; gap: var(--e1); }


.tarjeta-enlace__texto strong { font-size: var(--letra-19); letter-spacing: -.02em; color: var(--texto); }


.tarjeta-enlace__texto > span { font-size: var(--letra-15); color: var(--texto-suave); line-height: 1.55; }


.tarjeta-enlace__flecha {
  margin-left: auto; flex-shrink: 0; font-size: var(--letra-26); color: var(--azul-medio);
  transition: transform .18s;
}


.tarjeta-enlace:hover .tarjeta-enlace__flecha { transform: translateX(4px); }



@media (max-width: 620px) {
  .tarjeta-enlace { flex-wrap: wrap; gap: var(--e4); padding: var(--e6); }
  .tarjeta-enlace__flecha { display: none; }
}



/* ===================================================================
   Descargas: cuadricula de material de apoyo en PDF

   Mosaico de tarjetas, una por documento, cada una con su icono y su
   color. Se usa al pie de una seccion para ofrecer las deducciones
   completas sin interrumpir el hilo del apunte. Cada mosaico entero es
   un <a ... download>: se puede tocar en cualquier punto.
   =================================================================== */

.descargas {
  display: grid; gap: var(--e4); margin: 1.4em 0 .9em;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}


/* La cuadricula deja poco aire abajo porque casi siempre lleva debajo la
   linea de credito. Si va sola y cierra la seccion, recupera ese aire. */

.descargas:last-child { margin-bottom: 2em; }



/* Variante en columna: una ficha por renglon, para listas cortas donde
   importa mas el orden de lectura que ver muchas de un vistazo. */

.descargas--vertical { grid-template-columns: 1fr; }



/* ===================================================================
   Ficha del libro: portada e identificacion bibliografica al abrir una
   lectura complementaria. La portada va pequena, como identificador,
   no como ilustracion.
   =================================================================== */

.libro-ficha {
  display: flex; align-items: flex-start; gap: var(--e6);
  margin: 1.4em 0 2em; padding: var(--e6) var(--e6);
  background: var(--fondo-alt); border: 1px solid var(--borde);
  border-radius: var(--radio);
}


.libro-ficha img {
  flex-shrink: 0; width: 132px; height: auto; border-radius: 4px;
  box-shadow: var(--sombra); filter: var(--brillo-fig);
}


.libro-ficha__texto { min-width: 0; font-size: var(--letra-15); line-height: 1.6; color: var(--texto-suave); }


.libro-ficha__texto p { margin: 0 0 .7em; }


.libro-ficha__texto p:last-child { margin-bottom: 0; }


.libro-ficha__texto strong { color: var(--texto); }


.libro-ficha__pie { font-size: var(--letra-13); }



@media (max-width: 620px) {
  .libro-ficha { flex-direction: column; align-items: center; text-align: center; gap: var(--e4); padding: var(--e6); }
  .libro-ficha img { width: 118px; }
}


@media print {
  .libro-ficha { break-inside: avoid; background: none; }
}



/* Linea de credito: quien aporto el material. Va pegada a la cuadricula,
   en el tono suave del texto secundario, para no competir con las tarjetas. */

.descargas__credito {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: 0 0 2.4em; font-size: var(--letra-13); line-height: 1.55;
  color: var(--texto-suave);
}


/* El icono se alinea con la PRIMERA linea, no con el centro del bloque: en
   movil el texto ocupa dos lineas y centrado quedaba flotando en medio.
   Los 3px son la mitad de lo que sobra entre el alto de linea y el icono. */

.descargas__credito svg {
  flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px;
  color: var(--azul-medio);
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}


/* El texto va dentro de un unico <span>: si los nodos de texto y el <strong>
   fueran hijos directos del flex, el gap se colaria entre ellos y separaria
   el nombre del resto de la frase. */

.descargas__credito > span { min-width: 0; }


.descargas__credito strong { color: var(--texto); font-weight: 600; }



.descargas__item {
  display: flex; align-items: flex-start; gap: var(--e4);
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--e6) var(--e6); box-shadow: var(--sombra);
  color: inherit; text-decoration: none; transition: .18s;
}


.descargas__item:hover {
  text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra-hover);
  border-color: color-mix(in srgb, var(--azul-medio) 30%, var(--fondo));
}


.descargas__item:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 3px; }



.descargas__icono {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--azul-claro); color: var(--azul-oscuro);
}


.descargas__icono svg {
  width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}



/* Un color por documento, para distinguirlos de un vistazo. Las variables
   ya cambian solas en modo oscuro, asi que no hace falta repetirlas. */

.descargas__item--verde   .descargas__icono { background: var(--verde-claro);   color: var(--verde); }


.descargas__item--morado  .descargas__icono { background: var(--morado-claro);  color: var(--morado); }


.descargas__item--naranja .descargas__icono { background: var(--naranja-claro); color: var(--naranja); }



.descargas__texto { display: grid; gap: var(--e2); min-width: 0; }


.descargas__texto strong {
  font-size: var(--letra-17); letter-spacing: -.01em; color: var(--texto); line-height: 1.35;
}


.descargas__texto > span { font-size: var(--letra-15); color: var(--texto-suave); line-height: 1.5; }



.descargas__texto > .descargas__meta {
  display: inline-flex; align-items: center; gap: var(--e2); margin-top: 2px;
  font-size: var(--letra-13); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--azul-medio);
}


.descargas__meta svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}


.descargas__item:hover .descargas__meta svg { transform: translateY(2px); }



@media (max-width: 620px) {
  .descargas { gap: var(--e3); }
  .descargas__item { padding: var(--e4); gap: var(--e4); }
}




/* En papel, la rejilla a dos columnas y sin sombras. */

@media print {
  .posters { grid-template-columns: 1fr 1fr; gap: var(--e3); }
  .posters figure { box-shadow: none; break-inside: avoid; }
}



/* En papel un boton de descarga no sirve, pero el titulo si: se aplana la
   tarjeta y se le quita el relleno de color para no gastar tinta. */

@media print {
  .descargas { gap: var(--e2); }
  .descargas__item { box-shadow: none; padding: var(--e3) var(--e4); break-inside: avoid; }
  .descargas__icono { background: none; border: 1px solid #999; }
  .descargas__texto > .descargas__meta { color: #444; }
  .descargas__credito { margin-bottom: 1.4em; break-inside: avoid; }
}


/* Láminas de la sesión: algo más anchas, el texto de la diapositiva lo agradece */

.lamina img { max-width: min(800px, 100%); }


.lamina figcaption { font-size: var(--letra-13); }



/* --- Navegación entre apuntes --- */

.nav-apuntes { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e4); align-items: stretch; margin-top: 3.4em; padding-top: 2.2em; border-top: 1px solid var(--borde); }


.nav-apuntes__hueco { display: block; }


.nav-apuntes .centro { text-align: center; display: grid; align-content: center; min-width: 180px; }


.nav-apuntes .centro small { color: var(--azul-medio); }


.abierta {
  font: inherit; font-size: var(--letra-15); line-height: 1.6; color: var(--texto);
  width: 100%; background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: var(--e3) var(--e3); margin-top: var(--e2); resize: vertical;
  overflow: hidden;           /* crece solo: la altura la ajusta taller.js */
}



@media (max-width: 700px) {
  .obras, .obras--duo { grid-template-columns: 1fr; }
  .obras img { max-height: 46vh; }
  .emparejar { grid-template-columns: 1fr; gap: var(--e4); }
  .taller-barra { top: 0; }
  .actividad__cab h2 { font-size: var(--letra-17); }
  .lista-ej > li { flex-wrap: wrap; }
}



@media print {
  .taller-barra { display: none !important; }
  .hueco, .hueco-sel { background: none; border-bottom: 1px solid #000; }

  /* Un textarea no se parte entre páginas y recortaría las respuestas
     largas, así que se imprime su eco (.resp-impresa, lo mantiene al día
     taller.js) y el campo se oculta. Las reglas del eco y de los renglones
     en blanco están más abajo, en el bloque de impresión del cuestionario:
     son las mismas para los dos formatos de taller. */
  .abierta { display: none !important; }
  .revisar { display: none !important; }

  .actividad__cab { break-after: avoid; }
  .actividad { break-inside: auto; }
  .ejercicio  { break-inside: avoid; }
}



@media (max-width: 640px) {
  .visor__pie { font-size: var(--letra-13); max-height: 26vh; padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom)); }
  .visor__lienzo { padding: 0 var(--e2); }
}



@media print { .visor, .lupa-marca { display: none !important; } }


@media (max-width: 700px) {
  body { font-size: var(--letra-17); }
  .contenedor, .apunte-layout { padding: 0 var(--e4); }
  .nav__links a { padding: var(--e2) var(--e2); font-size: var(--letra-13); }
  .nav__marca small { display: none; }
  .hero { padding: var(--e12) 0 var(--e12); }
  .seccion { padding: var(--e12) 0; }
  .bloque { padding: var(--e6) var(--e6) var(--e6); }
  .fig-doble { grid-template-columns: 1fr; }
  .toc ol { column-count: 1; }
  .glosario div { grid-template-columns: 1fr; gap: var(--e1); }
  .nav-apuntes { grid-template-columns: 1fr; }
  .nav-apuntes .der, .nav-apuntes .centro { text-align: left; }
  .nav-apuntes .centro { min-width: 0; }
  .nav-apuntes__hueco { display: none; }
  .caja { padding: var(--e4) var(--e4); }
}



/* --- Impresión --- */

@media print {
  .nav, .toc, .apunte__acciones, .nav-apuntes, .pie, .miga,
  .encuadre__descarga, .tarjeta-enlace__flecha, .btn { display: none !important; }
  .apunte-layout { display: block; padding: 0; }
  body { font-size: 11pt; }
  .caja, figure, table { break-inside: avoid; }
  /* Índice: que las tarjetas no se partan entre páginas */
  .bloque, .instructor, .tarjeta-enlace, .glosario div { break-inside: avoid; }
  .seccion { padding: var(--e4) 0; border: none; background: none; }
  .hero { padding: 0 0 var(--e4); background: none; }
}



@media (max-width: 640px) {
  .candado { margin: var(--e6) auto var(--e16); padding: var(--e8) var(--e6) var(--e6); border-radius: var(--radio-sm); }
  .candado__titulo { font-size: var(--letra-22); }
  .candado__texto { font-size: var(--letra-15); margin-bottom: var(--e6); }
  .candado__fila { flex-direction: column; }
  .candado__btn { padding-block: var(--e3); }
}



/* ===================================================================
   Ficha biográfica de personaje (retrato + semblanza breve)
   =================================================================== */

.ficha {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--e6);
  align-items: start;
  margin: var(--e6) 0;
  padding: var(--e4) var(--e6);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--morado);
  border-radius: var(--radio-sm);
}


.ficha__retrato { margin: 0; }


.ficha__retrato img {
  width: 100%;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  display: block;
  filter: var(--brillo-fig);
}


.ficha .ficha__pie {
  margin: var(--e2) 0 0;
  font-size: var(--letra-13);
  line-height: 1.35;
  color: var(--texto-suave);
  text-align: center;
}


.ficha__cuerpo { min-width: 0; }


.ficha .ficha__etiqueta {
  margin: 0 0 3px;
  font-size: var(--letra-11);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--morado);
}


.ficha .ficha__nombre { margin: 0 0 var(--e2); font-size: var(--letra-19); line-height: 1.25; color: var(--texto); }


.ficha .ficha__cuerpo p { margin: 0 0 var(--e3); font-size: var(--letra-15); line-height: 1.62; }


.ficha .ficha__fuente {
  margin: var(--e3) 0 0 !important;
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  font-size: var(--letra-13) !important;
  color: var(--texto-suave);
}


@media (max-width: 620px) {
  .ficha { grid-template-columns: 1fr; gap: var(--e4); }
  .ficha__retrato { max-width: 190px; margin: 0 auto; }
}


@media print {
  .ficha { break-inside: avoid; }
}


.ficha__retrato { background: none; border: 0; padding: 0; }


.ficha__retrato figcaption { display: none; }



/* ===================================================================
   Cuestionario de lectura (Unidad 0 · Tema 0.2)
   =================================================================== */

.apunte ol.cuest { list-style: none; margin: var(--e6) 0 var(--e6); padding: 0; }


.apunte ol.cuest--inicio { counter-reset: cuest; }



.apunte ol.cuest > li {
  counter-increment: cuest;
  position: relative;
  margin: 0 0 var(--e4);
  padding: var(--e4) var(--e6) var(--e4) var(--e16);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--azul-medio);
  border-radius: var(--radio-sm);
  line-height: 1.62;
  break-inside: avoid;
}


.apunte ol.cuest > li::before {
  content: counter(cuest);
  position: absolute;
  left: 18px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-size: var(--letra-13);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}



/* Sub-preguntas a), b) ... */

.apunte ol.cuest--sub { counter-reset: sub; margin: var(--e3) 0 0; }


.apunte ol.cuest.cuest--sub > li {
  counter-increment: sub;
  padding: var(--e3) var(--e4) var(--e3) var(--e12);
  border-left-color: var(--verde);
  background: var(--fondo-alt);
  margin-bottom: var(--e3);
}


.apunte ol.cuest.cuest--sub > li::before {
  content: counter(sub, lower-alpha) ")";
  left: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--verde-claro);
  color: var(--verde);
  font-size: var(--letra-13);
}



/* Opciones para marcar (pregunta 8b) */

.apunte ul.cuest-opciones { list-style: none; margin: var(--e3) 0 var(--e1); padding: 0; }


.apunte ul.cuest-opciones > li {
  position: relative;
  margin: 0 0 var(--e2);
  padding: 2px 0 2px var(--e8);
  font-size: var(--letra-15);
  line-height: 1.58;
}


.apunte ul.cuest-opciones > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  border: 1.6px solid var(--gris-azul);
  border-radius: 4px;
  background: var(--fondo);
}



.apunte .cuest-nota {
  margin: var(--e3) 0 0;
  font-size: var(--letra-15);
  font-style: italic;
  color: var(--texto-suave);
}



.apunte .cuest-ensayo {
  margin: var(--e3) 0 0;
  padding: var(--e4) var(--e4);
  background: var(--morado-claro);
  border-radius: var(--radio-sm);
  color: var(--morado);
  font-size: var(--letra-17);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}



@media (max-width: 620px) {
  .apunte ol.cuest > li { padding: var(--e4) var(--e4) var(--e4) var(--e4); }
  .apunte ol.cuest > li::before { position: static; margin: 0 0 var(--e2); }
  .apunte ol.cuest.cuest--sub > li { padding: var(--e3) var(--e4); }
}




/* ===================================================================
   Respuestas del taller en pantalla (assets/js/respuestas.js)
   El alumno escribe aquí y el botón de impresión saca su taller resuelto.
   =================================================================== */


/* --- Barra de acciones y estado --- */

.resp-estado {
  font-size: var(--letra-13);
  color: var(--texto-suave);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}


.resp-estado::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--borde);
  flex-shrink: 0;
}


.resp-estado--ok::before  { background: var(--verde); }


.resp-estado--mal::before { background: var(--rojo); }


.resp-estado--mal { color: var(--rojo); }



.btn--peligro { background: var(--rojo) !important; color: #fff !important; border-color: transparent !important; }



.taller-barra .resp-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }



/* --- Datos del alumno --- */

.resp-identidad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e4) var(--e6);
  margin: var(--e6) 0 var(--e2);
  padding: var(--e6) var(--e6);
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}


.resp-identidad label {
  display: grid;
  gap: var(--e1);
  font-size: var(--letra-13);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-suave);
}


.resp-identidad input {
  font: inherit;
  font-size: var(--letra-15);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  padding: var(--e2) var(--e3);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
}


.resp-identidad input:focus-visible {
  outline: 2px solid var(--azul-medio);
  outline-offset: 1px;
  border-color: transparent;
}



/* --- Campo de respuesta --- */

.apunte textarea.resp {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: var(--e3) 0 2px;
  padding: var(--e3) var(--e4);
  font: inherit;
  font-size: var(--letra-15);
  line-height: 1.68;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--azul-claro);
  border-radius: 8px;
  resize: vertical;
  overflow: hidden;           /* crece solo: el scroll lo evita respuestas.js */
  transition: border-color .15s;
}


.apunte textarea.resp::placeholder { color: var(--texto-suave); opacity: .7; }


.apunte textarea.resp:focus-visible {
  outline: none;
  border-color: var(--azul-medio);
  border-left-color: var(--azul-medio);
}



/* Eco de la respuesta: invisible en pantalla, es lo que sale en papel */

.resp-impresa { display: none; }



/* --- Casillas de la pregunta 8b --- */

.apunte ul.cuest-opciones > li { padding-left: 0; }


.apunte ul.cuest-opciones > li::before { content: none; }



.resp-opcion {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--e3);
  align-items: start;
  cursor: pointer;
  font-size: var(--letra-15);
  line-height: 1.58;
}


.resp-opcion input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 2px 0 0;
  width: 18px; height: 18px;
  border: 1.6px solid var(--gris-azul);
  border-radius: 4px;
  background: var(--fondo);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}


.resp-opcion input[type="checkbox"]:checked {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
}


.resp-opcion input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}


.resp-opcion input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--azul-medio);
  outline-offset: 2px;
}


.resp-opcion:hover input[type="checkbox"] { border-color: var(--azul-medio); }



/* --- Recuadro para dibujar el esquema (pregunta 13) --- */

.resp-esquema { display: none; }



/* --- Encabezado que solo aparece en papel --- */

.hoja-cab { display: none; }



/* ===================================================================
   Impresión: la hoja que entrega el alumno
   =================================================================== */

@media print {
  .taller-barra, .resp-estado, .resp-acciones { display: none !important; }

  .hoja-cab {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: 0 0 var(--e3);
    margin: 0 0 var(--e4);
    border-bottom: 2px solid #00733f;
  }
  .hoja-cab img { width: 46px; height: auto; }
  .hoja-cab div { line-height: 1.35; }
  .hoja-cab strong { display: block; font-size: 11.5pt; color: #004f2c; }
  .hoja-cab span { font-size: 9pt; color: #58595b; }

  /* Datos del alumno: sin caja, como los campos de un formulario impreso */
  .resp-identidad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e6);
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 var(--e4);
  }
  .resp-identidad label {
    display: flex;
    align-items: baseline;
    gap: var(--e2);
    font-size: 8.5pt;
    color: #58595b;
  }
  .resp-identidad input {
    border: none;
    border-bottom: 0.5pt solid #999;
    border-radius: 0;
    padding: 0 2px 1px;
    font-size: 10pt;
    min-width: 4.5cm;
    background: none;
  }

  /* Las preguntas: sin tarjeta, con la respuesta debajo */
  .apunte ol.cuest > li {
    background: none;
    border: none;
    border-left: 2pt solid #00733f;
    border-radius: 0;
    padding: 2pt 0 2pt 34pt;
    margin: 0 0 12pt;
    break-inside: auto;
  }
  .apunte ol.cuest > li::before {
    background: none;
    color: #004f2c;
    border: 0.6pt solid #00733f;
    top: 2pt;
    left: 6pt;
    width: 20pt; height: 20pt;
  }
  .apunte ol.cuest.cuest--sub > li { background: none; border-left-color: #999; }
  .apunte ol.cuest.cuest--sub > li::before { border-color: #999; color: #58595b; }

  /* El textarea se sustituye por texto normal, que sí puede partirse
     entre páginas; un textarea recortaría las respuestas largas. */
  .apunte textarea.resp { display: none !important; }
  .resp-impresa {
    display: block;
    white-space: pre-wrap;
    margin: 6pt 0 4pt;
    padding: 0 0 4pt;
    font-size: 10.5pt;
    line-height: 1.55;
    border-bottom: 0.4pt solid #ccc;
  }
  /* Si no contestó, deja renglones en blanco para escribir a mano */
  .resp-impresa--vacia { border-bottom: none; }
  .resp-renglon {
    display: block;
    height: 15.5pt;
    border-bottom: 0.4pt solid #9aa0a6;
  }

  .resp-opcion { font-size: 10pt; }

  /* Recuadro en blanco para trazar el esquema de la pregunta 13 */
  .resp-esquema {
    display: block;
    height: 6cm;
    margin: 8pt 0 4pt;
    border: 0.6pt solid #bbb;
    border-radius: 3pt;
    break-inside: avoid;
  }
  .resp-esquema::after {
    content: "Espacio para trazar el esquema";
    display: block;
    padding: 4pt 6pt;
    font-size: 8pt;
    color: #999;
  }

  .apunte .cuest-ensayo {
    background: #fcf3e2;
    color: #004f2c;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}



/* Elementos de ayuda que no deben salir en la hoja impresa */

@media print { .solo-pantalla { display: none !important; } }



/* ===================================================================
   Modo teleprompter (assets/js/teleprompter.js)
   Pantalla completa oscura, al margen del tema claro/oscuro del sitio:
   en un salón se lee mejor en claro sobre oscuro.
   =================================================================== */

.tp {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  background: #05070a;
  color: #eef3f9;
}


.tp[hidden] { display: none; }


body.tp-abierto { overflow: hidden; }



/* --- Barra de mandos --- */

.tp__barra {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3) var(--e4);
  padding: var(--e3) var(--e6);
  border-bottom: 1px solid #1b2129;
  font-size: var(--letra-13); color: #8b98a8;
}


.tp__marca {
  font-weight: 700; color: #e8edf4; letter-spacing: .04em;
}


.tp__sitio { color: #f0a06a; font-weight: 600; font-variant-numeric: tabular-nums; }


.tp__mandos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-left: auto; }


.tp__mando { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--letra-13); }



.tp__rango {
  -webkit-appearance: none; appearance: none;
  width: 96px; height: 4px; border-radius: 99px;
  background: #29323d; outline: none; cursor: pointer;
}


.tp__rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: #f0a06a; cursor: pointer;
}


.tp__rango::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%; background: #f0a06a; cursor: pointer;
}


.tp__rango:focus-visible { outline: 2px solid #f0a06a; outline-offset: 3px; }



.tp__btn {
  padding: var(--e2) var(--e4); border-radius: 9px;
  border: 1px solid #242e3a; background: #131922; color: #c3ceda;
  font: inherit; font-size: var(--letra-13); font-weight: 600; cursor: pointer;
  transition: .15s;
}


.tp__btn:hover { border-color: #3a4756; color: #eef3f9; }


.tp__btn:focus-visible { outline: 2px solid #f0a06a; outline-offset: 2px; }


.tp__btn--pri { background: #f0a06a; border-color: #f0a06a; color: #10161d; }


.tp__btn--pri:hover { background: #f5b489; border-color: #f5b489; color: #10161d; }



/* --- Avance --- */

.tp__avance { height: 3px; background: #131922; }


.tp__avance i { display: block; height: 100%; width: 0; background: #f0a06a; transition: width .12s linear; }



/* --- Rollo --- */

.tp__vista { flex: 1; position: relative; overflow: hidden; }


.tp__guia {
  position: absolute; top: 38%; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(240, 160, 106, .45), transparent);
  pointer-events: none;
}


.tp__rollo {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 45vh 8vw 60vh;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--letra-38); line-height: 1.5;
  text-align: center;
  will-change: transform;
}


.tp__linea {
  margin: 0 0 var(--e8);
  color: #4d5b6b;                     /* lo que aún no toca leer, atenuado */
  transition: color .25s, opacity .25s;
}


.tp__linea--inicio { margin-top: var(--e12); }


.tp__linea:first-child { margin-top: 0; }


.tp__linea--activa { color: #f4f8fc; }


.tp__linea em { color: #f0a06a; font-style: italic; }


.tp__fin {
  margin: var(--e16) 0 0;
  font-family: var(--sans);
  font-size: var(--letra-15); letter-spacing: .16em; text-transform: uppercase;
  color: #3f4b59;
}



.tp__ayuda {
  margin: 0; padding: var(--e3) var(--e6) var(--e4);
  border-top: 1px solid #131922;
  font-size: var(--letra-11); letter-spacing: .02em; color: #55626f; text-align: center;
}



@media (max-width: 760px) {
  .tp__barra { padding: var(--e3) var(--e4); }
  .tp__mandos { width: 100%; margin-left: 0; justify-content: space-between; }
  .tp__rango { width: 74px; }
  .tp__rollo { padding: 40vh 6vw 60vh; font-size: var(--letra-26); }
  .tp__ayuda { display: none; }
}



@media print { .tp, .tp__abrir { display: none !important; } }



/* --- Teleprompter: aviso inicial y foco de la vista --- */

.tp__vista:focus { outline: none; }


.tp { cursor: ns-resize; }


.tp__barra, .tp__btn, .tp__rango { cursor: auto; }


.tp__btn, .tp__rango { cursor: pointer; }



.tp__pista {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--letra-13); letter-spacing: .04em;
  color: #6d7b8b; text-align: center;
  pointer-events: none;
  transition: opacity .4s;
}


.tp__pista--ida { opacity: 0; }

/* Acento propio del curso */
[data-tema="lectura"] {
  --azul-oscuro: #2c3f6b;
  --azul-medio: #45568f;
  --azul-claro: #e9e3d5;
  --verde: #3f6438;
  --verde-claro: #e7ecd8;
  --gris-azul: #55606c;
  --gris-azul-claro: #ece6da;
  --gris-calido: #5f5849;
  --gris-calido-claro: #f0e9d8;
  --morado: #6a3a7a;
  --morado-claro: #efe4ea;
  --rojo: #a3321f;
  --rojo-claro: #f6e0d6;
  --hero-1: rgba(69, 86, 143, .10);
  --hero-2: rgba(63, 100, 56, .07);
}



/* Las láminas de exposición son capturas con fondo blanco: fundirlas con el
   papel es mejor que teñirlas, porque el blanco desaparece en vez de
   convertirse en un recuadro crema más claro que el resto de la página.
   A las fotografías no se les aplica: multiply las ensuciaría. */

[data-tema="lectura"] .lamina img {
  background: transparent;
  filter: none;
  mix-blend-mode: multiply;
}



/* --- Botón de tres modos: se muestra el icono del modo activo y el
       título anuncia a cuál se pasa --- */

.tema-btn .sol,
.tema-btn .luna,
.tema-btn .libro { display: none; }



[data-tema="lectura"] .tema-btn .sol   { display: none; }



[data-tema="oscuro"] .tema-btn .sol  { display: none; }



/* ===================================================================
   Impresión: se imprime siempre sobre blanco, venga del modo que venga.
   Sin esto, mandar a papel desde lectura o desde oscuro arrastra el
   fondo crema o los tintes profundos de las cajas.
   =================================================================== */

@media print {
  :root,
  [data-tema="lectura"],
  [data-tema="oscuro"] {
    --azul-oscuro: #003366;
    --azul-medio: #0a4d8c;
    --azul-claro: #e8f0f9;
    --verde: #00643c;
    --verde-claro: #e6f4ec;
    --gris-azul: #465a6e;
    --gris-azul-claro: #eef2f7;
    --gris-calido: #5f5f69;
    --gris-calido-claro: #f2f2f6;
    --morado: #5a0078;
    --morado-claro: #f4ecf9;
    --naranja: #b46400;
    --naranja-claro: #fdf3e3;
    --rojo: #b41e1e;
    --rojo-claro: #fdeced;

    --texto: #1c2330;
    --texto-suave: #5b6675;
    --borde: #e2e8f0;
    --fondo: #ffffff;
    --fondo-alt: #ffffff;
    --tarjeta: #ffffff;
    --brillo-fig: none;
    --sombra: none;
    --sombra-hover: none;
    color-scheme: light;
  }
  [data-tema="lectura"] .lamina img { mix-blend-mode: normal; }
}



/* ===================================================================
   Recuadro plegable

   Es un <details> nativo: funciona sin JavaScript y el navegador se
   encarga del estado. Se usa para episodios y documentación que el
   lector puede consultar o saltarse sin perder el hilo del apunte;
   lo que sostiene el argumento va siempre en el texto corrido.

   Al imprimir se abren solos (main.js), porque en papel no hay dónde
   hacer clic.
   =================================================================== */

.plegable {
  margin: 1.6em 0;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--azul-medio);
  border-radius: var(--radio-sm);
  overflow: hidden;
}


.plegable + .plegable { margin-top: -0.6em; }



.plegable > summary {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e4);
  font-size: var(--letra-15);
  font-weight: 600;
  color: var(--azul-oscuro);
  cursor: pointer;
  list-style: none;
  transition: background .15s;
}


.plegable > summary::-webkit-details-marker { display: none; }


.plegable > summary:hover { background: var(--fondo-alt); }


.plegable > summary:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: -2px; }



/* Galón: apunta a la derecha cerrado, hacia abajo abierto */

.plegable > summary::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-left: 3px;
  border-right: 2px solid var(--azul-medio);
  border-bottom: 2px solid var(--azul-medio);
  transform: rotate(-45deg);
  transition: transform .2s;
}


.plegable[open] > summary::before { transform: rotate(45deg); }


.plegable[open] > summary { border-bottom: 1px solid var(--borde); }



.plegable__cuerpo { padding: var(--e4) var(--e4) var(--e4); }



/* Salvedad al pie del plegable: lo que hay que saber sobre la fuente */

.apunte .plegable__nota {
  margin: var(--e3) 0 0 !important;
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  font-size: var(--letra-13) !important;
  line-height: 1.6 !important;
  color: var(--texto-suave);
}


.apunte .plegable__cuerpo > p { margin: 0 0 var(--e3); font-size: var(--letra-15); line-height: 1.68; }


.apunte .plegable__cuerpo > p:last-child { margin-bottom: 0; }



@media (max-width: 620px) {
  .plegable > summary { padding: var(--e3) var(--e4); font-size: var(--letra-15); }
  .plegable__cuerpo { padding: var(--e3) var(--e4) var(--e4); }
}



@media print {
  /* En papel se imprimen abiertos y sin el galón, que ahí no significa nada */
  .plegable > summary::before { display: none; }
  .plegable > summary { padding-left: 0; font-size: 14px; }
  .plegable { break-inside: avoid; border-left-width: 2px; }
  .plegable__cuerpo { padding-left: 0; }
}



/* ===================================================================
   Diagrama «Del paradigma clásico a la revolución cuántica»

   Cuatro plegables, uno por supuesto, apilados en vertical. Al abrir
   cada uno se ve la cadena completa: lo que la física daba por sentado,
   lo que hizo saltar ese supuesto y lo que ocupó su lugar.

   Reutiliza el <details class="plegable"> del resto del apunte, así que
   no necesita JavaScript propio y se abre solo al imprimir.
   =================================================================== */

.relevo { margin: 2em 0 0; }



.relevo__intro {
  margin: 0 0 var(--e4);
  font-size: var(--letra-15); line-height: 1.62; color: var(--texto-suave);
}



/* Cada pilar lleva su tono, el mismo código de color que el apunte usa
   para los cuatro supuestos */

.relevo__pilar[data-tono="azul"]    { --tono: var(--azul-oscuro); --tono-suave: var(--azul-claro); }


.relevo__pilar[data-tono="verde"]   { --tono: var(--verde);       --tono-suave: var(--verde-claro); }


.relevo__pilar[data-tono="morado"]  { --tono: var(--morado);      --tono-suave: var(--morado-claro); }


.relevo__pilar[data-tono="naranja"] { --tono: var(--naranja);     --tono-suave: var(--naranja-claro); }



.relevo__pilar { border-left-color: var(--tono); margin: 0 0 var(--e3); }


.relevo__pilar + .relevo__pilar { margin-top: 0; }


.relevo__pilar > summary::before {
  border-right-color: var(--tono);
  border-bottom-color: var(--tono);
}


.relevo__pilar > summary:focus-visible { outline-color: var(--tono); }



/* Cabecera: pilar clásico, flecha, contraparte cuántica */

.relevo__par { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }


.relevo__de { color: var(--texto); }


.relevo__a  { color: var(--tono); }


.relevo__par svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--tono); stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
}



/* Cuerpo: la cadena, de arriba abajo */

.relevo__paso { padding: var(--e3) var(--e4); border-radius: var(--radio-sm); }


.relevo__paso--clasico  { background: var(--fondo-alt); }


.relevo__paso--cuantico { background: var(--tono-suave); }



.relevo__rotulo {
  display: block; margin-bottom: var(--e1);
  font-size: var(--letra-11); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-suave);
}


.relevo__paso--cuantico .relevo__rotulo { color: var(--tono); }


.apunte .relevo__paso p { margin: 0 !important; font-size: var(--letra-15) !important; line-height: 1.62 !important; }


.relevo__paso--cuantico p b { color: var(--tono); }



.apunte .relevo__transicion {
  display: flex; align-items: center; gap: var(--e3);
  margin: 0 !important; padding: var(--e3) var(--e4);
  font-size: var(--letra-13) !important; font-style: italic; line-height: 1.55 !important;
  color: var(--texto-suave);
}


.relevo__transicion::before {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-left: var(--e1);
  border-right: 2px solid var(--tono);
  border-bottom: 2px solid var(--tono);
  transform: rotate(45deg);
}



/* Franja de anomalías */

.relevo__anomalias {
  margin-top: var(--e4); padding: var(--e4) var(--e4);
  background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
}


.apunte .relevo__anomalias > p {
  margin: 0 0 var(--e3) !important;
  font-size: var(--letra-11) !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rojo);
}


.apunte .relevo__anomalias ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e3) var(--e4);
}


.apunte .relevo__anomalias li {
  margin: 0; padding: 0;
  font-size: var(--letra-13); line-height: 1.5; color: var(--texto-suave);
}


.relevo__anomalias b { display: block; color: var(--texto); font-weight: 600; }



@media (max-width: 620px) {
  .relevo__paso, .apunte .relevo__transicion { padding-left: var(--e3); padding-right: var(--e3); }
  .relevo__anomalias { padding: var(--e4); }
}



@media print {
  .relevo__pilar { break-inside: avoid; }
  .relevo__anomalias { break-inside: avoid; background: none; }
  .relevo__paso--clasico { background: none; }
}


/* Las unidades en una sola columna, una debajo de otra. */
.bloques { grid-template-columns: 1fr; }