<script lang="ts">
  import { toasts, dismiss } from '$lib/stores/toasts';
</script>

<div class="toast-region" role="region" aria-live="polite" aria-atomic="true">
  {#each $toasts as t (t.id)}
    <div class="toast {t.type}">
      <div class="msg">{t.message}</div>
      <button class="close" aria-label="Cerrar" on:click={() => dismiss(t.id)}>×</button>
    </div>
  {/each}
</div>

<style>
  .toast-region {
    position: fixed;
    bottom: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 10px 12px;
  }
  .toast.success { border-color: rgba(22, 163, 74, 0.4); }
  .toast.error { border-color: rgba(220, 38, 38, 0.4); }
  .msg { flex: 1; }
  .close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .close:hover,
  .close:focus-visible {
    background: rgba(0,0,0,0.06);
  }
  /* Evitar solape con tabbar móvil */
  @media (max-width: 768px) {
    .toast-region {
      bottom: calc(16px + 48px + env(safe-area-inset-bottom));
    }
  }
  @media (prefers-color-scheme: dark) {
    .close:hover,
    .close:focus-visible { background: rgba(255,255,255,0.08); }
  }
</style>
