/* ============================================================
   Vedruna Escorial Vic — Gestió de Notes
   main.css
   ============================================================ */

/* --- Variables --- */
:root {
  --garnet:       #7B2638;
  --crimson:      #C01E4B;
  --crimson-soft: #e8c4cf;
  --garnet-deep:  #4A1520;
  /* ⚠ AQUESTES SET NO EXISTIEN, I SE'N FEIEN SERVIR 79 VEGADES.

     Una `var(--x)` que no està definida i que no porta color de recanvi
     invalida la declaració SENCERA. Per això hi havia estats «actiu» que no
     es veien: la pestanya triada de la fitxa de grup quedava igual que la de
     sobre-el-ratolí, el dia actiu de Convocar reunions no es distingia, i
     l'assignatura marcada del perfil es quedava blanca (això últim ja es va
     tapar amb un fallback el 29/9/2026, però la causa era aquesta).

     Els valors són els que ja feien servir com a recanvi les regles que sí
     que en portaven, i els mateixos que hi ha escrits al manual. Trobat a
     l'auditoria d'accessibilitat del 29/9/2026. */
  --garnet-text:  #7A1E2E;
  --garnet-mid:   #9B2C42;
  --garnet-soft:  #FBEAED;
  --garnet-soft2: #F5D0D6;
  --bg-alt:       #F7F4F5;
  --bg-card:      #FFFFFF;
  --card:         #FFFFFF;
  --surface:      #FFFFFF;
  --surface-alt:  #F7F4F5;
  --surface-tint: #FBF8F9;
  --text-main:    #1A1014;
  --text-sub:     #6B5560;
  /* ⚠ Era #A08090: 3,2:1 sobre blanc, per sota del 4,5:1 que demana la norma
     (auditoria 6/9/2026). Es va pujar a #8A6B7A i es va donar per bo… mesurant
     -ho sobre BLANC pur, que en aquesta app gairebé no es fa servir.

     La segona auditoria (8/9/2026) ho va tornar a mesurar sobre els fons de
     debò i encara no hi arribava: 4,30:1 sobre el fons de pàgina (#F7F4F5),
     4,46:1 sobre les targetes (#FBF8F9) i 4,05:1 sobre el granat clar
     (#FBEAED). Són 140 aparicions per sota del mínim en 16 pantalles, i és el
     to de tot el text secundari: rètols, pistes, hores del planning,
     comptadors, dates.

     Aquest to arriba a 5,06 / 5,24 / 4,77 sobre aquells tres fons i continua
     essent el mateix gris granatós. Si algun dia es torna a tocar, s'ha de
     mesurar contra #F7F4F5, no contra el blanc. */
  --text-muted:   #7E6070;
  --border:       #E8DFE3;
  --border-strong:#D4C3CA;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --sidebar-w: 268px;
  --ease: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--surface-alt);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--garnet-deep);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--ease);
  overflow-y: auto;
}

/* Botó menú mòbil (amagat per defecte, visible només < 768px) */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 90;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--garnet-deep);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.mobile-menu-btn svg { width: 22px; height: 22px; }
.mobile-menu-btn:active { transform: scale(0.94); }

/* Brand */
.sidebar-brand {
  padding: 22px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 3px; }
.sidebar-brand-date  { font-size: 10px; color: rgba(255,255,255,0.4); }
.sidebar-brand img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  /* Logo té fons blanc — el fem blanc per contrastar amb el fons fosc */
  filter: brightness(0) invert(1);
}
.sidebar-brand-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.3);
  margin-top: 10px;
  letter-spacing: 0.04em;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 10px 10px;
}
.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 10px 5px;
  margin-top: 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--ease);
  text-decoration: none;
  margin-bottom: 1px;
}
.nav-item:hover  { background: rgba(255,255,255,0.07); color: #fff; }
/* El botó d'Eines va just sota les assignatures i, sense res al mig,
   semblava una assignatura més (en Pol, 17/10/2026). La ratlla i l'aire el
   treuen de la llista: és el que hi ha DESPRÉS de les assignatures. */
/* ⚠ La ratlla va en un ::before i no en un `border-top` de l'element: amb
   la vora a sobre, el requadre del ratolí i el de l'apartat obert es
   quedaven amb les cantonades de dalt quadrades. */
.nav-item-eines { margin-top: 17px; position: relative; }
.nav-item-eines::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: -9px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.nav-item.active { background: var(--crimson); color: #fff; font-weight: 500; }
.nav-item svg    { width: 16px; height: 16px; flex-shrink: 0; }

/* Trimestre accordion */
.trim-group { margin-bottom: 2px; }
.trim-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.5);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ease);
  user-select: none;
}
.trim-header:hover  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.trim-header svg    { width: 15px; height: 15px; flex-shrink: 0; }
.trim-chevron       { margin-left: auto; width: 13px; height: 13px; transition: transform var(--ease); }
.trim-group.open .trim-chevron { transform: rotate(90deg); }
.trim-children      { display: none; padding-left: 12px; padding-bottom: 2px; }
.trim-group.open .trim-children { display: block; }
.trim-children .nav-item { font-size: 12.5px; padding: 7px 10px; }

/* Footer */
.sidebar-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-sync-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar-sync {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(255,255,255,0.45);
}
.sidebar-sync .sync-hora { font-size: 11px; }

/* Mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.sidebar-overlay.open { display: block; }

/* ============================================================
   MAIN AREA
   ============================================================ */
/* min-width:0 — sense això, al mòbil l'app s'estirava.
   .main és un ítem flex, i un ítem flex per defecte no es pot fer més estret
   que el seu contingut (min-width:auto). N'hi havia prou amb la graella
   d'alumnes o la del planning perquè TOTA la pàgina fes 900px en una pantalla
   de 375: la mestra havia d'anar de costat per llegir qualsevol cosa.
   Amb min-width:0 la pàgina s'ajusta, i el planning i l'horari, que sí que
   necessiten amplada, ja tenen el seu scroll horitzontal a dins. */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  background: var(--garnet-deep);
  border-bottom: none;
  padding: 0 32px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0;
  z-index: 50;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-size: 14px; font-weight: 600; color: #fff; }
.topbar-badge {
  color: rgba(255,255,255,0.55);
  font-size: 13px; font-weight: 400;
}
.topbar-right { display: flex; align-items: center; gap: 16px; }

/* Sync indicator */
.sync-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.7); }
.sync-dot    { width: 7px; height: 7px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.sync-dot.ok      { background: #22C55E; }
.sync-dot.error   { background: #EF4444; }
.sync-dot.syncing { background: #FCD34D; animation: pulse 1s infinite; }

/* Hamburger (mobile) */
.hamburger-btn {
  display: none;
  background: none; border: none;
  cursor: pointer; color: rgba(255,255,255,0.85); padding: 6px;
}
.hamburger-btn svg { width: 22px; height: 22px; }

/* Page content */
.page-content {
  display: none;
  padding: 40px 40px 60px;
  flex: 1;
  min-height: 100%;
}
.page-content:not(.page-hidden) {
  display: block;
}

/* ============================================================
   HOME — Hero
   ============================================================ */
.hero { margin-bottom: 36px; }
.hero-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 10px;
}
.hero-title {
  font-size: 30px; font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.hero-title em { color: var(--crimson); font-style: normal; }
.hero-tagline {
  font-size: 14.5px;
  color: var(--text-sub);
  font-style: italic;
  margin-bottom: 6px;
}
.hero-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 460px;
  line-height: 1.6;
}

/* Setup banner */
.setup-banner {
  background: #FFF8E6; border: 1px solid #FDECB0;
  border-radius: var(--r-md);
  padding: 13px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 780px; margin-bottom: 28px;
}
.setup-banner svg        { width: 16px; height: 16px; color: #B45309; flex-shrink: 0; margin-top: 2px; }
.setup-banner-text       { font-size: 12.5px; color: #92400E; line-height: 1.5; }
.setup-banner-text strong{ font-weight: 600; }
.setup-banner-text a     { color: #B45309; text-decoration: underline; cursor: pointer; }

/* Stats row */
.stats-row {
  display: flex; gap: 14px;
  margin-bottom: 36px;
  max-width: 780px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card-val   { font-size: 22px; font-weight: 700; color: var(--text-main); line-height: 1; }
.stat-card-label { font-size: 12px; color: var(--text-muted); }

/* CTA cards grid */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 780px;
}
.cta-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  cursor: pointer;
  transition: all var(--ease);
  position: relative;
  text-align: left;
}
.cta-card:hover {
  border-color: var(--crimson-soft);
  box-shadow: 0 8px 32px rgba(123,38,56,0.1);
  transform: translateY(-2px);
}
.cta-card.primary { background: var(--garnet-deep); border-color: transparent; }
.cta-card.primary:hover { background: var(--garnet); box-shadow: 0 8px 40px rgba(74,21,32,0.35); }

.cta-card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.cta-card-icon.dark  { background: rgba(255,255,255,0.1); }
.cta-card-icon.light { background: var(--surface-tint); border: 1px solid var(--border); }
.cta-card-icon svg   { width: 20px; height: 20px; }
.cta-card-icon.dark svg  { color: #fff; }
.cta-card-icon.light svg { color: var(--garnet); }

.cta-card-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; color: var(--text-main); }
.cta-card.primary .cta-card-title { color: #fff; }
.cta-card-desc  { font-size: 12.5px; color: var(--text-sub); line-height: 1.5; }
.cta-card.primary .cta-card-desc  { color: rgba(255,255,255,0.5); }

.cta-card-arrow {
  position: absolute; right: 20px; bottom: 20px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--ease);
}
.cta-card:hover .cta-card-arrow { transform: translateX(3px); }
.cta-card.primary .cta-card-arrow        { background: rgba(255,255,255,0.1); }
.cta-card.primary .cta-card-arrow svg    { color: #fff; }
.cta-card:not(.primary) .cta-card-arrow  { background: var(--surface-alt); }
.cta-card:not(.primary) .cta-card-arrow svg { color: var(--garnet); }
.cta-card-arrow svg { width: 14px; height: 14px; }

/* ============================================================
   DRAWER — Alumnes
   ============================================================ */
.panel-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,16,20,0.5);
  backdrop-filter: blur(2px);
}
.panel-overlay.open { display: flex; align-items: flex-start; justify-content: flex-end; }

.panel-drawer {
  width: min(540px, 100vw);
  height: 100vh;
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.panel-header {
  background: var(--garnet-deep);
  padding: 22px 24px 18px;
  display: flex; align-items: flex-start; gap: 14px;
}
.panel-header-text    { flex: 1; }
.panel-header-title   { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.panel-header-meta    { font-size: 12px; color: rgba(255,255,255,0.4); }

.panel-close {
  background: rgba(255,255,255,0.1); border: none;
  border-radius: 8px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: background var(--ease);
}
.panel-close:hover { background: rgba(255,255,255,0.2); }
.panel-close svg   { width: 17px; height: 17px; }

.panel-toolbar {
  padding: 13px 20px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center;
}
.search-box {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 12px; height: 36px;
}
.search-box svg   { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.search-box input {
  border: none; background: transparent;
  font-size: 13px; color: var(--text-main);
  outline: none; width: 100%;
  /* Tota l'alçada de la caixa: tocar-ne la vora o el buit de sota posava el
     cursor enlloc, quan qualsevol caixa de cerca s'espera que respongui
     sencera (segona auditoria, 8/9/2026). */
  height: 100%;
  font-family: 'Inter', sans-serif;
}
.search-box input::placeholder { color: var(--text-muted); }

/* Add form */
.add-form {
  display: none;
  padding: 13px 20px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
  gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.add-form.open { display: flex; }
.form-field    { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.form-label    { font-size: 10px; font-weight: 600; color: var(--text-sub); letter-spacing: 0.05em; text-transform: uppercase; }
.form-input {
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0 11px;
  font-size: 13px; color: var(--text-main);
  background: var(--surface); outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color var(--ease);
}
.form-input:focus { border-color: var(--crimson); }
.form-actions { display: flex; gap: 6px; }

/* Student list */
.panel-body { flex: 1; overflow-y: auto; }
.student-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
}
.student-item:last-child { border-bottom: none; }
.student-item:hover { background: var(--surface-tint); }
.student-item:hover .student-actions { opacity: 1; }

.student-num    { font-size: 11px; color: var(--text-muted); width: 20px; text-align: right; flex-shrink: 0; }
.student-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--crimson-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--garnet-deep);
  flex-shrink: 0; border: 1.5px solid rgba(192,30,75,0.15);
}
.student-info   { flex: 1; min-width: 0; }
.student-name   { font-size: 13.5px; font-weight: 500; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-meta   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.student-actions{ display: flex; gap: 4px; opacity: 0; transition: opacity var(--ease); }
/* ⚠ Amb el teclat el focus hi aterrava damunt d'uns botons transparents: no
   se sabia on eres. Auditoria de l'11/9/2026; el bloc tàctil és més avall. */
.student-item:focus-within .student-actions { opacity: 1; }

.action-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-sub);
  transition: all var(--ease);
}
.action-btn.danger:hover { border-color: #EF4444; color: #EF4444; }
.action-btn svg { width: 13px; height: 13px; }

.list-empty {
  text-align: center; padding: 50px 24px;
  color: var(--text-muted); font-size: 13.5px; line-height: 1.6;
}
.list-empty svg { width: 36px; height: 36px; margin: 0 auto 10px; display: block; opacity: 0.3; }

/* Panel footer */
.panel-footer {
  padding: 11px 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-footer-info { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   CONFIG MODAL
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(26,16,20,0.55);
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.22s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }

.modal-header { background: var(--garnet-deep); padding: 20px 24px 16px; display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; }
.modal-header-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.modal-header-sub   { font-size: 12px; color: rgba(255,255,255,0.4); }
.modal-close        { background: rgba(255,255,255,0.1); border: none; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex-shrink: 0; }
.modal-close:hover  { background: rgba(255,255,255,0.2); }
.modal-close svg    { width: 15px; height: 15px; }

.modal-body     { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-field    { margin-bottom: 16px; }
.modal-label    { font-size: 10.5px; font-weight: 600; color: var(--text-sub); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.modal-input {
  width: 100%; height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0 13px;
  font-size: 13.5px; color: var(--text-main);
  background: var(--surface-alt); outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color var(--ease);
}
.modal-input:focus { border-color: var(--crimson); background: var(--surface); }
.modal-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
.modal-hint code { background: var(--surface-alt); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; font-size: 11px; color: var(--crimson); }

.modal-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.modal-steps-title { font-size: 10.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.modal-step { display: flex; gap: 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-sub); line-height: 1.5; }
.modal-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--crimson); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.modal-footer { padding: 14px 24px; display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; border-top: 1px solid var(--border); background: var(--surface); }

/* ============================================================
   BUTTONS (shared)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer; border: none;
  transition: all var(--ease);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--garnet); }

.btn-secondary { background: none; color: var(--text-sub); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-alt); }

.btn-ghost { background: none; color: var(--text-sub); border: 1px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--garnet); color: var(--garnet); }
.btn-ghost.spinning svg { animation: spin 1s linear infinite; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: var(--garnet-deep); color: #fff;
  padding: 11px 18px; border-radius: 12px;
  font-size: 13px; display: flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transform: translateY(80px); opacity: 0;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.toast.show    { transform: translateY(0); opacity: 1; }
.toast.success { background: #14532D; }
.toast.error   { background: #7F1D1D; }
.toast svg     { width: 15px; height: 15px; flex-shrink: 0; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
@keyframes spin  { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 768px) {
  .sidebar        { transform: translateX(-100%); }
  .sidebar.open   { transform: translateX(0); }
  .main           { margin-left: 0; }
  .hamburger-btn  { display: flex; }
  .mobile-menu-btn { display: flex; }
  .page-content   { padding: 64px 18px 48px; }
  .cta-grid       { grid-template-columns: 1fr; }
  .stats-row      { flex-wrap: wrap; }
  .stat-card      { min-width: calc(50% - 8px); }
  .topbar         { padding: 0 16px; }
  .panel-drawer   { width: 100vw; }
  .hero-title     { font-size: 24px; }
}

/* ============================================================
   PAGES — navegació entre pàgines sense recàrrega
   ============================================================ */
.page-hidden { display: none !important; }

.empty-page {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
}
.empty-page svg {
  width: 56px; height: 56px;
  margin: 0 auto 16px; display: block; opacity: 0.2;
}
.empty-page p { font-size: 14px; line-height: 1.6; }

/* ============================================================
   REGISTRE DE L'AULA
   ============================================================ */
/* Amb salt de línia: al mòbil els botons (i l avís de "Desat") no hi
   cabien en una fila i estiraven la pàgina 20px de més. */
.registre-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 28px;
}

.registre-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* ⚠ Aquí hi deia overflow:hidden, i era el que impedia que la capçalera
     s enganxés: qualsevol overflow que no sigui visible converteix l element
     en el contenidor de scroll de tot el que hi ha a dins, i com que no té
     alçada, el position:sticky de les capçaleres no s activava mai
     (auditoria 6/9/2026). El retallat de les cantonades el fa ara el fill
     que sí que fa scroll. */
  overflow: visible;
  max-width: 100%;
}

.registre-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}
.registre-empty svg {
  width: 48px; height: 48px;
  margin: 0 auto 14px; display: block; opacity: 0.2;
}
.registre-empty p { font-size: 13.5px; line-height: 1.7; }

/* La graella de registres fa scroll ELLA, en els dos sentits, i amb una
   alçada màxima. Així la capçalera i la columna dels noms s hi poden
   enganxar: sense un contenidor amb alçada, «sticky» no té respecte a què
   quedar-se quiet. */
.registre-scroll {
  overflow: auto;
  max-height: min(70vh, 620px);
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}

.reg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.reg-table th {
  background: var(--surface-alt);
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}

/* ⚠ EL NOM DE L ALUMNE NO POT MARXAR MAI DE LA PANTALLA.
   Amb 26 alumnes i 12 activitats, desplaçant-se cap a la dreta la taula es
   convertia en una paret de caselles anònimes: la mestra marcava a cegues.
   Ara la columna dels noms es queda enganxada a l esquerra, com ja feien les
   Notes. Cal fons opac: si no, el que passa per sota es veu a través. */
.reg-table th.reg-th-name,
.reg-table td.reg-td-name {
  position: sticky; left: 0;
  background: var(--surface);
  z-index: 1;
}
.reg-table th.reg-th-name {
  background: var(--surface-alt);
  z-index: 3;
}
.reg-table tbody tr:hover td.reg-td-name { background: var(--surface-tint); }
.reg-table th.reg-th-name { min-width: 160px; }
.reg-table th.reg-th-item { min-width: 120px; text-align: center; }

.reg-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: middle;
}
.reg-table tr:last-child td { border-bottom: none; }
.reg-table tbody tr:hover td { background: var(--surface-tint); }

.reg-table td.reg-td-name {
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.reg-table td.reg-td-cell { text-align: center; vertical-align: middle; }

/* Checkbox dins la taula */
.reg-checkbox {
  width: 18px; height: 18px;
  accent-color: var(--crimson);
  cursor: pointer;
}

/* ⚠ Al mòbil, 18×18 px és massa poc per al dit: se n erra i marca la casella
   del costat, que vol dir marcar un altre alumne o una altra activitat. Es fa
   més gran la CASELLA i la zona que l envolta, sense tocar la densitat de
   l escriptori. */
/* ⚠ I A LA TAULETA TORNAVA A FER 18 px.

   Segona auditoria (8/9/2026): l engrandiment estava dins d un
   `max-width: 640px`, i una tauleta —que es un aparell de DIT— no hi entra.
   Passar la llista amb el dit a la tauleta tornava a ser marcar la casella
   del costat. El que mana no es l amplada de la pantalla, es si hi ha
   ratoli o no: per aixo ara va per `hover: none`. */
@media (max-width: 640px), (hover: none) {
  .reg-checkbox { width: 24px; height: 24px; }
  .reg-table td.reg-td-cell { padding: 12px 10px; min-width: 44px; }
  .reg-table td, .reg-table th { padding-top: 12px; padding-bottom: 12px; }
}

/* Text input dins la taula */
.reg-text-input {
  text-align: center;
  width: 100%; min-width: 100px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  background: transparent;
  outline: none;
  transition: border-color var(--ease), background var(--ease);
}
.reg-text-input:hover  { border-color: var(--border); background: var(--surface-alt); }
.reg-text-input:focus  { border-color: var(--crimson); background: var(--surface); }

/* Capçalera d'ítem amb botó eliminar */
.reg-th-inner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.reg-th-delete {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px;
  border-radius: 4px; display: flex; align-items: center;
  transition: color var(--ease);
  opacity: 0;
}
.reg-table th:hover .reg-th-delete { opacity: 1; }
.reg-table th:focus-within .reg-th-delete { opacity: 1; }
.reg-th-delete:hover { color: #EF4444; }
.reg-th-delete svg { width: 12px; height: 12px; }

/* ============================================================
   MODAL — Nou ítem (type selector)
   ============================================================ */
.type-selector { display: flex; flex-direction: column; gap: 10px; }
.type-option {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--ease);
}
.type-option:hover  { border-color: var(--crimson-soft); }
.type-option.selected { border-color: var(--crimson); background: #fdf2f5; }

.type-option-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.type-option.selected .type-option-icon { background: var(--crimson-soft); }
.type-option-icon svg { width: 18px; height: 18px; color: var(--text-sub); }
.type-option.selected .type-option-icon svg { color: var(--crimson); }

.type-option-text { display: flex; flex-direction: column; gap: 2px; }
.type-option-text strong { font-size: 13.5px; font-weight: 600; color: var(--text-main); }
.type-option-text span   { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   OBSERVACIONS
   ============================================================ */

/* Toolbar */
.obs-toolbar {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 28px;
}

/* Grid de cards d'alumnes */
.obs-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  max-width: 100%;
}

.obs-student-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
}
.obs-student-card:hover {
  border-color: var(--crimson-soft);
  box-shadow: 0 4px 16px rgba(123,38,56,0.08);
  transform: translateY(-1px);
}
.obs-student-card .student-avatar {
  width: 40px; height: 40px; font-size: 13px; flex-shrink: 0;
}
.obs-student-card-info { flex: 1; min-width: 0; }
.obs-student-card-name {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.obs-student-card-count {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
.obs-student-card-count.has-obs { color: var(--crimson); font-weight: 500; }

/* Botó bafarada a la llista del drawer */
.btn-obs {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all var(--ease);
  position: relative;
}
.btn-obs:hover { border-color: var(--crimson); color: var(--crimson); }
.btn-obs svg   { width: 13px; height: 13px; }
.btn-obs .obs-badge {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px;
  background: var(--crimson); color: #fff;
  border-radius: 50%; font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface);
}

/* Drawer observacions */
.obs-drawer-toolbar {
  padding: 13px 20px 10px;
  border-bottom: 1px solid var(--border);
}

/* Llista d'observacions dins el drawer */
.obs-entry {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.obs-entry:last-child { border-bottom: none; }
.obs-entry-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.obs-materia-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.obs-materia-badge.general     { background: var(--surface-alt); color: var(--text-sub); border: 1px solid var(--border); }
.obs-materia-badge.matematiques{ background: #EEF2FF; color: #3730A3; }
.obs-materia-badge.catala      { background: #FEF3C7; color: #92400E; }
.obs-materia-badge.medi        { background: #ECFDF5; color: #065F46; }
.obs-materia-badge.musica      { background: #FDF4FF; color: #7C3AED; }
.obs-materia-badge.angles      { background: #FFF7ED; color: #9A3412; }

.obs-entry-date  { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.obs-entry-text  { font-size: 13px; color: var(--text-main); line-height: 1.55; }
.obs-entry-delete{
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px;
  border-radius: 4px; font-size: 11px;
  transition: color var(--ease);
  margin-left: 4px;
}
.obs-entry-delete:hover { color: #EF4444; }
.obs-entry-delete svg { width: 12px; height: 12px; }

/* Modal textarea */
.modal-textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font-size: 13.5px; color: var(--text-main);
  background: var(--surface-alt); outline: none;
  font-family: 'Inter', sans-serif;
  resize: vertical; min-height: 90px;
  transition: border-color var(--ease);
  line-height: 1.5;
}
.modal-textarea:focus { border-color: var(--crimson); background: var(--surface); }

/* Botó editar observació */
.obs-entry-edit {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--ease);
  margin-left: auto;
}
.obs-entry-edit:hover { color: var(--crimson); }
.obs-entry-edit svg { width: 12px; height: 12px; }

/* ============================================================
   DADES PERSONALS DRAWER
   ============================================================ */
.personal-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px; margin-top: 4px;
}
.personal-field {
  margin-bottom: 14px;
}
.personal-obs-hint {
  display: flex; align-items: flex-start; gap: 8px;
  background: #FFF3CD; border: 1px solid #FFEAA0;
  border-radius: var(--r-sm); padding: 10px 12px;
  margin-top: 8px; font-size: 12.5px; color: #856404;
}
.personal-obs-hint svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

/* Botó info/dades personals a la llista */
.btn-personal {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all var(--ease);
}
.btn-personal:hover { border-color: var(--crimson); color: var(--crimson); }
.btn-personal svg   { width: 13px; height: 13px; }
.btn-personal.has-data { color: var(--crimson); border-color: var(--crimson-soft); }

/* Observacions drawer — trim badge */
.obs-trim-group { margin-bottom: 4px; }
.obs-trim-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 20px 4px;
  display: block;
}

/* ============================================================
   PÀGINA ALUMNES — llista de cards
   ============================================================ */
/* Els tres botons han de poder passar a la línia de sota. Sense això, al
   mòbil la barra feia 830px de min-content i, com que .main és un ítem flex
   amb min-width:auto, ESTIRAVA tota la pàgina: la fitxa de l'alumne quedava
   mig fora de la pantalla i s'hi havia d'anar de costat. */
.alumnes-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}

.alumnes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-width: 900px;
}

/* Targeta d'alumne en quadrícula */
.alumne-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--ease);
  position: relative;
}
.alumne-card:hover {
  border-color: var(--crimson-soft);
  box-shadow: 0 4px 16px rgba(123,38,56,0.09);
  transform: translateY(-2px);
}

.alumne-card-top {
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  position: relative;
}
.alumne-card-avatar {
  width: 44px; height: 44px; font-size: 15px;
}
.alumne-card-nom {
  font-size: 12.5px; font-weight: 600; color: var(--text-main);
  line-height: 1.3;
  word-break: break-word;
}

/* Cantonada superior dreta: PI, AM i alerta, tot en fila sense afectar la mida */
.alumne-card-corner {
  position: absolute; top: 6px; right: 6px;
  display: flex; align-items: center; gap: 3px;
  z-index: 2;
}
.alumne-card-corner .alumne-badge-pi,
.alumne-card-corner .alumne-badge-am {
  margin: 0;
  font-size: 9px; font-weight: 800;
  padding: 1px 4px; border-radius: 3px;
  line-height: 1.4;
}
.alumne-card-alert {
  font-size: 13px; line-height: 1;
  color: #B45309;
  cursor: default;
}

/* ⚠ ELS BOTONS ES TALLAVEN QUAN N'HI HAVIA MASSA.

   Les targetes fan 150 px d'ample com a mínim (130 al mòbil) i la targeta
   talla el que li surt (`overflow: hidden`). Amb dos botons sobrava espai,
   però amb el d'incidències i el d'entrevistes ja són quatre, i al mòbil
   fan 44 px cadascun perquè s'encertin amb el dit: no hi caben en una fila.

   Amb `flex-wrap` passen a dues files en comptes de quedar tallats, i els
   44 px del dit es queden com estaven. */
.alumne-card-actions {
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: var(--surface-tint);
}
.alumne-card-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all var(--ease);
  position: relative;
}
.alumne-card-btn svg        { width: 14px; height: 14px; }
.alumne-card-btn:hover      { border-color: var(--crimson); color: var(--crimson); }
.alumne-card-btn.active     { border-color: var(--crimson-soft); color: var(--crimson); background: #fdf2f5; }
/* ⚠ AL MÒBIL S'OBRIA EL BOTÓ DEL COSTAT.

   Segona auditoria (8/9/2026): els dos botons de cada targeta fan 30×30 px i
   estan de costat amb 4 px pel mig. Amb el dit és molt fàcil obrir les dades
   personals d'un nen volent obrir-ne les observacions.

   Amb dit es fan de 44×44 (el mínim recomanat) i se separen més. Amb ratolí
   es queden com estaven: allà 30 px ja s'encerten bé i la targeta és més
   compacta. */
@media (hover: none) {
  .alumne-card-btn { width: 44px; height: 44px; border-radius: 9px; }
  .alumne-card-btn svg { width: 17px; height: 17px; }
  .alumne-card-actions { gap: 10px; }

  /* ⚠ QUATRE BOTONS NO CABEN EN UNA FILA AL MÒBIL.

     La targeta fa uns 172 px i cada botó n'ha de fer 44 perquè s'encerti
     amb el dit (veure aquí sobre): quatre ja són 176 px abans de comptar
     els espais. S'han de partir per força, i val més DOS I DOS que tres i
     un de sol penjant a sota: ocupa el mateix alt, queda simètric i cada
     botó es fa més ample, o sigui que encara s'encerta millor.

     Amb tres o menys no hi toca res: aquells sí que hi caben en una fila. */
  .alumne-card-actions:has(.alumne-card-btn:nth-child(4)) .alumne-card-btn {
    width: auto;
    flex: 0 0 calc(50% - 5px);   /* 5 px = la meitat del `gap` de 10 */
  }
}

/* ============================================================
   PÀGINA FITXA ALUMNE
   ============================================================ */
.fitxa-back {
  margin-bottom: 24px;
}

.fitxa-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.fitxa-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--crimson-soft);
  color: var(--garnet-deep);
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid rgba(192,30,75,0.2);
}
.fitxa-nom  { font-size: 22px; font-weight: 700; color: var(--text-main); margin-bottom: 3px; }
.fitxa-meta { font-size: 13px; color: var(--text-muted); }

.fitxa-alert {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FBEAED; border: 1px solid #E8C5CD;
  border-radius: var(--r-md); padding: 13px 16px;
  margin-bottom: 12px;
  font-size: 13px; color: #7A1E2E; line-height: 1.5;
}
.fitxa-alert svg { width: 16px; height: 16px; color: #B45309; flex-shrink: 0; margin-top: 1px; }

.fitxa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 780px;
}

.fitxa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fitxa-card-wide {
  grid-column: 1 / -1;
}

.fitxa-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--text-sub);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-tint);
}
.fitxa-card-header svg { width: 15px; height: 15px; flex-shrink: 0; }
.fitxa-card-hint {
  margin-left: auto; font-size: 11px; font-weight: 400;
  color: var(--text-muted); text-transform: none; letter-spacing: 0;
}

.fitxa-edit-btn {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 3px 10px;
  font-size: 11px; font-weight: 500; color: var(--text-sub);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all var(--ease); text-transform: none; letter-spacing: 0;
}
.fitxa-edit-btn:hover { border-color: var(--crimson); color: var(--crimson); }
.fitxa-edit-btn svg   { width: 11px; height: 11px; }

.fitxa-card-body { padding: 16px 18px; }

.fitxa-field { margin-bottom: 12px; }
.fitxa-field:last-child { margin-bottom: 0; }
.fitxa-field-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; }
.fitxa-field-val   { font-size: 13.5px; color: var(--text-main); }
.fitxa-field-val a { color: var(--crimson); text-decoration: none; }
.fitxa-field-val a:hover { text-decoration: underline; }

.fitxa-empty-field { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* Observacions dins la fitxa */
.fitxa-obs-trim { margin-bottom: 16px; }
.fitxa-obs-trim:last-child { margin-bottom: 0; }
.fitxa-obs-trim-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.fitxa-obs-item {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.fitxa-obs-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fitxa-obs-text { font-size: 13px; color: var(--text-main); line-height: 1.5; flex: 1; }

/* Notes dins la fitxa */
.fitxa-notes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fitxa-notes-table th {
  text-align: left; font-size: 10px; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.fitxa-notes-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-main); }
.fitxa-notes-table tr:last-child td { border-bottom: none; }
.fitxa-notes-table .nota-badge {
  display: inline-block; padding: 2px 10px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--surface-alt); color: var(--text-sub);
}
.fitxa-notes-table .nota-badge.pendent { color: var(--text-muted); background: none; font-style: italic; font-weight: 400; }

@media (max-width: 768px) {
  .fitxa-grid { grid-template-columns: 1fr; }
  .fitxa-card-wide { grid-column: 1; }
  .fitxa-header { flex-wrap: wrap; }
  .fitxa-header .btn { width: 100%; justify-content: center; }
  .alumnes-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

/* ============================================================
   PÀGINA DE NOTES
   ============================================================ */
.notes-header {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.notes-header-titles { flex: 1; }
.notes-trim-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; letter-spacing: 0.04em;
  background: var(--crimson-soft); color: var(--garnet-deep); margin-bottom: 4px;
}
/* Els botons han de fer salt de línia: al mòbil, en una sola fila la
   pàgina de notes s'estirava fins a 524px i s'havia d'anar de costat. */
.notes-header-actions { display: flex; gap: 8px; align-items: flex-start; padding-top: 4px; flex-wrap: wrap; }

/* Llegenda */
.qual-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; align-items: center;
}
.qual-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-sub);
}
.qual-legend-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}

/* Contenidor */
.notes-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.notes-scroll {
  overflow-x: auto;
}

/* ---- TAULA ---- */
.notes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

/* Capçaleres */
.notes-table thead th {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0;
  white-space: nowrap;
}
.notes-table thead th:last-child { border-right: none; }

/* Columna nom */
.notes-th-name {
  padding: 14px 20px;
  text-align: left;
  font-size: 11px; font-weight: 600;
  color: var(--text-sub);
  letter-spacing: 0.05em; text-transform: uppercase;
  min-width: 180px;
  position: sticky; left: 0; z-index: 3;
  background: var(--surface-alt);
}

/* Columna per ítem (colspan=2 però ara amb una sola td) */
.notes-th-item {
  min-width: 140px;
  text-align: center;
  padding: 10px 28px 10px 12px; /* espai dret per la creu */
  position: relative;
}
.notes-th-item-nom {
  font-size: 13px; font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
}
.notes-th-item-meta {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 0;
}
.notes-th-item-actions {
  display: none; /* ja no cal la fila d'accions */
}
.notes-col-label { display: none; }
.notes-del-btn {
  position: absolute; top: 6px; right: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 3px; border-radius: 4px;
  display: flex; align-items: center; transition: color var(--ease);
  opacity: 0.5;
}
.notes-th-item:hover .notes-del-btn { opacity: 1; }
.notes-del-btn:hover { color: #EF4444; opacity: 1; }
.notes-del-btn svg { width: 12px; height: 12px; }

/* Columna Mitjana */
.notes-th-mitj {
  min-width: 110px; padding: 10px 14px;
  text-align: center;
  font-size: 11px; font-weight: 600;
  color: var(--text-sub); letter-spacing: 0.04em; text-transform: uppercase;
}
.notes-th-mitj small {
  display: block; font-size: 9px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--text-muted); margin-top: 2px;
}

/* ---- FILES ---- */
.notes-table tbody tr {
  border-bottom: 1px solid var(--border);
  height: 80px;
}
.notes-table tbody tr:last-child { border-bottom: none; }
.notes-table tbody tr:hover td        { background: var(--surface-tint); }
.notes-table tbody tr:hover .notes-td-name { background: var(--surface-tint); }

.notes-table td {
  border-right: 1px solid var(--border);
  padding: 0;
  vertical-align: middle;
}
.notes-table td:last-child { border-right: none; }

/* Cel·la nom alumne — centrat vertical gràcies a height:80px + vertical-align:middle */
.notes-td-name {
  padding: 0 20px;
  vertical-align: middle;
  font-weight: 500; color: var(--text-main);
  white-space: nowrap;
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  min-width: 180px;
  height: 80px;
}
.notes-td-name-inner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 100%;
}
/* PI / AM al costat del nom, a les notes (més petits i enganxats al nom) */
.notes-td-name-inner .notes-badge {
  margin-left: -6px; flex-shrink: 0;
  font-size: 9px; font-weight: 800; line-height: 1.4;
  padding: 1px 4px; border-radius: 3px;
  cursor: default;
}

/* Cel·la d'ítem: punts dalt + nota baix, centrat vertical */
.notes-td-item {
  padding: 0;
  text-align: center;
  vertical-align: middle;
  min-width: 130px;
  height: 80px;
  position: relative;
}
.notes-td-item-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; height: 100%;
  padding: 8px 10px;
}

/* Input de punts — part superior, discret i gris */
.notes-input-punts {
  display: block;
  width: 80px; height: 28px;
  margin: 0 auto 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 13px; font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  background: var(--surface-alt);
  outline: none;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
  -moz-appearance: textfield;
}
.notes-input-punts::-webkit-outer-spin-button,
.notes-input-punts::-webkit-inner-spin-button { -webkit-appearance: none; }
.notes-input-punts:focus {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-main);
}
.notes-input-punts::placeholder { color: var(--border-strong); }

/* Xip nota /10 — part inferior, gran i colored */
.nota10-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px; font-weight: 700;
  min-width: 58px; text-align: center;
  letter-spacing: 0.01em;
}

/* Cel·la Mitjana + Qualif */
.notes-td-mitj {
  padding: 10px 14px; text-align: center;
  vertical-align: middle;
}
.mitj-cell {
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
}
.mitj-nota {
  font-size: 15px; font-weight: 700; color: var(--text-main);
}
.qual-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; letter-spacing: 0.04em;
}

/* Empty state */
.notes-empty {
  text-align: center; padding: 60px 24px;
  color: var(--text-muted); font-size: 13.5px;
}
.notes-empty svg {
  width: 44px; height: 44px;
  margin: 0 auto 14px; display: block; opacity: 0.25;
}
/* Hi ha columnes però cap alumne: la capçalera es queda i aquí es diu per què
   la taula és buida (abans no s'hi deia res i semblava espatllada). */
.notes-td-cap-alumne {
  text-align: center; padding: 28px 20px;
  color: var(--text-muted); font-size: 13px; line-height: 1.5;
}

/* Modal row */
.modal-row { display: flex; gap: 12px; }
.modal-row .modal-field { flex: 1; }


/* ============================================================
   SELECTOR DE PES (modal notes)
   ============================================================ */
.pes-selector {
  display: flex; gap: 8px;
}
.pes-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all var(--ease);
}
.pes-btn:hover {
  border-color: var(--crimson-soft);
  background: #fdf2f5;
}
.pes-btn.active {
  border-color: var(--crimson);
  background: #fdf2f5;
}
.pes-num {
  font-size: 20px; font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}
.pes-btn.active .pes-num { color: var(--crimson); }
.pes-label {
  font-size: 11px; color: var(--text-muted);
  text-align: center; line-height: 1.3;
}
.pes-btn.active .pes-label { color: var(--crimson); }

/* Nota arrodonida a la taula */
.nota-arrod {
  font-size: 18px; font-weight: 800;
  line-height: 1;
}

/* Selector de trimestre a la pàgina de notes */
.trim-sel-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.trim-sel-btn {
  padding: 5px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 12px; font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: var(--text-sub);
  cursor: pointer;
  transition: all var(--ease);
}
.trim-sel-btn:hover  { border-color: var(--crimson-soft); color: var(--crimson); }
.trim-sel-btn.active { border-color: var(--crimson); background: var(--crimson); color: #fff; }

/* Columna Carpeta Viatgera a les assignatures (readonly) */
.notes-th-carpeta {
  background: var(--surface-alt) !important;
}
.notes-th-carpeta .notes-th-item-nom { color: var(--text-main); }
.notes-th-carpeta .notes-th-item-meta { color: var(--text-muted); }

.nota10-carpeta {
  font-size: 15px !important;
  padding: 6px 14px !important;
  border: 1.5px solid rgba(0,0,0,0.06);
}

/* Checkbox alerta trimestre */
.trim-alert-check {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 13px; color: var(--text-sub);
  cursor: pointer;
}
.trim-alert-check input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
  accent-color: var(--crimson);
}

/* Botó NE (No Entregat) — cantonada superior dreta de la cel·la */
.ne-btn {
  position: absolute; top: 5px; right: 5px;
  font-size: 8.5px; font-weight: 700; font-family: 'Inter', sans-serif;
  padding: 2px 5px; border-radius: 4px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  letter-spacing: 0.04em; line-height: 1.4;
  /* ⚠ AL 35% D OPACITAT NO ES LLEGIA: 1,64:1 DE CONTRAST (el mínim és 4,5).
     Trobat al QA de l 11/9/2026 mesurant-lo. És un control del dia a dia dins
     de Notes, i ha de seguir sent secundari SENSE ser il·legible: per això la
     discreció la fa ara la vora fina i el fons, no la transparència. */
  opacity: 1;
  border-color: #E8DFE3;
  color: #7E6070;
}
.ne-btn:hover            { opacity: 1; border-color: #EF4444; color: #EF4444; background: #FFF5F5; }
.ne-btn.ne-active        { border-color: #991B1B !important; background: #FEE2E2 !important; color: #991B1B !important; opacity: 1 !important; }
.ne-btn.ne-active:hover  { border-color: #7F1D1D !important; background: #FECaca !important; }
/* El botó «NE» fa 24×18 px i està al 35% d opacitat: amb el dit no s hi
   encerta i gairebé no es veu (segona auditoria, 8/9/2026). Amb dit, més
   gran i visible; amb ratolí, com estava. */
@media (hover: none) {
  .ne-btn { font-size: 11px; padding: 8px 10px; min-width: 44px; min-height: 36px; top: 3px; right: 3px; }
}

/* Banner NE a la fitxa */
.fitxa-ne-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: var(--r-md); padding: 12px 16px;
  margin-bottom: 16px; font-size: 13px; color: #991B1B;
}
.fitxa-ne-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: #EF4444; }
.fitxa-ne-detail { font-size: 11.5px; color: #B91C1C; margin-top: 3px; font-weight: 400; }

/* Spinner de càrrega de notes */
.notes-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: notes-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes notes-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   PLANNING SETMANAL
   ============================================================ */
.planning-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.planning-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.planning-day-header {
  background: var(--garnet-deep);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 8px 12px;
  letter-spacing: 0.04em;
}
.planning-textarea {
  width: 100%; min-height: 200px;
  border: none; outline: none; resize: vertical;
  padding: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.6;
  color: var(--text-main);
  background: var(--surface);
  box-sizing: border-box;
}
.planning-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 0;
}
.planning-week-label {
  font-size: 13px; color: var(--text-muted);
}

@media (max-width: 900px) {
  .planning-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .planning-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CALENDARI MENSUAL
   ============================================================ */
.calendari-nav {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.calendari-month-label {
  font-size: 17px; font-weight: 600;
  color: var(--text-main); flex: 1; text-align: center;
}
.calendari-grid { width: 100%; }

.cal-header-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-col-head {
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 0;
}
.cal-body {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  min-height: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.cal-cell:hover { border-color: var(--crimson-soft); background: #fdf2f5; }
.cal-cell.cal-empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.cal-today { border-color: var(--crimson); background: #fdf2f5; }
.cal-day-num {
  font-size: 13px; font-weight: 600;
  color: var(--text-sub); margin-bottom: 4px;
}
.cal-cell.cal-today .cal-day-num { color: var(--crimson); }
.cal-nota {
  font-size: 11.5px; line-height: 1.4;
  color: var(--text-main);
  word-break: break-word;
}

/* ============================================================
   PLANNING SETMANAL — estil fidel al PDF
   ============================================================ */
.plan-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.plan-topbar-left  { display: flex; align-items: center; gap: 8px; }
.plan-week-title   { font-size: 15px; font-weight: 600; color: var(--text-main); }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }

/* Notes setmana */
.plan-week-notes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; padding: 10px 14px;
  background: #FEF3C7; border: 1px solid #FDE68A;
  border-radius: var(--r-md);
}
.plan-week-note-tag {
  font-size: 12px; font-weight: 600; color: #92400E;
}
.plan-week-note-tag + .plan-week-note-tag::before { content: '  ·  '; color: #B45309; }

/* Graella */
.plan-grid-wrap { overflow-x: auto; }
.plan-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.plan-table thead th { position: sticky; top: 0; z-index: 2; }

.plan-th-hora {
  width: 110px; min-width: 90px;
  background: var(--surface-alt);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
}
.plan-th-dia {
  background: var(--garnet-deep); color: #fff;
  padding: 10px 8px; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 2px solid var(--border);
  min-width: 160px;
}
.plan-th-dia:last-child { border-right: none; }
.plan-th-today { background: var(--crimson) !important; }
.plan-th-date {
  display: block; font-size: 11px; font-weight: 400;
  opacity: 0.8; margin-top: 2px;
}

/* Files */
.plan-row td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.plan-row td:last-child { border-right: none; }
.plan-row-pati td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  background: var(--surface-tint);
}
.plan-row-pati td:last-child { border-right: none; }

.plan-td-hora {
  padding: 8px 10px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-align: right;
  background: var(--surface-alt);
  border-right: 1px solid var(--border);
  white-space: nowrap; vertical-align: middle;
}

/* Cel·les */
.plan-cell {
  padding: 6px 8px; vertical-align: middle;
  cursor: pointer; min-height: 60px;
  text-align: center;
  transition: background var(--ease);
  position: relative;
}
.plan-cell:hover { background: #fdf2f5; }
.plan-cell-empty { min-height: 60px; }
.plan-cell-pati  { background: var(--surface-tint) !important; min-height: 30px; cursor: pointer; }
.plan-cell-pati:hover { background: #f0f0f0 !important; }

/* Un event extra que dura més d'una hora: una sola casella per tot el tram,
   amb el rètol escrit un sol cop i centrat verticalment. (En Pol, 17/10/2026:
   vuit caselles dient «SORTIDA / Colònies» «fa mal d'ulls».) */
.plan-cell-unit { vertical-align: middle; }
.plan-cell-unit .plan-cell-event-name { font-size: 17px; }
.plan-cell-unit .plan-cell-mena { letter-spacing: 0.1em; }

/* Especials */
.plan-cell-festa {
  background: #E5E7EB; cursor: pointer;
  vertical-align: middle; text-align: center;
  min-height: 60px; padding: 12px 8px;
}
.plan-cell-festa:hover { background: #D1D5DB; }
.plan-cell-especial {
  background: #FEF9C3; cursor: pointer;
  vertical-align: middle; text-align: center;
  min-height: 60px; padding: 12px 8px;
}
.plan-cell-especial:hover { background: #FEF08A; }
.plan-cell-sortida {
  background: #DCFCE7; cursor: pointer;
  vertical-align: middle; text-align: center;
  min-height: 60px; padding: 12px 8px;
}
.plan-cell-sortida:hover { background: #BBF7D0; }

.plan-cell-event-name {
  font-size: 14px; font-weight: 700; color: var(--text-main);
}
.plan-cell-event-sub {
  font-size: 11px; color: var(--text-muted); margin-top: 3px;
}

/* Contingut de cel·la normal */
.plan-cell-assig {
  font-size: 13px; font-weight: 700; color: var(--text-main);
  margin-bottom: 2px; text-align: center;
}
.plan-cell-sub {
  font-size: 11px; color: var(--text-muted);
  text-decoration: underline; text-decoration-color: var(--border-strong);
  margin-bottom: 3px; text-align: center;
}
.plan-cell-alerta {
  font-size: 11.5px; font-weight: 700; color: #991B1B;
  margin-bottom: 4px; text-align: center;
}
.plan-cell-link {
  display: inline-block; font-size: 11px; color: #166534;
  font-weight: 600; text-decoration: none; margin-top: 3px;
}
.plan-cell-link:hover { text-decoration: underline; }

/* Modal planning */
.plan-cell-type-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.plan-type-opt {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; color: var(--text-sub);
}
.plan-type-opt input { cursor: pointer; accent-color: var(--crimson); }

/* ============================================================
   CALENDARI MENSUAL 2.0
   ============================================================ */
.cal2-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1000px) { .cal2-layout { grid-template-columns: 1fr; } }
/* La columna del calendari també és un ítem de graella: sense això no pot
   encongir (min-width:auto) i el calendari sortia 13px de la pantalla. */
.cal2-left { min-width: 0; }



/* Capçalera */
.cal2-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.cal2-month-title {
  font-size: 28px; font-weight: 700;
  color: var(--text-main); flex: 1; margin: 0;
}

/* Graella */
.cal2-dow-row {
  /* minmax(0,1fr) i no 1fr: amb 1fr les columnes no baixen del que amida el
     seu contingut, i el nom més llarg ("Dimecres") estirava la graella. */
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 4px;
}
.cal2-dow-row > div {
  text-align: center; font-size: 12px; font-weight: 600;
  color: var(--text-muted); padding: 4px 0;
  letter-spacing: 0.04em;
}

/* Al mòbil, a cada columna hi caben 48px i "Dimecres" en demana 58: els
   noms quedaven tallats. S'hi posen les mateixes abreviatures que a
   l'horari (DL, DM, DC…), que és el que una mestra ja té al cap. */
@media (max-width: 700px) {
  .cal2-dow-row > div { font-size: 0; }
  .cal2-dow-row > div::before {
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
  }
  .cal2-dow-row > div:nth-child(1)::before { content: 'DL'; }
  .cal2-dow-row > div:nth-child(2)::before { content: 'DM'; }
  .cal2-dow-row > div:nth-child(3)::before { content: 'DC'; }
  .cal2-dow-row > div:nth-child(4)::before { content: 'DJ'; }
  .cal2-dow-row > div:nth-child(5)::before { content: 'DV'; }
  .cal2-dow-row > div:nth-child(6)::before { content: 'DS'; }
  .cal2-dow-row > div:nth-child(7)::before { content: 'DG'; }
}

.cal2-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.cal2-cell {
  min-height: 72px; border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 6px;
  background: var(--surface); cursor: pointer;
  transition: border-color var(--ease);
  overflow: hidden;
  /* Un ítem de graella tampoc no es pot encongir per defecte (min-width:auto):
     un dia amb un event de títol llarg estirava la columna i el calendari
     sortia 12px de la pantalla al mòbil. Mateixa causa que la del .main. */
  min-width: 0;
}
.cal2-cell:hover        { border-color: var(--crimson-soft); background: #fdf2f5; }
.cal2-cell-empty        { background: transparent; border-color: transparent; cursor: default; }
.cal2-cell-empty:hover  { background: transparent; border-color: transparent; }
.cal2-cell-today        { border-color: var(--crimson) !important; background: #fdf2f5; }
.cal2-cell-weekend      { background: var(--surface-tint); }
.cal2-cell-num {
  font-size: 13px; font-weight: 600; color: var(--text-sub);
  margin-bottom: 3px;
}
.cal2-cell-today .cal2-cell-num { color: var(--crimson); }
.cal2-event-dot {
  font-size: 10px; font-weight: 600; color: #fff;
  padding: 1px 5px; border-radius: 3px;
  margin-bottom: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal2-event-more { font-size: 10px; color: var(--text-muted); }
/* ⚠ AMB EL DIT NO ES PODIA OBRIR CAP EVENT DE LA GRAELLA.

   Segona auditoria (8/9/2026): les etiquetes de la graella del mes fan 14 px
   d'alt, pensades per al ratolí. Al mòbil no s'hi encerta mai. Es fan més
   altes quan no hi ha ratolí —la graella del mes hi cap igual— i la llista
   de sota continua essent el camí còmode per editar-los. */
@media (hover: none) {
  .cal2-event-dot {
    font-size: 11px; padding: 5px 6px; margin-bottom: 3px;
    min-height: 26px; display: flex; align-items: center;
  }
}

/* Llegenda */
.cal2-legend {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 10px; margin-bottom: 16px;
  font-size: 12px; color: var(--text-sub);
}
.cal2-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}

/* Per agendar */
.cal2-agendar-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.cal2-agendar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.06em;
}
.cal2-agendar-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.cal2-agendar-item:last-child { border-bottom: none; }
.cal2-agendar-bullet { color: var(--crimson); font-weight: 700; flex-shrink: 0; }
.cal2-agendar-body   { flex: 1; line-height: 1.5; }
.cal2-agendar-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; line-height: 1;
  padding: 0 4px; flex-shrink: 0;
}
.cal2-agendar-del:hover { color: #EF4444; }

/* Panel dret */
.cal2-right {
  display: flex; flex-direction: column; gap: 16px;
}
.cal2-right-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-sub);
}

/* Event item del llistat */
.cal2-ev-item {
  display: flex; gap: 0; margin-bottom: 10px;
  cursor: pointer; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border); transition: box-shadow var(--ease);
}
.cal2-ev-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.cal2-ev-item-bar  { width: 4px; flex-shrink: 0; }
.cal2-ev-item-body { padding: 8px 10px; flex: 1; }
.cal2-ev-item-titol { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.cal2-ev-item-meta  { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.cal2-ev-item-desc  { font-size: 12px; color: var(--text-sub); margin-bottom: 3px; }
.cal2-ev-item-link  { font-size: 11.5px; color: #166534; font-weight: 600; text-decoration: none; }
.cal2-ev-item-link:hover { text-decoration: underline; }

/* Temes */
.cal2-temes-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.cal2-tema-item {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--ease);
}
.cal2-tema-item:last-child { border-bottom: none; }
.cal2-tema-item:hover { background: var(--surface-tint); }
.cal2-tema-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.cal2-tema-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.cal2-tema-nom  { font-size: 13px; font-weight: 700; flex: 1; }
.cal2-tema-grup { font-size: 11px; color: var(--text-muted); }
.cal2-tema-seq  { display: flex; flex-wrap: wrap; gap: 4px; }
.cal2-tema-sess {
  font-size: 11px; padding: 2px 7px;
  background: var(--surface-alt); border-radius: 10px;
  color: var(--text-sub);
}

/* Google Calendar badge i estils */
.cal2-ev-gcal { opacity: 0.92; cursor: default !important; }
.cal2-dot-gcal { opacity: 0.85; }
.cal2-gcal-icon {
  width: 14px; height: 14px;
  vertical-align: middle; margin-left: 4px;
  display: inline-block; flex-shrink: 0;
}

/* ============================================================
   TASQUES
   ============================================================ */
.tasques-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px; align-items: start;
}
.tasques-layout-single { grid-template-columns: 1fr !important; }
@media (max-width: 900px) { .tasques-layout { grid-template-columns: 1fr; } }

.tasques-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.tasques-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.tq-filter {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-sub);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all var(--ease);
}
.tq-filter:hover { border-color: var(--crimson); color: var(--crimson); }
.tq-filter.active { background: var(--garnet-deep); border-color: var(--garnet-deep); color: #fff; }
.tq-filter-fetes { border-style: dashed; }
.tq-filter-fetes.active { background: #6B7280; border-color: #6B7280; }
.tq-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.25); color: inherit;
  font-size: 10px; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  margin-left: 4px; vertical-align: middle;
}
.tq-filter:not(.active) .tq-badge { background: var(--crimson); color: #fff; }

/* Llista de tasques */
.tasques-list { display: flex; flex-direction: column; gap: 8px; }
.tasques-empty {
  text-align: center; padding: 48px 24px;
  color: var(--text-muted); display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}

.tq-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.tq-item:hover { border-color: var(--crimson-soft); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tq-item-feta  { opacity: 0.5; }
.tq-item-vencuda { border-left: 3px solid #EF4444; }

.tq-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ease); margin-top: 1px;
}
.tq-check:hover   { border-color: var(--crimson); }
.tq-check-done    { background: #22C55E; border-color: #22C55E; }
.tq-check-done svg { stroke: #fff; }

.tq-item-body  { flex: 1; min-width: 0; }
/* `overflow-wrap: anywhere`: un títol amb un enllaç llarg i sense espais no
   tenia on partir-se i estirava tota la pàgina de costat al mòbil (segona
   auditoria, 8/9/2026). */
.tq-item-titol { font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 3px; overflow-wrap: anywhere; }
.tq-item-feta .tq-item-titol { text-decoration: line-through; }
.tq-item-desc  { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.tq-item-meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tq-cat-pill {
  font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 10px; letter-spacing: 0.03em;
}
.tq-data         { font-size: 11.5px; color: var(--text-muted); }
.tq-data-vencuda { color: #EF4444; font-weight: 600; }
.tq-data-avui    { color: #F97316; font-weight: 600; }

/* Modal categoria */
.tq-cat-btns { display: flex; gap: 10px; }
.tq-cat-opt  {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; padding: 8px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--ease);
}
.tq-cat-opt:has(input:checked) { border-color: var(--crimson); background: #fdf2f5; }
.tq-cat-opt input { cursor: pointer; accent-color: var(--crimson); }

/* Columna lateral Google Tasks */
.tasques-side {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.tasques-side-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-sub);
}
.tasques-side-footer {
  padding: 8px 14px; border-top: 1px solid var(--border);
  text-align: right;
}

/* Google Tasks items */
.gtasques-list { padding: 4px 0; }
.gtq-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.gtq-item:last-child { border-bottom: none; }
.gtq-check { margin-top: 2px; flex-shrink: 0; color: var(--text-muted); }
.gtq-body  { flex: 1; }
.gtq-titol { font-size: 13px; font-weight: 500; color: var(--text-main); margin-bottom: 2px; }
.gtq-data  { font-size: 11px; color: var(--text-muted); }
.gtq-notes { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-style: italic; }

/* Google Tasks integrats a la llista */
.tq-item-google { cursor: default; background: var(--surface-tint); }
.tq-item-google:hover { border-color: var(--border); box-shadow: none; }
.gtq-gicon-sm  { width: 16px; height: 16px; display: block; }
.gtq-gicon     { width: 14px; height: 14px; display: inline-block; }
.gtq-cat-header {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 8px 14px 4px;
}

/* ============================================================
   GENERADOR DE GRUPS
   ============================================================ */
.grups-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px; align-items: start;
}
@media (max-width: 900px) { .grups-layout { grid-template-columns: 1fr; } }

.grups-title { font-size: 22px; font-weight: 700; margin: 0 0 16px; color: var(--text-main); }

.grups-config-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px;
}

/* Comptador d'alumnes per grup */
.grups-num-row {
  display: flex; align-items: center; gap: 16px;
  margin-top: 8px;
}
.grups-num-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
  font-size: 20px; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ease); color: var(--text-main);
}
.grups-num-btn:hover { border-color: var(--crimson); color: var(--crimson); }
.grups-num-val {
  font-size: 36px; font-weight: 800;
  color: var(--garnet-deep); min-width: 50px; text-align: center;
}

/* Condicions */
.grups-condicions-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.grups-cond-row {
  display: flex; align-items: center; gap: 8px;
}
.grups-cond-sel { flex: 1; font-size: 12px !important; padding: 6px 8px !important; }
.grups-cond-sep {
  font-size: 16px; font-weight: 700; color: #EF4444;
  flex-shrink: 0;
}

/* Resultat */
.grups-result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; font-size: 14px; color: var(--text-muted); font-weight: 500;
}
.grups-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.grups-card {
  border: 2px solid; border-radius: var(--r-md);
  padding: 14px 16px;
}
.grups-card-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 10px;
}
.grups-card-list {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.grups-card-list li {
  font-size: 14px; font-weight: 600;
}
.grups-card-count {
  font-size: 11px; font-weight: 500; opacity: 0.7;
  border-top: 1px solid currentColor; padding-top: 8px; margin-top: 4px;
}

/* Hora de sincronització a la topbar */
.sync-hora {
  font-size: 11px; color: rgba(255,255,255,0.55);
  font-weight: 400; margin-left: 2px;
}

/* ============================================================
   PÀGINA D'INICI — nova versió
   ============================================================ */
.home-top-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 0;
}
@media (max-width: 800px) { .home-top-grid { grid-template-columns: 1fr; } }

.home-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.home-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.home-card-label { font-size: 12px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.04em; }
.home-card-header-right { font-size: 11px; color: var(--text-muted); }
.home-empty-hint { font-size: 13px; color: var(--text-muted); padding: 16px 14px; }

/* Avui: el que no és una franja de l'horari (aniversaris i notes del dia).
   Va enganxat a dalt, abans de l'horari, amb una línia que el separa. */
.home-avui-destacats { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.home-avui-dest {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  font-size: 12px; line-height: 1.35;
  border: 1px solid transparent;
}
.home-avui-dest-icona { flex-shrink: 0; font-size: 13px; line-height: 1.2; }
.home-avui-dest-text  { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* El mateix rosa del pastís del planning, perquè es reconegui d'una pàgina
   a l'altra. */
.home-avui-dest-aniv {
  background: linear-gradient(135deg, #FBEAED, #F5D0D6);
  color: #7A1E2E; border-color: #EBC0C8;
}
/* I el mateix groc de la nota del dia del planning. */
.home-avui-dest-nota {
  background: #FEF3C7; color: #92400E; border-color: #FDE68A;
}

/* Horari avui */
.home-horari-list { padding: 6px 0; max-height: 320px; overflow-y: auto; }
.home-franja {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  min-height: 36px;
}
.home-franja:last-child { border-bottom: none; }
.home-franja-hora { font-size: 10.5px; color: var(--text-muted); min-width: 90px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.home-franja-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.home-franja-pill {
  display: inline-block; padding: 3px 10px; border-radius: 5px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.home-franja-alerta { font-size: 11px; font-weight: 700; color: #991B1B; }
.home-franja-sub { font-size: 10.5px; color: var(--text-muted); }
.home-franja-link { font-size: 13px; flex-shrink: 0; text-decoration: none; }
.home-franja-festa { opacity: 0.6; }

/* Recordatoris */
.home-rec-list { padding: 6px 0; max-height: 320px; overflow-y: auto; }
.home-rec-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 8px 14px 4px;
}
.home-rec-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--ease);
  font-size: 13px; color: var(--text-main);
}
.home-rec-item:last-child { border-bottom: none; }
.home-rec-item:hover { background: var(--surface-tint); }
.home-rec-urgent { background: #FEF2F2; }
.home-rec-urgent:hover { background: #FEE2E2; }
.home-rec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.home-rec-nom { flex: 1; }
.home-rec-meta { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

/* Setmana */
.home-setmana { margin-top: 12px; }
.home-setmana-grid {
  display: grid;
  /* ⚠ `minmax(0, 1fr)` I NO `1fr` A SEQUES (en Pol, 18/10/2026: «només es
     veu el dilluns i el dimarts»).

     Un `1fr` no es deixa encongir per sota del seu contingut, i els rètols
     dels events no es parteixen (`white-space: nowrap`). Amb un event de
     nom llarg —«Colònies Primer Cicle a Can Miqueló»— aquella columna
     demanava 216px, i al mòbil la graella se n'anava a 784px dins d'una
     targeta de 352: el dijous i el divendres quedaven FORA, i com que la
     targeta talla el que sobra, no hi havia ni manera de moure-ho amb el
     dit. A l'ordinador no es notava tant, però les cinc columnes tampoc no
     eren iguals: 216, 216, 204, 119, 119.

     Amb `minmax(0, …)` les columnes sempre són cinc i iguals, i el rètol
     que no hi cap s'acaba amb punts suspensius, que ja ho preveia. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 12px; gap: 8px;
}
.home-setm-dia {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 8px; min-height: 80px;
}
.home-setm-avui { border-color: var(--crimson); background: #fdf2f5; }
.home-setm-nom { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.home-setm-num { font-size: 18px; font-weight: 600; color: var(--text-main); margin-bottom: 6px; }
.home-setm-avui .home-setm-num { color: var(--crimson); }
.home-setm-pills { display: flex; flex-direction: column; gap: 3px; }
.home-setm-pill { font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-setm-pill-extra { background: #FEF9C3; color: #92400E; }
.home-setm-pill-alerta { background: #FEE2E2; color: #991B1B; }
.home-setm-normal { font-size: 10px; color: var(--text-muted); }

/* Al mòbil, un dia per fila. Cinc columnes en un telèfon surten a 60px
   cadascuna: hi cap el número del dia i prou, i el que hi tens apuntat no
   es pot llegir. En fila es llegeix tot sense haver de moure res. */
@media (max-width: 560px) {
  .home-setmana-grid { grid-template-columns: 1fr; gap: 6px; padding: 10px; }
  .home-setm-dia {
    min-height: 0; padding: 8px 10px;
    display: flex; align-items: center; gap: 9px;
  }
  .home-setm-nom, .home-setm-num { margin: 0; flex-shrink: 0; }
  .home-setm-num { font-size: 15px; }
  .home-setm-pills { flex: 1; min-width: 0; }
  .home-setm-pill, .home-setm-normal { font-size: 11px; }
}

/* Accés ràpid */
.home-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.home-accions-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
@media (max-width: 900px) { .home-accions-grid { grid-template-columns: repeat(3, 1fr); } }
.home-accio {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text-sub); text-align: center;
  transition: border-color var(--ease), color var(--ease);
}
.home-accio svg { width: 22px; height: 22px; stroke: var(--text-muted); transition: stroke var(--ease); }
.home-accio:hover { border-color: var(--crimson); color: var(--crimson); }
.home-accio:hover svg { stroke: var(--crimson); }

/* Enllaços d'interès */
.home-links-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
@media (max-width: 900px) { .home-links-grid { grid-template-columns: repeat(3, 1fr); } }
.home-link {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-sub);
  text-decoration: none; text-align: center;
  transition: border-color var(--ease), color var(--ease);
}
.home-link svg { width: 20px; height: 20px; stroke: var(--text-muted); transition: stroke var(--ease); }
.home-link:hover { border-color: var(--crimson); color: var(--crimson); }
.home-link:hover svg { stroke: var(--crimson); }
.home-link-pendent { opacity: 0.55; cursor: not-allowed; }
.home-link-pendent:hover { border-color: var(--border); color: var(--text-sub); }
.home-link-pendent:hover svg { stroke: var(--text-muted); }
.home-link-badge {
  font-size: 9px; background: #FEF3C7; color: #92400E;
  padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em;
}

/* Enllaços d'interès — icones petites */
.home-links-mini {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.home-link-mini {
  display: block; width: 40px; height: 40px;
  text-decoration: none; flex-shrink: 0;
  transition: transform 0.15s;
}
.home-link-mini img { width: 40px; height: 40px; display: block; }
.home-link-mini:hover { transform: scale(1.1); }
.home-link-mini-pendent { opacity: 0.4; cursor: not-allowed; }
.home-link-mini-pendent:hover { transform: none; }

/* Separador d'observacions mèdiques */
.obs-sep {
  color: #C01E4B; font-weight: 300; margin: 0 4px; opacity: 0.6;
}

.hero-count {
  font-size: 18px; font-weight: 400;
  color: var(--text-muted); margin-left: 6px;
}

/* ============================================================
   ACTITUD
   ============================================================ */
.notes-th-actitud,
.notes-th-carpeta,
.notes-th-mitj {
  background: #F9EDEF !important;
  border-left: 1px solid #E8C5CD !important;
}
.notes-th-actitud .notes-th-item-nom { color: #7A1E2E; cursor: pointer; }
.notes-th-actitud .notes-th-item-meta { color: #A63050; }
.notes-th-carpeta .notes-th-item-nom { color: #7A1E2E; }
.notes-th-carpeta .notes-th-item-meta { color: #A63050; }
.notes-th-mitj small { color: #A63050 !important; }
.nota10-actitud { cursor: pointer !important; }

/* Cel·les readonly (gris clar = bloquejades) */
.notes-td-item-readonly {
  background: #F7F7F7 !important;
  border-left: 1px solid #E8C5CD !important;
}

/* Modal actitud */
.actitud-modal { max-width: 90vw; width: 900px; }
.actitud-body  { overflow-x: auto; padding: 0; }
.actitud-table-wrap { overflow-x: auto; }
.actitud-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.actitud-table th, .actitud-table td {
  border: 1px solid var(--border); padding: 6px 8px; text-align: center;
}
.actitud-th-nom { text-align: left; min-width: 140px; background: var(--surface-alt); font-weight: 600; }
.actitud-th-asp { min-width: 110px; background: var(--surface-alt); font-size: 11px; font-weight: 600; color: var(--text-sub); }
.actitud-th-mitj { min-width: 80px; background: var(--surface-alt); font-weight: 600; }
.actitud-td-nom { text-align: left; font-weight: 500; color: var(--text-main); background: var(--surface-tint); }
.actitud-input {
  width: 60px; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 6px; text-align: center; font-size: 13px;
  background: var(--surface); color: var(--text-main);
  outline: none;
}
.actitud-input:focus { border-color: var(--crimson); }
.actitud-td-mitj { background: var(--surface-tint); }

/* Nom de columnes especials amb icona */
.special-col-nom {
  display: flex; align-items: center; gap: 4px;
  justify-content: center; color: #7A1E2E;
}
.special-col-nom svg { stroke: #A63050; flex-shrink: 0; }

/* ============================================================
   ASSOLIMENTS
   ============================================================ */
.assim-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.assim-selectors { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.assim-sel-group { display: flex; align-items: center; gap: 10px; }
.assim-sel-label { font-size: 11px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

.assim-layout {
  display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start;
}
@media (max-width: 900px) { .assim-layout { grid-template-columns: 1fr; } }

/* Capçalera objectius */
.assim-objectius-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.assim-objectius-count { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* Taula */
.assim-table-scroll { overflow-x: auto; }
.assim-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.assim-table th, .assim-table td { border: 1px solid var(--border); }

.assim-th-nom {
  text-align: left; padding: 8px 12px; min-width: 140px;
  background: var(--surface-alt); font-size: 11px; font-weight: 700;
  color: var(--text-muted); position: sticky; left: 0; z-index: 1;
}
.assim-th-obj {
  min-width: 120px; max-width: 160px; padding: 8px 8px 6px;
  background: var(--surface-alt); vertical-align: top; text-align: center;
}
.assim-obj-num { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.assim-obj-text { font-size: 11px; color: var(--text-sub); line-height: 1.35;
  margin-bottom: 6px; text-align: left; }
.assim-obj-edit {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--text-muted); padding: 0 4px;
}
.assim-obj-edit:hover { color: var(--crimson); }
.assim-th-pct { min-width: 60px; padding: 8px; background: #F9EDEF;
  font-size: 11px; color: #7A1E2E; text-align: center; font-weight: 700; }

.assim-td-nom {
  padding: 8px 12px; font-size: 13px; font-weight: 500;
  background: var(--surface-tint); position: sticky; left: 0; z-index: 1;
  color: var(--text-main);
}
.assim-cell {
  text-align: center; padding: 10px 8px; cursor: pointer;
  font-size: 15px; font-weight: 700; transition: background 0.1s;
  user-select: none;
}
.assim-cell.buit     { color: var(--text-muted); background: var(--surface); }
.assim-cell.assolit  { color: #065F46; background: #D1FAE5; }
.assim-cell.no-assolit { color: #991B1B; background: #FEE2E2; }
.assim-cell:hover    { filter: brightness(0.95); }
.assim-td-pct        { text-align: center; padding: 6px; background: #F9EDEF; }

/* Resum lateral */
.assim-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.assim-sidebar-title {
  padding: 10px 14px; background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase;
}
.assim-resum-list { padding: 8px 0; }
.assim-resum-item { padding: 7px 14px; border-bottom: 1px solid var(--border); }
.assim-resum-item:last-child { border-bottom: none; }
.assim-resum-nom { font-size: 12px; font-weight: 600; color: var(--text-main); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assim-resum-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 3px; }
.assim-resum-bar { height: 6px; border-radius: 3px; transition: width 0.3s; }
.assim-resum-pct { font-size: 11px; font-weight: 700; }

/* Estat parcial (~) */
.assim-cell.parcial { color: #92400E; background: #FEF3C7; }
.assim-layout-single { grid-template-columns: 1fr !important; }

/* Fitxa alumne - nou layout */
.fitxa-toprow {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.fitxa-row-2col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; align-items: start;
}
@media (max-width: 900px) { .fitxa-row-2col { grid-template-columns: 1fr; } }

/* Navegació prev/next a la fitxa */
.fitxa-nav {
  display: flex; align-items: center; gap: 4px;
}
.fitxa-nav-btn {
  padding: 6px 8px !important; min-width: 32px;
}
.fitxa-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.fitxa-nav-pos {
  font-size: 12px; color: var(--text-muted);
  min-width: 48px; text-align: center; font-variant-numeric: tabular-nums;
}

.fitxa-back-nav {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; margin-bottom: 12px;
}

.sidebar-sheets-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,0.55);
  text-decoration: none; transition: color var(--ease);
}
.sidebar-sheets-link:hover { color: rgba(255,255,255,0.9); }
.sidebar-sheets-link svg { opacity: 0.6; flex-shrink: 0; }
.sidebar-sheets-link:hover svg { opacity: 1; }

/* Capçalera objectiu amb nom curt + ⓘ */
.assim-obj-nom { font-size: 12px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; line-height: 1.3; }
.assim-obj-info {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--text-muted); padding: 0 2px;
  line-height: 1;
}
.assim-obj-info:hover { color: var(--crimson); }

/* Tooltip info objectiu */
.assim-info-tip {
  display: none; position: absolute; z-index: 9999;
  background: var(--text-main); color: #fff;
  font-size: 12px; line-height: 1.5;
  padding: 10px 14px; border-radius: 8px;
  max-width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.assim-info-tip strong { display: block; margin-bottom: 4px; }

/* Bafarada de comentari: sempre visible a la cantonada inferior dreta */
.plan-cell-coment-dot {
  position: absolute; bottom: 4px; right: 5px;
  font-size: 13px; opacity: 0.3; cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1;
}
.plan-cell-coment-dot.has-coment {
  opacity: 1; filter: none;
}
.plan-cell-coment-dot svg {
  width: 14px; height: 14px;
}
.plan-cell:hover .plan-cell-coment-dot { opacity: 0.6; }
.plan-cell-coment-dot.has-coment:hover { opacity: 1; }
/* ⚠ AL MÒBIL NO S'HI PODIA ARRIBAR.

   Segona auditoria (8/9/2026): el botó del comentari feia 14×16 px i estava
   al 30% d'opacitat, i només es feia visible passant-hi el ratoli per sobre
   —una cosa que al mòbil no existeix. És el mateix cas dels botons dels
   post-its que es van arreglar a la v218 i que aquí no es va tocar.

   Amb dit: una zona de toc de 44×44 (el mínim recomanat) i prou opacitat per
   veure'l sense tocar res. La icona no creix: només la zona que la rodeja. */
@media (hover: none) {
  .plan-cell-coment-dot {
    opacity: 0.75;
    bottom: 0; right: 0;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 0 5px 4px 0;
  }
}

/* Nota del dia al planning */
.plan-th-dia-top { display: flex; align-items: center; gap: 4px; justify-content: center; }
.plan-day-note-dot { font-size: 8px; color: #F59E0B; margin-left: 2px; }
.plan-day-note-text {
  font-size: 10px; color: #92400E;
  background: #FEF3C7; border-radius: 4px;
  padding: 2px 6px; margin-top: 3px;
  line-height: 1.4; text-align: left;
  max-width: 100%; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.plan-day-note-text span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Botó × per esborrar notes */
.plan-note-del {
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: #B45309; opacity: 0.5; margin-left: 5px;
  padding: 0 2px; vertical-align: middle;
  transition: opacity 0.15s;
}
.plan-note-del:hover { opacity: 1; }

/* Botó + a la capçalera del dia */
.plan-day-add-note {
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--text-muted);
  padding: 0 2px; margin-left: 2px; opacity: 0.4;
  transition: opacity 0.15s;
}
.plan-th-dia:hover .plan-day-add-note { opacity: 0.8; }
.plan-day-add-note:hover { opacity: 1 !important; color: var(--crimson); }

.alumnes-toolbar a.btn { text-decoration: none; }

/* ============================================================
   OPTIMITZACIONS DE RENDIMENT
   ============================================================ */
/* Les pàgines ocultes ja tenen display:none, que ja evita el seu render */

/* Animacions del sidebar més fluides (capa GPU dedicada) */
.sidebar { will-change: transform; }
.modal-overlay, .drawer-overlay { will-change: opacity; }

/* Scroll més suau a les taules grans */
.notes-table-wrap, .assim-table-scroll, .reg-table-wrap, .plan-grid-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Bombolla de tasques pendents a la pàgina d'inici */
.home-badge {
  position: absolute; top: 6px; right: 6px;
  background: #C81E1E; color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Selector de durada al planning */
.plan-durada-opts {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
}
.plan-durada-opt {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer; color: var(--text-main);
}
.plan-durada-opt input[type="radio"] { accent-color: var(--crimson); }
.plan-durada-num-btn {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; width: 28px; height: 28px;
  font-size: 16px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--text-main); transition: background 0.15s;
}
.plan-durada-num-btn:hover { background: var(--bg-alt); }

/* ============================================================
   GENERADOR DE COMENTARIS — compacte, horitzontal
   ============================================================ */
.coment-page {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px;
}
.coment-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.coment-header-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.coment-controls {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 14px;
}
@media (max-width: 700px) { .coment-controls { grid-template-columns: 1fr; } }
.coment-control-field .modal-label { margin-bottom: 4px; }

/* Llegenda de nivells */
.coment-legenda {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin-bottom: 12px;
  padding: 8px 12px; background: var(--bg-alt);
  border-radius: var(--r-md); font-size: 12px; color: var(--text-main);
}
.coment-legenda .coment-niv-btn { margin: 0; cursor: default; }
.coment-legenda > span:not(.coment-niv-btn) { margin-right: 10px; }

/* Files compactes: nom objectiu + 4 botons horitzontals */
.coment-objectiu-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.coment-objectiu-row:hover { background: var(--bg-alt); }
.coment-objectiu-row:last-child { border-bottom: none; }
.coment-obj-nom-compact {
  font-size: 13px; font-weight: 600; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coment-nivells-row {
  display: flex; gap: 4px; flex-shrink: 0;
}
.coment-niv-btn {
  border: 2px solid transparent;
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 6px;
  cursor: pointer; font-family: inherit;
  transition: all 0.12s;
  min-width: 42px; text-align: center;
  opacity: 0.55;
}
.coment-niv-btn:hover { opacity: 1; transform: translateY(-1px); }
.coment-niv-btn.active {
  opacity: 1; border-color: currentColor;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.badge-mba  { background: #D1FAE5; color: #065F46; }
.badge-ass  { background: #DBEAFE; color: #1E40AF; }
.badge-aaj  { background: #FEF3C7; color: #92400E; }
.badge-nass { background: #FEE2E2; color: #991B1B; }

/* Modal de resultat */
.coment-result-modal {
  max-width: 680px; width: 90%;
}
.coment-text-box {
  font-size: 14px; line-height: 1.75; color: var(--text-main);
  white-space: pre-wrap; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; min-height: 160px; outline: none;
}
.coment-text-box:focus {
  border-color: var(--crimson); box-shadow: 0 0 0 2px #F5D0D6;
}
.coment-loading {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 13px; padding: 20px 0;
  justify-content: center;
}
.coment-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: var(--crimson); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Selector de gènere al formulari d'alumne */
.genere-sel-row {
  display: flex; gap: 16px; margin-top: 4px;
}
.genere-sel-opt {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; cursor: pointer; color: var(--text-main);
}
.genere-sel-opt input[type="radio"] { accent-color: var(--crimson); }

/* Botó de gènere al panell d'alumnes */
.student-gen-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px;
  padding: 0; font-family: inherit;
  text-decoration: underline; text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.student-gen-btn:hover {
  color: var(--crimson); text-decoration-color: var(--crimson);
}
.student-gen-btn[data-gen="f"] { color: #C026D3; }
.student-gen-btn[data-gen="m"] { color: #2563EB; }

/* Events del calendari dins del planning (alerta visual) */
.plan-cell-cal-event {
  display: flex; align-items: center; gap: 3px;
  background: #DBEAFE; color: #1E40AF;
  font-size: 10px; font-weight: 600;
  padding: 2px 5px; border-radius: 4px;
  margin-bottom: 3px; line-height: 1.25;
  border-left: 3px solid #2563EB;
  cursor: pointer; overflow: hidden;
}
.plan-cell-cal-event:hover { background: #BFDBFE; }
.plan-cell-cal-event svg { flex-shrink: 0; }
.plan-cell-cal-hora { font-weight: 700; }

/* PI / AM — atenció a la diversitat */
.pi-am-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; cursor: pointer; color: var(--text-main);
  padding: 6px 0;
}
.pi-am-check input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--crimson); cursor: pointer; flex-shrink: 0;
}
.pi-am-assigs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pi-am-assig-btn {
  font-size: 12px; padding: 4px 10px;
  border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.pi-am-assig-btn.active {
  background: #FBEAED; border-color: var(--crimson); color: #7A1E2E; font-weight: 600;
}

/* Badges PI/AM a la targeta de l'alumne */
.alumne-badge-pi, .alumne-badge-am {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; margin-left: 4px;
}
.alumne-badge-pi { background: #2563EB; color: #fff; }  /* blau viu */
.alumne-badge-am { background: #B94708; color: #fff; }  /* taronja */

/* Tags dins l'àrea d'avisos de la fitxa */
.fitxa-avis-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-right: 4px;
}
.fitxa-avis-medic { background: #FBEAED; color: #7A1E2E; }
.fitxa-avis-espec { background: #FEF3C7; color: #92400E; }
.fitxa-avis-pi    { background: #2563EB; color: #fff; }
.fitxa-avis-am    { background: #B94708; color: #fff; }
.fitxa-avis-eap   { background: #7C3AED; color: #fff; }
/* Les categories que vénen del document de fitxes de l'escola. Cadascuna
   amb el seu color: barrejades, la mestra no distingeix un diagnòstic
   d'una nota de conducta, que és justament el que passava abans. */
.fitxa-avis-trast { background: #0F766E; color: #fff; }
.fitxa-avis-acoll { background: #0369A1; color: #fff; }
.fitxa-avis-drets { background: #EEF2FF; color: #3730A3; }
.fitxa-avis-emvic { background: #ECFDF5; color: #065F46; }

/* El menú lateral ja no té cap secció que es plegui: les eines van a la
   seva pàgina (v296). El que queda de `#einesItems` és una llista amagada
   amb `display:none`, que és d'on surten les targetes. */

/* Manual d'ús + Configuració de costat al peu */
.sidebar-footer-row { display: flex; gap: 6px; }
.nav-item-half {
  flex: 1; min-width: 0;
  flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 10px 6px; font-size: 12px;
}
.nav-item-half svg { width: 18px; height: 18px; }

/* ============================================================
   DISTRIBUCIÓ DE L'AULA (seients) — taules movibles lliurement
   ============================================================ */
.seients-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.seients-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.seients-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
}
.seients-toolbar-label { font-size: 13px; font-weight: 700; color: var(--garnet-text); }
.seients-creator { display: flex; align-items: center; gap: 6px; }
.seients-step {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-alt, #F7F4F5); color: var(--garnet-text); font-size: 17px;
  cursor: pointer; font-family: inherit; line-height: 1; font-weight: 700;
}
.seients-step:hover { background: var(--garnet-soft); border-color: var(--crimson); }
.seients-num { font-size: 15px; font-weight: 800; color: var(--garnet-deep); min-width: 22px; text-align: center; }
.seients-creator-label { font-size: 12.5px; color: var(--text-muted); }
.seients-orient { display: flex; gap: 4px; }
.seients-orient-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-alt, #F7F4F5); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-family: inherit;
}
.seients-orient-btn.active { background: var(--garnet-soft); border-color: var(--crimson); color: var(--garnet-text); }
.seients-toolbar-sep { flex: 1; }
.seients-count { font-size: 12px; color: var(--text-muted); }
.seients-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }

.seients-layout { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .seients-layout { grid-template-columns: 1fr; } }

.seients-board {
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 14px; padding: 0; min-height: 520px; position: relative;
  overflow: hidden;
}
.seients-pissarra {
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.15em;
  color: var(--garnet-text); background: linear-gradient(#F5D0D6, #FBEAED);
  padding: 8px; border-bottom: 1px solid var(--garnet-soft2);
  position: sticky; top: 0; z-index: 5;
}
/* El taulell on es mouen les taules (posició absoluta) */
.seients-canvas {
  position: relative; width: 100%; height: 520px; overflow: auto;
}
.seients-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; color: var(--text-muted);
  pointer-events: none;
}

/* Una fila/taula movible */
.seients-group {
  position: absolute;
  display: flex; gap: 5px; padding: 8px;
  background: rgba(249,246,247,0.95); border: 1px solid var(--border);
  border-radius: 10px; cursor: move; user-select: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.seients-group.vertical { flex-direction: column; }
.seients-group.dragging-group { opacity: 0.7; box-shadow: 0 6px 20px rgba(0,0,0,0.18); z-index: 50; }
.seients-group-del {
  position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
  background: #fff; border: 1px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-muted); font-size: 13px; line-height: 1; z-index: 3;
}
.seients-group-del:hover { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.seients-group-handle {
  position: absolute; top: -8px; left: -8px; width: 20px; height: 20px;
  background: var(--garnet-mid); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: move;
  color: #fff; z-index: 3;
}

/* Un seient */
.seient {
  width: 72px; height: 56px; border-radius: 9px;
  border: 2px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-align: center; padding: 4px;
  transition: background 0.12s, border-color 0.12s; position: relative;
  color: var(--text-main); line-height: 1.15;
}
.seient.buit { color: var(--text-muted); font-weight: 500; background: var(--bg-alt, #F9F6F7); border-style: dashed; }
.seient.ocupat { background: #FBEAED; border-color: var(--garnet-mid); color: var(--garnet-deep); cursor: grab; }
.seient.dragover { border-color: var(--crimson); background: #F5D0D6; }
.seient.dragging { opacity: 0.4; }
.seient-avatar {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--garnet-mid); color: #fff;
  font-size: 7px; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.seient-warn { position: absolute; top: 2px; right: 3px; font-size: 11px; color: #D97706; }

/* Pool d'alumnes */
.seients-pool {
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; position: sticky; top: 16px;
}
.seients-pool-title { font-size: 13px; font-weight: 700; color: var(--garnet-text); margin-bottom: 10px; }
.seients-pool-list { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }
.seients-pool-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--bg-alt, #F7F4F5); border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; cursor: grab; font-weight: 600;
}
.seients-pool-item:hover { background: var(--garnet-soft); }
.seients-pool-item.dragging { opacity: 0.4; }
.seients-pool-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--garnet-mid);
  color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.seients-pool-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 16px 0; }

/* Cel·la del planning amb "Permanència" → granat clar */
.plan-cell-permanencia {
  background: #FBEAED !important;
}
.plan-cell-permanencia .plan-cell-assig { color: #7A1E2E; }

/* ============================================================
   PERFIL DEL MESTRE
   ============================================================ */
.nav-item-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 8px;
  background: rgba(255,255,255,0.06); border-radius: 10px;
}
.nav-item-profile:hover { background: rgba(255,255,255,0.12); }
.nav-profile-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--crimson); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.nav-profile-name {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.perfil-page { max-width: 680px; }
.perfil-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.perfil-avatar-big {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--crimson), var(--garnet-deep));
  color: #fff; font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.perfil-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; margin-bottom: 16px;
}
.perfil-card-title { font-size: 15px; font-weight: 700; color: var(--garnet-text); margin-bottom: 12px; }
.perfil-tutor-sel { display: flex; gap: 8px; flex-wrap: wrap; }
.perfil-grup-btn {
  padding: 10px 20px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg-alt, #F7F4F5); color: var(--text-main);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all 0.12s;
}
.perfil-grup-btn:hover { border-color: var(--crimson); }
.perfil-grup-btn.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }

/* Bloc per cada grup on tries assignatures */
.perfil-grup-block {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.perfil-grup-block-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.perfil-grup-block-title { font-size: 14px; font-weight: 700; color: var(--garnet-deep); }
.perfil-grup-block-title .es-tutor {
  font-size: 10px; font-weight: 700; background: var(--garnet-soft); color: var(--garnet-text);
  padding: 2px 8px; border-radius: 10px; margin-left: 8px;
}
.perfil-assig-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-assig-chip {
  font-size: 12.5px; padding: 6px 12px; border-radius: 16px;
  border: 1.5px solid var(--border); background: var(--bg-card, #fff);
  color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all 0.12s;
}
/* ⚠ `--garnet-soft` i `--garnet-text` no existeixen a :root (29/9/2026):
   sense el color de recanvi, el navegador llençava tota la línia i una
   assignatura marcada es quedava blanca, igual que una de no marcada.
   Els valors són els mateixos que fa servir la resta de l'app. */
.perfil-assig-chip.active {
  background: var(--garnet-soft, #FBEAED); border-color: var(--crimson);
  color: var(--garnet-text, #7A1E2E); font-weight: 600;
}

/* Perfil — selector de curs i línia (tota la primària) */
.perfil-tutor-cursos { display: flex; gap: 6px; flex-wrap: wrap; }
.perfil-tutor-cursos .perfil-grup-btn { padding: 9px 16px; font-size: 15px; }
.perfil-tutor-linies {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.perfil-tutor-lin-label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.perfil-linia-btn {
  padding: 7px 14px; border-radius: 8px; border: 2px solid var(--border);
  background: var(--bg-alt, #F7F4F5); color: var(--text-main);
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.perfil-linia-btn:hover { border-color: var(--crimson); }
.perfil-linia-btn.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }

.perfil-grup-filter {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.perfil-grup-add { max-width: 200px; }
.perfil-grup-remove {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card, #fff); color: var(--text-muted); cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.perfil-grup-remove:hover { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

/* ============================================================
   MODAL VEURE ALUMNES D'UN GRUP (des de notes)
   ============================================================ */
.modal-wide { max-width: 720px; width: 92vw; }
.grupview-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.grupview-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.grupview-card-corner { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; }
.grupview-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; color: #fff;
}
.grupview-badge-pi { background: #2563EB; }
.grupview-badge-am { background: #EA580C; }
.grupview-alert { color: #D97706; font-size: 12px; }
.grupview-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--garnet-mid), var(--garnet-deep));
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.grupview-nom { font-size: 13px; font-weight: 600; line-height: 1.25; margin-bottom: 10px; min-height: 32px; display: flex; align-items: center; }
.grupview-actions { display: flex; gap: 6px; width: 100%; }
.grupview-btn {
  flex: 1; padding: 6px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-alt, #F7F4F5); color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.grupview-btn:hover { background: var(--garnet-soft); color: var(--garnet-text); border-color: var(--crimson); }
.grupview-btn.active { color: var(--garnet-text); border-color: var(--garnet-mid); background: var(--garnet-soft); }
.grupview-btn svg { width: 16px; height: 16px; }
.grupview-btn .obs-badge { top: -5px; right: -5px; }
.grupview-empty { text-align: center; padding: 30px 0; color: var(--text-muted); }
.grupview-loading { text-align: center; padding: 30px 0; color: var(--text-muted); }

/* Fitxa de consulta d'un alumne del grup */
.gvfitxa-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.gvfitxa-row:last-child { border-bottom: none; }
.gvfitxa-k { font-size: 13px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.gvfitxa-v { font-size: 13px; color: var(--text-main); text-align: right; }

/* Aniversaris automàtics al planning */
.plan-day-aniversari {
  background: linear-gradient(135deg, #FBEAED, #F5D0D6);
  color: #7A1E2E; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px; margin-top: 4px;
  border: 1px solid #EBC0C8; text-align: left;
  display: flex; align-items: center;
}
.plan-day-aniversari span { line-height: 1.3; }

/* Menú d'assignatures buit (sense perfil) */
.nav-assig-empty {
  font-size: 12px; color: rgba(255,255,255,0.5);
  padding: 8px 12px; line-height: 1.4; font-style: italic;
}

/* Fitxa de consulta millorada (blocs) */
.gvf-block {
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--border);
}
.gvf-block-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.gvf-block-text { font-size: 13.5px; line-height: 1.5; color: var(--text-main); }
.gvf-medic { background: #FEF2F2; border-color: #FECACA; }
.gvf-medic .gvf-block-title { color: #B91C1C; }
.gvf-especific { background: #FFFBEB; border-color: #FDE68A; }
.gvf-especific .gvf-block-title { color: #B45309; }
.gvf-diversitat { background: #EFF6FF; border-color: #BFDBFE; }
.gvf-diversitat .gvf-block-title { color: #1D4ED8; }
.gvf-tag-line { font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.gvf-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; }
.gvf-tag-pi { background: #2563EB; }
.gvf-tag-am { background: #EA580C; }
.gvf-tag-eap { background: #7C3AED; }
.gvf-obs { background: var(--bg-alt, #F9F6F7); }
.gvf-obs .gvf-block-title { color: var(--garnet-text); }
.gvf-obs-item { font-size: 13px; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid var(--border); }
.gvf-obs-item:last-child { border-bottom: none; }
.gvf-obs-mat { font-weight: 700; color: var(--garnet-text); margin-right: 6px; }

/* Panell de marcar assoliments d'un alumne */
.gva-trim { margin-bottom: 16px; }
.gva-trim-title { font-size: 13px; font-weight: 700; color: var(--garnet-text); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.gva-obj { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.gva-obj-nom { font-size: 13px; flex: 1; line-height: 1.35; }
.gva-btns { display: flex; gap: 4px; flex-shrink: 0; }
.gva-btn {
  width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--bg-card, #fff); font-size: 11px; font-weight: 700; cursor: pointer;
  color: var(--text-muted); font-family: inherit; transition: all 0.12s;
}
.gva-btn:hover { border-color: var(--garnet-mid); }
/* ⚠ EL BOTÓ TRIAT ES QUEDAVA BUIT: LES LLETRES NO ES LLEGIEN.
   Auditoria de l'11/9/2026. Blanc sobre el groc #EAB308 són 1,92:1 (el mínim
   és 4,5): en marcar «AS» el botó es tornava groc i les lletres desapareixien.
   El verd anava igual de just (3,30:1). Es fan servir les MATEIXES parelles
   que ja hi ha a `js/notes.js` per a aquests mateixos valors, que sí que
   compleixen; a més, així els dos llocs de l'app diuen el mateix color. */
.gva-btn.gva-a.active  { background: #D1FAE5; border-color: #065F46; color: #065F46; }
.gva-btn.gva-as.active { background: #FEF3C7; border-color: #92400E; color: #92400E; }
.gva-btn.gva-na.active { background: #FEE2E2; border-color: #991B1B; color: #991B1B; }
.gva-btn.gva-clear.active { background: var(--text-muted); border-color: var(--text-muted); color: #fff; }

/* Grup al costat de l'assignatura al menú */
.nav-assig-label { display: inline-flex; align-items: center; gap: 6px; }
.nav-assig-grup {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
}

/* Fitxa de consulta enriquida (especialista): contacte, notes, assoliments */
.gvf-contacte { background: var(--bg-alt, #F9F6F7); }
.gvf-contacte .gvf-block-title { color: var(--garnet-text); }
.gvf-contacte-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.gvf-contacte-row:last-child { border-bottom: none; }
.gvf-contacte-k { color: var(--text-muted); font-weight: 600; }
.gvf-contacte-v { text-align: right; color: var(--text-main); }
.gvf-block-sub { font-weight: 400; font-size: 11px; color: var(--text-muted); }
.gvf-notes { background: #F0FDF4; border-color: #BBF7D0; }
.gvf-notes .gvf-block-title { color: #15803D; }
.gvf-assim { background: #EFF6FF; border-color: #BFDBFE; }
.gvf-assim .gvf-block-title { color: #1D4ED8; }
.gvf-taula { width: 100%; border-collapse: collapse; margin-top: 6px; }
.gvf-taula th { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--border); }
.gvf-taula th:first-child { text-align: left; }
.gvf-taula td { font-size: 13px; padding: 5px 6px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
.gvf-taula-mat { text-align: left !important; font-weight: 600; color: var(--text-main); }
.gvf-taula tbody tr:last-child td { border-bottom: none; }

/* Botó de perfil a dalt del menú (sobre General) */
.nav-item-profile-top {
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Selector de tipus de grups (homogeni / heterogeni) */
.grups-tipus-sel { display: flex; gap: 8px; }
.grups-tipus-btn {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; text-align: left;
  transition: all 0.15s var(--ease);
}
.grups-tipus-btn:hover { border-color: var(--garnet-mid); }
.grups-tipus-btn.active {
  border-color: var(--crimson); background: #FBEAED;
}
.grups-tipus-nom { font-weight: 700; font-size: 13px; color: var(--text-main); }
.grups-tipus-btn.active .grups-tipus-nom { color: var(--garnet-text); }
.grups-tipus-desc { font-size: 11px; color: var(--text-muted); }

/* Condicions de seient a la fitxa de l'alumne */
.seient-cond-grid { display: flex; flex-direction: column; gap: 8px; }
.seient-cond-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14px; color: var(--text-main);
}
.seient-cond-check input { width: 17px; height: 17px; accent-color: var(--crimson); cursor: pointer; }

/* Marcadors de l'aula (taula del mestre, porta, finestres) */
.seients-marker {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.95); border: 1.5px dashed var(--garnet-mid);
  cursor: grab; user-select: none; font-size: 12px; font-weight: 600;
  color: var(--garnet-text); box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.seients-marker:active { cursor: grabbing; }
.seients-marker-emoji { font-size: 15px; }
.seients-marker-mestre   { border-color: #15803D; color: #15803D; }
.seients-marker-porta    { border-color: #B45309; color: #B45309; }
.seients-marker-finestra { border-color: #1D4ED8; color: #1D4ED8; }
.seients-marker-del {
  margin-left: 2px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.08); font-size: 13px; line-height: 1; cursor: pointer;
}
.seients-marker-del:hover { background: var(--crimson); color: #fff; }

/* Llista de companys amb qui no pot seure */
.seient-incompat-list { display: flex; flex-wrap: wrap; gap: 6px; }
.seient-incompat-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px; border-radius: 14px;
  background: #FBEAED; color: var(--garnet-text);
  font-size: 13px; font-weight: 600;
}
.seient-incompat-tag button {
  border: none; background: rgba(0,0,0,0.1); color: inherit;
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.seient-incompat-tag button:hover { background: var(--crimson); color: #fff; }

/* ============================================================
   NOTES I POST-ITS
   ============================================================ */
.postits-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.postits-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; align-items: start;
}
.postit {
  position: relative; border-radius: 4px; padding: 16px 16px 44px;
  min-height: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  font-family: 'Nunito', sans-serif;
}
.postit:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 8px 20px rgba(0,0,0,0.16); }
.postit-groc    { background: #FFF3B0; }
.postit-rosa    { background: #FFD1DC; }
.postit-blau    { background: #B8E4F0; }
.postit-verd    { background: #C7EFCF; }
.postit-taronja { background: #FFD9A8; }
.postit-lila    { background: #E0C3F0; }
.postit-titol {
  font-weight: 800; font-size: 15px; color: #3a3a3a;
  margin-bottom: 8px; word-break: break-word; line-height: 1.3;
}
.postit-text {
  font-size: 14px; color: #4a4a4a; white-space: pre-wrap; word-break: break-word;
  line-height: 1.45; flex: 1; overflow-wrap: break-word;
}
.postit-data {
  position: absolute; bottom: 12px; left: 16px;
  font-size: 11px; color: rgba(0,0,0,0.4); font-weight: 600;
}
.postit-actions {
  position: absolute; bottom: 8px; right: 10px; display: flex; gap: 4px;
  opacity: 0; transition: opacity 0.15s var(--ease);
}
.postit:hover .postit-actions { opacity: 1; }
.postit-act-btn {
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: rgba(0,0,0,0.08); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #3a3a3a;
}
.postit-act-btn:hover { background: rgba(0,0,0,0.18); }
.postit-act-btn svg { width: 15px; height: 15px; }
.postits-empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-muted);
}
/* Selector de color al modal */
.postit-color-sel { display: flex; gap: 10px; flex-wrap: wrap; }
.postit-color-opt {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: border-color 0.15s var(--ease);
}
.postit-color-opt.active { border-color: var(--garnet-deep); }

/* Post-it important, recordatoris i drag */
.postit-important {
  box-shadow: 0 4px 16px rgba(192,30,75,0.28);
  outline: 2.5px solid var(--crimson); outline-offset: 0;
}
.postit-pin {
  position: absolute; top: -10px; right: 10px; font-size: 20px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
.postit-recordatori {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; padding: 4px 9px; border-radius: 12px;
  background: rgba(0,0,0,0.08); color: #444;
  font-size: 12px; font-weight: 700; align-self: flex-start;
}
.postit-recordatori.avui { background: var(--crimson); color: #fff; }
.postit-recordatori.vencut { background: #9B1C31; color: #fff; }
.postit-dragging { opacity: 0.4; transform: scale(0.97); }
.postit-dropzone { outline: 2.5px dashed var(--garnet-mid); outline-offset: 3px; }
.postit[draggable="true"] { cursor: grab; }
.postit[draggable="true"]:active { cursor: grabbing; }

/* Configuració (ús desenvolupador): seccions netes */
.cfg-section-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--garnet-mid);
  margin: 20px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cfg-section-title:first-child { margin-top: 0; }
.cfg-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Els blocs plegables de la configuració.
   Van tots dos igual a posta: si un porta el triangle cru del navegador
   i l'altre no, sembla que un dels dos hi sigui per error. */
.cfg-avancat,
.cfg-block { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.cfg-avancat > summary,
.cfg-block > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted);
  list-style: none; user-select: none;
  padding: 5px 0; border-radius: var(--r-sm);
  transition: color 0.12s var(--ease);
}
.cfg-avancat > summary:hover,
.cfg-block > summary:hover { color: var(--garnet-text); }
/* Amb el teclat s'ha de veure on ets: sense això, el Tab hi passa per
   sobre sense deixar rastre. */
.cfg-avancat > summary:focus-visible,
.cfg-block > summary:focus-visible {
  outline: 2px solid var(--crimson); outline-offset: 3px; color: var(--garnet-text);
}
.cfg-avancat > summary::-webkit-details-marker,
.cfg-block > summary::-webkit-details-marker { display: none; }
.cfg-avancat > summary::before,
.cfg-block > summary::before { content: '▸ '; }
.cfg-avancat[open] > summary::before,
.cfg-block[open] > summary::before { content: '▾ '; }

/* ============================================================
   HORARI (plantilla setmanal)
   ============================================================ */
.horari-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.horari-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.horari-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.horari-grid {
  border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 560px;
}
.horari-grid th {
  font-size: 12px; font-weight: 800; color: var(--garnet-text);
  padding: 8px 4px; text-align: center; text-transform: uppercase; letter-spacing: 0.03em;
}
.horari-grid th.horari-hora-head { width: 84px; }
.horari-grid td.horari-hora {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-align: center; white-space: nowrap; padding: 4px; width: 84px;
}
.horari-cell {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 6px; text-align: center;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-main);
  min-height: 46px; transition: all 0.12s var(--ease); line-height: 1.2;
}
.horari-cell:hover { border-color: var(--crimson); }
.horari-cell.buida { color: var(--text-muted); font-weight: 400; opacity: 0.5; }
.horari-cell.pati { background: #FBEAED; color: var(--garnet-mid); font-style: italic; cursor: default; opacity: 1; }
/* Xips de matèries ràpides al modal */
.horari-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.horari-quick-chip {
  padding: 5px 11px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--garnet-text);
}
.horari-quick-chip:hover { border-color: var(--crimson); background: #FBEAED; }
.import-preview { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.import-preview table { border-collapse: collapse; width: 100%; margin-top: 6px; }
.import-preview td { border: 1px solid var(--border); padding: 3px 6px; font-size: 12px; }

/* Icones de rols a la casella de pati */
.horari-pati-icones { font-size: 15px; margin-top: 3px; letter-spacing: 2px; }
/* Bloc d'encàrrecs del pati al modal */
.horari-rols { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.horari-rol-chip {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--text-main); transition: all 0.12s var(--ease); width: 100%;
}
.horari-rol-chip:hover { border-color: var(--crimson); }
.horari-rol-chip.actiu { border-color: var(--crimson); background: #FBEAED; color: var(--garnet-text); }
.horari-rol-emoji { font-size: 18px; }

/* ── Selector de grup de desdoblament (Tallers rotatoris) ── */
.desdob-bar-wrap:empty { display: none; }
.desdob-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; background: #FBEAED; border: 1px solid #F5D0D6;
  border-radius: 12px;
}
.desdob-bar-label { font-size: 13px; font-weight: 600; color: var(--garnet-text); margin-right: 2px; }
.desdob-chip {
  border: 1px solid #E3B5BD; background: #fff; color: var(--garnet-text);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.12s var(--ease);
}
.desdob-chip:hover { border-color: var(--crimson); }
.desdob-chip.actiu { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.desdob-bar-info { background: #F4F1F2; border-color: #E6DDDF; }
.desdob-bar-info .desdob-bar-label { color: var(--garnet-mid); font-weight: 600; }
.perfil-altre-grup { margin-top: 8px; }
.perfil-altre-assig { display: block; font-size: 13px; font-weight: 600; color: var(--garnet-text); margin-bottom: 4px; }

/* ── Dies festius / vacances al planning (dia sencer no lectiu) ── */
.plan-td-festa {
  background: repeating-linear-gradient(45deg, #FAFAFA, #FAFAFA 8px, #F2F2F3 8px, #F2F2F3 16px);
  border: 1px solid #ECECEC;
  vertical-align: middle;
  text-align: center;
}
.plan-festa-tag {
  font-weight: 700; color: var(--garnet-text); font-size: 14px;
  text-align: center; padding: 8px 6px; line-height: 1.3;
}
.plan-festa-tag-sm { font-size: 12px; font-weight: 600; color: var(--garnet-mid); }
/* «Aquí sota hi tenies feina planificada»: es diu perquè el rowspan de la
   festa la tapa i, si no, sembla perduda (segona auditoria, 8/9/2026). */
.plan-festa-sota {
  font-size: 11px; font-weight: 500; color: var(--text-sub); line-height: 1.35;
  text-align: center; padding: 0 8px 8px; max-width: 190px; margin: 0 auto;
}

/* ── Escriure al Google (Calendar + Tasks) ── */
.gwrite-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--text-main); cursor: pointer; line-height: 1.45;
}
.gwrite-row input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--crimson); flex-shrink: 0; cursor: pointer; }
.gwrite-estat {
  display: inline-block; font-weight: 700; font-size: 11px;
  padding: 1px 7px; border-radius: 20px;
  background: var(--surface-alt); color: var(--text-muted);
}
.gwrite-estat.gwrite-ok      { background: #E7F5EC; color: #15803D; }
.gwrite-estat.gwrite-pendent { background: #FFF6E5; color: #B45309; }
.gwrite-estat.gwrite-enviant { background: #EAF0FE; color: #1D4ED8; }

/* ── Editor d'objectius (generador de comentaris) i aspectes d'actitud ── */
.rub-modal { width: min(760px, calc(100vw - 32px)); }
.rub-buit { padding: 26px 4px; color: var(--text-sub); line-height: 1.6; }
.rub-buit p { margin-bottom: 8px; }
.rub-obj {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px; margin-bottom: 12px; background: var(--surface-tint);
}
.rub-obj-cap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rub-obj-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--crimson); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rub-obj-nom { flex: 1; font-weight: 600; }
.rub-obj-del {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 5px; border-radius: 6px; display: flex; flex-shrink: 0;
  transition: color var(--dur-2, .2s), background var(--dur-2, .2s);
}
.rub-obj-del svg { width: 15px; height: 15px; }
.rub-obj-del:hover { color: #B42318; background: #FDECEA; }
.rub-niv { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin-bottom: 6px; align-items: start; }
.rub-niv-nom { font-size: 11px; font-weight: 700; color: var(--text-sub); padding-top: 8px; }
.rub-niv-txt { resize: vertical; min-height: 40px; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 620px) { .rub-niv { grid-template-columns: 1fr; gap: 3px; } .rub-niv-nom { padding-top: 2px; } }

.rub-imp-ajuda { line-height: 1.6; margin-bottom: 12px; }
.rub-imp-cols { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.rub-imp-cols span {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill, 20px);
  background: var(--crimson-050, #FBEAEF); color: var(--garnet-text);
  border: 1px solid var(--crimson-100, #F6D6DF);
}
.rub-imp-previ { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; background: var(--surface-tint); }
.rub-imp-previ-cap { font-size: 13px; margin-bottom: 8px; color: var(--text-main); }
.rub-imp-avis { font-size: 11.5px; color: var(--warn, #B45309); background: var(--warn-bg, #FFF6E5); border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; }
.rub-imp-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--hairline, #EFE7EA); }
.rub-imp-crit { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.rub-imp-mes { font-size: 11.5px; color: var(--text-muted); padding-top: 6px; }

.asp-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.asp-fila input { flex: 1; }

/* ── Avís de com s'han equilibrat els grups ── */
.grups-avis {
  font-size: 12.5px; line-height: 1.5; padding: 9px 12px;
  border-radius: var(--r-sm); margin-bottom: 12px;
  background: var(--surface-alt); color: var(--text-sub);
  border: 1px solid var(--border);
}
.grups-avis-ok   { background: var(--ok-bg, #E7F5EC);   color: var(--ok, #15803D);   border-color: #BFE3CD; }
.grups-avis-warn { background: var(--warn-bg, #FFF6E5); color: var(--warn, #B45309); border-color: #F5DFB0; }

/* ── Llegenda del calendari editable (nom i color de cada categoria) ── */
.cal2-cat-fila {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.cal2-cat-fila:last-child { border-bottom: none; }
.cal2-cat-color {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: none; cursor: pointer; overflow: hidden;
}
.cal2-cat-color::-webkit-color-swatch-wrapper { padding: 2px; }
.cal2-cat-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.cal2-cat-color::-moz-color-swatch { border: none; border-radius: 50%; }
.cal2-cat-nom { flex: 1; height: 34px; font-size: 13.5px; }
.cal2-cat-us {
  min-width: 26px; text-align: center; flex-shrink: 0;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}

/* ── Avís de versió nova ── */
.ver-modal { width: min(520px, calc(100vw - 32px)); }
.ver-titol {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.ver-llista { list-style: none; margin: 0 0 16px; padding: 0; }
.ver-llista li {
  position: relative; padding: 7px 0 7px 22px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-main);
  border-bottom: 1px solid var(--hairline, #EFE7EA);
}
.ver-llista li:last-child { border-bottom: none; }
.ver-llista li::before {
  content: ""; position: absolute; left: 4px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--crimson);
}
.ver-ajuda {
  font-size: 12.5px; line-height: 1.6; color: var(--text-sub);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.ver-ajuda kbd {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px; background: var(--surface);
  border: 1px solid var(--border-strong); color: var(--text-main);
}

/* ── Comentari d'un alumne sobre una activitat (a la taula de notes) ── */
.nota-com-btn {
  position: absolute; top: 5px; left: 5px;
  width: 20px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; opacity: 0.3;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
}
.nota-com-btn svg { width: 11px; height: 11px; }
.notes-table tbody tr:hover .nota-com-btn { opacity: 0.75; }
.nota-com-btn:hover {
  opacity: 1 !important; border-color: var(--crimson);
  color: var(--crimson); background: var(--crimson-050, #FBEAEF);
}
/* Amb comentari: sempre visible i marcat */
.nota-com-btn.te-coment {
  opacity: 1; border-color: var(--garnet-mid);
  background: var(--crimson-050, #FBEAEF); color: var(--garnet-text);
}

/* ── Interruptor "fer servir els meus apunts" al generador de comentaris ── */
.coment-apunts {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-tint); cursor: pointer;
  font-size: 13px; line-height: 1.45; color: var(--text-main);
}
.coment-apunts:hover { border-color: var(--crimson-100, #F6D6DF); }
.coment-apunts input {
  width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--crimson); cursor: pointer;
}
.coment-apunts-info {
  display: block; font-size: 12px; color: var(--text-sub); margin-top: 2px;
}

/* ============================================================
   SELECTOR DE GRUP (app dels especialistes)
   A Observacions i Registres d'aula cal dir de quin grup parlem:
   una especialista entra a molts grups i cada un té els seus alumnes.
   ============================================================ */
.grup-picker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px;
}
.grup-picker .modal-label { margin: 0; white-space: nowrap; }
.grup-picker .modal-input { max-width: 220px; margin: 0; }
.grup-picker-hint { font-size: 12.5px; color: var(--text-sub); }
@media (max-width: 640px) {
  .grup-picker { align-items: stretch; flex-direction: column; gap: 6px; }
  .grup-picker .modal-input { max-width: none; }
}

/* Avís de quin grup és el que hi ha a la pantalla (només a l'app de direcció) */
.dir-avis-grup {
  font-size: 13px; color: var(--text-sub);
  background: var(--surface-tint); border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-sm); padding: 8px 12px; margin: 0 0 12px;
}
.dir-avis-grup.is-buit { color: var(--garnet); font-weight: 600; }

/* ============================================================
   Etiqueta només per a lectors de pantalla (queda fora de la vista, però
   s'ha de poder llegir: display:none la faria desaparèixer també per a ells)
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   DOCENTS — el claustre de primària (només a l'app de direcció)
   Els colors dels tres cicles són els que ells ja fan servir al
   seu document (verd, blau, taronja), però suaus: només marquen
   el bloc, no es mengen el granat de l'app.
   ============================================================ */
.doc-barra {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.doc-cerca { max-width: 280px; margin: 0; }
.doc-filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-filtre {
  padding: 8px 14px; min-height: 38px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-sub);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.doc-filtre:hover { border-color: var(--crimson); color: var(--garnet-deep); }
.doc-filtre.active {
  background: var(--crimson); border-color: var(--crimson); color: #fff;
}
.doc-filtre:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }

.doc-cicle { margin-bottom: 26px; }
.doc-cicle-head {
  display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
  padding: 8px 0 8px 12px; margin-bottom: 12px;
  border-left: 4px solid var(--doc-color, var(--crimson));
}
.doc-cicle-nom { font-size: 16px; font-weight: 700; color: var(--garnet-deep); }
.doc-cicle-meta { font-size: 12.5px; color: var(--text-muted); }
/* Els colors dels cicles, prou foscos per poder-hi escriure a sobre del
   seu propi to clar (tots passen de 5:1 de contrast). */
.doc-cicle-c1   { --doc-color: #2F6B41; --doc-soft: #E8F3EA; }
.doc-cicle-c2   { --doc-color: #35619E; --doc-soft: #E7EEF8; }
.doc-cicle-c3   { --doc-color: #8F5518; --doc-soft: #FBF0E3; }
.doc-cicle-siei { --doc-color: #6B5CA0; --doc-soft: #EFEBF8; }

.doc-subtitol {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 14px 0 8px;
}
.doc-graella {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.doc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.doc-card-top { display: flex; align-items: center; gap: 10px; }
.doc-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  /* Tint suau amb el color del cicle a la lletra: 40 cercles plens de
     color es menjarien el granat de l'app. */
  border-radius: 50%;
  background: var(--doc-soft, var(--surface-alt));
  color: var(--doc-color, var(--garnet));
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.doc-card-txt { min-width: 0; }
.doc-nom  { font-size: 14px; font-weight: 600; color: var(--text-main); overflow-wrap: break-word; }
.doc-rol  { font-size: 12.5px; color: var(--text-sub); }
.doc-rol strong { color: var(--garnet-text, var(--garnet)); }

.doc-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--text-sub); background: var(--surface-tint);
}
.doc-badge-coordina { border-color: #E0B4BE; color: var(--garnet); background: #FBEAED; }
.doc-badge-direccio { border-color: #C8B9E4; color: #4B3A78; background: #F1EDFA; }
.doc-badge-siei     { border-color: #C8B9E4; color: #4B3A78; background: #F1EDFA; }

.doc-veure {
  /* Enganxat a baix perque els botons de tota una fila quedin alineats,
     encara que una targeta tingui un distintiu i l'altra no. */
  align-self: flex-start; margin-top: auto;
  padding: 6px 12px; min-height: 34px;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface-alt); color: var(--garnet-deep);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.doc-veure:hover { border-color: var(--crimson); color: var(--crimson); }
.doc-veure:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }

@media (max-width: 640px) {
  .doc-cerca { max-width: none; flex: 1 1 100%; }
  .doc-graella { grid-template-columns: 1fr; }
  .doc-filtre, .doc-veure { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-filtre, .doc-veure { transition: none; }
}

/* Un avís explicatiu dins d'una pàgina (el manual té els seus `callout`,
   però són d'un altre full d'estils). */
.callout-app {
  background: var(--surface-tint); border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-sm); padding: 12px 14px; margin-top: 18px;
  font-size: 13px; line-height: 1.55; color: var(--text-sub);
}
.callout-app strong { color: var(--garnet-deep); }
/* El d'avís: el mateix, però amb la ratlla de l'esquerra en groc, perquè
   es vegi que no és una explicació sinó una cosa a tenir en compte. */
.callout-app.warn { border-left-color: #C9901A; background: #FDF9F0; }

/* ============================================================
   SEGUIMENT D'ENTREVISTES (direcció)
   ============================================================ */
.segentr-taula th, .segentr-taula td { vertical-align: middle; }
.segentr-obre {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  width: 100%; padding: 4px 0;
  background: none; border: none; font-family: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.segentr-obre:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }
.segentr-grup  { font-size: 13.5px; font-weight: 700; color: var(--garnet-deep); }
.segentr-tutor { font-size: 11.5px; color: var(--text-sub); font-weight: 400; }
.segentr-obre:hover .segentr-grup { color: var(--crimson); }
.segentr-fila.es-obert { background: var(--surface-tint); }
.segentr-pendents {
  display: inline-block; min-width: 22px; padding: 2px 7px;
  border-radius: 999px; background: #FBEAED; border: 1px solid #E0B4BE;
  color: #B3251A; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.segentr-detall > td { background: var(--surface-tint); padding: 4px 10px 14px; }
.segentr-detall-cap {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-sub); margin: 6px 0 8px;
}
.segentr-alumnes { list-style: none; display: grid; gap: 4px; }
.segentr-alumne {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 5px 8px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--border); font-size: 12.5px;
}
.segentr-alumne.es-sense { border-color: #E0B4BE; background: #FDF5F6; }
.segentr-alumne-nom { font-weight: 600; color: var(--text-main); min-width: 140px; }
.segentr-alumne-num {
  min-width: 20px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--garnet);
}
.segentr-alumne-dates { display: flex; gap: 5px; flex-wrap: wrap; align-items: baseline; }
.segentr-data {
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text-sub); font-size: 11.5px;
}
.segentr-cap { color: #B3251A; font-weight: 600; }
.segentr-nodates { color: var(--text-sub); font-size: 11px; font-style: italic; }

/* ------------------------------------------------------------
   ON ÉS CADA MESTRE
   El verd és l'únic color que no és de la casa que s'hi fa servir,
   i és a posta: «permanència» vol dir «hi pots anar», i això ha de
   saltar a la vista entre tota la resta de granat.
   ------------------------------------------------------------ */
.horcla-quan { margin: 0 0 14px; }
.horcla-quan-camps { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.horcla-camp { display: flex; flex-direction: column; gap: 4px; }
.horcla-camp-nom { font-size: 11.5px; font-weight: 600; color: var(--text-sub); }
.horcla-camp .modal-input { min-width: 150px; }
.horcla-ara { align-self: flex-end; }
.horcla-quan-diu { margin: 8px 0 0; font-size: 13px; color: var(--text-sub); }
.horcla-quan-diu strong { color: var(--garnet-deep); }

.horcla-resultats { display: grid; gap: 8px; margin: 14px 0; }
.horcla-fitxa { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.horcla-fitxa.horcla-permanencia { border-color: #BBD9BE; background: #F4FAF4; }
.horcla-fitxa.es-obert { border-color: var(--border-strong); }
.horcla-fitxa-cap {
  display: grid; gap: 2px; width: 100%; padding: 11px 13px;
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit;
}
.horcla-fitxa-cap:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: -3px; }
.horcla-nom { font-size: 14.5px; font-weight: 700; color: var(--garnet-deep); }
.horcla-tut { font-size: 11.5px; color: var(--text-sub); }
.horcla-ara-diu { font-size: 13.5px; color: var(--text-main); margin-top: 3px; }
.horcla-lliure { color: #1F6B2C; }
.horcla-nores { color: var(--text-sub); font-style: italic; }
.horcla-grup {
  padding: 1px 6px; border-radius: 999px; background: var(--garnet-soft);
  color: var(--garnet-text); font-size: 11.5px; font-weight: 600;
}

.horcla-dia { padding: 0 13px 12px; border-top: 1px solid var(--border); }
.horcla-dia-tit { margin: 10px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: .04em; }
.horcla-taula { width: 100%; border-collapse: collapse; font-size: 13px; }
.horcla-taula th {
  text-align: left; font-weight: 600; color: var(--text-sub); white-space: nowrap;
  padding: 4px 10px 4px 0; width: 1%; font-variant-numeric: tabular-nums;
}
.horcla-taula td { padding: 4px 0; }
.horcla-taula tr.es-ara th, .horcla-taula tr.es-ara td { background: var(--garnet-soft); font-weight: 700; }
.horcla-taula tr.es-ara th { border-radius: var(--r-sm) 0 0 var(--r-sm); padding-left: 7px; }
.horcla-taula tr.es-ara td { border-radius: 0 var(--r-sm) var(--r-sm) 0; padding-right: 7px; }

.horcla-perm { margin: 18px 0 14px; }
.horcla-perm-cap { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.horcla-perm-tit { margin: 0; font-size: 16px; font-weight: 700; color: var(--garnet-deep); }
.horcla-perm-sub { font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.horcla-perm-llista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px;
}
.horcla-perm-llista button {
  display: grid; gap: 1px; width: 100%; padding: 8px 11px; cursor: pointer; font: inherit; text-align: left;
  border: 1px solid #BBD9BE; border-radius: var(--r-sm); background: #F4FAF4;
}
.horcla-perm-llista button:hover { border-color: #8FBF96; }
.horcla-perm-llista button:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }
.horcla-perm-nom { font-weight: 600; color: var(--text-main); font-size: 13.5px; }
.horcla-perm-rol { font-size: 11.5px; color: var(--text-sub); }

.horcla-previ { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 210px; overflow: auto; }
.horcla-previ-un {
  padding: 2px 8px; border-radius: 999px; background: var(--surface-alt);
  border: 1px solid var(--border); font-size: 11.5px; color: var(--text-main);
}
.horcla-previ-un em { color: var(--text-sub); font-style: normal; }

/* Al registre de docents, sota el nom hi va el grup (o què fa), com a la
   llista d'alumnes hi va l'avatar: ajuda a trobar la fila amb 40 mestres. */
.regdoc-nom { display: block; font-weight: 600; }
.regdoc-sub { display: block; font-size: 11.5px; color: var(--text-sub); font-weight: 400; }
.reg-table td.reg-td-name .regdoc-nom,
.reg-table td.reg-td-name .regdoc-sub { white-space: nowrap; }
.reg-table td.reg-td-name:has(.regdoc-nom) { display: table-cell; }

/* --- La portada de Docents: els botons de les eines --- */
.doc-eines {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.doc-eina {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; padding: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-md);
  font-family: inherit; cursor: pointer; touch-action: manipulation;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.doc-eina:hover {
  border-color: var(--crimson);
  box-shadow: 0 2px 10px rgba(74, 21, 32, 0.08);
  transform: translateY(-1px);
}
.doc-eina:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }
.doc-eina-icona { width: 24px; height: 24px; color: var(--crimson); }
.doc-eina-titol { font-size: 15px; font-weight: 700; color: var(--garnet-deep); }
.doc-eina-desc  { font-size: 12.5px; color: var(--text-sub); line-height: 1.45; }
.doc-tornar { margin-bottom: 10px; }

/* ============================================================
   COORDINACIÓ — els esmorzars de la reunió
   ============================================================ */
/* minmax(0, 1fr) i no 1fr: una columna 1fr no es pot fer mes estreta que
   el seu contingut, i la taula del panell estirava tota la pagina. */
.esm-graella {
  display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.esm-card { min-width: 0; }
/* Si la taula no hi cap, que llisqui ella i no la pagina sencera. */
.esm-taula-caixa { overflow-x: auto; }
.esm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px;
}
.esm-taula { min-width: 340px; }
.esm-card-titol {
  font-size: 14px; font-weight: 700; color: var(--garnet-deep);
  margin-bottom: 14px;
}
/* --- El torn de la propera reunió --- */
.esm-card-torn { border-left: 3px solid var(--crimson); margin-bottom: 14px; }
.esm-torn-buit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.esm-torn-buit p { font-size: 13.5px; color: var(--text-sub); }
.esm-torn-proposta, .esm-torn-fet {
  display: flex; gap: 18px; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
}
.esm-torn-etiqueta {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-sub); margin-bottom: 2px;
}
.esm-torn-nom { font-size: 24px; font-weight: 700; color: var(--garnet-deep); line-height: 1.2; }
.esm-torn-data { font-size: 13.5px; color: var(--text-sub); margin-top: 2px; }
.esm-torn-perque { font-size: 12.5px; color: var(--text-sub); margin-top: 4px; }
.esm-torn-quan { min-width: 210px; }
.esm-torn-quan .modal-label { display: block; margin-bottom: 6px; }
.esm-torn-quan .modal-input { margin: 0; }
.esm-torn-avis { display: block; font-size: 12.5px; color: var(--text-sub); margin-top: 8px; }
.esm-torn-avis.is-fet   { color: var(--garnet); font-weight: 600; }
.esm-torn-avis.is-falta { color: #B3251A; font-weight: 600; }
.esm-torn-botons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.esm-torn-btn {
  padding: 9px 14px; min-height: 40px;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface-alt); color: var(--garnet-deep);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.esm-torn-btn:hover { border-color: var(--crimson); color: var(--crimson); }
.esm-torn-btn:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }

/* --- El palmarès --- */
.esm-palmares-nota { font-size: 12.5px; color: var(--text-sub); margin: -8px 0 14px; }
.esm-premis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.esm-premi {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-tint); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 14px;
}
.esm-premi-icona { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.esm-premi-titol {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-sub);
}
.esm-premi-qui { font-size: 16px; font-weight: 700; color: var(--garnet-deep); }
.esm-premi-detall { font-size: 12.5px; color: var(--text-sub); }

.esm-camp { margin-bottom: 14px; }
.esm-camp .modal-label { display: block; margin-bottom: 6px; }
.esm-camp .modal-input { margin: 0; }
.esm-nota-ajuda { font-weight: 400; color: var(--text-sub); }

.esm-siono { display: flex; gap: 8px; flex-wrap: wrap; }
.esm-si, .esm-no {
  flex: 1 1 130px; padding: 10px 12px; min-height: 44px;
  border-radius: var(--r-sm); border: 2px solid var(--border);
  background: var(--surface-alt); color: var(--text-main);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.esm-si:hover, .esm-no:hover { border-color: var(--crimson); }
.esm-si.active { background: #1F6B43; border-color: #1F6B43; color: #fff; }
.esm-no.active { background: #B3251A; border-color: #B3251A; color: #fff; }
.esm-si:focus-visible, .esm-no:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }

.esm-notes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.esm-nota {
  min-height: 40px; padding: 8px 0;
  border-radius: var(--r-sm); border: 2px solid var(--border);
  background: var(--surface-alt); color: var(--text-main);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.esm-nota:hover { border-color: var(--crimson); }
.esm-nota.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.esm-nota:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }

.esm-accions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esm-estat { font-size: 12.5px; color: var(--text-sub); }
.esm-estat.is-ok    { color: var(--garnet); font-weight: 600; }
.esm-estat.is-error { color: var(--crimson); font-weight: 600; }

.esm-buit {
  padding: 24px 0; font-size: 13.5px; color: var(--text-sub); line-height: 1.6;
}

/* Les xifres de dalt del panell */
.esm-xifres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.esm-xifra {
  background: var(--surface-tint); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.esm-xifra-num {
  font-size: 22px; font-weight: 700; color: var(--garnet-deep);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.esm-xifra-txt { font-size: 11.5px; color: var(--text-sub); line-height: 1.35; }
.esm-xifra-avis .esm-xifra-num { color: #B3251A; }

/* La taula ÉS el gràfic: la barra viu dins de la cel·la de la mitjana. Així
   qui la mira de lluny veu qui guanya i qui la llegeix amb un lector de
   pantalla té els números igual. Una sola mesura, un sol color: el color no
   hi vol dir res, la llargada sí. */
.esm-taula { width: 100%; border-collapse: collapse; }
.esm-taula-cap {
  caption-side: top; text-align: left;
  font-size: 11.5px; color: var(--text-sub); padding-bottom: 8px;
}
.esm-taula th, .esm-taula td {
  padding: 8px 6px; border-bottom: 1px solid var(--border);
  font-size: 13px; text-align: left; vertical-align: middle;
}
.esm-taula thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-sub);
  border-bottom: 1px solid var(--border-strong);
}
.esm-taula thead th:nth-child(3), .esm-taula thead th:nth-child(4),
.esm-t-num, .esm-t-gomets { text-align: center; }
.esm-t-nom { font-weight: 600; color: var(--text-main); white-space: nowrap; }
.esm-t-num { font-variant-numeric: tabular-nums; color: var(--text-sub); }
.esm-t-mitjana { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.esm-barra {
  flex: 1; height: 10px; min-width: 60px;
  background: #EFE7EA; border-radius: 5px; overflow: hidden;
}
.esm-barra-fill {
  display: block; height: 100%;
  background: var(--garnet); border-radius: 5px;
}
.esm-barra-val {
  font-size: 13px; font-weight: 700; color: var(--text-main);
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: right;
}

/* Els gomets: sempre amb el número al costat, mai només el color */
.esm-gomets { display: inline-flex; align-items: center; gap: 3px; }
.esm-gomet {
  width: 10px; height: 10px; border-radius: 50%;
  background: #D33A2C; display: inline-block;
}
.esm-gomets-num {
  font-size: 12px; font-weight: 700; color: #B3251A;
  font-variant-numeric: tabular-nums; margin-left: 3px;
}
.esm-cap { font-size: 12px; color: var(--text-sub); }

/* L'historial */
.esm-subtitol {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-sub);
  margin: 20px 0 8px;
}
.esm-hist { list-style: none; }
.esm-hist-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.esm-hist-data { font-size: 12px; color: var(--text-sub); min-width: 54px; }
.esm-hist-qui  { font-weight: 600; color: var(--text-main); }
.esm-hist-que  { color: var(--text-sub); flex: 1; min-width: 0; overflow-wrap: break-word; }
.esm-hist-nota { font-weight: 700; font-variant-numeric: tabular-nums; }
.esm-hist-item.es-oblit .esm-hist-que { color: #B3251A; font-weight: 600; }
.esm-hist-treu {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-sub);
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  touch-action: manipulation;
}
.esm-hist-treu:hover { border-color: var(--crimson); color: var(--crimson); }
.esm-hist-treu:focus-visible { outline: 3px solid var(--garnet-deep); outline-offset: 2px; }

/* ============================================================
   LA PENYORA — el popup dels 3 gomets. Estrident a posta.
   ============================================================ */
.esm-penyora .esm-penyora-box {
  background: #B3251A; color: #fff;
  border: 6px solid #FFD23F; border-radius: var(--r-lg);
  padding: 34px 30px; margin: auto;
  max-width: 460px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.esm-penyora-emoji { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.esm-penyora-titol {
  font-size: 38px; font-weight: 800; letter-spacing: 0.06em;
  color: #FFD23F; margin-bottom: 12px;
}
.esm-penyora-text { font-size: 16px; line-height: 1.5; margin-bottom: 10px; }
.esm-penyora-text strong { color: #FFD23F; }
.esm-penyora-sentencia { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }
.esm-penyora-sentencia strong { color: #FFD23F; text-transform: uppercase; }
.esm-penyora-btn {
  padding: 12px 26px; min-height: 46px;
  border-radius: var(--r-sm); border: none;
  background: #FFD23F; color: #4A1520;
  font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
}
.esm-penyora-btn:hover { background: #FFDF73; }
.esm-penyora-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.esm-penyora.open .esm-penyora-box { animation: esmSacseja 0.6s ease-in-out; }
@keyframes esmSacseja {
  0%, 100% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-9px) scale(1.03); }
  30% { transform: translateX(9px) scale(1.03); }
  45% { transform: translateX(-6px) scale(1.02); }
  60% { transform: translateX(6px) scale(1.02); }
  80% { transform: translateX(-3px) scale(1); }
}

@media (max-width: 900px) {
  .esm-graella { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .esm-notes { grid-template-columns: repeat(5, 1fr); }
  .esm-nota { min-height: 44px; }
  .esm-taula th, .esm-taula td { padding: 8px 3px; font-size: 12.5px; }
  .esm-t-mitjana { min-width: 110px; }
  .esm-penyora-titol { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-eina, .esm-si, .esm-no, .esm-nota, .esm-torn-btn { transition: none; }
  .doc-eina:hover { transform: none; }
  .esm-penyora.open .esm-penyora-box { animation: none; }
}

/* ============================================================
   DIRECCIÓ — selector del grup de treball (pàgina Alumnes)
   Direcció no té tutoria: tria el grup aquí i el grup el segueix
   per tota l'app. Es fa amb botons i no amb un desplegable perquè
   hi entren i en surten molt sovint, i així sempre veuen on són.
   ============================================================ */
.dir-grup-picker {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px;
}
.dir-grup-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.dir-grup-titol {
  font-size: 14px; font-weight: 700; color: var(--garnet-deep);
  letter-spacing: -0.01em;
}
.dir-grup-estat { font-size: 12.5px; color: var(--text-sub); }
.dir-grup-estat.is-ok    { color: var(--garnet); font-weight: 600; }
.dir-grup-estat.is-avis  { color: var(--text-sub); }
.dir-grup-estat.is-error { color: var(--crimson); font-weight: 600; }

.dir-grup-cursos { display: flex; gap: 6px; flex-wrap: wrap; }
.dir-grup-linies {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.dir-grup-lin-label {
  font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 4px;
}
.dir-grup-btn, .dir-linia-btn {
  border-radius: 8px; border: 2px solid var(--border);
  background: var(--surface-alt); color: var(--text-main);
  font-weight: 700; font-family: inherit; cursor: pointer;
  touch-action: manipulation;   /* fora el retard de 300ms del doble toc */
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dir-grup-btn  { padding: 9px 16px; font-size: 15px; min-height: 40px; }
.dir-linia-btn { padding: 8px 14px; font-size: 13.5px; min-height: 38px; }
.dir-grup-btn:hover, .dir-linia-btn:hover { border-color: var(--crimson); }
.dir-grup-btn.active, .dir-linia-btn.active {
  background: var(--crimson); border-color: var(--crimson); color: #fff;
}
.dir-grup-btn:focus-visible, .dir-linia-btn:focus-visible {
  outline: 3px solid var(--garnet-deep); outline-offset: 2px;
}
@media (max-width: 640px) {
  /* Al mòbil, tres per fila i 44px d'alçada: es toca amb el dit sense apuntar. */
  .dir-grup-cursos { display: grid; grid-template-columns: repeat(3, 1fr); }
  .dir-grup-linies { display: grid; grid-template-columns: repeat(3, 1fr); }
  .dir-grup-btn, .dir-linia-btn { padding: 10px 8px; min-height: 44px; }
  .dir-grup-lin-label { grid-column: 1 / -1; margin: 0 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .dir-grup-btn, .dir-linia-btn { transition: none; }
}

/* --- Afegir una observació des de la fitxa de consulta --- */
.gvf-obsform { display: grid; gap: 10px; }
.gvf-obsform-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gvf-obsform-row .modal-input { flex: 1 1 160px; min-width: 0; }
.gvf-obsform textarea.modal-input { min-height: 92px; resize: vertical; }

/* ============================================================
   CONVOCAR REUNIONS
   ============================================================ */
.reu-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 14px;
}
.reu-card.reu-acabat { opacity: .62; }
.reu-card-head { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; }
.reu-card-titol { font-size: 16px; color: var(--garnet-deep); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reu-card-meta { font-size: 12.5px; color: var(--text-muted); }
.reu-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--border); color: var(--text-muted); padding: 2px 7px; border-radius: 5px;
}
.reu-badge-tancat { background: #FEF3C7; color: #92400E; }
.reu-desc { font-size: 13.5px; color: var(--text-muted); margin: 8px 0 0; white-space: pre-wrap; }

.reu-xifres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.reu-xifra {
  font-size: 12.5px; color: var(--garnet-text); background: var(--garnet-soft);
  padding: 4px 10px; border-radius: 20px;
}
.reu-xifra b { font-weight: 800; }
.reu-xifra-avis { background: #FEF3C7; color: #92400E; }

.reu-enllac { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.reu-enllac input { flex: 1; font-size: 12.5px; font-family: 'SF Mono', Consolas, monospace; }

.reu-reserves { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.reu-reserves-tit {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 8px;
}
.reu-reserva {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg-alt, #FAF7F8); margin-bottom: 6px;
}
.reu-reserva-avis { background: #FEF3C7; }
/* Les entrevistes que ja s'han fet: hi són, però apagades, perquè no es
   confonguin amb les que encara han de venir (segona auditoria, 8/9/2026). */
.reu-reserva-passada { opacity: 0.62; }
.reu-reserva-quan { font-size: 13px; min-width: 118px; color: var(--garnet-text); }
.reu-reserva-qui { flex: 1; min-width: 160px; font-size: 13.5px; display: flex; flex-direction: column; }
.reu-reserva-mail { font-size: 12px; color: var(--text-muted); }
.reu-reserva-err { font-size: 12px; color: #92400E; font-weight: 700; }
.reu-reserva-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.reu-card-acc { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.reu-del { color: var(--crimson); }

.reu-dos { display: flex; gap: 12px; }
.reu-dos > * { flex: 1; }
.reu-afegir { display: flex; gap: 8px; align-items: center; }
.reu-afegir input { flex: 1; min-width: 0; }
.reu-fins { color: var(--text-muted); font-size: 13px; }
.reu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reu-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--garnet-soft); color: var(--garnet-text);
  padding: 4px 6px 4px 11px; border-radius: 20px;
}
.reu-chip button {
  border: 0; background: transparent; color: var(--garnet-text); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.reu-chip button:hover { background: var(--garnet-soft2); }
.reu-opc { font-weight: 400; color: var(--text-muted); }
.reu-resum {
  background: var(--garnet-soft); border-left: 4px solid var(--crimson);
  padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 6px 0 14px; font-size: 13.5px; color: var(--garnet-deep);
}

@media (max-width: 700px) {
  .reu-dos { flex-direction: column; gap: 0; }
  .reu-afegir { flex-wrap: wrap; }
  .reu-enllac { flex-direction: column; align-items: stretch; }
}

/* --- Reunions: hores per dia de la setmana --- */
.reu-dies { display: flex; flex-direction: column; gap: 6px; }
.reu-dia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card);
}
.reu-dia-actiu { border-color: var(--garnet-soft2); background: var(--garnet-soft); }
.reu-dia-nom {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px;
  min-width: 118px; cursor: pointer; margin: 0;
}
.reu-dia-hores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.reu-dia-buit { font-size: 12.5px; color: var(--text-muted); }
.reu-tram { display: inline-flex; align-items: center; gap: 4px; }
.reu-tram input[type=time] {
  font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; min-height: 34px;
}
.reu-tram-x, .reu-mini {
  border: 1px solid var(--border); background: #fff; color: var(--garnet-text);
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px;
  padding: 4px 8px; min-height: 30px;
}
.reu-tram-x { padding: 2px 7px; font-size: 15px; line-height: 1; }
.reu-tram-x:hover, .reu-mini:hover { background: var(--garnet-soft2); }

/* --- Reunions: repassar les hores --- */
.reu-prev-dia { margin-bottom: 10px; }
.reu-prev-data {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--garnet-text); margin-bottom: 5px;
}
.reu-prev-hores { display: flex; flex-wrap: wrap; gap: 6px; }
.reu-prev-h {
  font: inherit; font-size: 13px; font-weight: 700; min-height: 36px;
  background: #fff; color: var(--garnet-text);
  border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 11px; cursor: pointer;
}
.reu-prev-h:hover { border-color: var(--crimson); background: var(--garnet-soft); }
.reu-prev-treta {
  text-decoration: line-through; color: var(--text-muted);
  background: var(--bg-alt, #FAF7F8); border-style: dashed; font-weight: 400;
}
.reu-prev-xoc {
  text-decoration: line-through; background: #FEF3C7; border-color: #D97706;
  color: #92400E; cursor: not-allowed; font-weight: 400;
}
.reu-prev-x { margin-left: 5px; opacity: .55; font-weight: 400; }
.reu-prev-treure:hover .reu-prev-x { opacity: 1; color: var(--crimson); }

@media (max-width: 700px) {
  .reu-dia { flex-direction: column; align-items: flex-start; }
  .reu-dia-nom { min-width: 0; }
}

/* --- Reunions: afegir hores i missatge --- */
.reu-chip-n { font-style: normal; font-size: 11px; opacity: .7; margin-left: 4px; }
.callout-mini {
  background: var(--garnet-soft); border-left: 4px solid var(--crimson);
  padding: 10px 13px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px; color: var(--garnet-deep); margin-top: 12px;
}
.callout-mini em { color: var(--text-muted); }

/* ============================================================
   NOTES COMPARTIDES AMB EL TUTOR
   ============================================================ */
.notes-compartir {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  padding: 10px 13px; background: var(--garnet-soft); border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; max-width: 620px;
}
.notes-compartir input { margin-top: 2px; flex-shrink: 0; width: 17px; height: 17px; }
.notes-compartir strong { display: block; color: var(--garnet-deep); }
.notes-compartir-info { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.notesalt { margin-top: 18px; }
.notesalt-tit {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 7px;
}
.notesalt-taula { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.notesalt-taula th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 700; padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.notesalt-taula td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.notesalt-taula tr:last-child td { border-bottom: none; }
.notesalt-nota { font-weight: 700; text-align: center; }
.notesalt-nota.nota-ae { color: #15803D; }
.notesalt-nota.nota-an { color: #0369A1; }
.notesalt-nota.nota-as { color: #A16207; }
.notesalt-nota.nota-na { color: var(--crimson); }
.notesalt-buit { text-align: center; color: var(--text-muted); }
.notesalt-nc { opacity: .75; }
.notesalt-nc-txt { text-align: center; font-style: italic; color: var(--text-muted); font-size: 12.5px; }
.notesalt-quan { display: block; font-size: 11px; color: var(--text-muted); }
.notesalt-peu { font-size: 12px; color: var(--text-muted); margin-top: 7px; }

@media (max-width: 700px) {
  .notesalt-taula { font-size: 12.5px; }
  .notesalt-taula th:last-child, .notesalt-taula td:last-child { display: none; }
}

/* ============================================================
   ENTREVISTES AMB LES FAMÍLIES
   ============================================================ */
.entr-llista { list-style: none; margin: 0 0 12px; padding: 0; }
.entr-item {
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.entr-item:last-child { border-bottom: none; }
.entr-item-cap { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.entr-data { font-weight: 600; font-size: 13.5px; color: var(--text-main); }
.entr-accions { display: flex; gap: 4px; flex-shrink: 0; }
.entr-mini {
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-muted);
  padding: 2px 8px; border-radius: var(--r-sm);
}
.entr-mini:hover { border-color: var(--crimson); color: var(--crimson); }
.entr-mini-x { font-size: 14px; line-height: 1; padding: 2px 7px; }
.entr-nota {
  margin-top: 4px; font-size: 13px; color: var(--text-muted);
  line-height: 1.5; white-space: pre-wrap;
}
.entr-afegir { margin-top: 2px; }
.entr-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }


@media (max-width: 700px) {
  .entr-dos { grid-template-columns: 1fr; }
}

/* ============================================================
   INCIDÈNCIES COMUNICADES A LA FAMÍLIA (eina opcional)
   ------------------------------------------------------------
   Veure `js/incidencies.js`. El botó de la targeta reaprofita
   `.alumne-card-btn` sencer —marc, mida i àrea del dit al mòbil—
   i només hi afegeix que el cercle vermell no es despinti en
   passar-hi el ratolí: el color el porta el SVG, no el `color`.
   ============================================================ */
/* El botó d'entrevistes de la targeta. El calendari té més línies que les
   altres icones, i a 14 px queda espès: se li donen 15. La resta —marc,
   mida, àrea del dit— ja ve de `.alumne-card-btn`. */
.entr-card-btn svg { width: 15px; height: 15px; }
@media (hover: none) { .entr-card-btn svg { width: 18px; height: 18px; } }

.inc-card-btn:hover { border-color: #C0392B; }
.inc-card-btn svg   { width: 16px; height: 16px; }
@media (hover: none) { .inc-card-btn svg { width: 19px; height: 19px; } }

/* El compte, a la fitxa i enlloc més */
.inc-compte {
  margin: 0 0 10px; font-size: 13px; color: var(--text-muted);
}
.inc-compte strong { color: #C0392B; font-size: 15px; }

.inc-llista { list-style: none; margin: 0 0 12px; padding: 0; }
.inc-item { padding: 9px 0; border-bottom: 1px solid var(--border); }
.inc-item:last-child { border-bottom: none; }
.inc-item-cap { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.inc-data { font-weight: 600; font-size: 13.5px; color: var(--text-main); }
.inc-text {
  margin-top: 4px; font-size: 13px; color: var(--text-muted);
  line-height: 1.5; white-space: pre-wrap;
}
.inc-mini {
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-muted);
  padding: 2px 8px; border-radius: var(--r-sm);
}
.inc-mini:hover { border-color: var(--crimson); color: var(--crimson); }
.inc-mini-x { font-size: 14px; line-height: 1; padding: 2px 7px; flex-shrink: 0; }
.inc-afegir { margin-top: 2px; }

/* A qui anirà: les adreces, i l'avís de quan no n'hi ha cap */
.inc-desti { display: flex; flex-wrap: wrap; gap: 6px; }
.inc-chip {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px;
  font-size: 12.5px; color: var(--text-main);
}
.inc-desti-buit {
  display: block; background: #FDF0EE; border: 1px solid #F0C8C2;
  border-radius: var(--r-sm); padding: 9px 11px;
  font-size: 12.5px; color: #8A2E22; line-height: 1.5;
}

/* La previsualització: el correu sencer, tal com el rebrà la família */
.inc-previa {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 8px;
  max-height: 260px; overflow-y: auto;
}
.inc-previa-assumpte {
  font-size: 13px; font-weight: 600; color: var(--text-main);
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.inc-previa-assumpte span {
  font-weight: 500; font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 6px;
}
.inc-previa-cos {
  font-size: 12.5px; color: var(--text-main);
  line-height: 1.65; white-space: pre-wrap;
}

/* L'editor de la part fixa */
.inc-plantilla {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 13px; margin-bottom: 14px; background: var(--surface-tint);
}
.inc-comodins {
  list-style: none; margin: 7px 0 0; padding: 0;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.9;
}
.inc-comodins code {
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; color: var(--crimson);
  font-size: 11px; margin-right: 4px;
}
.inc-plantilla-accions { display: flex; gap: 8px; justify-content: flex-end; }
.inc-avis { margin-top: 4px; }

/* ============================================================
   REUNIONS — LES HORES EN CALENDARI
   ------------------------------------------------------------
   Mateixa graella i mateixos colors que el calendari de l'app.
   Abans era una llista plana de centenars de botons: es veia
   tot alhora i no s'hi entenia res. Ara el mes diu d'un cop
   d'ull quins dies tenen gent, i les hores d'un dia surten
   només en clicar-hi.
   ============================================================ */
.reucal { margin-top: 4px; }
.reucal-mes + .reucal-mes { margin-top: 18px; }
.reucal-mes-nom {
  font-size: 13px; font-weight: 700; color: var(--text-sub);
  text-transform: capitalize; margin-bottom: 8px;
}
.reucal-caps {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 4px;
}
.reucal-caps span {
  text-align: center; font-size: 10.5px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.06em; padding: 4px 0;
}
.reucal-graella {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}

.reucal-cel {
  min-height: 62px; display: flex; flex-direction: column; gap: 4px;
  align-items: stretch; text-align: left;
  padding: 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; color: inherit;
}
.reucal-buit { border-color: transparent; background: transparent; }
.reucal-sense { color: var(--text-muted); background: transparent; }
.reucal-dia { font-size: 12px; font-weight: 600; color: var(--text-sub); }
.reucal-sense .reucal-dia { color: var(--text-muted); font-weight: 400; }
.reucal-avui { border-color: var(--crimson); }
.reucal-avui .reucal-dia { color: var(--crimson); }

/* Els dies que tenen hores són botons de debò */
button.reucal-cel {
  cursor: pointer;
  transition: border-color 150ms ease-out, background 150ms ease-out,
              transform 150ms ease-out;
}
button.reucal-cel:hover { border-color: var(--crimson-soft); background: #fdf2f5; }
button.reucal-cel:active { transform: scale(0.97); }
button.reucal-cel:focus-visible {
  outline: 2px solid var(--crimson); outline-offset: 2px;
}
.reucal-obert {
  border-color: var(--crimson); background: #fdf2f5;
  box-shadow: inset 0 0 0 1px var(--crimson);
}

.reucal-comptes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.reucal-n {
  min-width: 20px; padding: 1px 5px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.reucal-n-lliure { background: #e6f4ea; color: #1e6b39; }
.reucal-n-ple    { background: #f5d0d6; color: var(--garnet); }

.reucal-llegenda {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0; font-size: 11.5px; color: var(--text-muted);
}
.reucal-ajuda { margin-left: auto; }

/* El dia obert */
.reucal-detall {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--crimson-soft); border-radius: var(--r-sm);
  background: #fdf2f5;
  animation: reucal-entra 180ms ease-out;
}
@keyframes reucal-entra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reucal-detall-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
  font-size: 13px; color: var(--text-main);
}
.reucal-tanca {
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-muted);
  min-width: 44px; min-height: 44px; border-radius: var(--r-sm);
  transition: color 150ms ease-out, background 150ms ease-out;
}
.reucal-tanca:hover { color: var(--garnet); background: #f5d0d6; }
.reucal-tanca:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

.reucal-mostra {
  width: 14px; height: 14px; border-radius: 999px; display: inline-block;
}
.reucal-hores { display: flex; flex-wrap: wrap; gap: 6px; }
.reucal-h {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.reucal-h-lliure {
  background: #fff; border-color: var(--crimson-soft); color: var(--garnet);
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out,
              transform 150ms ease-out;
}
.reucal-h-lliure:hover { background: #f5d0d6; border-color: var(--crimson); }
.reucal-h-lliure:active { transform: scale(0.97); }
.reucal-h-lliure:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.reucal-x { font-size: 15px; opacity: 0.55; }
.reucal-h-lliure:hover .reucal-x { opacity: 1; }
.reucal-h-ple {
  background: #f1e3e6; color: var(--text-sub); cursor: default;
}
.reucal-h-ple em { font-style: normal; font-weight: 400; font-size: 12px; opacity: 0.8; }

@media (max-width: 640px) {
  .reucal-cel { min-height: 52px; padding: 4px; }
  .reucal-dia { font-size: 11px; }
  .reucal-n { min-width: 18px; font-size: 10px; padding: 1px 4px; }
  .reucal-ajuda { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .reucal-detall { animation: none; }
  button.reucal-cel, .reucal-h-lliure, .reucal-tanca { transition: none; }
  button.reucal-cel:active, .reucal-h-lliure:active { transform: none; }
}

/* Hores que l'app no ha sabut situar en cap dia. Han de sortir SEMPRE:
   abans desapareixien i quedava una graella buida amb "16 lliures" a dalt. */
.reucal-soltes {
  margin: 0 0 14px; padding: 12px;
  border: 1px solid var(--crimson-soft); border-left: 3px solid var(--crimson);
  border-radius: var(--r-sm); background: #fdf2f5;
  font-size: 12.5px; line-height: 1.5; color: var(--text-main);
}
.reucal-soltes .reucal-hores { margin-top: 8px; }

/* Avís de servidor endarrerit. Ha de ser impossible de no veure: mentre
   hi sigui, l'app ensenya coses que no són. */
.avis-backend {
  position: sticky; top: 0; z-index: 900;
  padding: 12px 18px; font-size: 13px; line-height: 1.55;
  background: #FEF3C7; color: #7C4A03;
  border-bottom: 2px solid #D97706;
}
.avis-backend strong { color: #92400E; }
.avis-backend-com { display: block; margin-top: 6px; font-size: 12.5px; opacity: 0.95; }
@media (max-width: 640px) { .avis-backend { padding: 10px 14px; font-size: 12.5px; } }

/* Si el que faig aquí va al Google Calendar o no. Ha d'estar a la vista:
   abans només es podia saber entrant a Configuració. */
.cal2-gwrite {
  margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.cal2-gwrite:empty { display: none; }
.cal2-gwrite-ok   { background: #e6f4ea; color: #1e6b39; }
.cal2-gwrite-off  { background: #FEF3C7; color: #7C4A03; }
.cal2-gwrite-pend { background: #FEF3C7; color: #7C4A03; }
.cal2-gwrite-btn {
  font: inherit; font-weight: 700; cursor: pointer;
  background: #fff; border: 1px solid currentColor; color: inherit;
  border-radius: 999px; padding: 5px 12px; min-height: 32px;
  transition: background 150ms ease-out, transform 150ms ease-out;
}
.cal2-gwrite-btn:hover { background: rgba(255,255,255,0.6); }
.cal2-gwrite-btn:active { transform: scale(0.97); }
.cal2-gwrite-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cal2-gwrite-btn { transition: none; } .cal2-gwrite-btn:active { transform: none; } }

/* Els dubtes del document de fitxes: "de qui és, aquesta dada?".
   Cada fila ha de deixar clar QUÈ diu el document i ON surt, perquè la
   mestra pugui decidir sense obrir el document. */
.dubte-fila {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.dubte-fila:first-of-type { border-top: none; }
.dubte-qui { font-size: 13px; color: var(--text-main); }
.dubte-on { font-size: 12px; color: var(--text-muted); margin: 2px 0 6px; }
.dubte-tria { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dubte-tria select {
  flex: 1 1 200px; min-height: 36px; padding: 6px 8px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-main); font-size: 13px;
}
.dubte-tria select:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

/* La franja de "la versió nova encara està arribant". No interromp: és
   una franja, no un modal. Un avís que torna cada dos segons no és un
   avís, és una app trencada. */
.ver-franja {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #FEF3C7; color: #92400E;
  font-size: 13px; line-height: 1.4; border-bottom: 1px solid #FDE68A;
}

/* Els camps que només es miren. Han de semblar text, no una casella on
   escriure: si semblen editables, la mestra hi escriu i després veu com se
   li desfà quan arriba el document de l'escola. */
.form-input-nomes-mirar {
  background: var(--surface-alt); border-color: transparent;
  color: var(--text-main); cursor: default; resize: none;
}
.form-input-nomes-mirar:focus { outline: none; box-shadow: none; border-color: transparent; }
.pi-am-check input:disabled + span { opacity: 0.85; }

/* Treure un alumne: l'última cosa del calaix, i separada de la resta. */
.personal-esborrar {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
}

/* ============================================================
   QUE ES VEGI QUE L'APP TREBALLA  (js/espera.js)
   ------------------------------------------------------------
   Dues coses i ben diferents: una ratlla a dalt per al que passa sol
   (no bloqueja), i un vel per a les esperes que la mestra mira (bloqueja,
   perquè no pugui clicar cinc vegades el mateix botó).
   ============================================================ */
.carrega-barra {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 900; pointer-events: none;
  opacity: 0; transition: opacity 0.15s ease-out;
}
.carrega-barra.activa { opacity: 1; }
.carrega-barra-fil {
  display: block; height: 100%; width: 34%;
  background: linear-gradient(90deg, transparent, var(--crimson), transparent);
  /* Sense percentatge real: no sabem quant trigarà el servidor de Google i
     una barra que menteix és pitjor que una que només diu "hi sóc". */
  animation: carregaFil 1.1s ease-in-out infinite;
}
@keyframes carregaFil {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}

.carrega-vel {
  position: fixed; inset: 0; z-index: 890;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,16,20,0.28);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease-out, visibility 0.18s;
}
.carrega-vel.activa { opacity: 1; visibility: visible; }

.carrega-vel-caixa {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  padding: 14px 20px;
  border-radius: var(--r-md);
  box-shadow: 0 8px 30px rgba(26,16,20,0.18);
  font-size: 14px; font-weight: 600; color: var(--text-main);
  max-width: min(420px, calc(100vw - 40px));
  /* Entra des d'una mida gairebé igual: res al món no apareix del no-res. */
  transform: scale(0.97);
  transition: transform 0.18s cubic-bezier(0.23,1,0.32,1);
}
.carrega-vel.activa .carrega-vel-caixa { transform: scale(1); }

.carrega-rodona {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2.5px solid var(--crimson-soft);
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: carregaGira 0.65s linear infinite;
}
@keyframes carregaGira { to { transform: rotate(360deg); } }

/* Mentre hi ha el vel, el ratolí ja diu que s'està esperant. */
body.app-ocupada { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .carrega-barra-fil { animation: none; width: 100%; opacity: 0.7; }
  .carrega-rodona    { animation-duration: 1.6s; }
  .carrega-vel, .carrega-vel-caixa { transition: none; }
  .carrega-vel-caixa { transform: none; }
}

/* Nota de «això només es mira». Ha de dir-se una vegada i callar: si cridés
   com un avís, cada cop que s'obre la fitxa d'un alumne semblaria que passa
   res greu. Va en gris i petita, com les altres pistes de l'app. */
.nota-mirar {
  margin: 0 0 20px;
  padding-left: 11px;
  border-left: 2px solid var(--border-strong);
  font-size: 12px; line-height: 1.55;
  color: var(--text-muted);
}
.nota-mirar strong { font-weight: 600; color: var(--text-sub); }

/* ============================================================
   L'HORARI QUE VE DEL PDF DE L'ESCOLA
   ------------------------------------------------------------
   Es veu SENCER abans d'omplir res: si la mestra ha triat la pàgina d'una
   altra, aquí és on se n'ha d'adonar. Per això la previsualització té la
   mateixa forma que la graella de l'Horari i no és una llista de caselles.
   ============================================================ */
.pdfh-taula-wrap { overflow-x: auto; margin-top: 4px; }
.pdfh-taula {
  width: 100%; border-collapse: collapse;
  font-size: 11.5px; line-height: 1.35;
}
.pdfh-taula th, .pdfh-taula td {
  border: 1px solid var(--border);
  padding: 5px 6px; text-align: center; vertical-align: middle;
}
.pdfh-taula thead th {
  background: var(--surface-alt); color: var(--text-sub);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.pdfh-taula tbody th {
  background: var(--surface-alt); color: var(--text-muted);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.pdfh-taula td { color: var(--text-muted); min-width: 72px; }
.pdfh-taula td.te { color: var(--text-main); font-weight: 600; }
/* El que canvia una cosa que la mestra ja tenia escrita. Va amb color I amb
   subratllat: si només fos el color, qui no el distingeixi no ho veuria. */
.pdfh-taula td.canvia {
  background: #FEF3C7; color: #7C4A03;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.pdfh-taula tr.pdfh-pati th, .pdfh-taula tr.pdfh-pati td { opacity: 0.5; }

/* ============================================================
   POSSIBLES ACTUALITZACIONS  (js/millores.js)
   ------------------------------------------------------------
   El botó de l'inici ha de convidar sense competir amb les eines del dia:
   les targetes de dalt són el que la mestra fa servir cada matí, i això
   és una cosa que mirarà de tant en tant.
   ============================================================ */
/* ============================================================
   AVÍS FORT DE L'INICI
   ------------------------------------------------------------
   Va just sobre «Possibles actualitzacions» i és per dir una cosa
   que s'ha de llegir un cop i prou. Vermell d'alerta a posta, no el
   granat de la casa: el granat és el color de tot i no cridaria.
   ============================================================ */
.home-avis-fort {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; margin-top: 12px; padding: 14px 16px;
  background: #FEF2F2; border: 1px solid #FECACA;
  border-left: 3px solid #B91C1C;
  border-radius: var(--r-md);
  text-align: left;
}
.home-avis-fort > svg { width: 22px; height: 22px; flex-shrink: 0; color: #B91C1C; margin-top: 1px; }
.home-avis-fort-cos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-avis-fort-text {
  margin: 0; font-size: 13px; line-height: 1.5; color: #7F1D1D;
}
.home-avis-fort-ok {
  align-self: flex-start;
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: #B91C1C; color: #fff; border: none;
  transition: background var(--ease), transform 0.16s ease-out;
}
.home-avis-fort-ok:hover { background: #991B1B; }
.home-avis-fort-ok:active { transform: scale(0.97); }

.home-millores {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-md);
  text-align: left; cursor: pointer;
  font: inherit; color: var(--text-main);
  position: relative;
  transition: border-color var(--ease), box-shadow var(--ease), transform 0.16s ease-out;
}
.home-millores:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(26,16,20,0.07); }
.home-millores:active { transform: scale(0.995); }
.home-millores svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--crimson); }
.home-millores-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-millores-text strong { font-size: 14px; font-weight: 700; }
.home-millores-text span { font-size: 12.5px; color: var(--text-sub); line-height: 1.45; }
.home-millores-badge { position: static; margin-left: auto; flex-shrink: 0; }

/* Cada millora de la llista */
.millora {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 15px 16px; margin-bottom: 12px;
  background: var(--surface-tint);
}
.millora.demanada { background: var(--surface); opacity: 0.75; }
.millora-titol { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--text-main); }
/* La frase «ras i curt»: és l'única cosa que llegirà molta gent, o sigui
   que és la que ha de llegir-se bé, no el títol. */
.millora-ras { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-main); }
/* La marca de "nova". Va amb PARAULA i no només amb color: qui no
   distingeixi el granat del gris no veuria res. */
.millora-nova {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  background: var(--crimson); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.millora.nova { border-color: var(--crimson-soft); }

/* Al botó de l'inici, el número ocupa el lloc de l'estrella. */
.home-millores-compte {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--crimson); color: #fff;
  border-radius: 50%; font-size: 13px; font-weight: 700;
}
.millora-mes {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.6; color: var(--text-sub);
}
.millora-mes p { margin: 0 0 8px; }
.millora-mes p:last-child { margin-bottom: 0; }
.millora-botons { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.millora-feta { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.millores-buit {
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  padding: 22px 20px; text-align: center; color: var(--text-sub);
  font-size: 13.5px; line-height: 1.6;
}
.millores-buit p { margin: 0 0 8px; }
.millores-buit p:last-child { margin-bottom: 0; }

/* Un camp que calia i s'ha deixat buit. Va amb marc I amb el missatge del
   toast: només el color no el veuria qui no el distingeixi. */
.camp-cal {
  border-color: var(--crimson) !important;
  box-shadow: 0 0 0 3px rgba(192,30,75,0.12);
}

/* «Desant… / Desat ✓» al peu de la fitxa de l'alumne. Ocupa el lloc del
   botó de Guardar que hi havia: la fitxa es desa sola i un botó de Guardar
   faria pensar que sense clicar-lo no s'ha desat res. */
.personal-desat {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; padding-left: 12px;
  transition: color var(--ease);
}
.personal-desat.ok  { color: #1B7A3D; }
.personal-desat.mal { color: var(--crimson); }

/* ============================================================
   LES NOTES QUE SÓN LLISTES  (js/postits.js)
   ------------------------------------------------------------
   Van DINS del post-it de sempre: mateix paper, mateix color, mateixa
   ombra. Aquí només es defineix com es veuen les línies, i prou —canviar
   res més del post-it seria tocar l'única cosa que en Pol va demanar que
   no es toqués.
   ============================================================ */
.pt-llista { flex: 1; margin: 2px 0 4px; }

.pt-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 3px 0; cursor: pointer;
  font-size: 13.5px; line-height: 1.4; color: #4a4a4a;
}
.pt-item input[type="checkbox"] {
  margin: 2px 0 0; width: 15px; height: 15px; flex-shrink: 0;
  accent-color: #4a4a4a;   /* el granat de l'app no lliga amb el paper de colors */
  cursor: pointer;
}
/* Fet: ratllat I més fluix. Només amb el color, qui no el distingeixi no
   sabria què està fet i què no. */
.pt-item.fet span { text-decoration: line-through; opacity: 0.5; }
.pt-item:hover span { color: #1a1a1a; }

.pt-compte {
  margin-top: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(0,0,0,0.38);
}
.pt-compte.tot { color: #1B7A3D; }

/* La llista mentre s'edita la nota */
.pt-items-edit { margin-bottom: 8px; }
.pt-items-edit:empty { display: none; }
.pt-item-edit {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 5px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 13px;
}
.pt-item-edit span { flex: 1; word-break: break-word; }
.pt-item-treu {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 17px; line-height: 1; color: var(--text-muted);
}
.pt-item-treu:hover { color: var(--crimson); }

/* ============================================================
   LA PANTALLA D'ARRENCADA
   ------------------------------------------------------------
   En Pol, 5/9/2026: «quan obris l'app, mentre es carrega, hi ha d'haver-hi
   una primera capa que enfosqueixi l'app i que no permeti tocar res… a mi
   mateix em costa identificar quan ha acabat de pensar». I: «al ser la
   pàgina de càrrega principal, que estigui una mica més treballada; que no
   sigui el rectangle blanc i prou».

   Per això no és el vel de les altres esperes: és una pantalla sencera amb
   el granat de l'escola i el logo. És la primera cosa que veu una mestra
   cada matí i ha de semblar l'app, no un avís del navegador.

   ⚠ El logo és la marca de l'escola: s'hi posa tal com és, sense filtres ni
   colors a sobre ni retallar-lo.
   ============================================================ */
.arrencada {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  background: var(--garnet-deep);
  /* Un punt de llum al darrere del logo perquè el fons no sigui una taca
     plana. Molt fluix: ha de fer bonic, no cridar. */
  background-image: radial-gradient(120% 90% at 50% 32%, rgba(192,30,75,0.38) 0%, transparent 62%);
  opacity: 1; transition: opacity 0.45s ease-out;
}
.arrencada.fora { opacity: 0; pointer-events: none; }

.arrencada-caixa {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 28px; text-align: center;
  max-width: 420px; width: 100%;
}
.arrencada-logo {
  width: min(280px, 72vw); height: auto; display: block;
  /* El mateix que fa el menú des de sempre: el logo porta fons blanc i, per
     poder-lo posar sobre el granat, es passa a blanc sencer. No se'n canvia
     la forma ni les proporcions —és la marca de l'escola. */
  filter: brightness(0) invert(1);
  /* Entra pujant una mica. Una sola vegada i curta: això es veu cada matí. */
  animation: arrencadaEntra 0.6s cubic-bezier(0.23,1,0.32,1) both;
}
.arrencada-curs {
  margin: 14px 0 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  animation: arrencadaEntra 0.6s cubic-bezier(0.23,1,0.32,1) 0.08s both;
}
.arrencada-barra {
  margin-top: 30px; width: min(240px, 60vw); height: 3px;
  background: rgba(255,255,255,0.13); border-radius: 999px; overflow: hidden;
  animation: arrencadaEntra 0.6s cubic-bezier(0.23,1,0.32,1) 0.16s both;
}
/* Sense percentatge: no sabem quant trigarà el servidor de Google, i una
   barra que menteix és pitjor que una que només diu «hi sóc». */
.arrencada-barra span {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: arrencadaFil 1.25s ease-in-out infinite;
}
.arrencada-estat {
  margin: 16px 0 0; font-size: 13px; color: rgba(255,255,255,0.62);
  min-height: 19px;
  animation: arrencadaEntra 0.6s cubic-bezier(0.23,1,0.32,1) 0.24s both;
}
.arrencada-surt {
  margin-top: 18px; padding: 8px 18px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background var(--ease);
}
.arrencada-surt:hover { background: rgba(255,255,255,0.2); }

@keyframes arrencadaEntra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes arrencadaFil {
  from { transform: translateX(-120%); }
  to   { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .arrencada-logo, .arrencada-curs, .arrencada-barra, .arrencada-estat { animation: none; }
  .arrencada-barra span { animation: none; width: 100%; opacity: 0.55; }
  .arrencada { transition: none; }
}

/* El compte d'alumnes, sota els botons dels documents. Discret: és un
   resum, no un titular —el titular ja és «Alumnes» amb el número al costat. */
.alumnes-compte {
  margin: 0 0 14px; font-size: 12.5px; color: var(--text-sub);
}

/* ============================================================
   EL QUE EL LECTOR NO HA SABUT COL·LOCAR
   ------------------------------------------------------------
   Un avís que ha de cridar l'atenció just el necessari: hi ha
   informació del document que ara no és a cap fitxa, i això és
   una cosa que val la pena mirar-se —però no és una alarma, i
   la mestra ha d'obrir Alumnes cada dia sense sentir que li
   criden. Per això: el color de la casa, prim, i sense fons
   vermell.
   ============================================================ */
.dubtes-avis {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-sm);
}
.dubtes-avis svg { width: 17px; height: 17px; color: var(--crimson); flex: none; }
.dubtes-avis-text {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--text-sub); line-height: 1.45;
}
.dubtes-avis-text strong { color: var(--text-main); font-weight: 650; }
.dubtes-avis .btn { flex: none; }

.dubte {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-tint);
  padding: 12px 14px; margin-bottom: 10px;
}
.dubte:last-child { margin-bottom: 0; }
.dubte-titol {
  margin: 0 0 4px; font-size: 14.5px; font-weight: 650; color: var(--text-main);
}
/* El text tal com surt al document: es veu que és una citació, no cosa nostra. */
.dubte-text {
  margin: 0 0 6px; font-size: 13px; color: var(--text-main);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 10px; line-height: 1.5;
}
.dubte-motiu {
  margin: 0; font-size: 12px; color: var(--text-sub); line-height: 1.5;
}
.dubte-botons {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
}
.dubte-select { margin: 0; flex: 1 1 200px; min-width: 0; }

@media (max-width: 560px) {
  /* Al mòbil el botó no ha de quedar escanyat al costat del text. */
  .dubtes-avis { flex-wrap: wrap; }
  .dubtes-avis-text { flex: 1 1 100%; order: 2; }
  .dubtes-avis .btn { order: 3; margin-left: auto; }
  .dubte-botons .btn { flex: 1 1 auto; }
}

/* ============================================================
   ACCESSIBILITAT — el que va sortir a l'auditoria del 6/9/2026
   ============================================================ */

/* ⚠ ELS BOTONS D'UN POST-IT NO ES VEIEN AL MÒBIL.
   Només sortien amb `:hover`, i al mòbil i a la tauleta no hi ha hover:
   editar i esborrar un post-it eren invisibles i, per tant, inexistents. */
@media (hover: none), (pointer: coarse) {
  .postit-actions { opacity: 1; }
  .postit-act-btn { width: 36px; height: 36px; }

  /* ⚠ EL MATEIX ERROR, A DOS LLOCS MÉS QUE ES VAN QUEDAR FORA.
     Auditoria de l'11/9/2026. A «Gestionar alumnes», els botons de dades
     personals, observacions i eliminar estaven a `opacity:0` i només
     sortien amb hover: a la tauleta —que és aparell d'ús— no existien.
     I a Registres d'aula passava igual amb la creu de treure una columna:
     no hi havia manera de treure un ítem de seguiment sense ratolí. */
  .student-actions { opacity: 1; }
  .reg-th-delete   { opacity: 1; }

  /* ⚠ VUIT CONTROLS QUE ES QUEDAVEN PER SOTA DELS 44 px.
     Els arranjaments tàctils anteriors (6/9 i 8/9) van anar component-los un
     per un i aquests es van quedar fora. Amidats al QA de l'11/9/2026: entre
     16 i 34 px. Amb el dit no s'encerten, i el de sobre i el de sota sí: es
     clica el que no toca, i això amb «eliminar» pel mig fa mal. Aquí només
     creix la zona de toc; a l'ordinador no canvia res. */
  .action-btn,
  .btn-obs,
  .btn-personal,
  .gva-btn,
  .plan-durada-num-btn,
  .nota-com-btn,
  .seients-group-del,
  .seients-marker-del,
  .modal-close,
  .panel-close,
  .reg-th-delete {
    min-width: 44px; min-height: 44px;
  }
  /* Els de dins d'una capçalera de taula no poden créixer tant sense
     desmuntar-la: se'ls eixampla la zona amb `padding`, que no ocupa lloc. */
  .reg-th-delete { min-width: 0; min-height: 0; padding: 14px; }

  /* ⚠ Els apartats del menú feien 34 px d'alt. Amb el dit, el mínim que
     s'encerta sense errar-la són 44 px: els de sobre i sota es fallen sovint,
     i ho paga qui va amb presa entre classe i classe. A l'ordinador no canvia
     res —aquest bloc només val per a pantalles tàctils— o sigui que el menú
     de sempre es queda igual de compacte. Trobat al QA del 10/9/2026
     mesurant-los un per un al mòbil. */
  .sidebar .nav-item,
  .sidebar .nav-item-half { min-height: 44px; }

  /* ⚠ I LES DUES CASELLES QUE MÉS ES TOQUEN DE TOTA L'APP.
     QA del 27/9/2026, amidades al mòbil: la casella de posar la nota feia
     28 px d'alt i la creu del registre 24. Són justament les que una mestra
     pica vint-i-cinc vegades seguides, i les files van una sota l'altra: si
     s'erra, escriu la nota al nen del costat. Amb el dit calen 44 px.
     A l'ordinador no canvia res: aquest bloc només val per a pantalles
     tàctils, i la taula es continua veient igual de compacta amb ratolí. */
  .notes-input-punts { min-height: 44px; font-size: 16px; }
  .ne-btn { min-height: 44px; }
  .reg-checkbox { width: 28px; height: 28px; }
  /* La creu és petita a posta (és un quadrat), però la casella que l'envolta
     sí que pot ser gran: així el dit encerta encara que no hi caigui al mig. */
  .reg-td-cell { padding: 10px 6px; }
}

/* ⚠ I ELS CHROMEBOOKS AMB PANTALLA TÀCTIL (QA del 27/9/2026).
   Als portàtils tàctils —els que fan servir les mestres— el punter principal
   és el ratolí, o sigui que el bloc de dalt NO s'hi aplica… però la mestra hi
   toca la pantalla igualment. «any-pointer: coarse» vol dir «aquest aparell TÉ
   alguna manera tàctil», encara que no sigui la principal. Només s'hi
   eixamplen les caselles que es piquen vint-i-cinc vegades seguides; a un
   ordinador sense pantalla tàctil no canvia absolutament res. */
@media (any-pointer: coarse) {
  .notes-input-punts { min-height: 44px; font-size: 16px; }
  .ne-btn { min-height: 44px; }
  .reg-checkbox { width: 28px; height: 28px; }
  .reg-td-cell { padding: 10px 6px; }
}

/* ⚠ RESPECTAR «REDUIR EL MOVIMENT» DE DEBÒ.
   Hi havia sis blocs que només cobrien components afegits tard: les 29
   finestres seguien fent l'animació d'entrada i hi havia 207 elements amb
   `transition: all`. Qui ho té activat sol ser qui ho necessita. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ⚠ ON SOC? Cap punt de referència: ni un enllaç per saltar al contingut,
   ni res que digués quina pàgina és l'activa. Amb el teclat calia passar 24
   elements del menú a cada pantalla. */
.salta-al-contingut {
  position: absolute; left: -9999px; top: 0;
  background: var(--garnet-deep); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
  z-index: 9999; font-weight: 600; text-decoration: none;
}
.salta-al-contingut:focus {
  left: 0; outline: 3px solid var(--crimson); outline-offset: 2px;
}

/* ⚠ EL FOCUS S'HA DE VEURE SEMPRE. Hi havia onze camps amb `outline:none`
   i cinc controls sense cap senyal de focus. */
:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   ELS NOMS LLARGS D ITEM QUE ESTIRAVEN LA TAULA
   ------------------------------------------------------------
   Trobat a l auditoria del 6/9/2026: un item de registre o una activitat de
   notes amb un nom llarg ("Control de les taules de multiplicar del 6 al 9")
   feia una columna d un pam. La taula s estirava fins a fora de la pantalla,
   la mestra havia de fer scroll horitzontal per marcar una casella i el nom
   dels alumnes deixava de servir de referencia.

   Ara la columna te un sostre: el nom s hi encabeix en dues linies i, si
   encara no hi cap, es talla amb punts suspensius. El nom sencer no es perd:
   es queda al title, o sigui que sortint-hi el ratoli per damunt es llegeix.
   ============================================================ */
.reg-table th.reg-th-item,
.notes-table th.notes-th-item {
  max-width: 190px;
}
.reg-th-inner > span,
.notes-th-item-nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  line-height: 1.3;
}
/* Al mobil encara mes estret: el que compta es poder marcar la casella. */
@media (max-width: 640px) {
  .reg-table th.reg-th-item,
  .notes-table th.notes-th-item { max-width: 130px; }
}

/* Triar un alumne tocant-lo (plànol de l aula amb el dit) */
.seient-triat, .seients-pool-triat {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(122, 30, 46, 0.14);
}
.seients-tria-hint {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-tint, #FBEAED);
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.45;
}
.seient, .seients-pool-item { cursor: pointer; }

/* ============================================================
   EL MOBIL DE DEBO: BARRES, ARREES SEGURES I RESPOSTA AL TOC
   ------------------------------------------------------------
   Trobat a l auditoria del 6/9/2026:

   · Tot es media amb 100vh, que al mobil val l alcada SENSE comptar la
     barra d adreces. Resultat: el peu del calaix «Dades personals» —on hi
     ha el boto de desar— quedava per sota de la barra del navegador i no
     s hi podia arribar. `dvh` es l alcada que queda de debo.
   · Sense `overscroll-behavior`, arribar al final d una finestra continuava
     desplacant la pagina de sota: es tancava el calaix sense voler.
   · Sense `-webkit-tap-highlight-color`, tocar un boto al mobil no donava
     cap senyal: es tocava dues i tres vegades pensant que no havia anat.
   ============================================================ */
@supports (height: 100dvh) {
  .sidebar,
  .app-shell,
  body { min-height: 100dvh; }
  .panel-drawer,
  .drawer { max-height: 100dvh; }
  .modal { max-height: calc(100dvh - 48px); }
}
.modal, .panel-drawer, .drawer, .sidebar {
  overscroll-behavior: contain;
}
/* Prou espai per sota, on hi ha la barra del sistema (iPhone amb osca) */
.modal-footer, .panel-footer, .drawer-footer {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
button, .btn, a, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: rgba(122, 30, 46, 0.16);
}

/* ⚠ Els camps que es menjaven l anell del focus.
   Dotze menes de camp feien `outline: none` i cinc no hi posaven res a
   canvi: qui va amb el teclat no sabia on era. `:focus-visible` nomes surt
   quan de debo es navega amb el teclat, o sigui que amb el ratoli no canvia
   res del que ja hi havia. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

/* ⚠ Un post-it amb molt text creixia sense limit i s enduia el taulell.
   Ara te un sostre i el text de mes es llegeix obrint-lo.

   ⚠ Però es tallava a mitja línia i res no deia que hi hagués més text
   (segona auditoria, 8/9/2026): semblava que la nota s'hagués guardat a
   mitges. Ara el final s'esvaeix, que és el senyal que tothom entén de «això
   continua», i la nota es pot seguir obrint per llegir-la sencera. */
.postit-text {
  overflow: hidden;
  overflow-wrap: anywhere;
  /* `line-clamp` i no `max-height`: talla per línia sencera i hi posa els
     punts suspensius ELL SOL, i només quan de debò sobra text. Amb una nota
     curta no es nota gens. 10 línies ≈ els 210 px d'abans. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  line-clamp: 10;
}

/* La nota triada per moure-la tocant (mobil i tauleta) */
.postit-triat {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(122, 30, 46, 0.14);
}

/* Els apunts d una mestra que ja no surt al claustre: es veuen, marcats,
   per no perdre res en silenci quan es corregeix un nom. */
.regdoc-orfe { opacity: 0.72; }
.regdoc-orfe .reg-td-name { font-style: italic; }
.regdoc-orfe-treu {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--crimson); text-decoration: underline; font: inherit;
}

/* La cerca de la pantalla d Alumnes */
.alumnes-cerca {
  max-width: 340px;
  margin: 0 0 14px;
}

/* ============================================================
   LES DUES QUE NO CABIEN A LA PANTALLA
   ------------------------------------------------------------
   Trobat a l auditoria del 6/9/2026:
   · el quadre de la «penyora» fa 460 px de fons + 6 px de vora per banda:
     en un mobil de 390 px la vora groga quedava tallada pels dos costats;
   · a 320 px d amplada, Assoliments feia desbordar el document 11 px.
   ============================================================ */
.esm-penyora .esm-penyora-box {
  max-width: min(460px, calc(100vw - 28px));
  box-sizing: border-box;
}
@media (max-width: 420px) {
  .esm-penyora .esm-penyora-box { padding: 24px 18px; border-width: 4px; }
  .esm-penyora-titol { font-size: 30px; }
  .esm-penyora-emoji { font-size: 36px; }
}
/* Assoliments a les pantalles molt estretes */
@media (max-width: 360px) {
  .assim-table-scroll { overflow-x: auto; max-width: 100%; }
  .assim-th-obj { min-width: 76px; }
  .page-content { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   ZONES DE TOC — pantalles de dit
   ------------------------------------------------------------
   ⚠ Segona auditoria (8/9/2026): al mòbil, els botons del selector
   d'assignatura i de trimestre feien 27 px d'alt, les etiquetes del perfil
   29, i la × de treure un grup 24×24. Amb el dit no s'hi encerta i es toca
   el del costat —que vol dir canviar de trimestre o treure el grup que no
   toca. La recomanació (WCAG 2.5.5) és 44×44.

   Va per `hover: none` i no per amplada: el que mana és si hi ha ratolí o
   no, i una tauleta és un aparell de dit encara que sigui ampla. Amb ratolí
   tot es queda tal com està.
   ============================================================ */
@media (hover: none) {
  .trim-sel-btn        { padding: 11px 16px; font-size: 13px; min-height: 44px; }
  .perfil-assig-chip   { padding: 11px 15px; font-size: 13px; min-height: 44px; }
  .perfil-on-chip      { padding: 11px 14px; font-size: 13px; min-height: 44px; min-width: 44px; }
  .perfil-grup-remove  { width: 40px; height: 40px; font-size: 18px; }
}

/* ⚠ Al Planning, «especial» i «sortida» només es distingien pel color (groc
   i verd) i amb el mateix marcatge: si la mestra hi escrivia «Teatre», res
   no deia de quina mena era. El cas «festa» sí que se'n sortia perquè porta
   el text «FESTA». Trobat al QA de l'11/9/2026. */
.plan-cell-mena {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; opacity: 0.75; margin-bottom: 2px;
}
.plan-cell-especial .plan-cell-mena { color: #92400E; }
.plan-cell-sortida  .plan-cell-mena { color: #065F46; }

/* ============================================================
   L'iPHONE FEIA ZOOM SOL I L'APP ES QUEDAVA GRAN
   ------------------------------------------------------------
   EN POL, 28/9/2026, INSTAL·LANT L'APP A L'AIDA (iPhone 16):
   «no és 100% responsiva, és massa grossa per la pantalla i té
   un scroll vertical i horitzontal permanent».

   No era el disseny: a 393 px cap pantalla no desborda (provat
   pantalla per pantalla). El que passa és de l'iOS:

     Quan toques un camp de text amb la lletra per sota de 16 px,
     el Safari de l'iPhone FA ZOOM SOL per poder-lo llegir. I no
     el desfà: la pàgina es queda gran, i des d'aquell moment hi
     ha scroll horitzontal a tot arreu.

   Hi havia 17 regles de camps per sota de 16 px (13 px, 12,5
   px…). Prou petites per disparar-ho a la primera cerca d'un
   alumne o a la primera observació.

   LA SORTIDA QUE NO ES POT FER SERVIR: posar `maximum-scale=1`
   al viewport. Ho arreglaria, però impedeix fer zoom amb els
   dits a qui el necessita per veure-hi. No es toca.

   Això només val per als aparells de dit: amb ratolí, la lletra
   dels camps es queda com estava. El `!important` hi és perquè
   les regles d'origen van per classe i si no no guanyaríem;
   és a posta i només aquí.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  input, select, textarea,
  input[type="text"], input[type="number"], input[type="date"],
  input[type="time"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="url"] {
    font-size: 16px !important;
  }
  /* Els camps de dins d'una taula no poden créixer d'amplada per la
     lletra: que s'ajustin a la cel·la i no eixamplin la fila. */
  .reg-text-input, .actitud-input, .notes-input-punt { max-width: 100%; }
}

/* L'iOS engrandeix la lletra ell sol quan es gira l'aparell, i llavors
   allò que hi cabia deixa de cabre-hi. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ============================================================
   PERFIL · ON ES FA CADA ASSIGNATURA (29/9/2026)
   Dins del bloc de cada curs, una fila per assignatura marcada: el
   nom a l'esquerra i, a la dreta, on la fa (A, B, C i —si en té— els
   grups del desdoblament). Les línies són de marcar-ne més d'una;
   el grup de desdoblament, un.
   ============================================================ */
.perfil-on-llista {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.perfil-on-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perfil-on-assig {
  font-size: 12.5px; font-weight: 600; color: var(--text-main);
  min-width: 118px; flex-shrink: 0;
}
.perfil-on-opcions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.perfil-on-chip {
  min-width: 34px; font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 7px 10px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.perfil-on-chip:hover { border-color: var(--crimson); color: var(--garnet-deep); }
.perfil-on-chip.active {
  background: var(--crimson); border-color: var(--crimson); color: #fff;
}
/* Els del desdoblament porten el nom del grup, no una lletra: rodons i
   amb el granat suau, perquè no semblin una línia més. */
.perfil-on-chip.desdob { border-radius: 16px; min-width: 0; }
.perfil-on-chip.desdob.active {
  background: #FBEAED; border-color: var(--crimson); color: #7A1E2E;
}
.perfil-on-etiq, .perfil-on-espera {
  font-size: 11.5px; color: var(--text-muted); margin-left: 4px;
}
.perfil-on-espera { font-style: italic; }
/* Marcada però encara sense dir on: no es desarà, i val més que es vegi. */
.perfil-on-avis {
  font-size: 11.5px; font-weight: 600; color: var(--warn, #B45309);
  background: var(--warn-bg, #FFF6E5); border-radius: 6px; padding: 3px 8px;
}
.perfil-on-fila.falta .perfil-on-assig { color: var(--warn, #B45309); }

/* El subtext del planning pot tenir més d'una línia (29/9/2026): abans era
   un camp d'una sola línia i no s'hi podia fer Enter. */
.plan-sub-textarea { resize: vertical; min-height: 54px; line-height: 1.45; font-family: inherit; }
/* Que les línies noves es vegin com a línies, a la graella i a la portada.
   Sense això, l'Enter es desava però l'HTML l'ensenyava tot seguit. */
.plan-cell-sub { white-space: pre-line; }

/* ============================================================
   RÚBRIQUES D'AVALUACIÓ (29/9/2026)
   L'eina que només té qui l'ha demanada. La pantalla segueix el
   que ja fa la resta de l'app: la targeta del perfil per triar,
   les files del registre per la llista i el modal de sempre per
   a l'editor. Res de nou per aprendre.
   ============================================================ */
.rubaval-picker {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px;
}
.rubaval-camp { display: flex; flex-direction: column; gap: 5px; }
.rubaval-camp-nom {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.rubaval-camp .modal-input { min-width: 220px; }
.rubaval-trims { display: flex; gap: 6px; }

/* Una fila per rúbrica: el nom gran i, a sota, de què va. */
.rubaval-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 9px;
}
.rubaval-fila-nom { font-size: 15px; font-weight: 700; color: var(--garnet-deep); }
.rubaval-fila-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.rubaval-fila-botons { display: flex; gap: 6px; flex-wrap: wrap; }
.rubaval-esborrar:hover { color: var(--crimson); }
.rubaval-buit {
  background: var(--surface-tint); border: 1px dashed var(--border-strong);
  border-radius: var(--r-md); padding: 22px 20px; color: var(--text-sub);
  font-size: 13.5px; line-height: 1.6;
}
.rubaval-buit p { margin: 0 0 8px; }
.rubaval-buit p:last-child { margin-bottom: 0; }

/* ── L'editor ── */
.rav-modal { width: min(720px, calc(100vw - 32px)); }
.rav-camp { display: block; }
.rav-camp-nom {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
}
.rav-secc-titol {
  font-size: 13px; font-weight: 700; color: var(--garnet-deep);
  margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.rav-secc-ajuda { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }

.rav-nivells { display: flex; flex-wrap: wrap; gap: 8px; }
.rav-nivell {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 4px 4px 4px 6px; background: var(--surface-tint);
}
.rav-nivell-nom   { width: 120px; font-size: 12.5px; padding: 5px 7px; }
.rav-nivell-punts { width: 58px;  font-size: 12.5px; padding: 5px 7px; text-align: center; }

/* Una fila per criteri, amb el pes al costat des del primer moment
   (en Pol, 29/9/2026). El nom s'estira; el pes és petit a posta: és un
   número d'una xifra i no ha de competir amb el que s'avalua. */
.rav-criteri {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
.rav-criteri:last-of-type { border-bottom: 0; }
.rav-criteri-num {
  width: 20px; text-align: right; font-size: 12px; font-weight: 700;
  color: var(--text-muted); flex-shrink: 0;
}
.rav-criteri-nom { flex: 1 1 200px; font-size: 13px; padding: 7px 9px; }
.rav-criteri-pes { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.rav-criteri-pes span { font-size: 11.5px; color: var(--text-muted); }
.rav-criteri-pes input { width: 58px; font-size: 12.5px; padding: 6px 7px; text-align: center; }
.rav-criteri-mes, .rav-treu {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--ease), color var(--ease);
}
.rav-criteri-mes:hover, .rav-treu:hover { border-color: var(--crimson); color: var(--crimson); }
.rav-treu svg { width: 14px; height: 14px; }
.rav-criteri-textos {
  flex-basis: 100%; margin: 4px 0 10px 27px;
  border-left: 2px solid var(--border); padding-left: 12px;
}
.rav-text-fila { display: block; margin-bottom: 7px; }
.rav-text-fila span {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px;
}
.rav-afegir { margin-top: 8px; }
.rav-peu { flex: 1; font-size: 11.5px; color: var(--text-muted); text-align: left; }

@media (hover: none) {
  .rav-criteri-mes, .rav-treu { width: 44px; height: 44px; }
  .rav-criteri-nom, .rav-criteri-pes input,
  .rav-nivell-nom, .rav-nivell-punts { min-height: 44px; }
  .rubaval-fila-botons .btn { min-height: 44px; }
}
/* La llista de grups on copiar una rúbrica: una casella per grup, que
   una especialista sovint en vol copiar dos o tres de cop. */
.rav-copia-fila {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-main); cursor: pointer;
}
.rav-copia-fila:last-child { border-bottom: 0; }
.rav-copia-fila input { width: 18px; height: 18px; accent-color: var(--crimson); }
.rav-copia-ja { font-size: 11.5px; color: var(--warn, #B45309); }
@media (hover: none) { .rav-copia-fila { padding: 13px 4px; } }

/* ── Avaluar amb la rúbrica ──────────────────────────────────
   Els nivells són números (1 és el de dalt) amb la llegenda a
   sobre: amb quatre criteris i vint-i-cinc alumnes, un botó amb
   el nom sencer a cada casella no hi cabria, i un desplegable
   voldria dir dos gestos per casella en comptes d'un. */
.rav-av-cap {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.rav-av-titol { display: flex; flex-direction: column; line-height: 1.3; }
.rav-av-titol strong { font-size: 16px; color: var(--garnet-deep); }
.rav-av-titol span { font-size: 12px; color: var(--text-muted); }
.rav-av-compte {
  margin-left: auto; font-size: 12.5px; color: var(--text-sub);
  background: var(--surface-alt); border-radius: 999px; padding: 5px 12px;
}
.rav-av-llegenda {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: 12px; color: var(--text-sub);
}
.rav-av-llegenda b {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px; text-align: center;
  border-radius: 5px; background: var(--garnet-deep); color: #fff; font-size: 11px; margin-right: 4px;
}
.rav-av-llegenda i { color: var(--text-muted); font-style: normal; }

.rav-av-taula-caixa {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.rav-av-taula { border-collapse: collapse; width: 100%; font-size: 13px; }
.rav-av-taula th, .rav-av-taula td {
  padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: center;
}
.rav-av-taula thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-tint);
  border-bottom: 1px solid var(--border-strong); vertical-align: top;
}
.rav-av-th-alumne, .rav-av-alumne {
  text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1;
  min-width: 150px; font-weight: 600; color: var(--text-main);
}
.rav-av-taula thead .rav-av-th-alumne { background: var(--surface-tint); z-index: 3; }
.rav-av-th-nom { font-weight: 700; color: var(--garnet-deep); }
.rav-av-th-pes { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.rav-av-tots { margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }
.rav-av-tot {
  width: 20px; height: 20px; margin-left: 2px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); font-family: inherit; font-size: 11px;
}
.rav-av-tot:hover { border-color: var(--crimson); color: var(--crimson); }

.rav-av-cella { display: inline-flex; gap: 3px; }
.rav-av-niv {
  min-width: 30px; height: 30px; border-radius: var(--r-sm); cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.rav-av-niv:hover { border-color: var(--crimson); color: var(--garnet-deep); }
.rav-av-niv.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.rav-av-niv:focus-visible { outline: 2px solid var(--garnet-deep); outline-offset: 2px; }

.rav-av-nota { font-weight: 700; color: var(--garnet-deep); white-space: nowrap; }
.rav-av-sense { color: var(--text-muted); font-weight: 400; }
.rav-av-num.mitges { color: var(--warn, #B45309); }
.rav-av-mitges-marca { color: var(--warn, #B45309); font-weight: 700; margin-left: 1px; }

/* Al mòbil, una targeta per alumne: una taula de 25×5 en un telèfon no
   es pot fer servir, i els noms dels nivells hi caben sencers. */
.rav-av-targeta {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px;
}
.rav-av-targeta-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 700; color: var(--garnet-deep); font-size: 14.5px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.rav-av-targeta-fila { margin-bottom: 10px; }
.rav-av-targeta-crit {
  display: block; font-size: 12.5px; color: var(--text-sub); margin-bottom: 5px;
}
.rav-av-targeta .rav-av-cella { display: flex; flex-wrap: wrap; gap: 6px; }
.rav-av-targeta .rav-av-niv { min-width: 0; flex: 1 1 auto; padding: 0 10px; height: 44px; }

@media (hover: none) {
  .rav-av-niv { min-width: 44px; height: 44px; }
  .rav-av-tot { width: 32px; height: 32px; font-size: 12px; }
}
/* El resum d'abans de passar les notes al registre: què s'hi escriurà i
   què NO (els que no tenen res avaluat no reben cap zero). */
.rav-passa-llista { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--text-main); }
.rav-passa-canvi { color: var(--warn, #B45309); font-weight: 600; }
/* La columna del registre que ve d'una rúbrica: un botó petit a la
   capçalera per tornar-hi. Només el veu qui té l'eina encesa. */
.notes-th-rubrica {
  display: block; margin: 3px auto 0; padding: 2px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--crimson); background: var(--surface);
  color: var(--crimson);
}
.notes-th-rubrica:hover { background: var(--crimson); color: #fff; }
@media (hover: none) { .notes-th-rubrica { padding: 6px 10px; font-size: 11px; } }

/* ============================================================
   ACCESSIBILITAT — arranjaments de l'auditoria del 29/9/2026
   ============================================================ */

/* ⚠ L'anell de focus no es veia sobre el granat del menú: el crimson sobre
   #4A1520 dona 2,49:1 i la norma en demana 3:1. Són els 24 primers punts de
   tabulació de cada pantalla, i també les creus de tancar de les finestres.
   Sobre granat, l'anell va blanc (el patró ja existia a `.esm-penyora-btn`). */
.sidebar :focus-visible,
.modal-header :focus-visible,
.panel-header :focus-visible,
.salta-al-contingut:focus {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

/* ⚠ Els camps de només-mirar de la fitxa es menjaven l'anell de focus amb
   `:focus` (i amb més especificitat que la regla global). Continuen essent
   punts de tabulació —n'hi ha vuit seguits a la fitxa—, o sigui que amb el
   teclat el cursor hi desapareixia. Amb el ratolí segueixen sense marc. */
.form-input-nomes-mirar:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.form-input-nomes-mirar:focus-visible { outline: 3px solid var(--crimson); outline-offset: 1px; }

/* Objectius de dit que s'havien quedat per sota dels 44 px (els altres ja hi
   són des de la v237). El de «posar aquest nivell a TOTS els alumnes» és el
   que més mal faria si es prem sense voler. */
@media (hover: none), (pointer: coarse) {
  .postit-act-btn { width: 44px; height: 44px; }
  .rav-av-tot     { width: 44px; height: 44px; font-size: 13px; }
  .seients-step   { min-width: 44px; min-height: 44px; }
  .grups-num-btn  { min-width: 44px; min-height: 44px; }
  .tq-check       { width: 26px; height: 26px; }
  .btn            { height: auto; min-height: 44px; }
}

/* ⚠ Colors d'estat per sota del 4,5:1 sobre els fons de l'app. Són justament
   els senyals d'urgència: la data d'una tasca que venç avui, una de vençuda,
   els avisos del plànol d'aula i de la fitxa de grup. El text secundari ja
   es va arreglar el 8/9/2026; aquests es van quedar fora. */
.tq-data-avui     { color: #C2410C; }   /* 2,56:1 → 4,8:1 */
.tq-data-vencuda  { color: #B91C1C; }   /* 3,44:1 → 5,9:1 */
.seient-warn      { color: #B45309; }   /* 2,91:1 → 4,6:1 */
.grupview-alert   { color: #B45309; }
.grups-cond-sep   { color: #B91C1C; }

/* ============================================================
   ENTRAR AMB GOOGLE (js/login.js)
   ------------------------------------------------------------
   La porta només es pinta a les apps que tinguin el login encès, i
   només quan Google no ha reconegut l'aparell tot sol. El cas de cada
   dia és que això no es vegi mai.
   ============================================================ */
.login-porta {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #7B2638, #5A1B28);
}
.login-porta.open { display: flex; }
.login-caixa {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 32px 26px;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
/* El logo és una marca de l'escola: es manté tal com és i només se li
   dona una amplada màxima. */
.login-logo  { max-width: 190px; width: 70%; height: auto; margin-bottom: 20px; }
.login-titol { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0 0 8px; }
.login-text  { font-size: 13.5px; color: var(--text-sub); margin: 0 0 20px; line-height: 1.5; }
/* El botó el pinta Google i no se'n pot canviar l'aspecte: només es
   centra. */
.login-boto  { display: flex; justify-content: center; min-height: 44px; }
.login-peu   { font-size: 12px; color: var(--text-muted); margin: 18px 0 0; line-height: 1.5; }
.login-error {
  margin: 16px 0 0; padding: 10px 12px;
  background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 8px;
  color: #991B1B; font-size: 12.5px; line-height: 1.45; text-align: left;
}

/* ============================================================
   CONFIGURACIÓ — l'apartat, no la pantalla d'instal·lació
   ------------------------------------------------------------
   Fins a la v287 això començava amb l'adreça del servidor i el botó
   del peu deia «Connectar», com si l'app no ho estigués. Ara va per
   blocs, de més a menys sovint: qui ets, els avisos, el teu Google,
   les teves coses, l'app, i tot el que no s'ha de tocar plegat a
   baix de tot.
   ============================================================ */
.modal-cfg { max-width: 560px; }

/* Qui ets */
.cfg-jo {
  background: linear-gradient(135deg, #FBEAED, #F7DCE1);
  border: 1px solid #EBC0C8; border-radius: var(--r-md);
  padding: 14px; margin-bottom: 16px;
}
.cfg-jo-dalt { display: flex; align-items: center; gap: 12px; }
.cfg-jo-avatar { width: 42px; height: 42px; font-size: 14px; flex-shrink: 0; }
.cfg-jo-text { min-width: 0; }
.cfg-jo-nom { font-size: 15px; font-weight: 700; color: #7A1E2E; line-height: 1.25; }
.cfg-jo-sub { font-size: 12px; color: #9A4A5A; margin-top: 2px; }
.cfg-jo-compte {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #EBC0C8;
  font-size: 12.5px; color: #7A1E2E;
}
.cfg-jo-compte strong { overflow-wrap: anywhere; }

/* Cada bloc */
.cfg-bloc { padding: 14px 0; border-top: 1px solid var(--border); }
.cfg-bloc:first-of-type { border-top: none; padding-top: 0; }
.cfg-bloc-cap {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-main);
  margin-bottom: 8px;
}
.cfg-bloc-cap svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--crimson); }
.cfg-bloc-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 8px 0 0; }
.cfg-bloc .cfg-actions { margin-top: 10px; }

/* Les dades de l'app, en dues columnes */
.cfg-dades { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-dada {
  flex: 1 1 150px;
  background: var(--surface-alt); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.cfg-dada span   { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cfg-dada strong { font-size: 13px; color: var(--text-main); font-weight: 600; }

/* El calaix del que no s'ha de tocar */
.cfg-avancat { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.cfg-avancat > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-muted);
  font-weight: 600; list-style: none;
}
.cfg-avancat > summary::-webkit-details-marker { display: none; }
.cfg-avancat > summary::before { content: '▸ '; }
.cfg-avancat[open] > summary::before { content: '▾ '; }
.cfg-avancat > summary:hover { color: var(--crimson); }
/* L'enllaç al manual és un <a> però ha de semblar un botó com els del
   costat: sense la ratlla de sota i amb el text al mig. */
.cfg-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ============================================================
   PÀGINA D'EINES (una targeta per eina)
   ============================================================ */
.eines-graella {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.eina-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.eina-card-icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-alt); color: var(--crimson);
}
.eina-card-icona svg { width: 20px; height: 20px; }
.eina-card-titol { font-size: 14.5px; font-weight: 700; color: var(--text-main); }
.eina-card-desc  { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.eina-card:hover { border-color: var(--crimson); box-shadow: 0 4px 16px rgba(123,38,56,0.09); }
.eina-card:hover .eina-card-titol { color: var(--crimson); }
.eines-buit { font-size: 13px; color: var(--text-muted); }

/* «Tinc una idea!»: l'última targeta, que no és una eina. Es pinta més
   fluixa —sense fons i amb la vora de ratlletes— perquè es vegi d'una
   ullada que allà no hi ha res per obrir, sinó una cosa per demanar. */
.eina-card-idea { background: none; border-style: dashed; }
.eina-card-idea .eina-card-icona { background: none; border: 1px dashed var(--border); color: var(--text-muted); }
.eina-card-idea .eina-card-titol { color: var(--text-sub); font-weight: 600; }
.eina-card-idea:hover { background: var(--surface); border-style: solid; }
.eina-card-idea:hover .eina-card-icona { border-color: var(--crimson); color: var(--crimson); }

/* Al mòbil, de dues en dues: amb una sola columna s'hi perd massa pantalla. */
@media (max-width: 560px) {
  .eines-graella { grid-template-columns: 1fr 1fr; gap: 10px; }
  .eina-card { padding: 14px 12px; }
  .eina-card-desc { display: none; }
}

/* ============================================================
   AULES LLIURES
   ============================================================ */
.aules-cerca {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-bottom: 18px;
}
.aules-quan { display: inline-flex; background: var(--surface-alt); border-radius: 10px; padding: 3px; }
.aules-tab {
  border: 0; background: none; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.aules-tab.actiu { background: var(--surface); color: var(--crimson); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.aules-tria { display: flex; gap: 10px; flex-wrap: wrap; }
.aules-camp {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.aules-camp select {
  font-family: inherit; font-size: 13.5px; color: var(--text-main);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; min-width: 120px;
}
.aules-cerca .btn { margin-left: auto; }

.aules-capcalera { font-size: 13.5px; color: var(--text-sub); margin: 0 0 12px; }
.aules-avis {
  background: var(--surface-alt); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px;
}
.aules-llista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.aula-lliure {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r-md); padding: 13px 14px;
}
.aula-nom  { font-size: 14px; font-weight: 700; color: var(--text-main); }
.aula-fins { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.aules-buit { font-size: 13.5px; color: var(--text-sub); }
.aules-buit p { margin: 0 0 6px; }
.aules-propera { font-size: 13px; color: var(--text-muted); }

@media (max-width: 560px) {
  .aules-cerca { padding: 12px; gap: 10px; }
  .aules-quan { width: 100%; }
  .aules-tab { flex: 1; padding: 9px 6px; }
  .aules-tria { width: 100%; }
  .aules-camp { flex: 1; }
  .aules-camp select { width: 100%; min-width: 0; }
  .aules-cerca .btn { margin-left: 0; width: 100%; justify-content: center; }
  .aules-llista { grid-template-columns: 1fr; }
}
.aules-peu { font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }
.aules-rellegir {
  border: 0; background: none; font-family: inherit; font-size: 12px;
  color: var(--crimson); font-weight: 600; cursor: pointer; padding: 0;
  text-decoration: underline;
}

/* Les hores de classe, per no haver-les d'escriure. L'hora es pot posar a
   mà al camp: això són només dreceres. */
.aules-rapides { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aules-rapides-txt { font-size: 11.5px; color: var(--text-muted); }
.aules-rapida {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 4px 10px;
  font-family: inherit; font-size: 12.5px; color: var(--text-sub);
  cursor: pointer; transition: border-color var(--ease), color var(--ease);
}
.aules-rapida:hover { border-color: var(--crimson); color: var(--crimson); }
.aules-camp input[type="time"] {
  font-family: inherit; font-size: 13.5px; color: var(--text-main);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; min-width: 120px;
}