/* ============================================================
   Ancho del cuerpo, aparición al scroll, desborde de fórmulas y foco visible
   ------------------------------------------------------------
   Capa: base
   Reúne, en este orden: 04-contenido.css, 06-reveal.css, 07-mathjax.css, 09-accesibilidad.css
   ============================================================ */

/* ═══════════════════════════════════════════════════
   CONTENT WRAPPER
═══════════════════════════════════════════════════ */
.content-wrapper {
  max-width: 880px; margin: 0 auto;
  padding: 52px 28px 100px;
}

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL — aparición al entrar en viewport
═══════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   MATHJAX OVERFLOW
═══════════════════════════════════════════════════ */
mjx-container { max-width: 100%; box-sizing: border-box; }
mjx-container[display="true"] {
  display: block !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100% !important; margin: .6em 0 !important; padding: .1em 0;
}
mjx-container[display="true"] > svg { max-width: 100% !important; height: auto !important; }
.paso, .paso-content,
.def-box, .formula-box, .example-box, .tip-box, .error-box,
.ejercicio-respuesta, .practica-respuesta, .section-body {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
@media(max-width: 600px) {
  mjx-container[display="true"] > svg { font-size: 90% !important; }
  .paso { gap: 10px; padding: 12px 14px; }
  .content-wrapper { padding: 28px 16px 80px; }
}

/* ═══════════════════════════════════════════════════
   ACCESIBILIDAD — foco visible por teclado
   Los acordeones ahora son operables con Tab + Enter/Espacio.
═══════════════════════════════════════════════════ */
.section-header:focus-visible,
.ejercicio-pregunta:focus-visible,
.practica-header:focus-visible,
#theme-toggle:focus-visible,
#btn-arriba:focus-visible,
.nav-btn:focus-visible,
.toc-dot:focus-visible,
.formula-box:focus-visible,
.grafico-wrap:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* No mostramos el contorno cuando el foco viene del mouse (solo teclado) */
.section-header, .ejercicio-pregunta, .practica-header { outline: none; }