/* ===== Botón de modo claro / oscuro =====
   Lo inyecta assets/js/tema.js en todas las páginas, así que su estilo tiene que estar
   donde las dos apps lo vean: la presentación y la guía tienen hojas distintas, pero
   ambas cargan esta. No define colores propios — usa las variables de cada app. */
.btn-tema {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: var(--superficie);
  color: var(--slate-700);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--sombra-flotante, rgba(15, 23, 42, 0.18));
}
.btn-tema:hover { border-color: var(--accent-texto); }
.btn-tema:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media print { .btn-tema { display: none !important; } }