/* ==========================================================================
   /lista-de-materiais — o coração do produto (cap. 10.2)
   Carregado só neste template.
   ========================================================================== */

.ipe-lista {
  max-width: 40rem;
}

/* h1 com corpo de rótulo: a hierarquia visual desta tela é a pergunta. */
.ipe-lista__rotulo {
  font-family: var(--fonte-corpo);
  font-stretch: var(--largura-corpo);
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: var(--peso-forte);
  line-height: 1.3;
  color: var(--cor-texto-2);
}

/* -- Progresso ------------------------------------------------------------
   Arcos + texto + porcentagem. Três sinais para a mesma informação: quem não
   distingue as cores lê o texto, quem não lê o texto vê a barra.
   ------------------------------------------------------------------------ */

.ipe-progresso {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e-3) var(--e-4);
  margin-block: var(--e-4) var(--e-8);
}

.ipe-progresso__arcos {
  width: var(--e-12);
  grid-row: span 2;
}

.ipe-progresso__texto {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
  font-weight: var(--peso-forte);
}

.ipe-progresso__trilho {
  height: var(--e-1);
  /* Sobre o chão de cimento, o trilho precisa ser mais escuro que ele para a
     barra preta ter contra o que crescer. */
  background: rgba(0, 0, 0, 0.14);
  border-radius: var(--raio-chip);
  overflow: hidden;
}

.ipe-progresso__barra {
  height: 100%;
  background: var(--cor-texto);
  transition: width var(--dur-media) var(--easing);
}

/* -- Etapas --------------------------------------------------------------- */

.ipe-etapa {
  margin-block-start: var(--e-6);
}

/* A pergunta é a manchete desta tela. */
.ipe-etapa__pergunta {
  display: block;
  padding: 0;
  margin-block-end: var(--e-4);
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-stretch: var(--largura-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  font-size: var(--step-3);

  /* Sem hifenização: a pergunta da etapa tem três ou quatro palavras, e a
     regra global produzia "Como fala-mos com você?". Linha extra é melhor
     que quebra no meio da palavra. */
  hyphens: manual;
  overflow-wrap: break-word;
}

.ipe-etapa__auxiliar {
  margin-block: var(--e-6) var(--e-3);
  font-size: 0.875rem;
  color: var(--cor-texto-2);
}

/* Apoio que vem logo abaixo da pergunta, não separando blocos. */
.ipe-etapa__auxiliar--topo {
  margin-block: 0 var(--e-6);
}

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

.ipe-lista__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-block-start: var(--e-12);
}

.ipe-lista__acoes .ipe-botao--secundario {
  flex: 0 0 auto;
}

.ipe-lista__acoes .ipe-botao--largo {
  flex: 1 1 12rem;
  width: auto;
}

.ipe-lista__rodape {
  margin-block-start: var(--e-4);
  font-size: 0.875rem;
}

.ipe-lista__form .ipe-erro-bloco {
  margin-block-start: var(--e-6);
}

/* -- Rascunho recuperado --------------------------------------------------- */

.ipe-rascunho {
  margin-block-start: var(--e-12);
  padding: var(--e-4);
  background: var(--cor-superficie);
  border-radius: var(--raio-input);
}

.ipe-rascunho__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-block-start: var(--e-4);
}

/* No mobile a ação principal gruda no rodapé da tela. Ela precisa ler como
   camada, não como botão solto por cima do texto: fundo cheio até as bordas,
   borda superior e a única sombra do sistema.
   A barra global de ação não existe aqui — footer.php a suprime. */
@media (max-width: 767px) {
  .ipe-lista__acoes {
    position: sticky;
    inset-block-end: 0;
    z-index: 10;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--e-3) var(--gutter);
    padding-block-end: calc(var(--e-3) + env(safe-area-inset-bottom));
    background: var(--cor-superficie);
    border-block-start: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-elevada);
  }

  /* Espaço para o conteúdo passar por baixo da barra ao rolar. */
  .ipe-lista__rodape {
    padding-block-end: var(--e-8);
  }
}

/* -- Modo de envio: foto ou digitar (adendo, item 19) ---------------------- */

.ipe-envio-modo .ipe-opcao {
  align-items: flex-start;
  padding-block: var(--e-4);
}

.ipe-envio-modo .ipe-opcao span {
  display: grid;
  gap: var(--e-1);
}

.ipe-envio-modo .ipe-opcao small {
  font-size: 0.8125rem;
  color: var(--cor-texto-2);
}

.ipe-envio-painel {
  margin-block-start: var(--e-8);
}

/* O seletor de arquivo nativo é feio em toda parte, mas é o único que abre a
   câmera no Android e a galeria no iPhone. Fica. */
.ipe-campo__arquivo {
  padding: var(--e-3);
  line-height: 1.4;
}

.ipe-campo__arquivo::file-selector-button {
  margin-inline-end: var(--e-3);
  padding: var(--e-2) var(--e-4);
  min-height: var(--e-8);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-botao);
  font-weight: var(--peso-forte);
  cursor: pointer;
}

/* -- Falha de envio -------------------------------------------------------- */

.ipe-falha {
  background: var(--cor-superficie);
}

.ipe-falha:focus {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: var(--foco-offset);
}

.ipe-falha__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
  margin-block-start: var(--e-4);
}