/* ── Comparador ────────────────────────────────────────────── */
#comparador-container {
  padding: 1rem;
  min-height: 200px;
}

.comp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 3rem 1rem;
  color: #64748b;
  text-align: center;
}
.comp-empty p { font-size: .95rem; line-height: 1.5; }

.comp-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#comp-clear-btn {
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  padding: .45rem .9rem;
  font-size: .82rem;
  cursor: pointer;
  font-weight: 600;
}
#comp-clear-btn:hover { background: #dc2626; }

.comp-hint {
  font-size: .8rem;
  color: #94a3b8;
  margin: 0;
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.comp-col {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.comp-remove {
  position: absolute;
  top: .6rem;
  right: .6rem;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: .7rem;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comp-remove:hover { background: #fee2e2; color: #ef4444; }

.comp-nivel {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  padding: .2rem .5rem;
  width: fit-content;
}
.comp-nivel.fpb { background: #dbeafe; color: #1d4ed8; }
.comp-nivel.gm  { background: #d1fae5; color: #065f46; }
.comp-nivel.gs  { background: #ede9fe; color: #5b21b6; }

.comp-fam   { font-size: .78rem; color: #64748b; }
.comp-ciclo { font-size: .97rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
.comp-centro { font-size: .8rem; color: #475569; font-weight: 600; }
.comp-muni  { font-size: .75rem; color: #94a3b8; }
.comp-salidas { font-size: .75rem; color: #64748b; line-height: 1.4; border-top: 1px solid #f1f5f9; padding-top: .4rem; margin-top: .2rem; }

.comp-nc-title {
  font-size: .75rem;
  font-weight: 700;
  color: #475569;
  border-top: 1px solid #f1f5f9;
  padding-top: .5rem;
  margin-top: .2rem;
}
.comp-nc-empty { font-size: .75rem; color: #cbd5e1; border-top: 1px solid #f1f5f9; padding-top: .5rem; margin-top: .2rem; }

.comp-nc-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.comp-nc-table td { padding: .2rem .1rem; }
.comp-cupo-label { color: #64748b; }
.comp-cupo-nota { text-align: right; font-weight: 700; min-width: 2.5rem; }
.nota-high { color: #dc2626; }
.nota-mid  { color: #f97316; }
.nota-low  { color: #16a34a; }

/* Botó + a les targetes */
.btn-comparar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-comparar:hover { border-color: #f97316; color: #f97316; background: #fff7ed; }
.btn-comparar.in-comparador { background: #f97316; color: #fff; border-color: #f97316; }

/* Badge al tab */
#tab-comparar-badge {
  display: none;
  background: #f97316;
  color: white;
  border-radius: 10px;
  padding: 0 .4rem;
  font-size: .7rem;
  font-weight: 700;
  margin-left: .3rem;
  vertical-align: middle;
}

/* ── Similars a la comarca ───────────────────────────── */
.comp-similars { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px dashed var(--border); }
.comp-similars-title { font-size: .9rem; font-weight: 600; color: var(--muted); margin-bottom: .8rem; }
.comp-similars-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.comp-similar-card {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: .4rem .7rem; font-size: .78rem;
  position: relative;
}
.comp-similar-nivel { font-weight: 700; font-size: .7rem; padding: .15rem .4rem; border-radius: 20px; color: white; }
.comp-similar-nivel.fpb { background: var(--fpb-color, #16a34a); }
.comp-similar-nivel.gm  { background: var(--gm-color, #d97706); }
.comp-similar-nivel.gs  { background: var(--gs-color, #7c3aed); }
.comp-similar-ciclo { font-weight: 500; }
.comp-similar-centro { color: var(--muted); }
.comp-similar-muni { color: var(--muted); font-size: .72rem; }
.comp-similar-add {
  margin-left: auto; background: var(--accent, #2563eb); color: white;
  border: none; border-radius: 50%; width: 1.4rem; height: 1.4rem;
  cursor: pointer; font-size: .9rem; line-height: 1; flex-shrink: 0;
}
.comp-similar-add:hover { opacity: .85; }
.comp-similars-more { font-size: .78rem; color: var(--muted); margin-top: .5rem; }

/* ── Badges filtre nivell similars ───────────────────────── */
.comp-similars-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .8rem;
}
.comp-similars-title { margin-bottom: 0; }
.comp-filter-badges { display: flex; gap: .35rem; }
.comp-filter-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  opacity: .55;
  transition: all .15s;
}
.comp-filter-badge.fpb { background: #dcfce7; color: #166534; border-color: #86efac; }
.comp-filter-badge.gm  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.comp-filter-badge.gs  { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.comp-filter-badge.active { opacity: 1; }
.comp-filter-badge:hover { opacity: .85; }

/* ── Missatge màxim 4 ────────────────────────────────────── */
.comp-hint--full {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: .35rem .8rem;
  font-size: .8rem;
}

/* ── TOOLBAR COMPARADOR — Tipus 2 ────────────────────────── */
.comp-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.comp-tb-right { display: flex; gap: .4rem; margin-left: auto; }

.comp-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1.5px solid;
  cursor: pointer;
  font-weight: 600;
  transition: opacity .15s;
}
.comp-tb-btn:disabled { opacity: .35; cursor: not-allowed; }
.comp-tb-btn:not(:disabled):hover { opacity: .85; }

.comp-tb-btn--clear { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.comp-tb-btn--share { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.comp-tb-btn--print { background: #dcfce7; border-color: #86efac; color: #15803d; }

[data-theme="dark"] .comp-tb-btn--clear { background: #3b1f1f; border-color: #6b2f2f; color: #f87171; }
[data-theme="dark"] .comp-tb-btn--share { background: #1a2535; border-color: #2d4a6e; color: #60a5fa; }
[data-theme="dark"] .comp-tb-btn--print { background: #1a2e1a; border-color: #2d5a2d; color: #4ade80; }