/* ============================================================================
   BIBLIOTECA DE DATASHEETS — /datasheets-e-documentos
   Redesenho 2026-08-11. Escopo fechado em `.dts` (nada vaza para o site).
   ----------------------------------------------------------------------------
   A página é uma FERRAMENTA DE BUSCA, não uma vitrine: 3.213 documentos de
   3.019 PDFs, e o visitante quase sempre chega com um modelo na cabeça
   ("preciso do datasheet do Deye SUN-5K"). Três decisões saíram do dado, não
   do gosto:

   1. MARCA virou o filtro principal. São 100 marcas contra 4 categorias — e
      não havia filtro de marca nenhum. É o eixo com poder de corte.
   2. CATEGORIA virou segmento, não dropdown. Com 4 opções, um <select> esconde
      a informação atrás de um clique sem economizar espaço nenhum.
   3. A linha "Datasheet" saiu de baixo de cada título: `documentos.nome` é a
      string "Datasheet" em 3.273 de 3.273 registros. Repetir 20 vezes por tela
      um rótulo que nunca varia é ruído. No lugar entrou metadado que VARIA:
      marca, categoria e o peso real do arquivo.

   Superfície: SaaS claro. Uma laje branca por bloco, fio de 1px, sombra curta,
   verde só em acento e estado. Tipografia e paleta vêm dos tokens do site
   (--v-*, --vs-*, --sil-*): esta folha não inventa cor nem fonte.
   ============================================================================ */

.dts{
  --dts-linha:#e7ecea;          /* fio neutro; o verde fica para acento */
  --dts-linha-forte:#dbe3df;
  --dts-tinta:var(--vs-900);    /* #0f1c15 */
  --dts-mudo:var(--vs-500);     /* #63866f */
  --dts-fraco:var(--vs-400);    /* #8fae9d */
  --dts-lavagem:#f7faf8;
  --dts-raio:16px;
  --dts-raio-sm:11px;
  /* sombra puxada para o preto-verde, não para o preto-azul (16,24,40): numa
     página de uma cor só, a sombra azulada é a peça que denuncia o cinza */
  --dts-sombra:0 1px 2px rgba(9,32,20,.04), 0 10px 26px -16px rgba(9,32,20,.18);
  --dts-anel:0 0 0 3px rgba(21,163,74,.16);

  /* ---- ESCALA DE ESPAÇO ---------------------------------------------------
     Medida a versão anterior: os vãos verticais eram 16 / 11 / 10 / 24 / 18 /
     11px. Um H1 de 36px recebia os mesmos 10px de ar que uma sobrancelha de
     11px — ou seja, o espaço não dizia NADA sobre a hierarquia, e a página
     lia como empilhamento em vez de composição.

     A escala abaixo é dobrada (4·2ⁿ) e o uso segue uma regra só: o espaço
     DENTRO de um grupo é sempre menor que o espaço ENTRE grupos. Sobrancelha,
     título e lead são um bloco (--e3/--e4); a cabeça e a ferramenta de busca
     são blocos diferentes (--e7). É a proximidade que agrupa, não a borda. */
  --e1:.25rem;   /*  4px */
  --e2:.5rem;    /*  8px */
  --e3:1rem;     /* 16px — alinhado ao token global: o spacer-3 do Bootstrap
                    e 16, e ate 2026-09-04 este escopo dizia 14 com o MESMO
                    nome de token, divergindo do resto do site. */
  --e4:1.125rem; /* 18px */
  --e5:1.5rem;   /* 24px */
  --e6:2rem;     /* 32px */
  --e7:3rem;     /* 48px */

  font-family:var(--sil-fonte);
  color:var(--dts-tinta);
  /* a página começa colada na faixa verde do cabeçalho se não pedir o ar */
  padding:clamp(1.5rem,3vw,2.25rem) 0 clamp(3rem,6vw,5rem);
}
/* a trilha é outra ZONA (onde estou), não parte do título: some do bloco da
   cabeça com um vão inteiro, senão vira a primeira linha do cabeçalho */
.dts nav[aria-label="breadcrumb"]{padding-top:0 !important;}   /* .pt-4 do bootstrap */
.dts .breadcrumb{margin:0 0 var(--e6) !important;}             /* .mb-3 do bootstrap */
.dts *{box-sizing:border-box;}
.dts a{text-decoration:none;}

/* ---- a MEDIDA desta página ----------------------------------------------
   O site solta --sil-wrap para min(92vw,1880px) acima de 1400px, e isso é
   certo para GRADE DE CARTÕES: mais largura = mais cartão por fileira.

   Aqui não. A linha é nome + metadado + botão; a 1920 o --sil-wrap dá 1766px
   e a coluna do nome fica com ~1300px para um texto de ~40 caracteres. O
   resultado é um vão morto no meio da linha e os números do topo jogados a
   1,3m do título — o olho perde a ligação entre as duas pontas.

   Trava em 1320px: a medida clássica do site. Abaixo de 1400 nada muda (é
   exatamente o que as outras páginas usam), acima dela a página simplesmente
   para de crescer em vez de esticar. */
/* 2026-09-04: era `max-width:1320px` fixo. O quadro da PAGINA agora e o mesmo
   de todas as outras (--sil-wrap); a medida de leitura, se precisar, e
   propriedade do CONTEUDO, nao da pagina. Com o teto do token em 1600 a lista
   nao vira faixa ilegivel, que era a razao do 1320 travado. */
.dts-wrap{max-width:var(--sil-wrap);margin:0 auto;padding:0 var(--sil-gut);}

/* ---------------------------------------------------------------------------
   1. CABEÇA + PAINEL DE NÚMEROS
   O número não é enfeite: "3.213 documentos de 100 marcas" é a resposta à
   primeira pergunta de quem chega ("vale a pena procurar aqui?"). Por isso ele
   fica na mesma linha do título, e não numa faixa solta.
   --------------------------------------------------------------------------- */
/* ---- NÍVEIS DE SUPERFÍCIE -------------------------------------------------
   O problema da versão anterior não era espaço: eram CINCO objetos com
   tratamento idêntico (cabeça, números, busca, trilho de filtros e lista —
   todos branco, fio de 1px, raio 16 e a mesma sombra) boiando sobre o cinza.
   Quando tudo tem o mesmo peso, nada tem peso, e a tela lê como uma pilha de
   blocos de template.

   Passam a existir três níveis, e cada coisa fica em UM deles:
     1. FUNDO   — o cinza da página. O trilho de filtros mora aqui: filtro é
                  controle, não conteúdo, e não deve competir com o resultado.
     2. LAJE    — branco elevado. Só duas peças: o painel do topo e a lista.
     3. ÂNCORA  — a faixa verde-escura dos números, o único ponto de valor
                  forte da tela. É o que segura o olho antes de ele descer.  */
.dts-painel{
  background:#fff;
  border:1px solid var(--dts-linha);
  border-radius:22px;
  box-shadow:var(--dts-sombra);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  margin:0 0 var(--e7);
}

.dts-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
  margin:0 0 var(--e7);
}
.dts-eyebrow{
  display:inline-flex;align-items:center;gap:var(--e2,.5rem);
  font-size:var(--sil-sobrancelha);
  font-weight:var(--sil-sobrancelha-peso);
  letter-spacing:var(--sil-sobrancelha-tracking);
  text-transform:uppercase;
  color:var(--v-700);
  background:var(--v-50);
  border:1px solid #d6efdf;
  border-radius:999px;
  padding:.35rem .8rem;
  margin:0 0 var(--e2);
}
.dts-head h1{
  font-size:var(--sil-tit-pag);
  font-weight:var(--sil-tit-pag-peso);
  color:var(--sil-tit-pag-tinta);
  letter-spacing:var(--sil-tit-pag-tracking);
  line-height:var(--sil-tit-pag-altura);
  margin:0;
}
.dts-lead{
  font-size:var(--sil-lead);
  line-height:var(--sil-lead-altura);
  color:var(--sil-lead-tinta);
  max-width:62ch;
  margin:var(--e3) 0 0;
}

/* nível 3 — a ÂNCORA. Três cartões brancos soltos somem num painel branco;
   uma faixa escura contínua vira a peça mais pesada da tela e dá ao verde da
   marca o único lugar onde ele aparece com autoridade, não como enfeite. */
.dts-kpis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(135deg,var(--v-800),var(--v-950));
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 30px -18px rgba(7,47,22,.75);
}
.dts-kpi{
  padding:var(--e4) var(--e5);
  border-right:1px solid rgba(255,255,255,.13);
  min-width:0;
}
.dts-kpi:last-child{border-right:0;}
.dts-kpi-n{
  display:block;
  font-size:var(--sil-num,1.75rem);font-weight:800;line-height:1.05;
  color:#fff;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;   /* números não dançam entre estados */
}
.dts-kpi-r{
  display:block;margin-top:var(--e1);
  font-size:var(--sil-sobrancelha,.6875rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------------------
   2. BARRA DE BUSCA
   É a ação principal da página, então tem porte de ação principal: 56px de
   altura, ocupando a largura toda, com o botão sólido dentro do campo.
   --------------------------------------------------------------------------- */
.dts-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--e3);
  margin:0;                       /* última peça do painel */
}
/* dentro de uma laje branca, o campo NÃO pode ser outra laje branca elevada:
   ele afunda (fundo lavado, sem sombra) e só sobe no foco */
.dts-busca{
  position:relative;display:flex;align-items:center;
  background:var(--dts-lavagem);
  border:1px solid var(--dts-linha-forte);
  border-radius:999px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.dts-busca:focus-within{background:#fff;}
.dts-busca:focus-within{border-color:var(--v-500);box-shadow:var(--dts-anel);}
.dts-busca-lupa{
  position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);
  color:var(--dts-fraco);font-size:1rem;pointer-events:none;
}
.dts-busca:focus-within .dts-busca-lupa{color:var(--v-700);}
.dts-busca input{
  /* `width:0` além do `min-width:0`: o tamanho INTRÍNSECO do <input> (20
     caracteres) é o que a faixa usa para calcular o próprio min-content. Zerar
     a largura de base tira o campo dessa conta e o `flex:1` o devolve inteiro. */
  flex:1;min-width:0;width:0;
  height:64px;                       /* ação principal da página: porte de ação principal */
  border:0;outline:0;background:transparent;
  padding:0 .5rem 0 3.25rem;
  font-family:inherit;font-size:var(--sil-lead,1.0625rem);color:var(--dts-tinta);
  border-radius:999px;
}
.dts-busca input::placeholder{color:var(--dts-fraco);}
.dts-busca input::-webkit-search-cancel-button{-webkit-appearance:none;display:none;}
.dts-busca-x{
  flex:none;display:none;align-items:center;justify-content:center;
  width:38px;height:38px;margin-right:.4rem;border:0;border-radius:50%;
  background:var(--vs-100);color:var(--dts-mudo);cursor:pointer;font-size:.85rem;
}
.dts-busca-x:hover{background:var(--vs-200);color:var(--dts-tinta);}
.dts-busca.tem-texto .dts-busca-x{display:inline-flex;}
.dts-busca-btn{
  flex:none;height:50px;margin:0 .45rem 0 0;padding:0 1.75rem;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--grad-cta);color:#fff;
  font-family:inherit;font-size:var(--sil-rotulo-md,.9375rem);font-weight:600;
  box-shadow:0 10px 20px -12px rgba(21,163,74,.8);
  transition:filter .16s ease, transform .16s ease;
}
.dts-busca-btn:hover{filter:brightness(1.05);transform:translateY(-1px);}

.dts-ordem{
  display:flex;align-items:center;gap:var(--e2,.5rem);
  background:var(--dts-lavagem);border:1px solid var(--dts-linha-forte);
  border-radius:999px;padding:0 1.25rem;height:66px;
}
.dts-ordem label{font-size:var(--sil-rotulo,.8125rem);font-weight:600;color:var(--dts-mudo);margin:0;white-space:nowrap;cursor:pointer;}
/* a pílula tem 64px mas o <select> media 22px: só a faixa de texto respondia ao
   toque. `height:100%` faz o alvo ocupar a pílula inteira. */
.dts-ordem select{
  height:100%;
  border:0;outline:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:var(--sil-rotulo,.8125rem);font-weight:600;color:var(--dts-tinta);
  padding-right:.25rem;
}

/* ---------------------------------------------------------------------------
   3. CORPO: trilho de filtros + resultados
   --------------------------------------------------------------------------- */
.dts-body{display:grid;grid-template-columns:292px minmax(0,1fr);gap:var(--e6);align-items:start;}

/* nível 1 — o trilho vive no FUNDO da página, sem cartão. Filtro é controle,
   não conteúdo: com laje branca própria ele tinha exatamente o mesmo peso
   visual da lista de resultados e os dois competiam pelo olho. Sem moldura,
   o trilho recua e sobra UMA laje no corpo — a que importa. */
.dts-facets{
  position:sticky;top:1rem;              /* acompanha a rolagem da lista */
  background:0;border:0;box-shadow:none;
}
.dts-facet{padding:0 0 var(--e5);margin:0 0 var(--e5);border-bottom:1px solid var(--dts-linha);}
.dts-facet:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.dts-facet-h{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e2,.5rem);
  margin:0 0 var(--e3);
  font-size:var(--sil-sobrancelha,.6875rem);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dts-fraco);
}
.dts-facet-h .dts-limpar{
  font-size:var(--sil-sobrancelha,.6875rem);font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--v-700);cursor:pointer;background:0;border:0;padding:0;
}
.dts-facet-h .dts-limpar:hover{text-decoration:underline;}

/* item de faceta: alvo largo, contagem alinhada à direita */
.dts-opt{
  display:flex;align-items:center;gap:var(--e3,.875rem);
  padding:.62rem .6rem;margin:0 -.35rem;   /* 48px de alvo, o mínimo confortável */
  border-radius:11px;
  font-size:var(--sil-apoio,.8125rem);font-weight:400;color:var(--vs-700);
  cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.dts-opt:hover{background:#fff;color:var(--v-800);box-shadow:var(--dts-sombra);}
.dts-opt-ic{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:9px;
  background:#fff;border:1px solid var(--dts-linha);
  color:var(--dts-fraco);font-size:.78rem;
}
.dts-opt-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dts-opt-c{
  flex:none;font-size:var(--sil-sobrancelha,.6875rem);font-weight:700;color:var(--dts-fraco);
  background:var(--vs-50);border-radius:999px;padding:.1rem .45rem;
  font-variant-numeric:tabular-nums;
}
/* ativo é tinta, não elevação: no trilho (fundo cinza) e na gaveta (fundo
   branco) o mesmo verde-lavado funciona; uma pílula branca some na gaveta */
.dts-opt.ativo{background:var(--v-50);color:var(--v-900);font-weight:700;box-shadow:none;}
.dts-opt.ativo .dts-opt-ic{background:var(--grad-marca);border-color:transparent;color:#fff;}
.dts-opt.ativo .dts-opt-c{background:var(--v-50);color:var(--v-800);}

/* lista de marcas: 100 itens não cabem — campo de filtro + rolagem interna */
.dts-marca-busca{
  width:100%;height:42px;margin-bottom:var(--e2);padding:0 .9rem;
  border:1px solid var(--dts-linha-forte);border-radius:11px;
  font-family:inherit;font-size:var(--sil-apoio,.8125rem);color:var(--dts-tinta);
  background:#fff;outline:0;   /* no fundo cinza o campo sobe, não afunda */
}
.dts-marca-busca:focus{border-color:var(--v-500);box-shadow:var(--dts-anel);}
.dts-marcas{max-height:336px;overflow-y:auto;margin:0 -.25rem;padding:0 .25rem;}
.dts-marcas::-webkit-scrollbar{width:8px;}
.dts-marcas::-webkit-scrollbar-thumb{background:var(--vs-200);border-radius:999px;}
.dts-marcas::-webkit-scrollbar-thumb:hover{background:var(--dts-fraco);}
.dts-vazio-marca{font-size:var(--sil-apoio,.8125rem);color:var(--dts-fraco);padding:.5rem .6rem;display:none;}

/* ---------------------------------------------------------------------------
   4. RESULTADOS
   Uma laje branca com linhas separadas por fio — não 20 cartões flutuando.
   Em lista longa o cartão solto vira ruído: a borda repetida 20 vezes compete
   com o conteúdo e o olho perde o eixo de leitura.
   --------------------------------------------------------------------------- */
/* contagem e chips em LINHAS separadas, os dois à esquerda.
   Com os chips à direita eles passavam por baixo do botão flutuante de contato
   do site (`#chat-button`, `position:fixed` no canto direito) e o rótulo do
   filtro ativo ficava cortado pela metade. */
.dts-res-topo{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--e3);
  margin:0 0 var(--e5);padding:0 .15rem;
}
.dts-res-n{font-size:var(--sil-corpo,.9375rem);color:var(--dts-mudo);}
.dts-res-n strong{color:var(--dts-tinta);font-weight:700;font-variant-numeric:tabular-nums;}
.dts-chips{display:flex;gap:var(--e2,.5rem);flex-wrap:wrap;}
.dts-chip{
  display:inline-flex;align-items:center;gap:var(--e2,.5rem);
  background:#fff;border:1px solid var(--dts-linha-forte);border-radius:999px;
  padding:.42rem .55rem .42rem .85rem;
  font-size:var(--sil-rotulo,.8125rem);font-weight:600;color:var(--vs-700);
}
.dts-chip i{font-size:.7rem;color:var(--dts-fraco);}
.dts-chip a{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--vs-100);color:var(--dts-mudo);font-size:var(--sil-sobrancelha,.6875rem);
}
.dts-chip a:hover{background:var(--v-600);color:#fff;}

.dts-lista{
  list-style:none;margin:0;padding:0;
  background:#fff;
  border:1px solid var(--dts-linha);
  border-radius:var(--dts-raio);
  box-shadow:var(--dts-sombra);
  overflow:hidden;
}
.dts-linha{
  position:relative;
  display:grid;
  /* A coluna de identidade tem TETO (2026-09-04). Desde que a pagina passou a
     usar `--sil-wrap` como todas as outras, a 1920 a linha tem 1600px — e um
     `1fr` cru dava ~700px a um titulo de ~30 caracteres, com o resto virando
     calha morta ate as acoes na outra ponta. A medida de leitura e propriedade
     do CONTEUDO, nao da pagina: o quadro segue igual ao do site inteiro e quem
     para de crescer e a coluna. `minmax(0,…)` continua obrigatorio — sem ele o
     min-content do titulo estoura a linha no celular. */
  grid-template-columns:64px minmax(0,56ch) minmax(140px,1fr) auto;
  align-items:center;gap:var(--e5);
  /* 88px de linha era altura de tabela de sistema. 104px dá ao nome do produto
     a mesma folga que ele tem no cartão do catálogo, e o polegar acerta o
     botão de baixar sem mirar. */
  padding:var(--e4) var(--e5);
  border-bottom:1px solid var(--dts-linha);
  transition:background .14s ease;
}
.dts-linha:last-child{border-bottom:0;}
.dts-linha:hover{background:var(--dts-lavagem);}
/* fio verde na borda esquerda: diz QUAL linha está sob o cursor sem pintar a
   linha inteira de verde, que competiria com o botão de baixar */
.dts-linha::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v-600);transform:scaleX(0);transform-origin:left;
  transition:transform .16s ease;
}
.dts-linha:hover::before{transform:none;}

.dts-thumb{
  width:64px;height:64px;border-radius:14px;
  background:var(--dts-lavagem);border:1px solid var(--dts-linha);
  display:grid;place-items:center;overflow:hidden;
}
.dts-thumb img{max-width:46px;max-height:46px;object-fit:contain;}
/* `color:inherit` não é cosmético: o link da miniatura não tem classe, e a
   folha do navegador (`a{color:-webkit-link}`) VENCE a herança do
   `.dts-thumb.vazio` — o glifo da categoria saía azul #0000ee em todo produto
   sem foto que tem página. Medido com Puppeteer, não visto a olho. */
.dts-thumb a{display:grid;place-items:center;width:100%;height:100%;color:inherit;}
/* produto sem foto cadastrada: glifo da categoria, não placa de "sem imagem".
   E ele fica QUIETO. Era um quadrado verde-claro com ícone verde, repetido em
   24 linhas seguidas: o elemento mais repetido da tela era também um dos mais
   coloridos, e virava textura. O que se repete tem que ser o mais silencioso —
   assim a foto de produto de verdade, quando existe, se destaca sozinha. */
.dts-thumb.vazio{background:var(--dts-lavagem);border-color:var(--dts-linha);color:var(--dts-fraco);font-size:1.15rem;}
.dts-linha:hover .dts-thumb.vazio{color:var(--v-600);}

.dts-nome{
  display:block;
  font-size:var(--sil-rotulo-md,.9375rem);font-weight:600;line-height:1.35;
  color:var(--sil-tit-pag-tinta);
  letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
a.dts-nome:hover{color:var(--v-700);}
/* o nome tinha 22px de alvo dentro de uma linha de 101px. A célula inteira de
   identidade (nome + marca + categoria) passa a levar ao produto — é o alvo
   que a pessoa MIRA quando aponta para o item. Só a célula: miniatura, PDF e
   ações continuam com os próprios destinos. */
.dts-linha>div:nth-child(2){position:relative;}
a.dts-nome::after{content:"";position:absolute;inset:0;}
.dts-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:var(--e2);}
/* UM acento verde por linha, e ele é o botão de baixar. O selo da marca era o
   segundo verde da linha e disputava o olho com a ação — vira neutro. */
.dts-marca{
  font-size:var(--sil-sobrancelha,.6875rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--vs-600);background:var(--vs-50);border-radius:7px;padding:.2rem .5rem;
}
.dts-linha:hover .dts-marca{color:var(--v-800);background:var(--v-50);}
.dts-cat{font-size:var(--sil-sobrancelha,.6875rem);color:var(--dts-mudo);}
.dts-ponto{width:3px;height:3px;border-radius:50%;background:var(--dts-fraco);}

.dts-arq{display:flex;align-items:center;gap:var(--e2,.5rem);color:var(--dts-mudo);font-size:.78rem;}
/* a convenção universal aqui seria vermelho (#b42318 sobre #fdeceb), mas a
   página roda numa paleta só. E mesmo em verde ele era um selo colorido
   repetido 24 vezes no meio da tela: pela mesma regra da miniatura, o que se
   repete fica quieto. Só tinta, sem placa. */
.dts-arq-ic{
  flex:none;display:grid;place-items:center;width:26px;height:26px;
  background:0;border:0;color:var(--dts-fraco);font-size:1.05rem;
}
.dts-linha:hover .dts-arq-ic{color:var(--v-600);}
.dts-arq b{display:block;font-size:var(--sil-sobrancelha,.6875rem);font-weight:700;color:var(--vs-700);line-height:1.2;}
.dts-arq span{font-size:var(--sil-sobrancelha,.6875rem);font-variant-numeric:tabular-nums;}

.dts-acoes{display:flex;align-items:center;gap:var(--e1,.25rem);}
/* eram 4 chips cinzas preenchidos por linha — 96 retângulos idênticos numa
   tela de 24 itens, uma parede de ruído à direita. As três ações secundárias
   viram ícones fantasma (só tinta) e só ganham fundo sob o cursor; a única
   com preenchimento permanente é a que a pessoa veio fazer. */
.dts-ac{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:0;color:var(--dts-fraco);font-size:var(--sil-apoio,.8125rem);border:0;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.dts-linha:hover .dts-ac{color:var(--dts-mudo);}
/* as três ações antes acendiam na cor da MARCA de cada canal (verde do
   WhatsApp, azul do e-mail). Ícone já distingue o canal; a cor de marca de
   terceiro só quebrava a paleta. Todas acendem no verde da casa. */
.dts-ac.ver:hover,
.dts-ac.wpp:hover,
.dts-ac.mail:hover{background:var(--v-600);color:#fff;}
/* baixar é a ação que a pessoa veio fazer: é a única com rótulo e peso */
.dts-baixar{
  display:inline-flex;align-items:center;gap:var(--e2,.5rem);
  height:var(--sil-btn-alt-p,40px);padding:0 1.15rem;border-radius:var(--sil-btn-raio,10px);
  background:var(--v-700);color:#fff;
  font-size:var(--sil-rotulo,.8125rem);font-weight:600;
  transition:background .14s ease,transform .14s ease,box-shadow .14s ease;
}
.dts-baixar:hover{background:var(--v-800);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(10,92,42,.9);}

/* ---------------------------------------------------------------------------
   5. VAZIO e PAGINAÇÃO
   --------------------------------------------------------------------------- */
.dts-vazio{
  background:#fff;border:1px solid var(--dts-linha);border-radius:var(--dts-raio);
  box-shadow:var(--dts-sombra);
  padding:clamp(2rem,5vw,3.5rem);text-align:center;
}
.dts-vazio-ic{
  width:64px;height:64px;margin:0 auto 1rem;border-radius:20px;
  display:grid;place-items:center;font-size:1.5rem;color:var(--v-700);
  background:linear-gradient(135deg,rgba(21,163,74,.12),rgba(34,197,94,.22));
}
.dts-vazio h2{font-size:var(--sil-tit-sec);font-weight:700;color:var(--sil-tit-pag-tinta);margin:0 0 .5rem;}
.dts-vazio p{font-size:var(--sil-lead);color:var(--sil-lead-tinta);margin:0 auto 1.4rem;max-width:46ch;}
.dts-vazio-cta{
  display:inline-flex;align-items:center;gap:var(--e2,.5rem);
  background:var(--grad-cta);color:#fff;font-weight:600;font-size:var(--sil-rotulo-md,.9375rem);
  border-radius:999px;padding:.8rem 1.6rem;
  box-shadow:0 12px 26px -14px rgba(21,163,74,.9);
}
.dts-vazio-cta:hover{color:#fff;filter:brightness(1.05);}

.dts-pag{display:flex;align-items:center;justify-content:center;gap:var(--e2,.5rem);margin:var(--e7) 0 0;flex-wrap:wrap;}
.dts-pag a,.dts-pag span{
  min-width:44px;height:44px;padding:0 .8rem;
  display:grid;place-items:center;border-radius:11px;
  background:#fff;border:1px solid var(--dts-linha);
  font-size:var(--sil-rotulo,.8125rem);font-weight:600;color:var(--vs-700);
  font-variant-numeric:tabular-nums;
}
.dts-pag a:hover{border-color:var(--v-500);color:var(--v-800);background:var(--v-50);}
.dts-pag .atual{background:var(--v-700);border-color:var(--v-700);color:#fff;font-weight:700;}
.dts-pag .reticencia{border:0;background:0;color:var(--dts-fraco);min-width:24px;}

/* ---------------------------------------------------------------------------
   6. RESPONSIVO
   O trilho de filtros vira gaveta de baixo para cima: no celular ele ocuparia
   uma tela inteira antes do primeiro resultado.
   --------------------------------------------------------------------------- */
.dts-abrir-filtros{display:none;}

@media (max-width:1199px){
  .dts-body{grid-template-columns:minmax(0,1fr);gap:var(--e5);}
  .dts-head{grid-template-columns:minmax(0,1fr);align-items:start;margin-bottom:var(--e6);}
  .dts-kpis{width:100%;}
}

@media (max-width:900px){
  .dts-linha{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"t i" ". a";row-gap:var(--e3);}
  .dts-thumb{grid-area:t;width:56px;height:56px;}
  .dts-linha>div:nth-child(2){grid-area:i;}
  .dts-arq{display:none;}                 /* o peso do arquivo cede espaço ao nome */
  .dts-acoes{grid-area:a;justify-content:flex-start;}
  .dts-nome{white-space:normal;}
}

@media (max-width:767px){
  .dts{--e6:1.5rem;--e7:2rem;}          /* a escala encolhe junto: 48px de vão numa
                                            tela de 390px come metade da dobra */
  /* a faixa escura encolhe mas não quebra: três células continuam cabendo em
     390px se o número cair para 1.3rem e o rótulo para .6rem */
  .dts-kpi{padding:var(--e3) var(--e2);text-align:center;}
  .dts-kpi-n{font-size:var(--sil-tit-card,1.25rem);}
  .dts-kpi-r{font-size:var(--sil-sobrancelha,.6875rem);letter-spacing:.06em;}

  /* `1fr` = `minmax(auto,1fr)`, e o mínimo `auto` de um grid item é o MIN-CONTENT
     dele. O <input> sem atributo `size` tem min-content de 20 caracteres (~262px
     aqui) e `min-width:0` NÃO derruba isso — min-width é piso, não teto, e a
     faixa é dimensionada pelo min-content dos itens. Resultado medido a 390px:
     track de 364px dentro de um painel de 308px, documento com 405px de largura
     e a metade direita do botão "Buscar" e do seletor de ordem fora da tela.
     `minmax(0,…)` é o que autoriza a faixa a encolher. */
  .dts-bar{grid-template-columns:minmax(0,1fr);}
  .dts-ordem{height:54px;justify-content:space-between;}
  .dts-busca input{height:56px;font-size:var(--sil-corpo,.9375rem);}  /* 16px: abaixo disso o iOS dá zoom ao focar */
  .dts-busca-btn{height:44px;padding:0 1.2rem;}
  .dts-linha{padding:var(--e3) var(--e4);}

  /* gaveta */
  .dts-abrir-filtros{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--e2,.5rem);
    width:100%;height:var(--sil-btn-alt-g,52px);margin:0 0 var(--e3);
    background:#fff;border:1px solid var(--dts-linha-forte);border-radius:var(--sil-btn-raio,10px);
    font-family:inherit;font-size:var(--sil-rotulo,.8125rem);font-weight:600;color:var(--vs-700);
    box-shadow:var(--dts-sombra);cursor:pointer;
  }
  .dts-abrir-filtros .n{
    background:var(--v-600);color:#fff;border-radius:999px;
    font-size:var(--sil-sobrancelha,.6875rem);padding:.1rem .45rem;
  }
  /* no desktop o trilho é transparente (nível 1); como GAVETA ele precisa de
     laje própria de volta, senão a lista aparece através dele */
  .dts-facets{
    position:fixed;inset:auto 0 0 0;top:auto;z-index:1080;
    max-height:82vh;overflow-y:auto;
    background:#fff;
    border-radius:20px 20px 0 0;
    /* a .appbar do cabeçalho é fixa e tem 60px: sem esta folga o último filtro
       da lista fica embaixo dela e não dá para tocar */
    padding:0 var(--e5) 76px;
    transform:translateY(101%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow:0 -18px 40px -20px rgba(9,32,20,.45);
  }
  .dts-facets.aberta{transform:none;}
  /* com a gaveta aberta, os flutuantes do site (farol do tour, balão do
     Silizium, botão de contato) ficam POR CIMA dela e roubam o toque —
     somem enquanto ela estiver aberta e voltam ao fechar */
  body.dts-gaveta .siltour-check-btn,
  body.dts-gaveta #chat-button,
  body.dts-gaveta #jv-orb{display:none !important;}
  .dts-facets-topo{
    display:flex;align-items:center;justify-content:space-between;
    margin:0 calc(var(--e5) * -1) var(--e5);
    padding:1rem var(--e5) .7rem;border-bottom:1px solid var(--dts-linha);
    position:sticky;top:0;background:#fff;z-index:2;
  }
  .dts-facets-topo b{font-size:var(--sil-corpo,.9375rem);}
  /* na gaveta o fundo já é branco: hover branco seria invisível */
  .dts-opt:hover{background:var(--dts-lavagem);box-shadow:none;}
  .dts-fechar{
    display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;
    background:var(--vs-50);color:var(--vs-600);cursor:pointer;
  }
  .dts-veu{
    position:fixed;inset:0;z-index:1079;background:rgba(8,18,12,.42);
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  .dts-veu.aberto{opacity:1;pointer-events:auto;}
  .dts-marcas{max-height:220px;}
}

/* acima de 768px a gaveta não existe: o trilho é permanente */
@media (min-width:768px){
  .dts-facets-topo{display:none;}
  .dts-veu{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .dts *{transition:none !important;}
}