:root {
  --pine: #174f45;
  --pine-dark: #103b34;
  --mint: #dcebe5;
  --cream: #f7f4eb;
  --paper: #ffffff;
  --ink: #18332e;
  --muted: #70807c;
  --gold: #e5a933;
  --coral: #df755f;
  --border: #dfe6e2;
  --shadow: 0 18px 45px rgba(30, 66, 57, .09);
}


/* Avatars fixos: una figura completa, centrada i sense tires d'evolució */
.avatar3d{display:grid;place-items:center;width:124px;height:106px;margin:8px auto 7px;overflow:hidden;transition:transform .25s ease;transform:translateZ(0)}.avatar3d img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%;filter:hue-rotate(var(--tint,0deg)) drop-shadow(0 7px 6px rgba(22,54,45,.16));transform:none}
.student-card:hover .avatar3d{transform:translateY(-4px) scale(1.04)}
.avatar3d-small{width:82px;height:70px;margin:0;flex:0 0 82px}
.report-list{display:grid;gap:10px;margin:22px 0}.report-list>div{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid #dfe8e3;border-radius:14px;background:#fbfdfc}.report-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#dff1e6;color:#17643f;font-weight:900}.report-list b{color:#17643f}.report-empty{margin:22px 0}.clickedu-check{margin-right:auto;display:flex;align-items:center;gap:9px;font-weight:700}.week-hint{margin-right:auto;color:#68736d;font-size:.84rem;max-width:310px}.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.album-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e1e9e4;border-radius:16px;background:#fbfdfc}.album-card div{display:grid;gap:4px}.album-card small{color:#6a766f}.album-card span:last-child{font-size:1.1rem;letter-spacing:3px}
@media(max-width:700px){.avatar3d{width:112px;height:96px}.album-grid{grid-template-columns:1fr}.top-actions #open-album,.top-actions #manage-students{display:none}}

/* Fase 4 · Mode aula */
.classroom-open{overflow:hidden}.classroom-view{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 50% -20%,#def4e9 0,#f7faf8 42%,#eef4f0 100%);color:#173c30;display:grid;grid-template-rows:auto auto 1fr auto;padding:22px 28px;gap:14px}.classroom-view[hidden]{display:none}.classroom-view>header{display:flex;align-items:center;justify-content:space-between;gap:20px}.classroom-view header p{margin:0 0 3px;font-size:.76rem;font-weight:900;letter-spacing:.12em;color:#4c7465}.classroom-view header h1{margin:0;font-size:clamp(1.55rem,3vw,2.5rem)}.classroom-head-actions{display:flex;gap:10px}.classroom-head-actions button,.classroom-hint button{border:1px solid #b9cec5;background:#fff;color:#174f3c;padding:10px 15px;border-radius:999px;font-weight:800;cursor:pointer}.classroom-exit{background:#174f3c!important;color:white!important}.classroom-hint{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d5e2dc;padding:9px 12px 9px 18px;border-radius:16px;font-weight:750}.classroom-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-auto-rows:minmax(185px,1fr);gap:12px;padding:2px}.classroom-student{position:relative;border:2px solid transparent;background:rgba(255,255,255,.91);border-radius:20px;box-shadow:0 6px 24px rgba(24,70,54,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;cursor:pointer;color:#173c30;transition:.18s ease}.classroom-student:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(24,70,54,.12)}.classroom-student.chosen{border-color:#efad34;background:#fffaf0;box-shadow:0 0 0 4px rgba(239,173,52,.18)}.classroom-student .avatar3d{width:min(118px,84%);height:100px;margin:2px auto 7px}.classroom-student strong{font-size:1.05rem}.classroom-student>span:last-child{font-size:.82rem;color:#66776f}.classroom-student b{font-size:1.05rem;color:#0d6949}.classroom-awards{min-height:68px;background:#173c30;border-radius:20px;padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;overflow-x:auto;color:#dcebe5}.classroom-attitude{border:0;border-radius:14px;background:#fff;color:#184638;padding:10px 13px;font-weight:800;white-space:nowrap;cursor:pointer}.classroom-attitude span{font-size:1.15rem;margin-right:5px}.classroom-attitude b{color:#07804f}.classroom-attitude.negative{background:#fff0ed;color:#7c3429}.classroom-attitude.negative b{color:#ad3f31}.classroom-celebration{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:1002;background:#173c30;color:#fff;border:5px solid #f4bd49;border-radius:28px;padding:28px 45px;text-align:center;box-shadow:0 22px 80px rgba(12,44,34,.32);animation:classroom-pop .25s ease}.classroom-celebration strong,.classroom-celebration span{display:block}.classroom-celebration strong{font-size:1.65rem}.classroom-celebration span{margin-top:5px}@keyframes classroom-pop{from{transform:translate(-50%,-50%) scale(.75);opacity:0}}@media(max-width:700px){.classroom-view{padding:12px}.classroom-view>header{align-items:flex-start}.classroom-head-actions{flex-direction:column}.classroom-grid{grid-template-columns:repeat(2,minmax(130px,1fr));grid-auto-rows:190px}.classroom-student .avatar3d{width:106px;height:90px}.classroom-hint{font-size:.85rem}.classroom-hint button{padding:8px}.classroom-awards{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.classroom-student,.classroom-celebration{transition:none;animation:none}}

.class-hub{position:fixed;inset:0;z-index:900;background:#f4f7f5;color:#173c30;overflow:auto}.class-hub[hidden]{display:none}.class-hub>header{height:84px;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dce6e1}.class-hub>main{max-width:1180px;margin:auto;padding:clamp(30px,5vw,64px) clamp(20px,4vw,48px)}.hub-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.hub-heading h1{font-size:clamp(2rem,5vw,3.6rem);margin:4px 0}.hub-heading p:last-child{margin:0;color:#65736d;font-size:1rem}.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.hub-class-card{background:#fff;border:1px solid #dce6e1;border-radius:22px;overflow:hidden;box-shadow:0 10px 34px rgba(21,67,51,.07)}.hub-card-art{height:150px;background:linear-gradient(135deg,#e3f2eb,#f8f3df);display:flex;align-items:center;justify-content:center;position:relative}.hub-card-art .avatar3d-small{width:120px;height:120px}.hub-card-art>span{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.88);padding:6px 9px;border-radius:999px;font-size:.72rem;font-weight:800}.hub-card-copy{padding:18px 18px 12px}.hub-card-copy p{margin:0;color:#4a7666;font-size:.7rem;font-weight:900;letter-spacing:.1em}.hub-card-copy h2{font-size:1.25rem;margin:5px 0 7px}.hub-card-copy span{color:#6b7771;font-size:.86rem}.hub-card-actions{display:flex;align-items:center;gap:8px;padding:10px 18px 18px}.hub-card-actions .primary-button{flex:1}.delete-class,.remove-student{border:0;background:transparent;color:#a14437;font-weight:800;cursor:pointer;padding:9px}.hub-empty{text-align:center;padding:70px 20px;background:#fff;border:1px dashed #bfd1c8;border-radius:24px}.hub-empty span{font-size:3rem}.student-manager-list{max-height:240px;overflow:auto;margin:15px 0 18px;border:1px solid #e1e9e5;border-radius:15px}.manager-label{margin:0;padding:10px 13px;background:#f3f7f5;color:#527065;font-size:.68rem;font-weight:900;letter-spacing:.09em}.manager-student{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #edf1ef}.manager-student .avatar3d-small{width:52px;height:48px}.manager-student span{display:grid}.manager-student small{color:#718078}.manager-empty{padding:18px;text-align:center;color:#718078}@media(max-width:700px){.hub-heading{align-items:stretch;flex-direction:column}.hub-heading .primary-button{width:100%}.class-hub>header .brand small{display:none}}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--paper); border-right: 1px solid var(--border); padding: 27px 20px 18px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; margin: 0 7px 34px; }
.brand-mark { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 50% 50% 45% 55%; color: #fff; background: var(--pine); font-family: Georgia, serif; font-size: 25px; font-weight: 700; transform: rotate(-4deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, serif; font-size: 18px; }
.brand small { font-size: 9px; margin-top: 3px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #5f706c; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 650; text-align: left; }
.nav-item span { width: 24px; font-size: 20px; text-align: center; }
.nav-item.active { background: var(--mint); color: var(--pine); }
.sidebar-note { margin-top: auto; background: var(--cream); padding: 16px; border-radius: 16px; border: 1px solid #ede8db; }
.sidebar-note .note-icon { color: var(--coral); font-size: 20px; }
.sidebar-note p { font-family: Georgia, serif; font-weight: 700; margin: 5px 0; }
.sidebar-note small { color: var(--muted); line-height: 1.4; }
.profile-chip { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border: 0; background: transparent; margin-top: 15px; padding: 9px 4px; text-align: left; color: var(--ink); }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #fff; font-size: 11px; font-weight: 800; }
.profile-chip strong, .profile-chip small { display: block; }
.profile-chip strong { font-size: 12px; }.profile-chip small { color: var(--muted); font-size: 10px; margin-top: 2px; }
main { min-width: 0; padding: 30px 34px 50px; max-width: 1600px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.eyebrow { margin: 0 0 5px; color: #87928f; font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.topbar h1 { font-family: Georgia, serif; margin: 0; font-size: 28px; font-weight: 700; }
.topbar h1 span { color: var(--gold); font-family: sans-serif; }
.top-actions { display: flex; gap: 10px; }
.icon-button, .outline-button { height: 42px; border: 1px solid var(--border); border-radius: 11px; background: var(--paper); color: var(--ink); }
.icon-button { width: 42px; position: relative; }.notification-dot { width: 6px; height: 6px; background: var(--coral); border-radius: 50%; position: absolute; right: 9px; top: 8px; }
.outline-button { padding: 0 16px; font-weight: 750; }
.class-banner { color: white; background: linear-gradient(118deg, var(--pine-dark), var(--pine)); border-radius: 20px; padding: 25px 28px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.class-banner::after { content: ""; position: absolute; width: 220px; height: 220px; right: -72px; top: -135px; border: 40px solid rgba(255,255,255,.045); border-radius: 50%; }
.eyebrow.light { color: #a9cbc2; }.class-banner h2 { font-family: Georgia, serif; font-size: 25px; margin: 0 0 6px; }.class-banner p { margin: 0; color: #bdd5cf; font-size: 12px; }.class-banner p span { padding: 0 5px; }
.class-stats { display: flex; gap: 40px; margin-right: 35px; }.class-stats div { display: grid; text-align: center; }.class-stats strong { font-family: Georgia, serif; font-size: 24px; }.class-stats span { margin-top: 4px; color: #bdd5cf; font-size: 10px; }
.class-menu { z-index: 1; border: 0; width: 35px; height: 35px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; margin-top: 27px; }
.roster-panel, .activity-panel { background: var(--paper); border: 1px solid var(--border); border-radius: 19px; box-shadow: 0 8px 25px rgba(40,70,62,.035); }
.roster-panel { padding: 24px; }.activity-panel { padding: 22px; align-self: start; }
.section-heading { display: flex; justify-content: space-between; align-items: center; }.section-heading h2 { margin: 0 0 5px; font-family: Georgia, serif; font-size: 21px; }.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.view-toggle { display: flex; background: var(--cream); padding: 4px; border-radius: 10px; }.view-toggle button { width: 33px; height: 29px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }.view-toggle .active { background: var(--paper); color: var(--pine); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.filters { display: flex; gap: 8px; margin: 20px 0; border-bottom: 1px solid var(--border); padding-bottom: 15px; }.filter { border: 0; background: transparent; color: var(--muted); padding: 7px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; }.filter.active { background: var(--mint); color: var(--pine); }.filter span { margin-left: 3px; opacity: .65; }
.student-grid { display: grid; grid-template-columns: repeat(4, minmax(112px, 1fr)); gap: 12px; }
.student-card { position: relative; border: 1px solid var(--border); background: #fff; border-radius: 16px; min-height: 178px; padding: 17px 12px 13px; text-align: center; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.student-card:hover, .student-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #a7c9bf; outline: none; }
.student-card .points { position: absolute; right: 9px; top: 9px; padding: 4px 7px; border-radius: 8px; background: #edf6f1; color: var(--pine); font-size: 11px; font-weight: 800; }
.avatar { width: 66px; height: 66px; margin: 5px auto 9px; display: grid; place-items: center; border-radius: 46% 54% 50% 50%; background: var(--avatar-bg, #f2d8bb); font-size: 37px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.035); transition: transform .25s ease; }.student-card:hover .avatar { transform: scale(1.07) rotate(2deg); }
.student-card strong { display: block; font-family: Georgia, serif; font-size: 14px; }.student-card small { color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }
.evolution { margin-top: 9px; height: 4px; background: #edf0ee; border-radius: 5px; overflow: hidden; }.evolution span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.text-button { border: 0; background: transparent; color: var(--pine); font-size: 11px; font-weight: 800; }.compact { align-items: start; }
.activity-list { margin-top: 19px; display: grid; gap: 17px; }.activity-item { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: start; }.activity-icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; background: var(--mint); }.activity-copy strong { display: block; font-size: 12px; }.activity-copy p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }.activity-time { color: #9ba5a2; font-size: 9px; white-space: nowrap; }
.weekly-goal { margin-top: 22px; background: var(--cream); border-radius: 14px; padding: 15px; }.goal-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; }.goal-top strong { color: var(--pine); }.progress { height: 6px; background: #dddcd4; border-radius: 10px; margin: 10px 0; overflow: hidden; }.progress span { display: block; width: 83%; height: 100%; background: var(--gold); }.weekly-goal p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 0; }.weekly-goal strong { color: var(--ink); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(12,38,33,.52); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; z-index: 20; }.modal-backdrop[hidden] { display: none; }.modal { width: min(460px, 100%); background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.22); position: relative; }.modal-close { position: absolute; right: 17px; top: 15px; border: 0; background: var(--cream); width: 32px; height: 32px; border-radius: 50%; font-size: 21px; color: var(--muted); }.selected-student { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }.selected-student .avatar { width: 48px; height: 48px; font-size: 27px; margin: 0; }.selected-student strong { font-family: Georgia, serif; }.selected-student small { display: block; color: var(--muted); margin-top: 2px; }.modal h2 { font-family: Georgia, serif; margin: 0; font-size: 23px; }.modal-subtitle { color: var(--muted); font-size: 12px; margin: 6px 0 18px; }.attitude-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.attitude { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 12px; display: flex; align-items: center; gap: 9px; color: var(--ink); text-align: left; }.attitude:hover { border-color: var(--pine); background: #f5faf7; }.attitude.negative:hover { border-color: var(--coral); background: #fff8f6; }.attitude .symbol { width: 30px; height: 30px; display: grid; place-items: center; background: var(--mint); border-radius: 9px; }.attitude.negative .symbol { background: #f8dfda; }.attitude span:last-child { font-size: 11px; font-weight: 750; }.edit-attitudes { width: 100%; margin-top: 14px; border: 0; background: transparent; color: var(--pine); font-size: 11px; font-weight: 800; padding: 8px; }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%, 120px); opacity: 0; background: var(--pine-dark); color: white; border-radius: 12px; padding: 12px 18px; font-size: 12px; box-shadow: var(--shadow); transition: .25s ease; z-index: 30; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
.sync-status { position: fixed; right: 18px; bottom: 18px; z-index: 1200; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #cfe0d9; border-radius: 999px; background: #fff; color: #31594d; box-shadow: 0 8px 28px #123e3020; font: 700 12px/1.1 system-ui, sans-serif; }.sync-status span { width: 8px; height: 8px; border-radius: 50%; background: #80918c; }.sync-status.shared span { background: #16a36a; box-shadow: 0 0 0 4px #16a36a1c; }.sync-status.saving span { background: #efaa23; animation: sync-pulse 1s infinite; }.sync-status.offline span { background: #d65c4b; }.sync-status.local { color: #687a75; }@keyframes sync-pulse { 50% { opacity: .35; } }
.microsoft-button{width:100%;min-height:52px;border:1px solid #cbd3d8;border-radius:11px;background:#fff;color:#21333a;display:flex;align-items:center;justify-content:center;gap:13px;font-weight:800;box-shadow:0 3px 10px rgba(20,47,40,.06)}.microsoft-button:hover{border-color:#7d929b;background:#f9fbfc}.microsoft-mark{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px}.microsoft-mark i:nth-child(1){background:#f35325}.microsoft-mark i:nth-child(2){background:#81bc06}.microsoft-mark i:nth-child(3){background:#05a6f0}.microsoft-mark i:nth-child(4){background:#ffba08}.login-card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#fff5d9;margin-bottom:18px;font-size:25px}.hub-account{display:flex;align-items:center;gap:10px}.hub-account>span:nth-child(2){display:grid;margin-right:5px}.hub-account strong{font-size:.8rem}.hub-account small{font-size:.68rem;color:var(--muted)}.teacher-register .registration-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--mint);font-size:27px;margin-bottom:15px}.teacher-register label{display:grid;gap:7px;color:var(--ink);font-size:12px;font-weight:750;margin-bottom:15px}.teacher-register input{width:100%;border:1px solid var(--border);border-radius:11px;padding:12px 13px;background:#fbfcfb;color:var(--ink);outline:none}.teacher-register input:focus{border-color:var(--pine);box-shadow:0 0 0 3px var(--mint)}.teacher-register input[readonly]{color:#65736d;background:#f2f5f3}.activity-author{display:block;margin-top:4px;color:#477264;font-size:9px;font-weight:750}
.hub-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.teachers-list{display:grid;gap:9px;margin-top:18px}.teacher-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:14px}.teacher-row .profile-avatar{width:42px;height:42px}.teacher-row>span:nth-child(2){display:grid;gap:3px}.teacher-row small{color:var(--muted);font-size:.73rem}.teacher-row button{min-width:94px;border:1px solid #c9d9d3;border-radius:10px;background:#f4faf7;color:var(--pine);padding:9px 11px;font-weight:800}.teacher-row.inactive{opacity:.65;background:#f5f5f4}.teacher-row.inactive button{background:#fff}.teacher-role{display:inline-flex;width:max-content;padding:3px 7px;border-radius:999px;background:#e3f1eb;color:#276451;font-size:.63rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:700px){.hub-account>span:nth-child(2){display:none}.hub-account{gap:7px}.hub-account .outline-button{display:block}.sync-status{right:10px;bottom:10px}.login-card-icon{margin-inline:auto}.hub-heading-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.hub-heading-actions .primary-button{grid-column:1/-1}.teacher-row{grid-template-columns:38px 1fr}.teacher-row button{grid-column:1/-1}.teacher-row .profile-avatar{width:38px;height:38px}}
@media (max-width: 1100px) { .student-grid { grid-template-columns: repeat(3, 1fr); }.content-grid { grid-template-columns: 1fr; }.activity-panel { display: none; }.class-stats { gap: 22px; } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { position: static; height: auto; padding: 14px 18px; flex-direction: row; align-items: center; }.brand { margin: 0; }.brand small, .sidebar nav, .sidebar-note, .profile-chip { display: none; } main { padding: 20px 15px 35px; }.topbar { align-items: flex-start; }.topbar h1 { font-size: 23px; }.outline-button { display: none; }.class-banner { grid-template-columns: 1fr auto; padding: 21px; }.class-stats { display: none; }.student-grid { grid-template-columns: repeat(2, 1fr); }.roster-panel { padding: 18px 14px; }.section-heading p { max-width: 220px; }.filters { overflow-x: auto; }.attitude-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

[hidden] { display: none !important; }

/* Densitat adaptativa: el mode aula manté més alumnat visible sense fer una targeta gegant. */
.classroom-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));grid-auto-rows:minmax(132px,1fr);gap:9px;overflow:auto;align-content:stretch}
.classroom-view[data-density="compact"] .classroom-grid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));grid-auto-rows:minmax(112px,1fr);gap:7px}
.classroom-view[data-density="mini"] .classroom-grid{grid-template-columns:repeat(auto-fit,minmax(94px,1fr));grid-auto-rows:minmax(94px,1fr);gap:6px}
.classroom-view[data-density="compact"] .classroom-student{border-radius:15px;padding:5px;font-size:.9rem}
.classroom-view[data-density="compact"] .classroom-student .avatar3d{width:min(88px,82%);height:74px;margin:0 auto 3px}
.classroom-view[data-density="compact"] .classroom-student strong{font-size:.9rem}
.classroom-view[data-density="compact"] .classroom-student>span:last-child{font-size:.72rem}
.classroom-view[data-density="mini"] .classroom-student{border-radius:13px;padding:4px;font-size:.78rem}
.classroom-view[data-density="mini"] .classroom-student .avatar3d{width:min(68px,78%);height:58px;margin:0 auto 2px}
.classroom-view[data-density="mini"] .classroom-student strong{font-size:.76rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classroom-view[data-density="mini"] .classroom-student>span:last-child{font-size:.63rem}
.modal-backdrop{overscroll-behavior:contain}
.modal{overscroll-behavior:contain;scroll-behavior:auto}
.tabs{position:relative;z-index:1}
.primary-button, .ghost-button, .small-action, .new-class-side { border-radius: 11px; min-height: 42px; padding: 0 16px; font-weight: 750; border: 1px solid transparent; }
.primary-button { background: var(--pine); color: white; }.primary-button:hover { background: var(--pine-dark); }.primary-button.full { width: 100%; }
.ghost-button { background: white; color: var(--muted); border-color: var(--border); }.small-action { background: var(--mint); color: var(--pine); min-height: 36px; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: white; }
.login-visual { min-height: 100vh; background: linear-gradient(145deg, var(--pine-dark), var(--pine)); padding: 42px 55px; color: white; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-visual::after { content: ""; position: absolute; width: 480px; height: 480px; border: 80px solid rgba(255,255,255,.035); border-radius: 50%; right: -250px; bottom: -220px; }
.login-brand { color: white; margin: 0; }.login-brand .brand-mark { background: var(--gold); }.login-brand small { color: #b8d1ca; }
.login-message { margin: auto 0; max-width: 560px; position: relative; z-index: 1; }.login-sprout { display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 26px; background: rgba(255,255,255,.1); font-size: 42px; margin-bottom: 25px; }.login-message h1 { font: 700 54px/1.02 Georgia, serif; margin: 0 0 18px; max-width: 500px; }.login-message > p:last-child { color: #c8dcd7; font-size: 17px; line-height: 1.6; max-width: 510px; }.principles { display: flex; gap: 24px; color: #b8d1ca; font-size: 9px; letter-spacing: .15em; font-weight: 800; }
.login-panel { display: grid; place-items: center; padding: 40px; }.login-card { width: min(410px, 100%); }.login-card h2 { font: 700 34px Georgia, serif; margin: 5px 0 9px; }.login-card > p:not(.eyebrow):not(.form-error) { color: var(--muted); margin: 0 0 28px; }.login-card label, #class-form label, .tab-panel label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 750; margin-bottom: 15px; }.login-card input, #class-form input, #class-form select, .tab-panel input, .tab-panel textarea { width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; background: #fbfcfb; color: var(--ink); outline: none; }.login-card input:focus, #class-form input:focus, #class-form select:focus, .tab-panel input:focus, .tab-panel textarea:focus { border-color: var(--pine); box-shadow: 0 0 0 3px var(--mint); }.form-error { color: #b84835; min-height: 17px; font-size: 11px; }.demo-note { display: block; text-align: center; color: var(--muted); margin-top: 18px; line-height: 1.6; }
.sidebar-section-label { margin: 0 12px 8px; color: #97a29f; font-size: 9px; letter-spacing: .12em; font-weight: 800; }.class-nav { max-height: 38vh; overflow-y: auto; }.class-link { width: 100%; }.class-link > span:last-child { display: grid; min-width: 0; }.class-link strong { font-size: 12px; }.class-link small { font-size: 9px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.new-class-side { width: 100%; margin-top: 10px; background: transparent; border: 1px dashed #aec4be; color: var(--pine); font-size: 11px; }
.student-card.selected { border-color: var(--pine); background: #f1f8f4; box-shadow: 0 0 0 2px var(--mint); }.select-mark { position: absolute; left: 10px; top: 10px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #9ebbb3; border-radius: 7px; color: white; background: white; font-size: 12px; font-weight: 900; }.student-card.selected .select-mark { background: var(--pine); border-color: var(--pine); }
.avatar { position: relative; }.student-card strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.accessories { min-height: 25px; margin-top: 10px; display: flex; justify-content: center; gap: 3px; }.accessories i { width: 23px; height: 23px; display: grid; place-items: center; background: var(--cream); border: 1px solid #ece8dc; border-radius: 50%; font-style: normal; font-size: 12px; }.accessories em { color: #a0aaa7; font-size: 9px; font-style: normal; align-self: center; }
.empty-state { text-align: center; padding: 45px 15px 30px; }.empty-state > span { font-size: 50px; }.empty-state h3 { font: 700 20px Georgia, serif; margin: 12px 0 5px; }.empty-state p { color: var(--muted); font-size: 12px; margin: 0 0 18px; }.quiet-state { color: var(--muted); background: var(--cream); padding: 18px; border-radius: 12px; font-size: 11px; line-height: 1.5; }
.modal-wide { width: min(690px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }.modal > .eyebrow { margin-top: 4px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.optional { color: var(--muted); font-weight: 500; margin-left: 4px; } fieldset { border: 0; padding: 0; margin: 8px 0 0; } legend { font-size: 12px; font-weight: 750; margin-bottom: 10px; }.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.theme-option { display: block !important; margin: 0 !important; }.theme-option input { position: absolute; opacity: 0; pointer-events: none; }.theme-card { min-height: 108px; border: 1px solid var(--border); border-radius: 13px; padding: 12px; display: grid; align-content: center; text-align: center; gap: 4px; cursor: pointer; }.theme-card b { font-size: 30px; }.theme-card strong { font: 700 12px Georgia, serif; }.theme-card small { color: var(--muted); font-size: 9px; }.theme-option input:checked + .theme-card { border-color: var(--pine); background: #f1f8f4; box-shadow: 0 0 0 2px var(--mint); }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.tabs { display: flex; gap: 5px; padding: 4px; background: var(--cream); border-radius: 11px; margin: 18px 0; }.tab { flex: 1; border: 0; border-radius: 8px; padding: 9px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; }.tab.active { background: white; color: var(--pine); box-shadow: 0 2px 8px rgba(0,0,0,.06); }.bulk-summary { background: var(--mint); color: var(--pine); padding: 10px 12px; border-radius: 9px; font-size: 11px; }
.heading-actions, .selection-toolbar { display: flex; align-items: center; gap: 8px; }.compact-button { min-height: 36px; padding: 0 12px; font-size: 11px; }.selection-toolbar { margin: 18px 0 0; padding: 11px 13px; background: var(--mint); border-radius: 12px; color: var(--pine); }.selection-toolbar strong { margin-right: auto; font-size: 11px; }.selection-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.group-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--mint); color: var(--pine); font: 700 18px Georgia, serif; }.reward-path { display: flex; justify-content: space-between; gap: 5px; margin: 12px 0; }.reward-path span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: white; border: 1px solid #deddd6; color: var(--pine); font-size: 9px; font-weight: 800; }
.attitude-editor { display: grid; gap: 8px; margin-top: 18px; }.attitude-row { display: grid; grid-template-columns: 38px 1fr 75px 32px; gap: 8px; align-items: center; }.attitude-preview { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--mint); }.attitude-preview.negative { background: #f8dfda; }.attitude-row input { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 9px; color: var(--ink); }.attitude-value { text-align: center; }.remove-attitude { border: 0; background: transparent; color: var(--coral); font-size: 20px; }.new-attitude { width: 100%; margin-top: 11px; border: 1px dashed #aec4be; background: transparent; color: var(--pine); border-radius: 10px; padding: 10px; font-size: 11px; font-weight: 750; }
@media (max-width: 760px) { .login-screen { grid-template-columns: 1fr; }.login-visual { min-height: 280px; padding: 28px; }.login-message { margin: 45px 0; }.login-message h1 { font-size: 38px; }.login-message > p:last-child, .principles { display: none; }.login-panel { padding: 32px 22px; }.top-actions .icon-button, .top-actions .outline-button { display: none; }.theme-grid { grid-template-columns: repeat(2, 1fr); }.form-row { grid-template-columns: 1fr 110px; }.section-heading { align-items: flex-start; }.heading-actions { flex-direction: column; }.selection-toolbar { flex-wrap: wrap; }.selection-toolbar strong { width: 100%; }.attitude-row { grid-template-columns: 38px 1fr 60px 28px; } }
.edit-class-links{margin-top:14px}.history-list{display:grid;gap:12px;margin-top:18px}.history-card{border:1px solid #dfe8e3;border-radius:15px;overflow:hidden}.history-card header{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;background:#f2f7f4;color:#325c4d}.history-card header span{font-size:.8rem;color:#6a776f}.history-card>div{padding:5px 14px}.history-card p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:9px 0;border-bottom:1px solid #edf1ef}.history-card p:last-child{border-bottom:0}.history-card b{color:#17643f}
.modal-backdrop{z-index:1200}.modal{z-index:1201}

/* Benvinguda Carme Creix */
.login-screen{grid-template-columns:minmax(560px,1.13fr) minmax(430px,.87fr);background:#fff}
.login-visual{isolation:isolate;padding:34px clamp(34px,4vw,64px) 30px;background:#083b2b}
.login-visual::after{display:none}
.login-hero-art{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:61% center;filter:saturate(.98) contrast(1.02)}
.login-veil{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(3,39,29,.96) 0%,rgba(4,47,34,.82) 35%,rgba(5,51,35,.3) 68%,rgba(4,43,31,.12) 100%),linear-gradient(0deg,rgba(3,34,25,.84) 0%,transparent 42%),radial-gradient(circle at 18% 42%,rgba(17,91,65,.42),transparent 42%)}
.login-brand-row{position:relative;z-index:2;display:flex;align-items:center;gap:18px;min-height:64px}
.school-logo-lockup{position:relative;display:grid;place-items:center;width:190px;height:58px;padding:8px 13px;border-radius:15px;background:rgba(255,255,255,.96);box-shadow:0 8px 28px rgba(0,0,0,.16);overflow:hidden;text-decoration:none}
.school-logo-lockup img{position:relative;z-index:1;display:block;width:164px;max-height:44px;object-fit:contain}
.school-logo-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#39536c;font-size:21px;font-weight:800;text-transform:lowercase}
.school-logo-lockup img+.school-logo-fallback{display:none}
.school-logo-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#7136a5;color:#fff;font-size:14px}
.brand-separator{width:1px;height:39px;background:rgba(255,255,255,.32)}
.login-product{display:grid;gap:3px;color:#fff}.login-product strong{font:700 22px Georgia,serif}.login-product small{color:#c7ded6;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.login-message{margin:auto 0 9vh;max-width:475px;text-shadow:0 2px 16px rgba(0,0,0,.16)}
.welcome-chip{display:inline-flex;align-items:center;min-height:34px;margin-bottom:24px;padding:0 13px;border:1px solid rgba(255,210,93,.5);border-radius:999px;background:rgba(9,62,45,.58);color:#ffd56c;font-size:10px;font-weight:900;letter-spacing:.13em;backdrop-filter:blur(6px)}
.login-message h1{font-size:clamp(45px,4.2vw,66px);line-height:.98;max-width:460px;letter-spacing:-.025em;margin-bottom:20px}
.login-message>p:last-child{max-width:450px;color:#e2f0eb;font-size:17px;line-height:1.58}
.principles{position:relative;z-index:2;gap:12px;color:#d8e9e3}.principles span{padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,42,30,.36);backdrop-filter:blur(5px)}
.login-panel{position:relative;background:radial-gradient(circle at 90% 6%,#f4ead1 0,transparent 30%),linear-gradient(145deg,#fff 0%,#fbfdfc 72%);padding:48px}
.login-panel::before{content:"";position:absolute;right:34px;top:34px;width:72px;height:72px;border:1px solid rgba(229,169,51,.22);border-radius:50%;box-shadow:0 0 0 16px rgba(229,169,51,.05)}
.login-card{position:relative;z-index:1;width:min(430px,100%);padding:34px;border:1px solid rgba(23,79,69,.1);border-radius:24px;background:rgba(255,255,255,.84);box-shadow:0 24px 70px rgba(28,67,56,.1);backdrop-filter:blur(10px)}
.login-card-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border-radius:15px;background:#fff4cf;box-shadow:inset 0 0 0 1px #f2db8b;font-size:23px;transform:rotate(-4deg)}
.login-card h2{font-size:clamp(32px,3vw,43px);line-height:1.05;margin-bottom:12px}.login-card>p:not(.eyebrow):not(.form-error){font-size:16px;line-height:1.5;margin-bottom:26px}.login-card label{font-size:14px;gap:8px;margin-bottom:17px}.login-card input{min-height:54px;border-radius:14px;padding:14px 16px;font-size:16px}.login-card .primary-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;margin-top:4px;border-radius:14px;font-size:16px;box-shadow:0 12px 28px rgba(23,79,69,.19)}.login-card .primary-button span{font-size:22px;line-height:1}.demo-note{font-size:13px}
@media(max-width:1050px){.login-screen{grid-template-columns:1fr 1fr}.login-visual{padding:30px}.school-logo-lockup{width:170px}.school-logo-lockup img{width:148px}.login-message{margin-bottom:7vh}.login-message h1{font-size:47px}.principles{gap:7px}.principles span{padding:7px 8px}.login-card{padding:28px}}
@media(max-width:760px){.login-screen{grid-template-columns:1fr}.login-visual{min-height:460px;padding:22px 22px 20px}.login-hero-art{object-position:68% center}.login-veil{background:linear-gradient(90deg,rgba(3,39,29,.95),rgba(4,47,34,.55)),linear-gradient(0deg,rgba(3,34,25,.8),transparent 60%)}.login-brand-row{gap:12px}.school-logo-lockup{width:143px;height:48px;padding:6px 9px;border-radius:12px}.school-logo-lockup img{width:126px;max-height:36px}.brand-separator{height:32px}.login-product strong{font-size:18px}.login-product small{font-size:9px}.login-message{margin:auto 0 26px;max-width:370px}.welcome-chip{margin-bottom:14px;min-height:29px;font-size:9px}.login-message h1{font-size:38px;max-width:350px;margin-bottom:12px}.login-message>p:last-child{display:block;font-size:14px;line-height:1.45;max-width:340px}.principles{display:none}.login-panel{padding:28px 18px 40px}.login-panel::before{display:none}.login-card{padding:26px 22px}.login-card-icon{width:42px;height:42px;margin-bottom:16px}}

/* Mode aula: totes les actituds visibles sense desplaçament horitzontal */
.classroom-awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:stretch;justify-content:stretch;gap:10px;max-height:min(34vh,240px);padding:12px;overflow-x:hidden;overflow-y:auto}
.classroom-awards>span{grid-column:1/-1;align-self:center;text-align:center}
.classroom-attitude{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:58px;padding:10px 12px;white-space:normal;text-align:center;line-height:1.18}
.classroom-attitude span{flex:0 0 auto;margin-right:0}.classroom-attitude b{flex:0 0 auto}.classroom-attitude.negative{box-shadow:inset 0 0 0 1px rgba(173,63,49,.18)}
@media(max-width:700px){.classroom-awards{grid-template-columns:repeat(2,minmax(0,1fr));max-height:32vh;gap:7px;padding:8px}.classroom-attitude{min-height:54px;padding:8px;font-size:.82rem}}

/* Capçalera del tauler: compacta, clara i preparada per a tauleta */
.topbar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
  padding:14px 15px 14px 17px;
  overflow:hidden;
  border:1px solid rgba(23,79,69,.12);
  border-radius:21px;
  background:linear-gradient(105deg,rgba(255,255,255,.98),rgba(247,251,249,.94));
  box-shadow:0 12px 34px rgba(20,65,52,.08);
}
.topbar::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  bottom:15px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(var(--gold),#f5c95f);
}
.topbar-welcome{display:flex;align-items:center;gap:13px;min-width:0;padding-left:3px}
.topbar-sun{
  display:grid;
  flex:0 0 46px;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid #f4d98f;
  border-radius:14px;
  background:#fff6d9;
  color:#d69513;
  font:700 23px/1 sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.topbar .eyebrow{margin:0 0 4px;font-size:10px;line-height:1.2;letter-spacing:.14em}
.topbar h1{margin:0;font:700 clamp(23px,2.05vw,31px)/1.05 Georgia,serif;letter-spacing:-.02em;white-space:nowrap}
.top-actions{
  display:grid;
  grid-template-columns:46px repeat(4,minmax(110px,1fr)) minmax(142px,1.15fr);
  align-items:center;
  justify-content:stretch;
  gap:5px;
  width:100%;
  min-width:0;
  padding:5px;
  border:1px solid #e2ebe6;
  border-radius:16px;
  background:#f0f5f2;
}
.topbar .icon-button,.topbar .outline-button,.topbar #new-class{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:46px;
  min-height:46px;
  padding:0 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#24483d;
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  width:100%;
  box-shadow:none;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.topbar .icon-button{flex:0 0 46px;width:46px;padding:0}
.sound-label{display:none}
.topbar .outline-button:hover,.topbar .icon-button:hover{
  transform:translateY(-1px);
  background:#fff;
  color:var(--pine);
  box-shadow:0 5px 14px rgba(20,65,52,.1);
}
.top-action-icon{
  display:grid;
  flex:0 0 23px;
  width:23px;
  height:23px;
  place-items:center;
  border-radius:8px;
  background:rgba(23,79,69,.08);
  color:var(--pine);
  font-size:15px;
  line-height:1;
}
.topbar #new-class{
  padding:0 16px;
  background:var(--pine);
  color:#fff;
  box-shadow:0 7px 18px rgba(23,79,69,.2);
}
.topbar #new-class:hover{transform:translateY(-1px);background:var(--pine-dark);box-shadow:0 9px 21px rgba(23,79,69,.25)}
.topbar #new-class .top-action-icon{background:rgba(255,255,255,.14);color:#fff}
.topbar button:focus-visible{outline:3px solid rgba(232,174,50,.42);outline-offset:2px}

@media(max-width:1000px) and (min-width:761px){
  .top-actions{grid-template-columns:46px repeat(2,minmax(0,1fr))}
  .topbar .icon-button,.topbar .outline-button,.topbar #new-class{padding-inline:10px}
}
@media(max-width:760px){
  .topbar{gap:11px;padding:12px 12px 12px 15px;border-radius:17px}
  .topbar-welcome{min-width:0;gap:10px}
  .topbar-sun{flex-basis:42px;width:42px;height:42px;border-radius:13px;font-size:21px}
  .topbar h1{font-size:21px;white-space:normal}
  .topbar .eyebrow{font-size:9px}
  .top-actions{display:grid;grid-template-columns:44px 1fr;padding:4px;border-radius:14px}
  .topbar .top-actions .outline-button{display:none}
  .topbar .icon-button,.topbar #new-class{display:inline-flex;height:44px;min-height:44px}
}

/* Fase tàctil i responsive: mòbil, tauleta i pantalla digital */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;overscroll-behavior-y:none}
button,a,input,select,textarea{touch-action:manipulation}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(232,174,50,.55);outline-offset:3px}

@media(hover:none),(pointer:coarse){
  button,.class-link,.student-card{min-height:48px}
  .student-card:hover,.classroom-student:hover,.topbar .outline-button:hover,.topbar .icon-button:hover,.topbar #new-class:hover{transform:none}
  .modal-close{width:44px;height:44px;right:12px;top:10px}
  .text-button,.remove-student,.delete-class{min-height:44px;padding:10px 12px}
  input,select,textarea{font-size:16px}
}

/* Tauleta vertical: la navegació lateral passa a una franja superior. */
@media(max-width:900px){
  .app-shell{display:block;min-height:100dvh}
  .sidebar{position:relative;z-index:5;width:100%;height:auto;padding:12px 16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border-right:0;border-bottom:1px solid var(--border)}
  .sidebar .brand{margin:0;min-width:0}
  .sidebar-section-label,.sidebar-note,.profile-chip,.new-class-side{display:none}
  .sidebar .class-nav{display:flex;grid-column:1/-1;gap:8px;width:100%;max-height:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 0 4px;scroll-snap-type:x proximity}
  .sidebar .class-link{flex:0 0 min(190px,68vw);width:auto;min-height:48px;margin:0;scroll-snap-align:start}
  .app-shell>main{padding:18px 16px calc(32px + env(safe-area-inset-bottom))}
  .topbar{margin-bottom:18px}
  .top-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topbar .top-actions .icon-button{width:100%}
  .content-grid{margin-top:18px}
  .student-grid{grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px}
  .activity-panel{display:none}
}

@media(max-width:760px){
  .login-visual{min-height:350px;padding-bottom:18px}
  .login-message{margin:auto 0 12px}
  .login-message h1{font-size:clamp(31px,10vw,38px)}
  .login-panel{padding:22px 14px calc(30px + env(safe-area-inset-bottom))}
  .login-card{padding:24px 18px}
  .app-shell>main{padding:14px 12px calc(28px + env(safe-area-inset-bottom))}
  .topbar{position:relative;top:auto;z-index:4}
  .top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .topbar .top-actions .icon-button,.topbar .top-actions .outline-button,.topbar .top-actions #new-class{display:inline-flex;width:100%;height:auto;min-height:50px;padding:8px 10px;white-space:normal;line-height:1.15}
  .topbar .top-actions #open-album,.topbar .top-actions #manage-students{display:inline-flex}
  .topbar .top-actions .icon-button{grid-column:auto}
  .topbar .top-actions .icon-button .sound-label{display:inline;font-weight:800}
  .class-banner{grid-template-columns:minmax(0,1fr) 44px;gap:10px;padding:18px 16px}
  .class-banner h2{font-size:clamp(22px,7vw,28px)}
  .class-menu{width:44px;height:44px}
  .section-heading{display:grid;grid-template-columns:1fr;gap:12px}
  .section-heading p{max-width:none}
  .heading-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .heading-actions .compact-button,.heading-actions .small-action{min-height:48px;width:100%}
  .student-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .student-card{min-width:0;padding:14px 8px 12px}
  .student-card strong{font-size:15px}
  .student-card small{font-size:12px;line-height:1.25}
  .filters{margin:15px 0;padding-bottom:10px}
  .filter{min-height:44px;font-size:14px}
  .selection-toolbar{gap:8px}
  .selection-toolbar button{min-height:44px;flex:1}
  .modal-backdrop{align-items:end;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
  .modal{width:100%;max-height:calc(100dvh - 16px);overflow-y:auto;border-radius:22px 22px 14px 14px;padding:25px 18px 20px}
  .modal h2{font-size:25px;padding-right:42px}
  .modal-subtitle{font-size:14px;line-height:1.45}
  .attitude-list{grid-template-columns:1fr;gap:8px}
  .attitude{min-height:56px;padding:10px 12px}
  .attitude span:last-child{font-size:14px;line-height:1.25}
  .tabs{min-height:48px}.tab{min-height:42px;font-size:14px}
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-card{min-height:112px}
  .modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .modal-actions button{min-height:48px}
  .student-manager-list{max-height:38vh}
  .manager-student{grid-template-columns:52px minmax(0,1fr) auto;padding:9px 8px}
  .remove-student{font-size:13px}
  .class-hub>header{height:auto;min-height:72px;padding:12px 16px;gap:12px}
  .class-hub>header .outline-button{display:inline-flex;min-height:46px;padding:0 13px}
  .class-hub>main{padding:28px 14px calc(32px + env(safe-area-inset-bottom))}
  .hub-heading{margin-bottom:20px}.hub-heading h1{font-size:34px}
  .hub-grid{grid-template-columns:1fr}
  .hub-card-actions button{min-height:48px}
}

@media(max-width:430px){
  .sidebar{padding-inline:12px}
  .sidebar .brand small{display:none}
  .topbar-welcome{align-items:flex-start}
  .topbar h1{font-size:20px}
  .top-actions{grid-template-columns:1fr 1fr}
  .student-grid{gap:8px}
  .avatar3d{width:102px;height:88px;margin-top:10px}
  .accessories{gap:2px;flex-wrap:wrap}
  .accessories i{width:22px;height:22px}
  .form-row{grid-template-columns:1fr}
  .modal-actions{grid-template-columns:1fr}
}

/* Mode aula adaptatiu: alumnat al centre i premis sempre tàctils. */
@media(max-width:900px){
  .classroom-view{padding:14px;gap:10px;min-height:100dvh}
  .classroom-view>header{gap:12px}
  .classroom-head-actions button,.classroom-hint button{min-height:48px;padding:10px 14px}
  .classroom-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));grid-auto-rows:minmax(178px,1fr);gap:9px}
  .classroom-awards{grid-template-columns:repeat(3,minmax(0,1fr));max-height:min(36vh,246px)}
  .classroom-attitude{min-height:58px;font-size:.9rem}
}

@media(max-width:600px){
  .classroom-view{padding:10px;gap:8px}
  .classroom-view>header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .classroom-view header h1{font-size:clamp(1.35rem,7vw,1.8rem)}
  .classroom-view header p{font-size:.68rem}
  .classroom-head-actions{display:grid;grid-template-columns:48px 48px;gap:6px}
  .classroom-head-actions button{width:48px;min-height:48px;padding:0;border-radius:14px;font-size:20px}
  .classroom-head-actions .classroom-action-label,#classroom-sound-label{display:none}
  .classroom-hint{gap:8px;padding:8px 8px 8px 12px;font-size:.82rem}
  .classroom-hint button{min-width:104px;padding:8px 10px;font-size:.78rem;line-height:1.15}
  .classroom-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(170px,1fr);gap:8px}
  .classroom-student{min-width:0;border-radius:17px;padding:6px}
  .classroom-student .avatar3d{width:min(100px,82%);height:84px;margin:0 auto 4px}
  .classroom-student strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
  .classroom-student>span:last-child{font-size:.75rem;text-align:center;line-height:1.2}
  .classroom-awards{grid-template-columns:repeat(2,minmax(0,1fr));max-height:34vh;gap:6px;padding:7px;border-radius:16px}
  .classroom-attitude{min-height:54px;padding:7px 6px;font-size:.78rem}
}

@media(max-height:650px) and (orientation:landscape){
  .classroom-view{padding:8px 12px;gap:7px}
  .classroom-view header p{display:none}
  .classroom-view header h1{font-size:1.45rem}
  .classroom-head-actions button,.classroom-hint button{min-height:42px;padding-block:7px}
  .classroom-hint{padding-block:6px}
  .classroom-grid{grid-auto-rows:minmax(145px,1fr)}
  .classroom-student .avatar3d{width:94px;height:78px;margin-bottom:2px}
  .classroom-awards{max-height:38vh;grid-template-columns:repeat(4,minmax(0,1fr));padding:7px}
  .classroom-attitude{min-height:48px;padding:6px;font-size:.78rem}
}

/* Ajust final per pantalles petites: la densitat també s'aplica en mode aula tàctil. */
@media(max-width:700px){
  .classroom-view[data-density="compact"] .classroom-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr)}
  .classroom-view[data-density="mini"] .classroom-grid{grid-template-columns:repeat(auto-fit,minmax(82px,1fr));grid-auto-rows:minmax(82px,1fr)}
  .classroom-view[data-density="mini"] .classroom-student .avatar3d{width:60px;height:52px}
}