/*
==================================================
SIMULADOR DE JUROS COMPOSTOS - ESTILOS CSS
==================================================
*/

/* ... Estilos Anteriores ... */

/* INSTRUÇÕES DO SIMULADOR */
.instructions-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.instructions-section h3 {
    font-size: 1.2em;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.instructions-toggle:hover {
    color: #e53e3e;
}

.toggle-icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.toggle-icon.open {
    transform: rotate(180deg);
}

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

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.instruction-icon {
    font-size: 1.5em;
}

.instruction-text strong {
    display: block;
    color: #1a1a1a;
    margin-bottom: 5px;
    font-size: 0.95em;
}

.instruction-text p {
    margin: 0;
    color: #666;
    font-size: 0.85em;
    line-height: 1.4;
}

/* ==================================================
Versão: 2.1
Descrição: Estilos modernos e responsivos para o simulador
================================================== */

/* ====================================
CONTAINER PRINCIPAL
==================================== */
.simulador-container {
    max-width: 1200px;
    /* Largura máxima do simulador */
    margin: 0 auto;
    /* Centraliza horizontalmente */
    padding: 0;
    /* Remove padding para header escuro */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: white;
    /* Fundo branco */
    border-radius: 15px;
    /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Sombra mais sutil */
    /* overflow: hidden; Removido para evitar bugs de scroll em mobile */
    overflow: visible;
    /* Garante scroll se necessário */
}

/* Arredondamento apenas visual interno se necessário, ou aplicar overflow hidden via JS apenas em desktop se crítico */
@media (min-width: 769px) {
    .simulador-container {
        overflow: hidden;
        /* Mantém hidden apenas em desktop para bordas perfeitas */
    }
}

/* ====================================
CABEÇALHO DO SIMULADOR (ESTILO ESCURO)
==================================== */
.simulador-header {
    text-align: center;
    /* Centraliza o texto */
    padding: 30px 20px;
    /* Espaçamento interno */
    margin-bottom: 0;
    /* Remove margem */
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    /* Gradiente escuro */
    color: white;
    /* Cor do texto */
    position: relative;
    /* Para possíveis elementos filhos */
}

.simulador-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #e53e3e;
    /* Linha vermelha de destaque */
    border-radius: 2px;
}

.simulador-header h2 {
    font-size: 2.2em;
    /* Tamanho da fonte do título */
    margin: 0 0 10px 0;
    /* Remove margens e adiciona espaço abaixo */
    font-weight: 700;
    /* Peso da fonte (negrito) */
    color: white;
    /* Força cor branca */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Sombra para destacar */
}

.simulador-header p {
    font-size: 1.1em;
    /* Tamanho da fonte da descrição */
    opacity: 0.95;
    /* Transparência leve ajustada */
    margin: 0;
    /* Remove margens */
    color: white;
    /* Força cor branca */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* Sombra sutil */
}

/* ====================================
CONTEÚDO PRINCIPAL (ESTILO CLARO)
==================================== */
.simulador-content {
    background: white;
    /* Fundo branco */
    padding: 40px 30px 30px;
    /* Espaçamento interno aumentado no topo */
    border-radius: 0;
    /* Remove bordas do conteúdo */
}

/* ====================================
SEÇÃO DO FORMULÁRIO
==================================== */
.formulario-section {
    margin-bottom: 30px;
    /* Espaço abaixo da seção */
}

/* ====================================
GRUPOS DE INPUT E LAYOUT
==================================== */
.input-group {
    margin-bottom: 25px;
    /* Espaço entre grupos de input */
}

/* Layout em duas colunas para desktop */
.input-row {
    display: grid;
    /* Usa CSS Grid */
    grid-template-columns: 1fr 1fr;
    /* Duas colunas iguais */
    gap: 20px;
    /* Espaço entre colunas */
}

/* ====================================
NOVA SEÇÃO: TOGGLE DE ACUMULAÇÃO
==================================== */
.toggle-section {
    background: #f8f9fa;
    /* Fundo cinza claro */
    padding: 20px;
    /* Espaçamento interno */
    border-radius: 10px;
    /* Bordas arredondadas */
    border: 2px solid #e9ecef;
    /* Borda cinza */
    margin-bottom: 30px;
    /* Espaço abaixo */
}

.toggle-container {
    display: flex;
    /* Layout flexível */
    justify-content: space-between;
    /* Espaça elementos */
    align-items: center;
    /* Alinha verticalmente */
    gap: 20px;
    /* Espaço entre elementos */
}

.toggle-info {
    flex: 1;
    /* Ocupa espaço disponível */
}

.toggle-label .label-text {
    display: block;
    /* Força quebra de linha */
    font-weight: 600;
    /* Peso da fonte */
    color: #1a1a1a;
    /* Cor escura profissional */
    margin-bottom: 5px;
    /* Espaço abaixo */
    font-size: 1.1em;
    /* Tamanho da fonte */
}

.toggle-label .label-description {
    display: block;
    /* Força quebra de linha */
    color: #666666;
    /* Cor cinza média */
    font-size: 0.9em;
    /* Fonte menor */
    margin-bottom: 0;
    /* Remove margem */
    transition: all 0.3s ease;
    /* Transição suave */
}

/* ====================================
SWITCH TOGGLE (BOTÃO LIGA/DESLIGA)
==================================== */
.toggle-switch {
    position: relative;
    /* Para posicionamento absoluto dos filhos */
    display: inline-block;
    /* Display inline */
}

.toggle-input {
    opacity: 0;
    /* Esconde o input */
    width: 0;
    /* Largura zero */
    height: 0;
    /* Altura zero */
}

.toggle-slider {
    position: relative;
    /* Para posicionamento dos elementos */
    display: inline-block;
    /* Display inline */
    width: 80px;
    /* Largura do slider */
    height: 40px;
    /* Altura do slider */
    background: #ccc;
    /* Cor de fundo padrão */
    border-radius: 20px;
    /* Bordas arredondadas */
    cursor: pointer;
    /* Cursor pointer */
    transition: all 0.3s ease;
    /* Transição suave */
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
    /* Sombra interna */
}

.toggle-slider:before {
    content: '';
    position: absolute;
    /* Posicionamento absoluto */
    height: 32px;
    /* Altura do botão */
    width: 32px;
    /* Largura do botão */
    border-radius: 50%;
    /* Formato circular */
    left: 4px;
    /* Posição inicial */
    bottom: 4px;
    /* Posição vertical */
    background: white;
    /* Cor branca */
    transition: all 0.3s ease;
    /* Transição suave */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* Sombra */
}

/* Estado ativo (ligado) */
.toggle-input:checked+.toggle-slider {
    background: #22c55e;
    /* Verde quando ligado */
}

.toggle-input:checked+.toggle-slider:before {
    transform: translateX(40px);
    /* Move o botão para a direita */
}

/* Textos ON/OFF */
.toggle-text {
    position: absolute;
    /* Posicionamento absoluto */
    top: 50%;
    /* Centraliza verticalmente */
    transform: translateY(-50%);
    /* Ajuste vertical */
    font-size: 10px;
    /* Fonte pequena */
    font-weight: 600;
    /* Peso da fonte */
    color: white;
    /* Cor branca */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* Sombra do texto */
    transition: opacity 0.3s ease;
    /* Transição da opacidade */
    pointer-events: none;
    /* Não interfere com cliques */
}

.toggle-text.on {
    right: 12px;
    /* Mais para dentro */
    opacity: 0;
}

.toggle-text.off {
    left: 12px;
    /* Mais para dentro */
    opacity: 1;
}

/* Mostrar/esconder textos baseado no estado */
.toggle-input:checked+.toggle-slider .toggle-text.on {
    opacity: 1;
    /* Mostra ON quando ligado */
}

.toggle-input:checked+.toggle-slider .toggle-text.off {
    opacity: 0;
    /* Esconde OFF quando ligado */
}

/* ====================================
LABELS E DESCRIÇÕES
==================================== */
.label-text {
    display: block;
    /* Força quebra de linha */
    font-weight: 600;
    /* Peso da fonte */
    color: #1a1a1a;
    /* Cor escura profissional */
    margin-bottom: 5px;
    /* Espaço abaixo */
    font-size: 1.1em;
    /* Tamanho da fonte */
}

.label-description {
    display: block;
    /* Força quebra de linha */
    color: #666666;
    /* Cor cinza média */
    font-size: 0.9em;
    /* Fonte menor */
    margin-bottom: 10px;
    /* Espaço abaixo */
}

.rate-conversion-text {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
    margin-left: 2px;
    transition: opacity 0.3s ease;
    min-height: 1.2em;
}

.rate-conversion-text strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* ====================================
INTEGRATED LAYOUT STYLES
==================================== */
.integrated-input-group {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 5px;
}

.integrated-input-group:focus-within {
    border-color: #e53e3e;
    /* Red focus to match theme */
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.input-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-right: 1px solid #f0f0f0;
    color: #1a1a1a;
}

/* Wrapper do conteúdo do input (Label + Input)
- Padding: Controla a altura vertical interna do campo.
- Flexbox centraliza o conteúdo verticalmente. */
.input-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5px 12px;
    /* Reduzido de 4px para 2px para aproximar extremos */
}

/* Label acima do valor digitado
- Font-size: Tamanho do texto "Investimento inicial", etc.
- Margin-bottom: Espaço entre o label e o número digitado. */
.input-content-wrapper label {
    font-size: 0.75em;
    color: #666;
    margin-bottom: -1px;
    /* Margem negativa leve para colar no input */
    font-weight: 500;
    line-height: 1.1;
    /* Line-height mais justo */
}

/* O campo de input em si (onde digita o número)
- Height: Altura fixa para garantir consistência.
- Font-size: Tamanho do número digitado. */
.integrated-input {
    border: none;
    width: 100%;
    font-size: 1.1em;
    font-weight: 600;
    color: #1a1a1a;
    padding: 0;
    background: transparent;
    outline: none;
    height: 24px;
    /* Aumente se cortar o texto, diminua para compactar */
    margin-top: 0px;
}

/* Área do select (R$/Anos) à direita
- Se ajusta à altura do grupo principal via flexbox. */
.input-addon {
    background: #e53e3e;
    display: flex;
    align-items: stretch;
    min-width: 90px;
}

/* O elemento select dropdown
- Font-size: Tamanho do texto dentro do botão vermelho. */
.integrated-select {
    background: transparent;
    border: none;
    color: white;
    font-weight: 600;
    padding: 0 15px;
    width: 100%;
    cursor: pointer;
    outline: none;
    font-size: 0.9em;
    appearance: none;
    text-align: center;
    text-align-last: center;
}

.integrated-select option {
    background: white;
    color: #1a1a1a;
}

/* Texto descritivo abaixo do campo ("Insira o valor...")
- Margin-bottom: Espaço até o próximo campo. */
.input-description-text {
    font-size: 0.75em;
    color: #666;
    margin-bottom: 15px;
    /* Espaço vertical entre os blocos de input */
    font-weight: 500;
}

/* Texto de conversão de taxas (aparece dinamicamente) */
.rate-conversion-text {
    font-size: 0.8em;
    color: #1a1a1a;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 10px;
}

/* Estilo dos selects */
.form-select {
    padding: 15px;
    /* Espaçamento interno */
    border: 2px solid #e0e0e0;
    /* Borda cinza neutra */
    border-radius: 8px;
    /* Bordas arredondadas menores */
    background: #fafafa;
    /* Fundo cinza claro */
    font-size: 1em;
    /* Tamanho da fonte */
    min-width: 120px;
    /* Largura mínima */
    transition: all 0.3s ease;
    /* Transição suave */
    box-sizing: border-box;
    /* Inclui padding e border na largura */
    color: #1a1a1a;
    /* Cor do texto */
}

/* Estado de foco dos selects */
.form-select:focus {
    outline: none;
    /* Remove outline padrão */
    border-color: #e53e3e;
    /* Borda vermelha */
    background: white;
    /* Fundo branco */
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
    /* Sombra vermelha */
}

/* ====================================
BOTÃO CALCULAR (ESTILO SITE)
==================================== */
.btn-calcular {
    width: 100%;
    /* Largura total */
    padding: 18px 24px;
    /* Espaçamento interno aumentado */
    background: linear-gradient(135deg, #e53e3e 0%, #c73030 100%);
    /* Gradiente vermelho */
    color: white;
    /* Texto branco */
    border: none;
    /* Remove borda */
    border-radius: 8px;
    /* Bordas arredondadas menores */
    font-size: 1.2em;
    /* Fonte maior */
    font-weight: 600;
    /* Peso da fonte */
    cursor: pointer;
    /* Cursor de pointer */
    transition: all 0.3s ease;
    /* Transição suave */
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
    /* Sombra vermelha */
    box-sizing: border-box;
    /* Inclui padding e border na largura */
    display: flex;
    /* Layout flexível */
    align-items: center;
    /* Alinha verticalmente */
    justify-content: center;
    /* Centraliza horizontalmente */
    text-align: center;
    /* Centraliza o texto */
    line-height: 1.2;
    /* Altura da linha */
    white-space: nowrap;
    /* Impede quebra de linha */
    overflow: hidden;
    /* Esconde overflow */
    text-transform: uppercase;
    /* Texto em maiúsculas */
    letter-spacing: 0.5px;
    /* Espaçamento entre letras */
}

/* Efeito hover do botão */
.btn-calcular:hover {
    transform: translateY(-2px);
    /* Move para cima */
    box-shadow: 0 8px 25px rgba(229, 62, 62, 0.4);
    /* Sombra maior */
    background: linear-gradient(135deg, #d73333 0%, #b82929 100%);
    /* Vermelho mais escuro */
}

/* Efeito de clique do botão */
.btn-calcular:active {
    transform: translateY(0);
    /* Volta à posição original */
}

/* ====================================
CARDS DE RESULTADOS
==================================== */
.cards-container {
    display: grid;
    /* Layout em grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Colunas responsivas */
    gap: 20px;
    /* Espaço entre cards */
    margin-bottom: 30px;
    /* Espaço abaixo */
}

/* Estilo base dos cards */
.result-card {
    background: white;
    /* Fundo branco */
    border-radius: 15px;
    /* Bordas arredondadas */
    padding: 25px;
    /* Espaçamento interno */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* Sombra leve */
    border: 1px solid #e2e8f0;
    /* Borda cinza */
    transition: all 0.3s ease;
    /* Transição suave */
    display: flex;
    /* Layout flexível */
    align-items: center;
    /* Alinha verticalmente */
    gap: 15px;
    /* Espaço entre ícone e conteúdo */
    color: #1a1a1a;
    /* Força cor escura para textos em cards claros, contrapondo temas dark */
}

/* Efeito hover dos cards */
.result-card:hover {
    transform: translateY(-5px);
    /* Move para cima */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* Sombra maior */
}

/* Card principal (patrimônio final) */
.result-card.primary {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    /* Gradiente escuro */
    color: white;
    /* Texto branco */
    border: none;
    /* Remove borda */
    color: white !important;
    /* Força cor branca independentemente do tema */
}

/* Força cor branca nos elementos filhos do card primário */
.result-card.primary h3,
.result-card.primary p,
.result-card.primary small,
.result-card.primary .card-icon,
.result-card.primary .card-value {
    color: white !important;
    opacity: 1;
}

/* Card de sucesso (total de juros) */
.result-card.success {
    border-left: 4px solid #22c55e;
    /* Borda esquerda verde */
    background: #f0fdf4;
    /* Fundo levemente esverdeado */
}

/* Card de informação (renda final) */
.result-card.info {
    border-left: 4px solid #666666;
    /* Borda esquerda cinza */
    background: #fafafa;
    /* Fundo cinza claro */
}

/* ====================================
CONTEÚDO DOS CARDS
==================================== */
.card-icon {
    font-size: 2.5em;
    /* Tamanho do ícone */
    opacity: 0.8;
    /* Transparência leve */
}

.card-content h3 {
    margin: 0 0 5px 0;
    /* Remove margens e adiciona espaço abaixo */
    font-size: 1em;
    /* Tamanho da fonte */
    font-weight: 600;
    /* Peso da fonte */
    opacity: 0.9;
    /* Transparência leve */
}

.card-value {
    font-size: clamp(1.2em, 5vw, 1.8em);
    /* Fonte responsiva: min 1.2em, ideal 5vw, max 1.8em */
    font-weight: 700;
    /* Peso da fonte */
    margin: 0 0 5px 0;
    /* Margens */
    color: inherit;
    /* Herda a cor do parent */
    white-space: nowrap;
    /* Impede quebra de linha (R$ em cima, centavos em baixo) */
}

.card-content small {
    opacity: 0.7;
    /* Transparência */
    font-size: 0.85em;
    /* Fonte pequena */
}

/* ====================================
SEÇÕES DE GRÁFICO E TABELA
==================================== */
.chart-section,
.table-section {
    background: #f8f8f8;
    /* Fundo cinza muito claro */
    border-radius: 10px;
    /* Bordas arredondadas menores */
    padding: 25px;
    /* Espaçamento interno */
    margin-bottom: 20px;
    /* Espaço abaixo */
}

/* Controles da Tabela (View Toggle) */
.table-controls {
    display: flex;
    gap: 10px;
    /* Gap menor entre grupos */
    align-items: center;
    flex-wrap: wrap;
    /* Permite quebrar em telas muito pequenas */
    justify-content: flex-end;
    /* Alinha tudo à direita */
}

.view-toggle {
    display: flex;
    background: #e0e0e0;
    padding: 4px;
    border-radius: 6px;
    height: 38px;
    /* Altura fixa */
    box-sizing: border-box;
    align-items: center;
}

.btn-view {
    border: none;
    background: transparent;
    padding: 0 15px;
    /* Padding lateral */
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    color: #666;
    transition: all 0.3s ease;
    height: 100%;
    /* Ocupa altura total do pai */
    display: flex;
    align-items: center;
}

.btn-view.active {
    background: white;
    color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-view:hover:not(.active) {
    color: #1a1a1a;
}

/* Cabeçalhos das seções */
.chart-header,
.table-header {
    display: flex;
    /* Layout flexível */
    justify-content: space-between;
    /* Espaça elementos */
    align-items: center;
    /* Alinha verticalmente */
    margin-bottom: 30px;
    /* Espaço abaixo aumentado */
}

.chart-header h3,
.table-header h3 {
    margin: 0;
    /* Remove margens */
    color: #1a1a1a;
    /* Cor escura */
    font-size: 1.3em;
    /* Tamanho da fonte */
    font-weight: 600;
    /* Peso da fonte */
}

/* ====================================
CONTAINER DO GRÁFICO
==================================== */
.chart-container {
    position: relative;
    /* Para posicionamento do Chart.js */
    height: 400px;
    /* Altura fixa */
    background: white;
    /* Fundo branco */
    border-radius: 10px;
    /* Bordas arredondadas */
    padding: 20px;
    /* Espaçamento interno */
}

/* ====================================
BOTÕES SECUNDÁRIOS
==================================== */
.btn-secondary {
    padding: 0 20px;
    /* Padding lateral */
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 38px;
    /* Altura fixa para combinar */
}

.btn-secondary:hover {
    background: #333;
    transform: translateY(-1px);
}

/* ====================================
TABELA DE RESULTADOS
==================================== */
.table-wrapper {
    background: white;
    border-radius: 8px;
    overflow-x: auto;
    width: 100%;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* Espaço para não cortar scrollbar */
}

/* Scrollbar de Alto Contraste para Mobile */
.table-wrapper::-webkit-scrollbar {
    height: 12px;
    /* Mais alta para facilitar toque */
    background-color: #f5f5f5;
    -webkit-appearance: none;
    /* Força renderização customizada */
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    /* Sombra interna para profundidade */
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color: #555;
    /* Cinza bem escuro para visibilidade */
    border-radius: 6px;
    border: 2px solid #f0f0f0;
    /* Borda para separar do track */
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #333;
    /* Preto ao passar mouse/toque */
}

.results-table {
    width: 100%;
    /* Largura total */
    min-width: 600px;
    /* Largura mínima para scroll horizontal */
    border-collapse: collapse;
    /* Remove espaços entre bordas */
}

.results-table th {
    background: #f1f1f1;
    /* Cabeçalho cinza */
    color: #1a1a1a;
    /* Texto escuro */
    padding: 15px;
    /* Padding maior */
    text-align: left;
    /* Alinha à esquerda */
    font-weight: 600;
    /* Peso da fonte */
    border-bottom: 2px solid #e0e0e0;
    /* Borda inferior */
    white-space: nowrap;
    /* Impede quebra de linha no cabeçalho */
}

.results-table td {
    padding: 12px 15px;
    /* Padding das células */
    border-bottom: 1px solid #f0f0f0;
    /* Borda entre linhas */
    color: #4a4a4a;
    /* Cor do texto */
    white-space: nowrap;
    /* Impede quebra de linha nas células */
}

.results-table tr:hover {
    background-color: #fafafa;
    /* Efeito hover na linha */
}

/* ====================================
RESPONSIVIDADE - TABLETS E DISPOSITIVOS MÉDIOS
(Ajustes sem quebrar layout drasticamente)
==================================== */
@media (max-width: 900px) {
    .simulador-container {
        margin: 10px auto;
        /* Centralizado com margem menor */
        width: 95%;
        /* Ocupa mais largura */
    }

    .simulador-content {
        padding: 30px 20px;
    }
}

/* ====================================
RESPONSIVIDADE - BREAKPOINT INTERMEDIÁRIO (TABLETS VERTICAIS / PHABLETS)
Mantém 2 colunas mas ajusta tamanhos
==================================== */
@media (max-width: 768px) {
    .simulador-header h2 {
        font-size: 1.8em;
    }

    /* Ajuste na tabela para não estourar */
    .results-table th,
    .results-table td {
        padding: 8px 10px;
        font-size: 0.9em;
    }

    /* Botões menores */
    .btn-calcular {
        padding: 15px 20px;
        font-size: 1.1em;
    }
}

/* ====================================
RESPONSIVIDADE - MODO PAISAGEM MÓVEL (LANDSCAPE)
Otimização Vertical
==================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Layout Geral */
    .simulador-container {
        margin: 0 auto;
        border-radius: 0;
        /* Remove bordas arredondadas para ganhar espaço */
        box-shadow: none;
        width: 100% !important;
        max-width: 100% !important;
    }

    .simulador-header {
        padding: 8px 15px;
        /* Header ultra compacto */
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .simulador-header::after {
        display: none;
        /* Remove a linha decorativa */
    }

    .simulador-header h2 {
        font-size: 1.1em;
        margin: 0;
    }

    .simulador-header p {
        display: none;
        /* Esconde descrição para ganhar espaço */
    }

    .simulador-content {
        padding: 10px 15px;
    }

    /* Grid de Inputs Otimizado */
    .formulario-section {
        margin-bottom: 15px;
    }

    .input-row {
        gap: 10px;
        margin-bottom: 0;
        /* Remove margem extra */
    }

    .input-group {
        margin-bottom: 10px;
    }

    .integrated-input-group {
        height: 36px;
        /* Altura reduzida dos inputs */
        margin-bottom: 0;
    }

    .input-icon-wrapper {
        padding: 0 10px;
    }

    .input-icon-wrapper svg {
        width: 18px;
        height: 18px;
    }

    .input-content-wrapper {
        padding: 0 8px;
    }

    .input-content-wrapper label {
        font-size: 0.65em;
        margin-bottom: -2px;
    }

    .integrated-input {
        font-size: 0.95em;
        height: 20px;
    }

    .input-addon {
        min-width: 60px;
    }

    .integrated-select {
        padding: 0 5px;
        font-size: 0.8em;
    }

    .input-description-text {
        display: none;
        /* Esconde descrições em landscape para limpar a tela */
    }

    /* Ajuste Toggle */
    .toggle-section {
        padding: 8px 12px;
        margin-bottom: 15px;
        border-radius: 6px;
    }

    .toggle-container {
        gap: 10px;
    }

    .toggle-label .label-text {
        font-size: 0.9em;
        margin-bottom: 0;
    }

    .toggle-label .label-description {
        display: none;
        /* Esconde descrição do toggle */
    }

    /* Botão Calcular */
    .btn-calcular {
        padding: 10px;
        font-size: 1em;
    }

    /* Resultados */
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        /* Força 2 colunas mesmo em mobile landscape */
        gap: 10px;
    }

    .result-card {
        padding: 10px;
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .card-icon {
        font-size: 1.5em;
    }

    .card-content h3 {
        font-size: 0.85em;
    }

    .card-value {
        font-size: 1.1em;
    }

    .card-content small {
        display: none;
    }
}

/* ====================================
RESPONSIVIDADE - MOBILE PRINCIPAL (QUEBRA DE LAYOUT)
Aqui sim transformamos em coluna única
==================================== */
@media (max-width: 650px) {

    /* Input rows viram coluna única APENAS aqui */
    .input-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .simulador-content {
        padding: 20px 15px;
    }

    /* Cards em coluna */
    .cards-container {
        grid-template-columns: 1fr;
        /* Um card por linha */
    }

    .result-card {
        padding: 20px;
        flex-direction: row;
        /* Mantém ícone ao lado em mobile vertical pra economizar altura */
        text-align: left;
        align-items: center;
    }

    .card-icon {
        font-size: 2em;
        margin-bottom: 0;
    }

    .card-value {
        font-size: 1.5em;
    }

    /* Ajustes específicos de tabela e gráfico */
    .table-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .chart-container {
        height: 300px;
        padding: 10px;
    }

    /* Toggle menor */
    .toggle-slider {
        width: 70px;
        height: 36px;
    }

    .toggle-slider:before {
        height: 28px;
        width: 28px;
    }

    .toggle-input:checked+.toggle-slider:before {
        transform: translateX(34px);
    }
}

/* ====================================
RESPONSIVIDADE - MOBILE PEQUENO (IPHONE SE, ETC)
==================================== */
@media (max-width: 380px) {
    .simulador-header h2 {
        font-size: 1.4em;
    }

    .integrated-input-group {
        flex-wrap: wrap;
        /* Permite quebrar se muito apertado */
    }

    .input-addon {
        flex: 1;
        /* Ocupa largura total se quebrar */
        min-width: 100%;
        height: 35px;
        /* Altura fixa quando quebra */
    }

    .result-card {
        flex-direction: column;
        text-align: center;
    }

    .toggle-text {
        font-size: 9px;
    }
}

/* ====================================
UTILITÁRIOS E ANIMAÇÕES
==================================== */

/* Animação de fade in para os resultados */
.resultados-section {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll suave para toda a página */
html {
    scroll-behavior: smooth;
}

/* ====================================
   SUPORTE A DARK MODE
   Adaptação para temas escuros
==================================== */
/* Seletor Universal ativado via JS */
.plugin-dark-mode.simulador-container,
.plugin-dark-mode .simulador-container {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.plugin-dark-mode .simulador-content {
    background: #1a1a1a;
    color: #f0f0f0;
}

/* Inputs em Dark Mode */
.plugin-dark-mode .integrated-input-group {
    background: #2d2d2d;
    border-color: #444;
}

.plugin-dark-mode .integrated-input {
    color: white;
}

.plugin-dark-mode .input-icon-wrapper {
    border-right-color: #444;
    color: #ccc;
}

.plugin-dark-mode .input-content-wrapper label {
    color: #aaa;
}

.plugin-dark-mode .integrated-select option {
    background: #2d2d2d;
    color: white;
}

/* Cards de Resultado em Dark Mode */
.plugin-dark-mode .result-card {
    background: #2d2d2d;
    border-color: #444;
    color: white;
    /* Reverte o #1a1a1a forçado anteriormente */
}

/* Toggle Section */
.plugin-dark-mode .toggle-section {
    background: #2d2d2d;
    border-color: #444;
}

.plugin-dark-mode .label-text {
    color: white;
}

.plugin-dark-mode .label-description {
    color: #bbb;
}

/* Seções de Gráfico e Tabela */
.plugin-dark-mode .chart-section,
.plugin-dark-mode .table-section {
    background: #2d2d2d;
}

.plugin-dark-mode .chart-header h3,
.plugin-dark-mode .table-header h3 {
    color: white;
}

.plugin-dark-mode .chart-container {
    background: #2d2d2d;
}

.plugin-dark-mode .resultado-pie-section,
.plugin-dark-mode .meta-section {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: white;
}

.plugin-dark-mode .chart-title {
    color: white;
}

/* Tabela em Dark Mode */
.plugin-dark-mode .table-wrapper {
    background: #2d2d2d;
    box-shadow: none;
}

.plugin-dark-mode .results-table th {
    background: #333;
    color: white;
    border-bottom-color: #444;
}

.plugin-dark-mode .results-table td {
    color: #ddd;
    border-bottom-color: #444;
}

.plugin-dark-mode .results-table tr:hover {
    background-color: #3a3a3a;
}

/* Instruções em Dark Mode */
.plugin-dark-mode .instructions-toggle {
    color: white;
    border-bottom-color: #444;
}

.plugin-dark-mode .instructions-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
    /* Leve destaque ao passar mouse */
}

.plugin-dark-mode .toggle-icon {
    color: white;
    /* Garante que a seta fique branca */
}

.plugin-dark-mode .instruction-text strong {
    color: white;
}

.plugin-dark-mode .instruction-text p {
    color: #ccc;
}

/* Cards de Instrução (Internos) em Dark Mode */
.plugin-dark-mode .instruction-item {
    background: #2d2d2d !important;
    border: 1px solid #444;
    color: white;
}

.plugin-dark-mode .instruction-text strong {
    color: white !important;
}

/* Scrollbar da Tabela em Dark */
.plugin-dark-mode .table-wrapper::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.plugin-dark-mode .table-wrapper::-webkit-scrollbar-thumb {
    background-color: #555;
    border-color: #2d2d2d;
}