/* Menu lateral (redesenho de 31/10/2026): um só componente, trilho no computador e gaveta no celular.
   Contrato do desenho: uma identidade por vez (barra do celular = salão; a gaveta repete salão + papel),
   rodapé = só a conta (Ajuda mora no menu da conta), só a lista rola, selo = número ou ponto + palavra,
   foco = anel interno, alvo de 40 px só com mouse fino (44 px no toque), só tokens.
   Camadas: barra do celular 20, barra inferior 30, véu 40, gaveta 50, menu da conta 60, modais do app 100. */
.skip-content { position: fixed; top: -96px; left: 16px; z-index: 110; padding: 12px 16px; background: var(--btn-fill); color: var(--btn-ink); border-radius: 10px; }
.skip-content:focus { top: 8px; }
.mobile-header, .navigation-close { display: none; }
.navigation-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(15 29 23 / .5); }
.nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Trilho (computador) ---------- */
.sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: sticky; top: 0; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; isolation: isolate;
  background: var(--surface); border-right: 1px solid var(--rule); color: var(--ink); }
.sidebar .sidebar-header { display: flex; align-items: center; gap: 12px; flex: none; max-width: none; min-width: 0; padding: 20px 16px 12px; }
.sidebar .sidebar-salon-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); }
.sidebar .sidebar-brand { min-width: 0; flex: 1; align-self: center; }
.sidebar .brand-name { display: block; font: 750 15px/1.3 var(--font-ui); letter-spacing: -.01em; text-transform: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.sidebar .brand-sub { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.sidebar .brand-sub:empty { display: none; }

/* Só a lista rola; as sombras de fim de rolagem só aparecem quando há mais conteúdo (a de baixo some ao chegar no fim). */
.sidebar .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 8px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  scroll-padding-block: 44px;
  background:
    linear-gradient(var(--surface), var(--surface)) top / 100% 24px local no-repeat,
    linear-gradient(var(--surface), var(--surface)) bottom / 100% 24px local no-repeat,
    linear-gradient(rgb(15 29 23 / .34), transparent) top / 100% 18px scroll no-repeat,
    linear-gradient(transparent, rgb(15 29 23 / .34)) bottom / 100% 18px scroll no-repeat; }
:root[data-theme="dark"] .sidebar .sidebar-scroll { background:
    linear-gradient(var(--surface), var(--surface)) top / 100% 24px local no-repeat,
    linear-gradient(var(--surface), var(--surface)) bottom / 100% 24px local no-repeat,
    linear-gradient(rgb(0 0 0 / .95), transparent) top / 100% 20px scroll no-repeat,
    linear-gradient(transparent, rgb(0 0 0 / .95)) bottom / 100% 20px scroll no-repeat; }
.sidebar .sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.sidebar .sidebar-nav > li { flex-shrink: 0; margin: 0; }
.sidebar .nav-group { display: block; padding: 18px 12px 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

.sidebar .nav-link { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  text-decoration: none; font-size: 14.5px; font-weight: 550; color: var(--ink-2); cursor: pointer; transition: none; }
/* 40 px só no menu fixo do computador com mouse; no drawer (< 1024 px) o item fica com 44 px. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .sidebar .nav-link { min-height: 40px; padding-block: 6px; }
  .sidebar .nav-group { padding-top: 14px; }
}
.sidebar .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.sidebar .nav-icon { display: inline-grid; place-items: center; flex: none; width: 20px; opacity: .85; }
.sidebar .nav-label { min-width: max-content; flex: 1; white-space: nowrap; overflow: visible; text-overflow: clip; }
.sidebar .nav-link.active { background: var(--brand-soft); color: var(--brand-text); font-weight: 700; }
.sidebar .nav-link.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--brand); }

/* Selos: número em pílula cheia (só > 0, 99+ no teto); estado = ponto + palavra em ink-2 (contraste nos dois temas). */
.sidebar .nav-badge, .sidebar .nav-step { flex: none; min-width: 22px; height: 22px; margin: 0 0 0 4px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; border: 0; }
.sidebar .nav-badge:empty, .sidebar .nav-step[hidden] { display: none; }
.sidebar .nav-step { padding: 0 9px; white-space: nowrap; }
.sidebar .nav-step:not([hidden]) ~ .nav-badge { display: none; }
.sidebar .nav-state { display: inline-flex; align-items: center; flex: none; gap: 6px; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.sidebar .nav-state[hidden] { display: none; }
.sidebar .nav-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-mute); }
.sidebar .nav-state.is-ok::before { background: var(--ok); }
.sidebar .nav-state.is-wait::before { background: var(--wait); }
.sidebar .nav-state.is-attn::before { background: var(--attn); }

/* Menu da equipe Hermelo (dinâmico): frase curta sob o rótulo. */
.sidebar .nav-link-noted .nav-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.sidebar .nav-link-noted .nav-label { min-width: 0; white-space: normal; }
.sidebar .nav-link-noted .nav-note { color: var(--ink-mute); font-size: 13px; font-weight: 400; line-height: 1.3; }
.sidebar .nav-link-noted.active .nav-note { color: inherit; opacity: .85; }

/* Foco por teclado: anel interno, para a rolagem da lista não cortá-lo. */
.sidebar :is(a, button):focus-visible, .mobile-header :is(a, button):focus-visible, .bottom-bar :is(a, button):focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sidebar .session-menu-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--surface-2); }

/* ---------- Rodapé: só a conta ---------- */
.sidebar .sidebar-footer { position: relative; flex: none; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; margin: 0; padding: 10px; border-top: 1px solid var(--rule); background: var(--surface); }
.sidebar .sidebar-me { position: relative; display: block; min-width: 0; }
.sidebar .sidebar-me .session-who { display: block; flex: none; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 13px; }
.sidebar .session-who-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.sidebar .session-who-link:hover, .sidebar .session-who-link[aria-expanded="true"] { background: var(--surface-2); }
.sidebar .session-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 700; }
.sidebar .session-identity { display: grid; min-width: 0; flex: 1; font-size: 13px; line-height: 1.25; color: var(--ink-mute); overflow-wrap: normal; }
.sidebar .session-identity b { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 14px; font-weight: 700; }
.sidebar .session-chevron { display: inline-grid; flex: none; margin: 0; color: var(--ink-mute); transform: none; transition: none; }
.sidebar .session-chevron svg { width: 18px; height: 18px; }

/* Menu da conta: abre para cima sobre a lista; botões comuns (sem role=menu). */
.session-menu { position: absolute; left: 0; right: 0; bottom: calc(100% - 4px); z-index: 60; display: block; padding: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lg); }
.session-menu[hidden] { display: none; }
.session-menu-email { margin: 0; padding: 8px 10px 6px; font-size: 13px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-menu-email b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.session-menu-email span { display: block; overflow: hidden; text-overflow: ellipsis; }
.session-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 550; text-align: left; cursor: pointer; }
.session-menu-item + .session-menu-item { margin-top: 2px; }
.session-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.session-menu-item[hidden] { display: none; }
.session-menu-icon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--ink-mute); }
.session-menu-icon svg { width: 20px; height: 20px; }
.session-menu-rule { margin: 4px 6px; border: 0; border-top: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) { .session-menu-item { min-height: 40px; } }
.sidebar .connection-status { display: none; }
.sidebar .connection-status:has(.status-dot.disconnected) { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 13px; font-weight: 650; }

/* Tela baixa (computador): menos respiro vertical nos cabeçalhos e grupos; os alvos de 40 px ficam. */
@media (max-height: 759px) and (min-width: 1024px) {
  .sidebar .sidebar-header { padding: 12px 16px 8px; }
  .sidebar .nav-group { padding-top: 8px; padding-bottom: 4px; }
  .sidebar .sidebar-footer { padding-block: 6px; }
}
/* 1280x720 com o Master completo: com mouse, o alvo desce de 40 para 38 px (acima dos 24 px do WCAG 2.2) e a última linha (Ajustes) cabe sem ficar cortada pela sombra. Toque mantém 44 px. */
@media (max-height: 759px) and (min-width: 1024px) and (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .sidebar .nav-link { min-height: 38px; padding-block: 5px; }
  .sidebar .sidebar-header { padding-top: 10px; }
}

/* ---------- Celular: barra com o salão + gaveta ---------- */
@media (max-width: 1023px) {
  #app { display: block; }
  .mobile-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px; min-height: 60px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--rule); background: var(--surface); color: var(--ink); }
  .mobile-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); }
  .mobile-heading { min-width: 0; flex: 1; }
  .mobile-heading strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 750; letter-spacing: -.01em; line-height: 1.5; }
  .navigation-button { display: grid; place-items: center; flex: none; position: relative; width: 44px; height: 44px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); border-radius: 10px; cursor: pointer; }
  .navigation-button:hover { background: var(--surface-2); }
  .mobile-nav-dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface); }
  .mobile-nav-dot[hidden] { display: none; }
  .sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(320px, calc(100vw - 48px)); height: 100dvh; padding: 0; visibility: hidden; transform: translateX(-100%);
    box-shadow: var(--shadow-lg); transition: transform .2s ease, visibility 0s linear .2s; }
  .navigation-open .sidebar { visibility: visible; transform: none; transition: transform .2s ease; }
  .sidebar .sidebar-header { padding: 12px 12px 8px 16px; }
  .sidebar .sidebar-salon-icon { display: grid; }
  .navigation-close { display: grid; }
  .sidebar .sidebar-footer { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  /* Gaveta mais baixa que a lista (360x740, Master cheio): o último item rola até aparecer inteiro, com respiro acima do rodapé. */
  .sidebar .sidebar-scroll { padding-bottom: 20px; scroll-padding-block-end: 20px; }
  .content { padding: 20px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .navigation-open .sidebar { transition: none; } }
/* Nunca mostrar a navegação autenticada nas telas de entrada e recuperação. */
html:is([data-page="login"], [data-page="signup"], [data-page="recover"]) :is(.mobile-header, .navigation-backdrop, .skip-content) { display: none; }

/* ---------- Profissional no celular: sem gaveta; barra inferior Meu dia · Ajuda · Conta ---------- */
.bottom-bar { display: none; }
@media (max-width: 1023px) {
  html[data-role="professional"] #navigation-toggle { display: none; }
  html[data-role="professional"] .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .bottom-bar:not([hidden]) { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px max(6px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); }
  .bottom-bar :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-mute); font: inherit; font-size: 13px; font-weight: 550; text-decoration: none; cursor: pointer; }
  .bottom-bar .is-current, .bottom-bar [aria-expanded="true"] { color: var(--brand-text); background: var(--brand-soft); font-weight: 700; }
  .bottom-bar-icon { display: inline-flex; }
  /* Folha da conta do Profissional: a mesma lista do menu da conta, fixa acima da barra inferior. */
  .session-scrim { z-index: 55; }
  .session-menu.is-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Equipe no celular: a conta à vista na barra de cima. */
.mobile-account { display: none; }
@media (max-width: 1023px) {
  .mobile-account { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 10px 0 4px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
  .mobile-account .session-avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--surface-2); font-size: 13px; font-weight: 700; }
}