/* A app da Gestão (Financeira), por cima do estilo.css da Consulta de Stocks (06-11-2026).
   A cor da área é o cinza do grupo (#575756, fixado a 16-10-2026). */

:root, :root[data-area="gestao"] { --cor-area: #575756; --fundo-area: #F1F0EE; }
.areas [data-vista] { --c: #575756; }
.areas button[aria-pressed="true"] { border-bottom-color: #575756; }

.conteudo { padding: 16px; max-width: 1280px; margin: 0 auto; }
.conteudo h2 { margin: 0 0 4px; font-family: var(--display, "Baloo 2", sans-serif); }
.conteudo .intro { margin: 0 0 16px; color: var(--muted, #6b6b6b); max-width: 80ch; }

.fin-barra { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 12px; }
.fin-barra label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted, #6b6b6b); }
.fin-barra input, .fin-barra select { padding: 6px 8px; border: 1px solid var(--linha, #d9d6d1); border-radius: 8px; font: inherit; min-width: 9ch; }
.fin-barra input[type="search"], .fin-barra input[type="text"] { min-width: 18ch; }
.fin-barra .botao { align-self: end; }

.fin-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 24px; }
.fin-cartao { border: 1px solid var(--linha, #d9d6d1); border-radius: 12px; padding: 12px 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; display: grid; gap: 4px; }
.fin-cartao:hover { border-color: #575756; }
.fin-cartao__titulo { font-weight: 600; }
.fin-cartao__estado { font-size: .85rem; padding: 2px 8px; border-radius: 999px; justify-self: start; background: #F1F0EE; }
.fin-cartao__estado--bate { background: #E8FAF7; color: #0b6b5e; }
.fin-cartao__estado--nao { background: #FDE8E6; color: #9b2c22; }
.fin-cartao__nota { font-size: .85rem; color: var(--muted, #6b6b6b); }

.fin-tabela { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
.fin-tabela th, .fin-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--linha, #e6e3de); text-align: left; vertical-align: top; }
.fin-tabela th { position: sticky; top: 0; background: #F1F0EE; font-weight: 600; z-index: 1; }
.fin-tabela td.n, .fin-tabela th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-tabela tr.agregadora td { font-weight: 600; background: #FAF9F7; }
.fin-tabela tr.agregadora td:first-child { cursor: pointer; }
.fin-tabela tr.diferenca td.n.phc, .fin-tabela td.vermelho { color: #b3261e; }
.fin-tabela tr.seleccionada td { background: #E8FAF7; }
.fin-tabela .conta { font-family: ui-monospace, Menlo, Consolas, monospace; }
.fin-tabela tr[data-nivel="1"] td.conta { padding-left: 8px; }
.fin-tabela tr[data-nivel="2"] td.conta { padding-left: 20px; }
.fin-tabela tr[data-nivel="3"] td.conta { padding-left: 32px; }
.fin-tabela tr[data-nivel="4"] td.conta { padding-left: 44px; }
.fin-tabela tr[data-nivel="5"] td.conta { padding-left: 56px; }
.fin-tabela tr[data-nivel="6"] td.conta { padding-left: 68px; }
.fin-tabela tr[data-nivel="7"] td.conta,
.fin-tabela tr[data-nivel="8"] td.conta,
.fin-tabela tr[data-nivel="9"] td.conta { padding-left: 80px; }
.fin-tabela tr[data-nivel="10"] td.conta, .fin-tabela tr[data-nivel="11"] td.conta,
.fin-tabela tr[data-nivel="12"] td.conta, .fin-tabela tr[data-nivel="13"] td.conta,
.fin-tabela tr[data-nivel="14"] td.conta, .fin-tabela tr[data-nivel="15"] td.conta { padding-left: 92px; }
.fin-rodape { margin: 8px 0 0; font-size: .9rem; color: var(--muted, #6b6b6b); }
.fin-rolar { overflow: auto; max-height: 70vh; border: 1px solid var(--linha, #e6e3de); border-radius: 10px; }

.fin-plano { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 16px; }
.fin-arvore { max-height: 70vh; overflow: auto; border: 1px solid var(--linha, #e6e3de); border-radius: 10px; padding: 8px; background: #fff; font-size: .9rem; }
.fin-arvore details > summary { cursor: pointer; padding: 2px 4px; list-style: none; }
.fin-arvore details > summary::before { content: "▸ "; color: #9a9792; }
.fin-arvore details[open] > summary::before { content: "▾ "; }
.fin-arvore details { margin-left: 12px; }
.fin-arvore button { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 2px 4px; margin-left: 12px; cursor: pointer; border-radius: 6px; }
.fin-arvore button:hover, .fin-arvore button[aria-pressed="true"] { background: #E8FAF7; }
.fin-arvore .conta { font-family: ui-monospace, Menlo, Consolas, monospace; margin-right: 6px; color: #575756; }

.fin-aviso { border: 1px solid #F9D671; background: #FDF7E2; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; max-width: 80ch; }
.fin-vazio { color: var(--muted, #6b6b6b); padding: 24px 0; }

.fin-janela { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; padding: 16px; z-index: 20; }
.fin-janela__caixa { background: #fff; border-radius: 12px; max-width: 960px; width: 100%; max-height: 90vh; overflow: auto; padding: 16px; }
.fin-janela__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }

@media (max-width: 760px) {
  .fin-plano { grid-template-columns: 1fr; }
  .fin-tabela { font-size: .85rem; }
}