/* ============================================================
   erros.css
   Estilos exclusivos para mensagens de validação do formulário
   de cadastro (cadastro.php). Mantido separado de cadastro.css
   para isolar a estilização de erro/sucesso do restante do layout.
   ============================================================ */

:root {
    --erro-bg: #fdecec;
    --erro-borda: #e53e3e;
    --erro-texto: #9b1c1c;

    --sucesso-bg: #e6f7ee;
    --sucesso-borda: #38a169;
    --sucesso-texto: #1e6b41;
}

/* --------------------------------------------------
   Alerta geral (topo do formulário)
   -------------------------------------------------- */

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.5;
}

.alerta-erro {
    background-color: var(--erro-bg);
    border-color: var(--erro-borda);
    color: var(--erro-texto);
}

.alerta-erro::before {
    content: "⚠";
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.alerta-sucesso {
    background-color: var(--sucesso-bg);
    border-color: var(--sucesso-borda);
    color: var(--sucesso-texto);
}

.alerta-sucesso::before {
    content: "✔";
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

/* --------------------------------------------------
   Erro por campo (renderizado pelo PHP)
   -------------------------------------------------- */

.erro-servidor {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--erro-texto);
}

.erro-servidor::before {
    content: "• ";
}

/* Input/select/textarea marcados como inválidos pelo servidor */
.campo-invalido {
    border: 1px solid var(--erro-borda) !important;
    background-color: var(--erro-bg);
}

.campo-invalido:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.25);
}

/* --------------------------------------------------
   Responsivo — mantém legibilidade em telas pequenas
   -------------------------------------------------- */

@media (max-width: 480px) {
    .alerta {
        font-size: 13px;
        padding: 12px 14px;
    }
}