:root{
  --dark:#0f1c1b;
  --dark2:#111716;
  --gold:#e5a735;
  --gold-dk:#c87909;
  --gold-pale:#fbf3de;
  --cream:#fbf8f2;
  --cream2:#f6f3ec;
  --green:#0b7e38;
  --green-pale:#e5f7ec;
  --red:#9b3024;
  --red-lt:#f6ded9;
  --gray-dk:#43504d;
  --white:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--dark2);
  line-height:1.5;
}

.topo{
  background:var(--dark);
  padding:.9rem 1.5rem;
  border-bottom:3px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none}

.selo{
  font-family:Georgia,serif;font-weight:700;font-size:1.1rem;color:var(--gold);
  background:var(--dark2);border:2px solid var(--gold-dk);border-radius:6px;
  width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.nome{color:var(--white);font-weight:700;font-size:1.05rem;display:flex;flex-direction:column}
.nome small{color:#c9d4d1;font-weight:400;font-size:.68rem}

.topo-acoes{display:flex;align-items:center;gap:.7rem}
.conta-info{color:var(--white);font-size:.78rem;opacity:.8;white-space:nowrap}

.botao-salvar{
  background:var(--gold);color:var(--dark);border:none;border-radius:6px;
  padding:.55rem 1rem;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;
}
.botao-salvar:hover{background:var(--gold-dk);color:var(--white)}

.botao-sair{
  background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.35);border-radius:6px;
  padding:.5rem .9rem;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;
}
.botao-sair:hover{background:rgba(255,255,255,.12);border-color:var(--white)}

@media (max-width:640px){
  .conta-info{display:none}
}

.botao-menu-mobile{
  display:none;width:100%;background:var(--dark2);color:var(--white);border:none;
  padding:.85rem 1.3rem;font-size:.92rem;font-weight:700;text-align:left;cursor:pointer;
  font-family:inherit;border-bottom:1px solid #2a3634;
}

.abas{
  display:flex;background:var(--dark2);border-bottom:1px solid #2a3634;
  overflow-x:auto;
}
.aba{
  background:none;border:none;color:#c9d4d1;padding:.85rem 1.3rem;font-size:.92rem;
  font-weight:700;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;
  font-family:inherit;
}
.aba:hover{color:var(--white)}
.aba.ativa{color:var(--gold);border-bottom-color:var(--gold)}

main{max-width:1100px;margin:0 auto;padding:1.75rem 1.25rem 3rem}
.tela--estreita{max-width:760px;margin:0 auto}

.tela h1,.tela>h2:first-child{font-size:1.4rem;color:var(--dark);margin-bottom:.35rem}
.explicacao{color:var(--gray-dk);font-size:.92rem;margin-bottom:1.25rem}

.cartao{
  background:var(--white);border:1px solid #e5ded0;border-radius:10px;
  padding:1.4rem;box-shadow:0 2px 10px rgba(15,28,27,.06);margin-bottom:1.25rem;
}
.cartao h2{font-size:1.02rem;color:var(--dark);margin-bottom:1rem}

.campo{margin-bottom:1.05rem}
.campo label{display:block;font-weight:700;font-size:.85rem;color:var(--dark2);margin-bottom:.32rem}
.campo input,.campo select{
  width:100%;padding:.6rem .7rem;border:1px solid #d9d3c4;border-radius:6px;
  font-size:.96rem;font-family:inherit;background:var(--gold-pale);color:var(--dark2);
}
.campo input:focus,.campo select:focus{outline:2px solid var(--gold-dk);outline-offset:1px}
.campo small{display:block;margin-top:.3rem;font-size:.76rem;color:var(--gray-dk);font-style:italic}

.campo-linha{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.botao-calcular{
  background:var(--dark);color:var(--gold);border:none;border-radius:8px;padding:.85rem 1.4rem;
  font-size:1rem;font-weight:700;cursor:pointer;
}
.botao-calcular:hover{background:var(--dark2)}

.botao-mini{
  background:var(--dark);color:var(--gold);border:none;border-radius:6px;
  padding:.5rem .8rem;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;
}

.botao-link{
  background:none;border:none;color:var(--gray-dk);text-decoration:underline;
  font-size:.85rem;cursor:pointer;margin-top:.9rem;font-family:inherit;
}

/* ---- configurações: listas editáveis ---- */
.grade-listas{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.lista-editavel{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem;max-height:220px;overflow-y:auto}
.item-lista{
  display:flex;justify-content:space-between;align-items:center;background:var(--cream2);
  border:1px solid #e5ded0;border-radius:6px;padding:.45rem .7rem;font-size:.88rem;
}
.item-lista button{background:none;border:none;color:var(--red);font-weight:700;cursor:pointer;font-size:1rem;line-height:1}
.linha-add{display:flex;gap:.5rem}
.linha-add input{flex:1;padding:.55rem .65rem;border:1px solid #d9d3c4;border-radius:6px;font-family:inherit}

/* ---- lançamentos ---- */
.barra-mes{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;
  background:var(--dark);color:var(--white);padding:.9rem 1.1rem;border-radius:8px;
}
.barra-mes label{font-weight:700;font-size:.85rem}
.barra-mes input{padding:.4rem .6rem;border-radius:6px;border:1px solid #d9d3c4}
.saldo-atual{margin-left:auto;font-size:.9rem}
.saldo-atual strong{color:var(--gold)}

.grade-lancamento{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}
.campo-larga{grid-column:span 2}
.botao-add-lancamento{grid-column:1 / -1}

.tabela-scroll{overflow-x:auto}
.tabela-lancamentos{width:100%;border-collapse:collapse;font-size:.86rem}
.tabela-lancamentos th{
  background:var(--dark);color:var(--gold);text-align:left;padding:.6rem .6rem;
  font-size:.78rem;text-transform:uppercase;white-space:nowrap;
}
.tabela-lancamentos td{padding:.55rem .6rem;border-bottom:1px solid #efe9dc;white-space:nowrap}
.tabela-lancamentos tr:nth-child(even){background:var(--cream)}
.tabela-lancamentos .col-descricao{white-space:normal;min-width:160px}
.remover-lancamento{background:none;border:none;color:var(--red);font-weight:700;cursor:pointer}
.linha-vencida{background:var(--red-lt) !important}
.margem-negativa{background:var(--red-lt);color:var(--red);font-weight:700}
.margem-baixa{background:var(--gold-pale);color:var(--gold-dk);font-weight:700}
.margem-boa{background:var(--green-pale);color:var(--green);font-weight:700}

.totais-mes{display:flex;gap:1.5rem;margin-top:1rem;flex-wrap:wrap;font-size:.9rem}
.totais-mes strong{color:var(--dark)}

/* ---- apuração (reaproveitado) ---- */
.resultado{margin-top:1.25rem;display:flex;flex-direction:column;gap:1.25rem}
.resultado[hidden]{display:none}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.stat{display:flex;flex-direction:column;gap:.25rem}
.stat-label{font-size:.76rem;color:var(--gray-dk);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.stat-valor{font-size:1.2rem;font-weight:700;color:var(--dark)}
.stat-valor.destaque{color:var(--green)}

.caixa-alerta{background:var(--red);color:var(--white);border-radius:10px;padding:1.4rem}
.caixa-alerta h2{font-size:1.1rem;margin-bottom:.6rem}
.caixa-alerta p{margin-bottom:.7rem}
.caixa-alerta .diferenca strong{font-size:1.05rem}
.caixa-alerta .ressalva{font-size:.8rem;opacity:.9;font-style:italic}

.caixa-ok{background:var(--green-pale);border:1px solid var(--green);border-radius:10px;padding:1.2rem;text-align:center}
.caixa-ok p{color:var(--dark2);margin-bottom:.9rem}

.caixa-limite{background:var(--gold-pale);border:1px solid var(--gold-dk);border-radius:10px;padding:1.05rem;font-size:.9rem}

.botao-whatsapp{
  display:inline-block;background:var(--gold);color:var(--dark);font-weight:700;
  text-decoration:none;padding:.8rem 1.3rem;border-radius:8px;font-size:.96rem;
}
.botao-whatsapp--neutro{background:var(--white);border:1px solid var(--green);color:var(--green)}

/* ---- painel (dashboard nível diretoria) ---- */
.painel-cabecalho{margin-bottom:1.4rem}
.painel-cabecalho h1{font-size:1.6rem}

.painel-vazio{
  background:var(--gold-pale);border:1px solid var(--gold-dk);border-radius:10px;
  padding:1.3rem 1.5rem;margin-bottom:1.4rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.painel-vazio[hidden]{display:none}
.painel-vazio p{color:var(--dark2);font-size:.92rem;margin:0}
.painel-vazio .botao-calcular{white-space:nowrap}

.grade-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.4rem}
.kpi{border-radius:12px;padding:1.2rem;color:var(--white);box-shadow:0 3px 14px rgba(15,28,27,.1)}
.kpi-topo{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem}
.kpi-topo span{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;opacity:.9}
.kpi-topo strong{font-size:1.55rem}
.kpi-grafico{opacity:.95}
.kpi--receita{background:linear-gradient(135deg,var(--green),#0a6b30)}
.kpi--despesa{background:linear-gradient(135deg,var(--red),#7d2519)}
.kpi--resultado{background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:var(--dark)}
.kpi--resultado .kpi-topo span{color:var(--dark);opacity:.75}
.kpi--vencido{background:linear-gradient(135deg,var(--dark2),#000)}

.grade-kpi--previsto{grid-template-columns:repeat(4,1fr)}
.grade-kpi--previsto .kpi{padding:1rem}
.grade-kpi--previsto .kpi-topo{margin-bottom:0}
.grade-kpi--previsto .kpi-topo strong{font-size:1.25rem}

.grade-donuts{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.1rem}
.donut-bloco{min-height:170px;display:flex;align-items:center}
.donut-wrap{display:flex;align-items:center;gap:1.3rem;width:100%}
.donut-svg{flex-shrink:0}
.donut-legenda{display:flex;flex-direction:column;gap:.45rem;width:100%}
.donut-item{display:flex;align-items:center;gap:.5rem;font-size:.84rem}
.donut-cor{width:.7rem;height:.7rem;border-radius:2px;flex-shrink:0}
.donut-nome{flex:1;color:var(--dark2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-pct{font-weight:700;color:var(--dark)}
.sem-dado{color:var(--gray-dk);font-size:.86rem;font-style:italic}

.grade-inferior{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1.1rem}
.stat-mini--alerta{color:var(--red) !important}
.cartao-saldo h2,.cartao-lateral h2{margin-bottom:1rem}
.stat-mini{display:flex;justify-content:space-between;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--cream2)}
.stat-mini span{font-size:.84rem;color:var(--gray-dk)}
.stat-mini strong{font-size:1rem;color:var(--dark)}
.botao-ir-apuracao{width:100%;margin-top:1rem;font-size:.88rem;padding:.7rem}

/* ---- resumo do ano ---- */
.comparativo{font-size:.82rem;font-weight:700;margin-top:.2rem}
.comparativo-alta{color:var(--white)}
.comparativo-baixa{color:var(--white);opacity:.85}
.kpi--resultado .comparativo-alta,.kpi--resultado .comparativo-baixa{color:var(--dark)}
.grade-resumo-painel{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem 1.5rem;margin-bottom:.3rem}
.grade-resumo-painel .stat-mini{border-bottom:none;padding:.4rem 0}

.barras-h{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.barra-h-item{display:grid;grid-template-columns:140px 1fr 100px;align-items:center;gap:.7rem;font-size:.86rem}
.barra-h-label{color:var(--dark2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-h-trilha{background:var(--cream2);border-radius:4px;height:1.1rem;overflow:hidden}
.barra-h-preenchimento{background:var(--gold);height:100%;border-radius:4px}
.barra-h-preenchimento.negativa{background:var(--red)}
.barra-h-valor{text-align:right;font-weight:700;color:var(--dark)}

/* ---- alertas ---- */
.lista-alertas{display:flex;flex-direction:column;gap:.5rem}
.alerta-item{padding:.65rem .9rem;border-radius:6px;font-size:.88rem;font-weight:700}
.alerta-grave{background:var(--red-lt);color:var(--red)}
.alerta-atencao{background:var(--gold-pale);color:var(--gold-dk)}
.alerta-info{background:var(--cream2);color:var(--gray-dk)}

/* ---- meta de faturamento ---- */
.barra-progresso{background:var(--cream2);border-radius:6px;height:1.4rem;overflow:hidden;margin-bottom:.6rem}
.barra-progresso-preenchimento{background:linear-gradient(90deg,var(--gold),var(--gold-dk));height:100%;border-radius:6px;transition:width .3s}
.meta-legenda{font-size:.88rem;color:var(--gray-dk)}

/* ---- estoque / status ---- */
.linha-estoque-baixo{background:var(--red-lt) !important}
.botao-ajuste{background:var(--dark);color:var(--gold);border:none;border-radius:4px;width:1.8rem;height:1.8rem;font-weight:700;cursor:pointer;font-size:1rem;line-height:1}
.badge{display:inline-block;padding:.2rem .55rem;border-radius:12px;font-size:.76rem;font-weight:700}
.badge-enviado{background:var(--gold-pale);color:var(--gold-dk)}
.badge-aprovado{background:var(--green-pale);color:var(--green)}
.badge-recusado{background:var(--red-lt);color:var(--red)}
.checkbox-tarefa{width:1.1rem;height:1.1rem}
.tarefa-feita td{text-decoration:line-through;color:var(--gray-dk)}
.anexo-link{color:var(--gold-dk);font-weight:700;text-decoration:none}

/* ---- tour guiado ---- */
.tour-passos{background:var(--cream2);border-radius:8px;padding:1rem;margin-bottom:1rem;font-size:.9rem;color:var(--dark2)}
.tour-navegacao{display:flex;justify-content:space-between;align-items:center}

/* ---- instruções ---- */
.lista-passos{padding-left:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.lista-passos li{color:var(--dark2);font-size:.92rem}
.lista-check{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.lista-check li{font-size:.9rem;padding-left:1.5rem;position:relative}
.lista-check--ok li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.lista-check--nao li::before{content:"✗";position:absolute;left:0;color:var(--red);font-weight:700}

.rodape-ressalva{margin-top:1.5rem;font-size:.78rem;color:var(--gray-dk);font-style:italic;text-align:center;line-height:1.6}
.rodape{text-align:center;padding:1.5rem;color:var(--gray-dk);font-size:.82rem;font-style:italic;border-top:1px solid #e5ded0}

/* ---- popup salvar/entrar ---- */
.popup-fundo{
  position:fixed;inset:0;background:rgba(15,28,27,.72);display:flex;
  align-items:center;justify-content:center;padding:1rem;z-index:100;
}
.popup-fundo[hidden]{display:none}
.popup-caixa{
  background:var(--white);border-radius:12px;padding:1.75rem;max-width:400px;width:100%;
  position:relative;box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.popup-caixa h2{color:var(--dark);margin-bottom:.6rem;font-size:1.15rem}
.popup-caixa p{color:var(--gray-dk);font-size:.88rem;margin-bottom:1.1rem}
.popup-fechar{
  position:absolute;top:.7rem;right:.9rem;background:none;border:none;font-size:1.4rem;
  color:var(--gray-dk);cursor:pointer;line-height:1;
}
.popup-mensagem{margin-top:.8rem;font-size:.85rem;padding:.6rem .8rem;border-radius:6px}
.popup-mensagem.ok{background:var(--green-pale);color:var(--green)}
.popup-mensagem.erro{background:var(--red-lt);color:var(--red)}

@media (max-width:900px){
  .grade-kpi{grid-template-columns:1fr}
  .grade-donuts{grid-template-columns:1fr}
  .grade-inferior{grid-template-columns:1fr}
  .grade-resumo-painel{grid-template-columns:1fr}

  .botao-menu-mobile{display:block}
  .abas{
    display:none;flex-direction:column;overflow-x:visible;
    position:absolute;top:auto;left:0;right:0;z-index:50;
    box-shadow:0 8px 16px rgba(0,0,0,.25);
  }
  .abas.aberta{display:flex}
  .aba{width:100%;text-align:left;border-bottom:1px solid #2a3634;border-left:3px solid transparent}
  .aba.ativa{border-left-color:var(--gold);border-bottom-color:#2a3634}
}

@media (max-width:640px){
  .campo-linha{grid-template-columns:1fr}
  .grade{grid-template-columns:1fr}
  .grade-listas{grid-template-columns:1fr}
  .grade-lancamento{grid-template-columns:1fr 1fr}
  .campo-larga{grid-column:span 2}
  .saldo-atual{margin-left:0}
  .donut-wrap{flex-direction:column;align-items:flex-start}
}