/* ===================================================================
   Sistemas Estructurales I — Hoja de estilos
   =================================================================== */

:root {
  --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: #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;

  --radio: 14px;
  --radio-sm: 9px;
  --sombra: 0 1px 2px rgba(16, 30, 54, .04), 0 6px 20px rgba(16, 30, 54, .06);
  --sombra-hover: 0 2px 4px rgba(16, 30, 54, .06), 0 14px 34px rgba(16, 30, 54, .12);
  --ancho: 1140px;
  --sans: "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;
  --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: #e5ecf4;
  --texto-suave: #97a5b6;
  --borde: #27313f;
  --fondo: #0f1520;
  --fondo-alt: #151d2a;
  --tarjeta: #182131;
  --nav-fondo: rgba(15, 21, 32, .88);
  --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;
  --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) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  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.25; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }

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

/* ===================================================================
   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);
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__marca { display: flex; align-items: center; gap: 11px; 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: 13px; font-weight: 800; letter-spacing: -.03em;
}
.nav__marca span { font-size: 15px; }
.nav__marca small { display: block; font-size: 11.5px; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.nav__links { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav__links a {
  color: var(--texto-suave); font-size: 14.5px; font-weight: 500;
  padding: 7px 13px; 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: 7px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--texto); background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: 9px;
  padding: 8px 13px; 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: 8px;
}
.menu__panel[hidden] { display: none; }

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

.menu__lista { list-style: none; margin: 0 0 4px; padding: 0; }
.menu__lista li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radio-sm);
}
.menu__lista li:hover { background: var(--fondo-alt); }
.menu__clave { font-size: 12.5px; font-weight: 800; color: var(--azul-medio); }
.menu__tema { font-size: 14.3px; color: var(--texto); line-height: 1.4; }
.menu__accesos { display: flex; gap: 6px; }
.menu__accesos a {
  font-size: 12.3px; font-weight: 600; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 999px; padding: 3px 11px;
  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: 11.5px; color: var(--texto-suave); font-style: italic; white-space: nowrap; }

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

.menu__respaldo { margin-left: auto; font-size: 14.5px; 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: 7px 9px; }

  /* 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: 4px 6px calc(16px + 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 14px; margin: 14px 0 4px; }
  .menu__lista li {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 8px; padding: 11px 14px; align-items: start;
  }
  .menu__tema { font-size: 15px; }
  .menu__accesos, .menu__pendiente { grid-column: 2; }
  .menu__accesos a { padding: 8px 16px; font-size: 13.2px; }
  .menu__inicio { padding: 14px; margin-top: 8px; }
}

/* --- Interruptor de tema --- */
.tema-btn {
  margin-left: 6px; 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);
  padding: 76px 0 68px;
}
.hero__etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--azul-medio); background: var(--tarjeta);
  border: 1px solid color-mix(in srgb, var(--azul-medio) 22%, var(--fondo)); border-radius: 999px; padding: 6px 15px; margin-bottom: 22px;
}
.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 30px; }
.hero__datos { display: flex; flex-wrap: wrap; gap: 12px; }
.dato {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
  padding: 9px 16px; font-size: 14px; color: var(--texto-suave);
}
.dato strong { color: var(--texto); font-weight: 600; }

/* ===================================================================
   Secciones
   =================================================================== */
.seccion { padding: 62px 0; }
.seccion--alt { background: var(--fondo-alt); border-block: 1px solid var(--borde); }
.seccion__titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--azul-medio); margin-bottom: 6px; }
.seccion__desc { color: var(--texto-suave); margin: 0 0 34px; 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: 24px; }

.bloque {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px 30px 26px; 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(-3px); 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: 15px; margin-bottom: 16px; }
.bloque__num {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px; 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: 1.32rem; margin: 3px 0 3px; }
.bloque__cab p { margin: 0; font-size: 13.5px; color: var(--texto-suave); }
.bloque > p { color: var(--texto-suave); font-size: 15.2px; margin: 0 0 20px; }

.subtemas { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.subtemas li a, .subtemas li span {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: var(--radio-sm);
  background: var(--fondo-alt); border: 1px solid transparent;
  font-size: 15px; 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); }
.subtemas .clave { font-weight: 700; color: var(--azul-medio); font-size: 13px; min-width: 26px; }
.bloque--2 .subtemas .clave { color: var(--verde); }
.subtemas .flecha { margin-left: auto; color: var(--texto-suave); font-size: 15px; }

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

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  padding: 4px 11px; 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: 34px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 34px 38px; 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: 1.42rem; margin: 0 0 3px; letter-spacing: -.025em; }
.instructor__rol { font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--azul-medio); margin: 0 0 12px; }
.instructor__nota { margin: 0; color: var(--texto-suave); font-size: 15.2px; line-height: 1.6; }

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

/* ===================================================================
   Botones
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: .18s;
}
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--azul-oscuro); color: #fff; }
.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 24px;
  display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 52px;
  align-items: start;
}

.toc {
  position: sticky; top: calc(var(--alto-nav) + 26px);
  max-height: calc(100vh - var(--alto-nav) - 52px); overflow-y: auto;
  padding: 26px 0 40px; font-size: 14px;
}
.toc__titulo { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.toc li a {
  display: block; padding: 6px 0 6px 15px; 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: 27px; font-size: 13.3px; }

.apunte { padding: 26px 0 80px; min-width: 0; max-width: 780px; }

.miga { font-size: 13.5px; color: var(--texto-suave); margin-bottom: 20px; }
.miga a { color: var(--texto-suave); }
.miga span { margin: 0 7px; opacity: .55; }

.apunte__cab { padding-bottom: 30px; border-bottom: 1px solid var(--borde); margin-bottom: 12px; }
.apunte__cab .etiqueta {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul-medio); background: var(--azul-claro); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.apunte__cab h1 { font-size: clamp(1.95rem, 4.2vw, 2.7rem); margin-bottom: .3em; }
.apunte__cab .bajada { color: var(--texto-suave); font-size: 1.05rem; margin: 0 0 22px; }
.apunte__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.apunte h2 {
  font-size: 1.58rem; margin: 2.4em 0 .7em; padding-top: .35em;
  scroll-margin-top: calc(var(--alto-nav) + 20px);
}
.apunte h2:first-of-type { margin-top: 1.6em; }
.apunte h3 { font-size: 1.17rem; margin: 1.9em 0 .55em; color: var(--azul-oscuro); scroll-margin-top: calc(var(--alto-nav) + 20px); }
.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: 18px;
  margin: 3.4em 0 2em; color: var(--azul-oscuro);
  font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  scroll-margin-top: calc(var(--alto-nav) + 20px);
}
.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 {
  border-radius: var(--radio-sm); border: 1px solid; border-left-width: 4px;
  padding: 19px 22px; margin: 1.7em 0; font-size: 16px;
}
.caja__titulo { font-weight: 700; font-size: 14.5px; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.caja p:last-child, .caja ul:last-child, .caja ol:last-child { margin-bottom: 0; }
.caja ul, .caja ol { margin-bottom: .6em; }

.caja--definicion { background: var(--azul-claro); border-color: color-mix(in srgb, var(--azul-oscuro) 32%, var(--azul-claro)); border-left-color: var(--azul-oscuro); }
.caja--definicion .caja__titulo { color: var(--azul-oscuro); }
.caja--concepto { background: var(--verde-claro); border-color: color-mix(in srgb, var(--verde) 32%, var(--verde-claro)); border-left-color: var(--verde); }
.caja--concepto .caja__titulo { color: var(--verde); }
.caja--alerta { background: var(--gris-azul-claro); border-color: color-mix(in srgb, var(--gris-azul) 32%, var(--gris-azul-claro)); border-left-color: var(--gris-azul); }
.caja--alerta .caja__titulo { color: var(--gris-azul); }
.caja--recordatorio { background: var(--gris-calido-claro); border-color: color-mix(in srgb, var(--gris-calido) 32%, var(--gris-calido-claro)); border-left-color: var(--gris-calido); }
.caja--recordatorio .caja__titulo { color: var(--gris-calido); }
.caja--reflexion { background: var(--morado-claro); border-color: color-mix(in srgb, var(--morado) 32%, var(--morado-claro)); border-left-color: var(--morado); }
.caja--reflexion .caja__titulo { color: var(--morado); }
.caja--practica { background: var(--naranja-claro); border-color: color-mix(in srgb, var(--naranja) 32%, var(--naranja-claro)); 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: 13.6px; color: var(--texto-suave); line-height: 1.55; margin-top: 11px; text-align: center; }
figcaption b { color: var(--texto); font-weight: 600; }
.fig-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.fig-doble figcaption { margin-top: 9px; font-size: 12.8px; }
.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); border-radius: var(--radio-sm); }
table { width: 100%; border-collapse: collapse; font-size: 15.2px; }
thead th {
  background: var(--fondo-alt); text-align: left; font-weight: 700; font-size: 13.5px;
  letter-spacing: .02em; color: var(--azul-oscuro); padding: 13px 17px; border-bottom: 2px solid var(--borde);
}
tbody td { padding: 13px 17px; border-bottom: 1px solid var(--borde); 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: 13.6px; 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: 6px;
  -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: 8px; }
.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: 13px; font-weight: 700; color: var(--azul-oscuro); margin-bottom: 8px; }
.hito__punto { width: 13px; height: 13px; border-radius: 50%; background: var(--tarjeta); border: 3px solid var(--azul-medio); margin: 0 auto 12px; position: relative; z-index: 1; }
.hito__texto { font-size: 12.4px; color: var(--texto-suave); line-height: 1.45; padding: 0 6px; }

/* --- 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: 18px; padding: 14px 18px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); font-size: 15.2px; }
.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: 15px; }
.referencias li { margin-bottom: .8em; }
.creditos { font-size: 13.2px; color: var(--texto-suave); background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 17px 20px; margin-top: 2.2em; line-height: 1.6; }

/* --- Navegación entre apuntes --- */
.nav-apuntes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; 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: 16px 19px;
  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: 12px; color: var(--texto-suave); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.nav-apuntes strong { font-size: 15.2px; 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: 12px;
  padding: 13px 18px; margin: 0 0 30px;
  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: 14.5px; color: var(--texto-suave); margin-right: auto; }
.taller-barra .marcador strong { color: var(--texto); }
.taller-barra .btn { padding: 8px 15px; font-size: 13.8px; }

.actividad {
  margin: 2.6em 0 0; padding-top: .4em;
  scroll-margin-top: calc(var(--alto-nav) + 76px);
}
.actividad__cab {
  display: flex; align-items: center; gap: 13px;
  background: var(--azul-oscuro); color: var(--fondo);
  border-radius: var(--radio-sm); padding: 13px 20px; margin-bottom: 18px;
}
[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: 13.5px; font-weight: 800;
  background: rgba(255, 255, 255, .22);
}
.actividad__cab h2 { font-size: 1.16rem; 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: 15px; }
.pista .caja__titulo { color: var(--naranja); }

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

/* --- Campos --- */
.hueco, .hueco-sel {
  font: inherit; font-size: 15.5px; 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 8px; 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: 4px 6px; }
.abierta {
  font: inherit; font-size: 15.5px; line-height: 1.6; color: var(--texto);
  width: 100%; background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  padding: 10px 13px; margin-top: 7px; 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: 5px; vertical-align: middle; margin-right: 9px; }
.eleccion button {
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  min-width: 34px; padding: 7px 9px; 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: 8px 20px; margin: 8px 0 0; }
.opciones label { display: inline-flex; align-items: center; gap: 7px; font-size: 15.5px; cursor: pointer; }
.opciones input { accent-color: var(--azul-medio); width: 16px; height: 16px; }

.lista-ej { list-style: none; padding: 0; margin: 12px 0 0; }
.lista-ej > li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 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: 6px; }

/* --- 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: 14px; font-weight: 700; margin-left: 7px; vertical-align: middle; }
.marca.ok  { color: var(--verde); }
.marca.no  { color: var(--naranja); }
.revisar {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 13.2px; color: var(--texto-suave);
  background: var(--gris-calido-claro); border: 1px solid var(--borde);
  border-radius: 999px; padding: 4px 12px;
}
.revisar a { font-weight: 600; }

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

.flujo { display: grid; gap: 12px; margin: 14px 0 0; }
.flujo__fila { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 15.5px; }
.ficha { background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 14px; 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: 14px; margin-top: 14px; align-items: center; }
.mapa .nodo { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 14px 16px; text-align: center; font-size: 15px; background: var(--fondo-alt); }
.mapa .nodo strong { display: block; margin-bottom: 6px; color: var(--azul-oscuro); }

.obras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-top: 14px; }
.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: 9px; font-size: 14.5px; display: grid; gap: 7px; }

@media (max-width: 700px) {
  .obras, .obras--duo { grid-template-columns: 1fr; }
  .obras img { max-height: 46vh; }
  .emparejar { grid-template-columns: 1fr; gap: 16px; }
  .taller-barra { top: 0; }
  .actividad__cab h2 { font-size: 1.05rem; }
  .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: 5px;
    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: 12px;
  padding: 10px 14px; flex-shrink: 0;
  color: #e8eef6; font-size: 13.5px;
}
.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 14px;
  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: 10px; }
/* 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: 12px 18px calc(12px + env(safe-area-inset-bottom));
  color: #c3cede; font-size: 13.2px; 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: 12.6px; max-height: 26vh; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .visor__lienzo { padding: 0 6px; }
}

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

/* ===================================================================
   Pie de página
   =================================================================== */
.pie { background: var(--fondo-alt); border-top: 1px solid var(--borde); padding: 44px 0 38px; font-size: 14px; color: var(--texto-suave); }
.pie__inner { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: flex-start; }
.pie strong { color: var(--texto); display: block; margin-bottom: 5px; font-size: 15px; }
.pie__nota { max-width: 470px; font-size: 13.2px; line-height: 1.6; }

/* ===================================================================
   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: 18px 20px; margin: 22px 0 4px;
  }
  .toc ol { column-count: 2; column-gap: 26px; }
  .toc li { break-inside: avoid; }
  .apunte { max-width: none; }
}
@media (max-width: 700px) {
  body { font-size: 16.4px; }
  .contenedor, .apunte-layout { padding: 0 18px; }
  .nav__links a { padding: 7px 9px; font-size: 13.6px; }
  .nav__marca small { display: none; }
  .hero { padding: 52px 0 46px; }
  .seccion { padding: 46px 0; }
  .bloque { padding: 24px 22px 22px; }
  .fig-doble { grid-template-columns: 1fr; }
  .toc ol { column-count: 1; }
  .glosario div { grid-template-columns: 1fr; gap: 4px; }
  .nav-apuntes { grid-template-columns: 1fr; }
  .nav-apuntes .der { text-align: left; }
  .caja { padding: 16px 17px; }
}

/* --- 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: 5px; 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 {
  max-width: 560px; margin: 40px auto 80px; text-align: center;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 44px 34px 34px;
}

.candado__marca {
  width: 66px; height: 66px; margin: 0 auto 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul-medio);
}
.candado__marca svg {
  width: 32px; height: 32px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.candado__marca circle { fill: currentColor; stroke: none; }

.candado__etiqueta {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave); margin: 0 0 8px;
}
.candado__titulo { font-size: 25px; line-height: 1.25; margin: 0 0 14px; color: var(--texto); }
.candado__texto {
  color: var(--texto-suave); font-size: 15.5px; line-height: 1.6;
  margin: 0 auto 26px; max-width: 42ch;
}

.candado__forma { margin: 0; }
.candado__rotulo {
  display: block; text-align: left; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 7px;
}
.candado__fila { display: flex; gap: 10px; align-items: stretch; }

.candado__campo {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 15px; font-size: 17px; font-family: inherit; font-weight: 600;
  letter-spacing: .06em; text-align: center;
  color: var(--texto); background: var(--fondo-alt);
  border: 1.5px solid var(--borde); border-radius: 10px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.candado__campo::placeholder { font-weight: 400; letter-spacing: normal; }
.candado__campo:focus {
  outline: none; background: var(--fondo); border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-medio) 18%, transparent);
}
.candado__campo:read-only { opacity: .65; }

.candado__btn { flex: 0 0 auto; padding-inline: 24px; justify-content: center; }
.candado__btn:disabled { opacity: .6; cursor: progress; }

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

.candado__pie {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--borde);
  font-size: 13.5px; color: var(--texto-suave);
}
.candado__pie a { color: var(--azul-medio); font-weight: 600; }

/* Aviso de grupo una vez abierto */
.candado__sello {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 16px 0 0; padding: 7px 14px; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde);
  font-size: 13.5px; 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;
}

/* 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: 20px auto 56px; padding: 34px 20px 26px; border-radius: var(--radio-sm); }
  .candado__titulo { font-size: 21px; }
  .candado__texto { font-size: 15px; margin-bottom: 22px; }
  .candado__fila { flex-direction: column; }
  .candado__btn { padding-block: 13px; }
}
/* ===================================================================
   Láminas de la sesión — las diapositivas dentro del apunte
   =================================================================== */
.lamina { margin: 26px 0 30px; }
.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: 18px 0 22px; }
}

@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; }
}