{# Macro theme_toggle
   Uso:
     {% from "core/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.

   Botón de solo icono con los colores de `.btn-icon` (texto atenuado y
   hover sobre la superficie), válido sobre panel claro u oscuro. El shell
   usa su propia fila con texto ("Modo oscuro"); este macro queda para
   páginas que quieran el control compacto.
#}
{% macro theme_toggle(extra_class="") %}
<button type="button"
        data-theme-toggle
        class="btn-icon {{ extra_class }}"
        aria-label="Modo 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 %}