:root { color-scheme: light dark; }

@media (max-width: 820px) {
  p, dd, li,
  .cajaejercicio-body, .cajaejercicio-enunciado,
  .solucion-inner, .cejilla-content, .toc-card-body {
    max-width: 100%; overflow-x: auto; overflow-y: hidden;
  }
  mjx-container[display="true"], div.math-display, div.par-math-display {
    max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: .3em;
  }
  iframe, .ifrm-wrap, .ifrm-wrap iframe { max-width: 100%; }
  table, .tabular { max-width: 100%; }
  .tabla-fancy { display: block; overflow-x: auto; }
  img, svg { max-width: 100%; height: auto; }
  p, li, dd, td { overflow-wrap: break-word; }
}

@media (prefers-color-scheme: dark) {
  body { background: #15181b; color: #e6e3df; }
  h1, h2, h3, h4, h5, h6, dt, b, strong { color: #f2efea; }
  a { color: #8ab4f8; }
  mjx-container, math { color: inherit; }

  main, article,
  .tableofcontents, .chapterToc, .sectionToc, .subsectionToc, .likechapterToc,
  [class^="toc-"]:not(button), [class*=" toc-"]:not(button) {
    background: transparent !important; color: inherit !important;
  }
  .tableofcontents a,
  .chapterToc a, .sectionToc a, .likechapterToc a { color: #cfd6dd; }
  .chapterToc, .likechapterToc { color: #f2efea !important; }

  .cajaejercicio, .cajaejercicio-head, .cajaejercicio-body,
  .cajaejercicio-enunciado, .ejercicio-solucion, .solucion, .solucion-inner,
  .linea-ejer, .cejilla-wrapper, .cejilla-content, .ifventana-popup,
  .ncaja-body, .wmnota, .widget {
    background: #1c2024 !important; border-color: #333a40 !important; color: #e6e3df !important;
  }
  .widget *, .wmnota * { color: inherit !important; }

  table, td, th, .hline { border-color: #333a40 !important; }
  img[src$=".svg"] { filter: invert(1) hue-rotate(180deg); }
  iframe, .ifrm-wrap { background: #f0ede8; }
}

/* Cajas de teoría: definición, teorema, lema, corolario, ejemplo, notas */
@media (prefers-color-scheme: dark) {

  .caja, .definicion, .teorema, .lema, .corolario,
  .ejemplo, .ejemplo-body,
  .gcejilla-wrapper, .gcejilla-content,
  .nota-circ, .nota-circ-cuerpo {
    background: #1c2024 !important;
    border-color: #333a40 !important;
    color: #e6e3df !important;
  }

  /* Franjas de encabezado: un tono apenas más claro, para que se sigan
     leyendo como encabezado y no se fundan con el cuerpo. */
  .caja-title, .ejemplo-head,
  .cejilla-toggle, .gcejilla-toggle {
    background: #232830 !important;
    border-color: #333a40 !important;
    color: #f2efea !important;
  }

  /* Estos son texto en línea, no franjas: solo se les aclara el color,
     sin tocarles el fondo, para no dejarlos como si fueran resaltados. */
  .ejemplo-title, .ejemplo-label, .ejemplo-num,
  .gcejilla-label, .titlemark { color: #f2efea !important; }
}