/* Reset Básico */
body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: sans-serif;
}

/* Cabeçalho com Grid para alinhar Logo na ponta e Texto no meio */
.cabecalho {
    background-color: #1a3a5f; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 30px;
    height: 100px;
    box-sizing: border-box;

    /* Mantendo o Grid para o logo à esquerda e frase no centro */
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
}

.logo {
    height: 85px; /* Aumentado de 65px para 85px para dar imponência corporativa */
    width: auto;  /* Mantém a proporção original da imagem para não distorcer */
    justify-self: start; 
    transition: height 0.3s ease; /* Transição suave caso a tela mude de tamanho */
}

.titulo-central {
    color: #ffffff;
    font-weight: 800;
    font-size: 22px;
    margin:0;
    text-align: center;
    text-transform: uppercase;
    justify-self: center;
}

/* O "PULO DO GATO": Flexbox para colocar Sidebar ao lado do Conteúdo */
.flex-container {
    display: flex !important;
    flex-direction: row !important; /* Obriga a ficar na lateral */
    align-items: flex-start;
    gap: 20px;                      /* Espaço sutil entre a barra e a caixa de diálogo */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Menu Lateral */
.sidebar {
    width: 260px !important;       /* Largura controlada para não espremer o resto */
    min-width: 260px !important;
    flex-shrink: 0;
}
#area-conteudo, .main-content, #area-conteudo-principal { 
    flex: 1 !important;            /* Preenche o lado direito inteiramente */
    min-width: 0;                  /* Evita quebras de layout em telas menores */
}

/* Botões Pequenos */
.btn-pequeno {
    width: 100%;
    margin-bottom: 4px;       /* Reduzido para apenas 4px para colar um botão no outro */
    background-color: #1a426a; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.88rem;       
    padding: 6px 12px;        /* Padding vertical super enxuto para achatar o botão */
    display: flex;
    flex-direction: column;
    align-items: flex-start;  
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-pequeno:first-of-type {
    margin-top: 20px !important; /* Aumentado para 20px para dar o mesmo respiro dos outros elementos */
}

/* Efeito de Interação */
.btn-pequeno:hover {
    background-color: #244a77; /* Clareia levemente ao passar o mouse */
    transform: translateY(-1px); /* Sobe um milímetro */
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.4), 
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.4);
}

/* Efeito de "Botão Pressionado" */
.btn-pequeno:active {
    transform: translateY(2px); /* Desce ao clicar */
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.2), 
        inset 0 2px 4px rgba(0, 0, 0, 0.5); /* Inverte a sombra para parecer afundado */
}

/* Área de Respostas */
.conteudo-principal {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important; /* Reduz o espaçamento lateral para sobrar mais tela */
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
    }

.conteudo-dinamico {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

.quadro-branco {
    background: #fff;
    padding: 40px;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Container que segura o formulário */
.form-container {
    display: flex;
    flex-direction: column; /* Força um item embaixo do outro */
    gap: 15px;
    margin-top: 20px;
    max-width: 600px; /* Evita que o form fique largo demais */
}

/* Estilização dos rótulos (Labels) */
.form-container label {
    display: block;
    font-weight: bold;
    color: #1a3a5f;
    margin-bottom: -5px; /* Aproxima o rótulo do campo */
}

/* Estilização das caixas de texto */
.form-container textarea {
    width: 100%; /* Ocupa a largura total do container */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: sans-serif;
    resize: vertical; /* Permite aumentar altura, mas não largura */
}

/* Correção do Botão de Ação (Aquele azul marinho) */
.btn-acao {
    background-color: #1a3a5f !important;
    color: white !important;
    width: fit-content !important; /* Faz o botão ter apenas o tamanho do texto */
    padding: 12px 30px !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-weight: bold;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Mantém o estilo 3D */
}

.btn-acao:hover {
    background-color: #244a77 !important;
}

/* Estilização do texto que vem da IA */
.resultado-ia h3 {
    color: #1a3a5f;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.resultado-ia p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.resultado-ia ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.resultado-ia li {
    margin-bottom: 8px;
}

.resultado-ia strong {
    color: #1a3a5f;
}

/* controle da tela de gerar cv */
.etapa-cv {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.etapa-cv h3 {
    margin-top: 0;
    color: #1a3a5f;
    border-left: 4px solid #1a3a5f;
    padding-left: 10px;
    margin-bottom: 20px;
}

.experiencia-item, .formacao-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

@media print {
    /* Esconde a página inteira */
    body * {
        visibility: hidden;
    }

    /* Mostra APENAS a div do currículo que a IA gerou */
    #area-impressao-final, #area-impressao-final * {
        visibility: visible;
    }

    /* Posiciona o conteúdo no topo da folha */
    #area-impressao-final {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        border: none;
    }

    /* Garante que nenhum botão saia no papel */
    button, .btn-pequeno, .btn-acao {
        display: none !important;
    }
}

@media print {
    /* Esconde absolutamente tudo */
    body * {
        visibility: hidden;
        margin: 0;
    }
    
    /* Mostra APENAS o currículo gerado */
    #cv-renderizado, #cv-renderizado * {
        visibility: visible;
    }

    /* Ajusta o currículo para o topo da folha A4 */
    #cv-renderizado {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none !important; /* Remove a borda cinza na impressão */
        padding: 0 !important;
    }

    /* Esconde o botão de imprimir que fica dentro da área de conteúdo */
    button {
        display: none !important;
    }
}

/* --- ESTILIZAÇÃO DO LOADER DA IA --- */

.msg-processando {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: #2c3e50;
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #3498db;
    border-radius: 4px;
    margin-top: 15px;
}

/* Efeito 1: A Ampulheta Giratória (CSS puro) */
.msg-processando::before {
    content: "⏳";
    animation: girarAmpulheta 2s infinite linear;
    display: inline-block;
}

/* Efeito 2: Os Três Pontos Andando/Piscando */
.msg-processando::after {
    content: ".";
    animation: pontinhosAndando 1.5s infinite steps(4, end);
    display: inline-block;
    width: 20px;
    text-align: left;
}

/* --- ANIMAÇÕES (KEYFRAMES) --- */

/* Faz a ampulheta dar uma volta de 360 graus */
@keyframes girarAmpulheta {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Faz o texto alternar entre ., .., ... e vazio */
/*@keyframes pontinhosAndando {
    0%   { content: "."; }
    33%  { content: ".."; }
    66%  { content: "..."; }
    100% { content: ""; }
}*/

/* --- PAINEL DE CRÉDITOS NA SIDEBAR --- */

.divisor-sidebar {
    border: 0;
    border-top: 1px solid #4f5d73;
    margin: 10px 0 8px 0;    /* Reduzido drasticamente */
}

.painel-creditos {
    background-color: #2c3e50;
    padding: 10px;           /* Mais compacto */
    border-radius: 6px;
    text-align: center;
}

.painel-creditos h3 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: #bdc3c7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.txt-creditos {
    font-size: 1.1rem;
    color: #ffffff;
    margin: 0 0 15px 0;
}

#contador-creditos {
    color: #2ecc71; /* Verde para destacar a quantidade */
    font-size: 1.3rem;
}

/* Botão de Compra Estilizado */
.btn-compra {
    width: 100%;
    background-color: #e67e22; /* Laranja chamativo, cor padrão de conversão/venda */
    color: white;
    border: none;
    padding: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-compra:hover {
    background-color: #d35400; /* Laranja mais escuro no hover */
}

/* --- JANELA MODAL E CARDS DE PLANOS --- */

.modal-overlay {
    position: fixed !important; /* O important garante que ele vire um elemento flutuante */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro sutil */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999 !important; /* Joga a tela de planos para a frente de tudo */
}

.modal-content {
    background-color: #ffffff;
    padding: 35px;
    border-radius: 8px;
    width: 90%;
    max-width: 950px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    color: #333;
    text-align: center;
}

/* Customização específica para o tamanho da tela de login/cadastro */
.modal-content.acesso-tamanho {
    max-width: 400px !important; /* Limita a caixinha para ficar elegante */
    text-align: left; /* Deixa os labels do formulário alinhados à esquerda */
}

.modal-fechar {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #95a5a6;
    transition: color 0.2s;
}

.modal-fechar:hover {
    color: #c0392b;
}

.modal-content h2 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.subtitulo-modal {
    color: #7f8c8d;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Container dos 3 Cards */
.cards-planos-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Estrutura Padrão do Card */
.card-plano {
    background: #f8f9fa;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    padding: 25px;
    flex: 1;
    min-width: 250px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
}

.card-plano:hover {
    transform: translateY(-5px);
}

/* Card Destaque (Plano Pro) */
.card-plano.plano-destaque {
    border: 2px solid #3498db;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.15);
}

.selo-destaque {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #3498db;
    color: white;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 20px;
}

/* Detalhes internos do card */
.card-plano h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.3rem;
}

.preco-plano {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
}

.preco-plano span {
    font-size: 1.1rem;
    font-weight: normal;
}

.creditos-qtd {
    font-weight: bold;
    color: #2ecc71;
    margin: 5px 0 20px 0;
    font-size: 1.05rem;
}

.card-plano ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
}

.card-plano ul li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
}

/* Botões dos Cards */
.btn-escolher-plano {
    display: block;
    background: #34495e;
    color: white;
    text-decoration: none;
    padding: 12px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.btn-escolher-plano:hover {
    background: #2c3e50;
}

.plano-destaque .btn-escolher-plano {
    background: #e67e22;
}

.plano-destaque .btn-escolher-plano:hover {
    background: #d35400;
}

/* Estilo para o custo dentro dos botões da sidebar */
.custo-botao {
    display: block;
    font-size: 0.7rem;        /* Um pouquinho menor para dar melhor hierarquia */
    opacity: 0.65;            /* Transparência executiva sutil */
    margin-top: 2px;          /* Aproxima o custo do título do botão */
    font-weight: normal;
    text-align: left;         /* Garante o início à esquerda */
}

/* =================================================================
   ESTILIZAÇÃO DO BANNER HERO ROTATIVO (McKinsey Style)
   ================================================================= */
.banner-hero {
        height: 380px !important;
        width: 100% !important; /* Garante que o carrossel ocupe a largura inteira do celular */
        max-width: 100% !important;
        position: relative !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
    }

.banner-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 25px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        
        /* Adiciona rigidez para o celular entender a transição */
        opacity: 0 !important;
        visibility: hidden !important; 
        transition: opacity 1s ease-in-out, visibility 1s ease-in-out !important;
        z-index: 1;
    }

.banner-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
    }

    .banner-body {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

.banner-badge {
    display: inline-block;
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    margin-bottom: 20px;
}

.banner-body h2 {
        font-size: 1.4rem !important; /* Texto agora terá espaço para respirar horizontalmente */
        line-height: 1.3 !important;
        margin-top: 10px !important;
        color: #ffffff !important;
    }

.banner-sub {
    font-size: 1.25rem;
    color: #10b981 !important; /* Força o verde brilhante original sobre o fundo escuro */
    margin-bottom: 15px;
    font-weight: 600;
}

.banner-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: #94a3b8 !important; /* Injeta o cinza claro definitivo aqui */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.banner-indicadores {
        left: 25px !important;
        bottom: 15px !important;
        z-index: 10 !important; /* Garante que os tracinhos fiquem na frente de tudo */
    }

.banner-indicadores .indicador {
    width: 35px;
    height: 3px;
    background-color: #334155;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.banner-indicadores .indicador.active {
    background-color: #10b981;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================= */
/* ESTILIZAÇÃO DO RODAPÉ (FOOTER)                                    */
/* ================================================================= */
.rodape-sistema {
    background-color: #2c3e50; /* Tom azul escuro corporativo */
    color: #ffffff;
    padding: 20px 0;
    margin-top: 40px; /* Garante que ele não cole nos módulos superiores */
    border-top: 4px solid #2ecc71; /* Linha sutil verde de destaque no topo */
    font-family: Arial, sans-serif;
}

.rodape-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Garante responsividade para telas de celulares */
    gap: 15px;
}

.rodape-texto {
    font-size: 14px;
    color: #bdc3c7;
    margin: 0;
}

.rodape-contatos {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.rodape-titulo-contato {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.link-contato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Estilo do Botão do WhatsApp (Verde Oficial) */
.btn-whatsapp {
    background-color: #25d366;
}

.btn-whatsapp:hover {
    background-color: #1ebd56;
    transform: translateY(-1px);
}

/* Estilo do Botão do E-mail (Azul Suporte) */
.btn-email {
    background-color: #3498db;
}

.btn-email:hover {
    background-color: #2980b9;
    transform: translateY(-1px);
}

.icone-contato {
    font-size: 15px;
}

/* Responsividade para telas menores (Dispositivos Móveis) */
@media (max-width: 768px) {
    .rodape-container {
        flex-direction: column;
        text-align: center;
    }
    .rodape-contatos {
        flex-direction: column;
        width: 100%;
    }
    .link-contato {
        width: 100%; /* Botões ocupam a largura total no celular */
        justify-content: center;
    }
}









/* =================================================================
   13. ARQUITETURA DE RESPONSIVIDADE E ESTADOS TRANSACIONAIS (UI/UX)
   ================================================================= */

/* --- BLINDAGEM VISUAL: ESTADO DE PROCESSAMENTO IA --- */
button:disabled, 
.btn-acao:disabled {
    background-color: #94a3b8 !important; /* Cinza ardósia corporativo */
    color: #cbd5e1 !important;
    cursor: not-allowed !important; /* Cursor de bloqueio do sistema */
    transform: none !important; /* Desativa efeitos de levitação */
    box-shadow: none !important; /* Remove relevo 3D durante o cálculo */
    opacity: 0.8;
}

/* --- LEITURA EXECUTIVA: OTIMIZAÇÃO DOS RELATÓRIOS GERADOS --- */
.resultado-ia {
    background: #ffffff;
    border-radius: 6px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.resultado-ia h3 {
    font-family: sans-serif;
    color: #1a3a5f !important;
    font-size: 1.25rem !important;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 6px;
    margin-top: 25px !important;
}

.resultado-ia p {
    font-family: sans-serif;
    color: #334155;
    line-height: 1.6 !important;
    font-size: 0.95rem;
    margin-bottom: 14px;
}

.resultado-ia ul {
    margin-bottom: 18px;
    padding-left: 22px !important;
}

.resultado-ia li {
    color: #334155;
    margin-bottom: 8px !important;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* --- MEDIA QUERY: DISPOSITIVOS MÓVEIS (TABLETS E SMARTPHONES) --- */
@media (max-width: 1024px) {
    .flex-container {
        flex-direction: column !important; /* Força empilhamento vertical */
        padding: 15px;
        gap: 15px;
    }

    .sidebar {
        width: 100% !important;
        min-width: 100% !important;
    }

    .cards-planos-container {
        gap: 15px;
    }

    .card-plano {
        min-width: 100%; /* Planos ocupam largura total em tablets */
    }
}

@media (max-width: 768px) {
    /* Ajuste de Cabeçalho */
    .cabecalho {
        grid-template-columns: 1fr; /* Transforma o grid rígido em coluna única */
        height: auto;
        padding: 15px;
        gap: 10px;
        text-align: center;
    }

    .logo {
        justify-self: center;
        height: 70px !important; /* Aumentado de 50px para 70px para dar leitura no mobile */
        width: auto !important;
        margin-bottom: 5px;
    }

    .titulo-central {
        font-size: 18px;
        line-height: 1.3;
    }

    .area-login-cabecalho {
        justify-self: center !important;
        width: 100%;
    }

    .area-login-cabecalho button {
        width: 100%; /* Botão de login ocupa toda a largura no celular */
        text-align: center;
    }

    /* Transformação da Sidebar em Painel de Controle Superior */
    .sidebar {
        background-color: #112233;
        padding: 15px;
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* Transforma os botões da barra lateral em blocos de toque fluídos */
    .btn-pequeno {
        padding: 10px 15px;
        font-size: 0.9rem;
        align-items: center;
        text-align: center;
    }

    .custo-botao {
        text-align: center;
        width: 100%;
    }

    /* Ajustes de Formulários Dinâmicos */
    .form-container {
        max-width: 100%;
    }

    /* Quebra o Grid de inputs de 2 colunas para 1 coluna vertical */
    .experiencia-item, 
    .formacao-item,
    #form-faturamento div {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Inputs ocupam espaço total de tela no mobile */
    .experiencia-item input, 
    .experiencia-item textarea,
    #form-faturamento input {
        width: 100% !important;
        box-sizing: border-box;
    }

    .btn-acao {
        width: 100% !important; /* Força botões de ação a ocuparem a largura do celular */
        text-align: center;
    }

    /* Ajuste de Banners Hero Rotativos no Celular */
    .banner-hero {
        height: 320px;
        padding: 0;
    }

    .banner-slide {
        padding: 20px;
    }

    .banner-body h2 {
        font-size: 1.6rem;
    }

    .banner-sub {
        font-size: 0.95rem !important;
        color: #10b981 !important; /* Proteção de contraste para o smartphone */
        margin-bottom: 10px;
    }

    .banner-desc {
    font-size: 0.85rem !important; /* Dupla proteção de contraste para o mobile */
    -webkit-line-clamp: 4 !important; /* Limita a 4 linhas nos motores Webkit (Chrome/Safari) */
    line-clamp: 4 !important;         /* 🎯 FIX: Adiciona a propriedade padrão para matar o aviso do VS Code */
    color: #94a3b8 !important; 
}

    .banner-indicadores {
        left: 20px;
        bottom: 15px;
    }
}

/* --- COMPATIBILIDADE FINA: TELAS ULTRA PEQUENAS --- */
@media (max-width: 480px) {
    .modal-content {
        padding: 20px;
        width: 95%;
    }
    
    .titulo-modulo {
        font-size: 1.3rem;
    }
}

/* FORÇA BRUTA: CAÇADOR DE SUBTÍTULO EM PRETO */
.banner-slide .banner-sub,
.banner-slide .banner-body .banner-sub,
h3.banner-sub,
p.banner-sub,
.banner-sub,
.banner-sub * {
    color: #10b981 !important; /* Obriga o verde brilhante a renderizar */
    -webkit-text-fill-color: #10b981 !important; /* Quebra heranças de motores Safari/Chrome */
}

/* =================================================================
   14. ESTILIZAÇÃO CORPORATIVA DA TABELA DE EXTRATO DE CRÉDITOS
   ================================================================= */
.tabela-extrato-container {
    max-height: 350px;
    overflow-y: auto;
    margin-top: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
}

.tabela-extrato {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.tabela-extrato th {
    background-color: #1a3a5f;
    color: #ffffff;
    padding: 12px 16px;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 5;
}

.tabela-extrato td {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #2c3e50;
}

.tabela-extrato tr:hover td {
    background-color: #f8fafc; /* Efeito hover sutil nas linhas */
}

/* Badges e Cores Indicativas de Finanças */
.tag-entrada {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.tag-saida {
    background-color: rgba(231, 76, 60, 0.15);
    color: #c0392b;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.txt-positivo {
    color: #27ae60 !important;
}

.txt-negativo {
    color: #c0392b !important;
}

/* Ajuste Responsivo para Celulares */
@media (max-width: 768px) {
    .tabela-extrato th, 
    .tabela-extrato td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* =================================================================
   SISTEMA DE BALÕES FLUTUANTES EXECUTIVOS (ESTÁTICO VIA CSS ENGINE)
   ================================================================= */
.caixa-balao-bloco {
    position: relative !important;
    display: block !important;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important; /* Ajusta a caixa perfeitamente ao tamanho do botão */
    margin-top: 15px !important;
}

/* O Balão Oculto por Definição */
.caixa-balao-bloco .texto-balao-flutuante {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 290px !important;
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    text-align: center !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    
    /* Efeito de Suspensão por cima do Botão */
    position: absolute !important;
    bottom: 125% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    
    font-family: sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.25) !important;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out !important;
    pointer-events: none !important; /* Blinda o rato contra cintilação */
}

/* Pequeno triângulo na base do balão */
.caixa-balao-bloco .texto-balao-flutuante::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -6px !important;
    border-width: 6px !important;
    border-style: solid !important;
    border-color: #2c3e50 transparent transparent transparent !important;
}

/* 🔥 GATILHO HOVER PURO: O balão ganha vida instantaneamente quando o rato pousa na caixa */
.caixa-balao-bloco:hover .texto-balao-flutuante {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 🔥 GATILHO CLIQUE: Oculta o balão no milissegundo em que o botão é pressionado */
.caixa-balao-bloco:active .texto-balao-flutuante {
    visibility: hidden !important;
    opacity: 0 !important;
}