@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --azul: #1a4f8b;
  --azul-escuro: #123a68;
  --marca-azul: #2a97e8;   /* azul vivo da logo Speria */
  --marca-rosa: #ec2f79;   /* rosa/magenta da logo Speria */
  --marca-gradiente: linear-gradient(100deg, var(--marca-azul), var(--marca-rosa));
  --azul-marinho: #0e1930;   /* fundo do menu lateral */
  --cinza-fundo: #eef1f7;
  --cinza-borda: #d9dee6;
  --texto: #22303f;
  --texto-suave: #566578;
  --fonte: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Sora", var(--fonte);
  --fonte-dado: "IBM Plex Mono", ui-monospace, monospace;
  --raio: 18px;
  --raio-pequeno: 13px;
  --sombra: 0 1px 2px rgba(20, 30, 48, 0.04), 0 6px 18px -10px rgba(20, 30, 48, 0.16);
  --sombra-hover: 0 2px 4px rgba(20, 30, 48, 0.05), 0 10px 24px -10px rgba(20, 30, 48, 0.22);

  /* Soft-UI: casca clara com relevo por dupla sombra (clara acima-esquerda,
     escura abaixo-direita) em vez de borda de linha — dá o efeito "moldado
     na mesma superficie", usado nos cartoes/paineis/botoes do app inteiro. */
  --su-fundo: #eef1f7;
  --su-superficie: #f6f8fc;
  --su-luz: rgba(255, 255, 255, 0.9);
  --su-sombra: rgba(163, 177, 198, 0.45);
  --su-relevo: 7px 7px 16px var(--su-sombra), -7px -7px 16px var(--su-luz);
  --su-relevo-suave: 4px 4px 10px var(--su-sombra), -4px -4px 10px var(--su-luz);
  --su-relevo-hover: 9px 9px 20px var(--su-sombra), -9px -9px 20px var(--su-luz);
  --su-pressionado: inset 4px 4px 9px var(--su-sombra), inset -4px -4px 9px var(--su-luz);

  /* Sentinel Intelligence: novo sistema visual (redesign 2026), ver bloco
     de classes .st-* mais abaixo no arquivo. */
  --st-navy: #001B44;
  --st-titulo: #001B44;
  --st-acao: #001B44;
  --st-acao-hover: #00081a;
  --st-navy-deep: #00081a;
  --st-cyan: #00ADEF;
  --st-magenta: #D81E5B;
  --st-success: #10B981;
  --st-warning: #F59E0B;
  --st-error: #EF4444;
  --st-slate-50: #F8FAFC;
  --st-slate-100: #F1F5F9;
  --st-slate-200: #E2E8F0;
  --st-slate-400: #94A3B8;
  --st-slate-600: #475569;
  --st-slate-800: #1E293B;
  --st-slate-900: #0F172A;
  --st-on-surface: #0b1c30;
  --st-on-surface-variant: #44474f;
  --st-white: #ffffff;
  --st-font-display: "Plus Jakarta Sans", var(--fonte, sans-serif);
  --st-font-body: "Inter", var(--fonte, sans-serif);
  --st-radius-sm: 0.5rem;
  --st-radius-lg: 1rem;
  --st-radius-full: 9999px;
  --st-shadow-card: 0 4px 12px rgba(15, 23, 42, 0.04);
  --st-shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body {
  font-family: var(--fonte);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background: var(--su-fundo);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.01em; }

/* Casco do app: barra lateral fixa + conteudo. Cada tela ainda usa <main>
   direto (mesma tag/classe de sempre), só que agora como irmao flex de
   .sidebar dentro de .app-shell, em vez de sozinho embaixo de <header>. */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; gap: 20px; padding: 20px 0 20px 20px; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--azul-marinho);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--raio);
  box-shadow: var(--su-relevo);
  transition: width 0.18s ease, opacity 0.18s ease;
}

/* Recolher sidebar (desktop): a barra encolhe pra 0 e o main ganha o
   espaço todo — util em telas com conteudo largo (ex: workflow com varias
   colunas). Botao fixo fora da sidebar (nao encolhe junto) pra sempre dar
   pra reabrir. Escondido no mobile, que ja tem seu proprio toggle. */
.sidebar-recolher-btn {
  display: none;
  position: fixed;
  top: 28px;
  left: 258px;
  z-index: 50;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--su-superficie);
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--su-relevo-suave);
  transition: left 0.18s ease;
}
.sidebar-recolher-btn:hover { color: var(--azul); box-shadow: var(--su-relevo); }
.sidebar-recolher-btn.recolhida { left: 10px; }

@media (min-width: 861px) {
  .sidebar-recolher-btn { display: flex; align-items: center; justify-content: center; }
  .sidebar.recolhida {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    box-shadow: none;
  }
}
/* Cartão branco por trás do logo: o logo GuardMark tem elementos azul
   marinho que quase somem em cima do fundo navy da sidebar/painel de auth
   — em vez de re-tematizar o painel escuro inteiro, só o logo ganha um
   fundo claro próprio, mantendo o resto do visual como já estava. */
.sidebar-logo {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 0 34px;
  padding: 12px 14px;
  line-height: 0;
  background: #fff;
  border-radius: var(--raio-pequeno);
}
/* sem aspect-ratio fixo aqui: logo personalizado de tenant pode ter
   proporção diferente da do logo padrão — cada <img> carrega a proporção
   certa via style inline (ver template), calculada a partir do arquivo
   real enviado. */
.sidebar-logo .logo { height: 68px; width: auto; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; padding: 0 14px; }
.sidebar-nav a {
  padding: 11px 16px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar-nav a.ativo {
  background: var(--marca-gradiente);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(236, 47, 121, 0.5);
}

.sidebar-rodape {
  margin-top: auto;
  padding: 16px 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sidebar-rodape .status-rpi { width: 100%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); box-shadow: none; }
.sidebar-usuario { font-size: 0.82rem; font-weight: 600; color: #fff; }
.sidebar-rodape form { width: 100%; }
.sidebar-rodape .botao-secundario { width: 100%; text-align: center; background: rgba(255, 255, 255, 0.94); box-shadow: none; }

.sub { font-size: 0.85rem; font-weight: 500; color: var(--texto-suave); }
.sub a { color: var(--azul); text-decoration: none; }
.sub a:hover { text-decoration: underline; }

main { flex: 1; min-width: 0; max-width: 1100px; margin: 0 auto; padding: 0 20px 32px; }
main.main-largo { max-width: none; }

/* Botão hambúrguer: só existe visualmente no mobile (a regra de baixo
   liga o display). Escondido por padrão pra não aparecer no desktop. */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.16); box-shadow: none; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; width: 100%; max-width: 100vw; overflow-x: hidden; padding: 0; gap: 0; }
  /* main tem "margin: 0 auto" pra centralizar quando e irmao de .sidebar
     numa linha (flex-direction: row). Com a sidebar virando topo (column),
     essa margem automática vira margem de eixo cruzado — o flexbox para de
     esticar main pra largura da tela e ele encolhe pro tamanho do conteúdo
     em vez disso, empurrando tudo pra fora da tela. Zera a margem aqui. */
  main { margin: 0; width: 100%; max-width: 100%; }
  .sidebar {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px;
    overflow-x: visible;
    gap: 0;
    border-radius: 0;
  }
  .sidebar-logo { margin: 0; padding: 6px 12px; flex-shrink: 0; }
  .sidebar-toggle { display: inline-flex; }
  /* Fechado por padrão: só abre com a classe .aberta (JS em menu.js) —
     clicar num link/enviar o form de sair navega pra outra página, que
     carrega de novo já fechada, então "fecha depois de escolher" já sai
     de graça, sem precisar de JS extra pra isso. */
  .sidebar-nav, .sidebar-rodape { display: none; width: 100%; }
  .sidebar.aberta .sidebar-nav, .sidebar.aberta .sidebar-rodape { display: flex; }
  .sidebar-nav { flex-direction: column; gap: 1px; margin-top: 10px; }
  .sidebar-nav a { border-left: 3px solid transparent; padding: 11px 12px; white-space: normal; }
  .sidebar-nav a.ativo { border-left-color: var(--marca-rosa); }
  .sidebar-rodape {
    margin-top: 12px;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 0 0;
    gap: 10px;
  }
  .sidebar-rodape .status-rpi, .sidebar-rodape .botao-secundario, .sidebar-rodape form { width: 100%; }
}

/* Pagina de busca (landing): conteudo centralizado tambem verticalmente,
   nao só encostado no topo — evita a sensacao de pagina vazia embaixo. */
.pagina-busca { min-height: calc(100vh - 40px); display: flex; align-items: center; }

/* Busca: sem card branco em volta — o proprio campo de busca é o elemento
   visual, sentado direto no fundo com o wash de cor da pagina. */
.busca-hero { padding: 40px 4px; max-width: 760px; margin: 0 auto; text-align: center; }
.busca-hero h1 { font-size: clamp(1.7rem, 3vw, 2.15rem); margin-bottom: 8px; }
.busca-ajuda { font-size: 0.92rem; color: var(--texto-suave); margin-bottom: 26px; }

/* Compacta: mesma barra de busca, mas usada no topo da pagina de
   resultados (/resultados), sem o hero grande em volta. */
.busca-cartao-resultados { padding: 20px 22px 22px; }
.busca-cartao-resultados .busca-filtros-grid { text-align: left; }

.busca-recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 44px;
  text-align: left;
}
.busca-recurso {
  padding: 4px 2px;
  border-top: 2px solid var(--cinza-borda);
  padding-top: 14px;
}
.busca-recurso-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
  background: var(--marca-gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.busca-recurso p { font-size: 0.85rem; color: var(--texto-suave); line-height: 1.55; }

.busca-barra {
  display: flex;
  align-items: stretch;
  background: var(--su-superficie);
  border: 2px solid transparent;
  border-radius: 100px;
  box-shadow: var(--su-relevo);
  padding: 6px 6px 6px 22px;
  gap: 4px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.busca-barra input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.02rem;
  color: var(--texto);
  min-width: 0;
}
.busca-barra select {
  border: none;
  border-left: 1px solid var(--cinza-borda);
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-suave);
  padding: 0 14px;
  cursor: pointer;
}
.busca-barra select:focus { color: var(--azul); }
/* destaque só no CAMPO que está recebendo o texto/seleção, não na pílula inteira (antes
   ":focus-within" contornava input+select+botão juntos com um anel só, parecia um círculo
   solto em volta de tudo em vez de indicar onde a pessoa está digitando). */
.busca-barra input:focus, .busca-barra select:focus {
  outline: 2px solid var(--marca-azul);
  outline-offset: -2px;
  border-radius: 6px;
}
.busca-barra button {
  background: var(--marca-gradiente);
  border-radius: 100px;
  padding: 0 30px;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: none;
}
.busca-barra button:hover { filter: brightness(1.07); box-shadow: none; }

.link-filtros {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--texto-suave);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 14px 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--cinza-borda);
  text-underline-offset: 3px;
}
.link-filtros:hover { color: var(--azul); text-decoration-color: var(--azul); }

.busca-filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--su-superficie);
  border: none;
  border-radius: var(--raio);
  box-shadow: var(--su-relevo-suave);
  text-align: left;
}
.busca-filtros-grid.oculto { display: none; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-aviso { font-size: 0.78rem; color: var(--st-error, #c0392b); margin-top: -2px; }
.campo-invalido { outline: 2px solid var(--st-error, #c0392b); outline-offset: 1px; }
.campo-grande { flex: 1 1 240px; }
.campo label { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; }
/* :not([type=checkbox]):not([type=radio]) -- sem isso, essa regra (pensada
   pra campo de texto) vazava pra qualquer checkbox/radio dentro de um
   .campo (ex: lista de classes de Nice do Assistente de nome/Viabilidade):
   o padding+fundo+sombra de campo de texto deformava o checkbox numa
   barra grande, empurrando ele pra cima do texto em vez de ficar do lado
   -- achado real reportado pelo usuário, com print. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  padding: 11px 14px;
  border: none;
  border-radius: var(--raio-pequeno);
  font-size: 0.95rem;
  min-width: 130px;
  background: var(--su-fundo);
  color: var(--texto);
  font-family: inherit;
  box-shadow: var(--su-pressionado);
  transition: box-shadow 0.15s;
  resize: vertical;
}
.campo input:not([type="checkbox"]):not([type="radio"]):focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  box-shadow: var(--su-pressionado), 0 0 0 3px rgba(26, 79, 139, 0.16);
}
.campo input[type="checkbox"],
.campo input[type="radio"],
.st-content .campo input[type="checkbox"],
.st-content .campo input[type="radio"] {
  /* especificidade igual (nao maior) que ".st-content .campo input" faria
     essa regra perder por ordem no arquivo -- repete o prefixo pra ganhar
     de propósito, mesmo truque já usado em .colidencia-explicacao-ia
     nesse mesmo arquivo. */
  width: auto;
  min-width: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--st-cyan, var(--azul-marinho));
}

button {
  background: var(--marca-gradiente);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--su-relevo-suave);
  transition: box-shadow 0.15s, transform 0.1s, filter 0.15s;
}
button:hover { filter: brightness(1.06); box-shadow: var(--su-relevo); }
button:active { box-shadow: var(--su-pressionado); transform: translateY(0); }
button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.status { margin: 14px 2px; color: var(--texto-suave); font-size: 0.9rem; }

.cartao {
  background: var(--su-superficie);
  border: none;
  border-radius: var(--raio);
  box-shadow: var(--su-relevo);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.cartao h2 { margin-bottom: 10px; }
.cartao h3 { margin-bottom: 10px; font-size: 1rem; }

.cartao dl { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.cartao dl div { min-width: 140px; }
.cartao dt { font-size: 0.75rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; }
.cartao dd { font-size: 0.95rem; }

.nota { margin-top: 12px; font-size: 0.85rem; color: var(--texto-suave); }

/* Tabelas largas (varias colunas) nao cabem numa tela de celular — em vez
   de espremer ou cortar conteudo, a tabela rola na horizontal dentro do
   proprio contêiner, sem afetar o resto da pagina. */
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-scroll table { min-width: 560px; }

/* .tabela-responsiva: tabela densa (ex: linha do tempo de despachos) onde
   nem a rolagem horizontal resolve bem no celular -- reportado pelo
   usuário como "ruim esteticamente, tem que arrastar pro lado" ao abrir o
   histórico de uma marca no celular. Abaixo de 640px vira uma lista de
   cartões empilhados (cada <td> com data-th="Rótulo" mostra o rótulo
   antes do valor), sem nenhuma rolagem lateral. Acima de 640px continua
   tabela normal -- afeta só quem usa essa classe, não .tabela-scroll
   genérica usada no resto do sistema. */
@media (max-width: 640px) {
  .tabela-responsiva.tabela-scroll { overflow-x: visible; }
  .tabela-responsiva table { min-width: 0; }
  .tabela-responsiva thead { display: none; }
  .tabela-responsiva table, .tabela-responsiva tbody, .tabela-responsiva tr, .tabela-responsiva td {
    display: block; width: 100%;
  }
  .tabela-responsiva tr {
    border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  .tabela-responsiva tr.despacho-complemento-linha,
  .tabela-responsiva tr.despacho-traducao-ia-linha,
  .tabela-responsiva tr.despacho-recurso-ia-linha {
    border: none; margin-top: -8px; padding-top: 0;
  }
  .tabela-responsiva td { border-bottom: none; padding: 4px 0; }
  .tabela-responsiva td[data-th]::before {
    content: attr(data-th); display: block; font-size: 0.75rem; font-weight: 600;
    color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px;
  }
  .tabela-responsiva td:empty { display: none; }
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cinza-borda); vertical-align: top; }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-suave); font-weight: 600; }
tbody tr { transition: background-color 0.1s; }
tbody tr:hover { background: #f0f4fa; }
.especificacao { max-width: 520px; }

/* Texto legal complementar do despacho (ex: cita processo conflitante e
   artigo da LPI no indeferimento) — linha extra logo abaixo do despacho,
   sem borda/hover própria pra ficar visualmente "colada" nele. */
.despacho-complemento-linha { background: #f8fafc; }
.despacho-complemento-linha:hover { background: #f8fafc; }
.despacho-complemento-linha td { border-bottom: 1px solid var(--cinza-borda); padding-top: 0; }
.despacho-complemento { margin: 0; white-space: pre-wrap; }

.resultado {
  display: block;
  background: var(--su-superficie);
  border: 2px solid transparent;
  border-radius: var(--raio-pequeno);
  padding: 13px 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--su-relevo-suave);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.resultado:hover { border-color: var(--azul); box-shadow: var(--su-relevo); transform: translateY(-2px); }
.nome-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resultado .nome { font-weight: 600; font-size: 1.02rem; }

.chips-refinar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 14px; }
.chips-refinar-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-refinar-rotulo { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; }
.chip-refinar {
  display: inline-block;
  background: #e8eef7;
  color: var(--azul-escuro);
  font-size: 0.78rem;
  font-weight: 500;
  border: none;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
}
.chip-refinar:hover { background: #d5e2f2; }
.chip-refinar.ativo { background: var(--azul); color: #fff; }
.selo-apresentacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.resultado-meta { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cinza-borda); }
.resultado-meta div { min-width: 100px; }
.resultado-meta dt { font-size: 0.68rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.resultado-meta dd { font-size: 0.85rem; color: var(--texto); }
.badge {
  display: inline-block;
  background: #e8eef7;
  color: var(--azul-escuro);
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 6px 4px 0;
}
.badge-clicavel {
  border: none;
  font: inherit;
  cursor: pointer;
}
.badge-clicavel:hover {
  background: #d5e2f2;
}

.paginacao { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }
.paginacao button { padding: 6px 14px; }
.paginacao button:disabled { background: var(--cinza-borda); cursor: default; }

.status-rpi {
  font-size: 0.76rem;
  color: var(--texto-suave);
  background: var(--su-fundo);
  box-shadow: var(--su-pressionado);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap;
  display: inline-block;
}

.mono { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; }

.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.cartao-topo h2, .cartao-topo h3 { margin-bottom: 0; }

.processo-logo {
  display: block;
  max-height: 120px;
  max-width: 260px;
  width: auto;
  height: auto;
  margin: 4px 0 16px;
  padding: 10px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  background: #fff;
  cursor: zoom-in;
  transition: box-shadow 0.15s ease;
}
.processo-logo:hover { box-shadow: var(--sombra-hover); }

.logo-lightbox {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  max-width: min(90vw, 640px);
  max-height: 90vh;
}
.logo-lightbox.aberto { display: block; }
.logo-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-hover);
  padding: 20px;
}
.logo-lightbox-fechar {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--azul-marinho);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-hover);
}
.logo-lightbox-fechar:hover { background: var(--azul); }

.botao-secundario {
  background: var(--su-fundo);
  color: var(--azul);
  border: none;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--su-relevo-suave);
}
.botao-secundario:hover { color: var(--azul-escuro); filter: none; box-shadow: var(--su-relevo); }
.botao-secundario:active { box-shadow: var(--su-pressionado); }
.botao-secundario.ativo { background: var(--marca-gradiente); color: #fff; box-shadow: none; }

/* Grafico de tendencia de uso do servidor (Configuracoes > Servidor) */
.grafico-uso { width: 100%; overflow: hidden; }
.grafico-uso-svg { width: 100%; height: 180px; display: block; }
.grafico-uso-grade { stroke: var(--cinza-borda); stroke-width: 1; }
.grafico-uso-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-uso-legenda { display: flex; gap: 18px; margin-top: 10px; font-size: 0.8rem; color: var(--texto-suave); }
.grafico-uso-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-uso-chip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.form-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }

.botoes-linha { display: flex; gap: 8px; flex-shrink: 0; }

.cartao-novidade { border-color: #c8862f; background: #fff9f0; }
.badge-novo {
  background: #c8862f;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Telas de servico (login, esqueci senha, redefinir senha): painel de
   marca escuro a esquerda (mesmo tom do menu lateral, --azul-marinho) +
   card de formulario a direita, em vez do card solto e generico de antes. */
.auth-shell { display: flex; min-height: 100vh; font-family: var(--st-font-body, var(--fonte-corpo)); background: var(--st-slate-50, #f4f6fa); }
.auth-marca {
  flex: 1 1 42%;
  background: var(--st-navy, var(--azul-marinho));
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.auth-marca::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -260px;
  bottom: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 173, 239, 0.28), rgba(216, 30, 91, 0.16) 60%, transparent 72%);
}
.auth-logo-card {
  display: inline-flex;
  align-items: center;
  /* Centralizado em qualquer tamanho de tela (desktop, tablet, celular,
     app Windows/Electron) e com qualquer logo (padrão GuardMark ou
     personalizado de tenant, mesma classe pros dois) -- ficava
     align-self: flex-start, que só fazia sentido visualmente num recorte
     de tela específico e prendia a logo à esquerda nos demais (achado
     real reportado pelo usuário, com print). */
  align-self: center;
  flex-shrink: 0;
  background: #fff;
  padding: 12px 18px;
  border-radius: var(--st-radius-sm, var(--raio));
  position: relative;
  z-index: 1;
}
.auth-logo { height: 90px; width: auto; display: block; }
.auth-marca-centro, .auth-marca-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.auth-marca-centro h1, .auth-marca-texto h1 { font-family: var(--st-font-display, var(--fonte-titulo)); font-size: 2.1rem; letter-spacing: 0.04em; margin-bottom: 10px; }
.auth-marca-centro p, .auth-marca-texto p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.68); line-height: 1.6; }
/* Duas frases, uma pra cada contexto (configuráveis separado em
   Configurações > Marca personalizada) -- desktop mostra a "web",
   celular/app troca pra "mobile" (ver media query abaixo). */
.auth-tagline-mobile { display: none; }

.auth-form-area {
  flex: 1 1 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

@media (max-width: 780px) {
  .auth-shell { flex-direction: column; }
  .auth-marca { flex: 0 0 auto; padding: 32px 28px; align-items: center; }
  .auth-marca::before { width: 380px; height: 380px; right: -160px; bottom: -200px; }
  .auth-marca-centro, .auth-marca-texto { padding: 20px 0; }
  /* Nome abaixo da logo é redundante no celular -- a própria imagem já
     traz o nome escrito, e no mobile cada linha de texto custa espaço
     de tela precioso. Esconde o nome repetido, mostra a frase
     personalizada (configurável) no lugar dele. */
  .auth-marca-centro h1, .auth-marca-texto h1 { display: none; }
  .auth-tagline-web { display: none; }
  .auth-tagline-mobile { display: block; font-size: 0.88rem; }
}

.login-cartao {
  width: 100%; max-width: 380px; text-align: center; padding: 36px 32px;
  background: var(--st-white, #fff); border: 1px solid var(--st-slate-200, #e2e8f0);
  border-radius: var(--st-radius-lg, var(--raio)); box-shadow: var(--st-shadow-card-hover, var(--sombra-hover));
}
.login-sub { display: block; margin-bottom: 20px; font-size: 1.05rem; font-weight: 700; font-family: var(--st-font-display, var(--fonte-titulo)); color: var(--st-titulo); }
.login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-form button {
  margin-top: 4px; background: var(--st-navy, var(--azul));
  color: #fff; border: none; border-radius: var(--st-radius-sm, var(--raio)); padding: 11px 18px; font-weight: 600; cursor: pointer; font-family: var(--st-font-body);
}
.login-form button:hover { background: var(--st-navy-deep, var(--azul)); }
.login-erro {
  background: #fdecea;
  color: #a12a2a;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.login-link { margin-top: 16px; font-size: 0.85rem; }
.login-link a { color: var(--azul); text-decoration: none; }
.login-link a:hover { text-decoration: underline; }

.papel-form select {
  padding: 4px 8px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
}

/* Alternância de visualização (marcas monitoradas): detalhes / lista / grade */
.visualizacao-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.campo-busca-lista {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 8px 14px;
  border: none;
  border-radius: 100px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--su-fundo);
  color: var(--texto);
  box-shadow: var(--su-pressionado);
}
.campo-busca-lista:focus { outline: none; box-shadow: var(--su-pressionado), 0 0 0 3px rgba(26, 79, 139, 0.16); }
#ordenar-monitoradas, #ordenar-clientes {
  padding: 7px 12px;
  border: none;
  border-radius: var(--raio-pequeno);
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--su-fundo);
  color: var(--texto);
  box-shadow: var(--su-pressionado);
  cursor: pointer;
}
.visualizacao-toolbar span { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; margin-right: 4px; }
.visualizacao-btn {
  background: #fff;
  color: var(--texto-suave);
  border: 1px solid var(--cinza-borda);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  box-shadow: none;
}
.visualizacao-btn:hover { background: #f0f4fa; box-shadow: none; }
.visualizacao-btn.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }

/* "detalhes" é o padrão atual (.item-monitorado já usa .cartao normalmente) */

/* "lista": cards compactos, uma linha cada — esconde os rótulos do dl e
   deixa só os valores lado a lado */
#lista-monitoradas.visualizacao-lista .item-monitorado { padding: 10px 16px; margin-bottom: 6px; }
#lista-monitoradas.visualizacao-lista .item-monitorado .cartao-topo { margin-bottom: 4px; }
#lista-monitoradas.visualizacao-lista .item-monitorado .cartao-topo h3 { font-size: 0.92rem; }
#lista-monitoradas.visualizacao-lista .item-monitorado dl { gap: 4px 20px; }
#lista-monitoradas.visualizacao-lista .item-monitorado dt { display: none; }
#lista-monitoradas.visualizacao-lista .item-monitorado dd { font-size: 0.82rem; color: var(--texto-suave); }
#lista-monitoradas.visualizacao-lista .item-monitorado .nota { margin-top: 4px; font-size: 0.78rem; }

/* "grade": 3 colunas, campos empilhados (fica melhor num card mais estreito) */
#lista-monitoradas.visualizacao-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
#lista-monitoradas.visualizacao-grade .item-monitorado { margin-bottom: 0; }
#lista-monitoradas.visualizacao-grade .item-monitorado .cartao-topo { flex-wrap: wrap; }
#lista-monitoradas.visualizacao-grade .item-monitorado dl { flex-direction: column; gap: 6px; }
#lista-monitoradas.visualizacao-grade .item-monitorado .nota { font-size: 0.78rem; }

@media (max-width: 820px) {
  #lista-monitoradas.visualizacao-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #lista-monitoradas.visualizacao-grade { grid-template-columns: 1fr; }
}

.form-editar-apelido { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cinza-borda); }
.form-editar-apelido.aberto { display: flex; }

.form-editar-contato { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cinza-borda); }
.form-editar-contato.aberto { display: flex; }
.item-contato-inativo { opacity: 0.6; }

/* Painel resumo antes da lista: panorama de relance (total, novidades,
   distribuicao por status) sem precisar rolar os cartoes. */
.painel-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.resumo-tile {
  background: var(--su-superficie);
  border: 2px solid transparent;
  border-radius: var(--raio);
  box-shadow: var(--su-relevo-suave);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resumo-tile-alerta { border-color: #c8862f; }
.resumo-tile-status { border-width: 2px; }
a.resumo-tile { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s; }
a.resumo-tile:hover { box-shadow: var(--su-relevo); transform: translateY(-2px); border-color: var(--marca-azul); }
.resumo-numero { font-family: var(--fonte-dado); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.resumo-rotulo { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; }

/* Medidores circulares (tipo relogio/velocimetro) pra CPU/Memoria/Disco
   na tela de saude do servidor, em vez de so o numero cru. */
.medidor-tile {
  background: var(--su-superficie);
  border-radius: var(--raio);
  box-shadow: var(--su-relevo-suave);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.medidor-anel { position: relative; width: 104px; height: 104px; }
.medidor-svg { width: 100%; height: 100%; }
.medidor-trilha { fill: none; stroke: var(--su-fundo); stroke-width: 10; }
.medidor-progresso {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}
.medidor-centro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.medidor-numero { font-family: var(--fonte-dado); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.medidor-sub { font-size: 0.72rem; color: var(--texto-suave); }

/* Tiles/legenda clicaveis: filtram a lista abaixo por status (ver
   visualizacao.js). Cursor + leve elevacao no hover avisam que e clicavel;
   filtro-ativo destaca qual filtro esta selecionado no momento. */
.resumo-tile-filtro { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s; }
.resumo-tile-filtro:hover { box-shadow: var(--sombra-hover); transform: translateY(-1px); }
.resumo-tile-filtro.filtro-ativo { border-color: var(--marca-azul); border-width: 2px; box-shadow: 0 0 0 3px rgba(42, 151, 232, 0.14), var(--sombra); }

.legenda-item-filtro { cursor: pointer; padding: 2px; border-radius: 100px; transition: box-shadow 0.15s; }
.legenda-item-filtro:hover .status-chip { filter: brightness(0.96); }
.legenda-item-filtro.filtro-ativo { box-shadow: 0 0 0 2px var(--marca-azul); }

.legenda-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  background: var(--su-superficie);
  border: none;
  border-radius: var(--raio);
  box-shadow: var(--su-relevo-suave);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.82rem;
}
.legenda-titulo { font-weight: 600; color: var(--texto-suave); margin-right: 4px; }
.legenda-item { display: inline-flex; align-items: center; white-space: nowrap; }

/* Chip de status: icone + cor + rotulo, mais rapido de escanear numa lista
   longa do que so uma bolinha colorida (referencia: dossie concorrencial). */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 3px 10px 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.status-icone { font-size: 0.85em; line-height: 1; }

/* Cartao de colidencia: cartao escuro (analise/alerta, propositalmente
   destacado do resto do app claro) inspirado no padrao "Sua marca x Marca
   nova + barra de nivel + recomendacao" visto no material do Ilupi. */
.colidencia-cartao {
  background: #141b2c;
  border: 1px solid #1f293e;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px 22px;
  margin-bottom: 18px;
  color: #fff;
}
.colidencia-eyebrow {
  font-family: var(--fonte-dado);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  margin-bottom: 16px;
}

.colidencia-comparacao {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.colidencia-marca {
  flex: 1 1 220px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-pequeno);
  padding: 12px 14px;
}
.colidencia-rotulo { font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 5px; }
.colidencia-nome { font-family: var(--fonte-titulo); font-size: 1.08rem; font-weight: 700; }
.colidencia-nome a { color: #fff; text-decoration: none; }
.colidencia-nome a:hover { color: var(--marca-azul); }
.colidencia-processo { font-family: var(--fonte-dado); font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 4px; }
.colidencia-x {
  align-self: center;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 2px;
}

.colidencia-metrica-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; }
.colidencia-metrica-linha strong { font-family: var(--fonte-dado); font-size: 1.05rem; color: #fff; }
.colidencia-barra-fundo { background: rgba(255, 255, 255, 0.12); border-radius: 100px; height: 7px; overflow: hidden; margin-bottom: 16px; }
.colidencia-barra-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #e2954f, #e05252); }
.colidencia-barra-fill.risco-alta { background: linear-gradient(90deg, #e05252, #ff6b6b); }

.colidencia-evidencias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
/* Explicação da IA vive dentro do card ESCURO (.colidencia-cartao) --
   .nota sozinha é cinza escuro pensado pra fundo branco, ficava
   ilegível aqui (achado real reportado pelo usuário) -- 2x, porque a
   1ª correção (.colidencia-cartao .colidencia-explicacao-ia, duas
   classes) empatava em especificidade com .st-content .nota (também
   duas classes) definida DEPOIS no arquivo, que vencia o empate por
   ordem de declaração. .colidencia-explicacao-ia repetida como classe
   dobra a especificidade (três seletores de classe) e passa a ganhar
   sempre, independente de onde .st-content .nota estiver no arquivo. */
.colidencia-cartao .colidencia-explicacao-ia.colidencia-explicacao-ia {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--raio-pequeno);
  padding: 12px 14px;
  line-height: 1.5;
}

.colidencia-evidencias .tag-escura {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.76rem;
  border-radius: 100px;
  padding: 3px 11px;
}

.colidencia-recomendacao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-dado);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
}
.colidencia-recomendacao.risco-alta { background: rgba(240, 82, 82, 0.2); color: #fc8181; }
.colidencia-recomendacao.risco-media { background: rgba(226, 149, 79, 0.2); color: #f0b27a; }

/* Pagina /informacoes: navegacao interna por ancora entre as secoes, e uma
   grade de "cartõezinhos" clicaveis por codigo (leva direto pra busca
   filtrada por aquela classe/figura). */
.info-abas { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.info-aba {
  background: var(--su-fundo);
  color: var(--texto-suave);
  border: none;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: var(--su-pressionado);
  text-decoration: none;
}
.info-aba:hover { color: var(--texto); }
.info-aba.ativo { background: var(--st-navy, var(--azul-marinho)); color: #fff; box-shadow: none; }

/* Fica do lado esquerdo (nunca no canto direito, onde já mora o botão
   flutuante do Mark) -- no desktop, logo depois da sidebar fixa de
   264px; no mobile (sidebar escondida, ver breakpoint 860px acima),
   cola na borda esquerda de verdade. */
.ajuda-voltar-menu {
  position: fixed;
  left: calc(264px + 24px);
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--st-navy, var(--azul-marinho));
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 18px 10px 14px;
  border-radius: 100px;
  box-shadow: 0 8px 24px -8px rgba(0, 27, 68, 0.45);
  transition: background 0.15s ease, transform 0.15s ease;
}
.ajuda-voltar-menu .material-symbols-outlined { font-size: 18px; }
.ajuda-voltar-menu:hover { background: #002a66; transform: translateY(-2px); }
@media (max-width: 860px) {
  .ajuda-voltar-menu { left: 16px; bottom: 16px; padding: 10px 16px 10px 12px; font-size: 0.78rem; }
}

.info-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  align-items: start;
}
.info-bloco { grid-column: span 1; }
.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 2px solid transparent;
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  color: inherit;
  background: var(--su-superficie);
  box-shadow: var(--su-relevo-suave);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.info-item:hover { border-color: var(--marca-azul); box-shadow: var(--su-relevo); }
.info-item.ativo { border-color: var(--marca-azul); background: #f3f8fe; }
.info-codigo {
  font-family: var(--fonte-dado);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--azul);
  background: #e8eef7;
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.info-titulo { font-size: 0.85rem; color: var(--texto); line-height: 1.4; }

/* Painel de detalhe (nota explicativa oficial + exemplos/divisoes) vira um
   popup centralizado (nao mais inline) — escondido por padrao, some acima
   de um fundo escurecido ao clicar no item correspondente. */
.modal-fundo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 25, 48, 0.55);
  z-index: 150;
}
.modal-fundo.aberto { display: block; }

/* Popup de aviso do sistema (ex: RPI atualizada) -- injetado via JS em
   webapp/static/menu.js, mesmo espirito do lgpd-banner: aparece uma vez,
   dispensar fica gravado no localStorage do navegador. */
.aviso-popup-fundo {
  position: fixed;
  inset: 0;
  background: rgba(14, 25, 48, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.aviso-popup {
  background: var(--su-superficie);
  border-radius: var(--raio);
  box-shadow: var(--su-relevo);
  padding: 24px 26px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aviso-popup h3 { margin: 0; font-size: 1.05rem; }
.aviso-popup-mensagem {
  white-space: pre-line;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texto);
  overflow-y: auto;
  max-height: 50vh;
}
.aviso-popup-rodape { display: flex; justify-content: flex-end; }

.info-detalhe {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 40px));
  max-height: min(80vh, 640px);
  overflow-y: auto;
  margin-top: 0;
  padding: 22px 24px;
  background: var(--su-superficie);
  border: none;
  border-radius: var(--raio);
  box-shadow: 0 20px 60px -12px rgba(14, 25, 48, 0.45);
  z-index: 200;
}
.info-detalhe.aberto { display: block; }
.cliente-modal { width: min(760px, calc(100vw - 40px)); text-align: left; }

/* Abas do perfil de cliente final (Dados/Documentos/Marcas/Usuários/Acesso) */
.perfil-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.perfil-aba {
  background: var(--su-fundo);
  color: var(--texto-suave);
  border: none;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: var(--su-pressionado);
}
.perfil-aba:hover { color: var(--texto); }
.perfil-aba.ativo { background: var(--st-navy, var(--azul-marinho)); color: #fff; box-shadow: none; }
.info-detalhe-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -22px -24px 12px;
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--cinza-borda);
  /* .info-detalhe rola (overflow-y: auto) e pode ficar mais alto que a
     tela num celular (texto quebra em mais linhas em tela estreita) --
     sem isso, rolar pra ler empurra o X pra fora da área visível e não
     tem como fechar o popup sem rolar de volta manualmente. Achado real
     reportado pelo usuário testando no Android. */
  position: sticky;
  top: 0;
  background: var(--su-superficie);
  z-index: 1;
}
.info-detalhe-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.info-detalhe-fechar {
  background: var(--cinza-fundo);
  border: none;
  color: var(--texto-suave);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
}
.info-detalhe-fechar:hover { background: #fdecea; color: #a12a2a; box-shadow: none; }
.info-nota-texto { font-size: 0.86rem; color: var(--texto); white-space: pre-line; line-height: 1.55; margin-bottom: 12px; }
.info-exemplos-titulo, .info-divisoes .info-exemplos-titulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.info-exemplos { margin-bottom: 12px; }
.info-divisoes { margin-bottom: 12px; }
.info-divisoes ul { list-style: none; font-size: 0.85rem; }
.info-divisoes li { padding: 3px 0; border-bottom: 1px solid var(--cinza-borda); }
.info-divisoes li:last-child { border-bottom: none; }
.info-detalhe-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.info-fonte { font-size: 0.78rem; color: var(--texto-suave); text-decoration: none; }
.info-fonte:hover { color: var(--azul); text-decoration: underline; }

/* Manual de Marcas embutido via iframe (conteúdo oficial do INPI, sempre
   atualizado direto na fonte — não é cópia estática) — altura generosa
   pra ser realmente usável, não só uma prévia. */
.manual-inpi-iframe {
  width: 100%;
  height: 78vh;
  min-height: 520px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}

/* Painel de prazos no dashboard: cada linha é um link pro processo,
   cor da barra lateral indica urgência (vermelho <=15 dias, laranja <=30,
   azul depois disso) — mesma lógica visual do resto do app (border-left +
   cor), só que aqui a cor carrega o significado "quão em cima da hora". */
.lista-prazos { display: flex; flex-direction: column; gap: 8px; }
.prazo-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border: none;
  border-left: 4px solid transparent;
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  color: inherit;
  background: var(--su-superficie);
  box-shadow: var(--su-relevo-suave);
  transition: box-shadow 0.15s, transform 0.1s;
}
.prazo-item:hover { box-shadow: var(--su-relevo); transform: translateY(-2px); }
.prazo-urgente { border-left-color: #c0392b; }
.prazo-atencao { border-left-color: #d68910; }
.prazo-tranquilo { border-left-color: var(--azul); }
.prazo-evento { border-left-color: #7c3aed; }
.prazo-dias { display: flex; flex-direction: column; align-items: center; min-width: 56px; flex-shrink: 0; }
.prazo-dias-numero { font-family: var(--fonte-dado); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.prazo-urgente .prazo-dias-numero { color: #c0392b; }
.prazo-atencao .prazo-dias-numero { color: #d68910; }
.prazo-tranquilo .prazo-dias-numero { color: var(--azul); }
.prazo-dias-rotulo { font-size: 0.68rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em; }
.prazo-corpo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.prazo-tipo { font-weight: 600; font-size: 0.92rem; }
.prazo-marca { font-size: 0.82rem; color: var(--texto-suave); }
.prazo-data { font-size: 0.8rem; color: var(--texto-suave); white-space: nowrap; flex-shrink: 0; }

@media (max-width: 560px) {
  .prazo-item { flex-wrap: wrap; }
  .prazo-dias { flex-direction: row; gap: 6px; min-width: 0; }
}

/* ===== Calendário: layout em 4 quadrantes ===== */
.calendario-quadrantes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(360px, auto);
  gap: 20px;
}
.calendario-quadrante { margin-bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
.calendario-quadrante .lista-prazos { overflow-y: auto; }
@media (max-width: 980px) {
  .calendario-quadrantes { grid-template-columns: 1fr; }
}

.calendario-visao-switch { display: flex; gap: 4px; }

/* Mini-calendário compacto: em vez do rotulo completo de cada prazo (que
   não cabe num quadrante de 1/4 da tela), cada dia mostra so pontinhos
   coloridos — passa o mouse pra ver do que se trata, clica pra abrir o
   dia inteiro na visão "Dia". */
.calendario-grade--compacta .calendario-dia {
  min-height: 56px;
  padding: 4px 5px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.calendario-grade--compacta .calendario-dia:hover { box-shadow: var(--su-relevo); }
.calendario-grade--semanal .calendario-dia { min-height: 100px; }
.calendario-pontos { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.calendario-ponto {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
}
.calendario-ponto--urgente { background: #c0392b; }
.calendario-ponto--atencao { background: #d68910; }
.calendario-ponto--evento { background: #7c3aed; }

/* ===== Calendário de prazos ===== */
.calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.calendario-nav { display: flex; align-items: center; gap: 10px; }
.calendario-mes-titulo { font-size: 1.15rem; font-weight: 600; font-family: var(--fonte-titulo); min-width: 170px; text-align: center; }
.calendario-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendario-dia-nome {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
}
.calendario-dia {
  min-height: 96px;
  border: none;
  border-radius: var(--raio-pequeno);
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--su-superficie);
  box-shadow: var(--su-relevo-suave);
}
.calendario-dia--fora { background: var(--su-fundo); box-shadow: var(--su-pressionado); opacity: 0.6; }
.calendario-dia--hoje { border-color: var(--azul); border-width: 2px; }
.calendario-dia-numero { font-family: var(--fonte-dado); font-size: 0.8rem; color: var(--texto-suave); }
.calendario-dia--hoje .calendario-dia-numero { color: var(--azul); font-weight: 600; }
.calendario-prazo {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 3px 6px;
  border-radius: 6px;
  border-left: 3px solid var(--azul);
  background: var(--cinza-fundo);
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendario-prazo:hover { background: #e9edf3; }
.calendario-prazo--urgente { border-left-color: #c0392b; }
.calendario-prazo--atencao { border-left-color: #d68910; }

@media (max-width: 760px) {
  .calendario-dia-nome:nth-child(n) { font-size: 0.6rem; }
  .calendario-dia { min-height: 64px; }
  .calendario-prazo { font-size: 0; padding: 0; height: 6px; border-radius: 3px; border-left-width: 6px; }
}

/* ===== Kanban de workflow ===== */
.kanban-board {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.kanban-coluna {
  flex: 0 0 168px;
  background: var(--su-fundo);
  box-shadow: var(--su-pressionado);
  border-radius: var(--raio);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}
.kanban-coluna-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 2px 4px;
}
.kanban-coluna-titulo-esquerda { display: flex; align-items: center; gap: 8px; }
.kanban-coluna-fixa {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  background: #fff;
  border-radius: 999px;
  padding: 1px 6px;
}
.kanban-coluna-editor { position: relative; }
.kanban-coluna-editor summary {
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--texto-suave);
  font-weight: 600;
  list-style: none;
}
.kanban-coluna-editor summary::-webkit-details-marker { display: none; }
.kanban-coluna-editor summary:hover { color: var(--azul); }
.kanban-coluna-editor-painel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-hover);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
}
.kanban-coluna-editor-painel form { display: flex; gap: 6px; }
.kanban-coluna-editor-painel input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
}
.kanban-coluna-editor-painel button { font-size: 0.78rem; padding: 6px 10px; white-space: nowrap; }

.kanban-nova-coluna-form {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1.5px dashed var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  align-items: flex-end;
}

.kanban-coluna-contagem {
  font-family: var(--fonte-dado);
  font-size: 0.72rem;
  color: var(--texto-suave);
  background: #fff;
  border-radius: 999px;
  padding: 1px 8px;
}
.kanban-lista { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kanban-lista--sobre-arraste { background: rgba(42, 151, 232, 0.08); border-radius: var(--raio-pequeno); }
.kanban-card {
  background: var(--su-superficie);
  border: none;
  border-radius: var(--raio-pequeno);
  padding: 11px 13px;
  box-shadow: var(--su-relevo-suave);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: box-shadow 0.15s;
}
.kanban-card:hover { box-shadow: var(--su-relevo); }
.kanban-card-editar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--su-fundo);
  color: var(--texto-suave);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.kanban-card:hover .kanban-card-editar { opacity: 1; }
.kanban-card-editar:hover { color: var(--azul); box-shadow: none; }
.kanban-card:active { cursor: grabbing; }
.kanban-card--arrastando { opacity: 0.4; }
.kanban-card-titulo {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--texto);
  text-decoration: none;
}
.kanban-card-titulo:hover { text-decoration: underline; }
.kanban-card-numero { font-family: var(--fonte-dado); font-size: 0.72rem; color: var(--texto-suave); }
.kanban-card-status { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--texto-suave); }
.kanban-card-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.kanban-vazio { font-size: 0.8rem; color: var(--texto-suave); text-align: center; padding: 10px 0; }

.responsavel-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  width: min(90vw, 380px);
  background: var(--su-superficie);
  border-radius: var(--raio);
  box-shadow: 0 20px 60px -12px rgba(14, 25, 48, 0.45);
  padding: 22px 24px;
}
.responsavel-modal.aberto { display: block; }
.responsavel-modal h4 { margin: 0 0 4px; font-size: 1.02rem; }
.responsavel-modal-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.kanban-card--solicitacao { border-left: 3px solid var(--marca-rosa); }
.kanban-card--caso { border-left: 3px solid var(--marca-azul); background: rgba(42, 151, 232, 0.05); }
.kanban-card-prazo {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--su-texto-secundario, #6b7280);
}
.kanban-card-prazo--vencido {
  color: #b3261e;
  font-weight: 700;
}
.kanban-card-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--marca-rosa);
  background: rgba(236, 47, 121, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Portal do cliente final: acesso bem mais restrito que o app interno, sem
   a sidebar cheia de links que ele nunca vai poder usar — só um cabeçalho
   leve com a marca dele + botão de sair, e o conteúdo direto embaixo. */
.portal-shell { min-height: 100vh; font-family: var(--st-font-body, var(--fonte-corpo)); background: var(--st-slate-50, #f4f6fa); }
.portal-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--st-white, #fff);
  border-bottom: 1px solid var(--st-slate-200, var(--cinza-borda));
}
.portal-topo .logo { height: 58px; width: auto; flex-shrink: 0; }
/* Mesmo motivo do .st-topbar-back-btn: instalado como app, nao existe
   voltar nativo do navegador -- so aparece via JS quando roda em modo
   standalone/app instalado (ver menu.js). */
.portal-back-btn { display: none; background: none; border: none; font-size: 1.4rem; color: var(--st-on-surface-variant, #5a6472); cursor: pointer; padding: 8px; flex-shrink: 0; }
.portal-back-btn:not([hidden]) { display: block; }
.portal-topo-espaco { flex: 1; }
.portal-identificacao { display: flex; flex-direction: column; gap: 2px; margin-top: 38px; margin-bottom: 4px; }
.portal-topo-titulo-cliente { font-family: var(--st-font-display, var(--fonte-titulo)); font-weight: 700; font-size: 1.5rem; color: var(--st-titulo); }
.portal-topo-acesso { font-size: 0.82rem; color: var(--st-on-surface-variant, var(--texto-suave)); }
.portal-main { max-width: 1000px; margin: 0 auto; padding: 24px 16px 40px; }
.portal-main .perfil-abas { margin-bottom: 56px; }

@media (max-width: 640px) {
  .portal-topo { padding: 12px 16px; flex-wrap: wrap; }
}

/* Ajustes de celular além do breakpoint da sidebar (860px, lá em cima):
   menos respiro nas margens, títulos de cartão não empurram botão pra
   fora da tela, e a barra de busca — que é uma pílula com input + select +
   botão lado a lado — empilha em vez de espremer tudo numa linha só. */
@media (max-width: 640px) {
  main { padding: 0 12px 24px; }
  .cartao { padding: 14px 16px; }
  .cartao-topo { flex-wrap: wrap; }
  .visualizacao-toolbar { flex-wrap: wrap; }
  .busca-hero { padding: 24px 2px; }
  .form-inline { gap: 10px; }
}

@media (max-width: 600px) {
  /* Achado real reportado pelo usuário: no celular, o campo de busca
     ficava com forma de "pill" bem esticado -- estranho visualmente.
     Causa: ".st-content .busca-barra" (layout novo, 2 classes de
     especificidade) tem border-radius: var(--st-radius-full) SEM estar
     dentro de media query nenhuma, então sempre vencia a correção mobile
     abaixo (que só tinha 1 classe) -- precisa repetir o prefixo
     ".st-content" aqui pra empatar/vencer em especificidade. Breakpoint
     subiu de 480px pra 600px: 480 não cobria a largura de tela real do
     aparelho onde o bug foi visto. */
  /* Usuário reportou que mesmo depois do fix de especificidade acima, a
     barra continuava com aparência de "pílula" muito arredondada no
     celular -- 18px (var(--raio)) em todos os 4 cantos de uma caixa
     estreita e empilhada ainda lia como oval. Tentativa intermediária
     com 8px também ficou arredondada demais pro gosto do usuário --
     cantos retos (0) é o pedido final. */
  .busca-barra, .st-content .busca-barra {
    flex-wrap: wrap; border-radius: 0; padding: 10px; gap: 8px;
  }
  .busca-barra input { flex: 1 1 100%; padding: 6px 2px; }
  .busca-barra select { border-left: none; border-top: 1px solid var(--cinza-borda); flex: 1 1 100%; padding: 8px 2px; }
  .busca-barra button, .st-content .busca-barra button {
    flex: 1 1 100%; padding: 10px; border-radius: 0;
  }
}

/* ===== Banner de consentimento LGPD ===== */
.lgpd-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--su-superficie, #fff);
  border-radius: var(--raio, 18px);
  box-shadow: 0 20px 60px -12px rgba(14, 25, 48, 0.35);
  padding: 16px 20px;
  animation: lgpd-banner-entrar 0.25s ease;
}
.lgpd-banner--saindo { opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }
@keyframes lgpd-banner-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.lgpd-banner-texto { font-size: 0.85rem; color: var(--texto-suave); margin: 0; flex: 1 1 380px; min-width: 0; }
.lgpd-banner-texto a { color: var(--azul); text-decoration: underline; }
.lgpd-banner-botoes { display: flex; gap: 10px; flex-shrink: 0; }

@media (max-width: 640px) {
  .lgpd-banner { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .lgpd-banner-botoes { width: 100%; }
  .lgpd-banner-botoes button { flex: 1; }
}

/* =========================================================================
   SENTINEL INTELLIGENCE — novo sistema visual (redesign 2026), migrando
   pagina por pagina. Convive com o soft-UI antigo (variaveis --su-*/--marca-*
   no :root do topo do arquivo) ate a migracao terminar -- pagina ainda nao
   migrada continua usando as classes antigas sem quebrar. Prefixo "st-" em
   toda classe nova pra nunca colidir com o que ja existe. Variaveis --st-*
   ficam TODAS no :root do topo do arquivo (nao aqui) -- um segundo bloco
   :root separado no meio do arquivo nao resolvia via var() nesse projeto
   (bug/particularidade do parser; nao vale o risco de repetir). Fonte do
   design: G:\stitch_guardmark_interface_redesign\...\sentinel_intelligence\
   DESIGN.md
   ========================================================================= */

.st-shell { display: flex; min-height: 100vh; background: var(--st-slate-50); font-family: var(--st-font-body); color: var(--st-on-surface); }

/* Fonte de icone do Google (Material Symbols) so vira icone de verdade com
   essa regra -- o <link> do Google Fonts sozinho so carrega o arquivo da
   fonte, nao aplica a classe. Sem isso, o navegador mostra o nome do icone
   como texto cru (ex: "verified", "warning"). */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ---------- sidebar ---------- */
.st-sidebar {
  width: 264px;
  position: fixed;
  left: 0; top: 0;
  height: 100vh;
  background: var(--st-navy);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  z-index: 50;
  overflow-y: auto;
  transition: transform 0.25s ease;
}
.st-sidebar-logo {
  display: flex; align-items: center; justify-content: center; margin-bottom: 32px;
  background: var(--st-white); border-radius: var(--st-radius-sm); padding: 12px 14px; line-height: 0;
}
.st-sidebar-logo .logo { height: 58px; width: auto; max-width: 100%; }
.st-sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.st-sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--st-radius-sm);
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--st-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-right: 4px solid transparent;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.st-sidebar-grupo-btn, .st-sidebar-rodape .st-btn-ghost-inverso {
  -webkit-tap-highlight-color: transparent;
}
.st-sidebar-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.st-sidebar-secao {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: #8fd0ff; padding: 16px 16px 6px; font-family: var(--st-font-body);
}
.st-sidebar-secao:first-child { padding-top: 4px; }
.st-sidebar-nav a.ativo { color: var(--st-cyan); background: rgba(255, 255, 255, 0.06); border-right-color: var(--st-cyan); }
/* Sininho de avisos (prazo vencido de card do Workflow) -- amarelo de
   propósito, pra chamar atenção sem parecer erro (vermelho/magenta já
   significa "urgente/prazo estourado" em outros lugares do sistema). */
.st-sidebar-badge-aviso {
  margin-left: auto; background: #f5c518; color: #1a1300;
  font-size: 0.72rem; font-weight: 800; border-radius: var(--st-radius-full);
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.st-sidebar-nav .material-symbols-outlined { font-size: 20px; }

/* Grupo recolhível -- mesmo rótulo visual de .st-sidebar-secao, mas
   clicável, com estado lembrado por usuário (ver menu.js). O menu
   cresceu bastante este ano (Prospecção, Marketplace, Alertas, Casos,
   Workflow...) e ficou longo demais como lista solta -- inspirado no
   submenu recolhível de templates admin (ex: Dashmin). */
/* Mesmo estilo visual dos links normais (cor, tamanho, peso) -- só muda
   por ter a seta no lugar do ícone à esquerda, pra não parecer um item
   "de categoria menor" e sim só mais um item do menu que abre um
   submenu. Pedido do usuário: manter tudo com a mesma cor, com ou sem
   ícone. */
.st-sidebar-grupo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  border-radius: var(--st-radius-sm);
  color: rgba(255, 255, 255, 0.65); padding: 12px 16px; margin: 0 0 4px;
  font-family: var(--st-font-body); font-size: 0.85rem; font-weight: 600;
}
.st-sidebar-grupo:first-child .st-sidebar-grupo-btn { margin-top: 0; }
.st-sidebar-grupo-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* Remove o realce de foco padrao do navegador em cima do botao (aparecia
   como um "sombreado branco"/halo tanto no toque mobile quanto no clique
   desktop, mesmo com :focus-visible -- a heuristica do Chrome pra
   :focus-visible em <button> nem sempre exclui clique de mouse). Sem
   distincao de teclado/mouse aqui: o hover/estado aberto (seta virada) ja
   dao feedback visual suficiente pra esse rotulo de grupo. */
.st-sidebar-grupo-btn:focus,
.st-sidebar-grupo-btn:focus-visible,
.st-sidebar-nav a:focus,
.st-sidebar-nav a:focus-visible,
.st-sidebar-rodape .st-btn-ghost-inverso:focus,
.st-sidebar-rodape .st-btn-ghost-inverso:focus-visible {
  outline: none; box-shadow: none;
}
.st-sidebar-grupo-btn-label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-sidebar-grupo-btn .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.st-sidebar-grupo-chevron { font-size: 18px !important; transition: transform 0.15s ease; }
.st-sidebar-grupo-btn[aria-expanded="true"] .st-sidebar-grupo-chevron { transform: rotate(180deg); }
.st-sidebar-grupo-itens { display: flex; flex-direction: column; gap: 4px; }
.st-sidebar-grupo-itens[hidden] { display: none; }
/* itens dentro de um grupo ficam recuados: deixa claro o que é subitem */
.st-sidebar-grupo-itens a { padding-left: 28px; font-weight: 500; }
.st-sidebar-rodape { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 8px; }
.st-sidebar-status { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); padding: 0 16px 8px; }

.st-trial-badge {
  display: flex; align-items: center; gap: 6px; margin: 0 16px 4px; padding: 8px 12px;
  border-radius: var(--st-radius-sm); font-size: 0.76rem; font-weight: 600;
  background: rgba(0, 173, 239, 0.16); color: #7cd8fa; text-decoration: none; cursor: pointer;
  transition: filter 0.15s;
}
.st-trial-badge:hover { filter: brightness(1.2); }
.st-trial-badge .material-symbols-outlined { font-size: 18px; }
.st-trial-badge.st-trial-urgente { background: rgba(245, 158, 11, 0.18); color: #ffcf7a; }
.st-trial-badge.st-trial-expirado { background: rgba(216, 30, 91, 0.2); color: #ff9db8; }
.st-sidebar-usuario { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); padding: 0 16px; font-weight: 600; }
.st-sidebar-rodape .st-btn-ghost-inverso {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--st-radius-sm);
  color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; font-weight: 600;
  text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.st-sidebar-rodape .st-btn-ghost-inverso:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.st-sidebar-toggle { display: none; }

/* ---------- topbar + conteudo ---------- */
.st-main { flex: 1; margin-left: 264px; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.st-topbar {
  height: 64px; background: var(--st-white); border-bottom: 1px solid var(--st-slate-200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; position: sticky; top: 0; z-index: 40;
}
.st-topbar-titulo { font-family: var(--st-font-display); font-weight: 700; font-size: 1.05rem; color: var(--st-titulo); }
.st-topbar-esquerda { display: flex; align-items: center; gap: 4px; }
.st-topbar-menu-btn { display: none; background: none; border: none; font-size: 1.4rem; color: var(--st-on-surface-variant); cursor: pointer; padding: 8px; }
/* Botao de "Voltar" proprio da pagina -- instalado como app Android/PWA, o
   Chrome ignora display:minimal-ui do manifest.json e roda como standalone
   puro (sem nenhuma barra do navegador), entao nao existe voltar nativo
   nesse contexto. So aparece via JS (menu.js) quando detecta que esta
   rodando em modo app instalado, pra nao duplicar o voltar do navegador
   numa aba normal. */
.st-topbar-back-btn { display: none; background: none; border: none; font-size: 1.4rem; color: var(--st-on-surface-variant); cursor: pointer; padding: 8px; }
.st-topbar-back-btn:not([hidden]) { display: block; }
.st-content { padding: 40px 48px; max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.st-content-largo { max-width: none; }
.st-page-header { margin-bottom: 24px; }
.st-page-header h1 { font-family: var(--st-font-display); font-size: 2rem; font-weight: 700; color: var(--st-on-surface); margin: 0 0 4px; letter-spacing: -0.01em; }
.st-page-header p { color: var(--st-on-surface-variant); font-size: 0.9rem; margin: 0; }

/* ---------- cards / stats ---------- */
.st-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-bottom: 24px; }

/* ---------- carrinho de planos/add-ons ---------- */
.st-pill-radio {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--st-radius-full);
  border: 1px solid var(--st-slate-200); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: var(--st-white); transition: border-color 0.15s, background 0.15s;
}
.st-pill-radio:has(input:checked) { border-color: var(--st-cyan); background: rgba(0, 173, 239, 0.08); color: var(--st-titulo); }
.st-pill-radio input { accent-color: var(--st-cyan); }

.st-planos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.st-plano-card { display: block; cursor: pointer; }
.st-plano-card input { position: absolute; opacity: 0; }
.st-plano-card-corpo {
  border: 2px solid var(--st-slate-200); border-radius: var(--st-radius-lg); padding: 20px;
  height: 100%; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s;
}
.st-plano-card:has(input:checked) .st-plano-card-corpo { border-color: var(--st-cyan); box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15); }
.st-plano-card-corpo h4 { font-family: var(--st-font-display); font-size: 1.05rem; font-weight: 700; color: var(--st-titulo); margin: 0 0 4px; }
.st-plano-preco { font-family: var(--st-font-display); font-size: 1.5rem; font-weight: 800; color: var(--st-titulo); margin: 10px 0; font-variant-numeric: tabular-nums; }
.st-plano-lista { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.83rem; color: var(--st-on-surface-variant); }
.st-plano-lista li::before { content: "✓ "; color: var(--st-success); font-weight: 700; }

.st-addons-lista { display: flex; flex-direction: column; gap: 10px; }
.st-addon-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--st-slate-200);
  border-radius: var(--st-radius-sm); cursor: pointer; flex-wrap: wrap;
}
.st-addon-item:has(input.js-addon-check:checked) { border-color: var(--st-cyan); background: rgba(0, 173, 239, 0.05); }
.st-addon-nome { flex: 1; min-width: 160px; font-weight: 600; font-size: 0.88rem; color: var(--st-on-surface); }
.st-addon-preco { font-size: 0.82rem; color: var(--st-on-surface-variant); white-space: nowrap; }
.st-addon-qtd { width: 60px; padding: 6px 8px; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); }

.st-resumo-final { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

/* ---------- graficos (Chart.js) ---------- */
.st-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 24px; }
.st-chart-card { background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); padding: 20px 20px 12px; box-shadow: var(--st-shadow-card); }
.st-chart-card h3 { font-family: var(--st-font-display); font-size: 0.98rem; font-weight: 700; color: var(--st-titulo); margin: 0 0 2px; }
.st-chart-card .st-card-nota { margin-bottom: 12px; }
.st-chart-canvas-wrap { position: relative; height: 220px; }
.st-chart-canvas-wrap.st-chart-alto { height: 280px; }
.st-chart-vazio { display: flex; align-items: center; justify-content: center; height: 220px; color: var(--st-on-surface-variant); font-size: 0.85rem; text-align: center; }
.st-stat-card {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  padding: 20px; box-shadow: var(--st-shadow-card); transition: box-shadow 0.2s, transform 0.15s;
  text-decoration: none; color: inherit; display: block;
}
.st-stat-card:hover { box-shadow: var(--st-shadow-card-hover); transform: translateY(-1px); }
.st-stat-card-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.st-stat-icone { width: 36px; height: 36px; border-radius: var(--st-radius-sm); display: flex; align-items: center; justify-content: center; background: var(--st-slate-50); color: var(--st-cyan); }
.st-stat-icone.st-tom-erro { background: rgba(239, 68, 68, 0.1); color: var(--st-error); }
.st-stat-icone.st-tom-magenta { background: rgba(216, 30, 91, 0.1); color: var(--st-magenta); }
.st-stat-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--st-on-surface-variant); margin: 0 0 4px; }
.st-stat-valor { font-family: var(--st-font-display); font-size: 2.1rem; font-weight: 700; color: var(--st-on-surface); font-variant-numeric: tabular-nums; line-height: 1.1; }

.st-card { background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); padding: 24px; box-shadow: var(--st-shadow-card); margin-bottom: 24px; }
.st-card h3 { font-family: var(--st-font-display); font-size: 1.1rem; font-weight: 700; color: var(--st-titulo); margin: 0 0 4px; }
.st-card-nota { color: var(--st-on-surface-variant); font-size: 0.85rem; line-height: 1.55; margin: 0 0 16px; }

/* ---------- badges/chips ---------- */
.st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--st-radius-full); font-size: 0.72rem; font-weight: 600; }
.st-badge-ok { background: rgba(16, 185, 129, 0.1); color: var(--st-success); }
.st-badge-alerta { background: rgba(245, 158, 11, 0.1); color: var(--st-warning); }
.st-badge-erro { background: rgba(239, 68, 68, 0.1); color: var(--st-error); }
.st-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- prazos ---------- */
.st-prazo-lista { display: flex; flex-direction: column; gap: 8px; }
.st-prazo-item {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  border: 1px solid var(--st-slate-200); border-left: 4px solid var(--st-slate-400);
  border-radius: var(--st-radius-sm); text-decoration: none; color: inherit;
  transition: background 0.15s;
}
.st-prazo-item:hover { background: var(--st-slate-50); }
.st-prazo-item.st-prazo-urgente { border-left-color: var(--st-error); }
.st-prazo-item.st-prazo-atencao { border-left-color: var(--st-warning); }
.st-prazo-item.st-prazo-tranquilo { border-left-color: var(--st-success); }
.st-prazo-dias { flex-shrink: 0; text-align: center; min-width: 52px; }
.st-prazo-dias-numero { display: block; font-family: var(--st-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--st-on-surface); }
.st-prazo-dias-rotulo { font-size: 0.65rem; color: var(--st-on-surface-variant); text-transform: uppercase; }
.st-prazo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-prazo-tipo { font-weight: 600; font-size: 0.85rem; color: var(--st-on-surface); }
.st-prazo-marca { font-size: 0.8rem; color: var(--st-on-surface-variant); }
.st-prazo-data { flex-shrink: 0; font-size: 0.78rem; color: var(--st-on-surface-variant); white-space: nowrap; }

/* ---------- tabelas ---------- */
.st-tabela-scroll { overflow-x: auto; }
.st-tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.st-tabela thead th { text-align: left; padding: 10px 14px; background: var(--st-slate-50); color: var(--st-on-surface-variant); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.st-tabela tbody td { padding: 12px 14px; border-top: 1px solid var(--st-slate-100); }
.st-tabela tbody tr:hover { background: var(--st-slate-50); }

/* ---------- botoes ---------- */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--st-radius-sm); font-size: 0.85rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: var(--st-font-body); }
.st-btn-primary { background: var(--st-navy); color: #fff; }
.st-btn-primary:hover { background: var(--st-navy-deep); }
.st-btn-secundario { background: var(--st-slate-100); color: var(--st-titulo); border: 1px solid var(--st-slate-200); }
.st-btn-secundario:hover { background: var(--st-slate-200); }

@media (max-width: 860px) {
  .st-sidebar { transform: translateX(-100%); }
  .st-sidebar.st-aberta { transform: translateX(0); box-shadow: 0 0 32px rgba(0,0,0,0.3); }
  .st-main { margin-left: 0; }
  .st-topbar-menu-btn { display: block; }
  /* No celular a gaveta do menu é bem mais larga que os 58px fixos da
     logo — sobrava muito branco em volta dela (achado real reportado
     pelo usuário). Aumenta só a logo, mesmo padding do quadro branco. */
  .st-sidebar-logo .logo { height: 84px; }
  .st-content { padding: 24px 16px; }
  .st-page-header h1 { font-size: 1.5rem; }
  .st-content .cartao-topo { flex-direction: column; align-items: stretch; }
  .st-content .botoes-linha { width: 100%; }
  .st-content .botoes-linha form, .st-content .botoes-linha button { width: 100%; }
}

/* -------------------------------------------------------------------------
   Compatibilidade: paginas migradas reaproveitam as classes/IDs antigas
   (.cartao, .item-monitorado, dl/dt/dd, .badge, tabela, formularios, JS de
   visualizacao.js etc) SEM tocar o JS nem duplicar markup -- so redesenha
   a aparencia delas quando aparecem dentro do novo shell (.st-content).
   Pagina ainda no visual antigo (fora de .st-content) nao e afetada.
   ------------------------------------------------------------------------- */
.st-content .cartao {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-card); padding: 24px; margin-bottom: 24px;
}
.st-content .cartao h2, .st-content .cartao h3 { font-family: var(--st-font-display); color: var(--st-titulo); font-size: 1.1rem; margin-bottom: 4px; }
.st-content .cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.st-content .nota, .st-content .sub { color: var(--st-on-surface-variant); font-size: 0.85rem; line-height: 1.55; }
.st-content .status { color: var(--st-on-surface-variant); font-size: 0.9rem; }

.st-content .campo label { font-family: var(--st-font-body); font-weight: 600; font-size: 0.78rem; color: var(--st-on-surface-variant); display: block; margin-bottom: 4px; }
.st-content .campo input:not([type="checkbox"]):not([type="radio"]), .st-content .campo select, .st-content .campo textarea, .st-content .campo-busca-lista {
  background: var(--st-slate-50); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  padding: 9px 12px; font-family: var(--st-font-body); font-size: 0.85rem; color: var(--st-on-surface); width: 100%; box-sizing: border-box;
}
.st-content .campo input:not([type="checkbox"]):not([type="radio"]):focus, .st-content .campo select:focus, .st-content .campo textarea:focus, .st-content .campo-busca-lista:focus {
  outline: none; border-color: var(--st-cyan); box-shadow: 0 0 0 2px rgba(0, 173, 239, 0.2);
}
.st-content .form-inline { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
/* .form-editar-apelido acumula .form-inline (pro layout) mas precisa ficar
   escondido ate clicar "Editar" -- sem isso, o flex do .form-inline acima
   (mesma especificidade, porem depois no arquivo) vencia o display:none e o
   formulario de apelido/cliente ficava sempre visivel em cada card,
   poluindo a lista de marcas monitoradas. */
.st-content .form-editar-apelido { display: none; }
.st-content .form-editar-apelido.aberto { display: flex; }
.st-content .campo { display: flex; flex-direction: column; }
.st-content .campo-grande { flex: 1 1 220px; }

.st-content button[type="submit"],
.st-content button:not(.botao-secundario):not(.st-btn-secundario):not(.st-chip):not(.visualizacao-btn):not(.btn-editar):not(.info-item):not(.perfil-aba) {
  background: var(--st-navy); color: #fff; border: none;
  border-radius: var(--st-radius-sm); padding: 10px 18px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: var(--st-font-body);
}
.st-content button[type="submit"]:hover { background: var(--st-navy-deep); }
.st-content .botao-secundario, .st-content .btn-editar {
  background: var(--st-slate-100); color: var(--st-titulo); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  padding: 8px 16px; font-weight: 600; font-size: 0.82rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--st-font-body);
}
.st-content .botao-secundario:hover, .st-content .btn-editar:hover { background: var(--st-slate-200); }

.st-content .painel-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.st-content .resumo-tile {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  padding: 16px; box-shadow: var(--st-shadow-card); text-align: center; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 4px; transition: box-shadow 0.15s, transform 0.15s;
}
a.st-content .resumo-tile:hover, .st-content a.resumo-tile:hover { box-shadow: var(--st-shadow-card-hover); transform: translateY(-1px); }
.st-content .resumo-numero { font-family: var(--st-font-display); font-size: 1.7rem; font-weight: 700; color: var(--st-on-surface); font-variant-numeric: tabular-nums; }
.st-content .resumo-rotulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--st-on-surface-variant); font-weight: 600; }
.st-content .resumo-tile-alerta { border-color: var(--st-magenta); }

.st-content .item-monitorado {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-card); padding: 20px; margin-bottom: 16px; transition: box-shadow 0.2s;
}
.st-content .item-monitorado:hover { box-shadow: var(--st-shadow-card-hover); }
.st-content .item-monitorado.cartao-novidade { border-left: 4px solid var(--st-magenta); }

.st-content dl { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.st-content dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.st-content dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--st-on-surface-variant); font-weight: 600; }
.st-content dd { font-size: 0.85rem; color: var(--st-on-surface); }
.st-content dd a { color: var(--st-cyan); }

.st-content .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--st-radius-full); font-size: 0.72rem; font-weight: 600; }
.st-content .badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--st-radius-full); background: var(--st-slate-100);
  color: var(--st-on-surface-variant); font-size: 0.68rem; font-weight: 600; margin-right: 4px;
}
.st-content .badge-novo { background: rgba(216, 30, 91, 0.1); color: var(--st-magenta); }

.st-content .visualizacao-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.st-content .visualizacao-toolbar span { font-size: 0.78rem; color: var(--st-on-surface-variant); font-weight: 600; }
.st-content .visualizacao-btn {
  background: #fff; border: 1px solid var(--st-slate-200); color: var(--st-on-surface-variant);
  padding: 7px 14px; border-radius: var(--st-radius-sm); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--st-font-body);
}
.st-content .visualizacao-btn.ativo { background: var(--st-navy); color: #fff; border-color: var(--st-navy); }
.st-content .legenda-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; font-size: 0.8rem; }
.st-content .legenda-item-filtro { cursor: pointer; }

.st-content .tabela-scroll { overflow-x: auto; }
.st-content table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.st-content table thead th { text-align: left; padding: 10px 14px; background: var(--st-slate-50); color: var(--st-on-surface-variant); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.st-content table tbody td { padding: 12px 14px; border-top: 1px solid var(--st-slate-100); }
.st-content table tbody tr:hover { background: var(--st-slate-50); }

.st-content .botoes-linha { flex-wrap: wrap; }
.st-content .modal-fundo { background: rgba(0, 27, 68, 0.55); }
.st-content .info-detalhe {
  background: var(--st-white); border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-card-hover);
}

/* Portal do cliente final (_base_portal.html) -- mesma logica de reaproveitar
   classes antigas com aparencia nova, so que escopado em .portal-main em vez
   de .st-content (o portal nao usa o shell interno com sidebar). */
.portal-main .cartao {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-card); padding: 24px; margin-bottom: 24px;
}
.portal-main .cartao h2, .portal-main .cartao h3 { font-family: var(--st-font-display); color: var(--st-titulo); font-size: 1.1rem; margin-bottom: 4px; }
.portal-main .nota { color: var(--st-on-surface-variant); font-size: 0.85rem; line-height: 1.55; }
.portal-main .perfil-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.portal-main .perfil-aba {
  background: var(--st-slate-50); border: 1px solid var(--st-slate-200); color: var(--st-on-surface-variant);
  padding: 8px 16px; border-radius: var(--st-radius-full); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: var(--st-font-body);
}
.portal-main .perfil-aba.ativo { background: var(--st-navy); color: #fff; border-color: var(--st-navy); }
.portal-main .item-monitorado {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-card); padding: 20px; margin-bottom: 16px; transition: box-shadow 0.2s;
}
.portal-main .item-monitorado:hover { box-shadow: var(--st-shadow-card-hover); }
.portal-main dl { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.portal-main dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.portal-main dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--st-on-surface-variant); font-weight: 600; }
.portal-main dd { font-size: 0.85rem; color: var(--st-on-surface); }
.portal-main .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--st-radius-full); font-size: 0.72rem; font-weight: 600; }
.portal-main .badge { display: inline-block; padding: 3px 10px; border-radius: var(--st-radius-full); background: var(--st-slate-100); color: var(--st-on-surface-variant); font-size: 0.68rem; font-weight: 600; margin-right: 4px; }
.portal-main .badge-novo { background: rgba(216, 30, 91, 0.1); color: var(--st-magenta); }
.portal-main .tabela-scroll { overflow-x: auto; }
.portal-main table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.portal-main table thead th { text-align: left; padding: 10px 14px; background: var(--st-slate-50); color: var(--st-on-surface-variant); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.portal-main table tbody td { padding: 12px 14px; border-top: 1px solid var(--st-slate-100); }
.portal-main .campo label { font-family: var(--st-font-body); font-weight: 600; font-size: 0.78rem; color: var(--st-on-surface-variant); display: block; margin-bottom: 4px; }
.portal-main .campo input:not([type="checkbox"]):not([type="radio"]), .portal-main .campo select, .portal-main .campo textarea {
  background: var(--st-slate-50); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  padding: 9px 12px; font-family: var(--st-font-body); font-size: 0.85rem; color: var(--st-on-surface); width: 100%; box-sizing: border-box;
}
.portal-main .campo input[type="checkbox"], .portal-main .campo input[type="radio"] {
  width: auto; min-width: 0; padding: 0; background: none; box-shadow: none; accent-color: var(--st-cyan);
}
.portal-main .campo input:not([type="checkbox"]):not([type="radio"]):focus, .portal-main .campo select:focus, .portal-main .campo textarea:focus {
  outline: none; border-color: var(--st-cyan); box-shadow: 0 0 0 2px rgba(0, 173, 239, 0.2);
}
.portal-main .form-inline { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.portal-main .campo { display: flex; flex-direction: column; }
.portal-main .campo-grande { flex: 1 1 220px; }
.portal-main button[type="submit"] {
  background: var(--st-navy); color: #fff; border: none;
  border-radius: var(--st-radius-sm); padding: 10px 18px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: var(--st-font-body);
}
.portal-main button[type="submit"]:hover { background: var(--st-navy-deep); }
.portal-main .botao-secundario {
  background: var(--st-slate-100); color: var(--st-titulo); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  padding: 8px 16px; font-weight: 600; font-size: 0.82rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--st-font-body);
}
.portal-main .botao-secundario:hover { background: var(--st-slate-200); }
.portal-main .lista-prazos { display: flex; flex-direction: column; gap: 8px; }
.portal-main .prazo-item {
  display: flex; align-items: center; gap: 14px; background: var(--st-white); border: 1px solid var(--st-slate-200);
  border-left: 4px solid var(--st-slate-400); border-radius: var(--st-radius-sm); padding: 12px 16px; text-decoration: none; color: inherit;
}
.portal-main .prazo-urgente { border-left-color: var(--st-error); }
.portal-main .prazo-atencao { border-left-color: var(--st-warning); }
.portal-main .prazo-tranquilo { border-left-color: var(--st-cyan); }
.portal-main .prazo-dias-numero { font-family: var(--st-font-display); font-size: 1.3rem; font-weight: 700; }
.portal-main .prazo-dias-rotulo { font-size: 0.65rem; text-transform: uppercase; color: var(--st-on-surface-variant); }
.portal-main .prazo-tipo { font-weight: 600; font-size: 0.9rem; color: var(--st-on-surface); }
.portal-main .prazo-marca { font-size: 0.8rem; color: var(--st-on-surface-variant); }

/* Pagina de pesquisa de marcas (index.html hero + resultados.html topo) --
   mesma logica de sempre: reaproveita .busca-* existentes, redesenha via
   .st-content. Botao "Buscar" tinha o gradiente cyan->magenta antigo, troca
   por navy solido (mesmo padrao dos outros botoes primarios do sistema). */
.st-content .busca-hero h1 { font-family: var(--st-font-display); color: var(--st-titulo); }

/* Pesquisa basica de patentes, layout espelhando a Base Patentes do INPI:
   label em caixa cinza a esquerda, campo a direita, empilhado. */
.st-content .busca-patente-basica { display: flex; flex-direction: column; gap: 10px; }
.st-content .busca-patente-linha { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: center; }
.st-content .busca-patente-linha label {
  background: var(--st-slate-50); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  padding: 9px 12px; font-size: 0.82rem; font-weight: 600; color: var(--st-on-surface-variant);
}
.st-content .busca-patente-linha input, .st-content .busca-patente-linha select {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  padding: 9px 12px; font-family: var(--st-font-body); font-size: 0.85rem; color: var(--st-on-surface); width: 100%; box-sizing: border-box;
}
.st-content .busca-patente-linha input:focus, .st-content .busca-patente-linha select:focus {
  outline: none; border-color: var(--st-cyan); box-shadow: 0 0 0 2px rgba(0, 173, 239, 0.2);
}
.st-content .busca-patente-linha input:disabled, .st-content .busca-patente-linha select:disabled {
  background: var(--st-slate-50); color: var(--st-slate-400); cursor: not-allowed;
}
.st-content .busca-patente-composto { display: flex; gap: 8px; align-items: center; }
.st-content .busca-patente-composto select:first-child { flex: 0 0 170px; }
.st-content .busca-patente-composto input { flex: 1; }
.st-content .busca-patente-composto select:last-child { flex: 0 0 110px; }
@media (max-width: 700px) {
  .st-content .busca-patente-linha { grid-template-columns: 1fr; }
  .st-content .busca-patente-composto { flex-wrap: wrap; }
}
.st-content .busca-ajuda { color: var(--st-on-surface-variant); }
.st-content .busca-cartao-resultados { background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-card); padding: 20px 22px 22px; margin-bottom: 24px; }
.exportar-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-card); padding: 14px 18px; margin-bottom: 16px;
}
.exportar-rotulo { font-size: 0.85rem; font-weight: 600; color: var(--st-on-surface); margin-right: 4px; }
.st-content .busca-barra {
  background: var(--st-slate-50); border: 2px solid var(--st-slate-200); border-radius: var(--st-radius-full);
  box-shadow: none; padding: 6px 6px 6px 22px;
}
.st-content .busca-barra input { color: var(--st-on-surface); }
.st-content .busca-barra select { border-left-color: var(--st-slate-200); color: var(--st-on-surface-variant); }
.st-content .busca-barra select:focus { color: var(--st-titulo); }
/* destaque só no CAMPO que está recebendo o texto/seleção, não na pílula inteira (antes um
   anel ciano contornava input+select+botão juntos, confuso -- parecia um círculo solto em
   volta de tudo em vez de indicar onde a pessoa está digitando). */
.st-content .busca-barra input:focus, .st-content .busca-barra select:focus {
  outline: 2px solid var(--st-cyan);
  outline-offset: -2px;
  border-radius: 6px;
}
.st-content .busca-barra button {
  background: var(--st-navy); color: #fff; border-radius: var(--st-radius-full); padding: 0 30px;
  font-weight: 600; font-family: var(--st-font-body); border: none; cursor: pointer;
}
.st-content .busca-barra button:hover { background: var(--st-navy-deep); filter: none; }
.st-content .link-filtros { color: var(--st-on-surface-variant); }
.st-content .link-filtros:hover { color: var(--st-cyan); text-decoration-color: var(--st-cyan); }
.st-content .busca-filtros-grid { background: var(--st-slate-50); box-shadow: none; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); }
.st-content .busca-recurso { border-top-color: var(--st-slate-200); }
.st-content .busca-recurso-titulo { background: none; -webkit-text-fill-color: initial; color: var(--st-titulo); }
.st-content .busca-recurso p { color: var(--st-on-surface-variant); }

/* Pagina de Saude do servidor (servidor.html) -- medidores circulares,
   grafico de historico e status de servicos, tudo reaproveitando classes
   antigas (.medidor-*, .grafico-uso-*) escopadas em .st-content. */
.st-content .medidor-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-content .medidor-anel { position: relative; width: 120px; height: 120px; }
.st-content .medidor-svg { width: 100%; height: 100%; }
.st-content .medidor-trilha { fill: none; stroke: var(--st-slate-100); stroke-width: 10; }
.st-content .medidor-progresso { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.3s; }
.st-content .medidor-centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.st-content .medidor-numero { font-family: var(--st-font-display); font-size: 1.3rem; font-weight: 700; }
.st-content .medidor-sub { font-size: 0.7rem; color: var(--st-on-surface-variant); text-align: center; }
.st-content .grafico-uso { background: var(--st-slate-50); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); padding: 12px; }
.st-content .grafico-uso-svg { width: 100%; height: 140px; display: block; }
.st-content .grafico-uso-grade { stroke: var(--st-slate-200); stroke-width: 1; }
.st-content .grafico-uso-linha { fill: none; stroke-width: 2; }
.st-content .grafico-uso-legenda { display: flex; gap: 16px; margin-top: 10px; font-size: 0.78rem; color: var(--st-on-surface-variant); }
.st-content .grafico-uso-chip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* /viabilidade -- analise de nome de marca proposto via IA */
.viabilidade-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--st-slate-200, var(--cinza-borda));
  border-radius: var(--st-radius-sm, var(--raio-pequeno));
  padding: 10px;
  margin-top: 6px;
}
.viabilidade-classe-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; cursor: pointer; }
.viabilidade-classe-item input { margin-top: 3px; }

/* Seletor de classes em janela (modal) -- antes a lista de 45 classes
   ficava embutida direto no formulário, muito mais alta que os campos
   vizinhos (nome/estilo/evitar), deixando um vão vazio esquisito do lado
   deles -- achado real reportado pelo usuário, com print. Agora só um
   botão + resumo ficam na linha do formulário; a lista inteira mora numa
   janela à parte, do tamanho dela mesma. */
.seletor-classes-resumo { color: var(--st-on-surface-variant, var(--texto-suave)); }
.seletor-classes-modal-fundo {
  position: fixed; inset: 0; background: rgba(14, 25, 48, 0.55); z-index: 200;
  align-items: center; justify-content: center; padding: 16px;
}
/* :not([hidden]) -- sem isso, essa regra tem a mesma especificidade do
   "[hidden]{display:none}" do proprio navegador, mas por ser CSS do autor
   (nao do user-agent) ela vencia e o modal aparecia aberto por padrao. */
.seletor-classes-modal-fundo:not([hidden]) { display: flex; }
.seletor-classes-modal {
  background: var(--st-white, #fff); border-radius: var(--st-radius-lg, var(--raio));
  box-shadow: var(--st-shadow-card-hover, var(--sombra-hover)); padding: 22px 24px;
  max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
}
.seletor-classes-modal-topo { display: flex; align-items: center; justify-content: space-between; }
.seletor-classes-modal-topo h3 { margin: 0; font-family: var(--st-font-display); font-size: 1.05rem; }
.seletor-classes-fechar {
  background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--st-on-surface-variant, var(--texto-suave)); padding: 4px 8px;
}
.seletor-classes-busca {
  padding: 9px 12px; border: 1px solid var(--st-slate-200, var(--cinza-borda));
  border-radius: var(--st-radius-sm, var(--raio-pequeno)); font-size: 0.88rem; font-family: inherit;
}
.seletor-classes-lista { max-height: 50vh; margin-top: 0; }
.seletor-classes-modal-rodape { display: flex; justify-content: flex-end; }

.viabilidade-relatorio-texto { white-space: pre-wrap; line-height: 1.6; font-size: 0.92rem; }

.viabilidade-candidatos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.viabilidade-candidato-cartao {
  display: block;
  border: 1px solid var(--st-slate-200, var(--cinza-borda));
  border-radius: var(--st-radius-sm, var(--raio-pequeno));
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.viabilidade-candidato-cartao:hover { border-color: var(--st-cyan, var(--azul-marinho)); }
.viabilidade-candidato-logo { max-width: 100%; max-height: 60px; object-fit: contain; display: block; margin-bottom: 8px; }
.viabilidade-candidato-nome { font-weight: 700; font-size: 0.92rem; }

/* /assistente-nome -- chat de sugestão de nome de marca */
.chat-nome-marca {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 2px 12px;
  margin-bottom: 12px;
}
.chat-nome-marca-mensagem {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--st-radius-sm, var(--raio-pequeno));
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 0.9rem;
}
.chat-nome-marca-assistente {
  align-self: flex-start;
  background: var(--st-slate-50, #f4f6fa);
  border: 1px solid var(--st-slate-200, var(--cinza-borda));
}
.chat-nome-marca-usuario {
  align-self: flex-end;
  background: var(--st-navy, var(--azul-marinho));
  color: #fff;
}
.chat-nome-marca-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-nome-marca-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 12px;
  border: 1px solid var(--st-slate-200, var(--cinza-borda));
  border-radius: var(--st-radius-sm, var(--raio-pequeno));
}

/* Mark: widget de chat flutuante, disponível em toda página logada (não
   é mais uma página própria) -- botão circular fixo no canto, painel
   sobreposto que abre por cima do conteúdo. */
.mark-flutuante-botao {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--st-navy, var(--azul-marinho));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.mark-flutuante-botao:hover { filter: brightness(1.1); }
.mark-flutuante-botao .material-symbols-outlined { font-size: 28px; }

.mark-flutuante-painel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 60;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--st-branco, #fff);
  border: 1px solid var(--st-slate-200, var(--cinza-borda));
  border-radius: var(--st-radius, 12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  flex-direction: column;
  overflow: hidden;
}
/* :not([hidden]) -- mesmo achado real de antes (modal do seletor de
   classes): "display: flex" incondicional na regra acima tem a MESMA
   especificidade do "[hidden]{display:none}" do navegador, e CSS de
   autor sempre vence CSS de user-agent em empate, mesmo com o atributo
   hidden presente -- sem essa condição o painel nunca fecha de verdade
   (JS seta hidden=true, mas o display:flex do autor continua mandando). */
.mark-flutuante-painel:not([hidden]) { display: flex; }

/* Modal "por que perdeu" do CRM comercial -- mesmo motivo de :not([hidden])
   dos outros modais acima (empate de especificidade com o [hidden] do
   navegador). */
#modal-fundo-perder { position: fixed; inset: 0; background: rgba(14, 25, 48, 0.55); z-index: 150; align-items: center; justify-content: center; }
#modal-fundo-perder:not([hidden]) { display: flex; }
#modal-fundo-perder .modal-caixa { background: var(--st-surface, #fff); border-radius: var(--st-radius, 12px); padding: 22px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#modal-fundo-perder .modal-caixa h3 { margin: 0 0 12px; }
#modal-fundo-perder textarea { width: 100%; resize: vertical; }
.st-btn-sm { padding: 6px 12px; font-size: .82rem; }
.mark-flutuante-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--st-navy, var(--azul-marinho));
  color: #fff;
  font-weight: 600;
}
.mark-flutuante-cabecalho button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.mark-flutuante-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.mark-flutuante-painel .chat-nome-marca-form {
  padding: 10px 12px;
  border-top: 1px solid var(--st-slate-200, var(--cinza-borda));
}
.mark-flutuante-painel .chat-nome-marca-form textarea { min-height: 38px; max-height: 80px; }

@media (max-width: 480px) {
  .mark-flutuante-painel {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 84px;
  }
  .mark-flutuante-botao { right: 16px; bottom: 16px; }
}

/* Rascunho de petição via IA (recurso/manifestação) -- documento mais
   longo e importante que os outros textos de IA, ganha destaque visual
   próprio (borda em vez de fundo neutro, preserva quebra de linha das
   seções I/II/III/IV geradas pela IA). */
.peticao-ia-texto {
  white-space: pre-wrap;
  line-height: 1.6;
  border: 1px solid var(--st-magenta, #D81E5B);
  border-radius: var(--st-radius-sm, var(--raio-pequeno));
  padding: 14px 16px;
  margin-top: 10px;
  background: rgba(216, 30, 91, 0.04);
}

.st-demo-faixa {
  position: sticky; top: 0; z-index: 45;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  background: #f5c518; color: #1a1300; font-size: 0.82rem; padding: 8px 16px; text-align: center;
}
.st-demo-faixa a { color: #1a1300; font-weight: 700; text-decoration: underline; }
.st-demo-faixa button { background: none; border: 1px solid #1a1300; border-radius: 100px; padding: 3px 12px; font-size: 0.78rem; cursor: pointer; color: #1a1300; }
.st-demo-faixa ~ .st-topbar { top: 37px; }

/* ---------- Sistema de design unificado: cabeçalho de página, KPIs, filtros, toolbar ---------- */
.st-page-header--acoes { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.st-btn .material-symbols-outlined { font-size: 18px; }
.st-btn:focus-visible, .st-chip:focus-visible, .st-segmentado button:focus-visible { outline: 2px solid var(--st-cyan); outline-offset: 2px; }

.st-painel-adicionar { margin-bottom: 20px; }
.st-painel-adicionar h3 { margin: 0 0 12px; font-size: 1rem; }

.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.st-kpi {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--st-shadow-card);
}
.st-kpi-rotulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-on-surface-variant); }
.st-kpi-valor { font-family: var(--st-font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--st-titulo); font-variant-numeric: tabular-nums; }
.st-kpi--atencao .st-kpi-valor { color: #8a5a00; }
.st-kpi--critico .st-kpi-valor { color: var(--st-magenta); }

.st-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.st-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--st-slate-200); background: var(--st-white); color: var(--st-on-surface);
  font: 600 0.8rem var(--st-font-body); cursor: pointer; transition: border-color .15s, background .15s;
}
.st-chip b { font-weight: 700; color: var(--st-on-surface-variant); font-variant-numeric: tabular-nums; }
.st-chip:hover { border-color: var(--st-navy); }
.st-chip-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-chip.filtro-ativo, .st-filtros:not(:has(.filtro-ativo)) .filtro-ativo-padrao { background: var(--st-navy); border-color: var(--st-navy); color: #fff; }
.st-chip.filtro-ativo b, .st-filtros:not(:has(.filtro-ativo)) .filtro-ativo-padrao b { color: rgba(255,255,255,.75); }

.st-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.st-input-busca {
  flex: 1 1 260px; min-width: 0; padding: 10px 14px; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  background: var(--st-white); font: 0.88rem var(--st-font-body); box-shadow: none;
}
.st-input-busca:focus { outline: 2px solid var(--st-cyan); outline-offset: 0; border-color: var(--st-cyan); }
.st-toolbar-ordem { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--st-on-surface-variant); }
.st-toolbar-ordem select { padding: 9px 10px; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); background: var(--st-white); font: 0.85rem var(--st-font-body); box-shadow: none; }
.st-segmentado { display: inline-flex; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); overflow: hidden; background: var(--st-white); }
.st-segmentado .visualizacao-btn {
  border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 9px 14px;
  font: 600 0.8rem var(--st-font-body); color: var(--st-on-surface-variant); cursor: pointer;
}
.st-segmentado .visualizacao-btn + .visualizacao-btn { border-left: 1px solid var(--st-slate-200); }
.st-segmentado .visualizacao-btn:hover { background: var(--st-slate-50); }
.st-segmentado .visualizacao-btn.ativo { background: var(--st-navy); color: #fff; }
@media (max-width: 640px) { .st-segmentado { width: 100%; } .st-segmentado .visualizacao-btn { flex: 1; padding: 9px 4px; } }

.st-chip:hover { filter: none; box-shadow: none; }
.st-chip { box-shadow: none; }

/* Dashboard: KPIs clicáveis, grade principal e distribuição por status */
a.st-kpi { text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.st-kpi:hover { border-color: var(--st-cyan); box-shadow: 0 4px 16px -8px rgba(0, 27, 68, .25); }
.st-dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; margin-bottom: 24px; }
.st-dash-grid .st-card { margin-bottom: 0; }
.st-dist-barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 14px 0 16px; background: var(--st-slate-100); }
.st-dist-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-dist-lista a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; text-decoration: none; color: var(--st-on-surface); font-size: 0.85rem; border-top: 1px solid var(--st-slate-100); }
.st-dist-lista li:first-child a { border-top: 0; }
.st-dist-lista a:hover { background: var(--st-slate-50); }
.st-dist-nome { flex: 1; min-width: 0; }
.st-dist-lista b { font-variant-numeric: tabular-nums; color: var(--st-titulo); }
@media (max-width: 960px) { .st-dash-grid { grid-template-columns: 1fr; } }
.st-detalhe-metodo { margin: 0 0 14px; font-size: 0.8rem; }
.st-detalhe-metodo summary { cursor: pointer; color: var(--st-cyan-dark, #005f87); font-weight: 600; list-style: none; }
.st-detalhe-metodo summary::-webkit-details-marker { display: none; }
.st-detalhe-metodo summary::before { content: "＋ "; }
.st-detalhe-metodo[open] summary::before { content: "－ "; }

/* Tabelas enterprise, pílulas de status e estado vazio */
.st-linha-link { cursor: pointer; }
.st-mono { font-family: var(--st-font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 0.82rem; color: var(--st-on-surface-variant); }
.st-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--st-titulo); }
.st-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.st-pill--critico { background: rgba(216, 30, 91, .1); color: #a3123f; }
.st-pill--atencao { background: rgba(183, 121, 31, .12); color: #7a4a0a; }
.st-pill--ok { background: rgba(30, 132, 73, .12); color: #15653a; }
.st-pill--neutro { background: var(--st-slate-100); color: var(--st-on-surface-variant); }
.st-vazio { text-align: center; background: var(--st-white); border: 1px dashed var(--st-slate-200); border-radius: var(--st-radius-lg); padding: 48px 24px; color: var(--st-on-surface-variant); }
.st-vazio .material-symbols-outlined { font-size: 40px; color: var(--st-cyan); display: block; margin-bottom: 8px; }
.st-vazio strong { display: block; color: var(--st-titulo); font-size: 1rem; margin-bottom: 6px; }
.st-vazio p { margin: 0; font-size: 0.88rem; }

/* Workflow enterprise: quadro direto na página, colunas planas e cartões limpos */
.st-content .st-quadro { background: transparent; box-shadow: none; padding: 0; }
.st-content .kanban-nova-coluna-form { background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); padding: 14px 16px; margin-bottom: 16px; align-items: flex-end; }
.st-content .kanban-board { gap: 16px; padding-bottom: 16px; }
.st-content .kanban-coluna {
  flex: 0 0 280px; background: var(--st-slate-100); box-shadow: none; border: 1px solid var(--st-slate-200);
  border-radius: var(--st-radius-lg); padding: 12px; gap: 10px; min-height: 160px;
}
.st-content .kanban-coluna-titulo { font-family: var(--st-font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--st-on-surface-variant); padding: 2px 2px 6px; }
.st-content .kanban-coluna-contagem { background: var(--st-white); border: 1px solid var(--st-slate-200); color: var(--st-titulo); font-weight: 700; }
.st-content .kanban-card {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  box-shadow: 0 1px 2px rgba(0, 27, 68, .06); padding: 12px 14px; gap: 6px;
}
.st-content .kanban-card:hover { border-color: var(--st-cyan); box-shadow: 0 6px 18px -10px rgba(0, 27, 68, .35); }
.st-content .kanban-card--caso { background: var(--st-white); border-left: 3px solid var(--st-cyan); }
.st-content .kanban-card--solicitacao { border-left: 3px solid var(--st-magenta); }
.st-content .kanban-card-titulo { font-size: 0.9rem; line-height: 1.3; color: var(--st-titulo); }
.st-content .kanban-card-tag { background: rgba(0, 173, 239, .1); color: #005f87; }
.st-content .kanban-card--solicitacao .kanban-card-tag { background: rgba(216, 30, 91, .1); color: var(--st-magenta); }
.st-content .kanban-vazio { border: 1px dashed var(--st-slate-200); border-radius: var(--st-radius-sm); padding: 18px 0; }
.st-content .kanban-lista--sobre-arraste { background: rgba(0, 173, 239, .08); outline: 2px dashed var(--st-cyan); outline-offset: -2px; }
.st-segmentado .perfil-aba { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 9px 16px; font: 600 0.8rem var(--st-font-body); color: var(--st-on-surface-variant); cursor: pointer; }
.st-segmentado .perfil-aba + .perfil-aba { border-left: 1px solid var(--st-slate-200); }
.st-segmentado .perfil-aba.ativo { background: var(--st-navy); color: #fff; }

[hidden] { display: none !important; }
.st-texto-critico { color: #a3123f; font-weight: 700; }
.st-avatar-linha { display: flex; align-items: center; gap: 12px; }
.st-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(0, 173, 239, .12); color: #005f87; font-weight: 700; font-size: 0.85rem; }
.st-aviso { padding: 12px 16px; border-radius: var(--st-radius-sm); font-size: 0.88rem; margin-bottom: 16px; border: 1px solid var(--st-slate-200); background: var(--st-white); }
.st-aviso--critico { border-color: rgba(216, 30, 91, .35); background: rgba(216, 30, 91, .06); color: #8f1240; }
.st-aviso a { font-weight: 700; }

/* Formulários e modais enterprise: controles planos com borda, foco visível */
.st-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
.st-content select, .st-content textarea,
.info-detalhe input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.info-detalhe select, .info-detalhe textarea {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  box-shadow: none; padding: 9px 12px; font: 0.88rem var(--st-font-body); color: var(--st-on-surface);
  transition: border-color .15s, box-shadow .15s;
}
.st-content input:focus, .st-content select:focus, .st-content textarea:focus,
.info-detalhe input:focus, .info-detalhe select:focus, .info-detalhe textarea:focus {
  outline: none; border-color: var(--st-cyan); box-shadow: 0 0 0 3px rgba(0, 173, 239, .18);
}
.campo label { font-size: 0.74rem; font-weight: 600; letter-spacing: .03em; color: var(--st-on-surface-variant); }
.info-detalhe { background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); }
.info-detalhe-topo { top: -22px; background: var(--st-white); border-bottom-color: var(--st-slate-200); }
.info-detalhe-fechar { background: var(--st-slate-100); color: var(--st-on-surface-variant); box-shadow: none; border-radius: 8px; width: 32px; height: 32px; }
.info-exemplos-titulo { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-on-surface-variant); }
.st-btn, .st-pill { white-space: nowrap; }

/* Sub-navegação por seções (páginas longas) */
.st-subnav { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; margin: 0 0 20px; padding: 6px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); overflow-x: auto; }
.st-subnav a { padding: 7px 14px; border-radius: var(--st-radius-sm); font-size: 0.82rem; font-weight: 600; color: var(--st-on-surface-variant); text-decoration: none; white-space: nowrap; }
.st-subnav a:hover { background: var(--st-slate-100); color: var(--st-titulo); }
html { scroll-behavior: smooth; }
.st-content section[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.st-subnav { top: 66px; }
.st-demo-faixa ~ .st-content .st-subnav { top: 103px; }
.st-content section[id] { scroll-margin-top: 130px; }

/* Abas de perfil: sublinhado (padrão enterprise) */
.perfil-abas:not(.st-segmentado) { gap: 2px; margin-top: 16px; border-bottom: 1px solid var(--st-slate-200); }
.perfil-abas:not(.st-segmentado) .perfil-aba {
  background: transparent; box-shadow: none; border-radius: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 16px; font: 600 0.85rem var(--st-font-body); color: var(--st-on-surface-variant); cursor: pointer;
}
.perfil-abas:not(.st-segmentado) .perfil-aba:hover { color: var(--st-titulo); background: var(--st-slate-50); }
.perfil-abas:not(.st-segmentado) .perfil-aba.ativo { background: transparent; color: var(--st-titulo); border-bottom-color: var(--st-cyan); }
.perfil-abas:not(.st-segmentado) { overflow-x: auto; flex-wrap: nowrap; }
.perfil-abas:not(.st-segmentado) { overflow-y: hidden; }

/* Portal do cliente: cabeçalho compacto e abas consistentes */
.portal-identificacao { margin-top: 4px; }
.portal-main .perfil-abas { margin-bottom: 0; }
a.perfil-aba { text-decoration: none; display: inline-block; }
.st-kpis--compacto { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); }
.st-kpis--compacto .st-kpi { box-shadow: none; background: var(--st-slate-50); }
.portal-main .item-monitorado { transition: border-color .15s, box-shadow .15s; }
.portal-main a.item-monitorado:hover { border-color: var(--st-cyan); box-shadow: 0 6px 18px -10px rgba(0,27,68,.35); }

/* Portal: mesmos controles planos do app interno; botão secundário plano em todo o sistema */
.portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .portal-main select, .portal-main textarea {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm);
  box-shadow: none; padding: 9px 12px; font: 0.88rem var(--st-font-body); color: var(--st-on-surface);
}
.portal-main input:focus, .portal-main select:focus, .portal-main textarea:focus { outline: none; border-color: var(--st-cyan); box-shadow: 0 0 0 3px rgba(0,173,239,.18); }
.botao-secundario { background: var(--st-white); border: 1px solid var(--st-slate-200); color: var(--st-titulo); box-shadow: none; border-radius: var(--st-radius-sm); font-weight: 600; text-decoration: none; }
.botao-secundario:hover { background: var(--st-slate-50); border-color: var(--st-navy); filter: none; box-shadow: none; }
.st-abas-pagina { margin: -4px 0 20px; }
.st-abas-pagina .perfil-abas { margin-top: 0; }
.form-inline { align-items: flex-start; }
input[type="file"] { font: 0.82rem var(--st-font-body); color: var(--st-on-surface-variant); }
input[type="file"]::file-selector-button { border: 1px solid var(--st-slate-200); background: var(--st-white); color: var(--st-titulo); border-radius: var(--st-radius-sm); padding: 7px 14px; margin-right: 10px; font: 600 0.8rem var(--st-font-body); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--st-slate-50); }

/* Seções e vitrine (Marketplace) */
.st-secao-titulo { font-family: var(--st-font-display); font-size: 1rem; font-weight: 700; color: var(--st-titulo); margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; }
.st-secao-titulo span { font: 700 0.72rem var(--st-font-body); color: var(--st-on-surface-variant); background: var(--st-slate-100); border-radius: 999px; padding: 2px 10px; }
.st-vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.st-vitrine-item { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); text-decoration: none; color: var(--st-titulo); box-shadow: var(--st-shadow-card); transition: border-color .15s, box-shadow .15s, transform .15s; }
.st-vitrine-item:hover { border-color: var(--st-cyan); box-shadow: 0 10px 24px -14px rgba(0,27,68,.4); transform: translateY(-2px); }
.st-vitrine-logo { height: 92px; border-radius: var(--st-radius-sm); background: var(--st-slate-50); border: 1px solid var(--st-slate-100); display: grid; place-items: center; margin-bottom: 4px; overflow: hidden; }
.st-vitrine-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-vitrine-logo .material-symbols-outlined { font-size: 36px; color: var(--st-cyan); }
.st-vitrine-rodape { font-size: 0.78rem; color: var(--st-on-surface-variant); }
.st-content button.st-btn-secundario, .st-content button[type="submit"].st-btn-secundario { background: var(--st-white); color: var(--st-titulo); border: 1px solid var(--st-slate-200); }
.st-content button.st-btn-secundario:hover { background: var(--st-slate-50); border-color: var(--st-navy); }
.st-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.st-toolbar select { padding: 9px 12px; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); background: var(--st-white); font: 0.85rem var(--st-font-body); }

/* Calendário enterprise: grade plana com bordas finas, hoje destacado */
.st-content .calendario-grade { gap: 0; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); overflow: hidden; background: var(--st-white); }
.st-content .calendario-dia-nome { background: var(--st-slate-50); border-bottom: 1px solid var(--st-slate-200); padding: 8px 6px; font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--st-on-surface-variant); }
.st-content .calendario-dia { background: var(--st-white); border: 0; border-right: 1px solid var(--st-slate-100); border-bottom: 1px solid var(--st-slate-100); border-radius: 0; box-shadow: none; }
.st-content .calendario-dia:hover { background: var(--st-slate-50); box-shadow: none; }
.st-content .calendario-dia--fora { background: var(--st-slate-50); box-shadow: none; opacity: .55; }
.st-content .calendario-dia--hoje { background: rgba(0, 173, 239, .07); border: 0; box-shadow: inset 0 0 0 2px var(--st-cyan); }
.st-content .calendario-dia--hoje .calendario-dia-numero { color: #005f87; }
.st-content .calendario-mes-titulo { font-family: var(--st-font-display); color: var(--st-titulo); }
.st-content .calendario-prazo { background: var(--st-white); border: 1px solid var(--st-slate-200); border-left-width: 3px; box-shadow: none; }
.st-content .calendario-prazo:hover { background: var(--st-slate-50); }

/* Feed de avisos */
.st-feed { list-style: none; margin: 0; padding: 0; }
.st-feed-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-top: 1px solid var(--st-slate-100); }
.st-feed-item:first-child { border-top: 0; }
.st-feed-item--novo { background: rgba(245, 197, 24, .08); }
.st-feed-icone { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--st-slate-100); color: var(--st-on-surface-variant); }
.st-feed-item--novo .st-feed-icone { background: rgba(245, 197, 24, .25); color: #6f5500; }
.st-feed-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-feed-titulo { font-weight: 700; color: var(--st-titulo); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-feed-msg { font-size: 0.88rem; color: var(--st-on-surface); }
.st-feed-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .st-feed-item { flex-wrap: wrap; } .st-feed-acoes { width: 100%; justify-content: flex-start; } }

/* Mobile: KPIs em 2 colunas, faixa demo compacta */
@media (max-width: 640px) {
  .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .st-kpi { padding: 12px 14px; }
  .st-kpi-valor { font-size: 1.5rem; }
  .st-kpi-rotulo { font-size: 0.66rem; }
  .st-page-header h1 { font-size: 1.5rem; }
  .st-acoes { width: 100%; }
  .st-acoes .st-btn { flex: 1; justify-content: center; }
}
@media (max-width: 860px) {
  .st-demo-faixa { position: static; font-size: 0.74rem; padding: 6px 12px; gap: 4px 12px; }
  .st-demo-faixa ~ .st-topbar { top: 0; }
  .st-demo-faixa ~ .st-content .st-subnav { top: 66px; }
  .st-demo-faixa form { display: none; }
}
@media (max-width: 860px) { .st-demo-faixa form { display: none !important; } }
@media (max-width: 640px) {
  .st-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .st-filtros::-webkit-scrollbar { display: none; }
  .st-chip { flex: none; }
}

/* Acessibilidade: link de pular, foco visível global */
.st-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--st-navy); color: #fff; padding: 10px 16px; border-radius: var(--st-radius-sm); font-weight: 700; text-decoration: none; transition: top .15s; }
.st-skip:focus { top: 12px; outline: 3px solid var(--st-cyan); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--st-cyan); outline-offset: 2px; }
.st-sidebar a:focus-visible, .st-sidebar button:focus-visible { outline-color: #fff; }
.st-content:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Botão de busca no topo + Paleta de comandos (Ctrl+K) */
.st-topbar-paleta { display: inline-flex; align-items: center; gap: 8px; background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: 999px; padding: 6px 12px; color: var(--st-on-surface-variant); font: 600 0.8rem var(--st-font-body); cursor: pointer; box-shadow: none; }
.st-topbar-paleta:hover { border-color: var(--st-navy); color: var(--st-titulo); }
.st-topbar-paleta .material-symbols-outlined { font-size: 18px; }
.st-topbar-paleta kbd, .paleta kbd { font: 600 0.68rem var(--st-font-body); background: var(--st-slate-100); border: 1px solid var(--st-slate-200); border-radius: 5px; padding: 1px 6px; color: var(--st-on-surface-variant); }
@media (max-width: 640px) { .st-topbar-paleta-rotulo, .st-topbar-paleta kbd { display: none; } .st-topbar-paleta { padding: 8px; } }
.paleta-fundo { position: fixed; inset: 0; z-index: 500; background: rgba(0, 12, 32, .55); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; backdrop-filter: blur(2px); }
.paleta { width: min(620px, 100%); background: var(--st-white); border-radius: var(--st-radius-lg); box-shadow: 0 30px 80px -20px rgba(0, 12, 32, .6); overflow: hidden; }
.paleta-busca { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--st-slate-200); }
.paleta-busca .material-symbols-outlined { color: var(--st-on-surface-variant); }
.paleta-busca input { flex: 1; border: 0 !important; box-shadow: none !important; background: transparent !important; font: 1rem var(--st-font-body) !important; padding: 4px 0 !important; outline: none !important; }
.paleta-lista { list-style: none; margin: 0; padding: 8px; max-height: 340px; overflow-y: auto; }
.paleta-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--st-radius-sm); cursor: pointer; font-size: 0.92rem; color: var(--st-on-surface); }
.paleta-item .material-symbols-outlined { font-size: 20px; color: var(--st-on-surface-variant); }
.paleta-item.ativo { background: var(--st-navy); color: #fff; }
.paleta-item.ativo .material-symbols-outlined, .paleta-item.ativo .paleta-dica { color: rgba(255, 255, 255, .8); }
.paleta-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-dica { font-size: 0.74rem; color: var(--st-on-surface-variant); }
.paleta-vazio { padding: 22px; text-align: center; color: var(--st-on-surface-variant); font-size: 0.9rem; }
.paleta-rodape { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--st-slate-100); font-size: 0.74rem; color: var(--st-on-surface-variant); background: var(--st-slate-50); }
body.paleta-aberta { overflow: hidden; }

/* Esqueleto de carregamento */
.st-esqueleto { height: 74px; border-radius: var(--st-radius-sm); margin-bottom: 10px; background: linear-gradient(90deg, var(--st-slate-100) 25%, var(--st-slate-50) 50%, var(--st-slate-100) 75%); background-size: 200% 100%; animation: st-brilho 1.2s linear infinite; }
@keyframes st-brilho { to { background-position: -200% 0; } }

/* Login e cadastro enterprise */
.login-cartao { border: 1px solid var(--st-slate-200); box-shadow: 0 20px 50px -24px rgba(0, 27, 68, .35); background: var(--st-white); }
.login-titulo { font-family: var(--st-font-display); font-size: 1.35rem; color: var(--st-titulo); margin: 0 0 4px; text-align: center; }
.login-cartao .login-sub { text-align: center; color: var(--st-on-surface-variant); font-size: .9rem; margin: 0 0 18px; }
.login-cartao input:not([type="checkbox"]):not([type="hidden"]), .auth-form-area input:not([type="checkbox"]):not([type="hidden"]), .auth-form-area select {
  background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); box-shadow: none; padding: 11px 14px; font: 0.95rem var(--st-font-body);
}
.login-cartao input:focus, .auth-form-area input:focus, .auth-form-area select:focus { outline: none; border-color: var(--st-cyan); box-shadow: 0 0 0 3px rgba(0,173,239,.18); }
.login-entrar { width: 100%; background: var(--st-navy); color: #fff; border: 0; border-radius: var(--st-radius-sm); padding: 12px; font: 700 0.95rem var(--st-font-body); cursor: pointer; box-shadow: none; }
.login-entrar:hover { background: var(--st-navy-deep); filter: none; }
.login-divisor { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--st-on-surface-variant); font-size: .8rem; }
.login-divisor::before, .login-divisor::after { content: ""; flex: 1; height: 1px; background: var(--st-slate-200); }
.login-demo { display: block; text-align: center; padding: 11px; border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); color: var(--st-titulo); font-weight: 700; text-decoration: none; }
.login-demo:hover { border-color: var(--st-navy); background: var(--st-slate-50); }
.login-cartao .login-sub { font-weight: 400; }

/* ---------- Tema escuro (alternável; guardado em localStorage, padrão = preferência do sistema) ---------- */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --st-navy: #2f6df6;
  --st-navy-deep: #1f57d6;
  --st-titulo: #e8eefb;
  --st-white: #111c30;
  --st-slate-50: #0c1526;
  --st-slate-100: #16233a;
  --st-slate-200: #25354f;
  --st-slate-400: #7f92ad;
  --st-slate-600: #a9b8cf;
  --st-slate-800: #dbe4f2;
  --st-slate-900: #eef3fb;
  --st-on-surface: #e3ebf8;
  --st-on-surface-variant: #a3b3ca;
  --st-shadow-card: 0 4px 12px rgba(0, 0, 0, .35);
  --st-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .5);
  --texto: #dbe4f2;
  --texto-suave: #a3b3ca;
  --cinza-borda: #25354f;
  --cinza-fundo: #0c1526;
  --su-fundo: #0c1526;
  --su-superficie: #111c30;
  --su-luz: rgba(255, 255, 255, .03);
  --su-sombra: rgba(0, 0, 0, .55);
  --azul: #6aa6ff;
  --azul-escuro: #4a8af0;
}
:root[data-tema="escuro"] .st-sidebar { background: #050d1c; border-right: 1px solid #16233a; }
:root[data-tema="escuro"] .auth-marca { background-color: #001B44; }
:root[data-tema="escuro"] .status-chip { filter: brightness(1.45) saturate(1.1); }
:root[data-tema="escuro"] .st-pill--critico { color: #ff8fb0; background: rgba(216, 30, 91, .22); }
:root[data-tema="escuro"] .st-pill--atencao { color: #f5c76a; background: rgba(245, 158, 11, .2); }
:root[data-tema="escuro"] .st-pill--ok { color: #6fd49a; background: rgba(16, 185, 129, .2); }
:root[data-tema="escuro"] .st-kpi--atencao .st-kpi-valor { color: #f5c76a; }
:root[data-tema="escuro"] .st-kpi--critico .st-kpi-valor, :root[data-tema="escuro"] .st-texto-critico { color: #ff8fb0; }
:root[data-tema="escuro"] .st-detalhe-metodo summary, :root[data-tema="escuro"] .st-avatar { color: #6cc9f5; }
:root[data-tema="escuro"] .st-feed-item--novo { background: rgba(245, 197, 24, .07); }
:root[data-tema="escuro"] .st-feed-item--novo .st-feed-icone { color: #f5c518; }
:root[data-tema="escuro"] .st-topbar { background: #0f1a2e; border-bottom-color: #25354f; }
:root[data-tema="escuro"] .st-topbar-titulo, :root[data-tema="escuro"] .st-topbar-menu-btn { color: #e8eefb; }
:root[data-tema="escuro"] .st-vitrine-logo { background: #16233a; }
:root[data-tema="escuro"] img.logo { background: #fff; border-radius: 8px; }
:root[data-tema="escuro"] .st-subnav { background: rgba(17, 28, 48, .92); }
:root[data-tema="escuro"] .st-esqueleto { background: linear-gradient(90deg, #16233a 25%, #1d2d48 50%, #16233a 75%); background-size: 200% 100%; }
:root[data-tema="escuro"] .info-detalhe, :root[data-tema="escuro"] .paleta { border-color: #25354f; }
:root[data-tema="escuro"] .kanban-coluna-contagem, :root[data-tema="escuro"] .st-topbar-paleta { color: #e8eefb; }
:root[data-tema="escuro"] .calendario-dia-numero { color: #a3b3ca; }

/* Botão de alternar tema */
.st-tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--st-white); border: 1px solid var(--st-slate-200); color: var(--st-on-surface-variant); cursor: pointer; box-shadow: none; padding: 0; }
.st-tema-toggle:hover { border-color: var(--st-navy); color: var(--st-titulo); filter: none; }
.st-tema-toggle .material-symbols-outlined { font-size: 20px; }
.st-tema-toggle .icone-claro { display: none; }
:root[data-tema="escuro"] .st-tema-toggle .icone-claro { display: inline; }
:root[data-tema="escuro"] .st-tema-toggle .icone-escuro { display: none; }
.st-topbar-direita { display: flex; align-items: center; gap: 10px; }
:root[data-tema="escuro"] .kanban-coluna-fixa, :root[data-tema="escuro"] .kanban-coluna-editor-painel { background: var(--st-slate-100); color: var(--st-on-surface); border-color: var(--st-slate-200); }
:root[data-tema="escuro"] .visualizacao-btn:not(.ativo) { background: var(--st-white); color: var(--st-on-surface); border-color: var(--st-slate-200); }

/* Contraste AA (auditoria automática): selos e chips */
.st-badge-ok { color: #0b6b4a; }
.st-badge-alerta { color: #8a5a00; }
.st-badge-erro { color: #b42318; }
.status-chip { filter: brightness(.74); }
:root[data-tema="escuro"] .st-badge-ok { color: #6fd49a; }
:root[data-tema="escuro"] .st-badge-alerta { color: #f5c76a; }
:root[data-tema="escuro"] .st-badge-erro { color: #ff9a8f; }
:root[data-tema="escuro"] .badge { background: #1d2d48; color: #cfe0ff; }
:root[data-tema="escuro"] .kanban-card-tag { color: #6cc9f5; background: rgba(0, 173, 239, .16); }
:root[data-tema="escuro"] .kanban-card--solicitacao .kanban-card-tag { color: #ff9fbd; background: rgba(216, 30, 91, .22); }
.kanban-card-prazo { color: var(--st-on-surface-variant); }
:root[data-tema="escuro"] .kanban-card-prazo--vencido { color: #ff8fb0; }

:root[data-tema="escuro"] .status-chip { filter: brightness(1.5) saturate(1.1); }
:root[data-tema="escuro"] .status-chip { filter: none; background: rgba(255, 255, 255, .1) !important; color: #e8eefb !important; }
.st-dash-grid > * { min-width: 0; }
@media (max-width: 960px) { .st-dash-grid { grid-template-columns: minmax(0, 1fr); } }
.st-prazo-item { flex-wrap: wrap; }
.st-prazo-data { white-space: normal; }

/* Informações (tópicos), Histórico (critérios) e Ajuda (navegação por tópicos) */
.st-topicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.st-topico { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); text-decoration: none; color: var(--st-on-surface); box-shadow: var(--st-shadow-card); transition: border-color .15s, transform .15s, box-shadow .15s; }
.st-topico:hover { border-color: var(--st-cyan); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 27, 68, .4); }
.st-topico .material-symbols-outlined { font-size: 28px; color: var(--st-cyan); }
.st-topico strong { color: var(--st-titulo); font-size: 1rem; }
.st-topico span:last-child { font-size: 0.85rem; color: var(--st-on-surface-variant); }
.st-criterios { display: flex; gap: 6px; flex-wrap: wrap; }
.st-subnav--quebra { position: static; flex-wrap: wrap; margin-top: 14px; }
.st-subnav--quebra a { border: 1px solid var(--st-slate-200); }
.demo-consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--st-on-surface-variant); line-height: 1.45; margin: 4px 0 12px; cursor: pointer; }
.demo-consentimento input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--st-navy); }
.demo-consentimento a { color: var(--azul); font-weight: 600; }


/* Galeria de figuras do desenho industrial (desenho_detalhe.html) */
.st-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.st-galeria a { display: block; background: #fff; border: 1px solid var(--st-slate-200, #dbe3ee); border-radius: 10px; padding: 8px; }
.st-galeria a:hover { border-color: var(--st-cyan, #00adef); }
.st-galeria img { display: block; width: 100%; height: 150px; object-fit: contain; }

/* Complemento pequeno do KPI do dashboard (ex: "2 com novidade") */
.st-kpi-sub { display: block; margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--st-on-surface-variant, #5b6b83); }

/* explicação do modo de busca escolhido (embaixo da barra de busca) */
.busca-modo-desc { margin: 8px 2px 0; font-size: 0.86rem; color: var(--st-on-surface-variant, var(--texto-suave)); min-height: 1.2em; }

/* ---------- Central de trabalho ---------- */
.ct-abas { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); margin-bottom: 14px; }
.ct-aba { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--st-radius-sm); font: 700 0.85rem var(--st-font-body); color: var(--st-on-surface-variant); text-decoration: none; }
.ct-aba:hover { background: var(--st-slate-100); color: var(--st-titulo); }
.ct-aba.ativo { background: var(--st-navy); color: #fff; }
.ct-aba--breve { opacity: 0.55; cursor: default; }
.ct-aba--breve:hover { background: transparent; color: var(--st-on-surface-variant); }
.ct-n { font: 600 0.72rem var(--st-font-mono, monospace); background: var(--st-slate-100); color: var(--st-on-surface-variant); border-radius: var(--st-radius-full); padding: 1px 8px; }
.ct-aba.ativo .ct-n { background: rgba(255, 255, 255, 0.2); color: #fff; }
.ct-filtros { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 14px; }
.ct-grupo { display: flex; align-items: center; gap: 8px; }
.ct-grupo > span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--st-slate-400); }
.ct-grupo .visualizacao-btn { text-decoration: none; display: inline-block; }
.ct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ct-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-card); text-decoration: none; color: inherit; }
.ct-kpi:hover { border-color: var(--st-cyan); }
.ct-kpi.ativo { border-color: var(--st-cyan); box-shadow: 0 0 0 2px rgba(0, 173, 239, 0.3); }
.ct-kpi-rotulo { font-size: 0.72rem; font-weight: 600; color: var(--st-on-surface-variant); }
.ct-kpi-valor { font: 700 1.7rem var(--st-font-display); color: var(--st-titulo); font-variant-numeric: tabular-nums; }
.ct-kpi--atencao .ct-kpi-valor { color: #8a5a00; }
.ct-kpi--critico .ct-kpi-valor { color: var(--st-magenta); }
:root[data-tema="escuro"] .ct-kpi--atencao .ct-kpi-valor { color: #f5c76a; }
:root[data-tema="escuro"] .ct-kpi--critico .ct-kpi-valor { color: #ff8fb0; }
.ct-aviso { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--st-radius-sm); background: rgba(245, 158, 11, 0.16); color: var(--st-titulo); font-size: 0.85rem; }
.ct-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.ct-coluna { background: var(--st-slate-100); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-lg); padding: 10px; min-height: 200px; }
.ct-coluna.ct-sobre { border-color: var(--st-cyan); }
.ct-coluna h3 { margin: 0 0 10px; padding: 2px 4px; display: flex; justify-content: space-between; align-items: center; font: 800 0.72rem var(--st-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--st-on-surface-variant); }
.ct-pilha { display: flex; flex-direction: column; gap: 9px; }
.ct-vazio { padding: 22px 6px; text-align: center; font-size: 0.82rem; color: var(--st-slate-400); border: 1px dashed var(--st-slate-200); border-radius: var(--st-radius-sm); }
.ct-cartao { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; background: var(--st-white); border: 1px solid var(--st-slate-200); border-radius: var(--st-radius-sm); box-shadow: var(--st-shadow-card); }
.ct-cartao[draggable="true"] { cursor: grab; }
.ct-cartao:hover { border-color: var(--st-cyan); }
.ct-arrastando { opacity: 0.45; }
.ct-cartao-titulo { font: 700 0.9rem var(--st-font-body); color: var(--st-titulo); text-decoration: none; overflow-wrap: anywhere; }
.ct-cartao-titulo:hover { text-decoration: underline; }
.ct-cartao-sub { font-size: 0.8rem; color: var(--st-on-surface-variant); }
.ct-cartao-det { font: 500 0.72rem var(--st-font-mono, monospace); color: var(--st-slate-400); overflow-wrap: anywhere; }
.ct-cartao-rodape { display: flex; align-items: center; gap: 8px; }
.ct-tag { display: inline-block; font: 800 0.66rem var(--st-font-body); letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--st-radius-full); border: 1px solid currentColor; }
.ct-tag--caso { color: #0a8fc4; }
.ct-tag--marca { color: #6d4ce6; }
.ct-tag--solicitacao { color: #c97800; }
.ct-tag--venda { color: #1a8a5b; }
.ct-tag--renov { color: #b45f06; }
:root[data-tema="escuro"] .ct-tag--caso { color: #4cc9ff; }
:root[data-tema="escuro"] .ct-tag--marca { color: #a08bff; }
:root[data-tema="escuro"] .ct-tag--solicitacao { color: #f5b942; }
:root[data-tema="escuro"] .ct-tag--venda { color: #3ddc97; }
:root[data-tema="escuro"] .ct-tag--renov { color: #ffb454; }
.ct-prazo { font: 700 0.74rem var(--st-font-body); padding: 2px 8px; border-radius: 7px; background: var(--st-slate-100); color: var(--st-on-surface-variant); }
.ct-prazo--late { background: rgba(216, 30, 91, 0.14); color: var(--st-magenta); }
.ct-prazo--warn { background: rgba(245, 158, 11, 0.18); color: #8a5a00; }
:root[data-tema="escuro"] .ct-prazo--late { color: #ff8fb0; }
:root[data-tema="escuro"] .ct-prazo--warn { color: #f5c76a; }
.ct-resp { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 0.62rem var(--st-font-body); background: var(--st-navy); color: #fff; }
.ct-resp--vazio { background: transparent; border: 1px dashed var(--st-slate-400); color: var(--st-slate-400); font-weight: 600; }
.ct-lista th, .ct-lista td { text-align: left; }
.ct-nota { margin-top: 14px; }
@media (max-width: 760px) { .ct-kpis { grid-template-columns: 1fr 1fr; } }

.rn-janela { display: inline-block; font: 700 0.72rem var(--st-font-body); padding: 2px 9px; border-radius: var(--st-radius-full); border: 1px solid currentColor; }
.rn-janela--futura { color: var(--st-slate-400); }
.rn-janela--ordinaria { color: #1a8a5b; }
.rn-janela--extraordinaria { color: #b45f06; }
.rn-janela--expirada { color: var(--st-magenta); }
:root[data-tema="escuro"] .rn-janela--ordinaria { color: #3ddc97; }
:root[data-tema="escuro"] .rn-janela--extraordinaria { color: #ffb454; }
:root[data-tema="escuro"] .rn-janela--expirada { color: #ff8fb0; }
.rn-anos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }

/* Tour guiado (Driver.js, ver tour.js) -- toque de identidade sobre o visual padrão
   da lib: botão de avançar/concluir na cor da marca em vez do cinza genérico. O
   popover em si fica branco fixo (não segue tema escuro) de propósito: é um cartão
   flutuante por cima de QUALQUER parte da tela, inclusive trechos escuros do overlay,
   então precisa de contraste garantido sem depender de onde ele pousa. */
.driver-popover-footer .driver-popover-next-btn,
.driver-popover-footer .driver-popover-done-btn {
  background: var(--st-navy); color: #fff; border-color: var(--st-navy);
}
.driver-popover-footer .driver-popover-next-btn:hover,
.driver-popover-footer .driver-popover-done-btn:hover {
  background: var(--st-cyan); border-color: var(--st-cyan);
}