/* Botón de tema claro/oscuro del header (assets/js/theme-toggle.js).
   El diseño nuevo se entregó en dos versiones fijas (oscura y clara) y sin
   este botón; el sitio publicado sí lo tiene y recuerda la elección
   (localStorage "cerodos-theme", inicializada en el <head> de cada página).
   Reutiliza .icon-button, que ya resuelve borde y color en ambos temas; acá
   solo se define qué ícono se ve: luna en claro (para pasar a oscuro) y sol
   en oscuro (para pasar a claro), igual que antes. */
.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle__icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle__icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle__icon-moon {
  display: none;
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Header en pantallas angostas. El diseño se entregó sin este botón: con él,
   marca + «Hablemos» + tema + menú suman unos 363 px y el header se pasaba
   del ancho en celulares de 360–375 px (y 57 px en 320). Hasta 420 px se
   compactan separaciones y el botón «Hablemos»; hasta 359 px «Hablemos» sale
   de la barra porque ya está al final del menú móvil. */
@media (max-width: 420px) {
  body .site-header .header-inner {
    gap: 8px;
  }

  body .site-header .header-actions {
    gap: 6px;
  }

  body .site-header .header-talk {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 359px) {
  body .site-header .header-talk {
    display: none;
  }
}