/* ODEM 33.9.29: escopo exclusivo dos filtros e seletores aprimorados. */
.of-filters{display:block!important;width:100%;box-sizing:border-box;padding:12px!important;border:1px solid var(--border,#dce2e8);border-radius:14px;background:var(--surface,var(--bg-card,#fff));gap:0!important}
.of-filter-bar{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.of-filter-primary{display:flex;align-items:flex-end;gap:10px;flex:1 1 340px;min-width:0;flex-wrap:wrap}
.of-filter-primary>.of-filter-field{flex:1 1 160px;min-width:0;margin:0!important}
.of-filter-primary>input[type=search],.of-filter-primary>.of-filter-field:has(input[type=search]){flex-basis:280px}
.of-filter-primary>label,.of-filter-grid>label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2,#556173)}
.of-filter-field .input,.of-filter-field.input,.of-filter-field.select{width:100%;min-width:0;box-sizing:border-box}
.of-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;align-items:end;margin-top:12px;padding-top:12px;border-top:1px solid var(--border,#dce2e8)}
.of-filter-grid[hidden],.of-filter-chips[hidden]{display:none!important}
.of-filter-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.of-filter-toggle{white-space:nowrap;min-height:40px}
.of-filter-body{margin-top:12px}
.of-filter-body[hidden],.of-filter-pin[hidden],.of-filter-unpin[hidden],.of-filter-clear[hidden],.of-filter-pin-status[hidden]{display:none!important}
.of-filter-pin,.of-filter-clear,.of-filter-unpin{min-height:40px;white-space:normal}
.of-filter-pin-status{display:block;margin-top:8px;color:var(--text-2,#42536a);font-size:12px;line-height:1.5}
.of-filter-grid:empty{display:none}
.of-filter-chip:disabled{cursor:default;opacity:1}
.of-filter-body .filtro-periodo-extra{grid-column:1/-1;flex-wrap:wrap}
.rep-delete-check{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.rep-delete-check ul{margin:10px 0;padding-left:20px}
.rep-delete-confirm{margin-top:16px}
@media(max-width:480px){.of-filter-bar{gap:6px}.of-filter-bar>.btn{flex:1 1 125px;padding:8px}.of-filter-actions{flex-basis:100%}.of-filter-chips{gap:5px}}
.of-filter-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.of-filter-chip{border:1px solid var(--border,#dce2e8);background:var(--surface-2,#f2f5fa);color:var(--text-2,#42536a);font:inherit;font-size:12px;padding:6px 10px;border-radius:20px;cursor:pointer;overflow-wrap:anywhere;text-align:left}
.of-filter-chip:hover{border-color:var(--brand,#0086b6)}
.of-filter-date-note{display:block;margin-top:9px;font-size:11px;line-height:1.4;color:var(--text-3,#718096)}
.of-choice{position:relative;display:block;min-width:0;width:100%}
.of-native-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);opacity:0;pointer-events:none;margin:0!important;padding:0!important;min-height:0!important;min-width:0!important}
.of-choice-trigger{display:block;width:100%;height:40px;min-height:40px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:30px!important;cursor:pointer;font:inherit;font-size:13px;box-sizing:border-box;background-color:var(--surface,var(--bg-card,#fff));color:var(--text,#172940);border:1px solid var(--border,#dce2e8);border-radius:8px}
.of-choice-trigger:disabled{cursor:default;opacity:.6}
.of-choice-popup{z-index:10040;box-sizing:border-box;display:flex;flex-direction:column;padding:9px;border:1px solid var(--border,#dce2e8);border-radius:12px;background:var(--surface,var(--bg-card,#fff));box-shadow:0 12px 35px #0003;color:var(--text,#172940)}
.of-choice-search{flex:0 0 auto;width:100%;box-sizing:border-box;margin-bottom:7px}
.of-choice-options{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;max-height:245px}
.of-choice-option,.of-choice-more{display:block;width:100%;text-align:left;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-size:13px;line-height:1.4;padding:10px;cursor:pointer;overflow-wrap:anywhere}
.of-choice-option:hover,.of-choice-option.is-active{background:var(--surface-2,#edf4fb)}
.of-choice-option[aria-selected=true]{font-weight:600;background:var(--brand-tint,#e4f3fa)}
.of-choice-more{color:var(--brand,#0086b6)}
.of-choice-status{font-size:11px;color:var(--text-3,#718096);padding:6px 4px 0}
.of-choice-trigger:focus-visible,.of-choice-option:focus-visible,.of-filter-chip:focus-visible,.of-filter-toggle:focus-visible{outline:2px solid var(--brand,#0086b6);outline-offset:2px}
.of-list-filter-meta{color:var(--text-3,#718096);font-size:12px;margin:9px 0}
.of-list-range{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.of-list-range label{display:flex;flex-direction:column;gap:4px;min-width:140px}
.of-list-range[hidden]{display:none!important}
.of-filter-error{color:var(--danger,#b3261e);font-size:12px;margin:6px 0}
.of-filter-error[hidden]{display:none!important}
/* Representantes: resumo e detalhes recolhíveis, ações sem perder funções. */
.rep-page .rep-summary-fold{border:1px solid var(--border,#dce2e8);border-radius:14px;margin-bottom:14px;background:var(--surface,var(--bg-card,#fff))}
.rep-page .rep-summary-fold>summary{padding:12px 15px;cursor:pointer;font-weight:600}
.rep-page .rep-summary-fold .rep-master-summary{margin:0;padding:0 12px 12px}
.rep-page .rep-summary-tools{display:flex;gap:10px;align-items:center;margin:8px 0}
.rep-page .rep-row-avatar{width:44px;height:44px;border-radius:50%;background:var(--surface-2,#e9f1f9);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-weight:600;color:var(--brand-ink,#A72A3A)}
.rep-page .rep-row-avatar img{width:100%;height:100%;object-fit:cover}
.rep-page .rep-compact-name{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.rep-page .rep-compact-summary{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2,#556173);margin:8px 0}
.rep-page .rep-compact-details>summary,.rep-page .rep-more-actions>summary{cursor:pointer;color:var(--text-2,#556173);font-size:12px;padding:8px 0}
.rep-page .rep-more-actions .rep-master-actions{margin-top:5px;flex-wrap:wrap}
.hc31-refresh-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hc31-auto{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}
.hc31-auto input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.hc31-refresh-controls small{color:var(--text-2);font-size:12px;overflow-wrap:anywhere;flex:1 1 220px}
.rep-page .rep-master-card-v32{padding:14px!important}
.rep-page .rep-master-card-v32 h3{font-size:15px;margin:0}
.rep-page .rep-master-main{margin:0!important}
.rep-page .rep-filter-primary{grid-template-columns:minmax(240px,1fr)!important}
.rep-page .rep-photo-editor{display:flex;gap:15px;align-items:center;margin:16px 0}
.rep-page .rep-photo-preview{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--surface-2,#e9f1f9)}
@media(max-width:640px){.of-filter-bar,.of-filter-primary{gap:8px}.of-filter-primary{flex-basis:100%}.of-filter-actions{width:100%}.of-filter-toggle{flex:1 1 auto}.of-filter-grid{grid-template-columns:1fr}.of-filters{padding:10px!important}.rep-page .rep-master-main{display:block}.rep-page .rep-compact-summary{gap:8px}.rep-page .rep-name-line{flex-wrap:wrap}.of-choice-trigger{min-height:44px}}

.of-filter-primary>.ind-filter-extra:not(.is-visible),.of-filter-primary>.ind-filter-custom:not(.is-visible){display:none!important}

/* A barra antiga de Varejo usa grid no shell. A estrutura comum já tem seus
   próprios grupos; mantê-la em bloco evita dividir ações e campos em colunas. */
body:has(.ios-shell):not(.odem-tv-mode) .vr-filterbar.of-filters{display:block!important;gap:0!important}
.vr-filterbar.of-filters .ind-filter-custom.is-visible{flex:1 1 260px;min-width:0;grid-column:1/-1}
@media(max-width:640px){.vr-filterbar.of-filters .ind-filter-custom.is-visible{grid-template-columns:1fr;flex-basis:100%}}


/* ODEM — filtros recolhíveis unificados. CSS limitado à camada .of-* .
   Estado inicial recolhido; não remonta formulários nem bloqueia eventos. */
.of-fold-header,.of-aux-header{display:flex!important;align-items:center;min-height:44px;min-width:0;width:100%;gap:0!important;box-sizing:border-box}
.of-filter-bar.of-fold-header{margin:0!important;flex-wrap:nowrap!important}
.of-fold-toggle{display:inline-flex!important;align-items:center;justify-content:flex-start;gap:7px;min-height:44px;width:100%;padding:9px 11px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:9px!important;box-shadow:none!important;color:#245a9b!important;font:inherit;font-weight:600!important;font-size:13px!important;text-align:left;cursor:pointer}
.of-fold-toggle:hover{background:var(--surface-2,#f2f5fa)!important}
.of-fold-toggle::before{content:'';display:inline-block;width:7px;height:7px;flex:none;border:solid #245a9b;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s ease}
.of-fold-toggle[aria-expanded=true]::before{transform:rotate(45deg)}
.of-fold-label{white-space:nowrap}
.of-fold-count{display:inline-flex;justify-content:center;align-items:center;min-width:20px;height:20px;box-sizing:border-box;padding:0 5px;border-radius:999px;background:#d72e40;color:#fff;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.of-fold-count[hidden]{display:none!important}
.of-fold-toggle:focus-visible{outline:2px solid var(--brand,#245a9b)!important;outline-offset:2px}
.of-filters{padding:0!important;overflow:visible}
.of-filters>.of-filter-body{padding:0 12px 12px;margin-top:0!important}
.of-filters>.of-filter-body[hidden]{display:none!important}
.of-filters>.of-filter-body>.of-filter-primary{padding-top:12px}
.of-filters>.of-filter-body>.of-filter-grid{margin-top:10px}
.of-fold-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.of-filter-actions{gap:8px;flex-wrap:wrap}
.of-filters>.of-filter-body .of-filter-pin-status{margin:8px 0 0}
.of-filter-body .of-filter-field :is(input,select),.of-filter-body>.of-filter-primary :is(input,select){min-height:40px;box-sizing:border-box}
.of-aux-header{margin:0 0 0!important;border:1px solid var(--border,#dce2e8);border-radius:13px;background:var(--surface,var(--bg-card,#fff));box-sizing:border-box}
.of-aux-header:has(+.of-aux-collapsed){border-radius:13px}
.of-aux-header:not(:has(+.of-aux-collapsed)){border-radius:13px 13px 0 0}
.of-aux-header+.support-r3-filterbar,.of-aux-header+.pz-search{margin-top:0!important}
.of-aux-collapsed{display:none!important}
@media(max-width:640px){.of-fold-toggle{min-height:48px;padding:11px 12px!important}.of-filters>.of-filter-body{padding:0 10px 12px}.of-fold-tools>.btn{min-height:44px}.of-filter-body .of-filter-primary>.of-filter-field{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.of-fold-toggle::before{transition:none}}

/* Ações de operação (ex.: Novo usuário) continuam disponíveis com filtros recolhidos. */
.of-filter-bar.of-fold-header>.of-filter-toggle{width:auto;flex:1 1 auto}
.of-filter-bar.of-fold-header>.of-filter-actions{flex:0 1 auto;justify-content:flex-end;padding:3px 5px}
@media(max-width:640px){.of-filter-bar.of-fold-header{flex-wrap:wrap!important}.of-filter-bar.of-fold-header>.of-filter-actions{flex:1 1 100%;padding:0 9px 8px}.of-filter-bar.of-fold-header>.of-filter-actions .btn{min-height:44px}}
/* Campos de filtros uniformes na mesma grade; regras do módulo e ordem original preservadas. */
@media(min-width:761px){
  .of-filters>.of-filter-body:not([hidden]){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;align-items:end;padding-top:12px}
  .of-filters>.of-filter-body>.of-filter-primary,.of-filters>.of-filter-body>.of-filter-grid{display:contents!important}
  .of-filters>.of-filter-body .of-filter-field{min-width:0;width:100%;box-sizing:border-box;margin:0!important}
  .of-filters>.of-filter-body :is(.of-fold-tools,.of-filter-chips,.of-filter-pin-status,.of-filter-date-note,.filtro-periodo-extra,.ind-filter-custom,.ind-filter-extra){grid-column:1/-1}
  .of-filters>.of-filter-body .of-fold-tools{margin-top:0}
  .of-filters>.of-filter-body .of-filter-chips{margin-top:0}
}
@media(min-width:761px){
  .of-filters>.of-filter-body:not([hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}
  .of-filters>.of-filter-body .of-filter-field:has(input[type="search"]){grid-column:span 2}
}
@media(min-width:1200px){
  .of-filters>.of-filter-body:not([hidden]){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ODEM FOUC-01 — impede o breve aparecimento do formato antigo no F5/Ctrl+F5.
   O roteador aplica .of-filter-mounting ANTES de iniciar render(), e a remove
   após montarFiltros(), inclusive se ocorrer exceção. visibility preserva as
   medidas dos controles: nem eventos nem cálculos de layout são modificados.
   Esta regra não esconde telas sem filtros e não depende do cache do navegador. */
#content.of-filter-mounting :is(
  .ios-filter-grid, .ios-client-toolbar, [data-of-prod-filters],
  .vr-filterbar, .hc7-tools, .hc9-filters,
  .ge-filter-fields, .ge-analysis-toolbar, .ge-base-filterbar,
  .gf-filter-controls, .gf-pending-filter-controls, .pc-table-tools,
  .cfgx-user-toolbar, .cfg-history-toolbar, .rel-filters,
  .d13-filters, [data-of-panel],
  .support-r3-filterbar, .support-r3-period,
  .pz-search, .pz-sub-tabs
){visibility:hidden!important}


/* ODEM GF-PENDENTES-01 — manter a geometria original dos filtros do Mainô.
   A barra comum move controles para a grade; o campo de busca financeiro e
   um label com icone e input lado a lado, NÃO um label de coluna. Escopo
   restrito a Pagamentos pendentes; sem mudanças nos eventos da consulta. */
.gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-search.of-filter-field{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start;
  gap:8px!important;
  height:44px;
  min-height:44px;
  width:100%;
  min-width:0;
  padding:0 12px;
  margin:0!important;
  box-sizing:border-box;
  overflow:hidden;
}
.gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-search>span{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  line-height:1;
}
.gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-search>input[data-gf-pending-search]{
  display:block;
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline-offset:-2px;
  box-shadow:none!important;
  background:transparent!important;
  box-sizing:border-box;
}
.gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-statuses.of-filter-field{
  grid-column:1/-1;
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:visible;
}
.gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-statuses button{
  flex:0 0 auto;
  width:auto;
  max-width:100%;
  margin:0;
  white-space:normal;
}
@media(max-width:760px){
  .gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-search.of-filter-field{min-width:0}
  .gf-pending-shell .gf-pending-tools.of-filters .of-filter-body .gf-pending-statuses.of-filter-field{overflow:visible;flex-wrap:wrap}
}


/* ODEM MOBILE-PARITY-01 — a MESMA grade/contrato de campos do desktop.
   A unica diferenca e o numero de colunas para a viewport menor.
   Campos e eventos continuam sob controle dos modulos originais. */
@media (max-width:760px){
  .of-filters>.of-filter-body:not([hidden]){
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;align-items:end;min-width:0;
    padding-top:12px;
  }
  .of-filters>.of-filter-body>.of-filter-primary,
  .of-filters>.of-filter-body>.of-filter-grid:not([hidden]){
    display:contents!important;
  }
  .of-filters>.of-filter-body>.of-filter-grid[hidden]{display:none!important}
  .of-filters>.of-filter-body .of-filter-field{
    min-width:0;width:100%;max-width:100%;box-sizing:border-box;margin:0!important;
  }
  .of-filters>.of-filter-body :is(
    .of-fold-tools,.of-filter-chips,.of-filter-pin-status,.of-filter-date-note,
    .filtro-periodo-extra,.ind-filter-custom,.ind-filter-extra
  ){grid-column:1/-1;min-width:0;max-width:100%}
  .of-filters>.of-filter-body .of-fold-tools,
  .of-filters>.of-filter-body .of-filter-chips{margin-top:0}
  .of-filters>.of-filter-body :is(input,select,textarea){max-width:100%;box-sizing:border-box}
}

/* HF-REP-FILTROS 20261103b: somente Representantes. Os selects nativos
   permanecem interativos, sem combobox duplicado; demais módulos intocados. */
#rep-raiz #rep-filtros .rep-filter-main.of-filters .of-filter-field { min-width:0; box-sizing:border-box; }
#rep-raiz #rep-filtros .rep-filter-main.of-filters .of-filter-field > label { display:block; margin-bottom:6px; }
#rep-raiz #rep-filtros .rep-filter-main.of-filters .of-filter-field select.select { display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
#rep-raiz #rep-filtros .rep-filter-main.of-filters select.of-native-select { display:none!important; }
#rep-raiz #rep-filtros .rep-filter-main.of-filters > .of-filter-bar ~ .of-filter-bar { display:none!important; }