/* ==========================================================================
   MGX — SIMULADOR DE COMISSÃO DO TIKTOK SHOP
   Escrito em 23/09/2026. Par de `fragmentos/simulador.html` + `mgx-simulador.js`.

   Identidade: preto #000, azul da marca #00A7FF (claro #4DC3FF), texto #fff,
   apoio #D4D4D8, secundário #8A8A94, verde de sucesso #22C55E, raio 1.25rem.
   Títulos em Montserrat 800/900, texto em Outfit — as duas famílias que a
   página já carrega. Nenhuma fonte, biblioteca ou CDN novo.

   COMPOSIÇÃO POR LARGURA (doutrina §1 — celular é composição, não pilha):

     360–767   painel de resultado GRUDADO no topo (position: sticky) com os
               três números lado a lado em 3 colunas; controles correm por
               baixo. O resultado fica à vista enquanto o dedo arrasta — que é
               a razão de a peça existir.
     768–1023  mesma coluna, mas o painel vira faixa horizontal (número grande
               à esquerda, trinca à direita) e os controles vão a 2 colunas.
     1024+     duas colunas: controles à esquerda (em 2 colunas internas),
               painel à direita, grudado, acompanhando a rolagem.

   Zero rolagem lateral em qualquer largura. Nenhum `overflow-x: hidden` de
   curativo: os estouros foram resolvidos na origem (min-width: 0 nos filhos de
   grade e `overflow-wrap` no texto).

   ATENÇÃO na integração: `position: sticky` morre se QUALQUER ancestral tiver
   `overflow` diferente de `visible`. Se o painel não grudar depois de inserido
   na página, o culpado é um contêiner do construtor acima — não esta folha.
   ========================================================================== */

.mgxsim {
  /* --- identidade --- */
  --mgxsim-azul: #00A7FF;
  --mgxsim-azul-claro: #4DC3FF;
  --mgxsim-verde: var(--ihub-azul, #00A7FF);   /* era verde #22C55E: fora da identidade do iHub (23/09/2026) */
  --mgxsim-texto: #ffffff;
  --mgxsim-apoio: #D4D4D8;
  --mgxsim-fraco: #8A8A94;
  --mgxsim-borda: rgba(255, 255, 255, 0.10);
  --mgxsim-borda-forte: rgba(255, 255, 255, 0.16);
  --mgxsim-campo: rgba(255, 255, 255, 0.045);
  --mgxsim-raio: 1.25rem;
  --mgxsim-raio-p: 0.7rem;

  /* distância do topo quando o painel gruda. Se a página ganhar uma barra
     fixa, quem integra sobe este valor — em um lugar só. */
  --mgxsim-topo: 0.75rem;

  position: relative;
  isolation: isolate;
  display: block;
  background: #000;
  color: var(--mgxsim-texto);
  font-family: 'Outfit', system-ui, sans-serif;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: clamp(1rem, 5vw, 5rem);
  /* respiro de aparelho com recorte (iPhone deitado) */
  padding-inline-start: max(clamp(1rem, 5vw, 5rem), env(safe-area-inset-left));
  padding-inline-end: max(clamp(1rem, 5vw, 5rem), env(safe-area-inset-right));
}

.mgxsim *,
.mgxsim *::before,
.mgxsim *::after { box-sizing: border-box; }

/* granulação de fundo: acabamento que tira a cara de gradiente liso de
   template (doutrina §12). SVG embutido, nunca arquivo externo; nunca sobre
   texto, ícone ou foto. */
.mgxsim__grao {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

.mgxsim__caixa {
  position: relative;
  z-index: 1;
  max-inline-size: 78rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */
.mgxsim__cabeca {
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
  max-inline-size: 46rem;
}

.mgxsim__titulo {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  line-height:1.1;
  letter-spacing: -0.025em;
  color: var(--mgxsim-texto);
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

.mgxsim__linha {
  font-size: 1rem;
  line-height:1.6;
  color: var(--mgxsim-apoio);
  margin: 0;
  max-inline-size: 60ch;
}
.mgxsim__linha strong { color: var(--mgxsim-texto); font-weight:600; }

/* --------------------------------------------------------------------------
   CORPO — a grade que muda de composição por largura
   -------------------------------------------------------------------------- */
.mgxsim__corpo {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   PAINEL DE RESULTADO
   No celular e no tablet ele gruda no topo. Fundo OPACO de propósito: o
   conteúdo passa por baixo enquanto a pessoa rola, e vidro fosco
   (backdrop-filter) aqui só deixaria o número ilegível.
   -------------------------------------------------------------------------- */
.mgxsim__painel {
  position: sticky;
  top: var(--mgxsim-topo);
  z-index: 3;
  display: grid;
  gap: 0.85rem;
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  border: 1px solid var(--mgxsim-borda-forte);
  border-radius: var(--mgxsim-raio);
  /* fundo levemente azulado, contido na caixa — não é aura espalhada */
  background: linear-gradient(180deg, #0C141C 0%, #08080B 78%);
  box-shadow:
    inset 0 1px 0 rgba(0, 167, 255, 0.34),
    0 20px 44px -26px rgba(0, 0, 0, 0.95);
  min-inline-size: 0;
}

.mgxsim-res__rotulo {
  margin: 0 0 0.1rem;
  font-size: 1rem;
  font-weight:400;
  color: var(--mgxsim-apoio);
  line-height:1.35;
}

.mgxsim-res__numero {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: clamp(2.1rem, 1.35rem + 3.3vw, 3.4rem);
  line-height:1.1;
  letter-spacing: -0.03em;
  color: var(--mgxsim-verde);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* os três números secundários: 3 colunas já em 360px */
.mgxsim-trinca {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.mgxsim-trinca__item {
  min-inline-size: 0;
  display: grid;
  align-content: start;
  gap: 0.1rem;
  padding: 0.5rem 0.45rem;
  border: 1px solid var(--mgxsim-borda);
  border-radius: var(--mgxsim-raio-p);
  background: rgba(255, 255, 255, 0.035);
}

.mgxsim-trinca__valor {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: 1.125rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--mgxsim-texto);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.mgxsim-trinca__rotulo {
  font-size: 0.75rem;
  line-height:1.1;
  color: var(--mgxsim-fraco);
  font-weight:400;
}

/* a conta aberta — o que prova o mecanismo.
   Bloco próprio, irmão do painel: no celular vem depois dos controles (o
   painel grudado precisa ficar baixo), no desktop senta embaixo do painel. */
.mgxsim-conta {
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--mgxsim-borda);
  border-radius: var(--mgxsim-raio-p);
  background: rgba(255, 255, 255, 0.022);
}

.mgxsim-conta__titulo {
  margin: 0;
  font-size: 0.875rem;
  font-weight:600;
  color: var(--mgxsim-azul);
  letter-spacing: 0.01em;
}

.mgxsim-conta__linha {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mgxsim-apoio);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mgxsim-conta__linha .mgxsim-n { color: var(--mgxsim-texto); font-weight:600; }
.mgxsim-conta__linha .mgxsim-op { color: var(--mgxsim-azul); padding-inline: 0.12em; }

.mgxsim-conta__nota {
  margin: 0;
  font-size: 0.875rem;
  line-height:1.6;
  color: var(--mgxsim-fraco);
}
.mgxsim-conta__nota strong { color: var(--mgxsim-apoio); font-weight:600; }

/* --------------------------------------------------------------------------
   CONTROLES
   -------------------------------------------------------------------------- */
.mgxsim__controles {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  min-inline-size: 0;
}

.mgxsim-ctrl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.3rem;
  padding: 0.8rem 0.9rem 0.55rem;
  border: 1px solid var(--mgxsim-borda);
  border-radius: var(--mgxsim-raio-p);
  background: rgba(255, 255, 255, 0.022);
  min-inline-size: 0;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.mgxsim-ctrl:focus-within {
  border-color: rgba(0, 167, 255, 0.55);
  background: rgba(0, 167, 255, 0.045);
}

.mgxsim-ctrl__rotulo {
  grid-column: 1;
  font-size: 1rem;
  font-weight:600;
  line-height:1.35;
  color: var(--mgxsim-texto);
  min-inline-size: 0;
}

/* o valor à vista, e editável pelo teclado */
.mgxsim-ctrl__valor {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--mgxsim-borda-forte);
  border-radius: 0.5rem;
  background: var(--mgxsim-campo);
}
.mgxsim-ctrl__fixa {
  font-size: 1rem;
  font-weight:600;
  color: var(--mgxsim-fraco);
  white-space: nowrap;
}
.mgxsim-ctrl__campo {
  /* 16px é o piso: abaixo disso o iOS dá zoom ao focar o campo */
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1rem;
  font-weight:600;
  line-height: 1.6;
  color: var(--mgxsim-azul-claro);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  inline-size: 4.4ch;
  min-inline-size: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
  appearance: none;
}
.mgxsim-ctrl__campo:focus { outline: none; }
.mgxsim-ctrl__valor:focus-within {
  border-color: var(--mgxsim-azul);
  box-shadow: 0 0 0 2px rgba(0, 167, 255, 0.22);
}
/* campos largos (visualizações chega a 200.000) */
.mgxsim-ctrl__campo[data-mgxsim-campo="views"] { inline-size: 7ch; }

.mgxsim-ctrl__dica {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.875rem;
  line-height:1.35;
  color: var(--mgxsim-fraco);
  max-inline-size: 52ch;
}

.mgxsim-ctrl__pontas {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--mgxsim-fraco);
  font-variant-numeric: tabular-nums;
  margin-top: -0.35rem;
}

/* --------------------------------------------------------------------------
   O CONTROLE DESLIZANTE
   Trilho pintado com `background-image` e uma variável de porcentagem que o JS
   escreve — sem pseudo-elemento posicionado, que entraria no scrollWidth do
   pai e faria o medidor acusar "conteúdo cortado".
   As regras de -webkit e -moz ficam SEPARADAS de propósito: juntas num mesmo
   seletor, o navegador descarta a regra inteira.
   -------------------------------------------------------------------------- */
.mgxsim-ctrl__faixa {
  grid-column: 1 / -1;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 44px;          /* alvo de toque de 44px, doutrina de toque */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* pan-y: o dedo deslizando na vertical rola a página; na horizontal, move
     o controle. `manipulation` deixaria o gesto horizontal ambíguo. */
  touch-action: pan-y;
  --mgxsim-pct: 0%;
}
.mgxsim-ctrl__faixa:focus { outline: none; }

.mgxsim-ctrl__faixa::-webkit-slider-runnable-track {
  block-size: 8px;
  border-radius:999px;
  background-image: linear-gradient(90deg,
      var(--mgxsim-azul) 0 var(--mgxsim-pct),
      rgba(255, 255, 255, 0.13) var(--mgxsim-pct) 100%);
}
.mgxsim-ctrl__faixa::-moz-range-track {
  block-size: 8px;
  border-radius:999px;
  background-image: linear-gradient(90deg,
      var(--mgxsim-azul) 0 var(--mgxsim-pct),
      rgba(255, 255, 255, 0.13) var(--mgxsim-pct) 100%);
}

.mgxsim-ctrl__faixa::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 26px;
  block-size: 26px;
  margin-top: -9px;          /* centraliza o pino no trilho de 8px */
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--mgxsim-azul);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  transition: transform 140ms ease;
}
.mgxsim-ctrl__faixa::-moz-range-thumb {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--mgxsim-azul);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  transition: transform 140ms ease;
}

.mgxsim-ctrl__faixa:active::-webkit-slider-thumb { transform: scale(1.16); }
.mgxsim-ctrl__faixa:active::-moz-range-thumb { transform: scale(1.16); }

.mgxsim-ctrl__faixa:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--mgxsim-azul-claro);
  outline-offset: 3px;
}
.mgxsim-ctrl__faixa:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--mgxsim-azul-claro);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .mgxsim-ctrl__faixa:hover::-webkit-slider-thumb { transform: scale(1.1); }
  .mgxsim-ctrl__faixa:hover::-moz-range-thumb { transform: scale(1.1); }
}

/* --------------------------------------------------------------------------
   AÇÃO — o brilho do botão é background-image + background-position animado.
   Nunca pseudo-elemento: ele entra na área de estouro do pai e o medidor
   acusa "conteúdo cortado" num botão que está inteiro.
   -------------------------------------------------------------------------- */
.mgxsim__acoes { display: flex; }

.mgxsim__voltar {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1rem;
  font-weight:600;
  color: var(--mgxsim-apoio);
  min-block-size: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--mgxsim-borda-forte);
  border-radius:999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.03);
  background-image: linear-gradient(105deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(0, 167, 255, 0.28) 50%,
      rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  transition: background-position 620ms ease, color 180ms ease, border-color 180ms ease, transform 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .mgxsim__voltar:hover {
    color: var(--mgxsim-texto);
    border-color: rgba(0, 167, 255, 0.55);
    background-position: -30% 0;
  }
}
.mgxsim__voltar:active { transform: scale(0.98); }
.mgxsim__voltar:focus-visible {
  outline: 2px solid var(--mgxsim-azul-claro);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   AVISO — leitura de verdade, não rodapé miúdo
   -------------------------------------------------------------------------- */
.mgxsim__aviso {
  margin-block-start: clamp(1rem, 2.5vw, 1.6rem);
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(0, 167, 255, 0.28);
  border-left: 3px solid var(--mgxsim-azul);
  border-radius: var(--mgxsim-raio-p);
  background: rgba(0, 167, 255, 0.05);
  display: grid;
  gap: 0.45rem;
}
.mgxsim__aviso-forte {
  margin: 0;
  font-size: 1rem;
  line-height:1.6;
  font-weight:600;
  color: var(--mgxsim-texto);
  max-inline-size: 66ch;
}
.mgxsim__aviso-fraco {
  margin: 0;
  font-size: 0.875rem;
  line-height:1.6;
  color: var(--mgxsim-apoio);
  max-inline-size: 66ch;
}

/* O atributo `hidden` tem de valer mesmo dentro do CSS herdado do construtor
   da página, que redefine `display` em seletores genéricos. */
.mgxsim [hidden] { display: none !important; }

/* Sem valor de curso confirmado, o cartão de retorno sai — e a trinca vira
   dupla, em vez de deixar um buraco na grade de três. */
.mgxsim--sem-retorno .mgxsim-trinca { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* resumo só para leitor de tela */
.mgxsim-apenas-leitor {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   TABLET — 768 a 1023: painel vira faixa horizontal, controles em 2 colunas
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .mgxsim__painel {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
    align-items: center;
    column-gap: 1.25rem;
  }
  .mgxsim-res { grid-column: 1; }
  .mgxsim-trinca { grid-column: 2; }

  .mgxsim__controles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  /* cinco controles em 2 colunas deixariam o quinto órfão: ele ocupa a linha */
  .mgxsim-ctrl--largo { grid-column: 1 / -1; }
  .mgxsim__acoes { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   DESKTOP — 1024+: controles à esquerda, painel grudado à direita
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .mgxsim__corpo {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  }
  /* os controles ocupam as duas linhas da esquerda; painel em cima e conta
     embaixo, na coluna da direita. Assim o painel tem por onde deslizar. */
  .mgxsim__controles { grid-column: 1; grid-row: 1 / span 2; }
  .mgxsim__painel {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);  /* coluna estreita: volta a uma coluna */
    gap: 1rem;
    padding: 1.4rem;
  }
  .mgxsim-conta { grid-column: 2; grid-row: 2; }
  .mgxsim-res, .mgxsim-trinca { grid-column: 1; }
  .mgxsim-trinca { gap: 0.5rem; }
  .mgxsim-trinca__item { padding: 0.65rem 0.6rem; }
}

/* --------------------------------------------------------------------------
   MOVIMENTO — revelar ao entrar na tela, com escalonamento entre irmãos.
   Só `transform` e `opacity`. O estado escondido depende de o motor estar no
   ar: sem JS, `.mgxsim--motor` nunca é marcada e nada fica invisível.
   O painel revela SEM transform de propósito — transform em ancestral de
   elemento grudado é caminho conhecido para `position: sticky` parar de valer.
   -------------------------------------------------------------------------- */
.mgxsim--motor [data-mgxsim-revelar] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.mgxsim--motor [data-mgxsim-revelar].mgxsim-visivel {
  opacity: 1;
  transform: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--mgxsim-atraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .mgxsim--motor [data-mgxsim-revelar] { opacity: 1; transform: none; }
  .mgxsim--motor [data-mgxsim-revelar].mgxsim-visivel { transition: opacity 180ms linear; }
  .mgxsim-ctrl__faixa::-webkit-slider-thumb { transition: none; }
  .mgxsim-ctrl__faixa::-moz-range-thumb { transition: none; }
  .mgxsim__voltar { transition: color 120ms linear; }
}

/* --------------------------------------------------------------------------
   AJUSTE FINO DE 360px — onde a trinca fica mais apertada
   -------------------------------------------------------------------------- */
@media (max-width: 23.4375rem) {
  .mgxsim-trinca { gap: 0.3rem; }
  .mgxsim-trinca__item { padding: 0.45rem 0.35rem; }
  .mgxsim-trinca__rotulo { font-size: 0.75rem; }
  .mgxsim-ctrl { padding-inline: 0.7rem; }
}

/* ==========================================================================
   CELULAR (≤767px): o simulador em ~2 telas (23/09/2026)

   Medido a 360px: 2.218px (2,8 telas) — cinco controles somando 948px, dos
   quais 228px eram as descrições de cada controle; conta aberta 275px;
   aviso 390px. Nada do que decide sai: o rótulo de cada controle já diz o
   que ele é, e a descrição continua na página para leitor de tela.
   ========================================================================== */
@media (max-width: 47.99rem) {
  .mgxsim .mgxsim-ctrl__dica {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  .mgxsim .mgxsim-ctrl {
    padding: 0.9rem 1rem !important;
    gap: 0.55rem !important;
  }
  .mgxsim .mgxsim-ctrl__rotulo { font-size: 0.95rem !important; line-height: 1.25 !important; }
  .mgxsim .mgxsim-ctrl__pontas { font-size: 0.8rem !important; margin-block-start: 0.1rem !important; }
  .mgxsim .mgxsim-conta {
    padding: 0.9rem 1rem !important;
    font-size: 0.9rem !important;
  }
  .mgxsim .mgxsim-conta__linha { line-height: 1.45 !important; }
  .mgxsim :is(.mgxsim__aviso, .mgxsim-aviso) {
    padding: 0.9rem 1rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  .mgxsim :is(.mgxsim__cabeca, header) { margin-block-end: 1rem !important; }
}

/* ==========================================================================
   VERSÃO ENXUTA (23/09/2026)
   · O campo de valor esticava: o tema do construtor dá `width: 100%` a
     input[type=text], e numa coluna `auto` isso empurra o rótulo para
     quatro linhas ("Preço / médio / do / produto"). Largura travada em ch.
   · Celular: controles em duas colunas lado a lado (o quinto ocupa a
     linha), sem as pontas da faixa; a explicação do GMV fica só no desktop.
   ========================================================================== */
.mgxsim .mgxsim-ctrl__campo { width: 6ch !important; inline-size: 6ch !important; min-block-size: 0 !important; }
.mgxsim .mgxsim-ctrl__campo[data-mgxsim-campo="views"] { width: 7.5ch !important; inline-size: 7.5ch !important; }
.mgxsim .mgxsim-ctrl__valor { justify-self: end; }
@media (max-width: 47.99rem) {
  .mgxsim .mgxsim__controles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .mgxsim .mgxsim-ctrl { grid-template-columns: minmax(0, 1fr) !important; padding: 0.75rem !important; gap: 0.4rem !important; }
  .mgxsim .mgxsim-ctrl__valor { grid-column: 1; justify-self: start; }
  .mgxsim .mgxsim-ctrl--largo { grid-column: 1 / -1; }
  .mgxsim .mgxsim__acoes { grid-column: 1 / -1; }
  .mgxsim .mgxsim-ctrl__pontas { display: none !important; }
  .mgxsim .mgxsim-conta__nota { display: none; }
}