/* layout.css — casco do painel: BORDA (moldura) em volta de todo o site + menu "colado" na borda esquerda + ícone do usuário no canto.
   Tudo da moldura usa --moldura (tokens.css / tema.js): sempre mais escura que a página, então o contraste acompanha o fundo escolhido.
   Formas (inspiradas no recorte do botão lateral de celular):
     • o menu é uma pílula que sai da borda com curvas CÔNCAVAS (--rf) nos pontos de encontro e cantos CONVEXOS (--rc) do lado de dentro;
     • o canto superior esquerdo (usuário) tem só a quina inferior direita arredondada e, aberto, mantém essa mesma quina;
     • a página tem os cantos de dentro arredondados (--raio-pagina), feitos pela própria borda. */

:root {
  --borda: 10px;            /* espessura da moldura */
  --raio-pagina: 32px;      /* cantos internos da moldura (cantos da página) */
  --rc: 26px;               /* cantos convexos do menu e do canto do usuário */
  --rf: 20px;               /* curvas côncavas onde o menu encontra a borda */
  --usr: 40px;              /* diâmetro do círculo do usuário */
  --usr-gap: 6px;           /* folga entre o círculo/painel do usuário e a borda */
  --item: 44px;             /* tamanho de cada ícone do menu */
  --topo-h: 96px;           /* altura da faixa da logo, no topo da página (logo + margem em cima e embaixo) */
  --chrome-v: 164px;        /* tudo que ocupa altura além do conteúdo (borda + faixa da logo + respiros) */
  --painel-w: 264px;        /* largura do painel do usuário aberto */
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- Moldura: borda fixa com os cantos de dentro arredondados ---------- */
body[data-tela="casco"] { background: var(--surface-color); }
body[data-tela="casco"]::after {
  content: ""; position: fixed; z-index: 40; pointer-events: none;
  inset: calc(var(--borda) + var(--safe-t)) var(--borda) var(--borda) var(--borda);
  border-radius: var(--raio-pagina); box-shadow: 0 0 0 100vmax var(--moldura);
}
/* a barra de rolagem da página vira parte da moldura */
html:has(body[data-tela="casco"]) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--moldura-texto) 38%, var(--moldura)) var(--moldura);
}

/* ---------- Casco ---------- */
#casco {
  display: block; min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--borda) + var(--safe-t)) var(--borda) var(--borda) calc(var(--borda) + var(--menu-w) + 6px);
}

/* ---------- Menu: pílula colada na borda esquerda ---------- */
.menu { position: static; }
.menu :focus-visible { outline: 2px solid var(--icone-menu); outline-offset: 2px; }

.menu-trilho {
  position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; width: calc(var(--borda) + var(--menu-w));
  display: flex; align-items: center; pointer-events: none;   /* só a pílula recebe cliques */
}
.menu-pilula {
  position: relative; pointer-events: auto; width: 100%; background: var(--moldura);
  border-radius: 0 var(--rc) var(--rc) 0;
  padding: 24px calc((var(--menu-w) - var(--item)) / 2) 24px calc(var(--borda) + (var(--menu-w) - var(--item)) / 2);
}
/* curvas côncavas: o menu "nasce" da borda (mesma técnica das abas antigas, agora na cor da moldura) */
/* as curvas entram 1px dentro da pílula (faixa sólida) para não aparecer risquinho na emenda quando o menu desce com o painel do usuário aberto */
.menu-pilula::before, .menu-pilula::after {
  content: ""; position: absolute; left: var(--borda); width: var(--rf); height: calc(var(--rf) + 1px); pointer-events: none;
}
.menu-pilula::before {
  top: calc(-1 * var(--rf));
  background: linear-gradient(var(--moldura), var(--moldura)) 0 100% / 100% 1px no-repeat,
              radial-gradient(circle at 100% 0, transparent calc(var(--rf) - .5px), var(--moldura) var(--rf)) 0 0 / 100% var(--rf) no-repeat;
}
.menu-pilula::after {
  bottom: calc(-1 * var(--rf));
  background: linear-gradient(var(--moldura), var(--moldura)) 0 0 / 100% 1px no-repeat,
              radial-gradient(circle at 100% 100%, transparent calc(var(--rf) - .5px), var(--moldura) var(--rf)) 0 100% / 100% var(--rf) no-repeat;
}

.menu-itens { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }

.menu a, .menu-botao {
  position: relative; display: grid; place-items: center; flex: none; width: var(--item); height: var(--item); padding: 0;
  border: 0; border-radius: 15px; background: none; color: var(--icone-menu); text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.menu a i, .menu-botao i { font-size: var(--fs-xl); line-height: 1; transition: transform .38s cubic-bezier(.34, 1.45, .5, 1); will-change: transform; backface-visibility: hidden; }
/* a área de passar o mouse cobre o espaço entre os ícones: ao deslizar de um para o outro o efeito não "solta" e volta (era o que travava a animação) */
.menu a::before, .menu-botao::before { content: ""; position: absolute; inset: -4px -6px; border-radius: inherit; }
/* hover: leve aumento do ícone */
.menu a:hover i, .menu a:focus-visible i, .menu-botao:hover i { transform: scale(1.3); }
/* efeito "dock": o ícone logo acima e o logo abaixo do que está sob o mouse crescem metade do aumento (30% -> 10%) */
.menu a:hover + a i, .menu a:has(+ a:hover) i, .menu a:focus-visible + a i, .menu a:has(+ a:focus-visible) i { transform: scale(1.1); }
/* selecionado: o ícone ganha uma "pastilha" arredondada na cor do tema, com o ícone na cor da moldura */
.menu a.ativo { background: var(--icone-menu); color: var(--moldura); }
.menu .rotulo { display: none; }

.menu .bolinha {
  position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; padding: 0;
  border: 2px solid var(--moldura); border-radius: 50%; background: #ff5252; display: none; pointer-events: none;
}
.menu a.ativo .bolinha { border-color: var(--icone-menu); }
.menu .bolinha.visivel { display: block; }

/* nome do menu ao passar o mouse (ou segurar, no toque) */
.menu .dica {
  position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%); z-index: 60; padding: 5px 10px;
  background: var(--moldura); color: var(--moldura-texto); border: 1px solid color-mix(in srgb, var(--moldura-texto) 22%, transparent); border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.menu a:hover .dica, .menu a:focus-visible .dica, .menu a.mostrar-rotulo .dica { opacity: 1; }
.menu-mais, .menu-seta { display: none; }   /* só existem no celular */
.folha-lista a, .folha-lista button { text-transform: uppercase; letter-spacing: .04em; }

/* com o painel do usuário aberto, o menu continua visível; menu.js o desce só o necessário para não ficar embaixo do painel */
.menu-pilula { transition: transform .28s ease; }

/* telas baixas: ícones mais juntos e, se ainda não couber, o menu rola (sem barra visível) */
@media (max-height: 700px) and (min-width: 640px) {
  :root { --item: 38px; }
  .menu-itens { gap: 4px; }
  .menu-pilula { padding-top: 18px; padding-bottom: 18px; }
  .menu a i { font-size: var(--fs-lg); }
}
@media (max-height: 580px) and (min-width: 640px) {
  .menu-pilula { max-height: calc(100dvh - 2 * (var(--usr) + var(--borda) + var(--usr-gap) + var(--rf) + 6px)); display: flex; }
  .menu-itens { overflow-y: auto; scrollbar-width: none; }
  .menu-itens::-webkit-scrollbar { display: none; }
  .menu .dica { display: none; }
}

/* ---------- Canto superior esquerdo: usuário ----------
   Fechado: só o círculo escuro com a inicial/foto, quase encostando na borda.
   Aberto: painel arredondado (todos os cantos) que também fica quase encostado na borda. */
.menu-canto {
  position: fixed; z-index: 46; top: calc(var(--borda) + var(--safe-t) + var(--usr-gap)); left: calc(var(--borda) + var(--usr-gap));
  width: var(--usr); height: auto; min-height: var(--usr); max-height: var(--usr);
  background: var(--moldura); color: var(--moldura-texto); border-radius: calc(var(--usr) / 2);   /* px (e não %) para não virar oval */
  transition: width .16s ease, max-height .3s cubic-bezier(.2, .8, .2, 1), border-radius .25s ease;
}
/* abrir: a largura vem rápido e o painel cresce PARA BAIXO; fechar faz o caminho inverso */
.menu-canto.aberto, .menu-canto.fechando { overflow: hidden; }
.menu-canto.aberto { width: var(--painel-w); max-height: 300px; padding-bottom: 12px; border-radius: var(--rc); }

.menu-usuario {
  position: absolute; z-index: 2; top: 0; left: 0; display: grid; place-items: center; width: var(--usr); height: var(--usr); padding: 0;
  box-sizing: border-box; border: 2px solid var(--primary-color); border-radius: 50%; overflow: hidden; background: var(--moldura); color: var(--moldura-texto); cursor: pointer;
  transition: left .16s ease, top .25s ease, width .2s ease, height .2s ease, transform .3s cubic-bezier(.34, 1.45, .5, 1), border-color .2s ease;
}
.menu-usuario:hover { transform: scale(1.08); }
/* aberto: o botão vai para o canto superior direito do painel, encolhe e vira um "X" pequeno com anel fino */
.menu-canto.aberto .menu-usuario { border-color: transparent; top: 11px; left: calc(100% - 26px - 12px); width: 26px; height: 26px; box-shadow: 0 0 0 1.5px var(--moldura-texto); }
.menu-usuario .avatar {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--moldura); color: var(--moldura-texto); font-weight: 700; font-size: var(--fs-xl); text-transform: uppercase;
}
.menu-usuario .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-usuario .menu-fechar { display: none; font-size: var(--fs-xs); }
.menu-usuario[aria-expanded="true"] .avatar { display: none; }
.menu-usuario[aria-expanded="true"] .menu-fechar { display: block; }

.menu-submenu { display: flex; flex-direction: column; gap: 2px; width: var(--painel-w); padding: 0 10px; animation: submenu-entra .22s ease .06s both; }
@keyframes submenu-entra { from { opacity: 0; } to { opacity: 1; } }
/* nome e cargo centralizados no painel; a folga igual dos dois lados (44px) reserva o lugar do X sem puxar o texto para um lado */
.submenu-usuario {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 50px; margin-top: 14px; padding: 0 34px 16px;
  white-space: normal; overflow: hidden; text-align: center;
}
.submenu-nome { max-width: 100%; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .05em; color: var(--moldura-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submenu-cargo {
  max-width: 100%; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .04em;
  color: var(--moldura-texto); background: color-mix(in srgb, var(--moldura-texto) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cargo) 70%, var(--moldura-texto)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.submenu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px;
  background: none; color: var(--moldura-texto); cursor: pointer; text-align: left; font: inherit; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.submenu-item:hover, .submenu-item:focus-visible { background: color-mix(in srgb, var(--moldura-texto) 12%, transparent); }
.submenu-item i { width: 20px; text-align: center; flex: none; font-size: var(--fs-md); color: var(--icone-menu); transition: transform .15s ease; }
.submenu-item:hover i { transform: scale(1.18); }
.submenu-item[aria-pressed="false"] i { color: color-mix(in srgb, var(--moldura-texto) 50%, transparent); }
.submenu-item.perigo i { color: color-mix(in srgb, var(--danger-color) 78%, var(--moldura-texto)); }

/* ---------- Painel de conteúdo (cor de superfície do tema) ---------- */
.painel { min-width: 0; display: flex; flex-direction: column; background: var(--surface-color); min-height: calc(100dvh - 2 * var(--borda) - var(--safe-t)); }
/* a logo é o primeiro elemento da página, centralizada */
.painel-topo { flex: none; display: flex; align-items: center; justify-content: center; height: var(--topo-h); padding: 0 28px; }
.menu-logo { display: flex; align-items: center; }
/* a logo troca sozinha (K preto/branco) conforme o fundo; nunca tem cor de fundo própria */
.menu-logo img { display: block; height: 56px; max-width: 100%; width: auto; object-fit: contain; background: none; }
/* só aparece se o arquivo da logo não existir */
.menu-logo.sem-imagem {
  width: 40px; height: 40px; justify-content: center; border-radius: 14px; background: var(--primary-color); color: var(--on-primary);
  font-weight: 800; font-size: var(--fs-xl);
}

main { flex: 1; min-width: 0; padding: 8px 28px 28px; outline: none; }
.pagina { max-width: 1200px; margin: 0 auto; }
.pagina-topo, .pagina-cabecalho { display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pagina-topo h1, .pagina-cabecalho h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.pagina-topo p, .pagina-cabecalho p { display: none; }   /* subtítulos removidos */

/* as caixas agora ficam sobre a cor de superfície: ganham borda no lugar da sombra */
.painel .caixa { box-shadow: none; border: 1px solid var(--border-color); }

.pagina-carregando { padding: 60px 0; text-align: center; color: var(--primary-color); font-size: var(--fs-2xl); }

/* faixa de aviso urgente fica logo abaixo da borda ao rolar */
.faixa-urgente { top: calc(var(--borda) + var(--safe-t)); }

/* ---------- Celular: o menu vira uma pílula colada na borda de baixo ---------- */
@media (max-width: 639px) {
  :root { --borda: 6px; --raio-pagina: 24px; --rc: 22px; --rf: 16px; --usr: 38px; --usr-gap: 5px; --item: 42px; --topo-h: 76px; --chrome-v: calc(166px + env(safe-area-inset-bottom, 0px)); --painel-w: min(264px, calc(100vw - 2 * (var(--borda) + var(--usr-gap)))); }

  /* sem moldura em volta da página: só o menu (pílula na borda de baixo) e o ícone do usuário */
  :root { --borda: 0px; --raio-pagina: 0px; }
  body[data-tela="casco"]::after { display: none; }
  .menu-pilula::before, .menu-pilula::after { display: none; }
  html:has(body[data-tela="casco"]) { scrollbar-color: auto; }
  #casco { padding: var(--safe-t) 0 0; }
  .painel-topo { padding: 0 calc(var(--usr) + var(--borda) + var(--usr-gap) + 6px); }
  .menu-logo img { height: 44px; }
  main { padding: 4px 16px calc(92px + env(safe-area-inset-bottom, 0px)); }

  .menu-trilho { top: auto; left: 0; right: 0; bottom: 0; width: auto; justify-content: center; align-items: flex-end; }
  .menu-pilula {
    width: auto; max-width: calc(100vw - 2 * (var(--rf) + 14px)); display: flex; align-items: center;
    border-radius: var(--rc) var(--rc) 0 0; padding: 9px 14px calc(var(--borda) + 7px + env(safe-area-inset-bottom, 0px));
  }
  /* curvas côncavas dos dois lados, apoiadas na borda de baixo */
  .menu-pilula::before, .menu-pilula::after { top: auto; bottom: var(--borda); width: var(--rf); height: var(--rf); }
  .menu-pilula::before { left: calc(-1 * var(--rf)); background: radial-gradient(circle at 0 0, transparent calc(var(--rf) - .5px), var(--moldura) var(--rf)); }
  .menu-pilula::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--rf) - .5px), var(--moldura) var(--rf)); }

  /* todos os menus ficam na barra; se não couberem, ela rola de lado (sem barra de rolagem visível) */
  .menu-itens {
    flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .menu-itens::-webkit-scrollbar { display: none; }
  .menu .dica { display: none !important; }
  .menu-mais { display: none; }


  /* setas: indicam que a barra rola para o lado */
  .menu-seta {
    position: absolute; top: 9px; height: var(--item); width: 16px; display: flex !important; align-items: center; z-index: 3;
    pointer-events: none; opacity: 0; transition: opacity .2s; font-size: var(--fs-xs); color: var(--icone-menu);
  }
  .menu-seta-esq { left: 1px; justify-content: flex-start; }
  .menu-seta-dir { right: 1px; justify-content: flex-end; }
  .menu.rola-esq .menu-seta-esq, .menu.rola-dir .menu-seta-dir { opacity: 1; }

  .pagina-topo h1, .pagina-cabecalho h1 { font-size: var(--fs-2xl); }
  .pagina-topo, .pagina-cabecalho { margin-bottom: 14px; }
}