/* ============================================================
   cercador.css — Cercador + etiquetes per al catàleg de tutorials
   Afegeix aquest fitxer amb <link rel="stylesheet" href="cercador.css">
   just abans o després de estilmd.css. Fet servir CSS pla, sense
   dependències, per encaixar amb la resta del teu pipeline.
   ============================================================ */

.cercador-barra {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin: 1.2rem 0;
}

.cercador-input {
  flex: 1 1 260px;
  padding: .55rem .9rem;
  border: 1px solid var(--vora, #ccc);
  border-radius: .5rem;
  font-size: 1rem;
  background: var(--fons-input, #fff);
  color: inherit;
}

.cercador-input:focus {
  outline: none;
  border-color: var(--accent, #3a7bd5);
  box-shadow: 0 0 0 2px rgba(58, 123, 213, .2);
}

.cercador-comptador {
  font-size: .85rem;
  opacity: .7;
  white-space: nowrap;
}

.cercador-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.2rem 0;
}

.cercador-tag {
  cursor: pointer;
  user-select: none;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--vora, #ccc);
  background: var(--fons-tag, #f2f2f2);
  font-size: .85rem;
  line-height: 1.4;
  transition: background .15s, color .15s, border-color .15s;
}

.cercador-tag:hover {
  border-color: var(--accent, #3a7bd5);
}

.cercador-tag.actiu {
  background: var(--accent, #3a7bd5);
  border-color: var(--accent, #3a7bd5);
  color: #fff;
}

.cercador-tag .n {
  opacity: .65;
  font-size: .78em;
  margin-left: .25em;
}

.cercador-tag.actiu .n {
  opacity: .85;
}

/* Segona fila de xips (mòduls SMX/ASIX): lleugerament diferenciada */
.cercador-moduls {
  margin: -.6rem 0 1.2rem 0;
}

.cercador-moduls .cercador-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  background: var(--fons-modul, #eef3fb);
}

.cercador-moduls .cercador-tag.actiu {
  background: var(--accent-modul, #6c9ce0);
  border-color: var(--accent-modul, #6c9ce0);
}

/* Etiquetes petites dins cada targeta del catàleg */
.card-etiquetes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .4rem;
}

.card-etiqueta {
  font-size: .72rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--fons-tag, #eee);
  opacity: .8;
}

.card-etiqueta-modul {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--fons-modul, #eef3fb);
  opacity: 1;
  cursor: help;
}

/* Ocultar targetes filtrades sense afectar el flux de la graella */
.card-oculta {
  display: none !important;
}

.cercador-sense-resultats {
  display: none;
  padding: 2rem 1rem;
  text-align: center;
  opacity: .7;
}