/* Menu lateral: recolher/expandir (Ctrl B), sombra sobre a pagina e animacao ao passar o mouse. */
.side { box-shadow: 4px 0 24px rgba(3, 31, 41, .18), 1px 0 0 rgba(3, 31, 41, .06); }
[data-theme="escuro"] .side { box-shadow: 4px 0 28px rgba(0, 0, 0, .55), 1px 0 0 rgba(255, 255, 255, .04); }
.app.anima .side { transition: width .38s cubic-bezier(.2, .8, .2, 1), padding .38s cubic-bezier(.2, .8, .2, 1), margin-right .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s ease; }

/* Botao de recolher, metade para fora da borda. */
.recolher { position: absolute; top: 30px; right: -13px; z-index: 2; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--color-surface); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-divider), 0 4px 12px rgba(3, 31, 41, .22); display: grid; place-items: center; cursor: pointer; opacity: .9; transition: transform .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease; }
.recolher:hover { opacity: 1; transform: scale(1.12); background: var(--color-accent-500); color: #fefefe; }
.recolher:focus-visible { outline: 2px solid #5fd0ee; outline-offset: 2px; }
.recolher .ph { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.app.recolhido .recolher .ph, .app.espia .recolher .ph { transform: rotate(180deg); }

/* Marca: logo inteiro aberto, simbolo recolhido (troca com fade). */
.side .marca { position: relative; }
.side .marca .simb { position: absolute; left: 50%; top: 4px; height: 26px; width: auto; transform: translateX(-50%) scale(.6); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.side .marca .logo, .side .marca span { transition: opacity .18s ease; }

/* Itens: fundo desliza da esquerda, icone cresce, barra de destaque no atual. */
.nav { position: relative; overflow: visible; isolation: isolate; transition: background-color .15s ease, color .15s ease, padding .28s cubic-bezier(.2, .8, .2, 1), gap .28s ease; }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgba(18, 169, 209, .22), rgba(18, 169, 209, .04)); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
.nav:hover { background: transparent; color: #fefefe; }
.nav:hover::before { transform: scaleX(1); opacity: 1; }
.nav .ph { transition: transform .22s cubic-bezier(.2, .8, .2, 1), color .15s ease; }
.nav:hover .ph { transform: scale(1.18) translateX(1px); color: #5fd0ee; }
.nav:active .ph { transform: scale(.94); }
.nav[aria-current="page"]::after { content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent-500); box-shadow: 0 0 10px rgba(18, 169, 209, .7); animation: menuBarra .3s cubic-bezier(.2, .8, .2, 1) both; }
.nav .rot { max-width: 240px; transition: opacity .2s ease, max-width .38s cubic-bezier(.2, .8, .2, 1), transform .32s cubic-bezier(.2, .8, .2, 1); }
.nav:focus-visible { outline: 2px solid #5fd0ee; outline-offset: -2px; }
.side .grupo > span { transition: opacity .18s ease, max-height .28s ease, padding .28s ease; max-height: 28px; overflow: hidden; white-space: nowrap; }

/* Recolhido */
.app.recolhido { --side-w: 72px; }
.app.recolhido .side { padding: 18px 10px 14px; }
.app.recolhido .side .marca .logo, .app.recolhido .side .marca span, .app.recolhido .nav .rot { opacity: 0; pointer-events: none; }
.app.recolhido .side .marca .simb { opacity: 1; transform: translateX(-50%) scale(1); }
.app.recolhido .side .grupo > span { opacity: 0; max-height: 0; padding-bottom: 0; }
.app.recolhido .side .grupo { gap: 4px; }
.app.recolhido .nav { padding: 0 15px; gap: 0; }
.app.recolhido .nav .rot { max-width: 0; transform: translateX(-14px); transition-delay: calc((7 - var(--n, 0)) * 16ms); }
.app.recolhido .nav .badge { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; font-size: calc(11.5px * var(--fs, 1)); padding: 0 5px; }
.app.recolhido .nav[aria-current="page"]::after { left: -10px; }
.app.recolhido .side .quem { flex-direction: column; padding: 10px 0 0; }
.app.recolhido .side .quem .nome { display: none; }

/* Dica com o nome do item quando recolhido. */

@keyframes menuBarra { from { transform: scaleY(0); opacity: 0 } to { transform: none; opacity: 1 } }
/* Dica fica fora do menu (position fixed) para a lista poder rolar em telas baixas. */
.menu-dica { position: fixed; z-index: 60; transform: translateY(-50%); padding: 7px 11px; border-radius: 8px; font: 500 calc(12.5px * var(--fs, 1)) var(--font-body); white-space: nowrap; pointer-events: none; animation: menuDica .18s cubic-bezier(.2, .8, .2, 1) both; }
.side nav { scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.app.recolhido .side nav { margin: 0 -10px; padding: 0 10px; }

@keyframes menuDica { from { opacity: 0; transform: translate(-6px, -50%) } to { opacity: 1; transform: translate(0, -50%) } }

.side nav { overflow-x: hidden; }

/* Espiar: com o menu recolhido, o mouse em cima abre o menu por cima da pagina (sem empurrar o conteudo) e ele recolhe ao sair.
   O JS tira .recolhido e poe .espia; a coluna segue em 72 px (margem negativa) e os itens entram em cascata. */
:root { --side-aberto: 236px; }
.app.espia { --side-w: 72px; }
.app.espia .side { width: var(--side-aberto); margin-right: calc(72px - var(--side-aberto)); box-shadow: 10px 0 36px rgba(3, 31, 41, .32), 1px 0 0 rgba(3, 31, 41, .06); }
[data-theme="escuro"] .app.espia .side { box-shadow: 10px 0 40px rgba(0, 0, 0, .7), 1px 0 0 rgba(255, 255, 255, .04); }
@keyframes menuItem { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
.app:not(.recolhido) .nav .rot, .app:not(.recolhido) .side .quem .nome, .app:not(.recolhido) .side .marca .logo, .app:not(.recolhido) .side .marca span { animation: menuItem .34s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n, 0) * 26ms + 50ms); }
.grupo > .nav:nth-of-type(1) { --n: 1 } .grupo > .nav:nth-of-type(2) { --n: 2 } .grupo > .nav:nth-of-type(3) { --n: 3 } .grupo > .nav:nth-of-type(4) { --n: 4 } .grupo > .nav:nth-of-type(5) { --n: 5 } .grupo > .nav:nth-of-type(6) { --n: 6 } .grupo > .nav:nth-of-type(n+7) { --n: 7 }