/* =====================================================================
   Financeiro Pessoal — tema sobre Bootstrap 5.3
   ===================================================================== */

:root {
	--fp-sidebar-w: 268px;
	--fp-topbar-h: 64px;

	--fp-accent: #0f9f6e;
	--fp-accent-rgb: 15, 159, 110;
	--fp-accent-hover: #0b8a5f;
	--fp-accent-soft: #e3f6ee;

	--fp-body-bg: #f3f5f8;
	--fp-surface: #ffffff;
	--fp-surface-2: #f8fafc;
	--fp-border: #e4e8ee;
	--fp-text-muted: #66758a;

	--fp-sidebar-bg: #0e1726;
	--fp-sidebar-bg-2: #131f33;
	--fp-sidebar-fg: #c3cddc;
	--fp-sidebar-muted: #6f7f96;
	--fp-sidebar-hover: rgba(255, 255, 255, .06);
	--fp-sidebar-active: rgba(15, 159, 110, .18);

	--fp-receita: #0f9f6e;
	--fp-destinacao: #2f7fd8;
	--fp-despesa: #d9485f;

	--fp-radius: .8rem;
	--fp-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
	--fp-shadow-lg: 0 12px 32px -12px rgba(16, 24, 40, .18);

	--bs-primary: var(--fp-accent);
	--bs-primary-rgb: var(--fp-accent-rgb);
	--bs-link-color: var(--fp-accent);
	--bs-link-color-rgb: var(--fp-accent-rgb);
	--bs-link-hover-color: var(--fp-accent-hover);
	--bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--bs-border-radius: .55rem;
}

[data-bs-theme="dark"] {
	--fp-accent: #22c38e;
	--fp-accent-rgb: 34, 195, 142;
	--fp-accent-hover: #3dd6a2;
	--fp-accent-soft: rgba(34, 195, 142, .14);

	--fp-body-bg: #0a101c;
	--fp-surface: #111a2a;
	--fp-surface-2: #0e1624;
	--fp-border: #1f2b3e;
	--fp-text-muted: #8c9bb0;

	--fp-sidebar-bg: #070c16;
	--fp-sidebar-bg-2: #0c1322;

	--fp-receita: #34d399;
	--fp-destinacao: #60a5fa;
	--fp-despesa: #f87183;

	--fp-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	--fp-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, .6);

	--bs-body-bg: var(--fp-body-bg);
	--bs-tertiary-bg: var(--fp-surface-2);
}

body {
	background: var(--fp-body-bg);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
}

.num, .valor, td.text-end, .stat-valor {
	font-variant-numeric: tabular-nums;
}

.text-muted-2 { color: var(--fp-text-muted) !important; }

.min-w-0 { min-width: 0; }

/* ---------------------------------------------------------------- botões */

.btn-primary {
	--bs-btn-bg: var(--fp-accent);
	--bs-btn-border-color: var(--fp-accent);
	--bs-btn-hover-bg: var(--fp-accent-hover);
	--bs-btn-hover-border-color: var(--fp-accent-hover);
	--bs-btn-active-bg: var(--fp-accent-hover);
	--bs-btn-active-border-color: var(--fp-accent-hover);
	--bs-btn-disabled-bg: var(--fp-accent);
	--bs-btn-disabled-border-color: var(--fp-accent);
	--bs-btn-focus-shadow-rgb: var(--fp-accent-rgb);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .btn-primary {
	--bs-btn-color: #04140d;
	--bs-btn-hover-color: #04140d;
	--bs-btn-active-color: #04140d;
}

.btn-outline-primary {
	--bs-btn-color: var(--fp-accent);
	--bs-btn-border-color: var(--fp-accent);
	--bs-btn-hover-bg: var(--fp-accent);
	--bs-btn-hover-border-color: var(--fp-accent);
	--bs-btn-active-bg: var(--fp-accent);
	--bs-btn-active-border-color: var(--fp-accent);
	--bs-btn-focus-shadow-rgb: var(--fp-accent-rgb);
}

.btn-check:checked + .btn-outline-secondary {
	--bs-btn-active-bg: var(--fp-surface);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-border-color: var(--fp-border);
	box-shadow: var(--fp-shadow);
}

.btn-icon {
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control {
	border-color: rgba(var(--fp-accent-rgb), .6);
	box-shadow: 0 0 0 .2rem rgba(var(--fp-accent-rgb), .18);
}

.form-check-input:checked {
	background-color: var(--fp-accent);
	border-color: var(--fp-accent);
}

.form-check-input:focus {
	border-color: rgba(var(--fp-accent-rgb), .6);
	box-shadow: 0 0 0 .2rem rgba(var(--fp-accent-rgb), .18);
}

.form-control::placeholder {
	color: var(--fp-text-muted);
	opacity: .55;
}

.form-label {
	font-weight: 500;
	font-size: .875rem;
	margin-bottom: .35rem;
}

.form-text { font-size: .8rem; }

/* ---------------------------------------------------------------- estrutura */

.app {
	display: flex;
	min-height: 100vh;
}

.main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	padding: 1.75rem 2rem 3rem;
	max-width: 1320px;
	width: 100%;
}

@media (max-width: 991.98px) {
	.content { padding: 1.25rem 1rem 2.5rem; }
}

/* ---------------------------------------------------------------- sidebar */

.sidebar {
	width: var(--fp-sidebar-w);
	background: linear-gradient(180deg, var(--fp-sidebar-bg) 0%, var(--fp-sidebar-bg-2) 100%);
	color: var(--fp-sidebar-fg);
	--bs-offcanvas-width: var(--fp-sidebar-w);
	--bs-offcanvas-bg: var(--fp-sidebar-bg);
	--bs-offcanvas-color: var(--fp-sidebar-fg);
}

@media (min-width: 992px) {
	.sidebar {
		position: sticky;
		top: 0;
		height: 100vh;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
	}
}

.sidebar .offcanvas-body {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow-y: auto;
	height: 100%;
}

.sidebar-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.25rem 1.25rem 1rem;
	color: #fff;
	text-decoration: none;
}

.sidebar-brand:hover { color: #fff; }

.brand-mark {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #22c38e 0%, #0f9f6e 55%, #0b6e8a 100%);
	box-shadow: 0 6px 16px -6px rgba(34, 195, 142, .6);
	font-size: 1.15rem;
	color: #fff;
}

.brand-nome {
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.brand-sub {
	font-size: .72rem;
	color: var(--fp-sidebar-muted);
	text-transform: uppercase;
	letter-spacing: .12em;
}

.sidebar-nav {
	padding: .5rem .75rem 1rem;
	flex: 1;
}

.nav-secao {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--fp-sidebar-muted);
	padding: 1.1rem .75rem .45rem;
}

.nav-secao .nav-num {
	display: inline-grid;
	place-items: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: .35rem;
	background: rgba(255, 255, 255, .07);
	font-size: .65rem;
	letter-spacing: 0;
}

.sidebar-link {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	padding: .55rem .75rem;
	border-radius: .55rem;
	color: var(--fp-sidebar-fg);
	text-decoration: none;
	font-size: .9rem;
	border: 0;
	background: transparent;
	text-align: left;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.sidebar-link > .bi:first-child {
	font-size: 1.05rem;
	width: 1.25rem;
	text-align: center;
	opacity: .85;
}

.sidebar-link:hover {
	background: var(--fp-sidebar-hover);
	color: #fff;
}

.sidebar-link.active {
	background: var(--fp-sidebar-active);
	color: #fff;
	font-weight: 600;
	box-shadow: inset 3px 0 0 #22c38e;
}

.sidebar-link.active > .bi:first-child {
	color: #34d399;
	opacity: 1;
}

.sidebar-link .seta {
	margin-left: auto;
	font-size: .75rem;
	transition: transform .2s ease;
}

.sidebar-link[aria-expanded="true"] .seta { transform: rotate(90deg); }

.sidebar-sub {
	margin: .15rem 0 .25rem 1.6rem;
	padding-left: .6rem;
	border-left: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-sub .sidebar-link {
	font-size: .85rem;
	padding: .45rem .7rem;
}

.sidebar-link .selo-breve {
	margin-left: auto;
	font-size: .72rem;
	color: var(--fp-sidebar-muted);
	opacity: .7;
}

.sidebar-rodape {
	padding: .9rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, .06);
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: .82rem;
}

.sidebar-rodape .nome {
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
}

.sidebar-rodape .perfil {
	color: var(--fp-sidebar-muted);
	font-size: .72rem;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
	position: sticky;
	top: 0;
	z-index: 1020;
	height: var(--fp-topbar-h);
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 0 2rem;
	background: color-mix(in srgb, var(--fp-body-bg) 82%, transparent);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--fp-border);
}

@media (max-width: 991.98px) {
	.topbar { padding: 0 1rem; }
}

.topbar .trilha {
	font-size: .85rem;
	color: var(--fp-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar .trilha strong {
	color: var(--bs-body-color);
	font-weight: 600;
}

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	font-size: .78rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #2f7fd8, #0f9f6e);
	flex-shrink: 0;
}

.avatar-lg {
	width: 44px;
	height: 44px;
	font-size: .95rem;
}

/* Administrador atendendo um cliente: destaque permanente no topo */
.atendimento-pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	max-width: 22rem;
	padding: .3rem .4rem .3rem .75rem;
	border-radius: 2rem;
	font-size: .85rem;
	background: rgba(240, 138, 36, .14);
	color: #b85f05;
	border: 1px solid rgba(240, 138, 36, .45);
}

[data-bs-theme="dark"] .atendimento-pill { color: #f6ad55; }

.atendimento-pill a { color: inherit; text-decoration: none; }
.atendimento-pill a:hover { text-decoration: underline; }
.atendimento-pill form { display: inline; }

.atendimento-pill .btn-encerrar {
	border: 0;
	background: transparent;
	color: inherit;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.atendimento-pill .btn-encerrar:hover { background: rgba(240, 138, 36, .2); }

body.atendendo .topbar { box-shadow: inset 0 3px 0 #f08a24; }

/* ---------------------------------------------------------------- páginas */

.page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.page-header .eyebrow {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--fp-accent);
	margin-bottom: .3rem;
}

.page-header h1 {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
}

.page-header .subtitulo {
	color: var(--fp-text-muted);
	margin: .3rem 0 0;
	font-size: .92rem;
}

.card-fp {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	box-shadow: var(--fp-shadow);
}

.card-fp > .card-fp-header {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--fp-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.card-fp > .card-fp-body { padding: 1.25rem; }

.card-fp-header h2, .card-fp-header h3 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.secao-form {
	padding: 1.4rem 1.5rem;
	border-bottom: 1px solid var(--fp-border);
}

.secao-form:last-of-type { border-bottom: 0; }

.secao-form .secao-titulo {
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .2rem;
}

.secao-form .secao-desc {
	font-size: .82rem;
	color: var(--fp-text-muted);
	margin-bottom: 1rem;
}

.rodape-form {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: 1rem 1.5rem;
	background: var(--fp-surface-2);
	border-top: 1px solid var(--fp-border);
	border-radius: 0 0 var(--fp-radius) var(--fp-radius);
}

/* ---------------------------------------------------------------- KPIs */

.stat-card {
	position: relative;
	padding: 1.15rem 1.25rem;
	height: 100%;
	overflow: hidden;
}

.stat-card .stat-icone {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	margin-bottom: .8rem;
}

.stat-card .stat-rotulo {
	font-size: .8rem;
	color: var(--fp-text-muted);
	font-weight: 500;
}

.stat-card .stat-valor {
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-top: .1rem;
}

.stat-card .stat-extra {
	font-size: .8rem;
	color: var(--fp-text-muted);
	margin-top: .2rem;
}

.tom-verde { background: rgba(15, 159, 110, .12); color: var(--fp-receita); }
.tom-azul { background: rgba(47, 127, 216, .12); color: var(--fp-destinacao); }
.tom-roxo { background: rgba(130, 10, 209, .12); color: #9b5de5; }
.tom-laranja { background: rgba(236, 112, 0, .12); color: #f08a24; }

/* ---------------------------------------------------------------- cartões de conta */

.conta-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: var(--fp-radius);
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	box-shadow: var(--fp-shadow);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.conta-card:hover {
	box-shadow: var(--fp-shadow-lg);
	transform: translateY(-1px);
}

.conta-card .faixa {
	height: 4px;
	background: var(--cor-conta, #6c757d);
}

.conta-card .corpo {
	padding: 1.1rem 1.2rem;
	flex: 1;
}

.conta-card .banco-logo {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
	background: var(--cor-conta, #6c757d);
	flex-shrink: 0;
}

.conta-card .titulo {
	font-weight: 600;
	line-height: 1.25;
}

.conta-card .sub {
	font-size: .8rem;
	color: var(--fp-text-muted);
}

.conta-card .rodape {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .65rem 1.2rem;
	border-top: 1px solid var(--fp-border);
	background: var(--fp-surface-2);
	font-size: .8rem;
}

.conta-card.inativa { opacity: .6; }

.dado-rotulo {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fp-text-muted);
}

.dado-valor {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Cartão de crédito com aparência de cartão físico */
.cartao-visual {
	position: relative;
	aspect-ratio: 1.586;
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
	color: #fff;
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 45%),
		linear-gradient(135deg, var(--cor-conta, #334155) 0%, color-mix(in srgb, var(--cor-conta, #334155) 55%, #000) 100%);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.cartao-visual .chip {
	width: 36px;
	height: 27px;
	border-radius: 6px;
	background: linear-gradient(135deg, #f6e27a, #c9a227);
	opacity: .9;
}

.cartao-visual .numero {
	font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
	letter-spacing: .14em;
	font-size: 1.05rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.cartao-visual .apelido {
	font-weight: 600;
	font-size: .95rem;
}

.cartao-visual .bandeira {
	font-weight: 800;
	font-style: italic;
	letter-spacing: .02em;
	font-size: .95rem;
	opacity: .95;
}

.cartao-visual .banco {
	font-size: .75rem;
	opacity: .85;
}

.cartao-inativo .cartao-visual { filter: grayscale(.85); opacity: .7; }

/* ---------------------------------------------------------------- tabelas */

/* Mantém elementos absolutos (ex.: rótulos acessíveis) dentro da área rolável */
.table-responsive { position: relative; }

.tabela-fp {
	--bs-table-bg: transparent;
	margin: 0;
}

.tabela-fp thead th {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fp-text-muted);
	background: var(--fp-surface-2);
	border-bottom: 1px solid var(--fp-border);
	padding: .7rem 1rem;
	white-space: nowrap;
}

.tabela-fp tbody td {
	padding: .7rem 1rem;
	vertical-align: middle;
	border-color: var(--fp-border);
}

.tabela-fp tbody tr:last-child td { border-bottom: 0; }

.tabela-fp tbody tr:hover { background: var(--fp-surface-2); }

/* ---------------------------------------------------------------- plano de contas */

.plano .linha-plano td { padding-top: .5rem; padding-bottom: .5rem; }

.plano .codigo {
	font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
	font-size: .85rem;
	white-space: nowrap;
}

.plano .nivel-1 { background: color-mix(in srgb, var(--fp-surface-2) 60%, var(--fp-surface)); }
.plano .nivel-1 .descricao { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; }
.plano .nivel-2 .descricao { font-weight: 600; }
.plano .nivel-2 .descricao-wrap { padding-left: 1.4rem; }
.plano .nivel-3 .descricao-wrap { padding-left: 2.8rem; }
.plano .nivel-3 .descricao { color: var(--bs-body-color); }

.plano .alternar {
	width: 1.4rem;
	height: 1.4rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fp-text-muted);
	display: inline-grid;
	place-items: center;
	border-radius: .3rem;
	transition: transform .15s ease;
}

.plano .alternar:hover { background: var(--fp-surface-2); color: var(--bs-body-color); }
.plano .linha-plano.recolhida .alternar { transform: rotate(-90deg); }
.plano .espaco-alternar { display: inline-block; width: 1.4rem; }

.plano .linha-plano.inativa .descricao,
.plano .linha-plano.inativa .codigo { text-decoration: line-through; opacity: .55; }

.plano .linha-plano.destaque { animation: destaque 2.4s ease; }

@keyframes destaque {
	0%, 40% { background: rgba(var(--fp-accent-rgb), .18); }
	100% { background: transparent; }
}

.ponto-tipo {
	display: inline-block;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	margin-right: .5rem;
	vertical-align: middle;
}

.ponto-RECEITA { background: var(--fp-receita); }
.ponto-DESTINACAO { background: var(--fp-destinacao); }
.ponto-DESPESA { background: var(--fp-despesa); }

.selo {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .72rem;
	font-weight: 600;
	padding: .2rem .55rem;
	border-radius: 2rem;
	white-space: nowrap;
}

.selo-ativo { background: rgba(15, 159, 110, .12); color: var(--fp-receita); }
.selo-inativo { background: rgba(102, 117, 138, .14); color: var(--fp-text-muted); }
.selo-admin { background: rgba(47, 127, 216, .12); color: var(--fp-destinacao); }
.mes-titulo::first-letter { text-transform: uppercase; }
.selo-vencido { background: rgba(217, 72, 95, .12); color: var(--fp-despesa); }
.tabela-fp tbody tr.linha-vencida td:first-child { box-shadow: inset 3px 0 0 var(--fp-despesa); color: var(--fp-despesa); font-weight: 600; }
.selo-neutro { background: var(--fp-surface-2); color: var(--fp-text-muted); border: 1px solid var(--fp-border); }

.previsao-codigo {
	font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--fp-accent);
}

/* ---------------------------------------------------------------- seletor de cor */

.seletor-cor {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.seletor-cor input { position: absolute; opacity: 0; pointer-events: none; }

.seletor-cor label {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
	transition: transform .12s ease;
}

.seletor-cor label:hover { transform: scale(1.08); }

.seletor-cor input:checked + label {
	border-color: var(--bs-body-color);
	box-shadow: 0 0 0 2px var(--fp-surface) inset;
}

.seletor-cor input:focus-visible + label { outline: 2px solid var(--fp-accent); outline-offset: 2px; }

.seletor-cor .cor-auto {
	background: conic-gradient(#ec7000, #820ad1, #005ca9, #0f9f6e, #cc092f, #ec7000);
	color: #fff;
	font-size: .8rem;
}

/* ---------------------------------------------------------------- vazio / diversos */

.estado-vazio {
	text-align: center;
	padding: 3.5rem 1.5rem;
}

.estado-vazio .icone {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: inline-grid;
	place-items: center;
	font-size: 1.7rem;
	background: var(--fp-accent-soft);
	color: var(--fp-accent);
	margin-bottom: 1rem;
}

.estado-vazio h3 { font-size: 1.1rem; font-weight: 600; }
.estado-vazio p { color: var(--fp-text-muted); max-width: 420px; margin: .4rem auto 1.2rem; }

.passo {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	padding: .85rem 0;
	border-bottom: 1px dashed var(--fp-border);
}

.passo:last-child { border-bottom: 0; }

.passo .marcador {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: .8rem;
	flex-shrink: 0;
	border: 1.5px solid var(--fp-border);
	color: var(--fp-text-muted);
}

.passo.feito .marcador {
	background: var(--fp-accent);
	border-color: var(--fp-accent);
	color: #fff;
}

.modulo-roteiro {
	display: flex;
	gap: .9rem;
	align-items: center;
	padding: .8rem 0;
}

.modulo-roteiro + .modulo-roteiro { border-top: 1px solid var(--fp-border); }

.alert-flash {
	border: 0;
	border-left: 4px solid;
	box-shadow: var(--fp-shadow);
}

.alert-flash.alert-success { border-left-color: var(--fp-receita); }
.alert-flash.alert-danger { border-left-color: var(--fp-despesa); }

.ts-wrapper.is-invalid .ts-control { border-color: var(--bs-form-invalid-border-color); }

.nav-pills {
	--bs-nav-pills-link-active-bg: var(--fp-accent);
	--bs-nav-link-color: var(--bs-body-color);
	--bs-nav-link-hover-color: var(--fp-accent);
}

.nav-pills .nav-link:not(.active) { background: var(--fp-surface); border: 1px solid var(--fp-border); }

.dropdown-menu {
	--bs-dropdown-link-active-bg: var(--fp-accent);
	box-shadow: var(--fp-shadow-lg);
	border-color: var(--fp-border);
}

/* ---------------------------------------------------------------- login */

.login-pagina {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
}

@media (max-width: 991.98px) {
	.login-pagina { grid-template-columns: 1fr; }
	.login-arte { display: none !important; }
}

.login-arte {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3rem;
	color: #fff;
	background:
		radial-gradient(60% 60% at 15% 10%, rgba(34, 195, 142, .35) 0%, transparent 60%),
		radial-gradient(50% 50% at 90% 90%, rgba(47, 127, 216, .35) 0%, transparent 60%),
		linear-gradient(160deg, #0e1726 0%, #0a1220 100%);
	overflow: hidden;
}

.login-arte h2 {
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.15;
	max-width: 30rem;
}

.login-arte p { color: #b6c2d3; max-width: 28rem; }

.login-arte .destaques li {
	display: flex;
	gap: .7rem;
	align-items: center;
	margin-bottom: .7rem;
	color: #d6dde8;
}

.login-arte .destaques .bi { color: #34d399; }

.login-form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	background: var(--fp-body-bg);
}

.login-card {
	width: 100%;
	max-width: 400px;
}

/* ---------------------------------------------------------------- orçamento */

.tabela-orcamento { font-size: .82rem; }
.tabela-orcamento th, .tabela-orcamento td { padding: .3rem .4rem !important; white-space: nowrap; }
.tabela-orcamento .col-conta {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 17rem;
	max-width: 22rem;
	background: var(--fp-surface);
	box-shadow: inset -1px 0 0 var(--fp-border);
}
.tabela-orcamento thead .col-conta, .tabela-orcamento tfoot .col-conta { background: var(--fp-surface-2); }
.tabela-orcamento .celula-orcamento { width: 6.6rem; min-width: 6.6rem; padding: .15rem .35rem; font-size: .8rem; }
.tabela-orcamento tr.nivel-1 td { background: color-mix(in srgb, var(--fp-surface-2) 70%, var(--fp-surface)); font-weight: 700; }
.tabela-orcamento tr.nivel-2 td { font-weight: 600; }
.tabela-orcamento tr.nivel-2 .col-conta .descricao { padding-left: .6rem; }
.tabela-orcamento tr.nivel-3 .col-conta .descricao { padding-left: 1.2rem; font-weight: 400; }
.tabela-orcamento tfoot th, .tabela-orcamento tfoot td { background: var(--fp-surface-2); font-weight: 600; border-top: 1px solid var(--fp-border); }
.tabela-orcamento tfoot tr.linha-resultado th, .tabela-orcamento tfoot tr.linha-resultado td { font-size: .88rem; }