html, body { margin: 0; height: 100%; }

/* ------------------------------------------------------------------ *
 * Estilo "denso/compact" — versão conservadora. A primeira tentativa
 * sobrescrevia padding/min-height de .mud-nav-link e .mud-list-item com
 * seletores genéricos demais, e isso é o provável culpado de a árvore do
 * menu (MudNavGroup aninhado) ter parado de indentar corretamente — esses
 * componentes calculam o recuo de cada nível a partir do próprio padding.
 * Por isso aqui só tocamos componentes "seguros" (sem hierarquia/indentação
 * própria): botões, inputs e células de tabela. Para o menu, a densidade
 * correta é Dense="true" nos próprios componentes Mud (já usado no SideBar).
 * ------------------------------------------------------------------ */
.mud-button-root { padding-top: 4px; padding-bottom: 4px; }
.mud-input-control .mud-input { min-height: 36px; }
.mud-table-cell { padding-top: 6px; padding-bottom: 6px; }
.mud-toolbar { min-height: 48px; }

/* Altura da topbar / largura da sidebar colapsada — um valor só controlando os
   dois (sempre foram "pareados" de propósito, ver .app-sidebar--collapsed
   abaixo). CRÍTICO: ao mudar esse valor, é preciso redefinir a MESMA CSS var
   (--mud-appbar-height) que o MudDrawer usa para se posicionar com
   ClipMode="Always" (ele fica em top: var(--mud-appbar-height)). Sem isso, a
   appbar muda de tamanho mas o drawer continua começando na altura antiga —
   exatamente o gap visto nas screenshots antes desta correção. Mesmo padrão
   de bug das correções de largura: toda vez que sobrescrevemos uma dimensão
   do Mud via CSS puro, a CSS var correspondente também precisa ser
   redefinida, porque outros componentes (aqui o drawer, antes o
   main-content) leem a var, não o CSS computado. Por isso esse valor tem UMA
   fonte só (--app-chrome-size) em vez do literal repetido em 5 lugares
   diferentes — 44px (denso demais, causa do "embolado" relatado) virou 56px. */
:root {
  --app-chrome-size: 56px;          /* altura da topbar */
  --app-sidebar-expanded: 280px;    /* largura da sidebar expandida */
  --app-sidebar-collapsed: 64px;    /* largura da sidebar no modo mini (cabe a caixinha do ícone) */
  --mud-appbar-height: var(--app-chrome-size) !important;
}
.app-topbar.mud-appbar,
.app-topbar .mud-toolbar {
  min-height: var(--app-chrome-size) !important;
  height: var(--app-chrome-size) !important;
}

/* ------------------------------------------------------------------ *
 * Topbar: BRANCA com texto escuro e uma borda inferior sutil (mockup).
 * A cor vem da paleta (AppbarBackground/AppbarText no MainLayout); aqui
 * só reforçamos a borda, o espaçamento dos ícones e o campo de busca.
 * ------------------------------------------------------------------ */
.app-topbar.mud-appbar {
  background-color: var(--mud-palette-appbar-background) !important;
  color: var(--mud-palette-appbar-text) !important;
  border-bottom: 1px solid var(--mud-palette-lines-default, #E6E9EF);
  margin: 0;
  /* Topbar começa DEPOIS da sidebar (que agora é coluna inteira, top:0). A
     largura acompanha o estado da sidebar; a classe vem do TopBar.razor. */
  right: 0;
  width: auto !important;
  transition: left .15s ease;
}
.app-topbar--sidebar-expanded  { left: var(--app-sidebar-expanded) !important; }
.app-topbar--sidebar-collapsed { left: var(--app-sidebar-collapsed) !important; }
.app-topbar.mud-appbar > * { color: inherit; }
.app-topbar.mud-appbar .mud-icon-root,
.app-topbar.mud-appbar .mud-typography { color: inherit; }
/* Margem horizontal entre os ícones de ação à direita. */
.app-topbar .mud-icon-button-root { margin-left: 8px; }
.app-topbar .mud-icon-button-root:first-of-type { margin-left: 0; }

/* Badge do sino de notificações: desce pra dentro do botão.
   O default do MudBlazor 9.5 é `inset: auto auto calc(100% - 12px) calc(100% - 12px)`, ou seja, a
   BASE do badge fica 12px abaixo do topo do botão — o badge (20px) sobe 8px acima dele. O botão
   Size.Medium tem 48px numa topbar de 56px (--app-chrome-size), sobrando só 3,5px de folga em cima:
   medido, o topo do badge caía em -4,5px, pra fora da tela (a topbar é position:fixed, não tem o que
   rolar pra alcançar).
   O 22px aqui é o mesmo mecanismo, só que ancorando a base do badge 22px abaixo do topo do botão →
   badge em 5,5..25,5px, encostado no canto superior direito do sino (que ocupa 15,5..39,5px).
   Só o eixo vertical muda; o `left` continua o do Mud.
   ATENÇÃO: se --app-chrome-size ou o Size do MudIconButton mudarem, esta conta muda junto. */
.app-topbar .mud-badge.mud-badge-top.right.mud-badge-overlap {
  inset: auto auto calc(100% - 22px) calc(100% - 12px);
}
.app-topbar-empresa { font-weight: 600; margin-left: 4px; }

/* Campo de busca (topbar, à direita antes do tema). "Pílula" cinza-clara +
   painel de pré-resultados ancorado abaixo. Ver TopbarSearch.razor. */
.app-topbar-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 450px;
  margin-right: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  /* Translúcido a partir do texto do tema: fica cinza-claro no tema claro e um
     tom sutil claro no escuro — legível nos dois (antes era #F1F3F7 fixo, que
     sumia o texto no tema escuro). */
  background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
  border: 1px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.app-topbar-search:focus-within {
  background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}
.app-topbar-search__icon { color: var(--mud-palette-text-secondary); }
.app-topbar-search__clear { color: var(--mud-palette-text-secondary); cursor: pointer; }
.app-topbar-search__input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: 14px; color: var(--mud-palette-text-primary);
  font-family: inherit;
}
.app-topbar-search__input::placeholder { color: var(--mud-palette-text-secondary); }

/* Painel de pré-resultados ancorado abaixo do campo. */
.app-topbar-search__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  z-index: 1401; /* acima do AppBar (1200) e do conteúdo */
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default, #E6E9EF);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,30,60,.14);
  padding: 8px;
  max-height: 60vh; overflow-y: auto;
  animation: topbar-search-in .14s ease;
}
@keyframes topbar-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.app-topbar-search__hint { font-size: 12px; color: var(--mud-palette-text-secondary); padding: 4px 8px 8px; }
.app-topbar-search__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--mud-palette-text-secondary); padding: 8px 8px 2px; }
.app-topbar-search__result { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--mud-palette-text-primary); }
.app-topbar-search__result:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.app-topbar-search__footer { font-size: 12px; color: var(--mud-palette-text-secondary); text-align: center; padding: 8px 0 4px; border-top: 1px solid var(--mud-palette-lines-default, #EEF1F5); margin-top: 6px; }

/* Resultado de Segurado: nome em cima; CPF mascarado + badges de situação na MESMA linha
   embaixo (antes as situações ficavam numa coluna à direita, "empilhando" feio quando a
   pessoa tinha 2+ vínculos). */
.app-topbar-search__result--segurado { align-items: flex-start; }
.app-topbar-search__segurado-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.app-topbar-search__segurado-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar-search__segurado-linha2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.app-topbar-search__segurado-cpf { font-size: 12px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Badge de situação (SituacaoBadge.razor) — cor real do catálogo (protecdyna.xtab_cadastro_tipos_situação.BgColor). */
.situacao-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* Painel de notificações (MudMenu do sino na topbar). */
.topbar-notif { width: 320px; max-width: 88vw; padding: 4px; }
.topbar-notif__head { font-weight: 700; font-size: 14px; padding: 8px 10px; }
.topbar-notif__item { display: flex; gap: 10px; padding: 10px; border-top: 1px solid var(--mud-palette-lines-default, #EEF1F5); }
.topbar-notif__icon { margin-top: 2px; }
.topbar-notif__text { font-size: 13px; line-height: 1.35; color: var(--mud-palette-text-primary); }
.topbar-notif__time { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.topbar-notif__foot { text-align: center; font-size: 12px; font-weight: 600; color: var(--mud-palette-primary); padding: 10px; cursor: pointer; border-top: 1px solid var(--mud-palette-lines-default, #EEF1F5); }

/* ------------------------------------------------------------------ *
 * Sidebar: azul-MARINHO (DrawerBackground na paleta), texto/ícone claros.
 * ------------------------------------------------------------------ */
.app-sidebar.mud-drawer {
  background-color: var(--mud-palette-drawer-background) !important;
  color: var(--mud-palette-drawer-text) !important;
  border-right: none;
  transition: width .15s ease;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Sidebar é a coluna INTEIRA à esquerda (top:0, bottom:0) — o brand fica no
     topo dela e a topbar começa à direita (ver .app-topbar--sidebar-*). */
  top: 0 !important;
  height: 100% !important;
  z-index: 1250; /* acima da topbar (AppBar 1200) na quina superior esquerda */
}
.app-sidebar.mud-drawer .mud-icon-root,
.app-sidebar.mud-drawer .mud-typography,
.app-sidebar.mud-drawer .mud-nav-link,
.app-sidebar.mud-drawer .mud-nav-group-title { color: inherit; }

/* Header (brand) da sidebar. */
.app-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--app-chrome-size); flex-shrink: 0;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-sidebar--collapsed .app-sidebar-brand { justify-content: center; padding: 0; }
.app-sidebar-brand__logo { border-radius: 6px; }
.app-sidebar-brand__title { font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.app-sidebar-brand__collapse { color: rgba(255,255,255,.7) !important; }
.app-sidebar-brand__collapse:hover { color: #FFFFFF !important; }

/* Corpo (árvore) cresce, footer (Ajuda) fica fixo no fim. */
.app-sidebar-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 6px; }

/* ---- Itens de navegação: "caixinha" com hover/ativo ---- */
.app-sidebar .mud-nav-link {
  border-radius: 8px;
  margin: 2px 0;
}
.app-sidebar .mud-nav-link:hover { background: rgba(255,255,255,.06); }
.app-sidebar .mud-nav-group > .mud-nav-link:hover { background: rgba(255,255,255,.06); }
/* Item "Início" ativo (sem módulo aberto) OU item do módulo central aberto —
   mesmo destaque: fundo azul do acento, texto/ícone brancos. */
.app-sidebar-inicio--active .mud-nav-link,
.sidebar-item--active .mud-nav-link {
  background: var(--mud-palette-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}
.app-sidebar-inicio--active .mud-nav-link .mud-icon-root,
.sidebar-item--active .mud-nav-link .mud-icon-root { color: #FFFFFF !important; }

/* Modo mini (colapsado): ícones empilhados em COLUNA, cada um numa "caixinha".
   Força o MudNavMenu/itens a virarem uma coluna centralizada, sem os paddings/
   margens nativos do MudNavLink que faziam os ícones se sobreporem no 64px. */
.app-sidebar--collapsed .mud-navmenu {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.app-sidebar--collapsed .mud-nav-item,
.app-sidebar--collapsed .mud-navmenu > div {
  width: 100%;
  display: flex;
  justify-content: center;
}
.app-sidebar-mini-body .mud-tooltip-root {
  display: flex !important;
  justify-content: center;
  width: 100% !important;
}
.mini-nav-icon {
  width: 40px; height: 40px;
  margin: 4px auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.8) !important;
  transition: background .15s ease, border-color .15s ease;
}
.mini-nav-icon:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.mini-nav-icon--active {
  background: var(--mud-palette-primary) !important;
  border-color: var(--mud-palette-primary) !important;
  color: #FFFFFF !important;
}
.app-sidebar-mini-body { cursor: pointer; }

/* Footer fixo (Ajuda e Suporte). */
.app-sidebar-footer {
  flex-shrink: 0;
  padding: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.app-sidebar--collapsed .app-sidebar-footer { display: flex; justify-content: center; }

/* CRÍTICO: ícones de navegação no modo mini (colapsado) precisam ficar em
   coluna, um abaixo do outro — igual a qualquer sidebar.
   A causa raiz do bug era o wrapper do MudTooltip (.mud-tooltip-root), que o
   MudBlazor renderiza como display:inline-block/width:fit-content por
   padrão — então os ícones (cada um envolto por um MudTooltip) flutuavam
   lado a lado na coluna estreita da sidebar em vez de empilhar. A correção
   principal é Inline="false" no MudTooltip (ver SideBarItem.razor); o
   seletor abaixo é só um fallback de segurança, redundante quando o
   parâmetro está setado, mas inofensivo. */
.app-sidebar-mini-body .mud-tooltip-root {
  display: flex !important;
  justify-content: center;
  width: 100% !important;
}
.mini-nav-icon {
  margin: 8px 0;
}
.app-sidebar-mini-body { cursor: pointer; }

/* Largura: o parâmetro Width do MudDrawer é IGNORADO pelo próprio componente
   quando Variant=Persistent e IsFixed=true (padrão) — limitação documentada
   do MudBlazor (a CSS var --mud-drawer-width só é escrita quando
   "!IsFixed || Variant == Temporary"). Por isso definimos a largura real E a
   própria CSS var aqui: a largura real para o elemento do drawer em si, e a
   var porque é ela que o MudMainContent lê internamente para calcular sua
   margin-left — sem redefini-la, o conteúdo central nunca acompanharia. */
.app-sidebar.app-sidebar--expanded {
  width: var(--app-sidebar-expanded) !important;
  --mud-drawer-width: var(--app-sidebar-expanded);
}
/* Colapsada: mesma medida (--app-chrome-size) da altura da topbar — pedido
   explícito, para os dois "eixos" do shell combinarem. A topbar centraliza
   seus ícones verticalmente dentro dessa altura; aqui centralizamos
   horizontalmente dentro da mesma largura. */
.app-sidebar.app-sidebar--collapsed {
  width: var(--app-sidebar-collapsed) !important;
  --mud-drawer-width: var(--app-sidebar-collapsed);
}

/* Nota: a regra que existia aqui forçava o wrapper do MudMenu a ocupar a
   linha inteira, porque antes ele envolvia o MudNavLink (ActivatorContent).
   Isso mudou — o context-menu do item de menu agora é um MudMenu SEM
   ActivatorContent, controlado via @ref (ver SideBarItem.razor), então o
   MudNavLink é irmão do MudMenu, não filho, e já é block-level por natureza
   própria. Não sobrou nenhum CSS pra "desinlinar" aqui. */

/* Tela de escolha de empresa (EscolherEmpresa.razor) */
.empresa-picker { max-width: 960px; margin: 0 auto; padding: 40px 20px; }
.empresa-picker-header { text-align: center; margin-bottom: 24px; }
.empresa-picker-toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.empresa-picker-search { flex: 1 1 260px; }
.empresa-card { cursor: pointer; transition: all .2s; padding: 8px; }
.empresa-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.empresa-card--inativa { opacity: .65; }
.empresa-icon {
  width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--mud-palette-primary-hover, rgba(47,95,224,.08));
}
/* `contain`, NUNCA `cover`: cover preenche a caixa cortando o que sobra — tolerável na bandeira
   (quase quadrada), mas mutila um logo retangular, que é justamente o formato da maioria. Com
   contain a imagem inteira aparece, dentro da proporção original, e a caixa mostra o fundo nas
   sobras. O padding evita que o logo encoste na borda arredondada. */
.empresa-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.empresa-icon__fallback { color: var(--mud-palette-primary, #2F5FE0); font-size: 20px; }

/* Modal quase full-screen (ModuleWidget.razor) — Chat/MagIA. A máscara cobre
   a tela INTEIRA (top: 0), inclusive a topbar — assim clicar em qualquer lugar
   fora do painel (topbar incluída) fecha o modal (pedido do usuário). Clicar
   na máscara só esconde (Fechar()) — o iframe por trás nunca é desmontado, é
   por isso que abrir de novo não recarrega nada. O painel (.module-modal) tem
   @onclick:stopPropagation, então clicar nele não fecha. */
.module-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Entre Dialog (1300) e Popover (1400) do tema (ver MudTheme.ZIndex em
     MainLayout.razor) — assim o menu de conta (Favoritos/Perfil/Trocar
     Empresa/Sair), que é um Popover, sempre aparece por cima da máscara,
     mesmo com o modal do Chat/MagIA aberto. */
  z-index: 1350;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 17, 26, .55);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.module-modal-backdrop--visible { opacity: 1; pointer-events: auto; }
.module-modal {
  width: 94%;
  height: 92%;
  max-width: 1600px;
  background: var(--mud-palette-surface, #fff);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  transform: scale(.96) translateY(10px);
  transition: transform .18s ease;
}
.module-modal-backdrop--visible .module-modal { transform: scale(1) translateY(0); }
.module-modal__body { flex: 1 1 auto; position: relative; overflow: hidden; }
.module-widget-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Tela de carregamento animada (BootScreen.razor) — aparece antes de
   qualquer coisa (login/redirect), então é CSS puro, sem MudBlazor. */
.app-boot-screen {
  position: fixed; inset: 0; z-index: 1000000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  background: var(--mud-palette-background, #0f172a);
  font-family: 'DM Sans', sans-serif;
}
.app-boot-screen__logo-wrap {
  position: relative;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
}
.app-boot-screen__logo {
  width: 48px; height: 48px; object-fit: contain;
  animation: app-boot-pulse 1.8s ease-in-out infinite;
  position: relative; z-index: 1;
}
.app-boot-screen__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--mud-palette-primary, #2F5FE0);
  border-right-color: var(--mud-palette-primary, #2F5FE0);
  animation: app-boot-spin 1.4s linear infinite;
}
.app-boot-screen__ring--delay {
  inset: 14px;
  opacity: .5;
  animation-duration: 2s;
  animation-direction: reverse;
}
.app-boot-screen__text {
  color: var(--mud-palette-text-primary, #cbd5e1);
  font-size: 14px; font-weight: 500; letter-spacing: .3px;
}
.app-boot-screen__dots span {
  display: inline-block;
  animation: app-boot-dots 1.4s infinite;
  animation-fill-mode: both;
}
.app-boot-screen__dots span:nth-child(2) { animation-delay: .2s; }
.app-boot-screen__dots span:nth-child(3) { animation-delay: .4s; }

@keyframes app-boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .8; }
}
@keyframes app-boot-spin { to { transform: rotate(360deg); } }
@keyframes app-boot-dots {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* Overlay de carregamento global (ver App.razor + Protec.SistemaV2-bridge.js) —
   HTML/CSS puro, fora do controle do Blazor de propósito: precisa continuar
   funcionando não importa se o circuito está no meio de um render, uma
   navegação de página real, ou o que for. */
.global-loading-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(15, 17, 26, 0.55);
  backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
  font-family: 'DM Sans', sans-serif;
}
.global-loading-overlay.is-visible { display: flex; }
.global-loading-overlay__spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: empresa-loading-spin .7s linear infinite;
}
.global-loading-overlay__text { color: #fff; font-size: 14px; font-weight: 500; }
@keyframes empresa-loading-spin { to { transform: rotate(360deg); } }

#module-host {
  position: absolute;
  inset: 0;
  /* `isolation: isolate` cria um contexto de empilhamento próprio e isolado
     para o iframe. Iframes cross-origin às vezes são compostos pelo
     navegador de um jeito que não respeita 100% a ordem normal de z-index
     da página — isolar o container evita que ele "vaze" para cima de
     elementos do shell (topbar, sidebar, menus, diálogos) mesmo que algum
     z-index seja recalculado dinamicamente. */
  isolation: isolate;
  z-index: 0;
}
.module-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* Topbar/sidebar/popovers: a ordem de camadas agora é definida no tema
   (MainLayout.razor, MudTheme.ZIndex) — é lá que o MudBlazor realmente lê
   os valores (CSS var + cálculo em JS), então não duplicamos/competimos com
   z-index fixo aqui. Ver o comentário em MainLayout.razor para o porquê. */

/* CORREÇÃO: o container central não estava preenchendo a página (nem
   largura nem altura) porque dependia do modelo de caixa "normal" do
   MudMainContent (margin-left + width:auto) — que, nesta combinação de
   AppBar fixa + Drawer com largura customizada (44/280px, fora do
   --mud-drawer-width padrão do Mud), não estica sozinho até as bordas.
   Troca pra position:fixed com os 4 lados explícitos: cobre exatamente o
   espaço entre a topbar (top) e as bordas da tela (right/bottom), com
   `left` controlado pelo estado do sidebar — determinístico, não depende
   de nenhum cálculo de largura/altura implícito do Mud. */
.app-main-content {
  position: fixed;
  top: var(--app-chrome-size);    /* logo abaixo da topbar (mesma altura fixada acima) */
  right: 0;
  bottom: 0;
  overflow: auto;
  box-sizing: border-box;
  transition: left .15s ease;
}
.app-main-content.app-main-content--sidebar-expanded  { left: var(--app-sidebar-expanded); }
.app-main-content.app-main-content--sidebar-collapsed { left: var(--app-sidebar-collapsed); }

/* O MudBlazor tem uma regra própria —
   `.mud-drawer-open-persistent-left:not(.mud-drawer-open-persistent-right)
   .mud-main-content { margin-left: var(--mud-drawer-width-left); }` — que
   dispara sempre que o MudDrawer é Variant="Persistent" com Open=true (é o
   nosso caso: o sidebar "abre/fecha" mudando a LARGURA via CSS, não o
   Open, então pro Mud ele está sempre aberto). Isso SOMA com o `left` que
   já definimos acima, empurrando o container ainda mais mesmo com o
   sidebar colapsado (240px de --mud-drawer-width-left por cima do left:44px).
   Como controlamos todo o posicionamento horizontal via `left`, zeramos
   esse margin-left nativo aqui — não mexemos na variável global porque
   outra coisa pode depender dela. */
.mud-main-content.app-main-content { margin-left: 0 !important; }

/* ------------------------------------------------------------------ *
 * Empty state da área central (signature do shell).
 * Restrição deliberada: nada de hero chamativo — é um plano de fundo
 * "respirável" que some assim que um módulo carrega. Um grid sutil de
 * pontos + um halo radial suave que herda a cor primária do tema.
 * ------------------------------------------------------------------ */
.module-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%,
      color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0%,
      transparent 60%),
    var(--mud-palette-background);
}
.module-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) 1px,
    transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 45%, #000 0%, transparent 75%);
          mask-image: radial-gradient(80% 60% at 50% 45%, #000 0%, transparent 75%);
  opacity: .5;
}
.module-empty__inner { position: relative; max-width: 28rem; padding: 1.5rem; }
.module-empty__title { font-weight: 500; letter-spacing: .2px; }
.module-empty__hint  { opacity: .6; margin-top: .35rem; }

/* ================================================================== *
 * Home dashboard (HomeDashboard.razor) — tela central logo após login/
 * escolha de empresa. Reproduz o mockup: saudação + data, 4 cards de
 * estatística, "Acesso rápido" (favoritos) + coluna de alertas/aniver-
 * sariantes, e footer. Tudo com dados placeholder por enquanto.
 * ================================================================== */
.home-dashboard {
  position: absolute; inset: 0; overflow-y: auto;
  /* Acima do #module-host (z-index:0), que é irmão e vem depois no DOM — sem
     isso, o container vazio do iframe ficaria por cima e bloquearia os cliques
     dos cards de favorito. Só é renderizado quando NÃO há módulo aberto. */
  z-index: 1;
  /* SEM padding-bottom aqui de propósito: o footer (última linha do flex
     column) já reserva sua própria altura fixa (--app-chrome-size, ver
     .home-footer); um padding-bottom no container sobraria ABAIXO da faixa
     do footer (mesmo fundo, mesma cor) e dava a falsa impressão de um
     footer gigante — não era a altura do footer, era esse respiro extra do
     container. O footer cuida do próprio respiro horizontal via padding. */
  padding: 28px 32px 0;
  background: var(--mud-palette-background);
  /* Coluna flex + footer com margin-top:auto (abaixo): sem isso, com conteúdo
     mais curto que a tela, o footer ficava "solto" logo após o conteúdo, e o
     espaço vazio até o fim do container (que ocupa 100% da altura) dava a
     impressão de um footer gigante em vez de uma faixa fina no rodapé. */
  display: flex;
  flex-direction: column;
}
.home-dashboard, .home-dashboard * { box-sizing: border-box; }

.home-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.home-greeting { margin: 0; font-size: 26px; font-weight: 700; color: var(--mud-palette-text-primary); }
.home-subtitle { margin: 4px 0 0; color: var(--mud-palette-text-secondary); font-size: 14px; }
.home-topright { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.home-date { display: flex; align-items: center; gap: 8px; color: var(--mud-palette-text-secondary); font-size: 13px; white-space: nowrap; }
.home-date__day { font-weight: 600; color: var(--mud-palette-text-primary); }
.home-date__time { text-align: right; font-variant-numeric: tabular-nums; }

/* Widget de clima (ao lado da data). */
.home-clima {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default, #E6E9EF);
  white-space: nowrap;
}
.home-clima__icon { color: var(--mud-palette-primary); }
.home-clima__temp { font-weight: 700; font-size: 15px; color: var(--mud-palette-text-primary); }
.home-clima__local { font-size: 13px; color: var(--mud-palette-text-secondary); }

/* Contagem no cabeçalho dos painéis + link "Ver todos/todas" clicável. */
.home-panel__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 10px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
  color: var(--mud-palette-primary);
}
.home-panel__link { cursor: pointer; }
.home-panel__link:hover { text-decoration: underline; }

/* Cards de estatística */
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.home-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default, #E6E9EF);
}
.home-stat__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-stat__label { font-size: 13px; color: var(--mud-palette-text-secondary); }
.home-stat__value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--mud-palette-text-primary); }
/* Skeleton do valor ocupa a MESMA altura da linha do número (26px * 1.1) — o card não muda de
   tamanho quando o dado real entra. */
.home-stat__value .home-stat__sk { height: 28.6px; border-radius: 6px; }
.home-stat__hint { font-size: 12px; color: var(--mud-palette-text-secondary); }

/* Colunas: acesso rápido (principal) + alertas/aniversariantes (lateral) */
.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.home-section-head { margin-bottom: 12px; }
.home-section-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--mud-palette-text-primary); }
.home-section-sub { margin: 2px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); }

/* ===== Card de módulo/favorito — BASE COMPARTILHADA ==========================================
   Três telas desenham exatamente o mesmo card: o Acesso Rápido do dashboard (.home-fav-card), o
   modal "Configurar Acesso Rápido" (.qar-card) e o diálogo de Favoritos da topbar (.fav-dlg-card).
   Antes eram rulesets duplicados que já haviam divergido de leve (o .qar-card perdeu o
   border-color no hover). Seletor agrupado = uma regra só, sem tocar no markup de ninguém: um
   ajuste de raio/sombra/padding passa a valer nas três de uma vez.
   O que é ESPECÍFICO de cada uma (chevron, check de seleção, tracejado do --config, drag-n-drop)
   continua em regras próprias, mais abaixo. */
.home-fav-grid,
.qar-grid,
.fav-dlg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.home-fav-card,
.qar-card,
.fav-dlg-card {
  position: relative; cursor: pointer;
  padding: 16px; border-radius: 14px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default, #E6E9EF);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.home-fav-card:hover,
.qar-card:hover,
.fav-dlg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20,30,60,.08);
  border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}
.home-fav-card__icon,
.qar-card__icon,
.fav-dlg-card__icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
  color: var(--mud-palette-primary);
}
.home-fav-card__title,
.qar-card__title,
.fav-dlg-card__title { font-weight: 600; font-size: 14px; color: var(--mud-palette-text-primary); }

.home-fav-card__chevron { position: absolute; top: 14px; right: 12px; color: var(--mud-palette-text-secondary); }

/* Drag-n-drop de reordenação (HTML5 nativo) — feedback visual do card sendo arrastado e do
   card sob o cursor (alvo do drop). */
.home-fav-card.is-dragging { opacity: .5; }
.home-fav-card.is-drop-target { outline: 2px dashed var(--mud-palette-primary); outline-offset: 2px; }

/* Card "Configurar Acesso Rápido" — mesmo tamanho dos demais, tracejado, sem chevron
   (não abre um módulo, abre o modal de configuração). Nunca é arrastável/alvo de drop. */
.home-fav-card--config,
.fav-dlg-card--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-style: dashed; color: var(--mud-palette-text-secondary);
}
.home-fav-card--config .home-fav-card__icon,
.fav-dlg-card--add .fav-dlg-card__icon { background: transparent; color: inherit; margin-bottom: 8px; }

/* ---- Específicos do diálogo de Favoritos (topbar) ----
   Mesmo card do dashboard; o que muda é ter um "remover" no canto em vez do chevron. O botão só
   aparece no hover/foco do card pra a grade não virar um paredão de X — mas :focus-within mantém
   ele visível pra quem navega por teclado, senão o alvo seria inalcançável sem mouse. */
.fav-dlg-card__remover {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
  color: var(--mud-palette-text-secondary);
}
.fav-dlg-card:hover .fav-dlg-card__remover,
.fav-dlg-card:focus-within .fav-dlg-card__remover { opacity: 1; }
.fav-dlg-card__remover:hover { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }

/* Empty state do acesso rápido — o painel INTEIRO é o botão de "adicionar" (nada de botão
   separado dentro dele: menos confuso, e evita qualquer disputa de clique com componentes
   filhos). Visual "convidativo": gradiente sutil, borda tracejada que acende no hover, selo
   com ícone flutuando (leve pulso) + badge "+" sobreposto, mesma linguagem do "+" já usado
   nos cards de vínculo pendente do Protec.Cadastros. */
.home-empty {
  cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 48px 24px; border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 65%);
  border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.home-empty:hover {
  border-color: var(--mud-palette-primary);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(47,95,224,.14);
}
.home-empty__badge {
  position: relative; width: 68px; height: 68px; border-radius: 50%; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 55%, #7C3AED));
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
  animation: home-empty-pulse 2.6s ease-in-out infinite;
}
.home-empty__badge .mud-icon-root { font-size: 32px; }
.home-empty__plus {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mud-palette-surface); color: var(--mud-palette-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(16,24,40,.2);
  font-weight: 800; font-size: 16px; line-height: 1;
}
.home-empty__title { font-weight: 700; font-size: 16px; color: var(--mud-palette-text-primary); }
.home-empty__hint { font-size: 13px; color: var(--mud-palette-text-secondary); max-width: 26rem; }
.home-empty__cta {
  margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--mud-palette-primary);
  display: inline-flex; align-items: center; gap: 6px;
}
@keyframes home-empty-pulse {
  0%, 100% { box-shadow: 0 10px 24px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
  50% { box-shadow: 0 10px 30px color-mix(in srgb, var(--mud-palette-primary) 65%, transparent), 0 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
}

/* Modal "Configurar Acesso Rápido" — só o que é ESPECÍFICO dele; o card em si vem da base
   compartilhada lá em cima (.home-fav-card/.qar-card/.fav-dlg-card). */
.qar-card--selecionado {
  border-color: var(--mud-palette-primary);
  background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
  box-shadow: 0 0 0 2px var(--mud-palette-primary);
}
/* O estado selecionado tem borda/sombra próprias — o hover da base não pode apagá-las. */
.qar-card--selecionado:hover { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px var(--mud-palette-primary), 0 8px 22px rgba(20,30,60,.08); }
.qar-card__check { position: absolute; top: 10px; right: 10px; color: var(--mud-palette-primary); }
.qar-card__desc { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 4px; }

/* Painéis da coluna lateral */
.home-panel {
  padding: 16px 18px; border-radius: 14px; margin-bottom: 18px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default, #E6E9EF);
}
.home-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.home-panel__title { font-weight: 700; font-size: 15px; color: var(--mud-palette-text-primary); }
.home-panel__link { font-size: 12px; font-weight: 600; color: var(--mud-palette-primary); cursor: pointer; }

.home-alert { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default, #EEF1F5); }
.home-alert:first-of-type { border-top: none; }
.home-alert__icon { margin-top: 2px; }
.home-alert__text { font-size: 13px; color: var(--mud-palette-text-primary); line-height: 1.35; }
.home-alert__time { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

.home-birthday { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default, #EEF1F5); }
.home-birthday:first-of-type { border-top: none; }
.home-birthday__body { flex: 1 1 auto; min-width: 0; }
.home-birthday__name { font-size: 14px; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-birthday__meta { font-size: 12px; color: var(--mud-palette-text-secondary); }
.home-birthday__cake { color: var(--mud-palette-primary); }

.home-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  flex-shrink: 0;
  /* margin-top:auto empurra o footer pro fim do flex column quando o conteúdo é curto;
     position:sticky mantém ele colado no fundo do container ao rolar quando o conteúdo
     é mais alto que a tela — os dois juntos são o padrão clássico de "sticky footer".
     Altura igual à da topbar (--app-chrome-size), não mais um padding avulso. */
  margin-top: auto;
  position: sticky;
  bottom: 0;
  height: var(--app-chrome-size);
  background: var(--mud-palette-background);
  padding: 0;
  border-top: 1px solid var(--mud-palette-lines-default, #E6E9EF);
  font-size: 12px; color: var(--mud-palette-text-secondary);
}

/* Responsivo: colunas empilham em telas estreitas. */
@media (max-width: 1100px) {
  .home-columns { grid-template-columns: 1fr; }
  .home-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-stats { grid-template-columns: 1fr; }
  .home-dashboard { padding: 20px 16px 0; }
}

/* Densidade de tabela (componente sem indentação hierárquica, seguro) */
.mud-table-dense .mud-table-cell { padding-top: 4px; padding-bottom: 4px; }

/* ===== Modal de resumo do Segurado (busca rápida) ===== */
.sr { display: flex; flex-direction: column; gap: 16px; min-width: min(560px, 84vw); }
.sr-head { display: flex; gap: 16px; align-items: flex-start; }
.sr-foto { width: 88px; height: 88px; border-radius: 16px; overflow: hidden; flex: none; background: var(--mud-palette-action-default-hover); box-shadow: 0 2px 8px rgba(0,0,0,.12); position: relative; }
.sr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-foto-fallback { position: absolute; inset: 0; place-items: center; color: var(--mud-palette-text-secondary); }
.sr-foto-fallback .mud-icon-root { font-size: 44px; }
.sr-id { flex: 1; min-width: 0; }
.sr-nome { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--mud-palette-text-primary); }
.sr-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--mud-palette-text-secondary); font-size: 13.5px; }
.sr-cpf { font-variant-numeric: tabular-nums; }
.sr-dot { opacity: .5; }
.sr-sexo { color: var(--mud-palette-primary); }
.sr-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sr-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; }
.sr-flag--recad { background: rgba(217,119,6,.14); color: #9A5B08; border-color: rgba(217,119,6,.35); cursor: pointer; }
.sr-flag--recad:hover { filter: brightness(1.05); }
.sr-flag--obito { background: rgba(120,120,140,.16); color: var(--mud-palette-text-secondary); }
.sr-recad { border: 1px solid var(--mud-palette-divider); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--mud-palette-background-grey); }
.sr-recad-load { color: var(--mud-palette-text-secondary); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sr-recad-item { display: flex; gap: 10px; align-items: flex-start; }
.sr-recad-badge { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sr-recad-titulo { font-weight: 600; color: var(--mud-palette-text-primary); font-size: 13.5px; }
.sr-recad-data { font-size: 12px; color: var(--mud-palette-text-secondary); }
.sr-vinc-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 8px; }
.sr-count { background: var(--mud-palette-primary); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 8px; }
.sr-load { color: var(--mud-palette-text-secondary); font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.sr-vinc-list { display: flex; flex-direction: column; gap: 10px; }
.sr-vinc { border: 1px solid var(--mud-palette-divider); border-radius: 12px; padding: 12px 14px; }
.sr-vinc-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sr-mat { font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.sr-mat b { color: var(--mud-palette-text-primary); }
.sr-vinc-ref { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.sr-ref { display: flex; flex-direction: column; }
.sr-ref-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--mud-palette-text-secondary); }
.sr-ref-val { font-size: 13.5px; color: var(--mud-palette-text-primary); font-weight: 600; }

/* ===== Modal de resumo do Cargo (busca rápida) ===== */
.cr { display: flex; flex-direction: column; gap: 16px; min-width: min(560px, 84vw); }
.cr-head { display: flex; gap: 14px; align-items: center; }
.cr-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--mud-palette-primary); color: #fff; display: grid; place-items: center; flex: none; }
.cr-ico .mud-icon-root { font-size: 28px; }
.cr-nome { font-size: 19px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.2; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.cr-chip--apo { background: rgba(47,95,224,.12); color: var(--mud-palette-primary); }
.cr-chip--car { background: rgba(20,160,120,.14); color: #0F6E56; }
.cr-load { color: var(--mud-palette-text-secondary); font-size: 13.5px; display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.cr-body { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.cr-pizza { flex: none; text-align: center; }
.cr-total { margin-top: 6px; font-size: 22px; font-weight: 800; color: var(--mud-palette-text-primary); display: flex; flex-direction: column; }
.cr-total span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--mud-palette-text-secondary); }
.cr-tiles { display: flex; gap: 12px; flex: 1; min-width: 260px; }
.cr-tile { flex: 1; border: 1px solid var(--mud-palette-divider); border-radius: 14px; padding: 12px 14px; }
.cr-tile-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--mud-palette-text-secondary); }
.cr-dot { width: 9px; height: 9px; border-radius: 50%; }
.cr-tile--ativo .cr-dot { background: var(--mud-palette-primary); }
.cr-tile--apo .cr-dot { background: #F0A020; }
.cr-tile-qtd { font-size: 26px; font-weight: 800; color: var(--mud-palette-text-primary); line-height: 1.1; margin: 2px 0 6px; }
.cr-tile-l { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.cr-tile-l b { color: var(--mud-palette-text-primary); font-weight: 700; }

/* ===== Ajustes dos modais de busca (largura + header sem nome duplicado) ===== */
.mud-dialog-title:empty { display: none; padding: 0; }
.cr { min-width: min(480px, 90vw); }
.sr { min-width: min(680px, 92vw); }

/* Cargo: barra de proporção (headcount) + tabela comparativa */
.cr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.cr-dot--ativo { background: var(--mud-palette-primary); }
.cr-dot--apo { background: #F0A020; }
.cr-body { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.cr-hc { display: flex; flex-direction: column; gap: 8px; }
.cr-hc-total { font-size: 13px; color: var(--mud-palette-text-secondary); }
.cr-hc-total b { font-size: 20px; color: var(--mud-palette-text-primary); font-weight: 800; margin-right: 4px; }
.cr-split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--mud-palette-action-default-hover); gap: 2px; }
.cr-split-seg { min-width: 3px; }
.cr-cmp { width: 100%; border-collapse: collapse; }
.cr-cmp th, .cr-cmp td { padding: 8px 10px; font-size: 13px; }
.cr-cmp thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-divider); text-align: right; font-weight: 700; white-space: nowrap; }
.cr-cmp thead th:first-child { text-align: left; }
.cr-cmp tbody td { text-align: right; color: var(--mud-palette-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--mud-palette-divider); white-space: nowrap; }
.cr-cmp tbody tr:last-child td { border-bottom: 0; }
/* 1ª coluna = o grupo (situação), com a bolinha da cor; última = o "i" que abre os segurados. */
.cr-cmp-grupo { text-align: left !important; color: var(--mud-palette-text-secondary) !important; font-weight: 600 !important; }
.cr-cmp-grupo .cr-dot { margin-right: 7px; }
.cr-cmp-acao { width: 40px; padding: 0 !important; text-align: center !important; }

/* ===== Modal: segurados de um grupo do cargo ("i") ===== */
.cgs { min-width: min(620px, 88vw); }
.cgs-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cgs-grupo { font-size: 16px; font-weight: 700; color: var(--mud-palette-text-primary); display: inline-flex; align-items: center; gap: 8px; }
.cgs-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cgs-cargo { font-size: 13px; color: var(--mud-palette-text-secondary); }
.cgs-load { color: var(--mud-palette-text-secondary); font-size: 13.5px; display: flex; align-items: center; gap: 8px; padding: 14px 0; }
.cgs-count { font-size: 12px; color: var(--mud-palette-text-secondary); padding-bottom: 8px; }
.cgs-tab { width: 100%; border-collapse: collapse; }
.cgs-tab th, .cgs-tab td { padding: 8px 10px; font-size: 13px; text-align: left; }
.cgs-tab thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-divider); font-weight: 700; }
.cgs-tab tbody td { border-bottom: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-primary); }
.cgs-tab tbody tr:last-child td { border-bottom: 0; }
.cgs-nome { font-weight: 600; }
.cgs-cpf { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.cgs-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* Segurado: recad (cabeçalho da data + aviso de falha) */
.sr-recad-head { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.sr-recad-head b { color: var(--mud-palette-text-primary); }
.sr-recad-load--warn { color: #9A5B08; }

/* ===== Tela de bloqueio (estilo WhatsApp Web) e aviso de inatividade ==================
   CORES HARDCODED, de propósito — NÃO usar var(--mud-palette-*) aqui. Essas variáveis só
   existem depois que o MudThemeProvider renderiza, e ele vive no ramo "usuário resolvido" do
   MainLayout; a tela de bloqueio aparece justamente no ramo em que ele NÃO renderizou. Mesmo
   raciocínio do #components-reconnect-modal (ver App.razor). Os tokens abaixo são os mesmos do
   _AuthLayout.cshtml do Authenticator, pra a tela de bloqueio parecer irmã da de login.
   Claro é o padrão; escuro sobrescreve via data-theme (gravado por protec.broadcastTheme a
   partir do cookie ui.theme). */
.app-lock {
  --lk-bg: #f1f5f9; --lk-card: #fff; --lk-input: #f8fafc; --lk-border: #e2e8f0;
  --lk-text: #0f172a; --lk-muted: #64748b; --lk-accent: #2563eb; --lk-accent-hover: #1d4ed8;
  --lk-danger: #dc2626;
}
[data-theme="dark"] .app-lock {
  --lk-bg: #0f172a; --lk-card: #1e293b; --lk-input: #0f172a; --lk-border: #334155;
  --lk-text: #f1f5f9; --lk-muted: #94a3b8; --lk-accent: #3b82f6; --lk-accent-hover: #2563eb;
  --lk-danger: #ef4444;
}

/* z-index 1000001: acima de TUDO do app — boot screen (1000000), loading global (999999),
   overlay do Catalogador (5000) e qualquer MudDialog (1300). E ABAIXO do
   #components-reconnect-modal (2147483647) de propósito: se o circuito cair com a tela
   bloqueada, o aviso de reconexão precisa aparecer por cima desta. */
.app-lock {
  position: fixed; inset: 0; z-index: 1000001;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 24px;
  background: var(--lk-bg); color: var(--lk-text);
  font-family: 'DM Sans', 'Roboto', 'Segoe UI', sans-serif;
}
.app-lock__brand {
  position: absolute; top: 28px; left: 32px;
  display: flex; align-items: center; gap: 10px;
}
.app-lock__brand-logo { width: 30px; height: 30px; object-fit: contain; }
.app-lock__brand-nome { font-size: 15px; font-weight: 700; color: var(--lk-accent); letter-spacing: .2px; }

.app-lock__card {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 32px; border-radius: 16px;
  background: var(--lk-card); border: 1px solid var(--lk-border);
  box-shadow: 0 10px 40px rgba(0,0,0,.10);
}
.app-lock__avatar {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lk-accent); color: #fff;
  font-size: 30px; font-weight: 700; letter-spacing: 1px;
  user-select: none;
  overflow: hidden; /* recorta a foto no círculo */
}
/* Foto do usuário: preenche o círculo (a fonte já é reencodada quadrada; object-fit cobre o resto). */
.app-lock__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-lock__nome { margin-top: 16px; font-size: 21px; font-weight: 500; text-align: center; }
.app-lock__msg {
  margin: 12px 0 24px; text-align: center; font-size: 14px; line-height: 1.5;
  color: var(--lk-muted); max-width: 340px;
}
.app-lock__form { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 16px; }

/* Fora da tela, mas ainda focável pelo gerenciador de senha (display:none o esconderia dele
   também, e aí ele não ofereceria preenchimento). */
.app-lock__hidden-user {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.app-lock__campo { position: relative; display: flex; align-items: center; }
.app-lock__input {
  width: 100%; padding: 10px 40px 10px 2px;
  background: transparent; color: var(--lk-text);
  border: 0; border-bottom: 2px solid var(--lk-border);
  font-size: 15px; font-family: inherit; outline: none;
  transition: border-color .15s;
}
.app-lock__input:focus { border-bottom-color: var(--lk-accent); }
.app-lock__input:disabled { opacity: .6; }
.app-lock__olho {
  position: absolute; right: 4px;
  display: flex; padding: 4px; border: 0; background: none; cursor: pointer;
  color: var(--lk-muted); border-radius: 4px;
}
.app-lock__olho:hover { color: var(--lk-accent); }

.app-lock__erro {
  font-size: 13px; line-height: 1.4; text-align: center; color: var(--lk-danger);
}
.app-lock__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center; min-width: 150px; padding: 11px 28px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lk-accent); color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit;
  transition: background .12s, opacity .12s;
}
.app-lock__btn:hover:not(:disabled) { background: var(--lk-accent-hover); }
.app-lock__btn:disabled { opacity: .5; cursor: default; }
.app-lock__spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: app-lock-spin .7s linear infinite;
}
@keyframes app-lock-spin { to { transform: rotate(360deg); } }

.app-lock__sair {
  margin-top: 28px; padding: 6px 10px; border: 0; background: none; cursor: pointer;
  color: var(--lk-muted); font-size: 13px; font-family: inherit; border-radius: 6px;
}
.app-lock__sair:hover:not(:disabled) { color: var(--lk-accent); }
.app-lock__sair strong { color: var(--lk-accent); }
.app-lock__sair:disabled { opacity: .5; cursor: default; }

@media (max-width: 520px) {
  .app-lock__brand { position: static; }
  .app-lock__card { padding: 32px 20px; }
}

/* ---- Aviso de inatividade (countdown) --------------------------------------------------
   DOM puro, fora do Blazor: o countdown roda inteiro no JS (ver protec.idle), sem nenhuma
   mensagem SignalR por tick. Markup estático no App.razor. */
.protec-idle-warning { display: none; }
.protec-idle-warning.is-visible {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: fixed; z-index: 1000001; right: 24px; bottom: 24px;
  max-width: 340px; padding: 20px 24px; border-radius: 14px;
  background: #1b1e2b; color: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  font-family: 'DM Sans', 'Roboto', 'Segoe UI', sans-serif;
}
.protec-idle-warning__msg { margin: 0; font-size: 14px; line-height: 1.5; text-align: center; }
.protec-idle-warning__contador { font-weight: 700; color: #7DA3F5; }
.protec-idle-warning__btn {
  border: 0; border-radius: 8px; padding: 9px 22px; cursor: pointer;
  background: #2F5FE0; color: #fff; font-size: 13px; font-weight: 700; font-family: inherit;
}
.protec-idle-warning__btn:hover { background: #2650c4; }

/* Bloqueio por inatividade: o conteúdo do app continua montado atrás (é o ponto — preservar os
   módulos abertos), então o blur é o que de fato entrega a privacidade. Sem ele, "bloquear" só
   mostraria a tela com os dados legíveis por baixo. Não é fronteira de segurança: o circuito
   segue autenticado e quem tiver DevTools remove o overlay — ver BloqueioInatividade.razor.

   Os três seletores são necessários porque NEM TUDO vive dentro do .mud-layout: os painéis
   flutuantes (Chat/MagIA) e o overlay do Catalogador são irmãos dele no DOM (ver MainLayout.razor
   e protec.showOverlay). Blurar só o .mud-layout deixaria uma conversa de chat aberta perfeitamente
   legível atrás de uma tela supostamente bloqueada. */
.app-lock--inativo { background: var(--lk-bg); }
body.protec-bloqueado .mud-layout,
body.protec-bloqueado .module-modal-backdrop,
body.protec-bloqueado #module-overlay {
  filter: blur(12px); pointer-events: none; user-select: none;
}

/* ===== Modal "Aniversariantes do mês" (HomeDashboard) ===================================
   Foto do segurado na grade — mesma ideia do .sr-foto do SeguradoResumoDialog (img por cima,
   fallback embaixo revelado pelo onerror quando o /api/foto devolve 404), só que no tamanho de
   uma célula de tabela. */
.anv-foto {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mud-palette-action-default-hover);
}
.anv-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anv-foto-fallback {
  position: absolute; inset: 0; place-items: center;
  background: var(--mud-palette-primary);
  color: #FFFFFF;
}
.anv-foto-fallback .mud-icon-root { font-size: 18px; }

/* Contagem à esquerda do footer, antes dos botões de exportação (mesmo papel da
   .cad-logs-contagem no modal de Logs do Protec.Cadastros). */
.anv-contagem { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

/* ===== Onboarding — tour guiado do Dashboard (OnboardingTour.razor + protec.onboarding) ======
   Roda DEPOIS do circuito estar de pé (nunca coexiste com o boot screen/reconnect modal), então
   usa var(--mud-palette-*) igual ao resto do app pós-circuito — sem o problema de cores fixas que
   o reconnect modal tem. z-index 1700+: acima de Tooltip (1600, o mais alto dos overrides do
   MudBlazor em MainLayout.razor), abaixo do .app-lock (1000001) — os dois nunca aparecem juntos. */

/* bottom soma --app-chrome-size (56px, mesma var do .home-footer sticky do Dashboard) + 16px de
   respiro — sem isso o botão cai dentro da faixa do rodapé "© ... Última compilação ...". Pílula
   com ícone + texto (não HelpOutline sozinho): esse ícone já é "Ajuda e Suporte" no rodapé da
   sidebar, e sem o texto este botão ficava parecendo duplicata dele.
   z-index 1340: ACIMA do conteúdo do dashboard (topbar 1200, quina 1250) e ABAIXO de toda a faixa
   de modais/painéis — máscara do Chat/MagIA (.module-modal-backdrop 1350), modais de confirmação
   (.cad-modal-overlay 1500 / --top 1600) e o modal de foto do Perfil. Estava em 1650 (acima dessa
   faixa) e por isso vazava na frente de qualquer modal aberto no dashboard. Ele só precisa flutuar
   sobre o dashboard nu; qualquer overlay deve cobri-lo. O painel Chat/MagIA (estado persistente)
   ainda é removido do DOM pelo gate em OnboardingTour.razor — o z-index cobre os modais transitórios. */
.onboarding-help-btn {
  position: fixed; right: 24px; bottom: calc(var(--app-chrome-size) + 16px); z-index: 1340;
  height: 40px; padding: 0 16px 0 14px; border-radius: 999px; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  background: var(--mud-palette-primary); color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.onboarding-help-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.3); }

/* ---- "Palco": a tela de abertura do tour ---------------------------------------------------
   Tela cheia de propósito, não um card centralizado: a primeira versão era um card de 420px
   chapado e o usuário classificou como "sem graça, pequena". As camadas abaixo reusam as DUAS
   assinaturas visuais que o app já tem — o dot-grid mascarado do .module-empty e a gradiente de
   marca (azul→violeta) + pulse do .home-empty__badge — em vez de inventar um estilo novo. */
/* Véu de modal: levemente escuro e translúcido, deixando o dashboard entrever por trás — é o que
   mantém o tom "delicado" e o contexto do sistema visível.
   NÃO escurecer isto pra ganhar contraste de texto: tentei (.96 opaco, e antes uma vinheta radial
   por cima) e nos dois casos a tela virou um bloco pesado, perdendo justamente a leveza. O
   contraste do texto se resolve NO TEXTO (ver .onb-palco__titulo/__sub), não no fundo. */
.onb-palco {
  position: fixed; inset: 0; z-index: 1701; overflow: hidden;
  display: grid; place-items: center; padding: 24px;
  background: rgba(10,14,22,.72); backdrop-filter: blur(6px);
  animation: onboarding-fade-in .25s ease;
}
/* Textura: mesmo dot-grid mascarado do .module-empty (ver acima), só que sobre o fundo escuro —
   por isso a "tinta" é branca fixa, não var(--mud-palette-text-primary): sobre o backdrop escuro,
   a variável do tema CLARO renderizaria pontos pretos invisíveis. */
.onb-palco__textura {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 45%, #000 0%, transparent 75%);
          mask-image: radial-gradient(80% 60% at 50% 45%, #000 0%, transparent 75%);
}
/* Watermark centralizado (único asset do projeto). Opacidade baixa: ele é atmosfera atrás do
   conteúdo, e é justamente por passar por trás do texto que a legibilidade depende do
   text-shadow do título/subtítulo abaixo. */
.onb-palco__marca {
  position: absolute; width: 520px; max-width: 80vw; opacity: .06; pointer-events: none;
  animation: onb-palco-flutuar 12s ease-in-out infinite;
}
.onb-palco__conteudo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 720px;
}
/* Cada filho entra em cascata (onb-palco-subir), com delay crescente. Os chips têm delay próprio
   inline (ver OnboardingTour.razor) porque também escalonam entre si. */
.onb-palco__conteudo > * { opacity: 0; animation: onb-palco-subir .5s cubic-bezier(.2,.8,.2,1) forwards; }
.onb-palco__titulo { animation-delay: .06s; }
.onb-palco__sub { animation-delay: .14s; }
/* O container dos chips não entra sozinho — cada chip tem a sua própria entrada escalonada. */
.onb-palco__chips { opacity: 1; animation: none; }
/* Depois do último chip (220ms + 6×55ms = 550ms), pra os botões fecharem a cascata em vez de
   aparecerem no meio dela. Se a lista de passos crescer, este valor acompanha. */
.onb-palco__acoes { animation-delay: .68s; }

.onb-palco__titulo {
  margin: 0 0 12px; font-size: 40px; font-weight: 700; line-height: 1.15;
  color: #fff; letter-spacing: -.5px;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(6,10,18,.75);
}
/* AQUI é onde a legibilidade se resolve, não no fundo (o véu precisa continuar leve).
   Três coisas juntas: branco quase pleno (.92, era .72 — o cinza claro sumia sobre o véu),
   text-shadow largo e suave (funciona como um halo escuro que separa a letra do watermark e da
   textura sem endurecer o desenho da fonte) e text-wrap:balance, que distribui as linhas em
   blocos parecidos em vez de deixar palavras órfãs na última (era "cada um." sozinho). */
.onb-palco__sub {
  margin: 0 0 32px; font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,.92); max-width: 34rem;
  text-wrap: balance;
  text-shadow: 0 1px 10px rgba(6,10,18,.8);
}

/* Prévia das 4 paradas — mesmo vocabulário dos .home-fav-card (raio 14, chip de ícone 40px/raio
   10), traduzido pro fundo escuro do palco. */
.onb-palco__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 34px; }
/* 140px, não 116: com 7 paradas, a quebra dentro dos 720px do .onb-palco__conteudo cai em 5+2
   com chips de 116px (desequilibrado) e em 4+3 com 140px — 5 chips de 140 somam 748px e já não
   cabem, o que força a quebra no ponto certo. Títulos longos ("Aniversariantes do mês") também
   respiram melhor; a linha do flex iguala a altura de todos. */
.onb-palco__chip {
  opacity: 0; animation: onb-palco-subir .5s cubic-bezier(.2,.8,.2,1) forwards;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 140px; padding: 16px 10px; border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.onb-palco__chip-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
  color: #fff;
}
.onb-palco__chip-txt { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); }

.onb-palco__acoes { display: flex; align-items: center; justify-content: center; gap: 14px; }

.onboarding-btn {
  border: 0; border-radius: 10px; padding: 10px 20px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  transition: background .12s ease, opacity .12s ease, transform .15s ease, box-shadow .15s ease;
}
.onboarding-btn--primario { background: var(--mud-palette-primary); color: #fff; }
.onboarding-btn--primario:hover { opacity: .9; }
/* CTA do palco: maior e com o glow tingido de primary (mesmo valor do .home-empty__badge). */
.onboarding-btn--grande {
  padding: 14px 32px; font-size: 15px; border-radius: 12px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}
.onboarding-btn--grande:hover { transform: translateY(-2px); box-shadow: 0 14px 32px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); }
.onboarding-btn--ghost {
  background: transparent; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary);
}
.onboarding-btn--ghost:hover { background: var(--mud-palette-action-default-hover); }
/* No palco (fundo escuro nos dois temas) o "Agora não" precisa de contraste próprio — as vars de
   texto do tema claro sumiriam aqui. */
.onb-palco .onboarding-btn--texto { background: transparent; color: rgba(255,255,255,.62); }
.onb-palco .onboarding-btn--texto:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Estreito: tipografia menor e chips compactos, 3 por linha. */
@media (max-width: 720px) {
  .onb-palco__titulo { font-size: 28px; }
  .onb-palco__sub { font-size: 14px; margin-bottom: 22px; }
  .onb-palco__chips { max-width: 340px; margin-bottom: 24px; }
  .onb-palco__chip { width: 104px; padding: 12px 8px; gap: 6px; }
  .onb-palco__chip-ico { width: 34px; height: 34px; border-radius: 9px; }
  .onb-palco__chip-txt { font-size: 11.5px; }
}
/* Baixo: aqui a restrição é altura, não largura. Com 7 paradas os chips viram 3+ fileiras e o
   palco estoura a tela (ele não rola). Chip é PRÉVIA, não conteúdo essencial — some antes do
   texto e dos botões, que são o que a pessoa precisa pra decidir. */
@media (max-height: 640px) {
  .onb-palco__titulo { font-size: 26px; }
  .onb-palco__sub { font-size: 14px; margin-bottom: 20px; }
  .onb-palco__chips { display: none; }
}

/* Spotlight (criado/posicionado 100% em JS — ver protec.onboarding em protec-bridge.js).
   Técnica de 4 retângulos: cada .protec-onb-zona cobre uma faixa AO REDOR do alvo; o próprio
   alvo nunca é coberto por nenhum elemento, então continua visível sem precisar de máscara/
   clip-path. O anel só decora (pointer-events:none) — quem bloqueia clique fora do alvo são as
   zonas (pointer-events:auto). */
#protec-onboarding { position: fixed; inset: 0; z-index: 1700; pointer-events: none; }
/* Bloqueio de clique da tela inteira durante o tour (inclusive sobre o elemento destacado) —
   transparente, só captura o ponteiro. Fica abaixo do card (.protec-onb-card, z 1701), que
   permanece clicável. Ver onboardingCriarDom em protec-bridge.js. */
.protec-onb-bloqueio { position: fixed; inset: 0; pointer-events: auto; }
.protec-onb-zona {
  position: fixed; background: rgba(10,14,22,.6); pointer-events: auto;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
/* Anel: respiração contínua (mesma cadência de 2.6s do home-empty-pulse, aplicada ao box-shadow
   colorido que ele já tinha) — o destaque "vive" em vez de ficar estático. */
.protec-onb-anel {
  position: fixed; pointer-events: none; border-radius: 10px;
  border: 2px solid var(--mud-palette-primary);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  animation: protec-onb-respirar 2.6s ease-in-out infinite;
}
/* Número do passo, "montado" sobre a quina superior-esquerda do anel. Mesma gradiente de marca
   do badge do palco, pra os dois momentos do tour falarem a mesma língua visual. */
.protec-onb-num {
  position: fixed; pointer-events: none; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 55%, #7C3AED));
  color: #fff; font-size: 12.5px; font-weight: 700; font-family: inherit;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: top .25s ease, left .25s ease;
}
/* 340px (era 300): com o rodapé de duas linhas, os ~230px de bolinhas+Voltar+Próximo cabem nos
   304px úteis (340 − 36 de padding) com folga. Ver o comentário em onboardingRenderCard. */
.protec-onb-card {
  position: fixed; pointer-events: auto; z-index: 1701;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
  border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
  padding: 18px 18px 14px; font-family: inherit;
  opacity: 0; transform: translateY(6px);
  transition: top .25s ease, left .25s ease;
}
.protec-onb-card.protec-onb-card--anim { animation: onboarding-card-in .22s ease forwards; }

/* Seta conectora: quadrado de 12px girado 45° na cor do card, "encaixado" na borda voltada pro
   elemento destacado. --seta-pos é o deslocamento ao longo dessa borda, calculado no JS a partir
   da posição FINAL do card (ver onboardingPosicionarCard) — é isso que a mantém apontando pro
   alvo mesmo quando o card é empurrado pelas bordas da viewport. */
.protec-onb-card::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--mud-palette-surface); transform: rotate(45deg);
}
.protec-onb-card--seta-esq::after  { left: -6px; top: var(--seta-pos, 50%); margin-top: -6px; }
.protec-onb-card--seta-dir::after  { right: -6px; top: var(--seta-pos, 50%); margin-top: -6px; }
.protec-onb-card--seta-topo::after { top: -6px; left: var(--seta-pos, 50%); margin-left: -6px; }
.protec-onb-card--seta-base::after { bottom: -6px; left: var(--seta-pos, 50%); margin-left: -6px; }
.protec-onb-card__fechar {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: transparent; color: var(--mud-palette-text-secondary);
  font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.protec-onb-card__fechar:hover { background: var(--mud-palette-action-default-hover); }
.protec-onb-card__titulo { font-size: 15.5px; font-weight: 700; padding-right: 20px; margin-bottom: 6px; }
.protec-onb-card__desc { font-size: 13.5px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.protec-onb-card__rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.protec-onb-card__acoes { display: flex; align-items: center; gap: 8px; }

/* Bolinhas de progresso (substituem o texto "1 de 4"): clicáveis, vão direto ao passo. A ativa
   vira pílula alongada — sinaliza a posição sem precisar de número. */
.protec-onb-dots { display: flex; align-items: center; gap: 6px; }
.protec-onb-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
  transition: width .2s ease, background .2s ease;
}
.protec-onb-dot:hover { background: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); }
.protec-onb-dot--ativo { width: 20px; background: var(--mud-palette-primary); }

.protec-onb-btn {
  border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; font-family: inherit; white-space: nowrap;
  transition: background .12s ease, opacity .12s ease;
}
.protec-onb-btn--primario { background: var(--mud-palette-primary); color: #fff; }
.protec-onb-btn--primario:hover { opacity: .9; }
.protec-onb-btn--ghost { background: transparent; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.protec-onb-btn--ghost:hover { background: var(--mud-palette-action-default-hover); }
.protec-onb-btn--texto { background: transparent; color: var(--mud-palette-text-secondary); }
.protec-onb-btn--texto:hover { color: var(--mud-palette-text-primary); }
/* 2ª linha do rodapé: "Pular tutorial" sozinho, discreto e alinhado à esquerda — tirá-lo do grupo
   de ações é o que devolve espaço pro "Próximo" (ver onboardingRenderCard).
   PRECISA vir depois de .protec-onb-btn: mesma especificidade (0,1,0), então quem estiver por
   último no arquivo vence — declarado antes, o padding 7px/14px do botão anulava o 4px/0 daqui e
   o "Pular" saía desalinhado da borda esquerda do card. */
.protec-onb-card__pular {
  display: block; margin-top: 6px; padding: 4px 0; font-size: 11.5px; font-weight: 600;
}

/* ---- Celebração de encerramento (só ao CONCLUIR o tour) ------------------------------------
   Sem backdrop escuro de propósito: o tour acabou, o sistema já está liberado — escurecer de novo
   pareceria mais um bloqueio. Só o card + o confete, e ambos somem sozinhos. */
.protec-onb-fim {
  position: fixed; inset: 0; z-index: 1702; pointer-events: none; overflow: hidden;
}
.protec-onb-fim__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: auto; width: 340px; max-width: calc(100vw - 32px); text-align: center;
  background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
  padding: 26px 24px 20px;
  animation: onboarding-pop-in .3s cubic-bezier(.2,.8,.2,1);
}
.protec-onb-fim__titulo { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.protec-onb-fim__txt {
  font-size: 13px; line-height: 1.55; color: var(--mud-palette-text-secondary); margin-bottom: 18px;
}
.protec-onb-confete { position: absolute; inset: 0; pointer-events: none; }
/* Cada partícula cai da borda superior girando. left/cor/delay/duração vêm inline do JS — sem
   isso as 40 cairiam juntas, como uma cortina. */
.protec-onb-confete span {
  position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation-name: protec-onb-confete-cair;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes protec-onb-confete-cair {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(102vh) rotate(680deg); }
}

@keyframes onboarding-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboarding-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes onboarding-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes onb-palco-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
/* Flutuação do watermark. Só translateY puro: o logo é centralizado pelo place-items:center do
   .onb-palco (não por transform), então a animação pode mexer em transform à vontade sem
   desmanchar o posicionamento. */
@keyframes onb-palco-flutuar {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}
/* Respiração do anel — mesma cadência do home-empty-pulse, só que com o halo mais aberto (o anel
   circunda um elemento inteiro, não um badge de 68px). */
@keyframes protec-onb-respirar {
  0%, 100% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent),
                0 0 28px 4px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent),
                0 0 38px 6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
  }
}

/* =============================================================================================
   ATIVOS COPIADOS DE src/Protec.Cadastros/wwwroot/css/app.css
   ---------------------------------------------------------------------------------------------
   Usados pelo modal de Perfil do usuário (PerfilDialog/AlterarSenhaDialog), que reaproveita a
   MESMA experiência do cadastro de Pessoa: modal, botões, foto com ações sobrepostas, tooltip "?".

   Por que copiado e não compartilhado: Orchestrator e Protec.Cadastros são APLICAÇÕES separadas e
   o Protec.Shared é classlib pura (não serve asset estático) — mesmo arranjo já documentado no
   CLAUDE.md pro foco.js e o module-bridge.js. Mexeu num, mexe no outro.

   As regras abaixo são VERBATIM da origem; o que torna isso possível é o bloco de tokens logo a
   seguir, que já existe lá e é ele próprio um alias sobre --mud-palette-* (ou seja: tema claro/
   escuro continua funcionando sozinho, sem reescrever declaração por declaração).
   ============================================================================================= */
:root {
    --primary: var(--mud-palette-primary);
    --primary-soft: rgba(47,95,224,.10);
    --navy: var(--mud-palette-drawer-background, #16223C);
    --bg: var(--mud-palette-background, #f6f6f4);
    --surface: var(--mud-palette-surface, #fff);
    --text: var(--mud-palette-text-primary);
    --text-2: var(--mud-palette-text-secondary);
    --border: var(--mud-palette-lines-default, #E6E9EF);
    --danger: var(--mud-palette-error, #DC2626);
    --danger-soft: rgba(220,38,38,.10);
    --warning: var(--mud-palette-warning, #B45309);
    --warning-soft: rgba(217,119,6,.12);
    --elev-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --elev-2: 0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
    --elev-3: 0 18px 50px rgba(16,24,40,.22);
}

/* ---- Botões ---- */
.cad-btn { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; background: var(--navy); color: #fff; transition: filter .12s; box-shadow: var(--elev-1); }
.cad-btn:hover { filter: brightness(1.18); }
.cad-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.cad-btn:disabled:hover { filter: none; }
.cad-btn--primary { background: var(--primary); }
.cad-btn--ghost { background: transparent; color: var(--text-2); box-shadow: none; }
.cad-btn--ghost:hover { background: var(--bg); filter: none; }
.cad-btn--danger { background: transparent; color: var(--danger); box-shadow: none; }
.cad-btn--danger:hover { background: var(--danger-soft); filter: none; }
.cad-btn--sm { padding: 5px 12px; font-size: 12px; box-shadow: none; }
.cad-btn--sm .ic { width: 14px; height: 14px; }

/* ---- Modal ---- */
.cad-modal-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.42); display: flex; align-items: center; justify-content: center; z-index: 1500; padding: 20px; }
.cad-modal-overlay--top { z-index: 1600; }
.cad-modal { background: var(--surface); border-radius: 14px; box-shadow: var(--elev-3); width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; }
.cad-modal__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; }
.cad-modal__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cad-modal__head h2 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; }
.cad-modal__close { border: none; background: transparent; color: var(--text-2); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cad-modal__close:hover { background: var(--bg); }
.cad-modal__body { padding: 12px 20px 4px; }
.cad-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }

/* ---- Tooltip "?" (bolha flutuante montada no <body> — ver o bloco no fim de protec-bridge.js) ---- */
.cad-help { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; text-transform: none; flex-shrink: 0; }
.cad-help:hover { border-color: var(--primary); color: var(--primary); }
.cad-tip-float {
    position: fixed; z-index: 9999; max-width: 250px; pointer-events: none; display: none;
    background: var(--navy); color: #fff; padding: 8px 11px; border-radius: 8px;
    font-size: 11px; font-weight: 500; line-height: 1.45; text-align: left; box-shadow: var(--elev-2);
}
.cad-tip-float::after { content: ""; position: absolute; left: var(--seta-x, 50%); transform: translateX(-50%); border: 6px solid transparent; }
.cad-tip-float:not(.is-below)::after { top: 100%; border-top-color: var(--navy); }
.cad-tip-float.is-below::after { bottom: 100%; border-bottom-color: var(--navy); }

/* ---- Foto: avatar com ações sobrepostas + modal de captura/recorte ---- */
.cad-det__avatar {
    position: relative; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    box-shadow: var(--elev-1); overflow: visible; margin-bottom: 8px;
}
.cad-det__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #dbe4f3; display: block; }
.cad-det__avatar-acoes {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 4px;
}
.cad-avatar-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
    border: 1.5px solid var(--surface); border-radius: 50%; background: var(--primary); color: #fff;
    cursor: pointer; box-shadow: var(--elev-1); transition: filter .12s;
}
.cad-avatar-btn:hover { filter: brightness(1.15); }
.cad-avatar-btn--danger { background: var(--danger); }
.cad-avatar-btn .ic { width: 11px; height: 11px; }

.cad-foto-modal { max-width: 460px; }
/* Ações centralizadas (Capturar/Aplicar na mesma linha do Cancelar) — só neste modal; os demais
   modais de confirmação seguem com o rodapé alinhado à direita (.cad-modal__foot padrão). */
.cad-foto-modal .cad-modal__foot { justify-content: center; }
.cad-foto-ampliar { max-width: 480px; }
.cad-foto-origem { display: flex; gap: 10px; justify-content: center; padding: 24px 0; }
.cad-foto-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cad-foto-aspecto { display: flex; gap: 6px; }
.cad-chip {
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
    border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cad-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cad-foto-stage {
    position: relative; width: 380px; height: 380px; max-width: 100%; margin: 0 auto;
    border-radius: 10px; overflow: hidden; background: #111;
}
.cad-foto-stage video, .cad-foto-stage canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.cad-foto-cropbox {
    position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 2000px rgba(0,0,0,.45);
    cursor: move; touch-action: none;
}
.cad-foto-cropbox__handle {
    position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--primary); cursor: nwse-resize; touch-action: none;
}

/* ---- Modal de Perfil (PerfilDialog/AlterarSenhaDialog) ----
   Só o que é próprio destas telas; modal, botões, avatar e tooltip vêm do bloco copiado acima. */
.perfil-topo { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
/* Maior que o avatar do cadastro (64px): aqui a foto é o assunto da tela, não um adorno da linha. */
.perfil-avatar { width: 110px; height: 110px; margin-bottom: 14px; }
.perfil-cpf {
  font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: .3px;
}

.perfil-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.perfil-campo label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px;
}
.perfil-campo input {
  font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color .12s, background .12s;
}
.perfil-campo input:focus { outline: none; border-color: var(--primary); }
/* Campo travado no modo visualização: sem cara de "quebrado", só de não-editável. */
.perfil-campo input:disabled { background: var(--bg); color: var(--text); opacity: 1; cursor: default; }

.perfil-senha { display: flex; justify-content: flex-start; margin: 18px 0 4px; }

.cad-edit-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
}

/* Checklist de requisitos da senha — a lista vem de SenhaPolitica.Requisitos (C#), aqui é só a
   apresentação: cinza enquanto não cumpre, verde quando cumpre. */
.senha-check { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.senha-check li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.senha-check li .mud-icon-root { font-size: 15px; }
.senha-check li.is-ok { color: var(--mud-palette-success, #16A34A); }

/* Aviso de Caps Lock (js/capslock.js) — nasce escondido; o JS mostra/esconde.
   CORES FIXAS de propósito, não var(--mud-palette-*): este aviso aparece também na TELA DE
   BLOQUEIO, que tem seu próprio conjunto de tokens (--lk-*) justamente por poder renderizar antes
   do MudThemeProvider — as variáveis da paleta podem não existir ali. Âmbar (atenção), não
   vermelho: não é erro, é um alerta ANTES de errar a senha. */
.caps-aviso {
  display: none; align-items: center; gap: 7px;
  margin-top: 7px; padding: 7px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; font-family: inherit;
  background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.35); color: #B45309;
}
.caps-aviso i { font-size: 11px; }
/* Na tela de bloqueio o fundo é escuro — o âmbar escuro do tema claro sumiria ali. */
.app-lock .caps-aviso { background: rgba(240,160,32,.14); border-color: rgba(240,160,32,.4); color: #F0A020; }

/* .cad-icon-btn / .cad-field-hint — usados pelo modal de foto do Perfil (copiados do Cadastros
   junto com o restante do bloco .cad-*). Ficaram de fora da 1ª cópia. */
.cad-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.cad-icon-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.cad-icon-btn .mud-icon-root { font-size: 16px; }
.cad-field-hint { font-size: 11.5px; color: var(--text-2); margin-top: -2px; }

/* Badge de "não lidos" no item Suporte da sidebar (modo expandido). */
.sup-nav-item { display: inline-flex; align-items: center; }
.sup-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }

/* ===================================================================================
   ZEBRA STRIPING — padrão de TODA tabela do sistema (ver CLAUDE.md, seção "Tabelas").
   Cor agnóstica de tema: lâmina do próprio --text sobre transparente (escurece no claro, clareia
   no escuro) — não depende de token de superfície, então vale nos 4 sistemas de token do projeto.
   Esta cópia existe porque a CASCA não referencia a RCL Protec.Modulo.Base (mesmo arranjo já
   documentado para foco.js): quem mexer aqui, mexa também no app.css dos módulos.
   As MudDataGrid/MudTable NÃO entram aqui — nelas usa-se Striped="true" (o CSS :nth-child não
   funciona com Virtualize).
   =================================================================================== */
.cr-cmp tbody tr:nth-child(even) td,
.cgs-tab tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--mud-palette-text-primary) 3.5%, transparent); }

/* ===================================================================================
   ARQUIVOS GERADOS (ArquivosGeradosDialog) — histórico do que o usuário emitiu na empresa.
   Visual espelhado do Catalogador (cards com selo de extensão + alternativa em tabela).

   Os tokens ficam ESCOPADOS em .arqger, e não no :root: o Catalogador define --surface-2/-3,
   --text-3, --accent* e --radius* que a casca NÃO tem (aqui os nomes são alias de --mud-palette-*).
   Declarando só dentro desta tela, o CSS portado funciona sem vazar nada pro resto do shell —
   e como os valores derivam do MudBlazor, o tema escuro acompanha sozinho, sem classe .dark.
   =================================================================================== */
.arqger {
    --surface-2: var(--mud-palette-background-gray, #f5f7fb);
    --surface-3: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    --text-3: var(--mud-palette-text-disabled, #7d8698);
    --accent: var(--mud-palette-primary, #2F5FE0);
    --accent-soft: var(--mud-palette-primary-hover, rgba(47,95,224,.10));
    --border-strong: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    display: flex;
    flex-direction: column;
    /* Altura FIXA (não max-height): sem isso o modal cresce e encolhe conforme o filtro muda o
       número de cards, e a barra de filtros "pula" a cada tecla digitada. */
    height: min(760px, 92vh);
    max-height: none;
    /* Anula o `overflow-y:auto` do .cad-modal base: aqui quem rola é só o .arqger-body. Sem isto
       ficariam DUAS barras de rolagem, e a de fora levaria embora a barra de filtros e o rodapé. */
    overflow: hidden;
}
.arqger .cad-modal__head { flex: none; }

.arqger-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.arqger-busca { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; height: 36px; flex: 1 1 260px; min-width: 200px; color: var(--text-3); }
.arqger-busca input { border: 0; background: transparent; outline: 0; color: var(--text); font-size: 13px; width: 100%; font-family: inherit; }
.arqger-busca:focus-within { border-color: var(--accent); }
.arqger-x { border: 0; background: transparent; display: grid; place-items: center; padding: 2px; border-radius: 6px; color: var(--text-3); cursor: pointer; }
.arqger-x:hover { background: var(--surface-3); color: var(--text); }
.arqger-sel { height: 36px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); background: var(--surface); padding: 0 10px; border-radius: 9px; outline: 0; cursor: pointer; font-family: inherit; }
.arqger-toggle { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.arqger-toggle button { border: 0; background: var(--surface); color: var(--text-3); padding: 7px 9px; display: grid; place-items: center; cursor: pointer; }
.arqger-toggle button.on { background: var(--accent-soft); color: var(--accent); }

/* flex:1 + min-height:0 — sem o min-height o corpo não encolhe e a rolagem vaza pro modal inteiro,
   levando junto a barra de filtros e o rodapé. */
.arqger-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.arqger-loading { display: grid; place-items: center; min-height: 260px; }
.arqger-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 280px; color: var(--text-3); text-align: center; }
.arqger-empty b { color: var(--text); font-size: 15px; }

.arqger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.arqger-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: .15s; }
.arqger-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 10px 24px -12px rgba(20,28,54,.35); }
.arqger-thumb { height: 96px; display: grid; place-items: center; position: relative; }
.arqger-ext { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; color: #fff; }
.arqger-meta { padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); }
.arqger-nome { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
.arqger-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.arqger-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.arqger-chip--tipo { background: var(--surface-3); color: var(--text-2); }
.arqger-chip--legado { background: var(--surface-3); color: var(--text-3); font-style: italic; }
/* MagIA: cor própria (roxo) e não a de acento — o ponto do selo é distinguir origem da máquina
   num relance, e reusar a cor primária o faria parecer só mais uma etiqueta de módulo. */
.arqger-chip--ia { background: rgba(124,58,237,.12); color: #7C3AED; display: inline-flex; align-items: center; gap: 4px; }
/* Os filtros podem ser longos ("Aba: Meus · Situação: ... · Ordenado por: ..."); uma linha só com
   reticências, e o texto inteiro no title. */
.arqger-filtros { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arqger-sub { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.arqger-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.arqger-tab th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); text-align: left; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 700; }
.arqger-tab td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2); vertical-align: middle; }
.arqger-tab tr:last-child td { border-bottom: 0; }
.arqger-fcell { display: flex; align-items: center; gap: 11px; color: var(--text); font-weight: 600; }
.arqger-fileico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.arqger-tab .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.arqger-tdfiltros { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-size: 12px; }
.arqger-baixar { color: var(--text-3); display: inline-grid; place-items: center; }
.arqger-baixar:hover { color: var(--accent); }

/* Linha da lista = link, igual ao card da grade.
   A âncora é ESTICADA sobre a linha inteira (o `<tr>` é o bloco de contenção), e não um @onclick:
   assim segue sendo link de verdade — Ctrl+clique/clique do meio/salvar-como funcionam — e não
   depende de um window.open disparado DEPOIS do round-trip do circuito, que o navegador pode
   barrar como popup por já não haver gesto do usuário ativo.
   `.arqger-acima` é o escape: quem precisa receber o próprio clique (o ícone de baixar) ou o
   próprio hover (o texto do filtro, cuja elipse só se lê pelo title) sobe uma camada. São o
   ELEMENTO e não a célula de propósito — levantando o `<td>` inteiro, o vazio da coluna virava
   zona morta no meio da linha. */
.arqger-tab tbody tr { position: relative; }
.arqger-linhalink { position: absolute; inset: 0; z-index: 0; }
.arqger-acima { position: relative; z-index: 1; }

.arqger-foot { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }

/* Zebra + hover na tabela desta tela (ver a seção ZEBRA acima: pintar no MESMO nível do hover, e
   a ordem zebra < hover é o que faz o hover vencer). */
.arqger-tab tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--mud-palette-text-primary) 3.5%, transparent); }
.arqger-tab tbody tr:hover td { background: var(--surface-3); }