/* Shell compartilhado — topo, sidebar agrupada, gaveta e bloco do usuário — servido em /shell.css para as DUAS
   camadas (SPA e páginas estáticas), depois de /tokens.css. Medidas e cortes vivem SÓ aqui:
     desktop  ≥ 80rem      sidebar aberta (248px, --layout-sidebar), recolhível → body.e-recolhida
     laptop   64–79.99rem  trilho de 80px, expansível → body.e-aberta
     < 64rem               gaveta fechada; body.e-open abre, com backdrop e foco contido
   O corte antigo de 820px foi substituído por estes, no CSS e no JS (shell.js / Sidebar.jsx). */
:root {
  --e-top: var(--layout-topbar);       /* 64px */
  --e-open: var(--layout-sidebar);     /* 248px */
  --e-rail: 5rem;                      /* 80px — trilho recolhido */
  --e-larg: var(--e-open);             /* largura EFETIVA da sidebar; muda por faixa/estado, abaixo */
  --e-z-side: 1100; --e-z-top: 1200; --e-z-back: 1050;
}
body { padding-top: var(--e-top); padding-left: var(--e-larg); transition: padding-left var(--duration-base, .2s) ease; }
/* Tipografia base das duas camadas (Geist, DS): algarismos tabulares em tudo (KPIs, preços, tabelas, contadores,
   códigos e IDs), títulos e negrito em 600, títulos grandes com -0.02em e códigos na mesma família (sem monoespaçada). */
body { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: 600; }
h1, h2 { letter-spacing: -0.02em; }
code, kbd, samp, pre { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
body.e-noshell { padding: 0 !important; }
body.e-noshell .e-top, body.e-noshell .e-side, body.e-noshell .e-back { display: none; }
@media (prefers-reduced-motion: reduce) { body, .e-side, .e-top, .e-item, .e-sub { transition: none !important; } }

/* ---- topo ---- */
.e-top { position: fixed; top: 0; left: var(--e-larg); right: 0; height: var(--e-top); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); background: var(--neutral-0); border-bottom: 1px solid var(--color-border); z-index: var(--e-z-top); transition: left var(--duration-base, .2s) ease; }
.e-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius-md); align-items: center; justify-content: center; cursor: pointer; color: var(--neutral-700); }
.e-burger svg { width: 22px; height: 22px; }
.e-burger:hover { background: var(--neutral-100); }
.e-burger:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.e-top .e-logo { display: none; align-items: center; text-decoration: none; }
.e-top .e-logo img { height: 28px; display: block; }
.e-spacer { flex: 1; }
.e-meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption-size); color: var(--color-text-muted); font-family: var(--font-display); }
.e-meta b { color: var(--color-text); font-weight: 600; }
.e-av { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--brand-blue-500); color: var(--neutral-0); font: 600 var(--text-label-size) var(--font-ui); letter-spacing: .03em; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.e-av:hover { filter: brightness(1.06); }
.e-av:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }

/* ---- sidebar ---- */
.e-side { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: var(--e-larg); display: flex; flex-direction: column; background: var(--brand-blue-950); color: var(--neutral-300); z-index: var(--e-z-side); transition: width var(--duration-base, .2s) ease, transform var(--duration-base, .2s) ease; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.e-side-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--e-top); padding: 0 var(--space-4) 0 var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--neutral-0) 10%, transparent); }
.e-side-topo .e-marca { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.e-side-topo .e-marca img { display: block; height: 30px; width: auto; }
.e-side-topo .e-marca .e-marca-simbolo { display: none; height: 32px; }
.e-colapsar { display: none; flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--neutral-400); cursor: pointer; align-items: center; justify-content: center; }
.e-colapsar svg { width: 18px; height: 18px; }
.e-colapsar:hover { background: color-mix(in srgb, var(--neutral-0) 10%, transparent); color: var(--neutral-0); }
.e-colapsar:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--brand-blue-950), 0 0 0 4px var(--accent-300); }

/* miolo rolável: só ele rola quando falta altura — logo e usuário ficam nas pontas */
.e-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) var(--space-3) var(--space-4); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--neutral-0) 25%, transparent) transparent; }
.e-grp { margin: var(--space-4) var(--space-2) var(--space-1, 4px); }
.e-grp:first-child { margin-top: var(--space-1, 4px); }
.e-grp-tt { display: block; padding: 0 var(--space-2); font: 600 var(--text-caption-size)/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--neutral-0) 42%, transparent); white-space: nowrap; }
.e-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.e-linha { position: relative; display: flex; align-items: center; }
.e-item { position: relative; display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--neutral-300); text-decoration: none; text-align: left; font: 500 var(--text-body-sm-size) var(--font-ui); white-space: nowrap; cursor: pointer; transition: background var(--duration-fast, .12s), color var(--duration-fast, .12s); }
.e-item svg { flex: none; width: 21px; height: 21px; }
.e-item span { overflow: hidden; text-overflow: ellipsis; }
.e-item:hover { background: color-mix(in srgb, var(--neutral-0) 8%, transparent); color: var(--neutral-0); }
.e-item:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--brand-blue-950), 0 0 0 4px var(--accent-300); color: var(--neutral-0); }
/* ativo: superfície levemente mais clara + marcador amarelo vertical (o desenho); a semântica é aria-current */
.e-item.on, .e-item[aria-current="page"] { background: color-mix(in srgb, var(--neutral-0) 12%, transparent); color: var(--neutral-0); font-weight: 600; }
.e-item.on::before, .e-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: var(--radius-full); background: var(--color-action-primary); }
/* pai que contém a página ativa (sem ser ela): só o texto clareia, sem marcador nem superfície */
.e-item.contem { color: var(--neutral-0); }
.e-item.off { color: color-mix(in srgb, var(--neutral-0) 38%, transparent); cursor: not-allowed; }
.e-item.off:hover { background: transparent; color: color-mix(in srgb, var(--neutral-0) 38%, transparent); }
.e-item .e-selo { margin-left: auto; font-size: var(--text-caption-size); font-weight: 600; color: color-mix(in srgb, var(--neutral-0) 45%, transparent); }
.e-expandir { flex: none; width: 36px; min-height: 44px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--neutral-400); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.e-expandir svg { width: 16px; height: 16px; transition: transform var(--duration-fast, .12s); }
.e-expandir[aria-expanded="true"] svg { transform: rotate(180deg); }
.e-expandir:hover { background: color-mix(in srgb, var(--neutral-0) 8%, transparent); color: var(--neutral-0); }
.e-expandir:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--brand-blue-950), 0 0 0 4px var(--accent-300); }
/* Agrupador sem destino próprio (Calculadoras): não existe um .e-expandir ao lado, porque o PRÓPRIO item é o
   botão do submenu — a seta vai dentro dele. O box de 36px e a margem negativa (que anula o padding do item)
   deixam o ícone na mesma coluna da seta dos itens com href, então as duas linhas ficam alinhadas.
   Como é um <span> dentro de .e-item, some sozinha no trilho junto com o rótulo. */
.e-seta { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; margin-left: auto; margin-right: calc(var(--space-3) * -1); color: var(--neutral-400); pointer-events: none; }
.e-seta svg { width: 16px; height: 16px; transition: transform var(--duration-fast, .12s); }
.e-item[aria-expanded="true"] .e-seta svg { transform: rotate(180deg); }
.e-item:hover .e-seta, .e-item.contem .e-seta { color: var(--neutral-0); }
.e-sub { list-style: none; margin: 2px 0 4px; padding: 0 0 0 var(--space-6); display: flex; flex-direction: column; gap: 2px; }
.e-sub[hidden] { display: none; }
.e-sub .e-item { min-height: 40px; padding-left: var(--space-3); font-weight: 400; color: var(--neutral-400); }
.e-sub .e-item::before { left: -4px; }

/* ---- bloco do usuário (fixo na base) ---- */
.e-user { position: relative; flex: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); border-top: 1px solid color-mix(in srgb, var(--neutral-0) 10%, transparent); }
.e-user-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-blue-500); color: var(--neutral-0); font: 600 var(--text-label-size) var(--font-ui); letter-spacing: .03em; display: flex; align-items: center; justify-content: center; }
.e-user-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.e-user-nome { font: 600 var(--text-body-sm-size) var(--font-ui); color: var(--neutral-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-user-plano { font-size: var(--text-caption-size); color: color-mix(in srgb, var(--neutral-0) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-user-plano.sk { display: block; width: 6rem; height: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--neutral-0) 14%, transparent); }
.e-user-btn { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--neutral-400); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.e-user-btn svg { width: 18px; height: 18px; }
.e-user-btn:hover { background: color-mix(in srgb, var(--neutral-0) 10%, transparent); color: var(--neutral-0); }
.e-user-btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--brand-blue-950), 0 0 0 4px var(--accent-300); }
.e-conta-menu { position: absolute; left: var(--space-3); right: var(--space-3); bottom: calc(100% - 4px); margin: 0; padding: var(--space-2); list-style: none; background: var(--neutral-0); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 2; }
.e-conta-menu[hidden] { display: none; }
.e-conta-menu a, .e-conta-menu button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); text-decoration: none; text-align: left; font: 500 var(--text-body-sm-size) var(--font-ui); cursor: pointer; }
.e-conta-menu a:hover, .e-conta-menu button:hover { background: var(--neutral-100); }
.e-conta-menu a:focus-visible, .e-conta-menu button:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.e-conta-menu .e-sair { color: var(--danger-700); }
.e-conta-menu .e-conta-email { padding: var(--space-1, 4px) var(--space-3) var(--space-2); font-size: var(--text-caption-size); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1, 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- backdrop da gaveta ---- */
.e-back { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--brand-blue-950) 45%, transparent); z-index: var(--e-z-back); }

/* ================================================================ faixas ==================================== */
/* desktop ≥ 80rem: aberta por padrão; body.e-recolhida vira trilho */
body.e-recolhida { --e-larg: var(--e-rail); }
@media (min-width: 64rem) {
  .e-colapsar { display: flex; }
  body.e-recolhida .e-side-topo { justify-content: center; padding: 0; }
  body.e-recolhida .e-side-topo .e-marca img { display: none; }
  body.e-recolhida .e-side-topo .e-marca .e-marca-simbolo { display: block; }
  body.e-recolhida .e-colapsar, body.e-recolhida .e-grp-tt, body.e-recolhida .e-item span, body.e-recolhida .e-item .e-selo, body.e-recolhida .e-expandir, body.e-recolhida .e-user-tx, body.e-recolhida .e-user-btn { display: none; }
  body.e-recolhida .e-grp { margin-inline: 0; padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--neutral-0) 10%, transparent); }
  body.e-recolhida .e-grp:first-child { border-top: 0; padding-top: 0; }
  body.e-recolhida .e-nav { padding-inline: var(--space-2); }
  body.e-recolhida .e-item { justify-content: center; padding: 0; }
  body.e-recolhida .e-sub { display: none; }
  body.e-recolhida .e-user { justify-content: center; padding-inline: 0; }
  body.e-recolhida .e-item:hover::after, body.e-recolhida .e-item:focus-visible::after { content: attr(data-rotulo); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: var(--radius-md); background: var(--brand-blue-950); color: var(--neutral-0); font: 600 var(--text-caption-size) var(--font-ui); white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; z-index: 3; }
  /* trilho: o botão de expandir fica no topo, no lugar da logo horizontal */
  body.e-recolhida .e-side-topo { flex-direction: column; height: auto; padding: var(--space-3) 0; gap: var(--space-2); }
  body.e-recolhida .e-side-topo .e-colapsar { display: flex; }
  body.e-recolhida .e-colapsar svg { transform: rotate(180deg); }
}
/* laptop 64–79.99rem: trilho por padrão; body.e-aberta expande */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  body:not(.e-aberta) { --e-larg: var(--e-rail); }
  body:not(.e-aberta) .e-side-topo { flex-direction: column; height: auto; padding: var(--space-3) 0; gap: var(--space-2); justify-content: center; }
  body:not(.e-aberta) .e-side-topo .e-marca img { display: none; }
  body:not(.e-aberta) .e-side-topo .e-marca .e-marca-simbolo { display: block; }
  body:not(.e-aberta) .e-colapsar svg { transform: rotate(180deg); }
  body:not(.e-aberta) .e-grp-tt, body:not(.e-aberta) .e-item span, body:not(.e-aberta) .e-item .e-selo, body:not(.e-aberta) .e-expandir, body:not(.e-aberta) .e-user-tx, body:not(.e-aberta) .e-user-btn { display: none; }
  body:not(.e-aberta) .e-grp { margin-inline: 0; padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--neutral-0) 10%, transparent); }
  body:not(.e-aberta) .e-grp:first-child { border-top: 0; padding-top: 0; }
  body:not(.e-aberta) .e-nav { padding-inline: var(--space-2); }
  body:not(.e-aberta) .e-item { justify-content: center; padding: 0; }
  body:not(.e-aberta) .e-sub { display: none; }
  body:not(.e-aberta) .e-user { justify-content: center; padding-inline: 0; }
  body:not(.e-aberta) .e-item:hover::after, body:not(.e-aberta) .e-item:focus-visible::after { content: attr(data-rotulo); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: var(--radius-md); background: var(--brand-blue-950); color: var(--neutral-0); font: 600 var(--text-caption-size) var(--font-ui); white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; z-index: 3; }
}
/* < 64rem: gaveta. Fechada não reserva margem; aberta sobrepõe com backdrop */
@media (max-width: 63.99rem) {
  body { --e-larg: 0px; }
  body.e-recolhida, body.e-aberta { --e-larg: 0px; }
  .e-burger { display: flex; }
  .e-top .e-logo { display: flex; }
  .e-meta { display: none; }
  .e-side { width: var(--e-open); transform: translateX(-100%); box-shadow: none; }
  body.e-open .e-side { transform: translateX(0); box-shadow: 6px 0 24px color-mix(in srgb, var(--brand-blue-950) 25%, transparent); }
  body.e-open .e-back { display: block; }
  body.e-open { overflow: hidden; }
  .e-colapsar { display: flex; } /* na gaveta ele fecha a gaveta */
  /* na gaveta, nunca trilho: garante rótulos e submenus mesmo se a preferência for "recolhida" */
  body.e-recolhida .e-side-topo { flex-direction: row; height: var(--e-top); padding: 0 var(--space-4) 0 var(--space-5); justify-content: space-between; }
  body.e-recolhida .e-side-topo .e-marca img { display: block; }
  body.e-recolhida .e-side-topo .e-marca .e-marca-simbolo { display: none; }
  body.e-recolhida .e-grp-tt, body.e-recolhida .e-item span, body.e-recolhida .e-item .e-selo, body.e-recolhida .e-expandir, body.e-recolhida .e-user-tx, body.e-recolhida .e-user-btn { display: revert; }
  body.e-recolhida .e-seta { display: flex; } /* `revert` acima devolveria `inline` e a seta perderia o alinhamento à direita */
  body.e-recolhida .e-item { justify-content: flex-start; padding: 0 var(--space-3); }
  body.e-recolhida .e-sub:not([hidden]) { display: flex; }
  body.e-recolhida .e-user { justify-content: flex-start; padding-inline: var(--space-3); }
  body.e-recolhida .e-item:hover::after, body.e-recolhida .e-item:focus-visible::after { content: none; }
  body.e-recolhida .e-colapsar svg { transform: none; }
}

/* foto de perfil no avatar (header, menu lateral, Minha conta) */
.e-av, .e-user-av, .conta-avatar { overflow: hidden; }
.av-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }