/* ============================================================
   DS-THEME.CSS — Design System CNI sobre o template MatDash
   Carregado APÓS styles.css do template para sobrescrever
   variáveis de cor e tipografia com os tokens do DS.
   ============================================================ */

/* ── Importa Inter (fonte padrão do sistema) ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Tokens de cor CNI (sobrescreve Blue_Theme do template) ─ */
:root {
  /* Brand CNI */
  --ds-brand-darkest:   #001457;
  --ds-brand-dark:      #003B8F;
  --ds-brand-medium:    #005BA5;
  --ds-brand-pure:      #008BD2;
  --ds-brand-light:     #4AB8F0;
  --ds-brand-lighter:   #91D4F8;
  --ds-brand-lightest:  #C3E9FC;
  --ds-brand-bg:        #EFFAFF;

  /* Neutras */
  --ds-neutral-darkest: #262626;
  --ds-neutral-dark:    #505050;
  --ds-neutral-medium:  #646464;
  --ds-neutral-light:   #A2A2A2;
  --ds-neutral-lighter: #C0C0C0;
  --ds-neutral-border:  #DFDFDF;
  --ds-neutral-bg:      #F6F6F6;
  --ds-bg:              #F6FBFF; /* Background color CNI (DS) */
  --ds-white:           #FFFFFF;

  /* Feedback */
  --ds-success:   #28BC00;
  --ds-error:     #FC4242;
  --ds-warning:   #FF9800;
  --ds-info:      #008BD2;

  /* Bootstrap overrides (substitui o Blue_Theme do template) */
  --bs-primary:          #005BA5;
  --bs-primary-rgb:      0, 91, 165;
  --bs-secondary:        #008BD2;
  --bs-secondary-rgb:    0, 139, 210;
  --bs-success:          #28BC00;
  --bs-danger:           #FC4242;
  --bs-warning:          #FF9800;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color:       #262626;
  --bs-body-bg:          #F6FBFF;

  /* Template-specific overrides */
  --sidebar-bg:         #001457;
  --topbar-bg:          #FFFFFF;
}

/* O MatDash define --bs-primary (indigo #635BFF) em
   [data-color-theme=Blue_Theme]:root, que vence o :root acima.
   Redefine na MESMA especificidade para o azul CNI valer em
   todos os componentes do template (pills, shadows, links…). */
[data-color-theme=Blue_Theme]:root {
  --bs-primary:           #005BA5;
  --bs-primary-rgb:       0, 91, 165;
  --bs-secondary:         #008BD2;
  --bs-secondary-rgb:     0, 139, 210;
  --bs-primary-bg-subtle: #EFFAFF;
}

/* ── Tipografia global ───────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--ds-bg) !important;
  color: var(--ds-neutral-darkest) !important;
}

/* Headings em bold 700 (padrão DS) */
h1, h2, h3, h4, h5, h6,
.card-title, .fw-semibold {
  font-weight: 700 !important;
}

/* Foco visível acessível (Highlight colors do DS) */
:focus-visible {
  outline: 2px solid var(--ds-neutral-medium) !important;
  outline-offset: 2px;
}

/* ============================================================
   SIDEBAR IN — rail escuro (marca) + painel claro (leitura)
   Rail 80px em navy CNI; painel expandido branco, com texto
   escuro, pill de ativo azul-claro e barra de acento.
   ============================================================ */

/* ── Rail (barra estreita de ícones) ─────────────────────────── */
.side-mini-panel {
  background-color: var(--ds-brand-darkest) !important;
}

.side-mini-panel .iconbar {
  background-color: var(--ds-brand-darkest) !important;
  border-right: 0;
}

.side-mini-panel .mini-nav {
  background-color: transparent !important;
}

/* Hambúrguer no topo do rail */
.side-mini-panel .sidebartoggler {
  color: rgba(255, 255, 255, 0.75) !important;
}
.side-mini-panel .sidebartoggler:hover {
  color: #FFFFFF !important;
}

/* Ícones de módulo */
.side-mini-panel .mini-nav .mini-nav-item > a {
  background-color: transparent !important;
}

.side-mini-panel .mini-nav .mini-nav-item > a iconify-icon {
  color: rgba(255, 255, 255, 0.72);
  font-size: 21px;
  transition: color 0.15s ease;
}

.side-mini-panel .mini-nav .mini-nav-item > a:hover iconify-icon {
  color: #FFFFFF;
}
.side-mini-panel .mini-nav .mini-nav-item > a:hover::before {
  background: rgba(255, 255, 255, 0.10);
}

.side-mini-panel .mini-nav .mini-nav-item.selected > a iconify-icon {
  color: #FFFFFF;
}
.side-mini-panel .mini-nav .mini-nav-item.selected > a::before {
  background: var(--ds-brand-pure);
  box-shadow: 0 4px 12px rgba(0, 139, 210, 0.35);
}

/* Divisor do rail */
.side-mini-panel .sidebar-divider {
  background: rgba(255, 255, 255, 0.16) !important;
  width: 36px;
  margin: 10px auto;
}

/* ── Painel expandido (fundo claro) ──────────────────────────── */
.side-mini-panel .sidebarmenu,
.side-mini-panel .sidebarmenu nav,
.side-mini-panel .sidebar-nav {
  background-color: #FFFFFF !important;
}

.side-mini-panel .sidebarmenu .sidebar-nav {
  border-right: 1px solid #E3ECF4;
  padding: 4px 14px 24px;
}

/* UX-2 item 7: páginas FORA do menu (perfil, meus chats e telas abertas por
   link) nascem recolhidas — só o rail de ícones, sem o painel branco vazio
   (não há módulo ativo) — e o conteúdo OCUPA a largura liberada.
   O rail continua vivo: clique no ícone ABRE o painel, que se comporta como
   nas páginas do menu — EMPURRA o conteúdo, não cobre (pedido do Tiago,
   27/07). Fecha no mesmo ícone ou clicando fora, devolvendo a largura.
   O painel não reposiciona nada: reusa o posicionamento do template
   (.nav-logo e .sidebar-nav já são absolutos em left:80px dentro do aside
   fixo), e por tabela herda o deslocamento do banner do Visualizar Como
   (o layout.js empurra o .side-mini-panel). */
.pagina-pessoal .side-mini-panel .sidebarmenu { display: none; }
.pagina-pessoal.painel-aberto .side-mini-panel .sidebarmenu { display: block; }

/* A largura é do template: `html[data-layout=vertical] .page-wrapper`
   (0-2-1) vence `.pagina-pessoal .page-wrapper` (0-2-0) e mantinha o
   margin-left de 320px — daí o vão morto de 240px. Override casa o mesmo
   ancoramento e vive na MESMA media query: abaixo de 1300px o rail é
   off-canvas e o template já dá 100% ao conteúdo (fixar 80px aqui criaria
   um vão novo no tablet/celular). A topbar é fixed e acompanha. */
@media (min-width: 1300px) {
  /* Só com o painel RECOLHIDO. Aberto, a regra sai de cena e o template
     reassume os 320px — o conteúdo se ajusta à largura do menu, como nas
     páginas do menu. */
  html.pagina-pessoal[data-layout="vertical"]:not(.painel-aberto) .page-wrapper {
    margin-left: 80px;
  }
  html.pagina-pessoal[data-layout="vertical"]:not(.painel-aberto) .topbar {
    width: calc(100% - 80px);
  }
  /* Sem transição em nenhum dos dois estados: a .topbar não transiciona
     largura, então deslizar só o conteúdo dessincronizaria os dois. Também
     evita o escorregão no load das telas fora do menu que não são perfil/
     meus-chats (nelas a classe só entra quando o /api/menu responde). */
  html.pagina-pessoal[data-layout="vertical"] .page-wrapper { transition: none; }
}

/* Cabeçalhos de seção */
.nav-small-cap {
  color: #8A99AE !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
  line-height: 1.4;
}

/* Links do menu */
.sidebar-nav ul .sidebar-item .sidebar-link {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #4A5468;
  padding: 9px 12px;
  border-radius: 9px;
  gap: 10px;
  margin-bottom: 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav ul .sidebar-item .sidebar-link iconify-icon {
  font-size: 18px;
  color: #7889A4;
  opacity: 1;
  transition: color 0.15s ease;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background-color: #F2F8FD;
  color: #003B8F;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover iconify-icon {
  color: var(--ds-brand-medium);
}

/* Ativo: pill azul-claro + barra de acento (sem glow, sem deslocar) */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
.sidebar-nav ul .sidebar-item > .sidebar-link.active {
  background-color: #EAF6FE;
  color: #003B8F;
  font-weight: 600;
  box-shadow: none;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link iconify-icon,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active iconify-icon,
.sidebar-nav ul .sidebar-item > .sidebar-link.active iconify-icon {
  color: var(--ds-brand-pure);
}

.sidebar-nav ul .sidebar-item > .sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--ds-brand-pure);
}

/* Sub-menu (nível 2), quando existir */
.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
  color: #5B6880;
  padding-left: 40px;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  background-color: var(--ds-white) !important;
  border-bottom: 1px solid var(--ds-neutral-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ── Botões (DS: primário preenchido, radius 8, Inter 700) ──── */
.btn-primary,
.ds-btn.pi-primary {
  background-color: var(--ds-brand-dark) !important;
  border-color: var(--ds-brand-dark) !important;
  border-radius: 8px !important;
  font-weight: 700;
}
.btn-primary:hover,
.ds-btn.pi-primary:hover {
  background-color: var(--ds-brand-darkest) !important;
  border-color: var(--ds-brand-darkest) !important;
}

.btn-outline-primary {
  color: var(--ds-brand-medium) !important;
  border-color: var(--ds-brand-medium) !important;
}
.btn-outline-primary:hover {
  background-color: var(--ds-brand-medium) !important;
  color: #fff !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--ds-neutral-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.card-title {
  font-weight: 700;
  color: var(--ds-neutral-darkest);
  font-family: 'Inter', sans-serif;
}

/* ── Badge / Tags ────────────────────────────────────────────── */
.badge.bg-primary {
  background-color: var(--ds-brand-medium) !important;
}

/* ── Textos com cor primária ─────────────────────────────────── */
.text-primary {
  color: var(--ds-brand-medium) !important;
}

/* ── Marca no topo da sidebar (rail + painel, faixa navy contínua) ── */
.side-mini-panel .brand-logo {
  background-color: var(--ds-brand-darkest) !important;
  border-bottom: 0 !important;
}

.side-mini-panel .sidebarmenu .brand-logo {
  padding: 12px 16px !important;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center; /* logo centralizada na faixa navy */
  width: 100%;
  gap: 11px;
  text-decoration: none;
  min-width: 0;
}

/* Marca CORE completa (fundo navy → base branca). Wordmark da proposta
   aprovada (ago/25): o acento de LETRA é o terminal do braço superior do
   E — a perna do R é letra branca como o resto. O símbolo não mudou. */
.brand-lockup .marca-core {
  display: block;
  height: 34px;      /* trava pela ALTURA (faixa tem 72px, altura fixa em
                        alguns estados). A marca v2 é ~4:1 — mais alta
                        que isso vira parede a parede na faixa */
  width: auto;
  max-width: 100%;
}

.marca-core .mc-letras, .marca-core .mc-petalas { fill: #ffffff; }
/* Acento FIXO no azul oficial — ciclo de 4 cores aposentado (em
   laranja, as pétalas lembravam as Loterias CAIXA). */
.marca-core .mc-acento { fill: #008BD2; }

/* ═══════════════════════════════════════════════════════════════
   ORBE DO CORE AI — identidade visual do assistente
   ───────────────────────────────────────────────────────────────
   Esfera de vidro com as 4 PÉTALAS DA MARCA (a 2×2 da logo:
   quadradas arredondadas, canto vivo apontando pro centro) + uma
   pétala de luz branca pequena. Cada pétala MORA no seu quadrante
   e vagueia em volta de casa: órbita suave (translate) + balanço
   de rotação contido (±6–10°, sem completar volta) + respiração
   de scale — SEM giro de 360° (foi testado e revertido: o canto
   vivo varrendo virava caos). Blend screen (onde as bordas se
   tocam, clareia), núcleo quente fixo e casca de vidro.
   Fonte da verdade: a seção .marca de /orb-demo.html — variante
   aprovada pelo Tiago em 16/08; a variante Siri (pétalas orgânicas
   girando em centros deslocados) foi aposentada na mesma decisão.
   Os valores aqui são cópia fiel de lá (.petala → .orbe-blob,
   .mp-cni → .orbe-blob--cni, orb-mN → orbe-marcaN, girar →
   orbe-girar). NÃO retunar sem passar pelo demo.

   Markup (idêntico em HTML estático e no helper IN.orbeCoreHtml):
     <span class="orbe-core orbe-core--m" aria-hidden="true">
       <span class="orbe-blob orbe-blob--cni"></span>  …sesi …senai …iel …luz
     </span>
   <span> e não <div> porque o FAB é um <button>, que só aceita
   conteúdo de fraseado.

   Tamanhos: --g (150px, saudação/herói), --m (56px, FAB), --p
   (22px, avatares de mensagem — congelado com cada pétala parada
   na CASA do seu quadrante, a própria 2×2 da logo; revisão do
   dono).
   Custo: só --g, --m e o estado --pensando animam de fato.

   Onde o orbe NÃO entra (revisão do dono): o preloader das páginas
   é o SÍMBOLO do Core (4 pétalas, /favicon-core.svg) e o header do
   assistente é a ESTRELA (/sparkles-ai-branco.svg) — ver seções
   "Preloader" e "Chat Drawer" abaixo.
   ═══════════════════════════════════════════════════════════════ */
.orbe-core {
  display: block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #10307A 0%, #081C4E 60%, #050F2E 100%);
}

.orbe-core .orbe-blob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;   /* centraliza; a POSIÇÃO vem do translate dos keyframes */
  mix-blend-mode: screen;
  filter: blur(2px);       /* blur curto pra silhueta da pétala LER */
  transform-origin: 50% 50%;
  opacity: .92;
}

/* Canto vivo (14%) apontando PRO CENTRO, como na logo; keyframe
   próprio = cada pétala vagueia em volta da casa do seu quadrante
   e nunca atravessa o centro. (Prefixo .orbe-core obrigatório: sem
   ele a regra perde da base `.orbe-core .orbe-blob` acima — no demo
   `.marca .pet-luz` empatava e vencia por ordem.) */
.orbe-core .orbe-blob--cni   { border-radius: 46% 46% 14% 46%; background: radial-gradient(ellipse at 40% 40%, #35A7E0 0%, #008BD2 55%, transparent 78%); animation: orbe-marca1 7s   ease-in-out infinite; }
.orbe-core .orbe-blob--sesi  { border-radius: 46% 46% 46% 14%; background: radial-gradient(ellipse at 40% 40%, #7FD45E 0%, #52AE32 55%, transparent 78%); animation: orbe-marca2 8.6s ease-in-out infinite; }
.orbe-core .orbe-blob--senai { border-radius: 46% 14% 46% 46%; background: radial-gradient(ellipse at 40% 40%, #FF7A4D 0%, #E84910 55%, transparent 78%); animation: orbe-marca3 7.8s ease-in-out infinite; }
.orbe-core .orbe-blob--iel   { border-radius: 14% 46% 46% 46%; background: radial-gradient(ellipse at 40% 40%, #9FE8DE 0%, #6CC2BA 55%, transparent 78%); animation: orbe-marca4 9.4s ease-in-out infinite; }
/* Luz: pequena e discreta (o protagonismo é das pétalas); forma
   orgânica sem canto vivo — o único giro completo que sobrou. */
.orbe-core .orbe-blob--luz   { width: 18%; height: 12%; margin: -6% 0 0 -9%;
                    border-radius: 52% 48% 55% 45% / 60% 55% 45% 40%;
                    background: radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, rgba(255,255,255,.65) 45%, transparent 75%);
                    animation: orbe-girar 4.4s ease-in-out infinite;
                    opacity: .5; }
/* Sem `from`: a luz parte do transform que já tiver (pausada no
   --p, fica onde está). */
@keyframes orbe-girar { to { transform: rotate(360deg); } }

/* Órbita no quadrante: 0%/100% é a CASA (translate ±24% = a 2×2 da
   logo), 50% chega perto do centro; o rotate balança sem completar
   volta e o scale respira. Pausar no 0% (--p) = a própria logo. */
@keyframes orbe-marca1 { 0%,100% { transform: translate(-24%,-24%) rotate(-6deg)  scale(1);    }
                         50%     { transform: translate(-10%,-12%) rotate(10deg)  scale(1.1);  } }
@keyframes orbe-marca2 { 0%,100% { transform: translate(24%,-24%)  rotate(6deg)   scale(1.04); }
                         50%     { transform: translate(11%,-11%)  rotate(-9deg)  scale(.94);  } }
@keyframes orbe-marca3 { 0%,100% { transform: translate(-24%,24%)  rotate(8deg)   scale(.96);  }
                         50%     { transform: translate(-11%,11%)  rotate(-7deg)  scale(1.08); } }
@keyframes orbe-marca4 { 0%,100% { transform: translate(24%,24%)   rotate(-8deg)  scale(1.06); }
                         50%     { transform: translate(12%,10%)   rotate(7deg)   scale(.92);  } }

/* Núcleo quente fixo no centro… */
.orbe-core::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  margin: -9% 0 0 -9%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
  filter: blur(2px);
  z-index: 2;
}
/* …e casca de vidro por cima de tudo */
.orbe-core::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.42), transparent 38%),
    radial-gradient(circle at 50% 115%, rgba(120,180,255,.25), transparent 55%);
  box-shadow: inset 0 0 14px rgba(150,200,255,.35), inset 0 0 3px rgba(255,255,255,.5);
  pointer-events: none;
}

/* Estado PENSANDO: mesma dança, ~3x mais rápida + respiração do
   orbe inteiro; a luz mantém o próprio ritmo (como no demo). */
.orbe-core--pensando .orbe-blob--cni   { animation-duration: 2.4s; }
.orbe-core--pensando .orbe-blob--sesi  { animation-duration: 3s; }
.orbe-core--pensando .orbe-blob--senai { animation-duration: 2.7s; }
.orbe-core--pensando .orbe-blob--iel   { animation-duration: 3.3s; }
.orbe-core--pensando { animation: orbe-respirar 1.4s ease-in-out infinite; }
@keyframes orbe-respirar { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.orbe-core--g { width: 150px; height: 150px; }
.orbe-core--m { width: 56px; height: 56px; }
.orbe-core--m .orbe-blob { filter: blur(.8px); }
/* Avatar congelado: animação PAUSADA no 0% = cada pétala ESTÁTICA
   na CASA do seu quadrante — a própria 2×2 da logo (melhor que o
   leque de rotações da Siri; decisão 16/08). Confiável porque o
   avatar nasce pausado e o indicador "pensando" é sempre criado já
   com a classe e removido inteiro (chat-drawer/meus-chats) — nunca
   congela fora do 0%. Luz mínima; núcleo encolhe pra não engolir. */
.orbe-core--p { width: 22px; height: 22px; }
.orbe-core--p .orbe-blob { filter: none; animation-play-state: paused; opacity: .95; }
.orbe-core--p .orbe-blob--luz { opacity: .3; }
.orbe-core--p::before { width: 11%; height: 11%; margin: -5.5% 0 0 -5.5%; filter: blur(1px); opacity: .8; }
/* …mas quando o pequeno está PENSANDO ele volta a fluir (partindo
   da casa): é o único sinal de que a resposta está sendo composta. */
.orbe-core--p.orbe-core--pensando .orbe-blob { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .orbe-blob, .orbe-core--pensando { animation-play-state: paused !important; }
}

/* ── Encaixes do orbe nas superfícies ────────────────────────── */
.chat-welcome .orbe-core { margin: 0 auto 12px; }

/* ── Preloader: o símbolo do Core (4 pétalas) ────────────────── */
/* O carregamento da ferramenta é a MARCA, não o assistente: o
   <img src="/favicon-core.svg"> (claro/escuro automático) com as
   classes que o template já dava — .lds-ripple posiciona (é só
   centralização absoluta ali; não existe keyframe de ripple neste
   CSS), então a vida vem deste pulso suave de opacidade. */
.preloader img.lds-ripple {
  animation: core-preloader-pulso 1.6s ease-in-out infinite;
}
@keyframes core-preloader-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader img.lds-ripple { animation: none; }
}

/* ── Chat FAB (orbe do Core AI) ──────────────────────────────── */
.chat-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background-color: var(--ds-brand-darkest);
  box-shadow: 0 4px 16px rgba(0, 20, 87, 0.35);
  cursor: pointer;
  z-index: 1050;
  /* O orbe É o miolo do FAB: sem padding, ele preenche o botão inteiro
     (o navy do botão vira só a moldura do halo/box-shadow). */
  padding: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 20, 87, 0.45);
}

.chat-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --m nasce com 56px; aqui ele toma os 60px do botão. */
.chat-fab .orbe-core {
  width: 100%;
  height: 100%;
}

/* ── Chat Drawer ─────────────────────────────────────────────── */
.chat-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100vh;
  background: #FFFFFF;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 1049;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-drawer.open {
  right: 0;
}

.chat-drawer-header {
  background: var(--ds-brand-darkest);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* No header o assistente é a ESTRELA branca (não o orbe) — vale para
   o drawer e para o thread de meus-chats, que reusa esta classe. */
.chat-drawer-header img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.chat-drawer-header .drawer-title {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.chat-drawer-header .drawer-subtitle {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}

.chat-drawer-header .btn-close-drawer {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.chat-drawer-header .btn-close-drawer:hover { color: #fff; }

/* Escopo de permissões */
.chat-scope-bar {
  background: var(--ds-brand-bg);
  border-bottom: 1px solid var(--ds-brand-lightest);
  padding: 8px 16px;
  font-size: 11px;
  color: var(--ds-brand-dark);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.chat-scope-bar .scope-label {
  font-weight: 700;
  white-space: nowrap;
  margin-top: 1px;
}

.chat-scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.scope-tag {
  background: var(--ds-brand-pure);
  color: #fff;
  border-radius: 100px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}

/* Painel de conversas */
.chat-history-panel {
  background: #f8f9fb;
  border-bottom: 1px solid var(--ds-neutral-border);
  padding: 10px 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.chat-history-panel::-webkit-scrollbar { height: 0; }

.btn-nova-conversa {
  flex-shrink: 0;
  background: var(--ds-brand-medium);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-nova-conversa:hover { background: var(--ds-brand-dark); }

.conv-chip {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--ds-neutral-dark);
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s, background 0.15s;
}
.conv-chip:hover { border-color: var(--ds-brand-pure); background: var(--ds-brand-bg); }
.conv-chip.active {
  border-color: var(--ds-brand-medium);
  background: var(--ds-brand-bg);
  color: var(--ds-brand-dark);
  font-weight: 600;
}

/* Mensagens */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--ds-neutral-lighter); border-radius: 4px; }

.msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 92%;
}

.msg.user { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Avatar do bot: o orbe é a marca do assistente, não um retrato — vem
   menor que o avatar de gente, que continua com foto/iniciais.
   Repete o tamanho do .orbe-core--p porque .msg-avatar (28px) tem
   especificidade maior que a classe de tamanho do orbe. */
.msg-avatar.msg-avatar-ai {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.msg-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  font-family: 'Inter', sans-serif;
  /* Item flex nasce com min-width:auto e se recusa a encolher abaixo do
     conteúdo — uma tabela larga esticava a bolha para ALÉM do drawer
     (463px dentro de 420px) e empurrava a conversa na horizontal. */
  min-width: 0;
}

.msg.bot .msg-bubble {
  background: #f0f4ff;
  color: var(--ds-neutral-darkest);
  border-top-left-radius: 3px;
}

.msg.user .msg-bubble {
  background: var(--ds-brand-medium);
  color: #fff;
  border-top-right-radius: 3px;
}

/* Mensagem de boas-vindas */
.chat-welcome {
  text-align: center;
  padding: 24px 16px;
  color: var(--ds-neutral-medium);
}

.chat-welcome p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-neutral-dark);
}

/* Sugestões */
.chat-suggestions {
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.suggestion-chip {
  background: var(--ds-brand-bg);
  border: 1px solid var(--ds-brand-lightest);
  color: var(--ds-brand-dark);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Inter', sans-serif;
}
.suggestion-chip:hover {
  background: var(--ds-brand-lightest);
  border-color: var(--ds-brand-light);
}

/* Input */
.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--ds-neutral-border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  background: #fff;
}

.chat-input-area textarea {
  flex: 1;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.4;
}
.chat-input-area textarea:focus { border-color: var(--ds-brand-pure); }

.btn-send {
  width: 40px;
  height: 40px;
  background: var(--ds-brand-medium);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.btn-send:hover { background: var(--ds-brand-dark); }
.btn-send:disabled { background: var(--ds-neutral-lighter); cursor: not-allowed; }

/* Overlay escurece o fundo quando o drawer está aberto */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1048;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.chat-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: #f0f4ff;
  border-radius: 12px;
  border-top-left-radius: 3px;
  width: fit-content;
}
.typing-indicator span {
  width: 7px;
  height: 7px;
  background: var(--ds-brand-pure);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Markdown dentro das mensagens */
.msg-bubble p { margin: 0 0 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble strong { font-weight: 700; }
.msg-bubble ul, .msg-bubble ol { margin: 4px 0 8px 18px; }
.msg-bubble li { margin-bottom: 2px; }
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; }
.msg-bubble table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 10px 0; }
.msg-bubble th { background: var(--ds-brand-medium); color: #fff; padding: 6px 10px; text-align: left; }
.msg-bubble td { padding: 5px 10px; border-bottom: 1px solid var(--ds-neutral-border); }
.msg-bubble tr:nth-child(even) td { background: #f4f7fb; }

/* ── Tabela e gráfico dentro da bolha (chat-render.js) ────────
   A tabela rola DENTRO da bolha — nunca a conversa inteira. */
.msg-bubble .chat-tabela { overflow-x: auto; margin: 10px 0; }
.msg-bubble .chat-tabela table { margin: 0; }
.msg-bubble .chat-tabela::-webkit-scrollbar { height: 6px; }
.msg-bubble .chat-tabela::-webkit-scrollbar-track { background: transparent; }
.msg-bubble .chat-tabela::-webkit-scrollbar-thumb { background: var(--ds-neutral-lighter); border-radius: 4px; }

/* Espaço estreito (drawer = 420px) e tabela que não cabe: cada linha
   vira um cartão rótulo → valor. Sem rolagem horizontal, legível no
   celular. Na tela cheia continua tabela. */
.msg-bubble .chat-tabela.empilhada { overflow-x: visible; }
.msg-bubble .chat-tabela.empilhada thead { display: none; }
.msg-bubble .chat-tabela.empilhada table,
.msg-bubble .chat-tabela.empilhada tbody,
.msg-bubble .chat-tabela.empilhada tr,
.msg-bubble .chat-tabela.empilhada td { display: block; width: auto; }
.msg-bubble .chat-tabela.empilhada tr {
  background: #fff;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.msg-bubble .chat-tabela.empilhada tr:last-child { margin-bottom: 0; }
.msg-bubble .chat-tabela.empilhada td,
.msg-bubble .chat-tabela.empilhada tr:nth-child(even) td {
  background: transparent;
  border: 0;
  padding: 3px 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.msg-bubble .chat-tabela.empilhada td::before {
  content: attr(data-rotulo);
  flex: 0 0 33%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-neutral-medium);
}
.msg-bubble .chat-tabela.empilhada td:empty { display: none; }

.msg-bubble canvas { display: block; margin: 12px 0 4px; max-width: 100%; max-height: 280px; }

/* ── Dashboard — cards de métricas ──────────────────────────── */
.metric-card {
  background: #fff;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Dica dos big numbers. O `title` nativo do navegador não aparecia de
   forma confiável (Tiago 03/08) — aqui é um painel do próprio produto,
   que abre no hover e no foco pelo teclado. */
.metric-dica {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  width: max-content;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--ds-neutral-border, #DFDFDF);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-neutral-darkest, #262626);
  text-align: left;
  white-space: normal;
}
.metric-dica.ancora-direita { left: auto; right: 0; }
.metric-dica .dica-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-neutral-light, #A2A2A2); margin-bottom: 6px;
}
.metric-dica ul { margin: 0; padding-left: 15px; }
.metric-dica li + li { margin-top: 4px; }
.metric-dica .dica-alerta { color: #C0392B; font-weight: 600; }
.metric-dica .dica-nota { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--ds-neutral-border, #F0F0F0); color: var(--ds-neutral-medium, #646464); }
.metric-card:hover .metric-dica,
.metric-card:focus-within .metric-dica { display: block; }

/* Segunda leitura do big number (ex.: a ANS de manutenção ao lado da de
   projetos). Com height:100% nos cards, um card mais alto não desalinha
   a linha — todos acompanham o maior. */
.metric-card { height: 100%; }
/* O texto ocupa a largura que sobra do ícone — sem isso ele ficava com
   ~125px e qualquer rótulo com duas palavras quebrava em duas linhas. */
.metric-card .metric-body { flex: 1 1 auto; min-width: 0; }

.metric-card .metric-sub {
  font-size: 11.5px;
  color: var(--ds-neutral-medium, #646464);
  margin-top: 3px;
}
.metric-card .metric-sub strong { color: var(--ds-neutral-darkest, #262626); font-weight: 700; }

/* Atalho no canto do big number (hoje só o de Ausências tem tela própria).
   FORA do fluxo: no fluxo ele estreitava o rótulo, que quebrava em duas
   linhas e deixava o card mais alto que os três vizinhos. */
.metric-card { position: relative; }
.metric-card .metric-link {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 12px;
  font-weight: 600;
  color: #005BA5;
  text-decoration: none;
  white-space: nowrap;
}
.metric-card .metric-link:hover { text-decoration: underline; }

.metric-card .metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.metric-card .metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ds-neutral-darkest);
  line-height: 1;
}

.metric-card .metric-label {
  font-size: 12px;
  color: var(--ds-neutral-medium);
  margin-top: 4px;
}

/* Painel de avisos */
.aviso-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-neutral-border);
  align-items: flex-start;
}
.aviso-item:last-child { border-bottom: none; }

.aviso-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.aviso-dot.info    { background: var(--ds-info); }
.aviso-dot.warning { background: var(--ds-warning); }
.aviso-dot.success { background: var(--ds-success); }

.aviso-text { font-size: 13px; color: var(--ds-neutral-dark); line-height: 1.5; }
.aviso-time { font-size: 11px; color: var(--ds-neutral-light); margin-top: 3px; }

/* ── Pauta (tarefas rápidas) ─────────────────────────────────── */
.pauta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-neutral-border);
}
.pauta-item:last-child { border-bottom: none; }

.pauta-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--ds-neutral-lighter);
  flex-shrink: 0;
}

.pauta-label {
  font-size: 13px;
  color: var(--ds-neutral-dark);
  flex: 1;
}

.pauta-tag {
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

.pauta-tag.sprint { background: #E3F0FF; color: var(--ds-brand-medium); }
.pauta-tag.ans    { background: #FFF3E0; color: #E65100; }
.pauta-tag.metas  { background: #E8F5E9; color: #2E7D32; }

/* ── Página de login ─────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  background: var(--ds-neutral-bg);
}

.login-left {
  flex: 0 0 420px;
  background: linear-gradient(160deg, var(--ds-brand-darkest) 0%, var(--ds-brand-medium) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  color: #fff;
}

.login-left .mascot-img {
  width: 160px;
  margin-bottom: 28px;
}

.login-left .brand-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.login-left .brand-tagline {
  font-size: 14px;
  opacity: 0.75;
  text-align: center;
  line-height: 1.6;
}

.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-box {
  width: 100%;
  max-width: 400px;
}

.login-box h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-neutral-darkest);
  margin-bottom: 6px;
}

.login-box .login-subtitle {
  font-size: 14px;
  color: var(--ds-neutral-medium);
  margin-bottom: 28px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-neutral-dark);
  margin-bottom: 6px;
}

.form-control {
  border: 1px solid var(--ds-neutral-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s;
}
.form-control:focus {
  border-color: var(--ds-brand-pure);
  box-shadow: 0 0 0 3px rgba(0,139,210,0.12);
}

.btn-login {
  width: 100%;
  background: var(--ds-brand-medium);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-login:hover { background: var(--ds-brand-dark); }

.btn-sso {
  width: 100%;
  background: #fff;
  color: var(--ds-neutral-darkest);
  border: 1.5px solid var(--ds-neutral-border);
  border-radius: 8px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.btn-sso:hover {
  border-color: var(--ds-brand-pure);
  background: var(--ds-brand-bg);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--ds-neutral-light);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ds-neutral-border);
}

.login-footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.login-footer-links a {
  font-size: 13px;
  color: var(--ds-brand-medium);
  text-decoration: none;
}
.login-footer-links a:hover { text-decoration: underline; }

.login-error {
  background: #FEF5F5;
  border: 1px solid #FD8D8D;
  color: #B02E2E;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

@media (max-width: 768px) {
  .login-left { display: none; }
  .login-right { padding: 24px 20px; }
}

/* ── Responsivo — sidebar mobile ─────────────────────────────── */
@media (max-width: 991px) {
  .chat-drawer { width: 100vw; right: -100vw; }
  .chat-drawer.open { right: 0; }
}

/* ============================================================
   DIÁLOGOS DO IN (ui-dialog.js) — substituem alert/confirm/prompt
   Fora de .admin-page de propósito: valem no drawer, na home e nas
   telas administrativas. z-index acima do drawer (1049) e do banner
   do Visualizar Como (1080).
   ============================================================ */
.in-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 20, 87, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.in-dialog-overlay.visivel { opacity: 1; }

.in-dialog {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 20, 87, 0.28);
  width: 100%;
  max-width: 430px;
  padding: 22px;
  font-family: 'Inter', sans-serif;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.15s ease;
}
.in-dialog-overlay.visivel .in-dialog { transform: none; }

.in-dialog-head { display: flex; align-items: center; gap: 11px; }

.in-dialog-icone {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.in-dialog-icone.info    { background: var(--ds-brand-bg);  color: var(--ds-brand-medium); }
.in-dialog-icone.atencao { background: #FFF4E5;             color: var(--ds-warning); }
.in-dialog-icone.erro    { background: #FEECEC;             color: var(--ds-error); }
.in-dialog-icone.info::before    { content: "i"; font-style: italic; }
.in-dialog-icone.atencao::before,
.in-dialog-icone.erro::before    { content: "!"; }

.in-dialog-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-neutral-darkest);
}

.in-dialog-msg {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ds-neutral-dark);
}

.in-dialog-input {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.in-dialog-input:focus { border-color: var(--ds-brand-pure); }

.in-dialog-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.in-btn {
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.in-btn-primario { background: var(--ds-brand-medium); color: #fff; }
.in-btn-primario:hover { background: var(--ds-brand-darkest); }
.in-btn-primario.perigo { background: var(--ds-error); }
.in-btn-primario.perigo:hover { background: #D93030; }
.in-btn-soft {
  background: #fff;
  border-color: var(--ds-neutral-border);
  color: var(--ds-neutral-dark);
}
.in-btn-soft:hover { border-color: var(--ds-brand-pure); color: var(--ds-brand-medium); }
.in-btn:focus-visible { outline: 2px solid var(--ds-neutral-medium); outline-offset: 2px; }

@media (max-width: 480px) {
  .in-dialog-acoes { flex-direction: column-reverse; }
  .in-dialog-acoes .in-btn { width: 100%; }
}

/* ============================================================
   NOTIFICAÇÕES (notificacoes.js) — sino da topbar + página
   ⚠️ Camada de dados é MOCK; ver docs/notificacoes/pre-logica.md.
   ============================================================ */
.in-sino-host { position: relative; }

.in-sino-badge {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--ds-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
  box-sizing: content-box;
}

.in-sino-painel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 20, 87, 0.14);
  z-index: 200;
  overflow: hidden;
}

.in-sino-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-neutral-bg);
  font-size: 13.5px;
}
.in-sino-linkbtn {
  margin-left: auto;
  background: none; border: none; padding: 0;
  color: var(--ds-brand-medium);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.in-sino-linkbtn:hover { text-decoration: underline; }

.in-tag-demo {
  background: #FFF4E5; color: #9A6100;
  border-radius: 100px; padding: 1px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.in-sino-lista { max-height: min(58vh, 400px); overflow-y: auto; }
.in-sino-lista::-webkit-scrollbar { width: 4px; }
.in-sino-lista::-webkit-scrollbar-thumb { background: var(--ds-neutral-lighter); border-radius: 4px; }

.in-sino-item {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--ds-neutral-bg);
  text-align: left; cursor: pointer; font-family: inherit;
}
.in-sino-item:hover { background: #F4F8FC; }
.in-sino-item.nao-lida { background: var(--ds-brand-bg); }
.in-sino-item.nao-lida:hover { background: #E4F4FE; }

.in-sino-icone {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.in-sino-icone.info    { background: var(--ds-brand-bg);  color: var(--ds-brand-medium); }
.in-sino-icone.atencao { background: #FFF4E5;             color: #C87A00; }
.in-sino-icone.sucesso { background: #E9F8E4;             color: #1F8F00; }
.in-sino-icone.neutro  { background: var(--ds-neutral-bg); color: var(--ds-neutral-medium); }

.in-sino-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.in-sino-titulo {
  font-size: 13px; font-weight: 600; color: var(--ds-neutral-darkest); line-height: 1.35;
}
.in-sino-meta { font-size: 11px; color: var(--ds-neutral-light); }
.in-sino-ponto {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-brand-pure); margin-top: 6px;
}
.in-sino-vazio { padding: 26px 18px; text-align: center; font-size: 12.5px; color: var(--ds-neutral-light); line-height: 1.6; margin: 0; }

.in-sino-rodape {
  display: block; padding: 11px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--ds-brand-medium);
  text-decoration: none; border-top: 1px solid var(--ds-neutral-bg);
}
.in-sino-rodape:hover { background: var(--ds-brand-bg); }

/* ── Página de notificações ────────────────────────────────── */
.notif-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.notif-filtro {
  background: #fff; border: 1px solid var(--ds-neutral-border);
  border-radius: 100px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 500; font-family: inherit;
  color: var(--ds-neutral-dark); cursor: pointer;
}
.notif-filtro:hover { border-color: var(--ds-brand-pure); color: var(--ds-brand-medium); }
.notif-filtro.ativo {
  background: var(--ds-brand-medium); border-color: var(--ds-brand-medium); color: #fff; font-weight: 600;
}

.notif-item {
  display: flex; gap: 12px;
  background: #fff;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.notif-item.nao-lida { border-left: 3px solid var(--ds-brand-pure); background: #FCFEFF; }
.notif-corpo { flex: 1 1 auto; min-width: 0; }
.notif-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-cab h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ds-neutral-darkest); }
.notif-prio {
  background: #FEECEC; color: #C62828;
  border-radius: 100px; padding: 1px 8px; font-size: 10px; font-weight: 700;
}
.notif-tempo { margin-left: auto; font-size: 11.5px; color: var(--ds-neutral-light); white-space: nowrap; }
.notif-corpo p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--ds-neutral-dark); }
.notif-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.notif-acoes .in-btn { padding: 6px 12px; font-size: 12px; text-decoration: none; }
.notif-vazio {
  background: #fff; border: 1px dashed var(--ds-neutral-border); border-radius: 12px;
  padding: 40px; text-align: center; color: var(--ds-neutral-light); font-size: 13px;
}

/* ============================================================
   HOME — linha 2: (vídeo + Minha Pauta) · Atribuído a Mim ·
   Painel de Notificações. Os quadros da direita esticam até o fim
   da seção e rolam por dentro, em vez de esticar a página.
   ============================================================ */
.home-linha2 { min-height: min(76vh, 780px); }

.home-card-flex { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.home-card-flex > .card-body { flex: 1 1 auto; min-height: 0; }

/* Rolagem VERTICAL apenas. Os itens da lista sangram 6px para os lados
   (o realce do hover vai até a borda do card); sem o padding que absorve
   essa sangria, o navegador entende overflow horizontal e desenha uma
   barra embaixo — overflow-y:auto força overflow-x:auto (Tiago 03/08). */
.home-rolagem {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 0 8px 0 6px; margin: 0 -6px;
}
.home-rolagem::-webkit-scrollbar { width: 4px; }
.home-rolagem::-webkit-scrollbar-track { background: transparent; }
.home-rolagem::-webkit-scrollbar-thumb { background: var(--ds-neutral-lighter); border-radius: 4px; }

/* Chave do projeto do Jira ao lado do lembrete (Minha Pauta) */
.pauta-chave {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-brand-medium);
  background: var(--ds-brand-bg);
  border: 1px solid var(--ds-brand-lightest);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ── "Atribuído a Mim" — formato do "Seu trabalho" do Jira ──── */
.jira-grupo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-neutral-light);
  padding: 12px 0 5px;
}
.jira-grupo:first-child { padding-top: 2px; }

.jira-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 8px 8px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.jira-item:hover { background: #F2F7FC; }

.jira-icone {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  margin-top: 1px;
}
.jira-icone.epico    { background: #7A4DE8; }   /* épico = roxo, como no Jira */
.jira-icone.projeto  { background: #0B7EC4; }
.jira-icone.conteudo { background: #C13AB8; }
.jira-icone.tarefa   { background: #2C9C4A; }
/* ícone-IMAGEM (tipos do Jira, desenhos do James): a arte já traz a cor */
.jira-icone.img      { background: transparent; }
.jira-icone.img img  { width: 100%; height: 100%; border-radius: 5px; display: block; object-fit: contain; }

.jira-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.jira-titulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-neutral-darkest);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jira-meta {
  font-size: 10.5px;
  color: var(--ds-neutral-light);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jira-meta strong { color: var(--ds-neutral-medium); font-weight: 700; }

.jira-status {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 3px 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.jira-status.fazendo    { background: #DEEBFF; color: #0B4FA8; }
.jira-status.manutencao { background: #DEEBFF; color: #0B4FA8; }
.jira-status.afazer     { background: var(--ds-neutral-bg); color: var(--ds-neutral-medium); }
.jira-status.backlog    { background: var(--ds-neutral-bg); color: var(--ds-neutral-medium); }
.jira-status.priorizado { background: #EDE4FF; color: #5B2FB8; }

@media (max-width: 991.98px) {
  .home-linha2 { min-height: 0; }
  .home-rolagem { max-height: 460px; }
}

/* ============================================================
   LEMBRETES — proposta de layout (docs/lembretes/plano-modulo-lembretes.md)
   Sem lógica: só a casca visual. Anatomia igual à do Meus chats
   (coluna + conteúdo), com painel de detalhe deslizando à direita.
   ============================================================ */
.lem-page .lem-wrap {
  display: flex;
  position: relative;
  height: calc(100vh - 250px);
  min-height: 520px;
  border: 1px solid var(--ds-neutral-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 40, 80, .06);
}

/* ── Coluna dos grupos ──────────────────────────────────────── */
.lem-grupos {
  width: 268px; flex: 0 0 268px;
  border-right: 1px solid var(--ds-neutral-border);
  background: #F8FAFC;
  overflow-y: auto;
  padding-bottom: 12px;
}
.lem-grupos-topo { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lem-busca {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--ds-neutral-border); border-radius: 8px;
  font-size: 12.5px; font-family: inherit; outline: none; background: #fff;
}
.lem-busca:focus { border-color: var(--ds-brand-pure); }

.lem-secao {
  padding: 12px 14px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8A99AE;
}

.lem-filtro, .lem-grupo {
  width: calc(100% - 16px); margin: 0 8px 2px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.lem-filtro:hover, .lem-grupo:hover { background: #EEF3F9; }
.lem-filtro.ativo, .lem-grupo.selecionado { background: var(--ds-brand-bg); }

.lem-filtro-ic {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.lem-filtro-ic.hoje  { background: var(--ds-brand-bg); color: var(--ds-brand-medium); }
.lem-filtro-ic.atras { background: #FEECEC; color: #C62828; }
.lem-filtro-ic.sem   { background: var(--ds-neutral-bg); color: var(--ds-neutral-medium); }
.lem-filtro-nome { flex: 1 1 auto; font-size: 13px; color: var(--ds-neutral-darkest); }

.lem-cor { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lem-grupo-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lem-grupo-nome {
  font-size: 13px; color: var(--ds-neutral-darkest);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lem-grupo.selecionado .lem-grupo-nome { color: var(--ds-brand-dark); font-weight: 600; }
.lem-grupo-chave { font-size: 10px; font-weight: 700; color: var(--ds-brand-medium); letter-spacing: .02em; }
.lem-grupo-chave.sem-jira { color: var(--ds-neutral-light); font-weight: 500; font-style: italic; }

.lem-cont {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  color: var(--ds-neutral-medium); background: var(--ds-neutral-bg);
  border-radius: 100px; padding: 1px 7px;
}
.lem-cont.alerta { background: #FEECEC; color: #C62828; }

/* ── Conteúdo ───────────────────────────────────────────────── */
.lem-conteudo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.lem-cab { padding: 14px 18px 0; border-bottom: 1px solid var(--ds-neutral-border); }
.lem-cab-linha { display: flex; align-items: center; gap: 9px; }
.lem-titulo { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--ds-neutral-darkest); }

.lem-visao { display: flex; background: var(--ds-neutral-bg); border-radius: 8px; padding: 2px; gap: 2px; }
.lem-visao-btn {
  display: flex; align-items: center; gap: 5px;
  border: 0; background: none; border-radius: 6px;
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  color: var(--ds-neutral-medium); cursor: pointer; font-family: inherit;
}
.lem-visao-btn.ativa { background: #fff; color: var(--ds-brand-dark); box-shadow: 0 1px 2px rgba(0,0,0,.07); }

.lem-icone-btn {
  border: 0; background: none; cursor: pointer; color: var(--ds-neutral-light);
  padding: 5px; border-radius: 6px; display: flex; font-size: 16px;
}
.lem-icone-btn:hover { background: var(--ds-neutral-bg); color: var(--ds-neutral-dark); }

/* Contexto vindo do Jira (só p/ quem tem o Tema Projetos no escopo) */
.lem-contexto {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 0 11px; font-size: 11.5px; color: var(--ds-neutral-medium);
}
.lem-ctx-chave {
  font-size: 10.5px; font-weight: 700; color: var(--ds-brand-medium);
  background: var(--ds-brand-bg); border: 1px solid var(--ds-brand-lightest);
  border-radius: 6px; padding: 2px 7px;
}
.lem-ctx-item strong { color: var(--ds-neutral-dark); }
.lem-ctx-item code { font-size: 10.5px; background: var(--ds-neutral-bg); padding: 1px 4px; border-radius: 4px; }
.lem-ctx-sep { width: 1px; height: 11px; background: var(--ds-neutral-border); }
.lem-ctx-link { margin-left: auto; font-size: 11.5px; color: var(--ds-brand-medium); text-decoration: none; }
.lem-ctx-link:hover { text-decoration: underline; }

.lem-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 18px 18px; }

/* ── Visão LISTA ────────────────────────────────────────────── */
.lem-add {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 4px; color: var(--ds-neutral-light);
  font-size: 13px; cursor: pointer; border-radius: 8px;
}
.lem-add:hover { color: var(--ds-brand-medium); background: #F4F8FC; }

/* ── Compositor de tarefa (padrão Todoist) ───────────────────
   Criar tarefa NÃO abre diálogo: o cartão de composição nasce no
   lugar onde a tarefa vai ficar, na mesma tela. É a diferença entre
   "preencher um formulário sobre a lista" e "escrever na lista" —
   e é o que deixa cadastrar cinco tarefas seguidas sem fricção
   (salvar mantém o compositor aberto, com o foco de volta no título). */
.lem-compositor {
  border: 1px solid var(--ds-brand-pure); border-radius: 11px;
  background: #fff; box-shadow: 0 2px 10px rgba(16, 40, 80, .07);
  padding: 11px 13px; margin: 4px 0 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.lem-comp-titulo, .lem-comp-desc {
  border: 0; outline: 0; background: none; width: 100%;
  font-family: inherit; color: var(--ds-neutral-darkest);
}
.lem-comp-titulo { font-size: 13.5px; font-weight: 600; padding: 2px 0; }
.lem-comp-desc {
  font-size: 12.5px; color: var(--ds-neutral-dark);
  resize: none; min-height: 20px; max-height: 140px; line-height: 1.5;
}
.lem-comp-titulo::placeholder, .lem-comp-desc::placeholder { color: var(--ds-neutral-light); }
/* O anel global de foco (a11y, linha ~82) fica parecendo uma borda pesada
   nestes campos SEM borda — e o próprio card do compositor já sinaliza o
   foco com a borda azul. Só aqui, o anel sai. */
.lem-comp-titulo:focus-visible, .lem-comp-desc:focus-visible { outline: none !important; }

.lem-comp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.lem-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--ds-neutral-border); border-radius: 8px;
  padding: 5px 9px; background: #fff;
  font-family: inherit; font-size: 12px; color: var(--ds-neutral-dark);
  cursor: pointer; max-width: 100%;
}
.lem-chip:hover { border-color: var(--ds-brand-lighter); }
.lem-chip:focus-within { border-color: var(--ds-brand-pure); }
.lem-chip iconify-icon { color: var(--ds-neutral-light); font-size: 14px; flex: 0 0 auto; }
.lem-chip select, .lem-chip input {
  border: 0; outline: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: inherit;
  max-width: 190px; text-overflow: ellipsis;
}
.lem-chip.preenchido { border-color: var(--ds-brand-lighter); background: var(--ds-brand-bg); color: var(--ds-brand-dark); }
.lem-chip.preenchido iconify-icon { color: var(--ds-brand-medium); }

.lem-comp-acoes {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--ds-neutral-bg); padding-top: 9px; margin-top: 4px;
}
.lem-comp-erro { margin-right: auto; font-size: 11.5px; color: var(--ds-error); }
.lem-comp-cancelar {
  border: 0; background: none; cursor: pointer; padding: 5px 8px;
  color: var(--ds-neutral-medium); font-size: 19px; line-height: 1;
}
.lem-comp-cancelar:hover { color: var(--ds-neutral-dark); }
.lem-comp-salvar {
  border: 0; border-radius: 8px; padding: 7px 17px; cursor: pointer;
  background: var(--ds-brand-dark); color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.lem-comp-salvar:disabled { opacity: .4; cursor: default; }

/* No kanban o compositor vive dentro da coluna: mais estreito e sem
   margem que empurre os cartões. */
.lem-kanban .lem-compositor { margin: 0 0 8px; padding: 9px 10px; }
.lem-kanban .lem-chip select, .lem-kanban .lem-chip input { max-width: 120px; }

.lem-tarefa {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--ds-neutral-bg);
  cursor: pointer;
}
.lem-tarefa:hover { background: #FAFCFE; }
.lem-tarefa.sub { padding-left: 30px; }
.lem-tarefa.concluida .lem-tarefa-titulo { text-decoration: line-through; color: var(--ds-neutral-light); }

.lem-check {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  border: 1.5px solid var(--ds-neutral-lighter); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff;
}
.lem-tarefa.p1 .lem-check { border-color: var(--ds-error); }
.lem-tarefa.p2 .lem-check { border-color: var(--ds-warning); }
.lem-check.marcado { background: var(--ds-success); border-color: var(--ds-success); }

.lem-tarefa-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lem-tarefa-titulo { font-size: 13.5px; color: var(--ds-neutral-darkest); line-height: 1.4; }
.lem-tarefa-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; }

.lem-prazo { display: flex; align-items: center; gap: 3px; color: var(--ds-neutral-medium); }
.lem-prazo.hoje { color: var(--ds-brand-medium); font-weight: 600; }
.lem-prazo.atrasado { color: var(--ds-error); font-weight: 600; }
.lem-sem-data { color: var(--ds-neutral-light); font-style: italic; }

.lem-prio { font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 2px 5px; }
.lem-prio.p1 { background: #FEECEC; color: #C62828; }
.lem-prio.p2 { background: #FFF4E5; color: #C87A00; }
.lem-prio.p3 { background: var(--ds-brand-bg); color: var(--ds-brand-medium); }
.lem-prio.p4 { background: var(--ds-neutral-bg); color: var(--ds-neutral-medium); }

.lem-sinal { display: flex; align-items: center; gap: 3px; color: var(--ds-neutral-light); }

/* ── Visão KANBAN ───────────────────────────────────────────── */
.lem-kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; }
.lem-coluna {
  flex: 0 0 262px; background: #F6F9FC;
  border: 1px solid var(--ds-neutral-border); border-radius: 11px;
  display: flex; flex-direction: column; max-height: 100%;
}
.lem-coluna-cab { display: flex; align-items: center; gap: 7px; padding: 10px 11px 8px; }
.lem-coluna-nome { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: var(--ds-neutral-darkest); }
.lem-coluna-conclui {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: #E9F8E4; color: #1F8F00; border-radius: 4px; padding: 2px 5px;
}
.lem-coluna-corpo { padding: 0 9px 9px; overflow-y: auto; min-height: 60px; }

.lem-card {
  background: #fff; border: 1px solid var(--ds-neutral-border) !important;
  border-radius: 9px; padding: 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px; cursor: grab;
  box-shadow: 0 1px 2px rgba(16,40,80,.05);
}
.lem-card:hover { border-color: var(--ds-brand-lighter) !important; }
.lem-card.p1 { border-left: 3px solid var(--ds-error) !important; }
.lem-card.p2 { border-left: 3px solid var(--ds-warning) !important; }
.lem-card.concluido .lem-card-titulo { text-decoration: line-through; color: var(--ds-neutral-light); }
.lem-card-titulo { font-size: 12.5px; color: var(--ds-neutral-darkest); line-height: 1.4; }
.lem-card-meta, .lem-card-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; }
.lem-card-rodape { border-top: 1px solid var(--ds-neutral-bg); padding-top: 6px; }

/* Marca de destino do cartão arrastado: ocupa o vão onde ele vai
   pousar, então a lista ABRE espaço em vez de só acender uma linha. */
.lem-marca-drop {
  height: 34px; margin-bottom: 8px; border-radius: 9px;
  border: 2px dashed var(--ds-brand-pure); background: rgba(0, 91, 165, .06);
}
/* Na lista as linhas são mais baixas e não têm margem entre si. */
.lem-marca-lista { height: 28px; margin: 2px 0; }

/* Soltar no MIOLO de uma tarefa a transforma em subtarefa dela. O
   destaque é a linha inteira (não uma barra entre linhas), porque o
   gesto é "para dentro", não "entre". */
.lem-tarefa.lem-alvo-pai {
  background: var(--ds-brand-bg);
  box-shadow: inset 3px 0 0 var(--ds-brand-pure);
  border-radius: 8px;
}
.lem-tarefa.lem-alvo-pai::after {
  content: 'vira subtarefa'; margin-left: auto; align-self: center;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ds-brand-medium); background: #fff;
  border: 1px solid var(--ds-brand-lighter); border-radius: 5px; padding: 2px 6px;
}

.lem-add-card, .lem-nova-coluna {
  display: flex; align-items: center; gap: 6px;
  width: 100%; border: 0; background: none; cursor: pointer;
  padding: 7px 4px; font-size: 12px; color: var(--ds-neutral-light);
  border-radius: 7px; font-family: inherit;
}
.lem-add-card:hover, .lem-nova-coluna:hover { background: #EDF3F9; color: var(--ds-brand-medium); }
.lem-nova-coluna {
  flex: 0 0 190px; justify-content: center;
  border: 1px dashed var(--ds-neutral-border); background: #FBFDFF;
}

/* ── Painel de detalhe ──────────────────────────────────────── */
.lem-detalhe {
  position: absolute; top: 0; right: 0; bottom: 0; width: 380px;
  background: #fff; border-left: 1px solid var(--ds-neutral-border);
  box-shadow: -8px 0 24px rgba(16, 40, 80, .10);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease;
  z-index: 5;
}
body.lem-detalhe-aberto .lem-detalhe { transform: none; }

.lem-detalhe-cab {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; border-bottom: 1px solid var(--ds-neutral-border);
  font-size: 13px; color: var(--ds-neutral-dark);
}
.lem-detalhe-cab strong { flex: 1 1 auto; }
.lem-detalhe-corpo { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
.lem-detalhe-titulo { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ds-neutral-darkest); line-height: 1.4; }
.lem-detalhe-desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--ds-neutral-dark); }

.lem-detalhe-campos { display: flex; flex-direction: column; gap: 7px; padding-bottom: 6px; }
.lem-campo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ds-neutral-dark); }
.lem-campo-rot { width: 76px; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-neutral-light); }

.lem-detalhe-secao {
  display: flex; align-items: center; gap: 7px;
  margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--ds-neutral-bg);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #8A99AE;
}
.lem-sub-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; color: var(--ds-neutral-dark); }

/* Nova subtarefa (fix 31/07): a classe .lem-coment-novo perdeu o CSS na
   virada do comentário p/ rich text — o input caiu no default do browser
   (borda crua + anel global de foco). */
.lem-coment-novo { margin-top: 6px; }
.lem-coment-novo input {
  width: 100%; font-family: inherit; font-size: 12.5px;
  color: var(--ds-neutral-darkest); background: #fff;
  border: 1px solid #DFE3E8; border-radius: 8px;
  padding: 7px 10px;
}
.lem-coment-novo input::placeholder { color: var(--ds-neutral-light); }
.lem-coment-novo input:focus,
.lem-coment-novo input:focus-visible { border-color: var(--ds-brand-pure); outline: none !important; }

.lem-coment { display: flex; gap: 9px; padding: 7px 0; font-size: 12.5px; }
.lem-coment strong { font-size: 12px; }
.lem-coment-tempo { font-size: 10.5px; color: var(--ds-neutral-light); margin-left: 5px; }
.lem-coment p { margin: 3px 0 0; line-height: 1.5; color: var(--ds-neutral-dark); }
.lem-coment img.msg-avatar { object-fit: cover; }

/* Editar/apagar só aparecem no hover do comentário: são ações raras e
   não podem competir com a leitura. */
.lem-coment-cab { display: flex; align-items: center; gap: 2px; }
.lem-coment-acoes { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.lem-coment:hover .lem-coment-acoes,
.lem-coment:focus-within .lem-coment-acoes { opacity: 1; }
.lem-coment-acoes .lem-icone-btn { width: 24px; height: 24px; font-size: 13px; }

/* Corpo do comentário é HTML sanitizado no servidor (allowlist). */
.lem-coment-corpo { margin-top: 3px; line-height: 1.55; color: var(--ds-neutral-dark); word-break: break-word; }
.lem-coment-corpo p { margin: 0 0 6px; }
.lem-coment-corpo p:last-child { margin-bottom: 0; }
.lem-coment-corpo ul, .lem-coment-corpo ol { margin: 4px 0 6px; padding-left: 20px; }
.lem-coment-corpo li { margin: 2px 0; }
.lem-coment-corpo a { color: var(--ds-brand-medium); }
.lem-coment-corpo code {
  background: var(--ds-neutral-bg); border-radius: 4px; padding: 1px 4px; font-size: 11.5px;
}
.lem-coment-corpo blockquote {
  margin: 4px 0; padding-left: 9px; border-left: 2px solid var(--ds-neutral-border);
  color: var(--ds-neutral-medium);
}

/* ── Editor rico ─────────────────────────────────────────────
   contenteditable com barra de formatação. O placeholder é ::before
   sobre o campo vazio (input real não aceita HTML). */
.lem-editor {
  margin-top: 7px; border: 1px solid var(--ds-neutral-border);
  border-radius: 8px; background: #fff; overflow: hidden;
}
.lem-editor:focus-within { border-color: var(--ds-brand-pure); }
.lem-editor-barra {
  display: flex; gap: 1px; padding: 4px 5px;
  border-bottom: 1px solid var(--ds-neutral-bg); background: #FAFCFE;
}
.lem-editor-btn {
  border: 0; background: none; cursor: pointer; border-radius: 5px;
  width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--ds-neutral-medium); font-size: 15px;
}
.lem-editor-btn:hover { background: var(--ds-brand-bg); color: var(--ds-brand-dark); }
.lem-editor-campo {
  padding: 8px 11px; min-height: 38px; max-height: 260px; overflow-y: auto;
  font-size: 12.5px; font-family: inherit; line-height: 1.55;
  color: var(--ds-neutral-darkest); outline: none;
}
.lem-editor-campo:empty::before {
  content: attr(data-placeholder); color: var(--ds-neutral-light); pointer-events: none;
}
.lem-editor-campo ul, .lem-editor-campo ol { margin: 4px 0; padding-left: 20px; }
.lem-editor-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; }

/* ── Interruptor "Mostrar tarefas concluídas" ────────────────── */
.lem-toggle {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 13px; border: 1px solid var(--ds-neutral-border); border-radius: 9px;
  background: #fff; cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--ds-neutral-dark); white-space: nowrap;
}
.lem-toggle:hover { border-color: var(--ds-brand-lighter); }
.lem-toggle input { accent-color: var(--ds-brand-dark); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.lem-toggle:has(input:checked) { border-color: var(--ds-brand-lighter); background: var(--ds-brand-bg); color: var(--ds-brand-dark); }

.lem-anexo {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--ds-neutral-border); border-radius: 8px;
  font-size: 12px; color: var(--ds-neutral-dark);
}
.lem-anexo-tam { margin-left: auto; font-size: 10.5px; color: var(--ds-neutral-light); }
.lem-anexo-drop {
  margin-top: 8px; padding: 14px; text-align: center;
  border: 1px dashed var(--ds-neutral-border); border-radius: 8px;
  font-size: 11.5px; color: var(--ds-neutral-light);
}

@media (max-width: 991.98px) {
  .lem-page .lem-wrap { height: auto; flex-direction: column; }
  .lem-grupos { width: 100%; flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--ds-neutral-border); }
  .lem-detalhe { width: 100%; }
}

/* ============================================================
   DASHBOARDS DE PROJETOS — kit comum das 4 telas
   (docs/gestao-projetos/proposta-4-telas.md §5)
   ============================================================ */
/* Barra de filtros (Tiago 31/07: "mais espaçamento entre cada campo").
   Cada filtro é uma COLUNA — rótulo em cima, controle embaixo — porque
   rótulo ao lado do controle cola um campo no outro e some com a
   fronteira entre eles. O respiro vertical (18px) separa as linhas
   quando a barra quebra; o horizontal (28px) separa os campos. */
.pj-filtros {
  display: flex; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--ds-neutral-border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
}
.pj-filtro { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pj-filtro > label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ds-neutral-light); line-height: 1;
}
.pj-select {
  border: 1px solid var(--ds-neutral-border); border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; font-family: inherit; min-width: 150px;
  color: var(--ds-neutral-darkest); background: #fff; outline: none; cursor: pointer;
}
.pj-select:focus { border-color: var(--ds-brand-pure); }

/* Grupo de caixinhas (entidades): cada opção é um alvo de clique
   inteiro, não só o quadradinho de 13px. */
/* Altura MÍNIMA, não travada (Fable 19/08): com a pill CORPORATIVO (e a
   "Sem entidade", quando o dado a exige) o grupo passa a quebrar em duas
   linhas nas larguras comuns — e uma altura fixa de 36px fazia a segunda
   linha invadir o filtro de baixo. Alinhada com os selects quando cabe em
   uma linha, cresce para baixo quando não cabe. */
.pj-chks {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 36px; row-gap: 8px;
}
.pj-chk {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--ds-neutral-darkest);
  border: 1px solid var(--ds-neutral-border); border-radius: 8px;
  padding: 7px 11px; line-height: 1; user-select: none;
  transition: border-color .12s, background .12s;
}
.pj-chk:hover { border-color: var(--ds-brand-pure); }
.pj-chk input { margin: 0; cursor: pointer; }
.pj-chk:has(input:checked) {
  border-color: var(--ds-brand-pure); background: #EFF7FF;
  color: var(--ds-brand-pure); font-weight: 600;
}

/* Barra EMPILHADA (tela 3, Fable 19/08): o grupo de status vem do dado e
   pode ter três caixinhas ou dez. Lado a lado com o seletor de projeto,
   empurraria o projeto para fora da tela; e a altura travada de 36px do
   .pj-chks cortaria a segunda linha de caixinhas assim que elas
   quebrassem. Aqui o grupo cresce para baixo, como deve. */
.pj-filtros-empilha { flex-direction: column; align-items: stretch; gap: 14px; }
.pj-filtros-empilha .pj-chks { height: auto; row-gap: 8px; }

/* A contagem ao lado do nome do status: presente, sem competir com ele. */
.pj-chk .pj-chk-n { font-variant-numeric: tabular-nums; opacity: .6; font-weight: 400; }

/* Ponto de cor da pill de ENTIDADE (Tiago 19/08): a marca aparece na
   caixinha com a MESMA cor do chip .ent-tag das tabelas — duas cores para
   a mesma entidade na mesma tela seria a régua se partindo em duas.
   Corporativo é navy da base do Sistema Indústria: ele não é uma marca,
   é a soma delas. */
.pj-chk .pj-ent-ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block;
}
.ent-corp { background: #164194; }
.ent-sem  { background: #B0B7C3; }

/* Ações da barra. Sem separador vertical de propósito: a barra quebra em
   duas linhas nas larguras comuns, e um traço herdado da linha de cima
   fica pendurado no vazio. */
.pj-filtro-acoes { display: flex; align-items: center; gap: 10px; height: 36px; }
.pj-btn-limpar {
  display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 14px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  color: var(--ds-neutral-medium); background: #fff;
  border: 1px solid var(--ds-neutral-border); border-radius: 8px;
}
.pj-btn-limpar:hover { border-color: var(--ds-brand-pure); color: var(--ds-brand-pure); }

.pj-frescor {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  align-self: flex-end; height: 36px;
  font-size: 11.5px; color: var(--ds-neutral-light);
}
.pj-frescor .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-success); }

.pj-card { background:#fff; border:1px solid var(--ds-neutral-border); border-radius:12px; padding:16px; height:100%; }
.pj-card-titulo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700; color: var(--ds-neutral-darkest); margin-bottom: 4px;
}
.pj-card-sub { font-size: 11.5px; color: var(--ds-neutral-light); margin-bottom: 10px; }

.pj-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pj-tabela th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ds-neutral-light);
  padding: 8px 10px; border-bottom: 1px solid var(--ds-neutral-border);
}
.pj-tabela td { padding: 10px; border-bottom: 1px solid var(--ds-neutral-bg); color: var(--ds-neutral-dark); }
.pj-tabela tr:hover td { background: #FAFCFE; }
.pj-chave { font-size: 10.5px; font-weight: 700; color: var(--ds-brand-medium); text-decoration: none; }
.pj-chave:hover { text-decoration: underline; }

.pj-ans { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.pj-ans-barra { flex: 1 1 auto; height: 6px; border-radius: 100px; background: var(--ds-neutral-bg); overflow: hidden; }
.pj-ans-preench { height: 100%; border-radius: 100px; background: var(--ds-success); }
.pj-ans-preench.atencao { background: var(--ds-warning); }
.pj-ans-preench.risco   { background: var(--ds-error); }
.pj-ans-num { font-size: 11px; font-weight: 700; color: var(--ds-neutral-medium); white-space: nowrap; }

.pj-motivo {
  font-size: 10px; font-weight: 700; border-radius: 4px; padding: 2px 6px; white-space: nowrap;
}
.pj-motivo.ans     { background: #FEECEC; color: #C62828; }
.pj-motivo.silencio{ background: #FFF4E5; color: #C87A00; }
.pj-motivo.regrediu{ background: #EDE4FF; color: #5B2FB8; }

/* Árvore de itens da sprint: subtarefa entra logo abaixo do pai, com
   recuo e conector "└" — hierarquia à vista sem virar componente novo. */
.pj-tabela td.pj-sub { padding-left: 30px; }
.pj-arvore { color: var(--ds-neutral-light); margin-right: 5px; }
/* Tipo do item (tipo_fonte do Jira): outline neutro de propósito — tipo é
   rótulo, não estado, e não pode disputar cor com os badges de status. */
.pj-tipo {
  font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 1px 5px;
  white-space: nowrap; letter-spacing: .03em;
  color: var(--ds-neutral-medium); border: 1px solid var(--ds-neutral-border);
}
/* Subtarefa órfã (pai fora da sprint): cita o pai em vez de fingir árvore. */
.pj-pai-ref { font-size: 10.5px; color: var(--ds-neutral-light); }

.pj-parado { font-size: 10.5px; font-weight: 700; color: var(--ds-neutral-medium); }
.pj-parado.alerta { color: var(--ds-error); }

.pj-pessoa { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.pj-pessoa-barra { flex: 1 1 auto; height: 8px; border-radius: 100px; background: var(--ds-neutral-bg); overflow: hidden; }
.pj-pessoa-preench { height: 100%; background: var(--ds-brand-pure); border-radius: 100px; }
.pj-pessoa-preench.cheio { background: var(--ds-warning); }
.pj-pessoa-nome { width: 118px; flex: 0 0 auto; font-size: 12.5px; color: var(--ds-neutral-darkest); }
.pj-pessoa-h { width: 52px; flex: 0 0 auto; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--ds-neutral-medium); }

.pj-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--ds-neutral-border); margin-bottom: 14px; }
.pj-aba {
  border: 0; background: none; padding: 9px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--ds-neutral-medium); cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pj-aba.ativa { color: var(--ds-brand-dark); border-bottom-color: var(--ds-brand-pure); }

.pj-status-po {
  background: var(--ds-brand-bg); border-left: 3px solid var(--ds-brand-pure);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
}
.pj-status-po .quando { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-brand-medium); }
.pj-status-po p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--ds-neutral-dark); }

/* ============================================================
   GESTÃO DIGITAIS — painel da equipe interna (gestao_dash_digitais)
   Complementa o kit .pj-* com o que é próprio de gestão de gente:
   distribuição de carga, presença e higiene de apontamento.
   ============================================================ */

/* Alternador Superintendência × Gerência — o eixo da tela */
.gd-eixo { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-eixo button {
  border: 1px solid var(--ds-border); background: #fff; border-radius: 9px;
  padding: 8px 14px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ds-neutral-dark); cursor: pointer; transition: all .12s;
}
.gd-eixo button:hover { border-color: var(--ds-brand-pure); }
.gd-eixo button[aria-pressed="true"] {
  background: var(--ds-brand-pure); border-color: var(--ds-brand-pure); color: #fff;
}

/* Distribuição de carga: barra por pessoa contra faixa de referência.
   Deliberadamente NÃO é ranking — a faixa é a referência, não o topo. */
.gd-carga { display: grid; gap: 9px; }
.gd-carga-linha {
  display: grid; grid-template-columns: 132px 1fr 58px; gap: 10px; align-items: center;
}
.gd-carga-nome {
  font-size: 12px; color: var(--ds-neutral-dark); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.gd-carga-trilho {
  position: relative; height: 22px; background: #F4F6F8; border-radius: 6px; overflow: hidden;
}
/* faixa esperada — o "normal", desenhado como zona e não como linha de corte */
.gd-carga-faixa {
  position: absolute; top: 0; bottom: 0; background: rgba(40,188,0,.13);
  border-left: 1px dashed rgba(40,188,0,.55); border-right: 1px dashed rgba(40,188,0,.55);
}
.gd-carga-barra { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 4px; background: var(--ds-brand-pure); }
.gd-carga-barra.abaixo { background: #F5B700; }
.gd-carga-barra.acima  { background: #FC4242; }
.gd-carga-val { font-size: 11.5px; font-weight: 600; color: var(--ds-neutral-dark); text-align: right; }

/* Presença — quem está fora, sem alarme visual desnecessário */
.gd-fora { display: flex; flex-wrap: wrap; gap: 9px; }
.gd-fora-chip {
  display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid var(--ds-border); border-radius: 10px; padding: 7px 12px 7px 8px;
}
.gd-fora-chip .av {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ds-brand-pure);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gd-fora-chip .nm { font-size: 12.5px; font-weight: 600; color: var(--ds-neutral-dark); }
.gd-fora-chip .dt { font-size: 10.5px; color: var(--ds-neutral-light); margin-top: 1px; }

/* Comparativo entre as duas gerências */
.gd-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.gd-comp-card { border: 1px solid var(--ds-border); border-radius: 12px; padding: 15px 16px; background: #fff; }
.gd-comp-nome { font-size: 12.5px; font-weight: 700; color: var(--ds-neutral-dark); margin-bottom: 3px; }
.gd-comp-sub  { font-size: 11px; color: var(--ds-neutral-light); margin-bottom: 13px; }
.gd-comp-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-top: 1px solid #F2F4F6; font-size: 12px;
}
.gd-comp-linha:first-of-type { border-top: none; }
.gd-comp-linha b { font-size: 14px; color: var(--ds-neutral-dark); }
.gd-comp-linha span { color: var(--ds-neutral-light); }

/* Aviso de origem do número — herda o padrão das outras telas */
.gd-nota {
  font-size: 11px; color: var(--ds-neutral-light); line-height: 1.55; margin-top: 9px;
}
.gd-nota code { font-size: 10.5px; background: #F4F6F8; padding: 1px 5px; border-radius: 4px; }

/* Bloqueio de cadastro: a gerência não tem lotação preenchida */
.gd-bloqueio {
  background: #FFF8E6; border-left: 3px solid #F5B700; border-radius: 8px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--ds-neutral-dark);
}

/* KPI compacto — o .metric-card é flex horizontal com ícone de 48px e não
   cabe 6 em linha. Variante própria em vez de sobrescrever o componente,
   que outras telas usam no formato original. */
.gd-kpi {
  background: #fff; border: 1px solid var(--ds-neutral-border);
  border-radius: 10px; padding: 14px 16px; height: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.gd-kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ds-neutral-light);
  line-height: 1.4; min-height: 2.8em;
}
.gd-kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ds-neutral-darkest); margin-top: 2px; }
.gd-kpi-sub   { font-size: 11px; color: var(--ds-neutral-light); margin-top: 4px; line-height: 1.45; }

/* Legenda de cores do painel de gestão */
.gd-legenda {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 11px 0 2px; font-size: 11.5px; color: var(--ds-neutral-light);
}
.gd-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gd-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* ============================================================
   METAS — "Minhas Metas" (M-2). Duas distinções que a tela
   precisa carregar visualmente, porque confundi-las destrói a
   confiança no número:
     • ausência de apuração ≠ zero  → .mt-sem-apuracao é neutro,
       nunca vermelho;
     • FOTO congelada do marco ≠ cálculo corrente → .mt-foto vive
       num rodapé separado do .mt-atingimento.
   ============================================================ */
.mt-lista { display: grid; gap: 12px; }
.mt-card {
  background: #fff; border: 1px solid var(--ds-border);
  border-radius: 12px; padding: 15px 17px;
}
.mt-card-h { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.mt-card-h h3 {
  font-size: 14px; font-weight: 700; color: var(--ds-neutral-dark);
  margin: 0 0 7px; line-height: 1.35;
}
.mt-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--ds-neutral-bg); color: var(--ds-neutral-medium); white-space: nowrap;
}
.mt-tag.peso { background: var(--ds-brand-bg); color: var(--ds-brand-pure); }
.mt-projeto, .mt-vincular {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: #E7F1FE; color: #005BA5; text-decoration: none;
  border: 1px dashed transparent; cursor: pointer; font-family: inherit;
}
.mt-vincular { background: #fff; border-color: var(--ds-border); color: var(--ds-neutral-light); }
.mt-vincular:hover { border-color: var(--ds-brand-pure); color: var(--ds-brand-pure); }

/* atingimento CORRENTE — calculado agora */
.mt-atingimento { text-align: right; flex-shrink: 0; min-width: 92px; }
.mt-pct { font-size: 21px; font-weight: 700; line-height: 1.1; }
.mt-atingimento.ok      .mt-pct { color: #28BC00; }
.mt-atingimento.atencao .mt-pct { color: #F5B700; }
.mt-atingimento.risco   .mt-pct { color: #FC4242; }
.mt-fonte { font-size: 10px; color: var(--ds-neutral-light); margin-top: 2px; }
/* ausência de dado é NEUTRA de propósito: pintar de vermelho leria
   como "está ruim", quando o que há é "ninguém apurou ainda" */
.mt-sem-apuracao {
  flex-shrink: 0; font-size: 11px; color: var(--ds-neutral-light);
  background: var(--ds-neutral-bg); border-radius: 8px; padding: 7px 11px;
  text-align: center; max-width: 118px; line-height: 1.4;
}

.mt-desc {
  font-size: 12.5px; color: var(--ds-neutral-medium); line-height: 1.6;
  margin: 11px 0 0;
}
.mt-card-f {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid #F2F4F6; font-size: 11.5px; color: var(--ds-neutral-light);
}
.mt-card-f b { color: var(--ds-neutral-dark); font-weight: 600; }
.mt-propria  { font-style: normal; color: #005BA5; font-size: 10px; font-weight: 600; }
.mt-herdada  { font-style: normal; color: var(--ds-neutral-light); font-size: 10px; }

/* FOTOS por marco — congeladas, separadas do corrente */
.mt-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.mt-foto {
  font-size: 10.5px; padding: 4px 9px; border-radius: 7px;
  background: #F4F6F8; color: var(--ds-neutral-medium);
}
.mt-foto b { color: var(--ds-neutral-dark); margin-right: 5px; font-weight: 600; }
.mt-foto i { font-style: normal; margin-left: 5px; opacity: .7; }
.mt-foto.manual { background: #E9F8E4; color: #2E7D32; }

/* Marcos do ciclo */
.mt-marcos-t { font-size: 12px; font-weight: 700; color: var(--ds-neutral-dark); margin-bottom: 9px; }
.mt-marcos { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-marco {
  font-size: 11.5px; color: var(--ds-neutral-medium);
  background: var(--ds-neutral-bg); border-radius: 8px; padding: 6px 11px;
}
.mt-marco b { display: block; color: var(--ds-neutral-dark); font-size: 10.5px; font-weight: 600; }
.mt-marcos-nota { font-size: 10.5px; color: var(--ds-neutral-light); margin-top: 9px; }

.mt-alerta { border-radius: 9px; padding: 12px 15px; font-size: 12.5px; line-height: 1.6; }
.mt-alerta.info    { background: var(--ds-brand-bg); border-left: 3px solid var(--ds-brand-pure); }
.mt-alerta.atencao { background: #FFF8E6;            border-left: 3px solid #F5B700; }
.mt-alerta.erro    { background: #FEECEC;            border-left: 3px solid #FC4242; }

/* D5 — aviso na concessão de metas por área. Vermelho de propósito:
   é a única concessão do IN que expõe a meta contratada de terceiros,
   e precisa parar o olho antes do clique. */
.conc-aviso-metas {
  display: flex; gap: 11px; align-items: flex-start;
  background: #FEECEC; border: 1px solid #F5C2C2; border-left: 3px solid #B02E2E;
  border-radius: 9px; padding: 12px 14px; margin: 4px 0 16px;
  font-size: 12.5px; line-height: 1.6; color: var(--ds-neutral-dark);
}
.conc-aviso-metas iconify-icon { font-size: 20px; color: #B02E2E; flex-shrink: 0; margin-top: 1px; }
.conc-aviso-metas strong { color: #B02E2E; }

/* Widget "Minhas Metas" na home */
.hm-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid #F2F4F6;
}
.hm-item:first-child { border-top: none; }
.hm-nome { font-size: 12.5px; color: var(--ds-neutral-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-meta { font-size: 10.5px; color: var(--ds-neutral-light); white-space: nowrap; }
.hm-peso { background: var(--ds-brand-bg); color: var(--ds-brand-pure); border-radius: 999px; padding: 1px 6px; margin-right: 6px; font-weight: 600; }
.hm-pct { font-size: 13px; font-weight: 700; min-width: 46px; text-align: right; }
.hm-pct.ok { color: #28BC00; } .hm-pct.atencao { color: #F5B700; } .hm-pct.risco { color: #FC4242; }
.hm-sem { color: var(--ds-neutral-light); font-size: 13px; min-width: 46px; text-align: right; display: inline-block; }
.hm-nota { font-size: 10.5px; color: var(--ds-neutral-light); margin-top: 9px; padding-top: 8px; border-top: 1px solid #F2F4F6; }

/* ── Véu de carregamento (Tiago 02/08) ─────────────────────────────────
   Salta na frente de tudo enquanto os dados vêm do banco — na entrada da
   tela e a cada troca de filtro. Espera 180ms antes de aparecer: resposta
   quente (cache) não pisca a tela à toa. */
.in-veu {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(18, 28, 45, .28);
  backdrop-filter: blur(1.5px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.in-veu.visivel { opacity: 1; pointer-events: all; }
.in-veu-caixa {
  background: #fff; border-radius: 14px; padding: 18px 24px;
  box-shadow: 0 12px 40px rgba(16, 40, 80, .22);
  display: flex; align-items: center; gap: 13px;
  font-family: 'Inter', Arial, sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--ds-neutral-darkest);
}
.in-veu-giro {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--ds-brand-bg); border-top-color: var(--ds-brand-pure);
  animation: in-veu-girar .7s linear infinite;
}
@keyframes in-veu-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .in-veu { transition: none; } .in-veu-giro { animation-duration: 2s; }
}

/* Selo "externo" — quem aponta no Jira mas não é pessoa do organograma
   (fornecedor). Informativo, nunca cara de erro (Tiago 03/08). */
.pj-externo {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ds-neutral-medium); background: #F2F4F6;
  border-radius: 999px; padding: 1px 6px; margin-left: 5px; vertical-align: 1px;
}

/* ── Barra do topo: trilha + frescor (Tiago 03/08) ─────────────────────
   O espaço mais nobre da tela repetia o nome da página. Agora responde
   "onde estou" (trilha, com os níveis clicáveis) e "o dado está fresco". */
.in-trilha {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  font-family: 'Inter', sans-serif; font-size: 13px; min-width: 0;
}
.in-trilha a, .in-trilha > span { color: var(--ds-neutral-medium); text-decoration: none; white-space: nowrap; }
.in-trilha a:hover { color: var(--ds-brand-pure); text-decoration: underline; }
.in-trilha-sep { color: var(--ds-neutral-light); font-size: 12px; }
.in-trilha-atual { color: #262626; font-weight: 600; font-size: 15px; }
.in-trilha-ctx {
  color: var(--ds-brand-pure); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
/* Em tela estreita sobra só o nível atual — a barra tem 72px e não pode
   quebrar em duas linhas. */
@media (max-width: 900px) {
  .in-trilha a, .in-trilha > span:not(.in-trilha-atual):not(.in-trilha-ctx),
  .in-trilha .in-trilha-sep:not(.in-trilha-ctx-sep) { display: none; }
}

.in-frescor-topo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ds-neutral-medium);
  padding: 5px 10px; border-radius: 999px; background: #F7F8FA; white-space: nowrap;
}
.in-frescor-topo .ponto { width: 7px; height: 7px; border-radius: 50%; background: #28BC00; flex: none; }
.in-frescor-topo .ponto.velho { background: #FF9800; }
@media (max-width: 780px) { .in-frescor-topo { display: none; } }

/* Entidades do Sistema Indústria nas cores oficiais (Tiago 03/08) —
   o chip vira a marca, não mais um cinza genérico. */
.ent-tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  border-radius: 999px; padding: 2px 10px; margin-right: 5px; letter-spacing: .2px;
}
.ent-cni   { background: #2196C9; }
.ent-sesi  { background: #5CB85C; }
.ent-senai { background: #E8542A; }
.ent-iel   { background: #7FCAC3; }

/* Tooltip com a lista de épicos da faixa + painel clicável (03/08) */
.pj-tip { padding: 9px 11px; font-family: 'Inter', sans-serif; font-size: 11.5px; max-width: 340px; }
.pj-tip-h { font-weight: 700; margin-bottom: 5px; color: var(--ds-neutral-darkest); }
.pj-tip-l { display: flex; gap: 5px; align-items: baseline; padding: 1px 0; color: var(--ds-neutral-dark); }
.pj-tip-d { margin-left: auto; color: var(--ds-neutral-light); font-weight: 600; }
.pj-tip-m { margin-top: 5px; font-size: 10.5px; color: var(--ds-neutral-light); font-style: italic; }

.pj-faixa-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 8px 2px 6px; border-top: 1px solid #EEF2F7; margin-top: 6px; }
.pj-faixa-x { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1;
  color: var(--ds-neutral-light); cursor: pointer; }
.pj-faixa-itens { max-height: 240px; overflow-y: auto; }
.pj-faixa-item { display: flex; gap: 8px; align-items: baseline; padding: 5px 2px;
  border-bottom: 1px solid #F6F8FA; font-size: 12.5px; }
.pj-faixa-item a { font-weight: 600; color: var(--ds-brand-pure); text-decoration: none; white-space: nowrap; }
.pj-faixa-item a:hover { text-decoration: underline; }
/* Quem estica é DECLARADO (.pj-col-flex), não deduzido pela posição.
   A regra antiga era `span:nth-of-type(1)` — o primeiro span da linha —, o
   que funcionava só porque a coluna 1 era sempre a chave do Jira (um <a>,
   não um span). Em lista sem link, como "squads em sprint" na Home, ela
   pegava a coluna errada e desalinhava a linha inteira. Como todo painel
   agora sai de expande.js, que sempre marca a coluna certa, a regra por
   posição saiu de cena. */

/* ── Expansão (expande.js): o painel virou componente (Tiago 07/08) ──────
   As classes acima continuam valendo — o componente monta EXATAMENTE o
   mesmo HTML, para que as telas migradas não mudem de aparência. O que
   entra aqui é só o que a peça reutilizável precisou a mais. */

/* Nas telas que já expandiam, a coluna que estica é o título — a mesma que
   a regra por posição pegava. O desenho delas não mudou. */
.pj-faixa-item .pj-col-flex { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Primeira coluna forte no lugar da chave do Jira (que tem largura quase
   uniforme): sem um piso de largura, "SQUACK" e "SQUADJAH" desalinhavam a
   coluna seguinte e a lista deixava de se ler como tabela. */
.pj-faixa-item .pj-col-forte { flex: 0 0 auto; font-weight: 600;
  color: var(--ds-neutral-darkest); white-space: nowrap; min-width: 108px; }

/* Lista cortada tem que DIZER que foi cortada. Também serve de recado
   quando a resposta é "nenhum" — zero continue sendo uma resposta. */
.pj-faixa-nota { font-size: 11px; color: var(--ds-neutral-light); padding: 7px 2px 2px; }

/* ── Badges da coluna direita das listas expandidas (Tiago 13/08) ───────
   A ponta direita da linha era uma frase só ("Desenvolvimento · SQUACK ·
   ANS 49% (88/180)"): tudo do mesmo tamanho, da mesma cor, e o que
   importava — a ANS estourada — tinha o mesmo peso do nome da squad. As
   três informações viram três pílulas, e só a ANS carrega cor de juízo.

   Mesma paleta "soft" do .badge-soft do admin (admin-ui.css): fundo
   lavado, texto na cor cheia. O HTML sai de expande.js (`render` na
   coluna), que escapa texto e peneira a classe — aqui é só a pintura. */
.exp-badges {
  display: inline-flex; align-items: center; justify-content: flex-end;
  flex: 0 1 auto; gap: 6px; flex-wrap: wrap; min-width: 0;
}
.exp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
  background: #EEF1F4; color: var(--ds-neutral-medium);
}

/* STATUS do projeto — a cor é só para reconhecer a etapa de relance;
   nenhuma delas quer dizer "bom" ou "ruim" (esse juízo é o da ANS).
   Padrão oficial do sistema: quem decide a classe é STATUS_PADRAO em
   /js/expande.js, que também guarda a cor SÓLIDA da mesma etapa para os
   gráficos. Mexeu aqui, mexa lá — as duas leituras têm de bater.
   O texto de cada par foi escurecido até AA (≥4.5:1) sobre o fundo soft. */
.exp-badge.exp-st-backlog    { background: #EEF1F4; color: #4B5563; }
.exp-badge.exp-st-estrategia { background: #F3F4F6; color: #656C77; }
.exp-badge.exp-st-design     { background: #E4F1FB; color: #0A6FB0; }
.exp-badge.exp-st-dev        { background: #EAF6FE; color: #12719E; }
.exp-badge.exp-st-area       { background: #F1EAFE; color: #6128C9; }
.exp-badge.exp-st-manut      { background: #E1F4F5; color: #0B6E79; }
.exp-badge.exp-st-sust       { background: #E5E7EB; color: #1F2937; }
.exp-badge.exp-st-pausado    { background: #FEECEC; color: #B01F1F; }
.exp-badge.exp-st-outro      { background: #EEF1F4; color: var(--ds-neutral-medium); }

/* SQUAD — quem fez, não como está: chip mudo, para não competir com a
   ANS na mesma linha. */
.exp-badge.exp-squad { background: #F1F3F6; color: #5B6572; }

/* ANS — a única pílula que julga. Verde/âmbar/vermelho seguem a FAIXA que
   o service carimba (verde < 70%, atenção 70–85%, risco > 85%, estourado
   > 100% na manutenção); a tela não recorta de novo.
   "Especial" e "sem contagem" não são zero nem verde: são ausência de
   medição, e por isso saem da escala de cor. */
.exp-badge.exp-ans-verde     { background: #E7F7E4; color: #1E8E00; }
.exp-badge.exp-ans-atencao   { background: #FFF3E0; color: #B45309; }
.exp-badge.exp-ans-risco     { background: #FEECEC; color: #C62828; }
.exp-badge.exp-ans-estourado { background: #FBDCDC; color: #A31515; }
.exp-badge.exp-ans-especial  { background: #F4EEFE; color: #7A4DE8; }
.exp-badge.exp-ans-sem       { background: #F4F6F8; color: #98A2AE; font-weight: 500; }

/* Tela estreita: a linha continua de UMA linha até não caber mais — aí as
   pílulas quebram entre si, sem empurrar o título para fora. */
@media (max-width: 640px) {
  .pj-faixa-item { flex-wrap: wrap; }
  .exp-badges { justify-content: flex-start; }
}

/* Big number clicável: precisa PARECER clicável, e o foco do teclado
   precisa aparecer. Sem o anel visível, role=button é promessa vazia. */
.pj-expansivel { cursor: pointer; }
.pj-expansivel:hover { border-color: var(--ds-brand-pure); }
.pj-expansivel:focus-visible { outline: 2px solid var(--ds-brand-pure); outline-offset: 2px; }
.pj-expansivel[aria-expanded="true"] { border-color: var(--ds-brand-pure); box-shadow: 0 0 0 1px var(--ds-brand-pure) inset; }

/* Painel que não mora dentro de um .pj-card (o das linhas de big numbers,
   na Home e nas Sprints): ganha a casca do card e some quando vazio. */
.pj-expansao-solta:empty { display: none; }
.pj-expansao-solta {
  background: #fff; border: 1px solid var(--ds-neutral-border);
  border-radius: 10px; padding: 2px 18px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pj-expansao-solta .pj-faixa-cab { border-top: 0; margin-top: 0; padding-top: 12px; }
.pj-expansao-solta:focus-visible { outline: 2px solid var(--ds-brand-pure); outline-offset: 2px; }

/* Prazo dos itens atribuídos na Home (03/08) */
.jira-prazo { font-size: 10.5px; font-weight: 600; color: var(--ds-neutral-light);
  white-space: nowrap; align-self: center; }
.jira-prazo.perto { color: #FF9800; }
.jira-prazo.hoje { color: #E8542A; }
.jira-prazo.atrasado { color: #FC4242; }

/* ── Barra do topo: busca global ⌘K (Tiago 03/08) ──────────────────────
   Terceira peça da barra. Até aqui só se chegava a um projeto navegando
   até a tela e usando o filtro de lá. */
/* Centralizada no espaço entre a trilha e o lado direito (Tiago 05/08). */
/* Busca centralizada no MEIO do header (não do <ul> da esquerda):
   âncora é o nav.navbar DENTRO do topbar — NUNCA mexer no position do
   .topbar em si (é fixed com largura calculada pelo template; virar
   relative derruba o header pro fluxo e abre uma faixa vazia). */
.topbar .navbar { position: relative; }
.in-busca-item {
  margin: 0;
  min-width: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
@media (max-width: 1100px) {
  .in-busca-item { position: static; transform: none; margin: 0 auto; }
}
.in-busca { position: relative; display: flex; align-items: center; }
.in-busca-lupa {
  position: absolute; left: 10px; font-size: 16px;
  color: var(--ds-neutral-light); pointer-events: none;
}
.in-busca-campo {
  width: 340px; height: 36px; padding: 0 46px 0 32px;
  border: 1px solid var(--ds-neutral-border, #DFDFDF); border-radius: 999px;
  background: #F7F8FA; font-family: 'Inter', sans-serif; font-size: 13px; color: #262626;
  transition: width .18s ease, background .18s ease, border-color .18s ease;
}
.in-busca-campo::placeholder { color: var(--ds-neutral-light); }
.in-busca-campo:focus {
  width: 420px; outline: none; background: #fff;
  border-color: var(--ds-brand-pure, #005BA5); box-shadow: 0 0 0 3px rgba(0, 91, 165, .12);
}
.in-busca-atalho {
  position: absolute; right: 8px; pointer-events: none;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; line-height: 1;
  color: var(--ds-neutral-medium); background: #fff; padding: 4px 6px;
  border: 1px solid var(--ds-neutral-border, #DFDFDF); border-radius: 5px;
}
.in-busca-campo:focus ~ .in-busca-atalho { opacity: 0; }

.in-busca-painel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 300;
  width: 420px; max-width: min(420px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--ds-neutral-border, #DFDFDF);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); overflow: hidden;
}
/* Os 8 resultados + os 4 cabeçalhos de grupo cabem sem rolagem num
   notebook de 720px de altura — rolar dentro de um painel de busca é
   perder o resultado de baixo. O overflow fica como rede de segurança
   (zoom do navegador, janela baixa). */
.in-busca-lista {
  list-style: none; margin: 0; padding: 6px;
  max-height: min(530px, calc(100vh - 110px)); overflow-y: auto;
}
.in-busca-grupo {
  padding: 8px 10px 4px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ds-neutral-light);
}
.in-busca-item-res {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-family: 'Inter', sans-serif;
}
.in-busca-item-res > iconify-icon { font-size: 18px; color: var(--ds-brand-pure, #005BA5); flex: none; }
.in-busca-item-res.ativo { background: #EDF4FB; }
.in-busca-item-res.inativo .in-busca-titulo { color: var(--ds-neutral-medium); }
.in-busca-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.in-busca-titulo {
  font-size: 13.5px; font-weight: 600; color: #262626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.in-busca-sub {
  font-size: 11.5px; color: var(--ds-neutral-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.in-busca-chave {
  flex: none; font-size: 10.5px; font-weight: 600; color: var(--ds-neutral-medium);
  background: #F2F4F6; border-radius: 999px; padding: 2px 7px;
}
.in-busca-chave:empty { display: none; }
.in-busca-vazio {
  padding: 16px 12px; font-family: 'Inter', sans-serif; font-size: 12.5px;
  color: var(--ds-neutral-medium);
}
/* Região live: só existe para o leitor de tela anunciar a contagem —
   invisível, mas NÃO display:none (o que a tiraria da árvore). */
.in-busca-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Em tela estreita a trilha já encolheu: a busca vira só a lupa (o campo
   cresce no foco e cobre o que precisar). */
@media (max-width: 900px) {
  .in-busca-campo { width: 36px; padding-right: 10px; }
  .in-busca-campo:focus { width: min(300px, 60vw); }
  .in-busca-atalho { display: none; }
}

/* Orbe VIVO: avatar 22px que anima em ritmo calmo (chat de criação —
   Tiago 16/08). O paused do --p continua a regra dos históricos. */
.orbe-core--p.orbe-core--vivo .orbe-blob { animation-play-state: running; filter: blur(.6px); }