* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--nf-font);
background: var(--nf-bg-gradient);
color: var(--nf-text);
}
a { color: var(--nf-primary); text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--nf-border); width: 100%; }
code { background: var(--nf-surface-soft); padding: 2px 7px; border-radius: 8px; }
/* Auth */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--nf-bg-gradient); }
.auth-shell { width: min(1050px, 100%); display: grid; grid-template-columns: 1fr 440px; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 32px; box-shadow: var(--nf-shadow); overflow: hidden; }
.auth-brand-panel { padding: 64px; background: linear-gradient(135deg, #001f54, #0057d9 55%, #00c48c); color: white; display: flex; flex-direction: column; justify-content: center; }
.auth-brand-panel h1 { font-size: 44px; margin: 24px 0 8px; letter-spacing: -1.5px; }
.auth-brand-panel p { opacity: .85; font-size: 18px; }
.auth-card { padding: 48px; }
.brand-mark { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); color: #fff; letter-spacing: -2px; }
.brand-mark.small { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; letter-spacing: -1px; flex: 0 0 auto; }
.form-stack { display: grid; gap: 16px; margin-top: 24px; }
label span { display: block; font-size: 13px; color: var(--nf-muted); margin-bottom: 8px; }
input, select, textarea {
width: 100%; border: 1px solid var(--nf-border); border-radius: 14px; padding: 13px 14px;
background: var(--nf-surface); color: var(--nf-text); outline: none; font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--nf-primary); box-shadow: 0 0 0 4px rgba(0, 87, 217, .12); }
textarea { resize: vertical; min-height: 120px; }
/* Buttons */
.btn { border: 0; border-radius: 14px; padding: 11px 16px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .18s ease; font: inherit; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); color: white; box-shadow: 0 12px 22px rgba(0, 87, 217, .16); }
.btn-outline { background: transparent; border: 1px solid var(--nf-border); color: var(--nf-text); }
.btn-ghost { background: var(--nf-surface-soft); color: var(--nf-text); }
.btn-danger { background: var(--nf-danger); color: white; }
.btn-sm { padding: 7px 10px; font-size: 12px; border-radius: 10px; }
.icon-btn { border: 1px solid var(--nf-border); background: var(--nf-surface); color: var(--nf-text); border-radius: 12px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.w-full { width: 100%; }
.muted { color: var(--nf-muted); }
.small-text { font-size: 13px; }
.page-kicker { text-transform: uppercase; letter-spacing: .12em; color: var(--nf-primary); font-weight: 900; font-size: 12px; margin: 0 0 8px; }
.auth-switch { margin-top: 20px; color: var(--nf-muted); }
/* Alerts */
.alert { padding: 12px 14px; border-radius: 14px; margin-bottom: 16px; }
.alert-danger { background: var(--nf-danger-soft); color: var(--nf-danger); }
.alert-success { background: var(--nf-success-soft); color: var(--nf-success); }
.alert-warning { background: #fff7df; color: #8a5800; border: 1px solid #f3d27a; }
.alert-info { background: var(--nf-primary-soft); color: var(--nf-primary); border: 1px solid color-mix(in srgb,var(--nf-primary) 22%,var(--nf-border)); }
.alert-list { margin: 8px 0 0; padding-left: 18px; }
.status-card { border-radius: 18px; padding: 20px; margin: 24px 0; border: 1px solid var(--nf-border); }
.status-card.warning { background: var(--nf-warning-soft); }
.status-card.danger { background: var(--nf-danger-soft); }
/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px; border-right: 1px solid var(--nf-border); background: color-mix(in srgb, var(--nf-surface) 92%, transparent); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 18px; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; }
.sidebar-logo { display: flex; align-items: center; gap: 12px; font-weight: 950; color: var(--nf-text); }
.brand-word { letter-spacing: -.3px; }
.sidebar-close { display: none; }
.tenant-pill { border: 1px solid var(--nf-border); border-radius: 18px; padding: 12px; display: flex; gap: 10px; align-items: center; background: var(--nf-surface-soft); }
.tenant-pill > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); color: #fff; font-weight: 900; font-size: 12px; }
.tenant-pill strong, .tenant-pill small { display: block; }
.tenant-pill strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px; }
.tenant-pill small { color: var(--nf-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin-top: 2px; }
.master-pill > span { background: linear-gradient(135deg, #0f172a, var(--nf-primary)); }
.sidebar-nav { display: grid; gap: 6px; }
.sidebar-nav a { padding: 11px 13px; border-radius: 14px; color: var(--nf-muted); font-weight: 800; display: flex; align-items: center; gap: 10px; }
.sidebar-nav a:hover { background: var(--nf-surface-soft); color: var(--nf-text); }
.sidebar-nav a.is-active { background: var(--nf-primary-soft); color: var(--nf-primary); }
.sidebar-footer { margin-top: auto; }
.version-card { border: 1px solid var(--nf-border); border-radius: 18px; padding: 14px; background: var(--nf-surface-soft); }
.version-card strong, .version-card small { display: block; }
.version-card small { color: var(--nf-muted); margin-top: 3px; }
.app-main { min-width: 0; }
.topbar { height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--nf-border); background: color-mix(in srgb, var(--nf-surface) 88%, transparent); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 5; }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-left strong, .topbar-left span { display: block; }
.topbar-left strong { font-size: 15px; }
.topbar-left span { font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-search { min-width: 180px; color: var(--nf-muted); background: var(--nf-surface-soft); border: 1px solid var(--nf-border); border-radius: 14px; padding: 10px 12px; font-size: 13px; }
.user-chip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--nf-border); background: var(--nf-surface); border-radius: 999px; padding: 6px 10px 6px 6px; }
.user-chip span { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--nf-surface-soft); font-size: 11px; font-weight: 900; }
.user-chip strong { font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { padding: 28px; }
.mobile-menu { display: none; }
/* Layout components */
.hero-card, .card, .metric-card, .dashboard-hero, .module-hero, .empty-state { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-lg); box-shadow: var(--nf-shadow-soft); }
.hero-card { padding: 28px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.hero-card h1, .dashboard-hero h1, .module-hero h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -1.3px; }
.hero-badge { padding: 10px 14px; border-radius: 999px; background: var(--nf-surface-soft); color: var(--nf-muted); font-weight: 900; }
.dashboard-hero, .module-hero { padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; overflow: hidden; position: relative; }
.dashboard-hero::after, .module-hero::after { content: ''; position: absolute; width: 260px; height: 260px; right: -80px; top: -100px; background: radial-gradient(circle, var(--nf-primary-soft), transparent 68%); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.center-actions { justify-content: center; }
.isf-card { min-width: 210px; position: relative; z-index: 1; border: 1px solid var(--nf-border); background: var(--nf-surface-soft); border-radius: 24px; padding: 22px; text-align: right; }
.isf-card span, .isf-card small { display: block; color: var(--nf-muted); font-weight: 700; }
.isf-card strong { display: block; font-size: 42px; letter-spacing: -2px; margin: 6px 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compact-grid { gap: 12px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; }
.metric-card { padding: 20px; position: relative; overflow: hidden; }
.metric-card::after { content: ''; position: absolute; inset: auto -40px -50px auto; width: 120px; height: 120px; border-radius: 999px; background: var(--metric-soft, var(--nf-primary-soft)); }
.metric-card span { display: block; color: var(--nf-muted); font-size: 13px; font-weight: 800; }
.metric-card strong { display: block; font-size: clamp(24px, 3vw, 32px); margin: 10px 0 6px; letter-spacing: -1px; }
.metric-card small { color: var(--nf-muted); }
.accent-blue { --metric-soft: var(--nf-primary-soft); }
.accent-green { --metric-soft: var(--nf-success-soft); }
.accent-red { --metric-soft: var(--nf-danger-soft); }
.accent-violet { --metric-soft: var(--nf-violet-soft); }
.accent-yellow { --metric-soft: var(--nf-warning-soft); }
.accent-slate { --metric-soft: rgba(100,116,139,.14); }
.card { padding: 24px; }
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.card-header h2 { margin: 0; letter-spacing: -.4px; }
.mt-24 { margin-top: 24px; }
.progress { height: 12px; background: var(--nf-surface-soft); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); border-radius: inherit; }
.labeled-progress { height: 14px; margin: 16px 0 10px; }
.badge { padding: 6px 10px; border-radius: 999px; background: var(--nf-surface-soft); color: var(--nf-muted); font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px; border-bottom: 1px solid var(--nf-border); text-align: left; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--nf-muted); }
.actions-cell { display: flex; gap: 8px; flex-wrap: wrap; }
.empty-table { text-align: center; color: var(--nf-muted); padding: 32px; }
.amount { font-weight: 900; white-space: nowrap; }
.amount.positive { color: var(--nf-success); }
.amount.negative { color: var(--nf-danger); }
/* Dashboard */
.big-empty { padding: 28px; text-align: center; margin-top: 18px; }
.empty-icon { width: 56px; height: 56px; border-radius: 20px; background: var(--nf-surface-soft); display: grid; place-items: center; margin: 0 auto 14px; font-size: 24px; }
.empty-state h2 { margin: 0 0 8px; letter-spacing: -.5px; }
.empty-state p { color: var(--nf-muted); margin: 0; }
.empty-mini { border: 1px dashed var(--nf-border); background: var(--nf-surface-soft); border-radius: 18px; padding: 18px; color: var(--nf-muted); }
.empty-mini strong { color: var(--nf-text); display: block; margin-bottom: 6px; }
.empty-mini p { margin: 0; }
.goal-values { display: flex; align-items: baseline; gap: 8px; }
.goal-values strong { font-size: 34px; letter-spacing: -1px; }
.goal-values span, .goal-footer { color: var(--nf-muted); }
.goal-footer { display: flex; justify-content: space-between; gap: 12px; }
.list-stack { display: grid; gap: 12px; }
.list-row { display: flex; justify-content: space-between; gap: 14px; padding: 13px; background: var(--nf-surface-soft); border-radius: 16px; }
.list-row strong, .list-row small { display: block; }
.list-row small { color: var(--nf-muted); margin-top: 3px; }
.list-row b { white-space: nowrap; }
.bar-chart { height: 240px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: end; padding: 8px 0 0; }
.bar-month { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 10px; text-align: center; color: var(--nf-muted); }
.bar-pair { height: 100%; display: flex; gap: 5px; align-items: end; justify-content: center; border-bottom: 1px solid var(--nf-border); }
.bar-pair span { width: 16px; border-radius: 999px 999px 4px 4px; min-height: 4px; }
.bar-income { background: linear-gradient(180deg, var(--nf-accent), var(--nf-success)); }
.bar-expense { background: linear-gradient(180deg, #fb7185, var(--nf-danger)); }
.category-list { display: grid; gap: 14px; }
.category-item div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.category-item span { color: var(--nf-muted); font-weight: 800; }
.mini-progress { height: 9px; background: var(--nf-surface-soft); border-radius: 999px; overflow: hidden; }
.mini-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { border: 1px solid var(--nf-border); background: var(--nf-surface-soft); border-radius: 18px; padding: 18px; }
.feature-card span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--nf-success-soft); color: var(--nf-success); font-weight: 900; margin-bottom: 10px; }
.feature-card strong, .feature-card small { display: block; }
.feature-card small { color: var(--nf-muted); margin-top: 6px; }
/* Sprint 1 retained */
.checkbox-line { display: flex; gap: 10px; align-items: flex-start; color: var(--nf-muted); font-size: 14px; }
.checkbox-line input { width: auto; margin-top: 3px; }
.toolbar-form { display: flex; gap: 14px; align-items: flex-end; }
.toolbar-search { flex: 1; }
.action-stack { display: grid; gap: 12px; }
.detail-list { display: grid; gap: 14px; margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--nf-border); padding-bottom: 12px; }
.detail-list dt { color: var(--nf-muted); font-weight: 700; }
.detail-list dd { margin: 0; font-weight: 800; text-align: right; }
.status-pending, .status-registered { background: var(--nf-warning-soft); color: var(--nf-warning); }
.status-active, .status-paid, .status-completed { background: var(--nf-success-soft); color: var(--nf-success); }
.status-delinquent, .status-overdue { background: var(--nf-danger-soft); color: var(--nf-danger); }
.status-blocked { background: rgba(15,23,42,.12); color: var(--nf-text); }
.status-cancelled { background: rgba(100,116,139,.12); color: var(--nf-muted); }
.status-pending { background: var(--nf-warning-soft); color: var(--nf-warning); }
@media (max-width: 1180px) {
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid { grid-template-columns: 1fr; }
.feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.auth-shell { grid-template-columns: 1fr; }
.auth-brand-panel { padding: 32px; }
.app-shell { grid-template-columns: 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 310px; transform: translateX(-104%); z-index: 20; transition: transform .2s ease; }
.app-shell.sidebar-open .sidebar { transform: translateX(0); }
.sidebar-close, .mobile-menu { display: grid; }
.topbar { padding: 0 16px; }
.topbar-search, .user-chip { display: none; }
.content { padding: 18px; }
.grid-4, .grid-2 { grid-template-columns: 1fr; }
.dashboard-hero, .module-hero { grid-template-columns: 1fr; }
.isf-card { text-align: left; min-width: 0; }
.hero-card { align-items: flex-start; flex-direction: column; }
.toolbar-form { flex-direction: column; align-items: stretch; }
.detail-list div { flex-direction: column; gap: 4px; }
.detail-list dd { text-align: left; }
.bar-chart { gap: 10px; }
}
@media (max-width: 560px) {
.topbar-actions .btn-outline { display: none; }
.grid-4 { gap: 12px; }
.bar-pair span { width: 12px; }
}
/* Sprint 3 - Transactions */
.transaction-hero .hero-actions { justify-content: flex-end; }
.filter-grid { display: grid; grid-template-columns: minmax(220px, 1.3fr) 180px 220px 150px 150px auto; gap: 12px; align-items: end; }
.filter-actions { display: flex; align-items: end; }
.form-card { max-width: 980px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: span 2; }
.form-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--nf-border); }
.d-block { display: block; }
.status-cancelled { background: rgba(100,116,139,.14); color: var(--nf-muted); }
@media (max-width: 1180px) {
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-actions { grid-column: span 2; }
}
@media (max-width: 720px) {
.filter-grid, .form-grid-2 { grid-template-columns: 1fr; }
.filter-actions, .span-2 { grid-column: auto; }
.form-footer { flex-direction: column-reverse; }
.transaction-hero .hero-actions { justify-content: flex-start; }
}
/* Sprint 4 - Accounts */
.account-filter-grid { grid-template-columns: minmax(220px, 1.4fr) 220px 180px auto; }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-card { border: 1px solid var(--nf-border); background: var(--nf-card); border-radius: 24px; padding: 20px; box-shadow: var(--nf-shadow-sm); display: grid; gap: 18px; }
.account-card.is-muted { opacity: .68; }
.account-card-top { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.account-card-top h3 { margin: 0; letter-spacing: -.4px; }
.account-card-top span:not(.favorite-pill) { display: block; color: var(--nf-muted); font-weight: 700; margin-top: 4px; font-size: 13px; }
.account-icon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: var(--nf-surface-soft); font-size: 22px; flex: 0 0 auto; }
.favorite-pill { margin-left: auto; white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--nf-warning-soft); color: var(--nf-warning); font-size: 12px; font-weight: 900; }
.account-balance span { display: block; color: var(--nf-muted); font-weight: 800; font-size: 13px; }
.account-balance strong { display: block; font-size: 32px; letter-spacing: -1px; margin-top: 6px; }
.account-balance strong.positive { color: var(--nf-success); }
.account-balance strong.negative { color: var(--nf-danger); }
.account-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--nf-muted); font-weight: 800; font-size: 13px; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--nf-border); }
.status-inactive { background: rgba(100,116,139,.14); color: var(--nf-muted); }
@media (max-width: 1180px) {
.account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.account-grid, .account-filter-grid { grid-template-columns: 1fr; }
.account-card-top { flex-wrap: wrap; }
.favorite-pill { margin-left: 0; }
.account-actions { flex-direction: column; align-items: stretch; }
.account-actions .btn, .account-actions form, .account-actions button { width: 100%; }
}
/* Sprint 5 - Categories and Tags */
.taxonomy-filter-grid { grid-template-columns: minmax(220px, 1.4fr) 190px 170px 190px auto; }
.tag-filter-grid { grid-template-columns: minmax(220px, 1.3fr) 180px auto; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.taxonomy-card { border: 1px solid var(--nf-border); background: var(--nf-surface); border-radius: 24px; padding: 18px; box-shadow: var(--nf-shadow-soft); display: grid; gap: 16px; }
.taxonomy-card.is-muted { opacity: .68; }
.taxonomy-card-top { display: flex; align-items: flex-start; gap: 12px; }
.taxonomy-card-top h3 { margin: 0; letter-spacing: -.35px; }
.taxonomy-card-top small { display: block; color: var(--nf-muted); margin-top: 4px; font-weight: 750; }
.taxonomy-icon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--item-color, var(--nf-primary)) 14%, var(--nf-surface)); color: var(--item-color, var(--nf-primary)); font-size: 12px; font-weight: 950; text-transform: uppercase; flex: 0 0 auto; }
.taxonomy-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.taxonomy-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--nf-border); min-height: 46px; align-items: center; }
.tag-chip { --item-color: var(--nf-accent); display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 7px 11px; background: color-mix(in srgb, var(--item-color) 13%, var(--nf-surface)); color: var(--item-color); font-size: 12px; font-weight: 900; margin: 2px; white-space: nowrap; }
.tag-chip.compact { padding: 4px 8px; font-size: 11px; background: var(--nf-surface-soft); color: var(--nf-muted); }
@media (max-width: 1180px) {
.taxonomy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.taxonomy-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tag-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.taxonomy-grid, .taxonomy-filter-grid, .tag-filter-grid { grid-template-columns: 1fr; }
.taxonomy-actions { flex-direction: column; align-items: stretch; }
.taxonomy-actions .btn, .taxonomy-actions form, .taxonomy-actions button { width: 100%; }
}
/* Sprint 6 - Cards and invoices */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card-grid .credit-card { background: linear-gradient(145deg, color-mix(in srgb, var(--nf-primary) 8%, var(--nf-card)), var(--nf-card)); }
.progress-line { height: 10px; border-radius: 999px; background: var(--nf-surface-soft); overflow: hidden; border: 1px solid var(--nf-border); }
.progress-line > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); min-width: 0; transition: width .2s ease; }
.invoice-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.cards-hero .hero-actions { justify-content: flex-end; }
@media (max-width: 900px) {
.grid-3 { grid-template-columns: 1fr; }
.cards-hero .hero-actions { justify-content: flex-start; }
.invoice-meta { justify-content: flex-start; }
}
/* Sprint 7 - Goals */
.goals-filter-grid { grid-template-columns: minmax(220px, 1.4fr) 220px auto; }
.goals-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.goal-tile { border: 1px solid var(--nf-border); border-left: 5px solid var(--goal-color, var(--nf-primary)); background: var(--nf-card); border-radius: 24px; padding: 20px; box-shadow: var(--nf-shadow-sm); display: grid; gap: 16px; }
.goal-tile-head { display: flex; align-items: flex-start; gap: 12px; }
.goal-tile-head h3 { margin: 0; letter-spacing: -.4px; }
.goal-tile-head span { color: var(--nf-muted); font-weight: 800; font-size: 13px; display: block; margin-top: 4px; }
.goal-symbol { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--goal-color, var(--nf-primary)) 14%, transparent); font-size: 22px; flex: 0 0 auto; }
.goal-description { margin: 0; color: var(--nf-muted); line-height: 1.55; }
.goal-values.compact strong { font-size: 26px; }
.goal-progress { height: 13px; }
.goal-meta-row { display: flex; justify-content: space-between; gap: 12px; color: var(--nf-muted); font-size: 13px; font-weight: 800; }
.goal-contribution { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--nf-surface-soft); }
.goal-contribution input { padding: 10px 12px; border-radius: 12px; }
.goal-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--nf-border); }
.status-border-completed { border-left-color: var(--nf-success); }
.status-border-paused { border-left-color: var(--nf-warning); opacity: .88; }
.status-border-cancelled { border-left-color: var(--nf-muted); opacity: .66; }
@media (max-width: 980px) {
.goals-grid { grid-template-columns: 1fr; }
.goals-filter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.goal-contribution { grid-template-columns: 1fr; }
.goal-meta-row { flex-direction: column; gap: 4px; }
}
/* Sprint 8 - Patrimony */
.patrimony-hero .hero-actions { justify-content: flex-end; }
.patrimony-filter-grid { grid-template-columns: minmax(220px, 1.4fr) 190px 180px 190px auto; }
.patrimony-grid .patrimony-card { border-left: 5px solid var(--nf-success); }
.patrimony-grid .liability-card { border-left: 5px solid var(--nf-danger); }
.equation-stack { display: grid; gap: 12px; }
.equation-stack > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: var(--nf-surface-soft); }
.equation-stack span { color: var(--nf-muted); font-weight: 850; }
.equation-stack strong { font-size: 20px; }
.equation-stack strong.negative { color: var(--nf-danger); }
.equation-total { border: 1px solid color-mix(in srgb, var(--nf-primary) 24%, var(--nf-border)); background: color-mix(in srgb, var(--nf-primary) 7%, var(--nf-surface)) !important; }
.equation-total strong { color: var(--nf-primary); font-size: 26px; }
.status-sold { background: rgba(100,116,139,.14); color: var(--nf-muted); }
.status-paid { background: var(--nf-success-soft); color: var(--nf-success); }
.positive { color: var(--nf-success); }
.negative { color: var(--nf-danger); }
@media (max-width: 1180px) {
.patrimony-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.patrimony-hero .hero-actions { justify-content: flex-start; }
.patrimony-filter-grid { grid-template-columns: 1fr; }
}
/* Sprint 9 — Investimentos */
.investments-hero {
background:
radial-gradient(circle at top right, rgba(0, 196, 140, .18), transparent 38%),
linear-gradient(135deg, var(--nf-surface), var(--nf-surface-soft));
}
.investments-filter-grid {
grid-template-columns: 1.4fr repeat(3, minmax(150px, .8fr)) auto;
}
.investments-grid {
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.investment-card .goal-contribution {
grid-template-columns: 1fr 1fr auto;
}
.activity-list {
display: grid;
gap: 12px;
}
.activity-item {
display: flex;
gap: 12px;
align-items: center;
padding: 12px;
border: 1px solid var(--nf-border);
border-radius: var(--radius-md);
background: var(--nf-surface-soft);
}
.activity-item > span {
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 196, 140, .12);
color: var(--nf-accent);
font-weight: 800;
}
.activity-item strong,
.activity-item small {
display: block;
}
@media (max-width: 980px) {
.investments-filter-grid,
.investment-card .goal-contribution {
grid-template-columns: 1fr;
}
}
/* Sprint 10 — Relatórios */
.reports-hero {
background:
radial-gradient(circle at top right, rgba(0, 87, 217, .16), transparent 42%),
linear-gradient(135deg, var(--nf-surface), var(--nf-surface-soft));
}
.reports-toolbar {
display: flex;
align-items: end;
gap: 12px;
flex-wrap: wrap;
}
.reports-toolbar label {
min-width: 220px;
}
.report-bar-chart {
height: 280px;
}
.chart-legend {
display: flex;
gap: 12px;
align-items: center;
color: var(--nf-muted);
font-weight: 800;
font-size: 13px;
margin-top: 12px;
}
.chart-legend span {
width: 18px;
height: 10px;
border-radius: 999px;
display: inline-block;
}
.legend-income { background: linear-gradient(90deg, var(--nf-accent), var(--nf-success)); }
.legend-expense { background: linear-gradient(90deg, #fb7185, var(--nf-danger)); }
.status-grid {
display: grid;
gap: 12px;
}
.status-report-card {
border: 1px solid var(--nf-border);
background: var(--nf-surface-soft);
border-radius: 18px;
padding: 14px;
display: grid;
gap: 5px;
}
.status-report-card strong,
.status-report-card small {
display: block;
}
.status-report-card small {
color: var(--nf-muted);
font-weight: 700;
}
.daily-flow {
display: grid;
grid-template-columns: repeat(31, minmax(18px, 1fr));
gap: 8px;
align-items: end;
min-height: 170px;
overflow-x: auto;
padding-bottom: 8px;
}
.daily-flow-item {
min-width: 24px;
display: grid;
grid-template-rows: 130px auto;
gap: 8px;
text-align: center;
color: var(--nf-muted);
opacity: .55;
}
.daily-flow-item.has-data {
opacity: 1;
}
.daily-bars {
display: flex;
align-items: end;
justify-content: center;
gap: 3px;
border-bottom: 1px solid var(--nf-border);
}
.daily-bars span {
width: 8px;
min-height: 2px;
border-radius: 999px 999px 4px 4px;
}
.daily-flow-item small {
font-size: 11px;
font-weight: 800;
}
@media (max-width: 900px) {
.reports-toolbar { align-items: stretch; flex-direction: column; }
.reports-toolbar label { min-width: 0; }
.daily-flow { grid-template-columns: repeat(31, 22px); }
}
/* Settings */
.settings-grid { align-items: start; }
.stacked-cards { display: grid; gap: 0; }
.settings-grid h3 { margin: 0 0 6px; }
@media (max-width: 980px) {
.settings-grid { grid-template-columns: 1fr; }
}
/* Sprint 12 - SVG Icon System and Notifications */
.nf-icon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: middle;
flex: 0 0 auto;
}
.title-icon {
width: 32px;
height: 32px;
margin-right: 10px;
color: var(--nf-primary);
}
.empty-svg {
width: 28px;
height: 28px;
color: var(--nf-primary);
}
.sidebar-nav a .nav-icon {
width: 28px;
height: 28px;
border-radius: 10px;
display: grid;
place-items: center;
background: var(--nf-surface-soft);
color: var(--nf-muted);
transition: .18s ease;
}
.sidebar-nav a .nav-icon .nf-icon {
width: 17px;
height: 17px;
}
.sidebar-nav a.is-active .nav-icon,
.sidebar-nav a:hover .nav-icon {
color: var(--nf-primary);
background: var(--nf-primary-soft);
}
.nav-count {
margin-left: auto;
min-width: 22px;
height: 22px;
border-radius: 999px;
display: inline-grid;
place-items: center;
padding: 0 7px;
background: var(--nf-danger);
color: #fff;
font-size: 11px;
font-weight: 900;
}
.topbar-search {
display: inline-flex;
align-items: center;
gap: 8px;
}
.topbar-icon-link {
position: relative;
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
color: var(--nf-text);
background: var(--nf-surface-soft);
border: 1px solid var(--nf-border);
}
.topbar-icon-link span {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
border-radius: 999px;
display: grid;
place-items: center;
padding: 0 6px;
background: var(--nf-danger);
color: #fff;
border: 2px solid var(--nf-surface);
font-size: 11px;
font-weight: 900;
}
.notifications-hero h1,
.module-hero h1 {
display: flex;
align-items: center;
gap: 8px;
}
.notification-filter-grid {
grid-template-columns: 220px 280px auto;
}
.notification-list {
display: grid;
gap: 14px;
}
.notification-card {
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
padding: 16px;
border: 1px solid var(--nf-border);
border-radius: 20px;
background: var(--nf-surface-soft);
}
.notification-card.is-unread {
background: var(--nf-surface);
box-shadow: var(--nf-shadow-soft);
}
.notification-icon {
width: 48px;
height: 48px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--nf-primary-soft);
color: var(--nf-primary);
}
.notification-card.priority-high .notification-icon {
background: var(--nf-danger-soft);
color: var(--nf-danger);
}
.notification-card.priority-medium .notification-icon {
background: var(--nf-warning-soft);
color: var(--nf-warning);
}
.notification-title-row {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
}
.notification-title-row h3 {
margin: 0;
letter-spacing: -.3px;
}
.notification-content p {
margin: 8px 0 6px;
color: var(--nf-muted);
}
.notification-content small {
color: var(--nf-muted);
font-weight: 700;
}
.notification-badges,
.notification-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.notification-actions {
margin-top: 14px;
}
.priority-badge.priority-high { background: var(--nf-danger-soft); color: var(--nf-danger); }
.priority-badge.priority-medium { background: var(--nf-warning-soft); color: var(--nf-warning); }
.priority-badge.priority-low { background: var(--nf-primary-soft); color: var(--nf-primary); }
.status-unread { background: var(--nf-warning-soft); color: var(--nf-warning); }
.status-read { background: var(--nf-success-soft); color: var(--nf-success); }
.status-dismissed { background: rgba(100,116,139,.12); color: var(--nf-muted); }
@media (max-width: 900px) {
.notification-filter-grid { grid-template-columns: 1fr; }
.notification-card { grid-template-columns: 1fr; }
.notification-title-row { flex-direction: column; }
}
/* Sprint 13 - Clean SaaS polish */
html { background: var(--nf-bg); }
body {
background: var(--nf-bg);
color: var(--nf-text);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.app-shell { grid-template-columns: 260px minmax(0, 1fr); background: var(--nf-bg); }
.sidebar {
height: 100dvh;
min-height: 0;
overflow: hidden;
padding: 16px 14px;
gap: 12px;
background: var(--nf-sidebar-bg, var(--nf-surface));
border-right: 1px solid var(--nf-border);
box-shadow: none;
backdrop-filter: none;
}
.sidebar-head { flex: 0 0 auto; padding: 2px 4px 8px; }
.sidebar-logo { gap: 10px; }
.brand-word { font-size: 15px; letter-spacing: -.35px; }
.brand-mark.small { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
.tenant-pill {
flex: 0 0 auto;
padding: 10px;
border-radius: 14px;
background: var(--nf-surface-soft);
border: 1px solid var(--nf-border);
box-shadow: none;
}
.tenant-pill > span { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
.tenant-pill strong { font-size: 13px; }
.tenant-pill small { font-size: 11px; }
.sidebar-nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 2px 4px 8px 0;
margin-right: -4px;
gap: 2px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--nf-muted) 28%, transparent) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nf-muted) 24%, transparent); border-radius: 999px; }
.nav-section-label {
margin: 14px 10px 6px;
color: var(--nf-muted);
font-size: 10px;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.sidebar-nav a {
min-height: 38px;
padding: 8px 9px;
border-radius: 12px;
gap: 10px;
font-size: 13px;
font-weight: 750;
color: var(--nf-muted);
}
.sidebar-nav a .nav-icon {
width: 28px;
height: 28px;
border-radius: 9px;
background: transparent;
color: color-mix(in srgb, var(--nf-muted) 82%, var(--nf-text));
}
.sidebar-nav a:hover { background: var(--nf-surface-soft); color: var(--nf-text); }
.sidebar-nav a.is-active {
background: var(--nf-primary-soft);
color: var(--nf-primary);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-primary) 10%, transparent);
}
.sidebar-nav a.is-active .nav-icon,
.sidebar-nav a:hover .nav-icon { background: transparent; color: currentColor; }
.nav-count { margin-left: auto; min-width: 19px; height: 19px; font-size: 10px; }
.sidebar-footer { flex: 0 0 auto; margin-top: 0; padding: 8px 4px 0; }
.version-card { padding: 10px; border-radius: 12px; background: transparent; box-shadow: none; }
.version-card strong { font-size: 12px; }
.version-card small { font-size: 11px; }
.app-main { min-width: 0; }
.topbar {
height: 64px;
padding: 0 24px;
background: color-mix(in srgb, var(--nf-surface) 96%, transparent);
backdrop-filter: blur(12px);
box-shadow: none;
}
.topbar-left strong { font-size: 14px; letter-spacing: -.15px; }
.topbar-left span { font-size: 11px; }
.topbar-actions { gap: 8px; }
.icon-btn, .topbar-icon-link, .theme-toggle {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid var(--nf-border);
background: var(--nf-surface);
color: var(--nf-muted);
display: inline-grid;
place-items: center;
}
.icon-btn:hover, .topbar-icon-link:hover, .theme-toggle:hover { color: var(--nf-text); background: var(--nf-surface-soft); }
.user-chip { height: 38px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--nf-surface); border: 1px solid var(--nf-border); }
.user-chip span { width: 28px; height: 28px; border-radius: 999px; }
.user-chip strong { font-size: 12px; }
.content { padding: 24px; max-width: 1480px; width: 100%; margin: 0 auto; }
.hero-card, .card, .metric-card, .dashboard-hero, .module-hero, .empty-state,
.account-card, .taxonomy-card, .goal-tile, .notification-card {
box-shadow: none !important;
border-color: var(--nf-border);
}
.dashboard-hero, .module-hero {
padding: 22px;
border-radius: 18px;
background: var(--nf-surface);
}
.dashboard-hero::after, .module-hero::after { display: none; }
.hero-card h1, .dashboard-hero h1, .module-hero h1 {
font-size: clamp(24px, 3vw, 34px);
letter-spacing: -.9px;
}
.page-kicker { font-size: 11px; letter-spacing: .10em; margin-bottom: 7px; }
.hero-actions { margin-top: 14px; }
.card { padding: 18px; border-radius: 18px; }
.card-header { margin-bottom: 14px; }
.card-header h2 { font-size: 18px; }
.grid-4, .grid-2, .dashboard-grid { gap: 12px; }
.metric-card { padding: 16px; border-radius: 18px; }
.metric-card::after { display: none; }
.metric-card span { font-size: 12px; font-weight: 760; }
.metric-card strong { font-size: clamp(22px, 2.5vw, 28px); margin: 7px 0 4px; }
.metric-card small { font-size: 12px; }
.btn { border-radius: 12px; padding: 10px 13px; font-weight: 750; }
.btn-sm { padding: 7px 10px; border-radius: 10px; }
input, select, textarea { border-radius: 12px; padding: 11px 12px; }
.table-wrap { border: 1px solid var(--nf-border); border-radius: 14px; overflow: auto; }
th, td { padding: 12px 14px; }
th { background: var(--nf-surface-soft); }
.badge { padding: 5px 9px; font-size: 11px; }
.empty-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 0; color: var(--nf-primary); }
.empty-icon .nf-icon { width: 24px; height: 24px; }
.account-icon, .goal-symbol, .notification-icon {
font-size: 0;
color: var(--nf-primary);
}
.account-icon .nf-icon, .goal-symbol .nf-icon, .notification-icon .nf-icon { width: 21px; height: 21px; }
.favorite-pill { background: var(--nf-primary-soft); color: var(--nf-primary); }
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
.sidebar { width: 288px; padding: 14px 12px; overflow: hidden; }
.topbar { height: 60px; padding: 0 14px; }
.content { padding: 16px; }
}
/* Sprint 14 - QA visual, sidebar scroll and cleaner product layout */
:root {
--nf-bg: #f6f8fb;
--nf-surface-soft: #f3f6fa;
--nf-border: #dfe7f1;
--nf-shadow-soft: none;
}
html[data-theme="dark"] {
--nf-bg: #07101c;
--nf-surface-soft: #101d31;
--nf-border: #1d2d45;
}
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
position: sticky;
top: 0;
max-height: 100dvh;
overflow: hidden;
padding: 14px 12px;
gap: 10px;
}
.sidebar-head { padding-bottom: 6px; }
.sidebar-logo .brand-word { font-size: 14px; }
.tenant-pill { padding: 9px; }
.tenant-pill > span { width: 32px; height: 32px; }
.tenant-pill strong {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-nav {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
overflow-x: hidden;
overscroll-behavior: contain;
padding: 2px 6px 10px 0;
margin-right: -6px;
scrollbar-gutter: stable;
}
.sidebar-nav a { min-height: 36px; padding: 7px 8px; font-size: 12.5px; border-radius: 11px; }
.sidebar-nav a .nav-icon { width: 26px; height: 26px; }
.nav-section-label { margin: 12px 8px 5px; font-size: 9.5px; opacity: .75; }
.sidebar-footer { display: none; }
.topbar { height: 62px; padding: 0 24px; }
.content {
padding: 32px 24px 28px;
max-width: 1440px;
}
.dashboard-hero,
.module-hero,
.card,
.metric-card,
.account-card,
.taxonomy-card,
.goal-tile,
.notification-card {
border-radius: 16px;
background: var(--nf-surface);
}
.dashboard-hero,
.module-hero {
padding: 24px 26px;
margin-top: 0;
}
.dashboard-hero h1,
.module-hero h1 { font-size: clamp(25px, 2.7vw, 36px); }
.dashboard-hero .muted,
.module-hero .muted { max-width: 820px; line-height: 1.55; }
.hero-actions .btn { min-height: 42px; }
.isf-card {
border-radius: 18px;
background: var(--nf-surface-soft);
border: 1px solid var(--nf-border);
box-shadow: none;
padding: 22px 26px;
min-width: 220px;
}
.isf-card strong { font-size: clamp(34px, 4vw, 48px); letter-spacing: -1.4px; }
.grid-4.dashboard-metrics { margin-top: 14px; }
.metric-card { padding: 17px 18px; }
.metric-card strong { color: var(--nf-text); }
.card { padding: 20px; }
.card-header h2 { font-size: 19px; letter-spacing: -.45px; }
.btn { box-shadow: none !important; }
.btn:hover { transform: none; }
.btn-primary { background: var(--nf-primary); }
.btn-primary:hover { background: var(--nf-primary-strong); }
.btn-outline:hover,
.btn-ghost:hover { background: var(--nf-surface-soft); }
.btn-danger:hover { filter: brightness(.95); }
.status-blocked { background: var(--nf-danger-soft); color: var(--nf-danger); }
.danger-zone { border-color: color-mix(in srgb, var(--nf-danger) 28%, var(--nf-border)); }
.danger-zone h2 { color: var(--nf-danger); }
.danger-form { margin-top: 18px; }
html[data-dashboard-density="compact"] .dashboard-hero,
html[data-dashboard-density="compact"] .module-hero { padding: 18px 20px; }
html[data-dashboard-density="compact"] .grid-4,
html[data-dashboard-density="compact"] .grid-2,
html[data-dashboard-density="compact"] .dashboard-grid { gap: 10px; }
html[data-dashboard-density="compact"] .metric-card,
html[data-dashboard-density="compact"] .card { padding: 14px; }
html[data-dashboard-density="compact"] .metric-card strong { font-size: 22px; }
html[data-dashboard-density="compact"] .page-kicker { margin-bottom: 4px; }
@media (max-width: 900px) {
.sidebar {
position: fixed;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
}
.sidebar-nav { overflow-y: auto !important; }
.content { padding: 24px 16px 20px; }
.dashboard-hero, .module-hero { padding: 20px; }
.isf-card { min-width: 0; }
}
/* Sprint 15 - Final UX refinements, collapsed sidebar, support and guided tour */
:root {
--nf-sidebar-width: 248px;
--nf-sidebar-collapsed-width: 84px;
}
.brand-img { width: 34px; height: 34px; border-radius: 11px; display: block; flex: 0 0 auto; }
.sidebar-toggle { display: inline-grid; }
.app-shell { grid-template-columns: var(--nf-sidebar-width) minmax(0, 1fr); transition: grid-template-columns .18s ease; }
.app-shell.sidebar-collapsed { grid-template-columns: var(--nf-sidebar-collapsed-width) minmax(0, 1fr); }
.app-shell.sidebar-collapsed .sidebar { padding-inline: 12px; align-items: center; }
.app-shell.sidebar-collapsed .sidebar-head { width: 100%; justify-content: center; position: relative; }
.app-shell.sidebar-collapsed .sidebar-logo { justify-content: center; }
.app-shell.sidebar-collapsed .brand-word,
.app-shell.sidebar-collapsed .tenant-pill div,
.app-shell.sidebar-collapsed .nav-section-label,
.app-shell.sidebar-collapsed .sidebar-nav a span:not(.nav-icon),
.app-shell.sidebar-collapsed .nav-count { display: none; }
.app-shell.sidebar-collapsed .sidebar-toggle { position: absolute; right: -4px; top: 0; }
.app-shell.sidebar-collapsed .tenant-pill { width: 48px; height: 48px; padding: 7px; justify-content: center; }
.app-shell.sidebar-collapsed .tenant-pill > span { width: 34px; height: 34px; }
.app-shell.sidebar-collapsed .sidebar-nav { width: 100%; padding-right: 0; margin-right: 0; align-items: center; }
.app-shell.sidebar-collapsed .sidebar-nav a { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
.app-shell.sidebar-collapsed .sidebar-nav a .nav-icon { width: 30px; height: 30px; }
.auth-shell { grid-template-columns: 1.1fr 440px; border-radius: 28px; }
.auth-brand-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 20% 20%, rgba(0,196,140,.42), transparent 28%), linear-gradient(135deg, #06142b 0%, #0b2f72 52%, #00a978 100%); }
.auth-brand-panel::after { content: ''; position: absolute; right: -120px; bottom: -140px; width: 360px; height: 360px; border-radius: 999px; background: rgba(255,255,255,.12); }
.auth-logo { width: 220px; max-width: 100%; height: auto; position: relative; z-index: 1; margin-bottom: 34px; }
.auth-brand-panel h1 { position: relative; z-index: 1; max-width: 560px; font-size: clamp(34px, 5vw, 54px); line-height: 1; }
.auth-brand-panel p { position: relative; z-index: 1; max-width: 560px; line-height: 1.6; }
.auth-proof-grid { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.auth-proof-grid span { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #fff; border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 800; }
.auth-card h2 { font-size: 32px; letter-spacing: -.8px; margin: 0 0 8px; }
.topbar-icon-link .nf-icon,
.icon-btn .nf-icon { width: 19px; height: 19px; }
.user-chip img,
.profile-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-chip img { width: 28px; height: 28px; border-radius: 999px; }
.profile-upload { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--nf-border); border-radius: 16px; background: var(--nf-surface-soft); }
.profile-preview { width: 68px; height: 68px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); color: #fff; font-weight: 900; flex: 0 0 auto; }
.profile-file { flex: 1; }
.profile-file input { margin-top: 6px; background: var(--nf-surface); }
.profile-file small { display: block; margin-top: 6px; color: var(--nf-muted); font-size: 12px; }
.support-fab { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px; border-radius: 999px; background: #17a866; color: white; box-shadow: 0 16px 32px rgba(23,168,102,.24); font-weight: 850; }
.support-fab .nf-icon { width: 20px; height: 20px; }
.support-fab:hover { color: #fff; transform: translateY(-1px); }
.tutorial-modal[hidden] { display: none; }
.tutorial-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.tutorial-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 23, .46); backdrop-filter: blur(6px); }
.tutorial-card { position: relative; width: min(720px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: 24px; padding: 24px; box-shadow: 0 28px 80px rgba(2,8,23,.25); }
.tutorial-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.tutorial-head h2 { margin: 0; font-size: 28px; letter-spacing: -.7px; }
.tutorial-steps { display: grid; gap: 10px; }
.tutorial-steps article { border: 1px solid var(--nf-border); background: var(--nf-surface-soft); border-radius: 16px; padding: 14px; }
.tutorial-steps strong { display: block; margin-bottom: 4px; }
.tutorial-steps p { margin: 0; color: var(--nf-muted); line-height: 1.5; }
.tutorial-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
/* Make compact mode visibly meaningful */
html[data-dashboard-density="compact"] .content { padding-top: 20px; }
html[data-dashboard-density="compact"] .dashboard-hero { grid-template-columns: minmax(0,1fr) auto; }
html[data-dashboard-density="compact"] .dashboard-hero .muted { display: none; }
html[data-dashboard-density="compact"] .hero-actions { margin-top: 10px; }
html[data-dashboard-density="compact"] .isf-card { padding: 14px 18px; min-width: 170px; }
html[data-dashboard-density="compact"] .isf-card strong { font-size: 34px; }
html[data-dashboard-density="compact"] .dashboard-metrics { margin-top: 10px; }
html[data-dashboard-density="compact"] .dashboard-grid { margin-top: 14px; }
/* Subtle life, without visual noise */
.dashboard-hero,
.module-hero { position: relative; }
.dashboard-hero::before,
.module-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); opacity: .92; }
.sidebar-nav a.is-active { position: relative; }
.sidebar-nav a.is-active::before { content: ''; width: 3px; height: 18px; border-radius: 999px; background: currentColor; position: absolute; left: 0; }
@media (max-width: 900px) {
.app-shell,
.app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
.app-shell.sidebar-collapsed .brand-word,
.app-shell.sidebar-collapsed .tenant-pill div,
.app-shell.sidebar-collapsed .nav-section-label,
.app-shell.sidebar-collapsed .sidebar-nav a span:not(.nav-icon) { display: initial; }
.app-shell.sidebar-collapsed .sidebar { align-items: stretch; }
.app-shell.sidebar-collapsed .sidebar-nav a { width: auto; height: auto; justify-content: flex-start; padding: 8px 9px; }
.support-fab span { display: none; }
.support-fab { width: 48px; height: 48px; padding: 0; justify-content: center; }
.auth-shell { grid-template-columns: 1fr; }
.auth-brand-panel { padding: 32px; }
.auth-logo { width: 190px; margin-bottom: 22px; }
}
/* Sprint 16 - Avatar hotfix, sidebar collapsed refinada e detalhes premium discretos */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 18% 8%, rgba(0,87,217,.055), transparent 28%),
radial-gradient(circle at 88% 18%, rgba(0,196,140,.060), transparent 26%),
linear-gradient(180deg, rgba(255,255,255,.48), transparent 36%);
}
.sidebar {
overflow: hidden;
background:
linear-gradient(180deg, rgba(0,87,217,.026), transparent 180px),
var(--nf-sidebar-bg, var(--nf-surface));
}
.sidebar-head,
.tenant-pill,
.sidebar-footer { flex: 0 0 auto; }
.sidebar-nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--nf-muted) 28%, transparent) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nf-muted) 24%, transparent); border-radius: 999px; }
.nav-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; }
.nav-icon .nf-icon { width: 21px; height: 21px; stroke-width: 2.05; }
.sidebar-nav a { min-height: 44px; position: relative; }
.sidebar-nav a.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-primary) 12%, transparent); }
.app-shell.sidebar-collapsed .sidebar {
padding: 18px 12px;
align-items: center;
}
.app-shell.sidebar-collapsed .sidebar-head {
width: 100%;
justify-content: flex-start;
align-items: center;
flex-direction: column;
gap: 10px;
position: static;
}
.app-shell.sidebar-collapsed .brand-img { width: 42px; height: 42px; border-radius: 14px; }
.app-shell.sidebar-collapsed .sidebar-toggle {
position: static;
right: auto;
top: auto;
width: 42px;
height: 38px;
border-radius: 14px;
background: var(--nf-surface-soft);
}
.app-shell.sidebar-collapsed .tenant-pill {
width: 52px;
height: 52px;
padding: 7px;
border-radius: 18px;
}
.app-shell.sidebar-collapsed .tenant-pill > span {
width: 38px;
height: 38px;
border-radius: 14px;
}
.app-shell.sidebar-collapsed .sidebar-nav {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding-right: 0;
}
.app-shell.sidebar-collapsed .sidebar-nav a {
width: 52px;
height: 52px;
min-height: 52px;
border-radius: 18px;
justify-content: center;
}
.app-shell.sidebar-collapsed .sidebar-nav a .nav-icon {
width: 30px;
height: 30px;
flex-basis: 30px;
}
.app-shell.sidebar-collapsed .sidebar-nav a .nav-icon .nf-icon { width: 24px; height: 24px; }
.app-shell.sidebar-collapsed .sidebar-nav a.is-active::before {
left: 50%;
top: auto;
bottom: 6px;
transform: translateX(-50%);
width: 18px;
height: 3px;
}
.app-shell.sidebar-collapsed .version-card {
width: 52px;
min-height: 44px;
padding: 9px 4px;
text-align: center;
border-radius: 16px;
}
.app-shell.sidebar-collapsed .version-card strong { font-size: 11px; }
.app-shell.sidebar-collapsed .version-card small { display: none; }
.card,
.metric-card,
.account-card,
.dashboard-hero,
.module-hero,
.empty-state {
position: relative;
}
.card::before,
.metric-card::before,
.account-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--nf-primary) 36%, transparent), color-mix(in srgb, var(--nf-accent) 30%, transparent));
opacity: .40;
pointer-events: none;
}
.card:hover,
.metric-card:hover,
.account-card:hover {
border-color: color-mix(in srgb, var(--nf-primary) 18%, var(--nf-border));
}
.btn-primary {
background: linear-gradient(135deg, var(--nf-primary), color-mix(in srgb, var(--nf-accent) 46%, var(--nf-primary)));
}
.btn-primary:hover { filter: saturate(1.05) brightness(.98); }
.tutorial-card { width: min(920px, 100%); padding: 26px; }
.tutorial-intro {
border: 1px solid color-mix(in srgb, var(--nf-primary) 18%, var(--nf-border));
background: linear-gradient(135deg, var(--nf-primary-soft), var(--nf-accent-soft));
border-radius: 18px;
padding: 16px 18px;
margin-bottom: 16px;
}
.tutorial-intro strong { display: block; margin-bottom: 5px; }
.tutorial-intro p { margin: 0; color: var(--nf-muted); line-height: 1.55; }
.tutorial-steps-detailed { gap: 12px; }
.tutorial-steps-detailed article {
display: grid;
grid-template-columns: 38px 1fr;
gap: 14px;
align-items: flex-start;
background: var(--nf-surface);
}
.tutorial-number {
width: 34px;
height: 34px;
border-radius: 12px;
display: grid;
place-items: center;
font-weight: 950;
color: #fff;
background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent));
}
.tutorial-steps small {
display: block;
margin-top: 8px;
color: var(--nf-muted);
font-size: 12px;
font-weight: 750;
}
.tutorial-actions { justify-content: space-between; }
@media (max-width: 900px) {
.app-shell.sidebar-collapsed .sidebar-head { flex-direction: row; }
.app-shell.sidebar-collapsed .sidebar-toggle { width: 40px; height: 40px; }
.app-shell.sidebar-collapsed .sidebar-nav { display: grid; align-items: stretch; }
.app-shell.sidebar-collapsed .sidebar-nav a .nav-icon { width: 24px; height: 24px; }
.tutorial-card { padding: 20px; }
.tutorial-steps-detailed article { grid-template-columns: 1fr; }
}
/* Sprint 17 - Correção avatar, login premium e refinamento discreto */
:root {
--nf-sidebar-collapsed-width: 96px;
}
/* Login em tela inteira com painel comercial configurável */
.auth-body-v17 {
min-height: 100vh;
padding: 0;
display: block;
background:
radial-gradient(circle at 72% 20%, rgba(0,196,140,.10), transparent 26%),
radial-gradient(circle at 22% 88%, rgba(0,87,217,.10), transparent 30%),
var(--nf-bg);
}
.auth-shell-v17 {
min-height: 100vh;
width: 100%;
max-width: none;
border: 0;
border-radius: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(410px, 500px);
background: transparent;
box-shadow: none;
}
.auth-brand-panel-v17 {
min-height: 100vh;
padding: clamp(34px, 6vw, 88px);
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(135deg, rgba(6,20,43,.94), rgba(0,47,114,.88) 54%, rgba(0,169,120,.78)),
var(--login-promo-image, none);
background-size: cover;
background-position: center;
}
.auth-brand-panel-v17::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
linear-gradient(180deg, rgba(255,255,255,.07) 1px, transparent 1px);
background-size: 64px 64px;
opacity: .17;
mask-image: radial-gradient(circle at 30% 30%, #000 0, transparent 70%);
z-index: -1;
}
.auth-brand-glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 999px;
right: -140px;
top: -130px;
background: rgba(0,196,140,.22);
filter: blur(16px);
z-index: -1;
}
.auth-brand-content { position: relative; z-index: 2; max-width: 720px; }
.auth-pill {
display: inline-flex;
width: fit-content;
border: 1px solid rgba(255,255,255,.20);
background: rgba(255,255,255,.10);
color: #fff;
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
font-weight: 850;
margin-bottom: 22px;
}
.auth-promo-image {
position: absolute;
right: clamp(28px, 7vw, 96px);
bottom: clamp(28px, 7vw, 96px);
width: min(440px, 38vw);
aspect-ratio: 4 / 3;
border-radius: 30px;
background: var(--login-promo-image) center / cover no-repeat;
border: 1px solid rgba(255,255,255,.20);
box-shadow: 0 28px 80px rgba(0,0,0,.26);
}
.auth-promo-card {
position: absolute;
right: clamp(28px, 7vw, 96px);
bottom: clamp(28px, 7vw, 96px);
width: min(340px, 36vw);
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.10);
backdrop-filter: blur(18px);
border-radius: 28px;
padding: 24px;
color: #fff;
box-shadow: 0 28px 80px rgba(0,0,0,.18);
}
.auth-promo-card strong { display: block; font-size: 54px; letter-spacing: -2px; }
.auth-promo-card span { opacity: .82; font-weight: 800; }
.mini-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; align-items: end; height: 54px; }
.mini-bars i { display: block; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, #fff, rgba(255,255,255,.46)); }
.mini-bars i:nth-child(1) { height: 38%; }
.mini-bars i:nth-child(2) { height: 62%; }
.mini-bars i:nth-child(3) { height: 46%; }
.mini-bars i:nth-child(4) { height: 86%; }
.auth-card-v17 {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(28px, 5vw, 64px);
background: color-mix(in srgb, var(--nf-surface) 96%, transparent);
}
.auth-card-brand-mobile { display: none; }
/* Sidebar recolhida mais estável e sem sobreposição */
.app-shell.sidebar-collapsed { grid-template-columns: var(--nf-sidebar-collapsed-width) minmax(0, 1fr); }
.app-shell.sidebar-collapsed .sidebar {
padding: 14px 10px;
align-items: stretch;
}
.app-shell.sidebar-collapsed .sidebar-head {
width: 100%;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: 10px;
padding: 0 0 8px;
position: static;
}
.app-shell.sidebar-collapsed .sidebar-toggle {
position: static !important;
width: 50px;
height: 40px;
border-radius: 15px;
margin: 0 auto;
background: var(--nf-surface-soft);
}
.app-shell.sidebar-collapsed .sidebar-toggle .nf-icon { width: 22px; height: 22px; }
.app-shell.sidebar-collapsed .brand-img,
.app-shell.sidebar-collapsed .brand-mark.small {
width: 48px;
height: 48px;
border-radius: 16px;
}
.app-shell.sidebar-collapsed .tenant-pill {
width: 58px;
height: 58px;
margin: 0 auto;
padding: 8px;
border-radius: 20px;
}
.app-shell.sidebar-collapsed .tenant-pill > span {
width: 42px;
height: 42px;
border-radius: 16px;
font-size: 13px;
}
.app-shell.sidebar-collapsed .sidebar-nav {
width: 100%;
align-items: center;
gap: 8px;
padding: 4px 0 10px;
margin: 0;
}
.app-shell.sidebar-collapsed .sidebar-nav a {
width: 58px;
height: 58px;
min-height: 58px;
border-radius: 20px;
padding: 0;
justify-content: center;
}
.app-shell.sidebar-collapsed .sidebar-nav a .nav-icon {
width: 34px;
height: 34px;
flex-basis: 34px;
}
.app-shell.sidebar-collapsed .sidebar-nav a .nav-icon .nf-icon {
width: 26px;
height: 26px;
stroke-width: 2.15;
}
.app-shell.sidebar-collapsed .sidebar-nav a.is-active::before {
width: 20px;
height: 3px;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
}
/* Um pouco mais de vida, mantendo premium */
.card,
.metric-card,
.dashboard-hero,
.module-hero,
.account-card,
.taxonomy-card,
.goal-tile,
.notification-card {
box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 10px 30px rgba(15, 23, 42, .035) !important;
}
.card::before,
.metric-card::before,
.account-card::before,
.dashboard-hero::before,
.module-hero::before {
opacity: .52;
}
.btn-primary { box-shadow: 0 12px 22px rgba(0,87,217,.11) !important; }
.page-kicker { color: color-mix(in srgb, var(--nf-primary) 88%, var(--nf-accent)); }
.topbar { border-bottom-color: color-mix(in srgb, var(--nf-primary) 8%, var(--nf-border)); }
/* Painel administrativo - personalização do login */
.login-promo-preview {
display: grid;
gap: 10px;
border: 1px solid var(--nf-border);
background: var(--nf-surface-soft);
border-radius: 16px;
padding: 12px;
}
.login-promo-preview img {
width: 100%;
max-height: 220px;
object-fit: cover;
border-radius: 12px;
}
.login-logo-editor { display: grid; gap: 10px; }
.login-logo-preview {
display: grid;
grid-template-columns: minmax(110px, 170px) minmax(0, 1fr);
align-items: center;
gap: 14px;
border: 1px solid var(--nf-border);
background: var(--nf-surface-soft);
border-radius: 16px;
padding: 14px;
}
.login-logo-preview img {
display: block;
width: 100%;
max-height: 150px;
object-fit: contain;
padding: 8px;
background: #fff;
border: 1px solid rgba(148,163,184,.22);
border-radius: 14px;
}
.login-logo-preview strong,
.login-logo-preview small { display: block; }
.login-logo-preview .checkbox-inline { grid-column: 1 / -1; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--nf-muted); font-size: 13px; }
.checkbox-inline input { width: auto; }
.mini-login-preview {
border: 1px solid var(--nf-border);
border-radius: 22px;
overflow: hidden;
background: var(--nf-surface-soft);
display: grid;
grid-template-columns: 1.1fr .9fr;
min-height: 360px;
}
.mini-login-panel {
padding: 26px;
color: #fff;
background: radial-gradient(circle at 20% 20%, rgba(0,196,140,.34), transparent 34%), linear-gradient(135deg, #06142b, #0057d9 62%, #00a978);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.mini-login-panel img { width: 150px; }
.mini-login-brand { display:flex; align-items:center; gap:10px; margin-bottom:auto; }
.mini-login-brand>span { width:58px; height:58px; overflow:hidden; display:grid; place-items:center; border-radius:17px; background:transparent; box-shadow:0 10px 26px rgba(0,0,0,.18); }
.mini-login-brand b { font-size:20px; letter-spacing:-.05em; color:#fff; }
.mini-login-brand b em { color:#18d6ae; font-style:normal; }
.mini-login-panel .mini-login-logo {
width: 118%;
height: 118%;
max-width: none;
max-height: none;
object-fit: cover;
padding: 0;
background: transparent;
border-radius: 18px;
box-shadow: none;
}
.mini-login-panel strong { font-size: 25px; line-height: 1.05; letter-spacing: -.7px; }
.mini-login-panel span { opacity: .86; margin-top: 8px; }
.mini-login-form { padding: 26px; display: grid; gap: 14px; align-content: center; background: var(--nf-surface); }
.mini-login-form span { height: 42px; border-radius: 12px; background: var(--nf-surface-soft); border: 1px solid var(--nf-border); }
.mini-login-form button { height: 42px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); }
@media (max-width: 1000px) {
.auth-shell-v17 { grid-template-columns: 1fr; }
.auth-brand-panel-v17 { min-height: auto; padding: 32px; }
.auth-card-v17 { min-height: auto; }
.auth-promo-image,
.auth-promo-card { display: none; }
.auth-card-brand-mobile { display: grid; gap: 6px; margin-bottom: 24px; }
.auth-card-brand-mobile img { width: 180px; }
.auth-card-brand-mobile span { color: var(--nf-muted); font-weight: 750; }
.mini-login-preview { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.login-logo-preview { grid-template-columns: 1fr; }
.login-logo-preview img { width: min(220px, 100%); }
.login-logo-preview .checkbox-inline { grid-column: auto; }
}
/* Sprint 18 - mídia resiliente */
.brand-mark-inline {
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-grid;
place-items: center;
background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent));
color: #fff;
font-weight: 950;
letter-spacing: -0.6px;
box-shadow: 0 12px 26px rgba(0, 87, 217, .16);
flex: 0 0 auto;
}
.app-shell.sidebar-collapsed .brand-mark-inline {
width: 44px;
height: 44px;
}
.profile-preview img,
.user-chip img,
.login-promo-preview img {
object-fit: cover;
background: linear-gradient(135deg, rgba(0,87,217,.08), rgba(0,196,140,.08));
}
.media-note {
font-size: 12px;
color: var(--nf-muted);
}
/* Sprint 19 - parcelamento, recorrência e refinamentos suaves */
.smart-launch-box {
border: 1px solid var(--nf-border);
background: linear-gradient(135deg, rgba(0, 87, 217, .035), rgba(0, 196, 140, .045)), var(--nf-surface);
border-radius: 22px;
padding: 18px;
}
.smart-launch-header,
.smart-launch-options {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.smart-launch-options {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.toggle-card {
min-height: auto !important;
display: flex !important;
align-items: flex-start;
gap: 12px !important;
padding: 14px;
border: 1px solid var(--nf-border);
border-radius: 16px;
background: rgba(255,255,255,.62);
cursor: pointer;
}
[data-theme="dark"] .toggle-card { background: rgba(255,255,255,.035); }
.toggle-card input { width: 18px !important; height: 18px !important; margin-top: 3px; accent-color: var(--nf-primary); }
.toggle-card strong { display: block; color: var(--nf-text); }
.toggle-card small { display: block; color: var(--nf-muted); line-height: 1.45; margin-top: 4px; }
.automation-panel {
margin-top: 14px;
padding: 16px;
border-radius: 16px;
border: 1px dashed rgba(0, 87, 217, .28);
background: rgba(0, 87, 217, .035);
}
.compact-grid { gap: 14px; }
.inline-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.badge-soft { background: rgba(0, 87, 217, .08); color: var(--nf-primary); border-color: rgba(0, 87, 217, .16); }
.auth-brand-panel-v17.has-promo-image::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 78% 18%, rgba(0,196,140,.20), transparent 24%), linear-gradient(90deg, rgba(4,12,26,.32), rgba(4,12,26,.08));
z-index: -1;
}
@media (max-width: 760px) {
.smart-launch-options { grid-template-columns: 1fr; }
}
.mini-preview-mark {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
font-weight: 900;
color: #fff;
background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent));
box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
/* Sprint 20 - Planos e limites */
.plans-hero{position:relative;overflow:hidden}
.plans-hero:after{content:"";position:absolute;right:28px;bottom:-44px;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(0,196,140,.14),transparent 65%);pointer-events:none}
.plan-current-card strong{font-size:38px!important;letter-spacing:-1px}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plan-card{display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.plan-card.is-highlighted:before,.plan-card.is-current:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--nf-primary),var(--nf-accent));opacity:.9}
.plan-card-head h2{font-size:28px;letter-spacing:-.8px;margin:0 0 8px}
.feature-list{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.feature-list li{display:flex;align-items:flex-start;gap:10px;color:var(--nf-text);font-weight:700;font-size:14px}
.feature-list .nf-icon{width:18px;height:18px;color:var(--nf-success);flex:0 0 18px;margin-top:1px}
.plan-limit-table{display:grid;border:1px solid var(--nf-border);border-radius:18px;overflow:hidden;background:rgba(248,250,252,.62)}
.plan-limit-table div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--nf-border);font-size:13px}
.plan-limit-table div:last-child{border-bottom:0}
.plan-limit-table span{color:var(--nf-muted);font-weight:750;text-transform:capitalize}
.plan-limit-table strong{font-size:13px;color:var(--nf-text);text-align:right}
html[data-theme="dark"] .plan-limit-table{background:rgba(15,23,42,.42)}
@media(max-width:1180px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.plan-grid{grid-template-columns:1fr}.plan-usage-grid{grid-template-columns:1fr 1fr}}
/* Sprint 22 - Ajustes finais: cadastro, teste grátis e contratação */
.auth-card-v17 {
overflow-y: auto;
}
.auth-card-v17 .form-stack label > span {
color: var(--nf-text);
font-weight: 800;
font-size: 13px;
}
.auth-card-v17 .form-stack input,
.auth-card-v17 .form-stack select,
.auth-card-v17 .form-stack textarea {
width: 100%;
min-height: 48px;
border: 1px solid var(--nf-border);
border-radius: 14px;
padding: 0 15px;
background: var(--nf-surface);
color: var(--nf-text);
outline: none;
font: inherit;
}
.auth-card-v17 .form-stack select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--nf-muted) 50%),
linear-gradient(135deg, var(--nf-muted) 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 12px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 42px;
}
.auth-card-v17 .checkbox-line {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--nf-border);
border-radius: 14px;
background: var(--nf-surface-soft);
}
.auth-card-v17 .checkbox-line input[type="checkbox"] {
width: 19px;
height: 19px;
min-height: 19px;
flex: 0 0 19px;
margin: 2px 0 0;
accent-color: var(--nf-primary);
padding: 0;
border-radius: 5px;
}
.auth-card-v17 .checkbox-line span {
margin: 0;
line-height: 1.45;
color: var(--nf-text);
font-weight: 750;
}
.auth-card-v17 .compact-grid {
gap: 12px;
}
@media (max-width: 1100px) {
.auth-shell-v17 { grid-template-columns: 1fr; }
.auth-brand-panel-v17 { display: none; }
.auth-card-v17 { min-height: 100vh; }
}
.trial-banner {
margin-top: 18px;
border: 1px solid color-mix(in srgb, var(--nf-primary) 18%, var(--nf-border));
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--nf-primary) 10%, transparent), transparent 36%),
linear-gradient(135deg, color-mix(in srgb, var(--nf-primary) 7%, var(--nf-surface)), var(--nf-surface));
border-radius: 22px;
padding: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.trial-banner h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.4px; }
.trial-banner p { margin: 0; }
.trial-banner-action { min-width: 260px; display: grid; gap: 10px; }
.trial-progress { height: 9px; border-radius: 999px; background: var(--nf-surface-soft); overflow: hidden; border: 1px solid var(--nf-border); }
.trial-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); }
.trial-banner.is-expired { border-color: color-mix(in srgb, var(--nf-danger) 28%, var(--nf-border)); }
.trial-banner.is-expired .trial-progress span { background: var(--nf-danger); }
.plan-price {
margin: 16px 0;
padding: 14px;
border-radius: 16px;
background: var(--nf-surface-soft);
border: 1px solid var(--nf-border);
}
.plan-price strong { display: block; font-size: 32px; letter-spacing: -1px; color: var(--nf-text); }
.plan-price span { display: block; color: var(--nf-muted); font-weight: 800; margin-top: 2px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, .65fr); gap: 16px; }
.checkout-card-primary { position: relative; overflow: hidden; }
.checkout-card-primary::after {
content: '';
position: absolute;
width: 220px;
height: 220px;
border-radius: 999px;
right: -110px;
top: -110px;
background: color-mix(in srgb, var(--nf-accent) 14%, transparent);
pointer-events: none;
}
.checkout-price { max-width: 360px; }
.checkout-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.timeline-mini { display: grid; gap: 12px; }
.timeline-mini div { padding: 12px; border: 1px solid var(--nf-border); border-radius: 14px; background: var(--nf-surface-soft); }
.timeline-mini strong { display: block; margin-bottom: 4px; }
.timeline-mini p { margin: 0; color: var(--nf-muted); line-height: 1.5; }
.notice-soft { border: 1px solid color-mix(in srgb, var(--nf-accent) 18%, var(--nf-border)); background: color-mix(in srgb, var(--nf-accent) 7%, var(--nf-surface)); border-radius: 14px; padding: 12px; }
.notice-soft p { margin: 4px 0 0; color: var(--nf-muted); }
@media (max-width: 900px) {
.trial-banner { display: grid; }
.trial-banner-action { min-width: 0; }
.checkout-grid { grid-template-columns: 1fr; }
}
/* Sprint 24 — Launch visual refresh, comunicados e políticas */
:root {
--nf-gradient-brand: linear-gradient(135deg, var(--nf-primary) 0%, #0075ff 42%, var(--nf-accent) 100%);
--nf-aqua-soft: rgba(0, 196, 140, .10);
--nf-blue-soft: rgba(0, 87, 217, .10);
}
body {
background:
radial-gradient(circle at 8% 4%, rgba(0,87,217,.075), transparent 28%),
radial-gradient(circle at 96% 12%, rgba(0,196,140,.085), transparent 26%),
var(--nf-bg);
}
.dashboard-hero,
.module-hero,
.card,
.metric-card {
border-color: color-mix(in srgb, var(--nf-border) 78%, #fff);
box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
}
.dashboard-hero {
position: relative;
background:
linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,251,255,.92)),
radial-gradient(circle at 85% 82%, rgba(0,196,140,.13), transparent 30%),
radial-gradient(circle at 12% 12%, rgba(0,87,217,.10), transparent 32%);
}
.dashboard-hero::before {
content: '';
position: absolute;
width: 320px;
height: 320px;
right: -120px;
bottom: -160px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(0,87,217,.14), rgba(0,196,140,.18));
pointer-events: none;
}
.isf-card {
min-width: 230px;
overflow: hidden;
text-align: left;
color: #fff;
border: 1px solid rgba(255,255,255,.34);
background: linear-gradient(135deg, rgba(0,87,217,.96), rgba(0,196,140,.82));
box-shadow: 0 20px 54px rgba(0, 87, 217, .22);
}
.isf-card::before,
.isf-card::after {
content: '';
position: absolute;
bottom: 16px;
width: 54px;
height: 28px;
border-radius: 80px 80px 0 0;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.38));
}
.isf-card::before { left: 24px; }
.isf-card::after { left: 92px; width: 74px; height: 42px; }
.isf-card span,
.isf-card small {
color: rgba(255,255,255,.90);
}
.isf-card strong {
color: #fff;
margin-bottom: 32px;
}
.metric-card {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
}
.metric-card::after {
content: '';
position: absolute;
right: -34px;
top: -34px;
width: 88px;
height: 88px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent, var(--nf-primary)) 14%, transparent);
}
.btn-primary {
background: var(--nf-gradient-brand);
box-shadow: 0 16px 34px rgba(0,87,217,.18);
}
.auth-brand-panel-v17 {
background:
radial-gradient(circle at 18% 12%, rgba(255,255,255,.18), transparent 26%),
linear-gradient(135deg, rgba(5, 18, 40, .96), rgba(0,87,217,.86) 54%, rgba(0,196,140,.78)),
var(--login-promo-image, none);
background-size: cover;
background-position: center;
}
.auth-promo-card { display: none !important; }
.auth-visual-orbit {
position: absolute;
right: clamp(28px, 7vw, 96px);
bottom: clamp(28px, 7vw, 86px);
width: min(360px, 35vw);
height: 220px;
opacity: .92;
}
.auth-visual-orbit::before {
content: '';
position: absolute;
inset: 24px 0 0 0;
border-radius: 40px;
border: 1px solid rgba(255,255,255,.22);
background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
backdrop-filter: blur(12px);
}
.auth-visual-orbit::after {
content: '';
position: absolute;
right: 28px;
bottom: 42px;
width: 170px;
height: 86px;
background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,.88) 36%, rgba(255,255,255,.88) 44%, transparent 45%),
linear-gradient(135deg, transparent 55%, rgba(255,255,255,.62) 56%, rgba(255,255,255,.62) 64%, transparent 65%);
clip-path: polygon(0 72%, 25% 54%, 46% 62%, 70% 28%, 100% 12%, 100% 32%, 72% 48%, 48% 82%, 24% 72%, 0 92%);
}
.auth-visual-orbit span {
position: absolute;
left: 30px;
bottom: 42px;
width: 52px;
height: 28px;
border-radius: 70px 70px 0 0;
background: linear-gradient(180deg, #fff, rgba(255,255,255,.45));
}
.auth-visual-orbit span:nth-child(2) { left: 92px; width: 76px; height: 48px; }
.auth-visual-orbit span:nth-child(3) { left: 178px; width: 58px; height: 34px; }
.auth-card-v17 .checkbox-line a {
color: var(--nf-primary);
font-weight: 900;
text-decoration: none;
}
.center-modal[hidden] { display: none; }
.center-modal {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: 20px;
}
.center-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15,23,42,.50);
backdrop-filter: blur(6px);
}
.center-modal-card {
position: relative;
z-index: 1;
width: min(560px, 100%);
border: 1px solid rgba(255,255,255,.28);
border-radius: 28px;
background: var(--nf-surface);
box-shadow: 0 30px 90px rgba(15,23,42,.28);
padding: 26px;
}
.center-modal-head {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
margin-bottom: 16px;
}
.center-modal-head h2 { margin: 0; font-size: 26px; letter-spacing: -.7px; }
.center-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.broadcast-message {
padding: 16px;
border: 1px solid var(--nf-border);
border-radius: 18px;
background: linear-gradient(135deg, var(--nf-blue-soft), var(--nf-aqua-soft));
line-height: 1.65;
color: var(--nf-text);
}
.broadcast-read-form { margin-top: 18px; }
.broadcast-read-form button:disabled { opacity: .55; cursor: not-allowed; }
.master-broadcast-card textarea { min-height: 150px; }
.policy-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.legal-card { max-width: 980px; margin-left: auto; margin-right: auto; line-height: 1.72; }
.legal-card h2 { margin-top: 26px; }
.legal-card p { color: var(--nf-muted); }
@media (max-width: 900px) {
.auth-visual-orbit { display: none; }
.center-modal-card { padding: 22px; border-radius: 22px; }
.center-modal-actions { justify-content: stretch; }
.center-modal-actions .btn { width: 100%; }
}
/* Sprint 25 - Premium visual, dark theme and legal UX */
html[data-theme="dark"] {
--nf-bg: #06101d;
--nf-bg-gradient:
radial-gradient(circle at 18% 8%, rgba(0, 196, 140, .12), transparent 28%),
radial-gradient(circle at 82% 12%, rgba(0, 87, 217, .16), transparent 34%),
#06101d;
--nf-sidebar-bg: #071424;
--nf-surface: #0b1728;
--nf-surface-soft: #101f35;
--nf-text: #eef6ff;
--nf-muted: #9eb1ca;
--nf-border: rgba(148, 163, 184, .18);
--nf-primary-soft: rgba(0, 117, 255, .20);
--nf-accent-soft: rgba(0, 196, 140, .18);
--nf-shadow: 0 24px 70px rgba(0,0,0,.32);
--nf-shadow-soft: 0 12px 36px rgba(0,0,0,.22);
}
body {
background:
radial-gradient(circle at 12% 8%, rgba(0,196,140,.08), transparent 26%),
radial-gradient(circle at 88% 0%, rgba(0,87,217,.10), transparent 28%),
var(--nf-bg-gradient);
}
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .module-hero,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .empty-state {
background: linear-gradient(180deg, rgba(14, 29, 49, .96), rgba(9, 20, 36, .98));
border-color: rgba(148,163,184,.18);
color: var(--nf-text);
}
html[data-theme="dark"] .dashboard-hero h1,
html[data-theme="dark"] .module-hero h1,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .hero-copy h1 {
color: #f8fbff;
}
html[data-theme="dark"] .muted,
html[data-theme="dark"] .metric-card small,
html[data-theme="dark"] .isf-card small,
html[data-theme="dark"] .isf-card span {
color: #a8bad2;
}
.dashboard-hero,
.module-hero {
background:
radial-gradient(circle at 10% 16%, rgba(0, 196, 140, .10), transparent 24%),
radial-gradient(circle at 92% 8%, rgba(0, 87, 217, .10), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
border-color: rgba(148, 163, 184, .22);
box-shadow: 0 18px 52px rgba(15, 23, 42, .06);
}
.dashboard-hero::after,
.module-hero::after {
width: 360px;
height: 360px;
right: auto;
left: -88px;
top: -118px;
background: radial-gradient(circle, rgba(0,196,140,.13), transparent 67%);
opacity: 1;
}
html[data-theme="dark"] .dashboard-hero::after,
html[data-theme="dark"] .module-hero::after {
background: radial-gradient(circle, rgba(0,196,140,.18), transparent 68%);
}
.isf-card {
min-width: 250px;
border: 1px solid rgba(255,255,255,.14);
background:
linear-gradient(135deg, rgba(0, 87, 217, .98), rgba(0, 196, 140, .92));
color: #fff;
box-shadow: 0 22px 45px rgba(0, 87, 217, .18);
overflow: hidden;
}
.isf-card::before {
content: '';
position: absolute;
inset: auto 18px 18px auto;
width: 110px;
height: 58px;
background:
radial-gradient(ellipse at bottom, rgba(255,255,255,.86) 0 52%, transparent 53%),
radial-gradient(ellipse at bottom, rgba(255,255,255,.58) 0 52%, transparent 53%);
background-size: 62px 48px, 46px 34px;
background-position: 0 10px, 66px 22px;
background-repeat: no-repeat;
opacity: .78;
}
.isf-card span,
.isf-card small,
.isf-card strong { color: #fff !important; position: relative; z-index: 1; }
.isf-card strong { font-size: 48px; }
.metric-card {
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
border-color: rgba(148, 163, 184, .22);
}
.metric-card::after {
background: linear-gradient(135deg, rgba(0,87,217,.10), rgba(0,196,140,.10));
opacity: .8;
}
html[data-theme="dark"] .metric-card::after {
background: linear-gradient(135deg, rgba(0,87,217,.16), rgba(0,196,140,.12));
}
.auth-promo-card,
.auth-visual-orbit {
display: none !important;
}
.auth-brand-panel-v17 {
background:
linear-gradient(135deg, rgba(0, 21, 51, .84), rgba(0, 87, 217, .58) 45%, rgba(0, 196, 140, .58)),
var(--login-promo-image, none) center/cover no-repeat,
linear-gradient(135deg, #06142b, #00a67f);
}
.auth-brand-panel-v17::after {
content: '';
position: absolute;
right: -120px;
bottom: -120px;
width: 420px;
height: 420px;
border-radius: 999px;
background: rgba(255,255,255,.12);
filter: blur(2px);
z-index: -1;
}
.legal-center-shell {
max-width: 980px;
margin: 0 auto;
padding: 12px 0 0;
text-align: center;
}
.legal-center-shell h1 {
margin: 0 0 8px;
font-size: clamp(30px, 5vw, 48px);
letter-spacing: -1.4px;
}
.legal-card-center {
max-width: 940px;
max-height: min(72vh, 760px);
overflow-y: auto;
padding: clamp(22px, 4vw, 42px);
text-align: left;
border-radius: 28px;
box-shadow: 0 28px 80px rgba(15,23,42,.12);
}
html[data-theme="dark"] .legal-card-center {
box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.legal-card-center::-webkit-scrollbar { width: 8px; }
.legal-card-center::-webkit-scrollbar-thumb {
background: rgba(100,116,139,.35);
border-radius: 999px;
}
.form-stack input,
.form-stack select,
.form-stack textarea {
border-color: var(--nf-border);
}
html[data-theme="dark"] .form-stack input,
html[data-theme="dark"] .form-stack select,
html[data-theme="dark"] .form-stack textarea {
background: #0e1c30;
color: var(--nf-text);
border-color: rgba(148,163,184,.22);
}
html[data-theme="dark"] .checkbox-line,
html[data-theme="dark"] .auth-card-v17 .checkbox-line {
background: rgba(255,255,255,.04);
border-color: rgba(148,163,184,.22);
}
.badge-admin,
.admin-pill small {
color: var(--nf-muted);
}
@media (max-width: 900px) {
.isf-card { min-width: 100%; text-align: left; }
.legal-card-center { max-height: none; }
}
.legal-body-public {
min-height: 100vh;
margin: 0;
font-family: var(--nf-font);
color: var(--nf-text);
background:
radial-gradient(circle at 12% 10%, rgba(0,196,140,.10), transparent 28%),
radial-gradient(circle at 88% 0%, rgba(0,87,217,.12), transparent 32%),
var(--nf-bg);
}
.legal-page-public {
min-height: 100vh;
display: grid;
place-items: start center;
padding: clamp(24px, 5vw, 56px);
}
.legal-page-public .legal-center-shell,
.legal-page-public .legal-card-center {
width: min(980px, 100%);
}
/* Sprint 26 — Layout financeiro estilo card premium + responsividade real */
:root {
--nf-card: var(--nf-surface);
--nf-shadow-sm: 0 10px 28px rgba(15, 23, 42, .06);
--nf-glass: rgba(255, 255, 255, .78);
--nf-money-blue: #075bd8;
--nf-money-aqua: #18c8a4;
--nf-money-green: #12b981;
--nf-money-red: #ef4444;
--nf-money-yellow: #f59e0b;
}
html[data-theme="dark"] {
--nf-card: var(--nf-surface);
--nf-glass: rgba(11, 23, 40, .78);
--nf-money-blue: #4f9bff;
--nf-money-aqua: #26dec0;
--nf-money-green: #22c55e;
--nf-money-red: #fb7185;
--nf-money-yellow: #fbbf24;
}
html, body { max-width: 100%; overflow-x: hidden; }
.app-main, .content, .card, .metric-card, .module-hero, .dashboard-hero { min-width: 0; }
.content { width: 100%; }
.nf-finance-overview { display: grid; gap: 18px; margin-bottom: 18px; }
.nf-balance-card {
min-height: 218px;
position: relative;
overflow: hidden;
border-radius: 28px;
padding: clamp(24px, 4vw, 36px);
color: #fff;
background:
radial-gradient(circle at 9% 8%, rgba(255,255,255,.18), transparent 30%),
linear-gradient(125deg, #0847b7 0%, #0571ce 38%, #10b8a8 72%, #1bc892 100%);
box-shadow: 0 24px 58px rgba(6, 92, 183, .24);
isolation: isolate;
}
.nf-balance-card::before {
content: '';
position: absolute;
inset: -80px -70px auto auto;
width: 260px;
height: 260px;
border-radius: 999px;
background: rgba(255,255,255,.13);
filter: blur(2px);
z-index: -1;
}
.nf-balance-card::after {
content: '';
position: absolute;
left: -90px;
bottom: -140px;
width: 320px;
height: 320px;
border-radius: 999px;
background: rgba(0,0,0,.08);
z-index: -1;
}
.nf-balance-content { position: relative; z-index: 2; display: grid; gap: 8px; max-width: 58%; }
.nf-overline,
.nf-balance-subtitle { font-size: 14px; font-weight: 850; color: rgba(255,255,255,.82); }
.nf-balance-content strong {
font-size: clamp(36px, 6vw, 58px);
line-height: .98;
letter-spacing: -2px;
color: #fff;
}
.nf-balance-content b { font-size: clamp(20px, 3vw, 28px); color: #fff; letter-spacing: -.7px; }
.nf-balance-chart {
position: absolute;
right: -8px;
bottom: 20px;
width: min(46%, 420px);
height: 58%;
opacity: .92;
}
.nf-chart-line,
.nf-chart-shadow {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.nf-chart-line { stroke: rgba(255,255,255,.72); stroke-width: 5; }
.nf-chart-shadow { stroke: rgba(0,0,0,.12); stroke-width: 10; transform: translateY(4px); }
.nf-summary-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nf-summary-tile,
.metric-card,
.card,
.account-card,
.taxonomy-card,
.goal-tile,
.notification-card,
.plan-card,
.module-tile {
border: 1px solid rgba(148, 163, 184, .18) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--nf-surface) 96%, white 4%), var(--nf-surface)) !important;
box-shadow: 0 16px 42px rgba(15, 23, 42, .06) !important;
}
html[data-theme="dark"] .nf-summary-tile,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .taxonomy-card,
html[data-theme="dark"] .goal-tile,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .module-tile {
background: linear-gradient(180deg, rgba(16, 31, 53, .98), rgba(11, 23, 40, .98)) !important;
border-color: rgba(148, 163, 184, .16) !important;
box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
}
.nf-summary-tile { min-height: 150px; padding: 22px; border-radius: 22px; display: grid; align-content: start; gap: 9px; }
.nf-summary-tile::after { display: none; }
.nf-summary-tile > span:not(.metric-icon) { color: var(--nf-muted); font-size: 15px; font-weight: 850; }
.nf-summary-tile strong { margin: 0; font-size: clamp(24px, 3vw, 34px); color: var(--nf-text); }
.nf-summary-tile small { font-size: 14px; font-weight: 850; color: var(--nf-primary); }
.metric-icon {
width: 38px;
height: 38px;
border-radius: 999px;
display: grid !important;
place-items: center;
margin-bottom: 4px;
background: var(--tile-soft, var(--nf-primary-soft));
color: var(--tile-color, var(--nf-primary));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.metric-icon .nf-icon { width: 20px; height: 20px; }
.tile-income { --tile-color: var(--nf-money-green); --tile-soft: color-mix(in srgb, var(--nf-money-green) 15%, transparent); }
.tile-expense { --tile-color: var(--nf-money-red); --tile-soft: color-mix(in srgb, var(--nf-money-red) 15%, transparent); }
.tile-card { --tile-color: var(--nf-money-blue); --tile-soft: color-mix(in srgb, var(--nf-money-blue) 13%, transparent); }
.tile-result-positive { --tile-color: var(--nf-money-green); --tile-soft: color-mix(in srgb, var(--nf-money-green) 15%, transparent); }
.tile-result-negative { --tile-color: var(--nf-money-yellow); --tile-soft: color-mix(in srgb, var(--nf-money-yellow) 18%, transparent); }
.quick-actions-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 16px;
align-items: center;
margin: 0 0 20px;
padding: 18px;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 24px;
background: color-mix(in srgb, var(--nf-surface) 82%, transparent);
box-shadow: 0 12px 32px rgba(15, 23, 42, .04);
backdrop-filter: blur(14px);
}
.quick-actions-strip h1 { margin: 0 0 4px; font-size: clamp(24px, 4vw, 34px); letter-spacing: -1px; }
.quick-actions-strip p { margin-bottom: 0; }
.isf-pill {
display: grid;
gap: 2px;
min-width: 158px;
padding: 12px 14px;
border-radius: 18px;
background: linear-gradient(135deg, var(--nf-primary-soft), var(--nf-accent-soft));
border: 1px solid rgba(148, 163, 184, .16);
}
.isf-pill span,
.isf-pill small { color: var(--nf-muted); font-size: 12px; font-weight: 850; }
.isf-pill strong { font-size: 24px; line-height: 1; color: var(--nf-text); }
.quick-actions-buttons { justify-content: flex-end; margin-top: 0; }
.sidebar {
background:
radial-gradient(circle at 10% 5%, rgba(0,196,140,.08), transparent 28%),
color-mix(in srgb, var(--nf-sidebar-bg, var(--nf-surface)) 96%, transparent) !important;
box-shadow: 10px 0 38px rgba(15, 23, 42, .04);
}
.sidebar-nav a { font-weight: 850; gap: 10px; border: 1px solid transparent; }
.sidebar-nav a:hover { background: var(--nf-surface-soft); color: var(--nf-text); }
.sidebar-nav a.is-active {
background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)) !important;
color: #fff !important;
box-shadow: 0 12px 26px rgba(0, 87, 217, .18);
}
.sidebar-nav a.is-active .nav-icon { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.sidebar-nav a .nav-icon {
display: grid;
place-items: center;
border-radius: 12px;
background: var(--nav-soft, var(--nf-surface-soft));
color: var(--nav-color, var(--nf-primary));
transition: .18s ease;
}
.sidebar-nav a[href="/receitas"] { --nav-color: var(--nf-money-green); --nav-soft: color-mix(in srgb, var(--nf-money-green) 14%, transparent); }
.sidebar-nav a[href="/despesas"] { --nav-color: var(--nf-money-red); --nav-soft: color-mix(in srgb, var(--nf-money-red) 14%, transparent); }
.sidebar-nav a[href="/cartoes"] { --nav-color: var(--nf-money-blue); --nav-soft: color-mix(in srgb, var(--nf-money-blue) 13%, transparent); }
.sidebar-nav a[href="/metas"] { --nav-color: var(--nf-violet); --nav-soft: var(--nf-violet-soft); }
.sidebar-nav a[href="/patrimonio"] { --nav-color: var(--nf-money-yellow); --nav-soft: color-mix(in srgb, var(--nf-money-yellow) 16%, transparent); }
.sidebar-nav a[href="/notificacoes"] { --nav-color: var(--nf-danger); --nav-soft: var(--nf-danger-soft); }
.nav-count,
.topbar-icon-link span {
min-width: 19px;
height: 19px;
display: inline-grid;
place-items: center;
padding: 0 5px;
border-radius: 999px;
background: var(--nf-danger);
color: #fff;
font-size: 11px;
font-weight: 950;
}
.topbar {
position: sticky;
top: 0;
z-index: 12;
background: color-mix(in srgb, var(--nf-bg) 80%, transparent) !important;
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.icon-btn,
.topbar-icon-link,
.user-chip {
background: var(--nf-surface) !important;
border-color: rgba(148, 163, 184, .20) !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}
.btn { border-radius: 14px; }
.btn-primary { background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)) !important; }
.btn-outline { background: var(--nf-surface) !important; }
.card-header { align-items: flex-start; }
.list-row,
.empty-mini,
.equation-stack > div,
.goal-contribution,
.feature-card,
.tutorial-steps article {
background: color-mix(in srgb, var(--nf-surface-soft) 82%, transparent) !important;
border: 1px solid rgba(148, 163, 184, .14);
}
.account-icon,
.taxonomy-icon,
.goal-symbol,
.empty-icon {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
input, select, textarea {
border-radius: 16px;
box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
@media (min-width: 1181px) {
.content { padding: 28px; }
.dashboard-grid { gap: 18px; }
}
@media (max-width: 1180px) {
.nf-summary-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-actions-strip { grid-template-columns: 1fr; }
.quick-actions-buttons { justify-content: flex-start; }
}
@media (max-width: 900px) {
.app-shell { display: block; }
.topbar { min-width: 0; padding: 0 12px; }
.topbar-left > div span { display: none; }
.topbar-actions { gap: 6px; min-width: 0; }
.topbar-actions form { display: none; }
.content { padding: 14px 12px 88px; }
.nf-balance-card { min-height: 210px; border-radius: 24px; }
.nf-balance-content { max-width: 76%; }
.nf-balance-chart { width: 58%; right: -38px; bottom: 12px; opacity: .68; }
.quick-actions-strip { padding: 14px; border-radius: 20px; }
.hero-actions.quick-actions-buttons .btn { flex: 1 1 150px; }
.sidebar { width: min(330px, 86vw); }
.support-fab { right: 14px; bottom: 14px; }
}
@media (max-width: 760px) {
.nf-summary-tiles { grid-template-columns: 1fr; gap: 12px; }
.nf-summary-tile { min-height: 132px; padding: 18px; }
.nf-balance-card { padding: 22px; }
.nf-balance-content strong { font-size: clamp(32px, 11vw, 44px); }
.nf-balance-content b { font-size: clamp(18px, 6vw, 24px); }
.card,
.metric-card,
.account-card,
.taxonomy-card,
.goal-tile,
.notification-card { border-radius: 20px !important; }
.card { padding: 18px; }
.card-header { display: grid; grid-template-columns: 1fr; gap: 10px; }
.card-header .btn { width: 100%; }
.table-wrap { overflow: visible; }
table.responsive-table,
table.responsive-table thead,
table.responsive-table tbody,
table.responsive-table tr,
table.responsive-table th,
table.responsive-table td { display: block; width: 100%; }
table.responsive-table thead { display: none; }
table.responsive-table tr {
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 18px;
padding: 10px;
margin-bottom: 12px;
background: var(--nf-surface);
box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
table.responsive-table td {
border-bottom: 0;
padding: 9px 4px;
display: grid;
grid-template-columns: minmax(94px, 38%) minmax(0, 1fr);
gap: 10px;
align-items: center;
word-break: break-word;
}
table.responsive-table td::before {
content: attr(data-label);
color: var(--nf-muted);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .06em;
}
table.responsive-table td.actions-cell { display: flex; flex-direction: column; align-items: stretch; }
table.responsive-table td.actions-cell::before { display: block; margin-bottom: 6px; }
table.responsive-table .btn,
table.responsive-table form,
table.responsive-table button { width: 100%; }
}
@media (max-width: 480px) {
.nf-balance-card { min-height: 196px; }
.nf-balance-content { max-width: 88%; }
.nf-balance-chart { width: 72%; height: 45%; right: -54px; bottom: 8px; }
.nf-overline, .nf-balance-subtitle { font-size: 13px; }
.quick-actions-buttons { flex-direction: column; align-items: stretch; }
.topbar-left strong { max-width: 140px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions .icon-btn[data-tutorial-open],
.topbar-actions .topbar-icon-link[title="Suporte"] { display: none; }
.bar-chart { height: 190px; gap: 6px; }
.bar-pair span { width: 10px; }
}
/* Sprint 26.1 — ajustes da tela de configurações */
.settings-hero-premium {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
overflow: hidden;
isolation: isolate;
min-height: 218px;
border-radius: 28px;
padding: clamp(24px, 4vw, 36px);
color: #fff;
background:
radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 28%),
linear-gradient(125deg, #0847b7 0%, #0571ce 36%, #10b8a8 72%, #1bc892 100%);
box-shadow: 0 24px 58px rgba(6, 92, 183, .22);
}
.settings-hero-premium::before {
content: '';
position: absolute;
inset: -80px -70px auto auto;
width: 270px;
height: 270px;
border-radius: 999px;
background: rgba(255,255,255,.13);
z-index: -1;
}
.settings-hero-premium::after {
content: '';
position: absolute;
left: -110px;
bottom: -145px;
width: 340px;
height: 340px;
border-radius: 999px;
background: rgba(0,0,0,.08);
z-index: -1;
}
.settings-hero-content { position: relative; z-index: 2; max-width: 780px; }
.settings-hero-content .page-kicker { color: rgba(255,255,255,.82); }
.settings-hero-content h1 {
margin: 0 0 10px;
color: #fff;
font-size: clamp(34px, 5vw, 56px);
line-height: .98;
letter-spacing: -1.8px;
}
.settings-hero-content p:not(.page-kicker) {
max-width: 680px;
margin: 0;
color: rgba(255,255,255,.84);
font-weight: 650;
line-height: 1.58;
}
.settings-hero-side { position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-end; }
.settings-hero-button,
.settings-hero-button:hover {
background: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.32) !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.10) !important;
backdrop-filter: blur(10px);
}
.settings-hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.settings-hero-pills span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 999px;
color: #fff;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.22);
font-size: 13px;
font-weight: 900;
backdrop-filter: blur(10px);
}
.settings-hero-pills .nf-icon { width: 16px; height: 16px; }
.settings-hero-chart {
position: absolute;
right: 18px;
bottom: 18px;
width: min(38%, 360px);
height: 48%;
opacity: .84;
pointer-events: none;
z-index: 1;
}
.settings-grid { gap: 18px; }
.settings-card-header { align-items: center; }
.settings-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.settings-card-title h2 { margin: 0; }
.settings-card-title .page-kicker { margin-bottom: 4px; }
.settings-card-icon {
width: 42px;
height: 42px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 16px;
color: var(--settings-icon-color, var(--nf-primary));
background: var(--settings-icon-soft, var(--nf-primary-soft));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}
.settings-card-icon .nf-icon { width: 21px; height: 21px; }
.settings-card-icon-blue { --settings-icon-color: var(--nf-money-blue); --settings-icon-soft: color-mix(in srgb, var(--nf-money-blue) 13%, transparent); }
.settings-card-icon-green { --settings-icon-color: var(--nf-money-green); --settings-icon-soft: color-mix(in srgb, var(--nf-money-green) 15%, transparent); }
.settings-card-icon-red { --settings-icon-color: var(--nf-money-red); --settings-icon-soft: color-mix(in srgb, var(--nf-money-red) 14%, transparent); }
.settings-card-icon-yellow { --settings-icon-color: var(--nf-money-yellow); --settings-icon-soft: color-mix(in srgb, var(--nf-money-yellow) 18%, transparent); }
.settings-card-icon-violet { --settings-icon-color: var(--nf-violet); --settings-icon-soft: var(--nf-violet-soft); }
.settings-grid .card,
.legal-settings-card,
.danger-zone {
overflow: hidden;
}
.settings-grid .form-stack label > span,
.danger-form label > span { font-weight: 850; }
.settings-grid input,
.settings-grid select,
.danger-form input {
min-height: 46px;
}
.settings-grid hr {
border: 0;
border-top: 1px solid rgba(148, 163, 184, .18);
width: 100%;
margin: 8px 0 0;
}
.profile-upload {
border-radius: 22px !important;
background: linear-gradient(135deg, color-mix(in srgb, var(--nf-primary-soft) 50%, transparent), color-mix(in srgb, var(--nf-accent-soft) 45%, transparent)) !important;
}
.profile-preview {
border-radius: 20px !important;
box-shadow: 0 12px 28px rgba(0, 87, 217, .18);
}
.legal-settings-card .policy-actions .btn { min-width: 190px; }
@media (max-width: 900px) {
.settings-hero-premium { grid-template-columns: 1fr; min-height: 210px; border-radius: 24px; }
.settings-hero-side { justify-content: flex-start; }
.settings-hero-chart { width: 58%; right: -40px; bottom: 12px; opacity: .44; }
.settings-hero-content { max-width: 100%; }
}
@media (max-width: 760px) {
.settings-hero-premium { padding: 22px; }
.settings-hero-content h1 { font-size: clamp(32px, 11vw, 44px); }
.settings-card-header { display: grid; grid-template-columns: 1fr; justify-items: stretch; }
.settings-card-header .badge { justify-self: flex-start; }
.profile-upload { align-items: flex-start; }
.legal-settings-card .policy-actions .btn { width: 100%; }
}
@media (max-width: 480px) {
.settings-hero-pills { flex-direction: column; align-items: stretch; }
.settings-hero-pills span { justify-content: center; }
.settings-hero-button { width: 100%; }
.settings-hero-chart { width: 72%; right: -56px; }
.profile-upload { display: grid; grid-template-columns: 1fr; }
}
/* Sprint 26.3 — dashboard no topo, mobile compacto e login responsivo */
.quick-actions-strip {
margin-top: 0;
margin-bottom: 18px;
}
.nf-finance-overview {
margin-top: 0;
}
@media (max-width: 900px) {
.quick-actions-strip {
gap: 12px;
}
.isf-pill {
width: 100%;
min-width: 0;
grid-template-columns: 1fr auto;
align-items: center;
}
.isf-pill small {
grid-column: 1 / -1;
}
.quick-actions-buttons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
.hero-actions.quick-actions-buttons .btn,
.quick-actions-buttons .btn {
width: 100%;
min-height: 42px;
flex: initial;
padding: 9px 8px;
font-size: 13px;
line-height: 1.1;
white-space: nowrap;
}
}
@media (max-width: 760px) {
.nf-finance-overview {
gap: 12px;
}
.nf-summary-tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.nf-summary-tile {
min-height: 112px;
padding: 11px 8px;
border-radius: 17px !important;
gap: 5px;
}
.nf-summary-tile:nth-child(4) {
grid-column: 1 / -1;
min-height: 98px;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
}
.nf-summary-tile:nth-child(4) .metric-icon {
margin: 0;
}
.nf-summary-tile:nth-child(4) strong {
justify-self: end;
font-size: clamp(20px, 5vw, 28px);
}
.nf-summary-tile:nth-child(4) small {
grid-column: 2 / -1;
margin-top: -4px;
}
.metric-icon {
width: 31px;
height: 31px;
border-radius: 12px;
margin-bottom: 0;
}
.metric-icon .nf-icon {
width: 17px;
height: 17px;
}
.nf-summary-tile > span:not(.metric-icon) {
font-size: 12px;
line-height: 1.1;
}
.nf-summary-tile strong {
font-size: clamp(14px, 3.5vw, 20px);
line-height: 1.05;
letter-spacing: -.55px;
white-space: nowrap;
}
.nf-summary-tile small {
font-size: 10.5px;
line-height: 1.15;
}
.nf-balance-card {
min-height: 190px;
}
.quick-actions-strip h1 {
font-size: clamp(26px, 7vw, 34px);
}
.quick-actions-strip .muted {
font-size: 14px;
line-height: 1.45;
}
.dashboard-grid {
gap: 12px;
}
}
@media (max-width: 480px) {
.content {
padding-inline: 10px;
}
.quick-actions-strip {
padding: 14px;
}
.quick-actions-buttons {
gap: 7px;
}
.quick-actions-buttons .btn {
min-height: 40px;
padding-inline: 6px;
font-size: 12px;
border-radius: 12px;
}
.nf-summary-tiles {
gap: 7px;
}
.nf-summary-tile {
min-height: 106px;
padding: 10px 6px;
}
.nf-summary-tile strong {
font-size: clamp(13px, 3.35vw, 17px);
}
.nf-summary-tile small {
font-size: 9.5px;
}
.nf-balance-card {
min-height: 182px;
padding: 20px;
}
}
@media (max-width: 370px) {
.quick-actions-buttons .btn {
font-size: 11px;
}
.nf-summary-tile > span:not(.metric-icon) {
font-size: 11px;
}
.nf-summary-tile strong {
font-size: 12px;
}
.nf-summary-tile small {
display: none;
}
}
/* Login: elimina faixa lateral no mobile e melhora legibilidade */
@media (max-width: 1100px) {
body.auth-body-v17 {
display: block !important;
padding: 0 !important;
min-height: 100dvh;
background:
radial-gradient(circle at 86% 8%, rgba(0,196,140,.14), transparent 24%),
radial-gradient(circle at 8% 92%, rgba(0,87,217,.12), transparent 30%),
var(--nf-bg) !important;
}
.auth-shell-v17 {
display: block !important;
width: 100% !important;
min-height: 100dvh;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.auth-brand-panel-v17 {
display: none !important;
}
.auth-card-v17 {
min-height: 100dvh !important;
width: min(520px, 100%) !important;
margin: 0 auto !important;
padding: clamp(28px, 7vw, 48px) clamp(20px, 6vw, 38px) !important;
background: color-mix(in srgb, var(--nf-surface) 96%, transparent) !important;
box-shadow: none !important;
justify-content: center !important;
}
.auth-card-brand-mobile {
display: grid !important;
gap: 8px !important;
margin-bottom: 26px !important;
}
.auth-card-v17 h2 {
color: var(--nf-text) !important;
font-size: clamp(28px, 7vw, 36px) !important;
line-height: 1.05 !important;
}
.auth-card-v17 .muted,
.auth-switch {
color: var(--nf-muted) !important;
}
.auth-card-v17 .form-stack label > span {
color: var(--nf-text) !important;
opacity: .78;
}
.auth-card-v17 .form-stack input,
.auth-card-v17 .form-stack select,
.auth-card-v17 .form-stack textarea {
min-height: 50px !important;
background: var(--nf-surface) !important;
color: var(--nf-text) !important;
border-color: var(--nf-border) !important;
}
.auth-card-v17 .btn {
min-height: 50px !important;
}
}
@media (max-width: 520px) {
.auth-card-v17 {
justify-content: flex-start !important;
padding-top: 34px !important;
}
.auth-card-brand-mobile .nf-inline-mark {
width: 42px !important;
height: 42px !important;
}
.auth-card-brand-mobile .nf-inline-logo strong {
font-size: 22px !important;
}
.auth-card-v17 .form-stack {
gap: 14px !important;
margin-top: 20px !important;
}
}
/* Sprint 26.4 — login desktop premium e saída mobile */
@media (min-width: 1101px) {
body.auth-body-v17 {
min-height: 100vh !important;
display: grid !important;
place-items: center !important;
padding: clamp(22px, 3vw, 42px) !important;
background:
radial-gradient(circle at 12% 18%, rgba(0,196,140,.14), transparent 28%),
radial-gradient(circle at 86% 82%, rgba(0,87,217,.12), transparent 30%),
var(--nf-bg) !important;
}
.auth-shell-v17 {
width: min(1180px, calc(100vw - 48px)) !important;
min-height: min(760px, calc(100vh - 48px)) !important;
display: grid !important;
grid-template-columns: minmax(0, 1.12fr) minmax(400px, 470px) !important;
border: 1px solid rgba(148, 163, 184, .18) !important;
border-radius: 34px !important;
overflow: hidden !important;
background: var(--nf-surface) !important;
box-shadow: 0 30px 90px rgba(15, 23, 42, .13) !important;
}
.auth-brand-panel-v17 {
min-height: auto !important;
padding: clamp(44px, 5vw, 72px) !important;
display: flex !important;
align-items: center !important;
background:
linear-gradient(135deg, rgba(6,20,43,.96), rgba(0,75,162,.90) 54%, rgba(0,196,140,.80)),
var(--login-promo-image, none) center/cover no-repeat !important;
}
.auth-brand-content {
max-width: 660px !important;
}
.auth-brand-panel-v17 h1 {
font-size: clamp(42px, 4.2vw, 62px) !important;
line-height: .98 !important;
letter-spacing: -2px !important;
}
.auth-card-v17 {
min-height: auto !important;
justify-content: center !important;
padding: clamp(38px, 4vw, 58px) !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--nf-surface) 98%, transparent), var(--nf-surface)) !important;
box-shadow: -18px 0 70px rgba(15, 23, 42, .08) !important;
}
.auth-card-v17 > * {
width: 100%;
max-width: 390px;
margin-left: auto;
margin-right: auto;
}
.auth-card-v17 h2 {
color: var(--nf-text) !important;
font-size: clamp(31px, 2.7vw, 40px) !important;
line-height: 1.06 !important;
}
.auth-card-v17 .muted,
.auth-card-v17 .auth-switch {
color: var(--nf-muted) !important;
}
.auth-card-v17 .form-stack label > span {
color: var(--nf-text) !important;
opacity: .72;
}
.auth-card-v17 .form-stack input,
.auth-card-v17 .form-stack select,
.auth-card-v17 .form-stack textarea {
min-height: 52px !important;
background: color-mix(in srgb, var(--nf-surface-soft) 64%, var(--nf-surface)) !important;
border-color: rgba(148, 163, 184, .28) !important;
color: var(--nf-text) !important;
}
.auth-card-v17 .btn {
min-height: 52px !important;
}
}
.sidebar-logout-form {
display: none;
margin-top: 10px;
}
.sidebar-logout-btn {
width: 100%;
min-height: 44px;
border: 1px solid rgba(239, 68, 68, .20);
border-radius: 14px;
background: color-mix(in srgb, var(--nf-danger-soft) 74%, var(--nf-surface));
color: var(--nf-danger);
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
font: inherit;
font-weight: 900;
cursor: pointer;
}
.sidebar-logout-btn .nav-icon {
background: rgba(239, 68, 68, .12) !important;
color: var(--nf-danger) !important;
}
.sidebar-logout-btn .nf-icon,
.topbar-logout-btn .nf-icon {
width: 18px;
height: 18px;
}
.topbar-logout-btn {
gap: 8px;
}
@media (max-width: 900px) {
.sidebar-logout-form {
display: block;
}
.topbar-actions form.topbar-logout-form {
display: block !important;
}
.topbar-logout-form .topbar-logout-btn {
width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border-radius: 12px;
}
.topbar-logout-form .logout-label {
display: none;
}
}
@media (max-width: 560px) {
.topbar-actions .topbar-logout-form .btn-outline {
display: grid !important;
}
}
/* Sprint 26.5 — login desktop volta ao tamanho original e segue tema do sistema */
body.auth-body-v17 .auth-card-v17 h2,
body.auth-body-v17 .auth-card-v17 .form-stack label > span,
body.auth-body-v17 .auth-card-v17 .auth-switch,
body.auth-body-v17 .auth-card-v17 .small-text {
color: var(--nf-text) !important;
}
body.auth-body-v17 .auth-card-v17 .muted {
color: var(--nf-muted) !important;
}
body.auth-body-v17 .auth-card-v17 input,
body.auth-body-v17 .auth-card-v17 select,
body.auth-body-v17 .auth-card-v17 textarea {
background: color-mix(in srgb, var(--nf-surface-soft) 58%, var(--nf-surface)) !important;
color: var(--nf-text) !important;
border-color: var(--nf-border) !important;
}
body.auth-body-v17 .auth-card-v17 input::placeholder,
body.auth-body-v17 .auth-card-v17 textarea::placeholder {
color: color-mix(in srgb, var(--nf-muted) 78%, transparent) !important;
}
@media (min-width: 1101px) {
body.auth-body-v17 {
min-height: 100vh !important;
display: block !important;
place-items: initial !important;
padding: 0 !important;
background:
radial-gradient(circle at 72% 20%, rgba(0,196,140,.10), transparent 26%),
radial-gradient(circle at 22% 88%, rgba(0,87,217,.10), transparent 30%),
var(--nf-bg) !important;
}
.auth-shell-v17 {
width: 100% !important;
min-height: 100vh !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(410px, 500px) !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: none !important;
}
.auth-brand-panel-v17 {
min-height: 100vh !important;
padding: clamp(34px, 6vw, 88px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
background:
linear-gradient(135deg, rgba(6,20,43,.96), rgba(0,47,114,.90) 54%, rgba(0,169,120,.82)),
var(--login-promo-image, none) center/cover no-repeat !important;
}
.auth-brand-content { max-width: 760px !important; }
.auth-brand-panel-v17 h1 {
font-size: clamp(36px, 5vw, 62px) !important;
line-height: .98 !important;
letter-spacing: -2px !important;
}
.auth-card-v17 {
min-height: 100vh !important;
width: auto !important;
justify-content: center !important;
padding: clamp(28px, 5vw, 64px) !important;
background: color-mix(in srgb, var(--nf-surface) 96%, transparent) !important;
box-shadow: -18px 0 80px rgba(15,23,42,.08) !important;
}
.auth-card-v17 > * {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.auth-card-v17 h2 {
font-size: 34px !important;
line-height: 1.12 !important;
letter-spacing: -1px !important;
}
.auth-card-v17 .form-stack input,
.auth-card-v17 .form-stack select,
.auth-card-v17 .form-stack textarea,
.auth-card-v17 .btn {
min-height: 48px !important;
}
}
html[data-theme="dark"] body.auth-body-v17 {
background:
radial-gradient(circle at 72% 20%, rgba(0,196,140,.12), transparent 26%),
radial-gradient(circle at 22% 88%, rgba(0,87,217,.16), transparent 30%),
var(--nf-bg) !important;
}
html[data-theme="dark"] .auth-card-v17 {
box-shadow: -18px 0 80px rgba(0,0,0,.24) !important;
}
/* Sprint 26.6 — cadastro e troca de senha com medidor discreto */
.auth-password-grid {
align-items: start;
}
.password-field {
display: grid;
gap: 7px;
}
.password-field input[type="password"] {
height: 48px;
}
body.auth-body-v17 .auth-card-v17 .auth-password-grid .password-field input[type="password"] {
height: 48px !important;
min-height: 48px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.password-strength-meter {
display: block;
width: 100%;
height: 3px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--nf-border) 70%, transparent);
}
.password-strength-meter i {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: var(--nf-danger);
transition: width .22s ease, background-color .22s ease;
}
.password-strength-meter.is-danger i { width: 33%; background: var(--nf-danger); }
.password-strength-meter.is-warning i { width: 66%; background: var(--nf-warning); }
.password-strength-meter.is-success i { width: 100%; background: var(--nf-success); }
.password-strength-text,
.password-confirm-text {
display: block;
min-height: 18px;
font-size: 12px;
line-height: 1.45;
margin: 0;
font-weight: 750;
}
.password-strength-text.is-danger,
.password-confirm-text.is-danger { color: var(--nf-danger) !important; }
.password-strength-text.is-warning,
.password-confirm-text.is-warning { color: var(--nf-warning) !important; }
.password-strength-text.is-success,
.password-confirm-text.is-success { color: var(--nf-success) !important; }
.settings-grid .password-strength-meter { margin-top: -2px; }
@media (max-width: 760px) {
.auth-password-grid { grid-template-columns: 1fr; }
body.auth-body-v17 .auth-card-v17 .auth-password-grid .password-field input[type="password"] {
height: 50px !important;
min-height: 50px !important;
}
}
/* Sprint 26.7 — pendente: voltar para login encerra sessão */
.pending-logout-form {
margin-top: 18px;
display: flex;
justify-content: center;
}
.pending-logout-form .btn {
appearance: none;
border: 1px solid var(--nf-border);
background: var(--nf-surface);
color: var(--nf-text);
}
@media (max-width: 640px) {
.pending-logout-form .btn {
width: 100%;
}
}
/* Sprint 26.8 - Master financeiro, solicitações e comunicação */
.master-section {
scroll-margin-top: 96px;
}
.master-section-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px;
border: 1px solid var(--border, #dbe4f0);
border-radius: 22px;
background: var(--surface, #fff);
box-shadow: var(--shadow-sm, 0 10px 30px rgba(15,23,42,.06));
}
.master-section-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 14px;
border-radius: 999px;
font-size: .86rem;
font-weight: 800;
color: var(--text, #0f172a);
text-decoration: none;
background: color-mix(in srgb, var(--surface-muted, #f1f5f9) 78%, transparent);
border: 1px solid color-mix(in srgb, var(--border, #dbe4f0) 70%, transparent);
}
.master-section-nav a:hover {
color: var(--primary, #0067d8);
border-color: color-mix(in srgb, var(--primary, #0067d8) 42%, var(--border, #dbe4f0));
}
.section-title-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-bottom: 16px;
}
.section-title-row h2,
.card-header h3 {
margin: 0;
}
.master-whatsapp-card textarea,
.plan-request-form textarea {
min-height: 70px;
}
.whatsapp-action-grid .btn {
min-height: 44px;
white-space: normal;
}
.master-client-hero .hero-actions {
align-items: center;
}
.status-approved,
.status-paid,
.badge.status-approved,
.badge.status-paid {
background: color-mix(in srgb, #16a34a 14%, transparent);
color: #15803d;
border-color: color-mix(in srgb, #16a34a 28%, transparent);
}
.status-rejected,
.badge.status-rejected,
.status-overdue,
.badge.status-overdue {
background: color-mix(in srgb, #ef4444 13%, transparent);
color: #b91c1c;
border-color: color-mix(in srgb, #ef4444 28%, transparent);
}
.status-open,
.badge.status-open,
.status-pending,
.badge.status-pending {
background: color-mix(in srgb, #f59e0b 14%, transparent);
color: #a16207;
border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}
.status-cancelled,
.badge.status-cancelled {
background: color-mix(in srgb, #64748b 14%, transparent);
color: #475569;
border-color: color-mix(in srgb, #64748b 25%, transparent);
}
.btn.btn-ghost {
background: transparent;
border: 1px solid transparent;
color: var(--muted, #64748b);
}
.btn.btn-ghost:hover {
color: var(--primary, #0067d8);
background: color-mix(in srgb, var(--primary, #0067d8) 8%, transparent);
}
.mt-8 { margin-top: 8px; }
@media (max-width: 760px) {
.master-section-nav {
overflow-x: auto;
flex-wrap: nowrap;
padding: 10px;
border-radius: 18px;
}
.master-section-nav a {
flex: 0 0 auto;
min-height: 34px;
padding: 7px 12px;
font-size: .78rem;
}
.section-title-row {
align-items: flex-start;
flex-direction: column;
}
.master-whatsapp-card textarea {
min-height: 92px;
}
.whatsapp-action-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.whatsapp-action-grid .btn {
min-height: 38px;
padding-inline: 10px;
font-size: .78rem;
}
.master-client-hero .hero-actions {
width: 100%;
justify-content: flex-start;
}
}
/* Sprint 26.9 - Master reorganizado e solicitações protegidas */
.master-notifications-card {
overflow: hidden;
}
.master-notification-list {
display: grid;
gap: 10px;
}
.master-notification-item {
display: grid;
grid-template-columns: 12px 1fr;
gap: 12px;
align-items: flex-start;
padding: 14px;
border: 1px solid var(--nf-border);
border-radius: 18px;
background: var(--nf-surface);
color: var(--nf-text);
}
.master-notification-item:hover {
transform: translateY(-1px);
box-shadow: var(--nf-shadow-soft);
}
.master-notification-item.is-unread {
border-color: color-mix(in srgb, var(--nf-primary) 30%, var(--nf-border));
background: color-mix(in srgb, var(--nf-primary) 5%, var(--nf-surface));
}
.master-notification-item strong,
.master-notification-item small {
display: block;
}
.master-notification-item p {
margin: 5px 0 6px;
color: var(--nf-muted);
line-height: 1.45;
}
.notification-dot {
width: 10px;
height: 10px;
border-radius: 999px;
margin-top: 5px;
background: var(--nf-primary);
box-shadow: 0 0 0 4px var(--nf-primary-soft);
}
.notification-dot.priority-high { background: var(--nf-danger); box-shadow: 0 0 0 4px var(--nf-danger-soft); }
.notification-dot.priority-medium { background: var(--nf-warning); box-shadow: 0 0 0 4px var(--nf-warning-soft); }
.notification-dot.priority-low { background: var(--nf-success); box-shadow: 0 0 0 4px var(--nf-success-soft); }
.inline-warning {
display: grid;
gap: 4px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--nf-warning) 22%, var(--nf-border));
background: var(--nf-warning-soft);
color: var(--nf-text);
}
.inline-warning strong { color: var(--nf-warning); }
.inline-warning span { color: var(--nf-muted); }
.sidebar-nav a[href="/master/notificacoes"] { --nav-color: var(--nf-danger); --nav-soft: var(--nf-danger-soft); }
.sidebar-nav a[href="/master/financeiro"] { --nav-color: var(--nf-money-green, var(--nf-success)); --nav-soft: var(--nf-success-soft); }
.sidebar-nav a[href="/master/planos"] { --nav-color: var(--nf-primary); --nav-soft: var(--nf-primary-soft); }
.sidebar-nav a[href="/master/comunicacao"] { --nav-color: var(--nf-accent); --nav-soft: var(--nf-accent-soft); }
.plan-request-form button:disabled,
.plan-request-form button[aria-disabled="true"] {
opacity: .72;
cursor: not-allowed;
transform: none !important;
}
@media (max-width: 760px) {
.master-notification-item {
padding: 12px;
border-radius: 16px;
}
.master-notification-item p {
font-size: 13px;
}
}
/* v0.27.0 - Master separado por páginas */
.master-page-hero {
align-items: center;
}
.master-page-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.master-action-card {
min-height: 210px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.master-metric-link {
color: inherit;
text-decoration: none;
}
.master-metric-link:hover,
.master-action-card:hover {
transform: translateY(-2px);
box-shadow: var(--nf-shadow-soft);
}
.quick-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.quick-link-grid a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 10px;
border-radius: 14px;
text-decoration: none;
font-weight: 800;
color: var(--nf-text);
background: var(--nf-surface-soft);
border: 1px solid var(--nf-border);
}
.quick-link-grid a:hover {
color: var(--nf-primary);
border-color: color-mix(in srgb, var(--nf-primary) 35%, var(--nf-border));
}
.sidebar-nav a[href="/master/operacao"] { --nav-color: var(--nf-warning); --nav-soft: var(--nf-warning-soft); }
.sidebar-nav a[href="/master/login-comercial"] { --nav-color: var(--nf-purple, var(--nf-primary)); --nav-soft: var(--nf-primary-soft); }
@media (max-width: 900px) {
.master-page-grid { grid-template-columns: 1fr; }
.master-page-hero { align-items: flex-start; }
}
@media (max-width: 640px) {
.master-action-card { min-height: auto; gap: 16px; }
.quick-link-grid { grid-template-columns: 1fr; }
}
/* Sprint 27.1 — teste grátis visível e seguro */
.dashboard-status-pills {
display: flex;
gap: 10px;
align-items: stretch;
justify-content: flex-end;
}
.trial-days-pill {
background: linear-gradient(135deg, color-mix(in srgb, var(--nf-warning, #f59e0b) 16%, var(--nf-surface)), color-mix(in srgb, var(--nf-primary) 12%, var(--nf-surface)));
}
.trial-days-pill.is-expired {
background: linear-gradient(135deg, color-mix(in srgb, var(--nf-danger) 16%, var(--nf-surface)), color-mix(in srgb, var(--nf-danger) 8%, var(--nf-surface)));
}
.mb-16 { margin-bottom: 16px; }
@media (max-width: 900px) {
.dashboard-status-pills { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-status-pills .isf-pill { width: 100%; }
}
@media (max-width: 480px) {
.dashboard-status-pills { grid-template-columns: 1fr; }
}
/* Sprint 28 — revisão geral, faturas do cliente e transferências */
.billing-hero,
.transfers-hero {
overflow: hidden;
position: relative;
}
.billing-hero::after,
.transfers-hero::after {
content: "";
position: absolute;
right: -80px;
top: -80px;
width: 240px;
height: 240px;
border-radius: 999px;
background: radial-gradient(circle, color-mix(in srgb, var(--nf-primary) 14%, transparent), transparent 66%);
pointer-events: none;
}
.billing-request-list {
display: grid;
gap: 12px;
}
.billing-request-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
}
.billing-request-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.mini-card {
border: 1px solid var(--nf-border);
border-radius: 18px;
background: var(--nf-surface-soft);
box-shadow: var(--nf-shadow-minimal, 0 8px 24px rgba(15, 23, 42, .04));
}
.master-section-nav,
.card,
.metric-card,
.hero-card,
.module-hero {
scroll-margin-top: 24px;
}
.table-wrap table tbody tr:hover {
background: color-mix(in srgb, var(--nf-primary) 3%, transparent);
}
.actions-cell form,
.billing-request-actions form {
display: inline-flex;
}
.status-sent { background: color-mix(in srgb, var(--nf-primary) 12%, var(--nf-surface)); color: var(--nf-primary); }
.status-completed { background: color-mix(in srgb, var(--nf-success) 14%, var(--nf-surface)); color: var(--nf-success); }
.sidebar-nav a[href="/transferencias"] { --nav-color: var(--nf-info, var(--nf-primary)); --nav-soft: var(--nf-primary-soft); }
.sidebar-nav a[href="/perfil/assinatura"] { --nav-color: var(--nf-success); --nav-soft: var(--nf-success-soft); }
@media (max-width: 760px) {
.billing-request-card {
align-items: flex-start;
flex-direction: column;
}
.billing-request-actions {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.billing-request-actions .btn,
.billing-request-actions form { width: 100%; }
.billing-request-actions .btn { justify-content: center; }
.hero-actions {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
.billing-request-actions,
.hero-actions { grid-template-columns: 1fr; }
.module-hero h1,
.hero-card h1 { font-size: clamp(1.7rem, 10vw, 2.4rem); }
}
/* Sprint 28.1 — tipografia mais leve e controles de pagamento */
body {
font-weight: 430;
letter-spacing: -0.01em;
}
h1, h2, h3, .module-hero h1, .card-header h2, .card-header h3 {
font-weight: 760;
letter-spacing: -0.035em;
}
strong, b {
font-weight: 720;
}
.page-kicker, .badge, .btn, .sidebar-nav a, .tenant-pill small {
font-weight: 720;
}
.metric-card strong, .amount, .brand-word, .sidebar-logo {
font-weight: 780;
}
.form-inline-wrap {
display: flex;
gap: 12px;
align-items: end;
flex-wrap: wrap;
}
.form-inline-wrap .flex-1 {
flex: 1 1 320px;
}
.payment-wa-form {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
min-width: min(420px, 100%);
}
.payment-wa-form .input-sm {
width: min(260px, 100%);
min-height: 38px;
padding: 8px 11px;
border-radius: 12px;
border: 1px solid var(--nf-border);
background: var(--nf-surface);
color: var(--nf-text);
font: inherit;
font-size: 13px;
}
.payment-config-card input {
min-height: 46px;
}
.status-scheduled {
background: rgba(124, 58, 237, .12);
color: #7c3aed;
}
html[data-theme="dark"] .status-scheduled {
background: rgba(167, 139, 250, .16);
color: #c4b5fd;
}
@media (max-width: 720px) {
.form-inline-wrap, .payment-wa-form {
align-items: stretch;
}
.payment-wa-form .input-sm,
.payment-wa-form .btn,
.form-inline-wrap .btn {
width: 100%;
}
}
/* v0.29.0 — suíte financeira, planejamento e segurança */
:root {
--nf-suite-radius: 20px;
--nf-suite-gap: 16px;
}
/* Base visual refinada */
body {
font-weight: 400;
line-height: 1.55;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, strong, b, .btn, .badge, .sidebar-nav a {
font-variation-settings: "wght" 650;
}
h1, h2, h3, h4 { line-height: 1.14; }
input, select, textarea, button { letter-spacing: -0.005em; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .58; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-small { padding: 7px 10px; min-height: 34px; font-size: 12px; border-radius: 10px; }
.text-success { color: var(--nf-success) !important; }
.text-danger { color: var(--nf-danger) !important; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.table-row-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.table-row-actions form { display: inline-flex; }
/* Cabeçalhos dos novos módulos */
.suite-hero { min-height: 176px; }
.suite-hero > div:first-child { max-width: 780px; position: relative; z-index: 1; }
.suite-hero .hero-actions { position: relative; z-index: 1; justify-content: flex-end; }
.suite-toolbar-card { padding: 16px 18px; }
.suite-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.suite-toolbar > label { flex: 1 1 220px; }
.suite-copy-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.suite-copy-form label { min-width: 190px; }
.suite-metrics .metric-card { min-height: 132px; }
.compact-metrics .metric-card { min-height: 108px; padding: 16px; }
.compact-metrics .metric-card strong { font-size: 25px; }
/* Orçamento */
.budget-list { display: grid; gap: 12px; }
.budget-row {
display: grid;
grid-template-columns: minmax(190px, .9fr) minmax(260px, 1.5fr) minmax(220px, .8fr);
gap: 18px;
align-items: center;
padding: 16px;
border: 1px solid var(--nf-border);
border-radius: var(--nf-suite-radius);
background: var(--nf-surface-soft);
}
.budget-category { display: flex; gap: 12px; align-items: center; min-width: 0; }
.budget-category-icon {
width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto;
display: grid; place-items: center; font-weight: 800;
background: color-mix(in srgb, var(--category-color, var(--nf-primary)) 14%, var(--nf-surface));
color: var(--category-color, var(--nf-primary));
}
.budget-category strong, .budget-category small { display: block; }
.budget-category small { color: var(--nf-muted); margin-top: 2px; }
.budget-progress-wrap { min-width: 0; }
.budget-progress { height: 9px; overflow: hidden; border-radius: 999px; background: var(--nf-border); }
.budget-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); transition: width .25s ease; }
.budget-row.is-warning .budget-progress span { background: linear-gradient(90deg, #f59e0b, #f97316); }
.budget-row.is-exceeded .budget-progress span { background: linear-gradient(90deg, #ef4444, #f43f5e); }
.budget-remaining { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--nf-muted); }
.budget-edit-form { display: grid; grid-template-columns: minmax(110px, 1fr) 92px auto; gap: 8px; align-items: end; }
.budget-edit-form input { min-height: 42px; }
/* Previsão */
.forecast-chart-card { overflow: hidden; }
.forecast-chart {
display: flex; align-items: end; gap: 4px; min-height: 260px;
padding: 34px 4px 12px; overflow-x: auto; border-bottom: 1px solid var(--nf-border);
}
.forecast-bar { min-width: 9px; flex: 1 0 9px; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, var(--nf-accent), var(--nf-primary)); opacity: .84; position: relative; }
.forecast-bar.negative { background: linear-gradient(180deg, #fb7185, var(--nf-danger)); }
.forecast-bar:hover { opacity: 1; filter: saturate(1.1); }
.milestone-list { display: grid; gap: 10px; }
.milestone-item { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 14px; background: var(--nf-surface-soft); border: 1px solid var(--nf-border); border-radius: 15px; }
.milestone-item span { color: var(--nf-muted); }
.timeline-list { display: grid; gap: 10px; }
.timeline-day { display: grid; grid-template-columns: 104px 1fr auto; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--nf-border); border-radius: 16px; background: var(--nf-surface-soft); }
.timeline-date strong, .timeline-date small { display: block; }
.timeline-date small { color: var(--nf-muted); }
.timeline-events { display: grid; gap: 6px; }
.timeline-event { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.timeline-balance { font-weight: 720; white-space: nowrap; }
/* Recorrências */
.recurring-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.recurring-card { border: 1px solid var(--nf-border); background: var(--nf-surface-soft); border-radius: var(--nf-suite-radius); padding: 18px; display: grid; gap: 14px; }
.recurring-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.recurring-card-head > div:first-child { display: flex; gap: 11px; align-items: center; min-width: 0; }
.recurring-type-icon { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: var(--nf-primary-soft); color: var(--nf-primary); }
.recurring-card.is-expense .recurring-type-icon { background: var(--nf-danger-soft); color: var(--nf-danger); }
.recurring-amount { font-size: 20px; font-weight: 720; white-space: nowrap; }
.recurring-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--nf-muted); font-size: 12px; }
.recurring-meta span { padding: 5px 8px; border-radius: 999px; background: var(--nf-surface); border: 1px solid var(--nf-border); }
.recurring-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Automações */
.automation-list { display: grid; gap: 12px; }
.automation-rule { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface-soft); }
.automation-rule.is-paused { opacity: .68; }
.automation-rule-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.automation-rule-main strong, .automation-rule-main small { display: block; }
.automation-rule-main small { color: var(--nf-muted); margin-top: 4px; }
.automation-rule-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.automation-rule-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.automation-rule-actions form { display: inline-flex; }
.automation-help { display: grid; gap: 10px; }
.automation-help p, .feature-check-list p { margin: 0; padding: 12px 13px; border-radius: 14px; background: var(--nf-surface-soft); border: 1px solid var(--nf-border); }
.feature-check-list { display: grid; gap: 9px; }
.feature-check-list p span { color: var(--nf-success); font-weight: 800; margin-right: 8px; }
/* Importação */
.upload-dropzone { margin-top: 12px; }
.file-drop { display: grid; place-items: center; text-align: center; gap: 6px; min-height: 210px; padding: 24px; border: 1.5px dashed color-mix(in srgb, var(--nf-primary) 35%, var(--nf-border)); border-radius: 22px; background: color-mix(in srgb, var(--nf-primary) 4%, var(--nf-surface)); cursor: pointer; transition: .18s ease; }
.file-drop:hover, .file-drop.is-dragging { border-color: var(--nf-primary); background: var(--nf-primary-soft); transform: translateY(-1px); }
.file-drop-icon { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--nf-primary-soft); color: var(--nf-primary); }
.file-drop strong { font-size: 17px; }
.file-drop small { color: var(--nf-muted); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop-file { color: var(--nf-primary); font-size: 12px; font-weight: 700; }
.import-preview-card { overflow: hidden; }
.import-confirm-form { padding-top: 18px; border-top: 1px solid var(--nf-border); }
.import-status-ready { background: var(--nf-success-soft); color: var(--nf-success); }
.import-status-duplicate { background: var(--nf-warning-soft); color: var(--nf-warning); }
.import-status-error { background: var(--nf-danger-soft); color: var(--nf-danger); }
.import-status-imported { background: var(--nf-primary-soft); color: var(--nf-primary); }
.status-preview, .status-processing { background: var(--nf-primary-soft); color: var(--nf-primary); }
.status-failed { background: var(--nf-danger-soft); color: var(--nf-danger); }
/* Conciliação */
.account-reconcile-list { display: grid; gap: 10px; }
.account-reconcile-list .account-reconcile-card { border: 1px solid var(--nf-border); border-radius: 17px; padding: 15px; background: var(--nf-surface-soft); }
/* Dívidas */
.loan-list { display: grid; gap: 10px; }
.loan-card { display: grid; gap: 10px; padding: 15px; color: var(--nf-text); border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface-soft); transition: .17s ease; }
.loan-card:hover, .loan-card.is-selected { border-color: color-mix(in srgb, var(--nf-primary) 45%, var(--nf-border)); transform: translateY(-1px); box-shadow: var(--nf-shadow-soft); }
.loan-card strong, .loan-card small { display: block; }
.loan-card small { color: var(--nf-muted); margin-top: 3px; }
.loan-progress { height: 7px; border-radius: 999px; background: var(--nf-border); overflow: hidden; }
.loan-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); }
.loan-card-footer { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--nf-muted); }
.loan-card-footer b { color: var(--nf-text); }
.loan-simulation { padding: 13px 14px; border: 1px solid var(--nf-border); border-radius: 15px; background: var(--nf-surface-soft); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.loan-simulation span, .loan-simulation small { color: var(--nf-muted); }
.loan-simulation small { grid-column: 1 / -1; }
.loan-simulation strong { font-size: 20px; }
/* Fechamento */
.closing-complete { display: grid; justify-items: start; gap: 10px; }
.closing-check { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: var(--nf-success); background: var(--nf-success-soft); }
.closing-complete h3, .closing-complete p { margin: 0; }
.closing-complete blockquote { margin: 4px 0; padding: 13px 15px; border-left: 3px solid var(--nf-primary); background: var(--nf-surface-soft); border-radius: 0 14px 14px 0; }
.closing-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.closing-actions form { display: inline-flex; }
/* Personalização, busca e filtros */
.widget-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.widget-choice { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface-soft); cursor: pointer; }
.widget-choice > input { width: 18px; height: 18px; flex: 0 0 auto; }
.widget-choice-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--nf-primary-soft); color: var(--nf-primary); }
.global-search-form { display: flex; gap: 10px; align-items: center; }
.global-search-form input { min-height: 50px; }
.search-result-list { display: grid; gap: 10px; }
.search-result-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--nf-border); border-radius: 17px; color: var(--nf-text); background: var(--nf-surface-soft); transition: .17s ease; }
.search-result-card:hover { border-color: color-mix(in srgb, var(--nf-primary) 40%, var(--nf-border)); transform: translateY(-1px); }
.search-result-icon { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--nf-primary); background: var(--nf-primary-soft); }
.search-result-value strong, .search-result-value small { display: block; }
.search-result-value small { color: var(--nf-muted); margin-top: 3px; }
.search-arrow { color: var(--nf-muted); }
.saved-filter-card { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--nf-border); background: var(--nf-surface-soft); color: var(--nf-text); border-radius: 999px; padding: 7px 10px; font-size: 12px; }
.bulk-action-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select-column { width: 46px; text-align: center; }
.select-column input { width: 17px; height: 17px; }
.list-header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Equipe */
.team-member-list { display: grid; gap: 10px; }
.team-member { display: grid; grid-template-columns: auto 1fr minmax(260px, auto); align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface-soft); }
.team-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); font-weight: 750; }
.team-member-info strong, .team-member-info small { display: block; }
.team-member-info small { color: var(--nf-muted); margin-top: 2px; }
.team-member-form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.team-member-form label { min-width: 112px; }
.permission-guide { display: grid; gap: 10px; }
.permission-guide article { padding: 13px; border: 1px solid var(--nf-border); border-radius: 15px; background: var(--nf-surface-soft); }
.permission-guide strong, .permission-guide small { display: block; }
.permission-guide small { color: var(--nf-muted); margin-top: 3px; }
/* Documentos */
.storage-indicator { display: grid; gap: 8px; min-width: min(320px, 100%); }
.storage-indicator .progress { height: 8px; }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.document-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface-soft); }
.document-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.document-card strong, .document-card small { display: block; overflow-wrap: anywhere; }
.document-card small { color: var(--nf-muted); margin-top: 3px; }
.document-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.document-actions form { display: inline-flex; }
/* Segurança */
.security-status { display: flex; gap: 13px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--nf-border); background: var(--nf-surface-soft); }
.security-status > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--nf-warning); background: var(--nf-warning-soft); }
.security-status.is-secure > span { color: var(--nf-success); background: var(--nf-success-soft); }
.security-status strong, .security-status small { display: block; }
.security-status small { color: var(--nf-muted); margin-top: 3px; }
.two-factor-setup { display: grid; gap: 14px; }
.secret-key-box, .uri-code { padding: 12px 13px; border-radius: 14px; background: var(--nf-surface-soft); border: 1px solid var(--nf-border); overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.backup-code-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.backup-code-grid code { text-align: center; padding: 10px; border: 1px solid var(--nf-border); }
.session-list { display: grid; gap: 10px; }
.session-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface-soft); }
.session-card.is-current { border-color: color-mix(in srgb, var(--nf-success) 45%, var(--nf-border)); }
.session-device-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.session-card strong, .session-card small { display: block; }
.session-card small { color: var(--nf-muted); margin-top: 3px; }
.security-enabled-state { display: grid; gap: 12px; }
/* Recursos por plano */
.feature-matrix-wrap { overflow-x: auto; border: 1px solid var(--nf-border); border-radius: 18px; }
.feature-matrix-table { min-width: 760px; }
.feature-matrix-table th:not(:first-child), .feature-matrix-table td:not(:first-child) { width: 112px; text-align: center; }
.feature-matrix-table td:first-child { min-width: 280px; }
.feature-matrix-table td:first-child strong, .feature-matrix-table td:first-child small { display: block; }
.feature-matrix-table td:first-child small { margin-top: 3px; }
.feature-group-row td { background: var(--nf-surface-soft); color: var(--nf-primary); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.matrix-check { display: inline-grid; place-items: center; cursor: pointer; }
.matrix-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.matrix-check span { width: 38px; height: 22px; border-radius: 999px; background: var(--nf-border); position: relative; transition: .18s ease; }
.matrix-check span::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.22); transition: .18s ease; }
.matrix-check input:checked + span { background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); }
.matrix-check input:checked + span::after { transform: translateX(16px); }
.feature-fixed { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 720; color: var(--nf-success); background: var(--nf-success-soft); }
.plan-price-editor { display: grid; gap: 11px; }
.plan-price-editor label { margin: 0; }
/* Indicadores e avisos */
.notice { padding: 14px 15px; border-radius: 16px; border: 1px solid var(--nf-border); background: var(--nf-surface-soft); }
.notice strong, .notice p { display: block; margin: 0; }
.notice p { color: var(--nf-muted); margin-top: 4px; }
.notice-success { background: var(--nf-success-soft); border-color: color-mix(in srgb, var(--nf-success) 25%, var(--nf-border)); }
.notice-warning { background: var(--nf-warning-soft); border-color: color-mix(in srgb, var(--nf-warning) 25%, var(--nf-border)); }
@media (max-width: 1180px) {
.widget-choice-grid, .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.budget-row { grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.25fr); }
.budget-edit-form { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.suite-hero { min-height: auto; }
.suite-hero .hero-actions { justify-content: flex-start; width: 100%; }
.recurring-grid { grid-template-columns: 1fr; }
.budget-row { grid-template-columns: 1fr; gap: 13px; }
.budget-edit-form { grid-column: auto; }
.team-member { grid-template-columns: auto 1fr; }
.team-member-form { grid-column: 1 / -1; justify-content: stretch; }
.team-member-form label { flex: 1 1 120px; }
.timeline-day { grid-template-columns: 92px 1fr; }
.timeline-balance { grid-column: 2; }
.widget-choice-grid, .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.span-2 { grid-column: auto; }
.suite-toolbar, .suite-copy-form, .global-search-form, .form-actions { align-items: stretch; flex-direction: column; }
.suite-toolbar > label, .suite-copy-form label { min-width: 0; width: 100%; }
.suite-toolbar .btn, .suite-copy-form .btn, .global-search-form .btn { width: 100%; }
.suite-metrics.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.suite-metrics .metric-card { min-height: 112px; padding: 15px; }
.suite-metrics .metric-card strong { font-size: clamp(20px, 7vw, 26px); }
.budget-edit-form { grid-template-columns: 1fr 92px; }
.budget-edit-form .btn { grid-column: 1 / -1; width: 100%; }
.recurring-options { grid-template-columns: 1fr; }
.automation-rule { grid-template-columns: auto 1fr; align-items: start; }
.automation-rule-actions { grid-column: 1 / -1; justify-content: stretch; }
.automation-rule-actions form, .automation-rule-actions .btn { flex: 1 1 120px; }
.widget-choice-grid, .document-grid { grid-template-columns: 1fr; }
.team-member { grid-template-columns: auto 1fr; }
.team-member-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-member-form .btn { grid-column: 1 / -1; width: 100%; }
.backup-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.session-card { grid-template-columns: auto 1fr; }
.session-card form { grid-column: 1 / -1; }
.session-card form .btn { width: 100%; }
.loan-card-footer { flex-direction: column; gap: 3px; }
.loan-simulation { grid-template-columns: 1fr; }
.loan-simulation small { grid-column: auto; }
.closing-actions { display: grid; width: 100%; }
.closing-actions form, .closing-actions .btn { width: 100%; }
.timeline-day { grid-template-columns: 1fr; }
.timeline-balance { grid-column: auto; }
.table-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table-row-actions a, .table-row-actions form, .table-row-actions button { width: 100%; }
.feature-matrix-wrap { margin-inline: -4px; }
}
@media (max-width: 420px) {
.suite-metrics.grid-4 { grid-template-columns: 1fr 1fr; }
.suite-metrics .metric-card { min-width: 0; }
.budget-edit-form { grid-template-columns: 1fr; }
.budget-edit-form .btn { grid-column: auto; }
.team-member-form { grid-template-columns: 1fr; }
.team-member-form .btn { grid-column: auto; }
}
/* Personalização avançada do dashboard */
.dashboard-order-list { display: grid; gap: 9px; }
.dashboard-order-item { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--nf-border); border-radius: 16px; background: var(--nf-surface-soft); cursor: grab; transition: .16s ease; }
.dashboard-order-item:active { cursor: grabbing; }
.dashboard-order-item.is-dragging { opacity: .58; transform: scale(.99); border-color: var(--nf-primary); }
.drag-handle { color: var(--nf-muted); font-weight: 800; letter-spacing: -3px; }
.dashboard-order-buttons { display: inline-flex; gap: 5px; }
.dashboard-preferences-form > .form-actions { position: sticky; bottom: 12px; z-index: 4; padding: 12px; border: 1px solid var(--nf-border); border-radius: 18px; background: color-mix(in srgb, var(--nf-surface) 92%, transparent); backdrop-filter: blur(14px); box-shadow: var(--nf-shadow); }
.dashboard-order-layout { display: flex; flex-direction: column; }
.dashboard-order-layout > [data-dashboard-group] { order: var(--dashboard-order, 50); }
@media (max-width: 640px) { .dashboard-order-item { grid-template-columns: auto auto 1fr; } .dashboard-order-buttons { grid-column: 1 / -1; justify-content: flex-end; } }
.onboarding-checklist { margin-top: 24px; }
.onboarding-step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.onboarding-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 12px 13px; border: 1px solid var(--nf-border); border-radius: 15px; color: var(--nf-text); background: var(--nf-surface-soft); text-decoration: none; }
.onboarding-step > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--nf-primary); background: var(--nf-primary-soft); font-weight: 800; }
.onboarding-step small { color: var(--nf-muted); }
.onboarding-step.is-done { opacity: .78; }
.onboarding-step.is-done > span { color: var(--nf-success); background: var(--nf-success-soft); }
@media (max-width: 760px) { .onboarding-step-list { grid-template-columns: 1fr; } }
.demo-mode-banner { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 24px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--nf-primary) 30%, var(--nf-border)); border-radius: 20px; background: linear-gradient(135deg, var(--nf-primary-soft), var(--nf-surface)); }
.demo-mode-banner h2, .demo-mode-banner p { margin: 0; }
.demo-mode-banner form { flex: 0 0 auto; }
.center-actions form { display: inline-flex; }
@media (max-width: 640px) { .demo-mode-banner { align-items: stretch; flex-direction: column; } .demo-mode-banner form, .demo-mode-banner .btn { width: 100%; } .center-actions form, .center-actions form .btn { width: 100%; } }
/* v0.29.0 — limites configuráveis dos planos */
.plan-capacity-table .plan-limit-input{
width:88px;
min-height:40px;
padding:7px 9px;
border:1px solid var(--nf-border);
border-radius:10px;
background:var(--nf-surface);
color:var(--nf-text);
text-align:center;
font:inherit;
font-weight:750;
}
.plan-capacity-table .plan-limit-input:focus{
outline:none;
border-color:var(--nf-primary);
box-shadow:0 0 0 3px color-mix(in srgb,var(--nf-primary) 14%,transparent);
}
@media(max-width:720px){
.plan-capacity-table .plan-limit-input{width:76px;min-height:38px;font-size:13px}
}
/* v0.29.0 — insights discretos em recorrências */
.recurring-insights {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
}
.recurring-insights .badge {
font-size: 10px;
letter-spacing: .01em;
}
/* v0.29.1 — estabilidade, clareza e experiência unificada */
:root {
--nf-control-height: 46px;
--nf-content-radius: 20px;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body {
font-weight: 400;
letter-spacing: -.008em;
}
h1 { font-weight: 690; letter-spacing: -.032em; }
h2 { font-weight: 660; letter-spacing: -.024em; }
h3, h4 { font-weight: 630; letter-spacing: -.016em; }
strong, b { font-weight: 650; }
label > span, .form-label { font-weight: 610; }
.btn, .badge, .status-badge { font-weight: 620; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
min-height: var(--nf-control-height);
border-radius: 13px;
font-weight: 430;
}
textarea { min-height: 108px; }
.card { border-radius: var(--nf-content-radius); }
.card-header h2 { margin-bottom: 3px; }
.table-wrap thead th { font-weight: 650; letter-spacing: .015em; }
.page-kicker { font-weight: 700; letter-spacing: .085em; }
.muted { line-height: 1.62; }
/* Guia completo */
.help-layout {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
gap: 22px;
align-items: start;
}
.help-sidebar {
position: sticky;
top: 88px;
display: grid;
gap: 8px;
padding: 16px;
border: 1px solid var(--nf-border);
border-radius: var(--nf-content-radius);
background: var(--nf-surface);
box-shadow: var(--nf-shadow-sm);
}
.help-sidebar > strong { padding: 4px 8px 9px; }
.help-sidebar a {
display: flex;
align-items: center;
gap: 9px;
min-height: 42px;
padding: 9px 11px;
border-radius: 12px;
color: var(--nf-muted);
font-size: 13px;
font-weight: 590;
text-decoration: none;
}
.help-sidebar a:hover,
.help-sidebar a:focus-visible {
color: var(--nf-primary);
background: var(--nf-primary-soft);
}
.help-sidebar .nf-icon { width: 18px; height: 18px; }
.help-content { display: grid; gap: 18px; min-width: 0; }
.help-section { scroll-margin-top: 92px; padding: 24px; }
.help-section-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 19px; }
.help-section-head > span {
width: 46px; height: 46px; flex: 0 0 auto;
display: grid; place-items: center;
color: var(--nf-primary); background: var(--nf-primary-soft);
border-radius: 15px;
}
.help-section-head .nf-icon { width: 23px; height: 23px; }
.help-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.help-topic-grid article {
display: flex; flex-direction: column; align-items: flex-start;
min-height: 176px; padding: 18px;
border: 1px solid var(--nf-border); border-radius: 17px;
background: var(--nf-surface-soft);
}
.help-topic-grid h3 { margin: 0 0 7px; font-size: 16px; }
.help-topic-grid p { margin: 0 0 13px; color: var(--nf-muted); font-size: 13px; line-height: 1.62; }
.help-topic-grid a { margin-top: auto; color: var(--nf-primary); font-size: 13px; font-weight: 650; text-decoration: none; }
.help-report-flow, .help-step-list { display: grid; gap: 10px; margin-bottom: 18px; }
.help-report-flow article, .help-step-list article {
display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
padding: 14px; border: 1px solid var(--nf-border); border-radius: 15px; background: var(--nf-surface-soft);
}
.help-report-flow article > span, .help-step-list article > span {
width: 32px; height: 32px; display: grid; place-items: center;
border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent));
font-weight: 700;
}
.help-report-flow p, .help-step-list p { margin: 4px 0 0; color: var(--nf-muted); font-size: 13px; }
/* Pesquisa global */
.global-search-card { padding: 18px; }
.global-search-form {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.global-search-icon {
width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 14px; color: var(--nf-primary); background: var(--nf-primary-soft);
}
.global-search-form input { width: 100%; min-height: 50px; font-size: 15px; }
.search-help-row, .search-summary { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.search-help-row { margin-top: 10px; padding: 0 3px; color: var(--nf-muted); font-size: 12px; }
.search-help-row a { color: var(--nf-primary); font-weight: 650; text-decoration: none; }
.search-summary h2 { margin: 1px 0 0; }
.search-groups { display: grid; gap: 14px; }
.search-group-card { overflow: hidden; padding: 0; }
.search-group-header { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--nf-border); }
.search-group-title { display: flex; gap: 12px; align-items: center; }
.search-group-title > span {
width: 42px; height: 42px; display: grid; place-items: center;
border-radius: 14px; color: var(--nf-primary); background: var(--nf-primary-soft);
}
.search-group-title h2 { margin: 0; font-size: 18px; }
.search-result-list { display: grid; }
.search-result-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 13px; align-items: center;
min-height: 72px; padding: 13px 20px;
color: var(--nf-text); text-decoration: none;
border-bottom: 1px solid var(--nf-border);
transition: background .16s ease, transform .16s ease;
}
.search-result-card:last-child { border-bottom: 0; }
.search-result-card:hover, .search-result-card:focus-visible { background: var(--nf-surface-soft); }
.search-result-icon {
width: 40px; height: 40px; display: grid; place-items: center;
border-radius: 13px; color: var(--nf-primary); background: var(--nf-primary-soft);
}
.search-result-main { min-width: 0; }
.search-result-main strong, .search-result-main small, .search-result-main span { display: block; }
.search-result-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-main small { margin-top: 2px; color: var(--nf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-main span { margin-top: 4px; color: var(--nf-muted); font-size: 11px; }
.search-result-value { white-space: nowrap; font-weight: 680; }
.search-arrow { color: var(--nf-muted); font-size: 24px; }
.search-suggestion-list { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.search-suggestion-list a { padding: 8px 11px; border-radius: 10px; color: var(--nf-primary); background: var(--nf-primary-soft); font-size: 12px; font-weight: 650; text-decoration: none; }
/* Segurança e sessões */
.security-hero .security-status {
max-width: 330px;
padding: 13px 16px;
border-radius: 16px;
font-size: 13px;
font-weight: 650;
}
.security-hero .security-status .nf-icon { width: 20px; height: 20px; }
.security-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.security-metric-card {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
padding: 17px; border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface);
}
.security-metric-icon {
width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 14px; color: var(--nf-primary); background: var(--nf-primary-soft);
}
.security-metric-card.is-positive .security-metric-icon { color: var(--nf-success); background: var(--nf-success-soft); }
.security-metric-card.is-attention .security-metric-icon { color: var(--nf-warning); background: var(--nf-warning-soft); }
.security-metric-card small, .security-metric-card strong, .security-metric-card span { display: block; }
.security-metric-card small { color: var(--nf-muted); font-size: 11px; }
.security-metric-card strong { margin-top: 2px; font-size: 17px; }
.security-metric-card span { margin-top: 3px; color: var(--nf-muted); font-size: 11px; line-height: 1.4; }
.security-settings-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); }
.security-primary-card, .security-tips-card { min-width: 0; }
.setup-step-list { display: grid; gap: 9px; }
.setup-step-list article {
display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start;
padding: 13px; border-radius: 15px; background: var(--nf-surface-soft); border: 1px solid var(--nf-border);
}
.setup-step-list article > span {
width: 32px; height: 32px; display: grid; place-items: center;
border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); font-weight: 700;
}
.setup-step-list p { margin: 3px 0 0; color: var(--nf-muted); font-size: 12px; }
.secret-key-box {
display: flex; justify-content: space-between; gap: 14px; align-items: center;
margin-top: 14px; padding: 14px; border-radius: 15px;
background: color-mix(in srgb, var(--nf-primary) 5%, var(--nf-surface)); border: 1px solid color-mix(in srgb, var(--nf-primary) 22%, var(--nf-border));
}
.secret-key-box > div { min-width: 0; }
.secret-key-box span, .secret-key-box code { display: block; }
.secret-key-box span { margin-bottom: 4px; color: var(--nf-muted); font-size: 11px; }
.secret-key-box code { overflow-wrap: anywhere; font-size: 15px; letter-spacing: .055em; }
.advanced-security-details, .security-action-panel {
margin-top: 12px; border: 1px solid var(--nf-border); border-radius: 15px; background: var(--nf-surface-soft);
}
.advanced-security-details summary, .security-action-panel summary { padding: 13px 14px; cursor: pointer; font-weight: 620; }
.advanced-security-details > p, .advanced-security-details > code { margin-left: 14px; margin-right: 14px; }
.advanced-security-details > code { display: block; margin-bottom: 14px; overflow-wrap: anywhere; }
.security-code-form { max-width: 460px; }
.security-enabled-state { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 16px; border-radius: 17px; background: var(--nf-success-soft); }
.security-enabled-state h3, .security-enabled-state p { margin: 0; }
.security-enabled-state p { margin-top: 4px; }
.security-action-panels { display: grid; gap: 10px; margin-top: 14px; }
.security-action-panel { margin-top: 0; }
.security-action-panel summary { display: flex; gap: 11px; align-items: center; list-style: none; }
.security-action-panel summary::-webkit-details-marker { display: none; }
.security-action-panel summary > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.security-action-panel summary strong, .security-action-panel summary small { display: block; }
.security-action-panel summary small { margin-top: 2px; color: var(--nf-muted); font-weight: 430; }
.security-action-panel form { padding: 0 14px 14px; }
.security-action-panel.is-danger summary > span { color: var(--nf-danger); background: var(--nf-danger-soft); }
.security-check-list p { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.security-check-list p > span { grid-row: span 2; }
.security-check-list small { display: block; margin-top: 2px; color: var(--nf-muted); font-weight: 430; line-height: 1.45; }
.recovery-codes-panel { padding: 18px; }
.recovery-codes-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.recovery-codes-heading p { margin: 4px 0 0; }
.backup-code-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.backup-code-grid code { padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--nf-success) 28%, var(--nf-border)); border-radius: 10px; background: var(--nf-surface); text-align: center; font-size: 12px; letter-spacing: .045em; }
.security-sessions-header { align-items: flex-start; }
.security-sessions-header .muted { max-width: 720px; margin: 4px 0 0; font-size: 12px; }
.session-list-enhanced { gap: 11px; }
.session-list-enhanced .session-card { padding: 16px; }
.session-list-enhanced .session-card.is-closed { opacity: .68; }
.session-main-info { min-width: 0; }
.session-title-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.session-main-info > small { margin-top: 3px; }
.session-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin-top: 10px; }
.session-meta-grid span { color: var(--nf-muted); font-size: 11px; line-height: 1.45; }
.session-meta-grid b { display: block; margin-bottom: 1px; color: var(--nf-text); font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }
/* Login 2FA */
.two-factor-auth-heading { position: relative; }
.auth-security-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 16px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.auth-security-icon .nf-icon { width: 24px; height: 24px; }
.two-factor-login-form label small { display: block; margin-top: 7px; color: var(--nf-muted); font-size: 11px; line-height: 1.45; }
.two-factor-login-form .otp-input { text-align: center; font-size: 22px; letter-spacing: .15em; }
.auth-security-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--nf-border); border-radius: 14px; background: var(--nf-surface-soft); }
.auth-security-note > .nf-icon { width: 20px; height: 20px; color: var(--nf-primary); }
.auth-security-note p { margin: 0; }
.auth-security-note strong, .auth-security-note span { display: block; }
.auth-security-note span { margin-top: 2px; color: var(--nf-muted); font-size: 11px; }
@media (max-width: 980px) {
.help-layout { grid-template-columns: 1fr; }
.help-sidebar { position: static; display: flex; overflow-x: auto; padding: 10px; }
.help-sidebar > strong { display: none; }
.help-sidebar a { flex: 0 0 auto; white-space: nowrap; }
.security-overview-grid { grid-template-columns: 1fr; }
.security-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
:root { --nf-control-height: 44px; }
.help-section { padding: 18px; }
.help-topic-grid { grid-template-columns: 1fr; }
.help-topic-grid article { min-height: auto; }
.global-search-form { grid-template-columns: auto minmax(0, 1fr); }
.global-search-form .btn { grid-column: 1 / -1; width: 100%; }
.search-help-row, .search-summary { align-items: flex-start; }
.search-result-card { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 14px; }
.search-result-value { grid-column: 2; justify-self: start; }
.search-arrow { grid-column: 3; grid-row: 1 / span 2; }
.recovery-codes-heading { display: grid; }
.backup-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.secret-key-box { align-items: stretch; flex-direction: column; }
.secret-key-box .btn { width: 100%; }
.security-sessions-header { display: grid; }
.security-sessions-header form, .security-sessions-header .btn { width: 100%; }
.session-list-enhanced .session-card { grid-template-columns: auto minmax(0, 1fr); }
.session-meta-grid { grid-template-columns: 1fr 1fr; }
.session-list-enhanced .session-card > form { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
.backup-code-grid { grid-template-columns: 1fr; }
.session-meta-grid { grid-template-columns: 1fr; }
.security-metric-card { padding: 14px; }
}
/* Elementos específicos da Central de Ajuda */
.help-index-card {
position: sticky;
top: 88px;
padding: 16px;
align-self: start;
}
.help-index-card h2 { margin: 2px 0 12px; font-size: 18px; }
.help-index { display: grid; gap: 6px; }
.help-index a {
display: flex; align-items: center; gap: 9px;
min-height: 42px; padding: 9px 10px; border-radius: 12px;
color: var(--nf-muted); font-size: 12px; font-weight: 600; text-decoration: none;
}
.help-index a:hover, .help-index a:focus-visible { color: var(--nf-primary); background: var(--nf-primary-soft); }
.help-index a > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: var(--nf-surface-soft); }
.help-index .nf-icon { width: 16px; height: 16px; }
.help-quick-tip { margin-top: 14px; padding: 13px; border-radius: 14px; background: var(--nf-primary-soft); }
.help-quick-tip strong, .help-quick-tip p { display: block; }
.help-quick-tip p { margin: 4px 0 11px; color: var(--nf-muted); font-size: 11px; line-height: 1.5; }
.help-plan-card { min-width: 220px; padding: 15px 17px; border: 1px solid color-mix(in srgb, var(--nf-primary) 25%, var(--nf-border)); border-radius: 17px; background: color-mix(in srgb, var(--nf-primary) 7%, var(--nf-surface)); }
.help-plan-card span, .help-plan-card strong, .help-plan-card small { display: block; }
.help-plan-card span, .help-plan-card small { color: var(--nf-muted); font-size: 11px; }
.help-plan-card strong { margin: 2px 0 4px; font-size: 18px; }
.help-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.help-step-grid article { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 16px; border: 1px solid var(--nf-border); border-radius: 16px; background: var(--nf-surface-soft); }
.help-step-grid article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); font-weight: 700; }
.help-step-grid p { margin: 4px 0 10px; color: var(--nf-muted); font-size: 12px; line-height: 1.55; }
.help-step-grid a { color: var(--nf-primary); font-size: 12px; font-weight: 650; text-decoration: none; }
.help-note { margin-top: 13px; padding: 14px 16px; border-left: 3px solid var(--nf-primary); border-radius: 0 14px 14px 0; background: var(--nf-primary-soft); }
.help-note p { margin: 5px 0 0; color: var(--nf-muted); font-size: 12px; line-height: 1.65; }
.help-feature-list { display: grid; gap: 9px; }
.help-feature-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--nf-border); border-radius: 15px; background: var(--nf-surface-soft); }
.help-feature-list article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.help-feature-list strong, .help-feature-list p { display: block; }
.help-feature-list p { margin: 3px 0 0; color: var(--nf-muted); font-size: 12px; }
.help-feature-list em { padding: 5px 8px; border-radius: 999px; color: var(--nf-success); background: var(--nf-success-soft); font-size: 10px; font-style: normal; font-weight: 650; white-space: nowrap; }
.help-feature-list .is-locked { opacity: .67; }
.help-feature-list .is-locked em { color: var(--nf-muted); background: var(--nf-surface); border: 1px solid var(--nf-border); }
@media (max-width: 980px) {
.help-index-card { position: static; }
.help-index { display: flex; overflow-x: auto; padding-bottom: 3px; }
.help-index a { flex: 0 0 auto; white-space: nowrap; }
.help-quick-tip { display: none; }
}
@media (max-width: 720px) {
.help-step-grid { grid-template-columns: 1fr; }
.help-feature-list article { grid-template-columns: auto minmax(0, 1fr); }
.help-feature-list em { grid-column: 2; justify-self: start; }
.help-plan-card { width: 100%; min-width: 0; }
}
/* =========================================================
NowBusiness v0.30.0 — Confiança, crescimento e investimentos
========================================================= */
.error-state-card {
width: min(560px, calc(100% - 32px));
margin: 10vh auto 0;
padding: 34px;
border: 1px solid var(--nf-border);
border-radius: 24px;
background: var(--nf-surface);
box-shadow: var(--nf-shadow);
text-align: center;
}
.error-state-card h1 { margin: 8px 0 10px; font-size: clamp(26px, 4vw, 38px); }
.error-state-icon { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; color: var(--nf-primary); background: var(--nf-primary-soft); border-radius: 18px; }
.error-state-icon .nf-icon { width: 28px; height: 28px; }
.protocol-box { margin: 22px auto; padding: 15px 18px; border: 1px dashed color-mix(in srgb, var(--nf-primary) 38%, var(--nf-border)); border-radius: 16px; background: var(--nf-primary-soft); }
.protocol-box span, .protocol-box strong, .protocol-box small { display: block; }
.protocol-box span, .protocol-box small { color: var(--nf-muted); font-size: 11px; }
.protocol-box strong { margin: 3px 0; letter-spacing: .08em; font-size: 20px; }
.onboarding-hero, .health-hero, .privacy-center-hero, .notifications-preferences-hero,
.master-health-hero, .master-errors-hero, .master-metrics-hero, .investment-detail-hero {
overflow: hidden;
position: relative;
}
.onboarding-hero::after, .health-hero::after, .privacy-center-hero::after,
.master-health-hero::after, .master-metrics-hero::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -90px;
top: -120px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--nf-accent) 22%, transparent), transparent 68%);
pointer-events: none;
}
.onboarding-score, .system-health-score, .metric-spotlight {
min-width: 185px;
padding: 16px 18px;
border: 1px solid color-mix(in srgb, var(--nf-primary) 22%, var(--nf-border));
border-radius: 18px;
background: color-mix(in srgb, var(--nf-primary) 7%, var(--nf-surface));
position: relative;
z-index: 1;
}
.onboarding-score span, .onboarding-score strong, .onboarding-score small,
.system-health-score span, .system-health-score strong, .system-health-score small,
.metric-spotlight span, .metric-spotlight strong, .metric-spotlight small { display: block; }
.onboarding-score span, .onboarding-score small, .system-health-score span, .system-health-score small, .metric-spotlight span, .metric-spotlight small { color: var(--nf-muted); font-size: 11px; }
.onboarding-score strong, .system-health-score strong, .metric-spotlight strong { margin: 3px 0; font-size: 25px; }
.progress-shell { height: 8px; overflow: hidden; border-radius: 999px; background: var(--nf-surface-soft); }
.progress-shell > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); transition: width .35s ease; }
.success-banner { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 14px; color: var(--nf-success); background: var(--nf-success-soft); }
.success-banner span { color: var(--nf-muted); }
.onboarding-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.onboarding-step-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 15px; padding: 20px; border: 1px solid var(--nf-border); border-radius: 20px; background: var(--nf-surface); box-shadow: var(--nf-shadow-soft); }
.onboarding-step-card.is-done { border-color: color-mix(in srgb, var(--nf-success) 30%, var(--nf-border)); background: color-mix(in srgb, var(--nf-success) 5%, var(--nf-surface)); }
.onboarding-step-card.is-skipped { opacity: .72; }
.onboarding-step-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); font-weight: 750; }
.onboarding-step-number .nf-icon { width: 18px; height: 18px; }
.onboarding-step-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; }
.onboarding-step-head h2 { margin: 0 0 5px; font-size: 17px; }
.onboarding-step-head p { margin: 0 0 14px; color: var(--nf-muted); font-size: 12px; line-height: 1.6; }
.module-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: var(--nf-primary); background: var(--nf-primary-soft); flex: 0 0 auto; }
.module-icon .nf-icon { width: 18px; height: 18px; }
.health-orbit, .privacy-shield { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); box-shadow: 0 18px 35px color-mix(in srgb, var(--nf-primary) 25%, transparent); position: relative; z-index: 1; }
.health-orbit .nf-icon, .privacy-shield .nf-icon { width: 34px; height: 34px; }
.insight-action-grid { display: grid; gap: 14px; }
.insight-action-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 15px; padding: 18px; border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface-soft); }
.insight-action-card.severity-critical { border-left: 4px solid var(--nf-danger); }
.insight-action-card.severity-warning { border-left: 4px solid var(--nf-warning); }
.insight-action-card.severity-positive { border-left: 4px solid var(--nf-success); }
.insight-action-card.severity-info { border-left: 4px solid var(--nf-primary); }
.insight-action-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.severity-critical .insight-action-icon { color: var(--nf-danger); background: var(--nf-danger-soft); }
.severity-warning .insight-action-icon { color: var(--nf-warning); background: var(--nf-warning-soft); }
.severity-positive .insight-action-icon { color: var(--nf-success); background: var(--nf-success-soft); }
.insight-action-copy > span { color: var(--nf-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.insight-action-copy h3 { margin: 3px 0 5px; font-size: 17px; }
.insight-action-copy p { margin: 0 0 12px; color: var(--nf-muted); font-size: 12px; line-height: 1.6; }
.preference-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.preference-switch-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface-soft); cursor: pointer; }
.preference-switch-copy strong, .preference-switch-copy small { display: block; }
.preference-switch-copy small { margin-top: 3px; color: var(--nf-muted); font-size: 11px; line-height: 1.5; }
.preference-switch-card input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { width: 42px; height: 24px; padding: 3px; border-radius: 999px; background: var(--nf-border); transition: .2s ease; }
.switch-ui::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(15,23,42,.18); transition: .2s ease; }
.preference-switch-card input:checked + .switch-ui { background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); }
.preference-switch-card input:checked + .switch-ui::after { transform: translateX(18px); }
.section-divider { height: 1px; margin: 24px 0; background: var(--nf-border); }
.privacy-inventory-list { display: grid; gap: 8px; }
.privacy-inventory-list > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 13px; background: var(--nf-surface-soft); }
.privacy-inventory-list span { color: var(--nf-muted); font-size: 12px; }
.privacy-inventory-list strong { font-size: 13px; text-align: right; }
.privacy-export-card { display: flex; flex-direction: column; gap: 12px; }
.privacy-export-card .btn { width: 100%; }
.health-check-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.health-check-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface); box-shadow: var(--nf-shadow-soft); }
.health-check-card.status-healthy { border-color: color-mix(in srgb, var(--nf-success) 28%, var(--nf-border)); }
.health-check-card.status-warning { border-color: color-mix(in srgb, var(--nf-warning) 35%, var(--nf-border)); }
.health-check-card.status-critical { border-color: color-mix(in srgb, var(--nf-danger) 35%, var(--nf-border)); }
.health-check-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--nf-success); background: var(--nf-success-soft); }
.status-warning .health-check-icon { color: var(--nf-warning); background: var(--nf-warning-soft); }
.status-critical .health-check-icon { color: var(--nf-danger); background: var(--nf-danger-soft); }
.health-check-card span, .health-check-card strong, .health-check-card small { display: block; }
.health-check-card span { color: var(--nf-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.health-check-card strong { margin: 3px 0; font-size: 13px; line-height: 1.35; }
.health-check-card small { color: var(--nf-muted); font-size: 10px; line-height: 1.45; word-break: break-word; }
.system-health-score.status-healthy strong { color: var(--nf-success); }
.system-health-score.status-warning strong { color: var(--nf-warning); }
.system-health-score.status-critical strong { color: var(--nf-danger); }
.feature-flag-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.feature-flag-card { display: grid; grid-template-columns: minmax(0,1fr) 180px 130px auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--nf-border); border-radius: 17px; background: var(--nf-surface-soft); }
.feature-flag-card p { margin: 4px 0 0; color: var(--nf-muted); font-size: 11px; line-height: 1.5; }
.feature-flag-card label span { font-size: 10px; }
.error-log-list { display: grid; gap: 12px; }
.error-log-card { padding: 17px; border: 1px solid var(--nf-border); border-left: 4px solid var(--nf-danger); border-radius: 17px; background: var(--nf-surface-soft); }
.error-log-card.status-investigating { border-left-color: var(--nf-warning); }
.error-log-card.status-resolved { border-left-color: var(--nf-success); }
.error-log-card.status-ignored { border-left-color: var(--nf-muted); opacity: .75; }
.error-log-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.error-log-head > div { display: flex; gap: 10px; align-items: center; min-width: 0; }
.protocol-chip { padding: 5px 8px; border-radius: 999px; color: var(--nf-primary); background: var(--nf-primary-soft); font-size: 10px; font-weight: 750; letter-spacing: .06em; white-space: nowrap; }
.error-log-card > p { margin: 10px 0; color: var(--nf-text); font-size: 12px; line-height: 1.55; }
.error-log-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--nf-muted); font-size: 10px; }
.error-log-card .inline-form { margin-top: 12px; }
.investments-premium-hero { background: linear-gradient(135deg, color-mix(in srgb, #062d69 94%, var(--nf-surface)), color-mix(in srgb, #0c8d8d 80%, var(--nf-surface))); color: #fff; }
.investments-premium-hero .page-kicker, .investments-premium-hero .muted { color: rgba(255,255,255,.72); }
.investments-premium-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.investment-overview-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.8fr); gap: 16px; }
.investment-balance-card { min-height: 350px; display: flex; flex-direction: column; padding: 24px; overflow: hidden; position: relative; border-radius: 24px; color: #fff; background: linear-gradient(135deg,#071f49 0%,#075e83 55%,#0bb68c 120%); box-shadow: 0 22px 48px rgba(4,35,70,.2); }
.investment-balance-card::before { content:"NF"; position:absolute; right:-25px; bottom:-70px; font-size:220px; font-weight:800; opacity:.06; }
.investment-balance-head { display:flex; justify-content:space-between; gap:20px; position:relative; z-index:1; }
.investment-balance-head span, .investment-balance-head strong { display:block; }
.investment-balance-head > div > span { color:rgba(255,255,255,.7); font-size:12px; }
.investment-balance-head > div > strong { margin-top:4px; font-size:clamp(28px,4vw,42px); }
.investment-result-chip { align-self:flex-start; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(255,255,255,.14); }
.investment-result-chip.is-positive { color:#b7ffdc; }
.investment-result-chip.is-negative { color:#ffd1d1; }
.investment-chart-shell { flex:1; min-height:180px; margin:18px -4px 0; color:#b8ffe5; position:relative; z-index:1; }
.investment-chart-shell svg, .investment-detail-chart svg { width:100%; height:100%; min-height:180px; overflow:visible; }
.investment-chart-line { fill:none; stroke:currentColor; stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.investment-chart-area { fill:url(#investmentArea); stroke:none; }
.investment-detail-chart .investment-chart-area { fill:color-mix(in srgb,var(--nf-primary) 13%,transparent); }
.investment-detail-chart .investment-chart-line { color:var(--nf-primary); }
.investment-chart-empty { height:100%; min-height:160px; display:grid; place-items:center; align-content:center; gap:10px; color:rgba(255,255,255,.62); text-align:center; }
.investment-detail-chart .investment-chart-empty { color:var(--nf-muted); }
.investment-chart-empty .nf-icon { width:42px; height:42px; }
.investment-balance-footer { display:flex; justify-content:space-between; gap:16px; color:rgba(255,255,255,.68); font-size:11px; position:relative; z-index:1; }
.investment-balance-footer strong { color:#fff; }
.investment-kpi-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.risk-allocation-list { display:grid; gap:10px; }
.risk-allocation-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; background:var(--nf-surface-soft); border-left:4px solid var(--nf-success); }
.risk-allocation-item.risk-medium { border-left-color:var(--nf-warning); }
.risk-allocation-item.risk-high { border-left-color:var(--nf-danger); }
.risk-allocation-item span { display:block; margin-top:2px; color:var(--nf-muted); font-size:10px; }
.projection-value { margin:8px 0 14px; padding:17px; border-radius:17px; background:linear-gradient(135deg,var(--nf-primary-soft),var(--nf-accent-soft)); }
.projection-value span, .projection-value strong, .projection-value small { display:block; }
.projection-value span, .projection-value small { color:var(--nf-muted); font-size:11px; }
.projection-value strong { margin:4px 0; font-size:27px; }
.activity-link { color:inherit; text-decoration:none; transition:transform .18s ease, background .18s ease; }
.activity-link:hover { transform:translateX(3px); background:var(--nf-primary-soft); }
.investment-detail-grid { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr); gap:16px; }
.investment-detail-balance { padding:24px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#07245a,#058993); }
.investment-detail-balance > span { color:rgba(255,255,255,.7); font-size:12px; }
.investment-detail-balance > strong { display:block; margin:5px 0 24px; color:#fff !important; font-size:34px; }
.investment-detail-balance > div { display:grid; gap:9px; }
.investment-detail-balance > div > span { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.72); font-size:11px; }
.investment-detail-balance b { color:#fff; }
.field-help { display:block; margin-top:5px; color:var(--nf-muted); font-size:10px; line-height:1.45; }
.badge.movement-contribution, .badge.movement-yield { color:var(--nf-success); background:var(--nf-success-soft); }
.badge.movement-redeem, .badge.movement-loss { color:var(--nf-danger); background:var(--nf-danger-soft); }
.badge.movement-fee, .badge.movement-tax { color:var(--nf-warning); background:var(--nf-warning-soft); }
.positive { color:var(--nf-success) !important; }
.negative { color:var(--nf-danger) !important; }
@media (max-width: 1180px) {
.health-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature-flag-grid { grid-template-columns:1fr; }
.feature-flag-card { grid-template-columns:minmax(0,1fr) 170px 120px auto; }
.investment-overview-grid { grid-template-columns:1fr; }
.investment-kpi-stack { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 820px) {
.onboarding-grid, .preference-switch-grid { grid-template-columns:1fr; }
.feature-flag-card { grid-template-columns:1fr 1fr; }
.feature-flag-card > div { grid-column:1/-1; }
.feature-flag-card .btn { width:100%; }
.investment-kpi-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
.investment-detail-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
.onboarding-score, .system-health-score, .metric-spotlight { width:100%; }
.health-check-grid { grid-template-columns:1fr; }
.feature-flag-card { grid-template-columns:1fr; }
.feature-flag-card > div { grid-column:auto; }
.onboarding-step-card { grid-template-columns:34px minmax(0,1fr); padding:16px; }
.onboarding-step-number { width:32px; height:32px; }
.onboarding-step-head { grid-template-columns:1fr; }
.onboarding-step-head .module-icon { display:none; }
.insight-action-card { grid-template-columns:1fr; }
.insight-action-icon { width:40px; height:40px; }
.preference-switch-card { grid-template-columns:auto minmax(0,1fr) auto; padding:14px; }
.investment-balance-card { min-height:300px; padding:19px; }
.investment-balance-head { flex-direction:column; }
.investment-balance-footer { flex-direction:column; gap:5px; }
.investment-kpi-stack { grid-template-columns:1fr 1fr; }
.error-log-head, .error-log-head > div { align-items:flex-start; flex-direction:column; }
.error-log-card .inline-form { display:grid; grid-template-columns:1fr; }
}
/* v0.30.0 — acabamento, acessibilidade e integração do Dashboard */
.dashboard-health-preview { margin-top: 24px; }
.dashboard-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-insight-grid .insight-action-card { min-height: 100%; }
.dashboard-insight-grid .insight-action-copy h3 { line-height: 1.25; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid color-mix(in srgb, var(--nf-primary) 45%, transparent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
@media (max-width: 1050px) {
.dashboard-insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.dashboard-health-preview .card-header { align-items: flex-start; }
.dashboard-health-preview .card-header .btn { width: 100%; }
}
/* v0.30.0 — preferências essenciais e acessibilidade */
.preference-switch-card--locked {
cursor: default;
background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
border-style: dashed;
}
.preference-required-badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--success) 14%, transparent);
color: var(--success);
font-size: .76rem;
font-weight: 750;
white-space: nowrap;
}
/* v0.30.1 — perfil separado, configurações reorganizadas e credenciais */
.user-chip { color: var(--nf-text); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.user-chip:hover { color: var(--nf-text); border-color: color-mix(in srgb, var(--nf-primary) 34%, var(--nf-border)); box-shadow: var(--nf-shadow-sm); transform: translateY(-1px); }
.settings-hub-hero,
.profile-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 196px;
padding: clamp(24px, 4vw, 36px);
border: 1px solid color-mix(in srgb, var(--nf-primary) 15%, var(--nf-border));
border-radius: 28px;
background:
radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--nf-accent) 20%, transparent), transparent 34%),
radial-gradient(circle at 12% 110%, color-mix(in srgb, var(--nf-primary) 13%, transparent), transparent 45%),
linear-gradient(135deg, var(--nf-card), color-mix(in srgb, var(--nf-primary-soft) 38%, var(--nf-card)));
box-shadow: var(--nf-shadow-sm);
}
.settings-hub-hero::after,
.profile-hero::after {
content: '';
position: absolute;
width: 260px;
height: 260px;
right: -110px;
bottom: -150px;
border-radius: 999px;
border: 42px solid color-mix(in srgb, var(--nf-primary) 8%, transparent);
pointer-events: none;
}
.settings-hub-hero > *, .profile-hero > * { position: relative; z-index: 1; }
.settings-hub-hero h1, .profile-hero h1 { margin: 0 0 8px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -1.6px; line-height: 1; }
.settings-hub-hero p:not(.page-kicker), .profile-hero-main p:not(.page-kicker) { max-width: 680px; margin: 0; color: var(--nf-muted); line-height: 1.6; }
.settings-hub-hero .settings-hero-pills span { color: var(--nf-text); background: color-mix(in srgb, var(--nf-card) 82%, transparent); border-color: var(--nf-border); backdrop-filter: blur(8px); }
.settings-subnav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
padding: 8px;
border: 1px solid var(--nf-border);
border-radius: 18px;
background: var(--nf-card);
box-shadow: var(--nf-shadow-xs);
}
.settings-subnav a {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 10px 14px;
border-radius: 13px;
color: var(--nf-muted);
font-size: 13px;
font-weight: 780;
text-decoration: none;
}
.settings-subnav a:hover { color: var(--nf-primary); background: var(--nf-surface-soft); }
.settings-subnav a.is-active { color: var(--nf-primary); background: var(--nf-primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-primary) 14%, transparent); }
.settings-subnav .nf-icon { width: 18px; height: 18px; }
.settings-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.settings-link-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 112px;
padding: 18px;
border: 1px solid var(--nf-border);
border-radius: 20px;
color: var(--nf-text);
background: var(--nf-card);
box-shadow: var(--nf-shadow-xs);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.settings-link-card:hover { color: var(--nf-text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--nf-primary) 30%, var(--nf-border)); box-shadow: var(--nf-shadow-sm); }
.settings-link-card strong, .settings-link-card small { display: block; }
.settings-link-card strong { margin-bottom: 5px; font-size: 15px; }
.settings-link-card small { color: var(--nf-muted); line-height: 1.45; }
.settings-link-card > b { color: var(--nf-muted); font-size: 24px; font-weight: 500; }
.settings-main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.settings-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-choice {
display: grid;
align-content: start;
gap: 8px;
min-height: 142px;
padding: 16px;
border: 1px solid var(--nf-border);
border-radius: 17px;
background: var(--nf-surface-soft);
}
.settings-choice > span { font-weight: 800; }
.settings-choice small { color: var(--nf-muted); line-height: 1.45; }
.settings-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--nf-border); }
.settings-side-stack { display: grid; gap: 18px; }
.account-overview-list, .profile-summary-list { display: grid; gap: 0; margin: 8px 0 18px; }
.account-overview-list span, .profile-summary-list span { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--nf-border); }
.account-overview-list small, .profile-summary-list b { color: var(--nf-muted); font-size: 12px; font-weight: 700; }
.account-overview-list strong, .profile-summary-list strong { text-align: right; font-size: 13px; }
.settings-support-card { display: grid; gap: 14px; }
.settings-support-card h2 { margin: 3px 0 6px; }
.danger-action-details { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--nf-danger) 20%, var(--nf-border)); border-radius: 16px; overflow: hidden; }
.danger-action-details summary { padding: 15px 17px; cursor: pointer; color: var(--nf-danger); font-weight: 800; background: color-mix(in srgb, var(--nf-danger) 6%, var(--nf-card)); }
.danger-action-details .danger-form { padding: 18px; border-top: 1px solid var(--nf-border); }
.profile-hero { min-height: 210px; }
.profile-hero-main { display: flex; align-items: center; gap: 20px; min-width: 0; }
.profile-hero-avatar { width: 92px; height: 92px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 5px solid color-mix(in srgb, var(--nf-card) 88%, transparent); border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent)); box-shadow: 0 18px 36px color-mix(in srgb, var(--nf-primary) 24%, transparent); font-size: 26px; font-weight: 850; }
.profile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-hero-badges span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--nf-border); border-radius: 999px; color: var(--nf-muted); background: color-mix(in srgb, var(--nf-card) 84%, transparent); font-size: 12px; font-weight: 750; }
.profile-hero-badges .nf-icon { width: 15px; height: 15px; color: var(--nf-primary); }
.profile-completion-card { width: min(100%, 300px); padding: 18px; border: 1px solid var(--nf-border); border-radius: 20px; background: color-mix(in srgb, var(--nf-card) 88%, transparent); backdrop-filter: blur(8px); }
.profile-completion-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-completion-card span { color: var(--nf-muted); font-size: 12px; font-weight: 750; }
.profile-completion-card strong { color: var(--nf-primary); font-size: 22px; }
.profile-completion-track { height: 7px; margin: 11px 0 9px; overflow: hidden; border-radius: 999px; background: var(--nf-border); }
.profile-completion-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nf-primary), var(--nf-accent)); }
.profile-completion-card small { color: var(--nf-muted); line-height: 1.45; }
.profile-edit-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(250px, .56fr); gap: 18px; align-items: start; }
.profile-edit-layout > .card { min-width: 0; }
.profile-side-column { display: grid; gap: 14px; position: sticky; top: 88px; }
.profile-upload-enhanced { margin-top: 4px; padding: 18px; }
.profile-main-card .form-grid-2, .profile-account-card .form-grid-2 { align-items: start; }
.form-grid-span-2 { grid-column: 1 / -1; }
.profile-save-button { min-height: 48px; gap: 8px; }
.profile-save-button .nf-icon { width: 18px; height: 18px; }
.security-password-card { overflow: hidden; }
.security-password-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--nf-primary); background: var(--nf-primary-soft); }
.security-password-icon .nf-icon { width: 22px; height: 22px; }
.security-password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.security-password-form label { min-width: 0; }
.security-password-form button { min-height: var(--nf-control-height); white-space: nowrap; }
.security-password-form .password-strength-meter { margin-top: 7px; }
@media (max-width: 1180px) {
.settings-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-edit-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-side-column { grid-column: 1 / -1; position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.profile-save-button { width: auto; min-width: 220px; }
.security-password-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.security-password-form button { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 900px) {
.settings-hub-hero, .profile-hero { align-items: flex-start; flex-direction: column; }
.settings-hub-hero > .btn { width: 100%; }
.profile-completion-card { width: 100%; }
.settings-main-grid, .profile-edit-layout { grid-template-columns: 1fr; }
.profile-side-column { grid-column: auto; grid-template-columns: 1fr; }
.profile-save-button { width: 100%; }
.settings-subnav { display: flex; overflow-x: auto; scrollbar-width: thin; }
.settings-subnav a { flex: 0 0 auto; min-width: 132px; }
}
@media (max-width: 720px) {
.settings-hub-hero, .profile-hero { padding: 22px; border-radius: 22px; }
.settings-hub-hero h1, .profile-hero h1 { font-size: 34px; }
.settings-link-grid, .settings-choice-grid { grid-template-columns: 1fr; }
.settings-link-card { min-height: 96px; }
.settings-form-actions { align-items: stretch; flex-direction: column; }
.settings-form-actions .btn { width: 100%; }
.profile-hero-main { align-items: flex-start; }
.profile-hero-avatar { width: 72px; height: 72px; border-radius: 22px; font-size: 21px; }
.security-password-form { grid-template-columns: 1fr; }
.security-password-form button { grid-column: auto; width: 100%; justify-self: stretch; }
}
@media (max-width: 480px) {
.profile-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.profile-hero-badges { grid-column: 1 / -1; }
.settings-subnav a { min-width: 118px; }
.settings-link-card { padding: 15px; }
.settings-link-card .settings-card-icon { width: 38px; height: 38px; border-radius: 14px; }
}
/* Sprint 30.2 — navegação persistente, alinhamento e identidade visual */
:root { --nf-sidebar-width: 280px; --nf-sidebar-collapsed-width: 88px; }
@media (min-width: 901px) {
.app-shell { display: block; min-height: 100vh; padding-left: var(--nf-sidebar-width); transition: padding-left .2s ease; }
.app-shell.sidebar-collapsed { padding-left: var(--nf-sidebar-collapsed-width); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--nf-sidebar-width); height: 100dvh; overflow: hidden; transition: width .2s ease; }
.app-shell.sidebar-collapsed .sidebar { width: var(--nf-sidebar-collapsed-width); }
.app-main { min-height: 100vh; }
.sidebar-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 3px; }
.sidebar-footer { flex: 0 0 auto; }
}
.sidebar-nav a .nav-icon { --nav-icon-color: var(--nf-primary); color: var(--nav-icon-color); background: color-mix(in srgb, var(--nav-icon-color) 12%, transparent); }
.sidebar-nav a[href*="receitas"] .nav-icon,
.sidebar-nav a[href*="investimentos"] .nav-icon,
.sidebar-nav a[href*="saude"] .nav-icon { --nav-icon-color: #10a675; }
.sidebar-nav a[href*="despesas"] .nav-icon,
.sidebar-nav a[href*="erros"] .nav-icon { --nav-icon-color: #ef4444; }
.sidebar-nav a[href*="cartoes"] .nav-icon,
.sidebar-nav a[href*="contas"] .nav-icon,
.sidebar-nav a[href*="financeiro"] .nav-icon { --nav-icon-color: #0878d1; }
.sidebar-nav a[href*="orcamento"] .nav-icon,
.sidebar-nav a[href*="metas"] .nav-icon { --nav-icon-color: #8b5cf6; }
.sidebar-nav a[href*="previsao"] .nav-icon,
.sidebar-nav a[href*="relatorios"] .nav-icon,
.sidebar-nav a[href*="metricas"] .nav-icon { --nav-icon-color: #0ea5e9; }
.sidebar-nav a[href*="recorrencias"] .nav-icon,
.sidebar-nav a[href*="fechamento"] .nav-icon { --nav-icon-color: #f59e0b; }
.sidebar-nav a[href*="automacoes"] .nav-icon,
.sidebar-nav a[href*="primeiros-passos"] .nav-icon,
.sidebar-nav a[href*="login-comercial"] .nav-icon { --nav-icon-color: #e879f9; }
.sidebar-nav a[href*="importar"] .nav-icon,
.sidebar-nav a[href*="conciliacao"] .nav-icon { --nav-icon-color: #06b6d4; }
.sidebar-nav a[href*="categorias"] .nav-icon,
.sidebar-nav a[href*="tags"] .nav-icon { --nav-icon-color: #f97316; }
.sidebar-nav a[href*="dividas"] .nav-icon { --nav-icon-color: #dc2626; }
.sidebar-nav a[href*="patrimonio"] .nav-icon { --nav-icon-color: #ca8a04; }
.sidebar-nav a[href*="documentos"] .nav-icon,
.sidebar-nav a[href*="privacidade"] .nav-icon { --nav-icon-color: #64748b; }
.sidebar-nav a[href*="equipe"] .nav-icon,
.sidebar-nav a[href*="perfil"] .nav-icon,
.sidebar-nav a[href*="planos"] .nav-icon { --nav-icon-color: #7c3aed; }
.sidebar-nav a[href*="buscar"] .nav-icon { --nav-icon-color: #2563eb; }
.sidebar-nav a[href*="notificacoes"] .nav-icon { --nav-icon-color: #e11d48; }
.sidebar-nav a[href*="preferencias"] .nav-icon,
.sidebar-nav a[href*="configuracoes"] .nav-icon { --nav-icon-color: #0891b2; }
.sidebar-nav a[href*="assinatura"] .nav-icon { --nav-icon-color: #059669; }
.sidebar-nav a[href*="seguranca"] .nav-icon { --nav-icon-color: #2563eb; }
.sidebar-nav a[href*="ajuda"] .nav-icon,
.sidebar-nav a[href*="operacao"] .nav-icon { --nav-icon-color: #ea580c; }
.sidebar-nav a[href*="comunicacao"] .nav-icon { --nav-icon-color: #16a34a; }
.sidebar-nav a.is-active .nav-icon { color: #fff; background: var(--nav-icon-color); box-shadow: 0 8px 18px color-mix(in srgb, var(--nav-icon-color) 28%, transparent); }
.security-password-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.security-password-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.password-control-block { display: grid; grid-template-rows: auto var(--nf-control-height) 7px minmax(34px, auto); align-content: start; min-width: 0; }
.password-control-block > span:first-child { align-self: end; }
.password-control-block > input { height: var(--nf-control-height); }
.password-control-spacer { display: block; height: 5px; margin-top: 7px; border-radius: 999px; background: transparent; }
.password-control-block > small { display: block; margin-top: 7px; line-height: 1.35; }
.security-password-actions { display: flex; align-items: flex-end; min-height: calc(var(--nf-control-height) + 58px); }
.security-password-actions .btn { min-height: var(--nf-control-height); white-space: nowrap; }
.plan-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 14px; }
.feature-matrix-wrap { overflow: auto; max-width: 100%; border-radius: 18px; }
.feature-matrix-table { min-width: 1180px; }
.feature-matrix-table th:first-child,
.feature-matrix-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--nf-surface); min-width: 250px; }
.feature-matrix-table thead th:first-child { z-index: 4; }
.feature-group-row td:first-child { background: var(--nf-surface-soft); }
.lifetime-badge { color: #7c3aed !important; background: color-mix(in srgb, #8b5cf6 13%, var(--nf-surface)) !important; border-color: color-mix(in srgb, #8b5cf6 32%, var(--nf-border)) !important; }
.lifetime-client-card { border-color: color-mix(in srgb, #8b5cf6 25%, var(--nf-border)); background: linear-gradient(145deg, color-mix(in srgb, #8b5cf6 5%, var(--nf-surface)), var(--nf-surface)); }
.master-plan-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
@media (max-width: 1180px) {
.plan-editor-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
.security-password-form { grid-template-columns: 1fr; }
.security-password-actions { min-height: auto; justify-content: flex-end; }
}
@media (max-width: 900px) {
.app-shell, .app-shell.sidebar-collapsed { padding-left: 0; }
.sidebar { position: fixed; height: 100dvh; }
.security-password-fields { grid-template-columns: 1fr; }
.security-password-actions .btn { width: 100%; }
}
@media (max-width: 620px) {
.plan-editor-grid { grid-template-columns: 1fr; }
}
/* Sprint 30.2.1 — acabamento final da navegação e credenciais */
@media (min-width: 901px) {
.sidebar { display: flex; flex-direction: column; }
.sidebar-head,
.sidebar > .tenant-pill,
.sidebar-footer { flex: 0 0 auto; }
.sidebar-nav { flex: 1 1 auto; min-height: 0; scroll-behavior: auto; }
}
.security-password-form { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.security-password-fields { align-items: start; }
.password-control-block {
grid-template-rows: 22px var(--nf-control-height) 12px minmax(38px, auto);
gap: 0;
}
.password-control-block > span:first-child {
min-height: 22px;
display: flex;
align-items: flex-start;
line-height: 1.25;
}
.password-control-block > input { align-self: start; }
.password-control-block .password-strength-meter,
.password-control-block .password-control-spacer {
align-self: center;
margin: 7px 0 0;
}
.password-control-block > small { margin: 5px 0 0; min-height: 34px; }
.security-password-actions { min-height: 0; padding-top: 22px; align-items: flex-start; }
@media (max-width: 1180px) {
.security-password-form { grid-template-columns: 1fr; }
.security-password-actions { padding-top: 0; justify-content: flex-end; }
}
@media (max-width: 900px) {
.password-control-block { grid-template-rows: auto var(--nf-control-height) 12px auto; }
.password-control-block > span:first-child { min-height: 0; }
}
/* v0.31.0 — checkout, assinatura online e retenção */
.register-page-heading { display:grid; gap:6px; margin-bottom:20px; }
.register-page-heading h2 { margin:0 !important; }
.register-checkout-form { gap:18px !important; margin-top:0 !important; }
.register-section {
display:grid; gap:16px; padding:18px;
border:1px solid var(--nf-border); border-radius:20px;
background:linear-gradient(145deg,color-mix(in srgb,var(--nf-surface-soft) 52%,var(--nf-surface)),var(--nf-surface));
}
.register-section-title { display:flex; align-items:flex-start; gap:12px; }
.register-section-title > span {
width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center;
border-radius:10px; color:#fff; font-size:12px; font-weight:900;
background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));
box-shadow:0 8px 18px color-mix(in srgb,var(--nf-primary) 20%,transparent);
}
.register-section-title > div { display:grid; gap:2px; }
.register-section-title strong { color:var(--nf-text); font-size:15px; }
.register-section-title small { color:var(--nf-muted); line-height:1.4; }
.register-payment-panel { display:grid; gap:15px; }
.field-label { display:block; color:var(--nf-text); font-size:13px; font-weight:800; }
.payment-method-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.payment-method-options.compact { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.payment-method-option {
position:relative; display:flex !important; align-items:flex-start; gap:10px !important; min-width:0;
padding:14px; border:1px solid var(--nf-border); border-radius:16px;
background:var(--nf-surface); cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.payment-method-option:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--nf-primary) 34%,var(--nf-border)); }
.payment-method-option:has(input:checked) {
border-color:color-mix(in srgb,var(--nf-primary) 62%,var(--nf-border));
box-shadow:0 0 0 3px color-mix(in srgb,var(--nf-primary) 10%,transparent);
background:color-mix(in srgb,var(--nf-primary) 4%,var(--nf-surface));
}
.payment-method-option input { width:17px !important; height:17px !important; min-height:17px !important; flex:0 0 17px; margin:2px 0 0; accent-color:var(--nf-primary); }
.payment-method-option > span { min-width:0; display:grid; gap:3px; }
.payment-method-option strong { color:var(--nf-text); font-size:13px; }
.payment-method-option small { color:var(--nf-muted); font-size:11px; line-height:1.45; }
.payment-card-fields { display:grid; gap:14px; padding:16px; border:1px solid color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border)); border-radius:18px; background:var(--nf-surface); }
.payment-secure-note { display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:14px; background:color-mix(in srgb,var(--nf-accent) 8%,var(--nf-surface-soft)); }
.payment-secure-note > span { font-size:18px; }
.payment-secure-note p { display:grid; gap:2px; margin:0; }
.payment-secure-note strong { font-size:12px; color:var(--nf-text); }
.payment-secure-note small { color:var(--nf-muted); line-height:1.45; }
.mp-field {
width:100%; min-height:48px; display:flex; align-items:center;
border:1px solid var(--nf-border); border-radius:14px; padding:0 14px;
background:color-mix(in srgb,var(--nf-surface-soft) 58%,var(--nf-surface)); overflow:hidden;
}
.mp-field:focus-within { border-color:var(--nf-primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--nf-primary) 10%,transparent); }
.mp-field iframe { width:100% !important; min-height:24px !important; }
.document-inline { display:grid; grid-template-columns:minmax(132px,.42fr) minmax(220px,1fr); gap:10px; width:100%; min-width:0; }
.document-inline > select,.document-inline > input { width:100%; min-width:0; }
.payment-document-field { min-width:0; }
.payment-document-field > span { display:block; }
.payment-error { margin:0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,#ef4444 10%,var(--nf-surface)); color:#b91c1c; font-size:12px; font-weight:700; }
.payment-pending-screen { width:min(100%,560px); margin-inline:auto; display:grid; gap:18px; }
.payment-pending-heading { display:grid; gap:8px; }
.payment-pending-heading h2 { margin:0 !important; }
.payment-pending-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:#fff; font-size:23px; font-weight:900; background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); box-shadow:0 14px 28px color-mix(in srgb,var(--nf-primary) 20%,transparent); }
.pending-payment-card { display:grid; gap:16px; padding:18px; border:1px solid var(--nf-border); border-radius:20px; background:var(--nf-surface); box-shadow:var(--nf-shadow-sm); }
.pix-payment-card { grid-template-columns:160px minmax(0,1fr); align-items:center; }
.pix-qr-wrap { width:160px; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--nf-border); border-radius:18px; padding:10px; background:#fff; }
.pix-qr-wrap img { width:100%; height:100%; object-fit:contain; }
.pix-payment-content { min-width:0; display:grid; gap:8px; }
.pix-payment-content > span { color:var(--nf-muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.pix-payment-content > strong { font-size:28px; color:var(--nf-text); }
.pix-payment-content label { display:grid; gap:6px; }
.pix-payment-content textarea { min-height:82px; resize:none; font-size:11px; word-break:break-all; }
.retry-payment-card { gap:14px; }
.pending-payment-sync-form,.pending-logout-form { margin:0; }
.billing-hero { align-items:center; }
.online-billing-summary { display:grid; gap:18px; }
.online-billing-info,.integration-status-card,.payment-config-card,.retention-deadline-card {
display:grid; gap:6px; align-content:start;
padding:16px; border:1px solid var(--nf-border); border-radius:18px; background:var(--nf-surface);
}
.online-billing-info > span { color:var(--nf-muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.online-billing-info > strong { color:var(--nf-text); font-size:20px; line-height:1.25; letter-spacing:-.02em; }
.online-billing-info > small { line-height:1.5; }
.online-billing-info.danger { border-color:color-mix(in srgb,#ef4444 20%,var(--nf-border)); background:color-mix(in srgb,#ef4444 4%,var(--nf-surface)); }
.inline-pix-box { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:center; padding:16px; border:1px solid color-mix(in srgb,var(--nf-accent) 24%,var(--nf-border)); border-radius:18px; background:color-mix(in srgb,var(--nf-accent) 4%,var(--nf-surface)); }
.inline-pix-box img { width:120px; height:120px; object-fit:contain; padding:7px; border-radius:14px; background:#fff; }
.billing-request-list { display:grid; gap:12px; }
.billing-request-card { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.billing-request-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cancellation-zone { border-color:color-mix(in srgb,#ef4444 18%,var(--nf-border)); }
.cancellation-zone details > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cancellation-zone details > summary::-webkit-details-marker { display:none; }
.cancellation-zone summary > span:first-child { display:grid; gap:3px; }
.cancellation-zone summary small { color:var(--nf-muted); }
.cancellation-content { display:grid; gap:16px; padding-top:18px; }
.cancellation-warning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cancellation-warning-grid > div { padding:14px; border:1px solid color-mix(in srgb,#ef4444 16%,var(--nf-border)); border-radius:16px; background:color-mix(in srgb,#ef4444 4%,var(--nf-surface)); }
.cancellation-warning-grid p { margin:5px 0 0; color:var(--nf-muted); line-height:1.55; }
.danger-confirm-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; gap:12px; align-items:end; }
.billing-admin-grid { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.35fr); gap:16px; }
.integration-status-card { display:grid; gap:12px; }
.integration-check-list { display:grid; gap:8px; }
.integration-check { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--nf-surface-soft); }
.integration-check.ok strong { color:#047857; }
.integration-check.warning strong { color:#b45309; }
.integration-webhook-box { padding:12px; border:1px dashed var(--nf-border); border-radius:14px; background:var(--nf-surface-soft); overflow-wrap:anywhere; }
.online-billing-admin-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.online-billing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.billing-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.billing-summary-wide { grid-column:1 / -1; }
.payment-mode-note { margin-top:12px; }
.blocked-account-screen { width:min(100%,560px); margin:auto; display:grid; gap:18px; text-align:left; }
.blocked-account-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:18px; color:#fff; font-size:25px; background:linear-gradient(135deg,#ef4444,#f59e0b); }
.blocked-reason { padding:16px; border:1px solid color-mix(in srgb,#ef4444 22%,var(--nf-border)); border-radius:18px; background:color-mix(in srgb,#ef4444 5%,var(--nf-surface)); }
.blocked-account-actions { display:flex; gap:10px; flex-wrap:wrap; }
@media (min-width:1101px) {
.auth-shell-v17:has(.register-checkout-form) { grid-template-columns:minmax(360px,.72fr) minmax(650px,1.28fr) !important; }
.auth-shell-v17:has(.register-checkout-form) .auth-card-v17 { align-items:stretch !important; padding:38px 46px !important; }
.auth-shell-v17:has(.register-checkout-form) .auth-card-v17 > * { width:100%; max-width:820px !important; }
.auth-shell-v17:has(.register-checkout-form) .auth-brand-panel-v17 h1 { font-size:clamp(38px,3.4vw,56px) !important; }
}
@media (max-width:1000px) {
.payment-method-options { grid-template-columns:1fr; }
.billing-admin-grid,.online-billing-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
.register-section { padding:15px; border-radius:17px; }
.pix-payment-card,.inline-pix-box { grid-template-columns:1fr; }
.pix-qr-wrap { width:min(220px,100%); margin:auto; }
.billing-request-card { align-items:flex-start; flex-direction:column; }
.billing-request-actions,.billing-request-actions form,.billing-request-actions .btn { width:100%; }
.cancellation-warning-grid,.danger-confirm-form,.online-billing-admin-metrics,.billing-summary-grid { grid-template-columns:1fr; }
.blocked-account-actions,.blocked-account-actions .btn { width:100%; }
}
/* v0.32.0 — perfil, plano e pagamentos unificados */
.profile-account-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.profile-account-nav a{flex:0 0 auto;white-space:nowrap}
.account-hub-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.payment-method-management .form-stack{max-width:980px}
.payment-method-management .mp-field{min-height:48px}
.release-timeline{display:grid;gap:18px}
.release-card .feature-list{margin-top:8px}
.help-release-card{border-color:color-mix(in srgb,var(--nf-primary) 25%,var(--nf-border))}
@media(max-width:760px){.profile-account-nav{margin-inline:-4px}.payment-method-management .grid-2{grid-template-columns:1fr}.payment-method-management .span-2{grid-column:auto}}
/* v0.32.2 — cartão compacto, resumo visual e reconciliação de cobrança */
.billing-summary-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.billing-summary-actions form{margin:0}
.billing-processing-note{margin:0}
.current-payment-card{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
padding:16px 18px;border:1px solid color-mix(in srgb,var(--nf-primary) 20%,var(--nf-border));
border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 5%,var(--nf-surface)),var(--nf-surface));
}
.current-payment-card-icon{
width:54px;height:38px;display:grid;place-items:center;border-radius:11px;
color:#fff;font-weight:900;letter-spacing:.12em;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));
box-shadow:0 8px 18px color-mix(in srgb,var(--nf-primary) 18%,transparent);
}
.current-payment-card>div:nth-child(2){display:grid;gap:3px;min-width:0}
.current-payment-card span:not(.badge){color:var(--nf-muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.current-payment-card strong{font-size:17px;color:var(--nf-text)}
.current-payment-card small{color:var(--nf-muted);line-height:1.45}
.compact-payment-form{gap:14px!important;margin-top:16px!important}
.payment-card-fields.compact-payment-form{margin-top:0!important}
.compact-payment-form .grid-2{gap:12px}
.compact-payment-form label{gap:6px}
.compact-payment-form label>span{font-size:12px}
.compact-payment-form input,.compact-payment-form select{min-height:46px!important;height:46px!important;padding-top:0!important;padding-bottom:0!important}
.mp-field{
height:46px!important;min-height:46px!important;max-height:46px!important;
padding:0 13px!important;overflow:hidden!important;
}
.mp-field iframe{
display:block!important;width:100%!important;height:24px!important;min-height:24px!important;max-height:24px!important;
border:0!important;overflow:hidden!important;
}
.payment-method-management .mp-field{height:46px!important;min-height:46px!important;max-height:46px!important}
.payment-method-management .form-stack{max-width:900px}
.payment-method-management .payment-secure-note{max-width:900px}
.payment-card-fields{max-width:900px}
@media(max-width:900px){.billing-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
.current-payment-card{grid-template-columns:auto minmax(0,1fr)}
.current-payment-card>.badge{grid-column:1/-1;justify-self:start}
.billing-summary-actions{justify-content:flex-start}
}
/* v0.33.0 — automação financeira da assinatura e fundação bancária */
.bank-provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px}
.bank-provider-card{display:grid;gap:18px;align-content:start}
.bank-provider-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start}
.bank-provider-head h2{margin:0 0 5px;font-size:21px}
.bank-provider-head .page-kicker{margin-bottom:5px}
.bank-provider-head .muted{margin:0;line-height:1.5}
.bank-provider-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;color:var(--nf-primary);background:var(--nf-primary-soft);border:1px solid color-mix(in srgb,var(--nf-primary) 16%,var(--nf-border))}
.bank-provider-icon .nf-icon{width:23px;height:23px}
.bank-provider-state{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bank-provider-state>span{display:grid;gap:4px;padding:11px 12px;border:1px solid var(--nf-border);border-radius:13px;background:var(--nf-surface-soft);color:var(--nf-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.bank-provider-state strong{color:var(--nf-text);font-size:13px;text-transform:none;letter-spacing:0}
.bank-provider-config{border-top:1px solid var(--nf-border);padding-top:14px}
.bank-provider-config>summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:850;list-style:none}
.bank-provider-config>summary::-webkit-details-marker{display:none}
.bank-provider-actions{display:flex;gap:10px;flex-wrap:wrap}
.bank-provider-actions .btn[disabled]{opacity:.55;cursor:not-allowed}
.recurring-managed-note{display:grid;gap:8px;margin-top:10px}
.recurring-managed-note .btn{width:max-content}
.account-card.credit-card:has(.favorite-pill:first-of-type){position:relative}
@media(max-width:760px){
.bank-provider-grid{grid-template-columns:1fr}
.bank-provider-head{grid-template-columns:auto minmax(0,1fr)}
.bank-provider-head>.badge{grid-column:1/-1;width:max-content}
.bank-provider-state{grid-template-columns:1fr}
.bank-provider-actions,.bank-provider-actions .btn{width:100%}
}
/* v0.33.2 — estado de cobrança consistente e tentativas seguras */
/* v0.33.3 — cancelamento resiliente e documento do cartão responsivo */
@media (max-width:560px) {
.document-inline { grid-template-columns:1fr; }
.payment-document-field { grid-column:1 / -1 !important; }
}
/* v0.33.5 — cobrança consolidada e retenção pós-pagamento */
.managed-card-removal{display:grid;gap:12px;margin-top:14px}
.managed-card-removal form{margin:0}
.account-card.credit-card.is-muted{opacity:.78}
@media(max-width:900px){.billing-summary-grid{grid-template-columns:1fr}}
/* v0.33.6 — nova renovação após cancelamento */
.cancelled-payment-actions{display:grid;gap:18px;margin-top:14px}
.renewal-reactivation-panel{display:grid;gap:14px;padding:18px;border:1px solid color-mix(in srgb,var(--nf-primary) 20%,var(--nf-border));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--nf-primary) 3%,var(--nf-surface)),var(--nf-surface))}
.renewal-reactivation-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.renewal-reactivation-heading h3{margin:0;font-size:20px;letter-spacing:-.02em;color:var(--nf-text)}
.renewal-reactivation-heading .page-kicker{margin-bottom:5px}
.renewal-start-note{margin:0}
.renewal-start-note p{margin-top:5px}
@media(max-width:700px){
.renewal-reactivation-panel{padding:15px}
.renewal-reactivation-heading{display:grid;grid-template-columns:1fr}
.renewal-reactivation-heading .badge{justify-self:start}
}
/* v0.33.7 — transparência das tentativas de cobrança */
.billing-retry-notice { display:grid; gap:14px; }
.billing-retry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.billing-retry-grid > div { display:grid; gap:4px; padding:13px; border:1px solid color-mix(in srgb,#f59e0b 22%,var(--nf-border)); border-radius:14px; background:color-mix(in srgb,#f59e0b 4%,var(--nf-surface)); }
.billing-retry-grid span { color:var(--nf-muted); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.billing-retry-grid strong { color:var(--nf-text); font-size:15px; }
.billing-retry-grid small { color:var(--nf-muted); line-height:1.45; }
.billing-retry-clarification { padding:12px 14px; border-radius:14px; background:var(--nf-surface); border:1px solid var(--nf-border); }
@media(max-width:800px){.billing-retry-grid{grid-template-columns:1fr}}
/* v0.34.0 — linguagem do cliente e diagnóstico */
.billing-timeline{display:grid;gap:0}.billing-timeline-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:12px;padding:0 0 18px}.billing-timeline-item:not(:last-child)::before{content:'';position:absolute;left:8px;top:16px;bottom:0;width:2px;background:var(--nf-border)}.billing-timeline-dot{width:18px;height:18px;border-radius:50%;background:var(--nf-surface);border:4px solid var(--nf-primary);z-index:1}.billing-timeline-item.tone-success .billing-timeline-dot{border-color:#10b981}.billing-timeline-item.tone-warning .billing-timeline-dot{border-color:#f59e0b}.billing-timeline-item p{margin:4px 0;color:var(--nf-muted)}.billing-timeline-item small{color:var(--nf-muted);font-size:12px}.master-billing-diagnostic{border-color:color-mix(in srgb,var(--nf-primary) 22%,var(--nf-border))}
/* v0.36.0 — Central de diagnóstico */
.diagnostic-summary-grid{margin-top:20px}
.diagnostic-issue-list{display:grid;gap:12px}
.diagnostic-issue-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface)}
.diagnostic-issue-card.severity-critical{border-color:color-mix(in srgb,#ef4444 28%,var(--nf-border));background:color-mix(in srgb,#ef4444 3%,var(--nf-surface))}
.diagnostic-issue-card.severity-warning{border-color:color-mix(in srgb,#f59e0b 28%,var(--nf-border));background:color-mix(in srgb,#f59e0b 3%,var(--nf-surface))}
.diagnostic-issue-main{display:grid;gap:7px;min-width:0}.diagnostic-issue-main h3,.diagnostic-issue-main p{margin:0}.diagnostic-issue-main p{color:var(--nf-muted);line-height:1.55}.diagnostic-issue-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.diagnostic-issue-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.diagnostic-issue-card{grid-template-columns:1fr}.diagnostic-issue-actions,.diagnostic-issue-actions .btn{width:100%}}
/* v0.36.0 — experiência simplificada */
.nav-more{margin:4px 0 8px;border-radius:14px}
.nav-more summary{list-style:none;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:var(--nf-muted);font-weight:800;cursor:pointer}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary:hover,.nav-more[open] summary{background:var(--nf-surface-soft);color:var(--nf-text)}
.nav-more-links{display:grid;gap:2px;margin:4px 0 6px;padding-left:42px}
.nav-more-links a{padding:8px 10px!important;font-size:13px;border-radius:10px!important}
.sidebar-nav-v36 .nav-section-label{margin-top:14px}
.dashboard-hero-v36{background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 9%,var(--nf-surface)),color-mix(in srgb,var(--nf-accent) 7%,var(--nf-surface)))}
@media(max-width:760px){.nav-more-links{padding-left:18px}}
/* v0.37.0 — configuração guiada discreta e dashboard focado */
.dashboard-setup-trigger{display:inline-flex;align-items:center;gap:8px}
.dashboard-setup-trigger small{display:inline-grid;place-items:center;min-width:31px;height:24px;padding:0 7px;border-radius:999px;background:var(--nf-primary-soft);color:var(--nf-primary);font-size:11px;font-weight:850}
.guided-setup-dialog{width:min(680px,calc(100vw - 28px));max-height:min(760px,calc(100vh - 28px));padding:0;border:0;border-radius:24px;background:var(--nf-surface);color:var(--nf-text);box-shadow:0 28px 90px rgba(15,23,42,.24);overflow:auto}
.guided-setup-dialog::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}
.guided-setup-shell{display:grid;gap:18px;padding:24px}
.guided-setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.guided-setup-head h2{margin:0 0 5px;font-size:24px;letter-spacing:-.6px}
.guided-setup-head .muted{margin:0}
.guided-setup-close{font-size:24px;line-height:1}
.guided-setup-steps{grid-template-columns:1fr;margin-top:0}
.guided-setup-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}
@media(max-width:680px){.dashboard-setup-trigger span{display:none}.guided-setup-shell{padding:18px}.guided-setup-footer{align-items:stretch;flex-direction:column}.guided-setup-footer .btn{width:100%}}
/* v0.38.0 — performance e dashboard mobile compacto */
.dashboard-action{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dashboard-action .nf-icon{width:17px;height:17px}
.dashboard-adjustments{position:relative}
.dashboard-adjustments>summary{list-style:none;cursor:pointer}
.dashboard-adjustments>summary::-webkit-details-marker{display:none}
.dashboard-adjustments>summary small{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:999px;background:var(--nf-primary-soft);color:var(--nf-primary);font-size:10px;font-weight:850}
.dashboard-adjustments-menu{position:absolute;z-index:30;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 32px));display:grid;gap:6px;padding:8px;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface);box-shadow:0 20px 50px rgba(15,23,42,.16)}
.dashboard-adjustments-menu a,.dashboard-adjustments-menu button{display:grid;gap:2px;width:100%;padding:12px;border:0;border-radius:12px;background:transparent;color:var(--nf-text);text-align:left;text-decoration:none;cursor:pointer}
.dashboard-adjustments-menu a:hover,.dashboard-adjustments-menu button:hover{background:var(--nf-surface-soft)}
.dashboard-adjustments-menu strong{font-size:13px}
.dashboard-adjustments-menu span{color:var(--nf-muted);font-size:11px;line-height:1.4}
@media(max-width:760px){
.quick-actions-strip{gap:10px;padding:12px}
.quick-actions-strip h1{font-size:clamp(25px,7vw,31px)}
.quick-actions-strip .muted{font-size:13px}
.dashboard-status-pills{margin-top:2px}
.isf-pill{padding:10px 12px;border-radius:15px}
.quick-actions-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hero-actions.quick-actions-buttons .btn,.quick-actions-buttons .btn{min-width:0;min-height:38px;padding:7px 5px;border-radius:11px;font-size:11px}
.dashboard-action{gap:4px}
.dashboard-action .nf-icon{width:15px;height:15px}
.dashboard-adjustments{min-width:0}
.dashboard-adjustments>summary{width:100%}
.dashboard-adjustments>summary small{position:absolute;top:-5px;right:-3px;min-width:22px;height:18px;padding:0 4px;font-size:9px}
.dashboard-adjustments-menu{position:fixed;left:12px;right:12px;top:auto;bottom:78px;width:auto}
}
@media(max-width:390px){
.dashboard-action span{font-size:10px}
.dashboard-action .nf-icon{display:none}
}
/* v0.39.0 — investimentos inteligentes */
.investment-detail-chart{min-width:0;overflow:hidden}.investment-detail-chart svg{display:block;width:100%;height:240px;min-height:0;overflow:hidden}.investment-chart-area,.investment-chart-line{vector-effect:non-scaling-stroke}.investment-update-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.investment-live-calculation{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface-soft)}.investment-live-calculation>span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--nf-muted)}.investment-live-calculation>strong{font-size:22px;color:#07875f}.investment-live-calculation.is-negative>strong{color:#d22f3f}.investment-advanced-movement{border-top:1px solid var(--nf-border);padding-top:14px}.investment-advanced-movement summary{cursor:pointer;font-weight:800;color:var(--nf-primary)}.investment-summary-list{display:grid;gap:0}.investment-summary-list>div{display:grid;grid-template-columns:minmax(130px,1fr) auto;gap:8px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--nf-border)}.investment-summary-list>div>span{color:var(--nf-muted);font-size:12px}.investment-summary-list>div>strong{text-align:right}.investment-summary-list>div>small{grid-column:1/-1;text-align:right}.investment-projection-highlight{margin:10px 0;padding:15px!important;border:1px solid color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border))!important;border-radius:16px;background:color-mix(in srgb,var(--nf-primary) 5%,var(--nf-surface))}.investment-projection-highlight>strong{font-size:22px}.is-hidden{display:none!important}.investments-premium-hero .btn-primary{color:#fff!important}.investments-premium-hero .btn-outline{color:#fff!important}.investment-overview-grid,.investment-detail-grid,.investment-update-grid,.investment-detail-chart{min-width:0}.investment-detail-balance strong,.investment-detail-balance b{font-variant-numeric:tabular-nums}.investment-detail-balance>strong{font-size:clamp(28px,3.3vw,40px);overflow-wrap:anywhere}
@media(max-width:900px){.investment-update-grid{grid-template-columns:1fr}.investment-detail-chart svg{height:210px}}
@media(max-width:600px){.investment-detail-chart svg{height:180px}.investment-summary-list>div{grid-template-columns:1fr}.investment-summary-list>div>strong,.investment-summary-list>div>small{text-align:left}.investment-projection-highlight>strong{font-size:20px}}
/* v0.40.0 — confiabilidade, supervisor inteligente e monitoramento */
.reliability-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 5%,var(--nf-surface)),color-mix(in srgb,var(--nf-accent) 8%,var(--nf-surface)))}
.reliability-supervisor{overflow:hidden}
.supervisor-grid{display:grid;grid-template-columns:minmax(230px,1.25fr) repeat(3,minmax(150px,.75fr));gap:14px}
.supervisor-score-card,.supervisor-stat-card{display:grid;gap:6px;padding:18px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface-soft)}
.supervisor-score-card>span,.supervisor-stat-card>span{font-size:12px;color:var(--nf-muted);font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.supervisor-score-card>strong{font-size:48px;line-height:1;color:var(--nf-text)}
.supervisor-stat-card>strong{font-size:32px;color:var(--nf-text)}
.supervisor-score-card>small,.supervisor-stat-card>small{color:var(--nf-muted)}
.supervisor-score-track{height:9px;border-radius:999px;background:var(--nf-border);overflow:hidden;margin-top:8px}
.supervisor-score-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--nf-primary),var(--nf-accent))}
.supervisor-score-card.status-warning .supervisor-score-track i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.supervisor-score-card.status-critical .supervisor-score-track i{background:linear-gradient(90deg,#dc2626,#fb7185)}
.supervisor-recommendations{display:grid;gap:10px}
.supervisor-recommendation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface)}
.supervisor-recommendation>span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:6px 9px;border-radius:999px;background:var(--nf-surface-soft);color:var(--nf-muted)}
.supervisor-recommendation.priority-high{border-color:color-mix(in srgb,#ef4444 25%,var(--nf-border));background:color-mix(in srgb,#ef4444 3%,var(--nf-surface))}
.supervisor-recommendation.priority-high>span{background:color-mix(in srgb,#ef4444 12%,var(--nf-surface));color:#b91c1c}
.supervisor-recommendation.priority-medium{border-color:color-mix(in srgb,#f59e0b 24%,var(--nf-border))}
.supervisor-recommendation.priority-medium>span{background:color-mix(in srgb,#f59e0b 12%,var(--nf-surface));color:#92400e}
.supervisor-recommendation div{display:grid;gap:3px}
.supervisor-recommendation p{margin:0;color:var(--nf-muted);line-height:1.5}
.health-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.health-actions form{margin:0}
.diagnostic-issue-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end}
.diagnostic-issue-actions form{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.component-heartbeat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.component-heartbeat{display:grid;gap:5px;padding:15px;border:1px solid var(--nf-border);border-left:4px solid #10b981;border-radius:15px;background:var(--nf-surface-soft)}
.component-heartbeat.status-warning{border-left-color:#f59e0b}
.component-heartbeat.status-critical{border-left-color:#ef4444}
.component-heartbeat>span{font-size:12px;color:var(--nf-muted);font-weight:850;text-transform:capitalize}
.component-heartbeat>strong{color:var(--nf-text)}
.component-heartbeat>small{color:var(--nf-muted)}
@media(max-width:1080px){.supervisor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.supervisor-grid{grid-template-columns:1fr}.supervisor-recommendation{grid-template-columns:1fr}.supervisor-recommendation .btn{width:100%}.health-actions,.health-actions form,.health-actions .btn{width:100%}.diagnostic-issue-actions{width:100%;justify-content:stretch}.diagnostic-issue-actions form,.diagnostic-issue-actions .btn{width:100%}}
/* v0.41.0 — performance progressiva */
.performance-contained-section,
.dashboard-lazy-slot {
content-visibility: auto;
contain-intrinsic-size: auto 420px;
}
.dashboard-widget-skeleton { min-height: 250px; }
.skeleton-card { display:grid; gap:14px; min-height:240px; overflow:hidden; }
.skeleton-card > span {
display:block; height:18px; border-radius:999px;
background:linear-gradient(90deg,var(--nf-surface-soft) 25%,color-mix(in srgb,var(--nf-border) 55%,var(--nf-surface)) 50%,var(--nf-surface-soft) 75%);
background-size:220% 100%; animation:nf-skeleton 1.35s ease-in-out infinite;
}
.skeleton-card > span:nth-child(1){width:38%}.skeleton-card > span:nth-child(2){width:76%;height:110px;border-radius:18px}.skeleton-card > span:nth-child(3){width:58%}.skeleton-card > span:nth-child(4){width:88%}
.skeleton-table { min-height:210px; }
.lazy-widget-error { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
@keyframes nf-skeleton { 0%{background-position:100% 0}100%{background-position:-100% 0} }
@media (prefers-reduced-motion: reduce){.skeleton-card > span{animation:none}}
@media (max-width:700px){.dashboard-widget-skeleton{min-height:220px}.skeleton-card{min-height:210px}.lazy-widget-error{align-items:flex-start;flex-direction:column}}
/* v0.42.0 — estabilização e revisão visual dos investimentos */
.investments-premium-hero .hero-actions{align-items:center}
.investments-premium-hero .btn-investment-secondary{
display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:148px;
color:#fff!important;background:rgba(3,28,67,.34)!important;
border:1px solid rgba(255,255,255,.42)!important;box-shadow:0 10px 26px rgba(2,31,68,.16);
backdrop-filter:blur(8px)
}
.investments-premium-hero .btn-investment-secondary:hover{
color:#fff!important;background:rgba(3,28,67,.52)!important;border-color:rgba(255,255,255,.68)!important
}
.investments-premium-hero .btn-investment-secondary .nf-icon{width:18px;height:18px;flex:0 0 18px}
.investment-overview-grid{align-items:start;grid-template-columns:minmax(0,1.55fr) minmax(340px,.75fr)}
.investment-balance-card{height:370px;min-height:0;padding:24px 24px 20px}
.investment-balance-head>div>strong{font-size:clamp(30px,3vw,42px);line-height:1.05;overflow-wrap:anywhere}
.investment-balance-footer{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;
color:rgba(255,255,255,.76)
}
.investment-balance-footer>span{display:grid;gap:4px;padding:11px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);min-width:0}
.investment-balance-footer small{color:rgba(255,255,255,.66);font-size:10px;line-height:1.25}
.investment-balance-footer strong{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.investment-balance-footer strong.is-positive{color:#b7ffdc!important}
.investment-balance-footer strong.is-negative{color:#ffd1d1!important}
.investment-chart-shell{flex:0 0 168px;height:168px;min-height:0;margin:14px 0 0;overflow:hidden;border-radius:16px}
.investment-chart-shell svg{display:block;width:100%;height:142px!important;min-height:0!important;overflow:hidden!important}
.investment-chart-meta{display:flex;justify-content:space-between;gap:12px;padding-top:7px;color:rgba(255,255,255,.58);font-size:10px}
.investment-chart-empty{height:100%;min-height:0;padding:20px}
.investment-kpi-stack{height:370px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.investment-kpi-stack .metric-card{min-height:0;height:100%;padding:20px;align-content:start;overflow:hidden}
.investment-kpi-stack .metric-card>strong{font-size:clamp(24px,2vw,32px);line-height:1.1;overflow-wrap:anywhere}
.investment-kpi-stack .metric-card>small{line-height:1.4}
.investment-card-grid .card,.investment-overview-grid>*{min-width:0}
@media (max-width:1180px){
.investment-overview-grid{grid-template-columns:1fr}
.investment-balance-card{height:350px}
.investment-kpi-stack{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
.investment-kpi-stack .metric-card{min-height:150px}
}
@media (max-width:760px){
.investments-premium-hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
.investments-premium-hero .hero-actions .btn{width:100%;min-width:0}
.investment-balance-card{height:auto;min-height:330px;padding:19px}
.investment-balance-footer{grid-template-columns:1fr 1fr}
.investment-balance-footer>span:last-child{grid-column:1/-1}
.investment-chart-shell{height:150px;flex-basis:150px}
.investment-chart-shell svg{height:124px!important}
.investment-kpi-stack{grid-template-columns:1fr 1fr}
.investment-kpi-stack .metric-card{min-height:132px;padding:16px}
}
@media (max-width:430px){
.investments-premium-hero .hero-actions{grid-template-columns:1fr}
.investment-balance-head{gap:12px}
.investment-balance-head>div>strong{font-size:30px}
.investment-balance-footer{grid-template-columns:1fr}
.investment-balance-footer>span:last-child{grid-column:auto}
.investment-kpi-stack{grid-template-columns:1fr 1fr;gap:9px}
.investment-kpi-stack .metric-card{min-height:122px;padding:14px}
.investment-kpi-stack .metric-card>strong{font-size:22px}
}
/* v0.43.0 — operação, privacidade, suporte e resposta a incidentes */
.privacy-overview-grid{align-items:stretch}.privacy-overview-grid>.card{height:100%}.privacy-inventory-list{display:grid;gap:9px;margin-top:18px}.privacy-inventory-list>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px;border:1px solid var(--nf-border);border-radius:13px;background:var(--nf-surface-soft)}.privacy-export-card{display:flex;flex-direction:column;gap:15px}.privacy-export-card form{margin-top:auto}.privacy-request-list,.privacy-admin-list,.support-ticket-list,.incident-list,.audit-compact-list{display:grid;gap:10px}.privacy-request-item,.privacy-admin-item,.support-ticket-row,.incident-row,.audit-compact-list>article{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface);min-width:0}.privacy-request-item>div:first-child,.privacy-admin-item>div:first-child,.support-ticket-row>div:first-child,.incident-row>div:first-child{display:grid;gap:4px;min-width:0}.privacy-request-item strong,.privacy-admin-item strong,.support-ticket-row strong,.incident-row strong{color:var(--nf-text);overflow-wrap:anywhere}.privacy-request-item small,.privacy-admin-item small,.support-ticket-row small,.incident-row small{color:var(--nf-muted)}.privacy-request-actions,.privacy-admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.privacy-admin-actions input{min-width:180px}.privacy-danger-zone{border-color:color-mix(in srgb,#ef4444 20%,var(--nf-border))}.privacy-deletion-details{border:1px solid color-mix(in srgb,#ef4444 20%,var(--nf-border));border-radius:16px;padding:14px 16px;background:color-mix(in srgb,#ef4444 3%,var(--nf-surface))}.privacy-deletion-details summary{cursor:pointer;font-weight:850;color:#b91c1c}.support-layout{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}.support-guidance-card{align-content:start}.support-ticket-row,.incident-row{color:inherit;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.support-ticket-row:hover,.incident-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--nf-primary) 28%,var(--nf-border));box-shadow:var(--nf-shadow-sm)}.support-ticket-row>div:last-child,.incident-row>div:last-child{display:flex;align-items:flex-end;gap:6px;flex-direction:column}.support-thread{display:grid;gap:12px}.support-message{max-width:min(82%,760px);padding:14px 16px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface-soft)}.support-message>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}.support-message p{margin:0;line-height:1.6}.support-message small{color:var(--nf-muted)}.support-message.is-customer{margin-left:auto;background:color-mix(in srgb,var(--nf-primary) 7%,var(--nf-surface));border-color:color-mix(in srgb,var(--nf-primary) 20%,var(--nf-border))}.support-message.is-support{margin-right:auto}.support-message.is-internal{max-width:100%;background:color-mix(in srgb,#f59e0b 7%,var(--nf-surface));border-style:dashed}.governance-summary-grid .metric-card{min-height:126px}.privacy-admin-item{align-items:flex-start}.incident-timeline{display:grid;gap:0}.incident-timeline article{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;position:relative;padding-bottom:20px}.incident-timeline article>span{width:11px;height:11px;margin-top:5px;border-radius:99px;background:var(--nf-primary);box-shadow:0 0 0 4px var(--nf-primary-soft)}.incident-timeline article:not(:last-child)::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:1px;background:var(--nf-border)}.incident-timeline p{margin:5px 0;line-height:1.55}.incident-timeline small{color:var(--nf-muted)}.audit-compact-list>article>div{display:grid;gap:3px}.audit-compact-list>article>div:last-child{text-align:right}.table-subtitle{display:block;margin-top:4px;color:var(--nf-muted)}.badge.priority-urgent,.badge.severity-critical,.badge.risk-critical{background:color-mix(in srgb,#ef4444 13%,var(--nf-surface));color:#b91c1c}.badge.priority-high,.badge.severity-high,.badge.risk-high{background:color-mix(in srgb,#f97316 13%,var(--nf-surface));color:#c2410c}.badge.severity-medium,.badge.risk-medium{background:color-mix(in srgb,#f59e0b 12%,var(--nf-surface));color:#a16207}.badge.severity-low,.badge.risk-low,.badge.outcome-success{background:color-mix(in srgb,#10b981 12%,var(--nf-surface));color:#047857}.badge.outcome-failed,.badge.outcome-denied{background:color-mix(in srgb,#ef4444 10%,var(--nf-surface));color:#b91c1c}.badge.outcome-pending{background:color-mix(in srgb,#f59e0b 10%,var(--nf-surface));color:#a16207}.filter-grid{display:grid;grid-template-columns:2fr repeat(5,minmax(130px,1fr)) auto;gap:10px;align-items:end}.filter-grid label{display:grid;gap:6px}.filter-grid label>span{font-size:12px;font-weight:800;color:var(--nf-muted)}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.support-layout{grid-template-columns:1fr}.privacy-admin-actions{width:100%;justify-content:flex-start}.privacy-admin-item{flex-direction:column}.privacy-admin-actions input{flex:1}}
@media(max-width:700px){.privacy-request-item,.support-ticket-row,.incident-row,.audit-compact-list>article{align-items:flex-start;flex-direction:column}.privacy-request-actions,.privacy-request-actions form,.privacy-request-actions .btn,.privacy-admin-actions,.privacy-admin-actions select,.privacy-admin-actions input,.privacy-admin-actions .btn{width:100%}.support-ticket-row>div:last-child,.incident-row>div:last-child{align-items:flex-start;flex-direction:row}.support-message{max-width:100%}.filter-grid{grid-template-columns:1fr}.governance-summary-grid{grid-template-columns:1fr 1fr}.master-support-thread{min-height:260px}}
@media(max-width:460px){.governance-summary-grid{grid-template-columns:1fr}.privacy-overview-grid{grid-template-columns:1fr}}
.incident-notification-panel{display:grid;gap:14px;padding:16px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface-soft)}
.incident-notification-panel h3{margin:0}.check-row{display:flex!important;align-items:flex-start;gap:10px!important}.check-row input{width:18px!important;height:18px!important;min-height:18px!important;flex:0 0 18px;margin-top:2px}
/* v0.43.1 — estornos, dívidas editáveis e Central de Atendimento ampliada */
.btn-warning{background:color-mix(in srgb,#f59e0b 16%,var(--nf-surface));border-color:color-mix(in srgb,#f59e0b 34%,var(--nf-border));color:#a16207}
.btn-warning:hover{background:color-mix(in srgb,#f59e0b 23%,var(--nf-surface));color:#854d0e}
.loan-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.loan-card-actions form{margin:0}.loan-card-actions .btn{min-height:34px}
.loan-edit-lock{display:grid;gap:5px;padding:12px 14px;border:1px solid color-mix(in srgb,#f59e0b 24%,var(--nf-border));border-radius:14px;background:color-mix(in srgb,#f59e0b 5%,var(--nf-surface))}
.loan-installment-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.reversal-history-list{display:grid;gap:10px}.reversal-history-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--nf-border);border-radius:14px;background:var(--nf-surface-soft)}
.reversal-history-item>div{display:grid;gap:4px}.reversal-history-item small{color:var(--nf-muted)}
.plan-full-details{margin:14px 0;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface-soft);overflow:hidden}
.plan-full-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;cursor:pointer;color:var(--nf-text);font-weight:850}
.plan-full-details>summary::-webkit-details-marker{display:none}.plan-full-details>summary strong{color:var(--nf-primary);font-size:12px}
.plan-full-details[open]>summary{border-bottom:1px solid var(--nf-border);background:var(--nf-surface)}
.plan-feature-groups{display:grid;gap:18px;padding:16px}.plan-feature-groups section{display:grid;gap:10px}.plan-feature-groups h3,.plan-limit-table-complete h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--nf-muted)}
.plan-feature-detail-list{display:grid;gap:8px}.plan-feature-detail-list article{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;align-items:flex-start}.plan-feature-detail-list .nf-icon{width:17px;height:17px;color:#059669;margin-top:2px}.plan-feature-detail-list article>div{display:grid;gap:2px}.plan-feature-detail-list strong{font-size:13px;color:var(--nf-text)}.plan-feature-detail-list small{font-size:11px;line-height:1.4;color:var(--nf-muted)}
.plan-limit-table-complete{margin:0 16px 16px;padding-top:14px;border-top:1px solid var(--nf-border)}
.support-overview-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px}.support-create-card,.support-guidance-card{min-width:0}.support-guidance-steps{display:grid;gap:10px}.support-guidance-steps p{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 10px;margin:0;padding:12px;border:1px solid var(--nf-border);border-radius:14px;background:var(--nf-surface-soft)}.support-guidance-steps p>span{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--nf-primary-soft);color:var(--nf-primary);font-weight:900}.support-guidance-steps small{color:var(--nf-muted);line-height:1.4}.support-upload-field small{font-weight:500;color:var(--nf-muted)}
.support-ticket-list.enhanced .support-ticket-row{padding:16px}.support-ticket-code{color:var(--nf-primary);font-size:11px;font-weight:900;letter-spacing:.05em}.support-open-label{color:var(--nf-primary);font-size:12px;font-weight:800}
.support-thread.enhanced{min-height:180px}.support-attachment-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.support-attachment-list a{display:flex;align-items:center;gap:8px;max-width:100%;padding:9px 11px;border:1px solid var(--nf-border);border-radius:12px;background:var(--nf-surface);color:var(--nf-text);text-decoration:none}.support-attachment-list a:hover{border-color:color-mix(in srgb,var(--nf-primary) 35%,var(--nf-border))}.support-attachment-list a>div{display:grid;gap:1px;min-width:0}.support-attachment-list strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-attachment-list small{font-size:10px;color:var(--nf-muted)}
.support-portal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.support-portal-heading h2{margin:0 0 7px;font-size:30px}.support-portal-heading p{margin:0}.support-portal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.support-portal-panel{padding:20px;border:1px solid var(--nf-border);border-radius:20px;background:var(--nf-surface);box-shadow:var(--nf-shadow-sm)}
.support-staff-body{margin:0;min-height:100vh;background:var(--nf-bg);color:var(--nf-text);font-family:var(--nf-font)}.support-staff-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;border-bottom:1px solid var(--nf-border);background:color-mix(in srgb,var(--nf-surface) 94%,transparent);backdrop-filter:blur(14px)}.support-staff-brand{display:flex;align-items:center;gap:11px;color:var(--nf-text);text-decoration:none}.support-staff-brand>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff;font-weight:900}.support-staff-brand>div{display:grid;gap:1px}.support-staff-brand small{color:var(--nf-muted)}.support-staff-header nav{display:flex;align-items:center;gap:12px}.support-staff-header nav>a{color:var(--nf-text);font-weight:800;text-decoration:none}.support-staff-header form{margin:0}.support-staff-main{width:min(1380px,calc(100% - 32px));margin:0 auto;padding:28px 0 50px}.support-staff-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px;border:1px solid var(--nf-border);border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 7%,var(--nf-surface)),color-mix(in srgb,var(--nf-accent) 6%,var(--nf-surface)))}.support-staff-hero h1{margin:0 0 6px;font-size:clamp(28px,4vw,42px)}.support-staff-user{display:grid;gap:2px;text-align:right}.support-staff-user small{color:var(--nf-muted)}.support-staff-ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.support-staff-ticket-card{display:grid;gap:10px;padding:16px;border:1px solid var(--nf-border);border-left-width:4px;border-radius:17px;background:var(--nf-surface);color:var(--nf-text);text-decoration:none;transition:.17s ease}.support-staff-ticket-card:hover{transform:translateY(-2px);box-shadow:var(--nf-shadow-sm)}.support-staff-ticket-card.priority-urgent{border-left-color:#ef4444}.support-staff-ticket-card.priority-high{border-left-color:#f97316}.support-staff-ticket-card.priority-normal{border-left-color:var(--nf-primary)}.support-staff-ticket-card.priority-low{border-left-color:#94a3b8}.support-staff-ticket-card h3,.support-staff-ticket-card p{margin:0}.support-staff-ticket-card p,.support-staff-ticket-card small{color:var(--nf-muted)}.support-staff-ticket-card>div:last-child,.support-staff-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.support-staff-ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,340px);gap:18px;align-items:start}.support-staff-sidebar{position:sticky;top:88px}
.support-agent-admin-grid{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:18px;align-items:start}.support-agent-create-panel{padding:18px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface-soft)}.support-agent-create-panel h3{margin:0}.support-agent-list{display:grid;gap:12px}.support-agent-card{padding:16px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface)}.support-agent-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.support-agent-card-head>div{display:grid;gap:3px}.support-agent-card-head small{color:var(--nf-muted)}
@media(max-width:900px){.support-overview-grid,.support-portal-grid,.support-staff-ticket-layout,.support-agent-admin-grid{grid-template-columns:1fr}.support-staff-sidebar{position:static}.support-staff-header{padding:10px 14px}.support-staff-main{width:min(100% - 20px,1380px)}.support-staff-hero{align-items:flex-start;flex-direction:column}.support-staff-user{text-align:left}}
@media(max-width:620px){.loan-card-actions,.loan-card-actions .btn,.loan-card-actions form,.loan-installment-actions,.loan-installment-actions .btn,.loan-installment-actions form{width:100%}.reversal-history-item{flex-direction:column}.support-portal-heading{align-items:flex-start;flex-direction:column}.support-portal-heading h2{font-size:25px}.support-staff-header nav>a{display:none}.support-staff-ticket-top,.support-staff-ticket-card>div:last-child{align-items:flex-start;flex-direction:column}.plan-full-details>summary{align-items:flex-start;flex-direction:column}}
.support-portal-body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--nf-primary) 10%,transparent),transparent 28%),radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--nf-accent) 10%,transparent),transparent 30%),var(--nf-bg);color:var(--nf-text);font-family:var(--nf-font)}
.support-portal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);border-bottom:1px solid var(--nf-border);background:color-mix(in srgb,var(--nf-surface) 93%,transparent);backdrop-filter:blur(14px)}
.support-portal-main{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:clamp(28px,5vw,64px) 0}
.support-portal-main>.auth-heading,.support-portal-main>form,.support-portal-main>.auth-footer-links,.support-portal-main>.notice{width:min(520px,100%);margin-left:auto;margin-right:auto}
.support-portal-main>.auth-heading{padding:24px 24px 0;border:1px solid var(--nf-border);border-bottom:0;border-radius:22px 22px 0 0;background:var(--nf-surface)}
.support-portal-main>.auth-heading+form{margin-top:0;padding:20px 24px 24px;border:1px solid var(--nf-border);border-top:0;border-radius:0 0 22px 22px;background:var(--nf-surface);box-shadow:var(--nf-shadow-sm)}
.support-portal-main>.auth-footer-links{text-align:center;margin-top:16px}
@media(max-width:620px){.support-portal-header{padding:10px 12px}.support-portal-header>.btn{padding-inline:10px;font-size:11px}.support-portal-main{width:min(100% - 18px,1120px);padding-top:22px}}
/* v0.44.0 — monitoramento externo, suporte revisado e exclusão protegida de dívidas */
.support-staff-body{background:linear-gradient(180deg,color-mix(in srgb,var(--nf-primary) 3%,var(--nf-bg)),var(--nf-bg));}
.support-staff-header{box-shadow:0 8px 28px rgba(15,23,42,.05)}
.support-staff-main>.alert{margin-bottom:16px}
.support-staff-main .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.support-staff-main .filters-grid{grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(150px,1fr)) auto}
.support-staff-ticket-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.support-staff-ticket-card{min-height:178px;align-content:start}
.support-staff-ticket-card h3{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.support-staff-ticket-card>div:last-child{margin-top:auto;padding-top:9px;border-top:1px solid var(--nf-border)}
.support-staff-ticket-layout>.support-thread{min-height:420px;padding:18px}
.support-staff-sidebar{overflow:hidden}
.support-staff-sidebar .card-header{margin-bottom:4px}
.support-staff-body input,.support-staff-body select,.support-staff-body textarea{width:100%}
.support-staff-body textarea{min-height:140px}
.support-staff-body .support-message{box-shadow:none}
.support-staff-body .support-message.is-support{background:color-mix(in srgb,var(--nf-primary) 5%,var(--nf-surface))}
.support-staff-body .support-message.is-internal{background:color-mix(in srgb,#f59e0b 8%,var(--nf-surface))}
.loan-delete-menu{position:relative}
.loan-delete-menu>summary{list-style:none;cursor:pointer}
.loan-delete-menu>summary::-webkit-details-marker{display:none}
.loan-delete-popover{position:absolute;right:0;top:calc(100% + 9px);z-index:30;width:min(360px,calc(100vw - 34px));display:grid;gap:10px;padding:15px;border:1px solid color-mix(in srgb,#ef4444 20%,var(--nf-border));border-radius:16px;background:var(--nf-surface);box-shadow:var(--nf-shadow-lg)}
.loan-delete-popover p{margin:0;color:var(--nf-muted);line-height:1.5}
.loan-delete-popover form{display:grid;gap:10px}.loan-delete-popover label{display:grid;gap:6px}.loan-delete-guidance{margin-bottom:16px}
.external-monitoring-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.external-monitor-card{display:grid;gap:5px;min-height:116px;padding:15px;border:1px solid var(--nf-border);border-radius:17px;background:var(--nf-surface)}
.external-monitor-card>span{font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--nf-muted)}
.external-monitor-card>strong{font-size:24px;line-height:1.15;color:var(--nf-text)}
.external-monitor-card>small{color:var(--nf-muted);line-height:1.4}
.external-monitor-card.status-healthy{border-color:color-mix(in srgb,#10b981 28%,var(--nf-border));background:color-mix(in srgb,#10b981 4%,var(--nf-surface))}
.external-monitor-card.status-warning{border-color:color-mix(in srgb,#f59e0b 28%,var(--nf-border));background:color-mix(in srgb,#f59e0b 4%,var(--nf-surface))}
.external-monitor-card.status-critical{border-color:color-mix(in srgb,#ef4444 30%,var(--nf-border));background:color-mix(in srgb,#ef4444 5%,var(--nf-surface))}
.external-monitoring-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px;align-items:start}
.external-monitoring-config,.external-monitoring-endpoints{padding:17px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface-soft)}
.external-monitoring-config .form-grid{margin-top:10px}
.monitor-endpoint{display:grid;gap:6px;margin-bottom:12px;padding:13px;border:1px solid var(--nf-border);border-radius:14px;background:var(--nf-surface)}
.monitor-endpoint>span{font-weight:850;color:var(--nf-text)}
.monitor-endpoint code{overflow-wrap:anywhere;font-size:11px;color:var(--nf-primary)}
.monitor-endpoint small{color:var(--nf-muted)}
@media(max-width:1100px){
.support-staff-ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.support-staff-main .grid-4,.external-monitoring-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.support-staff-main .filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.support-staff-main .filters-grid .btn{width:100%}
.external-monitoring-layout{grid-template-columns:1fr}
}
@media(max-width:700px){
.support-staff-header{align-items:flex-start}.support-staff-header nav{gap:7px}
.support-staff-ticket-grid,.support-staff-main .grid-4,.external-monitoring-summary{grid-template-columns:1fr}
.support-staff-main .filters-grid{grid-template-columns:1fr}
.support-staff-ticket-layout>.support-thread{min-height:260px;padding:13px}
.loan-delete-menu{width:100%}.loan-delete-menu>summary{width:100%}.loan-delete-popover{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:70vh;overflow:auto}
}
/* v1.0.0 — versão comercial estável, acabamento visual e operação formal */
:root {
--nf-commercial-blue: #075fd8;
--nf-commercial-aqua: #05bfa1;
--nf-commercial-ink: #0b1730;
--nf-commercial-glow: 0 24px 70px rgba(15, 43, 86, .10);
}
body:not(.auth-body-v17) {
background:
radial-gradient(circle at 6% 2%, rgba(5,191,161,.08), transparent 22%),
radial-gradient(circle at 94% 0%, rgba(7,95,216,.09), transparent 26%),
var(--nf-bg);
}
.topbar {
background: color-mix(in srgb, var(--nf-surface) 90%, transparent);
backdrop-filter: blur(18px) saturate(130%);
border-bottom-color: color-mix(in srgb, var(--nf-primary) 12%, var(--nf-border));
}
.sidebar {
background:
linear-gradient(180deg, color-mix(in srgb,var(--nf-sidebar-bg) 98%,var(--nf-primary) 2%), var(--nf-sidebar-bg));
border-right-color: color-mix(in srgb, var(--nf-primary) 10%, var(--nf-border));
}
.sidebar-logo .brand-mark-inline,
.brand-mark-inline {
box-shadow: 0 12px 28px rgba(0,87,217,.20);
}
.sidebar-nav a,
.nav-more summary {
border: 1px solid transparent;
transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.sidebar-nav a:hover,
.nav-more summary:hover {
transform: translateX(2px);
border-color: color-mix(in srgb,var(--nf-primary) 12%,transparent);
background: color-mix(in srgb,var(--nf-primary-soft) 70%,transparent);
}
.sidebar-nav a.is-active {
box-shadow: inset 3px 0 0 var(--nf-accent), 0 8px 24px rgba(0,87,217,.08);
}
.card,
.metric-card,
.account-card,
.module-hero,
.dashboard-hero {
border-color: color-mix(in srgb,var(--nf-primary) 8%,var(--nf-border));
box-shadow: var(--nf-shadow-soft);
}
.card,
.metric-card,
.account-card {
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover,
.metric-card:hover,
.account-card:hover {
border-color: color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border));
box-shadow: var(--nf-commercial-glow);
}
.module-hero,
.dashboard-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 94% 15%, rgba(5,191,161,.14), transparent 27%),
radial-gradient(circle at 8% 110%, rgba(7,95,216,.10), transparent 38%),
var(--nf-surface);
}
.module-hero::after,
.dashboard-hero::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
right: -72px;
bottom: -84px;
border-radius: 999px;
border: 24px solid color-mix(in srgb,var(--nf-accent) 9%,transparent);
pointer-events: none;
}
.btn {
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: linear-gradient(125deg, var(--nf-commercial-blue), var(--nf-commercial-aqua));
box-shadow: 0 12px 28px rgba(0,87,217,.16);
}
.btn-primary:hover { filter: saturate(1.08); box-shadow: 0 16px 34px rgba(0,87,217,.22); }
.btn-outline { background: color-mix(in srgb,var(--nf-surface) 94%,transparent); }
input, select, textarea, .mp-field {
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus, .mp-field:focus-within {
border-color: color-mix(in srgb,var(--nf-primary) 70%,var(--nf-border));
box-shadow: 0 0 0 4px color-mix(in srgb,var(--nf-primary) 11%,transparent);
}
.table-wrap {
border: 1px solid var(--nf-border);
border-radius: 18px;
background: var(--nf-surface);
}
.table-wrap table th { background: color-mix(in srgb,var(--nf-primary-soft) 35%,var(--nf-surface)); }
.table-wrap table tr:last-child td { border-bottom: 0; }
.table-wrap table tbody tr:hover { background: color-mix(in srgb,var(--nf-primary-soft) 28%,transparent); }
/* Cadastro: detalhes de planos */
.register-plan-heading {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 12px;
align-items: end;
}
.register-plan-details-button { min-height: 48px; white-space: nowrap; }
.register-plans-page { width: 100%; display: grid; gap: 22px; }
.register-plans-hero {
display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
padding: 24px; border: 1px solid var(--nf-border); border-radius: 24px;
background: linear-gradient(135deg,color-mix(in srgb,var(--nf-primary-soft) 60%,var(--nf-surface)),color-mix(in srgb,var(--nf-accent-soft) 55%,var(--nf-surface)));
}
.register-plans-hero h2 { margin: 0 0 8px; font-size: clamp(28px,4vw,42px); letter-spacing: -1.3px; }
.register-plans-hero p { margin: 0; }
.register-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.register-plan-card {
position: relative; display: grid; gap: 18px; padding: 22px;
border: 1px solid var(--nf-border); border-radius: 24px; background: var(--nf-surface);
box-shadow: var(--nf-shadow-soft);
}
.register-plan-card.is-highlighted { border-color: color-mix(in srgb,var(--nf-primary) 40%,var(--nf-border)); box-shadow: 0 20px 52px rgba(0,87,217,.12); }
.register-plan-recommended { position: absolute; right: 18px; top: -12px; padding: 7px 11px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); font-size: 11px; font-weight: 900; }
.register-plan-card-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.register-plan-name { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.6px; }
.register-plan-card-head p { margin: 7px 0 0; color: var(--nf-muted); line-height: 1.55; }
.register-plan-price { text-align: right; flex: 0 0 auto; }
.register-plan-price strong { display: block; font-size: 23px; }
.register-plan-price small { display: block; color: var(--nf-muted); margin-top: 3px; }
.register-plan-summary { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.register-plan-summary li { display: flex; gap: 9px; align-items: flex-start; color: var(--nf-text); font-weight: 720; }
.register-plan-summary li span { color: var(--nf-success); font-weight: 900; }
.register-plan-details { border: 1px solid var(--nf-border); border-radius: 18px; overflow: hidden; background: var(--nf-surface-soft); }
.register-plan-details > summary { cursor: pointer; padding: 14px 16px; font-weight: 850; color: var(--nf-primary); }
.register-plan-detail-content { display: grid; gap: 18px; padding: 0 16px 16px; }
.register-plan-detail-content h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--nf-muted); }
.register-plan-feature-list { display: grid; gap: 8px; }
.register-plan-feature-list > div { padding: 11px; border-radius: 13px; background: var(--nf-surface); }
.register-plan-feature-list strong, .register-plan-feature-list small { display: block; }
.register-plan-feature-list small { color: var(--nf-muted); margin-top: 3px; line-height: 1.45; }
.register-plan-limit-list { display: grid; gap: 8px; }
.register-plan-limit-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--nf-surface); }
.register-plans-note { padding: 18px 20px; border-radius: 18px; background: var(--nf-accent-soft); border: 1px solid color-mix(in srgb,var(--nf-accent) 22%,var(--nf-border)); }
.register-plans-note p { margin: 4px 0 0; color: var(--nf-muted); }
/* Backup administrativo */
.commercial-backup-center { overflow: hidden; }
.backup-security-note { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.backup-security-note > div { padding: 16px; border: 1px solid var(--nf-border); border-radius: 16px; background: color-mix(in srgb,var(--nf-accent-soft) 42%,var(--nf-surface)); }
.backup-security-note strong, .backup-security-note span { display: block; }
.backup-security-note span { color: var(--nf-muted); margin-top: 5px; line-height: 1.5; }
.backup-status-queued, .backup-status-running { background: var(--nf-warning-soft); color: var(--nf-warning); }
.backup-status-completed { background: var(--nf-success-soft); color: var(--nf-success); }
.backup-status-failed { background: var(--nf-danger-soft); color: var(--nf-danger); }
.backup-status-expired { background: var(--nf-surface-soft); color: var(--nf-muted); }
.backup-error-message { display: block; max-width: 440px; margin-top: 6px; color: var(--nf-danger); }
.backup-checksum { font-size: 12px; }
/* Documentação comercial */
.commercial-release-hero { min-height: 190px; }
.commercial-doc-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.commercial-doc-card { display: flex; gap: 14px; align-items: flex-start; }
.commercial-doc-card > span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; background: var(--nf-primary-soft); color: var(--nf-primary); }
.commercial-doc-card h2 { margin: 0; font-size: 19px; }
.commercial-doc-card p { color: var(--nf-muted); line-height: 1.55; }
.commercial-doc-card a { color: var(--nf-primary); font-weight: 850; }
.commercial-doc-columns, .sla-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.commercial-doc-columns article, .sla-grid article { padding: 18px; border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface-soft); }
.commercial-doc-columns ul { margin: 10px 0 0; padding-left: 20px; color: var(--nf-muted); line-height: 1.7; }
.training-track-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.training-track-grid article { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--nf-border); border-radius: 18px; }
.training-track-grid article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); font-weight: 900; }
.training-track-grid p { color: var(--nf-muted); margin: 5px 0 0; }
.sla-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sla-grid strong, .sla-grid span { display: block; }
.sla-grid span { margin-top: 8px; font-weight: 800; }
.sla-grid p { color: var(--nf-muted); line-height: 1.55; }
.sla-critical { border-top: 4px solid var(--nf-danger) !important; }
.sla-high { border-top: 4px solid var(--nf-warning) !important; }
.sla-medium { border-top: 4px solid var(--nf-primary) !important; }
.sla-low { border-top: 4px solid var(--nf-success) !important; }
.commercial-release-checklist { display: grid; gap: 10px; padding-left: 24px; }
.commercial-release-checklist li { padding: 12px 14px; border-radius: 14px; background: var(--nf-surface-soft); line-height: 1.55; }
html[data-theme="dark"] .register-plan-card,
html[data-theme="dark"] .register-plan-feature-list > div,
html[data-theme="dark"] .register-plan-limit-list > div,
html[data-theme="dark"] .table-wrap { background: var(--nf-surface); }
@media (max-width: 1180px) {
.commercial-doc-grid, .sla-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.backup-security-note { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.register-plan-heading, .register-plan-grid, .commercial-doc-columns, .commercial-doc-grid, .training-track-grid, .sla-grid { grid-template-columns: 1fr; }
.register-plan-details-button { width: 100%; }
.register-plans-hero, .register-plan-card-head { flex-direction: column; }
.register-plan-price { text-align: left; }
.commercial-backup-center .card-header { align-items: stretch; flex-direction: column; }
.commercial-backup-center .card-header form, .commercial-backup-center .card-header button { width: 100%; }
}
/* v1.0.1 — ciclos mensal/anual e manutenção Master */
.billing-cycle-switch {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px;
border: 1px solid var(--border-color, #d9e3ef);
border-radius: 999px;
background: var(--surface, #fff);
box-shadow: 0 8px 24px rgba(16, 35, 63, .06);
}
.billing-cycle-switch button,
.billing-cycle-switch a {
appearance: none;
border: 0;
border-radius: 999px;
padding: 10px 18px;
background: transparent;
color: var(--text-muted, #64748b);
font: inherit;
font-weight: 800;
text-decoration: none;
cursor: pointer;
}
.billing-cycle-switch button small,
.billing-cycle-switch a small { margin-left: 5px; font-weight: 700; opacity: .8; }
.billing-cycle-switch button.is-active,
.billing-cycle-switch a.is-active {
color: #fff;
background: linear-gradient(135deg, #1267df, #05b989);
box-shadow: 0 8px 20px rgba(18, 103, 223, .22);
}
.plan-cycle-editor {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--border-color, #d9e3ef);
border-radius: 16px;
background: rgba(241, 245, 249, .65);
}
.plan-cycle-editor.is-disabled { opacity: .65; }
.master-danger-maintenance > summary { list-style: none; display: inline-flex; }
.master-danger-maintenance > summary::-webkit-details-marker { display: none; }
.master-danger-maintenance[open] {
min-width: min(420px, 80vw);
padding: 12px;
border: 1px solid rgba(220, 38, 38, .28);
border-radius: 16px;
background: rgba(254, 242, 242, .92);
}
@media (max-width: 720px) {
.billing-cycle-switch { display: flex; width: 100%; }
.billing-cycle-switch button,
.billing-cycle-switch a { flex: 1; text-align: center; }
.master-danger-maintenance[open] { min-width: 0; width: 100%; }
}
/* v1.0.2 — PWA instalável e recuperação administrativa reforçada */
.pwa-install-banner{position:fixed;z-index:1200;right:22px;bottom:22px;width:min(520px,calc(100vw - 32px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border:1px solid color-mix(in srgb,var(--nf-primary) 22%,var(--nf-border));border-radius:20px;background:color-mix(in srgb,var(--nf-surface) 94%,transparent);box-shadow:0 24px 70px rgba(15,23,42,.22);backdrop-filter:blur(18px)}
.pwa-install-banner[hidden],.pwa-install-modal[hidden],.pwa-profile-install[hidden]{display:none!important}.pwa-install-icon{width:52px;height:52px;border-radius:15px;overflow:hidden;display:grid;place-items:center;background:#fff;border:1px solid var(--nf-border);box-shadow:0 10px 24px rgba(15,23,42,.10)}.pwa-install-icon img{width:100%;height:100%;object-fit:cover}.pwa-install-copy{display:grid;gap:3px;min-width:0}.pwa-install-copy strong{font-size:15px;color:var(--nf-text)}.pwa-install-copy span{font-size:12px;line-height:1.45;color:var(--nf-muted)}.pwa-install-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.pwa-install-modal{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px}.pwa-install-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.56);backdrop-filter:blur(5px);cursor:default}.pwa-install-dialog{position:relative;width:min(520px,100%);padding:24px;border:1px solid var(--nf-border);border-radius:24px;background:var(--nf-surface);box-shadow:0 28px 90px rgba(15,23,42,.30)}.pwa-install-dialog-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}.pwa-install-dialog-head h2{margin:2px 0 0;font-size:22px;line-height:1.15}.pwa-ios-steps{display:grid;gap:12px;margin:22px 0;padding-left:24px;color:var(--nf-text)}.pwa-ios-steps li{padding-left:5px;line-height:1.55}.pwa-profile-install{width:100%;font:inherit;text-align:left;cursor:pointer}.pwa-profile-install>b{margin-left:auto}
.master-danger-maintenance .status-paid{background:color-mix(in srgb,var(--nf-success) 14%,transparent);color:var(--nf-success)}.master-maintenance-filter{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.master-maintenance-filter label{min-width:180px}
@media(max-width:720px){.pwa-install-banner{left:16px;right:16px;bottom:16px;width:auto;grid-template-columns:auto minmax(0,1fr)}.pwa-install-actions{grid-column:1/-1;justify-content:stretch}.pwa-install-actions .btn{flex:1}.pwa-install-dialog{padding:20px}.pwa-install-dialog-head{grid-template-columns:auto minmax(0,1fr)}.pwa-install-dialog-head>.icon-btn{position:absolute;right:14px;top:14px}.pwa-install-dialog-head h2{font-size:19px;padding-right:26px}}
/* v1.0.3 — hotfix da manutenção Master de dívidas */
.master-danger-maintenance .master-confirmation-fill {
align-self: flex-start;
margin-top: -4px;
}
/* NowBusiness v1.1.0 — consistência visual, planos e conversão */
.content > section + section,
.content > article + article,
.content > section + article,
.content > article + section { margin-top: var(--nf-section-gap); }
.card,
.hero-card,
.dashboard-hero,
.module-hero,
.empty-state { padding: var(--nf-card-padding); }
.grid-2,
.grid-3,
.grid-4,
.plan-grid,
.plan-editor-grid,
.feature-grid,
.compact-grid { gap: var(--nf-grid-gap); }
.card-header { margin-bottom: var(--nf-space-4); }
.card-header + .muted,
.card-header + p { margin-top: 0; }
.card > :last-child,
.metric-card > :last-child,
.empty-mini > :last-child { margin-bottom: 0; }
.form-stack { gap: var(--nf-space-4); margin-top: var(--nf-space-5); }
.form-stack:first-child { margin-top: 0; }
.mt-24 { margin-top: var(--nf-section-gap); }
.mt-20 { margin-top: var(--nf-space-5); }
.mt-16 { margin-top: var(--nf-space-4); }
.mt-8 { margin-top: var(--nf-space-2); }
.mb-16 { margin-bottom: var(--nf-space-4); }
.trial-policy-card [data-trial-target-field][hidden],
.trial-policy-card [data-trial-deletion-field][hidden] { display: none !important; }
.locked-feature-showcase { overflow: hidden; }
.locked-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nf-grid-gap); }
.locked-feature-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--nf-border); border-radius: var(--nf-radius-md); background: var(--nf-surface-soft); }
.locked-feature-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: var(--nf-warning-soft); }
.locked-feature-card strong,
.locked-feature-card small { display: block; }
.locked-feature-card p { margin: 5px 0 8px; color: var(--nf-muted); font-size: 13px; line-height: 1.45; }
.locked-feature-card small { color: var(--nf-primary); font-weight: 800; }
.upgrade-callout { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border-radius: var(--nf-radius-md); background: linear-gradient(135deg, var(--nf-primary-soft), var(--nf-accent-soft)); border: 1px solid color-mix(in srgb, var(--nf-primary) 22%, var(--nf-border)); }
.upgrade-callout strong,
.upgrade-callout span { display: block; }
.upgrade-callout span { margin-top: 4px; color: var(--nf-muted); }
.inline-info { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--nf-radius-md); border: 1px solid color-mix(in srgb, var(--nf-primary) 20%, var(--nf-border)); background: var(--nf-primary-soft); }
.inline-info strong { color: var(--nf-primary); }
.inline-info span { color: var(--nf-muted); }
@media (max-width: 1100px) {
.locked-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.locked-feature-grid { grid-template-columns: 1fr; }
.upgrade-callout { align-items: stretch; flex-direction: column; }
.upgrade-callout .btn { width: 100%; }
}
/* ==========================================================================
NowBusiness 2.0 — Mega Inteligente
Padronização visual, inteligência financeira e Central de Mercado
========================================================================== */
:root {
--nf-layout-gap: 24px;
--nf-card-padding: clamp(18px, 2vw, 26px);
--nf-card-radius: 22px;
}
/* Identidade visual real no sistema */
.sidebar-logo--image { min-width: 0; display: flex; align-items: center; }
.sidebar-logo-image { width: 178px; max-width: 100%; height: auto; display: block; }
.sidebar-logo-mark { display: none; width: 42px; height: 42px; }
.app-shell.sidebar-collapsed .sidebar-logo-image,
.sidebar.is-collapsed .sidebar-logo-image { display: none; }
.app-shell.sidebar-collapsed .sidebar-logo-mark,
.sidebar.is-collapsed .sidebar-logo-mark { display: block; }
/* Espaçamento consistente entre módulos e cards */
.card,
.metric-card,
.module-hero,
.investment-balance-card,
.smart-finance-hub,
.market-status-strip,
.market-disclaimer { border-radius: var(--nf-card-radius); }
.card { padding: var(--nf-card-padding); }
.grid-2, .grid-3, .grid-4, .dashboard-grid, .investment-overview-grid,
.preference-switch-grid, .insight-action-grid { gap: var(--nf-layout-gap); }
.card-header { gap: 18px; margin-bottom: 20px; }
.card-header h2 { margin-top: 3px; }
.form-grid-2, .form-grid-3 { gap: 18px; }
.form-footer { margin-top: 22px; gap: 12px; }
.section-divider { margin: 28px 0; }
/* Central inteligente do painel */
.smart-finance-hub {
position: relative;
overflow: hidden;
padding: clamp(22px, 3vw, 32px);
border: 1px solid color-mix(in srgb, var(--nf-primary) 18%, var(--nf-border));
background:
radial-gradient(circle at 95% 4%, color-mix(in srgb, var(--nf-accent) 16%, transparent), transparent 28%),
radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--nf-primary) 11%, transparent), transparent 32%),
var(--nf-surface);
box-shadow: 0 22px 60px rgba(15, 23, 42, .08);
}
.smart-finance-hub__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.smart-finance-hub__header h2 { margin: 0 0 7px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.smart-finance-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.smart-metric {
min-width: 0; padding: 18px; border: 1px solid var(--nf-border); border-radius: 18px;
background: color-mix(in srgb, var(--nf-surface) 94%, transparent);
box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
}
.smart-metric span, .smart-metric small { display: block; color: var(--nf-muted); }
.smart-metric span { font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.smart-metric strong { display: block; margin: 9px 0 5px; font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -.035em; }
.smart-metric.is-positive { border-color: color-mix(in srgb, var(--nf-success) 28%, var(--nf-border)); }
.smart-metric.is-critical { border-color: color-mix(in srgb, var(--nf-danger) 34%, var(--nf-border)); background: color-mix(in srgb, var(--nf-danger-soft) 42%, var(--nf-surface)); }
.smart-metric.is-warning { border-color: color-mix(in srgb, var(--nf-warning) 34%, var(--nf-border)); background: color-mix(in srgb, var(--nf-warning-soft) 42%, var(--nf-surface)); }
.smart-metric.is-info { border-color: color-mix(in srgb, var(--nf-primary) 25%, var(--nf-border)); }
.smart-next-action {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
margin-top: 18px; padding: 20px; border-radius: 19px;
border: 1px solid color-mix(in srgb, var(--nf-primary) 22%, var(--nf-border));
background: linear-gradient(135deg, color-mix(in srgb, var(--nf-primary-soft) 76%, var(--nf-surface)), color-mix(in srgb, var(--nf-accent-soft) 64%, var(--nf-surface)));
}
.smart-next-action__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--nf-surface); color: var(--nf-primary); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.smart-next-action__icon .nf-icon { width: 25px; height: 25px; }
.smart-next-action span { display: block; color: var(--nf-primary); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.smart-next-action h2, .smart-next-action h3 { margin: 4px 0 3px; }
.smart-next-action p { margin: 0; color: var(--nf-muted); line-height: 1.5; }
.smart-next-action.severity-critical { border-color: color-mix(in srgb, var(--nf-danger) 35%, var(--nf-border)); background: color-mix(in srgb, var(--nf-danger-soft) 55%, var(--nf-surface)); }
.smart-next-action.severity-warning { border-color: color-mix(in srgb, var(--nf-warning) 35%, var(--nf-border)); }
.smart-briefing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
.smart-briefing-card {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px;
padding: 15px; border: 1px solid var(--nf-border); border-radius: 17px; color: var(--nf-text);
background: color-mix(in srgb, var(--nf-surface) 94%, var(--nf-surface-soft)); text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.smart-briefing-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nf-primary) 35%, var(--nf-border)); box-shadow: 0 12px 32px rgba(15,23,42,.07); }
.smart-briefing-card strong, .smart-briefing-card small { display: block; }
.smart-briefing-card small { margin-top: 4px; color: var(--nf-muted); line-height: 1.45; }
.smart-briefing-card b { color: var(--nf-muted); font-size: 26px; font-weight: 500; }
.smart-briefing-card.severity-critical { border-left: 4px solid var(--nf-danger); }
.smart-briefing-card.severity-warning { border-left: 4px solid var(--nf-warning); }
.smart-briefing-card.severity-positive { border-left: 4px solid var(--nf-success); }
.smart-briefing-card.severity-info { border-left: 4px solid var(--nf-primary); }
/* Saúde financeira completa */
.health-hero--mega { background: linear-gradient(135deg, color-mix(in srgb, var(--nf-primary-soft) 70%, var(--nf-surface)), color-mix(in srgb, var(--nf-accent-soft) 65%, var(--nf-surface))); }
.health-snapshot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.health-snapshot-card { padding: 20px; border: 1px solid var(--nf-border); border-radius: 20px; background: var(--nf-surface); box-shadow: 0 12px 34px rgba(15,23,42,.055); }
.health-snapshot-card span, .health-snapshot-card small { display: block; color: var(--nf-muted); }
.health-snapshot-card span { font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.health-snapshot-card strong { display: block; margin: 10px 0 5px; font-size: clamp(21px, 2.3vw, 29px); overflow-wrap: anywhere; }
.health-snapshot-card.is-critical { border-top: 4px solid var(--nf-danger); }
.health-snapshot-card.is-warning { border-top: 4px solid var(--nf-warning); }
.health-snapshot-card.is-positive { border-top: 4px solid var(--nf-success); }
.health-snapshot-card.is-info { border-top: 4px solid var(--nf-primary); }
.health-next-action { margin-top: 24px; }
.smart-briefing-grid--health { margin-top: 0; }
.financial-tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.financial-tip-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; padding: 18px; border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface-soft); }
.financial-tip-card h3 { margin: 0 0 7px; }
.financial-tip-card p { margin: 0 0 11px; color: var(--nf-muted); line-height: 1.55; }
.financial-tip-card a { color: var(--nf-primary); font-weight: 850; text-decoration: none; }
/* Preferências de alerta */
.preference-switch-grid--mega { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preference-switch-grid--mega .preference-switch-card { min-height: 132px; align-items: flex-start; }
.preference-switch-grid--mega .switch-ui { margin-top: 2px; }
.master-market-toggle { max-width: 100%; min-height: auto; }
/* Central de Mercado */
.market-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #071b37, #063b75 58%, #007b68); color: #fff; }
.market-hero .page-kicker, .market-hero .muted { color: rgba(255,255,255,.78); }
.market-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.market-hero-orbit { width: 108px; height: 108px; display: grid; place-items: center; border-radius: 32px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); }
.market-hero-orbit .nf-icon { width: 58px; height: 58px; }
.market-status-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; padding: 1px; overflow: hidden; background: var(--nf-border); border: 1px solid var(--nf-border); }
.market-status-strip > div { padding: 17px 20px; background: var(--nf-surface); }
.market-status-strip span, .market-status-strip strong, .market-status-strip small { display: block; }
.market-status-strip span { color: var(--nf-muted); font-size: 12px; }
.market-status-strip strong { margin: 4px 0; }
.status-dot { display: inline-block!important; width: 9px; height: 9px; margin-right: 6px; border-radius: 99px; }
.status-dot.is-online { background: var(--nf-success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--nf-success) 16%, transparent); }
.market-quote-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.market-quote-card { min-width: 0; padding: 18px; border: 1px solid var(--nf-border); border-radius: 19px; background: linear-gradient(180deg, var(--nf-surface), var(--nf-surface-soft)); }
.market-quote-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.market-quote-card__top span { font-weight: 900; letter-spacing: .03em; }
.market-quote-card__top b { font-size: 12px; white-space: nowrap; }
.market-quote-card.is-up .market-quote-card__top b { color: var(--nf-success); }
.market-quote-card.is-down .market-quote-card__top b { color: var(--nf-danger); }
.market-quote-card.is-flat .market-quote-card__top b { color: var(--nf-muted); }
.market-quote-card > strong { display: block; margin: 18px 0 4px; font-size: clamp(23px, 2.4vw, 31px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.market-quote-card > small { display: block; min-height: 34px; color: var(--nf-muted); }
.market-quote-card footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nf-border); color: var(--nf-muted); font-size: 11px; }
.market-learning-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.market-learning-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; }
.market-learning-card h2 { margin: 2px 0 8px; font-size: 20px; }
.market-learning-card p { color: var(--nf-muted); line-height: 1.58; }
.market-learning-card a { color: var(--nf-primary); font-weight: 850; text-decoration: none; }
.market-disclaimer { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--nf-warning) 35%, var(--nf-border)); background: color-mix(in srgb, var(--nf-warning-soft) 50%, var(--nf-surface)); }
.market-disclaimer span { color: var(--nf-muted); line-height: 1.5; }
/* Master — configuração de mercado */
.master-market-settings code { padding: 2px 6px; border-radius: 6px; background: var(--nf-surface-soft); }
.badge-success { color: var(--nf-success)!important; border-color: color-mix(in srgb, var(--nf-success) 35%, var(--nf-border))!important; }
.badge-warning { color: #9a6500!important; border-color: color-mix(in srgb, var(--nf-warning) 45%, var(--nf-border))!important; }
@media (max-width: 1200px) {
.smart-finance-metrics, .health-snapshot-grid, .market-quote-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.preference-switch-grid--mega { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
.smart-finance-hub__header { flex-direction: column; }
.smart-next-action { grid-template-columns: auto minmax(0,1fr); }
.smart-next-action .btn { grid-column: 1 / -1; width: 100%; }
.market-learning-grid, .market-status-strip { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
:root { --nf-layout-gap: 16px; --nf-card-padding: 18px; }
.smart-finance-metrics, .health-snapshot-grid, .market-quote-grid,
.smart-briefing-grid, .financial-tip-grid, .preference-switch-grid--mega { grid-template-columns: 1fr; }
.smart-finance-hub { padding: 18px; }
.smart-finance-hub__header .hero-actions, .market-hero .hero-actions { width: 100%; }
.smart-finance-hub__header .btn, .market-hero .btn { flex: 1 1 100%; }
.smart-next-action { grid-template-columns: 1fr; text-align: left; }
.market-hero-orbit { display: none; }
.market-disclaimer { flex-direction: column; }
.sidebar-logo-image { width: 164px; }
}
/* v2.0.1 — ajustes finos de identidade, mercado e formulários */
.sidebar-logo { min-width: 0; }
.sidebar-logo-image { max-width: min(186px, 100%); height: auto; }
.sidebar-logo-image--light { display: none; }
[data-theme="dark"] .sidebar-logo-image--dark { display: none; }
[data-theme="dark"] .sidebar-logo-image--light { display: block; }
[data-theme="light"] .sidebar-logo-image--dark { display: block; }
[data-theme="light"] .sidebar-logo-image--light { display: none; }
.sidebar[data-collapsed="true"] .sidebar-logo-image { display: none !important; }
.sidebar[data-collapsed="true"] .sidebar-logo-mark { display: block !important; }
.sidebar:not([data-collapsed="true"]) .sidebar-logo-mark { display: none; }
.market-hero .hero-actions { flex-wrap: wrap; }
.market-hero .btn-primary { color: #fff; }
.market-hero-secondary { color: #fff !important; border-color: rgba(255,255,255,.36) !important; background: rgba(255,255,255,.12) !important; }
.market-hero-secondary:hover { background: rgba(255,255,255,.18) !important; }
.market-customize-card { border: 1px solid color-mix(in srgb, var(--nf-primary) 16%, var(--nf-border)); }
.market-preferences-form { display: grid; gap: 22px; }
.market-pref-group { display: grid; gap: 12px; }
.market-pref-group__head h3 { margin: 0; }
.market-pref-group__head p { margin: 6px 0 0; color: var(--nf-muted); }
.market-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.market-chip { position: relative; display: inline-flex; }
.market-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.market-chip span {
display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
border-radius: 999px; border: 1px solid var(--nf-border); background: var(--nf-surface-soft); color: var(--nf-text);
font-weight: 800; font-size: 13px; transition: all .18s ease;
}
.market-chip input:checked + span, .market-chip.is-checked span {
background: linear-gradient(135deg, color-mix(in srgb, var(--nf-primary) 92%, white), color-mix(in srgb, var(--nf-accent) 82%, white));
color: #fff; border-color: transparent; box-shadow: 0 10px 26px rgba(7,95,216,.22);
}
.market-chip input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--nf-primary) 52%, white); outline-offset: 2px; }
.form-grid-2, .form-grid-3 { align-items: start; }
.form-grid-2 > label, .form-grid-3 > label, .form-stack > label {
display: grid; align-content: start; gap: 8px; min-width: 0;
}
.form-grid-2 input:not([type="checkbox"]), .form-grid-2 select, .form-grid-2 textarea,
.form-grid-3 input:not([type="checkbox"]), .form-grid-3 select, .form-grid-3 textarea,
.form-stack input:not([type="checkbox"]), .form-stack select, .form-stack textarea {
width: 100%; min-height: 48px;
}
.form-grid-2 textarea, .form-grid-3 textarea, .form-stack textarea { min-height: 120px; }
.form-grid-2 small, .form-grid-3 small, .form-stack small { line-height: 1.45; }
.checkbox-line { align-items: center; }
.auth-brand-panel-v17 { overflow: hidden; }
.auth-brand-panel-v17 .auth-brand-content { gap: 14px; }
.auth-brand-panel-v17 .auth-pill {
align-self: flex-start; max-width: 100%; white-space: normal; color: #eff6ff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18);
}
.auth-brand-panel-v17 h1 {
max-width: 12ch; font-size: clamp(44px, 5vw, 82px); line-height: .96; letter-spacing: -.055em; margin: 0;
}
.auth-brand-panel-v17 p { max-width: 58ch; }
.auth-brand-panel-v17 .nf-real-logo img { width: min(260px, 68vw); }
.auth-card-brand-mobile .nf-real-logo img { width: min(220px, 74vw); }
@media (max-width: 1024px) {
.auth-brand-panel-v17 h1 { max-width: none; font-size: clamp(38px, 6vw, 64px); }
}
@media (max-width: 680px) {
.market-chip-grid { gap: 8px; }
.market-chip span { min-height: 38px; padding: 0 12px; font-size: 12px; }
.auth-brand-panel-v17 h1 { font-size: clamp(34px, 11vw, 48px); }
.sidebar-logo-image { max-width: 156px; }
}
/* v2.0.2 — ajustes visuais adicionais, cadastro e central de mercado */
.register-brand-inline { display:inline-flex; align-items:center; margin-bottom: 8px; }
.register-brand-inline img { width:min(220px, 60vw); height:auto; display:block; }
.register-brand-inline--hero { margin-bottom: 2px; }
.register-plan-heading {
display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; align-items:start;
}
.register-plan-heading > label { display:grid; gap:8px; min-width:0; }
.register-plan-heading select, .register-plan-heading input { width:100%; min-height:48px; }
.register-plan-details-button { grid-column: 1 / -1; justify-self: start; }
.register-page-heading .muted { max-width: 70ch; }
.payment-method-options { align-items: stretch; }
.payment-method-option { min-height: 108px; }
.payment-method-option > span { align-content: start; }
.register-plans-hero { grid-template-columns: minmax(0,1fr) auto; display:grid; align-items:start; }
.register-plans-hero > div:nth-child(2) { max-width: 72ch; }
@media (max-width: 900px) {
.register-plans-hero { grid-template-columns: 1fr; }
}
.sidebar-logo-image { max-width: 178px; }
.sidebar-logo { gap: 10px; }
.sidebar-logo-image--light, .sidebar-logo-image--dark { object-fit: contain; }
.auth-card-brand-mobile .nf-real-logo img { width:min(210px, 68vw); }
/* v2.0.3 — correções finais de logo e moedas */
.sidebar-head { gap: 10px; }
.sidebar-logo--image { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sidebar-logo-image { width: min(150px, 100%); max-width: 150px; height: auto; }
.sidebar-toggle { flex: 0 0 auto; }
@media (max-width: 680px) { .sidebar-logo-image { width: min(138px, 100%); max-width: 138px; } }
/* v2.0.4 — logo em imagem real e reforço de moedas */
.sidebar-logo-image { width: 144px !important; max-width: 144px !important; }
.sidebar-logo--image img { image-rendering: -webkit-optimize-contrast; }
.auth-card-brand-mobile img,
.register-brand-inline img,
.register-brand-inline--hero img,
.nf-real-logo img { image-rendering: -webkit-optimize-contrast; }
/* v2.0.5 — marca simples na sidebar e chips com controle total */
.sidebar-logo--compact{display:flex;align-items:center;gap:12px;min-width:0;}
.sidebar-logo-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#0b6bf2,#12c7a5);box-shadow:0 12px 26px rgba(7,95,216,.22);flex:0 0 auto;}
.sidebar-logo-icon{width:28px;height:28px;display:block;}
.sidebar-logo-text{font-weight:800;font-size:1.55rem;line-height:1;color:var(--nf-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar[data-collapsed="true"] .sidebar-logo-text{display:none;}
.sidebar[data-collapsed="true"] .sidebar-logo--compact{justify-content:center;}
.market-chip{cursor:pointer;}
.market-chip input{pointer-events:none;}
/* v2.0.6 — atualização automática da Central de Mercado */
.status-dot.is-warning { background: var(--nf-warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--nf-warning) 16%, transparent); }
.market-group-empty { grid-column: 1 / -1; min-height: 110px; display: grid; align-content: center; }
.market-status-strip [data-market-countdown] { font-variant-numeric: tabular-nums; }
/* v2.0.7 — transparência de atualização e estado dos provedores */
.market-quote-card.is-stale {
border-color: color-mix(in srgb, var(--nf-warning) 45%, var(--nf-border));
background: color-mix(in srgb, var(--nf-warning-soft) 28%, var(--nf-surface));
}
.market-quote-card footer {
display: grid;
gap: 4px;
}
.market-quote-card footer span { display: block; }
.status-dot.is-warning {
background: var(--nf-warning);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--nf-warning) 16%, transparent);
}
/* v2.0.10 — investimentos legíveis no tema claro e retirada do atalho de mercado */
html[data-theme="light"] .investments-premium-hero{background:linear-gradient(135deg,#08244a 0%,#0a4770 58%,#0a8474 100%)!important;color:#fff!important;border-color:rgba(8,72,116,.22)!important;}
html[data-theme="light"] .investments-premium-hero h1{color:#fff!important;}
html[data-theme="light"] .investments-premium-hero .page-kicker{color:rgba(255,255,255,.78)!important;}
html[data-theme="light"] .investments-premium-hero .muted{color:rgba(255,255,255,.78)!important;}
html[data-theme="light"] .investments-premium-hero .btn-primary{color:#fff!important;}
html[data-theme="light"] .investments-premium-hero .btn-investment-secondary{color:#fff!important;background:rgba(3,28,67,.34)!important;border-color:rgba(255,255,255,.42)!important;}
html[data-theme="dark"] .investments-premium-hero{background:linear-gradient(135deg,#0a1b31 0%,#0b314f 58%,#0b5c55 100%)!important;color:#fff!important;}
.investments-premium-hero .hero-actions{grid-template-columns:repeat(2,minmax(0,auto));}
@media(max-width:700px){.investments-premium-hero .hero-actions{grid-template-columns:1fr!important;}}
/* v2.1.0 — despesas completas, filtros produtivos, pagamentos reajustáveis e responsividade */
.quick-filter-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: -2px 0 18px; padding: 12px 14px; border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--nf-primary) 18%, var(--nf-border));
background: color-mix(in srgb, var(--nf-primary-soft) 44%, var(--nf-surface));
}
.quick-filter-bar > span { color: var(--nf-muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.quick-filter-bar small { color: var(--nf-muted); margin-left: auto; line-height: 1.45; }
.quick-filter-button {
min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 13px; border-radius: 999px; border: 1px solid var(--nf-border);
background: var(--nf-surface); color: var(--nf-text); font-size: 13px; font-weight: 850; text-decoration: none;
}
.quick-filter-button:hover, .quick-filter-button.is-active {
color: #fff; border-color: transparent;
background: linear-gradient(135deg, var(--nf-primary), var(--nf-accent));
box-shadow: 0 8px 20px color-mix(in srgb, var(--nf-primary) 20%, transparent);
}
.transaction-filter-grid {
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 14px; align-items: end;
}
.transaction-filter-grid label { min-width: 0; }
.transaction-filter-grid .filter-actions { align-self: end; }
.transaction-filter-grid .filter-actions .btn { width: 100%; }
.header-help-group, .heading-with-help { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heading-with-help h2 { margin: 0; }
.help-popover { position: relative; display: inline-flex; z-index: 8; }
.help-popover > summary {
list-style: none; width: 30px; height: 30px; display: grid; place-items: center;
border-radius: 999px; border: 1px solid var(--nf-border); background: var(--nf-surface-soft);
color: var(--nf-primary); font-weight: 950; cursor: pointer; user-select: none;
}
.help-popover > summary::-webkit-details-marker { display: none; }
.help-popover[open] > summary { color: #fff; border-color: transparent; background: var(--nf-primary); }
.help-popover > div {
position: absolute; z-index: 40; top: calc(100% + 8px); right: 0;
width: min(330px, calc(100vw - 36px)); padding: 15px;
border: 1px solid var(--nf-border); border-radius: 16px; background: var(--nf-surface);
color: var(--nf-text); box-shadow: 0 22px 60px rgba(15,23,42,.18);
}
.help-popover > div strong { display: block; margin-bottom: 6px; }
.help-popover > div p { margin: 0; color: var(--nf-muted); line-height: 1.55; }
.saved-filter-card { display: block; }
.saved-filter-card .card-header { width: 100%; }
.saved-filter-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px, 380px); gap: 18px; align-items: start; width: 100%; }
.saved-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.saved-filter-chip {
display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 999px;
border: 1px solid var(--nf-border); background: var(--nf-surface-soft);
}
.saved-filter-chip a { padding: 8px 12px; color: var(--nf-primary); font-weight: 850; text-decoration: none; }
.saved-filter-chip form { display: inline-flex; }
.saved-filter-chip button {
width: 34px; border: 0; border-left: 1px solid var(--nf-border); background: transparent;
color: var(--nf-muted); font-size: 17px; cursor: pointer;
}
.saved-filter-chip button:hover { color: #fff; background: var(--nf-danger); }
.save-filter-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; }
.save-filter-form input[name="name"] { min-height: 44px; min-width: 0; }
.pagination {
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nf-border);
display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
color: var(--nf-muted); font-size: 13px;
}
.pagination-pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination-pages a, .pagination-pages span {
min-width: 36px; height: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; color: var(--nf-text); text-decoration: none; font-weight: 850;
}
.pagination-pages a { border: 1px solid var(--nf-border); background: var(--nf-surface); }
.pagination-pages a:hover, .pagination-pages a.is-active { color: #fff; border-color: transparent; background: var(--nf-primary); }
.split-pay-action { display: inline-flex; align-items: stretch; position: relative; }
.split-pay-action > form .btn { border-radius: 12px 0 0 12px; }
.pay-alternative-menu { position: relative; display: inline-flex; }
.pay-alternative-menu > summary { list-style: none; border-radius: 0 12px 12px 0 !important; min-width: 38px; padding-inline: 10px; border-left: 1px solid rgba(255,255,255,.25); }
.pay-alternative-menu > summary::-webkit-details-marker { display: none; }
.pay-alternative-menu[open]::before {
content: ""; position: fixed; inset: 0; z-index: 79;
background: rgba(2, 12, 27, .52); backdrop-filter: blur(2px);
}
.pay-alternative-popover {
position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(470px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
padding: 22px; border: 1px solid var(--nf-border); border-radius: 22px; background: var(--nf-surface);
box-shadow: 0 32px 90px rgba(2,12,27,.34); color: var(--nf-text); text-align: left;
}
.pay-alternative-popover > strong { display: block; font-size: 18px; }
.pay-alternative-popover > p { margin: 7px 0 18px; color: var(--nf-muted); line-height: 1.55; }
.pay-alternative-form {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0;
}
.pay-alternative-form > label { display: grid; align-content: start; gap: 7px; min-width: 0; }
.pay-alternative-form > label > span { min-height: 20px; color: var(--nf-text); font-size: 13px; font-weight: 800; }
.pay-alternative-form > label small { color: var(--nf-muted); font-weight: 700; }
.pay-alternative-form input { width: 100%; min-width: 0; min-height: 48px; }
.pay-alternative-notes { grid-column: 1 / -1; }
.pay-alternative-actions {
grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 10px;
padding-top: 4px;
}
.pay-alternative-actions .btn { min-width: 128px; }
.cycle-pill { min-width: 210px; }
.active-cycle-indicator {
display: grid; gap: 5px; min-width: min(330px, 100%); padding: 14px 16px;
border-radius: 16px; border: 1px solid color-mix(in srgb, var(--nf-primary) 22%, var(--nf-border));
background: color-mix(in srgb, var(--nf-primary-soft) 52%, var(--nf-surface));
}
.active-cycle-indicator span, .active-cycle-indicator small { color: var(--nf-muted); }
.active-cycle-indicator strong { font-size: 20px; }
.closing-history-list { display: grid; gap: 12px; }
.closing-history-item { border: 1px solid var(--nf-border); border-radius: 18px; background: var(--nf-surface-soft); overflow: hidden; }
.closing-history-item > summary {
list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
gap: 18px; padding: 16px 18px;
}
.closing-history-item > summary::-webkit-details-marker { display: none; }
.closing-history-item > summary strong, .closing-history-item > summary small { display: block; }
.closing-history-item > summary small { margin-top: 4px; color: var(--nf-muted); }
.closing-history-values { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: 12px; }
.closing-history-values b { font-size: 16px; }
.closing-history-content { padding: 0 18px 18px; border-top: 1px solid var(--nf-border); }
.closing-history-content .table-wrap { margin-top: 14px; }
/* Proteções gerais contra cortes em notebooks e telas estreitas. */
.app-shell, .main, .content, .card, .module-hero, .table-wrap { min-width: 0; }
.content { overflow-x: clip; }
.card, .module-hero { max-width: 100%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }
.actions-cell { min-width: 140px; }
.actions-cell .btn { white-space: nowrap; }
@media (max-width: 1100px) {
.saved-filter-layout { grid-template-columns: 1fr; }
.save-filter-form { grid-template-columns: minmax(0,1fr) auto; max-width: 620px; }
.transaction-filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px) {
.transaction-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.quick-filter-bar small { flex: 1 1 100%; margin-left: 0; }
.closing-history-item > summary { align-items: flex-start; flex-direction: column; }
.closing-history-values { justify-content: flex-start; }
}
@media (max-width: 760px) {
.transaction-list-table td .actions-cell { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.transaction-list-table td .actions-cell > * { width: 100%; }
.split-pay-action { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
.split-pay-action > form, .split-pay-action > form .btn { width: 100%; }
.pay-alternative-menu > summary { width: 44px !important; }
.pay-alternative-popover { width: min(470px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 18px; }
.pay-alternative-form { grid-template-columns: 1fr; }
.pay-alternative-notes, .pay-alternative-actions { grid-column: auto; }
.pay-alternative-actions { display: grid; grid-template-columns: 1fr; }
.pay-alternative-actions .btn { width: 100%; }
.save-filter-form { grid-template-columns: 1fr; }
.save-filter-form .btn { width: 100%; }
.pagination { align-items: stretch; flex-direction: column; }
.pagination-pages { justify-content: center; }
.help-popover > div { position: fixed; top: 50%; left: 18px; right: 18px; width: auto; transform: translateY(-50%); }
.closing-history-content { padding-inline: 12px; }
}
@media (max-width: 560px) {
.transaction-filter-grid { grid-template-columns: 1fr; }
.quick-filter-button { flex: 1 1 calc(50% - 6px); }
.quick-filter-bar > span { flex: 1 1 100%; }
.module-hero .hero-actions, .card-header .list-header-actions { width: 100%; }
.list-header-actions { justify-content: stretch; }
.list-header-actions > * { flex: 1 1 100%; }
.bulk-action-form { display: grid; grid-template-columns: 1fr auto; width: 100%; }
}
/* v2.1.2 — modal de pagamento real fora da tabela, sem corte ou rolagem horizontal. */
body.pay-modal-open { overflow: hidden; }
.pay-alternative-menu { position: relative; display: inline-flex; }
.pay-alternative-trigger {
border-radius: 0 12px 12px 0 !important;
min-width: 40px;
padding-inline: 10px;
border-left: 1px solid rgba(255,255,255,.25);
}
.pay-adjustment-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: grid;
place-items: center;
padding: clamp(12px, 3vw, 28px);
overflow: hidden;
}
.pay-adjustment-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(2, 12, 27, .62);
backdrop-filter: blur(4px);
cursor: default;
}
.pay-adjustment-dialog {
position: relative;
z-index: 1;
width: min(680px, 100%);
max-width: 100%;
max-height: min(760px, calc(100vh - 24px));
overflow-y: auto;
overflow-x: hidden;
border-radius: 24px;
background: var(--nf-surface);
box-shadow: 0 34px 110px rgba(2,12,27,.42);
overscroll-behavior: contain;
}
.pay-adjustment-dialog .pay-alternative-popover {
position: static !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
overflow: visible !important;
padding: clamp(20px, 4vw, 30px) !important;
border: 1px solid var(--nf-border);
border-radius: 24px;
box-shadow: none;
}
.pay-adjustment-dialog .pay-alternative-popover > strong {
display: block;
font-size: clamp(19px, 2.5vw, 24px);
line-height: 1.2;
}
.pay-adjustment-dialog .pay-alternative-popover > p {
margin: 8px 0 22px;
max-width: 56ch;
}
.pay-adjustment-dialog .pay-alternative-form {
display: grid !important;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
gap: 18px !important;
width: 100%;
min-width: 0;
margin: 0;
}
.pay-adjustment-dialog .pay-alternative-form > label {
display: grid !important;
grid-template-rows: auto minmax(48px, auto);
align-content: start;
gap: 8px;
min-width: 0;
}
.pay-adjustment-dialog .pay-alternative-form > label > span {
min-height: auto;
line-height: 1.35;
}
.pay-adjustment-dialog .pay-alternative-form input {
box-sizing: border-box;
width: 100% !important;
max-width: 100%;
min-width: 0 !important;
min-height: 50px;
}
.pay-adjustment-dialog .pay-alternative-notes {
grid-column: 1 / -1 !important;
}
.pay-adjustment-dialog .pay-alternative-actions {
grid-column: 1 / -1 !important;
display: flex !important;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding-top: 4px;
}
.pay-adjustment-dialog .pay-alternative-actions .btn {
min-width: 150px;
min-height: 46px;
white-space: nowrap;
}
@media (max-width: 620px) {
.pay-adjustment-modal { padding: 10px; align-items: end; }
.pay-adjustment-dialog {
width: 100%;
max-height: calc(100dvh - 20px);
border-radius: 22px 22px 16px 16px;
}
.pay-adjustment-dialog .pay-alternative-popover { padding: 20px !important; }
.pay-adjustment-dialog .pay-alternative-form { grid-template-columns: 1fr !important; gap: 14px !important; }
.pay-adjustment-dialog .pay-alternative-notes,
.pay-adjustment-dialog .pay-alternative-actions { grid-column: auto !important; }
.pay-adjustment-dialog .pay-alternative-actions { display: grid !important; grid-template-columns: 1fr; }
.pay-adjustment-dialog .pay-alternative-actions .btn { width: 100%; min-width: 0; }
}
/* v2.1.3 — cadastro gratuito sem cobrança e responsividade reforçada */
.register-payment-panel[hidden],
.payment-card-fields[hidden],
.register-free-access-note[hidden] { display: none !important; }
.register-free-access-note {
display:flex; align-items:flex-start; gap:12px; padding:15px 16px;
border:1px solid color-mix(in srgb,var(--nf-success) 30%,var(--nf-border));
border-radius:16px; background:color-mix(in srgb,var(--nf-success-soft) 70%,var(--nf-surface));
}
.register-free-access-note > span {
width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center;
border-radius:999px; background:var(--nf-success); color:#fff; font-weight:900;
}
.register-free-access-note > div { display:grid; gap:3px; min-width:0; }
.register-free-access-note strong { color:var(--nf-text); }
.register-free-access-note small { color:var(--nf-muted); line-height:1.45; }
.register-checkout-form, .register-section, .register-plan-heading,
.payment-method-options, .payment-card-fields, .compact-payment-form { min-width:0; max-width:100%; }
.register-plan-heading select { text-overflow:ellipsis; }
@media (max-width: 900px) {
.register-plan-heading { grid-template-columns:1fr !important; }
.register-plan-details-button { grid-column:auto; width:100%; justify-content:center; }
.payment-method-options { grid-template-columns:1fr !important; }
.payment-method-option { min-height:0; }
}
@media (max-width: 560px) {
.register-section { padding:14px; border-radius:16px; }
.register-section-title { gap:9px; }
.register-section-title > span { width:27px; height:27px; flex-basis:27px; }
.register-page-heading h2 { font-size:clamp(28px,9vw,36px) !important; }
.compact-payment-form .grid-2,
.register-checkout-form .grid-2 { grid-template-columns:1fr !important; }
.compact-payment-form .span-2,
.register-checkout-form .span-2 { grid-column:auto !important; }
.document-inline { grid-template-columns:1fr !important; }
.register-free-access-note { padding:13px; }
}
/* v2.2.0 — segurança de acesso, identidade e refinamento responsivo */
:where(button,.btn,a,input,select,textarea,summary):focus-visible {
outline:3px solid color-mix(in srgb,var(--nf-primary) 42%,transparent);
outline-offset:2px;
}
.support-brand-mark {
width:42px; height:42px; flex:0 0 42px; object-fit:contain;
border-radius:12px; background:var(--nf-surface); padding:3px;
box-shadow:0 5px 16px rgba(15,23,42,.10);
}
.master-section-nav {
scrollbar-width:thin; overscroll-behavior-inline:contain;
}
.master-user-security-card { scroll-margin-top:90px; }
.master-user-security-grid {
display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px;
}
.master-user-security-item {
display:grid; gap:13px; min-width:0; padding:17px;
border:1px solid var(--nf-border); border-radius:18px;
background:linear-gradient(145deg,var(--nf-surface),color-mix(in srgb,var(--nf-primary) 3%,var(--nf-surface)));
}
.master-user-security-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.master-user-security-head>div { display:grid; gap:3px; min-width:0; }
.master-user-security-head strong,.master-user-security-head small { overflow-wrap:anywhere; }
.master-password-reset-form { display:grid; gap:11px; margin-top:auto; }
.master-password-reset-form .checkbox-line { margin:0; }
.password-reset-link-box {
display:grid; gap:13px; padding:17px; border:1px solid color-mix(in srgb,var(--nf-success) 35%,var(--nf-border));
border-radius:18px; background:color-mix(in srgb,var(--nf-success-soft) 72%,var(--nf-surface));
}
.password-reset-link-box>div:first-child { display:grid; gap:4px; }
.password-reset-link-box small { color:var(--nf-muted); }
.password-reset-copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.password-reset-copy-row input { min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.auth-reset-new-link { display:grid; place-items:center; margin-top:22px; text-decoration:none; }
[data-mask="document"] { text-transform:uppercase; }
@media (max-width:700px) {
.master-section-nav { display:flex; overflow-x:auto; white-space:nowrap; padding-bottom:5px; }
.master-section-nav a { flex:0 0 auto; min-height:42px; display:grid; place-items:center; }
.master-user-security-grid { grid-template-columns:1fr; }
.password-reset-copy-row { grid-template-columns:1fr; }
.password-reset-copy-row .btn { width:100%; }
.support-staff-brand>div strong { font-size:13px; }
.support-staff-brand>div small { font-size:11px; }
}
@media (max-width:480px) {
.master-user-security-item { padding:14px; }
.master-user-security-head { flex-direction:column; }
.master-user-security-head .badge { align-self:flex-start; }
.support-brand-mark { width:38px; height:38px; flex-basis:38px; }
}
/* v2.3.0 — suíte de gestão empresarial integrada. */
.business-command-hero { background:radial-gradient(circle at 86% 12%,rgba(0,196,140,.22),transparent 28%),linear-gradient(135deg,#071b3a,#0753a6 56%,#078a78); color:#fff; border:0; }
.business-command-hero h1 { color:#fff; font-size:clamp(32px,5vw,54px); }
.business-command-hero .page-kicker,.business-command-hero .muted { color:rgba(255,255,255,.8); }
.business-hero-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.business-hero-tags span { padding:8px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:12px; font-weight:800; }
.business-hero-actions { display:grid; gap:9px; min-width:min(250px,100%); }
.business-command-hero .btn-outline { color:#fff; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.08); }
.business-module-nav { position:sticky; top:72px; z-index:90; display:flex; gap:7px; overflow-x:auto; margin:16px 0 22px; padding:9px; border:1px solid color-mix(in srgb,var(--nf-primary) 14%,var(--nf-border)); border-radius:18px; background:color-mix(in srgb,var(--nf-surface) 92%,transparent); box-shadow:0 14px 38px rgba(15,23,42,.09); backdrop-filter:blur(18px); scrollbar-width:thin; }
.business-module-nav a { flex:0 0 auto; min-height:38px; display:grid; place-items:center; padding:0 13px; border-radius:12px; color:var(--nf-muted); font-size:12px; font-weight:850; text-decoration:none; white-space:nowrap; }
.business-module-nav a:hover { color:#fff; background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); }
.business-primary-metrics { margin-top:0!important; }
.business-flow-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.business-flow-strip>div { min-width:0; display:grid; gap:5px; padding:16px; border:1px solid var(--nf-border); border-radius:18px; background:var(--nf-surface-soft); }
.business-flow-strip span,.business-flow-strip small { color:var(--nf-muted); }
.business-flow-strip span { font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.business-flow-strip strong { font-size:clamp(18px,2vw,24px); }
.business-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.business-kpi-grid>article { min-width:0; display:grid; gap:6px; padding:18px; border:1px solid color-mix(in srgb,var(--nf-primary) 14%,var(--nf-border)); border-radius:18px; background:linear-gradient(145deg,var(--nf-surface),color-mix(in srgb,var(--nf-primary) 4%,var(--nf-surface))); }
.business-kpi-grid span,.business-kpi-grid small { color:var(--nf-muted); }
.business-kpi-grid span { font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.business-kpi-grid strong { font-size:clamp(21px,2.4vw,29px); }
.business-executive-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; }
.business-trend-chart { height:280px; display:grid; grid-template-columns:repeat(6,minmax(48px,1fr)); gap:10px; align-items:end; padding:24px 4px 4px; border-bottom:1px solid var(--nf-border); overflow-x:auto; }
.business-trend-month { height:100%; display:grid; grid-template-rows:minmax(160px,1fr) auto auto; gap:7px; text-align:center; }
.business-trend-month>div { height:100%; display:flex; justify-content:center; align-items:end; gap:5px; }
.business-trend-month i { display:block; width:min(20px,38%); min-height:3px; border-radius:8px 8px 3px 3px; }
.business-trend-month i.is-revenue,.business-chart-legend i.is-revenue { background:linear-gradient(180deg,#19d4ab,#07937f); }
.business-trend-month i.is-expense,.business-chart-legend i.is-expense { background:linear-gradient(180deg,#fb7185,#dc2626); }
.business-trend-month span { font-size:11px; font-weight:850; color:var(--nf-muted); white-space:nowrap; }
.business-trend-month small { font-size:10px; font-weight:850; white-space:nowrap; }
.business-chart-legend { display:flex; gap:16px; justify-content:center; margin-top:14px; color:var(--nf-muted); font-size:12px; font-weight:800; }
.business-chart-legend span { display:flex; align-items:center; gap:6px; }
.business-chart-legend i { width:10px; height:10px; border-radius:3px; }
.business-compact-list { display:grid; gap:9px; }
.business-compact-list>a { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--nf-border); color:var(--nf-text); text-decoration:none; }
.business-compact-list>a:last-child { border-bottom:0; }
.business-compact-list strong,.business-compact-list small { display:block; }
.business-compact-list small { margin-top:3px; color:var(--nf-muted); font-size:11px; }
.business-compact-list b { font-size:12px; white-space:nowrap; }
.business-flow-dot { width:9px; height:9px; border-radius:999px; background:var(--nf-danger); }
.business-flow-dot.is-income { background:var(--nf-success); }
.business-relationships-ranking td strong { color:var(--nf-text); }
.business-module-card { scroll-margin-top:138px; }
.business-module-card>.card-header { align-items:flex-start; }
.business-module-card>.card-header p { margin:7px 0 0; max-width:74ch; }
.business-create-layout { display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:18px; align-items:start; }
.business-management-grid { display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:18px; align-items:start; }
.business-create-card { position:sticky; top:140px; margin:0!important; padding:18px; border:1px solid color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border)); border-radius:18px; background:color-mix(in srgb,var(--nf-primary-soft) 38%,var(--nf-surface)); }
.business-create-card h3 { margin:0; font-size:18px; }
.business-pipeline-board { display:grid; grid-template-columns:repeat(5,minmax(210px,1fr)); gap:12px; overflow-x:auto; padding-bottom:8px; }
.pipeline-column { min-width:210px; border:1px solid var(--nf-border); border-radius:18px; background:var(--nf-surface-soft); overflow:hidden; }
.pipeline-column>header { min-height:76px; display:flex; justify-content:space-between; gap:10px; padding:14px; border-bottom:3px solid var(--nf-primary); background:var(--nf-surface); }
.pipeline-column.is-qualified>header { border-color:#0ea5e9; }.pipeline-column.is-proposal>header { border-color:#8b5cf6; }.pipeline-column.is-negotiation>header { border-color:#f59e0b; }.pipeline-column.is-won>header { border-color:#10b981; }
.pipeline-column>header strong,.pipeline-column>header small { display:block; }.pipeline-column>header small { margin-top:3px; color:var(--nf-muted); font-size:11px; }.pipeline-column>header b { font-size:12px; white-space:nowrap; }
.pipeline-column>div { display:grid; gap:9px; padding:10px; }.pipeline-column>div>p { margin:12px 4px; color:var(--nf-muted); font-size:12px; text-align:center; }
.pipeline-deal { border:1px solid var(--nf-border); border-radius:14px; background:var(--nf-surface); overflow:hidden; }
.pipeline-deal>summary { list-style:none; cursor:pointer; display:grid; gap:8px; padding:12px; }.pipeline-deal>summary::-webkit-details-marker { display:none; }.pipeline-deal>summary strong,.pipeline-deal>summary small { display:block; }.pipeline-deal>summary small { margin-top:3px; color:var(--nf-muted); font-size:10px; }.pipeline-deal>summary b { color:var(--nf-primary); font-size:13px; }
.pipeline-deal>form { margin:0!important; padding:12px; border-top:1px solid var(--nf-border); }.pipeline-deal>form:last-child { padding-top:0; border-top:0; }
.business-project-grid,.business-catalog-grid,.business-record-list,.business-task-list { display:grid; gap:11px; }
.business-project-card,.business-catalog-item,.business-record,.business-task { border:1px solid var(--nf-border); border-radius:18px; background:var(--nf-surface); overflow:hidden; }
.business-project-card>summary,.business-catalog-item>summary,.business-record>summary,.business-task>summary { list-style:none; cursor:pointer; padding:16px; }.business-project-card>summary::-webkit-details-marker,.business-catalog-item>summary::-webkit-details-marker,.business-record>summary::-webkit-details-marker,.business-task>summary::-webkit-details-marker { display:none; }
.project-card-head { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:11px; align-items:center; }.project-card-head strong,.project-card-head small { display:block; }.project-card-head small { margin-top:4px; color:var(--nf-muted); font-size:11px; }.project-card-head b { white-space:nowrap; }
.project-progress,.cost-center-progress { height:7px; overflow:hidden; border-radius:999px; background:var(--nf-border); }.project-progress { margin-top:13px; }.project-progress span,.cost-center-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--nf-primary),var(--nf-accent)); }
.project-card-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }.project-card-stats span { display:grid; gap:3px; color:var(--nf-muted); font-size:10px; }.project-card-stats b { color:var(--nf-text); font-size:12px; }
.business-project-card>form,.business-catalog-item>form,.business-record>form,.business-task>form { margin:0!important; padding:16px; border-top:1px solid var(--nf-border); }.business-project-card>form:last-child,.business-catalog-item>form:last-child,.business-record>form:last-child,.business-task>form:last-child { padding-top:0; border-top:0; }
.business-task>summary { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:11px; align-items:center; }.business-task>summary>form { padding:0!important; border:0!important; }.business-task>summary>form button { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--nf-border); border-radius:10px; background:var(--nf-surface-soft); color:var(--nf-primary); font-size:18px; cursor:pointer; }.business-task>summary strong,.business-task>summary small { display:block; }.business-task>summary small { margin-top:3px; color:var(--nf-muted); font-size:11px; }.business-task.is-completed { opacity:.7; }.business-task.is-completed>summary strong { text-decoration:line-through; }.business-task.is-overdue { border-color:color-mix(in srgb,var(--nf-danger) 45%,var(--nf-border)); }
.priority-urgent { background:var(--nf-danger-soft); color:var(--nf-danger); }.priority-high { background:var(--nf-warning-soft); color:#b45309; }.priority-low { background:var(--nf-success-soft); color:var(--nf-success); }
.business-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.business-catalog-item>summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.business-catalog-item>summary span,.business-catalog-item>summary strong,.business-catalog-item>summary small { display:block; }.business-catalog-item>summary span { color:var(--nf-primary); font-size:10px; font-weight:900; text-transform:uppercase; }.business-catalog-item>summary strong { margin-top:3px; }.business-catalog-item>summary small { margin-top:4px; color:var(--nf-muted); font-size:11px; }.business-catalog-item>summary em { grid-column:1/-1; color:var(--nf-danger); font-size:11px; font-style:normal; font-weight:850; }.business-catalog-item.has-stock-alert { border-color:color-mix(in srgb,var(--nf-danger) 42%,var(--nf-border)); }
.business-record>summary { display:flex; justify-content:space-between; gap:12px; align-items:center; }.business-record>summary strong,.business-record>summary small { display:block; }.business-record>summary small { margin-top:4px; color:var(--nf-muted); font-size:11px; }.cost-center-progress { margin:0 16px 4px; }
.business-locked { padding:20px; border:1px dashed color-mix(in srgb,var(--nf-warning) 44%,var(--nf-border)); border-radius:18px; background:color-mix(in srgb,var(--nf-warning-soft) 44%,var(--nf-surface)); }.business-locked strong { display:block; }.business-locked p { margin:6px 0 0; color:var(--nf-muted); }
@media (max-width:1180px) { .business-flow-strip,.business-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.business-executive-grid { grid-template-columns:1fr; }.business-create-layout,.business-management-grid { grid-template-columns:1fr; }.business-create-card { position:static; }.business-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .business-module-nav { top:64px; }.business-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.project-card-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .business-command-hero { align-items:stretch; }.business-hero-actions { width:100%; }.business-flow-strip,.business-kpi-grid,.business-catalog-grid { grid-template-columns:1fr; }.business-module-card { scroll-margin-top:126px; }.business-trend-chart { grid-template-columns:repeat(6,68px); }.business-task>summary { grid-template-columns:34px minmax(0,1fr); }.business-task>summary>.badge { grid-column:2; justify-self:start; }.project-card-head { grid-template-columns:10px minmax(0,1fr); }.project-card-head>b { grid-column:2; justify-self:start; }.business-record>summary { align-items:flex-start; flex-direction:column; }.business-record>summary>.badge { align-self:flex-start; } }
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
/* v2.2.0 — navegação profissional nos estados aberto/recolhido. */
:root { --nf-sidebar-width: 284px; --nf-sidebar-collapsed-width: 88px; }
.sidebar-logo-custom { display:block; width:min(146px,100%); max-height:48px; object-fit:contain; object-position:left center; }
.brand-editor-group { display:grid; gap:16px; padding-top:18px; border-top:1px solid var(--nf-border); }
.brand-editor-group h3 { margin:0 0 6px; }
.brand-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.brand-logo-preview { grid-template-columns:minmax(86px,120px) minmax(0,1fr); }
.brand-logo-preview--compact img { width:78px; height:78px; justify-self:center; }
@media (min-width:901px) {
.app-shell { padding-left:var(--nf-sidebar-width)!important; }
.app-shell.sidebar-collapsed { padding-left:var(--nf-sidebar-collapsed-width)!important; }
.sidebar {
width:var(--nf-sidebar-width)!important; padding:16px!important; gap:14px!important;
overflow:hidden!important; z-index:120!important;
}
.app-shell.sidebar-collapsed .sidebar { width:var(--nf-sidebar-collapsed-width)!important; padding-inline:12px!important; }
.sidebar-head { display:grid!important; grid-template-columns:minmax(0,1fr) 40px; align-items:center; gap:10px!important; min-width:0; }
.sidebar-logo { min-width:0!important; overflow:hidden; }
.sidebar-logo-badge { width:42px!important; height:42px!important; border-radius:13px!important; }
.sidebar-logo-badge--collapsed { display:none!important; }
.sidebar-logo-icon { width:26px!important; height:26px!important; object-fit:contain; }
.sidebar-logo-text { min-width:0; max-width:148px; font-size:1.3rem!important; text-overflow:ellipsis; }
.sidebar-logo.has-custom-logo .sidebar-logo-badge { display:none; }
.tenant-pill { min-width:0; display:grid!important; grid-template-columns:38px minmax(0,1fr); }
.tenant-pill > div { min-width:0; }
.tenant-pill strong { max-width:none!important; }
.tenant-pill small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-nav { overflow-x:hidden!important; padding:0 3px 8px 0!important; align-content:start; }
.app-shell.sidebar-collapsed .sidebar-head { grid-template-columns:1fr; justify-items:center; gap:8px!important; }
.app-shell.sidebar-collapsed .sidebar-logo { width:44px; min-height:44px; justify-content:center!important; overflow:visible; }
.app-shell.sidebar-collapsed .sidebar-logo .sidebar-logo-badge--expanded { display:none!important; }
.app-shell.sidebar-collapsed .sidebar-logo .sidebar-logo-badge--collapsed { display:inline-flex!important; }
.app-shell.sidebar-collapsed .sidebar-logo-text,
.app-shell.sidebar-collapsed .sidebar-logo-custom { display:none!important; }
.app-shell.sidebar-collapsed .sidebar-toggle { width:40px; height:40px; }
.app-shell.sidebar-collapsed .tenant-pill { display:flex!important; justify-content:center; padding:7px!important; border-color:transparent; background:transparent; }
.app-shell.sidebar-collapsed .tenant-pill > div { display:none!important; }
.app-shell.sidebar-collapsed .nav-section-label,
.app-shell.sidebar-collapsed .version-card { display:none!important; }
.app-shell.sidebar-collapsed .sidebar-nav { gap:7px!important; padding-right:0!important; }
.app-shell.sidebar-collapsed .sidebar-nav > a,
.app-shell.sidebar-collapsed .nav-more > summary {
width:48px; min-height:48px; margin-inline:auto; padding:6px!important;
justify-content:center; border-radius:15px!important; transform:none!important;
}
.app-shell.sidebar-collapsed .sidebar-nav > a > span:not(.nav-icon),
.app-shell.sidebar-collapsed .nav-more > summary > span:not(.nav-icon),
.app-shell.sidebar-collapsed .sidebar-nav .nav-count { display:none!important; }
.app-shell.sidebar-collapsed .nav-more { margin:0!important; }
.app-shell.sidebar-collapsed .sidebar-footer { display:none!important; }
}
/* v2.3.0 — identidade completa, avatares sem placas e editor profissional. */
.nf-brand-composed { display:inline-flex; align-items:center; gap:14px; background:transparent!important; }
.nf-inline-symbol { width:72px; height:72px; flex:0 0 72px; display:grid; place-items:center; overflow:hidden; border-radius:20px; background:transparent; box-shadow:0 15px 34px rgba(2,12,27,.2); }
.nf-inline-symbol img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.nf-brand-composed.has-custom-symbol .nf-inline-symbol img { width:128%; height:128%; max-width:none; border-radius:24px; }
.nf-brand-composed strong { display:inline-flex; align-items:baseline; font-size:clamp(28px,3vw,40px)!important; letter-spacing:-.06em!important; }
.nf-brand-composed strong b,.nf-brand-composed strong em { font:inherit; font-style:normal; }
.auth-brand-panel-v17 .nf-brand-composed strong b { color:#fff; }
.nf-brand-composed strong em { color:#16d3aa; }
.auth-card-brand-mobile .nf-brand-composed strong b { color:var(--nf-text); }
.auth-card-brand-mobile .nf-inline-symbol { width:56px; height:56px; flex-basis:56px; border-radius:17px; }
.sidebar-logo-text { display:inline-flex; align-items:baseline; letter-spacing:-.055em; overflow:visible; }
.sidebar-logo-text b,.sidebar-logo-text em { font:inherit; font-style:normal; }
.sidebar-logo-text b { color:var(--nf-text); }
.sidebar-logo-text em { color:var(--nf-accent); }
.sidebar-logo.has-custom-logo .sidebar-logo-badge { display:inline-flex!important; overflow:hidden; background:transparent; box-shadow:none; }
.sidebar-logo.has-custom-logo .sidebar-logo-icon { width:118%!important; height:118%!important; max-width:none!important; object-fit:cover; border-radius:14px; }
.sidebar-logo .sidebar-logo-badge--collapsed { display:none!important; }
@media (min-width:901px) {
.app-shell.sidebar-collapsed .sidebar-logo .sidebar-logo-badge--expanded { display:none!important; }
.app-shell.sidebar-collapsed .sidebar-logo .sidebar-logo-badge--collapsed { display:inline-flex!important; }
}
.tenant-pill-avatar.has-photo { padding:0!important; overflow:hidden; background:transparent!important; box-shadow:none!important; }
.tenant-pill-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.avatar-frame.has-photo { padding:0; border-color:transparent; background:transparent; }
.avatar-frame.has-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-photo-actions { display:grid; gap:8px; min-width:0; }
.profile-photo-actions>span { color:var(--nf-text); font-weight:850; }
.profile-photo-actions p { margin:0; color:var(--nf-muted); line-height:1.5; }
.profile-photo-picker { width:max-content; max-width:100%; cursor:pointer; }
.profile-photo-remove { margin-top:2px; }
body.avatar-editor-open { overflow:hidden; }
.avatar-editor-modal[hidden] { display:none!important; }
.avatar-editor-modal { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:clamp(10px,3vw,28px); }
.avatar-editor-backdrop { position:absolute; inset:0; border:0; background:rgba(2,12,27,.72); backdrop-filter:blur(7px); }
.avatar-editor-dialog { position:relative; z-index:1; width:min(880px,100%); max-height:calc(100dvh - 24px); overflow:auto; padding:clamp(18px,3vw,30px); border:1px solid color-mix(in srgb,var(--nf-primary) 20%,var(--nf-border)); border-radius:28px; background:var(--nf-surface); box-shadow:0 38px 120px rgba(2,12,27,.45); }
.avatar-editor-dialog>header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.avatar-editor-dialog>header h2 { margin:0; font-size:clamp(23px,3vw,32px); }
.avatar-editor-dialog>header p:last-child { margin:8px 0 0; color:var(--nf-muted); line-height:1.5; }
.avatar-editor-workspace { display:grid; grid-template-columns:minmax(280px,1fr) minmax(240px,.72fr); gap:26px; align-items:center; margin-top:24px; }
.avatar-canvas-shell { position:relative; width:min(440px,100%); aspect-ratio:1; justify-self:center; overflow:hidden; border-radius:24px; background:#dfe9f3; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12); touch-action:none; }
.avatar-canvas-shell canvas { display:block; width:100%; height:100%; cursor:grab; }
.avatar-canvas-shell canvas:active { cursor:grabbing; }
.avatar-canvas-shell>span { pointer-events:none; position:absolute; inset:7%; border:2px solid rgba(255,255,255,.96); border-radius:50%; box-shadow:0 0 0 999px rgba(2,12,27,.34),0 0 0 1px rgba(2,12,27,.22); }
.avatar-editor-controls { display:grid; gap:18px; }
.avatar-editor-controls label { display:grid; gap:10px; color:var(--nf-text); font-weight:850; }
.avatar-editor-controls input[type="range"] { width:100%; accent-color:var(--nf-primary); }
.avatar-editor-controls>div { display:grid; grid-template-columns:1fr; gap:10px; }
.avatar-editor-controls small { color:var(--nf-muted); line-height:1.55; }
.avatar-editor-dialog>footer { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; padding-top:20px; border-top:1px solid var(--nf-border); }
@media (min-width:901px) {
.app-shell.sidebar-collapsed .sidebar-logo-text { display:none!important; }
}
@media (max-width:720px) {
.avatar-editor-modal { align-items:end; padding:8px; }
.avatar-editor-dialog { max-height:calc(100dvh - 16px); border-radius:24px 24px 16px 16px; }
.avatar-editor-workspace { grid-template-columns:1fr; gap:18px; }
.avatar-canvas-shell { width:min(360px,100%); }
.avatar-editor-dialog>footer { display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
.profile-upload-enhanced { display:grid!important; grid-template-columns:1fr!important; }
.profile-photo-picker { width:100%; }
.avatar-editor-dialog>header .icon-btn { position:absolute; top:14px; right:14px; }
.avatar-editor-dialog>header>div { padding-right:42px; }
.avatar-editor-dialog>footer { grid-template-columns:1fr; }
}
/* O painel de ajuda usa coordenadas da viewport calculadas no JS. */
.help-popover { z-index:250!important; }
.help-popover > div.help-popover-panel--viewport {
position:fixed!important; right:auto!important; transform:none!important; z-index:10000!important;
width:min(340px,calc(100vw - 24px))!important; max-width:calc(100vw - 24px)!important;
max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain;
box-shadow:0 24px 70px rgba(15,23,42,.24)!important;
}
@media (max-width:760px) {
.brand-editor-grid { grid-template-columns:1fr; }
.help-popover > div.help-popover-panel--viewport { width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; }
}
/* v2.2.0 — exclusão programada, reversível somente durante a janela de segurança. */
.tenant-deletion-governance { border-color:color-mix(in srgb,var(--nf-warning) 32%,var(--nf-border)); }
.tenant-deletion-governance.is-scheduled { border-color:color-mix(in srgb,var(--nf-danger) 42%,var(--nf-border)); background:linear-gradient(145deg,color-mix(in srgb,var(--nf-danger-soft) 24%,var(--nf-surface)),var(--nf-surface)); }
.deletion-countdown-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; padding:18px; border:1px solid color-mix(in srgb,var(--nf-danger) 34%,var(--nf-border)); border-radius:18px; background:color-mix(in srgb,var(--nf-danger-soft) 48%,var(--nf-surface)); }
.deletion-countdown-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--nf-danger); font-size:24px; font-weight:950; }
.deletion-countdown-card strong,.deletion-countdown-card small { display:block; }
.deletion-countdown-card p { margin:6px 0; color:var(--nf-text); }
.deletion-countdown-card small { color:var(--nf-muted); line-height:1.5; }
.deletion-cancel-form,.form-actions-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.input-with-suffix { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; }
.input-with-suffix input { border-radius:14px 0 0 14px; }
.input-with-suffix > span { display:grid; place-items:center; padding:0 14px; border:1px solid var(--nf-border); border-left:0; border-radius:0 14px 14px 0; background:var(--nf-surface-soft); color:var(--nf-muted); font-weight:850; }
.btn:disabled { opacity:.48; cursor:not-allowed; transform:none!important; box-shadow:none; }
@media(max-width:620px){.deletion-countdown-card{grid-template-columns:1fr}.deletion-cancel-form,.form-actions-row{align-items:stretch;flex-direction:column}.deletion-cancel-form .btn,.form-actions-row .btn{width:100%}}
/* Gestão empresarial — hierarquia visual sóbria e responsiva. */
.business-hero {
overflow:hidden; position:relative; isolation:isolate;
background:
radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--nf-success) 24%,transparent),transparent 38%),
linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 9%,var(--nf-surface)),var(--nf-surface));
}
.business-hero::after {
content:""; position:absolute; z-index:-1; right:-90px; bottom:-145px;
width:330px; height:330px; border:54px solid color-mix(in srgb,var(--nf-primary) 6%,transparent); border-radius:50%;
}
.business-identity-card {
display:grid; gap:6px; min-width:min(100%,280px); max-width:360px; padding:20px;
border:1px solid color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border)); border-radius:20px;
background:color-mix(in srgb,var(--nf-surface) 88%,transparent); box-shadow:0 18px 48px rgba(15,23,42,.10);
backdrop-filter:blur(12px);
}
.business-identity-card span { color:var(--nf-primary); font-size:.74rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.business-identity-card strong { font-size:clamp(1.08rem,2vw,1.36rem); overflow-wrap:anywhere; }
.business-identity-card small { color:var(--nf-muted); }
.business-flow-strip {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden;
border:1px solid var(--nf-border); border-radius:20px; background:var(--nf-surface); box-shadow:var(--nf-shadow-sm);
}
.business-flow-strip>div { display:grid; gap:4px; min-width:0; padding:17px 19px; }
.business-flow-strip>div+div { border-left:1px solid var(--nf-border); }
.business-flow-strip span,.business-flow-strip small { color:var(--nf-muted); }
.business-flow-strip span { font-size:.76rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.business-flow-strip strong { font-size:clamp(1rem,2vw,1.3rem); overflow-wrap:anywhere; }
.business-flow-strip small { line-height:1.35; }
.business-advisor { background:linear-gradient(145deg,color-mix(in srgb,var(--nf-primary) 5%,var(--nf-surface)),var(--nf-surface)); }
.business-insight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.business-insight {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:16px;
border:1px solid var(--nf-border); border-left:4px solid var(--nf-primary); border-radius:16px; background:var(--nf-surface);
}
.business-insight.is-critical { border-left-color:var(--nf-danger); }
.business-insight.is-warning { border-left-color:var(--nf-warning); }
.business-insight.is-positive { border-left-color:var(--nf-success); }
.business-insight strong { display:block; margin-bottom:5px; }
.business-insight p { margin:0; color:var(--nf-muted); line-height:1.5; }
.business-management-grid { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); align-items:start; gap:18px; }
.business-create-card {
position:sticky; top:20px; padding:18px; border:1px solid color-mix(in srgb,var(--nf-primary) 16%,var(--nf-border));
border-radius:18px; background:color-mix(in srgb,var(--nf-primary) 3%,var(--nf-surface));
}
.business-create-card h3 { margin:0 0 2px; }
.business-record-list { display:grid; gap:10px; min-width:0; }
.business-record { border:1px solid var(--nf-border); border-radius:17px; background:var(--nf-surface); overflow:hidden; }
.business-record[open] { border-color:color-mix(in srgb,var(--nf-primary) 25%,var(--nf-border)); box-shadow:0 13px 34px rgba(15,23,42,.07); }
.business-record>summary { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:72px; padding:15px 17px; cursor:pointer; list-style:none; }
.business-record>summary::-webkit-details-marker { display:none; }
.business-record>summary>div { display:grid; gap:4px; min-width:0; }
.business-record>summary strong,.business-record>summary small { overflow-wrap:anywhere; }
.business-record>summary small { color:var(--nf-muted); }
.business-record>form { margin:0 17px 17px; padding-top:16px; border-top:1px solid var(--nf-border); }
.business-record>form+form { padding-top:0; border-top:0; }
.form-grid-span-2 { grid-column:1/-1; }
@media(max-width:1080px){
.business-flow-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
.business-flow-strip>div:nth-child(3) { border-left:0; border-top:1px solid var(--nf-border); }
.business-flow-strip>div:nth-child(4) { border-top:1px solid var(--nf-border); }
.business-insight-grid { grid-template-columns:1fr; }
}
@media(max-width:820px){
.business-management-grid { grid-template-columns:1fr; }
.business-create-card { position:static; }
}
@media(max-width:620px){
.business-identity-card { width:100%; max-width:none; }
.business-flow-strip { grid-template-columns:1fr; }
.business-flow-strip>div+div,.business-flow-strip>div:nth-child(3) { border-left:0; border-top:1px solid var(--nf-border); }
.business-insight { grid-template-columns:1fr; }
.business-insight .btn { width:100%; }
.business-record>summary { align-items:flex-start; }
.business-record>summary .badge { flex:0 0 auto; }
.form-grid-span-2 { grid-column:auto; }
}
/* v2.3.0 — consolidação final da cascata da suíte Empresa. */
.business-flow-strip { gap:0; }
.business-flow-strip>div { border:0; border-radius:0; background:transparent; }
.business-create-card { top:140px; }
@media(max-width:1180px){
.business-flow-strip,.business-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.business-management-grid { grid-template-columns:1fr; }
.business-create-card { position:static; }
}
@media(max-width:680px){
.business-flow-strip,.business-kpi-grid,.business-catalog-grid { grid-template-columns:1fr; }
.business-flow-strip>div+div,.business-flow-strip>div:nth-child(3),.business-flow-strip>div:nth-child(4) { border-left:0; border-top:1px solid var(--nf-border); }
.business-record>summary { align-items:flex-start; flex-direction:column; }
.business-record>summary>.badge { align-self:flex-start; }
}
/* v2.3.1 — login sem corte, logo compacta apenas no menu recolhido e avatar compatível com CSP. */
.auth-brand-panel-v17.has-promo-image {
background:
linear-gradient(135deg, rgba(6,20,43,.86), rgba(0,75,162,.68) 54%, rgba(0,196,140,.58)),
var(--login-promo-image, none) center center / contain no-repeat,
linear-gradient(135deg, #06142b, #063b73 58%, #007f70) !important;
background-color: #06142b !important;
}
.auth-brand-panel-v17 .nf-brand-composed {
max-width: 100%;
min-width: 0;
}
.auth-brand-panel-v17 .nf-brand-composed strong {
max-width: calc(100% - 78px);
overflow: visible;
white-space: nowrap;
font-size: clamp(26px, 3vw, 38px) !important;
}
.nf-brand-composed.has-custom-symbol .nf-inline-symbol img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* A regra de logo personalizada não pode tornar os dois símbolos visíveis. */
.sidebar-logo.has-custom-logo .sidebar-logo-badge--collapsed {
display: none !important;
}
.sidebar-logo.has-custom-logo .sidebar-logo-badge--expanded {
display: inline-flex !important;
}
@media (min-width: 901px) {
.app-shell.sidebar-collapsed .sidebar-logo.has-custom-logo .sidebar-logo-badge--expanded {
display: none !important;
}
.app-shell.sidebar-collapsed .sidebar-logo.has-custom-logo .sidebar-logo-badge--collapsed {
display: inline-flex !important;
}
}
@media (max-width: 1100px) {
.auth-brand-panel-v17.has-promo-image {
background-size: cover, contain, cover !important;
background-position: center, center, center !important;
background-repeat: no-repeat !important;
}
}
/* v2.4.0 — Empresa em módulos, CRM Pro e responsividade integral. */
.business-command-hero { align-items:center; gap:clamp(22px,4vw,64px); overflow:hidden; }
.business-command-copy { min-width:0; max-width:920px; }
.business-command-copy h1 { max-width:18ch; overflow-wrap:anywhere; line-height:1.04; }
.business-hero-actions { width:min(294px,100%); min-width:0; }
.business-hero-actions .btn { width:100%; min-height:52px; justify-content:flex-start; gap:10px; padding-inline:18px; text-align:left; }
.business-hero-actions .nf-icon { width:19px; height:19px; flex:0 0 19px; }
.business-command-hero .business-hero-secondary,
html[data-theme="light"] .business-command-hero .business-hero-secondary,
html[data-theme="dark"] .business-command-hero .business-hero-secondary {
color:#fff!important; border:1px solid rgba(255,255,255,.34)!important;
background:rgba(3,25,60,.34)!important; box-shadow:none!important;
}
.business-command-hero .business-hero-secondary:hover { color:#fff!important; background:rgba(255,255,255,.18)!important; border-color:rgba(255,255,255,.62)!important; }
.business-command-hero .btn-primary { color:#fff!important; }
.business-module-nav { top:72px; padding:8px; gap:6px; }
.business-module-nav a { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; color:var(--nf-muted); }
.business-module-nav a .nf-icon { width:17px; height:17px; flex:0 0 17px; }
.business-module-nav a:hover,
.business-module-nav a.is-active { color:#fff; background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); box-shadow:0 9px 24px color-mix(in srgb,var(--nf-primary) 22%,transparent); }
.business-tab-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:4px 0 18px; }
.business-tab-heading h2 { margin:3px 0 0; font-size:clamp(24px,3vw,34px); }
.business-tab-panel { min-width:0; display:grid; gap:18px; animation:businessTabIn .2s ease-out; }
.business-tab-panel>.business-module-card { margin:0; }
@keyframes businessTabIn { from { opacity:.25; transform:translateY(5px); } to { opacity:1; transform:none; } }
.business-crm-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:26px; padding:25px 28px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#0b3c86 0%,#0b70c6 54%,#08a486 100%); box-shadow:0 20px 48px rgba(17,78,170,.18); }
.business-crm-hero::before,.business-crm-hero::after { content:""; position:absolute; border-radius:999px; background:rgba(255,255,255,.08); pointer-events:none; }
.business-crm-hero::before { width:240px; height:240px; right:120px; top:-165px; }
.business-crm-hero::after { width:180px; height:180px; left:38%; bottom:-150px; }
.business-crm-hero>div:first-child { position:relative; z-index:1; min-width:0; }
.business-crm-hero .page-kicker { color:#c9e6ff; }
.business-crm-hero h2 { margin:4px 0 0; color:#fff; font-size:clamp(23px,3vw,32px); }
.business-crm-hero p { margin:8px 0 0; color:rgba(255,255,255,.82); }
.business-crm-conversion { --crm-progress:0; position:relative; z-index:1; width:116px; height:116px; flex:0 0 116px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#fff calc(var(--crm-progress)*1%),rgba(255,255,255,.2) 0); }
.business-crm-conversion::before { content:""; position:absolute; inset:8px; border-radius:50%; background:linear-gradient(145deg,#1558b9,#087f91); }
.business-crm-conversion>div { position:relative; z-index:1; display:grid; gap:4px; text-align:center; }
.business-crm-conversion strong { font-size:25px; line-height:1; }
.business-crm-conversion span { color:#d9efff; font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.business-crm-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.business-crm-metrics article { min-width:0; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--nf-border); border-radius:18px; background:var(--nf-surface); box-shadow:0 8px 24px rgba(15,23,42,.045); }
.business-crm-metrics article>span { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:14px; }
.business-crm-metrics article>span .nf-icon { width:21px; height:21px; }
.business-crm-metrics .is-pipeline { background:var(--nf-primary-soft); color:var(--nf-primary); }
.business-crm-metrics .is-forecast { background:#efe8ff; color:#7c3aed; }
.business-crm-metrics .is-overdue { background:var(--nf-danger-soft); color:var(--nf-danger); }
.business-crm-metrics .is-won { background:var(--nf-success-soft); color:var(--nf-success); }
.business-crm-metrics article div { min-width:0; display:grid; gap:2px; }
.business-crm-metrics small,.business-crm-metrics em { color:var(--nf-muted); font-style:normal; }
.business-crm-metrics small { font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.business-crm-metrics strong { overflow:hidden; font-size:clamp(17px,2vw,22px); text-overflow:ellipsis; white-space:nowrap; }
.business-crm-metrics em { font-size:10px; }
.business-crm-toolbar { position:sticky; top:137px; z-index:70; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px; }
.business-crm-search { min-width:260px; flex:1 1 320px; display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border:1px solid var(--nf-border); border-radius:13px; background:var(--nf-surface-soft); }
.business-crm-search .nf-icon { width:17px; height:17px; color:var(--nf-muted); }
.business-crm-search input { width:100%; min-width:0; border:0!important; padding:0!important; background:transparent!important; box-shadow:none!important; }
.business-crm-toolbar select { width:auto; min-width:150px; min-height:42px; }
.business-crm-toolbar-spacer { flex:1 1 20px; }
.business-crm-segmented { display:flex; min-height:40px; overflow:hidden; border:1px solid var(--nf-border); border-radius:12px; background:var(--nf-surface-soft); }
.business-crm-segmented a { display:grid; place-items:center; padding:0 11px; color:var(--nf-muted); font-size:11px; font-weight:850; text-decoration:none; }
.business-crm-segmented a.is-active { color:#fff; background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); }
.business-crm-zoom { display:flex; align-items:center; min-height:40px; overflow:hidden; border:1px solid var(--nf-border); border-radius:12px; background:var(--nf-surface-soft); }
.business-crm-zoom button { min-width:36px; height:38px; display:grid; place-items:center; border:0; border-right:1px solid var(--nf-border); background:transparent; color:var(--nf-text); cursor:pointer; font-weight:900; }
.business-crm-zoom button:last-child { border-right:0; }
.business-crm-zoom button:hover { background:var(--nf-primary-soft); color:var(--nf-primary); }
.business-crm-zoom button:disabled { opacity:.4; cursor:not-allowed; }
.business-crm-zoom .business-crm-fit { display:flex; gap:6px; padding:0 10px; }
.business-crm-zoom .business-crm-fit .nf-icon { width:14px; height:14px; }
.business-crm-board-wrap { min-width:0; overflow-x:auto; padding-bottom:8px; overscroll-behavior-x:contain; scrollbar-width:thin; }
.business-crm-board { --business-crm-zoom:1; width:max-content; min-width:100%; display:flex; gap:12px; transform-origin:top left; }
.business-crm-column { --stage-color:#64748b; width:calc(294px * var(--business-crm-zoom)); min-width:calc(294px * var(--business-crm-zoom)); padding:11px; border:1px solid var(--nf-border); border-radius:20px; background:color-mix(in srgb,var(--nf-surface-soft) 88%,#dfe8f3); scroll-snap-align:start; }
.business-crm-column.stage-qualified { --stage-color:#0284c7; }
.business-crm-column.stage-proposal { --stage-color:#2563eb; }
.business-crm-column.stage-negotiation { --stage-color:#d97706; }
.business-crm-column.stage-won { --stage-color:#059669; }
.business-crm-column.stage-lost { --stage-color:#dc2626; }
.business-crm-column>header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:3px 4px 9px; }
.business-crm-column>header>span { min-width:27px; height:27px; padding:0 7px; display:grid; place-items:center; border:1px solid var(--nf-border); border-radius:999px; background:var(--nf-surface); color:var(--stage-color); font-size:11px; font-weight:900; }
.business-crm-column-title { display:flex; gap:9px; min-width:0; }
.business-crm-column-title>i { width:10px; height:10px; flex:0 0 10px; margin-top:5px; border-radius:50%; background:var(--stage-color); box-shadow:0 0 0 4px color-mix(in srgb,var(--stage-color) 15%,transparent); }
.business-crm-column-title h3 { margin:0; font-size:14px; }
.business-crm-column-title small { display:block; margin-top:2px; color:var(--nf-muted); font-size:10px; }
.business-crm-column-total { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 2px 9px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--nf-border) 60%,transparent); border-radius:12px; background:color-mix(in srgb,var(--nf-surface) 72%,transparent); }
.business-crm-column-total small { color:var(--nf-muted); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.business-crm-column-total strong { font-size:12px; }
.business-crm-stack { min-height:155px; display:grid; align-content:start; gap:9px; border-radius:15px; transition:.15s; }
.business-crm-stack.is-drag-over { padding:4px; background:color-mix(in srgb,var(--nf-primary) 9%,transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--nf-primary) 25%,transparent); }
.business-crm-card { position:relative; min-width:0; padding:12px; border:1px solid var(--nf-border); border-radius:16px; background:var(--nf-surface); box-shadow:0 6px 18px rgba(15,23,42,.045); transition:transform .16s,box-shadow .16s,border-color .16s; }
.business-crm-card:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(15,23,42,.09); border-color:color-mix(in srgb,var(--nf-primary) 25%,var(--nf-border)); }
.business-crm-card.is-dragging { opacity:.45; transform:rotate(1deg) scale(.98); }
.business-crm-card.is-overdue { border-left:4px solid var(--nf-danger); }
.business-crm-card-top { display:flex; align-items:center; gap:7px; }
.business-crm-drag { color:var(--nf-muted); font-weight:900; letter-spacing:-2px; cursor:grab; }
.business-crm-overdue { margin-left:auto; padding:4px 7px; border-radius:999px; background:var(--nf-danger-soft); color:var(--nf-danger); font-size:9px; font-weight:900; }
.business-crm-card-main { width:100%; display:block; padding:9px 0 6px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.business-crm-card-main h3 { margin:0 0 5px; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.business-crm-card-main p { margin:0; color:var(--nf-muted); font-size:11px; }
.business-crm-value { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:7px; }
.business-crm-value strong { font-size:16px; }
.business-crm-value span { color:var(--nf-muted); font-size:9px; }
.business-crm-progress { height:5px; margin:7px 0 10px; overflow:hidden; border-radius:999px; background:var(--nf-border); }
.business-crm-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--stage-color),var(--nf-accent)); }
.business-crm-card-meta { display:grid; gap:6px; padding:8px 0; border-block:1px solid var(--nf-border); }
.business-crm-card-meta span { min-width:0; display:flex; align-items:center; gap:5px; color:var(--nf-muted); font-size:9px; overflow-wrap:anywhere; }
.business-crm-card-meta .nf-icon { width:12px; height:12px; flex:0 0 12px; }
.business-crm-card-actions { display:flex; align-items:center; gap:6px; padding-top:9px; }
.business-crm-card-actions a { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--nf-border); border-radius:10px; background:var(--nf-surface-soft); color:var(--nf-muted); }
.business-crm-card-actions a:first-child { background:var(--nf-success-soft); color:var(--nf-success); }
.business-crm-card-actions .nf-icon { width:14px; height:14px; }
.business-crm-card-actions button { margin-left:auto; padding:7px 10px; border:1px solid var(--nf-border); border-radius:10px; background:var(--nf-surface-soft); color:var(--nf-text); cursor:pointer; font-size:10px; font-weight:850; }
.business-crm-mobile-stage { display:none; width:100%; margin-top:9px; min-height:36px; font-size:11px; }
.business-crm-empty { min-height:130px; display:grid; place-items:center; align-content:center; gap:5px; padding:16px; border:1px dashed var(--nf-border); border-radius:15px; color:var(--nf-muted); text-align:center; }
.business-crm-empty .nf-icon { width:21px; height:21px; }
.business-crm-empty strong { font-size:11px; }
.business-crm-empty span { font-size:9px; }
.business-crm-list table { min-width:920px; }
.business-crm-list td:first-child strong,.business-crm-list td:first-child small { display:block; }
.business-crm-list td:first-child small { margin-top:4px; color:var(--nf-muted); }
.business-crm-modal[hidden] { display:none!important; }
.business-crm-modal { position:fixed; inset:0; z-index:260; display:grid; place-items:center; padding:15px; }
.business-crm-modal-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(4,12,28,.72); backdrop-filter:blur(4px); }
.business-crm-modal>section { position:relative; z-index:1; width:min(1120px,100%); max-height:94vh; overflow:auto; padding:22px; border:1px solid var(--nf-border); border-radius:24px; background:var(--nf-surface); box-shadow:0 35px 90px rgba(2,8,23,.38); }
.business-crm-modal>section>header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.business-crm-modal>section>header h2 { margin:4px 0 0; }
.business-crm-modal-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:22px; }
.business-crm-activity { min-width:0; display:grid; align-content:start; gap:15px; padding-left:20px; border-left:1px solid var(--nf-border); }
.business-crm-activity h3 { margin:3px 0 0; }
.business-crm-timeline { max-height:340px; overflow:auto; display:grid; gap:0; padding-right:4px; }
.business-crm-timeline-item { position:relative; display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; padding-bottom:15px; }
.business-crm-timeline-item::before { content:""; position:absolute; left:5px; top:12px; bottom:0; width:1px; background:var(--nf-border); }
.business-crm-timeline-item:last-child::before { display:none; }
.business-crm-timeline-item>i { position:relative; z-index:1; width:11px; height:11px; margin-top:3px; border-radius:50%; background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent)); box-shadow:0 0 0 4px var(--nf-primary-soft); }
.business-crm-timeline-item strong { display:block; font-size:11px; line-height:1.45; }
.business-crm-timeline-item small { display:block; margin-top:3px; color:var(--nf-muted); font-size:9px; }
.business-crm-timeline-empty { padding:18px; border:1px dashed var(--nf-border); border-radius:14px; color:var(--nf-muted); font-size:11px; text-align:center; }
.business-crm-toast { position:fixed; right:20px; bottom:20px; z-index:300; max-width:min(360px,calc(100vw - 30px)); padding:13px 16px; border-radius:14px; background:#0f766e; color:#fff; box-shadow:0 18px 45px rgba(15,23,42,.2); font-size:12px; font-weight:800; }
.business-crm-toast.is-error { background:#b91c1c; }
body.business-crm-modal-open { overflow:hidden; }
/* Endurecimento responsivo geral sem alterar a identidade visual. */
html,body { max-width:100%; }
img,svg,video,canvas { max-width:100%; }
.app-main,.content,.card,.module-hero,.dashboard-hero,.table-wrap,.form-stack,.form-grid-2,.form-grid-3 { min-width:0; }
.content { overflow-x:clip; }
.card-header>div,.module-hero>div,.dashboard-hero>div { min-width:0; }
.form-stack input,.form-stack select,.form-stack textarea { min-width:0; max-width:100%; }
.table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.table-wrap table { width:100%; }
.form-actions-row { flex-wrap:wrap; }
.form-actions-row>.btn,.form-actions-row>a.btn { max-width:100%; }
@media (max-width:1180px) {
.business-crm-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.business-crm-toolbar { position:static; }
.business-crm-toolbar-spacer { display:none; }
.business-crm-modal-grid { grid-template-columns:1fr; }
.business-crm-activity { padding:18px 0 0; border-left:0; border-top:1px solid var(--nf-border); }
}
@media (max-width:900px) {
.business-module-nav { top:64px; margin-inline:-4px; }
.business-module-nav a { min-width:52px; justify-content:center; }
.business-command-hero { align-items:stretch; }
.business-command-copy h1 { max-width:100%; }
.business-hero-actions { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
.business-hero-actions .btn { justify-content:center; text-align:center; padding-inline:12px; }
.business-crm-search { flex-basis:100%; }
.business-crm-toolbar select { flex:1 1 180px; }
.business-crm-board { scroll-snap-type:x proximity; }
.business-crm-column { width:284px; min-width:284px; }
.business-crm-mobile-stage { display:block; }
.business-crm-drag { display:none; }
.business-crm-card { cursor:default; }
}
@media (max-width:720px) {
.content { padding-inline:12px!important; }
.business-command-hero { padding:22px!important; border-radius:22px; }
.business-command-copy h1 { font-size:clamp(31px,11vw,46px); }
.business-hero-actions { grid-template-columns:1fr; }
.business-hero-actions .btn { justify-content:flex-start; }
.business-module-nav { margin:12px -2px 18px; border-radius:15px; }
.business-module-nav a { padding-inline:12px; }
.business-module-nav a span { display:none; }
.business-module-nav a.is-active { min-width:auto; }
.business-module-nav a.is-active span { display:inline; }
.business-tab-heading { align-items:flex-start; }
.business-tab-heading>.badge { display:none; }
.business-crm-hero { padding:20px; }
.business-crm-hero h2 { padding-right:74px; font-size:22px; }
.business-crm-conversion { position:absolute; right:14px; top:15px; width:82px; height:82px; opacity:.82; }
.business-crm-conversion::before { inset:6px; }
.business-crm-conversion strong { font-size:18px; }
.business-crm-conversion span { font-size:7px; }
.business-crm-metrics { grid-template-columns:1fr 1fr; }
.business-crm-metrics article { padding:12px; gap:9px; }
.business-crm-metrics article>span { width:36px; height:36px; flex-basis:36px; }
.business-crm-metrics strong { font-size:16px; }
.business-crm-metrics em { display:none; }
.business-crm-toolbar>.btn,.business-crm-toolbar select { flex:1 1 145px; }
.business-crm-zoom { order:20; margin-left:auto; }
.business-crm-zoom .business-crm-fit span { display:none; }
.business-crm-segmented { flex:1 1 100%; }
.business-crm-segmented a { flex:1; }
.business-crm-board-wrap { margin-right:-12px; padding-right:12px; }
.business-crm-column { width:272px; min-width:272px; }
.business-crm-modal { padding:8px; }
.business-crm-modal>section { max-height:97vh; padding:16px; border-radius:20px; }
.business-crm-modal .form-grid-2,.business-crm-modal .form-grid-3 { grid-template-columns:1fr; }
.business-crm-modal .form-grid-span-2 { grid-column:auto; }
.card-header { align-items:flex-start; flex-direction:column; }
.card-header>.badge,.card-header>.btn,.card-header>a.btn { align-self:flex-start; }
.form-actions-row { display:grid; grid-template-columns:1fr; }
.form-actions-row>.btn,.form-actions-row>a.btn { width:100%; }
.module-hero,.dashboard-hero { overflow:hidden; }
}
@media (max-width:480px) {
.content { padding-inline:9px!important; }
.business-command-hero { padding:18px!important; }
.business-hero-tags span { width:100%; text-align:center; }
.business-crm-metrics { grid-template-columns:1fr; }
.business-crm-toolbar>.btn,.business-crm-toolbar select { width:100%; flex-basis:100%; }
.business-crm-zoom { width:100%; }
.business-crm-zoom button { flex:1; }
.business-crm-column { width:min(86vw,270px); min-width:min(86vw,270px); }
.business-tab-heading h2 { font-size:25px; }
.metric-card strong { overflow-wrap:anywhere; }
}
/* v2.4.1 — Patrimônio conectado às dívidas e menu compacto funcional. */
.nav-more-links a { display:flex; align-items:center; gap:9px; }
.nav-more-links .nav-icon { width:19px; height:19px; flex:0 0 19px; }
@media (min-width:901px) {
.app-shell.sidebar-collapsed .nav-more-links { display:none!important; }
.app-shell.sidebar-collapsed .nav-more[open] .nav-more-links {
display:grid!important;
position:fixed;
top:var(--nav-more-top, 80px);
left:var(--nav-more-left, 94px);
width:var(--nav-more-width, 280px);
max-height:calc(100dvh - 24px);
overflow:auto;
overscroll-behavior:contain;
margin:0!important;
padding:10px!important;
gap:4px!important;
border:1px solid color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border));
border-radius:18px;
background:color-mix(in srgb,var(--nf-surface) 96%,transparent);
box-shadow:0 24px 70px rgba(2,12,27,.27);
backdrop-filter:blur(16px);
z-index:1300;
}
.app-shell.sidebar-collapsed .nav-more[open] .nav-more-links::before {
content:'Mais recursos';
display:block;
padding:4px 8px 8px;
color:var(--nf-muted);
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.app-shell.sidebar-collapsed .nav-more[open] .nav-more-links a {
display:flex!important;
align-items:center;
justify-content:flex-start;
gap:11px;
min-height:43px;
padding:9px 11px!important;
border-radius:12px!important;
font-size:13px;
white-space:normal;
}
.app-shell.sidebar-collapsed .nav-more[open] .nav-more-links a > span:not(.nav-icon) {
display:inline!important;
min-width:0;
line-height:1.25;
}
.app-shell.sidebar-collapsed .nav-more[open] .nav-more-links .nav-icon {
display:grid!important;
width:20px;
height:20px;
flex:0 0 20px;
}
.app-shell.sidebar-collapsed .nav-more[open] > summary {
color:var(--nf-primary)!important;
background:color-mix(in srgb,var(--nf-primary) 12%,var(--nf-surface))!important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nf-primary) 20%,transparent);
}
}
.patrimony-value-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.patrimony-value-grid > div {
min-width:0;
padding:11px;
border:1px solid var(--nf-border);
border-radius:14px;
background:color-mix(in srgb,var(--nf-surface-soft) 84%,transparent);
}
.patrimony-value-grid small,.patrimony-net-value small,.loan-linked-asset small { display:block; color:var(--nf-muted); font-size:11px; font-weight:800; }
.patrimony-value-grid strong,.patrimony-net-value strong { display:block; margin-top:4px; overflow-wrap:anywhere; }
.patrimony-net-value {
margin-top:10px;
padding:12px 14px;
border-radius:15px;
background:linear-gradient(135deg,color-mix(in srgb,var(--nf-accent) 16%,var(--nf-surface)),color-mix(in srgb,var(--nf-primary) 8%,var(--nf-surface)));
border:1px solid color-mix(in srgb,var(--nf-accent) 26%,var(--nf-border));
}
.asset-debt-link,.asset-debt-free,.linked-asset-chip,.loan-asset-inline,.loan-linked-asset {
display:flex;
align-items:center;
gap:8px;
border-radius:12px;
text-decoration:none;
}
.asset-debt-link {
justify-content:space-between;
margin-top:10px;
padding:10px 12px;
color:var(--nf-text);
background:color-mix(in srgb,var(--nf-warning) 10%,var(--nf-surface));
border:1px solid color-mix(in srgb,var(--nf-warning) 26%,var(--nf-border));
}
.asset-debt-link:hover { border-color:var(--nf-warning); transform:translateY(-1px); }
.asset-debt-free { margin-top:10px; color:var(--nf-success); font-size:12px; font-weight:800; }
.linked-asset-chip,.loan-asset-inline {
width:max-content;
max-width:100%;
padding:6px 9px;
color:var(--nf-primary);
background:color-mix(in srgb,var(--nf-primary) 9%,var(--nf-surface));
border:1px solid color-mix(in srgb,var(--nf-primary) 22%,var(--nf-border));
font-size:12px;
font-weight:800;
}
.loan-asset-inline { margin-top:8px; }
.loan-linked-asset {
justify-content:flex-start;
padding:13px 15px;
color:var(--nf-text);
background:color-mix(in srgb,var(--nf-primary) 8%,var(--nf-surface));
border:1px solid color-mix(in srgb,var(--nf-primary) 24%,var(--nf-border));
}
.loan-linked-asset > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.loan-linked-asset > span:last-child { margin-left:auto; color:var(--nf-primary); font-size:12px; font-weight:850; }
.loan-linked-asset:hover { border-color:var(--nf-primary); }
.loan-future-installments {
display:grid;
gap:5px;
margin-top:10px;
padding:11px 13px;
border:1px solid color-mix(in srgb,var(--nf-warning) 28%,var(--nf-border));
border-radius:14px;
background:color-mix(in srgb,var(--nf-warning) 9%,var(--nf-surface));
}
.loan-future-installments > div { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.loan-future-installments span { color:var(--nf-text); font-weight:800; }
.loan-future-installments strong { color:var(--nf-warning-strong,var(--nf-warning)); text-align:right; }
.loan-future-installments small { color:var(--nf-muted); line-height:1.45; }
.asset-debt-link > div:first-child { display:grid; gap:3px; min-width:0; }
.asset-debt-link small { color:var(--nf-muted); font-size:11px; font-weight:700; }
@media (max-width:680px) {
.loan-future-installments > div { align-items:flex-start; flex-direction:column; gap:3px; }
.loan-future-installments strong { text-align:left; }
}
@media (max-width:680px) {
.patrimony-value-grid { grid-template-columns:1fr; }
.loan-linked-asset { align-items:flex-start; flex-wrap:wrap; }
.loan-linked-asset > span:last-child { width:100%; margin-left:28px; }
}
/* v2.5.0 — menu compacto permanece fechado após navegação e usa ícones menores. */
@media (min-width: 901px) {
.app-shell.sidebar-collapsed .sidebar-nav > a,
.app-shell.sidebar-collapsed .sidebar-nav > details.nav-more > summary {
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 13px !important;
}
.app-shell.sidebar-collapsed .sidebar-nav .nav-icon {
width: 25px !important;
height: 25px !important;
}
.app-shell.sidebar-collapsed .sidebar-nav .nav-icon .nf-icon {
width: 20px !important;
height: 20px !important;
}
.app-shell.sidebar-collapsed details.nav-more:not([open]) .nav-more-links {
display: none !important;
}
}
.alert-with-action { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.alert-with-action .btn { flex:0 0 auto; }
/* NowBusiness v2.5.0 — notificações por dispositivo. */
.device-push-panel {
padding: 22px;
border: 1px solid var(--border-color, #dbe5f2);
border-radius: 22px;
background: linear-gradient(135deg, rgba(0, 105, 255, .07), rgba(0, 196, 160, .05));
}
.device-push-heading {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
}
.device-push-heading h2 { margin: 2px 0 6px; }
.device-push-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.device-push-preferences {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.preference-switch-card--compact { min-height: 92px; }
.device-push-message {
margin: 14px 0 0;
color: var(--muted-color, #66758c);
font-size: .9rem;
}
.device-push-panel.is-ready [data-push-status] { color: #087e56; background: rgba(19, 190, 126, .12); }
.device-push-panel.is-blocked [data-push-status] { color: #b42318; background: rgba(239, 68, 68, .12); }
.notification-delivery-form { margin-top: 18px; }
.notification-sound-preview {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
border: 1px solid var(--border-color, #dbe5f2);
border-radius: 16px;
background: var(--surface-soft, #f8fafc);
}
.notification-sound-preview > span { font-weight: 700; }
.notification-sound-preview audio { width: 100%; max-width: 420px; }
@media (max-width: 760px) {
.device-push-heading { grid-template-columns: auto minmax(0, 1fr); }
.device-push-heading [data-push-status] { grid-column: 1 / -1; justify-self: start; }
.device-push-preferences { grid-template-columns: 1fr; }
.device-push-actions .btn { flex: 1 1 100%; }
}
/* NowBusiness v2.6.0 — modalidades, seleção de conta e integrações. */
.tenant-pill-copy { min-width: 0; flex: 1; }
.tenant-switch-link { display: inline-flex; margin-top: 5px; color: var(--nf-primary); font-size: 11px; font-weight: 850; text-decoration: none; }
.tenant-switch-link:hover { text-decoration: underline; }
.topbar-account-switch { gap: 7px; min-height: 40px; padding-inline: 12px; }
.topbar-account-switch .nf-icon { width: 18px; height: 18px; }
.environment-heading { width: min(100%, 720px); }
.environment-list { display: grid; gap: 14px; width: min(100%, 760px); margin-top: 24px; }
.environment-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; border: 1px solid var(--nf-border); border-radius: 20px; background: var(--nf-surface); box-shadow: 0 14px 34px rgba(15,23,42,.07); }
.environment-card-main { min-width: 0; }
.environment-card h3 { margin: 9px 0 4px; font-size: 20px; }
.environment-card p { margin: 0; color: var(--nf-muted); overflow-wrap: anywhere; }
.environment-mode { display: inline-flex; width: fit-content; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.environment-mode-personal { color: #075fd8; background: rgba(7,95,216,.10); }
.environment-mode-business { color: #047857; background: rgba(4,120,87,.11); }
.environment-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.environment-meta span { padding: 6px 9px; border-radius: 999px; background: var(--nf-surface-soft); color: var(--nf-muted); font-size: 11px; font-weight: 800; }
.credential-once { border-color: color-mix(in srgb, #d97706 38%, var(--nf-border)); background: color-mix(in srgb, #f59e0b 6%, var(--nf-surface)); }
.credential-code { display: block; padding: 14px 16px; border-radius: 14px; background: #0f172a; color: #e2e8f0; overflow-wrap: anywhere; user-select: all; }
.api-example { margin: 14px 0; padding: 16px; border-radius: 16px; background: #0f172a; color: #e2e8f0; overflow: auto; font-size: 12px; line-height: 1.6; }
.integration-event-list { display: grid; gap: 12px; }
.integration-event { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--nf-border); border-radius: 16px; background: var(--nf-surface-soft); }
.integration-event strong, .integration-event small { display: block; }
.integration-event small { margin-top: 4px; color: var(--nf-muted); }
.integration-event p { margin: 9px 0 0; }
.duplicate-decision { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--nf-border); }
.duplicate-decision label { display: grid; gap: 6px; max-width: 420px; }
.input-compact { min-height: 38px; min-width: 170px; border: 1px solid var(--nf-border); border-radius: 10px; padding: 0 10px; background: var(--nf-surface); color: var(--nf-text); }
@media (max-width: 760px) {
.topbar-account-switch span { display: none; }
.environment-card { align-items: stretch; flex-direction: column; }
.environment-card .btn { width: 100%; }
.integration-event { grid-template-columns: 1fr; }
.integration-event > .badge { justify-self: start; }
.inline-form { align-items: stretch; flex-direction: column; }
.input-compact { width: 100%; }
}
.plan-mode-badge{display:inline-flex;align-items:center;width:max-content;padding:.2rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;background:var(--surface-soft);color:var(--muted)}
/* Gestão segura de acessos empresariais */
.environment-actions { display:flex; justify-content:flex-start; gap:12px; width:min(100%,760px); margin-top:18px; }
@media (max-width:720px) { .environment-actions .btn { width:100%; } }
.invitation-link-card { border-color:color-mix(in srgb,var(--nf-primary) 28%,var(--nf-border)); }
.copy-link-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:16px; }
.copy-link-row input { width:100%; min-width:0; }
@media (max-width:680px) { .copy-link-row { grid-template-columns:1fr; } .copy-link-row .btn { width:100%; } }
/* NowBusiness v2.6.0 R12 — navegação mobile e redesign responsivo */
.nf-redesign .app-main{background:radial-gradient(circle at 100% 0,rgba(16,185,129,.08),transparent 32%),var(--nf-bg)}
.nf-redesign .topbar{margin:14px 18px 0;border:1px solid var(--nf-border);border-radius:20px;background:color-mix(in srgb,var(--nf-surface) 92%,transparent);box-shadow:0 14px 38px rgba(15,23,42,.07);backdrop-filter:blur(18px)}
.nf-redesign .content{max-width:1560px;width:100%;margin:0 auto;padding:24px 28px 48px}
.nf-redesign .sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--nf-surface) 96%,#0b63ce 4%),var(--nf-surface));border-right:1px solid var(--nf-border);box-shadow:12px 0 34px rgba(15,23,42,.05)}
.nf-redesign .tenant-pill{border:1px solid color-mix(in srgb,var(--nf-primary) 18%,var(--nf-border));background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 10%,var(--nf-surface)),color-mix(in srgb,#10b981 8%,var(--nf-surface)))}
.nf-redesign .sidebar-nav a{border-radius:14px;margin:2px 0;transition:transform .18s ease,background .18s ease,color .18s ease}
.nf-redesign .sidebar-nav a:hover{transform:translateX(3px)}
.nf-redesign .sidebar-nav a.is-active{background:linear-gradient(135deg,var(--nf-primary),#08b7a6);color:#fff;box-shadow:0 10px 24px rgba(7,95,216,.22)}
.nf-redesign .sidebar-nav a.is-active .nav-icon{background:rgba(255,255,255,.16);color:#fff}
.nf-redesign .card,.nf-redesign .module-hero,.nf-redesign .smart-finance-hub{border-radius:22px;border-color:color-mix(in srgb,var(--nf-primary) 10%,var(--nf-border));box-shadow:0 16px 44px rgba(15,23,42,.06)}
.nf-redesign.nf-mode-business .module-hero,.nf-redesign.nf-mode-business .dashboard-hero{background:linear-gradient(135deg,#092c57,#096b87 62%,#08b79f)}
.nf-redesign.nf-mode-personal .module-hero,.nf-redesign.nf-mode-personal .dashboard-hero{background:linear-gradient(135deg,#0b2f68,#075fd8 58%,#08b79f)}
.nf-mobile-bottom-nav,.nf-quick-create{display:none}
@media (max-width: 767px){
.nf-redesign .app-main{padding-bottom:104px}
.nf-redesign .topbar{margin:0;border-radius:0 0 22px 22px;border-width:0 0 1px;min-height:76px;padding:10px 16px;position:sticky;top:0;z-index:80}
.nf-redesign .topbar-left>div span{display:none}
.nf-redesign .topbar-left>div strong{font-size:20px}
.nf-redesign .topbar-actions .topbar-account-switch,.nf-redesign .topbar-actions>a[href="/ajuda"],.nf-redesign .topbar-actions>a[title="Suporte"],.nf-redesign .theme-toggle,.nf-redesign .user-chip,.nf-redesign .topbar-logout-form{display:none!important}
.nf-redesign .content{padding:18px 16px 28px}
.nf-redesign .support-fab{bottom:112px;right:14px;width:46px;height:46px;padding:0;border-radius:50%}
.nf-redesign .support-fab span{display:none}
.nf-mobile-bottom-nav{display:grid;grid-template-columns:1fr 1fr 78px 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:120;min-height:84px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--nf-surface) 96%,transparent);border-top:1px solid var(--nf-border);box-shadow:0 -16px 36px rgba(15,23,42,.12);backdrop-filter:blur(20px)}
.nf-mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--nf-muted);font-size:11px;font-weight:800;border-radius:16px;min-width:0}
.nf-mobile-nav-item.is-active{color:var(--nf-primary);background:color-mix(in srgb,var(--nf-primary) 9%,transparent)}
.nf-mobile-nav-icon{display:grid;place-items:center;width:30px;height:30px}
.nf-mobile-nav-icon .nf-icon{width:23px;height:23px}
.nf-mobile-nav-create{align-self:start;transform:translateY(-25px);border:0;background:transparent;color:var(--nf-muted);font:inherit;font-size:11px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.nf-mobile-nav-create>span{display:grid;place-items:center;width:66px;height:66px;border-radius:23px;background:linear-gradient(135deg,var(--nf-primary),#08b79f);color:#fff;border:6px solid var(--nf-surface);box-shadow:0 14px 30px rgba(7,95,216,.34)}
.nf-mobile-nav-create .nf-icon{width:30px;height:30px}
.nf-quick-create:not([hidden]){display:block;position:fixed;inset:0;z-index:180}
.nf-quick-create-backdrop{position:absolute;inset:0;border:0;background:rgba(2,8,23,.54);backdrop-filter:blur(4px);width:100%}
.nf-quick-create-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--nf-surface);border-radius:28px 28px 0 0;padding:10px 18px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -24px 70px rgba(2,8,23,.28);animation:nfSheetUp .22s ease-out}
.nf-quick-create-handle{width:52px;height:5px;border-radius:99px;background:var(--nf-border);margin:0 auto 14px}
.nf-quick-create-sheet header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.nf-quick-create-sheet h2{margin:3px 0 0;font-size:23px}
.nf-quick-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.nf-quick-create-grid a{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:14px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface-soft);color:var(--nf-text)}
.nf-quick-create-grid a>span{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:color-mix(in srgb,var(--nf-primary) 11%,var(--nf-surface));color:var(--nf-primary)}
.nf-quick-create-grid a strong{font-size:13px;line-height:1.15}.nf-quick-create-grid a small{font-size:10px;color:var(--nf-muted);line-height:1.2;margin-top:3px}
@keyframes nfSheetUp{from{transform:translateY(40px);opacity:.3}to{transform:none;opacity:1}}
}
@media (min-width:768px) and (max-width:1180px){.nf-redesign .content{padding:22px}.nf-redesign .topbar{margin:10px 12px 0}}
/* NowBusiness v2.6.1 — desempenho e contraste, sem alterar o layout R12 */
.nf-redesign .topbar,
.nf-mobile-bottom-nav,
.nf-quick-create-backdrop,
.dashboard-preferences-form > .form-actions {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.nf-redesign .topbar {
background: color-mix(in srgb, var(--nf-surface) 98%, var(--nf-bg)) !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
}
.nf-mobile-bottom-nav {
background: var(--nf-surface) !important;
box-shadow: 0 -8px 24px rgba(15, 23, 42, .09) !important;
}
.nf-redesign .sidebar {
box-shadow: 7px 0 22px rgba(15, 23, 42, .035) !important;
}
.nf-redesign .card,
.nf-redesign .module-hero,
.nf-redesign .dashboard-hero,
.nf-redesign .smart-finance-hub {
box-shadow: 0 8px 26px rgba(15, 23, 42, .05) !important;
}
.nf-redesign .sidebar-nav a,
.nf-redesign .btn,
.nf-redesign .card,
.nf-mobile-nav-item,
.nf-mobile-nav-create > span {
transition-duration: .12s !important;
}
.nf-redesign .sidebar-nav a:hover,
.nf-redesign .card:hover,
.nf-redesign .loan-card:hover,
.nf-redesign .file-drop:hover {
transform: none !important;
}
/* Contraste dos cabeçalhos em degradê. */
.nf-redesign.nf-mode-business .module-hero,
.nf-redesign.nf-mode-business .dashboard-hero,
.nf-redesign.nf-mode-personal .module-hero,
.nf-redesign.nf-mode-personal .dashboard-hero {
color: #fff;
}
.nf-redesign.nf-mode-business .module-hero h1,
.nf-redesign.nf-mode-business .dashboard-hero h1,
.nf-redesign.nf-mode-personal .module-hero h1,
.nf-redesign.nf-mode-personal .dashboard-hero h1,
.nf-redesign.nf-mode-business .module-hero h2,
.nf-redesign.nf-mode-personal .module-hero h2 {
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.nf-redesign.nf-mode-business .module-hero .muted,
.nf-redesign.nf-mode-business .dashboard-hero .muted,
.nf-redesign.nf-mode-personal .module-hero .muted,
.nf-redesign.nf-mode-personal .dashboard-hero .muted,
.nf-redesign.nf-mode-business .module-hero p:not(.page-kicker),
.nf-redesign.nf-mode-personal .module-hero p:not(.page-kicker) {
color: rgba(255, 255, 255, .86) !important;
}
.nf-redesign.nf-mode-business .module-hero .page-kicker,
.nf-redesign.nf-mode-business .dashboard-hero .page-kicker,
.nf-redesign.nf-mode-personal .module-hero .page-kicker,
.nf-redesign.nf-mode-personal .dashboard-hero .page-kicker {
color: #9ff7e9 !important;
opacity: 1 !important;
}
.nf-redesign .module-hero .badge,
.nf-redesign .dashboard-hero .badge {
color: #fff !important;
border-color: rgba(255, 255, 255, .34) !important;
background: rgba(255, 255, 255, .13) !important;
}
.nf-redesign .module-hero .btn-outline,
.nf-redesign .dashboard-hero .btn-outline {
color: #fff !important;
border-color: rgba(255, 255, 255, .48) !important;
background: rgba(255, 255, 255, .08) !important;
}
.nf-redesign .module-hero .btn-outline:hover,
.nf-redesign .dashboard-hero .btn-outline:hover {
background: rgba(255, 255, 255, .16) !important;
}
/* Textos auxiliares e estados com contraste previsível. */
.nf-redesign .muted,
.nf-redesign small,
.nf-redesign .help-text,
.nf-redesign .form-help,
.nf-redesign .field-help {
opacity: 1;
}
html[data-theme="light"] .nf-redesign {
--nf-muted: #52627a;
}
html[data-theme="dark"] .nf-redesign {
--nf-muted: #b7c3d5;
}
html[data-theme="dark"] .nf-redesign input::placeholder,
html[data-theme="dark"] .nf-redesign textarea::placeholder {
color: #9eacc1;
opacity: 1;
}
.nf-redesign input:disabled,
.nf-redesign select:disabled,
.nf-redesign textarea:disabled,
.nf-redesign .is-disabled {
opacity: .76;
}
/* Renderização progressiva apenas em blocos abaixo da dobra. */
@supports (content-visibility: auto) {
.nf-redesign .content > .card:not(:first-child),
.nf-redesign .content > .table-card,
.nf-redesign .content > .dashboard-section,
.nf-redesign .content > section:not(.module-hero):not(.dashboard-hero) {
content-visibility: auto;
contain-intrinsic-size: auto 420px;
}
}
@media (max-width: 767px) {
.nf-redesign .app-main {
background: var(--nf-bg) !important;
}
.nf-quick-create-sheet {
animation-duration: .14s !important;
box-shadow: 0 -14px 38px rgba(2, 8, 23, .20) !important;
}
.nf-mobile-nav-create > span {
box-shadow: 0 8px 20px rgba(7, 95, 216, .25) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nf-redesign *,
.nf-redesign *::before,
.nf-redesign *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* v2.7.0 — Ecossistema NowDev */
.ecosystem-hero{background:linear-gradient(135deg,rgba(7,95,216,.12),rgba(0,196,140,.10));border:1px solid rgba(7,95,216,.14)}
.ecosystem-event-list{display:grid;gap:14px}.ecosystem-event{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:18px;border:1px solid var(--border,#dbe3ef);border-radius:18px;background:var(--surface,#fff)}.ecosystem-event.is-pending{border-color:rgba(7,95,216,.28);box-shadow:0 12px 32px rgba(7,95,216,.08)}
.ecosystem-event-main{display:flex;gap:14px;min-width:0}.ecosystem-event-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#075fd8,#00a97c);color:#fff;font-weight:800}.ecosystem-event-main small{display:block;margin-top:4px}.ecosystem-event-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.ecosystem-event-meta span{padding:6px 9px;border-radius:999px;background:var(--surface-muted,#f3f6fa);font-size:.78rem}.ecosystem-independence-note{margin:10px 0 0}.ecosystem-decision{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--border,#dbe3ef)}
.ecosystem-master-card{overflow:hidden}.ecosystem-contract{display:grid;align-content:start;gap:14px;padding:20px;border-radius:18px;background:linear-gradient(145deg,rgba(7,95,216,.08),rgba(0,196,140,.08))}.ecosystem-contract code{display:inline-flex;width:max-content;padding:7px 10px;border-radius:9px;background:#10213b;color:#fff}.independent-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}.independent-flow span{padding:12px;border-radius:14px;background:var(--surface,#fff);font-weight:700}.independent-flow b{font-size:.75rem;color:var(--muted,#64748b)}.check-row.is-static{cursor:default}.permission-dot{width:9px;height:9px;border-radius:50%;background:#00a97c}.permission-dot.neutral{background:#075fd8}
@media(max-width:800px){.ecosystem-event{grid-template-columns:1fr}.ecosystem-event>.badge{justify-self:start}.ecosystem-decision{grid-template-columns:1fr}.independent-flow{grid-template-columns:1fr}.independent-flow b{transform:none}.ecosystem-filter-head{align-items:flex-start;gap:12px}.ecosystem-filter-head .button-row{overflow-x:auto;max-width:100%;padding-bottom:4px}}
.ecosystem-action-label{display:block;margin:0 0 5px;color:var(--nf-primary,#075fd8);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.ecosystem-event.is-failed{border-color:rgba(180,35,56,.25)}.ecosystem-error-note{margin:9px 0 0;padding:9px 11px;border-radius:11px;background:rgba(180,35,56,.08);color:#9f1f33;font-size:.82rem}.ecosystem-retry{grid-template-columns:minmax(220px,1fr) auto;align-items:end}.ecosystem-retry .btn{min-height:44px}@media(max-width:800px){.ecosystem-retry{grid-template-columns:1fr}}
/* NowBusiness v2.7.1 — vínculo automático do ecossistema */
.ecosystem-connect-shell{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:28px 16px}.ecosystem-connect-card{width:min(720px,100%);padding:32px;border:1px solid var(--border,#dfe7f1);border-radius:28px;background:var(--surface,#fff);box-shadow:0 24px 70px rgba(15,35,65,.14)}.ecosystem-connect-card h1{margin:.35rem 0 .65rem;font-size:clamp(1.9rem,5vw,2.7rem)}.ecosystem-connect-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}.ecosystem-connect-brand span{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:linear-gradient(145deg,#0871f9,#00b889);color:#fff;font-weight:800;letter-spacing:.04em;box-shadow:0 12px 28px rgba(7,95,216,.2)}.ecosystem-connect-brand b{color:var(--muted,#64748b);font-size:1.4rem}.ecosystem-connect-account{display:grid;gap:4px;padding:18px 20px;margin:22px 0;border-radius:18px;background:linear-gradient(145deg,rgba(7,95,216,.09),rgba(0,184,137,.09));border:1px solid rgba(7,95,216,.12)}.ecosystem-connect-account small,.ecosystem-connect-account span{color:var(--muted,#64748b)}.ecosystem-connect-account strong{font-size:1.15rem}.ecosystem-connect-steps,.ecosystem-guide-list{display:grid;gap:12px;padding:0;margin:22px 0;list-style:none}.ecosystem-connect-steps li,.ecosystem-guide-list li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}.ecosystem-connect-steps li b,.ecosystem-guide-list li b,.ecosystem-master-steps>div>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#075fd8;color:#fff;font-size:.83rem}.ecosystem-connect-actions{display:grid;grid-template-columns:1fr auto;gap:10px}.ecosystem-switch-account{display:block;margin-top:16px;text-align:center;font-weight:700;color:var(--primary,#075fd8)}.ecosystem-connect-footnote{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--border,#dfe7f1);font-size:.84rem;color:var(--muted,#64748b);text-align:center}.ecosystem-connect-error{text-align:center}.ecosystem-connect-error .notice{text-align:left}.ecosystem-settings-card{overflow:hidden}.ecosystem-settings-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:26px;align-items:start}.ecosystem-preferences-form{padding:20px;border-radius:20px;background:var(--surface-soft,#f7f9fc);border:1px solid var(--border,#dfe7f1)}.ecosystem-link-status{display:grid;gap:3px;padding:14px 16px;border-radius:14px;background:rgba(100,116,139,.08);border:1px solid rgba(100,116,139,.16)}.ecosystem-link-status.is-connected{background:rgba(0,169,124,.08);border-color:rgba(0,169,124,.22)}.ecosystem-link-status span{font-size:.84rem;color:var(--muted,#64748b)}.ecosystem-key-notice code{display:block;max-width:100%;padding:12px;border-radius:12px;overflow-wrap:anywhere;background:#10213b;color:#fff}.ecosystem-app-summary,.ecosystem-account-diagnostic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.ecosystem-app-summary span,.ecosystem-account-diagnostic span{display:grid;gap:4px;padding:14px;border-radius:14px;background:var(--surface-soft,#f7f9fc);border:1px solid var(--border,#dfe7f1)}.ecosystem-app-summary small,.ecosystem-account-diagnostic small{color:var(--muted,#64748b)}.ecosystem-app-summary code{overflow-wrap:anywhere}.ecosystem-master-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ecosystem-master-steps>div{display:grid;grid-template-columns:34px 1fr;gap:8px 10px;padding:18px;border-radius:18px;background:var(--surface-soft,#f7f9fc);border:1px solid var(--border,#dfe7f1)}.ecosystem-master-steps>div strong,.ecosystem-master-steps>div span{grid-column:2}.ecosystem-master-steps>div span{font-size:.84rem;color:var(--muted,#64748b)}.form-action-end{display:flex;align-items:end}.ecosystem-legacy-details>summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer}.ecosystem-legacy-details>summary span{color:var(--muted,#64748b);font-size:.84rem}
@media(max-width:900px){.ecosystem-settings-grid,.ecosystem-master-steps{grid-template-columns:1fr 1fr}.ecosystem-master-steps>div{min-height:150px}}
@media(max-width:640px){.ecosystem-connect-card{padding:22px 18px;border-radius:22px}.ecosystem-connect-actions,.ecosystem-settings-grid,.ecosystem-master-steps,.ecosystem-app-summary,.ecosystem-account-diagnostic{grid-template-columns:1fr}.ecosystem-connect-actions .btn{width:100%}.ecosystem-master-steps>div{min-height:0}.ecosystem-legacy-details>summary{display:grid}.form-action-end .btn{width:100%}}
/* v2.7.3 — retorno local e inequívoco da autorização NowBudget. */
.ecosystem-authorize-form{position:relative}
.ecosystem-submit-status{display:block;padding:12px 14px;border:1px solid var(--nf-border,#dfe7f1);border-radius:14px;font-size:.9rem;font-weight:700;line-height:1.45;background:var(--nf-surface-soft,#f7f9fc);color:var(--nf-text,#0f172a)}
.ecosystem-submit-status[hidden]{display:none}
.ecosystem-submit-status.is-info{border-color:color-mix(in srgb,var(--nf-primary,#075fd8) 24%,var(--nf-border,#dfe7f1));background:color-mix(in srgb,var(--nf-primary,#075fd8) 8%,var(--nf-surface,#fff));color:var(--nf-primary,#075fd8)}
.ecosystem-submit-status.is-success{border-color:rgba(0,169,124,.28);background:rgba(0,169,124,.09);color:#087a5b}
.ecosystem-submit-status.is-error{border-color:rgba(190,35,55,.28);background:rgba(190,35,55,.08);color:#a51f34}
.ecosystem-connect-actions .btn[aria-disabled="true"]{pointer-events:none}
/* =========================================================
NowBusiness 0.1.0 — workspace empresarial
========================================================= */
.nb-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: clamp(22px, 3vw, 34px);
border: 1px solid var(--border, #dce4ee);
border-radius: 24px;
background:
radial-gradient(circle at 88% 16%, rgba(35, 122, 255, .18), transparent 34%),
linear-gradient(135deg, var(--surface, #fff), var(--surface-soft, #f4f7fb));
box-shadow: var(--shadow-sm, 0 10px 30px rgba(15, 23, 42, .06));
}
.nb-hero::after {
content: "";
position: absolute;
right: -54px;
bottom: -76px;
width: 210px;
height: 210px;
border: 34px solid rgba(24, 105, 255, .07);
border-radius: 50%;
pointer-events: none;
}
.nb-hero > * { position: relative; z-index: 1; }
.nb-hero h1 { margin: 4px 0 8px; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.05; }
.nb-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nb-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.nb-kpi {
min-width: 0;
padding: 20px;
border: 1px solid var(--border, #dce4ee);
border-radius: 20px;
background: var(--surface, #fff);
box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .05));
}
.nb-kpi > span, .nb-kpi > small { display: block; color: var(--muted, #64748b); }
.nb-kpi > span { margin-bottom: 10px; font-size: .78rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.nb-kpi > strong { display: block; margin-bottom: 6px; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.1; overflow-wrap: anywhere; }
.nb-kpi.is-success { border-color: rgba(22, 163, 74, .28); background: linear-gradient(145deg, var(--surface, #fff), rgba(22, 163, 74, .06)); }
.nb-kpi.is-danger { border-color: rgba(220, 38, 38, .28); background: linear-gradient(145deg, var(--surface, #fff), rgba(220, 38, 38, .06)); }
.nb-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
gap: 20px;
align-items: start;
}
.nb-module-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.nb-module-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-module-grid > a {
min-width: 0;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
grid-template-areas: "icon title" "icon description";
column-gap: 12px;
align-items: center;
padding: 15px;
border: 1px solid var(--border, #dce4ee);
border-radius: 16px;
color: inherit;
background: var(--surface-soft, #f8fafc);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nb-module-grid > a:hover { transform: translateY(-2px); border-color: var(--primary, #1266df); box-shadow: 0 12px 25px rgba(15, 23, 42, .08); }
.nb-module-grid > a > span { grid-area: icon; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--primary, #1266df); background: rgba(18, 102, 223, .1); }
.nb-module-grid > a > span svg { width: 21px; height: 21px; }
.nb-module-grid > a > strong { grid-area: title; min-width: 0; line-height: 1.2; }
.nb-module-grid > a > small { grid-area: description; min-width: 0; margin-top: 3px; color: var(--muted, #64748b); line-height: 1.3; }
.nb-split {
display: grid;
grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
gap: 20px;
align-items: start;
}
.nb-list { display: grid; gap: 10px; }
.nb-list-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 13px 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 14px;
background: var(--surface-soft, #f8fafc);
}
.nb-list-row > div { min-width: 0; }
.nb-list-row strong, .nb-list-row small { display: block; }
.nb-list-row strong { overflow-wrap: anywhere; }
.nb-list-row small { margin-top: 4px; color: var(--muted, #64748b); line-height: 1.35; }
.nb-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.nb-priority { flex: 0 0 auto; width: 9px; height: 38px; border-radius: 999px; background: #94a3b8; }
.nb-priority.is-medium { background: #eab308; }
.nb-priority.is-high { background: #f97316; }
.nb-priority.is-urgent { background: #dc2626; }
.nb-order-items { display: grid; gap: 12px; }
.nb-order-item {
display: grid;
grid-template-columns: minmax(150px, 1.15fr) minmax(180px, 1.5fr) minmax(90px, .55fr) minmax(130px, .7fr) 42px;
gap: 10px;
align-items: end;
padding: 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 16px;
background: var(--surface-soft, #f8fafc);
}
.nb-order-item label { min-width: 0; }
.nb-order-item > .icon-btn { margin-bottom: 1px; }
.nb-stock-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.nb-stock-card {
padding: 17px;
border: 1px solid var(--border, #dce4ee);
border-radius: 18px;
background: var(--surface, #fff);
}
.nb-stock-card.is-low { border-color: rgba(220, 38, 38, .3); background: linear-gradient(145deg, var(--surface, #fff), rgba(220, 38, 38, .05)); }
.nb-stock-card header { display: flex; justify-content: space-between; gap: 10px; }
.nb-stock-card header > div { min-width: 0; }
.nb-stock-card strong, .nb-stock-card small { display: block; }
.nb-stock-card small { margin-top: 4px; color: var(--muted, #64748b); }
.nb-stock-value { margin: 18px 0 14px; font-size: 1.65rem; font-weight: 800; }
.nb-stock-card form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.nb-kanban {
display: grid;
grid-template-columns: repeat(6, minmax(245px, 1fr));
gap: 14px;
overflow-x: auto;
padding: 2px 2px 12px;
scroll-snap-type: x proximity;
}
.nb-kanban-column {
min-height: 330px;
padding: 12px;
border: 1px solid var(--border, #dce4ee);
border-radius: 18px;
background: var(--surface-soft, #f8fafc);
scroll-snap-align: start;
}
.nb-kanban-column > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 12px; }
.nb-kanban-column > header h3 { margin: 0; font-size: .95rem; }
.nb-kanban-column > div { display: grid; gap: 10px; }
.nb-deal-card {
padding: 13px;
border: 1px solid var(--border, #dce4ee);
border-radius: 14px;
background: var(--surface, #fff);
box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}
.nb-deal-card strong, .nb-deal-card small { display: block; }
.nb-deal-card small { margin-top: 5px; color: var(--muted, #64748b); }
.nb-deal-card form { margin-top: 10px; }
.nb-task-list { display: grid; gap: 10px; }
.nb-task {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 15px;
background: var(--surface, #fff);
}
.nb-task.is-completed { opacity: .65; }
.nb-task.is-completed strong { text-decoration: line-through; }
.nb-task-check button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.nb-task-copy { min-width: 0; }
.nb-task-copy strong, .nb-task-copy small { display: block; }
.nb-task-copy small { margin-top: 4px; color: var(--muted, #64748b); }
.nb-contract-card {
padding: 15px;
border: 1px solid var(--border, #dce4ee);
border-radius: 16px;
background: var(--surface-soft, #f8fafc);
}
.nb-contract-card > header { display: flex; justify-content: space-between; gap: 12px; }
.nb-contract-card > header > div { min-width: 0; }
.nb-contract-card strong, .nb-contract-card small { display: block; }
.nb-contract-card small { margin-top: 4px; color: var(--muted, #64748b); }
.nb-contract-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.nb-contract-meta span { padding: 9px; border-radius: 11px; color: var(--muted, #64748b); background: var(--surface, #fff); font-size: .78rem; }
.nb-contract-meta b { display: block; margin-top: 3px; color: var(--text, #0f172a); font-size: .9rem; }
.nb-installments { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border, #dce4ee); }
.nb-installments h3 { margin: 0 0 12px; }
.nb-receipt-preview { overflow: hidden; }
.nb-receipt-paper {
max-width: 780px;
margin: 10px auto;
padding: clamp(24px, 6vw, 58px);
border: 1px solid var(--border, #dce4ee);
border-radius: 8px;
background: #fff;
color: #111827;
box-shadow: 0 20px 60px rgba(15, 23, 42, .1);
}
.nb-receipt-paper h3 { margin: 0 0 28px; text-align: center; letter-spacing: .16em; }
.nb-receipt-paper p { font-size: 1.02rem; line-height: 1.8; }
.nb-receipt-paper small { display: block; margin-top: 28px; color: #64748b; }
.nb-definition-list { margin: 0; }
.nb-definition-list > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border, #dce4ee); }
.nb-definition-list > div:last-child { border-bottom: 0; }
.nb-definition-list dt { color: var(--muted, #64748b); }
.nb-definition-list dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.business-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.business-tabs a { flex: 0 0 auto; padding: 10px 14px; border: 1px solid var(--border, #dce4ee); border-radius: 999px; color: var(--muted, #64748b); text-decoration: none; background: var(--surface, #fff); }
.business-tabs a.active { color: #fff; border-color: var(--primary, #1266df); background: var(--primary, #1266df); }
@media (max-width: 1180px) {
.nb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-dashboard-grid, .nb-split { grid-template-columns: 1fr; }
.nb-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-order-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-order-item > .icon-btn { align-self: center; }
}
@media (max-width: 720px) {
.nb-hero { align-items: stretch; flex-direction: column; border-radius: 20px; }
.nb-hero .hero-actions { width: 100%; }
.nb-hero .hero-actions .btn, .nb-hero .hero-actions form, .nb-hero .hero-actions form .btn { flex: 1 1 auto; width: 100%; }
.nb-kpi-grid, .nb-module-grid, .nb-module-grid.compact, .nb-stock-grid { grid-template-columns: 1fr; }
.nb-kpi { padding: 17px; }
.nb-list-row { align-items: flex-start; flex-direction: column; }
.nb-row-actions { width: 100%; justify-content: flex-start; }
.nb-order-item { grid-template-columns: 1fr; }
.nb-order-item > .icon-btn { justify-self: end; }
.nb-stock-card form { grid-template-columns: 1fr; }
.nb-task { grid-template-columns: auto minmax(0, 1fr); }
.nb-task > .badge { grid-column: 2; justify-self: start; }
.nb-contract-meta { grid-template-columns: 1fr; }
.nb-definition-list > div { grid-template-columns: 1fr; gap: 5px; }
.nb-kanban { grid-template-columns: repeat(6, minmax(84vw, 1fr)); margin-inline: -4px; }
}
.nb-form-fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.nb-form-fieldset:disabled {
opacity: .78;
}
.nb-form-fieldset:disabled input,
.nb-form-fieldset:disabled select,
.nb-form-fieldset:disabled textarea {
cursor: not-allowed;
}
/* NowBusiness v0.7 · Central comercial */
.nb-commercial-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
.nb-commercial-header .button-row { justify-content: flex-end; }
.nb-copy-field {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.nb-copy-field input { min-width: 0; }
.nb-commercial-kanban {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(285px, 1fr);
gap: 16px;
overflow-x: auto;
padding: 3px 2px 14px;
scroll-snap-type: x proximity;
}
.nb-commercial-column {
min-height: 420px;
padding: 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 18px;
background: var(--surface-soft, #f8fafc);
scroll-snap-align: start;
}
.nb-commercial-column > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.nb-commercial-column > header > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.stage-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 999px; background: var(--primary, #1266df); }
.nb-commercial-cards { display: grid; gap: 10px; }
.nb-opportunity-card {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 15px;
background: var(--surface, #fff);
box-shadow: 0 7px 20px rgba(15, 23, 42, .045);
}
.nb-opportunity-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.nb-opportunity-card strong, .nb-opportunity-card small { display: block; }
.nb-opportunity-card small { margin-top: 3px; color: var(--muted, #64748b); }
.nb-opportunity-card form { display: grid; gap: 8px; }
.nb-score {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
padding: 5px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--primary, #1266df) 12%, transparent);
color: var(--primary, #1266df);
font-size: .76rem;
font-weight: 800;
}
.nb-pipeline-config-grid { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 18px; }
.nb-proposal-items { display: grid; gap: 10px; }
.nb-proposal-item {
display: grid;
grid-template-columns: minmax(180px, 1.6fr) minmax(90px, .6fr) minmax(110px, .8fr) minmax(100px, .7fr) auto;
gap: 10px;
align-items: end;
padding: 12px;
border: 1px solid var(--border, #dce4ee);
border-radius: 14px;
background: var(--surface-soft, #f8fafc);
}
.nb-proposal-item label { min-width: 0; }
.nb-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nb-action-grid > * { min-width: 0; }
.nb-inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.nb-inline-form label { min-width: 150px; flex: 1 1 180px; }
.nb-conversion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nb-timeline { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nb-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 6px; width: 2px; background: var(--border, #dce4ee); }
.nb-timeline > * { position: relative; padding-left: 25px; }
.nb-timeline > *::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border: 3px solid var(--surface, #fff); border-radius: 50%; background: var(--primary, #1266df); box-shadow: 0 0 0 1px var(--border, #dce4ee); }
.nb-goal-list { display: grid; gap: 14px; }
.nb-goal-list > article { padding: 15px; border: 1px solid var(--border, #dce4ee); border-radius: 15px; background: var(--surface-soft, #f8fafc); }
.nb-goal-list header { display: flex; justify-content: space-between; gap: 10px; }
.nb-progress { height: 9px; overflow: hidden; margin: 10px 0 7px; border-radius: 999px; background: var(--border, #dce4ee); }
.nb-progress > span { display: block; height: 100%; min-width: 2px; max-width: 100%; border-radius: inherit; background: var(--primary, #1266df); }
.nb-contract-governance { display: grid; gap: 14px; }
.nb-contract-governance > article { padding: 16px; border: 1px solid var(--border, #dce4ee); border-radius: 16px; background: var(--surface-soft, #f8fafc); }
.nb-amendment { padding: 12px; border-left: 3px solid var(--primary, #1266df); border-radius: 0 12px 12px 0; background: var(--surface, #fff); }
/* Documentos e portal públicos */
.nb-public-body { min-height: 100vh; margin: 0; background: #eef3f8; color: #142033; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.nb-public-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #dbe4ee; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); }
.nb-public-header > div { width: min(1160px, calc(100% - 32px)); min-height: 68px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nb-public-header img { width: 36px; height: 36px; object-fit: contain; }
.nb-public-header strong, .nb-public-header small { display: block; }
.nb-public-header small { color: #64748b; }
.nb-public-shell { width: min(1160px, calc(100% - 32px)); margin: 30px auto 50px; }
.nb-public-footer { padding: 25px 16px 38px; text-align: center; color: #64748b; }
.nb-public-document { overflow: hidden; border: 1px solid #dbe4ee; border-radius: 22px; background: #fff; box-shadow: 0 22px 70px rgba(15, 23, 42, .08); }
.nb-public-document > header { display: flex; justify-content: space-between; gap: 20px; padding: clamp(22px, 4vw, 42px); border-bottom: 1px solid #e4ebf2; background: linear-gradient(135deg, #f8fbff, #eef5ff); }
.nb-public-document > header h1 { margin: 6px 0; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.nb-public-document > header p { margin: 0; color: #64748b; }
.nb-public-document .table-wrap { margin: 0; }
.nb-public-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(20px, 4vw, 38px); }
.nb-public-parties > div, .nb-signature-summary, .nb-document-section { padding: 18px; border: 1px solid #e1e8f0; border-radius: 16px; background: #fbfdff; }
.nb-public-parties strong, .nb-public-parties span { display: block; }
.nb-public-parties span { margin-top: 5px; color: #64748b; }
.nb-document-section { margin: 0 clamp(20px, 4vw, 38px) 22px; }
.nb-document-section h2, .nb-document-section h3 { margin-top: 0; }
.nb-public-totals { display: grid; gap: 7px; width: min(420px, calc(100% - 40px)); margin: 18px 20px 30px auto; padding: 18px; border-radius: 16px; background: #f3f7fb; }
.nb-public-totals > div { display: flex; justify-content: space-between; gap: 15px; }
.nb-public-totals > div:last-child { padding-top: 9px; border-top: 1px solid #dbe4ee; font-size: 1.15rem; font-weight: 800; }
.nb-public-decision { padding: clamp(20px, 4vw, 38px); border-top: 1px solid #e1e8f0; background: #f8fafc; }
.nb-public-decision form { display: grid; gap: 13px; max-width: 720px; }
.nb-public-decision .button-row { justify-content: flex-start; }
.nb-signature-summary { margin: clamp(20px, 4vw, 38px); }
.nb-customer-portal { display: grid; gap: 22px; }
.nb-portal-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.nb-portal-kpis > article { padding: 18px; border: 1px solid #dbe4ee; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .04); }
.nb-portal-kpis span, .nb-portal-kpis strong { display: block; }
.nb-portal-kpis span { color: #64748b; font-size: .82rem; }
.nb-portal-kpis strong { margin-top: 6px; font-size: 1.55rem; }
@media (max-width: 980px) {
.nb-pipeline-config-grid, .nb-conversion-grid { grid-template-columns: 1fr; }
.nb-proposal-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-proposal-item > :first-child { grid-column: 1 / -1; }
.nb-portal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.nb-commercial-header { align-items: stretch; flex-direction: column; }
.nb-commercial-header .button-row { justify-content: flex-start; }
.nb-commercial-kanban { grid-auto-columns: minmax(84vw, 1fr); }
.nb-action-grid, .nb-proposal-item, .nb-public-parties, .nb-portal-kpis { grid-template-columns: 1fr; }
.nb-proposal-item > :first-child { grid-column: auto; }
.nb-copy-field { grid-template-columns: 1fr; }
.nb-public-document > header { flex-direction: column; }
.nb-public-shell, .nb-public-header > div { width: min(100% - 18px, 1160px); }
.nb-public-document { border-radius: 16px; }
.nb-public-decision .button-row { flex-direction: column; }
.nb-public-decision .button-row .btn { width: 100%; }
}
.nb-commercial-column .stage-dot { background: var(--stage-color, var(--primary, #1266df)); }
.nb-progress > i { display: block; height: 100%; min-width: 2px; max-width: 100%; border-radius: inherit; background: var(--primary, #1266df); }
.nb-public-totals > span { display: flex; justify-content: space-between; gap: 15px; }
.nb-public-totals > span.grand { padding-top: 9px; border-top: 1px solid #dbe4ee; font-size: 1.15rem; font-weight: 800; }
.nb-public-header a { display: inline-flex; align-items: center; gap: 10px; color: #142033; text-decoration: none; }
.nb-timeline > h3 { padding-left: 0; }
.nb-timeline > h3::before { display: none; }
.nb-contract-governance .nb-contract-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
.nb-contract-governance .nb-contract-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.nb-contract-governance .nb-contract-meta { grid-template-columns: 1fr; }
}
/* ======================================================================
NowBusiness v0.9.0 · Operações, identidade e correções responsivas
====================================================================== */
/* Identidade oficial */
.sidebar-logo-badge {
overflow: visible !important;
background: transparent !important;
box-shadow: none !important;
}
.sidebar-logo-icon {
width: 48px !important;
height: 48px !important;
max-width: none !important;
object-fit: contain !important;
border-radius: 15px !important;
filter: drop-shadow(0 8px 15px rgba(0, 45, 110, .18));
}
.sidebar-logo-text { margin-left: 2px; }
.sidebar-logo-text b,
.sidebar-logo-text em { font-style: normal; }
.nf-inline-symbol {
display: grid;
place-items: center;
width: 62px;
height: 62px;
flex: 0 0 62px;
overflow: visible;
background: transparent;
}
.nf-inline-symbol img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 18px;
filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .24));
}
.auth-card-brand-mobile .nf-inline-symbol img { filter: drop-shadow(0 10px 20px rgba(15, 23, 42, .16)); }
/* Elimina sobreposição dos cartões e campos em resoluções intermediárias */
.nb-split,
.nb-workspace-grid,
.grid-2,
.dashboard-grid {
min-width: 0;
}
.nb-split > *,
.nb-workspace-grid > *,
.grid-2 > *,
.dashboard-grid > *,
.form-grid > *,
.form-grid-2 > * {
min-width: 0;
max-width: 100%;
}
.form-stack,
.form-grid,
.form-grid-2,
.card,
.nb-list-card,
.nb-form-card { min-width: 0; }
.form-stack input,
.form-stack select,
.form-stack textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-grid-2 input,
.form-grid-2 select,
.form-grid-2 textarea {
width: 100%;
min-width: 0;
max-width: 100%;
}
.nb-split {
grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr) !important;
align-items: start !important;
}
@media (max-width: 1380px) {
.nb-split { grid-template-columns: 1fr !important; }
.nb-split > .card { width: 100%; }
}
@media (max-width: 1080px) {
.form-grid-2 { grid-template-columns: 1fr !important; }
.form-grid-2 .span-2 { grid-column: auto !important; }
}
/* Checkbox confiável em todos os navegadores e temas */
label.checkbox-line,
.checkbox-line {
display: flex !important;
align-items: flex-start !important;
gap: 11px !important;
min-width: 0 !important;
min-height: 46px !important;
padding: 11px 13px !important;
border: 1px solid var(--border, var(--nf-border, #dce4ee)) !important;
border-radius: 14px !important;
background: var(--surface-soft, var(--nf-surface-soft, #f8fafc)) !important;
}
label.checkbox-line > span,
.checkbox-line > span {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
line-height: 1.45 !important;
}
label.checkbox-line input[type="checkbox"],
.checkbox-line input[type="checkbox"],
.form-stack input[type="checkbox"],
.form-grid input[type="checkbox"],
.form-grid-2 input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
display: inline-grid !important;
place-content: center !important;
width: 21px !important;
height: 21px !important;
min-width: 21px !important;
min-height: 21px !important;
max-width: 21px !important;
max-height: 21px !important;
flex: 0 0 21px !important;
margin: 1px 0 0 !important;
padding: 0 !important;
border: 1.5px solid color-mix(in srgb, var(--primary, #075fd8) 45%, var(--border, #cbd5e1)) !important;
border-radius: 6px !important;
background: var(--surface, #fff) !important;
box-shadow: none !important;
cursor: pointer !important;
}
label.checkbox-line input[type="checkbox"]::before,
.checkbox-line input[type="checkbox"]::before,
.form-stack input[type="checkbox"]::before,
.form-grid input[type="checkbox"]::before,
.form-grid-2 input[type="checkbox"]::before {
content: "";
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) scale(0);
transform-origin: center;
transition: transform .12s ease;
}
label.checkbox-line input[type="checkbox"]:checked,
.checkbox-line input[type="checkbox"]:checked,
.form-stack input[type="checkbox"]:checked,
.form-grid input[type="checkbox"]:checked,
.form-grid-2 input[type="checkbox"]:checked {
border-color: var(--primary, #075fd8) !important;
background: linear-gradient(135deg, var(--primary, #075fd8), var(--accent, #00b997)) !important;
}
label.checkbox-line input[type="checkbox"]:checked::before,
.checkbox-line input[type="checkbox"]:checked::before,
.form-stack input[type="checkbox"]:checked::before,
.form-grid input[type="checkbox"]:checked::before,
.form-grid-2 input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
/* Contraste da central de ajuda */
.module-hero .help-plan-card,
.help-hero .help-plan-card {
color: #fff !important;
border-color: rgba(255, 255, 255, .24) !important;
background: rgba(255, 255, 255, .12) !important;
backdrop-filter: blur(16px);
}
.module-hero .help-plan-card *,
.help-hero .help-plan-card * { color: rgba(255, 255, 255, .94) !important; }
/* Barra de abas sem quebrar ou invadir cartões */
.business-tabs.nb-operations-tabs {
display: flex;
gap: 9px;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 12px;
scrollbar-width: thin;
scroll-snap-type: x proximity;
}
.business-tabs.nb-operations-tabs a {
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
}
/* Operações v0.9 */
.nb-operations-hero { position: relative; overflow: hidden; }
.nb-operations-hero::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
right: -90px;
bottom: -180px;
border-radius: 999px;
background: rgba(255, 255, 255, .1);
pointer-events: none;
}
.nb-operations-kpis {
display: grid;
grid-template-columns: repeat(6, minmax(145px, 1fr));
gap: 14px;
}
.nb-operation-kpi {
min-width: 0;
padding: 18px;
border: 1px solid var(--border, #dce4ee);
border-radius: 18px;
background: var(--surface, #fff);
box-shadow: 0 9px 28px rgba(15, 23, 42, .045);
}
.nb-operation-kpi span,
.nb-operation-kpi strong,
.nb-operation-kpi small { display: block; }
.nb-operation-kpi span { color: var(--muted, #64748b); font-size: .78rem; font-weight: 780; }
.nb-operation-kpi strong { margin: 8px 0 5px; font-size: clamp(1.55rem, 2.3vw, 2.05rem); letter-spacing: -.04em; }
.nb-operation-kpi small { color: var(--muted, #64748b); }
.nb-operations-module-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.nb-operation-module {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 13px;
align-items: start;
padding: 18px;
border: 1px solid var(--border, #dce4ee);
border-radius: 18px;
color: var(--text, #0f172a);
text-decoration: none;
background: linear-gradient(145deg, var(--surface, #fff), color-mix(in srgb, var(--surface-soft, #f8fafc) 68%, var(--surface, #fff)));
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nb-operation-module:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary, #075fd8) 35%, var(--border, #dce4ee)); box-shadow: 0 16px 35px rgba(15, 23, 42, .08); }
.nb-operation-module > span {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 15px;
color: var(--primary, #075fd8);
background: color-mix(in srgb, var(--primary, #075fd8) 10%, var(--surface, #fff));
}
.nb-operation-module strong,
.nb-operation-module small { display: block; }
.nb-operation-module strong { margin: 1px 0 5px; }
.nb-operation-module small { color: var(--muted, #64748b); line-height: 1.5; }
.nb-operations-overview { align-items: start; }
.nb-operation-list { display: grid; gap: 10px; }
.nb-operation-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
min-width: 0;
padding: 13px 14px;
border: 1px solid var(--border, #e2e8f0);
border-radius: 14px;
color: var(--text, #0f172a);
text-decoration: none;
background: var(--surface-soft, #f8fafc);
}
.nb-operation-row > div { min-width: 0; }
.nb-operation-row strong,
.nb-operation-row small { display: block; }
.nb-operation-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-operation-row small { margin-top: 4px; color: var(--muted, #64748b); }
.nb-project-row { align-items: flex-start; }
.w-full { width: 100%; }
.nb-workspace-grid {
display: grid;
grid-template-columns: minmax(430px, .9fr) minmax(500px, 1.1fr);
gap: 20px;
align-items: start;
}
.nb-form-card,
.nb-list-card { overflow: hidden; }
.nb-list-card { position: sticky; top: 88px; max-height: calc(100vh - 112px); }
.nb-list-card > .nb-operation-cards,
.nb-list-card > .nb-employee-list,
.nb-list-card > .nb-automation-list,
.nb-list-card > .nb-approval-list,
.nb-list-card > .nb-document-library { max-height: calc(100vh - 260px); overflow: auto; padding-right: 4px; }
.nb-filter-toolbar { margin: 0 0 14px; }
.nb-filter-toolbar input {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 13px;
color: var(--text, #0f172a);
background: var(--surface-soft, #f8fafc);
}
.nb-operation-cards { display: grid; gap: 12px; }
.nb-operation-card {
min-width: 0;
padding: 16px;
border: 1px solid var(--border, #dce4ee);
border-radius: 17px;
background: var(--surface-soft, #f8fafc);
}
.nb-operation-card.is-overdue { border-color: color-mix(in srgb, #dc2626 50%, var(--border, #dce4ee)); }
.nb-operation-card header,
.nb-approval-list article > header,
.nb-automation-list article > header,
.nb-document-card header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.nb-operation-card header > div,
.nb-approval-list article > header > div,
.nb-automation-list article > header > div,
.nb-document-card header > div { min-width: 0; }
.nb-operation-card h3,
.nb-approval-list h3,
.nb-automation-list h3 { margin: 3px 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.nb-operation-card > p { margin: 12px 0; color: var(--muted, #64748b); line-height: 1.55; }
.nb-record-number { color: var(--primary, #075fd8); font-size: .72rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.nb-record-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 13px;
margin-top: 11px;
color: var(--muted, #64748b);
font-size: .76rem;
}
.nb-record-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.nb-record-meta .nf-icon { width: 14px; height: 14px; }
.nb-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; color: var(--muted, #64748b); font-size: .75rem; }
.nb-badge-stack { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.nb-priority-low { background: #eef2f7 !important; color: #475569 !important; }
.nb-priority-medium { background: #e8f2ff !important; color: #075fd8 !important; }
.nb-priority-high { background: #fff4dd !important; color: #a35b00 !important; }
.nb-priority-urgent { background: #fee8e8 !important; color: #b91c1c !important; }
.nb-health-on_track { background: #e5faf2 !important; color: #087a58 !important; }
.nb-health-attention { background: #fff4dd !important; color: #9a5b00 !important; }
.nb-health-critical { background: #fee8e8 !important; color: #b91c1c !important; }
.status-draft,
.status-planning { background: #eef2f7 !important; color: #475569 !important; }
.status-in_progress,
.status-triage { background: #e8f2ff !important; color: #075fd8 !important; }
.status-paused,
.status-on_hold,
.status-waiting { background: #fff4dd !important; color: #8a5700 !important; }
.status-completed,
.status-resolved,
.status-closed,
.status-success { background: #e5faf2 !important; color: #087a58 !important; }
.status-cancelled,
.status-rejected,
.status-failed,
.status-expired { background: #fee8e8 !important; color: #b91c1c !important; }
.status-running { background: #e8f2ff !important; color: #075fd8 !important; }
.status-skipped { background: #eef2f7 !important; color: #475569 !important; }
.nb-record-detail { overflow: hidden; }
.nb-detail-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
flex: 1 1 auto;
}
.nb-detail-grid > div {
min-width: 0;
padding: 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 14px;
background: var(--surface-soft, #f8fafc);
}
.nb-detail-grid span,
.nb-detail-grid strong { display: block; }
.nb-detail-grid span { color: var(--muted, #64748b); font-size: .74rem; }
.nb-detail-grid strong { margin-top: 5px; overflow-wrap: anywhere; }
.nb-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.nb-detail-columns > * { min-width: 0; }
.nb-preserve-lines { white-space: pre-wrap; line-height: 1.65; color: var(--muted, #64748b); }
.nb-timeline article { padding-bottom: 4px; }
.nb-timeline article p { margin: 4px 0; white-space: pre-wrap; color: var(--muted, #64748b); }
.nb-timeline article small { color: var(--muted, #64748b); }
.nb-project-summary { display: flex; gap: 22px; align-items: center; }
.nb-project-progress-ring {
--value: 0;
display: grid;
place-content: center;
width: 132px;
height: 132px;
flex: 0 0 132px;
border-radius: 999px;
background: radial-gradient(circle closest-side, var(--surface, #fff) 78%, transparent 80% 100%), conic-gradient(var(--primary, #075fd8) calc(var(--value) * 1%), var(--border, #e2e8f0) 0);
}
.nb-project-progress-ring strong,
.nb-project-progress-ring span { display: block; text-align: center; }
.nb-project-progress-ring strong { font-size: 1.45rem; }
.nb-project-progress-ring span { color: var(--muted, #64748b); font-size: .72rem; }
.nb-milestone-list { display: grid; gap: 9px; }
.nb-milestone-list article {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid var(--border, #dce4ee);
border-radius: 14px;
background: var(--surface-soft, #f8fafc);
}
.nb-milestone-list article strong,
.nb-milestone-list article small { display: block; }
.nb-milestone-list article small { margin-top: 3px; color: var(--muted, #64748b); }
.nb-milestone-list article.is-completed strong { text-decoration: line-through; color: var(--muted, #64748b); }
.nb-milestone-check {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--border, #cbd5e1);
border-radius: 9px;
color: #fff;
background: var(--surface, #fff);
cursor: pointer;
}
.is-completed .nb-milestone-check { border-color: var(--accent, #00b997); background: var(--accent, #00b997); }
.nb-milestone-check .nf-icon { width: 16px; height: 16px; }
.nb-message-list { display: grid; gap: 10px; }
.nb-message-list article { padding: 13px; border: 1px solid var(--border, #dce4ee); border-radius: 14px; background: var(--surface-soft, #f8fafc); }
.nb-message-list header { display: flex; justify-content: space-between; gap: 10px; }
.nb-message-list p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.55; }
.nb-message-list small { color: var(--muted, #64748b); }
.nb-employee-list { display: grid; gap: 10px; }
.nb-employee-list > article {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
padding: 13px;
border: 1px solid var(--border, #dce4ee);
border-radius: 15px;
background: var(--surface-soft, #f8fafc);
}
.nb-employee-list > article > .button-row { grid-column: 2 / -1; justify-content: flex-start; }
.nb-employee-list strong,
.nb-employee-list small { display: block; }
.nb-employee-list small { margin-top: 3px; color: var(--muted, #64748b); }
.nb-avatar {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
color: #fff;
font-weight: 850;
background: linear-gradient(135deg, var(--primary, #075fd8), var(--accent, #00b997));
}
.nb-avatar.is-large { width: 62px; height: 62px; border-radius: 19px; font-size: 1.1rem; }
.nb-person-title { display: flex; align-items: center; gap: 13px; }
.nb-rule-list,
.nb-approval-list,
.nb-automation-list { display: grid; gap: 11px; }
.nb-rule-list > article,
.nb-approval-list > article,
.nb-automation-list > article {
padding: 15px;
border: 1px solid var(--border, #dce4ee);
border-radius: 16px;
background: var(--surface-soft, #f8fafc);
}
.nb-rule-list > article { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.nb-rule-list strong,
.nb-rule-list small { display: block; }
.nb-rule-list small { margin-top: 4px; color: var(--muted, #64748b); }
.nb-automation-list article > p { color: var(--muted, #64748b); line-height: 1.55; }
.nb-approval-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, #dce4ee); }
/* Biblioteca de documentos */
.nb-documents-hero { align-items: center; }
.nb-document-library { display: grid; gap: 11px; }
.nb-document-card {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
padding: 14px;
border: 1px solid var(--border, #dce4ee);
border-radius: 16px;
background: var(--surface-soft, #f8fafc);
}
.nb-document-card.is-expiring { border-color: color-mix(in srgb, #d97706 45%, var(--border, #dce4ee)); }
.nb-document-card.is-expired { border-color: color-mix(in srgb, #dc2626 45%, var(--border, #dce4ee)); }
.nb-document-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--primary, #075fd8); background: color-mix(in srgb, var(--primary, #075fd8) 10%, var(--surface, #fff)); }
.nb-document-content { min-width: 0; }
.nb-document-content strong,
.nb-document-content small { display: block; }
.nb-document-content header strong { overflow-wrap: anywhere; }
.nb-document-content header small { margin-top: 3px; color: var(--muted, #64748b); overflow-wrap: anywhere; }
.nb-document-content > p { margin: 9px 0; color: var(--muted, #64748b); line-height: 1.5; }
.nb-document-content > small { color: var(--muted, #64748b); }
.nb-document-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.nb-document-meta span { padding: 4px 8px; border-radius: 999px; color: var(--muted, #64748b); background: var(--surface, #fff); font-size: .7rem; }
.nb-document-card .document-actions { display: flex; flex-direction: column; gap: 6px; }
/* Range usado em projeto */
.form-stack input[type="range"] {
appearance: auto !important;
min-height: 24px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.form-stack output { display: block; margin-top: 4px; color: var(--primary, #075fd8); font-weight: 850; }
@media (max-width: 1540px) {
.nb-operations-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-operations-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-workspace-grid { grid-template-columns: minmax(390px, .9fr) minmax(420px, 1.1fr); }
}
@media (max-width: 1260px) {
.nb-workspace-grid { grid-template-columns: 1fr; }
.nb-list-card { position: static; max-height: none; }
.nb-list-card > .nb-operation-cards,
.nb-list-card > .nb-employee-list,
.nb-list-card > .nb-automation-list,
.nb-list-card > .nb-approval-list,
.nb-list-card > .nb-document-library { max-height: none; }
.nb-operations-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.nb-operations-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-detail-columns { grid-template-columns: 1fr; }
.nb-project-summary { align-items: flex-start; }
.nb-document-card { grid-template-columns: 40px minmax(0, 1fr); }
.nb-document-card .document-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 620px) {
.sidebar-logo-icon { width: 44px !important; height: 44px !important; }
.nb-operations-kpis,
.nb-operations-module-grid,
.nb-detail-grid { grid-template-columns: 1fr; }
.nb-operation-row { align-items: flex-start; flex-direction: column; }
.nb-operation-row > .badge { align-self: flex-start; }
.nb-operation-card header,
.nb-approval-list article > header,
.nb-automation-list article > header,
.nb-document-card header { flex-direction: column; }
.nb-project-summary { flex-direction: column; }
.nb-project-progress-ring { width: 112px; height: 112px; flex-basis: 112px; }
.nb-employee-list > article { grid-template-columns: 44px minmax(0, 1fr); }
.nb-employee-list > article > .badge { grid-column: 2; justify-self: start; }
.nb-employee-list > article > .button-row { grid-column: 1 / -1; }
.nb-document-card { grid-template-columns: 1fr; }
.nb-document-icon { width: 40px; height: 40px; }
.nb-document-card .document-actions { grid-column: auto; }
.nb-person-title { align-items: flex-start; }
.nb-rule-list > article { align-items: flex-start; flex-direction: column; }
}
/* =====================================================================
NowBusiness v0.9.1 — sistema visual, CRM, relatórios e controles
===================================================================== */
:root{--nb-hero-start:#0a315d;--nb-hero-mid:#08718a;--nb-hero-end:#08b49e;--nb-card-lift:0 18px 52px rgba(15,45,78,.09)}
.module-hero,.dashboard-hero,.page-header{position:relative;overflow:hidden;border:1px solid rgba(20,104,141,.16)!important;background:linear-gradient(118deg,var(--nb-hero-start) 0%,var(--nb-hero-mid) 57%,var(--nb-hero-end) 100%)!important;color:#fff!important;box-shadow:0 22px 56px rgba(9,56,91,.16)!important;border-radius:26px!important;padding:clamp(24px,3vw,38px)!important;min-height:190px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.module-hero:before,.dashboard-hero:before,.page-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 12%,rgba(255,255,255,.16),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,54px 54px;pointer-events:none}
.module-hero>*,.dashboard-hero>*,.page-header>*{position:relative;z-index:1}.module-hero h1,.dashboard-hero h1,.page-header h1{color:#fff!important;font-size:clamp(32px,4vw,52px)!important;letter-spacing:-1.7px!important;margin:0 0 12px!important}.module-hero .page-kicker,.dashboard-hero .page-kicker,.page-header .page-kicker{color:#8ff6eb!important}.module-hero .muted,.dashboard-hero .muted,.page-header .muted{color:rgba(255,255,255,.82)!important;max-width:850px}.module-hero .btn-outline,.dashboard-hero .btn-outline,.page-header .btn-outline{color:#fff!important;border-color:rgba(255,255,255,.42)!important;background:rgba(255,255,255,.10)!important}.module-hero .btn-outline:hover,.dashboard-hero .btn-outline:hover,.page-header .btn-outline:hover{background:rgba(255,255,255,.18)!important}.module-hero .btn-primary,.dashboard-hero .btn-primary,.page-header .btn-primary{background:linear-gradient(135deg,#087df0,#00c59a)!important;color:#fff!important;border-color:transparent!important}
.card,.metric-card,.empty-state{box-shadow:var(--nb-card-lift);border-color:color-mix(in srgb,var(--nf-border) 80%,#c9dded 20%)}
.card{border-radius:24px}.metric-card{border-radius:20px;transition:transform .18s ease,box-shadow .18s ease}.metric-card:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(15,45,78,.12)}
.card-header{gap:18px}.card-header h2{letter-spacing:-.5px}.btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.btn:hover{transform:translateY(-1px)}
input,select,textarea{transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--nf-primary) 75%,#70d8c9)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--nf-primary) 12%,transparent)!important}
.sidebar-nav a .nav-icon{background:linear-gradient(145deg,#e9f3ff,#dbeafe);color:#0b68d8;box-shadow:inset 0 0 0 1px rgba(30,111,212,.05)}
.sidebar-nav a[href^="/clientes"] .nav-icon,.sidebar-nav a[href^="/equipe"] .nav-icon{background:#eee9ff;color:#7651d8}.sidebar-nav a[href^="/catalogo"] .nav-icon,.sidebar-nav a[href^="/estoque"] .nav-icon{background:#e5faf4;color:#079b78}.sidebar-nav a[href^="/vendas"] .nav-icon,.sidebar-nav a[href^="/receitas"] .nav-icon{background:#e7faef;color:#0b9f57}.sidebar-nav a[href^="/compras"] .nav-icon,.sidebar-nav a[href^="/despesas"] .nav-icon,.sidebar-nav a[href^="/dividas"] .nav-icon{background:#fff1e7;color:#e66b1d}.sidebar-nav a[href^="/crm"] .nav-icon,.sidebar-nav a[href^="/comercial"] .nav-icon{background:#e9efff;color:#4968e8}.sidebar-nav a[href^="/ordens"] .nav-icon,.sidebar-nav a[href^="/projetos"] .nav-icon,.sidebar-nav a[href^="/tarefas"] .nav-icon{background:#fff6d9;color:#b98005}.sidebar-nav a[href^="/chamados"] .nav-icon,.sidebar-nav a[href^="/suporte"] .nav-icon{background:#ffe9ef;color:#d94369}.sidebar-nav a[href^="/documentos"] .nav-icon,.sidebar-nav a[href^="/contratos"] .nav-icon,.sidebar-nav a[href^="/relatorios"] .nav-icon{background:#e7f7ff;color:#087eaa}.sidebar-nav a[href^="/aprovacoes"] .nav-icon{background:#e7faef;color:#0b9f57}.sidebar-nav a[href^="/automacoes"] .nav-icon{background:#f2eaff;color:#8b44d6}.sidebar-nav a.is-active .nav-icon{background:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
.crm-workspace-tabs{display:inline-flex;gap:8px;padding:7px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface);box-shadow:var(--nf-shadow-sm)}.crm-workspace-tabs a{padding:11px 18px;border-radius:13px;color:var(--nf-muted);font-weight:850;text-decoration:none}.crm-workspace-tabs a.is-active{background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff;box-shadow:0 12px 26px rgba(0,104,180,.18)}
.crm-command-center{overflow:hidden}.crm-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.crm-toolbar select{min-width:190px}.crm-drag-hint{display:flex;align-items:center;gap:12px;padding:12px 15px;margin:0 0 14px;border:1px dashed color-mix(in srgb,var(--nf-primary) 28%,var(--nf-border));border-radius:16px;background:color-mix(in srgb,var(--nf-primary) 4%,var(--nf-surface))}.crm-drag-hint>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff;font-size:20px}.crm-drag-hint p{margin:0;display:grid;gap:2px}.crm-drag-hint small{color:var(--nf-muted)}
.nb-commercial-kanban{--crm-column-width:310px;display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(var(--crm-column-width),var(--crm-column-width))!important;grid-template-columns:none!important;overflow-x:auto;padding:4px 4px 18px;gap:14px;scroll-snap-type:x proximity}.nb-commercial-column{scroll-snap-align:start;background:color-mix(in srgb,var(--stage-color) 4%,var(--nf-surface));border:1px solid color-mix(in srgb,var(--stage-color) 20%,var(--nf-border));border-top:4px solid var(--stage-color);border-radius:20px;padding:13px;min-height:410px;transition:background .16s ease,border-color .16s ease,transform .16s ease}.nb-commercial-column.is-drop-target{background:color-mix(in srgb,var(--stage-color) 12%,var(--nf-surface));border-color:var(--stage-color);transform:translateY(-2px)}.nb-commercial-column>header{position:sticky;top:0;z-index:2;background:inherit;padding:4px 2px 12px}.nb-commercial-cards{display:grid;gap:11px}.nb-opportunity-card{cursor:grab;border:1px solid var(--nf-border);border-radius:17px;padding:15px;background:var(--nf-surface);box-shadow:0 10px 24px rgba(15,45,78,.08);transition:transform .17s ease,box-shadow .17s ease,opacity .17s ease}.nb-opportunity-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,45,78,.13)}.nb-opportunity-card.is-dragging{opacity:.45;transform:rotate(1deg) scale(.98)}.nb-opportunity-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.crm-card-move-form{margin-top:12px}.crm-card-move-form label span{font-size:11px;color:var(--nf-muted)}.crm-card-move-form select{height:38px;font-size:12px}.crm-focus-mode .sidebar,.crm-focus-mode .topbar{display:none!important}.crm-focus-mode .app-main{margin-left:0!important}.crm-focus-mode .content,.crm-focus-mode main{max-width:none!important;width:100%!important;padding:18px!important}.crm-focus-mode .nb-commercial-kanban{height:calc(100vh - 250px)}
.management-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.management-nav>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface);box-shadow:var(--nf-shadow-sm)}.management-nav>div>span{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--nf-muted);font-weight:900}.management-nav a{padding:9px 12px;border-radius:11px;text-decoration:none;color:var(--nf-text);font-weight:800}.management-nav a.is-active{background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff}
.form-section-card{padding:22px;border:1px solid var(--nf-border);border-radius:20px;background:color-mix(in srgb,var(--nf-surface-soft) 48%,var(--nf-surface));margin-bottom:18px}.form-section-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}.form-section-heading>span,.automation-step-form legend>span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff;font-weight:900}.form-section-heading h2,.form-section-heading p{margin:0}.form-section-heading p{color:var(--nf-muted);margin-top:3px}.form-section-card.is-optional{opacity:.72}.account-complete-form{max-width:1150px;margin-inline:auto}
.automation-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.automation-explainer article{display:flex;gap:12px;padding:18px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface);box-shadow:var(--nf-shadow-sm)}.automation-explainer article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff;font-weight:900}.automation-explainer p{margin:4px 0 0;color:var(--nf-muted)}.automation-step-form{display:grid;gap:16px}.automation-step-form fieldset{border:1px solid var(--nf-border);border-radius:18px;padding:18px}.automation-step-form legend{display:flex;align-items:center;gap:9px;padding:0 8px;font-weight:900}.automation-step-form legend>span{width:28px;height:28px}
.reconciliation-review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}.reconciliation-review-grid>article{border:1px solid var(--nf-border);border-left:4px solid #f59e0b;border-radius:18px;padding:17px;background:var(--nf-surface)}.reconciliation-review-grid header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.reconciliation-review-grid header small{display:block;color:var(--nf-muted);margin-top:3px}.reconciliation-comparison{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.reconciliation-comparison span{display:grid;gap:3px;padding:10px;border-radius:12px;background:var(--nf-surface-soft)}.reconciliation-review-grid textarea{min-height:92px}
.closing-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.closing-checklist article{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface)}.closing-checklist article.needs-attention{border-color:#f3b64f;background:color-mix(in srgb,#f59e0b 6%,var(--nf-surface))}.closing-checklist .check-state{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#e7faef;color:#079b57;font-weight:900}.closing-checklist .needs-attention .check-state{background:#fff2d9;color:#d77a00}.closing-checklist p{margin:4px 0;color:var(--nf-muted)}.closing-checklist a{margin-left:auto;font-weight:850}
.invoice-payment-panel{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);gap:20px;padding:20px;border:1px solid color-mix(in srgb,var(--nf-primary) 20%,var(--nf-border));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 5%,var(--nf-surface)),color-mix(in srgb,var(--nf-accent) 6%,var(--nf-surface)))}.invoice-payment-panel h3,.invoice-payment-panel p{margin:0}.invoice-payment-panel p{margin-top:6px}.invoice-payment-history{border:1px solid var(--nf-border);border-radius:16px;overflow:hidden}.invoice-payment-history summary{cursor:pointer;padding:14px 16px;font-weight:850;display:flex;justify-content:space-between}.invoice-payment-history>div{border-top:1px solid var(--nf-border)}.invoice-payment-history article{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--nf-border)}.invoice-payment-history article:last-child{border-bottom:0}.invoice-payment-history small{display:block;color:var(--nf-muted)}.invoice-modern-card.is-paid{border-color:color-mix(in srgb,#10b981 30%,var(--nf-border))}
.report-catalog-groups{display:grid;gap:20px}.report-catalog-groups>section>h3{margin:0 0 10px}.report-catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px}.report-catalog-grid article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px;border:1px solid var(--nf-border);border-radius:17px;background:var(--nf-surface);transition:.16s ease}.report-catalog-grid article:hover{transform:translateY(-2px);box-shadow:var(--nf-shadow-sm);border-color:color-mix(in srgb,var(--nf-primary) 25%,var(--nf-border))}.report-catalog-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 14%,var(--nf-surface)),color-mix(in srgb,var(--nf-accent) 16%,var(--nf-surface)));color:var(--nf-primary)}.report-catalog-grid p{margin:4px 0 0;color:var(--nf-muted);font-size:12px}
@media(max-width:1050px){.module-hero,.dashboard-hero,.page-header{grid-template-columns:1fr;min-height:unset}.management-nav,.automation-explainer,.closing-checklist{grid-template-columns:1fr}.invoice-payment-panel{grid-template-columns:1fr}}
@media(max-width:720px){.module-hero,.dashboard-hero,.page-header{border-radius:20px!important;padding:22px!important}.module-hero h1,.dashboard-hero h1,.page-header h1{font-size:30px!important}.crm-workspace-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.crm-workspace-tabs a{text-align:center;padding:10px}.crm-toolbar{display:grid;grid-template-columns:1fr 1fr}.crm-toolbar select{grid-column:1/-1;width:100%}.nb-commercial-kanban{--crm-column-width:84vw}.report-catalog-grid article{grid-template-columns:auto 1fr}.report-catalog-grid article .btn{grid-column:1/-1;width:100%}.form-section-card{padding:16px}.reconciliation-comparison{grid-template-columns:1fr}.invoice-payment-history article{flex-direction:column}}
/* =====================================================================
NowBusiness v0.9.2 — inteligência, governança e consistência visual
===================================================================== */
html,body,button,input,select,textarea,table,.btn,.badge,.sidebar-nav,.topbar,.card,.metric-card{font-family:var(--nf-font)!important}
body{font-variation-settings:"wght" 430;letter-spacing:-.008em}
h1,h2,h3,h4,h5,h6,.page-kicker,strong,b,.btn,.badge,.sidebar-nav a,.topbar strong{font-family:var(--nf-font)!important;font-variation-settings:"wght" 700;letter-spacing:-.025em}
input,select,textarea{font-variation-settings:"wght" 430}
/* Menu por áreas, com linguagem visual consistente e todos os ícones coloridos. */
.sidebar-nav-v36{gap:3px;padding-inline:8px}.sidebar-nav-v36 .nav-section-label{margin:17px 9px 6px;padding:0;font-size:10px;line-height:1.2;letter-spacing:.14em;color:color-mix(in srgb,var(--nf-muted) 86%,transparent);font-weight:900}.sidebar-nav-v36 a,.sidebar-nav-v36 .nav-more>summary{min-height:42px;padding:7px 9px;border-radius:13px;font-size:12.5px;line-height:1.15}.sidebar-nav-v36 .nav-more-links{padding:5px 0 5px 10px;margin-left:14px;border-left:1px solid var(--nf-border)}
.sidebar-nav [data-tone] .nav-icon,.sidebar-nav a:not([data-tone]) .nav-icon,.sidebar-nav .nav-more>summary:not([data-tone]) .nav-icon{--nav-tone:#2563eb;--nav-tone-soft:#e8f1ff;color:var(--nav-tone)!important;background:var(--nav-tone-soft)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-tone) 8%,transparent)!important}
.sidebar-nav [data-tone="blue"] .nav-icon{--nav-tone:#1673df;--nav-tone-soft:#e7f1ff}.sidebar-nav [data-tone="cyan"] .nav-icon{--nav-tone:#0786aa;--nav-tone-soft:#e2f7fc}.sidebar-nav [data-tone="teal"] .nav-icon{--nav-tone:#078f83;--nav-tone-soft:#e2f8f5}.sidebar-nav [data-tone="green"] .nav-icon{--nav-tone:#07985a;--nav-tone-soft:#e5f8ee}.sidebar-nav [data-tone="amber"] .nav-icon{--nav-tone:#b87900;--nav-tone-soft:#fff4d8}.sidebar-nav [data-tone="orange"] .nav-icon{--nav-tone:#dc6918;--nav-tone-soft:#fff0e5}.sidebar-nav [data-tone="red"] .nav-icon{--nav-tone:#dc3c45;--nav-tone-soft:#ffe9eb}.sidebar-nav [data-tone="pink"] .nav-icon{--nav-tone:#d44278;--nav-tone-soft:#ffe9f1}.sidebar-nav [data-tone="violet"] .nav-icon{--nav-tone:#7954d8;--nav-tone-soft:#f0eaff}.sidebar-nav [data-tone="indigo"] .nav-icon{--nav-tone:#4d63d9;--nav-tone-soft:#e9edff}.sidebar-nav [data-tone="slate"] .nav-icon{--nav-tone:#5d6b7c;--nav-tone-soft:#edf1f5}
.sidebar-nav a:nth-of-type(5n+1):not([data-tone]) .nav-icon{--nav-tone:#1673df;--nav-tone-soft:#e7f1ff}.sidebar-nav a:nth-of-type(5n+2):not([data-tone]) .nav-icon{--nav-tone:#07985a;--nav-tone-soft:#e5f8ee}.sidebar-nav a:nth-of-type(5n+3):not([data-tone]) .nav-icon{--nav-tone:#7954d8;--nav-tone-soft:#f0eaff}.sidebar-nav a:nth-of-type(5n+4):not([data-tone]) .nav-icon{--nav-tone:#dc6918;--nav-tone-soft:#fff0e5}.sidebar-nav a:nth-of-type(5n):not([data-tone]) .nav-icon{--nav-tone:#0786aa;--nav-tone-soft:#e2f7fc}
.sidebar-nav a.is-active .nav-icon,.sidebar-nav .nav-more[data-nav-current="true"]>summary .nav-icon{color:#fff!important;background:rgba(255,255,255,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}.nav-new{margin-left:auto;border-radius:999px;padding:3px 6px;background:linear-gradient(135deg,#7654e5,#0ebc9f);color:#fff;font-size:8px;font-weight:900;letter-spacing:.06em}
/* Inteligência empresarial */
.intelligent-hero{grid-template-columns:minmax(0,1fr) minmax(235px,330px)!important}.intelligence-main-hero{min-height:230px}.intelligence-main-hero .hero-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hero-metric-stack{display:grid;gap:10px;min-width:230px}.smart-highlight-card,.business-health-gauge{border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:18px;background:rgba(255,255,255,.12);box-shadow:0 16px 38px rgba(4,35,65,.16);backdrop-filter:blur(12px);color:#fff}.smart-highlight-card span,.business-health-gauge span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.78);font-weight:850}.smart-highlight-card strong,.business-health-gauge strong{display:block;margin-top:5px;font-size:28px;color:#fff}.business-health-gauge{position:relative;overflow:hidden}.business-health-gauge:after{content:"";position:absolute;inset:auto -25px -40px auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--health-tone,#1dd4a4) 70%,transparent),transparent 67%);opacity:.58}.business-health-gauge small{position:relative;z-index:1;color:rgba(255,255,255,.78)}
.intelligence-score-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.smart-score-card{--score-tone:#1681e6;position:relative;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,var(--score-tone) 20%,var(--nf-border));border-radius:20px;background:linear-gradient(145deg,var(--nf-surface),color-mix(in srgb,var(--score-tone) 5%,var(--nf-surface)));box-shadow:var(--nf-shadow-soft)}.smart-score-card:before{content:"";position:absolute;right:-28px;top:-32px;width:96px;height:96px;border-radius:50%;background:color-mix(in srgb,var(--score-tone) 12%,transparent)}.smart-score-card>span{position:relative;color:var(--nf-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:850}.smart-score-card strong{position:relative;display:block;margin:8px 0 11px;font-size:30px;color:var(--nf-text)}.score-progress{height:7px;border-radius:999px;overflow:hidden;background:var(--nf-surface-soft)}.score-progress>i{display:block;height:100%;width:var(--score-value,0%);border-radius:inherit;background:linear-gradient(90deg,var(--score-tone),color-mix(in srgb,var(--score-tone) 55%,#48dfc5))}
.smart-alerts-section{border:1px solid color-mix(in srgb,var(--nf-warning) 18%,var(--nf-border));background:linear-gradient(150deg,var(--nf-surface),color-mix(in srgb,var(--nf-warning) 3%,var(--nf-surface)))}.smart-live-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:var(--nf-success-soft);color:var(--nf-success);font-size:11px;font-weight:900}.smart-live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent)}.smart-alert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.smart-alert-card{--alert-tone:#1681e6;display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;padding:16px;border:1px solid color-mix(in srgb,var(--alert-tone) 24%,var(--nf-border));border-radius:18px;background:var(--nf-surface);box-shadow:var(--nf-shadow-soft);transition:transform .16s ease,box-shadow .16s ease}.smart-alert-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,45,78,.11)}.smart-alert-card.severity-critical{--alert-tone:#dc3445}.smart-alert-card.severity-high{--alert-tone:#e56c19}.smart-alert-card.severity-medium{--alert-tone:#c88a08}.smart-alert-card.severity-low{--alert-tone:#1681e6}.smart-alert-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--alert-tone) 12%,var(--nf-surface));color:var(--alert-tone)}.smart-alert-card h3{margin:0 0 4px;font-size:15px}.smart-alert-card p{margin:0;color:var(--nf-muted);font-size:12.5px;line-height:1.5}.smart-alert-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}.smart-alert-meta a{font-size:11px;font-weight:900;color:var(--alert-tone)}
.forecast-card{overflow:hidden}.forecast-card .card-header{align-items:center}.forecast-ending{display:grid;gap:3px;text-align:right}.forecast-ending small{color:var(--nf-muted);font-size:11px}.forecast-ending strong{font-size:22px}.forecast-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:16px}.forecast-summary-grid>div{padding:13px;border:1px solid var(--nf-border);border-radius:15px;background:var(--nf-surface-soft)}.forecast-summary-grid span{display:block;font-size:11px;color:var(--nf-muted)}.forecast-summary-grid strong{display:block;margin-top:4px}.forecast-chart-shell{position:relative;min-height:290px;padding:16px;border:1px solid var(--nf-border);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--nf-primary) 2%,var(--nf-surface)),var(--nf-surface));overflow:hidden}.forecast-chart-shell canvas{width:100%!important;min-height:255px}.chart-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--nf-muted)}.chart-legend span{display:inline-flex;align-items:center;gap:7px}.chart-legend i{width:18px;height:4px;border-radius:999px}.legend-balance{background:linear-gradient(90deg,var(--nf-primary),var(--nf-accent))}.legend-zero{background:var(--nf-danger)}
.intelligence-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.modern-metric-list{display:grid;gap:9px}.modern-metric-list>div,.modern-metric-list>li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border-radius:13px;background:var(--nf-surface-soft)}.smart-insight-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:13px;border:1px dashed color-mix(in srgb,var(--nf-primary) 25%,var(--nf-border));border-radius:14px;background:color-mix(in srgb,var(--nf-primary) 4%,var(--nf-surface));color:var(--nf-muted);font-size:12px}.smart-insight-note:before{content:"✦";color:var(--nf-primary);font-weight:900}
.workload-grid{display:grid;gap:11px}.workload-person{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px;border:1px solid var(--nf-border);border-radius:16px}.workload-person .team-avatar{width:42px;height:42px}.workload-person strong,.workload-person small{display:block}.workload-person small{color:var(--nf-muted);font-size:11px}.workload-bar{grid-column:2/4;height:6px;overflow:hidden;border-radius:999px;background:var(--nf-surface-soft)}.workload-bar>i{display:block;height:100%;width:var(--workload-value,0%);border-radius:inherit;background:linear-gradient(90deg,var(--nf-primary),var(--nf-accent))}.data-quality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.data-quality-grid>div{padding:14px;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface-soft)}.data-quality-grid strong{display:block;font-size:24px}.data-quality-grid span{font-size:11px;color:var(--nf-muted)}.intelligence-settings{border-style:dashed}.intelligence-settings .form-grid{align-items:end}
/* Cargos e permissões */
.modern-tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px;border:1px solid var(--nf-border);border-radius:18px;background:var(--nf-surface);box-shadow:var(--nf-shadow-soft)}.modern-tabs a{padding:10px 15px;border-radius:12px;text-decoration:none;color:var(--nf-muted);font-weight:850}.modern-tabs a.is-active,.modern-tabs a.active{color:#fff;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));box-shadow:0 10px 24px rgba(0,95,180,.17)}.role-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--nf-primary-soft);color:var(--nf-primary);font-size:10px;font-weight:900}.roles-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:16px}.role-builder-card{align-self:start}.permission-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0}.permission-toolbar .button-row{margin:0}.permission-matrix{display:grid;gap:12px;max-height:680px;overflow:auto;padding-right:5px}.permission-group{border:1px solid var(--nf-border);border-radius:17px;padding:14px;background:var(--nf-surface)}.permission-group>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.permission-group>header strong{font-size:14px}.permission-group>header small{color:var(--nf-muted)}.permission-option{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:11px;cursor:pointer}.permission-option:hover{background:var(--nf-surface-soft)}.permission-option input{width:18px;height:18px;accent-color:var(--nf-primary)}.permission-option span{font-size:12px}.roles-list{display:grid;gap:11px}.role-card{border:1px solid var(--nf-border);border-radius:18px;padding:15px;background:var(--nf-surface);box-shadow:var(--nf-shadow-soft)}.role-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.role-card p{margin:5px 0;color:var(--nf-muted);font-size:12px}.role-status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--nf-muted)}.role-status-dot.active{background:var(--nf-success);box-shadow:0 0 0 5px var(--nf-success-soft)}.role-status-dot.inactive{background:var(--nf-danger)}.compact-role-form,.modern-inline-form{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-top:11px}.compact-role-form label,.modern-inline-form label{flex:1 1 170px}.role-form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.danger-inline-form{display:inline-flex}.role-member-list{display:grid;gap:10px}.role-member-card{display:grid;grid-template-columns:46px minmax(0,1fr) minmax(200px,.55fr);gap:12px;align-items:center;padding:14px;border:1px solid var(--nf-border);border-radius:17px}.member-last-access{display:block;margin-top:4px;color:var(--nf-muted);font-size:10px}
/* Relatórios: seletor de formato claro e elegante. */
.report-download-menu{position:relative}.report-download-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}.report-download-menu>summary::-webkit-details-marker{display:none}.report-download-menu[open]>summary{background:var(--nf-primary-soft);color:var(--nf-primary);border-color:color-mix(in srgb,var(--nf-primary) 30%,var(--nf-border))}.report-download-menu>div{position:absolute;z-index:35;right:0;top:calc(100% + 8px);min-width:215px;padding:7px;border:1px solid var(--nf-border);border-radius:15px;background:var(--nf-surface);box-shadow:0 20px 48px rgba(15,45,78,.17)}.report-download-menu a{display:grid;gap:2px;padding:10px 11px;border-radius:11px;text-decoration:none;color:var(--nf-text)}.report-download-menu a:hover{background:var(--nf-surface-soft)}.report-download-menu a small{color:var(--nf-muted);font-size:10px}
/* Assistente contextual em todas as áreas. */
.contextual-intelligence{position:fixed;z-index:80;right:22px;bottom:22px;display:grid;justify-items:end;gap:10px}.contextual-intelligence-toggle{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px;border:0;border-radius:999px;background:linear-gradient(135deg,#075fd8,#00bfa0);color:#fff;box-shadow:0 16px 36px rgba(0,91,150,.24);font:800 12px var(--nf-font);cursor:pointer}.contextual-intelligence-toggle:before{content:"✦";font-size:17px}.contextual-intelligence-panel{display:none;width:min(390px,calc(100vw - 28px));max-height:min(540px,72vh);overflow:auto;padding:13px;border:1px solid var(--nf-border);border-radius:20px;background:var(--nf-surface);box-shadow:0 26px 65px rgba(15,45,78,.22)}.contextual-intelligence.is-open .contextual-intelligence-panel{display:block;animation:nbSmartPanel .17s ease-out}.contextual-intelligence-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 4px 11px}.contextual-intelligence-panel>header h3,.contextual-intelligence-panel>header p{margin:0}.contextual-intelligence-panel>header p{margin-top:3px;color:var(--nf-muted);font-size:11px}.contextual-suggestion{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:11px;border-radius:14px;background:var(--nf-surface-soft);margin-top:8px}.contextual-suggestion>span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--nf-primary),var(--nf-accent));color:#fff}.contextual-suggestion strong,.contextual-suggestion small{display:block}.contextual-suggestion small{margin-top:3px;color:var(--nf-muted);font-size:10px;line-height:1.4}.contextual-suggestion a{display:inline-block;margin-top:7px;font-size:10px;font-weight:900}.contextual-intelligence-panel>.btn{width:100%;margin-top:10px}.contextual-intelligence-close{border:0;background:var(--nf-surface-soft);color:var(--nf-muted);width:30px;height:30px;border-radius:10px;cursor:pointer}@keyframes nbSmartPanel{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:1260px){.intelligence-score-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.roles-workspace{grid-template-columns:1fr}.permission-matrix{max-height:none}}
@media(max-width:920px){.intelligence-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intelligence-detail-grid{grid-template-columns:1fr}.forecast-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-member-card{grid-template-columns:44px minmax(0,1fr)}.role-member-card>form{grid-column:1/-1}}
@media(max-width:720px){.intelligent-hero{grid-template-columns:1fr!important}.hero-metric-stack{width:100%;min-width:0}.intelligence-score-grid{grid-template-columns:1fr 1fr}.smart-alert-grid{grid-template-columns:1fr}.forecast-card .card-header{align-items:flex-start}.forecast-ending{text-align:left}.forecast-summary-grid,.data-quality-grid{grid-template-columns:1fr 1fr}.modern-tabs{display:grid;grid-template-columns:1fr 1fr}.modern-tabs a{text-align:center}.permission-toolbar{align-items:stretch}.permission-toolbar>*{width:100%}.contextual-intelligence{right:13px;bottom:74px}.contextual-intelligence-toggle{min-height:43px;padding:0 13px}.contextual-intelligence-panel{width:calc(100vw - 26px)}.report-download-menu{width:100%}.report-download-menu>summary{width:100%;justify-content:center}.report-download-menu>div{position:static;margin-top:7px;min-width:0}.sidebar-nav-v36{padding-inline:5px}}
@media(max-width:480px){.intelligence-score-grid,.forecast-summary-grid,.data-quality-grid,.modern-tabs{grid-template-columns:1fr}.smart-alert-card{grid-template-columns:40px minmax(0,1fr)}.smart-alert-icon{width:40px;height:40px}.contextual-intelligence-toggle span{display:none}}
.smart-score-card.good{--score-tone:#10a46c}.smart-score-card.attention{--score-tone:#d78a08}.smart-score-card.critical{--score-tone:#d9414d}.business-health-gauge.good{--health-tone:#33e3b4}.business-health-gauge.attention{--health-tone:#ffc14f}.business-health-gauge.critical{--health-tone:#ff7180}.modern-metric-list>p{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;margin:0;border-radius:13px;background:var(--nf-surface-soft)}.data-quality-grid>article{display:grid;gap:5px;padding:14px;border:1px solid var(--nf-border);border-radius:16px;background:var(--nf-surface-soft)}.data-quality-grid>article strong{font-size:24px}.data-quality-grid>article span{font-size:11px;color:var(--nf-muted)}.data-quality-grid>article a{font-size:10px;font-weight:900;margin-top:3px}.workload-person>div:first-child{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;grid-column:1/-1}.workload-person>div:first-child .team-avatar{grid-row:1/3}.workload-person>div:first-child strong{align-self:end}.workload-person>div:first-child b{grid-row:1/3;grid-column:3;align-self:center;font-size:20px}.workload-person>div:first-child+ .workload-bar{grid-column:1/-1}.workload-person>small{grid-column:1/-1}
/* Correção de abertura do assistente contextual: o atributo hidden controla o estado. */
.contextual-intelligence-panel{display:block}.contextual-intelligence-panel[hidden]{display:none!important}.contextual-intelligence-toggle:before{display:none}.contextual-intelligence-toggle>span{display:grid;place-items:center}.contextual-intelligence-toggle>span .nf-icon{width:18px;height:18px}.contextual-intelligence-toggle>b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.18);font-size:10px}.contextual-suggestion{grid-template-columns:34px minmax(0,1fr) auto}.contextual-suggestion>b{align-self:center;color:var(--nf-primary)}.contextual-intelligence-panel>header a{font-size:10px;font-weight:900;white-space:nowrap}
.intelligence-score-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.smart-alert-card.severity-warning{--alert-tone:#d97b08}.smart-alert-card.severity-info{--alert-tone:#1979d2}.smart-alert-card.severity-positive{--alert-tone:#0b9d68}.forecast-ending.positive strong{color:var(--nf-success)}.forecast-ending.negative strong{color:var(--nf-danger)}.contextual-suggestion.severity-critical>span{background:linear-gradient(135deg,#d52e43,#ef6b4a)}.contextual-suggestion.severity-warning>span{background:linear-gradient(135deg,#d07b04,#f3b338)}.contextual-suggestion.severity-positive>span{background:linear-gradient(135deg,#087c63,#16bd88)}