/* ==========================================================================
   Acervo AgroBrasília — folha única da ferramenta de busca.

   O padrão da categoria, executado a sério. A régua de acabamento é o
   app.envato.com/photos: fundo neutro escuro, cartão de raio 12, ações
   circulares de 40px na borda da foto, pílula de filtro de 40px de altura,
   e uma escala tipográfica de duas ou três medidas, não de nove.

   As cores são as da AgroBrasília. O tema é escuro e só escuro: a tela
   existe para julgar fotografia, e foto se julga sobre neutro escuro. Isso
   também elimina por construção as três reprovações de contraste que o
   tema claro carregava.
   ========================================================================== */

/* Archivo variável: um eixo de peso (100-900) e um de largura (62-125%).
   Uma família carrega display, interface, rótulo e numeral. */
@font-face{
  font-family:Archivo;
  src:url("font/Archivo-latin.woff2")format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Archivo;
  src:url("font/Archivo-latin-ext.woff2")format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* --- Cores da marca ---------------------------------------------------- */
  --lima:#A1D621;      /* ação primária                                     */
  --campo:#5FA93A;     /* confirmação, estado positivo                      */
  --verde:#00794F;     /* preenchimento; 3,2:1 — fundo, nunca texto         */
  --ciano:#10D4E8;     /* foco e segundo acento                             */

  /* --- Neutros ----------------------------------------------------------- */
  --fundo:#191919;
  --superficie:#212121;
  --superficie-alta:#2A2A2A;
  --superficie-hover:#363636;
  --borda:#2F2F2F;
  --borda-forte:#454545;
  --texto:#F2F2F2;          /* 15,9:1 */
  --texto-suave:#A8A8A8;    /*  7,4:1 */
  /* 6,3:1 sobre o fundo e 5,1:1 sobre a superfície alta. O #8A8A8A que eu
     tinha passava no fundo e reprovava em cima do painel, a 4,2:1. */
  --texto-tenue:#9A9A9A;
  --sobre-acao:#10261B;     /*  9,2:1 sobre o lima                          */
  --erro:#FF6B5E;

  /* --- Papéis ------------------------------------------------------------ */
  --acao:var(--lima);
  --acao-hover:#B2E63C;
  --acao-suave:rgba(161,214,33,.14);
  --foco:var(--ciano);
  --selecao:var(--lima);

  /* --- Tipografia --------------------------------------------------------
     Duas medidas fazem quase tudo, como no Envato: 14 para interface, 12
     para rótulo e código. Posto vem de peso e caixa, não de tamanho.      */
  --fonte:Archivo,"Helvetica Neue",Arial,sans-serif;
  --t-codigo:.75rem;   /* 12 */
  --t-ui:.875rem;      /* 14 */
  --t-corpo:.9375rem;  /* 15 */
  --t-secao:1.25rem;   /* 20 */
  --t-numeral:1.5rem;  /* 24 — o contador                                   */

  --p-normal:400;
  --p-medio:500;
  --p-forte:700;

  /* --- Espaço, forma, movimento ------------------------------------------ */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem;
  --r-cartao:12px;     /* medido no Envato                                  */
  --r-sm:8px;
  --r-md:14px;
  --r-pilula:48px;     /* medido no Envato                                  */
  --alvo:2.5rem;       /* 40px: altura de pílula e de botão circular        */

  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 2px 6px rgba(0,0,0,.45),0 12px 28px -14px rgba(0,0,0,.8);
  --transicao:150ms cubic-bezier(.2,.6,.3,1);

  --camada-suspensa:10; --camada-fixa:100; --camada-modal:1000;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:var(--p-normal) var(--t-corpo)/1.5 var(--fonte);
  -webkit-font-smoothing:antialiased}
::selection{background:var(--acao-suave);color:var(--texto)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--borda-forte);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#525252}
::-webkit-scrollbar-track{background:transparent}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r-sm)}
input::placeholder{color:var(--texto-tenue)}
/* O proprio navegador desenha um x dentro do campo de busca, colado no
   texto, e nos temos o nosso botao de limpar depois dele: eram dois. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}
.sprite{display:none}

/* O traço tem que vir daqui. Um <use> instanciado em outro <svg> herda do
   contexto do próprio <use>, não do sprite de origem: com as propriedades
   só no <svg> raiz do sprite, todo ícone saía preenchido de preto e sem
   contorno — era a causa única do lápis, da lupa, dos chevrons, das caixas
   de seleção e dos ícones de hover todos errados. */
.i{width:1.15em;height:1.15em;display:block;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ab-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:var(--alvo);padding:0 var(--e4);border:0;border-radius:var(--r-pilula);
  font:var(--p-medio) var(--t-ui)/1 var(--fonte);cursor:pointer;text-decoration:none;
  background:var(--acao);color:var(--sobre-acao);
  transition:background var(--transicao),border-color var(--transicao),color var(--transicao)}
.btn:hover{background:var(--acao-hover)}
.btn-sec{background:var(--superficie-alta);color:var(--texto)}
.btn-sec:hover{background:var(--superficie-hover)}
.btn-txt{background:none;color:var(--texto-suave);border:0;padding:0 var(--e3)}
.btn-txt:hover{color:var(--texto);background:var(--superficie-alta)}
.btn[disabled]{opacity:.45;cursor:not-allowed;background:var(--superficie-alta);
  color:var(--texto-tenue)}
.btn-bloco{width:100%}
/* `hidden` precisa vencer o display:inline-flex acima -- sem isto, esconder
   um botao pelo atributo nao surte efeito algum. */
.btn[hidden]{display:none}
.icone-btn{display:inline-flex;align-items:center;justify-content:center;
  width:var(--alvo);height:var(--alvo);border:0;border-radius:50%;cursor:pointer;
  background:none;color:var(--texto-suave);transition:background var(--transicao),color var(--transicao)}
.icone-btn:hover{background:var(--superficie-hover);color:var(--texto)}
.icone-btn[disabled]{opacity:.4;cursor:not-allowed}
.icone-btn[disabled]:hover{background:none;color:var(--texto-suave)}
.icone-btn[hidden]{display:none}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:var(--camada-fixa);background:var(--fundo);
  border-bottom:1px solid var(--borda)}
/* A busca leva toda a largura que sobra: ela é a porta de entrada da
   ferramenta, não um detalhe centrado de 44rem. */
.topo-linha{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--e4);padding:var(--e3) var(--e4)}
.marca{display:flex;flex-direction:column;gap:1px;min-width:0}
.marca h1{margin:0;font-size:var(--t-ui);font-weight:var(--p-forte);
  font-stretch:108%;letter-spacing:-.01em;color:var(--lima);white-space:nowrap}
.marca-sub{font-size:var(--t-codigo);color:var(--texto-tenue);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.busca-caixa{display:flex;align-items:center;gap:var(--e2);width:100%;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-pilula);padding:var(--e1) var(--e1) var(--e1) var(--e4)}
.busca-caixa:focus-within{border-color:var(--lima);
  box-shadow:0 0 0 3px var(--acao-suave)}
.escopo{display:flex;align-items:center;padding-right:var(--e3);
  border-right:1px solid var(--borda);margin-right:var(--e1)}
.escopo select{font:var(--p-medio) var(--t-ui) var(--fonte);border:0;background:none;
  color:var(--texto);cursor:pointer;min-height:var(--alvo);padding:0}
.busca-caixa input{flex:1;min-width:0;font:var(--p-normal) var(--t-ui) var(--fonte);
  border:0;background:none;color:var(--texto);padding:var(--e2) 0}
.busca-caixa input:focus{outline:none}
.btn-busca{display:inline-flex;align-items:center;justify-content:center;
  width:var(--alvo);height:var(--alvo);border:0;border-radius:50%;cursor:pointer;
  background:var(--acao);color:var(--sobre-acao);transition:background var(--transicao)}
.btn-busca:hover{background:var(--acao-hover)}
.btn-busca .i{width:1.25rem;height:1.25rem}
.topo-acoes{display:flex;align-items:center;gap:var(--e2);justify-self:end}
.topo-acoes:empty,.topo-acoes:not(:has(.btn:not([hidden]))){display:none}
.btn-editar .i{color:var(--texto)}   /* o lápis acompanha o texto do botão */
.btn-editar[aria-pressed="true"]{background:var(--acao-suave);color:var(--lima)}
.btn-editar[aria-pressed="true"] .i{color:var(--lima)}

/* ---------- barra de filtros ----------
   Três zonas: "Filtros" preso à esquerda, as pílulas de faceta rolando no
   meio, Ordenar e Tamanho presos à direita. O que precisa estar sempre ao
   alcance não desaparece na rolagem horizontal. */
.barra-filtros{display:flex;align-items:center;gap:var(--e2);
  padding:0 var(--e4) var(--e3)}
.filtros-rolagem{flex:1 1 auto;min-width:0;display:flex;align-items:center;
  gap:var(--e2);overflow-x:auto;scrollbar-width:none;
  /* respiro para o anel de foco não ser cortado pela própria rolagem */
  padding:3px 0}
.filtros-rolagem::-webkit-scrollbar{display:none}
.filtros-fixos{flex:none;display:flex;align-items:center;gap:var(--e2);
  padding-left:var(--e2);border-left:1px solid var(--borda)}
.pilula-fixa{flex:none}

/* Fundo cinza um pouco mais claro que a tela, sem borda. No hover clareia. */
.pilula{display:inline-flex;align-items:center;gap:var(--e2);flex:none;
  height:var(--alvo);padding:0 var(--e4);border-radius:var(--r-pilula);
  border:0;background:var(--superficie-alta);color:var(--texto);
  font:var(--p-normal) var(--t-ui)/1 var(--fonte);cursor:pointer;
  transition:background var(--transicao),color var(--transicao)}
.pilula:hover{background:var(--superficie-hover)}
.pilula[data-ativo="1"]{background:var(--acao-suave);color:var(--lima)}
.pilula[data-ativo="1"]:hover{background:rgba(161,214,33,.22)}
.pilula .n:empty{display:none}
.pilula .n{min-width:1.25rem;height:1.25rem;display:inline-flex;align-items:center;
  justify-content:center;padding:0 .3rem;border-radius:var(--r-pilula);
  background:var(--lima);color:var(--sobre-acao);
  font-size:var(--t-codigo);font-weight:var(--p-forte);font-variant-numeric:tabular-nums}
/* chevron branco, não um cinza apagado */
.pilula .seta{width:.95rem;height:.95rem;color:var(--texto);
  transition:transform var(--transicao)}
.pilula-fav[data-ativo="1"] .i{fill:var(--lima);stroke:none}
.pilula[aria-expanded="true"] .seta{transform:rotate(180deg)}

/* Popover nativo: vive na top layer, nenhum ancestral com overflow corta.
   A posição vem do JS, ancorada na pílula. */
[popover].pop{position:fixed;margin:0;inset:auto;max-width:min(92vw,26rem);
  max-height:min(60vh,30rem);overflow-y:auto;padding:var(--e2);
  background:var(--superficie);color:var(--texto);
  border:1px solid var(--borda-forte);border-radius:var(--r-md);box-shadow:var(--sombra-2)}
[popover].pop::backdrop{background:transparent}
[popover].pop-largo{min-width:min(92vw,22rem)}
.pop-busca{width:100%;font:var(--p-normal) var(--t-ui) var(--fonte);margin-bottom:var(--e2);
  padding:var(--e2) var(--e3);border-radius:var(--r-sm);
  border:1px solid var(--borda-forte);background:var(--fundo);color:var(--texto)}
.pop-lista{display:flex;flex-direction:column;gap:1px}
.opcao{display:flex;align-items:center;gap:var(--e3);width:100%;text-align:left;
  min-height:var(--alvo);padding:0 var(--e2);border:0;border-radius:var(--r-sm);
  background:none;color:var(--texto);font:var(--p-normal) var(--t-ui) var(--fonte);cursor:pointer}
.opcao:hover{background:var(--superficie-alta)}
/* Caixa de seleção: 18px de lado, borda visível, e o check dimensionado
   para dentro dela — antes o ícone tinha 16px num box de 18 e vazava. */
.opcao .caixa{width:1.125rem;height:1.125rem;flex:none;border-radius:4px;
  border:1.5px solid #5A5A5A;display:flex;align-items:center;
  justify-content:center;color:transparent;
  transition:background var(--transicao),border-color var(--transicao)}
.opcao .caixa .i{width:.8rem;height:.8rem;stroke-width:3}
.opcao:hover .caixa{border-color:var(--texto-suave)}
.opcao[aria-pressed="true"] .caixa{background:var(--acao);border-color:var(--acao);
  color:var(--sobre-acao)}
.opcao .rotulo{flex:1;min-width:0}
.opcao .n{font-size:var(--t-codigo);color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.opcao-vazia{padding:var(--e2);font-size:var(--t-ui);color:var(--texto-suave)}

.pop-cartoes{display:flex;flex-direction:row;gap:var(--e2);flex-wrap:wrap}
.cartao-opcao{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--e1);flex:1 1 6rem;min-height:5rem;padding:var(--e3);
  border-radius:var(--r-sm);border:1.5px solid var(--borda-forte);
  background:transparent;color:var(--texto);
  font:var(--p-normal) var(--t-ui) var(--fonte);cursor:pointer;
  transition:border-color var(--transicao),background var(--transicao)}
.cartao-opcao .i{width:1.5rem;height:1.5rem}
.cartao-opcao:hover{border-color:#525252;background:var(--superficie-alta)}
.cartao-opcao[aria-pressed="true"]{border-color:var(--lima);background:var(--acao-suave);color:var(--lima)}
.cartao-opcao .n{font-size:var(--t-codigo);color:var(--texto-tenue);font-variant-numeric:tabular-nums}

/* ---------- resultados ---------- */
.corpo{padding:var(--e5) var(--e4);max-width:2000px;margin:0 auto}
.barra-res{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--e4);margin-bottom:var(--e4);flex-wrap:wrap}
/* O contador usa o eixo de largura da Archivo: é o único numeral grande da
   tela, e é a informação que a pessoa mais consulta. */
#contador{font-size:var(--t-numeral);font-weight:var(--p-forte);font-stretch:110%;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#contador .de{font-size:var(--t-ui);font-weight:var(--p-normal);font-stretch:100%;
  letter-spacing:0;color:var(--texto-suave)}
.sel-tam{display:flex;align-items:center;gap:var(--e2);
  font-size:var(--t-ui);color:var(--texto-suave)}
.sel-tam select{min-height:var(--alvo);padding:0 var(--e2);border-radius:var(--r-sm);
  border:1px solid var(--borda-forte);background:var(--superficie);color:var(--texto);
  font:var(--p-normal) var(--t-ui) var(--fonte)}

/* Tag de filtro ativo: só o valor. O nome da faceta já está na pílula de
   onde ele saiu, e repeti-lo dobrava a largura de cada tag. */
.ativos{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e4);align-items:center}
.ativos[hidden]{display:none}
.ativo{display:inline-flex;align-items:center;gap:var(--e2);min-height:var(--alvo);
  padding:0 var(--e3) 0 var(--e4);border-radius:var(--r-pilula);
  border:1px solid var(--lima);background:var(--acao-suave);color:var(--lima);
  font:var(--p-medio) var(--t-ui) var(--fonte);cursor:pointer}
.ativo:hover{background:rgba(161,214,33,.22)}
.ativo .i{width:.85rem;height:.85rem;stroke-width:2.6;opacity:.85}
.ativo .i-cheia{fill:currentColor;stroke:none;opacity:1}
.ativo:hover .i{opacity:1}
.ativos .limpar-tudo{color:var(--texto-suave)}
.ativos .limpar-tudo:hover{color:var(--erro);background:var(--superficie-alta)}

/* ---------- grade justificada ----------
   Cada cartão cresce proporcionalmente à sua largura natural (--r), então
   todos os itens de uma linha escalam pelo mesmo fator e a proporção se
   mantém exata: nenhuma foto é cortada nem achatada. O ::after absorve a
   sobra da última linha, que senão esticaria duas ou três fotos. */
.grade{display:flex;flex-wrap:wrap;gap:var(--e2);--h-linha:220px}
.grade[data-tamanho="pequeno"]{--h-linha:150px}
.grade[data-tamanho="grande"]{--h-linha:320px}
.grade::after{content:'';flex-grow:1e9}
.cartao{position:relative;border-radius:var(--r-cartao);overflow:hidden;
  background:var(--superficie);min-width:0;
  aspect-ratio:var(--r,1.333);
  flex:var(--r,1.333) 1 calc(var(--r,1.333) * var(--h-linha))}
.cartao img{width:100%;height:100%;object-fit:cover;display:block}
.cartao .abrir{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:zoom-in;display:block;border-radius:var(--r-cartao)}

/* Hover: véu subindo do rodapé, com a legenda em cima dele; as ações ficam
   em botões circulares na borda direita, longe do texto. */
.cartao::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.25) 28%,transparent 52%);
  opacity:0;transition:opacity var(--transicao)}
.cartao:hover::before,.cartao:focus-within::before{opacity:1}
.cartao .legenda{position:absolute;bottom:var(--e2);left:var(--e3);right:var(--e3);
  z-index:2;pointer-events:none;opacity:0;transition:opacity var(--transicao);
  font-size:var(--t-codigo);line-height:1.35;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cartao .legenda b{display:block;font-weight:var(--p-medio)}
.cartao .legenda span{opacity:.8}
.cartao:hover .legenda,.cartao:focus-within .legenda{opacity:1}

.cartao .acoes{position:absolute;top:var(--e2);right:var(--e2);z-index:3;
  display:flex;flex-direction:column;gap:var(--e1)}
.cartao .acoes button,.cartao .acoes a{display:flex;align-items:center;justify-content:center;
  width:var(--alvo);height:var(--alvo);border:0;border-radius:50%;cursor:pointer;
  background:rgba(25,25,25,.72);color:#fff;backdrop-filter:blur(8px);
  transition:background var(--transicao)}
.cartao .acoes button:hover,.cartao .acoes a:hover{background:rgba(25,25,25,.95)}
/* So o ✓ pinta o botao inteiro. A estrela se enche, como na pilula de
   filtro -- favoritar e marcacao, nao um botao ligado. */
.cartao .acoes .acao-sel[aria-pressed="true"]{background:var(--acao);color:var(--sobre-acao)}
.cartao .acoes .i{width:1.15rem;height:1.15rem}

/* Fora do hover a pilha so carrega os botoes MARCADOS, e eles sobem para o
   topo. Os outros saem do fluxo em vez de ficarem com opacity:0 segurando a
   vaga -- senao a estrela favoritada ficava pendurada no 2o degrau com um
   buraco em cima. Absoluto, e nao display:none, porque display:none os
   tiraria da ordem de tabulacao: baixar e ver ficariam inalcancaveis sem
   mouse. A ordem do DOM (selecionar, favoritar, baixar, ver) e a hierarquia,
   entao com os dois marcados o ✓ volta para cima sozinho. */
.cartao .acoes > *{position:absolute;top:0;right:0;opacity:0;pointer-events:none;
  transition:opacity var(--transicao)}
.cartao:hover .acoes > *,
.cartao:focus-within .acoes > *,
.cartao .acoes .acao-sel[aria-pressed="true"],
.cartao .acoes .acao-fav[aria-pressed="true"]{
  position:static;opacity:1;pointer-events:auto}

.cartao[data-sel="1"]{outline:3px solid var(--selecao);outline-offset:-3px}
.cartao .acoes .acao-fav[aria-pressed="true"]{background:var(--acao);color:var(--sobre-acao)}
.cartao .acoes .acao-fav[aria-pressed="true"]:hover{background:var(--acao-hover)}
.acao-fav[aria-pressed="true"] .i{fill:currentColor;stroke:none}
/* A animacao vem de uma classe posta no clique, nao do estado: preso ao
   [aria-pressed] ela re-disparava em TODA estrela acesa a cada refiltro,
   porque aplicar() reconstroi a grade inteira. */
.acao-fav.pulsa .i{animation:estrela-enche 340ms cubic-bezier(.2,.9,.3,1.2)}
@keyframes estrela-enche{
  0%{transform:scale(.6);fill:transparent}
  55%{transform:scale(1.3)}
  100%{transform:scale(1);fill:currentColor}
}
/* O selo foi para o alto à esquerda: embaixo ele disputava com a legenda. */
.cartao[data-corr="1"]::after{content:"editada";position:absolute;top:var(--e2);
  left:var(--e2);z-index:2;font-size:.625rem;font-weight:var(--p-medio);
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--verde);color:#fff;border-radius:4px;padding:.15rem .4rem}

.rodape-grade{display:flex;flex-direction:column;align-items:center;gap:var(--e3);
  padding:var(--e5) 0 var(--e6)}
.sentinela{width:1px;height:1px}
#todos-res[hidden],.vazio[hidden]{display:none}
.vazio{color:var(--texto-suave);text-align:center;max-width:52ch;line-height:1.6}

/* ---------- barra de seleção ----------
   Flutua logo abaixo dos filtros, por cima das fotos. A âncora tem altura
   zero: quando a barra aparece, a grade não dá um salto. */
/* A âncora ocupa a própria altura em vez de zero. Com altura zero a barra
   pousava exatamente sobre a primeira fileira de cartões e tapava a estrela
   e o ✓ deles. Assim ela nasce logo abaixo dos filtros e, ao rolar, fica
   grudada no topo passando por cima das fotos — que é onde ela precisa
   flutuar de verdade. Vazia, não ocupa nada. */
.selbar-ancora{position:sticky;top:calc(var(--alt-topo,8rem) + var(--e2));
  z-index:var(--camada-suspensa);display:flex;justify-content:center;
  align-items:flex-start;pointer-events:none}
.selbar-ancora:has(.selbar:not([hidden])){margin-bottom:var(--e3)}
.selbar{pointer-events:auto;display:flex;align-items:center;gap:var(--e1);
  padding:var(--e1) var(--e2) var(--e1) var(--e4);border-radius:var(--r-pilula);
  background:rgba(33,33,33,.94);backdrop-filter:blur(12px);
  border:1px solid var(--borda-forte);box-shadow:var(--sombra-2)}
.selbar[hidden]{display:none}
.sel-n{font:var(--p-forte) var(--t-numeral)/1 var(--fonte);font-stretch:110%;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--lima);
  border:0;background:none;padding:0 var(--e1);cursor:pointer;border-radius:var(--r-sm)}
.sel-n[disabled]{cursor:default}
.sel-n:not([disabled]):hover{color:var(--acao-hover)}
.sel-sep{width:1px;height:1.5rem;background:var(--borda-forte);margin:0 var(--e2)}
.selbar[data-vazio="1"] .sel-n{color:var(--texto-tenue)}
.sel-todos{display:inline-flex;align-items:center;gap:var(--e2);flex:none;
  min-height:2rem;padding:0 var(--e3);margin-left:var(--e2);border:0;
  border-radius:var(--r-pilula);cursor:pointer;
  background:var(--superficie-alta);color:var(--texto);
  font:var(--p-medio) var(--t-ui)/1 var(--fonte);
  transition:background var(--transicao)}
.sel-todos:hover{background:var(--superficie-hover)}
.sel-todos .i{width:1rem;height:1rem}
.sel-btn[disabled]{opacity:.35;cursor:not-allowed}
.sel-btn[disabled]:hover{background:none;color:var(--texto)}
.sel-btn{color:var(--texto)}
.sel-btn:hover{background:var(--superficie-hover)}
/* ligado, o "ver selecionadas" fica aceso como qualquer outro filtro */
#sel-ver[aria-pressed="true"]{background:var(--acao);color:var(--sobre-acao)}
#sel-ver[aria-pressed="true"]:hover{background:var(--acao-hover)}
#sel-baixar{color:var(--lima)}          /* a acao que mais se usa, em destaque */
#sel-baixar:hover{background:var(--acao-suave)}
#sel-limpar:hover{color:var(--erro)}
.selbar .sel-sep:last-of-type{margin:0 var(--e1)}

/* ---------- modal de filtros ---------- */
.dlg-filtros{border:0;padding:0;width:min(94vw,56rem);max-height:86vh;
  border-radius:var(--r-md);background:var(--superficie);color:var(--texto);
  box-shadow:var(--sombra-2);overflow:hidden}
.dlg-filtros::backdrop{background:rgba(0,0,0,.7)}
.dlg-filtros[open]{display:flex;flex-direction:column}
.dlg-topo{display:flex;align-items:center;gap:var(--e4);padding:var(--e4);
  border-bottom:1px solid var(--borda)}
.dlg-topo strong{font-size:var(--t-secao);font-weight:var(--p-forte);font-stretch:106%}
.dlg-topo input{flex:1;min-width:0;min-height:var(--alvo);padding:0 var(--e4);
  border-radius:var(--r-pilula);border:1px solid var(--borda-forte);
  background:var(--fundo);color:var(--texto);font:var(--p-normal) var(--t-ui) var(--fonte)}
.dlg-corpo{display:grid;grid-template-columns:13rem 1fr;min-height:0;flex:1}
.dlg-trilho{display:flex;flex-direction:column;gap:1px;padding:var(--e3);
  border-right:1px solid var(--borda);overflow-y:auto}
.dlg-trilho button{min-height:var(--alvo);padding:0 var(--e3);text-align:left;
  border:0;border-radius:var(--r-sm);background:none;color:var(--texto-suave);
  font:var(--p-normal) var(--t-ui) var(--fonte);cursor:pointer}
.dlg-trilho button:hover{background:var(--superficie-alta);color:var(--texto)}
.dlg-trilho button[aria-current="true"]{background:var(--acao-suave);color:var(--lima);
  font-weight:var(--p-medio)}
.dlg-grupos{overflow-y:auto;padding:var(--e4);display:flex;flex-direction:column;gap:var(--e5)}
.dlg-grupo h3{margin:0 0 var(--e2);font-size:var(--t-ui);font-weight:var(--p-forte)}
.dlg-grupo .pop-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1px}
.dlg-vazio{margin:0;color:var(--texto-suave);line-height:1.6;max-width:52ch}
.dlg-vazio[hidden]{display:none}
.dlg-pe{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  padding:var(--e3) var(--e4);border-top:1px solid var(--borda)}

/* ---------- detalhe ---------- */
.detalhe{border:0;padding:0;width:min(94vw,1100px);border-radius:var(--r-md);
  background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-2);overflow:hidden}
.detalhe::backdrop{background:rgba(0,0,0,.82)}
.detalhe img{width:100%;max-height:70vh;object-fit:contain;display:block;background:#0E0E0E}
.det-info{padding:var(--e4)}
.det-desc{margin:0 0 var(--e3);font-size:var(--t-corpo);line-height:1.6;max-width:68ch}
.det-facetas{list-style:none;margin:0 0 var(--e3);padding:0;display:flex;flex-wrap:wrap;gap:var(--e1)}
.det-facetas li{font-size:var(--t-codigo);background:var(--superficie-alta);
  color:var(--texto-suave);border-radius:var(--r-pilula);padding:.2rem .6rem}
.det-facetas li.herdado::after{content:" · por sequência";opacity:.6}
.det-meta{margin:0 0 var(--e4);font-size:var(--t-codigo);color:var(--texto-tenue)}
.det-acoes{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
#det-cesta[aria-pressed="true"],#det-fav[aria-pressed="true"]{
  background:var(--acao-suave);color:var(--lima)}
#det-fav[aria-pressed="true"] .i{fill:currentColor;stroke:none}
.det-baixar{display:flex;gap:var(--e1);align-items:center}
.det-baixar select{min-height:var(--alvo);padding:0 var(--e2);border-radius:var(--r-sm);
  border:1px solid var(--borda-forte);background:var(--fundo);color:var(--texto);
  font:var(--p-normal) var(--t-ui) var(--fonte)}
.fechar{position:absolute;top:var(--e2);right:var(--e2);z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:var(--alvo);height:var(--alvo);border:0;border-radius:50%;cursor:pointer;
  background:rgba(25,25,25,.72);color:#fff;backdrop-filter:blur(8px)}
.fechar:hover{background:rgba(25,25,25,.95)}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:var(--alvo);height:3.5rem;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;line-height:1;border:0;cursor:pointer;
  background:rgba(25,25,25,.6);color:#fff;backdrop-filter:blur(8px)}
.nav:hover{background:rgba(25,25,25,.9)}
.nav:disabled{opacity:.3;cursor:default}
.nav-ant{left:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
.nav-prox{right:0;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.det-pos{position:absolute;top:var(--e3);left:var(--e3);z-index:4;font-size:var(--t-codigo);
  background:rgba(25,25,25,.72);color:#fff;border-radius:var(--r-pilula);
  padding:.2rem .6rem;font-variant-numeric:tabular-nums;backdrop-filter:blur(8px)}

/* ---------- editor: lateral, só no modo de edição ---------- */
.editor{position:fixed;top:var(--alt-topo,8rem);right:0;bottom:0;z-index:var(--camada-suspensa);
  width:clamp(20rem,27vw,24rem);display:flex;flex-direction:column;
  background:var(--superficie);border-left:1px solid var(--borda);box-shadow:var(--sombra-2)}
.editor[hidden]{display:none}
/* O topo é fixo: salvar, descartar e remover não viajam com a rolagem. */
.editor-topo{flex:none;padding:var(--e3) var(--e4);border-bottom:1px solid var(--borda);
  display:flex;flex-direction:column;gap:var(--e2)}
.editor-topo-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
.editor-topo-linha strong{font-size:var(--t-ui);font-weight:var(--p-forte)}
.ed-acoes-topo{display:flex;align-items:center;gap:var(--e1)}
.ed-acoes-topo #ed-salvar{flex:1}
.ed-ic{flex:none;background:var(--superficie-alta);color:var(--texto)}
.ed-ic:hover{background:var(--superficie-hover)}
#ed-remover-tudo:hover{color:var(--erro)}

.editor-rolagem{flex:1;min-height:0;overflow-y:auto;padding:var(--e4);
  display:flex;flex-direction:column;gap:var(--e4);align-items:stretch}
.ed-alvo{margin:0;font-size:var(--t-ui);font-weight:var(--p-medio);color:var(--lima)}
.ed-pend{margin:0;font-size:var(--t-codigo);color:var(--texto-suave)}
.ed-pend.ativo{color:var(--lima);font-weight:var(--p-medio)}
.ed-status{margin:0;font-size:var(--t-codigo);color:var(--texto-suave);line-height:1.45}
.ed-status:empty{display:none}
.ed-status.ok{color:var(--campo);font-weight:var(--p-medio)}
.ed-status.erro{color:var(--erro);font-weight:var(--p-medio)}

/* Facetas como grupos de tags: o valor atual já aparece, com × para tirar,
   e um + no fim de cada grupo para acrescentar. */
.ed-grupos{display:flex;flex-direction:column;gap:var(--e4)}
.ed-cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e2);margin-bottom:var(--e2)}
.ed-grupo h3{margin:0;font-size:var(--t-codigo);font-weight:var(--p-medio);
  text-transform:uppercase;letter-spacing:.06em;color:var(--texto-tenue)}
/* o "todas" so serve a versao compacta do celular */
.ed-ver{display:none;align-items:center;gap:var(--e1);border:0;background:none;
  cursor:pointer;padding:0;
  font:var(--p-medio) var(--t-codigo) var(--fonte);color:var(--texto-suave)}
.ed-ver:hover{color:var(--lima)}
.ed-ver .seta{width:.85rem;height:.85rem;transition:transform var(--transicao)}
.ed-grupo[data-aberto] .ed-ver .seta{transform:rotate(180deg)}
.ed-linha{display:flex;flex-wrap:wrap;gap:var(--e1);align-items:center}

/* O vocabulario inteiro da faceta fica a vista. O que ja esta nas fotos
   selecionadas acende em lima; o resto fica apagado, esperando um clique.
   Parcial (em algumas das selecionadas) ganha o anel e a contagem. */
.ed-tag{display:inline-flex;align-items:center;border-radius:var(--r-pilula);
  background:transparent;color:var(--texto-suave);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--borda);
  transition:background var(--transicao),color var(--transicao)}
.ed-tag:hover{background:var(--superficie-alta);color:var(--texto)}
.ed-tag[data-sel="1"]{background:var(--acao-suave);color:var(--lima);box-shadow:none}
.ed-tag[data-sel="1"]:hover{background:rgba(161,214,33,.22)}
.ed-tag[data-sel="parcial"]{background:var(--acao-suave);color:var(--lima);
  box-shadow:inset 0 0 0 1px rgba(161,214,33,.55)}
.ed-tag[data-sel="parcial"]:hover{background:rgba(161,214,33,.22)}
.ed-tag-rot{border:0;background:none;color:inherit;cursor:pointer;
  font:var(--p-normal) var(--t-ui)/1 var(--fonte);
  padding:0 var(--e3);min-height:2rem;max-width:12rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-tag-rot[disabled]{cursor:not-allowed;opacity:.5}
.ed-tag[data-sel="1"] .ed-tag-rot,.ed-tag[data-sel="parcial"] .ed-tag-rot{
  padding-right:var(--e1)}
.ed-tag-n{font-size:var(--t-codigo);color:var(--texto-tenue);padding-right:var(--e1);
  font-variant-numeric:tabular-nums}
.ed-tag-x{display:flex;align-items:center;justify-content:center;flex:none;
  width:2rem;height:2rem;border:0;border-radius:50%;cursor:pointer;
  background:none;color:var(--texto-tenue)}
.ed-tag-x:hover{background:rgba(255,107,94,.18);color:var(--erro)}
.ed-tag-x .i{width:.8rem;height:.8rem;stroke-width:2.6}
.ed-mais{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2rem;height:2rem;border:1px dashed var(--borda-forte);border-radius:50%;
  cursor:pointer;background:none;color:var(--texto-suave);
  transition:border-color var(--transicao),color var(--transicao),background var(--transicao)}
.ed-mais:hover{border-color:var(--lima);color:var(--lima);background:var(--acao-suave)}
.ed-mais .i{width:.9rem;height:.9rem;stroke-width:2.4}
.ed-vazio{font-size:var(--t-ui);color:var(--texto-tenue)}

/* popover do + : formulario curto, nao lista.
   O display so pode ser declarado no estado aberto: `display:flex` solto
   vence o `display:none` que o navegador aplica a popover fechado, e o
   formulario aparecia inline embaixo das tags. */
.pop-novo{min-width:min(92vw,17rem);padding:var(--e3)}
.pop-novo:popover-open{display:flex;flex-direction:column;gap:var(--e2)}
.pop-titulo{margin:0;font-size:var(--t-codigo);font-weight:var(--p-medio);
  text-transform:uppercase;letter-spacing:.06em;color:var(--texto-tenue)}
.pop-novo .pop-busca{margin:0}
.pop-erro{margin:0;font-size:var(--t-codigo);color:var(--erro);line-height:1.4}
.pop-erro[hidden]{display:none}

/* ---------- gerenciador de tags e facetas ---------- */
.dlg-vocab .dlg-grupos{gap:0;padding:var(--e2) var(--e3)}
.dlg-vocab .dlg-trilho button{display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
.vc-n{font-size:var(--t-codigo);color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.dlg-trilho button[aria-current="true"] .vc-n{color:inherit;opacity:.8}
.vc-item{display:flex;align-items:center;gap:var(--e3);min-height:3rem;
  padding:0 var(--e2);border-bottom:1px solid var(--borda)}
.vc-item:last-child{border-bottom:0}
.vc-item:hover{background:var(--superficie-alta)}
.vc-nome{flex:1;min-width:0;font-size:var(--t-ui);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.vc-campo{flex:1;min-width:0;min-height:var(--alvo);padding:0 var(--e3);
  border-radius:var(--r-sm);border:1px solid var(--lima);
  background:var(--fundo);color:var(--texto);font:var(--p-normal) var(--t-ui) var(--fonte)}
.vc-meta{display:flex;align-items:center;gap:var(--e2);flex:none}
.vc-uso{font-size:var(--t-codigo);color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.vc-selo{font-size:.625rem;font-weight:var(--p-medio);letter-spacing:.04em;
  text-transform:uppercase;border-radius:4px;padding:.15rem .4rem}
.vc-selo.regra{background:var(--superficie-alta);color:var(--texto-suave)}
.vc-selo.manual{background:var(--acao-suave);color:var(--lima)}
.vc-acoes{display:flex;gap:var(--e1);flex:none}
.vc-apagar:hover{color:var(--erro)}
.dlg-vocab .dlg-pe{gap:var(--e3)}
.dlg-vocab .dlg-pe .ed-status{flex:1;min-width:0}
body.com-editor .corpo{margin-right:clamp(20rem,27vw,24rem)}

/* ---------- telefone ---------- */
/* Entre o desktop largo e o celular a fileira de pilulas de faceta ja esta
   apertada; os tres presos a direita cedem o rotulo antes de ela sumir. */
@media (max-width:1180px){
  .filtros-fixos .pilula .txt{display:none}
  .filtros-fixos .pilula{padding:0 var(--e3)}
  .pilula-fav .n:not(:empty){margin-left:calc(var(--e1) * -1)}
}

@media (max-width:860px){
  /* A marca sai da tela mas fica na arvore de acessibilidade: a pagina nao
     pode ficar sem <h1>. Busca e Editar dividem a unica linha do topo. */
  .topo-linha{grid-template-columns:minmax(0,1fr) auto;gap:var(--e2);padding:var(--e2) var(--e3)}
  .marca{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .busca-caixa{grid-area:1/1;width:100%}
  .topo-acoes{grid-area:1/2}
  .btn-editar,.btn-entrar{width:var(--alvo);padding:0;justify-content:center}
  .btn-editar span,.btn-entrar span{display:none}
  /* digitando, o seletor de escopo sai da frente e o campo fica inteiro.
     A classe vem do JS em vez de :has(#q:focus) porque so o campo de texto
     conta: com :focus-within o seletor sumiria no instante em que voce
     fosse mexer nele. */
  .busca-caixa.digitando .escopo{display:none}
  /* So o botao global de Filtros: a fileira de pilulas que rolava de lado
     comia uma faixa inteira da tela para mostrar tres facetas por vez. O
     modal abre todas numa tela so, que e o caminho honesto no celular. */
  .barra-filtros{padding:0 var(--e3) var(--e3)}
  .filtros-rolagem{display:none}
  .filtros-fixos{margin-left:auto}
  .corpo{padding:var(--e4) var(--e3)}
  .grade{--h-linha:150px}
  .grade[data-tamanho="grande"]{--h-linha:220px}
  /* No toque o cartão é só a foto. Forçar legenda e ações sempre visíveis
     cobria metade de um cartão de 136px com texto quebrado em sete linhas e
     três botões por cima. Quem toca abre o detalhe, onde tudo isso cabe —
     inclusive selecionar. */
  /* No toque nao existe hover, entao a acao nao pode morar nele. Em vez de
     revelar tudo (sete linhas de legenda e tres botoes sobre um cartao de
     150px), o cartao guarda so as duas acoes que valem a pena ter na grade
     -- favoritar e selecionar -- sempre visiveis. Baixar, ver e abrir no
     Flickr ficam a um toque, no visualizador, onde ha espaco de sobra. */
  .cartao::before,.cartao .legenda{display:none}
  .cartao .acoes{gap:2px;top:var(--e1);right:var(--e1)}
  /* sem hover, os dois da grade ficam sempre no fluxo; baixar e ver moram no
     visualizador, e no toque nao ha teclado para perde-los */
  .cartao .acoes > a,
  .cartao .acoes > button:not(.acao-sel):not(.acao-fav){display:none}
  .cartao .acoes .acao-sel,.cartao .acoes .acao-fav{
    position:static;opacity:1;pointer-events:auto}
  .cartao .acoes button{width:2rem;height:2rem}
  .cartao .acoes .i{width:.95rem;height:.95rem}
  .ed-ver{display:inline-flex}
  .dlg-corpo{grid-template-columns:1fr}
  .dlg-trilho{flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--borda)}
  .dlg-trilho button{white-space:nowrap}
  /* Versao compacta: a lateral virou gaveta e nao pode comer a tela toda.
     Cada grupo nasce fechado, mostrando so o que ja esta marcado, e o
     "todas" abre o vocabulario inteiro daquela faceta. */
  .editor{top:auto;left:0;width:auto;max-height:46vh;border-left:0;
    border-top:1px solid var(--borda);border-radius:var(--r-md) var(--r-md) 0 0}
  .editor-topo{padding:var(--e2) var(--e3)}
  .editor-rolagem{padding:var(--e3);gap:var(--e3)}
  .editor-topo-linha strong{font-size:var(--t-codigo);text-transform:uppercase;
    letter-spacing:.06em;color:var(--texto-tenue)}
  .ed-grupos{gap:var(--e3)}
  .ed-grupo:not([data-aberto]) .ed-tag[data-sel=""]{display:none}
  .ed-grupo:not([data-aberto])[data-vazio="1"] .ed-linha::before{
    content:'nenhuma';font-size:var(--t-ui);color:var(--texto-tenue)}
  .ed-tag-rot{min-height:1.75rem;max-width:9rem}
  .ed-tag-x,.ed-mais{width:1.75rem;height:1.75rem}
  .ed-alvo{font-size:var(--t-codigo)}
  #ed-todos{min-height:2rem;font-size:var(--t-codigo)}
  body.com-editor .corpo{margin-right:0}
  /* a barra continua: e dela que sai "selecionar todos" */
  .selbar{padding:var(--e1) var(--e2)}
  .sel-todos span{display:none}
  .sel-todos{padding:0 var(--e2)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- entrar (login do administrador) --------------------------------
   Caixa estreita e de uma coluna: é um formulário de dois campos, não uma
   tela. O mesmo .dlg-topo e .dlg-pe dos outros diálogos, para que entrar
   pareça parte da ferramenta e não um enxerto. */
.dlg-entrar{border:0;padding:0;width:min(94vw,26rem);
  border-radius:var(--r-md);background:var(--superficie);color:var(--texto);
  box-shadow:var(--sombra-2);overflow:hidden}
.dlg-entrar::backdrop{background:rgba(0,0,0,.7)}
.dlg-entrar[open]{display:block}
.dlg-entrar .dlg-topo{justify-content:space-between}
.entrar-corpo{display:flex;flex-direction:column;gap:var(--e4);padding:var(--e4)}
.entrar-nota{margin:0;color:var(--texto-suave);font-size:var(--t-apoio,.875rem);line-height:1.5}
.entrar-campo{display:flex;flex-direction:column;gap:var(--e2)}
.entrar-campo span{font-size:var(--t-ui);color:var(--texto-suave)}
.entrar-campo input{min-height:var(--alvo);padding:0 var(--e3);
  border-radius:var(--r-sm);border:1px solid var(--borda-forte);
  background:var(--fundo);color:var(--texto);
  font:var(--p-normal) var(--t-ui) var(--fonte)}
.entrar-campo input:focus-visible{outline:2px solid var(--acao);outline-offset:1px}
.entrar-erro{margin:0;color:var(--erro);font-size:var(--t-ui);line-height:1.5}
.entrar-erro[hidden]{display:none}
.dlg-entrar .dlg-pe{justify-content:flex-end}

/* Quem está logado: o nome e a porta de saída, discretos, ao lado de Editar. */
.sessao{display:flex;align-items:center;gap:var(--e2)}
.sessao-nome{font-size:var(--t-ui);color:var(--texto-suave);white-space:nowrap}
@media (max-width:40rem){ .sessao-nome{display:none} }