/* SIALF V6.27 — Gestão Financeira (Open Finance). Usa os tokens de tema do SIALF (claro/escuro). */
.fin-tabs{margin-top:6px}
.fin-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 7px;margin-left:7px;border-radius:999px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#1a1200;font-size:10.5px;font-weight:800;text-align:center;box-shadow:0 2px 8px rgba(245,166,35,.3)}
.fin-period{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fin-period .field{min-width:150px}
.fin-presets{display:flex;gap:6px;margin-left:auto}
.fin-kpis{margin-bottom:14px!important}
.fin-in{color:#34d399;font-weight:700} .fin-out{color:#f87171;font-weight:700}
.fin-small{font-size:13px!important}
.fin-alert{padding:14px 16px;border-radius:14px;border:1px solid var(--line2);margin:0 0 16px;font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;backdrop-filter:blur(8px)}
.fin-alert.wait{border-color:rgba(245,185,66,.45);background:rgba(245,185,66,.08);color:var(--accent2)}
.fin-alert.bad{border-color:rgba(255,119,119,.45);background:rgba(255,119,119,.08);color:#ff9e9e}
.fin-empty{text-align:center;padding:44px 22px;border:1px dashed var(--line2);border-radius:18px;background:color-mix(in srgb,var(--panel2) 45%,transparent)}
.fin-empty .btn{margin-top:16px}

/* gráfico de barras duplas com acabamento moderno */
.fin-bars{display:flex;align-items:flex-end;gap:16px;padding:22px 10px 0;border-top:1px solid var(--line);min-height:260px;overflow-x:auto}
.fin-bargroup{flex:1;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:6px}
.fin-bartrack{display:flex;align-items:flex-end;gap:5px;height:180px}
.fin-bartrack i{display:block;width:22px;border-radius:8px 8px 3px 3px;transition:height .3s cubic-bezier(.16,1,.3,1),filter .2s}
.fin-bartrack i:hover{filter:brightness(1.15)}
.fin-bartrack i.in,.fin-legend i.in{background:linear-gradient(180deg,#34d399,#059669);box-shadow:0 4px 14px rgba(5,150,105,.25)}
.fin-bartrack i.out,.fin-legend i.out{background:linear-gradient(180deg,#f87171,#dc2626);box-shadow:0 4px 14px rgba(220,38,38,.2)}
.fin-bargroup small{font-size:10.5px;color:var(--muted);font-weight:600} .fin-bargroup span{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.fin-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;font-weight:600;color:var(--muted);padding:14px 6px 0}
.fin-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:7px;vertical-align:middle}

/* conciliação moderna com cards em elevação */
.fin-recrow{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel2) 55%,transparent);margin-bottom:10px;flex-wrap:wrap;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.fin-recrow:hover{transform:translateY(-2px);border-color:rgba(245,166,35,.35);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fin-rec-main{flex:1 1 380px;min-width:0}
.fin-rec-suggest{margin-top:8px;font-size:13.5px;font-weight:600}
.fin-reasons{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.fin-rec-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.fin-rec-actions select{background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 12px;max-width:260px;font-size:12.5px;font-weight:600}
.fin-check{font-size:11.5px;color:var(--muted);display:flex;gap:7px;align-items:center}

/* tabelas */
.fin-table{margin-top:10px}
.fin-table th{text-align:left;font-size:11px;color:var(--muted);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line)}
.fin-table td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.fin-table td small{font-size:11px}
.fin-table select{background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 8px;max-width:210px}
.fin-dre td:not(:first-child),.fin-dre th:not(:first-child){text-align:right;white-space:nowrap}
.fin-sub td{background:rgba(245,166,35,.06);font-weight:700}
.fin-dim{opacity:.55}
.fin-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.fin-filters .field{min-width:170px}
.fin-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:12px;color:var(--muted)}
.fin-note{font-size:12px;margin:12px 0 0}
.fin-report-select{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fin-report-select select{background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font-weight:700}
.fin-aging{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.fin-aging div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.fin-aging small{color:var(--muted);font-size:11px}

/* barras horizontais de despesas */
.fin-hbars{display:grid;gap:12px;margin-top:8px}
.fin-hbar{display:grid;grid-template-columns:minmax(150px,230px) 1fr 120px;gap:12px;align-items:center}
.fin-hbar span{display:flex;flex-direction:column;font-size:13px} .fin-hbar small{color:var(--muted);font-size:11px}
.fin-hbar-track{height:12px;border-radius:8px;background:var(--panel3);overflow:hidden}
.fin-hbar-track i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#ffd15c,#ee9e00)}
.fin-hbar strong{text-align:right;font-size:13px}

.fin-conn{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.fin-form{display:grid;gap:14px;max-width:640px}
.fin-form textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px 12px;font:inherit}

@media(max-width:720px){.fin-hbar{grid-template-columns:1fr}.fin-hbar strong{text-align:left}.fin-presets{margin-left:0}}
@media print{
  body.fin-print-mode .side,body.fin-print-mode .theme-toggle,body.fin-print-mode .user-avatar-fixed,body.fin-print-mode .fin-tabs,body.fin-print-mode .fin-period,body.fin-print-mode .actions,body.fin-print-mode .top>.btn,body.fin-print-mode .fin-report-select select{display:none!important}
  body.fin-print-mode .main{margin-left:0!important;padding:0!important}
  body.fin-print-mode .card{box-shadow:none!important;break-inside:avoid}
}

/* ==========================================================================
   SIALF Aesthetic & Visual Polish (V6.29)
   Tipografia limpa, transições refinadas, inputs coerentes no tema escuro/claro,
   scrollbars elegantes e feedback visual premium.
   ========================================================================== */

/* (V6.29) A fonte é carregada por <link> no index.html; o visual completo está em premium.css. */

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg2);
}
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Botões com microinterações refinadas */
.btn {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 11px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
}
.btn:active {
  transform: translateY(0) scale(0.98) !important;
}
.btn.primary {
  background: linear-gradient(135deg, #ffc857 0%, #f5a623 50%, #d87900 100%) !important;
  color: #120e06 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.28) !important;
  border: none !important;
}
.btn.primary:hover {
  box-shadow: 0 7px 22px rgba(245, 166, 35, 0.42) !important;
  filter: brightness(1.05);
}

/* Cards com borda sutil e gradientes suaves */
.card {
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.card:hover {
  border-color: rgba(245, 166, 35, 0.35) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22) !important;
}

/* Inputs de formulários do sistema e serviços respeitando o tema (escuro/claro) */
body:not(.light) .service-input,
body:not(.light) .vehicle-input {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line2) !important;
}
body:not(.light) .service-input::placeholder,
body:not(.light) .vehicle-input::placeholder {
  color: var(--muted) !important;
}
body.light .service-input,
body.light .vehicle-input {
  background: #ffffff !important;
  color: #1e242b !important;
  border: 1px solid #d4d9df !important;
}

/* Inputs em foco */
.field input:focus,
.field select:focus,
.field textarea:focus,
.service-input:focus,
.vehicle-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.16) !important;
}

/* Sidebar e Navegação */
.side {
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.nav button {
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: 12px !important;
}
.nav button.active {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.15), rgba(245, 166, 35, 0.02)) !important;
  border-left: 3px solid var(--accent) !important;
  font-weight: 750 !important;
}

/* Abas limpas e modernas */
.tab {
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 11px !important;
  transition: all 0.2s ease !important;
}
.tab.on {
  background: rgba(245, 166, 35, 0.12) !important;
  border-color: rgba(245, 166, 35, 0.6) !important;
  color: var(--accent) !important;
  font-weight: 750 !important;
}

/* KPIs com números destacados */
.kpi strong {
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
}

/* Modal e Alerts modernos */
.modalbox {
  border-radius: 20px !important;
  border: 1px solid var(--line2) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
.fin-alert {
  border-radius: 14px !important;
  font-weight: 500 !important;
}

/* (V6.35) Valores financeiros nunca podem ser cortados: o cartão se ajusta ao espaço e o número encolhe antes de truncar. */
.fin-kpis{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))!important}
.fin-kpis .kpi{min-width:0;container-type:inline-size}
.fin-kpis .kpi strong{display:block;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:clamp(14px,9.5cqw,26px)!important;letter-spacing:0}

/* (V6.35) Acessibilidade: foco visível por teclado e menos movimento para quem pediu. */
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #f5a623;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}