/* ============================================================
   HUF — Componente: Alert (.hd-alert)
   ------------------------------------------------------------
   Banner de página persistente (no flotante, no auto-descarta) — a
   diferencia de .hd-toast (§6.9, feedback puntual). No está en el
   catálogo original de HVL §6 pero sigue exactamente el mismo lenguaje
   visual ya establecido: panel L2/L3, línea de energía de 2px en el
   color del estado (mismo patrón que .hd-toast y la fila seleccionada
   de .hd-table), cero degradado, cero sombra. Primer consumidor real:
   mensaje de error de Login.cshtml (Fase B de la migración).
   Vehículo: TagHelper <hd-alert> (AdminPortal/TagHelpers/HdAlertTagHelper.cs).
   ============================================================ */

.hd-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3) var(--hd-space-4);
    border-radius: var(--hd-radius-md);
    background: var(--hd-color-inset);
    /* Color de estado, no acento de marca (revisión 3): una alerta siempre
       comunica un estado, así que su línea usa la paleta de estado incluso
       cuando no se declara variante. El turquesa significa activo/primario/en
       vivo — nunca "hay un mensaje". */
    border-left: 2px solid var(--hd-color-info);
    color: var(--hd-theme-text);
    font-size: var(--hd-text-base);
}

.hd-alert .hd-icon {
    margin-top: 2px;
    flex-shrink: 0;
}

.hd-alert__message {
    flex: 1;
    min-width: 0;
}

.hd-alert--danger  { border-left-color: var(--hd-color-error); }
.hd-alert--danger  .hd-icon { color: var(--hd-color-error); }
.hd-alert--warning { border-left-color: var(--hd-color-warning); }
.hd-alert--warning .hd-icon { color: var(--hd-color-warning); }
.hd-alert--success { border-left-color: var(--hd-color-success); }
.hd-alert--success .hd-icon { color: var(--hd-color-success); }
.hd-alert--info     { border-left-color: var(--hd-color-info); }
.hd-alert--info     .hd-icon { color: var(--hd-color-info); }

/* ── Banner que se puede cerrar (atributo `dismiss-key` del TagHelper) ──
   El alert sigue siendo persistente por defecto; esto es para el aviso de
   diagnóstico que el operador ya leyó — no para un error, que debe quedarse
   hasta resolverse. Mismo lenguaje que .hd-toast__close: ✕ de texto, sin
   caja, opacidad 0.6 en reposo.

   La regla [hidden] no es opcional: `display: flex` de .hd-alert le gana al
   `display: none` del navegador, así que sin esto el banner "cerrado" se
   seguiría viendo. */
.hd-alert[hidden] {
    display: none;
}

.hd-alert__close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    margin-top: 2px;
    flex-shrink: 0;
}

.hd-alert__close:hover,
.hd-alert__close:focus-visible {
    opacity: 1;
}