/* Revisão do Mix — produto fabricado que sai de linha × produto que gira sem OP.
   Espaçamento em múltiplos de 4. Cor é semântica e sempre vem com texto ou
   ícone: âmbar = sugestão de sair de linha, vermelho = falta de pedido,
   azul = informação, verde = nada pendente. Tabelas rolam dentro do próprio
   contêiner; a página nunca rola na horizontal. */
.rmx-page {
  --rmx-ink:    #24313b;
  --rmx-muted:  #6b747b;
  --rmx-soft:   #8a949c;
  --rmx-line:   #e2e7eb;
  --rmx-good:   #147a4b;
  --rmx-warn:   #9b6414;
  --rmx-danger: #bd3d3a;
  --rmx-info:   #2f6f9f;
  --rmx-bg:     #f8fafb;
  --rmx-sel:    #eef5fa;
  --rmx-marca:  #a23b36;
  color: var(--rmx-ink);
  min-width: 0;
}
.rmx-recarregando .rmx-corpo { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ── Cabeçalho + frescor ── */
.rmx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.rmx-eyebrow { color: var(--rmx-marca); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rmx-head h2 { margin: 4px 0; font-size: 1.5rem; font-weight: 750; }
.rmx-head p { margin: 0; color: var(--rmx-muted); font-size: .86rem; max-width: 72ch; }
.rmx-fresh { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--rmx-line);
             border-radius: 8px; background: var(--rmx-bg); font-size: .72rem; color: var(--rmx-muted); }
.rmx-fresh > i { color: var(--rmx-info); font-size: 1rem; }
.rmx-fresh.rmx-atrasado > i { color: var(--rmx-warn); }
.rmx-fresh b { color: var(--rmx-ink); font-weight: 650; }
.rmx-fresh-linhas { display: flex; flex-direction: column; gap: 2px; }
.rmx-fresh button { white-space: nowrap; }

/* ── Avisos (fonte atrasada, trocas aguardando a cópia) ── */
.rmx-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px;
             font-size: .8rem; border: 1px solid; }
.rmx-aviso i { font-size: 1rem; line-height: 1.2; }
.rmx-aviso-info { background: var(--rmx-sel); border-color: #cfe1ee; color: #234f70; }
.rmx-aviso-warn { background: #fdf6ea; border-color: #f0dcb6; color: #6e4a12; }

/* ── KPIs ── */
.rmx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rmx-kpi { position: relative; background: #fff; border: 1px solid var(--rmx-line); border-radius: 10px; padding: 12px 12px 12px 16px;
           overflow: hidden; text-align: left; width: 100%; color: inherit; }
button.rmx-kpi { cursor: pointer; }
button.rmx-kpi:hover { border-color: #c5ced5; }
button.rmx-kpi:focus-visible { outline: 2px solid var(--rmx-info); outline-offset: 1px; }
.rmx-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--rmx-info); }
.rmx-kpi.good::before { background: var(--rmx-good); }
.rmx-kpi.warn::before { background: var(--rmx-warn); }
.rmx-kpi.danger::before { background: var(--rmx-danger); }
.rmx-kpi span { display: block; color: var(--rmx-muted); font-size: .72rem; }
.rmx-kpi strong { display: block; margin: 4px 0; font-size: 1.22rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rmx-kpi.good strong { color: var(--rmx-good); }
.rmx-kpi.warn strong { color: var(--rmx-warn); }
.rmx-kpi.danger strong { color: var(--rmx-danger); }
.rmx-kpi small { display: block; color: var(--rmx-soft); font-size: .68rem; line-height: 1.35; }
.rmx-kpi.rmx-on { border-color: var(--rmx-info); box-shadow: inset 0 0 0 1px var(--rmx-info); }

/* ── Filtros (mesmo desenho da Ficha Técnica) ── */
.rmx-filtros-toggle { display: none; }
.rmx-filtros { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; background: #fff;
               border: 1px solid var(--rmx-line); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.rmx-fgrupo { min-width: 0; border: 1px solid var(--rmx-line); border-top: 3px solid; border-radius: 8px; padding: 8px 12px 12px; }
.rmx-fgrupo-prod { border-top-color: var(--rmx-marca); background: #fdf9f8; }
.rmx-fgrupo-regra { border-top-color: var(--rmx-info); background: #f5f9fc; }
.rmx-fgrupo-tit { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rmx-fgrupo-tit > i { font-size: 1.1rem; line-height: 1; }
.rmx-fgrupo-prod .rmx-fgrupo-tit > i { color: var(--rmx-marca); }
.rmx-fgrupo-regra .rmx-fgrupo-tit > i { color: var(--rmx-info); }
.rmx-fgrupo-tit b { display: block; font-size: .84rem; font-weight: 750; color: var(--rmx-ink); }
.rmx-fgrupo-tit small { display: block; font-size: .7rem; color: var(--rmx-muted); }
.rmx-fgrupo-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.rmx-fgrupo-regra .rmx-fgrupo-campos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.rmx-ms, .rmx-num { position: relative; min-width: 0; }
.rmx-ms-rot, .rmx-num label { display: block; font-size: .7rem; color: var(--rmx-muted); margin-bottom: 2px; }
.rmx-ms-btn { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
              border: 1px solid #cbd3da; border-radius: 6px; background: #fff; padding: 0 8px; font-size: .8rem; color: var(--rmx-ink); }
.rmx-ms-btn:hover { border-color: #9aa5ae; }
.rmx-ms-btn:focus-visible { outline: 2px solid var(--rmx-info); outline-offset: 1px; }
.rmx-ms-btn.rmx-on { border-color: var(--rmx-info); color: var(--rmx-info); font-weight: 650; background: var(--rmx-sel); }
.rmx-ms-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rmx-ms-btn i { font-size: .7rem; color: var(--rmx-soft); flex-shrink: 0; }
.rmx-num-campo { display: flex; align-items: center; height: 32px; border: 1px solid #cbd3da; border-radius: 6px; background: #fff; overflow: hidden; }
.rmx-num-campo:focus-within { outline: 2px solid var(--rmx-info); outline-offset: 1px; }
.rmx-num input { width: 100%; min-width: 0; border: 0; padding: 0 8px; font-size: .8rem; text-align: right;
                 font-variant-numeric: tabular-nums; background: transparent; }
.rmx-num input:focus { outline: none; }
.rmx-num-campo em { font-style: normal; font-size: .72rem; color: var(--rmx-muted); padding: 0 8px; white-space: nowrap; }
.rmx-num.rmx-mudou .rmx-num-campo { border-color: var(--rmx-info); background: var(--rmx-sel); }

.rmx-ms-painel { position: absolute; z-index: 1050; top: calc(100% + 4px); left: 0; width: max(100%, 300px); max-width: calc(100vw - 32px);
                 background: #fff; border: 1px solid var(--rmx-line); border-radius: 8px; padding: 8px;
                 box-shadow: 0 8px 24px rgba(36, 49, 59, .14); }
.rmx-ms-painel.rmx-dir { left: auto; right: 0; }
.rmx-ms-busca { width: 100%; height: 30px; border: 1px solid #cbd3da; border-radius: 6px; padding: 0 8px; font-size: .78rem; margin-bottom: 6px; }
.rmx-ms-ops { max-height: 280px; overflow-y: auto; }
.rmx-ms-op { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: .78rem; cursor: pointer; margin: 0; }
.rmx-ms-op:hover { background: #f3f5f7; }
.rmx-ms-op input { margin-top: 2px; width: 14px; height: 14px; flex-shrink: 0; }
.rmx-ms-op-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rmx-ms-op-n { flex-shrink: 0; color: var(--rmx-muted); font-variant-numeric: tabular-nums; font-size: .72rem; }
.rmx-ms-vazio { padding: 12px 6px; font-size: .74rem; color: var(--rmx-muted); }
.rmx-ms-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--rmx-line);
                 margin-top: 6px; padding-top: 6px; font-size: .68rem; color: var(--rmx-soft); }
.rmx-ms-rodape button { border: 0; background: none; color: var(--rmx-info); font-size: .74rem; font-weight: 650; padding: 2px 4px; }

.rmx-ativos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.rmx-ativos:empty { display: none; }
.rmx-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--rmx-sel); border: 1px solid #cfe1ee;
            color: #234f70; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: .74rem; }
.rmx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38ch; }
.rmx-chip button { border: 0; background: none; color: #234f70; padding: 0 4px; line-height: 1; font-size: .9rem; }
.rmx-link { border: 0; background: none; color: var(--rmx-info); font-size: .74rem; font-weight: 650; padding: 2px 4px; }
.rmx-link:hover { text-decoration: underline; }

/* ── Cards ── */
.rmx-card { background: #fff; border: 1px solid var(--rmx-line); border-radius: 10px; margin-bottom: 16px; min-width: 0; }
.rmx-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px 8px; flex-wrap: wrap; }
.rmx-card-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.rmx-card-head p { margin: 2px 0 0; font-size: .76rem; color: var(--rmx-muted); max-width: 80ch; }
.rmx-cont { font-size: .72rem; color: var(--rmx-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rmx-method { margin: 0; padding: 8px 16px 12px; font-size: .72rem; color: var(--rmx-muted); border-top: 1px solid var(--rmx-line); }
.rmx-method details summary { cursor: pointer; color: var(--rmx-info); font-weight: 600; }
.rmx-method ul { margin: 6px 0 0; padding-left: 18px; }
.rmx-method li { margin-bottom: 2px; }

/* ── Abas da situação ── */
.rmx-sits { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--rmx-line); overflow-x: auto; }
.rmx-sit { border: 0; background: none; padding: 8px 10px; font-size: .8rem; font-weight: 600; color: var(--rmx-muted);
           border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.rmx-sit:hover { color: var(--rmx-ink); }
.rmx-sit.rmx-on { color: var(--rmx-ink); border-bottom-color: var(--rmx-marca); }
.rmx-sit .rmx-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.rmx-sit-sair i { color: var(--rmx-warn); }
.rmx-sit-giro i { color: var(--rmx-danger); }
.rmx-sit-excesso i { color: var(--rmx-info); }
.rmx-sit-saldo i, .rmx-sit-emdia i { color: var(--rmx-soft); }

/* ── Barra da seleção ── */
.rmx-selbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
              padding: 8px 16px; background: #fdf6ea; border-bottom: 1px solid #f0dcb6; font-size: .8rem; }
.rmx-selbar b { font-variant-numeric: tabular-nums; }
.rmx-selbar-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.rmx-busca { padding: 8px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rmx-busca input { flex: 1 1 240px; max-width: 360px; height: 32px; border: 1px solid #cbd3da; border-radius: 6px; padding: 0 8px; font-size: .8rem; }

/* ── Tabelas ── */
.rmx-tabela-wrap { overflow-x: auto; }
.rmx-tabela { width: 100%; border-collapse: collapse; font-size: .78rem; }
.rmx-tabela th { position: sticky; top: 0; background: var(--rmx-bg); color: var(--rmx-muted); font-weight: 650; font-size: .7rem;
                 text-align: left; padding: 8px; border-bottom: 1px solid var(--rmx-line); white-space: nowrap; }
.rmx-tabela td { padding: 8px; border-bottom: 1px solid #eef1f3; vertical-align: top; }
.rmx-tabela .rmx-r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rmx-tabela .rmx-c { text-align: center; width: 32px; }
.rmx-tabela th button { border: 0; background: none; padding: 0; color: inherit; font: inherit; display: inline-flex; gap: 4px; align-items: center; }
.rmx-tabela th.rmx-r button { justify-content: flex-end; width: 100%; }
.rmx-tabela th button i { font-size: .62rem; color: var(--rmx-soft); }
.rmx-tabela th[aria-sort] button { color: var(--rmx-ink); }
.rmx-tabela tbody tr:hover > td { background: #fafbfc; }
.rmx-tabela tr.rmx-marcada > td { background: #fdf6ea; }
.rmx-tabela tr.rmx-marcada:hover > td { background: #fbefda; }
.rmx-clicavel { cursor: pointer; }
.rmx-tabela tr.rmx-ativa > td { background: var(--rmx-sel); }
.rmx-prod { min-width: 220px; max-width: 340px; }
.rmx-prod-lin { display: flex; align-items: flex-start; gap: 2px; }
.rmx-prod b { display: block; font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.rmx-prod small { display: block; color: var(--rmx-soft); font-size: .7rem; }
.rmx-prod-lin small { min-width: 0; }
.rmx-prod-links { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.rmx-atalho { border: 0; background: none; padding: 0; color: var(--rmx-info); font-size: .7rem; font-weight: 400; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rmx-atalho:hover, .rmx-atalho:focus-visible { text-decoration: underline; }
.rmx-motivo { min-width: 200px; max-width: 280px; color: var(--rmx-muted); font-size: .74rem; }
.rmx-sub { display: block; color: var(--rmx-soft); font-size: .68rem; font-weight: 400; }
.rmx-neg { color: var(--rmx-danger); }
.rmx-acao { white-space: nowrap; text-align: right; }
.rmx-expandir { border: 0; background: none; color: var(--rmx-info); padding: 0 4px 0 0; font-size: .8rem; line-height: 1.4; flex-shrink: 0; }
.rmx-expandir[aria-expanded="true"] i { transform: rotate(90deg); }
.rmx-expandir i { display: inline-block; transition: transform .12s; }

.rmx-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 1px 6px; font-size: .68rem; font-weight: 650; white-space: nowrap; }
.rmx-tag-sair    { background: #fdf6ea; color: var(--rmx-warn); }
.rmx-tag-giro    { background: #fbeeee; color: var(--rmx-danger); }
.rmx-tag-excesso { background: var(--rmx-sel); color: var(--rmx-info); }
.rmx-tag-saldo, .rmx-tag-emdia { background: #f1f3f5; color: var(--rmx-muted); }
.rmx-tag-copia   { background: #e9f5ef; color: var(--rmx-good); }
.rmx-tag-falhou  { background: #fbeeee; color: var(--rmx-danger); }

.rmx-cores td { background: #fafbfc; padding: 0 8px 8px 40px; }
.rmx-cores table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.rmx-cores th { font-weight: 600; color: var(--rmx-soft); font-size: .66rem; padding: 4px 6px; border-bottom: 1px solid var(--rmx-line); text-align: left; }
.rmx-cores td td, .rmx-cores td th { background: transparent; }
.rmx-cores td td { padding: 4px 6px; border-bottom: 1px solid #eef1f3; }

.rmx-mais { padding: 8px 16px 12px; text-align: center; }

/* ── Vazio, erro ── */
.rmx-vazio { text-align: center; padding: 28px 16px; color: var(--rmx-muted); }
.rmx-vazio i { font-size: 1.6rem; color: var(--rmx-soft); display: block; margin-bottom: 6px; }
.rmx-vazio.rmx-bom i { color: var(--rmx-good); }
.rmx-vazio b { display: block; color: var(--rmx-ink); font-size: .9rem; margin-bottom: 4px; }
.rmx-vazio span { display: block; font-size: .78rem; max-width: 60ch; margin: 0 auto 10px; }
.rmx-erro { background: #fff; border: 1px solid #f0c9c8; border-left: 4px solid var(--rmx-danger); border-radius: 8px; padding: 16px; }
.rmx-erro b { display: block; color: #7c2725; margin-bottom: 4px; }
.rmx-erro span { display: block; font-size: .8rem; color: var(--rmx-muted); margin-bottom: 10px; }
.rmx-erro details { font-size: .7rem; color: var(--rmx-soft); margin-top: 8px; }
.rmx-carregando { padding: 40px 16px; text-align: center; color: var(--rmx-muted); font-size: .84rem; }

/* ── Diálogo de troca de coleção (abre no <body>: cores literais) ── */
.rmx-dlg { color: #24313b; }
.rmx-dlg p { font-size: .82rem; color: #4d575f; }
.rmx-dlg-grupo { border: 1px solid #e2e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.rmx-dlg-grupo-tit { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: .82rem; }
.rmx-dlg-grupo-tit small { color: #6b747b; font-size: .72rem; }
.rmx-dlg-destino { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .78rem; flex-wrap: wrap; }
.rmx-dlg-destino select { flex: 1 1 200px; max-width: 280px; }
.rmx-dlg-lista { margin: 6px 0 0; padding-left: 18px; font-size: .72rem; color: #6b747b; max-height: 96px; overflow-y: auto; }
.rmx-dlg-nota { font-size: .74rem; color: #6e4a12; background: #fdf6ea; border: 1px solid #f0dcb6; border-radius: 6px; padding: 8px; }

/* ── Telas estreitas ── */
@media (max-width: 1100px) {
  .rmx-filtros { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rmx-head h2 { font-size: 1.25rem; }
  .rmx-fresh { width: 100%; }
  .rmx-filtros { padding: 12px; }
  .rmx-filtros-toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; margin-bottom: 12px; padding: 0 12px;
                        border: 1px solid var(--rmx-line); border-radius: 8px; background: #fff; font-size: .84rem; color: var(--rmx-ink); }
  .rmx-filtros-toggle.rmx-on { border-color: var(--rmx-info); color: var(--rmx-info); font-weight: 650; }
  .rmx-filtros-toggle .bi-chevron-down { margin-left: auto; transition: transform .15s; }
  .rmx-filtros-aberto .rmx-filtros-toggle .bi-chevron-down { transform: rotate(180deg); }
  .rmx-page:not(.rmx-filtros-aberto) .rmx-filtros { display: none; }
  .rmx-fgrupo-campos, .rmx-fgrupo-regra .rmx-fgrupo-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rmx-ms-painel, .rmx-ms-painel.rmx-dir { position: fixed; left: 12px; right: 12px; top: 18vh; width: auto; }
  .rmx-ms-ops { max-height: 50vh; }
  .rmx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rmx-kpi { padding: 8px 8px 8px 12px; }
  .rmx-kpi strong { font-size: 1.05rem; }
  .rmx-card-head, .rmx-busca, .rmx-selbar { padding-left: 12px; padding-right: 12px; }
  .rmx-sits { padding: 0 8px; }
  .rmx-selbar { position: sticky; top: 0; z-index: 5; }
}