/* ============================================================
   HUF — Componente: Toast (.hd-toast)
   ------------------------------------------------------------
   Formaliza el patrón de wwwroot/js/ui-dialogs.js#showToast bajo el
   namespace HD (wwwroot/js/huf/hd-dialogs.js). Reemplaza alert().
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §Toast.
   ============================================================ */

.hd-toast {
    position: fixed;
    top: var(--hd-space-5);
    right: var(--hd-space-5);
    z-index: var(--hd-z-toast);
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    max-width: 24rem;
    padding: var(--hd-space-3) var(--hd-space-4);
    border-radius: var(--hd-radius-md);
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    color: var(--hd-theme-text);
    /* Línea de 2px en el borde izquierdo con el color del ESTADO (HVL §6.9).
       Revisión 3: el color base es el de información, no el acento de marca —
       un toast siempre comunica un estado, y el turquesa está reservado a
       activo/primario/en vivo. */
    border-left: 2px solid var(--hd-color-info);
    box-shadow: var(--hd-shadow-floating);
    animation: hd-fade-in var(--hd-motion-standard) var(--hd-ease);
}

.hd-toast--leaving {
    animation: hd-fade-out var(--hd-motion-standard) var(--hd-ease) forwards;
}

.hd-toast--success { border-left-color: var(--hd-color-success); }
.hd-toast--error   { border-left-color: var(--hd-color-error); }
.hd-toast--warning { border-left-color: var(--hd-color-warning); }

.hd-toast__icon { font-size: 1.1rem; color: var(--hd-color-info); }
.hd-toast--success .hd-toast__icon { color: var(--hd-color-success); }
.hd-toast--error   .hd-toast__icon { color: var(--hd-color-error); }
.hd-toast--warning .hd-toast__icon { color: var(--hd-color-warning); }

.hd-toast__message {
    flex: 1;
    font-size: var(--hd-text-caption);
}

.hd-toast__close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
}

.hd-toast__close:hover {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .hd-toast {
        left: var(--hd-space-4);
        right: var(--hd-space-4);
        max-width: none;
    }
}