/* RF Gestão — refinamento profissional do painel
   Corrige sobreposições, proporções e ritmo visual sem alterar funcionalidades. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html body:not(.auth-locked) {
  grid-template-columns: 272px minmax(0, 1fr) !important;
}

html body:not(.auth-locked) aside.sidebar {
  width: 272px !important;
  min-width: 0 !important;
  padding: 24px 18px !important;
}

html body:not(.auth-locked) .app-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 32px 42px !important;
  overflow-x: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking.view.active {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 18px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar {
  display: grid !important;
  grid-template-columns: minmax(310px, 1fr) minmax(0, 720px) !important;
  align-items: start !important;
  column-gap: 24px !important;
  margin: 0 0 2px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar > div:first-child {
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar h1 {
  margin: 0 0 6px !important;
  font-size: clamp(32px, 2.35vw, 40px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .page-subtitle {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar-actions {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 44px 190px !important;
  grid-template-rows: 44px 38px !important;
  align-items: center !important;
  justify-self: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 720px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar-actions > * {
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .global-search {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: initial !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .top-period-control {
  grid-column: 3 !important;
  grid-row: 2 !important;
  order: initial !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .top-period-control select {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 24px 0 4px !important;
  font-size: 13px !important;
  text-overflow: ellipsis !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .notification-wrap {
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: initial !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .notification-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .header-user-card {
  grid-column: 3 !important;
  grid-row: 1 !important;
  order: initial !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px 10px 4px 5px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .header-user-card > span:not(.header-avatar) {
  min-width: 0 !important;
  max-width: 132px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .sync-caption,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .command-bar,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-summary-head,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .financial-summary-head {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   PAINEL FINANCEIRO — estrutura real, composição inspirada em
   design-reference/target-pages.html (Painel): 5 indicadores principais,
   corpo em 3 colunas (ações rápidas + resumo do dia / agenda semanal /
   contas + resumo financeiro + inadimplência + caixa futuro) e fluxo de
   caixa em largura total abaixo. Definição única do layout — não sobrepor
   com novas camadas; ajustar estas regras diretamente.
   ========================================================================== */

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .kpi-primary-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* 6 indicadores: testado com valores extremos (7 dígitos, negativo) em
   1664px real (sidebar expandida = pior caso, ~1271px de área útil) sem
   corte. Abaixo de 1600px a largura por card fica apertada demais para o
   valor em fonte cheia — passa para 3+3, testado em 1280/768px. */
@media (max-width: 1600px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .kpi-primary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Valor do KPI acompanha a largura real do card (cqw), não a viewport:
   fica cheio (até 32px) em 3 ou menos colunas e reduz só o necessário
   em 6 colunas, sem cortar dígitos em valores grandes/negativos. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi > strong,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi.hero-metric > strong {
  font-size: clamp(13px, 12cqw, 32px) !important;
  white-space: nowrap !important;
  letter-spacing: -0.03em !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .kpi-primary-grid .metric,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .kpi-primary-grid .hero-metric {
  min-height: 160px !important;
  height: auto !important;
  padding: 19px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-columns {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.75fr) minmax(620px, 2.7fr) minmax(280px, 0.9fr) !important;
  gap: 18px !important;
  align-items: start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-center,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
}

/* Ações rápidas — cartão externo (título dentro, item lista abaixo). */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-panel {
  padding: 20px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 20px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.04) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-panel-head {
  margin: 0 0 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-panel-title {
  margin: 0 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

/* Ações rápidas — lista vertical, proporções amplas conforme referência. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action > span:first-child {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 14px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action > span:first-child svg {
  width: 20px !important;
  height: 20px !important;
}

/* Nova despesa — mesma cor terracota/coral de "Agendar prazo" na referência (era azul). */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left #quick-expense-button > span:first-child {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action-copy {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action-copy strong {
  min-width: 0 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action-copy small {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action > b {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-center .panel,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .panel,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .accounts-dashboard-panel {
  min-width: 0 !important;
  height: auto !important;
  padding: 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.04) !important;
}

/* Resumo do dia (coluna esquerda). */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .day-summary-panel .summary-list {
  display: grid !important;
  gap: 9px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .day-summary-panel .summary-line {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .day-summary-panel .summary-line strong {
  color: var(--rf-text, #172033) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 4px 8px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 11px 0 !important;
  padding: 9px 0 !important;
  border-top: 1px solid var(--rf-border, #e6ebf1) !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi .dashboard-kpi-head {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi .dashboard-kpi-icon,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi .dashboard-kpi-head em,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi small,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi .dashboard-kpi-visual,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi footer {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi .dashboard-kpi-head > span:nth-child(2) {
  overflow: visible !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-mini-kpi > strong {
  color: var(--rf-text, #172033) !important;
  font-size: 15px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-subhead {
  margin: 0 0 8px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .day-summary-panel .upcoming-list {
  max-height: 168px !important;
  overflow-y: auto !important;
}

/* Contas — saldo consolidado compacto no topo do card. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 3px 8px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 2px 0 4px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat .dashboard-kpi-head {
  order: 1 !important;
  flex: 1 1 auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat .dashboard-kpi-icon,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat .dashboard-kpi-head em,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat small,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat .dashboard-kpi-visual,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat footer {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat .dashboard-kpi-head > span:nth-child(2) {
  overflow: visible !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat > strong {
  order: 2 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 18px !important;
}

/* Resumo financeiro — grafico circular compacto. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-summary {
  display: grid !important;
  grid-template-columns: 1fr 92px !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-summary .legend {
  display: grid !important;
  gap: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-success { background: var(--rf-success, #0f7a5a) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-danger { background: var(--rf-error, #ef4444) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-info { background: var(--rf-link, #1f4e79) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-row span {
  display: block !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-row strong {
  display: block !important;
  margin-top: 1px !important;
  color: var(--rf-text, #172033) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut {
  width: 92px !important;
  height: 92px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut-base { stroke: var(--rf-error-bg, #fef2f2) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut-share { stroke: var(--rf-success, #0f7a5a) !important; stroke-linecap: round !important; transition: stroke-dasharray 320ms ease !important; }

/* Inadimplencia e Caixa futuro — cartoes compactos da coluna direita. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .overdue-dashboard-panel {
  min-height: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .overdue-panel-head {
  display: block !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .overdue-panel-head #dashboard-receivable-summary {
  display: block !important;
  justify-self: auto !important;
  margin-top: 3px !important;
  text-align: left !important;
  white-space: normal !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .overdue-list {
  max-height: 190px !important;
  overflow-y: auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .forecast-compact-panel {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-icon {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-icon svg {
  width: 17px !important;
  height: 17px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-title {
  flex: 1 1 140px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-title h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-title span {
  margin-top: 1px !important;
  font-size: 11px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .forecast-compact-panel .forecast-card-link {
  flex: 1 1 100% !important;
  font-size: 12px !important;
}

/* Fluxo de caixa — largura total abaixo do corpo em 3 colunas. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .cashflow-panel-full {
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .cashflow-panel-full .cashflow-panel {
  min-height: 0 !important;
}

@media (max-width: 1100px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .kpi-primary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-columns {
    grid-template-columns: 1fr 1fr !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right > * {
    flex: 1 1 260px !important;
  }
}

@media (max-width: 760px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .kpi-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-columns {
    grid-template-columns: 1fr !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right {
    grid-column: auto !important;
    flex-direction: column !important;
  }
}

/* Agenda & Visão Geral — elemento central e dominante da coluna do meio. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 520px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 17px 18px 13px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-head h2 {
  margin: 0 !important;
  font-size: 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-head p {
  margin: 4px 0 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 11px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel .segmented {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: var(--rf-page, #fafbfc) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel .segmented button {
  border: 0 !important;
  background: transparent !important;
  border-radius: 9px !important;
  padding: 7px 10px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel .segmented button.active {
  background: var(--rf-primary, #17324d) !important;
  color: #ffffff !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-grid {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-hour-col {
  display: grid !important;
  grid-template-rows: 40px repeat(6, 1fr) !important;
  border-right: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-hour {
  padding: 6px 8px 0 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 9px !important;
  text-align: right !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-days {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-heads {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  height: 40px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-head strong {
  margin-top: 2px !important;
  color: var(--rf-text, #172033) !important;
  font-size: 13px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-head.is-today {
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: var(--rf-primary, #17324d) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-cols {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  flex: 1 1 auto !important;
  min-height: 220px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-height: 260px !important;
  padding: 6px 5px !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
  overflow-y: auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-col.is-today {
  background: rgba(23, 50, 77, 0.028) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-event {
  border-radius: 9px !important;
  padding: 6px 7px !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-event span {
  display: block !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-event strong {
  display: block !important;
  margin-bottom: 2px !important;
  font-size: 9px !important;
  opacity: 0.8 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-event-hearing {
  background: var(--rf-success-bg, #eaf7f1) !important;
  color: #1f6c4c !important;
  border-color: #d5eee2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-event-deadline {
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: #235897 !important;
  border-color: #d8e5f7 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-event-other {
  background: var(--rf-warning-bg, #fff7ed) !important;
  color: #9e651f !important;
  border-color: #f5e2c6 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex: 0 0 auto !important;
  border-top: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom > div {
  padding: 14px 17px !important;
  max-height: 150px !important;
  overflow-y: auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom > div + div {
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom h4 {
  margin: 0 0 10px !important;
  font-size: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom .task {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 0 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 10.5px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom .task-dot {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  border: 1.5px solid #9da8b4 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom .task time {
  margin-left: auto !important;
  color: var(--rf-error, #ef4444) !important;
  font-weight: 800 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom .task strong {
  flex: 0 0 auto !important;
  color: var(--rf-primary, #17324d) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom .empty-box {
  min-height: 0 !important;
  padding: 10px !important;
  font-size: 10.5px !important;
}

@media (max-width: 900px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-grid {
    overflow-x: auto !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-heads,
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-day-cols {
    grid-template-columns: repeat(7, 110px) !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom {
    grid-template-columns: 1fr !important;
  }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-bottom > div + div {
    border-left: 0 !important;
    border-top: 1px solid var(--rf-border, #e6ebf1) !important;
  }
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .metric,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .hero-metric,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .banking-grid .metric,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .banking-grid .hero-metric {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 106px !important;
  height: 106px !important;
  padding: 14px 15px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04) !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .hero-metric span,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .hero-metric strong,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .hero-metric small {
  color: var(--rf-text, #172033) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .hero-metric span,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-grid .hero-metric small {
  color: var(--rf-text-secondary, #6f7b91) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .metric > span:first-child {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .metric strong {
  font-size: clamp(20px, 1.45vw, 24px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .metric small {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .flow-metric strong {
  color: var(--rf-link, #1f4e79) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .metric-sparkline {
  right: 18px !important;
  bottom: 25px !important;
  width: 44px !important;
  height: 20px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr) minmax(0, 1.45fr) !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-layout > .panel {
  min-width: 0 !important;
  min-height: 292px !important;
  height: 292px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.04) !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .panel-head {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .panel-head h2 {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Distribuicao aos socios — sugestao 2: cabecalho em navy solido com avatares dos socios. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .partners-distribution-panel .panel-head {
  background: #172033 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .partners-distribution-panel .panel-title-icon {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .partners-distribution-panel .panel-head h2 {
  color: #ffffff !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .partners-distribution-panel .panel-head span#dashboard-distribution-summary {
  color: rgba(255, 255, 255, 0.62) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .partners-distribution-panel .panel-actions .secondary-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #6ee7b7 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .area-value-list.compact-list {
  display: flex !important;
  flex-direction: column !important;
  padding: 6px 18px 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .area-value-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--rf-line, #e7e8eb) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .area-value-card:last-child {
  border-bottom: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .area-value-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #172033 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .area-value-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .area-value-card strong {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-head {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 22px 24px !important;
  background: #ffffff !important;
  border-radius: 16px 16px 0 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 15px !important;
  background: #e9f0ff !important;
  color: #2563eb !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-icon svg {
  width: 24px !important;
  height: 24px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-title h2 {
  margin: 0 !important;
  color: #172033 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-title span {
  display: block !important;
  margin-top: 2px !important;
  color: #8a94a6 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-link {
  flex: 0 0 auto !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2563eb !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-list {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 24px 20px !important;
  background: #ffffff !important;
  border-radius: 0 0 16px 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid #eef0f3 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row:last-child {
  border-bottom: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #e9f0ff !important;
  color: #2563eb !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row-icon svg {
  width: 19px !important;
  height: 19px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row-body strong {
  display: block !important;
  overflow: hidden !important;
  color: #172033 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row-body small {
  color: #8a94a6 !important;
  font-size: 13px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .forecast-card-row-value {
  flex: 0 0 auto !important;
  color: #2563eb !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .line-chart {
  height: 158px !important;
  margin: 6px 0 4px !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .line-chart .chart-line {
  left: 10px !important;
  right: 10px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border-width: 0 !important;
  border-top: 3px solid currentColor !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .line-chart .green-line {
  top: 24px !important;
  color: var(--rf-success, #0f7a5a) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .line-chart .blue-line {
  top: 60px !important;
  color: var(--rf-link, #1f4e79) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .line-chart .red-line {
  top: 102px !important;
  color: var(--rf-error, #ef4444) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .finance-series {
  fill: none !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .finance-series-received {
  stroke: var(--rf-success, #0f7a5a) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .finance-series-pending {
  stroke: var(--rf-link, #1f4e79) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .finance-series-expenses {
  stroke: var(--rf-error, #ef4444) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .bank-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* Fluxo de caixa e Inadimplência herdam o reset generico de
   "body[data-view=banking] .panel" (borda/raio/sombra/fundo zerados) porque nao
   sao filhos diretos de .office-layout. Restaura o mesmo cartao branco
   arredondado usado nos demais paineis do Painel, sem alterar dados ou logica. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel {
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 16px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.04) !important;
}

/* Inadimplência — lista compacta conforme a referência visual. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 342px !important;
  padding: 15px 18px 0 !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-panel-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-panel-head h2 {
  margin: 0 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel #dashboard-receivable-summary {
  justify-self: end !important;
  min-width: 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-list {
  display: grid !important;
  gap: 0 !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item.danger,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item.partial,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item:not(.danger) {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 51px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-avatar {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  color: var(--rf-error, #ef4444) !important;
  background: var(--rf-error-bg, #fef2f2) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item.partial .list-avatar,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item:not(.danger):not(.partial) .list-avatar {
  color: var(--rf-warning, #f47820) !important;
  background: var(--rf-warning-bg, #fff7ed) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-main {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-main strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-main span {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-amount {
  display: grid !important;
  justify-items: end !important;
  gap: 2px !important;
  min-width: 74px !important;
  padding-left: 8px !important;
  text-align: right !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-amount strong {
  color: var(--rf-error, #ef4444) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item.partial .list-amount strong,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-item:not(.danger):not(.partial) .list-amount strong {
  color: var(--rf-warning, #f47820) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .list-amount small {
  display: block !important;
  margin: 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  text-transform: lowercase !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-panel-footer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: calc(100% + 36px) !important;
  min-height: 40px !important;
  margin: auto -18px 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--rf-link, #1f4e79) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-panel-footer:hover {
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: var(--rf-primary-hover, #12273d) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .empty-box {
  min-height: 82px !important;
  padding: 24px 12px !important;
  border: 0 !important;
  background: transparent !important;
}

@media (max-width: 1280px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar {
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar-actions {
    max-width: 720px !important;
    justify-self: end !important;
  }
}

@media (max-width: 1180px) {
  html body:not(.auth-locked) {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  html body:not(.auth-locked) aside.sidebar {
    width: 240px !important;
  }

  html body:not(.auth-locked) .app-shell {
    padding: 24px 22px 36px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .office-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html body:not(.auth-locked) {
    display: block !important;
  }

  html body:not(.auth-locked) aside.sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar-actions {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .global-search {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .notification-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .top-period-control {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .header-user-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 44px !important;
    max-width: 44px !important;
    padding: 4px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .header-user-card > span:not(.header-avatar) {
    display: none !important;
  }
}

/* Correção definitiva do shell: supera os estilos antigos exclusivos do painel.
   A geometria é idêntica para sócios, atendimento e parceiro externo.
   Réplica de design-reference/target-layout.html: .app{padding:14px;gap:14px},
   sidebar e main como dois cartões flutuantes com raio total, separados
   pelo gap — não mais um par flush com raio partido. */
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) {
  --rf-sidebar-expanded: 280px;
  --rf-shell-radius: 28px;
  --rf-shell-gap: 14px;
  display: grid !important;
  grid-template-columns: var(--rf-sidebar-expanded) minmax(0, 1fr) !important;
  column-gap: var(--rf-shell-gap) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: var(--rf-shell-gap) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--rf-sidebar, #f2f3f4) !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar {
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
  width: var(--rf-sidebar-expanded) !important;
  min-width: var(--rf-sidebar-expanded) !important;
  max-width: var(--rf-sidebar-expanded) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 15px 13px !important;
  color: #fff9f5 !important;
  background:
    radial-gradient(circle at 9% 4%, color-mix(in srgb, white 30%, transparent) 0%, color-mix(in srgb, white 9%, transparent) 18%, transparent 39%),
    radial-gradient(circle at 96% 35%, color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 25%, transparent) 0%, transparent 35%),
    radial-gradient(circle at 15% 96%, color-mix(in srgb, var(--rf-theme-accent, var(--rf-theme-primary)) 26%, transparent) 0%, transparent 32%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--rf-theme-primary) 82%, white) 0%,
      var(--rf-theme-primary) 34%,
      color-mix(in srgb, var(--rf-theme-primary) 55%, var(--rf-theme-primary-dark, var(--rf-theme-primary))) 69%,
      var(--rf-theme-primary-dark, var(--rf-theme-primary)) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: var(--rf-shell-radius) !important;
  box-shadow:
    0 24px 58px color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  overflow: hidden !important;
}

/* .nav sem rolagem: a navegação ocupa o espaço central do rodapé até a marca,
   sem scrollbar. Os itens usam clamp() para se ajustarem discretamente à
   altura disponível em vez de rolar ou esconder itens. */
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
  gap: 0 !important;
  padding: 0 7px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label {
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  padding: 0 12px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label:first-child {
  margin-top: 2px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.34 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%) !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%) !important;
}

/* Elemento circular decorativo no rodapé, igual à referência. */
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  width: 260px !important;
  height: 260px !important;
  right: -155px !important;
  bottom: -120px !important;
  border-radius: 50% !important;
  border: 44px solid rgba(255, 255, 255, 0.045) !important;
  box-shadow:
    0 0 0 24px rgba(255, 255, 255, 0.025),
    0 0 0 72px rgba(255, 255, 255, 0.018) !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand {
  order: 1 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 20px 8px 16px !important;
  position: relative !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.03)) !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-mark {
  width: 48px !important;
  height: 48px !important;
  border-radius: 15px !important;
  flex-shrink: 0 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy {
  overflow: hidden !important;
  white-space: nowrap !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy strong {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy span {
  font-size: 9px !important;
  letter-spacing: 1.15px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  display: block !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item,
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item > span {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  padding: 7px 14px !important;
  margin-bottom: 3px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item svg.nav-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
}

/* Rodapé real: .sidebar-footer é um elemento de verdade no HTML (não mais
   simulado com order/pseudo-elemento), com margin-top:auto empurrando-o
   para o fim do sidebar, contendo o botão real e o cartão real do usuário. */
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .integration-card {
  order: 5 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-footer {
  order: 10 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: auto !important;
  padding-top: clamp(6px, 1vh, 10px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: calc(100% - 24px) !important;
  height: 48px !important;
  margin: 0 12px 8px !important;
  gap: 14px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle span {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: calc(100% - 24px) !important;
  min-height: 64px !important;
  max-height: 68px !important;
  margin: 0 12px 10px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled):not(.sidebar-collapsed) > aside.sidebar .sidebar-user-card:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

/* Ícone de saída não aparece dentro do card expandido; ele só é usado como
   conteúdo do botão quadrado no estado recolhido (ver media query abaixo). */
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-exit-icon {
  display: none !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-exit-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-monogram {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy small {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > main.app-shell {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: var(--rf-shell-radius) !important;
  background: var(--rf-page, #fafbfc) !important;
  background-clip: padding-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  box-shadow: 0 22px 60px rgba(24, 34, 48, 0.105) !important;
}

@media (max-width: 1280px) and (min-width: 901px) {
  html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) {
    --rf-sidebar-expanded: 272px;
    --rf-shell-radius: 26px;
  }
}

@media (max-width: 900px) {
  html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }

  html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding-right: 14px !important;
    overflow: visible !important;
  }

  html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > main.app-shell {
    width: auto !important;
    height: auto !important;
    min-height: calc(100vh - 16px) !important;
    max-height: none !important;
    margin: 8px !important;
    border-radius: 24px !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
  }
}

/* Sidebar recolhida: trava a largura em 84px, sobrepondo a variável
   --rf-sidebar-expanded aplicada inline pelo JS (80px) sem alterar a lógica
   do botão de recolher. Só se aplica no layout em grid (telas > 900px). */
@media (min-width: 901px) {
  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    padding: 15px 10px !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand::after {
    left: 3px !important;
    right: 3px !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  /* Item ativo recolhido: destaque reduzido a um quadrado ~48x48
     centralizado, em vez de ocupar quase toda a largura do sidebar. */
  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item.active {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 15px !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 10px !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle span {
    display: none !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-card {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-monogram {
    display: none !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-exit-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    margin-left: 0 !important;
  }

  html body.sidebar-collapsed[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy {
    display: none !important;
  }
}

/* Sidebar compacto (refinamento visual, 2026-09-03): fonte/padding/gap levemente menores para que
   todos os itens (incluindo "Configurações", o último) caibam confortavelmente em telas de altura
   normal, sem cortar nada -- preserva ícones/ordem/cores/recolher, só ajusta as medidas do bloco
   acima. Especificidade IGUAL (mesmo seletor), posicionada DEPOIS no arquivo -- ganha no empate por
   ordem de origem, sem precisar de especificidade nem !important extra além do já usado ali. */
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar {
  padding: 12px 12px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand {
  padding: 14px 8px 12px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav {
  padding: 0 6px !important;
  /* Rede de segurança (item 31 do pedido de refinamento): se ainda assim não coubesse numa tela
     muito baixa, rola em vez de cortar "Configurações"/o último item -- nunca mais um item
     inacessível. Barra fina e discreta, nunca aparece em telas normais onde tudo já cabe sem rolar. */
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav::-webkit-scrollbar {
  width: 4px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label {
  margin-top: 6px !important;
  margin-bottom: 3px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label:first-child {
  margin-top: 1px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item,
html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item > span {
  font-size: 12.5px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item {
  min-height: 33px !important;
  height: 33px !important;
  padding: 6px 12px !important;
  margin-bottom: 2px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item svg.nav-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-footer {
  padding-top: 6px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle {
  height: 42px !important;
  margin: 0 10px 6px !important;
}

html body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-card {
  min-height: 56px !important;
  max-height: 60px !important;
  margin: 0 10px 8px !important;
  padding: 8px 10px !important;
}

/* Confirmação de saída do sistema: dialog pequeno reaproveitando o padrão
   visual dos demais modais (.password-modal), acionado pelo card de
   usuário do rodapé do sidebar (expandido ou recolhido). */
.logout-confirm-modal {
  width: min(360px, calc(100vw - 32px));
  border: 0;
  border-radius: 16px;
  padding: 0;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(38, 43, 73, 0.24);
}

.logout-confirm-modal::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.logout-confirm-body {
  padding: 24px 20px 4px;
}

.logout-confirm-body p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.logout-confirm-actions {
  justify-content: center;
  border-bottom: 0;
  padding: 18px 20px 20px;
}

html body:not(.auth-locked) .logout-confirm-actions .logout-confirm-submit {
  background: #8f3f2e !important;
  border-color: #8f3f2e !important;
}

html body:not(.auth-locked) .logout-confirm-actions .logout-confirm-submit:hover {
  background: #7a3526 !important;
  border-color: #7a3526 !important;
}

/* Fluxo de caixa: fiel à referência aprovada (mini-cards + gráfico de 3 séries), com dados reais. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel {
  padding: 26px !important;
  min-width: 0 !important;
  border-radius: 19px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel-head {
  align-items: flex-start !important;
  margin-bottom: 20px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel-head h2 {
  margin: 0 !important;
  color: var(--rf2-navy, #173653) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel-subtitle {
  margin: 0 !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 13px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-actions,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-range {
  display: flex !important;
  align-items: center !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-actions {
  gap: 18px !important;
  align-self: center !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-full-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rf2-terracotta, #b35a3c) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-full-link:hover {
  color: #8f452e !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-full-link-arrow {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-range {
  padding: 3px !important;
  border-radius: 10px !important;
  background: #f2f4f7 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-range button {
  min-width: 64px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-range button.active {
  background: #ffffff !important;
  color: #8a4a30 !important;
  box-shadow: 0 1px 5px rgba(23, 32, 51, 0.12) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 23px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid article {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 8px 20px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-bottom: 4px !important;
  color: var(--rf2-blue-gray, #52718b) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-icon svg {
  width: 15px !important;
  height: 15px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid article > .cashflow-mini-label,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid article > small {
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid article > small {
  margin-top: 1px !important;
  font-size: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid article > strong {
  overflow: visible !important;
  order: 3 !important;
  margin: 2px 0 1px !important;
  color: var(--rf2-navy, #173653) !important;
  font-size: clamp(18px, 1.2vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-balance .cashflow-mini-icon {
  color: var(--rf2-blue-gray, #52718b) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-incoming .cashflow-mini-icon {
  color: var(--rf2-green, #60784a) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-incoming .cashflow-mini-label {
  color: var(--rf2-green, #60784a) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-incoming > strong {
  color: #4f6a3f !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-outgoing .cashflow-mini-icon {
  color: var(--rf2-terracotta, #b35a3c) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-outgoing .cashflow-mini-label {
  color: var(--rf2-terracotta, #b35a3c) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-outgoing > strong {
  color: #8f452e !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid .cashflow-mini-card.is-projected,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid .projected {
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-projected .cashflow-mini-icon,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-projected .cashflow-mini-label {
  color: var(--rf2-blue-gray, #52718b) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-mini-card.is-projected > strong {
  color: #3c536a !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart {
  position: relative !important;
  margin-top: 4px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-bottom: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-legend {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-legend li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-legend li span {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-legend li.is-incoming { color: var(--rf2-green, #60784a) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-legend li.is-outgoing { color: var(--rf2-terracotta, #b35a3c) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-legend li.is-balance { color: var(--rf2-blue-gray, #52718b) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart-stage {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-rows: 210px 24px !important;
  max-height: 234px !important;
  column-gap: 6px !important;
  cursor: crosshair !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-axis-y {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 2px 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-axis-y span {
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: left !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart-plot {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart-plot svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-axis-x {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-axis-x span {
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-axis-x span.is-hidden {
  visibility: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid-line {
  stroke: #eef1f4 !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-zero-line {
  stroke: #dfe4ea !important;
  stroke-width: 1.25 !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-area-in-path {
  fill: var(--rf2-pastel-green, #eaf4ee) !important;
  opacity: 0.9 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-area-out-path {
  fill: var(--rf2-pastel-terracotta, #f7ece7) !important;
  opacity: 0.9 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-line-in-path {
  fill: none !important;
  stroke: var(--rf2-green, #60784a) !important;
  stroke-width: 2 !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-line-out-path {
  fill: none !important;
  stroke: var(--rf2-terracotta, #b35a3c) !important;
  stroke-width: 2 !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-line-path {
  fill: none !important;
  stroke: var(--rf2-blue-gray, #52718b) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6 5 !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-marker {
  fill: var(--rf2-blue-gray, #52718b) !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  vector-effect: non-scaling-stroke !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-tooltip {
  position: absolute !important;
  z-index: 2 !important;
  transform: translate(-50%, -100%) !important;
  padding: 6px 9px !important;
  border-radius: 6px !important;
  background: #172033 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-empty-note {
  margin: 10px 0 0 !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 12px !important;
  text-align: center !important;
}

@media (max-width: 1180px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-panel-head,
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-actions {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .cashflow-chart-stage {
    grid-template-rows: 240px 24px !important;
  }
}

/* Central de notificações ativa, diária e acionável. */
html body:not(.auth-locked) .notification-wrap.has-unread .notification-button {
  border: 1px solid #f6b3b3 !important;
  background: #fff4f4 !important;
  color: #d92d2d !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08), 0 8px 22px rgba(172, 33, 33, 0.13) !important;
  animation: rf-notification-pulse 2.4s ease-in-out infinite !important;
}

html body:not(.auth-locked) .notification-wrap.has-unread .notification-button .notification-icon {
  color: #d92d2d !important;
  transform-origin: 50% 10% !important;
  animation: rf-notification-ring 4.8s ease-in-out infinite !important;
}

html body:not(.auth-locked) .notification-badge,
html body:not(.auth-locked) .notification-wrap.has-unread .notification-badge {
  top: -5px !important;
  right: -6px !important;
  min-width: 19px !important;
  width: auto !important;
  height: 19px !important;
  padding: 0 5px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #e42323 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 15px !important;
  text-align: center !important;
  box-shadow: 0 4px 10px rgba(185, 28, 28, 0.25) !important;
}

html body:not(.auth-locked) .notification-panel {
  top: 52px !important;
  right: -6px !important;
  width: min(430px, calc(100vw - 28px)) !important;
  max-height: min(620px, calc(100vh - 105px)) !important;
  overflow: hidden !important;
  border: 1px solid #dfe6ed !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 68px rgba(23, 32, 51, 0.22) !important;
}

html body:not(.auth-locked) .notification-panel > header {
  height: auto !important;
  min-height: 62px !important;
  padding: 12px 15px !important;
  background: #ffffff !important;
}

html body:not(.auth-locked) .notification-panel > header > span {
  display: grid !important;
  gap: 2px !important;
}

html body:not(.auth-locked) .notification-panel > header strong {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

html body:not(.auth-locked) .notification-panel > header small {
  color: #7b8798 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}

html body:not(.auth-locked) .notification-panel > header button {
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid #dfe6ed !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: var(--rf-link) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

html body:not(.auth-locked) #notification-list {
  max-height: min(550px, calc(100vh - 170px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body:not(.auth-locked) .notification-item {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 24px !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 13px 11px 13px 13px !important;
  position: relative !important;
  border: 0 !important;
  border-bottom: 1px solid #edf1f4 !important;
  border-left: 3px solid #6b89a6 !important;
  background: #fbfcfd !important;
  color: #172033 !important;
  cursor: pointer !important;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease !important;
}

html body:not(.auth-locked) .notification-item:hover,
html body:not(.auth-locked) .notification-item:focus-visible {
  z-index: 1 !important;
  outline: none !important;
  background: #f3f7fa !important;
  border-left-color: var(--rf-link) !important;
  transform: translateX(2px) !important;
}

html body:not(.auth-locked) .notification-item.success {
  border-left-color: #16a34a !important;
  background: #f3fbf7 !important;
}

html body:not(.auth-locked) .notification-item.warning {
  border-left-color: #f47820 !important;
  background: #fffaf3 !important;
}

html body:not(.auth-locked) .notification-item.danger {
  border-left-color: #ef4444 !important;
  background: #fff5f5 !important;
}

html body:not(.auth-locked) .notification-mark {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: var(--rf-primary-soft) !important;
  color: var(--rf-link) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

html body:not(.auth-locked) .notification-item.success .notification-mark { background: #e5f7ed !important; color: #14833f !important; }
html body:not(.auth-locked) .notification-item.warning .notification-mark { background: #fff0df !important; color: #d9600a !important; }
html body:not(.auth-locked) .notification-item.danger .notification-mark { background: #fee9e9 !important; color: #d92d2d !important; }

html body:not(.auth-locked) .notification-item > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

html body:not(.auth-locked) .notification-item > div > strong {
  color: #172033 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

html body:not(.auth-locked) .notification-item > div > span {
  color: #68778c !important;
  font-size: 9.5px !important;
  font-weight: 550 !important;
  line-height: 1.38 !important;
}

html body:not(.auth-locked) .notification-item footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

html body:not(.auth-locked) .notification-item footer small {
  color: #9aa6b8 !important;
  font-size: 8px !important;
  font-weight: 650 !important;
}

html body:not(.auth-locked) .notification-item footer b {
  color: var(--rf-link) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html body:not(.auth-locked) .notification-dismiss {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #9aa6b8 !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body:not(.auth-locked) .notification-dismiss:hover { background: #e9eef3 !important; color: #172033 !important; }

html body:not(.auth-locked) .notification-empty {
  min-height: 170px !important;
  display: grid !important;
  place-content: center !important;
  gap: 5px !important;
  padding: 28px !important;
  color: #6f7b91 !important;
  text-align: center !important;
}

html body:not(.auth-locked) .notification-empty strong { color: #172033 !important; font-size: 14px !important; }
html body:not(.auth-locked) .notification-empty span { font-size: 10px !important; }

@keyframes rf-notification-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.07), 0 8px 22px rgba(172, 33, 33, 0.11); }
  50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.12), 0 10px 26px rgba(172, 33, 33, 0.17); }
}

@keyframes rf-notification-ring {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(13deg); }
  92% { transform: rotate(-11deg); }
  96% { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.auth-locked) .notification-wrap.has-unread .notification-button,
  html body:not(.auth-locked) .notification-wrap.has-unread .notification-button .notification-icon { animation: none !important; }
}

@media (max-width: 640px) {
  html body:not(.auth-locked) .notification-panel {
    position: fixed !important;
    top: 74px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 94px) !important;
  }
}

/* Notificações persistentes de casos e assistência médica. */
html body:not(.auth-locked) .notification-panel,
html body:not(.auth-locked) .case-notification-dialog > article {
  --notification-primary: var(--color-primary, var(--rf-theme-primary, var(--rf-primary)));
  --notification-primary-dark: var(--color-primary-dark, var(--rf-theme-primary-dark, var(--rf-primary-deep)));
  --notification-accent: var(--color-accent, var(--rf-theme-accent, var(--rf-link)));
  --notification-background: var(--color-background, var(--rf-theme-background, var(--rf-page)));
  --notification-surface: var(--color-surface, var(--rf-theme-surface, var(--rf-surface)));
  --notification-text: var(--color-text, var(--rf-theme-text, var(--rf-text)));
  --notification-muted: var(--color-text-muted, var(--rf-theme-text-muted, var(--rf-text-secondary)));
  --notification-border: var(--color-border, var(--rf-theme-border, var(--rf-border)));
}

html body:not(.auth-locked) .notification-panel,
html body:not(.auth-locked) .notification-panel > header {
  color: var(--notification-text) !important;
  background: var(--notification-surface) !important;
  border-color: var(--notification-border) !important;
}

html body:not(.auth-locked) .notification-panel > header strong { color: var(--notification-text) !important; }
html body:not(.auth-locked) .notification-panel > header small { color: var(--notification-muted) !important; }
html body:not(.auth-locked) .notification-panel > header button { color: var(--notification-primary) !important; background: var(--notification-surface) !important; border-color: var(--notification-border) !important; }
html body:not(.auth-locked) .notification-item { color: var(--notification-text) !important; background: var(--notification-surface) !important; border-bottom-color: var(--notification-border) !important; border-left-color: var(--notification-primary) !important; }
html body:not(.auth-locked) .notification-item.unread { background: color-mix(in srgb, var(--notification-primary) 7%, var(--notification-surface)) !important; }
html body:not(.auth-locked) .notification-item.warning { background: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 8%, var(--notification-surface)) !important; border-left-color: var(--color-warning, var(--rf-warning)) !important; }
html body:not(.auth-locked) .notification-item > div > strong { color: var(--notification-text) !important; }
html body:not(.auth-locked) .notification-item > div > span,
html body:not(.auth-locked) .notification-item footer small { color: var(--notification-muted) !important; }
html body:not(.auth-locked) .notification-item footer b { color: var(--notification-primary) !important; }
html body:not(.auth-locked) .notification-mark { color: var(--notification-primary) !important; background: color-mix(in srgb, var(--notification-primary) 12%, var(--notification-surface)) !important; }

html body:not(.auth-locked) .notification-filters {
  display: flex !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  overflow-x: auto !important;
  border-bottom: 1px solid var(--notification-border) !important;
  background: var(--notification-surface) !important;
}

html body:not(.auth-locked) .notification-filters button {
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: var(--notification-muted) !important;
  background: transparent !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body:not(.auth-locked) .notification-filters button.active,
html body:not(.auth-locked) .notification-filters button:focus-visible {
  border-color: color-mix(in srgb, var(--notification-primary) 30%, var(--notification-border)) !important;
  outline: none !important;
  color: var(--notification-primary-dark) !important;
  background: color-mix(in srgb, var(--notification-primary) 10%, var(--notification-surface)) !important;
}

.case-notification-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
}

.case-notification-dialog::backdrop {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
}

.case-notification-dialog > article {
  max-height: min(820px, calc(100vh - 28px));
  padding: 22px;
  overflow-y: auto;
  border: 1px solid var(--notification-border);
  border-radius: 18px;
  color: var(--notification-text);
  background: var(--notification-surface);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.case-notification-dialog > article > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--notification-border);
}

.case-notification-dialog header small,
.case-notification-origin,
.case-notification-description,
.case-notification-remaining {
  color: var(--notification-muted);
}

.case-notification-dialog h2 { margin: 4px 0 0; font-size: 21px; }
.case-notification-dialog header button {
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  color: var(--notification-muted); background: transparent; font-size: 24px; cursor: pointer;
}
.case-notification-dialog header button:hover,
.case-notification-dialog header button:focus-visible { outline: 2px solid var(--notification-accent); background: var(--notification-background); }
.case-notification-origin { margin: 16px 0 5px; font-size: 12px; }
.case-notification-description { margin: 0 0 14px; line-height: 1.5; }
.case-notification-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--notification-border); border-radius: 12px; background: var(--notification-border); }
.case-notification-details > div { min-width: 0; padding: 11px 12px; background: var(--notification-surface); }
.case-notification-details span { display: block; margin-bottom: 4px; color: var(--notification-muted); font-size: 10px; }
.case-notification-details strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.case-notification-remaining { padding: 10px 12px; border-radius: 9px; background: var(--notification-background); font-size: 11px; }
#case-notification-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
#case-notification-actions button { min-height: 42px; }
#case-notification-actions .primary-button { color: #fff; background: var(--notification-primary); border-color: var(--notification-primary); }
#case-notification-actions .secondary-button { color: var(--notification-primary-dark); background: var(--notification-surface); border-color: var(--notification-border); }
#case-notification-actions .secondary-button.danger { color: var(--rf-error, #dc2626); }
.case-notification-assignee,
.case-notification-note { grid-column: 1 / -1; display: grid; gap: 6px; color: var(--notification-muted); font-size: 11px; }
.case-notification-assignee select,
.case-notification-note textarea { width: 100%; border: 1px solid var(--notification-border); border-radius: 9px; color: var(--notification-text); background: var(--notification-surface); }
.case-notification-remind { width: 100%; min-height: 40px; margin-top: 10px; border: 0; border-radius: 9px; color: var(--notification-muted); background: transparent; cursor: pointer; }
.case-notification-remind:hover,
.case-notification-remind:focus-visible { outline: 2px solid var(--notification-accent); background: var(--notification-background); }

@media (max-width: 560px) {
  .case-notification-dialog > article { padding: 16px; }
  .case-notification-details,
  #case-notification-actions { grid-template-columns: 1fr; }
  .case-notification-assignee,
  .case-notification-note { grid-column: 1; }
}

/* Popup persistente de notificação (novo caso / assistência médica). */
.case-notification-popup > article { position: relative; padding: 26px; }
.case-notification-popup__close {
  position: absolute; top: 18px; right: 18px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; color: var(--notification-muted); background: transparent; cursor: pointer;
}
.case-notification-popup__close:hover,
.case-notification-popup__close:focus-visible { outline: 2px solid var(--notification-accent); background: var(--notification-background); }
.case-notification-popup__header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 0; border-bottom: 0; padding-right: 40px; }
.case-notification-popup__icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--notification-primary);
  background: color-mix(in srgb, var(--notification-primary) 12%, var(--notification-surface));
}
.case-notification-popup__badge {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--notification-primary-dark);
  background: color-mix(in srgb, var(--notification-primary) 16%, var(--notification-surface));
}
.case-notification-popup__origin { margin: 0; font-size: 12px; color: var(--notification-muted); }
.case-notification-popup__intro { margin: 14px 0; line-height: 1.5; color: var(--notification-text); }
.case-notification-popup__divider { border: 0; border-top: 1px solid var(--notification-border); margin: 14px 0; }
.case-notification-popup__summary h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--notification-text); }
.case-notification-popup__alert,
.case-notification-popup__notice {
  display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--notification-border); border-radius: 12px; background: var(--notification-background);
}
.case-notification-popup__alert {
  border-color: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 40%, var(--notification-border));
  background: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 8%, var(--notification-surface));
}
.case-notification-popup__alert strong { color: var(--color-warning, var(--rf-warning)); }
.case-notification-popup__alert-icon { flex-shrink: 0; color: var(--color-warning, var(--rf-warning)); }
.case-notification-popup__notice {
  border-color: color-mix(in srgb, var(--notification-primary) 30%, var(--notification-border));
  background: color-mix(in srgb, var(--notification-primary) 8%, var(--notification-surface));
}
.case-notification-popup__notice strong { color: var(--notification-primary-dark); }
.case-notification-popup__notice-icon { flex-shrink: 0; color: var(--notification-primary); }
.case-notification-popup__alert p,
.case-notification-popup__notice p { margin: 2px 0 0; font-size: 12px; color: var(--notification-text); }
.case-notification-popup__actions { margin-top: 18px; }
.case-notification-popup__remind { display: flex; align-items: center; justify-content: center; gap: 6px; }

@media (max-width: 560px) {
  .case-notification-popup > article { padding: 18px; }
  .case-notification-popup__header { padding-right: 34px; }
}

/* Painel de notificações (sino). */
.notification-center__list { max-height: min(420px, 60vh); overflow-y: auto; }
.notification-center__item { position: relative; }
.notification-center__item--pending::after {
  content: "Pendente"; position: absolute; top: 10px; right: 38px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-warning, var(--rf-warning));
  background: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 16%, var(--notification-surface));
}
.notification-center__view-all {
  display: block; width: 100%; padding: 11px; border: 0; border-top: 1px solid var(--notification-border);
  color: var(--notification-primary); background: var(--notification-surface);
  font-size: 12px; font-weight: 800; text-align: center; cursor: pointer;
}
.notification-center__view-all:hover,
.notification-center__view-all:focus-visible { outline: 2px solid var(--notification-accent); background: var(--notification-background); }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.hero-metric {
  --kpi-accent: #2f6fec;
  container-name: dashboard-metric;
  container-type: inline-size;
  min-width: 0 !important;
  min-height: 154px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #e3e9f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #172033 !important;
  box-shadow: 0 9px 26px rgba(23, 32, 51, 0.035) !important;
  cursor: pointer !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi:hover,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi:focus-visible {
  z-index: 3 !important;
  border-color: color-mix(in srgb, var(--kpi-accent) 52%, #ffffff) !important;
  outline: none !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 34px rgba(23, 50, 77, 0.12) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-contracts { --kpi-accent: #7c5ce5; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-deadlines { --kpi-accent: #e49a18; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-urgent { --kpi-accent: #ef4444; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-balance { --kpi-accent: var(--rf-link); }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-received { --kpi-accent: #16a34a; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-pending { --kpi-accent: #2780c7; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-expenses { --kpi-accent: #f47820; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-flow { --kpi-accent: #8b5cf6; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-head {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-icon {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--kpi-accent) 11%, #ffffff) !important;
  color: var(--kpi-accent) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-icon svg {
  width: 13px !important;
  height: 13px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-head > span:nth-child(2) {
  overflow: hidden !important;
  color: #52637a !important;
  font-size: clamp(8px, 5.6cqw, 10px) !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-head em {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--kpi-accent) 9%, #ffffff) !important;
  color: var(--kpi-accent) !important;
  font-size: clamp(6.5px, 4.5cqw, 8px) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi > strong,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.hero-metric > strong {
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #172033 !important;
  font-size: clamp(12px, 10cqw, 21px) !important;
  font-weight: 780 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-received > strong { color: #14833f !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-expenses > strong,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-urgent > strong { color: #dc3030 !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-pending > strong { color: var(--rf-link) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi > small {
  min-height: 20px !important;
  overflow: hidden !important;
  color: #6f7b91 !important;
  font-size: clamp(7px, 4.7cqw, 9px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-visual {
  width: 100% !important;
  height: 22px !important;
  margin-top: auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .metric-mini-bars {
  display: flex !important;
  align-items: end !important;
  gap: 3px !important;
  padding: 2px 0 !important;
  border-bottom: 1px solid #edf1f4 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .metric-mini-bars i {
  flex: 1 1 0 !important;
  min-height: 2px !important;
  height: var(--bar-height, 20%) !important;
  border-radius: 3px 3px 1px 1px !important;
  background: color-mix(in srgb, var(--kpi-accent) 74%, #ffffff) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .metric-mini-bars i.is-negative {
  background: #ef6a6a !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .metric-progress {
  height: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #eef2f6 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .metric-progress i {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--kpi-accent) !important;
  transition: width 300ms ease !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer > span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #6f7b91 !important;
  font-size: clamp(6.5px, 4.25cqw, 8px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer > span.is-positive { color: #168047 !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer > span.is-negative { color: #d83b3b !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer > b {
  flex: 0 0 auto !important;
  color: var(--kpi-accent) !important;
  font-size: clamp(6.5px, 4.3cqw, 8px) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Central de relatórios acessada pelo atalho do painel. */
.report-picker-dialog {
  width: min(780px, calc(100vw - 32px)) !important;
  max-height: min(760px, calc(100vh - 32px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dfe6ed !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #172033 !important;
  box-shadow: 0 28px 80px rgba(15, 31, 48, 0.23) !important;
}

.report-picker-dialog::backdrop {
  background: rgba(23, 32, 51, 0.42) !important;
  backdrop-filter: blur(4px) !important;
}

.report-picker-shell { display: grid !important; min-width: 0 !important; }
.report-picker-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid #e8edf2 !important;
}
.report-picker-head .eyebrow { margin: 0 0 4px !important; color: var(--rf-link) !important; font-size: 9px !important; }
.report-picker-head h2 { margin: 0 0 5px !important; color: #172033 !important; font-size: 22px !important; letter-spacing: -0.025em !important; }
.report-picker-head span { color: #6f7b91 !important; font-size: 11px !important; }
.report-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-height: min(510px, calc(100vh - 190px)) !important;
  padding: 18px 24px !important;
  overflow-y: auto !important;
}
.report-picker-grid > button {
  min-width: 0 !important;
  min-height: 90px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px !important;
  border: 1px solid #e3e9f0 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #172033 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}
.report-picker-grid > button:hover,
.report-picker-grid > button:focus-visible { border-color: #86b6a1 !important; background: #f8fcfa !important; outline: none !important; transform: translateY(-2px) !important; }
.report-picker-icon { width: 42px !important; height: 42px !important; display: grid !important; place-items: center !important; border-radius: 12px !important; background: #eef6f2 !important; color: #0f7a5a !important; }
.report-picker-icon svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; }
.report-picker-grid > button > span:nth-child(2) { display: grid !important; min-width: 0 !important; gap: 4px !important; }
.report-picker-grid > button strong { color: #172033 !important; font-size: 12px !important; }
.report-picker-grid > button small { color: #6f7b91 !important; font-size: 9px !important; line-height: 1.35 !important; }
.report-picker-grid > button b { color: var(--rf-link) !important; font-size: 9px !important; white-space: nowrap !important; }
.report-picker-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 14px 24px !important; border-top: 1px solid #e8edf2 !important; background: #fafbfc !important; }
.report-picker-footer > span { color: #6f7b91 !important; font-size: 10px !important; }
.report-picker-footer > span strong { color: #172033 !important; }

@container dashboard-metric (max-width: 138px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi-head em { display: none !important; }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer > b { font-size: 0 !important; }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi footer > b::after { content: "→"; font-size: 9px !important; }
}

@media (max-width: 640px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi { min-height: 150px !important; }
  .report-picker-grid { grid-template-columns: 1fr !important; padding: 14px !important; }
  .report-picker-head, .report-picker-footer { padding-inline: 16px !important; }
}

/* Configurações — composição fiel ao painel de referência. */
html body[data-view="settings"]:not(.auth-locked) #view-settings {
  width: 100% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 0 0 28px !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings > .section-head {
  align-items: flex-start !important;
  min-height: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings > .section-head .eyebrow {
  display: none !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings > .section-head h2 {
  margin: 0 0 5px !important;
  color: #172033 !important;
  font-size: clamp(25px, 2vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings > .section-head > span {
  margin: 0 !important;
  color: #6f7b91 !important;
  font-size: 12px !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings .settings-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 0 0 2px !important;
  overflow-x: auto !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings .settings-tabs button {
  min-height: 34px !important;
  flex: 0 0 auto !important;
  padding: 0 14px !important;
  border: 1px solid #e1e7ee !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #52637a !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

html body[data-view="settings"]:not(.auth-locked) #view-settings .settings-tabs button.active {
  border-color: #7798c4 !important;
  background: #f4f8fc !important;
  color: var(--rf-primary) !important;
  box-shadow: 0 5px 14px rgba(23, 50, 77, 0.06) !important;
}

#view-settings .settings-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#view-settings .settings-kpi {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid #e3e9f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.025);
}

#view-settings .settings-kpi-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3b62c4;
  background: #eef3ff;
}

#view-settings .settings-kpi-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#view-settings .settings-kpi-partners .settings-kpi-icon { color: #2563eb; background: #edf5ff; }
#view-settings .settings-kpi-invites .settings-kpi-icon { color: #d97706; background: #fff4e5; }
#view-settings .settings-kpi-modules .settings-kpi-icon { color: #168047; background: #eaf8f1; }

#view-settings .settings-kpi > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#view-settings .settings-kpi > div > span,
#view-settings .settings-kpi > div > small {
  color: #6f7b91;
  font-size: 9px;
  line-height: 1.3;
}

#view-settings .settings-kpi > div > span {
  color: #52637a;
  font-weight: 750;
}

#view-settings .settings-kpi > div > strong {
  color: #172033;
  font-size: 22px;
  line-height: 1.05;
}

#view-settings .settings-kpi > em {
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eaf8f1;
  color: #168047;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

#view-settings .settings-office-kpi-grid {
  margin-top: 2px;
  margin-bottom: 16px;
}

#view-settings .settings-office-kpi-grid .settings-kpi {
  border-radius: 16px;
}

#view-settings .settings-office-kpi-grid button.settings-kpi {
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#view-settings .settings-office-kpi-grid button.settings-kpi:hover,
#view-settings .settings-office-kpi-grid button.settings-kpi:focus-visible {
  border-color: #d9c3ba;
  box-shadow: 0 10px 26px rgba(182, 91, 61, 0.12);
  outline: none;
}

#view-settings .settings-office-kpi-grid article.settings-kpi {
  cursor: default;
}

#view-settings .settings-kpi-office-users .settings-kpi-icon { color: #b65b3d; background: #fdeee7; }
#view-settings .settings-kpi-office-branches .settings-kpi-icon { color: #168047; background: #eaf8f1; }
#view-settings .settings-kpi-office-documents .settings-kpi-icon { color: #2563eb; background: #edf5ff; }
#view-settings .settings-kpi-office-modules .settings-kpi-icon { color: #7c5ce5; background: #f1edff; }

#view-settings .settings-office-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
}

#view-settings .settings-office-panel .panel-head {
  align-items: flex-start;
  justify-content: space-between;
}

#view-settings .settings-office-edit {
  white-space: nowrap;
}

#view-settings .settings-office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  padding: 14px 16px 16px;
}

#view-settings .settings-office-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#view-settings .settings-office-grid .settings-office-wide {
  grid-column: 1 / -1;
}

#view-settings .settings-office-grid > div > span {
  color: #6f7b91;
  font-size: 10px;
  font-weight: 700;
}

#view-settings .settings-office-grid > div > strong {
  display: block;
  min-width: 0;
  color: #172033;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-settings .settings-preference-list {
  display: grid;
  padding: 4px 16px 12px;
}

#view-settings .settings-preference-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf1f4;
}

#view-settings .settings-preference-row:last-child {
  border-bottom: 0;
}

#view-settings .settings-preference-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fdeee7;
  color: #b65b3d;
  font-size: 14px;
  font-style: normal;
}

#view-settings .settings-preference-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#view-settings .settings-preference-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#view-settings .settings-preference-row > div > strong {
  color: #172033;
  font-size: 12px;
  font-weight: 700;
}

#view-settings .settings-preference-row > div > small {
  color: #6f7b91;
  font-size: 10px;
}

#view-settings .settings-preference-row > em {
  color: #3a4657;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

#view-settings .settings-notif-kpi-grid {
  margin-top: 2px;
  margin-bottom: 16px;
}

#view-settings .settings-notif-kpi-grid .settings-kpi {
  border-radius: 16px;
}

#view-settings .settings-kpi-notif-active .settings-kpi-icon { color: var(--rf2-terracotta, #b35a3c); background: var(--rf2-pastel-terracotta, #f7ece7); }
#view-settings .settings-kpi-notif-channels .settings-kpi-icon { color: var(--rf2-green, #60784a); background: var(--rf2-pastel-green, #eaf4ee); }
#view-settings .settings-kpi-notif-critical .settings-kpi-icon { color: var(--rf2-violet, #745a92); background: var(--rf2-pastel-violet, #f0ebf5); font-size: 18px; font-style: normal; }
#view-settings .settings-kpi-notif-sent .settings-kpi-icon { color: var(--rf2-blue-gray, #52718b); background: var(--rf2-pastel-blue, #eaf1f7); }

#view-settings .settings-notif-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

#view-settings .settings-notif-pref-table {
  display: grid;
  padding: 4px 4px 8px;
}

#view-settings .settings-notif-pref-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 64px);
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #8a94a6;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-settings .settings-notif-pref-head span:not(:first-child) {
  text-align: center;
}

#view-settings .settings-notif-pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 64px);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid #edf1f4;
}

#view-settings .settings-notif-pref-row .toggle-on {
  justify-self: center;
}

#view-settings .settings-notif-pref-name {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

#view-settings .settings-notif-pref-name .settings-preference-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  font-size: 12.5px;
}

#view-settings .settings-notif-pref-name > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#view-settings .settings-notif-pref-name strong {
  overflow: hidden;
  color: #172033;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-notif-pref-name small {
  overflow: hidden;
  color: #7b8798;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .toggle-on.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#view-settings .settings-notif-channel-list {
  display: grid;
  padding: 4px 16px 12px;
}

#view-settings .settings-notif-channel-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf1f4;
}

#view-settings .settings-notif-channel-row:last-child {
  border-bottom: 0;
}

#view-settings .settings-notif-channel-row.is-unavailable {
  opacity: 0.55;
}

#view-settings .settings-notif-channel-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#view-settings .settings-notif-channel-row strong {
  color: #172033;
  font-size: 12.5px;
  font-weight: 700;
}

#view-settings .settings-notif-channel-row small {
  overflow: hidden;
  color: #7b8798;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-notif-channel-badge {
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #52637a;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

#view-settings .settings-notif-channel-badge.is-active { background: var(--rf2-pastel-green, #eaf4ee); color: var(--rf2-green, #60784a); }
#view-settings .settings-notif-channel-badge.is-connected { background: #eaf1fb; color: #2563eb; }
#view-settings .settings-notif-channel-badge.is-error { background: var(--rf2-pastel-alert, #f8ede8); color: var(--rf2-alert, #8f3f2e); }
#view-settings .settings-notif-channel-badge.is-neutral { background: #eef2f7; color: #7b8798; }

#view-settings .settings-notif-channel-jump {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 10.5px;
  white-space: nowrap;
}

#view-settings .settings-notif-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
}

/* Integrações — cards de KPI, tabela de conexões, saúde e regras */
#view-settings .settings-integrations-kpi-grid {
  margin-top: 2px;
  margin-bottom: 16px;
  gap: 16px;
}

#view-settings .settings-integrations-kpi-grid .settings-kpi {
  min-height: 100px;
  padding: 16px 18px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(23, 32, 51, 0.05);
}

#view-settings .settings-integrations-kpi-grid .settings-kpi-icon {
  width: 48px;
  height: 48px;
}

#view-settings .settings-integrations-kpi-grid .settings-kpi > div > span {
  font-size: 10.5px;
}

#view-settings .settings-integrations-kpi-grid .settings-kpi > div > strong {
  font-size: 25px;
}

#view-settings .settings-integrations-kpi-grid .settings-kpi > div > small {
  font-size: 10.5px;
}

#view-settings .settings-kpi-integrations-connected .settings-kpi-icon { color: var(--rf2-terracotta, #b35a3c); background: var(--rf2-pastel-terracotta, #f7ece7); }
#view-settings .settings-kpi-integrations-banks .settings-kpi-icon { color: var(--rf2-green, #60784a); background: var(--rf2-pastel-green, #eaf4ee); }
#view-settings .settings-kpi-integrations-apis .settings-kpi-icon { color: #2563eb; background: #edf5ff; }
#view-settings .settings-kpi-integrations-failures .settings-kpi-icon { color: var(--rf2-violet, #745a92); background: var(--rf2-pastel-violet, #f0ebf5); }

#view-settings .settings-integrations-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}

#view-settings .settings-integrations-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#view-settings .settings-integrations-table {
  display: grid;
  padding: 4px 4px 8px;
  min-width: 0;
}

#view-settings .settings-integrations-head {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 96px minmax(0, 1.1fr) 116px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #8a94a6;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-settings .settings-integrations-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 96px minmax(0, 1.1fr) 116px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid #edf1f4;
  min-width: 0;
}

#view-settings .settings-integrations-name {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

#view-settings .settings-integrations-name > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#view-settings .settings-integrations-name strong {
  overflow: hidden;
  color: #172033;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-integrations-name small {
  overflow: hidden;
  color: #7b8798;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-integrations-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

#view-settings .settings-integrations-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#view-settings .settings-integrations-icon-inter { background: #f7860d; }
#view-settings .settings-integrations-icon-asaas { background: #325aca; }
#view-settings .settings-integrations-icon-sicoob { background: #7cb92f; }
#view-settings .settings-integrations-icon-calendar { color: #2563eb; background: #edf5ff; }
#view-settings .settings-integrations-icon-whatsapp { background: #25b358; }

#view-settings .settings-integrations-lastsync {
  overflow: hidden;
  color: #52637a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-integrations-action {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

#view-settings .settings-integrations-action .secondary-button,
#view-settings .settings-integrations-action .ghost-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 10.5px;
  white-space: nowrap;
}

#view-settings .settings-notif-channel-badge.is-warning { background: #fdf3e4; color: #a5670f; }

/* Métricas compactas do Asaas (lacuna nº 6) — escopadas somente a #asaas-tile,
   não afetam as demais linhas de integração (Inter, Sicoob, Google Calendar). */
#asaas-tile.settings-integrations-row {
  align-items: start;
}

#asaas-tile .asaas-mini-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
  margin-top: 10px;
}

#asaas-tile .asaas-mini-metric {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--rf-border, #e7ebf0);
  border-radius: 10px;
  background: var(--rf-page, #f7f8fa);
  min-width: 0;
}

#asaas-tile .asaas-mini-metric span {
  overflow: hidden;
  color: #8a94a6;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#asaas-tile .asaas-mini-metric strong {
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #asaas-tile .asaas-mini-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#view-settings .settings-integrations-logs-empty {
  display: grid;
  gap: 4px;
  margin: 14px 16px 18px;
  padding: 18px;
  border: 1px dashed #e3e9f0;
  border-radius: 12px;
  color: #52637a;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1400px) {
  #view-settings .settings-integrations-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  #view-settings .settings-integrations-head,
  #view-settings .settings-integrations-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    row-gap: 6px;
  }
  #view-settings .settings-integrations-head span:nth-child(3),
  #view-settings .settings-integrations-head span:nth-child(4),
  #view-settings .settings-integrations-row .settings-integrations-lastsync,
  #view-settings .settings-integrations-row .settings-integrations-action {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

#view-settings .settings-integrations-scheduling-panel {
  margin-top: 14px;
}

#view-settings .settings-partner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 4px 16px 18px;
}

#view-settings .settings-partner-left {
  display: grid;
  gap: 16px;
  min-width: 0;
}

#view-settings .settings-partner-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid #e3e9f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.025);
}

#view-settings .settings-partner-blocks-card {
  align-self: stretch;
  align-content: start;
}

#view-settings .settings-partner-card-head {
  display: grid;
  gap: 4px;
}

#view-settings .settings-partner-card-head h3,
#view-settings .settings-partner-card > h3 {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
}

#view-settings .settings-partner-card-head span {
  color: #6f7b91;
  font-size: 12px;
  font-weight: 600;
}

#view-settings .settings-partner-hint {
  color: #6f7b91;
  font-size: 11px;
  line-height: 1.5;
}

#view-settings .settings-partner-hint code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #f1f4f8;
  color: #3a4657;
  font-size: 10.5px;
}

#view-settings .settings-partner-card textarea {
  width: 100%;
  min-height: 92px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  resize: vertical;
}

#view-settings .settings-partner-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

#view-settings .settings-partner-field-grid-dates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#view-settings .settings-partner-card label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #34415a;
  font-size: 12px;
  font-weight: 700;
}

#view-settings .settings-partner-card input,
#view-settings .settings-partner-card select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #e3e9f0;
  border-radius: 9px;
  font: inherit;
  font-size: 12.5px;
  color: #172033;
}

#view-settings .settings-partner-card select[multiple] {
  min-height: 74px;
  padding: 8px 12px;
}

#view-settings .settings-partner-checkbox {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #34415a;
}

#view-settings .settings-partner-checkbox input {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
}

#view-settings .settings-partner-checkbox small {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
}

#view-settings .settings-partner-save {
  justify-self: start;
  min-height: 42px;
  padding: 0 18px;
}

/* Correcao pontual (2026-09-04): botao de acao normal ("Bloquear periodo" -- nao e uma exclusao/acao
   destrutiva, so uma marcacao de indisponibilidade na agenda) usava a cor de marca fixa em vez do
   token de tema -- passa a acompanhar a cor de destaque escolhida em Configuracoes > Interface. */
#view-settings .settings-partner-block-button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--color-accent, #b35a3c);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(179, 90, 60, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

#view-settings .settings-partner-block-button:hover {
  transform: translateY(-1px);
}

#view-settings .settings-partner-block-list {
  color: #6f7b91;
  font-size: 11.5px;
}

#view-settings .settings-partner-status-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

#view-settings .settings-partner-status-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rf2-pastel-green, #eaf4ee);
  color: var(--rf2-green, #60784a);
  font-size: 15px;
  font-weight: 800;
}

#view-settings .settings-partner-status-row strong {
  display: block;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
}

#view-settings .settings-partner-status-row small {
  color: #7b8798;
  font-size: 11px;
}

@media (max-width: 1180px) {
  #view-settings .settings-partner-layout {
    grid-template-columns: 1fr;
  }
  #view-settings .settings-partner-field-grid {
    grid-template-columns: 1fr;
  }
}

#view-settings .settings-notif-escalation-panel .panel-head,
#view-settings .settings-notif-delivery-panel .panel-head {
  align-items: flex-start;
  justify-content: space-between;
}

#view-settings .settings-notif-escalation-empty,
#view-settings .settings-notif-delivery-empty {
  display: grid;
  gap: 4px;
  margin: 14px 16px 18px;
  padding: 18px;
  border: 1px dashed #e3e9f0;
  border-radius: 12px;
  color: #52637a;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

#view-settings .settings-notif-escalation-empty small,
#view-settings .settings-notif-delivery-empty small {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
}

#view-settings .settings-layout,
#view-settings .settings-lower-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 14px !important;
  margin: 0 0 14px !important;
}

#view-settings .team-panel,
#view-settings .access-panel,
#view-settings .settings-levels-panel,
#view-settings .settings-security-panel {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e3e9f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.025) !important;
}

#view-settings .team-panel > .panel-head,
#view-settings .access-panel > .panel-head,
#view-settings .settings-levels-panel > .panel-head,
#view-settings .settings-security-panel > .panel-head {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #e8edf2 !important;
}

#view-settings .team-panel .panel-head h2,
#view-settings .access-panel .panel-head h2,
#view-settings .settings-levels-panel .panel-head h2,
#view-settings .settings-security-panel .panel-head h2 {
  display: block !important;
  margin: 0 !important;
  color: #172033 !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

#view-settings .team-panel .panel-head span,
#view-settings .access-panel .panel-head span,
#view-settings .settings-levels-panel .panel-head span,
#view-settings .settings-security-panel .panel-head span {
  display: block !important;
  margin-top: 3px !important;
  color: #7b8798 !important;
  font-size: 12px !important;
}

#view-settings .team-panel .panel-head .primary-button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

#view-settings .team-table-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px 96px 20px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #e8edf2 !important;
  background: #fafbfc !important;
  color: #8a94a6 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#view-settings .team-list {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

#view-settings .team-row {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px 96px 20px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf1f4 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#view-settings .team-row:last-child { border-bottom: 0 !important; }
#view-settings .team-row.active,
#view-settings .team-row:hover { background: #f7f9fc !important; }

#view-settings .team-row-person {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 12px !important;
}

#view-settings .team-avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 auto !important;
  font-size: 12px !important;
}

#view-settings .team-member-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

#view-settings .team-member-copy strong {
  overflow: hidden;
  color: #172033 !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .team-member-copy small {
  overflow: hidden;
  color: #7b8798 !important;
  font-size: 11.5px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .team-row-role { min-width: 0; }

#view-settings .team-row-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #168047 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#view-settings .team-row-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #16a34a;
}

#view-settings .team-row-actions {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 500;
  text-align: right;
}

#view-settings .settings-selected-profile {
  max-width: 240px;
  overflow: hidden;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f2f5f9;
  color: #52637a;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .access-table-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #e8edf2 !important;
  background: #fafbfc !important;
  color: #8a94a6 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#view-settings .access-list {
  display: block !important;
  padding: 0 !important;
}

#view-settings .access-list .access-row {
  min-height: 54px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-bottom: 1px solid #edf1f4 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#view-settings .access-list .access-row:last-child { border-bottom: 0 !important; }
#view-settings .access-list .access-row:hover { background: #f7f9fc !important; }

#view-settings .toggle-on {
  width: 38px !important;
  height: 22px !important;
  padding: 3px !important;
  flex: 0 0 auto !important;
}

#view-settings .toggle-on::after {
  width: 16px !important;
  height: 16px !important;
}

#view-settings .access-list > .partner-access-card,
#view-settings .access-list > .partner-module-summary,
#view-settings .access-list > .settings-user-danger,
#view-settings .access-list > .settings-empty {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

#view-settings .settings-note { margin: 0 !important; padding: 12px 18px !important; border-top: 1px solid #edf1f4; color: #7b8798 !important; font-size: 12px !important; }

#view-settings .settings-lower-grid { margin-bottom: 0 !important; }

#view-settings .settings-level-list,
#view-settings .settings-security-list {
  display: grid;
  padding: 4px 18px 14px;
}

#view-settings .settings-level-list > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  border-bottom: 1px solid #edf1f4;
}

#view-settings .settings-level-list > div:last-child { border-bottom: 0; }

#view-settings .settings-role-badge {
  justify-self: start;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#view-settings .settings-role-badge.is-partner { color: #5b4acb; background: #efedff; }
#view-settings .settings-role-badge.is-staff { color: #b65d08; background: #fff0dd; }
#view-settings .settings-role-badge.is-external { color: #52637a; background: #eef2f7; }

#view-settings .settings-level-list p {
  display: grid;
  gap: 3px;
  margin: 0;
}

#view-settings .settings-level-list p strong { color: #344054; font-size: 13px; }
#view-settings .settings-level-list p small { color: #7b8798; font-size: 11.5px; }
#view-settings .settings-level-list > div > span:last-child { color: #94a3b8; font-size: 18px; }

#view-settings .settings-security-list > div,
#view-settings .settings-security-list > button {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px;
  border: 0;
  border-bottom: 1px solid #edf1f4;
  background: transparent;
  color: #344054;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

#view-settings .settings-security-list > button { cursor: pointer; }
#view-settings .settings-security-list > button:last-child { border-bottom: 0; }
#view-settings .settings-security-list > button:disabled { cursor: not-allowed; opacity: 0.62; }
#view-settings .settings-security-list > button strong { color: #94a3b8; font-size: 18px; font-weight: 500; }
#view-settings .settings-security-list strong#settings-last-access { color: #172033; font-size: 13px; font-weight: 750; }

/* Interface — temas globais */
#view-settings .settings-kpi-interface-saved .settings-kpi-icon { color: var(--rf2-green, #168047); background: var(--rf2-pastel-green, #eaf8f1); }
#view-settings .settings-kpi-interface-components .settings-kpi-icon { color: #7c5ce5; background: #f1edff; }
#view-settings .settings-kpi-interface-prefs .settings-kpi-icon { color: #2563eb; background: #edf5ff; }

#view-settings .settings-interface-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 14px;
  margin-bottom: 14px;
}

#view-settings .settings-interface-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 14px;
}

#view-settings .settings-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 16px 16px;
}

#view-settings .settings-theme-option {
  display: grid;
  gap: 10px;
  padding: 12px;
  text-align: left;
  border: 1.5px solid #e3e9f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#view-settings .settings-theme-option:hover {
  border-color: #d9c3ba;
}

#view-settings .settings-theme-option.is-selected {
  border-color: var(--color-primary, #b65b3d);
  box-shadow: 0 0 0 1px var(--color-primary, #b65b3d);
}

#view-settings .settings-theme-option-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

#view-settings .settings-theme-radio {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 1.5px solid #c7d0dc;
  border-radius: 50%;
  background: #fff;
}

#view-settings .settings-theme-option.is-selected .settings-theme-radio {
  border-color: var(--color-primary, #b65b3d);
  background: var(--color-primary, #b65b3d);
  box-shadow: inset 0 0 0 2.5px #fff;
}

#view-settings .settings-theme-option-head strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-theme-active-badge {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rf2-pastel-green, #eaf8f1);
  color: var(--rf2-green, #168047);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

#view-settings .settings-theme-thumb {
  display: grid;
  grid-template-columns: 16px 1fr;
  height: 62px;
  overflow: hidden;
  border: 1px solid var(--tp-border, #e5e7eb);
  border-radius: 8px;
  background: var(--tp-bg, #fafafb);
}

#view-settings .settings-theme-thumb-side {
  background: var(--tp-primary, #c86b4d);
}

#view-settings .settings-theme-thumb-body {
  display: grid;
  grid-template-rows: 10px 1fr;
  min-width: 0;
}

#view-settings .settings-theme-thumb-top {
  border-bottom: 1px solid var(--tp-border, #e5e7eb);
  background: var(--tp-surface, #fff);
}

#view-settings .settings-theme-thumb-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 12px;
  gap: 4px;
  padding: 5px;
}

#view-settings .settings-theme-thumb-card {
  grid-column: 1 / -1;
  border-radius: 3px;
  background: var(--tp-surface, #fff);
  box-shadow: inset 0 0 0 1px var(--tp-border, #e5e7eb);
}

#view-settings .settings-theme-thumb-table {
  border-radius: 3px;
  background: var(--tp-surface, #fff);
  box-shadow: inset 0 0 0 1px var(--tp-border, #e5e7eb);
}

#view-settings .settings-theme-thumb-button {
  border-radius: 3px;
  background: var(--tp-primary-dark, var(--tp-primary, #b65b3d));
}

#view-settings .settings-theme-swatches {
  display: flex;
  gap: 5px;
}

#view-settings .settings-theme-swatches i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

#view-settings .settings-theme-option-create {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100%;
  border-style: dashed;
  color: #7b8798;
  font-size: 11.5px;
  font-weight: 700;
}

#view-settings .settings-theme-create-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f3f6;
  color: #52637a;
  font-size: 16px;
}

#view-settings .settings-theme-preview-panel .panel-head {
  align-items: center;
  justify-content: space-between;
}

#view-settings .settings-theme-preview-panel.is-fullscreen {
  position: fixed;
  z-index: 300;
  inset: 18px;
  overflow: auto;
  box-shadow: 0 30px 60px rgba(10, 15, 25, 0.35);
}

#view-settings .settings-theme-preview-frame {
  display: grid;
  grid-template-columns: 42px 1fr;
  min-height: 260px;
  margin: 12px 16px 16px;
  overflow: hidden;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: var(--color-background, #fafafb);
}

#view-settings .settings-theme-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px 0;
  background: var(--color-primary, #b65b3d);
}

#view-settings .settings-theme-preview-sidebar span {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.28);
}

#view-settings .settings-theme-preview-main {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

#view-settings .settings-theme-preview-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 0 var(--color-border, #e5e7eb);
}

#view-settings .settings-theme-preview-search {
  overflow: hidden;
  flex: 1;
  color: var(--color-text-muted, #6b7280);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-theme-preview-pill {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--color-background, #fafafb);
  color: var(--color-text, #111827);
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
}

#view-settings .settings-theme-preview-bell {
  font-size: 10px;
}

#view-settings .settings-theme-preview-cta {
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--color-primary, #b65b3d);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  white-space: nowrap;
}

#view-settings .settings-theme-preview-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#view-settings .settings-theme-preview-card {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  background: var(--color-surface, #fff);
  box-shadow: 0 0 0 1px var(--color-border, #e5e7eb);
}

#view-settings .settings-theme-preview-card b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary, #b65b3d);
  opacity: 0.85;
}

#view-settings .settings-theme-preview-card small {
  color: var(--color-text-muted, #6b7280);
  font-size: 8px;
}

#view-settings .settings-theme-preview-table {
  display: grid;
  align-content: start;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-surface, #fff);
  box-shadow: 0 0 0 1px var(--color-border, #e5e7eb);
}

#view-settings .settings-theme-preview-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text, #111827);
  font-size: 8.5px;
}

#view-settings .settings-theme-preview-row:last-child {
  border-bottom: 0;
}

#view-settings .settings-theme-preview-row-head {
  color: var(--color-text-muted, #6b7280);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#view-settings .settings-theme-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  padding: 12px 16px 16px;
}

#view-settings .settings-theme-color-field {
  display: grid;
  gap: 6px;
}

#view-settings .settings-theme-color-name {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #52637a;
  font-size: 11px;
  font-weight: 750;
}

#view-settings .settings-theme-color-name code {
  overflow: hidden;
  color: #9aa5b6;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-theme-color-input {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
}

#view-settings .settings-theme-color-input input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

#view-settings .settings-theme-color-input input[type="text"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  color: #172033;
  font-size: 11.5px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
}

#view-settings .settings-theme-apply-body {
  display: grid;
  gap: 16px;
  padding: 12px 16px 4px;
}

#view-settings .settings-theme-scope {
  display: grid;
  gap: 8px;
}

#view-settings .settings-theme-scope-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  background: #fff;
  color: #52637a;
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
}

#view-settings .settings-theme-scope-option .settings-preference-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f1f3f6;
  color: #52637a;
  font-size: 12px;
}

#view-settings .settings-theme-scope-option .settings-preference-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#view-settings .settings-theme-scope-option.is-active {
  border-color: var(--color-primary, #b65b3d);
  background: color-mix(in srgb, var(--color-primary, #b65b3d) 8%, #fff);
  color: #172033;
}

#view-settings .settings-theme-scope-option.is-active .settings-preference-icon {
  background: var(--color-primary, #b65b3d);
  color: #fff;
}

#view-settings .settings-theme-reset {
  color: #7b8798;
}

#view-settings .settings-theme-visual-options {
  display: grid;
  gap: 8px;
}

#view-settings .settings-theme-visual-title {
  color: #8a94a6;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-settings .settings-theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

#view-settings .settings-theme-toggle-row strong {
  display: block;
  color: #172033;
  font-size: 11.5px;
  font-weight: 700;
}

#view-settings .settings-theme-toggle-row small {
  display: block;
  color: #7b8798;
  font-size: 9.5px;
}

#view-settings .settings-theme-apply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px 16px;
}

/* Modal "Personalizar tema" — aberto ao clicar em "Criar novo tema" em
   Configurações > Interface. Reaproveita .settings-theme-preview-frame e
   .settings-theme-color-input (já definidos acima, escopados a
   #view-settings) para herdar o mesmo visual da pré-visualização e dos
   campos de cor já usados no painel inline. */
dialog.expense-modal.theme-customize-dialog {
  width: min(1400px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
}

.theme-customize-header {
  align-items: flex-start;
}

.theme-customize-eyebrow {
  margin: 0 0 4px;
  color: var(--color-primary, #b65b3d);
  letter-spacing: 0.06em;
}

.theme-customize-header h2 {
  margin: 0 0 4px;
}

.theme-customize-subtitle {
  display: block;
  color: var(--color-text-muted, #6b7280);
  font-size: 12.5px;
}

.theme-customize-body {
  display: grid;
  gap: 18px;
  padding: 18px;
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.theme-customize-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.theme-dialog-preset {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-dialog-preset:hover {
  border-color: color-mix(in srgb, var(--color-primary, #b65b3d) 45%, var(--color-border, #e5e7eb));
}

.theme-dialog-preset.is-selected {
  border-color: var(--color-primary, #b65b3d);
  box-shadow: 0 0 0 1px var(--color-primary, #b65b3d);
}

.theme-dialog-preset-swatch {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.theme-dialog-preset-name {
  color: var(--color-text, #172033);
  font-size: 13px;
  font-weight: 700;
}

.theme-dialog-preset-check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary, #b65b3d);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.theme-customize-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.theme-customize-stack {
  display: grid;
  gap: 16px;
}

.theme-customize-card {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  background: var(--color-surface, #fff);
  overflow: hidden;
}

.theme-customize-card h3 {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text, #172033);
  font-size: 13.5px;
  font-weight: 750;
}

.theme-customize-preview-card .theme-customize-preview-frame {
  margin: 12px;
}

.theme-customize-fields {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.theme-customize-fields-status {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-customize-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
}

.theme-customize-field .settings-theme-color-input {
  grid-template-columns: 34px 1fr;
}

.theme-customize-field .settings-theme-color-input input[type="text"] {
  width: 100%;
  min-width: 0;
}

.theme-customize-field-copy strong {
  display: block;
  color: var(--color-text, #172033);
  font-size: 12.5px;
  font-weight: 700;
}

.theme-customize-field-copy small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted, #6b7280);
  font-size: 11px;
  line-height: 1.4;
}

.theme-customize-actions {
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px) {
  .theme-customize-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-customize-grid {
    grid-template-columns: 1fr;
  }

  .theme-customize-fields-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .theme-customize-field {
    grid-template-columns: 1fr;
  }
}

/* Financeiro */
#view-settings .settings-kpi-financial-accounts .settings-kpi-icon { color: var(--rf2-terracotta, #b35a3c); background: var(--rf2-pastel-terracotta, #f7ece7); }
#view-settings .settings-kpi-financial-costcenters .settings-kpi-icon { color: var(--rf2-green, #168047); background: var(--rf2-pastel-green, #eaf8f1); }
#view-settings .settings-kpi-financial-categories .settings-kpi-icon { color: #2563eb; background: #edf5ff; }
#view-settings .settings-kpi-financial-fiscal .settings-kpi-icon { color: #7c5ce5; background: #f1edff; }

#view-settings .settings-financial-layout {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: 14px;
  min-width: 0;
}

#view-settings .settings-financial-column {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}

#view-settings .settings-financial-accounts-panel .panel-head,
#view-settings .settings-financial-categories-panel .panel-head {
  align-items: center;
  justify-content: space-between;
}

#view-settings .settings-financial-params-list {
  display: grid;
  padding: 4px 16px 6px;
  min-width: 0;
}

#view-settings .settings-financial-param-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #edf1f4;
}

#view-settings .settings-financial-param-row:first-child { border-top: 0; }

#view-settings .settings-financial-param-row .settings-preference-icon {
  width: 30px;
  height: 30px;
  font-size: 10.5px;
  font-weight: 800;
}

#view-settings .settings-financial-param-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#view-settings .settings-financial-param-copy strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-financial-param-copy small {
  overflow: hidden;
  color: #7b8798;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-financial-category-table,
#view-settings .settings-financial-account-table {
  display: grid;
  min-width: 0;
  padding: 4px 4px 6px;
}

#view-settings .settings-financial-category-head,
#view-settings .settings-financial-account-head {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #8a94a6;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-settings .settings-financial-category-head { grid-template-columns: minmax(0, 1fr) 88px 108px; }
#view-settings .settings-financial-account-head { grid-template-columns: minmax(0, 1fr) 108px 128px; }

#view-settings .settings-financial-category-head span:not(:first-child),
#view-settings .settings-financial-account-head span:not(:first-child) {
  text-align: right;
}

#view-settings .category-summary,
#view-settings .account-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  gap: 0;
}

#view-settings .category-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 108px;
  align-items: center;
  align-content: center;
  gap: 10px;
  min-height: auto;
  padding: 9px 14px;
  border: 0;
  border-top: 1px solid #edf1f4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-settings .category-card-name {
  overflow: hidden;
  color: #172033;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .category-card-type { text-align: center; }

#view-settings .category-card > strong {
  overflow: hidden;
  color: #172033;
  font-size: 11.5px;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 128px;
  align-items: center;
  align-content: center;
  gap: 10px;
  min-height: auto;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid #edf1f4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-settings .account-card:first-child { border-top: 0; }

#view-settings .account-card-id {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#view-settings .account-card-id strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .account-card-id span {
  overflow: hidden;
  color: #7b8798;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .account-card-balance strong {
  display: block;
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .account-card-status { text-align: right; }

#view-settings .settings-financial-alert-list {
  display: grid;
  padding: 4px 16px 6px;
  min-width: 0;
}

#view-settings .settings-financial-alert-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 132px 40px;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #edf1f4;
  opacity: 0.78;
}

#view-settings .settings-financial-alert-row:first-child { border-top: 0; }

#view-settings .settings-financial-alert-row .settings-preference-icon {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
}

#view-settings .settings-financial-alert-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#view-settings .settings-financial-alert-copy strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-financial-alert-copy small {
  overflow: hidden;
  color: #7b8798;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-settings .settings-financial-alert-field {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #f7f8fa;
  color: #8a94a6;
  font-size: 10.5px;
}

#view-settings .settings-financial-alert-field:disabled { cursor: not-allowed; }

@media (max-width: 1240px) {
  #view-settings .settings-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  #view-settings .settings-layout,
  #view-settings .settings-lower-grid { grid-template-columns: 1fr !important; }
  #view-settings .settings-office-layout { grid-template-columns: 1fr; }
  #view-settings .settings-notif-layout,
  #view-settings .settings-notif-lower-grid { grid-template-columns: 1fr; }
  #view-settings .settings-interface-layout,
  #view-settings .settings-interface-lower-grid { grid-template-columns: 1fr; }
  #view-settings .settings-theme-options { grid-template-columns: 1fr; }
  #view-settings .settings-financial-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  #view-settings .settings-notif-pref-head,
  #view-settings .settings-notif-pref-row { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); gap: 6px; }
  #view-settings .settings-notif-pref-name small { display: none; }
}

@media (max-width: 760px) {
  #view-settings .team-table-head { display: none !important; }
  #view-settings .team-row,
  #view-settings .team-table-head { grid-template-columns: minmax(0, 1fr) auto 20px !important; }
  #view-settings .team-row-status { display: none !important; }
}

@media (max-width: 620px) {
  #view-settings .settings-kpi-grid { grid-template-columns: 1fr; }
  #view-settings .settings-office-grid { grid-template-columns: 1fr; }
  #view-settings .settings-theme-color-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  html body:not(.auth-locked) .app-shell {
    padding: 20px 16px 30px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel .overdue-panel-head {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .overdue-dashboard-panel #dashboard-receivable-summary {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* Cabeçalho global — mesma composição em todos os módulos. */
html body:not(.auth-locked) .topbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(700px, 880px) !important;
  align-items: start !important;
  gap: 24px !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
}

html body:not(.auth-locked) .topbar > div:first-child {
  min-width: 0 !important;
}

html body:not(.auth-locked) .topbar-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  justify-self: end !important;
  width: 100% !important;
  max-width: 880px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  position: relative !important;
  overflow: visible !important;
}

html body:not(.auth-locked) .topbar-actions > * {
  min-width: 0 !important;
  margin: 0 !important;
}

html body:not(.auth-locked) .global-search {
  order: 1 !important;
  flex: 1 1 360px !important;
  width: auto !important;
  min-width: 260px !important;
  max-width: 410px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 11px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.035) !important;
}

html body:not(.auth-locked) .global-search input {
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

html body:not(.auth-locked) .global-search .search-icon {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
}

html body:not(.auth-locked) .global-search kbd {
  flex: 0 0 auto !important;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: var(--rf-sidebar, #f2f3f4) !important;
  color: var(--rf-disabled, #9aa6b8) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

html body:not(.auth-locked) .top-period-control {
  order: 2 !important;
  display: flex !important;
  flex: 0 0 184px !important;
  align-items: center !important;
  width: 184px !important;
  min-width: 184px !important;
  max-width: 184px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px 0 12px !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 11px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.03) !important;
  overflow: hidden !important;
}

html body:not(.auth-locked) .top-period-control > span,
html body:not(.auth-locked) .sync-caption {
  display: none !important;
}

html body:not(.auth-locked) .top-period-control .period-icon {
  display: block !important;
  flex: 0 0 17px !important;
  width: 17px !important;
  height: 17px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
}

html body:not(.auth-locked) .top-period-control select {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 22px 0 9px !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--rf-text, #172033) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.auth-locked) .notification-wrap {
  order: 3 !important;
  display: flex !important;
  flex: 0 0 52px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 44px !important;
  padding-left: 8px !important;
  position: relative !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
  z-index: 5 !important;
}

html body:not(.auth-locked) .notification-button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.auth-locked) .notification-button:hover {
  background: var(--rf-primary-soft, #eaf0f6) !important;
}

html body:not(.auth-locked) .notification-button .notification-icon {
  width: 19px !important;
  height: 19px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
}

html body:not(.auth-locked) .header-user-card {
  order: 4 !important;
  display: inline-flex !important;
  flex: 0 0 208px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 208px !important;
  min-width: 208px !important;
  max-width: 208px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 3px 2px 3px 10px !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body:not(.auth-locked) .header-user-card .header-avatar {
  order: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: var(--rf-primary, #17324d) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html body:not(.auth-locked) .header-user-card > span:not(.header-avatar) {
  order: 1 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

html body:not(.auth-locked) .header-user-card strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.auth-locked) .header-user-card small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.auth-locked) .header-user-card::after {
  content: "" !important;
  order: 2 !important;
  flex: 0 0 6px !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 5px 3px auto !important;
  border-right: 1.5px solid var(--rf-text-secondary, #6f7b91) !important;
  border-bottom: 1.5px solid var(--rf-text-secondary, #6f7b91) !important;
  transform: rotate(45deg) !important;
}

@media (max-width: 1280px) {
  html body:not(.auth-locked) .topbar {
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }

  html body:not(.auth-locked) .topbar-actions {
    justify-self: end !important;
  }
}

@media (max-width: 840px) {
  html body:not(.auth-locked) .topbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    grid-template-rows: 44px 44px !important;
    gap: 10px 12px !important;
    max-width: none !important;
  }

  html body:not(.auth-locked) .global-search {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body:not(.auth-locked) .notification-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body:not(.auth-locked) .top-period-control {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body:not(.auth-locked) .header-user-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 4px 8px !important;
    border-left: 0 !important;
  }

  html body:not(.auth-locked) .header-user-card > span:not(.header-avatar),
  html body:not(.auth-locked) .header-user-card::after {
    display: none !important;
  }
}

/* Acabamento entre a barra lateral e a área principal. */
html body:not(.auth-locked) .app-shell {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 26px 0 0 0 !important;
  background-clip: padding-box !important;
  box-shadow: -10px -2px 28px rgba(23, 32, 51, 0.035) !important;
}

@media (max-width: 900px) {
  html body:not(.auth-locked) .app-shell {
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(23, 32, 51, 0.035) !important;
  }
}

/* Hotfix final do topo e do encontro entre lateral e conteúdo.
   A especificidade desta seção neutraliza regras legadas do Painel. */
html body[data-view]:not(.auth-locked) {
  background: var(--rf-sidebar, #f2f3f4) !important;
}

html body[data-view]:not(.auth-locked) main.app-shell {
  min-width: 0 !important;
  min-height: 100vh !important;
  background: var(--rf-page, #fafbfc) !important;
  border-radius: 28px 0 0 0 !important;
  background-clip: padding-box !important;
  box-shadow: -10px -3px 30px rgba(23, 32, 51, 0.055) !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) minmax(764px, 900px) !important;
  align-items: start !important;
  gap: 24px !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .topbar-actions {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) 220px 48px 220px !important;
  grid-template-rows: 44px !important;
  align-items: center !important;
  gap: 12px !important;
  justify-self: end !important;
  width: 100% !important;
  max-width: 900px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Painel financeiro — topbar usa a largura útil da área principal (composição preservada). */
@media (min-width: 1500px) {
  html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar {
    grid-template-columns: minmax(260px, max-content) minmax(900px, 1fr) !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-actions {
    max-width: none !important;
  }
}

/* Topbar compacta — especificação visual "primeira dobra" (somente sócios,
   Painel financeiro). Altura total 78-86px, saudação à esquerda, busca +
   data + notificações + Novo registro à direita, cartão de usuário oculto
   (segue disponível no rodapé do sidebar). */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar {
  min-height: 82px !important;
  align-items: center !important;
  margin: 0 0 20px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar h1 {
  font-size: clamp(25px, 1.5vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  color: var(--rf2-text, #1c2737) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .page-subtitle {
  margin-top: 3px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--rf2-text-secondary, #718096) !important;
}

/* Busca — 420-520px, 46px, radius 14, fundo cinza claro, sem borda pesada. */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .global-search {
  flex: 0 1 480px !important;
  width: 100% !important;
  min-width: 320px !important;
  max-width: 520px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: #f2f4f6 !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .global-search input {
  height: 44px !important;
  font-size: 13px !important;
  background: transparent !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .global-search kbd {
  background: #e4e8eb !important;
  color: #8a95a6 !important;
}

/* Data (período) — 46px, radius 14, fundo cinza claro. */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .top-period-control {
  height: 46px !important;
  min-height: 46px !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: #f3f4f5 !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .top-period-control select {
  font-size: 13px !important;
}

/* Notificações — 46x46, radius 14, fundo cinza claro. */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .notification-wrap {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  border-left: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .notification-button {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  background: #f2f4f6 !important;
}

/* Novo registro — 46px altura, ~160px largura, terracota (não navy). */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  width: 160px !important;
  min-width: 150px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
}

/* Cartão de usuário — oculto na topbar do Painel financeiro dos sócios.
   Continua no DOM (lógica/eventos intactos); usuário acessível pelo
   rodapé do sidebar (#sidebar-user-card, inalterado). */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .header-user-card,
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .header-user-dropdown {
  display: none !important;
}

/* Sem o cartão de usuário, a última faixa do grid de ações fica livre —
   redistribui o espaço entre busca/data/notificações/Novo registro. */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  grid-template-columns: none !important;
}

@media (max-width: 1420px) {
  html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .topbar-actions > * {
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .sync-caption {
  display: none !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .global-search {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .global-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .global-search input::placeholder {
  color: var(--rf-icon, #cbd5e1) !important;
  font-size: 13px !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .top-period-control {
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px 0 12px !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  overflow: hidden !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .top-period-control > span {
  display: none !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .top-period-control .period-icon,
html body[data-view]:not(.auth-locked) main.app-shell header.topbar .top-period-control .period-icon use {
  display: block !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .top-period-control select {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 16px 0 9px !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--rf-text, #172033) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 42px !important;
  text-align: left !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .notification-wrap {
  grid-column: 3 !important;
  grid-row: 1 !important;
  order: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 44px !important;
  padding: 0 !important;
  position: relative !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
  z-index: 5 !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .notification-button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* Painel financeiro — botão "Novo registro" na topbar (somente sócios, view banking). */
html body:not(.auth-locked) main.app-shell header.topbar .topbar-new-record {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-actions {
  grid-template-columns: minmax(240px, 1fr) 190px 48px 160px 200px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .top-period-control {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  grid-column: 4 !important;
  grid-row: 1 !important;
  order: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rf-primary, #172033) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 20px rgba(23, 32, 51, 0.18) !important;
  cursor: pointer !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: #0e1522 !important;
  outline: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-icon {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-chevron {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .header-user-card {
  grid-column: 5 !important;
  order: 5 !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card {
  grid-column: 4 !important;
  grid-row: 1 !important;
  order: 4 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 3px 2px 3px 10px !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card .header-avatar {
  order: 0 !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card > span:not(.header-avatar) {
  order: 1 !important;
  display: flex !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card::after {
  order: 2 !important;
}

@media (max-width: 1420px) {
  html body[data-view]:not(.auth-locked) main.app-shell header.topbar {
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .topbar-actions {
    justify-self: end !important;
  }
}

@media (max-width: 940px) {
  html body[data-view]:not(.auth-locked) main.app-shell {
    border-radius: 24px 24px 0 0 !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .topbar-actions {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    grid-template-rows: 44px 44px !important;
    gap: 10px 12px !important;
    max-width: none !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .global-search {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .notification-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .top-period-control {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 4px 6px !important;
    border-left: 0 !important;
  }

  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card > span:not(.header-avatar),
  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card::after {
    display: none !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
    display: none !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-actions {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .header-user-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* Menu do usuário no topo. */
html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card {
  cursor: pointer !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-card[aria-expanded="true"]::after {
  margin-bottom: -3px !important;
  transform: rotate(225deg) !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown {
  display: grid !important;
  width: 172px !important;
  min-width: 172px !important;
  padding: 6px !important;
  position: absolute !important;
  top: 52px !important;
  right: 0 !important;
  z-index: 100 !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 11px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 16px 34px rgba(23, 32, 51, 0.13) !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown[hidden] {
  display: none !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--rf-error, #ef4444) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown button:hover,
html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown button:focus-visible {
  background: var(--rf-error-bg, #fef2f2) !important;
  outline: none !important;
}

@media (max-width: 940px) {
  html body[data-view]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown {
    top: 100px !important;
  }
}

/* Contas — painel final compacto, com três instituições na mesma linha. */
html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel {
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 13px 14px 14px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 13px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 10px 26px rgba(23, 32, 51, 0.035) !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: 0 2px !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-head h2 {
  margin: 0 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-manage-link {
  flex: 0 0 auto !important;
  min-height: 24px !important;
  margin: -4px -2px -4px 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--rf-link, #1f4e79) !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-manage-link:hover,
html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-manage-link:focus-visible {
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: var(--rf-primary-hover, #12273d) !important;
  outline: none !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 8px !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 10px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: none !important;
  color: var(--rf-text, #172033) !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card.pending {
  border-color: var(--rf-border, #e6ebf1) !important;
  background: var(--rf-surface, #ffffff) !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card:hover,
html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card:focus-visible {
  border-color: #d7e1eb !important;
  background: #fbfcfd !important;
  box-shadow: 0 7px 18px rgba(23, 32, 51, 0.055) !important;
  outline: none !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .bank-wordmark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 62px !important;
  min-width: 0 !important;
  height: 30px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .bank-wordmark-inter {
  color: #f97316 !important;
  font-size: 18px !important;
  text-transform: lowercase !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .bank-wordmark-asaas {
  color: #175ac6 !important;
  font-size: 13px !important;
  letter-spacing: -0.06em !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .bank-wordmark-sicoob {
  gap: 4px !important;
  color: #216a67 !important;
  font-size: 10px !important;
  letter-spacing: -0.03em !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .bank-wordmark-sicoob i {
  width: 15px !important;
  height: 15px !important;
  border: 5px solid #62b32e !important;
  border-right-color: #0d9488 !important;
  border-radius: 3px 9px 3px 9px !important;
  transform: rotate(45deg) !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-content {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-head {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-head strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-content > strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-content > small {
  display: block !important;
  overflow: hidden !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  html body[data-view="banking"]:not(.auth-locked) main.app-shell #view-banking .accounts-dashboard-panel .bank-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Recebimentos — composição operacional inspirada na referência aprovada. */
html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar {
  margin-bottom: 22px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar h1 {
  font-size: clamp(27px, 2.2vw, 34px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables.view.active {
  display: grid !important;
  width: 100% !important;
  max-width: 1540px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  gap: 14px !important;
}

/* Recebimentos — topbar fixa ao rolar, com fundo sólido e divisória.
   Cartão "Sócios" ocultado apenas nesta view (mesmo padrão já usado no
   Painel para o header-user-card); o botão real fica no lugar dele.
   O sticky "top:0" gruda na borda do padding-box do contêiner rolante
   (main.app-shell tem padding-top:28px), não na borda real da área
   visível de rolagem — por isso sobrava uma faixa de ~28px no topo por
   onde o conteúdo rolado aparecia por cima da topbar (margin-top
   negativo no filho não desloca essa referência, pois o padding do pai
   não colapsa com margens do filho). Correção real: zera o padding-top
   do contêiner apenas nesta view e devolve o mesmo espaço como
   padding-top da própria topbar — o layout visual (posição do título e
   dos controles) permanece idêntico, mas agora a caixa da topbar nasce
   na borda real do contêiner e cobre 100% da rolagem. */
html body[data-view="receivables"]:not(.auth-locked) main.app-shell {
  padding-top: 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  background: var(--rf-page, #f7f8fa) !important;
  padding-top: 28px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

@media (max-width: 1180px) {
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell {
    padding-top: 0 !important;
  }

  html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar {
    padding-top: 24px !important;
  }
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar .header-user-card,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown,
html body[data-view="settings"]:not(.auth-locked) main.app-shell header.topbar .header-user-card,
html body[data-view="settings"]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown {
  display: none !important;
}

/* Topbar da view Configurações: reaproveita o mesmo botão/handler "Novo
   registro" já usado no Painel/Clientes (mesmo elemento, apenas tornado
   visível via CSS aqui — nenhuma lógica nova). */
html body[data-view="settings"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 160px !important;
  min-width: 150px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
  cursor: pointer !important;
}

html body[data-view="settings"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="settings"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
  outline: none !important;
}

html body[data-view="settings"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-icon {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="settings"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-chevron {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* O botão real fica fisicamente na topbar compartilhada; por padrão some
   em qualquer outra view (mesmo padrão do .topbar-new-record) e só é
   exibido/posicionado quando a view ativa é "receivables". */
html body:not(.auth-locked) main.app-shell header.topbar .receivable-new-cta {
  display: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar .receivable-new-cta {
  grid-column: 4 !important;
  grid-row: 1 !important;
  order: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(179, 90, 60, 0.2) !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar .receivable-new-cta:hover,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar .receivable-new-cta:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell header.topbar .receivable-new-cta-icon {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Previsões — topbar fixa ao rolar, mesmo padrão já aprovado em Recebimentos:
   cartão de usuário oculto apenas nesta view, botão real "Nova previsão"
   fica fisicamente na topbar compartilhada (mesmo elemento em todas as
   views, só é exibido/posicionado quando data-view="forecasts"). */
html body[data-view="forecasts"]:not(.auth-locked) main.app-shell {
  padding-top: 0 !important;
}

html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  background: var(--rf-page, #f7f8fa) !important;
  padding-top: 28px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

@media (max-width: 1180px) {
  html body[data-view="forecasts"]:not(.auth-locked) main.app-shell {
    padding-top: 0 !important;
  }

  html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar {
    padding-top: 24px !important;
  }
}

html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar .header-user-card,
html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown {
  display: none !important;
}

html body:not(.auth-locked) main.app-shell header.topbar .forecast-new-cta {
  display: none !important;
}

html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar .forecast-new-cta {
  grid-column: 4 !important;
  grid-row: 1 !important;
  order: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(179, 90, 60, 0.2) !important;
  cursor: pointer !important;
}

html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar .forecast-new-cta:hover,
html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar .forecast-new-cta:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
}

html body[data-view="forecasts"]:not(.auth-locked) main.app-shell header.topbar .forecast-new-cta-icon {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="forecasts"]:not(.auth-locked) .command-bar {
  display: none !important;
}

/* Despesas — topbar fixa ao rolar, mesmo padrão aprovado em Recebimentos/Previsões:
   cartão de usuário oculto apenas nesta view, botão real "Novo registro" fica
   fisicamente na topbar compartilhada (mesmo elemento em todas as views, só é
   exibido/posicionado quando data-view="expenses"). */
html body[data-view="expenses"]:not(.auth-locked) main.app-shell {
  padding-top: 0 !important;
}

html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  background: var(--rf-page, #f7f8fa) !important;
  padding-top: 28px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

@media (max-width: 1180px) {
  html body[data-view="expenses"]:not(.auth-locked) main.app-shell {
    padding-top: 0 !important;
  }

  html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar {
    padding-top: 24px !important;
  }
}

html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar .header-user-card,
html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown {
  display: none !important;
}

html body[data-view="expenses"]:not(.auth-locked) .command-bar {
  display: none !important;
}

html body:not(.auth-locked) main.app-shell header.topbar .expense-new-cta {
  display: none !important;
}

html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar .expense-new-cta {
  grid-column: 4 !important;
  grid-row: 1 !important;
  order: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(179, 90, 60, 0.2) !important;
  cursor: pointer !important;
}

html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar .expense-new-cta:hover,
html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar .expense-new-cta:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
}

html body[data-view="expenses"]:not(.auth-locked) main.app-shell header.topbar .expense-new-cta-icon {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-hidden-metrics {
  display: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 108px !important;
  padding: 19px 20px !important;
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 17px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.05) !important;
  overflow: hidden !important;
  container-type: inline-size !important;
  container-name: receivable-kpi !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: var(--rf-text, #172033) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-head strong {
  min-width: 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-head i {
  display: grid !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: var(--rf-success-bg, #eaf7f1) !important;
  color: var(--rf-success, #0f7a5a) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.attention .receivable-kpi-head i {
  background: var(--rf-warning-bg, #fff7ed) !important;
  color: var(--rf-warning, #f47820) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.compliance .receivable-kpi-head i {
  background: #eff6ff !important;
  color: #2563eb !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi > strong {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: clamp(18px, 11cqi, 27px) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 720 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.attention > strong {
  color: var(--rf-warning, #f47820) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.compliance > strong {
  color: #1d4ed8 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi > small {
  display: block !important;
  min-width: 0 !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi > small span {
  color: inherit !important;
  font: inherit !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-curve {
  display: block !important;
  height: 38px !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 10px !important;
  left: 18px !important;
  z-index: -1 !important;
  color: var(--rf-success, #0f7a5a) !important;
  opacity: 0.9 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-curve::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px 0 0 !important;
  border-top: 2px solid currentColor !important;
  border-radius: 48% 52% 0 0 !important;
  transform: skewY(-5deg) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-curve::after {
  content: "" !important;
  position: absolute !important;
  inset: 14px 0 0 !important;
  background: linear-gradient(180deg, color-mix(in srgb, currentColor 14%, transparent), transparent) !important;
  border-radius: 50% 50% 0 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.attention .receivable-kpi-curve {
  color: var(--rf-warning, #f47820) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-progress {
  display: block !important;
  height: 6px !important;
  margin-top: auto !important;
  border-radius: 999px !important;
  background: #e8eef5 !important;
  overflow: hidden !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-progress i {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: #2563eb !important;
  transition: width 220ms ease !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-badge {
  display: grid !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: var(--rf-success-bg, #eaf7f1) !important;
  color: var(--rf-success, #0f7a5a) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-badge svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.attention .receivable-kpi-badge {
  background: var(--rf-warning-bg, #fff7ed) !important;
  color: var(--rf-warning, #f47820) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.info .receivable-kpi-badge {
  background: #eff6ff !important;
  color: #2563eb !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.info > strong {
  color: #1d4ed8 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.info .receivable-kpi-curve {
  color: #2563eb !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.compliance .receivable-kpi-badge {
  background: #f3e8ff !important;
  color: #7c3aed !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi.compliance > strong {
  color: #6d28d9 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-link {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-tabs {
  display: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-tabs button {
  position: relative !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-tabs button.active {
  color: var(--rf-text, #17324d) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  right: 13px !important;
  bottom: 0 !important;
  left: 13px !important;
  height: 2px !important;
  border-radius: 3px !important;
  background: var(--rf-text, #17324d) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters-card {
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 17px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.05) !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters-compact {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters-compact label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 150px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters-compact label span {
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-search-field {
  position: relative !important;
  flex: 1 1 260px !important;
  min-width: 200px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-search-icon {
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  pointer-events: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-search-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-search-field input {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 12px !important;
  background: var(--rf-page, #f7f8fa) !important;
  color: var(--rf-text, #172033) !important;
  font-size: 13px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters-spacer {
  flex: 1 1 auto !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-more-filters {
  padding: 0 16px 14px !important;
  border-top: 1px solid var(--rf-border, #e6ebf1) !important;
  margin-top: 2px !important;
  padding-top: 12px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-more-filters label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-width: 320px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-nature-dot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--rf-text, #172033) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-nature-dot::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-nature-dot.is-honorarios {
  color: var(--rf-success, #0f7a5a) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-nature-dot.is-terceiros {
  color: var(--rf-warning, #f47820) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-nature-dot.is-parcial {
  color: #7c3aed !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-page-size select {
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 7px !important;
  background: var(--rf-surface, #fff) !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-page-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-page-nav button {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 7px !important;
  background: var(--rf-surface, #fff) !important;
  color: var(--rf-text, #172033) !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-page-nav button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-page-nav span {
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-help {
  display: inline-grid !important;
  width: 15px !important;
  height: 15px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: help !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .bank-avatar {
  color: #fff !important;
  font-weight: 800 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .bank-avatar.bank-sicoob {
  background: #00995d !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .bank-avatar.bank-inter {
  background: #ff7a00 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table {
  table-layout: fixed !important;
  width: 100% !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(1),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(1) { width: 3% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(2),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(2) { width: 10% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(3),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(3) { width: 13% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(4),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(4) { width: 24% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(5),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(5) { width: 11% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(6),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(6) { width: 17% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table th:nth-child(7),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled .receivable-table td:nth-child(7) { width: 22% !important; }

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table {
  table-layout: fixed !important;
  width: 100% !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(1),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(1) { width: 10% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(2),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(2) { width: 13% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(3),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(3) { width: 19% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(4),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(4) { width: 15% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(5),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(5) { width: 10% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(6),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(6) { width: 15% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table th:nth-child(7),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-table td:nth-child(7) { width: 18% !important; }

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-reviews .receivable-unreconciled-actions {
  flex-wrap: wrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
  min-width: 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .panel {
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 17px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.05) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table-card {
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 17px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.05) !important;
  overflow: hidden !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters input,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters select {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 12px !important;
  background: var(--rf-surface, #ffffff) !important;
  color: var(--rf-text, #172033) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-status-filter,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-period-display {
  min-width: 168px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters input[readonly] {
  background: #fbfcfd !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 10px 16px !important;
  background: #fbfbfc !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-toolbar > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-count {
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-clear-filters {
  padding: 4px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #2563eb !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-clear-filters:hover {
  background: #eff6ff !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .rule-chip {
  min-height: 26px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: var(--rf-link, #1f4e79) !important;
  font-size: 9px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters-toggle,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-export-button {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 12px !important;
  background: var(--rf-surface, #ffffff) !important;
  color: var(--rf-text, #172033) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table-wrap {
  min-width: 0 !important;
  overflow: auto !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table {
  width: 100% !important;
  min-width: 800px !important;
  border-collapse: collapse !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table th,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table td {
  height: 58px !important;
  padding: 8px 9px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  vertical-align: middle !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table th {
  height: 38px !important;
  background: #fbfcfd !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table tbody tr {
  cursor: pointer !important;
  transition: background 140ms ease !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table tbody tr:hover,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table tbody tr.selected {
  background: #f3f7fc !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table td > strong,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table td > span > strong {
  display: block !important;
  color: var(--rf-text, #172033) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table td > small,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-client-cell small {
  display: block !important;
  max-width: 170px !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-client-cell {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 155px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-client-cell .list-avatar {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #eef2ff !important;
  color: #2563eb !important;
  font-size: 9px !important;
  font-weight: 750 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  accent-color: var(--rf-primary, #17324d) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table .amount {
  color: var(--rf-text, #172033) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table .badge,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-pair .badge {
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions {
  width: 34px !important;
  position: relative !important;
  text-align: center !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions details {
  position: relative !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions summary {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 7px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  list-style: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions summary:hover {
  background: var(--rf-primary-soft, #eaf0f6) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions .receivable-actions {
  display: grid !important;
  width: 110px !important;
  padding: 5px !important;
  position: absolute !important;
  top: 30px !important;
  right: 0 !important;
  z-index: 20 !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 9px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.14) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions .receivable-actions button {
  min-height: 28px !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--rf-text, #172033) !important;
  font-size: 9px !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-row-actions .receivable-actions button:hover {
  background: var(--rf-primary-soft, #eaf0f6) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 10px 15px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 9px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-insights {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-actions-panel {
  display: grid !important;
  gap: 8px !important;
  padding: 14px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-actions-panel button {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 11px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-actions-panel .primary-button,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content footer .primary-button {
  background: var(--rf-primary, #17324d) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-upcoming-panel,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-panel {
  min-width: 0 !important;
  padding: 14px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-rail-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-rail-head h2 {
  margin: 0 !important;
  color: var(--rf-text, #172033) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-rail-head span {
  display: block !important;
  margin-top: 2px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8.5px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-rail-head button {
  padding: 4px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #2563eb !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-upcoming-list {
  display: grid !important;
  gap: 2px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-upcoming-item {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 5px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0f3f7 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8.5px !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-upcoming-item:hover {
  background: #f7f9fc !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-upcoming-item strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-upcoming-item b {
  color: var(--rf-text, #172033) !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables #receivable-payment-summary {
  display: grid !important;
  gap: 8px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row {
  display: grid !important;
  grid-template-columns: 16px minmax(62px, 0.8fr) minmax(45px, 1fr) auto 25px !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-source-mark {
  width: 16px !important;
  height: 16px !important;
  border-radius: 5px !important;
  background: #dcfce7 !important;
  position: relative !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-source-mark::after {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  border-radius: 50% !important;
  background: #0f7a5a !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row.source-2 .receivable-source-mark {
  background: #dbeafe !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row.source-2 .receivable-source-mark::after {
  background: #2563eb !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row.source-3 .receivable-source-mark {
  background: #f3e8ff !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row.source-3 .receivable-source-mark::after {
  background: #9333ea !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: 8.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-source-bar {
  height: 4px !important;
  border-radius: 999px !important;
  background: #edf1f5 !important;
  overflow: hidden !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-source-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #0f7a5a !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .source-2 .receivable-source-bar i {
  background: #2563eb !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .source-3 .receivable-source-bar i {
  background: #9333ea !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-row b {
  color: var(--rf-text, #172033) !important;
  font-size: 8.5px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-payment-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--rf-border, #e6ebf1) !important;
  color: var(--rf-text, #172033) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-panel {
  min-width: 0 !important;
  padding: 0 !important;
  position: sticky !important;
  top: 14px !important;
  overflow: hidden !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content {
  display: grid !important;
  min-width: 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 15px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > header span {
  display: block !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > header h2 {
  max-width: 210px !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--rf-text, #172033) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > header button {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > nav {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > nav button {
  min-height: 38px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content > nav button.active {
  border-bottom-color: var(--rf-primary, #17324d) !important;
  color: var(--rf-text, #172033) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-block,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-pair {
  margin: 0 15px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-block > span,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-pair span {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8px !important;
  font-weight: 650 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-block strong,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-pair strong {
  display: block !important;
  color: var(--rf-text, #172033) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-block small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 8.5px !important;
  line-height: 1.3 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content footer {
  display: grid !important;
  gap: 8px !important;
  padding: 15px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content footer button {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

@media (max-width: 900px) {
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-filters,
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-detail-content {
    grid-template-columns: 1fr !important;
  }

  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Previsões v21: somente lançamentos explícitos, com confirmação bancária separada. */
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 108px;
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 17px;
  background: var(--rf-surface, #fff);
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.035);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric > div {
  min-width: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric small,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric p {
  display: block;
  margin: 0;
  color: var(--rf-text-secondary, #6f7b91);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric strong {
  display: block;
  margin: 6px 0 4px;
  overflow: hidden;
  color: var(--rf-text-primary, #172033);
  font-size: clamp(20px, 1.55vw, 29px);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric.is-confirmed strong {
  color: #0f7a5a;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metric p {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  font-size: 20px;
  font-weight: 900;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-icon.is-blue { color: #2f63c7; background: #edf3ff; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-icon.is-green { color: #0f7a5a; background: #eaf7f1; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-icon.is-orange { color: #c46818; background: #fff4e9; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-icon.is-violet { color: #6549c7; background: #f2efff; }

html body[data-view="forecasts"]:not(.auth-locked) .forecast-reconciliation-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 12px;
  padding: 12px 15px;
  border: 1px solid #d7e5f2;
  border-radius: 16px;
  color: #456078;
  background: #eef5fc;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-reconciliation-note > span {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--rf-primary, #17324d);
  font-size: 12px;
  font-weight: 900;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-reconciliation-note p {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table-wrap {
  width: 100%;
  overflow: hidden;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th {
  color: var(--rf-text-secondary, #6f7b91);
  background: #f8fafc;
  font-size: 10px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td {
  color: var(--rf-text-primary, #172033);
  font-size: 13px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td strong {
  font-weight: 600;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td small,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-bank-state small {
  display: block;
  margin-top: 3px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 11px;
  line-height: 1.35;
}

/* Cliente/processo aceita até 2 linhas, com truncamento e tooltip via title. */
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td:nth-child(2) small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(1) { width: 11%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td:nth-child(1) strong { white-space: nowrap; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(2) { width: 17%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(3) { width: 12%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(4) { width: 7%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(5) { width: 11%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(6) { width: 18%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(7) { width: 17%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(8) { width: 8%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table .amount { text-align: right; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th:nth-child(8) { white-space: nowrap; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td:nth-child(7) .badge {
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-bank-state strong { color: #476078; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-bank-state.is-confirmed strong { color: #0f7a5a; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-bank-state.is-review strong { color: #c46818; }

html body[data-view="forecasts"]:not(.auth-locked) .forecast-auto-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 7px;
  border-radius: 8px;
  color: #2058b4;
  background: #edf3ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-empty-state {
  display: grid;
  min-height: 190px;
  place-content: center;
  gap: 7px;
  color: var(--rf-text-secondary, #6f7b91);
  text-align: center;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-empty-state strong {
  color: var(--rf-text-primary, #172033);
  font-size: 15px;
}

@media (max-width: 1150px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table th,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table td {
    padding-inline: 7px;
  }
}

@media (max-width: 760px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-metrics { grid-template-columns: 1fr; }
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table-wrap { overflow-x: auto; }
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-simple-table { min-width: 920px; }
}

/* #forecast-asaas-integrity reaproveita o componente compartilhado
   .asaas-integrity-banner (também usado em Recebimentos e Cobranças);
   o raio é ajustado só aqui, sem tocar nas outras views. */
html body[data-view="forecasts"]:not(.auth-locked) #forecast-asaas-integrity {
  border-radius: 16px;
}

html body[data-view="forecasts"]:not(.auth-locked) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-intro {
  margin: 0 0 14px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 12px;
  line-height: 1.45;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-intro strong {
  color: var(--rf-text-primary, #172033);
}

/* Card horizontal de filtros — busca, status, período, mais filtros e exportar. */
html body[data-view="forecasts"]:not(.auth-locked) .forecast-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 16px;
  background: var(--rf-surface, #fff);
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.035);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--rf-text-secondary, #6f7b91);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid #dfe6ed;
  border-radius: 10px;
  color: var(--rf-text-primary, #172033);
  background: #fff;
  font: inherit;
  font-size: 13px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-select {
  flex: 0 0 auto;
  min-width: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-select select {
  height: 40px;
  min-width: 168px;
  padding: 0 12px;
  border: 1px solid #dfe6ed;
  border-radius: 10px;
  color: var(--rf-text-primary, #172033);
  background: #fff;
  font: inherit;
  font-size: 13px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-more-filters-toggle,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-export-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-more-filters-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-more-filters-toggle.is-active {
  border-color: var(--rf-primary, #17324d);
  color: var(--rf-primary, #17324d);
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-export-button {
  margin-left: auto;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-extra-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -4px 0 12px;
  padding: 12px 14px;
  border: 1px dashed #dfe6ed;
  border-radius: 14px;
  background: #f8fafc;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-extra-filters[hidden] {
  display: none;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-extra-filters label {
  display: grid;
  gap: 4px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-extra-filters label span {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-extra-filters select {
  height: 38px;
  min-width: 200px;
  padding: 0 11px;
  border: 1px solid #dfe6ed;
  border-radius: 9px;
  color: var(--rf-text-primary, #172033);
  background: #fff;
  font: inherit;
}

@media (max-width: 900px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-filters-bar {
    align-items: stretch;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-search,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-select {
    flex: 1 1 100%;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-filter-select select {
    width: 100%;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-export-button {
    margin-left: 0;
  }
}

/* Rodapé de paginação real da tabela de previsões. */
html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--rf-border, #e6ebf1);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-summary {
  min-width: 0;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 11px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-pages button {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--rf-text-secondary, #6f7b91);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-pages button:hover:not(:disabled) {
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-pages button:disabled {
  opacity: 0.4;
  cursor: default;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-pages button.is-active {
  color: #fff;
  background: var(--rf2-terracotta, #b35a3c);
  border-color: var(--rf2-terracotta, #b35a3c);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination-ellipsis {
  padding: 0 3px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 12px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-page-size span {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 11px;
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-page-size select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #dfe6ed;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
}

@media (max-width: 760px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Menu de ações da previsão (três pontos), mesmo padrão do menu de linha de Clientes. */
html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu-wrap {
  position: relative;
  display: inline-block;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu-toggle {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 50%;
  color: var(--rf-text-secondary, #6f7b91);
  background: #fff;
  cursor: pointer;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu-toggle:hover {
  color: var(--rf-primary, #17324d);
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(23, 50, 77, 0.16);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu[hidden] {
  display: none;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--rf-text-primary, #172033);
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu button:hover:not(:disabled) {
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu button:disabled {
  color: #b7c0cc;
  cursor: not-allowed;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu button.danger {
  color: #c0392b;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-menu button.danger:hover:not(:disabled) {
  background: #fdecec;
}

/* Auditoria integral da origem Asaas */
.asaas-integrity-banner {
  align-items: center;
  background: #fff8ed;
  border: 1px solid #f4d6a6;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  margin-bottom: 14px;
  padding: 11px 13px;
}

.asaas-integrity-banner[hidden] {
  display: none !important;
}

.asaas-integrity-banner.is-complete {
  background: #f1fbf6;
  border-color: #bde8cf;
}

.asaas-integrity-mark {
  align-items: center;
  background: #fff0d9;
  border-radius: 50%;
  color: #c76512;
  display: inline-flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.asaas-integrity-banner.is-complete .asaas-integrity-mark {
  background: #dcf7e8;
  color: #16874c;
}

.asaas-integrity-banner strong,
.asaas-integrity-banner p {
  display: block;
  margin: 0;
}

.asaas-integrity-banner strong {
  color: #172033;
  font-size: 13px;
}

.asaas-integrity-banner p {
  color: #6f7b91;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 2px;
}

.asaas-integrity-banner.is-complete button {
  display: none;
}

#asaas-audit-status {
  color: #6f7b91;
  font-size: 11px;
  line-height: 1.35;
}

.forecast-scope-control {
  display: grid;
  gap: 4px;
}

.forecast-scope-control span {
  color: #6f7b91;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .asaas-integrity-banner {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .asaas-integrity-banner button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.05);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-card > div {
  min-width: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  font-size: 21px;
  font-weight: 800;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-card small {
  display: block;
  overflow: hidden;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-card strong {
  display: block;
  margin: 7px 0 4px;
  overflow: hidden;
  color: var(--rf-text, #172033);
  font-size: clamp(18px, 1.4vw, 24px);
  letter-spacing: -0.035em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-card p {
  margin: 0;
  overflow: hidden;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-overview-card.tone-blue .forecast-overview-icon { color: #2f63c7; background: #eaf0fb; }
.forecast-overview-card.tone-green .forecast-overview-icon { color: #0f7a5a; background: #eaf7f1; }
.forecast-overview-card.tone-green > div > strong { color: #0f7a5a !important; }
.forecast-overview-card.tone-orange .forecast-overview-icon { color: #e76f13; background: #fff1e5; }
.forecast-overview-card.tone-orange > div > strong { color: #d95f08 !important; }
.forecast-overview-card.tone-red .forecast-overview-icon { color: #d93838; background: #fef0f0; }
.forecast-overview-card.tone-red > div > strong { color: #d93838 !important; }
.forecast-overview-card.tone-violet .forecast-overview-icon { color: #684bd5; background: #f0edff; }

html body[data-view="forecasts"]:not(.auth-locked) .forecast-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.78fr) minmax(310px, 0.92fr);
  gap: 14px;
  margin-bottom: 14px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-insight-grid > .panel {
  min-width: 0;
  min-height: 330px;
  padding: 17px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.045);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-insight-grid .panel-head {
  min-height: 30px;
  margin-bottom: 12px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-insight-grid .panel-head h2,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-details-head h2 {
  margin: 0;
  font-size: 14px;
}

.forecast-chart-legend {
  display: flex;
  gap: 20px;
  margin: 0 0 12px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9.5px;
}

.forecast-chart-legend span::before {
  display: inline-block;
  width: 15px;
  height: 4px;
  margin-right: 6px;
  border-radius: 99px;
  content: "";
  vertical-align: middle;
}

.forecast-chart-legend .is-expected::before { background: #9bb9f2; }
.forecast-chart-legend .is-received::before { background: #173f78; }
.forecast-chart-legend .is-overdue::before { background: #ef4444; }

.forecast-evolution-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 9px;
  height: 232px;
  padding: 14px 6px 0;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 54px, #edf1f5 55px);
}

.forecast-chart-column {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 8px;
  height: 100%;
  min-width: 0;
  text-align: center;
}

.forecast-chart-bars {
  position: relative;
  width: min(46px, 74%);
  height: 100%;
  margin: auto;
}

.forecast-chart-bars i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px 5px 0 0;
}

.forecast-chart-bars .expected { background: linear-gradient(180deg, #b8ccf5, #8bacee); }
.forecast-chart-bars .received { z-index: 2; background: linear-gradient(180deg, #244f8e, #173f78); }
.forecast-chart-bars .overdue { z-index: 3; min-height: 0; background: #ef4444; }
.forecast-chart-column > span { overflow: hidden; color: var(--rf-text-secondary, #6f7b91); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.forecast-origin-content {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 0.86fr);
  align-items: center;
  gap: 16px;
  min-height: 250px;
}

.forecast-origin-donut {
  position: relative;
  width: min(190px, 100%);
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
}

.forecast-origin-donut::after {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: #ffffff;
  content: "";
}

.forecast-origin-donut > span {
  position: absolute;
  z-index: 2;
  inset: 31%;
  display: grid;
  align-content: center;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
  text-align: center;
}

.forecast-origin-donut > span strong { display: block; margin-top: 4px; color: var(--rf-text, #172033); font-size: 13px; white-space: nowrap; }
.forecast-origin-legend { display: grid; gap: 10px; min-width: 0; }
.forecast-origin-legend > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 5px 7px; align-items: center; min-width: 0; }
.forecast-origin-legend i { width: 7px; height: 7px; border-radius: 50%; }
.forecast-origin-legend span { overflow: hidden; font-size: 9.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.forecast-origin-legend strong { font-size: 9.5px; white-space: nowrap; }
.forecast-origin-legend small { grid-column: 2 / -1; color: var(--rf-text-secondary, #6f7b91); font-size: 8.5px; }

.forecast-upcoming-list { display: grid; gap: 0; }
.forecast-upcoming-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--rf-border, #e6ebf1); background: transparent; color: var(--rf-text, #172033); text-align: left; cursor: pointer; }
.forecast-upcoming-item time { grid-row: 1 / 3; display: grid; width: 38px; height: 42px; place-content: center; border: 1px solid var(--rf-border, #e6ebf1); border-radius: 8px; text-align: center; }
.forecast-upcoming-item time strong { font-size: 13px; }
.forecast-upcoming-item time span { color: var(--rf-text-secondary, #6f7b91); font-size: 8px; text-transform: uppercase; }
.forecast-upcoming-item > span { min-width: 0; }
.forecast-upcoming-item > span strong,
.forecast-upcoming-item > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forecast-upcoming-item > span strong { font-size: 10.5px; }
.forecast-upcoming-item > span small { margin-top: 3px; color: var(--rf-text-secondary, #6f7b91); font-size: 8.5px; }
.forecast-upcoming-item > b { font-size: 10px; white-space: nowrap; }
.forecast-upcoming-item > i { grid-column: 3; justify-self: end; font-size: 8px; }

html body[data-view="forecasts"]:not(.auth-locked) .forecast-details-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.045);
}

.forecast-details-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--rf-border, #e6ebf1); }
.forecast-details-head p { margin: 4px 0 0; color: var(--rf-text-secondary, #6f7b91); font-size: 10px; }
.forecast-detail-filters { display: flex; gap: 8px; }
.forecast-detail-filters select,
.forecast-detail-filters button { min-height: 36px; max-width: 180px; padding: 7px 10px; border: 1px solid var(--rf-border, #e6ebf1); border-radius: 8px; background: #fff; color: var(--rf-text, #172033); font-size: 9.5px; font-weight: 700; }

.forecast-detail-table-wrap { width: 100%; overflow: hidden; }
.forecast-detail-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.forecast-detail-table th,
.forecast-detail-table td { padding: 10px 8px; overflow: hidden; border-bottom: 1px solid var(--rf-border, #e6ebf1); font-size: 9.5px; text-overflow: ellipsis; vertical-align: middle; }
.forecast-detail-table th { color: var(--rf-text-secondary, #6f7b91); background: #f7f9fb; font-size: 8px; letter-spacing: 0.025em; text-transform: uppercase; }
.forecast-detail-table th:nth-child(1) { width: 9%; }.forecast-detail-table th:nth-child(2) { width: 17%; }.forecast-detail-table th:nth-child(3) { width: 11%; }.forecast-detail-table th:nth-child(4) { width: 17%; }.forecast-detail-table th:nth-child(5) { width: 10%; }.forecast-detail-table th:nth-child(6) { width: 11%; }.forecast-detail-table th:nth-child(7) { width: 10%; }.forecast-detail-table th:nth-child(8) { width: 10%; }.forecast-detail-table th:nth-child(9) { width: 5%; }
.forecast-detail-table td small { display: block; margin-top: 2px; overflow: hidden; color: var(--rf-text-secondary, #6f7b91); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.forecast-detail-table .semantic-positive { color: var(--rf-success, #0f7a5a) !important; font-weight: 800; }
.forecast-detail-table .semantic-negative { color: var(--rf-error, #ef4444) !important; font-weight: 800; }
.forecast-detail-footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; color: var(--rf-text-secondary, #6f7b91); font-size: 9px; }
.forecast-detail-footer > div { display: flex; align-items: center; gap: 6px; }
.forecast-detail-footer button,
.forecast-detail-footer strong { display: grid; min-width: 30px; height: 30px; place-items: center; border: 1px solid var(--rf-border, #e6ebf1); border-radius: 7px; background: #fff; color: var(--rf-text, #172033); }
.forecast-detail-footer button:disabled { opacity: 0.4; }

dialog.forecast-modal { width: min(900px, calc(100vw - 32px)); max-height: 92vh; padding: 0; overflow: hidden; border: 1px solid var(--rf-border, #e6ebf1); border-radius: 16px; background: #fff; box-shadow: 0 30px 90px rgba(23, 32, 51, 0.24); }
dialog.forecast-modal::backdrop { background: rgba(23, 32, 51, 0.43); backdrop-filter: blur(3px); }
dialog.forecast-modal .forecast-form { max-height: 92vh; margin: 0; padding: 20px 22px; overflow-y: auto; }
dialog.forecast-modal .modal-header { position: sticky; z-index: 5; top: -20px; margin: -20px -22px 4px; padding: 18px 22px; background: #fff; border-bottom: 1px solid var(--rf-border, #e6ebf1); }
dialog.forecast-modal .modal-header span { color: var(--rf-text-secondary, #6f7b91); font-size: 10px; }
dialog.forecast-modal .forecast-form-actions { position: sticky; bottom: -20px; grid-template-columns: minmax(90px, .42fr) minmax(90px, .42fr) minmax(180px, 1fr); margin: 4px -22px -20px; padding: 14px 22px; background: #fff; border-top: 1px solid var(--rf-border, #e6ebf1); }

@media (max-width: 1380px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-insight-grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-upcoming-panel { grid-column: 1 / -1; min-height: auto; }
  .forecast-upcoming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
}

@media (max-width: 980px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-insight-grid { grid-template-columns: 1fr; }
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-upcoming-panel { grid-column: auto; }
  .forecast-details-head { align-items: stretch; flex-direction: column; }
  .forecast-detail-filters { display: grid; grid-template-columns: repeat(3, 1fr); }
  .forecast-detail-filters select,
  .forecast-detail-filters button { max-width: none; }
  .forecast-detail-table th:nth-child(3), .forecast-detail-table td:nth-child(3) { display: none; }
}

@media (max-width: 680px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-overview-grid,
  .forecast-upcoming-list,
  .forecast-detail-filters { grid-template-columns: 1fr; }
  .forecast-origin-content { grid-template-columns: 1fr; }
  .forecast-detail-table-wrap { overflow-x: auto; }
  .forecast-detail-table { min-width: 820px; }
  dialog.forecast-modal .forecast-form-actions { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Recebimentos — encaixe sem barras internas e tabela fluida. */
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-due-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel {
  max-width: 100% !important;
  overflow: visible !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table-wrap::-webkit-scrollbar {
  display: none !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(1),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(1) { width: 3% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(2),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(2) { width: 18% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(3),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(3) { width: 19% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(4),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(4) { width: 10% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(5),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(5) { width: 11% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(6),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(6) { width: 9% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(7),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(7) { width: 9% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(8),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(8) { width: 17% !important; }
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(9),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(9) { width: 4% !important; }

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-unreconciled-actions button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 6px 10px !important;
  font-size: 10px !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-client-cell {
  min-width: 0 !important;
}

html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(4),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(5),
html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(6) {
  white-space: nowrap !important;
}


@media (max-width: 720px) {
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(1),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(1),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(7),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(7),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(8),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(8) {
    display: none !important;
  }

  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(2),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(2) { width: 28% !important; }
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(3),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(3) { width: 29% !important; }
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(4),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(4) { width: 15% !important; }
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(5),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(5) { width: 16% !important; }
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(6),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(6) { width: 12% !important; }
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table th:nth-child(9),
  html body[data-view="receivables"]:not(.auth-locked) main.app-shell #view-receivables .receivable-ledger-panel .receivable-table td:nth-child(9) { width: 5% !important; }
}

/* Página de despesas — fonte real para o fluxo de caixa. */
html body[data-view="expenses"]:not(.auth-locked) #view-expenses {
  display: grid;
  gap: 14px;
  min-width: 0;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses:not(.active) {
  display: none;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 8px !important;
  min-height: 126px !important;
  padding: 18px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 14px !important;
  background: var(--rf-surface, #fff) !important;
  box-shadow: 0 8px 26px rgba(23, 32, 51, 0.035) !important;
  overflow: hidden !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-head strong {
  color: var(--rf-text, #172033) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-head i {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #ef4444;
  background: #fef2f2;
  font-size: 17px;
  font-style: normal;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-head svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.paid .expense-kpi-head i {
  color: #1f8a5b;
  background: #eaf7f0;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.open .expense-kpi-head i {
  color: var(--rf-link);
  background: var(--rf-primary-soft);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.attention .expense-kpi-head i {
  color: #f47820;
  background: #fff7ed;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.average .expense-kpi-head i {
  color: #6d28d9;
  background: #f5f3ff;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--rf-primary, #17324d) !important;
  font-size: clamp(20px, 1.65vw, 29px) !important;
  font-weight: 750 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.paid > strong {
  color: #1f8a5b !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.open > strong,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.average > strong {
  color: var(--rf-primary, #17324d) !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi.attention > strong {
  color: #f47820 !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi > small {
  color: var(--rf-text-secondary, #6f7b91) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-workspace {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(280px, 0.85fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-ledger-panel,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-insights,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-panel {
  min-width: 0;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-ledger-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px 10px;
  padding: 16px;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters label,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters .expense-export-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters label > span,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters .expense-export-field > span {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10px;
  font-weight: 700;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters input,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 9px;
  background: #fff;
  color: var(--rf-text, #172033);
  font-size: 11px;
  box-shadow: none;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters input:disabled {
  color: var(--rf-text-secondary, #6f7b91);
  background: #f7f8fa;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 9px;
  background: #fff;
  color: var(--rf-text, #172033);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-export-button:hover {
  background: #f7f8fa;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-export-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-ledger-toolbar,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 16px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10.5px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-ledger-toolbar {
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-ledger-toolbar > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-clear-filters,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-rail-head button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rf-link, #1f4e79);
  font-size: 10.5px;
  font-weight: 700;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td {
  min-width: 0;
  padding: 10px 8px;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
  color: var(--rf-text, #172033);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
  font-weight: 700;
  text-align: left;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(1),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(1) { width: 21%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(2),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(2) { width: 14%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(3),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(3) { width: 10%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(4),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(4) { width: 11%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(5),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(5) { width: 12%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(6),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(6) { width: 11%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(7),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(7) { width: 12%; }
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(8),
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(8) { width: 9%; }

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table tbody tr {
  cursor: pointer;
  transition: background-color 140ms ease;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table tbody tr:hover,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table tbody tr.selected {
  background: #f3f7fb;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-supplier-cell {
  display: grid;
  gap: 2px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-supplier-cell strong,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-supplier-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-supplier-cell small {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 7px;
  color: var(--rf-link);
  background: var(--rf-primary-soft);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-status.pago {
  color: #16804a;
  background: #eaf7f1;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-status.vencido {
  color: #dc2626;
  background: #fef2f2;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-status.agendado {
  color: #6d28d9;
  background: #f5f3ff;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-status.aguardando_valor {
  color: #c2410c;
  background: #fff7ed;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .amount-pending strong {
  color: #c2410c;
  font-size: 9.5px;
  white-space: normal;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-view,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu-toggle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--rf-text-secondary, #6f7b91);
  cursor: pointer;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-view svg,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-view:hover,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu-toggle:hover {
  color: var(--rf-primary, #17324d);
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu-wrap {
  position: relative;
  display: inline-block;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(23, 50, 77, 0.16);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu[hidden] {
  display: none;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--rf-text, #172033);
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu button:hover:not(:disabled) {
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu button:disabled {
  color: #b7c0cc;
  cursor: not-allowed;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu button.danger {
  color: #c0392b;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-row-menu button.danger:hover:not(:disabled) {
  background: #fdecec;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table-footer {
  border-top: 0;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-insights {
  display: grid;
  gap: 12px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-insights .panel,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-panel {
  padding: 14px !important;
  border-radius: 14px !important;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-actions-panel {
  display: grid;
  gap: 9px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-actions-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #b35a3c;
  background: #fcefea;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-actions-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-actions-panel h2 {
  margin: 0;
  color: var(--rf-text, #172033);
  font-size: 13px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-actions-panel p {
  margin: 0;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9.5px;
  line-height: 1.45;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-new-outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid #b35a3c;
  border-radius: 10px;
  background: transparent;
  color: #b35a3c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-new-outline-button:hover {
  background: #fcefea;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-rail-head h2 {
  margin: 0;
  color: var(--rf-text, #172033);
  font-size: 12px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-rail-head span {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-upcoming-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 7px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
  background: transparent;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
  text-align: left;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-upcoming-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--rf-text, #172033);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-upcoming-item b {
  color: var(--rf-text, #172033);
  font-size: 9px;
  white-space: nowrap;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px auto;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  font-size: 9px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-category-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-category-bar {
  height: 4px;
  border-radius: 99px;
  background: #eef2f6;
  overflow: hidden;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-category-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rf-link, #1f4e79);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-category-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--rf-border, #e6ebf1);
  font-size: 10px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-panel {
  min-height: 160px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-content > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-content > header h2 {
  margin: 0;
  color: var(--rf-text, #172033);
  font-size: 13px;
  line-height: 1.3;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-content > header button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 18px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-block,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-pair {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rf-border, #e6ebf1);
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-pair {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-pair > div {
  display: grid;
  gap: 4px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-block span,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-pair span {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9px;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-block strong,
html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-pair strong {
  color: var(--rf-text, #172033);
  font-size: 10.5px;
  line-height: 1.4;
}

html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-content footer {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

dialog.expense-modal {
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(23, 32, 51, 0.22);
  overflow: auto;
}

dialog.expense-modal::backdrop {
  background: rgba(23, 32, 51, 0.42);
  backdrop-filter: blur(3px);
}

.expense-form {
  padding: 22px;
}

/* Modal unificado de ações da assistência médica (registrar atualização, solicitar informações, informar impossibilidade). */
dialog.medical-action-dialog {
  width: min(640px, calc(100vw - 28px));
  color: var(--color-text, var(--rf-text));
  background: var(--color-surface, var(--rf-surface, #fff));
}
.medical-action-dialog__form { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 34px 28px 24px; }
.medical-action-dialog__close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; color: var(--color-text-muted, var(--rf-text-secondary)); background: transparent; cursor: pointer;
}
.medical-action-dialog__close:hover,
.medical-action-dialog__close:focus-visible { outline: 2px solid var(--color-accent, var(--rf-link)); background: var(--color-background, var(--rf-page)); }
.medical-action-dialog__header { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-right: 0; }
.medical-action-dialog__icon {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--color-primary, var(--rf-primary));
  background: color-mix(in srgb, var(--color-primary, var(--rf-primary)) 12%, var(--color-surface, #fff));
}
.medical-action-dialog__icon--warning {
  color: var(--color-warning, var(--rf-warning));
  background: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 14%, var(--color-surface, #fff));
}
.medical-action-dialog__title { margin: 0; font-size: 22px; font-weight: 800; color: var(--color-text, var(--rf-text)); }
.medical-action-dialog__description { margin: 0; max-width: 440px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted, var(--rf-text-secondary)); }

.medical-action-dialog__body {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  border: 1px solid var(--color-border, var(--rf-border)); border-radius: 14px;
  background: var(--color-background, var(--rf-page));
}
.medical-action-dialog__field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-text, var(--rf-text)); }
.medical-action-dialog__field[hidden] { display: none; }
.medical-action-dialog__field select,
.medical-action-dialog__field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 10px;
  color: var(--color-text, var(--rf-text)); background: var(--color-surface, #fff); font-size: 13px; font-weight: 400;
}
.medical-action-dialog__field textarea { resize: vertical; min-height: 110px; }
.medical-action-dialog__label { display: flex; align-items: center; gap: 4px; }
.medical-action-dialog__required { color: var(--color-danger, var(--rf-error, #dc2626)); }
.medical-action-dialog__hint { font-size: 11px; font-weight: 400; color: var(--color-text-muted, var(--rf-text-secondary)); }
.medical-action-dialog__field-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.medical-action-dialog__counter { font-size: 10px; font-weight: 600; color: var(--color-text-muted, var(--rf-text-secondary)); white-space: nowrap; }
.medical-action-dialog__field-error { font-size: 11px; font-weight: 600; color: var(--color-danger, var(--rf-error, #dc2626)); }

.medical-action-dialog__recipient-card {
  display: flex; gap: 10px; padding: 12px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 12px;
  background: var(--color-surface, #fff);
}
.medical-action-dialog__recipient-card strong { display: block; font-size: 12px; font-weight: 700; color: var(--color-text, var(--rf-text)); }
.medical-action-dialog__recipient-card p { margin: 2px 0 0; font-size: 11px; font-weight: 400; color: var(--color-text-muted, var(--rf-text-secondary)); }
.medical-action-dialog__recipient-icon {
  flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--color-primary, var(--rf-primary));
  background: color-mix(in srgb, var(--color-primary, var(--rf-primary)) 14%, var(--color-surface, #fff));
}

.medical-action-dialog__info-card { padding: 14px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 12px; background: var(--color-surface, #fff); }
.medical-action-dialog__checklist { margin: 8px 0 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 12px; font-weight: 400; color: var(--color-text, var(--rf-text)); }

.medical-action-dialog__notice {
  display: flex; gap: 10px; padding: 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-primary, var(--rf-primary)) 30%, var(--color-border, var(--rf-border)));
  background: color-mix(in srgb, var(--color-primary, var(--rf-primary)) 8%, var(--color-surface, #fff));
}
.medical-action-dialog__notice[hidden] { display: none; }
.medical-action-dialog__notice strong { display: block; font-size: 12px; color: var(--color-primary-dark, var(--rf-primary-deep)); }
.medical-action-dialog__notice p { margin: 2px 0 0; font-size: 11px; font-weight: 400; color: var(--color-text, var(--rf-text)); }
.medical-action-dialog__notice--warning {
  border-color: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 40%, var(--color-border, var(--rf-border)));
  background: color-mix(in srgb, var(--color-warning, var(--rf-warning)) 10%, var(--color-surface, #fff));
}
.medical-action-dialog__notice--warning strong { color: var(--color-warning, var(--rf-warning)); }
.medical-action-dialog__notice-icon { flex-shrink: 0; color: var(--color-primary, var(--rf-primary)); }
.medical-action-dialog__notice--warning .medical-action-dialog__notice-icon { color: var(--color-warning, var(--rf-warning)); }

.medical-action-dialog__footer { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.medical-action-dialog__error { display: block; min-height: 14px; font-size: 11px; font-weight: 600; color: var(--color-danger, var(--rf-error, #dc2626)); }
.medical-action-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
.medical-action-dialog__actions .secondary-button,
.medical-action-dialog__actions .primary-button { min-height: 44px; padding: 0 20px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.medical-action-dialog__actions .primary-button {
  display: flex; align-items: center; gap: 8px;
  color: #fff; background: var(--color-primary, var(--rf-primary)); border-color: var(--color-primary, var(--rf-primary));
}
.medical-action-dialog__form--warning .medical-action-dialog__actions .primary-button {
  background: var(--color-warning, var(--rf-warning)); border-color: var(--color-warning, var(--rf-warning));
}
.medical-action-dialog__actions .primary-button:disabled { opacity: 0.55; cursor: not-allowed; }
.medical-action-dialog__actions .primary-button.is-loading { opacity: 0.75; cursor: progress; }
.medical-action-dialog__submit-icon svg { display: block; }

@media (max-width: 900px) {
  dialog.medical-action-dialog { width: min(560px, calc(100vw - 24px)); }
}
@media (max-width: 640px) {
  dialog.medical-action-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .medical-action-dialog__form { padding: 24px 18px 18px; }
  .medical-action-dialog__actions { flex-direction: column-reverse; }
  .medical-action-dialog__actions .secondary-button,
  .medical-action-dialog__actions .primary-button { width: 100%; }
}

.expense-document-reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #dbe7f2;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7fbff 0%, #f5f9fc 100%);
}

.expense-document-reader-copy {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.expense-document-reader-copy > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.expense-document-reader-copy strong {
  color: var(--rf-text, #172033);
  font-size: 12px;
}

.expense-document-reader-copy small {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10px;
  line-height: 1.45;
}

.expense-document-reader-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--rf-primary-soft);
  color: var(--rf-link);
  font-size: 24px;
  font-weight: 700;
}

.expense-document-reader-actions {
  display: flex;
  gap: 8px;
}

.expense-document-reader-actions button {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 9px;
  white-space: nowrap;
  font-size: 10.5px;
}

.expense-document-reader-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.expense-document-selection {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #fff;
  color: var(--rf-text, #172033);
  font-size: 10.5px;
  font-weight: 700;
}

.expense-document-selection[hidden] {
  display: none;
}

.expense-document-selection span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-document-selection button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 18px;
  line-height: 1;
}

.expense-document-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9.5px;
  line-height: 1.45;
}

.expense-document-status.is-loading {
  color: var(--rf-link);
  font-weight: 700;
}

.expense-document-status.is-success {
  color: #0f7a5a;
  font-weight: 700;
}

.expense-document-status.is-warning,
.expense-document-status.is-error {
  color: #c2410c;
  font-weight: 700;
}

.expense-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.expense-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 11px;
  font-weight: 700;
}

.expense-form-grid label[hidden] {
  display: none;
}

.expense-form-grid label.wide {
  grid-column: 1 / -1;
}

.expense-form-grid input,
.expense-form-grid select,
.expense-form-grid textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 9px;
  background: #fff;
  color: var(--rf-text, #172033);
  font: inherit;
  font-weight: 500;
}

.expense-recurrence-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid #dbe7f2;
  border-radius: 11px;
  background: linear-gradient(135deg, #f7fbff 0%, #f9fbfd 100%);
}

.expense-form-grid .expense-recurrence-card.wide {
  grid-column: 1 / -1;
}

.expense-form-grid .expense-recurrence-toggle {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.expense-form-grid .expense-recurrence-toggle input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--rf-primary, #17324d);
}

.expense-recurrence-toggle > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.expense-recurrence-toggle strong {
  color: var(--rf-text, #172033);
  font-size: 11.5px;
  line-height: 1.25;
}

.expense-recurrence-toggle small {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.4;
}

.expense-recurrence-options {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(155px, 0.6fr);
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid #dbe7f2;
}

.expense-form-grid .expense-recurrence-mode,
.expense-form-grid .expense-recurrence-end,
.expense-form-grid .expense-recurrence-schedule {
  gap: 5px;
}

.expense-recurrence-mode > small {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 8.8px;
  font-weight: 500;
  line-height: 1.35;
}

.expense-recurrence-schedule.is-disabled {
  opacity: 0.58;
}

.expense-recurrence-schedule {
  display: grid;
  align-content: start;
  gap: 8px !important;
  min-width: 0;
}

.expense-form-grid .expense-recurrence-indefinite,
.expense-form-grid .expense-annual-adjustment {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.expense-form-grid .expense-recurrence-indefinite input,
.expense-form-grid .expense-annual-adjustment input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--rf-primary, #17324d);
}

.expense-recurrence-indefinite > span,
.expense-annual-adjustment > span {
  display: grid;
  gap: 2px;
}

.expense-recurrence-indefinite strong,
.expense-annual-adjustment strong {
  color: var(--rf-text, #172033);
  font-size: 9.5px;
  line-height: 1.2;
}

.expense-recurrence-indefinite small,
.expense-annual-adjustment small {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.3;
}

.expense-recurrence-end:has(input:disabled) {
  opacity: 0.52;
}

.expense-recurrence-mode-title {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10px;
  font-weight: 750;
}

.expense-recurrence-mode-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.expense-form-grid .expense-recurrence-mode-option {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 9px;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.expense-form-grid .expense-recurrence-mode-option:has(input:checked) {
  border-color: var(--rf-link);
  background: #eef5fb;
  box-shadow: 0 0 0 1px rgba(31, 78, 121, 0.08);
}

.expense-form-grid .expense-recurrence-mode-option input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--rf-link, #1f4e79);
}

.expense-recurrence-mode-option > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.expense-recurrence-mode-option strong {
  color: var(--rf-text, #172033);
  font-size: 10px;
  line-height: 1.2;
}

.expense-recurrence-mode-option small {
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.25;
}

.expense-recurrence-end > span {
  font-size: 9px;
  font-weight: 500;
}

.expense-recurrence-end[hidden] {
  display: none !important;
}

.expense-recurrence-mode[hidden] {
  display: none !important;
}

.expense-detail-recurring {
  border-color: #dbe7f2 !important;
  background: #f7fbff !important;
}

.expense-adjustment-warning {
  border-color: #f7d7a9 !important;
  background: #fff7ed !important;
}

.expense-adjustment-warning strong {
  color: #b45309 !important;
}

.expense-adjustment-badge {
  display: block;
  width: max-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 7.5px;
  font-weight: 800;
  white-space: nowrap;
}

.expense-form-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--rf-primary-soft, #eaf0f6);
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1320px) {
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-workspace {
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, 0.72fr);
  }

  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-detail-panel {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-workspace,
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-filters {
    grid-template-columns: 1fr !important;
  }

  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(2),
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(2),
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(3),
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(3),
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table th:nth-child(7),
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-table td:nth-child(7) {
    display: none;
  }
}

@media (max-width: 560px) {
  html body[data-view="expenses"]:not(.auth-locked) #view-expenses .expense-kpi-grid,
  .expense-form-grid {
    grid-template-columns: 1fr !important;
  }

  .expense-form-grid label.wide {
    grid-column: auto;
  }

  .expense-document-reader {
    grid-template-columns: 1fr;
  }

  .expense-document-reader-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .expense-recurrence-card,
  .expense-recurrence-options {
    grid-template-columns: 1fr;
  }

  .expense-form-grid .expense-recurrence-mode,
  .expense-form-grid .expense-recurrence-end,
  .expense-form-grid .expense-recurrence-schedule {
    padding: 0;
    border: 0;
  }
}

/* Correção pontual da identidade institucional no Painel.
   Regras legadas desta tela usavam verde fixo e ultrapassavam a paleta global. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell header.topbar .header-user-card .header-avatar,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .sidebar-user-avatar {
  color: #ffffff !important;
  background: var(--rf-primary, #17324d) !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(23, 50, 77, 0.18) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) aside.sidebar nav.nav button.nav-item {
  color: rgba(255, 255, 255, 0.81) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) aside.sidebar nav.nav button.nav-item svg.nav-icon {
  color: rgba(255, 255, 255, 0.81) !important;
}

/* Neutraliza o "stroke" fixo aplicado por uma regra legada
   ("garantia definitiva dos icones do menu lateral" em styles.css),
   que ignorava a cor herdada via currentColor. */
html body:not(.auth-locked) aside.sidebar nav.nav button.nav-item svg.nav-icon {
  stroke: rgba(255, 255, 255, 0.81) !important;
}

html body:not(.auth-locked) aside.sidebar nav.nav button.nav-item.active svg.nav-icon,
html body:not(.auth-locked) aside.sidebar nav.nav button.nav-item:hover svg.nav-icon {
  stroke: #ffffff !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) aside.sidebar .brand-mark {
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) aside.sidebar nav.nav button.nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.11)) !important;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.11)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 24px color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 14%, transparent) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) aside.sidebar nav.nav button.nav-item.active svg.nav-icon {
  color: #ffffff !important;
}

/* Busca de endereço pelo CEP no cadastro do cliente. */
.case-modal .form-section label.cep-lookup-field {
  grid-column: 1 / -1 !important;
  padding: 12px 14px !important;
  border: 1px solid #dbe7f2 !important;
  border-radius: 13px !important;
  background: #f7fbff !important;
}

.case-modal .form-section label.cep-lookup-field input {
  width: min(100%, 260px) !important;
  max-width: 260px !important;
  background: #ffffff !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.04em !important;
}

.cep-lookup-status {
  display: block;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.cep-lookup-status.is-loading {
  color: var(--rf-link, #1f4e79);
}

.cep-lookup-status.is-success {
  color: var(--rf-success, #0f7a5a);
}

.cep-lookup-status.is-error {
  color: var(--rf-error, #ef4444);
}

.case-modal .form-section input.cep-auto-filled {
  border-color: #86d6ac !important;
  background: var(--rf-success-bg, #eaf7f1) !important;
  transition: border-color 180ms ease, background-color 180ms ease !important;
}

/* Ultima palavra da politica visual de acesso. */
html body:not(.auth-locked) [data-role-hidden="true"],
html body:not(.auth-locked) [data-role-hidden="true"][hidden] {
  display: none !important;
}

/* Contraste global dos valores em cards escuros. */
html body:not(.auth-locked) .metric.hero-metric:not(.dashboard-kpi) strong,
html body:not(.auth-locked) .metric.hero-metric:not(.dashboard-kpi) .metric-line strong,
html body:not(.auth-locked) .metric.hero-metric:not(.dashboard-kpi) [id] {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Previsões jurídicas: crédito do cliente separado dos honorários do escritório. */
html body[data-view="forecasts"]:not(.auth-locked) #view-forecasts {
  --forecast-green: var(--rf-success, #0f7a5a);
  --forecast-green-soft: var(--rf-success-bg, #eaf7f1);
  min-width: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-section-head {
  margin-bottom: 18px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-section-head h2 {
  margin-top: 3px;
  font-size: clamp(25px, 2.2vw, 34px);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid .metric {
  min-width: 0;
  min-height: 126px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(23, 50, 77, 0.055);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid .forecast-credit-metric {
  color: #ffffff;
  background: var(--rf-primary, #17324d) !important;
  border-color: var(--rf-primary, #17324d) !important;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid .forecast-credit-metric span,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid .forecast-credit-metric small {
  color: rgba(255, 255, 255, 0.72) !important;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-fee-metric strong,
html body[data-view="forecasts"]:not(.auth-locked) #forecast-weighted {
  color: var(--forecast-green) !important;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-workspace {
  display: grid;
  grid-template-columns: minmax(390px, 0.82fr) minmax(610px, 1.42fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-entry-panel,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-map-panel {
  min-width: 0;
  padding: 20px;
  border-radius: 13px;
  box-shadow: 0 14px 38px rgba(23, 50, 77, 0.06);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-entry-panel .panel-head,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-map-panel .panel-head {
  margin-bottom: 15px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-form {
  gap: 12px;
  margin: 0;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-form label {
  gap: 6px;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 11px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-form input,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-form select,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-form textarea {
  min-height: 42px;
  border-color: var(--rf-border, #e6ebf1);
  border-radius: 9px;
  color: var(--rf-text, #172033);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-document-reader {
  margin: 0 0 2px;
  border-style: dashed;
  background: linear-gradient(135deg, #f7fafc 0%, #f1f6f9 100%);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-document-reader .expense-document-reader-icon {
  color: var(--forecast-green);
  background: var(--forecast-green-soft);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-document-reader .primary-button {
  background: var(--rf-primary, #17324d) !important;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-fee-calculation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 2px 0 0;
  padding: 13px;
  border: 1px solid #d7e7df;
  border-radius: 11px;
  background: #f9fcfb;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-fee-calculation legend {
  padding: 0 7px;
  color: var(--forecast-green);
  font-size: 10.5px;
  font-weight: 800;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-input-suffix {
  display: flex;
  align-items: center;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 9px;
  background: #ffffff;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-input-suffix input {
  min-width: 0;
  border: 0 !important;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-input-suffix > span {
  padding-right: 12px;
  color: var(--rf-text-secondary, #6f7b91);
  font-weight: 800;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-fee-helper {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 9.5px;
  line-height: 1.4;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-form-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(190px, 1fr);
  gap: 9px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-form .single-entry-only.is-hidden {
  display: none;
}

html body[data-view="forecasts"]:not(.auth-locked) #forecast-split-section .forecast-split-hint {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 11px;
  line-height: 1.4;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-split-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-split-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 13px;
  border: 1px solid #b8e5ef;
  border-radius: 11px;
  background: var(--cyan-soft);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-split-card legend {
  padding: 0 7px;
  color: var(--forecast-green);
  font-size: 10.5px;
  font-weight: 800;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-form-actions button {
  grid-column: auto;
  min-height: 43px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-map-panel .text-button {
  flex: 0 0 auto;
  color: var(--forecast-green) !important;
  font-weight: 800;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 10px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap table {
  width: 100%;
  table-layout: fixed;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th,
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap td {
  padding: 10px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 10px;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th {
  color: var(--rf-text-secondary, #6f7b91);
  background: #f6f8fa;
  font-size: 8.5px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(1) { width: 11%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(2) { width: 16%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(3) { width: 20%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(4) { width: 13%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(5) { width: 14%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(6) { width: 8%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(7) { width: 12%; }
html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap th:nth-child(8) { width: 6%; }

html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap td small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--rf-text-secondary, #6f7b91);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-actions {
  white-space: nowrap;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-actions button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--rf-text-secondary, #6f7b91);
  background: transparent;
  cursor: pointer;
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-row-actions button:hover {
  color: var(--rf-primary, #17324d);
  background: var(--rf-primary-soft, #eaf0f6);
}

html body[data-view="forecasts"]:not(.auth-locked) .forecast-map-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rf-border, #e6ebf1);
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 1420px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-workspace {
    grid-template-columns: 1fr;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-entry-panel {
    max-width: none;
  }
}

@media (max-width: 980px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-metric-grid,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-form,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-fee-calculation,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-split-cards,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-form-actions {
    grid-template-columns: 1fr;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-form .wide,
  html body[data-view="forecasts"]:not(.auth-locked) .forecast-fee-helper {
    grid-column: auto;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap {
    overflow-x: auto;
  }

  html body[data-view="forecasts"]:not(.auth-locked) .forecast-table-wrap table {
    min-width: 760px;
  }
}
/* Central de cobrancas — fila real, execucao e WhatsApp Business */
.collection-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.collection-actionbar p {
  margin: 0;
  color: var(--rf-text-secondary, #6f7b91);
  font-size: 13px;
  font-weight: 600;
}

.collection-execution-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 15px;
  border: 1px solid #ffd3cf;
  border-radius: 12px;
  background: #fff5f3;
  color: #b42318;
}

.collection-execution-alert[hidden] { display: none !important; }

.collection-execution-alert > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: #fee4e2;
  font-size: 18px;
  font-weight: 900;
}

.collection-execution-alert strong,
.collection-execution-alert p { display: block; margin: 0; }
.collection-execution-alert p { margin-top: 2px; color: #8f2d24; font-size: 11px; }

.collection-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.collection-kpi {
  min-width: 0;
  min-height: 108px;
  padding: 15px;
  border: 1px solid #e1e7ed;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 32, 51, .035);
}

.collection-kpi > span,
.collection-kpi > small,
.collection-kpi > strong { display: block; min-width: 0; }
.collection-kpi > span { color: #6f7b91; font-size: 9px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.collection-kpi > strong { margin-top: 14px; color: #172033; font-size: clamp(18px, 1.45vw, 25px); line-height: 1; white-space: nowrap; }
.collection-kpi > small { margin-top: 8px; color: #9aa6b8; font-size: 9px; line-height: 1.25; }
.collection-kpi.is-danger > strong { color: #d92d20; }
.collection-kpi.is-attention > strong { color: #e76f19; }
.collection-kpi.is-blue > strong { color: #2456bd; }
.collection-kpi.is-positive > strong { color: #118a58; }
.collection-kpi.is-violet > strong { color: #6646c7; }

.collection-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 360px);
  gap: 12px;
  align-items: start;
}

.collection-main-panel,
.collection-detail-panel { min-width: 0; padding: 0; overflow: hidden; }
.collection-detail-panel { position: sticky; top: 12px; }

.collection-tabs {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e4e9ee;
  overflow-x: auto;
}

.collection-tabs button {
  position: relative;
  padding: 0 17px;
  border: 0;
  background: transparent;
  color: #6f7b91;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.collection-tabs button.active { color: var(--rf-primary); }
.collection-tabs button.active::after { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; border-radius: 3px; background: var(--rf-primary); }

.collection-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1.15fr) repeat(3, minmax(120px, .85fr));
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8edf2;
}

.collection-filters[hidden] { display: none !important; }
.collection-filters label { min-width: 0; }
.collection-filters label > span { display: block; margin-bottom: 5px; color: #6f7b91; font-size: 9px; font-weight: 800; }
.collection-filters input,
.collection-filters select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #dfe6ed; border-radius: 9px; background: #fff; color: #172033; font: inherit; font-size: 10px; font-weight: 650; }

.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; padding: 0 16px; border-bottom: 1px solid #e8edf2; color: #6f7b91; font-size: 10px; }
.collection-toolbar button { border: 0; background: transparent; color: var(--rf-link); font: inherit; font-weight: 800; cursor: pointer; }

.collection-tab-panel { display: none; }
.collection-tab-panel.is-active { display: block; }
.collection-table-wrap { max-height: 620px; overflow: auto; }
.collection-table { width: 100%; table-layout: fixed; }
.collection-table th { position: sticky; top: 0; z-index: 1; padding: 9px 8px; background: #f8fafc; color: #7b8798; font-size: 8px; letter-spacing: .035em; text-transform: uppercase; }
.collection-table td { padding: 10px 8px; border-bottom: 1px solid #edf0f3; color: #344054; font-size: 9.5px; line-height: 1.3; vertical-align: middle; overflow-wrap: anywhere; }
.collection-table th:nth-child(1) { width: 20%; }
.collection-table th:nth-child(2) { width: 18%; }
.collection-table th:nth-child(3) { width: 10%; }
.collection-table th:nth-child(4) { width: 10%; }
.collection-table th:nth-child(5) { width: 11%; }
.collection-table th:nth-child(6) { width: 13%; }
.collection-table th:nth-child(7) { width: 15%; }
.collection-table th:nth-child(8) { width: 3%; }
.collection-table tr { cursor: pointer; }
.collection-table tr:hover td,
.collection-table tr.selected td { background: #f4f8fb; }
.collection-table tr.requires-execution td:first-child { box-shadow: inset 3px 0 #ef4444; }
.collection-table td > strong,
.collection-table td > small { display: block; }
.collection-table td > small { margin-top: 2px; color: #8b98aa; font-size: 8.5px; }

.collection-client-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.collection-client-cell > span:last-child { min-width: 0; }
.collection-client-cell strong,
.collection-client-cell small { display: block; }
.collection-client-cell strong { color: #172033; font-size: 9.5px; }
.collection-client-cell small { margin-top: 2px; color: #8491a4; font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-client-cell .list-avatar { width: 28px; height: 28px; flex: 0 0 28px; font-size: 8px; }

.collection-status { display: inline-flex; max-width: 100%; align-items: center; padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.collection-status.is-neutral { color: #526176; background: #edf1f5; }
.collection-status.is-green { color: #0b7a55; background: #e8f8f0; }
.collection-status.is-blue { color: #2456bd; background: #ebf1ff; }
.collection-status.is-orange { color: #b54708; background: #fff2df; }
.collection-status.is-violet { color: #6840c6; background: #f1edff; }
.collection-status.is-dark { color: #fff; background: var(--rf-primary); }
.collection-row-button { width: 25px; height: 25px; border: 0; border-radius: 7px; background: transparent; color: #526176; font-size: 21px; cursor: pointer; }
.danger-text { color: #d92d20 !important; }
.attention-text { color: #d96d16 !important; }

.collection-detail-content { padding: 16px; }
.collection-detail-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #e7ebef; }
.collection-detail-head .list-avatar { width: 38px; height: 38px; }
.collection-detail-head small,
.collection-detail-head p { display: block; margin: 0; color: #8290a3; font-size: 8px; }
.collection-detail-head h2 { margin: 2px 0; color: #172033; font-size: 15px; line-height: 1.15; }

.collection-detail-warning { margin: 13px 0 0; padding: 10px 11px; border: 1px solid #ffd6d1; border-radius: 9px; background: #fff5f3; color: #b42318; }
.collection-detail-warning strong,
.collection-detail-warning span { display: block; }
.collection-detail-warning strong { font-size: 10px; }
.collection-detail-warning span { margin-top: 3px; font-size: 8.5px; line-height: 1.35; }

.collection-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.collection-detail-grid > div { min-width: 0; padding: 10px; border: 1px solid #e7ecf1; border-radius: 9px; }
.collection-detail-grid span,
.collection-detail-grid strong,
.collection-detail-grid small { display: block; }
.collection-detail-grid span { color: #8390a2; font-size: 8px; }
.collection-detail-grid strong { margin-top: 4px; color: #172033; font-size: 10px; overflow-wrap: anywhere; }
.collection-detail-grid small { margin-top: 2px; color: #8e9bad; font-size: 8px; }

.collection-detail-actions { display: grid; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid #e8edf2; }
.collection-detail-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; }
.collection-detail-actions button { min-height: 38px; padding: 8px 10px; font-size: 9px; }
.collection-detail-actions > small { margin: -2px 0 2px; color: #8190a3; font-size: 8px; text-align: center; }
.collection-detail-actions button:disabled { opacity: .48; cursor: not-allowed; }
.collection-whatsapp-button { background: var(--rf-primary) !important; }
.danger-button { border: 1px solid #f2b8b2; border-radius: 9px; background: #fff5f3; color: #b42318; font: inherit; font-weight: 800; cursor: pointer; }
.collection-execution-done { display: grid; min-height: 38px; place-items: center; border-radius: 9px; background: #eaf7f1; color: #0c7958; font-size: 8px; font-weight: 800; text-align: center; }

.collection-timeline { margin-top: 14px; }
.collection-timeline h3 { margin: 0 0 10px; font-size: 11px; }
.collection-timeline > div:not(.empty-box) { display: grid; grid-template-columns: 8px 1fr; gap: 8px; position: relative; padding-bottom: 11px; }
.collection-timeline > div:not(.empty-box) > span { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--rf-link); }
.collection-timeline p,
.collection-timeline strong,
.collection-timeline small { display: block; margin: 0; }
.collection-timeline strong { font-size: 9px; }
.collection-timeline small { margin-top: 2px; color: #8390a2; font-size: 8px; line-height: 1.35; }

.collection-history-list { display: grid; gap: 0; padding: 8px 18px 18px; }
.collection-history-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf1f4; }
.collection-history-item p,
.collection-history-item small { margin: 2px 0 0; color: #6f7b91; font-size: 9px; }
.collection-history-item small { color: #98a2b3; font-size: 8px; }
.collection-history-mark { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #8aa1b8; }
.collection-history-mark.is-green { background: #16a34a; }
.collection-history-mark.is-orange { background: #f47820; }
.collection-history-mark.is-blue { background: #2563eb; }
.collection-history-mark.is-dark { background: var(--rf-primary); }

.collection-whatsapp-config { display: grid; grid-template-columns: 48px 1fr; gap: 13px; margin: 18px; padding: 18px; border: 1px solid #dce7e2; border-radius: 12px; background: #f5fbf7; }
.collection-whatsapp-logo { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #e2f7ea; color: #118a58; font-size: 25px; }
.collection-whatsapp-config h2 { margin: 0; font-size: 15px; }
.collection-whatsapp-config p { margin: 5px 0; color: var(--rf-primary); font-size: 10px; font-weight: 750; }
.collection-whatsapp-config small { display: block; color: #6f7b91; font-size: 9px; line-height: 1.5; }
.collection-compliance-note { margin: 0 18px 18px; padding: 13px; border-radius: 10px; background: #eef3f8; color: #29445f; }
.collection-compliance-note strong { font-size: 10px; }
.collection-compliance-note p { margin: 4px 0 0; font-size: 9px; line-height: 1.45; }

.whatsapp-consent-field {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px !important;
  border: 1px solid #dbe7e1;
  border-radius: 10px;
  background: #f6fbf8;
}
.whatsapp-consent-field input { width: 18px !important; height: 18px !important; flex: 0 0 18px; margin-top: 2px; }
.whatsapp-consent-field strong,
.whatsapp-consent-field small { display: block; }
.whatsapp-consent-field strong { color: var(--rf-primary); font-size: 11px; }
.whatsapp-consent-field small { margin-top: 3px; color: #6f7b91; font-size: 9px; line-height: 1.4; }

@media (max-width: 1380px) {
  .collection-kpi { padding: 12px; }
  .collection-kpi > strong { font-size: clamp(16px, 1.35vw, 21px); }
  .collection-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .collection-table th,
  .collection-table td { padding-right: 6px; padding-left: 6px; }
}

@media (max-width: 1120px) {
  .collection-kpi-grid { gap: 7px; }
  .collection-kpi { min-height: 98px; padding: 10px; }
  .collection-kpi > span { font-size: 7.5px; }
  .collection-kpi > strong { font-size: 16px; }
  .collection-kpi > small { font-size: 7.5px; }
  .collection-workspace { grid-template-columns: minmax(0, 1fr) 270px; gap: 8px; }
  .collection-tabs button { padding: 0 9px; font-size: 9px; }
  .collection-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-table th:nth-child(2), .collection-table td:nth-child(2) { display: none; }
  .collection-table th:nth-child(1) { width: 25%; }
  .collection-table th:nth-child(3) { width: 12%; }
  .collection-table th:nth-child(4) { width: 12%; }
  .collection-table th:nth-child(5) { width: 14%; }
  .collection-table th:nth-child(6) { width: 16%; }
  .collection-table th:nth-child(7) { width: 18%; }
}

@media (max-width: 820px) {
  .collection-actionbar { align-items: flex-start; flex-direction: column; }
  .collection-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-workspace { grid-template-columns: 1fr; }
  .collection-detail-panel { position: static; }
  .collection-table-wrap { overflow-x: auto; }
  .collection-table { min-width: 720px; }
  .collection-table th:nth-child(2), .collection-table td:nth-child(2) { display: table-cell; }
}

/* Configurações: sócios têm acesso integral fixo, sem seletores de módulo. */
#view-settings .partner-access-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid #cbdaf0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6f9fd 0%, #eef4fa 100%);
}

#view-settings .partner-access-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--rf-primary);
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
}

#view-settings .partner-access-copy {
  display: grid;
  gap: 4px;
}

#view-settings .partner-access-label {
  color: var(--rf-link);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#view-settings .partner-access-copy strong {
  color: #172033;
  font-size: 19px;
}

#view-settings .partner-access-copy p {
  margin: 0;
  color: #6f7b91;
  line-height: 1.45;
}

#view-settings .partner-access-total {
  min-width: 58px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #168047;
  font-weight: 800;
  text-align: center;
}

#view-settings .partner-module-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: auto;
  padding: 14px;
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  background: #ffffff;
}

#view-settings .partner-module-summary span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #f2f6fa;
  color: #52637a;
  font-size: 12px;
  font-weight: 700;
}

#view-settings .settings-user-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid #f1d5d5;
  border-radius: 14px;
  background: #fffafa;
}

#view-settings .settings-user-danger > div {
  display: grid;
  gap: 3px;
}

#view-settings .settings-user-danger strong,
#view-settings .settings-user-danger span {
  display: block;
}

#view-settings .settings-user-danger strong {
  color: #172033;
}

#view-settings .settings-user-danger span {
  color: #7c8798;
  font-size: 13px;
}

#view-settings .danger-button {
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #efb8b8;
  border-radius: 11px;
  background: #ffffff;
  color: #c53030;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#view-settings .danger-button:hover:not(:disabled) {
  border-color: #d94a4a;
  background: #fff5f5;
}

#view-settings .danger-button:disabled {
  border-color: #e6ebf1;
  color: #9aa6b8;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  #view-settings .partner-access-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #view-settings .partner-access-total {
    grid-column: 1 / -1;
    justify-self: start;
  }

  #view-settings .settings-user-danger {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Acabamento estrutural unificado em todas as páginas.
   Mantém os dois cantos do conteúdo visíveis e dá mais respiro ao menu lateral. */
html body[data-view]:not(.auth-locked) {
  --rf-sidebar-expanded: 296px;
  --rf-shell-radius: 28px;
  grid-template-columns: var(--rf-sidebar-expanded) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background: var(--rf-sidebar, #f2f3f4) !important;
}

html body[data-view]:not(.auth-locked) > aside.sidebar {
  width: var(--rf-sidebar-expanded) !important;
  min-width: var(--rf-sidebar-expanded) !important;
  max-width: var(--rf-sidebar-expanded) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body[data-view]:not(.auth-locked) > aside.sidebar nav.nav button.nav-item {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

html body[data-view]:not(.auth-locked) > main.app-shell {
  width: auto !important;
  height: calc(100vh - 16px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 16px) !important;
  margin: 8px 8px 8px 0 !important;
  border-radius: var(--rf-shell-radius) 0 0 var(--rf-shell-radius) !important;
  background-clip: padding-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  box-shadow: -10px 0 30px rgba(23, 32, 51, 0.055) !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  html body[data-view]:not(.auth-locked) {
    --rf-sidebar-expanded: 252px;
    --rf-shell-radius: 24px;
  }
}

@media (max-width: 900px) {
  html body[data-view]:not(.auth-locked) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }

  html body[data-view]:not(.auth-locked) > aside.sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-view]:not(.auth-locked) > main.app-shell {
    width: auto !important;
    height: auto !important;
    min-height: calc(100vh - 16px) !important;
    max-height: none !important;
    margin: 8px !important;
    border-radius: 24px !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
  }
}

/* Calendário resumido do painel: dias reais, navegação e compromissos clicáveis. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .dashboard-calendar-title {
  border: 0 !important;
  background: transparent !important;
  color: #172033 !important;
  font: inherit !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .calendar-preview-panel .icon-only {
  border-radius: 8px !important;
  color: #9aa6b8 !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .calendar-preview-panel .icon-only:hover {
  background: #eef4f8 !important;
  color: var(--rf-link) !important;
  transform: translateY(-1px) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px 4px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-weekday {
  display: block !important;
  padding: 0 0 3px !important;
  color: #7c899f !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #172033 !important;
  font: inherit !important;
  cursor: pointer !important;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day b {
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day:hover {
  background: #eef4f8 !important;
  transform: translateY(-1px) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day.outside-month {
  color: #a7b1c0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day.today {
  box-shadow: inset 0 0 0 1.5px #2257df !important;
  color: #2257df !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day.active-day {
  background: #2257df !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-markers {
  position: absolute !important;
  bottom: 3px !important;
  left: 50% !important;
  display: flex !important;
  gap: 2px !important;
  transform: translateX(-50%) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-markers i {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-markers .deadline { background: var(--rf-link) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-markers .hearing { background: #168047 !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-markers .other { background: #475569 !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #dashboard-mini-calendar .mini-calendar-day.active-day .mini-calendar-markers i { background: #ffffff !important; }
/* Responsável automático e tarefas operacionais da Pamela */
#attendance-responsavel[readonly] {
  background: #f2f3f4;
  color: #172033;
  cursor: not-allowed;
}

.staff-task-composer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0;
  padding: 18px;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  background: #f8fbfd;
}

.staff-task-composer legend {
  padding: 0 8px;
  color: #172033;
  font-size: 14px;
  font-weight: 800;
}

.staff-task-composer .wide {
  grid-column: 1 / -1;
}

#staff-task-badge {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--rf-primary-soft);
  color: var(--rf-link);
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}

#staff-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.staff-task-card {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid #e6ebf1;
  border-left: 4px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
}

.staff-task-card.is-overdue {
  border-color: #fecaca;
  border-left-color: #ef4444;
  background: #fffafa;
}

.staff-task-card.is-today {
  border-left-color: #f47820;
  background: #fffaf5;
}

.staff-task-card.is-completed {
  opacity: .62;
}

.staff-task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.staff-task-card-head time {
  color: #6f7b91;
  font-size: 12px;
  font-weight: 700;
}

.staff-task-priority {
  display: inline-flex;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--rf-primary-soft);
  color: var(--rf-link);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.staff-task-priority.priority-alta { background: #fff7ed; color: #c2410c; }
.staff-task-priority.priority-urgente { background: #fef2f2; color: #dc2626; }
.staff-task-priority.priority-baixa { background: #ecfdf5; color: #168f55; }

.staff-task-card > strong { color: #172033; font-size: 15px; }
.staff-task-card > span { color: var(--rf-link); font-size: 13px; font-weight: 700; }
.staff-task-card > p { margin: 0; color: #6f7b91; font-size: 13px; line-height: 1.45; }
.staff-task-status-button { justify-self: start; margin-top: 6px; min-height: 34px; padding: 7px 12px; font-size: 12px; }

@media (max-width: 760px) {
  .staff-task-composer,
  #staff-task-list { grid-template-columns: 1fr; }
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-dashboard-head {
  margin-bottom: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-dashboard-head h2 {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #172033 !important;
  font-size: 16px !important;
}

.accounts-info {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid #9aa6b8;
  border-radius: 50%;
  color: #6f7b91;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-manage-link {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border: 1px solid #e3e9f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #6f7b91 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid #e7ebf0 !important;
  border-radius: 12px !important;
  background: #fafbfc !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, background 160ms ease !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card:hover,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card:focus-visible {
  transform: none !important;
  border-color: #9dc9b8 !important;
  background: #f4f6f8 !important;
  box-shadow: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-wordmark {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-content {
  display: contents !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-head {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-head strong {
  display: block !important;
  overflow: hidden !important;
  min-width: 0 !important;
  color: #172033 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-content > small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  display: block !important;
  overflow: hidden !important;
  min-width: 0 !important;
  color: #98a2b3 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-content > strong {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: end !important;
  display: block !important;
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-status {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: start !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #1f8a5b !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-status::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin-right: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-status.pending {
  color: #f47820 !important;
  background: transparent !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-trend {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.hero-metric {
  min-height: 190px !important;
  height: auto !important;
  padding: 20px !important;
  gap: 10px !important;
  border-radius: 18px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-head .dashboard-kpi-icon {
  grid-row: 1 / span 2 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-head .dashboard-kpi-icon svg {
  width: 20px !important;
  height: 20px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-head > span:not(.dashboard-kpi-icon) {
  color: #526077 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-head em {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi > strong {
  margin-top: 4px !important;
  color: #172033 !important;
  font-size: clamp(24px, 1.9vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi > small {
  min-height: 16px !important;
  color: #6f7b91 !important;
  font-size: 12px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-visual {
  min-height: 34px !important;
  margin-top: auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi footer {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #526077 !important;
  font-size: 11px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi footer b {
  opacity: 0 !important;
  transform: translateX(-5px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi:hover footer b,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi:focus-visible footer b {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

@media (max-width: 640px) {
  .bank-card-trend { display: none; }
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
}

/* PARTE INFERIOR — linha 1 (Acompanhamento da semana / Calendario / Resumo
   financeiro) mais baixa; linha 2 (Fluxo de caixa / Inadimplencia) em ~60/40;
   linha 3 (Distribuicao aos socios / Caixa futuro) mantem 2 colunas. O
   seletor ":not(.dashboard-extra)" evita atingir a linha 3, que reusa a
   mesma classe ".office-layout" com estilo proprio ja existente. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout {
  gap: 16px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout:not(.dashboard-extra) > .panel {
  height: 250px !important;
  min-height: 250px !important;
  padding: 14px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .cashflow-panel {
  padding: 26px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .cashflow-panel-head h2 {
  font-size: 19px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .overdue-dashboard-panel {
  min-height: 280px !important;
}

/* "Honorarios por area" — mesmo bug de cartao sem moldura corrigido no
   Fluxo de caixa/Inadimplencia na etapa anterior: tambem e filho direto de
   #view-banking (fora de .office-layout) e por isso herdava o reset plano. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking > .panel.dashboard-extra {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--rf-border, #e6ebf1) !important;
  border-radius: 16px !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.04) !important;
}

/* ---------------------------------------------------------------------- */
/* Central de acompanhamento pos-protocolo do parceiro                    */
/* ---------------------------------------------------------------------- */

:root {
  --pm-purple: #7C5CE7;
  --pm-purple-soft: #F1EDFC;
}

html body:not(.auth-locked) aside.sidebar .nav-item[hidden].pm-nav-item {
  display: none !important;
}

/* Garantia geral: qualquer elemento com o atributo "hidden" dentro do novo
   modulo do parceiro deve ficar oculto, mesmo quando a propria classe do
   elemento define "display" (flex/grid/block) sem considerar [hidden]. */
#view-partner-processes [hidden],
#view-partner-updates [hidden],
#view-process-detail [hidden],
#pm-tracking-dialog [hidden],
#pm-timeline-dialog [hidden],
#pm-update-dialog [hidden],
#pm-pending-dialog [hidden],
#pm-document-dialog [hidden],
#pm-notes-dialog [hidden],
.external-partner-panel [hidden] {
  display: none !important;
}

/* A regra legada ".staff-home .panel:nth-of-type(2) { display:none }" (usada para
   esconder o antigo painel "Importante") tambem atinge, por coincidencia de
   posicao, o segundo card dentro de .pm-columns. Reforcamos a visibilidade dos
   cards do novo modulo do parceiro explicitamente. */
.external-partner-panel .pm-columns {
  display: grid !important;
}

.external-partner-panel .pm-status-grid {
  display: grid !important;
}

.external-partner-panel .pm-panel {
  display: block !important;
}

.partner-booking-panel { padding: 18px; background:#fff; }
.partner-address-tools{display:flex;gap:6px}.partner-address-tools input{max-width:115px}.partner-address-tools button{min-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #c9d9e8;border-radius:7px;background:#f6f9fc;color:#164d78;font-size:9px;font-weight:700;padding:0 9px}
.partner-booking-panel .panel-head { margin-bottom: 5px; }
.partner-booking-panel .panel-head h2 { font-size:17px; }
.partner-booking-steps{display:flex;list-style:none;padding:0;margin:7px 0 18px;gap:12px;color:#61738e;font-size:11px;font-weight:700}.partner-booking-steps li{display:flex;align-items:center;gap:9px;flex:1;font-size:0}.partner-booking-steps li span{font-size:11px}.partner-booking-steps li:not(:last-child)::after{content:"";height:1px;background:#dbe3ec;flex:1;margin-left:8px}.partner-booking-steps li::before{display:grid;place-items:center;width:23px;height:23px;flex:none;border:1px solid #d3dde8;border-radius:50%;background:#fff;color:#52647d;font-size:10px}.partner-booking-steps li:nth-child(1)::before{content:"1"}.partner-booking-steps li:nth-child(2)::before{content:"2"}.partner-booking-steps li:nth-child(3)::before{content:"3"}.partner-booking-steps li:nth-child(4)::before{content:"4"}.partner-booking-steps li.active{color:#0d365b}.partner-booking-steps li.active::before{background:#0b3b61;border-color:#0b3b61;color:#fff}.partner-booking-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.partner-booking-main{display:grid;grid-template-columns:300px minmax(430px,1fr) 230px;gap:15px;align-items:stretch}.partner-field-title{display:block;margin-bottom:9px;color:#455873;font-size:11px;font-weight:800}.partner-responsible-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.partner-responsible-cards button{position:relative;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;min-height:78px;padding:12px;text-align:left;border:1px solid #d9e2ec;border-radius:9px;background:#fff;color:#172033}.partner-responsible-cards button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#06395f;color:#fff;font-size:11px;font-weight:800}.partner-responsible-cards button strong{align-self:end;font-size:11px}.partner-responsible-cards button small{align-self:start;color:#718099;font-size:9px}.partner-responsible-cards button b{display:none;position:absolute;right:6px;top:6px;width:16px;height:16px;border-radius:50%;background:#0b4773;color:#fff;text-align:center;font-size:10px}.partner-responsible-cards button.is-selected{border-color:#0a568d;box-shadow:0 0 0 1px #0a568d}.partner-responsible-cards button.is-selected b{display:block}.partner-duration-title{margin-top:24px}.partner-duration-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.partner-duration-buttons button{min-height:37px;border:1px solid #d7e0ea;border-radius:8px;background:#fff;color:#263a55;font-weight:750}.partner-duration-buttons button.is-selected{background:#073b61;color:#fff;border-color:#073b61}.partner-date-slot-panel{display:grid;grid-template-columns:47% 53%;border:1px solid #dbe3ec;border-radius:10px;min-height:250px;overflow:hidden}.partner-month-calendar{padding:15px}.partner-calendar-head{display:grid;grid-template-columns:30px 1fr 30px;align-items:center;text-align:center;margin-bottom:13px}.partner-calendar-head strong{text-transform:lowercase;font-size:12px}.partner-calendar-head button{border:0;background:transparent;color:#355b7d;font-size:22px}.partner-calendar-weekdays,.partner-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.partner-calendar-weekdays span{color:#657895;font-size:8px;font-weight:800;padding-bottom:8px}.partner-calendar-days button{height:29px;border:0;border-radius:7px;background:transparent;color:#172033;font-size:10px}.partner-calendar-days button.is-outside{color:#aab5c4}.partner-calendar-days button:disabled{opacity:.35}.partner-calendar-days button.is-selected{background:#073b61;color:#fff;font-weight:800}.partner-slot-column{display:flex;flex-direction:column;padding:16px;border-left:1px solid #e1e7ef}.partner-slot-column>strong{font-size:11px;color:#52647d}.partner-slot-column>small{margin-top:auto;color:#74849a;font-size:9px;text-align:center}.partner-slot-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:22px}.partner-slot-buttons button{min-height:38px;border:1px solid #0b5b91;border-radius:7px;background:#fff;color:#172033;font-size:11px;font-weight:800}.partner-slot-buttons button.is-selected{background:#073b61;color:#fff}.partner-slot-buttons p{grid-column:1/-1;color:#74849a;font-size:11px;text-align:center}.partner-booking-summary{display:flex;flex-direction:column;padding:15px;border:1px solid #dbe3ec;border-radius:10px}.partner-booking-summary h3{margin:0 0 7px;padding-bottom:11px;border-bottom:1px solid #e1e7ee;font-size:13px}.partner-booking-summary dl{margin:0}.partner-booking-summary dl>div{position:relative;padding:9px 0 9px 34px;border-bottom:1px solid #e6ebf1}.partner-booking-summary dl>div::before{content:"◉";position:absolute;left:5px;top:13px;color:#496580}.partner-booking-summary dt{color:#7b899e;font-size:9px}.partner-booking-summary dd{margin:2px 0 0;color:#172033;font-size:10px;font-weight:800}.partner-booking-summary .primary-button{width:100%;min-height:41px;margin-top:auto;border-radius:7px;font-size:11px}.partner-booking-summary>small{margin-top:7px;color:#718099;text-align:center;font-size:8px}.partner-booking-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:11px;padding-right:245px}.partner-booking-fields label{display:grid;gap:4px;color:#52647d;font-size:10px;font-weight:800}.partner-booking-fields input{width:100%;height:35px;box-sizing:border-box;padding:0 10px;border:1px solid #d7e0ea;border-radius:7px;background:#fff;color:#172033;font-size:10px}.partner-booking-fields input:focus{outline:2px solid #afd0e8;border-color:#0c5485}.partner-booking-result{margin-top:12px}.external-mode .office-layout:first-of-type{grid-template-columns:1fr}.external-mode .office-layout:first-of-type>.panel:last-child{display:none}.external-mode .office-layout:first-of-type .quick-actions{grid-template-columns:repeat(5,minmax(0,1fr))}.external-mode .office-layout:first-of-type .quick-actions button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px}.external-mode .office-layout:first-of-type .quick-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:1250px){.partner-booking-main{grid-template-columns:250px minmax(390px,1fr) 210px}.partner-booking-fields{padding-right:225px}}
@media(max-width:1050px){.partner-booking-main{grid-template-columns:1fr 1.5fr}.partner-booking-summary{grid-column:1/-1}.partner-booking-fields{padding-right:0}.external-mode .office-layout:first-of-type .quick-actions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.partner-booking-main,.partner-date-slot-panel,.partner-booking-fields{grid-template-columns:1fr}.partner-slot-column{border-left:0;border-top:1px solid #e1e7ef}.partner-responsible-cards{grid-template-columns:1fr}.partner-booking-steps li span{display:none}.external-mode .office-layout:first-of-type .quick-actions{grid-template-columns:1fr}.partner-booking-fields{padding-right:0}}

.pm-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 24px;
}

.pm-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  font: inherit;
  color: inherit;
}

.pm-status-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.pm-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

.pm-status-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.pm-status-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-status-copy small {
  color: var(--rf-text-secondary);
  font-size: 12px;
}

.pm-status-copy strong {
  font-size: 26px;
  line-height: 1.1;
  color: var(--rf-text);
}

.pm-status-copy em {
  font-style: normal;
  font-size: 12px;
  color: var(--rf-text-secondary);
}

.pm-status-preparo .pm-status-icon { background: var(--rf-primary-soft); color: var(--rf-primary); }
.pm-status-protocolados .pm-status-icon { background: var(--rf-success-bg); color: var(--rf-success); }
.pm-status-atualizados .pm-status-icon { background: var(--pm-purple-soft); color: var(--pm-purple); }
.pm-status-pendencias .pm-status-icon { background: var(--rf-warning-bg); color: var(--rf-warning); }

.pm-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.pm-panel .panel-head {
  margin-bottom: 10px;
}

.pm-panel-footer-button {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

.pm-week-summary {
  margin: 6px 0 4px;
}

.pm-week-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pm-week-grid > div {
  background: var(--rf-page);
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.pm-week-grid strong {
  display: block;
  font-size: 20px;
  color: var(--rf-text);
}

.pm-week-grid span {
  font-size: 12px;
  color: var(--rf-text-secondary);
}

.pm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pm-filters input[type="search"] {
  flex: 1 1 220px;
  min-width: 180px;
}

.pm-error-box {
  color: var(--rf-error);
}

.pm-update-item {
  cursor: pointer;
}

.pm-update-item.is-unread strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rf-link);
  margin-right: 6px;
}

.pm-detail-head {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.pm-detail-head h2 {
  margin: 6px 0 2px;
}

.pm-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-detail-meta {
  margin-bottom: 16px;
}

.pm-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.pm-meta-grid dt {
  font-size: 12px;
  color: var(--rf-text-secondary);
  margin-bottom: 4px;
}

.pm-meta-grid dd {
  margin: 0;
  font-weight: 600;
  color: var(--rf-text);
}

.pm-status-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--rf-primary-soft);
  border: 1px solid var(--rf-border);
  margin-bottom: 18px;
}

.pm-status-highlight-icon {
  font-size: 22px;
  line-height: 1;
}

.pm-status-highlight strong {
  display: block;
  color: var(--rf-text);
  margin-bottom: 4px;
}

.pm-status-highlight p {
  margin: 0;
  color: var(--rf-text-secondary);
}

.pm-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.pm-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pm-timeline-step {
  display: flex;
  gap: 12px;
  padding: 0 0 18px 0;
  position: relative;
}

.pm-timeline-step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -4px;
  width: 2px;
  background: var(--rf-border);
}

.pm-timeline-step:last-child::before {
  display: none;
}

.pm-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rf-disabled);
  margin-top: 4px;
  flex-shrink: 0;
}

.pm-timeline-step.is-completed .pm-timeline-dot {
  background: var(--rf-success);
}

.pm-timeline-step.is-current .pm-timeline-dot {
  background: var(--rf-link);
  box-shadow: 0 0 0 4px var(--rf-primary-soft);
}

.pm-timeline-step strong {
  color: var(--rf-text);
}

.pm-timeline-step.is-current strong {
  color: var(--rf-link);
}

.pm-timeline-step p {
  margin: 2px 0;
  color: var(--rf-text-secondary);
  font-size: 13px;
}

.pm-timeline-step small {
  color: var(--rf-text-secondary);
  font-size: 12px;
}

.pm-document-list,
.pm-pending-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-document-row,
.pm-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--rf-page);
}

.pm-document-row strong,
.pm-pending-row strong {
  display: block;
  color: var(--rf-text);
}

.pm-document-row span {
  display: block;
  color: var(--rf-text-secondary);
  font-size: 13px;
}

.pm-document-row small,
.pm-pending-row small {
  color: var(--rf-text-secondary);
  font-size: 12px;
}

.pm-pending-row p {
  margin: 2px 0;
  font-size: 13px;
  color: var(--rf-text-secondary);
}

.pm-pending-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.pm-pending-status-select {
  font-size: 12px;
  padding: 4px 8px;
}

.pm-pending-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pm-pending-status-concluida .pm-pending-row,
.pm-pending-status-recebida { opacity: .85; }

.status-chip.warning {
  background: var(--rf-warning-bg);
  color: var(--rf-warning);
}

/* --- Plano de honorarios estruturado (Bloco 2A) --- */
/* Tons de status-chip/badge usados pelo modulo de honorarios: escopados sob o container da aba
   (#pm-fees-panel), nunca como modificador global de .status-chip/.badge -- essas combinacoes
   (success/danger em status-chip; em_revisao/cancelado em badge) nao existiam antes do Bloco 2A e
   nao devem afetar nenhum outro modulo que venha a usar os mesmos nomes de tom no futuro. */
#pm-fees-panel .status-chip.success {
  background: var(--rf-success-bg, #eaf7f1);
  color: var(--rf-success, #0f7a5a);
}

#pm-fees-panel .status-chip.danger {
  background: color-mix(in srgb, var(--rf-error, #dc2626) 12%, transparent);
  color: var(--rf-error, #dc2626);
}

#pm-fees-panel .badge.em_revisao {
  background: color-mix(in srgb, var(--rf-warning, #f47820) 15%, transparent);
  color: var(--rf-warning, #f47820);
}

#pm-fees-panel .badge.cancelado {
  background: color-mix(in srgb, var(--rf-error, #dc2626) 12%, transparent);
  color: var(--rf-error, #dc2626);
}


.attendance-fees-readonly {
  background: var(--rf-page);
  border: 1px solid var(--rf-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attendance-fees-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 4px 0;
}

.attendance-fees-readonly-grid dt {
  font-size: 12px;
  color: var(--rf-text-secondary);
  margin-bottom: 2px;
}

.attendance-fees-readonly-grid dd {
  margin: 0;
  font-weight: 600;
  color: var(--rf-text);
}

.fees-plan-disclaimer {
  background: var(--rf-page);
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--rf-text-secondary);
}

/* Tabelas de simulacao de cartao / antecipacao / estimado x efetivo (fechamento da experiencia de
   cartao) -- escopado a .fees-plan-table para nao vazar em nenhuma outra tabela do sistema, mesma
   disciplina de isolamento ja usada pelo restante desta folha. */
.fees-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 6px 0;
}

.fees-plan-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--rf-border);
  color: var(--rf-text);
}

.fees-plan-table td:first-child {
  color: var(--rf-text-secondary);
}

.fees-plan-table td:last-child {
  text-align: right;
  font-weight: 600;
}

.fees-plan-summary {
  background: var(--rf-page);
  border: 1px solid var(--rf-border);
  border-radius: 14px;
  padding: 16px;
  margin-top: 8px;
}

.fees-plan-summary h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--rf-text);
}

.fees-plan-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 0;
}

.fees-plan-summary dl > div dt {
  font-size: 12px;
  color: var(--rf-text-secondary);
  margin-bottom: 2px;
}

.fees-plan-summary dl > div dd {
  margin: 0;
  font-weight: 600;
  color: var(--rf-text);
}

.fees-plan-summary-status {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}

.fees-plan-summary-status.is-complete { color: var(--rf-success, #0f7a5a); }
.fees-plan-summary-status.is-incomplete { color: var(--rf-warning, #f47820); }

.fees-plan-errors {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--rf-error, #dc2626);
  font-size: 13px;
}

.fees-plan-notify-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.fees-plan-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
}

.pm-fees-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.pm-fees-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 10px 0 18px;
}

.pm-fees-status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-fees-status-item > span {
  font-size: 12px;
  color: var(--rf-text-secondary);
}

/* Bloco de status da cobranca Asaas -- deliberadamente discreto: mesma tipografia e mesmos chips do
   restante da aba de honorarios (paleta Cinza Neve ja definida em :root), so com uma borda lateral
   que o separa visualmente da linha de badges acima. Nenhuma cor nova e introduzida aqui. */
.pm-fees-collection-status {
  border-left: 3px solid var(--rf-border, #e3e6ea);
  padding: 2px 0 2px 14px;
  margin: 0 0 18px;
}

.pm-fees-collection-status .fees-plan-disclaimer {
  margin: 6px 0 0;
}

.pm-fees-collection-status .pm-fees-actions:empty {
  display: none;
}

.pm-fees-adopt-dialog {
  max-width: 480px;
}

.pm-fees-adopt-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  background: var(--rf-page);
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  padding: 14px;
  margin: 4px 0 0;
}

.pm-fees-adopt-summary dt {
  font-size: 12px;
  color: var(--rf-text-secondary);
  margin-bottom: 2px;
}

.pm-fees-adopt-summary dd {
  margin: 0;
  font-weight: 600;
  color: var(--rf-text);
}

.pm-fees-legacy-card,
.pm-fees-structured-card,
.pm-fees-actions-card,
.pm-fees-edit-card,
.pm-fees-history-card {
  margin-top: 16px;
}

.pm-fees-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-fees-history-list li {
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--rf-page);
}

.pm-fees-history-list li strong {
  display: block;
  color: var(--rf-text);
  font-size: 13px;
}

.pm-fees-history-list li span {
  display: block;
  color: var(--rf-text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.pm-fees-history-list li small {
  display: block;
  color: var(--rf-text-secondary);
  font-size: 11px;
  margin-top: 4px;
}

.fees-legacy-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rf-text-secondary, var(--color-text-secondary, #64748b));
  padding: 6px 0;
  list-style: revert;
}

.fees-legacy-details[open] summary {
  margin-bottom: 10px;
}

.pm-client-message {
  background: var(--rf-page);
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  padding: 14px;
  color: var(--rf-text);
  white-space: pre-wrap;
}

.pm-client-message-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pm-communication-history {
  margin-top: 12px;
}

.pm-communication-entry {
  font-size: 13px;
  color: var(--rf-text-secondary);
  margin: 4px 0;
}

.pm-internal-notes-text {
  white-space: pre-wrap;
  color: var(--rf-text);
}

.checkbox-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}

.checkbox-field input[type="checkbox"] {
  width: auto;
}

@media (max-width: 1080px) {
  .pm-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-columns,
  .pm-detail-columns,
  .pm-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .pm-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-detail-actions {
    width: 100%;
  }

  .pm-detail-actions .secondary-button {
    flex: 1 1 45%;
  }
}

.pm-detail-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border, var(--rf-border));
  scrollbar-width: thin;
}

.pm-detail-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted, var(--rf-text-secondary));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pm-detail-tabs button.active {
  color: var(--color-primary, var(--rf-primary));
}

.pm-detail-tabs button.active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-primary, var(--rf-primary));
}

.pm-medical-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px;
  align-items: start;
  color: var(--color-text, var(--rf-text));
}

.pm-medical-main,
.pm-medical-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.pm-medical-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pm-medical-summary-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 156px;
  padding: 17px;
  background: var(--color-surface, var(--rf-surface));
  border-color: var(--color-border, var(--rf-border));
}

.pm-medical-summary-card > span,
.pm-medical-summary-card > small,
.pm-medical-side small,
.pm-medical-side p {
  color: var(--color-text-muted, var(--rf-text-secondary));
}

.pm-medical-summary-card > span {
  min-height: 36px;
  font-size: 12px;
  line-height: 1.4;
}

.pm-medical-summary-card > strong {
  margin: 10px 0;
  color: var(--color-text, var(--rf-text));
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pm-medical-summary-card > small:last-child {
  margin-top: auto;
}

.pm-medical-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-medical-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 0 0 20px;
}

.pm-medical-timeline-step::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 0;
  left: 16px;
  width: 2px;
  background: var(--color-border, var(--rf-border));
}

.pm-medical-timeline-step:last-child::before { display: none; }

.pm-medical-timeline-index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border, var(--rf-border));
  border-radius: 50%;
  background: var(--color-surface, var(--rf-surface));
  color: var(--color-text-muted, var(--rf-text-secondary));
  font-size: 12px;
  font-weight: 800;
}

.pm-medical-timeline-step.is-completed .pm-medical-timeline-index,
.pm-medical-timeline-step.is-current .pm-medical-timeline-index {
  border-color: var(--color-primary, var(--rf-primary));
  color: var(--color-surface, #fff);
  background: var(--color-primary, var(--rf-primary));
}

.pm-medical-timeline-step.is-current > div {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--color-primary, var(--rf-primary)) 35%, var(--color-border, var(--rf-border)));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary, var(--rf-primary)) 7%, var(--color-surface, var(--rf-surface)));
}

.pm-medical-timeline-step strong { color: var(--color-text, var(--rf-text)); }
.pm-medical-timeline-step p { margin: 3px 0; color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 13px; }
.pm-medical-timeline-step small { color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 12px; }
.pm-medical-timeline-step.is-future { opacity: .52; }

.pm-medical-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 4px;
}

.pm-medical-actions:empty { display: none; }
.pm-medical-contract-missing {
  font-size: 12.5px;
  color: var(--color-danger, #b42318);
  background: var(--color-danger-soft, rgba(180, 35, 24, 0.08));
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0 10px;
}
.pm-medical-side .panel { background: var(--color-surface, var(--rf-surface)); border-color: var(--color-border, var(--rf-border)); }
.pm-medical-side strong { display: block; color: var(--color-text, var(--rf-text)); line-height: 1.45; }
.pm-medical-side p { margin: 10px 0; line-height: 1.5; }

@media (max-width: 1180px) {
  .pm-medical-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-medical-layout { grid-template-columns: minmax(0, 1fr); }
  .pm-medical-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pm-detail-tabs { margin-right: -4px; margin-left: -4px; }
  .pm-detail-tabs button { min-height: 43px; padding: 0 11px; font-size: 13px; }
  .pm-medical-summary-grid,
  .pm-medical-side { grid-template-columns: minmax(0, 1fr); }
  .pm-medical-summary-card { min-height: 0; }
  .pm-medical-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pm-medical-actions button { width: 100%; }
}
/* Configuração de agenda: formulários próprios, sem herdar o layout dos cartões bancários. */
.integration-grid .scheduling-settings-tile,
.integration-grid .scheduling-blocks-tile {
  align-content: start;
  background: #fff;
  color: #172033;
  min-height: 0;
}
.scheduling-settings-tile { grid-column: span 2; }
.scheduling-settings-tile textarea { min-height: 120px; width: 100%; box-sizing: border-box; resize: vertical; }
.scheduling-settings-tile label,
.scheduling-blocks-tile label { display: grid; gap: 6px; color: #34415a; font-weight: 700; }
.scheduling-settings-tile input,
.scheduling-settings-tile select,
.scheduling-blocks-tile input,
.scheduling-blocks-tile select { width: 100%; min-height: 42px; box-sizing: border-box; }
.scheduling-settings-tile #availability-durations { min-height: 74px; }
.scheduling-settings-tile #availability-paused { width: auto; min-height: 0; margin-right: 8px; }
.scheduling-settings-tile > label:last-of-type { display: flex; align-items: center; }
.scheduling-settings-tile > button,
.scheduling-blocks-tile > button { margin-top: 10px; }
.scheduling-blocks-tile { grid-column: span 2; }
.scheduling-blocks-tile #availability-block-list { margin-top: 8px; color: #64748b; }
@media (max-width: 960px) {
  .scheduling-settings-tile, .scheduling-blocks-tile { grid-column: span 1; }
}

/* Painel do parceiro: proporções finais do layout de agendamento. */
html body.external-mode:not(.auth-locked) .staff-home {
  width: 100% !important;
  max-width: none !important;
}
html body.external-mode:not(.auth-locked) .staff-home .office-layout {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
html body.external-mode:not(.auth-locked) .staff-home .office-layout > .panel:first-child {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 18px !important;
}
html body.external-mode:not(.auth-locked) .staff-home .quick-actions {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html body.external-mode:not(.auth-locked) .staff-home .quick-actions .primary-button,
html body.external-mode:not(.auth-locked) .staff-home .quick-actions .secondary-button {
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  gap: 9px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}
html body.external-mode:not(.auth-locked) .staff-home .quick-actions .partner-action-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  color: inherit !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
html body.external-mode:not(.auth-locked) .external-partner-panel {
  width: 100% !important;
  margin-top: 14px !important;
}
html body.external-mode:not(.auth-locked) .partner-booking-panel {
  width: 100% !important;
  box-sizing: border-box !important;
}
html body.external-mode:not(.auth-locked) .partner-booking-main {
  grid-template-columns: minmax(280px, 30%) minmax(480px, 1fr) minmax(210px, 20%) !important;
}
html body.external-mode:not(.auth-locked) .partner-booking-fields {
  padding-right: calc(20% + 15px) !important;
}
html body.external-mode:not(.auth-locked) .external-partner-panel > .pm-status-grid {
  margin-top: 28px !important;
}

@media (max-width: 1180px) {
  html body.external-mode:not(.auth-locked) .partner-booking-main {
    grid-template-columns: minmax(240px, .8fr) minmax(430px, 1.4fr) !important;
  }
  html body.external-mode:not(.auth-locked) .partner-booking-summary { grid-column: 1 / -1 !important; }
  html body.external-mode:not(.auth-locked) .partner-booking-fields { padding-right: 0 !important; }
}
@media (max-width: 900px) {
  html body.external-mode:not(.auth-locked) .staff-home .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.external-mode:not(.auth-locked) .partner-booking-main { grid-template-columns: 1fr !important; }
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .metric-mini-bars,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .metric-progress {
  height: 16px !important;
}

/* PARTE INFERIOR — reduz um pouco mais a altura fixa dos paineis da
   primeira linha (Acompanhamento / Calendario / Resumo) para cortar
   rolagem vertical excedente sem gerar corte de conteudo. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout:not(.dashboard-extra) > .panel {
  height: 236px !important;
  min-height: 236px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout:not(.dashboard-extra) > .panel .panel-head {
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout:not(.dashboard-extra) > .panel .panel-head h2 {
  white-space: nowrap !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout:not(.dashboard-extra) > .panel .panel-actions {
  flex: 0 0 auto !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .office-layout:not(.dashboard-extra) > .panel .panel-actions .secondary-button {
  white-space: nowrap !important;
}

/* ==========================================================================
   REDESENHO ESTRUTURAL — Painel financeiro (dashboard-financial-page)
   Estrutura DOM real: #view-banking > .dashboard-financial-page >
   .dashboard-primary-kpis, .dashboard-main-grid (left/center/right),
   .dashboard-cashflow-section. Este bloco é a fonte única de verdade para
   o layout dessas camadas; as regras antigas por .kpi-primary-grid /
   .dashboard-columns / .cashflow-panel-full acima continuam servindo de
   base para os componentes internos (ações rápidas, agenda, contas etc.)
   e não são duplicadas aqui.
   ========================================================================== */

/* #view-banking é display:grid com uma única coluna implícita; sem
   minmax(0,1fr) essa coluna cresce até o min-content do maior filho e
   estoura a largura da viewport (fica invisível por causa do
   overflow-x:hidden global, cortando o último KPI e o restante do corpo). */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking.view.active {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-financial-page {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  gap: 16px !important;
  margin: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-main-grid,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-cashflow-section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-center-column,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-right-column {
  min-width: 0 !important;
}

/* Grid principal — proporções exatas pedidas para a referência. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-main-grid {
  grid-template-columns: minmax(230px, 0.75fr) minmax(640px, 2.7fr) minmax(270px, 0.95fr) !important;
}

@media (max-width: 1500px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-main-grid {
    grid-template-columns: minmax(210px, 0.75fr) minmax(0, 2.7fr) minmax(250px, 0.95fr) !important;
  }
}

/* KPIs — cores exatas da paleta institucional pedida. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-received { --kpi-accent: #1f8a5b; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-pending { --kpi-accent: #356dcb; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-cases { --kpi-accent: #7457c5; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-contracts { --kpi-accent: #b65b3d; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-kpi.is-urgent { --kpi-accent: #d64545; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .dashboard-kpi-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .dashboard-kpi-icon svg {
  width: 17px !important;
  height: 17px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .dashboard-kpi-head {
  grid-template-columns: 30px minmax(0, 1fr) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .metric,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .hero-metric {
  min-height: 150px !important;
  max-height: 165px !important;
  height: auto !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  border: 1px solid var(--rf-border, #e7ebf0) !important;
  background: var(--rf-surface, #ffffff) !important;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.05) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .dashboard-kpi-head > span:nth-child(2) {
  color: var(--rf-text-secondary, #667085) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: normal !important;
}

/* Valor do KPI — 28-34px pedido, sem corte: permite quebra em vez de
   truncar quando o número real é longo, ao invés do clamp em cqw que
   reduzia o texto até 12-21px. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .dashboard-kpi > strong,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis .dashboard-kpi.hero-metric > strong {
  font-size: clamp(24px, 2.3vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* ==========================================================================
   Ações rápidas — ícones um pouco menores conforme referência (34-38px).
   ========================================================================== */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  min-height: 48px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action > span:first-child {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action > span:first-child svg {
  width: 17px !important;
  height: 17px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action-copy strong {
  font-size: 13.5px !important;
}

/* ==========================================================================
   Fluxo de caixa — imediatamente abaixo do grid principal, largura total.
   ========================================================================== */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-cashflow-section {
  margin: 0 !important;
}

/* ==========================================================================
   Título da página — 28-30px pedido (era 32-40px).
   ========================================================================== */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) .topbar h1 {
  font-size: clamp(26px, 1.7vw, 30px) !important;
}

/* Fundo geral da página financeira, conforme paleta pedida. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell {
  background: var(--rf-page, #f7f8fa) !important;
}

/* Agenda dominante — a coluna central deve esticar até a altura da
   coluna direita (a mais alta) em vez de ficar com min-height fixo e
   deixar um vão vazio abaixo de "Atividades de hoje / Próximos
   compromissos". align-items:start no grid principal impede o stretch
   por padrão; forçamos stretch só na coluna central. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-center-column {
  align-self: stretch !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel {
  flex: 1 1 auto !important;
  height: auto !important;
}

/* ==========================================================================
   AJUSTE FINO — especificação visual definitiva da "primeira dobra"
   (Painel financeiro dos sócios). Continuação do REDESENHO ESTRUTURAL
   acima: mesma fonte única de verdade, apenas os números/cores finais
   pedidos (container, KPIs, ações rápidas, agenda, coluna direita,
   responsividade). Escopo idêntico ao resto do arquivo — não afeta
   .staff-mode nem .external-mode.
   ========================================================================== */

/* 1) Área principal — largura total, paddings enxutos, sem clipping. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 20px 28px 24px !important;
  overflow-x: hidden !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-financial-page {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 5) KPIs superiores — 5 na mesma linha, 148-158px, paleta pastel exata. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis {
  gap: 14px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.hero-metric {
  min-height: 148px !important;
  max-height: 158px !important;
  padding: 18px 20px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi-head > span:not(.dashboard-kpi-icon) {
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi > strong {
  font-size: clamp(24px, 1.9vw, 30px) !important;
  line-height: 1.05 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi > small {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--rf2-text-secondary, #718096) !important;
}

/* Ícones — caixa 40x40, radius 12, stroke fino. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi-head .dashboard-kpi-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi-head .dashboard-kpi-icon svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 1.75 !important;
}

/* Cores exatas por indicador — valor + fundo pastel do ícone. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-received .dashboard-kpi-icon { background: var(--rf2-pastel-green, #eaf4ee) !important; color: var(--rf2-green, #60784a) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-received > strong { color: var(--rf2-green, #60784a) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-pending .dashboard-kpi-icon { background: var(--rf2-pastel-blue, #eaf1f7) !important; color: var(--rf2-blue-gray, #52718b) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-pending > strong { color: var(--rf2-blue-gray, #52718b) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-cases .dashboard-kpi-icon { background: var(--rf2-pastel-violet, #f0ebf5) !important; color: var(--rf2-violet, #745a92) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-cases > strong { color: var(--rf2-violet, #745a92) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-contracts .dashboard-kpi-icon { background: var(--rf2-pastel-terracotta, #f7ece7) !important; color: var(--rf2-terracotta, #b35a3c) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-contracts > strong { color: var(--rf2-terracotta, #b35a3c) !important; }

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-urgent .dashboard-kpi-icon { background: var(--rf2-pastel-alert, #f8ede8) !important; color: var(--rf2-alert, #8f3f2e) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-kpi.is-urgent > strong { color: var(--rf2-alert, #8f3f2e) !important; }

/* Badge compacto no lugar da barra de progresso larga/vazia. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi-visual {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi-head em {
  display: inline-flex !important;
  align-items: center !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  margin-top: 2px !important;
  height: 25px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* 6) Grid principal — agenda dominante. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-main-grid {
  grid-template-columns: minmax(260px, 0.82fr) minmax(620px, 2.35fr) minmax(280px, 0.9fr) !important;
  gap: 18px !important;
}

/* 7) Ações rápidas — itens 64px, fundo cinza, sem seta/descrição/subtítulo. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-panel-title {
  font-size: 18px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-panel-head::after {
  content: "Atalhos do dia a dia";
  display: block;
  margin-top: 3px;
  color: var(--rf2-text-secondary, #718096);
  font-size: 13px;
  font-weight: 400;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .quick-action-grid {
  gap: 10px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action {
  min-height: 64px !important;
  height: 64px !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action > span:first-child {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 13px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action > span:first-child svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.75 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-left-column .quick-action-copy strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #536170 !important;
}

/* Ícones e cores por ação — paleta pastel exata pedida. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .quick-action-grid > .quick-action[data-view-jump="receivables"] > span:first-child {
  background: #e6f2eb !important;
  color: #438765 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left #quick-expense-button > span:first-child {
  background: #f5e9e4 !important;
  color: #944531 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .quick-action-grid > .quick-action[data-open-attendance] > span:first-child {
  background: #e7eff6 !important;
  color: #53789a !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .quick-action-grid > .quick-action[data-view-jump="calendar"] > span:first-child {
  background: #fff2d8 !important;
  color: #a97922 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .quick-action-grid > .quick-action[data-view-jump="collections"] > span:first-child {
  background: #efeaf6 !important;
  color: #765c9a !important;
}

/* 8) Resumo do dia — mesmo sistema de cartão, sem altura exagerada. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-left .day-summary-panel {
  margin-top: 16px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
}

/* 9) Agenda — apenas o cartão externo; estrutura interna preservada. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel {
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 18px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  background: var(--rf2-card-bg, #ffffff) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-head {
  padding: 18px 20px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-head h2 {
  font-size: 18px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-head p {
  font-size: 12.5px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel .segmented {
  height: 36px !important;
  align-items: center !important;
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
  border-radius: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .agenda-week-panel .segmented button.active {
  background: #ffffff !important;
  color: #944531 !important;
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.1) !important;
}

/* 10-13) Coluna direita — mesmo sistema de cartão em todos os painéis. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right > .panel,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-col-right .accounts-dashboard-panel {
  border-radius: 18px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  background: var(--rf2-card-bg, #ffffff) !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}

/* Resumo financeiro. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut-panel .panel-head h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut-panel .link-button {
  color: var(--rf2-terracotta, #b35a3c) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut {
  width: 116px !important;
  height: 116px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-row span {
  font-size: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-row strong {
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-success { background: var(--rf2-green, #60784a) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-danger { background: var(--rf2-terracotta, #b35a3c) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .legend-info { background: var(--rf2-blue-gray, #52718b) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut-base { stroke: var(--rf2-pastel-terracotta, #f7ece7) !important; }
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .finance-donut-share { stroke: var(--rf2-green, #60784a) !important; }

/* Contas — sem o card "Saldo consolidado" (dado/função seguem disponíveis
   via .accounts-manage-link → Configurações; #metric-consolidated-balance
   e afins continuam no DOM só recebendo texto por JS, sem leitura de
   layout, então ocultar aqui é seguro). */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-balance-stat {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-dashboard-head h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-manage-link {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--rf2-terracotta, #b35a3c) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .accounts-info {
  display: none !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card {
  min-height: 70px !important;
  height: 70px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card:last-child {
  margin-bottom: 0 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-wordmark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-head strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rf2-text, #1c2737) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-content > small {
  font-size: 11px !important;
  color: var(--rf2-text-secondary, #718096) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .bank-card-content > strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rf2-text, #1c2737) !important;
}

/* Inadimplência / Caixa futuro — mesmo sistema, estado vazio compacto. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .overdue-dashboard-panel .overdue-panel-head h2,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .forecast-compact-panel .forecast-card-title h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .overdue-dashboard-panel .empty-box {
  padding: 24px 12px !important;
  font-size: 12px !important;
  text-align: center !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .forecast-compact-panel {
  padding: 0 !important;
}

/* 14) Responsividade — sem transform:scale, reorganização progressiva. */
@media (min-width: 1200px) and (max-width: 1499px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-main-grid {
    grid-template-columns: minmax(230px, 0.78fr) minmax(560px, 2.2fr) minmax(260px, 0.85fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 1100px) {
  html body[data-view="banking"]:not(.auth-locked):not(.external-mode) #view-banking .dashboard-primary-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Reforço final — mesma especificidade de regras herdadas do bloco
   "Painel financeiro — botão Novo registro" (linha ~3600): como o
   seletor é idêntico, a ordem no arquivo decide o empate; repetir aqui
   (última posição do arquivo) garante que a cor terracota da
   especificação prevaleça sem precisar remover/duplicar o bloco antigo. */
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  width: 160px !important;
  min-width: 150px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .top-period-control {
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
}

/* KPIs — cada card vira um container de inline-size: título, badge, valor,
   descrição e rodapé passam a reagir à largura real do próprio card (cqw),
   não à viewport. Altura levemente maior que o layout anterior (148-158px)
   para caber a descrição em até 2 linhas sem sobrepor o rodapé — todos os
   cards da linha acompanham via min-height compartilhado. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi,
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi.hero-metric {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  overflow: hidden !important;
  container-type: inline-size !important;
  container-name: kpi-card !important;
  min-height: 176px !important;
  max-height: none !important;
  height: auto !important;
}

/* Título — acompanha a largura do card (cqw) e quebra palavra longa
   ("consolidado") em vez de vazar horizontalmente em colunas estreitas. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi-head > span:not(.dashboard-kpi-icon) {
  font-size: clamp(11px, 6cqw, 13px) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 0 !important;
}

/* Descrição — cabe em até 2 linhas para qualquer texto real do sistema
   (testado); reticências permanecem só como rede de segurança para um
   texto hipotético e anormalmente longo, nunca acionada em uso normal. */
html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi > small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  min-height: 0 !important;
  font-size: clamp(10.5px, 5.6cqw, 12.5px) !important;
  line-height: 1.3 !important;
}

html body[data-view="banking"]:not(.auth-locked):not(.external-mode) main.app-shell #view-banking .dashboard-primary-kpis .dashboard-kpi footer {
  margin-top: auto !important;
}

/* ==========================================================================
   REDESENHO — Página Clientes (#view-clients)
   Somente visual. IDs, handlers e estrutura de dados preservados.
   ========================================================================== */

#view-clients.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

#view-clients .client-legacy-head[hidden] {
  display: none !important;
}

#view-clients .client-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#view-clients .client-kpi-card {
  background: var(--rf2-card-bg, #fff) !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
}

#view-clients .client-kpi-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rf2-text-secondary, #718096) !important;
}

#view-clients .client-kpi-value {
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .client-kpi-trend {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--rf2-green, #60784a) !important;
}

#view-clients .client-list-panel {
  background: var(--rf2-card-bg, #fff) !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 16px !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#view-clients .client-list-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  flex-wrap: wrap !important;
}

#view-clients .client-search-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 320px !important;
  min-width: 240px !important;
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
}

#view-clients .client-search-icon {
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  stroke: var(--rf2-text-tertiary, #98a2b3) !important;
  fill: none !important;
  stroke-width: 2 !important;
}

#view-clients .client-search-field input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 14px !important;
  color: var(--rf2-text, #1c2737) !important;
  width: 100% !important;
}

#view-clients .client-filter-select {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  background: #fff !important;
}

#view-clients .client-filter-icon {
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
  stroke: var(--rf2-text-secondary, #718096) !important;
  fill: none !important;
  stroke-width: 2 !important;
}

#view-clients .client-filter-select select {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--rf2-text, #1c2737) !important;
}

#view-clients .client-count-caption {
  font-size: 12.5px !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

#view-clients .client-list-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

#view-clients .client-export-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

#view-clients .client-export-icon {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

#view-clients .client-attendance-link {
  font-size: 12.5px !important;
  color: var(--rf2-text-secondary, #718096) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

#view-clients .client-table-wrap {
  padding: 8px 14px 16px !important;
}

#view-clients table.client-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

#view-clients table.client-table thead th {
  text-align: left !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
  padding: 0 14px 10px !important;
  border: none !important;
  background: transparent !important;
}

#view-clients table.client-table thead {
  background: transparent !important;
  border-bottom: 1px solid var(--rf2-card-border, #e1e5e9) !important;
}

#view-clients table.client-table tbody tr {
  background: var(--rf2-pastel-gray, #f6f7f8) !important;
}

#view-clients table.client-table tbody td {
  padding: 14px !important;
  border: none !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  color: var(--rf2-text, #1c2737) !important;
}

#view-clients table.client-table tbody tr td:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

#view-clients table.client-table tbody tr td:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

#view-clients .client-name-cell {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#view-clients .client-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex: none !important;
}

#view-clients .client-avatar-1 { background: var(--rf2-green, #60784a) !important; }
#view-clients .client-avatar-2 { background: var(--rf2-blue-gray, #52718b) !important; }
#view-clients .client-avatar-3 { background: var(--rf2-terracotta, #b35a3c) !important; }
#view-clients .client-avatar-4 { background: var(--rf2-violet, #745a92) !important; }
#view-clients .client-avatar-5 { background: #c99a3e !important; }

#view-clients .client-name-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#view-clients .client-name-info strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .client-name-info small {
  font-size: 12.5px !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

#view-clients .client-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

#view-clients .client-status-pill::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

#view-clients .client-status-pill.is-ativo {
  background: var(--rf2-pastel-green, #eaf4ee) !important;
  color: var(--rf2-green, #60784a) !important;
}

#view-clients .client-status-pill.is-finalizado {
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
  color: var(--rf2-text-secondary, #718096) !important;
}

#view-clients .client-status-pill.is-teste {
  background: var(--rf2-pastel-terracotta, #f7ece7) !important;
  color: var(--rf2-terracotta, #b35a3c) !important;
}

#view-clients .client-row-action {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#view-clients .client-row-action svg {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--rf2-text-secondary, #718096) !important;
  fill: none !important;
  stroke-width: 2 !important;
}

@media (max-width: 1200px) {
  #view-clients .client-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Topbar da view Clientes: substitui o card do usuário pelo botão real
   "Novo registro" (mesmo elemento/handler já usado no Painel, apenas
   tornado visível aqui via CSS — nenhuma lógica nova). */
html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar #header-user-card,
html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar #header-user-dropdown {
  display: none !important;
}

html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 160px !important;
  min-width: 150px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
  cursor: pointer !important;
}

html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
  outline: none !important;
}

html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-icon {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="clients"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-chevron {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
}

/* ==========================================================================
   Gestao de Clientes e Casos — pagina unificada (Clientes + Atendimento)
   ========================================================================== */

/* Item de nav "Atendimento" fundido em "Central de Casos": o botao
   continua no DOM (varios pontos de app.js clicam nele programaticamente
   para navegar/filtrar), mas nunca deve aparecer na sidebar visivel. */
aside.sidebar .nav-item.nav-item-shim {
  display: none !important;
}

/* Topbar fixa ao rolar (mesmo padrao ja usado em Recebimentos). O sticky
   "top:0" gruda na borda do padding-box do container rolante
   (main.app-shell tem padding-top:28px por padrao), nao na borda real da
   area de rolagem — por isso o padding-top do container e zerado apenas
   nesta view e devolvido como padding-top da propria topbar: a posicao
   visual do titulo/controles fica identica, mas a topbar passa a cobrir
   100% da rolagem, sem conteudo vazando por cima ou por tras dela. */
html body[data-view="clients"]:not(.auth-locked) main.app-shell {
  padding-top: 0 !important;
}

html body[data-view="clients"]:not(.auth-locked) main.app-shell header.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  background: var(--rf-page, #f7f8fa) !important;
  padding-top: 28px !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

@media (max-width: 1180px) {
  html body[data-view="clients"]:not(.auth-locked) main.app-shell {
    padding-top: 0 !important;
  }

  html body[data-view="clients"]:not(.auth-locked) main.app-shell header.topbar {
    padding-top: 24px !important;
  }
}

#view-clients .crm-new-case-button {
  display: none !important;
  margin: 0 !important;
}

#view-clients .crm-head h2 {
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .crm-legacy-metric-grid[hidden] {
  display: none !important;
}

#view-clients .crm-head-subtitle {
  display: block !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 13.5px !important;
  margin-top: 2px !important;
}

#view-clients .crm-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
}

#view-clients .crm-kpi-grid .client-kpi-card {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 18px 20px !important;
}

#view-clients .crm-kpi-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  flex: none !important;
}

#view-clients .crm-kpi-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#view-clients .crm-kpi-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#view-clients .crm-kpi-body .client-kpi-value {
  font-size: 26px !important;
  white-space: nowrap !important;
}

#view-clients .crm-kpi-body .client-kpi-trend {
  color: var(--rf2-green, #60784a) !important;
}

#view-clients .crm-kpi-body .client-kpi-trend.is-urgent-trend {
  color: var(--rf2-alert, #8f3f2e) !important;
  font-weight: 700 !important;
}

#view-clients .crm-kpi-terracotta .crm-kpi-icon { background: var(--rf2-pastel-terracotta, #f7ece7) !important; color: var(--rf2-terracotta, #b35a3c) !important; }
#view-clients .crm-kpi-green .crm-kpi-icon { background: var(--rf2-pastel-green, #eaf4ee) !important; color: var(--rf2-green, #60784a) !important; }
#view-clients .crm-kpi-blue .crm-kpi-icon { background: var(--rf2-pastel-blue, #eaf1f7) !important; color: var(--rf2-blue-gray, #52718b) !important; }
#view-clients .crm-kpi-lilac .crm-kpi-icon { background: var(--rf2-pastel-violet, #f0ebf5) !important; color: var(--rf2-violet, #745a92) !important; }
#view-clients .crm-kpi-amber .crm-kpi-icon { background: #fbf1de !important; color: #a9752c !important; }

@media (max-width: 1400px) {
  #view-clients .crm-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #view-clients .crm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #view-clients .crm-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#view-clients .crm-tabs {
  display: flex !important;
  gap: 6px !important;
  margin: 4px 0 16px !important;
  border-bottom: 1px solid var(--rf2-card-border, #e1e5e9) !important;
}

#view-clients .crm-tab-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rf2-text-secondary, #718096) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}

#view-clients .crm-tab-button svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex: none !important;
}

#view-clients .crm-tab-button.active {
  color: var(--rf2-terracotta, #b35a3c) !important;
  border-bottom-color: var(--rf2-terracotta, #b35a3c) !important;
}

#view-clients .crm-tab-panel {
  display: none !important;
}

#view-clients .crm-tab-panel.active {
  display: block !important;
}

#view-clients .crm-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 2.4fr) minmax(280px, 0.95fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 1200px) {
  #view-clients .crm-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#view-clients .crm-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

#view-clients .crm-side-panel {
  background: var(--rf2-card-bg, #fff) !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 16px !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  padding: 16px 18px !important;
}

#view-clients .crm-side-panel .panel-head {
  padding: 0 0 12px !important;
  border-bottom: none !important;
}

#view-clients .crm-side-panel .panel-head h2 {
  font-size: 14.5px !important;
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .crm-recent-list,
#view-clients .crm-urgent-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#view-clients .crm-recent-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

#view-clients .crm-recent-item:hover {
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

#view-clients .crm-recent-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--rf2-pastel-blue, #eaf1f7) !important;
  color: var(--rf2-blue-gray, #52718b) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex: none !important;
}

#view-clients .crm-recent-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#view-clients .crm-recent-body strong {
  font-size: 13.5px !important;
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .crm-recent-body span {
  font-size: 12px !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

#view-clients .crm-urgent-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: var(--rf2-pastel-alert, #f8ede8) !important;
  cursor: pointer !important;
}

#view-clients .crm-urgent-item strong {
  font-size: 13px !important;
  color: var(--rf2-alert, #8f3f2e) !important;
}

#view-clients .crm-urgent-item span {
  font-size: 12px !important;
  color: var(--rf2-text-secondary, #718096) !important;
}

#view-clients .crm-quick-actions {
  margin-top: 20px !important;
  background: var(--rf2-card-bg, #fff) !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 16px !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  padding: 18px 20px !important;
}

#view-clients .crm-quick-actions .panel-head {
  padding: 0 0 12px !important;
  border-bottom: none !important;
}

#view-clients .crm-quick-actions .quick-action-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  #view-clients .crm-quick-actions .quick-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #view-clients .crm-quick-actions .quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#view-clients .crm-quick-actions .quick-action > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #fff !important;
  flex: none !important;
}

#view-clients .crm-quick-actions .quick-action > span:first-child svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: var(--rf2-terracotta, #b35a3c) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#view-clients .crm-quick-actions .quick-action > b {
  margin-left: auto !important;
  flex: none !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

#view-clients .crm-quick-actions .quick-action {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  height: 64px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 11px !important;
  background: #fff !important;
  cursor: pointer !important;
  text-align: left !important;
  min-width: 0 !important;
}

#view-clients .crm-quick-actions .quick-action-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}

#view-clients .crm-quick-actions .quick-action-copy strong,
#view-clients .crm-quick-actions .quick-action-copy small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

#view-clients .crm-quick-actions .quick-action-copy strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .crm-quick-actions .quick-action-copy small {
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

/* Coluna "Casos" com contagem agrupada (X casos · Y atendimentos abertos)
   e expansor da lista de casos do cliente */
#view-clients .client-cases-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--rf2-text, #1c2737) !important;
  cursor: pointer !important;
  text-align: left !important;
}

#view-clients .client-cases-toggle-icon {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--rf2-text-tertiary, #98a2b3) !important;
  fill: none !important;
  stroke-width: 2 !important;
  transition: transform 0.15s ease !important;
}

#view-clients tr.crm-client-row.is-expanded .client-cases-toggle-icon {
  transform: rotate(-90deg) !important;
}

#view-clients tr.crm-client-detail-row td {
  background: var(--rf2-pastel-gray, #f6f7f8) !important;
  padding: 0 14px 12px !important;
  border-radius: 0 0 12px 12px !important;
}

#view-clients .crm-client-cases {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 4px 4px 8px !important;
}

#view-clients .crm-client-case-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #fff !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

#view-clients .crm-client-case-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#view-clients .crm-client-case-main strong {
  font-size: 13.5px !important;
  color: var(--rf2-navy, #173653) !important;
}

#view-clients .crm-client-case-main small {
  flex-basis: 100% !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 12px !important;
}

#view-clients .crm-client-case-meta {
  display: flex !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

#view-clients .crm-client-case-actions {
  display: flex !important;
  gap: 8px !important;
}

/* Menu de acoes discreto por linha de cliente (substitui multiplos botoes) */
#view-clients .client-row-menu-wrap {
  position: relative !important;
  display: inline-flex !important;
}

#view-clients .client-row-menu[hidden] {
  display: none !important;
}

#view-clients .client-row-menu {
  position: fixed !important;
  z-index: 200 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 220px !important;
  background: #fff !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(23, 54, 83, 0.16) !important;
  padding: 6px !important;
  overflow: hidden !important;
}

#view-clients .client-row-menu button {
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  padding: 9px 10px !important;
  font-size: 13px !important;
  color: var(--rf2-text, #1c2737) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

#view-clients .client-row-menu button:hover:not(:disabled) {
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

#view-clients .client-row-menu button:disabled {
  color: var(--rf2-text-tertiary, #98a2b3) !important;
  cursor: not-allowed !important;
}

#view-clients .client-row-menu button.danger:not(:disabled) {
  color: var(--rf2-alert, #8f3f2e) !important;
}

body > .case-actions-floating-menu {
  position: fixed !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 220px !important;
  background: #fff !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(23, 54, 83, 0.22) !important;
  padding: 6px !important;
}

body > .case-actions-floating-menu button {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--rf2-text, #1c2737) !important;
  cursor: pointer !important;
  padding: 9px 10px !important;
  text-align: left !important;
}

body > .case-actions-floating-menu button:hover {
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

body > .case-actions-floating-menu .danger-menu-item {
  color: var(--rf2-alert, #8f3f2e) !important;
}

/* Filtros da aba Clientes: tipo / status / responsavel / mais filtros */
#view-clients .client-list-head {
  flex-wrap: wrap !important;
}

#view-clients .client-filter-select select {
  min-width: 0 !important;
  max-width: 190px !important;
}

#view-clients .client-more-filters-wrap {
  position: relative !important;
}

#view-clients .client-more-filters-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}

#view-clients .client-more-filters-toggle svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

#view-clients .client-more-filters-panel {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  z-index: 20 !important;
  background: #fff !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(23, 54, 83, 0.16) !important;
  padding: 12px 14px !important;
  min-width: 260px !important;
}

#view-clients .client-more-filter-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--rf2-text, #1c2737) !important;
  white-space: nowrap !important;
}

#view-clients .client-list-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Coluna "Ultimo atendimento": data + legenda curta */
#view-clients .client-last-attendance-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#view-clients .client-last-attendance-cell strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--rf2-text, #1c2737) !important;
}

#view-clients .client-last-attendance-cell small {
  font-size: 12px !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
}

/* Dialogo "Ver cliente" */
.crm-client-view-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 24px !important;
  margin: 16px 0 !important;
}

.crm-client-view-grid dt {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
  margin-bottom: 3px !important;
}

.crm-client-view-grid dd {
  font-size: 14px !important;
  color: var(--rf2-text, #1c2737) !important;
  margin: 0 !important;
}

/* Dialogo "Excluir cliente" */
.crm-client-delete-warning {
  background: var(--rf2-pastel-alert, #f8ede8) !important;
  color: var(--rf2-alert, #8f3f2e) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   Gestao de Clientes e Casos — sem rolagem horizontal na pagina
   ========================================================================== */
#view-clients {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#view-clients .crm-kpi-grid,
#view-clients .crm-layout,
#view-clients .crm-main,
#view-clients .crm-side,
#view-clients .crm-quick-actions,
#view-clients .client-list-panel,
#view-clients .client-list-head,
#view-clients .crm-side-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#view-clients .client-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
}

#view-clients table.client-table {
  min-width: 720px !important;
}

#view-clients .attendance-tools {
  flex-wrap: wrap !important;
}

#view-clients .attendance-filters {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

#view-clients .attendance-filters select,
#view-clients .attendance-filters input {
  min-width: 0 !important;
}

/* ==========================================================================
   Calendário — página real (view-calendar), layout aprovado por referência
   visual (topbar, resumo do dia, próximos compromissos, indicadores do mês,
   grade mensal e legenda). Dados renderizados a partir de cachedCalendarEvents
   (public/app.js), sem valores fixos.
   ========================================================================== */

/* Topbar fixa ao rolar (mesmo padrão já usado em Recebimentos/Clientes). */
html body[data-view="calendar"]:not(.auth-locked) main.app-shell {
  padding-top: 0 !important;
}

html body[data-view="calendar"]:not(.auth-locked) main.app-shell header.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  background: var(--rf-page, #f7f8fa) !important;
  padding-top: 28px !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--rf-border, #e6ebf1) !important;
}

@media (max-width: 1180px) {
  html body[data-view="calendar"]:not(.auth-locked) main.app-shell {
    padding-top: 0 !important;
  }

  html body[data-view="calendar"]:not(.auth-locked) main.app-shell header.topbar {
    padding-top: 24px !important;
  }
}

html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar #header-user-card,
html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar #header-user-dropdown,
html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .header-user-card,
html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .header-user-dropdown {
  display: none !important;
}

html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 160px !important;
  min-width: 150px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
  cursor: pointer !important;
}

html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
  outline: none !important;
}

html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-icon,
html body[data-view="calendar"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-chevron {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Sem rolagem horizontal, largura contida com sidebar expandido/recolhido. */
#view-calendar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#view-calendar * {
  box-sizing: border-box !important;
}

/* Cabeçalho da página — sem título (o título fica só na topbar); apenas o
   botão "Compromisso" alinhado à direita, logo abaixo da topbar. */
.calendar-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  min-height: 0 !important;
}

html body[data-view="calendar"]:not(.auth-locked) .calendar-compromisso-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  border-color: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html body[data-view="calendar"]:not(.auth-locked) .calendar-compromisso-button:hover,
html body[data-view="calendar"]:not(.auth-locked) .calendar-compromisso-button:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
  border-color: var(--rf-theme-primary-dark, #9c4d32) !important;
  color: #ffffff !important;
  outline: none !important;
}

html body[data-view="calendar"]:not(.auth-locked) .calendar-compromisso-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Resumo do dia / Próximos compromissos / Indicadores do mês. */
.calendar-top-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 18px;
  margin: 20px 0;
  align-items: stretch;
  min-width: 0;
}

@media (max-width: 1180px) {
  .calendar-top-grid {
    grid-template-columns: 1fr;
  }
}

.calendar-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.calendar-day-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.calendar-day-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--rf-border, #e6ebf1);
  background: #ffffff;
  cursor: pointer;
  font: inherit;
}

.calendar-day-summary-item:hover {
  border-color: var(--rf2-terracotta, #b35a3c);
}

.calendar-day-summary-time {
  min-width: 40px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rf-text-secondary, #667085);
}

.calendar-day-summary-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rf-text, #172033);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.calendar-day-summary-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rf-border, #e6ebf1);
}

.calendar-day-summary-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.calendar-day-summary-metric strong {
  font-size: 19px;
  color: var(--rf2-navy, #173653);
}

.calendar-day-summary-metric span {
  font-size: 10.5px;
  color: var(--rf-text-secondary, #667085);
}

.calendar-empty-compact {
  padding: 14px;
  font-size: 12.5px;
  text-align: center;
}

.calendar-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.calendar-upcoming-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rf-border, #e6ebf1);
  border-radius: 10px;
  padding: 8px 10px;
  background: #ffffff;
  cursor: pointer;
  min-width: 0;
  font: inherit;
}

.calendar-upcoming-item:hover {
  border-color: var(--rf2-terracotta, #b35a3c);
}

.calendar-upcoming-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 32px;
}

.calendar-upcoming-date strong {
  font-size: 15px;
  line-height: 1;
  color: var(--rf2-navy, #173653);
}

.calendar-upcoming-date small {
  font-size: 9px;
  color: var(--rf-text-secondary, #667085);
  text-transform: uppercase;
}

.calendar-upcoming-time {
  min-width: 38px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rf-text-secondary, #667085);
}

.calendar-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calendar-upcoming-body strong {
  font-size: 13px;
  color: var(--rf-text, #172033);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-upcoming-body small {
  font-size: 11px;
  color: var(--rf-text-secondary, #667085);
}

.calendar-card-footer-link {
  align-self: flex-start;
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--rf2-terracotta, #b35a3c);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.calendar-card-footer-link:hover {
  text-decoration: underline;
}

.calendar-indicators-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calendar-indicator {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  min-width: 0;
}

.calendar-indicator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #ffffff;
  margin-bottom: 2px;
}

.calendar-indicator-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-indicator strong {
  font-size: 21px;
  color: var(--rf2-navy, #173653);
}

.calendar-indicator span {
  font-size: 11.5px;
  color: var(--rf-text-secondary, #667085);
}

.calendar-indicator-hearing {
  background: var(--rf2-pastel-green, #eaf4ee);
}

.calendar-indicator-hearing .calendar-indicator-icon {
  color: var(--rf2-green, #60784a);
}

.calendar-indicator-deadline {
  background: var(--rf2-pastel-alert, #f8ede8);
}

.calendar-indicator-deadline .calendar-indicator-icon {
  color: var(--rf2-alert, #8f3f2e);
}

.calendar-indicator-meeting {
  background: var(--rf2-pastel-blue, #eaf1f7);
}

.calendar-indicator-meeting .calendar-indicator-icon {
  color: var(--rf2-blue-gray, #52718b);
}

.calendar-indicator-petition {
  background: var(--rf-warning-bg, #fff7ed);
}

.calendar-indicator-petition .calendar-indicator-icon {
  color: var(--rf-warning, #f47820);
}

/* Badges pastel reutilizados no resumo do dia, próximos compromissos e grade. */
.calendar-badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.calendar-badge-hearing {
  background: var(--rf2-pastel-green, #eaf4ee);
  color: var(--rf2-green, #60784a);
}

.calendar-badge-deadline {
  background: var(--rf2-pastel-alert, #f8ede8);
  color: var(--rf2-alert, #8f3f2e);
}

.calendar-badge-meeting {
  background: var(--rf2-pastel-blue, #eaf1f7);
  color: var(--rf2-blue-gray, #52718b);
}

.calendar-badge-petition {
  background: var(--rf-warning-bg, #fff7ed);
  color: var(--rf-warning, #f47820);
}

.calendar-badge-other {
  background: var(--rf2-pastel-gray, #f1f3f5);
  color: var(--rf2-text-secondary, #718096);
}

/* Calendário mensal principal — compacto, mês inteiro visível sem scroll. */
.calendar-main-panel {
  min-width: 0;
  padding: 18px 20px 16px !important;
}

.calendar-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-main-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-main-head strong {
  font-size: 16px;
  color: var(--rf2-navy, #173653);
}

.calendar-nav-arrow {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--rf-border, #e6ebf1);
  background: #ffffff;
  color: var(--rf-text-secondary, #667085);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.calendar-today-button {
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
  margin-left: 2px;
}

.calendar-mode-switch {
  display: inline-flex;
  background: var(--rf2-pastel-gray, #f1f3f5);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.calendar-mode-button {
  border: 0;
  background: transparent;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rf-text-secondary, #667085);
  cursor: pointer;
}

.calendar-mode-button.is-active {
  background: #ffffff;
  color: var(--rf2-navy, #173653);
  box-shadow: 0 1px 4px rgba(23, 32, 51, 0.12);
}

.calendar-grid-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.calendar-grid-weekdays span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--rf-text-secondary, #667085);
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
  min-width: 0;
}

.calendar-grid.mode-day {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-day-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 62px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 10px;
  background: var(--rf2-pastel-gray, #f1f3f5);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.calendar-grid.mode-day .calendar-day-cell {
  min-height: 160px;
}

.calendar-grid.mode-week .calendar-day-cell {
  min-height: 110px;
}

.calendar-day-cell.is-outside {
  opacity: 0.45;
}

.calendar-day-cell.is-today {
  border-color: var(--rf2-terracotta, #b35a3c);
  background: var(--rf2-pastel-terracotta, #f7ece7);
}

.calendar-day-cell.is-selected {
  border-color: var(--rf2-terracotta, #b35a3c);
  box-shadow: 0 0 0 1px var(--rf2-terracotta, #b35a3c) inset;
}

.calendar-day-number {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rf2-navy, #173653);
}

.calendar-day-pills {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.calendar-day-pill {
  display: block;
  width: 100%;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.calendar-day-pill-more {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--rf-text-secondary, #667085);
  padding: 1px 4px;
}

.calendar-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rf-border, #e6ebf1);
}

.calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--rf-text-secondary, #667085);
}

.calendar-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.calendar-legend-dot-hearing {
  background: var(--rf2-green, #60784a);
}

.calendar-legend-dot-deadline {
  background: var(--rf2-alert, #8f3f2e);
}

.calendar-legend-dot-meeting {
  background: var(--rf2-blue-gray, #52718b);
}

.calendar-legend-dot-petition {
  background: var(--rf-warning, #f47820);
}

/* Diálogo "Novo compromisso" (reaproveita #calendar-form intacto). */
.calendar-form-dialog {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.calendar-form-dialog[hidden] {
  display: none;
}

.calendar-form-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 32, 51, 0.45);
}

.calendar-form-dialog .calendar-editor {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: 88vh;
  overflow-y: auto;
}

.calendar-form-dialog .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Lista completa preservada (ações reais de sincronizar/excluir). */
.calendar-registered-panel {
  margin-top: 20px;
}

.calendar-item-highlight {
  animation: calendarItemHighlight 2s ease;
}

@keyframes calendarItemHighlight {
  0% {
    background: var(--rf2-pastel-terracotta, #f7ece7);
  }
  100% {
    background: transparent;
  }
}

/* ============================================================
   Configurações — aba Segurança (redesenho fiel à referência)
   Escopo: #view-settings [data-settings-panel="security"]
   Não afeta nenhuma outra aba de Configurações nem outras views.
   ============================================================ */

#view-settings [data-settings-panel="security"] .sec2-topcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

#view-settings [data-settings-panel="security"] .sec2-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  background: var(--rf-surface, #fff);
  border: 1px solid var(--rf-border, #e7ebf0);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
}

#view-settings [data-settings-panel="security"] .sec2-card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

#view-settings [data-settings-panel="security"] .sec2-card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-settings [data-settings-panel="security"] .sec2-icon-green { background: var(--rf2-pastel-green, #eaf4ee); color: var(--rf2-green, #60784a); }
#view-settings [data-settings-panel="security"] .sec2-icon-violet { background: var(--rf2-pastel-violet, #f0ebf5); color: var(--rf2-violet, #745a92); }
#view-settings [data-settings-panel="security"] .sec2-icon-blue { background: var(--rf2-pastel-blue, #eaf1f7); color: var(--rf2-blue-gray, #52718b); }
#view-settings [data-settings-panel="security"] .sec2-icon-terracotta { background: var(--rf2-pastel-alert, #f8ede8); color: var(--rf2-alert, #8f3f2e); }

#view-settings [data-settings-panel="security"] .sec2-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#view-settings [data-settings-panel="security"] .sec2-card > div > span:first-child {
  color: var(--rf2-text-secondary, #718096);
  font-size: 12px;
  font-weight: 600;
}

#view-settings [data-settings-panel="security"] .sec2-card strong {
  color: var(--rf2-text, #1c2737);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

#view-settings [data-settings-panel="security"] .sec2-card small {
  color: var(--rf2-text-tertiary, #98a2b3);
  font-size: 11.5px;
  line-height: 1.35;
}

#view-settings [data-settings-panel="security"] .sec2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#view-settings [data-settings-panel="security"] .sec2-password-card,
#view-settings [data-settings-panel="security"] .sec2-practices-card {
  min-width: 0;
  padding: 22px;
  background: var(--rf-surface, #fff);
}

#view-settings [data-settings-panel="security"] .sec2-password-head h2,
#view-settings [data-settings-panel="security"] .sec2-practices-card > h2 {
  margin: 0 0 4px;
  color: var(--rf2-text, #1c2737);
  font-size: 17px;
  font-weight: 700;
}

#view-settings [data-settings-panel="security"] .sec2-password-head span {
  color: var(--rf2-text-secondary, #718096);
  font-size: 12.5px;
}

#view-settings [data-settings-panel="security"] .sec2-password-head {
  margin-bottom: 20px;
}

#view-settings [data-settings-panel="security"] .sec2-password-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 28px;
}

#view-settings [data-settings-panel="security"] .sec2-password-fields {
  display: grid;
  min-width: 0;
  gap: 16px;
  align-content: start;
}

#view-settings [data-settings-panel="security"] .sec2-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#view-settings [data-settings-panel="security"] .sec2-field > span:first-child {
  color: var(--rf2-text, #1c2737);
  font-size: 12.5px;
  font-weight: 600;
}

#view-settings [data-settings-panel="security"] .sec2-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

#view-settings [data-settings-panel="security"] .sec2-input-wrap input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--rf-border, #e7ebf0);
  border-radius: 10px;
  background: #fff;
  color: var(--rf2-text, #1c2737);
  font-size: 13px;
}

#view-settings [data-settings-panel="security"] .sec2-input-wrap input:focus {
  outline: none;
  border-color: var(--rf2-terracotta, #b35a3c);
  box-shadow: 0 0 0 3px rgba(179, 90, 60, 0.12);
}

#view-settings [data-settings-panel="security"] .sec2-toggle-visibility {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rf2-text-tertiary, #98a2b3);
  cursor: pointer;
}

#view-settings [data-settings-panel="security"] .sec2-toggle-visibility:hover {
  background: var(--rf2-pastel-gray, #f1f3f5);
  color: var(--rf2-text-secondary, #718096);
}

#view-settings [data-settings-panel="security"] .sec2-toggle-visibility svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-settings [data-settings-panel="security"] .sec2-strength {
  display: grid;
  gap: 6px;
  margin-top: -4px;
}

#view-settings [data-settings-panel="security"] .sec2-strength-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #e7ebf0;
}

#view-settings [data-settings-panel="security"] .sec2-strength-fill {
  position: absolute;
  inset: 0;
  width: calc(var(--sec2-strength-segments, 1) * 20%);
  background: var(--sec2-strength-color, var(--rf-error, #ef4444));
  transition: width 160ms ease, background-color 160ms ease;
}

#view-settings [data-settings-panel="security"] .sec2-strength-label {
  color: var(--rf2-text-secondary, #718096);
  font-size: 11.5px;
}

#view-settings [data-settings-panel="security"] .sec2-strength-label strong {
  font-weight: 700;
}

#view-settings [data-settings-panel="security"] .sec2-password-error {
  margin: 0;
  min-height: 0;
}

#view-settings [data-settings-panel="security"] .sec2-password-error:empty {
  display: none;
}

#view-settings [data-settings-panel="security"] .sec2-requirements {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--rf-border, #e7ebf0);
  border-radius: 12px;
  background: #fbfcfd;
}

#view-settings [data-settings-panel="security"] .sec2-requirements h3 {
  margin: 0 0 12px;
  color: var(--rf2-text, #1c2737);
  font-size: 13px;
  font-weight: 700;
}

#view-settings [data-settings-panel="security"] .sec2-requirements ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-settings [data-settings-panel="security"] .sec2-requirements li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rf2-text-tertiary, #98a2b3);
  font-size: 12px;
  transition: color 140ms ease;
}

#view-settings [data-settings-panel="security"] .sec2-req-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--rf2-text-tertiary, #98a2b3);
}

#view-settings [data-settings-panel="security"] .sec2-req-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-settings [data-settings-panel="security"] .sec2-requirements li.is-met {
  color: var(--rf2-text, #1c2737);
}

#view-settings [data-settings-panel="security"] .sec2-requirements li.is-met .sec2-req-icon {
  color: var(--rf2-green, #60784a);
}

#view-settings [data-settings-panel="security"] .sec2-password-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--rf-border, #e7ebf0);
}

#view-settings [data-settings-panel="security"] .sec2-password-submit {
  background: var(--rf-theme-primary, #b35a3c) !important;
  border-color: var(--rf-theme-primary, #b35a3c) !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
}

#view-settings [data-settings-panel="security"] .sec2-password-submit:hover {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
  border-color: var(--rf-theme-primary-dark, #9c4d32) !important;
}

#view-settings [data-settings-panel="security"] .sec2-practices-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-settings [data-settings-panel="security"] .sec2-practices-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#view-settings [data-settings-panel="security"] .sec2-practice-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

#view-settings [data-settings-panel="security"] .sec2-practice-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-settings [data-settings-panel="security"] .sec2-practices-list strong {
  display: block;
  margin-bottom: 3px;
  color: var(--rf2-text, #1c2737);
  font-size: 13px;
  font-weight: 700;
}

#view-settings [data-settings-panel="security"] .sec2-practices-list p {
  margin: 0;
  color: var(--rf2-text-secondary, #718096);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  #view-settings [data-settings-panel="security"] .sec2-topcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-settings [data-settings-panel="security"] .sec2-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  #view-settings [data-settings-panel="security"] .sec2-topcards {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-settings [data-settings-panel="security"] .sec2-password-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* REDESENHO — Sócios (view-partners): fidelidade visual à referência, */
/* dados e cálculos reais preservados (ver PAINEL-HANDOFF.md).         */
/* ------------------------------------------------------------------ */

/* Título real da página passa a viver na topbar global (padrão das demais
   páginas); o título duplicado dentro da view fica oculto sem remover o
   elemento (o JS continua atualizando #partners-subtitle normalmente). */
body[data-view="partners"] .topbar > div:first-child {
  visibility: visible !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-page-head {
  justify-content: flex-end !important;
  margin-bottom: 14px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-page-head-title {
  display: none !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-report-button {
  border-radius: 13px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  background: var(--rf2-card-bg, #fff) !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  color: var(--rf2-navy, #173653) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-report-button:hover {
  background: var(--rf2-pastel-gray, #f1f3f5) !important;
}

/* KPIs — quatro cartões, mesma altura e proporção, ícone pastel à esquerda. */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi {
  border-radius: 16px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  background: var(--rf2-card-bg, #ffffff) !important;
  padding: 18px 20px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi.is-distributed { --kpi-accent: var(--rf2-terracotta, #b35a3c) !important; }
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi.is-honorarios { --kpi-accent: var(--rf2-green, #60784a) !important; }
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi.is-production { --kpi-accent: var(--rf2-blue-gray, #52718b) !important; }
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi.is-cases { --kpi-accent: var(--rf-warning, #f47820) !important; }

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi-icon svg {
  width: 16px !important;
  height: 16px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi-head > span:last-child {
  font-size: 13px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi > strong {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--rf2-navy, #173653) !important;
}

/* Cartões dos sócios. */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-card {
  border-radius: 16px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  background: var(--rf2-card-bg, #ffffff) !important;
  padding: 20px 22px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-card header {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--rf2-card-border, #e1e5e9) !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-card header > strong,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-card header div strong {
  color: var(--rf2-navy, #173653) !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-avatar.is-eduardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .rateio-bar i.is-eduardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-metric-bar i.is-eduardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-donut-segment.is-eduardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-donut-legend-dot.is-eduardo {
  background: var(--rf2-violet, #745a92) !important;
  stroke: var(--rf2-violet, #745a92) !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-value em.is-eduardo {
  color: var(--rf2-violet, #745a92) !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-avatar.is-ricardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .rateio-bar i.is-ricardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-metric-bar i.is-ricardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-donut-segment.is-ricardo,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-donut-legend-dot.is-ricardo {
  background: var(--rf2-green, #60784a) !important;
  stroke: var(--rf2-green, #60784a) !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-value em.is-ricardo {
  color: var(--rf2-green, #60784a) !important;
}

/* Distribuição do mês (~25%) + Rateio detalhado (~75%). */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-split-grid {
  grid-template-columns: minmax(0, 25%) minmax(0, 1fr) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-donut-panel,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-rateio-panel {
  min-width: 0 !important;
  border-radius: 16px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  background: var(--rf2-card-bg, #ffffff) !important;
  padding: 18px 20px !important;
}

/* Linha inferior 1: Extrato de rateio (~52%) + Observações do período (~48%). */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-bottom-grid-extract {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

/* Linha inferior 2: Novo lançamento (~52%) + Resumo do período (~48%). */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-bottom-grid-entry {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  margin-top: 18px !important;
  align-items: start !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-bottom-grid .panel,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-panel {
  min-width: 0 !important;
  margin-top: 0 !important;
  border-radius: 16px !important;
  border: 1px solid var(--rf2-card-border, #e1e5e9) !important;
  box-shadow: var(--rf2-card-shadow, 0 8px 24px rgba(30, 41, 59, 0.055)) !important;
  background: var(--rf2-card-bg, #ffffff) !important;
  padding: 18px 20px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry {
  max-width: none !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-end !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form label {
  flex: 1 1 130px !important;
  min-width: 0 !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form label.wide {
  flex: 2 1 220px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form input,
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form select {
  height: 40px !important;
  margin-top: 5px !important;
  border-radius: 10px !important;
}

/* Correcao pontual (2026-09-04): botao de acao normal ("Adicionar distribuicao", nao destrutivo)
   usava a cor de marca fixa em vez do token de tema. */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form .primary-button {
  flex: 1 1 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--color-accent, #b35a3c) !important;
  border-color: var(--color-accent, #b35a3c) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-manual-entry .compact-form .primary-button:hover {
  background: color-mix(in srgb, var(--color-accent, #b35a3c) 78%, black) !important;
  border-color: color-mix(in srgb, var(--color-accent, #b35a3c) 78%, black) !important;
}

/* Resumo do período — quatro mini-cartões. */
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 10px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-metric {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-metric > div {
  min-width: 0 !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-icon svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-icon.is-terracotta { color: var(--rf2-terracotta, #b35a3c) !important; background: var(--rf2-pastel-terracotta, #f7ece7) !important; }
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-icon.is-blue { color: var(--rf2-blue-gray, #52718b) !important; background: var(--rf2-pastel-blue, #eaf1f7) !important; }
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-icon.is-violet { color: var(--rf2-violet, #745a92) !important; background: var(--rf2-pastel-violet, #f0ebf5) !important; }
html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-icon.is-green { color: var(--rf2-green, #60784a) !important; background: var(--rf2-pastel-green, #eaf4ee) !important; }

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-metric small {
  display: block !important;
  color: var(--rf2-text-secondary, #718096) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-metric strong {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: var(--rf2-navy, #173653) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-metric p {
  margin: 2px 0 0 !important;
  color: var(--rf2-text-tertiary, #98a2b3) !important;
  font-size: 11px !important;
}

@media (max-width: 1400px) {
  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-bottom-grid-extract,
  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-bottom-grid-entry {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1200px) {
  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-split-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-kpi-grid,
  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-person-grid,
  html body[data-view="partners"]:not(.auth-locked) #view-partners .partner-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Sócios — topbar: substitui o cartão de usuário pelo botão global "Novo
   registro" (mesmo botão/função já usado no Painel), como nas demais
   páginas. Cartão de usuário permanece no DOM (acessível pelo sidebar). */
html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .header-user-card,
html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .header-user-dropdown {
  display: none !important;
}

html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  grid-template-columns: none !important;
}

html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-new-record {
  display: inline-flex !important;
  order: 4 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 20px rgba(179, 90, 60, 0.22) !important;
  cursor: pointer !important;
}

html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf2-alert, #8f3f2e) !important;
  outline: none !important;
}

html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-new-record-icon,
html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-new-record-chevron {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 1420px) {
  html body[data-view="partners"]:not(.auth-locked) main.app-shell header.topbar .topbar-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   REDESENHO ESTRUTURAL — Extratos (view-movements)
   ========================================================================== */

/* Topbar da view Extratos: substitui o card do usuário pelo botão real
   "Novo registro" (mesmo elemento/handler já usado no Painel/Clientes/
   Configurações, apenas tornado visível aqui via CSS — nenhuma lógica nova). */
html body[data-view="movements"]:not(.auth-locked) main.app-shell header.topbar #header-user-card,
html body[data-view="movements"]:not(.auth-locked) main.app-shell header.topbar #header-user-dropdown {
  display: none !important;
}

html body[data-view="movements"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 160px !important;
  min-width: 150px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--rf-theme-primary, #b35a3c) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 20px rgba(179, 90, 60, 0.18) !important;
  cursor: pointer !important;
}

html body[data-view="movements"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:hover,
html body[data-view="movements"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record:focus-visible {
  background: var(--rf-theme-primary-dark, #9c4d32) !important;
  outline: none !important;
}

html body[data-view="movements"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-icon {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="movements"]:not(.auth-locked):not(.staff-mode):not(.external-mode) main.app-shell header.topbar .topbar-new-record-chevron {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-export-pdf {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  height: 46px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  /* Correcao pontual (2026-09-04): usava a cor de marca fixa (--rf2-terracotta) em vez do token de
     tema -- exemplo real reportado ("Exportar PDF" em Extratos sempre laranja/marrom, ignorando a cor
     de destaque escolhida em Configuracoes > Interface). Nenhuma outra propriedade (tamanho, posicao,
     texto, funcao) foi alterada. */
  background: var(--color-accent, #b35a3c) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 20px rgba(179, 90, 60, 0.22) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-export-pdf:hover {
  background: color-mix(in srgb, var(--color-accent, #b35a3c) 78%, black) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-export-pdf svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* --- Cards de indicadores --- */

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 20px !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.05) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon-doc {
  color: var(--rf2-terracotta, #b35a3c) !important;
  background: var(--rf2-pastel-terracotta, #f7ece7) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon-sicoob {
  background: var(--rf2-pastel-green, #eaf4ee) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon-sicoob i {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  border: 6px solid #62b32e !important;
  border-right-color: #0d9488 !important;
  border-radius: 3px 10px 3px 10px !important;
  transform: rotate(45deg) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon-inter {
  color: #f97316 !important;
  background: var(--rf2-pastel-terracotta, #f7ece7) !important;
  font-size: 15px !important;
  text-transform: lowercase !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-icon-asaas {
  color: #175ac6 !important;
  background: var(--rf2-pastel-violet, #f0ebf5) !important;
  font-size: 11px !important;
  text-transform: lowercase !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-body {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 2px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-label {
  color: var(--rf-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-body strong {
  color: var(--rf-text) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-body small {
  color: var(--rf-text-secondary) !important;
  font-size: 12px !important;
}

/* --- Painel de filtros --- */

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters-card {
  padding: 16px 18px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters label {
  display: flex !important;
  min-width: 0 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-search-field {
  position: relative !important;
  flex: 1 1 260px !important;
  min-width: 220px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-search-icon {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  color: var(--rf-icon) !important;
  pointer-events: none !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-search-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-search-field input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 11px !important;
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  font-size: 13px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters select,
html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters input[type="text"] {
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 11px !important;
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  font-size: 13px !important;
  min-width: 150px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements #movement-period-display {
  color: var(--rf-text-secondary) !important;
  min-width: 150px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters-spacer {
  flex: 1 1 auto !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-filters-toggle,
html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-export-button {
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  color: var(--rf-link) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-border) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-more-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--rf-border) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-more-filters label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 12px !important;
  color: var(--rf-text-secondary) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-more-filters select {
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 10px !important;
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  font-size: 13px !important;
}

/* --- Estrutura principal: tabela + coluna lateral --- */

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr) !important;
  align-items: start !important;
  gap: 20px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel {
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel .table-wrap {
  margin: 0 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel table {
  width: 100% !important;
  min-width: 0 !important;
}

/* --- Coluna Sócio / Repasse a terceiros --- */

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel th.movement-partner-col,
html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel td.movement-partner-col {
  width: 120px !important;
  max-width: 120px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel .partner-tag-select {
  width: 100% !important;
  height: 30px !important;
  padding: 0 6px !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 8px !important;
  background: var(--rf-surface, #fff) !important;
  color: var(--rf-text) !important;
  font-size: 12px !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-table-panel .repasse-tag {
  font-size: 12px !important;
  white-space: normal !important;
  max-width: 100% !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--rf-border) !important;
  color: var(--rf-text-secondary) !important;
  font-size: 13px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-pagination-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-pagination-controls select {
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 8px !important;
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  font-size: 13px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-page-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 8px !important;
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-page-nav:disabled {
  color: var(--rf-disabled) !important;
  cursor: default !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-page-current {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  color: var(--rf-text) !important;
  background: var(--rf-primary-soft) !important;
  font-weight: 700 !important;
}

/* --- Coluna lateral --- */

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  min-width: 0 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-card {
  padding: 18px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-head h3 {
  margin: 0 !important;
  color: var(--rf-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  color: var(--rf2-terracotta, #b35a3c) !important;
  background: var(--rf2-pastel-terracotta, #f7ece7) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-row,
html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-balance-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--rf-border) !important;
  font-size: 13px !important;
  color: var(--rf-text-secondary) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-row:last-child,
html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-balance-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-row strong,
html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-balance-row strong {
  color: var(--rf-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-row-in strong {
  color: var(--rf-success) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-row-out strong {
  color: var(--rf-error) !important;
}

html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-side-row-pending strong {
  color: var(--rf-warning) !important;
}

@media (max-width: 1180px) {
  html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  html body[data-view="movements"]:not(.auth-locked) main.app-shell #view-movements .movement-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   Modo de privacidade financeira: botao de olho na topbar + camada de
   ocultacao do grafico de fluxo de caixa. Puramente visual (ver app.js:
   money(), financialPercent(), reapplyFinancialPrivacyDisplay()).
--------------------------------------------------------------------- */

html body:not(.auth-locked) #privacy-toggle-button.is-active,
html body:not(.auth-locked) #privacy-toggle-button.is-active:hover {
  background: var(--rf-primary-soft, #eaf0f6) !important;
  color: var(--rf2-navy, #173653) !important;
}

.cashflow-privacy-overlay {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f7fafc;
  border-radius: 12px;
  color: var(--rf2-navy, #173653);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.cashflow-privacy-overlay[hidden] {
  display: none;
}

.cashflow-privacy-overlay-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  .cashflow-privacy-overlay {
    background: #17202f;
  }
}

/* Posiciona o botao de privacidade imediatamente antes do sino de
   notificacoes no layout fixo da topbar (mesmo slot/ordem que .notification-wrap,
   a ordem do DOM resolve o empate colocando-o antes). */
html body[data-view]:not(.auth-locked) main.app-shell header.topbar .privacy-toggle-button {
  order: 3 !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  position: relative !important;
  border-left: 1px solid var(--rf-border, #e6ebf1) !important;
}

/* ---------------------------------------------------------------------
   Banner de conciliacao e navegacao lateral.

   As views com topbar sticky zeram o padding superior do app-shell para
   que a barra alcance a borda real do container rolante. Como o alerta vem
   antes da topbar no DOM, ele tambem perdia o respiro do topo. Reaplicamos
   esse espaco somente ao banner dessas telas; o Painel permanece intacto.
--------------------------------------------------------------------- */
html body[data-view="calendar"]:not(.auth-locked) main.app-shell > #unreconciled-alert-banner,
html body[data-view="clients"]:not(.auth-locked) main.app-shell > #unreconciled-alert-banner,
html body[data-view="receivables"]:not(.auth-locked) main.app-shell > #unreconciled-alert-banner,
html body[data-view="expenses"]:not(.auth-locked) main.app-shell > #unreconciled-alert-banner,
html body[data-view="forecasts"]:not(.auth-locked) main.app-shell > #unreconciled-alert-banner {
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 20px !important;
}

/* O shim continua no DOM como alvo dos fluxos programaticos de atendimento,
   mas regras gerais da sidebar nao podem sobrescrever sua ocultacao. */
html body[data-view]:not(.auth-locked) > aside.sidebar nav.nav > button#nav-item-attendance-shim {
  display: none !important;
}
/* Cadastro de casos — etapa de assistência técnica médica e fidelidade ao tema ativo. */
.case-modal form {
  color: var(--color-text, #111827) !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-primary, #c86b4d) 8%, transparent), transparent 28%),
    linear-gradient(180deg, var(--color-surface, #fff) 0%, var(--color-background, #fafafb) 100%) !important;
}

.case-modal .modal-header,
.case-modal .modal-actions {
  border-color: var(--color-border, #e5e7eb) !important;
  background: color-mix(in srgb, var(--color-surface, #fff) 95%, transparent) !important;
}

.case-steps {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.case-step {
  border-color: var(--color-border, #e5e7eb) !important;
  background: var(--color-surface, #fff) !important;
  color: var(--color-text-muted, #6b7280) !important;
}

.case-step span {
  color: var(--color-primary, #c86b4d) !important;
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 10%, var(--color-surface, #fff)) !important;
}

.case-step:hover {
  border-color: color-mix(in srgb, var(--color-primary, #c86b4d) 55%, var(--color-border, #e5e7eb)) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary, #c86b4d) 12%, transparent) !important;
}

.case-step.active {
  color: var(--color-text, #111827) !important;
  border-color: var(--color-primary, #c86b4d) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--color-primary, #c86b4d) 16%, transparent) !important;
}

.case-step.active span,
.case-modal .primary-button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-primary, #c86b4d), var(--color-primary-dark, #a8523a)) !important;
}

.case-progress {
  color: var(--color-text-muted, #6b7280) !important;
}

.case-progress-track {
  background: color-mix(in srgb, var(--color-border, #e5e7eb) 78%, var(--color-background, #fafafb)) !important;
}

#case-progress-bar {
  background: linear-gradient(90deg, var(--color-primary, #c86b4d), var(--color-accent, #e08b5b)) !important;
}

.case-document-strip,
.case-modal .form-section {
  border-color: var(--color-border, #e5e7eb) !important;
  background: var(--color-surface, #fff) !important;
}

.case-document-strip > span,
.case-modal .form-section label,
.case-modal .form-section label > small {
  color: var(--color-text-muted, #6b7280) !important;
}

.case-modal .form-section input,
.case-modal .form-section select,
.case-modal .form-section textarea {
  color: var(--color-text, #111827) !important;
  border-color: var(--color-border, #e5e7eb) !important;
  background: color-mix(in srgb, var(--color-background, #fafafb) 68%, var(--color-surface, #fff)) !important;
}

.case-modal .form-section input:focus,
.case-modal .form-section select:focus,
.case-modal .form-section textarea:focus {
  border-color: var(--color-primary, #c86b4d) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #c86b4d) 14%, transparent) !important;
}

.case-summary {
  color: var(--color-text, #111827) !important;
  border-color: color-mix(in srgb, var(--color-primary, #c86b4d) 24%, var(--color-border, #e5e7eb)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #c86b4d) 5%, var(--color-surface, #fff)), var(--color-surface, #fff)) !important;
}

.case-summary-kicker,
.case-medical-summary > span {
  color: var(--color-primary, #c86b4d) !important;
}

.case-summary dl div {
  border-color: var(--color-border, #e5e7eb) !important;
}

.case-summary dt,
.case-summary p {
  color: var(--color-text-muted, #6b7280) !important;
}

.case-summary dd,
.case-summary > strong {
  color: var(--color-text, #111827) !important;
}

.case-summary p {
  background: color-mix(in srgb, var(--color-background, #fafafb) 82%, var(--color-surface, #fff)) !important;
}

.medical-assistance-panel [hidden] {
  display: none !important;
}

.medical-section-heading {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-bottom: 4px !important;
}

.medical-section-heading h3 {
  margin: 2px 0 4px !important;
  color: var(--color-text, #111827) !important;
  font-size: 20px !important;
}

.medical-section-heading small {
  color: var(--color-text-muted, #6b7280) !important;
}

.medical-section-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  color: var(--color-primary, #c86b4d) !important;
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 11%, var(--color-surface, #fff)) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
}

.medical-details {
  display: grid !important;
  gap: 14px !important;
}

.medical-block {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--color-background, #fafafb) 38%, var(--color-surface, #fff)) !important;
}

.medical-block legend {
  padding: 0 7px !important;
  color: var(--color-text, #111827) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.medical-choice-grid,
.medical-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.medical-choice-card {
  min-height: 76px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 11px !important;
  padding: 13px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 14px !important;
  background: var(--color-surface, #fff) !important;
  cursor: pointer !important;
}

.medical-choice-card:hover,
.medical-choice-card:has(input:checked) {
  border-color: var(--color-primary, #c86b4d) !important;
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 6%, var(--color-surface, #fff)) !important;
}

.case-modal .form-section .medical-choice-card input[type="radio"],
.case-modal .form-section .medical-authorization-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  flex: 0 0 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--color-primary, #c86b4d) !important;
}

.medical-choice-card span,
.medical-authorization-check span {
  display: grid !important;
  gap: 4px !important;
}

.medical-choice-card strong,
.medical-authorization-check strong {
  color: var(--color-text, #111827) !important;
  font-size: 13px !important;
}

.medical-choice-card small,
.medical-authorization-check small {
  color: var(--color-text-muted, #6b7280) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.medical-not-applicable {
  display: grid !important;
  gap: 3px !important;
  padding: 15px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 14px !important;
  color: var(--color-text, #111827) !important;
  background: var(--color-background, #fafafb) !important;
}

.medical-not-applicable span {
  color: var(--color-text-muted, #6b7280) !important;
  font-size: 12px !important;
}

.medical-authorization-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 11px !important;
  margin-bottom: 14px !important;
  padding: 13px !important;
  border: 1px solid color-mix(in srgb, var(--color-primary, #c86b4d) 25%, var(--color-border, #e5e7eb)) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 6%, var(--color-surface, #fff)) !important;
}

.case-medical-summary {
  margin-top: 16px !important;
  padding: 14px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 15px !important;
  background: var(--color-surface, #fff) !important;
}

.case-medical-summary > span {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.case-medical-summary > strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--color-text, #111827) !important;
  font-size: 15px !important;
}

.case-medical-summary.is-enabled {
  border-color: color-mix(in srgb, var(--color-primary, #c86b4d) 38%, var(--color-border, #e5e7eb)) !important;
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 5%, var(--color-surface, #fff)) !important;
}

.case-medical-summary dl div {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  padding: 8px 0 !important;
}

@media (max-width: 1180px) {
  .case-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .case-steps,
  .medical-choice-grid,
  .medical-fields-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fila operacional de assistência médica do parceiro. */
.partner-processes-page { color: var(--color-text, var(--rf-text)); }
.partner-processes-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.partner-processes-header h2 { margin: 3px 0 6px; color: var(--color-text, var(--rf-text)); font-size: clamp(28px, 3vw, 38px); }
.partner-processes-header p:last-child,
.partner-processes-header > span { color: var(--color-text-muted, var(--rf-text-secondary)); }
.partner-processes-header > span { padding-top: 20px; white-space: nowrap; font-size: 13px; }
.partner-processes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.partner-processes-tabs { display: flex; min-width: 0; overflow-x: auto; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 999px; background: var(--color-surface, var(--rf-surface)); scrollbar-width: thin; }
.partner-processes-tabs button { flex: 0 0 auto; min-height: 40px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-muted, var(--rf-text-secondary)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.partner-processes-tabs button.is-active { background: var(--color-primary, var(--rf-primary)); color: var(--color-surface, #fff); }
.partner-processes-tabs button span,
.partner-processes-filter-toggle span { display: inline-grid; place-items: center; min-width: 21px; height: 21px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, currentColor 11%, transparent); font-size: 11px; }
.partner-processes-filter-toggle { flex: 0 0 auto; }
.partner-processes-filters { margin-bottom: 16px; padding: 18px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 16px; background: var(--color-surface, var(--rf-surface)); box-shadow: var(--rf-shadow-sm); }
.partner-processes-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.partner-processes-filter-grid label,
.partner-processes-pagination label { display: grid; gap: 6px; color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 12px; font-weight: 700; }
.partner-processes-filter-grid input:not([type="checkbox"]),
.partner-processes-filter-grid select,
.partner-processes-pagination select { width: 100%; min-height: 42px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 10px; background: var(--color-background, var(--rf-page)); color: var(--color-text, var(--rf-text)); }
.partner-processes-filter-grid .partner-processes-checkbox { display: flex; align-items: center; align-self: end; min-height: 42px; padding: 9px 11px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 10px; background: var(--color-background, var(--rf-page)); color: var(--color-text, var(--rf-text)); }
.partner-processes-checkbox input { width: auto; margin: 0 8px 0 0; }
.partner-processes-filters > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.partner-processes-list { overflow: hidden; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 16px; background: var(--color-surface, var(--rf-surface)); }
.partner-processes-list-head,
.partner-processes-row { display: grid; grid-template-columns: minmax(190px, 1.35fr) minmax(125px, .9fr) minmax(120px, .8fr) minmax(165px, 1.05fr) minmax(130px, .8fr) minmax(150px, 1fr); gap: 14px; align-items: center; }
.partner-processes-list-head { padding: 13px 16px; border-bottom: 1px solid var(--color-border, var(--rf-border)); color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 11px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.partner-processes-row { position: relative; min-height: 92px; padding: 14px 16px; border-bottom: 1px solid var(--color-border, var(--rf-border)); outline: none; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.partner-processes-row:last-child { border-bottom: 0; }
.partner-processes-row:hover,
.partner-processes-row:focus-visible { background: color-mix(in srgb, var(--color-primary, var(--rf-primary)) 5%, var(--color-surface, var(--rf-surface))); }
.partner-processes-row:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary, var(--rf-primary)); }
.partner-processes-row.is-selected { background: color-mix(in srgb, var(--color-primary, var(--rf-primary)) 8%, var(--color-surface, var(--rf-surface))); }
.partner-processes-action-required { background: color-mix(in srgb, #d49a28 8%, var(--color-surface, var(--rf-surface))); box-shadow: inset 3px 0 0 #d49a28; }
.partner-processes-row > div { display: grid; gap: 5px; min-width: 0; }
.partner-processes-row strong,
.partner-processes-row span,
.partner-processes-row small { overflow-wrap: anywhere; }
.partner-processes-row small { color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 12px; }
.partner-processes-client { grid-template-columns: 38px minmax(0, 1fr) !important; }
.partner-processes-avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 50%; color: var(--color-primary, var(--rf-primary)); background: var(--color-background, var(--rf-page)); font-size: 12px; font-weight: 800; }
.partner-processes-client em { width: max-content; max-width: 100%; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, #d49a28 16%, transparent); color: color-mix(in srgb, #8a5b00 88%, var(--color-text, var(--rf-text))); font-size: 10px; font-style: normal; font-weight: 800; }
.partner-processes-status { display: inline-flex; width: fit-content; max-width: 100%; padding: 6px 9px; border: 1px solid; border-radius: 9px; font-size: 11px; font-weight: 800; line-height: 1.25; }
.partner-processes-status.is-warning { border-color: color-mix(in srgb, #d49a28 45%, transparent); background: color-mix(in srgb, #d49a28 11%, transparent); color: color-mix(in srgb, #8a5b00 85%, var(--color-text, var(--rf-text))); }
.partner-processes-status.is-info { border-color: color-mix(in srgb, #3182ce 40%, transparent); background: color-mix(in srgb, #3182ce 10%, transparent); color: #28639b; }
.partner-processes-status.is-success { border-color: color-mix(in srgb, #2f855a 40%, transparent); background: color-mix(in srgb, #2f855a 10%, transparent); color: #277149; }
.partner-processes-status.is-danger { border-color: color-mix(in srgb, #c53030 40%, transparent); background: color-mix(in srgb, #c53030 10%, transparent); color: #a32626; }
.partner-processes-next-action { grid-template-columns: minmax(0, 1fr) auto !important; color: var(--color-primary, var(--rf-primary)); }
.partner-processes-next-action > span { font-size: 24px; }
.partner-processes-empty { display: grid; gap: 8px; min-height: 220px; place-content: center; text-align: center; }
.partner-processes-empty strong { color: var(--color-text, var(--rf-text)); font-size: 17px; }
.partner-processes-empty span { max-width: 520px; color: var(--color-text-muted, var(--rf-text-secondary)); }
.partner-processes-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 13px 16px; border-top: 1px solid var(--color-border, var(--rf-border)); color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 12px; }
.partner-processes-pagination > div { display: flex; align-items: center; gap: 9px; }
.partner-processes-pagination > label { grid-template-columns: auto 74px; align-items: center; justify-self: end; }
.partner-processes-drawer-backdrop { position: fixed; z-index: 90; inset: 0; border: 0; background: rgba(16, 24, 40, .18); }
.partner-processes-drawer { position: fixed; z-index: 91; top: 0; right: 0; bottom: 0; width: min(450px, 92vw); overflow-y: auto; border-left: 1px solid var(--color-border, var(--rf-border)); background: var(--color-surface, var(--rf-surface)); color: var(--color-text, var(--rf-text)); box-shadow: -18px 0 45px rgba(16, 24, 40, .16); }
.partner-processes-drawer > header { position: sticky; z-index: 1; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; border-bottom: 1px solid var(--color-border, var(--rf-border)); background: var(--color-surface, var(--rf-surface)); }
.partner-processes-drawer > header span,
.partner-processes-drawer > header p,
.partner-processes-drawer small { color: var(--color-text-muted, var(--rf-text-secondary)); }
.partner-processes-drawer > header h3 { margin: 6px 0; font-size: 24px; }
.partner-processes-drawer > header p { margin: 0; font-size: 12px; line-height: 1.5; }
.partner-processes-drawer > header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--color-background, var(--rf-page)); color: var(--color-text, var(--rf-text)); font-size: 24px; cursor: pointer; }
.partner-processes-drawer > div > section { padding: 19px 22px; border-bottom: 1px solid var(--color-border, var(--rf-border)); }
.partner-processes-drawer h4 { margin: 0 0 12px; }
.partner-processes-drawer p { color: var(--color-text-muted, var(--rf-text-secondary)); line-height: 1.5; }
.partner-processes-drawer blockquote { margin: 0 0 8px; padding: 13px; border: 1px solid var(--color-border, var(--rf-border)); border-radius: 11px; background: var(--color-background, var(--rf-page)); line-height: 1.55; }
.partner-processes-drawer-actions { display: grid; gap: 9px; }
.partner-processes-drawer-actions button { width: 100%; }
.partner-processes-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.partner-processes-timeline li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; padding-bottom: 18px; }
.partner-processes-timeline li > span { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 2px solid var(--color-surface, var(--rf-surface)); border-radius: 50%; background: var(--color-primary, var(--rf-primary)); box-shadow: 0 0 0 1px var(--color-primary, var(--rf-primary)); }
.partner-processes-timeline li::before { content: ""; position: absolute; top: 15px; bottom: 0; left: 5px; width: 1px; background: var(--color-border, var(--rf-border)); }
.partner-processes-timeline li:last-child::before { display: none; }
.partner-processes-timeline p { margin: 4px 0; }
@media (max-width: 1180px) {
  .partner-processes-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-processes-list-head { display: none; }
  .partner-processes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-processes-row > div:not(.partner-processes-client)::before { content: attr(data-label); color: var(--color-text-muted, var(--rf-text-secondary)); font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
}
@media (max-width: 640px) {
  .partner-processes-header { display: block; }
  .partner-processes-header > span { display: block; padding-top: 8px; }
  .partner-processes-toolbar { align-items: stretch; flex-direction: column; }
  .partner-processes-tabs { border-radius: 13px; }
  .partner-processes-tabs button { padding-right: 11px; padding-left: 11px; }
  .partner-processes-filter-toggle { width: 100%; }
  .partner-processes-filter-grid,
  .partner-processes-row { grid-template-columns: minmax(0, 1fr); }
  .partner-processes-filters > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .partner-processes-row { gap: 15px; padding: 16px; }
  .partner-processes-pagination { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .partner-processes-pagination > div,
  .partner-processes-pagination > label { justify-self: center; }
  .partner-processes-drawer { width: 100%; }
}

/* Atalho flutuante de WhatsApp exclusivo para parceiros (role: external). */
/* Cores fixas e intencionalmente independentes das variaveis --color- e --rf- do tema. */
.partner-whatsapp-fab {
  --partner-whatsapp-bg: #25d366;
  --partner-whatsapp-hover: #128c7e;
  --partner-whatsapp-active: #0f766e;
  --partner-whatsapp-text: #ffffff;
  --partner-whatsapp-tooltip: #111827;

  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: var(--partner-whatsapp-bg);
  color: var(--partner-whatsapp-text) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(18, 140, 126, 0.28), 0 3px 10px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.partner-whatsapp-fab:hover {
  background: var(--partner-whatsapp-hover);
  color: var(--partner-whatsapp-text) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(18, 140, 126, 0.34), 0 5px 14px rgba(0, 0, 0, 0.20);
}

.partner-whatsapp-fab:active {
  background: var(--partner-whatsapp-active);
  color: var(--partner-whatsapp-text) !important;
}

.partner-whatsapp-fab:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.38);
  outline-offset: 3px;
}

/* Especificidade equivalente a "html body:not(.auth-locked) a" (palette-rf.css),
   necessaria para a cor do link nao ser sobrescrita pela cor de link do tema. */
html body a.partner-whatsapp-fab,
html body a.partner-whatsapp-fab:hover,
html body a.partner-whatsapp-fab:active,
html body a.partner-whatsapp-fab:visited {
  color: var(--partner-whatsapp-text) !important;
}

.partner-whatsapp-fab[hidden] {
  display: none !important;
}

.partner-whatsapp-fab__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.partner-whatsapp-fab__label {
  display: inline-block;
}

.partner-whatsapp-fab__tooltip {
  position: absolute;
  inset: auto auto calc(100% + 8px) auto;
  right: 0;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--partner-whatsapp-tooltip);
  color: var(--partner-whatsapp-text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(10, 15, 25, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.partner-whatsapp-fab:hover .partner-whatsapp-fab__tooltip,
.partner-whatsapp-fab:focus-visible .partner-whatsapp-fab__tooltip {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .partner-whatsapp-fab {
    padding: 12px;
    gap: 0;
  }

  .partner-whatsapp-fab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .partner-whatsapp-fab__tooltip {
    display: none;
  }
}

/* Ficha do Cliente (client-record-dialog) */
dialog.client-record-dialog {
  width: min(880px, calc(100vw - 28px));
  max-height: calc(100vh - 48px);
  padding: 0;
}

dialog.client-record-dialog[open] {
  display: flex;
  flex-direction: column;
}

.client-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 0;
}

.client-record-header h2 {
  margin: 0 0 2px;
}

.client-record-header span {
  color: var(--color-text-muted, var(--rf-text-secondary));
  font-size: 13px;
}

.client-record-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted, var(--rf-text-secondary));
  cursor: pointer;
  padding: 4px 8px;
}

.client-record-tabs {
  display: flex;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--color-border, var(--rf-border));
}

.client-record-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 4px;
  margin-right: 20px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted, var(--rf-text-secondary));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.client-record-tabs button.active {
  color: var(--color-primary, var(--rf-primary));
}

.client-record-tabs button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-primary, var(--rf-primary));
}

.client-record-body {
  padding: 18px 22px;
  overflow-y: auto;
}

.client-record-cases-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.client-record-case-list {
  display: grid;
  gap: 14px;
}

.client-record-case-card {
  border: 1px solid var(--color-border, var(--rf-border));
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-record-case-card:hover {
  border-color: var(--color-primary, var(--rf-primary));
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.08);
}

.client-record-case-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.client-record-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 18px;
  margin: 0 0 12px;
}

.client-record-case-grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rf2-text-tertiary, #98a2b3);
  margin-bottom: 2px;
}

.client-record-case-grid dd {
  font-size: 13.5px;
  color: var(--rf2-text, #1c2737);
  margin: 0;
}

.client-record-case-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 640px) {
  dialog.client-record-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    border-radius: 0;
  }

  .client-record-case-grid {
    grid-template-columns: 1fr;
  }
}

.pm-admin-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.pm-admin-status-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, var(--rf-text-secondary));
}

.pm-admin-status-grid select {
  font-weight: 400;
}

/* CINZA NEVE — paleta normativa quase branca. Este bloco é deliberadamente
   escopado ao preset para preservar Prata Clara, Pergaminho e demais temas. */
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) {
  background: #FAFBFC !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar {
  color: #172033 !important;
  background: #F7F8FA !important;
  background-color: #F7F8FA !important;
  background-image: none !important;
  border-color: #E3E7EB !important;
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.08), inset 0 1px 0 #FFFFFF !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > main.app-shell {
  background: #FAFBFC !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar::before,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar::after {
  display: none !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand::after,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-footer {
  background: none !important;
  background-image: none !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-mark {
  color: #172033 !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E3E7EB !important;
  box-shadow: none !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy strong,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy span,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item > span,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item > span {
  color: #172033 !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label {
  color: #667085 !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item {
  color: #172033 !important;
  background: transparent !important;
  background-image: none !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item svg.nav-icon,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle svg,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-exit-icon svg {
  color: #536273 !important;
  stroke: currentColor !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item.active {
  color: #172033 !important;
  background: #E8EDF2 !important;
  background-image: none !important;
  border-color: #E3E7EB !important;
  box-shadow: 0 4px 14px rgba(23, 32, 51, 0.06) !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item:hover:not(.active) {
  color: #172033 !important;
  background: #EEF1F4 !important;
  background-image: none !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-card {
  color: #172033 !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle:hover,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled):not(.sidebar-collapsed) > aside.sidebar .sidebar-user-card:hover {
  color: #172033 !important;
  background: #EEF1F4 !important;
  background-image: none !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle span,
html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy strong {
  color: #172033 !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy small {
  color: #667085 !important;
}

html[data-theme-preset="snow-gray"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-monogram {
  color: #172033 !important;
  background: #EEF1F4 !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] #view-guided-intake .gi-shell,
html[data-theme-preset="snow-gray"] #view-guided-intake .gi-header,
html[data-theme-preset="snow-gray"] #view-guided-intake .gi-card,
html[data-theme-preset="snow-gray"] #view-guided-intake .gi-preview-dialog {
  color: #172033 !important;
  background-color: #FFFFFF !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] #view-guided-intake .gi-body,
html[data-theme-preset="snow-gray"] #view-guided-intake .gi-stepper {
  background: #FAFBFC !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] body[data-view="guided-intake"] #view-guided-intake input,
html[data-theme-preset="snow-gray"] body[data-view="guided-intake"] #view-guided-intake select,
html[data-theme-preset="snow-gray"] body[data-view="guided-intake"] #view-guided-intake textarea,
html[data-theme-preset="snow-gray"] .gi-preview-dialog input,
html[data-theme-preset="snow-gray"] .gi-preview-dialog select,
html[data-theme-preset="snow-gray"] .gi-preview-dialog textarea {
  color: #172033 !important;
  background: #FFFFFF !important;
  border-color: #E3E7EB !important;
}

html[data-theme-preset="snow-gray"] #view-guided-intake .gi-aside,
html[data-theme-preset="snow-gray"] #view-guided-intake .gi-footer,
html[data-theme-preset="snow-gray"] .gi-preview-dialog,
html[data-theme-preset="snow-gray"] .gi-preview-dialog footer {
  color: #172033 !important;
  background-color: #FFFFFF !important;
  border-color: #E3E7EB !important;
}

/* ==========================================================================
   TRANSFERÊNCIA DE RESPONSABILIDADE — componentes visuais dedicados
   Botão de cabeçalho, card "Responsabilidade e parceria" (Visão geral) e
   modal de transferência. Usa somente var(--color-*) já alimentadas por
   interfaceThemeApplyGlobal (app.js) — nenhuma cor fixa de tema, funciona em
   qualquer preset (Terracota, Navy, Cinza Neve, Prata, Pergaminho, Verde...).
   ========================================================================== */

.pm-transfer-responsibility-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--color-primary, #c86b4d) !important;
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 8%, var(--color-surface, #fff)) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary, #c86b4d) 45%, var(--color-border, #e5e7eb)) !important;
  font-weight: 700 !important;
}
.pm-transfer-responsibility-button:hover,
.pm-transfer-responsibility-button:focus-visible {
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 16%, var(--color-surface, #fff)) !important;
  border-color: var(--color-primary, #c86b4d) !important;
}
.pm-transfer-responsibility-button svg { color: var(--color-primary, #c86b4d); flex: 0 0 auto; }

/* Card "Responsabilidade e parceria" */
.pm-responsibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 20px;
  margin: 4px 0 16px;
}
.pm-responsibility-item { display: grid; gap: 6px; min-width: 0; }
.pm-responsibility-label {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text-muted, #667085);
}
.pm-responsibility-value { font-size: 14px; font-weight: 700; color: var(--color-text, #172033); overflow-wrap: anywhere; }
.pm-responsibility-person { display: flex; align-items: center; gap: 9px; }
.pm-responsibility-avatar {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 11px; font-weight: 800; color: var(--color-primary, #c86b4d);
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 16%, var(--color-surface, #fff));
}
.pm-responsibility-chip {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--color-text-muted, #667085);
  background: var(--color-background, #f2f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
}
.pm-responsibility-chip--active {
  color: var(--color-primary-dark, #a8523a);
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 12%, var(--color-surface, #fff));
  border-color: color-mix(in srgb, var(--color-primary, #c86b4d) 35%, var(--color-border, #e5e7eb));
}
.pm-responsibility-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Modal de transferência */
dialog.pm-transfer-dialog {
  width: min(840px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--color-surface, #fff);
  box-shadow: 0 24px 80px rgba(23, 32, 51, 0.22);
  overflow: hidden;
}
dialog.pm-transfer-dialog::backdrop { background: rgba(23, 32, 51, 0.42); backdrop-filter: blur(3px); }

.pm-transfer-shell { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }

.pm-transfer-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 26px; border-bottom: 1px solid var(--color-border, #e5e7eb); flex: 0 0 auto;
}
.pm-transfer-header h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--color-text, #172033); }
.pm-transfer-close {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--color-text-muted, #667085); background: transparent;
}
.pm-transfer-close:hover, .pm-transfer-close:focus-visible {
  background: var(--color-background, #f2f4f6); color: var(--color-text, #172033);
}

.pm-transfer-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; }
.pm-transfer-section { display: flex; flex-direction: column; gap: 12px; }
.pm-transfer-section-title {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-text-muted, #667085);
}

.pm-transfer-callout {
  padding: 16px 18px; border-radius: 14px;
  background: var(--color-background, #f7f8fa); border: 1px solid var(--color-border, #e5e7eb);
}
.pm-transfer-current-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.pm-transfer-current-item { display: grid; gap: 4px; min-width: 0; }
.pm-transfer-current-item span {
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text-muted, #667085);
}
.pm-transfer-current-item strong { font-size: 13px; font-weight: 700; color: var(--color-text, #172033); overflow-wrap: anywhere; }
.pm-transfer-status-chip {
  display: inline-flex; width: fit-content; padding: 3px 10px; border-radius: 999px;
  font-size: 11px !important; background: color-mix(in srgb, var(--color-primary, #c86b4d) 12%, var(--color-surface, #fff));
  color: var(--color-primary-dark, #a8523a) !important;
}

.pm-transfer-select-field {
  display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-text, #172033);
}
.pm-transfer-select-field select,
.pm-transfer-select-field input,
.pm-transfer-select-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px;
  color: var(--color-text, #172033); background: var(--color-surface, #fff); font-size: 14px; font-weight: 400;
}
.pm-transfer-select-field textarea { resize: vertical; min-height: 72px; }
.pm-transfer-date-field { max-width: 260px; }

.pm-transfer-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-transfer-options--scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-transfer-option {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px;
  background: var(--color-surface, #fff); cursor: pointer;
}
.pm-transfer-option:hover { border-color: color-mix(in srgb, var(--color-primary, #c86b4d) 45%, var(--color-border, #e5e7eb)); }
.pm-transfer-option:has(input:checked) {
  border-color: var(--color-primary, #c86b4d);
  background: color-mix(in srgb, var(--color-primary, #c86b4d) 6%, var(--color-surface, #fff));
}
.pm-transfer-option input[type="radio"] {
  width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: var(--color-primary, #c86b4d);
}
.pm-transfer-option-body { display: grid; gap: 3px; }
.pm-transfer-option-body strong { font-size: 13px; font-weight: 700; color: var(--color-text, #172033); }
.pm-transfer-option-body small { font-size: 12px; color: var(--color-text-muted, #667085); }
.pm-transfer-option--compact { align-items: center; padding: 12px 14px; }

.pm-transfer-custom-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-transfer-custom-fields[hidden] { display: none; }
.pm-transfer-custom-fields label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-text, #172033); }
.pm-transfer-custom-fields input {
  padding: 11px 13px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px;
  background: var(--color-surface, #fff); color: var(--color-text, #172033); font-size: 14px;
}

.pm-transfer-info-section {
  padding: 16px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--color-success, #16a34a) 7%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 25%, var(--color-border, #e5e7eb));
}
.pm-transfer-info-section .pm-transfer-section-title { color: var(--color-text, #172033); text-transform: none; font-size: 13px; }
.pm-transfer-info-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pm-transfer-info-list li {
  position: relative; padding-left: 24px; font-size: 13px; color: var(--color-text, #172033);
}
.pm-transfer-info-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; font-weight: 800; color: var(--color-success, #16a34a);
}

.pm-transfer-toggle-field {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--color-text, #172033);
}
.pm-transfer-toggle-field input { width: 17px; height: 17px; accent-color: var(--color-primary, #c86b4d); }

.pm-transfer-summary { background: color-mix(in srgb, var(--color-primary, #c86b4d) 5%, var(--color-surface, #fff)); border-color: color-mix(in srgb, var(--color-primary, #c86b4d) 22%, var(--color-border, #e5e7eb)); }
.pm-transfer-summary .pm-transfer-section-title { margin-bottom: 12px; }
.pm-transfer-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }

.pm-transfer-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 18px 26px; border-top: 1px solid var(--color-border, #e5e7eb); flex: 0 0 auto;
}
.pm-transfer-footer .form-error { margin-right: auto; font-size: 12px; }
.pm-transfer-confirm-button { display: inline-flex !important; align-items: center; gap: 8px; }

@media (max-width: 720px) {
  .pm-transfer-current-grid,
  .pm-transfer-summary-grid,
  .pm-transfer-options,
  .pm-transfer-options--scope,
  .pm-transfer-custom-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   VISÃO GERAL DO CASO — recomposição estrutural (Resumo atual + Responsabilidade
   em linha própria + Pendências/Atualização). Reaproveita os mesmos dados já
   renderizados antes (pm-meta-*, pm-status-highlight, pm-timeline) em um novo
   arranjo -- nenhum dado novo, nenhuma lógica tocada. 100% var(--color-*),
   funciona em qualquer preset (inclusive Cinza Neve, sem alterá-lo).
   ========================================================================== */

.pm-summary-card { margin-bottom: 18px; }

.pm-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}

.pm-summary-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.pm-summary-info-grid dt {
  font-size: 12px;
  color: var(--color-text-muted, #667085);
  margin-bottom: 4px;
}
.pm-summary-info-grid dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-text, #172033);
}

.pm-summary-footnote {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  font-size: 12px;
  color: var(--color-text-muted, #667085);
}

.pm-status-highlight-inline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-background, #f2f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
}
.pm-status-highlight-inline .pm-status-highlight-icon { font-size: 20px; line-height: 1; }
.pm-status-highlight-inline strong { display: block; color: var(--color-text, #172033); margin-bottom: 4px; }
.pm-status-highlight-inline p { margin: 0; color: var(--color-text-muted, #667085); font-size: 13px; }

.pm-progress-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.pm-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  margin-right: 14px;
  border-right: 1px solid var(--color-border, #e5e7eb);
}
.pm-progress-step:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pm-progress-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-border, #e5e7eb);
}
.pm-progress-step.is-completed .pm-progress-dot { background: var(--color-success, #16a34a); }
.pm-progress-step.is-current .pm-progress-dot {
  background: var(--color-primary, #c86b4d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #c86b4d) 20%, transparent);
}
.pm-progress-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted, #667085); white-space: nowrap; }
.pm-progress-step.is-completed .pm-progress-label,
.pm-progress-step.is-current .pm-progress-label { color: var(--color-text, #172033); }

.pm-responsibility-panel { margin-bottom: 18px; }

@media (max-width: 860px) {
  .pm-summary-grid { grid-template-columns: 1fr; }
}

/* IVORY TEAL — paleta financeira premium quente e minimalista. Este bloco é
   deliberadamente escopado ao preset para preservar os demais temas. */
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) {
  background: #F7F5F0 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar {
  color: #27333A !important;
  background: #FAF8F3 !important;
  background-color: #FAF8F3 !important;
  background-image: none !important;
  border-color: #E4E0D8 !important;
  box-shadow: 0 18px 46px rgba(39, 51, 58, 0.08), inset 0 1px 0 #FFFDF9 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > main.app-shell {
  background: #F7F5F0 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar::before,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar::after {
  display: none !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand::after,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-footer {
  background: none !important;
  background-image: none !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-mark {
  color: #27333A !important;
  background: #FFFDF9 !important;
  background-image: none !important;
  border: 1px solid #E4E0D8 !important;
  box-shadow: none !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy strong,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .brand-copy span,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item > span,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item > span {
  color: #6C7578 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .nav-section-label {
  color: #8B9293 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item {
  color: #6C7578 !important;
  background: transparent !important;
  background-image: none !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item svg.nav-icon,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle svg,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-exit-icon svg {
  color: #6C7578 !important;
  stroke: currentColor !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item.active {
  color: #34777B !important;
  background: #E7EFED !important;
  background-image: none !important;
  border-color: #E4E0D8 !important;
  box-shadow: 0 4px 14px rgba(39, 51, 58, 0.06) !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item.active svg.nav-icon {
  color: #34777B !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar nav.nav button.nav-item:hover:not(.active) {
  color: #6C7578 !important;
  background: #F0EEE9 !important;
  background-image: none !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-card {
  color: #27333A !important;
  background: #FFFDF9 !important;
  background-image: none !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle:hover,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled):not(.sidebar-collapsed) > aside.sidebar .sidebar-user-card:hover {
  color: #27333A !important;
  background: #F0EEE9 !important;
  background-image: none !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar #sidebar-toggle span,
html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy strong {
  color: #27333A !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-copy small {
  color: #6C7578 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view]:not(.auth-locked):not(.rf-shell-disabled) > aside.sidebar .sidebar-user-monogram {
  color: #27333A !important;
  background: #F0EEE9 !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-shell,
html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-header,
html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-card,
html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-preview-dialog {
  color: #27333A !important;
  background-color: #FFFDF9 !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-body,
html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-stepper {
  background: #F7F5F0 !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] body[data-view="guided-intake"] #view-guided-intake input,
html[data-theme-preset="ivory-teal"] body[data-view="guided-intake"] #view-guided-intake select,
html[data-theme-preset="ivory-teal"] body[data-view="guided-intake"] #view-guided-intake textarea,
html[data-theme-preset="ivory-teal"] .gi-preview-dialog input,
html[data-theme-preset="ivory-teal"] .gi-preview-dialog select,
html[data-theme-preset="ivory-teal"] .gi-preview-dialog textarea {
  color: #27333A !important;
  background: #FFFDF9 !important;
  border-color: #E4E0D8 !important;
}

html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-aside,
html[data-theme-preset="ivory-teal"] #view-guided-intake .gi-footer,
html[data-theme-preset="ivory-teal"] .gi-preview-dialog,
html[data-theme-preset="ivory-teal"] .gi-preview-dialog footer {
  color: #27333A !important;
  background-color: #FFFDF9 !important;
  border-color: #E4E0D8 !important;
}

/* Ficha de Assistência Médica -- só o necessário para o toolbar de ações (Importar em
   lote/Nova ficha) que fica fora do grid de 3 colunas de .attendance-filters (esse grid é
   dimensionado para busca+2 selects, como na Central de Casos; os botões de ação precisam do
   próprio agrupamento, senão herdam o track largo da 1ª coluna do grid). Sem paleta nova --
   var(--color-*) e a mesma convenção de espaçamento já usada nos outros toolbars. */
.medical-assistance-toolbar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 0 0 14px;
}

/* ============================================================================================
   Central WhatsApp -- fidelidade visual a referencia aprovada. Escopado inteiramente a
   #view-whatsapp-central: nenhuma outra tela e afetada. Reaproveita as cores reais do tema
   (--panel, --line, --ink, --muted, --green/--red/--blue/--gold e seus *-soft) -- nenhuma cor
   nova inventada. Sidebar global normal (expandida ou recolhida) nunca e forcada por esta tela.
   ============================================================================================ */

/* #view-whatsapp-central.active (nao so #view-whatsapp-central): a regra base .view{display:none}/
   .view.active{display:block} (styles.css) so alterna a classe "active" -- um seletor por ID sem o
   ".active" tem especificidade maior que ".view.active" e SEMPRE vencia, deixando este bloco visivel
   (display:flex) em QUALQUER tela, nao so na Central WhatsApp (bug real: Conversas/Regua de
   cobranca/Custos WhatsApp vazando para Calendario e demais views). display:flex so pode valer
   quando a propria view esta ativa. */
#view-whatsapp-central.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bug real corrigido nesta rodada: varias regras abaixo (ex.: .wa-chat, .wa-empty-state) fixam
   `display: flex` para o layout interno -- como CSS de autor sempre vence a folha padrao do
   navegador, isso tornava o atributo `hidden` (usado em JS via `.hidden = true/false` para
   alternar chat vs. empty state) visualmente inerte: os dois chegavam a aparecer sobrepostos ao
   mesmo tempo. Esta regra garante que `hidden` sempre vence dentro desta tela, sem excecoes. */
#view-whatsapp-central [hidden] {
  display: none !important;
}

/* --- Grid principal: 3 colunas (~27% / 48% / 25%), altura equilibrada ------------------------- */
#view-whatsapp-central .wa-workspace {
  display: grid;
  grid-template-columns: 27fr 48fr 25fr;
  gap: 14px;
  align-items: stretch;
  height: clamp(460px, calc(100vh - 300px), 660px);
  min-height: 460px;
}

@media (max-width: 1600px) {
  #view-whatsapp-central .wa-workspace {
    grid-template-columns: 29fr 46fr 25fr;
  }
}

@media (max-width: 1366px) {
  #view-whatsapp-central .wa-workspace {
    grid-template-columns: 26fr 44fr 30fr;
    height: clamp(460px, calc(100vh - 260px), 620px);
  }
}

@media (max-width: 1180px) {
  #view-whatsapp-central .wa-workspace {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  #view-whatsapp-central .wa-panel-details {
    grid-column: 1 / -1;
    height: 360px;
  }
}

@media (max-width: 860px) {
  #view-whatsapp-central .wa-workspace {
    grid-template-columns: 1fr;
    height: auto;
  }
  #view-whatsapp-central .wa-panel-conversations,
  #view-whatsapp-central .wa-panel-chat {
    height: 480px;
  }
}

#view-whatsapp-central .wa-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.04);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#view-whatsapp-central .wa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex: none;
}

#view-whatsapp-central .wa-panel-head h2 {
  margin: 0;
  font-size: 15px;
}

/* --- Coluna 1: conversas ------------------------------------------------------------------- */
#view-whatsapp-central .wa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  flex: none;
}

#view-whatsapp-central .wa-filters button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

#view-whatsapp-central .wa-filters button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

#view-whatsapp-central .wa-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

#view-whatsapp-central .wa-sort-row label {
  display: flex;
  align-items: center;
  gap: 5px;
}

#view-whatsapp-central .wa-sort-row select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  padding: 4px 6px;
}

#view-whatsapp-central .wa-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
}

#view-whatsapp-central .wa-conversation-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  flex: none;
}

#view-whatsapp-central .wa-conversation-item:hover {
  background: var(--bg);
}

#view-whatsapp-central .wa-conversation-item.active {
  border-color: var(--line);
  background: var(--bg);
}

#view-whatsapp-central .wa-conversation-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

#view-whatsapp-central .wa-conversation-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#view-whatsapp-central .wa-conversation-item-top strong {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-whatsapp-central .wa-conversation-item-top small {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

#view-whatsapp-central .wa-conversation-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#view-whatsapp-central .wa-conversation-item-bottom small {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-whatsapp-central .wa-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

#view-whatsapp-central .wa-avatar-phone {
  background: #25d366;
  color: #fff;
}

#view-whatsapp-central .wa-avatar-phone svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

#view-whatsapp-central .wa-unread-badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  align-self: center;
}

#view-whatsapp-central .wa-status-pill {
  flex: none;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

#view-whatsapp-central .wa-status-pill.is-open { background: var(--green-soft); color: var(--green-deep); }
#view-whatsapp-central .wa-status-pill.is-attention { background: var(--gold-soft); color: var(--gold); }
#view-whatsapp-central .wa-status-pill.is-neutral { background: var(--bg); color: var(--muted); }

#view-whatsapp-central .wa-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 120px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* --- Coluna 2: chat ------------------------------------------------------------------------- */
#view-whatsapp-central .wa-panel-chat {
  padding: 0;
}

#view-whatsapp-central .wa-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#view-whatsapp-central .wa-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

#view-whatsapp-central .wa-chat-head-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
}

#view-whatsapp-central .wa-chat-head-avatar svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

#view-whatsapp-central .wa-chat-head-info {
  flex: 1;
  min-width: 0;
}

#view-whatsapp-central .wa-chat-head-info h2 {
  margin: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-whatsapp-central .wa-chat-head-info span {
  font-size: 12px;
  color: var(--muted);
}

#view-whatsapp-central .wa-chat-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: none;
}

#view-whatsapp-central .wa-icon-button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#view-whatsapp-central .wa-icon-button:hover {
  background: var(--bg);
}

#view-whatsapp-central .wa-chat-menu {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
}

#view-whatsapp-central .wa-chat-menu button {
  width: 100%;
  text-align: left;
}

/* Fundo do historico com uma textura extremamente discreta (sem imagem externa), inspirada no
   WhatsApp: um padrao geometrico sutil via gradientes CSS repetidos, quase imperceptivel. */
#view-whatsapp-central .wa-message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12px 12px, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 32px 32px, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
  background-size: 44px 44px;
}

#view-whatsapp-central .wa-date-divider {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

#view-whatsapp-central .wa-date-divider span {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11px;
  color: var(--muted);
}

#view-whatsapp-central .wa-message {
  display: flex;
  margin: 2px 0;
}

#view-whatsapp-central .wa-message-inbound { justify-content: flex-start; }
#view-whatsapp-central .wa-message-outbound { justify-content: flex-end; }

#view-whatsapp-central .wa-bubble {
  max-width: 62%;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

#view-whatsapp-central .wa-message-outbound .wa-bubble {
  background: var(--green-soft);
  border-color: transparent;
}

#view-whatsapp-central .wa-bubble-tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 2px;
}

#view-whatsapp-central .wa-bubble p {
  margin: 0;
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

#view-whatsapp-central .wa-bubble-meta {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
  text-align: right;
}

#view-whatsapp-central .wa-tick { margin-left: 4px; }
#view-whatsapp-central .wa-tick-delivered { color: var(--muted); }
#view-whatsapp-central .wa-tick-read { color: var(--blue); }
#view-whatsapp-central .wa-tick-failed { color: var(--red); font-weight: 700; }

/* --- Composer: card com abas Responder/Observacao interna ------------------------------------ */
#view-whatsapp-central .wa-composer-card {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 10px 14px 12px;
}

#view-whatsapp-central .wa-composer-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

#view-whatsapp-central .wa-composer-tabs button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  padding: 5px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

#view-whatsapp-central .wa-composer-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--green);
  font-weight: 600;
}

#view-whatsapp-central .wa-composer-status {
  font-size: 11.5px;
  margin-bottom: 6px;
}

#view-whatsapp-central .wa-composer-status.is-open { color: var(--green-deep); }
#view-whatsapp-central .wa-composer-status.is-closed { color: var(--gold); }

#view-whatsapp-central .wa-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

#view-whatsapp-central .wa-composer-row textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  background: var(--panel);
  color: var(--ink);
}

#view-whatsapp-central .wa-composer-row textarea:disabled {
  background: var(--bg);
  color: var(--muted);
}

#view-whatsapp-central .wa-send-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#view-whatsapp-central .wa-send-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

#view-whatsapp-central .wa-composer-template {
  margin-top: 8px;
}

#view-whatsapp-central .wa-composer-template label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

#view-whatsapp-central .wa-composer-template input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

#view-whatsapp-central .wa-composer-hint {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--muted);
}

#view-whatsapp-central .wa-composer-error {
  margin: 8px 14px 0;
  color: var(--red);
  font-size: 12px;
  flex: none;
}

/* --- Coluna 3: detalhes / cobranca / acoes --------------------------------------------------- */
#view-whatsapp-central .wa-panel-details {
  gap: 12px;
  overflow-y: auto;
}

#view-whatsapp-central .wa-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  flex: none;
}

#view-whatsapp-central .wa-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

#view-whatsapp-central .wa-card-subhead {
  margin: 12px 0 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

#view-whatsapp-central .wa-card-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

#view-whatsapp-central .wa-detail-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#view-whatsapp-central .wa-detail-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#view-whatsapp-central .wa-detail-list dt {
  font-size: 12px;
  color: var(--muted);
}

#view-whatsapp-central .wa-detail-list dd {
  margin: 0;
  font-size: 12.5px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

#view-whatsapp-central .wa-link-client-box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

#view-whatsapp-central .wa-link-client-box label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

#view-whatsapp-central .wa-link-client-box input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

#view-whatsapp-central .wa-link-client-results {
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#view-whatsapp-central .wa-link-client-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  cursor: pointer;
}

#view-whatsapp-central .wa-link-client-result:hover {
  background: var(--bg);
}

#view-whatsapp-central .wa-stages-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#view-whatsapp-central .wa-stage-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
}

#view-whatsapp-central .wa-stage-days {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

#view-whatsapp-central .wa-stage-row select {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 12px;
  background: var(--panel);
  color: var(--ink);
  min-width: 0;
}

#view-whatsapp-central .wa-stage-enabled {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px !important;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

#view-whatsapp-central .wa-stages-save {
  margin-top: 8px;
  width: 100%;
}

#view-whatsapp-central .wa-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#view-whatsapp-central .wa-quick-actions button {
  flex: 1 1 calc(50% - 6px);
  min-width: 120px;
  font-size: 12px;
  padding: 7px 8px;
}

/* --- Rodape: aniversariantes -------------------------------------------------------------------- */
#view-whatsapp-central .wa-bottom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#view-whatsapp-central .wa-panel-birthdays {
  padding: 14px;
}

#view-whatsapp-central .wa-panel-delinquency {
  padding: 14px;
}

/* --- Custos WhatsApp (card discreto) ------------------------------------------------------- */
#view-whatsapp-central .wa-price-table {
  margin-top: 8px;
  font-size: 12px;
}

#view-whatsapp-central .wa-price-table summary {
  cursor: pointer;
  color: var(--wa-muted, #64748b);
}

#view-whatsapp-central .wa-price-table-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

#view-whatsapp-central .wa-price-table-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

#view-whatsapp-central .wa-price-table-form input {
  font-size: 12px;
  padding: 5px 6px;
}

#view-whatsapp-central .wa-price-table-form button {
  grid-column: 1 / -1;
}

/* ============================================================================================
   Relatorio "Honorarios de exito" (Fase 4) -- aba dentro de #view-forecasts. Escopado inteiramente
   a #forecast-tabs-bar/#forecast-success-fee-section: nenhuma outra tela e afetada (mesma disciplina
   de isolamento por ID aplicada apos o incidente de vazamento da Central WhatsApp).
   ============================================================================================ */
#forecast-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

#forecast-tabs-bar button.is-active {
  background: var(--ink, #1f2430);
  color: #fff;
  border-color: var(--ink, #1f2430);
}

#forecast-success-fee-section .forecast-reconciliation-note-inline {
  color: var(--muted, #6b7280);
  font-size: 12px;
  margin: 4px 0 14px;
}

/* ============================================================================================
   Etapa 2 -- lista de obrigações (VALOR FIXO/PERSONALIZADO) + Etapa 8 -- Cobranças
   (simplificação definitiva de Honorários/Cobranças, 2026-09-03). Escopado a #view-guided-intake
   inteiro (a mesma tela serve Atendimento Guiado novo e Editar ficha) -- nenhum seletor global.
   ============================================================================================ */

/* Só 3 cartões agora (era até 5) -- uma única fileira fica mais equilibrada que o grid de 2
   colunas padrão de .gi-fee-models (pensado para até 5 itens). */
#view-guided-intake .gi-fee-models {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  #view-guided-intake .gi-fee-models {
    grid-template-columns: 1fr;
  }
}

#view-guided-intake .gi-obligations-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--gi-line);
  border-radius: 11px;
  padding: 20px;
  margin-bottom: 18px;
}

#view-guided-intake .gi-obligations-total {
  max-width: 320px;
  margin-bottom: 4px;
}

#view-guided-intake .gi-obligations-heading {
  margin: 18px 0 4px;
  color: var(--gi-navy);
  font-size: 13px;
  font-weight: 700;
}

#view-guided-intake #gi-obligations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
}

/* Correcao pontual pos-aprovacao (2026-09-03): a obrigacao ganhou forma de pagamento/parcelas/taxa/
   encargos estruturados (antes so valor+vencimento+observacao) -- para nao virar uma linha gigante
   (secao 13 do pedido), a linha passa a empilhar 3 blocos (principal, campos condicionais do cartao/
   encargos, observacao) em vez de um unico flex-row. */
#view-guided-intake .gi-obligation-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gi-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gi-line) 18%, transparent);
}

#view-guided-intake .gi-obligation-row-main {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

#view-guided-intake .gi-obligation-index {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gi-terracotta-soft);
  color: var(--gi-terracotta);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* :not([hidden]) -- sem isso, esta regra (mesma especificidade de [hidden]) vence o [hidden] nativo
   por vir depois na cascata, e os blocos condicionais de cartao/encargos (secao 1/13 da correcao
   pontual pos-aprovacao) ficariam sempre visiveis mesmo com o atributo hidden aplicado -- bug real
   encontrado no proprio clique-through desta correcao. */
#view-guided-intake .gi-obligation-row-fields:not([hidden]) {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

#view-guided-intake .gi-obligation-row-extra {
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gi-line) 35%, transparent);
}

#view-guided-intake .gi-obligation-note {
  width: 100%;
}

#view-guided-intake .gi-obligation-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  color: var(--gi-muted);
  margin-bottom: 2px;
}

#view-guided-intake .gi-obligation-remove:hover {
  color: var(--gi-terracotta);
  border-color: var(--gi-terracotta);
}

#view-guided-intake .gi-obligations-summary {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gi-line) 25%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-guided-intake .gi-obligations-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gi-navy);
}

#view-guided-intake .gi-obligations-balance-row {
  padding-top: 6px;
  border-top: 1px dashed var(--gi-line);
}

#view-guided-intake .gi-obligations-balance {
  font-weight: 700;
  font-size: 12.5px;
}

#view-guided-intake .gi-obligations-balance.is-ok {
  color: #1f8a4c;
}

#view-guided-intake .gi-obligations-balance.is-pending {
  color: var(--gi-terracotta);
}

#view-guided-intake .gi-obligations-balance.is-error {
  color: #c0392b;
}

/* Etapa 8 -- Cobranças: cada obrigação é seu próprio bloco, com forma de pagamento e ação de
   gerar cobrança isoladas -- nunca um formulário único para o plano inteiro. */
#view-guided-intake .gi-cobranca-row {
  border: 1px solid var(--gi-line);
  border-radius: 11px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--color-surface, #fff);
}

#view-guided-intake .gi-cobranca-row.is-done {
  display: flex;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, #1f8a4c 6%, var(--color-surface, #fff));
  border-color: color-mix(in srgb, #1f8a4c 30%, var(--gi-line));
}

#view-guided-intake .gi-cobranca-check {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1f8a4c;
  color: #fff;
  font-weight: 800;
}

#view-guided-intake .gi-cobranca-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--gi-muted);
  margin-bottom: 10px;
}

#view-guided-intake .gi-cobranca-row.is-done .gi-cobranca-info {
  flex: 1 1 auto;
  margin-bottom: 0;
}

#view-guided-intake .gi-cobranca-info strong {
  font-size: 16px;
  color: var(--gi-navy);
}

#view-guided-intake .gi-cobranca-status {
  font-weight: 700;
  color: #1f8a4c;
}

#view-guided-intake .gi-cobranca-form {
  margin-bottom: 10px;
}

#view-guided-intake .gi-cobranca-sim-result:not([hidden]) {
  margin-bottom: 10px;
}

/* ==== Calculadora Asaas (Financeiro) -- layout inspirado no simulador publico do Asaas =========
   Apenas visual: nenhuma classe aqui altera calculo/valor, so a organizacao/estilo dos MESMOS campos
   e do MESMO resultado ja calculados por computeAsaasCalculatorSimulation (server) e renderizados por
   asaasCalculatorResultHtml (app.js). Duas colunas no desktop (formulario / resultado), empilhado no
   mobile -- mesma estrutura do simulador em asaas.com/precos-e-taxas (label acima do campo, botao em
   pilha, cartao de resultado com numeros grandes em destaque). */
#view-asaas-calculator .asaas-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  #view-asaas-calculator .asaas-calc-layout {
    grid-template-columns: 1fr;
  }
}

#view-asaas-calculator .asaas-calc-form-panel,
#view-asaas-calculator .asaas-calc-result-panel {
  padding: 24px;
}

#view-asaas-calculator .asaas-calc-panel-title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rf-text);
}

#view-asaas-calculator .asaas-calculator-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#view-asaas-calculator .asaas-calc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  #view-asaas-calculator .asaas-calc-field-row {
    grid-template-columns: 1fr;
  }
}

#view-asaas-calculator .asaas-calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-asaas-calculator .asaas-calc-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--rf-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#view-asaas-calculator .asaas-calc-field input[type="number"],
#view-asaas-calculator .asaas-calc-field input[type="text"],
#view-asaas-calculator .asaas-calc-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--rf-border);
  border-radius: 10px;
  background: var(--rf-surface);
  color: var(--rf-text);
  font-size: 15px;
}

#view-asaas-calculator .asaas-calc-field input:disabled {
  color: var(--rf-text-secondary);
  background: var(--rf-page);
}

#view-asaas-calculator .asaas-calc-field select {
  appearance: auto;
}

#view-asaas-calculator .asaas-calc-field input:focus,
#view-asaas-calculator .asaas-calc-field select:focus {
  outline: none;
  border-color: var(--rf-primary);
  box-shadow: 0 0 0 3px var(--rf-primary-soft);
}

#view-asaas-calculator .asaas-calc-input-prepend {
  display: flex;
  align-items: center;
  border: 1px solid var(--rf-border);
  border-radius: 10px;
  background: var(--rf-surface);
  overflow: hidden;
}

#view-asaas-calculator .asaas-calc-input-prepend:focus-within {
  border-color: var(--rf-primary);
  box-shadow: 0 0 0 3px var(--rf-primary-soft);
}

#view-asaas-calculator .asaas-calc-input-prepend span {
  padding: 11px 0 11px 14px;
  color: var(--rf-text-secondary);
  font-size: 15px;
  font-weight: 600;
}

#view-asaas-calculator .asaas-calc-input-prepend input {
  border: none !important;
  box-shadow: none !important;
  padding: 11px 14px 11px 6px !important;
  font-size: 15px;
}

#view-asaas-calculator .asaas-calc-submit {
  margin-top: 4px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

#view-asaas-calculator .asaas-calculator-disclaimer {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--rf-text-secondary);
  line-height: 1.5;
}

#view-asaas-calculator .asaas-calc-result-panel {
  min-height: 100%;
  background: var(--rf-page);
}

#view-asaas-calculator .asaas-calc-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  text-align: center;
  color: var(--rf-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

#view-asaas-calculator .asaas-calc-result-card {
  display: flex;
  flex-direction: column;
}

#view-asaas-calculator .asaas-calc-result-hero {
  padding: 16px 0;
  border-bottom: 1px solid var(--rf-border);
}

#view-asaas-calculator .asaas-calc-result-hero:first-child {
  padding-top: 0;
}

#view-asaas-calculator .asaas-calc-result-hero-label {
  display: block;
  font-size: 13px;
  color: var(--rf-text-secondary);
  margin-bottom: 4px;
}

#view-asaas-calculator .asaas-calc-result-hero-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--rf-text);
  line-height: 1.2;
}

#view-asaas-calculator .asaas-calc-result-hero-positive .asaas-calc-result-hero-value {
  color: var(--rf-success);
}

#view-asaas-calculator .asaas-calc-result-hero-caption {
  display: block;
  font-size: 12px;
  color: var(--rf-text-secondary);
  margin-top: 4px;
}

#view-asaas-calculator .asaas-calc-result-rows {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

#view-asaas-calculator .asaas-calc-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rf-border);
  font-size: 14px;
}

#view-asaas-calculator .asaas-calc-result-row:last-child {
  border-bottom: none;
}

#view-asaas-calculator .asaas-calc-result-row span {
  color: var(--rf-text-secondary);
}

#view-asaas-calculator .asaas-calc-result-row strong {
  color: var(--rf-text);
  font-weight: 600;
  text-align: right;
}

#view-asaas-calculator .asaas-calc-copy-button {
  margin-top: 18px;
  align-self: flex-start;
}