/* Tela inicial: busca e lista de fichas. */
.inicio { max-width: var(--largura-pagina); margin: 0 auto; padding: var(--e10) var(--e4) var(--e8); }

.inicio__topo { display: grid; gap: var(--e5); margin-bottom: var(--e8); }
.inicio__sobre { font-size: var(--t-sm); font-weight: 600; color: var(--marca); letter-spacing: 0.02em; }
.inicio__titulo { font-size: clamp(var(--t-2xl), 5vw, var(--t-3xl)); font-weight: 700; letter-spacing: -0.03em; }

.busca { position: relative; }
.busca__icone { position: absolute; left: var(--e4); top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; transition: color var(--dur-1) var(--suave); }
.busca:focus-within .busca__icone { color: var(--marca); }
.busca__campo {
  width: 100%; height: 56px; padding: 0 var(--e12) 0 52px;
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--superficie); font-size: var(--t-md);
  box-shadow: var(--sombra-1);
  transition: border-color var(--dur-1) var(--suave), box-shadow var(--dur-2) var(--suave);
}
.busca__campo::placeholder { color: var(--texto-3); }
.busca__campo:hover { border-color: var(--borda-forte); }
.busca__campo:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.busca__campo::-webkit-search-cancel-button { display: none; }
.busca__limpar { position: absolute; right: 6px; top: 6px; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.filtros .segmentado { overflow-x: auto; scrollbar-width: none; }

.grupo { margin-bottom: var(--e8); }
.grupo__titulo {
  margin-bottom: var(--e3); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3);
}
.grade { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.item {
  display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 76px;
  padding: var(--e4); text-align: left;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g);
  transition: transform var(--dur-2) var(--suave), box-shadow var(--dur-2) var(--suave), border-color var(--dur-1) var(--suave);
}
.item:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
.item:active { transform: translateY(0) scale(0.99); }
.item__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.item__nome { font-weight: 600; letter-spacing: -0.01em; }
.item__meta { font-size: var(--t-sm); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item__seta { color: var(--borda-forte); transition: transform var(--dur-2) var(--suave), color var(--dur-1) var(--suave); }
.item:hover .item__seta { transform: translateX(3px); color: var(--marca); }

.contagem { margin-bottom: var(--e4); font-size: var(--t-sm); color: var(--texto-3); }

@media (min-width: 720px) {
  .inicio { padding-top: var(--e16); }
}

/* Fila de tópicos com rolagem lateral */
.trilho {
  display: flex; gap: var(--e2); width: 100%; margin: 0 calc(var(--e4) * -1); padding: 2px var(--e4);
  width: calc(100% + var(--e4) * 2); overflow-x: auto; scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho__opcao {
  flex: none; min-height: 40px; padding: 0 var(--e4);
  border: 1px solid var(--borda); border-radius: var(--raio-total); background: var(--superficie);
  font-size: var(--t-sm); font-weight: 500; color: var(--texto-2); white-space: nowrap;
  transition: background-color var(--dur-2) var(--suave), color var(--dur-1) var(--suave), border-color var(--dur-1) var(--suave), transform var(--dur-1) var(--suave);
}
.trilho__opcao:hover { border-color: var(--borda-forte); color: var(--texto); }
.trilho__opcao:active { transform: scale(0.97); }
.trilho__opcao[aria-checked="true"] { background: var(--texto); border-color: var(--texto); color: var(--fundo); }

.grupo .chamada { margin-bottom: var(--e4); }
.grupo .chamada .lista > li { color: var(--texto); }

/* Impede que a fila de tópicos alargue a página: ela rola dentro do próprio espaço. */
.inicio__topo { grid-template-columns: minmax(0, 1fr); }
.filtros { min-width: 0; }
.filtros .trilho { flex: 1 1 100%; min-width: 0; }