/* ============================================================================
 * interact-custom.css — overrides VISUAIS Interact (Onda 4E Designer)
 *
 * Carregado em home.html APOS custom.min.css + theme-ocean.min.css.
 * NAO sobrescreve CSS Imoview literais; apenas resolve gaps detectados:
 *   - Toastr fallback nativo (sem dep externa)
 *   - Loading skeleton listas
 *   - Tooltip Bootstrap consistente
 *   - z-index modais aninhados
 *   - Border validation Faixa Aluguel
 *   - Autocomplete dropdown padronizado
 *   - Topbar badges colorizados por widget
 *   - Header colors uniformes em modals
 *   - Spacing entre seções 20px padrão Imoview
 *   - Wizard fase ativa indicator
 *
 * Convenções:
 *   - mint #50c7a7 (Nifty original) / accent #5aaedc / deep #2d5b75
 *   - danger #d9534f / warning #f0ad4e / info #5bc0de / success #5cb85c
 *
 * Ver: [[Sessoes/2026-05-06 - Auditoria Visual Ondas A-D]]
 *      [[Status Onda 4E Designer 2026-05-06]]
 * ========================================================================= */

/* ─── 1. TOPBAR — badges coloridos por categoria ─────────────────────── */
/* Imoview difere cores: Bell vermelho (alertas), ImoveisNovos azul (info),
 * Cal amarelo (warning). Hoje Interact usa badge-danger pra todos. */
#topbarImoveisNovos .badge-header {
  background-color: #5aaedc !important;   /* azul accent (novidade, não urgente) */
  color: #fff;
}
#topbarBell .badge-header,
#topbarBell .notificacaoQt {
  background-color: #d9534f !important;   /* vermelho danger (alerta) */
  color: #fff;
}
#topbarCal .badge-header,
#topbarCal #qtAtividade {
  background-color: #f0ad4e !important;   /* amarelo warning (atividade pendente) */
  color: #fff;
}
#topbarClk .topbarClkAtrasados {
  background-color: #d9534f !important;
  color: #fff;
}

/* Topbar dropdown menus — espaçamento + scroll consistente */
.topbarBellMenu,
.topbarNovidadesMenu,
.topbarClkMenu {
  max-height: 480px;
  overflow-y: auto;
  margin-top: 6px;
}
.topbarBellMenu li,
.topbarNovidadesMenu li {
  border-bottom: 1px solid #f3f3f3;
}
.topbarBellMenu li:last-child,
.topbarNovidadesMenu li:last-child {
  border-bottom: none;
}

/* ─── 2. MODAL — header gradient + spacing + nested z-index ──────────── */
.modal .modal-header {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.modal .modal-header .modal-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.modal .modal-header .close {
  font-size: 22px;
  opacity: 0.85;
  text-shadow: none;
}
.modal .modal-header .close:hover {
  opacity: 1;
}
.modal .modal-body {
  padding: 18px;
}
.modal .modal-footer {
  padding: 10px 18px;
  border-top: 1px solid #f0f0f0;
}

/* z-index nested modal (Instagram dentro de Compartilhar, etc) */
.modal.fade.in ~ .modal.fade.in {
  z-index: 1060;
}
.modal-backdrop.fade.in ~ .modal-backdrop.fade.in {
  z-index: 1059;
}

/* Header colors uniformes — categorias */
.modal-header.bg-info     { background-color: #5bc0de; }   /* leitura/info */
.modal-header.bg-mint     { background-color: #50c7a7; }   /* criação/OK */
.modal-header.bg-warning  { background-color: #f0ad4e; }   /* alerta/confirmação */
.modal-header.bg-primary  { background-color: #5aaedc; }   /* navegação/imprimir */
.modal-header.bg-dark     { background-color: #424242; color: #fff; }
.modal-header.bg-danger   { background-color: #d9534f; }   /* delete */

/* ─── 3. TOOLTIPS Bootstrap — padronizar apresentação ───────────────── */
.tooltip-inner {
  background-color: #2d5b75;   /* deep theme-ocean */
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  max-width: 240px;
}
.tooltip.top .tooltip-arrow,
.tooltip.right .tooltip-arrow,
.tooltip.left .tooltip-arrow,
.tooltip.bottom .tooltip-arrow {
  border-color: transparent;
}
.tooltip.top .tooltip-arrow      { border-top-color: #2d5b75; }
.tooltip.right .tooltip-arrow    { border-right-color: #2d5b75; }
.tooltip.bottom .tooltip-arrow   { border-bottom-color: #2d5b75; }
.tooltip.left .tooltip-arrow     { border-left-color: #2d5b75; }

/* ─── 3.6. CARD-ATENDIMENTO + LIST-GROUP — paridade Imoview literal step 2 ──
 * Gaps detectados em auditoria CDP arquiteto+engenheiro 2026-05-19:
 *   .card-atendimento sem regra → card sem moldura/padding
 *   a.list-group-item sem regra → cantos quadrados + sem espaçamento
 *   #resumoCliente max-height:550px (regra Interact-only) cria scroll
 * Doc: [[Onda F-resumoCliente-card-css-paridade 2026-05-19]] */
.card-atendimento {
  border: 1px solid #e3e9ef;
  padding: 1.5rem;
  border-radius: 1rem !important;
}
#resumoCliente a.list-group-item {
  margin-bottom: 2px;
  border-radius: 10px !important;
}
/* Remove regra Interact-only que cria scroll interno (sem paridade Imoview) */
#resumoCliente {
  max-height: none !important;
  overflow: visible !important;
}

/* ─── 3.5. FOOTER — pointer-events:none para não bloquear cliques ──────────
 * Bug pré-existente: <footer id="footer"> tem position:absolute; bottom:0;
 * z-index:2 e referência ao #content-container. Quando o conteúdo é menor
 * que viewport, o footer "sobe" e cobre botões finais (#demo-bv-wz .next).
 * Imoview real funciona porque #content-container lá tem altura maior.
 * Fix mínimo: pointer-events:none no footer (visível, mas clicks passam).
 * Doc: [[Onda F-footer-pointer-events 2026-05-18]] */
#footer {
  pointer-events: none;
}
#footer a,
#footer button,
#footer input,
#footer select,
#footer .show-fixed {
  pointer-events: auto; /* preserva interatividade de eventuais filhos */
}

/* ─── 4. AUTOCOMPLETE dropdown — paridade Imoview literal (DIRETRIZ #1) ──── */
/* Fonte canônica: imoview/css/custom.min.css regra .ui-autocomplete */
.autocomplete-imoview,
ul.ui-autocomplete {
  position: fixed;
  background: #fff;
  border: 1px solid #dedede;
  border-top: 1px solid #ccc;
  z-index: 999999 !important;
  list-style: none;
  padding: 0;
  margin-left: 3px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 1px 5px #888;
  cursor: pointer;
  font: 15px 'Open Sans', sans-serif;
}
.autocomplete-imoview li,
ul.ui-autocomplete .ui-menu-item {
  padding: 7px 0 7px 7px !important;
  cursor: pointer;
  list-style: none;
}
ul.ui-autocomplete .ui-menu-item:nth-child(odd) {
  background-color: #efefef;
}
.autocomplete-imoview li:hover,
.autocomplete-imoview li.active,
ul.ui-autocomplete .ui-menu-item.ui-state-focus,
ul.ui-autocomplete .ui-menu-item:hover {
  background: #eee;
}
.autocomplete-imoview .ac-id {
  color: #5aaedc;
  font-weight: 600;
}
.autocomplete-imoview .ac-sub {
  color: #777;
  font-size: 12px;
  margin-top: 2px;
}

/* ─── 5. LOADING SKELETON — listas paginadas e tabelas ───────────────── */
.skeleton-row {
  display: block;
  height: 14px;
  margin: 8px 0;
  background: linear-gradient(90deg, #eef0f3 0%, #f5f7f9 50%, #eef0f3 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 3px;
}
.skeleton-row.skeleton-row-sm  { height: 10px; }
.skeleton-row.skeleton-row-lg  { height: 18px; }
.skeleton-row.skeleton-row-w50 { width: 50%; }
.skeleton-row.skeleton-row-w70 { width: 70%; }
.skeleton-row.skeleton-row-w90 { width: 90%; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.lista-loading {
  padding: 18px;
}
.lista-loading .skeleton-row + .skeleton-row {
  margin-top: 6px;
}

/* ─── 6. VALIDATION — form-control com erro ─────────────────────────── */
.form-control.has-error,
.form-control.input-erro,
.input-erro .form-control {
  border-color: #d9534f !important;
  box-shadow: inset 0 1px 2px rgba(217,83,79,0.18);
}
.form-control.has-error:focus,
.form-control.input-erro:focus {
  border-color: #c9302c !important;
  box-shadow: inset 0 1px 2px rgba(217,83,79,0.25),
              0 0 6px rgba(217,83,79,0.4);
}
.help-erro {
  color: #d9534f;
  font-size: 12px;
  margin-top: 3px;
  display: block;
}

/* ─── 7. WIZARD wz-icon-bw — Onda F-layout-paridade P2-2 2026-05-22 ─── */
/* REMOVIDO box-shadow halo do ícone ativo — Imoview canônico não tem essa sombra.
 * Originalmente: box-shadow: 0 0 0 4px rgba(59,65,70,0.18); */

/* ─── 8. BTN-CUSTOM — espaçamento ícone+texto consistente ────────── */
.btn-custom .fa,
.btn-custom .fe-,
.btn-custom [class^="fe-"] {
  margin-right: 4px;
}
.btn-custom + .btn-custom {
  margin-left: 4px;
}

/* ─── 9. PANEL — espaçamento entre painéis colapsáveis ─────────────── */
#page-content > .row + .row,
#page-content .panel + .panel {
  margin-top: 12px;
}
.panel-heading {
  padding: 10px 14px;
}
.panel-heading .panel-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ─── 10. TABELAS — hover row + zebra leve ─────────────────────────── */
.table-hover > tbody > tr:hover {
  background-color: #f0f7fc;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fafbfc;
}

/* ─── 11. TOASTR FALLBACK — notificação canto inferior direito ─────── */
/* Quando toastr não está carregado, exibimos um stack próprio sem dep externa.
 * Wireado em interact-toast.js (carregado depois deste CSS). */
#interact-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10500;
  width: 320px;
  max-height: 80vh;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.interact-toast {
  background: #fff;
  border-left: 4px solid #5aaedc;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  padding: 12px 14px 12px 16px;
  font-size: 13px;
  color: #333;
  pointer-events: auto;
  animation: toast-in 220ms ease-out;
  position: relative;
  cursor: pointer;
}
.interact-toast.toast-success { border-left-color: #5cb85c; }
.interact-toast.toast-info    { border-left-color: #5bc0de; }
.interact-toast.toast-warning { border-left-color: #f0ad4e; }
.interact-toast.toast-error,
.interact-toast.toast-danger  { border-left-color: #d9534f; }
.interact-toast .toast-title {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 13px;
  color: #2d5b75;
}
.interact-toast .toast-msg {
  color: #555;
  line-height: 1.4;
}
.interact-toast .toast-close {
  position: absolute;
  top: 4px;
  right: 8px;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.interact-toast .toast-close:hover { color: #555; }
.interact-toast.toast-out {
  animation: toast-out 180ms ease-in forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ─── 12. ALERT — bordas arredondadas + ícone esquerda ─────────────── */
.modal .alert {
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.modal .alert.alert-info    { border-left-color: #5bc0de; }
.modal .alert.alert-success { border-left-color: #5cb85c; }
.modal .alert.alert-warning { border-left-color: #f0ad4e; }
.modal .alert.alert-danger  { border-left-color: #d9534f; }
.modal .alert .fa,
.modal .alert [class^="fe-"] { margin-top: 2px; }

/* ─── 13. DROPDOWN ações — espaçamento links ─────────────────────── */
.dropdown-menu > li > a {
  padding: 7px 14px;
  font-size: 13px;
}
.dropdown-menu > li > a .fa,
.dropdown-menu > li > a [class^="fe-"] {
  width: 18px;
  margin-right: 6px;
  color: #5aaedc;
  text-align: center;
}
.dropdown-menu .divider {
  margin: 4px 0;
}

/* ─── 14. CARRINHO (Atendimento) — dropdown ações inline ─────────── */
.acoesCarrinho .dropdown-menu {
  min-width: 200px;
}
.acoesCarrinho .dropdown-menu > li > a {
  padding-left: 12px;
  padding-right: 12px;
}
.acoesCarrinho .dropdown-menu .removerImovelCarrinho {
  color: #d9534f;
}
.acoesCarrinho .dropdown-menu .removerImovelCarrinho:hover {
  background: #fdeded;
  color: #c9302c;
}

/* ─── 15. ABA TICKET — badge contador ─────────────────────────────── */
li.abaTicket .badge {
  margin-left: 6px;
  background-color: #5aaedc;
  font-size: 10px;
  padding: 2px 6px;
}
li.abaTicket.active .badge {
  background-color: #2d5b75;
}

/* ─── 16. CONTRATOVENDA / FICHA — KPI cards ─────────────────────── */
.card-kpi {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #e9e9e9;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card-kpi .card-num {
  font-size: 28px;
  font-weight: 300;
  color: #2d5b75;
  line-height: 1.1;
}
.card-kpi .card-lbl {
  color: #888;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── 17. ENGINE TOKENS sidebar — botão hover ─────────────────────── */
.botaoToken {
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 12px;
  padding: 4px 8px;
  margin: 2px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 120ms ease;
}
.botaoToken:hover {
  background: #5aaedc;
  border-color: #5aaedc;
  color: #fff;
}

/* ─── 18. CONFIG ADM — painéis collapsed contraídos ──────────────── */
.panel-heading[data-toggle="collapse"] {
  cursor: pointer;
  user-select: none;
}
.panel-heading[data-toggle="collapse"]:hover {
  background-color: #f5f8fa;
}

/* ─── 19. MODAL IA (descricao-ia) — área texto + provider info ───── */
#modalCriarDescricaoIA .alert-provider {
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
#modalCriarDescricaoIA textarea {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
#modalCriarDescricaoIA .char-counter {
  text-align: right;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* ─── 20. SUB-MODAL Instagram — preview imagem ───────────────────── */
#ModalInstagram img.preview-capa,
#modalInstagram img.preview-capa {
  max-width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  margin-bottom: 8px;
}

/* ─── 21. RESPONSIVE — mobile fixes pra modais largos ─────────────── */
@media (max-width: 767px) {
  .modal-dialog.modal-lg,
  .modal-dialog.modal-wide {
    width: 95%;
    margin: 10px auto;
  }
  .topbar-badge { font-size: 9px; }
}

/* ============================================================================
 * Onda 6 — Validação Visual Cross-tela 2026-05-06
 * Pipeline canônico extensão Chrome v1.15 (Imoview real vs Interact)
 *
 * Captura full-page das 7 telas prioritárias + comparação multimodal Claude:
 *  Tela 1 — Dashboard (Indicador/Index)
 *  Tela 2 — Imovel/Detalhes/485
 *  Tela 3 — Configuracao/Alterar?aba=CRM
 *  Tela 4 — Configuracao/Alterar?aba=ADM (sub-tabs CRM/ADM/FIN/PÓS/PRÉ/Auditoria)
 *  Tela 5 — ContratoAluguel/Incluir
 *  Tela 6 — Atendimento/Detalhes/268
 *  Tela 7 — PessoaF/Detalhes/1154
 *
 * Ver: [[Validacao Visual Onda 6 2026-05-06]]
 * ========================================================================= */

/* ─── 22. RELACIONAMENTOS — botão "Lead" verde ativo Imoview ─────────── */
/* Imoview marca relacionamento Lead com fundo verde mint quando ativo;
 * Interact tinha Lead em azul (btn-primary). Botões relacionamento PF/PJ
 * vêm como `btn btn-custom btn-primary` (Lead ativo) ou `btn-default` (zero).
 * Identificamos Lead pelo painel Relacionamentos sem precisar tocar markup. */
#painelRelacionamentos .btn.btn-primary,
#btnLead.btn-primary,
.relacionamentos-pessoa .btn.btn-primary {
  background-color: #50c7a7;
  border-color: #50c7a7;
  color: #fff;
}
#painelRelacionamentos .btn.btn-primary:hover,
#btnLead.btn-primary:hover,
.relacionamentos-pessoa .btn.btn-primary:hover {
  background-color: #3fb592;
  border-color: #3fb592;
  color: #fff;
}

/* ─── 23. BREADCRUMB — exibir nome de pessoa em vez de ID ────────────── */
/* Quando enhancer renderiza breadcrumb com `1154` em vez de nome,
 * o link pode ficar vazio/curto. Esta classe permite ajustar font-weight
 * e ajuda visual (sublinhada se for clicável). */
.breadcrumb a[data-breadcrumb-fallback="id"] {
  font-weight: 500;
  color: #5aaedc;
}
.breadcrumb .breadcrumb-pessoa-nome {
  font-weight: 500;
}

/* ─── 24. SUB-TABS CONFIG (CRM/ADM/FIN/PÓS/PRÉ/Auditoria) ────────────── */
/* Imoview usa botões pílula no canto superior direito da tela Config;
 * Interact pode tê-los embutidos no mesmo lugar. Padronizar visual. */
.config-subtabs,
.nav-tabs-config {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: flex-end;
}
.config-subtabs > a,
.nav-tabs-config > li > a {
  padding: 6px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #d0d6dc;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  transition: all 120ms ease;
}
.config-subtabs > a.active,
.config-subtabs > a:hover,
.nav-tabs-config > li.active > a,
.nav-tabs-config > li > a:hover {
  background: #50c7a7;
  border-color: #50c7a7;
  color: #fff;
}
.config-subtabs > a.disabled,
.nav-tabs-config > li.disabled > a {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
  border-color: #e0e0e0;
}

/* ─── 25. AVATARES MOOD — tamanho compacto Imoview ───────────────────── */
/* Ficha Imovel/Atendimento mostra 3 círculos de humor (verde/cinza/vermelho)
 * Imoview usa diâmetro ~36px; Interact usava 48-56px. Padronizar pra 36px. */
.avatar-mood,
.avatares-mood .mood-circle,
.atendimento-mood-circle,
.imovel-mood-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-size: 16px;
  vertical-align: middle;
}
.avatar-mood + .avatar-mood,
.avatares-mood .mood-circle + .mood-circle {
  margin-left: 0;
}

/* ─── 26. INDICADORES DASHBOARD — cabeçalho mês ───────────────────── */
/* Imoview Indicador/Index tem H1 grande "Indicadores de venda - MAIO 2026"
 * Interact Dashboard pode não ter este header; padronizar visual. */
#page-content h1.dashboard-heading,
.indicadores-heading {
  font-size: 22px;
  font-weight: 300;
  color: #5d6973;
  margin: 8px 0 18px;
  letter-spacing: 0.2px;
}
.indicadores-heading .periodo {
  font-weight: 500;
  color: #2d5b75;
}

/* ─── 27. PANEL — heading clean Imoview-style (sem gradient) ─────────── */
/* Imoview painéis usam heading branco com borda inferior fina;
 * Interact alguns usam mint gradient. Manter mint só para painéis CTA
 * (Filtros de negócios), demais ficam clean. */
#page-content .panel-default > .panel-heading,
#page-content .panel-borderless > .panel-heading {
  background: #fff;
  border-bottom: 1px solid #eef0f3;
  font-weight: 400;
  color: #44525e;
}
#page-content .panel.panel-cta > .panel-heading,
#page-content .panel-mint > .panel-heading {
  background: #50c7a7;
  color: #fff;
  border-bottom: 1px solid #43b393;
}

/* ─── 28. BADGE de aba — alinhar verticalmente + tamanho ─────────────── */
/* Imoview badges em abas (Atendimentos[1], Auditoria[2]) ficam menores e
 * arredondados. Interact tinha tamanho variado. Padronizar. */
.nav-tabs > li > a > .badge,
.nav-tabs-pills > li > a > .badge {
  margin-left: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background-color: #4ebcda; /* Onda F-layout-paridade P1-5 2026-05-22: canônico Imoview (era #5aaedc accent) */
  color: #fff;
  vertical-align: middle;
}
/* Onda F-layout-paridade P1-5 2026-05-22: override do custom.min.css que pinta
 * .nav-tabs > li > a .badge.badge-info com Bootstrap default #5bc0de.
 * Específico o suficiente pra vencer (3 partes + .badge-info). */
.nav-tabs > li > a .badge.badge-info,
.nav-tabs > li > a > .badge.badge-info {
  background-color: #4ebcda;
}
.nav-tabs > li.active > a > .badge {
  background-color: #2d5b75;
}

/* ─── 29. FUNIL ATENDIMENTO — etapas vertical compactas ─────────────── */
/* Atendimento/Detalhes mostra funil 8 etapas (Pré-atendimento → Negócio).
 * Etapas concluídas usam ícone preto check, atual mint #50c7a7, futuras cinza. */
.funil-etapa {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  color: #777;
}
.funil-etapa .icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background: #d0d6dc;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.funil-etapa.completa .icon-circle {
  background: #424242;
}
.funil-etapa.atual .icon-circle {
  background: #50c7a7;
}
.funil-etapa.atual {
  font-weight: 500;
  color: #2d5b75;
}

/* ─── 30. WIZARD — fase ativa highlight reforçado ──────────────────── */
/* ContratoAluguel wizard primeira fase deve ter cabeçalho mint mas
 * Filtros panel-heading pode estar herdando estilo padrão. */
#wzContratoAluguel .panel.panel-borderless > .panel-heading,
.wz-step-active .panel-heading {
  background-color: #50c7a7;
  color: #fff;
}
#wzContratoAluguel .panel.panel-borderless > .panel-heading > * {
  color: #fff;
}

/* ============ Onda 7A — CRM Imóvel/Atendimento/Pessoa ============
 * Validação visual cross-tela 30 telas CRM (12 Imóvel + 12 Atendimento + 6 Pessoa)
 * Pipeline canônico v1.15 + concorrência com 7B/7C — gaps comuns documentados
 * em [[Imovel - Mapa Acoes]], [[Atendimento - Mapa Acoes]], [[Pessoa - Mapa Acoes]].
 *
 * Foco: complementos não cobertos pela Onda 4E:
 *  - Wizard 8 fases Atendimento (.wz-steps + .demo-step-tab)
 *  - Termômetro 4 bolinhas (.termometro)
 *  - Radar toggle (.radar)
 *  - Carrinho row 5 ações (addAgendamentoVisita/addVisita/email/whatsapp/remove)
 *  - 11 botões perfil Pessoa (.painelRelacionamentos #btnLead etc)
 *  - Avatar header + dados lead Atendimento
 *  - Sub-abas painelInteracoes
 *  - Mini-tabs Administrativo (7 encargos × 2 mini-tabs)
 *  - Botoes Pencil "Alterar" inline em paineis colapsaveis
 *  - Aba Tickets (.abaTicket) — inherits Onda 4E #15
 *  - Validacao visual capturada em Imovel/Detalhes/485 vs Interact (alta fidelidade)
 *
 * Ver: [[Validacao Visual Onda 7A CRM 2026-05-06]]
 *      [[Status Onda 4E Designer 2026-05-06]] (base)
 *      [[Comportamento Agentes Interact 2026-05-06]]
 * ================================================================= */

/* ─── 31. Atendimento Detalhes — Wizard 8 fases ─── */
/* Onda F-layout-paridade 2026-05-21: REMOVIDO bloco de overrides flex/background/border-radius
 * que criava "tile retangular verde" ao redor dos círculos do stepper. Imoview canônico usa
 * markup nativo Nifty sem esses overrides — `.wz-heading` com `bg-trans bord-no`, círculos
 * `<span class="icon-wrap">` com `bg-dark` (ativa) ou translúcido (inativas). Vide
 * [[Audit Layout Atendimento Detalhes 2026-05-21]] gap P0-2.
 *
 * Mantida apenas regra canônica `.width_fase` (capturada do partial Imoview literal —
 * pages_backup_FULL_2026-04-29/Atendimento_Ficha_Detalhes_Exibicao.html:43-46): garante
 * layout horizontal 8 fases (1/8 da largura cada, float left). */
.width_fase {
  width: 12.5%;
  float: left;
}

/* ─── 7.b — Badge cor canônica Imoview (Onda F-layout-paridade P1-5 2026-05-22) ─── */
/* Bootstrap padrão pinta .badge-info com #5bc0de; Imoview usa #4ebcda (cyan mais escuro).
 * Aplica-se a TODOS badges das tabs do Atendimento Detalhes + páginas que usam badge-info. */
.badge.badge-info { background-color: #4ebcda; }

/* ─── 32. Atendimento — Termômetro 4 bolinhas (.termometro/.termometroInteracao) ─── */
/* Ícone único no estado inicial; click expande em 4 bolinhas (cinza/azul/amarelo/vermelho). */
.termometro,
.termometroInteracao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}
.termometro .bolinha,
.termometroInteracao i.bolinha,
.termometroInteracao [data-termometro] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  border: 2px solid transparent;
}
.termometro .bolinha:hover,
.termometroInteracao i.bolinha:hover {
  transform: scale(1.15);
}
.termometro .bolinha.cinza,
.termometroInteracao [data-termometro="0"] { background: #b5bcc4; }
.termometro .bolinha.azul,
.termometroInteracao [data-termometro="1"] { background: #5bc0de; }
.termometro .bolinha.amarelo,
.termometroInteracao [data-termometro="2"] { background: #f0ad4e; }
.termometro .bolinha.vermelho,
.termometroInteracao [data-termometro="3"] { background: #d9534f; }
.termometro .bolinha.ativa,
.termometroInteracao i.bolinha.ativa {
  border-color: #2d5b75;
  box-shadow: 0 0 0 3px rgba(45,91,117,0.2);
}

/* ─── 33. Atendimento — Radar toggle (.radar) ────────────────────────── */
.radar {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: all 150ms ease;
}
.radar.radar-on {
  background: rgba(80,199,167,0.15);
  color: #50c7a7;
}
.radar.radar-off {
  background: rgba(180,180,180,0.1);
  color: #888;
}
.radar:hover {
  background: rgba(80,199,167,0.25);
}
.radar i {
  margin-right: 4px;
}

/* ─── 34. Atendimento — Carrinho linha (5 ações dropdown) ──────────── */
/* Cada linha imovel tem dropdown rowImovel com 5 acoes:
 * addAgendamentoVisita/addVisita/enviareEmail/ew(WhatsApp)/removerImovelCarrinho */
.acoesCarrinho .btn-group .dropdown-toggle {
  padding: 2px 8px;
  font-size: 12px;
}
.acoesCarrinho .dropdown-menu .addAgendamentoVisita,
.acoesCarrinho .dropdown-menu .addVisita {
  color: #2d5b75;
}
.acoesCarrinho .dropdown-menu .addAgendamentoVisita .fa,
.acoesCarrinho .dropdown-menu .addVisita .fa {
  color: #50c7a7;
}
.acoesCarrinho .dropdown-menu .enviareEmail .fa { color: #5aaedc; }
.acoesCarrinho .dropdown-menu .ew .fa { color: #25d366; } /* whatsapp green */
.acoesCarrinho .dropdown-menu .ew { color: #128c7e; }
/* removerImovelCarrinho já foi tratado em 14, reforço só do ícone */
.acoesCarrinho .dropdown-menu .removerImovelCarrinho .fa {
  color: #d9534f;
}

/* ─── 35. Atendimento — Painel Interacoes sub-abas + termometro inline ─── */
#painelInteracoes .nav-tabs {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 12px;
}
#painelInteracoes .nav-tabs > li > a {
  font-size: 12px;
  padding: 10px 12px;  /* Onda F-layout-paridade P2-5 2026-05-22: padding Nifty canônico (era 8px 14px) */
  color: #777;
}
#painelInteracoes .nav-tabs > li.active > a {
  color: #2d5b75;
  font-weight: 500;
  border-bottom: 2px solid #50c7a7;
}
#painelInteracoes .botaoInterassoesPassadas .badge,
#painelInteracoes .outrosAtendimentos .badge {
  margin-left: 4px;
  font-size: 10px;
  /* Onda F-layout-paridade P2-1 2026-05-22: removido `background:#5aaedc` — usa .badge-info canônico (#4ebcda) */
}
#NovaInteracao,
#addNF,
#atualizarInteracoes {
  margin-right: 6px;
}

/* ─── 36. Atendimento — Avatar/Header lead ─────────────────────────── */
/* Banner "EM ATENDIMENTO" + dados Lead + telefone WhatsApp */
.atendimento-header .label-em-atendimento {
  background: #50c7a7;
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.atendimento-header .lead-dados {
  font-size: 13px;
  color: #2d5b75;
}
.atendimento-header .lead-dados a[href*="whatsapp"],
.atendimento-header .lead-dados .fa-whatsapp {
  color: #25d366;
}

/* ─── 37. Pessoa — 11 botões Painel Relacionamentos ─────────────── */
/* #btnLead/Vendedor/Locador/Locatario/Comprador/Sindico/Fiador/
 * Parceiro/Fornecedor/PrestServ/Outros — toggle filtros */
#painelRelacionamentos .btn-group-relacionamentos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}
#painelRelacionamentos .btn-perfil,
#painelRelacionamentos #btnLead,
#painelRelacionamentos [id^="btn"][id$="ador"],
#painelRelacionamentos [id^="btn"][id$="atario"],
#painelRelacionamentos [id^="btn"][id$="ndico"],
#painelRelacionamentos [id^="btn"][id$="rceiro"],
#painelRelacionamentos [id^="btn"][id$="ecedor"],
#painelRelacionamentos [id^="btn"][id$="rServ"],
#painelRelacionamentos [id^="btn"][id$="utros"] {
  background: #fff;
  border: 1px solid #d3d8dc;
  color: #555;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 150ms ease;
}
#painelRelacionamentos .btn-perfil:hover,
#painelRelacionamentos #btnLead:hover {
  background: #f0f7ff;
  border-color: #5aaedc;
  color: #2d5b75;
}
#painelRelacionamentos .btn-perfil.active,
#painelRelacionamentos #btnLead.active {
  background: #5aaedc;
  border-color: #5aaedc;
  color: #fff;
}
#painelRelacionamentos .btn-perfil .badge {
  margin-left: 4px;
  background: rgba(0,0,0,0.15);
  color: inherit;
  font-size: 10px;
  padding: 1px 6px;
}
#painelRelacionamentos .btn-perfil.active .badge {
  background: rgba(255,255,255,0.25);
}

/* ─── 38. Pessoa — Painel Telefones/Emails/Enderecos linha ─────── */
.lista-contatos .item-contato {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
}
.lista-contatos .item-contato:last-child { border-bottom: none; }
.lista-contatos .item-contato .ic-valor {
  flex: 1;
  color: #2d5b75;
}
.lista-contatos .item-contato .ic-tipo {
  color: #888;
  font-size: 11px;
  margin-right: 8px;
  min-width: 70px;
}
.lista-contatos .item-contato .ic-acoes {
  display: flex;
  gap: 4px;
}
.lista-contatos .item-contato .ic-acoes a {
  color: #888;
  padding: 2px 6px;
  border-radius: 3px;
}
.lista-contatos .item-contato .ic-acoes a:hover {
  background: #f0f7fc;
  color: #2d5b75;
}
.lista-contatos .item-contato .fa-whatsapp {
  color: #25d366;
}

/* ─── 39. Imóvel — Mini-tabs Administrativo (7 encargos × 2) ─────── */
/* Sub-abas Registro atual / Outros registros para Condominio/IPTU/SPU/
 * Agua/Luz/Gas/Taxa Residuo */
#abaAdministrativo .nav-tabs {
  background: #f5f8fa;
  border-radius: 3px 3px 0 0;
  padding: 4px 4px 0 4px;
}
#abaAdministrativo .nav-tabs > li > a {
  font-size: 12px;
  padding: 8px 12px;
}
#abaAdministrativo .nav-tabs > li.active > a {
  background: #fff;
  border-color: #d3d8dc;
  color: #2d5b75;
  font-weight: 500;
}
#abaAdministrativo [id^="badge-quantidade-"] {
  margin-left: 4px;
  background: #5aaedc;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
}
#abaAdministrativo .mini-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e9eef2;
  margin-bottom: 10px;
  font-size: 12px;
}
#abaAdministrativo .mini-tabs > a {
  padding: 6px 12px;
  color: #777;
  border-bottom: 2px solid transparent;
}
#abaAdministrativo .mini-tabs > a.active {
  color: #2d5b75;
  border-bottom-color: #50c7a7;
  font-weight: 500;
}

/* ─── 40. Imóvel — Botões Pencil "Alterar" em painéis ─────────── */
/* Visíveis em hover do painel-heading (14 paineis em abaDetalhes) */
.panel-heading .btn-hover-primary {
  opacity: 0;
  transition: opacity 150ms ease;
  background: transparent;
  border: none;
  color: #5aaedc;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
}
.panel-heading:hover .btn-hover-primary,
.panel-heading .btn-hover-primary:focus {
  opacity: 1;
}
.panel-heading .btn-hover-primary:hover {
  color: #2d5b75;
  background: rgba(90,174,220,0.1);
  border-radius: 3px;
}

/* ─── 41. Imóvel — Pontuação header + Atualizacao Valor ──────── */
.pontuacaoImovel,
.atualizacaoValor {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 6px;
}
.pontuacaoImovel {
  color: #50c7a7;
  background: rgba(80,199,167,0.1);
  font-weight: 500;
}
.pontuacaoImovel:hover {
  background: rgba(80,199,167,0.2);
}
.atualizacaoValor {
  color: #f0ad4e;
}
.atualizacaoValor:hover {
  color: #ec971f;
}

/* ─── 42. Imóvel — Aba Indicadores (sub-paineis) ───────────────── */
#funilPanel,
#gostouPanel,
#nGostouPanel,
#midiaPanel,
#statusPanel,
#tipoPanel {
  margin-bottom: 12px;
}
#parecerGostou h2,
#parecerNGostou h2 {
  font-size: 24px;
  font-weight: 300;
  margin: 4px 0;
}
#parecerGostou h2 { color: #5cb85c; }
#parecerNGostou h2 { color: #d9534f; }
.semParecer.linkPointer {
  color: #888;
  font-style: italic;
  cursor: pointer;
}
.semParecer.linkPointer:hover {
  color: #5aaedc;
}

/* ─── 43. Imóvel — Botão Captadores header ─────────────────────── */
#btnCaptadores {
  background: #fff;
  border: 1px solid #d3d8dc;
  color: #2d5b75;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
}
#btnCaptadores:hover {
  background: #f0f7fc;
  border-color: #5aaedc;
}
#btnCaptadores .badge {
  margin-left: 4px;
  background: #5aaedc;
  color: #fff;
}

/* ─── 44. Atendimento/Imóvel — Acoes em lote dropdown ─────────── */
/* CompararImoveis/addImoveisCarrinho/EnviarPorEmailGrupo/addVisitas/etc */
.acoes-lote-dropdown .dropdown-toggle {
  font-size: 12px;
}
.acoes-lote-dropdown .dropdown-menu {
  min-width: 220px;
}
.acoes-lote-dropdown .dropdown-menu > li > a > .fa {
  width: 18px;
  text-align: center;
  margin-right: 6px;
  color: #5aaedc;
}

/* ─── 45. CRM — Lista Detalhada vs Padrão (toggles) ───────────── */
#listapadrao,
#listadetalhes {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  color: #888;
  font-size: 12px;
}
#listapadrao:hover,
#listadetalhes:hover {
  background: #f0f7fc;
  color: #2d5b75;
}
#listapadrao.active,
#listadetalhes.active {
  background: #5aaedc;
  color: #fff;
}

/* ─── 46. Pessoa — Wizard Incluir PF/PJ fases ──────────────────── */
.wizard-pessoa .wz-steps > li.active > a {
  background: #5aaedc;
  color: #fff;
}
.wizard-pessoa .panel-bordered-danger {
  border-color: #d9534f;
}
.wizard-pessoa .panel-bordered-danger .panel-heading {
  background: #d9534f;
  color: #fff;
}

/* ─── 47. CRM — Banners "Em atendimento"/"Captador"/etc ────────── */
.label-status-crm {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}
.label-status-crm.em-atendimento { background: #50c7a7; color: #fff; }
.label-status-crm.captador        { background: #5aaedc; color: #fff; }
.label-status-crm.lead-quente     { background: #d9534f; color: #fff; }
.label-status-crm.lead-morno      { background: #f0ad4e; color: #fff; }
.label-status-crm.lead-frio       { background: #5bc0de; color: #fff; }
.label-status-crm.descartado      { background: #b5bcc4; color: #fff; }

/* ─── 48. CRM — Termometro overlay tooltip helper ─────────── */
.termometro[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #2d5b75;
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 100;
}

/* ─── 49. Listas paginadas CRM — toolbar uniforme ──────────────── */
.fixed-table-toolbar {
  margin-bottom: 8px;
}
.fixed-table-toolbar .btn-group .dropdown-toggle {
  padding: 4px 10px;
  font-size: 12px;
}
.fixed-table-toolbar .search input.form-control {
  height: 32px;
  font-size: 13px;
}

/* ─── 50. CRM — Galeria fotos imóvel (#blueimp + .ow-carousel) ───── */
.fotos-imovel .owl-carousel .item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 3px;
}
.fotos-imovel .owl-controls .owl-nav > div {
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
}
#blueimp-gallery .slides > .slide > .slide-content {
  background: #000;
}

/* ============ Onda 7A FIM ============ */

/* ============================================================================
 * === Onda 7C — Backoffice (FIN+POS+PRE+WAB) 2026-05-06 ===
 *
 * Validacao visual de 22 telas backoffice. Fixes detectados via captura ao
 * vivo Interact + comparacao com pages_backup_FULL_2026-04-29 e Imoview real
 * onde possivel (sessao Imoview compartilhada com outros agentes).
 *
 * Aba 2056985738 (Interact) — captura full-page · stitch
 * Aba 2056985835 (Imoview) — sessao compartilhada Onda 6/7A/7B; consultada
 * onde lock liberou.
 *
 * Principios: NAO altera HTML literal Imoview; so override CSS. NAO toca
 * enhancers.js. Bloco exclusivo desta onda — nao conflita com 7A (CRM) ou
 * 7B (ADM).
 *
 * Ver:
 *   [[Validacao Visual Onda 7C Backoffice 2026-05-06]]
 *   [[feedback_design_imoview]] [[feedback_layout_primeiro_funcao_depois]]
 *   [[feedback_comparacao_visual_imagens]]
 * ========================================================================= */

/* --- 7C.1 FIN: Caixa_Lista — 5 cards saldo grid responsivo ---------- */
/* Bug detectado: row.fin-cards-saldo usa col-md sem numero, criando flex
 * auto que comprime icones+labels e quebra em 2 colunas no md. */
.fin-cards-saldo {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.fin-cards-saldo > [class^="col-"] {
  -webkit-flex: 1 1 18%;
  flex: 1 1 18%;
  min-width: 160px;
  padding-left: 0;
  padding-right: 0;
}
.fin-cards-saldo .card-saldo {
  position: relative;
  border-radius: 4px;
  padding: 14px 16px 14px 56px;
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  min-height: 78px;
}
.fin-cards-saldo .card-saldo:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.fin-cards-saldo .card-saldo .ic-card {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  opacity: .85;
}
.fin-cards-saldo .card-saldo .lbl-card {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  opacity: .9;
  margin-bottom: 4px;
}
.fin-cards-saldo .card-saldo .val-card {
  font-size: 18px;
  font-weight: 500;
}
.fin-cards-saldo .card-saldo.bg-success-dark {
  background-color: #4cae4c;
}
@media (max-width: 991px) {
  .fin-cards-saldo > [class^="col-"] { -webkit-flex: 1 1 48%; flex: 1 1 48%; }
}

/* --- 7C.2 FIN: Movimento_Lista — placeholder data invalida ---------- */
/* Bug detectado: tabela mostra "Invalid Date" em colunas vazias. */
.tabela-movimentos td.data-vazia,
.movimento-item .data-invalida,
[data-cell-value="Invalid Date"],
.cell-invalid-date {
  color: #ccc;
  font-style: italic;
}

/* --- 7C.3 FIN: PlanoConta — colunas Receitas/Despesas espacamento --- */
.plano-coluna { margin-bottom: 16px; }
.plano-coluna h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  padding: 6px 12px;
  background: #fafafa;
  border-radius: 3px 3px 0 0;
}
.plano-coluna.receitas h3 { background: rgba(46,204,113,.08); }
.plano-coluna.despesas h3 { background: rgba(231,76,60,.08); }
.plano-item code {
  font-size: 12px;
  background: transparent;
  padding: 0 4px 0 0;
}
.plano-item .acoes .btn {
  padding: 2px 6px;
  font-size: 11px;
  margin-left: 2px;
}
.plano-item.sistema {
  cursor: not-allowed;
  opacity: .85;
}

/* --- 7C.4 FIN: CentroCusto + Conta_Lista — nav-list-action layout --- */
.nav-list-action {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.nav-list-action .left .btn { margin-right: 6px; }
.nav-list-action .right { font-size: 12px; color: #777; }

/* --- 7C.5 FIN: Caixa_Conciliacao — sidebar + cards layout ---------- */
#conciliacaoSidebar .conta-item {
  transition: background-color .15s ease;
}
#conciliacaoSidebar .conta-item.active {
  font-weight: 500;
}
#cardsResumo .resumoCard h3 {
  font-size: 18px;
  font-weight: 500;
}
#cardsResumo .resumoCard small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* --- 7C.6 FIN: FluxoCaixa — tabela detalhamento + chart ----------- */
#fluxoCaixaChart {
  background: #fafafa;
  border-radius: 3px;
}
#fluxoCaixaTbody tr.linha-receita td:first-child { color: #20c997; font-weight: 500; }
#fluxoCaixaTbody tr.linha-despesa td:first-child { color: #d9534f; font-weight: 500; }
#fluxoCaixaTbody tr.linha-saldo {
  background: #f7f7f7;
  font-weight: 500;
}
#fluxoCaixaTbody tr.linha-saldo td { border-top: 2px solid #ddd; }

/* --- 7C.7 FIN: DRE — hierarquia visual --------------------------- */
.dre-tabela tr.linha-grupo > td:first-child {
  font-weight: 600;
  color: #2d5b75;
  background: rgba(45,91,117,.04);
}
.dre-tabela tr.linha-resultado-op,
.dre-tabela tr.linha-resultado-liq {
  background: rgba(80,199,167,.08);
  font-weight: 600;
}
.dre-tabela tr.linha-resultado-liq {
  border-top: 2px solid #50c7a7;
}
.dre-tabela tr.linha-transitoria {
  font-style: italic;
  color: #888;
}

/* --- 7C.8 POS: ContratoVenda_Indicadores — KPI cards -------------- */
#cardsContratoVendaIndic .panel {
  margin-bottom: 12px;
  transition: box-shadow .15s ease;
}
#cardsContratoVendaIndic .panel:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
#cardsContratoVendaIndic h2.text-thin {
  margin: 8px 0 4px;
  font-size: 28px;
  color: #2d5b75;
}
#cardsContratoVendaIndic small.text-muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
[id^="donutVenc"] { min-height: 240px; }

/* --- 7C.9 POS: ContratoVenda_Lista — tabs Inicial/Indicadores ----- */
.tab-base.full-page > ul.nav-tabs.barL > li.active > a {
  border-bottom: 2px solid #50c7a7;
  color: #2d5b75;
  font-weight: 500;
}

/* --- 7C.10 POS: Renovacoes + NPS — media cards alinhamento -------- */
.panel.media .media-left.pad-all {
  padding: 16px 18px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 70px;
}
.panel.media .media-left.pad-all i.fa { color: #fff; }
.panel.media .media-body h3 {
  font-size: 14px;
  font-weight: 400;
  color: #777;
  margin-bottom: 2px;
}
.panel.media .media-body p.text-2x {
  font-size: 26px;
  line-height: 1.1;
}

/* --- 7C.11 PRE: Configuracao_PRE_Faixas — tabela faixas ----------- */
#tblFaixasCorAtdNovo td,
#tblFaixasCorAtdAnd td {
  vertical-align: middle;
  padding: 8px 6px;
}
#tblFaixasCorAtdNovo td:first-child,
#tblFaixasCorAtdAnd td:first-child {
  font-weight: 500;
  width: 90px;
}
#tblFaixasCorAtdNovo input[type="number"],
#tblFaixasCorAtdAnd input[type="number"] {
  text-align: center;
}

/* --- 7C.12 PRE: Automacoes_FilaInteligente — text-warning bullets -- */
#page-content .panel-body ul.text-warning.small {
  padding-left: 18px;
  margin-bottom: 4px;
}
#page-content .panel-body ul.text-warning.small li {
  margin-bottom: 2px;
  font-size: 11px;
}
.panel-bordered-danger {
  border-color: #d9534f !important;
}

/* --- 7C.13 PRE: Modelos_Email_Whatsapp — tab base + tokens -------- */
#tabModelosEmail .panel-heading,
#tabModelosWa .panel-heading {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
#tabModelosEmail .panel-heading h3.panel-title,
#tabModelosWa .panel-heading h3.panel-title {
  margin: 0;
}
#listaTokensEmail .btn,
#listaTokensWa .btn {
  font-size: 11px;
  padding: 4px 10px;
  margin-bottom: 6px;
  margin-right: 4px;
}
#listaTokensEmail .btn-info,
#listaTokensWa .btn-info {
  background-color: #5aaedc;
  border-color: #5aaedc;
}
#listaTokensEmail .btn-info:hover,
#listaTokensWa .btn-info:hover {
  background-color: #4a9bc8;
  border-color: #4a9bc8;
}
#modalIncluirWa .modal-header {
  background-color: #f0ad4e !important;
}
#modalIncluirWa .modal-header h4,
#modalIncluirWa .modal-header .close {
  color: #fff;
}

/* --- 7C.14 PRE: Midia_ROI — KPI cards uniform height -------------- */
#page-content .row > [class^="col-"] > .panel.panel-default.text-center {
  min-height: 110px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
}

/* --- 7C.15 WAB: WAB_Conversas — chat layout ----------------------- */
#painelConversaWAB {
  height: calc(100vh - 220px);
  min-height: 520px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#painelConversaWAB .panel-heading,
#painelConversaWAB > #cabecalhoContatoWAB {
  flex: 0 0 auto;
}
#threadConversaWAB {
  flex: 1 1 auto;
  background: #ECE5DD;
  padding: 16px;
}
#painelConversaWAB .panel-footer {
  flex: 0 0 auto;
  background: #f0f0f0;
}
#threadConversaWAB .msg-bubble {
  max-width: 70%;
  margin-bottom: 8px;
}
#threadConversaWAB .msg-bubble.msg-in {
  margin-right: auto;
}
#threadConversaWAB .msg-bubble.msg-bot,
#threadConversaWAB .msg-bubble.msg-out {
  margin-left: auto;
  text-align: right;
}
#threadConversaWAB .bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  word-wrap: break-word;
}
#threadConversaWAB .msg-bubble.msg-in .bubble {
  background: #fff;
  border-radius: 0 8px 8px 8px;
}
#threadConversaWAB .msg-bubble.msg-bot .bubble,
#threadConversaWAB .msg-bubble.msg-out .bubble {
  background: #DCF8C6;
  color: #303030;
  border-radius: 8px 0 8px 8px;
}
#threadConversaWAB .msg-bubble.msg-bot .bubble.bg-mint {
  background: #DCF8C6 !important;
  color: #303030 !important;
}
#threadConversaWAB .bubble .text-right.small {
  font-size: 10px;
  color: #888;
  margin-top: 4px;
}

#listaContatosWAB .list-group-item {
  cursor: pointer;
  transition: background-color .15s ease;
}
#listaContatosWAB .list-group-item:hover {
  background: #f7f7f7;
}
#listaContatosWAB .list-group-item.active-contato {
  background: #e8f4fa;
  border-left: 3px solid #5aaedc;
}
#listaContatosWAB .label.label-info {
  font-size: 9px;
  margin-right: 2px;
  margin-bottom: 2px;
  display: inline-block;
}
#listaContatosWAB .badge.badge-success,
#listaContatosWAB .badge.badge-info {
  font-size: 9px;
  margin-left: 4px;
}

/* --- 7C.16 WAB: WAB_Indicadores — chart panels uniform ------------ */
[id^="chart"][id$="WAB"] {
  background: #fafafa;
  border-radius: 3px;
}
#tblTemplatesWAB tbody tr td a {
  font-weight: 500;
  color: #5aaedc;
}

/* --- 7C.17 WAB: WAB_Parametros — token table inputs --------------- */
#tblPontuacoesVendaWAB td input[type="number"],
#tblPontuacoesVendaWAB td input[type="text"] {
  padding: 4px 8px;
  height: 30px;
}
#tblPontuacoesVendaWAB td:first-child {
  font-size: 13px;
  vertical-align: middle;
}
[data-role="tagsinput-multiple"] {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 3px;
  background: #fafafa;
  min-height: 50px;
}
[data-role="tagsinput-multiple"] .label {
  font-size: 12px;
  padding: 4px 8px;
  margin: 2px;
  display: inline-block;
}
[data-role="tagsinput-multiple"] .label a {
  margin-left: 4px;
  text-decoration: none;
  opacity: .8;
}
[data-role="tagsinput-multiple"] .label a:hover {
  opacity: 1;
}

/* --- 7C.18 WAB: WAB_Automacoes — tabs equipe + auditoria --------- */
#tabsEquipesWAB > li > a {
  font-size: 12px;
  padding: 6px 10px;
}
#tabsEquipesWAB > li > a small {
  display: block;
  color: #999;
  font-size: 10px;
  margin-top: 2px;
}
#tabsEquipesWAB > li.active > a small { color: #f0f0f0; }

/* --- 7C.19 Common: page-title + breadcrumb spacing ---------------- */
/* Algumas partials novas (FluxoCaixa, Configuracao_PRE_Faixas) usam <h1>
 * sem .page-header. Padronizar visual com partials existentes. */
#page-title h1:not(.page-header) {
  font-size: 26px;
  font-weight: 300;
  margin: 0 0 4px 0;
  color: #555;
}

/* --- 7C.20 Common: tabela vazia placeholder ---------------------- */
table.table tbody td.text-center.text-muted[colspan] {
  padding: 40px 16px !important;
  background: #fafafa;
}
table.table tbody td.text-center.text-muted[colspan] i.fa-spinner,
table.table tbody td.text-center.text-muted[colspan] i.fa-circle-o-notch {
  font-size: 18px;
  margin-right: 8px;
  color: #95a5a6;
}

/* --- 7C.21 Common: btn-mint dark theme override (Imoview-fidel) -- */
/* Imoview "Salvar"/"Novo" CTAs usam mint #50c7a7. Garantir consistencia
 * em partials novas que usam classe .btn-mint puro. */
.btn-mint {
  background-color: #50c7a7;
  border-color: #50c7a7;
  color: #fff;
}
.btn-mint:hover,
.btn-mint:focus,
.btn-mint:active {
  background-color: #45b896;
  border-color: #45b896;
  color: #fff;
}
.btn-mint.disabled,
.btn-mint:disabled {
  background-color: #a0d4c4;
  border-color: #a0d4c4;
}

/* --- 7C.22 Common: theme-fin sidebar (Caixa_Conciliacao) --------- */
.theme-fin-bg { background-color: rgb(171,79,83) !important; color: #fff !important; }
.theme-fin-text { color: rgb(171,79,83) !important; }
.theme-fin-bord { border-color: rgb(171,79,83) !important; }

/* === Fim Onda 7C === */


/* ============================================================================
 * ============ Onda 7B — ADM (12 telas Contratos+Boleto+Cheque+Movimento) ====
 * ============================================================================
 * Auditoria visual 2026-05-06 vs Imoview literal. Bloco isolado dos blocos
 * Onda 7A (CRM) e 7C (FIN/POS/PRE/WAB) — sem conflito.
 *
 * Gaps cross-cutting detectados:
 *   - Alerts info duplicados em PainelDimob/Parceria/SeguroFianca/Boletos
 *     (enhancer-onda-2c injetando 2x). Hide do 2º via :nth-of-type
 *   - Cheque "Cheques emitidos" panel sem header — formatar como bloco discreto
 *   - PainelSeguroFianca 3 cards top: padding + counter font-size consistente
 *   - DIMOB filtros col-md compact ajuste spacing
 *   - Cheque Auditoria badge sobreposição
 *   - Boleto Filtros: panel-heading com row aninhada (alert-novo-info)
 * ============================================================================ */

/* ─── 7B.1 ALERTS DUPLICADOS — Hide 2º alert idêntico subsequente ─────── */
/* Padrão: enhancer 2c injeta wrap_alerta_info_<slug> 2x. CSS hide o 2º. */
#painel-content-area .alert-novo-info + .alert-novo-info,
#painel-content-area .alert + .alert,
.painelDimob .alert-novo-info + .alert-novo-info,
.painelEncargos .alert-novo-info + .alert-novo-info,
.painelSeguroFianca .alert + .alert,
.painelParceria .alert + .alert,
.painelBoletos .alert + .alert {
  display: none !important;
}

/* ─── 7B.2 PAINEL CHEQUES — bloco "Cheques emitidos" sem header --------- */
.painelCheques .panel.panel-summary,
#tabInicial > .panel:not(:first-child) > .panel-body > h5 {
  font-size: 12px;
  font-weight: 600;
  color: #5b6e7a;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8eaed;
}

/* ─── 7B.3 PAINEL SEGURO FIANCA — 3 cards top consistentes -------------- */
.painelSeguroFianca .panel-heading {
  padding: 12px 14px;
  min-height: 70px;
  position: relative;
}
.painelSeguroFianca .panel-heading .panel-title {
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  font-weight: 600;
  color: #fff;
  display: block;
}
.painelSeguroFianca .panel-heading .counter {
  margin-top: 6px;
}
.painelSeguroFianca .panel-heading .counter .count {
  font-size: 22px;
  font-weight: 700;
  display: inline-block;
  color: #fff;
}
.painelSeguroFianca .panel-heading.bg-warning,
.painelSeguroFianca .panel-heading.bg-warning *,
.painelSeguroFianca .panel-heading.bg-warning .panel-title {
  color: #fff !important;
}
.painelSeguroFianca .panel-heading.bg-warning {
  background-color: #f5b54f !important;
}
.painelSeguroFianca .panel-heading.bg-danger,
.painelSeguroFianca .panel-heading.bg-danger *,
.painelSeguroFianca .panel-heading.bg-danger .panel-title {
  color: #fff !important;
}
.painelSeguroFianca .panel-heading.bg-danger {
  background-color: #e87873 !important;
}
.painelSeguroFianca .panel-heading.bg-dark,
.painelSeguroFianca .panel-heading.bg-dark *,
.painelSeguroFianca .panel-heading.bg-dark .panel-title {
  color: #fff !important;
}
.painelSeguroFianca .panel-heading.bg-dark {
  background-color: #3a3a3a !important;
}
.painelSeguroFianca .panel-body ul.list-unstyled {
  min-height: 80px;
  font-size: 12px;
  padding: 8px 0;
}

/* ─── 7B.4 PAINEL DIMOB — ajuste filtros col-md compact ----------------- */
.painelDimob .panel-body form .row,
.gerarDimob .panel-body form .row {
  margin-bottom: 8px;
}
.painelDimob h4.text-thin,
.gerarDimob h4.text-thin {
  font-size: 12px;
  margin-bottom: 4px;
  color: #6f7e87;
}
.painelDimob .col-md-3,
.gerarDimob .col-md-3 {
  padding-bottom: 6px;
}

/* ─── 7B.5 CHEQUE — botão download programa + badge auditoria ----------- */
.tab-base.full-page > a[href*="ImprimirCheque"] {
  margin-top: 8px !important;
  margin-right: 12px !important;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 4px;
}
.tab-base.full-page > a[href*="ImprimirCheque"] i.fa-download {
  margin-right: 4px;
}
.abaHistoricoAuditoria .badge {
  margin-left: 4px;
  font-size: 11px;
  padding: 2px 6px;
}
.add-popover.linkPointer .fa.pulse {
  background-color: #f5a623;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 13px;
  color: #fff !important;
}

/* ─── 7B.6 BOLETO — panel-heading com row alert info aninhado ----------- */
.painelBoletos .panel-heading,
#tabInicial.painelBoletos > .panel > .panel-heading {
  padding-bottom: 0;
}
.painelBoletos .panel-heading .row {
  margin-top: 8px;
  margin-bottom: 0;
}
.painelBoletos .panel-heading .alert-novo-info,
.painelBoletos .panel-heading .alert-novo-danger {
  font-size: 12px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 3px;
}

/* ─── 7B.7 CONTRATO LISTA — barra Indicadores tab + filtros multi-row --- */
#tabIndicadoresAluguel,
#tabIndicadores {
  padding: 16px 0;
}
.tab-base.full-page > .tab-content > #tabInicial > .row.marTop24 {
  margin-top: 24px;
}
.tab-base.full-page .panel-control button.btn.btn-default {
  background: transparent;
  border: 0;
  padding: 4px 8px;
}
.tab-base.full-page .panel-control button.btn.btn-default:hover {
  background: #f0f3f5;
}

/* ─── 7B.8 PAINEL MODERACAO — tabela colunas mais visíveis -------------- */
.table.table-order td a.btn-link.text-primary {
  font-weight: 600;
  font-size: 13px;
}
.table.table-order tbody tr:hover {
  background-color: #f8fafc;
}
.table.table-order thead th.order.sort {
  background-color: #f5f7f9;
  font-weight: 600;
  font-size: 12px;
  color: #485762;
  border-bottom: 2px solid #d8dde2;
}

/* ─── 7B.9 MOVIMENTO LISTA — 5 quadros resumo (Receber/Recebido/etc) ---- */
.movimento-resumo-card {
  border-radius: 6px;
  padding: 14px 16px;
  color: #fff;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  cursor: pointer;
  transition: transform 120ms ease;
}
.movimento-resumo-card:hover {
  transform: translateY(-2px);
}
.movimento-resumo-card .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .9;
}
.movimento-resumo-card .val {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  display: block;
}
.movimento-resumo-card.receber  { background-color: #5aaedc; }
.movimento-resumo-card.recebido { background-color: #20c997; }
.movimento-resumo-card.pagar    { background-color: #f5a623; }
.movimento-resumo-card.pago     { background-color: #28a745; }
.movimento-resumo-card.transf   { background-color: #6c757d; }

/* ─── 7B.10 ContratoAluguel Wizard Incluir 6 fases — wz-icon-bw active (SCOPED) -- */
/* Escopado para wizard de ContratoAluguel (que tem 6 fases) — não vazar para
 * Atendimento_Incluir (2 fases) que deve usar estilo nifty puro. */
.wizard-contrato .wz-icon-bw li.active a,
.wizard-contrato .wz-icon-bw li.completed a {
  color: #2d5b75;
  font-weight: 600;
}
.wizard-contrato .wz-icon-bw li.active .wz-icon {
  background: linear-gradient(135deg, #5aaedc 0%, #2d5b75 100%);
  box-shadow: 0 0 0 4px rgba(90, 174, 220, .25);
  color: #fff;
}
.wizard-contrato .wz-icon-bw li.completed .wz-icon {
  background-color: #20c997;
  color: #fff;
}

/* ─── 7B.11 ContratoAluguel Detalhes ficha — abas info circulos $/clock - */
.painelDetalhesContrato .indicadores-circulos,
.tab-base .header-circulos {
  display: inline-flex;
  gap: 6px;
  margin-right: 16px;
  vertical-align: middle;
}
.painelDetalhesContrato .indicadores-circulos > div {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

/* ─── 7B.12 PAINEL CONDOMINIO — filtros mb-3 spacing -------------------- */
.row.mb-3 {
  margin-bottom: 16px;
}

/* ─── 7B.13 ContratoAluguel partial — title + breadcrumb consistent ----- */
#page-title h1.page-header.text-overflow {
  font-size: 24px;
  font-weight: 300;
  color: #5b6e7a;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
}
.breadcrumb {
  background-color: transparent;
  padding: 0 0 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #8a98a4;
}
.breadcrumb > .active {
  color: #c9b89e;
}

/* ─── 7B.14 alert-novo-info — visual padronizado ------------------------ */
.alert-novo-info {
  background-color: #fef3c7;
  color: #5d4d1f;
  border: 0;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-novo-info i.fe-info,
.alert-novo-info i.fa-info-circle {
  font-size: 14px;
  color: #b8860b;
}
.alert-novo-info code,
.alert-novo-info .alert-endpoint-mark {
  background: rgba(184, 134, 11, .15);
  color: #5d4d1f;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}
.alert-novo-info .close,
.alert-novo-danger .close {
  margin-left: auto;
  opacity: .5;
}
.alert-novo-info .close:hover,
.alert-novo-danger .close:hover {
  opacity: 1;
}
.alert-novo-danger {
  background-color: #fee2e2;
  color: #7c1d1d;
  border: 0;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
}
.alert-novo-danger i.fe-info {
  color: #dc2626;
}

/* ─── 7B.15 ContratoAluguel Lista — Indicadores ALUGUEL tab amCharts ---- */
#tabIndicadoresAluguel .panel-body {
  min-height: 240px;
  padding: 18px;
}
#tabIndicadoresAluguel canvas,
#tabIndicadoresAluguel > .row > .col-lg-6 {
  margin-bottom: 18px;
}

/* === Fim Onda 7B — ADM === */

/* === Onda 18A — Movimento Lista 5 cards resumo (Frente 2) === */
/* Refina os 5 cards injetados por enhancers-movimento-resumo.js
   (Receber/Recebido/Pagar/Pago/Transferido). Padroniza altura, tipografia
   e hover sutil. NÃO sobrescreve cor de fundo (panel-info/success/warning/
   danger/dark já cuidam disso).
   Conexões: [[Status Onda 13B 3 Frentes 2026-05-06]] · [[feedback_design_imoview]] */
.cards-resumo-mov .panel {
  min-height: 90px;
  cursor: default;
  border: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.cards-resumo-mov .panel-body {
  padding: 12px 8px !important;
}
.cards-resumo-mov .panel-body h5 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.cards-resumo-mov .panel-body h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin: 4px 0 2px 0;
}
.cards-resumo-mov .panel-body small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .85;
}
.cards-resumo-mov .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.cards-resumo-mov .panel i.fa {
  margin-right: 4px;
  font-size: 12px;
}
/* Responsive — em telas md, mantém altura confortável; em xs força lado-a-lado */
@media (max-width: 991px){
  .cards-resumo-mov .panel { min-height: 80px; }
  .cards-resumo-mov .panel-body h3 { font-size: 16px; }
}
/* === Fim Onda 18A — Movimento Lista cards === */