/* Balloni Advogados - sistema visual do painel (protótipo) */
:root {
  --papel: #f2f4f7;
  --painel: #ffffff;
  --painel-2: #f8f9fb;
  --linha: #e2e6ec;
  --linha-forte: #c9d0da;
  --tinta: #0f1e2e;
  --tinta-2: #475669;
  --tinta-3: #7a8796;
  --marca: #12365c;
  --marca-2: #1d4f85;
  --marca-suave: #e6eef8;
  --latao: #b38b3f;
  --latao-suave: #f6efe0;
  --ok: #1a8a62;
  --ok-suave: #e1f4ec;
  --atencao: #a86a0f;
  --atencao-suave: #fbf0da;
  --risco: #c0412b;
  --risco-suave: #fbe6e1;
  --info: #2a6fba;
  --info-suave: #e3eefa;
  --sombra: 0 1px 2px rgba(15, 30, 46, .06);
  --raio: 10px;
  --raio-p: 6px;
  --lateral: 252px;
  --f-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-titulo: "Fraunces", Georgia, serif;
}
[data-tema="escuro"] {
  --papel: #0a1520;
  --painel: #101e2c;
  --painel-2: #0d1926;
  --linha: #1d2f42;
  --linha-forte: #2b4259;
  --tinta: #e9eef4;
  --tinta-2: #a9b6c4;
  --tinta-3: #73849a;
  --marca: #8db7ea;
  --marca-2: #6aa0e0;
  --marca-suave: #14293f;
  --latao: #d2ad63;
  --latao-suave: #2b2414;
  --ok: #3cc596;
  --ok-suave: #0f2b24;
  --atencao: #e0a844;
  --atencao-suave: #2e2410;
  --risco: #ef7a64;
  --risco-suave: #34171a;
  --info: #6aa7ec;
  --info-suave: #10243a;
  --sombra: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--marca-2); text-decoration: none; }
:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
.vazio { color: var(--tinta-3); }
.direita { text-align: right; }
.centro { text-align: center; }

/* ---------- casca ---------- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.app.recolhida { --lateral: 68px; }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  background: var(--painel); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; padding: 14px 12px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.marca-selo {
  width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--marca); color: #fff;
  display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 600; font-size: 19px; letter-spacing: -.02em;
}
[data-tema="escuro"] .marca-selo { color: #0a1520; }
.marca-nome { font-family: var(--f-titulo); font-weight: 600; font-size: 16px; line-height: 1.1; }
.marca-nome small { display: block; font-family: var(--f-ui); font-weight: 400; font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.recolhida .marca-nome, .recolhida .nav-grupo, .recolhida .nav-item span.rot, .recolhida .nav-item .selo, .recolhida .pessoa-dados { display: none; }
.nav-grupo { font-size: 12px; font-weight: 600; color: var(--tinta-3); padding: 14px 10px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta-2);
  position: relative; font-size: 14px;
}
.nav-item:hover { background: var(--painel-2); color: var(--tinta); }
.nav-item.ativo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.nav-item.ativo::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--latao); }
.nav-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .selo { margin-left: auto; font-size: 11px; background: var(--latao-suave); color: var(--latao); padding: 1px 7px; border-radius: 99px; font-weight: 600; }
.nav-item.bloqueado { opacity: .38; cursor: not-allowed; }
.lateral-fim { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 10px; }
.pessoa-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--latao-suave); color: var(--latao); display: grid; place-items: center; font-weight: 700; flex: none; }
.pessoa-dados { min-width: 0; line-height: 1.25; }
.pessoa-dados b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa-dados small { color: var(--tinta-3); font-size: 11.5px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 28px; background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.migalha { display: flex; align-items: center; gap: 8px; color: var(--tinta-3); font-size: 13px; margin-right: auto; }
.migalha b { color: var(--tinta); font-weight: 600; }
.btn-icone { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--painel); border-radius: 8px; color: var(--tinta-2); }
.btn-icone:hover { border-color: var(--linha-forte); color: var(--tinta); }
.btn-icone svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.campo, .seletor {
  height: 34px; padding: 0 10px; border: 1px solid var(--linha); background: var(--painel); border-radius: 8px; color: var(--tinta);
}
.seletor { padding-right: 6px; }
.busca-atalho { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--linha); background: var(--painel); border-radius: 8px; color: var(--tinta-3); min-width: 200px; }
.busca-atalho kbd { margin-left: auto; font: 11px var(--f-ui); border: 1px solid var(--linha); border-radius: 4px; padding: 0 5px; }
.saude { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel); font-size: 13px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ponto.atencao { background: var(--atencao); } .ponto.risco { background: var(--risco); }
.exemplo { font-size: 12px; color: var(--atencao); background: var(--atencao-suave); border-radius: 99px; padding: 3px 10px; font-weight: 600; }

.conteudo { padding: 26px 28px 60px; max-width: 1560px; width: 100%; }
.cabeca { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabeca h1 { font-family: var(--f-titulo); font-weight: 600; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.cabeca p { color: var(--tinta-2); margin-top: 4px; max-width: 70ch; }
.cabeca .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- peças ---------- */
.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.painel-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.painel-cab h2 { font-size: 15px; font-weight: 600; }
.painel-cab small { color: var(--tinta-3); }
.painel-cab .acoes { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.painel-corpo { padding: 14px 18px 18px; }
.painel-corpo.sem { padding: 0; }
.grade { display: grid; gap: 16px; }
.grade > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.mt { margin-top: 16px; }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3, .g-2-1, .g-3-2, .g-1-2 { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 40; width: 270px; transform: translateX(-100%); transition: transform .2s; }
  .app.menu-aberto .lateral { transform: none; }
  .g2, .g4 { grid-template-columns: minmax(0, 1fr); }
  .conteudo, .topo { padding-left: 16px; padding-right: 16px; }
  .busca-atalho { min-width: 0; }
}

.kpi { padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .rotulo { color: var(--tinta-2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi .valor { font-family: var(--f-titulo); font-weight: 600; font-size: 30px; letter-spacing: -.02em; margin-top: 6px; line-height: 1.05; }
.kpi .valor small { font-size: 16px; font-weight: 500; color: var(--tinta-2); margin-left: 2px; }
.kpi .rodape { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--tinta-3); }
.kpi svg.spark { position: absolute; right: 14px; top: 16px; opacity: .85; }
.delta { font-weight: 600; font-size: 12.5px; }
.delta.sobe { color: var(--ok); } .delta.desce { color: var(--risco); } .delta.neutro { color: var(--tinta-3); }
.delta.bom-desce { color: var(--ok); } .delta.mau-sobe { color: var(--risco); }
.ajuda { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--linha-forte); color: var(--tinta-3); font-size: 10px; cursor: help; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--painel-2); color: var(--tinta-2); border: 1px solid var(--linha); white-space: nowrap; }
.chip.ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.chip.atencao { background: var(--atencao-suave); color: var(--atencao); border-color: transparent; }
.chip.risco { background: var(--risco-suave); color: var(--risco); border-color: transparent; }
.chip.info { background: var(--info-suave); color: var(--info); border-color: transparent; }
.chip.marca { background: var(--marca-suave); color: var(--marca); border-color: transparent; }
.chip.latao { background: var(--latao-suave); color: var(--latao); border-color: transparent; }

.btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { border-color: var(--linha-forte); }
.btn.primario { background: var(--marca); color: #fff; border-color: var(--marca); }
[data-tema="escuro"] .btn.primario { color: #0a1520; }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--tinta-2); }
.btn.pequeno { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.perigo { color: var(--risco); }

.abas { display: inline-flex; gap: 2px; padding: 3px; background: var(--painel-2); border: 1px solid var(--linha); border-radius: 9px; flex-wrap: wrap; }
.aba { border: 0; background: none; padding: 5px 12px; border-radius: 6px; color: var(--tinta-2); font-weight: 500; font-size: 13px; }
.aba.ativo { background: var(--painel); color: var(--tinta); box-shadow: 0 0 0 1px var(--linha); font-weight: 600; }

.interruptor { width: 34px; height: 20px; border-radius: 99px; border: 0; background: var(--linha-forte); position: relative; transition: background .15s; flex: none; padding: 0; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor.on { background: var(--marca-2); }
.interruptor.on::after { transform: translateX(14px); }
.caixa { width: 16px; height: 16px; accent-color: var(--marca-2); }

/* ---------- tabela ---------- */
.rolagem { overflow: auto; }
table.tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tab th { position: sticky; top: 0; background: var(--painel); text-align: left; font-weight: 600; color: var(--tinta-2); font-size: 12.5px; padding: 9px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; z-index: 2; }
.tab th.num, .tab td.num { text-align: right; white-space: nowrap; }
.tab td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab tbody tr:hover td { background: var(--painel-2); }
.tab tr.clicavel { cursor: pointer; }
.tab .nivel-1 td:first-child { padding-left: 34px; }
.tab .nivel-2 td:first-child { padding-left: 56px; }
.tab tr.total td { font-weight: 700; background: var(--painel-2); border-top: 1px solid var(--linha-forte); }
.tab td .sub { display: block; color: var(--tinta-3); font-size: 12px; }
.sem-dado { color: var(--tinta-3); }
.bar-mini { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--linha); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.bar-mini i { display: block; height: 100%; border-radius: 3px; background: var(--marca-2); }
.val-ok { color: var(--ok); font-weight: 600; } .val-risco { color: var(--risco); font-weight: 600; }
.trava { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); font-size: 12.5px; }
.trava svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bloco-travado { border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 18px; color: var(--tinta-3); display: flex; align-items: center; gap: 10px; background: var(--painel-2); }

/* ---------- gráficos ---------- */
svg.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf text { font: 11px var(--f-ui); fill: var(--tinta-3); }
.graf .eixo { stroke: var(--linha); stroke-width: 1; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); margin-top: 8px; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* ---------- gaveta, paleta, avisos ---------- */
#gaveta-fundo { position: fixed; inset: 0; background: rgba(8, 18, 30, .35); z-index: 60; }
#gaveta { position: fixed; inset: 0; margin: auto; width: min(760px, 92vw); height: fit-content; max-height: 88vh; display: flex; flex-direction: column; background: var(--painel); z-index: 61; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(8, 18, 30, .28); animation: entra .18s ease-out; outline: none; }
#gaveta[hidden] { display: none; }
@keyframes entra { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #gaveta { animation: none; } }
@media (max-width: 800px) { #gaveta { width: 94vw; max-height: 92vh; } }
.gaveta-cab { flex: none; position: sticky; top: 0; background: var(--painel); padding: 18px 22px 12px; border-bottom: 1px solid var(--linha); display: flex; gap: 12px; align-items: flex-start; z-index: 2; }
.gaveta-cab h2 { font-family: var(--f-titulo); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.gaveta-cab small { color: var(--tinta-3); display: block; margin-top: 2px; }
.gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px 28px; display: grid; gap: 18px; }
.pares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pares div { background: var(--painel-2); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; }
.pares small { color: var(--tinta-3); display: block; font-size: 12px; }
.pares b { font-family: var(--f-titulo); font-size: 18px; font-weight: 600; }
.porque { border-left: 3px solid var(--latao); padding: 10px 14px; background: var(--latao-suave); border-radius: 0 8px 8px 0; }
.porque b { display: block; margin-bottom: 3px; }
.porque ul { margin: 6px 0 0; padding-left: 18px; color: var(--tinta-2); }

#paleta { position: fixed; inset: 0; z-index: 80; background: rgba(8, 18, 30, .4); display: grid; place-items: start center; padding-top: 14vh; }
.paleta-caixa { width: min(560px, 92vw); background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(8, 18, 30, .3); }
.paleta-caixa input { width: 100%; height: 50px; border: 0; border-bottom: 1px solid var(--linha); padding: 0 18px; background: transparent; outline: none; font-size: 16px; }
.paleta-lista { max-height: 340px; overflow-y: auto; padding: 6px; }
.paleta-lista button { display: flex; width: 100%; text-align: left; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 8px; align-items: center; }
.paleta-lista button.sel, .paleta-lista button:hover { background: var(--marca-suave); }
.paleta-lista small { margin-left: auto; color: var(--tinta-3); }
#avisos { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; }
.aviso { background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 10px; font-weight: 500; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); animation: entra .18s ease-out; }

/* ---------- modo telão ---------- */
body.telao .lateral, body.telao .topo { display: none; }
body.telao .app { grid-template-columns: 1fr; }
body.telao .conteudo { max-width: none; padding: 36px 48px; }
.telao-sair { position: fixed; top: 14px; right: 16px; z-index: 50; opacity: .35; }
.telao-sair:hover { opacity: 1; }

/* ---------- portas (tela inicial) e troca de porta ---------- */
.trocar-porta { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--linha); background: var(--painel-2); border-radius: 9px; padding: 8px 10px; margin: 0 0 6px; color: var(--tinta); }
.trocar-porta:hover { border-color: var(--linha-forte); }
.trocar-porta svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta-3); }
.trocar-porta .rot { font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.trocar-porta small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 11.5px; }
.recolhida .trocar-porta .rot { display: none; }
.portas-app { display: block; }
.portas { max-width: 1120px; margin: 0 auto; padding: 28px 28px 60px; min-height: 100vh; display: flex; flex-direction: column; }
.portas header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portas-ctl { display: flex; align-items: center; gap: 12px; }
.portas section { margin: auto 0; padding: 7vh 0 4vh; }
.portas h1 { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 30px; }
.portas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.porta { text-align: left; border: 1px solid var(--linha); background: var(--painel); border-radius: 14px; padding: 28px 26px 22px; display: grid; gap: 12px; align-content: start; min-height: 230px; transition: border-color .15s, transform .15s; }
.porta:hover:not(:disabled) { border-color: var(--marca-2); transform: translateY(-2px); }
.porta h2 { font-family: var(--f-titulo); font-size: 28px; font-weight: 600; letter-spacing: -.015em; color: var(--marca); }
.porta p { color: var(--tinta-2); font-size: 15px; max-width: 28ch; }
.porta-pe { margin-top: auto; font-size: 13px; color: var(--tinta-3); display: inline-flex; gap: 6px; align-items: center; }
.porta-bloq { opacity: .55; cursor: not-allowed; }
.portas-nota { color: var(--tinta-3); margin-top: 22px; max-width: 60ch; }
@media (max-width: 900px) { .portas-grade { grid-template-columns: 1fr; } .porta { min-height: 0; } }
.sair-lateral { margin-left: auto; }
.recolhida .sair-lateral { display: none; }