/*
 * BOX Propostas — a mesma linguagem dos outros BOX (fundo claro, menu tingido, superfícies brancas,
 * cantos arredondados, Nunito nos títulos e Plus Jakarta Sans no texto), com as cores da marca da
 * proposta. Ao trocar a marca, <html data-marca> troca a paleta inteira.
 */

/* ───────── Tokens ───────── */
:root,
[data-marca="contabilfarma"] {
  --roxo: #3c1053;
  --roxo-2: #2b0a3d;
  --ameixa: #963cbd;
  --menta: #48d597;
  /* verde para texto sobre branco (contraste 5,5:1) */
  --menta-texto: #18774d;
  --nevoa: #f7f3fa;
  --menu: #eee5f4;
  --lavanda: #e3d8ea;
  /* borda de campos: ao menos 3:1 sobre branco */
  --borda-campo: #8a7898;
  --tinta: #2a2230;
  --tinta-suave: #6a5f75;

  --box-frente: var(--roxo);
  --box-borda: var(--roxo-2);
  --box-fundo: #1e0729;
  --box-visto: var(--menta);
  --regua-1: var(--ameixa);
  --regua-2: var(--menta);
  --regua-3: #d9c6e6;
}

[data-marca="contabilgestao"] {
  --roxo: #340250;
  --roxo-2: #240138;
  --ameixa: #480ca8;
  --menta: #00f496;
  --menta-texto: #00794a;
  --nevoa: #f5f2f9;
  --menu: #ebe5f4;
  --lavanda: #dcd3e8;
  --borda-campo: #857a99;
  --tinta: #240f33;
  --tinta-suave: #5e5470;
  --box-fundo: #17012a;
  --regua-3: #cbbde4;
}

:root {
  --ambar: #ffc24b;
  --erro: #b3261e;
  --erro-claro: #fdeceb;
  --f-titulo: "Nunito", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-texto: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --raio: 12px;
  --raio-grande: 20px;
}

/* ───────── Base ───────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nevoa);
  color: var(--tinta);
  font: 15px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s;
}

/* Títulos e números: Nunito, de pontas arredondadas, em peso médio-alto, como nos outros BOX */
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin: 0; color: var(--roxo); }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .4; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--ameixa); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--lavanda); }

.sutil { color: var(--tinta-suave); font-size: 14px; }
.rotulo { display: block; font-size: 13px; font-weight: 700; color: var(--tinta-suave); margin-bottom: 8px; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--raio);
  background: var(--roxo); color: #fff; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ───────── Estrutura: menu lateral + conteúdo ───────── */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 26px 18px 22px; background: var(--menu); border-right: 1px solid var(--lavanda);
  transition: background-color .3s;
}

.marca { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.marca-logo { display: grid; flex: none; }
.marca-texto { display: grid; line-height: 1; }
.marca-nome { font: 800 26px/1 var(--f-titulo); letter-spacing: .08em; color: var(--roxo); }
.marca-sub { margin-top: 3px; font: 600 14px/1 var(--f-titulo); letter-spacing: .04em; color: var(--menta-texto); }

.regua { display: flex; gap: 3px; padding: 0 6px; margin-top: -8px; }
.regua span { height: 3px; flex: 1; border-radius: 99px; background: var(--regua-1); }
.regua span:nth-child(2) { background: var(--regua-2); }
.regua span:nth-child(3) { background: var(--regua-3); }

.menu-abas { display: grid; gap: 4px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: var(--raio);
  background: transparent; color: var(--tinta-suave); font-weight: 600; font-size: 14px; text-align: left;
  user-select: none;
}
.menu-item svg { width: 20px; height: 20px; flex: none; }
.menu-item:hover { background: rgb(255 255 255 / .55); color: var(--roxo-2); }
.menu-item[aria-current="page"] { background: #fff; color: var(--roxo-2); box-shadow: 0 1px 2px rgb(43 10 61 / .08); }
.menu-item[aria-current="page"] svg { color: var(--ameixa); }

.etapas-menu { list-style: none; margin: 2px 0 10px; padding: 0 0 0 22px; display: grid; gap: 2px; }
#aba-calculadora:not([aria-current]) + .etapas-menu { display: none; }
.etapas-menu a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
  color: var(--tinta-suave); text-decoration: none; font-size: 14px; font-weight: 600;
}
.etapas-menu a:hover { background: rgb(255 255 255 / .55); color: var(--roxo-2); }
.marcador {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--borda-campo); font: 800 11px/1 var(--f-titulo); color: var(--tinta-suave); background: #fff;
}
/* etapa completa: o número vira um visto verde */
.etapas-menu a[data-feito="true"] .marcador,
.etapa[data-feito="true"] .etapa-num { background: var(--menta); border-color: var(--menta); color: transparent; position: relative; }
.etapas-menu a[data-feito="true"] .marcador::after,
.etapa[data-feito="true"] .etapa-num::after {
  content: ""; position: absolute; width: 38%; height: 20%; border: solid var(--roxo-2); border-width: 0 0 2.5px 2.5px;
  transform: translateY(-15%) rotate(-45deg);
}

/* Rodapé do menu: hora de Brasília e quem está usando, como nos outros BOX */
.rodape-lateral {
  margin: auto -18px -22px; padding: 16px 18px 20px; display: grid; gap: 14px; border-top: 1px solid var(--lavanda);
}
.relogio { font-size: 12px; line-height: 1.45; color: var(--tinta-suave); }
.relogio-hora { display: flex; align-items: center; gap: 6px; }
.relogio-hora svg { width: 14px; height: 14px; flex: none; }
.relogio-hora strong { font-weight: 500; font-size: 12.5px; color: var(--roxo); }
.relogio-fonte { margin-top: 2px; }
.relogio-fonte.alerta { color: #7a4a00; }
.usuario-atual { display: grid; gap: 12px; }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa-texto { min-width: 0; }
.pessoa-nome { font-size: 14px; font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-perfil { font-size: 12px; color: var(--tinta-suave); }
.avatar {
  display: inline-grid; place-items: center; width: var(--tamanho); height: var(--tamanho); flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--menta) 28%, #fff); color: var(--roxo-2); font-weight: 600;
  font-size: calc(var(--tamanho) * .4);
}
.botao-sair { width: 100%; min-height: 38px; background: #fff; }
.modo-local { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--raio); background: #fff8e6; border: 1px solid #f6d58a; color: #7a4a00; font-size: 12.5px; line-height: 1.45; }

main { padding: 34px 40px 120px; min-width: 0; }
.tela { max-width: 1240px; }

.cabecalho-tela {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px;
}
.cabecalho-tela .sutil { margin-top: 6px; font-size: 15px; max-width: 60ch; }

/* ───────── Botões ───────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--roxo); border-radius: var(--raio); background: var(--roxo); color: #fff;
  font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background-color .15s, border-color .15s, transform .1s;
}
.botao:hover { background: var(--roxo-2); border-color: var(--roxo-2); }
.botao:active { transform: translateY(1px); }
.botao.fantasma { background: transparent; color: var(--roxo); border-color: var(--lavanda); }
.botao.fantasma:hover { background: #fff; border-color: var(--borda-campo); }
.botao.pequeno { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.botao svg { width: 20px; height: 20px; }

.link {
  border: 0; background: transparent; padding: 8px 4px; color: var(--ameixa); font-weight: 700; font-size: 14px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s;
}
.link:hover { text-decoration-color: currentColor; }

.icone {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 10px;
  background: transparent; color: var(--tinta-suave);
}
.icone svg { width: 20px; height: 20px; }
.icone:hover:not(:disabled) { background: var(--erro-claro); color: var(--erro); }

/* ───────── Campos ───────── */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.entrada {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: #fff;
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio); transition: border-color .15s, box-shadow .15s;
}
.entrada:focus-within { border-color: var(--ameixa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ameixa) 22%, transparent); }
.entrada em { font-style: normal; font-weight: 600; color: var(--tinta-suave); }
.entrada input, .entrada select {
  flex: 1; width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: 500 16px var(--f-texto); color: var(--tinta);
}
.entrada input::placeholder { color: #a99fb2; font-weight: 400; }
.entrada input:disabled { color: var(--tinta-suave); }

/* ───────── Escolhas (chips) ───────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 38px; padding: 8px 14px;
  border: 1.5px solid var(--lavanda); border-radius: 99px; background: #fff; color: var(--tinta);
  font-size: 14px; font-weight: 600; line-height: 1.2; transition: border-color .15s, background-color .15s;
}
.chip small { color: var(--tinta-suave); font-weight: 600; font-size: 12px; }
.chip:hover { border-color: var(--borda-campo); }
.chip[aria-pressed="true"] { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.chip[aria-pressed="true"] small { color: var(--menta); }
.grupo-escolha + .grupo-escolha, .linha-perfil + .grupo-escolha { margin-top: 18px; }

/* ───────── Etapas da proposta ───────── */
.grade-proposta { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 28px; align-items: start; }
.etapas { display: grid; gap: 18px; min-width: 0; }

.etapa {
  background: #fff; border: 1px solid var(--lavanda); border-radius: var(--raio-grande); padding: 26px 28px 28px;
  scroll-margin-top: 20px;
}
.etapa-topo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.etapa-topo .sutil { margin-top: 3px; }
.etapa-num {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--roxo); color: #fff; font: 700 16px/1 var(--f-titulo); transition: background-color .25s;
}
.etapa > .campo + .escolha-marca, .etapa > .grupo-escolha + .linha-campos { margin-top: 22px; }

.linha-campos, .linha-vendedor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.linha-vendedor .campo:first-child { grid-column: 1 / -1; }
.sufixo { order: 2; }

/* Marca: duas opções grandes com o logo de cada uma */
.escolha-marca { border: 0; margin: 0; padding: 0; min-width: 0; }
.escolha-marca legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.opcoes-marca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opcao-marca {
  display: grid; gap: 10px; justify-items: start; padding: 16px 18px; text-align: left; background: #fff;
  border: 1.5px solid var(--lavanda); border-radius: 16px; transition: border-color .15s, box-shadow .15s;
}
.opcao-marca:hover { border-color: var(--borda-campo); }
.opcao-marca img { height: 26px; width: auto; max-width: 100%; }
.opcao-marca span { font-size: 13.5px; color: var(--tinta-suave); }
.opcao-marca[aria-pressed="true"] {
  border-color: var(--roxo); box-shadow: inset 0 0 0 1.5px var(--roxo), 0 6px 18px -10px var(--roxo);
}
.opcao-marca[aria-pressed="true"] span::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--menta);
  vertical-align: 1px;
}

/* Plano: cada nível com o que ele entrega */
.chips-plano { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chips-plano .chip {
  display: grid; gap: 2px; justify-items: start; border-radius: 14px; padding: 12px 14px; text-align: left; min-height: 0;
}
.chips-plano .chip b { font: 700 16px/1.2 var(--f-titulo); }
.chips-plano .chip .resumo-plano { font-size: 12.5px; font-weight: 500; color: var(--tinta-suave); }
.chips-plano .chip[aria-pressed="true"] .resumo-plano { color: #e8dcf0; }

/* Empresas */
.lista-empresas { display: grid; gap: 14px; }
.empresa {
  position: relative; padding: 18px 20px 16px; background: var(--nevoa); border: 1px solid var(--lavanda);
  border-radius: 16px;
}
.empresa-topo { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.numero {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none; margin-bottom: 8px; border-radius: 9px;
  background: var(--roxo); color: #fff; font: 700 14px/1 var(--f-titulo);
}
.linha-dados { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; flex: 1; min-width: 0; }
.empresa-topo .icone { margin-bottom: 4px; }

.alternar { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 16px; cursor: pointer; font-size: 14px; font-weight: 600; }
.alternar input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--roxo); }
.alternar small { color: var(--tinta-suave); font-weight: 500; font-size: 13px; }

.campo-select { max-width: 280px; }
.campo-select + .grupo-escolha { margin-top: 18px; }

.linha-perfil { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.bloco-faturamento { flex: 1 1 300px; display: grid; gap: 10px; min-width: 0; }
.bloco-funcionarios { display: grid; gap: 6px; align-content: start; }
.bloco-funcionarios .rotulo { margin: 0; }
.atalhos .chip { min-height: 30px; padding: 4px 11px; font-size: 13px; }

.contador {
  display: flex; align-items: center; height: 46px; padding: 0 5px; background: #fff;
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio);
}
.contador button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; font-size: 20px; font-weight: 700; color: var(--roxo); }
.contador button:hover { background: var(--nevoa); }
.contador input { width: 52px; border: 0; outline: 0; background: transparent; text-align: center; font: 700 17px var(--f-titulo); color: var(--tinta); }

.bloco-personalizado {
  display: grid; gap: 6px; padding: 14px; border-radius: var(--raio); background: #fff; border: 1.5px dashed var(--ameixa);
}
.bloco-personalizado .sutil { font-size: 13px; }

.empresa-rodape { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--borda-campo); }
.empresa-valor { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.empresa-valor > span { color: var(--tinta-suave); font-size: 14px; font-weight: 600; }
.empresa-valor strong { font: 700 22px/1.1 var(--f-titulo); color: var(--roxo); font-variant-numeric: tabular-nums; }
.empresa-valor.parcial { font-size: 14px; margin-bottom: 4px; }
.empresa-valor.parcial span:last-child { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empresa-valor + .empresa-valor:not(.parcial) { margin-top: 6px; }
.empresa-rodape details { margin-top: 8px; }
.empresa-rodape summary { width: fit-content; cursor: pointer; color: var(--ameixa); font-size: 13.5px; font-weight: 700; }

.memoria { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.memoria th, .memoria td { padding: 7px 0; border-bottom: 1px solid var(--lavanda); vertical-align: top; }
.memoria th { text-align: left; font-weight: 600; }
.memoria th small { display: block; color: var(--tinta-suave); font-weight: 400; font-size: 12px; }
.memoria td { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.memoria .total th, .memoria .total td { font-weight: 700; }
.memoria .final th, .memoria .final td { border-bottom: 0; font-weight: 800; color: var(--roxo); }

.botao-adicionar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 14px;
  border: 1.5px dashed var(--borda-campo); border-radius: 16px; background: transparent; color: var(--roxo);
  font-weight: 700; font-size: 15px; transition: background-color .15s, border-color .15s;
}
.botao-adicionar svg { width: 20px; height: 20px; }
.botao-adicionar:hover { background: var(--nevoa); border-color: var(--roxo); }

/* Final da proposta (etapa 4) */
.final-proposta {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--raio); background: var(--nevoa); font-size: 14px;
}
.final-proposta .rotulo { margin-bottom: 6px; }
.final-proposta p { margin-bottom: 6px; }
.final-proposta .nome-marca { margin: 10px 0 4px; font-weight: 800; color: var(--roxo); }
.redes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.redes span { display: inline-block; min-width: 82px; color: var(--tinta-suave); }

/* ───────── Painel do investimento ───────── */
.painel {
  position: sticky; top: 24px; display: grid; gap: 18px; padding: 24px 22px 20px; border-radius: 24px;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--ameixa) 45%, transparent), transparent 60%),
    linear-gradient(165deg, var(--roxo), var(--roxo-2));
  color: #fff; box-shadow: 0 24px 50px -28px var(--roxo-2);
  /* nunca desce até o canto do Boxy; com muitas empresas, rola por dentro */
  max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .3) transparent;
}
.painel-rotulo { font: 700 14px/1.3 var(--f-texto); color: #dccfe6; }
.valor-final {
  margin-top: 4px; font: 700 42px/1 var(--f-titulo); letter-spacing: -.01em; color: var(--menta);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.valor-final.a-definir { font-size: 30px; color: var(--ambar); }

.pendencias {
  padding: 12px 14px; border-radius: var(--raio); background: rgb(255 194 75 / .12); border: 1px solid rgb(255 194 75 / .45);
  color: #ffe6b0; font-size: 13.5px;
}
.pendencias ul { margin: 6px 0 0; padding-left: 18px; }

.resumo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.resumo th, .resumo td { padding: 9px 0; border-bottom: 1px solid rgb(255 255 255 / .12); vertical-align: top; }
.resumo th { text-align: left; font-weight: 700; color: #fff; }
.resumo th small { display: block; margin-top: 2px; color: #cbb9d8; font-weight: 400; font-size: 12px; line-height: 1.45; }
.resumo td { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; color: #fff; }
.resumo .total th, .resumo .total td { color: #e9def1; font-weight: 600; }
.resumo .gratuita td { color: #cbb9d8; }
.resumo .final th, .resumo .final td { border-bottom: 0; padding-top: 12px; font: 700 16px var(--f-titulo); color: var(--menta); }

.botao-gerar {
  width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--menta); color: var(--roxo-2);
  font: 700 17px var(--f-texto);
}
.botao-gerar:hover { background: #fff; color: var(--roxo-2); }
.painel-acoes { display: grid; gap: 2px; justify-items: start; }
.link-claro {
  border: 0; background: transparent; padding: 6px 0; color: #dccfe6; font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: 3px;
}
.link-claro:hover { color: #fff; text-decoration-color: #fff; }
.painel :focus-visible { outline-color: var(--menta); }

/* Barra do total: só no celular */
.barra-total { display: none; }

/* ───────── Avisos ───────── */
.aviso {
  margin-bottom: 18px; padding: 12px 16px; border-radius: var(--raio); font-size: 14px;
  background: #fff8e6; color: #7a4a00; border: 1px solid #f6d58a;
}
.aviso.erro { background: var(--erro-claro); color: var(--erro); border-color: #f4c2bf; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

/* ───────── Tabelas de preço ───────── */
.acoes-tabelas { display: flex; flex-wrap: wrap; gap: 8px; }
.tabelas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.bloco { background: #fff; border: 1px solid var(--lavanda); border-radius: var(--raio-grande); padding: 24px 24px 20px; min-width: 0; }
.bloco > .sutil { margin: 4px 0 18px; }
.bloco-largo { grid-column: 1 / -1; }

.editor-faixas, .editor-pacotes { display: grid; gap: 10px; }
#faixas-faturamento { max-width: 760px; }
.linha-faixa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 38px; gap: 8px; align-items: end; }
.linha-nivel { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 38px; gap: 8px; align-items: end; }
.editor-faixas .entrada, .editor-pacotes .entrada, .grade-multiplicadores .entrada { height: 42px; padding: 0 12px; }
.editor-faixas .entrada input, .editor-pacotes .entrada input, .grade-multiplicadores .entrada input { font-size: 15px; }
/* o nome da coluna aparece só na primeira linha (continua lido por leitores de tela nas outras) */
.linha-faixa:not(:first-child) .campo > span,
.linha-nivel:not(:first-of-type) .campo > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.editor-faixas > .link, .editor-pacotes > .link, .coluna-multiplicador > .link { justify-self: start; }

.grade-multiplicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.coluna-multiplicador { display: grid; gap: 10px; align-content: start; }
.coluna-multiplicador h3 { margin-bottom: 4px; }

.grade-marcas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 32px; }
.coluna-marca { display: grid; gap: 10px; }
.coluna-marca h3 { color: var(--roxo); }

.regra ol { margin: 0 0 12px; padding-left: 20px; }
.regra li { margin-bottom: 6px; }

/* ───────── Janela da proposta gerada ───────── */
.janela-proposta {
  width: min(1100px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 22px; box-shadow: 0 30px 80px rgb(20 4 30 / .35); color: var(--tinta);
}
.janela-proposta[open] { display: flex; flex-direction: column; animation: janela-entra .2s cubic-bezier(.2, .9, .3, 1); }
.janela-proposta::backdrop { background: rgb(30 7 41 / .55); }
.janela-topo { display: flex; justify-content: space-between; gap: 16px; padding: 22px 26px 12px; }
.janela-topo .sutil { margin-top: 4px; }
.avisos-proposta { padding: 0 26px; }
.avisos-proposta .aviso { margin-bottom: 10px; }
#previa-proposta { flex: 1; min-height: 0; width: 100%; border: 0; border-block: 1px solid var(--lavanda); background: #d9d4df; }
.janela-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 26px; }
@keyframes janela-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* ───────── Boxy, o gatinho da meta ───────── */
.mascote {
  position: fixed; right: 18px; bottom: 14px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; pointer-events: none;
}
.mascote-cena { position: relative; width: 132px; height: 102px; }
.mascote-cena svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mascote-area { position: absolute; pointer-events: auto; border: 0; border-radius: 18px; background: transparent; padding: 0; }
.gato-fora { left: 14%; width: 40%; top: 20%; bottom: 2%; }
.gato-dentro { left: 59%; width: 38%; top: 20%; height: 43%; }
.area-caixa { left: 57%; width: 42%; top: 63%; bottom: 3%; }
.mascote-chamar {
  display: grid; place-items: center; width: 48px; height: 48px; pointer-events: auto; border-radius: 50%;
  border: 1.5px solid var(--lavanda); background: #fff; box-shadow: 0 6px 18px -8px var(--roxo-2); transition: transform .15s;
}
.mascote-chamar:hover { transform: scale(1.06); }
.mascote-fala { max-width: 280px; }
.balao {
  pointer-events: auto; position: relative; padding: 14px 16px; border-radius: 18px 18px 6px 18px; background: #fff;
  border: 1.5px solid var(--lavanda); box-shadow: 0 16px 36px -18px var(--roxo-2); color: var(--roxo-2);
  font-size: 14px; line-height: 1.5; transform-origin: bottom right; animation: balao-entra .17s cubic-bezier(.2, .9, .3, 1) both;
}
.balao-saindo { animation: balao-sai .14s ease-in both; }
.balao-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.balao-esconder {
  margin-top: 8px; padding: 0; border: 0; background: none; color: var(--tinta-suave); font-size: 12.5px; text-decoration: underline;
}
.balao-esconder:hover { color: var(--roxo-2); }
@keyframes balao-entra { from { opacity: 0; transform: scale(.95) translateY(4px); } }
@keyframes balao-sai { to { opacity: 0; transform: scale(.97) translateY(2px); } }

.boxy { --extra: var(--ameixa); }
.boxy .x { fill: var(--extra); }
.boxy .xb { fill: var(--ambar); stroke: var(--roxo-2); stroke-width: 1.2px; }
.boxy-olhos { transform-box: fill-box; transform-origin: center; animation: boxy-pisca 5s infinite; }
.boxy-rabo { transform-box: fill-box; transform-origin: 100% 100%; animation: boxy-rabo-lento 4s ease-in-out infinite; }
.boxy-orelha { transform-box: fill-box; }
.boxy-orelha-e { transform-origin: 85% 100%; }
.boxy-orelha-d { transform-origin: 15% 100%; }
.boxy-feliz .boxy-rabo { animation: boxy-rabo-feliz .5s ease-in-out infinite; }
.boxy-feliz .boxy-orelha-e { animation: boxy-orelha-e .7s ease-in-out; }
.boxy-feliz .boxy-orelha-d { animation: boxy-orelha-d .7s ease-in-out .15s; }
.boxy-corpo { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.boxy-pulo { animation: boxy-pulo .5s ease-out; }
.boxy-festa { animation: boxy-pulo .9s ease-out infinite; }
.boxy-pontos circle { animation: boxy-ponto 1.8s infinite; }
.boxy-pontos circle:nth-child(2) { animation-delay: .25s; }
.boxy-pontos circle:nth-child(3) { animation-delay: .5s; }
.boxy-exclama { transform-box: fill-box; transform-origin: 50% 100%; animation: boxy-balanca .9s ease-in-out infinite; }
.boxy-confete > * { transform-box: fill-box; transform-origin: center; animation: boxy-gira 3.6s linear infinite; }
.boxy-confete > *:nth-child(even) { animation-direction: reverse; animation-duration: 4.4s; }

@keyframes boxy-pisca { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
@keyframes boxy-rabo-lento { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes boxy-rabo-feliz { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes boxy-orelha-e { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-10deg); } }
@keyframes boxy-orelha-d { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(10deg); } }
@keyframes boxy-pulo { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-18px); } }
@keyframes boxy-ponto { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes boxy-balanca { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes boxy-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ───────── Entrada: login, carregando, sem acesso ───────── */
.tela-entrada { display: none; }
body:not([data-sessao="ativa"]):not([data-sessao="local"]) .app,
body:not([data-sessao="ativa"]):not([data-sessao="local"]) .barra-total,
body:not([data-sessao="ativa"]):not([data-sessao="local"]) .mascote { display: none !important; }
body:not([data-sessao="ativa"]):not([data-sessao="local"]) .tela-entrada {
  display: grid; place-items: center; min-height: 100vh; padding: 24px 16px 140px;
  background: radial-gradient(90% 60% at 50% 0%, var(--menu), transparent 70%), var(--nevoa);
}
.entrada-cartao {
  width: min(420px, 100%); padding: 32px 30px 28px; background: #fff; border: 1px solid var(--lavanda);
  border-radius: 24px; box-shadow: 0 30px 60px -40px var(--roxo-2);
}
.marca-entrada { padding: 0; }
.entrada-cartao .regua { padding: 0; margin: 16px 0 22px; }
.entrada-cartao h1 { font-size: 24px; margin-bottom: 16px; }
.form-entrada { display: grid; gap: 14px; }
.form-entrada .botao { width: 100%; min-height: 48px; margin-top: 4px; }
.entrada-texto { color: var(--tinta-suave); margin-bottom: 16px; }
.entrada-nota { margin-top: 16px; font-size: 13px; color: var(--tinta-suave); }
.erro-texto { color: var(--erro); font-size: 14px; font-weight: 600; }

/* ───────── Tabelas: quem só pode ver ───────── */
fieldset.tabelas { border: 0; margin: 0; padding: 0; min-width: 0; }
.estado-tabelas {
  display: flex; align-items: center; gap: 8px; margin: -10px 0 18px; font-size: 13.5px; color: var(--tinta-suave);
}
.estado-tabelas:empty { display: none; }
.estado-tabelas::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--menta); }
.estado-tabelas[data-situacao="salvando"]::before, .estado-tabelas[data-situacao="local"]::before { background: var(--ambar); }
.estado-tabelas[data-situacao="invalida"]::before, .estado-tabelas[data-situacao="falha"]::before { background: var(--erro); }
.estado-tabelas[data-situacao="leitura"]::before { background: var(--borda-campo); }
[data-somente-leitura="true"] .so-quem-edita,
[data-somente-leitura="true"] #editores-tabelas .link,
[data-somente-leitura="true"] #editores-tabelas .icone { display: none; }
[data-somente-leitura="true"] .linha-faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-somente-leitura="true"] .linha-nivel { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
#editores-tabelas:disabled .entrada { background: var(--nevoa); border-color: var(--lavanda); }
#editores-tabelas:disabled .entrada input { color: var(--tinta); -webkit-text-fill-color: var(--tinta); }

/* ───────── Usuários ───────── */
.form-usuario { display: grid; gap: 14px; }
.form-usuario .botao { justify-self: start; }
.erro-campo { color: var(--erro); font-size: 12.5px; font-weight: 600; }
.erro-campo:empty { display: none; }
.escolha-perfil { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.escolha-perfil legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.opcao-perfil {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--lavanda); border-radius: var(--raio);
  cursor: pointer; font-size: 13.5px; color: var(--tinta-suave);
}
.opcao-perfil strong { display: block; color: var(--tinta); font-size: 14px; }
.opcao-perfil input { margin-top: 3px; accent-color: var(--roxo); }
.opcao-perfil:has(input:checked) { border-color: var(--roxo); background: var(--nevoa); }
.lista-equipe, .lista-eventos { list-style: none; margin: 0; padding: 0; }
.membro {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 176px; grid-template-areas: "avatar texto perfil" "avatar senha senha";
  gap: 4px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lavanda);
}
.membro:last-child { border-bottom: 0; }
.membro .avatar { grid-area: avatar; align-self: start; }
.membro-texto { grid-area: texto; min-width: 0; }
.membro-nome { font-weight: 600; }
.membro-email { font-size: 13px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.campo-perfil { grid-area: perfil; }
.campo-perfil .entrada { height: 40px; }
.membro .link { grid-area: senha; justify-self: start; padding: 2px 0; font-size: 13px; }
.selo-voce { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--menu); font-size: 11.5px; font-weight: 600; color: var(--roxo); }
.lista-eventos li { padding: 8px 0; border-bottom: 1px solid var(--lavanda); font-size: 13.5px; }
.lista-eventos li:last-child { border-bottom: 0; }
.lista-eventos .mono { margin-right: 8px; font-size: 12.5px; color: var(--tinta-suave); }
.aviso.sucesso { background: color-mix(in srgb, var(--menta) 14%, #fff); color: var(--menta-texto); border-color: color-mix(in srgb, var(--menta) 45%, #fff); }

/* ───────── Histórico de propostas ───────── */
.menu-rotulo { flex: 1; }
.contador-menu {
  min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--menta); color: var(--roxo-2);
  font-size: 11px; font-weight: 500; text-align: center;
}
.botao-salvar {
  width: 100%; min-height: 46px; margin-top: -8px; border-radius: 14px; background: transparent;
  border: 1.5px solid rgb(255 255 255 / .5); color: #fff;
}
.botao-salvar:hover:not(:disabled) { background: rgb(255 255 255 / .1); border-color: #fff; }
.botao-salvar:disabled { opacity: .6; cursor: default; }
.estado-salvo { margin-top: -10px; font-size: 12.5px; color: #dccfe6; display: flex; align-items: center; gap: 7px; }
.estado-salvo::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #cbb9d8; }
.estado-salvo[data-situacao="salva"]::before { background: var(--menta); }
.estado-salvo[data-situacao="alterada"]::before { background: var(--ambar); }
.estado-salvo[data-situacao="falha"] { color: #ffd0cc; }
.estado-salvo[data-situacao="falha"]::before { background: #ff8a80; }
.aviso-reaberta { background: color-mix(in srgb, var(--menta) 12%, #fff); color: var(--tinta); border-color: color-mix(in srgb, var(--menta) 45%, #fff); }

.filtros-historico { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; }
.campo-busca { flex: 1 1 320px; max-width: 520px; }
#filtro-vendedor { flex: 0 1 260px; }
.itens-historico { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item-historico {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 8px 22px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--lavanda); border-radius: 16px;
}
.item-historico.aberta { border-color: var(--roxo); box-shadow: inset 4px 0 0 var(--menta); }
.item-nome { font: 700 17px/1.2 var(--f-titulo); color: var(--roxo); }
.item-detalhes { margin-top: 3px; font-size: 13px; color: var(--tinta-suave); }
.item-vendedor { font-size: 13.5px; color: var(--tinta-suave); white-space: nowrap; }
.item-total { text-align: right; font: 700 17px/1.1 var(--f-titulo); color: var(--roxo-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-total small { display: block; font: 500 11.5px var(--f-texto); color: var(--tinta-suave); }
.item-data .mono { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.item-acoes { display: flex; gap: 6px; align-items: center; }
.selo-aberta { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--menta); font: 600 11px var(--f-texto); color: var(--roxo-2); vertical-align: 2px; }
.historico-vazio {
  display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; background: #fff;
  border: 1px dashed var(--borda-campo); border-radius: var(--raio-grande);
}
.historico-vazio .sutil { max-width: 46ch; }
.historico-vazio .botao { margin-top: 6px; }

/* ───────── Telas menores ───────── */
@media (max-width: 1180px) {
  .grade-proposta { grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; }
  main { padding: 28px 26px 120px; }
  .valor-final { font-size: 36px; }
}

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px 16px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--lavanda);
  }
  .marca { padding: 0; }
  .marca-nome { font-size: 22px; }
  .rodape-lateral { flex-basis: 100%; margin: 0; padding: 10px 0 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
  .relogio-fonte { display: none; }
  .usuario-atual { display: flex; align-items: center; gap: 12px; }
  .botao-sair { width: auto; min-height: 36px; }
  .modo-local span { display: none; }
  .marca-sub { font-size: 12px; }
  .regua, .etapas-menu { display: none !important; }
  .menu { flex-basis: 100%; }
  .menu-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .menu-item .contador-menu { margin-left: 6px; }
  .menu-rotulo { flex: none; }
  .menu-item { justify-content: center; padding: 9px 10px; font-size: 14px; white-space: nowrap; }
  main { padding: 22px 16px 150px; }
  .grade-proposta { grid-template-columns: 1fr; }
  .painel { position: static; }
  .tabelas { grid-template-columns: 1fr; }
  .item-historico { grid-template-columns: minmax(0, 1fr) auto; }
  .item-cliente { grid-column: 1 / -1; }
  .item-total { text-align: left; }
  .item-acoes { grid-column: 1 / -1; }
  .item-acoes .botao { flex: 1; }

  .barra-total {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--roxo-2); color: #fff;
    box-shadow: 0 -10px 30px -18px var(--roxo-2);
  }
  .barra-total span { display: block; font-size: 12px; color: #dccfe6; }
  .barra-total strong { font: 700 22px/1.1 var(--f-titulo); color: var(--menta); font-variant-numeric: tabular-nums; }
  .barra-total .botao-gerar { width: auto; min-height: 46px; padding: 0 18px; font-size: 16px; }
  .mascote { bottom: 78px; right: 8px; }
  .mascote-cena { width: 104px; height: 80px; }
  /* o total fica à mão só na tela da proposta */
  body:has(#tela-calculadora[hidden]) .barra-total { display: none; }
  body:has(#tela-calculadora[hidden]) .mascote { bottom: 10px; }
}

@media (max-width: 640px) {
  h1 { font-size: 25px; }
  .etapa, .bloco { padding: 20px 16px 22px; border-radius: 18px; }
  .empresa { padding: 16px 14px; }
  .linha-dados, .linha-campos, .linha-vendedor, .opcoes-marca { grid-template-columns: 1fr; }
  .empresa-topo { align-items: flex-start; }
  .numero { margin: 26px 0 0; }
  .grade-multiplicadores { grid-template-columns: 1fr; }
  .linha-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)) 38px; }
  .linha-faixa .campo:first-child { display: none; }
  .menu-item svg { display: none; }
  .cabecalho-tela .botao { width: 100%; }
  .membro { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar texto" "avatar perfil" "avatar senha"; }
  .campo-perfil { margin-top: 8px; max-width: 220px; }
}