/* Artivia EAE — Login & Dashboard Layout */

/* ═══════════════════════════════════
   SKIP LINK (acessibilidade)
═══════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  background: var(--color-primary, #6366f1);
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0 0 var(--r-md, 6px) 0;
  transition: top 0.1s;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════
   LOGIN
═══════════════════════════════════ */

.login-root {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
}

/* Left panel — brand */
.login-panel-brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 3rem;
  background: var(--zinc-950);
  position: relative;
  overflow: hidden;
}

/* Subtle grid pattern */
.login-panel-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.brand-content {
  position: relative;
  z-index: 1;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 4rem;
}

.brand-logo-mark {
  width: 2rem;
  height: 2rem;
  background: var(--color-primary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.brand-logo-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}

.brand-headline {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  max-width: 420px;
}

.brand-sub {
  font-size: 0.9375rem;
  color: var(--zinc-400);
  line-height: 1.6;
  max-width: 380px;
  margin-bottom: 3rem;
}

.brand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.brand-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--zinc-400);
  font-size: 0.875rem;
}

.brand-feature-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zinc-500);
  flex-shrink: 0;
}

.brand-footer {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--zinc-600);
}

/* Right panel — form */
.login-panel-form {
  width: clamp(320px, 38%, 480px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-surface);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3.5vw, 2.75rem);
  border-left: 1px solid var(--color-border);
}

.login-form-header { margin-bottom: 2rem; }

.login-form-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  margin-bottom: 0.375rem;
}

.login-form-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.login-error {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1.25rem;
  background: var(--color-danger-subtle);
  border: 1px solid var(--color-danger-muted);
  border-radius: var(--r-lg);
  font-size: 0.8125rem;
  color: var(--color-danger, #9f1239);
}
.login-error.show { display: flex; }

.login-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-field { display: flex; flex-direction: column; }

.login-forgot {
  font-size: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--t-fast);
}
.login-forgot:hover { opacity: 1; text-decoration: underline; }

.login-submit {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.5625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background var(--t-fast);
  letter-spacing: -0.01em;
}
.login-submit:hover:not(:disabled) { background: var(--color-primary-hover); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.login-form-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.8;
}

/* ═══════════════════════════════════
   DEMO LOGIN PAGE
═══════════════════════════════════ */

.demo-root {
  min-height: 100vh;
  background: #07071a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.25rem 3rem;
}

.demo-top {
  width: 100%;
  max-width: 920px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 0;
}

.demo-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: .35rem .875rem;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.demo-back-btn:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); }

.demo-hero {
  text-align: center;
  padding: 2.25rem 0 1.75rem;
  max-width: 520px;
}

.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 999px;
  padding: .3rem .875rem;
  font-size: .72rem;
  font-weight: 700;
  color: #6ee7b7;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.125rem;
}

.demo-title {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.045em;
  margin-bottom: .625rem;
  line-height: 1.1;
}

.demo-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.4);
  line-height: 1.65;
}

.demo-profiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
  width: 100%;
  max-width: 920px;
}

@media (max-width: 700px) { .demo-profiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .demo-profiles { grid-template-columns: 1fr; } }

.demo-profile-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1.125rem 1rem 1.125rem 1.125rem;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms, background 150ms, transform 120ms;
  width: 100%;
}
.demo-profile-card:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.demo-profile-card:active { transform: translateY(0); }
.demo-profile-card:focus-visible { background: rgba(255,255,255,.06); outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }
.demo-profile-card:disabled { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }

.demo-profile-avatar {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -.02em;
}

.demo-profile-info { flex: 1; min-width: 0; }

.demo-profile-name {
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-profile-role {
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}

.demo-profile-desc {
  font-size: .775rem;
  color: rgba(255,255,255,.35);
  line-height: 1.45;
}

.demo-profile-arrow {
  color: rgba(255,255,255,.18);
  flex-shrink: 0;
  margin-top: .1rem;
  display: flex;
  align-items: center;
  transition: color 150ms, transform 150ms;
}
.demo-profile-card:hover .demo-profile-arrow { color: rgba(255,255,255,.55); transform: translateX(2px); }

.demo-profile-skeleton {
  height: 88px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  animation: demo-pulse 1.5s ease-in-out infinite;
}
@keyframes demo-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.demo-note {
  margin-top: 2rem;
  font-size: .775rem;
  color: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.demo-mode-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .875rem;
  border-radius: .55rem;
  border: none;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: rgba(255,255,255,.4);
  background: transparent;
  transition: background 150ms, color 150ms;
}
.demo-mode-btn:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.demo-mode-btn.demo-mode-active { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }

/* ═══════════════════════════════════
   DASHBOARD
═══════════════════════════════════ */

.app-root {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  overflow: hidden;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.875rem;
  height: var(--topbar-h, 3.5rem);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--sidebar-bg);
}

.sidebar-logo-mark {
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 75%, #6d28d9) 100%);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.sidebar-logo-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.025em;
}

.sidebar-logo-ver {
  font-size: 0.625rem;
  color: var(--color-text-faint);
  display: block;
  margin-top: 1px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sidebar-logo-eae {
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-left: 0.25rem;
}

/* Sidebar search filter */
.sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.375rem 0.5rem 0;
  padding: 0.3rem 0.5rem;
  background: var(--zinc-50);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}
.sidebar-search-wrap:focus-within {
  border-color: var(--sec-page-color, var(--color-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 15%, transparent);
}
.sidebar-search-wrap svg { color: var(--color-text-faint); flex-shrink: 0; }
.sidebar-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: var(--color-text);
  outline: none;
  width: 100%;
  padding: 0;
}
.sidebar-search-input::placeholder { color: var(--color-text-faint); }
.sidebar-collapsed .sidebar-search-wrap { display: none; }
/* M10 — dark sidebar: ajustar campo de pesquisa */
.sidebar.sidebar-dark .sidebar-search-wrap {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.sidebar.sidebar-dark .sidebar-search-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.sidebar.sidebar-dark .sidebar-search-input { color: rgba(255,255,255,0.8); }
.sidebar.sidebar-dark .sidebar-search-input::placeholder { color: rgba(255,255,255,0.35); }
.sidebar.sidebar-dark .sidebar-search-wrap svg { color: rgba(255,255,255,0.4); }

/* ── Barra de controlos acima da pesquisa ────────────────────────────── */
.sidebar-controls-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem 0;
  flex-shrink: 0;
}
.sb-ctrl-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  flex: 1;
  padding-left: 0.125rem;
  user-select: none;
}
.sb-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-md, 6px);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
.sb-ctrl-btn:hover {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border-strong, var(--color-border));
}
.sb-ctrl-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.sb-ctrl-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: var(--color-primary);
}
.sidebar.sidebar-dark .sb-ctrl-btn {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
}
.sidebar.sidebar-dark .sb-ctrl-btn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}
.sidebar.sidebar-dark .sb-ctrl-btn[aria-pressed="true"] {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}
.sidebar-collapsed .sidebar-controls-row { display: none; }

/* Nav — ocupa todo o espaço disponível e scroll internamente */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

/* .sidebar-section definida abaixo na secção "SECÇÕES COLAPSÁVEIS" */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--r-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--zinc-500);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  text-decoration: none;
}

/* Barra de acento no item activo */
.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 1.25rem;
  border-radius: 0 2px 2px 0;
  background: var(--sec-accent, var(--color-primary));
  transition: transform var(--t-fast);
}
.nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

.nav-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke-width: 1.75;
  color: var(--zinc-400);
  transition: color var(--t-fast);
}

.nav-item:hover {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 7%, transparent);
  color: var(--color-text);
}
.nav-item:hover svg { color: var(--color-text-muted); }

.nav-item.active {
  background: var(--sec-page-subtle, var(--color-primary-subtle));
  color: var(--sec-page-color, var(--color-primary));
  font-weight: 600;
}
.nav-item.active svg { color: var(--sec-page-color, var(--color-primary)); }

/* Item activo com secção: usa a cor da própria secção */
.nav-item[data-section="Administração"].active { color: var(--sec-color-administracao); background: color-mix(in srgb, var(--sec-color-administracao) 12%, transparent); }
.nav-item[data-section="Ensino"].active      { color: var(--sec-color-ensino);      background: color-mix(in srgb, var(--sec-color-ensino)      12%, transparent); }
.nav-item[data-section="Currículo"].active   { color: var(--sec-color-curriculo);   background: color-mix(in srgb, var(--sec-color-curriculo)   12%, transparent); }
.nav-item[data-section="Gestão"].active      { color: var(--sec-color-gestao);      background: color-mix(in srgb, var(--sec-color-gestao)      12%, transparent); }
.nav-item[data-section="Agenda"].active      { color: var(--sec-color-agenda);      background: color-mix(in srgb, var(--sec-color-agenda)      12%, transparent); }
.nav-item[data-section="Pessoas"].active     { color: var(--sec-color-pessoas);     background: color-mix(in srgb, var(--sec-color-pessoas)     12%, transparent); }
.nav-item[data-section="Comunicação"].active { color: var(--sec-color-comunicacao); background: color-mix(in srgb, var(--sec-color-comunicacao) 12%, transparent); }
.nav-item[data-section="Plataforma"].active  { color: var(--sec-color-plataforma);  background: color-mix(in srgb, var(--sec-color-plataforma)  12%, transparent); }
.nav-item[data-section="SuperAdmin"].active  { color: var(--sec-color-superadmin);  background: color-mix(in srgb, var(--sec-color-superadmin)  12%, transparent); }
/* legado */
.nav-item[data-section="Comunidade"].active  { color: var(--sec-color-comunidade);  background: color-mix(in srgb, var(--sec-color-comunidade)  12%, transparent); }
.nav-item[data-section="Sistema"].active     { color: var(--sec-color-sistema);     background: color-mix(in srgb, var(--sec-color-sistema)     12%, transparent); }
.nav-item[data-section="Financeiro"].active  { color: var(--sec-color-financeiro);  background: color-mix(in srgb, var(--sec-color-financeiro)  12%, transparent); }
.nav-item[data-section="Instalações"].active { color: var(--sec-color-instalacoes); background: color-mix(in srgb, var(--sec-color-instalacoes) 12%, transparent); }
.nav-item[data-section="Análise"].active     { color: var(--sec-color-analise);     background: color-mix(in srgb, var(--sec-color-analise)     12%, transparent); }
.nav-item[data-section="Ferramentas"].active { color: var(--sec-color-ferramentas); background: color-mix(in srgb, var(--sec-color-ferramentas) 12%, transparent); }

.nav-item[data-section="Administração"].active svg { color: var(--sec-color-administracao); }
.nav-item[data-section="Ensino"].active      svg { color: var(--sec-color-ensino); }
.nav-item[data-section="Currículo"].active   svg { color: var(--sec-color-curriculo); }
.nav-item[data-section="Gestão"].active      svg { color: var(--sec-color-gestao); }
.nav-item[data-section="Agenda"].active      svg { color: var(--sec-color-agenda); }
.nav-item[data-section="Pessoas"].active     svg { color: var(--sec-color-pessoas); }
.nav-item[data-section="Comunicação"].active svg { color: var(--sec-color-comunicacao); }
.nav-item[data-section="Plataforma"].active  svg { color: var(--sec-color-plataforma); }
.nav-item[data-section="SuperAdmin"].active  svg { color: var(--sec-color-superadmin); }
.nav-item[data-section="Comunidade"].active  svg { color: var(--sec-color-comunidade); }
.nav-item[data-section="Sistema"].active     svg { color: var(--sec-color-sistema); }
.nav-item[data-section="Financeiro"].active  svg { color: var(--sec-color-financeiro);  }
.nav-item[data-section="Instalações"].active svg { color: var(--sec-color-instalacoes); }
.nav-item[data-section="Análise"].active     svg { color: var(--sec-color-analise);     }
.nav-item[data-section="Ferramentas"].active svg { color: var(--sec-color-ferramentas); }

/* Divider — separates pinned bottom items (Centro de Ajuda) from the main nav */
.sidebar-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.375rem 0.625rem;
  opacity: 0.6;
}
.sidebar-collapsed .sidebar-divider { margin: 0.375rem 0.25rem; }

/* Sidebar footer — sempre visível no fundo */
.sidebar-foot {
  padding: 0.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--sidebar-bg);
  flex-shrink: 0;
}
.sidebar-legal-row { display: flex; gap: 0; padding: .375rem .375rem .5rem; }
.sidebar-legal-link { flex: 1; text-align: center; font-size: .65rem; color: var(--color-text-faint); text-decoration: none; transition: color 150ms; background: none; border: none; padding: .125rem 0; cursor: pointer; font-family: inherit; }
.sidebar-legal-link:hover { color: var(--color-text-muted); }
.sidebar-legal-link:focus-visible {
  color: var(--color-text-muted);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Status row no rodapé da sidebar — Pass 70 */
.sidebar-status-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.25rem 0.1rem;
  margin-top: 0.3rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.sidebar-status-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.45rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg, #fff);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: all var(--t-fast);
  letter-spacing: 0.02em;
  min-width: 0;
}
.sidebar-status-beta {
  font-size: 0.55rem;
  font-style: italic;
  font-weight: 500;
  opacity: 0.65;
  flex-shrink: 0;
}
.sidebar-status-chip:hover {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 6%, var(--color-surface));
  color: var(--sec-page-color, var(--color-primary));
  border-color: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 30%, var(--color-border));
}
.sidebar-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-faint);
  transition: background 0.2s;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent);
}
.sidebar-status-ver {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-status-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 1.625rem;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-faint);
  cursor: pointer;
  transition: all var(--t-fast);
}
.sidebar-status-mini:focus-visible {
  outline: 2px solid var(--sec-page-color, var(--color-primary));
  outline-offset: -2px;
}
.sidebar-status-mini:hover {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 6%, var(--color-surface));
  color: var(--sec-page-color, var(--color-primary));
  border-color: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 30%, var(--color-border));
}
.sidebar-logo-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}

/* Dark sidebar — mini action buttons e chip de versão */
.sidebar-dark .sidebar-status-mini,
.sidebar-dark .sidebar-status-chip {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.6);
}
.sidebar-dark .sidebar-status-mini:hover,
.sidebar-dark .sidebar-status-chip:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.95);
}
.sidebar-dark .sidebar-status-row {
  border-top-color: rgba(255,255,255,0.1);
}

/* Collapsed: empilhar botões de ação e links legais verticalmente (sempre visíveis) */
.sidebar-collapsed .sidebar-status-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.125rem !important;
  padding: 0.25rem 0.375rem 0.125rem !important;
}
.sidebar-collapsed .sidebar-mini-item {
  width: 100%;
  justify-content: center;
}
.sidebar-collapsed .sidebar-status-mini {
  flex: 0 0 2rem;
  height: 2rem;
}
.sidebar-collapsed .sidebar-legal-row {
  flex-direction: column;
  align-items: stretch;
  padding: 0.25rem 0.375rem 0.375rem;
  gap: 0;
}
.sidebar-collapsed .sidebar-legal-link {
  text-align: center;
}

/* Main */
.main {
  flex: 1;
  min-width: 0;
  overflow-x: clip;     /* clip sem criar scroll container: overflow-y fica visible; sidebar é fixed */
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h, 3.5rem);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(12,20,40,0.05), 0 2px 8px rgba(12,20,40,0.03),
              inset 0 -2px 0 0 color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  gap: 0.875rem;
  flex-shrink: 0;
}

/* Indicador de secção activa no título */
.topbar-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.topbar-title-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--topbar-sec-color, var(--color-primary));
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.2s;
}
.topbar-title-dot.visible {
  opacity: 1;
  transform: scale(1);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Divisor visual antes dos ícones de acção */
.topbar-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--color-border);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.topbar-avatar {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 12%, transparent) 0%, color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 20%, transparent) 100%);
  color: var(--sec-page-color, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  border: 1.5px solid color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 25%, transparent);
  cursor: default;
}

.topbar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--color-text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-fast);
}
.topbar-logout svg { width: 0.9375rem; height: 0.9375rem; stroke-width: 1.75; }
.topbar-logout:hover { background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border)); }

/* Topbar left */
.topbar-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Botão de ajuda no header */
/* Section label in topbar (replaces module title) */
.topbar-section-label {
  display: flex;
  align-items: center;
  font-size: 0.7625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity var(--t-fast), border-color var(--t-fast);
  margin-left: 0.25rem;
  margin-right: 0.5rem;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
  padding-left: 0;
}
.topbar-section-label:not(:empty) {
  border-left-color: var(--sec-page-color, var(--color-primary));
  padding-left: 0.5rem;
  color: var(--color-text);
}
.topbar-nav-btn + .topbar-nav-btn { margin-left: 0.1rem; }

/* Contextual topbar buttons — Settings + Help (Pass 69 v2: mais visíveis) */
.topbar-ctx-btns {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.topbar-ctx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--r-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
  padding: 0;
}
.topbar-ctx-btn svg { width: 1rem; height: 1rem; stroke-width: 1.9; }
.topbar-ctx-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 8%, var(--color-surface));
  color: var(--sec-page-color, var(--color-primary));
  border-color: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 40%, var(--color-border));
  transform: translateY(-1px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 18%, transparent);
}
.topbar-ctx-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Help button — destaque permanente para reforçar visibilidade */
#topbarHelpBtn {
  color: var(--sec-page-color, var(--color-primary));
  border-color: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 28%, var(--color-border));
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 5%, var(--color-surface));
}
#topbarHelpBtn:hover {
  background: var(--sec-page-btn-color, var(--color-primary));
  color: var(--color-on-primary, #fff);
  border-color: var(--sec-page-btn-color, var(--color-primary));
}

/* Notification bell */
.topbar-notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.topbar-notif-btn svg { width: 1rem; height: 1rem; stroke-width: 1.9; }
.topbar-notif-btn:hover {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 8%, var(--color-surface));
  color: var(--sec-page-color, var(--color-primary));
  border-color: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 40%, var(--color-border));
  transform: translateY(-1px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 18%, transparent);
}
.topbar-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--color-danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
  line-height: 1;
}

/* Global search */
.topbar-search-wrap {
  flex: 1;
  max-width: clamp(200px, 35vw, 520px); /* cresce com a janela */
  position: relative;
}
.topbar-search-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--zinc-50);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: .3rem .75rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.topbar-search-wrap.focused .topbar-search-inner {
  border-color: var(--sec-page-color, var(--color-primary));
  background: var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 18%, transparent);
}
.topbar-search-inner svg { color: var(--color-text-faint); flex-shrink: 0; }
.topbar-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .8125rem;
  color: var(--color-text);
  outline: none;
  min-width: 0;
}
.topbar-search-input::placeholder { color: var(--color-text-faint); }

/* Keyboard shortcut hint inside search bar */
.topbar-search-shortcut {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.15s;
  pointer-events: none;
}
.topbar-search-shortcut kbd {
  font-family: inherit;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-text-faint);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  padding: 1px 4px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-style: normal;
}
.topbar-search-wrap.focused .topbar-search-shortcut {
  opacity: 0;
}

/* Dropdown results */
.topbar-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  animation: modalIn .12s ease both;
}
.gsearch-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  cursor: pointer;
  transition: background var(--t-fast);
}
.gsearch-item:hover { background: var(--zinc-50); }
.gsearch-icon { color: var(--color-text-faint); flex-shrink: 0; }
.gsearch-body { flex: 1; min-width: 0; }
.gsearch-label { font-size: .8125rem; font-weight: 600; color: var(--color-text); }
.gsearch-sub   { font-size: .72rem; color: var(--color-text-faint); }
.gsearch-empty { padding: 1rem; text-align: center; font-size: .8125rem; color: var(--color-text-faint); }

/* Page */
/* ── Tab bar ──────────────────────────────────── */
@keyframes tabIn {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.tab-bar-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 .75rem;
  overflow: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
  min-height: 2.375rem;
  position: sticky;
  top: var(--topbar-h, 3.5rem);
  z-index: 29;
}
.tab-bar-wrap::-webkit-scrollbar { display: none; }

/* Zona de abas com scroll horizontal; o botão "fechar todas" fica fora */
.tab-bar-inner {
  display: flex;
  align-items: stretch;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.tab-bar-inner::-webkit-scrollbar { display: none; }

.app-tab {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 .875rem;
  height: 2.375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
  position: relative;
  animation: tabIn .18s ease both;
}
@media (prefers-reduced-motion: reduce) { .app-tab { animation: none; } }
.app-tab:hover {
  color: var(--color-text);
  filter: brightness(0.94);
}
.app-tab.active {
  color: var(--tab-accent, var(--color-primary));
  border-bottom-color: var(--tab-accent, var(--color-primary));
  border-top-color: transparent;
  font-weight: 600;
  filter: none;
}
.app-tab-label {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  color: var(--color-text-faint);
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.app-tab:hover .app-tab-close,
.app-tab.active .app-tab-close { opacity: 1; }
.app-tab-close:hover { background: var(--color-danger-subtle,#fee2e2); color: var(--color-danger); }
.app-tab:focus-visible { outline: 2px solid var(--tab-accent,var(--color-primary)); outline-offset: -2px; }

/* Botão "Fechar todas" — aparece na tab bar quando há 2+ abas */
.app-tab-close-all {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: .3rem;
  margin-left: .5rem;
  padding: .25rem .6rem;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-faint);
  font-size: .7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.app-tab-close-all:hover {
  background: var(--color-danger-subtle, #fee2e2);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ── Tab panels ───────────────────────────────── */
.tab-panels-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tab-panel {
  flex: 1;
  min-height: fit-content; /* cresce para conteúdo; evita gap quando conteúdo excede viewport */
  padding: clamp(1rem, 2vw, 1.75rem);
  width: 100%;          /* ocupa toda a largura disponível */
  max-width: none;      /* sem limite fixo — adapta-se à janela */
  overflow-x: clip;     /* clip em vez de hidden: não cria scroll container, preserva overflow-y natural */
  box-sizing: border-box;
}
.tab-panel.page { animation: fadeUp .15s ease both; }

.page {
  flex: 1;
  padding: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
  max-width: none;
  animation: fadeUp .2s ease both;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  text-wrap: balance;
}
/* Suppress amber browser focus ring when h1 is focused programmatically by switchPage() */
.page-title:focus:not(:focus-visible) { outline: none; }

.page-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  line-height: 1.45;
}

/* ── Botão info do módulo ──────────────────────────── */
.mod-info-btn {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .18rem .5rem .18rem .38rem;
  border: 1px solid var(--color-primary, #6366f1);
  border-radius: 9999px;
  background: var(--color-primary-muted, rgba(99,102,241,.09));
  cursor: pointer;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary, #6366f1);
  vertical-align: middle;
  margin-left: .5rem;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
  letter-spacing: .01em;
}
.mod-info-btn:hover {
  background: var(--color-primary, #6366f1);
  color: #fff;
  border-color: var(--color-primary, #6366f1);
}
.mod-info-btn[aria-expanded="true"] {
  background: var(--color-primary, #6366f1);
  color: #fff;
  border-color: var(--color-primary, #6366f1);
}
.mod-info-panel {
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 4px 4px 0;
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 680px;
}
.mod-info-panel p { margin: 0 0 .22rem; }
.mod-info-panel p:last-child { margin-bottom: 0; }
.mod-info-panel ul { margin: .15rem 0 .22rem; padding-left: 1.15rem; }
.mod-info-panel li { margin-bottom: .1rem; }
.mod-info-panel strong { color: var(--color-text); font-weight: 600; }

/* ── Acento de secção nas páginas ───────────────────��─────
   Quando switchPage() define data-active-section no <html>,
   o título da página e a aba activa herdam a cor da secção.
────────────────────────────────────────────────────────── */
:root[data-active-section="Administração"] { --sec-page-color: var(--sec-color-administracao); }
:root[data-active-section="Ensino"]      { --sec-page-color: var(--sec-color-ensino); }
:root[data-active-section="Currículo"]   { --sec-page-color: var(--sec-color-curriculo); }
:root[data-active-section="Gestão"]      { --sec-page-color: var(--sec-color-gestao); }
:root[data-active-section="Agenda"]      { --sec-page-color: var(--sec-color-agenda); }
:root[data-active-section="Pessoas"]     { --sec-page-color: var(--sec-color-pessoas); }
:root[data-active-section="Comunicação"] { --sec-page-color: var(--sec-color-comunicacao); }
:root[data-active-section="Plataforma"]  { --sec-page-color: var(--sec-color-plataforma); }
:root[data-active-section="SuperAdmin"]  { --sec-page-color: var(--sec-color-superadmin); }
:root[data-active-section="Comunidade"]  { --sec-page-color: var(--sec-color-comunidade); }
:root[data-active-section="Sistema"]     { --sec-page-color: var(--sec-color-sistema); }
:root[data-active-section="Financeiro"]  { --sec-page-color: var(--sec-color-financeiro);  }
:root[data-active-section="Instalações"] { --sec-page-color: var(--sec-color-instalacoes); }
:root[data-active-section="Análise"]     { --sec-page-color: var(--sec-color-analise);     }
:root[data-active-section="Ferramentas"] { --sec-page-color: var(--sec-color-ferramentas); }

/* Barra colorida à esquerda do título da página */
:root[data-active-section] .page-title {
  display: flex;
  align-items: center;
  gap: .625rem;
}
:root[data-active-section] .page-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.25em;
  border-radius: 3px;
  background: var(--sec-page-color, var(--color-primary));
  flex-shrink: 0;
  transition: background var(--t-base);
}

/* Accent color propagated to tab active + focus rings + links in module content */
.tab-btn.active,
.tab-btn.active svg            { color: var(--sec-page-color, var(--color-primary)) !important; }
.tab-btn.active                { border-bottom-color: var(--sec-page-color, var(--color-primary)) !important; }

/* Stat-icon accent in active section */
.stat-icon-wrap                { background: var(--sec-page-subtle, var(--color-primary-subtle)); color: var(--sec-page-color, var(--color-primary)); }

/* Btn-primary uses section accent when inside a module page — uses btnAccent (WCAG AA ≥4.5:1) */
.main .btn-primary,
.page-content .btn-primary     { background: var(--sec-page-btn-color, var(--color-primary)); border-color: var(--sec-page-btn-color, var(--color-primary)); }
.main .btn-primary:hover,
.page-content .btn-primary:hover { filter: brightness(0.9); }

/* Btn-secondary & btn-ghost adopt section accent — border + text tinted, background transparent */
.main .btn-secondary,
.page-content .btn-secondary {
  border-color: color-mix(in srgb, var(--sec-page-color, var(--color-border)) 55%, var(--color-border));
  color: var(--sec-page-color, var(--color-text-muted));
}
.main .btn-secondary:hover:not(:disabled),
.page-content .btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 9%, transparent);
  border-color: var(--sec-page-color, var(--color-border));
  color: var(--sec-page-color, var(--color-text));
}
.main .btn-ghost,
.page-content .btn-ghost {
  color: color-mix(in srgb, var(--sec-page-color, var(--color-text-muted)) 80%, var(--color-text-muted));
}
.main .btn-ghost:hover:not(:disabled),
.page-content .btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 9%, transparent);
  color: var(--sec-page-color, var(--color-text));
}

/* Focus ring on inputs follows section accent */
.main input:focus,
.main select:focus,
.main textarea:focus           { border-color: var(--sec-page-color, var(--color-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 15%, transparent); }

.page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* All buttons inside a page-head share the same compact size — cobre tanto
   .page-actions como os divs de acções inline sem classe */
.page-head .btn,
.page-actions .btn {
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
}

/* Stats row */
.stats-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stats-row.cols-4 { grid-template-columns: repeat(4,1fr); }
.stats-row.cols-3 { grid-template-columns: repeat(3,1fr); }
/* cols-5: pills compactas — flex em vez de grid para ficarem só tão largas quanto o conteúdo */
.stats-row.cols-5 { display: flex; flex-wrap: wrap; gap: .75rem; }
.stats-row.cols-5 > * { flex: 1 1 0; min-width: 0; }

/* Loading */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
}
.loading-text { font-size: 0.8125rem; color: var(--color-text-faint); }

/* ═══════════════════════════════════
   RESPONSIVE — LAYOUT FLUIDO
═══════════════════════════════════ */

/* ── Ecrãs muito grandes (≥ 1920px): sidebar ligeiramente mais larga ── */
@media (min-width: 1920px) {
  :root { --sidebar-w: 240px; }
  .topbar { padding: 0 2.5rem; }
}

/* ── Ecrãs grandes (1440px–1919px): comportamento default ── */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root { --sidebar-w: 230px; }
}

/* ── Ecrãs médios-grandes (1200px–1439px) ── */
@media (max-width: 1439px) {
  :root { --sidebar-w: 220px; }
}

/* ── Ecrãs médios (1024px–1199px) ── */
@media (max-width: 1199px) {
  :root { --sidebar-w: 210px; }
  .stats-row.cols-4 { grid-template-columns: repeat(2,1fr); }
  .topbar { padding: 0 1.25rem; }
}

/* ── Ecrãs médios-pequenos (1024px): login sem branding lateral ── */
@media (max-width: 1024px) {
  .stats-row.cols-4 { grid-template-columns: repeat(2,1fr); }
  .login-panel-brand { display: none; }
  .login-panel-form {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-left: none;
  }
  .login-root { justify-content: center; }
}

/* ── Tablet (768px–1023px): sidebar em overlay ── */
@media (max-width: 1023px) {
  :root { --sidebar-w: 265px; } /* largura total mas fora do fluxo */

  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--t-base), box-shadow var(--t-base);
    box-shadow: none;
    z-index: 50;
  }
  /* Sidebar aberta em mobile via classe */
  .sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
  }
  /* Overlay escuro por baixo da sidebar */
  .sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 45;
    animation: overlayIn .15s ease both;
  }

  .main { margin-left: 0; } /* ocupa tudo — sidebar flutua por cima */
  .topbar-menu-btn { display: flex !important; } /* garantir que o botão hamburger aparece */

  .tab-panel,
  .page { padding: 1.25rem; }

  .stats-row.cols-3 { grid-template-columns: repeat(2,1fr); }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  .tab-panel,
  .page { padding: 1rem; }

  .page-head {
    flex-direction: column;
    gap: .75rem;
  }
  .page-actions { flex-wrap: wrap; }

  .stats-row.cols-2,
  .stats-row.cols-3,
  .stats-row.cols-4 { grid-template-columns: 1fr; }

  .topbar-search-wrap { max-width: none; }

  .login-panel-form {
    padding: 2rem 1.25rem;
    min-height: 100vh;
    justify-content: flex-start;
    padding-top: 3rem;
  }
}

/* ── Mobile muito pequeno (< 480px) ── */
@media (max-width: 479px) {
  .tab-panel,
  .page { padding: .75rem; }

  .topbar { padding: 0 .75rem; }
  .topbar-search-wrap { display: none; } /* esconder pesquisa em ecrãs muito pequenos */
}

/* ═══════════════════════════════════
   SIDEBAR COLAPSÁVEL
═══════════════════════════════════ */

/* Variáveis globais da sidebar e topbar */
:root { --sidebar-w-collapsed: 4.5rem; --topbar-h: 3.5rem; }

/* Sidebar colapsada — categorias visíveis, módulos apenas no fly-out */
.sidebar-collapsed .sidebar {
  width: var(--sidebar-w-collapsed);
  overflow: visible;
}
.sidebar-collapsed .sidebar-logo-text-wrap,
.sidebar-collapsed .nav-label {
  opacity: 0;
  width: 0;
  flex: none;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--t-base), width var(--t-base);
}
/* Secções visíveis com labels em modo colapsado */
.sidebar-collapsed .sidebar-section {
  opacity: 1 !important;
  width: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  flex: none !important;
}
.sidebar-collapsed .sidebar-nav {
  padding: 0.75rem 0.375rem;
  align-items: stretch;
  overflow: visible;
}
.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0.5rem;
  width: 2.5rem;
  gap: 0;
  margin-inline: auto;
}
.sidebar-collapsed .nav-item svg {
  width: 1.125rem;
  height: 1.125rem;
}
.sidebar-collapsed .nav-item .fav-star { display: none; }
.sidebar-collapsed .sidebar-foot {
  padding: 0.75rem 0.375rem;
  align-items: center;
}
.sidebar-collapsed .main {
  margin-left: var(--sidebar-w-collapsed);
}
.sidebar-collapsed .toggle-icon {
  transform: rotate(180deg);
}

/* Transições suaves */
.sidebar { transition: width var(--t-base); }
.main { transition: margin-left var(--t-base); }
.nav-label {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
}
.sidebar-logo-text-wrap, .nav-label, .sidebar-section {
  transition: opacity var(--t-base);
  white-space: nowrap;
  overflow: hidden;
}
.toggle-icon {
  display: inline-flex;
  transition: transform var(--t-base);
}

/* Tooltip em modo colapsado — mesmo aspecto que os flyouts de secção */
.sidebar-collapsed .nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 6px);
  top: 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem .55rem .45rem;
  border-radius: .55rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1500;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  transition: opacity var(--t-fast) 150ms;
}
.sidebar-collapsed .nav-item:hover::after { opacity: 1; animation: mbDropIn 80ms ease; }

/* ── Botão toggle sidebar ─────────────────────────────────────────
   Expandido: aparece discretamente no canto direito do logo (hover)
   Colapsado: fica escondido do logo — sidebar usa uma tab lateral
─────────────────────────────────────────────────────────────────── */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg, #fff);
  border-radius: var(--r-md, 0.375rem);
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              opacity var(--t-fast), transform var(--t-fast);
  margin-left: auto;
  flex-shrink: 0;
  opacity: 1;
}
.sidebar-toggle-btn:hover {
  background: var(--zinc-100);
  color: var(--color-text);
  border-color: var(--zinc-300);
}
.sidebar-toggle-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; }

/* Colapsado: esconder o botão do bloco do logo */
.sidebar-collapsed .sidebar-toggle-btn { display: none; }

/* Logo colapsado: apenas o mark, centrado */
.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  padding: 0;
  gap: 0;
}

/* ── Tab de expansão — elemento fixo colado à borda da sidebar ────
   Irmão da sidebar no DOM, posicionado com position:fixed
   Só visível quando sidebar está colapsada, ao fazer hover na zona
─────────────────────────────────────────────────────────────────── */
.sidebar-expand-tab {
  display: none;
}
.sidebar-collapsed .sidebar-expand-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: var(--sidebar-w-collapsed);  /* colada à borda direita da sidebar colapsada */
  transform: translateY(-50%);
  width: 1rem;
  height: 2.75rem;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 0.375rem 0.375rem 0;
  color: var(--color-text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
  z-index: 39;  /* abaixo da sidebar (z:40) mas acima do conteúdo */
  box-shadow: 3px 0 8px rgba(0,0,0,0.06);
}
.sidebar-collapsed .sidebar-expand-tab:hover {
  opacity: 1;
}
.sidebar-collapsed .sidebar-expand-tab:hover {
  background: var(--sec-page-btn-color, var(--color-primary));
  border-color: var(--sec-page-btn-color, var(--color-primary));
  color: #fff;
}
.sidebar-collapsed .sidebar-expand-tab:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sidebar-collapsed .sidebar-expand-tab svg {
  width: 10px;
  height: 10px;
}

/* Botão de ajuda no rodapé */
.sidebar-help-btn { flex-shrink: 0; width: 2rem; height: 2rem; }
.sidebar-help-btn svg { width: 1rem; height: 1rem; }
.sidebar-collapsed .sidebar-help-btn { display: none; }

/* Nav item notification badge (sidebar) */
.nav-notif-badge {
  margin-left: auto;
  background: var(--sec-accent, var(--color-danger));
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-collapsed .nav-notif-badge { display: none !important; }

/* Topbar — botão menu (hambúrguer): oculto no desktop (substituído pelo sb-toprow-toggle) */
@media (min-width: 1024px) {
  .topbar-menu-btn { display: none !important; }
}

/* ── Sidebar top row (Início + toggle) ─────────────────────────── */
.sb-toprow {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.5rem 0.25rem;
  gap: 0.25rem;
  flex-shrink: 0;
}
.sb-toprow-home {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  overflow: hidden;
}
.sb-toprow-home:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.sb-toprow-home:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
.sb-toprow-home svg { flex-shrink: 0; }
.sb-toprow-lbl { overflow: hidden; text-overflow: ellipsis; }

/* Wrapper flex do item Início + botão toggle */
.nav-dash-wrap {
  display: flex;
  align-items: center;
  overflow: visible;
}
.nav-dash-wrap .nav-item {
  flex: 1;
  min-width: 0;
}
/* Em modo colapsado: toggle acima, Início (home) abaixo */
.sidebar-collapsed:not(.sb-searching) .nav-dash-wrap {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sidebar-collapsed:not(.sb-searching) .nav-dash-wrap .nav-item {
  display: flex !important;
  justify-content: center;
  width: 2.5rem;
  flex: none;
}

/* Em pesquisa: Início aparece em linha com toggle */
.sidebar-collapsed.sb-searching .nav-dash-wrap { flex-direction: row; justify-content: flex-start; }
.sidebar-collapsed.sb-searching .nav-dash-wrap .nav-item { display: flex !important; }

.sb-toprow-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-base);
}
.sb-toprow-toggle:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.sb-toprow-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
/* Sidebar colapsada: flipa o ícone (sugere abertura) */
.sidebar-collapsed .sb-toprow-toggle svg { transform: scaleX(-1); }
/* Sidebar colapsada: centrar ícone, esconder label */
.sidebar-collapsed .sb-toprow {
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem 0 0.25rem;
}
.sidebar-collapsed .sb-toprow-home {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
}
.sidebar-collapsed .sb-toprow-lbl { display: none; }

/* Topbar — botão menu (hambúrguer) */
.topbar-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  border-radius: var(--r-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.topbar-menu-btn:hover { background: var(--color-bg); color: var(--color-text); }
.topbar-menu-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background: var(--color-bg);
}

/* Back / Forward navigation buttons */
.topbar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
  padding: 0;
}
.topbar-nav-btn:not(:disabled):hover { background: var(--color-bg); color: var(--color-text); }
.topbar-nav-btn:disabled { opacity: 0.3; cursor: default; }
.topbar-nav-btn + .topbar-nav-btn { margin-left: 0.1rem; }
.topbar-nav-btn + #topbarTitle { margin-left: 0.5rem; }

.topbar-left { display: flex; align-items: center; }

/* ═══════════════════════════════════
   SIDEBAR MODO ESCURO
═══════════════════════════════════ */
.sidebar.sidebar-dark {
  border-right-color: rgba(255,255,255,0.055);
  box-shadow: 3px 0 28px rgba(0,0,0,0.32);
}
/* Logo e identidade */
.sidebar.sidebar-dark .sidebar-logo-text { color: #ECF0FF; font-weight: 700; }
.sidebar.sidebar-dark .sidebar-logo-eae  { color: rgba(255,255,255,.5); }
.sidebar.sidebar-dark .sidebar-logo-ver  { color: rgba(255,255,255,0.35); }
.sidebar.sidebar-dark .sidebar-logo      { border-bottom-color: rgba(255,255,255,0.06); }
.sidebar.sidebar-dark .sidebar-logo-mark {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 4px 14px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
/* Secções — pip colorido já existe via ::before, melhorar label */
.sidebar.sidebar-dark .sidebar-section {
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.085em;
}
.sidebar.sidebar-dark .sidebar-section:hover { color: rgba(255,255,255,0.65); }
/* Labels de secção com cor da própria secção (glow no escuro) */
.sidebar.sidebar-dark .sidebar-section[data-label="Administração"] { color: color-mix(in srgb, var(--sec-color-administracao) 80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Ensino"]        { color: color-mix(in srgb, var(--sec-color-ensino)      80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Currículo"]     { color: color-mix(in srgb, var(--sec-color-curriculo)   80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Gestão"]        { color: color-mix(in srgb, var(--sec-color-gestao)      80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Agenda"]        { color: color-mix(in srgb, var(--sec-color-agenda)      80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Pessoas"]       { color: color-mix(in srgb, var(--sec-color-pessoas)     80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Comunicação"]   { color: color-mix(in srgb, var(--sec-color-comunicacao) 80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Plataforma"]    { color: color-mix(in srgb, var(--sec-color-plataforma)  80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="SuperAdmin"]    { color: color-mix(in srgb, var(--sec-color-superadmin)  80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Análise"]       { color: color-mix(in srgb, var(--sec-color-analise)     80%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Ferramentas"]   { color: color-mix(in srgb, var(--sec-color-ferramentas) 80%, white); }
/* Nav items */
.sidebar.sidebar-dark .nav-item          { color: rgba(255,255,255,0.58); }
.sidebar.sidebar-dark .nav-item svg      { color: rgba(255,255,255,0.38); }
.sidebar.sidebar-dark .nav-item:hover    { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.92); }
.sidebar.sidebar-dark .nav-item:hover svg { color: rgba(255,255,255,0.7); }
/* Item activo — usa cor da secção com fundo tintado */
.sidebar.sidebar-dark .nav-item.active   { background: rgba(255,255,255,0.1); color: #fff; font-weight: 600; }
.sidebar.sidebar-dark .nav-item.active svg { color: #fff; }
/* Barra lateral do item activo — cor da secção */
.sidebar.sidebar-dark .nav-item.active::before { width: 3px; }
/* Dark sidebar — activos com cor de secção */
.sidebar.sidebar-dark .nav-item[data-section="Administração"].active { background: color-mix(in srgb, var(--sec-color-administracao) 22%, transparent); color: color-mix(in srgb, var(--sec-color-administracao) 75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Ensino"].active      { background: color-mix(in srgb, var(--sec-color-ensino)      22%, transparent); color: color-mix(in srgb, var(--sec-color-ensino)      65%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Currículo"].active   { background: color-mix(in srgb, var(--sec-color-curriculo)   22%, transparent); color: color-mix(in srgb, var(--sec-color-curriculo)   75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Gestão"].active      { background: color-mix(in srgb, var(--sec-color-gestao)      22%, transparent); color: color-mix(in srgb, var(--sec-color-gestao)      75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Agenda"].active      { background: color-mix(in srgb, var(--sec-color-agenda)      22%, transparent); color: color-mix(in srgb, var(--sec-color-agenda)      75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Pessoas"].active     { background: color-mix(in srgb, var(--sec-color-pessoas)     22%, transparent); color: color-mix(in srgb, var(--sec-color-pessoas)     75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Comunicação"].active { background: color-mix(in srgb, var(--sec-color-comunicacao) 22%, transparent); color: color-mix(in srgb, var(--sec-color-comunicacao) 75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Plataforma"].active  { background: color-mix(in srgb, var(--sec-color-plataforma)  22%, transparent); color: color-mix(in srgb, var(--sec-color-plataforma)  75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="SuperAdmin"].active  { background: color-mix(in srgb, var(--sec-color-superadmin)  22%, transparent); color: color-mix(in srgb, var(--sec-color-superadmin)  75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Comunidade"].active  { background: color-mix(in srgb, var(--sec-color-comunidade)  22%, transparent); color: color-mix(in srgb, var(--sec-color-comunidade)  75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Sistema"].active     { background: color-mix(in srgb, var(--sec-color-sistema)     22%, transparent); color: color-mix(in srgb, var(--sec-color-sistema)     75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Financeiro"].active  { background: color-mix(in srgb, var(--sec-color-financeiro)  22%, transparent); color: color-mix(in srgb, var(--sec-color-financeiro)  75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Instalações"].active { background: color-mix(in srgb, var(--sec-color-instalacoes) 22%, transparent); color: color-mix(in srgb, var(--sec-color-instalacoes) 75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Análise"].active     { background: color-mix(in srgb, var(--sec-color-analise)     22%, transparent); color: color-mix(in srgb, var(--sec-color-analise)     75%, white); }
.sidebar.sidebar-dark .nav-item[data-section="Ferramentas"].active { background: color-mix(in srgb, var(--sec-color-ferramentas) 22%, transparent); color: color-mix(in srgb, var(--sec-color-ferramentas) 75%, white); }
.sidebar.sidebar-dark .nav-item[data-section].active svg { color: currentColor; opacity: 0.9; }
/* Rodapé */
.sidebar.sidebar-dark .sidebar-user-name { color: #ECF0FF; }
.sidebar.sidebar-dark .sidebar-user-role { color: rgba(255,255,255,0.38); }
.sidebar.sidebar-dark .sidebar-foot      { border-top-color: rgba(255,255,255,0.07); }
.sidebar.sidebar-dark .sidebar-toggle-btn { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); }
.sidebar.sidebar-dark .sidebar-toggle-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.sidebar.sidebar-dark .sidebar-escola-brand   { border-bottom-color: rgba(255,255,255,0.07); }
.sidebar.sidebar-dark .sidebar-escola-logo-wrap { background: rgba(255,255,255,0.08); }
.sidebar.sidebar-dark .sidebar-escola-nome    { color: #ECF0FF; }
/* Divider */
.sidebar.sidebar-dark .sidebar-divider { background: rgba(255,255,255,0.08); opacity: 1; }

/* ═══════════════════════════════════
   COLOR SWATCHES (tab aspeto)
═══════════════════════════════════ */
.color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
  outline: none;
}
.color-swatch:hover { transform: scale(1.15); box-shadow: var(--shadow-md); }
.color-swatch:focus-visible { outline: 2px solid var(--sec-page-color, var(--color-primary)); outline-offset: 2px; box-shadow: var(--shadow-focus); }
.color-swatch.selected { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text); }

/* ═══════════════════════════════════
   SECÇÕES COLAPSÁVEIS DA SIDEBAR
═══════════════════════════════════ */

/* Secção com cursor pointer e chevron */
.sidebar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
  margin-top: 2.5px;
  padding: 0.25rem 0.625rem;
  /* tipografia */
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}
/* Secções sem cor definida ficam com cinza ao hover; as com cor mantêm a sua */
.sidebar-section:not([data-label]):hover { color: var(--zinc-500); }

.sec-label { flex: 1; }

/* Chevron SVG — roda ao fechar */
.sec-chevron {
  opacity: 0.45;
  transition: transform var(--t-base), opacity var(--t-fast);
  flex-shrink: 0;
  margin-top: -1px;
}
.sidebar-section:hover .sec-chevron { opacity: 0.7; }
.sidebar-section.section-closed .sec-chevron { transform: rotate(-90deg); }

/* ── Cor por secção ───────────────────────────────────────
   Cada secção da sidebar tem a sua cor de acento.
   Usada: barra lateral no cabeçalho + cor do ícone nos items.
────────────────────────────────────────────────────────── */
:root {
  --sec-color-administracao: #3b82f6; /* blue-500      — Administração */
  --sec-color-ensino:        #8b5cf6; /* violet-500    — Ensino        */
  --sec-color-curriculo:     #6366f1; /* indigo-500    — Currículo     */
  --sec-color-agenda:        #3b82f6; /* blue-500      — Agenda        */
  --sec-color-financeiro:    #06b6d4; /* cyan-500      — Financeiro    */
  --sec-color-instalacoes:   #14b8a6; /* teal-500      — Instalações   */
  --sec-color-pessoas:       #10b981; /* emerald-500   — Pessoas       */
  --sec-color-comunicacao:   #22c55e; /* green-500     — Comunicação   */
  --sec-color-comunidade:    #84cc16; /* lime-500      — Comunidade    */
  --sec-color-analise:       #f59e0b; /* amber-500     — Análise       */
  --sec-color-plataforma:    #f97316; /* orange-500    — Plataforma    */
  --sec-color-superadmin:    #ef4444; /* red-500       — SuperAdmin    */
  --sec-color-ferramentas:   #f43f5e; /* rose-500      — Ferramentas   */
  /* legado / alias */
  --sec-color-gestao:        #06b6d4; /* cyan-500      — alias Financeiro */
  --sec-color-sistema:       #ef4444; /* red-500       — alias SuperAdmin */
}

/* Barra colorida no cabeçalho de secção (pseudo-elemento à esquerda) */
.sidebar-section[data-label]::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.75rem;
  border-radius: 2px;
  margin-right: 0.5rem;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.5;
  transition: opacity var(--t-fast);
}
.sidebar-section[data-label]:hover::before { opacity: 0.8; }

/* Cor da barra por secção */
.sidebar-section[data-label="Administração"] { color: var(--sec-color-administracao); }
.sidebar-section[data-label="Ensino"]      { color: var(--sec-color-ensino); }
.sidebar-section[data-label="Currículo"]   { color: var(--sec-color-curriculo); }
.sidebar-section[data-label="Gestão"]      { color: var(--sec-color-gestao); }
.sidebar-section[data-label="Agenda"]      { color: var(--sec-color-agenda); }
.sidebar-section[data-label="Pessoas"]     { color: var(--sec-color-pessoas); }
.sidebar-section[data-label="Comunicação"] { color: var(--sec-color-comunicacao); }
.sidebar-section[data-label="Plataforma"]  { color: var(--sec-color-plataforma); }
.sidebar-section[data-label="SuperAdmin"]  { color: var(--sec-color-superadmin); }
.sidebar-section[data-label="Comunidade"]  { color: var(--sec-color-comunidade); }
.sidebar-section[data-label="Sistema"]     { color: var(--sec-color-sistema); }
.sidebar-section[data-label="Financeiro"]  { color: var(--sec-color-financeiro);  }
.sidebar-section[data-label="Instalações"] { color: var(--sec-color-instalacoes); }
.sidebar-section[data-label="Análise"]     { color: var(--sec-color-analise);     }
.sidebar-section[data-label="Ferramentas"] { color: var(--sec-color-ferramentas); }

/* Cor do ícone SVG nos nav-items por secção */
.nav-item[data-section="Administração"] svg { color: var(--sec-color-administracao); }
.nav-item[data-section="Ensino"]      svg { color: var(--sec-color-ensino); }
.nav-item[data-section="Currículo"]   svg { color: var(--sec-color-curriculo); }
.nav-item[data-section="Gestão"]      svg { color: var(--sec-color-gestao); }
.nav-item[data-section="Agenda"]      svg { color: var(--sec-color-agenda); }
.nav-item[data-section="Pessoas"]     svg { color: var(--sec-color-pessoas); }
.nav-item[data-section="Comunicação"] svg { color: var(--sec-color-comunicacao); }
.nav-item[data-section="Plataforma"]  svg { color: var(--sec-color-plataforma); }
.nav-item[data-section="SuperAdmin"]  svg { color: var(--sec-color-superadmin); }
.nav-item[data-section="Comunidade"]  svg { color: var(--sec-color-comunidade); }
.nav-item[data-section="Sistema"]     svg { color: var(--sec-color-sistema); }
.nav-item[data-section="Financeiro"]  svg { color: var(--sec-color-financeiro);  }
.nav-item[data-section="Instalações"] svg { color: var(--sec-color-instalacoes); }
.nav-item[data-section="Análise"]     svg { color: var(--sec-color-analise);     }
.nav-item[data-section="Ferramentas"] svg { color: var(--sec-color-ferramentas); }

/* Hover: ícone fica ligeiramente mais saturado */
.nav-item[data-section]:hover svg { filter: brightness(0.82); }

/* Hover não aplica filtro nos itens activos */
.nav-item.active:hover svg { filter: none; }

/* Dark sidebar — ícones com opacidade ligeiramente reduzida */
.sidebar.sidebar-dark .nav-item[data-section] svg { opacity: 0.85; }
.sidebar.sidebar-dark .sidebar-section[data-label="Administração"] { color: color-mix(in srgb, var(--sec-color-administracao) 75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Ensino"]      { color: color-mix(in srgb, var(--sec-color-ensino)      75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Currículo"]   { color: color-mix(in srgb, var(--sec-color-curriculo)   75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Gestão"]      { color: color-mix(in srgb, var(--sec-color-gestao)      75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Agenda"]      { color: color-mix(in srgb, var(--sec-color-agenda)      75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Pessoas"]     { color: color-mix(in srgb, var(--sec-color-pessoas)     75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Comunicação"] { color: color-mix(in srgb, var(--sec-color-comunicacao) 75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Plataforma"]  { color: color-mix(in srgb, var(--sec-color-plataforma)  75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="SuperAdmin"]  { color: color-mix(in srgb, var(--sec-color-superadmin)  75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Comunidade"]  { color: color-mix(in srgb, var(--sec-color-comunidade)  75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Sistema"]     { color: color-mix(in srgb, var(--sec-color-sistema)     75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Financeiro"]  { color: color-mix(in srgb, var(--sec-color-financeiro)  75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Instalações"] { color: color-mix(in srgb, var(--sec-color-instalacoes) 75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Análise"]     { color: color-mix(in srgb, var(--sec-color-analise)     75%, white); }
.sidebar.sidebar-dark .sidebar-section[data-label="Ferramentas"] { color: color-mix(in srgb, var(--sec-color-ferramentas) 75%, white); }

/* Em modo colapsado: esconder a barra lateral (fica sem labels) */
.sidebar-collapsed .sidebar-section::before { display: none; }

/* Itens ocultos de secção fechada */
.nav-item-hidden {
  display: none !important;
}

/* ── Decalque visual: cabeçalho de secção aberta ─────────────────────── */
/* Fundo subtil com acento de cor quando secção está aberta */
.sidebar-section[data-label]:not(.section-closed) {
  background: color-mix(in srgb, var(--sec-accent, var(--color-primary)) 10%, transparent);
}
.sidebar-section[data-label]:not(.section-closed)::before {
  opacity: 0.9;
}

/* ── Animação de revelação ao abrir secção ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sbItemReveal {
    from { opacity: 0; translate: 0 -5px; }
    to   { opacity: 1; translate: 0 0;    }
  }
  .nav-item.nav-item-revealing {
    animation: sbItemReveal 0.22s ease both;
  }
}

/* Controlos do rodapé ("Expandir tudo · Colapsar tudo") */
.sidebar-foot-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.375rem;
  padding: 0.25rem 0;
}
.sec-ctrl-btn {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  line-height: 1;
}
.sec-ctrl-btn:hover { color: var(--color-text-muted); background: var(--zinc-100); }
.sec-ctrl-sep { font-size: 0.6875rem; color: var(--color-text-faint); line-height: 1; }

/* Esconder controlos quando sidebar colapsada */
.sidebar-collapsed .sidebar-foot-controls { display: none; }
/* Secções em modo colapsado: compactas, sem chevron */
.sidebar-collapsed .sidebar-section { margin-top: 0.125rem; padding: 0.25rem 0.625rem; }
.sidebar-collapsed .sec-label { display: inline; }
.sidebar-collapsed .sec-chevron { display: none; }

/* Dark sidebar — manter contraste nos controlos */
.sidebar.sidebar-dark .sec-ctrl-btn { color: rgba(255,255,255,0.3); }
.sidebar.sidebar-dark .sec-ctrl-btn:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
.sidebar.sidebar-dark .sec-ctrl-sep { color: rgba(255,255,255,0.2); }
/* Fallback para secções sem data-label (não deverão existir) */
.sidebar.sidebar-dark .sidebar-section:not([data-label]) { color: rgba(255,255,255,0.35); }
.sidebar.sidebar-dark .sidebar-section:not([data-label]):hover { color: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════════════════
   SIDEBAR — MELHORIAS DE INTERACÇÃO
══════════════════════════════════════════════════════ */

/* 1. Scrollbar fina e discreta na sidebar */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.sidebar::-webkit-scrollbar       { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
.sidebar.sidebar-dark::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* Sem seta — flyouts de secção também não têm */
.sidebar-collapsed .nav-item::before { display: none; }

/* 4. Focus rings acessíveis — só visíveis com teclado */
.nav-item:focus-visible {
  outline: 2px solid var(--sec-page-color, var(--color-primary));
  outline-offset: -2px;
  border-radius: var(--r-lg);
}
.sidebar-section:focus-visible {
  outline: 2px solid var(--sec-page-color, var(--color-primary));
  outline-offset: -2px;
}
/* Secção com cor própria usa essa cor no focus ring */
.sidebar-section[data-label="Administração"]:focus-visible { outline-color: var(--sec-color-administracao); }
.sidebar-section[data-label="Ensino"]:focus-visible        { outline-color: var(--sec-color-ensino); }
.sidebar-section[data-label="Currículo"]:focus-visible     { outline-color: var(--sec-color-curriculo); }
.sidebar-section[data-label="Agenda"]:focus-visible        { outline-color: var(--sec-color-agenda); }
.sidebar-section[data-label="Financeiro"]:focus-visible    { outline-color: var(--sec-color-financeiro); }
.sidebar-section[data-label="Instalações"]:focus-visible   { outline-color: var(--sec-color-instalacoes); }
.sidebar-section[data-label="Gestão"]:focus-visible        { outline-color: var(--sec-color-gestao); }
.sidebar-section[data-label="Pessoas"]:focus-visible       { outline-color: var(--sec-color-pessoas); }
.sidebar-section[data-label="Comunicação"]:focus-visible   { outline-color: var(--sec-color-comunicacao); }
.sidebar-section[data-label="Comunidade"]:focus-visible    { outline-color: var(--sec-color-comunidade); }
.sidebar-section[data-label="Análise"]:focus-visible       { outline-color: var(--sec-color-analise); }
.sidebar-section[data-label="Plataforma"]:focus-visible    { outline-color: var(--sec-color-plataforma); }
.sidebar-section[data-label="SuperAdmin"]:focus-visible    { outline-color: var(--sec-color-superadmin); }
.sidebar-section[data-label="Ferramentas"]:focus-visible   { outline-color: var(--sec-color-ferramentas); }
.sidebar-section[data-label="Sistema"]:focus-visible       { outline-color: var(--sec-color-sistema); }

/* 6. Transição suave no SVG dos items (width/height ao colapsar/expandir) */
.nav-item svg {
  transition: color var(--t-fast), width var(--t-base), height var(--t-base);
}

/* ══════════════════════════════════════════════════════
   TABS BAR (módulo Utilizadores e outros)
══════════════════════════════════════════════════════ */
/* ── Tabs estilo pill — idêntico a .page-tabs / .page-tab ── */
.tabs-bar {
  display: flex;
  gap: .25rem;
  padding: .3rem;
  background: var(--color-bg-alt, var(--zinc-50, #f8fafc));
  border-radius: var(--r-xl);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
  margin-bottom: 1rem;
  transition: background .2s, border-color .2s;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border-radius: calc(var(--r-xl) - 4px);
  border: none;
  background: none;
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 550;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s, transform .12s;
}
.tab-btn:hover { background: var(--color-surface); color: var(--color-text); }
.tab-btn:active { transform: translateY(0.5px); }
.tab-btn.active {
  background: var(--color-surface);
  color: var(--sec-page-color, var(--color-primary));
  font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.tab-btn.active svg { color: var(--sec-page-color, var(--color-primary)); }
.tab-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: var(--r-lg, 8px);
  border: none;
  background: none;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 550;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.tab-btn-sm:hover { background: var(--color-surface); color: var(--color-text); }
.tab-btn-sm.active {
  background: var(--color-surface);
  color: var(--sec-page-color, var(--color-primary));
  font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.tab-btn-sm.active svg { color: var(--sec-page-color, var(--color-primary)); }

/* Cor suave da categoria — .tabs-bar */
:root[data-active-section] .tabs-bar {
  background: color-mix(in srgb,
    var(--sec-page-color, var(--color-primary)) 8%,
    var(--color-bg-alt, #f8fafc));
  border-color: color-mix(in srgb,
    var(--sec-page-color, var(--color-primary)) 20%,
    var(--color-border, #e2e8f0));
}
:root[data-active-section] .tab-btn.active {
  background: color-mix(in srgb,
    var(--sec-page-color, var(--color-primary)) 13%,
    var(--color-bg, #fff));
}

/* ══════════════════════════════════════════════════════
   MÓDULO CORREIO
══════════════════════════════════════════════════════ */

/* Pill tab bar — Correio */
.correio-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  background: none;
  border: none;
  border-radius: calc(var(--r-lg) - 3px);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}
.correio-tab:hover { background: var(--color-bg); color: var(--color-text); }
.correio-tab-active {
  background: color-mix(in srgb,
    var(--sec-page-color, var(--color-primary)) 13%,
    var(--color-bg, #fff)) !important;
  color: var(--sec-page-color, var(--color-primary)) !important;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.correio-tab-active svg { color: var(--sec-page-color, var(--color-primary)); }
.correio-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.correio-tab-count {
  background: var(--color-surface-raised, var(--zinc-200));
  color: var(--color-text-muted);
  font-size: .65rem;
  font-weight: 700;
  padding: .075rem .35rem;
  border-radius: 999px;
  min-width: 1.25rem;
  text-align: center;
}

/* Email rows */
.correio-row {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
}
.correio-row:hover { background: var(--color-surface-hover, var(--color-surface)); }
.correio-row-active { background: var(--sec-page-subtle, var(--color-primary-subtle)) !important; }
.correio-row-unread .correio-row-quem,
.correio-row-unread .correio-row-assunto { font-weight: 700; color: var(--color-text); }

.correio-row-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .1rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.correio-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.correio-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
}
.correio-row-quem {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correio-row-data {
  font-size: .7rem;
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.correio-row-assunto {
  font-size: .8rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correio-row-preview {
  font-size: .75rem;
  color: var(--color-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correio-row-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.correio-row:hover .correio-row-actions,
.correio-row-active .correio-row-actions { opacity: 1; }

/* Row action buttons */
.btn-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-row:hover { background: var(--color-surface-raised, var(--zinc-200)); color: var(--color-text); }
.btn-row.danger:hover { background: var(--color-danger-subtle, var(--color-danger-muted)); color: var(--color-danger); }
.btn-row svg { width: 13px; height: 13px; }

/* Unread indicator dot */
.correio-unread-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--sec-page-color, var(--color-primary));
  display: block;
  flex-shrink: 0;
}

/* ── Correio — responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Stack list + panel vertically on small screens */
  .correio-layout-grid {
    grid-template-columns: 1fr !important;
  }
  /* Tab bar scrolls horizontally */
  .correio-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .correio-tabs-wrap::-webkit-scrollbar { display: none; }
}

/* ── Hub Tab Bar ─────────────────────────────────────────────────── */
.hub-tab-bar {
  display: flex;
  align-items: center;
  gap: .125rem;
  padding: .5rem 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hub-tab-bar::-webkit-scrollbar { display: none; }

.hub-tab-btn {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: .375rem .375rem 0 0;
  margin-bottom: -1px;
  transition: color .15s, background .15s, border-color .15s;
}
.hub-tab-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.hub-tab-btn:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}
.hub-tab-btn:focus-visible {
  outline: 2px solid var(--sec-page-color, var(--color-primary));
  outline-offset: 2px;
}
.hub-tab-btn.active {
  color: var(--hub-accent, var(--color-primary));
  border-bottom-color: var(--hub-accent, var(--color-primary));
  background: transparent;
  font-weight: 600;
}
.hub-tab-btn.active svg { color: var(--hub-accent, var(--color-primary)); }

/* Sidebar — itens com tabs: mostrar indicador */
.nav-item[data-has-tabs]::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: auto;
  opacity: .4;
  flex-shrink: 0;
}
.sidebar-collapsed .nav-item[data-has-tabs]::after { display: none; }

/* Ajuste: quando há hub-tab-bar, separar o page-header com margem
   Usa ~ (irmão geral) para funcionar mesmo quando existe <style> entre eles */
.hub-tab-bar ~ .page-header  { margin-top: 1.375rem; }

/* Cabeçalho de página — espaçamento explícito (as variáveis --spacing-* do layout.css não estão definidas) */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .75rem;
  padding-bottom: .875rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--sec-page-color, var(--color-primary));
}
.page-title svg { color: var(--sec-page-color, var(--color-primary)); }

/* Subtítulo do cabeçalho de página */
.page-subtitle {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: .2rem 0 0;
  font-weight: 400;
  line-height: 1.45;
}
.btn-primary {
  background: var(--sec-page-btn-color, var(--color-primary));
  border-color: var(--sec-page-btn-color, var(--color-primary));
}

/* Paginação */
.pagination-wrap { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; gap:1rem; flex-wrap:wrap; }
.pag-info { font-size:.75rem; color:var(--color-text-faint); }
.pag-btns { display:flex; gap:.25rem; }
.pag-btn { min-width:2rem; height:2rem; padding:0 .375rem; border:1px solid var(--color-border); background:var(--color-bg); border-radius:.375rem; font-size:.8125rem; cursor:pointer; color:var(--color-text-faint); transition:all var(--t-fast); }
.pag-btn:hover:not(:disabled) { border-color:var(--sec-page-color, var(--color-primary)); color:var(--sec-page-color, var(--color-primary)); }
.pag-btn.active { background:var(--sec-page-btn-color, var(--color-primary)); border-color:var(--sec-page-btn-color, var(--color-primary)); color:var(--color-on-primary, #fff); font-weight:600; }
.pag-btn:disabled { opacity:.35; cursor:not-allowed; }
.pag-ellipsis { display:flex; align-items:center; padding:0 .25rem; color:var(--color-text-faint); font-size:.8125rem; }

/* ── CSS Bar Charts (Relatórios) ── */
.css-bar-chart { display:flex; flex-direction:column; gap:.5rem; }
.css-bar-item { display:grid; grid-template-columns:8rem 1fr 3rem; align-items:center; gap:.5rem; }
.css-bar-label { font-size:.75rem; color:var(--color-text-faint); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.css-bar-track { background:var(--zinc-100,#f4f4f5); border-radius:99px; height:.625rem; overflow:hidden; }
.css-bar-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.css-bar-value { font-size:.75rem; font-weight:600; color:var(--color-text); }

/* ══════════════════════════════════════════════════════════════
   FORM SYSTEM — definições completas para formulários e modais
   (form-control / form-label / form-group / form-check / etc.)
   ══════════════════════════════════════════════════════════════ */

/* ── Grupo base ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.form-group:last-child { margin-bottom: 0; }

/* ── Label ── */
.form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin-bottom: .2rem;
  line-height: 1.3;
}
.form-label .required,
.form-label.required::after {
  content: ' *';
  color: var(--color-danger, #ef4444);
}

/* ── Controlo genérico (input / select / textarea) ── */
.form-control {
  display: block;
  width: 100%;
  padding: .55rem .8rem;
  font-size: .875rem;
  font-family: inherit;
  line-height: 1.4;
  color: var(--color-text, #1e293b);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e4e4e7);
  border-radius: var(--r-md, .5rem);
  outline: none;
  transition: border-color var(--t-fast, .12s), box-shadow var(--t-fast, .12s), background var(--t-fast, .12s);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.form-control::placeholder { color: var(--color-text-faint, #94a3b8); }
.form-control:hover:not(:focus):not(:disabled):not([readonly]) { border-color: var(--color-border-strong, #d4d4d8); }
.form-control:focus {
  border-color: var(--color-primary, #2D6A4F);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(45,106,79,0.18));
}
.form-control:disabled,
.form-control[readonly] {
  background: var(--zinc-50, #FAFAF8);
  color: var(--color-text-faint, #A8A39C);
  border-color: var(--color-border, #D8D4CC);
  cursor: not-allowed;
}

/* ── Select ── */
select.form-control {
  appearance: auto;
  cursor: pointer;
}

/* ── Textarea ── */
textarea.form-control {
  min-height: 6rem;
  resize: vertical;
}

/* ── Variante pequena ── */
.form-control-sm {
  padding: .3rem .6rem;
  font-size: .8125rem;
  border-radius: .375rem;
}

/* ── Estado de erro ── */
.form-control.is-invalid,
.form-group.has-error .form-control {
  border-color: var(--color-danger, #dc2626);
}
.form-control.is-invalid:focus,
.form-group.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}
.form-error-msg {
  font-size: .76rem;
  color: var(--color-danger, #dc2626);
  margin-top: .15rem;
}

/* ── Texto auxiliar ── */
.form-hint {
  font-size: .76rem;
  color: var(--color-text-muted, #7B766F);
  line-height: 1.4;
}

/* ── Checkbox / Radio row ── */
.form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--sec-page-btn-color, var(--color-primary, #2D6A4F));
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--sec-page-btn-color, var(--color-primary, #2D6A4F));
  cursor: pointer;
  flex-shrink: 0;
}
.form-check-label {
  font-size: .875rem;
  color: var(--color-text, #1e293b);
  cursor: pointer;
  user-select: none;
}

/* ── Input group (ícone + campo) ── */
.input-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-border-strong, #C8C4BC);
  border-radius: .5rem;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.input-group:focus-within {
  border-color: var(--color-primary, #2D6A4F);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #2D6A4F) 18%, transparent);
}
.input-group .form-control {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  flex: 1;
}
.input-group-prefix,
.input-group-suffix {
  display: flex;
  align-items: center;
  padding: 0 .65rem;
  background: var(--zinc-50, #FAFAF8);
  color: var(--color-text-muted, #7B766F);
  font-size: .85rem;
  border-right: 1.5px solid var(--color-border, #D8D4CC);
  white-space: nowrap;
}
.input-group-suffix {
  border-right: none;
  border-left: 1.5px solid var(--color-border, #D8D4CC);
}

/* ── Grid de formulário (2 colunas) ── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}
@media (max-width: 560px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ── Acções do formulário (botões no fundo) ── */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1.5px solid var(--color-border, #D8D4CC);
  flex-wrap: wrap;
}

/* ── Botão extra-pequeno ── */
.btn-xs {
  padding: .175rem .45rem;
  font-size: .72rem;
  gap: .2rem;
  border-radius: var(--r-sm);
}

/* ── Melhorias nos modais com formulários ── */
.modal-body .form-group { margin-bottom: .875rem; }
.modal-body .form-group:last-child { margin-bottom: 0; }
.modal-body .form-grid-2 { gap: .625rem .875rem; }
.modal-footer { gap: .5rem; }

/* ── Select múltiplo ── */
select[multiple].form-control {
  height: auto;
  min-height: 7rem;
  padding: .35rem;
}
select[multiple].form-control option {
  padding: .3rem .5rem;
  border-radius: .25rem;
}
select[multiple].form-control option:checked {
  background: color-mix(in srgb, var(--color-primary, #2D6A4F) 15%, transparent);
  color: var(--color-primary, #2D6A4F);
}

/* ── Range input ── */
input[type="range"].form-control {
  padding: .25rem 0;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--sec-page-btn-color, var(--color-primary, #2D6A4F));
}
input[type="range"].form-control:focus { box-shadow: none; }

/* ── Color picker ── */
input[type="color"].form-control {
  padding: .2rem .3rem;
  height: 2.25rem;
  cursor: pointer;
}

/* ── Secção dentro de modal ── */
.form-section-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-primary, #2D6A4F);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.1rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1.5px solid color-mix(in srgb, var(--color-primary, #2D6A4F) 20%, transparent);
}
.form-section-title:first-child { margin-top: 0; }

/* ═══════════════════════════════════
   LANDING PAGE  (cores fixas — independente do sistema de temas)
═══════════════════════════════════ */
.landing-root {
  min-height: 100vh;
  background: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem);
  height: 3.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.landing-hero {
  background: #0b0a19;
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem,14vh,9rem) clamp(1.5rem,6vw,5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88vh;
  text-align: center;
}
.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.landing-hero-glow {
  position: absolute;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.22) 0%, transparent 68%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: landing-breathe 5s ease-in-out infinite;
}
.landing-section {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 6vw, 5rem);
}
.landing-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.landing-section-title {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: .5rem;
}
.landing-section-sub {
  font-size: .9375rem;
  color: #64748b;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.65;
}
.landing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}
.landing-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.625rem;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.landing-card:hover {
  box-shadow: 0 14px 36px rgba(99,102,241,.16), 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-5px);
  border-color: #818cf8;
}
.landing-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
}
.landing-plan-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.landing-plan-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06); transform: translateY(-3px); }
.landing-plan-card.featured {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
  position: relative;
  background: linear-gradient(160deg, #faf5ff 0%, #f5f3ff 100%);
}
.landing-plan-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary, #6366f1);
  color: var(--color-on-primary, #fff);
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .75rem;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.landing-plan-feature {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #64748b;
}
.landing-plan-feature svg { flex-shrink: 0; color: var(--color-primary, #6366f1); }
.landing-module-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  font-size: .75rem;
  font-weight: 500;
  color: #64748b;
  background: #fff;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  cursor: default;
}
.landing-module-chip:hover {
  background: var(--color-primary-subtle, #eef2ff);
  color: var(--color-primary, #6366f1);
  border-color: #a5b4fc;
}
.landing-security-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
  flex: 1 1 200px;
  max-width: 260px;
}
.landing-security-badge:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
.landing-footer {
  background: #0b0a19;
  padding: 2.5rem clamp(1.5rem, 6vw, 5rem);
  color: #64748b;
  font-size: .8125rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* PWA install section cards */
.pwa-feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.pwa-feature-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
/* PWA install/update bar */
#pwaUpdateBar {
  animation: pwa-bar-in 300ms ease;
}
@keyframes pwa-bar-in {
  from { opacity:0; transform:translate(-50%, 1rem); }
  to   { opacity:1; transform:translate(-50%, 0);    }
}
/* Step connector arrows in "Como funciona" */
.lp-step-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3.75rem;
  flex-shrink: 0;
  opacity: .55;
}
@media (max-width: 768px) {
  .landing-hero { min-height: 70vh; }
  .landing-plan-card.featured { transform: none; }
  .lp-step-connector { display: none; }
}

/* ── Landing: dynamics & animations ────────────────────────── */
@keyframes landing-breathe {
  0%,100% { opacity:.85; transform:translate(-50%,-50%) scale(1);   }
  50%      { opacity:1;   transform:translate(-50%,-50%) scale(1.2); }
}
@keyframes landing-float {
  0%,100% { transform:translateY(0)     rotate(0deg);  }
  40%     { transform:translateY(-14px) rotate(5deg);  }
  70%     { transform:translateY(-7px)  rotate(-3deg); }
}
@keyframes landing-float2 {
  0%,100% { transform:translateY(0)     rotate(0deg);  }
  35%     { transform:translateY(-10px) rotate(-4deg); }
  70%     { transform:translateY(-17px) rotate(3deg);  }
}
@keyframes landing-grad-text {
  0%,100% { background-position:0% 50%;   }
  50%     { background-position:100% 50%; }
}
@keyframes landing-badge-pulse {
  0%,100% { box-shadow:0 0 0 0   rgba(99,102,241,.55); }
  50%     { box-shadow:0 0 0 7px rgba(99,102,241,0);   }
}
.landing-reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .65s ease, transform .65s ease;
}
.landing-reveal.visible { opacity:1; transform:none; }
.landing-reveal-stagger > * {
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
.landing-reveal-stagger.visible > * { opacity:1; transform:none; }
.landing-reveal-stagger.visible > *:nth-child(1) { transition-delay:0s;    }
.landing-reveal-stagger.visible > *:nth-child(2) { transition-delay:.07s;  }
.landing-reveal-stagger.visible > *:nth-child(3) { transition-delay:.14s;  }
.landing-reveal-stagger.visible > *:nth-child(4) { transition-delay:.21s;  }
.landing-reveal-stagger.visible > *:nth-child(5) { transition-delay:.28s;  }
.landing-reveal-stagger.visible > *:nth-child(6) { transition-delay:.35s;  }
/* Landing platform carousel */
.lp-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .6s ease; }
.lp-slide.lp-active { opacity:1; pointer-events:auto; z-index:1; }
.lp-desc { position:absolute; left:0; right:0; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.lp-desc.lp-active { opacity:1; pointer-events:auto; }
.lp-tab { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .875rem; border-radius:999px; border:1.5px solid transparent; font-size:.8rem; font-weight:600; cursor:pointer; color:rgba(255,255,255,.5); background:transparent; transition:all .2s; }
.lp-tab.lp-active { border-color:rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.08); }
.lp-tab:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
/* ── Showcase: sidebar responsive ── */
.lp-showcase-wrap { display:flex; gap:1.25rem; max-width:1100px; margin:0 auto; align-items:flex-start; }
.lp-showcase-sidebar { width:144px; flex-shrink:0; display:flex; flex-direction:column; gap:.15rem; padding-right:1rem; border-right:1px solid rgba(255,255,255,.08); }
@media (max-width:600px) {
  .lp-showcase-wrap { flex-direction:column; }
  .lp-showcase-sidebar { width:100%; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding-right:0; padding-bottom:.5rem; }
}

/* ── Alunos: underline hover/focus on table links ── */
button:hover .aluno-name-text,
button:focus-visible .aluno-name-text { text-decoration-color: currentColor; }
.aluno-matric-link:hover,
.aluno-matric-link:focus-visible { text-decoration-color: currentColor; }

/* ── Logótipo personalizado: remover decorações do container ────────────── */
/* JS-class approach (via _applyLogoToDOM) */
.logo-has-custom,
[data-logo-slot].logo-has-custom {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  padding: 0 !important;
  /* Allow container to shrink/grow with the image when custom logo is used */
  width: auto !important;
}
.logo-has-custom img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 8rem;
  max-height: 2rem;
  object-fit: contain !important;
  border-radius: 0 !important;
}
/* CSS-only fallback: activate as soon as an <img> is injected (no JS class needed) */
.sidebar-logo-mark:has(img) {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.sidebar-logo-mark:has(img) img {
  display: block !important;
  width: auto !important;
  height: 2rem !important;
  max-width: 8rem !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
/* Opção Personalização: colorir logotipo Artivia com cor de destaque */
/* Usa CSS mask-image: o logo fica colorido na cor de destaque, fundo transparente */
.sidebar-logo-mark.logo-colorize {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
}
.logo-colorize-mask {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-primary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   FLY-OUT SIDEBAR — hover sobre categoria → painel de módulos
══════════════════════════════════════════════════════════════ */

/* 1. Módulos invisíveis inline; mostrados apenas via fly-out (expandido e colapsado) */
.app-root:not(.sb-searching) .sidebar-nav > .nav-item[data-section] {
  display: none !important;
}

/* 2. Esconder row de controlos (toggle-all / scroll-to-active inaplicáveis) */
#sidebarControlsRow { display: none !important; }

/* 3. Chevron aponta → (fly-out hint); sem distinção aberto/fechado */
.sidebar-section[data-label] .sec-chevron {
  transform: rotate(-90deg) !important;
  opacity: 0.45;
}

/* 4. Sem fundo permanente de secção "aberta" (não há conteúdo inline) */
.app-root:not(.sb-searching) .sidebar-section[data-label] {
  background: transparent !important;
}
.app-root:not(.sb-searching) .sidebar-section[data-label]:hover {
  background: color-mix(in srgb, var(--sec-accent, var(--color-primary)) 9%, transparent) !important;
}

/* 5. Secção activa — contém a página actual */
.app-root:not(.sb-searching) .sidebar-section.sb-has-active {
  background: color-mix(in srgb, var(--sec-accent, var(--color-primary)) 14%, transparent) !important;
}
.sidebar-section.sb-has-active::before { opacity: 1 !important; }
.sidebar-section.sb-has-active .sec-label { font-weight: 700; }
.sidebar-section.sb-has-active .sec-chevron { opacity: 0.75 !important; }

/* 6. Fly-out aberto — secção cujo painel está visível */
.sidebar-section.sb-fly-open {
  background: color-mix(in srgb, var(--sec-accent, var(--color-primary)) 18%, transparent) !important;
}
.sidebar-section.sb-fly-open::before { opacity: 1 !important; }
.sidebar-section.sb-fly-open .sec-label { color: var(--sec-accent, var(--color-primary)) !important; }

/* ── Fly-out panel ─────────────────────────────────────────── */
#sidebarFlyout {
  position: fixed;
  z-index: 280;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--sb-fly-accent, var(--color-primary));
  box-shadow: 5px 4px 22px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  min-width: 196px;
  max-width: 228px;
  padding: 0.375rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  will-change: opacity, transform;
}
#sidebarFlyout.sb-fly-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Bridge invisível: estende a área de hover para cobrir o gap lateral */
#sidebarFlyout::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 10px;
  height: 100%;
}

/* Título da secção no fly-out */
.sb-fly-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--sb-fly-accent, var(--color-primary));
  padding: 0.25rem 0.5rem 0.3125rem;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-bottom: 1px solid var(--color-border);
  pointer-events: none;
  user-select: none;
}

/* Nav items no fly-out */
#sidebarFlyout .nav-item {
  display: flex !important;
  color: var(--color-text-muted) !important;
}
#sidebarFlyout .nav-item.active,
#sidebarFlyout .nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--sb-fly-accent, var(--color-primary)) 12%, transparent);
  color: var(--sb-fly-accent, var(--color-primary)) !important;
  font-weight: 600;
}
#sidebarFlyout .nav-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-text) !important;
}
#sidebarFlyout .nav-item:focus-visible {
  outline: 2px solid var(--sb-fly-accent, var(--color-primary));
  outline-offset: -2px;
  color: var(--color-text) !important;
}

/* ── Ambient status strip ──────────────────────────────────────── */
.sb-ambient {
  padding: 0 0.375rem 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}
.sb-amb-sep {
  height: 1px;
  background: var(--color-border);
  margin: 0 0.25rem 0.25rem;
  opacity: 0.6;
}
.sb-amb-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--r-md);
  border: none;
  background: color-mix(in srgb, var(--ac, var(--color-primary)) 8%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--t-fast);
  min-width: 0;
}
.sb-amb-btn:hover {
  background: color-mix(in srgb, var(--ac, var(--color-primary)) 15%, transparent);
}
.sb-amb-btn:focus-visible {
  outline: 2px solid var(--ac, var(--color-primary));
  outline-offset: -1px;
}
/* Ícone em caixa colorida */
.sb-amb-ico {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ac, var(--color-primary)) 14%, transparent);
  color: var(--ac, var(--color-primary));
  display: flex; align-items: center; justify-content: center;
}
/* Corpo de texto: valor + sublabel */
.sb-amb-body {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.sb-amb-val {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ac, var(--color-primary));
  line-height: 1.25;
  white-space: nowrap;
}
.sb-amb-sub {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.sidebar-collapsed .sb-ambient { display: none; }
/* dark sidebar */
.sidebar.sidebar-dark .sb-amb-btn {
  background: color-mix(in srgb, var(--ac, var(--color-primary)) 13%, transparent);
}
.sidebar.sidebar-dark .sb-amb-btn:hover {
  background: color-mix(in srgb, var(--ac, var(--color-primary)) 22%, transparent);
}
.sidebar.sidebar-dark .sb-amb-ico {
  background: color-mix(in srgb, var(--ac, var(--color-primary)) 20%, transparent);
}

/* Botão de limpar pesquisa na sidebar */
.sb-srch-clear {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-text-faint);
  color: var(--color-bg);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.sb-srch-clear:hover { opacity: 1; background: var(--color-text-muted); }
.sb-srch-clear:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.sidebar.sidebar-dark .sb-srch-clear { background: rgba(255,255,255,0.4); color: #111; }

/* ── Command Palette (Ctrl+K) ───────────────────────────────────────────────
   Overlay e caixa são criados dinamicamente via JS (openCmdPalette).
   Classes: .cmd-pal-wrap, .cmd-pal-header, .cmd-pal-input, .cmd-pal-list,
   .cmd-pal-group-label, .cmd-pal-item, .cmd-pal-ico, .cmd-pal-name,
   .cmd-pal-hint, .cmd-pal-kbd, .cmd-pal-footer, .cmd-pal-empty
   ─────────────────────────────────────────────────────────────────────────── */
.cmd-pal-wrap {
  background: var(--color-bg);
  border-radius: .625rem;
  box-shadow: 0 16px 56px rgba(0,0,0,.28), 0 0 0 1px var(--color-border);
  width: min(560px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmd-pal-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.cmd-pal-search-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-faint);
  opacity: .6;
}
.cmd-pal-search-icon svg { width: 17px; height: 17px; }
.cmd-pal-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  min-width: 0;
  caret-color: var(--color-primary);
}
.cmd-pal-input::placeholder { color: var(--color-text-faint); }
.cmd-pal-list {
  flex: 1;
  overflow-y: auto;
  padding: .375rem 0 .5rem;
  overscroll-behavior: contain;
}
.cmd-pal-group-label {
  padding: .625rem 1rem .2rem;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  user-select: none;
}
.cmd-pal-group-label:first-child { padding-top: .375rem; }
.cmd-pal-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .45rem 1rem;
  cursor: pointer;
  transition: background var(--t-fast, 120ms);
}
.cmd-pal-item.active { background: color-mix(in srgb, var(--sec-page-color, var(--color-primary)) 10%, transparent); }
.cmd-pal-item.active .cmd-pal-name { color: var(--sec-page-color, var(--color-primary)); }
.cmd-pal-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  opacity: .75;
}
.cmd-pal-ico svg { width: 15px; height: 15px; }
.cmd-pal-item.active .cmd-pal-ico { opacity: 1; color: var(--sec-page-color, var(--color-primary)); }
.cmd-pal-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cmd-pal-name { font-size: .875rem; font-weight: 500; color: var(--color-text); transition: color var(--t-fast, 120ms); }
.cmd-pal-hint { font-size: .7rem; color: var(--color-text-faint); }
.cmd-pal-kbd {
  font-family: monospace;
  font-size: .68rem;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--color-text-faint);
  flex-shrink: 0;
  white-space: nowrap;
}
.cmd-pal-footer {
  padding: .375rem .875rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle, #f8fafc);
  font-size: .68rem;
  color: var(--color-text-faint);
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.cmd-pal-footer kbd {
  font-family: monospace;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 4px;
}
.cmd-pal-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-text-faint);
  font-size: .85rem;
}
.sidebar.sidebar-dark .sb-srch-clear:hover { background: rgba(255,255,255,0.7); }

/* ── Activity Hub — Phase 2 (Command Bar + Recentes) ─────────────── */
.db-cmdhub {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .6875rem 1.125rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: .5rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
  color: var(--color-text-faint);
  transition: border-color var(--t-fast,120ms), box-shadow var(--t-fast,120ms);
  text-align: left;
  font-family: inherit;
}
.db-cmdhub:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.db-cmdhub:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.db-cmdhub-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: .45;
}
.db-cmdhub-ico svg { width: 16px; height: 16px; }
.db-cmdhub-placeholder {
  flex: 1;
  font-size: .875rem;
}
.db-cmdhub-right {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
}
.db-cmdhub-hint {
  font-size: .75rem;
  display: none;
}
@media (min-width: 600px) { .db-cmdhub-hint { display: block; } }
.db-cmdhub-kbd {
  font-family: monospace;
  font-size: .68rem;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
  color: var(--color-text-faint);
}

/* Recentes row */
.db-recentes-row {
  display: flex;
  gap: .5rem;
  padding: .625rem 1rem .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.db-recentes-row::-webkit-scrollbar { height: 3px; }
.db-recentes-row::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}
.db-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .875rem .4375rem .625rem;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast,120ms), border-color var(--t-fast,120ms);
  font-family: inherit;
  text-align: left;
}
.db-recent-chip:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
}
.db-recent-chip:hover .db-recent-name { color: var(--color-primary); }
.db-recent-ico {
  display: flex;
  align-items: center;
  color: var(--color-text-faint);
  opacity: .75;
  flex-shrink: 0;
}
.db-recent-ico svg { width: 13px; height: 13px; }
.db-recent-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .05rem;
}
.db-recent-name {
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast,120ms);
}
.db-recent-type {
  font-size: .6rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}

/* ── Quick Panel — Phase 3 Workspace ─────────────────────────────── */
.qp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
  z-index: 1100;
  display: flex; justify-content: flex-end;
  animation: qpFadeIn 180ms ease;
}
.qp-overlay.qp-closing { animation: qpFadeOut 280ms ease forwards; }
.qp-overlay.qp-closing .qp-panel { animation: qpSlideOut 260ms ease forwards; }

@keyframes qpFadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes qpFadeOut  { from { opacity:1; } to { opacity:0; } }
@keyframes qpSlideIn  { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes qpSlideOut { from { transform:translateX(0); } to { transform:translateX(110%); } }

.qp-panel {
  width: min(400px, 100vw);
  height: 100%;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-left: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: -12px 0 40px rgba(0,0,0,.14);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: qpSlideIn 240ms cubic-bezier(.32,.72,0,1);
}
.qp-hd {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.qp-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qp-avatar svg { width: 20px; height: 20px; }
.qp-avatar-text {
  font-size: .875rem; font-weight: 700;
  color: var(--color-primary);
}
.qp-title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.qp-name {
  font-size: 1rem; font-weight: 700; color: var(--color-text);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.qp-badge {
  font-size: .63rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--color-text-faint);
}
.qp-close-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint);
  transition: background var(--t-fast,120ms), color var(--t-fast,120ms);
}
.qp-close-btn:hover { background: var(--color-bg-subtle,#f8fafc); color: var(--color-text); }
.qp-close-btn svg { width: 14px; height: 14px; }
.qp-close-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.qp-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.qp-body::-webkit-scrollbar { width: 4px; }
.qp-body::-webkit-scrollbar-track { background: transparent; }
.qp-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.qp-loading {
  display: flex; align-items: center; gap: .625rem;
  padding: 2rem 1.5rem; color: var(--color-text-faint); font-size: .875rem;
}
.qp-spin {
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%; animation: spin 650ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.qp-status-badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .2rem .7rem; border-radius: 2rem;
}
.qp-fields { padding: .5rem 1.25rem; display: flex; flex-direction: column; }
.qp-field {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .5625rem 0; border-bottom: 1px solid var(--color-border);
}
.qp-field:last-child { border-bottom: none; }
.qp-field-l {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-text-faint);
  min-width: 88px; flex-shrink: 0;
}
.qp-field-v { font-size: .85rem; color: var(--color-text); word-break: break-word; }
.qp-link { color: var(--color-primary); text-decoration: none; }
.qp-link:hover { text-decoration: underline; }

.qp-foot {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: color-mix(in srgb, var(--color-bg-subtle, #f8fafc) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}

/* ── Centro de Notificações (fase 4 workspace) ── */
.nc-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(3px);
  animation: qpFadeIn 200ms ease forwards;
}
.nc-overlay.nc-closing { animation: qpFadeOut 280ms ease forwards; }
.nc-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 100vw;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-left: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: -12px 0 40px rgba(0,0,0,.14);
  z-index: 9999;
  display: flex; flex-direction: column;
  animation: qpSlideIn 260ms ease forwards;
}
.nc-panel.nc-closing { animation: qpSlideOut 260ms ease forwards; }
.nc-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.nc-title { font-size: 1rem; font-weight: 600; margin: 0; }
.nc-hd-right { display: flex; align-items: center; gap: .5rem; }
.nc-mark-all-btn {
  font-size: .7rem; color: var(--color-primary); background: none; border: none;
  cursor: pointer; padding: .25rem .5rem; border-radius: var(--r-sm);
  white-space: nowrap; transition: background .15s;
}
.nc-mark-all-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.nc-close-btn {
  width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--color-text-faint);
  transition: background .15s, color .15s;
}
.nc-close-btn:hover { background: var(--color-border); color: var(--color-text); }
.nc-tabs {
  display: flex; border-bottom: 1px solid var(--color-border);
  padding: 0 1.25rem; flex-shrink: 0;
}
.nc-tab {
  padding: .6rem .75rem; font-size: .8rem; font-weight: 500;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: .4rem;
  transition: color .15s, border-color .15s;
}
.nc-tab:hover { color: var(--color-text); }
.nc-tab-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.nc-tab-badge {
  font-size: .62rem; font-weight: 700; line-height: 1;
  background: var(--color-primary); color: #fff;
  padding: .15rem .35rem; border-radius: 99px;
  min-width: 1.1rem; text-align: center;
}
.nc-body { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.nc-body::-webkit-scrollbar { width: 4px; }
.nc-body::-webkit-scrollbar-track { background: transparent; }
.nc-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.nc-group-label {
  font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-faint); padding: .75rem 1.25rem .35rem;
  position: sticky; top: 0; background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1;
}
.nc-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1.25rem; cursor: pointer; outline: none;
  transition: background .12s;
}
.nc-item:hover, .nc-item:focus-visible { background: var(--color-bg-subtle, #f8fafc); }
.nc-item-unread { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.nc-item-unread:hover, .nc-item-unread:focus-visible { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.nc-item-ico {
  width: 2rem; height: 2rem; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .1rem;
}
.nc-item-body { min-width: 0; flex: 1; }
.nc-item-title {
  font-size: .8rem; font-weight: 500; color: var(--color-text);
  line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-item-unread .nc-item-title { font-weight: 600; }
.nc-item-msg {
  font-size: .73rem; color: var(--color-text-faint); margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-item-when { font-size: .68rem; color: var(--color-text-faint); margin-top: .25rem; }
.nc-unread-dot {
  width: .45rem; height: .45rem; background: var(--color-primary);
  border-radius: 50%; flex-shrink: 0; margin-top: .45rem;
}
.nc-arrow { color: var(--color-text-faint); font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.nc-item-linked { cursor: pointer; }
.nc-item-linked:hover .nc-arrow, .nc-item-linked:focus-visible .nc-arrow { color: var(--color-primary, #6366f1); }
.nc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 3rem 1.5rem; min-height: 200px;
  color: var(--color-text-faint); font-size: .85rem; text-align: center;
}
.nc-loading {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 3rem 1.5rem; color: var(--color-text-faint); font-size: .85rem;
}
.nc-foot {
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle, #f8fafc);
  flex-shrink: 0;
}


/* ── Floating Windows (fase 5 workspace) ── */
@keyframes fwIn       { from { opacity:0; transform:scale(.93) translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fwOut      { from { opacity:1; transform:none; } to { opacity:0; transform:scale(.93) translateY(12px); } }
@keyframes fwMinimize { from { opacity:1; transform:none; } to { opacity:0; transform:scale(.55) translateY(60px); } }
@keyframes fwRestore  { from { opacity:0; transform:scale(.55) translateY(60px); } to { opacity:1; transform:none; } }
.fw-win {
  position: fixed;
  width: 640px; max-width: calc(100vw - 2rem);
  min-height: 280px; max-height: calc(100vh - 80px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: fwIn 220ms cubic-bezier(.22,.8,.36,1) forwards;
  transition: box-shadow .18s ease, border-radius .2s ease, left .22s cubic-bezier(.22,.8,.36,1), top .22s cubic-bezier(.22,.8,.36,1), width .22s cubic-bezier(.22,.8,.36,1), height .22s cubic-bezier(.22,.8,.36,1);
}
.fw-win--focused {
  box-shadow: 0 20px 60px rgba(0,0,0,.26), 0 4px 16px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}
.fw-win:not(.fw-win--focused) .fw-titlebar { opacity: .78; }
.fw-win.fw-closing    { animation: fwOut 220ms ease forwards; }
.fw-win.fw-minimized  { display: none; }
.fw-win.fw-minimizing { animation: fwMinimize .22s ease forwards; pointer-events: none; }
.fw-win.fw-restoring  { animation: fwRestore .22s cubic-bezier(.22,.68,0,1.2); }
.fw-win.fw-maximized {
  left: 0 !important; top: 0 !important;
  width: 100vw !important; height: calc(100vh - 48px) !important;
  border-radius: 0 !important; resize: none !important;
}
.fw-snap-ghost {
  position: fixed; pointer-events: none; z-index: 8999;
  background: color-mix(in srgb, var(--color-primary, #6366f1) 14%, transparent);
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  border: 2px solid color-mix(in srgb, var(--color-primary, #6366f1) 55%, transparent);
  border-radius: var(--r-lg); transition: background 80ms ease, border-color 80ms ease, opacity 80ms ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #6366f1) 25%, transparent), 0 8px 24px rgba(0,0,0,.12);
}
/* ── Fase 15: Resize Handles ─────────────────────────────────────────────── */
.fw-rzh { position: absolute; z-index: 20; }
.fw-rzh--n  { top: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.fw-rzh--s  { bottom: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.fw-rzh--e  { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.fw-rzh--w  { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.fw-rzh--se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: se-resize; z-index: 21; }
.fw-rzh--sw { bottom: 0; left: 0; width: 16px; height: 16px; cursor: sw-resize; z-index: 21; }
.fw-rzh--ne { top: 0; right: 0; width: 16px; height: 16px; cursor: ne-resize; z-index: 21; }
.fw-rzh--nw { top: 0; left: 0; width: 16px; height: 16px; cursor: nw-resize; z-index: 21; }
.fw-win.fw-maximized .fw-rzh { display: none; }
.fw-rzh--se::after {
  content: '';
  position: absolute; bottom: 3px; right: 3px;
  width: 9px; height: 9px; pointer-events: none;
  background-image: radial-gradient(circle, var(--color-border) 1.2px, transparent 1.2px);
  background-size: 3.5px 3.5px; opacity: .65;
}
.fw-titlebar {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem;
  background: color-mix(in srgb, var(--color-bg-subtle, #f0f4fa) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--color-border);
  cursor: grab; user-select: none; flex-shrink: 0;
}
.fw-titlebar:active { cursor: grabbing; }
.fw-tl-group { display: flex; gap: .38rem; align-items: center; margin-right: .25rem; flex-shrink: 0; }
.fw-win-ico { width: 1rem; height: 1rem; display: flex; align-items: center; color: var(--color-primary); flex-shrink: 0; }
.fw-win-title { font-size: .82rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-win-btn {
  width: .85rem; height: .85rem;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--color-border); padding: 0;
  transition: filter .15s, background .15s;
}
.fw-win-btn:hover { filter: brightness(.88); }
.fw-tl-ico { display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; color: rgba(0,0,0,.5); pointer-events: none; }
.fw-tl-group:hover .fw-tl-ico { opacity: 1; }
.fw-cls-btn { background: #FF5F57; }
.fw-min-btn { background: #FEBC2E; }
.fw-max-btn { background: #28C840; }
.fw-win:not(.fw-win--focused) .fw-cls-btn,
.fw-win:not(.fw-win--focused) .fw-min-btn,
.fw-win:not(.fw-win--focused) .fw-max-btn { background: #b0b0b0; }
.fw-nav-btn { background: transparent; color: var(--color-text-faint); margin-left: auto; width: 1.4rem; height: 1.4rem; }
.fw-nav-btn:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); filter: none; }
.fw-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  font-size: .85rem;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.fw-body::-webkit-scrollbar { width: 4px; }
.fw-body::-webkit-scrollbar-track { background: transparent; }
.fw-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.fw-body .page-title { font-size: 1.1rem !important; }
.fw-loading, .fw-err {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .5rem; padding: 2.5rem 1.5rem;
  color: var(--color-text-faint); font-size: .85rem; text-align: center;
}

/* ── Fase 10: Dock macOS ─────────────────────────────────────────────────── */
@keyframes dockBounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-16px) scale(1.14); }
  55%  { transform: translateY(-5px) scale(1.04); }
  75%  { transform: translateY(-10px) scale(1.09); }
  100% { transform: translateY(0) scale(1); }
}

.wm-taskbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: auto;
  background: transparent;
  border-top: none;
  box-shadow: none;
  z-index: 8400;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 1rem .5rem;
  pointer-events: none;
}

/* Pill flutuante centrado */
._wm-dock-inner {
  pointer-events: all;
  display: flex; align-items: flex-end;
  gap: .25rem;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: .45rem .625rem .35rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  overflow-x: auto; overflow-y: visible;
  max-width: calc(100vw - 2rem);
  scrollbar-width: none;
}
._wm-dock-inner::-webkit-scrollbar { display: none; }

/* Item de dock (janela aberta) */
.wm-dock-item {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: none; border: none; cursor: pointer;
  padding: .25rem .3rem .2rem; border-radius: 10px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .12s;
  position: relative; flex-shrink: 0;
}
.wm-dock-item:hover { transform: translateY(-10px) scale(1.25); background: color-mix(in srgb,var(--color-primary) 8%,transparent); }
.wm-dock-item:active { transform: translateY(-3px) scale(1.06); }
.wm-dock-item.wm-dock-item--bounce { animation: dockBounce .56s cubic-bezier(.36,.07,.19,.97) forwards; }

/* Ícone da janela */
.wm-dock-ico {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-subtle));
  box-shadow: 0 3px 10px rgba(0,0,0,.16);
  flex-shrink: 0;
}
.wm-dock-ico svg { width: 20px; height: 20px; stroke: var(--color-primary); fill: none; stroke-width: 2; }
.wm-dock-item.wm-chip-min .wm-dock-ico { opacity: .55; }
.wm-dock-item.wm-chip-max .wm-dock-ico { box-shadow: 0 0 0 2px var(--color-primary), 0 3px 10px rgba(0,0,0,.16); }

/* Running dot */
.wm-dock-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-text-muted, #71717a);
  flex-shrink: 0; margin-top: .15rem;
}
.wm-dock-item.wm-chip-min .wm-dock-dot { opacity: .35; }
.wm-dock-item.wm-chip-max .wm-dock-dot { background: var(--color-primary); box-shadow: 0 0 5px var(--color-primary); }
.wm-dock-item.wm-chip-foc .wm-dock-dot { background: var(--color-primary); box-shadow: 0 0 4px var(--color-primary); }
.wm-dock-item.wm-chip-foc .wm-dock-ico { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-subtle)); }

/* Label do dock — tooltip flutuante acima do ícone */
.wm-dock-lbl {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap; max-width: none;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: .45rem;
  padding: .22rem .6rem;
  font-size: .72rem; font-weight: 500; color: var(--color-text);
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none;
  transition: opacity .14s, transform .14s;
  z-index: 10; line-height: 1.4;
}
.wm-dock-item:hover .wm-dock-lbl {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Botão fechar — aparece no hover via CSS */
.wm-dock-item .wm-dock-close {
  position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ef4444; border: none; cursor: pointer;
  font-size: .6rem; line-height: 1; color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; opacity: 0; pointer-events: none;
  transition: opacity .12s, transform .12s;
}
.wm-dock-item:hover .wm-dock-close { opacity: 1; pointer-events: auto; }
.wm-dock-item .wm-dock-close:hover { background: #f87171; transform: scale(1.12); }

/* Separador entre DM e janelas */
.wm-dock-sep {
  width: 1px; height: 34px; flex-shrink: 0;
  background: var(--color-border);
  margin: 0 .2rem .6rem;
  align-self: flex-end;
}

/* Botão Desktop Mode no dock */
.wm-dock-dm-btn {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: none; border: none; cursor: pointer;
  padding: .25rem .35rem .2rem; border-radius: 10px; flex-shrink: 0;
  position: relative;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .12s;
}
.wm-dock-dm-btn:hover { transform: translateY(-10px) scale(1.25); background: color-mix(in srgb,var(--color-primary) 8%,transparent); }
.wm-dock-dm-ico {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-subtle));
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
}
.wm-dock-dm-btn--on .wm-dock-dm-ico { background: var(--color-primary); }
.wm-dock-dm-ico svg { width: 16px; height: 16px; stroke: var(--color-primary); }
.wm-dock-dm-btn--on .wm-dock-dm-ico svg { stroke: #fff; }
/* DM label como tooltip acima do ícone */
.wm-dock-dm-lbl {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap; max-width: none;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border); border-radius: .45rem;
  padding: .22rem .6rem;
  font-size: .72rem; font-weight: 500; color: var(--color-text);
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none;
  transition: opacity .14s, transform .14s; z-index: 10; line-height: 1.4;
}
.wm-dock-dm-btn:hover .wm-dock-dm-lbl { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Compatibilidade com código antigo (.wm-chip) — não usado visualmente mas mantido */
.wm-chip { display: none; }

/* Relógio no topbar quando Desktop Mode activo */
.cg-dm-clock {
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--color-text-faint); padding: .22rem .52rem;
  background: color-mix(in srgb, var(--color-bg-subtle) 80%, transparent);
  border: 1px solid var(--color-border); border-radius: .375rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  align-self: center; transition: color .15s;
}

.wm-desktop-btn { display: none; }

/* ── Module Launcher (wml) ── */
@keyframes wmlIn     { from { opacity:0; transform: scale(.98); } to { opacity:1; transform: none; } }
@keyframes wmlOut    { from { opacity:1; transform: none; } to { opacity:0; transform: scale(.98); } }
@keyframes wmlItemIn { from { opacity:0; transform: scale(.88) translateY(5px); } to { opacity:1; transform:none; } }
.wml-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4rem;
  animation: wmlIn 160ms ease forwards;
}
.wml-panel {
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  width: 720px; max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 6rem);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wml-head {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.wml-head-title { font-size: .95rem; font-weight: 700; }
.wml-head-hint { font-size: .73rem; color: var(--color-text-faint); flex: 1; }
.wml-close {
  width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; border-radius: var(--r-sm);
  font-size: 1rem; color: var(--color-text-faint);
  transition: background .15s;
}
.wml-close:hover { background: var(--color-border); color: var(--color-text); }
.wml-search-wrap {
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.wml-search {
  width: 100%; padding: .45rem .75rem;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  font-size: .85rem; color: var(--color-text);
  outline: none; transition: border-color .15s;
}
.wml-search:focus { border-color: var(--color-primary); }
.wml-body { flex: 1; overflow-y: auto; padding: .75rem 1rem 1rem; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.wml-body::-webkit-scrollbar { width: 4px; }
.wml-body::-webkit-scrollbar-track { background: transparent; }
.wml-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.wml-section[hidden] { display: none; }
.wml-sec-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-faint); margin-bottom: .5rem;
}
.wml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .375rem; }
.wml-item {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .75rem .5rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: none; cursor: pointer; text-align: center;
  transition: background .12s, border-color .12s;
  outline-offset: 2px;
  animation: wmlItemIn 200ms ease both;
}
.wml-item:hover, .wml-item:focus-visible {
  background: var(--color-bg-subtle, #f8fafc);
  border-color: var(--color-border);
}
.wml-item[hidden] { display: none; }
.wml-item-ico { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.wml-item-label { font-size: .72rem; font-weight: 500; color: var(--color-text); line-height: 1.3; }
.wml-no-results { display: none; padding: 1.5rem 1rem; text-align: center; font-size: .82rem; color: var(--color-text-faint); }
.wml-body.wml-empty .wml-no-results { display: block; }

/* ── Fase 9: Desktop Canvas ─────────────────────────────────────────────── */
:root { --cgd-taskbar-h: 5rem; }

.cg-desktop {
  position: fixed;
  top: var(--topbar-h, 3.5rem);
  left: 0; right: 0;
  bottom: var(--cgd-taskbar-h);
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(99,102,241,.14) 0%, transparent 52%),
    radial-gradient(ellipse at 78% 18%, rgba(34,197,94,.10) 0%, transparent 46%),
    radial-gradient(ellipse at 60% 82%, rgba(139,92,246,.08) 0%, transparent 40%),
    linear-gradient(160deg, #0d1117 0%, #111827 55%, #0c1a12 100%);
}

.cgd-icons-area {
  flex: 1;
  padding: 1.5rem 1.125rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .375rem;
  overflow-y: auto;
}

.cgd-sec-label {
  flex-basis: 100%;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: .875rem .3rem .2rem;
}
.cgd-sec-label:first-child { padding-top: .1rem; }

.cgd-ico {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: default;
  padding: .5rem .2rem .4rem;
  border-radius: 10px;
  user-select: none;
  border: 1px solid transparent;
  transition: background .13s, border-color .13s, transform .13s, box-shadow .13s;
}
.cgd-ico:hover { background: rgba(255,255,255,.08); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.cgd-ico:active { background: rgba(255,255,255,.15); transform: scale(.96); }
.cgd-ico.cgd-ico--selected {
  background: rgba(99,102,241,.25);
  border-color: rgba(99,102,241,.4);
}
@keyframes icoLaunch { 0% { transform:scale(1); } 30% { transform:scale(1.18); } 65% { transform:scale(.93); } 100% { transform:scale(1); } }
.cgd-ico--launching { animation: icoLaunch .34s cubic-bezier(.34,1.56,.64,1); }

.cgd-ico-img {
  width: 48px; height: 48px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.28);
  transition: transform .13s;
  flex-shrink: 0;
}
.cgd-ico:hover .cgd-ico-img { transform: translateY(-3px) scale(1.06); }
.cgd-ico-img svg { width: 22px; height: 22px; stroke: rgba(255,255,255,.95); fill: none; stroke-width: 2; }

.cgd-ico-lbl {
  font-size: .61rem;
  color: rgba(255,255,255,.9);
  text-align: center;
  line-height: 1.25;
  max-width: 68px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 5px rgba(0,0,0,.65);
  word-break: break-word;
}

/* clock widget */
/* ── Fase 12: Widgets ──────────────────────────────────────────────────────── */
.cgd-widget {
  position: fixed;
  z-index: 200;
  width: 220px;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--color-bg, #fff) 85%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
  overflow: hidden;
  user-select: none;
}
.cgd-wgt-hdr {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem;
  cursor: grab;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.cgd-wgt-hdr:active { cursor: grabbing; }
.cgd-wgt-title {
  flex: 1; font-size: .7rem; font-weight: 600;
  color: var(--color-text-faint); letter-spacing: .03em; text-transform: uppercase;
}
.cgd-wgt-btn {
  width: 1.2rem; height: 1.2rem; border: none; border-radius: 50%;
  background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint); flex-shrink: 0;
  transition: background .12s, color .12s;
}
.cgd-wgt-btn:hover { background: var(--color-border); color: var(--color-text); }
.cgd-wgt-body { padding: .6rem .7rem; }
.cgd-wgt--min .cgd-wgt-body { display: none; }
/* Clock */
.cgd-wgt-clock-time {
  font-size: 2rem; font-weight: 700; line-height: 1; text-align: center;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.cgd-wgt-clock-date {
  font-size: .68rem; font-weight: 500; text-align: center;
  color: var(--color-text-faint); margin-top: .3rem; letter-spacing: .01em;
}
/* Tasks */
.cgd-wgt-tasks-list { list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 180px; overflow-y: auto; }
.cgd-wgt-task { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; font-size: .78rem; }
.cgd-wgt-task input[type=checkbox] { flex-shrink: 0; accent-color: var(--color-primary); cursor: pointer; }
.cgd-wgt-task label { flex: 1; cursor: pointer; color: var(--color-text); }
.cgd-wgt-task--done label { text-decoration: line-through; color: var(--color-text-faint); }
.cgd-wgt-task-del { background: none; border: none; color: var(--color-text-faint); cursor: pointer; padding: 0 .1rem; font-size: .9rem; line-height: 1; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.cgd-wgt-task:hover .cgd-wgt-task-del { opacity: 1; }
.cgd-wgt-task-empty { font-size: .75rem; color: var(--color-text-faint); padding: .25rem 0; }
.cgd-wgt-task-new { display: flex; gap: .3rem; }
.cgd-wgt-task-new input { flex: 1; min-width: 0; font-size: .78rem; padding: .3rem .5rem; border: 1px solid var(--color-border); border-radius: .375rem; background: var(--color-bg); color: var(--color-text); outline: none; font-family: inherit; }
.cgd-wgt-task-new input:focus { border-color: var(--color-primary); }
.cgd-wgt-task-new button { background: var(--color-primary); color: #fff; border: none; border-radius: .375rem; width: 1.6rem; cursor: pointer; font-size: 1rem; font-weight: 700; flex-shrink: 0; transition: filter .12s; }
.cgd-wgt-task-new button:hover { filter: brightness(.88); }
/* Notes */
.cgd-wgt-notes { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; font-size: .78rem; border: 1px solid var(--color-border); border-radius: .375rem; padding: .35rem .5rem; background: var(--color-bg); color: var(--color-text); outline: none; font-family: inherit; line-height: 1.5; }
.cgd-wgt-notes:focus { border-color: var(--color-primary); }
/* Desktop Canvas — widgets always dark (canvas background is always dark) */

/* Escola label no canto superior-direito do desktop */
.cgd-escola-label {
  position: absolute;
  top: .875rem; right: 1.25rem;
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  letter-spacing: .04em;
}
/* ── Fase 13: Context Menus ────────────────────────────────────────────────── */
@keyframes ctxIn { from { opacity: 0; transform: scale(.93) translateY(-4px); } to { opacity: 1; transform: none; } }
.cg-ctx {
  position: fixed; z-index: 9990;
  min-width: 188px; max-width: 260px;
  padding: .25rem;
  background: color-mix(in srgb, var(--color-bg, #fff) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: .6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.1);
  outline: none;
  animation: ctxIn .13s cubic-bezier(.22,.68,0,1.2);
}
.cg-ctx-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .42rem .6rem;
  border: none; background: none; border-radius: .38rem;
  cursor: pointer; font-size: .8rem; text-align: left;
  color: var(--color-text); font-family: inherit;
  transition: background .1s, color .1s;
}
.cg-ctx-item:hover, .cg-ctx-item:focus {
  background: var(--color-primary); color: #fff; outline: none;
}
.cg-ctx-item--dim { color: var(--color-text-faint); pointer-events: none; }
.cg-ctx-ico { width: .95rem; height: .95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .7; }
.cg-ctx-item:hover .cg-ctx-ico, .cg-ctx-item:focus .cg-ctx-ico { opacity: 1; }
.cg-ctx-lbl { flex: 1; }
.cg-ctx-kbd { font-size: .7rem; opacity: .55; font-family: 'SF Mono',ui-monospace,monospace; letter-spacing: .01em; transition: opacity .1s; }
.cg-ctx-item:hover .cg-ctx-kbd, .cg-ctx-item:focus .cg-ctx-kbd { opacity: .8; }
.cg-ctx-sep { height: 1px; background: var(--color-border); margin: .25rem .35rem; opacity: .6; }
/* ── Fase 16: Quick Panel (Control Center) ───────────────────────────────── */
.cg-qp {
  position: fixed; bottom: 60px; right: 16px; z-index: 9799;
  width: 280px;
  background: color-mix(in srgb, var(--color-bg, #fff) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: .9rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid var(--color-border);
  padding: 1rem;
  transform-origin: bottom right;
  animation: cgQpIn .16s cubic-bezier(.22,.68,0,1.2);
}
@keyframes cgQpIn  { from { transform: scale(.9) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cgQpOut { from { transform: none; opacity: 1; } to { transform: scale(.9) translateY(6px); opacity: 0; } }
.cg-qp-clock { text-align: center; margin-bottom: .85rem; }
.cg-qp-time { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--color-text); line-height: 1; }
.cg-qp-date { font-size: .72rem; color: var(--color-text-faint); margin-top: .25rem; }
.cg-qp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .85rem; }
.cg-qp-tile {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .5rem; border-radius: .55rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle, #f4f6fa);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  color: var(--color-text-faint); font-size: .7rem; font-family: inherit;
}
.cg-qp-tile--on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cg-qp-tile:hover:not(.cg-qp-tile--on) { background: var(--color-border); }
.cg-qp-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cg-qp-tile-ico svg { display: block; }
.cg-qp-sep { height: 1px; background: var(--color-border); margin: .7rem 0; }
.cg-qp-wcount { font-size: .7rem; color: var(--color-text-faint); margin-bottom: .6rem; text-align: center; background: var(--color-bg-subtle, rgba(0,0,0,.04)); border-radius: .375rem; padding: .25rem .5rem; }
.cg-qp-btns { display: flex; flex-direction: column; gap: .25rem; }
.cg-qp-act {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .55rem; border-radius: .45rem; cursor: pointer;
  font-size: .8rem; color: var(--color-text); font-family: inherit;
  border: none; background: transparent; text-align: left; width: 100%;
  transition: background .1s;
}
.cg-qp-act:hover { background: var(--color-bg-subtle, rgba(0,0,0,.06)); }
/* dock QP button */
.wm-dock-sep-r { width: 1px; height: 1.1rem; background: var(--color-border); margin: 0 .15rem; align-self: center; flex-shrink: 0; opacity: .6; }
.wm-dock-qp-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: .5rem;
  border: none; cursor: pointer; background: transparent;
  color: var(--color-text-faint); flex-shrink: 0;
  transition: background .12s, color .12s;
}
.wm-dock-qp-btn:hover, .wm-dock-qp-btn--open { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
/* ── Fase 14: Spotlight ─────────────────────────────────────────────────── */
.cg-spl {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 13vh;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  animation: cgSplFadeIn .12s ease;
}
@keyframes cgSplFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cgSplFadeOut { from { opacity: 1; } to { opacity: 0; } }
.cg-spl-box {
  width: min(540px, 94vw);
  background: color-mix(in srgb, var(--color-bg, #fff) 92%, transparent);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: .9rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.1);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  animation: cgSplSlideIn .14s cubic-bezier(.22,.68,0,1.2);
}
@keyframes cgSplSlideIn { from { transform: translateY(-10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.cg-spl-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cg-spl-ico { color: var(--color-text-faint); flex-shrink: 0; }
.cg-spl-inp {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1.05rem; color: var(--color-text);
  font-family: inherit;
}
.cg-spl-inp::placeholder { color: var(--color-text-faint); }
.cg-spl-esc {
  flex-shrink: 0; font-size: .65rem; padding: .15rem .4rem;
  border-radius: .3rem; border: 1px solid var(--color-border);
  color: var(--color-text-faint); background: var(--color-bg-subtle, #f4f6fa);
  font-family: inherit; letter-spacing: .03em;
}
.cg-spl-list {
  list-style: none; margin: 0; padding: .3rem;
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.cg-spl-list::-webkit-scrollbar { width: 4px; }
.cg-spl-list::-webkit-scrollbar-track { background: transparent; }
.cg-spl-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.cg-spl-list:empty::after {
  content: 'Nenhum módulo encontrado.'; display: block;
  padding: .75rem 1rem; color: var(--color-text-faint); font-size: .875rem;
}
.cg-spl-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem; border-radius: .5rem; cursor: pointer;
  transition: background .1s;
}
.cg-spl-item--on { background: var(--color-primary); color: #fff; }
.cg-spl-item-ico { flex-shrink: 0; width: 1.5rem; text-align: center; font-size: .95rem; }
.cg-spl-item-lbl { flex: 1; font-size: .9rem; }
.cg-spl-item-ret { flex-shrink: 0; font-size: .75rem; opacity: 0; color: rgba(255,255,255,.7); transition: opacity .1s; }
.cg-spl-item--on .cg-spl-item-ret { opacity: 1; }
/* Spotlight footer hint bar */
.cg-spl-foot {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  padding: .42rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: .67rem; color: var(--color-text-faint);
  background: color-mix(in srgb, var(--color-bg-subtle, #f8fafc) 80%, transparent);
  user-select: none;
}
.cg-spl-foot kbd {
  display: inline-block; padding: .06rem .28rem;
  border-radius: .25rem; border: 1px solid var(--color-border);
  font-size: .6rem; background: var(--color-bg);
  font-family: inherit; margin-right: .18rem; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cg-spl { background: rgba(0,0,0,.55); }
}
:root[data-theme="dark"] .cg-spl { background: rgba(0,0,0,.55); }
/* ── Keyboard shortcuts overlay ──────────────────────────────────────── */
.cg-kbd-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  animation: cgSplFadeIn .12s ease;
}
.cg-kbd-box {
  width: min(480px, 94vw);
  background: color-mix(in srgb, var(--color-bg, #fff) 92%, transparent);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: .9rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.1);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  animation: cgSplSlideIn .14s cubic-bezier(.22,.68,0,1.2);
  overflow: hidden;
}
.cg-kbd-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem .7rem;
  border-bottom: 1px solid var(--color-border);
}
.cg-kbd-title { font-size: .9rem; font-weight: 700; }
.cg-kbd-close {
  width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-border); border: none; border-radius: 50%;
  cursor: pointer; font-size: .95rem; color: var(--color-text-faint);
  transition: background .12s, color .12s;
}
.cg-kbd-close:hover { background: var(--color-text-faint); color: #fff; }
.cg-kbd-body { padding: .6rem .75rem .75rem; }
.cg-kbd-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .28rem .25rem;
}
.cg-kbd-key {
  flex-shrink: 0; min-width: 156px;
  font-size: .7rem; font-weight: 600;
  padding: .2rem .5rem; border-radius: .35rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle, #f8fafc);
  font-family: 'SF Mono', ui-monospace, monospace;
  white-space: nowrap; text-align: center; color: var(--color-text);
}
.cg-kbd-desc { font-size: .82rem; color: var(--color-text); }
.cg-kbd-sep { height: 1px; background: var(--color-border); margin: .45rem .25rem; opacity: .55; }
/* ── fim Fase 9 ────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 17: Desktop OS Mode — Dual Mode (Classic ↔ Desktop OS)
   ══════════════════════════════════════════════════════════════════════════ */

/* Em Modo Desktop, a interface clássica é ocultada pelo canvas fixo */

/* Desktop canvas começa por baixo da menubar do OS */

/* ── OS Menu Bar (macOS style) ──────────────────────────────────────────── */
.cg-menubar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: 28px;
  background: rgba(18,18,20,.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  z-index: 9600;
  align-items: center;
  padding: 0 .35rem;
  color: rgba(255,255,255,.88);
  font-size: .78rem; font-family: inherit;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.cg-mb-logo {
  font-weight: 800; letter-spacing: -.04em; font-size: .84rem;
  padding: 0 .6rem; height: 100%;
  display: flex; align-items: center; color: #fff;
  flex-shrink: 0;
}
.cg-mb-menu { position: relative; height: 100%; flex-shrink: 0; }
.cg-mb-btn {
  height: 100%; padding: 0 .6rem;
  border: none; background: transparent;
  color: rgba(255,255,255,.85); font-size: .78rem;
  cursor: pointer; font-family: inherit; border-radius: .2rem;
  display: flex; align-items: center; gap: .2rem;
  transition: background .08s;
}
.cg-mb-btn:hover, .cg-mb-menu--open .cg-mb-btn {
  background: rgba(255,255,255,.14); color: #fff;
}
.cg-mb-drop {
  display: none;
  position: absolute; top: calc(100% + 2px); left: 0;
  min-width: 196px; max-height: 56vh;
  overflow-y: auto; overflow-x: hidden;
  background: rgba(26,26,30,.97);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  padding: .3rem;
  z-index: 9700;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
  animation: mbDropIn 90ms ease;
}
.cg-mb-menu--open .cg-mb-drop { display: block; }
@keyframes mbDropIn { from { opacity:0; transform:translateY(-5px) scale(.97); } to { opacity:1; transform:none; } }
.cg-mb-drop-item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; padding: .32rem .6rem;
  border: none; background: transparent;
  color: rgba(255,255,255,.82); font-size: .775rem; font-family: inherit;
  cursor: pointer; border-radius: .3rem; text-align: left;
  transition: background .07s, color .07s;
}
.cg-mb-drop-item:hover { background: var(--color-primary, #6366f1); color: #fff; }
.cg-mb-drop-item-ico { flex-shrink: 0; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; opacity: .7; }
.cg-mb-drop-sep { height: 1px; background: rgba(255,255,255,.09); margin: .22rem .3rem; }
.cg-mb-spacer { flex: 1; }
.cg-mb-right {
  display: flex; align-items: center; gap: .15rem;
  padding-right: .35rem; height: 100%;
}
.cg-mb-clock {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.82); padding: 0 .4rem;
}
.cg-mb-cls-btn {
  padding: .18rem .5rem; border-radius: .28rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.78);
  font-size: .68rem; cursor: pointer; font-family: inherit;
  transition: background .1s, color .1s; white-space: nowrap;
}
.cg-mb-cls-btn:hover { background: rgba(255,255,255,.17); color: #fff; }

/* ── OS Single Window Frame (browser-tab mode) ──────────────────────────── */
.cg-oswin {
  display: none;
  position: fixed;
  top: 28px; /* below OS menu bar */
  left: 0; right: 0;
  bottom: var(--cgd-taskbar-h, 72px);
  background: var(--color-bg, #fff);
  z-index: 8300;
  flex-direction: column;
  overflow: hidden;
}
.cg-oswin.cg-oswin--open { display: flex; animation: osWinIn 200ms cubic-bezier(.22,.8,.36,1) forwards; }
@keyframes osWinIn { from { opacity:0; transform:scale(.99) translateY(6px); } to { opacity:1; transform:none; } }

/* Tab bar */
.cg-oswin-tabbar {
  display: flex; align-items: center;
  height: 36px; min-height: 36px; flex-shrink: 0;
  background: color-mix(in srgb, var(--color-bg-subtle, #f8fafc) 85%, var(--color-bg));
  border-bottom: 1px solid var(--color-border);
  padding: 0 .5rem; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.cg-oswin-tabbar::-webkit-scrollbar { display: none; }
.cg-oswin-tab {
  display: flex; align-items: center; gap: .32rem;
  min-width: 90px; max-width: 185px;
  height: 28px; padding: 0 .4rem 0 .55rem;
  border-radius: .35rem; cursor: pointer; flex-shrink: 0;
  color: var(--color-text-faint); font-size: .775rem;
  transition: background .1s, color .1s;
}
.cg-oswin-tab:hover { background: var(--color-bg-subtle, #f4f6fa); color: var(--color-text); }
.cg-oswin-tab--active {
  background: var(--color-bg, #fff); color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.09), 0 0 0 1px var(--color-border);
}
.cg-oswin-tab-ico { flex-shrink:0; width:13px; height:13px; display:flex; align-items:center; justify-content:center; opacity:.75; }
.cg-oswin-tab--active .cg-oswin-tab-ico { opacity:1; }
.cg-oswin-tab-lbl { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.cg-oswin-tab-close {
  flex-shrink:0; width:15px; height:15px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:none; background:transparent;
  color:var(--color-text-faint); cursor:pointer; opacity:0;
  font-size:.68rem; line-height:1; padding:0;
  transition:background .1s, opacity .1s, color .1s;
}
.cg-oswin-tab:hover .cg-oswin-tab-close,
.cg-oswin-tab--active .cg-oswin-tab-close { opacity:1; }
.cg-oswin-tab-close:hover { background:rgba(239,68,68,.15); color:#ef4444; }
.cg-oswin-tab-new {
  flex-shrink:0; width:26px; height:26px; border-radius:.35rem;
  border:none; background:transparent; cursor:pointer;
  color:var(--color-text-faint); display:flex; align-items:center; justify-content:center;
  margin-left:.2rem; transition:background .1s, color .1s; font-size:1.1rem; padding:0;
}
.cg-oswin-tab-new:hover { background:var(--color-bg-subtle); color:var(--color-text); }
.cg-oswin-body { flex:1; position:relative; overflow:hidden; }
.cg-oswin-panel { position:absolute; inset:0; display:none; overflow-y:auto; overflow-x:hidden; background:var(--color-bg); }
.cg-oswin-panel--active { display:block; animation: osPanelIn 160ms ease; }
@keyframes osPanelIn { from { opacity:0; } to { opacity:1; } }
.cg-oswin-loading { display:flex; align-items:center; justify-content:center; gap:.5rem; height:100%; color:var(--color-text-faint); font-size:.875rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   FASE 18: Widget Panel (macOS style, right column) + Sidebar Flyouts
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Menubar widget toggle button ───────────────────────────────────────── */
.cg-mb-wgt-btn {
  height: 100%; padding: 0 .6rem;
  border: none; background: transparent;
  color: rgba(255,255,255,.7); font-size: .74rem; font-family: inherit;
  cursor: pointer; border-radius: .22rem;
  display: flex; align-items: center; gap: .28rem;
  transition: background .08s, color .08s;
  letter-spacing: .01em;
}
.cg-mb-wgt-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.cg-mb-wgt-btn--active { background: rgba(255,255,255,.1); color: #fff; }

/* ── Widget Panel ───────────────────────────────────────────────────────── */

.cg-wgt-panel {
  display: none;
  position: fixed;
  top: 28px; right: 0;
  bottom: var(--cgd-taskbar-h, 5rem);
  width: 258px;
  background: rgba(16,16,20,.93);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border-left: 1px solid rgba(255,255,255,.07);
  z-index: 8200;
  flex-direction: column;
  overflow: hidden;
}

/* OS window shrinks when panel is open */

.cg-wgt-panel-hdr {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .72rem .48rem;
  border-bottom: 1px solid rgba(255,255,255,.055);
  flex-shrink: 0;
}
.cg-wgt-panel-title { flex: 1; font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.88); letter-spacing: .025em; }
.cg-wgt-panel-add,
.cg-wgt-panel-close {
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.65);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.cg-wgt-panel-add { font-size: 1.1rem; font-weight: 300; }
.cg-wgt-panel-close { font-size: .8rem; }
.cg-wgt-panel-add:hover,
.cg-wgt-panel-close:hover { background: rgba(255,255,255,.16); color: #fff; }

.cg-wgt-scroll {
  flex: 1; overflow-y: auto; padding: .6rem .6rem .85rem;
  display: flex; flex-direction: column; gap: .5rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.09) transparent;
}
.cg-wgt-empty {
  text-align: center; color: rgba(255,255,255,.28); font-size: .78rem;
  padding: 1.5rem .75rem; line-height: 1.6;
}

/* ── Widget Cards ───────────────────────────────────────────────────────── */
.cg-wgt-card {
  background: rgba(255,255,255,.042);
  border: 1px solid rgba(255,255,255,.068);
  border-radius: .62rem;
  overflow: hidden; flex-shrink: 0;
}
.cg-wgt-card-hdr {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .62rem .32rem;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.cg-wgt-card-title {
  flex: 1; font-size: .62rem; font-weight: 800;
  color: rgba(255,255,255,.42); letter-spacing: .07em; text-transform: uppercase;
}
.cg-wgt-card-remove {
  width: 17px; height: 17px; border: none; border-radius: 50%;
  background: transparent; color: rgba(255,255,255,.25);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; padding: 0; line-height: 1; flex-shrink: 0;
  transition: background .1s, color .1s;
}
.cg-wgt-card-remove:hover { background: rgba(239,68,68,.35); color: #fff; }
.cg-wgt-card-body {
  padding: .55rem .66rem .62rem;
  color: rgba(255,255,255,.82); font-size: .8rem;
}
.cg-wgt-loading { color: rgba(255,255,255,.28); font-size: .74rem; }
.cg-wgt-empty-msg { color: rgba(255,255,255,.28); font-size: .74rem; text-align: center; padding: .3rem 0; }

/* Clock widget */
.cg-wgt-clock-time {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: #fff; line-height: 1;
}
.cg-wgt-clock-date { font-size: .7rem; color: rgba(255,255,255,.45); margin-top: .22rem; }

/* Lists (aulas / eventos) */
.cg-wgt-aulas-sum { font-size: .68rem; font-weight: 700; color: var(--color-primary,#6366f1); margin-bottom: .38rem; }
.cg-wgt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .28rem; }
.cg-wgt-item {
  display: flex; flex-direction: column; gap: .04rem;
  padding: .28rem .38rem; border-radius: .35rem;
  background: rgba(255,255,255,.028);
}
.cg-wgt-item-meta { font-size: .64rem; color: rgba(255,255,255,.38); font-variant-numeric: tabular-nums; }
.cg-wgt-item-name { font-size: .76rem; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Stats widget */
.cg-wgt-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .28rem; margin-bottom: .42rem; }
.cg-wgt-stat {
  text-align: center; padding: .42rem .2rem;
  background: rgba(255,255,255,.036); border-radius: .35rem;
}
.cg-wgt-stat-v { display: block; font-size: .98rem; font-weight: 800; color: #fff; line-height: 1.2; }
.cg-wgt-stat-l { display: block; font-size: .58rem; color: rgba(255,255,255,.38); margin-top: .14rem; }

/* Notifications widget */
.cg-wgt-notif { display: flex; align-items: baseline; gap: .32rem; margin-bottom: .42rem; }
.cg-wgt-notif-num { font-size: 1.7rem; font-weight: 800; color: rgba(255,255,255,.28); line-height: 1; }
.cg-wgt-notif--has .cg-wgt-notif-num { color: var(--color-primary,#6366f1); }
.cg-wgt-notif-lbl { font-size: .72rem; color: rgba(255,255,255,.45); }

/* Goto button */
.cg-wgt-goto {
  display: block; width: 100%; margin-top: .42rem;
  padding: .28rem .45rem; border: none; border-radius: .35rem;
  background: rgba(255,255,255,.055); color: rgba(255,255,255,.55);
  font-size: .7rem; cursor: pointer; text-align: right;
  transition: background .1s, color .1s;
}
.cg-wgt-goto:hover { background: rgba(255,255,255,.11); color: #fff; }

/* ── Widget Catalog Popover ─────────────────────────────────────────────── */
.cg-wgt-catalog {
  position: fixed; right: 262px; top: 56px;
  width: 196px;
  background: rgba(22,22,27,.98);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 8500; overflow: hidden;
  animation: mbDropIn 90ms ease;
}
.cg-wgt-catalog-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .48rem .65rem;
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cg-wgt-catalog-hdr button {
  background: none; border: none; color: rgba(255,255,255,.38); cursor: pointer; font-size: .85rem; padding: 0;
  transition: color .1s;
}
.cg-wgt-catalog-hdr button:hover { color: #fff; }
.cg-wgt-catalog-item {
  display: flex; align-items: center; gap: .52rem;
  width: 100%; padding: .42rem .65rem;
  border: none; background: transparent;
  color: rgba(255,255,255,.8); cursor: pointer; text-align: left;
  transition: background .07s; font-family: inherit;
}
.cg-wgt-catalog-item:hover { background: var(--color-primary,#6366f1); color: #fff; }
.cg-wgt-catalog-ico { font-size: .9rem; }
.cg-wgt-catalog-lbl { font-size: .78rem; }
.cg-wgt-catalog-empty { padding: .65rem; text-align: center; color: rgba(255,255,255,.3); font-size: .75rem; }

/* ── Sidebar: category flyout — items always hidden, access via section hover ── */
/* Modules are never shown directly; hover any section header to see its flyout  */
.nav-sec-grp .nav-item { display: none !important; }
.sidebar-divider { display: none !important; }
.sidebar-search-wrap { display: none !important; }

/* Section groups & section icons */
.nav-sec-grp { position: relative; }
.sidebar-collapsed .nav-sec-grp { margin: 0; }

/* Expanded sidebar: espaçamento entre grupos de secção */
.app-root:not(.sidebar-collapsed) .nav-sec-grp {
  margin-bottom: 6px;
}
.app-root:not(.sidebar-collapsed) .nav-sec-grp .sidebar-section {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Expanded sidebar: section headers are flyout triggers */
.nav-sec-grp .sidebar-section {
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-sec-grp:hover > .sidebar-section {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Collapsed sidebar: compact icon pills */
.sidebar-collapsed .sidebar-section {
  height: 2rem; border-radius: .5rem;
  padding: 0 !important; justify-content: center !important; gap: 0 !important;
  margin: 0 .25rem; cursor: pointer;
  background: color-mix(in srgb, var(--sec-accent,var(--color-primary)) 10%, transparent);
}
.sidebar-collapsed .sidebar-section:hover {
  background: color-mix(in srgb, var(--sec-accent,var(--color-primary)) 22%, transparent);
}
.sidebar-collapsed .sec-label { display: none !important; }
.sec-chevron { display: none !important; }

/* Suprimir ::before (barra colorida) no modo colapsado — o .sec-ico substitui */
.sidebar-collapsed .sidebar-section::before {
  content: none !important;
}

/* .sec-ico — visível em ambos os modos (expandido + colapsado) */
.sec-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem; height: 1rem;
  color: var(--sec-accent, var(--color-primary));
}
.sec-ico svg {
  width: 1rem; height: 1rem;
  stroke: currentColor;
}
.sidebar-collapsed .sec-ico {
  width: 1.1rem; height: 1.1rem;
}
.sidebar-collapsed .sec-ico svg {
  width: 1.1rem; height: 1.1rem;
}

/* Flyout panel */
.cg-sb-fly {
  display: none;
  position: absolute; left: calc(100% + 6px); top: 0;
  width: 210px; min-width: 180px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  padding: .3rem;
  z-index: 1500;
  animation: mbDropIn 80ms ease;
}
/* .cg-sb-fly suprimido — flyout gerido exclusivamente pelo #sidebarFlyout (JS) */
/* .nav-sec-grp:hover .cg-sb-fly { display: block; } */
.cg-sb-fly-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-faint); padding: .3rem .55rem .2rem;
}
.cg-sb-fly-btn {
  display: flex; align-items: center; gap: .48rem;
  width: 100%; padding: .36rem .55rem;
  border: none; background: transparent;
  color: var(--color-text); font-size: .8rem;
  cursor: pointer; text-align: left; border-radius: .38rem;
  font-family: inherit;
  transition: background .08s, color .08s;
}
.cg-sb-fly-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  color: var(--color-primary);
}
.cg-sb-fly-ico {
  flex-shrink: 0; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
}
/* ── fim Fase 18 ───────────────────────────────────────────────────────── */

/* ── Melhorias de UI (modo clássico) ─────────────────────────────────────────── */

._wm-dock-inner:has(.wm-dock-item:hover) .wm-dock-item:hover + .wm-dock-item {
  transform: translateY(-6px) scale(1.12);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.cg-oswin-tabbar::before {
  content: '';
  display: block; flex-shrink: 0;
  width: 46px; height: 10px;
  border-radius: 5px;
  align-self: center;
  margin: 0 .6rem 0 .5rem;
  background: #ff5f57;
  box-shadow: 18px 0 0 0 #febc2e, 36px 0 0 0 #28c840;
  opacity: .85;
}

.cg-wgt-card { border-left: 2px solid rgba(255,255,255,.06); }

.cg-wgt-card[data-wgt="clock"]        { border-left-color: rgba(139,92,246,.55); }

.cg-wgt-card[data-wgt="aulas"]        { border-left-color: rgba(99,102,241,.55); }

.cg-wgt-card[data-wgt="notificacoes"] { border-left-color: rgba(245,158,11,.55); }

.cg-wgt-card[data-wgt="tasks"]        { border-left-color: rgba(34,197,94,.55);  }

.cg-wgt-card[data-wgt="stats"]        { border-left-color: rgba(6,182,212,.55);  }

.cg-wgt-card[data-wgt="eventos"]      { border-left-color: rgba(236,72,153,.55); }

.cg-wgt-card[data-wgt="notes"]        { border-left-color: rgba(251,191,36,.55); }

.cg-wgt-card-ico {
  font-size: .82rem; line-height: 1; flex-shrink: 0;
  opacity: .65;
}

.cg-wgt-refresh {
  width: 18px; height: 18px; border: none;
  background: transparent; cursor: pointer; border-radius: 4px;
  color: rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1; padding: 0; flex-shrink: 0;
  transition: color .12s, background .12s;
}

.cg-wgt-refresh:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); }

.cgd-ico-lbl {
  text-shadow: 0 1px 5px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55);
}

.cgd-ico:hover .cgd-ico-img {
  box-shadow: 0 8px 24px rgba(0,0,0,.52), 0 2px 6px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.12);
}

.sidebar-nav { overflow-x: visible; }

.nav-sec-grp .cg-sb-fly { overflow: visible; }

.cg-oswin-tab { position: relative; overflow: hidden; }

.cg-oswin-tab--active::after {
  content: '';
  position: absolute; top: 0; left: 8px; right: 8px; height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-primary, #6366f1);
  opacity: .85;
}

.cgd-ico.cgd-ico--selected {
  background: rgba(99,102,241,.18) !important;
  border-color: rgba(99,102,241,.5) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.28), 0 4px 18px rgba(99,102,241,.18);
}

.cg-mb-clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.cg-wgt-scroll::-webkit-scrollbar { width: 3px; }

.cg-wgt-scroll::-webkit-scrollbar-track { background: transparent; }

.cg-wgt-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 2px; }

.cg-wgt-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

.cgd-ico:hover { background: rgba(255,255,255,.09); }

.cg-oswin { transition: right .22s cubic-bezier(.22,.8,.36,1); }

.cg-spl-item:hover:not(.cg-spl-item--on) {
  background: var(--color-bg-subtle, #f4f6fa);
  color: var(--color-text, #111);
}

.cg-mb-drop-item:focus-visible {
  background: var(--color-primary, #6366f1);
  color: #fff; outline: none;
}

.cg-wgt-card {
  border-left-width: 1px;
  border-left-color: rgba(255,255,255,.13);
}

.cgd-ico--selected {
  background: rgba(99,102,241,.22);
  border-color: rgba(99,102,241,.5);
  box-shadow: 0 0 0 2px rgba(99,102,241,.3);
}

.wm-dock-sep {
  width: 1px; height: 32px; align-self: center;
  background: rgba(255,255,255,.12);
  margin: 0 .2rem;
  border-radius: 1px;
}

.cg-oswin-tab-close {
  opacity: 0; transition: background .1s, opacity .12s, color .1s;
  pointer-events: none;
}

.cg-oswin-tab--active .cg-oswin-tab-close {
  opacity: 1; pointer-events: auto;
}

.cg-wgt-refresh {
  font-size: .9rem; line-height: 1;
  transition: transform .3s ease, color .12s;
}

.cg-wgt-refresh:hover { transform: rotate(180deg); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  
  .cg-oswin { transition: none; }
  
}

.cg-oswin-tabbar::before { opacity: 1; cursor: default; }

.cg-wgt-panel-hdr {
  background: linear-gradient(to bottom, rgba(255,255,255,.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.cg-wgt-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 2rem 1rem;
  color: rgba(255,255,255,.3); font-size: .8rem; text-align: center;
  line-height: 1.5;
}

.cg-wgt-empty::before {
  content: '⊞'; font-size: 2rem; opacity: .25;
  display: block;
}

.wm-dock-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 3.5px;
  background: #ef4444; color: #fff;
  border-radius: 8px; border: 1.5px solid rgba(10,12,20,.9);
  font-size: .6rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; pointer-events: none; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  animation: cgBadgePop .24s cubic-bezier(.34,1.56,.64,1);
}

@keyframes cgBadgePop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

.cg-ctx-item[data-sub]::after {
  content: '›'; margin-left: auto; padding-left: .4rem;
  font-size: .92rem; opacity: .4; flex-shrink: 0;
}

.cg-ctx-item[data-sub]:focus::after { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  
  
  
  
  .wm-dock-badge { animation: none; }
}

.wm-dock-item { position: relative; }

.wm-dock-item[title]::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.96);
  background: rgba(14,16,22,.9); backdrop-filter: blur(16px) saturate(1.4);
  color: rgba(255,255,255,.88); font-size: .67rem; font-weight: 500; letter-spacing: .01em;
  padding: .2rem .45rem; border-radius: .32rem; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.08); pointer-events: none;
  opacity: 0; transition: opacity .12s .2s, transform .12s .2s;
}

.wm-dock-item:hover[title]::after {
  opacity: 1; transform: translateX(-50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  
  .wm-dock-item[title]::after { transition: opacity .12s; transform: translateX(-50%); }
  .wm-dock-item:hover[title]::after { transform: translateX(-50%); }
}

.cg-wgt-scroll::-webkit-scrollbar { width: 4px; }

.cg-wgt-scroll::-webkit-scrollbar-track { background: transparent; }

.cg-wgt-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1); border-radius: 2px;
}

.cg-wgt-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

.wm-dock-item[title]::before {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(14,16,22,.92);
  pointer-events: none; opacity: 0; transition: opacity .12s .2s;
}

.wm-dock-item:hover[title]::before { opacity: 1; }

.cg-mb-menu--open .cg-mb-btn::after {
  content: '';
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(22,22,30,.98);
  z-index: 9701; pointer-events: none;
}

/* ── Melhorias Clássico II: NC Panel ────────────────────────────────────── */

/* Spring slide-in para o painel NC (substitui easing linear) */
.nc-panel { animation-timing-function: cubic-bezier(.22,.68,0,1.2); }

/* Entrada escalonada dos itens NC */
@keyframes ncItemSlide {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.nc-item {
  animation: ncItemSlide 220ms cubic-bezier(.22,.68,0,1.2) both;
}
.nc-item:nth-child(1)  { animation-delay:  20ms; }
.nc-item:nth-child(2)  { animation-delay:  45ms; }
.nc-item:nth-child(3)  { animation-delay:  70ms; }
.nc-item:nth-child(4)  { animation-delay:  95ms; }
.nc-item:nth-child(5)  { animation-delay: 120ms; }
.nc-item:nth-child(n+6){ animation-delay: 145ms; }

/* Press feedback em notificações */
.nc-item:active { transform: scaleX(.984); transition: transform .08s ease; }

/* Barra accent esquerda em itens não-lidos */
.nc-item-unread {
  border-left: 3px solid var(--color-primary);
  padding-left: calc(1.25rem - 3px);
}

/* Transição suave no tab ativo */
.nc-tab { transition: color .18s ease, border-color .18s ease; }

/* Ponto de presença no ícone de notificação NC não-lido */
.nc-item-ico { position: relative; }
.nc-item-unread .nc-item-ico::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary);
  border: 1.5px solid var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  .nc-item { animation: none; }
  .nc-item:active { transform: none; }
}

/* ── Melhorias Clássico II: Floating Windows ────────────────────────────── */

/* Press feedback nos botões de semáforo */
.fw-win-btn:active { transform: scale(.8); transition: transform .06s ease; }

/* Resize handle hover: glow subtil */
.fw-rzh:hover::before {
  content: '';
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

/* Titlebar: tint subtil ao focar a janela */
.fw-win--focused .fw-titlebar {
  background: color-mix(in srgb, var(--color-bg-subtle, #f0f4fa) 82%, var(--color-primary) 4%);
}

/* Janela não-focada: opacidade suave no conteúdo (não no titlebar) */
.fw-win:not(.fw-win--focused) .fw-body { opacity: .92; transition: opacity .2s ease; }
.fw-win--focused .fw-body { opacity: 1; transition: opacity .2s ease; }

/* ── Melhorias Clássico II: Quick Panel ─────────────────────────────────── */

/* Spring press nos tiles do QP */
.cg-qp-tile { transition: background .12s, border-color .12s, color .12s, transform .1s cubic-bezier(.22,.68,0,1.2), box-shadow .15s; }
.cg-qp-tile:hover:not(.cg-qp-tile--on) { transform: translateY(-1px); }
.cg-qp-tile:active { transform: scale(.93); }

/* Glow ring no tile activo */
.cg-qp-tile--on {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent),
              0 4px 12px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Press feedback nos botões de acção do QP */
.cg-qp-act:active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }

/* Spring ao fechar/abrir QP */
.cg-qp { transform-origin: bottom right; }

@media (prefers-reduced-motion: reduce) {
  .cg-qp-tile:hover:not(.cg-qp-tile--on) { transform: none; }
  .cg-qp-tile:active { transform: none; }
}

/* ── Melhorias Clássico II: Spotlight ───────────────────────────────────── */

/* Entrada escalonada dos resultados */
@keyframes splItemIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.cg-spl-item {
  animation: splItemIn 160ms cubic-bezier(.22,.68,0,1.2) both;
}
.cg-spl-item:nth-child(1)  { animation-delay:  0ms; }
.cg-spl-item:nth-child(2)  { animation-delay: 28ms; }
.cg-spl-item:nth-child(3)  { animation-delay: 56ms; }
.cg-spl-item:nth-child(4)  { animation-delay: 84ms; }
.cg-spl-item:nth-child(n+5){ animation-delay:100ms; }

/* Hover subtil no item não-activo */
.cg-spl-item:not(.cg-spl-item--on):hover {
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  color: var(--color-primary);
}

/* Ícone de tipo com fundo pill no item activo */
.cg-spl-item--on .cg-spl-item-ico {
  background: rgba(255,255,255,.2);
  border-radius: .35rem;
  padding: .1rem .2rem;
}

/* Bordas de separação categoria no spotlight */
.cg-spl-cat-lbl {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-text-faint);
  padding: .5rem .75rem .2rem;
}

/* Input focus: ring subtil */
.cg-spl-box:focus-within { box-shadow: 0 24px 80px rgba(0,0,0,.38), 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .cg-spl-item { animation: none; }
}

/* ── Melhorias Clássico II: Context Menu ────────────────────────────────── */

/* Acção destrutiva */
.cg-ctx-item--danger { color: #ef4444; }
.cg-ctx-item--danger:hover, .cg-ctx-item--danger:focus {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #ef4444;
}
.cg-ctx-item--danger .cg-ctx-ico { opacity: .85; }

/* Press feedback */
.cg-ctx-item:active { transform: scaleY(.96); transition: transform .06s ease; }

/* Separador com mais espaçamento */
.cg-ctx-sep { margin: .3rem .3rem; }

/* ── Melhorias Clássico II: Nav Sidebar ─────────────────────────────────── */

/* Glow subtil no ícone do item activo */
.nav-item.active svg {
  filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 60%, transparent));
}

/* Spring na barra de acento */
.nav-item::before {
  transition: transform 220ms cubic-bezier(.22,.68,0,1.2), background .15s;
}

/* Hover: barra de acento parcial */
.nav-item:not(.active):hover::before {
  transform: translateY(-50%) scaleY(.4);
  opacity: .45;
}

/* ── Melhorias Clássico II: Selecção de Texto ───────────────────────────── */

::selection {
  background: color-mix(in srgb, var(--color-primary) 28%, transparent);
  color: inherit;
}

/* ── Melhorias Clássico II: Focus-Visible Global ────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Elementos que já têm focus-visible próprio não precisam do global */
.cg-qp-tile:focus-visible,
.nc-mark-all-btn:focus-visible,
.cg-mb-drop-item:focus-visible { outline-offset: 1px; }

/* ── Melhorias Clássico II: Scrollbar Accent ────────────────────────────── */

/* NC body scrollbar com thumb accent muito subtil */
.nc-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}

/* FW body scrollbar thumb hover */
.fw-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* Spotlight list scrollbar thumb hover */
.cg-spl-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* ── Eventos: Cronograma ────────────────────────────────────────────────── */
.ev-cronograma { padding: .375rem 0 .75rem; }
.ev-cron-mes { margin-bottom: 1rem; }
.ev-cron-mes-hd {
  display: flex; align-items: center; gap: .5rem;
  padding: .3125rem .75rem; margin-bottom: .25rem;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ev-cron-mes--past .ev-cron-mes-hd {
  border-left-color: var(--color-border);
  background: color-mix(in srgb, var(--color-border) 20%, transparent);
}
.ev-cron-mes-nome { font-size: .8125rem; font-weight: 700; color: var(--color-text); }
.ev-cron-mes--past .ev-cron-mes-nome { color: var(--color-text-faint); }
.ev-cron-mes-cnt { font-size: .7rem; color: var(--color-text-faint); margin-left: auto; }
.ev-cron-hoje-line {
  display: flex; align-items: center; gap: .5rem;
  padding: .125rem .75rem; margin: .125rem 0;
  font-size: .68rem; font-weight: 700;
  color: var(--color-warning, #d97706);
}
.ev-cron-hoje-line::before, .ev-cron-hoje-line::after {
  content: ''; flex: 1; height: 1px;
  background: var(--color-warning, #f59e0b); opacity: .5;
}
.ev-cron-chip {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .375rem .75rem;
  border: none; border-radius: var(--r-md); background: transparent;
  color: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast); min-width: 0;
}
.ev-cron-chip:hover { background: var(--color-bg-alt); }
.ev-cron-chip--past { opacity: .6; }
.ev-cron-chip--canceled { opacity: .45; }
.ev-cron-chip--canceled .ev-cron-nome { text-decoration: line-through; }
.ev-cron-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ec, var(--color-primary)); flex-shrink: 0;
}
.ev-cron-day {
  display: flex; flex-direction: column; align-items: center;
  width: 2.5rem; flex-shrink: 0; text-align: center;
}
.ev-cron-day b { font-size: .875rem; font-weight: 700; line-height: 1.1; color: var(--color-text); }
.ev-cron-day small { font-size: .6rem; font-weight: 500; text-transform: uppercase; color: var(--color-text-faint); line-height: 1.2; }
.ev-cron-info { display: flex; flex-direction: column; gap: .0625rem; flex: 1; min-width: 0; }
.ev-cron-nome { font-size: .8125rem; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-cron-sub { font-size: .7rem; color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-cron-badges { display: flex; gap: .25rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ev-cron-tipo-badge { font-size: .65rem; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.ev-vista-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; }
.ev-vista-toggle .btn { border-radius: 0; border: none; font-size: .78rem; padding: 0 .625rem; height: 32px; line-height: 32px; }
.ev-vista-active { background: var(--color-primary) !important; color: #fff !important; }
@media (max-width: 600px) {
  .ev-cron-badges { display: none; }
  .ev-cron-day { width: 2rem; }
  .ev-cron-day b { font-size: .75rem; }
}

/* ── Eventos: Linha do Tempo (swimlane) ─────────────────────────────────── */
.ev-tl-outer { overflow-x: auto; padding-bottom: .5rem; }
.ev-tl-outer::-webkit-scrollbar { height: 4px; }
.ev-tl-outer::-webkit-scrollbar-track { background: transparent; }
.ev-tl-outer::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.ev-tl-outer::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }
.ev-tl-inner { position: relative; min-width: 42rem; border-top: 1px solid var(--color-border); }
.ev-tl-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ev-tl-msep { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
/* Alternating month columns */
.ev-tl-alt-col {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--color-border) 6%, transparent);
}
/* Current month column highlight */
.ev-tl-cur-col {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}
/* Today line */
.ev-tl-now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--color-warning, #f59e0b);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent);
}
.ev-tl-now span {
  position: absolute; top: 2px; left: 5px;
  font-size: .62rem; font-weight: 700; letter-spacing: .01em;
  color: var(--color-warning, #d97706);
  background: var(--color-bg); padding: 1px 4px; border-radius: 3px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}
.ev-tl-row { display: flex; border-bottom: 1px solid var(--color-border); }
.ev-tl-hdr { height: 2.5rem; background: color-mix(in srgb, var(--color-border) 14%, var(--color-bg)); }
.ev-tl-lcol {
  position: sticky; left: 0; z-index: 6;
  flex-shrink: 0; width: 7rem; min-width: 7rem;
  border-right: 1px solid var(--color-border);
  display: flex; align-items: center; padding: .25rem .5rem;
  font-size: .72rem; font-weight: 600; color: var(--color-text-faint);
  gap: .25rem; line-height: 1.3; background: var(--color-bg);
}
.ev-tl-hdr .ev-tl-lcol { background: color-mix(in srgb, var(--color-border) 14%, var(--color-bg)); }
.ev-tl-lane--alt .ev-tl-lcol { background: color-mix(in srgb, var(--color-border) 10%, var(--color-bg)); }
/* Colored left accent per tipo */
.ev-tl-lane .ev-tl-lcol {
  border-left: 3px solid var(--tc, var(--color-border));
  padding-left: calc(.5rem - 1px);
}
.ev-tl-track { position: relative; flex: 1; overflow: hidden; }
.ev-tl-hdr .ev-tl-track { height: 2.5rem; }
.ev-tl-lane .ev-tl-track { min-height: var(--lane-h, 2.5rem); }
.ev-tl-lane--alt { background: color-mix(in srgb, var(--color-border) 10%, var(--color-bg)); }
.ev-tl-ldot { display: block; width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }
.ev-tl-lnm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-tl-lcnt {
  flex-shrink: 0; margin-left: auto; font-size: .6rem; font-weight: 700;
  background: color-mix(in srgb, var(--color-border) 45%, transparent);
  border-radius: 8px; padding: 0 4px; min-width: 1.2rem; text-align: center;
  color: var(--color-text-faint); line-height: 1.6;
}
.ev-tl-lane .ev-tl-lcnt {
  background: color-mix(in srgb, var(--tc, var(--color-border)) 18%, transparent);
  color: color-mix(in srgb, var(--tc, var(--color-text-faint)) 70%, var(--color-text-faint));
}
/* Month labels with count badge */
.ev-tl-mlbl {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 600; color: var(--color-text-faint);
  white-space: nowrap; overflow: hidden; gap: 2px;
}
.ev-tl-mlbl-nm { display: block; }
.ev-tl-mlbl-ct {
  display: block; font-size: .58rem; font-weight: 700; line-height: 1.4;
  background: color-mix(in srgb, var(--color-border) 45%, transparent);
  border-radius: 8px; padding: 0 4px;
}
.ev-tl-mlbl--cur { color: var(--color-primary); font-weight: 700; }
.ev-tl-mlbl--cur .ev-tl-mlbl-ct { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
/* Year label inside month header */
.ev-tl-mlbl-yr {
  display: inline-block; font-size: .52rem; font-weight: 500; letter-spacing: .01em;
  color: var(--color-text-faint); margin-left: 3px; vertical-align: top; opacity: .75;
}
.ev-tl-mlbl--cur .ev-tl-mlbl-yr { color: var(--color-primary); }
/* Chips */
.ev-tl-chip {
  position: absolute; transform: translate(var(--xf, -50%), -50%);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; z-index: 3; border: none; background: transparent; padding: 0;
  max-width: 7rem;
}
.ev-tl-chip--past { opacity: .5; }
.ev-tl-cdot {
  display: block; width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--ec, var(--color-primary));
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 1.5px var(--ec, var(--color-primary));
  transition: transform .15s ease, box-shadow .15s ease; flex-shrink: 0;
}
.ev-tl-chip:hover { z-index: 4; }
.ev-tl-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 3px; z-index: 5; }
.ev-tl-chip:hover .ev-tl-cdot {
  transform: scale(1.45);
  box-shadow: 0 0 0 1.5px var(--ec, var(--color-primary)),
              0 0 0 4px color-mix(in srgb, var(--ec, var(--color-primary)) 20%, transparent);
}
.ev-tl-clbl {
  font-size: .63rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 6.5rem; display: block; text-align: center;
  color: color-mix(in srgb, var(--ec, var(--color-text-faint)) 35%, var(--color-text-faint));
  line-height: 1.2; margin-top: 2px; transition: color .15s ease;
}
.ev-tl-chip:hover .ev-tl-clbl { color: var(--color-text); max-width: none; }
.ev-tl-chip--canceled .ev-tl-clbl { text-decoration: line-through; }
.ev-tl-chip--canceled .ev-tl-cdot { opacity: .45; background: var(--color-text-faint); box-shadow: none; }
/* Published chip — thicker ring + bolder label */
.ev-tl-chip--pub .ev-tl-cdot { box-shadow: 0 0 0 2.5px var(--ec, var(--color-primary)); }
.ev-tl-chip--pub .ev-tl-clbl { font-weight: 700; color: color-mix(in srgb, var(--ec, var(--color-text-faint)) 55%, var(--color-text-faint)); }
/* Lane hover */
.ev-tl-lane:hover { background: color-mix(in srgb, var(--tc, var(--color-primary)) 4%, transparent); }
.ev-tl-lane--alt:hover { background: color-mix(in srgb, var(--tc, var(--color-primary)) 6%, transparent); }
/* Header label column — today button */
.ev-tl-hdr-lcol { justify-content: center; }
.ev-tl-today-btn {
  background: none; border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 55%, transparent);
  color: var(--color-warning, #d97706); border-radius: 3px;
  font-size: .6rem; font-weight: 700; padding: 2px 6px; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast, .15s);
}
.ev-tl-today-btn:hover { background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, transparent); }
/* No-date row */
.ev-tl-nodate { display: flex; min-height: 2.5rem; border-bottom: 1px solid var(--color-border); }
.ev-tl-nodate-lcol {
  border-left: 3px solid var(--color-border);
  padding-left: calc(.5rem - 1px);
  background: color-mix(in srgb, var(--color-border) 10%, var(--color-bg));
  align-self: stretch; align-items: center;
}
.ev-tl-nodate-chips { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .375rem .5rem; }
.ev-tl-ndc {
  display: flex; align-items: center; gap: .25rem; font-size: .72rem;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--r-sm); padding: .125rem .5rem; cursor: pointer;
  color: var(--color-text-faint); transition: background var(--t-fast);
}
.ev-tl-ndc:hover { background: var(--color-bg-alt); color: var(--color-text); }
@media (max-width: 640px) {
  .ev-tl-clbl { display: none; }
  .ev-tl-lcol { width: 5rem; min-width: 5rem; font-size: .66rem; }
  .ev-tl-inner { min-width: 30rem; }
}

/* ── Eventos: Cards ─────────────────────────────────────────────────────── */
.ev-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: .75rem; padding: .75rem;
}
.ev-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--r-md, .5rem);
  background: var(--color-bg); overflow: hidden;
  transition: box-shadow var(--t-fast,150ms), transform var(--t-fast,150ms);
}
.ev-card:hover { box-shadow: 0 2px 14px rgba(0,0,0,.09); transform: translateY(-1px); }
.ev-card--past { opacity: .62; }
.ev-card--canceled .ev-card-title { text-decoration: line-through; color: var(--color-text-faint); }
.ev-card-accent { height: 3px; width: 100%; flex-shrink: 0; }
.ev-card-body { padding: .65rem .75rem .45rem; flex: 1; min-width: 0; }
.ev-card-title {
  font-size: .82rem; font-weight: 600; color: var(--color-text); line-height: 1.35;
  margin-bottom: .3rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ev-card-restricted {
  display: inline-block; font-size: .6rem; font-weight: 700; vertical-align: middle;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary); border-radius: 3px; padding: 0 4px; margin-left: 4px;
}
.ev-card-meta {
  display: flex; flex-direction: column; gap: .15rem;
  font-size: .72rem; color: var(--color-text-faint);
}
.ev-card-meta span { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.ev-card-local { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev-card-foot {
  padding: .35rem .5rem; border-top: 1px solid var(--color-border);
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  background: color-mix(in srgb, var(--color-border) 8%, var(--color-bg));
}
.ev-card-price { font-size: .72rem; color: var(--color-text-faint); }
.ev-card-actions { margin-left: auto; display: flex; gap: .125rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .ev-cards-grid { grid-template-columns: 1fr; gap: .5rem; padding: .5rem; }
}