/* Estúdio ATP v1.5: navegação de materiais, caneta e câmera multiplataforma */
.stage-reader[hidden]{display:none!important}
.stage-reader{position:absolute;z-index:6;left:50%;bottom:10px;transform:translateX(-50%);width:min(94%,450px);display:grid;grid-template-columns:34px minmax(74px,1fr) 34px 34px 48px 34px;align-items:center;gap:5px;padding:7px 9px;border:1px solid #B7C9D2;border-radius:12px;background:rgba(255,255,255,.96);color:#11212D;box-shadow:0 9px 26px #11212D21;user-select:none;touch-action:manipulation}
.stage-reader button{font-size:16px;font-weight:700;border:1px solid #D0DEE4;background:#EDF3F6;color:#253745;border-radius:8px;min-width:30px;min-height:32px}
.stage-reader button:hover:not(:disabled){background:#D9E8EF}
.stage-reader button:disabled{opacity:.36;cursor:not-allowed}
#readerPage{font-size:11px;font-weight:750;text-align:center;white-space:nowrap}
#readerZoomLabel{font-size:10px;text-align:center;font-variant-numeric:tabular-nums}
.reader-scroll-label{grid-column:1 / 2;font-size:10px;color:#526674}
#readerScroll{grid-column:2/-1;max-width:100%;width:100%;accent-color:#253745;cursor:pointer;min-height:24px}
#readerScroll:disabled{opacity:.35}
.pen-quick-toggle{position:absolute;top:54px;right:12px;z-index:7;display:flex;align-items:center;gap:7px;border:1px solid #BACED9;border-radius:9px;padding:8px 10px;background:rgba(255,255,255,.94);color:#253745;font-weight:750;font-size:11px;box-shadow:0 5px 16px #11212D15;touch-action:manipulation}
.pen-quick-toggle.is-active{background:#253745;color:#FFFFFF;border-color:#253745}
.pen-quick-toggle>span:first-child{font-size:17px;line-height:1}
.pen-quick-toggle:hover{filter:brightness(.96)}
.pen-quick-toggle:focus-visible,.stage-reader button:focus-visible{outline:3px solid #7295A8;outline-offset:2px}
.camera-device-panel{display:grid;grid-template-columns:1fr;gap:8px;margin:-5px 0 18px;padding:11px;border-radius:10px;background:#F1F5F7;border:1px solid #D3E0E5}
.camera-device-panel label{font-size:11px;font-weight:750;color:#354B59}
.camera-device-panel select{width:100%;max-width:100%;border:1px solid #C4D3DA;background:#FFFFFF;color:#253745;padding:9px;border-radius:8px;font-size:12px}
.camera-switch-btn{min-height:37px;border-radius:8px;border:1px solid #BFCFD6;background:#FFFFFF;color:#253745;font-size:12px;font-weight:700}
.camera-switch-btn:hover{background:#E5EDF1}
.camera-device-status{font-size:10px;color:#526674;line-height:1.5;margin:2px 0 0}
.template-icon{position:relative}
.template-icon svg,.rail-icon svg,.source-icon svg{width:19px;height:19px;display:block;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.template-icon::after{content:'';position:absolute;right:2px;bottom:2px;width:10px;height:10px;background:url("assets/logo-azul-atp.webp") center/cover;border-radius:3px;opacity:.78;box-shadow:0 0 0 1px #FFFFFF80;pointer-events:none}
.rail-icon,.source-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.rail-icon{height:25px;width:25px}
.source-icon{height:18px;width:18px}
.rail-btn .rail-icon{font-size:0}
.template-card.is-active{box-shadow:inset 3px 0 0 #253745}
.stage .webcam-handle{z-index:5}
.stage-reader~.pen-quick-toggle{pointer-events:auto}
@media(max-width:750px){
 .stage-reader{bottom:5px;width:96%;padding:4px 5px;gap:3px;grid-template-columns:28px minmax(60px,1fr) 28px 28px 40px 28px;border-radius:9px}
 .stage-reader button{min-width:26px;min-height:27px;font-size:14px}
 #readerPage{font-size:9px}
 #readerZoomLabel{font-size:9px}
 .reader-scroll-label{font-size:9px}
 .pen-quick-toggle{top:33px;right:5px;font-size:9px;padding:6px}
 .pen-quick-toggle>span:first-child{font-size:13px}
 .stage .stage-top-label{top:5px;left:5px}
 .camera-device-panel{padding:11px 12px}
}
@media(max-width:360px){.pen-quick-toggle #penQuickLabel{max-width:65px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}

/* v1.5.2: controle da caneta na navegação lateral; câmera inline para WebKit/iOS. */
#penSideBtn .rail-icon svg{width:19px;height:19px;stroke-width:1.9;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
#penSideBtn.pen-side-active{background:#E2EDF3;border-color:#91ACBA;color:#11212D}
#penSideBtn.pen-side-active .rail-icon{color:#253745}
#penSideBtn[aria-pressed=true] small{font-weight:800}
.stage .webcam-handle{z-index:7;border:2px solid rgba(155,168,171,.95);background:#11212D;border-radius:50%;overflow:visible;}
.stage .webcam-handle.rounded{border-radius:18px}.stage .webcam-handle.square{border-radius:4px}
.stage .webcam-handle .site-camera-preview{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;pointer-events:none;background:#11212D}
.stage .webcam-handle .site-camera-preview[hidden]{display:none!important}
.stage .webcam-handle .handle-pill,.stage .webcam-handle .resize-knob{z-index:1;pointer-events:none}
.stage .recording-chip{z-index:8;pointer-events:none}
@media(max-width:750px){#penSideBtn{min-height:65px}#penSideBtn small{font-size:9px}.stage .webcam-handle .handle-pill{font-size:7px}}

/* v1.5.3: acesso à câmera junto à gravação, sem elementos flutuantes sobre a aula. */
.camera-record-btn{color:#253745;background:#EEF4F6;border:1px solid #C6D5DC;min-width:41px;flex-shrink:0}
.camera-record-btn.active{color:#17664F;background:#DCF2E9;border-color:#79B59F}
.camera-record-btn:focus-visible{outline:3px solid #55758B;outline-offset:3px}