
/* v10 — linguagem visual inspirada no painel financeiro enviado como referência. */
@media screen {
  :root {
    --bg:#263243; --bg2:#35465e; --bg3:#3d5069; --bg4:#465b73; --bg5:#536a81;
    --border:#455971; --border2:#5a7187; --text:#f5faf8; --text2:#c4d4d8; --text3:#a4bbc5;
    --accent:#42d3a2; --accent2:#10a985; --accent-dim:rgba(66,211,162,.17);
    --accent-glow:0 0 0 3px rgba(66,211,162,.2); --green:#46daa5;
    --radius:18px; --radius-sm:11px;
    --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  body.light-mode {
    --bg:#eaf8f3; --bg2:#fff; --bg3:#f1faf7; --bg4:#e0f3ec; --bg5:#d4eae4;
    --border:#e1eee9; --border2:#cde2da; --text:#253940; --text2:#536c70; --text3:#668286;
    --accent:#148b65; --accent2:#087655; --accent-dim:rgba(20,139,101,.11);
    --accent-glow:0 0 0 3px rgba(20,139,101,.14);
    --green:#148b65; --red:#bd4d61; --yellow:#9a6f18;
  }
  body { background:var(--bg); }
  body::before { background:radial-gradient(ellipse at 74% 0%,rgba(75,211,187,.12),transparent 45%); }
  .app-shell { grid-template-columns:238px minmax(0,1fr); grid-template-rows:72px minmax(0,1fr); }
  .sidebar { background:#314057; border-right:1px solid var(--border); }
  body.light-mode .sidebar { background:#fff; border-right:1px solid #e7eee9; }
  .sidebar-brand { background:none; border-bottom:0; padding:27px 22px 24px; }
  .brand-icon { width:40px; height:40px; background:linear-gradient(145deg,#33bb93,#078461); color:#fff; border:0; border-radius:12px; box-shadow:none; }
  .brand-icon span { color:#d2fff0 !important; }
  body.light-mode .brand-icon { background:linear-gradient(145deg,#33bb93,#078461); color:#fff; border:0; }
  .brand-name { font-size:16px; letter-spacing:-.035em; }
  .brand-sub,body.light-mode .brand-sub { color:var(--accent); letter-spacing:.09em; font-family:var(--font); }
  .sidebar-nav { padding:4px 13px 24px; gap:4px; }
  .sidebar-section-label,body.light-mode .sidebar-section-label { padding:21px 13px 8px; color:var(--text3); letter-spacing:.12em; font-size:10px; }
  .sidebar-section-label:first-child { padding-top:0; }
  .nav-item,body.light-mode .nav-item { gap:12px; border-radius:11px; padding:10px 12px; color:var(--text2); font-weight:580; }
  .nav-item:hover,body.light-mode .nav-item:hover { background:var(--accent-dim); color:var(--accent); }
  .nav-item.active,body.light-mode .nav-item.active { color:var(--accent); background:var(--accent-dim); box-shadow:none; }
  .nav-item.active::before { display:none; }
  .nav-icon { width:28px; height:28px; border-radius:9px; background:rgba(113,191,168,.16); color:var(--accent); }
  .nav-item.active .nav-icon { background:var(--accent); color:#fff; }
  body:not(.light-mode) .nav-item.active .nav-icon { color:#173a33; }
  .nav-icon svg { width:17px; height:17px; }
  .nav-badge { background:var(--accent-dim); color:var(--accent); }
  .sidebar-footer,body.light-mode .sidebar-footer { border-color:var(--border); color:var(--text3); }
  .topbar,body.light-mode .topbar { background:var(--bg2); border-bottom:1px solid var(--border); padding:0 32px; }
  .topbar-title { color:var(--text); font-size:15px; }
  .topbar-pill,body.light-mode .topbar-pill { background:var(--bg3); border:1px solid var(--border); color:var(--text2); border-radius:30px; }
  .topbar-pill .dot { background:var(--accent); }
  #tema-btn { background:var(--bg3); border-color:var(--border); border-radius:10px; }
  .content { padding:28px 32px 56px; max-height:calc(100vh - 72px); background:radial-gradient(circle at 91% 8%,rgba(101,213,212,.19),transparent 32%),linear-gradient(135deg,var(--bg),var(--bg)); }
  .tab-panel { max-width:1480px; }
  .section-title { color:var(--text); letter-spacing:-.035em; }
  .card,.kpi-card,body.light-mode .card,body.light-mode .kpi-card { background:var(--bg2); border-color:var(--border); border-radius:var(--radius); box-shadow:0 9px 28px rgba(35,82,72,.055); }
  body:not(.light-mode) .card,body:not(.light-mode) .kpi-card { box-shadow:0 10px 30px rgba(5,17,28,.12); }
  .card { padding:23px; }
  .card::after { display:none; }
  .card-title,body.light-mode .card-title { color:var(--text); font-size:14px; font-weight:700; }
  .kpi-card { padding:20px; }
  .kpi-card:hover { border-color:var(--accent); }
  .kpi-card::before { height:3px; width:34px; top:0; bottom:auto; left:20px; right:auto; border-radius:0 0 6px 6px; }
  .kpi-label,body.light-mode .kpi-label { color:var(--text2); text-transform:none; letter-spacing:0; font-family:var(--font); font-size:12px; }
  .kpi-value { color:var(--text); font-family:var(--font); letter-spacing:-.045em; }
  .kpi-icon { opacity:.27; }
  label,body.light-mode label { color:var(--text2); }
  input,select,textarea,body.light-mode input,body.light-mode select,body.light-mode textarea { background:var(--bg2); border:1px solid var(--border2); border-radius:10px; color:var(--text); }
  input:focus,select:focus,textarea:focus { border-color:var(--accent); }
  body.light-mode input::placeholder,body.light-mode textarea::placeholder { color:#76908e; }
  .btn { border-radius:10px; }
  .btn-primary,body.light-mode .btn-primary { background:var(--accent); color:#fff; box-shadow:none; }
  .btn-primary:hover,body.light-mode .btn-primary:hover { background:var(--accent2); color:#fff; filter:none; box-shadow:0 5px 16px rgba(14,138,103,.16); }
  .btn-secondary,body.light-mode .btn-secondary { background:var(--bg3); border-color:var(--border); color:var(--text); }
  .btn-secondary:hover,body.light-mode .btn-secondary:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
  .tipo-btn.active,body.light-mode .tipo-btn.active { background:var(--accent); color:#fff; }
  .tipo-switch,body.light-mode .tipo-switch { background:var(--bg3); }
  .modal,.dashboard-filter-dialog { background:var(--bg2); border-color:var(--border); }
  .mobile-bottom-nav,body.light-mode .mobile-bottom-nav { background:var(--bg2); }
  .mob-nav-btn.active { color:var(--accent); }
  .mob-nav-btn.active .mob-icon { filter:none; }
  thead th,body.light-mode thead th { background:var(--bg3); color:var(--text2); }
  tbody tr:hover { background:var(--accent-dim); }
  #tab-dashboard .dashboard-hero { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:28px 31px; margin-bottom:20px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(112deg,rgba(100,207,176,.17),rgba(111,205,220,.15) 63%,rgba(172,238,213,.12)); }
  body.light-mode #tab-dashboard .dashboard-hero { background:linear-gradient(112deg,#d8f2e6,#d7f3f0 60%,#eafbf1); border-color:#d1ebe0; }
  .dashboard-eyebrow { display:block; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.14em; margin-bottom:9px; }
  .dashboard-hero h1 { font-size:clamp(24px,2.6vw,36px); font-weight:760; line-height:1.15; letter-spacing:-.045em; color:var(--text); }
  .dashboard-hero-period { color:var(--accent); }
  .dashboard-hero p { color:var(--text2); font-size:13px; margin-top:9px; }
  .dashboard-hero-month { min-width:160px; padding:10px 12px; border:1px solid var(--border); border-radius:13px; background:var(--bg2); }
  .dashboard-hero-month label { display:block; font-size:10px; margin-bottom:4px; color:var(--text3); }
  .dashboard-hero-month input,body.light-mode .dashboard-hero-month input { width:100% !important; border:0; background:transparent; padding:2px 0 !important; min-height:25px; box-shadow:none; color:var(--text); }
  #tab-dashboard .dashboard-disclosure,body.light-mode #tab-dashboard .dashboard-disclosure { background:var(--bg2); border-color:var(--border); border-radius:18px; box-shadow:0 9px 28px rgba(35,82,72,.04); }
  #tab-dashboard .dashboard-disclosure > summary { padding:19px 22px; }
  #tab-dashboard .dashboard-disclosure > summary::before { color:var(--accent); background:var(--accent-dim); }
  #tab-dashboard .dashboard-disclosure[open] > summary { border-color:var(--border); }
  #tab-dashboard .dashboard-chart-card { padding:22px 26px 27px; }
  #tab-dashboard .finance-donut-center { background:var(--bg2); }
  #tab-dashboard .finance-slice { stroke:var(--bg2); }
  #tab-dashboard .finance-legend-button:hover,#tab-dashboard .finance-legend-button.is-selected { background:var(--accent-dim); }
  #tab-dashboard .finance-legend-button.is-selected .finance-legend-name { color:var(--accent); }
  #dashboard-filter-modal .dashboard-filter-card { background:var(--bg3); border-color:var(--border); }
  #dashboard-filter-modal .dashboard-filter-stat { background:var(--bg2); border-color:var(--border); }
  #dashboard-filter-modal .dashboard-modal-close { background:var(--bg3); border-color:var(--border); }
  @media (max-width:768px) {
    .app-shell { grid-template-columns:1fr; grid-template-rows:58px minmax(0,1fr); }
    .sidebar { left:-260px; width:238px; }
    .content { max-height:calc(100vh - 58px); padding:18px 16px 80px; }
    .topbar { padding:0 16px; }
  }
  @media (max-width:600px) {
    .content { padding:13px 12px 82px; }
    #tab-dashboard .dashboard-hero { align-items:stretch; flex-direction:column; padding:22px 19px; gap:16px; }
    .dashboard-hero-month { width:max-content; max-width:100%; }
    #tab-dashboard .dashboard-disclosure > summary { padding:15px; }
  }
}
