:root {
  /* cores tiradas da logo: fundo bege e laranja da marca */
  --marca: #E65E46;
  --acento: #B03C27;        /* o mesmo laranja escurecido: contraste para texto e botão */
  --acento-claro: #F6D9CF;
  --grafite: #2B211B;
  --texto: #332920;
  --texto-fraco: #6B5C50;
  --papel: #FBF5EE;
  --fundo: #F1E4D3;
  --linha: #E2D2BF;
  --verde: #16704F;
  --verde-claro: #DDEBDD;
  --ambar: #98590A;
  --ambar-claro: #F3E1C2;
  --vermelho: #A93A26;
  --vermelho-claro: #F3D9CF;
  --azul: #2D5596;
  --azul-claro: #DFE4EE;
  --roxo: #664891;
  --roxo-claro: #E7DDEA;
  --leo: #E65E46;
  --diego: #0E7490;
  --andre: #5B6B2E;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(90,55,30,.05), 0 8px 24px rgba(90,55,30,.08);
  --topo: 56px;
  --rodape: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }
img { max-width: 100%; display: block; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- carregamento e login */

.tela-cheia {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--fundo); padding: 24px;
}

.girando {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--linha); border-top-color: var(--marca);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.cartao-login {
  width: 100%; max-width: 360px; background: var(--papel);
  border-radius: 20px; padding: 28px 24px 24px; box-shadow: var(--sombra);
}
.logo-login { width: min(230px, 70%); margin: 0 auto; }
.cartao-login .sub { margin: 14px 0 20px; font-size: 13px; color: var(--texto-fraco); text-align: center; }
.cartao-login label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.cartao-login input { margin-bottom: 12px; }
.cartao-login .btn { margin-top: 4px; }

.pessoas { display: grid; gap: 8px; }
.pessoas button {
  width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--linha); background: var(--papel);
  font: inherit; font-weight: 800; font-size: 16px; color: var(--grafite); cursor: pointer;
}
.pessoas button:active { border-color: var(--marca); }
.pessoas button small { display: block; font-size: 12px; font-weight: 600; color: var(--texto-fraco); }

.aviso {
  background: var(--vermelho-claro); color: var(--vermelho);
  font-size: 13.5px; font-weight: 700; padding: 10px 12px; border-radius: 10px; margin: 0 0 12px;
}

/* ---------------------------------------------------------- estrutura */

#cabecalho, #cabecalho-estudio {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px; padding: 0 6px 0 10px;
  background: var(--papel); color: var(--grafite); border-bottom: 1px solid var(--linha);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topo) + env(safe-area-inset-top));
}
#marca { flex: 1; display: flex; align-items: center; gap: 8px; }
#marca img { width: 30px; height: 30px; border-radius: 8px; }
#marca span {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 26px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--marca);
}
#cabecalho h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--grafite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone { background: none; border: 0; color: var(--texto-fraco); font-size: 22px;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; flex-shrink: 0; }
.icone:active { background: var(--fundo); }

#conteudo, #conteudo-estudio {
  padding: calc(var(--topo) + env(safe-area-inset-top) + 12px) 14px
           calc(var(--rodape) + env(safe-area-inset-bottom) + 24px);
  max-width: 760px; margin: 0 auto;
}
#conteudo-estudio { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }

#navegacao {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--papel); border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}
#navegacao a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--rodape); font-size: 10.5px; font-weight: 700; text-decoration: none;
  color: var(--texto-fraco); letter-spacing: -.01em; text-align: center; padding: 0 1px;
}
#navegacao a .ic { font-size: 19px; line-height: 1; filter: grayscale(1); opacity: .6; position: relative; }
#navegacao a .ic .bolinha {
  position: absolute; top: -2px; right: -6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--marca); border: 2px solid var(--papel); filter: none; opacity: 1;
}
#navegacao a.ativo { color: var(--acento); }
#navegacao a.ativo .ic { filter: none; opacity: 1; }

/* ---------------------------------------------------------- blocos */

.cartao {
  background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 12px;
}
.cartao.sem-espaco { padding: 0; overflow: hidden; }
.cartao.destaque { border: 1.5px solid var(--marca); }

h2.secao {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 22px 0 8px;
}
h2.secao:first-child { margin-top: 0; }
h3.bloco { font-size: 15px; font-weight: 800; margin: 0 0 10px; color: var(--grafite); }

.vazio { text-align: center; color: var(--texto-fraco); font-size: 14px; padding: 28px 16px; }

.numerao { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: .01em; color: var(--grafite); }
.numerao.neg { color: var(--vermelho); }
.numerao.pos { color: var(--verde); }
.rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.cap { font-size: 12.5px; color: var(--texto-fraco); }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; }
.kpi b { display: block; font-size: 19px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi b.verde { color: var(--verde); } .kpi b.vermelho { color: var(--vermelho); }
.kpi b.azul { color: var(--azul); } .kpi b.ambar { color: var(--ambar); }

.linha-item {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--linha);
  font: inherit; color: inherit; cursor: pointer;
}
.linha-item:last-child { border-bottom: 0; }
.linha-item:active { background: var(--fundo); }
.linha-item .corpo { flex: 1; min-width: 0; }
.linha-item .tit { font-weight: 700; font-size: 15px; color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-item .sub { font-size: 13px; color: var(--texto-fraco); }
.linha-item .lado { font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.linha-item .faixa { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; background: var(--linha); }

.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.selo.neutro { background: var(--fundo); color: var(--texto-fraco); }
.selo.verde { background: var(--verde-claro); color: var(--verde); }
.selo.ambar { background: var(--ambar-claro); color: var(--ambar); }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.azul { background: var(--azul-claro); color: var(--azul); }
.selo.roxo { background: var(--roxo-claro); color: var(--roxo); }
.selo.marca { background: var(--acento-claro); color: var(--acento); }

.cor-rec { color: var(--verde); } .cor-des { color: var(--vermelho); }
.cor-apo { color: var(--azul); } .cor-pag { color: var(--roxo); } .cor-est { color: var(--ambar); }
.f-rec { background: var(--verde); } .f-des { background: var(--vermelho); }
.f-apo { background: var(--azul); } .f-pag { background: var(--roxo); } .f-est { background: var(--ambar); }

/* ---------------------------------------------------------- cascata e tabelas */

.cascata { display: grid; }
.cascata .passo { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 0; border-top: 1px solid var(--linha); align-items: baseline; }
.cascata .passo:first-child { border-top: 0; }
.cascata .passo .nm { font-size: 14.5px; }
.cascata .passo .nm small { display: block; font-size: 12px; color: var(--texto-fraco); }
.cascata .passo .vl { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cascata .passo.total { border-top: 2px solid var(--grafite); }
.cascata .passo.dentro .nm { padding-left: 14px; }
.cascata .barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--fundo); overflow: hidden; }
.cascata .barra i { display: block; height: 100%; border-radius: 3px; }

.divisao { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--fundo); margin: 10px 0 6px; }
.divisao i { display: block; height: 100%; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texto-fraco); }
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }

.rolar { overflow-x: auto; margin: 0 -4px; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-fraco); text-align: right; padding: 0 6px 8px; white-space: nowrap; }
table.tab th:first-child { text-align: left; }
table.tab td { padding: 9px 6px; border-top: 1px solid var(--linha); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tab td:first-child { text-align: left; font-weight: 700; color: var(--grafite); white-space: normal; }
table.tab tr.total td { border-top: 2px solid var(--grafite); font-weight: 800; }
table.tab tr.clicavel { cursor: pointer; }
table.tab tr.clicavel:active td { background: var(--fundo); }

.barra-prog { height: 8px; border-radius: 4px; background: var(--fundo); overflow: hidden; margin: 8px 0 4px; }
.barra-prog i { display: block; height: 100%; background: var(--marca); border-radius: 4px; }

/* ---------------------------------------------------------- botões e campos */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none;
  background: var(--fundo); color: var(--grafite);
}
.btn.principal { background: var(--acento); color: #fff; }
.btn.contorno { background: var(--papel); border-color: var(--grafite); color: var(--grafite); }
.btn.perigo { background: var(--vermelho-claro); color: var(--vermelho); }
.btn.largo { width: 100%; }
.btn.pequeno { min-height: 36px; font-size: 13.5px; padding: 0 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botoes .btn { flex: 1; }

.flutuante {
  position: fixed; right: 16px; z-index: 15;
  bottom: calc(var(--rodape) + env(safe-area-inset-bottom) + 16px);
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--acento); color: #fff; font-size: 28px; line-height: 1;
  box-shadow: 0 6px 20px rgba(176,60,39,.35); cursor: pointer;
}

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.inteiro { grid-column: 1 / -1; }
.campo label { font-size: 12.5px; font-weight: 700; color: var(--texto-fraco); }
.campo .ajuda { font-size: 11.5px; color: var(--texto-fraco); }

input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--texto);
  background: var(--papel); border: 1.5px solid var(--linha); border-radius: 10px;
  padding: 11px 12px; min-height: 46px;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--marca); }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--acento); }

.escolhas { display: flex; flex-wrap: wrap; gap: 6px; }
.escolhas button {
  flex: 1 1 auto; min-height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid var(--linha); background: var(--papel);
  font: inherit; font-weight: 700; font-size: 14px; color: var(--texto-fraco); cursor: pointer;
}
.escolhas button.ativa { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); }

/* ---------------------------------------------------------- folha modal */

.folha { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.folha-fundo { position: absolute; inset: 0; background: rgba(43,33,27,.45); }
.folha-caixa {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: var(--papel); border-radius: 20px 20px 0 0;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) { .folha { align-items: center; padding: 20px; } .folha-caixa { border-radius: 20px; } }
.folha-topo {
  position: sticky; top: 0; z-index: 1; background: var(--papel);
  display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--linha);
}
.folha-topo h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; color: var(--grafite); }
#folha-corpo { padding-top: 14px; }
.nota { font-size: 12.5px; color: var(--texto-fraco); line-height: 1.5; }
.nota b { color: var(--grafite); }
.caixa-nota { padding: 10px 12px; border-radius: 10px; background: var(--fundo); font-size: 13px; margin-bottom: 12px; }
.caixa-nota.azul { background: var(--azul-claro); color: var(--azul); }
.caixa-nota.ambar { background: var(--ambar-claro); color: var(--ambar); }
.caixa-nota.vermelha { background: var(--vermelho-claro); color: var(--vermelho); }

#aviso-flutuante {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(var(--rodape) + env(safe-area-inset-bottom) + 18px);
  background: var(--grafite); color: #fff; padding: 11px 17px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; max-width: 86vw; text-align: center;
}