/* CAPA GAMIFICAND · pantalles concretes: mode aula, entrada, usuaris,
   caselles i avaluació. És l'últim full que es carrega. */
/* =====================================================================
   MODE AULA — programacio.php
   ===================================================================== */
main.ple{padding:0 0 40px;min-height:60vh}
.punt{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--pendent)}
.punt--fet{background:var(--fet)}
.punt--avui{background:var(--avui)}
.unitat{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;
  background:var(--fons);min-height:70vh}
.unitat__cos{min-width:0;padding:26px 28px 40px;display:flex;flex-direction:column;gap:20px}
.unitat__panell{border-left:1px solid var(--vora);background:var(--superficie-3);
  padding:26px 22px 24px;display:flex;flex-direction:column;gap:22px;
  position:sticky;top:57px;max-height:calc(100vh - 57px);overflow-y:auto;overscroll-behavior:contain}
.unitat__panell>*{flex:0 0 auto}

/* ---- capçalera de la unitat ----------------------------------------- */
.aula-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--superficie);border:1px solid var(--vora);border-radius:var(--r-contenidor);
  padding:18px 22px}
.aula-cap__qui{min-width:0;display:flex;flex-direction:column;gap:5px}
.aula-cap h1{font-size:26px;line-height:1.15;margin:0}
.aula-cap .meta{margin:0}
.aula-cap__classes a{color:var(--tinta-3)}
.aula-cap__eines{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aula-cap .seg{flex-wrap:nowrap}
.unitat__panell .seg{flex-wrap:wrap}
.unitat__panell .seg>*{flex:1 1 auto;min-width:0;text-align:center;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:#efece5;gap:2px}
.seg>*{padding:7px 13px;border-radius:8px;font:400 13px/1 var(--sans);color:var(--tinta-3);
  cursor:pointer;text-decoration:none;border:0;background:none;white-space:nowrap}
.seg>*:hover{text-decoration:none;color:var(--tinta)}
.seg>[aria-selected="true"]{background:var(--superficie);color:var(--tinta);font-weight:500;
  box-shadow:0 1px 2px rgba(20,18,15,.08)}
.seg--ple{display:flex}
.seg--ple>*{flex:1;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:0 15px;border:1px solid var(--vora-forta);border-radius:var(--r-control);
  background:var(--superficie);color:var(--tinta);font:500 13.5px/1 var(--sans);
  cursor:pointer;text-decoration:none}
.btn:hover{border-color:#b9b2a3;text-decoration:none;color:var(--tinta)}
.btn--primari{border:0;background:var(--tinta);color:var(--superficie)}
.btn--primari:hover{background:#302b23;color:var(--superficie)}
.btn--tactil{min-height:44px}
.btn--nu{border:0;background:none;color:var(--tinta-fluixa);padding:0 6px;min-height:32px}
.btn--nu:hover{color:var(--tinta)}

/* ---- barra de passos ------------------------------------------------- */
.passos-env{background:var(--superficie);border:1px solid var(--vora);
  border-radius:var(--r-contenidor);padding:14px 18px}
.passos{display:flex;gap:6px}
.passos>a{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;opacity:.85;
  text-decoration:none}
.passos>a:hover{text-decoration:none;opacity:1}
.passos>a::before{content:"";height:3px;border-radius:2px;background:#e0dbd0}
.passos>a.fet{opacity:.62}
.passos>a.fet::before{background:var(--fet)}
.passos>a.avui::before{background:var(--avui)}
.passos>a.avui b{color:var(--avui-tinta)}
.passos>a[aria-current]{flex:1.4;opacity:1}
.passos>a[aria-current]::before{background:var(--tinta)}
.passos b{font:600 11px/1 var(--sans);color:var(--tinta-fluixa)}
.passos span{font:400 12.5px/1.35 var(--sans);color:var(--tinta-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.passos>a[aria-current] span{font-weight:600;color:var(--tinta)}

/* ---- panell de descriptors ------------------------------------------ */
.desc-panell{background:var(--superficie);border:1px solid var(--vora);
  border-radius:var(--r-contenidor);padding:18px 22px 22px}
.desc-panell[hidden]{display:none}
.desc-panell__cap{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.desc-panell__cap h2{font-size:19px;margin:0}
.desc-graella{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.desc-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.desc-col__mirada{margin:0;color:var(--tinta-fluixa)}
.desc-col__text{font-size:14px;line-height:1.55;margin:0}
.desc-col .secundari{margin:0}
.nivells{display:flex;flex-direction:column;gap:1px;background:var(--vora);
  border:1px solid var(--vora);border-radius:8px;overflow:hidden;margin-top:2px}
.nivells>div{display:flex;gap:9px;padding:9px 11px;background:var(--superficie-2);
  font-size:12.5px;line-height:1.5;color:#3b3730}
.nivells>div>b{flex:0 0 11px;font:600 11px/1.5 var(--sans)}
.nivells>div:nth-child(1)>b{color:var(--nivell-a)}
.nivells>div:nth-child(2)>b{color:var(--nivell-b)}
.nivells>div:nth-child(3)>b{color:var(--nivell-c)}
.nivells>div:nth-child(4)>b{color:var(--nivell-d)}
.buit-fluix{color:var(--tinta-fluixa);font-style:italic}
.desc-col__edita{margin-top:auto;padding-top:8px}
.desc-col__edita>summary{font:500 13px/1 var(--sans);color:var(--tinta-fluixa);cursor:pointer;
  list-style:none;padding:8px 0}
.desc-col__edita>summary::-webkit-details-marker{display:none}
.desc-col__edita>summary::before{content:"＋ ";font-weight:600}
.desc-col__edita[open]>summary::before{content:"− "}
.desc-col__edita>summary:hover{color:var(--tinta)}

/* ---- cos de la sessió ------------------------------------------------ */
.sessio{display:flex;flex-direction:column;gap:16px}
.sessio__cap{display:flex;flex-direction:column;gap:7px}
.sessio__cap .retol{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-transform:none;
  letter-spacing:.02em;font-size:11.5px;color:var(--tinta-fluixa)}
.sessio__titol{font-size:28px;line-height:1.15;margin:0}
.sessio__problema{display:flex;flex-direction:column;gap:3px;margin:4px 0 0;
  border-left:2px solid var(--vora-forta);padding-left:12px}
.sessio__problema em{font-size:15px;color:var(--tinta-2)}
.etiq{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-etiqueta);
  background:var(--superficie-2);border:1px solid var(--vora);font:500 11.5px/1.6 var(--sans);
  color:var(--tinta-3)}
.etiq--avui{background:var(--avui-fons);border-color:#f0e2c4;color:var(--avui-tinta);font-weight:600}
.etiq--c1,.etiq--c2{background:#eef4f4;border-color:#dbe8e9;color:oklch(0.42 0.06 205);font-weight:600}

.fase{background:var(--superficie);border:1px solid var(--vora);border-radius:var(--r-targeta);
  overflow:hidden}
.fase__cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 18px;background:var(--superficie-2);border-bottom:1px solid var(--vora)}
.fase__cap h3{font-size:16px;margin:0}
.fases{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px;padding:6px 18px 16px}
.fases>.min{font:600 12.5px/1.6 var(--sans);color:oklch(0.5 0.06 195);padding:12px 0}
.fases>.cos{padding:12px 0;font-size:14.5px;line-height:1.6;color:var(--tinta-2);min-width:0}
.fases>.cos>p{margin:0 0 8px}
.fases>.cos>p:last-child{margin-bottom:0}
.fases>.cos ul,.fases>.cos ol{margin:6px 0;padding-left:20px}
.fases>.cos li{margin-bottom:4px}
.fases>.cos table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.fases>.cos th,.fases>.cos td{border:1px solid var(--vora);padding:5px 8px;text-align:left}
.fases>.cos th{background:var(--superficie-2);font-weight:600}
.fases__titol{font:600 14.5px/1.4 var(--sans);color:var(--tinta);margin:0 0 5px}
.fases>*:nth-child(n+3){border-top:1px solid #ece7dd}
.fase__lliure{padding:14px 18px;font-size:14.5px;line-height:1.6;color:var(--tinta-2)}
.fase__lliure p:last-child{margin-bottom:0}
.fase--observa .fase__cap{background:#eef4f4;border-color:#dbe8e9}
.buit-fitxa{text-align:left}
.sessio__registre{margin:0}
.sessio__edita>summary{font:500 13.5px/1 var(--sans);cursor:pointer;padding:4px 0}
.aula-nav{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.aula-nav .btn{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  line-height:38px;padding:0 14px}

/* ---- vista de tota la unitat ---------------------------------------- */
.tota{display:flex;flex-direction:column;gap:12px}
.tota__sessio{background:var(--superficie);border:1px solid var(--vora);
  border-radius:var(--r-targeta);padding:14px 18px}
.tota__cap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tota__cap h3{font-size:16px;margin:0;flex:1;min-width:200px}
.tota__cap h3 a{color:var(--tinta)}
.tota__crits{display:flex;gap:5px;flex-wrap:wrap}
.tota__fases{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.tota__fases li{font-size:13px;color:var(--tinta-3);padding-left:12px;border-left:2px solid var(--vora)}
.tota__fases b{color:var(--tinta-2)}

/* ---- panell dret ----------------------------------------------------- */
.panell-bloc{display:flex;flex-direction:column;gap:10px}
.panell-bloc .retol{margin:0}
.observa{background:var(--superficie);border:1px solid var(--vora);border-radius:10px;
  padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.observa__cap{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;
  font-size:13px}
.observa__nivells{font-size:12px;color:var(--tinta-fluixa)}
.observa .secundari{margin:0;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:5;
  -webkit-box-orient:vertical;overflow:hidden}
.observa.obert .secundari{-webkit-line-clamp:none;display:block}

.anota{position:relative}
.anota__cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  position:sticky;top:-26px;z-index:2;background:var(--superficie-3);padding:6px 0 8px;
  margin:-6px 0 -2px}
#desaAnotacions{position:sticky;bottom:-24px;z-index:2;box-shadow:0 -10px 16px -10px rgba(20,18,15,.25)}
.anota__cap .meta{margin:0}
.anota__llista{display:flex;flex-direction:column;gap:6px}
.anota__llista>*{flex:0 0 auto}
.fitxa-anota{background:var(--superficie);border:1px solid var(--vora);border-radius:10px;
  overflow:hidden;flex:0 0 auto}
.fitxa-anota__cap{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  background:none;border:0;cursor:pointer;text-align:left;min-height:48px}
.fitxa-anota__cap:hover{background:var(--superficie-2)}
.fitxa-anota__qui{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.fitxa-anota__qui b{font:600 13.5px/1.3 var(--sans);color:var(--tinta);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fitxa-anota__qui small{font-size:11.5px;color:var(--tinta-fluixa)}
.fitxa-anota.est-cap .fitxa-anota__qui small{color:oklch(0.5 0.1 70)}
.fitxa-anota.est-ara .fitxa-anota__qui small{color:oklch(0.5 0.07 175)}
.fitxa-anota__accio{font:500 11.5px/1 var(--sans);color:var(--tinta-fluixa);flex:0 0 auto}
.fitxa-anota__cos{padding:0 10px 10px;display:flex;flex-direction:column;gap:8px}
.fitxa-anota__cos[hidden]{display:none}
.fitxa-anota__cos textarea{width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--vora);
  border-radius:var(--r-control);background:var(--fons);font:400 13.5px/1.5 var(--sans);
  color:var(--tinta);resize:vertical}
.fitxa-anota__estat{margin:0;font-size:11.5px;color:oklch(0.5 0.07 175);min-height:14px}
.valoracio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.valoracio button{height:44px;border-radius:var(--r-control);font:500 13px/1 var(--sans);cursor:pointer}
.valoracio .be{border:1px solid #cfe4e6;background:#eef6f7;color:oklch(0.42 0.07 200)}
.valoracio .normal{border:1px solid #e3ded3;background:var(--fons);color:var(--tinta-3)}
.valoracio .atencio{border:1px solid #f0d9d9;background:#fbeeee;color:oklch(0.5 0.11 20)}
.valoracio button[aria-pressed="true"]{outline:2px solid var(--tinta);outline-offset:1px}
.unitat__panell .avatar{width:32px;height:32px;font-size:12px;flex:0 0 32px}

.barra-inferior{display:none}

/* ---- responsive ------------------------------------------------------ */
@media(max-width:1180px){
  .unitat{grid-template-columns:minmax(0,1fr)}
  .unitat__panell{border-left:0;border-top:1px solid var(--vora);position:static;max-height:none;
    overflow:visible}
  .desc-graella{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .desc-graella{grid-template-columns:1fr}
  .unitat__cos{padding:20px 16px 32px}
}
@media(max-width:760px){
  .aula-cap{padding:14px 16px}
  .aula-cap h1{font-size:22px}
  .aula-cap__eines{width:100%;flex-direction:column;align-items:stretch;gap:8px}
  .aula-cap__eines .seg{display:flex;width:100%}
  .aula-cap__eines .seg>*{flex:1;min-width:0;text-align:center}
  .aula-cap__eines .btn{width:100%}
  .passos-env{padding:12px 14px}
  .passos{overflow-x:auto;gap:8px}
  .passos>a{flex:0 0 34px}
  .passos>a[aria-current]{flex:0 0 34px}
  .passos b{text-align:center}
  .passos span{display:none}
  .sessio__titol{font-size:22px}
  .fases{grid-template-columns:minmax(0,1fr);gap:0;padding:12px 14px}
  .fases>.min{padding:12px 0 0}
  .fases>.cos{padding:4px 0 12px}
  .fases>*:nth-child(n+3){border-top:0}
  .fases>.min:nth-child(n+3){border-top:1px solid #ece7dd;padding-top:12px}
  .aula-nav{flex-direction:column}
  .aula-nav .btn{max-width:none}
  .unitat__panell{padding-bottom:24px}
  main.ple{padding-bottom:96px}
  .anota__llista{max-height:none}
  .barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:10px;
    padding:12px 16px 16px;background:var(--superficie);border-top:1px solid var(--vora);
    box-shadow:0 -8px 20px -14px rgba(20,18,15,.4)}
  .barra-inferior .btn{flex:1;min-height:48px}
  .valoracio button{height:48px}
}

/* ---- cerca dins d'una targeta --------------------------------------- */
.cerca{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 16px}
.cerca .retol{flex:0 0 auto;margin:0}
.cerca input[type=search]{flex:1;min-width:0;height:40px;margin:0;padding:0 12px;
  border:1px solid var(--vora);border-radius:var(--r-control);background:var(--fons);
  font:400 14.5px/1 var(--sans);color:var(--tinta)}
.cerca input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px}
.cerca .btn{flex:0 0 auto}
@media(max-width:600px){
  .cerca{flex-wrap:wrap}
  .cerca input[type=search]{flex:1 1 100%;order:2}
  .cerca .btn{order:3}
}
/* avatar d'inicials a les llistes */
.llista .fila>.avatar{width:32px;height:32px;flex:0 0 32px;font-size:12px}

/* ---- pestanyes com a segmented -------------------------------------- */
.pestanyes{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:0;border-bottom:0;
  background:#efece5;border-radius:10px;margin:0 0 20px;max-width:100%;overflow-x:auto}
.pestanya{padding:7px 13px;border:0;border-radius:8px;font:400 13.5px/1 var(--sans);
  color:var(--tinta-3);text-decoration:none;white-space:nowrap}
.pestanya:hover{background:rgba(255,255,255,.55);color:var(--tinta);text-decoration:none;border:0}
.pestanya--activa{background:var(--superficie);color:var(--tinta);font-weight:500;border:0;
  box-shadow:0 1px 2px rgba(20,18,15,.08)}

/* ---- fitxa d'alumne: valoració a un toc ------------------------------ */
.fitxa-alumne__val{margin-top:10px}
.fitxa-alumne__val button{height:44px}
.fitxa-alumne__val button:disabled{opacity:.55}

/* ---- retocs de tipografia de llistes -------------------------------- */
h1 .fila__s,h2 .fila__s{display:inline;font:400 16px/1 var(--sans);color:var(--tinta-fluixa)}
.llista .fila__s{font-size:12px;color:var(--tinta-fluixa)}
.llista .fila__t{font-weight:600}
.punt--ok{background:var(--fet)}
.punt--antic{background:var(--avui)}
.punt--alerta{background:var(--nivell-d)}
.punt--cap{background:var(--pendent)}

/* ---- camps de formulari: tots a la mateixa alçada -------------------- */
input[type=text],input[type=search],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=email],input[type=url],input[type=tel],select{
  height:40px;min-height:40px;padding:0 12px;border:1px solid var(--vora);
  border-radius:var(--r-control);background:var(--superficie);font:400 14px/1 var(--sans);
  color:var(--tinta-2);width:100%}
select{padding-right:34px}
textarea{min-height:80px;padding:10px 12px;border:1px solid var(--vora);
  border-radius:var(--r-control);background:var(--superficie);font:400 14px/1.55 var(--sans);
  color:var(--tinta-2);width:100%}
details.targeta>summary::before{content:"▸";transform:none;transition:none}
details.targeta[open]>summary::before{content:"▾";transform:none}

/* ---- acció secundària dins d'una fila de llista ---------------------- */
.btn--petit{min-height:32px;padding:0 11px;font-size:12.5px}
a.fila__accio{color:var(--tinta-fluixa);background:transparent;border-color:transparent;
  white-space:nowrap;font-weight:400}
li:hover>a.fila__accio,a.fila__accio:focus-visible{color:var(--tinta);background:var(--superficie);
  border-color:var(--vora-forta)}
a.fila__accio:hover{color:var(--tinta);border-color:#b9b2a3;text-decoration:none;
  background:var(--superficie)}
li:has(.fila__accio) .fila{padding-right:170px}
@media(max-width:600px){
  li:has(.fila__accio) .fila{padding-right:18px;padding-bottom:46px}
  .fila__accio{top:auto;bottom:10px;right:18px;transform:none}
}

/* ---- cap llista dins d'una columna flexible s'ha d'aixafar ----------- */
.panell__cos>*,.assist-llista>*,.mosaic>*{flex-shrink:0}
.panell{overscroll-behavior:contain}

/* ---- panell ràpid d'observació: mateixa capa que la resta ------------ */
.panell{border-radius:var(--r-contenidor);background:var(--superficie);box-shadow:var(--ombra-flotant)}
.panell__cap{border-bottom:1px solid var(--vora);padding:14px 18px}
.panell__cap h2{font-family:var(--serif);font-size:19px}
.panell__cos{padding:18px;gap:18px}
.panell .retol{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-fluixa)}
.humor{gap:6px}
.humor span{height:56px;border-radius:var(--r-control);border:1px solid var(--vora-forta);
  background:var(--superficie)}
.humor__be span{background:#eef6f7;border-color:#cfe4e6;color:oklch(0.42 0.07 200)}
.humor__neutre span{background:var(--fons);border-color:#e3ded3;color:var(--tinta-3)}
.humor__atencio span{background:#fbeeee;border-color:#f0d9d9;color:oklch(0.5 0.11 20)}
.humor input:checked+span{border-color:transparent;outline:2px solid var(--tinta);outline-offset:1px}
.xips{display:flex;flex-wrap:wrap;gap:6px}
.xip{margin:0;position:relative;text-transform:none;letter-spacing:0}
.xip input{position:absolute;opacity:0;width:0;height:0}
.xip span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;cursor:pointer;
  border:1px solid var(--vora);border-radius:999px;background:var(--superficie);
  font:400 13px/1 var(--sans);color:var(--tinta-3)}
.xip span:hover{border-color:var(--vora-forta);color:var(--tinta)}
.xip input:checked+span{background:var(--tinta);border-color:var(--tinta);color:var(--superficie);
  font-weight:500}
.xip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ---- entrada i alta de compte ---------------------------------------- */
.entrada{max-width:440px;margin:0 auto;padding:8vh 20px 60px;display:flex;
  flex-direction:column;gap:14px}
.entrada__marca{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--tinta);
  margin-bottom:6px}
.entrada__marca span{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em}
.entrada .targeta{margin:0;padding:22px}
.entrada h1{font-size:23px;margin:0 0 6px}
.entrada .secundari{margin:0}
.entrada__peu{text-align:center;font-size:13px;color:var(--tinta-fluixa);margin:0}
.entrada__peu--nota{margin-top:8px;line-height:1.6}
.peu__versio{display:inline-block;margin-left:10px;color:var(--tinta-fluixa);font-size:12.5px;
  white-space:nowrap}

/* ---- usuaris i codi d'invitació -------------------------------------- */
.alta-estat{display:flex;align-items:center;gap:12px;margin-top:14px}
.codi-gran{font:600 26px/1.2 var(--sans);letter-spacing:.16em;color:var(--tinta);margin:0;
  padding:12px 16px;border:1px dashed var(--vora-forta);border-radius:var(--r-control);
  background:var(--superficie-2);display:inline-block}
.copiar{display:flex;gap:8px;align-items:center}
.copiar input{flex:1;min-width:0;font-size:13px;color:var(--tinta-3)}
.copiar .btn{flex:0 0 auto}

.usuari{padding:0}
.usuari--inactiu{opacity:.6}
.usuari__fila{display:flex;align-items:center;gap:12px;padding:12px 18px}
.usuari__qui{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.usuari__qui b{font:600 15px/1.35 var(--sans);color:var(--tinta)}
.usuari__qui .etiq{margin-left:6px;font-weight:500}
.usuari__qui small{font-size:12.5px;color:var(--tinta-fluixa)}
.usuari__accions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.usuari__accions form{margin:0}
.usuari__accions select{width:auto;min-width:150px}
.usuari__mes{padding:0 18px 12px}
.usuari__mes>summary{font:500 12.5px/1 var(--sans);color:var(--tinta-fluixa);cursor:pointer;
  list-style:none;padding:4px 0}
.usuari__mes>summary::-webkit-details-marker{display:none}
.usuari__mes>summary::before{content:"▸ "}
.usuari__mes[open]>summary::before{content:"▾ "}
.usuari__mes>summary:hover{color:var(--tinta)}
.usuari__form{margin-top:10px;padding:12px 14px;border:1px solid var(--vora);
  border-radius:var(--r-targeta);background:var(--superficie-2)}
.usuari__form .camp{margin-bottom:10px}
.usuari__form .ajuda{margin:0 0 10px}
.btn--perill{border-color:#e9c9c9;background:#fbeeee;color:oklch(0.45 0.13 22)}
.btn--perill:hover{border-color:#d9a9a9;background:#f8e2e2;color:oklch(0.4 0.15 22)}
@media(max-width:700px){
  .usuari__fila{flex-wrap:wrap}
  .usuari__accions{width:100%}
  .usuari__accions select{flex:1;min-width:0}
  .codi-gran{font-size:22px;letter-spacing:.12em}
  .copiar{flex-wrap:wrap}
  .copiar input{flex:1 1 100%}
}

/* =====================================================================
   CASELLES I BOTONS RODONS
   El full de base porta «input, select, textarea { min-height:40px }», que
   estirava les caselles de verificació a 13×40 px i en deixava la creu
   tallada. Aquí es dibuixen de nou, amb la mateixa paleta que la resta.
   ===================================================================== */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;min-height:0;min-width:19px;flex:0 0 19px;margin:0;padding:0;
  border:1.5px solid var(--vora-forta);background:var(--superficie);
  border-radius:5px;cursor:pointer;display:inline-grid;place-content:center;
  vertical-align:-4px;transition:background .1s ease,border-color .1s ease}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--tinta-fluixa)}
input[type=checkbox]::before{
  content:"";width:11px;height:11px;transform:scale(0);transition:transform .1s ease;
  background:var(--superficie);
  clip-path:polygon(14% 47%,0 61%,40% 100%,100% 22%,85% 8%,38% 71%)}
input[type=radio]::before{
  content:"";width:8px;height:8px;border-radius:50%;transform:scale(0);
  transition:transform .1s ease;background:var(--superficie)}
input[type=checkbox]:checked,input[type=radio]:checked{
  background:var(--tinta);border-color:var(--tinta)}
input[type=checkbox]:checked::before,input[type=radio]:checked::before{transform:scale(1)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.check{display:inline-flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:14.5px;color:var(--tinta-2);cursor:pointer;line-height:1.35}
.check input{width:19px;min-height:19px}

/* botó rodó per treure una fila (abans, una «×» de 13 px dins d'una caixa de 34) */
.boto--creu,.btn--creu{width:34px;min-width:34px;height:34px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--vora);background:var(--superficie);color:var(--tinta-fluixa);cursor:pointer}
.boto--creu:hover,.btn--creu:hover{border-color:#e0c3c3;background:#fbeeee;
  color:oklch(0.5 0.13 22)}
.boto--creu svg,.btn--creu svg{display:block}

/* Els controls que es dibuixen com a botons continuen amagant el seu input.
   Va després de tot perquè guanyi al bloc de dalt. */
.seg-opt input[type=radio],.seg-opt input[type=checkbox],
.humor input[type=radio],.xip input[type=radio],.xip input[type=checkbox],
.assist-op input[type=radio]{
  position:absolute;opacity:0;width:0;height:0;min-width:0;flex:none;
  border:0;padding:0;margin:0;appearance:none;-webkit-appearance:none;pointer-events:none}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:2px}

/* targeta que fa de radio (tria de proveïdor d'IA) */
.targeta--tria{margin:0;padding:13px 15px;cursor:pointer;display:block}
.targeta--tria:hover{border-color:var(--vora-forta)}
.targeta--tria-actiu{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
/* «.check» dins d'un .camp no és un rètol de camp: ni majúscules ni espaiat */
.camp>label.check,.camp label.check{font:400 14.5px/1.35 var(--sans);letter-spacing:0;
  text-transform:none;color:var(--tinta-2);display:inline-flex;align-items:center;gap:9px;
  margin-bottom:0}
.camp>label.targeta--tria{text-transform:none;letter-spacing:0;font-weight:400;font-size:14.5px;
  color:var(--tinta-2);margin-bottom:0}
.targeta--tria strong{font:600 14.5px/1.3 var(--sans);color:var(--tinta)}

/* =====================================================================
   AVALUACIÓ — situar l'alumne a la rúbrica
   ===================================================================== */
.criteri{padding:18px 20px}
.criteri__cap{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:12px}
.criteri__cap .retol{margin:0 0 4px}
.criteri__frase{margin:0;font-size:14px;line-height:1.5;color:var(--tinta-3);max-width:80ch}

.tria-nivell{display:flex;flex-direction:column;gap:1px;background:var(--vora);
  border:1px solid var(--vora);border-radius:var(--r-targeta);overflow:hidden}
.tria-nivell__op{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:0 12px;
  padding:11px 14px;background:var(--superficie);cursor:pointer;margin:0;
  text-transform:none;letter-spacing:0;font-weight:400;position:relative;
  transition:background .1s ease}
.tria-nivell__op:hover{background:var(--superficie-2)}
.tria-nivell__op input{position:absolute;opacity:0;width:0;height:0;min-width:0;border:0;
  padding:0;margin:0;appearance:none;-webkit-appearance:none}
.tria-nivell__op b{font:600 13px/1.5 var(--sans);text-align:center}
.tria-nivell__op span{font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.tria-nivell__op:nth-child(1) b{color:var(--nivell-a)}
.tria-nivell__op:nth-child(2) b{color:var(--nivell-b)}
.tria-nivell__op:nth-child(3) b{color:var(--nivell-c)}
.tria-nivell__op:nth-child(4) b{color:var(--nivell-d)}
.tria-nivell__op--se b{color:var(--tinta-fluixa)}
.tria-nivell__op--se span{color:var(--tinta-3)}
.tria-nivell__op.es-tria{background:var(--tinta);}
.tria-nivell__op.es-tria b,.tria-nivell__op.es-tria span{color:var(--superficie)}
.tria-nivell__op.es-tria::after{content:"✓";position:absolute;right:14px;top:11px;
  font:600 13px/1.5 var(--sans);color:var(--superficie)}
.tria-nivell__op.es-tria span{padding-right:26px}
.tria-nivell__op:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

.criteri__peu{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:14px}
.criteri__just{flex:1 1 320px;margin:0}
.criteri__ev{flex:1 1 300px}
.criteri__ev>summary{font:500 13px/1.4 var(--sans);color:var(--tinta-fluixa);cursor:pointer;
  list-style:none;padding:6px 0}
.criteri__ev>summary::-webkit-details-marker{display:none}
.criteri__ev>summary::before{content:"▸ "}
.criteri__ev[open]>summary::before{content:"▾ "}
.criteri__ev>summary:hover{color:var(--tinta)}
.criteri__ev-tit{margin:10px 0 6px}
.criteri__ev-llista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.criteri__ev-llista li{font-size:13px;line-height:1.5;color:var(--tinta-2);
  padding-left:11px;border-left:2px solid var(--vora-forta)}
.criteri__ev-llista li.est-ok{border-left-color:var(--fet)}
.criteri__ev-llista li.est-alerta{border-left-color:var(--nivell-d)}
.criteri__ev-llista li.est-antic{border-left-color:var(--avui)}
.criteri__ev-llista .meta{display:block}

.nota{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;
  padding:0 8px;border-radius:var(--r-etiqueta);font:600 13px/1 var(--sans);border:1px solid transparent}
.nota--A{background:#e8f2ee;color:var(--nivell-a);border-color:#d3e6df}
.nota--B{background:#e9f2f3;color:var(--nivell-b);border-color:#d5e7e9}
.nota--C{background:var(--avui-fons);color:var(--avui-tinta);border-color:#f0e2c4}
.nota--D{background:#fbeeee;color:var(--nivell-d);border-color:#f0d9d9}
.nota--SE{background:var(--superficie-2);color:var(--tinta-fluixa);border-color:var(--vora)}

@media(max-width:700px){
  .criteri{padding:14px 16px}
  .criteri__peu{flex-direction:column;gap:8px}
  .criteri__just,.criteri__ev{flex:1 1 auto;width:100%}
}

/* Marca de final de fitxer — vegeu estil.css */
/* FI:pantalles */