/* GranConect Financeiro - tema claro com as cores Conect */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --grafite: #1A2540;
  --tinta: #0F1B2D;
  --texto: #34405A;
  --mudo: #5D6C86;
  --ciano: #4F6BFF;
  --ciano-escuro: #1746E0;
  --ciano-fundo: #EDF1FF;
  --lilas: #7C4DFF;
  --azul-conect: #0A1F96;
  --papel: #F4F6FB;
  --superficie: #FFFFFF;
  --linha: #E1E5EA;
  --linha-forte: #CDD3DA;
  --entrada: #12936A;
  --entrada-fundo: #E7F5EF;
  --saida: #C2413A;
  --saida-fundo: #FBECEB;
  --alerta: #A87206;
  --alerta-fundo: #FDF4DF;
  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 16px rgba(15, 27, 45, .05);
  --fonte: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --lateral: 236px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 var(--fonte);
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--tinta); margin: 0; line-height: 1.2; font-weight: 600; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; }
h3 { font-size: .98rem; }
p { margin: 0 0 .6em; }
a { color: var(--ciano-escuro); }
button, input, select, textarea { font: inherit; color: inherit; }
.num, td.num, th.num, .valor { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mudo { color: var(--mudo); }
.ent { color: var(--entrada); }
.sai { color: var(--saida); }
.alerta-txt { color: var(--alerta); }
:focus-visible { outline: 2px solid var(--ciano-escuro); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- splash padrão Conect */
#splash {
  --sp-ease: cubic-bezier(.2, .8, .2, 1);
  --sp-c1: #1746e0; --sp-c2: #0a1f96; --sp-v1: #8a3ffc; --sp-v2: #5a26f0;
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: radial-gradient(520px 420px at 50% 42%, rgba(92,70,255,.12), transparent 70%), linear-gradient(160deg, #ffffff, #f1f4fc);
  color: #0f1b2d;
  transition: opacity .5s ease, visibility .5s, transform .5s var(--sp-ease);
}
#splash.sai { opacity: 0; visibility: hidden; transform: scale(1.03); }
.splash-inner { display: flex; flex-direction: column; align-items: center; }
.splash-logo { width: 168px; height: auto; margin-bottom: 26px; overflow: visible; filter: drop-shadow(0 8px 18px rgba(60,50,220,.22)); }
.splash-logo path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: splash-draw .75s var(--sp-ease) forwards; }
.splash-logo .d2 { animation-delay: .3s; }
.splash-logo .d3 { animation-delay: .42s; }
.splash-logo .d4 { animation-delay: .5s; }
.splash-name { font-size: 30px; font-weight: 700; letter-spacing: -.025em; opacity: 0; animation: splash-rise .6s var(--sp-ease) .7s forwards; }
.splash-name em { font-style: normal; background: linear-gradient(95deg, #1746e0, #6a2cf0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.splash-by { margin-top: 6px; color: #5d6c86; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: 0; animation: splash-rise .6s var(--sp-ease) .85s forwards; }
.splash-bar { width: 120px; height: 2px; border-radius: 2px; background: rgba(16,30,54,.1); overflow: hidden; margin-top: 30px; }
.splash-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4f86ff, #a57bff); width: 0; animation: splash-fill 1.5s ease-in-out forwards; }
@keyframes splash-draw { to { stroke-dashoffset: 0; } }
@keyframes splash-fill { to { width: 100%; } }
@keyframes splash-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo path { stroke-dashoffset: 0; animation: none; }
  .splash-name, .splash-by { opacity: 1; animation: none; }
}

/* ---------- marca GranConect */
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); }
.marca-simb { width: 44px; height: auto; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marca-txt b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; }
.marca-txt em { font-style: normal; background: linear-gradient(95deg, #1746e0, #6a2cf0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-txt small { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mudo); margin-top: 3px; }
.marca.grande .marca-simb { width: 64px; }
.marca.grande .marca-txt b { font-size: 1.9rem; }

/* ---------- login / ativacao */
.entrada-tela { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.entrada-marca {
  background: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--linha);
}
.entrada-marca .logo { width: auto; }
.entrada-marca .frase { font-size: 2.3rem; line-height: 1.12; font-weight: 600; color: var(--grafite); max-width: 15ch; letter-spacing: -.02em; }
.entrada-marca .frase span { display: block; color: var(--mudo); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; margin-top: 14px; max-width: 42ch; line-height: 1.5; }
.entrada-marca .rodape { display: flex; align-items: center; gap: 12px; color: var(--mudo); font-size: .85rem; }
.entrada-marca .rodape img { height: 26px; }
.linha-saldo { position: relative; margin: 64px 0 0; max-width: 520px; }
.linha-saldo svg { width: 100%; height: 120px; display: block; overflow: visible; }
.ls-ponto { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 3px solid #6a2cf0; box-shadow: 0 0 0 6px rgba(106, 44, 240, .14); }
.ls-ponto::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(106, 44, 240, .35); animation: ls-pulso 2.2s ease-out infinite; }
@keyframes ls-pulso { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ls-tag { position: absolute; right: 0; top: -30px; text-align: right; line-height: 1.15; }
.ls-tag small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.ls-tag b { font-size: 1.05rem; color: #12936A; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ls-ponto::after { animation: none; } }
.entrada-form { display: grid; place-items: center; padding: 40px 24px; }
.cartao-login { width: 100%; max-width: 380px; }
.cartao-login h1 { margin-bottom: 4px; }
.cartao-login .sub { color: var(--mudo); margin-bottom: 22px; }
.cartao-login form { display: grid; gap: 14px; }
.empresa-ativa { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--ciano-fundo); border-radius: var(--raio-p); padding: 10px 12px; font-size: .9rem; }
.empresa-ativa b { color: var(--tinta); display: block; }
.link-btn { background: none; border: 0; padding: 0; color: var(--ciano-escuro); cursor: pointer; text-decoration: underline; font-size: .88rem; }
.token-input { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
@media (max-width: 820px) { .entrada-tela { grid-template-columns: 1fr; } .entrada-marca { padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--linha); } .entrada-marca .frase { font-size: 1.6rem; } .linha-saldo, .entrada-marca .rodape { display: none; } }

/* ---------- casca */
.casca { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100%; }
.lateral {
  background: #fff; border-right: 1px solid var(--linha); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 18px 12px; overflow-y: auto;
}
.lateral .logo { margin: 4px 10px 22px; }
.nav-grupo { margin-bottom: 14px; }
.nav-grupo > span { display: block; font-size: .78rem; color: var(--mudo); padding: 0 12px 4px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--raio-p);
  color: var(--texto); text-decoration: none; font-weight: 500; position: relative;
}
.nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.nav a:hover { background: var(--papel); }
.nav a.ativo { background: var(--ciano-fundo); color: var(--tinta); }
.nav a.ativo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ciano); }
.nav a .badge { margin-left: auto; }
.lateral .pe { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--linha); font-size: .85rem; color: var(--mudo); }
.lateral .pe b { color: var(--tinta); display: block; }
.lateral .pe .by-conect { display: block; margin-top: 12px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mudo); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20; background: rgba(243, 245, 247, .92); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 12px; padding: 12px 28px; border-bottom: 1px solid var(--linha);
}
.topo .menu-btn { display: none; }
.topo .titulo { flex: 1; min-width: 0; }
.topo .titulo h1 { font-size: 1.3rem; }
.topo .titulo small { color: var(--mudo); }
.sel-empresa { max-width: 280px; }
.demo-tag { background: var(--alerta-fundo); color: var(--alerta); font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.conteudo { padding: 24px 28px 64px; width: 100%; max-width: 2200px; margin: 0 auto; }
.conteudo:focus, .conteudo:focus-visible { outline: none; }

@media (max-width: 980px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 60; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sombra); }
  .casca.menu-aberto .lateral { transform: none; }
  .casca.menu-aberto::after { content: ''; position: fixed; inset: 0; background: rgba(15, 27, 45, .3); z-index: 50; }
  .topo { padding: 10px 14px; }
  .topo .menu-btn { display: inline-flex; }
  .topo .titulo small, .topo .demo-tag { display: none; }
  .topo .titulo h1 { font-size: 1.1rem; }
  .conteudo { padding: 16px 14px 56px; }
  .sel-empresa { max-width: 150px; }
}

/* ---------- componentes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 38px;
  border-radius: var(--raio-p); border: 1px solid var(--linha-forte); background: #fff; color: var(--tinta);
  font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--grafite); }
.btn.prim { background: var(--ciano-escuro); border-color: var(--ciano-escuro); color: #fff; }
.btn.prim:hover { background: #036891; }
.btn.perigo { background: var(--saida); border-color: var(--saida); color: #fff; }
.btn.ok { background: var(--entrada); border-color: var(--entrada); color: #fff; }
.btn.leve { border-color: transparent; background: transparent; }
.btn.leve:hover { background: rgba(15, 27, 45, .06); }
.btn.peq { min-height: 30px; padding: 4px 10px; font-size: .85rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.icone-btn { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; color: var(--mudo); }
.icone-btn:hover { background: var(--papel); color: var(--tinta); }

input, select, textarea {
  width: 100%; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: #fff;
  padding: 8px 10px; min-height: 38px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ciano-escuro); outline: 2px solid rgba(23, 70, 224, .18); outline-offset: 0; }
input.invalido, textarea.invalido, select.invalido { border-color: var(--saida); }
input[type=checkbox] { width: auto; min-height: 0; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo .rotulo { font-size: .84rem; font-weight: 600; color: var(--tinta); }
.campo small { color: var(--mudo); font-size: .8rem; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; }
.grade-form .largo { grid-column: 1 / -1; }
.grade-form .duplo { grid-column: span 2; }
@media (max-width: 520px) { .grade-form .duplo { grid-column: 1 / -1; } }
/* formulario em 12 colunas: cada linha fecha certinho, campos com a mesma altura */
.form-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 14px; align-items: start; }
.form-12 > * { grid-column: span 12; min-width: 0; }
.form-12 > .s3 { grid-column: span 3; } .form-12 > .s4 { grid-column: span 4; }
.form-12 > .s6 { grid-column: span 6; } .form-12 > .s8 { grid-column: span 8; }
.form-12 > .s12 { grid-column: 1 / -1; }
.form-12 .campo { align-content: start; }
.form-12 input, .form-12 select { height: 42px; min-height: 42px; }
.form-12 select { text-overflow: ellipsis; }
.form-12 .check { margin-top: 2px; }
.form-12 > .s12:empty { display: none; }
@media (max-width: 760px) {
  .form-12 > .s3, .form-12 > .s4 { grid-column: span 6; }
  .form-12 > .s6, .form-12 > .s8 { grid-column: 1 / -1; }
}
.senha-mascara { -webkit-text-security: disc; text-security: disc; font-family: text-security-disc, var(--fonte); letter-spacing: .12em; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }

.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; min-width: 0; }
.painel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.painel > header small { color: var(--mudo); }
.painel.sem-pad { padding: 0; }
.painel.sem-pad > header { padding: 16px 20px 0; }

.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.barra-filtros .campo { min-width: 140px; }
.barra-filtros .busca { flex: 1 1 220px; }
.barra-filtros .acoes { margin-left: auto; display: flex; gap: 8px; }
.segmentos { display: inline-flex; background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmentos button { border: 0; background: none; padding: 5px 11px; border-radius: 4px; cursor: pointer; font-weight: 500; color: var(--mudo); }
.segmentos button[aria-pressed=true] { background: var(--grafite); color: #fff; }

.badge { display: inline-block; font-size: .76rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--papel); color: var(--mudo); white-space: nowrap; }
.badge.ok { background: var(--entrada-fundo); color: var(--entrada); }
.badge.atraso { background: var(--saida-fundo); color: var(--saida); }
.badge.hoje { background: var(--alerta-fundo); color: var(--alerta); }
.badge.info { background: var(--ciano-fundo); color: var(--ciano-escuro); }
.badge.cinza { background: #ECEEF1; color: #59606A; }

/* tabelas (estilo livro-caixa) */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; color: var(--mudo); font-size: .8rem; padding: 10px 12px; border-bottom: 1px solid var(--linha-forte); background: #FAFBFC; position: sticky; top: 0; white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover td { background: #F7FAFC; }
tbody tr.cancelado td { color: #9AA1A8; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
tbody tr.cancelado td .badge { text-decoration: none; }
tfoot td { font-weight: 700; color: var(--tinta); border-top: 1px solid var(--linha-forte); background: #FAFBFC; }
td .pessoa { font-weight: 600; color: var(--tinta); display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td small { color: var(--mudo); }
.cel2 { display: grid; line-height: 1.35; min-width: 0; }
.cel2 > span, .cel2 > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel2 > small { font-size: .78rem; }
.cel2.c-doc { max-width: 170px; }
.cel2.c-plano { max-width: 260px; }
.cel2.c-conta { max-width: 190px; }
td .pessoa + small { display: block; white-space: nowrap; }
td .badge { white-space: nowrap; }
.linha-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; color: var(--mudo); font-size: .88rem; }

/* faixa de totais */
.totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin-bottom: 14px; }
.totais > div { background: #fff; padding: 12px 16px; }
.totais span { display: block; font-size: .8rem; color: var(--mudo); }
.totais b { font-size: 1.15rem; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---------- painel (dashboard) */
.hero {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 22px 24px 10px; margin-bottom: 18px;
  display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 28px;
}
.hero-saldo .rot { color: var(--mudo); font-size: .9rem; }
.hero-saldo .grande { white-space: nowrap; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; color: var(--tinta); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 4px 0 14px; }
.hero-saldo .grande.negativo { color: var(--saida); }
.hero-saldo dl { margin: 0; display: grid; gap: 10px; }
.hero-saldo dl div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--linha); padding-top: 9px; font-size: .9rem; }
.hero-saldo dl div { align-items: baseline; }
.hero-saldo dt { color: var(--mudo); min-width: 0; }
.hero-saldo dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hero-saldo dd small { display: block; font-weight: 500; font-size: .76rem; color: var(--mudo); }
.indicador .v, .totais b, .leg-valor, .rk-topo b, td.num, .valor { white-space: nowrap; }
.hero-graf header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-graf header p { margin: 0; color: var(--mudo); font-size: .9rem; }
.hero-graf .legenda-mini { display: flex; gap: 14px; font-size: .82rem; color: var(--mudo); }
.hero-graf .legenda-mini i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.indicador { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; border-top: 3px solid var(--linha-forte); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.indicador:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.indicador.sai { border-top-color: var(--saida); }
.indicador.ent { border-top-color: var(--entrada); }
.indicador.alerta { border-top-color: #E0A100; }
.indicador.ciano { border-top-color: var(--ciano); }
.indicador .rot { color: var(--mudo); font-size: .86rem; }
.indicador .v { display: block; font-size: 1.45rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; margin: 2px 0; }
.indicador small { color: var(--mudo); }
@media (max-width: 1100px) { .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grade-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.grade-meio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
@media (max-width: 1100px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grade-meio { grid-template-columns: 1fr; } }

.grafico { position: relative; width: 100%; }
.grafico svg { display: block; }
.grafico .eixo, .rosca .eixo { font-size: 11px; fill: var(--mudo); }
.grafico .marca { font-size: 11.5px; font-weight: 700; }
.leg-barras { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 8px; font-size: .8rem; color: var(--mudo); }
.leg-barras span { display: inline-flex; align-items: center; gap: 6px; }
.leg-barras i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leg-barras i.lin { width: 16px; height: 2px; border-radius: 1px; }
.dica {
  position: absolute; display: none; pointer-events: none; z-index: 5; background: var(--tinta); color: #fff;
  padding: 8px 10px; border-radius: 6px; font-size: .8rem; line-height: 1.45; white-space: nowrap; box-shadow: var(--sombra);
}
.dica .ent { color: #7FE0B9; } .dica .sai { color: #FFA8A1; }

.rosca-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.rosca-centro { font-size: 17px; font-weight: 700; fill: var(--tinta); }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .86rem; }
.legenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.legenda .leg-nome { grid-column: 2 / -1; line-height: 1.25; }
.legenda .leg-valor { grid-column: 2; }
.legenda .leg-valor { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); }
.legenda .leg-pct { color: var(--mudo); text-align: right; font-variant-numeric: tabular-nums; }
.bolinha { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
@media (max-width: 520px) { .rosca-wrap { grid-template-columns: 1fr; justify-items: center; } .legenda { width: 100%; } }

.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ranking li.clicavel { cursor: pointer; }
.rk-topo { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.rk-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-topo b { font-variant-numeric: tabular-nums; color: var(--tinta); }
.rk-trilho { height: 6px; background: var(--papel); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.rk-barra { height: 100%; border-radius: 3px; }

.pilha { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 12px; }
.pilha span { min-width: 3px; }
.pilha-leg { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 14px; margin: 0; font-size: .84rem; }
.pilha-leg dt { color: var(--mudo); display: flex; align-items: center; gap: 6px; }
.pilha-leg dd { margin: 0; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: .9rem; }
.agenda li:last-child { border-bottom: 0; }
.agenda .dia { text-align: center; line-height: 1.1; color: var(--mudo); font-size: .78rem; }
.agenda .dia b { display: block; font-size: 1.05rem; color: var(--tinta); }
.agenda .quem { overflow: hidden; }
.agenda .quem b { display: block; color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda .quem small { color: var(--mudo); }

.contas-lista { display: grid; gap: 4px; }
.conta-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; border-radius: var(--raio-p); border: 1px solid transparent; cursor: pointer; background: none; text-align: left; font: inherit; color: inherit; width: 100%; }
.conta-item:hover { background: var(--papel); }
.conta-item.sel { border-color: var(--ciano); background: var(--ciano-fundo); }
.conta-item b { color: var(--tinta); }
.conta-item .valor { font-weight: 700; color: var(--tinta); }
.conta-item .valor.negativo { color: var(--saida); }
.conta-item small { color: var(--mudo); grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; }
.mini-es { grid-column: 1 / -1; display: grid; gap: 3px; }
.mini-es span { height: 4px; border-radius: 2px; display: block; min-width: 2px; }
.mini-es .ent { background: var(--entrada); } .mini-es .sai { background: var(--saida); }

/* modal / gaveta */
.fundo { position: fixed; inset: 0; background: rgba(15, 27, 45, .38); z-index: 80; display: grid; place-items: center; padding: 18px; animation: aparece .15s ease; }
.fundo-lado { place-items: stretch end; padding: 0; }
.modal, .gaveta { background: #fff; border-radius: 12px; width: 100%; max-height: calc(100vh - 36px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(15, 27, 45, .25); }
.gaveta { border-radius: 0; max-height: none; height: 100vh; width: min(640px, 100vw); animation: desliza .2s ease; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.modal-corpo { padding: 18px; overflow-y: auto; flex: 1; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.texto { color: var(--texto); }
@keyframes aparece { from { opacity: 0; } }
@keyframes desliza { from { transform: translateX(40px); opacity: 0; } }

.det-cab { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.det-cab .valor-grande { font-size: 1.7rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.det-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 16px; }
.det-lista div { border-bottom: 1px solid var(--linha); padding-bottom: 6px; min-width: 0; }
.det-lista dt { font-size: .78rem; color: var(--mudo); }
.det-lista dd { margin: 0; color: var(--tinta); font-weight: 500; overflow-wrap: anywhere; }
.det-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.secao { margin: 18px 0 8px; font-size: .92rem; }
.aviso { background: var(--alerta-fundo); color: #6E4B04; padding: 10px 12px; border-radius: var(--raio-p); font-size: .88rem; margin: 10px 0; }
.aviso.info { background: var(--ciano-fundo); color: #0A2FB0; }
.aviso.erro { background: var(--saida-fundo); color: var(--saida); }

.parcelas-tab input { min-height: 32px; padding: 4px 8px; }
.rateio-linha { display: grid; grid-template-columns: minmax(0, 1fr) 90px 36px; gap: 8px; margin-bottom: 6px; }

.vazio { text-align: center; padding: 42px 20px; color: var(--mudo); }
.carregando { display: flex; align-items: center; gap: 10px; color: var(--mudo); padding: 32px; justify-content: center; }
.giro { width: 18px; height: 18px; border: 2px solid var(--linha-forte); border-top-color: var(--ciano); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.erro-box { background: var(--saida-fundo); border-radius: var(--raio); padding: 16px 18px; color: var(--saida); display: grid; gap: 6px; justify-items: start; }

#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 120; display: grid; gap: 8px; }
.toast { background: var(--tinta); color: #fff; padding: 11px 16px; border-radius: 8px; box-shadow: var(--sombra); max-width: 380px; transition: opacity .4s, transform .4s; border-left: 4px solid var(--ciano); }
.toast.erro { border-left-color: #FF7A70; }
.toast.sai { opacity: 0; transform: translateY(6px); }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha-forte); margin-bottom: 16px; overflow-x: auto; }
.abas button { border: 0; background: none; padding: 9px 14px; cursor: pointer; font-weight: 600; color: var(--mudo); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas button[aria-selected=true] { color: var(--tinta); border-bottom-color: var(--ciano); }

.rot-cod { display: inline-grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.rot-cod code { font: 500 .8rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--mudo); letter-spacing: .01em; }
.rot-cod > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); }
td.col-nome { min-width: 340px; position: sticky; left: 0; background: #fff; z-index: 1; }
.abas { scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.arvore td.nivel-1 { font-weight: 700; color: var(--tinta); background: #FAFBFC; }
.arvore td.nivel-2 { font-weight: 600; padding-left: 26px; }
.arvore td.nivel-3 { padding-left: 42px; }
.arvore td.nivel-4 { padding-left: 58px; }
.arvore tr.resultado td { font-weight: 700; border-top: 2px solid var(--grafite); }

.autocompletar { position: relative; }
.autocompletar ul { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); box-shadow: var(--sombra); max-height: 260px; overflow-y: auto; }
.autocompletar li { padding: 7px 9px; border-radius: 4px; cursor: pointer; font-size: .9rem; }
.autocompletar li small { color: var(--mudo); display: block; }
.autocompletar li[aria-selected=true], .autocompletar li:hover { background: var(--ciano-fundo); }

@media print {
  .lateral, .topo, .barra-filtros, .det-acoes, .nao-imprimir, #toasts { display: none !important; }
  .casca { display: block; }
  body { background: #fff; }
  .conteudo { padding: 0; }
  .painel, .tabela-wrap { border: 0; }
  th { position: static; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- responsivo: tablet e celular */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; }
.grade-contas { grid-template-columns: minmax(240px, .55fr) minmax(0, 2.3fr); }
.barra-filtros > * { min-width: 0; }

@media (max-width: 1100px) {
  .grade-contas { grid-template-columns: minmax(0, 1fr); }
  .grade-contas .contas-lista { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 980px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .lateral { width: min(280px, 86vw); height: 100dvh; }
  .nav a { padding: 11px 12px; }
  .topo { padding-top: max(10px, env(safe-area-inset-top)); }
  .conteudo { padding-bottom: max(56px, calc(24px + env(safe-area-inset-bottom))); }
}

@media (max-width: 760px) {
  /* filtros e acoes empilhados */
  .barra-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .barra-filtros .campo { min-width: 0; }
  .barra-filtros .busca, .barra-filtros .largo, .barra-filtros > .segmentos, .barra-filtros .acoes { grid-column: 1 / -1; }
  .barra-filtros .acoes { margin-left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .barra-filtros .acoes .btn { width: 100%; }
  /* segmentos rolam de lado em vez de estourar */
  .segmentos { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmentos::-webkit-scrollbar { display: none; }
  .segmentos button { white-space: nowrap; flex: none; padding: 7px 12px; }
  /* tabelas: rolagem propria, nunca a pagina */
  .tabela-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
  table { font-size: .86rem; }
  th, td { padding: 8px 10px; }
  td .pessoa { max-width: 22ch; }
  .painel { padding: 14px; }
  .painel.sem-pad > header { padding: 14px 14px 0; }
  .hero { padding: 16px 16px 6px; gap: 14px; border-radius: 12px; }
  .hero-saldo .grande { font-size: 1.85rem; }
  .indicadores { gap: 10px; }
  .indicador { padding: 12px; }
  .indicador .v { font-size: 1.15rem; overflow-wrap: anywhere; }
  .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totais b { font-size: 1rem; overflow-wrap: anywhere; }
  .totais > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .extrato-filtros { width: 100%; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px !important; align-items: end; }
  .extrato-filtros > .btn { min-height: 42px; }
  .extrato-filtros > .btn:nth-last-child(-n+2) { grid-column: span 2; }
  .det-lista { grid-template-columns: minmax(0, 1fr); }
  .det-cab { flex-direction: column; }
  .grade-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grade-form .duplo { grid-column: 1 / -1; }
  /* modais viram folha de baixo, gaveta ocupa a tela */
  .fundo { place-items: end stretch; padding: 0; }
  .modal { border-radius: 16px 16px 0 0; max-height: 92dvh; max-width: none !important; padding-bottom: env(safe-area-inset-bottom); }
  .gaveta { width: 100vw; height: 100dvh; }
  .modal-rodape { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .modal-rodape .btn { width: 100%; }
  #toasts { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .topo .sel-empresa { max-width: 130px; }
  .paginacao { flex-wrap: wrap; gap: 8px; }
  /* campos com 16px: o iPhone nao da zoom ao focar */
  input, select, textarea { font-size: 16px; min-height: 42px; }
  .btn { min-height: 42px; }
}

@media (max-width: 420px) {
  .indicadores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grade-form, .barra-filtros:not(.extrato-filtros) { grid-template-columns: minmax(0, 1fr); }
  .totais { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entrada-marca .frase { font-size: 1.4rem; }
}