/* Gestão financeira → Resultados. Estilos do app "Financeiro CK" trazidos para o Gestão CK (tudo dentro de .fin),
   com as cores do sistema: fundo de vidro escuro, dourado CK, verde/vermelho para entradas e saídas. */
.fin {
  --panel: #1b1a18; --ink: #f1efe9; --muted: #a5a4a2; --line: rgba(255,255,255,.09); --soft: rgba(255,255,255,.05);
  --brand: #d6b575; --brasa: #e6c990; --brasa-soft: rgba(214,181,117,.16); --ent: #6fd3a6; --sai: #f0846f;
  --ok: #8fd18a; --warn: #e8b45a; --bad: #f18b7e; --muted-bar: #3d3b38; --focus: #d6b575;
  --shadow: none; --r: 12px;
  --f-disp: var(--sans); --f-body: var(--sans);
  color: var(--ink);
}
.fin-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.fin-topo .abas { border-bottom: 0; margin-bottom: 0; flex: 1; min-width: 0; gap: 22px; }
.fin-abas button { border: 0; background: none; color: var(--apagado); }
.fin-abas button[aria-selected="true"] { color: var(--ouro-texto); }
.fin-abas button[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ouro); }
.fin-abas .badge { margin-left: 2px; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--ouro); color: #1f1e1c; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.fin .status { font-size: 12.5px; color: var(--apagado); padding: 0 0 14px; }
.fin-titulo { font-size: 20px; margin: 14px 0 0; color: var(--texto); }
/* os campos do sistema ocupam a largura toda e têm margem; aqui ficam em linha */
.fin input, .fin select { width: auto; margin: 0; min-height: 38px; background-color: rgba(8,9,12,.55); }
.fin input[type=checkbox], .fin input[type=radio] { min-height: 0; width: auto; accent-color: var(--ouro); }
.fin label { margin: 0; }
.fin .plano li input, .fin label.f input[type=search] { width: 100%; }
.fin .drawer .pane label.f input, .fin .drawer .pane label.f select { width: 100%; }
.fin h2, .fin h3 { font-weight: 600; }
.fin .tile .big { font-weight: 600; }
.fin button:focus-visible, .fin input:focus-visible, .fin select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fin h2{font-family:var(--f-disp);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0;text-wrap:balance}
.fin h3{font-family:var(--f-disp);font-size:16.5px;font-weight:700;letter-spacing:-.005em;margin:0}
.fin .view{display:flex;flex-direction:column;gap:18px;padding-top:16px}
.fin .row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.fin .card{background:var(--vidro-fundo, var(--panel));-webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.fin .note{color:var(--muted);font-size:13px;margin:0}
.fin .lead{color:var(--muted);margin:0;max-width:78ch}
.fin .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px}
.fin .tile{gap:6px;position:relative;overflow:hidden}
.fin .tile::after{content:"";position:absolute;right:-28px;top:-28px;width:90px;height:90px;border-radius:50%;background:var(--soft)}
.fin .tile>*{position:relative;z-index:1}
.fin .tile .lbl{font-size:12px;color:var(--muted);font-weight:600}
.fin .tile .big{font-family:var(--f-disp);font-weight:700;font-size:30px;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fin .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:14px}
.fin .meter{height:10px;background:var(--soft);border-radius:99px;overflow:hidden}
.fin .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brasa));border-radius:99px;transition:width .4s}
.fin label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.fin input[type=text], .fin input[type=search], .fin input[type=date], .fin select{font:14px var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px;min-width:0}
.fin input[type=file]{font:13px var(--f-body);color:var(--muted)}
.fin .btn{font:600 13.5px var(--f-body);border-radius:10px;padding:8px 16px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.fin .btn:hover{background:var(--soft)}
.fin .btn.pri{background:var(--ouro);border-color:var(--ouro);color:#1f1e1c}
.fin .btn.pri:hover{filter:brightness(1.1)}
.fin .btn:disabled{opacity:.45;cursor:not-allowed}
.fin .tw{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:12px}
.fin table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
.fin th, .fin td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.fin tbody tr:last-child td{border-bottom:0}
.fin th{position:sticky;top:0;background:var(--soft);font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.03em;z-index:1;white-space:nowrap}
.fin td.n, .fin th.n{text-align:right;white-space:nowrap}
.fin tr.click{cursor:pointer}
.fin tr.click:hover td{background:var(--soft)}
.fin .pos{color:var(--ent)}
.fin .neg{color:var(--ink)}
.fin .bad{color:var(--bad)}
.fin .okc{color:var(--ok)}
.fin .warnc{color:var(--warn)}
.fin .pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--soft);color:var(--ink);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.fin .bulk{position:sticky;top:8px;z-index:4;border-color:var(--brasa);background:var(--panel)}
.fin .pill.rg{background:rgba(63,212,255,.12);color:#9fe6ff}
.fin .pill.ac{background:var(--brasa-soft);color:var(--warn)}
.fin .sub{display:block;font-size:12px;color:var(--muted)}
.fin .dre td:first-child, .fin .dre th:first-child{position:sticky;left:0;background:var(--panel);z-index:2;white-space:nowrap}
.fin .dre th:first-child{background:var(--soft);z-index:3}
.fin .dre tr.g td{font-weight:700;background:var(--soft)}
.fin .dre tr.g td:first-child{background:var(--soft);cursor:pointer}
.fin .dre tr.t td, .fin #v-conc tr.tot td{font-weight:800;border-top:2px solid var(--ink);font-family:var(--f-disp)}
.fin .dre tr.c td:first-child{padding-left:30px;color:var(--muted)}
.fin .chart{position:relative;min-height:280px}
.fin .chart svg{display:block;width:100%;height:auto}
.fin .chart text{fill:var(--muted);font:12px var(--f-body)}
.fin .tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px 12px;font-size:12.5px;white-space:nowrap;z-index:5}
.fin .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.fin .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.fin .cls{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr) auto;gap:8px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.fin .cls:last-child{border-bottom:0}
.fin .cls .who b{font-variant-numeric:tabular-nums}
.fin .cls .amt{font-variant-numeric:tabular-nums;font-weight:700;font-family:var(--f-disp);font-size:16px}
.fin .drawer{position:fixed;inset:0;background:rgba(12,9,8,.55);backdrop-filter:blur(2px);z-index:50;display:flex;justify-content:flex-end}
.fin .drawer .pane{background:var(--panel);width:min(460px,100%);height:100%;padding:24px max(20px,env(safe-area-inset-right,0px)) 24px 24px;display:flex;flex-direction:column;gap:16px;overflow:auto;border-radius:20px 0 0 20px}
.fin .radio{display:flex;flex-direction:column;gap:8px;font-size:14px}
.fin .empty{padding:32px;text-align:center;color:var(--muted)}
.fin .plano{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px}
.fin .plano ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fin .plano li{display:flex;gap:6px;align-items:center}
.fin .plano li input{flex:1}
.fin .seg{display:inline-flex;background:var(--soft);border-radius:12px;padding:3px;gap:2px}
.fin .seg button{font:600 13px var(--f-body);border:0;background:none;color:var(--muted);padding:7px 14px;cursor:pointer;border-radius:9px}
.fin .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
@keyframes fin-fade{from{opacity:.4}}
@media (prefers-reduced-motion:no-preference){.fin .view:not([hidden]){animation:fin-fade .25s ease-out}}

/* ---------- Contas a pagar ---------- */
.ct-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-bottom: 20px; }
.ct-numeros .numero.ct-alerta { border-color: rgba(241,139,126,.45); background: linear-gradient(155deg, rgba(241,139,126,.14), rgba(241,139,126,.03)); }
.ct-numeros .numero.ct-alerta > strong { color: #f6a99c; }
.ct-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.ct-esp { flex: 1; }
.ct-mes { display: flex; align-items: center; gap: 6px; }
.ct-mes b { min-width: 150px; text-align: center; font-weight: 500; }
.ct-abas { margin-bottom: 16px; }
.ct-bloco { margin-bottom: 22px; }
.ct-bloco h3 { font-size: 16px; margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; }
.ct-bloco h3 small { color: var(--apagado); font-size: 14px; font-variant-numeric: tabular-nums; }
.ct-lista { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden;
  background: rgba(10,11,14,.45); }
.ct-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.06); }
.ct-item:first-child { border-top: 0; }
.ct-data { text-align: center; line-height: 1.15; }
.ct-data b { display: block; font-variant-numeric: tabular-nums; }
.ct-data span { font-size: 12px; color: var(--apagado); }
.ct-desc b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ct-desc span { font-size: 13px; color: var(--apagado); }
.ct-desc em { color: #9ccf97; font-style: normal; }
.ct-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ct-acoes { display: flex; gap: 4px; align-items: center; }
.ct-item.vencida .ct-data b, .ct-item.vencida .ct-valor { color: #f6a99c; }
.ct-item.hoje .ct-data b { color: var(--ouro-texto); }
.ct-item.paga { opacity: .82; }
.ct-vazio { color: var(--apagado); margin: 0; }
.ct-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-baixas { list-style: none; margin: 0 0 14px; padding: 0; max-height: 50vh; overflow: auto; }
.ct-baixas li { padding: 10px 0; border-top: 1px solid var(--linha); }
.ct-baixas label { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--texto2); }
.ct-baixas input { width: auto; min-height: 0; margin: 4px 0 0; accent-color: var(--ouro); }
.ct-baixas small { color: var(--apagado); }
@media (max-width: 640px) {
  .ct-item { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .ct-acoes { grid-column: 2 / -1; justify-content: flex-end; }
  .ct-duas { grid-template-columns: 1fr; }
}
.fin .dre tr.t td:first-child { background: #1d1c1a; }
.fin-cob { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }