/* ── MODE FOSC ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #1e2a3a;
  --surface:  #1a2535;
  --surface2: #243040;
  --border:   #2e3f54;
  --card-bg:  #1a2535;
  --text:     #e6edf3;
  --muted:    #8b949e;
  --dark:     #0d1520;
  --radius:   16px;
  --accent-yellow: #f0a500;
  --pub-color:  #38bdf8;
  --priv-color: #94a3b8;
  --green:      #10b981;

  /* Notes de tall */
  --nc-alta:  #ef4444;
  --nc-media: #f0a500;
  --nc-baja:  #10b981;
}

/* Fons body */
[data-theme="dark"] body {
  background: linear-gradient(160deg, #1e2a3a 0%, #243040 50%, #1a2535 100%) fixed;
  color: var(--text);
}

/* Header */
[data-theme="dark"] header {
  background: linear-gradient(135deg, #141f2e 0%, #1a2535 70%, #1e2c3e 100%);
}
[data-theme="dark"] header::before { background: rgba(240,165,0,.07); }
[data-theme="dark"] header::after  { background: rgba(240,165,0,.04); }

/* Targetes */
[data-theme="dark"] .card,
[data-theme="dark"] .card-grouped { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .card:hover   { background: var(--surface2); }

/* Inputs i selects */
[data-theme="dark"] select,
[data-theme="dark"] input {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] select:disabled { opacity: .45; }

/* Filtres */
[data-theme="dark"] .filters-section { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .filter-group label { color: var(--muted); }

/* Tabs */
[data-theme="dark"] .tab-btn { background: var(--surface2); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .tab-btn.active { background: var(--dark); color: white; border-color: var(--border); }
[data-theme="dark"] #tab-mapa { background: #1a2d45; color: #60a5fa; border-color: #2563eb44; }
[data-theme="dark"] #tab-mapa.active { background: #1d4ed8; color: white; }
[data-theme="dark"] #tab-comparar { background: #22163a; color: #a78bfa; border-color: #7c3aed44; }
[data-theme="dark"] #tab-comparar.active { background: #6d28d9; color: white; }

/* Cicle items */
[data-theme="dark"] .cicle-item { background: var(--surface2); border-color: var(--border); }
[data-theme="dark"] .cicle-item:hover { background: #2a3a50; }

/* Notes de tall */
[data-theme="dark"] .nota-high { color: #10b981; }
[data-theme="dark"] .nota-mid  { color: #f0a500; }
[data-theme="dark"] .nota-low  { color: #ef4444; }

/* Comparador */
[data-theme="dark"] .comp-col { background: var(--surface2); border-color: var(--border); }
[data-theme="dark"] .comp-nc-table { border-color: var(--border); }

/* Quick btns */
[data-theme="dark"] .quick-btn { background: var(--surface2); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .quick-btn.active { background: var(--dark); color: white; }

/* Reset btn */
[data-theme="dark"] .btn-reset { background: var(--surface2); border-color: var(--border); color: var(--muted); }

/* Empty state */
[data-theme="dark"] #comarca-empty-state { color: var(--muted); }

.theme-btn {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: .35rem .75rem;
  cursor: pointer;
  font-size: .85rem;
  color: white;
  transition: all .2s;
  line-height: 1;
}
.theme-btn:hover { background: rgba(255,255,255,.22); }

/* Header controls — agrupa idioma + tema en la mateixa línia */
.header-controls { display: flex; align-items: center; gap: .4rem; }

/* ── BOTONS HEADER — definits inline al head de index.html ── */
.hdr-btn--mentoria.disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Toggle tema — circular, vora cian */
.theme-btn {
  background: rgba(255,255,255,.12);
  border: 1.5px solid #38bdf8;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: .85rem;
  color: white;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.theme-btn:hover { background: rgba(56,189,248,.2); }

/* header-controls — dues fileres */
.header-controls {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.header-row-1, .header-row-2 {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Dark mode — theme-btn */
[data-theme="dark"] .theme-btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(56,189,248,.4);
  color: white;
}

/* ── Mòbil: header controls ─────────────────────────── */
@media (max-width: 600px) {
  .header-bottom-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-controls {
    width: 100%;
  }
  .header-row-1, .header-row-2 {
    flex-wrap: wrap;
    width: 100%;
  }
  .hdr-btn {
    font-size: .7rem;
    padding: .28rem .65rem;
  }
  .hdr-btn--pauni {
    flex: 1;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
  }
  .legend {
    margin-top: .4rem;
    gap: .6rem;
  }
  .legend-item--note {
    width: 100%;
  }
}