/* Menu lateral na estética do Cortexis Ops (vídeo de referência menu.mp4):
   fundo liso, itens com ícones de contorno e bastante respiro, e o item
   ativo numa pílula azul viva com brilho que desliza de um item para o
   outro (menu.js). Um botão redondo na borda recolhe o menu para só os
   ícones. A conta fica embaixo, como um cartão de perfil. No tablet e no
   celular o menu mantém o arranjo de faixa; muda só o destaque. */

:root {
  --menu-bg: #f6f7f9;
  --menu-ink: #1f2532;
  --menu-muted: #6b7384;
  --menu-hover: rgb(15 23 42 / 5%);
  --menu-field: rgb(15 23 42 / 5.5%);
  --menu-raised: #ffffff;
  /* O mesmo azul de carimbo do botão Novo documento, e o mesmo vermelho do prazo vencido. */
  --menu-accent: var(--brand);
  --menu-accent-solid: var(--brand);
  --menu-glow: 0 4px 10px -5px rgb(20 34 80 / 55%), inset 0 1px 0 rgb(255 255 255 / 12%);
  --menu-alert: var(--overdue);
  --menu-online: #22c55e;
}
:root[data-theme="dark"] {
  --menu-bg: #16171b;
  --menu-ink: #e9eaee;
  --menu-muted: #8f94a0;
  --menu-hover: rgb(255 255 255 / 6%);
  --menu-field: rgb(255 255 255 / 7%);
  --menu-raised: #24262c;
  --menu-glow: 0 4px 12px -5px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 12%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --menu-bg: #16171b;
    --menu-ink: #e9eaee;
    --menu-muted: #8f94a0;
    --menu-hover: rgb(255 255 255 / 6%);
    --menu-field: rgb(255 255 255 / 7%);
    --menu-raised: #24262c;
    --menu-glow: 0 4px 12px -5px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 12%);
  }
}

/* Ícones dos itens (máscaras: herdam a cor do texto). */
.status-list .nav-button::before,
.admin-nav-item::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 0;
  background: currentColor;
  opacity: 0.8;
  -webkit-mask: var(--menu-icon) center / contain no-repeat;
  mask: var(--menu-icon) center / contain no-repeat;
}
.nav-button[data-filter="all"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5.5' height='5.5' rx='1.5'/%3E%3Crect x='11.5' y='3' width='5.5' height='5.5' rx='1.5'/%3E%3Crect x='3' y='11.5' width='5.5' height='5.5' rx='1.5'/%3E%3Crect x='11.5' y='11.5' width='5.5' height='5.5' rx='1.5'/%3E%3C/svg%3E"); }
.nav-button[data-filter="soon"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10.5' r='6.5'/%3E%3Cpath d='M10 7v3.7l2.4 1.6M7.5 2.5h5'/%3E%3C/svg%3E"); }
.nav-button[data-filter="overdue"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8a4.5 4.5 0 0 1 9 0v3.2l1.5 2.6H4l1.5-2.6z'/%3E%3Cpath d='M8.3 16.3a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.nav-button[data-filter="none"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='13' height='12.5' rx='1.6'/%3E%3Cpath d='M3.5 8h13M7 2.8v2.6M13 2.8v2.6M7.2 12.2h5.6'/%3E%3C/svg%3E"); }
.nav-button[data-filter="trash"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5h13M8 5.5V3.8h4v1.7M5.3 5.5l.8 10.7a1 1 0 0 0 1 .9h5.8a1 1 0 0 0 1-.9l.8-10.7M8.5 9v5M11.5 9v5'/%3E%3C/svg%3E"); }
.admin-nav-item[data-archive-nav="painel"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='14' rx='2'/%3E%3Cpath d='M3 8h14M8 8v9'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="caixas"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='15' height='4' rx='1.2'/%3E%3Cpath d='M4 7.5v8A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-8M8 11h4'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="documentos"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h6.5L15 6v11.5H5z'/%3E%3Cpath d='M11.5 2.5V6H15M7.5 10h5M7.5 13h3.5'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="emprestimos"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3'/%3E%3Cpath d='M4.5 16.5a5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="eliminacoes"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h6.5L15 6v11.5H5z'/%3E%3Cpath d='M8 12.5h4'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="guarda"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='13' height='12.5' rx='1.6'/%3E%3Cpath d='M3.5 8h13M7 2.8v2.6M13 2.8v2.6M8.2 11.2l3.6 3.6M11.8 11.2l-3.6 3.6'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="sem-prazo"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='13' height='12.5' rx='1.6'/%3E%3Cpath d='M3.5 8h13M7 2.8v2.6M13 2.8v2.6M7.2 12.2h5.6'/%3E%3C/svg%3E"); }
.nav-button[data-archive-status="lixeira"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5h13M8 5.5V3.8h4v1.7M5.3 5.5l.8 10.7a1 1 0 0 0 1 .9h5.8a1 1 0 0 0 1-.9l.8-10.7M8.5 9v5M11.5 9v5'/%3E%3C/svg%3E"); }
.admin-nav-item[data-kind="empresa"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17V4.5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1V17M12.5 8h3a1 1 0 0 1 1 1v8M2.5 17h15M6.5 6.5h3M6.5 9.5h3M6.5 12.5h3'/%3E%3C/svg%3E"); }
.admin-nav-item[data-kind="emissor"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 10 4l7 3.5-7 3.5z'/%3E%3Cpath d='M3 11l7 3.5 7-3.5M3 14.5 10 18l7-3.5'/%3E%3C/svg%3E"); }
.admin-nav-item[data-kind="sala"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17V3.5h9.5V17M2.5 17h15M10.5 10.2v.1'/%3E%3C/svg%3E"); }
.admin-nav-item[data-kind="corredor"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17 8 3M14 17 12 3M10 5v2M10 9.5v2M10 14v2'/%3E%3C/svg%3E"); }
.admin-nav-item[data-kind="armario"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='12' height='15' rx='1.3'/%3E%3Cpath d='M10 2.5v15M8 9.5v1.5M12 9.5v1.5'/%3E%3C/svg%3E"); }
.admin-nav-item[data-kind="prateleira"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5h14M3 11h14M3 16.5h14M4.5 5.5v11M15.5 5.5v11'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="empresa"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17V4.5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1V17M12.5 8h3a1 1 0 0 1 1 1v8M2.5 17h15M6.5 6.5h3M6.5 9.5h3M6.5 12.5h3'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="pastas"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6a1.5 1.5 0 0 1 1.5-1.5h3.6l1.7 2H16a1.5 1.5 0 0 1 1.5 1.5v6.5A1.5 1.5 0 0 1 16 16H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="categorias"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3.5h6.2l7.3 7.3a1.4 1.4 0 0 1 0 2l-4.2 4.2a1.4 1.4 0 0 1-2 0L3 9.7z'/%3E%3Ccircle cx='6.6' cy='7.1' r='1.1'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="usuarios"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7' r='3'/%3E%3Cpath d='M2.5 16.5a5 5 0 0 1 10 0M13 4.3a3 3 0 0 1 0 5.4M14.5 12.2a5 5 0 0 1 3 4.3'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="perfis"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 16 5v4.5c0 3.8-2.6 6.6-6 8-3.4-1.4-6-4.2-6-8V5z'/%3E%3Cpath d='m7.5 10 1.8 1.8L13 8'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="backups"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6c0-1.4 2.7-2.5 6-2.5s6 1.1 6 2.5-2.7 2.5-6 2.5S4 7.4 4 6z'/%3E%3Cpath d='M4 6v8c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V6M4 10c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="auditoria"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h6.5L15 6v11.5H5z'/%3E%3Cpath d='M11.5 2.5V6H15M7.5 10.5l1.6 1.6L12.5 9'/%3E%3C/svg%3E"); }
.admin-nav-item[data-section="avisos"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8a4.5 4.5 0 0 1 9 0v3.2l1.5 2.6H4l1.5-2.6z'/%3E%3Cpath d='M8.3 16.3a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.folder-button::before,
.nav-button.folder-button::before {
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6a1.5 1.5 0 0 1 1.5-1.5h3.6l1.7 2H16a1.5 1.5 0 0 1 1.5 1.5v6.5A1.5 1.5 0 0 1 16 16H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6a1.5 1.5 0 0 1 1.5-1.5h3.6l1.7 2H16a1.5 1.5 0 0 1 1.5 1.5v6.5A1.5 1.5 0 0 1 16 16H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Vencidos: um ponto vermelho no ícone, como os avisos do vídeo. */
.nav-button[data-filter="overdue"] {
  position: relative;
}
.nav-button[data-filter="overdue"].has-alert::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 25px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--menu-alert);
  box-shadow: 0 0 0 2px var(--menu-bg);
}
.folder-search-empty {
  margin: 4px 12px;
  color: var(--menu-muted);
  font-size: 13px;
}

/* Destaque: em todas as larguras, o item ativo fica azul. */
.nav-button[aria-pressed="true"],
.admin-nav-item[aria-current="page"],
.sidebar-link[aria-pressed="true"],
#admin-button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--menu-accent);
  box-shadow: var(--menu-glow);
  color: var(--on-brand);
  font-weight: 600;
}
.nav-button[aria-pressed="true"] .nav-count,
.admin-nav-item[aria-current="page"] .nav-count {
  color: color-mix(in srgb, var(--on-brand) 85%, transparent);
}
.nav-button[aria-pressed="true"]::before,
.admin-nav-item[aria-current="page"]::before,
.folder-button[aria-pressed="true"]::before {
  opacity: 1;
  color: var(--on-brand);
  background: var(--on-brand);
}
.folder-button[aria-pressed="true"] .folder-toggle {
  color: rgb(255 255 255 / 85%);
}

.sidebar-collapse {
  display: none;
}
.menu-search {
  display: none;
}

/* ---------- Computador ---------- */
@media (min-width: 1081px) {
  /* Só ao recolher ou abrir: ao arrastar a alça, a largura muda na hora. */
  #application.is-menu-animating {
    transition: grid-template-columns 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar {
    gap: 20px;
    padding: 22px 14px 18px;
    overflow-x: hidden;
    border-right: 1px solid var(--line);
    background: var(--menu-bg);
    color: var(--menu-ink);
  }

  /* Topo: a empresa como o cartão de perfil do vídeo. */
  .sidebar .brand {
    gap: 10px;
    padding: 0 12px;
  }
  /* Logo quadrado com os cantos arredondados (como na tela de entrada). */
  .sidebar .brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgb(16 22 38 / 12%);
  }
  .sidebar .brand-mark.has-logo {
    padding: 4px;
  }
  /* O nome e a legenda quebram linha em vez de cortar (até duas linhas cada). */
  .sidebar .brand-name,
  .sidebar .brand-caption {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .sidebar .brand-name {
    color: var(--menu-ink);
    font-size: 14px;
    font-weight: 650;
  }
  .sidebar .brand-caption {
    margin-top: 1px;
    color: var(--menu-muted);
    font-size: 12px;
  }

  /* Busca em pílula, fora da faixa que esmaece: senão a borda de cima some. */
  .menu-search {
    display: flex;
    align-items: center;
    gap: 9px;
    order: 2;
    height: 38px;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--menu-field);
    color: var(--menu-muted);
    cursor: text;
  }
  .menu-search svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .menu-search input {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 24px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--menu-ink);
    font-size: 13.5px;
    line-height: 24px;
    appearance: none;
    -webkit-appearance: none;
  }
  .menu-search input::-webkit-search-decoration,
  .menu-search input::-webkit-search-cancel-button,
  .menu-search input::-webkit-search-results-button {
    display: none;
  }
  .menu-search input::placeholder {
    color: var(--menu-muted);
  }
  .menu-search:focus-within {
    box-shadow: 0 0 0 2px var(--menu-accent-solid);
  }
  .sidebar:has(#folders-section[hidden]) .menu-search {
    display: none;
  }

  /* Rótulos das seções, pequenos e discretos. */
  .sidebar .rail-label {
    margin-bottom: 6px;
    padding: 0 12px;
    color: var(--menu-muted);
    font-size: 12px;
    font-weight: 500;
  }
  .sidebar .rail-section {
    margin-top: 22px;
  }
  .sidebar .rail-action {
    color: var(--menu-muted);
  }
  .sidebar .rail-action:hover {
    background: var(--menu-hover);
    color: var(--menu-ink);
  }

  /* Itens */
  .sidebar .nav-list,
  .sidebar .admin-nav,
  .sidebar .archive-rail-registries {
    gap: 3px;
  }
  .sidebar .nav-button {
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--menu-ink);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .sidebar .nav-button > span:first-child,
  .sidebar .admin-nav-item > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar .nav-button:hover {
    background: var(--menu-hover);
    color: var(--menu-ink);
  }
  .sidebar .nav-count {
    color: var(--menu-muted);
    font-size: 12.5px;
  }
  .folder-button.is-subfolder {
    padding-left: calc(12px + var(--depth, 0) * 14px);
  }
  /* A seta das pastas com subpastas ocupa o lugar do ícone, com a mesma largura. */
  .sidebar .folder-toggle {
    width: 18px;
  }
  /* Pastas com nome longo: o nome quebra em várias linhas, sem cortar; o
     ícone, a seta e a contagem ficam na altura da primeira linha. */
  .sidebar .folder-list {
    min-width: 0;
  }
  .sidebar .folder-button {
    align-items: flex-start;
    min-height: 40px;
    padding-block: 10px;
    white-space: normal;
  }
  .sidebar .folder-button .folder-label {
    overflow: visible;
    line-height: 20px;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .sidebar .folder-button::before {
    margin-top: 1px;
  }
  .sidebar .folder-button .folder-toggle {
    height: 20px;
  }
  .sidebar .folder-button .nav-count {
    line-height: 20px;
  }
  /* A área que rola esmaece no alto e embaixo: um item pela metade fica
     claramente "continua", e não cortado. */
  .sidebar .sidebar-rail,
  .sidebar .admin-rail {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    /* Espaço do tamanho do esmaecido: parado, nada fica sob ele. A busca fica
       fora desta faixa, senão a pílula perde a borda de cima. */
    padding-block: 16px 24px;
    margin-top: -10px;
    /* A barra de rolagem fica na margem do menu, fora dos itens e dos
       textos: a área avança sobre a margem e devolve o espaço por dentro. */
    margin-right: -12px;
    padding-right: 12px;
    scrollbar-color: color-mix(in srgb, var(--menu-muted) 45%, transparent) transparent;
    scrollbar-width: thin;
  }
  /* A busca está logo acima, separada pelo espaço do menu: sobe um pouco a
     faixa sem alcançar a pílula. */
  .sidebar .sidebar-rail {
    margin-top: -8px;
  }
  .sidebar .sidebar-rail::-webkit-scrollbar,
  .sidebar .admin-rail::-webkit-scrollbar {
    width: 6px;
  }
  .sidebar .sidebar-rail::-webkit-scrollbar-thumb,
  .sidebar .admin-rail::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: color-mix(in srgb, var(--menu-muted) 45%, transparent);
  }

  /* A pílula que desliza até o item ativo (menu.js dá a posição). */
  .has-indicator {
    position: relative;
  }
  .has-indicator > * {
    position: relative;
    z-index: 1;
  }
  .has-indicator::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: var(--indicator-width, 0);
    height: var(--indicator-height, 0);
    border-radius: 10px;
    background: var(--menu-accent);
    box-shadow: var(--menu-glow);
    opacity: var(--indicator-opacity, 0);
    transform: translate(var(--indicator-left, 0), var(--indicator-top, 0));
    pointer-events: none;
  }
  .has-indicator.is-indicator-ready::before {
    transition:
      transform 340ms cubic-bezier(0.34, 1.3, 0.5, 1),
      width 340ms cubic-bezier(0.34, 1.3, 0.5, 1),
      height 340ms cubic-bezier(0.34, 1.3, 0.5, 1),
      opacity 160ms ease;
  }
  .has-indicator .nav-button[aria-pressed="true"],
  .has-indicator .admin-nav-item[aria-current="page"] {
    background: transparent;
    box-shadow: none;
  }
  /* O item ativo usa a cor do carimbo, a mesma do botão Novo documento. */
  .sidebar .nav-button[aria-pressed="true"],
  .sidebar .admin-nav-item[aria-current="page"],
  .sidebar .nav-button[aria-pressed="true"]:hover,
  .sidebar .admin-nav-item[aria-current="page"]:hover {
    color: var(--on-brand);
  }

  /* Voltar aos documentos (Administração). */
  .sidebar .admin-nav-back {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--menu-field);
    color: var(--menu-ink);
    white-space: nowrap;
  }
  .sidebar .admin-nav-back:hover {
    background: var(--menu-hover);
  }

  /* Ações: novo documento e os módulos. */
  .sidebar .sidebar-primary {
    min-height: 40px;
    border-color: transparent;
    border-radius: 10px;
    background: var(--menu-accent);
    box-shadow: var(--menu-glow);
    color: var(--on-brand);
    white-space: nowrap;
  }
  .sidebar .sidebar-primary:hover {
    filter: brightness(1.08);
  }
  .sidebar .module-switch {
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: var(--menu-field);
  }
  .sidebar .module-link {
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    place-items: center start;
    column-gap: 8px;
    min-height: 44px;
    padding: 4px 6px;
    border-radius: 9px;
    color: var(--menu-muted);
    text-align: left;
    white-space: nowrap;
  }
  .sidebar .module-link strong {
    font-size: 12.5px;
  }
  .sidebar .module-link .menu-icon {
    grid-row: span 2;
    width: 18px;
    height: 18px;
  }
  .sidebar .module-link small {
    font-size: 11px;
  }
  .sidebar .module-link[aria-current="page"] {
    background: var(--menu-raised);
    color: var(--menu-ink);
    box-shadow: 0 1px 3px rgb(16 22 38 / 14%);
  }
  .sidebar .module-link[aria-current="page"] .menu-icon {
    color: var(--menu-accent-solid);
  }

  /* Rodapé: Administração, a conta como cartão de perfil e as ações. */
  .sidebar .sidebar-foot {
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .sidebar .sidebar-link,
  .sidebar #admin-button {
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--menu-ink);
    font-weight: 500;
    white-space: nowrap;
  }
  .sidebar .sidebar-link:hover {
    background: var(--menu-hover);
  }
  .sidebar .sidebar-link[aria-pressed="true"],
  .sidebar #admin-button[aria-pressed="true"] {
    border-color: transparent;
    background: var(--menu-accent);
    box-shadow: var(--menu-glow);
    color: var(--on-brand);
  }
  .sidebar .menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .account-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 12px;
  }
  .account-avatar {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--menu-accent);
    color: var(--on-brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .account-avatar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--menu-online);
    box-shadow: 0 0 0 2px var(--menu-bg);
  }
  .account-text {
    display: grid;
    min-width: 0;
    line-height: 1.25;
  }
  .account-name {
    overflow: hidden;
    color: var(--menu-ink);
    font-size: 13.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-foot .account-label {
    padding: 0;
    color: var(--menu-muted);
    font-size: 12px;
  }
  .sidebar-foot-actions {
    gap: 4px;
  }
  .sidebar-foot-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--menu-muted);
    font-size: 13px;
    white-space: nowrap;
  }
  .sidebar-foot-actions .button:hover {
    background: var(--menu-hover);
    color: var(--menu-ink);
  }
  .sidebar-foot-actions .menu-icon,
  .sidebar-foot-actions .theme-toggle svg {
    width: 18px;
    height: 18px;
  }

  /* Botão redondo na borda: recolhe e abre o menu. */
  .sidebar-collapse {
    position: fixed;
    /* Abaixo do meio, como no vídeo. */
    top: 68%;
    left: 250px;
    z-index: 25;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--menu-raised);
    box-shadow: 0 2px 8px rgb(16 22 38 / 18%);
    color: var(--menu-ink);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 150ms ease;
  }
  .is-menu-animating .sidebar-collapse {
    transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms ease;
  }
  .sidebar-collapse:hover {
    background: var(--menu-accent-solid);
    color: var(--on-brand);
  }
  .sidebar-collapse svg {
    width: 14px;
    height: 14px;
    transition: transform 280ms ease;
  }

  /* ---------- Recolhido: só os ícones ---------- */
  #application.is-menu-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .is-menu-collapsed .sidebar-collapse {
    left: 62px;
  }
  .is-menu-collapsed .sidebar-collapse svg {
    transform: rotate(180deg);
  }
  .is-menu-collapsed .sidebar {
    padding-inline: 12px;
  }
  .is-menu-collapsed .sidebar .brand {
    justify-content: center;
    padding: 0;
  }
  .is-menu-collapsed .brand > div:not(.brand-mark),
  .is-menu-collapsed .sidebar .rail-label,
  .is-menu-collapsed .sidebar .nav-count,
  .is-menu-collapsed .sidebar .label-long,
  .is-menu-collapsed .sidebar .label-short,
  .is-menu-collapsed .sidebar .menu-text,
  .is-menu-collapsed .sidebar .module-link strong,
  .is-menu-collapsed .sidebar .module-link small,
  .is-menu-collapsed .sidebar-primary span,
  .is-menu-collapsed .menu-search input,
  .is-menu-collapsed .account-text,
  .is-menu-collapsed #folders-section {
    display: none;
  }
  .is-menu-collapsed .sidebar .nav-button,
  .is-menu-collapsed .sidebar .sidebar-link {
    justify-content: center;
    width: 44px;
    margin-inline: auto;
    padding: 0;
  }
  .is-menu-collapsed .sidebar .nav-button > span:first-child,
  .is-menu-collapsed .sidebar .admin-nav-item > span:first-child {
    display: none;
  }
  .is-menu-collapsed .sidebar .admin-nav-item {
    font-size: 0;
  }
  .is-menu-collapsed .nav-button[data-filter="overdue"].has-alert::after {
    left: 25px;
  }
  .is-menu-collapsed .menu-search {
    justify-content: center;
    width: 44px;
    margin-inline: auto;
    padding: 0;
    cursor: pointer;
  }
  .is-menu-collapsed .sidebar .sidebar-primary {
    width: 44px;
    margin-inline: auto;
    padding: 0;
  }
  .is-menu-collapsed .sidebar .module-switch {
    grid-template-columns: 1fr;
    width: 52px;
    margin-inline: auto;
  }
  .is-menu-collapsed .sidebar .module-link {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }
  .is-menu-collapsed .sidebar .module-link .menu-icon {
    grid-row: auto;
  }
  .is-menu-collapsed .sidebar .admin-nav-back {
    justify-content: center;
    width: 44px;
    margin-inline: auto;
    padding: 9px 0;
    font-size: 0;
  }
  .is-menu-collapsed .sidebar .admin-nav-back span {
    font-size: 16px;
  }
  .is-menu-collapsed .account-card {
    justify-content: center;
    padding: 0;
  }
  .is-menu-collapsed .sidebar-foot-actions {
    flex-direction: column;
    align-items: center;
  }
  .is-menu-collapsed .sidebar-foot-actions .button {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .is-menu-collapsed .theme-toggle {
    margin-left: 0;
  }
}

/* ---------- Tablet e celular: a faixa de sempre, sem os ícones novos ---------- */
@media (max-width: 1080px) {
  .sidebar .menu-icon,
  .status-list .nav-button::before,
  .admin-nav-item::before {
    display: none;
  }
  .status-list .nav-button::before {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    opacity: 1;
    -webkit-mask: none;
    mask: none;
  }
  .status-list .nav-button[data-filter="soon"]::before { background: var(--soon); }
  .status-list .nav-button[data-filter="overdue"]::before { background: var(--overdue); }
  .status-list .nav-button[data-filter="trash"]::before { background: var(--muted); }
  .status-list .nav-button[aria-pressed="true"]::before { background: var(--on-brand); }
  .nav-button[data-filter="overdue"].has-alert::after { display: none; }
  .account-avatar,
  .account-name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #application,
  .sidebar-collapse,
  .sidebar-collapse svg,
  .has-indicator.is-indicator-ready::before {
    transition: none;
  }
}

/* Etiqueta com o nome do item, ao lado do ícone, com o menu recolhido. */
.menu-tip {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: 6px 11px;
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 45%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  transform: translateY(-50%);
  animation: menu-tip-in 120ms ease;
}
.menu-tip[hidden] {
  display: none;
}
.menu-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  border-top: 5px solid transparent;
  border-right: 5px solid #111827;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
:root[data-theme="dark"] .menu-tip {
  background: #eef0f4;
  color: #111827;
}
:root[data-theme="dark"] .menu-tip::before {
  border-right-color: #eef0f4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .menu-tip {
    background: #eef0f4;
    color: #111827;
  }
  :root:not([data-theme="light"]) .menu-tip::before {
    border-right-color: #eef0f4;
  }
}
@keyframes menu-tip-in {
  from { opacity: 0; transform: translate(-4px, -50%); }
  to { opacity: 1; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-tip { animation: none; }
}