/* ====================================================
   COMPONENTE — ALERTAS / MENSAGENS DE FEEDBACK
   CSS Nesting + Grid Layout | Sem Flexbox
   ==================================================== */

.alert {
    display: grid;
    gap: var(--spacing-1);
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    border-inline-start: var(--border-width-thick) solid transparent;
    margin-block-end: var(--spacing-8);

    & strong {
        font-weight: var(--font-weight-semibold);
    }

    /* ── Sucesso — verde ── */
    &.alert--sucesso {
        background-color: #ecfdf5;
        border-color: var(--color-success);
        color: #065f46;
    }

    /* ── Erro — vermelho ── */
    &.alert--erro {
        background-color: #fef2f2;
        border-color: var(--color-error);
        color: #991b1b;
    }

    /* ── Informação — azul ── */
    &.alert--info {
        background-color: #eff6ff;
        border-color: var(--color-info);
        color: #1e40af;

        & a {
            color: #1e40af;
            text-decoration: underline;
            font-weight: var(--font-weight-medium);

            &:hover {
                color: #1d4ed8;
            }
        }
    }

    /* ── Aviso — amarelo ── */
    &.alert--aviso {
        background-color: #fffbeb;
        border-color: var(--color-warning);
        color: #92400e;
    }
}