/* Define as variáveis de identidade visual da SAFE */
:root {
    --azul-ceu: #87CEEB;
    --azul-principal: #00AEEF;
    --azul-escuro: #0B5C7A;
    --azul-profundo: #083A4F;
    --branco: #ffffff;
    --fundo: #F7F5F0;
    --fundo-claro: #F1F8FB;
    --texto: #17313D;
    --texto-suave: #63737C;
    --borda: #DEE8ED;
    --verde: #1E9E6A;
    --verde-fundo: #E4F7EF;
    --amarelo: #B7791F;
    --amarelo-fundo: #FFF4D6;
    --vermelho: #C0392B;
    --vermelho-fundo: #FDE8E5;
    --sombra: 0 16px 40px rgba(8, 58, 79, 0.10);
    --raio: 18px;
}

/* Redefine o comportamento padrão dos elementos */
* {
    /* Inclui bordas no cálculo de tamanho */
    box-sizing: border-box;
}

/* Define o comportamento básico da página */
html {
    /* Ativa a rolagem suave */
    scroll-behavior: smooth;
}

/* Define a tipografia e as cores do corpo */
body {
    /* Define a fonte institucional */
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    /* Define a cor do texto */
    color: var(--texto);
    /* Define o fundo geral */
    background-color: var(--fundo);
    /* Remove a margem padrão */
    margin: 0;
    /* Define o tamanho de linha para leitura confortável */
    line-height: 1.6;
}

/* Remove estilos padrão de links */
a {
    /* Define a cor dos links */
    color: var(--azul-escuro);
    /* Remove o sublinhado padrão */
    text-decoration: none;
}

/* Aplica sublinhado ao passar o mouse */
a:hover {
    /* Reforça a interação */
    text-decoration: underline;
}

/* Define o comportamento das imagens */
img {
    /* Impede que imagens ultrapassem o container */
    max-width: 100%;
    /* Mantém a proporção */
    height: auto;
}

/* Define a largura máxima das áreas internas */
.limite {
    /* Limita a largura do conteúdo */
    max-width: 1180px;
    /* Centraliza o conteúdo */
    margin: 0 auto;
    /* Adiciona espaçamento lateral */
    padding: 0 24px;
}

/* Define o tamanho padrão dos títulos */
h1, h2, h3 {
    /* Reduz o espaçamento vertical */
    margin: 0 0 12px;
    /* Ajusta a altura das linhas */
    line-height: 1.2;
    /* Define a cor escura dos títulos */
    color: var(--azul-profundo);
}

/* Define o tamanho dos parágrafos */
p {
    /* Aplica margem inferior */
    margin: 0 0 12px;
}

/* Remove o contorno padrão e aplica foco visível */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    /* Cria um contorno de acessibilidade */
    outline: 3px solid rgba(0, 174, 239, 0.45);
    /* Afasta o contorno do elemento */
    outline-offset: 2px;
}

/* =========================================================
   BOTÕES
   ========================================================= */

/* Define o botão base */
.botao {
    /* Exibe os itens lado a lado */
    display: inline-flex;
    /* Centraliza os itens verticalmente */
    align-items: center;
    /* Centraliza os itens horizontalmente */
    justify-content: center;
    /* Define o espaço entre ícone e texto */
    gap: 8px;
    /* Define a borda transparente */
    border: 1px solid transparent;
    /* Define o espaçamento interno */
    padding: 11px 18px;
    /* Define o raio das bordas */
    border-radius: 12px;
    /* Define o tamanho da fonte */
    font-size: 0.95rem;
    /* Define o peso da fonte */
    font-weight: 700;
    /* Transforma o cursor em mão */
    cursor: pointer;
    /* Remove a decoração de links */
    text-decoration: none;
    /* Define a transição dos estados */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Remove o sublinhado de botões em links */
.botao:hover {
    /* Mantém o texto sem sublinhado */
    text-decoration: none;
    /* Eleva levemente o botão */
    transform: translateY(-1px);
}

/* Define o botão principal */
.botao-principal {
    /* Aplica o azul principal */
    background-color: var(--azul-principal);
    /* Define o texto branco */
    color: var(--branco);
    /* Cria uma sombra azul */
    box-shadow: 0 10px 22px rgba(0, 174, 239, 0.28);
}

/* Define o estado de foco do botão principal */
.botao-principal:hover {
    /* Escurece levemente o azul */
    background-color: #0099D2;
    /* Reforça a sombra */
    box-shadow: 0 14px 28px rgba(0, 174, 239, 0.34);
}

/* Define o botão de contorno */
.botao-contorno {
    /* Define o fundo branco */
    background-color: var(--branco);
    /* Define a cor do texto */
    color: var(--azul-escuro);
    /* Define a borda azul clara */
    border-color: var(--azul-ceu);
}

/* Define o estado do botão de contorno */
.botao-contorno:hover {
    /* Aplica um fundo azul claro */
    background-color: var(--fundo-claro);
}

/* Define o botão de sucesso */
.botao-sucesso {
    /* Aplica o verde */
    background-color: var(--verde);
    /* Define texto branco */
    color: var(--branco);
}

/* Define o botão de perigo */
.botao-perigo {
    /* Aplica o vermelho */
    background-color: var(--vermelho);
    /* Define texto branco */
    color: var(--branco);
}

/* Define o botão grande */
.botao-grande {
    /* Aumenta o espaçamento */
    padding: 15px 24px;
    /* Aumenta a fonte */
    font-size: 1rem;
}

/* Define o botão pequeno */
.botao-pequeno {
    /* Reduz o espaçamento */
    padding: 7px 11px;
    /* Reduz a fonte */
    font-size: 0.82rem;
    /* Reduz o raio */
    border-radius: 9px;
}

/* Define o botão de largura completa */
.botao-bloco {
    /* Ocupa toda a largura disponível */
    width: 100%;
}

/* Define formulários em linha */
.formulario-em-linha {
    /* Exibe o formulário em linha */
    display: inline-flex;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Define o espaço entre itens */
    gap: 8px;
    /* Remove a margem */
    margin: 0;
}

/* =========================================================
   CABEÇALHO PÚBLICO
   ========================================================= */

/* Define o cabeçalho público */
.cabecalho-publico {
    /* Fixa o cabeçalho no topo */
    position: sticky;
    /* Define a posição superior */
    top: 0;
    /* Define o índice de camada */
    z-index: 50;
    /* Aplica fundo branco translúcido */
    background-color: rgba(255, 255, 255, 0.94);
    /* Aplica desfoque no fundo */
    backdrop-filter: blur(10px);
    /* Define a borda inferior */
    border-bottom: 1px solid var(--borda);
}

/* Define a área interna do cabeçalho */
.cabecalho-interno {
    /* Exibe os itens lado a lado */
    display: flex;
    /* Distribui os itens */
    justify-content: space-between;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Define a altura mínima */
    min-height: 74px;
    /* Define o espaço entre itens */
    gap: 20px;
}

/* Define a marca */
.marca {
    /* Exibe os itens lado a lado */
    display: inline-flex;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Define o espaço entre ícone e texto */
    gap: 10px;
    /* Remove a decoração */
    text-decoration: none;
}

/* Define o ícone da marca */
.marca-icone {
    /* Define largura e altura */
    width: 40px;
    height: 40px;
    /* Centraliza o ícone */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 12px;
    /* Aplica o gradiente azul */
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-ceu));
    /* Define a cor do ícone */
    color: var(--branco);
    /* Define a sombra */
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.28);
}

/* Define o texto da marca */
.marca-texto {
    /* Define o tamanho da fonte */
    font-size: 1.35rem;
    /* Define o peso */
    font-weight: 800;
    /* Define o espaçamento entre letras */
    letter-spacing: 0.06em;
    /* Define a cor */
    color: var(--azul-profundo);
}

/* Define a logomarca personalizada do site */
.marca-logo {
    /* Define a altura máxima da imagem */
    max-height: 46px;
    /* Mantém a proporção da imagem */
    width: auto;
    /* Limita a largura para não empurrar o menu */
    max-width: 210px;
    /* Exibe a imagem como bloco */
    display: block;
    /* Define o encaixe da imagem */
    object-fit: contain;
}

/* Define a página simples de retorno das rotinas */
.pagina-simples {
    /* Centraliza o conteúdo na tela */
    display: flex;
    /* Alinha o conteúdo ao centro */
    align-items: center;
    /* Justifica o conteúdo ao centro */
    justify-content: center;
    /* Ocupa a tela inteira */
    min-height: 100vh;
    /* Cria espaço ao redor do cartão */
    padding: 24px;
    /* Define o fundo da página */
    background-color: var(--fundo);
}

/* Define o cartão da página simples */
.pagina-simples .cartao-painel {
    /* Limita a largura do cartão */
    max-width: 720px;
    /* Ocupa a largura disponível */
    width: 100%;
}

/* Oculta formulários usados apenas pelo JavaScript */
.formulario-oculto {
    /* Remove o formulário da visualização */
    display: none;
}

/* Define a prévia da logomarca no painel administrativo */
.previa-logomarca {
    /* Exibe o conteúdo centralizado */
    display: flex;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Centraliza horizontalmente */
    justify-content: center;
    /* Define o espaço interno */
    padding: 28px 20px;
    /* Define o fundo claro */
    background-color: var(--cinza-claro);
    /* Define a borda */
    border: 1px dashed var(--cinza-borda);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaço abaixo */
    margin-bottom: 18px;
}

/* Define a imagem da prévia */
.previa-logomarca img {
    /* Limita a altura */
    max-height: 90px;
    /* Mantém a proporção */
    width: auto;
    /* Limita a largura */
    max-width: 100%;
    /* Define o encaixe */
    object-fit: contain;
}

/* Define a prévia da marca padrão */
.previa-logomarca-padrao {
    /* Define o espaço entre os itens */
    gap: 12px;
}

/* Define a logomarca da tela de acesso administrativo */
.logo-acesso {
    /* Define a altura máxima */
    max-height: 70px;
    /* Mantém a proporção */
    width: auto;
    /* Limita a largura */
    max-width: 220px;
    /* Centraliza a imagem */
    display: block;
    /* Define a margem inferior */
    margin: 0 auto 12px auto;
    /* Define o encaixe */
    object-fit: contain;
}

/* Define a navegação pública */
.navegacao-publica {
    /* Exibe os links lado a lado */
    display: flex;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Define o espaço entre itens */
    gap: 18px;
    /* Define a fonte */
    font-size: 0.94rem;
    /* Define o peso */
    font-weight: 600;
}

/* Define o link de entrar */
.link-entrar {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o peso */
    font-weight: 700;
}

/* Define o botão do menu mobile */
.botao-menu {
    /* Esconde inicialmente em telas grandes */
    display: none;
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o fundo */
    background: var(--branco);
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o tamanho */
    width: 42px;
    height: 42px;
    /* Define o raio */
    border-radius: 11px;
    /* Define a fonte */
    font-size: 1.1rem;
    /* Define o cursor */
    cursor: pointer;
}

/* =========================================================
   HOME PÚBLICA
   ========================================================= */

/* Define o corpo da página pública */
.pagina-publica {
    /* Aplica o fundo institucional */
    background-color: var(--branco);
}

/* Define a abertura com textura institucional de segurança */
.destaque {
    /* Define a cor base da textura */
    background-color: #061A2B;
    /* Monta camadas de grade, linhas diagonais e brilho azul */
    background-image:
        radial-gradient(circle at 18% 18%, rgba(0, 174, 239, 0.26), transparent 42%),
        radial-gradient(circle at 84% 12%, rgba(0, 174, 239, 0.15), transparent 38%),
        radial-gradient(circle at 50% 120%, rgba(4, 18, 31, 0.95), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(45deg, rgba(0, 174, 239, 0.06) 0 1px, transparent 1px 24px),
        linear-gradient(160deg, #082235 0%, #061A2B 55%, #04121F 100%);
    /* Define o tamanho das camadas */
    background-size: auto, auto, auto, auto, auto, auto;
    /* Mantém o alinhamento central */
    background-position: center center;
    /* Não repete as camadas */
    background-repeat: no-repeat;
    /* Define a altura mínima da abertura */
    min-height: 640px;
    /* Exibe o conteúdo sobre a imagem */
    display: flex;
    /* Organiza o conteúdo na vertical */
    flex-direction: column;
    /* Centraliza o conteúdo na vertical */
    justify-content: center;
    /* Oculta o excesso da imagem */
    overflow: hidden;
    /* Define a posição da área */
    position: relative;
}

/* Define a camada de profundidade sobre a textura */
.destaque-veu {
    /* Cobre toda a abertura */
    position: absolute;
    inset: 0;
    /* Aplica um leve vinhete para dar profundidade */
    background: radial-gradient(circle at 50% 40%, rgba(6, 26, 43, 0) 0%, rgba(4, 18, 31, 0.45) 100%);
}

/* Define o conteúdo textual da abertura */
.destaque-conteudo {
    /* Fica acima da camada escura */
    position: relative;
    /* Limita a largura do texto */
    max-width: 780px;
    /* Centraliza o bloco */
    margin: 0 auto;
    /* Centraliza o texto */
    text-align: center;
    /* Define o espaçamento vertical */
    padding: 120px 24px 40px;
}

/* Define o selo da abertura */
.destaque-selo {
    /* Exibe em linha */
    display: inline-flex;
    /* Alinha os itens */
    align-items: center;
    /* Define o espaço */
    gap: 8px;
    /* Define o fundo translúcido */
    background-color: rgba(255, 255, 255, 0.14);
    /* Define a borda clara */
    border: 1px solid rgba(255, 255, 255, 0.38);
    /* Define a cor */
    color: var(--branco);
    /* Define o espaçamento */
    padding: 8px 14px;
    /* Define o raio */
    border-radius: 999px;
    /* Define o tamanho */
    font-size: 0.84rem;
    /* Define o peso */
    font-weight: 700;
}

/* Define o título da abertura */
.destaque-conteudo h1 {
    /* Define o tamanho */
    font-size: clamp(2.3rem, 5.6vw, 4.1rem);
    /* Define a cor branca */
    color: var(--branco);
    /* Define o espaçamento entre letras */
    letter-spacing: -0.03em;
    /* Define a margem */
    margin: 18px 0 16px;
    /* Cria sombra suave no texto */
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Define o parágrafo da abertura */
.destaque-conteudo p {
    /* Limita a largura da leitura */
    max-width: 640px;
    /* Centraliza o bloco */
    margin: 0 auto 28px;
    /* Define o tamanho */
    font-size: 1.12rem;
    /* Define a cor clara */
    color: rgba(255, 255, 255, 0.88);
}

/* Define as ações da abertura */
.destaque-acoes {
    /* Exibe os botões lado a lado */
    display: flex;
    /* Permite quebra de linha */
    flex-wrap: wrap;
    /* Define o espaço */
    gap: 12px;
    /* Centraliza os botões */
    justify-content: center;
}

/* Define o botão claro usado sobre a foto */
.botao-claro {
    /* Define o fundo branco */
    background-color: var(--branco);
    /* Define a cor do texto */
    color: var(--azul-profundo);
    /* Cria sombra sobre a foto */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* Define o estado de foco do botão claro */
.botao-claro:hover {
    /* Aplica o fundo azul claro */
    background-color: #EAF7FD;
}

/* Define o botão de contorno claro usado sobre a foto */
.botao-contorno-claro {
    /* Define o fundo translúcido */
    background-color: rgba(255, 255, 255, 0.08);
    /* Define a cor do texto */
    color: var(--branco);
    /* Define a borda clara */
    border-color: rgba(255, 255, 255, 0.65);
}

/* Define o estado de foco do botão de contorno claro */
.botao-contorno-claro:hover {
    /* Aplica o fundo translúcido maior */
    background-color: rgba(255, 255, 255, 0.2);
}

/* Define o rodapé da abertura */
.destaque-rodape {
    /* Fica acima da camada escura */
    position: relative;
    /* Exibe os itens em linha */
    display: flex;
    /* Permite quebra de linha */
    flex-wrap: wrap;
    /* Define o espaço */
    gap: 14px 34px;
    /* Centraliza os itens */
    justify-content: center;
    /* Define o espaçamento */
    padding: 18px 24px 36px;
    /* Define a cor clara */
    color: rgba(255, 255, 255, 0.85);
    /* Define o tamanho */
    font-size: 0.9rem;
    /* Define o peso */
    font-weight: 600;
}

/* Define o ícone do rodapé da abertura */
.destaque-rodape i {
    /* Define a cor do ícone */
    color: var(--azul-ceu);
    /* Define o espaço */
    margin-right: 8px;
}

/* Define a seção das áreas de acesso */
.secao-areas {
    /* Aplica o fundo branco */
    background-color: var(--branco);
}

/* Define a grade com as duas áreas */
.grade-areas {
    /* Exibe em grade */
    display: grid;
    /* Define duas colunas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Define o espaço entre os cartões */
    gap: 28px;
}

/* Define o cartão de cada área */
.cartao-area {
    /* Exibe em coluna */
    display: flex;
    flex-direction: column;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Oculta o excesso da foto */
    overflow: hidden;
    /* Define a sombra */
    box-shadow: var(--sombra);
}

/* Define a faixa superior do cartão do cliente */
.cartao-area-cliente {
    /* Define a borda superior azul */
    border-top: 6px solid var(--azul-principal);
}

/* Define a faixa superior do cartão do freelancer */
.cartao-area-freelancer {
    /* Define a borda superior verde */
    border-top: 6px solid var(--verde);
}

/* Define o conteúdo do cartão da área */
.cartao-area-conteudo {
    /* Define o espaçamento interno */
    padding: 26px 26px 30px;
}

/* Define o selo do cartão da área */
.cartao-area-selo {
    /* Exibe em linha */
    display: inline-flex;
    /* Alinha os itens */
    align-items: center;
    /* Define o espaço */
    gap: 8px;
    /* Define o tamanho */
    font-size: 0.8rem;
    /* Define o peso */
    font-weight: 700;
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o espaçamento entre letras */
    letter-spacing: 0.05em;
}

/* Define a lista de ações da área */
.lista-area {
    /* Remove a marca padrão da lista */
    list-style: none;
    /* Remove o espaçamento padrão */
    padding: 0;
    /* Define a margem */
    margin: 18px 0 24px;
    /* Exibe em grade */
    display: grid;
    /* Define o espaço entre os itens */
    gap: 12px;
}

/* Define o item da lista de ações */
.lista-area li {
    /* Exibe em grade */
    display: grid;
    /* Define a coluna do ícone */
    grid-template-columns: 26px 1fr;
    /* Define o espaço */
    gap: 10px;
    /* Alinha os itens ao topo */
    align-items: start;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.95rem;
}

/* Define o ícone da lista de ações */
.lista-area i {
    /* Define a cor */
    color: var(--azul-principal);
    /* Alinha o ícone ao texto */
    margin-top: 4px;
}

/* Define o botão colorido da área do cliente */
.botao-area-cliente {
    /* Aplica o azul principal */
    background-color: var(--azul-principal);
    /* Define o texto branco */
    color: var(--branco);
    /* Cria sombra azul */
    box-shadow: 0 10px 22px rgba(0, 174, 239, 0.30);
}

/* Define o estado de foco do botão da área do cliente */
.botao-area-cliente:hover {
    /* Escurece levemente o azul */
    background-color: #0099D2;
}

/* Define o botão colorido da área do freelancer */
.botao-area-freelancer {
    /* Aplica o verde */
    background-color: var(--verde);
    /* Define o texto branco */
    color: var(--branco);
    /* Cria sombra verde */
    box-shadow: 0 10px 22px rgba(30, 158, 106, 0.30);
}

/* Define o estado de foco do botão da área do freelancer */
.botao-area-freelancer:hover {
    /* Escurece levemente o verde */
    background-color: #198A5B;
}

/* Define o botão neutro usado quando a permissão não está disponível */
.botao-neutro {
    /* Aplica o cinza do texto suave */
    background-color: var(--texto-suave);
    /* Define o texto branco */
    color: var(--branco);
    /* Mantém o cursor padrão */
    cursor: not-allowed;
}

/* Define o aviso das notificações no painel do freelancer */
.aviso-notificacoes {
    /* Exibe em linha */
    display: flex;
    /* Permite quebra de linha */
    flex-wrap: wrap;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Distribui o espaço entre as partes */
    justify-content: space-between;
    /* Define o espaço */
    gap: 16px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define a borda lateral */
    border-left: 4px solid var(--azul-principal);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaçamento */
    padding: 18px 20px;
    /* Define a margem inferior */
    margin-bottom: 24px;
}

/* Define o texto do aviso das notificações */
.aviso-notificacoes-texto {
    /* Limita a largura da leitura */
    max-width: 620px;
}

/* Define o título do aviso das notificações */
.aviso-notificacoes strong {
    /* Exibe em bloco */
    display: block;
    /* Define a cor */
    color: var(--azul-profundo);
    /* Define a margem inferior */
    margin-bottom: 4px;
}

/* Define a descrição do aviso das notificações */
.aviso-notificacoes p {
    /* Remove a margem padrão */
    margin: 0;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.92rem;
}

/* Define as seções públicas */
.secao {
    /* Define o espaçamento vertical */
    padding: 76px 0;
}

/* Define o fundo das vantagens */
.secao-vantagens {
    /* Aplica o fundo claro */
    background-color: var(--fundo);
}

/* Define o fundo dos passos */
.secao-passos {
    /* Aplica o fundo branco */
    background-color: var(--branco);
}

/* Define o cabeçalho das seções */
.cabecalho-secao {
    /* Define a largura máxima */
    max-width: 720px;
    /* Centraliza */
    margin: 0 auto 38px;
    /* Centraliza o texto */
    text-align: center;
}

/* Define o título das seções */
.cabecalho-secao h2 {
    /* Define o tamanho */
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    /* Define a margem */
    margin: 14px 0 10px;
}

/* Define o texto das seções */
.cabecalho-secao p {
    /* Define a cor */
    color: var(--texto-suave);
}

/* Define a grade de vantagens */
.grade-vantagens {
    /* Exibe em grade */
    display: grid;
    /* Define três colunas */
    grid-template-columns: repeat(3, 1fr);
    /* Define o espaço */
    gap: 20px;
}

/* Define o cartão de vantagem */
.cartao-vantagem {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 24px;
    /* Define a sombra */
    box-shadow: 0 10px 24px rgba(8, 58, 79, 0.04);
    /* Define a transição */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Define o estado de hover do cartão */
.cartao-vantagem:hover {
    /* Eleva o cartão */
    transform: translateY(-4px);
    /* Reforça a sombra */
    box-shadow: var(--sombra);
}

/* Define o ícone da vantagem */
.icone-vantagem {
    /* Define o tamanho */
    width: 48px;
    height: 48px;
    /* Centraliza o conteúdo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 14px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a cor */
    color: var(--azul-principal);
    /* Define o tamanho do ícone */
    font-size: 1.25rem;
    /* Define a margem */
    margin-bottom: 16px;
}

/* Define o título da vantagem */
.cartao-vantagem h3 {
    /* Define o tamanho */
    font-size: 1.08rem;
}

/* Define o texto da vantagem */
.cartao-vantagem p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.92rem;
    /* Remove a margem inferior */
    margin-bottom: 0;
}

/* Define a lista de passos */
.lista-passos {
    /* Exibe em grade */
    display: grid;
    /* Define cinco colunas */
    grid-template-columns: repeat(5, 1fr);
    /* Define o espaço */
    gap: 16px;
}

/* Define o passo */
.passo {
    /* Aplica fundo claro */
    background-color: var(--fundo-claro);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 20px;
}

/* Define o número do passo */
.numero-passo {
    /* Define o tamanho */
    width: 38px;
    height: 38px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 50%;
    /* Define o fundo */
    background-color: var(--azul-principal);
    /* Define a cor */
    color: var(--branco);
    /* Define o peso */
    font-weight: 800;
    /* Define a margem */
    margin-bottom: 14px;
}

/* Define o título do passo */
.passo h3 {
    /* Define o tamanho */
    font-size: 1rem;
}

/* Define o texto do passo */
.passo p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.86rem;
    /* Remove a margem */
    margin-bottom: 0;
}

/* Define a chamada final */
.secao-chamada {
    /* Aplica gradiente */
    background: linear-gradient(120deg, var(--azul-escuro), #0A7793);
    /* Define a cor */
    color: var(--branco);
}

/* Define a área interna da chamada */
.chamada-interna {
    /* Exibe em duas colunas */
    display: flex;
    /* Distribui os itens */
    justify-content: space-between;
    /* Alinha os itens */
    align-items: center;
    /* Define o espaço */
    gap: 28px;
    /* Permite quebra */
    flex-wrap: wrap;
}

/* Define o título da chamada */
.chamada-interna h2 {
    /* Define a cor */
    color: var(--branco);
    /* Define o tamanho */
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}

/* Define o texto da chamada */
.chamada-interna p {
    /* Define a cor */
    color: rgba(255, 255, 255, 0.82);
    /* Remove a margem */
    margin-bottom: 0;
}

/* Define as ações da chamada */
.chamada-acoes {
    /* Exibe os botões lado a lado */
    display: flex;
    /* Define o espaço */
    gap: 12px;
    /* Permite quebra */
    flex-wrap: wrap;
}

/* Define o botão de contorno na chamada */
.secao-chamada .botao-contorno {
    /* Define o fundo transparente */
    background-color: transparent;
    /* Define a cor */
    color: var(--branco);
    /* Define a borda */
    border-color: rgba(255, 255, 255, 0.7);
}

/* Define o rodapé */
.rodape-publico {
    /* Define o fundo escuro */
    background-color: var(--azul-profundo);
    /* Define a cor */
    color: rgba(255, 255, 255, 0.78);
    /* Define o espaçamento superior */
    padding-top: 42px;
}

/* Define a área interna do rodapé */
.rodape-interno {
    /* Exibe em duas colunas */
    display: flex;
    /* Distribui */
    justify-content: space-between;
    /* Define o espaço */
    gap: 24px;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define o espaçamento inferior */
    padding-bottom: 28px;
}

/* Define a marca do rodapé */
.rodape-marca strong {
    /* Define a cor */
    color: var(--branco);
    /* Define o tamanho */
    font-size: 1.2rem;
}

/* Define o texto do rodapé */
.rodape-marca p {
    /* Define a largura máxima */
    max-width: 420px;
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define os links do rodapé */
.rodape-links {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 6px;
}

/* Define os links do rodapé */
.rodape-links a {
    /* Define a cor */
    color: rgba(255, 255, 255, 0.78);
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define a linha de copyright */
.rodape-copy {
    /* Define a borda superior */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    /* Define o espaçamento */
    padding-top: 18px;
    padding-bottom: 20px;
    /* Define o tamanho */
    font-size: 0.8rem;
}

/* =========================================================
   AUTENTICAÇÃO
   ========================================================= */

/* Define a seção de autenticação */
.secao-autenticacao {
    /* Define o espaçamento */
    padding: 60px 24px 76px;
    /* Exibe em grade */
    display: flex;
    /* Centraliza */
    justify-content: center;
    /* Aplica fundo claro */
    background: radial-gradient(circle at 80% 10%, #E8F8FF, transparent 45%), var(--fundo);
    /* Define a altura mínima */
    min-height: 70vh;
}

/* Define o cartão de autenticação */
.cartao-autenticacao {
    /* Define a largura */
    width: 100%;
    /* Define a largura máxima */
    max-width: 480px;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 22px;
    /* Define a sombra */
    box-shadow: var(--sombra);
    /* Define o espaçamento */
    padding: 30px;
    /* Define a altura máxima de encaixe */
    align-self: flex-start;
}

/* Define a variação larga */
.secao-autenticacao-larga .cartao-autenticacao {
    /* Aumenta a largura máxima */
    max-width: 620px;
}

/* Define o cabeçalho do cartão */
.cabecalho-autenticacao {
    /* Centraliza o texto */
    text-align: center;
    /* Define a margem */
    margin-bottom: 22px;
}

/* Define o ícone de autenticação */
.icone-autenticacao {
    /* Define o tamanho */
    width: 56px;
    height: 56px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 16px;
    /* Aplica gradiente */
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-ceu));
    /* Define a cor */
    color: var(--branco);
    /* Define o tamanho */
    font-size: 1.4rem;
    /* Define a margem */
    margin-bottom: 12px;
}

/* Define o título do cartão */
.cabecalho-autenticacao h1 {
    /* Define o tamanho */
    font-size: 1.6rem;
}

/* Define o texto do cartão */
.cabecalho-autenticacao p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.92rem;
    /* Remove a margem */
    margin-bottom: 0;
}

/* Define o rodapé do cartão */
.rodape-autenticacao {
    /* Define a borda superior */
    border-top: 1px solid var(--borda);
    /* Define a margem */
    margin-top: 20px;
    /* Define o espaçamento */
    padding-top: 16px;
    /* Exibe os itens */
    display: flex;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define o espaço */
    gap: 8px 14px;
    /* Centraliza */
    justify-content: center;
    /* Define o tamanho */
    font-size: 0.86rem;
    /* Define a cor */
    color: var(--texto-suave);
}

/* Define os links do rodapé */
.rodape-autenticacao a {
    /* Define o peso */
    font-weight: 700;
}

/* Define o aviso de aprovação */
.aviso-aprovacao {
    /* Define a margem */
    margin-top: 14px;
    /* Define o tamanho */
    font-size: 0.82rem;
    /* Define a cor */
    color: var(--texto-suave);
    /* Centraliza */
    text-align: center;
}

/* Define o texto opcional */
.texto-opcional {
    /* Define o peso normal */
    font-weight: 400;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.8rem;
}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */

/* Define o formulário */
.formulario {
    /* Exibe os campos em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 16px;
}

/* Define o campo */
.campo {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 6px;
}

/* Define o rótulo */
.campo label,
.rotulo-grupo {
    /* Define o peso */
    font-weight: 700;
    /* Define o tamanho */
    font-size: 0.9rem;
    /* Define a cor */
    color: var(--azul-profundo);
}

/* Define as entradas de formulário */
.campo input,
.campo select,
.campo textarea {
    /* Define a largura */
    width: 100%;
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 11px;
    /* Define o espaçamento */
    padding: 11px 13px;
    /* Define a fonte */
    font: inherit;
    /* Define o tamanho */
    font-size: 0.92rem;
    /* Define a cor */
    color: var(--texto);
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a transição */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Define o foco das entradas */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    /* Define a borda azul */
    border-color: var(--azul-principal);
    /* Cria um anel de foco */
    box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.12);
    /* Remove o contorno padrão */
    outline: none;
}

/* Define os campos com caixa de seleção */
.campo-opcao {
    /* Organiza os itens lado a lado */
    display: flex;
    /* Alinha os itens ao centro */
    align-items: center;
    /* Abre espaço entre a caixa e o texto */
    gap: 9px;
}

/* Define a caixa de seleção */
.campo-opcao input[type="checkbox"] {
    /* Define o tamanho da caixa */
    width: 18px;
    /* Define a altura da caixa */
    height: 18px;
    /* Remove o arredondamento */
    border-radius: 5px;
    /* Mantém o preenchimento padrão */
    accent-color: var(--azul-principal);
}

/* Define o texto ao lado da caixa */
.campo-opcao label {
    /* Permite clicar no texto */
    cursor: pointer;
    /* Define o tamanho da fonte */
    font-size: 0.9rem;
}

/* Define o texto de ajuda */
.texto-ajuda {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.78rem;
}

/* Define a grade de formulário */
.grade-formulario {
    /* Exibe em grade */
    display: grid;
    /* Define três colunas */
    grid-template-columns: repeat(3, 1fr);
    /* Define o espaço */
    gap: 14px;
}

/* Define os campos compactos */
.campo-compacto {
    /* Define a largura mínima */
    min-width: 190px;
}

/* Define a barra de filtros */
.barra-filtros {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao fim */
    align-items: flex-end;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define o espaço */
    gap: 12px;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 16px;
    /* Define a margem */
    margin-bottom: 20px;
}

/* Define a opção de checkbox */
.opcao-checkbox {
    /* Exibe em linha */
    display: inline-flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 8px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 10px;
    /* Define o espaçamento */
    padding: 9px 12px;
    /* Define o cursor */
    cursor: pointer;
    /* Define o tamanho */
    font-size: 0.88rem;
    /* Define o peso */
    font-weight: 600;
}

/* Define o checkbox */
.opcao-checkbox input {
    /* Mantém o tamanho natural */
    width: auto;
    /* Define a cor de destaque */
    accent-color: var(--azul-principal);
}

/* Define o bloco de observação */
.bloco-observacao {
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 12px;
    /* Define o espaçamento */
    padding: 14px;
    /* Define a margem */
    margin-top: 16px;
}

/* Define o título do bloco */
.bloco-observacao strong {
    /* Define a cor */
    color: var(--azul-escuro);
}

/* Define o texto do bloco */
.bloco-observacao p {
    /* Define a margem */
    margin: 6px 0 0;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.88rem;
}

/* =========================================================
   ALERTAS E ETIQUETAS
   ========================================================= */

/* Define o alerta base */
.alerta {
    /* Exibe em linha */
    display: flex;
    /* Alinha ao topo */
    align-items: flex-start;
    /* Define o espaço */
    gap: 10px;
    /* Define o espaçamento */
    padding: 12px 14px;
    /* Define o raio */
    border-radius: 12px;
    /* Define a margem */
    margin: 14px 0;
    /* Define a borda */
    border: 1px solid transparent;
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define o alerta de sucesso */
.alerta-sucesso {
    /* Define o fundo */
    background-color: var(--verde-fundo);
    /* Define a borda */
    border-color: #B9E8D5;
    /* Define a cor */
    color: #15724E;
}

/* Define o alerta de erro */
.alerta-erro {
    /* Define o fundo */
    background-color: var(--vermelho-fundo);
    /* Define a borda */
    border-color: #F5C6C0;
    /* Define a cor */
    color: #9E3025;
}

/* Define o alerta de aviso */
.alerta-aviso {
    /* Define o fundo */
    background-color: var(--amarelo-fundo);
    /* Define a borda */
    border-color: #F0D79A;
    /* Define a cor */
    color: #8A5D12;
}

/* Define a lista de erros */
.lista-erros {
    /* Remove o recuo */
    margin: 0;
    /* Define o recuo interno */
    padding-left: 18px;
}

/* Define as etiquetas de status */
.etiqueta {
    /* Exibe em linha */
    display: inline-flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaçamento */
    padding: 4px 9px;
    /* Define o raio */
    border-radius: 999px;
    /* Define o tamanho */
    font-size: 0.74rem;
    /* Define o peso */
    font-weight: 700;
    /* Define o espaço entre linhas */
    white-space: nowrap;
}

/* Define a etiqueta verde */
.etiqueta-verde {
    /* Define o fundo */
    background-color: var(--verde-fundo);
    /* Define a cor */
    color: var(--verde);
}

/* Define a etiqueta amarela */
.etiqueta-amarela {
    /* Define o fundo */
    background-color: var(--amarelo-fundo);
    /* Define a cor */
    color: var(--amarelo);
}

/* Define a etiqueta vermelha */
.etiqueta-vermelha {
    /* Define o fundo */
    background-color: var(--vermelho-fundo);
    /* Define a cor */
    color: var(--vermelho);
}

/* Define a etiqueta azul */
.etiqueta-azul {
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a cor */
    color: var(--azul-escuro);
}

/* Define a etiqueta cinza */
.etiqueta-cinza {
    /* Define o fundo */
    background-color: #EEF1F3;
    /* Define a cor */
    color: var(--texto-suave);
}

/* =========================================================
   PAINEL INTERNO
   ========================================================= */

/* Define o fundo do painel */
.pagina-painel {
    /* Define o fundo */
    background-color: #F3F7F9;
}

/* Define o cabeçalho do painel */
.cabecalho-painel {
    /* Fixa no topo */
    position: sticky;
    /* Define a posição */
    top: 0;
    /* Define a camada */
    z-index: 60;
    /* Define a altura */
    height: 68px;
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 16px;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda inferior */
    border-bottom: 1px solid var(--borda);
    /* Define o espaçamento lateral */
    padding: 0 20px;
}

/* Define o botão do menu do painel */
.botao-menu-painel {
    /* Esconde em telas grandes */
    display: none;
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o tamanho */
    width: 40px;
    height: 40px;
    /* Define o raio */
    border-radius: 10px;
    /* Define a fonte */
    font-size: 1rem;
    /* Define o cursor */
    cursor: pointer;
}

/* Define a marca do painel */
.marca-painel {
    /* Remove a margem */
    margin-right: auto;
}

/* Define as ações do cabeçalho */
.acoes-cabecalho {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 16px;
}

/* Define o sino de notificações */
.sino-notificacoes {
    /* Define a posição relativa */
    position: relative;
    /* Exibe o ícone */
    display: inline-flex;
    /* Alinha ao centro */
    align-items: center;
    justify-content: center;
    /* Define o tamanho */
    width: 40px;
    height: 40px;
    /* Define o raio */
    border-radius: 11px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o tamanho do ícone */
    font-size: 1.05rem;
}

/* Define o contador de notificações */
.contador-notificacoes {
    /* Fixa a posição */
    position: absolute;
    /* Define a posição superior */
    top: -5px;
    /* Define a posição direita */
    right: -5px;
    /* Define o tamanho mínimo */
    min-width: 18px;
    /* Define a altura */
    height: 18px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o espaçamento */
    padding: 0 4px;
    /* Define o raio */
    border-radius: 999px;
    /* Define o fundo */
    background-color: var(--vermelho);
    /* Define a cor */
    color: var(--branco);
    /* Define o tamanho */
    font-size: 0.68rem;
    /* Define o peso */
    font-weight: 800;
}

/* Define a área do usuário */
.usuario-cabecalho {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 9px;
}

/* Define o avatar */
.avatar {
    /* Define o tamanho */
    width: 38px;
    height: 38px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 50%;
    /* Define o fundo */
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-ceu));
    /* Define a cor */
    color: var(--branco);
    /* Define o peso */
    font-weight: 800;
    /* Define o tamanho */
    font-size: 0.82rem;
}

/* Define o texto do usuário */
.usuario-texto {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define a altura da linha */
    line-height: 1.2;
}

/* Define o nome */
.usuario-texto strong {
    /* Define o tamanho */
    font-size: 0.86rem;
}

/* Define o perfil */
.usuario-texto small {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.72rem;
}

/* Define a estrutura do painel */
.estrutura-painel {
    /* Exibe em linha */
    display: flex;
    /* Define a altura mínima */
    min-height: calc(100vh - 68px);
}

/* Define o menu lateral */
.menu-lateral {
    /* Define a largura */
    width: 250px;
    /* Impede a redução */
    flex-shrink: 0;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda direita */
    border-right: 1px solid var(--borda);
    /* Define o espaçamento */
    padding: 18px 14px;
}

/* Define o topo do menu */
.menu-lateral-topo {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 10px;
    /* Define o espaçamento */
    padding: 10px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define o raio */
    border-radius: 14px;
    /* Define a margem */
    margin-bottom: 18px;
}

/* Define o ícone da área */
.menu-icone-area {
    /* Define o tamanho */
    width: 38px;
    height: 38px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 11px;
    /* Define o fundo */
    background-color: var(--azul-principal);
    /* Define a cor */
    color: var(--branco);
}

/* Define o título do menu */
.menu-lateral-topo strong {
    /* Exibe como bloco */
    display: block;
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define o perfil do menu */
.menu-lateral-topo small {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.75rem;
}

/* Define a navegação lateral */
.navegacao-lateral {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 4px;
}

/* Define o título dos grupos */
.titulo-grupo-menu {
    /* Define a margem */
    margin: 14px 10px 6px;
    /* Define o tamanho */
    font-size: 0.7rem;
    /* Define a transformação */
    text-transform: uppercase;
    /* Define o espaçamento */
    letter-spacing: 0.1em;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o peso */
    font-weight: 800;
}

/* Define o item do menu */
.item-menu {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 11px;
    /* Define o espaçamento */
    padding: 10px 12px;
    /* Define o raio */
    border-radius: 11px;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o peso */
    font-weight: 600;
    /* Define o tamanho */
    font-size: 0.9rem;
    /* Remove a decoração */
    text-decoration: none;
    /* Define a transição */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Define o hover do item */
.item-menu:hover {
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a cor */
    color: var(--azul-escuro);
    /* Remove o sublinhado */
    text-decoration: none;
}

/* Define o item ativo */
.item-menu.ativo {
    /* Define o fundo */
    background-color: var(--azul-principal);
    /* Define a cor */
    color: var(--branco);
    /* Define a sombra */
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.24);
}

/* Define o ícone do item */
.item-menu i {
    /* Define a largura */
    width: 18px;
    /* Centraliza */
    text-align: center;
}

/* Define o conteúdo do painel */
.conteudo-painel {
    /* Ocupa o espaço restante */
    flex: 1;
    /* Permite redução */
    min-width: 0;
    /* Define o espaçamento */
    padding: 26px;
}

/* Define o cabeçalho das páginas internas */
.cabecalho-pagina {
    /* Exibe os itens */
    display: flex;
    /* Distribui */
    justify-content: space-between;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 18px;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define a margem */
    margin-bottom: 22px;
}

/* Define o título da página */
.cabecalho-pagina h1 {
    /* Define o tamanho */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    /* Remove a margem */
    margin-bottom: 4px;
}

/* Define o texto da página */
.cabecalho-pagina p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Remove a margem */
    margin-bottom: 0;
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define a grade de indicadores */
.grade-indicadores {
    /* Exibe em grade */
    display: grid;
    /* Define colunas responsivas */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    /* Define o espaço */
    gap: 14px;
    /* Define a margem */
    margin-bottom: 24px;
}

/* Define a grade de dois indicadores */
.grade-indicadores-dois {
    /* Define duas colunas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Define a grade de três indicadores */
.grade-indicadores-tres {
    /* Define três colunas */
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Define a grade de quatro indicadores */
.grade-indicadores-quatro {
    /* Define quatro colunas */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Define o cartão de indicador */
.cartao-indicador {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 13px;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 16px;
    /* Define a cor do texto */
    color: var(--texto);
    /* Remove a decoração */
    text-decoration: none;
    /* Define a transição */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Define o hover do indicador */
.cartao-indicador:hover {
    /* Eleva */
    transform: translateY(-2px);
    /* Aplica sombra */
    box-shadow: var(--sombra);
    /* Remove o sublinhado */
    text-decoration: none;
}

/* Define o ícone do indicador */
.icone-indicador {
    /* Define o tamanho */
    width: 46px;
    height: 46px;
    /* Impede a redução */
    flex-shrink: 0;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 13px;
    /* Define o tamanho do ícone */
    font-size: 1.15rem;
}

/* Define o ícone azul */
.icone-azul {
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a cor */
    color: var(--azul-principal);
}

/* Define o ícone verde */
.icone-verde {
    /* Define o fundo */
    background-color: var(--verde-fundo);
    /* Define a cor */
    color: var(--verde);
}

/* Define o ícone amarelo */
.icone-amarelo {
    /* Define o fundo */
    background-color: var(--amarelo-fundo);
    /* Define a cor */
    color: var(--amarelo);
}

/* Define o número do indicador */
.cartao-indicador > div strong {
    /* Exibe como bloco */
    display: block;
    /* Define o tamanho */
    font-size: 1.45rem;
    /* Define a altura da linha */
    line-height: 1.1;
    /* Define a cor */
    color: var(--azul-profundo);
}

/* Define o rótulo do indicador */
.cartao-indicador > div span {
    /* Exibe como bloco */
    display: block;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.78rem;
    /* Define o peso */
    font-weight: 600;
}

/* Define a seção do painel */
.secao-painel {
    /* Define a margem */
    margin-bottom: 26px;
}

/* Define o título da seção do painel */
.secao-painel h2 {
    /* Define o tamanho */
    font-size: 1.15rem;
    /* Define a margem */
    margin-bottom: 14px;
}

/* Define o cabeçalho interno */
.cabecalho-secao-interna {
    /* Exibe os itens */
    display: flex;
    /* Distribui */
    justify-content: space-between;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 12px;
    /* Define a margem */
    margin-bottom: 14px;
}

/* Define o título interno */
.cabecalho-secao-interna h2 {
    /* Remove a margem */
    margin-bottom: 0;
}

/* Define o link de ver todos */
.link-ver-todos {
    /* Define o peso */
    font-weight: 700;
    /* Define o tamanho */
    font-size: 0.86rem;
}

/* Define a grade de atalhos */
.grade-atalhos {
    /* Exibe em grade */
    display: grid;
    /* Define colunas */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Define o espaço */
    gap: 14px;
}

/* Define o atalho */
.atalho {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 5px;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 18px;
    /* Define a cor */
    color: var(--texto);
}

/* Define o ícone do atalho */
.atalho i {
    /* Define a cor */
    color: var(--azul-principal);
    /* Define o tamanho */
    font-size: 1.25rem;
    /* Define a margem */
    margin-bottom: 6px;
}

/* Define o título do atalho */
.atalho strong {
    /* Define a cor */
    color: var(--azul-profundo);
}

/* Define o texto do atalho */
.atalho span {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.84rem;
}

/* Define o cartão do painel */
.cartao-painel {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 20px;
    /* Define a margem */
    margin-bottom: 18px;
}

/* Define a grade de duas colunas */
.grade-duas-colunas {
    /* Exibe em grade */
    display: grid;
    /* Define duas colunas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Define o espaço */
    gap: 18px;
}

/* Define o cartão de formulário */
.cartao-formulario {
    /* Define a largura máxima */
    max-width: 760px;
}

/* Define a lista de dados */
.lista-dados {
    /* Define a grade */
    display: grid;
    /* Define as colunas */
    grid-template-columns: 160px 1fr;
    /* Define o espaço entre linhas */
    row-gap: 9px;
    /* Define o espaço entre colunas */
    column-gap: 14px;
    /* Remove a margem */
    margin: 0;
}

/* Define os termos da lista */
.lista-dados dt {
    /* Define o peso */
    font-weight: 700;
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o tamanho */
    font-size: 0.85rem;
}

/* Define as descrições da lista */
.lista-dados dd {
    /* Remove a margem */
    margin: 0;
    /* Define a cor */
    color: var(--texto);
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define a tabela */
.cartao-tabela {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Esconde o excesso */
    overflow-x: auto;
    /* Define a margem */
    margin-bottom: 20px;
}

/* Define a tabela interna */
.tabela {
    /* Define a largura */
    width: 100%;
    /* Junta as bordas */
    border-collapse: collapse;
    /* Define o tamanho mínimo */
    min-width: 760px;
}

/* Define o cabeçalho da tabela */
.tabela thead th {
    /* Define o fundo */
    background-color: #F7FBFD;
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o alinhamento */
    text-align: left;
    /* Define a fonte */
    font-size: 0.76rem;
    /* Define a transformação */
    text-transform: uppercase;
    /* Define o espaçamento */
    letter-spacing: 0.05em;
    /* Define o espaçamento interno */
    padding: 12px 14px;
    /* Define a borda inferior */
    border-bottom: 1px solid var(--borda);
    /* Impede quebra */
    white-space: nowrap;
}

/* Define as células */
.tabela tbody td {
    /* Define o espaçamento */
    padding: 12px 14px;
    /* Define a borda inferior */
    border-bottom: 1px solid #EDF3F5;
    /* Define o alinhamento vertical */
    vertical-align: middle;
    /* Define o tamanho */
    font-size: 0.86rem;
}

/* Remove a borda da última linha */
.tabela tbody tr:last-child td {
    /* Remove a borda */
    border-bottom: none;
}

/* Define o hover das linhas */
.tabela tbody tr:hover {
    /* Define o fundo */
    background-color: #FAFDFE;
}

/* Define a coluna de ações */
.coluna-acoes {
    /* Define a largura */
    width: 1%;
    /* Impede a quebra */
    white-space: nowrap;
}

/* Define a área de ações da tabela */
.acoes-tabela {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 6px;
    /* Permite quebra */
    flex-wrap: wrap;
}

/* Define o texto central */
.texto-central {
    /* Centraliza */
    text-align: center;
    /* Define a cor */
    color: var(--texto-suave);
}

/* Define o texto secundário */
.texto-secundario {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.78rem;
}

/* Define as linhas de dado */
.linha-dado {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao topo */
    align-items: flex-start;
    /* Define o espaço */
    gap: 8px;
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.86rem;
    /* Define a margem */
    margin-bottom: 6px;
}

/* Define o ícone da linha */
.linha-dado i {
    /* Define a cor */
    color: var(--azul-principal);
    /* Define a margem superior */
    margin-top: 3px;
    /* Define a largura */
    width: 16px;
    /* Centraliza */
    text-align: center;
}

/* =========================================================
   CARTÕES DE VAGAS, FREELANCERS E CLIENTS
   ========================================================= */

/* Define a grade de cartões */
.grade-cartoes {
    /* Exibe em grade */
    display: grid;
    /* Define as colunas */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    /* Define o espaço */
    gap: 16px;
    /* Define a margem */
    margin-bottom: 20px;
}

/* Define o cartão de vaga */
.cartao-vaga {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 18px;
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 7px;
    /* Define a transição */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Define o hover do cartão de vaga */
.cartao-vaga:hover {
    /* Eleva */
    transform: translateY(-2px);
    /* Define a sombra */
    box-shadow: var(--sombra);
}

/* Define o cabeçalho do cartão */
.cabecalho-cartao-vaga {
    /* Exibe os itens */
    display: flex;
    /* Distribui */
    justify-content: space-between;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 10px;
    /* Define a margem */
    margin-bottom: 4px;
}

/* Define o valor no cabeçalho */
.cabecalho-cartao-vaga strong {
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o tamanho */
    font-size: 1.05rem;
}

/* Define o título do cartão */
.cartao-vaga h3 {
    /* Define o tamanho */
    font-size: 1.05rem;
    /* Define a margem */
    margin-bottom: 2px;
}

/* Define o cartão de freelancer */
.cartao-freelancer {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 16px;
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 6px;
}

/* Define o cabeçalho do freelancer */
.cabecalho-freelancer {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 12px;
    /* Define a margem */
    margin-bottom: 6px;
}

/* Define a foto do freelancer */
.foto-freelancer {
    /* Define o tamanho */
    width: 62px;
    height: 62px;
    /* Define o recorte */
    object-fit: cover;
    /* Define o raio */
    border-radius: 14px;
    /* Define a borda */
    border: 2px solid var(--azul-ceu);
    /* Define o fundo */
    background-color: var(--fundo-claro);
}

/* Define o nome do freelancer */
.cabecalho-freelancer h3 {
    /* Define o tamanho */
    font-size: 1rem;
    /* Define a margem */
    margin-bottom: 2px;
}

/* Define o texto do freelancer */
.cabecalho-freelancer p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.8rem;
    /* Define a margem */
    margin-bottom: 4px;
}

/* Define as ações do cartão */
.acoes-cartao {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 8px;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define a margem superior */
    margin-top: auto;
    /* Define o espaçamento superior */
    padding-top: 10px;
}

/* Define o cartão de perfil */
.cartao-perfil {
    /* Centraliza o texto */
    text-align: center;
}

/* Define a foto grande */
.foto-perfil-grande {
    /* Define o tamanho */
    width: 120px;
    height: 120px;
    /* Define o recorte */
    object-fit: cover;
    /* Define o raio */
    border-radius: 50%;
    /* Define a borda */
    border: 4px solid var(--azul-ceu);
    /* Define a margem */
    margin: 0 auto 14px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
}

/* Define o texto de cursos */
.texto-cursos {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define o cartão do freelancer escalado */
.cartao-freelancer-escalado {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 16px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaçamento */
    padding: 16px;
}

/* Define a variação vertical */
.cartao-freelancer-vertical {
    /* Exibe em coluna */
    flex-direction: column;
    /* Centraliza */
    text-align: center;
}

/* Define o avatar textual */
.avatar-texto {
    /* Define o tamanho */
    width: 62px;
    height: 62px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 14px;
    /* Define o fundo */
    background-color: var(--azul-principal);
    /* Define a cor */
    color: var(--branco);
    /* Define o peso */
    font-weight: 800;
}

/* =========================================================
   AVISOS, CHIPS E BLOCOS
   ========================================================= */

/* Define o aviso de grau */
.aviso-grau {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao topo */
    align-items: flex-start;
    /* Define o espaço */
    gap: 12px;
    /* Define o fundo */
    background-color: var(--fundo-claro);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaçamento */
    padding: 14px 16px;
    /* Define a margem */
    margin-bottom: 20px;
}

/* Define o ícone do aviso */
.aviso-grau > i {
    /* Define a cor */
    color: var(--azul-principal);
    /* Define o tamanho */
    font-size: 1.2rem;
    /* Define a margem superior */
    margin-top: 2px;
}

/* Define o título do aviso */
.aviso-grau strong {
    /* Exibe como bloco */
    display: block;
    /* Define a cor */
    color: var(--azul-profundo);
    /* Define a margem */
    margin-bottom: 2px;
}

/* Define o texto do aviso */
.aviso-grau span {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.86rem;
}

/* Define os chips de status */
.chips-status {
    /* Exibe os itens */
    display: flex;
    /* Define o espaço */
    gap: 8px;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define a margem */
    margin-bottom: 18px;
}

/* Define o chip */
.chip {
    /* Exibe em linha */
    display: inline-flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaçamento */
    padding: 7px 12px;
    /* Define o raio */
    border-radius: 999px;
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.8rem;
    /* Define o peso */
    font-weight: 700;
}

/* Define o chip ativo */
.chip-ativo {
    /* Define o fundo */
    background-color: var(--azul-principal);
    /* Define a cor */
    color: var(--branco);
    /* Define a borda */
    border-color: var(--azul-principal);
}

/* Define o bloco de candidaturas por vaga */
.bloco-vaga-candidaturas {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 20px;
}

/* Define o cabeçalho do bloco */
.cabecalho-bloco-vaga {
    /* Exibe os itens */
    display: flex;
    /* Distribui */
    justify-content: space-between;
    /* Alinha ao topo */
    align-items: flex-start;
    /* Define o espaço */
    gap: 16px;
    /* Permite quebra */
    flex-wrap: wrap;
    /* Define a margem */
    margin-bottom: 16px;
}

/* Define o título do bloco */
.cabecalho-bloco-vaga h2 {
    /* Define a margem */
    margin-bottom: 4px;
}

/* Define o texto do bloco */
.cabecalho-bloco-vaga p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.85rem;
    /* Define a margem */
    margin-bottom: 3px;
}

/* Define as ações do bloco */
.acoes-bloco-vaga {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 10px;
    /* Permite quebra */
    flex-wrap: wrap;
}

/* Define o estado vazio */
.estado-vazio {
    /* Centraliza */
    text-align: center;
    /* Define o espaçamento */
    padding: 26px 14px;
    /* Define a cor */
    color: var(--texto-suave);
}

/* Define o ícone do estado vazio */
.estado-vazio i {
    /* Define o tamanho */
    font-size: 1.6rem;
    /* Define a cor */
    color: var(--azul-ceu);
    /* Define a margem */
    margin-bottom: 8px;
}

/* Define o valor em destaque */
.valor-destaque {
    /* Define o tamanho */
    font-size: 2rem;
    /* Define o peso */
    font-weight: 800;
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define a margem */
    margin: 6px 0 10px;
}

/* Define o texto explicativo */
.texto-explicativo {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.88rem;
}

/* =========================================================
   MODAL
   ========================================================= */

/* Define o fundo do modal */
.fundo-modal {
    /* Fixa a posição */
    position: fixed;
    /* Define as posições */
    inset: 0;
    /* Define a camada */
    z-index: 100;
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Centraliza */
    justify-content: center;
    /* Define o espaçamento */
    padding: 20px;
    /* Define o fundo semitransparente */
    background-color: rgba(8, 58, 79, 0.55);
    /* Define o desfoque */
    backdrop-filter: blur(4px);
    /* Esconde inicialmente */
    display: none;
}

/* Define o modal aberto */
.fundo-modal.aberto {
    /* Exibe o modal */
    display: flex;
}

/* Define a caixa do modal */
.caixa-modal {
    /* Define a largura */
    width: 100%;
    /* Define a largura máxima */
    max-width: 520px;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define o raio */
    border-radius: 20px;
    /* Define o espaçamento */
    padding: 24px;
    /* Define a sombra */
    box-shadow: 0 30px 60px rgba(8, 58, 79, 0.28);
}

/* Define o cabeçalho do modal */
.cabecalho-modal {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 12px;
    /* Define a margem */
    margin-bottom: 12px;
}

/* Define o ícone de aviso do modal */
.icone-modal-aviso {
    /* Define o tamanho */
    width: 46px;
    height: 46px;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 13px;
    /* Define o fundo */
    background-color: var(--amarelo-fundo);
    /* Define a cor */
    color: var(--amarelo);
    /* Define o tamanho */
    font-size: 1.2rem;
}

/* Define o título do modal */
.cabecalho-modal h2 {
    /* Define a margem */
    margin: 0;
    /* Define o tamanho */
    font-size: 1.2rem;
}

/* Define o texto do modal */
.texto-modal {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.94rem;
    /* Define a margem */
    margin-bottom: 18px;
}

/* Define as ações do modal */
.acoes-modal {
    /* Exibe os itens */
    display: flex;
    /* Distribui */
    justify-content: flex-end;
    /* Define o espaço */
    gap: 10px;
    /* Permite quebra */
    flex-wrap: wrap;
}

/* Define o quadro de notificações */
.quadro-notificacoes {
    /* Esconde o quadro */
    display: none;
    /* Remove a borda */
    border: 0;
    /* Define o tamanho */
    width: 0;
    height: 0;
}

/* =========================================================
   RELATÓRIOS E LISTAS
   ========================================================= */

/* Define o resumo do mês */
.cartao-resumo-mes {
    /* Exibe os itens */
    display: flex;
    /* Alinha ao centro */
    align-items: center;
    /* Define o espaço */
    gap: 16px;
    /* Define o fundo */
    background: linear-gradient(135deg, var(--azul-escuro), #0A7793);
    /* Define a cor */
    color: var(--branco);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 22px;
    /* Define a margem */
    margin-bottom: 20px;
}

/* Define o ícone do resumo */
.icone-resumo {
    /* Define o tamanho */
    width: 54px;
    height: 54px;
    /* Impede a redução */
    flex-shrink: 0;
    /* Centraliza */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Define o raio */
    border-radius: 15px;
    /* Define o fundo */
    background-color: rgba(255, 255, 255, 0.16);
    /* Define o tamanho */
    font-size: 1.3rem;
}

/* Define o título do resumo */
.cartao-resumo-mes h2 {
    /* Define a cor */
    color: var(--branco);
    /* Define o tamanho */
    font-size: 1.2rem;
    /* Define a margem */
    margin-bottom: 3px;
}

/* Define o texto do resumo */
.cartao-resumo-mes p {
    /* Define a cor */
    color: rgba(255, 255, 255, 0.78);
    /* Define o tamanho */
    font-size: 0.86rem;
    /* Remove a margem */
    margin-bottom: 0;
}

/* Define a lista de trabalhos */
.lista-trabalhos {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Define o espaço */
    gap: 10px;
}

/* Define a linha de trabalho */
.linha-trabalho {
    /* Exibe em grade */
    display: grid;
    /* Define as colunas */
    grid-template-columns: 92px 1fr auto;
    /* Define o espaço */
    gap: 14px;
    /* Alinha ao centro */
    align-items: center;
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaçamento */
    padding: 14px 16px;
}

/* Define a data do trabalho */
.data-trabalho {
    /* Define o peso */
    font-weight: 800;
    /* Define a cor */
    color: var(--azul-escuro);
    /* Define o tamanho */
    font-size: 0.86rem;
}

/* Define a descrição do trabalho */
.descricao-trabalho strong {
    /* Exibe como bloco */
    display: block;
    /* Define o tamanho */
    font-size: 0.9rem;
}

/* Define o texto secundário do trabalho */
.descricao-trabalho small {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.78rem;
}

/* Define o valor do trabalho */
.valor-trabalho {
    /* Exibe em coluna */
    display: flex;
    /* Define a direção */
    flex-direction: column;
    /* Alinha ao fim */
    align-items: flex-end;
    /* Define o espaço */
    gap: 4px;
}

/* Define o valor em destaque */
.valor-trabalho strong {
    /* Define a cor */
    color: var(--azul-escuro);
}

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

/* Ajusta o layout em telas médias */
@media (max-width: 1024px) {
    /* Reduz a grade de vantagens */
    .grade-vantagens {
        /* Define duas colunas */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Reduz a lista de passos */
    .lista-passos {
        /* Define três colunas */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Mantém as áreas lado a lado em telas médias */
    .grade-areas {
        /* Mantém duas colunas */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Reduz a grade de quatro indicadores */
    .grade-indicadores-quatro {
        /* Define duas colunas */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Reduz a grade de três indicadores */
    .grade-indicadores-tres {
        /* Define duas colunas */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ajusta o layout em telas pequenas */
@media (max-width: 820px) {
    /* Exibe o botão do menu público */
    .botao-menu {
        /* Exibe o botão */
        display: inline-flex;
        /* Centraliza */
        align-items: center;
        justify-content: center;
    }

    /* Esconde a navegação pública por padrão */
    .navegacao-publica {
        /* Esconde o menu */
        display: none;
        /* Define a posição absoluta */
        position: absolute;
        /* Define a posição superior */
        top: 74px;
        /* Define a posição lateral */
        left: 16px;
        /* Define a posição direita */
        right: 16px;
        /* Exibe em coluna */
        flex-direction: column;
        /* Alinha ao início */
        align-items: flex-start;
        /* Define o fundo */
        background-color: var(--branco);
        /* Define a borda */
        border: 1px solid var(--borda);
        /* Define o raio */
        border-radius: 16px;
        /* Define a sombra */
        box-shadow: var(--sombra);
        /* Define o espaçamento */
        padding: 18px;
        /* Define a camada */
        z-index: 60;
    }

    /* Exibe a navegação quando aberta */
    .navegacao-publica.menu-publico-aberto {
        /* Exibe o menu */
        display: flex;
    }

    /* Ajusta as seções */
    .secao {
        /* Reduz o espaçamento */
        padding: 52px 0;
    }

    /* Ajusta a grade das áreas */
    .grade-areas {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }

    /* Ajusta a textura da abertura no celular */
    .destaque {
        /* Reduz a altura da abertura */
        min-height: 520px;
    }

    /* Ajusta a grade de vantagens */
    .grade-vantagens {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }

    /* Ajusta os passos */
    .lista-passos {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }

    /* Exibe o botão do menu do painel */
    .botao-menu-painel {
        /* Exibe o botão */
        display: inline-flex;
        /* Centraliza */
        align-items: center;
        justify-content: center;
    }

    /* Transforma o menu lateral em gaveta */
    .menu-lateral {
        /* Fixa a posição */
        position: fixed;
        /* Define a posição superior */
        top: 68px;
        /* Define a posição inferior */
        bottom: 0;
        /* Define a posição esquerda */
        left: 0;
        /* Define a camada */
        z-index: 55;
        /* Define a transformação inicial */
        transform: translateX(-102%);
        /* Define a transição */
        transition: transform 0.25s ease;
        /* Define a sombra */
        box-shadow: 18px 0 40px rgba(8, 58, 79, 0.14);
        /* Permite rolagem */
        overflow-y: auto;
    }

    /* Exibe o menu quando o corpo estiver aberto */
    .menu-aberto .menu-lateral {
        /* Move o menu para a tela */
        transform: translateX(0);
    }

    /* Ajusta o conteúdo */
    .conteudo-painel {
        /* Reduz o espaçamento */
        padding: 18px;
    }

    /* Ajusta a grade de duas colunas */
    .grade-duas-colunas {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }

    /* Ajusta a grade de indicadores */
    .grade-indicadores-dois,
    .grade-indicadores-tres,
    .grade-indicadores-quatro {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }

    /* Ajusta a grade de formulário */
    .grade-formulario {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }

    /* Ajusta a linha de trabalho */
    .linha-trabalho {
        /* Define as colunas */
        grid-template-columns: 1fr;
    }

    /* Alinha o valor à esquerda */
    .valor-trabalho {
        /* Alinha ao início */
        align-items: flex-start;
    }

    /* Ajusta o usuário do cabeçalho */
    .usuario-texto {
        /* Esconde o texto em telas pequenas */
        display: none;
    }

    /* Ajusta a lista de dados */
    .lista-dados {
        /* Define uma coluna */
        grid-template-columns: 1fr;
        /* Define o espaço entre linhas */
        row-gap: 4px;
    }

    /* Adiciona margem aos termos */
    .lista-dados dt {
        /* Define a margem superior */
        margin-top: 8px;
    }
}

/* Ajusta o layout em telas muito pequenas */
@media (max-width: 560px) {
    /* Reduz o espaçamento lateral */
    .limite {
        /* Reduz o padding */
        padding: 0 16px;
    }

    /* Ajusta a abertura da home */
    .destaque-conteudo {
        /* Reduz o espaçamento */
        padding: 92px 16px 30px;
    }

    /* Ajusta as ações da abertura */
    .destaque-acoes {
        /* Exibe em coluna */
        flex-direction: column;
    }

    /* Ajusta os botões da abertura */
    .destaque-acoes .botao {
        /* Define a largura */
        width: 100%;
    }

    /* Ajusta o aviso das notificações */
    .aviso-notificacoes {
        /* Exibe em coluna */
        flex-direction: column;
        /* Alinha os itens ao início */
        align-items: flex-start;
    }

    /* Ajusta o botão do aviso das notificações */
    .aviso-notificacoes .botao {
        /* Ocupa toda a largura */
        width: 100%;
    }

    /* Ajusta o cabeçalho do painel */
    .cabecalho-painel {
        /* Reduz o espaçamento */
        padding: 0 12px;
        /* Define o espaço */
        gap: 8px;
    }

    /* Reduz a marca */
    .marca-texto {
        /* Reduz o tamanho */
        font-size: 1.1rem;
    }

    /* Reduz o ícone da marca */
    .marca-icone {
        /* Reduz o tamanho */
        width: 34px;
        height: 34px;
    }

    /* Ajusta o cartão de autenticação */
    .cartao-autenticacao {
        /* Reduz o espaçamento */
        padding: 20px;
    }

    /* Ajusta as ações do cartão */
    .acoes-cartao {
        /* Exibe em coluna */
        flex-direction: column;
        /* Alinha ao início */
        align-items: stretch;
    }

    /* Ajusta os botões do cartão */
    .acoes-cartao .botao {
        /* Define a largura */
        width: 100%;
    }

    /* Ajusta o cartão de resumo */
    .cartao-resumo-mes {
        /* Exibe em coluna */
        flex-direction: column;
        /* Alinha ao início */
        align-items: flex-start;
    }

    /* Ajusta as ações do modal */
    .acoes-modal {
        /* Exibe em coluna */
        flex-direction: column-reverse;
    }

    /* Ajusta os botões do modal */
    .acoes-modal .botao {
        /* Define a largura */
        width: 100%;
    }
}

/* =========================================================
   PÁGINAS CORPORATIVAS
   ========================================================= */

/* Define a capa das páginas internas */
.capa-interna {
    /* Aplica o gradiente institucional */
    background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-escuro) 100%);
    /* Define o espaçamento */
    padding: 72px 0 64px;
    /* Define a cor do texto */
    color: var(--branco);
}

/* Define o título da capa interna */
.capa-interna h1 {
    /* Define a cor branca */
    color: var(--branco);
    /* Define o tamanho */
    font-size: clamp(2rem, 4vw, 2.9rem);
    /* Define a margem */
    margin-bottom: 12px;
    /* Define o espaçamento entre letras */
    letter-spacing: -0.02em;
}

/* Define o texto da capa interna */
.capa-interna p {
    /* Limita a largura */
    max-width: 720px;
    /* Define a cor clara */
    color: rgba(255, 255, 255, 0.85);
    /* Remove a margem inferior */
    margin: 0;
    /* Define o tamanho */
    font-size: 1.05rem;
}

/* Define o conteúdo das páginas corporativas */
.conteudo-corporativo {
    /* Define o espaçamento */
    padding: 64px 0 76px;
}

/* Define o bloco de texto corporativo */
.texto-corporativo {
    /* Limita a largura da leitura */
    max-width: 860px;
}

/* Define os subtítulos do bloco de texto */
.texto-corporativo h2 {
    /* Define a margem superior */
    margin-top: 36px;
}

/* Remove a margem do primeiro subtítulo */
.texto-corporativo h2:first-child {
    /* Remove a margem superior */
    margin-top: 0;
}

/* Define os parágrafos do bloco de texto */
.texto-corporativo p {
    /* Define a cor */
    color: var(--texto-suave);
}

/* Define a grade de valores e serviços */
.grade-valores {
    /* Exibe em grade */
    display: grid;
    /* Define três colunas */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Define o espaço */
    gap: 20px;
    /* Define a margem superior */
    margin-top: 28px;
}

/* Define o cartão de valor */
.cartao-valor {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: var(--raio);
    /* Define o espaçamento */
    padding: 24px;
}

/* Define o ícone do cartão de valor */
.cartao-valor i {
    /* Exibe como bloco */
    display: block;
    /* Define a cor */
    color: var(--azul-principal);
    /* Define o tamanho */
    font-size: 1.5rem;
    /* Define a margem inferior */
    margin-bottom: 10px;
}

/* Define o título do cartão de valor */
.cartao-valor h3 {
    /* Define o tamanho */
    font-size: 1.05rem;
    /* Define a margem inferior */
    margin-bottom: 6px;
}

/* Define o texto do cartão de valor */
.cartao-valor p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.92rem;
    /* Remove a margem inferior */
    margin-bottom: 0;
}

/* Define a lista de serviços */
.lista-servicos {
    /* Exibe em grade */
    display: grid;
    /* Define duas colunas */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Define o espaço */
    gap: 18px;
    /* Define a margem superior */
    margin-top: 26px;
}

/* Define o item de serviço */
.item-servico {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define a borda lateral colorida */
    border-left: 4px solid var(--azul-principal);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaçamento */
    padding: 20px 22px;
}

/* Define o título do item de serviço */
.item-servico h3 {
    /* Define o tamanho */
    font-size: 1.02rem;
    /* Define a margem inferior */
    margin-bottom: 6px;
}

/* Define o texto do item de serviço */
.item-servico p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.92rem;
    /* Remove a margem inferior */
    margin-bottom: 0;
}

/* Define a lista de perguntas frequentes */
.lista-faq {
    /* Limita a largura */
    max-width: 860px;
    /* Exibe em grade */
    display: grid;
    /* Define o espaço */
    gap: 14px;
}

/* Define o item de pergunta frequente */
.item-faq {
    /* Define o fundo */
    background-color: var(--branco);
    /* Define a borda */
    border: 1px solid var(--borda);
    /* Define o raio */
    border-radius: 14px;
    /* Define o espaçamento lateral */
    padding: 0 20px;
}

/* Define o resumo da pergunta */
.item-faq summary {
    /* Exibe em linha */
    display: flex;
    /* Distribui o espaço */
    justify-content: space-between;
    /* Alinha os itens */
    align-items: center;
    /* Define o espaço */
    gap: 14px;
    /* Define o espaçamento */
    padding: 16px 0;
    /* Define o cursor */
    cursor: pointer;
    /* Define o peso */
    font-weight: 700;
    /* Define a cor */
    color: var(--azul-profundo);
}

/* Remove o marcador nativo do resumo */
.item-faq summary::-webkit-details-marker {
    /* Remove o marcador */
    display: none;
}

/* Remove a lista padrão do resumo */
.item-faq summary {
    /* Remove o marcador */
    list-style: none;
}

/* Define o ícone do resumo */
.item-faq summary i {
    /* Define a cor */
    color: var(--azul-principal);
    /* Define a transição */
    transition: transform 0.2s ease;
}

/* Gira o ícone quando a resposta está aberta */
.item-faq[open] summary i {
    /* Gira o ícone */
    transform: rotate(180deg);
}

/* Define a resposta da pergunta */
.item-faq p {
    /* Define a cor */
    color: var(--texto-suave);
    /* Remove a margem superior */
    margin-top: 0;
    /* Define a margem inferior */
    margin-bottom: 16px;
}

/* Define a data de atualização dos termos */
.data-atualizacao {
    /* Define a cor */
    color: var(--texto-suave);
    /* Define o tamanho */
    font-size: 0.88rem;
    /* Define a margem inferior */
    margin-bottom: 28px;
}

/* Ajusta as páginas corporativas em telas médias */
@media (max-width: 820px) {
    /* Ajusta a grade de valores */
    .grade-valores {
        /* Define duas colunas */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Ajusta a lista de serviços */
    .lista-servicos {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }
}

/* Ajusta as páginas corporativas em telas pequenas */
@media (max-width: 560px) {
    /* Ajusta a capa interna */
    .capa-interna {
        /* Reduz o espaçamento */
        padding: 52px 0 46px;
    }

    /* Ajusta o conteúdo corporativo */
    .conteudo-corporativo {
        /* Reduz o espaçamento */
        padding: 44px 0 56px;
    }

    /* Ajusta a grade de valores */
    .grade-valores {
        /* Define uma coluna */
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ACESSO ADMINISTRATIVO
   ========================================================= */

/* Define o fundo da página de acesso administrativo */
.pagina-admin-acesso {
    /* Aplica o gradiente institucional escuro */
    background: radial-gradient(circle at 80% 10%, #0E3550 0%, #061A2B 55%, #03101C 100%);
}

/* Define a seção de acesso administrativo */
.secao-admin-acesso {
    /* Ocupa a altura da tela */
    min-height: 100vh;
    /* Remove o fundo padrão da seção */
    background: transparent;
    /* Alinha os itens ao centro */
    align-items: center;
}

/* Define o cartão de acesso administrativo */
.cartao-admin-acesso {
    /* Define a largura máxima */
    max-width: 430px;
    /* Define o fundo escuro */
    background-color: #0B2438;
    /* Define a borda */
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Define a sombra */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* Define o título do cartão administrativo */
.cartao-admin-acesso h1 {
    /* Define a cor clara */
    color: var(--branco);
}

/* Define o texto do cartão administrativo */
.cartao-admin-acesso .cabecalho-autenticacao p {
    /* Define a cor suave */
    color: rgba(255, 255, 255, 0.68);
}

/* Define os rótulos do formulário administrativo */
.cartao-admin-acesso label {
    /* Define a cor clara */
    color: rgba(255, 255, 255, 0.82);
}

/* Define os campos do formulário administrativo */
.cartao-admin-acesso input {
    /* Define o fundo do campo */
    background-color: rgba(255, 255, 255, 0.06);
    /* Define a borda do campo */
    border-color: rgba(255, 255, 255, 0.18);
    /* Define a cor do texto */
    color: var(--branco);
}

/* Define o texto de apoio do formulário administrativo */
.cartao-admin-acesso input::placeholder {
    /* Define a cor do placeholder */
    color: rgba(255, 255, 255, 0.35);
}

/* Define o rodapé do cartão administrativo */
.cartao-admin-acesso .rodape-autenticacao {
    /* Define a borda superior */
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Define os links do rodapé administrativo */
.cartao-admin-acesso .rodape-autenticacao a {
    /* Define a cor clara */
    color: rgba(255, 255, 255, 0.78);
}

/* Define o ícone do cartão administrativo */
.cartao-admin-acesso .icone-autenticacao {
    /* Define o fundo translúcido */
    background-color: rgba(0, 174, 239, 0.18);
    /* Define a cor do ícone */
    color: #7FDBFF;
}