/* ===== Navegação no rodapé (prévia) =====
   Sem barra lateral: a tela inteira fica para o conteúdo e o menu vira uma barra flutuante no rodapé,
   com as telas principais do perfil e o restante em "Mais". Logo, perfil e tema sobem para o topo.
   Padrão desde 04/11/2026; ?layout=lateral na URL volta para a barra lateral. */
.dockbar{display:none}
.dock #sidebar,.dock .mobile,.dock footer{display:none}
.dock .shell{margin-left:0}
.dock main{max-width:1240px;padding-bottom:128px}

/* Topo: logo, onde estou e o perfil */
.dock header{padding:0 28px;gap:18px}
.dock header .brand{margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--text);font-size:14px;font-weight:650;gap:10px;flex:none}
.dock header .brand .mark{width:32px;height:32px;border-radius:9px}
.dock header .brand img{width:26px;height:26px}
.dock header .brand small{display:none}
.dock .crumb{margin-right:auto;padding-left:18px;border-left:1px solid var(--line)}
.dock .profile{gap:8px}
.dock .profile .usercard{padding:3px 12px 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.dock .profile .usercard .avatar{width:30px;height:30px;border-radius:50%;font-size:11px}
.dock .profile .usercard .who b{font-size:12.5px;color:var(--text)}
.dock .profile .usercard .who select{color:var(--text-3)}
.dock .profile .sidebtn{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:12.5px;white-space:nowrap}
.dock .profile .sidebtn:hover{color:var(--text);border-color:var(--hover);background:var(--subtle)}

/* A barra */
.dock .dockbar{display:flex;align-items:center;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;gap:2px;padding:6px;
 background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 border:1px solid var(--line-strong,var(--line));border-radius:22px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 22px 50px -20px rgba(0,0,0,.6)}
.dockbar a,.dockbar>.dock-mais>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:84px;height:58px;padding:0 12px;border:0;border-radius:16px;background:none;color:var(--text-3);font-size:11.5px;font-weight:600;letter-spacing:.1px;transition:background .15s,color .15s}
.dockbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.dockbar a:hover,.dockbar>.dock-mais>button:hover{background:var(--subtle);color:var(--text)}
.dockbar a.active,.dockbar>.dock-mais>button.active{background:var(--accent-soft);color:var(--text)}
.dockbar a.active svg,.dockbar>.dock-mais>button.active svg{color:var(--accent)}
.dockbar a.active:after,.dockbar>.dock-mais>button.active:after{content:'';position:absolute;bottom:5px;left:50%;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:var(--accent)}
.dock-sep{width:1px;height:30px;margin:0 4px;background:var(--line)}

/* "Mais": as demais telas, agrupadas */
.dock-mais{position:relative}
.dock-pop{position:absolute;right:0;bottom:calc(100% + 14px);min-width:250px;padding:8px;background:var(--raised,var(--surface));border:1px solid var(--line-strong,var(--line));border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);animation:dockpop .16s ease-out}
.dock-pop .navlabel{margin:10px 10px 4px;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-3)}
.dock-pop .navlabel:first-child{margin-top:4px}
.dock-pop a{flex-direction:row;justify-content:flex-start;gap:12px;min-width:0;height:42px;padding:0 12px;border-radius:12px;font-size:13.5px;color:var(--text-2)}
.dock-pop a.active:after{display:none}
.dock-pop svg{width:18px;height:18px}
@keyframes dockpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dock-pop{animation:none}}

.dock #toast{bottom:104px}

.dockbar a span,.dockbar>.dock-mais>button span{white-space:nowrap}
/* Telas médias: topo mais enxuto e barra com rótulos menores */
@media(max-width:1100px){
 .dock .crumb{display:none}
 .dock .profile .usercard .who b{display:none}
 .dockbar a,.dockbar>.dock-mais>button{min-width:70px;padding:0 8px;font-size:11px}
}
@media(max-width:860px){
 .dock header .brand>div{display:none}
 .dock .profile #resetDemo{display:none}
}
/* Celular: barra de ponta a ponta, só ícone + rótulo curto */
@media(max-width:700px){
 .dock header{padding:0 14px;gap:10px}
 .dock header .brand>div,.dock .crumb,.dock .profile .usercard .who b{display:none}
 .dock .profile #resetDemo{display:none}
 .dock main{padding-bottom:108px}
 .dock .dockbar{left:8px;right:8px;bottom:8px;transform:none;justify-content:space-between;border-radius:20px;padding:5px}
 .dockbar a,.dockbar>.dock-mais>button{flex:1;min-width:0;height:56px;padding:0 2px;font-size:10.5px;border-radius:14px}
 .dockbar>.dock-mais{flex:1;display:flex}
 .dockbar>.dock-mais>button{width:100%}
 .dock-sep{display:none}
 .dock-pop{right:-3px;min-width:min(280px,calc(100vw - 16px))}
 .dock #toast{bottom:84px}
}

/* Todas as telas na barra: se não couber, a barra rola para o lado (sem barra de rolagem visível) */
.dock .dockbar{max-width:calc(100vw - 24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.dock .dockbar::-webkit-scrollbar{display:none}
.dockbar a{flex:none;scroll-snap-align:center}
@media(max-width:700px){
 .dock .dockbar{justify-content:flex-start;max-width:none}
 .dockbar a{flex:none;width:72px;min-width:72px}
}

/* ===== Vidro líquido: fundo translúcido que desfoca o conteúdo por trás, com brilho na borda ===== */
.dock .dockbar{border-radius:26px;padding:6px;
 background:linear-gradient(180deg,rgba(44,46,54,.58),rgba(20,21,26,.5));
 -webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
 border:1px solid rgba(255,255,255,.14);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.04),0 18px 50px -16px rgba(0,0,0,.75);
 transition:transform .38s cubic-bezier(.2,.9,.25,1),opacity .25s ease}
:root[data-theme=light].dock .dockbar{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.5));border-color:rgba(255,255,255,.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),0 0 0 .5px rgba(15,23,42,.08),0 14px 44px -14px rgba(15,23,42,.35)}
.dockbar a,.dockbar .dock-pin{border-radius:20px}
.dockbar a:hover{background:rgba(255,255,255,.08)}
.dockbar a.active{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
:root[data-theme=light] .dockbar a:hover{background:rgba(255,255,255,.55)}
:root[data-theme=light] .dockbar a.active{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 2px 8px -3px rgba(15,23,42,.18)}

/* Fixar a barra */
.dock-pin{flex:none;display:grid;place-items:center;width:40px;height:58px;border:0;background:none;color:var(--text-3)}
.dock-pin svg{width:18px;height:18px}
.dock-pin:hover{color:var(--text)}
.dock-pin[aria-pressed=true]{color:var(--accent)}
.dock-pin[aria-pressed=true] svg{fill:currentColor;fill-opacity:.18}

/* Esconde até o mouse chegar ao rodapé (só onde existe mouse). Uma alça fina mostra onde ela está. */
.dock-zona{display:none}
@media(hover:hover) and (pointer:fine){
 .dock .dock-zona{display:block;position:fixed;left:0;right:0;bottom:0;height:26px;z-index:9}
 .dock .dock-zona i{position:absolute;left:50%;bottom:8px;width:64px;height:5px;margin-left:-32px;border-radius:5px;background:var(--text-3);opacity:.45;transition:opacity .25s}
 .dock.dock-fixo .dock-zona,.dock.dock-ver .dock-zona i{display:none}
 .dock:not(.dock-fixo) main{padding-bottom:56px}
 .dock:not(.dock-fixo):not(.dock-ver) .dockbar:not(:focus-within){transform:translateX(-50%) translateY(calc(100% + 40px));opacity:0;pointer-events:none}
}
@media(hover:hover) and (pointer:fine) and (max-width:700px){
 .dock:not(.dock-fixo):not(.dock-ver) .dockbar:not(:focus-within){transform:translateY(calc(100% + 40px))}
}
@media(prefers-reduced-motion:reduce){.dock .dockbar{transition:opacity .2s}}
@media(hover:none){.dock-pin,.dockbar .dock-sep{display:none}}

/* ===== Topo dentro da barra: logo no começo, perfil no fim ===== */
.dock header{display:none}
.dock main{padding-top:40px}
.dock .dockbar{overflow:visible;max-width:calc(100vw - 24px)}
.dock-itens{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.dock-itens::-webkit-scrollbar{display:none}
.dock-logo{flex:none;display:grid!important;place-items:center;width:46px!important;min-width:46px!important;height:46px!important;margin:0 4px 0 2px;padding:0!important;border-radius:14px!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.dock-logo img{width:30px;height:30px;object-fit:contain}
.dock-logo:after{display:none!important}
.dock-perfil{position:relative;flex:none;margin-left:4px}
.dock-avatar{display:grid;place-items:center;width:46px;height:46px;margin-right:2px;border-radius:50%;border:1px solid var(--accent-line,var(--line));background:var(--accent-soft);color:var(--accent-text);font-size:12px;font-weight:700;letter-spacing:.3px}
.dock-avatar[aria-expanded=true]{box-shadow:0 0 0 3px var(--accent-soft)}
.perfil-pop{right:-6px;min-width:280px;display:grid;gap:6px;padding:10px}
.perfil-pop[hidden]{display:none}
.perfil-pop .usercard{display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:12px;background:var(--subtle)}
.perfil-pop .usercard .avatar{width:36px;height:36px;border-radius:50%;font-size:12px}
.perfil-pop .usercard .who b{display:block!important;font-size:13px;color:var(--text)}
.perfil-pop .usercard .who select{color:var(--text-2);background:transparent;border:0;padding:0}
.perfil-pop .sidebtn{display:flex!important;width:100%;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--text-2);font-size:13px;font-weight:600}
.perfil-pop .sidebtn:hover{background:var(--subtle);color:var(--text)}
.perfil-pop .demo{display:flex!important;margin-top:2px;padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.35;white-space:normal}
.dock #toast{bottom:108px}
@media(max-width:700px){
 .dock main{padding-top:24px}
 .dock .dockbar{max-width:none;padding:5px}
 .dock-logo{display:none!important}
 .dock-itens{flex:1}
 .dock-avatar{width:42px;height:42px}
 .perfil-pop{min-width:min(280px,calc(100vw - 24px))}
}

/* ===== Ficha do aluno com o histórico ao lado; área útil maior em telas largas ===== */
.dock main{max-width:1440px}
.ficha-hist{display:none}
@media(min-width:1180px){
 .ficha-corpo{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
 .ficha-hist{display:block;position:sticky;top:24px;max-height:calc(100vh - 150px);overflow:auto;padding:20px 22px;overscroll-behavior:contain}
 .ficha-corpo .tabs [data-tab=hist]{display:none}
}
.ficha-hist h3{margin:0 0 2px;font-size:15px}
.ficha-hist>small{display:block;margin-bottom:16px;font-size:12px}
.ficha-hist .event small b{color:var(--text-2);font-weight:600}
/* Monitores grandes: tudo um pouco maior para ler melhor e ocupar a largura */
@media(min-width:1500px){html.dock{zoom:1.08}}
@media(min-width:1800px){html.dock{zoom:1.15}}
/* Os quadros laterais da ficha são <aside>, como o antigo menu lateral: tira o tamanho e a posição fixos herdados dele */
.ficha-corpo aside{width:auto;inset:auto;z-index:auto;transform:none}
.ficha-corpo aside.checklist,.ficha-corpo aside.ficha-hist{top:24px}