/* calculo-rescisao/public/assets/css/style.css */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    /* Suaviza transições de cor */
}

:root {
    /* Tema Claro (Padrão) - Ajustado para Contabilidade */
    --cor-fundo-body: #f5f5f5;
    --cor-texto-body: #333;
    --cor-fundo-container: white;
    --cor-borda-container: #ddd;
    --cor-sombra-container: rgba(0, 0, 0, 0.1);

    /* Cores Corporativas (Confiança e Estabilidade) */
    --cor-titulo-principal: #a3a9f0;
    /* Azul Marinho Forte */

    /* Cor Primária de Ação (Serenidade Profissional) */
    --cor-link: #457B9D;
    --cor-link-hover: #1D3557;
    /* Escurece para o Marinho */
    --cor-botao-primario-fundo: #457B9D;
    --cor-botao-primario-texto: white;
    --cor-botao-primario-fundo-hover: #1D3557;

    /* Cores Secundárias (Cinza Claro Limpo) */
    --cor-botao-secundario-fundo: #A8DADC;
    /* Azul/Cinza Claro */
    --cor-botao-secundario-texto: #1D3557;
    /* Texto Azul Marinho */
    --cor-botao-secundario-fundo-hover: #8AB8BC;

    --cor-input-borda: #ddd;
    --cor-input-fundo: white;
    --cor-input-texto: #333;
    --cor-placeholder-texto: #aaa;

    /* Cores de Tabela */
    --cor-tabela-borda: #ddd;
    --cor-tabela-header-fundo: #f8f9fa;
    --cor-tabela-header-texto: #333;
    --cor-tabela-total-fundo: #F1FAEE;
    /* Fundo mais claro e neutro */

    /* Cores de Alerta (Lucro vs. Perda) */
    --cor-historico-total-texto: #00A878;
    /* VERDE (Sucesso/Lucro) */
    --cor-alerta-erro-fundo: #FDDEDC;
    /* Fundo Vermelho Suave */
    --cor-alerta-erro-texto: #B22222;
    /* VERMELHO (Perda/Atenção) */
    --cor-alerta-erro-borda: #F5C6CB;

    --cor-historico-item-fundo: white;
    --cor-footer-borda-topo: #eee;
    --cor-navbar-borda-fundo: #ddd;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Fundo e Texto */
        --cor-fundo-body: #121212;
        --cor-texto-body: #e0e0e0;
        --cor-fundo-container: #1e1e1e;
        /* Um pouco mais escuro que o fundo do corpo */
        --cor-borda-container: #333;
        --cor-sombra-container: rgba(0, 0, 0, 0.5);

        /* Cores Corporativas (Confiança e Estabilidade no Escuro) */
        --cor-titulo-principal: #A8DADC;
        /* Ciano/Azul Claro - Destaque Sereno */

        /* Cor Primária de Ação (Azul de Confiança) */
        --cor-link: #457B9D;
        --cor-link-hover: #5F95B7;
        --cor-botao-primario-fundo: #457B9D;
        --cor-botao-primario-texto: #121212;
        /* Texto escuro no botão claro para contraste */
        --cor-botao-primario-fundo-hover: #5F95B7;

        /* Cores Secundárias (Tons de Cinza escuro limpos) */
        --cor-botao-secundario-fundo: #373737;
        --cor-botao-secundario-texto: #A8DADC;
        /* Texto usando a cor de destaque */
        --cor-botao-secundario-fundo-hover: #4f4f4f;

        --cor-input-borda: #444;
        --cor-input-fundo: #2a2a2a;
        --cor-input-texto: #e0e0e0;
        --cor-placeholder-texto: #666;

        /* Cores de Tabela */
        --cor-tabela-borda: #444;
        --cor-tabela-header-fundo: #2a2a2a;
        --cor-tabela-header-texto: #e0e0e0;
        --cor-tabela-total-fundo: #2A3645;
        /* Azul Escuro Sutil para Destaque */

        /* Cores de Alerta (Lucro vs. Perda) */
        --cor-historico-total-texto: #00A878;
        /* VERDE VIVO (Lucro/Sucesso) */
        --cor-alerta-erro-fundo: #4a1c20;
        --cor-alerta-erro-texto: #FDDEDC;
        /* Texto mais claro do que o original */
        --cor-alerta-erro-borda: #8c1c27;

        --cor-historico-item-fundo: #2a2a2a;
        --cor-footer-borda-topo: #333;
        --cor-navbar-borda-fundo: #333;
    }
}

body {
    background-color: var(--cor-fundo-body);
    color: var(--cor-texto-body);
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* Estilos para o header do site (navbar) */
.site-header {
    background-color: var(--cor-fundo-container);
    padding: 15px 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--cor-navbar-borda-fundo);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px var(--cor-sombra-container);
}

.site-header .logo-container h1 a {
    color: var(--cor-titulo-principal);
    text-decoration: none;
    font-size: 1.8em;
}

.site-header .main-navigation ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.site-header .main-navigation ul li a {
    text-decoration: none;
    color: var(--cor-link);
    font-weight: 500;
}

.site-header .main-navigation ul li a:hover {
    color: var(--cor-link-hover);
}

.site-header .main-navigation ul li a.nav-donation {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white !important;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.site-header .main-navigation ul li a.nav-donation:hover {
    background: linear-gradient(135deg, #ee5a52, #ff6b6b);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.4);
    color: white !important;
}

/* Navegação de usuário */
.user-navigation {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.auth-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

.auth-link {
    color: var(--cor-texto-body);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.auth-link:hover {
    color: var(--cor-link);
    text-decoration: none;
}

.auth-register {
    background: var(--cor-botao-primario-fundo);
    color: var(--cor-botao-primario-texto) !important;
    font-weight: bold;
}

.auth-register:hover {
    background: var(--cor-botao-primario-fundo-hover);
    color: var(--cor-botao-primario-texto) !important;
}

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-greeting {
    color: var(--cor-texto-body);
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--cor-fundo-container);
    border: 1px solid var(--cor-borda-container);
    border-radius: 6px;
    box-shadow: 0 4px 6px var(--cor-sombra-container);
    min-width: 150px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.user-menu:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown a {
    display: block;
    padding: 10px 15px;
    color: var(--cor-texto-body);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid var(--cor-borda-container);
}

.user-dropdown a:last-child {
    border-bottom: none;
}

.user-dropdown a:hover {
    background: var(--cor-tabela-header-fundo);
    color: var(--cor-link);
}


/* Cabeçalhos específicos de página (como em home.php, sobre.php) */
header.page-specific-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cor-borda-container);
    text-align: center;
}

header.page-specific-header h2,
.form-rescisao header h1,
/* Para o h1 dentro do form-rescisao */
.resultado-container header h1 {
    /* Para o h1 dentro do resultado-container */
    color: var(--cor-titulo-principal);
    margin-bottom: 10px;
}

header.page-specific-header p {
    font-size: 1.1em;
    color: var(--cor-texto-body);
}


h1,
h2,
h3 {
    color: var(--cor-titulo-principal);
    margin-bottom: 15px;
}

/* Seções de conteúdo genéricas (como em sobre.php, privacidade.php) */
.content-section {
    background-color: var(--cor-fundo-container);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--cor-sombra-container);
    margin-bottom: 20px;
}

.content-section h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--cor-titulo-principal);
}

.content-section h3:first-child {
    margin-top: 0;
}

.content-section p,
.content-section ul li {
    color: var(--cor-texto-body);
    line-height: 1.7;
}

.content-section ul {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn {
    display: inline-block;
    background-color: var(--cor-botao-primario-fundo);
    color: var(--cor-botao-primario-texto);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.btn:hover {
    background-color: var(--cor-botao-primario-fundo-hover);
}

.btn-secondary {
    background-color: var(--cor-botao-secundario-fundo);
    color: var(--cor-botao-secundario-texto);
}

.btn-secondary:hover {
    background-color: var(--cor-botao-secundario-fundo-hover);
}

.btn-voltar {
    color: var(--cor-link);
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
}

.btn-voltar:hover {
    color: var(--cor-link-hover);
}

.btn-donation {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    text-align: center;
}

.btn-donation:hover {
    background: linear-gradient(135deg, #ee5a52, #ff6b6b);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 107, 107, 0.4);
    color: white;
}

.btn-donation:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

/* Estilo específico para o header do formulário e resultado */
.form-rescisao header,
.resultado-container header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--cor-borda-container);
}


.form-rescisao {
    background-color: var(--cor-fundo-container);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--cor-sombra-container);
}

fieldset {
    border: 1px solid var(--cor-borda-container);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

legend {
    padding: 0 10px;
    color: var(--cor-link);
    /* Usando cor de link para legendas */
    font-weight: bold;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-danger {
    background-color: var(--cor-alerta-erro-fundo);
    color: var(--cor-alerta-erro-texto);
    border: 1px solid var(--cor-alerta-erro-borda);
}

.resultado-container {
    background-color: var(--cor-fundo-container);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--cor-sombra-container);
}

.tabela-resultado {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.tabela-resultado th,
.tabela-resultado td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid var(--cor-tabela-borda);
    /* Adicionando borda em todas as células */
    color: var(--cor-texto-body);
}

.tabela-resultado th {
    background-color: var(--cor-tabela-header-fundo);
    font-weight: 600;
    color: var(--cor-tabela-header-texto);
}

.tabela-resultado tr:nth-child(even) td {
    /* Leve alternância de cor para linhas, se desejar */
    /* background-color: var(--cor-fundo-linha-par-tabela); /* Defina esta variável se usar */
}


.tabela-resultado tr.total td {
    /* Ajuste para que o 'total' não fique estranho */
    font-size: 1.1em;
    font-weight: bold;
    background-color: var(--cor-tabela-total-fundo);
}

.tabela-resultado tfoot tr.total td {
    /* Especificidade para o tfoot */
    background-color: var(--cor-tabela-total-fundo);
}


.observacoes {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid var(--cor-borda-container);
    background-color: var(--cor-input-fundo);
    /* Um fundo levemente diferente para destaque */
    border-radius: 4px;
}

.observacoes h3 {
    color: var(--cor-titulo-principal);
}

.observacoes p,
.observacoes ul li {
    color: var(--cor-texto-body);
}

.observacoes ul {
    margin-left: 20px;
    margin-top: 10px;
}

.acoes-resultado {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}

/* Página Inicial (home.php) */
.intro {
    text-align: center;
    padding: 20px;
    margin-bottom: 30px;
    background-color: var(--cor-fundo-container);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--cor-sombra-container);
}

.intro h3 {
    color: var(--cor-titulo-principal);
}

.historico {
    margin-top: 30px;
}

.historico h3 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--cor-titulo-principal);
}

.historico ul {
    list-style: none;
}

.historico li {
    background-color: var(--cor-historico-item-fundo);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px var(--cor-sombra-container);
    border: 1px solid var(--cor-borda-container);
}

.historico .data {
    font-size: 0.9em;
    color: var(--cor-texto-body);
    opacity: 0.8;
}

.historico .nome {
    font-weight: 500;
}

.historico .total {
    color: var(--cor-historico-total-texto);
    font-weight: bold;
}

/* Gráfico */
.grafico-container {
    margin-top: 1.5rem;
    padding: 20px;
    background-color: var(--cor-fundo-container);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--cor-sombra-container);
}

.grafico-container h3 {
    text-align: center;
}

/* Chart.js tem seus próprios estilos, mas podemos precisar de ajustes para legenda no tema escuro */
@media (prefers-color-scheme: dark) {
    .chartjs-legend ul li {
        /* Exemplo para legenda do Chart.js, pode variar */
        color: var(--cor-texto-body) !important;
    }

    /* Você pode precisar inspecionar o Chart.js para ver classes específicas da legenda/tooltips se elas não herdarem bem */
}


/* Classe para esconder visualmente, mas manter acessível para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* Estilos para o novo Theme Slider */
.theme-slider-container {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--cor-input-fundo);
    /* Fundo da "pista" do slider */
    border-radius: 20px;
    /* Arredondado como na imagem */
    padding: 3px;
    /* Pequeno padding interno */
    border: 1px solid var(--cor-input-borda);
    height: 34px;
    /* Altura para acomodar o thumb e os ícones */
}

.theme-radio {
    /* Esconde os inputs de rádio originais */
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.theme-option {
    /* Estilo dos botões/opções do tema (que são labels) */
    cursor: pointer;
    padding: 0 8px;
    /* Espaçamento para os ícones */
    font-size: 1.3em;
    /* Tamanho dos ícones */
    line-height: 1;
    z-index: 1;
    /* Para ficar acima do thumb em termos de clique, mas o thumb visualmente acima */
    color: var(--cor-texto-body);
    /* Cor padrão dos ícones */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    /* Largura mínima para cada opção */
    height: 100%;
}

/* Ajuste de cor para ícone ativo - pode ser feito com JS ou CSS mais complexo se o thumb não cobrir */
.theme-radio:checked+.theme-option {
    /* color: var(--cor-botao-primario-texto); /* Ex: ícone branco se o thumb for laranja */
    /* Esta cor pode não ser visível se o thumb estiver sobre o ícone */
}


.theme-slider-thumb {
    position: absolute;
    top: 3px;
    /* Metade da altura da pista (34px/2) - metade da altura do thumb (28px/2) + padding da pista (3px) = 3+3 = 6px. NÃO, top: (34-28)/2 = 3px */
    /* left será definido por JavaScript */
    width: 28px;
    height: 28px;
    background-color: #FF4500;
    border-radius: 50%;
    transition: left 0.3s ease-in-out;
    /* Transição para a propriedade 'left' */
    z-index: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* Ajuste no .accessibility-controls para acomodar o novo slider */
.accessibility-controls button,
/* Botões A- A+ */
.accessibility-controls .theme-option

/* Labels do slider */
    {
    background-color: transparent;
    border: none;
    /* Removemos borda dos botões A- A+ para consistência com os ícones do slider */
    color: var(--cor-link);
    padding: 6px 8px;
    /* Ajuste de padding */
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    /* Para A- A+ */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accessibility-controls button:hover,
.accessibility-controls .theme-option:hover {
    background-color: var(--cor-input-fundo);
    /* Leve destaque no hover */
}

/* Readicionando borda e cor para os botões de fonte A- A+ */
#font-decrease,
#font-increase {
    border: 1px solid var(--cor-link);
    color: var(--cor-link);
}

#font-decrease:hover,
#font-increase:hover {
    background-color: var(--cor-link);
    color: var(--cor-botao-primario-texto);
}

.accessibility-controls .theme-option {
    /* Especificidade para os ícones do tema */
    font-size: 1.3em;
    border: none;
    /* Ícones não têm borda individual */
    padding: 0 8px;
    /* Padding para espaçar os ícones */
}


/* Rodapé */
.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid var(--cor-footer-borda-topo);
    font-size: 0.9em;
    color: var(--cor-texto-body);
}

.site-footer a {
    color: var(--cor-link);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--cor-link-hover);
}

/* Ajustes de responsividade e impressão */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        gap: 15px;
    }

    .site-header .main-navigation ul {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .user-navigation {
        margin-left: 0;
        justify-content: center;
    }

    .auth-links {
        flex-direction: column;
        gap: 5px;
    }

    .user-greeting {
        font-size: 12px;
    }

    .user-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        margin-top: 10px;
    }

    .user-dropdown a {
        padding: 5px 10px;
        text-align: center;
        border: 1px solid var(--cor-borda-container);
        margin: 2px 0;
        border-radius: 4px;
        background: var(--cor-fundo-container);
    }
}

@media (max-width: 600px) {
    .tabela-resultado {
        display: block;
        overflow-x: auto;
        /* Permite scroll horizontal em tabelas largas */
    }

    /* Se quiser forçar layout de cards em telas pequenas para tabelas:
    .tabela-resultado thead { display: none; }
    .tabela-resultado tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--cor-tabela-borda);
        border-radius: 4px;
    }
    .tabela-resultado td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid var(--cor-tabela-borda);
    }
    .tabela-resultado td:last-child {
        border-bottom: none;
    }
    .tabela-resultado td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
    }
    */
    .form-group {
        /* Garante que os grupos de formulário ocupem largura total */
        width: 100%;
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .form-actions .btn:last-child {
        margin-bottom: 0;
    }
}

@media print {
    :root {
        /* Força cores claras para impressão, economiza tinta */
        --cor-fundo-body: white;
        --cor-texto-body: black;
        --cor-fundo-container: white;
        --cor-borda-container: #ccc;
        --cor-sombra-container: none;
        --cor-titulo-principal: black;
        --cor-link: black;
        --cor-botao-primario-fundo: #eee;
        --cor-botao-primario-texto: black;
        --cor-input-borda: #ccc;
        --cor-input-fundo: white;
        --cor-input-texto: black;
        --cor-tabela-borda: #ccc;
        --cor-tabela-header-fundo: #eee;
        --cor-tabela-header-texto: black;
        --cor-tabela-total-fundo: #f0f0f0;
    }

    body {
        font-size: 10pt;
        background-color: var(--cor-fundo-body) !important;
        /* Força fundo branco */
        color: var(--cor-texto-body) !important;
        /* Força texto preto */
    }

    .container {
        box-shadow: none;
        margin: 0;
        max-width: 100%;
        padding: 0;
    }

    .site-header,
    .site-footer,
    .btn-voltar,
    .acoes-resultado,
    .grafico-container,
    .intro a.btn,
    .page-specific-header+.intro>a.btn {
        display: none !important;
    }

    .form-rescisao,
    .resultado-container,
    .content-section {
        box-shadow: none !important;
        border: 1px solid var(--cor-borda-container);
        padding: 15px;
    }

    .tabela-resultado th,
    .tabela-resultado td {
        padding: 4px;
        border: 1px solid var(--cor-borda-container) !important;
    }

    a {
        text-decoration: none;
        color: var(--cor-texto-body) !important;
        /* Links pretos na impressão */
    }

    a[href^="http"]::after {
        /* Opcional: mostrar URL de links externos */
        /* content: " (" attr(href) ")"; */
        /* font-size: 0.8em; */
    }
}

/* Novo css criando pelo deepseek */
/* ==================== */
/* PÁGINA INICIAL (HOME) */
/* ==================== */

.home-container {
    font-family: inherit;
    /* Herda do body */
    color: var(--cor-texto-body);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section - Adaptado para usar variáveis */
.hero-section {
    background: linear-gradient(135deg, var(--cor-titulo-principal), var(--cor-link));
    color: var(--cor-botao-primario-texto);
    padding: 60px 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    text-align: center;
    box-shadow: 0 4px 12px var(--cor-sombra-container);
}

.app-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: inherit;
    /* Herda do hero-section */
}

.subtitle {
    display: block;
    font-size: 1.2rem;
    font-weight: normal;
    opacity: 0.9;
}

.hero-description {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.cta-button {
    display: inline-block;
    background-color: var(--cor-botao-destaque, #e74c3c);
    /* Nova variável para botão de destaque */
    color: var(--cor-botao-primario-texto);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
    background-color: var(--cor-botao-destaque-hover, #c0392b);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Tools Store Section */
.tools-store-section {
    margin: 50px 0;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
}

.tools-container {
    max-width: 1200px;
    margin: 0 auto;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.tool-card {
    background: var(--cor-fundo-container);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 8px 25px var(--cor-sombra-container);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.tool-card.featured {
    border-color: #3498db;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.tool-card.coming-soon {
    opacity: 0.8;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tool-icon {
    font-size: 2.5rem;
    color: var(--cor-link);
    background: linear-gradient(135deg, #3498db, #2980b9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tool-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tool-badge.popular {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.tool-badge.new {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
}

.tool-badge.soon {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}

.tool-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--cor-titulo-principal);
    font-weight: 600;
}

.tool-description {
    color: var(--cor-texto-body);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.9;
}

.tool-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.feature-tag {
    background: var(--cor-link);
    color: white;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 500;
    opacity: 0.9;
}

.tool-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    background: var(--cor-botao-secundario-fundo);
    color: var(--cor-botao-secundario-texto);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tool-button.primary {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.tool-button:hover {
    background: var(--cor-botao-secundario-fundo-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tool-button.primary:hover {
    background: linear-gradient(135deg, #2980b9, #1f5582);
}

.coming-soon .tool-button {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Estilos para destaque do Simulador de Poupança */
.tool-card.highlighted {
    border: 3px solid #27ae60;
    background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
    position: relative;
    animation: highlightGlow 2s ease-in-out infinite alternate;
    box-shadow: 0 10px 30px rgba(39, 174, 96, 0.2);
}

@keyframes highlightGlow {
    0% {
        box-shadow: 0 10px 30px rgba(39, 174, 96, 0.2);
        transform: translateY(0);
    }
    100% {
        box-shadow: 0 15px 40px rgba(39, 174, 96, 0.35);
        transform: translateY(-3px);
    }
}

.tool-card.highlighted:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 45px rgba(39, 174, 96, 0.4);
    animation: none;
}

.tool-card.highlighted::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 17px;
    background: linear-gradient(45deg, #2ecc7169, #2ecc7126, #27ae6036, #38f98a99);
    z-index: -1;
    animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.tool-badge.featured-badge {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 25px;
    box-shadow: 0 3px 10px rgba(39, 174, 96, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.tool-button.featured-button {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
    animation: buttonPulse 3s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% { 
        box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
        transform: translateY(0);
    }
    50% { 
        box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
        transform: translateY(-1px);
    }
}

.tool-button.featured-button:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(39, 174, 96, 0.5);
    animation: none;
}

.tool-card.highlighted .tool-icon {
    font-size: 3rem;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.tool-card.highlighted h3 {
    color: #27ae60;
    font-weight: 700;
    font-size: 1.4rem;
}

.tool-card.highlighted .tool-description {
    font-weight: 500;
    color: #2c3e50;
}

.tool-card.highlighted .feature-tag {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2);
}

/* Banner de destaque para a ferramenta de poupança */
.highlight-banner {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    padding: 20px 0;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.highlight-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.banner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: rgba(255, 255, 255, 0.1);
    padding: 25px 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.banner-icon {
    font-size: 3.5rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.banner-text h3 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.banner-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.banner-button {
    background: white;
    color: #27ae60;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    animation: buttonGlow 2s ease-in-out infinite alternate;
}

@keyframes buttonGlow {
    0% { 
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        transform: scale(1.02);
    }
}

.banner-button:hover {
    background: #f8f9fa;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: none;
}

/* Responsividade do banner */
@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }
    
    .banner-icon {
        font-size: 2.5rem;
    }
    
    .banner-text h3 {
        font-size: 1.3rem;
    }
    
    .banner-text p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .highlight-banner {
        padding: 15px 0;
        margin-bottom: 30px;
    }
    
    .banner-content {
        padding: 15px;
    }
    
    .banner-button {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}

.coming-soon .tool-button:hover {
    transform: none;
    background: #95a5a6;
}

/* Features Section */
.features-section {
    margin-bottom: 50px;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--cor-titulo-principal);
}

.section-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
    color: var(--cor-texto-body);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.feature-card {
    background: var(--cor-fundo-container);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px var(--cor-sombra-container);
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid var(--cor-borda-container);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--cor-sombra-container);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--cor-link);
}

.feature-card h3 {
    margin-bottom: 10px;
    color: var(--cor-titulo-principal);
}

.feature-card p {
    color: var(--cor-texto-body);
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Testimonials Section */
.testimonials-section {
    margin: 60px 0;
    padding: 50px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.depoimentos-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 1024px) {
    .depoimentos-grid {
        grid-template-columns: 1fr;
    }
}

.depoimento {
    background: var(--cor-fundo-container);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--cor-borda-container);
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.depoimento::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 80px;
    color: var(--cor-link);
    opacity: 0.1;
    font-family: Georgia, serif;
    line-height: 1;
}

.depoimento:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.depoimento-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--cor-borda-container);
}

.depoimento-header h3 {
    color: var(--cor-titulo-principal);
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.depoimento-header h3 i {
    color: var(--cor-link);
    font-size: 1.2rem;
}

.depoimento-cargo {
    background: var(--cor-link);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

.depoimento-texto {
    color: var(--cor-texto-body);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 20px;
    font-style: italic;
    position: relative;
    z-index: 2;
}

.depoimento-texto strong {
    color: var(--cor-link);
    font-weight: 600;
}

.depoimento-stars {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.depoimento-stars i {
    color: #ffd700;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsividade para depoimentos */
@media (max-width: 768px) {
    .testimonials-section {
        margin: 40px 0;
        padding: 30px 15px;
    }

    .depoimentos-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .depoimento {
        padding: 20px;
    }

    .depoimento-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .depoimento-cargo {
        margin-left: 0;
        align-self: flex-start;
    }
}

/* History Section */
.history-section {
    background: var(--cor-fundo-container);
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--cor-sombra-container);
    border: 1px solid var(--cor-borda-container);
}

.history-list {
    margin-top: 20px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--cor-borda-container);
    background: var(--cor-historico-item-fundo);
}

.history-item:last-child {
    border-bottom: none;
}

.history-date {
    color: var(--cor-texto-body);
    opacity: 0.8;
    font-size: 0.9rem;
}

.history-amount {
    font-weight: bold;
    color: var(--cor-historico-total-texto);
}

.history-details {
    color: var(--cor-link);
    text-decoration: none;
    font-size: 0.9rem;
}

.history-details:hover {
    text-decoration: underline;
}

.view-all-link {
    display: block;
    text-align: right;
    margin-top: 20px;
    color: var(--cor-link);
    text-decoration: none;
    font-weight: 500;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* Responsividade */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 15px;
    }

    .app-title {
        font-size: 2rem;
    }

    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Adicione ao seu :root para os novos botões */
:root {
    --cor-botao-destaque: #e74c3c;
    --cor-botao-destaque-hover: #c0392b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --cor-botao-destaque: #ff6b5b;
        --cor-botao-destaque-hover: #e74c3c;
    }
}

/* ... (seu CSS existente acima) ... */

/* Controles de Acessibilidade */
.accessibility-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background-color: var(--cor-fundo-container);
    /* Adapta ao tema */
    border-radius: 5px;
    border: 1px solid var(--cor-borda-container);
    /* Adapta ao tema */
    margin-left: 20px;
    /* Ajuste conforme necessário para posicionamento na navbar */
}

.accessibility-controls button {
    background-color: transparent;
    border: 1px solid var(--cor-link);
    /* Usando cor de link para borda */
    color: var(--cor-link);
    /* Usando cor de link para texto */
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    /* Para alinhar melhor o texto A- A+ */
}

.accessibility-controls button:hover {
    background-color: var(--cor-link);
    color: var(--cor-botao-primario-texto);
    /* Assumindo que o texto do botão primário contrasta com o fundo do link */
}

.accessibility-controls button:active {
    transform: translateY(1px);
}


.accessibility-separator {
    color: var(--cor-borda-container);
    font-size: 1.2em;
}

#theme-toggle .theme-icon-system,
#theme-toggle .theme-icon-light,
#theme-toggle .theme-icon-dark {
    font-size: 1.2em;
    /* Ajuste o tamanho dos ícones do tema */
}

/* Ajuste para a navbar se os controles estiverem lá */
.site-header {
    /* ... (seus estilos existentes para .site-header) ... */
    flex-wrap: wrap;
    /* Permite que os controles quebrem linha se não houver espaço */
}

@media (max-width: 768px) {
    .accessibility-controls {
        margin-left: 0;
        margin-top: 10px;
        /* Adiciona espaço se quebrar linha */
        width: 100%;
        justify-content: center;
    }
}

/* Modificações para suportar classes de tema explícitas no body */
/* Isso permite que o JS force um tema, sobrepondo 'prefers-color-scheme' */

/* Tema Escuro Explícito */
body.theme-dark {
    --cor-fundo-body: #121212;
    --cor-texto-body: #e0e0e0;
    --cor-fundo-container: #1e1e1e;
    --cor-borda-container: #333;
    --cor-sombra-container: rgba(0, 0, 0, 0.4);
    --cor-titulo-principal: #bb86fc;
    --cor-link: #bb86fc;
    --cor-link-hover: #9a67d3;
    --cor-botao-primario-fundo: #bb86fc;
    --cor-botao-primario-texto: #121212;
    --cor-botao-secundario-fundo: #373737;
    --cor-botao-secundario-texto: #e0e0e0;
    --cor-botao-secundario-fundo-hover: #4f4f4f;
    --cor-input-borda: #444;
    --cor-input-fundo: #2a2a2a;
    --cor-input-texto: #e0e0e0;
    --cor-tabela-borda: #444;
    --cor-tabela-header-fundo: #2a2a2a;
    --cor-tabela-header-texto: #e0e0e0;
    --cor-tabela-total-fundo: #303040;
    --cor-alerta-erro-fundo: #4a1c20;
    --cor-alerta-erro-texto: #f8d7da;
    --cor-alerta-erro-borda: #8c1c27;
    --cor-historico-item-fundo: #2a2a2a;
    --cor-historico-total-texto: #4caf50;
    --cor-footer-borda-topo: #333;
    --cor-navbar-borda-fundo: #333;
    --cor-placeholder-texto: #666;
}

/* Tema Claro Explícito (para sobrepor 'prefers-color-scheme: dark' se o usuário escolher claro) */
body.theme-light {
    --cor-fundo-body: #f5f5f5;
    --cor-texto-body: #333;
    --cor-fundo-container: white;
    --cor-borda-container: #ddd;
    --cor-sombra-container: rgba(0, 0, 0, 0.1);
    --cor-titulo-principal: #a3a9f0;
    --cor-link: #3498db;
    --cor-link-hover: #2980b9;
    --cor-botao-primario-fundo: #3498db;
    --cor-botao-primario-texto: white;
    --cor-botao-primario-fundo-hover: #2980b9;
    --cor-botao-secundario-fundo: #95a5a6;
    --cor-botao-secundario-texto: white;
    --cor-botao-secundario-fundo-hover: #7f8c8d;
    --cor-input-borda: #ddd;
    --cor-input-fundo: white;
    --cor-input-texto: #333;
    --cor-tabela-borda: #ddd;
    --cor-tabela-header-fundo: #f8f9fa;
    --cor-tabela-header-texto: #333;
    --cor-tabela-total-fundo: #f0f8ff;
    --cor-alerta-erro-fundo: #f8d7da;
    --cor-alerta-erro-texto: #721c24;
    --cor-alerta-erro-borda: #f5c6cb;
    --cor-historico-item-fundo: white;
    --cor-historico-total-texto: #27ae60;
    --cor-footer-borda-topo: #eee;
    --cor-navbar-borda-fundo: #ddd;
    --cor-placeholder-texto: #aaa;
}

/* Garante que o tema explícito sobreponha o prefers-color-scheme para as variáveis */
@media (prefers-color-scheme: dark) {
    body:not(.theme-light) {
        /* Aplica tema escuro do sistema se não houver tema claro explícito */
        /* As variáveis já definidas em :root @media (prefers-color-scheme: dark) serão usadas */
        /* Ou, para garantir, pode-se redefinir aqui ou usar a classe .theme-dark */
    }
}

/* ===============================
   SISTEMA DE COMPONENTES REUTILIZÁVEIS
   Unificação dos estilos comuns entre páginas
   =============================== */

/* ========== CONTAINERS ========== */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.content-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.narrow-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* ========== CARDS E SEÇÕES ========== */
.base-card {
    background: var(--cor-fundo-container);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px var(--cor-sombra-container);
    border: 1px solid var(--cor-borda-container);
}

.compact-card {
    background: var(--cor-fundo-container);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px var(--cor-sombra-container);
    border: 1px solid var(--cor-borda-container);
}

.highlight-card {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
    margin-bottom: 30px;
}

.professional-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ========== TÍTULOS E HEADERS ========== */
.page-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--cor-titulo-principal);
}

.section-title {
    color: var(--cor-titulo-principal);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--cor-borda-container);
    padding-bottom: 15px;
}

.card-title {
    color: var(--cor-titulo-principal);
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: 600;
}

/* ========== FORMULÁRIOS ========== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--cor-texto-body);
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--cor-input-borda);
    border-radius: 8px;
    background: var(--cor-input-fundo);
    color: var(--cor-input-texto);
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--cor-link);
    box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.1);
}

.form-help {
    color: var(--cor-placeholder-texto);
    font-size: 12px;
    margin-top: 5px;
}

/* ========== BOTÕES ========== */
.btn-primary {
    background: var(--cor-botao-primario-fundo);
    color: var(--cor-botao-primario-texto);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--cor-botao-primario-fundo-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background: var(--cor-botao-secundario-fundo);
    color: var(--cor-botao-secundario-texto);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--cor-botao-secundario-fundo-hover);
}

.btn-large {
    padding: 15px 30px;
    font-size: 18px;
}

.btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

/* ========== GRIDS E LAYOUTS ========== */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ========== MÉTRICAS E DASHBOARDS ========== */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cor-titulo-principal);
}

.metric-label {
    color: var(--cor-placeholder-texto);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ========== ALERTAS E DESTAQUES ========== */
.info-box {
    background: #767779;
    border-radius: 10px;
    padding: 25px;
    margin: 25px 0;
    border-left: 4px solid var(--cor-link);
}

.info-box.success {
    border-left-color: #27ae60;
    background: #f8fff8;
}

.info-box.warning {
    border-left-color: #f39c12;
    background: #fffcf0;
}

.info-box.error {
    border-left-color: #e74c3c;
    background: var(--cor-alerta-erro-fundo);
    color: var(--cor-alerta-erro-texto);
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
    .page-container,
    .content-container,
    .narrow-container {
        padding: 15px;
    }
    
    .form-row,
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .base-card,
    .compact-card {
        padding: 20px;
    }
    
    .professional-header {
        padding: 1.5rem;
    }
    
    .flex-between {
        flex-direction: column;
        align-items: stretch;
    }
}