:root {
    --azul: #2455a4;
    --azul-escuro: #163a73;
    --verde: #1f8a4c;
    --verde-claro: #5fa876;
    --vermelho: #b83232;
    --cinza-bg: #f5f6f8;
    --cinza-borda: #dfe3e8;
    /* Borda de cartao: a --cinza-borda e fina demais pra DESENHAR um cartao --
       em tela grande o card parecia nao ter borda nenhuma. Esta e so um degrau
       mais presente, sem virar contorno pesado. */
    --cinza-borda-forte: #c2c9d4;
    --texto: #1f2937;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--cinza-bg);
    color: var(--texto);
    margin: 0;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

.navbar {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: space-between;
    align-items: center;
    background: var(--azul-escuro);
    color: white;
    padding: 14px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-brand { font-weight: 700; }
.navbar-links a {
    display: inline-block;
    color: white;
    text-decoration: none;
    margin-left: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    opacity: 0.9;
}
.navbar-links a:hover { opacity: 1; text-decoration: underline; }
.navbar-links a.active {
    opacity: 1;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
}
.navbar-links a.active:hover { text-decoration: none; }
.navbar-filtro-modo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;
    font-size: 13px;
}
.navbar-filtro-modo-label { opacity: 0.75; margin-right: 2px; }
.filtro-modo-opcao {
    color: white;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}
.filtro-modo-opcao:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.filtro-modo-opcao.filtro-modo-ativo { background: rgba(255, 255, 255, 0.28); font-weight: 700; }

.banner {
    padding: 10px 24px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner-aviso_previo { background: #e8f0fe; color: var(--azul-escuro); }
.banner-carencia { background: #fff4e0; color: #8a5a00; }
.banner-admin-view { background: var(--azul-escuro); color: white; }
.banner-contato { color: inherit; font-weight: 600; }

.flash {
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.flash-success { background: #e5f6ec; color: var(--verde); }
.flash-error { background: #fbe9e9; color: var(--vermelho); }

.paywall {
    text-align: center;
    padding: 64px 24px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--cinza-borda);
}

.auth-box {
    max-width: 380px;
    margin: 40px auto;
    background: white;
    padding: 32px;
    border-radius: 10px;
    border: 1px solid var(--cinza-borda);
}
.auth-box h1 { margin-top: 0; font-size: 22px; }

/* Marca acima do login e do cadastro. O azul e o mesmo do site institucional
   (#042550), de proposito mais escuro que o --azul-escuro do app: e a marca,
   nao a interface. */
.auth-marca {
    max-width: 380px;
    margin: 40px auto 0;
    text-align: center;
}
.auth-marca b {
    display: block;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #042550;
}
.auth-marca small {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: #4f5d73;
}
.auth-marca p {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--texto);
}
.auth-marca + .auth-box { margin-top: 20px; }
.auth-alt { font-size: 14px; margin-top: 16px; }

form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 12px 0 4px;
}
form input, form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 14px;
}
.form-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-inline input, .form-inline select { width: auto; flex: 1; min-width: 140px; }

.btn {
    display: inline-block;
    background: var(--azul);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-top: 16px;
}
.btn:hover { background: var(--azul-escuro); }

fieldset {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    margin: 16px 0;
    padding: 16px 20px;
}
legend { font-weight: 700; padding: 0 6px; }

.campo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cinza-bg);
}
.campo-linha:last-of-type { border-bottom: none; }
.campo-linha label { margin: 0; font-weight: 400; flex: 1; min-width: 0; }
.campo-linha input { width: 140px; flex: none; }

.hint { font-size: 13px; color: #6b7280; margin-top: -8px; }

/* Dica embaixo de um campo de formulario. NAO usar .hint aqui: ela tem margin-top
   negativo (foi pensada pra colar num titulo de pagina) e sobe por cima do input. */
.hint-campo { font-size: 12px; color: #6b7280; margin: 4px 0 0; line-height: 1.4; }

/* Dois campos na mesma linha (Cidade + Estado no cadastro). Precisa de wrapper
   proprio porque `form label { display: block }` e global e empilharia rotulo e campo. */
.campo-lado-a-lado { display: flex; gap: 10px; align-items: flex-end; }
.campo-lado-a-lado .campo-largo { flex: 1 1 auto; min-width: 0; }
.campo-lado-a-lado .campo-estreito { flex: 0 0 80px; }

/* Aceite do termo no cadastro. `form input { width: 100% }` e global, entao sem a
   regra de largura abaixo o checkbox vira uma barra ocupando a linha inteira. */
.campo-aceite {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 13px;
    margin: 18px 0 4px;
    line-height: 1.4;
}
.campo-aceite input[type="checkbox"] { width: auto; flex: none; margin-top: 2px; }

/* Pagina do termo de uso: coluna de leitura, nao formulario. */
.texto-legal { max-width: 680px; margin: 32px auto; background: white; padding: 32px 36px;
               border-radius: 10px; border: 1px solid var(--cinza-borda); line-height: 1.6; }
.texto-legal p { margin: 0 0 14px; }
.texto-legal .aviso-versao { background: var(--cinza-bg); padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.texto-legal .versao-rodape { margin-top: 28px; font-size: 12px; color: #6b7280; }

.linha-topo-forms {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 32px;
}
.linha-topo-forms form { margin-bottom: 16px; }

.linha-topo-forms label,
.copiar-mes-form label,
.replicar-mensal label,
.apagar-periodo-form label {
    display: inline;
    margin: 0;
    font-size: 14px;
}

.competencia-form input { width: auto; display: inline-block; margin: 0; }

.copiar-mes-form {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.copiar-mes-form label { font-weight: 600; }
.copiar-mes-form select { width: auto; display: inline-block; margin: 0; }
.copiar-mes-opcao {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -8px 0 16px;
    font-weight: 400;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}
.copiar-mes-opcao input { width: auto; margin: 0; }

.replicar-mensal {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    margin-top: 10px;
}
.replicar-mensal label { font-weight: 400; }
.replicar-mensal input[type="number"] { width: 56px; flex: none; text-align: center; margin: 0; }
.replicar-mensal .btn { margin-top: 0; }
.replicar-mensal-opcao {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #6b7280;
    cursor: pointer;
}
.replicar-mensal-opcao input[type="checkbox"] { width: 15px; height: 15px; margin: 0; flex: none; }
.replicar-mensal + .hint { margin-top: 8px; }

.apagar-periodo-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.apagar-periodo-form .btn { margin-top: 0; }
.apagar-periodo-datas {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    top: 10px;
}
.apagar-periodo-linha { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.apagar-periodo-linha label { width: 26px; color: #6b7280; }
.apagar-periodo-linha input[type="month"] {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 4px 8px;
    font-size: 13px;
}

.copiar-mes-form .btn { margin-top: 0; }

.btn-secundario { background: white; color: var(--azul); border: 1px solid var(--azul); }
.btn-secundario:hover { background: var(--cinza-bg); color: var(--azul-escuro); }

.btn-perigo-outline { background: white; color: var(--vermelho); border: 1px solid var(--vermelho); }
.btn-perigo-outline:hover { background: #fbe9e9; }

.total-linha { margin: 16px 0; font-size: 16px; }

.campo-acoes { display: flex; align-items: center; gap: 10px; flex: none; }

.input-moeda {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    width: 190px;
    background: white;
}
.input-moeda-prefixo {
    display: flex;
    align-items: center;
    flex: none;
    background: var(--cinza-bg);
    color: #6b7280;
    font-size: 13px;
    padding: 0 10px;
    border-right: 1px solid var(--cinza-borda);
    border-radius: 6px 0 0 6px;
}
.campo-linha .input-moeda input {
    border: none;
    border-radius: 0 6px 6px 0;
    text-align: right;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 9px 12px;
    font-size: 15px;
    background: transparent;
}
.input-moeda input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

.input-percentual {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    width: 130px;
    background: white;
}
.input-percentual input {
    border: none;
    border-radius: 6px 0 0 6px;
    text-align: right;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 9px 6px;
    font-size: 13px;
    background: transparent;
}
.input-percentual input::placeholder { color: #9aa2af; }
.input-percentual input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.input-percentual-sufixo {
    display: flex;
    align-items: center;
    flex: none;
    background: var(--cinza-bg);
    color: #6b7280;
    font-size: 13px;
    padding: 0 8px;
    border-left: 1px solid var(--cinza-borda);
    border-radius: 0 6px 6px 0;
}

.simulador-pergunta { font-weight: 700; margin: 0 0 6px; color: var(--texto); }

.btn-link {
    background: none;
    border: none;
    color: var(--azul);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.btn-link:hover { color: var(--azul-escuro); }
.btn-remover { color: var(--vermelho); }
.btn-remover:hover { color: #7a2222; }

.campo-adicionar {
    border-top: 1px dashed var(--cinza-borda);
    margin-top: 6px;
    padding-top: 10px;
    gap: 10px;
}
.campo-adicionar input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 13px;
}
.campo-adicionar-oculto { display: none; }
.btn-mostrar-adicionar { margin-top: 10px; }

.fieldset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -4px 0 4px;
}
.fieldset-header legend { padding: 0; }

.campo-linha .nome-editavel {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--texto);
    padding: 0;
}
.nome-editavel:read-only { cursor: default; }
fieldset.editando .nome-editavel {
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    padding: 6px 8px;
    background: white;
}

.only-editing { display: none; }
fieldset.editando .only-editing { display: inline-block; }

.campo-linha-percentual {
    flex: none;
    width: 48px;
    text-align: right;
    font-size: 12px;
    color: #6b7280;
}

.card-valor-percentual { font-size: 14px; font-weight: 400; color: #6b7280; }

.card-subtotal { cursor: default; }
.card-subtotal .card-valor { font-size: 20px; }
.card-subtotal.card-destaque {
    background: var(--azul);
    border-color: var(--azul);
}
.card-subtotal.card-destaque .card-label { color: rgba(255, 255, 255, 0.85); }
.card-subtotal.card-destaque .card-valor { color: white; font-size: 24px; }

.campo-linha .input-nome-taxonomia {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 14px;
}
.campo-linha .input-ordem { width: 60px; flex: none; padding: 6px 8px; text-align: center; }
.checkbox-ativo { display: flex; align-items: center; margin: 0; font-weight: 400; }
.checkbox-ativo input { width: auto; }

.campo-linha-cabecalho {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cinza-borda);
}
.campo-linha-cabecalho .campo-acoes { gap: 10px; }
.campo-linha-cabecalho .campo-acoes span:nth-child(1) { width: 90px; }
.campo-linha-cabecalho .campo-acoes span:nth-child(2) { width: 60px; text-align: center; }
.campo-linha-cabecalho .campo-acoes span:nth-child(3) { width: 40px; }

.linha-inativa { opacity: 0.5; }

.campo-linha-grupo { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--cinza-borda); }
.input-nome-grupo { font-size: 17px; font-weight: 700; border: none; background: transparent; padding: 0; }
.input-nome-grupo:focus { outline: 1px solid var(--cinza-borda); border-radius: 4px; }

.tabela-produtos { width: 100%; border-collapse: collapse; background: white; }
.tabela-produtos th, .tabela-produtos td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cinza-borda);
    font-size: 14px;
}
.tabela-produtos input { width: 110px; }

.campo-percentual-valor { display: flex; align-items: center; gap: 6px; flex: none; }
.pct-input {
    width: 64px;
    flex: none;
    text-align: right;
    padding: 9px 8px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 15px;
}
.pct-sinal { color: #6b7280; font-size: 13px; flex: none; }
.tabela-porcat .input-moeda,
.tabela-porcat .campo-percentual-valor { width: auto; }
.tabela-porcat th, .tabela-porcat td { vertical-align: middle; }

.pct-input:disabled, .rs-espelho:disabled { background: var(--cinza-bg); color: #6b7280; }

.custo-variavel-item { margin-bottom: 2px; }
.detalhe-container {
    margin: 0 0 14px;
    padding: 4px 0 8px 18px;
    border-left: 2px solid var(--cinza-borda);
}
.detalhe-linha { gap: 10px; padding: 6px 0; }
.detalhe-nome, .detalhe-nome-secundario {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 14px;
}
.detalhe-nome-secundario { flex: 0 1 150px; }
.btn-add-detalhe { margin-top: 4px; }

.venda-categoria-item { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cinza-bg); }
.venda-categoria-item:last-of-type { border-bottom: none; }
.venda-categoria-cabecalho { padding: 10px 0; }
.venda-categoria-cabecalho legend { display: block; font-size: 16px; margin-bottom: 10px; }
.venda-categoria-cabecalho .campo-acoes { flex-wrap: wrap; row-gap: 10px; }
.venda-simples-campos { gap: 14px; }
.venda-simples-campos .input-moeda { width: auto; }
.venda-simples-campos .input-moeda-prefixo { font-size: 12px; white-space: nowrap; }
.tipo-recebimento-select { width: auto; padding: 8px 8px; font-size: 13px; }
.venda-qtde-wrapper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    background: white;
}
.venda-qtde-wrapper .input-moeda-prefixo { font-size: 12px; white-space: nowrap; border-radius: 6px 0 0 6px; }
.qtde-total-input {
    width: 70px;
    border: none;
    border-radius: 0 6px 6px 0;
    text-align: right;
    padding: 9px 10px;
    font-size: 15px;
}
.qtde-total-input:disabled { background: var(--cinza-bg); color: #6b7280; }

.tabela-scroll { overflow-x: auto; margin: 10px 0; }
.tabela-vendas-detalhe { min-width: 1100px; }
.tabela-vendas-detalhe th, .tabela-vendas-detalhe td { padding: 6px 8px; vertical-align: middle; }
.tabela-vendas-detalhe input, .tabela-vendas-detalhe select { width: 100px; font-size: 13px; padding: 6px 8px; }
.tabela-vendas-detalhe .detalhe-marca, .tabela-vendas-detalhe .detalhe-produto { width: 130px; }
.tabela-vendas-detalhe .detalhe-qtde { width: 70px; text-align: right; }
.tabela-vendas-detalhe .input-moeda { width: auto; }
.tabela-vendas-detalhe .input-moeda input { width: 90px; }
.tabela-vendas-detalhe .detalhe-total-custo, .tabela-vendas-detalhe .detalhe-total-venda {
    white-space: nowrap;
    font-weight: 600;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.card {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}
.card-destaque { border-color: var(--azul); border-width: 2px; }
.card-label { font-size: 13px; color: #6b7280; }
.card-valor { font-size: 24px; font-weight: 700; margin-top: 6px; }
.card-nota { display: block; font-size: 12px; color: #9aa2af; margin-top: 6px; line-height: 1.4; }

/* Lucro/prejuízo do mês — o número que o dono procura primeiro, então a cor
   carrega o veredito sem precisar ler. Ver modules/dashboard. */
.card-resultado { border-width: 2px; }
.card-lucro { border-color: var(--verde); }
.card-lucro .card-valor { color: var(--verde); }
.card-prejuizo { border-color: var(--vermelho); }
.card-prejuizo .card-valor { color: var(--vermelho); }
.card-prejuizo .card-valor::before { content: "− "; }
.card-resultado .card-nota a { color: #6b7280; }

/* nº de vendas do mês, no topo do form de Vendas (Modo Completo) */
.campo-vendas-mes {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    background: var(--cinza-bg); border: 1px solid var(--cinza-borda);
    border-radius: 6px; padding: 12px 14px; margin-bottom: 16px;
}
.campo-vendas-mes label { display: inline; font-weight: 600; font-size: 14px; margin: 0; }
.campo-vendas-mes input { width: 110px; }
.campo-vendas-mes .hint-inline { flex-basis: 100%; font-size: 12px; color: #6b7280; }
.card-sub { font-size: 13px; color: #6b7280; margin-top: 4px; }
.card-meta { max-width: 360px; }

.contador {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0;
    font-size: 15px;
}
.contador-ok { border-color: var(--verde); color: var(--verde); }

.aviso {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 20px;
}

.onboarding { text-align: center; padding: 40px 0; }
.onboarding-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}
.onboarding-card {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 24px;
    width: 260px;
    text-decoration: none;
    color: var(--texto);
    position: relative;
}
.onboarding-card:hover { border-color: var(--azul); }
.onboarding-card-disabled { opacity: 0.6; }
.badge {
    display: inline-block;
    background: var(--cinza-bg);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    margin-top: 8px;
}

.tabela-empresas { width: 100%; border-collapse: collapse; background: white; }
.tabela-empresas th, .tabela-empresas td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cinza-borda);
    font-size: 14px;
}
.status-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-ativo { background: #e5f6ec; color: var(--verde); }
.status-aviso_previo { background: #e8f0fe; color: var(--azul-escuro); }
.status-carencia { background: #fff4e0; color: #8a5a00; }
.status-pausado { background: #fbe9e9; color: var(--vermelho); }
.status-lancado { background: #e5f6ec; color: var(--verde); }
.status-faltando { background: var(--cinza-bg); color: #9aa2af; }
/* mês lançado no outro modo de uso (Rápido x Completo) — ver modules/historico */
.status-outro-modo { background: var(--cinza-bg); color: #6b7280; font-weight: 500; margin-left: 6px; }

.historico-linha-incompleta { background: #fffaf0; }
.historico-linha-incompleta td:first-child { border-left: 3px solid #d9a441; }

.upload-box {
    background: white;
    border: 2px dashed var(--cinza-borda);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
}

.tabela-dre { width: 100%; border-collapse: collapse; background: white; margin-top: 16px; table-layout: fixed; }
.tabela-dre th, .tabela-dre td { text-align: left; padding: 8px 10px; font-size: 14px; }
.tabela-dre thead th { border-bottom: 2px solid var(--cinza-borda); color: #6b7280; font-size: 12px; text-transform: uppercase; }
.dre-col-valor, .dre-col-pct { text-align: right; white-space: nowrap; }
.dre-col-valor { width: 160px; }
.dre-col-pct { width: 110px; color: #6b7280; }
.dre-total td { font-weight: 700; background: var(--cinza-bg); border-top: 1px solid var(--cinza-borda); border-bottom: 1px solid var(--cinza-borda); }
.dre-sub td { padding-left: 24px; color: #4b5563; border-bottom: 1px solid #f0f1f3; }
.dre-sub .dre-col-pct { color: #9aa2af; }
.dre-resultado td { font-weight: 700; background: #e8f0fe; border-top: 2px solid var(--azul); border-bottom: 2px solid var(--azul); color: var(--azul-escuro); }
.dre-resultado-final td { background: var(--azul); color: white; }
.dre-resultado-final.dre-negativo td { background: var(--vermelho); }
.dre-detalhe td { padding: 0 0 10px 24px; background: white; }
.dre-detalhe summary { cursor: pointer; font-size: 13px; color: var(--azul); padding: 6px 0; }
.tabela-dre-interna { width: 100%; border-collapse: collapse; margin-top: 4px; table-layout: fixed; }
.tabela-dre-interna td { padding: 4px 10px; font-size: 13px; color: #6b7280; border-bottom: 1px dotted var(--cinza-borda); }
.tabela-dre-interna td:first-child { padding-left: 12px; }

.dre-sub-titulo td { padding-left: 10px; font-weight: 600; color: var(--texto); background: transparent; border-bottom: none; padding-top: 14px; }
.dre-legenda { font-size: 12px; color: #9aa2af; font-weight: 400; }

/* Simulador de Cenário — unificado estilo DRE (08/2026): alavancas lado a lado
   e tabela comparativa Atual x Cenário com setas coloridas por linha. */
.simulador-alavancas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.simulador-alavancas form { flex: 1; min-width: 280px; background: white; border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 14px 16px; }
.simulador-alavancas fieldset { border: none; padding: 0; margin: 0 0 10px; }
.simulador-alavancas legend { font-weight: 700; padding: 0 0 8px; }
.simulador-salvar { border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 14px 16px; background: white; margin-top: 16px; }

.tabela-comparativo { width: 100%; border-collapse: collapse; background: white; table-layout: fixed; }
.tabela-comparativo th, .tabela-comparativo td { text-align: left; padding: 8px 10px; font-size: 14px; }
.tabela-comparativo thead th { border-bottom: 2px solid var(--cinza-borda); color: #6b7280; font-size: 12px; text-transform: uppercase; }
.tabela-comparativo .col-valor { width: 190px; }
.tabela-comparativo .col-delta { width: 165px; }
.tabela-comparativo .valor-pct { font-size: 12px; color: #6b7280; }

.linha-total td { font-weight: 700; background: var(--cinza-bg); border-top: 1px solid var(--cinza-borda); border-bottom: 1px solid var(--cinza-borda); }
.linha-resultado td { font-weight: 700; background: #e8f0fe; border-top: 2px solid var(--azul); border-bottom: 2px solid var(--azul); color: var(--azul-escuro); }
.linha-final td { font-weight: 700; background: var(--azul); color: white; }
.linha-final .valor-pct { color: rgba(255, 255, 255, 0.85); }
.linha-info td { color: #6b7280; font-style: italic; }
.linha-nivel-1 td:first-child { padding-left: 28px; color: #6b7280; font-weight: 400; }
.linha-nivel-2 td:first-child { padding-left: 46px; color: #9aa2af; font-size: 13px; font-weight: 400; }

/* Linhas que a simulação não alterou, recolhidas atrás de uma setinha — ver
   dre_comparativo.agrupar() e o script em templates/simulador/index.html */
.linha-toggle td { padding: 2px 10px 6px 28px; border: none; }
.btn-toggle-bloco {
    background: none; border: none; padding: 2px 0; cursor: pointer;
    font-size: 12.5px; color: #6b7280; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-toggle-bloco:hover { color: var(--azul); text-decoration: underline; }
.btn-toggle-bloco:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.toggle-seta { font-size: 10px; }
.linha-recolhida td { background: var(--cinza-bg); }

.seta { font-size: 13px; font-weight: 700; display: inline-block; }
.seta-boa { color: var(--verde); }
.seta-ruim { color: var(--vermelho); }
.seta-neutra {
    color: #6b7280;
    background: var(--cinza-bg);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
}
.delta-pct { font-size: 12px; margin-left: 2px; }
.delta-valor { font-size: 11px; margin-left: 4px; }
.delta-boa { color: var(--verde); }
.delta-ruim { color: var(--vermelho); }
.delta-neutra { color: #9aa2af; }

@media (max-width: 640px) {
    .simulador-alavancas { flex-direction: column; }
}
.dre-explicacao td {
    padding: 6px 10px 14px 24px;
    font-size: 13px;
    color: #6b7280;
    background: white;
    border-bottom: none;
    line-height: 1.5;
}
.dre-explicacao-resultado td { padding-left: 10px; background: #f7f9fc; }
.dre-nota { font-size: 13px; color: #6b7280; margin: 12px 0 20px; line-height: 1.5; }

.dre-periodo-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.dre-periodo-campo label { display: block; margin: 0 0 4px; }
.dre-periodo-campo input { margin: 0; }

/* Categoria de despesa já descontinuada pelo admin, mas que ainda tem valor
   lançado no mês exibido — continua aparecendo pra não sumir do histórico. */
.tag-descontinuada {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #8a6d1f;
    background: #fdf3d6;
    border: 1px solid #ecd9a0;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Aviso de consequência destrutiva — hoje usado na pré-visualização da
   importação, quando confirmar vai substituir vendas detalhadas. */
.aviso.aviso-atencao {
    background: #fdf3d6;
    border-color: #ecd9a0;
    color: #6b5310;
}
.aviso.aviso-atencao ul {
    margin: 8px 0 8px 20px;
}

.opcoes-modo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0;
    max-width: 760px;
}
.card-opcao-modo {
    cursor: pointer;
    gap: 8px;
}
.card-opcao-modo-cabecalho { display: flex; align-items: center; gap: 10px; }
.card-opcao-modo-cabecalho input[type="radio"] { flex-shrink: 0; margin: 0; width: 18px; height: 18px; }
.card-opcao-modo-selecionada { border-color: var(--azul); border-width: 2px; background: #f2f6fc; }
.card-opcao-modo-titulo { font-size: 16px; font-weight: 700; white-space: nowrap; }
.card-opcao-modo-texto { font-size: 13px; color: #6b7280; margin: 0; }
.opcoes-modo .btn { grid-column: 1 / -1; width: fit-content; }
/* só no onboarding (inicio=1): destaca o caminho curto sem desabilitar o outro */
.tag-recomendado {
    font-size: 11px; font-weight: 600; color: var(--verde);
    background: #e5f6ec; border-radius: 10px; padding: 2px 8px; white-space: nowrap;
}

.info-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}
.info-tooltip-icone {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 19px;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
}
.info-tooltip-conteudo {
    display: none;
    position: absolute;
    z-index: 30;
    top: 28px;
    left: -8px;
    width: min(300px, 80vw);
    background: #fff;
    color: #1f2937;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--azul);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.info-tooltip-conteudo::before,
.info-tooltip-conteudo::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 14px;
    border-style: solid;
    border-width: 0 7px 8px 7px;
}
.info-tooltip-conteudo::before { border-color: transparent transparent var(--azul) transparent; }
.info-tooltip-conteudo::after { border-color: transparent transparent #fff transparent; margin-bottom: -1px; }
.info-tooltip-conteudo-label {
    display: block;
    font-weight: 700;
    color: var(--azul);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.info-tooltip-conteudo a { color: var(--azul); }
.info-tooltip-conteudo p { margin: 0 0 8px; }
.info-tooltip-conteudo p:last-child { margin-bottom: 0; }
.info-tooltip:hover .info-tooltip-conteudo,
.info-tooltip.aberto .info-tooltip-conteudo {
    display: block;
}
.rotulo-editavel {
    font: inherit;
    font-weight: inherit;
    color: var(--texto);
    border: 1px dashed #94a3b8;
    border-radius: 4px;
    padding: 2px 6px;
    background: #fffbea;
    min-width: 220px;
}
.fpa-legenda { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.fpa-legenda-chip { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.fpa-chip-excelente { background: #e5f6ec; color: var(--verde); font-weight: 700; }
.fpa-chip-bom { background: #e8f0fe; color: var(--azul); }
.fpa-chip-atencao { background: #fdf3d6; color: #8a6d1f; }
.fpa-chip-critico { background: #fbe9e9; color: var(--vermelho); }

.corte-th-legenda { display: block; font-size: 11px; font-weight: 400; text-transform: none; color: #9aa2af; margin-top: 2px; }

.input-nome-fpa { min-width: 190px; }
/* indicador cuja faixa é o complemento de outro — ver indicadores_fpa.COMPLEMENTARES */
.fpa-derivado { display: block; font-size: 11px; color: #9aa2af; margin-top: 4px; }
.input-corte[readonly], .select-direcao[disabled] { background: var(--cinza-bg); color: #6b7280; cursor: not-allowed; }
.select-direcao { min-width: 140px; padding: 4px 6px; }

.fpa-linha-preview td { background: var(--cinza-bg); padding: 6px 12px 10px; border-bottom: 1px solid var(--cinza-borda); }
.fpa-preview-titulo { font-size: 12px; color: #6b7280; margin-right: 8px; }
.fpa-linha-preview .fpa-legenda-chip { margin-right: 6px; font-size: 12px; padding: 3px 10px; }
.fpa-acao-preview { margin-top: 6px; font-size: 12px; color: #6b7280; font-style: italic; }
.select-acao { min-width: 220px; max-width: 260px; }
.fpa-nova-acao { margin: 16px 0; padding: 12px 16px; background: white; border: 1px solid var(--cinza-borda); border-radius: 10px; }
.fpa-nova-acao .campo-linha { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.fpa-nova-acao input[type="text"] { flex: 1; }
.fpa-nova-acao textarea { flex: 1; width: auto; min-height: 60px; }

/* Editar/excluir ação recomendada já cadastrada — uma caixa só (não uma por
   ação, ver script no template) que atualiza conforme a seleção no combobox
   acima dela. Editar e excluir lado a lado; o botão Excluir usa formaction
   pra mandar pro endpoint de exclusão sem duplicar o campo oculto. */
.fpa-acao-linha { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.fpa-acao-linha textarea { flex: 1; width: auto; min-height: 60px; }
.fpa-acao-botoes { display: flex; flex-direction: column; gap: 6px; }

.input-corte {
    width: 70px;
    padding: 4px 6px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
}
.corte-excelente { background: #e5f6ec; border-color: #b7e3c6; color: #14532d; }
.corte-bom { background: #e8f0fe; border-color: #b7cef0; color: var(--azul-escuro); }
.corte-atencao { background: #fdf3d6; border-color: #ecd9a0; color: #6b5310; }

.dre-parecer {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--cinza-borda);
    font-weight: 600;
}
.dre-parecer-excelente { color: var(--verde); font-weight: 700; }
.dre-parecer-bom { color: var(--azul); }
.dre-parecer-atencao { color: #8a6d1f; }
.dre-parecer-critico { color: var(--vermelho); }

/* Farolzinho sempre visível ao lado do rótulo — dá o direcionamento antes
   mesmo de abrir o balão do consultor. É o mesmo emoji usado no balão
   (🟢 Excelente / 🔵 Bom / 🟡 Atenção / 🔴 Crítico), não um dot genérico —
   assim o farol e o parecer nunca podem "dizer coisas diferentes". */
.dre-farol {
    display: inline-block;
    font-size: 13px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Quadro-resumo no final do DRE — consolida as linhas em Atenção/Crítico com
   a ação recomendada, respondendo "por onde eu começo a atacar" depois de ver
   o resultado final (pedido do dono do produto). */
.resumo-consultor {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 20px;
}
.resumo-consultor-titulo { margin: 0 0 4px; font-size: 18px; }
/* Panorama geral de prejuízo (03/08/2026) — abre o resumo antes das linhas
   específicas, com o Ponto de Equilíbrio do período/mês. Fundo vermelho mais
   forte que .resumo-consultor-critico de propósito: é a mensagem mais
   importante da tela quando existe (o "porquê" antes do "onde"). */
.resumo-consultor-panorama {
    background: #fbe9e9;
    border: 1px solid var(--vermelho);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 12px 0 4px;
}
.resumo-consultor-panorama-texto { margin: 0; font-size: 14px; line-height: 1.5; color: #6b2020; }
.resumo-consultor-panorama-texto strong { color: var(--vermelho); }

/* "O que fazer com o lucro" (28/10/2026) — espelho do panorama de prejuízo, só que
   no azul: aqui o resultado é bom e o que o bloco faz é apontar a inconsistência
   (lucro todo mês e ainda antecipando, ou lucro sem destino). Reusa o box do
   panorama, trocando só a cor — a estrutura é a mesma e manter duas quase iguais
   seria mais um lugar pra divergir. Ver destinacao_lucro.py. */
.resumo-consultor-lucro .resumo-consultor-panorama {
    background: #eef3fb;
    border-color: var(--azul);
}
.resumo-consultor-lucro .resumo-consultor-panorama p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #1f3c6e; }
.resumo-consultor-lucro .resumo-consultor-panorama p:last-child { margin-bottom: 0; }
.resumo-consultor-lucro .resumo-consultor-panorama strong { color: var(--azul); }

.lucro-reparticao {
    margin: 14px 0 6px;
    padding: 0 0 0 20px;
    font-size: 14px;
    line-height: 1.8;
}
.lucro-nota p,
.lucro-prolabore p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.lucro-nota p:last-child,
.lucro-prolabore p:last-child { margin-bottom: 0; }
.lucro-nota { color: var(--texto-secundario, #667); margin-bottom: 10px; }
.lucro-prolabore {
    background: var(--cinza-bg);
    border-left: 3px solid var(--azul);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin: 12px 0 4px;
}

/* "O que mudou em relação ao mês anterior" — vem antes das faixas de mercado
   dentro do Resumo do consultor. Ver tendencia.py e modules/dre._montar_tendencia. */
.tendencia-bloco { margin: 16px 0 8px; }
.tendencia-titulo { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--texto); }
.tendencia-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border-radius: 6px; margin-bottom: 8px;
    border-left: 3px solid transparent; background: var(--cinza-bg);
}
.tendencia-piora { border-left-color: var(--vermelho); }
.tendencia-melhora { border-left-color: var(--verde); }
.tendencia-marcador { font-size: 13px; font-weight: 700; line-height: 1.5; }
.tendencia-piora .tendencia-marcador { color: var(--vermelho); }
.tendencia-melhora .tendencia-marcador { color: var(--verde); }
.tendencia-corpo { flex: 1; }
.tendencia-texto { margin: 0; font-size: 14px; line-height: 1.5; }
.tendencia-serie { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #6b7280; font-style: italic; }
.resumo-consultor-ok {
    color: var(--verde);
    font-weight: 600;
    background: #e5f6ec;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0 0;
}
.resumo-consultor-item {
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    border-left: 4px solid transparent;
}
.resumo-consultor-atencao { background: #fdf3d6; border-left-color: #d4a017; }
.resumo-consultor-critico { background: #fbe9e9; border-left-color: var(--vermelho); }
.resumo-consultor-item-cabecalho { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.resumo-consultor-zona {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .75;
}
.resumo-consultor-texto { margin: 6px 0 0; font-size: 13px; color: #4b5563; }
.resumo-consultor-acao { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--azul-escuro); }

/* Escala completa (4 faixas) no balão do consultor — separada visualmente do
   parecer acima (que é sobre o resultado da empresa); esta é a referência de
   mercado, fixa, então vem numa caixa com fundo e título próprios pra não
   misturar as duas coisas (preocupação do dono do produto). */
.dre-escala {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--cinza-bg);
    border-radius: 8px;
    font-weight: 400;
}
.dre-escala-titulo {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa2af;
    margin-bottom: 6px;
}
.dre-escala-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
}
.dre-escala-excelente { color: var(--verde); font-weight: 700; }
.dre-escala-bom { color: var(--azul); }
.dre-escala-atencao { color: #8a6d1f; }
.dre-escala-critico { color: var(--vermelho); }
.dre-escala-atual {
    font-weight: 700;
    background: white;
    border-radius: 6px;
    padding: 3px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.dre-escala-marcador {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--texto);
    opacity: .7;
    white-space: nowrap;
}
.campo-linha-rotulo-duplo { margin-bottom: 6px; }
.campo-linha-rotulo-duplo:last-of-type { margin-bottom: 0; }
.dre-rotulo-variante-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: inherit;
    opacity: .75;
    margin-right: 4px;
}
.info-tooltip-textarea {
    width: 220px;
    min-height: 100px;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
    resize: vertical;
    box-sizing: border-box;
}
.campo-linha-consultor {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 8px 0;
}
.campo-linha-consultor label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cinza-texto, #6b7280);
}
.textarea-consultor {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fffbea;
    resize: vertical;
    box-sizing: border-box;
}

/* Tela de admin "Tendência do Consultor" — ver modules/admin.tendencia */
.lista-variaveis { margin: 8px 0 4px 18px; padding: 0; font-size: 13px; line-height: 1.7; }
.lista-variaveis code {
    background: white; border: 1px solid var(--cinza-borda); border-radius: 3px;
    padding: 1px 5px; font-size: 12px;
}
.campo-inline { display: flex; flex-direction: column; gap: 4px; }
.campo-inline label { margin: 0; font-size: 13px; font-weight: 600; }
.campo-inline input[type="text"] { min-width: 200px; }

/* Gráfico do Histórico — SVG puro, geometria montada em modules/historico */
.grafico-historico {
    background: white; border: 1px solid var(--cinza-borda); border-radius: 8px;
    padding: 16px 18px; margin: 16px 0 24px;
}
.grafico-scroll { overflow-x: auto; }
.grafico-svg { width: 100%; min-width: 420px; height: auto; display: block; }
.barra-lucro { fill: var(--verde); }
.barra-prejuizo { fill: var(--vermelho); }
.grafico-rotulo { font-size: 10px; fill: #6b7280; text-anchor: middle; }
.grafico-legenda {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 12px; color: #6b7280; margin-bottom: 12px;
}
.legenda-marca { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; }
.legenda-lucro { background: var(--verde); }
.legenda-prejuizo { background: var(--vermelho); }
.legenda-pe { height: 0; border-top: 2px dashed #1f2937; border-radius: 0; width: 16px; vertical-align: 3px; }
.grafico-historico .hint { margin-top: 10px; }
.valor-lucro { color: var(--verde); font-weight: 600; }
.valor-prejuizo { color: var(--vermelho); font-weight: 600; }

/* Aviso de lançamento pendente do mês — ver app.injetar_lancamento_pendente */
.banner-lancamento-pendente { background: #e8f0fe; color: var(--azul-escuro); }

/* Lista de empresas que não lançaram o mês — ver modules/admin.index */
.lista-pendentes { margin: 8px 0 0 18px; padding: 0; font-size: 14px; line-height: 1.8; }

/* Conversão de modo de um mês — ver conversao_modo.py */
.aviso-modo-mes { border-left: 4px solid var(--azul); }
.aviso-modo-mes form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aviso-modo-mes .btn { margin-top: 8px; }
.aviso-meta-conversao { border-left: 4px solid var(--verde); }
.meta-falta { color: var(--vermelho); }
.meta-ok { color: var(--verde); }
.form-trocar-modo { display: inline; }
.btn-link-tabela {
    background: none; border: none; padding: 0; margin-left: 8px;
    color: var(--azul); font-size: 12px; font-family: inherit;
    cursor: pointer; text-decoration: underline;
}
.btn-link-tabela:hover { color: var(--azul-escuro); }
.celula-modo { white-space: nowrap; }

/* Tela de Lançamentos — botão "Detalhar" por linha e o bloco que ele abre */
.btn-detalhar {
    background: white; border: 1px solid var(--azul); color: var(--azul);
    border-radius: 6px; padding: 5px 12px; font-size: 13px; font-family: inherit;
    cursor: pointer; white-space: nowrap; flex: none;
}
.btn-detalhar:hover { background: var(--cinza-bg); }
.btn-detalhar-ativo { background: var(--azul); color: white; border-color: var(--azul); }
/* O cadeado agora e um link pra pagina do plano, nao um botao morto: continua
   apagado (nao compete com o Detalhar liberado), mas clica e tem destino. */
.btn-detalhar-travado {
    border-color: var(--cinza-borda); color: #9aa2af;
    display: inline-block; text-decoration: none; cursor: pointer;
}
.btn-detalhar-travado:hover { border-color: var(--azul); color: var(--azul); background: white; }
.detalhar-seta { font-size: 10px; }
.bloco-detalhe {
    background: var(--cinza-bg); border: 1px solid var(--cinza-borda);
    border-radius: 6px; padding: 12px 14px; margin: 0 0 12px 0;
}
.tabela-detalhe { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-detalhe th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; padding: 4px 8px; border-bottom: 1px solid var(--cinza-borda);
}
.tabela-detalhe td { padding: 6px 8px; border-bottom: 1px solid #e8ebef; }
.tabela-detalhe tr:last-child td { border-bottom: none; }
.tabela-detalhe .col-num { text-align: right; white-space: nowrap; }
.calculado-de { font-size: 12px; color: #6b7280; font-style: italic; }
.tabela-editavel input[type="text"], .tabela-editavel input[type="number"], .tabela-editavel select {
    width: 100%; padding: 4px 6px; font-size: 13px;
}
.tabela-editavel .input-moeda { width: 100%; }
.tabela-linhas, .tabela-linhas-cv { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.tabela-linhas th, .tabela-linhas-cv th { font-size: 10px; text-transform: uppercase; color: #6b7280; padding: 3px 5px; text-align: left; }
.tabela-linhas td, .tabela-linhas-cv td { padding: 3px 5px; }
.tabela-linhas input, .tabela-linhas select, .tabela-linhas-cv input { width: 100%; padding: 3px 5px; font-size: 12px; }
.linhas-categoria.oculto { display: none; }
.linhas-categoria > td { background: white; padding: 10px 12px; }
.btn-abrir-linhas { background: none; border: none; color: var(--azul); font-size: 12px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.btn-abrir-linhas:hover { text-decoration: underline; }
.btn-remover-linha { background: none; border: none; color: var(--vermelho); font-size: 15px; cursor: pointer; line-height: 1; }
.btn-add-linha, .btn-add-item-cv { margin-top: 0; padding: 4px 10px; font-size: 12px; }
.consultor-gancho {
    display: block; margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--cinza-borda); color: var(--azul-escuro); font-size: 13px;
}
.detalhar-travado-wrapper { display: inline-block; cursor: help; }
.campo-parcelas[hidden] { display: none; }
/* Alinhamento dos campos de valor dentro dos blocos de detalhe */
.tabela-detalhe td:not(:first-child) { text-align: right; }
.tabela-detalhe td .input-moeda { width: 170px; margin-left: auto; }
.tabela-detalhe th:not(:first-child) { text-align: right; }
.tabela-linhas td, .tabela-linhas-cv td { text-align: left; }
.tabela-linhas td .input-moeda, .tabela-linhas-cv td .input-moeda { width: 100%; margin-left: 0; }
.btn-mais-linha { margin-right: 6px; }
.campo-parcelas-cat { width: 52px; margin-left: 6px; }
.campo-parcelas-cat[hidden] { display: none; }
.btn-voltar-fechado { margin-top: 10px; margin-left: 8px; font-size: 12px; padding: 4px 10px; }
/* Saída do detalhamento, ao lado do botão Detalhar. Discreto de propósito: é
   destrutivo, então não compete visualmente com o Detalhar — mas está onde a
   pessoa procura quando desiste, que é a própria linha do valor. */
.btn-descartar-detalhe {
    background: none; border: none; color: #6b7280; cursor: pointer;
    font-family: inherit; font-size: 11px; text-decoration: underline;
    padding: 2px 0; margin-left: 8px; flex: none; white-space: nowrap;
}
.btn-descartar-detalhe:hover { color: var(--vermelho); }
#btn-mais-cv { margin-top: 12px; }


/* Duas perguntas na mesma linha: "quantas vendas" (campo curto, à esquerda) e
   "faturamento total" — que continua com o campo alinhado à direita, na mesma
   coluna dos outros valores da tela. Sem isso a quantidade gastaria uma linha
   inteira pra um número de três dígitos. */
.grupo-rotulos { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.campo-linha .grupo-rotulos label { flex: none; }
.campo-linha .grupo-rotulos .qtde-vendas { width: 72px; flex: none; }

/* Fieldset tem min-width intrínseco: uma tabela larga dentro dele empurrava o card
   pra fora dos 960px do container e a página inteira saía do centro (o cabeçalho
   ficava alinhado e o conteúdo, deslocado pra direita). Com min-width:0 o
   .tabela-scroll volta a fazer o seu papel e a tabela rola dentro do card. */
fieldset { min-width: 0; }

/* Linha sem botão "Detalhar" reserva o espaço dele, senão o campo de valor dessa
   linha avança pra direita e desalinha da coluna de valores das outras. */
.detalhar-espaco {
    flex: none; width: 104px; text-align: right;
    font-size: 11px; color: #6b7280; line-height: 1.2;
}
/* Largura fixa pros três estados do botão ("Detalhar", "Detalhado", "🔒 Detalhar"):
   sem isso a coluna de valores se desloca conforme o rótulo muda. */
.btn-detalhar { min-width: 104px; box-sizing: border-box; }

/* Contagem, não dinheiro: sem a setinha de incremento do type=number (ninguém vai
   clicar cem vezes pra informar cem vendas) — os campos são type=text com
   inputmode numérico, e esta regra cobre qualquer type=number que reste. */
.qtde-input, .campo-parcelas { text-align: right; }
.qtde-input::-webkit-outer-spin-button, .qtde-input::-webkit-inner-spin-button,
.campo-parcelas::-webkit-outer-spin-button, .campo-parcelas::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.qtde-input, .campo-parcelas { -moz-appearance: textfield; }

/* O <fieldset> que desliga os campos de um bloco fechado não pode aparecer */
.campos-detalhe { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Tabela de vendas em Lançamentos — a marca vem visível desde o primeiro clique
   em Detalhar; não existe mais um segundo botão pra revelar coluna. */
/* O bloco de Vendas tem 9 colunas — cada pixel de moldura sai da largura útil */
#bloco-vendas { padding: 10px 6px; }

/* :not(:first-child) pra vencer as regras genéricas de .tabela-detalhe, que
   alinham tudo à direita — aqui a coluna e o campo precisam começar no mesmo x. */
.tabela-vendas th, .tabela-vendas td,
.tabela-vendas th:not(:first-child), .tabela-vendas td:not(:first-child) {
    text-align: left; vertical-align: middle; padding: 6px 4px;
}
.tabela-vendas th { padding-left: 4px; padding-right: 4px; }
.tabela-vendas .col-nome { line-height: 1.25; }
.tabela-vendas input, .tabela-vendas select { font-size: 13px; }

/* Larguras explícitas: `.tabela-editavel input[type=text]` manda width:100% com
   especificidade maior que uma classe sozinha, então sem `min-width` a coluna
   ficava com o que sobrasse. O min-width é o que de fato reserva a coluna. */
.tabela-vendas td .input-moeda { width: 130px; min-width: 130px; margin-left: 0; }
.tabela-vendas td .input-moeda input { padding: 7px 6px; }
.tabela-vendas .input-moeda-prefixo { padding: 0 6px; font-size: 12px; }

/* Realce da linha em edição: com a tela inteira de campos iguais, o cliente perde
   de vista em qual linha está digitando. A linha ativa fica em evidência e as
   outras recuam — é orientação visual, não decoração. */
.bloco-detalhe tbody tr.linha-ativa > td { background: #eef4ff; }
.bloco-detalhe tbody tr.linha-ativa .col-nome { font-weight: 600; color: var(--azul-escuro); }
/* O esmaecimento vai nas CÉLULAS, não na linha: com border-collapse (que todas as
   tabelas daqui usam) o navegador ignora opacity aplicada a <tr>. */
.bloco-detalhe.tem-linha-ativa tbody tr:not(.linha-ativa) > td { opacity: .5; }
.bloco-detalhe tbody tr > td { transition: opacity .12s ease, background .12s ease; }
/* O mesmo para os blocos que não são tabela (linha de custo variável) */
.custo-variavel-item.linha-ativa { background: #eef4ff; border-radius: 6px; }
.col-nome-repetido { color: #9aa2af; font-size: 12px; padding-left: 20px !important; }
/* Recebimento e "em quantas vezes" lado a lado — o campo de parcelas caía embaixo */
.tabela-vendas .col-receb { white-space: nowrap; text-align: left; }
.tabela-vendas td.col-receb select { width: 118px; display: inline-block; padding: 7px 6px; }

/* "Você disse X, na nota deu Y" — o confronto entre a crença e o documento.
   Fica logo abaixo da linha, não dentro de um balão: é a resposta imediata a ter
   detalhado, e é o que faz o cliente sentir que o trabalho pagou. */
.confronto {
    margin: -2px 0 10px; padding: 8px 12px; font-size: 13px; line-height: 1.5;
    border-radius: 6px; border-left: 3px solid;
}
.confronto-icone { font-weight: 700; margin-right: 4px; }
/* Subiu = custo maior / faturamento maior do que ele contava. A cor é do ALERTA,
   não da direção: quem lê isso está descobrindo que a conta dele estava otimista. */
.confronto-alta { background: #fdf3f2; border-color: var(--vermelho); color: #7d2b26; }
.confronto-baixa { background: #f1f8f4; border-color: var(--verde); color: #1f5b39; }
.confronto-neutro { background: #eef4ff; border-color: var(--azul); color: var(--azul-escuro); }

/* "+ adicionar" inline no fim de cada bloco de detalhe */
.add-inline { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.add-inline input { flex: 1 1 auto; max-width: 340px; font-size: 13px; padding: 7px 8px; }
.tabela-vendas .col-acoes { white-space: nowrap; text-align: right; }
.btn-mais-linha {
    background: none; border: none; color: var(--azul); cursor: pointer;
    font-size: 11px; line-height: 1.2; font-weight: 600; font-family: inherit;
    padding: 0 2px; margin-left: 4px; white-space: nowrap;
}
.btn-mais-linha:hover { color: var(--azul-escuro); text-decoration: underline; }
.linha-detalhe td { background: #fbfcfd; }
.select-formas-modelo { display: none; }

/* Par % / R$ dos custos variáveis: os dois lados são editáveis e um recalcula o
   outro. Mesma estrutura da tela antiga de Custos Variáveis, de propósito. */
.campo-linha .campo-percentual-valor .input-moeda { width: 150px; }
.tabela-linhas-cv td { text-align: left; }
.tabela-linhas-cv .campo-percentual-valor { justify-content: flex-end; }
.tabela-linhas-cv .input-moeda { width: 150px; margin-left: 0; }

/* Boas-vindas: o consultor é a lógica central do produto, então o card dele abre a
   tela e se distingue dos demais. */
.card-consultor { border-left: 4px solid var(--azul); background: #f7faff; }
.plano-preco { font-size: 26px; font-weight: 700; color: var(--azul-escuro); margin: 14px 0 10px; }
.plano-preco span { font-size: 14px; font-weight: 400; color: #6b7280; }
.plano-preco-anual { display: block; margin-top: 2px; }
/* "De R$ 59,90 por R$ 49,90": so aparece quando a empresa tem preco proprio
   (04/11/2026). O riscado e o que faz o desconto ser SENTIDO -- um preco menor,
   sozinho, nao diz que ele e um desconto. */
.plano-preco .preco-de {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
    text-decoration-color: #9aa2af;
}

/* ---------------------------------------------------------------------------
   Tela de entrada (26/10/2026). Pagina publica: quem chega aqui veio de um link
   de grupo de WhatsApp e nao conhece a ferramenta nem quem a oferece. Coluna
   estreita e muito respiro de proposito -- e texto pra ler, nao painel pra usar.
   --------------------------------------------------------------------------- */
.landing { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; }

.landing-hero { text-align: center; padding-bottom: 12px; }
.landing-hero h1 {
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--azul-escuro);
}
.landing-chamada { font-size: 18px; line-height: 1.5; color: var(--texto); }
.landing-chamada p { margin: 0 0 12px; }
.landing-apoio { font-size: 13px; color: #6b7280; margin: 10px 0 0; }

.btn-grande { font-size: 16px; padding: 14px 28px; margin-top: 20px; }

.landing-bloco {
    background: white;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 24px 28px;
    margin-top: 24px;
}
.landing-bloco h2 { margin: 0 0 14px; font-size: 19px; color: var(--azul-escuro); }
.landing-texto { line-height: 1.6; }
.landing-texto p { margin: 0 0 12px; }
.landing-texto p:last-child { margin-bottom: 0; }

.landing-lista { margin: 0 0 18px; padding-left: 22px; line-height: 1.6; }
.landing-lista li { margin-bottom: 8px; }

/* "Por que e de graca" e a secao que responde ao "qual e a pegadinha?" de um
   grupo de classificado -- por isso ela e a unica destacada da pagina. */
.landing-destaque { border-left: 4px solid var(--azul); background: #f8fafc; }

.landing-discreto { background: transparent; border: none; padding: 4px 28px; }
.landing-discreto .landing-texto { font-size: 13px; color: #6b7280; }

.landing-fechamento { text-align: center; margin-top: 36px; }

@media (max-width: 600px) {
    .landing { padding: 32px 16px 64px; }
    .landing-hero h1 { font-size: 27px; }
    .landing-bloco { padding: 20px; }
    .landing-discreto { padding: 4px 20px; }
}

/* Manual de telas em "Como funciona" (26/10/2026). Cada bloco e um LINK pra tela que
   ele descreve -- manual que so descreve obriga o cliente a procurar a tela depois. */
.secao-manual { margin: 34px 0 14px; font-size: 20px; color: var(--azul-escuro); }
.card-manual {
    display: block; text-decoration: none; color: inherit;
    transition: border-color .12s, transform .12s;
}
.card-manual:hover { border-color: var(--azul); transform: translateY(-1px); }
.card-manual h3 { margin: 0 0 8px; font-size: 17px; color: var(--azul-escuro); }
.card-manual p { margin: 0 0 8px; }
.card-manual p:last-child { margin-bottom: 0; }
.manual-seta { color: var(--azul); font-size: 15px; }

/* Encadeamento entre telas (26/10/2026): cada tela aponta pra proxima na ordem da
   historia, pra o cliente nao terminar uma e voltar pro menu procurar o que fazer. */
/* O botao vem sozinho: ele mesmo diz o que a proxima tela faz, entao nao ha
   pergunta ao lado (e por isso centralizado, nao space-between). */
.proxima-tela {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    flex-wrap: wrap; margin: 32px 0 8px; padding: 18px 22px;
    background: white; border: 1px solid var(--cinza-borda); border-radius: 10px;
}
.proxima-tela span { color: #6b7280; font-size: 14px; }
.proximo-passo { margin-bottom: 24px; }

/* Salvar + Analise do Consultor lado a lado, nos dois Salvar da tela de
   Lancamentos. Salvar fica primario e a Analise secundaria de proposito: quem
   ainda nao salvou nao pode ser puxado pra fora da tela por um botao igualmente
   chamativo. */
.acoes-lancamento {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 16px 0 8px;
}
/* A margem e a altura passam a ser do container, nao de cada botao: <button> usa
   line-height do navegador e <a> herda a da pagina, e o secundario ainda tem
   borda -- lado a lado isso deixava um 5px mais alto que o outro. */
.acoes-lancamento .btn {
    margin-top: 0; line-height: 20px; border: 1px solid transparent;
}
.acoes-lancamento .btn-secundario { border-color: var(--azul); }
.grafico-valor { font-size: 11px; font-weight: 600; fill: #374151; text-anchor: middle; }

/* Tabela comparativa do Dashboard: o percentual embaixo do valor, discreto, porque
   e ele que responde "o que mudou de um mes pro outro". */
.tabela-comparativo-mes td { white-space: nowrap; }
.celula-pct { display: block; font-size: 11px; color: #6b7280; }
.valor-positivo { color: var(--verde); font-weight: 600; }
.valor-negativo { color: var(--vermelho); font-weight: 600; }

/* Cartoes do Dashboard um pouco menores (26/10/2026, a pedido do dono): o valor
   gigante empurrava a tabela comparativa pra fora da primeira tela. */
.cards-compactos .card-valor { font-size: 22px; }
.cards-compactos .card-destaque .card-valor,
.cards-compactos .card-resultado .card-valor { font-size: 25px; }

/* Estado do mes em Lancamentos e a zona de apagar (26/10/2026). */
.estado-mes { font-size: 13px; padding: 6px 12px; border-radius: 6px; align-self: flex-end; }
.estado-lancado { background: #e8f5ec; color: var(--verde); }
.estado-vazio { background: var(--cinza-bg); color: #6b7280; }

/* Fechada por padrao: apagar nao pode estar a um clique de distancia. */
.zona-perigo {
    margin-top: 40px; padding: 14px 18px;
    border: 1px solid var(--cinza-borda); border-radius: 10px; background: white;
}
.zona-perigo summary { cursor: pointer; color: var(--vermelho); font-size: 14px; font-weight: 600; }
.zona-perigo p { font-size: 13px; color: #6b7280; margin: 12px 0; }
.btn-perigo { background: var(--vermelho); }
.btn-perigo:hover { background: #8f2626; }

/* Sugestoes do consultor no Simulador (26/10/2026): a ponte entre o veredito da
   Analise e as alavancas. Fica ANTES dos campos porque e ela que os preenche. */
.sugestoes-consultor { border-left: 4px solid var(--azul); margin-bottom: 20px; }
.sugestoes-consultor h2 { margin: 0 0 8px; font-size: 18px; color: var(--azul-escuro); }
.sugestoes-consultor > p { margin: 0 0 12px; }
.tabela-sugestoes { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.tabela-sugestoes td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--cinza-bg); vertical-align: top; font-size: 14px; }
.tabela-sugestoes tr:last-child td { border-bottom: none; }
.sugestao-nome { font-weight: 600; white-space: nowrap; }
.sugestao-hoje { color: #6b7280; white-space: nowrap; }
/* Mesma regra do par Salvar/Analise em Lancamentos: a margem e a altura sao do
   container, senao <button> e <a> com a mesma classe saem com alturas diferentes. */
.sugestao-ressalva { font-size: 13px; color: #6b7280; margin: 0 0 10px; }
.acoes-sugestao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.acoes-sugestao .btn { margin-top: 0; line-height: 20px; border: 1px solid transparent; }
.acoes-sugestao .btn-secundario { border-color: var(--azul); }
.sugestao-aviso { font-size: 13px; color: var(--vermelho); }

@media (max-width: 700px) {
    .tabela-sugestoes td { display: block; padding: 2px 0; border: none; }
    .tabela-sugestoes tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--cinza-bg); }
    .sugestao-nome, .sugestao-hoje { white-space: normal; }
}

/* Faixas empilhadas do grafico (26/10/2026): a barra do mes repartida em para
   onde o faturamento foi. Cores validadas para daltonismo e contraste contra o
   fundo claro -- trocar uma delas pede rodar o validador de novo. */
.faixa-cmv { fill: #2455a4; }
.faixa-cv { fill: #1a9a8f; }
.faixa-cartao { fill: #c77b2a; }
.faixa-fixa { fill: #7a4fbf; }
.faixa-lucro { fill: #1f8a4c; }
.faixa-prejuizo { fill: #b83232; }
.faixa:hover { opacity: .82; }
/* Anel branco porque o ponto cai EM CIMA da barra: escuro sobre o roxo da despesa
   fixa ele praticamente sumia. */
.marco-pe { fill: #1f2937; stroke: #ffffff; stroke-width: 2; }

.legenda-cmv { background: #2455a4; }
.legenda-cv { background: #1a9a8f; }
.legenda-cartao { background: #c77b2a; }
.legenda-fixa { background: #7a4fbf; }

/* Cartoes do Dashboard: TODOS com a mesma borda (27/10/2026). Antes o ponto de
   equilibrio vinha com borda azul grossa, o lucro com borda verde/vermelha e o
   resto com a borda fina padrao -- lado a lado parecia descuido, nao hierarquia.
   O veredito do lucro continua na COR DO NUMERO, que e onde o olho vai primeiro.
   Escopado em .cards-compactos de proposito: .card-destaque e .card-resultado
   seguem como estao nas outras telas (subtotais de Despesas, por exemplo). */
.cards-compactos .card,
.cards-compactos .card-destaque,
.cards-compactos .card-resultado {
    border: 2px solid var(--cinza-borda-forte);
}
/* Quadradinho que liga o cartao a sua faixa no grafico logo abaixo: o mesmo
   movimento de ler a legenda. */
.card-marca { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: 0; margin-right: 6px; }

/* "Por onde eu comecaria" (27/10/2026): cada problema traz as rotas que funcionam
   pra ele, com o percentual editavel e o "onde isso te deixa" ao vivo. */
.sugestao-problema { border-top: 1px solid var(--cinza-bg); padding: 12px 0 6px; }
.sugestao-problema:first-of-type { border-top: none; }
.sugestao-cabecalho { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; cursor: pointer; font-weight: 400; }
.sugestao-cabecalho input { margin: 0; width: 16px; height: 16px; flex-shrink: 0; }
.sugestao-titulo { font-weight: 700; }
.sugestao-numeros { font-size: 13px; color: #6b7280; }
.sugestao-rota {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 8px 0 0 24px; font-size: 14px; font-weight: 400; cursor: pointer;
}
.sugestao-rota input[type="radio"] { margin: 0; flex-shrink: 0; }
.sugestao-rota-texto { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sugestao-rota .input-percentual { margin: 0; }
.sugestao-rota .sug-pct { width: 76px; font-size: 13px; text-align: right; }
.sug-resultado { font-size: 13px; font-weight: 600; }
.sug-resultado-excelente { color: var(--verde); }
.sug-resultado-bom { color: var(--azul); }
.sug-resultado-atencao { color: #a16207; }
.sug-resultado-critico { color: var(--vermelho); }
/* Ressalva da rota e o "nao adianta": o consultor explicando, nao avisando. */
.sugestao-ressalva-rota { font-size: 12px; color: #9aa2af; flex-basis: 100%; margin-left: 24px; }
.sugestao-nao-ajuda { font-size: 12.5px; color: #6b7280; margin: 8px 0 0 24px; font-style: italic; }
.sugestao-nao-fecha { font-size: 12px; color: #6b7280; flex-basis: 100%; margin: 4px 0 0 24px; }
.sugestao-impossivel {
    font-size: 13px; color: var(--vermelho); margin: 8px 0 0 24px;
    background: #fdf2f2; border-left: 3px solid var(--vermelho); padding: 8px 10px; border-radius: 4px;
}

/* Cadeado de "nao se mexe neste mes" nas telas de Template do admin. */
.checkbox-rigido { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-size: 13px; opacity: .55; }
.checkbox-rigido:hover { opacity: 1; }
.checkbox-rigido input { margin: 0; }

/* Raio-X por marca na Analise do Consultor (27/10/2026). */
.card-marcas-travado { border-style: dashed; }
.card-destaque-marca { border-left: 4px solid var(--azul); margin-bottom: 16px; }
.card-destaque-marca p { margin: 0 0 8px; }
.card-destaque-marca p:last-child { margin-bottom: 0; }
.tabela-marcas td:not(:first-child), .tabela-marcas th:not(:first-child) { text-align: right; }

/* Diagnostico em R$ na frente do percentual: "voce pagou R$ 20.000" se julga
   contra a realidade; "corte 73,9%" soa como ordem impossivel. */
.sugestao-diagnostico { margin: 6px 0 0 24px; font-size: 14px; }
.sugestao-acao { margin: 6px 0 0 24px; font-size: 13px; color: var(--azul-escuro); }
.sugestao-ajuda {
    margin: 10px 0 0 24px; font-size: 13px; color: #6b7280;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sugestao-ajuda .btn { margin-top: 0; line-height: 20px; border: 1px solid var(--azul); }
/* Pedido de ajuda da linha que NAO assusta: link, nao botao. O gesto precisa
   estar disponivel em toda linha sem competir com o Detalhar nem transformar
   a tela num funil. */
.sugestao-ajuda-leve { margin: 8px 0 0 24px; font-size: 13px; }
/* padding vertical so pra dar area de toque no celular: o link de 18px era um
   alvo fino demais pra o dedo, e e justamente no celular que ele e usado. */
.sugestao-ajuda-leve a { color: var(--azul); text-decoration: none;
    border-bottom: 1px dotted var(--azul); display: inline-block; padding: 8px 0; }
.sugestao-ajuda-leve a:hover { border-bottom-style: solid; }

/* O objetivo do mes no topo do bloco do consultor: e ele que da alvo ao numero
   grande. A cor acompanha a urgencia, nao o humor. */
.objetivo-consultor {
    background: var(--cinza-bg); border-left: 4px solid var(--azul);
    border-radius: 6px; padding: 12px 14px; margin: 12px 0 16px;
}
.objetivo-prejuizo { border-left-color: var(--vermelho); background: #fdf2f2; }
.objetivo-otimizar { border-left-color: var(--verde); background: #f2f9f5; }
.objetivo-situacao { margin: 0; font-size: 15px; }
.objetivo-escada { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.objetivo-escada li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.degrau-nome { color: #6b7280; }
.degrau-falta { font-size: 14px; }
.objetivo-folga { margin: 10px 0 0; font-size: 13px; color: #6b7280; }

/* Segundo termometro da linha (o do LUCRO) e o total do que esta marcado. */
.sug-lucro { font-size: 12.5px; font-weight: 600; flex-basis: 100%; margin-left: 24px; }
.sugestao-total {
    margin: 14px 0 0; padding: 10px 12px; font-size: 14px; font-weight: 600;
    background: var(--cinza-bg); border-radius: 6px;
}
.sugestao-total:empty { display: none; }

.chip-lucro { font-weight: 700; white-space: nowrap; }
.sug-lucro-neutro { color: #6b7280; font-weight: 400; }

/* O consultor fechando a conversa em cima do cenario simulado. */
.parecer-cenario { border-left: 4px solid var(--azul); margin: 20px 0; }
.parecer-cenario h2 { margin: 0 0 10px; font-size: 18px; color: var(--azul-escuro); }
.parecer-cenario p { margin: 0 0 10px; }
.parecer-cenario-ajuda { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.parecer-cenario-ajuda .btn { margin-top: 0; line-height: 20px; border: 1px solid transparent; }

/* ---------------------------------------------------------------------------
   Calculadora de Preco de Venda (29/10/2026).
   --------------------------------------------------------------------------- */

/* A ressalva de "ferramenta de apoio" vem ANTES de qualquer numero: o preco que
   sai daqui e uma base, e quem sabe se ela cabe em cada mercadoria e o dono. */
.aviso-apoio {
    background: #eef4fd; border: 1px solid #c9dcf7; border-radius: 10px;
    padding: 12px 16px; margin: 0 0 20px; color: var(--azul-escuro); font-size: 14px;
}
.aviso-apoio p { margin: 0 0 8px; }
.aviso-apoio p:last-child { margin-bottom: 0; }

.consultor-leitura { color: var(--azul-escuro); font-weight: 500; }

/* A escala de referencia dentro do balao: as 4 faixas do indicador, pra o cliente
   saber o que e saudavel ANTES de preencher o campo. Uma por linha porque o que
   se le aqui e a lista inteira, nao uma frase. */
.consultor-escala {
    display: block;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--cinza-bg);
    font-size: 12px;
}
.consultor-escala-item { display: block; color: #4b5563; }
.consultor-escala-item strong { color: #1f2937; }

/* O campo de percentual da despesa fixa, irmao dos dois de R$. */
.df-par .input-percentual { width: 92px; }

.tabela-ficha { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.tabela-ficha th {
    font-size: 10px; text-transform: uppercase; color: #6b7280;
    padding: 4px 6px; text-align: left; font-weight: 600;
}
.tabela-ficha td { padding: 4px 6px; }
.tabela-ficha .col-valor-ficha { width: 150px; }
.tabela-ficha .col-acoes { width: 28px; text-align: right; }

/* O subtotal que fecha cada bloco (CMV, soma dos percentuais). Nao e um campo:
   e o numero que os campos acima produzem. */
.linha-subtotal {
    margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--cinza-bg);
    font-size: 14px; color: var(--texto); text-align: right;
}

/* Despesa fixa entra como DOIS valores em R$ (o que ela custa e sobre qual
   faturamento), nunca como percentual: o dono sabe o que paga, nao o que isso
   representa. O percentual e a SAIDA desta linha. */
.campo-df { align-items: flex-start; }
.df-campos { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: flex-end; }
.df-par { display: flex; flex-direction: column; gap: 3px; }
.df-rotulo { font-size: 11px; color: #6b7280; }
.df-par .input-moeda { width: 150px; }
.df-resultado { font-size: 14px; white-space: nowrap; padding-bottom: 9px; }

/* O titulo de cada passo DENTRO do card, nao em cima da borda (pedido do dono,
   04/11/2026). Legend, por padrao do HTML, recorta a borda do fieldset e fica
   meio dentro meio fora; com float ela volta a ser um bloco normal dentro do
   card. Escopado na calculadora de proposito: mexer no `legend` global mudaria
   Lancamentos, Despesas, Vendas e as telas de admin de uma vez. */
.calc-bloco { padding-top: 0; }
.calc-bloco > legend {
    float: left;
    width: 100%;
    padding: 16px 0 10px;
    margin: 0;
    border-bottom: 1px solid var(--cinza-bg);
}
.calc-bloco > legend + * { clear: both; }

/* O farol de FP&A ao lado do campo: mesmo chip da Analise do Consultor, com a
   leitura em texto miudo embaixo. Alinhado a direita porque acompanha o campo,
   nao o rotulo. */
.campo-com-farol { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.farol-campo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.farol-campo:empty { display: none; }
.farol-campo .fpa-legenda-chip { font-size: 12px; padding: 2px 10px; }
/* 12px, nao 11: a 11 o "+" entre os dois percentuais era lido como "-" no print
   do dono, invertendo o sentido da frase. Hoje a nota nao usa mais sinal nenhum
   (ver `farol()`), e o tamanho continua por legibilidade. */
.farol-nota { font-size: 12px; color: #6b7280; }
/* Na despesa fixa o farol ocupa a linha inteira embaixo dos dois campos de R$ --
   ao lado deles a linha estoura a largura do card. */
.df-campos .farol-campo { flex-basis: 100%; }

.tabela-composicao { margin-bottom: 20px; }

/* Bloco em que o consultor fala em cima do preco calculado. Mesma moldura do
   parecer do cenario no Simulador, pra o cliente reconhecer a voz. */
.card-consultor-bloco { border-left: 4px solid var(--azul); margin: 20px 0; }
.card-consultor-bloco h3 { margin: 0 0 8px; font-size: 16px; color: var(--azul-escuro); }
.card-consultor-bloco p { margin: 0 0 8px; }
.card-consultor-bloco p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    /* No celular o rotulo em cima e os campos embaixo: lado a lado, as duas caixas
       de R$ mais o "= 17% do preco" nao cabem e a linha estoura pra fora. */
    .campo-df { flex-direction: column; align-items: stretch; }
    .df-campos { justify-content: flex-start; }
    .df-par, .df-par .input-moeda { width: 100%; }
}

/* A escolha entre as duas calculadoras (03/11/2026). A tela abre SEM nenhuma
   aberta: dois cartoes grandes. Depois de escolher, eles viram uma barra de abas —
   trocar de calculadora custa um clique, e repetir "qual das duas?" no topo de uma
   tela que ja respondeu e ruido. */
.escolha-calculadora { display: flex; gap: 16px; flex-wrap: wrap; margin: 22px 0 10px; }
.card-escolha {
    flex: 1 1 260px;
    text-decoration: none;
    color: inherit;
    border: 2px solid var(--cinza-borda-forte);
    transition: border-color .15s ease, transform .15s ease;
}
.card-escolha:hover { border-color: var(--azul); transform: translateY(-2px); }
.card-escolha-titulo {
    font-size: 18px; font-weight: 700; color: var(--azul-escuro); margin-bottom: 6px;
}
.card-escolha p { margin: 0; font-size: 14px; color: #6b7280; }

.abas-calculadora {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 20px 0 24px; border-bottom: 2px solid var(--cinza-bg);
}
.aba-calculadora {
    padding: 10px 18px; text-decoration: none;
    font-size: 15px; font-weight: 600; color: #6b7280;
    /* -2px pra a borda da aba ativa cobrir a borda do proprio <nav> */
    border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.aba-calculadora:hover { color: var(--azul-escuro); }
.aba-ativa { color: var(--azul-escuro); border-bottom-color: var(--azul); }

/* Campo de codigo de convite. Caixa alta e espacamento entre letras porque o codigo
   e lido numa mensagem de WhatsApp e conferido caractere por caractere. O alfabeto
   nao tem O/0 nem I/1 (ver convites.ALFABETO), mas o espacamento ainda ajuda. */
.input-codigo {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    max-width: 240px;
}

/* Cartao de cada codigo de convite, na tela do admin. Alinhado a esquerda porque e
   leitura, nao indicador: .card centraliza, e aqui dentro tem tabela e formulario. */
.card-convite {
    text-align: left;
    margin-bottom: 14px;
}

.card-convite.convite-inativo { opacity: 0.6; }

.convite-codigo {
    margin: 0;
    font-size: 22px;
    letter-spacing: 3px;
}

/* O link pronto pro WhatsApp. Largo porque ele e copiado inteiro, e monoespacado
   pra conferir o codigo no fim dele sem precisar selecionar. */
.link-pronto {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    background: var(--cinza-bg);
}


/* ---------------------------------------------------------------------------
   Planos: os tres lado a lado (05/11/2026)
   --------------------------------------------------------------------------- */

/* auto-fit + minmax faz a quebra sozinho: 3 colunas no desktop, 2 no tablet e 1
   no celular, sem media query pra cada degrau. 240px e o ponto em que o rotulo
   de recurso mais longo ainda cabe em duas linhas. */
.planos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 20px 0 28px;
    align-items: start;
}

.plano-card {
    position: relative;
    background: white;
    border: 2px solid var(--cinza-borda-forte);
    border-radius: 12px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
}

/* O card do meio e o que o dono esta vendendo, entao ele e o unico que recebe a
   cor da marca. O selo e editavel (planos_selo_destaque) e some quando o texto
   fica vazio -- selo que afirma algo que nao se mede e pior que selo nenhum. */
.plano-card-destaque { border-color: var(--azul); }
.plano-card-ativo { border-color: var(--verde); }

.plano-selo {
    position: absolute;
    top: -11px;
    left: 18px;
    background: var(--azul);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.plano-card-ativo .plano-selo { background: var(--verde); }

.plano-nome {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--azul-escuro);
}
.plano-resumo {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
    min-height: 39px;
}

/* Irmao de .plano-preco, nao o proprio: aquele e o preco solto de uma tela de
   texto, este vive dentro de um card estreito e divide espaco com o botao. */
.plano-valor {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 700;
    color: var(--texto);
    line-height: 1.2;
}
.plano-valor span { font-size: 13px; font-weight: 400; color: #6b7280; }
.plano-valor .preco-de {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
    text-decoration-color: #9aa2af;
}

/* Altura reservada pro bloco do botao: sem ela, um card com botao e outro com
   so uma frase deixam as listas de recurso comecando em alturas diferentes, e
   a comparacao linha a linha -- que e a razao da tela -- se perde. */
.plano-acao {
    min-height: 58px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.plano-acao .btn-grande {
    margin-top: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 12px 16px;
}
.plano-atual {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}
.plano-atual-ok { color: var(--verde); }

.plano-recursos {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--cinza-borda);
}
.plano-recursos li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    padding: 5px 0;
}
.recurso-marca { font-weight: 700; flex-shrink: 0; }
.recurso-tem .recurso-marca { color: var(--verde); }
.recurso-nao .recurso-marca { color: var(--vermelho); }
/* A linha que o plano NAO tem continua legivel, so recuada: ela e metade da
   comparacao. Apagar demais faz o cliente ler so os certinhos. */
.recurso-nao { color: #9aa2af; }

.plano-rodape {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

/* So pra leitor de tela: o simbolo e aria-hidden, entao "incluido"/"nao incluido"
   precisa existir em texto. Sem isso a lista inteira soa igual em audio. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}