/* CAPA GAMIFICAND · components. Es carrega després d'estil.css.
   Continua a pantalles.css. */
/* =====================================================================
   CAPA GAMIFICAND (agost 2026)
   ---------------------------------------------------------------------
   Aplica el sistema visual del traspàs de disseny a totes les pantalles.
   Els tokens i les classes base viuen a assets/base.css, que es carrega
   abans que aquest fitxer; aquí només s'hi mapen els components que ja
   existien a l'aplicació. Aquest bloc va al final expressament:
   sobreescriu tot el que hi ha a dalt.
   ===================================================================== */

/* ---- Tokens antics redirigits als nous, perquè res quedi despenjat --- */
:root{
  --color-bg:var(--fons);
  --color-surface:var(--superficie);
  --color-text:var(--tinta);
  --color-divider:var(--vora);
  --color-vora:var(--vora);
  --color-suau:var(--superficie-2);
  --color-mut:var(--tinta-fluixa);
  --color-accent:var(--accent);
  --color-accent-fort:var(--accent-fosc);
  --color-neutral-100:#fbfaf6; --color-neutral-200:#efece5; --color-neutral-300:var(--vora);
  --color-neutral-400:var(--vora-forta); --color-neutral-500:#a7a094; --color-neutral-600:var(--tinta-fluixa);
  --color-neutral-700:var(--tinta-3); --color-neutral-800:var(--tinta-2); --color-neutral-900:var(--tinta);
  --color-accent-100:#eef4f4; --color-accent-200:#dbe8e9; --color-accent-700:var(--accent-fosc);
  --color-accent-800:var(--accent-fosc);
  --color-accent-2:var(--nivell-d); --color-accent-2-700:var(--nivell-d);
  --groc-fons:var(--avui-fons); --groc-tinta:var(--avui-tinta); --groc-fons-clar:#fdf9ee;
  --color-process-yellow:var(--avui);
  --font-heading:var(--serif); --font-body:var(--sans);
  --radius-sm:var(--r-control); --radius-md:var(--r-targeta); --radius-lg:var(--r-contenidor);
  --shadow-sm:0 1px 2px rgba(20,18,15,.05);
  --shadow-md:var(--ombra-flotant);
  --shadow-lg:0 20px 50px -20px rgba(20,18,15,.35);
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:20px; --space-6:26px; --space-8:34px;
}

body{font:400 15px/1.6 var(--sans);background:var(--fons);color:var(--tinta)}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--tinta)}
h1{font-size:30px;line-height:1.1;margin:0 0 10px}
h2{font-size:24px;line-height:1.15;margin:34px 0 12px}
h3{font-size:19px;line-height:1.2;margin:22px 0 10px}
h4,h5,h6{font-size:16px;line-height:1.3}
p{margin:0 0 10px;color:var(--tinta-2)}
a{color:var(--accent)} a:hover{color:var(--accent-fosc)}
small,.fila__s,.ajuda{font-size:13px}
.ajuda{color:var(--tinta-fluixa);font-style:normal}
.molla{font-size:12.5px;color:var(--tinta-fluixa)}
.molla a{color:var(--tinta-fluixa)}
.contenidor{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:900px){.contenidor{padding:0 28px}}
main{padding:26px 0 40px}

/* ---- Barra superior fosca ------------------------------------------- */
.barra-sup{position:sticky;top:0;z-index:30}
.barra-sup .marca{display:flex;align-items:center;gap:10px;color:#f6f4ef;text-decoration:none}
.barra-sup .marca:hover{text-decoration:none;color:#fff}
.marca__text{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em}
.barra-sup .nav{display:flex;gap:2px;font-size:13.5px;flex-wrap:wrap;margin-left:auto}
.barra-sup .nav a{padding:7px 12px;border-radius:8px;color:#b8b2a5;text-decoration:none;
  font-weight:400;border:0;line-height:1.3}
.barra-sup .nav a:hover{color:#f6f4ef;background:#2f2a22;text-decoration:none}
.barra-sup .nav a[aria-current]{background:#f6f4ef;color:var(--tinta);font-weight:500}
.nav__comptador{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--nivell-d);color:#fff;font-size:11px;font-weight:600}
.nav__jo{display:flex;align-items:center;gap:8px;color:#b8b2a5;text-decoration:none;font-size:13.5px;
  padding-left:14px;margin-left:10px;border-left:1px solid #34302a}
.nav__jo:hover{color:#f6f4ef;text-decoration:none}
.barra-sup .avatar{width:28px;height:28px;font-size:11px;background:#3b352c;color:#e8e3d8}
.menu-boto{display:none;background:none;border:0;color:#f6f4ef;cursor:pointer;padding:4px 6px}

/* ---- Superfícies ----------------------------------------------------- */
.targeta,.card,.classe-fitxa,.fitxa-alumne,.comentari,.grup,.ia,.panell{
  background:var(--superficie);border:1px solid var(--vora);border-radius:var(--r-targeta);box-shadow:none}
.targeta{padding:18px;margin-bottom:14px}
.targeta--net{padding:0;overflow:hidden}
.targeta--paper{background:var(--superficie-2)}
details.targeta{padding:14px 18px}
details.targeta>summary{cursor:pointer;font-weight:600;list-style:none;padding:2px 0;color:var(--tinta)}
details.targeta>summary::-webkit-details-marker{display:none}
details.targeta>summary::before{content:"›";display:inline-block;margin-right:9px;color:var(--tinta-fluixa);
  transform:rotate(90deg);transition:transform .15s ease}
details.targeta[open]>summary::before{transform:rotate(-90deg)}

/* ---- Botons ---------------------------------------------------------- */
.boto{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;
  border-radius:var(--r-control);font:500 14px/1 var(--sans);cursor:pointer;
  border:0;background:var(--tinta);color:var(--superficie);text-decoration:none;
  transition:background .12s ease}
.boto:hover{background:#302b23;color:var(--superficie);text-decoration:none}
.boto--secundari{background:var(--superficie);color:#3b3730;border:1px solid var(--vora-forta)}
.boto--secundari:hover{background:var(--superficie);border-color:#b9b2a3;color:#3b3730}
.boto--fantasma{background:transparent;border:1px solid transparent;color:var(--accent-fosc)}
.boto--fantasma:hover{background:var(--superficie-2);color:var(--accent-fosc)}
.boto--perill{background:oklch(0.52 0.16 22);color:#fff;border:0}
.boto--perill:hover{background:oklch(0.45 0.16 22)}
.boto--petit{height:34px;padding:0 12px;font-size:13px}
.boto--ample{width:100%}
.boto[disabled]{opacity:.5;cursor:not-allowed}
.botons{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- Formularis ------------------------------------------------------ */
.camp{margin-bottom:14px}
.camp>label{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-fluixa);display:block;margin-bottom:6px}
label{font-family:var(--sans)}
input[type=text],input[type=search],input[type=password],input[type=date],input[type=number],
input[type=email],select,textarea{min-height:40px;padding:10px 12px;border:1px solid #ddd8cc;
  border-radius:var(--r-control);background:var(--superficie);font:400 14px/1.5 var(--sans);
  color:var(--tinta-2);width:100%}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:oklch(0.62 0.07 200);
  box-shadow:0 0 0 3px oklch(0.62 0.07 200 / .16)}
input::placeholder,textarea::placeholder{color:#b3ada0}
.check{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;
  font-size:14.5px;font-weight:400;color:var(--tinta-2)}
.check input{width:auto;min-height:0}

/* ---- Files de llista ------------------------------------------------- */
.llista{list-style:none;margin:0;padding:0}
.llista>li{border-bottom:1px solid var(--vora);position:relative}
.llista>li:last-child{border-bottom:none}
.fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;
  color:inherit;text-decoration:none;transition:background .1s ease}
.fila:hover{background:var(--superficie-2);text-decoration:none;color:inherit}
.fila::after{content:"›";color:var(--vora-forta);font-size:19px;line-height:1;margin-left:8px;
  transition:transform .12s ease,color .12s ease}
.fila:hover::after{color:var(--accent);transform:translateX(2px)}
.fila__t{display:block;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--tinta)}
.fila__s{display:block;color:var(--tinta-fluixa);font-size:12.5px;margin-top:1px}
.fila__d{display:flex;align-items:center;gap:6px;margin-left:auto}
.fila__accio{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
li:has(.fila__accio) .fila{padding-right:130px}
li:has(.fila__accio) .fila::after{content:none}

/* ---- Etiquetes ------------------------------------------------------- */
.etiqueta{display:inline-flex;align-items:center;padding:4px 9px;border-radius:var(--r-etiqueta);
  background:#efece5;color:var(--tinta-3);font:500 11px/1.4 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;border:0}
.etiqueta--ok,.etiqueta--info{background:#eef4f4;color:oklch(0.42 0.06 205);font-weight:600}
.etiqueta--atencio{background:var(--avui-fons);color:var(--avui-tinta);font-weight:600}
.etiqueta--urgent{background:#fbeeee;color:oklch(0.5 0.11 20);font-weight:600}
.etiqueta--contorn{background:transparent;border:1px solid var(--vora);color:var(--tinta-fluixa)}

/* ---- Avisos ---------------------------------------------------------- */
.avis{border-radius:var(--r-targeta);padding:12px 16px;margin-bottom:14px;
  border:1px solid var(--vora);background:var(--superficie);border-left:3px solid var(--vora-forta);
  font-size:14.5px;color:var(--tinta-2)}
.avis--ok{border-left-color:var(--fet);background:#f1f6f6;border-color:#dbe8e9}
.avis--info{border-left-color:var(--tinta-fluixa)}
.avis--atencio{border-left-color:var(--avui);background:var(--avui-fons);border-color:#f0e2c4}
.avis--error{border-left-color:oklch(0.55 0.15 22);background:#fbeeee;border-color:#f0d9d9}

/* ---- Pestanyes ------------------------------------------------------- */
.pestanyes{display:flex;gap:4px;border-bottom:1px solid var(--vora);margin-bottom:20px;flex-wrap:wrap}
.pestanya{font:500 14px/1 var(--sans);color:var(--tinta-fluixa);padding:10px 14px;border:0;
  background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.pestanya:hover{color:var(--tinta);background:var(--superficie-2);text-decoration:none}
.pestanya--activa{color:var(--tinta);border-bottom-color:var(--tinta);font-weight:600}

/* ---- Segmentat ------------------------------------------------------- */
.seg{display:inline-flex;padding:3px;border-radius:10px;background:#efece5;gap:2px;border:0;flex-wrap:wrap}
.seg-opt{padding:7px 13px;border-radius:8px;font:400 13px/1 var(--sans);color:var(--tinta-3);
  cursor:pointer;border:0;background:transparent;text-transform:none;letter-spacing:0}
.seg-opt+.seg-opt{border-left:0}
.seg-opt:has(input:checked),.seg-opt.actiu{background:var(--superficie);color:var(--tinta);font-weight:500;
  box-shadow:0 1px 2px rgba(20,18,15,.08)}
.seg-opt:not(:has(input:checked)):hover{background:rgba(255,255,255,.55);color:var(--tinta)}

/* ---- Taules ---------------------------------------------------------- */
table{font-size:14.5px;border-collapse:collapse;width:100%}
th{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-fluixa);
  padding:12px 10px;border-bottom:1px solid var(--vora);text-align:left}
td{padding:12px 10px;border-bottom:1px solid #ece7dd;color:var(--tinta-2)}
tbody tr:hover{background:var(--superficie-2)}

/* ---- Estats buits ---------------------------------------------------- */
.buit{color:var(--tinta-fluixa);font-style:normal;background:var(--superficie-2);
  border:1px dashed var(--vora);border-radius:var(--r-targeta);padding:20px;text-align:center;font-size:14.5px}

/* ---- Xifres ---------------------------------------------------------- */
.xifres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.xifres>div{background:var(--superficie);border:1px solid var(--vora);border-radius:var(--r-targeta);
  padding:16px 18px}
.xifra__n,.estad__n{font-family:var(--serif);font-weight:700;font-size:36px;line-height:1.05;
  color:var(--tinta);text-shadow:none;letter-spacing:-.02em}
.xifra__t,.estad__t{font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-fluixa);margin-top:6px}
.xifra--alerta .xifra__n{color:oklch(0.5 0.13 22)}
.xifra--alerta .xifra__t{color:oklch(0.5 0.13 22)}

/* ---- Avatars i noms -------------------------------------------------- */
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:600 11.5px/1 var(--sans);background:#e4e9ef;color:#4a5560;flex-shrink:0}
.avatar.mini{width:26px;height:26px;font-size:10px}
.avatar.gran{width:52px;height:52px;font-size:17px}
.fitxa-alumne__nom,.atencio-fila__nom{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}

/* ---- Zona delicada --------------------------------------------------- */
.perill{border-color:#eddada}
.perill h3{color:oklch(0.48 0.13 22)}
.perill__acte{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-top:1px solid var(--vora)}
.perill__acte>div>strong{display:block;font-size:15px;margin-bottom:2px}
.perill__acte .ajuda{margin:0;max-width:64ch}
.perill__form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.perill__form select,.perill__form input[type=text]{width:auto;min-width:180px}
.perill__final{margin-top:14px;border-top:1px solid var(--vora);padding-top:14px}
.perill__final>summary{cursor:pointer;font-weight:600;color:oklch(0.48 0.13 22);font-size:14.5px;
  list-style:none;padding:2px 0}
.perill__final>summary::-webkit-details-marker{display:none}
.perill__final>summary::before{content:"›";display:inline-block;margin-right:8px;transform:rotate(90deg);
  transition:transform .15s ease}
.perill__final[open]>summary::before{transform:rotate(-90deg)}
.perill__compte{background:#fbeeee;border:1px solid #f0d9d9;border-radius:var(--r-control);
  padding:11px 14px;font-size:14.5px;color:var(--tinta-2)}

/* ---- Mòbil ----------------------------------------------------------- */
@media(max-width:900px){
  .menu-boto{display:block}
  .barra-sup{flex-wrap:wrap;gap:12px}
  .barra-sup .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:4px;
    order:3;margin-left:0}
  .barra-sup .nav.obert{display:flex}
  .nav__jo{margin-left:auto;border-left:0;padding-left:0}
  .nav__jo-nom{display:none}
  h1{font-size:24px} h2{font-size:20px}
  .perill__acte{grid-template-columns:1fr}
  .perill__form select,.perill__form input[type=text]{width:100%;min-width:0}
}

/* ---- Assistència ------------------------------------------------------ */
.assist-barra{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.assist-barra__data{display:flex;align-items:flex-end;gap:10px}
.assist-barra__data input[type=date]{width:auto}
.assist-barra__dreta{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}

.assist-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.assist-cap__sessio{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.assist-cap__sessio select{min-width:220px;width:auto}

.assist-fila{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 18px;border-bottom:1px solid var(--vora);flex-wrap:wrap}
.assist-fila:last-child{border-bottom:0}
.assist-fila:nth-child(odd){background:var(--superficie-2)}
.assist-fila__qui{display:flex;align-items:center;gap:12px;min-width:220px;flex:1}
.assist-fila__nom{display:block;font-weight:600;font-size:15px;color:var(--tinta)}

.assist-estats{display:grid;grid-template-columns:repeat(5,96px);gap:6px;flex:0 0 auto}
.assist-op{position:relative;margin:0;text-transform:none;letter-spacing:0}
.assist-op input{position:absolute;opacity:0;width:0;height:0}
.assist-op span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;
  border-radius:var(--r-control);border:1px solid var(--vora-forta);background:var(--superficie);
  font:500 12.5px/1.25 var(--sans);color:var(--tinta-3);text-align:center;cursor:pointer;
  transition:background .1s ease,border-color .1s ease,color .1s ease}
.assist-op span:hover{border-color:#b9b2a3}
.assist-op input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.assist-op input:checked+span{outline:2px solid var(--tinta);outline-offset:1px;font-weight:600}
.assist-op span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assist-op--present input:checked+span{background:#eef6f7;border-color:#cfe4e6;color:oklch(0.42 0.07 200)}
.assist-op--absent input:checked+span{background:#fbeeee;border-color:#f0d9d9;color:oklch(0.5 0.11 20)}
.assist-op--retard input:checked+span{background:var(--avui-fons);border-color:#f0e2c4;color:var(--avui-tinta)}
.assist-op--justificada input:checked+span{background:#f1f0fa;border-color:#ddd9ef;color:oklch(0.46 0.09 285)}
.assist-op--roba input:checked+span{background:#f4f1ea;border-color:#e2dbc9;color:oklch(0.45 0.05 80)}

/* graella de consulta */
.assist-graella-env{overflow-x:auto}
.assist-graella{border-collapse:separate;border-spacing:0;font-size:13px;width:auto;min-width:100%}
.assist-graella th,.assist-graella td{border:0;padding:0}
.assist-graella thead th{position:sticky;top:0;background:var(--superficie-2);z-index:2;
  border-bottom:1px solid var(--vora);padding:8px 4px;text-align:center}
.assist-graella .col-alumne{position:sticky;left:0;background:var(--superficie);z-index:1;
  text-align:left;padding:8px 14px;min-width:190px;border-right:1px solid var(--vora);
  font-size:14px;color:var(--tinta)}
.assist-graella thead .col-alumne{background:var(--superficie-2);z-index:3}
.assist-graella tbody tr:nth-child(odd) .col-alumne{background:var(--superficie-2)}
.assist-graella tbody tr:hover td{background:#f2efe7}
.assist-graella .col-dia{width:40px;text-align:center;padding:3px 2px}
.assist-graella thead .col-dia a{display:block;color:var(--tinta-3);text-decoration:none;line-height:1.2}
.assist-graella thead .col-dia a:hover{color:var(--accent-fosc);text-decoration:none}
.assist-graella thead .col-dia b{display:block;font:600 11px/1.3 var(--sans)}
.assist-graella thead .col-dia span{display:block;font:500 9.5px/1.2 var(--sans);color:var(--tinta-fluixa)}
.assist-graella .col-total{width:64px;text-align:center;padding:6px;border-left:1px solid var(--vora);
  font-size:14px}
.assist-graella .col-total b{font-family:var(--serif);font-size:16px;color:var(--tinta-3)}
.assist-graella .col-total .faltes-moltes{color:oklch(0.5 0.13 22)}

.cel{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;font:600 11px/1 var(--sans);border:1px solid transparent}
.cel--present{background:#eef6f7;color:oklch(0.42 0.07 200);border-color:#dcebec}
.cel--absent{background:#fbeeee;color:oklch(0.5 0.11 20);border-color:#f2dddd}
.cel--retard{background:var(--avui-fons);color:var(--avui-tinta);border-color:#f2e6cd}
.cel--justificada{background:#f1f0fa;color:oklch(0.46 0.09 285);border-color:#e3dff2}
.cel--roba{background:#f4f1ea;color:oklch(0.45 0.05 80);border-color:#e6dfd0}
.cel--buida{background:transparent;color:var(--vora-forta)}

.assist-llegenda{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:var(--tinta-3)}
.assist-llegenda>span{display:flex;align-items:center;gap:7px}

@media(max-width:760px){
  .assist-estats{grid-template-columns:repeat(3,1fr);width:100%}
  .assist-fila__qui{min-width:0;width:100%}
  .assist-op span{min-height:48px}
  .assist-cap__sessio select{min-width:0;width:100%}
  .assist-barra__dreta{margin-left:0;width:100%}
  .assist-barra__dreta .boto{flex:1}
}

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