/* ---------- Menu lateral flutuante ---------- */
.menu {
  position: fixed; left: 16px; top: 16px; bottom: 16px; width: var(--menu-w);
  background: var(--surface-color); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 50;
  transition: width .2s;
}
.menu-marca { display: flex; align-items: center; justify-content: center; padding: 8px 6px 16px; }
.menu-logo { display: flex; align-items: center; justify-content: center; width: 100%; }
/* a logo troca sozinha (K preto/branco) conforme o fundo; nunca tem cor de fundo própria */
.menu-logo img { display: block; max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain; background: none; }
/* só aparece se o arquivo img/logo.png não existir */
.menu-logo.sem-imagem {
  width: 40px; height: 40px; border-radius: 14px; background: var(--primary-color); color: var(--on-primary);
  font-weight: 800; font-size: 18px;
}

/* botão de recolher/expandir: encaixado na borda direita do menu (funciona aberto e recolhido) */
.menu-recolher {
  position: absolute; top: 30px; right: -14px; z-index: 2; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--surface-color); color: var(--text-color); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer; font-size: 12px; transition: background .15s, color .15s, border-color .15s;
}
.menu-recolher:hover { background: var(--primary-color); color: var(--on-primary); border-color: var(--primary-color); }
.menu-itens { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.menu a, .menu-botao {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  color: inherit; text-decoration: none; position: relative; border: 0; background: none;
  cursor: pointer; width: 100%; text-align: left; white-space: nowrap;
}
.menu a:hover, .menu-botao:hover { background: var(--hover-bg); }
.menu a.ativo { background: var(--primary-color); color: var(--on-primary); }
.menu a i, .menu-botao i { width: 20px; text-align: center; flex: none; }
.menu .rotulo { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: 600; }
.folha-lista a, .folha-lista button { text-transform: uppercase; letter-spacing: .04em; }

.menu .bolinha {
  position: absolute; top: 5px; left: 30px; width: 10px; height: 10px; padding: 0;
  border: 2px solid var(--surface-color); border-radius: 50%; background: #e53935;
  display: none; pointer-events: none;
}
.menu .bolinha.visivel { display: block; }

.menu-rodape { position: relative; border-top: 1px solid var(--border-color); padding-top: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
/* só o avatar do usuário; ao clicar abre o submenu (sons, configurações, sair) */
.menu-usuario { display: flex; align-items: center; justify-content: center; padding: 6px; width: 100%; border: 0; background: none; border-radius: 14px; cursor: pointer; color: var(--muted); }
.menu-usuario:hover, .menu-usuario[aria-expanded="true"] { background: var(--hover-bg); color: var(--text-color); }
.menu-usuario .avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--border-color); color: var(--text-color);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; text-transform: uppercase; overflow: hidden;
}
.menu-usuario .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* submenu do usuário: abre ao lado do menu (PC/tablet) ou logo abaixo do avatar (celular) */
.menu-submenu {
  position: absolute; left: calc(100% + 22px); bottom: 0; z-index: 70; min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; background: var(--surface-color); color: var(--text-color);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-forte);
}
.submenu-usuario { padding: 8px 14px 6px; font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submenu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: 10px;
  background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.submenu-item:hover, .submenu-item:focus-visible { background: var(--hover-bg); }
.submenu-item i { width: 20px; text-align: center; flex: none; color: var(--primary-color); }
.submenu-item[aria-pressed="false"] i { color: var(--muted); }
.submenu-item.perigo i { color: var(--danger-color); }
.menu-recolher i { transition: transform .2s; }
.menu-mais { display: none; }

/* rótulo flutuante (menu só com ícones) */
.menu a[data-rotulo]::after, .menu-botao[data-rotulo]::after {
  content: attr(data-rotulo); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #222; color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
  opacity: 0; pointer-events: none; transition: opacity .15s; display: none; z-index: 60;
}

/* ---------- Conteúdo ---------- */
main { margin-left: calc(var(--menu-w) + 32px); padding: 24px; transition: margin .2s; min-height: 100vh; 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: 22px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.pagina-topo p, .pagina-cabecalho p { display: none; }   /* subtítulos removidos */

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

/* menu recolhido (desktop) */
body.menu-recolhido { --menu-w: var(--menu-w-min); }
body.menu-recolhido .menu .rotulo,
body.menu-recolhido .menu .nome { display: none; }
body.menu-recolhido .menu-recolher i { transform: rotate(180deg); }
body.menu-recolhido .menu a[data-rotulo]::after,
body.menu-recolhido .menu-botao[data-rotulo]::after { display: block; }
body.menu-recolhido .menu a[data-rotulo]:hover::after, body.menu-recolhido .menu a[data-rotulo]:focus-visible::after,
body.menu-recolhido .menu-botao[data-rotulo]:hover::after, body.menu-recolhido .menu-botao[data-rotulo]:focus-visible::after { opacity: 1; }
body.menu-recolhido .menu .bolinha { left: 34px; }

/* ---------- Tablet: sempre só ícones ---------- */
@media (max-width: 1023px) {
  :root { --menu-w: var(--menu-w-min); }
  .menu .rotulo, .menu .nome { display: none; }
  .so-desktop { display: none !important; }
  .menu a[data-rotulo]::after, .menu-botao[data-rotulo]::after { display: block; }
  .menu a[data-rotulo]:hover::after, .menu a[data-rotulo]:focus-visible::after, .menu a.mostrar-rotulo::after { opacity: 1; }
  .menu .bolinha { left: 34px; }
}

/* ---------- Celular: barra flutuante inferior ---------- */
@media (max-width: 639px) {
  .menu {
    top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto;
    flex-direction: row; justify-content: space-around; padding: 6px; gap: 0;
  }
  .menu-marca { display: none; }
  /* celular: o avatar flutua no canto superior direito e o submenu abre logo abaixo dele */
  .menu-rodape {
    position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 60;
    width: auto; margin: 0; padding: 0; border: 0;
  }
  .menu-usuario { width: 46px; height: 46px; padding: 0; border-radius: 50%; background: var(--surface-color); border: 1px solid var(--border-color); box-shadow: var(--shadow); }
  .menu-submenu { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; }
  .menu-itens { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  .menu a, .menu-botao { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 10.5px; width: auto; flex: 1; min-width: 0; align-items: center; text-align: center; }
  .menu a .rotulo, .menu-botao .rotulo { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .menu a i, .menu-botao i { font-size: 18px; }
  .menu a[data-rotulo]::after, .menu-botao[data-rotulo]::after { display: none !important; }
  .menu a.so-folha { display: none; }
  .menu-mais { display: flex; }
  .menu .bolinha { left: calc(50% + 5px); top: 2px; }
  main { margin: 0; padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .pagina-topo h1, .pagina-cabecalho h1 { font-size: 20px; }
  .pagina-topo, .pagina-cabecalho { min-height: 44px; padding: 0 52px; margin-bottom: 14px; }
  .menu .rotulo { font-size: 9.5px; letter-spacing: .02em; }
}