/* ============================================================
   Análisis Matemático II — Eduardo Espinoza Ramos
   Hoja de estilo del libro HTML reconstruido
   ============================================================ */

:root{
  /* Paleta clara (libro impreso) */
  --bg:           #fbfaf6;
  --paper:        #ffffff;
  --fg:           #1a1a1f;
  --fg-soft:      #3a3a44;
  --muted:        #6c6c78;
  --rule:         #e1ddd0;
  --accent:       #1d4ed8;          /* azul de respuestas finales */
  --accent-soft:  #eef3ff;
  --thm-bg:       #fff8e6;          /* amarillo callout TEOREMA */
  --thm-border:   #f3c969;
  --thm-fg:       #6b4f0b;
  --proof-rule:   #c8c8c2;
  --def-bg:       #f4f1e8;
  --boxed-bg:     #f6f4ec;
  --boxed-border: #d4d0c1;
  --code-bg:      #f3f0e6;

  --sidebar-bg:   #f3f1e8;
  --sidebar-fg:   #23232a;
  --sidebar-current-bg: #1d4ed8;
  --sidebar-current-fg: #ffffff;

  --shadow:       0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);

  /* Tipografía — Source Serif 4 (Adobe, cargado desde Google Fonts) con
     fallbacks a fuentes del sistema para que algo se vea aunque la red
     falle. Iowan Old Style queda como segundo en macOS por estética. */
  --serif: "Source Serif 4","Iowan Old Style","Charter","Georgia","Cambria",serif;
  --sans:  -apple-system, BlinkMacSystemFont,"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:  ui-monospace,"SF Mono","Menlo",Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:           #15151b;
    --paper:        #1c1c24;
    --fg:           #e8e8ec;
    --fg-soft:      #cfcfd6;
    --muted:        #94949f;
    --rule:         #2e2e38;
    --accent:       #7aa9ff;
    --accent-soft:  #1b2440;
    --thm-bg:       #2a2412;
    --thm-border:   #6b4f0b;
    --thm-fg:       #e8c876;
    --proof-rule:   #4a4a52;
    --def-bg:       #20202a;
    --boxed-bg:     #232330;
    --boxed-border: #36363f;
    --code-bg:      #1f1f27;
    --sidebar-bg:   #1a1a22;
    --sidebar-fg:   #e8e8ec;
    --shadow:       0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  }
  img.diagrama, img.figura{ filter: invert(.92) hue-rotate(180deg); }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height:100vh;
}
nav.sidebar{
  position:sticky; top:0; align-self:start;
  height:100vh; overflow-y:auto;
  background:var(--sidebar-bg); color:var(--sidebar-fg);
  border-right:1px solid var(--rule);
  padding:22px 18px;
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.45;
}
nav.sidebar .brand{
  font-family:var(--serif);
  font-weight:700;
  font-size:15px;
  margin:0 0 2px 0;
  line-height:1.25;
}
nav.sidebar .brand a{ color:inherit; }
nav.sidebar .author{
  color:var(--muted);
  font-size:11.5px;
  margin-bottom:18px;
}
nav.sidebar h3{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:18px 0 6px;
  font-weight:600;
}
nav.sidebar ol, nav.sidebar ul{
  list-style:none;
  padding:0; margin:0;
}
nav.sidebar li{ margin:1px 0; }
nav.sidebar a.chap{
  display:block;
  padding:6px 10px;
  border-radius:6px;
  color:var(--sidebar-fg);
  position:relative;
}
nav.sidebar a.chap:hover{ background:rgba(0,0,0,.06); text-decoration:none; }
@media (prefers-color-scheme: dark){
  nav.sidebar a.chap:hover{ background:rgba(255,255,255,.06); }
}
nav.sidebar a.chap.current{
  background:var(--sidebar-current-bg);
  color:var(--sidebar-current-fg);
}
nav.sidebar a.chap .num{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-right:6px;
}
nav.sidebar a.chap.current .num{ color:rgba(255,255,255,.85); }

/* TOC interna por capítulo */
nav.sidebar .secs{ margin:6px 0 12px 8px; padding-left:8px; border-left:1px solid var(--rule); }
nav.sidebar .secs a{
  display:block;
  padding:3px 8px;
  color:var(--fg-soft);
  font-size:12.5px;
  border-radius:4px;
}
nav.sidebar .secs a:hover{ background:rgba(0,0,0,.04); text-decoration:none; }
@media (prefers-color-scheme: dark){
  nav.sidebar .secs a:hover{ background:rgba(255,255,255,.05); }
}
nav.sidebar .secs a .secnum{
  display:inline-block; min-width:42px;
  font-family:var(--sans); font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ScrollSpy: marca la sección en la que está el lector ahora mismo */
nav.sidebar .secs a.current-sec{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}
nav.sidebar .secs a.current-sec .secnum{ color: var(--accent); }

/* ---------- Contenido principal ---------- */
main{
  max-width:880px;
  margin:0 auto;
  padding:24px 56px 96px;
  width:100%;
}
@media (max-width: 900px){
  /* clip (no hidden): mata el ancho fantasma de los absolutes del MathML
     asistivo sin crear un scroll container (preserva position:sticky). */
  html{ overflow-x:hidden; overflow-x:clip; }

  /* minmax(0,1fr): sin el 0 la columna crece al min-content de la fórmula/tabla
     más ancha y TODA la página scrollea de lado en el teléfono. */
  .layout{ grid-template-columns:minmax(0,1fr); }

  /* Sidebar off-canvas: ya no ocupa el flujo (antes el lector móvil scrolleaba
     ~1000px de índice antes de la primera línea del capítulo). */
  nav.sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:1200;
    width:min(320px, 86vw); height:100%;
    transform:translateX(-104%);
    transition:transform .22s ease;
    box-shadow:0 0 36px rgba(0,0,0,.35);
  }
  body.sidebar-open nav.sidebar{ transform:translateX(0); }
  body.sidebar-open{ overflow:hidden; }

  main{ padding:18px 16px 92px; }

  /* Ancho intrínseco: scroll propio en vez de ensanchar la página. */
  main table{ display:block; width:max-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  main img{ max-width:100%; height:auto; }
  main pre{ max-width:100%; overflow-x:auto; }
  .boxed-row{ flex-wrap:wrap; gap:10px; }

  /* Fórmulas inline largas: scroll propio (la regla global solo cubre display). */
  main mjx-container:not([display="true"]){
    display:inline-block; max-width:100%;
    overflow-x:auto; overflow-y:hidden;
    vertical-align:middle;
  }
}

/* Botón "Índice" + telón del sidebar móvil (los inyecta theme.js). */
.toc-fab{
  position:fixed; bottom:18px; left:14px; z-index:1180;
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 14px;
  border:1px solid var(--rule); border-radius:999px;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,.22);
  cursor:pointer;
}
.toc-fab:hover{ border-color:var(--accent); color:var(--accent); }
.sidebar-backdrop{
  position:fixed; inset:0; z-index:1190;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
body.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
@media (min-width: 901px){
  .toc-fab, .sidebar-backdrop{ display:none; }
}

/* Breadcrumbs */
.crumbs{
  font-family:var(--sans);
  font-size:12px; color:var(--muted);
  letter-spacing:.03em;
  margin:6px 0 18px;
}
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ margin:0 6px; opacity:.55; }

/* Cabecera de capítulo */
.chapter-head{
  margin:8px 0 28px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.chapter-head .kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.chapter-head h1{
  font-size:32px;
  line-height:1.12;
  margin:2px 0 0;
  letter-spacing:-.005em;
  font-weight:700;
}
.chapter-head .meta{
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
  font-family:var(--sans);
}

/* Secciones */
h2.section{
  font-size:23px;
  margin:54px 0 12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--rule);
  font-weight:700;
  letter-spacing:-.005em;
  scroll-margin-top: 18px;
}
h2.section .num{
  color:var(--muted);
  font-family:var(--sans);
  font-weight:600;
  font-size:.78em;
  margin-right:.5em;
  font-variant-numeric:tabular-nums;
}
h3.subsection{
  font-size:19px;
  margin:36px 0 10px;
  font-weight:700;
  scroll-margin-top:18px;
}
h3.subsection .num{
  color:var(--muted);
  font-family:var(--sans);
  font-weight:600;
  font-size:.78em;
  margin-right:.45em;
  font-variant-numeric:tabular-nums;
}

p{ margin:.7em 0; }
p.lead{ font-size:17.5px; color:var(--fg); }

/* ============================================================
   Bloques semánticos del libro
   Cada tipo tiene un tratamiento visual distinto para crear
   jerarquía: las definiciones destacan, los ejemplos son
   identificables pero ligeros, las observaciones y notas son
   discretas.
   ============================================================ */

/* ---------- DEFINICIÓN ---------- */
/* Tarjeta con borde sutil + badge de etiqueta en la cabecera.
   Es el bloque más prominente porque introduce conceptos. */
aside.definicion{
  background:var(--paper);
  border:1px solid var(--rule);
  border-left:4px solid var(--fg);
  border-radius:4px;
  padding:16px 22px 14px;
  margin:22px 0;
  box-shadow:var(--shadow);
}
aside.definicion > .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg);
  background: color-mix(in srgb, var(--fg) 13%, transparent);
  padding:3px 10px;
  border-radius:3px;
  margin-bottom:12px;
}
aside.definicion > .label::after{ content:""; }
aside.definicion p:first-of-type{ margin-top:0; }
aside.definicion p:last-of-type{ margin-bottom:0; }

/* ---------- EJEMPLO ---------- */
/* Barra vertical azul tenue, sin caja. Encabezado inline en
   serif italic. El más ligero porque se repite mucho. */
aside.ejemplo{
  margin:18px 0;
  padding:4px 0 4px 20px;
  border-left:2px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
}
aside.ejemplo > .label{
  font-family:var(--serif);
  font-weight:700;
  font-style:italic;
  color:var(--accent);
  margin-right:4px;
}
aside.ejemplo > .label::after{
  content:"·—  ";
  font-style:normal;
  color:var(--muted);
  font-weight:400;
}
aside.ejemplo p:first-of-type{ margin-top:0; display:inline; }
aside.ejemplo > p:first-of-type + *{ margin-top:.6em; }
aside.ejemplo .solucion{ display:block; }

/* ---------- OBSERVACIÓN / NOTA ---------- */
/* Bloque compacto con fondo crema. Etiqueta inline en versalita.
   Menor contraste — son glosas, no afirmaciones principales. */
aside.observacion, aside.nota{
  margin:14px 0;
  padding:10px 16px;
  background:var(--def-bg);
  border-radius:6px;
  font-size:15.5px;
  line-height:1.55;
}
aside.observacion > .label, aside.nota > .label{
  display:inline;
  font-family:var(--sans);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-soft);
  margin-right:8px;
  vertical-align:.05em;
}
aside.observacion > .label::after, aside.nota > .label::after{
  content:" ·";
  color: color-mix(in srgb, var(--muted) 60%, transparent);
  margin-right:2px;
}
aside.observacion p:first-of-type, aside.nota p:first-of-type{
  margin-top:0; display:inline;
}
aside.observacion > p:first-of-type + *, aside.nota > p:first-of-type + *{
  margin-top:.6em;
}
aside.nota{ background: color-mix(in srgb, var(--rule) 35%, var(--paper)); }

/* ---------- PROPIEDADES (lista numerada con tarjetas) ---------- */
/* Cada propiedad es una mini-tarjeta con círculo numerador.
   Hover suaviza el borde para guiar la lectura. */
ol.props{
  list-style:none;
  padding:0;
  counter-reset: prop;
  margin:20px 0;
}
ol.props > li{
  counter-increment: prop;
  position:relative;
  padding:14px 18px 14px 58px;
  margin:12px 0;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
}
ol.props > li:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--rule));
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
ol.props > li::before{
  content: counter(prop);
  position:absolute; left:16px; top:14px;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
ol.props > li > p:first-of-type,
ol.props > li > .boxed-row:first-child{ margin-top:0; }
ol.props > li > p:last-child{ margin-bottom:0; }

/* ---------- Legacy: .callout-row (queda para compatibilidad) ---------- */
.callout-row{
  display:grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap:14px;
  margin:14px 0;
  align-items:start;
}
.callout-row .label{
  font-weight:700;
  font-family:var(--serif);
  letter-spacing:.02em;
  color:var(--fg);
  padding-top:1px;
}
.callout-row .label.def::after,
.callout-row .label.obs::after,
.callout-row .label.nota::after,
.callout-row .label.ej::after{ content:"·-"; margin-left:1px; color:var(--muted); }

/* Fórmula resaltada (boxed) */
.boxed{
  min-width:0; max-width:100%;
  display:inline-block;
  background:var(--boxed-bg);
  border:1px solid var(--boxed-border);
  border-radius:4px;
  padding:8px 22px;
  margin:.4em auto;
}
.boxed-row{
  display:flex; justify-content:center; align-items:center;
  margin:18px 0;
}

/* Teorema callout (amarillo) */
.teorema{
  background:var(--thm-bg);
  border-left:4px solid var(--thm-border);
  color:var(--thm-fg);
  padding:14px 18px;
  border-radius:0 6px 6px 0;
  margin:18px 0;
}
.teorema .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--thm-fg);
  margin-bottom:6px;
}

/* Convención del capítulo (azul, neutral, ancla formal) */
.convencion{
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  border-left:4px solid var(--accent);
  padding:14px 18px;
  border-radius:0 6px 6px 0;
  margin:18px 0;
}
.convencion .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.convencion ul{
  list-style:none;
  margin:.4em 0 0;
  padding-left:0;
}
.convencion ul > li{
  position:relative;
  padding-left:18px;
  margin:.35em 0;
}
.convencion ul > li::before{
  content:"—";
  position:absolute; left:0; top:0;
  color:var(--accent);
  font-weight:600;
}

/* Aviso pedagógico (naranja, llama la atención a trampas comunes) */
.aviso{
  background: color-mix(in srgb, #f97316 12%, var(--paper));
  border-left:4px solid #f97316;
  color:var(--fg);
  padding:14px 18px;
  border-radius:0 6px 6px 0;
  margin:18px 0;
}
.aviso .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#b4530c;
  margin-bottom:6px;
}
@media (prefers-color-scheme: dark){
  .aviso{ background: color-mix(in srgb, #f97316 16%, var(--paper)); }
  .aviso .label{ color:#fbbf77; }
}

/* Nota al pie inline tipo footnote, pequeña y discreta */
.footnote{
  font-size:13.5px;
  color:var(--muted);
  border-top:1px dashed var(--rule);
  padding-top:6px;
  margin-top:6px;
}
.footnote .marker{
  font-family:var(--sans);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-right:6px;
}

/* Demostración (sin barra izquierda: vive dentro del teorema, no como
   entidad propia. Se distingue por sangrado y tipografía más liviana.) */
.proof{
  padding:4px 0 4px 18px;
  margin:14px 0;
  color:var(--fg-soft);
  font-size:15.5px;
}
.proof .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.proof ul{ padding-left:18px; }
.proof li{ margin:.4em 0; }

/* Demostraciones colapsables: sirven al lector curioso sin saturar
   al estudiante apurado. Usa <details> nativo del navegador. */
details.proof-collapsible{
  margin:10px 0 4px;
}
details.proof-collapsible > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans);
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  padding:4px 0;
}
details.proof-collapsible > summary::-webkit-details-marker{ display:none; }
details.proof-collapsible > summary::before{
  content:"▸";
  display:inline-block;
  transition:transform .15s;
  color:var(--accent);
  font-size:13px;
}
details.proof-collapsible[open] > summary::before{ transform:rotate(90deg); }
details.proof-collapsible > .proof-body{
  margin-top:8px;
  padding-left:14px;
  color:var(--fg-soft);
  font-size:15.5px;
  line-height:1.55;
}

/* Lista de propiedades numeradas con círculo */
ol.props{
  list-style:none;
  padding:0;
  counter-reset: prop;
  margin:14px 0;
}
ol.props > li{
  counter-increment: prop;
  position:relative;
  padding-left:42px;
  margin:14px 0;
}
ol.props > li::before{
  content: counter(prop);
  position:absolute; left:0; top:.05em;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--fg);
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  color:var(--fg);
}

/* Ejemplos / Solución */
.ejemplo{ margin:14px 0; }
.ejemplo > .label{
  font-weight:700;
  margin-right:4px;
}
.solucion{
  margin:14px 0 18px;
}
.solucion > .label{
  display:block;
  text-align:center;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:3px;
  margin:10px 0 8px;
  font-size:14px;
}

/* Figura/diagrama */
figure.diagrama, figure.figura{
  margin:18px auto;
  text-align:center;
}
figure.diagrama img, figure.figura img{
  max-width:100%; height:auto;
  display:inline-block;
}
figure figcaption{
  font-size:12px; color:var(--muted);
  margin-top:6px;
  font-family:var(--sans);
}

/* ---------- Ejercicios ---------- */
.ex-toc{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap:6px;
  margin:16px 0 24px;
  padding:14px 16px;
  background:var(--def-bg);
  border-radius:8px;
}
.ex-toc a{
  display:flex; align-items:center; justify-content:center;
  height:34px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--fg);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.ex-toc a:hover{ background:var(--accent-soft); text-decoration:none; border-color:var(--accent); }

.ex-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:18px 22px;
  margin:18px 0;
  box-shadow:var(--shadow);
  position:relative;
  scroll-margin-top: 18px;
}
.ex-card .ex-num{
  position:absolute;
  left:-14px; top:-14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  box-shadow:var(--shadow);
}
.ex-card .ex-body{
  margin-top:2px;
}
.ex-card .ex-alts{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:8px 16px;
  margin:10px 0 8px;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--fg-soft);
}
.ex-card .ex-alts .alt{
  padding:4px 8px;
  border-radius:4px;
}
.ex-card .ex-alts .alt .letter{
  display:inline-block;
  font-weight:700;
  margin-right:6px;
  color:var(--accent);
}
.ex-card .ex-alts .alt.correct{
  background:var(--accent-soft);
  color:var(--fg);
}

.ex-card details{
  margin-top:10px;
  border-top:1px dashed var(--rule);
  padding-top:6px;
}
.ex-card details summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--accent);
  font-weight:600;
  padding:6px 0;
  display:inline-block;
}
.ex-card details summary::-webkit-details-marker{ display:none; }
.ex-card details summary::before{
  content:"▸"; margin-right:6px; transition:transform .15s;
  display:inline-block;
}
.ex-card details[open] summary::before{ transform:rotate(90deg); }
.ex-card details[open] summary{ margin-bottom:4px; }

.sol-final{
  margin:14px 0 0;
  padding:10px 16px;
  background:var(--accent);
  color:#fff;
  border-radius:6px;
  font-weight:600;
  text-align:center;
  letter-spacing:.01em;
}
.sol-final .conclude{ margin-right:8px; }

/* Propuestos: respuesta oculta hasta clic */
.toggle-bar{
  display:flex; gap:8px; align-items:center;
  margin:8px 0 4px;
}
.btn{
  cursor:pointer;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:8px 14px;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--fg);
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover{ filter:brightness(1.05); color:#fff; }

.prop-cards-hidden .ex-card .ex-alts .alt.correct{
  background:transparent; color:var(--fg-soft);
}
.prop-cards-hidden .ex-answer{ display:none; }

/* Rejilla de respuestas (sección "Respuestas") */
.answer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
  margin:16px 0;
  padding:18px;
  background:var(--def-bg);
  border-radius:8px;
}
.answer-grid .ans{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:10px 12px;
  text-align:center;
  font-family:var(--mono);
  font-size:13px;
}
.answer-grid .ans .num{
  display:block;
  font-size:10.5px;
  color:var(--muted);
  font-family:var(--sans);
  margin-bottom:2px;
}
.answer-grid .ans .val{
  display:block;
  font-family:var(--serif);
  font-size:16px;
  color:var(--accent);
  font-weight:600;
}

/* Pie de página de navegación */
.chap-nav{
  display:flex; justify-content:space-between; gap:12px;
  margin:48px 0 0;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-family:var(--sans);
  font-size:13.5px;
}
.chap-nav a{ color:var(--accent); }
.chap-nav .prev::before{ content:"← "; }
.chap-nav .next::after{ content:" →"; }
.chap-nav .placeholder{ color:var(--muted); }

/* MathJax: que las fórmulas display no se desborden */
mjx-container[jax="SVG"][display="true"]{
  overflow-x:auto; overflow-y:hidden;
  max-width:100%;
}
mjx-container{ color:var(--fg) !important; }

/* Encabezado de página facsímil (referencia visual, opcional) */
.pagina-orig{
  color:var(--muted); font-size:11px;
  font-family:var(--sans);
  letter-spacing:.06em;
  margin:0 0 .4em;
}

/* ============================================================
   Bloques pedagógicos modernos
   (retrieval, worked examples, fill-in, productive failure,
    pattern card, CAS verify, progreso)
   Color violeta = etiquetas técnico-pedagógicas (modo profesor)
   ============================================================ */

/* Etiqueta «Técnica:» discreta — visible solo si .show-tech está activo
   en <body> (toggle). En producción default queda casi invisible. */
.tech-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.55;
  margin:14px 0 4px;
  border:1px dashed color-mix(in srgb, var(--muted) 40%, transparent);
  padding:2px 8px;
  border-radius:3px;
}
.tech-tag::before{ content:"⌑"; font-size:11px; }
body:not(.show-tech) .tech-tag{ display:none; }

/* Retrieval practice / pretest / quick check */
.retrieval{
  background: color-mix(in srgb, #16a34a 6%, var(--paper));
  border-left:4px solid #16a34a;
  border-radius:0 8px 8px 0;
  padding:16px 20px;
  margin:22px 0;
}
.retrieval .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#15803d;
  margin-bottom:8px;
}
.retrieval .q{ margin:14px 0; }
.retrieval .q-text{ font-weight:600; margin-bottom:6px; }
.retrieval .choices{ display:grid; gap:6px; font-family:var(--sans); font-size:14.5px; }
.retrieval .choice{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 12px;
  border:1px solid var(--rule);
  background:var(--paper);
  border-radius:6px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
}
.retrieval .choice:hover{ border-color:#16a34a; }
.retrieval .choice .letter{ font-weight:700; color:#15803d; min-width:18px; }
.retrieval .choice.correct{
  border-color:#16a34a;
  background: color-mix(in srgb, #16a34a 12%, var(--paper));
}
.retrieval .choice.wrong{
  border-color:#dc2626;
  background: color-mix(in srgb, #dc2626 10%, var(--paper));
}
.retrieval .feedback{
  margin-top:8px; padding:8px 12px;
  font-size:13.5px; border-radius:4px; display:none;
}
.retrieval .feedback.show{ display:block; }
.retrieval .feedback.ok{ background: color-mix(in srgb, #16a34a 10%, var(--paper)); color:#15803d; }
.retrieval .feedback.no{ background: color-mix(in srgb, #dc2626 8%, var(--paper)); color:#b91c1c; }

/* Worked example tipo «paso a paso» */
.worked{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:18px 22px;
  margin:18px 0;
}
.worked .head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px; gap:12px; flex-wrap:wrap;
}
.worked h4{ font-family:var(--serif); font-size:16px; margin:0; }
.worked .scaffold{
  font-family:var(--sans); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.step{
  display:grid; grid-template-columns: 28px minmax(0,1fr); gap:12px;
  align-items:start; padding:10px 0;
  border-bottom:1px dashed var(--rule);
}
.step:last-child{ border-bottom:0; }
.step .step-num{
  width:24px; height:24px; border-radius:50%;
  background:var(--def-bg); border:1px solid var(--rule);
  font-family:var(--sans); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  color:var(--fg-soft);
}
.step .step-body p{ margin:.2em 0; }
.step .why{ margin-top:6px; font-size:13.5px; font-family:var(--sans); }
.step .why summary{
  cursor:pointer; list-style:none; color:#7c3aed; font-weight:600;
}
.step .why summary::-webkit-details-marker{ display:none; }
.step .why summary::before{ content:"▸ ¿Por qué?"; display:inline-block; transition:transform .12s; }
.step .why[open] summary::before{ content:"▾ ¿Por qué?"; }
.step .why .why-body{
  padding:8px 12px;
  background: color-mix(in srgb, #7c3aed 6%, var(--paper));
  border-left:2px solid #7c3aed;
  border-radius:0 4px 4px 0;
  color:var(--fg-soft);
  margin-top:6px;
}

/* Fila con blanco clicable */
.fillrow{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:10px 14px;
  background:var(--def-bg);
  border-radius:6px;
  margin:8px 0;
  font-size:16px;
}
.fillin{
  display:inline-block;
  min-width:80px;
  padding:2px 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border:1.5px dashed var(--accent);
  border-radius:4px;
  color:var(--accent);
  cursor:pointer;
  font-family:var(--sans);
  font-size:13px;
  font-style:italic;
  user-select:none;
  transition:background .15s, border-color .15s, transform .12s;
}
.fillin:hover{
  background: color-mix(in srgb, var(--accent) 20%, var(--paper));
  transform: translateY(-1px);
}
.fillin.reveal{
  background:transparent;
  border:1.5px solid transparent;
  color:var(--fg);
  font-family:var(--serif);
  font-style:normal;
  cursor:default;
  padding:2px 4px;
}

/* Productive failure */
.try-first{
  background: color-mix(in srgb, #d97706 6%, var(--paper));
  border-left:4px solid #d97706;
  border-radius:0 8px 8px 0;
  padding:16px 20px;
  margin:22px 0;
}
.try-first .label{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9a3412;
  margin-bottom:6px;
}
.try-first .problem{
  font-size:18px; text-align:center;
  margin:16px 0; padding:12px;
  background:var(--paper);
  border-radius:6px;
}
.try-first .timer{
  display:flex; align-items:center; gap:12px;
  margin:12px 0; font-family:var(--sans);
  font-size:13px; color:var(--muted); flex-wrap:wrap;
}
.try-first .timer button{
  font-family:var(--sans);
  background:#d97706; color:#fff;
  border:0; padding:8px 16px;
  border-radius:6px; cursor:pointer;
  font-size:13.5px; font-weight:600;
}
.try-first .timer button:hover{ filter:brightness(1.08); }
.try-first .reveal-zone{ display:none; margin-top:14px; padding-top:14px;
  border-top:1px solid color-mix(in srgb, #d97706 30%, transparent); }
.try-first.revealed .reveal-zone{ display:block; }
.try-first.revealed .timer{ display:none; }

/* Pattern recognition card */
.pattern-card{
  background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--accent) 4%, var(--paper)));
  border:1px solid var(--rule);
  border-radius:10px;
  padding:18px 22px;
  margin:22px 0;
  box-shadow:var(--shadow);
}
.pattern-card .head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px; gap:12px; flex-wrap:wrap;
}
.pattern-card .head h4{ margin:0; font-family:var(--serif); font-size:17px; }
.pattern-card .head .when{
  font-family:var(--sans); font-size:11.5px;
  color:var(--muted); letter-spacing:.04em;
}
.pattern-card table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.pattern-card th, .pattern-card td{
  text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--rule); vertical-align:top;
}
.pattern-card th{
  font-family:var(--sans); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.pattern-card td:first-child{ width:48%; }
.pattern-card td code{
  font-family:var(--mono); font-size:13.5px;
  background:var(--code-bg); padding:1px 5px; border-radius:3px;
}

/* CAS verification widget */
.cas-verify{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:16px 20px;
  margin:18px 0;
}
.cas-verify .head{
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  color:var(--fg); margin-bottom:8px;
}
.cas-verify .problem{
  text-align:center; font-size:17px;
  padding:10px; background:var(--def-bg);
  border-radius:6px; margin:8px 0;
}
.cas-verify .answer-row{
  display:flex; gap:8px; align-items:stretch; margin:12px 0 6px;
}
.cas-verify input[type=text]{
  flex:1; padding:10px 14px;
  font-family:var(--mono); font-size:14px;
  border:1.5px solid var(--rule);
  background:var(--paper); color:var(--fg);
  border-radius:6px;
}
.cas-verify input[type=text]:focus{ border-color:var(--accent); }
.cas-verify input[type=text]:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.cas-verify button{
  font-family:var(--sans); font-weight:600; font-size:13.5px;
  background:var(--accent); color:#fff; border:0;
  padding:0 18px; border-radius:6px; cursor:pointer;
}
.cas-verify button:hover{ filter:brightness(1.08); }
.cas-verify .hint{
  font-family:var(--sans); font-size:12px;
  color:var(--muted); margin-top:4px;
}
.cas-verify .result{
  margin-top:10px; padding:10px 14px;
  border-radius:6px; font-size:14px; display:none;
}
.cas-verify .result.show{ display:block; }
.cas-verify .result.ok{
  background: color-mix(in srgb, #16a34a 10%, var(--paper));
  border-left:3px solid #16a34a;
  color:#15803d;
}
.cas-verify .result.no{
  background: color-mix(in srgb, #dc2626 8%, var(--paper));
  border-left:3px solid #dc2626;
  color:#b91c1c;
}

/* Progreso */
.progress-bar{
  position:sticky; top:0; z-index:10;
  height:3px; background:var(--rule);
}
.progress-bar > .fill{
  height:100%; width:0%;
  background:var(--accent);
  transition:width .25s;
}
.progress-summary{
  display:flex; align-items:center; gap:12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  border:1px solid var(--rule);
  border-radius:8px;
  padding:12px 16px;
  margin:18px 0;
  font-family:var(--sans);
  font-size:13.5px;
}
.progress-summary .badge{
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
}
.progress-summary .reset{
  margin-left:auto;
  background:none; border:1px solid var(--rule);
  padding:5px 10px; border-radius:4px;
  font-family:var(--sans); font-size:12px;
  cursor:pointer; color:var(--muted);
}
.progress-summary .reset:hover{ color:var(--fg); }

/* Tabla de fórmulas básicas (numeradas con círculos) */
.formula-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.formula-card{
  display:grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:12px 14px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
}
.formula-card:hover{
  border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.formula-card .num{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--fg-soft);
  font-family:var(--sans); font-weight:700;
  font-size:12.5px; color:var(--fg-soft);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.formula-card .body{
  font-size:15.5px;
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
}
.formula-card .body .cond{
  display:inline-block; margin-left:6px;
  font-family:var(--sans); font-size:11.5px;
  color:var(--muted);
}
@media (max-width:760px){
  .formula-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   Banco de ejercicios propuestos (§1.5.7, §1.6.x propuestos)
   Tarjeta compacta: número + enunciado + tag de técnica + respuesta colapsable
   ============================================================ */
.ex-bank{
  display:grid;
  gap:10px;
  margin:14px 0;
}
.ex-item{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:12px 16px 10px;
  display:grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap:12px;
  align-items:start;
  transition:border-color .15s;
}
.ex-item:hover{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
}
.ex-item > .num{
  width:28px; height:28px; border-radius:50%;
  background:var(--def-bg);
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  color:var(--fg-soft);
  font-variant-numeric:tabular-nums;
}
.ex-item > .body{ min-width:0; }
.ex-item .problem{
  font-size:16px;
  overflow-x:auto;
  padding:2px 0 4px;
}
.ex-item .tech{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:2px 0 4px;
}
.ex-item details.answer{ margin-top:4px; }
.ex-item details.answer > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex; align-items:center; gap:4px;
  color:var(--accent);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  padding:4px 0;
}
.ex-item details.answer > summary::-webkit-details-marker{ display:none; }
.ex-item details.answer > summary::before{
  content:"▸";
  display:inline-block;
  transition:transform .12s;
}
.ex-item details.answer[open] > summary::before{ transform:rotate(90deg); }
.ex-item details.answer .ans-body{
  padding:8px 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  border-left:2px solid var(--accent);
  border-radius:0 4px 4px 0;
  margin-top:4px;
  font-size:15.5px;
  overflow-x:auto;
}

/* Triángulo auxiliar de sustitución trigonométrica */
.tri-aux{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:14px;
  background:var(--def-bg);
  border-radius:8px;
  margin:14px 0;
}
.tri-aux svg{
  display:block;
  max-width:240px;
  color: var(--fg);
}
.tri-aux svg .stroke{ stroke:currentColor; stroke-width:1.5; fill:none; }
.tri-aux svg .stroke-thin{ stroke:currentColor; stroke-width:1; fill:none; }
.tri-aux svg text{ fill:currentColor; font-family:var(--serif); font-style:italic; font-size:14px; }
.tri-aux svg .label-num{ font-style:normal; }
.tri-aux .subst{ font-size:15px; }
.tri-aux .subst .row{ display:flex; gap:14px; flex-wrap:wrap; margin:3px 0; }
@media (max-width:600px){
  .tri-aux{ grid-template-columns:minmax(0,1fr); }
}

/* Diagrama inline de movimiento (SVG) */
svg.motion{
  display:block; margin:14px auto;
  max-width:100%;
  color: var(--fg);
}
svg.motion text{ fill: currentColor; font-family: var(--serif); font-style: italic; font-size: 12px; }
svg.motion .axis{ stroke: currentColor; stroke-width: 0.9; fill: none; }
svg.motion .axis-label{ font-size: 11px; font-style: normal; }
svg.motion .dot{ fill: var(--accent); }
svg.motion .vel-arrow{ stroke: var(--accent); stroke-width: 1.4; fill: var(--accent); }

/* Encabezado de subgrupo de fórmulas */
.formula-group-head{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:22px 0 6px;
}

/* Toggle "ver diseño pedagógico" (modo profesor) */
.tech-toggle{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12px;
  color:var(--muted); cursor:pointer;
  padding:4px 10px; border:1px solid var(--rule);
  border-radius:14px; user-select:none;
}
.tech-toggle:hover{ color:var(--fg); border-color:var(--accent); }
.tech-toggle .knob{
  width:24px; height:14px; border-radius:7px;
  background:var(--rule); position:relative;
  transition:background .15s;
}
.tech-toggle .knob::after{
  content:""; position:absolute;
  width:10px; height:10px; border-radius:50%;
  background:#fff; top:2px; left:2px;
  transition:transform .15s;
}
body.show-tech .tech-toggle .knob{ background:#7c3aed; }
body.show-tech .tech-toggle .knob::after{ transform:translateX(10px); }

/* ============================================================
   Accesibilidad y antibrillo
   ============================================================ */

/* Foco visible en navegación por teclado (Tab) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Anti-FOUC: ocultar contenido principal hasta que MathJax termine
   de renderizar. Evita ver "$x^2$" literal por ~600ms al cargar. */
body.js-loading main{ opacity:0; }
main{ opacity:1; transition:opacity .15s ease-out; }

/* ============================================================
   Estilo para impresión
   ============================================================ */
@media print{
  :root{
    --bg:#ffffff; --paper:#ffffff;
    --fg:#000000; --fg-soft:#111111;
    --muted:#555555; --rule:#cccccc;
    --accent:#0044aa; --accent-soft:#eef3ff;
    --thm-bg:#fff7d6; --def-bg:#f3f1e8; --boxed-bg:#f6f4ec;
    --shadow:none;
  }
  body{ background:#fff; color:#000; font-size:11pt; line-height:1.5; }
  .layout{ display:block; }
  nav.sidebar, .crumbs, .chap-nav, .topbar, .ex-toc{ display:none !important; }
  main{ max-width:none; padding:0 12mm; margin:0; }
  a{ color:inherit; text-decoration:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#666; }
  a[href^="#"]::after{ content:""; }
  /* Evitar quiebres dentro de bloques semánticos */
  aside.definicion, .teorema, .convencion, .aviso,
  aside.ejemplo, .ex-card, .proof,
  details.proof-collapsible{ break-inside:avoid; page-break-inside:avoid; }
  h1, h2.section, h3.subsection{ break-after:avoid; page-break-after:avoid; }
  figure{ break-inside:avoid; page-break-inside:avoid; }
  /* Desplegar detalles colapsables al imprimir */
  details{ display:block; }
  details > summary{ display:none; }
  details > *{ display:block !important; }
}