/* ===========================================================================
   PORTAL DO CLIENTE

   Reaproveita os tokens e componentes de estilo.css (cores, tipografia, badge,
   botão, cartão) e acrescenta só o que é próprio daqui.

   QUEM USA ISTO está em pé, no almoxarifado, segurando o celular numa mão e a
   embalagem na outra. Então:
     - alvo de toque grande, nunca abaixo de 44px
     - a ação frequente (dar saída) fica a um toque de qualquer tela
     - teclado numérico já aberto, sem campo de texto genérico
     - nada de tabela larga com rolagem lateral
   =========================================================================== */

body.portal {
  background: var(--fundo);
  padding: 0;
  min-height: 100dvh;
}

/* --- Topo ---------------------------------------------------------------- */

.portal-topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding-top: env(safe-area-inset-top);
}
.portal-topo-interno {
  display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 0 auto;
  padding: 11px 16px;
}
.portal-marca { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.portal-marca-icone {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio-p);
  background: var(--primaria-clara);
  color: var(--primaria);
}
.portal-marca-icone .ico { width: 19px; height: 19px; }
/* Com logo, o quadrado vira moldura neutra: fundo tingido brigaria com a
   marca do cliente, que pode ser de qualquer cor. */
.portal-marca-icone.com-logo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  padding: 3px;
  overflow: hidden;
}
.portal-marca-icone.com-logo img { width: 100%; height: 100%; object-fit: contain; }
.portal-marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.portal-marca-texto strong {
  font-size: 14.5px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-marca-texto span {
  font-size: 11.5px; color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-conta {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio-pill);
  border: 1px solid var(--borda);
  color: var(--texto-medio);
  background: var(--superficie-2);
}
.portal-conta .ico { width: 18px; height: 18px; }

/* --- Corpo --------------------------------------------------------------- */

.portal-corpo {
  max-width: 720px;
  margin: 0 auto;
  /* Espaço para a barra inferior não cobrir o último item */
  padding: 16px 16px calc(96px + env(safe-area-inset-bottom));
}
.portal-titulo { margin: 4px 0 14px; }
.portal-titulo h1 { font-size: 22px; letter-spacing: -0.02em; }
.portal-titulo p { color: var(--texto-suave); font-size: 13.5px; margin-top: 3px; }

/* --- Faixa de boas-vindas ------------------------------------------------ */

/* Sangra até as bordas: o `.portal-corpo` tem 16px de folga lateral, e uma
   foto com margem branca em volta vira ilustração de relatório. */
.portal-capa {
  position: relative;
  margin: -16px -16px 16px;
  height: 156px;
  overflow: hidden;
  background: oklch(28% 0.02 165);
}
/* Recorte puxado para cima. Numa faixa baixa o `cover` centralizado pega a
   fatia do meio da foto, que em foto de pessoa é a altura da testa — cabeça
   cortada ao meio parece defeito, não enquadramento. */
.portal-capa img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  display: block;
}
.portal-capa::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    oklch(24% 0.02 165 / .9) 0%,
    oklch(24% 0.02 165 / .5) 50%,
    oklch(24% 0.02 165 / .1) 100%);
}
.portal-capa-texto {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  color: #fff;
}
.portal-capa-texto h1 { font-size: 23px; letter-spacing: -0.02em; }
.portal-capa-texto p {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; margin-top: 5px;
  color: oklch(100% 0 0 / .88);
}
.capa-contador {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: var(--raio-pill);
  background: var(--vermelho); color: #fff;
  font-size: 13px; font-weight: 700;
}

/* --- Tela vazia com foto ------------------------------------------------- */

.vazio-com-foto { overflow: hidden; }
.vazio-com-foto img {
  width: 100%; height: 150px;
  object-fit: cover; display: block;
  border-bottom: 1px solid var(--borda);
}

.portal-secao {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 22px 0 10px;
}
.portal-secao h2 { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.portal-secao a { font-size: 12.5px; font-weight: 600; }

/* --- Navegação inferior -------------------------------------------------- */

/* A barra e `fixed`, entao mora no cabecalho no HTML mas aparece embaixo aqui.
   No PC ela volta para o fluxo e vira barra superior, sem marcacao duplicada. */
.portal-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
/* A bipagem em serie so existe com leitor USB, que e coisa de PC */
.portal-nav a.so-pc { display: none; }
.portal-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 8px;
  font-size: 10.5px; font-weight: 600;
  color: var(--texto-fraco);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.portal-nav a .ico { width: 21px; height: 21px; }
.portal-nav a.ativo { color: var(--primaria); }
.portal-nav-icone { position: relative; display: grid; place-items: center; }
.portal-nav-contador {
  position: absolute; top: -5px; right: -9px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--raio-pill);
  background: var(--vermelho); color: #fff;
  font-size: 10px; font-weight: 700;
}

/* O botão de escanear é a ação mais frequente e por isso é o único que sai
   do plano da barra. */
.portal-nav a.destaque .portal-nav-icone {
  width: 50px; height: 50px; margin-top: -18px;
  border-radius: var(--raio-pill);
  background: var(--primaria); color: #fff;
  box-shadow: 0 5px 14px oklch(60% 0.142 158 / .38);
}
.portal-nav a.destaque .ico { width: 24px; height: 24px; }
.portal-nav a.destaque { color: var(--texto-medio); }

/* Cartão inteiro clicável */
.cartao-toque {
  display: block; text-decoration: none; color: inherit;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.cartao-toque:hover { border-color: var(--borda-forte); background: var(--superficie-2); }

/* --- Cartão de item ------------------------------------------------------ */

.item-cartao {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 13px 15px;
  margin-bottom: 9px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.item-cartao:active { transform: scale(.99); }
.item-cartao.urgente { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.item-cartao.atencao { border-color: var(--laranja-borda); background: var(--laranja-fundo); }

.item-topo { display: flex; align-items: flex-start; gap: 12px; }
.item-nome { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; line-height: 1.3; }
.item-codigo { font-size: 11.5px; color: var(--texto-fraco); font-weight: 500; margin-top: 2px; }

.item-saldo { text-align: right; flex-shrink: 0; line-height: 1.15; }
.item-saldo strong { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-saldo span { display: block; font-size: 11px; color: var(--texto-fraco); margin-top: 1px; }

.item-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 11px;
}
.item-previsao { font-size: 12px; color: var(--texto-suave); }

/* Barra de quanto resta em relação ao mínimo. O número sozinho não diz se
   12 kg é muito ou pouco para ESTE item. */
.item-barra {
  height: 5px; margin-top: 10px;
  background: oklch(26% 0.014 165 / .09);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.item-barra > span {
  display: block; height: 100%;
  border-radius: var(--raio-pill);
  background: var(--primaria);
  transition: width var(--medio) var(--curva);
}
.item-barra > span.baixo { background: var(--laranja); }
.item-barra > span.critico { background: var(--vermelho); }

/* --- Foto do item -------------------------------------------------------- */

.item-foto {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  overflow: hidden;
}
.item-foto img { width: 100%; height: 100%; object-fit: contain; }
.item-foto.vazia span {
  font-size: 20px; font-weight: 700; color: var(--texto-fraco);
}

/* No celular a foto entra na linha do nome, como um avatar */
.item-cartao { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.item-cartao .item-topo { grid-column: 2; }
.item-cartao .item-barra,
.item-cartao .item-rodape { grid-column: 1 / -1; }

.item-sub { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 3px; }
.item-marca {
  font-size: 11px; font-weight: 650;
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--superficie-2);
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}
.item-cartao.urgente .item-marca,
.item-cartao.atencao .item-marca { background: var(--superficie); }

/* --- Busca, filtros e categorias ----------------------------------------- */

.itens-busca { display: flex; gap: 7px; margin-bottom: 12px; }
.itens-busca input { flex: 1; }

.itens-filtros {
  display: flex; gap: 7px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 10px;
  scrollbar-width: none;
}
.itens-filtros::-webkit-scrollbar { display: none; }
.itens-filtros .atalho { white-space: nowrap; }

.itens-categorias {
  display: flex; gap: 7px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 12px;
  scrollbar-width: none;
}
.itens-categorias::-webkit-scrollbar { display: none; }

.chip-categoria {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; white-space: nowrap;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-medio);
  text-decoration: none;
  transition: all var(--rapido) var(--curva);
}
.chip-categoria .ico { width: 15px; height: 15px; color: var(--cor-cat, var(--texto-fraco)); }
.chip-categoria:hover { border-color: var(--borda-forte); }
.chip-categoria.ativo {
  border-color: var(--primaria); background: var(--primaria-clara); color: var(--primaria);
}
.chip-categoria.ativo .ico { color: var(--primaria); }

.chip-contador, .chip-alerta {
  min-width: 18px; padding: 1px 5px;
  border-radius: var(--raio-pill);
  font-size: 10.5px; font-weight: 700; text-align: center;
}
.chip-contador { background: var(--superficie-2); color: var(--texto-fraco); }

/* Ponto, e não número: o contador ao lado já é a quantidade de itens, e dois
   números no mesmo chip seriam ambíguos. Aqui só marca "tem coisa a repor". */
.chip-alerta {
  width: 7px; height: 7px; min-width: 0; padding: 0;
  border-radius: 50%;
  background: var(--vermelho);
}

.itens-controles {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.itens-ordem { display: flex; gap: 14px; font-size: 12.5px; }
.itens-ordem a { color: var(--texto-fraco); text-decoration: none; font-weight: 600; }
.itens-ordem a.ativo { color: var(--texto); text-decoration: underline; text-underline-offset: 4px; }

.itens-visual { display: flex; gap: 3px; }
.itens-visual a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--raio-p);
  color: var(--texto-fraco);
}
.itens-visual a .ico { width: 16px; height: 16px; }
.itens-visual a.ativo { background: var(--superficie-2); color: var(--primaria); }

/* --- Agrupamento por categoria ------------------------------------------- */

.grupo-categoria { margin-bottom: 22px; }
.grupo-cabecalho {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}
.grupo-cabecalho .ico { width: 17px; height: 17px; color: var(--cor-cat, var(--texto-fraco)); }
.grupo-cabecalho h2 { flex: 1; font-size: 14.5px; font-weight: 650; }
.grupo-contagem { font-size: 11.5px; color: var(--texto-fraco); }

/* --- Grade com fotos ----------------------------------------------------- */

.itens-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.itens-grade .item-cartao {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 14px 12px;
}
.itens-grade .item-foto {
  width: 100%; height: 96px;
  margin: 0 auto 10px;
  background: var(--superficie);
}
.itens-grade .item-topo { grid-column: 1; flex-direction: column; align-items: center; gap: 6px; }
.itens-grade .item-nome { text-align: center; font-size: 13px; }
.itens-grade .item-sub { justify-content: center; }
.itens-grade .item-saldo { text-align: center; }
.itens-grade .item-rodape { flex-direction: column; gap: 6px; }
.itens-grade .item-previsao { text-align: center; }

/* --- Ações grandes ------------------------------------------------------- */

.acoes-grandes { display: grid; gap: 10px; margin: 16px 0; }
.acoes-grandes.duas { grid-template-columns: 1fr 1fr; }
.acao-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; min-height: 74px; padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: 13.5px; font-weight: 650;
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.acao-grande:active { transform: scale(.985); }
.acao-grande .ico { width: 22px; height: 22px; color: var(--primaria); }
.acao-grande.primaria {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
}
.acao-grande.primaria .ico { color: #fff; }

/* --- Teclado numérico ---------------------------------------------------- */

.campo-numero { margin: 14px 0; }
.campo-numero label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 7px;
}
.campo-numero-linha { display: flex; align-items: stretch; gap: 9px; }
.campo-numero input {
  flex: 1; min-width: 0;
  font-size: 30px; font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 12px;
  height: auto;
}
.campo-numero-unidade {
  display: grid; place-items: center;
  padding: 0 16px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-weight: 650; color: var(--texto-suave);
  white-space: nowrap;
}
.atalhos-numero { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.atalho-numero {
  padding: 8px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  font-size: 13px; font-weight: 600;
  color: var(--texto-medio);
  cursor: pointer;
}
.atalho-numero:active { background: var(--primaria-clara); border-color: var(--primaria); }

/* --- Câmera -------------------------------------------------------------- */

.leitor {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  background: oklch(22% 0.012 165);
  aspect-ratio: 3 / 4;
  max-height: 58vh;
  margin-bottom: 14px;
}
.leitor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.leitor-alvo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.leitor-alvo::before {
  content: '';
  width: 62%; aspect-ratio: 1;
  border: 3px solid oklch(100% 0 0 / .85);
  border-radius: 18px;
  box-shadow: 0 0 0 2000px oklch(22% 0.012 165 / .45);
}
.leitor-aviso {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, oklch(22% 0.012 165 / .85));
  color: #fff; font-size: 12.5px; text-align: center;
}

.lidos { display: grid; gap: 8px; }
.lido {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--verde-borda);
  background: var(--verde-fundo);
  border-radius: var(--raio-p);
  animation: lido-entrou var(--medio) var(--curva);
}
.lido .ico { width: 17px; height: 17px; color: var(--verde-texto); flex-shrink: 0; }
.lido-nome { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; }
.lido-qtd { font-weight: 700; font-variant-numeric: tabular-nums; }

@keyframes lido-entrou {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lido { animation: none; }
}

/* --- Histórico do item --------------------------------------------------- */

.linha-mov {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
}
.linha-mov:last-child { border-bottom: none; }
.linha-mov-icone {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio-pill);
  background: var(--superficie-2);
  color: var(--texto-suave);
}
.linha-mov-icone .ico { width: 15px; height: 15px; }
.linha-mov-icone.entrada { background: var(--verde-fundo); color: var(--verde-texto); }
.linha-mov-icone.saida   { background: var(--laranja-fundo); color: var(--laranja-texto); }
.linha-mov-icone.ajuste  { background: var(--azul-fundo); color: var(--azul-texto); }
.linha-mov-texto { flex: 1; min-width: 0; line-height: 1.3; }
.linha-mov-texto strong { font-size: 13.5px; font-weight: 600; }
.linha-mov-texto span { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.linha-mov-valor { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.linha-mov-valor.mais  { color: var(--verde-texto); }
.linha-mov-valor.menos { color: var(--texto-medio); }

/* ===========================================================================
   PEDIDO URGENTE

   No celular é uma pilha: carrinho em cima (quem chega aqui veio do scanner),
   catálogo embaixo. No PC vira duas colunas com o carrinho fixo à direita —
   montar o pedido deixa de ser ida e volta entre telas.
   =========================================================================== */

/* `minmax(0, 1fr)` e não a coluna implícita: a faixa de categorias rola na
   horizontal, e uma trilha de grade dimensionada por min-content adotaria a
   largura da faixa inteira, empurrando a página para os lados. */
.pedido-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* --- Carrinho ------------------------------------------------------------ */

.carrinho-caixa { overflow: hidden; }

.carrinho-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
}
.carrinho-cabecalho h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650;
}
.carrinho-cabecalho .ico { width: 17px; height: 17px; color: var(--primaria); }
.carrinho-cabecalho span { font-size: 12px; color: var(--texto-fraco); }

.carrinho-vazio { padding: 22px 16px; text-align: center; }
.carrinho-vazio > p { font-size: 13.5px; color: var(--texto-suave); }
.carrinho-vazio .pequeno { margin-top: 4px; line-height: 1.45; }
.carrinho-vazio .botao { width: 100%; margin-top: 13px; }
.carrinho-vazio form + .pequeno { margin-top: 7px; }
.carrinho-vazio .so-pc { display: none; }

.carrinho-linhas { padding: 2px 16px; }

/* Duas fileiras por item: nome em cima, quantidade e valor embaixo. Numa
   coluna de 380px não cabem quatro colunas legíveis lado a lado. */
.carrinho-linha {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}
.carrinho-linha:last-child { border-bottom: none; }
.carrinho-linha .item-foto { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; }
.carrinho-info { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.3; }
.carrinho-info strong { display: block; font-size: 13.5px; font-weight: 650; }
.carrinho-info span { font-size: 11.5px; color: var(--texto-fraco); }
.carrinho-linha > .acao-icone { grid-column: 3; grid-row: 1; }
.carrinho-qtd { grid-column: 2; grid-row: 2; }
.carrinho-linha-total {
  grid-column: 3; grid-row: 2;
  font-weight: 700; font-size: 13.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Zerar é como se tira um item, então a linha precisa parecer desligada
   antes do envio — senão o total muda e nada na lista explica por quê. */
.carrinho-linha.zerada { opacity: .45; }
.carrinho-linha.zerada .carrinho-linha-total { text-decoration: line-through; }

/* Campo com a unidade colada: "2,5 kg" num campo só, sem legenda separada */
.carrinho-qtd, .catalogo-qtd { position: relative; }
.carrinho-qtd input, .catalogo-qtd input {
  width: 100%; padding-right: 44px;
  text-align: right;
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.carrinho-qtd span, .catalogo-qtd span {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 600; color: var(--texto-fraco);
  pointer-events: none;
}
.carrinho-qtd input { height: 38px; }

.carrinho-rodape { padding: 14px 16px 16px; border-top: 1px solid var(--borda); }
.carrinho-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.carrinho-total span { font-size: 13px; color: var(--texto-suave); }
.carrinho-total strong {
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.carrinho-rodape .pequeno { margin-top: 5px; line-height: 1.45; }
.carrinho-rodape .campo { margin: 13px 0 11px; }
.carrinho-enviar { width: 100%; }
.carrinho-nota { text-align: center; margin-top: 9px; }

/* Linha de item que ainda não tem preço: ele pediu por escrito e a resposta
   é nossa. Sem número no lugar do valor, para não parecer que já custa zero. */
.carrinho-linha.linha-livre .item-foto { background: var(--laranja-fundo); }
.carrinho-linha.linha-livre .item-foto .ico {
  width: 16px; height: 16px; color: var(--laranja-texto);
}
.marca-livre {
  font-size: 11px; font-weight: 650; white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--raio-pill);
  background: var(--laranja-fundo);
  color: var(--laranja-texto);
  border: 1px solid var(--laranja-borda);
}

/* --- Pedir item que não está na lista ------------------------------------ */

.pedido-livre {
  margin-top: 14px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
}
.pedido-livre > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  font-size: 13.5px; font-weight: 650;
  color: var(--texto-medio);
  cursor: pointer;
}
.pedido-livre > summary .ico { width: 16px; height: 16px; color: var(--primaria); }
.pedido-livre[open] > summary { border-bottom: 1px solid var(--borda); }

.livre-form { padding: 14px 16px 16px; }
.livre-form > .pequeno { margin: 0 0 12px; line-height: 1.45; }
.livre-form .campo { margin-bottom: 11px; }
.livre-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 84px;
  gap: 11px;
}
@media (max-width: 559px) {
  .livre-campos { grid-template-columns: minmax(0, 1fr) 1fr; }
  .livre-campos .campo:first-child { grid-column: 1 / -1; }
}

/* --- Sugestão pela previsão ---------------------------------------------- */

.pedido-sugestao {
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--laranja-borda);
  border-radius: var(--raio);
  background: var(--laranja-fundo);
}
.sugestao-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.sugestao-topo strong {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 650; color: var(--laranja-texto);
}
.sugestao-topo .ico { width: 16px; height: 16px; flex-shrink: 0; }
.sugestao-topo p { font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; line-height: 1.4; }

.sugestao-itens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.sugestao-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--laranja-borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  font-size: 12.5px; font-weight: 600; color: var(--texto);
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.sugestao-item small { font-size: 11px; font-weight: 600; color: var(--laranja-texto); }
.sugestao-item .ico { width: 14px; height: 14px; color: var(--texto-fraco); }
.sugestao-item:hover { border-color: var(--laranja); background: var(--laranja-fundo); }

/* --- Catálogo ------------------------------------------------------------ */

.catalogo-cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 11px;
}
.catalogo-cabecalho h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }

.catalogo-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.catalogo-item:hover { border-color: var(--borda-forte); }
.catalogo-item.urgente { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.catalogo-item.urgente .item-foto,
.catalogo-item.urgente .item-marca { background: var(--superficie); }

/* Já está no pedido: some do primeiro plano sem sumir da lista, porque
   trocar a quantidade continua sendo daqui. */
.catalogo-item.no-pedido { border-color: var(--primaria); background: var(--primaria-clara); }
.catalogo-item.confirmado { animation: catalogo-confirma .9s var(--curva); }
@keyframes catalogo-confirma {
  0%   { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); }
  100% { border-color: var(--primaria); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo-item.confirmado { animation: none; }
}

.catalogo-item .item-foto { grid-column: 1; width: 46px; height: 46px; }
.catalogo-info { grid-column: 2; min-width: 0; line-height: 1.3; }
.catalogo-info strong { font-size: 14px; font-weight: 650; }
.catalogo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 4px; }
.catalogo-meta span { font-size: 11.5px; color: var(--texto-fraco); }
.catalogo-meta .item-marca { color: var(--texto-suave); }

.catalogo-tenho { grid-column: 3; text-align: right; line-height: 1.2; white-space: nowrap; }
.catalogo-tenho strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.catalogo-tenho span { display: block; font-size: 10.5px; color: var(--texto-fraco); }
.catalogo-tenho small { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }

/* Quando a ação desce para a linha inteira, ela se encosta à direita em vez
   de esticar: um campo de quantidade de 500px pede um número que não existe. */
.catalogo-acao {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.catalogo-qtd { flex: 0 1 160px; min-width: 0; }
.catalogo-qtd input { height: 40px; }
.catalogo-botao { flex-shrink: 0; height: 40px; }

/* --- PC ------------------------------------------------------------------ */

@media (min-width: 980px) {
  /* Carrinho à direita e fixo: o total e o botão de enviar não podem depender
     de rolar de volta ao topo depois de escolher o décimo item. */
  .pedido-layout {
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 24px;
    align-items: start;
  }
  .pedido-catalogo { grid-column: 1; grid-row: 1; }
  .pedido-carrinho { grid-column: 2; grid-row: 1; position: sticky; top: 84px; }

  .carrinho-vazio .so-celular { display: none; }
  .carrinho-vazio .so-pc { display: inline-flex; }

  /* O carrinho nunca passa da altura da tela: quem rola é a lista de itens,
     por dentro. Sem isto, num notebook de 768px o botão de enviar ficaria
     abaixo da dobra com o carrinho preso no topo — o pior dos dois mundos. */
  .carrinho-caixa {
    display: flex; flex-direction: column;
    max-height: calc(100dvh - 100px);
  }
  .carrinho-caixa > form { display: flex; flex-direction: column; min-height: 0; }
  .carrinho-linhas { flex: 1; min-height: 0; overflow-y: auto; }

  /* Uma linha só por item: no PC cabe, e a lista fica varrível de cima a
     baixo em vez de virar uma pilha de blocos de duas fileiras. */
  .catalogo-item {
    grid-template-columns: 46px minmax(0, 1fr) 116px 224px;
    gap: 16px;
    padding: 10px 16px;
  }
  .catalogo-acao { grid-column: 4; }

  .pedido-sugestao { padding: 16px 18px; }
}

@media (min-width: 1280px) {
  .pedido-layout { grid-template-columns: minmax(0, 1fr) 400px; }
  .catalogo-item { grid-template-columns: 46px minmax(0, 1fr) 130px 244px; }
}

/* --- Bipagem em série (leitor USB, só no PC) ----------------------------- */

.bipar-modos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.bipar-modo {
  padding: 13px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  text-decoration: none; color: inherit;
  transition: all var(--rapido) var(--curva);
}
.bipar-modo strong { display: block; font-size: 14px; font-weight: 650; }
.bipar-modo span {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--texto-fraco); line-height: 1.35;
}
.bipar-modo:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.bipar-modo.ativo {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  box-shadow: 0 0 0 1px var(--primaria);
}
.bipar-modo.ativo strong { color: var(--primaria); }

/* O alvo não é um campo: não há onde clicar, e é isso que ele precisa
   comunicar. Quem opera está olhando a prateleira, não a tela. */
.bipar-alvo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio-g);
  background: var(--superficie);
  transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}
.bipar-alvo-icone {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio);
  background: var(--superficie-2);
  color: var(--texto-suave);
}
.bipar-alvo-icone .ico { width: 26px; height: 26px; }
.bipar-alvo-texto { min-width: 0; line-height: 1.4; }
.bipar-alvo-texto strong { display: block; font-size: 16px; font-weight: 650; }
.bipar-alvo-texto span { font-size: 13px; color: var(--texto-suave); }

.bipar-alvo.ok {
  border-style: solid; border-color: var(--primaria); background: var(--primaria-clara);
}
.bipar-alvo.ok .bipar-alvo-icone { background: var(--primaria); color: #fff; }
.bipar-alvo.erro {
  border-style: solid; border-color: var(--vermelho); background: var(--vermelho-fundo);
}
.bipar-alvo.erro .bipar-alvo-icone { background: var(--vermelho); color: #fff; }
.bipar-alvo.erro .bipar-alvo-texto strong { color: var(--vermelho-texto); }

/* Pulso discreto de "estou esperando leitura" */
.bipar-pulso {
  position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%;
  background: var(--primaria);
  animation: bipar-esperando 2s var(--curva) infinite;
}
.bipar-alvo.ok .bipar-pulso, .bipar-alvo.erro .bipar-pulso { display: none; }
@keyframes bipar-esperando {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

.bipar-manual { margin: 12px 0 4px; }
.bipar-manual summary {
  font-size: 12.5px; font-weight: 600; color: var(--texto-suave); cursor: pointer;
}

.bipar-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 150px 40px;
  align-items: center; gap: 14px;
  padding: 11px 15px;
  margin-bottom: 7px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}
.bipar-linha-info { min-width: 0; line-height: 1.3; }
.bipar-linha-info strong {
  display: block; font-size: 13.5px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bipar-linha-info span { font-size: 11.5px; color: var(--texto-fraco); }
.bipar-linha-saldo { text-align: right; line-height: 1.2; }
.bipar-linha-saldo span { font-size: 13px; font-variant-numeric: tabular-nums; }
.bipar-linha-saldo small { display: block; font-size: 10.5px; color: var(--texto-fraco); }

/* Piscada de confirmação ao somar num item já lido */
.bipar-linha.destacada { animation: bipar-confirma 1s var(--curva); }
@keyframes bipar-confirma {
  0%   { background: var(--primaria-clara); border-color: var(--primaria); }
  100% { background: var(--superficie); border-color: var(--borda); }
}

.bipar-vazio {
  padding: 34px 20px; text-align: center;
  border: 1px dashed var(--borda); border-radius: var(--raio);
  color: var(--texto-fraco);
}
.bipar-vazio .ico { width: 30px; height: 30px; opacity: .5; }
.bipar-vazio p { margin-top: 8px; font-size: 13px; }

.bipar-envio {
  position: sticky; bottom: 16px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; padding: 13px 16px;
  border: 1px solid var(--primaria);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra-g);
}
.bipar-envio-resumo { line-height: 1.3; }
.bipar-envio-resumo strong { display: block; font-size: 15px; font-weight: 700; }
.bipar-envio-resumo span { font-size: 12px; color: var(--texto-fraco); }

.link-limpar {
  border: none; background: none; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
  cursor: pointer;
}
.link-limpar:hover { color: var(--vermelho-texto); }

.bipar-passos { margin: 0; padding-left: 19px; font-size: 13px; line-height: 1.6; }
.bipar-passos li { margin-bottom: 5px; }

.bipar-atalhos { display: grid; gap: 10px; font-size: 12.5px; }
.bipar-atalhos > div { display: flex; align-items: center; gap: 11px; }
.bipar-atalhos span { color: var(--texto-suave); }
kbd {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 3px 7px;
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--superficie-2);
  font-family: inherit; font-size: 11px; font-weight: 600;
}

@media (max-width: 979px) {
  .bipar-linha { grid-template-columns: minmax(0, 1fr) 110px 40px; }
  .bipar-linha-saldo { display: none; }
}

/* --- Financeiro ---------------------------------------------------------- */

.fin-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.fin-cartao {
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}
.fin-cartao.urgente { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.fin-cartao.urgente .fin-valor { color: var(--vermelho-texto); }
.fin-cartao.disponivel { border-color: var(--verde-borda); background: var(--verde-fundo); }
.fin-cartao.disponivel .fin-valor { color: var(--verde-texto); }
.fin-rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.fin-valor {
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.fin-valor.pequeno-valor { font-size: 17px; }
.fin-detalhe { font-size: 11.5px; color: var(--texto-fraco); margin-top: 2px; }

.fin-busca { display: flex; gap: 7px; padding: 0 16px 14px; }
.fin-busca input { flex: 1; }

.fin-titulo { margin-bottom: 12px; overflow: hidden; }
.fin-titulo.cancelado { opacity: .72; }
.fin-titulo-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 15px 17px;
  border-bottom: 1px solid var(--borda);
}
.fin-titulo-nome {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-weight: 650; font-size: 14.5px;
}
.fin-titulo-meta { font-size: 11.5px; color: var(--texto-fraco); margin-top: 3px; }
.fin-titulo-valor { text-align: right; white-space: nowrap; }
.fin-titulo-valor strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.fin-titulo-valor span { display: block; font-size: 11.5px; color: var(--texto-fraco); }

/* Uma parcela por linha. No PC as colunas se alinham entre parcelas de
   títulos diferentes, o que deixa a coluna de valores varrível de cima a
   baixo — que é como se confere uma fatura. */
.fin-parcela {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 170px auto;
  align-items: center; gap: 14px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--borda);
}
.fin-parcela:last-child { border-bottom: none; }
.fin-parcela.atrasada { background: var(--vermelho-fundo); }

.fin-parcela-quando { display: flex; align-items: center; gap: 10px; }
.fin-parcela-num {
  font-size: 11px; font-weight: 600; color: var(--texto-fraco);
  padding: 2px 7px; border-radius: var(--raio-pill);
  background: var(--superficie-2);
}
.fin-parcela-valor { text-align: right; }
.fin-parcela-valor strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.fin-parcela-valor span { display: block; font-size: 11px; color: var(--texto-fraco); }
.fin-parcela-acao { text-align: right; }

/* O aviso e a linha digitável ocupam a linha inteira da grade */
.fin-parcela-aviso, .fin-linha-digitavel { grid-column: 1 / -1; }

.fin-parcela-aviso {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 4px; padding: 10px 12px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 12.5px; color: var(--texto-suave); line-height: 1.45;
}
.fin-parcela-aviso .ico { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.fin-parcela-aviso strong { color: var(--texto); }

.fin-linha-digitavel {
  display: flex; align-items: center; gap: 9px;
  margin-top: 6px; padding: 9px 11px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-p);
}
.fin-linha-digitavel code {
  flex: 1; min-width: 0;
  font-size: 12px; font-variant-numeric: tabular-nums;
  word-break: break-all; line-height: 1.4;
}

.fin-documentos {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding: 11px 17px;
  background: var(--superficie-2);
  font-size: 12px;
}
.fin-doc-info, .fin-doc-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--texto-suave);
}
.fin-doc-link { text-decoration: none; }
.fin-doc-link:hover { color: var(--primaria); }
.fin-doc-info .ico, .fin-doc-link .ico { width: 14px; height: 14px; }

@media (max-width: 719px) {
  .fin-parcela {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .fin-parcela-situacao { grid-column: 1; }
  .fin-parcela-acao { grid-column: 2; }
  .fin-parcela-acao .botao { width: 100%; }
}

/* --- Tablet -------------------------------------------------------------- */

@media (min-width: 700px) and (max-width: 979px) {
  .portal-nav {
    left: 50%; right: auto; bottom: 18px;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 36px));
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-g);
  }
  .acoes-grandes.duas { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================================================
   PC

   Aqui quem usa NAO esta em pe com o celular na mão: está sentado, com teclado,
   mouse e provavelmente um leitor USB de código. Muda o que a tela pode pedir:
     - a navegação sobe para o topo, liberando a base da tela
     - cabe mais informação por linha, então o cartão de item vira linha
     - a bipagem em série aparece, porque só faz sentido com leitor
   =========================================================================== */

@media (min-width: 980px) {
  .portal-topo-interno {
    max-width: 1180px;
    gap: 26px;
    padding: 10px 26px;
  }
  .portal-marca { flex: 0 0 auto; max-width: 300px; }

  /* De barra inferior para navegação no cabeçalho */
  .portal-nav {
    position: static;
    display: flex; gap: 4px;
    flex: 1; min-width: 0;
    background: transparent;
    border-top: none;
    padding-bottom: 0;
  }
  .portal-nav a {
    flex-direction: row; gap: 8px;
    padding: 9px 14px;
    border-radius: var(--raio-pill);
    font-size: 13.5px;
    color: var(--texto-medio);
    transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }
  .portal-nav a .ico { width: 17px; height: 17px; }
  .portal-nav a:hover { background: var(--superficie-2); color: var(--texto); }
  .portal-nav a.ativo { background: var(--primaria-clara); color: var(--primaria); }
  .portal-nav a.so-pc { display: flex; }
  .portal-nav a.so-celular { display: none; }

  /* O botão saliente é gesto de polegar; no mouse vira ruído */
  .portal-nav a.destaque .portal-nav-icone {
    width: auto; height: auto; margin: 0;
    background: transparent; color: inherit; box-shadow: none;
  }
  .portal-nav a.destaque .ico { width: 17px; height: 17px; }
  .portal-nav-contador { top: -7px; right: -10px; }

  .portal-corpo {
    max-width: 1180px;
    padding: 26px 26px 60px;
  }
  .portal-titulo { margin: 0 0 20px; }
  .portal-titulo h1 { font-size: 27px; }
  .portal-titulo p { font-size: 14.5px; }

  /* No PC a faixa ganha altura e cantos, porque aqui ela não encosta na borda
     da tela — o corpo já é uma coluna centrada. */
  .portal-capa {
    margin: 0 0 22px;
    height: 210px;
    border-radius: var(--raio-g);
  }
  .portal-capa-texto { padding: 22px 26px; }
  .portal-capa-texto h1 { font-size: 29px; }
  .portal-capa-texto p { font-size: 15px; margin-top: 7px; }

  .vazio-com-foto img { height: 210px; }

  .acoes-grandes { grid-template-columns: repeat(4, 1fr); margin: 0 0 22px; }

  /* Na grade o cartão volta a ser bloco, com a foto grande em cima */
  .itens-grade { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .itens-grade .item-cartao { grid-template-columns: 1fr; gap: 0; padding: 15px 13px; }
  .itens-grade .item-foto { grid-column: 1; width: 100%; height: 112px; }
  .itens-grade .item-nome,
  .itens-grade .item-saldo,
  .itens-grade .item-barra,
  .itens-grade .item-rodape { grid-column: 1; }
  .itens-grade .item-barra { margin: 10px 0 0; }
  .itens-grade .item-rodape { justify-content: center; margin-top: 10px; }
  .acoes-grandes.duas { grid-template-columns: repeat(4, 1fr); }

  /* Início em duas colunas: a fila do que falta é o assunto principal e fica
     na coluna larga; avisos e histórico acompanham ao lado. */
  .portal-colunas {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}

/* ===========================================================================
   LISTA DE ITENS NO PC

   Antes cada item era um cartão solto: 136px de altura, quatro itens por tela,
   e no meio da faixa um vazio enorme entre o nome e o saldo. Quem abre esta
   tela quer varrer 60 itens e achar dois, não admirar cada um.

   Vira uma lista de verdade: uma moldura só, linhas separadas por fio, e cada
   item numa faixa de ~50px com tudo alinhado em coluna. Alinhamento é o que
   permite ler de cima a baixo sem reler.
   =========================================================================== */

/* 980px e não menos: é onde `.portal-corpo` deixa de ser a coluna de 720px e
   passa a ocupar a tela. Antes disso a lista densa entraria num corpo estreito
   e o nome do produto sobraria em reticências, que é pior que o cartão. */
@media (min-width: 980px) {
  .itens-lista {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    overflow: hidden;
  }

  .itens-lista .item-cartao {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 116px 96px 178px;
    align-items: center;
    gap: 14px;
    padding: 7px 14px;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--borda-suave);
    border-radius: 0;
  }
  .itens-lista .item-cartao:last-child { border-bottom: none; }
  .itens-lista .item-cartao:hover { background: var(--superficie-2); }
  .itens-lista .item-cartao:active { transform: none; }

  /* A faixa inteira tingida seria uma parede vermelha numa lista com sete
     itens em falta. O tom fica só no fundo, sem borda, e o peso do alerta
     volta para o selo. */
  .itens-lista .item-cartao.urgente { background: var(--vermelho-fundo); }
  .itens-lista .item-cartao.atencao { background: var(--laranja-fundo); }

  .itens-lista .item-foto { grid-column: 1; width: 32px; height: 32px; }
  .itens-lista .item-foto.vazia span { font-size: 13px; }

  /* Coluna fixa em cada parte, e não posição automática: a barra só existe
     quando o item tem mínimo cadastrado, e sem isto o item sem mínimo puxaria
     o rodapé para a coluna da barra, desalinhando a linha inteira. */
  .itens-lista .item-topo { display: contents; }
  .itens-lista .item-nome {
    grid-column: 2; grid-row: auto;
    display: flex; align-items: baseline; gap: 9px;
    min-width: 0; font-size: 13.5px;
  }
  .itens-lista .item-descricao {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Marca e código na mesma linha do nome: em faixa de 50px não cabe segunda
     linha, e a marca é o que separa dois itens de mesma descrição. */
  .itens-lista .item-sub { margin: 0; flex-shrink: 0; gap: 6px; }
  .itens-lista .item-marca { font-size: 10.5px; padding: 1px 6px; }
  .itens-lista .item-codigo { margin: 0; font-size: 10.5px; }

  .itens-lista .item-saldo { grid-column: 3; text-align: right; }
  .itens-lista .item-saldo strong { font-size: 15px; }
  .itens-lista .item-saldo span {
    display: inline; margin-left: 4px; font-size: 11.5px;
  }

  /* `.itens-lista .item-cartao .item-barra`, e não só `.itens-lista
     .item-barra`: a regra do celular manda a barra ocupar a linha inteira com
     o mesmo peso de seletor, e empatar dependeria da ordem do arquivo. Era
     exatamente esse empate que estourava a altura da faixa para 136px. */
  .itens-lista .item-cartao .item-barra { grid-column: 4; margin: 0; height: 4px; }

  .itens-lista .item-cartao .item-rodape {
    grid-column: 5;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 9px; margin: 0; padding: 0; border: none;
  }
  .itens-lista .item-previsao {
    text-align: right; font-size: 11px; white-space: nowrap;
  }
  .itens-lista .item-rodape .badge { padding: 2px 8px; font-size: 10.5px; }
  .itens-lista .item-rodape .badge .ico { width: 12px; height: 12px; }

  /* O cabeçalho do grupo encosta na lista, como título de seção de tabela */
  .grupo-categoria { margin-bottom: 18px; }
  .grupo-cabecalho { margin-bottom: 7px; padding-bottom: 6px; }
}

/* Coluna estreita do Início: a barra sai antes do resto, porque é a parte que
   menos informa quando não há largura para as duas leituras. */
@media (min-width: 980px) and (max-width: 1099px) {
  .portal-colunas .itens-lista .item-cartao {
    grid-template-columns: 32px minmax(0, 1fr) 104px 160px;
  }
  .portal-colunas .itens-lista .item-barra { display: none; }
  .portal-colunas .itens-lista .item-rodape { grid-column: 4; }
}

@media (min-width: 1280px) {
  .portal-corpo, .portal-topo-interno { max-width: 1280px; }
  .itens-lista .item-cartao {
    grid-template-columns: 34px minmax(0, 1fr) 130px 120px 196px;
    padding: 8px 16px;
  }
  .itens-lista .item-foto { width: 34px; height: 34px; }
}