/* ============================================================
   componentes.css — botões, inputs, cards, tabelas, modais, badges
   ============================================================ */

/* ----- Botões ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio-md);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida);
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.btn-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-fg);
}
.btn-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }

.btn-perigo {
  color: var(--negative);
  border-color: var(--border);
}
.btn-perigo:hover { background: var(--negative-soft); border-color: var(--negative); }

.btn-fantasma {
  background: transparent;
  border-color: transparent;
}
.btn-fantasma:hover { background: var(--bg-hover); }

.btn-icone {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* Toggle de tema: mostra a lua quando o tema atual é claro
   (sugerindo "vá para o escuro") e o sol quando é escuro. Default
   sem `data-tema` é tratado como claro. O span wrapper precisa
   propagar o tamanho ao SVG; sem largura explícita o SVG colapsa. */
#toggle-tema .icone-tema { display: none; align-items: center; justify-content: center; line-height: 0; }
#toggle-tema .icone-tema svg { width: 18px; height: 18px; }
#toggle-tema .icone-tema-claro { display: inline-flex; }
[data-tema="escuro"] #toggle-tema .icone-tema-claro { display: none; }
[data-tema="escuro"] #toggle-tema .icone-tema-escuro { display: inline-flex; }

.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }

/* ----- Inputs ----- */
.input, .select, .textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--raio-md);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.textarea {
  height: auto;
  padding: 8px 10px;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-soft);
}
.input::placeholder { color: var(--text-subtle); }

.label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field { margin-bottom: 14px; }

.input-erro { border-color: var(--negative); }
.input-erro:focus { box-shadow: 0 0 0 3px var(--negative-soft); }

.msg-erro {
  color: var(--negative);
  font-size: var(--fs-xs);
  margin-top: 6px;
}

/* ----- Card ----- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--card-pad); }
.card-cabecalho {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-cabecalho h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}
.card-corpo { padding: var(--card-pad); }

/* ----- KPI Card ----- */
.kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.kpi-rotulo {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-medium);
}
.kpi-valor {
  font-family: var(--fonte-mono);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}
.kpi-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.kpi-spark { width: 80px; height: 28px; flex-shrink: 0; }
.kpi-spark svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* ----- Delta ----- */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-family: var(--fonte-mono);
  padding: 2px 6px;
  border-radius: var(--raio-sm);
}
.delta-positivo { color: var(--positive); background: var(--positive-soft); }
.delta-negativo { color: var(--negative); background: var(--negative-soft); }
.delta-neutro   { color: var(--text-muted); background: var(--bg-sunken); }

/* ----- Badge ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--bg-sunken);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge-acento { background: var(--acento-soft); color: var(--acento); }
.badge-positivo { background: var(--positive-soft); color: var(--positive); }
.badge-negativo { background: var(--negative-soft); color: var(--negative); }
.badge-aviso    { background: rgba(201, 126, 42, 0.14); color: #c97e2a; }

/* ----- Chips de loja (cabeçalhos com lista de lojas vinculadas) ----- */
.loja-chip-rotulo {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  margin-right: 8px;
}
.loja-chip-grupo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}
.loja-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--acento-soft);
  color: var(--acento);
  border: 1px solid transparent;
  cursor: default;
  transition: border-color var(--t-rapida);
}
.loja-chip:hover { border-color: var(--acento); }

/* ----- Status de pagamento (coluna Status na tabela de despesas) ----- */
.status-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn-status-pagar {
  background: var(--positive-soft);
  color: var(--positive);
  border-color: transparent;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.btn-status-pagar:hover {
  background: var(--positive);
  color: #fff;
  border-color: var(--positive);
}
.btn-status-acao {
  background: transparent;
  border: 0;
  color: var(--text-subtle);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.btn-status-acao:hover { color: var(--text); }

/* ----- KPIs com cor de acento (vencimentos) ----- */
.kpi-acento-negativo {
  border-left: 3px solid var(--negative);
}
.kpi-acento-aviso {
  border-left: 3px solid #c97e2a;
}
.kpi-acento-positivo {
  border-left: 3px solid var(--positive);
}

/* ----- Tabela vencimentos: faixa lateral colorida por urgência ----- */
.tabela-vencimentos td.venc-faixa {
  padding: 0;
  width: 6px;
}
.tabela-vencimentos td.venc-faixa[data-urgencia="vencida"] { background: var(--negative); }
.tabela-vencimentos td.venc-faixa[data-urgencia="hoje"]    { background: var(--negative); opacity: 0.8; }
.tabela-vencimentos td.venc-faixa[data-urgencia="proxima"] { background: #c97e2a; }
.tabela-vencimentos td.venc-faixa[data-urgencia="futura"]  { background: var(--border); }
.tabela-vencimentos td.venc-faixa[data-urgencia="paga"]    { background: var(--positive); opacity: 0.55; }

.tabela-vencimentos tr.linha-venc-vencida td:not(.venc-faixa),
.tabela-vencimentos tr.linha-venc-hoje    td:not(.venc-faixa) {
  background: rgba(220, 38, 38, 0.04);
}
.tabela-vencimentos tr.linha-venc-proxima td:not(.venc-faixa) {
  background: rgba(201, 126, 42, 0.05);
}
.tabela-vencimentos tr.linha-venc-paga td:not(.venc-faixa) {
  opacity: 0.7;
}

/* ----- Tabela "Pagas": tema verde positivo ----- */
.pagina-pagas h1 { color: var(--positive); }

.tabela-pagas td.paga-faixa {
  padding: 0;
  width: 6px;
}
.tabela-pagas td.paga-faixa[data-pontual="sim"] { background: var(--positive); }
.tabela-pagas td.paga-faixa[data-pontual="nao"] { background: #c97e2a; }

.tabela-pagas tr.linha-paga-em-dia td:not(.paga-faixa) {
  background: rgba(16, 185, 129, 0.05);
}
.tabela-pagas tr.linha-paga-atraso td:not(.paga-faixa) {
  background: rgba(201, 126, 42, 0.05);
}
.tabela-pagas tbody tr:hover td:not(.paga-faixa) {
  background: rgba(16, 185, 129, 0.10);
}
.badge-warning  { background: var(--warning-soft); color: var(--warning); }

/* ----- Tabela ----- */
.tabela-wrap { overflow-x: auto; }

/* Subtítulo discreto dentro de uma célula (descrição abaixo do nome
   principal, etc.). Trunca em uma linha; o texto completo é exibido
   via tooltip nativo ou no modal de detalhe. */
.celula-descricao {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tabela thead th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--pad-cell);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.tabela th.ordenavel {
  cursor: pointer;
  transition: color var(--t-rapida), background var(--t-rapida);
}
.tabela th.ordenavel:hover { color: var(--text); background: var(--bg-hover); }
.tabela th .ord-indicador {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}
.tabela th .ord-indicador .ord-asc,
.tabela th .ord-indicador .ord-desc {
  display: block;
  font-size: 7px;
  line-height: 1;
  color: var(--text-subtle);
  opacity: 0.5;
  transition: color var(--t-rapida), opacity var(--t-rapida);
}
.tabela th.ord-asc-ativo  .ord-indicador .ord-asc,
.tabela th.ord-desc-ativo .ord-indicador .ord-desc {
  color: var(--acento);
  opacity: 1;
}
.tabela th.ord-ativo { color: var(--text); }
/* Fallback para views que ainda usam textContent (caractere único) no
   .ord-indicador em vez do par de spans .ord-asc/.ord-desc. */
.tabela th.ord-ativo .ord-indicador { color: var(--acento); }

.tabela tbody td {
  padding: var(--pad-cell);
  border-bottom: 1px solid var(--border);
  height: var(--row-h);
  vertical-align: middle;
}
.tabela tbody tr:hover { background: var(--bg-hover); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td .num { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

[data-tabela-zebrada="sim"] .tabela tbody tr:nth-child(even) { background: var(--bg-row-alt); }
[data-tabela-zebrada="sim"] .tabela tbody tr:nth-child(even):hover { background: var(--bg-hover); }

[data-tabela-bordas="sim"] .tabela { border: 1px solid var(--border); border-radius: 0; }
[data-tabela-bordas="sim"] .tabela td,
[data-tabela-bordas="sim"] .tabela th {
  border-right: 1px solid var(--border);
}
[data-tabela-bordas="sim"] .tabela td:last-child,
[data-tabela-bordas="sim"] .tabela th:last-child { border-right: 0; }

.tabela-vazio {
  text-align: center;
  padding: 64px 20px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Painel ilustrado de "nenhum resultado". Usado dentro de td.tabela-vazio
   via UtilService.MontarVazio — ícone num círculo suave sobre a
   mensagem principal e a dica abaixo. */
.vazio-painel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 0;
}
.vazio-icone {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
}
.vazio-icone svg {
  width: 34px;
  height: 34px;
}
.vazio-mensagem {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  max-width: 420px;
}
.vazio-dica {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 380px;
}

/* ----- Paginação ----- */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.paginacao-controles { display: flex; gap: 4px; align-items: center; }

/* ----- Modal ----- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in 150ms ease;
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: pop-in 150ms ease;
}
.modal-grande { max-width: 720px; }
.modal-cabecalho {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-cabecalho h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal-corpo { padding: 20px; overflow-y: auto; }
.modal-rodape {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }

/* ----- Toast ----- */
.toast-area {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-md);
  padding: 10px 14px;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  animation: pop-in 180ms ease;
  pointer-events: auto;
  min-width: 220px;
}
.toast-erro { border-left-color: var(--negative); }
.toast-sucesso { border-left-color: var(--positive); }

/* ----- Pílula filtro ----- */
.filtro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  background: var(--acento-soft);
  color: var(--acento);
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.filtro-pill button {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 2px;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.filtro-pill button:hover { opacity: 1; }

/* ----- Switch ----- */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--t-rapida);
}
.switch-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--t-rapida);
}
.switch input:checked + .switch-slider { background: var(--acento); }
.switch input:checked + .switch-slider::before { transform: translateX(14px); }

/* ----- Spinner ----- */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Variante grande pro overlay — mais visível enquanto a página carrega
   um payload pesado (despesas filtradas, dashboard agregado etc.). */
.loading-overlay .spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}


/* ----- Loading overlay (LoadingService.Mostrar) ----- */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fade-in suave evita flash em chamadas que retornam <100ms. */
  animation: loading-overlay-fade var(--t-rapida) ease-out;
  pointer-events: auto;
}
@keyframes loading-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.loading-overlay-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-pop, 0 4px 16px rgba(0,0,0,.12));
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.loading-overlay-msg {
  letter-spacing: .02em;
}


/* ----- Skeleton (linhas/cards de placeholder enquanto carrega) ----- */
@keyframes skeleton-pulse {
  0%   { opacity: 0.55; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.55; }
}
.skeleton-bar {
  display: inline-block;
  width: 100%;
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--bg-sunken) 0%,
    var(--border) 50%,
    var(--bg-sunken) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite, skeleton-pulse 2s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-linha td {
  /* Garante altura consistente entre linhas mesmo com bar pequena. */
  padding-top: 12px;
  padding-bottom: 12px;
}
.skeleton-kpi {
  /* Suaviza a transição quando os dados reais chegarem. */
  opacity: 0.85;
}

/* ----- Auditoria: células truncadas (com table-layout fixed) ----- */
/* Uniformiza espaçamento (vertical + horizontal) e tipografia de TODAS
   as células da tabela #tab-aud — antes cada coluna definia seu próprio
   font-size inline e a coluna do toggle tinha padding lateral diferente,
   o que rompia o ritmo das colunas. Agora td e th compartilham o mesmo
   padding horizontal; tudo que estourar a largura da coluna colapsa em
   reticências (text-overflow: ellipsis). */
#tab-aud { font-size: 12.5px; }
#tab-aud thead th,
#tab-aud tbody td {
  padding: 12px 14px;
  vertical-align: middle;
}
#tab-aud tbody td {
  font-size: 12.5px;
  line-height: 1.45;
}
#tab-aud tbody td.aud-mono span,
#tab-aud tbody td.aud-resumo span {
  font-size: inherit;
}
#tab-aud tbody td .badge {
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
}
#tab-aud td.aud-toggle .btn {
  width: 24px;
  height: 24px;
  padding: 0;
}

.tabela td.aud-trunc,
.tabela th.aud-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabela td.aud-trunc > span,
.tabela td.aud-trunc > .badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  line-height: inherit;
}
/* Badges precisam de inline-flex pra alinharem icone+texto, mas com
   max-width e overflow:hidden funciona igual ao inline-block acima. */
.tabela td.aud-trunc > .badge { display: inline-flex; }


/* ----- Detalhes (auditoria expandido) ----- */
.detalhes-bloco {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--raio-md);
  padding: 10px 14px;
  font-family: var(--fonte-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-height: 260px;
  overflow: auto;
}
.detalhes-bloco .detalhes-linha {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 12px;
  padding: 4px 0;
  align-items: baseline;
}
.detalhes-bloco .detalhes-linha + .detalhes-linha {
  border-top: 1px dashed var(--border);
}
.detalhes-bloco .chave {
  color: var(--acento);
  font-weight: 500;
  white-space: nowrap;
}
.detalhes-bloco .valor,
.detalhes-bloco .valor-antes,
.detalhes-bloco .valor-depois {
  word-break: break-word;
  white-space: pre-wrap;
  color: var(--text);
}
.detalhes-bloco .valor-antes  { color: var(--negative); }
.detalhes-bloco .valor-depois { color: var(--positive); }


/* ----- Toggle "Agrupar por loja" ----- */
.toggle-agrupar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--surf-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: all 120ms ease;
}
.toggle-agrupar:hover { border-color: var(--acento); color: var(--text); }
.toggle-agrupar input { margin: 0; cursor: pointer; accent-color: var(--acento); }
.toggle-agrupar:has(input:checked) {
  background: var(--acento-soft);
  border-color: var(--acento);
  color: var(--acento);
  font-weight: 500;
}


/* ----- Linhas agrupadas — cabeçalho de loja + filhas (despesas/receitas) -----

   Hierarquia em tons neutros (sem acento em áreas grandes — gritava no
   modo escuro). O cabeçalho do grupo usa fundo sutil + borda fina;
   as filhas mostram pertencimento via linha vertical contínua à
   esquerda, sem ramo horizontal em "L" (o L sugeria fim de galho mesmo
   quando havia mais filhas abaixo). */

.tabela tr.linha-grupo {
  background: var(--bg-sunken);
  border-top: 2px solid var(--border-strong);
}
.tabela tr.linha-grupo:hover { background: var(--bg-hover); }
.tabela tr.linha-grupo td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.tabela tr.linha-grupo .grupo-caret {
  display: inline-block;
  width: 18px;
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 120ms ease;
}

.tabela tr.linha-filha {
  background: var(--bg-elevated);
}
.tabela tr.linha-filha:hover { background: var(--bg-hover); }
.tabela tr.linha-filha td {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.tabela tr.linha-filha td:first-child {
  padding-left: 38px;
  position: relative;
}
/* Trilho vertical contínuo: cada filha contribui com seu próprio segmento
   indo de cima a baixo da célula → segmentos de filhas adjacentes encostam
   e formam uma linha contínua. Sem traço horizontal (sem L). */
.tabela tr.linha-filha td:first-child::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
  opacity: 0.5;
}

/* Última filha antes do próximo grupo (ou último item da tabela): encurta
   o trilho até o meio da célula — sinaliza "fim do galho" só onde de fato
   acaba, não em toda filha. */
.tabela tr.linha-filha:has(+ tr.linha-grupo) td:first-child::before,
.tabela tr.linha-filha:last-child           td:first-child::before {
  bottom: 50%;
}
.tabela tr.linha-filha:has(+ tr.linha-grupo) td,
.tabela tr.linha-filha:last-child           td {
  border-bottom-color: var(--border-strong);
}


/* ----- Chooser de tipo de lançamento (admin/novoLancamento) ----- */
.escolha-shell {
  max-width: 920px;
  margin: 0 auto;
}
.escolha-cabecalho {
  text-align: center;
  margin-bottom: 28px;
}
.escolha-cabecalho .escolha-marca {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--acento-soft);
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 14px;
}
.escolha-cabecalho h1 { margin: 0; font-size: 22px; font-weight: 600; }

.escolha-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 760px) {
  .escolha-grid { grid-template-columns: 1fr; }
}
.escolha-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 28px 22px 24px;
  font: inherit;
  color: inherit;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-rapida), background var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida);
}
.escolha-card:hover {
  border-color: var(--acento);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, var(--shadow-sm));
}
.escolha-card:active { transform: translateY(1px); }
.escolha-card:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.escolha-bola {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.escolha-bola-despesa { background: var(--negative-soft); color: var(--negative); }
.escolha-bola-receita { background: var(--positive-soft); color: var(--positive); }
.escolha-bola-folha   { background: var(--acento-soft);   color: var(--acento); font-size: 22px; }
.escolha-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.escolha-sub {
  margin-top: 2px;
  line-height: 1.45;
  font-size: 12.5px;
}


/* ----- Menu de "..." em ações de tabela (folhasPagamento) -----
   Usado para colapsar ações secundárias relacionadas ao comprovante
   (trocar / baixar / remover) em um único trigger ⋯, reduzindo a
   poluição visual da linha. Posicionado em relação ao trigger,
   alinhado à direita pra não estourar a borda da tabela. */
.acoes-mais {
  position: relative;
  display: inline-block;
}
.acoes-mais-trigger {
  font-weight: 700;
  letter-spacing: 1px;
}
/* Posicionado via `position: fixed` + cálculo em JS a partir do
   getBoundingClientRect() do trigger — o ancestral `.tabela-wrap`
   tem `overflow-x: auto`, então um menu absoluto seria recortado e
   forçaria scroll horizontal. `fixed` ignora overflow ancestral. */
.acoes-menu {
  position: fixed;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* `display:flex` acima sobrescreveria a regra default `[hidden]{display:none}`
   do user agent — restauramos explicitamente para que o atributo `hidden`
   no markup mantenha o menu fechado por padrão. */
.acoes-menu[hidden] { display: none; }
.acoes-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--raio-sm);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text);
  width: 100%;
  white-space: nowrap;
}
.acoes-menu-item:hover { background: var(--bg-hover); }
.acoes-menu-item:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.acoes-menu-item.perigo { color: var(--negative); }
.acoes-menu-item.perigo:hover { background: var(--negative-soft); }