.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  padding: 1.2rem 0 0.9rem;
}

.topo .envelope {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.topo img { width: 62px; flex: none; }

.topo .nome { font-size: var(--t-h2); }

.topo .lugar {
  margin: 0.15rem 0 0;
  color: var(--tinta-suave);
  font-size: var(--t-legenda);
}

/* A faixa de situação é a segunda pergunta de quem chega, depois de "tem?".
   Por isso ela é uma barra sólida, não um texto miúdo no rodapé. */
.situacao {
  padding: 0.65rem 0;
  font-weight: 600;
  color: #fff;
  background: var(--folha-escura);
}

.situacao[data-aberto="nao"] { background: var(--indigo); }

.situacao .envelope { display: flex; gap: 0.5rem; align-items: baseline; }

.situacao .ponto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ouro);
  flex: none;
  align-self: center;
}

.busca { padding: 1.1rem 0 0.4rem; }

.filtros {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.filtros button {
  min-height: 40px;
  white-space: nowrap;
  background: var(--superficie);
  border-color: var(--linha);
  color: var(--tinta);
  font-weight: 500;
}

.filtros button[aria-pressed="true"] {
  background: var(--folha-clara);
  border-color: var(--folha);
  color: var(--folha-escura);
  font-weight: 700;
}

.contagem { margin: 0.9rem 0 0.3rem; color: var(--tinta-suave); font-size: var(--t-legenda); }

/* Prateleira: linhas com filete, não cartões com sombra. É mais leve na
   internet de Moju e se parece com o que a coisa é, uma lista de estoque. */
.prateleira { list-style: none; margin: 0; padding: 0; }

.item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linha);
  align-items: start;
}

.item.esgotado { opacity: 0.55; }

.item .foto {
  width: 76px;
  height: 76px;
  border-radius: var(--raio);
  background: var(--folha-clara);
  object-fit: cover;
  display: grid;
  place-items: center;
  color: var(--folha);
  font-family: var(--serifada);
  font-size: var(--t-h2);
  overflow: hidden;
}

.item h3 { margin-bottom: 0.1rem; }

.item .dose { color: var(--tinta-suave); font-size: var(--t-legenda); margin: 0 0 0.4rem; }

/* O número é o herói da linha: é a resposta da única pergunta que trouxe a
   pessoa até aqui. */
.quantia {
  font-family: var(--serifada);
  font-size: var(--t-h2);
  font-weight: 700;
  color: var(--folha-escura);
  line-height: 1.1;
}

.quantia small { font-family: var(--sistema); font-size: var(--t-legenda); font-weight: 500; color: var(--tinta-suave); }

.quantia.pouco { color: var(--ouro-texto); }
.quantia.zero { color: var(--tinta-suave); font-size: var(--t-corpo); }

.acoes { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; flex-wrap: wrap; }

.acoes .contador {
  display: flex;
  align-items: center;
  border: 1px solid var(--folha);
  border-radius: var(--raio);
  overflow: hidden;
}

.acoes .contador button {
  min-width: 46px;
  background: var(--folha-clara);
  color: var(--folha-escura);
  border: 0;
  border-radius: 0;
  font-size: var(--t-h3);
}

.acoes .contador output {
  min-width: 2.6rem;
  padding: 0 0.5rem;
  text-align: center;
  font-weight: 700;
}

.detalhe {
  background: transparent;
  border: 0;
  color: var(--indigo);
  text-decoration: underline;
  padding: 0;
  min-height: 44px;
  font-weight: 500;
}

/* Barra da cesta: fica no alcance do polegar, e só existe quando há item. */
.barra-cesta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--folha-escura);
  color: #fff;
  padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

.barra-cesta .envelope { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; }

.barra-cesta button { background: var(--ouro); color: #21190a; }

.rodape {
  margin-top: 2.5rem;
  padding: 1.8rem 0 7rem;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
}

.rodape .envelope { display: grid; gap: 1.2rem; }

.rodape .mantenedora { display: flex; gap: 0.9rem; align-items: center; }
.rodape .mantenedora img { width: 54px; flex: none; }

dialog {
  width: min(100%, 34rem);
  max-height: 88vh;
  border: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 0;
  margin: auto auto 0;
  background: var(--superficie);
  color: var(--tinta);
}

dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

dialog .corpo { padding: 1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom)); overflow-y: auto; max-height: 88vh; }

dialog h2 { margin-bottom: 0.4rem; }

.fecha-modal { float: right; margin: -0.3rem -0.3rem 0 0; }

.confirmado { text-align: center; padding: 0.6rem 0 0; }

.codigo {
  font-family: var(--serifada);
  font-size: var(--t-heroi);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--folha-escura);
  margin: 0.3rem 0;
}

.botao-zap {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  background: var(--folha);
  color: #fff;
  border-radius: var(--raio);
  padding: 0.9rem;
  font-weight: 700;
  margin-top: 0.4rem;
}

.outras-damas { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.outras-damas li { border-top: 1px solid var(--linha); padding: 0.55rem 0; }

@media (min-width: 40rem) {
  .item { grid-template-columns: 104px 1fr; }
  .item .foto { width: 104px; height: 104px; }
  dialog { border-radius: var(--raio); margin: auto; }
}