:root {
  --blau: #0b5fa5;
  --blau-fosc: #073a67;
  --gris-clar: #f2f4f6;
  --gris-vora: #d7dce1;
  --gris-text: #3b4450;
  --verd-ok: #1e7e34;
  --taronja: #b25400;
  --vermell: #a4262c;
  --radi: 10px;
  --toc: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gris-clar);
  color: #14181d;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
}

header {
  background: var(--blau-fosc);
  color: #fff;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 {
  margin: 0 0 10px 0;
  font-size: 1.15rem;
  font-weight: 600;
}

#cerca {
  width: 100%;
  font-size: 1.4rem;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radi);
  min-height: var(--toc);
}

#cerca:focus {
  outline: 3px solid #ffb703;
}

.filtres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 0 16px;
}

.filtre {
  font-size: 1rem;
  padding: 10px 16px;
  min-height: var(--toc);
  border-radius: 999px;
  border: 2px solid var(--gris-vora);
  background: #fff;
  color: var(--gris-text);
  cursor: pointer;
}

.filtre.actiu {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
  font-weight: 600;
}

main {
  padding: 12px 16px 60px 16px;
  max-width: 900px;
  margin: 0 auto;
}

#estat {
  color: var(--gris-text);
  font-size: 0.95rem;
  padding: 8px 2px;
}

.grup-marca > h2 {
  font-size: 1.05rem;
  color: var(--blau-fosc);
  border-bottom: 2px solid var(--gris-vora);
  padding-bottom: 4px;
  margin-top: 22px;
}

.grup-model {
  margin-top: 10px;
}

.grup-model > h3 {
  font-size: 1.05rem;
  margin: 14px 0 6px 0;
  color: #14181d;
}

.grup-maquina > h4 {
  font-size: 0.95rem;
  margin: 10px 0 6px 4px;
  color: var(--gris-text);
  font-weight: 600;
}

.resultat-item {
  margin-bottom: 12px;
}

.resultat {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--gris-vora);
  border-radius: var(--radi) var(--radi) 0 0;
  padding: 14px 16px;
  cursor: pointer;
  min-height: var(--toc);
  text-decoration: none;
  color: inherit;
}

.btn-recanvi {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  min-height: var(--toc);
  border: 2px solid var(--blau);
  border-top: none;
  border-radius: 0 0 var(--radi) var(--radi);
  background: #fff;
  color: var(--blau);
  cursor: pointer;
}

.btn-recanvi:hover,
.btn-recanvi:active {
  background: var(--blau);
  color: #fff;
}

.btn-recanvi-deshabilitat,
.btn-recanvi:disabled {
  border-color: var(--gris-vora);
  color: #9aa3ad;
  background: #f7f8fa;
  cursor: default;
  font-weight: 400;
}

.btn-recanvi-deshabilitat:hover,
.btn-recanvi:disabled:hover {
  background: #f7f8fa;
  color: #9aa3ad;
}

.resultat:active,
.resultat:hover {
  border-color: var(--blau);
  background: #f7fbff;
}

.resultat .nom {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 4px;
  word-break: break-word;
}

.resultat .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.etiqueta {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--gris-clar);
  color: var(--gris-text);
  border: 1px solid var(--gris-vora);
}

.etiqueta.tipus-manual { background: #e7f0fb; color: var(--blau-fosc); border-color: #bcd6f2; }
.etiqueta.tipus-esquema { background: #fdf0e0; color: var(--taronja); border-color: #f3d3a6; }
.etiqueta.tipus-despiece { background: #e9f6ec; color: var(--verd-ok); border-color: #bfe4c6; }
.etiqueta.tipus-butlleti { background: #fbe9ea; color: var(--vermell); border-color: #f0c3c6; }
.etiqueta.avis { background: #fbe9ea; color: var(--vermell); border-color: #f0c3c6; font-weight: 600; }

.resultat-sense-enllac {
  cursor: default;
  opacity: 0.85;
}

.resultat-sense-enllac:active,
.resultat-sense-enllac:hover {
  border-color: var(--gris-vora);
  background: #fff;
}

.resultat .carpeta {
  color: #6b7480;
  font-size: 0.82rem;
  margin-top: 4px;
  word-break: break-word;
}

.resultat .fragment-pagina {
  color: var(--gris-text);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--gris-vora);
  word-break: break-word;
}

.resultat .fragment-pagina .pagina {
  font-style: normal;
  font-weight: 600;
  color: var(--blau);
}

.multi {
  color: var(--blau);
  font-size: 0.8rem;
}

.assistent-ia {
  background: #fff;
  border: 1px solid var(--gris-vora);
  border-left: 4px solid var(--blau);
  border-radius: var(--radi);
  padding: 12px 14px;
  margin: 10px 0 16px 0;
}

.assistent-titol {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blau-fosc);
  margin-bottom: 8px;
}

.assistent-camp {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 2px solid var(--gris-vora);
  border-radius: var(--radi);
  resize: vertical;
  min-height: var(--toc);
}

.assistent-camp:focus {
  outline: none;
  border-color: var(--blau);
}

.assistent-boto {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  min-height: var(--toc);
  border: none;
  border-radius: var(--radi);
  background: var(--blau);
  color: #fff;
  cursor: pointer;
}

.assistent-boto:hover {
  background: var(--blau-fosc);
}

.assistent-boto:disabled {
  background: var(--gris-vora);
  color: #6b7480;
  cursor: default;
}

.assistent-resposta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gris-vora);
}

.assistent-resposta p {
  margin: 0 0 6px 0;
}

.assistent-carregant p {
  color: var(--gris-text);
  font-style: italic;
}

.assistent-error p {
  color: var(--vermell);
}

.assistent-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.assistent-fonts-titol {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-text);
  margin-top: 10px;
}

.assistent-fonts {
  margin: 4px 0 0 0;
  padding-left: 20px;
  font-size: 0.9rem;
}

.assistent-fonts li {
  margin-bottom: 4px;
  word-break: break-word;
}

.assistent-fonts a {
  color: var(--blau);
}

.assistent-ok .btn-recanvi {
  margin-top: 10px;
  border-radius: var(--radi);
  border-top: 2px solid var(--blau);
}

.buit {
  text-align: center;
  padding: 60px 16px;
  color: var(--gris-text);
}

.buit .icona {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

footer {
  text-align: center;
  color: #8a93a0;
  font-size: 0.8rem;
  padding: 20px;
}

@media (min-width: 700px) {
  html, body { font-size: 17px; }
}