/* ==========================================================================
   MINHAS FINANÇAS — direção B "O mês em foco" (handoff/financas/PLANO-FINANCAS.md, 5.1, 5.3 e 5.6)
   Toda regra prefixada com .fin- para não afetar outras telas. Tokens de css/tokens.css.
   Laranja só em: botão principal, barra de progresso, mês em foco e âncora ativa. Nunca em área grande.
   A página nunca rola de lado; tabela e gráfico de colunas rolam dentro do cartão.
   ========================================================================== */

.fin-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-variant-numeric: tabular-nums;
}
.fin-wrap *, .fin-wrap *::before, .fin-wrap *::after { box-sizing: border-box; }
.fin-cabecalho { margin-bottom: 0; }
.fin-wrap > .fin-cabecalho { margin: 0 !important; }
.fin-wrap > .fin-cabecalho p { margin: 4px 0 0; }

/* == TOPO COMPACTO (Adendo 2): uma linha só — ano, botão do mês e âncoras — que gruda ao rolar em todas as
   larguras. As 12 pílulas ficam escondidas e abrem embaixo da linha quando a pessoa toca no mês. == */
.fin-topo {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  background: var(--de-marfim, #F7F5F1);
  border-bottom: 1px solid var(--de-divisoria, #F0EDE7);
}
.fin-topo-linha { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.fin-topo select.fin-ano {
  flex: 0 0 auto; width: auto; min-width: 0; height: 44px; min-height: 44px;
  padding: 0 28px 0 12px !important; border-radius: var(--de-raio-controle, 8px) !important;
  border-color: var(--de-borda, #DEDBD5); font-size: 14px !important; font-weight: 700;
}
.fin-mes-botao {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--de-raio-controle, 8px); border: 1px solid var(--de-borda, #DEDBD5);
  background: var(--de-branco, #fff); color: var(--de-grafite, #181818); box-shadow: none;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.fin-mes-botao:hover { filter: none; border-color: var(--de-laranja-principal, #FF7617); }
.fin-mes-botao[aria-expanded="true"] { border-color: var(--de-laranja-principal, #FF7617); background: var(--de-laranja-claro, #FFF7F0); }
.fin-seta { font-size: 12px; color: var(--de-texto-secundario, #5D6068); }
.fin-mes-botao[aria-expanded="true"] .fin-seta { transform: rotate(180deg); }
.fin-mes-curto { display: none; }
.fin-pilulas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.fin-pilulas[hidden] { display: none !important; }
.fin-pilula-mes {
  min-height: 44px; min-width: 0; padding: 0 6px;
  border-radius: var(--de-raio-pilula, 999px);
  border: 1px solid var(--de-borda, #DEDBD5);
  background: var(--de-branco, #fff);
  color: var(--de-grafite, #181818);
  font-size: 13px; font-weight: 600; text-transform: lowercase;
  box-shadow: none;
}
.fin-pilula-mes.fin-hoje { border-color: var(--de-laranja-claro4, #F9C79C); }
.fin-pilula-mes.fin-ativo { background: var(--de-laranja-principal, #FF7617); border-color: var(--de-laranja-principal, #FF7617); color: #fff; }
.fin-subnav { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Degradê na borda direita: mostra que a faixa continua para o lado. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.fin-subnav::-webkit-scrollbar { display: none; }
.fin-ancora {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--de-raio-pilula, 999px); font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--de-texto-secundario, #5D6068);
}
.fin-ancora:hover { background: var(--de-marfim-apoio, #FBFAF8); color: var(--de-grafite, #181818); }
@media (max-width: 899px) { .fin-pilulas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .fin-pilulas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fin-mes-longo { display: none; }
  .fin-mes-curto { display: inline; }
  .fin-mes-botao { padding: 0 10px; }
  .fin-topo select.fin-ano { width: 92px; padding: 0 22px 0 10px !important; }
  .fin-ancora { padding: 0 10px; }
}

/* Rótulos em caixa alta dos cartões de número. */
.fin-numero-rotulo,
.fin-ano-resumo dt,
.fin-totais dt {
  font-family: var(--de-fonte-texto, 'Inter', sans-serif);
  font-size: var(--de-tamanho-rotulo, 12px);
  font-weight: var(--de-peso-rotulo, 700);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--de-texto-secundario, #5D6068);
}

/* == SEÇÕES == */
.fin-secao {
  background: var(--de-branco, #fff);
  border: 1px solid var(--de-borda, #DEDBD5);
  border-radius: var(--de-raio-card, 16px);
  padding: clamp(18px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 16px;
  scroll-margin-top: 150px;
  min-width: 0;
}
.fin-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin-secao-topo h2 { margin: 0; font-size: 22px; }
.fin-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fin-acoes .quiet, .fin-item-botoes .quiet { min-height: 44px; border-radius: var(--de-raio-pilula, 999px); color: var(--de-grafite, #181818); border-color: var(--de-borda, #DEDBD5); background: var(--de-branco, #fff); font-weight: 600; }
.fin-principal { min-height: 48px; }
.fin-subtitulo { margin: 8px 0 0; font-size: 15px; color: var(--de-grafite, #181818); }
.fin-mes-titulo { margin: 0; font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 16px; grid-column: 1 / -1; }
.fin-dica { margin: 0; font-size: 13px; }
.fin-vazio-texto { margin: 0; font-size: 15px; color: var(--de-grafite, #181818); max-width: 60ch; }
.fin-vazio-cartao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--de-raio-controle, 8px); background: var(--de-laranja-claro, #FFF7F0); border: 1px solid var(--de-laranja-claro3, #FBD2B2); }
.fin-vazio-cartao p { margin: 0; }
.fin-link-secao { font-weight: 700; color: var(--de-laranja-escuro, #A6410A); }

/* == CARTÕES DE NÚMERO: 1 coluna a 320, 2 a partir de 480, 3/4 a partir de 900 == */
.fin-numeros { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: 0; }
.fin-numero {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 14px 16px; border-radius: var(--de-raio-controle, 8px);
  background: var(--de-marfim-apoio, #FBFAF8); border: 1px solid var(--de-divisoria, #F0EDE7);
}
.fin-numero-valor { font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif); font-size: var(--de-tamanho-numero-destaque, 24px); font-weight: 700; color: var(--de-grafite, #181818); overflow-wrap: anywhere; }
.fin-numero-nota { font-size: 13px; color: var(--de-texto-secundario, #5D6068); }
.fin-numero-legenda { font-size: 12px; color: var(--de-texto-secundario, #5D6068); line-height: 1.45; }
.fin-negativo .fin-numero-valor, .fin-negativo dd, td.fin-negativo, .fin-negativo .fin-numero-nota, .fin-negativo > .fin-numero-nota { color: var(--de-status-frio-texto, #8E2A26); }
.fin-vende { background: var(--de-laranja-claro, #FFF7F0); border-color: var(--de-laranja-claro3, #FBD2B2); }
.fin-visao-grade { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; min-width: 0; }
.fin-ano-resumo { display: grid; grid-template-columns: 1fr; gap: 10px 20px; margin: 0; }
.fin-ano-resumo div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--de-divisoria, #F0EDE7); min-width: 0; }
.fin-ano-resumo dt { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.fin-ano-resumo dd { margin: 0; font-weight: 700; text-align: right; }

/* == LISTAS (receitas, despesas, dívidas, investimentos) == */
.fin-lista-grade { display: grid; grid-template-columns: 1fr; gap: 16px; min-width: 0; }
.fin-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.fin-item {
  /* Achado 390 (Prumo): valor e "⋯" formam um grupo (.fin-item-acoes / .fin-item-botoes) que nunca se separa. Se o
     grupo cabe ao lado do nome, fica na mesma linha; se não cabe (valor de R$ 100 milhões a 320 px), o grupo inteiro
     desce junto para a linha de baixo, alinhado à direita, e o nome fica com a largura toda em vez de virar uma
     letra por linha. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--de-divisoria, #F0EDE7); min-width: 0;
}
.fin-item-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; max-width: 100%; }
.fin-item:last-child { border-bottom: 0; }
.fin-item-nome { flex: 1 1 96px; min-width: min(96px, 100%); display: flex; flex-direction: column; gap: 4px; font-weight: 600; overflow-wrap: anywhere; }
.fin-item-nome small { font-weight: 400; color: var(--de-texto-secundario, #5D6068); font-size: 13px; }
.fin-item-alto { align-items: flex-start; }
.fin-item-botoes { display: flex; gap: 6px; align-items: flex-start; flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; max-width: 100%; }
/* R3-2: com o menu aberto em fluxo, os botões da linha ficam alinhados pelo topo (o "Ver parcelas" não sobe). */
.fin-item-automatica { background: var(--de-marfim-apoio, #FBFAF8); margin: 0 -10px; padding: 10px; border-radius: var(--de-raio-controle, 8px); border-bottom: 0; }
.fin-item-legenda { flex-basis: 100%; font-size: 12px; color: var(--de-texto-secundario, #5D6068); }
.fin-selo { display: inline-block; align-self: flex-start; margin-left: 0; padding: 2px 8px; border-radius: var(--de-raio-pilula, 999px); background: var(--de-divisoria, #F0EDE7); color: var(--de-status-seminteresse-texto, #4F4E49); font-size: 11px; font-weight: 700; vertical-align: middle; }
.fin-valor, .fin-situacao {
  min-height: 44px; padding: 0 14px; border-radius: var(--de-raio-controle, 8px);
  border: 1px solid var(--de-borda, #DEDBD5); background: var(--de-branco, #fff);
  color: var(--de-grafite, #181818); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.fin-valor:hover, .fin-situacao:hover { border-color: var(--de-laranja-principal, #FF7617); filter: none; }
.fin-valor-vazio { color: var(--de-texto-secundario, #5D6068); font-weight: 600; border-style: dashed; }
.fin-valor-fixo { font-weight: 700; padding: 0 14px; white-space: nowrap; }
span.fin-situacao { display: inline-flex; align-items: center; border-style: dashed; font-weight: 600; }
.fin-pago { color: var(--de-status-contrato-texto, #175E34) !important; }
.fin-situacao.fin-pago { border-color: var(--de-status-contrato-texto, #175E34); background: var(--de-status-contrato-fundo, #DFF1E4); }
.fin-totais { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.fin-totais div { padding: 12px 14px; border-radius: var(--de-raio-controle, 8px); background: var(--de-marfim-apoio, #FBFAF8); }
.fin-totais dd { margin: 4px 0 0; font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 18px; }

/* Menu "⋯" por linha: nativo (details), sem código. */
.fin-menu { position: relative; padding: 0; display: block; }
.fin-menu > .fin-menu-botao { display: flex; }
/* O summary em bloco (flex) e o details fechado com 44 px: a caixa do conteúdo escondido (8 px) fica fora, invisível, e o "⋯" alinha no mesmo topo do valor. */
.fin-menu:not([open]) > .fin-menu-lista { display: none; }
.fin-menu:not([open]) { height: 44px; }
/* Fechado, o details ficava com 52 px (caixa do conteúdo escondido) e empurrava o "⋯" 4 px acima do valor. */
.fin-menu-botao { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--de-raio-controle, 8px); border: 1px solid transparent; font-size: 20px; color: var(--de-texto-secundario, #5D6068); cursor: pointer; }
.fin-menu-botao::-webkit-details-marker { display: none; }
.fin-menu-botao:hover, .fin-menu[open] .fin-menu-botao { border-color: var(--de-borda, #DEDBD5); background: var(--de-branco, #fff); }
.fin-menu-lista { position: static; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding: 0; min-width: 0; background: transparent; border: 0; box-shadow: none; }
/* R3-2 (auditoria total): a lista abre em fluxo, na própria linha, e não cobre o "⋯" nem o texto da linha de baixo. */
.fin-menu-lista .quiet { justify-content: center; border: 1px solid var(--de-borda, #DEDBD5); border-radius: 6px; color: var(--de-grafite, #181818); min-height: 44px; background: var(--de-branco, #fff); }
.fin-menu-lista .quiet:hover { background: var(--de-marfim-apoio, #FBFAF8); filter: none; }
.fin-menu-lista .fin-perigo { color: var(--de-status-frio-texto, #8E2A26); }

/* Barra de progresso (laranja). */
.fin-barra { display: block; width: 100%; max-width: 360px; height: 8px; border-radius: 4px; background: var(--de-divisoria, #F0EDE7); overflow: hidden; }
.fin-barra-cheia, .fin-barra-cheia svg { display: block; width: 100%; height: 8px; }
.fin-barra-cheia svg rect { fill: var(--de-laranja-principal, #FF7617); }
.fin-numeros-tres { grid-template-columns: 1fr; }

/* == RELATÓRIO DO MÊS == */
.fin-relatorio-mes { margin: 0; display: flex; flex-direction: column; max-width: 520px; }
.fin-relatorio-mes > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--de-divisoria, #F0EDE7); }
.fin-relatorio-mes dd { margin: 0; font-weight: 600; text-align: right; }
.fin-sobrou dt, .fin-sobrou dd { font-weight: 800; font-size: 17px; }
.fin-previsto dt, .fin-previsto dd { color: var(--de-texto-secundario, #5D6068); font-weight: 500; font-size: 13px; }
.fin-graficos { display: grid; grid-template-columns: 1fr; gap: 20px; min-width: 0; }

/* == GRÁFICOS == */
.fin-grafico { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fin-grafico-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fin-grafico-titulo { font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 15px; }
.fin-botao-tabela { min-height: 44px; font-size: 13px; border-radius: var(--de-raio-pilula, 999px); color: var(--de-grafite, #181818); border-color: var(--de-borda, #DEDBD5); background: var(--de-branco, #fff); }
.fin-svg { display: block; width: 100%; height: auto; }
.fin-grafico:not(.fin-grafico-colunas) .fin-svg { max-width: 320px; margin: 0 auto; }
.fin-rolagem { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; }
/* PF-2: contain:paint impede que a largura da tabela vaze para a área de rolagem do <dialog> (a seta rolava a janela inteira). */
.fin-rolagem:focus-visible { outline: 3px solid var(--de-laranja-principal, #FF7617); outline-offset: 2px; }
.fin-rolagem-largo { min-width: 560px; max-width: 920px; margin: 0 auto; }
.fin-svg .fin-grade { stroke: var(--de-divisoria, #F0EDE7); stroke-width: 1; }
.fin-svg .fin-base { stroke: var(--de-borda, #DEDBD5); stroke-width: 1; }
.fin-svg .fin-eixo { fill: var(--de-texto-secundario, #5D6068); font: 500 12px var(--de-fonte-texto, 'Inter', sans-serif); }
.fin-svg .fin-eixo-foco { fill: var(--de-grafite, #181818); font-weight: 800; }
.fin-svg .fin-rotulo { fill: var(--de-grafite, #181818); font: 700 12px var(--de-fonte-texto, 'Inter', sans-serif); }
.fin-svg .fin-vazio { fill: var(--de-texto-secundario, #5D6068); font: 500 14px var(--de-fonte-texto, 'Inter', sans-serif); }
.fin-svg .fin-anel-vazio { stroke: var(--de-divisoria, #F0EDE7); }
.fin-svg .fin-centro { fill: var(--de-grafite, #181818); font: 800 20px var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif); }
.fin-svg .fin-centro-legenda { fill: var(--de-texto-secundario, #5D6068); font: 500 12px var(--de-fonte-texto, 'Inter', sans-serif); }
.fin-svg .fin-marca:hover, .fin-svg .fin-fatia:hover, .fin-svg .fin-ponto:hover { filter: brightness(.92); }
.fin-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--de-grafite, #181818); }
.fin-legenda li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fin-legenda-rosca { flex-direction: column; }
.fin-bolinha { width: 10px; height: 10px; flex: 0 0 10px; }

/* == TABELAS (ano inteiro, relatório, "Ver em tabela") == */
.fin-tabela, .fin-tabela-grafico { width: 100%; border-collapse: collapse; font-size: 13px; overflow: visible; border-radius: 0 !important; }
/* PF-1: a regra global table{overflow:hidden} (telas.css) anulava o position:sticky da coluna do nome; quem rola é o .fin-rolagem. */
.fin-tabela th, .fin-tabela td, .fin-tabela-grafico th, .fin-tabela-grafico td { padding: 10px 10px; border-bottom: 1px solid var(--de-divisoria, #F0EDE7); background: var(--de-branco, #fff); white-space: nowrap; text-align: right; }
.fin-tabela thead th, .fin-tabela-grafico thead th { font: 700 12px var(--de-fonte-texto, 'Inter', sans-serif); color: var(--de-texto-secundario, #5D6068); background: var(--de-marfim-apoio, #FBFAF8); }
.fin-tabela tbody th, .fin-tabela-grafico tbody th { text-align: left; position: sticky; left: 0; z-index: 1; font-weight: 700; }
/* PF-1: a célula de cabeçalho da coluna do nome também fica fixa (senão "abr" aparece em cima dos nomes ao rolar). */
.fin-tabela thead th:first-child, .fin-tabela-grafico thead th:first-child { position: sticky; left: 0; z-index: 2; }
.fin-tabela .fin-total th, .fin-tabela .fin-total td { font-weight: 800; }
.fin-tabela .fin-previsto th, .fin-tabela .fin-previsto td { color: var(--de-texto-secundario, #5D6068); font-weight: 500; }
.fin-tabela td .quiet { min-height: 36px; font-size: 12px; }

/* == JANELAS == */
.fin-form { display: flex; flex-direction: column; gap: 14px; }
.fin-form h2, .fin-confirmar h2, .fin-ano-inteiro h2 { margin: 0 0 4px; }
.fin-doze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fin-previa { margin: 0; font-weight: 700; color: var(--de-grafite, #181818); min-height: 1.5em; }
.fin-opcoes { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-opcoes legend { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.fin-opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--de-borda, #DEDBD5); border-radius: var(--de-raio-controle, 8px); font-weight: 600; }
.fin-opcao input { width: 18px; height: 18px; accent-color: var(--de-laranja-principal, #FF7617); }
.fin-confirmar p { margin: 0; }
button.fin-perigo-forte, button.quiet.fin-perigo-forte { background: var(--de-status-frio-ponto, #B4342F); border-color: var(--de-status-frio-ponto, #B4342F); color: #fff; font-weight: 800; }
.fin-ano-inteiro { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Foco visível de 3px. */
.fin-wrap :is(button, a, select, summary):focus-visible, .fin-form :is(input, select, button):focus-visible { outline: 3px solid var(--de-laranja-principal, #FF7617); outline-offset: 2px; }

/* == CELULAR (até 599 px) == */
@media (max-width: 599px) {
  .fin-valor, .fin-situacao { padding: 0 10px; }
  .fin-item-automatica { margin: 0; }
}
@media (min-width: 480px) {
  .fin-numeros, .fin-numeros-tres, .fin-ano-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-doze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .fin-numeros-tres, .fin-ano-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fin-visao-grade { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
  .fin-lista-grade { grid-template-columns: minmax(0, 1fr) 260px; }
  .fin-totais { grid-template-columns: 1fr; }
  .fin-doze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .fin-graficos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fin-graficos > .fin-grafico:last-child { grid-column: 1 / -1; }
}

/* == Botões da tela contra a regra geral button.quiet (telas.css, com !important) ==
   Ações (Nova linha, Ver o ano inteiro...) ficam na pílula padrão da plataforma. Os botões de valor e de
   situação são dado, não ação: cantos de 8px, 44px de altura e texto escuro. */
:is(.fin-wrap, #dialog-content) button.quiet:is(.fin-valor, .fin-situacao) {
  height: auto !important; min-height: 44px; padding: 0 14px !important;
  border-radius: var(--de-raio-controle, 8px) !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--de-grafite, #181818) !important;
}
:is(.fin-wrap, #dialog-content) button.quiet.fin-valor-vazio { color: var(--de-texto-secundario, #5D6068) !important; font-weight: 600 !important; border-style: dashed !important; }
:is(.fin-wrap, #dialog-content) button.quiet.fin-situacao.fin-pago { color: var(--de-status-contrato-texto, #175E34) !important; border-color: var(--de-status-contrato-texto, #175E34) !important; background: var(--de-status-contrato-fundo, #DFF1E4) !important; }
:is(.fin-wrap, #dialog-content) button.quiet:is(.fin-valor, .fin-situacao):hover { border-color: var(--de-laranja-principal, #FF7617) !important; }
.fin-menu-lista button.quiet { height: 44px; border: 1px solid var(--de-borda, #DEDBD5) !important; border-radius: 6px !important; justify-content: center; padding: 0 14px !important; color: var(--de-grafite, #181818) !important; font-size: 14px !important; }
.fin-menu-lista button.quiet.fin-perigo { color: var(--de-status-frio-texto, #8E2A26) !important; }
.fin-wrap button.quiet.fin-botao-tabela, .fin-wrap .fin-acoes button.quiet { height: 44px; padding: 0 18px; font-size: 14px !important; }
#dialog-content button.quiet.fin-perigo-forte { background: var(--de-status-frio-ponto, #B4342F) !important; border-color: var(--de-status-frio-ponto, #B4342F) !important; color: #fff !important; font-weight: 800 !important; }

/* O cabeçalho da plataforma também gruda no topo: o topo desta tela gruda logo abaixo dele (a altura
   é medida pela tela e passada em --fin-topo-topo). Compacto, ele gruda também no celular. */
.fin-topo { top: var(--fin-topo-topo, 0px); }
.fin-secao { scroll-margin-top: calc(var(--fin-topo-topo, 0px) + 76px); }
.fin-totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-totais dd { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .fin-totais { grid-template-columns: minmax(0, 1fr); }
  .fin-acoes { width: 100%; }
}
.fin-wrap .fin-tabela-grafico th:first-child, #dialog-content .fin-tabela th:first-child { text-align: left; }
.fin-wrap .fin-tabela-grafico tbody th, #dialog-content .fin-tabela tbody th { background: var(--de-branco, #fff); color: var(--de-grafite, #181818); text-transform: none; letter-spacing: 0; font-size: 13px; }
@media (min-width: 900px) { .fin-totais { grid-template-columns: minmax(0, 1fr); } }

/* B-3 (auditoria): no celular, as janelas do ano inteiro viram lista mês a mês; a tabela fica no computador. */
.fin-so-celular { display: none; }
.fin-mes-bloco { padding: 12px 0; border-bottom: 1px solid var(--de-divisoria, #F0EDE7); display: flex; flex-direction: column; gap: 8px; }
.fin-mes-bloco-titulo { margin: 0; font-size: 16px; }
.fin-mes-bloco-total { margin: 0; font-size: 14px; }
.fin-doze-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 13px; }
.fin-doze-lista li { display: flex; justify-content: space-between; gap: 6px; min-width: 0; color: var(--de-texto-secundario, #5D6068); }
.fin-doze-lista b { color: var(--de-grafite, #181818); overflow-wrap: anywhere; text-align: right; }
.fin-mes-bloco .fin-relatorio-mes > div { padding: 6px 0; }
@media (max-width: 599px) {
  .fin-so-computador { display: none; }
  .fin-so-celular { display: block; }
}
/* B-3: valor nunca quebra no meio; o rótulo do mês encolhe primeiro. */
.fin-doze-lista { font-size: 12px; gap: 6px 10px; }
.fin-doze-lista li { gap: 4px; }
.fin-doze-lista b { white-space: nowrap; overflow-wrap: normal; }
/* B-7: a regra geral td { color: … !important } (telas.css) apagava o vermelho do valor negativo. */
.fin-tabela td.fin-negativo, .fin-tabela-grafico td.fin-negativo { color: var(--de-status-frio-texto, #8E2A26) !important; }
/* F-B2: mês e ano da 1ª parcela lado a lado. */
.fin-mes-ano { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.fin-mes-ano legend { font-size: 12px; font-weight: 800; margin-bottom: 7px; padding: 0; }
.fin-mes-ano select { min-height: 44px; }
/* OP-8: nome longo na legenda quebra dentro do cartão. */
.fin-legenda { max-width: 100%; }
.fin-legenda li > span { min-width: 0; overflow-wrap: anywhere; }
/* OP-1: o topo gruda onde o cabeçalho termina (altura medida em --fin-topo-topo). A faixa marfim logo acima
   dele fica por baixo do degradê do cabeçalho e não pega clique; ela só tapa o conteúdo que passaria ali. */
.fin-topo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background: var(--de-marfim, #F7F5F1); pointer-events: none; }
.fin-secao h2[tabindex="-1"]:focus { outline: none; }
.fin-secao h2[tabindex="-1"]:focus-visible { outline: 3px solid var(--de-laranja-principal, #FF7617); outline-offset: 4px; }
/* OP-3: aviso de sessão dentro da janela, com o botão para entrar de novo. */
.fin-sessao { margin: 0; padding: 10px 12px; border-radius: var(--de-raio-controle, 8px); background: var(--de-status-frio-fundo, #FBE5E5); color: var(--de-status-frio-texto, #8E2A26); font-size: 14px; }
#dialog-content button.quiet.fin-entrar-de-novo { align-self: flex-start; color: var(--de-grafite, #181818) !important; }
/* Recado de erro dentro da janela (o aviso do canto fica atrás do fundo da janela aberta). */
.fin-erro { margin: 0; padding: 10px 12px; border-radius: var(--de-raio-controle, 8px); background: var(--de-status-frio-fundo, #FBE5E5); color: var(--de-status-frio-texto, #8E2A26); font-size: 14px; font-weight: 600; }