{# Macro toast
   Uso:
     {% from "core/components/toast.html" import toast %}
     {{ toast("Guardado", level="success") }}

   level: info | success | warning | danger
   Se auto-elimina tras data-dismiss-after ms (static/js/toasts.js).
#}
{% macro toast(message, level="info", dismiss_after=5000) %}
<div role="status"
     data-toast
     data-dismiss-after="{{ dismiss_after }}"
     class="dg-toast dg-toast-{{ level }} px-4 py-3 rounded-lg shadow-popover text-sm bg-panel text-fg border border-border flex items-start gap-3"
     aria-live="polite">
  <span class="font-medium flex-1">{{ message }}</span>
  <button type="button"
          class="inline-flex items-center justify-center min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 -mr-2 -mt-1 text-fg-muted hover:text-fg transition-colors"
          aria-label="Cerrar notificación"
          onclick="this.parentElement.remove()">
    <svg 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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </button>
</div>
{%- endmacro %}

{# Wrapper-region donde HTMX puede inyectar toasts con hx-swap-oob="beforeend".
   El container usa inset-x-4 en mobile para no desbordarse en viewports 375px,
   y en sm+ se ancla a la esquina inferior-derecha como siempre. #}
{% macro toast_region() %}
<div id="dg-toasts"
     class="fixed inset-x-4 bottom-4 sm:left-auto sm:right-4 sm:max-w-sm z-[60] flex flex-col gap-2"
     aria-live="polite" aria-atomic="false"></div>
{%- endmacro %}