/* Cores literais da cascata final de design-system.html.
   A geometria, a responsividade e as funções continuam no aplicativo. */
:root {
  --bg: #eef2f8;
  --surface: #fbfcff;
  --surface-low: #edf2fa;
  --surface-container: #e4ecf8;
  --surface-high: #e2e7ff;
  --surface-highest: #dae2fd;
  --on-surface: #202c43;
  --on-surface-var: #58677e;
  --outline: #737686;
  --outline-var: rgba(81,108,148,.18);
  --primary: #2167d5;
  --primary-cont: #dfebff;
  --on-primary: #ffffff;
  --on-primary-cont: #2053a0;
  --secondary: #505f76;
  --secondary-cont: #d3e4fe;
  --error: #ba1a1a;
  --error-cont: #ffdad6;
  --green: #166534;
  --green-lt: #dcfce7;
  --red: #991b1b;
  --red-lt: #fee2e2;
  --amber: #92400e;
  --amber-lt: #fef3c7;
  --blue: #1d4ed8;
  --blue-lt: #dbeafe;
  --rfv-dormente-bg: #fef3c7;
  --rfv-dormente-bdr: rgba(146,64,14,0.2);
  --rfv-uti-bg: #fee2e2;
  --rfv-uti-bdr: rgba(153,27,27,0.2);
  --rfv-morto-bg: #283044;
  --rfv-morto-txt: #eef0ff;
  --rfv-morto-bdr: #3d4f6e;
  --rfv-info-bg: #f2f3ff;
  --shadow-sm: 0 3px 12px rgba(46,73,118,.04);
  --shadow: 0 8px 24px rgba(46,73,118,.06);
  --shadow-md: 0 12px 32px rgba(46,73,118,.10);
  --shadow-lg: 0 24px 70px rgba(29,49,87,.18);
  --glass: rgba(255,255,255,.66);
  --glass-edge: rgba(255,255,255,.9);
  --card-inset: var(--glass-edge);
  --surface-0: var(--surface);
  --surface-1: var(--surface-low);
  --surface-2: var(--surface-container);
  --surface-3: var(--surface-highest);
  --border: var(--outline-var);
  --text-1: var(--on-surface);
  --text-2: var(--on-surface-var);
  --text-3: var(--on-surface-var);
  --accent: var(--primary);
  --accent-dark: var(--on-primary-cont);
  --accent-tint: var(--primary-cont);
  --sidebar-bg: var(--glass);
  --glass-bg: var(--glass);
  --card-bg: var(--glass);
  --success: var(--green);
  --success-bg: var(--green-lt);
  --danger: var(--red);
  --danger-bg: var(--red-lt);
  --warning: var(--amber);
  --warning-bg: var(--amber-lt);
  --info: var(--blue);
  --info-bg: var(--blue-lt);
  --neutral: var(--on-surface-var);
  --neutral-bg: var(--surface-container);
  --violet: var(--on-primary-cont);
  --violet-bg: var(--primary-cont);
  --font-main: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --accent-rgb: 33,103,213;
  --action-bg: #398bfa;
  --action-hover: #1d4ed8;
  --action-text: #ffffff;
  --action-gradient: linear-gradient(145deg,#398bfa,#2563dc);
  --brand-gradient: linear-gradient(145deg,#53a3fa,#5264de);
  --nav-active-bg: linear-gradient(120deg,var(--primary-cont),var(--glass));
  --canvas-bg: radial-gradient(ellipse at 75% 0%,rgba(145,199,255,.32),transparent 48%),radial-gradient(ellipse at 20% 65%,rgba(178,167,241,.19),transparent 48%),radial-gradient(ellipse at 95% 85%,rgba(144,222,209,.2),transparent 40%),var(--bg);
  --success-action: #166534;
  --warning-action: #92400e;
  --danger-action: #ba1a1a;
  --card-radius: 23px;
  --control-radius: 999px;
  --card-blur: blur(16px);
  --overlay-bg: rgba(15,28,49,.38);
  --kpi-blue: rgba(109,172,249,.13);
  --kpi-violet: rgba(144,127,232,.14);
  --kpi-green: rgba(63,196,166,.13);
  --kpi-amber: rgba(245,178,109,.14);
}
html.dark {
  --bg: #101827;
  --surface: #1c293d;
  --surface-low: #243349;
  --surface-container: #2c3d55;
  --surface-high: #1e2d4a;
  --surface-highest: #283044;
  --outline-var: rgba(168,192,224,.19);
  --outline: #3d4f6e;
  --on-surface: #eef4ff;
  --on-surface-var: #b4c3d9;
  --primary: #9ec8ff;
  --primary-cont: #284668;
  --on-primary: #00174b;
  --on-primary-cont: #d4e7ff;
  --secondary: #b7c8e1;
  --secondary-cont: #38485d;
  --error: #ffb4ab;
  --error-cont: #93000a;
  --green: #4ade80;
  --green-lt: rgba(74,222,128,0.12);
  --red: #f87171;
  --red-lt: rgba(248,113,113,0.12);
  --amber: #fbbf24;
  --amber-lt: rgba(251,191,36,0.12);
  --blue: #60a5fa;
  --blue-lt: rgba(96,165,250,0.12);
  --rfv-dormente-bg: rgba(146,64,14,0.18);
  --rfv-dormente-txt: #fbbf24;
  --rfv-dormente-bdr: rgba(146,64,14,0.35);
  --rfv-uti-bg: rgba(153,27,27,0.18);
  --rfv-uti-txt: #f87171;
  --rfv-uti-bdr: rgba(153,27,27,0.35);
  --rfv-morto-bg: rgba(2,6,23,0.85);
  --rfv-morto-txt: #b4c5d4;
  --rfv-morto-bdr: rgba(61,79,110,0.4);
  --rfv-info-bg: rgba(26,37,64,0.5);
  --rfv-info-txt: #64748b;
  --rfv-info-bdr: rgba(43,53,80,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow: 0 2px 6px rgba(0,0,0,0.45);
  --shadow-md: 0 5px 15px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.55);
  --glass: rgba(26,39,60,.78);
  --glass-edge: rgba(183,212,255,.19);
  --accent-rgb: 158,200,255;
  --danger-action: #93000a;
  --canvas-bg: radial-gradient(ellipse at 80% 0%,#1c3654,transparent 60%),radial-gradient(ellipse at 10% 80%,#27223f,transparent 50%),var(--bg);
}
html.nubank-light {
  --font-main: -apple-system, BlinkMacSystemFont, 'Inter', 'Plus Jakarta Sans', sans-serif;
  --bg: #faf8ff;
  --surface-0: #ffffff;
  --surface-1: #f4f1fa;
  --surface-2: #eee8f6;
  --surface-3: #e4dcef;
  --border: #b3a4c5;
  --text-1: #21152e;
  --text-2: #493b59;
  --text-3: #61516f;
  --accent: #7905aa;
  --accent-rgb: 121,5,170;
  --accent-dark: #63038c;
  --accent-tint: #7905aa14;
  --action-bg: #7905aa;
  --action-hover: #63038c;
  --action-text: #ffffff;
  --action-gradient: linear-gradient(145deg,#8a05be,#63038c);
  --sidebar-bg: rgba(255,255,255,.92);
  --glass-bg: rgba(255,255,255,.88);
  --glass-edge: #c7b9d8;
  --card-inset: var(--glass-bg);
  --card-bg: linear-gradient(125deg,var(--glass-bg),rgba(221,207,248,.28));
  --canvas-bg: radial-gradient(ellipse at 75% 0%,rgba(176,146,230,.2),transparent 48%),radial-gradient(ellipse at 20% 65%,rgba(178,167,241,.16),transparent 48%),radial-gradient(ellipse at 95% 85%,rgba(144,222,209,.14),transparent 40%),var(--bg);
  --success-action: #166534;
  --warning-action: #85440c;
  --danger-action: #991b1b;
  --success: #166534;
  --success-bg: #dcfce7;
  --danger: #991b1b;
  --danger-bg: #fee2e2;
  --warning: #85440c;
  --warning-bg: #fef3c7;
  --info: #1e40af;
  --info-bg: #dbeafe;
  --violet: #6b21a8;
  --violet-bg: #f3e8ff;
  --neutral: #475569;
  --neutral-bg: #e9edf4;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 2px 6px rgba(0,0,0,.07);
  --shadow-md: 0 5px 15px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.09),0 4px 8px rgba(0,0,0,.04);
  --card-radius: 23px;
  --control-radius: 999px;
  --card-blur: blur(16px);
  --overlay-bg: rgba(15,28,49,.38);
  --kpi-blue: rgba(109,172,249,.13);
  --kpi-violet: rgba(144,127,232,.14);
  --kpi-green: rgba(63,196,166,.13);
  --kpi-amber: rgba(245,178,109,.14);

  --brand-gradient: var(--action-gradient);
  --nav-active-bg: var(--accent-tint);

}
body { background: var(--canvas-bg); background-attachment: fixed; }
.ff-card {
  background: var(--card-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: inset 0 1px 0 var(--card-inset),var(--shadow);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.ff-card-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ff-kpi { background: linear-gradient(135deg,var(--glass-bg),var(--kpi-blue)); }
.ff-kpi:nth-child(4n+2) { background: linear-gradient(135deg,var(--glass-bg),var(--kpi-violet)); }
.ff-kpi:nth-child(4n+3) { background: linear-gradient(135deg,var(--glass-bg),var(--kpi-green)); }
.ff-kpi:nth-child(4n+4) { background: linear-gradient(135deg,var(--glass-bg),var(--kpi-amber)); }
.ff-kpi-value { font-variant-numeric: tabular-nums; }
.ff-sidebar, .ff-header, .ff-bottom-bar {
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  box-shadow: inset 0 1px 0 var(--card-inset),var(--shadow);
}
.ff-sidebar { border-radius: 0 26px 26px 0; }
.ff-header { background: var(--glass-bg); }
.ff-nav-item { transition: background .15s ease, box-shadow .15s ease; }
.ff-nav-item:hover { box-shadow: inset 0 1px 0 var(--glass-bg); }
.ff-button { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ff-button:not(:disabled):hover { box-shadow: var(--shadow-sm); }
.ff-action { border-radius: var(--control-radius) !important; box-shadow: inset 0 1px 0 #ffffff30,var(--shadow-sm); }
.ff-action:not(:disabled):hover { box-shadow: var(--shadow-md); }
.ff-action:disabled { background: var(--surface-3) !important; color: var(--text-2) !important; opacity: 1 !important; box-shadow: none; }
.ff-input, .ff-select { box-shadow: inset 0 1px 2px rgba(0,0,0,.04); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent) !important; outline-offset: 3px;
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger) !important; }
.ff-badge { box-shadow: inset 0 1px 0 var(--glass-bg); }
.ff-modal-overlay { background: var(--overlay-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ff-fadein .15s ease; }
.ff-modal { box-shadow: var(--shadow-lg); }
.ff-login-panel, .ff-onboarding-panel { background: var(--canvas-bg); }
.ff-auth-card { box-shadow: var(--shadow-lg); }
@keyframes ff-fadein { from { opacity: 0; } to { opacity: 1; } }
/* Respeita a preferência de movimento reduzido em todas as animações. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@supports not (backdrop-filter: blur(1px)) {
  .ff-card { background: var(--surface-1); }
  .ff-sidebar, .ff-header, .ff-bottom-bar { background: var(--surface-0); }
}

.ff-glass { background: var(--glass-bg); }

/* Dashboard: distribuição por categoria, compacta e acionável no mobile. */
.ff-category-card { padding: 16px; }
.ff-category-heading { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ff-category-description { font-size: 11.5px; line-height: 1.45; color: var(--text-3); margin: 5px 0 10px; }
.ff-category-total { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; color: var(--text-3); }
.ff-category-total > span { min-width: 0; overflow-wrap: anywhere; }
.ff-category-total strong { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ff-category-bars { display: flex; flex-direction: column; }
.ff-category-row { width: 100%; min-height: 44px; padding: 5px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--text-1); font-family: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.ff-category-row:hover, .ff-category-row[aria-pressed="true"] { background: var(--surface-2); }
.ff-category-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ff-category-name { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.ff-category-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; background: var(--category-color); }
.ff-category-amount { font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ff-category-row-bottom { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ff-category-track { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ff-category-fill { display: block; height: 100%; border-radius: 999px; background: var(--category-color); }
.ff-category-percent { font-size: 11px; line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ff-category-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0 0; margin-top: 6px; border: 0; border-top: 1px solid var(--glass-edge); border-radius: 0; background: transparent; color: var(--text-3); font-family: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.ff-category-more-value { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ff-category-clear { min-height: 44px; padding: 6px 0 0; border: 0; background: transparent; color: var(--accent); font-family: inherit; font-size: 11.5px; cursor: pointer; }
.ff-category-empty { padding: 12px 0; font-size: 12px; line-height: 1.45; color: var(--text-3); }

html:not(.nubank-light) .ff-primary-action:not(:disabled) { background: var(--action-gradient) !important; border-color: #75afff; }
html:not(.nubank-light) .ff-primary-action:not(:disabled):hover { background: var(--action-hover) !important; }

/* Mesmas cores de rolagem da referência no tema escuro. */
html.dark, html.dark * { scrollbar-color: #52647e #182438; }
html.dark ::-webkit-scrollbar-track { background: #182438; }
html.dark ::-webkit-scrollbar-thumb { background: #52647e; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #7185a1; }
html.dark ::-webkit-scrollbar-corner { background: #182438; }

/* Reporting and planning: existing tokens/components, mobile first. */
.ff-planning-page{padding:clamp(14px,4vw,24px);max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box;padding-bottom:180px}
.ff-planning-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.ff-planning-card{padding:clamp(14px,4vw,24px)!important;min-width:0}
.ff-planning-heading{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.ff-planning-heading h2,.ff-planning-card h3{margin:0 0 8px;color:var(--text-1)}
.ff-planning-heading p,.ff-planning-card p,.ff-planning-shares p,.ff-planning-save p{color:var(--text-2);line-height:1.5;font-size:13px;overflow-wrap:anywhere}
.ff-planning-button{min-height:44px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text-1);font-size:14px;font-weight:600;cursor:pointer;white-space:normal}
.ff-planning-primary{background:var(--action-gradient);color:var(--action-text);border-color:var(--accent)}
.ff-planning-button:disabled{opacity:.65;cursor:default}
.ff-planning-button:focus-visible,.ff-planning-checkbox input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ff-planning-total{display:block;font-size:26px;color:var(--text-1);margin:14px 0}
.ff-planning-row-title{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin:8px 0;color:var(--text-1);font-size:14px}
.ff-planning-row-title strong,.ff-planning-row-title>span:first-child{min-width:0;overflow-wrap:anywhere}
.ff-planning-row-title>span:last-child{flex-shrink:0}
.ff-planning-row-values{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;color:var(--text-2);font-size:12px;margin-top:7px;line-height:1.5}
.ff-planning-error,.ff-planning-notice{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text-1);display:flex;flex-wrap:wrap;align-items:center;gap:12px;overflow-wrap:anywhere}
.ff-planning-error{border-color:var(--danger)}
.ff-planning-shares{border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0;margin:18px 0}
.ff-planning-shares legend{font-weight:600;color:var(--text-1);font-size:14px;max-width:100%;overflow-wrap:anywhere}
.ff-planning-share-row{display:grid;grid-template-columns:minmax(0,1fr) 98px;gap:8px;align-items:center;margin-top:8px}
.ff-planning-checkbox{min-height:44px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;color:var(--text-1);overflow-wrap:anywhere}
.ff-planning-checkbox input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.ff-planning-percent-input{display:flex;align-items:center;gap:5px;color:var(--text-1)}
.ff-planning-percent-input input{min-width:0;min-height:44px;padding-left:7px;padding-right:7px}
.ff-planning-field{display:flex;flex-direction:column;gap:8px;color:var(--text-1);font-size:13px;font-weight:600;min-width:0;margin:10px 0}
.ff-planning-field input,.ff-planning-field select{min-height:44px}
.ff-planning-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ff-planning-saved-item{border-top:1px solid var(--border);padding-top:16px;margin-top:16px;min-width:0}
.ff-planning-form-fieldset{border:0;margin:0;padding:0;min-width:0}
.ff-planning-save{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.ff-planning-save p{flex:1;min-width:200px}
.ff-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}