/* =========================================================
   Análisis Matemático I — Eduardo Espinoza Ramos
   Hoja de estilos del libro HTML
   ========================================================= */

:root {
  /* paleta clara */
  --bg:            #f7f4ec;
  --bg-elev:       #fffaf0;
  --ink:           #1a1a1a;
  --ink-soft:      #4a4a4a;
  --ink-mute:      #646464;       /* AA: 5.4:1 sobre --bg (antes #7a7a7a, 3.9:1) */
  --rule:          #d8d2c0;
  --rule-strong:   #aea895;
  --accent:        #2a5d9f;      /* azul tinta */
  --accent-soft:   #e6eef9;
  --warn:          #8a6308;       /* AA: 5.0:1 sobre --warn-soft (antes #b8860b, 3.0:1) */
  --warn-soft:     #fdf6dd;
  --proof:         #888;
  --code-bg:       #efe9d6;
  /* feedback quiz/CAS (AA como texto y borde) y color de texto de botones sólidos */
  --ok:            #1d7a3c;
  --no:            #b3372f;
  --btn-fg:        #ffffff;

  /* tipografía */
  --serif: "Iowan Old Style","Source Serif Pro","Charter","Georgia","Cambria",ui-serif,serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:  ui-monospace,SFMono-Regular,"SF Mono","Menlo","Consolas",monospace;

  /* layout */
  --sidebar-w: 280px;
  --content-w: 720px;
  --gutter:    32px;
}

/* Modo auto: sigue al sistema SOLO si theme.js no fijó un tema manual
   (html.theme-light/sepia/dark). Sin JS, el selector equivale a :root. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not(.theme-sepia):not(.theme-dark) {
    --bg:          #14130f;
    --bg-elev:     #1d1c17;
    --ink:         #ece6d4;
    --ink-soft:    #c2bda7;
    --ink-mute:    #8a8676;
    --rule:        #34322b;
    --rule-strong: #4a4740;
    --accent:      #7fb1ec;
    --accent-soft: #1c2a3e;
    --warn:        #d9b04a;
    --warn-soft:   #2c2517;
    --proof:       #6a6a6a;
    --code-bg:     #1e1d18;
    /* feedback aclarado para AA sobre fondo oscuro; texto oscuro en botones
       sólidos porque --accent es un azul claro (#7fb1ec) */
    --ok:          #5cc985;
    --no:          #ef7066;
    --btn-fg:      #14130f;
  }
}

* { box-sizing: border-box; }

/* ---------- A11y: respeta "reducir movimiento" del sistema (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- A11y: foco visible por teclado en todo elemento interactivo ----- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

html { scroll-behavior: smooth; scroll-padding-top: 16px; }

/* skip link a11y */
.skip {
  position: absolute;
  left: 12px;
  top: -42px;
  background: var(--accent);
  color: var(--btn-fg);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  z-index: 1000;
  transition: top 0.15s;
}
.skip:focus { top: 12px; outline: 2px solid var(--ink); }

/* barra de progreso de lectura */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 999;
}
.progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.05s linear;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- LAYOUT ---------- */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  min-height: 100vh;
}

aside.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--rule);
  padding: 24px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  font-family: var(--sans);
  font-size: 14px;
}

aside.sidebar .brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
aside.sidebar .brand strong { font-style: normal; color: var(--ink); }

aside.sidebar nav { margin-top: 20px; }
aside.sidebar nav h3 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin: 18px 0 6px;
  font-weight: 600;
}
aside.sidebar nav a {
  display: block;
  padding: 4px 8px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.4;
}
aside.sidebar nav a:hover { background: var(--accent-soft); color: var(--accent); }
aside.sidebar nav a.active { color: var(--accent); font-weight: 600; }

main {
  min-width: 0; /* grid item: sin esto no encoge bajo el min-content de la fórmula más ancha */
  padding: 32px var(--gutter) 96px;
  max-width: calc(var(--content-w) + 2 * var(--gutter));
  margin: 0 auto;
}

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 6px; color: var(--ink-mute); }

/* ---------- TIPOGRAFÍA ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font-weight: 600;
}
h1 { font-size: 30px; letter-spacing: -0.01em; margin-top: 0; }
h2 { font-size: 24px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
h3 { font-size: 19px; color: var(--ink-soft); }
h4 { font-size: 16px; color: var(--ink-mute); font-style: italic; }

.chapter-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

p { margin: 0.7em 0; text-align: justify; hyphens: auto; }
ul, ol { padding-left: 22px; }
li { margin: 0.25em 0; }

a { color: var(--accent); }

/* ---------- CALLOUTS ---------- */

.theorem, .definition, .proof, .note {
  margin: 1.4em 0;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 0.96em;
}

.theorem {
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
}
.theorem .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.definition {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
}
.definition .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.proof {
  border-left: 3px solid var(--proof);
  background: transparent;
  padding-left: 16px;
  color: var(--ink-soft);
  font-size: 0.96em;
}
.proof::before {
  content: "Demostración. ";
  font-style: italic;
  color: var(--ink-mute);
}
.proof::after {
  content: "■";
  float: right;
  color: var(--ink-mute);
}

.note {
  background: var(--bg-elev);
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-soft);
  font-size: 0.92em;
}

/* hint = sugerencia colapsable */
details.hint {
  margin: 14px 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--warn-soft);
  overflow: hidden;
}
details.hint > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
details.hint > summary:hover { background: rgba(255,255,255,0.04); }
details.hint > summary::before { content: "💡 "; }
details.hint[open] > summary { border-bottom: 1px solid var(--rule); }
details.hint > div {
  padding: 12px 18px 14px;
  animation: fadein 0.22s ease-out;
}
details.solution > .sol-body {
  animation: fadein 0.22s ease-out;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* tabla genérica del libro (revolución, trazas, etc.) */
.surfaces-table-wrap {
  margin: 12px 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.surfaces-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.94em;
}
.surfaces-table thead tr {
  background: var(--bg-elev);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.surfaces-table th,
.surfaces-table td { padding: 8px 12px; }
.surfaces-table tbody tr { border-bottom: 1px dotted var(--rule); }
.surfaces-table tbody tr:last-child { border-bottom: none; }

/* learning card: objetivos + prerrequisitos */
.learning {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px;
  margin: 24px 0 28px;
}
.learning .card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 18px;
}
.learning .card h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  font-style: normal;
  font-weight: 700;
}
.learning .card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.94em;
  color: var(--ink-soft);
}
.learning .card li { margin: 0.2em 0; }
@media (max-width: 720px) { .learning { grid-template-columns: minmax(0,1fr); } }

/* ---------- FIGURAS ---------- */

figure {
  margin: 1.6em auto;
  text-align: center;
}
figure img {
  max-width: 100%;
  height: auto;
}
figcaption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 6px;
  font-style: italic;
}

/* ---------- EJERCICIOS (tarjetas) ---------- */

.ex-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  margin: 16px 0 28px;
  padding: 14px;
  background: var(--bg-elev);
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.ex-toc a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--rule);
  transition: all 0.15s;
}
.ex-toc a:hover {
  background: var(--accent);
  color: var(--btn-fg);
  border-color: var(--accent);
}
.ex-toc a.disabled,
.ex-toc a[aria-disabled="true"] {
  pointer-events: none;
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--rule);
  opacity: 0.55;
}

.ex-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 24px 0;
  background: var(--bg-elev);
  position: relative;
}
.ex-card .ex-num {
  position: absolute;
  top: -14px;
  left: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--btn-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
}
.ex-card .ex-statement {
  margin-bottom: 14px;
}
.ex-card .ex-statement p:first-child { margin-top: 4px; }

.ex-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 12px 0;
  font-family: var(--sans);
  font-size: 14px;
}
.ex-options .opt {
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
}

details.solution {
  margin-top: 14px;
  border-top: 1px dashed var(--rule);
  padding-top: 12px;
}
details.solution > summary {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
details.solution > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
details.solution[open] > summary::before {
  transform: rotate(90deg);
}
details.solution > summary:hover { color: var(--ink); }

.sol-body { padding: 8px 0 4px; }
.sol-body h5 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 14px 0 6px;
  font-weight: 600;
}

.sol-final {
  margin-top: 14px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--btn-fg);
  border-radius: 4px;
  font-weight: 500;
  text-align: left;
  border-left: 5px solid color-mix(in srgb, var(--btn-fg) 33%, transparent);
}
.sol-final mjx-container { color: var(--btn-fg) !important; }
.sol-final::before {
  content: "∴ Respuesta. ";
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  opacity: 0.85;
}

/* nav prev/next entre ejercicios */
.ex-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
}
.ex-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
}
.ex-nav a:hover { background: var(--accent-soft); color: var(--accent); }
.ex-nav a.disabled { pointer-events: none; opacity: 0.4; }

/* ---------- PROPUESTOS (respuestas ocultas) ---------- */

.prop-toggle {
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  margin: 8px 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.prop-toggle::before {
  content: "👁";
  font-size: 14px;
  filter: grayscale(1) opacity(0.7);
}
.prop-toggle[aria-pressed="true"]::before { content: "🙈"; }
.prop-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.prop-cards-hidden .prop-answer { display: none; }

.prop-answer {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 0.96em;
  border-radius: 3px;
}
.prop-answer::before {
  content: "Rpta. ";
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 6px;
  opacity: 0.7;
}

/* ---------- REJILLA DE RESPUESTAS ---------- */

.answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 16px;
  margin: 18px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
}
.answer-grid .row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--rule); }
.answer-grid .n { color: var(--ink-mute); min-width: 22px; }
.answer-grid .a { font-family: var(--serif); color: var(--accent); font-size: 15px; }

/* ---------- PORTADA (index.html) ---------- */

.cover {
  text-align: center;
  padding: 60px 20px 30px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.cover .author {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cover h1 {
  font-size: 42px;
  margin: 14px 0 8px;
  font-weight: 600;
}
.cover .subtitle {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 18px;
}

.chapter-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  counter-reset: chapter;
}
.chapter-list li {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.chapter-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
  font-size: 18px;
}
.chapter-list a:hover { color: var(--accent); }
.chapter-list .ch-num {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 90px;
  font-weight: 600;
}
.chapter-list .ch-title { flex: 1; }
.chapter-list .ch-page {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
}

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

/* ---------- RESPONSIVE ---------- */

@media (max-width: 880px) {
  html { overflow-x: hidden; overflow-x: clip; }
  .layout { grid-template-columns: minmax(0,1fr); }
  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; }
  main mjx-container:not([display="true"]) { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
  /* Sidebar off-canvas (patrón AM2): fuera del flujo, entra desde la
     izquierda con el botón "Índice" (.toc-fab) que inyecta theme.js. */
  aside.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1200;
    width: min(320px, 86vw);
    height: 100%;
    transform: translateX(-104%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 36px rgba(0,0,0,.35);
  }
  body.sidebar-open aside.sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }
  main { padding: 20px 18px 92px; }
  body { font-size: 17px; }
  h1 { font-size: 26px; }
  h2 { font-size: 21px; }
  .cover h1 { font-size: 32px; }
}

/* 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(--ink);
  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 0.22s ease;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
@media (min-width: 881px) {
  .toc-fab, .sidebar-backdrop { display: none; }
}

/* =========================================================
   Temas manuales (theme.js pone html.theme-light/sepia/dark;
   "auto" no añade overrides y hereda el media query de arriba)
   ========================================================= */

/* --- Claro (forzado, ignora prefers-color-scheme) --- */
html.theme-light {
  color-scheme: light;
  /* paleta :root explícita para pisar al sistema en modo oscuro */
  --bg:            #f7f4ec;
  --bg-elev:       #fffaf0;
  --ink:           #1a1a1a;
  --ink-soft:      #4a4a4a;
  --ink-mute:      #646464;
  --rule:          #d8d2c0;
  --rule-strong:   #aea895;
  --accent:        #2a5d9f;
  --accent-soft:   #e6eef9;
  --warn:          #8a6308;
  --warn-soft:     #fdf6dd;
  --proof:         #888;
  --code-bg:       #efe9d6;
  --ok:            #1d7a3c;
  --no:            #b3372f;
  --btn-fg:        #ffffff;
}

/* --- Sepia --- */
html.theme-sepia {
  color-scheme: light;
  --bg:            #f5ecd9;
  --bg-elev:       #fbf3e2;
  --ink:           #3d3424;
  --ink-soft:      #5d543f;
  --ink-mute:      #6e6347;
  --rule:          #ddd0b4;
  --rule-strong:   #c4b690;
  --accent:        #8a5a2b;
  --accent-soft:   #f0e2c8;
  --warn:          #735510;
  --warn-soft:     #f3e7c0;
  --proof:         #9a8c6a;
  --code-bg:       #efe3c2;
  --ok:            #1d7a3c;
  --no:            #b3372f;
  --btn-fg:        #ffffff;
}

/* --- Oscuro (forzado) --- */
html.theme-dark {
  color-scheme: dark;
  --bg:          #14130f;
  --bg-elev:     #1d1c17;
  --ink:         #ece6d4;
  --ink-soft:    #c2bda7;
  --ink-mute:    #8a8676;
  --rule:        #34322b;
  --rule-strong: #4a4740;
  --accent:      #7fb1ec;
  --accent-soft: #1c2a3e;
  --warn:        #d9b04a;
  --warn-soft:   #2c2517;
  --proof:       #6a6a6a;
  --code-bg:     #1e1d18;
  --ok:          #5cc985;
  --no:          #ef7066;
  --btn-fg:      #14130f;
}

/* =========================================================
   AM1-SEARCH-LINK-STYLES — links Buscar/Glosario del sidebar
   (adaptado del bloque inline AM2-SEARCH-LINK-STYLES)
   ========================================================= */
aside.sidebar .sidebar-search-link,
aside.sidebar .sidebar-glossary-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13.5px;
  border: 1px dashed var(--rule);
  text-decoration: none;
  line-height: 1.4;
}
aside.sidebar .sidebar-glossary-link { margin-top: 6px; }
aside.sidebar .sidebar-search-link:hover,
aside.sidebar .sidebar-glossary-link:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
}
aside.sidebar .sidebar-search-link.current,
aside.sidebar .sidebar-glossary-link.current {
  background: var(--accent);
  color: #fff;
  border-style: solid;
  border-color: transparent;
}


/* ===== AM1-QUIZ-CAS-STYLES — retrieval practice y verificación CAS ===== */
.retrieval{
  margin: 22px 0; padding: 16px 18px;
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 8px; background: var(--bg-elev);
  font-family: var(--sans);
}
.retrieval .q-kicker{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 6px; font-weight: 600;
}
.retrieval .q-text{ font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.retrieval .choices{ display: grid; gap: 7px; }
.retrieval .choice{
  text-align: left; padding: 9px 12px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14.5px; cursor: pointer;
}
.retrieval .choice:hover{ border-color: var(--accent); }
.retrieval .choice.ok{ border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--bg)); }
.retrieval .choice.wrong{ border-color: var(--no); background: color-mix(in srgb, var(--no) 12%, var(--bg)); }
.retrieval .choice.reveal:not(.ok):not(.wrong){ border-color: var(--ok); }
.retrieval .choice[aria-pressed="true"]{ font-weight: 600; }
.retrieval .q-feedback{
  margin-top: 10px; padding: 9px 12px; border-radius: 6px; font-size: 14px;
}
.retrieval .q-feedback.is-ok{ background: color-mix(in srgb, var(--ok) 10%, var(--bg-elev)); color: var(--ink); border-left: 3px solid var(--ok); }
.retrieval .q-feedback.is-no{ background: color-mix(in srgb, var(--no) 8%, var(--bg-elev)); color: var(--ink); border-left: 3px solid var(--no); }

.cas-verify{
  margin: 22px 0; padding: 16px 18px;
  border: 1px dashed var(--rule-strong); border-radius: 8px;
  background: var(--bg-elev); font-family: var(--sans);
}
.cas-verify .cas-label{ font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.cas-verify .cas-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.cas-verify input{
  flex: 1 1 220px; padding: 8px 11px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 14px;
}
.cas-verify button{
  padding: 8px 16px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent); color: var(--btn-fg); font: inherit; font-size: 14px; cursor: pointer;
}
.cas-verify button:hover{ filter: brightness(1.08); }
.cas-verify .result{ margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--ink); }
.cas-verify .result.is-ok{ background: color-mix(in srgb, var(--ok) 10%, var(--bg-elev)); border-left: 3px solid var(--ok); }
.cas-verify .result.is-no{ background: color-mix(in srgb, var(--no) 8%, var(--bg-elev)); border-left: 3px solid var(--no); }
.cas-verify .cas-help{ margin-top: 7px; font-size: 12.5px; color: var(--ink-mute); }


/* =========================================================
   AM1-EXTRA-STYLES — bloques propios de Análisis Matemático I
   (formato ContentBlock convertido: ejemplos con respuesta
   revelable, fórmulas destacadas, widgets interactivos)
   ========================================================= */

/* Subtítulo del capítulo bajo el h1 */
.chapter-subtitle {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 17px;
  margin: -2px 0 18px;
}

/* Fórmula destacada (bloque `formula` del libro web) */
.boxed {
  margin: 1.1em 0;
  padding: 2px 16px;
  background: var(--bg-elev);
  border-left: 4px solid var(--warn);
  border-radius: 0 6px 6px 0;
  overflow-x: auto;
}

/* Ejemplo / Ejercicio resuelto en línea (callout ámbar del libro web) */
.example {
  margin: 1.4em 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--warn);
  border-radius: 6px;
  background: var(--warn-soft);
  font-size: 0.96em;
}
.example > .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.example details.solution {
  margin-top: 10px;
  border-top: 1px dashed var(--rule);
  padding-top: 8px;
}

/* Label genérico de notas/observaciones */
.note .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

/* Citas dentro de notas */
blockquote {
  margin: 0.6em 0;
  padding: 4px 14px;
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-soft);
  font-style: italic;
}

/* Widget interactivo embebido como iframe (plataforma EduardoWeb) */
.widget-embed{margin:20px 0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--bg-elev)}
.widget-embed iframe { display: block; }


/* =========================================================
   AM1-CTA-STYLES — branding (enlace a la editorial) y banner
   de compra de la muestra gratuita (cap. 1 e índice).
   ========================================================= */

/* Enlace "← Ediciones Espinoza" como primer elemento del nav del sidebar */
aside.sidebar nav .site-home-link {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: 14px;
  padding: 2px 0;
  line-height: 1.4;
}
aside.sidebar nav .site-home-link:hover { color: var(--accent); background: transparent; }

/* Banner de compra al final del <main> en la muestra gratuita */
.buy-banner {
  margin: 48px 0 8px;
  padding: 22px 24px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.buy-banner p {
  margin: 0;
  text-align: left;
  color: var(--ink);
  font-size: 1em;
}
.buy-banner .buy-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--accent);
  color: var(--btn-fg);
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  line-height: 1.2;
  transition: filter 0.15s, transform 0.1s;
}
.buy-banner .buy-btn:hover { filter: brightness(1.08); }
.buy-banner .buy-btn:active { transform: translateY(1px); }
.buy-banner .buy-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}