:root {
    /*gradientes*/
    --gradient_azul_claro: linear-gradient(135deg, #b0caef 20%, #c4d7f7 80%);
    --gradiente_laranja: linear-gradient(135deg, #fed15a, #ffdf88);
    --gradiente_verde: linear-gradient(135deg, #c6d9bb, #e2ebda);
    --gradiente_lajanja_claro: linear-gradient(135deg, #ffe6ad, #fff2e1);
    --gradient_gelo: linear-gradient(135deg, #ecf1f7 60%, #fdf9fa 70%);
    --gradient_cinza_claro: linear-gradient(135deg, #fcfbf9 40%, white 80%);
    --gradient_menu: radial-gradient(#8b9dbd, #677896);

    /*botoes*/
    --btn_azul_escuro: #586f91;
    --btn_azul_medio: #5680bc;
    --btn_azul_medio2: #649fc8;
    --btn_azul_claro: #c3d6f7;
    --btn_menu_ativo: #7991b7;
    --btn_verde: #80a97f;
    --btn_amarelo: #fdd888;
    --btn_cinza: #ece8e7;

    /*cards*/
    --sombra_card: 3px 3px 7px rgb(221, 221, 221);

    /*fundos*/
    --fundo_menu_ativo: #7cabee;

    /*Texto*/
    --texto_menu_ativo: #ffffff;
    --texto_menu: #c7c7c7;
    --texto_p: #3f434f;
    --texto_s: #545358;
    --texto_d: #aeacb7;
    --texto_verde: #80a97f;
    --texto_verde_hover: green;

    /*Bordas*/
    --borda-cinza: #dbd7d8;
    --borda-azul-claro: #b0caef;
    --borda-cantos-form: 15px;
    --borda-cantos-cards: 15px;
    --borda-cantos-menu: 0px 10px 10px 0px;
    --borda-cantos-botoes: 10px;
    --borda-cantos-field-sets: 10px;
    --destaque_menu: orange;

    /*Medidas*/
    --largura_menu: 300px;
}

/*normal*/
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/*italico*/
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Inter, Arial;
}

body {
    background: var(--gradient_gelo);
    color: var(--texto_p);
    min-height: 100vh;
}

.msg-erro {
    color: red;
    font-size: 0.7em;
    text-align: center;
}

.msg-sucesso {
    color: green;
    font-size: 0.7em;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   RETORNOS.CSS — Componente <x-retornos />
   Depende das variáveis de base.css.
   Adicione ao final de public/css/base.css
   ══════════════════════════════════════════════════════════════════ */

/* ─── Card base ─────────────────────────────────────────────────── */
.retorno-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--borda-cantos-cards);
    box-shadow: var(--sombra_card);
    font-size: 0.88rem;
    font-family: Inter, Arial, sans-serif;
    color: var(--texto_p);
    margin-bottom: 14px;
    animation: retorno-entrada 0.25s ease;
    position: relative;
}

@keyframes retorno-entrada {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ─── Ícone circular ─────────────────────────────────────────────── */
.retorno-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* ─── Texto ──────────────────────────────────────────────────────── */
.retorno-texto {
    flex: 1;
    line-height: 1.5;
    padding-top: 5px;
}

/* ─── Lista de erros (múltiplos $errors) ─────────────────────────── */
.retorno-lista-erros {
    margin: 6px 0 0 18px;
    padding: 0;
    list-style: disc;
}

.retorno-lista-erros li {
    margin-bottom: 3px;
}

/* ─── Botão fechar (dismiss) ─────────────────────────────────────── */
.retorno-fechar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.45;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s;
    color: inherit;
    align-self: flex-start;
}

.retorno-fechar:hover {
    opacity: 0.9;
}

/* ─── Variante: SUCESSO ──────────────────────────────────────────── */
.retorno-sucesso {
    background: #f0faf0;
    border: 1.5px solid #c6d9bb;
    color: #2d5a2b;
}

.retorno-sucesso .retorno-icone {
    background-color: #c6d9bb;
    color: #2d5a2b;
}

/* ─── Variante: INFO / STATUS ────────────────────────────────────── */
.retorno-info {
    background: #f0f6ff;
    border: 1.5px solid var(--borda-azul-claro);
    color: #1a3a63;
}

.retorno-info .retorno-icone {
    background-color: var(--btn_azul_claro);
    color: var(--btn_azul_escuro);
    font-style: italic;
    font-weight: 800;
}

/* ─── Variante: ERRO ─────────────────────────────────────────────── */
.retorno-erro {
    background: #FFF3F0;
    border: 1.5px solid #FFCDD2;
    color: #7a1e1e;
}

.retorno-erro .retorno-icone {
    background-color: #FFCDD2;
    color: #D32F2F;
    font-size: 0.85rem;
}