| ):
* .amount Valor monetário (tabular-nums, bold, nowrap)
* Uso: relatórios financeiros com agrupamento e totalizadores
* Ex atual: recebiveis.html (extrato de boletos pagos / em aberto)
*
* ── BADGES DE STATUS ────────────────────────────────────────────────────────
* .stmt-badge Base do badge (pill arredondado, inline-block)
* Modificadores (adicionar junto com .stmt-badge):
* .stmt-badge-pago Verde claro → status "pago"
* .stmt-badge-pendente Laranja claro → status "pendente"
* .stmt-badge-vencido Vermelho claro → boleto vencido não pago
* .stmt-badge-default Cinza → status desconhecido / neutro
* .stmt-badge-transf Azul claro → transferência registrada
* Uso: em qualquer tabela ou lista que exiba status de boleto / lançamento
* Ex atual: recebiveis.html (coluna Status do extrato de boletos)
*
* =============================================================================
*/
.nav>li>a:hover,
.nav>li>a:focus {
color: inherit;
background-color: transparent;
}
table.dataTable thead>tr>th {
padding: 9px !important;
}
div.dataTables_filter input {
margin-left: 0px !important;
}
table.dataTable td.dataTables_empty {
padding: 50px 10px !important;
background: #fff !important;
}
.dt-panelfooter {
padding: 0px;
background: #fff;
border-top: 1px solid var(--color-border);
}
.btn-outline-custom {
color: #f36f3f;
border-color: #f36f3f;
}
.btn-outline-custom:hover {
color: #fff;
background-color: #f36f3f;
border-color: #f36f3f;
}
.btn-outline-custom:focus, .btn-outline-custom.focus {
box-shadow: 0 0 0 0.2rem rgba(243, 111, 63, 0.35);
}
.btn-outline-custom:disabled, .btn-outline-custom.disabled {
color: #f36f3f;
background-color: transparent;
}
.btn-outline-custom:not(:disabled):not(.disabled):active, .btn-outline-custom:not(:disabled):not(.disabled).active,
.show > .btn-outline-custom.dropdown-toggle {
color: #fff;
background-color: #f36f3f;
border-color: #f36f3f;
}
.btn-outline-custom:not(:disabled):not(.disabled):active:focus, .btn-outline-custom:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-custom.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(243, 111, 63, 0.35);
}
.btn-aviva {
background-color: #f15a29;
color: #fff;
border: 1px solid #f15a29;
}
.text-aviva {
color: #f36f3f;
}
/* =============================================
MODERN UI OVERRIDES
============================================= */
:root {
/* ── MARCA (laranja Avivalista) ── */
--aviva-orange: #f36f3f;
--aviva-orange-dark: #d95a2a;
--aviva-orange-press: #f15a29; /* estado pressed do .btn-aviva */
--aviva-orange-soft: rgba(243,111,63,.15);
/* ── NEUTROS / TEXTO / SUPERFÍCIE ── */
--color-text: #374151;
--color-text-muted: #4b5563; /* 7,56:1 no branco (era #6b7280, 4,83:1 — falhava AAA) */
--color-bg: #f1f4f8;
--color-surface: #ffffff;
--color-border: #e5e7eb;
--color-dark: #0f172a;
--color-dark-mid: #1e293b;
--color-dark-blue: #1e3a6c;
/* ── AÇÃO PRIMÁRIA (azul) — substitui os #1d4ed8 hardcoded ── */
--color-primary: #1d4ed8;
--color-primary-hover: #1e40af;
--color-primary-soft: #f0f4fa;
--color-primary-border: #c8d6ea;
/* ── ESCALA SLATE (neutros frios usados nos componentes financeiros) ── */
--slate-900: #0f172a; /* = --color-dark */
--slate-800: #1e293b; /* = --color-dark-mid */
--slate-600: #475569;
--slate-500: #64748b;
--slate-400: #94a3b8;
--slate-300: #cbd5e1;
--slate-200: #e2e8f0;
--slate-100: #f1f5f9;
--slate-50: #f8fafc;
/* ── CORES SEMÂNTICAS (base + soft p/ badges) ── */
--color-success: #16a34a;
--color-success-dark: #1e8449;
--color-success-soft: #dcfce7;
--color-warning: #ca6f1e;
--color-warning-accent: #fbbf24;
--color-warning-soft: #fdebd0;
--color-warning-ink: #8a4a12; /* texto sobre --color-warning-soft (contraste AA) */
--color-danger: #dc2626;
--color-danger-dark: #c0392b;
--color-danger-soft: #fadbd8;
--color-info: #60a5fa;
--color-info-accent: #93c5fd;
--color-info-soft: #f5f8ff;
--color-purple: #7c3aed;
--color-purple-dark: #6d28d9;
--color-purple-soft: #ede9fe;
/* ── GRADIENTES (cards bancários .bc-* e header) ── */
--grad-bank-header: linear-gradient(135deg, #1e293b 0%, #1d4ed8 100%);
/* ── TIPOGRAFIA (escala) ──
Escala elevada para o público real do sistema: pastores e dirigentes,
boa parte entre 60 e 80 anos, com presbiopia. Piso de 13px; os tokens
antigos de 10 e 11px continuam existindo para não quebrar referências,
mas não descem mais abaixo desse piso. */
--font-family-base: 'Inter', 'Roboto', Helvetica, Arial, sans-serif;
--fs-3xs: 13px;
--fs-2xs: 13px;
--fs-xs: 14px;
--fs-sm: 15px;
--fs-base: 16px;
--fs-md: 18px;
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 24px;
--fs-3xl: 32px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--ls-uppercase: .5px;
--ls-label: .6px;
/* ── ESPAÇAMENTO (escala 4px) ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 30px;
/* ── RAIO DE BORDA ── */
--radius-sm: 4px;
--radius: 8px;
--radius-md: 12px;
--radius-pill: 999px;
/* ── SOMBRAS ── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.05);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
--shadow-focus: 0 0 0 3px rgba(29,78,216,.35); /* foco azul (a11y) */
--shadow-focus-orange:0 0 0 .2rem rgba(243,111,63,.35);
--shadow-focus-danger:0 0 0 .2rem rgba(220,38,38,.25);
/* ── Z-INDEX (escala nomeada) ── */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 500;
--z-overlay: 1000;
--z-modal: 1050;
--z-tooltip: 9999;
/* ── MOVIMENTO ── */
--transition-fast: all .15s ease;
--transition-base: all .25s ease;
}
/* --- Tipografia e body --- */
body {
font-family: 'Inter', 'Roboto', Helvetica, Arial, sans-serif !important;
background-color: var(--color-bg) !important;
color: var(--color-text) !important;
-webkit-font-smoothing: antialiased;
}
/* --- Panels --- */
.panel {
border: none !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-md) !important;
}
.panel-heading {
padding: 0 0 0 26px;
border-radius: var(--radius) var(--radius) 0 0 !important;
border-bottom: 1px solid var(--color-border) !important;
}
.panel-body {
border-radius: 0 0 var(--radius) var(--radius);
}
/* --- Botões --- */
.btn {
border-radius: 6px !important;
font-weight: 500 !important;
transition: all 0.15s ease !important;
}
/* Botões agrupados (.btn-group): cantos internos quadrados + junção,
vencendo o border-radius:6px global do .btn acima. Mantém só os cantos externos. */
.btn-group {
display: inline-flex;
}
.btn-group > .btn,
.btn-group > .dt-button {
border-radius: 0 !important;
}
.btn-group > .btn:first-child,
.btn-group > .dt-button:first-child {
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
.btn-group > .btn:last-child,
.btn-group > .dt-button:last-child {
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
}
.btn-group > .btn + .btn,
.btn-group > .dt-button + .dt-button {
margin-left: -1px !important;
}
.btn-group > .btn:hover,
.btn-group > .dt-button:hover {
z-index: 2; /* a borda do botão em hover fica por cima da do vizinho */
}
.btn-aviva:hover {
background-color: var(--aviva-orange-dark) !important;
border-color: var(--aviva-orange-dark) !important;
}
/* --- Inputs --- */
.form-control {
border-radius: 6px !important;
border-color: var(--color-border) !important;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.form-control:focus {
border-color: var(--aviva-orange) !important;
box-shadow: 0 0 0 3px rgba(243,111,63,0.15) !important;
outline: none !important;
}
/* --- Tabelas --- */
/* Cabeçalho em caixa normal (02/10/2026): o caixa-alta espaçado gritava mais
que os próprios dados. O tamanho vem de --fs-tabela, no fim do arquivo. */
.table thead > tr > th {
background-color: var(--slate-50) !important;
color: var(--color-text-muted) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap;
border-bottom: 1px solid var(--slate-300) !important;
}
.table tbody > tr > td {
vertical-align: middle !important;
}
/* --- Modais --- */
.modal-content {
border: none !important;
border-radius: var(--radius) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
.modal-header {
border-bottom: 1px solid var(--color-border) !important;
border-radius: var(--radius) var(--radius) 0 0 !important;
}
.modal-footer {
border-top: 1px solid var(--color-border) !important;
}
/* --- Breadcrumb --- */
.breadcrumb {
background: transparent !important;
padding: 8px 0 !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
/* --- Metro tiles (menu rápido) --- */
.metro-tile {
border-radius: var(--radius) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.metro-tile:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
text-decoration: none !important;
}
/* --- Snackbar --- */
#snackbar {
border-radius: var(--radius) !important;
font-size: 14px !important;
box-shadow: var(--shadow-md) !important;
}
/* --- Select2 --- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border-color: var(--color-border) !important;
border-radius: 6px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--aviva-orange) !important;
box-shadow: 0 0 0 3px rgba(243,111,63,0.15) !important;
}
/* =============================================
SKELETON / LOADING
============================================= */
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Base compartilhada entre todos os skeletons claros */
.skel-box,
.bank-card-skeleton {
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.2s infinite;
}
.skel-box {
display: inline-block;
border-radius: 3px;
}
/* Skeleton para valores de painel de totais (fundo claro) */
.skel-stat {
display: inline-block;
width: 90px;
height: 22px;
border-radius: 4px;
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.2s infinite;
vertical-align: middle;
}
.skel-tr td { padding: 10px 8px !important; }
.loading-overlay {
position: relative;
pointer-events: none;
}
.loading-overlay::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.55);
border-radius: 4px;
}
/* =============================================
TOOLTIP DE INFORMAÇÃO (ícone ?)
============================================= */
.hdr-info-icon {
position: relative;
display: inline;
cursor: help;
color: #94a3b8;
font-size: 11px;
vertical-align: middle;
margin-left: 3px;
}
.hdr-info-box {
display: none;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--color-dark-mid);
color: #e2e8f0;
font-size: 12px;
font-weight: 400;
line-height: 1.6;
padding: 12px 14px;
border-radius: 8px;
width: 260px;
z-index: 9999;
box-shadow: 0 6px 24px rgba(0,0,0,.25);
pointer-events: none;
white-space: normal;
text-align: left;
}
.hdr-info-box::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--color-dark-mid);
}
.hdr-info-icon:hover .hdr-info-box { display: block; }
/* =============================================
CARDS DE CONTA BANCÁRIA
============================================= */
.bank-card {
border-radius: 12px;
padding: 20px 22px 16px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,.18);
margin-bottom: 16px;
}
.bank-card::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,.07);
pointer-events: none;
}
.bank-card::after {
content: '';
position: absolute;
bottom: -25px; right: 10px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,.04);
pointer-events: none;
}
.bc-dga { background: linear-gradient(135deg, var(--color-dark-blue), #2563ba); }
.bc-dgcec { background: linear-gradient(135deg, #44107a, #7c3aed); }
.bc-dgas { background: linear-gradient(135deg, #064e3b, #059669); }
.bc-dgem { background: linear-gradient(135deg, #1e3a5f, #0284c7); }
.bc-reg { background: linear-gradient(135deg, #134e4a, #0d9488); }
.bc-fex { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.bc-fasmijub { background: linear-gradient(135deg, #831843, #db2777); }
.bc-other { background: linear-gradient(135deg, #374151, #6b7280); }
.bank-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.bank-card-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; opacity: .9; }
.bank-card-chip { width: 28px; height: 20px; background: rgba(255,255,255,.3); border-radius: 4px; }
.bank-card-saldo-label { font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: .5px; }
.bank-card-saldo-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin-bottom: 10px; }
.bank-card-saldo-value.negative { color: #fca5a5; }
.bank-card-subinfo { display: flex; gap: 24px; font-size: 12px; opacity: .8; margin-bottom: 12px; }
.bank-card-subinfo span { display: flex; flex-direction: column; }
.bank-card-subinfo small { font-size: 10px; opacity: .65; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 1px; }
.bank-progress { height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; margin-bottom: 14px; }
.bank-progress-bar { height: 3px; background: rgba(255,255,255,.7); border-radius: 2px; transition: width .4s; }
.bank-card-actions { display: flex; gap: 8px; }
.btn-bank {
flex: 1;
border: 1px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.1);
color: #fff;
border-radius: 6px;
padding: 5px 8px;
font-size: 12px;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.btn-bank:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-bank-primary { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); }
.btn-bank:focus { outline: none; }
.bank-card-skeleton {
height: 180px;
border-radius: 12px;
animation-duration: 1.4s; /* herda gradiente de .bank-card-skeleton acima */
margin-bottom: 16px;
}
/* =============================================
TABELAS DE RELATÓRIO / EXTRATO
============================================= */
.report-table thead tr th {
background: var(--color-dark);
color: #e2e8f0;
border-color: var(--color-dark-mid) !important;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
padding: 10px !important;
}
.report-table tbody tr.stmt-summary-header td {
background: #f0f4fa !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #4a6fa5;
border-top: 2px solid #c8d6ea !important;
padding: 7px 10px !important;
}
.report-table tbody tr.stmt-summary-row td {
background: #fafbfe !important;
font-size: 13px;
color: #444;
border-bottom: 1px dotted #e4eaf5 !important;
padding: 7px 10px !important;
}
.report-table tbody tr.stmt-summary-sep td {
background: #f0f4fa !important;
border-bottom: 2px solid #dde4ef !important;
padding: 3px !important;
}
.report-table tbody tr.stmt-day-header td {
background: #eef2f9 !important;
border-top: 2px solid #c8d6ea !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #4a6fa5;
padding: 6px 10px !important;
}
.report-table tbody tr.stmt-day-total td {
background: #e8f0fb !important;
border-bottom: 2px solid #c8d6ea !important;
font-size: 12px;
color: #4a6fa5;
padding: 5px 10px !important;
}
.report-table tbody tr.stmt-tx td {
vertical-align: middle;
font-size: 13px;
border-bottom: 1px solid #f0f3f8 !important;
padding: 9px 10px !important;
}
.report-table tbody tr.stmt-tx:hover td { background: #f5f8ff !important; }
.report-table tbody tr.stmt-grand-total td {
background: var(--color-dark) !important;
color: #fff !important;
font-weight: 700;
font-size: 14px;
border-top: 3px solid #000 !important;
padding: 10px !important;
}
.report-table .amount {
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.stmt-tx-transferido td { color: #94a3b8 !important; }
/* =============================================
BADGES DE STATUS
============================================= */
.stmt-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.stmt-badge-pago { background: #d4efdf; color: #1e8449; }
.stmt-badge-pendente { background: #fdebd0; color: #ca6f1e; }
.stmt-badge-vencido { background: #fadbd8; color: #c0392b; }
.stmt-badge-default { background: #eaecee; color: #717d7e; }
.stmt-badge-transf { background: #dbeafe; color: #1e40af; }
/* =============================================
PATRIMONIOS - LISTA
============================================= */
.patrimonios-lista-page .dataTables_length select {
margin: 0 10px 0 0;
}
.patrimonios-lista-page .patrimonios-toolbar .btn-group {
display: inline-flex;
flex-wrap: wrap;
gap: 0; /* sem espaço: btn-group unido (segmentado) */
}
.patrimonios-lista-page .patrimonios-toolbar .btn-group .dt-button {
border: 1px solid #c8d2dc;
background: #ffffff;
color: #3d4a5d;
font-weight: 600;
transition: all .2s ease;
}
.patrimonios-lista-page .patrimonios-toolbar .btn-group .dt-button:hover,
.patrimonios-lista-page .patrimonios-toolbar .btn-group .dt-button:focus {
background: #f4f7fa;
color: #243447;
border-color: #aebfd0;
}
.patrimonios-lista-page .patrimonios-toolbar .btn-outline-success {
border-color: #b9dfc5 !important;
color: #1e7e34 !important;
}
.patrimonios-lista-page .patrimonios-toolbar .btn-outline-primary {
border-color: #b7d4f4 !important;
color: #1d6fb8 !important;
}
.patrimonios-lista-page .patrimonios-toolbar .btn-outline-danger {
border-color: #e5b7b0 !important;
color: #c0392b !important;
}
.patrimonios-lista-page .patrimonios-toolbar .btn-outline-info {
border-color: #b7d7e6 !important;
color: #1f6f8b !important;
}
.patrimonios-lista-page .patrimonios-table-wrap {
position: relative;
min-height: 220px;
}
.patrimonios-lista-page .patrimonios-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.92);
z-index: 8;
display: none;
align-items: center;
justify-content: center;
text-align: center;
}
.patrimonios-lista-page .patrimonios-loading.is-active {
display: flex;
}
.patrimonios-lista-page .patrimonios-loading .fa {
display: block;
font-size: 22px;
margin-bottom: 8px;
color: #2f6f9f;
}
.patrimonios-lista-page .patrimonios-loading span {
display: block;
font-size: 13px;
color: #3f4d5f;
font-weight: 600;
}
.patrimonios-lista-page .patrimonio-acoes .btn {
min-width: 72px;
font-weight: 600;
}
.patrimonios-lista-page .patrimonio-acoes .btn + .btn {
margin-left: 4px;
}
/* Card de filtros — acento laranja à esquerda (igual ao .patrimonio-form-header) */
.patrimonio-filtros-card {
margin-bottom: 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--aviva-orange);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.patrimonio-filtros-header {
padding: 14px 22px;
border-bottom: 1px solid var(--color-border);
background: #fafbfc;
}
.patrimonio-filtros-header h4 {
margin: 0 0 2px;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.patrimonio-filtros-header h4 .fa { color: var(--aviva-orange); }
.patrimonio-filtros-header p {
margin: 0;
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.4;
}
.patrimonio-filtros-body { padding: 16px 22px 4px; }
.patrimonio-filtros-body .form-group label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: .02em;
}
.patrimonio-filtros-body .form-group label .fa { color: var(--color-text-muted); }
.patrimonio-filtros-body .form-control {
border-color: var(--color-border);
border-radius: 6px;
color: var(--color-text);
}
.patrimonio-filtros-body .form-control:focus {
border-color: var(--aviva-orange);
box-shadow: 0 0 0 2px rgba(243, 111, 63, 0.15);
}
/* Painel da tabela alinhado ao design system */
.patrimonios-lista-page .patrimonios-table-panel {
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.patrimonios-lista-page .patrimonios-table thead th {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--color-text-muted);
border-bottom: 2px solid var(--color-border);
background: #fafbfc;
}
.patrimonios-lista-page .patrimonios-table tbody td {
vertical-align: middle;
color: var(--color-text);
border-color: var(--color-border);
}
.patrimonios-lista-page .patrimonios-table tbody tr:hover > td {
background: #f8fafc;
}
/* =============================================
PATRIMONIOS - FORM (criar / editar)
=============================================
Templates:
financeiro/patrimonios/form.html
financeiro/patrimonios/form_cadastro.html
w
.patrimonio-form-shell Largura máxima do formulário
.patrimonio-form-header Cabeçalho com acento laranja à esquerda
.patrimonio-status-badge Pill "Edição #ID / Novo cadastro"
.patrimonio-tabs Nav de abas
.patrimonio-section-heading-alt Heading da 1ª seção (inline no panel-body)
#h_pe, #h_im, #h_im2, Headings das seções condicionais
#h_ve, #h_co (imóvel, endereço, veículo, consórcio)
.patrimonio-section-block Corpo de seção
.patrimonio-section-copy Subtítulo de seção
.patrimonio-toggle-group Wrapper de campo toggle
.patrimonio-btn-radio Grupo Sim/Não
.btn-sim-ativo / .btn-nao-ativo Estados verde / vermelho
.patrimonio-documentos-head Cabeçalho da aba documentos
.patrimonio-upload-card Card de upload com borda dashed
.patrimonio-documento-item Item na lista de documentos
.patrimonio-documentos-empty Estado vazio
.patrimonio-submit-bar Rodapé de ações
.patrimonio-submit-actions Flex container da barra
.patrimonio-submit-hint Texto auxiliar
.patrimonio-submit-buttons Grupo de botões
============================================= */
.patrimonio-form-shell { max-width: 1320px; margin: 0 auto; }
.gui-input { height: 38px !important; }
.patrimonio-form-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 16px;
padding: 16px 22px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--aviva-orange);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.patrimonio-form-header h3 {
margin: 0 0 4px;
font-size: 19px;
font-weight: 700;
color: var(--color-text);
}
.patrimonio-form-header p {
margin: 0;
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.5;
}
.patrimonio-status-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
background: #fff3ec;
color: var(--aviva-orange);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 5px;
border: 1px solid rgba(243,111,63,.25);
}
.patrimonio-tabs.nav > li > a {
padding: 13px 20px;
font-weight: 600;
font-size: 13px;
color: var(--color-text-muted);
border-radius: 0;
transition: color .15s;
}
.patrimonio-tabs.nav > li.active > a,
.patrimonio-tabs.nav > li.active > a:hover,
.patrimonio-tabs.nav > li.active > a:focus {
color: var(--aviva-orange);
background: var(--color-surface);
border-bottom-color: transparent;
border-top: 2px solid var(--aviva-orange);
font-weight: 700;
}
.patrimonio-tabs.nav > li > a:hover { color: var(--color-text); }
.patrimonio-tabs .badge { margin-left: 6px; font-size: 10px; }
/* Primeira seção — flex para alinhar ícone, título e badge à direita */
.patrimonio-section-heading-alt {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px !important;
background: #fafbfc !important;
border-left: 3px solid var(--aviva-orange) !important;
border-bottom: 1px solid var(--color-border) !important;
border-radius: 0 !important;
}
.patrimonio-section-heading-alt small { margin-left: auto; font-weight: 400; }
/* Controle de visibilidade — classe utilitária de maior especificidade */
.pat-hidden { display: none !important; }
.pat-flex { display: flex !important; }
/* Seções condicionais — sem display definido aqui; JS controla via .pat-hidden / .pat-flex */
#h_pe, #h_im, #h_im2, #h_ve, #h_co {
padding: 12px 20px !important;
background: #fafbfc !important;
border-left: 3px solid var(--aviva-orange) !important;
border-bottom: 1px solid var(--color-border) !important;
border-radius: 0 !important;
}
#h_pe .panel-tile,
#h_im .panel-tile,
#h_im2 .panel-tile,
#h_ve .panel-tile,
#h_co .panel-tile {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: var(--color-text);
padding: 0 !important;
}
.patrimonio-section-block {
padding: 20px 20px 6px;
border: 0;
border-bottom: 1px solid var(--color-border);
background: transparent;
}
.patrimonio-section-copy {
margin: -6px 0 16px;
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.5;
}
.patrimonio-section-block .form-group label {
font-size: 12px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 5px;
}
.patrimonio-toggle-group { margin-bottom: 0; }
.patrimonio-toggle-group .control-label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 12px;
color: var(--color-text);
}
.patrimonio-btn-radio .btn {
min-width: 64px;
font-weight: 600;
font-size: 13px;
border-color: var(--color-border);
color: var(--color-text-muted);
background: var(--color-surface);
padding: 6px 14px;
}
.patrimonio-btn-radio .btn.active.btn-sim-ativo {
background: #dcfce7;
border-color: #16a34a;
color: #15803d;
box-shadow: none;
}
.patrimonio-btn-radio .btn.active.btn-nao-ativo {
background: #fee2e2;
border-color: #dc2626;
color: #b91c1c;
box-shadow: none;
}
.patrimonio-btn-radio .btn:hover:not(.active) {
background: #f3f4f6;
color: var(--color-text);
}
.patrimonio-documentos-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.patrimonio-documentos-head h4 {
margin: 0 0 3px;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
}
.patrimonio-documentos-head p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.patrimonio-documentos-head .patrimonio-submit-hint {
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
}
.patrimonio-upload-card {
padding: 18px;
border: 2px dashed var(--color-border);
border-radius: var(--radius);
background: #fafbfc;
transition: border-color .2s, background .2s;
margin-bottom: 0;
}
.patrimonio-upload-card:hover {
border-color: var(--aviva-orange);
background: #fff8f5;
}
.patrimonio-upload-card .help-block {
color: var(--color-text-muted);
font-size: 12px;
margin: 8px 0 0;
line-height: 1.4;
}
.patrimonio-documento-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
margin-bottom: 8px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface);
transition: box-shadow .15s;
}
.patrimonio-documento-item:hover { box-shadow: var(--shadow-sm); }
.patrimonio-documentos-empty {
padding: 36px 20px;
text-align: center;
border: 2px dashed var(--color-border);
border-radius: var(--radius);
color: var(--color-text-muted);
font-size: 13px;
background: #fafbfc;
line-height: 1.6;
}
.patrimonio-submit-bar {
padding: 14px 20px;
background: #fafbfc;
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius);
}
.patrimonio-submit-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0;
}
.patrimonio-submit-hint { color: var(--color-text-muted); font-size: 12px; }
.patrimonio-submit-buttons { display: flex; gap: 8px; align-items: center; }
.patrimonio-submit-buttons .button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
vertical-align: middle;
}
.patrimonio-submit-buttons .button.btn-primary {
background: var(--aviva-orange) !important;
border-color: var(--aviva-orange) !important;
color: #fff !important;
}
.patrimonio-submit-buttons .button.btn-primary:hover {
background: var(--aviva-orange-dark) !important;
border-color: var(--aviva-orange-dark) !important;
}
@media (max-width: 991px) {
.patrimonio-form-header,
.patrimonio-documentos-head,
.patrimonio-submit-actions { display: block; }
.patrimonio-submit-buttons { margin-top: 12px; flex-wrap: wrap; }
}
/* ── Validação inline e acessibilidade ── */
.field-error {
display: none;
margin-top: 5px;
font-size: 12px;
color: #c0392b;
font-weight: 500;
}
.field-error:not(:empty) { display: block; }
.form-group.has-error .form-control {
border-color: #e74c3c !important;
box-shadow: 0 0 0 2px rgba(231,76,60,.18) !important;
}
.form-group.has-error label { color: #c0392b; }
/* ── Botão de loading ── */
.patrimonio-submit-buttons .button[disabled] {
opacity: .7;
cursor: not-allowed;
}
/* ── Input group addon calendário ── */
.patrimonio-datepicker-btn {
background: #f9fafb;
border-color: var(--color-border);
color: var(--color-text-muted);
transition: background .15s, color .15s;
}
.patrimonio-datepicker-btn:hover {
background: var(--aviva-orange);
color: #fff;
border-color: var(--aviva-orange);
}
/* =============================================================================
BOTÕES — SISTEMA MODERNO
=============================================================================
Sobrescreve o sistema de botões do theme.css com cores sólidas, transições,
estados :hover / :focus (ring) / :active (feedback tátil) / disabled.
Usa apenas as variáveis do :root. Tamanhos com border-radius proporcional
ao --radius. Inclui variante outline e botão de ícone (.btn-icon).
Classes:
.btn-primary .btn-default .btn-danger .btn-success
.btn-warning .btn-info .btn-aviva
.btn-lg .btn-sm .btn-xs
.btn-outline-primary .btn-outline-danger
.btn-icon
============================================================================= */
/* --- Base comum a todos os botões do sistema moderno --- */
.btn {
font-weight: 500 !important;
line-height: 1.5 !important;
border-width: 1px !important;
border-style: solid !important;
border-radius: var(--radius) !important;
transition: color .15s ease, background-color .15s ease,
border-color .15s ease, box-shadow .15s ease !important;
}
.btn:focus,
.btn.focus {
outline: none !important;
}
.btn:active {
transform: translateY(1px);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
opacity: .6 !important;
cursor: not-allowed !important;
box-shadow: none !important;
transform: none !important;
}
/* --- Primary (laranja da marca) --- */
.btn-primary {
background-color: var(--aviva-orange) !important;
border-color: var(--aviva-orange) !important;
color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
background-color: var(--aviva-orange-dark) !important;
border-color: var(--aviva-orange-dark) !important;
color: #fff !important;
}
.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 3px rgba(243, 111, 63, .25) !important;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: var(--aviva-orange-dark) !important;
border-color: var(--aviva-orange-dark) !important;
color: #fff !important;
}
/* --- Aviva (alias da marca, mantém compat. com .btn-aviva existente) --- */
.btn-aviva {
background-color: var(--aviva-orange) !important;
border-color: var(--aviva-orange) !important;
color: #fff !important;
}
.btn-aviva:hover,
.btn-aviva:focus,
.btn-aviva.focus,
.btn-aviva:active,
.btn-aviva.active {
background-color: var(--aviva-orange-dark) !important;
border-color: var(--aviva-orange-dark) !important;
color: #fff !important;
}
.btn-aviva:focus,
.btn-aviva.focus {
box-shadow: 0 0 0 3px rgba(243, 111, 63, .25) !important;
}
/* --- Default (neutro / surface) --- */
.btn-default {
background-color: var(--color-surface) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
background-color: #f3f4f6 !important;
border-color: #d1d5db !important;
color: var(--color-text) !important;
}
.btn-default:focus,
.btn-default.focus {
box-shadow: 0 0 0 3px rgba(55, 65, 81, .15) !important;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-color: #e5e7eb !important;
border-color: #d1d5db !important;
color: var(--color-text) !important;
}
/* --- Danger --- */
.btn-danger {
background-color: #dc2626 !important;
border-color: #dc2626 !important;
color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
background-color: #b91c1c !important;
border-color: #b91c1c !important;
color: #fff !important;
}
.btn-danger:focus,
.btn-danger.focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, .25) !important;
}
/* --- Success --- */
.btn-success {
background-color: #16a34a !important;
border-color: #16a34a !important;
color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
background-color: #15803d !important;
border-color: #15803d !important;
color: #fff !important;
}
.btn-success:focus,
.btn-success.focus {
box-shadow: 0 0 0 3px rgba(22, 163, 74, .25) !important;
}
/* --- Warning --- */
.btn-warning {
background-color: #f59e0b !important;
border-color: #f59e0b !important;
color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
background-color: #d97706 !important;
border-color: #d97706 !important;
color: #fff !important;
}
.btn-warning:focus,
.btn-warning.focus {
box-shadow: 0 0 0 3px rgba(245, 158, 11, .25) !important;
}
/* --- Info --- */
.btn-info {
background-color: #0ea5e9 !important;
border-color: #0ea5e9 !important;
color: #fff !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
background-color: #0284c7 !important;
border-color: #0284c7 !important;
color: #fff !important;
}
.btn-info:focus,
.btn-info.focus {
box-shadow: 0 0 0 3px rgba(14, 165, 233, .25) !important;
}
/* --- Tamanhos (border-radius proporcional ao --radius) ---
Alturas subidas: o `.btn-xs` tinha ~25px e é o que carrega Fechar Caixa,
Abrir Mês e Lançar Entradas. WCAG 2.5.5 pede 44px; para dedo idoso, 48. */
.btn-lg {
padding: 13px 24px !important;
font-size: 17px !important;
border-radius: calc(var(--radius) + 2px) !important;
}
.btn-sm {
padding: 8px 14px !important;
font-size: 14px !important;
border-radius: calc(var(--radius) - 2px) !important;
}
.btn-xs {
padding: 6px 11px !important;
font-size: 13px !important;
border-radius: calc(var(--radius) - 3px) !important;
}
/* Ação principal de uma linha/tela: alvo de 48px, rótulo legível.
Use no lugar de .btn-xs sempre que o botão FIZER a tarefa (fechar o mês,
lançar, abrir caixa) em vez de apenas navegar. */
.btn-acao {
min-height: 48px !important;
padding: 12px 20px !important;
font-size: 16px !important;
font-weight: 600 !important;
border-radius: var(--radius) !important;
}
.btn-acao.btn-block { width: 100%; }
/* Botão de ícone: 36px e 30px eram alvos pequenos demais para toque */
.btn-icon { width: 44px !important; height: 44px !important; }
.btn-icon.btn-sm { width: 40px !important; height: 40px !important; }
/* --- Variantes outline (borda colorida, fundo transparente) --- */
.btn-outline-primary {
background-color: transparent !important;
border-color: var(--aviva-orange) !important;
color: var(--aviva-orange) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
background-color: var(--aviva-orange) !important;
border-color: var(--aviva-orange) !important;
color: #fff !important;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
box-shadow: 0 0 0 3px rgba(243, 111, 63, .25) !important;
}
.btn-outline-danger {
background-color: transparent !important;
border-color: #dc2626 !important;
color: #dc2626 !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger.active {
background-color: #dc2626 !important;
border-color: #dc2626 !important;
color: #fff !important;
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, .25) !important;
}
/* --- Botão de ícone (quadrado, sem texto) --- */
.btn-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
line-height: 1 !important;
}
.btn-icon .fa,
.btn-icon .fas,
.btn-icon .far,
.btn-icon .fab { font-size: 15px; }
.btn-icon.btn-sm { width: 30px !important; height: 30px !important; }
.btn-icon.btn-lg { width: 44px !important; height: 44px !important; }
/* =============================================================================
TIPOGRAFIA GLOBAL — refinamento
=============================================================================
Espaçamento, peso e cores via design system. Não usa !important onde houver
risco de conflitar com overrides de seção; mantém o body já definido acima.
============================================================================= */
body {
font-size: var(--fs-base); /* 16px: ver nota na escala tipográfica */
line-height: 1.6;
letter-spacing: -0.005em;
}
h1, h2, h3, h4 {
color: var(--color-text);
font-weight: 700;
line-height: 1.25;
}
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3, h4 { letter-spacing: -0.01em; }
label {
color: var(--color-text);
font-weight: 600;
}
small,
.small {
color: var(--color-text-muted);
font-size: 85%;
}
.text-muted {
color: var(--color-text-muted) !important;
}
/* =============================================================================
INPUTS — refinamento moderno
=============================================================================
Complementa o .form-control já definido na seção MODERN UI OVERRIDES
(border-radius, focus ring laranja). Aqui ajustamos altura, padding e
placeholder mais suave.
============================================================================= */
.form-control {
height: 40px !important;
padding: 9px 13px !important;
font-size: 14px !important;
color: var(--color-text) !important;
}
textarea.form-control { height: auto !important; }
.form-control::placeholder {
color: var(--color-text-muted) !important;
opacity: .65 !important;
}
.input-sm { height: 32px !important; padding: 6px 10px !important; font-size: 12px !important; }
.input-lg { height: 48px !important; padding: 12px 16px !important; font-size: 16px !important; }
/* =============================================================================
BADGES E PILLS — cores do design system
============================================================================= */
.badge {
display: inline-block;
padding: 3px 9px;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
border-radius: 999px;
background-color: var(--color-text-muted);
color: #fff;
vertical-align: baseline;
}
.btn .badge { top: 0; }
/* Bootstrap .label como pill colorido do DS */
.label {
display: inline-block;
padding: 3px 9px;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
border-radius: 999px;
letter-spacing: .01em;
}
.label-default { background-color: #eef0f3 !important; color: var(--color-text-muted) !important; }
.label-primary { background-color: #fdece4 !important; color: var(--aviva-orange-dark) !important; }
.label-success { background-color: #dcfce7 !important; color: #15803d !important; }
.label-info { background-color: #e0f2fe !important; color: #0369a1 !important; }
.label-warning { background-color: #fef3c7 !important; color: #b45309 !important; }
.label-danger { background-color: #fee2e2 !important; color: #b91c1c !important; }
/* =============================================================================
LAYOUT GLOBAL — MODERNIZAÇÃO
=============================================================================
Moderniza a estrutura de navegação e contêineres herdados do theme.css
(sidebar 2014, navbar/topbar, panels, tabelas, breadcrumb, alerts, modais,
paginação). Usa apenas variáveis do :root. Complementa — não duplica — os
overrides básicos das seções acima.
============================================================================= */
/* --- Panel heading / body --- */
.panel-heading {
background: #fafbfc !important;
color: var(--color-text) !important;
font-weight: 600 !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
}
.panel-heading .panel-title,
.panel-heading h3,
.panel-heading h4 {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--color-text) !important;
margin: 0 !important;
}
.panel-body {
background: var(--color-surface) !important;
}
/* Painéis escuros (.panel-dark): o fundo (gradiente/cor) fica no .panel pai e o
texto é branco. Mantém o .panel-body transparente para não cobrir tudo de branco
e deixar as letras sem contraste. */
.panel-dark > .panel-body,
.panel-dark .panel-body {
background: transparent !important;
}
/* --- Tabelas --- */
.table {
border-color: var(--color-border) !important;
}
.table tbody > tr:hover > td {
background: #f8fafc !important;
}
.table tbody > tr > td,
.table tbody > tr > th {
border-top: 1px solid var(--color-border) !important;
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th {
border-color: var(--color-border) !important;
}
/* --- Breadcrumb --- */
.breadcrumb > li {
color: var(--color-text-muted) !important;
font-size: 13px !important;
}
.breadcrumb > li a {
color: var(--color-text-muted) !important;
}
.breadcrumb > li a:hover {
color: var(--aviva-orange) !important;
}
.breadcrumb > li + li::before {
content: "/" !important;
color: var(--color-border) !important;
padding: 0 8px !important;
}
.breadcrumb > .active {
color: var(--color-text) !important;
font-weight: 600 !important;
}
/* --- Alerts --- */
.alert {
border-radius: var(--radius) !important;
border: 1px solid transparent !important;
border-left-width: 4px !important;
padding: 12px 16px !important;
font-size: 13px !important;
}
.alert .fa {
margin-right: 8px !important;
font-size: 15px !important;
}
.alert-success { border-left-color: #16a34a !important; }
.alert-info { border-left-color: #0284c7 !important; }
.alert-warning { border-left-color: #d97706 !important; }
.alert-danger { border-left-color: #dc2626 !important; }
/* --- Paginação --- */
.pagination {
border-radius: var(--radius) !important;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
border-top-left-radius: var(--radius) !important;
border-bottom-left-radius: var(--radius) !important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: var(--radius) !important;
border-bottom-right-radius: var(--radius) !important;
}
.pagination > li > a,
.pagination > li > span {
color: var(--color-text) !important;
border-color: var(--color-border) !important;
transition: background .15s ease, color .15s ease !important;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
background: #f8fafc !important;
color: var(--aviva-orange) !important;
border-color: var(--color-border) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
background: var(--aviva-orange) !important;
border-color: var(--aviva-orange) !important;
color: #fff !important;
}
/* =============================================================================
COMPONENTES BASE (Fase 0 do Design System — adição não-destrutiva)
=============================================================================
Componentes construídos sobre os tokens do :root. Doc/demo viva em:
docs/design-system/showcase.html · catálogo em docs/design-system/README.md
── .ds-switch Toggle on/off sobre
── .avatar Iniciais/imagem em círculo (tamanhos + variantes de cor)
── .empty-state Estado vazio canônico (ícone + título + texto + CTA)
── .stepper Wizard horizontal de passos (is-done / is-active)
── .filtros-card Card de filtros genérico (generaliza .patrimonio-filtros-card)
── .table-panel Painel de tabela com heading (título · total · exportação)
── .ui-pnotify Ajuste fino dos toasts pnotify (styling:bootstrap3)
============================================================================= */
/* ── SWITCH / TOGGLE ── */
.ds-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
vertical-align: middle;
margin: 0;
}
.ds-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-switch .ds-switch-track {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
background: var(--slate-300);
border-radius: var(--radius-pill);
transition: var(--transition-fast);
flex-shrink: 0;
}
.ds-switch .ds-switch-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.ds-switch input:checked + .ds-switch-track { background: var(--color-primary); }
.ds-switch input:checked + .ds-switch-track::after { transform: translateX(18px); }
.ds-switch input:focus-visible + .ds-switch-track { box-shadow: var(--shadow-focus); }
.ds-switch input:disabled + .ds-switch-track { opacity: .5; cursor: not-allowed; }
.ds-switch .ds-switch-label { margin-left: 8px; font-size: var(--fs-sm); color: var(--color-text); }
.ds-switch input:checked + .ds-switch-track.ds-switch-success { background: var(--color-success); }
/* ── AVATAR ── */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
text-transform: uppercase;
overflow: hidden;
vertical-align: middle;
flex-shrink: 0;
line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-2xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--fs-lg); }
.avatar-success { background: var(--color-success); }
.avatar-warning { background: var(--color-warning); }
.avatar-danger { background: var(--color-danger); }
.avatar-muted { background: var(--slate-400); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--color-surface); margin-left: -10px; }
.avatar-group .avatar:first-child { margin-left: 0; }
/* ── EMPTY STATE ── */
.empty-state {
text-align: center;
padding: var(--space-8) var(--space-5);
color: var(--slate-500);
}
.empty-state__icon {
font-size: 48px;
color: var(--slate-300);
margin-bottom: var(--space-3);
display: block;
}
.empty-state__title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--slate-600);
}
.empty-state__sub { font-size: var(--fs-sm); margin-top: 4px; }
.empty-state .btn { margin-top: var(--space-4); }
.empty-state-sm { padding: var(--space-5) var(--space-4); }
.empty-state-sm .empty-state__icon { font-size: 32px; }
/* ── STEPPER (wizard horizontal) ── */
.stepper {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.stepper-step {
flex: 1;
position: relative;
text-align: center;
font-size: var(--fs-2xs);
}
.stepper-step::before {
content: '';
position: absolute;
top: 13px;
left: -50%;
width: 100%;
height: 2px;
background: var(--slate-200);
z-index: 0;
}
.stepper-step:first-child::before { display: none; }
.stepper-dot {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--slate-300);
color: var(--slate-400);
font-weight: var(--fw-bold);
font-size: var(--fs-xs);
}
.stepper-label {
display: block;
margin-top: 6px;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: var(--ls-uppercase);
font-weight: var(--fw-semibold);
}
.stepper-step.is-done .stepper-dot {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.stepper-step.is-done::before { background: var(--color-success); }
.stepper-step.is-active .stepper-dot {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
box-shadow: var(--shadow-focus);
}
.stepper-step.is-active .stepper-label { color: var(--color-primary); }
/* ── FILTROS-CARD (generalização de .patrimonio-filtros-card) ── */
.filtros-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--aviva-orange);
border-radius: var(--radius);
margin-bottom: var(--space-5);
}
.filtros-card .filtros-card__header { padding: var(--space-4) var(--space-5) 0; }
.filtros-card .filtros-card__header h4 {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--slate-900);
}
.filtros-card .filtros-card__header p {
margin: 2px 0 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.filtros-card .filtros-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
/* Altura única (36px) para todo controle do card, venha ele do Bootstrap,
do select2 ou do typeahead. Sem isto cada plugin traz a sua: .form-control
40px, .input-sm 32px, .select2-selection 34px — e a linha fica serrilhada. */
.filtros-card .filtros-card__body .form-control,
.filtros-card .filtros-card__body .form-control.input-sm {
height: 36px !important;
padding: 6px var(--space-3) !important;
font-size: var(--fs-sm) !important;
border-radius: var(--radius-sm) !important;
}
.filtros-card .filtros-card__body .twitter-typeahead { width: 100%; display: block !important; }
.filtros-card .filtros-card__body .select2-container { width: 100% !important; }
.filtros-card .filtros-card__body .select2-container--default .select2-selection--single {
height: 36px !important;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.filtros-card .filtros-card__body .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 34px !important;
padding-left: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text);
}
.filtros-card .filtros-card__body .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 34px !important;
}
.filtros-card .filtros-card__body .select2-container--default.select2-container--focus .select2-selection--single {
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.filtros-card .filtros-card__body .form-group { margin-bottom: 0; }
.filtros-card .filtros-card__body .form-group label {
display: block;
margin-bottom: var(--space-1);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
}
.filtros-card .filtros-card__body .form-group label .fa { color: var(--slate-400); }
.filtros-card .filtros-card__body .row + .row { margin-top: var(--space-4); }
/* ── TOAST (pnotify — styling:bootstrap3, ajuste fino opcional) ── */
.ui-pnotify { border-radius: var(--radius) !important; }
.ui-pnotify .alert {
border-radius: var(--radius);
box-shadow: var(--shadow-md);
border: none;
}
/* =============================================================================
CARDS MASONRY — grid de painéis compactado (sem escalonar nem esticar altura)
Usado em hubs/guia (home-secretaria, guia de relatórios).
========================================================================== */
.aviva-cards-masonry {
column-count: 3;
column-gap: 18px;
}
@media (max-width: 991px) {
.aviva-cards-masonry { column-count: 2; }
}
@media (max-width: 575px) {
.aviva-cards-masonry { column-count: 1; }
}
.aviva-cards-masonry > .aviva-card {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 18px;
}
/* =============================================
CAMPOS - LISTA (secretaria/cadastros/campos.html)
============================================= */
.campos-lista-page .dataTables_length select {
margin: 0 10px 0 0;
}
.campos-lista-page .filtros-card__body .form-group label {
display: block;
margin-bottom: 6px;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: .02em;
}
.campos-lista-page .filtros-card__body .form-group label .fa { color: var(--color-text-muted); }
.campos-lista-page .campos-toolbar .btn-group {
display: inline-flex;
flex-wrap: wrap;
}
.campos-lista-page .campos-table-panel {
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
/* Scroll horizontal da tabela em telas estreitas */
.campos-lista-page .campos-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.campos-lista-page .campos-table thead th {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--color-text-muted);
border-bottom: 2px solid var(--color-border);
background: var(--slate-50);
white-space: nowrap;
}
.campos-lista-page .campos-table tbody td {
vertical-align: middle;
color: var(--color-text);
border-color: var(--color-border);
}
.campos-lista-page .campos-table tbody tr:hover > td {
background: var(--slate-50);
}
.campos-lista-page .campos-table td.actions {
white-space: nowrap;
}
.campos-lista-page .campos-acoes {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.campos-lista-page .campos-acoes .btn { font-weight: 600; }
/* Stat cards (contadores clicáveis — clique aplica o filtro) */
.campos-lista-page .campos-stat-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
margin-bottom: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
text-decoration: none;
transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.campos-lista-page .campos-stat-card:hover,
.campos-lista-page .campos-stat-card:focus {
text-decoration: none;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.campos-lista-page .campos-stat-card.is-active {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
/* Card meramente informativo (sem filtro associado) */
.campos-lista-page .campos-stat-card--info {
cursor: default;
}
.campos-lista-page .campos-stat-card--info:hover,
.campos-lista-page .campos-stat-card--info:focus {
box-shadow: var(--shadow-sm);
transform: none;
}
.campos-stat-card__icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 16px;
}
.campos-stat-card__icon--ativos { background: var(--color-success-soft); color: var(--color-success); }
.campos-stat-card__icon--ecles { background: var(--color-primary-soft); color: var(--color-primary); }
.campos-stat-card__icon--evan { background: var(--color-purple-soft); color: var(--color-purple); }
.campos-stat-card__icon--inativos { background: var(--slate-100); color: var(--slate-500); }
.campos-stat-card__info { min-width: 0; }
.campos-stat-card__valor {
display: block;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
color: var(--slate-900);
}
.campos-stat-card__label {
display: block;
font-size: var(--fs-sm);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* % dentro do valor (cor vem de .campos-badge--ecles / --evan) */
.campos-stat-card__pct {
display: inline-block;
margin-left: 4px;
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
vertical-align: 3px;
}
/* Badge de tipo na tabela (Eclesiástico azul / Evangelístico laranja) */
.campos-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
}
.campos-badge--ecles { background: var(--color-primary-soft); color: var(--color-primary); }
.campos-badge--evan { background: var(--color-purple-soft); color: var(--color-purple-dark); }
@media (max-width: 767px) {
.campos-lista-page .dataTables_length,
.campos-lista-page .dataTables_filter {
float: none;
width: 100%;
text-align: left;
margin-bottom: var(--space-2);
}
.campos-lista-page .dataTables_filter label,
.campos-lista-page .dataTables_filter input {
width: 100%;
margin-left: 0;
}
.campos-lista-page .campos-toolbar .btn-group .dt-button {
margin-bottom: 4px;
}
.campos-lista-page .campos-stat-card {
padding: 10px 12px;
gap: 8px;
margin-bottom: var(--space-3);
}
.campos-stat-card__icon {
width: 32px;
height: 32px;
font-size: 13px;
}
.campos-stat-card__valor { font-size: 18px; }
}
/* =============================================================================
── CAMPOS - REGRAS DE REMESSA (sempre visível, todos os perfis) ──
Bloco informativo abaixo do banner de tipo de campo.
========================================================================== */
.remessa-info {
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius);
font-size: var(--fs-sm);
color: var(--slate-900);
line-height: 1.5;
}
.remessa-info__title {
font-weight: var(--fw-semibold);
color: var(--slate-900);
margin-bottom: var(--space-2);
}
.remessa-info__title .fa { color: var(--color-primary); }
.remessa-info p { margin: 0 0 var(--space-2); }
.remessa-info ul {
margin: 0 0 var(--space-3);
padding-left: 18px;
}
.remessa-info ul.mb0 { margin-bottom: 0; }
.remessa-info p.mb0 { margin-bottom: 0; }
.remessa-info p.mb5 { margin-bottom: var(--space-2); }
.remessa-info li { margin-bottom: 2px; }
/* =============================================================================
── FECHAMENTO - TIPO DE CAMPO + RATEIO ──
Banner de leitura no fechamento: identidade cromática por tipo
(eclesiástico=azul institucional, evangelístico=roxo) e o rateio das
remessas como chips (o destino e o % são a informação, não decoração).
========================================================================== */
.campo-tipo {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: var(--space-4);
}
.campo-tipo--ecle { --ct-accent: var(--color-primary); --ct-soft: var(--color-primary-soft); --ct-border: var(--color-primary-border); }
.campo-tipo--evang { --ct-accent: var(--color-purple); --ct-soft: var(--color-purple-soft); --ct-border: #d9ccf5; }
.campo-tipo__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--ct-soft);
border-left: 4px solid var(--ct-accent);
}
.campo-tipo__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--slate-900);
}
.campo-tipo__title .fa { color: var(--ct-accent); font-size: var(--fs-base); }
.campo-tipo__kind { font-weight: var(--fw-bold); }
.campo-tipo__pay { font-size: var(--fs-sm); color: var(--color-text-muted); }
.campo-tipo__pay b { color: var(--slate-900); font-weight: var(--fw-semibold); }
.campo-tipo__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.campo-tipo__eyebrow {
margin: 0 0 var(--space-2);
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.campo-tipo__eyebrow + .split-row { margin-bottom: var(--space-3); }
.split-row:last-child { margin-bottom: 0; }
.split-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.split-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--ct-soft);
border: 1px solid var(--ct-border);
font-size: var(--fs-xs);
white-space: nowrap;
color: var(--slate-900);
}
.split-chip__pct { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ct-accent); }
.split-chip--integral {
background: var(--color-surface);
border-style: dashed;
color: var(--color-text-muted);
}
.split-chip--integral b { color: var(--slate-900); font-weight: var(--fw-semibold); }
/* ── Fechamento: seções numeradas (o fluxo é a informação) ── */
.fc-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
}
.fc-hint {
margin: 0;
padding: var(--space-3) var(--space-4);
font-size: var(--fs-sm);
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
background: #fafbfc;
}
.fc-status:empty { display: none; }
.fc-status--head { margin-left: auto; }
/* Etiqueta de situação (pago / aguardando) — destaque, usada em vários pontos */
.fc-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.fc-badge .fa { font-size: var(--fs-sm); }
.fc-badge--pago { background: var(--color-success-soft); color: var(--color-success-dark); border-color: #a7e0b8; }
.fc-badge--pendente { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning-accent); }
.fc-badge--aberto { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary-border); }
.fc-badge--recusado { background: var(--color-danger-soft); color: var(--color-danger-dark); border-color: #f0b3ae; }
/* Gateway do boleto e id do registro (busca no banco) — discretos */
.fc-gw { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.fc-dbid {
display: inline-block;
margin-top: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--fs-2xs);
color: var(--color-text-muted);
}
/* Acento lateral nos painéis do fechamento (azul nas etapas, verde no FASMIJUB) */
#fechamentoBody .panel-primary > .panel-heading { border-left: 3px solid var(--color-primary); }
#fechamentoBody .panel-success > .panel-heading { border-left: 3px solid var(--color-success); }
/* Estado vazio (nenhum campo selecionado) */
.fc-empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-text-muted); }
.fc-empty .fa { display: block; margin-bottom: var(--space-2); font-size: 30px; color: var(--color-primary); opacity: .45; }
.fc-empty p { margin: 0; font-size: var(--fs-md); }
/* Toolbar de seleção (mês/campo/status) */
.fc-toolbar .form-group { margin-bottom: 0; }
.fc-toolbar__status { display: flex; align-items: center; min-height: 34px; }
/* Remessas: explicação (esquerda) ao lado da tabela (direita); empilha no mobile */
#remessas { margin-bottom: 0 !important; width: 100%; }
.rem-grid { display: flex; flex-wrap: wrap; }
.rem-explica-col {
flex: 1 1 300px;
border-bottom: 1px solid var(--color-border);
}
.rem-tabela-col { flex: 1.3 1 380px; min-width: 0; }
@media (min-width: 768px) {
.rem-explica-col { border-bottom: none; border-right: 1px solid var(--color-border); }
}
.rem-explica { padding: var(--space-4); }
.rem-metodo { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.rem-metodo b { color: var(--slate-900); font-weight: var(--fw-semibold); }
.rem-pct { color: var(--color-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rem-pct--none { color: var(--color-border); font-weight: 400; }
#remessas > tbody > tr > td:last-child,
#remessas > tbody > tr > th:last-child { font-variant-numeric: tabular-nums; }
#remessas > tbody > tr.info > th,
#remessas > tbody > tr.info > td {
background: var(--color-primary-soft) !important;
border-top: 2px solid var(--color-primary-border) !important;
}
#remessas > tbody > tr.info > th:last-child { color: var(--color-primary); }
/* =============================================================================
── CAMPOS - ACESSO ADMINISTRATIVO ──
Card coeso para o bloco admin do formulário de Campos (tipousu 5 e 4).
Reaproveita tokens globais (--space-*, --radius, --shadow-sm, --color-*).
Estrutura: .admin-card > __header / __body > .admin-row | .admin-field | __footer
========================================================================== */
.admin-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-dark-blue);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-5);
overflow: hidden;
}
.admin-card__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: var(--slate-50, #f8fafc);
border-bottom: 1px solid var(--color-border);
}
.admin-card__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius);
background: var(--color-primary-soft);
color: var(--color-dark-blue);
font-size: 16px;
}
.admin-card__heading h4 {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--slate-900);
}
.admin-card__heading p {
margin: 2px 0 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.admin-card__body {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* Linha com info à esquerda + ação à direita (tipo de campo, prebenda) */
.admin-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.admin-row__info { display: flex; flex-direction: column; min-width: 0; }
.admin-row__label {
font-weight: var(--fw-semibold);
color: var(--slate-900);
}
.admin-row__desc {
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-weight: 400;
}
.admin-row__action { flex: 0 0 auto; }
.admin-row--prebenda .option-group { margin: 0; }
/* Campo de formulário com label + hint */
.admin-field { max-width: 420px; }
.admin-field__label {
display: block;
margin-bottom: 2px;
font-weight: var(--fw-semibold);
color: var(--slate-900);
}
.admin-field__hint {
display: block;
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.admin-field__value { margin: 0; }
/* Rodapé: link de logs */
.admin-card__footer {
margin-top: calc(var(--space-2) * -1);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--fs-sm);
}
@media (max-width: 767px) {
.admin-row { flex-direction: column; align-items: stretch; }
.admin-row__action .btn { width: 100%; }
.admin-field { max-width: none; }
}
/* =============================================================================
── ASSISTENTE IA (drawer lateral) ──
Painel global incluído em common/layout.html, aberto por #avivaAssistantBtn.
========================================================================== */
.ia-assistant-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .45);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
z-index: 1050;
}
.ia-assistant-overlay.is-open { opacity: 1; visibility: visible; }
.ia-assistant {
position: fixed;
top: 0;
right: 0;
width: 400px;
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: var(--color-surface);
box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
transform: translateX(100%);
transition: transform .25s ease;
z-index: 1051;
}
.ia-assistant.is-open { transform: translateX(0); }
.ia-assistant__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.ia-assistant__title { display: flex; align-items: center; gap: var(--space-3); }
.ia-assistant__icon {
width: 38px;
height: 38px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: 16px;
}
.ia-assistant__title h4 {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--slate-900);
}
.ia-assistant__title p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.ia-assistant__beta {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-primary-soft);
padding: 1px 6px;
border-radius: 10px;
vertical-align: middle;
}
.ia-assistant__close {
border: 0;
background: transparent;
color: var(--color-text-muted);
font-size: 18px;
cursor: pointer;
line-height: 1;
}
.ia-assistant__close:hover { color: var(--slate-900); }
.ia-assistant__body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ia-assistant__msg {
max-width: 90%;
padding: var(--space-3);
border-radius: var(--radius);
font-size: var(--fs-sm);
line-height: 1.5;
}
.ia-assistant__msg--bot {
align-self: flex-start;
background: var(--color-primary-soft);
color: var(--slate-900);
}
.ia-assistant__msg--user {
align-self: flex-end;
background: var(--slate-100);
color: var(--slate-900);
}
.ia-assistant__foot {
padding: var(--space-3) var(--space-4) var(--space-4);
border-top: 1px solid var(--color-border);
}
.ia-assistant__foot form { display: flex; gap: var(--space-2); }
.ia-assistant__foot .form-control { flex: 1 1 auto; }
.ia-assistant__hint {
display: block;
margin-top: var(--space-2);
font-size: 11px;
color: var(--color-text-muted);
}
/* =============================================================================
TABLE-PANEL — cabeçalho de painel de tabela (título · total · ações)
=============================================================================
Padroniza o topo dos painéis que contêm uma DataTable, substituindo os
blocos de "Exportar" soltos com estilo inline. Estrutura:
Lançamentos legenda
Total do filtro
R$ 0,00
{include file='common/dt_buttons.html'}
|