/* Cálculo para matemáticos — ritmo vertical de fórmulas y callouts.
   Hoja local del libro: no afecta otras colecciones ni otros libros. */

@media screen {
  /* Fórmulas display integradas en el ritmo del párrafo.
     Evita sumar el margen del <p>, el padding del contenedor y el margen de MathJax. */
  main.content p:has(> .math.display:only-child) {
    margin-block: 0.8em;
  }

  main.content p:has(+ p > .math.display:only-child) {
    margin-bottom: 0.65em;
  }

  main.content .math.display {
    padding-block: 0.35em 0.5em;
  }

  main.content .math.display > mjx-container[display="true"] {
    margin-block: 0 !important;
    /* El contenedor que desplaza necesita su propio margen interior:
       protege los límites inferiores y los descendentes de las fracciones. */
    padding-block: 0.2em 0.5em;
  }

  .callout .callout-body p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .callout .callout-body .math.display {
    margin-top: 0.45em !important;
    margin-bottom: 0.45em !important;
    padding-top: 0.35em !important;
    padding-bottom: 0.5em !important;
  }

  .callout .callout-body mjx-container[display="true"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .callout .callout-body > :first-child {
    margin-top: 0;
  }

  .callout .callout-body > :last-child {
    margin-bottom: 0;
  }
}

/* CPM — matemática responsiva para el derivado HTML de Quarto.
   Desplaza SOLO la fórmula ancha, sin ensanchar la página entera.
   No afecta a las exportaciones PDF ni EPUB. */
@media screen {
  .math.display,
  math[display="block"],
  mjx-container[display="true"] {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
  }
}

/* Control de estructuras anchas en teléfonos y tabletas. */
@media screen and (max-width: 991.98px) {
  main.content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  main.content .math.inline {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
  }
}

/* Los bloques altos necesitan más aire que una igualdad de una línea. */
@media screen {
  main.content p:has(.math.display mjx-mfrac),
  main.content p:has(.math.display mjx-mtable),
  main.content p:has(.math.display mjx-msqrt) {
    margin-block: 1.1em;
  }
  main.content .callout .callout-body .math.display:has(mjx-mfrac),
  main.content .callout .callout-body .math.display:has(mjx-mtable) {
    margin-block: 0.7em !important;
  }
  #quarto-content.page-columns > main.content {
    min-width: 0;
    max-width: 100%;
  }
  main.content :is(div[id^="def-t1-"], div[id^="thm-t1-"],
    div[id^="lem-t1-"], div[id^="prp-t1-"], div[id^="cor-t1-"]):not(.callout) {
    margin-block: 1.3rem;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--bs-link-color);
    background: var(--bs-tertiary-bg, transparent);
    border-radius: 0 0.25rem 0.25rem 0;
  }

  /* Quarto carga el tema oscuro como hoja alterna sin aplicar
     data-bs-theme="dark" al contenido principal. En ese modo,
     --bs-tertiary-bg conserva el valor claro (#f8f9fa), mientras
     el texto hereda blanco. Ajustamos solo los bloques matemáticos
     en modo oscuro para mantener contraste y no alterar el tema claro. */
  body.quarto-dark main.content :is(div[id^="def-t1-"], div[id^="thm-t1-"],
    div[id^="lem-t1-"], div[id^="prp-t1-"], div[id^="cor-t1-"]):not(.callout) {
    background: rgba(255, 255, 255, 0.06);
  }
  main.content figure.quarto-float-fig {
    max-width: 52rem;
    margin: 1.8rem auto;
  }
  main.content figure.quarto-float-fig img {
    max-width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.3rem;
  }
  main.content figure.quarto-float-fig figcaption {
    margin: 0.65rem auto 0;
    max-width: 46rem;
    font-size: 0.9em;
    line-height: 1.5;
    text-align: left;
  }
}

/* CPM: Quarto fuerza white-space: nowrap en el menú móvil.
   Permitir títulos multilínea sin modificar navegación de escritorio. */
@media screen and (max-width: 991.98px) {
  #quarto-sidebar .sidebar-menu-container {
    white-space: normal;
    min-width: 0;
  }
  #quarto-sidebar .sidebar-item-container .sidebar-item-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #quarto-sidebar .sidebar-item-container .menu-text {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #quarto-sidebar .sidebar-item-container .sidebar-item-toggle {
    flex-shrink: 0;
  }
}
