/* Telas do `ads.` (ads §8). Carregado depois de tokens.css, componentes.css e app.css: só composição, nenhuma cor
   literal, tudo pelas variáveis de tokens.css. Celular primeiro (375 px); computador a partir de 720 px. */
.tela--ads{max-width:760px}
.ads-conteudo{display:grid;gap:var(--space-5);min-width:0}
.ads-conteudo>*{min-width:0}
.topo-avisos{display:grid;gap:var(--space-2)}
.topo-avisos:empty{display:none}
.topo-avisos .aviso{justify-self:stretch}
.lista-sem-marcador{list-style:none;margin:0;padding:0}
.lista-cartoes{display:grid;gap:var(--space-3)}

/* Produtos */
.produto{flex-wrap:wrap}
.produto .df-item__txt{flex:1 1 200px;min-width:0}
.produto .df-item__title,.produto .df-item__meta{white-space:normal;overflow-wrap:anywhere}

/* Visão geral */
.gasto-linha{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}
.gasto-linha__valor{font:500 32px/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.estados-conta{display:grid;gap:var(--space-2)}
.estado-conta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.estado-conta strong{font:500 17px/1 var(--font-sans);font-variant-numeric:tabular-nums}

/* Métricas de um anúncio */
.metricas-bloco{display:grid;gap:var(--space-3)}
.metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0}
.metrica{display:grid;gap:2px;min-width:0}
.metrica__rotulo{font:500 12px/1.2 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.metrica__valor{margin:0;font:500 17px/1.25 var(--font-sans);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metrica__valor--vazio{font-weight:400;color:var(--ink-faint)}

/* Resumo do pedido */
.resumo{display:grid;gap:var(--space-2);margin:0}
.resumo__linha{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);gap:var(--space-3);align-items:baseline}
.resumo dt{font:500 13px/1.3 var(--font-sans);color:var(--ink-muted)}
.resumo dd{margin:0;font-size:15px;line-height:1.4;overflow-wrap:anywhere}

/* Revisão: cards em trilho no celular, lado a lado no computador */
.cabeca-pedido .cartao__cabeca{align-items:center}
.cards-trilho{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:var(--space-1)}
.cards-trilho::-webkit-scrollbar{display:none}
.card-peca{flex:0 0 86%;margin:0;scroll-snap-align:start;display:grid;gap:var(--space-2)}
.card-peca__img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg);background:var(--surface-sunken);box-shadow:var(--shadow-1)}
.card-peca__legenda{font:500 13px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.texto-peca{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.55}
.titulos-peca{margin:0;padding-left:20px;color:var(--ink-muted);font-size:14px}
.acoes-revisao{display:grid;gap:var(--space-3)}
.acao-gerenciador{display:grid;justify-items:stretch;width:100%;max-width:320px}

@media (min-width:720px){
  .cards-trilho{flex-wrap:wrap;overflow:visible}
  .card-peca{flex:0 0 calc((100% - 2 * var(--space-3)) / 3)}
  .metricas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acoes-revisao{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .acoes-revisao>.cartao{grid-column:1 / -1;order:5}
}