/* Central: listas (fix/central-ui-bento, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* ── Artefatos e Compartilhados: cabeçalho e cartões em bento ──
   O sub-t respira antes do primeiro bloco. Os itens saem em grade de cartões
   (.art-grade), não em linha esticada. O mais recente de Artefatos (.art-destaque)
   ocupa 2 colunas quando a grade tem pelo menos 2 (container query: a grade
   mede a si mesma, então o celular fica em 1 coluna sem span). */
.art-lista .sub-t,.comp-lista .sub-t{margin-bottom:24px}

/* a grade mede a lista (o container é a seção .art-lista): 1 coluna no celular, 2 a partir de 614px.
   Duas colunas e não auto-fill: com 3 colunas, o destaque de 2 deixava buraco com 3 itens. */
.art-lista{container-type:inline-size}
.art-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.art-grade > *{min-width:0}
/* Compartilhados tem poucos itens: auto-fit fecha as colunas vazias, então 1 cartão ocupa a linha e 2 dividem */
.comp-lista .art-grade{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.art-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;width:100%;min-width:0;padding:16px 18px;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-cartao);color:var(--texto);font:inherit;text-align:left;cursor:pointer;transition:background-color 150ms ease-out,border-color 150ms ease-out}
.art-card:hover{background:var(--hover);border-color:var(--borda-verde)}
.art-card:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
.art-card-corpo{display:block;min-width:0}
.art-card-tit{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:15.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.art-card-selos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.art-card-meta{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--apagado);overflow-wrap:anywhere}
/* o tipo, o "novo" e o Exemplo: o mesmo tamanho de pill pequena, sem o recuo de fora do cartão */
.art-card .pill,.art-card .selo-exemplo,.art-card .novo-pill{margin:0;font-size:11.5px;line-height:1.4;padding:2px 8px;vertical-align:middle}
.art-destaque{padding:20px 22px}
.art-destaque .art-card-tit{font-size:20px;line-height:1.25}
.art-destaque .art-card-meta{font-size:14px}
@container (min-width: 614px){
  .art-lista .art-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-lista .art-destaque{grid-column:1 / -1}
  /* o cartão que ficaria sozinho na linha ocupa a linha toda: o único, o último de número ímpar
     (sem destaque) e o último de número par (com destaque, que já ocupa a 1ª linha) */
  .art-lista .art-grade > :only-child,
  .art-lista .art-grade:has(> .art-destaque) > :last-child:nth-child(even),
  .art-lista .art-grade:not(:has(> .art-destaque)) > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  .art-card{transition:none}
}

/* ── barra de filtros: tipo e DOT em duas linhas, uma por grupo; na mesma linha só com a lista larga ──
   Abaixo de 800px cada grupo é uma linha (tipo em cima, DOT embaixo): a de baixo começa com
   "Todos os DOTs" e não há separador solto. Com 800px ou mais, os dois grupos dividem a linha,
   com o separador (≈800px cabem os 3 DOTs). */
.art-lista .art-filtros{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:16px 0 18px;container-type:inline-size}
@media (max-width: 639px){
  /* a faixa vai até a borda da tela (a margem de -16px compensa o padding), para o último chip cortado mostrar que rola */
  .art-filtros > .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:calc(100% + 32px);margin:0 -16px;padding:0 16px 2px}
  .art-filtros > .chips::-webkit-scrollbar{display:none}
  .art-filtros .chip{min-height:40px;flex:none;white-space:nowrap;max-width:none}
  .art-demo .btn.art-mini{min-height:40px}
}
@container (min-width: 800px){
  .art-lista .art-filtros{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
  .art-lista .art-filtros > .chips + .chips{border-left:1px solid var(--borda);padding-left:16px}
}

/* ── "Exemplos para visualizar": um cartão compacto, texto à esquerda e botões à direita ── */
.art-demo{margin:0 0 18px;padding:16px 18px;display:grid;gap:12px}
.art-demo h2.s{margin:0 0 4px}
.art-demo .art-banner-txt{margin:0;font-size:13.5px}
.art-demo-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.art-demo-txt{flex:1 1 300px;min-width:0}
.art-demo-acts{margin:0;flex:0 1 auto;justify-content:flex-end}
.art-demo-aviso{margin:8px 0 0;font-size:13.5px}
.art-lista > .art-demo:last-child{margin:24px 0 0}
/* o "link criado" dentro do cartão é um fio de separação, não um cartão dentro de cartão */
.art-demo .art-novo{margin:0;padding:12px 0 0;background:none;border:0;border-top:1px solid var(--verde-escuro);border-radius:0}
.art-demo .acts{margin:0}
@media (max-width: 600px){
  .art-demo-acts{justify-content:flex-start;width:100%}
}

/* ── paginação e contagem: centradas, com respiro do último cartão ── */
.art-grade + .art-mais-wrap,.art-grade + .art-contagem{margin-top:16px}

/* ── Apps: o estado vazio alinha à esquerda com o título (560px), e não centrado no meio da tela ── */
.apps-pagina .est-vazio{max-width:560px;margin:24px 0 0;align-items:flex-start;text-align:left}
.apps-pagina .est-vazio .acts{justify-content:flex-start}

/* ── vazio e erro: o cartão com padding confortável ── */
.art-vazio{padding:22px 24px;display:grid;gap:12px;max-width:560px}
.art-vazio p{margin:0}

/* ── Apps: o selo Exemplo na linha do título, alinhado a ele (sem o recuo de 8 px da margem do selo solto) ── */
.app-item-texto .selo-exemplo{margin:4px 0 2px}

/* ── Apps: a lista em cartões de altura igual, em 1, 2 ou 3 colunas conforme a largura da seção ──
   A grade mede a seção (.apps-pagina, container). O ui-recursos.css põe auto-fit de 280px; aqui a
   regra é mais específica e vale só na tela de Apps. Com 3 colunas a grade tem 6 faixas e cada
   cartão ocupa 2: a última linha incompleta se reparte (1 cartão: a linha toda; 2: metade cada),
   então não sobra um cartão sozinho pela metade da linha. */
.apps-pagina{container-type:inline-size}
.apps-pagina .app-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.apps-pagina .app-lista > *{min-width:0}
@container (min-width: 480px) and (max-width: 659px){
  .apps-pagina .app-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps-pagina .app-lista > :last-child:nth-child(odd){grid-column:1 / -1}
}
@container (min-width: 660px){
  .apps-pagina .app-lista{grid-template-columns:repeat(6,minmax(0,1fr))}
  .apps-pagina .app-lista > *{grid-column:span 2}
  .apps-pagina .app-lista > :last-child:nth-child(3n+1){grid-column:1 / -1}
  .apps-pagina .app-lista > :nth-last-child(2):nth-child(3n+1),
  .apps-pagina .app-lista > :last-child:nth-child(3n+2){grid-column:span 3}
}