/* ==========================================================================
   Ofertas — o cadastro por passos.
   ==========================================================================
   Tudo daqui consome os tokens do :root de application.css. Nenhum hex solto,
   nenhuma segunda sombra: o sistema comunica por bloco de cor.

   A tela nasce PENSADA PARA O CELULAR — é onde o gerente comercial confere a
   campanha. Por isso a régua rola de lado em vez de quebrar, e cada linha de
   formulário é um cartão empilhado que só vira grade quando há largura.
   ========================================================================== */

/* --- a régua dos passos ------------------------------------------------- */
.regua {
  display: flex;
  gap: var(--spacing-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-24);
}
.regua::-webkit-scrollbar { display: none; }

.regua__passo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-buttons);
  background: var(--surface-card);
  color: var(--text-meta);
  text-decoration: none;
  font-size: var(--text-body-sm);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.regua__passo:hover { color: var(--text-primary); }

.regua__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-tags);
  background: var(--color-cloud-gray);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.regua__passo--pronto { color: #0a5c38; }
.regua__passo--pronto .regua__numero { background: var(--color-mint-wash); color: #0a5c38; }

/* Laranja é o que IMPEDE publicar. Não é erro: é o que ainda falta. */
.regua__passo--pendente { color: #a13312; }
.regua__passo--pendente .regua__numero { background: var(--color-peach-wash); color: #a13312; }

.regua__passo--atual {
  background: var(--surface-dark-brand);
  color: var(--text-on-dark);
  box-shadow: none;
  font-weight: var(--font-weight-medium);
}
.regua__passo--atual .regua__numero { background: rgba(255, 255, 255, 0.18); color: var(--text-on-dark); }
.regua__passo--atual:hover { color: var(--text-on-dark); }

/* --- o cabeçalho do passo ---------------------------------------------- */
.passo-da-oferta { margin-bottom: var(--spacing-16); }
.passo-da-oferta__contagem {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.passo-da-oferta__titulo {
  margin: 2px 0 4px;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  color: var(--text-heading-color);
  font-weight: var(--font-weight-semibold);
}
.passo-da-oferta__chamada {
  margin: 0;
  color: var(--text-meta);
  font-size: var(--text-body-sm);
  max-width: 68ch;
}

/* A coluna "Oferta" carrega nome + descrição; se ficam numa linha só, empurram
   o botão "ver" para fora da tela. Aqui podem quebrar, como o endereço dos
   outros cadastros. A mesma forma serve à coluna "Produto" da revisão: a
   descrição longa quebrava e esticava a tabela inteira além da tela.
   O Chrome ignora max-width em célula no layout automático de tabela — por
   isso o alvo é `width`, que ele respeita: a coluna nasce com 42ch e as
   outras ficam com o resto; quando a tela aperta, ela desce até o min-width. */
.tabela__oferta { width: 42ch; min-width: 24ch; }
.tabela__oferta strong, .tabela__oferta .tabela__nota { white-space: normal; }

/* --- passo 1: a oferta -------------------------------------------------- */
.campo__rotulo {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.oferta-ofertante {
  margin: 0 0 4px;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-heading-color);
}
.oferta-arte__previa {
  max-height: 160px;
  border-radius: var(--radius-cards-sm);
  margin-bottom: var(--spacing-12);
  object-fit: cover;
}

/* --- passo 2: o que a planilha entendeu -------------------------------- */
.leitura__rotulo {
  margin: var(--spacing-12) 0 var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.leitura__colunas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.leitura__duvidas {
  margin: 0;
  padding-left: var(--spacing-20);
  font-size: var(--text-body-sm);
  color: #a13312;
}

/* --- passo 2: a lista de itens ----------------------------------------- */
.itens, .faixas, .destinos, .combo-produtos { list-style: none; margin: 0; padding: 0; }

.item-linha {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-12) 0;
  border-top: 1px solid var(--color-cloud-gray);
}
.item-linha:first-child { border-top: 0; }

/* O destaque do duvidoso. Faixa lateral e fundo de aviso: a linha que precisa
   de olho tem que se achar sem ler. */
.item-linha--conferir {
  background: var(--color-peach-wash);
  border-left: 3px solid var(--color-status-attention);
  padding-left: var(--spacing-12);
  border-radius: var(--radius-lg);
}
.item-linha--nova { border-top: 1px dashed var(--border-mid); }

.item-linha__rotulo {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-meta);
  margin-bottom: 2px;
}
.item-linha__origem {
  margin: 4px 0 0;
  font-size: var(--text-caption);
  color: var(--text-meta);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.item-linha__marca, .marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}
.item-linha__marca input, .marca input { width: auto; }

/* Os campos destas listas ficam fora de `.campo`, e por isso repetem aqui a
   mesma casca de controle do resto do sistema — uma só, para a tela não
   parecer montada por outra pessoa. */
.item-linha select, .item-linha input,
.faixa select, .faixa input,
.destino-linha select, .destino-linha input,
.combo-produto input {
  width: 100%;
  padding: 10px var(--spacing-12);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--text-body);
  background: var(--surface-card);
}
.item-linha input:focus, .item-linha select:focus,
.faixa input:focus, .destino-linha input:focus, .destino-linha select:focus,
.combo-produto input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.item-linha input[type="checkbox"], .marca input[type="checkbox"] { width: auto; padding: 0; }

/* --- passo 2: o lote de fotos ------------------------------------------ */
.lote { margin-top: var(--spacing-16); }
.lote__conta { margin: 0 0 var(--spacing-8); font-size: var(--text-body-sm); color: var(--text-secondary); }
.lote__lista { list-style: none; margin: 0; padding: 0; font-size: var(--text-body-sm); }
.lote__lista li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-cloud-gray);
}
.lote__lista--fraca { color: var(--text-meta); }
.lote__destino { margin-left: auto; color: var(--text-meta); }

/* O que ENTROU no catálogo, depois de gravar. Verde de "resolvido", o mesmo
   significado da `.etiqueta--ok` — e não um cartão novo, porque isto é o
   desfecho do bloco de fotos, não outro assunto. */
.lote--resultado {
  padding: var(--spacing-12);
  border-radius: var(--radius-sm);
  background: var(--color-mint-wash);
}

.lote--resultado .lote__conta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-canopy-green);
}

.lote--resultado .campo__ajuda { margin-bottom: 0; }

/* --- passo 3: a tabela de regras e a escada de preço --------------------- */
/*
 * Era um cartão por produto; virou tabela porque cinquenta cartões empilhados
 * não se conferem. A escada não cabe na linha e abre numa gaveta — uma <tr>
 * extra logo abaixo do item, com `colspan` na largura toda.
 *
 * ATENÇÃO AO `hidden` daqui para baixo, pelo mesmo motivo da fotos.css: regra
 * de autor com `display` apaga o `[hidden]` do navegador. Tudo que o Stimulus
 * esconde nesta tela tem o seu `[hidden]` explícito.
 */
.regras__ferramentas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

.regras__ferramentas .campo { flex: 1 1 260px; margin: 0; }
.regras__contagem { margin: 0; font-size: var(--text-body-sm); color: var(--text-meta); }

/* A barra de ação em bloco. Fundo lavanda porque ela FALA de outra coisa que
   não a tabela: é uma ferramenta apontada para as linhas marcadas, e precisa se
   distinguir dos campos que se editam um a um. */
.regras__lote {
  padding: var(--spacing-12);
  margin-bottom: var(--spacing-16);
  border-radius: var(--radius-sm);
  background: var(--color-lilac-wash);
  border: 1px solid var(--border-hairline);
}

.regras__lote[hidden] { display: none; }

.regras__lote-titulo {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.regras__lote-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--spacing-8);
}

.regras__lote-campos .campo { margin: 0; }

.regras__lote-escada { margin-top: var(--spacing-12); }
.regras__lote-escada > summary {
  cursor: pointer;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.regras__lote-degraus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.regras__degrau { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8); }
.regras__degrau .campo { margin: 0; }

.tabela--regras th, .tabela--regras td { vertical-align: middle; }
.tabela--regras input[type="number"] { width: 5.5rem; padding: 6px var(--spacing-8); }
.regras__marca { width: 2.5rem; text-align: center; }
.regras__marca input { width: auto; }

.regra[hidden] { display: none; }
.regra__produto .tabela__nota { display: block; font-variant-numeric: tabular-nums; }

/* O gatilho da gaveta: o número de faixas É o rótulo. "2 faixas" diz de longe
   quais itens têm escada; um ícone sozinho obrigaria a abrir cada um. */
.regra__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px var(--spacing-8);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--text-primary);
  font-size: var(--text-body-sm);
  cursor: pointer;
}

.regra__gatilho:hover { background: var(--color-cloud-gray); }
.regra__seta { transition: transform 120ms ease; }
.regra__gatilho--aberto .regra__seta { transform: rotate(90deg); }

.regra-escada[hidden] { display: none; }
.regra-escada > td { background: var(--color-sage-wash); }

.escada__titulo { margin: 0 0 var(--spacing-8); font-size: var(--text-body-sm); }
.escada__degraus { list-style: none; margin: 0; padding: 0; }

.escada__degrau {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr)) auto;
  gap: var(--spacing-8);
  align-items: end;
  padding: var(--spacing-8) 0;
  border-top: 1px solid var(--color-cloud-gray);
}

.escada__degrau:first-child { border-top: 0; }
.escada__degrau[hidden] { display: none; }
.escada__degrau .campo { margin: 0; }

.escada__acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-8);
}

.escada__teto { margin: 0; flex: 1 1 260px; }

.faixa {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-8) 0;
  border-top: 1px solid var(--color-cloud-gray);
  align-items: end;
}
.faixa:first-child { border-top: 0; }
.faixa__desconto { margin: 0; font-size: var(--text-caption); }
.faixa__vazia { color: var(--text-meta); }

/* --- passo 4: combos ---------------------------------------------------- */
.combo-linha--novo { border: 1px dashed var(--border-mid); }
.combo-linha__economia { margin: 0 0 var(--spacing-12); font-size: var(--text-body-sm); color: var(--text-meta); }
.combo-linha__remover { margin-top: var(--spacing-12); }

.combo-produto {
  display: grid;
  grid-template-columns: 1fr auto 90px;
  gap: var(--spacing-8);
  align-items: center;
  padding: var(--spacing-8) 0;
  border-top: 1px solid var(--color-cloud-gray);
}
.combo-produto:first-child { border-top: 0; }
.combo-produto__nome { font-size: var(--text-body-sm); margin: 0; }
.combo-produto__avulso { font-size: var(--text-caption); color: var(--text-meta); white-space: nowrap; }

/* --- passo 5: envio ----------------------------------------------------- */
.destino-linha {
  padding: var(--spacing-16) 0;
  border-top: 1px solid var(--color-cloud-gray);
}
.destino-linha:first-child { border-top: 0; }
.destino-linha__campos { border: 0; padding: 0; margin: var(--spacing-12) 0 0; display: grid; gap: var(--spacing-12); }
.destino-linha__travado {
  margin: 0;
  padding: 10px var(--spacing-12);
  border-radius: var(--radius-lg);
  background: var(--color-cloud-gray);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* --- passo 6: revisão --------------------------------------------------- */
.impedimentos ul { list-style: none; padding-left: 0; }
.impedimentos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  padding: 4px 0;
}

.resumo-da-oferta { display: grid; gap: var(--spacing-12); margin: 0; }
.resumo-da-oferta dt {
  font-size: var(--text-caption);
  color: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.resumo-da-oferta dd { margin: 2px 0 0; font-size: var(--text-body); color: var(--text-primary); }
.resumo-da-oferta__descricao { margin: var(--spacing-16) 0 0; color: var(--text-secondary); font-size: var(--text-body-sm); }

.escada { list-style: none; margin: 0; padding: 0; font-size: var(--text-caption); }
.escada li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

.resumo-combos { list-style: none; margin: 0; padding: 0; }
.resumo-combos > li { padding: var(--spacing-12) 0; border-top: 1px solid var(--color-cloud-gray); }
.resumo-combos > li:first-child { border-top: 0; }
.resumo-combos__preco { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.resumo-combos__itens {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--text-meta);
}

.resumo-envio { margin: 0; padding-left: var(--spacing-20); }
.resumo-envio li { padding: 6px 0; }
.resumo-envio__meta { display: block; font-size: var(--text-caption); color: var(--text-meta); }

.publicada { display: flex; align-items: center; gap: 6px; margin: 0; color: #0a5c38; font-size: var(--text-body-sm); }

/* No celular o cabeçalho da oferta QUEBRA em vez de espremer o nome da
   campanha em quatro linhas de uma palavra: aqui o título é o que identifica a
   tela, e os dois links são secundários. O `:has` mantém a regra presa às
   telas de oferta — o cabeçalho dos outros cadastros não muda. */
@media (max-width: 719px) {
  .cabecalho:has(.cabecalho__acoes--oferta) { flex-wrap: wrap; gap: var(--spacing-12); }
  .cabecalho__acoes--oferta { margin-left: 0; flex: 1 1 100%; }
}

/* No celular a escada empilha: três campos de 110px lado a lado espremem o
   preço a ponto de o "0,0000" não caber. A tabela de regras continua rolando
   dentro da `.rolagem`, que é o padrão de tabela larga do sistema. */
@media (max-width: 719px) {
  .escada__degrau { grid-template-columns: 1fr 1fr; }
  .escada__tirar { grid-column: 1 / -1; justify-self: start; }
  .regras__lote-campos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* --- da largura do celular para cima ------------------------------------ */
@media (min-width: 720px) {
  .item-linha {
    grid-template-columns: minmax(0, 2.4fr) 140px 140px auto;
    align-items: start;
  }
  .faixa { grid-template-columns: 160px 160px 1fr; }
  .destino-linha__campos { grid-template-columns: 90px 120px minmax(0, 1fr) 160px; align-items: start; }
  .destino-linha__campos .campo--largo { grid-column: 1 / -1; }
  .resumo-da-oferta { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}