/* ===========================================================================
   LUPA -- folha de estilos compartilhada pelas 17 telas (HTML/CSS/JS puro,
   sem build). Redesenho de 05/09/2026: mesma familia visual da Zela
   (produto irmao), com identidade propria da LUPA.

   Regras do sistema (nao improvisar fora delas):
   - Uma cor de acento so: --cor-primaria (verde-petroleo). Tudo que precisa
     de destaque usa ela ou uma mistura dela (color-mix). Semanticas
     (erro/sucesso/aviso/info/violeta) sao para estado, nunca decoracao.
   - Escala de raio fixa: cartao/painel/modal 14px (--raio-lg), campo e
     botao 8px (--raio-sm), badge pilula. Nada fora disso.
   - Numeros sempre com font-variant-numeric: tabular-nums.
   - Tema claro/escuro por token: [data-tema="escuro"] no <html>
     (public/js/tema.js aplica antes da pintura; o botao da sidebar troca).
   - Nomes de classe antigos (.card, .painel, .badge-*, .toolbar, .modal-*)
     continuam valendo -- os 15 arquivos de JS dependem deles. As variaveis
     antigas (--azul-primario etc.) viraram apelidos dos tokens novos.
   =========================================================================== */

:root {
  color-scheme: light;

  --cor-fundo: #f3f5f7;
  --cor-cartao: #ffffff;
  --cor-cartao-2: #f8fafb;
  --cor-texto: #16212b;
  --cor-texto-suave: #5b6672;
  --cor-texto-suave2: #465260;
  --cor-texto-fraco: #7b8794;
  --cor-borda: #d5dbe2;
  --cor-borda-suave: #e4e8ed;
  --cor-borda-tabela: #eceff3;
  --cor-hover-linha: #f6f8fa;

  --cor-primaria: #0e6f7a;
  --cor-primaria-forte: #0a5a63;
  --cor-primaria-texto: #ffffff;
  --cor-primaria-tinta: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
  --cor-primaria-tinta-2: color-mix(in srgb, var(--cor-primaria) 16%, transparent);

  --cor-erro-texto: #b3261e;
  --cor-erro-fundo: #fdecea;
  --cor-erro-borda: #f3c2bd;
  --cor-sucesso-texto: #1a7f4b;
  --cor-sucesso-fundo: #e3f5ea;
  --cor-aviso-texto: #8a5a00;
  --cor-aviso-fundo: #fff3d6;
  --cor-info-texto: #0d5c8f;
  --cor-info-fundo: #e3f1fb;
  --cor-violeta-texto: #5f3dc4;
  --cor-violeta-fundo: #eee8fb;
  --cor-neutro-texto: #5b6672;
  --cor-neutro-fundo: #edf0f3;
  --cor-estrela: #d9a300;

  --sombra-cartao: 0 1px 2px rgba(22, 33, 43, 0.04), 0 6px 20px -12px rgba(22, 33, 43, 0.12);
  --sombra-elevada: 0 4px 10px -2px rgba(22, 33, 43, 0.08), 0 18px 40px -16px rgba(22, 33, 43, 0.18);
  --sombra-modal: 0 24px 60px -20px rgba(22, 33, 43, 0.35);

  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 14px;

  --sidebar-largura: 236px;
  --topbar-altura: 56px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* apelidos legados (login.css e alguns estilos inline em JS ainda usam) */
  --azul-primario: var(--cor-primaria);
  --azul-escuro: var(--cor-primaria-forte);
  --azul-claro: var(--cor-primaria-tinta);
  --texto-principal: var(--cor-texto);
  --texto-secundario: var(--cor-texto-suave);
  --borda: var(--cor-borda-suave);
  --fundo: var(--cor-fundo);
  --branco: var(--cor-cartao);
  --verde: var(--cor-sucesso-texto);
  --vermelho: var(--cor-erro-texto);
}

[data-tema="escuro"] {
  color-scheme: dark;

  /* Pretos profundos (05/10/2026): camadas neutras, sem tom azul, separadas
     por borda fina. Texto conferido por calculo (WCAG AA >= 4,5:1 sobre o
     cartao #0f0f10: principal 17,6 / suave 7,5 / fraco 5,6). */
  --cor-fundo: #000000;
  --cor-lateral: #0a0a0a;
  --cor-cartao: #0f0f10;
  --cor-cartao-2: #141416;
  --cor-elevado: #161618;
  --cor-texto: #f5f5f7;
  --cor-texto-suave: #a1a1aa;
  --cor-texto-suave2: #b4b4bc;
  --cor-texto-fraco: #8a8a93;
  --cor-borda: rgba(255, 255, 255, 0.14);
  --cor-borda-suave: rgba(255, 255, 255, 0.08);
  --cor-borda-tabela: rgba(255, 255, 255, 0.07);
  --cor-hover-linha: #1a1a1c;

  --cor-primaria: #4fbfcb;
  --cor-primaria-forte: #6fd0da;
  --cor-primaria-texto: #08262a;

  --cor-erro-texto: #ff8a80;
  --cor-erro-fundo: rgba(255, 99, 88, 0.12);
  --cor-erro-borda: rgba(255, 99, 88, 0.30);
  --cor-sucesso-texto: #6fdb94;
  --cor-sucesso-fundo: rgba(74, 222, 128, 0.12);
  --cor-aviso-texto: #e8c468;
  --cor-aviso-fundo: rgba(232, 196, 104, 0.12);
  --cor-neutro-fundo: rgba(255, 255, 255, 0.07);
  --cor-neutro-texto: #a8a8b0;
  --cor-info-texto: #7dd3fc;
  --cor-info-fundo: rgba(125, 211, 252, 0.12);
  --cor-violeta-texto: #c4a9f5;
  --cor-violeta-fundo: rgba(196, 169, 245, 0.13);
  --cor-estrela: #f2c230;

  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sombra-elevada: 0 8px 24px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sombra-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
}

a { color: var(--cor-primaria); }

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

button { font-family: inherit; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cor-primaria) 60%, transparent);
  outline-offset: 2px;
}

.oculto { display: none !important; }

/* ---------- autenticacao (cadastro; login usa login.css por cima) ---------- */

body.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 0% -10%, var(--cor-primaria-tinta), transparent 60%),
    var(--cor-fundo);
  padding: 24px;
}

.auth-card {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--sombra-elevada);
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.auth-card .subtitulo {
  margin: 0 0 24px;
  color: var(--cor-texto-suave);
  font-size: 14px;
}

/* ---------- abas (segmented control) ---------- */

.tabs {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 20px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-sm);
  padding: 3px;
  max-width: 100%;
  overflow-x: auto;
}

.tabs button {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-suave);
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.tabs button:hover { color: var(--cor-texto); }

.tabs button.ativo {
  background: var(--cor-cartao);
  color: var(--cor-primaria);
  box-shadow: var(--sombra-cartao);
}

/* FILA.md item 256 -- contador em cada aba de TIPO (Audiências/Prazos) */
.contador-aba {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--cor-neutro-fundo);
  color: var(--cor-neutro-texto);
}
.contador-aba:empty { display: none; }

/* ---------- formularios ---------- */

form div { margin-bottom: 14px; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cor-texto-suave2);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='date'],
input[type='datetime-local'],
input[type='number'],
input[type='url'],
input[type='tel'],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  font-size: 14px;
  color: var(--cor-texto);
  font-family: inherit;
  background: var(--cor-cartao);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--cor-texto-fraco); }

textarea { resize: vertical; min-height: 72px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-tinta-2);
}

input::placeholder, textarea::placeholder { color: var(--cor-texto-fraco); }

button[type='submit'],
.botao-primario {
  width: 100%;
  padding: 10px 16px;
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  border: none;
  border-radius: var(--raio-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s ease, transform .05s ease;
}

button[type='submit']:hover,
.botao-primario:hover { filter: brightness(1.07); }

button[type='submit']:active,
.botao-primario:active { transform: translateY(1px); }

button[type='submit']:disabled,
.botao-primario:disabled { opacity: .55; cursor: default; filter: none; }

.botao-secundario {
  padding: 8px 14px;
  background: var(--cor-cartao);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* Botão que é link (<a>): sem sublinhado e com o texto centralizado igual
   ao <button> -- na tela Vencidos os links ficavam sublinhados e com o
   texto no topo (04/10/2026). */
a.botao-secundario,
a.botao-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
a.botao-secundario:hover,
a.botao-primario:hover { text-decoration: none; }

.botao-secundario:hover {
  background: var(--cor-hover-linha);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.botao-secundario:disabled { opacity: .55; cursor: default; }

.botao-perigo {
  padding: 6px 12px;
  background: var(--cor-cartao);
  color: var(--cor-erro-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}

.botao-perigo:hover {
  border-color: var(--cor-erro-texto);
  background: var(--cor-erro-fundo);
}

.mensagem-erro {
  color: var(--cor-erro-texto);
  font-size: 13px;
  min-height: 16px;
  margin: -4px 0 10px;
}

.link-secundario {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.link-secundario:hover { color: var(--cor-primaria); }

/* ---------- shell: sidebar + topbar ---------- */

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

.sidebar {
  width: var(--sidebar-largura);
  flex-shrink: 0;
  background: var(--cor-cartao);
  border-right: 1px solid var(--cor-borda-suave);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 30;
  transition: transform .22s ease;
}

.sidebar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 14px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.12em;
  color: var(--cor-texto);
  white-space: nowrap;
}

.sidebar .logo::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--cor-primaria) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></svg>") center / 66% no-repeat;
}

[data-tema="escuro"] .sidebar .logo::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308262a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></svg>");
}

.sidebar nav {
  flex: 1;
  padding: 4px 10px 12px;
}

.sidebar .nav-grupo {
  margin: 10px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: var(--raio-sm);
  color: var(--cor-texto-suave2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}

.sidebar nav a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: .8;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

.sidebar nav a:hover {
  background: var(--cor-hover-linha);
  color: var(--cor-primaria);
}

.sidebar nav a.ativo {
  background: var(--cor-primaria-tinta-2);
  color: var(--cor-primaria);
  font-weight: 600;
}

.sidebar nav a.ativo::before { opacity: 1; }

/* icones da navegacao (traco 2px, mesma familia dos icones de KPI) */
.sidebar nav a[data-chave="dashboard"]    { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='8' height='10' rx='2'/><rect x='13' y='3' width='8' height='6' rx='2'/><rect x='13' y='11' width='8' height='10' rx='2'/><rect x='3' y='15' width='8' height='6' rx='2'/></svg>"); }
.sidebar nav a[data-chave="kanban"]       { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='5' height='16' rx='1'/><rect x='10' y='4' width='5' height='10' rx='1'/><rect x='17' y='4' width='4' height='13' rx='1'/></svg>"); }
.sidebar nav a[data-chave="agenda"]       { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>"); }
.sidebar nav a[data-chave="workflows"]    { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='2.5'/><circle cx='18' cy='12' r='2.5'/><circle cx='6' cy='18' r='2.5'/><path d='M8.5 6h4a3 3 0 0 1 3 3v0a3 3 0 0 0 3 3M8.5 18h4a3 3 0 0 0 3-3v0'/></svg>"); }
.sidebar nav a[data-chave="contatos"]     { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2 20a7 7 0 0 1 14 0M16 5a3.5 3.5 0 0 1 0 7M22 20a6 6 0 0 0-5-5.9'/></svg>"); }
.sidebar nav a[data-chave="atendimentos"] { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.7 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/></svg>"); }
.sidebar nav a[data-chave="tarefas"]       { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 12l2.5 2.5L16 9'/></svg>"); }
.sidebar nav a[data-chave="processos"]    { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M5 7l7-4 7 4M3 15l2-8 2 8a2 2 0 0 1-4 0zM17 15l2-8 2 8a2 2 0 0 1-4 0zM8 21h8'/></svg>"); }
.sidebar nav a[data-chave="publicacoes"]  { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h13a2 2 0 0 1 2 2v11H6a2 2 0 0 1-2-2z'/><path d='M19 19a2 2 0 0 0 2-2V9h-2M8 10h7M8 14h7'/></svg>"); }
.sidebar nav a[data-chave="feriados"]     { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/><path d='M8 14l2 2 4-4'/></svg>"); }
.sidebar nav a[data-chave="financeiro"]   { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='12' rx='2'/><circle cx='12' cy='12' r='2.5'/><path d='M7 12h.01M17 12h.01'/></svg>"); }
.sidebar nav a[data-chave="criacao-pecas"]{ --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>"); }
.sidebar nav a[data-chave="documentos"]   { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h8l4 4v14H6z'/><path d='M14 3v4h4M9 13h6M9 17h6'/></svg>"); }
.sidebar nav a[data-chave="indicadores"]  { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20V4M16 20v-7M2 20h20'/></svg>"); }
.sidebar nav a[data-chave="alertas"]      { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16V11a6 6 0 0 1 12 0v5l2 2H4zM10 21h4'/></svg>"); }
.sidebar nav a[data-chave="ias"]          { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='8' width='16' height='11' rx='3'/><circle cx='9' cy='13.5' r='1.3'/><circle cx='15' cy='13.5' r='1.3'/><path d='M12 8V4M9 4h6'/></svg>"); }
.sidebar nav a[data-chave="suporte"]      { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9.5a2.5 2.5 0 0 1 5 .5c0 1.5-2.5 2-2.5 3.5M12 17h.01'/></svg>"); }
/* FILA 275: estes 6 itens nao tinham icone e mostravam um quadrado cheio no lugar. */
.sidebar nav a[data-chave="primeiros-passos"]{ --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4'/><path d='M5 4h11l-2 4 2 4H5'/></svg>"); }
.sidebar nav a[data-chave="vencidos"]     { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9.5 17h-19z'/><path d='M12 10v4M12 17.5v.5'/></svg>"); }
.sidebar nav a[data-chave="cofre"]        { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>"); }
.sidebar nav a[data-chave="assinatura"]   { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 10h18M7 15h4'/></svg>"); }
.sidebar nav a[data-chave="equipe"]       { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20a6.5 6.5 0 0 1 13 0'/><path d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6 6 0 0 1 3.5 6'/></svg>"); }
.sidebar nav a[data-chave="config-alerta-prazo"]{ --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9'/><path d='M10 20a2 2 0 0 0 4 0'/></svg>"); }

.sidebar-rodape {
  padding: 10px 12px 14px;
  border-top: 1px solid var(--cor-borda-suave);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.botao-tema {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  color: var(--cor-texto-suave2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color .12s ease, color .12s ease;
}

.botao-tema:hover { background: var(--cor-hover-linha); color: var(--cor-texto); }

.botao-tema::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: .8;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/></svg>") center / contain no-repeat;
}

[data-tema="escuro"] .botao-tema::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>") center / contain no-repeat;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 22, 0.45);
  z-index: 25;
}

.main-content {
  margin-left: var(--sidebar-largura);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--topbar-altura);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--cor-cartao) 88%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--cor-borda-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  flex-shrink: 0;
}

.topbar-esquerda {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.botao-menu {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-cartao);
  color: var(--cor-texto);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.botao-menu::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>") center / contain no-repeat;
}

.topbar-contexto {
  font-size: 13px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-contexto strong { color: var(--cor-texto); font-weight: 600; }

.topbar .usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--cor-texto-suave);
  min-width: 0;
}

.topbar .usuario strong { color: var(--cor-texto); font-weight: 600; }

.usuario-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.usuario-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-tinta-2);
  color: var(--cor-primaria);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#shell-usuario-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.botao-sair {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cor-texto-suave2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.botao-sair:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
  background: var(--cor-hover-linha);
}

/* ---------- conteudo da pagina ---------- */

.page-content {
  padding: 24px 28px 56px;
  flex: 1;
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
}

.page-content h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.page-content .subtitulo {
  margin: 0 0 20px;
  color: var(--cor-texto-suave);
  font-size: 13.5px;
  max-width: 72ch;
}

/* cabecalho de pagina em linha: titulo a esquerda, acoes a direita */
.pagina-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 18px;
}

.pagina-cabecalho h1 { margin: 0 0 2px; }
.pagina-cabecalho .subtitulo { margin: 0; }

.pagina-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pagina-acoes .botao-primario { width: auto; padding: 9px 16px; white-space: nowrap; text-decoration: none; text-align: center; }

/* ---------- avisos ---------- */

.onboarding-boas-vindas {
  background: var(--cor-primaria-tinta);
  border: 1px solid color-mix(in srgb, var(--cor-primaria) 35%, transparent);
  border-radius: var(--raio-sm);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto);
}

.onboarding-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--cor-primaria-tinta), transparent 70%), var(--cor-cartao);
  border: 1px solid color-mix(in srgb, var(--cor-primaria) 35%, transparent);
  border-radius: var(--raio-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: var(--sombra-cartao);
}

.onboarding-callout h2 { margin: 0 0 4px; font-size: 15.5px; }

.onboarding-callout p { margin: 0; font-size: 13.5px; color: var(--cor-texto-suave); }

.onboarding-callout .botao-primario {
  width: auto;
  white-space: nowrap;
  padding: 10px 18px;
  text-decoration: none;
  text-align: center;
}

/* ---------- KPIs (area de trabalho) ---------- */

.cards-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.card {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  padding: 18px 20px;
  box-shadow: var(--sombra-cartao);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

a.card:hover, .card.card--link:hover {
  box-shadow: var(--sombra-elevada);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cor-primaria) 35%, var(--cor-borda-suave));
}

.card .rotulo {
  font-size: 13px;
  color: var(--cor-texto-suave);
  font-weight: 500;
  margin: 0;
}

.card .valor {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.card .detalhe {
  font-size: 12px;
  color: var(--cor-texto-fraco);
  margin: -4px 0 0;
}

.kpi-icone {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icone svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi-icone--primaria { color: var(--cor-primaria); background: var(--cor-primaria-tinta-2); }
.kpi-icone--info     { color: var(--cor-info-texto); background: var(--cor-info-fundo); }
.kpi-icone--violeta  { color: var(--cor-violeta-texto); background: var(--cor-violeta-fundo); }
.kpi-icone--sucesso  { color: var(--cor-sucesso-texto); background: var(--cor-sucesso-fundo); }
.kpi-icone--aviso    { color: var(--cor-aviso-texto); background: var(--cor-aviso-fundo); }
.kpi-icone--erro     { color: var(--cor-erro-texto); background: var(--cor-erro-fundo); }

/* ---------- paineis/cartoes de secao ---------- */

.grade-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.painel {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-cartao);
}

.painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
}

.painel-cabecalho h2 {
  margin: 0;
  font-size: 15px;
}

.painel-cabecalho .painel-subtitulo {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
}

.painel-cabecalho-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.painel-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-primaria);
  text-decoration: none;
  white-space: nowrap;
}

.painel-link:hover { text-decoration: underline; }

.painel-corpo { padding: 4px 20px 18px; }

/* lista compacta dentro de um painel (dashboard: prazos, publicacoes) */
.lista-compacta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-compacta li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cor-borda-tabela);
}

.lista-compacta li:last-child { border-bottom: none; }

.lista-compacta a { color: inherit; text-decoration: none; }
.lista-compacta a:hover .lista-titulo { color: var(--cor-primaria); }

.lista-data {
  min-width: 46px;
  text-align: center;
  padding: 4px 6px;
  border-radius: var(--raio-sm);
  background: var(--cor-cartao-2);
  border: 1px solid var(--cor-borda-suave);
  line-height: 1.1;
}

.lista-data .dia {
  display: block;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lista-data .mes {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.lista-data--hoje { background: var(--cor-primaria-tinta-2); border-color: transparent; color: var(--cor-primaria); }
.lista-data--hoje .mes { color: var(--cor-primaria); }

.lista-titulo {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lista-detalhe {
  display: block;
  font-size: 12px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lista-vazia {
  padding: 22px 0 10px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 13px;
}

/* placeholder "Em breve" */
.em-breve {
  background: var(--cor-cartao);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: 56px 24px;
  text-align: center;
  color: var(--cor-texto-suave);
}

.em-breve .icone { font-size: 30px; margin-bottom: 12px; }

.em-breve h2 { margin: 0 0 8px; font-size: 17px; }

.em-breve p { max-width: 440px; margin: 0 auto; font-size: 14px; line-height: 1.5; }

/* ---------- painel de vigilancia (Publicacoes, FILA.md item 92) ---------- */

.painel-vigilancia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--cor-info-fundo);
  color: var(--cor-info-texto);
  border-radius: var(--raio-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

.painel-vigilancia p { margin: 0; }

/* ---------- toolbar de listagem ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.toolbar .campo-busca {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.toolbar .campo-busca input { margin: 0; padding-left: 36px; }

.toolbar .campo-busca:has(input)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: var(--cor-texto-fraco);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

.toolbar .campo-busca p.subtitulo { margin: 0; }

.toolbar select {
  width: auto;
  min-width: 150px;
  margin: 0;
}

/* ---------- barra de acao em lote (selecionar + excluir) ---------- */

.barra-selecao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--cor-primaria-tinta);
  border: 1px solid var(--cor-primaria);
  border-radius: 8px;
  color: var(--cor-texto);
  font-weight: 500;
}

.toolbar .botao-primario {
  width: auto;
  padding: 9px 16px;
  white-space: nowrap;
}

/* ---------- tabelas ---------- */

.tabela-wrapper { overflow-x: auto; }

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.tabela th,
table.tabela td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--cor-borda-tabela);
  vertical-align: middle;
}

table.tabela th {
  color: var(--cor-texto-fraco);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cor-cartao-2);
  white-space: nowrap;
}

table.tabela tbody tr:last-child td { border-bottom: none; }

table.tabela tbody tr { transition: background-color .1s ease; }
table.tabela tbody tr:hover { background: var(--cor-hover-linha); }

table.tabela td.num, table.tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

.botao-link-tabela {
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
}

.botao-link-tabela:hover { color: var(--cor-primaria); text-decoration: underline; }

.numero-cnj-linha {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 12px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.botao-favorito {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: var(--cor-borda);
  padding: 4px;
  transition: color .12s ease, transform .1s ease;
}

.botao-favorito:hover { color: var(--cor-estrela); transform: scale(1.1); }
.botao-favorito.ativo { color: var(--cor-estrela); }

.acoes-linha {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.acoes-linha .botao-secundario { padding: 6px 10px; font-size: 12.5px; }

.estado-vazio,
.estado-carregando {
  padding: 44px 24px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 13.5px;
}

.estado-vazio-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.estado-vazio-emoji {
  font-size: 28px;
  line-height: 1;
}

.estado-vazio-texto {
  max-width: 360px;
  margin: 0;
}

.estado-vazio-botao {
  margin-top: 4px;
}

/* esqueleto de carregamento (substitui o texto "Carregando..." quando a
   tela quiser -- classe aditiva, o texto continua funcionando) */
.estado-carregando::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid var(--cor-borda);
  border-top-color: var(--cor-primaria);
  animation: lupa-girar .8s linear infinite;
}

@keyframes lupa-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .estado-carregando::before { animation: none; }
  * { transition-duration: 0s !important; }
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  border-top: 1px solid var(--cor-borda-tabela);
  background: var(--cor-cartao-2);
  flex-wrap: wrap;
}

.paginacao span { margin-right: auto; }

.paginacao button {
  padding: 6px 12px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cor-texto);
}

.paginacao button:hover:not(:disabled) { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.paginacao button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--cor-neutro-fundo);
  color: var(--cor-neutro-texto);
}

.badge-ativo, .badge-convertido, .badge-receita, .badge-pago { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.badge-encerrado, .badge-tarefa, .badge-outro, .badge-descartado, .badge-cancelado { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
.badge-audiencia, .badge-despesa { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.badge-prazo, .badge-em_atendimento, .badge-pendente { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.badge-reuniao, .badge-novo { background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.badge-pericia { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.badge-ciencia, .badge-revisar_publicacao { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }

/* Tela "Tarefas" (FILA.md item 139a) -- prioridade e situacao granular
   (a_fazer/em_andamento/feito/cancelado, distinta do booleano `concluido`
   usado no resto da Agenda). */
.badge-fatal { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.badge-a_fazer { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.badge-em_andamento { background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.badge-feito { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
/* FILA.md item 142, Entrega 5 -- "provavelmente cumprida" (fechamento
   automatico com duvida, ver src/atoPraticadoDecisor.js) precisa de cor
   PROPRIA, distinta de a_fazer -- e' uma pendencia diferente (confirmar uma
   sugestao), nao uma tarefa aberta comum. */
.badge-provavelmente_cumprida { background: var(--cor-info-fundo); color: var(--cor-info-texto); }

/* Chips de selecao multipla (ex. "Areas de atuacao" do onboarding, FILA.md
   item 41) -- botao normal, sem checkbox escondido: toggla so' pela classe
   .selecionado (JS controla, sem estado nativo de <input>). */
.chips-selecionaveis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-selecionavel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda-suave);
  background: var(--cor-cartao);
  color: var(--cor-texto-suave);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chip-selecionavel:hover { border-color: var(--cor-primaria); }
.chip-selecionavel.selecionado {
  background: var(--cor-primaria-tinta);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

/* FILA.md item 344 -- atendimento que chegou pela integracao com a Zela */
.badge-via-zela { background: var(--cor-primaria-tinta-2); color: var(--cor-primaria); margin-left: 6px; }

.bloco-reuniao {
  background: var(--cor-neutro-fundo);
  border: 1px solid var(--cor-borda-suave);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  grid-column: 1 / -1;
}
.bloco-reuniao h3 { margin: 0 0 8px; font-size: 14px; }
.bloco-reuniao dl { margin: 0; }
.bloco-reuniao dt { font-size: 12px; font-weight: 600; color: var(--cor-texto-suave); margin-top: 10px; }
.bloco-reuniao dt:first-child { margin-top: 0; }
.bloco-reuniao dd { margin: 2px 0 0; white-space: pre-wrap; }
.bloco-reuniao ul { margin: 2px 0 0; padding-left: 18px; }
.bloco-reuniao .historico-reuniao-item { border-top: 1px solid var(--cor-borda-suave); padding-top: 8px; margin-top: 8px; font-size: 13px; color: var(--cor-texto-suave); }

/* status de publicacao (caixa de entrada) */
.badge-nova { background: var(--cor-primaria-tinta-2); color: var(--cor-primaria); }
.badge-lida { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
.badge-tratada { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }

/* selo com contagem (ex. "3 novas") */
.selo-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

tr.linha-nao-lida td { font-weight: 600; }
tr.linha-nao-lida .botao-link-tabela { font-weight: 700; }

.compromisso-concluido { color: var(--cor-texto-suave); text-decoration: line-through; }

.valor-receita { color: var(--cor-sucesso-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.valor-despesa { color: var(--cor-erro-texto); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 22, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-caixa {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  width: 100%;
  max-width: 640px;
  box-shadow: var(--sombra-modal);
  animation: lupa-subir .18s ease;
}

.modal-caixa--larga { max-width: 860px; }

@keyframes lupa-subir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .modal-caixa { animation: none; } }

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.modal-cabecalho h2 { margin: 0; font-size: 16px; }

.modal-cabecalho .modal-subtitulo {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.botao-fechar-modal {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--cor-texto-fraco);
  padding: 4px 6px;
  border-radius: var(--raio-sm);
}

.botao-fechar-modal:hover { color: var(--cor-texto); background: var(--cor-hover-linha); }

.modal-corpo { padding: 22px; }

.modal-corpo .tabs { margin-bottom: 18px; }

/* FILA.md item 166, Defeito 1 -- bloco só-leitura de tribunal/autor/réu/link
   no modal "Editar compromisso" da Agenda (processoCompromissoInfo.js). */
.bloco-leitura-processo {
  background: var(--cor-fundo-alt, #f6f6f8);
  border: 1px solid var(--cor-borda, #e2e2e6);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.bloco-leitura-processo p { margin: 0 0 6px; font-size: 13.5px; }
.bloco-leitura-processo p:last-child { margin-bottom: 0; }
.bloco-leitura-processo .acoes-linha { margin-top: 6px; margin-bottom: 6px; }

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--cor-borda-suave);
  background: var(--cor-cartao-2);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  flex-wrap: wrap;
}

.modal-rodape .botao-primario,
.modal-rodape .botao-secundario { width: auto; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.form-grid .campo-largo { grid-column: 1 / -1; }

.grupo-radio { display: flex; gap: 14px; flex-wrap: wrap; }

.grupo-radio label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
  color: var(--cor-texto);
  margin: 0;
}

.grupo-radio input { width: auto; accent-color: var(--cor-primaria); }

.campo-checkbox { display: flex; align-items: center; gap: 8px; }
.campo-checkbox input { width: auto; accent-color: var(--cor-primaria); }
.campo-checkbox label { margin: 0; color: var(--cor-texto); font-weight: 500; }

.previa-cnj {
  background: var(--cor-cartao-2);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-sm);
  padding: 16px;
  margin-top: 16px;
}

.previa-cnj dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  font-size: 13px;
}

.previa-cnj dt { color: var(--cor-texto-suave); font-weight: 600; }
.previa-cnj dd { margin: 0; color: var(--cor-texto); font-variant-numeric: tabular-nums; }

.busca-cnj-linha { display: flex; gap: 10px; align-items: flex-start; }
.busca-cnj-linha input { flex: 1; }
.busca-cnj-linha .botao-secundario { flex-shrink: 0; margin-top: 0; padding: 9px 14px; }

.lote-resultado { margin-top: 16px; }
.lote-resultado p { color: var(--cor-texto-suave); font-size: 13px; }

/* ficha (detalhe) de processo: grade de dados chave/valor em abas */
.ficha-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 20px;
  margin: 0;
}

.ficha-dados div { margin: 0; }

.ficha-dados dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin-bottom: 3px;
}

.ficha-dados dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ficha-dados dd a { color: var(--cor-primaria); }

.ficha-bloco { margin-top: 18px; }

.ficha-bloco h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-fraco);
}

.ficha-bloco p { margin: 0; font-size: 13.5px; white-space: pre-wrap; }

.ficha-tabela-wrapper {
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-sm);
  overflow: hidden;
}

/* ---------- agenda ---------- */

.badge-tipo { text-transform: none; letter-spacing: 0; }

/* ---------- kanban ---------- */

.kanban-board {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban-coluna {
  background: var(--cor-cartao-2);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  padding: 12px;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-coluna-cabecalho { display: flex; align-items: center; gap: 8px; }

.kanban-coluna-cabecalho h3 { flex: 1; margin: 0; font-size: 13.5px; }

.kanban-coluna-contagem {
  background: var(--cor-neutro-fundo);
  color: var(--cor-neutro-texto);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kanban-botao-excluir-coluna {
  background: none;
  border: none;
  color: var(--cor-texto-fraco);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.kanban-botao-excluir-coluna:hover { color: var(--cor-erro-texto); }

.kanban-lista-cartoes { display: flex; flex-direction: column; gap: 8px; min-height: 24px; }

.kanban-cartao {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  cursor: grab;
  box-shadow: var(--sombra-cartao);
  transition: box-shadow .12s ease, transform .12s ease;
}

.kanban-cartao:hover { box-shadow: var(--sombra-elevada); transform: translateY(-1px); }
.kanban-cartao.arrastando { opacity: .4; }

.kanban-cartao-titulo { margin: 0; font-size: 13px; font-weight: 600; }
.kanban-cartao-detalhe { margin: 4px 0 0; font-size: 12px; color: var(--cor-texto-suave); }

.kanban-cartao-responsavel {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--cor-primaria);
  background: var(--cor-primaria-tinta);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}

.kanban-botao-adicionar-cartao {
  background: none;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: 8px;
  color: var(--cor-texto-suave);
  cursor: pointer;
  font-size: 13px;
}

.kanban-botao-adicionar-cartao:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

/* ---------- workflows ---------- */

.linha-etapa {
  display: grid;
  grid-template-columns: 2fr 1fr 90px 2fr auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.linha-etapa input, .linha-etapa select { width: 100%; }

.linha-etapa .botao-remover-etapa {
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  color: var(--cor-erro-texto);
  cursor: pointer;
  height: 38px;
  width: 38px;
}

.linha-etapa .botao-remover-etapa:hover { background: var(--cor-erro-fundo); }

/* ---------- paginas estaticas (IAs / Suporte) ---------- */

.lista-recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.recurso-card {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  padding: 20px;
  box-shadow: var(--sombra-cartao);
}

.recurso-card .icone { font-size: 22px; margin-bottom: 8px; }
.recurso-card h2 { margin: 0 0 8px; font-size: 15px; }
.recurso-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cor-texto-suave); }

.lista-perguntas { margin-bottom: 22px; }

.pergunta-frequente {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-md);
  padding: 14px 18px;
  margin-bottom: 8px;
}

.pergunta-frequente summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.pergunta-frequente p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--cor-texto-suave); }

/* ---------- responsivo ---------- */

@media (max-width: 960px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--sombra-elevada);
  }

  body.menu-aberto .sidebar { transform: none; }
  body.menu-aberto .sidebar-overlay { display: block; }
  body.menu-aberto { overflow: hidden; }

  .main-content { margin-left: 0; }

  .botao-menu { display: inline-flex; }

  .topbar { padding: 0 14px; }

  .topbar-contexto { display: none; }

  #shell-usuario-nome { max-width: 160px; }

  .page-content { padding: 16px 14px 40px; }

  .page-content h1 { font-size: 20px; }

  .form-grid { grid-template-columns: 1fr; }
  /* No mobile, .form-grid vira 1 coluna e os campos empilham -- mas o gap
     continua "0 16px" (zero vertical), então qualquer form com 3+ campos
     (ex. busca em lote pela OAB) fica com os campos colados um no outro.
     Regra genérica, sem depender de style inline campo a campo (Sérgio
     reportou isso em 09/09/2026). */
  .form-grid > div:not(:first-child) { margin-top: 16px; }

  .linha-etapa { grid-template-columns: 1fr 1fr; }

  .modal-overlay { padding: 12px 8px; }

  .modal-cabecalho, .modal-corpo, .modal-rodape { padding-left: 16px; padding-right: 16px; }

  /* em tela estreita a tabela rola dentro do proprio painel (overflow-x do
     .tabela-wrapper) em vez de espremer as colunas ate cada celula virar
     uma torre de texto; a pagina em si nunca rola na horizontal */
  table.tabela { min-width: 860px; }
  .ficha-tabela-wrapper { overflow-x: auto; }
  .ficha-tabela-wrapper table.tabela { min-width: 560px; }

  .toolbar .campo-busca { min-width: 100%; }

  .toolbar select { flex: 1; min-width: 0; }

  .toolbar .botao-primario { flex: 1; }

  .acoes-linha { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .usuario-chip #shell-usuario-nome { display: none; }
  .cards-resumo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 14px; }
  .card .valor { font-size: 24px; }
  .kpi-icone { width: 32px; height: 32px; }
  .grade-2 { grid-template-columns: 1fr; }
  .modal-rodape .botao-primario, .modal-rodape .botao-secundario { flex: 1; }
}

/* numero de processo dentro de tabela: nunca quebra no meio */
.numero-processo { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.acoes-linha { flex-wrap: nowrap; }

/* ---------- assinatura mensal (docs/ASSINATURA-MENSAL.md, Etapa 2) ---------- */

/* Chip do plano na topbar (shell.js) -- mesmas cores semanticas do .badge,
   em formato pilula pra caber ao lado do nome do usuario. */
.chip-plano {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.chip-plano.oculto { display: none; }
.chip-plano--neutro    { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
.chip-plano--aviso     { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.chip-plano--erro      { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.chip-plano--sucesso   { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.chip-plano--violeta   { background: var(--cor-violeta-fundo); color: var(--cor-violeta-texto); }

/* Faixa de aviso injetada pelo shell.js logo abaixo da topbar. */
.faixa-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.faixa-aviso a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.faixa-aviso--aviso  { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.faixa-aviso--erro   { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.faixa-aviso--neutro { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
/* Faixa "generosa" de pagamento em atraso (ordem do Sergio, 08/10/2026). */
.faixa-aviso--grande { padding: 16px 24px; font-size: 15px; font-weight: 600; gap: 12px; }
.faixa-aviso .faixa-aviso-botao {
  background: var(--cor-erro-texto); color: var(--cor-erro-fundo);
  padding: 7px 14px; border-radius: 6px; text-decoration: none;
}

/* Botão "Silenciar" da faixa do Sentinela de Prazos (shell.js, FILA.md item
   171, seção 5) -- herda cor do texto da faixa (erro = vermelho), fundo
   translúcido pra não competir com o link "Ver tarefas" ao lado. */
.faixa-aviso-botao-silenciar {
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.faixa-aviso-botao-silenciar:hover { background: rgba(255, 255, 255, 0.55); }

/* Tour leve do menu (shell.js, FILA.md item 41 parte 2c): destaque no link
   + balao flutuante ao lado, sem overlay -- nunca bloqueia a pagina. */
.sidebar nav a.tour-destaque {
  position: relative;
  background: var(--cor-primaria-tinta-2);
  color: var(--cor-primaria);
  box-shadow: 0 0 0 2px var(--cor-primaria);
}
.sidebar nav a.tour-destaque::before { opacity: 1; }

.tour-balao {
  position: fixed;
  z-index: 60;
  width: 260px;
  max-width: calc(100vw - 16px);
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-elevada);
  padding: 14px;
}
.tour-balao-contador {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-primaria);
  margin-bottom: 6px;
}
.tour-balao p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cor-texto);
}
.tour-balao-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.tour-balao-acoes .botao-primario { width: auto; padding: 7px 14px; font-size: 13px; }
.tour-balao-pular {
  background: transparent;
  border: none;
  color: var(--cor-texto-suave);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 7px 4px;
}
.tour-balao-pular:hover { color: var(--cor-texto); text-decoration: underline; }

/* Barras de uso vs limite (processos/OABs/usuarios/GB) da tela "Minha
   assinatura". Preenchimento por variavel inline (--preenchimento, 0-100)
   setada no JS -- evita gerar uma classe CSS por percentual. */
.barra-uso { margin-bottom: 16px; }
.barra-uso:last-child { margin-bottom: 0; }
.barra-uso-cabecalho {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  margin-bottom: 6px;
}
.barra-uso-cabecalho strong { color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.barra-uso-trilho {
  height: 8px;
  border-radius: 999px;
  background: var(--cor-neutro-fundo);
  overflow: hidden;
}
.barra-uso-preenchimento {
  height: 100%;
  border-radius: 999px;
  background: var(--cor-primaria);
  width: var(--preenchimento, 0%);
  transition: width .2s ease;
}
.barra-uso-preenchimento.barra-uso-preenchimento--perto { background: var(--cor-aviso-texto); }
.barra-uso-preenchimento.barra-uso-preenchimento--cheia { background: var(--cor-erro-texto); }

/* Cards de plano (Essencial/Profissional/Escritorio) da tela "Minha
   assinatura" -- variante do .card generico, com destaque pro plano atual. */
.cards-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.card-plano {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  padding: 18px 20px;
  box-shadow: var(--sombra-cartao);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-plano--atual { border-color: color-mix(in srgb, var(--cor-primaria) 45%, var(--cor-borda-suave)); }
.card-plano-nome { font-size: 15px; font-weight: 700; margin: 0; }
.card-plano-preco { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-plano-preco span { font-size: 12.5px; font-weight: 500; color: var(--cor-texto-suave); }
.card-plano-limites { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--cor-texto-suave); display: flex; flex-direction: column; gap: 4px; }
.card-plano .botao-primario, .card-plano .botao-secundario { width: 100%; }

@media (max-width: 560px) {
  .cards-planos { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Agenda -- visão de calendário (Mês/Semana/Dia), FILA.md item 143. Cores
   por tipo reaproveitam os tokens semânticos já existentes (ver regra do
   topo do arquivo), nunca uma cor nova.
   =========================================================================== */

.agenda-visao-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--cor-cartao-2);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-sm);
  margin-bottom: 14px;
}
.visao-botao {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.visao-botao:hover { color: var(--cor-texto); }
.visao-botao.ativo { background: var(--cor-cartao); color: var(--cor-primaria); box-shadow: var(--sombra-cartao); }

.agenda-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.agenda-nav-esquerda { display: flex; align-items: center; gap: 8px; }
.agenda-nav-esquerda h2 { font-size: 17px; font-weight: 700; margin: 0 0 0 6px; color: var(--cor-texto); }
.agenda-nav-seta {
  width: 30px; height: 30px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-cartao);
  color: var(--cor-texto);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.agenda-nav-seta:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.aviso-truncamento {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  border-radius: var(--raio-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 10px;
}

/* ---------- evento (compartilhado entre Mês/Semana/Dia) ---------- */

.evento-cal {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 6px;
  padding: 1px 6px;
  margin: 1px 0;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.evento-cal--ponto { background: transparent; color: var(--cor-texto); }
.evento-cal--ponto::before { content: '●'; font-size: 8px; margin-right: 4px; color: var(--pontinho, var(--cor-primaria)); }
.evento-cal--barra { color: var(--cor-primaria-texto); font-weight: 600; }
.evento-cal--concluido { text-decoration: line-through; opacity: .6; }
.evento-cal-hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.evento-cal-aviso { color: var(--cor-erro-texto); }
.evento-cal--marcador { color: var(--cor-info-texto); background: var(--cor-info-fundo); font-style: italic; cursor: default; }
.evento-cal--bloco {
  position: absolute;
  left: 2px; right: 2px;
  white-space: normal;
  box-shadow: var(--sombra-cartao);
  z-index: 1;
}

.evt-prazo { --pontinho: var(--cor-erro-texto); }
.evt-prazo.evento-cal--barra { background: var(--cor-erro-texto); }
.evt-audiencia { --pontinho: var(--cor-violeta-texto); }
.evt-audiencia.evento-cal--barra { background: var(--cor-violeta-texto); }
.evt-reuniao { --pontinho: var(--cor-info-texto); }
.evt-reuniao.evento-cal--barra { background: var(--cor-info-texto); }
.evt-pericia { --pontinho: var(--cor-aviso-texto); }
.evt-pericia.evento-cal--barra { background: var(--cor-aviso-texto); color: var(--cor-texto); }
.evt-tarefa { --pontinho: var(--cor-sucesso-texto); }
.evt-tarefa.evento-cal--barra { background: var(--cor-sucesso-texto); }
.evt-ciencia { --pontinho: var(--cor-neutro-texto); }
.evt-ciencia.evento-cal--barra { background: var(--cor-neutro-texto); color: var(--cor-cartao); }
.evt-outro { --pontinho: var(--cor-texto-fraco); }
.evt-outro.evento-cal--barra { background: var(--cor-texto-fraco); color: var(--cor-cartao); }

/* ---------- Mês ---------- */

/* minmax(0,1fr), nao 1fr: 1fr = minmax(auto,1fr) e o titulo longo de um
   evento (white-space:nowrap) alargava a coluna ate empurrar SEG-SAB pra
   fora da tela (visto em producao 29/09/2026, FILA.md item 145). */
.cal-mes-cabecalho, .cal-mes-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-mes-cabecalho {
  border-bottom: 1px solid var(--cor-borda-suave);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.cal-mes-cabecalho span {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}
.cal-mes-celula {
  min-height: 108px;
  border: 1px solid var(--cor-borda-tabela);
  margin: -1px 0 0 -1px;
  padding: 4px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
.cal-mes-celula--fora { background: var(--cor-cartao-2); }
.cal-mes-celula--fora .cal-mes-numero { color: var(--cor-texto-fraco); }
.cal-mes-celula--sobre { background: var(--cor-primaria-tinta); }
.cal-mes-numero { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-mes-numero-bolinha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
}
.cal-mes-feriado {
  background: var(--cor-neutro-fundo);
  color: var(--cor-neutro-texto);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  margin: -2px -3px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-mes-eventos { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cal-mes-numero-bolinha-pontos { display: none; }
.cal-mes-mais {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.cal-mes-mais:hover { color: var(--cor-primaria); }

/* ---------- Semana / Dia ---------- */

.cal-semana-cabecalho, .cal-semana-dia-inteiro-linha, .cal-semana-corpo-grade {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(0, 1fr));
}
.cal-semana--dia-unico .cal-semana-cabecalho,
.cal-semana--dia-unico .cal-semana-dia-inteiro-linha,
.cal-semana--dia-unico .cal-semana-corpo-grade {
  grid-template-columns: 52px minmax(0, 1fr);
}
.cal-semana-canto { border-bottom: 1px solid var(--cor-borda-suave); }
.cal-semana-coluna-cabecalho {
  text-align: center;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--cor-borda-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cal-semana-nome-dia { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cor-texto-fraco); }
.cal-semana-numero-dia { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-semana-coluna-cabecalho--hoje .cal-semana-nome-dia { color: var(--cor-primaria); }
.cal-semana-dia-inteiro-linha { min-height: 8px; }
.cal-semana-coluna-dia-inteiro { border-left: 1px solid var(--cor-borda-tabela); padding: 2px 3px; cursor: pointer; }
.cal-semana-corpo-scroll { max-height: 620px; overflow-y: auto; }
.cal-semana-coluna-horas { text-align: right; }
.cal-semana-marcacao-hora {
  font-size: 10.5px;
  color: var(--cor-texto-fraco);
  padding-right: 6px;
  transform: translateY(-6px);
  font-variant-numeric: tabular-nums;
}
.cal-semana-coluna-dia { min-width: 0; position: relative; border-left: 1px solid var(--cor-borda-tabela); cursor: pointer; }
.cal-semana-linha-hora { border-bottom: 1px solid var(--cor-borda-tabela); }

/* ---------- Popover "Mais N" ---------- */

.popover-dia {
  position: absolute;
  z-index: 40;
  width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-elevada);
}
.popover-dia-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-size: 13px;
}
.popover-dia-corpo { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
  .agenda-nav-esquerda h2 { font-size: 14px; }
  .cal-mes-celula { min-height: 44px; padding: 3px 3px 4px; }
  .cal-mes-numero { font-size: 11px; }
  .cal-mes-eventos, .cal-mes-mais { display: none; }
  .cal-mes-celula--tem-eventos .cal-mes-numero-bolinha-pontos { display: inline-flex; }
  .cal-mes-numero-bolinha-pontos {
    display: none;
    gap: 2px;
    margin-left: 4px;
    vertical-align: middle;
  }
  .cal-mes-numero-bolinha-pontos span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cor-primaria);
  }
  .cal-semana-cabecalho, .cal-semana-dia-inteiro-linha, .cal-semana-corpo-grade {
    grid-template-columns: 34px repeat(7, minmax(0, 1fr));
  }
}

/* ---------- Cofre de credenciais (FILA.md item 143, pendencia 7) ---------- */

/* Variantes de tom do painel-vigilancia (o original so tinha o azul de
   "info") -- reaproveita as mesmas variaveis semanticas de badge/faixa de
   aviso, nao cor nova. */
.painel-vigilancia--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.painel-vigilancia--erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }

.lista-passos { margin: 0 0 16px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--cor-texto-suave2); }
.lista-passos li { margin-bottom: 4px; }

.qr-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 4px 0 4px;
}
.qr-bloco img {
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-md);
  background: #fff;
  padding: 8px;
}

.codigo-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--cor-cartao-2);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-sm);
  padding: 8px 10px;
  word-break: break-all;
  user-select: all;
  max-width: 320px;
}

/* Botaozinho de copiar ao lado do numero do processo (shell.js
   botaoCopiarIcone, pedido do Sergio 04/10/2026). */
.botao-copiar-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 6px;
  vertical-align: middle; cursor: pointer;
  background: var(--cor-cartao-2); border: 1px solid var(--cor-borda-suave); border-radius: 5px;
  color: var(--cor-texto-suave);
}
.botao-copiar-icone:hover { color: var(--cor-texto); border-color: var(--cor-borda); }
.botao-copiar-icone svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.botao-copiar-icone svg rect.fundo { fill: var(--cor-cartao-2); }
.botao-copiar-icone.copiado { color: #1f9d55; border-color: #1f9d55; }

/* Tela "Vencidos sem providência" (04/10/2026): dado clicável + menu
   flutuante do botão "Ver na agenda". */
.link-dado { color: inherit; text-decoration: none; cursor: pointer; }
.link-dado:hover { color: var(--cor-primaria); text-decoration: none; }
.menu-agenda { position: fixed; z-index: 1000; min-width: 190px; padding: 6px; border-radius: 10px;
  background: var(--cor-cartao); color: var(--cor-texto); border: 1px solid var(--cor-borda);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 2px; }
.menu-agenda-opcao { display: block; padding: 9px 12px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; }
.menu-agenda-opcao:hover { background: var(--cor-hover-linha); }
.menu-agenda-opcao.desativada { opacity: .5; cursor: not-allowed; }
.menu-agenda-opcao.desativada:hover { background: none; }

/* ---- Area de trabalho em layout de transmissao (pedido do Sergio,
   04/10/2026: "repaginar 100%", "ocupar a tela inteira"). Os numeros do
   topo viram uma faixa unica de placar e, em tela larga, os 4 paineis
   (prazos, publicacoes, alertas, processos) ficam lado a lado numa linha
   so, em vez de dois pares empilhados. ---- */
@media (min-width: 1100px) {
  .mov-ativo .pagina-inicio .cards-resumo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-radius: var(--raio-lg);
    border: 1px solid color-mix(in srgb, var(--cor-primaria) 28%, var(--cor-borda-suave));
    background:
      linear-gradient(100deg,
        color-mix(in srgb, var(--cor-primaria) 14%, var(--cor-cartao)) 0%,
        var(--cor-cartao) 45%,
        color-mix(in srgb, var(--cor-primaria) 8%, var(--cor-cartao)) 100%);
    box-shadow: var(--sombra-cartao);
    overflow: hidden;
  }

  .mov-ativo .pagina-inicio .cards-resumo > .card {
    position: relative;
    background: transparent;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--cor-primaria) 18%, var(--cor-borda-suave));
    border-radius: 0;
    box-shadow: none;
    padding: 22px 26px 20px;
  }

  .mov-ativo .pagina-inicio .cards-resumo > .card:first-child {
    border-left: 0;
  }

  .mov-ativo .pagina-inicio .cards-resumo > .card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 30%, transparent));
  }

  .mov-ativo .pagina-inicio .cards-resumo > .card:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--cor-primaria) 6%, transparent);
  }

  .mov-ativo .pagina-inicio .cards-resumo .card .valor {
    font-size: 46px;
    line-height: 1;
  }
}

@media (min-width: 1800px) {
  .pagina-inicio {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 18px;
    align-content: start;
  }

  .pagina-inicio > * {
    grid-column: 1 / -1;
  }

  .pagina-inicio > .grade-2 {
    display: contents;
  }

  .pagina-inicio > .grade-2 > .painel {
    grid-column: span 1;
    margin-bottom: 18px;
  }
}
/* FILA.md item 272 -- "Som do alerta" (config-alerta-prazo.html). Aditivo. */
.lista-sons { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.lista-sons-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--cor-borda-suave); border-radius: 10px;
}
.lista-sons-item > label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-weight: 500; color: var(--cor-texto); cursor: pointer;
}
.lista-sons-item input[type='radio'] { width: auto; accent-color: var(--cor-primaria); }
.lista-sons-item--arquivo { align-items: flex-start; }
.lista-sons-arquivo { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 260px; }
.lista-sons-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.lista-sons-dica { margin: 0; font-weight: 400; color: var(--cor-texto-suave, inherit); font-size: .9em; }

/* ---- Publicacoes e Processos em layout de transmissao (FILA 274,
   04/10/2026, "ocupar a tela inteira"): faixa de placar com os totais
   reais da lista, filtros em pilula e linhas com filete na cor do tipo
   (Publicacoes) ou da situacao (Processos). ---- */

/* Itens do placar sao botoes: clicar filtra a lista. */
.placar .placar-item {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.placar .placar-item .rotulo,
.placar .placar-item .detalhe {
  display: block;
}

.placar .placar-item.placar-ativo {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 1px var(--cor-primaria), var(--sombra-cartao);
}

.placar .placar-item.placar-ativo .rotulo {
  color: var(--cor-primaria);
}

/* Filtros em pilula dentro da barra de busca (o select antigo fica
   escondido e continua sendo a fonte do filtro). */
.toolbar .filtro-pilulas {
  margin-bottom: 0;
}

/* Filete na esquerda da linha. A cor vem de --linha-cor, definida pela
   classe que o JS poe em cada linha. */
.page-content table.tabela tr.linha-tipo > td:first-child {
  box-shadow: inset 4px 0 0 var(--linha-cor, transparent);
}

tr.linha-tipo--intimacao { --linha-cor: var(--cor-primaria); }
tr.linha-tipo--citacao { --linha-cor: var(--cor-aviso-texto); }
tr.linha-tipo--outro { --linha-cor: var(--cor-borda); }
tr.linha-tipo--ativo { --linha-cor: var(--cor-sucesso-texto); }
tr.linha-tipo--encerrado { --linha-cor: var(--cor-neutro-texto); }

/* Selo do tipo da publicacao, na mesma cor do filete. */
.selo-tipo-publicacao--intimacao { background: var(--cor-primaria-tinta-2); color: var(--cor-primaria); }
.selo-tipo-publicacao--citacao { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.selo-tipo-publicacao--outro { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }

/* Em tela larga o placar vira uma faixa unica, como na area de trabalho:
   um numero grande por coluna, filete na cor do sistema no topo e a
   coluna do filtro escolhido acesa. */
@media (min-width: 1100px) {
  .mov-ativo .cards-resumo.placar {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    border-radius: var(--raio-lg);
    border: 1px solid color-mix(in srgb, var(--cor-primaria) 28%, var(--cor-borda-suave));
    background:
      linear-gradient(100deg,
        color-mix(in srgb, var(--cor-primaria) 14%, var(--cor-cartao)) 0%,
        var(--cor-cartao) 45%,
        color-mix(in srgb, var(--cor-primaria) 8%, var(--cor-cartao)) 100%);
    box-shadow: var(--sombra-cartao);
    overflow: hidden;
  }

  .mov-ativo .cards-resumo.placar > .card {
    position: relative;
    background: transparent;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--cor-primaria) 18%, var(--cor-borda-suave));
    border-radius: 0;
    box-shadow: none;
    padding: 22px 26px 20px;
  }

  .mov-ativo .cards-resumo.placar > .card:first-child {
    border-left: 0;
  }

  .mov-ativo .cards-resumo.placar > .card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 30%, transparent));
    opacity: .45;
    transition: opacity .25s ease, height .25s ease;
  }

  .mov-ativo .cards-resumo.placar > .card.placar-ativo {
    background: color-mix(in srgb, var(--cor-primaria) 9%, transparent);
  }

  .mov-ativo .cards-resumo.placar > .card.placar-ativo::before {
    height: 4px;
    opacity: 1;
  }

  .mov-ativo .cards-resumo.placar > .card:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--cor-primaria) 6%, transparent);
  }

  .mov-ativo .cards-resumo.placar .card .valor {
    font-size: 46px;
    line-height: 1;
  }
}

/* No celular o placar fica numa linha so de 3 colunas, sem a linha de
   explicacao (o rotulo ja diz o que e' cada numero). */
@media (max-width: 720px) {
  .cards-resumo.placar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .placar .placar-item {
    padding: 12px;
    gap: 8px;
  }

  .placar .placar-item .detalhe {
    display: none;
  }

  .placar .placar-item .rotulo {
    font-size: 11px;
  }

  .placar .placar-item .valor {
    font-size: 22px;
  }
}

/* Cabecalho das tabelas: o degrade da faixa (movimento.css) era pintado
   celula por celula e virava listras, uma por coluna. Aqui ele passa para
   a linha inteira do cabecalho e as celulas ficam transparentes, entao a
   faixa corre continua de ponta a ponta (FILA 274). */
.mov-ativo .page-content table.tabela thead tr {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cor-primaria) 16%, var(--cor-cartao)) 0%,
    var(--cor-cartao) 70%);
}

.mov-ativo .page-content table.tabela thead th {
  background: transparent;
}

/* ===========================================================================
   Tema escuro -- pretos profundos (05/10/2026, mesmo padrao da Zela). So vale
   no escuro; o tema claro nao muda. Fundo #000 > lateral #0a0a0a > cartao
   #0f0f10 > elevado (menu/janela) #161618, separados por borda fina.
   =========================================================================== */
[data-tema="escuro"] :is(.sidebar, .topbar) { background: var(--cor-lateral); }
[data-tema="escuro"] :is(.modal-caixa, .tour-balao, .popover-dia) {
  background-color: var(--cor-elevado);
}
[data-tema="escuro"] ::selection { background: color-mix(in srgb, var(--cor-primaria) 40%, transparent); }
[data-tema="escuro"] * { scrollbar-color: #2a2a2e transparent; scrollbar-width: thin; }
[data-tema="escuro"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-tema="escuro"] ::-webkit-scrollbar-track { background: transparent; }
[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
[data-tema="escuro"] ::-webkit-scrollbar-thumb:hover { background-color: #3a3a40; }

/* Varredura final (FILA 275, 05/10/2026): o que sobrava de azulado ou de
   bloco claro no escuro. So vale no escuro; o claro nao muda. */
[data-tema="escuro"] :is(.sidebar-overlay, .modal-overlay) { background: rgba(0, 0, 0, 0.6); }
/* Agenda: a barra do compromisso era um bloco pastel solido (vermelho-claro,
   lilas...) que acendia no preto. Vira fundo translucido da propria cor,
   filete na esquerda e texto claro, como os status do resto do tema. */
[data-tema="escuro"] .evento-cal.evento-cal--barra {
  background: color-mix(in srgb, var(--pontinho, var(--cor-primaria)) 18%, var(--cor-cartao));
  box-shadow: inset 3px 0 0 var(--pontinho, var(--cor-primaria));
  color: var(--cor-texto);
}
[data-tema="escuro"] .faixa-aviso-botao-silenciar { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
[data-tema="escuro"] .faixa-aviso-botao-silenciar:hover { background: rgba(255, 255, 255, 0.14); }
/* Preenchimento automatico do Chrome pintava o campo de azul-acinzentado. */
[data-tema="escuro"] input:-webkit-autofill,
[data-tema="escuro"] input:-webkit-autofill:hover,
[data-tema="escuro"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cor-cartao) inset;
  -webkit-text-fill-color: var(--cor-texto);
  caret-color: var(--cor-texto);
  transition: background-color 9999s ease-out 0s;
}

/* FILA.md item 282 -- menu do usuario (clique no avatar/nome no alto) e
   tela /configuracoes.html. Aditivo; cores so por variavel, vale nos 3 temas. */
.usuario-menu-embrulho { position: relative; min-width: 0; }
button.usuario-chip {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  max-width: 100%;
  transition: border-color .12s ease, background-color .12s ease;
}
button.usuario-chip:hover,
button.usuario-chip[aria-expanded="true"] {
  border-color: var(--cor-borda);
  background: var(--cor-hover-linha);
}
button.usuario-chip:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.usuario-chip-seta {
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
  transition: transform .15s ease;
}
button.usuario-chip[aria-expanded="true"] .usuario-chip-seta { transform: rotate(-135deg) translateY(-2px); }
.menu-usuario {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-elevada);
}
.menu-usuario-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-usuario-item:hover,
.menu-usuario-item:focus-visible { background: var(--cor-hover-linha); outline: none; }
.menu-usuario-rotulo { font-size: 14px; font-weight: 600; }
.menu-usuario-dica { font-size: 12px; color: var(--cor-texto-suave); }
.menu-usuario-item[data-chave="sair"] .menu-usuario-rotulo { font-weight: 500; color: var(--cor-texto-suave2); }
.menu-usuario-separador { height: 1px; margin: 6px 4px; background: var(--cor-borda); }

.sidebar nav a[data-chave="configuracoes"] { --icone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/></svg>"); }

.grade-config {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cartao-config {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-cartao);
  color: var(--cor-texto);
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.cartao-config:hover,
.cartao-config:focus-visible { border-color: var(--cor-primaria); transform: translateY(-1px); outline: none; }
.cartao-config h2 { margin: 0; font-size: 16px; }
.cartao-config p { margin: 0; font-size: 13px; color: var(--cor-texto-suave); }
.cartao-config .cartao-config-acao { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--cor-primaria); }
.cartao-config--destaque { border-color: var(--cor-primaria); }
@media (max-width: 720px) {
  .usuario-chip-seta { display: none; }
  button.usuario-chip { padding: 3px; }
}

/* ---------- Conectar meu Claude (FILA.md item 285) ---------- */
.claude-pagina { max-width: 980px; }
.claude-bloco {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  padding: 20px 22px;
  margin: 18px 0;
}
.claude-bloco h2 { margin: 0 0 10px; font-size: 17px; }
.claude-endereco-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.claude-endereco {
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--cor-borda-suave);
  background: var(--cor-cartao-2);
  font-size: 14px;
}
.claude-endereco-linha .botao-primario,
.claude-endereco-linha .botao-secundario { width: auto; margin-top: 0; }
.claude-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.claude-passos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--cor-borda-suave);
}
.claude-passos li:first-child { border-top: none; }
.claude-passos h3 { margin: 0 0 6px; font-size: 15px; }
.claude-passos p { margin: 0; }
.claude-mock {
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-lg);
  background: var(--cor-cartao-2);
  padding: 12px;
  font-size: 12.5px;
  display: grid;
  gap: 8px;
}
.claude-mock-topo { font-weight: 600; }
.claude-mock-menu { display: flex; gap: 10px; color: var(--cor-texto-suave); flex-wrap: wrap; }
.claude-mock-menu .ativo { color: var(--cor-texto); font-weight: 600; text-decoration: underline; }
.claude-mock-campo { border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-sm); padding: 6px 8px; overflow-wrap: anywhere; }
.claude-mock-campo small { display: block; color: var(--cor-texto-suave); font-size: 11px; }
.claude-mock-botao {
  justify-self: start;
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  border-radius: var(--raio-sm);
  padding: 6px 10px;
  font-weight: 600;
}
.claude-mock-pergunta { margin: 0; }
.claude-conexoes { list-style: none; padding: 0; margin: 0; }
.claude-conexoes li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--cor-borda-suave);
}
.claude-conexoes li:first-child { border-top: none; }
.claude-conexoes .botao-secundario { width: auto; margin-top: 0; }
.claude-avancado summary { cursor: pointer; font-weight: 600; }
.claude-opcao-local { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.claude-opcao-local input { margin-top: 3px; }
.claude-passos-curtos { padding-left: 20px; line-height: 1.6; margin: 10px 0; }
@media (max-width: 720px) {
  .claude-passos li { grid-template-columns: 1fr; }
}

/* Tela Tarefas -- respiro interno nos paineis de faixa (sincronizacao,
   eventos da Google Agenda, avisos). O .painel padrao nao tem padding
   proprio (conta com .painel-cabecalho/.painel-corpo dentro); estes
   paineis tem conteudo solto e ficavam colados na borda (Sergio, 08/10/2026). */
.painel-tarefas-faixa {
  padding: 16px 20px;
  margin-bottom: 16px;
}
.painel-tarefas-faixa > :first-child { margin-top: 0; }
.painel-tarefas-faixa > :last-child { margin-bottom: 0; }
#google-sync-painel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
#google-sync-painel .subtitulo { margin: 0; }
#painel-google-eventos h2 { margin: 0 0 4px; font-size: 16px; }
#painel-google-eventos .subtitulo { margin: 0 0 12px; max-width: none; }
.lista-eventos-google { list-style: none; padding: 0; margin: 0; }
.lista-eventos-google li {
  display: flex;
  gap: 16px;
  padding: 10px 4px;
  border-top: 1px solid var(--cor-borda-suave);
  align-items: baseline;
}
.lista-eventos-google li:first-child { border-top: 0; }
.lista-eventos-google .evento-quando {
  flex: 0 0 auto;
  min-width: 110px;
  padding-left: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-suave);
  font-weight: 600;
}
.lista-eventos-google .evento-corpo { flex: 1; min-width: 0; }
.lista-eventos-google li { align-items: center; }
.lista-eventos-google li.evento-concluido .evento-corpo a,
.lista-eventos-google li.evento-concluido .evento-corpo > span { opacity: .6; }
.celula-concluir { text-align: center; }
.check-concluir { width: 20px; height: 20px; cursor: pointer; accent-color: var(--cor-primaria, #2bb3c0); flex: 0 0 auto; margin: 0; }
.check-concluir:disabled { cursor: not-allowed; opacity: .4; }
#modal-nova-tarefa input,
#modal-nova-tarefa select,
#modal-nova-tarefa textarea { width: 100%; box-sizing: border-box; }
#modal-nova-tarefa input[type="time"] { padding: 9px 12px; border: 1px solid var(--cor-borda-suave); border-radius: 8px; background: transparent; color: inherit; font: inherit; }
#modal-nova-tarefa textarea { resize: vertical; }
@media (max-width: 640px) {
  .painel-tarefas-faixa { padding: 14px; }
  .lista-eventos-google li { flex-direction: column; gap: 2px; }
  .lista-eventos-google .evento-quando { padding-left: 0; }
}

/* FILA.md item 320 -- campo Cliente com busca/cadastro + atalhos da lista de Processos */
.campo-cliente { position: relative; }
.campo-cliente-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 30, 45, .14); max-height: 260px; overflow-y: auto; padding: 4px;
}
.campo-cliente-titulo { font-size: 11px; color: var(--cor-texto-fraco); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .04em; }
.campo-cliente-opcao {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--cor-texto); font: inherit; font-size: 13px; cursor: pointer;
}
.campo-cliente-opcao:hover, .campo-cliente-opcao.ativa { background: var(--cor-primaria-tinta); }
.campo-cliente-novo { color: var(--cor-primaria); font-weight: 600; }
.campo-cliente-aviso { display: block; color: var(--cor-primaria); min-height: 0; }
.campo-cliente-aviso:empty { display: none; }
.botao-atalho-vazio {
  background: none; border: 1px dashed var(--cor-borda); border-radius: 999px; padding: 3px 10px;
  color: var(--cor-primaria); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.botao-atalho-vazio:hover { background: var(--cor-primaria-tinta); border-color: var(--cor-primaria); }
.link-tribunal-linha {
  display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 600;
  color: var(--cor-primaria); text-decoration: none;
}
.link-tribunal-linha:hover { text-decoration: underline; }

/* ---------- Quadro "Casos" (FILA.md item 326) ---------- */

.casos-board { align-items: stretch; }
.casos-coluna { max-height: calc(100vh - 220px); }
.casos-coluna .kanban-lista-cartoes { overflow-y: auto; flex: 1; }
.casos-coluna--alvo { outline: 2px dashed var(--cor-primaria); outline-offset: -4px; }
.casos-cartao { position: relative; }
.casos-cartao-marca { float: right; margin: 0 0 4px 8px; }
.casos-cartao-pendencia {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--cor-texto-suave);
  border-left: 3px solid var(--cor-borda);
  padding-left: 6px;
}
.casos-vazio { margin: 4px 0; font-size: 12.5px; color: var(--cor-texto-fraco); }
.casos-form { display: flex; flex-direction: column; gap: 6px; }
.casos-form textarea { resize: vertical; }
.casos-barra-lote {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-elevada);
  padding: 10px 14px;
  z-index: 40;
}
.casos-barra-lote select { margin: 0; }

@media (max-width: 760px) {
  .casos-board { flex-direction: column; overflow-x: visible; }
  .casos-coluna { width: 100%; max-height: none; }
  .casos-barra-lote { left: 12px; right: 12px; transform: none; flex-wrap: wrap; }
}