:root{--background:#f6f7fb;--surface:#fff;--text:#182235;--primary:#234da4;--border:#bbc4d1}
body{margin:0;font-family:system-ui,sans-serif;background:var(--background);color:var(--text)}
main{max-width:760px;margin:5vh auto;padding:32px;background:var(--surface);border-radius:16px}
.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select,button{font:inherit;padding:10px;border-radius:6px;border:1px solid var(--border)}
button{background:var(--primary);color:var(--surface);cursor:pointer}a{color:var(--primary)}
[hidden]{display:none!important}#status{min-height:24px}p{line-height:1.5}
@media(max-width:600px){main{margin:0;border-radius:0;padding:24px;min-height:100vh;box-sizing:border-box}}
.form{display:flex;flex-direction:column;gap:14px;max-width:420px}
.form label{flex-direction:column;align-items:stretch;gap:4px}
.msg{min-height:1.5em;margin:0}.error{color:#a11d1d}
.social{display:flex;flex-direction:column;gap:8px;max-width:420px}
a.button{display:block;text-align:center;padding:10px;border:1px solid var(--border);border-radius:6px;text-decoration:none}
.brand{margin:0 0 8px;font-weight:600}
/* ---- Frequência (index.html): tokens verdes, claro/escuro ---- */
body.app{--bg:#f3f5f2;--sunk:#e9ede8;--ink:#1c2420;--muted:#5b6862;--line:#d9dfd9;--accent:#2c6a4b;--accent-soft:#dcebe2;--accent-ink:#fff;
--ok:#2b7a4b;--ok-soft:#dcefe3;--warn:#9b6a12;--warn-soft:#f6ead0;--bad:#b0413a;--bad-soft:#f6dedb;
--display:Georgia,"Times New Roman",serif;--body:"Segoe UI",system-ui,sans-serif;
--background:var(--bg);--text:var(--ink);--primary:var(--accent);--border:var(--line);--surface:#fff;
background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
@media (prefers-color-scheme:dark){body.app{--bg:#111613;--surface:#18201c;--sunk:#202a25;--ink:#e6ece8;--muted:#9aa8a1;--line:#2b3530;--accent:#72c197;--accent-soft:#1f3a2c;--accent-ink:#0e1a13;
--ok:#72cf98;--ok-soft:#1d3527;--warn:#e2b45c;--warn-soft:#3a2f17;--bad:#ee7e73;--bad-soft:#3d2220;color-scheme:dark}}
body.app main{max-width:1080px;margin:0 auto;padding:24px 0 48px;background:transparent;border-radius:0;min-height:0}
body.app h1{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 8px}
body.app .error{color:var(--bad)}
body.app input,body.app select{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:8px 10px;min-width:0}
body.app button{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
body.app a{color:var(--accent)}
body.app #members{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:16px}
#attendance{display:flex;flex-direction:column;gap:20px;margin-top:16px}
#attendance *{box-sizing:border-box}
#attendance h2{font-family:var(--display);font-weight:700;font-size:1.35rem;margin:0}
#attendance h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:700}
#attendance .top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
#attendance .pill{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
#attendance .pill.ok{background:var(--ok-soft);color:var(--ok)}#attendance .pill.warn{background:var(--warn-soft);color:var(--warn)}
#attendance .pill.bad{background:var(--bad-soft);color:var(--bad)}#attendance .pill.acc{background:var(--accent-soft);color:var(--accent)}
#attendance .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
#attendance .tabs button{background:transparent;color:var(--muted);border:0;border-bottom:3px solid transparent;border-radius:0;font-weight:700;padding:10px 14px;white-space:nowrap}
#attendance .tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
#attendance .btn{font-weight:700;border-radius:8px;padding:8px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
#attendance .btn:hover:not(:disabled){border-color:var(--accent)}
#attendance .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#attendance .btn.danger{color:var(--bad)}#attendance .btn.danger.armed{background:var(--bad);border-color:var(--bad);color:var(--surface)}
#attendance .btn:disabled{opacity:.5;cursor:not-allowed}#attendance .btn.sm{padding:5px 10px;font-size:.88rem}
#attendance :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#attendance .panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px}
#attendance .notice{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:14px 16px;color:var(--muted)}
#attendance .notice strong{color:var(--ink)}
#attendance .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#attendance .stack{display:flex;flex-direction:column;gap:20px}
#attendance .muted{color:var(--muted)}#attendance .small{font-size:.88rem}#attendance .num{font-variant-numeric:tabular-nums}
#attendance p{margin:6px 0 0}
#attendance .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
#attendance .kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
#attendance .kpi .v{font-family:var(--display);font-size:2.2rem;font-weight:700;line-height:1.05}
#attendance .kpi .s{color:var(--muted);font-size:.9rem}
#attendance .kpi.lead{background:var(--accent-soft);border-color:transparent}#attendance .kpi.lead .v{color:var(--accent)}
#attendance .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
#attendance .bar{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden;flex:1;min-width:60px}
#attendance .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
#attendance .bar.ok i{background:var(--ok)}#attendance .bar.warn i{background:var(--warn)}#attendance .bar.bad i{background:var(--bad)}
#attendance .classes{display:flex;flex-direction:column;gap:14px;margin-top:14px}
#attendance .cls{display:grid;grid-template-columns:minmax(60px,110px) 1fr auto;gap:12px;align-items:center}
#attendance .tablewrap{overflow-x:auto;margin-top:12px}
#attendance table{width:100%;border-collapse:collapse;font-size:.95rem}
#attendance th{text-align:left;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
#attendance td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
#attendance tr:last-child td{border-bottom:0}
#attendance tr.clickable{cursor:pointer}#attendance tr.clickable:hover td{background:var(--sunk)}
#attendance .freqcell{display:flex;align-items:center;gap:10px;min-width:160px}
#attendance .freqcell span{min-width:42px;text-align:right;font-weight:700}
#attendance .listhead{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
#attendance .empty{padding:28px 12px;text-align:center;color:var(--muted)}
#attendance label.f{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:.92rem;align-items:stretch;max-width:360px}
#attendance form{display:flex;flex-direction:column;gap:12px}
#attendance .checks{display:flex;gap:8px;flex-wrap:wrap}
#attendance .chk{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:500}
#attendance .chk input{accent-color:var(--accent);width:16px;height:16px;padding:0}
#attendance .hall{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}#attendance .hall input{width:130px}
#attendance .week{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
#attendance .week .lbl{font-family:var(--display);font-size:1.2rem;font-weight:700}
#attendance .daytabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
#attendance .daytab{text-align:left;cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}
#attendance .daytab[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#attendance .daytab:disabled{opacity:.45;cursor:not-allowed}
#attendance .daytab .d{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}#attendance .daytab .dt{color:var(--muted);font-size:.88rem}
#attendance .roll{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;margin-top:14px}
#attendance .who{cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:0}
#attendance .who .mk{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:transparent}
#attendance .who[aria-pressed=true]{border-color:var(--ok);background:var(--ok-soft)}
#attendance .who[aria-pressed=true] .mk{background:var(--ok);border-color:var(--ok);color:var(--surface)}
#attendance .who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#attendance .who:disabled{cursor:default}
#attendance .rollbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#attendance .enroll{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){#attendance .enroll{grid-template-columns:1fr}}
#attendance .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:500;z-index:20;max-width:calc(100% - 32px)}
#attendance .item{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
#attendance .item:last-child{border-bottom:0}
@media (max-width:520px){#attendance .cls{grid-template-columns:60px 1fr auto}}
#attendance .copy{display:flex;flex-direction:column;gap:6px;margin-top:10px}#attendance .copy p{margin:0}
.admin-main{max-width:900px}.admin-main nav{justify-content:flex-start;margin:24px 0}.admin-card{border:1px solid var(--border);border-radius:10px;padding:16px;margin:12px 0}.admin-card h2{font-size:1.1rem;margin:0}.admin-card p{margin:8px 0}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-actions button{padding:8px 12px}#more{margin-top:12px}
.admin-search{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.admin-search label{display:flex;flex-direction:column;align-items:start}
/* Shared operating surfaces carry the attendance palette through account and administration. */
body:not(.app){--bg:#f3f5f2;--surface:#fff;--sunk:#e9ede8;--ink:#1c2420;--muted:#5b6862;--line:#d9dfd9;--accent:#2c6a4b;--accent-soft:#dcebe2;--accent-ink:#fff;--bad:#a3322b;--background:var(--bg);--text:var(--ink);--primary:var(--accent);--border:var(--line);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.5}
@media (prefers-color-scheme:dark){body:not(.app){--bg:#111613;--surface:#18201c;--sunk:#202a25;--ink:#e6ece8;--muted:#aab8b0;--line:#35423b;--accent:#72c197;--accent-soft:#1f3a2c;--accent-ink:#0e1a13;--bad:#ee8d83;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
body{min-width:0;overflow-wrap:break-word}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input,select,button{min-height:44px}
input,select{background:var(--surface);color:var(--ink);border-color:var(--line);min-width:0}
input:focus-visible,select:focus-visible{border-color:var(--accent)}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--accent)}
button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button:hover:not(:disabled){filter:brightness(.93)}
button:disabled{opacity:.55;cursor:not-allowed}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
body:not(.app) main{max-width:760px;margin:clamp(24px,6vh,64px) auto;padding:clamp(24px,4vw,40px);border:1px solid var(--line);background:var(--surface);border-radius:16px}
body:not(.app) h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.8rem,4vw,2.3rem);line-height:1.15;margin:0 0 24px}
body:not(.app) h2{line-height:1.25}
body:not(.app) .brand{color:var(--accent);font-size:.9rem;letter-spacing:.02em;margin:0 0 24px}
body:not(.app) .form{gap:16px}
body:not(.app) .form label{font-weight:600;font-size:.92rem;gap:6px}
body:not(.app) .form input{width:100%}
body:not(.app) .form button{margin-top:4px}
body:not(.app) .msg:empty{display:none}
body:not(.app) .error{color:var(--bad)}
body:not(.app) .social{margin-top:20px}
body:not(.app) a.button{background:var(--sunk);color:var(--ink);font-weight:600}
body:not(.app) #view > p:last-child{margin-top:24px}
body.app main{padding-top:32px}
body.app #status{color:var(--muted);margin:0 0 20px}
body.app .toolbar{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:flex-start;gap:12px 24px}
body.app .toolbar #user{font-weight:600;margin-right:auto}
body.app .toolbar label{color:var(--muted);font-size:.9rem}
body.app .toolbar a{font-size:.92rem;font-weight:600}
body.app .toolbar button{padding-inline:16px}
#attendance{margin-top:28px;gap:20px}
#attendance .tabs{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#attendance .tabs button:hover{color:var(--ink)}
#attendance .panel,#attendance .kpi,#attendance .notice,#attendance .daytab{border-radius:12px}
#attendance .tablewrap{overscroll-behavior-inline:contain}
.admin-main header > a{font-weight:600;font-size:.9rem}
.admin-main header h1{margin:24px 0 8px}
.admin-main header p{color:var(--muted);margin:0}
.admin-main nav{gap:4px;border-bottom:1px solid var(--line);margin:28px 0 24px}
.admin-main nav button{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:10px 16px}
.admin-main nav button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--accent)}
.admin-search{padding:16px;background:var(--sunk);border-radius:12px}
.admin-search label{font-size:.9rem;font-weight:600;gap:6px;align-items:stretch}
.admin-search label:first-child{flex:1;min-width:min(100%,240px)}
.admin-card{border-color:var(--line);border-radius:12px;padding:20px;overflow-wrap:anywhere}
.admin-card p{color:var(--muted)}
.admin-actions button{background:var(--surface);color:var(--ink);border-color:var(--line)}
#admin-status{color:var(--muted)}
@media(max-width:600px){body:not(.app) main{margin:0;min-height:100vh;border:0;border-radius:0;padding:24px 20px}body.app main{padding-top:24px}body.app .toolbar{gap:12px}body.app .toolbar #user{width:100%}body.app .toolbar label{flex:1 1 100%}body.app .toolbar select{flex:1}#attendance .tabs{margin-right:-16px}#attendance .panel{padding:16px}.admin-search label,.admin-search button{width:100%}}

/* Warm operating palette from DESIGN.md: quiet surfaces, clear action and state. */
body.app,body:not(.app){--bg:#f4eee7;--surface:#fffaf3;--sunk:#ebe3d9;--ink:#211811;--muted:#65584d;--line:#e3dbd2;--accent:#a53b00;--accent-soft:#f9dfcb;--accent-ink:#100904;--ok:#28623e;--ok-soft:#dcebdd;--warn:#805400;--warn-soft:#f7e8bf;--bad:#a12724;--bad-soft:#f7ddda;--background:var(--bg);--text:var(--ink);--primary:var(--accent);--border:var(--line);background:var(--bg);color:var(--ink);color-scheme:light}
button,body.app button,#attendance .btn.primary{background:#dc5000;border-color:#dc5000;color:#100904}
body:not(.app) a.button,#attendance .btn,#attendance .daytab,#attendance .who,.admin-actions button{background:var(--surface);color:var(--ink);border-color:var(--line)}
#attendance .tabs button,.admin-main nav button{background:transparent;color:var(--muted)}
#attendance .tabs button[aria-selected=true],.admin-main nav button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--accent)}
#attendance .btn.danger{color:var(--bad)}
#attendance .btn.danger.armed{background:var(--bad);border-color:var(--bad);color:#100904}
#attendance .who[aria-pressed=true]{background:var(--ok-soft);border-color:var(--ok)}
#attendance .who[aria-pressed=true] .mk{background:var(--ok);border-color:var(--ok);color:#100904}
input,select,textarea{caret-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* Dashboard: visual hierarchy and data marks use the same warm palette. */
#attendance .tabs{gap:8px}
#attendance .tabs button{display:inline-flex;align-items:center;gap:8px;min-height:48px}
#attendance .tab-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#attendance .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#attendance .kpi{min-height:160px;justify-content:space-between;padding:20px}
#attendance .kpi.lead{background:#ffedd7;border:1px solid #ead8c4}
#attendance .kpi .v{font-size:2.35rem;line-height:1.1}
#attendance .metric-track{margin-top:10px}
#attendance .metric-track .bar{height:7px;background:#e1cdbb}
#attendance .panel{padding:24px}
#attendance .panel h2{margin-bottom:12px}
#attendance .panel > .v{font-family:var(--display);font-size:2.1rem;font-weight:700;line-height:1.1}
#attendance .panel-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
#attendance .panel-head h2,#attendance .panel-head p{margin:0}
#attendance .classes{gap:0;margin-top:0}
#attendance .cls{grid-template-columns:minmax(200px,240px) 1fr auto;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
#attendance .cls:last-child{border-bottom:0;padding-bottom:2px}
#attendance .cls-info{display:flex;flex-direction:column;gap:2px;min-width:0}
#attendance .cls-name{font-weight:700;font-size:1rem;color:var(--ink)}
#attendance .cls-meta{font-size:.86rem;color:var(--muted);line-height:1.35}
#attendance .cls .bar{height:12px;min-width:80px}
#attendance .cls-stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:115px;text-align:right}
#attendance .cls-pct{font-family:var(--display);font-size:1.4rem;font-weight:700;line-height:1.1;color:var(--ink)}
#attendance .cls-pct.muted{color:var(--muted);font-family:var(--body);font-size:1.05rem;font-weight:600}
#attendance .cls-lbl{font-size:.8rem;color:var(--muted)}
#attendance .distribution{display:flex;height:10px;overflow:hidden;border-radius:99px;background:var(--sunk);margin:20px 0 4px}
#attendance .distribution .ok{background:var(--ok)}
#attendance .distribution .warn{background:var(--warn)}
#attendance .distribution .bad{background:var(--bad)}
#attendance th{padding-top:14px;padding-bottom:14px}
#attendance td{padding-top:14px;padding-bottom:14px}
@media(max-width:800px){#attendance .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#attendance .cls{grid-template-columns:1fr auto;gap:10px}#attendance .cls .bar{grid-column:1/-1}}
@media(max-width:520px){#attendance .kpi{min-height:145px;padding:16px}#attendance .kpi .v{font-size:1.9rem}#attendance .panel{padding:18px}#attendance .listhead .row{gap:6px}}

/* Compact workspace header keeps the brand and navigation in one line. */
body.app .app-header{display:flex;align-items:center;gap:32px;padding:18px 20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px}
body.app .app-header h1{display:flex;align-items:center;gap:10px;flex:none;margin:0;font-size:1.8rem;line-height:1}
body.app .brand-mark{display:block;width:32px;height:32px;flex:none}
body.app .toolbar{flex:1;padding:0;border:0;justify-content:flex-end;gap:12px 20px}
body.app .toolbar #user{width:auto;margin:0;color:var(--muted);font-size:.85rem;font-weight:400;overflow-wrap:anywhere}
body.app .toolbar label{flex:0 1 auto}
body.app .toolbar select{max-width:min(300px,100%)}
body.app .toolbar #logout{background:transparent;border-color:#c9bbae;color:var(--ink)}
body.app .toolbar a{color:var(--ink);font-weight:500}
body.app .toolbar label{color:var(--muted)}
body.app #status{min-height:0;margin:12px 0 0}
body.app #status:empty{display:none}
#attendance{margin-top:16px}
#attendance > .row:empty,#attendance > .stack:empty{display:none}
@media(max-width:800px){body.app .app-header{align-items:flex-start;flex-wrap:wrap;gap:16px}body.app .toolbar{flex:1 1 100%;justify-content:flex-start}}
@media(max-width:600px){body.app .toolbar label{flex:1 1 100%}body.app .toolbar select{flex:1;max-width:100%}body.app .toolbar #user{margin-left:auto}}

/* Dashboard reading order: period, hall, classes, people. */
#attendance .dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#attendance .dashboard-heading h2{margin:0;font-size:1.7rem;line-height:1.15}
#attendance .dashboard-period{gap:10px}
#attendance .dashboard-subnav{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px}
#attendance .dashboard-subnav button{background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 12px;font-weight:700}
#attendance .dashboard-subnav button[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
#attendance .overlap-bar{display:flex;align-items:stretch;width:100%;min-height:42px;margin:4px 0 16px;overflow:hidden;border-radius:7px;background:var(--sunk);color:#fff;font-size:.78rem;font-weight:700}
#attendance .overlap-segment{display:flex;box-sizing:border-box;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;container-type:inline-size}
#attendance .segment-percent{font-size:clamp(.56rem,.78rem,1rem);font-variant-numeric:tabular-nums;white-space:nowrap}
@container (max-width:32px){#attendance .segment-percent{display:none}}
#attendance .overlap-segment.only-a{background:#79543d}
#attendance .overlap-segment.both{background:#82917a}
#attendance .overlap-segment.only-b{background:#bc8060}
#attendance .overlap-swatch.only-a{background:#79543d}
#attendance .overlap-swatch.both{background:#82917a}
#attendance .overlap-swatch.only-b{background:#bc8060}
#attendance .overlap-zero{align-self:center;margin:auto;padding:0 12px;color:var(--muted);font-size:.86rem;font-weight:500}
#attendance .overlap-counts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
#attendance .overlap-counts li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px 10px;color:var(--muted);font-size:.88rem}
#attendance .overlap-swatch{width:10px;height:10px;border-radius:2px}
#attendance .overlap-counts .overlap-label{overflow-wrap:anywhere}
#attendance .overlap-counts strong{font-weight:600;color:var(--ink)}
#attendance .overlap-note{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;line-height:1.5}
#attendance .trend-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:14px 0 0;padding:0;list-style:none}
#attendance .trend-swatch{width:9px;height:9px;border-radius:50%;flex:none}
#attendance .trend-panel{padding:clamp(20px,3vw,32px)}
#attendance .trend-chart{display:block;width:100%;height:auto;max-height:420px;overflow:visible}
#attendance .chart-grid{stroke:var(--line);stroke-width:1}
#attendance .chart-label{fill:var(--muted);font:12px var(--body)}
#attendance .trend-line{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
#attendance .trend-point{fill:var(--surface);stroke-width:3}
#attendance .trend-legend li{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.84rem}
#attendance .trend-line.series-0,#attendance .trend-point.series-0{stroke:#79543d}#attendance .trend-swatch.series-0{background:#79543d}
#attendance .trend-line.series-1,#attendance .trend-point.series-1{stroke:#bc8060}#attendance .trend-swatch.series-1{background:#bc8060}
#attendance .trend-line.series-2,#attendance .trend-point.series-2{stroke:#82917a}#attendance .trend-swatch.series-2{background:#82917a}
#attendance .trend-line.series-3,#attendance .trend-point.series-3{stroke:#b38b49}#attendance .trend-swatch.series-3{background:#b38b49}
#attendance .trend-line.series-4,#attendance .trend-point.series-4{stroke:#705e75}#attendance .trend-swatch.series-4{background:#705e75}
#attendance .trend-line.series-5,#attendance .trend-point.series-5{stroke:#587a86}#attendance .trend-swatch.series-5{background:#587a86}
#attendance .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
#attendance .kpi.lead{grid-column:span 2;min-height:210px;padding:24px}
#attendance .kpi.lead .v{font-size:3rem}
#attendance .kpi.wide{grid-column:span 2;padding:24px}
#attendance .kpi.wide .v{font-size:2.55rem}
#attendance .hall-note{font-size:.82rem;line-height:1.4;color:var(--muted);margin:4px 0 0}
#attendance .kpi:not(.lead){min-height:210px}
@media(max-width:800px){#attendance .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#attendance .kpi.lead{grid-column:1/-1;min-height:0}#attendance .kpi.wide{grid-column:span 1;padding:20px}#attendance .kpi:not(.lead){min-height:160px}}
@media(max-width:520px){#attendance .dashboard-heading{align-items:flex-start;flex-direction:column}#attendance .kpis{grid-template-columns:1fr}#attendance .kpi.lead,#attendance .kpi.wide{grid-column:auto;padding:20px}#attendance .kpi.lead .v{font-size:2.5rem}#attendance .kpi:not(.lead){min-height:0;gap:8px}}
@media(max-width:680px){#attendance .overlap-bar{min-height:52px;font-size:.66rem}#attendance .trend-chart{min-height:230px}}
@media(max-width:520px){#attendance .chart-label{font-size:34px}}
@media(max-width:380px){#attendance .chart-label{font-size:40px}}

/* Organização de turmas e períodos. */
#attendance .setup-section{padding:24px}
#attendance .setup-heading{margin-bottom:18px}
#attendance .setup-heading p{max-width:65ch}
#attendance .setup .item{gap:16px;align-items:center}
#attendance .setup .item b{overflow-wrap:anywhere}
#attendance .setup-disclosure{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
#attendance .setup-disclosure>summary{cursor:pointer;font-weight:700;color:var(--ink);list-style-position:inside}
#attendance .setup-disclosure>summary:hover{color:var(--accent)}
#attendance .setup-form{max-width:680px;padding-top:16px}
#attendance .setup-form form{gap:14px}
#attendance .setup-form label.f{max-width:none}
#attendance .setup-form .row>label.f{flex:1 1 160px}
#attendance .setup-form .chk{align-self:flex-start;line-height:1.4}
#attendance .setup-secondary{margin-top:0;padding:20px 24px;border:1px solid var(--line)}
#attendance .setup-close p{max-width:70ch}
@media(max-width:600px){
  #attendance .setup-section{padding:18px}
  #attendance .setup .item{align-items:flex-start}
  #attendance .setup .item .row{gap:8px}
  #attendance .setup-secondary{padding:18px}
}

#attendance .enroll-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#attendance .bulk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 14px;background:var(--accent-soft);border:1px solid var(--line);border-radius:10px}
#attendance .chk-inline{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}
#attendance .icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;min-height:36px}
#attendance dialog.person-dialog{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--surface);color:var(--ink);max-width:440px;width:calc(100% - 32px);box-shadow:0 16px 40px rgba(0,0,0,.18)}
#attendance dialog.person-dialog::backdrop{background:rgba(16,9,4,.45)}

/* Membros: hierarquia de acesso e ações do espaço. */
body.app #members{padding:24px;margin-top:28px;border-radius:12px}
#members .members-heading h2{font-family:var(--display);font-size:1.35rem;margin:0}
#members .members-heading p,#members .members-description,#members .member-disclosure > p{color:var(--muted);margin:6px 0 0}
#members .msg:empty,#members .member-created:empty{display:none}
#members .msg:not(:empty){margin-top:14px}
#members .members-list,#members .invites-list{list-style:none;margin:16px 0 0;padding:0}
#members .member-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
#members .member-row:first-child{border-top:1px solid var(--line)}
#members .member-identity{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
#members .member-email{color:var(--muted);font-size:.9rem}
#members .member-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#members .member-role{font-size:.9rem;color:var(--muted);text-transform:capitalize}
#members .member-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
#members .member-danger{color:var(--bad)}
#members .member-empty{padding:16px 0;color:var(--muted)}
#members .member-leave{margin-top:16px}
#members .members-section{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
#members .members-section h3{font-family:var(--display);font-size:1.2rem;margin:0}
#members .members-section h4{font-size:.95rem;margin:24px 0 0}
#members .member-disclosure{margin-top:16px}
#members .member-disclosure summary{cursor:pointer;font-weight:600;color:var(--accent);width:fit-content;padding:8px 0}
#members .member-form{margin-top:16px;max-width:480px}
#members .member-form label{font-size:.92rem;font-weight:600;gap:6px}
#members .member-form button{align-self:flex-start}
#members .member-created{margin-top:16px;padding:16px;background:var(--sunk);border-radius:8px}
#members .member-created p{margin:0 0 8px}
#members .member-created input{width:100%}
@media(max-width:600px){body.app #members{padding:18px}#members .member-row{align-items:flex-start;flex-direction:column;gap:10px}#members .member-actions{width:100%}#members .member-actions select{flex:1}#members .member-form{max-width:none}#members .member-form button{width:100%}}