/* ============================================================================
   MENU LATERAL RECOLHÍVEL — ERP e CRM (06/10/2026)
   Clínica Dr. Reges Jr. — js/menu-lateral.js põe o botão e o estado
   ----------------------------------------------------------------------------
   É o MESMO arquivo no clinica-erp e no clinica-crm (mesmos bytes); os dois
   caminhos devem ser trocados juntos, como liquid-glass.css.

   Pedido do dono: um botão no topo da barra lateral alterna entre
     · EXPANDIDA (244 px): ícone + rótulo de cada área;
     · RECOLHIDA (72 px): só os ícones, centralizados; os rótulos somem numa
       transição suave e a área de trabalho ganha o espaço NA HORA (a largura
       da barra anima e `.content`, que é `flex: 1`, cresce junto, quadro a
       quadro — nenhum cálculo de largura em JS).
   Mais as diretrizes de UI: fundo preto absoluto (o do tema, intocado); barra
   em vidro jateado PLANO com sombra limpa; botões retangulares de cantos
   8–12 px; ativo e hover mesclando DOURADO #FFD700 e CARAMELO #D4A373; ícones
   inativos em gelo suave; rótulos em sans-serif DO SISTEMA (sem Quiche Sans).

   O ESTADO MORA EM CLASSES NO #app (quem as põe é o JS):
     .ml-recolhido   barra estreita, só ícones
     .ml-sobreposto  tela ≤ 820 px com a barra aberta POR CIMA do conteúdo
     .ml-sem-transicao  primeira pintura / troca de faixa de tela, sem animar

   GEOMETRIA — por que nada "pula" durante a animação. A barra tem 1 px de
   borda e `box-sizing: border-box` (style.css), então a 72 px sobram 70 por
   dentro. Cada peça fica à esquerda com o recuo que a CENTRALIZA a 72 px, e o
   recuo é o mesmo aberta ou fechada: o ícone não se move, quem anda é a borda
   direita da barra, que vai cobrindo o rótulo (overflow da barra e do item).
     botão de alternar  36 px → recuo (70 − 36) / 2 = 17
     brasão             45 px → recuo (70 − 45) / 2 = 12,5
     item do menu       menu 8 + borda 1 + recuo 10 + ícone 32 + 10 + 1 + 8 = 70
     avatar             38 px → recuo (70 − 38) / 2 = 16
   Rótulos de largura FIXA (não encolhem com a barra): o texto não se
   redistribui em várias linhas no meio da animação; só é coberto.

   ESPECIFICIDADE em vez de !important. Toda regra começa por `.app > .sidebar`
   (0,2,0) ou `.app.ml-… > .sidebar` (0,3,0): vence `.sidebar`/`.menu-item`
   de style.css e de liquid-glass-*.css (inclusive a faixa ≤ 820 px de
   style.css, que escondia rótulo, nome, selo e o botão Sair). NADA aqui mexe
   em `display` de `.menu-item`: o app.js esconde itens por permissão com
   `style.display = 'none'`, e isso tem de continuar vencendo.

   CSP: `style-src 'self'` — nenhum <style> por script; tudo mora aqui. O JS
   só escreve `top`/`left` da dica pela CSSOM, que a CSP não alcança.
   ========================================================================== */

/* As larguras moram no #app (e não na barra) porque `.content` também as lê:
   é o recuo dela quando a barra abre por cima, na tela estreita. */
.app {
  --ml-largura: 244px;
  --ml-largura-recolhida: 72px;
}

.app > .sidebar {
  --ml-ouro: #FFD700;
  --ml-caramelo: #D4A373;
  --ml-liga: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
  --ml-gelo: #E9EEF3;
  --ml-gelo-medio: rgba(233, 238, 243, 0.76);
  --ml-gelo-fraco: rgba(233, 238, 243, 0.50);
  --ml-tempo: 0.28s;
  --ml-curva: cubic-bezier(0.22, 1, 0.36, 1);
  /* -apple-system / BlinkMacSystemFont = SF Pro no Mac e no iPhone; Segoe UI
     no Windows; Roboto no Android; Inter onde estiver instalada. É a mesma
     pilha do financeiro e do painel de permissões. */
  --ml-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
              Inter, "Helvetica Neue", Arial, sans-serif;
  /* `.btn` (o Sair) pede var(--lg-fonte) por conta própria: redefinida aqui,
     a variável leva a fonte do sistema até ele sem regra por elemento. */
  --lg-fonte: var(--ml-fonte);

  width: var(--ml-largura);
  font-family: var(--ml-fonte);
  /* Vidro jateado PLANO: desfoque e película escura, sem o gradiente de luz
     nem o brilho interno do vidro líquido; sombra única, limpa. */
  background-image: none;
  background-color: rgba(12, 12, 12, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width var(--ml-tempo) var(--ml-curva);
}

.app.ml-recolhido > .sidebar { width: var(--ml-largura-recolhida); }

/* --- Topo: o botão de alternar -------------------------------------------- */
.app > .sidebar .ml-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 17px 2px;
  white-space: nowrap;
}

.app > .sidebar .ml-alternar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(233, 238, 243, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ml-gelo);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.app > .sidebar .ml-alternar:hover {
  border-color: var(--ml-caramelo);
  background-color: rgba(212, 163, 115, 0.10);
  color: var(--ml-ouro);
}
.app > .sidebar .ml-alternar:focus-visible,
.app > .sidebar .menu-item:focus-visible,
.app > .sidebar #btn-logout:focus-visible {
  outline: 2px solid var(--ml-ouro);
  outline-offset: 2px;
}
.app > .sidebar .ml-alternar svg { width: 18px; height: 18px; display: block; }
/* A seta gira sobre o próprio centro: aponta para a esquerda (recolher) com a
   barra aberta e para a direita (expandir) com ela fechada. */
.app > .sidebar .ml-alternar .ml-seta {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--ml-tempo) var(--ml-curva);
}
.app.ml-recolhido > .sidebar .ml-alternar .ml-seta { transform: rotate(180deg); }

.app > .sidebar .ml-legenda {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ml-gelo-fraco);
}

/* --- Marca ----------------------------------------------------------------- */
.app > .sidebar .sidebar-brand {
  padding: 12px 12.5px 14px;
  gap: 10px;
  font-family: var(--ml-fonte);
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* largura útil aberta: 244 − 2 (bordas) − 25 (recuos) − 45 (brasão) − 10 (vão) */
.app > .sidebar .sidebar-brand > span {
  display: block;
  flex: 0 0 auto;
  width: 162px;
  font-size: 15px;
  line-height: 1.25;
}

/* --- Itens do menu --------------------------------------------------------- */
.app > .sidebar .menu {
  padding: 8px;
  gap: 4px;
}

.app > .sidebar .menu-item {
  position: relative;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ml-gelo-medio);
  font-family: var(--ml-fonte);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.app > .sidebar .menu-item:hover {
  color: #FFFFFF;
  border-color: rgba(212, 163, 115, 0.34);
  background-color: rgba(212, 163, 115, 0.07);
}

/* Ativo: contorno na LIGA dourado → caramelo. `border-image` não respeita
   border-radius, então a liga é o fundo da caixa de borda e uma camada
   opaca cobre o miolo (três camadas: tinta dourada leve, miolo, liga). */
.app > .sidebar .menu-item.active {
  color: #FFFFFF;
  font-weight: 600;
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(212, 163, 115, 0.07)) padding-box,
    linear-gradient(#121110, #121110) padding-box,
    var(--ml-liga) border-box;
  box-shadow: 0 8px 20px -14px rgba(255, 215, 0, 0.55);
}

/* Rótulo: largura fixa, só some (opacidade) e é coberto pela borda da barra.
   Continua na árvore de acessibilidade — é ele o NOME do botão recolhido. */
.app > .sidebar .menu-item > span:not(.chat-badge) {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  opacity: 1;
  transition: opacity 0.18s ease 0.06s;
}

/* Chapa do ícone: quadrada, cantos 8, gelo quando inativa. Vence a cor por
   módulo de liquid-glass-*.css / agenda.css (--mi-cor), que segue declarada
   lá e deixa de ser lida aqui. Sem o "pulo" girado do .lg-glifo:hover. */
.app > .sidebar .menu-item .lg-glifo-vetor {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  border: 1px solid rgba(233, 238, 243, 0.14);
  background-image: none;
  background-color: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  color: var(--ml-gelo);
  transform: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.app > .sidebar .menu-item .lg-glifo-vetor > svg {
  width: 18px;
  height: 18px;
  filter: none;
}

/* Hover e ativo: traço do ícone na LIGA (gradiente do <svg class="ml-defs">
   que o JS põe na barra; `#FFD700` é a cor de reserva se ele faltar) e chapa
   com aro caramelo/dourado. Os pontos cheios (fill="currentColor") ficam
   dourados pela `color`. */
.app > .sidebar .menu-item:hover .lg-glifo-vetor {
  color: var(--ml-ouro);
  border-color: rgba(212, 163, 115, 0.60);
  background-color: rgba(212, 163, 115, 0.08);
}
.app > .sidebar .menu-item.active .lg-glifo-vetor {
  color: var(--ml-ouro);
  border-color: rgba(255, 215, 0, 0.62);
  background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(212, 163, 115, 0.12));
  background-color: rgba(0, 0, 0, 0.35);
}
.app > .sidebar .menu-item:hover .lg-glifo-vetor > svg,
.app > .sidebar .menu-item.active .lg-glifo-vetor > svg {
  stroke: url(#ml-liga-traco) #FFD700;
}

/* Contador de não-lidas do Chat (chat.css): na barra aberta segue na ponta
   direita; recolhida, vira selo sobre o canto do ícone. */
.app > .sidebar .menu-item .chat-badge { display: block; flex: 0 0 auto; }

/* O <svg> dos gradientes não ocupa lugar nenhum (e não pode ser display:none:
   o Chrome deixa de pintar gradiente de <svg> fora da renderização). */
.app > .sidebar .ml-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Rodapé: usuário e Sair ------------------------------------------------ */
.app > .sidebar .sidebar-foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app > .sidebar .user-chip { gap: 10px; white-space: nowrap; }
.app > .sidebar .user-chip > .avatar { display: grid; flex: 0 0 38px; }
/* largura útil aberta: 244 − 2 − 32 (recuos) − 38 (avatar) − 10 (vão) */
.app > .sidebar .user-chip > div:not(.avatar) {
  display: block;
  flex: 0 0 auto;
  width: 162px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 0.18s ease 0.06s;
}
.app > .sidebar .user-nome { overflow: hidden; text-overflow: ellipsis; }

.app > .sidebar #btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 0;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--ml-fonte);
  transition: gap var(--ml-tempo) var(--ml-curva), border-color 0.2s ease, color 0.2s ease;
}
.app > .sidebar #btn-logout:hover { border-color: rgba(212, 163, 115, 0.55); color: var(--ml-ouro); }
.app > .sidebar #btn-logout .ml-sair-icone { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.app > .sidebar #btn-logout .ml-rotulo {
  display: block;
  max-width: 120px;
  overflow: hidden;
  opacity: 1;
  transition: max-width var(--ml-tempo) var(--ml-curva), opacity 0.18s ease 0.06s;
}

/* ==========================================================================
   RECOLHIDA — só ícones
   ========================================================================== */
.app.ml-recolhido > .sidebar .ml-legenda,
.app.ml-recolhido > .sidebar .sidebar-brand > span,
.app.ml-recolhido > .sidebar .menu-item > span:not(.chat-badge),
.app.ml-recolhido > .sidebar .user-chip > div:not(.avatar) {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.app.ml-recolhido > .sidebar #btn-logout { gap: 0; }
.app.ml-recolhido > .sidebar #btn-logout .ml-rotulo {
  max-width: 0;
  opacity: 0;
  transition: max-width var(--ml-tempo) var(--ml-curva), opacity 0.12s ease;
}
.app.ml-recolhido > .sidebar .menu-item .chat-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  box-shadow: 0 0 0 2px #121110;
}

/* ==========================================================================
   DICA (tooltip) da barra recolhida — filha do <body>, por isso
   `portal-overlay` no elemento: sem a classe, a regra
   `.lg-ambiente > *:not(.portal-overlay)` a rebaixaria a `position: relative`
   e ela iria parar no fim da página.
   ========================================================================== */
.ml-dica {
  position: fixed;
  z-index: 3200;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 163, 115, 0.55);
  background-color: rgba(10, 10, 10, 0.94);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.85);
  color: #F5F1E6;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
               Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-4px, -50%);
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.ml-dica.ml-dica-visivel { opacity: 1; transform: translate(0, -50%); }
.ml-dica[hidden] { display: none; }

/* ==========================================================================
   TELA ESTREITA (≤ 820 px) — a barra nasce recolhida; o botão a abre POR
   CIMA do conteúdo, que não se mexe (o recuo de 82 px = 72 da barra + 10 do
   vão ocupa o lugar dela). Fecha no item escolhido, no Esc ou no véu.
   ========================================================================== */
@media (max-width: 820px) {
  .app.ml-sobreposto > .sidebar {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 60;
    width: min(var(--ml-largura), calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    background-color: rgba(12, 12, 12, 0.90);
  }
  /* Fechando: encolhe ainda por cima (o JS tira `ml-sobreposto` no fim). */
  .app.ml-sobreposto.ml-recolhido > .sidebar { width: var(--ml-largura-recolhida); }
  .app.ml-sobreposto > .content { margin-left: calc(var(--ml-largura-recolhida) + 10px); }
  .app.ml-sobreposto::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, 0.55);
    animation: ml-veu-entra 0.2s ease;
  }
  .app.ml-sobreposto.ml-recolhido::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
}

@keyframes ml-veu-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   SEM ANIMAÇÃO — primeira pintura, troca de faixa de tela e quem pediu menos
   movimento ao sistema.
   ========================================================================== */
.app.ml-sem-transicao > .sidebar,
.app.ml-sem-transicao > .sidebar * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .app > .sidebar,
  .app > .sidebar *,
  .ml-dica { transition: none !important; }
  .app.ml-sobreposto::after { animation: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app > .sidebar { background-color: rgba(12, 12, 12, 0.96); }
}

@media (prefers-reduced-transparency: reduce) {
  .app > .sidebar {
    background-color: #0E0E0E;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media print {
  .ml-dica { display: none !important; }
}