:root {
    --cor-principal: #2563eb;
    --cor-principal-escura: #1e3a8a;
    --cor-principal-media: #1d4ed8;
    --cor-principal-clara: #60a5fa;
    --cor-principal-suave: #dbeafe;

    --cor-secundaria: #0f766e;
    --cor-secundaria-clara: #2dd4bf;
    --cor-secundaria-suave: #ccfbf1;

    --cor-destaque: #f59e0b;
    --cor-destaque-clara: #fbbf24;
    --cor-destaque-suave: #fef3c7;

    --cor-sucesso: #16a34a;
    --cor-sucesso-suave: #dcfce7;
    --cor-alerta: #ea580c;
    --cor-alerta-suave: #ffedd5;
    --cor-erro: #dc2626;
    --cor-erro-suave: #fee2e2;

    --cor-fundo: #f8fafc;
    --cor-fundo-alt: #eff6ff;
    --cor-superficie: #ffffff;
    --cor-superficie-elevada: #fefefe;
    --cor-borda: #dbe4f0;
    --cor-borda-forte: #b6c5dc;

    --cor-texto: #0f172a;
    --cor-texto-secundario: #475569;
    --cor-texto-suave: #64748b;
    --cor-texto-claro: #ffffff;

    --gradiente-principal: linear-gradient(135deg, #1e3a8a, #2563eb, #2dd4bf);
    --gradiente-suave: linear-gradient(135deg, #ffffff, #eff6ff, #dbeafe);
    --gradiente-destaque: linear-gradient(135deg, #2563eb, #0f766e);

    --fonte-principal: "Inter", "Segoe UI", Arial, sans-serif;
    --fonte-titulos: "Poppins", "Segoe UI", Arial, sans-serif;
    --fonte-codigo: "Fira Code", "Consolas", monospace;

    --texto-mini: 0.75rem;
    --texto-pequeno: 0.875rem;
    --texto-base: 1rem;
    --texto-medio: 1.125rem;
    --texto-grande: 1.5rem;
    --texto-titulo: 2rem;

    --espaco-1: 0.25rem;
    --espaco-2: 0.5rem;
    --espaco-3: 0.75rem;
    --espaco-4: 1rem;
    --espaco-5: 1.5rem;
    --espaco-6: 2rem;
    --espaco-7: 3rem;

    --largura-maxima: 1440px;
    --altura-topo: 72px;
    --largura-sidebar: 280px;
    --largura-modal: 920px;

    --borda-pequena: 6px;
    --borda-media: 8px;
    --borda-grande: 12px;
    --borda-circular: 999px;

    --sombra-suave: 0 8px 24px rgba(15, 23, 42, 0.08);
    --sombra-media: 0 16px 42px rgba(15, 23, 42, 0.12);
    --sombra-forte: 0 24px 60px rgba(15, 23, 42, 0.18);

    --transicao-padrao: 180ms ease;
    --transicao-lenta: 260ms ease;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    font-family: var(--fonte-principal);
}

button,
input {
    font: inherit;
}

body.modal-aberto {
    overflow: hidden;
}

.cabecalho-avaliatech {
    width: 100%;
    min-height: var(--altura-topo);
    color: var(--cor-texto-claro);
    background: var(--gradiente-principal);
    box-shadow: var(--sombra-media);
}

.cabecalho-conteudo {
    width: min(98%, 1800px);
    min-height: var(--altura-topo);
    margin: 0 auto;
    padding: var(--espaco-3) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-5);
}

.marca-modulo {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-3);
    color: var(--cor-texto-claro);
    text-decoration: none;
}

.marca-modulo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: 0 0 auto;
}

.marca-modulo span,
.marca-modulo strong {
    display: block;
}

.marca-modulo span {
    margin-bottom: var(--espaco-1);
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.marca-modulo strong {
    font-family: var(--fonte-titulos);
    font-size: 1.35rem;
    line-height: 1;
}

.navbar-modulo {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
}

.item-navbar {
    min-width: 96px;
    min-height: 58px;
    padding: var(--espaco-2) var(--espaco-3);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-1);
    color: var(--cor-texto-claro);
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--borda-media);
    background: rgba(255, 255, 255, 0.08);
    transition: var(--transicao-padrao);
}

.item-navbar-desabilitado {
    opacity: 0.46;
    cursor: not-allowed;
}

.item-navbar-desabilitado:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: none;
}

.item-navbar i {
    font-size: 1.25rem;
}

.item-navbar span {
    font-size: var(--texto-mini);
    font-weight: 700;
}

.item-navbar:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--cor-destaque-clara);
    transform: translateY(-1px);
}

.area-login {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.campo-login {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
}

.campo-login label {
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--texto-mini);
    font-weight: 700;
    text-transform: uppercase;
}

.campo-login input {
    width: 180px;
    height: 42px;
    padding: 0 var(--espaco-3);
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--borda-media);
    outline: none;
    transition: var(--transicao-padrao);
}

.campo-login input:focus {
    border-color: var(--cor-destaque-clara);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.24);
}

.botao-login {
    height: 42px;
    padding: 0 var(--espaco-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    color: var(--cor-principal-escura);
    background: var(--cor-destaque-clara);
    border: 0;
    border-radius: var(--borda-media);
    cursor: pointer;
    font-weight: 800;
    transition: var(--transicao-padrao);
}

.botao-login:hover {
    background: var(--cor-destaque-suave);
    transform: translateY(-1px);
}

.modal-login {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: var(--espaco-5);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(5px) saturate(80%);
}

.modal-login.modal-login-aberto {
    display: flex;
}

.janela-login {
    position: relative;
    width: min(100%, 460px);
    max-height: calc(100vh - 2 * var(--espaco-5));
    overflow-y: auto;
    padding: var(--espaco-6);
    color: var(--cor-texto);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--borda-grande);
    box-shadow: var(--sombra-forte);
}

.janela-primeiro-acesso {
    width: min(100%, 760px);
}

.botao-fechar-modal {
    position: absolute;
    top: var(--espaco-3);
    right: var(--espaco-3);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto-secundario);
    background: var(--cor-fundo-alt);
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-circular);
    cursor: pointer;
    transition: var(--transicao-padrao);
}

.botao-fechar-modal:hover {
    color: var(--cor-texto-claro);
    background: var(--cor-erro);
}

.cabecalho-modal-login {
    margin-bottom: var(--espaco-5);
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
}

.cabecalho-modal-login > i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto-claro);
    background: var(--gradiente-destaque);
    border-radius: var(--borda-media);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.cabecalho-modal-login h2 {
    margin: 0 0 var(--espaco-1);
    color: var(--cor-texto);
    font-family: var(--fonte-titulos);
    font-size: var(--texto-grande);
}

.cabecalho-modal-login p {
    margin: 0;
    color: var(--cor-texto-secundario);
    font-size: var(--texto-pequeno);
    line-height: 1.5;
}

.formulario-login-modal {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
}

.linha-formulario {
    display: flex;
    gap: var(--espaco-3);
}

.linha-formulario .campo-login {
    flex: 1 1 0;
}

.formulario-login-modal .campo-login label {
    color: var(--cor-texto-secundario);
}

.formulario-login-modal .campo-login input {
    width: 100%;
    border-color: var(--cor-borda);
}

.formulario-login-modal .campo-login input[readonly] {
    color: var(--cor-texto-secundario);
    background: var(--cor-fundo-alt);
    cursor: default;
}

.regras-senha {
    margin: 0;
    padding: var(--espaco-3);
    color: var(--cor-texto-secundario);
    background: var(--cor-principal-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-media);
    font-size: var(--texto-pequeno);
    line-height: 1.5;
}

.mensagem-formulario {
    display: none;
    margin: 0;
    padding: var(--espaco-3);
    border-radius: var(--borda-media);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    line-height: 1.5;
}

.mensagem-formulario.mensagem-erro {
    display: block;
    color: var(--cor-erro);
    background: var(--cor-erro-suave);
}

.mensagem-formulario.mensagem-sucesso {
    display: block;
    color: var(--cor-sucesso);
    background: var(--cor-sucesso-suave);
}

.mensagem-formulario.mensagem-aviso {
    display: block;
    color: var(--cor-alerta);
    background: var(--cor-alerta-suave);
}

.acoes-login-modal {
    display: flex;
    gap: var(--espaco-3);
}

.acoes-login-modal .botao-login,
.botao-limpar-login {
    flex: 1 1 0;
}

.botao-limpar-login {
    height: 42px;
    padding: 0 var(--espaco-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    color: var(--cor-principal-media);
    background: var(--cor-principal-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-media);
    cursor: pointer;
    font-weight: 800;
    transition: var(--transicao-padrao);
}

.botao-limpar-login:hover {
    color: var(--cor-texto-claro);
    background: var(--cor-principal-media);
}

.links-login-modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
}

.links-login-modal button {
    padding: 0;
    color: var(--cor-principal-media);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: var(--texto-pequeno);
    font-weight: 700;
}

.links-login-modal button:hover {
    color: var(--cor-principal-escura);
    text-decoration: underline;
}

.pagina-validacao-email {
    min-height: 100vh;
    padding: var(--espaco-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradiente-suave);
}

.cartao-validacao-email {
    width: min(100%, 520px);
    padding: var(--espaco-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-4);
    text-align: center;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--borda-grande);
    box-shadow: var(--sombra-media);
}

.cartao-validacao-email > i {
    font-size: 3rem;
}

.cartao-validacao-email.sucesso > i {
    color: var(--cor-sucesso);
}

.cartao-validacao-email.erro > i {
    color: var(--cor-erro);
}

.cartao-validacao-email h1 {
    margin: 0;
    color: var(--cor-texto);
    font-family: var(--fonte-titulos);
    font-size: var(--texto-titulo);
}

.cartao-validacao-email p {
    margin: 0;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}

@media (max-width: 860px) {
    .cabecalho-conteudo {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
    }

    .marca-modulo,
    .navbar-modulo,
    .area-login {
        flex: 0 1 auto;
    }

    .navbar-modulo {
        justify-content: flex-start;
    }

    .area-login {
        justify-content: flex-start;
    }

    .area-login .botao-login {
        width: max-content;
    }
}

@media (max-width: 640px) {
    .linha-formulario,
    .acoes-login-modal,
    .links-login-modal {
        flex-direction: column;
        align-items: stretch;
    }

    .area-login .botao-login,
    .acoes-login-modal .botao-login,
    .botao-limpar-login {
        width: 100%;
    }
}