:root{
  --navy:#1f3864; --blue:#2e5c9a; --gold:#bf8f00;
  --green:#dcfce7; --dgreen:#166534; --red:#fee2e2; --dred:#b91c1c; --orange:#ffedd5; --dorange:#9a3412; --teal:#e0ecfa;
  --grey:#e5e7eb; --lgrey:#f3f4f6;
  --bg:#eef1f6; --card:#ffffff; --card2:#f6f7fa; --line:#e6e8ee; --text:#111827; --muted:#6b7280; --field:#ffffff; --fieldb:#d9dde5;
  --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06);
  --safe-b: env(safe-area-inset-bottom,0px); color-scheme:light;
}
:root[data-theme=dark]{
  --green:#14532d; --dgreen:#86efac; --red:#7f1d1d; --dred:#fca5a5; --orange:#7c2d12; --dorange:#fdba74; --teal:#1e3a5f;
  --grey:#374151; --lgrey:#1f2937;
  --bg:#0f141c; --card:#171d27; --card2:#1f2733; --line:#28313f; --text:#e5e7eb; --muted:#9ca3af; --field:#111722; --fieldb:#334155;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:15px/1.45 "Inter","SF Pro Text",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
#app{display:flex;flex-direction:column;min-height:100vh;overflow-x:clip}
#topbar{position:sticky;top:0;z-index:20;background:linear-gradient(120deg,color-mix(in srgb,var(--navy) 88%,#000),var(--navy) 45%,color-mix(in srgb,var(--navy) 78%,#fff));color:#fff;display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));box-shadow:0 4px 18px color-mix(in srgb,var(--navy) 35%,transparent)}
#topbar h1{font-size:17px;margin:0;flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;cursor:pointer}
.iconbtn{background:none;border:0;color:#fff;font-size:28px;line-height:1;padding:0 6px;cursor:pointer}
#logo{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
#syncdot{width:10px;height:10px;border-radius:50%;background:#9ca3af;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
#syncdot.on{background:#34d399}#syncdot.off{background:#f59e0b}#syncdot.local{background:#a78bfa}
.escchip{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:14px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit}
.escchip:active{background:rgba(255,255,255,.3)}
#view{flex:1;padding:12px;padding-bottom:calc(92px + var(--safe-b));max-width:960px;width:100%;margin:0 auto;animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);border-radius:20px 20px 0 0;padding:6px 6px 0;padding-bottom:calc(6px + var(--safe-b));z-index:20;box-shadow:0 -6px 24px rgba(16,24,40,.10)}
#nav button{flex:1;min-width:0;border:0;background:none;padding:4px 0 4px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border-radius:16px;font-family:inherit;transition:.18s;position:relative}
#nav button .ico{font-size:20px;line-height:1;padding:5px 14px;border-radius:14px;transition:.18s cubic-bezier(.2,.8,.2,1)}
#nav button.active{color:var(--navy);font-weight:700}
:root[data-theme=dark] #nav button.active{color:#fff}
#nav button.active .ico{background:color-mix(in srgb,var(--navy) 16%,var(--card));transform:translateY(-1px)}
#nav button:active{transform:scale(.92)}
#nav button#navToggle{display:none}
#toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translateX(-50%) translateY(8px);background:#111827;color:#fff;padding:11px 18px;border-radius:14px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:90%;box-shadow:0 8px 24px rgba(0,0,0,.3)}
:root[data-theme=dark] #toast{background:#e5e7eb;color:#111827}
#toast.show{opacity:.97;transform:translateX(-50%) translateY(0)}
#toast.acao{pointer-events:auto;display:flex;gap:14px;align-items:center}
#toast button{background:none;border:0;color:#fbbf24;font-weight:700;font-size:14px;cursor:pointer;padding:0;font-family:inherit}
:root[data-theme=dark] #toast button{color:#b45309}

h2{font-size:18px;margin:14px 0 8px;color:var(--text);letter-spacing:-.01em}
h3{font-size:11.5px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;display:flex;align-items:center;gap:8px}
h3::after{content:"";flex:1;height:1px;background:var(--line)}
.card{background:var(--card);border-radius:var(--radius);padding:13px 15px;margin-bottom:10px;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.card.click{cursor:pointer;transition:.12s}
.card.click:active{transform:scale(.99);background:var(--card2)}
.row{display:flex;align-items:center;gap:10px}
.row .grow{flex:1;min-width:0}
.grow{flex:1 1 auto;min-width:0}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--lgrey);color:var(--text);line-height:1.5;transition:background .15s,color .15s}
.badge.red{background:var(--red);color:var(--dred)}.badge.green{background:var(--green);color:var(--dgreen)}
.badge.orange{background:var(--orange);color:var(--dorange)}.badge.blue{background:var(--teal);color:var(--navy)}
:root[data-theme=dark] .badge.blue{color:#bfdbfe}
.badge.grey{background:var(--grey);color:var(--muted)}.badge.yellow{background:#fef9c3;color:#854d0e}
:root[data-theme=dark] .badge.yellow{background:#713f12;color:#fde68a}
:is(button,label).btn{border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,color-mix(in srgb,var(--navy) 85%,#fff),var(--navy));color:#fff;font-family:inherit;transition:.12s;box-shadow:0 3px 10px color-mix(in srgb,var(--navy) 28%,transparent)}
:is(button,label).btn:active{transform:scale(.98);filter:brightness(.95)}
:is(button,label).btn.sec{background:var(--card);color:var(--navy);border:1.5px solid color-mix(in srgb,var(--navy) 45%,var(--card));box-shadow:none}
:root[data-theme=dark] :is(button,label).btn.sec{color:#dbeafe}
:is(button,label).btn.warn{background:linear-gradient(135deg,#dc2626,#991b1b);box-shadow:0 3px 10px rgba(185,28,28,.3)}
:is(button,label).btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
:is(button,label).btn:disabled{opacity:.5}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.btnrow .btn{flex:1}
label.f{display:block;margin:10px 0 4px;font-size:12.5px;color:var(--muted);font-weight:600}
input,select,textarea{width:100%;padding:10px 11px;border:1.5px solid var(--fieldb);border-radius:10px;font:inherit;background:var(--field);color:var(--text);transition:.12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)}
textarea{min-height:64px;resize:vertical}
input[type=number]{text-align:center}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;transition:.12s}
.tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 2px 8px color-mix(in srgb,var(--navy) 35%,transparent)}
.tabs.small button{padding:5px 11px;font-size:13px}
.grid{display:grid;gap:8px}
.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--card);border-radius:var(--radius);padding:11px 12px;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-top:3px solid color-mix(in srgb,var(--navy) 60%,var(--card))}
.stat b{display:block;font-size:22px;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
:root[data-theme=dark] .stat b{color:#bfdbfe}
.stat.red{border-top-color:#f87171}.stat.green{border-top-color:#4ade80}
.stat.red b{color:var(--dred)}.stat.green b{color:var(--dgreen)}
.list{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:10px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.list .item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border-bottom:1px solid var(--line);transition:.12s}
.list .item:last-child{border-bottom:0}
.list .item:active{background:var(--card2)}
.list .item .nr{width:28px;text-align:center;color:var(--muted);font-weight:700;font-size:12px;flex:0 0 auto}
.list .item .nm{flex:1;min-width:0;font-weight:600;font-size:14px}
.list .item .nm .sub{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.list .item.inativo .nm{color:var(--muted);opacity:.85}
.list .item.inativo .nm>.risc,.list .item.inativo .nm>b.risc{text-decoration:line-through}
.tog{width:54px;height:42px;border-radius:12px;border:2px solid var(--fieldb);background:var(--card);font-weight:800;font-size:16px;cursor:pointer;color:var(--muted);font-family:inherit;transition:background .12s,color .12s,border-color .12s,transform .1s}
.tog:active{transform:scale(.94)}
.tog.p{background:var(--green);color:var(--dgreen);border-color:#86efac}
.tog.f{background:var(--red);color:var(--dred);border-color:#fca5a5}
.tog.d{background:var(--lgrey);color:var(--muted);border-color:var(--fieldb);font-size:13px}
.tog.a{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
:root[data-theme=dark] .tog.a{background:#1e3a5f;color:#bfdbfe;border-color:#3b82f6}
.date-card{display:flex;align-items:center;gap:12px}
.date-card .chk{width:28px;height:28px;border-radius:50%;border:2px solid var(--fieldb);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex:0 0 auto}
.date-card .chk.ok{background:#22c55e;border-color:#22c55e}
.date-card .chk.esp{background:var(--orange);border-color:var(--orange);color:var(--dorange);font-size:9px;font-weight:800}
.date-card .d{font-weight:800;font-size:17px}
.date-card .d small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.date-card .n{font-weight:700;color:var(--dred);font-size:14px;white-space:nowrap}
.date-card .n.zero{color:var(--muted)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);font-size:13px}
.tbl th,.tbl td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:center}
.tbl th{background:var(--navy);color:#fff;font-size:11px;font-weight:700;position:sticky;top:0}
.tbl td.nm{text-align:left;font-weight:600;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl input[type=number],.tbl input[data-num]{width:54px;padding:6px 2px;border-radius:8px;text-align:center}
.tbl tr.inativo td{color:var(--muted);background:var(--card2)}
.tbl td.med{font-weight:800;color:var(--navy);background:var(--teal)}
:root[data-theme=dark] .tbl td.med{color:#bfdbfe}
.tbl td.med.baixa{background:var(--red);color:var(--dred)}
.tbl td.parcial{font-style:italic}
.tbl td.med.green{background:var(--green);color:var(--dgreen)}.tbl td.med.yellow{background:#fef9c3;color:#854d0e}.tbl td.med.orange{background:var(--orange);color:var(--dorange)}.tbl td.med.red{background:var(--red);color:var(--dred)}.tbl td.med.grey{background:var(--lgrey);color:var(--muted)}
:root[data-theme=dark] .tbl td.med.yellow{background:#713f12;color:#fde68a}
.tbl.small{font-size:12px}.tbl.small input{padding:4px 3px;font-size:12px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:var(--card)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.kv div:nth-child(odd){color:var(--muted)}
.chip{display:inline-block;background:var(--lgrey);border-radius:9px;padding:6px 10px;margin:3px 4px 3px 0;font-size:13px}
.chip.f{background:var(--red);color:var(--dred);font-weight:700}
.chip.esp{background:var(--orange);color:var(--dorange)}
.chip.a{background:#dbeafe;color:#1d4ed8}
:root[data-theme=dark] .chip.a{background:#1e3a5f;color:#bfdbfe}
.center{text-align:center}
.loginwrap{position:fixed;inset:0;background:radial-gradient(900px 500px at 15% -10%,color-mix(in srgb,var(--navy) 55%,#fff) 0%,transparent 60%),radial-gradient(700px 500px at 110% 110%,#0ea5e9 0%,transparent 55%),linear-gradient(160deg,var(--navy) 0%,#2e5c9a 60%,#3b76c4 100%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:30}
.login{width:100%;max-width:380px;background:var(--card);border-radius:24px;padding:28px 22px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login .logo{display:block;width:92px;height:92px;margin:0 auto 8px;filter:drop-shadow(0 8px 18px rgba(8,20,44,.28))}
.login h2{text-align:center;margin:6px 0 2px;font-size:22px}
.login .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}
.login .btn{width:100%;margin-top:6px}
.login a{color:var(--blue);font-size:13px}
.login .btn.google{background:var(--card);color:var(--text);border:1.5px solid var(--fieldb);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;box-shadow:none}
.login .ou{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0 6px}
.login .ou::before,.login .ou::after{content:"";flex:1;height:1px;background:var(--line)}
hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.warnbox{background:#fffbeb;border-left:4px solid #f59e0b;padding:9px 11px;border-radius:10px;font-size:13px;margin:8px 0;color:#78350f}
:root[data-theme=dark] .warnbox{background:#3b2a08;color:#fde68a}
.okbox{background:var(--green);border-left:4px solid #22c55e;padding:9px 11px;border-radius:10px;font-size:13px;margin:8px 0;color:var(--dgreen)}
.errbox{background:var(--red);border-left:4px solid var(--dred);padding:9px 11px;border-radius:10px;font-size:13px;margin:8px 0;color:var(--dred)}
details summary{cursor:pointer;font-weight:700;color:var(--navy);padding:6px 0;list-style:none}
:root[data-theme=dark] details summary{color:#bfdbfe}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸";display:inline-block;margin-right:6px;transition:.15s;color:var(--muted)}
details[open] summary::before{transform:rotate(90deg)}
.search{position:sticky;top:56px;z-index:5;background:var(--bg);padding:4px 0 8px}
code{background:var(--lgrey);padding:1px 6px;border-radius:6px;font-size:12px}
.instb{border-left:4px solid var(--navy)}
.card.sel{box-shadow:0 0 0 2px var(--navy),var(--shadow)}
.modalwrap{position:fixed;inset:0;background:rgba(17,24,39,.55);display:flex;align-items:flex-end;justify-content:center;z-index:40;padding:14px;backdrop-filter:blur(3px);animation:fadeIn .15s}
.modal{background:var(--card);border-radius:22px;padding:18px;width:100%;max-width:440px;box-shadow:0 20px 50px rgba(0,0,0,.35);max-height:88vh;overflow:auto;animation:up .22s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.passos{padding-left:20px;margin:6px 0}.passos li{margin:6px 0;line-height:1.4}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:8px;font:inherit;cursor:pointer;color:var(--text)}
.opt.sel{border-color:var(--navy);background:var(--card2)}
.opt .tog{flex:0 0 auto}

/* hero do Início */
.hero{border-radius:20px;padding:16px 16px 14px;color:#fff;margin:6px 0 10px;background:linear-gradient(135deg,var(--navy) 0%,color-mix(in srgb,var(--navy) 70%,#38bdf8) 100%);box-shadow:0 10px 26px color-mix(in srgb,var(--navy) 35%,transparent);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero::after{content:"";position:absolute;right:40px;bottom:-70px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero .hi{font-size:13px;opacity:.9}
.hero .dt{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:2px 0 8px}
.hero .esc{font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hero .esc .pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 9px;font-weight:700}
.hero .kpis{display:flex;gap:8px;margin-top:12px;position:relative}
.hero .kpi{flex:1;background:rgba(255,255,255,.14);border-radius:14px;padding:8px 10px;backdrop-filter:blur(4px)}
.hero .kpi b{display:block;font-size:20px;line-height:1.1}
.hero .kpi span{display:block;font-size:11px;line-height:1.3;opacity:.9;text-wrap:balance;hyphens:none}

/* atalhos e semana */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 4px}
.quick button{border:0;background:var(--card);border-radius:16px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text);cursor:pointer;box-shadow:var(--shadow);font-family:inherit;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);transition:.12s}
.quick button span{font-size:20px;line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--navy) 10%,var(--card));color:var(--navy)}
:root[data-theme=dark] .quick button span{color:#bfdbfe}
.quick button span svg{width:22px;height:22px}
.quick button:active{transform:scale(.95)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0 4px}
.week .wd{background:var(--card);border-radius:14px;padding:6px 2px;text-align:center;cursor:pointer;box-shadow:var(--shadow);border:1.5px solid transparent;font-size:11px;color:var(--muted);transition:.12s}
.week .wd:active{transform:scale(.95)}
.week .wd b{display:block;font-size:15px;color:var(--text)}
.week .wd.hoje{border-color:var(--navy);background:var(--teal)}
.week .wd.hoje b{color:var(--navy)}
:root[data-theme=dark] .week .wd.hoje b{color:#bfdbfe}
.week .wd.off{opacity:.5}
.week .wd .m{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:9px;font-weight:700;color:var(--navy);margin-top:3px;min-height:12px;line-height:1.15}
.week .wd .m.esp{color:var(--dorange);display:block}
.week .wd .m i{display:inline-block;width:6px;height:6px;border-radius:50%}
.swipehint{text-align:center;color:var(--muted);font-size:11.5px;margin:6px 0 2px}
.tdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 2px var(--card)}

/* calendário */
.cal{background:var(--card);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow);touch-action:pan-y}
.cal-h{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:4px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-d{min-height:58px;border-radius:11px;background:var(--card2);padding:4px 4px;position:relative;cursor:pointer;display:flex;flex-direction:column;border:1.5px solid transparent;transition:.1s}
.cal-d:active{transform:scale(.96)}
.cal-d.empty{background:transparent;cursor:default}
.cal-d.fds{background:color-mix(in srgb,var(--card2) 60%,var(--bg))}
.cal-d.fora{opacity:.4}
.cal-d.hoje{border-color:var(--navy);background:var(--teal)}
.cal-d.fer{background:var(--red)}
.cal-d.anp{background:var(--orange)}
.cal-d .n{font-size:12px;font-weight:700;color:var(--text)}
.cal-d.hoje .n{color:var(--navy)}
:root[data-theme=dark] .cal-d.hoje .n{color:#bfdbfe}
.cal-d .tag{font-size:8.5px;font-weight:700;color:var(--dorange);line-height:1.1;margin-top:1px;word-break:break-word}
.cal-d .tag.t{color:var(--navy);display:flex;flex-wrap:wrap;gap:2px 4px}
:root[data-theme=dark] .cal-d .tag.t{color:#bfdbfe}
.cal-d .tag.t i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:2px;vertical-align:middle}
.cal-d .dots{margin-top:auto;display:flex;gap:2px;flex-wrap:wrap}
.cal-d .dots i,i.lg{display:inline-block;width:7px;height:7px;border-radius:50%}
i.lg{width:9px;height:9px;vertical-align:middle}
.dots i.ok,i.lg.ok{background:#22c55e}.dots i.pend,i.lg.pend{background:#f59e0b}.dots i.fut,i.lg.fut{background:#94a3b8}.dots i.ev,i.lg.ev{background:#7c3aed}

.empty{text-align:center;padding:30px 16px;color:var(--muted);line-height:1.5}
.empty .ico{font-size:36px;display:block;margin-bottom:8px}
.seg{display:inline-flex;background:var(--lgrey);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit}
.seg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)}

@media print{#topbar,#nav,.noprint{display:none!important}#view{padding:0}body{background:#fff}.card{box-shadow:none;border:1px solid #ddd}}
@media (min-width:700px){#nav{max-width:960px;margin:0 auto}}
@media (min-width:600px){.modalwrap{align-items:center}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* notas em lista (celular) */
.nlist{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:var(--card)}
.nrow{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-bottom:1px solid var(--line)}
.nrow:last-child{border-bottom:0}
.nrow .nr{width:26px;text-align:center;color:var(--muted);font-weight:700;font-size:12px;flex:0 0 auto}
.nrow .nm{flex:1;min-width:0;font-weight:600;font-size:14px;line-height:1.25}
.nrow .nm .sub{display:block;font-weight:400;margin-top:3px}
.nrow.inativo .nm{color:var(--muted);text-decoration:line-through}
.nrow input.nin{width:84px;flex:0 0 auto;font-size:18px;font-weight:700;padding:10px 6px;border-radius:12px;text-align:center}
.nrow input.nin:focus{background:color-mix(in srgb,var(--navy) 8%,var(--card))}
/* a 1ª coluna (Nº) tem largura FIXA de 40px — é o mesmo valor do "left" da coluna do nome, senão
   o nome fixo passa por cima da 1ª coluna de nota (era o cabeçalho azul "tampando") */
.tbl.fixo th:first-child,.tbl.fixo td:first-child{position:sticky;left:0;z-index:2;background:var(--card);width:40px;min-width:40px;max-width:40px;box-sizing:border-box;padding-left:3px;padding-right:3px}
.tbl.fixo th:nth-child(2),.tbl.fixo td:nth-child(2){position:sticky;left:40px;z-index:2;background:var(--card);box-shadow:6px 0 8px -5px rgba(0,0,0,.18)}
/* z-index 6: os cabeçalhos fixos (Nº, Aluno, Nota) ficam ACIMA dos cabeçalhos de instrumento
   que rolam (z-index 5), senão o cabeçalho azul passava por cima do nome ao rolar */
.tbl.fixo th:first-child,.tbl.fixo th:nth-child(2){background:var(--navy);z-index:6}
.tbl.fixo tr.inativo td:first-child,.tbl.fixo tr.inativo td:nth-child(2){background:var(--card2)}
/* a coluna-resumo (Nota / Faltas / Final) fica fixa à direita: o professor sempre vê o nome (esquerda) e a nota (direita), rolando só os instrumentos no meio */
.tbl.fixo th:last-child,.tbl.fixo td:last-child{position:sticky;right:0;z-index:2;box-shadow:-6px 0 8px -5px rgba(0,0,0,.18)}
.tbl.fixo td:last-child:not(.med){background:var(--card)}
.tbl.fixo tr.inativo td:last-child:not(.med){background:var(--card2)}
.tbl.fixo th:last-child{background:var(--navy);z-index:6}
/* no celular, o nome ocupa menos para caber mais instrumento sem rolar tanto */
@media (max-width:430px){ .tbl td.nm{max-width:104px} .tbl.fixo td:last-child,.tbl.fixo th:last-child{box-shadow:-5px 0 7px -5px rgba(0,0,0,.22)} }
.tabs.grow{flex:1;min-width:0}
/* cabeçalho compacto de Notas */
.nhead{padding:10px 12px}
/* pequeno realce quando um número acompanha a digitação (média, contagem da coluna) */
@keyframes flashUpd{0%{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--navy) 22%,transparent)}100%{box-shadow:inset 0 0 0 999px transparent}}
.tbl td.med.flash{animation:flashUpd .6s ease-out}
.thn.flash{animation:flashUpd .6s ease-out;border-radius:6px}
@media (prefers-reduced-motion:reduce){.tbl td.med.flash,.thn.flash{animation:none}}
/* aviso "faltam X notas" — vivo, atualiza a cada nota digitada */
.faltam{display:flex;align-items:center;gap:12px;margin:8px 0 2px;padding:10px 13px;border-radius:14px;background:color-mix(in srgb,var(--orange) 45%,var(--card));border:1px solid color-mix(in srgb,var(--dorange) 28%,transparent);color:var(--text)}
.faltam .fn{flex:0 0 auto;min-width:38px;height:38px;border-radius:10px;background:var(--dorange);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.faltam b{font-size:14.5px}
.faltam.ok{background:color-mix(in srgb,var(--green) 45%,var(--card));border-color:color-mix(in srgb,var(--dgreen) 28%,transparent);gap:8px;font-weight:600;font-size:13.5px}
.faltam.ok .ic{color:var(--dgreen);flex:0 0 auto}
.faltam.ok .ic svg{width:20px;height:20px}
.nsel{flex:1;min-width:0;padding:9px 10px;font-weight:700;border-radius:12px;background:var(--card2);border-color:transparent}
.ibtn{border:1.5px solid var(--line);background:var(--card);border-radius:12px;width:40px;height:40px;font-size:18px;cursor:pointer;color:var(--navy);flex:0 0 auto;font-family:inherit}
.stepper{display:flex;align-items:center;gap:8px;margin-top:10px;background:color-mix(in srgb,var(--navy) 8%,var(--card));border-radius:14px;padding:6px 6px}
.stepper button{width:40px;height:40px;border:0;border-radius:11px;background:var(--card);color:var(--navy);font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--shadow);font-family:inherit;flex:0 0 auto}
.stepper button:active{transform:scale(.92)}
.stepper .grow{text-align:center;min-width:0}
.stepper b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper span{display:block;font-size:11.5px;color:var(--muted)}
.progress{height:8px;border-radius:99px;background:var(--lgrey);overflow:hidden}
.progress.sm{height:5px}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--navy) 70%,#fff),var(--navy));transition:width .4s ease-out}
.progress i[style*="100%"]{background:linear-gradient(90deg,#22c55e,#16a34a)}
.seg button{padding:6px 10px}

/* ============================================================ v3 — sistema visual */
:root{--fs:15px}
html,body{font-size:var(--fs)}
.ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}
.ic svg{width:1.35em;height:1.35em}
#nav button .ico{padding:5px 12px;display:flex}
#nav button .ico svg{width:23px;height:23px;transition:.18s}
#nav button.active .ico svg{stroke-width:2.3}
#nav button::after{content:"";position:absolute;top:2px;left:50%;width:0;height:3px;border-radius:99px;background:var(--navy);transform:translateX(-50%);transition:width .22s cubic-bezier(.2,.8,.2,1)}
#nav button.active::after{width:22px}
:root[data-theme=dark] #nav button::after{background:#93c5fd}
#topbar .tb-ic{background:rgba(255,255,255,.14);border:0;border-radius:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex:0 0 auto}
#topbar .tb-ic svg{width:20px;height:20px}
#btnBack{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);font-size:28px;padding:0;flex:0 0 auto}
#btnBack:active{background:rgba(255,255,255,.32);transform:scale(.94)}
/* transições entre telas */
#view.anim-fwd{animation:slideL .22s cubic-bezier(.2,.8,.2,1)}
#view.anim-back{animation:slideR .22s cubic-bezier(.2,.8,.2,1)}
#view.anim-fade{animation:fadeIn .18s ease-out}
@keyframes slideL{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* cartão "agora" */
.agora{border-radius:20px;padding:14px 16px;margin:0 0 10px;background:var(--card);box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);position:relative;overflow:hidden}
.agora::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acc,var(--navy))}
.agora .lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.agora .lbl .pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.agora .tt{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}
.agora .st{font-size:13px;color:var(--muted)}
.agora .bar{height:6px;border-radius:99px;background:var(--lgrey);margin:10px 0 4px;overflow:hidden}
.agora .bar i{display:block;height:100%;background:var(--acc,var(--navy));border-radius:99px;transition:width .4s}
.agora .btnrow{margin:10px 0 0}
/* chips e barra de ferramentas */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip-b{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;transition:.12s;white-space:nowrap}
.chip-b:active{transform:scale(.96);background:var(--card2)}
.chip-b.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.toolbar{display:flex;gap:6px;align-items:center;margin:6px 0 10px}
.toolbar input{flex:1;min-width:0;padding:9px 11px;border-radius:12px}
.toolbar .ibtn{width:42px;height:42px}
.ibtn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* pendências */
div.pend{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);margin-bottom:6px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);cursor:pointer}
.pend .ic{width:30px;height:30px;border-radius:10px;background:var(--orange);color:var(--dorange);flex:0 0 auto}
.pend .ic.b{background:var(--teal);color:var(--navy)}.pend .ic.r{background:var(--red);color:var(--dred)}.pend .ic.g{background:var(--green);color:var(--dgreen)}
.pend .tx{flex:1;min-width:0;font-weight:600;font-size:13px}
.pend .tx small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
/* menu "Mais" em grade */
.menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.menu .mi{background:var(--card);border-radius:16px;padding:12px 12px 10px;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:6px;min-height:92px}
.menu .mi:active{transform:scale(.97);background:var(--card2)}
.menu .mi .ic{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--navy) 12%,var(--card));color:var(--navy)}
:root[data-theme=dark] .menu .mi .ic{color:#bfdbfe}
.menu .mi b{font-size:14px}
.menu .mi small{color:var(--muted);font-size:11.5px;line-height:1.3}
/* ferramentas de sala */
.bigname{font-size:clamp(26px,7vw,40px);font-weight:900;letter-spacing:-.02em;text-align:center;padding:26px 10px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--navy) 12%,var(--card)),var(--card));border:1.5px dashed color-mix(in srgb,var(--navy) 40%,transparent);min-height:120px;display:flex;align-items:center;justify-content:center;line-height:1.15;word-break:break-word}
.bigname.roll{animation:roll .35s}
@keyframes roll{0%{opacity:.2;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
.timerbig{font-size:clamp(60px,20vw,110px);font-weight:900;letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums;line-height:1;padding:18px 0 10px;color:var(--navy)}
:root[data-theme=dark] .timerbig{color:#dbeafe}
.timerbig.fim{color:var(--dred);animation:blink .6s 6}
@keyframes blink{50%{opacity:.25}}
.tring{height:10px;border-radius:99px;background:var(--lgrey);overflow:hidden;margin:6px 0 12px}
.tring i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);background-size:100% 100%;transition:width 1s linear}
.grupo{background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);border-left:5px solid var(--acc,var(--navy));margin-bottom:8px}
.grupo b{display:block;margin-bottom:4px}
.grupo span{display:inline-block;background:var(--lgrey);border-radius:8px;padding:3px 8px;margin:2px 4px 2px 0;font-size:13px}
.partrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--card)}
.partrow:last-child{border-bottom:0}
.partrow .nm{flex:1;min-width:0;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.partrow .cnt{min-width:34px;text-align:center;font-weight:800;color:var(--navy);font-size:16px}
.partrow button{width:44px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--card2);font:inherit;font-weight:800;font-size:18px;cursor:pointer;color:var(--text)}
.partrow button:active{transform:scale(.92)}
.partrow button.plus{background:var(--green);color:var(--dgreen);border-color:#86efac}
/* aniversário */
.bday{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fdf2f8,#fff7ed);border-radius:14px;padding:10px 12px;margin-bottom:8px;border:1px solid #fbcfe8}
:root[data-theme=dark] .bday{background:linear-gradient(135deg,#3b1d2e,#3b2a08);border-color:#7c2d5c}
/* contato */
.contato{display:flex;gap:8px;margin-top:8px}
.contato .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.btn.zap{background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 3px 10px rgba(18,140,126,.35)}
/* histograma simples */
.hist{display:flex;gap:6px;align-items:flex-end;height:64px;margin:8px 0 2px}
.hist div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:10.5px;color:var(--muted);gap:3px}
.hist i{display:block;width:100%;border-radius:6px 6px 3px 3px;min-height:3px}
/* erro de tela */
.errview{text-align:center;padding:30px 14px}
.errview .ic{width:56px;height:56px;border-radius:18px;background:var(--red);color:var(--dred);margin:0 auto 10px}
.errview .ic svg{width:30px;height:30px}
/* tamanhos de fonte */
:root[data-fs=g]{--fs:17px}
:root[data-fs=p]{--fs:14px}
:root[data-fs=g] .tog{width:62px;height:48px;font-size:18px}
:root[data-fs=g] .list .item .nm{font-size:16px}
/* status da nuvem no topo */
#syncdot{transition:.3s}
/* barra de progresso do bimestre */
/* lista de agenda */
.agd{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.agd:last-child{border-bottom:0}
.agd .d{width:46px;flex:0 0 auto;text-align:center}
.agd .d b{display:block;font-size:18px;line-height:1}
.agd .d small{font-size:11px;color:var(--muted);text-transform:uppercase}
.agd .d.hoje b{color:var(--navy)}
.agd .c{flex:1;min-width:0;font-size:13.5px}
.agd .c .l{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer}
.agd .c .l i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.agd .c .l small{color:var(--muted)}
.ocmodal .tipo{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.sec-h h3{margin:0}.sec-h h3::after{display:none}
.sec-h a{font-size:12px;color:var(--navy);font-weight:700;text-decoration:none}
.av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.02em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.list .item .av{margin-right:-2px}
.meudia .md{display:flex;align-items:center;gap:10px;padding:9px 6px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);cursor:pointer}
.meudia .md:first-of-type{border-top:0}
.meudia .md .hr{width:46px;text-align:center;line-height:1.1}.meudia .md .hr b{display:block;font-size:14px}.meudia .md .hr small{color:var(--muted);font-size:11px}
.meudia .md .grow small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.meudia .md.on{background:color-mix(in srgb,var(--navy) 8%,transparent);border-radius:12px;padding:9px 8px;margin:2px -2px}
.meudia .md.late .grow small{color:var(--dorange);font-weight:600}
.meudia .md.ok .grow small{color:var(--dgreen)}
.escmini{display:inline-block;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:99px;vertical-align:middle;margin-left:2px;letter-spacing:.02em}
.chips.massa{margin:-4px 0 10px}
.chips.massa .chip-b.p{border-color:var(--dgreen);color:var(--dgreen)}
.chips.massa .chip-b.f{border-color:var(--dred);color:var(--dred)}
.chips.massa .chip-b.a{border-color:var(--dorange);color:var(--dorange)}
.chips.massa .chip-b{font-weight:700}
.mdbtn{flex:0 0 auto;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:10px;background:var(--navy);color:#fff}
.mdbtn.ok{background:transparent;color:var(--navy);border:1.5px solid color-mix(in srgb,var(--navy) 45%,var(--card))}
:root[data-theme=dark] .mdbtn.ok{color:#bfdbfe}
.escdot{width:12px;height:12px;border-radius:50%;background:var(--c);flex:0 0 auto}
.wk{flex:1;min-width:0;text-align:center;background:color-mix(in srgb,var(--lgrey) 55%,transparent);border-radius:12px;padding:6px 2px;cursor:pointer}
.wk.hoje{outline:2px solid var(--navy)}
.wk b{display:block;font-size:15px}.wk small{font-size:10px;color:var(--muted)}
.wk .dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;min-height:8px;margin:3px 0}
.wk .dots i{width:6px;height:6px;border-radius:50%}
@media (max-width:380px){#nav button{font-size:9px}#nav button .ico{padding:5px 9px}}

/* painel completo (3.8) */
.tchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--lgrey) 55%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:pointer;line-height:1.3}
.tchip small{font-weight:500;color:var(--muted);font-size:11px}
.tchip.warn{background:var(--orange);border-color:transparent}.tchip.warn small{color:var(--dorange)}
.tchip.ok small{color:var(--dgreen)}
.pend.mini{margin:8px 0 0;padding:8px 10px}
.pend.mini .ic{width:30px;height:30px;border-radius:10px}
.pend.mini .ic svg{width:18px;height:18px}
.kvline{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;color:var(--muted)}
.kvline:empty{display:none}
.stat b small{font-size:13px;font-weight:600}

/* transcrição / planejamento (4.0) */
.card.tr.ok{background:color-mix(in srgb,var(--green) 35%,var(--card));border-color:color-mix(in srgb,var(--dgreen) 30%,transparent)}
.card.tr .trchk{display:flex;align-items:center;padding:2px 2px 0 0;flex:0 0 auto}
.card.tr .trchk input{width:22px;height:22px;accent-color:var(--dgreen)}
.card.tr.ok .grow>div:nth-child(2){text-decoration:none;opacity:.85}
.chk{width:20px!important;height:20px;flex:0 0 auto;margin:0;accent-color:var(--navy)}
/* v5.0 — assistente, notificações, ano letivo */
#btnIA{margin-left:2px}
#iaChat{display:flex;flex-direction:column;gap:8px;padding:4px 0 10px;min-height:120px}
.msg{max-width:92%;padding:10px 12px;border-radius:16px;font-size:14px;line-height:1.5;position:relative;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);box-shadow:var(--shadow);border-bottom-left-radius:4px}
.msgact{display:flex;gap:2px;margin-top:6px;justify-content:flex-end}
.msgact button{background:none;border:0;color:var(--muted);padding:2px 4px;cursor:pointer}
.msgact button svg{width:16px;height:16px}
.iabar{position:sticky;bottom:8px;display:flex;gap:6px;align-items:flex-end;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:20px;padding:6px 6px 6px 12px;box-shadow:var(--shadow);margin-top:6px}
.iabar textarea{flex:1;border:0;background:transparent;resize:none;min-height:36px;max-height:120px;padding:8px 0;font-size:15px;box-shadow:none}
.iabar textarea:focus{outline:none;box-shadow:none}
.iabar .btn{padding:8px 12px;border-radius:14px;flex:0 0 auto}
.iabar .btn svg{width:20px;height:20px}
.iconbtn.mic{color:var(--muted);flex:0 0 auto}
.iconbtn.mic.on{color:var(--dred);animation:pulse 1s infinite}
.iconbtn.mic svg,.iconbtn svg{width:20px;height:20px}
.dots3{display:inline-flex;gap:4px;padding:4px 2px}.dots3 i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}.dots3 i:nth-child(2){animation-delay:.2s}.dots3 i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.nlist{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.nlist label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-size:13.5px;line-height:1.4}
.nlist label input[type=number],.nlist label input[type=time]{vertical-align:middle;margin:0 2px}
.anowrap{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:14px}
.ano{width:100%;max-width:440px;text-align:center}
.ano .logo{width:76px;height:76px;filter:drop-shadow(0 6px 14px rgba(8,20,44,.22))}
.ano h2{margin:12px 0 2px}.ano .sub{color:var(--muted);margin-bottom:16px}
.anolist{display:flex;flex-direction:column;gap:10px}
.anocard{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:2px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--text)}
.anocard b{font-size:22px;letter-spacing:-.02em;min-width:64px;color:var(--navy)}
:root[data-theme=dark] .anocard b{color:#bfdbfe}
.anocard small{flex:1;color:var(--muted);font-size:12.5px;line-height:1.35}
.anocard.sel{border-color:var(--navy)}
.anocard.vazio{opacity:.75}
.anocard.novo{border-style:dashed;background:color-mix(in srgb,var(--lgrey) 40%,var(--card))}
.anocard .badge{flex:0 0 auto}
.f.grow{flex:1}
/* 5.2 — limpeza visual */
.sec-h{margin:14px 2px 6px}
.bimlinha .bar{height:6px;border-radius:99px;background:var(--lgrey);overflow:hidden;margin-top:8px}
.bimlinha .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--navy) 70%,#fff),var(--navy))}
details.cfg>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none}
details.cfg>summary::-webkit-details-marker{display:none}
details.cfg>summary::before{content:none;display:none}   /* o ‹›› do fim já indica: sem duas setas */
details.cfg>summary h3{margin:0;font-size:15px}
details.cfg>summary::after{content:'›';font-size:20px;color:var(--muted);transform:rotate(90deg);transition:.15s;margin-left:4px}
details.cfg[open]>summary::after{transform:rotate(-90deg)}
details.cfg[open]>summary{margin-bottom:8px}
.menu{margin-bottom:6px}
/* ---- gráficos (5.2) */
.gbar{display:flex;flex-direction:column;gap:7px}
.gb{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:8px}
.gb .gl{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb .gt{height:16px;border-radius:99px;background:color-mix(in srgb,var(--lgrey) 70%,transparent);overflow:hidden}
.gb .gt i{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.gb .gv{font-size:12px;font-weight:700;min-width:44px;text-align:right;color:var(--text)}
.gb .gv small{font-weight:400}
.gleg{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.gleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px}
.gcolwrap{position:relative}
.gcol{display:flex;align-items:flex-end;gap:6px;padding-top:4px}
.gc{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}
.gc .gv{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap}
.gc i{display:block;width:100%;max-width:52px;border-radius:8px 8px 4px 4px;transition:height .3s ease}
.gc .gl{font-size:11px;color:var(--muted);height:16px;line-height:16px}
.gref{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed color-mix(in srgb,var(--muted) 60%,transparent);pointer-events:none}
.gref b{position:absolute;right:0;top:-8px;font-size:10px;font-weight:700;color:var(--muted);background:var(--card);padding:0 4px;border-radius:4px}
.grosca{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--navy)}
:root[data-theme=dark] .grosca{color:#bfdbfe}
table.tbl.zebra tbody tr:nth-child(even){background:color-mix(in srgb,var(--lgrey) 35%,transparent)}
table.tbl.zebra td .nm{display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.tbl.zebra tbody tr:active{background:var(--card2)}
table.tbl .tdot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:3px}
.gbar.wide .gb{grid-template-columns:minmax(72px,32%) 1fr auto}
.gbar.wide .gb .gl{white-space:normal;line-height:1.2;font-size:11.5px}
table.tbl.zebra td{white-space:nowrap;vertical-align:middle}
table.tbl.zebra td:first-child{color:var(--muted);font-size:12px}

/* ---- v5.3: visão geral, troca de escola, calendário */
.escsel{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.escopt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card2);border:1.5px solid transparent;border-radius:14px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--text)}
.escopt.sel{border-color:var(--navy);background:color-mix(in srgb,var(--navy) 8%,var(--card2))}
.escopt:active{transform:scale(.98)}
.escopt b{display:block;font-size:14px}
.escopt small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3;margin-top:1px}
.escopt .ic svg{width:18px;height:18px}
.escdot2{width:34px;height:34px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto}
.escdot2 svg{width:18px;height:18px;stroke:#fff}
.geralopt{margin-top:8px;background:color-mix(in srgb,var(--navy) 6%,var(--card2))}
.card.diaesc{border-left:5px solid var(--c);padding:10px 12px}
.card.diaesc .md{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);cursor:pointer}
.card.diaesc .md:first-of-type{border-top:0}
.card.diaesc .md .hr{width:44px;text-align:center;line-height:1.1}
.card.diaesc .md .hr b{display:block;font-size:13.5px}.card.diaesc .md .hr small{color:var(--muted);font-size:10.5px}
.card.diaesc .md .grow small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.card.diaesc .md.on{background:color-mix(in srgb,var(--navy) 8%,transparent);border-radius:12px}
.card.diaesc .md.late .grow small{color:var(--dorange);font-weight:600}
.card.diaesc .md.ok .grow small{color:var(--dgreen)}
.card.escbox{border-left:5px solid var(--c)}
.card.escbox.atual{box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 35%,transparent),var(--shadow)}
.mini{background:color-mix(in srgb,var(--lgrey) 45%,transparent);border-radius:12px;padding:7px 4px;text-align:center}
.mini b{display:block;font-size:17px;line-height:1.15;color:var(--navy)}
:root[data-theme=dark] .mini b{color:#bfdbfe}
.mini span{font-size:10px;color:var(--muted);line-height:1.15;display:block;margin-top:2px}
.mini.ok b{color:var(--dgreen)}.mini.bad b{color:var(--dred)}
.calhead{display:flex;align-items:center;gap:8px;background:var(--card);border-left:5px solid var(--c);border-radius:14px;padding:9px 12px;box-shadow:var(--shadow);margin-bottom:8px}
.calhead b{font-size:13.5px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calhead .small{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calhead .escdot{width:12px;height:12px;border-radius:50%;background:var(--c);flex:0 0 auto}
/* roteiro e placar (5.3) */
.seg.scroll{display:flex;overflow-x:auto;scrollbar-width:none;gap:2px}
.seg.scroll::-webkit-scrollbar{display:none}
.seg.scroll button{flex:0 0 auto;white-space:nowrap;padding:6px 12px}
.rotlist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rot{display:flex;align-items:center;gap:10px;background:var(--card2);border:1.5px solid transparent;border-radius:12px;padding:8px 10px}
.rot.on{border-color:var(--navy)}
.rot.ok{background:color-mix(in srgb,var(--green) 40%,var(--card2))}
.rot.ok b{text-decoration:line-through;opacity:.7}
.rot .grow{cursor:pointer}
.rot b{font-size:13.5px}.rot small{display:block;color:var(--muted);font-size:11.5px}
.rotck{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--card);font-weight:800;color:var(--muted);cursor:pointer;flex:0 0 auto;font-family:inherit}
.rot.ok .rotck{background:var(--dgreen);border-color:var(--dgreen);color:#fff}
.rot.on .rotck{border-color:var(--navy);color:var(--navy)}
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.eq{background:var(--card2);border-top:4px solid var(--c);border-radius:14px;padding:10px 8px;text-align:center}
.eq b{font-size:13px;display:block}
.eq .pts{font-size:34px;font-weight:800;color:var(--c);line-height:1.1;margin:2px 0 6px}
.quick.q3{grid-template-columns:repeat(3,1fr)}
.card.atv{padding:10px 12px;margin-bottom:8px}
.card.atv b{font-size:14px}
/* puxar para atualizar (5.4) */
#ptr{position:fixed;left:0;right:0;top:58px;display:flex;justify-content:center;pointer-events:none;z-index:15;opacity:0;transition:opacity .15s}
#ptr .ptrin{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--shadow);border-radius:999px;padding:7px 14px;color:var(--navy);font-size:12.5px;font-weight:700;transform:translateY(calc(var(--p,0px) - 12px));transition:transform .12s}
:root[data-theme=dark] #ptr .ptrin{color:#bfdbfe}
#ptr .ptrsp{transform:rotate(calc(var(--p,0px) * 3deg));transition:transform .1s}
#ptr.pronto .ptrin{background:var(--navy);color:#fff;border-color:transparent}
#ptr.load{opacity:1}
#ptr.load .ptrin{transform:translateY(6px)}
#ptr.load .ptrsp{animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

@media (max-width:400px){#topbar h1{font-size:15.5px}}
/* validação de nota (6.0) */
input.erro{border-color:var(--dred)!important;background:color-mix(in srgb,var(--red) 45%,var(--card))!important;color:var(--dred)!important}
.tbl input[data-num]{text-align:center}
/* busca rápida (6.0) */
.modalwrap.topo{align-items:flex-start;padding-top:calc(12px + var(--safe-t,0px))}
.modal.busca{width:100%;max-width:560px;padding:0;overflow:hidden}
.busca .brow{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.busca .brow .ic{color:var(--muted)}
.busca input{flex:1;border:0;background:none;font-size:16px;padding:6px 0;box-shadow:none}
.busca input:focus{outline:none;box-shadow:none}
.bres{max-height:min(62vh,520px);overflow:auto;padding:6px}
.bgrp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:8px 8px 4px}
.bitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:9px 8px;cursor:pointer;font:inherit;color:var(--text)}
.bitem.sel,.bitem:hover{background:var(--card2)}
.bitem b{display:block;font-size:14px;font-weight:600}
.bitem small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.bitem mark{background:color-mix(in srgb,var(--navy) 22%,transparent);color:inherit;border-radius:4px;padding:0 1px}
.bitem .ic{color:var(--navy);flex:0 0 auto}
:root[data-theme=dark] .bitem .ic{color:#93c5fd}
.bav{width:30px;height:30px;border-radius:50%;background:var(--lgrey);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.bvazio{padding:22px 14px;text-align:center;color:var(--muted);font-size:13.5px}
/* turma da aula de agora (6.1) */
.agoratag{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--dgreen);background:var(--green);border-radius:999px;padding:3px 10px}
.agoratag.prox{color:var(--navy);background:var(--teal)}
:root[data-theme=dark] .agoratag.prox{color:#bfdbfe}
.card.agoracard{box-shadow:0 0 0 2px color-mix(in srgb,var(--dgreen) 45%,transparent),var(--shadow)}
/* horários da escola (6.2) */
.hrtabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.hrtabs::-webkit-scrollbar{display:none}
.hrtab{position:relative;flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-transform:capitalize}
.hrtab.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.hrtab i,.hrtab u{position:absolute;top:5px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--dorange)}
.hrtab u{background:var(--muted);opacity:.45}
.hrtab.sel i{background:#fff}
.hrhead,.hrrow{display:grid;grid-template-columns:34px 1fr 1fr 58px minmax(120px,1.4fr) 84px;gap:6px;align-items:center}
.hrhead{padding:6px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.hrrow{padding:4px 0;border-top:1px solid var(--line)}
.hrrow.intervalo{background:color-mix(in srgb,var(--lgrey) 60%,transparent);border-radius:10px}
.hrrow input,.hrrow select{margin:0;padding:7px 6px;font-size:13.5px;height:auto}
.hrrow .hrn{font-weight:800;font-size:13px;text-align:center;color:var(--navy)}
:root[data-theme=dark] .hrrow .hrn{color:#93c5fd}
.hrrow .hrt{display:flex;gap:4px;min-width:0}
.hrrow .hrt select{flex:0 0 92px}
.hrrow .hrt .hrRot{flex:1 1 auto;min-width:0}
.hrrow .hracts{display:flex;gap:2px;justify-content:flex-end}
.hrrow .hracts .iconbtn{width:26px;height:26px;font-size:12px;color:var(--muted)}
.hrrow .hracts .iconbtn[disabled]{opacity:.3}
@media (max-width:560px){
  .hrhead{display:none}
  .hrrow{grid-template-columns:28px 1fr 1fr 78px;grid-template-areas:'n ini fim acts' 'n tipo tipo min';row-gap:5px;padding:8px 0}
  .hrrow .hrn{grid-area:n;align-self:center}.hrrow .hrIni{grid-area:ini}.hrrow .hrFim{grid-area:fim}
  .hrrow .hrMin{grid-area:min;width:100%}
  .hrrow .hrt{grid-area:tipo}.hrrow .hracts{grid-area:acts}
  .hrrow .hrt select{flex:0 0 86px}
  .hrrow.intervalo{padding:8px 4px}
}
/* aulas / registro (6.3) */
.prog{height:7px;border-radius:999px;background:var(--lgrey);overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;background:var(--navy);border-radius:999px;transition:width .3s}
.card.tr .acts{display:flex;gap:2px;flex:0 0 auto;margin-left:2px}
.card.tr .acts .iconbtn{width:26px;height:26px;color:var(--muted);font-size:12px;font-weight:700}
.card.tr .acts .iconbtn.hb{border:1px solid var(--line);border-radius:8px;font-size:11px}
.card.tr .acts .iconbtn:hover{color:var(--navy)}
.card.tr.fut{opacity:.82;border-style:dashed}
.card.tr.edit{box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 35%,transparent),var(--shadow)}
.card.tr.edit textarea{min-height:66px}
.small.hab{margin-top:4px;padding:4px 8px;border-left:3px solid var(--navy);background:color-mix(in srgb,var(--navy) 7%,transparent);border-radius:0 8px 8px 0;color:var(--text);opacity:.85;line-height:1.35}
.modal .item.click{cursor:pointer;border-radius:12px}
.modal .item.click:hover{background:var(--card2)}
/* ===== Visão geral: identidade própria, sem barra de abas (6.4) ===== */
body[data-modo="geral"] #view{padding-bottom:calc(24px + var(--safe-b))}
body[data-navhidden="1"] #view{padding-bottom:calc(24px + var(--safe-b))}
body[data-navhidden="1"] #toast{bottom:calc(32px + var(--safe-b))}
body[data-navhidden="1"] .btnrow.fixo{bottom:calc(10px + var(--safe-b))}
body[data-modo="geral"] #topbar{background:linear-gradient(120deg,#3d4a5c 0%,#4b5a70 60%,#5c6b83 100%)}
body[data-modo="geral"] .hero.ger{background:linear-gradient(135deg,#3d4a5c 0%,#55657d 55%,#6b7f9e 100%);box-shadow:0 10px 26px rgba(61,74,92,.34)}
body[data-modo="geral"] .hero.ger::after{content:'';position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.07)}
.card.escbox .diaesc{margin:8px 0 2px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);padding-top:2px}
.card.escbox .diaesc .md{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);cursor:pointer}
.card.escbox .diaesc .md:first-child{border-top:0}
.card.escbox .diaesc .md .hr{width:42px;text-align:center;line-height:1.1}
.card.escbox .diaesc .md .hr b{display:block;font-size:13px}
.card.escbox .diaesc .md .hr small{color:var(--muted);font-size:10.5px}
.card.escbox .diaesc .md .grow small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.card.escbox .diaesc .md.on{background:color-mix(in srgb,var(--navy) 9%,transparent);border-radius:12px}
.card.escbox .diaesc .md.late .grow small{color:var(--dorange);font-weight:600}
.card.escbox .diaesc .md.ok .grow small{color:var(--dgreen)}
.card.escbox .mini b small{font-size:11px;font-weight:600;opacity:.65}
.row.click{cursor:pointer;border-radius:12px;margin:-2px;padding:2px}
.row.click:active{background:var(--card2)}
.item.click{cursor:pointer}
.card.det>summary{list-style:none;cursor:pointer;display:block;padding-right:22px}
.card.det>summary::before{content:none}
.card.det>summary::marker{content:''}
.card.det>summary>b{display:block}
.card.det>summary>.small{display:block;margin-top:2px}
.card.det>summary::-webkit-details-marker{display:none}
.card.det>summary::after{content:'▾';position:absolute;right:16px;color:var(--muted);font-size:13px}
.card.det{position:relative}
.card.det[open]>summary::after{content:'▴'}
.card.gfoot .btnrow{flex-wrap:wrap}
/* cadastro de escola (6.4) */
.cores{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cores .cor{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);position:relative;padding:0}
.cores .cor.on{border-color:var(--text);transform:scale(1.06)}
.cores .cor.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800}
.cores .cor.outra{display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;overflow:hidden}
.cores .cor.outra input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.seg.wide{width:100%}
.seg.wide button{flex:1;font-size:13px;padding:9px 6px}
.instrs input{margin:0}
.card.avisos .list{margin-top:4px}
.card.avisos .bday{margin-top:6px}

.btnrow.fixo{position:sticky;bottom:calc(78px + var(--safe-b));z-index:6;background:linear-gradient(180deg,transparent,var(--bg) 22%);padding:10px 0 6px;margin-top:4px}
body[data-modo="geral"] .btnrow.fixo{bottom:calc(10px + var(--safe-b))}
/* ===== gráficos interativos (7.0) ===== */
.gtip{position:fixed;z-index:60;background:#111827;color:#fff;border-radius:10px;padding:7px 10px;font-size:12px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;opacity:0;transform:translateY(4px);transition:.14s;max-width:220px}
.gtip.on{opacity:1;transform:translateY(0)}
.gtip b{font-weight:700}
:root[data-theme=dark] .gtip{background:#e5e7eb;color:#111827}
.gb,.gc{-webkit-tap-highlight-color:transparent}
.gb:active .gt i,.gc:active i{filter:brightness(1.15)}
.glinha{position:relative;margin-top:6px}
.glinha .glpts{position:absolute;inset:0;pointer-events:none}
.glinha .glp{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:center}
.glinha .glp::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--card);border:2.5px solid var(--navy);transition:.15s}
.glinha .glp:active::after{transform:scale(1.35)}
.glinha .glp.vazio::after{border-color:var(--line);background:var(--lgrey)}
.glinha .glrot{display:flex;justify-content:space-between;margin-top:2px}
.glinha .glrot span{font-size:10.5px;color:var(--muted);flex:1;text-align:center}
.gmini{display:block;color:var(--navy);opacity:.85}
:root[data-theme=dark] .gmini{color:#93c5fd}
.gmapa{margin-top:6px;overflow-x:auto}
.gmrow{display:flex;align-items:center;gap:3px;margin-bottom:3px}
.gmrot{flex:0 0 62px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmc{flex:1 1 0;min-width:20px;text-align:center}
.gmc i{display:block;height:22px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;cursor:pointer}
.gmhead .gmc{font-size:10px;color:var(--muted)}
/* dica discreta (7.0) */
.dica{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin-left:5px;border:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted);font:inherit;font-size:11px;font-weight:700;line-height:1;cursor:pointer;vertical-align:middle;flex:0 0 auto}
.dica:active{background:var(--navy);color:#fff}
h3 .dica,b .dica,summary .dica{transform:translateY(-1px)}
/* fechar o bimestre (7.0) */
.card.fech{border-left:5px solid var(--c)}
.card.fech.ok{opacity:.92}
.card.fech .item{padding:7px 4px;gap:8px}
.card.fech .item.sub{padding-left:14px;opacity:.85}
.card.fech .item.sub .nm{font-size:13px}
.fchk{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--lgrey);color:var(--muted)}
.fchk.ok{background:var(--green);color:var(--dgreen)}
.fchk.meio{background:var(--orange);color:var(--dorange)}
.stat.orange{background:color-mix(in srgb,var(--orange) 55%,transparent)}
.stat.green{background:color-mix(in srgb,var(--green) 55%,transparent)}

/* ---- v7.4: barrinha da aula em curso (fica na base da barra do topo, em qualquer tela) */
#aulabar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
#aulabar b{display:block;height:100%;width:0;border-radius:0 3px 3px 0;background:#60a5fa;transition:width .6s linear,background .3s ease;box-shadow:0 0 8px rgba(255,255,255,.3)}
#aulabar.fim b{animation:blink 1.6s ease-in-out infinite}

/* ---- v7.4: transição entre telas com View Transitions (topo e abas ficam parados) */
@media (prefers-reduced-motion:no-preference){
  #topbar{view-transition-name:barra}
  #nav{view-transition-name:abas}
  #toast{view-transition-name:aviso}
  ::view-transition-old(barra),::view-transition-new(barra),
  ::view-transition-old(abas),::view-transition-new(abas),
  ::view-transition-old(aviso),::view-transition-new(aviso){animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:cubic-bezier(.22,.9,.24,1);animation-fill-mode:both;mix-blend-mode:normal}
  html[data-vt="fwd"]::view-transition-old(root){animation-name:vtSaiE}
  html[data-vt="fwd"]::view-transition-new(root){animation-name:vtEntraD}
  html[data-vt="back"]::view-transition-old(root){animation-name:vtSaiD}
  html[data-vt="back"]::view-transition-new(root){animation-name:vtEntraE}
  html[data-vt="fade"]::view-transition-old(root){animation-name:vtSai;animation-duration:.16s}
  html[data-vt="fade"]::view-transition-new(root){animation-name:vtEntra;animation-duration:.2s}
  /* o cabeçalho da turma é o mesmo objeto nas telas dela: em vez de piscar, ele continua ali */
  #view .card.cabt{view-transition-name:cabt}
  ::view-transition-old(cabt),::view-transition-new(cabt){animation-duration:.22s;animation-timing-function:cubic-bezier(.22,.9,.24,1);height:100%}
  ::view-transition-old(cabt){animation-name:vtSai;animation-duration:.14s}
  ::view-transition-new(cabt){animation-name:vtEntra;animation-duration:.18s}
  ::view-transition-group(cabt){animation-duration:.24s;animation-timing-function:cubic-bezier(.22,.9,.24,1)}
}
@keyframes vtSaiE{to{opacity:0;transform:translateX(-24px)}}
@keyframes vtEntraD{from{opacity:0;transform:translateX(28px)}}
@keyframes vtSaiD{to{opacity:0;transform:translateX(24px)}}
@keyframes vtEntraE{from{opacity:0;transform:translateX(-28px)}}
@keyframes vtSai{to{opacity:0}}
@keyframes vtEntra{from{opacity:0;transform:translateY(8px)}}


/* ---- v7.5: avaliação — nota + recuperação lado a lado, travas e prévia */
.nins{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.nin.rec{width:52px;font-size:15px;font-weight:700;color:var(--dgreen);background:var(--green);border-color:color-mix(in srgb,var(--dgreen) 28%,var(--green))}
.nin.rec::placeholder{color:color-mix(in srgb,var(--dgreen) 60%,var(--green));font-weight:600;font-size:11px}
.nin.recoff{width:34px;padding:0;font-size:20px;font-weight:700;color:var(--muted);background:transparent;border:1px dashed color-mix(in srgb,var(--muted) 40%,var(--card));border-radius:12px;cursor:pointer}
.nin[readonly],.tbl input[readonly]{background:color-mix(in srgb,var(--muted) 12%,var(--card));color:var(--muted);border-style:dashed}
.card.trava{display:flex;align-items:center;gap:10px;border-left:5px solid var(--dorange);padding:10px 12px}
.card.trava .ic{font-size:20px}
.stepper.extra{background:color-mix(in srgb,var(--green) 55%,var(--card));border:1px solid color-mix(in srgb,var(--dgreen) 20%,var(--card))}
.stepper.rec{background:color-mix(in srgb,var(--teal) 60%,var(--card))}
.card.prev{border-left:5px solid var(--navy)}
.card.fech.trv{opacity:.85}
.instrs .instr input{min-width:0}

/* ---- v7.8: assistente de primeira configuração */
.stpbar{margin:0 2px 10px}
.stpprog{height:5px;border-radius:99px;background:var(--lgrey);overflow:hidden}
.stpprog i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),color-mix(in srgb,var(--navy) 55%,#fff));transition:width .35s cubic-bezier(.2,.8,.2,1)}
.card.stphero{text-align:center}
.card.stphero .logo{width:72px;height:72px;margin:2px auto 6px;display:block;filter:drop-shadow(0 6px 14px rgba(8,20,44,.22))}
.card.stphero h2{margin:0 0 4px;font-size:20px}
.card.stphero .list{text-align:left}
.card.stphero .fchk{font-weight:800}
.stpturma{border:1px solid var(--line);border-radius:14px;padding:10px;margin:8px 0;background:color-mix(in srgb,var(--lgrey) 35%,var(--card))}
.stpturma textarea{margin-top:6px}
/* v7.9: recuperação e extras na tabela de notas */
.tbl td.crec{background:color-mix(in srgb,var(--green) 35%,var(--card))}
.tbl td.cext{background:color-mix(in srgb,var(--teal) 45%,var(--card))}
.tbl td.crec input,.tbl td.cext input{background:transparent}
.tbl th.crec,.tbl th.cext{font-size:11px;font-weight:600}
.tbl th.crec{box-shadow:inset 0 -3px 0 #4ade80}
.tbl th.cext{box-shadow:inset 0 -3px 0 #60a5fa}
/* v7.9: provas e trabalhos */
.card.pv .pvmais{margin-top:8px}
.card.pv .pvmais summary{cursor:pointer;padding:4px 0}
.card.pv textarea{font-size:14px}
/* v8.0: escolher o instrumento da recuperação */
.recsel{width:auto;min-width:72px;padding:8px 6px;font-size:13px;font-weight:700;color:var(--dgreen);background:var(--green);border:1px solid color-mix(in srgb,var(--dgreen) 28%,var(--green));border-radius:12px}
.recsel.sm{min-width:56px;padding:5px 4px;font-size:12px}
.tbl td.crec .nins{gap:4px}
.tbl td.crec .nins input{width:52px}
/* v8.1: troca de aula suave */
@keyframes trocaAula{0%{opacity:.35;transform:translateY(8px) scale(.995)}100%{opacity:1;transform:none}}
#viva.trocou{animation:trocaAula .42s cubic-bezier(.2,.8,.2,1)}

/* ---- o diário de faltas (antigo mapa): o que sobrou do layout antigo ------------------------ */
table.tbl.dgrade{border-collapse:separate;border-spacing:0}
table.tbl.dgrade th,table.tbl.dgrade td{padding:6px 4px;white-space:nowrap}
table.tbl.dgrade td.dm{cursor:pointer;user-select:none}
table.tbl.dgrade td.dm:active{transform:scale(.9)}
table.tbl.dgrade td.dm.semaula,table.tbl.dgrade td.dm.ok{cursor:default}
@media print{ table.tbl.dgrade td.dm{cursor:default} }

/* ============================================================ v8.3 — INTERFACE
   Escala consistente, foco visível, cartões mais leves e, no computador, navegação lateral. */
:root{
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 3px rgba(16,24,40,.06),0 10px 28px -16px rgba(16,24,40,.30);
  --ring:0 0 0 3px color-mix(in srgb,var(--navy) 25%,transparent);
}
:root[data-theme=dark]{ --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 1px 3px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.8); }

/* --- foco visível (teclado) sem poluir o toque --- */
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring)}

/* --- hierarquia --- */
h2{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:16px 0 8px}
.card{border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:14px 16px;border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.card>b:first-child,.card .row>b{font-size:15px;letter-spacing:-.01em}
.stat{border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:12px 13px}
.stat .muted{font-size:12px;font-weight:600}
.list{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.list .item{padding:11px 13px;min-height:52px}
:is(button,label).btn{border-radius:var(--r-md);min-height:46px;letter-spacing:-.01em;box-shadow:0 2px 8px color-mix(in srgb,var(--navy) 22%,transparent)}
:is(button,label).btn.sm{min-height:38px;border-radius:var(--r-sm)}
.tabs button,.chip-b{border-radius:999px}
input,select,textarea{border-radius:var(--r-sm);padding:11px 12px}

/* --- computador: navegação lateral, mais ar e duas colunas onde cabe --- */
@media (min-width:1024px){
  #topbar{padding:12px 22px;z-index:30;backdrop-filter:saturate(1.2)}
  #topbar h1{font-size:18px}
  #nav{top:0;bottom:0;right:auto;left:0;width:238px;height:100vh;flex-direction:column;justify-content:flex-start;gap:2px;
       border-radius:0;border-top:0;border-right:1px solid var(--line);padding:78px 12px 16px;box-shadow:none;background:var(--card)}
  #nav button{flex:0 0 auto;width:100%;flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 12px;font-size:14.5px;border-radius:var(--r-md);color:var(--text);opacity:.82}
  #nav button .ico{padding:0;background:none!important;transform:none!important}
  #nav button:hover{background:var(--card2);opacity:1}
  #nav button.active{background:color-mix(in srgb,var(--navy) 12%,var(--card));color:var(--navy);opacity:1}
  :root[data-theme=dark] #nav button.active{background:color-mix(in srgb,var(--navy) 45%,var(--card));color:#fff}
  #nav button:active{transform:none}
  /* o conteúdo encosta na barra e usa toda a largura que existe — sem vão no meio */
  #view{margin-left:var(--rail,238px);width:calc(100% - var(--rail,238px));max-width:none;padding:24px 28px 56px;
        transition:margin-left .22s cubic-bezier(.2,.8,.2,1),width .22s cubic-bezier(.2,.8,.2,1)}
  #app:has(#nav[hidden]) #view{margin-left:0;width:100%;margin-inline:auto}
  /* --- barra recolhida: só ícones, com o nome aparecendo ao passar o mouse --- */
  #nav{transition:width .22s cubic-bezier(.2,.8,.2,1),padding .22s}
  body[data-rail="1"]{--rail:76px}
  body[data-rail="1"] #nav{width:76px;padding-left:10px;padding-right:10px;align-items:center}
  body[data-rail="1"] #nav button{width:56px;justify-content:center;gap:0;padding:12px 0;font-size:0;overflow:visible}
  body[data-rail="1"] #nav button .ico{font-size:20px}
  body[data-rail="1"] #nav button::after{display:none}
  body[data-rail="1"] #nav button::before{content:attr(aria-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.92);
      background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;
      opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;box-shadow:0 6px 20px rgba(16,24,40,.22);z-index:40}
  body[data-rail="1"] #nav button:hover::before,body[data-rail="1"] #nav button:focus-visible::before{opacity:1;transform:translateY(-50%) scale(1)}
  body[data-rail="1"] #nav button.active{background:var(--navy);color:#fff}
  body[data-rail="1"] #nav button.active .ico svg{stroke:#fff}
  #nav button#navToggle{display:flex;margin-top:auto;width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--muted);
      font:inherit;font-size:13px;font-weight:700;padding:10px 12px;border-radius:var(--r-md);cursor:pointer}
  #navToggle:hover{background:var(--card2);color:var(--text)}
  #navToggle i{font-style:normal;font-size:17px;line-height:1;transition:transform .22s}
  body[data-rail="1"] #nav button#navToggle{justify-content:center;width:56px;padding:10px 0;font-size:0;gap:0}
  body[data-rail="1"] #nav button#navToggle i{transform:rotate(180deg);font-size:17px}
  body[data-modo="geral"] #view{margin-left:0;width:100%;margin-inline:auto}
  #toast{left:auto;right:28px;bottom:28px;transform:translateY(8px);max-width:420px}
  #toast.show{transform:translateY(0)}
  .grid.c2{gap:12px}.grid.c3{gap:12px}
  .btnrow{gap:10px}
  .btnrow .btn{flex:0 1 auto;min-width:160px}
  .btnrow.fixo{position:static;background:none;box-shadow:none;padding:0}
  .card{padding:16px 18px}
  .nlist .nrow{padding:12px 14px}
  .nsel{max-width:300px}
  .card.nhead .row{gap:12px}
  .tblwrap{border-radius:var(--r-lg)}
  /* tabelas largas: o nome do aluno não pode engolir o espaço dos dias */
  table.tbl.mapa .fx.nm{max-width:260px;width:260px}
  table.tbl.mapa td.mp,table.tbl.mapa thead th:not(.fx):not(.tot){min-width:44px}
  table.tbl.mapa .tot{width:92px;min-width:92px;max-width:92px}
  table.tbl.mapa th,table.tbl.mapa td{padding:8px 4px}
  table.tbl.fixo .nm{max-width:300px}
}
/* telas largas: mais respiro na margem e mais colunas, em vez de cartões esticados */
@media (min-width:1500px){
  #view{padding:26px 36px 60px}
  .grid.c2{grid-template-columns:repeat(2,1fr)}
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .menu{grid-template-columns:repeat(3,1fr)}
  .quick{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:1900px){
  #view{padding:28px 44px 64px}
  .menu{grid-template-columns:repeat(4,1fr)}
  .quick{grid-template-columns:repeat(8,1fr)}
}
/* tablet: continua com a barra de baixo, mas com mais ar */
@media (min-width:700px) and (max-width:1023px){ #view{padding:16px 20px;padding-bottom:calc(96px + var(--safe-b))} body[data-navhidden="1"] #view{padding-bottom:calc(24px + var(--safe-b))} }

/* ============================================================ v8.4 — CABEÇALHO DA TURMA
   Um cartão só, igual em Chamada, Notas, Aulas, Faltas, Provas e Alunos: quem é a turma,
   como ela está e para onde ir — sem precisar reencontrar a turma a cada aba.            */
.card.cabt{padding:10px 12px 8px}
.card.cabt>.row{gap:8px}
.cabinfo{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cbadge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;border:1.5px solid transparent;background:var(--lgrey);color:var(--muted);cursor:pointer;font-family:inherit;line-height:1.25;white-space:nowrap}
button.cbadge:hover{filter:brightness(.97)}
button.cbadge:active{transform:scale(.97)}
.cbadge.ok{background:var(--green);color:var(--dgreen)}
.cbadge.pend{background:var(--orange);color:var(--dorange)}
.cbadge.plano{background:var(--card2);color:var(--text);cursor:default}
.cbadge.trv{background:var(--lgrey);color:var(--navy);cursor:default}
.card.fococard{box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 22%,transparent),var(--shadow)}

/* ============================================================ v8.5 — PCD / EDUCAÇÃO ESPECIAL
   O selo fica colado ao nome; a linha de adaptações fica ao lado da média, para você ler
   sem tirar o dedo do campo da nota.                                                        */
.eeselo{display:inline-flex;align-items:center;gap:3px;margin-left:6px;border:1.5px solid color-mix(in srgb,var(--navy) 30%,transparent);background:var(--teal);color:var(--navy);border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:800;letter-spacing:.03em;cursor:pointer;font-family:inherit;line-height:1.5;vertical-align:middle;flex:0 0 auto}
:root[data-theme=dark] .eeselo{color:#bfdbfe}
.eeselo:hover{filter:brightness(.95)}
.eeselo:active{transform:scale(.95)}
.eeselo.sm{font-size:9.5px;padding:0 6px;margin-left:4px}
.eechip{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--navy);background:var(--teal);border-radius:8px;padding:1px 7px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
:root[data-theme=dark] .eechip{color:#bfdbfe}
.nrow.pcd{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--navy) 40%,transparent)}
.card.eecard{padding:10px 12px}
.card.eecard>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card.eecard>summary::before{content:"♿";font-size:15px}
.card.eecard>summary::-webkit-details-marker{display:none}
.eelist{display:flex;flex-direction:column;gap:6px}
.eeitem{display:flex;flex-direction:column;gap:1px;background:var(--card2);border-radius:var(--r-sm,10px);padding:7px 10px}
.eeitem b{font-size:13px}
.eeitem span{font-size:11.5px;color:var(--muted)}
.eeficha{border-left:5px solid color-mix(in srgb,var(--navy) 55%,transparent)}
/* editor da ficha */
.eegrid{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.eegrid.dois .eeopt{flex:1 1 220px}
.eeopt{display:flex;align-items:flex-start;gap:7px;border:1.5px solid var(--line);background:var(--card);border-radius:var(--r-sm,10px);padding:7px 10px;cursor:pointer;font-size:12.5px;line-height:1.3}
.eeopt input{width:auto;margin:1px 0 0;flex:0 0 auto}
.eeopt span{display:flex;flex-direction:column;gap:1px}
.eeopt i{font-style:normal;font-size:11px;color:var(--muted)}
.eeopt.on{border-color:color-mix(in srgb,var(--navy) 55%,transparent);background:var(--teal)}
:root[data-theme=dark] .eeopt.on{background:color-mix(in srgb,var(--navy) 35%,var(--card))}
@media (max-width:520px){ .eegrid .eeopt{flex:1 1 100%} }
.cbadge.pcd{background:var(--teal);color:var(--navy)}
:root[data-theme=dark] .cbadge.pcd{color:#bfdbfe}
.cbadge.mot{background:var(--navy);color:#fff}
.cbadge.mot.ok{background:var(--green);color:var(--dgreen)}
.cbadge.mot.pend{background:var(--orange);color:var(--dorange)}
.cbadge.mot.pin{background:var(--teal);color:var(--navy)}
:root[data-theme=dark] .cbadge.mot.pin{color:#bfdbfe}
.ibtn.pino{font-size:16px}
.ibtn.pino.on{background:var(--teal);border-color:color-mix(in srgb,var(--navy) 40%,transparent)}

/* ============================================================ v8.6 — BUSCA ATIVA E CONSELHO */
.bachips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.bachip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--lgrey);color:var(--muted);white-space:nowrap}
.bachip.seguidas,.bachip.freq{background:var(--orange);color:var(--dorange)}
.bachip.bim,.bachip.nota{background:var(--red);color:var(--dred)}
.bachip.sumido{background:var(--dred);color:#fff}
.bachip.ano{background:var(--red);color:var(--dred)}
.bachip.sem{background:var(--lgrey);color:var(--muted)}
.bachip.pcd{background:var(--teal);color:var(--navy)}
:root[data-theme=dark] .bachip.pcd{color:#bfdbfe}
.card.ba{padding:10px 12px}
.card.ba.g1{box-shadow:inset 4px 0 0 var(--dorange),var(--shadow)}
.card.ba.g2{box-shadow:inset 4px 0 0 var(--dred),var(--shadow)}
.card.ba.g3{box-shadow:inset 4px 0 0 #7f1d1d,var(--shadow)}
.card.ba .nr{flex:0 0 auto}
.card.ba-aviso{border-left:5px solid var(--dorange)}
.card.cc{padding:10px 12px}
.card.cc.risco{box-shadow:inset 4px 0 0 var(--dorange),var(--shadow)}
.card.cc textarea.ccpar{margin-top:8px;min-height:56px}
.chips.ccrap{margin-top:6px;gap:4px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.chips.ccrap::-webkit-scrollbar{display:none}
.chips.ccrap .chip-b{flex:0 0 auto;font-size:11px;padding:4px 9px;white-space:nowrap}
.card.ba-aviso.urg{border-left-color:var(--dred)}

/* ============================================================ v8.8 — ACERTOS DE CONTRASTE
   No tema escuro alguns elementos usavam a cor da escola (azul-marinho) sobre fundo escuro e
   sumiam; e o bloco dos dias sem aula no mapa virava um tijolo. */
:root[data-theme=dark] .ibtn{color:var(--text)}
:root[data-theme=dark] .ibtn.on{color:#fff}
:root[data-theme=dark] .ibtn.pino.on{color:#bfdbfe}
:root[data-theme=dark] table.tbl.mapa td.mp.esp{background:repeating-linear-gradient(45deg,transparent,transparent 4px,color-mix(in srgb,var(--dorange) 22%,transparent) 4px,color-mix(in srgb,var(--dorange) 22%,transparent) 8px)}
:root[data-theme=dark] table.tbl.mapa td.mp.f{background:color-mix(in srgb,var(--dred) 26%,transparent);color:#fca5a5}
:root[data-theme=dark] table.tbl.mapa td.mp.a{background:color-mix(in srgb,#60a5fa 20%,transparent);color:#bfdbfe}
:root[data-theme=dark] table.tbl.mapa td.mp.ok{background:color-mix(in srgb,var(--dgreen) 20%,transparent);color:#86efac}
:root[data-theme=dark] .cbadge.plano{background:var(--card2);color:var(--text)}
:root[data-theme=dark] .cbadge.trv{background:var(--lgrey);color:var(--text)}
:root[data-theme=dark] .eeselo{background:color-mix(in srgb,#1d4ed8 28%,var(--card));border-color:color-mix(in srgb,#60a5fa 38%,transparent)}
:root[data-theme=dark] .eechip{background:color-mix(in srgb,#1d4ed8 22%,var(--card))}
:root[data-theme=dark] .bachip.sumido{background:#991b1b;color:#fff}

/* ============================================================ v8.9 — INDICADORES
   Um cartão de número: rótulo curto em cima, número grande, contexto em uma linha. A cor é
   de estado e sempre vem acompanhada do número — nunca sozinha.                              */
.indgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 10px}
.ind{background:var(--card);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-lg,16px);
     box-shadow:var(--sh-1,0 1px 3px rgba(16,24,40,.06));padding:11px 13px;position:relative;overflow:hidden;min-width:0}
.ind::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ic)}
.ind[onclick]{cursor:pointer;transition:.16s}
.ind[onclick]:hover{box-shadow:var(--sh-2,0 6px 20px rgba(16,24,40,.10));transform:translateY(-1px)}
.ind[onclick]:active{transform:scale(.99)}
.indt{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.indv{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:3px}
.indv b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ic);line-height:1.1}
.indv b small{font-size:14px;font-weight:700;color:var(--muted)}
.indv .gmini{flex:0 0 auto;color:var(--ic);opacity:.85;margin-bottom:3px}
.indd{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 6px;letter-spacing:0;text-transform:none}
.indd.up{background:var(--green);color:var(--dgreen)}
.indd.down{background:var(--red);color:var(--dred)}
.indbar{display:block;height:5px;border-radius:99px;background:var(--lgrey);overflow:hidden;margin-top:7px}
.indbar i{display:block;height:100%;border-radius:99px;transition:width .3s}
.inds{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.inds b{color:var(--text)}
@media (min-width:700px){ .indgrid{grid-template-columns:repeat(4,1fr)} .indgrid.c3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1500px){ .ind{padding:13px 15px} .indv b{font-size:30px} }
/* cores dos gráficos — validadas (daltonismo + contraste) e próprias para cada tema */
:root{--c-ok:#15803d;--c-al:#f59e0b;--c-ru:#ef4444;--c-az:#2f6bff;--c-rx:#c026d3}
:root[data-theme=dark]{--c-ok:#34d399;--c-al:#fbbf24;--c-ru:#f87171;--c-az:#60a5fa;--c-rx:#e879f9}
/* gráficos de barra não precisam de 1800px: passam a ter uma largura de leitura */
@media (min-width:1200px){ .gbar{max-width:760px} .gbar .gl{min-width:120px} }
/* conselho: frases rápidas recolhidas (details abrem sob demanda) */
.ccrapdet{margin-top:4px}
.ccrapdet>summary{cursor:pointer;list-style:none;padding:2px 0}
.ccrapdet>summary::-webkit-details-marker{display:none}
.ccrapdet[open] .ccrap{display:flex}
.ibtn.sm{width:34px;height:34px;font-size:15px;border-radius:10px}
.ibtn.sm .ic{width:17px;height:17px}
.card.ba .row{gap:8px;align-items:center}
.gbar .gl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){ .gbar .gl{font-size:11.5px} }
/* o selo "por que esta turma está aberta" é informação secundária: discreto por padrão */
.cbadge.mot{background:var(--card2);color:var(--text);border:1.5px solid var(--line)}
.cbadge.mot.esc{background:var(--teal);color:var(--navy);border-color:transparent}
:root[data-theme=dark] .cbadge.mot{background:var(--lgrey);color:var(--text)}
:root[data-theme=dark] .cbadge.mot.esc{color:#bfdbfe}
/* tabela da regra de aproximação — pequena, só três linhas */
table.tbl.arredt{margin-top:8px;font-size:12.5px;width:auto;min-width:min(100%,360px)}
table.tbl.arredt th,table.tbl.arredt td{padding:6px 10px;text-align:left}
table.tbl.arredt td:last-child{text-align:right;white-space:nowrap}

/* ============================================================ v9.2 — CONFERIR COM O PORTAL */
.card.sgd{padding:10px 12px;box-shadow:inset 4px 0 0 var(--dred),var(--shadow)}
table.tbl.sgdt{margin-top:8px;font-size:13px;width:100%}
table.tbl.sgdt th,table.tbl.sgdt td{padding:6px 10px;text-align:center}
table.tbl.sgdt td.pt{color:var(--dred);text-decoration:line-through;text-decoration-thickness:1.5px}
table.tbl.sgdt td.ap{color:var(--dgreen)}
:root[data-theme=dark] table.tbl.sgdt td.ap{color:#86efac}
/* lista "abaixo da média": mesma cara da lista de notas */
.nrow.abx{cursor:pointer}
.nrow.abx .abn{font-size:18px;font-weight:800;flex:0 0 auto;min-width:46px;text-align:right}
.nrow.abx .eeselo.sm{margin-left:5px}
/* filtros das análises numa linha só */
.row.anafil{gap:8px;margin:2px 0 10px}
.row.anafil .nsel{flex:1;min-width:0}
.row.anafil .seg{flex:0 0 auto}

/* ============================================================ v9.6 — ANÁLISES QUE SEGUEM A AULA
   A linha do "por que estou nesta turma" e o cartão da aula em curso.                        */
.row.anapor{gap:8px;margin:-4px 0 10px;flex-wrap:wrap}
.row.anapor .cbadge{cursor:default}
.row.anapor button.cbadge{cursor:pointer;background:var(--card2);color:var(--navy);border:1.5px solid var(--line)}
.row.anapor button.cbadge:hover{background:var(--lgrey)}
:root[data-theme=dark] .row.anapor button.cbadge{background:var(--lgrey);color:var(--text)}
.card.cabaula{border-left:5px solid var(--navy)}
.card.cabaula.agoracard{border-left-color:var(--dgreen)}
.card.cabaula .prog{height:6px}

/* ============================================================ v9.9 — DE ONDE VEIO A NOTA
   Quando a aproximação muda o número, a célula diz de quanto ele veio — sem tirar o olho da nota. */
.deq{display:block;font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.25;margin-top:1px;letter-spacing:.01em;white-space:nowrap}
td.med .deq{opacity:.85}
@media print{ .deq{display:none} }
.deq.passou{color:var(--dorange);font-weight:700}

/* ============================================================ v10.1 — IMPORTAR E PREPARAR
   Cartões com um ícone grande à esquerda e o estado à vista; passos com ✓ do que já está pronto. */
.card.impc{border-left:5px solid var(--navy)}
.impi{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--lgrey);color:var(--navy)}
.impi svg{width:22px;height:22px}
:root[data-theme=dark] .impi{color:#bfdbfe}
.list.prep .item.prep-i{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;align-items:start;padding:13px 14px}
.list.prep .item.prep-i .fchk{margin-top:1px}
.list.prep .item.prep-i .nm{min-width:0}
.list.prep .item.prep-i .sub{white-space:normal;line-height:1.35;margin-top:2px}
.list.prep .item.prep-i .btn{grid-column:2;justify-self:start;margin-top:6px}
.list.prep .item.prep-i.ok{background:color-mix(in srgb,var(--green) 40%,transparent)}
@media (min-width:640px){
  .list.prep .item.prep-i{grid-template-columns:28px 1fr auto;align-items:center}
  .list.prep .item.prep-i .btn{grid-column:3;margin-top:0}
}

/* a barra de baixo com 7 itens: ícones mais soltos no celular */
@media (max-width:560px){
  #nav{padding-left:2px;padding-right:2px}
  #nav button{font-size:9.5px;gap:1px}
  #nav button .ico{padding:5px 8px}
  #nav button.active::after{width:18px}
}

/* ============================================================ v11.0 — MODO AULA
   Tela cheia, um passo por vez, o relógio da aula correndo em cima. Feito para o celular na mão,
   em pé, na frente da turma: alvos grandes, contraste alto, nada de menu.                     */
.maTop{position:sticky;top:0;z-index:12;margin:-12px -14px 10px;padding:12px 14px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.maTop .row{align-items:flex-start;gap:10px}
.maTop b{font-size:19px;letter-spacing:-.01em}
.mabar{height:5px;border-radius:99px;background:var(--lgrey);overflow:hidden;margin:9px 0 2px}
.mabar i{display:block;height:100%;border-radius:99px;background:var(--acc,var(--navy));transition:width .5s linear}
.mabtn{border:1.5px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;min-width:38px;height:38px;font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;line-height:1}
.mabtn:active{transform:scale(.94)}
.mabtn.on{background:var(--navy);color:#fff;border-color:transparent}
.mabtn.x{color:var(--muted);font-size:20px}
.mapassos{display:flex;gap:6px;margin:10px -2px 0;padding-bottom:10px;overflow-x:auto;scrollbar-width:none}
.mapassos::-webkit-scrollbar{display:none}
.mapassos button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:var(--lgrey);color:var(--muted);border-radius:12px;padding:9px 8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.mapassos button .ic{display:inline-flex;flex:0 0 auto}
.mapassos button .ic svg{width:17px;height:17px;display:block}
.mapassos button span{overflow:hidden;text-overflow:ellipsis}
.mapassos button.ok{background:var(--green);color:var(--dgreen)}
.mapassos button.on{background:var(--navy);color:#fff}
.mabody{padding-bottom:10px}
.row.macont{align-items:center;gap:8px;margin:0 0 6px;position:sticky;top:52px;z-index:8;background:var(--bg);padding:8px 2px;flex-wrap:wrap}
.madesfazer{animation:fadeIn .2s}
.magrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.macard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;transition:.14s;min-height:76px}
.macard:active{transform:scale(.97)}
.macard .manr{font-size:11px;font-weight:800;color:var(--muted)}
.macard .manm{font-size:15px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.macard .mast{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:auto}
.macard.p{border-color:color-mix(in srgb,var(--dgreen) 45%,transparent);background:color-mix(in srgb,var(--green) 55%,transparent)}
.macard.p .mast{color:var(--dgreen)}
.macard.f{border-color:color-mix(in srgb,var(--dred) 55%,transparent);background:color-mix(in srgb,var(--red) 55%,transparent)}
.macard.f .mast{color:var(--dred)}
.macard.a{border-color:color-mix(in srgb,var(--dorange) 50%,transparent);background:color-mix(in srgb,var(--orange) 55%,transparent)}
.macard.a .mast{color:var(--dorange)}
.macard.d{opacity:.6}
#maSorte.pop{animation:mapop .4s cubic-bezier(.2,.9,.2,1)}
@keyframes mapop{0%{transform:scale(.8);opacity:.3}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.magrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.mabox{background:var(--card2);border-radius:14px;padding:12px 10px;text-align:center}
.mabox b{display:block;font-size:22px;font-weight:800;color:var(--text);line-height:1.1}
.mabox span{font-size:11.5px;color:var(--muted);font-weight:600}
.mabox.ok{background:var(--green)} .mabox.ok b{color:var(--dgreen)}
.mabox.al{background:var(--orange)} .mabox.al b{color:var(--dorange)}
.parts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.parts b{min-width:20px;text-align:center;font-size:16px}
.parts .mabtn{min-width:34px;height:34px;font-size:16px}
/* nota rápida dentro do Modo aula */
.manota .nlist{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.manota .nrow .nin{width:74px}
.masortbox{padding:0}
.masortbox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 16px}
.masortbox>summary::-webkit-details-marker{display:none}
.masortbox>summary b{display:flex;align-items:center;gap:8px}
.masortbox>summary::after{content:'⌄';margin-left:auto;font-size:18px;color:var(--muted);transition:transform .2s}
.masortbox[open]>summary::after{transform:rotate(180deg)}
.masortbox[open]>summary .small{display:none}
.masortbox>*:not(summary){padding:0 16px 14px}
.masort2{text-align:center}
.masort2 .bigname{margin:4px 0 2px}
/* o cartão que entra no Modo aula, no Início */
.btn.maGo{background:linear-gradient(135deg,var(--navy),color-mix(in srgb,var(--navy) 70%,#000));font-size:16px;padding:13px 18px}
@media (max-width:420px){ .magrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .mapassos button span{display:none} .mapassos button{flex:1} }

/* ============================================================================================
   v12.0 — A LINGUAGEM DO MODO AULA EM TODO O APP
   O Modo aula acertou três coisas: alvo grande para o dedo, um estado visível por cartão e
   nada de enfeite. Esta camada leva isso para as outras 40 telas — uma curva de animação só,
   uma escala de sombra só, uma escala de raio só. Vem por último de propósito: não reescreve
   nada acima, só termina de arredondar.                                                      */
:root{
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --e1:0 1px 2px rgba(16,24,40,.05);
  --e2:0 1px 2px rgba(16,24,40,.04),0 6px 16px -4px rgba(16,24,40,.10);
  --e3:0 2px 4px rgba(16,24,40,.04),0 14px 32px -8px rgba(16,24,40,.16);
  --curva:cubic-bezier(.2,.8,.2,1);
  --tinta:color-mix(in srgb,var(--navy) 9%,var(--card));
  --tinta2:color-mix(in srgb,var(--navy) 14%,var(--card));
  --radius:18px; --shadow:var(--e2);
  --bg:#eff2f7;
}
:root[data-theme=dark]{
  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 1px 2px rgba(0,0,0,.45),0 6px 18px -4px rgba(0,0,0,.5);
  --e3:0 2px 6px rgba(0,0,0,.5),0 16px 36px -8px rgba(0,0,0,.6);
  --tinta:color-mix(in srgb,#60a5fa 14%,var(--card));
  --tinta2:color-mix(in srgb,#60a5fa 22%,var(--card));
  --shadow:var(--e2);
}
body{font-size:15px;letter-spacing:-.005em}

/* ---- a moldura: topo fino e translúcido, barra de baixo flutuando ---- */
#topbar{
  padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--navy) 92%,#000);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 24px -12px rgba(8,20,44,.8);
  backdrop-filter:saturate(140%) blur(10px);
}
#topbar h1{font-size:16.5px;letter-spacing:-.015em}
#logo{width:27px;height:27px}
.escchip{border-radius:var(--r-pill);padding:5px 12px;font-size:11.5px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* a ilha flutuante é do celular e do tablet; no computador (>=1024px) a barra é lateral */
@media (max-width:1023px){
  #view{padding:14px 14px 0;padding-bottom:calc(104px + var(--safe-b))}
  body[data-navhidden="1"] #view{padding-bottom:calc(24px + var(--safe-b))}
  #nav{
    left:8px;right:8px;bottom:calc(8px + var(--safe-b));
    border-radius:var(--r-xl);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
    padding:5px 4px;padding-bottom:5px;
    background:color-mix(in srgb,var(--card) 92%,transparent);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    box-shadow:var(--e3);
  }
  @supports not (backdrop-filter:blur(1px)){ #nav{background:var(--card)} }
  #nav button{padding:3px 0;gap:1px;font-size:9.5px;font-weight:600;transition:color .2s var(--curva)}
  #nav button .ico{padding:6px 13px;border-radius:var(--r-sm);transition:.24s var(--curva)}
  #nav button.active .ico{background:var(--tinta2);transform:none}
  #nav button:active .ico{transform:scale(.88)}
  #toast{bottom:calc(112px + var(--safe-b));border-radius:var(--r-md)}
  body[data-navhidden="1"] #toast{bottom:calc(32px + var(--safe-b))}
}

/* ---- cartões, listas e blocos ---- */
.card{
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:11px;
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);box-shadow:var(--e2);
  transition:transform .16s var(--curva),box-shadow .16s var(--curva),background .16s var(--curva);
}
.card.click:active{transform:scale(.985);box-shadow:var(--e1)}
.list{border-radius:var(--r-lg);box-shadow:var(--e2);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.list .item{padding:12px 14px;min-height:54px;gap:11px;transition:background .16s var(--curva)}
.list .item .nm{font-size:14.5px}
.list .item .nm .sub{margin-top:1px;line-height:1.35}
.list .item.click{cursor:pointer}
.list .item.click:active{background:var(--card2)}
.sec-h{margin:20px 2px 8px}
h3{font-size:11px;letter-spacing:.1em;margin:20px 0 8px}
h2{font-size:19px;letter-spacing:-.02em}
.muted{font-size:12.5px}

/* ---- o que se toca: 44px de alvo, cantos de pílula ---- */
:is(button,label).btn{
  border-radius:14px;padding:13px 18px;min-height:46px;font-size:15px;letter-spacing:-.01em;
  box-shadow:0 2px 6px -1px color-mix(in srgb,var(--navy) 35%,transparent);
  transition:transform .14s var(--curva),filter .14s var(--curva);
}
:is(button,label).btn:active{transform:scale(.97)}
:is(button,label).btn.sm{padding:9px 14px;min-height:38px;font-size:13.5px;border-radius:12px}
:is(button,label).btn.sec{border-width:1.5px;border-color:color-mix(in srgb,var(--navy) 22%,var(--line));background:var(--card)}
:is(button,label).btn.sec:active{background:var(--tinta)}
.btnrow{gap:9px}
input,select,textarea{border-radius:12px;padding:11px 12px;border-width:1.5px}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3.5px color-mix(in srgb,var(--navy) 15%,transparent)}
.chip-b{border-radius:var(--r-pill);padding:7px 14px;font-size:13px;border-color:color-mix(in srgb,var(--line) 90%,transparent);transition:.14s var(--curva)}
.chip-b.on{box-shadow:0 2px 8px -2px color-mix(in srgb,var(--navy) 55%,transparent)}
.tabs button{border-radius:var(--r-pill);padding:8px 16px;font-size:13.5px;border-color:color-mix(in srgb,var(--line) 90%,transparent);transition:.16s var(--curva)}
.tabs button:active{transform:scale(.96)}
.tabs button.active{box-shadow:0 3px 10px -2px color-mix(in srgb,var(--navy) 45%,transparent)}
.seg{background:color-mix(in srgb,var(--lgrey) 85%,transparent);border-radius:14px;padding:3px}
.seg button{border-radius:11px;padding:8px 13px;font-size:13px;min-height:36px;transition:.16s var(--curva)}
.seg button.on{background:var(--card);color:var(--navy);box-shadow:var(--e1)}
:root[data-theme=dark] .seg button.on{color:#bfdbfe}
.seg.scroll button{padding:8px 13px}

/* ---- números: o mesmo cartão do "Na sala" ---- */
.stat{
  border-radius:var(--r-md);padding:12px 13px;box-shadow:var(--e1);
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-top:0;
  background:linear-gradient(180deg,var(--tinta),var(--card) 62%);
}
.stat b{font-size:24px;letter-spacing:-.03em}
.stat .muted{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.stat.green{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 70%,var(--card)),var(--card) 62%)}
.stat.red{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 70%,var(--card)),var(--card) 62%)}
.mabox{border-radius:var(--r-md)}

/* ---- destaques ---- */
.hero{
  border-radius:var(--r-xl);padding:17px 18px 15px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--navy) 96%,#000) 0%,var(--navy) 42%,color-mix(in srgb,var(--navy) 58%,#38bdf8) 100%);
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--navy) 85%,transparent);
}
.hero .dt{font-size:21px;letter-spacing:-.025em}
.hero .kpi{border-radius:var(--r-md);padding:9px 11px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.14)}
.hero .kpi b{font-size:21px;letter-spacing:-.02em}
.agora{border-radius:var(--r-xl);padding:15px 17px;box-shadow:var(--e2)}
.agora::before{width:5px}
.agora .tt{font-size:21px;letter-spacing:-.025em}
.quick{gap:9px}
.quick button{border-radius:var(--r-md);padding:11px 4px 9px;box-shadow:var(--e1);transition:transform .14s var(--curva),box-shadow .14s var(--curva)}
.quick button span{width:42px;height:42px;border-radius:var(--r-sm);background:var(--tinta)}
.quick button:active{transform:scale(.94);box-shadow:none}
.menu .mi{border-radius:var(--r-lg);padding:13px;box-shadow:var(--e1);min-height:96px}
.menu .mi .ic{border-radius:var(--r-sm);background:var(--tinta)}
.pend{border-radius:var(--r-md)}
.pend .ic{border-radius:var(--r-sm)}
.week .wd{border-radius:var(--r-sm)}
.tchip{border-radius:var(--r-pill);padding:5px 11px}
.warnbox{border-radius:var(--r-sm);padding:11px 13px;border-left-width:4px}
.bday{border-radius:var(--r-md)}
.anocard{border-radius:var(--r-lg)}

/* ---- tabelas: cabeçalho que não pesa ---- */
.tbl{font-size:13.5px}
.tbl th{
  background:color-mix(in srgb,var(--navy) 94%,#000);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:9px 6px;
}
.tbl td{padding:8px 6px}
.tbl tr:last-child td{border-bottom:0}
.tbl input[type=number],.tbl input[data-num]{border-radius:9px;padding:7px 2px}
.tblwrap{border-radius:var(--r-lg);box-shadow:var(--e2);border-color:color-mix(in srgb,var(--line) 75%,transparent)}

/* ---- transições de tela: uma curva só ---- */
#view.anim-fwd{animation:slideL .24s var(--curva)}
#view.anim-back{animation:slideR .24s var(--curva)}

/* ---- vazio não é erro: dá para dizer isso com espaço ---- */
.card.muted,.card .vazio{text-align:center;padding:26px 18px;color:var(--muted);font-size:13.5px;line-height:1.5}

@media (min-width:760px){ .card{padding:16px 18px} }
@media (min-width:760px) and (max-width:1023px){
  #view{padding:18px 18px 0;padding-bottom:calc(104px + var(--safe-b))}
  body[data-navhidden="1"] #view{padding-bottom:calc(24px + var(--safe-b))}
  #nav{left:50%;transform:translateX(-50%);right:auto;width:min(620px,calc(100% - 24px))}
}
@media (max-width:560px){
  #nav{left:6px;right:6px;padding-left:2px;padding-right:2px}
  #nav button .ico{padding:6px 9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- v12: o que gruda no topo, empilhado na ordem certa ------------------------------------
   A altura real da barra e do cabeçalho da turma entram como variáveis (medirTopo), então o
   cabeçalho da tabela para exatamente embaixo deles em vez de sumir atrás.                   */
:root{--topbar-h:54px;--cabt-h:0px}
/* SÓLIDO, não translúcido: com desfoque as linhas de alunos ainda fantasmavam por trás dele.
   E a "saia" acima cobre a faixa entre a barra azul e o cartão, por onde as linhas passavam. */
#view .card.cabt{
  position:sticky;top:var(--topbar-h);z-index:11;margin-left:-2px;margin-right:-2px;
  background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:box-shadow .2s var(--curva);
}
#view .card.cabt::after{
  content:"";position:absolute;left:-24px;right:-24px;bottom:100%;height:28px;
  background:var(--bg);pointer-events:none;
}
#app.rolou #view .card.cabt{box-shadow:var(--e3)}
#app.rolou #topbar{box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -14px rgba(8,20,44,.95)}
/* O cabeçalho da tabela gruda no topo da PRÓPRIA tabela (a .tblwrap rola na horizontal, então
   ele é medido dentro dela). Qualquer deslocamento aqui joga o cabeçalho para dentro da lista. */
.tbl th{top:0}
.tbl th.fx,table.tbl.mapa thead th.fx{z-index:6}
@media print{ #view .card.cabt{position:static;box-shadow:none} }

/* ---- v12: "Precisa de você" — um bloco só, o resto recolhido ---- */
.sec-h.precisa{align-items:center}
.sec-h.precisa .badge{flex:0 0 auto}
details.maisav{margin:0 0 10px}
details.maisav>summary{
  list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--navy);
  padding:9px 12px;border-radius:var(--r-md);background:var(--tinta);text-align:center;
}
:root[data-theme=dark] details.maisav>summary{color:#bfdbfe}
details.maisav>summary::-webkit-details-marker{display:none}
details.maisav[open]>summary{margin-bottom:8px}
details.maisav .pend:last-child,details.maisav .card:last-child{margin-bottom:0}
/* o cartão de novidades */
.card.nov{border-left:4px solid var(--navy);background:linear-gradient(180deg,var(--tinta),var(--card) 34%)}
.card.nov .list{box-shadow:none;border-color:color-mix(in srgb,var(--line) 70%,transparent)}
.card.nov .item .nm b{font-size:14px;letter-spacing:-.01em}
.card.nov .item .nm .sub{font-size:12.5px;line-height:1.5;margin-top:3px}
/* novidades: um toque abre o item; o resto fica em uma linha */
.novl{border-radius:var(--r-md);overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:var(--card);margin-top:4px}
.novl.hist{margin-top:8px;opacity:.92}
details.novi{border-bottom:1px solid var(--line)}
details.novi:last-child{border-bottom:0}
details.novi>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 14px;min-height:50px}
details.novi>summary::-webkit-details-marker{display:none}
details.novi>summary b{flex:1;min-width:0;font-size:14px;font-weight:700;letter-spacing:-.01em}
details.novi>summary svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto;transition:transform .2s var(--curva)}
details.novi[open]>summary svg{transform:rotate(90deg)}
details.novi[open]>summary{padding-bottom:4px}
details.novi .novd{padding:0 14px 13px;font-size:12.8px;line-height:1.55;color:var(--muted)}
details.novi .novd b{color:var(--text)}
/* cartões de aviso: a faixa de cor por dentro, não pendurada na borda */
.card.avx{border-left:0;position:relative;overflow:hidden;padding-left:19px}
.card.avx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--navy)}
.card.avx.ok::before{background:var(--dgreen)}
.card.avx.al::before{background:var(--dorange)}
.card.avx.ur::before{background:var(--dred)}
.card.ba-aviso{border-left:0;position:relative;overflow:hidden;padding-left:19px}
.card.ba-aviso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dorange)}
.card.ba-aviso.urg::before{background:var(--dred)}
/* a seta do fim da linha não é um ícone com fundo */
.pend>.ic:last-child{width:auto;height:auto;background:none;color:var(--muted);flex:0 0 auto}
.pend>.ic:last-child svg{width:18px;height:18px;display:block}
/* lista dentro de cartão não precisa de segunda sombra */
.card>.list,.card .list{box-shadow:none}
/* cartão com faixa de cor na borda: canto esquerdo menos redondo, para a faixa encostar */
.card[style*="border-left"]{border-top-left-radius:9px;border-bottom-left-radius:9px}
/* o cabeçalho da turma encolhe quando a tela rola: sobra o essencial */
#view .card.cabt [data-vivo="cabTurma"]{
  overflow:hidden;max-height:200px;opacity:1;
  transition:max-height .26s var(--curva),opacity .18s var(--curva),margin .26s var(--curva);
}
#app.rolou #view .card.cabt [data-vivo="cabTurma"]{max-height:0;opacity:0;margin-top:-4px}
#app.rolou #view .card.cabt{padding-top:8px;padding-bottom:8px}

/* ---- v12: o cabeçalho da turma em duas linhas — o nome da turma nunca corta ---- */
.card.cabt .cabr1{gap:8px}
.card.cabt .cabr1 .nsel{flex:1 1 auto;min-width:130px;max-width:none;text-overflow:ellipsis;font-size:15px}
.card.cabt .cabr2{margin-top:9px}
.card.cabt .seg.bims{display:flex;width:100%;gap:2px}
.card.cabt .seg.bims button{flex:1 1 0;min-width:0;padding:8px 4px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:600px){
  .card.cabt .cabr2{margin-top:0;flex:0 0 auto}
  .card.cabt{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
  .card.cabt .cabr1{flex:1 1 220px}
  .card.cabt .cabr2{width:auto}
  .card.cabt .seg.bims{width:auto}
  .card.cabt .seg.bims button{flex:0 0 auto;padding:8px 12px}
  .card.cabt>[data-vivo="cabTurma"]{flex:1 1 100%}
}
#app.rolou #view .card.cabt .cabr2{margin-top:7px}
/* calendário: o mês numa linha, as ações em outra — cabe em 360 px */
.row.calnav{margin:4px 0 8px;gap:8px}
.row.calnav b.center{font-size:18px;letter-spacing:-.02em;text-align:center}
.row.calnav .btn.sm{min-width:44px;font-size:18px;line-height:1;padding:8px 10px}
.btnrow.calacoes{margin:0 0 10px}
.btnrow.calacoes .btn{flex:1 1 auto;white-space:nowrap}
.btnrow.calacoes .btn svg{width:16px;height:16px;vertical-align:-3px}
/* o número do atraso no ícone da barra */
#nav button{overflow:visible}
.navbadge{
  position:absolute;top:1px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--dred);color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px var(--card);pointer-events:none;
}
:root[data-theme=dark] .navbadge{background:#ef4444;color:#fff;box-shadow:0 0 0 2px var(--card)}
/* o traço do item ativo passa para baixo do rótulo (a ilha não tem borda em cima) */
@media (max-width:1023px){
  #nav button::after{top:auto;bottom:1px;height:3px}
  #nav button.active::after{width:20px}
  .navbadge{top:2px}
}
/* no computador o selo do atraso fica ao lado do rótulo, no fim da linha */
@media (min-width:1024px){
  .navbadge{position:static;margin-left:auto;box-shadow:none;height:18px;min-width:18px;font-size:10.5px}
  body[data-rail="1"] .navbadge{position:absolute;top:6px;left:calc(50% + 6px);margin:0;box-shadow:0 0 0 2px var(--card)}
}
/* o número grande é só o primeiro <b> do cartão — o resto da linha volta ao normal */
.stat .small b,.stat .muted b,.stat div b{display:inline;font-size:12px;letter-spacing:0;color:inherit;line-height:inherit}
.stat>b{display:block;font-size:24px;letter-spacing:-.03em;line-height:1.15}
:root[data-theme=dark] .stat>b{color:#bfdbfe}
.stat.red>b{color:var(--dred)}.stat.green>b{color:var(--dgreen)}
.stat>b small{font-size:14px;font-weight:700}
/* Modo aula: os quatro passos cabem inteiros no celular */
.mapassos button{padding:9px 6px;gap:5px;font-size:12px}
.mapassos button .ic svg{width:16px;height:16px}
@media (max-width:470px){
  .mapassos{gap:4px}
  .mapassos button{font-size:11px;padding:9px 3px;gap:4px;letter-spacing:-.02em}
  .mapassos button .ic svg{width:15px;height:15px}
}
@media (max-width:360px){ .mapassos button span{display:none} }
/* os rótulos dos passos cabem até em 360 px — só somem abaixo disso */
@media (min-width:361px) and (max-width:420px){ .mapassos button span{display:inline} }
@media (max-width:360px){ .mapassos button span{display:none} }
details.novi>summary::before,details.maisav>summary::before{content:none}

/* ---- v12: acertos do computador (barra lateral) ---- */
@media (min-width:1024px){
  /* o item ativo já tem fundo próprio — o tracinho era da barra de baixo */
  #nav button::after{display:none}
  #nav button .ico{border-radius:0}
  /* atalhos: mais colunas onde sobra largura, em vez de seis botões enormes */
  .quick{grid-template-columns:repeat(6,1fr)}
  .quick.q3{grid-template-columns:repeat(6,1fr)}
  .quick button{padding:14px 8px 11px}
  /* a tela não precisa esticar sem limite num monitor grande */
  #view>*{max-width:1280px;margin-left:auto;margin-right:auto}
  #view .card.cabt{max-width:1280px}
}

/* ---- v12.1: a tabela rola dentro dela mesma, e aí o cabeçalho pode grudar ----------------
   A .tblwrap já rolava na horizontal (o que faz dela o "contêiner" do sticky). Dando a ela um
   teto de altura, ela passa a rolar também na vertical — e o cabeçalho das colunas (A, B, M,
   TC, REC., NOTA) fica parado no topo enquanto você desce a lista de alunos. Quando a rolagem
   chega ao fim, ela continua na página, como antes.                                          */
.tbl thead th{z-index:5}
.tbl th.fx,table.tbl.mapa thead th.fx{z-index:7}
/* No CELULAR a tabela rola junto com a página, como sempre: uma caixa de rolagem dentro da
   página vira armadilha — você tenta descer a tela e desce a tabela. No COMPUTADOR, onde a
   roda do mouse sobre a tabela é natural, ela ganha altura máxima e o cabeçalho fica parado. */
/* Nada de caixa de rolagem dentro da página: uma segunda barra ao lado da barra do navegador é
   feia e confunde. Quando a tabela CABE na largura (é o caso no computador), a .tblwrap deixa de
   ser um contêiner de rolagem — e aí o cabeçalho das colunas pode grudar na PÁGINA, logo abaixo
   da barra azul e do cabeçalho da turma. Quando não cabe, ela volta a rolar só na horizontal e o
   cabeçalho anda junto com as linhas, como sempre.                                            */
.tblwrap.cabe{overflow:visible}
/* -1px mata a costura de subpixel entre um sticky e o outro */
.tblwrap.cabe .tbl th{top:calc(var(--topbar-h) + var(--cabt-h) - 1px)}
.tblwrap.cabe .tbl thead th{z-index:8}
/* nada de overflow aqui: qualquer recorte na tabela mata o sticky do cabeçalho */
.tblwrap.cabe table.tbl{border-radius:var(--r-lg)}
.tblwrap.cabe .tbl thead th:first-child{border-top-left-radius:var(--r-lg)}
.tblwrap.cabe .tbl thead th:last-child{border-top-right-radius:var(--r-lg)}
@media print{ .tblwrap{overflow:visible!important} .tblwrap.cabe .tbl th{top:0} }

/* ---- v12.1: acabamento ------------------------------------------------------------------
   1) Cartões de número lado a lado: o rótulo de um cabe em uma linha e o do vizinho em duas,
      e aí os números ficavam em alturas diferentes. Agora o rótulo reserva duas linhas e a
      legenda desce para o pé do cartão — os três leem como um conjunto só.                 */
.stat{display:flex;flex-direction:column;gap:3px}
.stat>.muted:first-child{display:block;line-height:1.3;min-height:2.6em}
.stat>.small:last-child{margin-top:auto}
/* 2) Fileiras com 3 ou 4 botões: em vez de espremer tudo numa linha só (e o rótulo quebrar em
      três), os botões passam a caber em duas linhas, com a mesma largura.                   */
.btnrow .btn{flex:1 1 124px}
.btnrow .btn.sm{flex:1 1 104px}
@media (min-width:760px){ .btnrow .btn{flex:0 1 auto;min-width:150px} }

/* ============================================================ v13.0 — MODO LANÇAMENTO
   A pilha de provas na mão: um aluno por vez, nome grande, campo no foco. Mesma linguagem do
   Modo aula — alvo grande, um estado por tela, nada em volta.                                */
.maTop.lnTop .seg.scroll.lncols{margin:9px -2px 0;padding-bottom:10px}
.maTop.lnTop .seg.scroll.lncols button{flex:0 0 auto;padding:8px 14px;font-size:13px}
.card.lncard{border-left:0;position:relative;overflow:hidden;padding:16px 18px 18px;text-align:center}
.card.lncard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc,var(--navy))}
.card.lncard .row{text-align:left}
.lnnr{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--tinta2);border-radius:var(--r-pill);padding:4px 11px}
:root[data-theme=dark] .lnnr{color:#bfdbfe}
.lnnome{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:12px 0 2px;text-wrap:balance}
.lnsub{margin-bottom:10px}
input.lnnota{
  width:100%;max-width:240px;margin:2px auto 0;display:block;text-align:center;
  font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.1;padding:10px 8px;
  border-radius:var(--r-md);border:2.5px solid var(--fieldb);background:var(--field);
  font-variant-numeric:tabular-nums;
}
input.lnnota:focus{border-color:var(--navy);box-shadow:0 0 0 5px color-mix(in srgb,var(--navy) 14%,transparent)}
input.lnnota::placeholder{color:color-mix(in srgb,var(--muted) 45%,transparent);font-weight:700}
.lnmax{font-size:12px;color:var(--muted);font-weight:700;margin-top:6px}
.btnrow.lnacoes{margin:12px 0 10px}
.btnrow.lnacoes .btn{flex:1 1 130px;font-size:16px;min-height:52px}
.btnrow.lnacoes .btn.sec{flex:0 1 110px}
.card.lnbusca{padding:10px 12px}
.card.lnbusca .impi{width:34px;height:34px;border-radius:var(--r-sm)}
.card.lnbusca input{border:0;background:none;font-size:15px;padding:8px 2px}
.card.lnbusca input:focus{box-shadow:none}
.lnres{margin-top:2px}
.lnres .lnhit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;
  border-top:1px solid var(--line);padding:10px 2px;cursor:pointer;font:inherit;color:inherit}
.lnres .lnhit .nr{width:30px;text-align:center;color:var(--muted);font-weight:700;font-size:12px;flex:0 0 auto}
.lnres .lnhit .nm{flex:1;min-width:0;font-weight:600;font-size:14.5px}
.lnres .lnhit .nm .sub{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.lnres .lnhit:active{background:var(--card2)}
.chips.lnfalta{flex-wrap:wrap;overflow:visible}
.chips.lnfalta .chip-b{font-size:12.5px;padding:6px 12px}
.card.empty.lnfim .ico{font-size:40px;color:var(--dgreen)}
.ibtn.lnGo{font-size:17px}
@media (min-width:760px){
  .card.lncard{padding:22px 26px 24px}
  .lnnome{font-size:26px}
  input.lnnota{font-size:52px;max-width:280px}
}
/* dentro do topo do Modo lançamento só o nome da turma é grande */
.maTop.lnTop .row.small b,.maTop.lnTop .row.small span{font-size:12.5px;line-height:1.4}
.maTop.lnTop .grow>b{font-size:19px}

/* ---- v13.1: a cruz de foco na tabela (linha + coluna do campo em que você está) ---- */
.tbl tbody tr.focoLin>td:not(.med){background:color-mix(in srgb,var(--navy) 5%,var(--card))}
.tbl tbody td.focoCol:not(.med){background:color-mix(in srgb,var(--navy) 5%,var(--card))}
.tbl tbody tr.focoLin>td.focoCol:not(.med){background:color-mix(in srgb,var(--navy) 11%,var(--card))}
.tbl.fixo tr.focoLin>td:first-child,.tbl.fixo tr.focoLin>td:nth-child(2){background:color-mix(in srgb,var(--navy) 8%,var(--card))}
.tbl thead th.focoCol{background:color-mix(in srgb,var(--navy) 62%,#fff);color:#fff}
:root[data-theme=dark] .tbl thead th.focoCol{background:color-mix(in srgb,var(--navy) 55%,#000)}
.tbl tbody tr.focoLin>td,.tbl tbody td.focoCol{transition:background .12s var(--curva)}
@media print{ .focoLin>td,.focoCol{background:none!important} }
/* quantas notas já foram lançadas em cada coluna, no próprio cabeçalho da tabela */
.tbl thead th .thn{font-weight:700;opacity:.9;font-size:9.5px;letter-spacing:.02em;margin-top:1px}
.tbl thead th .thn.ok{color:#86efac}
.tbl thead th .thn.meio{color:#fde68a}
.tbl thead th .thb{display:block;line-height:1.15}

/* ---- v13.3: participação que vira nota, e o bloco de apagar ---- */
.list.partlist .item{gap:10px}
.list.partlist .parts{gap:10px}
.list.partlist .parts b{min-width:34px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.list.partlist .parts b.pos{color:var(--dgreen)}
.list.partlist .parts b.neg{color:var(--dred)}
.mabtn{min-width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);
  font:inherit;font-size:19px;font-weight:800;color:var(--text);cursor:pointer;line-height:1;transition:.12s var(--curva)}
.mabtn:active{transform:scale(.92)}
.mabtn.on{background:var(--tinta2);border-color:transparent;color:var(--navy)}
:root[data-theme=dark] .mabtn.on{color:#bfdbfe}
.modal.partmodal{max-width:520px;display:flex;flex-direction:column;overflow:hidden}
.modal.partmodal>.btnrow,.modal.partmodal>.center{flex:0 0 auto}
.modal.partmodal .list.partprev{flex:1 1 auto;min-height:96px;overflow:auto;margin-bottom:10px}
.partn{font-size:17px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.partn.ok{color:var(--dgreen)}
.partn.zero{color:var(--dred)}
/* segurar o − / + : tirar ou dar vários pontos de uma vez */
.partresumo{gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card2)}
.partresumo b{font-size:19px;font-variant-numeric:tabular-nums}
.partresumo b.pos{color:var(--dgreen)}.partresumo b.neg{color:var(--dred)}
.chips.pvgrade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible}
.chips.pvgrade .chip-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;font-size:17px;font-weight:800;line-height:1.1}
.chips.pvgrade .chip-b .small{font-weight:600;color:var(--muted);font-size:11px}
.chips.pvgrade .chip-b.neg{border-color:color-mix(in srgb,var(--dred) 35%,var(--line));color:var(--dred)}
.chips.pvgrade .chip-b.pos{border-color:color-mix(in srgb,var(--dgreen) 35%,var(--line));color:var(--dgreen)}
.chips.pvgrade .chip-b:active{transform:scale(.95)}
.list.partlist .mabtn[data-part]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
details.cfg.apagarbox>summary h3{color:var(--dred)}
details.cfg.apagarbox .chip-b{border-color:color-mix(in srgb,var(--dred) 35%,var(--line))}
details.cfg.apagarbox .center{margin-top:6px}
/* Modo lançamento por aluno: uma grade com todas as colunas do mesmo aluno */
.row.lnmodo{margin:10px 0 0}
.row.lnmodo .seg.wide{width:100%}
.lngrade{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin-top:10px;width:100%}
.lncel{display:flex;flex-direction:column;align-items:center;gap:4px}
.lnlbl{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;line-height:1.2}
.lnlbl small{display:block;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.8}
input.lnnota.peq{font-size:26px;max-width:100%;padding:8px 4px;border-radius:var(--r-sm);border-width:2px}
@media (min-width:760px){ input.lnnota.peq{font-size:30px} }
/* a fileira de ferramentas da Sala quebra em vez de cortar o último nome */
.card.nhead .seg.scroll{flex-wrap:wrap;overflow:visible;gap:3px}
.card.nhead .seg.scroll button{flex:1 1 auto}

/* ---- transferidos e remanejados (v13.4): recolhidos, e quando aparecem ficam discretos ---- */
.inatlink{margin:6px 2px 10px;font-size:12px}
.inatlink a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.inatlink a:hover{color:var(--navy)}
.list .item.inativo{background:transparent;opacity:.62;padding-top:6px;padding-bottom:6px}
.list .item.inativo .nm{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.25}
.list .item.inativo .nm .badge{vertical-align:middle;font-weight:600;font-size:10px;padding:1px 7px}
.macard.fora{opacity:.5;cursor:default;border-style:dashed;background:transparent;min-height:0;padding:7px 10px}
.macard.fora .manm{font-size:13px;font-weight:600}
.macard.fora .mast{color:var(--muted);font-size:10px;letter-spacing:.03em}

/* ---- v13.4: a folha de frequência do diário, na tela ------------------------------------- */
table.tbl.dgrade{font-size:12px}
table.tbl.dgrade th.dmes{text-align:center;font-size:11px;letter-spacing:.08em;opacity:.92;border-left:1px solid rgba(255,255,255,.22)}
table.tbl.dgrade th.ddia{padding:3px 0;min-width:22px;text-align:center;font-variant-numeric:tabular-nums;font-size:11px}
table.tbl.dgrade td.dm{padding:3px 0;text-align:center;min-width:22px;color:var(--muted);font-weight:700}
table.tbl.dgrade td.dm.f{color:var(--dred);background:color-mix(in srgb,var(--dred) 9%,transparent)}
table.tbl.dgrade td.dm.at{color:var(--navy);font-weight:800}
table.tbl.dgrade td.dm.disp{color:var(--muted);font-size:10px}
table.tbl.dgrade tr.rodape td{background:var(--card2);font-weight:700;color:var(--muted)}
table.tbl.dgrade tr.rodape td.dm.cont{color:var(--dred)}
table.tbl.dgrade td.dnome{cursor:pointer}
table.tbl.dgrade th.ddia{cursor:pointer}
table.tbl.dgrade th.ddia.pend::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:#f87171;margin:2px auto 0}
table.tbl.dgrade th.ddia.fut{opacity:.45}
table.tbl.dgrade td.dnr,table.tbl.dgrade th.dnr{width:30px;min-width:30px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
/* as duas primeiras colunas ficam paradas quando a grade rola para o lado — em qualquer tela */
table.tbl.dgrade td.dnr:first-child,table.tbl.dgrade th.dnr:first-child{position:sticky;left:0;z-index:3;background:var(--card)}
table.tbl.dgrade td.dnome,table.tbl.dgrade th.dnome{position:sticky;left:30px;z-index:3;background:var(--card);box-shadow:1px 0 0 var(--line)}
table.tbl.dgrade thead th.dnr:first-child,table.tbl.dgrade thead th.dnome{z-index:9}
table.tbl.dgrade tr.inativo td.dnr:first-child,table.tbl.dgrade tr.inativo td.dnome{background:var(--card2)}
/* e o número repete na ponta direita, como na planilha, para conferir linha por linha */
table.tbl.dgrade td.dnr2{background:var(--card2);font-weight:700;color:var(--muted)}
table.tbl.dgrade th.dnr2{border-left:1px solid rgba(255,255,255,.22)}
table.tbl.canhoto td.dnome{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
table.tbl.dgrade td.dnome{font-weight:600;padding-right:10px;text-align:left;width:100%}
table.tbl.dgrade th.dnome{text-align:left}
table.tbl.dgrade td.dnome>span{display:block;max-width:clamp(76px,22vw,400px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:430px){ table.tbl.dgrade{font-size:11px} table.tbl.dgrade td.dnome>span{max-width:72px} }
table.tbl.dgrade td.dtot{text-align:center;font-weight:800;font-variant-numeric:tabular-nums;background:var(--card2)}
table.tbl.dgrade th.dtot{text-align:center;border-left:1px solid rgba(255,255,255,.22);letter-spacing:.04em}
table.tbl.dgrade td.dtot.tem{color:var(--dred)}
table.tbl.dgrade td.dfora{color:var(--muted);font-size:11px;letter-spacing:.06em;text-align:center}
table.tbl.canhoto td{font-variant-numeric:tabular-nums}
table.tbl.canhoto td.falta{color:var(--dorange)}
table.tbl.dgrade th.ddia.tr{color:#fde68a}
table.tbl.dgrade th.ddia.tr::after{content:'−';display:block;font-size:9px;line-height:1;opacity:.9}
/* o canhoto do jeito que se preenche: número, nota e faltas, grandes e em ordem */
.canhografo{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px;margin-top:10px}
.cg{display:flex;align-items:baseline;gap:7px;padding:7px 9px;border:1.5px solid var(--line);border-radius:12px;background:var(--card2);font-variant-numeric:tabular-nums}
.cg .cgnr{color:var(--muted);font-size:12px;font-weight:700;min-width:18px}
.cg .cgn{font-size:19px;font-weight:800;color:var(--navy);flex:1;text-align:center}
.cg .cgf{font-size:12px;font-weight:700;color:var(--muted);min-width:18px;text-align:right}
.cg.temf .cgf{color:var(--dred)}
.cg.fora{opacity:.5}.cg.fora .cgn{font-size:13px;color:var(--muted)}
:root[data-theme=dark] .cg .cgn{color:#bfdbfe}
@media print{ #nav,#topbar,.btnrow,.ibtn,.tabs{display:none!important} .card{break-inside:avoid} }
/* conferência das datas */
details.card.cfg.conferirbox{padding:14px 16px}
details.card.cfg.conferirbox>summary>.small{white-space:nowrap}
.conferirbox .aviso{color:var(--dorange);font-weight:700}
.cflist{display:grid;gap:10px}
.cfitem{padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card2)}
.cfitem.alerta{border-color:color-mix(in srgb,var(--dorange) 40%,var(--line))}
.cfitem b{font-size:13px}
.cfitem .small{margin-top:3px;line-height:1.5}
table.tbl.dgrade td.dm.semaula{color:var(--muted);font-size:9px;letter-spacing:.02em;background:repeating-linear-gradient(135deg,transparent,transparent 3px,color-mix(in srgb,var(--muted) 12%,transparent) 3px,color-mix(in srgb,var(--muted) 12%,transparent) 6px)}
table.tbl.dgrade th.ddia.semaula{opacity:.6}
table.tbl.dgrade th.ddia.semaula::after{content:'';display:block;width:8px;height:2px;border-radius:2px;background:currentColor;margin:2px auto 0;opacity:.5}
/* uma linha separando os meses, na grade inteira */
table.tbl.dgrade td.mesini,table.tbl.dgrade th.ddia.mesini{border-left:2px solid color-mix(in srgb,var(--navy) 55%,transparent)}
table.tbl.dgrade thead th.dmes+th.dmes{border-left:2px solid rgba(255,255,255,.5)}
/* o verso do diário, na tela */
.card.verso .vbloco{margin-top:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card2)}
.card.verso .vtit{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card.verso .vlista{margin:8px 0 0;padding-left:22px;font-size:13.5px;line-height:1.65}
.card.verso .vlista.sem{list-style:none;padding-left:0}
.card.verso .vlista.sem li{padding:2px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.card.verso .vlista.sem li:last-child{border-bottom:0}
.card.verso .iconbtn{flex:0 0 auto}
/* dividir a turma em dois diários: uma linha por dia da semana */
.ddias{display:grid;gap:8px;margin-top:10px}
.ddia-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card2)}
.ddia-row .ddia-wd{font-weight:700;font-size:13px;min-width:96px}
.seg.mini{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;flex:0 0 auto}
.seg.mini button{border:0;background:var(--card);color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:6px 10px;cursor:pointer}
.seg.mini button.on{background:var(--navy);color:#fff}
/* abertura do app: logo + indicador, no lugar da tela branca */
.splash{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.splash img{border-radius:18px;box-shadow:var(--sh-2);animation:splashpop .4s var(--curva)}
.splash .spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--navy);animation:spin .8s linear infinite}
:root[data-theme=dark] .splash .spin{border-top-color:#bfdbfe}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes splashpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.splash .spin{animation-duration:1.6s}.splash img{animation:none}}

/* ============================================================ v15 — contas, boas-vindas e segurança */
.onb h2{margin:6px 0 4px}
.onbl{display:flex;flex-direction:column;gap:8px;margin-top:12px;text-align:left}
.onbopt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:var(--card);color:var(--text);font:inherit;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s,border-color .12s}
.onbopt:hover{border-color:color-mix(in srgb,var(--navy) 35%,transparent);box-shadow:var(--shadow)}
.onbopt:active{transform:scale(.985)}
.onbopt>.ic:first-child{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--navy) 10%,var(--card));color:var(--navy)}
.onbopt>.ic:first-child svg{width:22px;height:22px}
.onbopt b{display:block;font-size:15px}
.onbopt small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:2px}
.onbopt>.ic:last-child{color:var(--muted);flex:0 0 auto}
.onbopt.prim{background:linear-gradient(135deg,var(--navy),color-mix(in srgb,var(--navy) 72%,#000));color:#fff;border-color:transparent}
.onbopt.prim small,.onbopt.prim>.ic:last-child{color:rgba(255,255,255,.82)}
.onbopt.prim>.ic:first-child{background:rgba(255,255,255,.16);color:#fff}
.novaconta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.novaconta span{color:var(--muted);font-size:14px}
.card.conta .kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:14px}
.card.conta .kv span{color:var(--muted)}
.card.conta .kv b{text-align:right;word-break:break-word}
pre.regras{white-space:pre-wrap;word-break:break-word;font-size:11.5px;line-height:1.45;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;max-height:260px;overflow:auto;margin:6px 0}
.passos-reg{margin:6px 0 8px;padding-left:20px;line-height:1.55}

/* ============================================================ v15 — CARA NOVA
   Uma camada por cima de tudo: não muda nenhuma função, só a aparência. A cor de cada escola
   (--navy) continua mandando; o resto ficou mais leve, arredondado e com mais respiro. */
:root{
  --r-card:20px; --r-ctl:14px;
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 3px 10px rgba(15,23,42,.05);
  --sh-2:0 2px 4px rgba(15,23,42,.05),0 12px 28px rgba(15,23,42,.09);
  --sh-float:0 12px 32px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);
  --bg:#f1f4f9;
}
:root[data-theme=dark]{
  --bg:#0a0f16; --card:#131a24; --card2:#1a2230; --line:#243042;
  --sh-1:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.5),0 14px 32px rgba(0,0,0,.45);
  --sh-float:0 14px 36px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
}
body{background:radial-gradient(1100px 460px at 50% -140px,color-mix(in srgb,var(--navy) 16%,transparent),transparent 72%),var(--bg);background-repeat:no-repeat}
h1,h2,h3{letter-spacing:-.015em}

/* topo: mais profundidade e brilho discreto */
#topbar{box-shadow:0 6px 22px color-mix(in srgb,var(--navy) 32%,transparent);border-bottom:1px solid rgba(255,255,255,.08)}
#topbar #btnBack{border-radius:14px;background:rgba(255,255,255,.14)}
.tb-ic{border-radius:14px!important}

/* cartões mais macios; no computador eles "levantam" no mouse */
.card{border-radius:var(--r-card);box-shadow:var(--sh-1);border:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.stat{border-radius:18px;box-shadow:var(--sh-1)}
@media (hover:hover){
  .card.click,.menu .mi,.onbopt{transition:transform .14s ease,box-shadow .14s ease}
  .card.click:hover,.menu .mi:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
}

/* botões */
:is(button,label).btn{border-radius:var(--r-ctl);min-height:46px;box-shadow:0 6px 16px color-mix(in srgb,var(--navy) 26%,transparent)}
:is(button,label).btn.sm{min-height:36px;border-radius:12px}
:is(button,label).btn.sec{background:color-mix(in srgb,var(--navy) 6%,var(--card));border:1px solid color-mix(in srgb,var(--navy) 28%,var(--line))}
input,select,textarea{border-radius:12px}

/* títulos de seção: discretos, em versalete (o texto continua o mesmo) */
.sec-h h3{font-size:13px;font-weight:800;color:var(--muted);font-variant-caps:all-small-caps;letter-spacing:.06em}

/* menus em grade (Mais, Turma): cada item com um selo colorido */
.menu{gap:10px}
.menu .mi{border-radius:18px;padding:14px 13px 12px;gap:6px}
.menu .mi .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.menu .mi .ic svg{width:23px;height:23px}
.menu .mi:nth-child(6n+1) .ic{background:color-mix(in srgb,#3b82f6 15%,var(--card));color:#2563eb}
.menu .mi:nth-child(6n+2) .ic{background:color-mix(in srgb,#8b5cf6 15%,var(--card));color:#7c3aed}
.menu .mi:nth-child(6n+3) .ic{background:color-mix(in srgb,#14b8a6 16%,var(--card));color:#0d9488}
.menu .mi:nth-child(6n+4) .ic{background:color-mix(in srgb,#f59e0b 18%,var(--card));color:#b45309}
.menu .mi:nth-child(6n+5) .ic{background:color-mix(in srgb,#f43f5e 14%,var(--card));color:#e11d48}
.menu .mi:nth-child(6n+6) .ic{background:color-mix(in srgb,#22c55e 16%,var(--card));color:#15803d}
:root[data-theme=dark] .menu .mi:nth-child(6n+1) .ic{color:#93c5fd}
:root[data-theme=dark] .menu .mi:nth-child(6n+2) .ic{color:#c4b5fd}
:root[data-theme=dark] .menu .mi:nth-child(6n+3) .ic{color:#5eead4}
:root[data-theme=dark] .menu .mi:nth-child(6n+4) .ic{color:#fcd34d}
:root[data-theme=dark] .menu .mi:nth-child(6n+5) .ic{color:#fda4af}
:root[data-theme=dark] .menu .mi:nth-child(6n+6) .ic{color:#86efac}
@media (min-width:700px){.menu{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.menu{grid-template-columns:repeat(4,1fr)}}

/* cartão de destaque do dia */
.hero{border-radius:24px}

/* barra de abas flutuante (celular e tablet) — no computador continua a barra lateral */
@media (max-width:1023px){
  #nav{bottom:calc(8px + var(--safe-b));border-radius:26px;padding:6px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
    background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:var(--sh-float)}
  #nav button{border-radius:20px;padding:5px 0 4px;font-size:10.5px;font-weight:600;gap:3px}
  #nav button .ico{padding:5px 14px;border-radius:15px;display:flex;align-items:center;justify-content:center}
  #nav button .ico svg{width:22px;height:22px}
  #nav button.active{color:var(--navy);font-weight:800}
  #nav button.active .ico{background:var(--navy);color:#fff;transform:none;box-shadow:0 5px 14px color-mix(in srgb,var(--navy) 42%,transparent)}
  :root[data-theme=dark] #nav button.active .ico{background:color-mix(in srgb,var(--navy) 70%,#fff 12%)}
  #view{padding-bottom:calc(108px + var(--safe-b))}
  body[data-navhidden="1"] #view{padding-bottom:calc(24px + var(--safe-b))}
  #toast{bottom:calc(104px + var(--safe-b))}
  body[data-navhidden="1"] #toast{bottom:calc(24px + var(--safe-b))}
  .btnrow.fixo{bottom:calc(84px + var(--safe-b))}
  body[data-navhidden="1"] .btnrow.fixo{bottom:calc(24px + var(--safe-b))}
}
@media (max-width:430px){ #nav button .ico{padding:5px 10px} #nav button{font-size:10px;letter-spacing:-.01em} }
@media (max-width:360px){ #nav button .ico{padding:5px 7px} #nav button{font-size:9.5px} }
@media (prefers-reduced-motion:reduce){ .card.click:hover,.menu .mi:hover{transform:none} }

/* ============================================================ v15.1 — ÁREA DO ADMINISTRADOR */
.admporta{text-align:center;padding:22px 18px}
.admporta h3{margin:12px 0 6px;display:block;font-size:19px;text-transform:none;letter-spacing:-.01em;color:var(--text);font-weight:800}
.admporta h3::after{display:none}
.admporta input{max-width:320px;margin:0 auto;display:block}
.admporta label.f{text-align:left;max-width:320px;margin:10px auto 4px}
.admporta .btnrow{justify-content:center}
.admcad{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--navy),#4c1d95);color:#fff;box-shadow:var(--sh-2)}
.admcad svg{width:28px;height:28px}
.admcad.sm{width:38px;height:38px;border-radius:12px;flex:none}
.admcad.sm svg{width:20px;height:20px}
.admporta-link{border:1px dashed color-mix(in srgb,var(--navy) 35%,var(--line))}
.admtopo{background:color-mix(in srgb,var(--navy) 7%,var(--card))}
.admconta .av{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--navy) 14%,var(--card));color:var(--navy);font-weight:700;font-size:14px}
[data-theme=dark] .admconta .av{color:#bfdbfe}
.admconta .grow{min-width:0}
.admconta .grow .small{overflow:hidden;text-overflow:ellipsis}
.admres{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 4px}
.admres div{background:var(--card2);border-radius:12px;padding:8px 4px;text-align:center}
.admres b{display:block;font-size:18px}
.admres span{font-size:11px;color:var(--muted)}
.admporta .btnrow .btn{flex:0 1 320px;width:100%;max-width:320px}
/* v15.1 — administrador vendo outra conta (só leitura) */
body.espia #topbar{background:linear-gradient(135deg,#4c1d95,#6d28d9)!important}
body.espia #topbar{flex-wrap:wrap;row-gap:6px}
#espiaTopo{flex-basis:100%;order:99}
.espiabar{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.espiabar .eo{font-size:18px}
.espiabar b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.espiabar small{display:block;opacity:.85;font-size:11.5px}
.espiabar .grow{min-width:0}
.espiabar .btn{background:#fff!important;color:#4c1d95!important;flex:none;min-height:34px}
.espiacard{border:2px solid #6d28d9}
.admtot{margin:0 0 10px}
.admconta .badge{vertical-align:middle;font-size:10.5px}
/* v15.1 — lixeira e pedido de exclusão */
.pendapagar{text-align:center;padding:22px 18px}
.pendapagar .ico{font-size:40px;display:block}
.pendapagar h3{display:block;font-size:18px;text-transform:none;letter-spacing:-.01em;color:var(--text);margin:8px 0}
.pendapagar h3::after{display:none}
.pendapagar .btnrow{justify-content:center}
.admpedido{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:var(--red);color:var(--dred);font-size:13.5px}
.admpedido .small{color:inherit;opacity:.85;margin-top:2px}
.admaviso{background:var(--orange);color:var(--dorange);border:0}
.lixit b{word-break:break-word}
/* v15.2 — arquivos: botão, área de soltar, escolha do tipo */
.arqbtn{cursor:pointer;position:relative}
.arqbtn input[type=file]{display:none}
.arqzona{border:2px dashed color-mix(in srgb,var(--navy) 28%,var(--line));border-radius:16px;padding:12px;margin:0 0 10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;transition:background .15s,border-color .15s}
.arqsolta,.arqzona.arqsolta,textarea.arqsolta,.modal.arqsolta,[data-arqhub].arqsolta,[data-rst].arqsolta{border-color:var(--navy)!important;background:color-mix(in srgb,var(--navy) 8%,var(--card))!important;outline:2px dashed var(--navy);outline-offset:2px}
.arqhub{border:2px dashed color-mix(in srgb,var(--navy) 30%,var(--line))}
.arqops{display:flex;flex-direction:column;gap:8px}
.arqops .btn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-height:52px;padding:10px 14px}
.arqops .btn small{font-weight:500;opacity:.8;font-size:12px}
pre.arqprev{max-height:220px;overflow:auto;background:var(--card2);border-radius:10px;padding:8px 10px;font-size:11.5px;white-space:pre-wrap;word-break:break-word;margin:6px 0 0}
label.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;user-select:none;-webkit-user-select:none}
:root[data-theme=dark] .stepper button{color:#dbeafe;background:var(--card2);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}

/* ============================================================ v16 — BARRA NOVA: 4 abas + botão central da AULA */
#nav button.navaula{flex:0 0 auto;width:68px;overflow:visible;position:relative;color:var(--navy);font-weight:800}
#nav button.navaula::after{display:none!important}
#nav button.navaula .ico{width:54px;height:54px;padding:0!important;border-radius:50%!important;margin-top:-22px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,color-mix(in srgb,var(--navy) 70%,#3b82f6),var(--navy))!important;color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--navy) 45%,transparent),0 0 0 4px var(--bg)!important;transition:transform .18s}
#nav button.navaula .ico svg{width:26px;height:26px;stroke:#fff}
#nav button.navaula .rot{display:block;margin-top:2px;font-size:10.5px;max-width:68px;overflow:hidden;text-overflow:ellipsis}
#nav button.navaula:active .ico{transform:scale(.9)}
/* na aula: anel do tempo correndo em volta, na cor da turma */
#nav button.navaula.viva .ico{background:conic-gradient(var(--cor,#22c55e) var(--p,0%),color-mix(in srgb,var(--navy) 55%,#0b1220) 0)!important;padding:0!important}
#nav button.navaula.viva .ico::before{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--navy) 70%,#3b82f6),var(--navy))}
#nav button.navaula.viva .ico svg{position:relative;z-index:1}
#nav button.navaula.viva .ico{position:relative}
#nav button.navaula.viva .rot{color:var(--dgreen)}
#nav button.navaula.viva .ico::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--cor,#22c55e);opacity:.5;animation:pulsoAula 2.2s ease-out infinite}
#nav button.navaula.prox .rot{color:var(--dorange)}
@keyframes pulsoAula{0%{transform:scale(.92);opacity:.55}100%{transform:scale(1.18);opacity:0}}
@media (prefers-reduced-motion:reduce){#nav button.navaula.viva .ico::after{animation:none}}
:root[data-theme=dark] #nav button.navaula{color:#dbeafe}
:root[data-theme=dark] #nav button.navaula .ico{box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 4px var(--bg)!important}
/* ⊞ Mais no topo */
#topbar #btnMais.on{background:#fff;color:var(--navy)}
#topbar #btnMais.on svg{stroke:var(--navy)}
/* seletor Turma | Análises */
.segtopo{display:flex;gap:4px;padding:4px;margin:0 0 12px;border-radius:16px;background:color-mix(in srgb,var(--navy) 8%,var(--card));border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.segtopo button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;padding:9px 8px;border-radius:12px;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.segtopo button svg{width:17px;height:17px}
.segtopo button.on{background:var(--card);color:var(--navy);box-shadow:var(--sh-1)}
:root[data-theme=dark] .segtopo button.on{background:color-mix(in srgb,var(--navy) 55%,var(--card));color:#fff}
/* folha de ações rápidas (sobe de baixo) */
.modalwrap.acoes{align-items:flex-end}
.modal.folha{width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + var(--safe-b));animation:folhaSobe .22s cubic-bezier(.2,.8,.2,1)}
@keyframes folhaSobe{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.folha-alca{width:40px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 8px}
.acoesgrade{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.acoesgrade .acao{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line);background:var(--card2);border-radius:16px;padding:12px;font:inherit;color:var(--text);cursor:pointer;min-height:78px}
.acoesgrade .acao .aic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--navy) 12%,var(--card));color:var(--navy);margin-bottom:4px}
.acoesgrade .acao .aic svg{width:19px;height:19px}
.acoesgrade .acao b{font-size:14px}
.acoesgrade .acao small{font-size:11.5px;color:var(--muted);line-height:1.3}
.acoesgrade .acao.forte{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--navy) 80%,#3b82f6),var(--navy));color:#fff;border:0;min-height:64px}
.acoesgrade .acao.forte .aic{background:rgba(255,255,255,.18);color:#fff;margin:0}
.acoesgrade .acao.forte small{color:rgba(255,255,255,.85)}
.acoesgrade .acao.forte b{font-size:16px}
.acoesgrade .acao:active{transform:scale(.97)}
:root[data-theme=dark] .acoesgrade .acao .aic{color:#dbeafe}
.acoeshoje{display:flex;flex-wrap:wrap;gap:6px}
.acoeshoje .chip-b{display:inline-flex;align-items:center;gap:6px}
@media (min-width:1024px){
  #nav button.navaula{width:100%;flex-direction:row;justify-content:flex-start;gap:12px;padding:8px 12px;margin:6px 0;color:var(--text)}
  #nav button.navaula .ico{width:40px;height:40px;margin-top:0;box-shadow:0 4px 12px color-mix(in srgb,var(--navy) 35%,transparent)!important}
  #nav button.navaula .ico svg{width:21px;height:21px}
  #nav button.navaula .rot{margin:0;font-size:14.5px;max-width:none}
  body[data-rail="1"] #nav button.navaula{width:56px;justify-content:center;padding:6px 0}
  body[data-rail="1"] #nav button.navaula .rot{display:none}
  .modalwrap.acoes{align-items:center}
  .modal.folha{border-radius:24px}
}
@media (max-width:430px){ #topbar:has(#btnBack:not([hidden])) #logo{display:none} #topbar #title{min-width:0} }
/* v16.1 — 6 abas + a Aula no meio: tudo cabe no celular */
@media (max-width:1023px){
  #nav button{min-width:0}
  #nav button.navaula{width:60px}
  #nav button.navaula .ico{width:52px;height:52px}
}
@media (max-width:430px){ #nav{padding-left:3px;padding-right:3px} #nav button{font-size:9.5px;letter-spacing:-.02em} #nav button:not(.navaula) .ico{padding:5px 7px} #nav button.navaula{width:56px} }
@media (max-width:370px){ #nav button{font-size:8.8px} #nav button:not(.navaula) .ico{padding:5px 4px} #nav button:not(.navaula) .ico svg{width:20px;height:20px} #nav button.navaula{width:52px} #nav button.navaula .ico{width:48px;height:48px} }
@media (max-width:380px){ #topbar #logo{display:none} }
/* v16.1 — alunos repetidos */
.dupl{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;margin:6px 0}
.duplg{background:var(--card2);border-radius:12px;padding:8px 10px;word-break:break-word}

/* ============================================================ v16.2 — CONSELHO DE CLASSE completo */
.linkbtn{border:0;background:none;color:var(--navy);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 4px;margin-left:auto}
:root[data-theme=dark] .linkbtn{color:#93c5fd}
.linkbtn+.linkbtn{margin-left:6px}
.card.cc2{padding:12px 14px}
.card.cc2.alterada{box-shadow:inset 4px 0 0 #7c3aed,var(--shadow)}
.card.cc2 .ccmedia{display:flex;flex-direction:column;align-items:flex-end;flex:none;min-width:56px}
.ccm{font-size:22px;font-weight:800;line-height:1;padding:4px 8px;border-radius:10px}
.ccm.green{color:var(--dgreen);background:var(--green)} .ccm.yellow{color:#854d0e;background:#fef9c3} .ccm.orange{color:var(--dorange);background:var(--orange)} .ccm.red{color:var(--dred);background:var(--red)} .ccm.grey{color:var(--muted);background:var(--card2)}
:root[data-theme=dark] .ccm.yellow{color:#fde68a;background:#422006}
.ccmedia small{font-size:10.5px;color:var(--muted);margin-top:3px;white-space:nowrap}
.ccsec{margin-top:10px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--line) 80%,transparent)}
.ccsec-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ccsec-h .badge{font-size:10.5px;text-transform:none;letter-spacing:0}
.ccnotas,.ccdecrow{display:flex;flex-wrap:wrap;gap:6px}
.ccn{display:flex;flex-direction:column;gap:2px;min-width:58px;flex:0 0 auto}
.ccn span,.ccsel span{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.ccn input{width:64px;text-align:center;font-weight:700;padding:8px 4px;font-size:15px}
.ccn.rec input,.ccn.recesc input{background:color-mix(in srgb,var(--teal) 55%,var(--card))}
.ccn.extra input{background:color-mix(in srgb,var(--green) 55%,var(--card))}
.ccn.conselho input{width:92px;border:2px solid #7c3aed;background:color-mix(in srgb,#7c3aed 7%,var(--card))}
.ccn.conselho span{color:#7c3aed}
:root[data-theme=dark] .ccn.conselho span{color:#c4b5fd}
.ccsel{display:flex;flex-direction:column;gap:2px;flex:1 1 140px;min-width:0}
.ccsel select{padding:8px;font-size:13.5px}
.ccdecinfo{margin-top:6px}
.ccenc{gap:5px;flex-wrap:wrap}
.ccenc .chip-b{font-size:11.5px;padding:5px 10px}
.ccobs{display:flex;flex-direction:column;gap:4px}
.ccob{font-size:13px;padding:6px 9px;border-radius:10px;background:var(--card2);border-left:3px solid var(--line)}
.ccob span{color:var(--muted);font-size:11.5px;margin-right:6px}
.ccob b{font-size:11.5px;margin-right:4px}
.ccob.pos{border-left-color:var(--dgreen)} .ccob.neg{border-left-color:var(--dred)}
.card.cc2 .ccrapdet[open] .ccrap{display:flex}
@media print{ .card.cc2 .ccrap,.ccenc .chip-b:not(.on),.linkbtn,.ccfil{display:none!important} .ccn input,.ccsel select{border:0;background:none} }
/* observar na aula */
.mabtn.obs{font-size:18px}
.obsalunos{display:flex;flex-wrap:wrap;gap:6px;max-height:55vh;overflow:auto;margin-top:8px}
.obsalunos .chip-b{display:inline-flex;align-items:center;gap:6px;padding:8px 12px}
.obsalunos .manr{font-size:11px;color:var(--muted);font-weight:800}
.obsg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.obsg .chip-b{padding:8px 12px;font-size:13px}
.obsg.pos .chip-b.on{background:var(--green);color:var(--dgreen);border-color:var(--dgreen)}
.obsg.neg .chip-b.on{background:var(--orange);color:var(--dorange);border-color:var(--dorange)}
/* v16.2 — bimestres anteriores */
.na-resumo{display:flex;gap:8px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px}
.na-bim{flex:1 0 150px;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:var(--sh-1)}
.na-bim.ok{border-color:color-mix(in srgb,var(--dgreen) 45%,var(--line))}
.na-bim span{font-size:12px;color:var(--muted)}
.na-bim label{display:flex;flex-direction:column;gap:2px;font-weight:700;color:var(--muted)}
.na-bim input{padding:6px 8px;font-size:14px}
.na-bim .linkbtn{margin-left:0;align-self:flex-start;padding-left:0}
.na-tbl input{width:70px;text-align:center;font-weight:700;padding:7px 4px}
.na-tbl input.na-falta{width:56px;font-weight:600}
.na-tbl tr.inativo td{opacity:.55}
.na-tbl td.nome{white-space:nowrap}
.na-aviso{border-left:5px solid var(--navy)}
input.flash,.ccmedia.flash{animation:flashUpd .6s ease-out;border-radius:8px}
.na-lista{padding:4px 0}
.na-row{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.na-row:last-child{border-bottom:0}
.na-row .nr{width:24px;flex:none;color:var(--muted);font-size:12px;font-weight:700}
.na-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.na-row .na-c{flex:0 0 66px;text-align:center}
.na-row .na-c.f{flex-basis:52px}
.na-row .na-c input{width:100%;text-align:center;font-weight:700;padding:7px 2px}
.na-row .na-c.f input{font-weight:600}
.na-cab{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;position:sticky;top:var(--topbar-h,56px);background:var(--card);z-index:2;border-radius:14px 14px 0 0}
.na-row.inativo{opacity:.55}
/* v16.3 — conselho um por um */
.ccstatus{margin:6px 0 0}
.ccst{display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--card2);color:var(--muted);white-space:nowrap}
.ccst.ok{background:var(--green);color:var(--dgreen)}
.ccst.alt{background:color-mix(in srgb,#7c3aed 14%,var(--card));color:#6d28d9}
:root[data-theme=dark] .ccst.alt{color:#c4b5fd}
.ccmark{display:inline-block;margin-left:4px;font-size:10px;font-weight:800;padding:1px 5px;border-radius:6px;vertical-align:middle;background:color-mix(in srgb,#7c3aed 16%,var(--card));color:#6d28d9}
.ccmark.ok{background:var(--green);color:var(--dgreen)}
:root[data-theme=dark] .ccmark{color:#ddd6fe}
.ccacoes{display:flex;gap:8px;flex-wrap:wrap}
.ccacoes .ccmanter{flex:1 1 180px}
.ccprog b{font-size:15px}
.ccpc{font-size:22px;font-weight:800;color:var(--navy)}
:root[data-theme=dark] .ccpc{color:#93c5fd}
.cclista{padding:4px 0}
.ccl{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:pointer}
.ccl:last-child{border-bottom:0}
.ccl .nr{width:24px;color:var(--muted);font-weight:700;font-size:12px;flex:none}
.ccl .nm{flex:1;min-width:0;font-size:14px}
.ccl .nm small{display:block;color:var(--muted);font-size:11.5px}
.ccl .seta svg{width:16px;height:16px;opacity:.5}
.card.cc2.saindo{transition:transform .25s ease,opacity .25s ease,max-height .25s ease;transform:translateX(40px);opacity:0}
.cchist{display:flex;gap:6px;margin-top:8px}
.cchb{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;padding:5px 2px;border-radius:10px;background:var(--card2);border:1.5px solid transparent}
.cchb span{font-size:10px;color:var(--muted);font-weight:700}
.cchb b{font-size:15px}
.cchb i{position:absolute;top:2px;right:4px;font-style:normal;font-size:9px;font-weight:800;color:#6d28d9}
.cchb.atual{border-color:var(--navy)}
.cchb.green b{color:var(--dgreen)} .cchb.yellow b{color:#a16207} .cchb.orange b{color:var(--dorange)} .cchb.red b{color:var(--dred)}
/* v16.4 — conselho no diário de faltas */
.cgn{position:relative}
.cgc{position:absolute;top:-6px;right:-8px;font-style:normal;font-size:9px;font-weight:800;line-height:1;padding:2px 3px;border-radius:5px}
.cgc.alt{background:#7c3aed;color:#fff}
.cgc.ok{background:var(--dgreen);color:#fff}
.ccconf-l{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ccconf-l .nr{display:inline-block;width:22px;color:var(--muted);font-weight:700;font-size:12px}
@media print{.cgc{display:none}}

/* ---- v16.4: a grade do diário sem nada vazando --------------------------------------------
   Antes, a 2ª linha do cabeçalho (os dias) tinha duas células vazias e SOLTAS embaixo de "Nº" e
   "Aluno": ao rolar a grade para o lado, os dias passavam por cima da coluna dos nomes (o "4"
   aparecia no meio da coluna Aluno). E o canto "Nº / Aluno" era branco com letra branca.
   Agora "Nº", "Aluno", "Faltas", "Freq." e o "Nº" da direita ocupam as DUAS linhas do cabeçalho,
   ficam azuis como o resto, e o canto fica por cima de tudo.                                  */
table.tbl.dgrade td.dnr,table.tbl.dgrade th.dnr,table.tbl.dgrade.mapa thead th.dnr{box-sizing:border-box;width:30px;min-width:30px;max-width:30px;padding-left:2px;padding-right:2px}
/* a coluna do nome gruda exatamente onde a do número termina (medido na tela) */
table.tbl.dgrade td.dnome,table.tbl.dgrade th.dnome{left:var(--dnrw,30px)}
/* tudo o que a tabela empilha (cantos fixos, cabeçalho) fica DENTRO dela: nunca passa por cima
   do cabeçalho da turma, da barra azul, dos botões fixos nem do menu de baixo                   */
.tblwrap{isolation:isolate}
table.tbl.dgrade thead th{background:color-mix(in srgb,var(--navy) 94%,#000);color:#fff;vertical-align:middle}
table.tbl.dgrade thead th.dnr:first-child,table.tbl.dgrade thead th.dnome{background:color-mix(in srgb,var(--navy) 94%,#000);color:#fff;z-index:9;box-shadow:none}
table.tbl.dgrade thead th.dnome{box-shadow:inset -1px 0 0 rgba(255,255,255,.22)}
table.tbl.dgrade thead th.dnr:first-child{color:rgba(255,255,255,.8)}
table.tbl.dgrade thead th.dtot,table.tbl.dgrade thead th.dnr2{background:color-mix(in srgb,var(--navy) 86%,#000);color:#fff}
table.tbl.dgrade thead th.dnr2{color:rgba(255,255,255,.75)}
/* a linha dos dias gruda logo ABAIXO da linha dos meses (e não por cima dela) */
table.tbl.dgrade thead tr.dg2 th{top:var(--th1,24px)}
.tblwrap.cabe table.tbl.dgrade thead tr.dg2 th{top:calc(var(--topbar-h) + var(--cabt-h) - 1px + var(--th1,24px))}
.tblwrap.cabe table.tbl.dgrade thead th{z-index:8}
.tblwrap.cabe table.tbl.dgrade thead th.dnr:first-child,.tblwrap.cabe table.tbl.dgrade thead th.dnome{z-index:9}
/* a sombra que separa a coluna fixa dos dias que passam por baixo */
table.tbl.dgrade td.dnome{box-shadow:inset -1px 0 0 var(--line),6px 0 8px -6px rgba(0,0,0,.18)}
table.tbl.dgrade tbody td.dnr:first-child{z-index:4}
table.tbl.dgrade tbody td.dnome{z-index:4}
/* células coloridas (falta, sem aula) nunca por cima das colunas fixas */
table.tbl.dgrade tbody td.dm{position:relative;z-index:0}
table.tbl.dgrade td.dm:active{transform:none;filter:brightness(.92)}
table.tbl.dgrade tr.rodape td.dnr:first-child,table.tbl.dgrade tr.rodape td.dnome{background:var(--card2)}

/* o botão "ano" do cabeçalho: texto do tamanho dos bimestres ao lado, não um ícone gigante */
.ibtn.txt{font-size:12.5px;font-weight:800;letter-spacing:.02em;width:auto;min-width:44px;padding:0 10px}
/* linhas da grade com altura inteira: a linha fina entre os alunos aparece em TODAS, sem sumir
   numa e engrossar na outra por causa de meio pixel */
table.tbl.dgrade tbody td{line-height:18px;height:31px;box-sizing:border-box}
table.tbl.dgrade tbody td.dm{height:31px}
/* com a tela rolada o cabeçalho da turma encosta na barra azul: sem canto arredondado em cima,
   para não sobrar uma frestinha nos cantos por onde a tabela aparecia passando */
#app.rolou #view .card.cabt{border-top-left-radius:0;border-top-right-radius:0}

/* ---- v16.4: a tabela de notas sem nada vazando -------------------------------------------
   1) A coluna do nome gruda onde a do Nº termina DE FATO (medido), nunca 1px antes ou depois.
   2) Na escola municipal a última coluna é Faltas: a MÉDIA ficava meio escondida atrás dela,
      com o número cortado ao meio. Agora média e faltas ficam as duas presas à direita.
   3) Linhas com altura inteira: a linha fina entre os alunos não some numa e aparece na outra.  */
.tbl.fixo th:nth-child(2),.tbl.fixo td:nth-child(2){left:var(--c1w,40px)}
.tbl.fixo:not(.sed) thead th:nth-last-child(2),.tbl.fixo:not(.sed) td[data-notacell]{position:sticky;right:var(--ultw,52px);z-index:3}
.tbl.fixo:not(.sed) thead th:nth-last-child(2){background:var(--navy);z-index:6;box-shadow:-6px 0 8px -5px rgba(0,0,0,.18)}
.tbl.fixo:not(.sed) td[data-notacell]{box-shadow:-6px 0 8px -5px rgba(0,0,0,.18)}
.tbl.fixo:not(.sed) td:last-child{box-shadow:none}
.tbl.fixo:not(.sed) tr.inativo td[data-notacell]{background:var(--card2)}
.tbl.fixo tbody td{line-height:20px}
.tbl.fixo input[data-num]{height:36px;box-sizing:border-box;line-height:20px}
/* v16.4 — conselho: você decide quando sair do aluno */
.ccsegue{display:flex;align-items:flex-start;gap:9px;margin:0 2px 10px;line-height:1.45;color:var(--muted)}
.ccsegue input{margin-top:2px;flex:0 0 auto}
.ccsegue b{color:var(--text)}
.ccacoes .ccmanter.on{background:var(--green);color:var(--dgreen);border-color:color-mix(in srgb,var(--dgreen) 35%,transparent)}
.ccacoes .ccmanter small{font-weight:600;opacity:.75;margin-left:2px}
.ccfim{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.ccfim .btn{flex:0 0 auto}

/* ---- v16.4: Final do ano (exame e conselho final) ----------------------------------------- */
.card.fin{padding:12px 14px;border-left:4px solid var(--line)}
.card.fin.exame,.card.fin.rav{border-left-color:var(--dred)}
.card.fin.precisa{border-left-color:var(--dorange)}
.card.fin.aprovado,.card.fin.garantido,.card.fin.perto{border-left-color:color-mix(in srgb,var(--dgreen) 60%,transparent)}
.card.fin .nr{min-width:26px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.card.fin .finnm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finst{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--lgrey);color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.finst.green{background:var(--green);color:var(--dgreen)}.finst.orange{background:var(--orange);color:var(--dorange)}.finst.red{background:var(--red);color:var(--dred)}
.card.fin>.row .finst{flex:0 1 auto;max-width:48%}
.finbims{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0 6px}
.finbim{position:relative;display:flex;flex-direction:column;align-items:center;padding:5px 2px;border-radius:10px;background:var(--card2);border:1.5px solid var(--line);font-variant-numeric:tabular-nums}
.finbim span{font-size:10.5px;font-weight:700;color:var(--muted)}
.finbim b{font-size:15px}
.finbim i{position:absolute;top:2px;right:4px;font-style:normal;font-size:9px;font-weight:900;color:#7c3aed}
.finbim.green b{color:var(--dgreen)}.finbim.yellow b{color:#a16207}.finbim.orange b{color:var(--dorange)}.finbim.red b{color:var(--dred)}.finbim.grey b{color:var(--muted)}
.finbim.nc{opacity:.5;border-style:dashed}
.finbim.ano{background:color-mix(in srgb,var(--navy) 8%,var(--card));border-color:color-mix(in srgb,var(--navy) 30%,var(--line))}
.finmsg{line-height:1.5;color:var(--muted)}
.finmsg b{color:var(--text)}
.finfalta{display:block;margin-top:4px;color:var(--dred);font-weight:700}
.finex{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.finex .ccn{flex:0 0 auto}
.finres{flex:1 1 180px;display:flex;flex-direction:column;gap:3px;min-width:0}
.finfinal{font-weight:700}.finfinal.green{color:var(--dgreen)}.finfinal.red{color:var(--dred)}
.finfinal b{font-size:17px}
details.fincons{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
details.fincons>summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none;flex-wrap:wrap}
details.fincons>summary::-webkit-details-marker{display:none}
details.fincons>summary b{font-size:13px}
details.fincons .ccdecrow{margin-top:8px}
details.fincons .fincmot{margin-top:8px;width:100%}
.finregra .grid{margin-top:6px}
.ccano{margin:8px 0 2px;padding:7px 10px;border-radius:10px;background:var(--card2);line-height:1.5}
.card.finficha .finst{font-size:12px}
@media (max-width:380px){ .finbims{gap:4px} .finbim b{font-size:13.5px} .card.fin>.row .finst{max-width:44%} }
@media print{ .card.fin{break-inside:avoid} details.fincons:not([open]){display:none} }
.finlin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.finlin .finst{max-width:100%}
details.fincons>summary .small{font-weight:500}
.finlin .finst{flex:0 0 auto}

/* ---- v16.4: campos que saíam da tela no celular pequeno ---------------------------------- */
/* data e hora têm uma largura "natural" grande: sem min-width:0 empurravam o cartão para fora */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{min-width:0;max-width:100%}
#cBims .row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center}
#cBims .row>span{width:auto!important}
#cBims input{width:100%;padding-left:8px;padding-right:4px;font-size:14px}
.hrhead,.hrrow{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) 58px minmax(120px,1.4fr) 84px}
.hrrow input[type=time]{width:100%;padding-left:6px;padding-right:2px}
@media (max-width:560px){ .hrrow{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 72px} .hrrow .hracts .iconbtn{width:22px} }
.na-row .nm{display:flex;align-items:center;gap:5px}
.na-row .nm .nmt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-row .nm small.badge{flex:none;font-size:9.5px;padding:1px 6px}

/* v16.4 — nota final de bimestre sem nota, direto no conselho e no Final do ano */
.cchb.ed,.finbim.ed{border:1.5px dashed color-mix(in srgb,var(--navy) 45%,var(--line));background:var(--card)}
.cchb input.bimfin,.finbim input.bimfin{width:100%;max-width:74px;margin:2px auto 0;padding:4px 2px;text-align:center;font-size:15px;font-weight:800;border-radius:8px;min-width:0}
.cchb.ed span,.finbim.ed span{color:var(--navy)}
:root[data-theme=dark] .cchb.ed span,:root[data-theme=dark] .finbim.ed span{color:#93c5fd}
.cchint{margin:6px 2px 0;line-height:1.45}
.cchint a{color:var(--navy);font-weight:700}

/* ---- v16.6: bimestres anteriores, um aluno por vez ------------------------------------ */
.na-modo{max-width:520px}
.card.na-prog .progress{height:8px}
.na-card .na-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:14px;text-align:left}
.na-campo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card2)}
.na-lbl{font-weight:800;font-size:13px;color:var(--navy);text-align:center;display:flex;flex-direction:column}
.na-lbl small{font-weight:600;font-size:11px;color:var(--muted)}
:root[data-theme=dark] .na-lbl{color:#bfdbfe}
.na-campo input.lnnota{width:100%;max-width:140px;min-width:0}
.na-flt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.na-flt input{width:64px;text-align:center;font-weight:700;padding:6px 4px}
.card.na-aviso .btnrow .btn{flex:0 1 auto}
.fichafin{gap:10px;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--card2)} .fichafin .finbim{min-width:92px}

/* ---- v16.7: cada bimestre com os seus instrumentos ------------------------------------ */
.avbims{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.avbim{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;border:1.5px solid var(--line);background:var(--card2);color:var(--text);font:inherit;cursor:pointer;min-width:0}
.avbim b{font-size:13px}
.avbim span{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.3;overflow-wrap:anywhere}
.avbim i{font-style:normal;font-size:9px;font-weight:800;color:var(--dgreen);text-transform:uppercase;letter-spacing:.04em}
.avbim.on{border-color:var(--navy);background:color-mix(in srgb,var(--navy) 9%,var(--card));box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 20%,transparent)}
.avbim.on b{color:var(--navy)}
:root[data-theme=dark] .avbim.on b{color:#bfdbfe}

/* ---- v16.8: pendências do fechamento ------------------------------------------------- */
.fbadge{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:999px;background:var(--orange);color:var(--dorange);font-size:10.5px;font-weight:800;line-height:17px;text-align:center}
.tabs .fbadge{vertical-align:1px}
.card.fech .item{align-items:center}
.card.fech .item .nm.click{cursor:pointer;flex:1;min-width:0}
.card.fech .item .fchk{cursor:pointer}
.card.fech .item.fora{opacity:.55}
.card.fech .item.fora .nm{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.fchk.fora{background:transparent;border:1.5px dashed var(--line)}
.facoes{display:flex;gap:4px;align-items:center;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.facoes .btn.sm{padding:5px 9px;font-size:12px;min-height:0}
.facoes .iconbtn{color:var(--muted);width:26px;height:26px;font-size:12px}
details.fsobra{margin-top:6px}
details.fsobra>summary{cursor:pointer}
.card.fprontas{padding:10px 14px}
@media (max-width:430px){ .card.fech .item{flex-wrap:wrap} .facoes{width:100%;padding-left:30px;justify-content:flex-start} }

/* ---- v16.9: ordenar e filtrar listas de alunos ---------------------------------------- */
.ordbar{display:flex;align-items:center;gap:8px;margin-top:6px;min-width:0}
.ordbar>.small{flex:0 0 auto;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
.ordbar .chips{flex:1;min-width:0;margin:0}
.card.abxfil{padding:10px 12px}
.card.abxfil>.chips{margin:0}
.abxd{flex:0 0 auto;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;margin-right:6px;white-space:nowrap}
.abxd.up{background:var(--green);color:var(--dgreen)}
.abxd.down{background:var(--red);color:var(--dred)}
@media (min-width:700px){ .abxfil .chips,.ordbar .chips{flex-wrap:wrap;overflow:visible} }

/* ---- v17.0 — organizador, planejamento, trabalhos, várias imagens */
.curprev{border-left:5px solid var(--dgreen)}
.curser{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--card2)}
.curser>summary{cursor:pointer;padding:4px 0}
.curbim{margin:8px 0 4px}
.curit{padding:6px 8px;margin-top:4px;border-left:3px solid var(--navy);background:var(--card);border-radius:0 8px 8px 0;overflow-wrap:anywhere}
.curit .small{margin-top:2px;line-height:1.35}
.pbper{display:flex}
.pbper button{flex:1}
.chip-b small{opacity:.7;font-weight:600;margin-left:3px}
.pbmapa{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.pbmapa span{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--lgrey);color:var(--muted)}
.pbmapa span.meio{background:var(--orange);color:var(--dorange)}
.pbmapa span.ok{background:var(--green);color:var(--dgreen)}
.pbsem{margin:10px 2px 2px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
input.small.hab.habin{display:block;width:100%;box-sizing:border-box;min-height:0;height:auto;font:inherit;font-size:12px;border-top:0;border-right:0;border-bottom:0;margin-bottom:0}
.card.trplano{border-left:5px solid var(--blue)}
.trhead .seg{display:flex}.trhead .seg button{flex:1}
.trcrit{gap:6px;margin-top:6px}
.trcrit input{margin:0}
.trcrit .trmax{width:64px;flex:0 0 64px;text-align:center}
.trgrp{border-left:5px solid var(--acc,var(--navy));transition:box-shadow .15s}
.trgrp.alvo{box-shadow:0 0 0 2px var(--acc,var(--navy));cursor:pointer}
.trgh{gap:6px}
.trgnome{margin:0;font-weight:700;border:0;background:transparent;padding:4px 0;flex:1;min-width:0;font-size:16px}
.trtema{margin:4px 0 0;width:100%;box-sizing:border-box}
.chip-b.trmem{display:inline-flex;align-items:center;gap:4px;cursor:default;padding-right:4px}
.chip-b.trmem button{border:0;background:var(--lgrey);color:var(--muted);border-radius:50%;width:22px;height:22px;line-height:20px;font-size:15px;cursor:pointer;padding:0}
select.trpor{width:auto;margin:0;padding:5px 10px;border-radius:999px;font-size:12.5px}
.chip-b.trpor{border-style:dashed}
.chip-b.trsolto.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.trsoltos .chips{flex-wrap:wrap}
.trordem{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.trordem button{border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;min-height:40px;transition:transform .1s}
.trordem button:active{transform:scale(.95)}
.trordem button small{color:var(--muted);margin-right:4px}
.trordem button.ok{background:var(--green);color:var(--dgreen);border-color:transparent}
.trordem button.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset}
.trapres{border-top:5px solid var(--acc,var(--navy));border-left:3px solid color-mix(in srgb,var(--acc,var(--navy)) 30%,transparent)}
.trtempo{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-size:22px;font-weight:800;color:var(--navy)}
.trtempo .fim{color:var(--dred)}
:root[data-theme=dark] .trtempo{color:#bfdbfe}
.trmembros{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.trm{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--lgrey);font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,transform .1s}
.trm:active{transform:scale(.96)}
.trm input{width:auto;margin:0}
.trm.falta{background:var(--red);color:var(--dred);text-decoration:line-through}
.trcr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);transition:background .2s}
.trcr.feito{background:color-mix(in srgb,var(--green) 12%,transparent);border-radius:8px;padding:10px 8px;margin:0 -8px}
.trcr .grow{min-width:150px;flex:1 1 150px}
.tratacar{display:flex;gap:12px;padding:8px 0 4px;border-top:1px solid var(--line)}
.tratacar .linkbtn{font-size:13px;padding:4px 8px;border-radius:8px;transition:background .12s}
.tratacar .linkbtn:active{background:color-mix(in srgb,var(--navy) 10%,transparent)}
.trq{display:flex;gap:5px}
.trq button{min-width:46px;height:44px;border:1.5px solid var(--line);background:var(--card);border-radius:10px;font:inherit;font-weight:700;color:var(--text);cursor:pointer;transition:transform .1s,background .15s}
.trq button:active{transform:scale(.92)}
.trq button.on{background:var(--navy);color:#fff;border-color:var(--navy);animation:trpulse .2s}
@keyframes trpulse{0%{transform:scale(.9)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
input.trin{width:72px;height:44px;margin:0;text-align:center;font-weight:700;font-size:15px;border-radius:10px}
.trtot{padding:12px 10px 8px;margin:4px -8px 0;border-top:2px solid var(--line);font-size:16px;gap:6px;background:color-mix(in srgb,var(--navy) 4%,var(--card));border-radius:0 0 12px 12px}
.trtot b{font-size:24px;color:var(--navy);font-variant-numeric:tabular-nums}
:root[data-theme=dark] .trtot b{color:#bfdbfe}
:root[data-theme=dark] .trtot{background:color-mix(in srgb,var(--navy) 8%,var(--card))}
:root[data-theme=dark] .trcr.feito{background:color-mix(in srgb,var(--green) 8%,transparent)}
.trtab td,.trtab th{white-space:nowrap}
.trtab tr.trfaltou td{color:var(--muted)}
.matrab{border-left:5px solid var(--blue);margin-bottom:8px}
#bandeja{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;width:min(520px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px 12px}
#bandeja .thumbs{display:flex;gap:6px;overflow-x:auto;margin:8px 0}
#bandeja .thumbs div{position:relative;flex:0 0 auto}
#bandeja .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
#bandeja .thumbs button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--dred);color:#fff;font-size:14px;line-height:22px;padding:0;cursor:pointer}
@media(max-width:560px){.trcr .grow{flex:1 1 100%;min-width:0}
.trcr .trq{flex:1 1 auto}
.trcr .trq button{flex:1;max-width:72px}}
/* v17.1 — aulas planejadas */
.pbmapa button{font:inherit;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--lgrey);color:var(--muted);border:0;cursor:pointer}
.pbmapa button.meio{background:var(--orange);color:var(--dorange)}
.pbmapa button.ok{background:var(--green);color:var(--dgreen)}
.cdlin{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.cdlin .prog{margin:0}
.cdlin b{color:var(--text);font-size:13px}
.prog.plan i{background:var(--dgreen)}
.cbadge.plan{background:var(--teal);color:var(--navy)}
:root[data-theme=dark] .cbadge.plan{color:#bfdbfe}
.cdhoje{display:flex;align-items:center;gap:8px;margin:12px 2px 6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--dgreen)}
.cdhoje::before,.cdhoje::after{content:"";flex:1;height:2px;background:color-mix(in srgb,var(--dgreen) 35%,transparent);border-radius:2px}
.card.tr.fut{border-left:4px solid color-mix(in srgb,var(--dgreen) 45%,transparent)}
.pbmulti{gap:8px;margin-top:8px;align-items:center}
.pbag{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card2)}
.pbag>summary{cursor:pointer;font-size:13px;line-height:1.4}
.pbag .ok{color:var(--dgreen);font-weight:700}
.pbaglist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.pbaglist button{display:grid;grid-template-columns:48px 34px 1fr;gap:6px;align-items:baseline;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 9px;font:inherit;font-size:12.5px;color:var(--text);cursor:pointer}
.pbaglist button small{color:var(--muted)}
.pbaglist button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pbaglist button i{color:var(--dorange);font-style:normal;font-weight:700}
.pbaglist button.tem{border-left:4px solid var(--dgreen)}
.plturma{display:flex;align-items:center;gap:8px;margin:16px 0 6px}
.plturma label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer}
.plturma .tdot{margin:0}
.meudia .md .grow small.mdplan{color:var(--dgreen);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.habauto{margin-top:3px;color:var(--dgreen);font-weight:600}
.habauto a{color:inherit;margin-left:2px}
input.habin.flash{animation:habflash .9s ease}
@keyframes habflash{0%{background:color-mix(in srgb,var(--dgreen) 30%,transparent)}100%{background:transparent}}
/* v17.1 — rede municipal × estadual, sempre à vista */
.escchip small{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.03em;background:rgba(255,255,255,.22)}
body[data-modelo=semed] #topbar{box-shadow:inset 0 -3px 0 #f59e0b,0 4px 18px color-mix(in srgb,var(--navy) 35%,transparent)}
body[data-modelo=sed] #topbar{box-shadow:inset 0 -3px 0 #22c55e,0 4px 18px color-mix(in srgb,var(--navy) 35%,transparent)}
body[data-modelo=semed] .escchip small{background:#f59e0b;color:#1f2937}
body[data-modelo=sed] .escchip small{background:#22c55e;color:#052e16}
.redetag{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;vertical-align:middle;line-height:1.3}
.redetag small{font-weight:600;opacity:.85}
.redetag.mun{background:#fef3c7;color:#92400e}
.redetag.est{background:#dcfce7;color:#166534}
:root[data-theme=dark] .redetag.mun{background:#451a03;color:#fcd34d}
:root[data-theme=dark] .redetag.est{background:#052e16;color:#86efac}
.redelinha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 2px 8px}
.cdres .redetag,.cabaula .redetag{margin-left:4px;font-size:10.5px;padding:2px 8px}
/* v17.3 — cópia do cabeçalho da tabela, presa no topo quando a tabela rola na horizontal */
.thflut{position:fixed;z-index:14;overflow:hidden;pointer-events:auto;box-shadow:0 6px 12px -8px rgba(0,0,0,.35);border-radius:0 0 10px 10px;background:var(--card)}
.thflut[hidden]{display:none}
.thflut table{border-collapse:separate;border-spacing:0}
.thflut thead th{position:sticky}
@media print{.thflut{display:none!important}}
.fzpref{margin-top:10px;gap:8px;align-items:center;flex-wrap:wrap}
.fzpref .seg.mini button{padding:5px 10px;font-size:12px}
input.zauto{color:var(--dorange);font-style:italic;border-style:dashed!important}
/* v17.3 — o cabeçalho da turma encolhe sem animação: a animação deixava a tabela "atrasada" um
   instante (a faixa entre o cabeçalho da turma e o das colunas piscava ao rolar) */
#view .card.cabt [data-vivo="cabTurma"],#view .card.cabt,#view .card.cabt .cabr2{transition:none!important}
/* v17.4 — recalcular notas */
.notasrodape{margin:8px 2px 4px;text-align:center}
.rclist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rcrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.rcrow .grow{flex:1 1 180px;min-width:0}
.rcrow.mult{border-color:color-mix(in srgb,var(--navy) 45%,var(--line))}
.rcrow.tirar{opacity:.75;background:repeating-linear-gradient(135deg,var(--card2),var(--card2) 8px,var(--lgrey) 8px,var(--lgrey) 16px)}
.rcrow .seg.mini button{padding:6px 10px;font-size:12.5px}
.rcmult{flex:1 1 100%;display:flex;align-items:center;gap:6px;font-weight:700}
.rcmult input{width:70px;margin:0;text-align:center;font-weight:800}
.rctotal{margin-top:10px;padding:8px 10px;border-radius:10px;font-size:13.5px}
.rctotal.bom{background:var(--green);color:var(--dgreen)}
.rctotal.ruim{background:var(--orange);color:var(--dorange)}
.rctab td,.rctab th{white-space:nowrap;text-align:center}
.rctab td.rcnome{text-align:left}
.rctab .rcfora{opacity:.45;text-decoration:line-through}
.rctab small.up{color:var(--dgreen)}.rctab small.down{color:var(--dred)}
.rcver{border-top:1px solid var(--line);padding:8px 0}
.rcver>summary{cursor:pointer}
.rcvnotas{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0}
.rcvnotas span{white-space:nowrap}

/* ===== v17.5 — recalcular: recuperação, extra e visual ===== */
.rchero .rcconta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding:8px 10px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.rcconta i{font-style:normal;color:var(--muted);font-weight:800}
.rcpill{display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12.5px;font-variant-numeric:tabular-nums}
.rcpill small{color:var(--muted)}
.rcpill.tot{background:var(--navy);color:#fff;border-color:transparent;font-weight:800}
.rcpill.rec{background:var(--teal);border-color:transparent}
.rcpill.ex{background:var(--green);color:var(--dgreen);border-color:transparent}
.rcpasso{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rcpasso span{flex:0 0 24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.rcsig{display:inline-block;min-width:28px;padding:1px 7px;border-radius:7px;background:var(--card);border:1px solid var(--line);text-align:center}
.seg.mini.rcseg{display:grid;grid-template-columns:repeat(5,auto);max-width:100%}
.rcseg button{white-space:nowrap}
.rcseg .rcc{display:none}
.rcrow.extra{border-color:color-mix(in srgb,var(--dgreen) 45%,var(--line));background:color-mix(in srgb,var(--green) 45%,var(--card2))}
.rcrow.recup{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));background:color-mix(in srgb,var(--teal) 55%,var(--card2))}
.rcrow .rcnota{font-weight:500}
.rcreccard.tirar{background:repeating-linear-gradient(135deg,var(--card),var(--card) 10px,var(--card2) 10px,var(--card2) 20px)}
.rcdest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.rcdest select{width:auto;min-width:120px;margin:0}
.rcchk{gap:8px;margin-top:10px;align-items:center}
.rcresumo{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.rcresumo span{padding:3px 9px;border-radius:999px;background:var(--card2);border:1px solid var(--line);font-size:12.5px;font-variant-numeric:tabular-nums}
.rcresumo .up{color:var(--dgreen)}.rcresumo .down{color:var(--dred)}
.rctab td{font-variant-numeric:tabular-nums}
.rcguard{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.rcgitem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.rcgitem .grow{flex:1 1 200px;min-width:0}
.rcgbt{display:flex;flex-wrap:wrap;gap:6px}
.rcgbt .btn{margin:0}
.rcrecperd{color:var(--dorange)}
.rcvazio{border:1.5px dashed var(--line);background:transparent}
@media (max-width:520px){.seg.mini.rcseg{width:100%;grid-template-columns:repeat(5,1fr)}.seg.mini.rcseg button{padding:8px 2px;font-size:12px}.rcseg .rcl{display:none}.rcseg .rcc{display:inline}}
.seg.mini.rcseg button span{color:inherit;font:inherit}
.rcrow .rcnota{display:block;flex:1 1 100%}
.rctab .rcvira{font-style:italic;opacity:.7}
.rcvazio{text-align:left;font-size:13px}
@media (max-width:520px){#topbar h1.tlongo{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12;font-size:14.5px}}
/* v17.5 — nota real + multiplicação */
.nmultw{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.nmult{display:block;font-size:11px;line-height:1.1;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center}
.nmult b{color:var(--text)}
td>.nmult{margin-top:2px}
.thm{display:block;font-size:10px;font-weight:600;opacity:.8;white-space:nowrap;text-transform:none;letter-spacing:0}
/* v17.6 — uso do Firebase */
.fbrow{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:8px;margin:6px 0;font-size:13px;font-variant-numeric:tabular-nums}
.fbrow small{color:var(--muted)}
.fbbar{height:8px;border-radius:99px;background:var(--lgrey);overflow:hidden;min-width:60px}
.fbbar i{display:block;height:100%;background:var(--navy);border-radius:99px}
.fbdias{display:flex;align-items:flex-end;gap:8px;margin-top:10px;height:62px}
.fbdias span{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
.fbdias i{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:color-mix(in srgb,var(--navy) 70%,var(--card))}
.fbdias small{font-size:10px;color:var(--muted)}
@media (max-width:420px){.fbrow{grid-template-columns:1fr auto;}.fbrow .fbbar{grid-column:1/-1}.fbrow small{grid-column:1/-1;margin-top:-4px}}
/* v17.9 — compensação de ausência */
.badge.compchip{background:color-mix(in srgb,#7c3aed 14%,var(--card));color:#6d28d9;border:1px solid color-mix(in srgb,#7c3aed 35%,transparent);font-weight:700;font-size:10.5px;margin-left:4px;white-space:nowrap}
:root[data-theme=dark] .badge.compchip{color:#c4b5fd;background:color-mix(in srgb,#7c3aed 28%,var(--card))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .badge.compchip{color:#c4b5fd;background:color-mix(in srgb,#7c3aed 28%,var(--card))}}
.badge.compchip.sm{font-size:9.5px;padding:1px 5px}
.cplist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.cpitem{border:1px solid var(--line);border-left:4px solid #7c3aed;border-radius:12px;padding:10px 12px;background:var(--card2)}
.cpitem.falta{border-left-color:var(--dorange)}
.cpper{display:inline-block;margin-top:2px}
.cpnota{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
.cpnota span{font-weight:800;font-size:12px;color:#7c3aed}
.cpnota input{width:74px;text-align:center;font-weight:800;font-size:17px;margin:0}
.cpnota small{font-size:10.5px;color:var(--muted)}
.cpativ{margin-top:8px}
.cpativ summary{cursor:pointer}
.cparow{display:grid;grid-template-columns:1fr 72px auto;gap:6px;align-items:center;margin:6px 0}
.cparow input{margin:0}
.cpan{text-align:center}
.cped{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.cped input[type=date]{width:auto;flex:1 1 130px;margin:0}
.cped select,.cped input:not([type=date]){width:auto;flex:1 1 140px;margin:0}
.cpout{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cpficha{border-left:4px solid #7c3aed}
.cpchev{font-size:22px;color:var(--muted)}
td.ccomp{background:color-mix(in srgb,#7c3aed 6%,var(--card))}
.tbl thead th.ccomp{box-shadow:inset 0 -3px 0 #a78bfa}
.tbl td.ccomp input{border-color:color-mix(in srgb,#7c3aed 45%,var(--line));font-weight:800;color:#6d28d9}
:root[data-theme=dark] .tbl td.ccomp input{color:#c4b5fd}
td.dm.comp{color:#7c3aed;font-weight:800}
/* v17.9 — menos poluição: ferramentas das notas numa fileira de botões, chips do cabeçalho numa linha */
.ntools{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:4px 0 8px;-webkit-overflow-scrolling:touch}
.ntools::-webkit-scrollbar{display:none}
.ntool{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:6px 11px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ntool svg{width:15px;height:15px}
.ntool.on{border-color:color-mix(in srgb,var(--navy) 55%,var(--line));background:color-mix(in srgb,var(--navy) 10%,var(--card));color:var(--navy)}
:root[data-theme=dark] .ntool.on{color:#bfdbfe}
.ntool.tem b{background:#7c3aed;color:#fff;border-radius:99px;padding:0 6px;font-size:11px}
.ntool.mini{padding:3px 9px;font-size:11.5px}
.ntool:active{transform:scale(.97)}
.notasrodape{margin-top:10px}
.cpper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.cpacts{display:flex;gap:4px}
.cpdot{margin:0 5px 0 0;padding:0 5px}
@media (max-width:700px){
  .cabinfo{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:18px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .cabinfo::-webkit-scrollbar{display:none}
}
.na-aviso.compacto{padding:10px 12px}
.na-aviso.compacto .row{gap:10px;align-items:center}
.na-aviso .naic{font-size:18px}
.na-aviso .btn{margin:0;flex:0 0 auto}
.na-aviso .naX{color:var(--muted);flex:0 0 auto}
.badge.mnome{margin:0 5px 0 0;padding:1px 5px;font-size:11px;vertical-align:1px}
.badge.mnome.dom{background:var(--orange);color:var(--dorange);border:0}
/* v17.9 — avisos das Análises agrupados num bloco só (menos cartões empilhados) */
.avgrupo{border-radius:var(--radius,16px);overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px;background:var(--card)}
.avgrupo>.card{margin:0!important;border-radius:0!important;box-shadow:none!important;border-top:0!important;border-right:0!important;border-bottom:1px solid var(--line)!important}
.avgrupo>.card:last-child{border-bottom:0!important}
/* v17.9.1 — regra da compensação e camadas da tabela */
.cpregra{display:flex;align-items:stretch;gap:6px;margin-top:10px;flex-wrap:wrap}
.cpregra>div{flex:1 1 90px;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.cpregra>div:first-child{background:color-mix(in srgb,#7c3aed 10%,var(--card));border-color:color-mix(in srgb,#7c3aed 35%,var(--line))}
.cpregra>div b{font-size:13px}
.cpregra>div span{font-size:11.5px;color:var(--muted)}
.cpregra i{font-style:normal;font-weight:800;color:var(--muted);align-self:center}
/* campos da tabela ficam numa camada própria: nunca passam por cima das colunas fixas (Nº, nome, nota) */
.tbl.fixo tbody td{position:relative;z-index:0}
.tbl.fixo tbody td:first-child,.tbl.fixo tbody td:nth-child(2),.tbl.fixo tbody td:last-child{position:sticky;z-index:2}
.tbl.fixo:not(.sed) tbody td[data-notacell]{position:sticky;z-index:3}

/* ===== v17.9.1 — cabeçalho de tabela moderno: claro, tingido com a cor da escola (antes: faixa escura pesada) ===== */
:root{--th-bg:color-mix(in srgb,var(--navy) 9%,var(--card));--th-fg:color-mix(in srgb,var(--navy) 88%,var(--text));--th-line:color-mix(in srgb,var(--navy) 22%,var(--line))}
:root[data-theme=dark]{--th-bg:color-mix(in srgb,var(--navy) 34%,var(--card));--th-fg:#e8edf5;--th-line:color-mix(in srgb,var(--navy) 45%,var(--line))}
.tbl th,.tbl.fixo th:first-child,.tbl.fixo th:nth-child(2),.tbl.fixo th:last-child,.tbl.fixo:not(.sed) thead th:nth-last-child(2){background:var(--th-bg);color:var(--th-fg)}
.tbl thead th{border-bottom:1.5px solid var(--th-line);font-weight:800}
.tbl thead th .thn{opacity:1}
.tbl thead th .thn.ok{color:var(--dgreen)}
.tbl thead th .thn.meio{color:var(--dorange)}
.tbl thead th.focoCol{background:color-mix(in srgb,var(--navy) 24%,var(--card));color:var(--th-fg)}
:root[data-theme=dark] .tbl thead th.focoCol{background:color-mix(in srgb,var(--navy) 55%,var(--card))}
.tbl thead th small,.tbl thead th .small{color:inherit}
.thflut{background:var(--th-bg)}
table.tbl.dgrade thead th,table.tbl.dgrade thead th.dnr:first-child,table.tbl.dgrade thead th.dnome{background:var(--th-bg);color:var(--th-fg)}
table.tbl.dgrade thead th.dtot,table.tbl.dgrade thead th.dnr2{background:color-mix(in srgb,var(--navy) 16%,var(--card));color:var(--th-fg)}
:root[data-theme=dark] table.tbl.dgrade thead th.dtot,:root[data-theme=dark] table.tbl.dgrade thead th.dnr2{background:color-mix(in srgb,var(--navy) 45%,var(--card))}
table.tbl.dgrade th.dmes,table.tbl.dgrade th.dnr2,table.tbl.dgrade th.dtot,table.tbl.dgrade thead th.dmes+th.dmes{border-left-color:var(--th-line)}
table.tbl.dgrade th.ddia.tr{color:var(--dorange)}
table.tbl.dgrade td.dm.comp{color:#7c3aed;font-weight:800;background:color-mix(in srgb,#7c3aed 8%,transparent)}

/* ===== v18.1 — NOTAS NO CELULAR: grade de cartões (sem rolagem lateral, sem colunas fixas) ===== */
.nglegs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:2px 0 8px;padding:2px 1px}
.nglegs::-webkit-scrollbar{display:none}
.ngleg{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:5px 10px;border-radius:999px;background:var(--th-bg);color:var(--th-fg);border:1px solid var(--th-line);white-space:nowrap}
.ngleg b{font-weight:800}
.ngleg .thn{font-size:11px;font-weight:800;color:var(--muted)}
.ngleg .thn.ok{color:var(--dgreen)} .ngleg .thn.meio{color:var(--dorange)}
.ngleg.comp{background:color-mix(in srgb,#7c3aed 10%,var(--card));border-color:color-mix(in srgb,#7c3aed 35%,var(--line));color:#6d28d9}
:root[data-theme=dark] .ngleg.comp{color:#c4b5fd}
.ngrade{background:var(--card);border-radius:var(--radius,16px);box-shadow:var(--shadow);overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ngl{padding:10px 12px 11px;border-top:1px solid var(--line);transition:background .15s}
.ngl:first-child{border-top:0}
.ngl.foco{background:color-mix(in srgb,var(--navy) 6%,var(--card))}
.ngl.inativo{opacity:.6;background:var(--card2)}
.ngl.emcomp{box-shadow:inset 3px 0 0 #7c3aed}
.ngtop{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px}
.ngnr{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.ngnm{min-width:0;display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.ngnome{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ngfal{flex:0 0 auto;margin-left:6px;font-size:11px;font-weight:700;color:var(--dred);background:var(--red);padding:1px 7px;border-radius:99px}
.ngnotas{display:flex;gap:6px;align-items:center}
.ngl [data-notacell],.ngl [data-final]{min-width:54px;min-height:36px;padding:3px 8px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;background:var(--lgrey);color:var(--muted);line-height:1.1}
.ngl [data-notacell] .deq{font-size:10px;margin:0}
.ngl [data-notacell].green,.ngl [data-final].green{background:var(--green);color:var(--dgreen)}
.ngl [data-notacell].yellow,.ngl [data-final].yellow{background:#fef9c3;color:#854d0e}
.ngl [data-notacell].orange,.ngl [data-final].orange{background:var(--orange);color:var(--dorange)}
.ngl [data-notacell].red,.ngl [data-final].red,.ngl [data-notacell].baixa{background:var(--red);color:var(--dred)}
:root[data-theme=dark] .ngl [data-notacell].yellow,:root[data-theme=dark] .ngl [data-final].yellow{background:#713f12;color:#fde68a}
.ngl [data-notacell].parcial{font-style:italic}
.ngl [data-notacell] input{width:58px;margin:0;text-align:center;font-weight:800;height:32px;padding:0 4px}
.ngcampos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 34px}
.ngc{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden;height:38px;flex:0 0 auto;cursor:text}
.ngc>span{display:flex;align-items:center;padding:0 8px;font-size:11.5px;font-weight:800;color:var(--th-fg);background:var(--th-bg);border-right:1px solid var(--line);letter-spacing:.02em;min-width:24px;justify-content:center}
.ngc input[data-num],.ngc input{border:0!important;border-radius:0!important;box-shadow:none!important;width:52px;height:100%!important;margin:0!important;padding:0 4px!important;text-align:center;font-weight:700;font-size:15px;background:transparent;color:var(--text)}
.ngc:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)}
.ngc.comp{border-color:color-mix(in srgb,#7c3aed 45%,var(--line))}
.ngc.comp>span{background:color-mix(in srgb,#7c3aed 12%,var(--card));color:#6d28d9}
:root[data-theme=dark] .ngc.comp>span{color:#c4b5fd}
.ngc.comp input{color:#6d28d9;font-weight:800}
:root[data-theme=dark] .ngc.comp input{color:#c4b5fd}
.ngc.rec{border-color:color-mix(in srgb,#16a34a 40%,var(--line))}
.ngc.rec>span{background:color-mix(in srgb,#16a34a 12%,var(--card));color:var(--dgreen);text-transform:lowercase}
.ngc.ext{border-color:color-mix(in srgb,#2563eb 35%,var(--line))}
.ngc.ext>span{background:color-mix(in srgb,#2563eb 11%,var(--card));color:#1d4ed8}
:root[data-theme=dark] .ngc.ext>span{color:#93c5fd}
.ngc.rav>span{background:color-mix(in srgb,var(--gold) 16%,var(--card));color:#92400e}
.ngc.largo .nins{display:flex;align-items:center;height:100%}
.ngc.largo select{border:0;height:100%;margin:0;padding:0 4px;background:transparent;font-weight:700;width:auto}
.ngc.mult{height:auto;min-height:38px}
.ngc.mult .nmult{align-self:center;padding:0 7px 0 0;font-size:11px}
.ngc input[readonly]{color:var(--muted)}
.ngc input.zauto{color:var(--dorange);font-style:italic}
@media (max-width:360px){.ngcampos{margin-left:0}.ngc input{width:46px}}
/* grade compacta: sigla em cima, nota embaixo (cabem 6 por linha no celular) */
.ngc{flex-direction:column;height:auto;width:54px;border-radius:12px}
.ngc>span{border-right:0;border-bottom:1px solid var(--line);padding:2px 2px;font-size:10px;min-height:17px;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ngc input[data-num],.ngc input{width:100%!important;height:30px!important;font-size:15px}
.ngc.largo{width:auto;min-width:92px}
.ngc.largo .nins{height:30px}
.ngc.mult{width:auto;min-width:54px}
.ngc.mult .nmult{padding:0 4px 3px;text-align:center}
.ngcampos{gap:5px}
.ngcampos{margin-left:0}

/* =====================================================================================
   v18.1 — NOVA CARA: clean, leve e atual
   · topo claro e translúcido (vidro), com a cor da escola numa linha fina e no selo da escola
   · superfícies neutras, cantos mais arredondados, sombras suaves
   · ícones de linha em todo lugar
   ===================================================================================== */
:root{--bg:#f3f5f8;--card:#ffffff;--card2:#f6f7fa;--line:#e7eaf0;--radius:18px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.22);--tb-glass:color-mix(in srgb,var(--bg) 80%,transparent)}
:root[data-theme=dark]{--bg:#0b1017;--card:#131922;--card2:#19202b;--line:#232b37;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.8);--tb-glass:color-mix(in srgb,var(--bg) 78%,transparent)}
body{background:var(--bg)}
#topbar{background:var(--tb-glass)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:var(--text);border-bottom:1px solid var(--line)}
#topbar,body[data-modelo=semed] #topbar,body[data-modelo=sed] #topbar{box-shadow:inset 0 -3px 0 var(--navy)!important}
#app.rolou #topbar{box-shadow:inset 0 -3px 0 var(--navy),0 8px 24px -16px rgba(15,23,42,.35)!important}
#topbar h1{color:var(--text);font-weight:800;letter-spacing:-.02em}
#topbar .tb-ic,#topbar #btnBack{background:color-mix(in srgb,var(--navy) 9%,var(--card));color:var(--navy);border:1px solid color-mix(in srgb,var(--navy) 14%,var(--line))}
:root[data-theme=dark] #topbar .tb-ic,:root[data-theme=dark] #topbar #btnBack{background:color-mix(in srgb,var(--navy) 26%,var(--card));color:#e8edf5;border-color:color-mix(in srgb,var(--navy) 40%,var(--line))}
#topbar #btnBack{font-size:0;width:40px;height:40px;border-radius:13px}
#topbar #btnBack svg{width:22px;height:22px}
#topbar .tb-ic svg{stroke:currentColor}
#topbar #btnMais.on{background:var(--navy);color:#fff;border-color:transparent}
#topbar #btnMais.on svg{stroke:#fff}
#logo{filter:none}
.escchip{background:var(--navy)!important;color:#fff!important;border:0!important;box-shadow:0 4px 12px -6px color-mix(in srgb,var(--navy) 70%,transparent)}
#syncdot{box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 12%,transparent)}
#aulabar{background:transparent}
#aulabar b{box-shadow:none}
body.espia #topbar{color:#fff}
body.espia #topbar h1{color:#fff}
body.espia #topbar .tb-ic,body.espia #topbar #btnBack{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.card{border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.btn{border-radius:13px}
.chip-b,.cbadge,.ntool{transition:transform .12s,background .15s}
.chip-b:active,.cbadge:active,.ntool:active,.btn:active{transform:scale(.97)}
.empty .ico svg{width:40px;height:40px;stroke-width:1.6;color:color-mix(in srgb,var(--navy) 70%,var(--muted))}
.empty .ico{display:flex;justify-content:center}
.escic svg{width:26px;height:26px;color:var(--navy)}
/* v18.1 — toque de aplicativo: sem zoom de toque duplo, sem "puxar" a página do navegador, sem seleção nos botões */
html,body{overscroll-behavior-y:contain}
button,.btn,.chip-b,.ntool,.cbadge,#nav,#topbar,.ngc>span,.ngleg{-webkit-user-select:none;user-select:none;touch-action:manipulation}
input,select,textarea{touch-action:manipulation}
/* v18.1 — transições mais curtas e leves */
@media (prefers-reduced-motion:no-preference){
  html[data-vt="fade"]::view-transition-old(root){animation-name:vtSai;animation-duration:.1s}
  html[data-vt="fade"]::view-transition-new(root){animation-name:vtEntra;animation-duration:.17s}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}
#topbar{-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}

/* ===== v18.1 — TOPO COLORIDO (padrão): a cor da escola, com o acabamento novo ===== */
body[data-topo=cor] #topbar{background:linear-gradient(115deg,color-mix(in srgb,var(--navy) 92%,#000) 0%,var(--navy) 55%,color-mix(in srgb,var(--navy) 80%,#fff) 100%)!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;border-bottom:0;box-shadow:0 6px 20px -10px color-mix(in srgb,var(--navy) 70%,transparent)!important}
body[data-topo=cor] #topbar h1{color:#fff}
body[data-topo=cor] #topbar .tb-ic,body[data-topo=cor] #topbar #btnBack{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.18)}
body[data-topo=cor] #topbar #btnMais.on{background:#fff;color:var(--navy)}
body[data-topo=cor] #topbar #btnMais.on svg{stroke:var(--navy)}
body[data-topo=cor] .escchip{background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.3)!important;box-shadow:none}
body[data-topo=cor] #syncdot{box-shadow:0 0 0 3px rgba(255,255,255,.2)}
body[data-topo=cor] #aulabar{background:rgba(255,255,255,.14)}
:root[data-theme=dark] body[data-topo=cor] #topbar{background:linear-gradient(115deg,color-mix(in srgb,var(--navy) 55%,#000) 0%,color-mix(in srgb,var(--navy) 75%,#000) 100%)!important}

/* v18.2 — Mais geral (aberto da Visão geral) */
.mgtopo{background:linear-gradient(135deg,color-mix(in srgb,var(--navy) 10%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--navy) 16%,transparent)}
.mgtopo .row{gap:12px}
.mgic{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--navy) 14%,transparent);color:var(--navy);flex:none}
.mgic svg{width:22px;height:22px}

/* v18.2 — Mais enxuto: lista de uma linha por item, agrupada num cartão (como os ajustes do Android) */
.mlist{background:var(--card);border-radius:18px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--e1,0 1px 3px rgba(0,0,0,.06));overflow:hidden;margin-bottom:12px}
.mlist .mi{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;min-height:58px;transition:background .12s;list-style:none}
.mlist .mi::-webkit-details-marker{display:none}
.mlist .mi + .mi{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.mlist .mi:active{background:var(--card2)}
@media (hover:hover){.mlist .mi:hover{background:var(--card2)}}
.mlist .mi > .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--navy) 11%,var(--card));color:var(--navy)}
.mlist .mi > .ic svg{width:20px;height:20px}
:root[data-theme=dark] .mlist .mi > .ic{color:#bfdbfe;background:color-mix(in srgb,var(--navy) 30%,var(--card))}
.mlist .mtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mlist .mtx b{font-size:15px;font-weight:650}
.mlist .mtx small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist .mseta{color:var(--muted);opacity:.6;flex:none}
.mlist .mseta svg{width:18px;height:18px}
.mlist .mrow{cursor:default}
.mlist .mrow .seg{flex:none}
.mdet[open] > summary .mseta{transform:rotate(90deg)}
.mdet > summary .mseta{transition:transform .15s}
.mdetc{padding:4px 14px 14px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.mdetc > .row{margin-top:12px;gap:10px;flex-wrap:wrap}
.mdetc > .row .grow{min-width:150px}
.mdetc .seg{flex:none}
.mrod{text-align:center;padding:4px 12px 18px;line-height:1.6}
.mrod a{color:inherit;text-decoration:underline}
/* v18.2 — aula feita na Visão geral: só o ✓ (o botão fica para o que falta) */
.diaesc .md .mdok{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,#16a34a 14%,var(--card));color:#15803d;flex:none}
.diaesc .md .mdok svg{width:18px;height:18px}
:root[data-theme=dark] .diaesc .md .mdok{color:#86efac}
.mlist .mi > .ic.mseta{width:auto;height:auto;background:none!important;border-radius:0;color:var(--muted)}
.mdet > summary{list-style:none}
.mdet > summary::marker,.mdet > summary::-webkit-details-marker{content:'';display:none}
.mdet > summary .mtx b{color:var(--text);font-size:15px;font-weight:650}
.mdet > summary .mtx small{font-weight:400;color:var(--muted)}
.mdet > summary::before,.mdet > summary::after{display:none!important;content:none!important}
/* v18.2 — Visão geral mais leve: o botão da aula por fazer é um toque suave, não um bloco escuro */
.diaesc .md .mdbtn{background:color-mix(in srgb,var(--c,var(--navy)) 12%,var(--card));color:var(--c,var(--navy));border:1px solid color-mix(in srgb,var(--c,var(--navy)) 25%,transparent);box-shadow:none}
:root[data-theme=dark] .diaesc .md .mdbtn{color:#e5e7eb;background:color-mix(in srgb,var(--c,var(--navy)) 30%,var(--card))}
/* v18.2 — Meu dia: só a aula de agora tem o botão cheio; as outras, tom suave; feita = ✓ */
.meudia .md:not(.on) .mdbtn{background:color-mix(in srgb,var(--navy) 10%,var(--card));color:var(--navy);box-shadow:none}
:root[data-theme=dark] .meudia .md:not(.on) .mdbtn{color:#dbeafe;background:color-mix(in srgb,var(--navy) 28%,var(--card))}
.meudia .md .mdok{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,#16a34a 14%,var(--card));color:#15803d;flex:none}
.meudia .md .mdok svg{width:18px;height:18px}
:root[data-theme=dark] .meudia .md .mdok{color:#86efac}

/* ===== v18.3 — TRANSIÇÃO DE PÁGINA (pager): a tela inteira desliza para o lado, topo e barra de baixo parados ===== */
.pgprev{position:fixed;left:0;right:0;bottom:0;z-index:15;overflow:hidden;background:var(--bg);pointer-events:none;will-change:transform;contain:layout paint}
.pgprev .pgin{padding:12px;padding-bottom:calc(92px + var(--safe-b,0px));max-width:960px;width:100%;margin:0 auto}
#view{backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  html[data-vt="tabD"]::view-transition-old(root){animation:vtPagSaiE .3s cubic-bezier(.2,.9,.25,1) both}
  html[data-vt="tabD"]::view-transition-new(root){animation:vtPagEntraD .3s cubic-bezier(.2,.9,.25,1) both}
  html[data-vt="tabE"]::view-transition-old(root){animation:vtPagSaiD .3s cubic-bezier(.2,.9,.25,1) both}
  html[data-vt="tabE"]::view-transition-new(root){animation:vtPagEntraE .3s cubic-bezier(.2,.9,.25,1) both}
  html[data-vt^="tab"] #view .card.cabt{view-transition-name:none}
  html[data-vt^="tab"]::view-transition-group(root){overflow:hidden}
}
@keyframes vtPagSaiE{to{transform:translate3d(-100%,0,0)}}
@keyframes vtPagEntraD{from{transform:translate3d(100%,0,0)}}
@keyframes vtPagSaiD{to{transform:translate3d(100%,0,0)}}
@keyframes vtPagEntraE{from{transform:translate3d(-100%,0,0)}}
/* sem View Transitions (navegador antigo): o mesmo deslize, só na tela nova */
@media (prefers-reduced-motion:no-preference){
  #view.anim-tabD{animation:vtPagEntraD .28s cubic-bezier(.2,.9,.25,1) both}
  #view.anim-tabE{animation:vtPagEntraE .28s cubic-bezier(.2,.9,.25,1) both}
}

/* ===== v18.3 — NOTAS LIMPAS: aviso numa linha, ordem num seletor e as ferramentas recolhidas ===== */
.faltam.mini{padding:7px 11px;gap:8px;border-radius:12px;font-size:13px;margin:6px 0 4px;flex-wrap:wrap}
.faltam.mini .fn{min-width:26px;height:24px;border-radius:7px;font-size:13px}
.faltam.mini b{font-size:13.5px}
.faltam.mini .muted{font-size:12.5px}
.faltam.mini.ok .ic svg{width:17px;height:17px}
.nbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 8px}
.ordsel{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 4px 0 10px;height:38px;color:var(--muted);min-width:0}
.ordsel .ic svg{width:17px;height:17px}
.ordsel select{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:650;color:var(--text);padding:0 4px;height:36px;min-width:0;max-width:52vw;outline:0}
.ntoolbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;height:38px;padding:0 10px 0 11px;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;flex:none}
.ntoolbtn .ic svg{width:17px;height:17px}
.ntoolbtn .ntseta{transition:transform .15s;opacity:.6}
.ntoolbtn.on{background:color-mix(in srgb,var(--navy) 10%,var(--card));border-color:color-mix(in srgb,var(--navy) 35%,transparent)}
.ntoolbtn.on .ntseta{transform:rotate(90deg)}
.ntoolsbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px 8px;margin:0 0 10px}
.ntoolsbox > .small.muted:first-child{margin:0 0 6px!important}
.ntoolsbox .ntools{flex-wrap:wrap;overflow:visible;margin:4px 0 4px}
.ntoolsbox .ntsub{margin:8px 0 4px}
.ntoolsbox .nglegs{margin:0;flex-wrap:wrap;overflow:visible}
.faltam.mini:not(.ok) b{color:var(--dorange)}

/* v18.3 — lixeira separada por escola e turma */
.lixtopo{margin:2px 2px 10px}
.lixesc{margin-bottom:8px}
.lixesc .chip-b b{margin-left:4px;opacity:.7}
.lixl .mi.lixit{cursor:default;gap:8px}
.lixl .mi.lixit .btn.sm{flex:none;padding:6px 12px}
.lixl .mi.lixit .lixx{flex:none;color:var(--muted)}
.lixl .mi.lixit .lixx svg{width:18px;height:18px}
/* v18.3 — Aulas: dia sem conteúdo numa linha só (a lista fica bem mais curta) */
.card.tr{margin-bottom:6px}
.card.tr.vazia .row.small{flex-wrap:nowrap}
.card.tr .vzt{color:var(--muted);font-size:12.5px;margin-left:2px}
.card.tr .vzt u{color:var(--navy);text-decoration:none;font-weight:650}

/* ===== v18.4 — CONSELHO: cores do SGDE (estado) e "mantida sem decidir" ===== */
.ccst.sgv,.ccm.sgv{background:#c6f6c6;color:#14532d}
.ccst.sga,.ccm.sga{background:#fff59d;color:#5b4a00}
.ccst.sgr,.ccm.sgr{background:#f8b4b4;color:#7f1d1d}
.ccst.alt.sgv,.ccst.alt.sga,.ccst.alt.sgr{box-shadow:inset 3px 0 0 #7c3aed}
:root[data-theme=dark] .ccst.sgv,:root[data-theme=dark] .ccm.sgv{background:#14532d;color:#bbf7d0}
:root[data-theme=dark] .ccst.sga,:root[data-theme=dark] .ccm.sga{background:#713f12;color:#fef08a}
:root[data-theme=dark] .ccst.sgr,:root[data-theme=dark] .ccm.sgr{background:#7f1d1d;color:#fecaca}
.ccst.auto{opacity:.92}
.cchb.sgv{background:#e3fbe3} .cchb.sgv b{color:#166534}
.cchb.sga{background:#fffbd1} .cchb.sga b{color:#854d0e}
.cchb.sgr{background:#fde4e4} .cchb.sgr b{color:#991b1b}
:root[data-theme=dark] .cchb.sgv{background:#052e16} :root[data-theme=dark] .cchb.sgv b{color:#86efac}
:root[data-theme=dark] .cchb.sga{background:#3b2a05} :root[data-theme=dark] .cchb.sga b{color:#fde68a}
:root[data-theme=dark] .cchb.sgr{background:#3f0d0d} :root[data-theme=dark] .cchb.sgr b{color:#fca5a5}
.ccprog .ccauto{margin-top:8px;color:var(--muted);line-height:1.4}
.ccprog .ccauto b{color:var(--text)}
.card.cc.ccfoco{box-shadow:0 0 0 2px var(--navy),var(--e1,0 1px 3px rgba(0,0,0,.08));transition:box-shadow .3s}
/* v18.4 — nota do estado nas cores do SGDE (verde na média, amarelo até 1 ponto abaixo, vermelho abaixo) */
.tbl td.med.sgv,.ngl [data-notacell].sgv{background:#c6f6c6;color:#14532d}
.tbl td.med.sga,.ngl [data-notacell].sga{background:#fff59d;color:#5b4a00}
.tbl td.med.sgr,.ngl [data-notacell].sgr{background:#f8b4b4;color:#7f1d1d}
.tbl td.med.sgx,.ngl [data-notacell].sgx{background:var(--lgrey);color:var(--muted)}
:root[data-theme=dark] .tbl td.med.sgv,:root[data-theme=dark] .ngl [data-notacell].sgv{background:#14532d;color:#bbf7d0}
:root[data-theme=dark] .tbl td.med.sga,:root[data-theme=dark] .ngl [data-notacell].sga{background:#713f12;color:#fef08a}
:root[data-theme=dark] .tbl td.med.sgr,:root[data-theme=dark] .ngl [data-notacell].sgr{background:#7f1d1d;color:#fecaca}
.badge.situ{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ===== v18.4 — TRAZER DE UM DOCUMENTO (notas e faltas) ===== */
.bolintro .arqbtn{cursor:pointer}
.bolnota{margin:0 4px 12px;text-align:center}
.bolcab .ordsel select{max-width:42vw}
.bolista{padding:2px 0}
.bolal{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.bolal:first-child{border-top:0}
.bolnm{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bolnm .nr{font-size:12px;color:var(--muted);font-weight:700;min-width:20px;text-align:right}
.bolit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0 4px 28px;font-size:14px;cursor:pointer}
.bolit.fech{opacity:.6;cursor:default}
.bolbim{font-weight:800;color:var(--muted);min-width:24px}
.bolapp{color:var(--muted);min-width:48px;text-align:right}.bolapp i{font-size:12px}
.bolseta{color:var(--muted)}
.bolv{font-weight:800;padding:2px 9px;border-radius:8px;background:var(--card2)}
.bolv.sgv,.bolv.green{background:#c6f6c6;color:#14532d}.bolv.sga,.bolv.yellow{background:#fff59d;color:#5b4a00}.bolv.sgr,.bolv.red,.bolv.orange{background:#f8b4b4;color:#7f1d1d}
:root[data-theme=dark] .bolv.sgv,:root[data-theme=dark] .bolv.green{background:#14532d;color:#bbf7d0}
:root[data-theme=dark] .bolv.sga,:root[data-theme=dark] .bolv.yellow{background:#713f12;color:#fef08a}
:root[data-theme=dark] .bolv.sgr,:root[data-theme=dark] .bolv.red,:root[data-theme=dark] .bolv.orange{background:#7f1d1d;color:#fecaca}
.boldest{width:auto;margin:0;height:32px;padding:0 8px;font-size:13px}
.bolc{flex-basis:100%;padding-left:32px}
.bolfim{justify-content:center;margin-top:10px}
.falista .falit{display:flex;align-items:flex-start;gap:12px;padding:9px 14px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.falista .falit:first-child{border-top:0}
.falista .falit.igual{opacity:.6}
.fald{display:flex;flex-direction:column;min-width:52px}.fald small{color:var(--muted);font-size:11px}
/* ===== v18.4 — LANÇAR NO SGDE: a tabela com a cara do SGDE ===== */
.nbar .sgdebtn{margin-left:auto}
.sgdados{padding:12px 14px}
.sgdh{font-size:18px;font-weight:600;margin-bottom:8px}
.sgdg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 16px}
.sgdg small{display:block;font-weight:700;font-size:12px;color:var(--text)}
.sgdg b{font-weight:400;font-size:13px;color:var(--muted)}
.sgacoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.sgpassos{margin:8px 0 2px;padding-left:20px;line-height:1.7}
.sgfav{cursor:grab;background:#047857!important;color:#fff!important;text-decoration:none}
.sgaviso{border-left:4px solid var(--dorange)}.sgaviso.c{border-left-color:#7c3aed}
.sgtab{font-size:13px;min-width:720px}
.sgtab .sgtit{background:#4f8299!important;color:#fff!important;text-align:center;font-weight:600;letter-spacing:.02em;padding:9px}
.sgtab thead tr:nth-child(2) th{background:#efefef;color:#222;font-weight:700;font-size:11.5px;text-align:center;vertical-align:bottom}
.sgtab thead th.l,.sgtab td.l{text-align:left}
.sgtab tbody tr:nth-child(odd) td{background:#e9e9e9}
.sgtab tbody tr:nth-child(even) td{background:#fff}
.sgtab td{color:#222;padding:7px 8px;text-align:center}
.sgtab td.cod{color:#444;font-variant-numeric:tabular-nums}
.sgtab td.nm{font-size:12.5px}
.sgtab td.v{cursor:copy}
.sgtab td.v span{display:inline-block;min-width:52px;padding:4px 6px;border:1px solid #bdbdbd;border-radius:3px;background:#fff;font-variant-numeric:tabular-nums}
.sgtab td.v.c span{border-color:#a78bfa}
.sgtab td.med{font-weight:600;text-align:left;min-width:64px}
.sgtab td.med.sgv{background:#90ee90!important;color:#14532d}.sgtab td.med.sga{background:#ffff00!important;color:#3d3300}.sgtab td.med.sgr{background:#f08080!important;color:#4a0d0d}
.sgtab tr.inat td{color:#666}
.sgtab tr.inat td.v span{background:#ddd;border-color:#ccc}
.sgtab tr.ok td{opacity:.55}
.sgtab tr.ok td.med{opacity:1}
:root[data-theme=dark] .sgtab tbody tr:nth-child(odd) td{background:#1f2733}
:root[data-theme=dark] .sgtab tbody tr:nth-child(even) td{background:#171d27}
:root[data-theme=dark] .sgtab td{color:#e5e7eb}
:root[data-theme=dark] .sgtab thead tr:nth-child(2) th{background:#28313f;color:#e5e7eb}
:root[data-theme=dark] .sgtab td.v span{background:#111722;border-color:#334155}
:root[data-theme=dark] .sgtab .sgtit{background:#2a5566!important}
:root[data-theme=dark] .sgtab td.cod{color:#9ca3af}
:root[data-theme=dark] .sgtab td.v.c span{border-color:#7c3aed}
:root[data-theme=dark] .sgtab td.med.sgv{background:#14532d!important;color:#86efac}
:root[data-theme=dark] .sgtab td.med.sga{background:#713f12!important;color:#fde68a}
:root[data-theme=dark] .sgtab td.med.sgr{background:#7f1d1d!important;color:#fca5a5}
:root[data-theme=dark] .sgtab tr.inat td{color:#6b7280}
:root[data-theme=dark] .sgtab tr.inat td.v span{background:#1f2937;border-color:#374151}
:root[data-theme=dark] .sgfav{background:#065f46!important}
:root[data-theme=dark] .sgaviso.c{border-left-color:#a78bfa}
.sgtab td.v span{min-height:26px;line-height:16px;vertical-align:middle}
/* v18.4 — Como usar */
.gcard{padding:4px 14px}
.gpasso{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.gpasso:first-child{border-top:0}
.gpasso .fchk{margin-top:2px}
.ghero{border-left:5px solid var(--navy)}
.fchk.gi{background:color-mix(in srgb,var(--navy) 12%,var(--card));color:var(--navy)}.fchk.gi svg{width:12px;height:12px}
/* v18.4 — as 4 cores da legenda do SGDE */
.ccst.sgl,.ccm.sgl,.tbl td.med.sgl,.ngl [data-notacell].sgl,.bolv.sgl{background:#fed7aa;color:#7c2d12}
.cchb.sgl{background:#ffedd5}.cchb.sgl b{color:#9a3412}
.ccst.sgr,.ccm.sgr,.tbl td.med.sgr,.ngl [data-notacell].sgr,.bolv.sgr{background:#fca5a5;color:#7f1d1d}
:root[data-theme=dark] .ccst.sgl,:root[data-theme=dark] .ccm.sgl,:root[data-theme=dark] .tbl td.med.sgl,:root[data-theme=dark] .ngl [data-notacell].sgl,:root[data-theme=dark] .bolv.sgl{background:#7c2d12;color:#fed7aa}
:root[data-theme=dark] .cchb.sgl{background:#431407}:root[data-theme=dark] .cchb.sgl b{color:#fdba74}
.sgtab td.med.sgv{background:#44cc44!important;color:#0b3d0b}.sgtab td.med.sga{background:#ffff00!important;color:#3d3300}.sgtab td.med.sgl{background:#ffa500!important;color:#3d2300}.sgtab td.med.sgr{background:#ff2b2b!important;color:#fff}
.sgleg{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;margin:4px 2px 10px;color:var(--text)}
.sgleg span{display:inline-flex;align-items:center;gap:6px}
.sgleg i{display:inline-block;width:26px;height:14px;border:1px solid rgba(0,0,0,.25);border-radius:2px}
.sgleg i.sgv{background:#44cc44}.sgleg i.sga{background:#ffff00}.sgleg i.sgl{background:#ffa500}.sgleg i.sgr{background:#ff2b2b}
.sec-h h3{font-variant-caps:normal;text-transform:uppercase;font-size:11.5px;letter-spacing:.07em}   /* v18.4 — maiúsculas de verdade (o small-caps sintetizado embaralhava em algumas telas) */
/* v18.4.1 — computador: o cabeçalho da turma alinha com o resto da tela (antes ficava encostado à esquerda) */
@media (min-width:1024px){ #view .card.cabt{margin-left:auto!important;margin-right:auto!important;width:100%} }
.sgtab td.nm{white-space:normal;overflow:visible;text-overflow:clip;max-width:none;min-width:220px}
.sgtab tr.inat td.v span{color:transparent}
@media (min-width:1024px){ #view>*{margin-left:auto!important;margin-right:auto!important} }   /* v18.4.1 — nada fica fora do eixo no computador (margens escritas direto no elemento também) */
/* v18.4.1 — ícones: traço mais fino e um fundo suave ("duotone") nas formas fechadas onde o ícone tem destaque */
.ic svg .dt{fill:currentColor;fill-opacity:var(--ic-dt,0);transition:fill-opacity .18s}
#nav button .ico svg{stroke-width:1.75}
#nav button .ico svg .dt{fill:currentColor;fill-opacity:0;transition:fill-opacity .18s}
#nav button.active .ico svg{stroke-width:2.1}
#nav button.active .ico svg .dt{fill-opacity:.22}
.mlist .mi > .ic,.menu .mi .ic,.pend .ic,.errview .ic,.empty .ic,.bitem .ic,.faltam .ic,.escopt .ic,.ghero .ic{--ic-dt:.16}
.mlist .mi > .ic svg{stroke-width:1.8}
.mlist .mi > .ic.mseta{--ic-dt:0}
/* cada item da lista ganha um tom (como os aplicativos do celular) — o mesmo item sempre tem a mesma cor */
.mlist .mi:nth-child(6n+1) > .ic:not(.mseta){background:color-mix(in srgb,#3b82f6 14%,var(--card));color:#2563eb}
.mlist .mi:nth-child(6n+2) > .ic:not(.mseta){background:color-mix(in srgb,#8b5cf6 14%,var(--card));color:#7c3aed}
.mlist .mi:nth-child(6n+3) > .ic:not(.mseta){background:color-mix(in srgb,#14b8a6 15%,var(--card));color:#0d9488}
.mlist .mi:nth-child(6n+4) > .ic:not(.mseta){background:color-mix(in srgb,#f59e0b 17%,var(--card));color:#b45309}
.mlist .mi:nth-child(6n+5) > .ic:not(.mseta){background:color-mix(in srgb,#f43f5e 13%,var(--card));color:#e11d48}
.mlist .mi:nth-child(6n+6) > .ic:not(.mseta){background:color-mix(in srgb,#22c55e 15%,var(--card));color:#15803d}
:root[data-theme=dark] .mlist .mi:nth-child(6n+1) > .ic:not(.mseta),:root[data-theme=dark] .menu .mi:nth-child(6n+1) .ic{background:color-mix(in srgb,#3b82f6 26%,var(--card));color:#93c5fd}
:root[data-theme=dark] .mlist .mi:nth-child(6n+2) > .ic:not(.mseta),:root[data-theme=dark] .menu .mi:nth-child(6n+2) .ic{background:color-mix(in srgb,#8b5cf6 26%,var(--card));color:#c4b5fd}
:root[data-theme=dark] .mlist .mi:nth-child(6n+3) > .ic:not(.mseta),:root[data-theme=dark] .menu .mi:nth-child(6n+3) .ic{background:color-mix(in srgb,#14b8a6 26%,var(--card));color:#5eead4}
:root[data-theme=dark] .mlist .mi:nth-child(6n+4) > .ic:not(.mseta),:root[data-theme=dark] .menu .mi:nth-child(6n+4) .ic{background:color-mix(in srgb,#f59e0b 24%,var(--card));color:#fcd34d}
:root[data-theme=dark] .mlist .mi:nth-child(6n+5) > .ic:not(.mseta),:root[data-theme=dark] .menu .mi:nth-child(6n+5) .ic{background:color-mix(in srgb,#f43f5e 24%,var(--card));color:#fda4af}
:root[data-theme=dark] .mlist .mi:nth-child(6n+6) > .ic:not(.mseta),:root[data-theme=dark] .menu .mi:nth-child(6n+6) .ic{background:color-mix(in srgb,#22c55e 24%,var(--card));color:#86efac}
.mlist .mi > .ic:not(.mseta){box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent)}
.mlist .mseta{transition:transform .15s}
@media (hover:hover){.mlist .mi:hover .mseta{transform:translateX(2px);opacity:.9}}
.mlist.mdet[open] > summary .mseta{transform:rotate(90deg)}
/* botões com ícone: alinhamento e tamanho iguais em todo o app */
.btn .ic svg{width:18px;height:18px}
.btn.sm .ic svg{width:16px;height:16px}
.btn .ic{margin-right:2px}
/* v18.4.1 — ícones dos avisos e atalhos em "azulejo" colorido (mesma linguagem da lista do Mais) */
.card.avx > .row > .ic{width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--navy) 11%,var(--card));color:var(--navy);--ic-dt:.16}
.card.avx > .row > .ic svg{width:20px;height:20px}
.card.avx.ok > .row > .ic{background:color-mix(in srgb,#22c55e 15%,var(--card));color:#15803d}
.card.avx.al > .row > .ic{background:color-mix(in srgb,#f59e0b 17%,var(--card));color:#b45309}
.card.avx.ur > .row > .ic{background:color-mix(in srgb,#f43f5e 13%,var(--card));color:#e11d48}
:root[data-theme=dark] .card.avx > .row > .ic{background:color-mix(in srgb,#3b82f6 24%,var(--card));color:#93c5fd}
:root[data-theme=dark] .card.avx.ok > .row > .ic{background:color-mix(in srgb,#22c55e 24%,var(--card));color:#86efac}
:root[data-theme=dark] .card.avx.al > .row > .ic{background:color-mix(in srgb,#f59e0b 24%,var(--card));color:#fcd34d}
:root[data-theme=dark] .card.avx.ur > .row > .ic{background:color-mix(in srgb,#f43f5e 24%,var(--card));color:#fda4af}
.card.avx > .row > .ic.mseta,.card.avx > .row > .ic:last-child{width:auto;height:auto;background:none;color:var(--muted)}
.quick button span{--ic-dt:.16}
.quick button:nth-child(3n+1) span{background:color-mix(in srgb,#3b82f6 14%,var(--card));color:#2563eb}
.quick button:nth-child(3n+2) span{background:color-mix(in srgb,#22c55e 15%,var(--card));color:#15803d}
.quick button:nth-child(3n+3) span{background:color-mix(in srgb,#8b5cf6 14%,var(--card));color:#7c3aed}
:root[data-theme=dark] .quick button:nth-child(3n+1) span{background:color-mix(in srgb,#3b82f6 26%,var(--card));color:#93c5fd}
:root[data-theme=dark] .quick button:nth-child(3n+2) span{background:color-mix(in srgb,#22c55e 24%,var(--card));color:#86efac}
:root[data-theme=dark] .quick button:nth-child(3n+3) span{background:color-mix(in srgb,#8b5cf6 26%,var(--card));color:#c4b5fd}
@media (min-width:1024px){
  .quick.q3{grid-template-columns:repeat(3,1fr)}
  .quick.q3 button{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px;font-size:13.5px;text-align:left}
}
/* v18.4.1 — exame final (EF) e conselho final (CCF) no calendário */
.efm{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:1px 5px;border-radius:6px;margin-left:5px;vertical-align:1px;background:#fde68a;color:#78350f}
.efm.ccf{background:#ddd6fe;color:#4c1d95}
.cal-d.ef{background:color-mix(in srgb,#f59e0b 9%,var(--card2,var(--card)));opacity:1}
.cal-d.ccf .n{opacity:1}
.badge.efb{background:#fde68a;color:#78350f}
.exinfo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:8px 0;border-radius:12px;background:color-mix(in srgb,#f59e0b 12%,var(--card));color:var(--text);font-size:13px;line-height:1.35}
.exinfo .ic{color:#b45309;flex:none;--ic-dt:.18}.exinfo .ic svg{width:20px;height:20px}
:root[data-theme=dark] .efm,:root[data-theme=dark] .badge.efb{background:#78350f;color:#fde68a}
:root[data-theme=dark] .efm.ccf{background:#4c1d95;color:#ddd6fe}
:root[data-theme=dark] .exinfo{background:color-mix(in srgb,#f59e0b 16%,var(--card))}
:root[data-theme=dark] .exinfo .ic{color:#fcd34d}
/* v18.4.1 — mapa: traço de "fora da turma" (antes de entrar / depois de sair), como o "__" do SGDE */
table.tbl.dgrade td.dm.fx{color:color-mix(in srgb,var(--muted) 70%,transparent);cursor:default;background:color-mix(in srgb,var(--line) 22%,transparent)}
.mapimp{margin-top:10px;gap:10px;align-items:center;flex-wrap:wrap}
.mapimp .btn{flex:0 0 auto}
.falext .ic{color:var(--navy);flex:none}.falext .ic svg{width:16px;height:16px}
/* v18.4.1 — vários mapas: uma linha por turma */
.falote .falote-i{flex-wrap:wrap;row-gap:8px}
.falote .falote-i .ordsel{flex:0 0 auto}
.falote .falote-i .badge{flex:none}
@media (max-width:600px){.falote .falote-i .mtx{flex-basis:calc(100% - 50px)}}
table.tbl.dgrade td.dm.futd{color:color-mix(in srgb,var(--muted) 55%,transparent);cursor:default}
.falit.semreg .fald b{color:var(--muted)}
/* v18.4.1 — três indicadores lado a lado também no celular (sem o terceiro sozinho na linha de baixo) */
@media (max-width:699px){
  .indgrid.c3{grid-template-columns:repeat(3,1fr);gap:6px}
  .indgrid.c3 .ind{padding:9px 9px}
  .indgrid.c3 .indt{font-size:10px;letter-spacing:.02em}
  .indgrid.c3 .indv b{font-size:22px}
  .indgrid.c3 .inds{font-size:10.5px}
}
/* v18.4.1 — Lançar no SGDE: a conta da turma (instrumentos ou G + R) */
.sgmodo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.sgmodo .seg.mini button{font-size:12px;white-space:nowrap}
.sgtab th.c{color:#6d28d9}
.sgtab .sgman{font-size:10px;margin-left:2px;vertical-align:super}
.seg.mistoab{display:flex;margin:0 0 10px}.seg.mistoab button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg.mistoab .ic svg{width:17px;height:17px}
/* v18.4.1 — editor rápido de instrumentos (Provas e trabalhos) */
.pvinst summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;cursor:pointer}
.pvinst summary b{display:inline-flex;align-items:center;gap:6px}
.pvinst .pvil{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pvinst .pvir{display:grid;grid-template-columns:64px 1fr 72px 34px;gap:6px;align-items:center}
.pvinst .pvir input{margin:0}
.pvinst .pvs{text-transform:uppercase;font-weight:800;text-align:center}
.pvinst .pvm{text-align:center}
.pvinst .ok b{color:var(--dgreen)}.pvinst .falta b{color:var(--dred)}
/* v18.4.1 — trabalho em grupo ou individual */
.trmodo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.trmodo .seg.mini button{display:inline-flex;align-items:center;gap:5px}
.trmodo .ic svg{width:15px;height:15px}
/* v18.4.1 — montar grupos: vários marcados de uma vez */
.trmem{display:inline-flex;align-items:center;gap:4px;padding-right:4px}
.trmem .trmn{cursor:pointer}
.trmem.on,.trsolto.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.trmem.on button{color:#fff}
.trgrp.alvo{outline:2px dashed color-mix(in srgb,var(--acc,var(--navy)) 60%,transparent);outline-offset:2px}
.trputrow{margin-top:6px}
.trput{width:100%}
/* v18.4.1 — montar grupos: vários marcados de uma vez */
.trmem{display:inline-flex;align-items:center;gap:4px;padding-right:4px}
.trmem .trmn{cursor:pointer}
.trmem.on,.trsolto.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.trmem.on button{color:#fff}
.trgrp.alvo{outline:2px dashed color-mix(in srgb,var(--acc,var(--navy)) 60%,transparent);outline-offset:2px}
.trputrow{margin-top:6px}
.trput{width:100%}
.trgrp .chips,.trsoltos .chips{flex-wrap:wrap;overflow:visible}
.sgtab td.v.rcons span{border-color:#16a34a;box-shadow:0 0 0 1px #16a34a33}
.sgtab td.v .sgman{color:#16a34a;font-weight:800}

/* ===== v18.5 — NAVEGAÇÃO SEM SALTOS =====
   - o topo tem a mesma altura em todas as telas (o botão voltar tem o tamanho dos outros botões do topo);
   - a tela não "refaz a entrada" (fade + 6px) depois de um deslize ou de um toque que só atualiza a página. */
#topbar #btnBack{width:38px;height:36px;border-radius:12px;font-size:24px}
#view{animation:none}
/* entrar numa tela irmã (Notas ↔ Aulas da mesma turma, outro bimestre) só funde — sem subir 8px */
@keyframes vtEntra{from{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* botões de ícone dentro das telas (✕ dispensar, ×): visíveis no cartão branco — o branco é só do topo */
:where(#view, .modalwrap) .iconbtn{color:var(--muted)}
:where(#view) .iconbtn.sm{width:30px;height:30px;font-size:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0}
:where(#view) .iconbtn.sm:hover{background:color-mix(in srgb,var(--muted) 12%,transparent)}
/* v18.5 — o cabeçalho da turma ENCOLHE na hora (rolando para baixo a tela fica parada) e VOLTA deslizando
   (perto do topo a lista desce suave, sem o pulo de 48px) */
#view .card.cabt [data-vivo="cabTurma"]{transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .24s ease,margin .28s cubic-bezier(.4,0,.2,1)!important}
#view .card.cabt{transition:padding .28s cubic-bezier(.4,0,.2,1)!important}
#app.rolou #view .card.cabt [data-vivo="cabTurma"],#app.rolou #view .card.cabt{transition:none!important}
#view .card.cabt [data-vivo="cabTurma"]{max-height:90px}
/* v18.5.1 — nota escrita à mão por cima dos instrumentos */
.nmanual{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}
.nmanual b{font-size:15px}
.nmanual small{font-size:10.5px;color:var(--muted);white-space:nowrap}
.nmanual .linkbtn{font-size:10.5px;padding:0;color:var(--navy);text-decoration:underline}
/* v18.5.1 — prévia da importação coluna por coluna */
.bolit.bolinst{flex-wrap:wrap;row-gap:4px}
.bolit .boldif{flex:1 1 180px;font-size:12.5px;color:var(--muted);min-width:0}
.bolit .boldif b{color:var(--text)}
.bolit .bolnota{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.bolinfo{border-left:4px solid var(--navy);line-height:1.45}
/* ===== v18.5.1 — CONSOLIDADO / RAV redesenhado ===== */
.tbl.conso td,.tbl.conso th{text-align:center;vertical-align:middle}
.tbl.conso td.nm{text-align:left}
.tbl.conso th.csep,.tbl.conso td.csep{border-left:1px solid var(--line)}
.tbl.conso td.cs{min-width:118px;text-align:left;padding-left:12px}
.tbl.conso td.cs small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.tbl.conso td.csum{font-weight:700;color:var(--text)}
.tbl.conso td.cn0{color:var(--muted);font-size:12px}
.cnp{display:inline-flex;align-items:baseline;gap:2px;min-width:40px;justify-content:center;padding:3px 8px;border-radius:9px;font-weight:700;font-size:13.5px;background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--text)}
.cnp sup{font-size:8.5px;font-weight:800;letter-spacing:.02em;opacity:.8}
.cnp.sgv{background:#dcfce7;color:#14532d}
.cnp.sga{background:#fef9c3;color:#713f12}
.cnp.sgl{background:#ffedd5;color:#9a3412}
.cnp.sgr{background:#fee2e2;color:#7f1d1d}
:root[data-theme=dark] .cnp.sgv{background:#14532d;color:#bbf7d0}
:root[data-theme=dark] .cnp.sga{background:#713f12;color:#fef08a}
:root[data-theme=dark] .cnp.sgl{background:#7c2d12;color:#fed7aa}
:root[data-theme=dark] .cnp.sgr{background:#7f1d1d;color:#fecaca}
.cst{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.cst.ok{color:#15803d;background:color-mix(in srgb,#16a34a 12%,transparent)}
.cst.rav,.cst.r{color:#b91c1c;background:color-mix(in srgb,#dc2626 12%,transparent)}
.cst.a{color:#b45309;background:color-mix(in srgb,#f59e0b 14%,transparent)}
.cst.m{color:var(--muted);background:transparent;padding-left:0;font-weight:600}
:root[data-theme=dark] .cst.ok{color:#86efac} :root[data-theme=dark] .cst.rav,:root[data-theme=dark] .cst.r{color:#fca5a5} :root[data-theme=dark] .cst.a{color:#fcd34d}
.tbl.conso tr.inativo td{opacity:.7}
/* v18.5.1 — dia sem chamada: em branco no mapa e "sem chamada" na lista de datas */
td.dm.semch{background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--muted) 10%,transparent) 4px 5px)}
.date-card .n.semch{color:var(--dorange);font-size:12px;font-weight:600;background:color-mix(in srgb,#f59e0b 12%,transparent);padding:2px 8px;border-radius:99px}
@media (max-width:560px){ .grid.c3.exgrid{grid-template-columns:1fr 1fr} .grid.c3.exgrid>div:last-child{grid-column:1/-1} }
/* ===== v18.7 — atividade da aula (+ ganha a nota da aula) ===== */
.ativcard .ibtn{flex:0 0 auto}
.ativlist{margin-top:8px;max-height:52vh;overflow:auto}
.ativrow .nm{min-width:0}
.ativrow .sub b{color:var(--text)}
.ativrow.faltou .nm{opacity:.75}
.ativrow.mais{background:color-mix(in srgb,#16a34a 8%,transparent)}
.ativrow.menos{background:color-mix(in srgb,#dc2626 6%,transparent)}
.ativbts{display:flex;gap:6px;flex:0 0 auto}
.ativbts .mabtn{width:44px;height:40px;font-size:22px;font-weight:800}
.ativbts .mabtn.neg.on{background:#dc2626;color:#fff;border-color:#dc2626}
.ativbts .mabtn.on:not(.neg){background:#16a34a;color:#fff;border-color:#16a34a}
.ativrow.faltou .ativbts{opacity:.45}
/* v18.7.1 — comentário do − na atividade */
.ativobs{display:block;margin-top:3px;padding:0;border:0;background:none;text-align:left;font-size:12px;color:#b91c1c;font-weight:600;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ativmot{flex-wrap:wrap;gap:6px}
.ativmot .chip-b.on{background:#fee2e2;color:#991b1b;border-color:#fca5a5}

/* v18.8 — selo do sino de notificações no topo */
.tb-ic{position:relative}
.tb-ic .tbbadge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--navy);pointer-events:none}
.tb-ic .tbbadge.dot{min-width:10px;width:10px;height:10px;padding:0;top:-2px;right:-2px}

/* v19.0 — dropdown do sino (notificações rápidas) */
.sinodrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.25);animation:fadeIn .12s}
.sinopanel{position:absolute;top:52px;right:8px;width:min(360px,calc(100vw - 16px));background:var(--card);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.22);overflow:hidden;border:1px solid var(--line);animation:slideDown .15s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.sinohead{padding:10px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--navy) 10%,var(--card)),var(--card));border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sinohead svg{width:16px;height:16px;color:var(--navy);flex:0 0 auto}
:root[data-theme=dark] .sinohead svg{color:#93c5fd}
.sinoperm{padding:10px 14px;background:var(--lgrey);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sinoperm span{flex:1}
.sinoitem{padding:0;border-bottom:1px solid var(--line);display:flex;align-items:stretch;transition:opacity .25s,transform .25s}
.sinoitem:last-of-type{border-bottom:0}
.sinobody{flex:1;min-width:0;padding:10px 14px;cursor:pointer;transition:background .12s}
.sinobody:active{background:var(--card2)}
.sinoitem b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.sinoitem small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.sinoactions{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.sinoactions button{flex:1;width:40px;border:0;background:none;cursor:pointer;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s}
.sinoactions button:first-child{border-bottom:1px solid var(--line)}
.sinoactions button:hover,.sinoactions button:active{background:var(--card2);color:var(--navy)}
.sinoactions button svg{width:16px;height:16px}
.sinoitem.vazio{text-align:center;color:var(--muted);font-size:13px;cursor:default;padding:22px 14px}
.sinoitem.vazio svg{vertical-align:-3px;margin-right:4px}
.sinofoot{padding:10px 14px;text-align:center;border-top:1px solid var(--line);background:var(--card2)}
.sinofoot a{font-size:13px;font-weight:600;color:var(--navy);text-decoration:none}
.sinofoot a+a{margin-left:4px}
:root[data-theme=dark] .sinofoot a{color:#93c5fd}

/* v18.9 — chamada em 2 passos (Faltas | Aula) */
.cseg{display:flex;gap:6px;margin:10px 0 8px;background:var(--lgrey);padding:4px;border-radius:14px}
.cseg button{flex:1;border:0;background:none;padding:10px 6px;border-radius:11px;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.15s}
.cseg button.on{background:var(--card);color:var(--navy);box-shadow:var(--shadow)}
:root[data-theme=dark] .cseg button.on{color:#fff}
.cseg button svg{width:17px;height:17px;stroke:currentColor}
.cseg .segbadge{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--dred);color:#fff;font-size:11px;line-height:19px;font-weight:700;text-align:center}
.cseg .segbadge:empty{display:none}
.cpane{display:none}
.cpane.on{display:block;animation:fadeIn .18s ease-out}
.cpnav{margin-top:12px}
.cpnav.back{margin:0 0 4px}

/* v18.9 — passo-a-passo do SGDE (Lançar · Conferir · Consolidado) */
.sgdesteps{display:flex;gap:8px;margin:0 0 12px}
.sgdestep{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;text-align:left;font-family:inherit;box-shadow:var(--shadow)}
.sgdestep .sgn{flex:0 0 auto;width:22px;height:22px;border-radius:999px;background:var(--lgrey);color:var(--muted);font-size:12px;font-weight:800;display:grid;place-items:center}
.sgdestep .sgl{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.sgdestep .sgl b{font-size:13px}
.sgdestep .sgl small{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgdestep.on{border-color:var(--navy);background:color-mix(in srgb,var(--navy) 12%,var(--card))}
.sgdestep.on .sgn{background:var(--navy);color:#fff}
:root[data-theme=dark] .sgdestep.on .sgn{color:#0d1119}
@media (max-width:460px){.sgdestep .sgl small{display:none}.sgdestep{justify-content:center}}

/* v18.9 — calendário mais limpo e legível (polimento visual) */
.cal{padding:10px}
.cal-h{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;gap:4px}
.cal-h>div:first-child,.cal-h>div:last-child{color:color-mix(in srgb,var(--navy) 50%,var(--muted))}
.cal-g{gap:4px}
.cal-d{min-height:62px;border-radius:12px;padding:5px 5px 4px;gap:2px}
.cal-d .n{font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:999px;align-self:flex-start;color:var(--text)}
.cal-d.hoje{background:color-mix(in srgb,var(--navy) 9%,var(--card));border-color:var(--navy)}
.cal-d.hoje .n,:root[data-theme=dark] .cal-d.hoje .n{background:var(--navy);color:#fff;font-weight:800}
.cal-d.fer{background:color-mix(in srgb,var(--dred) 13%,var(--card))}
.cal-d.anp{background:color-mix(in srgb,var(--gold) 15%,var(--card))}
.cal-d.fer .tag{color:var(--dred)}
.cal-d.anp .tag{color:var(--dorange)}
.cal-d .tag.t{gap:3px}
.cal-d .tag.t>span{display:inline-flex;align-items:center;gap:3px;background:color-mix(in srgb,var(--navy) 9%,var(--card));border-radius:7px;padding:1px 5px;font-size:8.5px;line-height:1.55;font-weight:700}
.cal-d .tag.t i{width:6px;height:6px;margin-right:0}
.cal-d .dots{gap:3px}
.cal-d .dots i{width:6px;height:6px}

/* =====================================================================================
   v21.0 — ESTILO PLAY STORE: acabamento profissional de app nativo
   · ripple Material em todo elemento tocável
   · sombras e profundidade refinadas (4 níveis)
   · scrollbar custom nativa
   · micro-interações de feedback (botões, nav, cards)
   · tipografia mais firme e hierarquia visual
   · modais com animação spring e backdrop refinado
   · polish geral: bordas, transições, empty states
   ===================================================================================== */

/* ---------- Material ripple ---------- */
@keyframes md-ripple{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.18}
  60%{opacity:.1}
  100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}
}
.btn::after,
.card.click::after,
.list .item.click::after,
.mlist .mi::after,
.chip-b::after,
.tabs button::after,
.seg button::after,
.menu .mi::after,
#nav button::after,
.opt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),currentColor 0%,transparent 70%);
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.btn,.card.click,.list .item.click,.mlist .mi,.chip-b,.tabs button,.seg button,.menu .mi,#nav button,.opt{
  position:relative;overflow:hidden;
}

/* ---------- refined elevation system ---------- */
:root{
  --e0:none;
  --e1:0 1px 3px rgba(16,24,40,.04),0 1px 2px rgba(16,24,40,.06);
  --e2:0 1px 2px rgba(16,24,40,.03),0 4px 12px -2px rgba(16,24,40,.09);
  --e3:0 2px 4px rgba(16,24,40,.03),0 12px 28px -6px rgba(16,24,40,.14);
  --e4:0 4px 8px rgba(16,24,40,.04),0 24px 48px -12px rgba(16,24,40,.18);
  --shadow:var(--e2);
  --sh-float:var(--e4);
}
:root[data-theme=dark]{
  --e0:none;
  --e1:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
  --e2:0 1px 2px rgba(0,0,0,.4),0 4px 14px -2px rgba(0,0,0,.45);
  --e3:0 2px 6px rgba(0,0,0,.45),0 14px 32px -6px rgba(0,0,0,.55);
  --e4:0 4px 8px rgba(0,0,0,.5),0 24px 48px -12px rgba(0,0,0,.65);
  --shadow:var(--e2);
  --sh-float:var(--e4);
}

/* ---------- custom scrollbar (native feel) ---------- */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 30%,transparent);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 50%,transparent)}
.tabs::-webkit-scrollbar,.seg.scroll::-webkit-scrollbar{display:none}

/* ---------- typography: tighter, crisper ---------- */
body{font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility}
h2{font-weight:800;letter-spacing:-.025em;line-height:1.2}
h3{font-weight:750;letter-spacing:.08em}
.card b,.list .item .nm{font-weight:700}
.muted{letter-spacing:.005em}

/* ---------- topbar polish ---------- */
#topbar{transition:box-shadow .3s ease,background .3s ease}
#topbar h1{font-weight:800;letter-spacing:-.02em;font-feature-settings:"cv11","ss01"}
#topbar .tb-ic,#topbar #btnBack{transition:transform .15s var(--curva),background .15s}
#topbar .tb-ic:active,#topbar #btnBack:active{transform:scale(.88)}

/* ---------- floating nav: smoother active state ---------- */
@media (max-width:1023px){
  #nav{transition:transform .3s var(--curva),opacity .3s}
  #nav button .ico{transition:background .25s var(--curva),color .2s,transform .2s var(--curva),box-shadow .25s}
  #nav button.active .ico{box-shadow:0 4px 12px -2px color-mix(in srgb,var(--navy) 40%,transparent)}
  #nav button .rot{transition:color .2s,font-weight .1s}
}
/* nav hide/show animation */
body[data-navhidden="1"] #nav{transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none;transition:transform .25s ease-in,opacity .2s}
body:not([data-navhidden="1"]) #nav{transform:translateY(0);opacity:1}

/* ---------- cards: subtle lift on hover ---------- */
@media (hover:hover){
  .card.click:hover{box-shadow:var(--e3);transform:translateY(-1px)}
  .list .item.click:hover{background:var(--card2)}
}
.card{transition:transform .18s var(--curva),box-shadow .18s var(--curva),background .15s}

/* ---------- buttons: better press feedback ---------- */
:is(button,label).btn{transition:transform .14s var(--curva),box-shadow .14s,filter .14s}
:is(button,label).btn:active{transform:scale(.96);box-shadow:var(--e1);filter:brightness(.97)}
:is(button,label).btn.sec:active{transform:scale(.96);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}

/* ---------- inputs: native focus ring ---------- */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--navy) 12%,transparent);
  border-color:var(--navy);
}

/* ---------- modal/bottom-sheet: spring animation ---------- */
@keyframes sheetUp{
  0%{transform:translateY(100%);opacity:0}
  60%{transform:translateY(-2%);opacity:1}
  100%{transform:translateY(0)}
}
@keyframes modalPop{
  0%{transform:scale(.92) translateY(12px);opacity:0}
  60%{transform:scale(1.01) translateY(-1px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes backdropIn{
  from{backdrop-filter:blur(0) brightness(1);background:rgba(17,24,39,0)}
  to{backdrop-filter:blur(6px) brightness(.92);background:rgba(17,24,39,.5)}
}
.modalwrap{animation:backdropIn .25s ease-out both;backdrop-filter:blur(6px) brightness(.92);background:rgba(17,24,39,.5)}
:root[data-theme=dark] .modalwrap{background:rgba(0,0,0,.55)}
.modal{animation:modalPop .32s cubic-bezier(.175,.885,.32,1.1) both;box-shadow:var(--e4)}
.modal.folha{animation:sheetUp .34s cubic-bezier(.2,.9,.25,1) both}
@media (prefers-reduced-motion:reduce){
  .modalwrap{animation:none}.modal,.modal.folha{animation:none}
}

/* ---------- toast: refine ---------- */
#toast{border-radius:16px;box-shadow:var(--e4);font-weight:600;letter-spacing:-.005em;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ---------- hero section: subtle animation ---------- */
.hero{transition:box-shadow .3s}
.hero .kpi{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .15s var(--curva)}
.hero .kpi:active{transform:scale(.97)}

/* ---------- chips & tabs: pill polish ---------- */
.chip-b{transition:all .16s var(--curva);font-weight:650}
.chip-b:active{transform:scale(.95)}
.chip-b.on{font-weight:700;box-shadow:0 2px 8px -2px color-mix(in srgb,var(--navy) 50%,transparent)}
.tabs button{font-weight:700;transition:all .18s var(--curva)}
.tabs button.active{transform:scale(1.02)}

/* ---------- badges: micro polish ---------- */
.badge{font-weight:750;letter-spacing:.01em;border:1px solid transparent}
.badge.green{border-color:color-mix(in srgb,var(--dgreen) 18%,transparent)}
.badge.red{border-color:color-mix(in srgb,var(--dred) 18%,transparent)}
.badge.orange{border-color:color-mix(in srgb,var(--dorange) 18%,transparent)}
.badge.blue{border-color:color-mix(in srgb,var(--navy) 18%,transparent)}

/* ---------- empty states: better visual ---------- */
.empty{padding:32px 20px;text-align:center}
.empty .ico{margin:0 auto 12px;width:64px;height:64px;border-radius:50%;
  background:color-mix(in srgb,var(--navy) 8%,var(--card));
  display:flex;align-items:center;justify-content:center}
.empty .ico svg{width:32px;height:32px;stroke-width:1.5;color:color-mix(in srgb,var(--navy) 55%,var(--muted))}
.empty b{display:block;font-size:16px;font-weight:700;margin-bottom:4px;color:var(--text)}
.empty .muted{font-size:13.5px;line-height:1.5}

/* ---------- mlist (settings style): refinement ---------- */
.mlist{box-shadow:var(--e2);transition:box-shadow .2s}
.mlist .mi{transition:background .15s ease}
.mlist .mi > .ic{transition:transform .15s var(--curva)}
.mlist .mi:active > .ic{transform:scale(.9)}

/* ---------- segmented control: smoother ---------- */
.seg{background:color-mix(in srgb,var(--lgrey) 90%,transparent);border:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.seg button{font-weight:650}
.seg button.on{box-shadow:var(--e2);font-weight:700}

/* ---------- stat cards: gradient refinement ---------- */
.stat{transition:transform .15s var(--curva)}
.stat:active{transform:scale(.98)}
.stat b{font-weight:800}

/* ---------- list items: better touch feedback ---------- */
.list .item.click:active{transform:scale(.995)}
.list .item{transition:background .15s,transform .12s var(--curva)}

/* ---------- form fields: refined ---------- */
input,select,textarea{transition:border-color .2s,box-shadow .2s,background .15s}
select{cursor:pointer}

/* ---------- aula center button: glow refinement ---------- */
#nav button.navaula .ico{transition:transform .2s var(--curva),box-shadow .2s}
#nav button.navaula:hover .ico{box-shadow:0 10px 24px color-mix(in srgb,var(--navy) 50%,transparent),0 0 0 4px var(--bg)}

/* ---------- loading shimmer for async content ---------- */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skel{background:linear-gradient(90deg,var(--card2) 25%,color-mix(in srgb,var(--line) 40%,var(--card2)) 37%,var(--card2) 63%);
  background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:8px}

/* ---------- print: cleaner output ---------- */
@media print{
  .card{box-shadow:none!important;border:1px solid #ddd!important}
  #nav,#topbar,.btnrow,.modalwrap{display:none!important}
}

/* ---------- v21.1 — Exame final profissional ---------- */
table.tbl.exfin{font-size:13px}
table.tbl.exfin th{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding:8px 6px;border-bottom:2px solid color-mix(in srgb,var(--navy) 18%,transparent)}
table.tbl.exfin td{padding:10px 6px;vertical-align:middle}
table.tbl.exfin tr:hover td{background:color-mix(in srgb,var(--navy) 4%,transparent)}
table.tbl.exfin .exame-nota{width:64px;padding:6px 8px;border-radius:8px;border:1.5px solid color-mix(in srgb,var(--navy) 22%,transparent);background:var(--card);font-size:14px;font-weight:600;text-align:center;transition:border-color .15s,box-shadow .15s}
table.tbl.exfin .exame-nota:focus{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 12%,transparent);outline:none}
tr.exfin-rep td{opacity:.55;text-decoration:line-through;text-decoration-color:var(--dred)}
tr.exfin-rep td:first-child,tr.exfin-rep td:nth-child(2){text-decoration:none;opacity:.7}
.exfin-mf{font-weight:700;font-size:14px}
@media print{table.tbl.exfin .exame-nota{border:0;background:none;font-weight:700}}

/* ---------- smooth color transitions across themes ---------- */
:root{transition:background .3s ease,color .2s ease}
.card,.list,.mlist,.seg,.modal,.badge,.stat,.hero,.empty{transition-property:background,border-color,box-shadow,color;transition-duration:.25s;transition-timing-function:ease}