/* =====================================================================
   ODEM V32.1 — responsividade e navegação em cascata
   Camada final de layout: desktop, Android e iOS.
   ===================================================================== */

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

.nav-group { display: block; }
.nav-group + .nav-group { margin-top: 8px; }
.nav-group-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sidebar-text-2);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.nav-group-toggle:hover { color: var(--sidebar-text); background: var(--sidebar-hover); }
.nav-group-chevron {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.nav-group.is-open .nav-group-chevron { transform: rotate(90deg); }
.nav-group-items { display: none; padding-top: 3px; }
.nav-group.is-open .nav-group-items { display: flex; flex-direction: column; gap: 3px; }

.rep-master-grid, .rep-master-list, .rel-history, .rel-list { display: grid; gap: var(--sp-3); }
.rep-master-head, .rel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.rep-master-actions, .rel-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.rep-master-card, .rel-history-item {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); padding: var(--sp-3);
}
.rep-master-meta, .ped-maino-ref { color: var(--text-3); font-size: var(--fs-xs); }
.rel-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-3); }
.rel-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.8fr); gap: var(--sp-4); }
.rel-history-item { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }

.table-wrap, .ind-table-wrap, .rel-table-wrap { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }

@media (min-width: 1100px) {
  .content { width: 100%; }
  .rep-master-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .rel-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 56px; }

  body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app-shell { min-height: 100dvh; }

  body[data-device="mobile"] .sidebar {
    width: min(88vw, 320px);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    min-height: var(--topbar-h);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  #topbar-titulo { font-size: 16px; }
  body[data-device="mobile"] .content {
    width: 100%;
    padding: 14px max(12px, env(safe-area-inset-right, 0px))
             calc(28px + env(safe-area-inset-bottom, 0px))
             max(12px, env(safe-area-inset-left, 0px));
  }

  input, select, textarea, .input, .select, .textarea { font-size: 16px !important; }
  button, .btn, .nav-item, .sidebar-action, .topbar-menu,
  input[type="button"], input[type="submit"] { min-height: 44px; }

  .nav-group-toggle { min-height: 40px; }
  .sidebar-actions { grid-template-columns: 1fr 1fr; }

  .modal { align-items: flex-end; padding: 0; }
  .modal-box {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  .toolbar, .acoes, .actions, .ped-detail-actions, .rep-master-actions, .rel-actions { width: 100%; }
  .toolbar .btn, .acoes .btn, .actions .btn, .rep-master-actions .btn, .rel-actions .btn { flex: 1 1 auto; }

  .rel-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rel-grid { grid-template-columns: 1fr; }
  .rel-history-item { align-items: flex-start; flex-direction: column; }
  .rep-master-grid { grid-template-columns: 1fr; }

  .cfg-grid, .cfg-form-grid { grid-template-columns: 1fr !important; }
  .cfg-wide { grid-column: auto !important; }

  .venda-grade { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px; }
  .venda-barra { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }

  #ped-lista, #cli-lista, #prod-lista { max-width: 100%; }
  .card, .panel, .ind-panel, .rep-master-card { max-width: 100%; overflow-wrap: anywhere; }
  .ped-tax-grid { grid-template-columns: 1fr !important; }
  .ind-kpis, .ind-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 390px) {
  .rel-kpis, .ind-kpis, .ind-kpi-grid { grid-template-columns: 1fr !important; }
  .venda-grade { grid-template-columns: 1fr !important; }
  .sidebar-actions { grid-template-columns: 1fr; }
}


/* ---- Representantes V32.1 ----------------------------------------- */
.rep-master-tools { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.rep-master-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2);
  margin:var(--sp-4) 0;
}
.rep-master-summary > span {
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:10px 12px;
  color:var(--text-2);
  font-size:var(--fs-sm);
}
.rep-master-summary b { color:var(--text); font-family:var(--font-ui); font-size:var(--fs-lg); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; margin-right:4px; }
.rep-master-main {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-3);
  align-items:start;
}
.rep-master-main h3 { margin:0; font-size:var(--fs-lg); line-height:var(--lh-tight); }
.rep-master-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.rep-master-system { text-align:right; font-size:var(--fs-xs); line-height:1.7; }
.rep-muted { color:var(--text-3); font-size:var(--fs-xs); }
.maino-sistema-badge { border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-2); }
.rep-master-meta {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-2);
  margin:var(--sp-3) 0;
  padding:var(--sp-3) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.rep-master-meta > div { display:grid; gap:3px; }
.rep-master-meta span { color:var(--text-3); font-size:var(--fs-xs); }
.rep-master-meta b { color:var(--text); font-size:var(--fs-sm); }
.rep-local-orphans { margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--border); }
.rep-local-orphans h2 { margin:0 0 4px; font-size:var(--fs-lg); }
.rep-local-orphans > p { margin:0 0 var(--sp-4); color:var(--text-2); font-size:var(--fs-sm); }
.rep-carteira-list { display:grid; gap:8px; max-height:min(55vh,520px); overflow:auto; padding-right:2px; }
.rep-carteira-row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px;
}
.rep-carteira-row > div { display:grid; gap:3px; }
.rep-carteira-row > div:last-child { justify-items:end; }
.rep-carteira-row span { color:var(--text-2); font-size:var(--fs-xs); }

/* ---- Relatório Diário V32.1 --------------------------------------- */
.rel-toolbar, .rel-day-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
}
.rel-toolbar h1, .rel-day-head h2 { margin:0 0 4px; }
.rel-toolbar p, .rel-day-head p { margin:0; color:var(--text-2); font-size:var(--fs-sm); }
.rel-filters { display:flex; gap:var(--sp-2); flex-wrap:wrap; min-width:min(100%,420px); }
.rel-filters > * { flex:1 1 180px; }
.rel-layout {
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
  margin-top:var(--sp-4);
}
.rel-history { padding:var(--sp-3); max-height:calc(100dvh - 180px); overflow:auto; position:sticky; top:calc(var(--topbar-h) + 14px); }
.rel-history h2 { margin:0 0 var(--sp-3); font-size:var(--fs-lg); }
.rel-history-row {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  border:0; border-top:1px solid var(--border); background:transparent; color:var(--text);
  padding:11px 8px; text-align:left; cursor:pointer; font:inherit;
}
.rel-history-row:first-of-type { border-top:0; }
.rel-history-row:hover { background:var(--surface-2); }
.rel-history-row.is-active { background:var(--brand-tint); box-shadow:inset 3px 0 0 var(--brand); }
.rel-history-row > span { display:grid; gap:3px; }
.rel-history-row small { color:var(--text-3); font-size:var(--fs-xs); }
.rel-history-row strong { font-family:var(--font-mono); font-size:var(--fs-xs); white-space:nowrap; }
.rel-eyebrow {
  display:inline-block; margin-bottom:6px; color:var(--brand);
  font-size:10px; font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase;
}
.rel-kpi {
  border:1px solid var(--border); background:var(--surface);
  border-radius:var(--radius-md); padding:var(--sp-3); min-height:88px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.rel-kpi span { color:var(--text-2); font-size:var(--fs-xs); }
.rel-kpi b { font-family:var(--font-ui); color:var(--text); font-size:var(--fs-xl); font-weight:var(--fw-bold); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.rel-kpi small { color:var(--text-3); font-size:10px; }
.rel-section { margin-top:var(--sp-4); }
.rel-section h3 { margin:0 0 var(--sp-3); font-size:var(--fs-lg); }
.rel-rep-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.rel-rep-grid > div {
  display:grid; gap:3px; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:10px 12px; background:var(--surface-2);
}
.rel-rep-grid span { color:var(--text-2); font-size:var(--fs-xs); }
.rel-rep-grid strong { font-family:var(--font-mono); font-size:var(--fs-sm); }
.rel-orders, .rel-actions { display:grid; gap:0; width:100%; }
.rel-order {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:11px 0; border-top:1px solid var(--border);
}
.rel-order:first-child { border-top:0; }
.rel-order > div { display:grid; gap:3px; }
.rel-order > div:last-child { justify-items:end; }
.rel-order span { color:var(--text-2); font-size:var(--fs-xs); }
.rel-order strong { font-family:var(--font-mono); }
.rel-actions > div {
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--sp-2);
  padding:9px 0; border-top:1px solid var(--border); font-size:var(--fs-sm);
}
.rel-actions > div:first-child { border-top:0; }
.rel-actions time { color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-xs); }
.rel-note { margin:0 0 var(--sp-3); color:var(--text-3); font-size:var(--fs-xs); }

@media (max-width: 900px) {
  .rel-layout { grid-template-columns:1fr; }
  .rel-history { position:static; max-height:320px; }
}
@media (max-width: 640px) {
  .rep-master-summary { grid-template-columns:1fr; }
  .rep-master-main { grid-template-columns:1fr; }
  .rep-master-system { text-align:left; }
  .rep-master-meta { grid-template-columns:1fr 1fr; }
  .rep-carteira-row, .rel-order { align-items:flex-start; flex-direction:column; }
  .rep-carteira-row > div:last-child, .rel-order > div:last-child { justify-items:start; }
  .rel-toolbar, .rel-day-head { flex-direction:column; }
  .rel-filters { width:100%; min-width:0; }
  .rel-filters > * { flex:1 1 100%; width:100%; }
  .rel-rep-grid { grid-template-columns:1fr; }
  .rel-history-row { align-items:flex-start; }
}

/* =====================================================================
   Representantes V32.2 — lista vertical + filtros administrativos
   ===================================================================== */
.rep-master-grid.rep-master-list-v32,
.rep-master-list-v32 { grid-template-columns: 1fr !important; display:grid; gap:10px; }
.rep-master-card-v32 { width:100%; padding:14px 16px; }
.rep-master-summary-v32 { grid-template-columns:repeat(7,minmax(0,1fr)); }
.rep-stat {
  border:1px solid var(--border); background:var(--surface-2); border-radius:var(--radius-md);
  padding:10px 12px; min-height:64px; display:grid; gap:2px; text-align:left; cursor:pointer;
  color:var(--text); font:inherit;
}
.rep-stat:hover { border-color:var(--border-strong); background:var(--surface); }
.rep-stat b { font-family:var(--font-ui); font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.rep-stat span { color:var(--text-2); font-size:var(--fs-xs); }
.rep-filters-wrap { margin:0 0 var(--sp-3); }
.rep-filter-grid {
  display:grid; grid-template-columns:minmax(260px,1.8fr) repeat(6,minmax(135px,1fr));
  gap:8px; align-items:end; padding:12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2);
}
.rep-filter-grid > div { display:grid; gap:5px; }
.rep-filter-grid label { color:var(--text-2); font-size:10px; font-weight:var(--fw-semibold); letter-spacing:.01em; }
.rep-filter-search { grid-column:span 2; }
.rep-filter-reset { align-self:end; }
.rep-filter-reset .btn { width:100%; }
.rep-result-meta { color:var(--text-3); font-size:var(--fs-xs); margin:8px 0 10px; }
.rep-name-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rep-name-line h3 { margin-right:4px; }
.rep-subline { color:var(--text-2); font-size:var(--fs-xs); margin-top:5px; }
.rep-maino-line { display:flex; justify-content:flex-end; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 5px; }
.rep-maino-line code { font-size:10px; color:var(--text-3); max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.rep-master-meta-v32 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.rep-master-actions { border-top:0; }
.rep-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rep-form-wide { grid-column:1/-1; }
.rep-modal-box-wide { width:min(880px,calc(100vw - 32px)); }
.rep-modal-headline { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.rep-modal-headline > div { display:flex; gap:7px; flex-wrap:wrap; }
.rep-row-actions { display:flex; align-items:center; gap:7px; }
.rep-assign-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 0 8px; color:var(--text-2); font-size:var(--fs-xs); }
.rep-assign-list { display:grid; gap:6px; max-height:min(50vh,480px); overflow:auto; padding-right:3px; }
.rep-assign-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(140px,.5fr); align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:var(--radius-md); padding:9px 10px; cursor:pointer; background:var(--surface);
}
.rep-assign-row:hover { background:var(--surface-2); }
.rep-assign-row > span { display:grid; gap:2px; }
.rep-assign-row small { color:var(--text-3); }
.rep-assign-row em { font-style:normal; color:var(--text-2); font-size:var(--fs-xs); text-align:right; }
.rep-history-list { display:grid; gap:7px; max-height:min(58vh,520px); overflow:auto; }
.rep-history-row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px; border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; }
.rep-history-row > div { display:grid; gap:3px; }
.rep-history-row span,.rep-history-row small { color:var(--text-2); font-size:var(--fs-xs); }

@media (max-width: 1280px) {
  .rep-master-summary-v32 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rep-filter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rep-filter-search { grid-column:span 2; }
}
@media (max-width: 900px) {
  .rep-master-summary-v32 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rep-filter-grid { grid-template-columns:1fr 1fr; }
  .rep-filter-search { grid-column:1/-1; }
  .rep-master-meta-v32 { grid-template-columns:1fr 1fr; }
  .rep-master-system { text-align:left; }
  .rep-maino-line { justify-content:flex-start; }
}
@media (max-width: 640px) {
  .rep-master-summary-v32 { grid-template-columns:1fr 1fr; }
  .rep-filter-grid { grid-template-columns:1fr; padding:10px; }
  .rep-filter-search { grid-column:auto; }
  .rep-master-meta-v32, .rep-form-grid { grid-template-columns:1fr; }
  .rep-form-wide { grid-column:auto; }
  .rep-modal-headline { flex-direction:column; }
  .rep-assign-row { grid-template-columns:auto minmax(0,1fr); }
  .rep-assign-row em { grid-column:2; text-align:left; }
  .rep-history-row { grid-template-columns:1fr; }
}

/* ================================================================
   V32.3.1 — Representantes: seleção e ações em massa
   ================================================================ */
.rep-bulk-bar {
  display:grid;
  grid-template-columns:auto auto minmax(180px,260px) auto auto;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-2);
}
.rep-bulk-select { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.rep-bulk-select input, .rep-card-select input { width:17px; height:17px; accent-color:var(--brand); cursor:pointer; }
.rep-bulk-count { color:var(--text-2); font-size:var(--fs-xs); white-space:nowrap; }
.rep-bulk-count b { color:var(--text); font-family:var(--font-ui); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.rep-bulk-action { min-width:0; }
.rep-master-card-v32 { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; }
.rep-card-select { padding-top:2px; display:flex; align-items:flex-start; justify-content:center; }
.rep-card-body { min-width:0; }
.rep-master-card-selected { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }

@media (max-width: 900px) {
  .rep-bulk-bar { grid-template-columns:1fr 1fr; }
  .rep-bulk-action { grid-column:1/-1; }
}
@media (max-width: 640px) {
  .rep-bulk-bar { grid-template-columns:1fr; }
  .rep-bulk-action { grid-column:auto; width:100%; }
  .rep-bulk-bar .btn { width:100%; }
  .rep-master-card-v32 { grid-template-columns:auto minmax(0,1fr); gap:9px; }
}

/* ---- Filtros temporais responsivos V32.5.13 ----------------------- */
@media (max-width: 640px) {
  .filtro-periodo-select { width: 100%; min-width: 0; }
  .filtro-periodo-extra { width: 100%; gap: 8px; }
  .filtro-periodo-extra > .field { flex: 1 1 100%; min-width: 0; max-width: none; }
  .rel-filters { width: 100%; min-width: 0; }
  .rel-filters > .field { flex: 1 1 100%; width: 100%; }
}

/* ---- PATCH topbar/mobile --------------------------------------------- */
@media (max-width:640px) {
  .topbar { gap:8px; }
  .topbar-heading { flex:1; min-width:0; }
  .topbar-actions { margin-left:0; gap:6px; }
  .topbar-action { width:40px; min-width:40px; padding:0; justify-content:center; }
  .topbar-action-label { display:none; }
  body[data-device="mobile"] .topbar-account { display:inline-flex; width:40px; min-width:40px; height:40px; padding:4px; justify-content:center; }
  body[data-device="mobile"] .topbar-account-copy,
  body[data-device="mobile"] .topbar-chevron { display:none; }
  .topbar-avatar { width:30px; height:30px; }
  .ped-create-actions { width:100%; justify-content:stretch; }
  .ped-create-actions .btn { flex:1 1 145px; }
  .rep-permissoes-grid { grid-template-columns:1fr; }
}

/* V32.7.2 — Historico de acesso */
@media (max-width: 640px) {
  .cfg-history-titlebar { align-items:flex-start; gap:var(--sp-2); }
  .cfg-history-heading { align-items:flex-start; }
  .cfg-history-meta { padding-top:2px; }
  .cfg-history-toolbar { display:grid; grid-template-columns:1fr; }
  .cfg-history-period { width:100%; }
  .cfg-history-tabs { width:100%; }
  .cfg-history-tab { flex:1 1 0; }
  .cfg-history-user-row { grid-template-columns:minmax(0,1fr) auto; gap:5px var(--sp-2); padding:8px 2px; }
  .cfg-history-user-main { grid-column:1; flex-direction:column; align-items:flex-start; gap:1px; }
  .cfg-history-last { grid-column:1; grid-row:2; flex-direction:row; align-items:center; gap:5px; }
  .cfg-history-count { grid-column:2; grid-row:1; align-items:flex-end; }
  .cfg-history-chevron { grid-column:2; grid-row:2; }
  .cfg-history-detail { margin-left:8px; }
  .cfg-history-event { align-items:flex-start; }
  .cfg-history-event-user { flex-direction:column; gap:1px; }
}

/* ================================================================
   V32.7.3 — Representantes: filtros compactos e hierarquia visual
   Apenas apresentação; IDs e regras de filtragem permanecem intactos.
   ================================================================ */
.rep-master-summary-v32 { gap:7px; }
.rep-stat { min-height:54px; padding:8px 10px; }
.rep-stat b { font-size:17px; line-height:1.05; }
.rep-stat span { line-height:1.15; }

.rep-filter-shell {
  display:grid;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-2);
}
.rep-filter-primary {
  display:grid;
  grid-template-columns:minmax(280px,2.25fr) minmax(125px,.75fr) minmax(115px,.65fr) minmax(120px,.65fr) minmax(145px,.8fr);
  gap:8px;
  align-items:end;
}
.rep-filter-primary > div,
.rep-filter-advanced-grid > div { display:grid; gap:4px; min-width:0; }
.rep-filter-primary label,
.rep-filter-advanced-grid label {
  color:var(--text-2);
  font-size:9px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.rep-filter-shell .input,
.rep-filter-shell .select { height:36px; font-size:var(--fs-sm); }
.rep-filter-primary .rep-filter-search { min-width:0; grid-column:auto; }
.rep-filter-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:30px;
}
.rep-filter-chips {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.rep-filter-chips-label {
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-right:1px;
}
.rep-filter-chips-empty { color:var(--text-3); font-size:var(--fs-xs); }
.rep-filter-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:260px;
  min-height:26px;
  padding:3px 7px 3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:11px;
  line-height:1.2;
  cursor:pointer;
}
.rep-filter-chip:hover { border-color:var(--border-strong); color:var(--text); }
.rep-filter-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rep-filter-chip b { color:var(--text-3); font-size:14px; line-height:1; font-weight:500; }
.rep-filter-actions { display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; }
.rep-filter-actions .btn { min-height:32px; padding:5px 10px; font-size:var(--fs-xs); white-space:nowrap; }
.rep-more-filters { display:inline-flex; align-items:center; gap:6px; }
.rep-filter-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--brand-tint);
  color:var(--brand);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
}
.rep-filter-advanced {
  padding-top:8px;
  border-top:1px solid var(--border);
}
.rep-filter-advanced[hidden] { display:none !important; }
.rep-filter-advanced-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(120px,1fr));
  gap:8px;
  align-items:end;
}
.rep-filter-period-extra { margin-top:8px; }
.rep-filter-period-extra > .filtro-periodo-extra { margin-top:0; }

.rep-bulk-bar {
  grid-template-columns:auto auto minmax(180px,1fr) auto auto;
  min-height:50px;
  padding:8px 12px;
  gap:8px;
}
.rep-bulk-bar .select { height:36px; font-size:var(--fs-sm); }
.rep-bulk-bar .btn { min-height:36px; padding-top:6px; padding-bottom:6px; }

@media (max-width: 1180px) {
  .rep-filter-primary { grid-template-columns:minmax(260px,2fr) repeat(2,minmax(120px,1fr)); }
  .rep-filter-primary .rep-filter-search { grid-column:span 1; }
  .rep-filter-advanced-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .rep-filter-primary { grid-template-columns:1fr 1fr; }
  .rep-filter-primary .rep-filter-search { grid-column:1/-1; }
  .rep-filter-tools { align-items:flex-start; flex-direction:column; }
  .rep-filter-actions { margin-left:0; width:100%; }
  .rep-filter-actions .btn { flex:1 1 auto; }
  .rep-filter-advanced-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .rep-master-summary-v32 { gap:6px; }
  .rep-stat { min-height:50px; padding:7px 9px; }
  .rep-filter-shell { padding:9px; }
  .rep-filter-primary,
  .rep-filter-advanced-grid { grid-template-columns:1fr; }
  .rep-filter-primary .rep-filter-search { grid-column:auto; }
  .rep-filter-tools { gap:8px; }
  .rep-filter-actions { display:grid; grid-template-columns:1fr 1fr; }
  .rep-filter-chip { max-width:100%; }
  .rep-bulk-bar { padding:8px 10px; }
}

/* =====================================================================
   ODEM 32.8.1 — VISUAL REFRESH ENHANCED / RESPONSIVO
   ===================================================================== */
@media (max-width: 900px) {
  .card, .cfg-card, .ind-panel, .rep-master-card { border-radius: 15px; }
}

@media (max-width: 640px) {
  :root { --topbar-h: 60px; }
  .topbar { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  body[data-device="mobile"] .content {
    padding-top: 16px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .card, .cfg-card, .ind-panel, .rep-master-card { padding: 16px; border-radius: 16px; }
  .btn { min-height: 44px; border-radius: 12px; }
  .input, .select, .textarea { border-radius: 12px; }
  .topbar-account-copy { display: none; }
  .topbar-account { padding-right: 6px; }
  .topbar-avatar { width: 34px; height: 34px; }
  .modal-box { border-radius: 22px 22px 0 0; }
  .nav-item { min-height: 46px; border-radius: 12px; }
}

/* =====================================================================
   ODEM 32.9.0 — GLOBAL PREMIUM REDESIGN / NAVEGACAO + RESPONSIVO
   ===================================================================== */
.nav-group + .nav-group { margin-top: 10px; }
.nav-group-toggle {
  min-height: 29px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .14em;
  color: var(--text-3);
}
.nav-group-toggle:hover { background: transparent; color: var(--sidebar-text); }
.nav-group-chevron { font-size: 14px; opacity: .65; }
.nav-group-items { padding-top: 3px; }
.nav-group.is-open .nav-group-items { gap: 4px; }

@media (max-width: 900px) {
  :root { --sidebar-w: 228px; }
}

@media (max-width: 640px) {
  :root { --topbar-h: 62px; }
  body[data-device="mobile"] .sidebar {
    width: min(86vw, 310px);
    padding: max(14px, env(safe-area-inset-top, 0px)) 12px max(14px, env(safe-area-inset-bottom, 0px));
    background: var(--sidebar-bg);
  }
  .sidebar-brand { min-height: 56px; padding: 4px 10px 13px; }
  .sidebar-wordmark { width: 108px; }
  .topbar { gap: 7px; }
  .topbar-heading { display: none; }
  .topbar-actions { margin-left: auto; }
  .topbar-menu { display: inline-grid; }
  .content { padding-top: 16px; }
  .btn { min-height: 44px; height: 44px; }
  .modal-box { padding: 20px 16px max(20px, env(safe-area-inset-bottom, 0px)); }
}


/* =====================================================================
   ODEM 33.0.0 — UI SKIN / RESPONSIVIDADE
   Mobile e tablet sem alterar comportamento funcional.
   ===================================================================== */
@media (max-width: 900px) {
  :root { --sidebar-w: 248px; }
  .app-shell { padding: 8px; gap: 0; }
  body[data-device="mobile"] .sidebar {
    top: 8px;
    left: 8px;
    bottom: 8px;
    inset: 8px auto 8px 8px;
    width: min(88vw, 320px);
    height: calc(100dvh - 16px);
    border-radius: 24px;
    padding: max(14px,env(safe-area-inset-top,0px)) 12px max(14px,env(safe-area-inset-bottom,0px));
    box-shadow: var(--shadow-lg);
  }
  body[data-device="mobile"] .sidebar.open + .sidebar-backdrop { border-radius: 0; }
  .card, .cfg-card, .ind-panel, .rep-master-card { border-radius: 18px; }
}

@media (max-width: 640px) {
  :root { --topbar-h: 70px; }
  .app-shell { padding: 7px; }
  .topbar {
    height: 54px;
    min-height: 54px;
    margin-top: 0;
    padding: 0 8px;
    border-radius: 17px;
    gap: 6px;
  }
  .topbar-heading { display:none; }
  .topbar-menu, .topbar-action { width:38px; min-width:38px; height:38px; min-height:38px; border-radius:12px; }
  body[data-device="mobile"] .topbar-account { display:inline-flex; width:38px; min-width:38px; height:38px; min-height:38px; padding:2px; }
  .topbar-avatar { width:32px; height:32px; }
  body[data-device="mobile"] .content {
    padding: 12px 5px calc(30px + env(safe-area-inset-bottom,0px));
  }
  .content { border-radius:18px; }
  .btn { min-height:44px; height:44px; border-radius:14px; }
  .btn-sm { min-height:36px; height:36px; border-radius:11px; }
  .input, .select, .textarea { min-height:44px; border-radius:14px; }
  .modal { align-items:flex-end; padding:0; }
  .modal-box {
    width:100%;
    max-width:none;
    max-height:92dvh;
    overflow:auto;
    margin:0;
    padding:20px 16px max(20px,env(safe-area-inset-bottom,0px));
    border-radius:26px 26px 0 0;
    border-bottom:0;
  }

  .rep-page { gap:13px; }
  .rep-page-head { align-items:flex-start; gap:12px; }
  .rep-page-title h1 { font-size:28px; }
  .rep-master-tools { display:grid; grid-template-columns:1fr; width:100%; }
  .rep-master-summary-v32 { grid-template-columns:1fr 1fr; gap:8px; }
  .rep-stat { min-height:82px; padding:11px; grid-template-columns:34px minmax(0,1fr); border-radius:17px; }
  .rep-stat-icon { width:34px; height:34px; border-radius:11px; }
  .rep-stat-copy b { font-size:21px; }
  .rep-filter-shell { padding:13px; border-radius:18px; }
  .rep-filter-heading-icon { width:34px; height:34px; border-radius:11px; }
  .rep-filter-primary, .rep-filter-advanced-grid { grid-template-columns:1fr; }
  .rep-filter-primary .rep-filter-search { grid-column:auto; }
  .rep-filter-tools { align-items:flex-start; flex-direction:column; }
  .rep-filter-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .rep-filter-actions .btn { width:100%; }
  .rep-bulk-bar { grid-template-columns:minmax(0,1fr) auto; padding:10px; border-radius:17px; }
  .rep-bulk-action { grid-column:1/-1; width:100%; }
  .rep-master-card-v32 { border-radius:17px; padding:13px; }
  .rep-master-meta-v32 { grid-template-columns:1fr 1fr; }

  .ind-head h1 { font-size:28px; }
  .ind-kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .ind-kpi { min-height:96px; padding:14px; border-radius:18px; }
  .ind-kpi strong { font-size:22px; }
  .ind-panel { padding:14px; border-radius:18px; }

}

@media (max-width: 390px) {
  .rep-master-summary-v32, .ind-kpis { grid-template-columns:1fr; }
  .rep-filter-actions { grid-template-columns:1fr; }
}

/* ODEM 33.0.1 — formulários e modais legíveis no mobile */
@media (max-width: 700px) {
  .modal-box {
    border-radius: 22px 22px 0 0;
    padding: 22px 16px max(20px, env(safe-area-inset-bottom, 0px));
    border-left: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
    border-top: 1px solid var(--border-strong);
  }
  .modal-title { font-size: 20px; }
  .field-label { font-size: 12px; }
  .rep-form-grid { gap: 12px; }
  .rep-permissoes-grid { grid-template-columns: 1fr; }
  .rep-perm-item { min-height: 46px; }
  .modal-actions { position: static; gap: 8px; }
  .modal-actions .btn { min-height: 44px; }
}

/* =====================================================================
   ODEM 33.1.0 — GLOBAL UI OVERHAUL
   Camada visual final: famílias compartilhadas + adaptações por módulo.
   Não modifica DOM, dados, eventos, permissões ou estados de visibilidade.
   Estados .hidden, [hidden], .open e variantes TV permanecem na base.
   ===================================================================== */

/* 01 — Shell: navegação permanente e área de trabalho contínua. */
body:not(.odem-tv-mode) .app-shell {
  padding: 0;
  gap: 0;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  grid-template-rows: var(--topbar-h) minmax(0,1fr);
}
body:not(.odem-tv-mode) .sidebar {
  top: 0;
  height: 100vh;
  height: 100dvh;
  padding: 24px 16px;
  border: 0;
  border-right: 1px solid var(--sidebar-border);
  border-radius: 0;
  background: var(--sidebar-bg);
  box-shadow: none;
  backdrop-filter: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body .sidebar-brand { min-height: 72px; padding: 0 12px 24px; margin-bottom: 16px; border: 0; }
body .sidebar-wordmark { width: 136px; }
body .sidebar-section-label { padding: 8px 12px; font-size: 11px; letter-spacing: .08em; }
body .sidebar-nav { gap: 12px; }
body .nav-group + .nav-group { margin-top: 0; }
body .nav-group-toggle { min-height: 36px; padding: 8px 12px; font-size: 11px; letter-spacing: .06em; color: var(--text-2); }
body .nav-group-items { padding-top: 4px; }
body .nav-item { min-height: 42px; padding: 10px 12px; gap: 12px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--sidebar-text-2); background: transparent; box-shadow: none; }
body .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; padding: 0; box-sizing: border-box; border-radius: 0; background: transparent; box-shadow: none; }
body .nav-item:hover { background: var(--sidebar-hover); color: var(--text); transform: none; text-decoration: none; }
body .nav-item.active { background: var(--brand-tint); color: var(--brand-ink); box-shadow: inset 3px 0 var(--brand); }
body .nav-item.active .nav-label { color: var(--brand-ink); }
body[data-theme] .nav-item.active .nav-icon { color: var(--brand-ink); background: transparent; box-shadow: none; }
body .nav-item.active::before { background: transparent; }
body:not(.odem-tv-mode) .topbar {
  top: 0;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  margin: 0;
  padding: 0 var(--content-pad-x);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
}
body .topbar-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body .topbar-eyebrow { display: block; font-size: 10px; letter-spacing: .08em; color: var(--text-3); }
body #topbar-titulo { font-size: 18px; line-height: 1.2; color: var(--text); }
body .topbar-actions { gap: 12px; }
body .topbar-action, body .topbar-menu { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 10px; }
body .topbar-avatar { background: var(--brand-tint); color: var(--brand-ink); border-radius: 12px; }
body .topbar-account { border-radius: 10px; gap: 8px; }
body .topbar-account-copy strong { font-size: 13px; }
body .topbar-account-copy small { font-size: 11px; }
body .topbar-user-menu { min-width: 232px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 14px; background: var(--surface); border-color: var(--border); }
body:not(.odem-tv-mode) .content { min-width: 0; padding: 24px var(--content-pad-x) 40px; max-width: 1680px; border-radius: 0; }

/* 02 — Títulos e superfícies: o conteúdo ocupa a página, sem caixa externa. */
body :is(.ind-page,.rep-page,.hc3-page,.cfg-page) { gap: 20px; }
body :is(.card,.ind-panel,.hc3-section,.hc3-network,.venda-card,.rep-master-card) { border-radius: var(--radius-lg); background: var(--surface); border-color: var(--border); box-shadow: none; }
body :is(.card,.ind-panel,.hc3-section) { padding: 20px; }
body :is(.card-title,.ind-panel-head h2,.hc3-section-head h2,.cfg-card-head h2) { font-size: 16px; font-weight: 650; }
body :is(.ind-head h1,.rep-page-title h1,.hc3-head h1,.cfg-head h1) { font-size: 28px; font-weight: 700; letter-spacing: -.035em; }
body :is(.ind-eyebrow,.rep-page-eyebrow,.hc3-eyebrow,.rel-eyebrow) { font-size: 11px; letter-spacing: .08em; color: var(--text-3); }
body :is(#ped-raiz,#cli-raiz,#prod-raiz) > .card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body :is(#ped-raiz,#cli-raiz,#prod-raiz) > .card > .card-title,
body :is(#ped-raiz,#prod-raiz) > .card > div:first-child .card-title { font-size: 28px; }
body :is(#cli-lista,#prod-lista,#ped-lista) { min-width: 0; }
body #ped-raiz #ped-lista { grid-template-columns: minmax(0,1fr); gap: 0; border-radius: 14px; }
body #ped-raiz #ped-lista > .card { border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
body #ped-raiz #ped-lista > .card:hover { background: var(--surface-2); }
body #ped-raiz #ped-lista > .card:last-child { border-radius: 0 0 14px 14px; }
body #ped-lista > p { color: var(--text-2); }
body #prod-lista .card { border: 1px solid var(--border); box-shadow: none; }

/* 03 — Indicadores: faixa de métricas compacta e painéis hierarquizados. */
body :is(.ind-kpis,.rep-master-summary-v32,.rel-kpis,.hc3-kpis) { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
body :is(.ind-kpi,.rep-stat,.rel-kpi,.hc3-kpi) { min-width: 0; min-height: 80px; padding: 16px; background: transparent; border: 0; border-radius: 0; box-shadow: none; border-inline-end: 1px solid var(--border); }
body :is(.ind-kpi,.rep-stat,.rel-kpi,.hc3-kpi):last-child { border-inline-end: 0; }
body :is(.ind-kpi strong,.ind-kpi b,.rel-kpi b,.rel-kpi strong,.hc3-kpi strong,.rep-stat-copy b) { font-size: clamp(22px,2vw,28px); line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.035em; overflow-wrap: anywhere; }
body :is(.ind-kpi > span,.ind-kpi > small,.rel-kpi > span,.hc3-kpi > span,.rep-stat-copy span) { font-size: 12px; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--text-2); }
body .rep-stat-icon { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; }
body .ind-panel-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
body .ind-dashboard-row { gap: 16px; }
body .ind-bar { height: 8px; }
body :is(.ind-sync,.ind-sync-chip) { background: var(--surface-2); border-color: var(--border); box-shadow: none; }

/* 04 — Filtros: pesquisa protagonista, demais controles agrupados. */
body :is(.rep-filter-shell,.ind-filterbar,.rel-toolbar,.hc3-period,.maino-toolbar) { padding: 16px; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }
body .rep-filter-primary { grid-template-columns: minmax(220px,2fr) repeat(4,minmax(0,1fr)); gap: 12px; }
body .rep-filter-advanced-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
body .rep-filter-heading { gap: 8px; }
body .rep-filter-heading b { font-size: 14px; }
body .rep-filter-heading small { font-size: 12px; }
body .rep-filter-primary label, body .rep-filter-advanced-grid label { font-size: 12px; font-weight: 600; color: var(--text-2); }
body .rep-filter-tools { padding-top: 12px; border-top: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
body .rep-filter-actions .btn { min-height: 36px; height: auto; font-size: 12px; }
body :is(.rep-filter-chip,.rep-filter-chips-label,.rep-filter-chips-empty) { font-size: 12px; }
body .rep-filter-chip { min-height: 28px; padding: 4px 12px; }
body #ped-raiz .card > div:has(> #ped-busca),
body #cli-raiz .card > div:has(> #cli-busca) { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
body #ped-raiz .card > div:has(> #ped-busca) { grid-template-columns: repeat(3,minmax(0,1fr)); }
body #ped-busca { grid-column: 1 / -1; }
body #ped-raiz .card > div:has(> #aba-ativos) { padding: 4px; width: fit-content; max-width: 100%; background: var(--surface-3); border-radius: 10px; }
body #ped-raiz [data-ped="aba"] { border: 0; border-radius: 8px; box-shadow: none; min-height: 36px; }
body #ped-raiz [data-ped="aba"].btn-primary { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
body .rep-bulk-bar { grid-template-columns: auto auto minmax(160px,1fr) auto auto; min-height: 56px; padding: 12px 16px; background: var(--surface-2); border: 0; border-radius: 10px; box-shadow: none; }
body :is(.rep-bulk-count,.rep-result-meta,.rep-subline) { font-size: 12px; }

/* 05 — Listas e tabelas: linhas leves, ações alinhadas, dados preservados. */
body .table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); font-size: 13px; }
body .table :is(th,td) { padding: 10px 12px; height: 42px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
body .table th { font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); text-transform: none; letter-spacing: 0; }
body .table th:first-child, body .table th:last-child { border-left: 0; border-right: 0; border-radius: 0; }
body .table tbody tr:hover { background: var(--hover); }
body :is(.table-wrap,.ind-table-wrap,.rel-table-wrap,.maino-table-wrap) { max-width: 100%; overflow-x: auto; border-radius: 12px; overscroll-behavior-x: contain; }
body .rep-master-list-v32 { gap: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
body .rep-master-card-v32 { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px; }
body .rep-master-card-v32:last-child { border-bottom: 0; border-radius: 0 0 14px 14px; }
body .rep-master-card-selected { background: var(--brand-tint); box-shadow: inset 3px 0 var(--brand); }
body .rep-name-line h3 { font-size: 15px; }
body .rep-master-meta-v32 { padding: 12px 0; margin: 8px 0; gap: 12px; border: 0; background: transparent; }
body .rep-master-meta span { font-size: 12px; color: var(--text-2); }
body .rep-master-meta b { font-size: 13px; }
body :is(.rep-master-system,.rep-maino-line) { font-size: 12px; }
body :is(.rel-history-row,.cfg-history-user-row,.rep-carteira-row) { padding: 12px; border-radius: 8px; }

/* 06 — Controles e estados. Mantém as cores semânticas dos status. */
body .btn { min-height: 40px; height: auto; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: none; line-height: 1.35; }
body .btn-sm { min-height: 32px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
body .btn-primary { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
body .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
body .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text-2); }
body .btn-ghost:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
body .btn:active:not(:disabled) { transform: translateY(1px); }
body :is(.btn,.input,.select,.textarea):disabled { cursor: not-allowed; opacity: .65; }
body :is(.input,.select,.textarea,.rep-filter-shell .input,.rep-filter-shell .select) { min-height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--text); background: var(--control-bg); box-shadow: none; }
body .textarea { min-height: 96px; resize: vertical; }
body :is(.input,.select,.textarea):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
body :is(.input,.textarea)::placeholder { color: var(--placeholder); opacity: 1; }
body .field-label { color: var(--text-2); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
body .field-help { font-size: 12px; color: var(--text-3); opacity: 1; }
body .badge { min-height: 24px; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; box-shadow: none; }
body :is(.rep-form-grid,.cfg-form-grid) { gap: 16px; }
body :is(.rep-perm-item,.cfg-history-detail-row) { padding: 12px; border-color: var(--border); border-radius: 8px; }

/* 07 — Modais, configuração, relatórios e operação. */
body .modal { padding: 24px; background: var(--overlay); backdrop-filter: blur(4px); }
body .modal-box { max-width: min(960px,100%); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: auto; }
body .modal-title { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); font-size: 22px; }
body :is(.modal-actions,.login-modal-actions,.cfg-form-actions) { padding-top: 16px; gap: 8px; border-top: 1px solid var(--border); flex-wrap: wrap; }
body .cfg-grid { gap: 20px; align-items: start; }
body .cfg-card-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
body .cfg-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
body .cfg-history-toolbar { padding: 12px; background: var(--surface-2); border: 0; }
body .cfg-history-tabs { padding: 4px; gap: 4px; background: var(--surface-3); }
body .cfg-history-tab { min-height: 36px; font-size: 12px; border-radius: 8px; }
body .cfg-history-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
body .cfg-history-user { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
body .rel-layout { gap: 20px; }
body :is(.rel-order,.rel-rep-grid > div,.ped-family-panel,.ped-tax-panel,.ped-status-panel) { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; }
body .ped-detail-head { padding-bottom: 16px; gap: 16px; }
body .ped-detail-actions { gap: 8px; padding: 16px 0; }
body .hc3-period { align-items: center; }
body .hc3-network { padding: 20px; }
body .hc3-section-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
body :is(.hc3-rank-row,.hc3-manage-row) { font-size: 13px; padding-top: 12px; padding-bottom: 12px; }
body :is(.hc3-modal,.hc3-drawer) { background: var(--surface); color: var(--text); border-color: var(--border); }
body .hc3-modal { border-radius: 20px; }
body .venda-card { padding: 16px; }
body .venda-barra { background: var(--surface); border-color: var(--border); border-radius: 14px; }
body .venda-campo { min-height: 40px; border-radius: 10px; background: var(--control-bg); color: var(--text); border-color: var(--border-strong); }
body :is(.maino-resource,.apr-ajuste-item,.apr-senha-item) { border-color: var(--border); box-shadow: none; }

/* 08 — Login: composição editorial, com formulário sem caixas aninhadas. */































body .ind-kpi::after { content: none; }
body .ind-kpi strong { margin: 4px 0; }

body[data-device="mobile"]:not(.odem-tv-mode) .app-shell { grid-template-columns: minmax(0,1fr); grid-template-areas: "topbar" "content"; }
body[data-device="mobile"]:not(.odem-tv-mode) .sidebar { inset: 0 auto 0 0; width: min(86vw,300px); height: 100dvh; border-radius: 0 20px 20px 0; }

/* 09 — Responsividade fluida; o drawer segue o estado definido pelo app. */
body[data-device="desktop"]:not(.odem-tv-mode) .sidebar { width: var(--sidebar-w); transform: none; }
@media (max-width: 1200px) {
  body .rep-filter-primary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .rep-filter-primary .rep-filter-search { grid-column: 1 / -1; }
  body .rep-bulk-bar { grid-template-columns: 1fr 1fr; }
  body .rep-bulk-action { grid-column: 1 / -1; }
  body .rep-master-meta-v32 { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body[data-device="mobile"]:not(.odem-tv-mode) .app-shell { grid-template-columns: minmax(0,1fr); grid-template-areas: "topbar" "content"; }
  body[data-device="mobile"]:not(.odem-tv-mode) .sidebar { inset: 0 auto 0 0; width: min(86vw,300px); height: 100dvh; padding: max(20px,env(safe-area-inset-top,0px)) 16px 24px; border-radius: 0 20px 20px 0; }
  body .rep-filter-advanced-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .cfg-grid { grid-template-columns: minmax(0,1fr); }
  
  
  
  
  
  
  
  
}
@media (max-width: 640px) {
  :root { --topbar-h: 64px; --content-pad-x: 16px; }
  body:not(.odem-tv-mode) .topbar { padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); gap: 8px; }
  body .topbar-heading { display: flex; flex: 1; }
  body .topbar-eyebrow { font-size: 9px; }
  body #topbar-titulo { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
  body .topbar-actions { gap: 4px; }
  body .topbar-account-copy { display: none; }
  body .topbar-account { width: 40px; min-width: 40px; padding: 2px; }
  body .topbar-avatar { width: 32px; height: 32px; }
  body .topbar-user-menu { position: fixed; top: 68px; right: 12px; }
  body[data-device="mobile"]:not(.odem-tv-mode) .content { padding: 20px 16px max(32px,env(safe-area-inset-bottom,0px)); }
  body :is(.ind-head h1,.rep-page-title h1,.hc3-head h1,.cfg-head h1) { font-size: 24px; }
  body :is(.card,.ind-panel,.hc3-section) { padding: 16px; }
  body :is(.ind-kpis,.rep-master-summary-v32,.rel-kpis,.hc3-kpis) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body :is(.ind-kpi,.rep-stat,.rel-kpi,.hc3-kpi) { padding: 12px; min-height: 80px; border-bottom: 1px solid var(--border); }
  body :is(.ind-kpi,.rep-stat,.rel-kpi,.hc3-kpi):nth-child(even) { border-inline-end: 0; }
  body :is(.ind-kpi strong,.ind-kpi b,.rep-stat-copy b,.rel-kpi b,.hc3-kpi strong) { font-size: 22px; }
  body .rep-stat { grid-template-columns: minmax(0,1fr); gap: 8px; }
  body .rep-stat-icon { width: 28px; height: 28px; }
  body .rep-filter-primary, body .rep-filter-advanced-grid { grid-template-columns: minmax(0,1fr); }
  body .rep-filter-actions { width: 100%; display: flex; flex-wrap: wrap; }
  body .rep-filter-actions .btn { flex: 1; min-height: 44px; }
  body .rep-master-meta-v32 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .rep-bulk-bar { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  body :is(.btn,.input,.select) { min-height: 44px; }
  body :is(.input,.select,.textarea) { font-size: 16px; }
  body .btn-sm { min-height: 36px; }
  body .ped-create-actions { width: 100%; flex-wrap: wrap; }
  body .ped-create-actions .btn { flex: 1 1 140px; }
  body #ped-raiz .card > div:has(> #ped-busca) { grid-template-columns: minmax(0,1fr); }
  body #ped-raiz .card > div:has(> #aba-ativos) { width: 100%; }
  body .modal { padding: 0; align-items: flex-end; }
  body .modal-box { width: 100%; max-height: calc(100dvh - 24px); padding: 20px 16px max(24px,env(safe-area-inset-bottom,0px)); border-radius: 20px 20px 0 0; }
  body .modal-title { font-size: 20px; }
  body :is(.rep-form-grid,.cfg-form-grid,.venda-ajuste-grid) { grid-template-columns: minmax(0,1fr); }
  body .hc3-period { align-items: stretch; }
  
   /* Conteúdo institucional decorativo, aria-hidden na base. */
  
  
  
  
  
  
  
}
@media (max-height: 600px) and (min-width: 901px) {
  
  
  
  
}
@media (prefers-reduced-motion: reduce) {
  body :is(.btn,.nav-item,.rep-master-card,.login-card-wrap) { transition: none; animation: none; }
}

/* ODEM 33.1.1 — Login comercial. Composição única, sem skins sobrepostas. */
body .login-page {
  --login-panel: #fff;
  --login-bg: #f3f4f7;
  --login-text: #171a22;
  --login-muted: #5b6473;
  --login-line: #d7dce5;
  --login-input: #f7f8fa;
  --login-red-start: #a72438;
  --login-red-end: #c03344;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr);
  gap: 0; padding: clamp(16px,3vw,48px);
  background: radial-gradient(ellipse at 12% 12%,rgba(192,51,68,.10),transparent 52%),var(--login-bg);
  color: var(--login-text);
}
body[data-theme="dark"] .login-page {
  --login-panel: #191c23; --login-bg: #0d1015; --login-text: #f6f7fa;
  --login-muted: #bcc5d3; --login-line: #3b4350; --login-input: #222731;
  --login-red-start: #751a2b; --login-red-end: #bd3044;
}
body .login-brand-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: clamp(32px,4.6vw,72px);
  border-radius: 28px 0 0 28px; border: 0;
  background: linear-gradient(145deg,var(--login-red-start),var(--login-red-end));
  color: #fff; box-shadow: 0 24px 64px rgba(61,13,23,.12);
}
body .login-brand-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size: 64px 64px; opacity: .4;
  mask-image: linear-gradient(transparent,black);
}
body .login-brand-panel::after {
  content: ''; position: absolute; z-index: -1; right: -12%; top: 4%;
  width: 78%; height: 45%; pointer-events: none; opacity: .24;
  background: linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.8));
  clip-path: polygon(0 82%,25% 60%,45% 66%,76% 23%,64% 23%,64% 12%,96% 12%,96% 44%,85% 44%,85% 30%,48% 79%,27% 73%,0 95%);
  animation: odem-sales-drift 9s ease-in-out infinite alternate;
}
body .login-brand-glow { position: absolute; z-index: -2; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; filter: blur(28px); opacity: .45; }
body .login-brand-glow-a { top: -160px; left: -120px; background: #ee7382; animation: odem-sales-drift 12s ease-in-out infinite alternate; }
body .login-brand-glow-b { bottom: -200px; right: -100px; background: #6c0a22; }
body .login-brand-content { position: relative; max-width: 580px; }
body .login-brand-mark { width: 60px; height: 60px; object-fit: contain; margin-bottom: clamp(32px,6vh,64px); }
body .login-brand-kicker { display: inline-block; font-size: 11px; letter-spacing: .16em; font-weight: 700; color: #fff; padding: 8px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(78,0,14,.14); }
body .login-brand-panel h1 { font-size: clamp(32px,3.4vw,54px); line-height: 1.08; letter-spacing: -.04em; margin: 24px 0 20px; font-weight: 750; color: #fff; }
body .login-brand-panel p { max-width: 420px; font-size: 15px; line-height: 1.6; color: #ffe9ed; }
body .login-brand-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
body .login-brand-features span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(62,0,14,.16); color: #fff; }
body .login-brand-features span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
body .login-brand-foot { position: relative; margin-top: 48px; font-size: 11px; color: #ffe9ed; }
body .login-access-panel { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 88px clamp(24px,4vw,64px) 40px; border: 1px solid var(--login-line); border-left: 0; border-radius: 0 28px 28px 0; background: var(--login-panel); box-shadow: 0 24px 64px rgba(17,24,39,.06); }
body .login-access-top { position: absolute; top: 24px; right: 24px; }
body .login-theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--login-line); border-radius: 10px; background: var(--login-input); color: var(--login-text); font-size: 12px; font-weight: 600; cursor: pointer; }
body .login-theme-btn svg { width: 18px; height: 18px; fill: currentColor; }
body .login-theme-btn:hover { border-color: var(--brand); }
body .login-card-wrap { width: min(100%,400px); margin: 0 auto; }
body .login-card { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body .login-logo-wrap { display: flex; justify-content: flex-start; margin-bottom: 32px; }
body .login-logo-wrap img { width: 156px; height: auto; max-height: 80px; object-fit: contain; }
body .login-heading { margin-bottom: 28px; text-align: left; }
body .login-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--brand-ink); margin-bottom: 8px; }
body .login-heading h2 { font-size: clamp(26px,2.4vw,34px); line-height: 1.15; letter-spacing: -.035em; color: var(--login-text); }
body .login-heading p { margin-top: 12px; color: var(--login-muted); font-size: 14px; line-height: 1.5; }
body .login-card .field { margin-bottom: 20px; }
body .login-card .field-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--login-text); }
body[data-theme] .login-page .login-input { width: 100%; height: 48px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--login-line); border-radius: 10px; color: var(--login-text); background: var(--login-input); font-size: 16px; box-shadow: none; }
body .login-input::placeholder { color: var(--login-muted); opacity: .85; }
body[data-theme] .login-page .login-input:focus { border-color: var(--brand); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
body .login-password-wrap { position: relative; }
body[data-theme] .login-page .login-password-wrap .login-input { padding-right: 88px; }
body .login-password-toggle { position: absolute; inset: 4px 4px 4px auto; min-width: 72px; padding: 8px; border: 0; border-radius: 8px; color: var(--login-text); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
body .login-password-toggle:hover { background: var(--surface-3); }
body .login-submit { width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 20px; border: 1px solid #c03344; border-radius: 10px; color: #fff; background: #c03344; font-size: 15px; font-weight: 700; box-shadow: 0 8px 20px rgba(192,51,68,.20); transition: background 140ms,box-shadow 140ms; }
body .login-submit:hover { background: #a72a3a; border-color: #a72a3a; box-shadow: 0 10px 24px rgba(192,51,68,.28); }
body .login-submit:disabled { box-shadow: none; }
body .login-help-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
body .login-link { min-height: 36px; padding: 4px 0; border: 0; background: transparent; color: var(--brand-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
body .login-link:hover { text-decoration: underline; }
body .login-help-row > span { font-size: 11px; color: var(--login-muted); }
body .login-footer-note { margin: 28px 0 0; text-align: center; font-size: 11px; color: var(--login-muted); }
body .login-install-card { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; align-items: center; margin-top: 24px; padding: 16px; border: 1px solid var(--login-line); border-radius: 12px; background: var(--login-input); }
body .login-install-icon img { width: 36px; height: 36px; border-radius: 8px; }
body .login-install-copy { display: grid; gap: 4px; }
body .login-install-copy strong { font-size: 13px; color: var(--login-text); }
body .login-install-copy span { font-size: 12px; color: var(--login-muted); }
body .login-install-btn { grid-column: 1 / -1; }
body .login-install-modal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
body .login-install-modal-head .modal-title { margin: 0; padding: 0; border: 0; }
body .login-install-steps { display: grid; gap: 16px; }
body .login-install-step { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; }
body .login-install-step > b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-tint); color: var(--brand-ink); }
body .login-install-step strong,body .login-install-step span { display: block; font-size: 13px; line-height: 1.5; }
body .login-install-step span { margin-top: 4px; color: var(--text-2); }
body .login-modal-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
body .login-page input:-webkit-autofill { -webkit-text-fill-color: var(--login-text); box-shadow: 0 0 0 1000px var(--login-input) inset; caret-color: var(--login-text); }
@keyframes odem-sales-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-12px,-16px,0); } }
@media (max-width: 1050px) {
  body .login-page { grid-template-columns: minmax(0,1fr) minmax(340px,1fr); padding: 20px; }
  body .login-brand-panel { padding: 32px; }
  body .login-access-panel { padding: 80px 28px 32px; }
}
@media (max-width: 760px) {
  body .login-page { display: flex; flex-direction: column; padding: 16px; padding-top: max(16px,env(safe-area-inset-top,0px)); padding-bottom: max(16px,env(safe-area-inset-bottom,0px)); }
  body .login-brand-panel { flex: 0 0 auto; padding: 24px; border-radius: 20px 20px 0 0; }
  body .login-brand-content { width: 100%; }
  body .login-brand-mark { width: 36px; height: 36px; margin-bottom: 16px; }
  body .login-brand-kicker { font-size: 10px; padding: 6px 10px; }
  body .login-brand-panel h1 { font-size: clamp(26px,5.4vw,36px); max-width: 520px; margin: 16px 0 0; }
  body .login-brand-panel p,body .login-brand-features,body .login-brand-foot { display: none; }
  body .login-brand-panel::after { top: 0; right: -10%; height: 100%; width: 60%; opacity: .2; }
  body .login-access-panel { flex: 1 0 auto; padding: 76px 24px 28px; border: 1px solid var(--login-line); border-top: 0; border-radius: 0 0 20px 20px; }
  body .login-access-top { top: 16px; right: 20px; }
  body .login-logo-wrap { margin-bottom: 24px; }
  body .login-logo-wrap img { width: 132px; }
  body .login-heading h2 { font-size: 28px; }
}
@media (max-width: 400px) {
  body .login-page { padding: 8px; }
  body .login-brand-panel { padding: 20px; }
  body .login-access-panel { padding: 76px 20px 24px; }
  body .login-heading h2 { font-size: 26px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  body .login-page { padding: 16px; }
  body .login-brand-mark { margin-bottom: 24px; }
  body .login-brand-panel h1 { font-size: 34px; }
  body .login-brand-foot { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body .login-brand-panel::after,body .login-brand-glow-a { animation: none; }
  body .login-submit { transition: none; }
}


/* ODEM 33.6.0 — Central de Gestão responsiva */
@media(max-width:1050px){.cfgx-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cfgx-account-grid{grid-template-columns:1fr}.cfgx-health{grid-template-columns:repeat(2,minmax(0,1fr))}.cfgx-permission-grid{grid-template-columns:1fr}.cfgx-password{grid-template-columns:1fr 1fr}.cfgx-password>div{grid-column:1/-1}}
@media(max-width:700px){.cfgx-hero{flex-direction:column}.cfgx-hero>div:last-child{width:100%;justify-content:flex-start}.cfgx-summary{grid-template-columns:1fr 1fr}.cfgx-section-head{grid-template-columns:20px minmax(0,1fr)}.cfgx-section-badge{display:none}.cfgx-section-actions{position:static;padding:0 16px 12px}.cfgx-user-toolbar{grid-template-columns:1fr 120px}.cfgx-user-toolbar .btn{grid-column:1/-1}.cfgx-user-row{grid-template-columns:40px minmax(0,1fr)}.cfgx-user-actions{grid-column:1/-1;justify-content:flex-start;padding-left:52px}.cfgx-password{grid-template-columns:1fr}.cfgx-health{grid-template-columns:1fr 1fr}.cfgx-form-grid{grid-template-columns:1fr}.cfgx-drawer{width:100vw}.cfgx-permission-grid{grid-template-columns:1fr}}
@media(max-width:460px){.cfgx-summary{grid-template-columns:1fr}.cfgx-health{grid-template-columns:1fr}.cfgx-section-body{padding:14px}.cfgx-user-toolbar{grid-template-columns:1fr}.cfgx-user-toolbar .select{width:100%}}

/* ODEM 33.6.0 — Home Centers ecossistema responsivo */
@media(max-width:1180px){.hc6-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.hc6-kpis.secondary{grid-template-columns:repeat(3,minmax(0,1fr))}.hc6-client-list article{grid-template-columns:30px minmax(0,1fr) 90px 130px}}
@media(max-width:850px){.hc6-hero{flex-direction:column}.hc6-hero>div:last-child{justify-content:flex-start}.hc6-source-strip{flex-wrap:wrap}.hc6-source-strip>div{flex-basis:100%}.hc6-filters{grid-template-columns:1fr 1fr}.hc6-filters .grow{grid-column:1/-1}.hc6-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hc6-networks{grid-template-columns:1fr}.hc6-section-head{align-items:flex-start;flex-direction:column}.hc6-tools{width:100%}.hc6-tools input{width:100%;min-width:0}.hc6-client-list article{grid-template-columns:30px minmax(0,1fr) 110px}.hc6-client-list article>span{display:none}}
@media(max-width:520px){.hc6-filters{grid-template-columns:1fr}.hc6-filters .grow{grid-column:auto}.hc6-kpis,.hc6-kpis.secondary{grid-template-columns:1fr}.hc6-client-list article{grid-template-columns:28px minmax(0,1fr)}.hc6-client-list article>strong{grid-column:2;text-align:left}.hc6-table-wrap{border-left:0;border-right:0;border-radius:0;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}}

/* ODEM 33.6.0 — Home Centers: colunas por prioridade, sem rolagem horizontal */
@media(max-width:1350px){
  .hc6-products-table th:nth-child(10),.hc6-products-table td:nth-child(10),
  .hc6-products-table th:nth-child(11),.hc6-products-table td:nth-child(11){display:none}
}
@media(max-width:1050px){
  .hc6-products-table th:nth-child(6),.hc6-products-table td:nth-child(6),
  .hc6-products-table th:nth-child(7),.hc6-products-table td:nth-child(7){display:none}
  .hc6-products-table th:nth-child(2),.hc6-products-table td:nth-child(2){width:30%}
  .hc6-products-table th:nth-child(3),.hc6-products-table td:nth-child(3){width:20%}
}
@media(max-width:760px){
  .hc6-products-table th:nth-child(8),.hc6-products-table td:nth-child(8){display:none}
  .hc6-products-table th:nth-child(1),.hc6-products-table td:nth-child(1){width:18%}
  .hc6-products-table th:nth-child(2),.hc6-products-table td:nth-child(2){width:38%}
  .hc6-products-table th:nth-child(3),.hc6-products-table td:nth-child(3){width:24%}
  .hc6-products-table th:nth-child(4),.hc6-products-table td:nth-child(4){width:10%}
  .hc6-products-table th:nth-child(5),.hc6-products-table td:nth-child(5){width:20%}
  .hc6-pipeline-table th:nth-child(3),.hc6-pipeline-table td:nth-child(3),
  .hc6-flow-table th:nth-child(5),.hc6-flow-table td:nth-child(5),
  .hc6-flow-table th:nth-child(6),.hc6-flow-table td:nth-child(6){display:none}
}
@media(max-width:520px){
  .hc6-products-table th:nth-child(3),.hc6-products-table td:nth-child(3),
  .hc6-products-table th:nth-child(9),.hc6-products-table td:nth-child(9){display:none}
  .hc6-products-table th:nth-child(1),.hc6-products-table td:nth-child(1){width:20%}
  .hc6-products-table th:nth-child(2),.hc6-products-table td:nth-child(2){width:42%}
  .hc6-products-table th:nth-child(4),.hc6-products-table td:nth-child(4){width:14%}
  .hc6-products-table th:nth-child(5),.hc6-products-table td:nth-child(5){width:24%}
  .hc6-pipeline-table th:nth-child(2),.hc6-pipeline-table td:nth-child(2),
  .hc6-pipeline-table th:nth-child(5),.hc6-pipeline-table td:nth-child(5),
  .hc6-flow-table th:nth-child(4),.hc6-flow-table td:nth-child(4){display:none}
}