/* ════════════════════════════════════════════
   MODULES — Estils específics per mòdul
   Suite Acadèmica · styles/modules.css
   ════════════════════════════════════════════ */

/* ── CHARTS ── */
.charts-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.chart-card       { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r2); padding: 10px; transition: border-color .15s }
.chart-card:hover { border-color: var(--an) }
.chart-card-title {
  font-family: var(--fh); font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  color: var(--txt2); margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ── NA BAR (barra de progrés per a % no assoliment) ── */
.na-bar      { height: 4px; border-radius: 2px; background: var(--b1); overflow: hidden; margin-top: 3px }
.na-bar-fill { height: 100%; border-radius: 2px }

/* ── STRAT CARD (Estratègies i MSU) ── */
.strat-card    { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r2); padding: 10px; margin-bottom: 7px }
.strat-title   { font-family: var(--fh); font-size: .86rem; font-weight: 700; color: var(--txt); display: flex; align-items: center; gap: 7px; margin-bottom: 4px }
.strat-hattie  { font-family: var(--fm); font-size: .68rem; padding: 1px 5px; border-radius: 3px; background: var(--ae-bg); color: var(--ae); border: 1px solid var(--ae-b) }
.ev-bar        { height: 5px; border-radius: 3px; background: var(--b1); overflow: hidden; margin-top: 3px }
.ev-bar-fill   { height: 100%; border-radius: 3px; background: var(--teal) }

/* MSU: detall d'estratègia (toggle show/hide via classe .open) */
.msu-cat-header { font-family: var(--fh); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 10px 0 4px; margin-top: 8px }
.msu-detail     { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--b1) }
.msu-detail.open { display: block }

/* ── CONFIG PANEL ── */
.config-section       { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r2); padding: 16px; margin-bottom: 12px; max-width: 500px }
.config-section-title { font-family: var(--fh); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); margin-bottom: 10px }

/* ── GRADE GRID (entrada manual de qualificacions) ── */
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 6px; padding: 10px }
.grade-row  { display: flex; align-items: center; gap: 5px }
.grade-lbl  { font-family: var(--fh); font-size: .74rem; font-weight: 600; color: var(--txt2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.grade-sel  { display: flex; gap: 2px }
.grade-sel button        { font-family: var(--fm); font-size: .62rem; font-weight: 600; padding: 2px 4px; border: 1px solid var(--b1); border-radius: 3px; cursor: pointer; background: var(--s2); color: var(--txt3) }
.grade-sel button.g-AE   { background: var(--ae-bg); color: var(--ae); border-color: var(--ae-b) }
.grade-sel button.g-AN   { background: var(--an-bg); color: var(--an); border-color: var(--an-b) }
.grade-sel button.g-AS   { background: var(--as-bg); color: var(--as); border-color: var(--as-b) }
.grade-sel button.g-NA   { background: var(--na-bg); color: var(--na); border-color: var(--na-b) }
.grade-num {
  width: 46px; background: var(--s3); border: 1px solid var(--b2); border-radius: 3px;
  color: var(--txt); font-family: var(--fm); font-size: .74rem; padding: 2px 5px; text-align: center;
}
.grade-num:focus { outline: none; border-color: var(--gold) }

/* ── IA / AI OUTPUT ── */
.ai-out {
  background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r2);
  padding: 12px; font-size: .8rem; line-height: 1.75; color: var(--txt);
  min-height: 80px; white-space: pre-wrap;
}
.ai-out h2     { font-family: var(--fh); font-size: .9rem; font-weight: 700; color: var(--gold); margin: 8px 0 4px; letter-spacing: .04em }
.ai-out h3     { font-family: var(--fh); font-size: .82rem; font-weight: 700; color: var(--teal); margin: 6px 0 3px }
.ai-out strong { color: var(--as) }
.ai-out ul     { padding-left: 14px; margin: 3px 0 }
.ai-out li     { margin-bottom: 2px }

.ai-type-btn      { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r2); padding: 10px; cursor: pointer; text-align: left; transition: all .15s; width: 100%; margin-bottom: 6px }
.ai-type-btn:hover { border-color: var(--b2) }
.ai-type-btn.active { border-color: var(--purple); background: #1e1040 }
.ai-type-btn .ai-lbl  { font-family: var(--fh); font-size: .86rem; font-weight: 700; color: var(--txt); letter-spacing: .04em }
.ai-type-btn .ai-desc { font-size: .72rem; color: var(--txt3); margin-top: 2px; line-height: 1.4 }

/* ── SUBJECT MODAL ── */
.subj-modal-wrap { max-width: 700px }

/* ── PRINT ── */
@media print {
  #topbar, #sidebar, .stu-topbar, .tab-bar,
  .btn, button, input, select { display: none !important }

  body      { background: #fff !important; color: #000 !important }
  .panel    { display: block !important }
  .tab-pane { display: block !important; padding: 0 !important }

  /* Força colors de qualificació en impressió */
  .gp.AE { background: #d4f5e4 !important; color: #1a8a5a !important }
  .gp.AN { background: #daeaf8 !important; color: #1a56c8 !important }
  .gp.AS { background: #fde8cc !important; color: #b05010 !important }
  .gp.NA { background: #fde0e0 !important; color: #c02020 !important }
}