/* Tela financeiro: Contas a receber, Contas a pagar e Contas bancárias. Estilos próprios desta tela. */
/* Medidas tiradas da referência de 1440 × 900 (captura em escala 2). Cores do relatório de fidelidade visual. */

#view-root[data-view='finance'] {
  --fin-dark: #0f1921;
  --fin-line: #d9dee2;
  --fin-head: #f6f6f6;
  --fin-alt: #f3f3f3;
  --fin-text: #262b2f;
  --fin-muted: #6b7177;
  --fin-green: #2e9e4f;
  --fin-red: #c9302c;
  --fin-amber: #b7791f;
  font-family: 'Source Sans Pro', 'Source Sans 3', system-ui, sans-serif;
  color: var(--fin-text);
}

/* Nas listas, o título da página faz o papel da faixa "Financeiro"; as abas ficam como navegação compacta. */
.finance-area[data-finance-view='finance-view-receivable'] > .page-intro,
.finance-area[data-finance-view='finance-view-payable'] > .page-intro,
.finance-area[data-finance-view='finance-view-accounts'] > .page-intro { display: none; }
.finance-area[data-finance-view='finance-view-receivable'] > .section-tabs,
.finance-area[data-finance-view='finance-view-payable'] > .section-tabs,
.finance-area[data-finance-view='finance-view-accounts'] > .section-tabs { font-size: 14px; margin-bottom: -4px; }
/* O original não tem abas de visão nestas telas (a navegação é pelo menu lateral). */
.finance-area[data-finance-view='finance-view-receivable'] > .section-tabs,
.finance-area[data-finance-view='finance-view-payable'] > .section-tabs,
.finance-area[data-finance-view='finance-view-accounts'] > .section-tabs,
.finance-area[data-finance-view='finance-view-reconciliation'] > .section-tabs { display: none; }

/* Ícone antes do título, como na referência. */
.topbar h1[data-route='finance-receivable']::before,
.topbar h1[data-route='finance-payable']::before,
.topbar h1[data-route='finance-recurring']::before,
.topbar h1[data-route='finance-accounts']::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: -3px;
  background: center / contain no-repeat;
}
.topbar h1[data-route='finance-receivable']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262b2f'%3E%3Cpath d='M3 21v-3h4v-4h4v-4h4V6h-3l5-4 5 4h-3v6h-4v4h-4v4H7v1z'/%3E%3C/svg%3E");
}
.topbar h1[data-route='finance-payable']::before,
.topbar h1[data-route='finance-recurring']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262b2f'%3E%3Cpath d='M3 3v3h4v4h4v4h4v4h-3l5 4 5-4h-3v-6h-4V8h-4V4H7V3z'/%3E%3C/svg%3E");
}
.topbar h1[data-route='finance-accounts']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262b2f'%3E%3Cpath d='M12 2 2 7v2h20V7zM4 11v7h3v-7zm6.5 0v7h3v-7zM17 11v7h3v-7zM2 20v2h20v-2z'/%3E%3C/svg%3E");
}

.fin-screen { display: flex; flex-direction: column; gap: 16px; }
.fin-icon { display: inline-flex; width: 1em; height: 1em; line-height: 1; flex: none; }
.fin-icon svg { display: block; width: 100%; height: 100%; }

/* Barra: Adicionar, Contas fixas e Mais ações à esquerda; exibição, período e busca à direita. */
.fin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-toolbar-start, .fin-toolbar-end { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.fin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 37px; padding: 0 12px; border: 1px solid var(--fin-dark); border-radius: 3px;
  font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.fin-btn-dark { background: var(--fin-dark); color: #fff; }
.fin-btn-dark:hover { background: #1f2d38; }
.fin-btn-outline { background: #fff; color: var(--fin-text); }
.fin-btn-outline:hover:not(:disabled) { background: var(--fin-alt); }
.fin-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.fin-btn-square { width: 40px; padding: 0; }
.fin-btn-outline.fin-btn-square { border-color: var(--fin-line); }
.fin-btn .fin-icon { font-size: 15px; }
.fin-caret { font-size: 11px; margin-left: 2px; }

.fin-period { position: relative; }
.fin-period > summary { list-style: none; min-width: 150px; }
.fin-period > summary::-webkit-details-marker { display: none; }
.fin-menu {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; min-width: 190px;
  display: flex; flex-direction: column; padding: 4px 0; border: 1px solid var(--fin-line); border-radius: 3px;
  background: #fff; box-shadow: 0 6px 18px rgb(15 25 33 / 16%);
}
.fin-menu a, .fin-menu button {
  display: block; width: 100%; padding: 8px 14px; border: 0; background: none; color: var(--fin-text);
  font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.fin-menu a:hover, .fin-menu button:hover, .fin-menu a.current { background: var(--fin-alt); }
.fin-menu .danger { color: var(--fin-red); }

.fin-filters { padding: 12px 14px; border: 1px solid var(--fin-line); border-radius: 3px; background: #fff; }
.fin-filters .toolbar { margin: 0; }

/* Cinco cartões de totais, cada um com ícone, rótulo, anel de percentual, valor e nota. */
.fin-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.fin-card {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 40px auto auto; column-gap: 8px; row-gap: 4px; align-items: center;
  min-height: 126px; padding: 14px 14px; border: 1px solid var(--fin-line); border-radius: 4px; background: #fff;
  color: var(--fin-text); text-decoration: none;
}
a.fin-card:hover, a.fin-card.current { border-color: var(--fin-dark); }
.fin-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 3px;
  background: #e9ecee; color: var(--fin-dark); font-size: 16px;
}
.fin-card-overdue .fin-card-icon { background: #fbe5e4; color: var(--fin-red); }
.fin-card-today .fin-card-icon { background: #fbf0dc; color: var(--fin-amber); }
.fin-card-settled .fin-card-icon { background: #e1f3e6; color: var(--fin-green); }
.fin-card-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-card-ring {
  --fin-ring: var(--fin-dark);
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--fin-ring) calc(var(--fin-ratio) * 1%), #e4e7ea 0);
  font-size: 10px; font-weight: 600;
}
.fin-card-ring::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: #fff; }
.fin-card-ring > span { position: relative; }
.fin-card-overdue .fin-card-ring { --fin-ring: var(--fin-red); color: var(--fin-red); }
.fin-card-today .fin-card-ring { --fin-ring: var(--fin-amber); color: var(--fin-amber); }
.fin-card-upcoming .fin-card-ring { --fin-ring: #6b7177; }
.fin-card-settled .fin-card-ring { --fin-ring: var(--fin-green); color: var(--fin-green); }
.fin-card-value { grid-column: 1 / -1; font-size: 24px; font-weight: 600; line-height: 1.2; }
.fin-card-note { grid-column: 1 / -1; color: var(--fin-muted); font-size: 12px; }

/* Tabela: cabeçalho cinza, linhas de cerca de 53 px, zebra e ações em três botões quadrados. */
.fin-table-wrap { overflow-x: auto; border: 1px solid var(--fin-line); border-radius: 4px; background: #fff; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fin-table th {
  height: 46px; padding: 0 12px; border-bottom: 1px solid var(--fin-line); background: var(--fin-head);
  font-weight: 600; text-align: left; white-space: nowrap;
}
.fin-table td { height: 52px; padding: 16px 12px; border-top: 1px solid var(--fin-line); vertical-align: top; line-height: 20px; }
.fin-table th + th, .fin-table td + td { border-left: 1px solid var(--fin-line); }
.fin-table tbody tr:nth-child(even) td { background: var(--fin-alt); }
.fin-table .fin-col-check { width: 40px; padding: 0 10px; text-align: center; vertical-align: middle; }
.fin-table .fin-col-check input { width: 16px; height: 16px; }
.fin-table th.fin-col-situacao, .fin-table td.fin-col-situacao { text-align: center; }
.fin-table th.fin-col-acoes { text-align: center; width: 117px; }
.fin-table td.fin-col-valor { white-space: nowrap; }
.fin-seq { color: var(--fin-muted); }
.fin-origin { display: inline-flex; margin-left: 8px; vertical-align: -2px; font-size: 15px; }
.fin-dash { color: var(--fin-muted); }
.fin-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 3px;
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.fin-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fin-status-confirmed { color: var(--fin-green); background: #eef8f1; }
.fin-status-late { color: var(--fin-red); background: #fdf1f0; }
.fin-status-partial { color: var(--fin-amber); background: #fdf6e9; }
.fin-status-open { color: #4a5259; background: #f1f3f4; }
.fin-status-canceled { color: var(--fin-muted); background: #f1f3f4; text-decoration: line-through; }
.fin-row-actions { display: flex; gap: 5px; justify-content: center; }
.fin-row-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0;
  border: 1px solid var(--fin-line); border-radius: 3px; background: #fff; color: var(--fin-dark); font-size: 15px; cursor: pointer; list-style: none;
}
.fin-row-btn::-webkit-details-marker { display: none; }
.fin-row-btn:hover:not(:disabled) { background: var(--fin-alt); border-color: #b9c0c6; }
.fin-row-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.fin-row-menu { position: relative; }

.fin-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--fin-muted); font-size: 15px; }
.fin-footer p { margin: 0; }
.fin-footer strong { color: var(--fin-text); }
.fin-per-page { display: inline-flex; align-items: center; gap: 0; margin: 0; font-weight: 400; white-space: nowrap; }
.fin-per-page select { height: 30px; margin-left: 6px; border: 1px solid var(--fin-line); border-radius: 3px; background: #fff; font: inherit; }
.fin-footer-end { display: inline-flex; align-items: center; gap: 12px; }
.fin-pager { display: inline-flex; gap: 0; }
.fin-pager a { min-width: 32px; padding: 6px 10px; border: 1px solid var(--fin-line); margin-left: -1px; background: #fff; color: var(--fin-text); text-align: center; text-decoration: none; font-size: 14px; }
.fin-pager a.current { background: var(--fin-dark); border-color: var(--fin-dark); color: #fff; }
.fin-creation { scroll-margin-top: 16px; }

@media (max-width: 1100px) {
  .fin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .fin-cards { grid-template-columns: 1fr; }
  .fin-toolbar { align-items: flex-start; }
}

/* Contas bancárias: Adicionar verde, busca à direita, aviso, resumo em três colunas e tabela. */
.fin-btn-green { background: #119b55; border-color: #119b55; color: #fff; }
.fin-btn-green:hover { background: #0f8d4d; }
.fin-account-search { display: flex; align-items: stretch; height: 37px; margin: 0; }
.fin-account-search .fin-btn { height: 37px; }
.fin-account-search input {
  width: 330px; height: 37px; padding: 0 12px; border: 1px solid var(--fin-line); border-right: 0; border-radius: 3px 0 0 3px;
  font: inherit; font-size: 16px; color: var(--fin-text); background: #fff;
}
.fin-account-search .fin-btn { border-radius: 0 3px 3px 0; }
.fin-notice {
  position: relative; display: flex; gap: 16px; align-items: center; padding: 16px 48px 16px 30px;
  border: 1px solid var(--fin-line); border-radius: 4px; background: #f8f8f8;
}
.fin-notice strong { font-size: 14px; }
.fin-notice p { margin: 2px 0 0; font-size: 14px; }
.fin-notice-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--fin-dark); color: #fff; font-weight: 600; font-family: Georgia, serif;
}
.fin-notice-more { padding: 0; border: 0; background: none; color: var(--fin-dark); font: inherit; font-weight: 700; text-decoration: underline; cursor: not-allowed; }
.fin-notice-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; color: var(--fin-muted); font-size: 22px; cursor: pointer; }
.fin-account-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 0; border: 1px solid var(--fin-line); border-radius: 4px; background: #fff;
}
.fin-account-summary > div { display: flex; flex-direction: column; gap: 3px; padding: 0 20px; }
.fin-account-summary > div + div { border-left: 1px solid var(--fin-line); }
.fin-account-summary span { color: var(--fin-muted); font-size: 14px; }
.fin-account-summary strong { font-size: 14px; font-weight: 600; }
.fin-account-summary small { color: var(--fin-muted); font-size: 11px; font-weight: 400; }
.fin-accounts-table { font-size: 14px; }
.fin-accounts-table td { height: 62px; vertical-align: middle; }
.fin-accounts-table th.fin-col-integracao, .fin-accounts-table td.fin-col-integracao { text-align: center; }
.fin-bank { display: flex; align-items: center; gap: 10px; }
.fin-bank-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 3px; background: #e9ecee; color: #6b7177; font-size: 14px;
}
.fin-bank strong { font-weight: 600; }
.fin-bank-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fin-bank-name { color: var(--fin-muted); font-size: 11px; font-weight: 400; }
.fin-accounts-table td.fin-col-ultima-atualizacao { white-space: nowrap; }
.fin-last-label { display: block; color: var(--fin-muted); font-size: 11px; }
.fin-chip { display: inline-block; padding: 1px 7px; border: 1px solid var(--fin-line); border-radius: 3px; background: #f6f6f6; color: var(--fin-muted); font-size: 10px; }
.fin-count { display: inline-flex; border: 1px solid var(--fin-line); border-radius: 3px; background: #fff; font-size: 13px; }
.fin-count > span { padding: 7px 10px; }
.fin-count > span:first-child { border-right: 1px solid var(--fin-line); background: #f6f6f6; }
@media (max-width: 700px) {
  .fin-account-summary { grid-template-columns: 1fr; gap: 12px; }
  .fin-account-summary > div + div { border-left: 0; }
  .fin-account-search input { width: 100%; }
}

/* ===== Financeiro R3: formulários de cadastro, contas fixas e tabelas de rateio ===== */
.ff-page { max-width: 1200px; }
.ff-form { display: flex; flex-direction: column; gap: 16px; }
.ff-section { background: #fff; border: 1px solid #d9dee2; border-radius: 4px; }
.ff-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #f6f6f6; border-bottom: 1px solid #d9dee2; border-radius: 4px 4px 0 0; }
.ff-head h2 { margin: 0; font-size: 18px; font-weight: 400; color: #262b2f; display: flex; align-items: center; gap: 4px; }
.ff-head h2 strong { font-weight: 700; }
.ff-head p { margin: 4px 0 0; font-size: 11px; color: #5f6870; }
.ff-head .pc-icon { width: 16px; height: 16px; fill: currentColor; }
.ff-body { padding: 14px 16px 16px; }
.ff-body .field small { color: #6b7177; font-size: 11px; }
.ff-body .field label.required::after { color: #c9302c; }
.ff-actions { display: flex; justify-content: space-between; align-items: center; }
.ff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 37px; padding: 0 12px; border: 1px solid #0f1921; border-radius: 3px; font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; background: #fff; color: #262b2f; }
.ff-btn .pc-icon { width: 14px; height: 14px; fill: currentColor; }
.ff-btn-dark { background: #0f1921; color: #fff; }
.ff-btn-green { background: #119b55; border-color: #119b55; color: #fff; }
.ff-btn-light { border-color: #d9dee2; background: #f6f6f6; }
.ff-btn-outline { background: #fff; }
.ff-btn-square { width: 37px; padding: 0; }
.ff-btn-sm { height: 30px; font-size: 13px; padding: 0 8px; }
.ff-btn-ai { border-color: #c9b8f5; color: #5b2fc9; background: #fff; font-size: 13px; height: 30px; }
.ff-btn:disabled { opacity: .6; cursor: not-allowed; }
.pc-pending select, .pc-pending input:disabled, .pc-pending textarea:disabled { background: #eaecef; cursor: not-allowed; }
.ff-palette { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: #f3f3f3; border: 1px solid #d9dee2; border-radius: 3px; }
.ff-swatch { width: 32px; height: 28px; border: 2px solid transparent; border-radius: 3px; cursor: pointer; background: #8d9399; }
.ff-swatch.pc-color-purple { background: #681a3d; } .ff-swatch.pc-color-green { background: #0d671d; }
.ff-swatch.pc-color-orange { background: #b65a00; } .ff-swatch.pc-color-blue { background: #1a4f8f; }
.ff-swatch.pc-color-red { background: #a3201a; } .ff-swatch.pc-color-gray { background: #8d9399; }
.ff-swatch.is-selected { border-color: #0f1921; box-shadow: 0 0 0 2px #fff inset; }
.ff-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ff-radio-card { display: block; border: 1px solid #d9dee2; border-radius: 4px; padding: 12px; font-size: 12px; }
.ff-radio-card.is-selected { border: 2px solid #119b55; }
.ff-radio-card.is-disabled { color: #8a9199; background: #fafafa; }
.ff-radio-title { font-weight: 700; font-size: 13px; }
.ff-radio-card ul { list-style: none; margin: 8px 0 0; padding: 0; }
.ff-radio-card li::before { content: '✓ '; color: #119b55; }
.ff-radio-card li.is-no::before { content: '✕ '; color: #c9302c; }
.ff-radio-note { margin: 8px 0 0; padding: 6px 8px; background: #f3f3f3; font-size: 11px; }
.ff-rule { display: flex; justify-content: space-between; align-items: center; }
.ff-rule p { margin: 2px 0 0; font-size: 11px; color: #5f6870; }
.ff-title-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.ff-title-side { position: sticky; top: 8px; }
.ff-summary-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ff-summary-top small, .ff-timeline small { color: #5f6870; font-size: 11px; display: block; }
.ff-summary-top p { margin: 4px 0 0; font-size: 12px; }
.ff-total { font-size: 22px; }
.ff-badge { border: 1px solid #d9a441; background: #fff8e6; color: #8a5a00; border-radius: 3px; font-size: 11px; padding: 2px 6px; }
.ff-badge-done { border-color: #119b55; background: #e5f3e6; color: #0d671d; }
.ff-summary-head { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7ea; }
.ff-timeline { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; }
.ff-timeline .is-muted { color: #8a9199; font-weight: 400; }
.ff-segment { display: inline-flex; border: 1px solid #d9dee2; border-radius: 3px; overflow: hidden; }
.ff-segment button { border: 0; padding: 6px 12px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.ff-segment .is-active { background: #0f1921; color: #fff; }
.ff-link-disabled { font-size: 12px; text-decoration: underline; color: #5f6870; }
.ff-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ff-toolbar > div { display: flex; gap: 6px; align-items: center; }
.ff-search { display: flex; gap: 0; }
.ff-search input { height: 38px; width: 329px; padding: 0 10px; border: 1px solid #d9dee2; border-right: 0; border-radius: 3px 0 0 3px; font: inherit; }
.ff-search .ff-btn { border-radius: 0; }
.ff-search .ff-btn:last-child { width: 41px; height: 38px; padding: 0; border-radius: 0 3px 3px 0; margin-left: 0; }
.ff-empty { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid #d9dee2; border-radius: 4px; padding: 48px 36px 24px; text-align: center; }
.ff-empty-icon { width: 96px; height: 96px; border-radius: 50%; background: #f1f2f3; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.ff-empty-icon .pc-icon { width: 46px; height: 46px; fill: #0f1921; }
.ff-empty h2 { margin: 20px 0 0; font-size: 24px; line-height: 1.3; font-weight: 600; }
.ff-empty > p { margin: 8px auto 0; max-width: 500px; color: #6b7177; font-size: 15px; line-height: 22px; }
.ff-empty-actions { display: flex; justify-content: center; gap: 8px; margin: 18px 0 26px; }
.ff-empty-actions .ff-btn { height: 38px; font-size: 15px; }
.ff-empty-actions .ff-btn:disabled { opacity: 1; color: #262b2f; }
.ff-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; text-align: left; }
.ff-cards article { display: flex; align-items: flex-start; gap: 14px; border: 1px solid #d9dee2; border-radius: 4px; padding: 16px 14px 16px 12px; }
.ff-card-icon { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 4px; background: #e8e1fb; color: #6a4fd1; }
.ff-card-icon .pc-icon { width: 16px; height: 16px; fill: currentColor; }
.ff-cards article:nth-child(2) .ff-card-icon { color: #2f64d6; }
.ff-cards article:nth-child(3) .ff-card-icon { color: #1f8a4a; }
.ff-cards article:nth-child(2) .ff-card-icon { background: #dbe7fb; }
.ff-cards article:nth-child(3) .ff-card-icon { background: #d9f1e0; }
.ff-cards strong { font-size: 15px; font-weight: 600; } .ff-cards p { margin: 3px 0 0; font-size: 11px; line-height: 22px; color: #5f6870; }
.ff-count { font-size: 12px; color: #5f6870; }
.ff-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ff-lines-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.ff-lines-foot .is-bad { color: #c9302c; }
@media (max-width: 900px) {
  .ff-title-grid, .ff-radio-grid, .ff-cards { grid-template-columns: 1fr; }
}
.ff-row-btn { width: 28px; height: 28px; border: 1px solid #d9dee2; background: #fff; border-radius: 3px; padding: 0; }
.ff-row-btn .pc-icon { width: 13px; height: 13px; fill: #262b2f; }
.ff-row-btn:disabled { opacity: .55; cursor: not-allowed; }
.ff-dre-group { font-weight: 700; }
.ff-dre-child { padding-left: 28px; }
.ff-dre-handle { color: #262b2f; }

/* Ícone "i" de explicação ao lado do rótulo (forma de pagamento). */
.ff-help { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 4px; border-radius: 50%; background: #1d2327; color: #fff; font-size: 9px; font-weight: 700; font-style: normal; line-height: 1; vertical-align: 1px; cursor: help; }
.ff-help::before { content: 'i'; }
/* Rótulo com ajuda: "Nome*" e, depois do asterisco, o ícone "i" (como no original). */
.ff-form label.has-help { display: flex; align-items: center; }
.ff-form label.has-help::after { order: 1; }
.ff-form label.has-help .ff-help { order: 2; margin-left: 6px; }
/* Interruptores do cadastro (Disponível no PDV, emissão de boletos). */
.ff-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.ff-toggle input[type='checkbox'] { appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 14px; margin: 0; border: 1px solid #b9bec3; border-radius: 7px; background: #d9dce0; }
.ff-toggle input[type='checkbox']::before { content: ''; position: absolute; top: -3px; left: -1px; width: 18px; height: 18px; border: 1px solid #b9bec3; border-radius: 50%; background: #f3f3f3; box-sizing: border-box; }
.ff-toggle input[type='checkbox']:checked { background: #119b55; border-color: #119b55; }
.ff-toggle input[type='checkbox']:checked::before { left: 17px; }

/* Mais ações das listas de contas a pagar e a receber. */
.fin-more { position: relative; }
.fin-more > summary { list-style: none; }
.fin-more > summary::-webkit-details-marker { display: none; }
.fin-menu.fin-menu-left { right: auto; left: 0; min-width: 200px; }
.fin-menu .fin-icon { margin-right: 10px; font-size: 15px; vertical-align: -3px; }
.fin-menu button:disabled { opacity: 0.55; cursor: not-allowed; }
.fin-menu button:disabled:hover { background: none; }
.fin-entity { color: inherit; text-decoration: underline; }
/* Botão que o original mostra escuro e que aqui segue desabilitado: mantém a cor, cursor de bloqueado. */
.fin-btn-dark.fin-btn-pending:disabled { opacity: 0.85; }

/* Leva 3: controles que dependem de serviço externo aparecem cheios (a dica explica) e a conciliação sem cartões. */
.ff-toolbar .ff-btn:disabled, .ff-empty .ff-btn:disabled { opacity: 1; cursor: not-allowed; }
.ff-toolbar .ff-btn, .ff-toolbar .ff-search input { height: 38px; }
.ff-toolbar .ff-btn .pc-icon { width: 14px; height: 14px; margin-right: 4px; fill: currentColor; }
.ff-btn-square .pc-icon { margin-right: 0; }
.ff-caret { display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: middle; }
.ff-empty-simple { padding-bottom: 44px; }
.ff-empty-simple > p { max-width: 820px; font-size: 14px; }
.ff-empty-simple h2 { font-size: 22px; }

/* ===== Leva 3, G5: cadastros financeiros na medida do original ===== */
/* Cabeçalho do bloco: 74 px, título de 20 px; corpo com 20 px de lado; colunas de 30 px de intervalo. */
.ff-form .ff-head { min-height: 74px; box-sizing: border-box; padding: 14px 20px; }
.ff-form .ff-head h2 { font-size: 20px; gap: 6px; }
.ff-form .ff-head .pc-icon { width: 18px; height: 18px; }
.ff-form .ff-body { padding: 20px 20px 20px; }
.ff-form .form-grid { column-gap: 30px; row-gap: 16px; }
/* Rótulo comum (14 px, sem negrito), asterisco vermelho colado, campo de 38 px com setas de seleção. */
.ff-form .field { gap: 1px; }
.ff-form .field input[type='date'] { width: 100%; min-width: 0; }
.ff-form .field > label { color: #333; font-size: 14px; font-weight: 400; line-height: 20px; }
.ff-form .field > label.required::after { content: '*'; margin-left: 1px; color: #c9302c; }
.ff-form .field input:not([type='checkbox']):not([type='radio']), .ff-form .field select { height: 38px; min-height: 38px; padding: 0 12px; font-size: 15px; border-radius: 3px; }
.ff-form .field textarea { font-size: 15px; border-radius: 3px; }
.ff-form .field select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1 9 6H1zM5 13 1 8h8z' fill='%23222'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 8px 11px;
}
/* Controles ainda sem gravação seguem desabilitados (dica e cursor), mas com a aparência do original. */
.ff-form .pc-pending select, .ff-form .pc-pending input:disabled, .ff-form .pc-pending textarea:disabled { background-color: #fff; color: #555; }
.ff-form .pc-pending input[type='number'] { text-align: right; }
.ff-form .ff-actions .ff-btn { font-size: 15px; font-weight: 400; }
.ff-form .ff-btn-light { background: #f6f6f6; border-color: #d9dee2; }

/* Adicionar pagamento / recebimento: sem menu lateral, 930 + 450 px com 30 px de intervalo. */
.ff-page-wide { max-width: none; }
.ff-title-grid { grid-template-columns: minmax(0, 31fr) minmax(0, 15fr); gap: 30px; }
.ff-title-main { gap: 18px; }
.ff-title-main .ff-head h2 { font-size: 20px; }
/* Campos de busca (entidade, plano de contas, centro de custo, forma, conta): lupa à esquerda, sem seta. */
.ff-title-main select[name='entityId'], .ff-title-main select[name='chartAccountId'], .ff-title-main select[name='costCenterId'],
.ff-title-main select[name='paymentMethodId'], .ff-title-main select[name='accountId'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l5.6 5.6-1.4 1.4-5.600-5.600A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z' fill='%23777'/%3E%3C/svg%3E");
  background-position: 12px center; background-size: 15px 15px; padding-left: 36px; padding-right: 12px; color: #444; font-size: 16px;
}
/* Classificação: dois campos iguais e o botão Ratear do tamanho do conteúdo. */
.ff-grid-classify { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.ff-grid-classify > * { grid-column: auto !important; }
.ff-grid-classify .ff-btn { height: 38px; }
/* Valor, Desconto e Juros com o prefixo R$ numa caixa cinza. */
.ff-addon { display: flex; align-items: stretch; }
.ff-addon > span { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid #ccd1d5; border-right: 0; border-radius: 3px 0 0 3px; background: #f3f4f5; color: #555; font-size: 15px; }
.ff-addon > input { flex: 1; min-width: 0; border-radius: 0 3px 3px 0 !important; }
/* Modo de pagamento: Único (escuro, com ícone) e Parcelado. */
.ff-segment { border-color: #d9dee2; }
.ff-segment button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: 14px; }
.ff-segment .pc-icon { width: 14px; height: 14px; fill: currentColor; }
.ff-segment button:disabled { color: #444; opacity: 1; }
/* Resumo: valor, selo de situação e linha do tempo dos prazos. */
.ff-title-side .ff-body { padding: 0; }
.ff-summary-top { min-height: 89px; box-sizing: border-box; padding: 14px 20px 12px; border-bottom: 1px solid #e5e7ea; }
.ff-summary-top small { font-size: 13px; }
.ff-summary-top p { margin: 6px 0 0; font-size: 14px; font-weight: 700; }
.ff-total { font-size: 24px; line-height: 1.1; }
.ff-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 3px; font-weight: 600; background: #fff; }
.ff-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ff-summary-terms { padding: 14px 20px 14px; }
.ff-summary-head { align-items: center; margin: 0; padding: 0; border: 0; font-size: 14px; }
.ff-summary-head > div { display: flex; align-items: center; gap: 12px; }
.ff-summary-head small { font-size: 12px; color: #6b7177; }
.ff-summary-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: #eef0f2; color: #555; }
.ff-summary-icon .pc-icon { width: 15px; height: 15px; fill: currentColor; }
.ff-timeline { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 10px; padding-top: 22px; font-size: 14px; }
.ff-timeline::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: #cfd4d8; }
.ff-timeline > div { position: relative; display: flex; flex-direction: column; gap: 3px; }
.ff-timeline > div::before { content: ''; position: absolute; top: -22px; width: 11px; height: 11px; box-sizing: border-box; border: 1px solid #8a9199; border-radius: 50%; background: #fff; }
.ff-timeline > div:nth-child(1)::before { left: 0; }
.ff-timeline > div:nth-child(2)::before { left: 50%; margin-left: -6px; border-color: #0f1921; background: #0f1921; }
.ff-timeline > div:nth-child(3)::before { right: 0; }
.ff-timeline > div:nth-child(2) { align-items: center; }
.ff-timeline > div:nth-child(3) { align-items: flex-end; }
.ff-timeline small { font-size: 12px; }
.ff-timeline strong { font-weight: 600; }
.ff-timeline .is-muted { color: #9aa1a8; font-weight: 400; }
.ff-form .ff-toggle { font-size: 14px; font-weight: 400; }
/* Situação: a cor aparece num bloco de 38 px; a paleta abre ao clicar. */
.ff-color-well { width: 100%; height: 38px; padding: 0; border: 1px solid #ccd1d5; border-radius: 3px; background: #8d9399; cursor: pointer; }
.ff-color-well.pc-color-purple { background: #681a3d; } .ff-color-well.pc-color-green { background: #0d671d; }
.ff-color-well.pc-color-orange { background: #b65a00; } .ff-color-well.pc-color-blue { background: #1a4f8f; }
.ff-color-well.pc-color-red { background: #a3201a; } .ff-color-well.pc-color-gray { background: #8d9399; }
.ff-color-well:disabled { cursor: default; opacity: 1; }
.ff-palette.is-collapsed { display: none; }
.ff-form .pc-pending .ff-btn:disabled { opacity: 1; color: #262b2f; }
/* Adicionar conta: três colunas com 10 px de intervalo, nota em itálico no rótulo, cartões e regras. */
.ff-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px !important; }
.ff-grid-3 > * { grid-column: auto !important; }
.ff-label-note { font-size: 11px; font-style: italic; color: #555; }
.ff-form .ff-radio-grid { gap: 10px; }
.ff-form .ff-radio-card { padding: 16px 16px 14px; font-size: 13px; border: 1px solid #d9dee2; }
.ff-form .ff-radio-card.is-selected { border: 2px solid #119b55; padding: 15px 15px 13px; }
.ff-form .ff-radio-card input[type='radio'] { accent-color: #119b55; margin-right: 6px; }
.ff-form .ff-radio-title { font-size: 14px; }
.ff-radio-sub { margin: 8px 0 12px; font-size: 13px; color: #6b7177; }
.ff-form .ff-radio-card li { margin-top: 6px; }
.ff-form .ff-radio-card li::before { font-weight: 700; }
.ff-rules { display: flex; flex-direction: column; }
.ff-rules .ff-rule { padding: 14px 0; border-top: 1px solid #e5e7ea; }
.ff-rules .ff-rule:first-child { border-top: 0; padding-top: 4px; }
.ff-rules .ff-rule strong { font-size: 14px; }
.ff-rules .ff-rule p { margin: 4px 0 0; font-size: 12px; }
/* Barra de busca das listas auxiliares: 38 px de altura, botão de modo de exibição de 42 px, 238 px de campo com dois botões de 41 px. */
.ff-toolbar .ff-search input { min-height: 38px; }
.ff-toolbar .ff-btn-outline.ff-btn-square { width: 42px; }
.ff-toolbar > div > .ff-btn-square ~ .ff-search { margin-left: 0; }
.ff-toolbar > div > .ff-btn-square ~ .ff-search input { width: 238px; }
.ff-toolbar > div > .ff-btn-square ~ .ff-search .ff-btn { width: 41px; border-radius: 0; }
.ff-toolbar .ff-search .ff-btn ~ .ff-btn { margin-left: 4px; border-radius: 3px; }
.ff-toolbar .ff-search .ff-btn:first-of-type { border-radius: 0; }
/* Contas a pagar e a receber: colunas e linhas na medida do original (41 / 210 / 212 / 211 / 128 / 146 / 104 / 118 px, linha de 53 px). */
.fin-table:not(.fin-accounts-table) { table-layout: fixed; }
.fin-table:not(.fin-accounts-table) td { height: 53px; padding-top: 12px; padding-bottom: 12px; }
.fin-table:not(.fin-accounts-table) th:nth-child(1) { width: 3.5%; }
.fin-table:not(.fin-accounts-table) th:nth-child(2) { width: 17.95%; }
.fin-table:not(.fin-accounts-table) th:nth-child(3) { width: 18.12%; }
.fin-table:not(.fin-accounts-table) th:nth-child(4) { width: 18.03%; }
.fin-table:not(.fin-accounts-table) th:nth-child(5) { width: 10.94%; }
.fin-table:not(.fin-accounts-table) th:nth-child(6) { width: 12.48%; }
.fin-table:not(.fin-accounts-table) th:nth-child(7) { width: 8.89%; }
.fin-table:not(.fin-accounts-table) th:nth-child(8) { width: 10.09%; }
.fin-table:not(.fin-accounts-table) td { overflow-wrap: anywhere; }
/* Contas bancárias: colunas na medida do original (272 / 197 / 196 / 149 / 238 / 118 px) e botão de importação com a cor cheia. */
.fin-accounts-table { table-layout: fixed; }
.fin-accounts-table th:nth-child(1) { width: 23.25%; }
.fin-accounts-table th:nth-child(2) { width: 16.84%; }
.fin-accounts-table th:nth-child(3) { width: 16.75%; }
.fin-accounts-table th:nth-child(4) { width: 12.74%; }
.fin-accounts-table th:nth-child(5) { width: 20.34%; }
.fin-accounts-table th:nth-child(6) { width: 10.09%; }
.fin-btn-dark:disabled { opacity: 1; }
/* Categorias DRE: Nome 701 / Tipo 351 / Ações 118 px, linhas brancas, subcategorias recuadas, ações com a cor cheia. */
.pc-table.pc-table-dre th:nth-child(1) { width: 60%; }
.pc-table.pc-table-dre th:nth-child(2) { width: 29.9%; }
.pc-table.pc-table-dre th:nth-child(3) { width: 10.1%; }
.pc-table.pc-table-dre tbody tr td { background: #fff; }
.pc-table.pc-table-dre td.ff-dre-child { padding-left: 48px; }
.ff-dre-handle { margin-right: 8px; font-size: 16px; line-height: 1; }
.pc-table-dre .ff-row-btn:disabled { opacity: 1; cursor: not-allowed; }
.pc-table-dre .ff-row-btn .pc-icon { width: 14px; height: 14px; }
.ff-toolbar .ff-search input:disabled { background: #fff; }
/* Ajuste fino medido: texto de apoio 5 px abaixo do campo; no cadastro de conta o rótulo fica 9 px acima do campo. */
.ff-form .field > small { margin-top: 5px; }
.ff-body:has(> .ff-grid-3) { padding: 16px 20px 36px; }
.ff-grid-3 { row-gap: 15px; }
.ff-grid-3 .field { gap: 9px; }

/* Botão escuro desabilitado mantém o texto branco (a regra dos botões claros desabilitados deixava texto escuro sobre
   fundo escuro: "Adicionar campo extra" sumia). */
.ff-btn.ff-btn-dark:disabled,
.ff-empty-actions .ff-btn.ff-btn-dark:disabled,
.ff-form .pc-pending .ff-btn.ff-btn-dark:disabled { color: #fff; }

/* ===== Leva 5, T4: contas a pagar e a receber ===== */
/* Contas a pagar tem nove colunas (com Plano de contas): 40 / 194 / 102 / 195 / 173 / 118 / 133 / 97 / 116 px do original.
   A coluna Entidade é estreita no original; nomes longos cortam com reticências e o texto inteiro vai na dica. */
.fin-table.fin-table-payable th:nth-child(1) { width: 3.42%; }
.fin-table.fin-table-payable th:nth-child(2) { width: 16.61%; }
.fin-table.fin-table-payable th:nth-child(3) { width: 8.73%; }
.fin-table.fin-table-payable th:nth-child(4) { width: 16.7%; }
.fin-table.fin-table-payable th:nth-child(5) { width: 14.81%; }
.fin-table.fin-table-payable th:nth-child(6) { width: 10.1%; }
.fin-table.fin-table-payable th:nth-child(7) { width: 11.39%; }
.fin-table.fin-table-payable th:nth-child(8) { width: 8.31%; }
.fin-table.fin-table-payable th:nth-child(9) { width: 9.93%; }
.fin-table.fin-table-payable td:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.fin-table.fin-table-payable td:nth-child(3) .fin-entity { display: block; overflow: hidden; text-overflow: ellipsis; }
.fin-table.fin-table-payable td:nth-child(5), .fin-table.fin-table-payable td:nth-child(2) { overflow-wrap: normal; }
.fin-table.fin-table-payable td:nth-child(5) { white-space: nowrap; }
/* Cartões de totais: ícone a 16 px da borda, rótulo a 10 px do ícone, anel de 40 px com trilho na cor do cartão. */
.fin-card { padding: 12px 16px 14px; column-gap: 10px; row-gap: 7px; }
.fin-card-note { margin-top: -6px; }
.fin-card-ring { font-size: 9px; font-weight: 700; }
.fin-card-ring::before { inset: 3px; }
.fin-card-total .fin-card-ring { color: var(--fin-dark); }
.fin-card-overdue .fin-card-ring { background: conic-gradient(var(--fin-ring) calc(var(--fin-ratio) * 1%), #f4d7d5 0); }
.fin-card-today .fin-card-ring { background: conic-gradient(var(--fin-ring) calc(var(--fin-ratio) * 1%), #f6e7c9 0); }
.fin-card-upcoming .fin-card-ring { background: conic-gradient(var(--fin-ring) calc(var(--fin-ratio) * 1%), #e4e7ea 0); color: #6b7177; }
.fin-card-settled .fin-card-ring { background: conic-gradient(var(--fin-ring) calc(var(--fin-ratio) * 1%), #cfe8d6 0); }
/* Descrição com 6 px de respiro à direita (o texto de 190 px cabe na coluna de 210 px) e botões da barra 4 px mais estreitos. */
.fin-table:not(.fin-accounts-table) td:nth-child(2) { padding-right: 6px; }
.fin-toolbar-start .fin-btn { padding: 0 10px; }

/* Clientes aberto pelo Financeiro (#customers?module=finance): cinco colunas 513 / 198 / 140 / 201 / 116 px, linhas brancas. */
#view-root .customers-list.is-finance .data-table:not([data-selecting]) th:nth-child(1),
#view-root .customers-list.is-finance .data-table:not([data-selecting]) td:nth-child(1) { width: 43.9%; }
#view-root .customers-list.is-finance .data-table:not([data-selecting]) th:nth-child(2),
#view-root .customers-list.is-finance .data-table:not([data-selecting]) td:nth-child(2) { width: 16.94%; }
#view-root .customers-list.is-finance .data-table:not([data-selecting]) th:nth-child(3),
#view-root .customers-list.is-finance .data-table:not([data-selecting]) td:nth-child(3) { width: 12%; }
#view-root .customers-list.is-finance .data-table:not([data-selecting]) th:nth-child(4),
#view-root .customers-list.is-finance .data-table:not([data-selecting]) td:nth-child(4) { width: 17.2%; }
#view-root .customers-list.is-finance .data-table:not([data-selecting]) th:nth-child(5),
#view-root .customers-list.is-finance .data-table:not([data-selecting]) td:nth-child(5) { width: 9.96%; }
#view-root .customers-list.is-finance .data-table tbody tr:nth-child(n) td { background: #fff; }

/* ===== Leva 5, T4: Adicionar conta (cartões de importação, rádio verde, conciliação com interruptor escuro, ajuda em Banco) ===== */
.ff-form-account .ff-head { min-height: 69px; padding-top: 12px; padding-bottom: 12px; }
.ff-form-account .ff-body:has(> .ff-grid-3) { padding-top: 19px; }
.ff-form-account .ff-grid-3 { row-gap: 14px; }
.ff-form-account .ff-grid-3 .field { gap: 11px; }
.ff-form-account .pc-pending select:disabled { color: #262b2f; -webkit-text-fill-color: #262b2f; opacity: 1; }
/* Ícone de ajuda (?) ao lado de Banco. */
.ff-form-account .ff-grid-3 > :nth-child(2) label::after {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 7px; vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23262b2f'/%3E%3Cpath d='M9 9.2a3 3 0 1 1 4.6 2.5c-1 .6-1.6 1.1-1.6 2.3M12 17v1.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Cartões de importação: 11 px de texto, rádio verde preenchido no selecionado, marcas e nota com barra lateral. */
.ff-form-account .ff-radio-card { padding: 16px 13px 14px; font-size: 11px; line-height: 16px; display: flex; flex-direction: column; }
.ff-form-account .ff-radio-card.is-selected { padding: 15px 12px 13px; background: #fff; }
.ff-form-account .ff-radio-title { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 18px; }
.ff-form-account .ff-radio-card input[type='radio'] {
  appearance: none; -webkit-appearance: none; flex: none; width: 14px; height: 14px; margin: 0;
  border: 1.5px solid #b4bac0; border-radius: 50%; background: #fff;
}
.ff-form-account .ff-radio-card input[type='radio']:checked {
  border: 2px solid #119b55; background: radial-gradient(circle, #119b55 0 3px, #fff 3.5px);
}
.ff-form-account .ff-radio-sub { margin: 7px 0 4px; font-size: 11px; line-height: 16px; }
.ff-form-account .ff-radio-card ul { margin: 0; }
.ff-form-account .ff-radio-card li { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 11px; line-height: 16px; }
.ff-form-account .ff-radio-card li::before {
  content: ''; flex: none; width: 12px; height: 12px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12.5l6 6L21 6' fill='none' stroke='%23119b55' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ff-form-account .ff-radio-card li.is-no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='%23c9302c' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ff-form-account .ff-radio-note {
  display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 6px 10px; border-left: 3px solid #d3d7db;
  background: #f5f6f7; font-size: 10px; line-height: 16px; color: #555;
}
.ff-form-account .ff-radio-note::before {
  content: ''; flex: none; width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23707880'/%3E%3Cpath d='M12 10.5v7M12 6.5v1.8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Regras de conciliação: interruptor escuro à direita e ajuda (?) depois da descrição. */
.ff-form-account .ff-rule p::after {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 8px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23707880'/%3E%3Cpath d='M9 9.2a3 3 0 1 1 4.6 2.5c-1 .6-1.6 1.1-1.6 2.3M12 17v1.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ff-form-account .ff-toggle input[type='checkbox'] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; min-width: 36px; height: 20px; margin: 0;
  border: 0; border-radius: 10px; background: #c9cdd1; cursor: not-allowed; opacity: 1;
}
.ff-form-account .ff-toggle input[type='checkbox']::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-sizing: border-box;
  transition: left 0.15s;
}
.ff-form-account .ff-toggle input[type='checkbox']:checked { background: #0f1921; border: 0; }
.ff-form-account .ff-toggle input[type='checkbox']:checked::before { left: 18px; }

/* "Disponível no PDV" e outros interruptores dos formulários: trilho em pílula (o campo desabilitado perdia o trilho). */
.ff-form:not(.ff-form-account) .ff-toggle { gap: 9px; font-size: 14px; font-weight: 400; }
.ff-form:not(.ff-form-account) .ff-toggle input[type='checkbox'],
.ff-form:not(.ff-form-account) .ff-toggle input[type='checkbox']:disabled {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 27px; min-width: 27px; height: 15px; margin: 0;
  border: 1px solid #a9b0b6; border-radius: 8px; background-color: #e3e6e9; opacity: 1; cursor: default;
}
.ff-form:not(.ff-form-account) .ff-toggle input[type='checkbox']::before {
  content: ''; position: absolute; top: 1px; left: 1px; width: 11px; height: 11px; border: 0; border-radius: 50%; background: #5d646b; box-sizing: border-box;
}
.ff-form:not(.ff-form-account) .ff-toggle input[type='checkbox']:checked { background-color: #0f1921; border-color: #0f1921; }
.ff-form:not(.ff-form-account) .ff-toggle input[type='checkbox']:checked::before { left: 13px; background: #fff; }
/* Contas fixas: glifo dentro de cada quadrado de dica (sincronizar, calendário, pausa) nas cores da captura. */
.ff-cards article:nth-child(1) .ff-card-icon { background: #ece8fb; color: #5b3fd3; }
.ff-cards article .ff-card-icon .pc-icon { width: 18px; height: 18px; fill: currentColor; }

/* ===== Leva 5, T4: formulários do Financeiro, deslocamentos de 1 a 3 px ===== */
.ff-form:not(.ff-form-account) .ff-head { min-height: 73px; }
.ff-form .ff-head h2 { position: relative; top: -3px; gap: 5px; }
.ff-form .ff-head h2 .pc-icon { width: 17px; height: 17px; }
.ff-form .ff-actions .ff-btn { padding: 0 14px; }
.ff-form .field > small { margin-top: 3px; font-size: 11.2px; }

/* Leva 7, tema X1: Adicionar pagamento / recebimento conferido contra o original (1440 x 900). */
/* Intervalo de 17 px entre as seções e título de 19,5 px. */
.ff-title-main { gap: 17px; }
.ff-title-main .ff-head h2 { font-size: 19.5px; top: -2px; }
/* Campos de busca com lupa à esquerda (texto "Digite para buscar"), no lugar do select com setas. */
#view-root .ff-title-main input.ff-lens {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l5.6 5.6-1.4 1.4-5.6-5.6A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z' fill='%23777'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 15px 15px;
  padding: 0 12px 0 36px; color: #343a40; font-size: 16px;
}
#view-root .ff-title-main input.ff-lens::placeholder { color: #6c757d; opacity: 1; }
/* Adicionar com IA: borda roxa, ícone de brilho, 139 x 32 px. */
.ff-title-main .ff-btn-ai { width: 139px; height: 32px; margin-top: 6px; gap: 7px; padding: 0 10px; border-color: #7a5ce0; background: #f4f2ff; color: #4a32b5; font-size: 13px; }
.ff-title-main .ff-btn-ai .pc-icon { width: 13px; height: 13px; fill: #5b3fd6; }
.ff-title-main .ff-btn-ai:disabled { opacity: 1; }
/* Ratear: claro, com borda e texto cinzas. */
.ff-grid-classify .ff-btn { padding: 0 13.5px; gap: 7px; border-color: #ced4da; color: #6c757d; background: #fff; }
.ff-grid-classify .ff-btn:disabled { opacity: 1; }
.ff-grid-classify .ff-btn .pc-icon { width: 16px; height: 16px; fill: #6c757d; }
/* Data de competência em branco com a máscara 99/99/9999 em texto escuro; Vencimento vazio e sem máscara à mostra. */
.ff-title-main .ctl-date:has([name='issuedOn']) .ctl-date-text::placeholder { color: #212529; opacity: 1; }
.ff-title-main .ctl-date:has([name='dueOn']) .ctl-date-text::placeholder { color: transparent; }
/* Link "Não é um fornecedor?" e modo Único/Parcelado. */
.ff-title-main .ff-link-disabled { margin-top: 12px; font-size: 13px; color: #212529; }
.ff-title-main .ff-segment { margin-top: 7px; }
.ff-title-main .ff-segment button { height: 28px; padding: 0 11px; gap: 5px; font-size: 13px; }
/* Resumo: valor de 28 px, "R$" de 12 px; linha do tempo 4 px mais abaixo. */
.ff-title-side .ff-total { font-size: 28px; line-height: 1.1; }
.ff-title-side .ff-summary-top { min-height: 88px; padding-top: 17px; }
.ff-title-side .ff-summary-top p { margin-top: 7px; }
.ff-title-side .ff-summary-top p > span:first-child { font-size: 12px; }
.ff-title-side .ff-summary-terms { padding-bottom: 13px; }
.ff-title-side .ff-timeline { margin-top: 14px; }
.ff-title-side .ff-timeline > div { gap: 0; }