/* =====================================================================
   ui2, familia c-catalogo: listagens (catalogo.html do mockup) e as
   landings de Plugins e Temas premium (c-catalogo-landing-plugins.html).
   So tokens: cor, raio e sombra saem do tokens.css.
   ===================================================================== */

/* ------------------------------------------------------------ LATERAL */
/* desktop: cartao aberto; celular: <details> "Filtros" fechado acima da grade */
.cat-filt-sum { display: none; }
.cat-filt-body { padding: 4px 20px 10px; }
.side-blk { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.side-blk:last-child { border-bottom: 0; }
.side-blk h3 { font-size: .98rem; margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.side-tot { font: 500 var(--fs-xs)/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
.side-blk .input { height: 44px; }

/* opcao: link com caixa (ou bolinha), nome e contagem a direita */
.opt-list { display: grid; gap: 1px; }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 5px 6px; margin: 0 -6px; border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.35; color: var(--text); transition: background-color .2s ease, color .2s ease; }
.opt:hover { background: var(--surface-2); color: var(--ink); }
.opt-box { flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface); transition: background-color .2s ease, border-color .2s ease; }
.opt-box--radio { border-radius: 50%; }
.opt:hover .opt-box { border-color: var(--accent); }
.opt.is-on { color: var(--ink); font-weight: 600; }
.opt.is-on .opt-box { border-color: var(--accent); background: var(--accent); }
.opt.is-on .opt-box--radio { box-shadow: inset 0 0 0 3px var(--surface); }
.opt.is-on .opt-box:not(.opt-box--radio) { position: relative; }
.opt.is-on .opt-box:not(.opt-box--radio)::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* caixa em parte: o pai com so alguns filhos marcados, ou um grupo com so alguns assuntos */
.opt.is-misto { color: var(--ink); }
.opt.is-misto .opt-box { position: relative; border-color: var(--accent); background: var(--accent); }
.opt.is-misto .opt-box::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--surface); }
/* opcao que, com os outros filtros ligados, nao tem item: fica, mais apagada */
.opt.is-zero:not(.is-on):not(.is-misto) { color: var(--muted); }
.opt.is-zero:not(.is-on):not(.is-misto) .opt-box { border-color: var(--line-soft); }
.opt-t { min-width: 0; overflow-wrap: anywhere; }
.opt .c { margin-left: auto; padding-left: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt--grp .opt-t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--coral); vertical-align: middle; }

/* arvore: o pai com a seta, os filhos recuados */
.tree-parent { font-weight: 600; color: var(--ink); }
.tree-caret { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.tree-kids { padding-left: 24px; }
.side-more-d > summary { list-style: none; cursor: pointer; }
.side-more-d > summary::-webkit-details-marker { display: none; }
.side-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.side-more .i { width: 13px; height: 13px; transition: transform .2s ease; }
.side-more-d[open] > .side-more { display: none; }
.tree-kids + .side-more-d { margin-left: 24px; }

/* atualizado: barra pequena com a fatia real do recorte */
.opt-bar .meter { display: block; height: 4px; margin: 0 0 4px 26px; }
.opt-bar .meter > i { background: var(--grad-brand); }

/* ------------------------------------------------- BARRA, FILTROS, GRADE */
.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.cat-bar p { font-size: var(--fs-sm); color: var(--text); }
.cat-bar p b { color: var(--ink); font-weight: 600; }
.cat-bar-ac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cat-bar-ac .cat-sort { width: auto; min-width: 265px; max-width: 100%; }
.cat-sort-f { display: flex; align-items: center; gap: 8px; }
.cat-sort { width: auto; min-width: 290px; max-width: 100%; height: 44px; } /* largura pelo texto: o 290 fixo cortava "Ordenar por ultima atualizacao" */
.cat-active { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.cat-active-x { gap: 6px; transition: background-color .2s ease, color .2s ease; }
.cat-active-x .i { width: 12px; height: 12px; }
.cat-active-x:hover { background: var(--accent); color: var(--surface); }
.cat-active-x.is-saindo { opacity: .45; }
.cat-active-limpar { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; min-height: 30px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-ink); border-radius: var(--r-pill); transition: color .2s ease, background-color .2s ease; }
.cat-active-limpar .i { width: 12px; height: 12px; }
.cat-active-limpar:hover { color: var(--ink); background: var(--surface-2); }
.cat-pager { margin-top: 36px; }
/* troca sem recarregar: o resultado esmaece enquanto a resposta nao chega */
.cat-res { transition: opacity .2s ease; }
.cat-raiz.is-carregando .cat-res { opacity: .45; pointer-events: none; }
.cat-raiz.is-carregando .cat-bar p { opacity: .6; }
.cat-main { scroll-margin-top: 16px; }
.cat-bar p:focus { outline: none; }
.cat-bar p:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  .cat-res { transition: none; }
}
.cat-empty { display: grid; justify-items: start; gap: 10px; }
.cat-empty h2 { font-size: var(--fs-h3); }
.cat-empty p { color: var(--text); }
/* capa tipografica: monograma e nome juntos no centro */
.cat-main .pgrid .thumb { align-content: center; }
/* nome comprido de tag ou de busca nao estoura a faixa */
.ui2-catalogo-busca .band h1, .ui2-catalogo-tag .band h1, .ui2-catalogo-desenvolvedor .band h1 { overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .cat-filt { overflow: hidden; }
  .cat-filt-sum {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer;
    list-style: none; font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  }
  .cat-filt-sum::-webkit-details-marker { display: none; }
  .cat-filt-sum > .i { width: 18px; height: 18px; color: var(--accent); flex: none; }
  .cat-filt-sum small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--fs-xs); color: var(--muted); }
  .cat-filt-sum .cat-filt-caret { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
  .cat-filt[open] .cat-filt-caret { transform: rotate(180deg); }
  .cat-filt[open] .cat-filt-body { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 640px) {
  .cat-sort-f, .cat-sort { width: 100%; }
  /* busca: botao de categorias e ordem um embaixo do outro, largura toda */
  .cat-bar-ac { width: 100%; }
  .cat-bar-ac .fx-abrir, .cat-bar-ac .cat-sort-f, .cat-bar-ac .cat-sort { width: 100%; }
  .cat-bar-ac .fx-abrir-r { flex: 1; max-width: none; text-align: left; }
  .cat-bar { margin-bottom: 14px; }
  /* capa de ~90px: so o monograma, e o selo desce para nao cobrir as letras */
  .pgrid .thumb small { display: none; }
  .pgrid .pcard-flags { top: 6px; left: 6px; flex-wrap: wrap; }
  .pager .is-far { display: none; }
  .pager { gap: 6px; }
  .pager a, .pager span { min-width: 36px; height: 36px; padding: 0 8px; }
}

/* ============================================================= LANDING */
.ld-search { position: relative; max-width: 560px; margin-top: 22px; }
.ld-search .input { height: 54px; padding-left: 50px; padding-right: 130px; background: var(--surface); }
.ld-search > .i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); }
.ld-search .btn { position: absolute; right: 6px; top: 6px; height: 42px; }

/* categorias mais baixadas: capa, nome, contagem e barra dos downloads do mes */
.mk-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mk { display: flex; flex-direction: column; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.mk:hover { transform: translateY(var(--lift)); box-shadow: var(--sh-hover); }
.mk-media { position: relative; padding: 8px 8px 0; }
.mk-rank { position: absolute; z-index: 2; left: 16px; top: 16px; }
.mk-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mk-body h3 { font-size: 1.02rem; }
.mk-n { font-size: var(--fs-xs); color: var(--muted); }
.mk-n b, .mk-bar b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-bar { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--muted); }
.mk-bar .meter { display: block; height: 6px; }
.mk-bar .meter > i { background: var(--grad-warm); }

/* todas as categorias: ladrilho duotom, nome, contagem e barra de tamanho */
.mk-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.mk-filter { width: 300px; }
.mk-filter .input { height: 44px; }
.mk-all { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.mk-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border: var(--bd); border-radius: var(--r-sm); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.mk-tile:hover { border-color: var(--accent); box-shadow: var(--sh-card); }
.mk-tile .thumb { grid-row: span 2; width: 40px; border-radius: var(--r-sm); }
.mk-tile .thumb b { font-size: .95rem; }
.mk-tile .thumb::after { content: none; } /* o circulo de luz caia em cima das letras no quadro de 40px (3,7:1); revisao da virada, 12/10/2026 */
.mk-tile-n { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.mk-tile-n span { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tile-n b { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-tile .meter { display: block; height: 5px; }
.mk-tile .meter > i { background: var(--grad-brand); }
.mk-tile--grp { background: var(--accent-soft); border-color: transparent; }
.mk-more { margin-top: 18px; }
.mk-more > summary { list-style: none; cursor: pointer; }
.mk-more > summary::-webkit-details-marker { display: none; }
.mk-more[open] > summary { display: none; }
.mk-more[open] > .mk-all { margin-top: 10px; }
.mk-none { margin-top: 18px; }

@media (max-width: 1100px) {
  .mk-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .mk-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mk-top { gap: 12px; }
  .mk-body { padding: 10px 11px 12px; gap: 8px; }
  .mk-body h3 { font-size: .92rem; }
  .mk-bar { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mk-rank { left: 14px; top: 14px; }
  .mk-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mk-tile { grid-template-columns: 30px minmax(0, 1fr); padding: 10px; gap: 4px 9px; }
  .mk-tile .thumb { width: 30px; }
  .mk-tile .thumb b { font-size: .72rem; }
  .mk-tile-n { flex-direction: column; align-items: flex-start; gap: 0; }
  .mk-tile-n span { max-width: 100%; font-size: var(--fs-xs); }
  .mk-filter { width: 100%; }
  .ld-search .input { padding-right: 20px; height: 50px; }
  .ld-search .btn { display: none; }
}

/* grade do catalogo: 3 colunas no maximo (pedido do Marcus, 12/10/2026; de 11/10 a 12/10 eram 4 a partir de 1360px) */