/* ========================================
   SISTEMA DE ALERTS UNIFICADO
   Edifício Winston Churchill
   ========================================
   
   Este arquivo centraliza todos os estilos de alerts/mensagens
   de feedback do sistema admin e páginas públicas.
   
   Classes principais:
   - .alert           → Container base do alert
   - .alert--success  → Verde (sucesso)
   - .alert--error    → Vermelho (erro)
   - .alert--warning  → Amarelo (atenção)
   - .alert--info     → Azul (informação)
   
   Modificadores:
   - .alert--dismissible  → Com botão de fechar
   - .alert--compact      → Versão menor
   
   Aliases para compatibilidade:
   - .alert-success, .alert-error, .alert-danger, etc.
   
   ======================================== */

/* ==========================================================================
   BASE DO ALERT
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    animation: alertSlideDown 0.4s ease-out;
}

@keyframes alertSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ícone do alert */
.alert i {
    flex-shrink: 0;
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

/* Conteúdo do alert */
.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Lista de erros dentro do alert */
.alert ul {
    margin-top: 0.5rem;
    margin-left: 1.25rem;
    list-style: disc;
}

.alert ul li {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   VARIANTES DE COR (BEM)
   ========================================================================== */

/* Success - Verde */
.alert--success {
    background-color: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

.alert--success i {
    color: #10b981;
}

/* Error/Danger - Vermelho */
.alert--error,
.alert--danger {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.alert--error i,
.alert--danger i {
    color: #ef4444;
}

/* Warning - Amarelo */
.alert--warning {
    background-color: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.alert--warning i {
    color: #f59e0b;
}

/* Info - Azul */
.alert--info {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.alert--info i {
    color: #3b82f6;
}

/* ==========================================================================
   ALIASES PARA COMPATIBILIDADE
   Mantém funcionando o código existente sem modificação
   ========================================================================== */

/* Alias: alert-success */
.alert-success {
    background-color: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

.alert-success i {
    color: #10b981;
}

/* Alias: alert-error */
.alert-error {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.alert-error i {
    color: #ef4444;
}

/* Alias: alert-danger (usado em alguns arquivos) */
.alert-danger {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.alert-danger i {
    color: #ef4444;
}

/* Alias: alert-warning */
.alert-warning {
    background-color: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.alert-warning i {
    color: #f59e0b;
}

/* Alias: alert-info */
.alert-info {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.alert-info i {
    color: #3b82f6;
}

/* ==========================================================================
   MODIFICADORES
   ========================================================================== */

/* Alert com botão de fechar */
.alert--dismissible {
    padding-right: 3rem;
    position: relative;
}

.alert-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: opacity 0.2s;
}

.alert-close:hover {
    opacity: 1;
}

/* Alert compacto */
.alert--compact {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.alert--compact i {
    font-size: 1rem;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 576px) {
    .alert {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        gap: 0.625rem;
    }

    .alert i {
        font-size: 1rem;
    }

    .alert ul {
        margin-left: 1rem;
    }
}