/* ══════════════════════════════════════════════════════════════════════════
   tema.css · Puente entre el tema Material y el CSS de la familia
   (docs/assets/stylesheets/guias.css, generado desde las páginas originales)

   Decide lo que las reglas de estilo del proyecto fijan:
     · tema oscuro por defecto  (--bg #0b0e14) y claro  (--bg #f7f6f3)
     · una sola columna, sin barras laterales
     · los colapsables `??? note` con el aspecto de los pliegues de la familia
     · iframes de simulador y dibujos SVG que no desbordan
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El tema claro: el mismo juego de variables que usaba el botón del sitio
      viejo (bloque #css-barra-top), aplicado cuando Material está en claro. ── */
html { color-scheme: dark; }
[data-md-color-scheme="default"] {
  color-scheme: light;
  --bg:#f7f6f3; --bg2:#ffffff; --bg3:#f0efea; --card:#ffffff;
  --line:#e3e1d8; --line2:#cdcbc2;
  --txt:#14181f; --txt2:#414a54; --txt3:#626c77;
  /* el acento del tono A, oscurecido para el papel: 5,50:1 sobre --bg */
  --ac-base:#2f8f86; --ac:#1f6f68; --ac2:#175b55;
  --ac-suave:rgba(47,143,134,.10); --ac-borde:rgba(47,143,134,.30);
  --ok:#177245; --aviso:#7a5600; --no:#a52a2a; --azul:#33568a; --purple:#5b3f8a;
  --ok-suave:rgba(23,114,69,.10); --aviso-suave:rgba(138,97,0,.10);
  --no-suave:rgba(165,42,42,.09); --azul-suave:rgba(51,86,138,.08);
  --gris-suave:rgba(107,119,145,.12);
  --bone:#4a3a1a;
  --amber:var(--ac); --amber2:var(--ac2);
  --teal:var(--ac); --green:var(--ok); --red:var(--no);
  --orange:var(--aviso); --blue:var(--azul);
  --sh:none;
}
[data-md-color-scheme="slate"] { color-scheme: dark; }
[data-md-color-scheme="default"] body,
[data-md-color-scheme="default"] .md-container { background: var(--bg); }

/* ── Nada de rem agrandado por Material: las páginas originales usaban
      16 px de raíz, y los rem de los componentes (.box, .chip, .out…) cuentan
      con eso. Subirlo engorda todos los recuadros. ── */
html { font-size: 100%; }
.md-typeset { font-size: 1rem; line-height: 1.7; }

/* ── Una columna ────────────────────────────────────────────────────────── */
.md-sidebar { display: none !important; }          /* fuera la barra lateral y el índice */
.md-grid { max-width: var(--maxw, 1180px); }
.md-main { min-height: 40vh; }
.md-main__inner { margin-top: 0; }
.md-content { max-width: 100%; }
.md-content__inner { margin: 0; padding: .6rem 1.2rem 3rem; }
.md-content__button { display: none; }             /* el «lápiz» de editar */
.md-footer { display: none; }                      /* el pie lo pone cada guía */
.md-typeset > :first-child { margin-top: 0; }
@media screen and (max-width: 76.1875em) {
  .md-content__inner { padding: .6rem .8rem 3rem; }
}

/* La cabecera del tema, con la paleta de la casa y el conmutador de tema */
.md-header { background: var(--bg2); color: var(--txt); box-shadow: none;
             border-bottom: 1px solid var(--line2); }
.md-header__title { color: var(--txt); font-weight: 800; }
.md-header__button { color: var(--txt2); }
.md-header__button:hover { color: var(--amber); }
.md-search__input { background: var(--bg3); color: var(--txt); }
.md-search__input::placeholder { color: var(--txt3); }

/* ── Colapsables: `??? note` con el aspecto de los pliegues de la familia ── */
.md-typeset details.admonition {
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r, 16px);
  box-shadow: none; margin: 1.2rem 0; padding: 0; overflow: hidden; font-size: 1rem;
}
.md-typeset details.admonition > summary {
  background: none; border: 0; border-radius: 0; padding: .7rem .9rem;
  font-size: .92rem; font-weight: 700; line-height: 1.5; color: var(--amber);
  display: block; list-style: none; cursor: pointer;
}
.md-typeset details.admonition > summary::before {
  content: "\25B8   "; font-size: 1em; position: static; padding: 0;
  background: none; mask: none; -webkit-mask: none; transform: none;
}
.md-typeset details.admonition[open] > summary::before { content: "\25BE   "; }
.md-typeset details.admonition > summary::-webkit-details-marker { display: none; }
.md-typeset details.admonition[open] > summary { border-bottom: 1px solid var(--line2); }
.md-typeset details.admonition > :not(summary) { padding-left: .9rem; padding-right: .9rem; }
.md-typeset details.admonition > :last-child { margin-bottom: .9rem; }
.md-typeset details.admonition .admonition-title { display: none; }

/* ── Tablas de Markdown: mismo comportamiento que en las páginas originales ── */
.md-typeset table:not([class]) { background: var(--card); }
.md-typeset__table, .md-typeset > table { min-width: 0; }
.md-typeset__table { display: block; overflow-x: auto; max-width: 100%; }
details.admonition .md-typeset__table { max-width: 100%; }

/* ── Dibujos SVG en línea y figuras: nunca más anchos que su caja ── */
.md-typeset svg { max-width: 100%; }
.md-typeset .chart-box, .md-typeset .graf, .md-typeset .pz,
.md-typeset figure, .md-typeset .figure { max-width: 100%; min-width: 0; }
.md-typeset img { max-width: 100%; height: auto; }

/* ── Simuladores: la pieza suelta, cargada en un iframe ── */
.md-typeset iframe.simulador {
  display: block; width: 100%; max-width: 100%;
  border: 1px solid var(--line2); border-radius: var(--r, 16px);
  background: var(--bg2); margin: .8rem 0 0;
}
.simulador-resumen {
  border-left: 3px solid var(--amber); padding: .1rem 0 .1rem 1rem;
  margin: 1rem 0 1.4rem; color: var(--txt2); font-size: .95rem;
}
.simulador-resumen > :last-child { margin-bottom: 0; }

/* ── Texto solo para lectores de pantalla (lo usaba el sitio viejo) ── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Los enlaces internos del índice de Material no deben salir del cuerpo ── */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--txt); }
.md-typeset hr { border-bottom: 1px solid var(--line2); }
.md-typeset blockquote { color: var(--txt2); border-left: 3px solid var(--line2); }

/* ── El aviso de «volver arriba» del tema, en la paleta de la casa ── */
.md-top { background: var(--bg2); color: var(--txt2); }

/* ── Alto de los iframes de simulador en pantalla ancha ──────────────────────────
   El `style` del iframe trae el alto medido a 390 px (donde todo se apila y la
   pieza es más alta). A partir de 881 px la pieza se coloca a dos columnas y baja
   mucho de alto, así que aquí se corrige. Medido con Chrome headless sobre
   docs/simuladores/hueso.html (3729 px) y docs/simuladores/musculo.html (1337 px);
   se deja un poco de aire. Si la pieza cambia, hay que volver a medir. */
@media screen and (min-width: 881px) {
  .md-typeset iframe.simulador-hueso { height: 3790px; }
  .md-typeset iframe.simulador-musculo { height: 1400px; }
}