{# Macro theme_toggle
   Uso:
     {% from "dg/components/theme_toggle.html" import theme_toggle %}
     {{ theme_toggle() }}

   Requiere static/js/theme.js, que define window.toggleTheme() y
   actualiza aria-pressed/aria-label/icon visibility según el tema activo.

   El botón vive sobre `bg-brand-dark` (header siempre oscuro). El color
   del icono usa tonos claros con hover más claro aún para mantener
   contraste WCAG en ambos temas (el header no cambia con el toggle).
#}
{% macro theme_toggle(extra_class="") %}
<button type="button"
        data-theme-toggle
        class="btn-icon text-white/60 hover:text-white hover:bg-white/10 {{ extra_class }}"
        aria-label="Cambiar tema claro/oscuro"
        aria-pressed="false"
        onclick="window.toggleTheme && window.toggleTheme()">
  <svg data-theme-icon="light"
       xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       aria-hidden="true">
    <circle cx="12" cy="12" r="4"/>
    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
  </svg>
  <svg data-theme-icon="dark"
       xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 hidden" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       aria-hidden="true">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
</button>
{%- endmacro %}