/* ===================================================================
   Dibujo Asistido por Computadora II · Hoja de estilos
   =================================================================== */

:root {
  --azul-oscuro: #005a8c;
  --azul-medio: #0074b8;
  --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;
}

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; }
/* --- 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 la barra va justa: la «g» ocupa el lugar de la insignia del curso */
@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__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 título dice a cuál se pasa */
.tema-btn svg { display: none; }
.tema-btn .ico-claro { display: block; }
[data-tema="lectura"] .tema-btn .ico-claro,
[data-tema="oscuro"] .tema-btn .ico-claro { display: none; }
[data-tema="lectura"] .tema-btn .ico-lectura { display: block; }
[data-tema="oscuro"] .tema-btn .ico-oscuro { display: block; }
[data-tema="lectura"] .tema-btn { color: var(--naranja); }

/* --- Modo lectura: fondo de papel cálido ---
   Es un tercer valor de data-tema, no un atributo aparte: así el modo vale
   para todo el sitio con un solo botón que cicla claro -> lectura -> oscuro.
   El texto no es negro puro sino pardo oscuro: sobre crema el negro absoluto
   contrasta de más y cansa. Los acentos se corren hacia el cálido para que
   el azul no compita con el papel. */
[data-tema="lectura"] {
  --azul-oscuro: #33417d;
  --azul-medio: #4c5a9c;
  --azul-claro: #e9e4dd;
  --verde: #4a6a2f;
  --verde-claro: #e8ecd9;
  --gris-azul: #545f6b;
  --gris-azul-claro: #ece7db;
  --gris-calido: #5f5849;
  --gris-calido-claro: #f0e9d8;
  --morado: #6a3a7a;
  --morado-claro: #efe6e4;
  --naranja: #9c5a12;
  --naranja-claro: #f6ead4;
  --rojo: #a3321f;
  --rojo-claro: #f6e3d6;

  --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 figuras traen fondo blanco: se entibian para que no destellen */
  --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;
}

/* ===================================================================
   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); }
/* El icono de la unidad va dentro de la insignia y hereda su color. */
.bloque__num svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.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); }
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%); }
/* Los esquemas van en SVG en línea, no como imagen: heredan los colores del tema
   y no se pixelan al ampliar. Se dibujan con las variables de :root. */
.esquema {
  width: 100%; height: auto; display: block;
  max-width: min(760px, 100%); margin-inline: auto;
  background: var(--fondo-alt); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 4px 0;
}
.esquema text { font-family: inherit; fill: var(--texto); }
.esquema .eq-tenue { fill: var(--texto-suave); }
.esquema .eq-caja { fill: var(--tarjeta); stroke: var(--azul-medio); stroke-width: 1.3; }
.esquema .eq-marco { fill: none; stroke: var(--azul-oscuro); stroke-width: 1.5; }
.esquema .eq-linea { stroke: var(--azul-medio); stroke-width: 1.5; fill: none; }
.esquema .eq-gris  { fill: var(--gris-azul-claro); stroke: var(--gris-azul); stroke-width: 1.2; }
.esquema .eq-fina  { stroke: var(--texto-suave); stroke-width: 1; fill: none; }
/* Los escaneos traen fondo blanco opaco. En modo lectura se funden con el
   papel multiplicando: el blanco desaparece y solo quedan los trazos. */
[data-tema="lectura"] figure img { background: transparent; filter: none; mix-blend-mode: multiply; }

/* --- 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; }
/* Cuando el título va DENTRO de .tabla-envoltura, se muestra como barra de encabezado
   (evita que el margen negativo lo recorte contra el borde de la caja con overflow). */
.tabla-envoltura .tabla-titulo { margin: 0; padding: 0.7em 0.9em; border-bottom: 1px solid var(--borde); font-weight: 600; }

/* El título de tabla va en <caption> por accesibilidad: los lectores de pantalla
   lo anuncian junto con la tabla. Se estiliza igual que la antigua barra de encabezado. */
caption.tabla-titulo {
  caption-side: top;
  margin: 0;
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--borde);
  font-size: 13.6px;
  font-weight: 600;
  color: var(--texto-suave);
  text-align: center;
  background: var(--fondo);
}

/* --- 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);
}
/* El icono de la actividad va dentro de la insignia y hereda su color. */
.actividad__cab .n svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.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 de respuesta crece con el texto (lo estira taller.js), así que
   nunca queda texto escondido tras un scroll interno. */
.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. */
.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; }
}

/* ===================================================================
   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 */
/* ===================================================================
   Bloque de la propuesta del profesor
   Va después de las tarjetas de parcial y a propósito se ve distinto:
   no es una unidad del curso, es un ejemplo trabajado.
   =================================================================== */
.propuesta {
  display: flex; align-items: center; gap: 26px;
  padding: 28px 30px; border-radius: var(--radio);
  background: var(--tarjeta); box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--naranja);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a.propuesta:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-hover);
  border-color: color-mix(in srgb, var(--naranja) 34%, var(--fondo));
  border-left-color: var(--naranja); text-decoration: none;
}
.propuesta__marca {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--naranja-claro); color: var(--naranja);
}
.propuesta__marca svg {
  width: 27px; height: 27px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.propuesta__cuerpo { flex: 1 1 auto; min-width: 0; }
.propuesta__et {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--naranja);
}
.propuesta__cuerpo h3 { margin: 0 0 6px; font-size: 1.32rem; color: var(--texto); }
.propuesta__cuerpo p { margin: 0; font-size: 15.2px; color: var(--texto-suave); }
.propuesta__flecha { flex-shrink: 0; color: var(--texto-suave); font-size: 20px; }

@media (max-width: 620px) {
  .propuesta { flex-wrap: wrap; gap: 16px; padding: 24px; }
  .propuesta__cuerpo { flex-basis: 100%; }
  .propuesta__flecha { display: none; }
}

.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; }
}
@media print {
  .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; }
}

/* ===================================================================
   Tarjetas de parcial clicables y página de cada parcial
   =================================================================== */
a.bloque { text-decoration: none; color: inherit; }
a.bloque:hover { text-decoration: none; }
.bloque__pie .flecha { margin-left: auto; color: var(--texto-suave); font-size: 18px; }
.parcial-cab .volver { display: inline-block; margin-bottom: 14px; color: var(--texto-suave); font-size: 14px; }
.parcial-cab h1 { margin: 4px 0 10px; }
.parcial-cab .parcial-desc { color: var(--texto-suave); font-size: 16px; max-width: 62ch; margin: 0; }
.parcial-cab .parcial-sesiones-tit { margin-top: 30px; }

/* Cuerpo de una página de sesión */
.sesion-cuerpo { max-width: 820px; }
.sesion-cuerpo h2 { margin-top: 36px; }
.sesion-cuerpo h3 { margin-top: 26px; }
.sesion-cuerpo .sesion-sig { color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: 16px; margin-top: 28px; }

/* Nota dirigida al docente dentro del texto */
.nota-docente { font-style: italic; color: var(--texto-suave); }

/* Navegación entre sesiones, al pie del cuerpo de la sesión */
.nav-sesiones {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--borde);
}
.nav-sesiones a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm, 6px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.nav-sesiones a:hover { border-color: var(--acento, #2e6bd1); background: var(--fondo-alt, rgba(0,0,0,.03)); }
.nav-sesiones__ant { text-align: left; }
.nav-sesiones__sig { text-align: right; grid-column: 3; }
.nav-sesiones__ind {
  grid-column: 2;
  justify-content: center;
  text-align: center;
  color: var(--texto-suave);
  font-size: 14px;
}
.nav-sesiones .nav-sesiones__rotulo { font-size: 12.8px; color: var(--texto-suave); }
.nav-sesiones .nav-sesiones__titulo { font-size: 15px; font-weight: 600; line-height: 1.3; }
.nav-sesiones__hueco { grid-column: 1; }

@media (max-width: 620px) {
  .nav-sesiones { grid-template-columns: 1fr; }
  .nav-sesiones__sig, .nav-sesiones__ind, .nav-sesiones__hueco { grid-column: 1; }
  .nav-sesiones__sig { text-align: left; }
}

/* Micrologro: comprobación corta al cierre de un bloque de taller */
.micrologro {
  border-left: 3px solid var(--verde, #2e7d5b);
  background: var(--verde-claro, rgba(46,125,91,.08));
  padding: 0.7em 1em;
  margin: 1.1em 0 1.9em;
  border-radius: 0 var(--radio-sm, 6px) var(--radio-sm, 6px) 0;
  font-size: 15.2px;
}

/* ===================================================================
   Cuadro de áreas por zonas (acordeón)
   Cada zona es un <details> nativo: funciona sin JavaScript, es
   navegable con teclado y el resumen muestra el subtotal aunque
   esté cerrado, para poder leer el programa completo de un vistazo.
   =================================================================== */
.zonas { margin: 1.9em 0; }
.zonas__titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13.6px; font-weight: 600; color: var(--texto-suave);
  margin: 0 0 10px;
}
.zonas__todo {
  font: inherit; font-size: 12.6px; font-weight: 600;
  color: var(--texto-suave); background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; transition: .16s;
}
.zonas__todo:hover { color: var(--azul-oscuro); border-color: color-mix(in srgb, var(--azul-medio) 40%, var(--fondo)); background: var(--azul-claro); }
.zonas__todo:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }

.zona {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  margin-bottom: 8px;
  background: var(--tarjeta);
  overflow: hidden;
}
.zona > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--texto);
  transition: background-color .16s ease;
}
.zona > summary::-webkit-details-marker { display: none; }
.zona > summary:hover { background: var(--fondo-alt); }
.zona > summary:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: -2px; }
/* Triángulo propio, para controlarlo en ambos temas */
.zona > summary::before {
  content: ""; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 6px solid var(--azul-medio);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .18s ease;
}
.zona[open] > summary::before { transform: rotate(90deg); }
.zona[open] > summary { border-bottom: 1px solid var(--borde); background: var(--fondo-alt); }

.zona__nombre { flex: 1 1 auto; min-width: 0; }
.zona__datos { display: flex; align-items: baseline; gap: 12px; flex-shrink: 0; }
.zona__n { font-size: 12.8px; font-weight: 500; color: var(--texto-suave); }
.zona__m2 {
  font-size: 13.4px; font-weight: 700; color: var(--azul-oscuro);
  background: var(--azul-claro); border-radius: 999px; padding: 2px 11px;
  white-space: nowrap;
}
.zona table { font-size: 14.6px; }
.zona tbody tr:last-child td { border-bottom: none; }

/* ===================================================================
   Tabla plegable
   Misma mecánica que el acordeón de zonas pero genérica: un <details>
   nativo, sin JavaScript, con el título de la tabla en el <summary>.
   El <caption> se conserva para los lectores de pantalla y se oculta
   a la vista, porque de lo contrario el título saldría dos veces.
   =================================================================== */
.plegable {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  margin: 1.9em 0;
  background: var(--tarjeta);
  overflow: hidden;
}
.plegable > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--texto);
  transition: background-color .16s ease;
}
.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; }
.plegable > summary::before {
  content: ""; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 6px solid var(--azul-medio);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .18s ease;
}
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable[open] > summary { border-bottom: 1px solid var(--borde); background: var(--fondo-alt); }

.plegable__titulo { flex: 1 1 auto; min-width: 0; }
.plegable__pista {
  flex-shrink: 0;
  font-size: 12.8px; font-weight: 500; color: var(--texto-suave);
  white-space: nowrap;
}

/* La tabla ya vive dentro de un marco, así que no necesita el suyo. */
.plegable > table,
.plegable > .tabla-envoltura { margin: 0; border: 0; border-radius: 0; }
.plegable table { font-size: 14.6px; }
.plegable tbody tr:last-child td,
.plegable tbody tr:last-child th { border-bottom: none; }
.plegable table caption {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Caja de fuentes primarias --------------------------------------
   Va al cierre de un apartado y reúne los enlaces a la documentación
   del fabricante que respaldan lo que se acaba de leer. Plegada por
   omisión para no interrumpir la lectura; al imprimir se abre sola. */
.fuentes {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--gris-azul);
  border-radius: var(--radio-sm);
  margin: 2.2em 0 2.6em;
  background: var(--fondo-alt);
  overflow: hidden;
  font-size: 14.6px;
}
.fuentes > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--texto-suave);
  transition: background-color .16s ease, color .16s ease;
}
.fuentes > summary::-webkit-details-marker { display: none; }
.fuentes > summary:hover { background: var(--tarjeta); color: var(--texto); }
.fuentes > summary:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: -2px; }
.fuentes > summary::before {
  content: ""; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 5px solid var(--gris-azul);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
.fuentes[open] > summary::before { transform: rotate(90deg); }
.fuentes__titulo { flex: 1 1 auto; min-width: 0; }
.fuentes__pista {
  flex-shrink: 0; font-size: 12.4px; font-weight: 500;
  color: var(--texto-suave); white-space: nowrap;
}
.fuentes ul { margin: 0; padding: 2px 16px 14px 34px; }
.fuentes li { margin: 0 0 .6em; line-height: 1.5; color: var(--texto-suave); }
.fuentes li:last-child { margin-bottom: 0; }
.fuentes li a { font-weight: 600; }
.fuentes li b { color: var(--texto); font-weight: 600; }

@media print {
  .fuentes { break-inside: avoid; background: none; font-size: 10pt; }
  .fuentes > summary::before { display: none; }
  .fuentes > ul { display: block !important; }
}

/* --- Flashcards ------------------------------------------------------
   Repaso por tarjetas. No hay volteo en tres dimensiones a propósito:
   se sustituye el texto dentro de la misma caja. Un volteo real obliga
   a tener la cara trasera en el DOM desde el principio, rotada y
   oculta, y ahí cualquier contenido que necesite medirse (una tabla,
   una fórmula) calcula mal su ancho. */
.flash-zona { margin: 2em 0 2.6em; }
.flash-medidor {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; font-size: 13.6px; color: var(--texto-suave);
}
.flash-medidor__cuenta { font-weight: 650; color: var(--texto); white-space: nowrap; }
.flash-medidor__barra {
  flex: 1 1 auto; height: 5px; background: var(--borde);
  border-radius: 99px; overflow: hidden;
}
.flash-medidor__relleno {
  height: 100%; width: 0; background: var(--azul-medio);
  border-radius: 99px; transition: width .3s ease;
}
.flash-medidor__restan { white-space: nowrap; }

.flash {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 30px 26px; min-height: 210px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.flash:hover { border-color: var(--azul-medio); box-shadow: var(--sombra-hover); }
.flash:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 3px; }
.flash__cara {
  margin: 0 0 12px; font-size: 11.6px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}
.flash--vuelta .flash__cara { color: var(--azul-oscuro); }
.flash__texto { font-size: 17.5px; line-height: 1.55; max-width: 46ch; color: var(--texto); }
.flash--vuelta .flash__texto { font-size: 16.2px; }
.flash__pista { margin: 16px 0 0; font-size: 12.8px; color: var(--texto-suave); }

.flash__acciones { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.flash__acciones .btn { min-width: 132px; }
.flash__repasar { border-color: var(--naranja); color: var(--naranja); }
.flash__sabida  { background: var(--verde); border-color: var(--verde); }
.flash__sabida:hover { background: var(--verde); filter: brightness(.94); }

.flash__resumen {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 26px; text-align: center;
}
.flash__resumen-titulo { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--texto); }
.flash__resumen p { color: var(--texto-suave); margin: 0 0 14px; }

/* En papel no hay tarjetas que voltear: se imprime la baraja como lista. */
@media print {
  .flash-zona, .flash-medidor { display: none; }
}

/* --- Cuadrícula de apartados ----------------------------------------
   Índice visual al principio de una sesión larga. Cada tarjeta lleva a
   la subpágina de ese apartado, que se genera desde la propia sesión
   (ver taller-fuente/herramientas/subpaginas.py). Al imprimir se oculta:
   en papel la sesión va entera y el índice no aporta. */
.cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px;
  margin: 2em 0 2.4em;
  padding: 0;
  list-style: none;
}
.cuadricula__item { margin: 0; }
.cuadricula__enlace {
  display: flex; align-items: flex-start; gap: 13px;
  height: 100%; padding: 15px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--tarjeta);
  color: inherit; text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cuadricula__enlace:hover {
  border-color: var(--azul-medio);
  box-shadow: var(--sombra);
  transform: translateY(-1px);
}
.cuadricula__enlace:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }
.cuadricula__icono {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--azul-claro); color: var(--azul-oscuro);
}
.cuadricula__icono svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.cuadricula__texto { min-width: 0; }
.cuadricula__num {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--azul-medio); margin-bottom: 2px;
}
.cuadricula__titulo {
  display: block; font-weight: 600; line-height: 1.3; color: var(--texto);
  margin-bottom: 3px;
}
.cuadricula__pista { display: block; font-size: 13.2px; color: var(--texto-suave); line-height: 1.45; }

@media print { .cuadricula { display: none; } }

/* --- Subapartado plegable -------------------------------------------
   Para los tramos largos de un apartado que conviene poder cerrar. El
   h3 va DENTRO del summary, no fuera, para no perder la estructura de
   encabezados del documento ni el enlace desde el índice. */
.tema {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  margin: 1.9em 0;
  background: var(--tarjeta);
  overflow: hidden;
}
.tema > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; cursor: pointer; list-style: none;
  transition: background-color .16s ease;
}
.tema > summary::-webkit-details-marker { display: none; }
.tema > summary:hover { background: var(--fondo-alt); }
.tema > summary:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: -2px; }
.tema > summary::before {
  content: ""; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 7px solid var(--azul-medio);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .18s ease;
}
.tema[open] > summary::before { transform: rotate(90deg); }
.tema[open] > summary { border-bottom: 1px solid var(--borde); }
.tema > summary h3 {
  margin: 0; padding: 0; border: none;
  flex: 1 1 auto; min-width: 0;
  font-size: 1.1rem; color: var(--azul-oscuro);
  scroll-margin-top: calc(var(--alto-nav) + 20px);
}
.tema__pista {
  flex-shrink: 0; font-size: 12.8px; font-weight: 500;
  color: var(--texto-suave); white-space: nowrap;
}
.tema__cuerpo { padding: 4px 18px 10px; }
.tema__cuerpo > :first-child { margin-top: .6em; }
.tema__cuerpo > :last-child { margin-bottom: .4em; }
/* Una tabla plegable dentro de un subapartado plegable: se le cambia el
   fondo para que no queden dos tarjetas del mismo color, una sobre otra. */
.tema__cuerpo > .plegable { background: var(--fondo-alt); }

@media print {
  .tema { border: none; background: none; margin: 1.2em 0; }
  .tema > summary { padding: 0; }
  .tema > summary::before { display: none; }
  .tema[open] > summary { border-bottom: none; }
  .tema > .tema__cuerpo { display: block !important; padding: 0; }
}

/* Cuerpo de texto dentro de un desplegable (la tabla trae su propio espaciado,
   pero un bloque de prosa necesita respirar contra el borde). */
/* Serie de figuras en fila: varias imágenes que solo significan comparadas. */
.fig-serie { margin: 1.9em 0; }
.fig-serie__fila { display: grid; gap: 12px; align-items: end; }
.fig-serie__fila--2 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.fig-serie__fila--3 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.fig-serie__fila--4 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
/* Serie en vertical: cuando comparar exige que todas se vean del mismo tamaño. */
.fig-serie__fila--v { grid-template-columns: 1fr; gap: 16px; align-items: stretch; }

/* Figura clave: rompe el ancho de la columna de texto para que se lea de verdad. */
/* Se ensancha la imagen, NO la figura: si el figcaption hereda el margen
   negativo, el pie se sale de la caja de texto y se corta al imprimir. */
.fig-media--grande > img {
  max-width: none;
  width: calc(100% + 2 * min(6vw, 70px));
  margin-inline: calc(-1 * min(6vw, 70px));
}
@media (max-width: 760px) { .fig-media--grande > img { width: 100%; margin-inline: 0; } }
@media print { .fig-media--grande > img { width: 100%; margin-inline: 0; } }
.fig-serie figure { margin: 0; }
.fig-serie img {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
.fig-serie__pie {
  margin: 6px 0 0; font-size: 13px; color: var(--texto-suave); text-align: center;
}
.fig-serie > figcaption {
  margin-top: 12px; font-size: 14.2px; color: var(--texto-suave); line-height: 1.55;
}
.fig-serie__fuente { display: block; margin-top: 5px; font-size: 12.8px; font-style: italic; }

.zona__cuerpo { padding: 4px 18px 16px; }
.zona__cuerpo > :first-child { margin-top: 10px; }
.zona__cuerpo > :last-child { margin-bottom: 0; }
.zona__cuerpo p, .zona__cuerpo li { font-size: 15.4px; }

.zonas__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 0; padding: 11px 16px;
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--fondo-alt); color: var(--texto-suave); font-size: 14.6px;
}
.zonas__total + .zonas__total { margin-top: 6px; }
.zonas__total strong { color: var(--texto); font-size: 15.4px; white-space: nowrap; }
.zonas__total--final {
  border-color: color-mix(in srgb, var(--azul-medio) 38%, var(--fondo));
  background: var(--azul-claro);
}
.zonas__total--final strong { color: var(--azul-oscuro); }

@media (max-width: 560px) {
  .zona > summary { flex-wrap: wrap; }
  .zona__n { display: none; }
}

/* ===================================================================
   Cabecera de sesión: volver + imprimir
   =================================================================== */
.cab-acciones {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.cab-acciones .volver { margin-bottom: 0; }

.imprimir-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--texto-suave); background: var(--fondo-alt);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.imprimir-btn:hover {
  color: var(--azul-oscuro);
  border-color: color-mix(in srgb, var(--azul-medio) 42%, var(--fondo));
  background: var(--azul-claro);
}
.imprimir-btn:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }
/* Nace oculto y solo lo muestra el JS: sin scripts, imprimir se hace con Ctrl+P */
.imprimir-btn[hidden] { display: none; }
.imprimir-btn svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 520px) { .imprimir-btn span { display: none; } .imprimir-btn { padding: 7px 9px; } }

/* ===================================================================
   Descarga de un material imprimible (fichas, plantillas, formatos)
   Bloque ancho y evidente: se usa dentro del cuerpo de la sesión,
   no en la barra de acciones.
   =================================================================== */
.descarga {
  display: flex; align-items: center; gap: 16px;
  margin: 26px 0; padding: 16px 18px;
  background: var(--fondo-alt); border: 1px solid var(--borde);
  border-left: 4px solid var(--azul-oscuro); border-radius: 10px;
}
.descarga__icono {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--azul-claro); color: var(--azul-oscuro);
}
.descarga__icono svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.descarga__cuerpo { flex: 1 1 auto; min-width: 0; }
.descarga__titulo { margin: 0 0 3px; font-weight: 700; color: var(--texto); }
.descarga__nota { margin: 0; font-size: 14.5px; color: var(--texto-suave); }
.descarga .btn { flex-shrink: 0; }

@media (max-width: 560px) {
  .descarga { flex-wrap: wrap; gap: 12px; }
  .descarga__cuerpo { flex-basis: calc(100% - 56px); }
  .descarga .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Al imprimir la sesión, el botón no sirve: queda la dirección visible. */
@media print {
  .descarga { border-left-color: #999; }
  .descarga .btn { display: none; }
  .descarga__nota::after { content: " · ibero-dacii.pages.dev"; }
}

/* ===================================================================
   Impresión de una sesión
   Se fuerza la paleta clara (aunque el usuario tenga el tema oscuro),
   se ocultan los elementos de navegación y se evita partir cajas.
   =================================================================== */
@media print {
  :root, [data-tema="lectura"], [data-tema="oscuro"] {
    --texto: #111; --texto-suave: #444; --borde: #bbb;
    --fondo: #fff; --fondo-alt: #fff; --tarjeta: #fff;
    --azul-oscuro: #14456b; --azul-medio: #1d5f94; --azul-claro: #eef4fa;
    --verde: #14503a; --verde-claro: #eef6f1;
    --gris-azul: #3c4a58; --gris-azul-claro: #f0f3f6;
    --gris-calido: #4a4a52; --gris-calido-claro: #f4f4f6;
    --morado: #4a1264; --morado-claro: #f4eef8;
    --naranja: #8a4d00; --naranja-claro: #fbf3e7;
    --rojo: #8c1717; --rojo-claro: #fbeef0;
    --sombra: none; --sombra-hover: none; --brillo-fig: none;
  }

  .nav, .pie, .nav-sesiones, .cab-acciones, .menu, .tema-btn, .zonas__todo { display: none !important; }
  /* --- 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 huecos 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; }

  /* Los <details> se abren por JS antes de imprimir; el triángulo sobra en papel */
  .zona > summary::before,
  .plegable > summary::before { display: none; }
  .zona, .zonas__total { break-inside: avoid; page-break-inside: avoid; }

  /* En papel una tabla plegable es una tabla normal con su título encima */
  .plegable { border: 0; margin: 1.4em 0; break-inside: avoid; page-break-inside: avoid; }
  .plegable > summary { padding: 0 0 6px; background: none !important; border: 0 !important; }
  .plegable__pista { display: none; }

  body { background: #fff; font-size: 10.5pt; line-height: 1.5; }
  .seccion { padding: 0 !important; }
  .contenedor { max-width: none; padding: 0; }

  /* Nada de elementos partidos entre páginas */
  .caja, figure, table, .tabla-envoltura, .micrologro { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  h2 { margin-top: 1.4em; }
  img, svg { max-height: 42vh; }

  .caja, .tabla-envoltura, .micrologro { box-shadow: none; }
  a { color: inherit; text-decoration: none; }

  /* El título de la sesión encabeza la primera hoja */
  .parcial-cab h1 { font-size: 20pt; margin-bottom: .3em; }
  .parcial-desc { font-size: 10.5pt; }
}