/* ============================================================================
   lote.css — a tela Atualização de Lote (ScreenAtualizaLote.pas).

   Cartao com: cabecalho do lote (tags), abas das 7 alteracoes, o painel da
   aba aberta, a barra de acoes da lista, a lista e o rodape (excluir/gravar).

   Os paineis nascem escondidos; qual aparece (e qual aba fica acesa) vem de
   um <style> que a tela escreve num TGpHtml (ver RenderAba).
   ============================================================================ */

.alt-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.alt-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: var(--primary);
  color: var(--on-primary, #111);
  font-size: .88rem;
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
}
.alt-card-body {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.1rem;
}

/* ---- cabecalho do lote --------------------------------------------------- */
.alt-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.alt-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .6rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  color: var(--text);
  font-size: .72rem;
  font-weight: 600;
}
.alt-tag i { font-size: .65rem; color: var(--primary); }
.alt-tag--leve { color: var(--text-muted); font-weight: 500; }
.alt-tag--ok {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}
.alt-tag--ok i { color: inherit; }
.alt-tag--aviso {
  border-color: rgba(180, 83, 9, .35);
  background: rgba(180, 83, 9, .12);
  color: var(--warning, #b45309);
}
.alt-tag--aviso i { color: inherit; }

.alt-vazio {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
}
.alt-vazio > i { font-size: 1.6rem; color: var(--primary); }
.alt-vazio div { display: flex; flex-direction: column; gap: .15rem; }
.alt-vazio strong { font-size: .86rem; color: var(--text); }
.alt-vazio span { font-size: .76rem; color: var(--text-muted); }

/* ---- abas ------------------------------------------------------------------ */
.alt-abas {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: .15rem;
  scrollbar-width: thin;
}
.alt-aba {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.alt-aba:hover { border-color: var(--primary); }
.alt-aba i { font-size: .72rem; }

/* ---- painel da aba --------------------------------------------------------- */
.alt-painel {
  display: none;
  padding: .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface-2, rgba(127, 127, 127, .05));
}
/* Atualizacao de Estoque: painel unico, sem abas. */
.alt-painel.ate-painel { display: block; }
.alt-painel-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .6rem;
}
.alt-campo { flex: 1 1 12rem; min-width: 0; max-width: 18rem; }
.alt-campo--largo { flex-basis: 28rem; max-width: 36rem; }
.alt-ncmdesc {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.alt-ncmdesc:empty { display: none; }

.alt-painel-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
}
.alt-painel-campos .alt-btn { margin-top: 0; }
/* Ativar/Desativar: so a linha de botoes, sem campos em cima. */
.alt-painel-botoes--so { margin-top: 0; }
.alt-dica {
  margin: .6rem 0 0;
  font-size: .72rem;
  color: var(--text-muted);
}

/* ---- botoes ---------------------------------------------------------------- */
.alt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.alt-btn:hover { border-color: var(--primary); }
.alt-btn--primario {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}
.alt-btn--primario:hover { background: var(--primary-hover); }
.alt-btn--ok { border-color: rgba(21, 128, 61, .5); color: var(--success, #15803d); }
.alt-btn--perigo { border-color: rgba(185, 28, 28, .5); color: var(--danger, #b91c1c); }
.alt-btn--perigo-leve { color: var(--danger, #b91c1c); }
.alt-btn:disabled { opacity: .5; cursor: default; }

.alt-link {
  border: 0;
  background: none;
  padding: .15rem 0;
  color: var(--primary);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}
.alt-link:hover { text-decoration: underline; }
.alt-link--perigo { color: var(--danger, #b91c1c); }

/* ---- barra da lista -------------------------------------------------------- */
.alt-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}
.alt-barra-esp { flex: 1; }
.alt-alvo {
  margin-top: -.4rem;
  font-size: .74rem;
  color: var(--text-muted);
}
.alt-alvo:empty { display: none; }

/* ---- lista ------------------------------------------------------------------- */
.alt-lista {
  max-height: 34rem;
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.alt-lista:empty { display: none; }
/* Cabecalho das colunas: a mesma grade da linha, so some junto com a lista. */
.alt-lista-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, auto) .8rem minmax(5rem, auto) 1.8rem;
  gap: .55rem;
  margin: 0 0 -.55rem;
  padding: 0 .75rem 0 4.8rem;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}
.alt-lista-cab span:nth-child(2),
.alt-lista-cab span:nth-child(4) { text-align: right; }
.alt-card-body:has(.alt-lista:empty) .alt-lista-cab { display: none; }

.alt-item {
  display: grid;
  grid-template-columns: 1.3rem 2.2rem minmax(0, 1fr) minmax(5rem, auto) .8rem minmax(5rem, auto) 1.8rem;
  align-items: center;
  gap: .55rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--card-border);
  font-size: .8rem;
  cursor: pointer;
  user-select: none;
}
.alt-item:last-child { border-bottom: 0; }
.alt-item:hover { background: var(--surface-2, rgba(127, 127, 127, .08)); }
.alt-item.is-sel { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.alt-check { color: var(--text-muted); font-size: 1rem; }
.alt-item.is-sel .alt-check { color: var(--primary); }
.alt-item.is-sel .alt-check::before { content: "\f14a"; font-weight: 900; }

.alt-nr { color: var(--text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.alt-desc { display: flex; flex-direction: column; min-width: 0; }
.alt-desc b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
}
.alt-desc small { font-size: .68rem; color: var(--text-muted); }
.alt-mini {
  display: inline-block;
  margin-left: .25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
}
.alt-mini--aviso { background: rgba(180, 83, 9, .12); color: var(--warning, #b45309); }
.alt-mini--leve { background: none; border: 1px solid var(--card-border); color: var(--text-muted); }

.alt-atual,
.alt-novo {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alt-atual { color: var(--text-muted); }
.alt-novo { color: var(--success, #15803d); font-weight: 700; }
.alt-novo--nada { color: var(--text-muted); font-weight: 400; font-style: italic; font-size: .72rem; }
.alt-ruim { color: var(--warning, #b45309); font-weight: 700; }
.alt-seta { color: var(--text-muted); font-size: .65rem; }

.alt-rm {
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.alt-rm:hover { background: rgba(185, 28, 28, .12); color: var(--danger, #b91c1c); }

/* ---- rodape ------------------------------------------------------------------ */
.alt-rodape {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ---- Promocao (ScreenPromocao.pas) ---------------------------------------- */
.pro-data { max-width: 13rem; }
.pro-data .floating-field,
.pro-data .floating-input { width: 100%; }
.pro-periodo {
  display: block;
  font-size: .66rem;
  font-weight: 500;
  color: var(--text-muted);
}
.pro-rodape-dir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.pro-bloq {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  background: none;
  padding: .3rem 0;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.pro-bloq i { color: var(--text-muted); font-size: 1rem; }
.pro-bloq.is-on i { color: var(--primary); }
.pro-bloq.is-on i::before { content: "\f14a"; font-weight: 900; }
.pro-gravadas { margin-top: 1rem; }
.alt-item.pro-grav {
  grid-template-columns: 6.2rem minmax(0, 1fr) minmax(5rem, auto) .8rem minmax(5rem, auto) 1.8rem;
  cursor: default;
}
.pro-status {
  justify-self: start;
  padding: .1rem .5rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.pro-status--on {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}

/* ---- Inventario (ScreenInventario.pas) --------------------------------------- */
.inv-oculto { display: none !important; }
.inv-modos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.inv-modos .alt-aba.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast, #fff);
}
.inv-lanc { margin-top: .75rem; }
.inv-lanc .alt-painel-campos { align-items: center; }
.inv-cod { max-width: 22rem; }
.inv-qtd { max-width: 11rem; }
.inv-qtdwrap { margin-top: .6rem; }
.inv-prod {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .6rem;
  padding: .55rem .75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--card-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: .82rem;
}
.inv-prod:empty { display: none; }
.inv-prod > i { color: var(--primary); font-size: 1.1rem; }
.inv-prod div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inv-prod small { font-size: .7rem; color: var(--text-muted); }
.inv-est {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inv-est small { font-size: .62rem; font-weight: 600; text-transform: uppercase; }
.inv-lista-cab,
.alt-item.inv-item {
  grid-template-columns: 2.2rem minmax(0, 1fr) 1.6rem minmax(4.5rem, auto) minmax(4.5rem, auto) minmax(5rem, auto) 1.8rem;
}
.inv-lista-cab { padding-left: .75rem; }
.inv-lista-cab span:nth-child(2) { text-align: left; }
.inv-lista-cab span:nth-child(n+4):nth-child(-n+6) { text-align: right; }
.alt-item.inv-item { cursor: default; }
.inv-op { text-align: center; font-weight: 700; color: var(--text-muted); }
.inv-cont {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.alt-item.inv-alterado { background: rgba(185, 28, 28, .08); }
.alt-item.inv-alterado:hover { background: rgba(185, 28, 28, .13); }

/* ---- Transferencia (ScreenTransferencia.pas) ---------------------------------- */
.trf-loja-campo { max-width: 16rem; }
.trf-seta { align-self: center; color: var(--text-muted); }
.inv-est.trf-est-des { padding-left: .7rem; border-left: 1px solid var(--card-border); }
.trf-lista-cab,
.alt-item.trf-item {
  grid-template-columns: 2.2rem minmax(0, 1fr) minmax(3.5rem, auto) minmax(7.5rem, auto) minmax(7.5rem, auto) 1.8rem;
}
.trf-lista-cab { padding-left: .75rem; }
.trf-lista-cab span:nth-child(2) { text-align: left; }
.trf-lista-cab span:nth-child(n+3):nth-child(-n+5) { text-align: right; }
.alt-item.trf-item { cursor: default; }
.trf-loja {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}
.trf-loja b { color: var(--text); }
.trf-loja small { font-size: .62rem; text-transform: uppercase; }
.trf-ori b { color: var(--danger, #b91c1c); }
.trf-des b { color: var(--success, #15803d); }

/* ---- celular ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .alt-card-body { padding: .75rem; }
  .alt-abas { scrollbar-width: none; }
  .alt-abas::-webkit-scrollbar { display: none; }
  .alt-lista-cab { display: none; }
  .alt-campo, .alt-campo--largo { flex-basis: 100%; max-width: none; }
  .alt-item {
    grid-template-columns: 1.3rem minmax(0, 1fr) auto 1.8rem;
    grid-template-areas:
      "chk desc desc rm"
      "chk atual novo rm";
    row-gap: .2rem;
  }
  .alt-check { grid-area: chk; }
  .alt-nr, .alt-seta { display: none; }
  .alt-desc { grid-area: desc; }
  .alt-atual { grid-area: atual; text-align: left; }
  .alt-novo { grid-area: novo; }
  .alt-rm { grid-area: rm; }
  .alt-rodape .alt-btn { flex: 1 1 100%; }
  .pro-data { max-width: none; }
  .pro-rodape-dir { flex: 1 1 100%; }
  .alt-item.pro-grav {
    grid-template-columns: minmax(0, 1fr) auto 1.8rem;
    grid-template-areas:
      "st st rm"
      "desc desc rm"
      "atual novo rm";
  }
  .pro-status { grid-area: st; }
  .inv-cod, .inv-qtd { max-width: none; }
  .inv-lanc .alt-painel-campos .alt-btn { flex: 1 1 100%; }
  .alt-item.inv-item {
    grid-template-columns: 2rem minmax(0, 1fr) auto auto 1.8rem;
    grid-template-areas:
      "op desc desc desc rm"
      "op atual cont novo rm";
  }
  .alt-item.inv-item .alt-nr { display: none; }
  .inv-op { grid-area: op; }
  .inv-cont { grid-area: cont; }
  .trf-loja-campo { max-width: none; }
  .trf-seta { display: none; }
  .alt-item.trf-item {
    grid-template-columns: minmax(0, 1fr) auto auto 1.8rem;
    grid-template-areas:
      "desc desc cont rm"
      "ori des des rm";
  }
  .alt-item.trf-item .alt-nr { display: none; }
  .alt-item.trf-item .alt-desc { grid-area: desc; }
  .alt-item.trf-item .inv-cont { grid-area: cont; }
  .trf-ori { grid-area: ori; align-items: flex-start; }
  .trf-des { grid-area: des; }
}

/* ---- Impressao de Etiquetas (ScreenEtiquetas.pas) ------------------------------ */
.etq-layout { max-width: 24rem; }
.etq-qtd { max-width: 9rem; }
.etq-lista-cab,
.alt-item.etq-item {
  grid-template-columns: 2.2rem minmax(0, 1fr) minmax(5rem, auto) 7rem 1.8rem;
}
.etq-lista-cab { padding-left: .75rem; }
.etq-lista-cab span:nth-child(2) { text-align: left; }
.etq-lista-cab span:nth-child(3) { text-align: right; }
.etq-lista-cab span:nth-child(4) { text-align: center; }
.alt-item.etq-item { cursor: default; }
.etq-preco {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}
.etq-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.etq-passo b {
  min-width: 2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.etq-passo button {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: .7rem;
  cursor: pointer;
}
.etq-passo button:hover { color: var(--primary); border-color: var(--primary); }

@media (max-width: 640px) {
  .etq-layout, .etq-qtd { max-width: none; }
  .alt-item.etq-item {
    grid-template-columns: minmax(0, 1fr) auto 1.8rem;
    grid-template-areas:
      "desc desc rm"
      "preco passo rm";
  }
  .alt-item.etq-item .alt-nr { display: none; }
  .alt-item.etq-item .alt-desc { grid-area: desc; }
  .etq-preco { grid-area: preco; text-align: left; }
  .etq-passo { grid-area: passo; }
}

/* ---- Carga de Balança (ScreenCargaBalanca) ------------------------------ */
.bal-campos { align-items: flex-end; }
.bal-modelo { max-width: 18rem; }
.bal-empresa { max-width: 22rem; }
.bal-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.bal-toggle .fa-square-check { display: none; }
.bal-toggle--on { border-color: var(--primary); }
.bal-toggle--on .fa-square { display: none; }
.bal-toggle--on .fa-square-check { display: inline-block; color: var(--primary); }
.bal-arquivos:empty { display: none; }
.alt-item.bal-item {
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  cursor: default;
}
.bal-ico { color: var(--primary); }
.bal-ign {
  margin-top: .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  max-height: 18rem;
  overflow-y: auto;
}
.bal-ign-tit {
  padding: .5rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--warning, #d97706);
  border-bottom: 1px solid var(--card-border);
}
.bal-ign-lin {
  display: flex;
  flex-direction: column;
  padding: .4rem .75rem;
  font-size: .76rem;
  border-bottom: 1px solid var(--card-border);
}
.bal-ign-lin:last-child { border-bottom: 0; }
.bal-ign-lin small { color: var(--text-muted); }

@media (max-width: 640px) {
  .bal-modelo, .bal-empresa { max-width: none; flex: 1 1 100%; }
  .bal-toggle { flex: 1 1 100%; justify-content: center; }
}

/* ---- Estoque Minimo (ScreenEstoqueMinimo.pas) --------------------------------- */
.emn-loja { max-width: 18rem; }
.emn-lista-cab,
.alt-item.emn-item {
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(5.5rem, auto) minmax(5rem, auto);
}
.emn-lista-cab { padding-left: .75rem; }
.emn-lista-cab span:nth-child(1) { text-align: left; }
.emn-lista-cab span:nth-child(n+2) { text-align: right; }
.alt-item.emn-item { cursor: default; }
.emn-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}
.emn-atual { color: var(--text); font-weight: 600; }
.emn-atual.emn-zero { color: var(--danger, #b91c1c); }
.emn-falta { color: var(--warning, #b45309); font-weight: 700; }
@media (max-width: 640px) {
  .emn-loja { max-width: none; }
  .alt-item.emn-item {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none;
  }
  .alt-item.emn-item .alt-desc { grid-area: auto; grid-column: 1 / -1; }
  .alt-item.emn-item .emn-num { text-align: left; }
}

/* ---- Reposicao entre Lojas (ScreenReposicaoLojas.pas) ------------------------ */
/* O <filtro-data> sozinho na linha (ver .prod-rel-periodo em produto.css). */
.rps-periodo { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.rps-periodo > small { font-size: .7rem; color: var(--text-muted); }
.rps-sel { max-width: 16rem; }
.rps-lista-cab,
.alt-item.rps-item {
  grid-template-columns: 1.3rem minmax(0, 1fr) repeat(4, minmax(4.2rem, auto)) minmax(10.5rem, auto) 5.5rem;
}
.rps-lista-cab { padding-left: .75rem; }
.rps-lista-cab span:nth-child(n+3):nth-child(-n+6) { text-align: right; }
.rps-lista-cab span:nth-child(7) { text-align: center; }
.rps-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}
.rps-des { color: var(--text); font-weight: 600; }
.rps-des.rps-baixo { color: var(--danger, #b91c1c); }
.rps-vend { display: flex; flex-direction: column; align-items: flex-end; color: var(--text); }
.rps-vend small { font-size: .62rem; color: var(--text-muted); }
.rps-base { display: flex; gap: .3rem; justify-content: center; }
.rps-b {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  padding: .2rem .45rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: .68rem;
  cursor: pointer;
  white-space: nowrap;
}
.rps-b b { color: var(--text); font-variant-numeric: tabular-nums; }
.rps-b:hover { border-color: var(--primary); }
.alt-item.rps-por-v .rps-b-v,
.alt-item.rps-por-m .rps-b-m {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text);
}
.rps-qtdw { display: flex; }
.rps-qtd {
  width: 100%;
  padding: .3rem .45rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: .8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rps-qtd:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.alt-item.is-sel .rps-qtd { border-color: var(--primary); font-weight: 700; }
.rps-obs { margin-top: .8rem; }
.rps-resumo { align-self: center; font-size: .8rem; color: var(--text-muted); }
.rps-resumo b { color: var(--text); }
@media (max-width: 640px) {
  .rps-sel { max-width: none; }
  .alt-item.rps-item {
    grid-template-columns: 1.3rem repeat(4, minmax(0, 1fr));
    grid-template-areas: none;
  }
  .alt-item.rps-item .alt-check { grid-area: auto; grid-row: 1 / span 3; }
  .alt-item.rps-item .alt-desc { grid-area: auto; grid-column: 2 / -1; }
  .alt-item.rps-item .rps-num { text-align: left; align-items: flex-start; }
  .alt-item.rps-item .rps-base { grid-column: 2 / span 3; justify-content: flex-start; }
  .alt-item.rps-item .rps-qtdw { grid-column: 5; }
}