/* ============================================================
   AGENDA PSI — FINANCEIRO 3.0
   Reaproveita o shell, os tokens (--dd-*) e os primitivos definidos em
   dashboard-2.0.css (carregado ANTES deste arquivo) — mesma sidebar,
   topbar, tipografia, paleta, superfícies, bordas, sombras e raios do
   Dashboard 3.0 / Agenda 3.0 / Pacientes 3.0 / Prontuários 3.0.

   IDs e classes usados pelo JS (loadFinance/paymentHtml em
   painel-2.0-runtime.js) foram mantidos como estavam — inclusive a ORDEM
   dos elementos (.summary-value x4, .period button x3, campos do modal),
   de que o runtime depende por posição. Aqui é só a camada visual.

   Cor: roxo (--dd-violet) é destaque geral e ações primárias. Verde é
   recebido. Âmbar é pendente/a receber. Vermelho é reservado só para
   atraso, cancelamento ou erro real — nunca decoração.
   ============================================================ */

/* ============================================================
   BADGES / AVATAR / BOTÕES / CARD — reskin dos primitivos compartilhados,
   escopado a esta página. Fica no topo de proposito: os componentes mais
   especificos abaixo tambem levam a classe .aps-card/.aps-btn e precisam
   vencer o empate de especificidade pela ORDEM no arquivo.
   ============================================================ */
.aps-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3.5px 9px;border-radius:999px;line-height:1;white-space:nowrap}
.aps-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.aps-badge--success{color:#0b6b47;background:var(--dd-green-soft)}
.aps-badge--warning{color:#8a5a09;background:var(--dd-amber-soft)}
.aps-badge--danger{color:#a32a20;background:var(--dd-red-soft)}
.aps-badge--neutral{color:var(--dd-ink-soft);background:var(--dd-bg)}
.aps-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--dd-blue-soft);color:#1f4f96;font-weight:700;font-size:12px;flex:none}
.aps-card{background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:var(--dd-radius-lg);box-shadow:var(--dd-shadow-sm)}
.aps-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:var(--dd-radius-md);border:1px solid transparent;cursor:pointer;transition:background var(--dd-fast) var(--dd-ease),border-color var(--dd-fast) var(--dd-ease);white-space:nowrap}
.aps-btn--primary{background:var(--dd-violet);color:#fff;box-shadow:var(--dd-shadow-sm)}
.aps-btn--primary:hover{background:var(--dd-violet-dark)}
.aps-btn--secondary{background:var(--dd-surface);color:var(--dd-ink);border-color:var(--dd-border-strong)}
.aps-btn--secondary:hover{border-color:var(--dd-violet);background:var(--dd-violet-soft)}
.aps-btn:focus-visible{box-shadow:var(--dd-shadow-focus)}
.aps-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--dd-radius-md);border:1px solid var(--dd-border);background:var(--dd-surface);color:var(--dd-ink-soft);cursor:pointer}
.aps-icon-btn:hover{background:var(--dd-bg);color:var(--dd-ink)}
.aps-icon-btn:focus-visible{box-shadow:var(--dd-shadow-focus)}
.text-button{border:0;background:none;color:var(--dd-violet);font-size:12.5px;font-weight:700;cursor:pointer;padding:0}
.text-button:hover{text-decoration:underline}

/* ============================================================
   CABEÇALHO — título + navegação de mês + ação primária
   ============================================================ */
.fin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fin-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.period{display:inline-flex;align-items:center;gap:6px}
.fin-period-label{min-width:150px;padding:0 14px;height:38px;border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);background:var(--dd-surface);color:var(--dd-ink);font:600 13.5px/1 var(--dd-font-body);cursor:default}

/* ============================================================
   RESUMO — 4 indicadores clicáveis (mesmo padrão do .dd-kpi / Pacientes)
   ============================================================ */
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.summary-card{
  display:flex;align-items:center;gap:14px;width:100%;min-width:0;text-align:left;background:var(--dd-surface);
  border:1px solid var(--dd-border);border-radius:var(--dd-radius-lg);padding:16px 18px;font:inherit;color:inherit;
  box-shadow:var(--dd-shadow-sm);
}
/* Onda 2 (Mobile Hardening): a track de .summary já ganhou minmax(0,1fr)
   nos 3 breakpoints mobile, mas isso sozinho não bastava — .summary-card
   (o próprio item do grid, também display:flex) e o <div> sem classe que
   embrulha valor+rótulo têm min-width:auto por padrão (regra do flexbox),
   então herdavam o min-content do número da moeda (ex. "1.234.717,00",
   sem espaço pra quebrar) e continuavam empurrando o card pra fora da
   track calculada, mesmo com minmax(0,1fr) no container. Precisa de
   min-width:0 nos DOIS níveis (o item do grid E o wrapper interno) pra
   value/label realmente conseguirem quebrar linha dentro do espaço
   disponível em vez de vazar. */
.summary-card>div{min-width:0}
.summary-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:var(--dd-violet);background:var(--dd-violet-soft)}
.summary-icon svg{width:19px;height:19px}
.summary-icon.ok{color:#0b6b47;background:var(--dd-green-soft)}
.summary-icon.warn{color:#8a5a09;background:var(--dd-amber-soft)}
.summary-icon.danger{color:#a32a20;background:var(--dd-red-soft)}
/* Onda 2 (Mobile Hardening): "R$" e o número vêm com &nbsp; entre os dois
   (evita "R$" sozinho numa linha e o valor noutra — boa tipografia), o que
   torna "R$ 12.345,67" inteiro um único token sem nenhum ponto de quebra.
   Com min-width:0 liberando o card pra encolher de verdade (achado acima)
   e um valor de 6 dígitos em 320px (stress), esse token passou a ser mais
   largo que a caixa disponível e o texto vazava sem reticências — cortado
   ao meio do último dígito no primeiro card, e vazando por cima do
   segundo card até sair da tela. overflow-wrap:break-word só entra em
   ação quando o token realmente não cabe (o caso comum, valores de 2-5
   dígitos, nunca aciona isso); no caso raro ele quebra o número em vez de
   cortar ou vazar. */
.summary-value{font-family:var(--dd-font-display);font-size:21px;font-weight:700;line-height:1.15;color:var(--dd-ink);overflow-wrap:break-word}
.summary-label{margin-top:3px;color:var(--dd-ink-soft);font-size:12.5px;font-weight:600}
.fin-global-tag{color:var(--dd-ink-mute);font-weight:600;text-decoration:underline;text-decoration-style:dotted}
.summary-card--interactive{
  border:1px solid var(--dd-border);font-family:inherit;text-align:left;cursor:pointer;
  transition:transform var(--dd-fast) var(--dd-ease),box-shadow var(--dd-fast) var(--dd-ease),border-color var(--dd-fast) var(--dd-ease);
}
.summary-card--interactive:hover,.summary-card--interactive:focus-visible{transform:translateY(-2px);box-shadow:var(--dd-shadow-md);border-color:var(--dd-border-strong)}
.summary-card--interactive[aria-pressed="true"]{border-color:var(--dd-violet);background:var(--dd-violet-soft)}
.summary-card--interactive[aria-pressed="true"] .summary-label{color:var(--dd-ink);font-weight:700}

/* ============================================================
   GRID PRINCIPAL — movimentações + coluna lateral (gráfico, atenção, meta)
   ============================================================ */
.fin-grid{display:grid;grid-template-columns:minmax(470px,1.35fr) minmax(320px,.65fr);gap:16px;align-items:start}
.panel{padding:20px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.panel-title{margin:0;color:var(--dd-ink);font:700 15px/1.2 var(--dd-font-display)}
.panel-subtitle{margin-top:3px;color:var(--dd-ink-soft);font-size:12.5px}

/* Toolbar de filtros locais (Financeiro 4.0): busca + status + forma de
   pagamento, lado a lado no desktop — mesma densidade alta controlada do
   resto da tela. Quebra em coluna no mobile (ver responsivo). */
.fin-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fin-toolbar .fin-search{flex:1;margin-bottom:0;min-width:0}
.fin-filter-select{flex:none;width:auto;max-width:170px;height:42px;padding:0 30px 0 13px;border:1px solid var(--dd-border);border-radius:999px;background:var(--dd-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b86a3" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 9px center/15px;appearance:none;-webkit-appearance:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--dd-ink);cursor:pointer}
.fin-filter-select:focus-visible{border-color:var(--dd-violet);background-color:var(--dd-surface);box-shadow:var(--dd-shadow-focus)}

/* Chip "Filtrando por: <paciente>" — deep link vindo do Patient Hub
   (financeiro.html?paciente_id=...). Mesmo princípio visual do "Limpar
   filtro" dos cards, mas sempre visível (nunca só implícito na URL). */
.fin-patient-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:4px 4px 4px 14px;border-radius:999px;background:var(--dd-violet-soft);color:var(--dd-violet-dark,var(--dd-violet));font-size:12.5px;font-weight:700}
/* [hidden] do navegador perde para o display:flex acima — mesmo padrão do
   fix de .aps-badge[hidden]/.aps-btn[hidden] (Onda 3). Sem isso, o chip
   "Filtrando por: <paciente>" ficava visível mesmo sem filtro de paciente
   ativo (#finance-patient-chip começa com o atributo hidden no HTML). */
.fin-patient-chip[hidden]{display:none}
/* Alvo de toque >=44px (obrigatório do Design System 4.0) — círculo cheio,
   não só um ícone pequeno solto no meio de uma área clicável maior. */
.fin-patient-chip-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.55);color:inherit;cursor:pointer;font-size:15px;line-height:1}
.fin-patient-chip-close:hover{background:#fff}

/* Busca local — separada da busca global do topbar (#ddSearchInput):
   filtra so os lancamentos ja carregados na tela, sem chamada nova. */
.fin-search{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:14px;background:var(--dd-bg);border:1px solid var(--dd-border);border-radius:999px;padding:0 13px 0 0}
.fin-search span{display:flex;align-items:center;padding-left:13px;color:var(--dd-ink-mute)}
.fin-search span svg{width:15px;height:15px}
.fin-search input{flex:1;height:42px;border:none;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--dd-ink)}
.fin-search:focus-within{border-color:var(--dd-violet);background:var(--dd-surface);box-shadow:var(--dd-shadow-focus)}
.fin-search-clear{flex:none;width:24px;height:24px;margin-right:8px;border:0;border-radius:50%;color:var(--dd-ink-mute);background:none;cursor:pointer;font-size:16px;line-height:1}
.fin-search-clear:hover{background:var(--dd-border)}
.fin-search-empty{display:none}
.fin-search-empty[style*="grid"]{display:grid;place-items:center;padding:30px 16px}

/* ============================================================
   MOVIMENTAÇÕES — extrato de lançamentos
   ============================================================ */
.transaction{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;min-height:70px;padding:11px 4px;border-top:1px solid var(--dd-border)}
.transaction:first-child{border-top:0}
/* display:grid acima vence o [hidden] padrao do navegador (mesma
   especificidade de classe, regra de autor sempre supera UA) — sem isto a
   busca local escondia so visualmente por engano (linha some, mas ocupa
   layout) ou nem escondia. Mesmo ajuste ja feito em .detail-panel de
   Pacientes 3.0. */
.transaction[hidden]{display:none}
#finance-clear-filter[hidden]{display:none}
.tx-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#0b6b47;background:var(--dd-green-soft)}
.tx-icon svg{width:17px;height:17px}
.tx-icon.pending{color:#8a5a09;background:var(--dd-amber-soft)}
.tx-icon.late{color:#a32a20;background:var(--dd-red-soft)}
.tx-icon.cancelled{color:var(--dd-ink-mute);background:var(--dd-bg)}
/* 'cortesia': sessão sem cobrança (fluxo de Encerrar consulta) — estado
   final, mesma família visual de cancelado/estornado (sem ação pendente),
   mas com cor própria (roxo) pra não parecer "cancelamento". */
.tx-icon.courtesy{color:var(--dd-violet);background:var(--dd-violet-soft)}
.tx-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dd-ink);font-size:13.5px;font-weight:700}
.tx-meta{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dd-ink-mute);font-size:12.5px}
.tx-side{text-align:right}
.tx-value{color:var(--dd-ink);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.tx-status{margin-top:4px;font-size:12px;font-weight:700}
.tx-status.ok,.tx-status.paid{color:#0b6b47}
.tx-status.pending{color:#8a5a09}
.tx-status.late{color:#a32a20}
.tx-status.cancelled,.tx-status.reversed{color:var(--dd-ink-mute)}
.tx-status.courtesy{color:var(--dd-violet)}
.tx-actions{margin-left:4px;border:0;background:none;cursor:pointer;color:var(--dd-ink-mute);font-size:18px;line-height:1}
.tx-actions:hover{color:#a32a20}

/* Fase 6 — selo "Pix disponível" num lançamento pendente: informativo, não
   é a ação principal (só "Marcar pago" muda o status de verdade). */
.tx-pix-badge{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;color:#3949ab;background:#e8eafb;font-size:11px;font-weight:800}

/* Financeiro 4.0 — relação consulta ↔ pagamento dentro do .tx-meta (item 6
   da missão): só existe quando o lançamento realmente veio de um
   agendamento (join aditivo no backend); nunca aparece por padrão. */
.tx-consulta-link{color:var(--dd-violet);font-weight:700;text-decoration:none}
.tx-consulta-link:hover,.tx-consulta-link:focus-visible{text-decoration:underline}

/* Fase 6 — aviso de que o Agenda PSI não recebe/intermedia o Pix, usado nos
   modais de cadastro de chave e de disponibilizar Pix. */
.v2-pix-aviso{margin:10px 0;padding:10px 12px;border-radius:10px;background:#f4f2ff;color:#443d75;font-size:12.5px;line-height:1.55}

/* ============================================================
   COLUNA LATERAL — gráfico (reaproveitado do Dashboard), atenção, meta
   ============================================================ */
.fin-side{display:grid;gap:16px}
.attention{overflow:hidden;padding:0}
.attention-head{padding:18px 20px 4px}
.attention-head .panel-title{color:var(--dd-ink)}
.attention-head p{margin:4px 0 0;color:var(--dd-ink-soft);font-size:12.5px}
.attention-list{padding:6px 18px}
.attention-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--dd-border)}
.attention-item:last-child{border:0}
.attention-name{color:var(--dd-ink);font-size:13px;font-weight:700}
.attention-meta{margin-top:3px;color:var(--dd-ink-mute);font-size:12px}
.attention-value{text-align:right;color:#a32a20;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.attention-link{display:block;width:100%;padding:13px 18px;border:0;border-top:1px solid var(--dd-border);color:var(--dd-violet);background:var(--dd-bg);text-align:center;font-size:12.5px;font-weight:700;cursor:pointer}
.attention-link:hover{background:var(--dd-violet-soft)}

.forecast{padding:18px 20px}
.forecast .panel-head{margin-bottom:4px}
.forecast .panel-head strong{color:var(--dd-violet);font:700 15px/1 var(--dd-font-display)}
.bar-head{display:flex;justify-content:space-between;margin:13px 0 7px;color:var(--dd-ink-soft);font-size:12.5px}
.bar-track{height:8px;overflow:hidden;border-radius:999px;background:var(--dd-bg)}
.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--dd-violet-soft),var(--dd-violet));transition:width .4s var(--dd-ease)}
.forecast-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.forecast-item{padding:11px;border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);background:var(--dd-bg)}
.forecast-label{color:var(--dd-ink-mute);font-size:11.5px}
.forecast-value{margin-top:4px;color:var(--dd-ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* ============================================================
   MODAL — Novo lançamento
   ============================================================ */
.modal-backdrop{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;background:rgba(33,26,72,.42);backdrop-filter:blur(4px)}
.modal-backdrop.open{display:grid}
.modal{width:min(100%,560px);padding:24px;background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:var(--dd-radius-xl);box-shadow:var(--dd-shadow-md)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.modal h2{margin:0;font-family:var(--dd-font-display);font-size:20px;font-weight:700;color:var(--dd-ink)}
.modal p{margin:5px 0 0;color:var(--dd-ink-soft);font-size:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{color:var(--dd-ink-soft);font-size:12.5px;font-weight:700}
.field input,.field select{width:100%;height:42px;padding:0 12px;border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);outline:0;background:var(--dd-surface-subtle);color:var(--dd-ink);font-size:13.5px}
.field input:focus-visible,.field select:focus-visible{background:var(--dd-surface);box-shadow:var(--dd-shadow-focus);border-color:var(--dd-violet)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;padding-top:18px;border-top:1px solid var(--dd-border)}

/* ============================================================
   ESTADOS VAZIO/CARREGANDO — emptyState()/loadFinance() geram
   .aps-state + spans .v2-empty-icon/.aps-state__title/.aps-state__text
   (classes globais ja definidas em agenda-psi-design-system-2.0.css /
   painel-2.0-runtime.css — aqui so garantimos o espacamento no contexto
   desta lista, mesmo padrao das outras paginas 3.0).
   ============================================================ */
#transactions .aps-state{padding:30px 16px}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  .summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:1120px){
  .fin-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
  .fin-head{display:block}
  /* period e o botao de novo lancamento disputavam a mesma linha com
     flex:1 cada — sobrava tao pouco espaco pro rotulo do mes que
     "Agosto de 2026" quebrava em 3 linhas dentro do proprio botao. Cada
     bloco agora ocupa sua propria linha inteira. */
  .fin-head-actions{margin-top:14px;flex-direction:column;align-items:stretch;gap:10px}
  .fin-head-actions .new-charge{width:100%}
  .period{justify-content:space-between}
  .fin-period-label{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Onda 2 (Mobile Hardening): achado real testando com valor grande
     (R$ 12.345,67+) — o grid de 2 colunas usava "1fr 1fr" puro (sem
     minmax(0,...)), então cada track herdava o min-content da própria
     .summary-value (número + moeda, sem quebra). Com faturamento alto o
     suficiente, nenhuma track cedia espaço pra outra e o grid inteiro
     ficava mais largo que a tela — mesma classe de bug já visto no
     .agenda-month-chip e no #back-to-hub desta missão, mas na variante
     grid em vez de flex/ellipsis. A regra base (desktop, linha 55) já
     usava minmax(0,1fr) corretamente; só os overrides mobile regrediram
     essa proteção. */
  .summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .summary-card{padding:13px 14px}
  .summary-icon{width:34px;height:34px}
  .summary-value{font-size:18px}
  .fin-grid{gap:13px}
  .panel{padding:15px}
  .transaction{grid-template-columns:auto minmax(0,1fr)}
  .tx-side{grid-column:2;text-align:left;margin-top:2px}
  .tx-actions{margin-left:0}
  .modal{padding:20px}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  /* Toolbar de filtros nunca comprime a tabela/lista (regra explícita da
     missão) — empilha em coluna cheia, cada controle com toque >=44px já
     garantido pela altura fixa de 42px + padding do próprio botão/input. */
  .fin-toolbar{flex-direction:column;align-items:stretch}
  .fin-filter-select{max-width:none;width:100%}
  .fin-patient-chip{flex-wrap:wrap}
}
@media (max-width:520px){
  .summary{grid-template-columns:minmax(0,1fr)}
  .forecast-grid{grid-template-columns:1fr}
}