/* Geometria dos layouts 3 e 7, independente da paleta. */
body.shell {
    --trilho-largura: 80px;
    --cabecalho-altura: 52px;
    --nav-fundo: var(--shell-superficie);
    --nav-texto: var(--shell-texto-suave);
    --nav-texto-forte: var(--shell-texto);
    --nav-hover: var(--shell-superficie-2);
    --nav-ativo: var(--acao-tinta);
}
body.shell[data-tema="CLARO"] {
    --nav-fundo: var(--udisoft-verde);
    --nav-texto: var(--udisoft-grafite);
    --nav-texto-forte: var(--udisoft-grafite);
    --nav-hover: var(--udisoft-verde-claro);
    --nav-ativo: var(--udisoft-branco);
}
body.shell .menubar {
    background: var(--nav-fundo);
}
body.shell .menubar-botao { color: var(--nav-texto); }
body.shell .menubar-botao:hover {
    background: var(--nav-hover);
    color: var(--nav-texto-forte);
}
body.shell .menubar-raiz.aberto > .menubar-botao {
    background: var(--nav-ativo);
    color: var(--nav-texto-forte);
}
body.shell .menubar-raiz.aberto > .menubar-botao .menubar-icone { color: inherit; }
body.shell .menubar > .menubar-lista > .menubar-raiz > .menubar-botao:focus-visible {
    outline-color: var(--nav-texto-forte);
}
body.shell[data-layout="TRILHO"] {
    display: grid;
    grid-template-columns: var(--trilho-largura) minmax(0, 1fr);
    grid-template-rows: var(--cabecalho-altura) minmax(0, 1fr);
    grid-template-areas: "topo topo" "nav corpo";
}
[data-layout="TRILHO"] .topbar { grid-area: topo; }
[data-layout="TRILHO"] .shell-corpo { grid-area: corpo; min-height: 0; }
[data-layout="TRILHO"] .menubar {
    grid-area: nav;
    position: relative;
    inset: auto;
    transform: none;
    max-width: none;
    padding: 8px 6px;
    border: 0;
    border-right: 1px solid var(--shell-borda);
    border-radius: 0;
    box-shadow: none;
}
[data-layout="TRILHO"] .menubar-lista {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 2px;
}
[data-layout="TRILHO"] .menubar-botao {
    width: 100%;
    height: 56px;
    gap: 5px;
    border-radius: 8px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}
[data-layout="TRILHO"] .menubar-raiz.aberto > .menubar-botao { border-radius: 8px; }
[data-layout="TRILHO"] .menubar-raiz > .menu-suspenso {
    top: 0;
    bottom: auto;
    left: calc(100% + 10px);
    right: auto;
    transform: none;
    min-width: 256px;
    max-height: calc(100vh - var(--cabecalho-altura) - 24px);
    border-radius: 8px;
}
[data-layout="TRILHO"] .workspace-paineis { margin: 12px; }
[data-layout="TRILHO"] .toasts { bottom: 20px; }
body.shell[data-layout="DOCK"] {
    display: flex;
    flex-direction: column;
}
[data-layout="DOCK"] .menubar {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 6px;
    border: 1px solid var(--shell-borda);
    border-radius: 20px;
    box-shadow: var(--sombra-2);
}
[data-layout="DOCK"] .menubar-lista {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 2px;
}
[data-layout="DOCK"] .menubar-botao {
    width: 64px;
    height: 54px;
    gap: 4px;
    border-radius: 14px;
}
[data-layout="DOCK"] .menubar-raiz.aberto > .menubar-botao { border-radius: 14px; }
[data-layout="DOCK"] .menubar-raiz > .menu-suspenso {
    top: auto;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    max-height: calc(100vh - var(--cabecalho-altura) - 120px);
    border-radius: 14px;
}
[data-layout="DOCK"] .menubar-raiz:first-child > .menu-suspenso { left: 0; transform: none; }
[data-layout="DOCK"] .menubar-raiz:last-child > .menu-suspenso { left: auto; right: 0; transform: none; }
[data-layout="DOCK"] .workspace-paineis { margin: 16px 20px 96px; }
[data-layout="DOCK"] .toasts { bottom: 90px; }
@media (max-width: 900px) {
    [data-layout="DOCK"] .menubar-botao { width: 56px; }
    [data-layout="DOCK"] .workspace-paineis { margin: 10px 10px 90px; }
}
/* Flyouts independentes na camada superior: escapam do scroll do pai e do dock. */
body.shell .menubar .menu-suspenso[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    transform: none;
    box-sizing: border-box;
    width: max-content;
    min-width: min(256px, calc(100vw - 16px));
    padding: 8px;
    overflow: auto;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda-forte);
    border-radius: 10px;
    box-shadow: var(--sombra-3);
    color: var(--shell-texto);
}
body.shell[data-tema="ESCURO"] .menubar .menu-suspenso[popover] {
    background: var(--shell-superficie-2);
}
body.shell .menubar .menu-suspenso[popover]:not(:popover-open) { display: none; }
body.shell .menubar .menu-suspenso[popover]:popover-open { display: block; }
body.shell .menu-grupo-flyout > .menu-suspenso .menu-item { padding-left: 12px; }
body.shell .menu-grupo-flyout.aberto > .menu-grupo-botao .menu-seta { transform: rotate(-45deg); }
body.shell .menu-grupo-flyout[data-direcao="esquerda"] > .menu-grupo-botao .menu-seta {
    transform: rotate(135deg);
}