/* PM Business — folha única: tokens do Design System Pacto, tema claro.
   Repaginada de 25/09/2026, na linguagem da apresentação (apresentacao/): moldura na
   cor noite da marca (menu + faixa de conferência), conteúdo claro para a leitura do
   dia a dia, números na cor da tinta — o azul fica para ação e destaque.

   PADRÃO VISUAL (vale para toda tela nova — ver README, "Padrão visual"):
   · Fontes — Unbounded: títulos (h1/h2/h3, título do modal) e o número de destaque
     de um cartão. Mona Sans: todo texto e todo número de linha, tabela ou frase — SEM
     tabular-nums: na Mona Sans ele troca os algarismos por outro desenho (zero cortado,
     cara de fonte mono). Largura fixa só em Unbounded e Geist Mono. Geist Mono: só rótulo pequeno em caixa alta (cabeçalho de tabela,
     rótulo embaixo de número, seção do menu), chave de ticket/projeto (PAY-123, M1)
     e a faixa de conferência.
   · Cores — --tinta: títulos e números. --foreground: texto e rótulo de linha.
     --muted-foreground: descrição, porcentagem, rótulo. --primary: ação, link para o
     Jira, barra de dado e o hover de número. Vermelho (#A11E1E): só alerta.
   · Número clicável — linha inteira que abre a lista: número em negrito, sem
     sublinhado, a linha acende no hover. Número solto em frase ou célula: sublinhado
     discreto (.link[data-abre]). Número de destaque: sem sublinhado, sublinha no hover.
   · Porcentagem: Mona Sans 12px, cinza, alinhada à direita. */

/* ===== Tokens ===== */
:root {
  --primary: #026DFC;
  --foreground: #333232;
  --muted: #EEF1F8;             /* neutros com um leve puxão do azul da marca */
  --muted-foreground: #626B8A;
  --border: #E3E7F1;
  --success: #22C55E;
  --warning: #F59E0B;
  --destructive: #EF4444;
  --radius: 12px;

  --fundo: #FFFFFF;
  --pagina: #F4F6FB;
  --noite: #000B38;             /* fim do degradê oficial da marca */
  --noite-linha: rgba(152, 163, 199, 0.18);
  --noite-suave: #98A3C7;
  --noite-acento: #3A86FF;      /* azul Pacto clareado para contraste no escuro */
  --tinta: #0A1650;             /* títulos e números */
  /* sombra em duas camadas, puxada para o azul da marca: uma rente (contorno), uma
     difusa (o cartão sai do fundo). Nada de brilho colorido. */
  --sombra: 0 1px 2px rgba(10, 22, 80, 0.06), 0 12px 32px -16px rgba(10, 22, 80, 0.22);
  --sombra-alta: 0 2px 4px rgba(10, 22, 80, 0.08), 0 20px 40px -18px rgba(10, 22, 80, 0.30);
  --borda-cartao: rgba(10, 22, 80, 0.07);
  --fonte-texto: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-titulo: "Unbounded", "Mona Sans", -apple-system, sans-serif;
  --fonte-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --menu-largura: 240px;
}

/* ===== Fontes (arquivos locais — nenhuma requisicao sai deste dominio) ===== */
@font-face {
  font-family: "Mona Sans";
  src: url("/static/fonts/MonaSans[wght].woff2") format("woff2-variations"),
       url("/static/fonts/MonaSans[wght].woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono[wght].woff2") format("woff2-variations"),
       url("/static/fonts/GeistMono[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/static/fonts/Unbounded[wght].woff2") format("woff2-variations"),
       url("/static/fonts/Unbounded[wght].woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ===== Reset minimo ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-texto);
  color: var(--foreground);
  background: var(--pagina);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; font-weight: 600; color: var(--tinta); letter-spacing: -0.01em; }

[hidden] { display: none !important; }

/* ===== Layout: menu fixo | pagina ===== */
body {
  display: grid;
  grid-template-columns: var(--menu-largura) 1fr;
  min-height: 100vh;
}

/* ===== Menu lateral: o painel da marca =====
   A mesma noite da apresentação e da faixa de conferência. Ícone de traço em cada
   item, o ativo numa pílula azul, "em breve" como etiqueta, a pessoa num cartão no
   pé. A assinatura é o símbolo da Pacto grande, quase transparente, cortado no pé do
   menu — os seis módulos da apresentação. */
.menu {
  grid-column: 1;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--menu-largura);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #030F42 0%, var(--noite) 38%);
  color: #F2F5FF;
  border-right: 1px solid rgba(152, 163, 199, 0.12);
  overflow: hidden;
  z-index: 20;
}
.menu-topo { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 18px; }
.marca { display: flex; align-items: center; gap: 12px; color: #F2F5FF; }
.marca .simbolo { width: 30px; height: 30px; flex: none; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.marca:hover .simbolo { transform: rotate(-12deg); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto > span { font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.marca-texto b { color: var(--noite-acento); }
.marca-texto small { margin-top: 3px; font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--noite-suave); }
.menu-abrir { display: none; }

.menu-itens { flex: 1; display: flex; flex-direction: column; padding: 4px 12px 16px; overflow-y: auto; position: relative; z-index: 1; }
.menu .secao {
  padding: 18px 10px 8px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(152, 163, 199, 0.7);
}
.menu .item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1px 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(242, 245, 255, 0.74);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu .item .icone { flex: none; color: rgba(152, 163, 199, 0.85); transition: color 0.15s ease; }
.menu .item:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.menu .item:hover .icone { color: #FFFFFF; }
.menu .item.ativo {
  background: rgba(58, 134, 255, 0.16);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(58, 134, 255, 0.28);
}
.menu .item.ativo .icone { color: var(--noite-acento); }
.menu .item.breve { color: rgba(152, 163, 199, 0.55); cursor: default; }
.menu .item.breve:hover { background: none; color: rgba(152, 163, 199, 0.55); }
.menu .item.breve .icone { color: rgba(152, 163, 199, 0.4); }
.menu .item.breve em {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid rgba(152, 163, 199, 0.25);
  border-radius: 999px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu .item:focus-visible { outline: 2px solid var(--noite-acento); outline-offset: 1px; }

.rodape-menu {
  margin: auto 0 0;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(152, 163, 199, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.rodape-quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rodape-quem strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rodape-quem > span { font-size: 11px; color: var(--noite-suave); }
.rodape-menu form { display: flex; }
.menu .sair {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 9px;
  background: transparent; color: var(--noite-suave);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.15s ease, color 0.15s ease;
}
.menu .sair:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.menu .avatar.iniciais { background: rgba(58, 134, 255, 0.22); color: #F2F5FF; }
.rodape-menu .avatar {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

@media (hover: hover) {
  .rodape-menu:hover,
  .rodape-menu:focus-within {
    transform: translateY(-3px);
    border-color: rgba(58, 134, 255, 0.5);
    background: rgba(58, 134, 255, 0.11);
    box-shadow: 0 12px 28px rgba(0, 5, 35, 0.3), inset 0 0 0 1px rgba(58, 134, 255, 0.08);
  }
  .rodape-menu:hover .avatar,
  .rodape-menu:focus-within .avatar {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(58, 134, 255, 0.14);
  }
  .rodape-menu:hover .sair,
  .rodape-menu:focus-within .sair { transform: translateX(2px); }
}

.menu-marca-dagua {
  position: absolute;
  left: -70px;
  bottom: -60px;
  width: 300px;
  color: #FFFFFF;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
  transform-origin: 45% 60%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.4s ease;
}
.menu-marca-dagua .simbolo { width: 100%; height: auto; }
@media (hover: hover) {
  .menu:hover .menu-marca-dagua {
    opacity: 0.095;
    transform: scale(1.045) rotate(-3deg);
    filter: drop-shadow(0 0 18px rgba(58, 134, 255, 0.22));
  }
}

/* foto do usuário (servida por /eu/foto) ou, sem ela, as iniciais no mesmo círculo */
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--muted);
}
.avatar.iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E6F0FF;
  color: #024FBB;
  font-size: 13px;
  font-weight: 600;
}

/* A coluna 1 do grid já reserva a largura do menu fixo — margem aqui empurrava
   o conteúdo duas vezes e deixava uma faixa vazia de 240 px ao lado do menu. */
.pagina {
  grid-column: 2;
  padding: 24px 32px 48px;
  min-height: 100vh;
}

/* Blocos da página empilhados com respiro entre si (os cartões ficavam colados). */
.pagina > .cartao,
.pagina > .grade,
.pagina > .aviso { margin-bottom: 16px; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.topo h1 { font-size: 26px; letter-spacing: -0.02em; }
/* a frase logo abaixo do título diz o recorte da tela */
.pagina > .rotulo { margin: -12px 0 20px; max-width: 80ch; color: var(--muted-foreground); }

.filtros {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filtros select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--fundo);
  color: var(--foreground);
}

.filtros button {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--fundo);
  color: var(--foreground);
}

.filtros button.ativo {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ===== Componentes ===== */

.cartao {
  background: var(--fundo);
  border: 1px solid var(--borda-cartao);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 20px 24px;
}
.cartao h2 { font-size: 17px; }
.cartao > .rotulo { margin: 4px 0 12px; color: var(--muted-foreground); font-size: 13px; }

a.cartao {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.cartao:hover {
  border-color: var(--primary);
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.kpi .n {
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tinta);
}
.kpi .n.link[data-abre] { text-decoration: none; }
.kpi .n.link[data-abre]:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.kpi .rotulo {
  font-size: 12px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--fonte-mono);
}

.aviso {
  background: #FFF7E8;
  border: 1px solid #F5DFA6;
  color: #92660A;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pill.queue { background: var(--muted); color: var(--muted-foreground); }
.pill.waiting { background: #FFF7E8; color: #92660A; }
.pill.progress { background: #E6F0FF; color: #024FBB; }
.pill.analysis { background: #EFE6FF; color: #5B21B6; }
.pill.done { background: #E7F9EE; color: #146C33; }
.pill.cancelled { background: #FBE9E9; color: #A11E1E; }
/* status na lista, no formato do Jira: etiqueta de canto pouco arredondado, em maiúsculas, na
   cor da categoria — cinza a fazer, azul em andamento, verde concluído (as cores dos .pill) */
.status-jira { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.status-jira.queue { background: var(--muted); color: var(--muted-foreground); }
.status-jira.progress { background: #E6F0FF; color: #024FBB; }
.status-jira.done { background: #E7F9EE; color: #146C33; }

table.zebra {
  font-size: 13px;
}

table.zebra th {
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

table.zebra td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

table.zebra tbody tr:hover { background: #F7F9FD; }
.kpi .n + .rotulo { margin-left: 8px; }

.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  text-decoration: underline;
}

.link:hover { opacity: 0.8; }

/* Número que abre a lista: na cor da tinta, com o sublinhado discreto que diz "clique".
   O azul pleno só aparece ao passar o mouse — antes, tudo era link azul e nada se destacava. */
.link[data-abre],
a.link-numero {                /* o mesmo jeito para número que é link comum (ex.: aba Agentes) */
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(2, 109, 252, 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.link[data-abre]:hover, a.link-numero:hover { color: var(--primary); text-decoration-color: var(--primary); opacity: 1; }

.inline { display: inline; }


/* Selo de iniciais no lugar da foto do Google (Ruling R47): nenhuma tela do PM
   Business pede arquivo a outro domínio. */
.iniciais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--muted); color: var(--muted-foreground);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}

/* ===== Manutenções ===== */

.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.barra {
  display: inline-block;
  height: 10px;
  border-radius: 3px;
  vertical-align: middle;
  min-width: 1px;
}
.barra.criados { background: var(--primary); }
.barra.fechados { background: var(--success); }

/* ===== Visão Geral: Pendências de Clientes =====
   A tese no topo é uma frase, não um KPI solto; cada squad é uma linha inteira
   clicável, na escala da maior, com o vencido hachurado no fim da barra. */
.pendencias { padding: 24px 28px 28px; }

.pendencias-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.sobrancelha {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.tese {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 16px;
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
}

.tese-n {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tese-n:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.tese-texto { max-width: 34ch; }

.selos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.selo {
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}
.selo strong { font-weight: 700; }
.selo:hover { border-color: var(--muted-foreground); }
.selo.alerta { background: #FBE9E9; border-color: #F5C2C2; color: #A11E1E; }

.fila { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }

.fila-linha {
  display: grid;
  grid-template-columns: 1fr 104px 108px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.fila-squad {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr 40px 44px;     /* nome · barra · número · % do total */
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 8px;
  background: none;
  border: none;
  text-align: left;
  color: var(--foreground);
  border-radius: 8px;
}
.fila-squad:hover { background: var(--muted); }
.fila-squad:hover .fila-nome { color: var(--primary); }

.fila-nome { font-weight: 500; }

.fila-trilho {
  display: block;
  height: 12px;
  background: var(--muted);
  border-radius: 6px;
  overflow: hidden;
}

.fila-barra {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  min-width: 4px;
  background: var(--primary);
  border-radius: 6px;
}

.fila-vencido {
  height: 100%;
  min-width: 4px;
  background: repeating-linear-gradient(135deg, var(--destructive) 0 3px, #F58A8A 3px 6px);
}

.fila-n {
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta);
  text-align: right;
}
.fila-pct { font-size: 12px; color: var(--muted-foreground); text-align: right; }

.fila-venc {
  justify-self: end;
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #A11E1E;
  text-decoration: underline;
}

.legenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted-foreground);
}
.amostra { display: inline-block; width: 14px; height: 8px; border-radius: 3px; }
.amostra.barra { background: var(--primary); }
.amostra.vencido { background: repeating-linear-gradient(135deg, var(--destructive) 0 3px, #F58A8A 3px 6px); margin-left: 8px; }

.vazio { color: var(--muted-foreground); margin: 8px 0 0; }

#lista-pendencias { margin-top: 20px; }

/* foco visível para quem navega pelo teclado, em todos os botões-link */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .tese-n { font-size: 48px; }
  .fila-linha { grid-template-columns: 1fr; }
  .fila-squad { grid-template-columns: 1fr 40px 44px; row-gap: 6px; }
  .fila-nome { grid-column: 1 / -1; }
  .fila-venc { justify-self: start; padding: 0 8px 8px; }
}

/* ===== Tela estreita (celular): menu em cima, conteúdo embaixo =====
   O menu fixo de 240 px ocupava a tela inteira abaixo de ~700 px. */
@media (max-width: 720px) {
  body { display: block; }
  /* celular: uma barra fina no topo; o botão abre os itens (static/js/pm.js) */
  .menu { position: sticky; top: 0; bottom: auto; width: auto; height: auto; max-height: 100vh; }
  .menu-topo { padding: 12px 16px; }
  .menu-abrir {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(152, 163, 199, 0.25); border-radius: 10px;
    background: transparent; color: #F2F5FF;
  }
  .menu-itens { display: none; padding-bottom: 16px; }
  .menu.aberto .menu-itens { display: flex; }
  .menu-marca-dagua { display: none; }
  .pagina { padding: 16px; min-height: 0; }
  .pendencias { padding: 20px 16px; }
  .filtros { flex-wrap: wrap; width: 100%; }
  .filtros select { flex: 1 1 100%; }
  .periodo, .periodo .periodo-campo { width: 100%; }
  .periodo .periodo-campo { justify-content: space-between; }
}

/* ===== Agents: um cartão por agente, resultado em palavras =====
   Cada linha é um botão: rótulo à esquerda, número à direita, % em cinza. */
.por-agente { margin-bottom: 16px; }
.por-agente-topo { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.agentes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.agente h3 { font-size: 18px; }
/* Trabalhando agora na tela Agents: uma raia por agente, rolagem dentro da raia */
.raia { display: flex; flex-direction: column; min-width: 0; }
.raia-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.raia-topo h3 { font-size: 18px; }
.raia-n { padding: 0; background: none; border: none; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 700; color: var(--tinta); }
.raia-n:hover { color: var(--primary); }
.raia-lista { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.raia-lista .agora-ticket { grid-template-columns: 1fr; }
.raia .vazio { margin: 0; }
/* Pendências no campo dos agentes: "fora dos agentes" em alerta (o que ninguém pegou) */
.agentes-campo { margin-bottom: 16px; }
.agentes-campo .linha-n.alerta { color: #a96100; }
.agentes-campo .status-barra.alerta { background: var(--warning); }
/* Tempo por etapa: um cartão por agente — a espera grande, o "90% em até", a barra com as
   faixas (do verde, rápido, ao vermelho, mais de 1 dia) e a legenda que abre os tickets */
.espera { display: flex; flex-direction: column; }
.espera h3 { font-size: 18px; }
.espera .papel { min-height: 2.8em; }
.espera-rotulo { margin: 14px 0 0; font-size: 13px; color: var(--muted-foreground); }
.espera-n { align-self: flex-start; padding: 0; border: none; background: none; font-family: var(--fonte-titulo); font-size: 40px;
  font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); cursor: pointer; line-height: 1.15; }
.espera-n:hover { color: var(--primary); }
.espera-p90 { margin: 2px 0 14px; font-size: 13px; color: var(--muted-foreground); }
.espera-p90 strong { color: var(--foreground); }
.espera-barra { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--muted); }
.espera-barra span { display: block; height: 100%; }
.faixa-0 { background: var(--success); }
.faixa-1 { background: var(--primary); }
.faixa-2 { background: var(--noite-suave); }
.faixa-3 { background: var(--warning); }
.faixa-4 { background: var(--destructive); }
.espera-faixas { list-style: none; margin: 10px 0 0; padding: 0; }
.espera-faixas button { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 4px 6px;
  border: none; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: var(--foreground); text-align: left; cursor: pointer; }
.espera-faixas button:hover:not(:disabled) { background: var(--muted); }
.espera-faixas button:disabled { color: var(--muted-foreground); cursor: default; }
.espera-faixas i { width: 10px; height: 10px; border-radius: 3px; }
.espera-faixas b { font-weight: 600; color: var(--tinta); }
.espera-faixas button:disabled b { color: var(--muted-foreground); font-weight: 400; }
.espera-trabalho { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
.espera-faixas + .espera-trabalho, .vazio + .espera-trabalho { margin-top: 12px; }
.espera-trabalho .link { padding: 0; border: none; background: none; font: inherit; font-weight: 600; color: var(--tinta); cursor: pointer; }
/* Ação humana na tabela do campo: uma linha à parte, depois do total */
.status-fila tfoot tr.campo-acao td { padding-top: 14px; border-top: 1px dashed var(--border); font-weight: 400; }
.status-fila tfoot tr.campo-acao td.status-nome { font-weight: 600; }
.campo-acao-quem { font-size: 13px; color: var(--muted-foreground); }
.campo-acao-quem strong { color: var(--foreground); }
.campo-acao-quem .link { padding: 0; border: none; background: none; font: inherit; font-weight: 600; color: var(--foreground); cursor: pointer; }
/* De onde veio: quem mais abriu entre os outros usuários, cada nome abre a lista */
.origem-quem { margin: 12px 0 0; font-size: 14px; color: var(--muted-foreground); }
.origem-quem .link { padding: 0; border: none; background: none; font: inherit; color: var(--foreground); cursor: pointer; }
/* Para analisar: um alerta por linha, o número abre a lista; em laranja quando há casos */
.alertas { list-style: none; margin: 8px 0 0; padding: 0; }
.alertas li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted-foreground); }
.alertas li .linha-n { flex: none; min-width: 2ch; text-align: right; }
.alertas li.alerta { color: var(--foreground); }
.alertas li.alerta .linha-n { color: #a96100; }
/* Pendências no campo dos agentes: "com os agentes" se abre em atuando · parados */
.campo-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.campo-sub button { padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.campo-sub button.alerta { color: #a96100; font-weight: 600; }
/* raia do Trabalhando agora: ticket fora da régua das pendências (não entra na tabela do campo) */
.selo-fora-campo { padding: 0 6px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; }
/* Abertos na squad errada (Manutenções) */
.migradas-rotas { margin: 16px 0 4px; font-size: 14px; }
/* Caixa de opções de uma ficha da barra de filtros */
.filtro-caixa { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 8px; min-width: 200px;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--fundo); box-shadow: var(--sombra-alta); }
.filtro-caixa label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--foreground); }
/* busca, grupos e pessoas com as iniciais, rolagem na lista */
.filtro-busca { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.filtro-opcoes { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.filtro-opcoes label { padding: 5px 4px; border-radius: 6px; }
.filtro-opcoes label:hover { background: var(--muted); }
.filtro-opcoes label[hidden] { display: none; }
.filtro-opcoes .avatar.iniciais { width: 22px; height: 22px; font-size: 10px; }
.filtro-grupo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--muted-foreground); }
.filtro-secao { margin: 8px 0 2px; font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.filtro-rodape { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.filtro-rodape .filtro-conta { margin-left: auto; font-size: 12px; color: var(--muted-foreground); }
.filtro-rodape .botao-primario { margin-top: 0; }
/* Barra de filtros, como a do Jira, numa linha só: o botão Filtros abre o painel flutuante
   (por cima da página, sem empurrar os cartões); na linha, só as fichas que estão valendo, em
   azul claro; o período continua à direita */
.filtros.com-barra { width: 100%; flex-wrap: wrap; align-items: flex-start; }
.com-barra .periodo { margin-left: auto; }
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 600px; }
.filtros-painel { position: relative; }
.filtros-botao { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); font-size: 14px; font-weight: 600; color: var(--foreground); }
.filtros-botao::-webkit-details-marker { display: none; }
.filtros-botao:hover, .filtros-painel[open] > .filtros-botao { border-color: var(--primary); color: var(--primary); }
.filtros-n { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--primary); color: #FFFFFF; font-size: 12px; text-align: center; }
.painel-filtros { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 32px)); max-height: min(640px, 75vh); overflow-y: auto;
  padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--fundo); box-shadow: var(--sombra-alta); }
/* no painel, cada campo é uma linha: nome à esquerda, o valor à direita; abre a lista embaixo */
.painel-filtros .ficha-filtro > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer;
  border-radius: 8px; font-size: 14px; color: var(--foreground); }
.painel-filtros .ficha-filtro > summary::-webkit-details-marker { display: none; }
.painel-filtros .ficha-filtro > summary:hover, .painel-filtros .ficha-filtro[open] > summary { background: var(--muted); }
.ficha-campo { font-weight: 600; }
.ficha-valor { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; color: var(--muted-foreground); }
.ficha-filtro.ativa .ficha-valor { color: #024FBB; font-weight: 600; }
.ficha-seta { font-size: 11px; opacity: .7; }
.painel-filtros .filtro-caixa { position: static; min-width: 0; margin: 4px 4px 8px; box-shadow: none; }
.painel-filtros .filtro-opcoes { max-height: 240px; }
/* o `.filtros button` genérico não vale no painel: Limpar seleção é link, Aplicar é o primário */
.painel-filtros .filtro-rodape .link { padding: 0; border: none; background: none; color: var(--primary); font-size: 13px; }
.painel-filtros .filtro-rodape .botao-primario { padding: 7px 14px; border: none; background: var(--primary); color: #FFFFFF; font-weight: 600; }
.ficha-op { padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); font: inherit; font-size: 13px; }
.painel-acoes { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 10px 10px 6px; border-top: 1px solid var(--border); }
.barra-filtros .barra-acao { padding: 0; border: none; background: none; box-shadow: none; font: inherit; font-size: 14px; color: var(--primary); cursor: pointer; text-decoration: none; }
.barra-filtros .barra-acao:hover { text-decoration: underline; background: none; }
/* a busca da barra (como o "Pesquisar" do Jira) e a ficha que a tela não filtra (escurecida) */
.barra-busca { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--fundo); color: var(--muted-foreground); }
.barra-busca:focus-within { border-color: var(--primary); }
.barra-busca input { width: 220px; padding: 7px 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--foreground); outline: none; }
.ficha-filtro.desligada { opacity: .45; cursor: not-allowed; }
.ficha-desligada { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 14px; }
.ficha-rapida.desligada { opacity: .6; background: var(--muted); border-color: var(--border); color: var(--muted-foreground); }
.ficha-rapida-fixa { padding: 6px 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
/* a ficha que está valendo, na linha: clicar abre a lista dela no painel; × tira */
.ficha-rapida { display: inline-flex; align-items: center; border: 1px solid rgba(2, 109, 252, .35); border-radius: 8px; background: #E6F0FF; color: #024FBB; }
.barra-filtros .ficha-rapida button { padding: 6px 4px 6px 10px; border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap; }
.barra-filtros .ficha-rapida .ficha-tirar { padding: 6px 10px 6px 4px; font-size: 16px; line-height: 1; }
.barra-filtros .ficha-rapida button:only-child { padding-right: 10px; }        /* a Visão, que não sai */
.ficha-rapida:hover { border-color: var(--primary); }
/* fora do padrão: uma marca pequena, na cor de aviso, no lugar da faixa amarela */
.filtro-fora { flex-basis: 100%; font-size: 13px; color: #a96100; }
.filtro-fora::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--warning); vertical-align: 1px; }
.filtro-fora a { color: var(--primary); }
/* Abrir no Jira / Copiar JQL no rodapé do modal */
.modal-jira, .modal-copiar { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--fundo);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; cursor: pointer; }
.modal-jira:hover, .modal-copiar:hover { border-color: var(--primary); }
.modal-jira[hidden], .modal-copiar[hidden] { display: none; }
.modal-jira-nota { font-size: 12px; color: var(--muted-foreground); }
.modal-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.modal-rodape .modal-mais { margin-right: auto; }
.papel { margin: 2px 0 12px; font-size: 13px; line-height: 1.4; color: var(--muted-foreground); }
/* a descrição do agente ocupa sempre duas linhas: o número grande fica na mesma altura em
   todos os cartões, mesmo quando uma descrição quebra (a do Des) */
.agente .papel { min-height: 2.8em; }
.resultados { list-style: none; margin: 0; padding: 0; }
.resultados li + li { border-top: 1px solid var(--border); }
.resultado {
  display: grid;
  grid-template-columns: 1fr auto 44px;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 6px;
  background: none;
  border: none;
  border-radius: 6px;
  text-align: left;
  color: var(--foreground);
}
.resultado:hover { background: var(--muted); }
.resultado:hover .resultado-rotulo { color: var(--primary); }
.resultado-n { font-weight: 600; font-size: 16px; color: var(--tinta); text-align: right; }
.resultado-pct { font-size: 12px; color: var(--muted-foreground); text-align: right; }
.resultado.principal { padding: 4px 6px 12px; }
.resultado.principal .resultado-n { font-family: var(--fonte-titulo); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.resultado.principal:hover .resultado-n { color: var(--primary); }
.resultado.alerta .resultado-n { color: #A11E1E; }
/* Fixer: onde está hoje o que ele entregou — um nível abaixo de "Entregou para teste" */
.resultados li.resultado-sub { border-top: none; }
.resultados li.resultado-sub.primeiro { margin-top: 2px; padding-top: 4px; border-top: 1px dashed var(--border); }
.resultado-sub .resultado { padding: 5px 6px 5px 18px; }
.resultado-sub .resultado-rotulo { font-size: 14px; color: var(--muted-foreground); }
.resultado-sub .resultado-n { font-size: 15px; }
.resultado-sub .resultado.destaque .resultado-rotulo { color: var(--foreground); font-weight: 600; }
/* linha à parte (fora da soma de cima): a Ana criou base de conhecimento */
.resultados li.resultado-aparte { margin-top: 8px; border-top: 1px dashed var(--border); }
.agente-tempo { margin: 12px 0 0; font-size: 13px; }

/* ===== Login e espera — a abertura da apresentação =====
   Fundo na noite da marca, o símbolo da Pacto grande à esquerda, centrado sobre o
   nome (as seis peças se encaixam na chegada, uma vez) e o cartão de entrada à
   direita. No celular, empilha. A casca (menu | página) não vale aqui. */
body.login {
  display: block;
  min-height: 100vh;
  background: var(--noite);
  color: #F2F5FF;
}
.login-palco {
  min-height: 100vh;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr minmax(320px, 400px);
  align-items: center;
  gap: 64px;
  padding: 48px 0;
}
.login-lado { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-simbolo { width: min(360px, 40vh); color: #F2F5FF; margin-bottom: 40px; }
.login-simbolo .simbolo { display: block; width: 100%; height: auto; overflow: visible; }
.login-marca {
  font-family: var(--fonte-titulo);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #F2F5FF;
  margin: 0;
}
.login-ponto { color: var(--noite-acento); }
.login-coluna { display: flex; flex-direction: column; gap: 20px; }
.login-cartao {
  width: 100%;
  background: var(--fundo);
  color: var(--foreground);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 6, 31, 0.45);
  padding: 32px 28px;
  text-align: left;
}
.login-cartao h2 { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; margin: 0; color: #0A1650; }
.login-cartao > p { margin: 6px 0 20px; font-size: 13px; color: var(--foreground); }
.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #EDF0F4;
  border: 1px solid #D8DDE5;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--foreground);
}
.login-google:hover { background: #E3E7ED; }
.login-erro {
  margin: -8px 0 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #FBE9E9;
  color: #A11E1E;
  font-size: 13px;
}
.login-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--noite-suave); }

/* as seis peças chegam de pontas diferentes e se encaixam — o mesmo gesto da cena
   "Uma régua só" da apresentação, em 1,2 s, só na chegada */
@keyframes encaixar {
  from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--g)); }
  to   { opacity: 1; transform: none; }
}
.login-simbolo path {
  transform-box: fill-box;
  transform-origin: center;
  animation: encaixar 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.login-simbolo path:nth-child(1) { --x: -170px; --y: -130px; --g: -25deg; animation-delay: 0.05s; }
.login-simbolo path:nth-child(2) { --x: -60px;  --y: -240px; --g: 20deg;  animation-delay: 0.13s; }
.login-simbolo path:nth-child(3) { --x: 60px;   --y: -220px; --g: 30deg;  animation-delay: 0.21s; }
.login-simbolo path:nth-child(4) { --x: -30px;  --y: -280px; --g: -30deg; animation-delay: 0.29s; }
.login-simbolo path:nth-child(5) { --x: -240px; --y: 40px;   --g: 25deg;  animation-delay: 0.37s; }
.login-simbolo path:nth-child(6) { --x: -260px; --y: -40px;  --g: -20deg; animation-delay: 0.45s; }
.login-marca, .login-coluna { animation: surgir 0.8s ease-out 0.7s both; }
.login-coluna { animation-delay: 0.9s; }
@keyframes surgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .login-simbolo path, .login-marca, .login-coluna { animation: none; }
}
@media (max-width: 820px) {
  .login-palco { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; align-content: center; }
  .login-simbolo { width: 120px; margin-bottom: 24px; }
}

/* ===== Imagem da squad (projeto do Jira) ===== */
.avatar-squad {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  vertical-align: middle;
}
.avatar-squad.iniciais {
  background: #E6F0FF;
  color: #024FBB;
  font-size: 9px;
  font-weight: 700;
}
.com-avatar { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Usuários: fila de liberação, pessoas e fichas de squad ===== */
.contador {
  display: inline-block;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}
.pendentes { border-color: #BFD6FF; }
/* Convidar: e-mail e perfil lado a lado; a mensagem de sucesso usa o verde do "done" */
.convidar-campos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.convidar-campos label { display: flex; flex-direction: column; gap: 4px; max-width: 100%; font-size: 12px; color: var(--muted-foreground); }
.convidar .aviso { margin-bottom: 14px; }
.convidar-campos input[type="email"] { width: 340px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--foreground); }
.convidar-campos select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.aviso.ok { background: #E7F9EE; border-color: #E7F9EE; color: #146C33; }
.botao-primario:disabled { opacity: 0.45; cursor: not-allowed; }
.pendente, .pessoa-linha {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.pessoas { list-style: none; margin: 0; padding: 0; }
.pessoa-linha.inativa { opacity: 0.55; }
.pessoa { display: flex; gap: 12px; align-items: flex-start; }
.pessoa > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pessoa strong { font-size: 14px; }
.pessoa span { font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.pessoa .rotulo .pill { font-size: 11px; }

.fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha { position: relative; cursor: pointer; }
.ficha input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ficha-corpo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s;
}
.ficha-todas .ficha-corpo { padding-left: 10px; font-weight: 600; }
.ficha:hover .ficha-corpo { border-color: var(--muted-foreground); }
.ficha input:checked + .ficha-corpo { background: #E6F0FF; border-color: var(--primary); color: #024FBB; font-weight: 600; }
.ficha input:focus-visible + .ficha-corpo { outline: 2px solid var(--primary); outline-offset: 2px; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.botao-primario {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #FFFFFF;
  font-weight: 600;
}
.botao-primario:hover { background: #0259CC; }
.botao-discreto { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); color: var(--foreground); }
.botao-discreto:hover { border-color: var(--destructive); color: #A11E1E; }

@media (prefers-reduced-motion: reduce) { .ficha-corpo { transition: none; } }
@media (max-width: 720px) {
  .pendente, .pessoa-linha { grid-template-columns: 1fr; }
}
.acoes select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
}

/* ===== Aguardando liberação (família do login) ===== */
.aguardando .pessoa { margin-bottom: 18px; }
.aguardando .avatar { width: 44px; height: 44px; font-size: 15px; }
.aguardando .pessoa strong { font-size: 15px; }
.aguardando h2 { margin-bottom: 8px; }
.aguardando > p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--foreground); }
.aguardando-quem { font-weight: 600; }
.aguardando-acoes { display: flex; gap: 10px; align-items: stretch; margin-top: 18px; }
.aguardando-acoes .login-google { flex: 1; }
.aguardando-acoes form { display: flex; }

/* ===== Lista de tickets em modal =====
   A caixa nunca passa da tela: a tabela rola por dentro (vertical e, se precisar,
   horizontal), o título quebra linha e as demais colunas ficam numa linha só. */
.modal-lista {
  width: min(1100px, calc(100vw - 32px));
  max-height: min(85vh, 900px);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(10, 20, 80, 0.35);
  color: var(--foreground);
  background: var(--fundo);
  overflow: hidden;
}
.modal-lista[open] { display: flex; flex-direction: column; }
.modal-lista::backdrop { background: rgba(20, 24, 40, 0.45); }
.modal-topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 20px 10px;
}
.modal-titulo {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.modal-total { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.modal-fechar {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted-foreground);
  padding: 0 4px;
}
.modal-fechar:hover { color: var(--foreground); }
.modal-busca {
  margin: 0 20px 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
.modal-busca:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.modal-corpo { flex: 1; min-height: 120px; overflow: auto; padding: 0 20px; }
.modal-corpo table { width: 100%; }
.modal-corpo th { position: sticky; top: 0; background: var(--fundo); z-index: 1; }
.modal-corpo td { white-space: nowrap; vertical-align: top; }
.modal-corpo td:nth-child(3) { white-space: normal; min-width: 260px; }   /* título */
.modal-vazio { color: var(--muted-foreground); margin: 16px 0; }
.modal-vazio:empty { display: none; }
.modal-rodape { padding: 10px 20px 16px; border-top: 1px solid var(--border); }
.modal-mais[hidden] { display: none; }
.modal-corpo td a { color: var(--primary); font-family: var(--fonte-mono); font-size: 13px; }
.modal-corpo td a:hover { text-decoration: underline; }

/* chave do projeto no lugar da imagem da squad: PAY, M1, APPS… */
.tag-squad {
  flex: none;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: #E6F0FF;
  color: #024FBB;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 16px;
}
.ficha input:checked + .ficha-corpo .tag-squad { background: var(--primary); color: #FFFFFF; }

/* ===== Período: campo e calendário =====
   Regras com o prefixo .periodo para vencer o `.filtros button` genérico (a
   especificidade .periodo .x é maior) sem precisar de !important. */
.periodo { position: relative; }
.periodo .periodo-campo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--fundo);
  color: var(--foreground);
  font-size: 13px;
}
.periodo .periodo-campo:hover,
.periodo .periodo-campo[aria-expanded="true"] { border-color: var(--primary); }
.periodo-sep { width: 1px; height: 16px; background: var(--border); }
.periodo-icone { color: var(--primary); }

.cal {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: 1fr auto;
  width: min(740px, calc(100vw - 32px));
  background: var(--fundo);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(10, 20, 80, 0.18);
  color: var(--foreground);
}
.cal-atalhos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
}
.periodo .cal-atalho {
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--foreground);
  font-size: 13px;
}
.periodo .cal-atalho:hover { background: var(--muted); }
.periodo .cal-atalho.ativo { background: var(--primary); color: #FFFFFF; font-weight: 600; }

.cal-centro { padding: 12px 18px 8px; }
.cal-nav-ano, .cal-nav-mes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  margin-bottom: 6px;
}
.cal-nav-ano span { font-weight: 600; min-width: 60px; text-align: center; }
.cal-nav-mes span { min-width: 170px; text-align: center; }
.periodo .cal-seta { border: none; background: none; color: var(--primary); font-size: 18px; padding: 0 6px; line-height: 1; }
.cal-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.cal-mes-nome { margin: 8px 0 6px 6px; font-size: 13px; color: var(--muted-foreground); }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; text-align: center; }
.cal-sem { font-size: 11px; color: var(--muted-foreground); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.periodo .cal-dia {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--foreground);
  font-size: 13px;
}
.periodo .cal-dia:hover { background: var(--muted); }
.periodo .cal-dia.hoje { font-weight: 700; color: var(--primary); }
.periodo .cal-dia.meio { background: #E6F0FF; border-radius: 0; width: 100%; }
.periodo .cal-dia.inicio, .periodo .cal-dia.fim { background: var(--primary); color: #FFFFFF; font-weight: 600; }
.periodo .cal-dia:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.cal-digitar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-digitar input { width: 120px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.cal-digitar input.invalido { border-color: var(--destructive); }
.cal-ate { font-size: 12px; color: var(--muted-foreground); }

.cal-rodape {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.cal-resumo { flex: 1; font-size: 13px; }
.cal-resumo.invalido { color: #A11E1E; }
.periodo .cal-limpar {
  padding: 8px 18px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--primary);
  font-weight: 600;
}
.periodo .cal-aplicar {
  padding: 8px 20px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #FFFFFF;
  font-weight: 600;
}
.periodo .cal-aplicar:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 720px) {
  .cal { position: fixed; left: 16px; right: 16px; top: 80px; width: auto; grid-template-columns: 1fr; }
  .cal-atalhos { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .periodo .cal-atalho { white-space: nowrap; }
  .cal-meses { grid-template-columns: 1fr; }
  .cal-meses .cal-mes + .cal-mes { display: none; }
}

/* entrada sem Google, só no modo de teste (rodando no próprio Mac) */
.login-local { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.login-local label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.login-local input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--foreground); }

/* ===== Pendências por status (o gargalo) ===== */
.status-fila { width: 100%; margin-top: 8px; }
.status-fila th {
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.status-fila td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.status-fila tfoot td { border-bottom: none; padding-top: 10px; font-weight: 600; }
.status-fila td.status-nome {
  padding-left: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--foreground);
}
.status-fila tbody tr:hover, .status-fila tfoot tr:hover { background: #F7F9FD; }
.status-fila tbody tr:hover .status-nome { color: var(--primary); }
.linha-n { padding: 0; border: none; background: none; font: inherit; font-size: 15px; font-weight: 600;
           color: var(--tinta); }
.status-fila th:first-child, .status-fila tfoot td:first-child { padding-left: 6px; }
.status-fila .num-col { width: 84px; text-align: right; padding-right: 16px; }
.status-trilho-td { width: 34%; }
.status-trilho { display: block; height: 6px; border-radius: 3px; background: #E6F0FF; overflow: hidden; }
.status-barra { display: block; height: 100%; min-width: 3px; background: var(--primary); border-radius: 3px; }
.status-pct { width: 56px; text-align: right; font-size: 12px; color: var(--muted-foreground); }

/* ===== Gráfico de linhas: criados por dia =====
   Cores categóricas em ordem fixa, validadas (dataviz/validate_palette, 25/09/2026):
   separação normal e para daltonismo passam; água e amarelo têm contraste < 3:1 no
   branco, então a legenda (filtro) e a tabela "ver os números por dia" são obrigatórias. */
.grafico-linhas, .mapa, .mapa-agentes, .pc-sk-grade, .pc-skill, .pc-kpis, .pc-todos, .pc-exec-cartao, .pc-diag {   /* o mapa e a aba Agentes (AGENTE_COR) e as skills (CORES_DA_SKILL) usam as mesmas cores */
  --serie-total: #333232;
  --serie-triagem: #2a78d6;
  --serie-bug: #eb6834;
  --serie-ajuste-bd: #1baf7a;
  --serie-ocorrencia: #eda100;
}
.linhas-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.ficha-linha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--fundo);
  color: var(--foreground);
  font-size: 12px;
}
.ficha-linha[aria-pressed="false"] { color: var(--muted-foreground); background: var(--muted); }
.ficha-linha[aria-pressed="false"] .chave-linha { opacity: 0.3; }
.chave-linha { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.chave-linha.s-total { background: var(--serie-total); }
.chave-linha.s-triagem { background: var(--serie-triagem); }
.chave-linha.s-bug { background: var(--serie-bug); }
.chave-linha.s-ajuste-bd { background: var(--serie-ajuste-bd); }
.chave-linha.s-ocorrencia { background: var(--serie-ocorrencia); }

.linhas { position: relative; width: 100%; }
.linhas svg { display: block; overflow: visible; }
.linhas svg:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.linhas-grade { stroke: var(--border); stroke-width: 1; }
.linhas-eixo { fill: var(--muted-foreground); font-size: 11px; }
.linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linha.s-total { stroke: var(--serie-total); }
.linha.s-triagem { stroke: var(--serie-triagem); }
.linha.s-bug { stroke: var(--serie-bug); }
.linha.s-ajuste-bd { stroke: var(--serie-ajuste-bd); }
.linha.s-ocorrencia { stroke: var(--serie-ocorrencia); }
.linhas-alvo { fill: transparent; cursor: pointer; }
.linhas-cruz { stroke: var(--muted-foreground); stroke-width: 1; }
.ponto { stroke: var(--fundo); stroke-width: 2; }
.ponto.s-total { fill: var(--serie-total); }
.ponto.s-triagem { fill: var(--serie-triagem); }
.ponto.s-bug { fill: var(--serie-bug); }
.ponto.s-ajuste-bd { fill: var(--serie-ajuste-bd); }
.ponto.s-ocorrencia { fill: var(--serie-ocorrencia); }
.linhas-dica {
  position: absolute;
  z-index: 5;
  width: 170px;
  padding: 8px 10px;
  background: var(--fundo);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 20, 80, 0.14);
  pointer-events: none;
  font-size: 12px;
}
.linhas-dica p { margin: 0; }
.linhas-dica .linhas-dica-dia { font-weight: 700; margin-bottom: 4px; }
.linhas-dica-linha { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.linhas-dica-linha strong { min-width: 22px; text-align: right; color: var(--tinta); }
.linhas-tabela { margin-top: 10px; }
.linhas-tabela summary { cursor: pointer; font-size: 12px; color: var(--primary); }
.linhas-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; }
.linhas-controles .linhas-filtro { margin: 0; }
.ficha-uteis[aria-pressed="true"] { background: #E6F0FF; border-color: var(--primary); color: #024FBB; font-weight: 600; }
.ficha-uteis[aria-pressed="false"] { background: var(--fundo); color: var(--foreground); }

/* ===== O "?" de cada indicador ===== */
.ajuda-caixa { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.ajuda {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--fundo);
  color: var(--muted-foreground);
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  cursor: help;
}
.ajuda:hover, .ajuda:focus-visible { border-color: var(--primary); color: var(--primary); }
.ajuda:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ajuda-texto {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: -8px;
  width: 300px;
  padding: 10px 12px;
  background: var(--foreground);
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 20, 80, 0.25);
  font-family: var(--fonte-texto);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
}
.ajuda-caixa:hover .ajuda-texto,
.ajuda:focus + .ajuda-texto { display: block; }
@media (max-width: 720px) { .ajuda-texto { width: min(300px, calc(100vw - 48px)); } }
.icone-tipo { width: 16px; height: 16px; vertical-align: middle; flex: none; }
th .icone-tipo { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }
.ficha-linha[aria-pressed="false"] .icone-tipo { opacity: 0.45; filter: grayscale(1); }
.conta-fecha {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--muted);
  font-size: 13px;
}
.modal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-exportar {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.modal-exportar:hover { background: #E6F0FF; }

/* ===== Cursor =====
   Padrão: todo lugar clicável que faz alguma coisa mostra a mãozinha. O "?" fica com
   o cursor de ajuda (só explica) e o que está desabilitado mostra que não dá. */
a[href],
button,
summary,
select,
label.ficha,
[data-abre],
[data-sel],
.linhas-alvo { cursor: pointer; } /* clicável com ação */
button:disabled,
[aria-disabled="true"] { cursor: not-allowed; }

/* período de um dia: colunas por tipo, com o número em cima */
.coluna-dia { cursor: pointer; }
.coluna-dia:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.coluna-dia:hover .barra-serie { opacity: 0.85; }
.coluna-valor { fill: var(--tinta); font-size: 13px; font-weight: 600; }
.barra-serie.s-total { fill: var(--serie-total); }
.barra-serie.s-triagem { fill: var(--serie-triagem); }
.barra-serie.s-bug { fill: var(--serie-bug); }
.barra-serie.s-ajuste-bd { fill: var(--serie-ajuste-bd); }
.barra-serie.s-ocorrencia { fill: var(--serie-ocorrencia); }
.linhas-vazio { margin: 24px 0; padding: 16px; border-radius: 8px; background: var(--muted); color: var(--muted-foreground); text-align: center; }

/* ===== Saúde dos dados: controle flutuante e nota lateral ===== */
.sync-flutuante { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-variant-numeric: tabular-nums; }
.sync-gatilho {
  position: absolute;
  top: 132px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 72px;
  padding: 0;
  transform: translateX(0);
  border: 1px solid rgba(10, 22, 80, 0.12);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 18px rgba(10, 22, 80, 0.12), inset 0 1px 0 #fff;
  color: var(--primary);
  pointer-events: auto;
  backdrop-filter: blur(12px);
  transition: right .32s cubic-bezier(.22, 1, .36, 1), width .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.sync-gatilho:hover { width: 38px; border-color: rgba(2, 109, 252, .32); background: #fff; box-shadow: 0 8px 24px rgba(10, 22, 80, .18); }
.sync-gatilho:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sync-gatilho svg { transition: transform .2s ease; }
.sync-flutuante.aberto .sync-gatilho { right: 364px; }
.sync-flutuante.aberto .sync-gatilho svg { transform: rotate(180deg); }
.sync-flutuante.sincronizando .sync-gatilho svg { visibility: hidden; }
.sync-flutuante.sincronizando .sync-gatilho::after {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(2, 109, 252, .22);
  border-top-color: var(--primary);
  border-radius: 50%;
  content: "";
  animation: sync-giro 1.15s linear infinite;
}
.sync-nota {
  position: absolute;
  top: 62px;
  right: 24px;
  width: min(340px, calc(100vw - 48px));
  padding: 18px;
  transform: translateX(calc(100% + 36px)) rotate(.5deg);
  visibility: hidden;
  opacity: 0;
  border: 1px solid rgba(10, 22, 80, .12);
  border-top: 3px solid var(--primary);
  border-radius: 3px 3px 14px 14px;
  background: linear-gradient(165deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 24px 60px rgba(10, 22, 80, .2), 0 3px 10px rgba(10, 22, 80, .08);
  color: var(--tinta);
  pointer-events: none;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .22s ease, visibility .22s;
}
.sync-flutuante.aberto .sync-nota { transform: translateX(0) rotate(0); visibility: visible; opacity: 1; pointer-events: auto; }
.sync-flutuante.diferenca .sync-nota { border-top-color: var(--warning); }
.sync-flutuante.falhou .sync-nota { border-top-color: #d94848; }
.sync-cabeca {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.sync-cabeca .ajuda-caixa { margin-left: auto; }
.sync-cabeca .ajuda { width: 20px; height: 20px; background: transparent; color: var(--muted-foreground); }
/* O painel já encosta na borda direita: a ajuda cresce para dentro dele. */
.sync-cabeca .ajuda-texto { right: -32px; left: auto; }
.sync-fechar { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted-foreground); font-size: 21px; line-height: 1; }
.sync-fechar:hover { color: var(--tinta); }
.sync-luz {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--noite-suave);
  box-shadow: 0 0 0 3px rgba(152, 163, 199, 0.1);
}
.sync-flutuante.ok .sync-luz { background: #2684ff; box-shadow: 0 0 0 3px rgba(38, 132, 255, .14); }
.sync-flutuante.diferenca .sync-luz { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.sync-flutuante.falhou .sync-luz { background: #d94848; box-shadow: 0 0 0 3px rgba(217, 72, 72, .13); }
.sync-estado {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--tinta);
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-flutuante.diferenca .sync-estado { color: #a96100; }
.sync-resumo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 18px; }
.sync-progresso {
  position: relative;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted);
}
.sync-barra {
  display: block;
  width: var(--progresso);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #026DFC, #58A6FF);
  transition: width 0.35s ease;
}
.sync-flutuante.diferenca .sync-barra { background: linear-gradient(90deg, #c97900, #f7b542); }
.sync-percentual { flex: none; font-family: var(--fonte-mono); font-size: 10px; color: var(--muted-foreground); }
.sync-contagens { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 12px; margin: 16px 0 0; color: var(--muted-foreground); font-size: 11px; }
.sync-contagens > i { background: var(--border); }
.sync-contagens b { display: block; margin-top: 2px; color: var(--tinta); font-size: 15px; font-weight: 650; }
.sync-recorte { margin: 10px 0 0; color: var(--muted-foreground); font-size: 10px; }
/* tempo real (webhook do Jira): luz azul chegando aviso, laranja parado, cinza desligado */
.sync-tempo-real { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; }
.sync-tempo-real strong { color: var(--tinta); font-weight: 650; }
.sync-tempo-real span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-tr-luz { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.sync-tempo-real.ok .sync-tr-luz { background: #2684ff; box-shadow: 0 0 0 3px rgba(38, 132, 255, .14); }
.sync-tempo-real.parado .sync-tr-luz { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.sync-tempo-real.parado span:last-child { color: #a96100; }
.sync-flutuante.parado:not(.falhou) .sync-nota { border-top-color: var(--warning); }
.sync-flutuante.parado:not(.falhou) .sync-luz { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.sync-rodape span.sync-seguranca { white-space: normal; line-height: 1.4; }
/* o Jira está falando com outra chave: vermelho, como a falha da sync */
.sync-tempo-real.recusado .sync-tr-luz { background: #d94848; box-shadow: 0 0 0 3px rgba(217, 72, 72, .13); }
.sync-tempo-real.recusado span:last-child { color: #d94848; white-space: normal; }
.sync-flutuante.recusado .sync-nota { border-top-color: #d94848; }
.sync-flutuante.recusado .sync-luz { background: #d94848; box-shadow: 0 0 0 3px rgba(217, 72, 72, .13); }
.sync-tr-contagens { margin: 4px 0 0 14px; color: var(--muted-foreground); font-size: 10px; }
.sync-tr-contagens .ruim { color: #d94848; font-weight: 600; }
/* a carga antiga pendente: aviso aqui, não no topo das telas */
.sync-recarga { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #FFF6E5; color: #7a4a00; font-size: 11px; line-height: 1.45; }
.sync-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 11px;
}
.sync-rodape span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-rodape form { display: flex; flex: none; }
.sync-rodape button {
  padding: 5px 9px;
  border: 1px solid rgba(2, 109, 252, .3);
  border-radius: 7px;
  background: rgba(2, 109, 252, .07);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}
.sync-rodape button:hover { border-color: var(--primary); background: rgba(2, 109, 252, .12); }
.sync-flutuante.sincronizando .sync-luz { animation: sync-pulso 1.4s ease-in-out infinite; }
.sync-flutuante.sincronizando .sync-barra { width: 38%; animation: sync-andamento 1.5s ease-in-out infinite; }
@keyframes sync-pulso { 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes sync-andamento { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
@keyframes sync-giro { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .sync-gatilho { top: 94px; }
  .sync-nota { top: 70px; right: 10px; width: calc(100vw - 20px); }
  .sync-flutuante.aberto .sync-gatilho { right: calc(100vw - 40px); }
}

/* ===== Mediana e média lado a lado (a cena do tempo da apresentação) =====
   A mediana grande, que é o ticket típico; a média ao lado, menor, que ninguém esconde. */
.mediana-media { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; margin: 12px 0 8px; }
.mm-valor { display: flex; align-items: baseline; gap: 8px; }
.mm-n { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mediana .mm-n { font-size: 56px; }
.media .mm-n { font-size: 28px; color: var(--muted-foreground); }
.mm-unidade { font-size: 15px; font-weight: 500; color: var(--tinta); }
.media .mm-unidade { color: var(--muted-foreground); }
.mm-rotulo { display: block; margin-top: 6px; font-family: var(--fonte-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
button.mm-valor { padding: 0; border: none; background: none; text-align: left; }
button.mm-valor:hover .mm-n, button.mm-valor:hover .mm-unidade { color: var(--primary); }
button.mm-valor:hover .mm-n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ===== Agents: critérios da diretoria, antes × agora ===== */
.criterios-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 40px; margin-top: 16px; }
.criterio h3 { font-size: 15px; }
.antes-agora { display: flex; align-items: flex-end; gap: 32px; margin-top: 10px; }
.antes-agora .mm-n { font-size: 44px; }
.antes-agora .antes .mm-n { color: var(--muted-foreground); }
.criterio-base { margin: 8px 0 0; font-size: 13px; color: var(--muted-foreground); }

/* ===== Movimento: só na chegada, uma vez, e nunca para quem pediu menos movimento ===== */
@keyframes desenhar-linha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.linhas.entrando .linha { stroke-dasharray: 1; animation: desenhar-linha 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .linhas.entrando .linha { animation: none; stroke-dasharray: none; }
}

/* ===== Formulários da Configuração: rótulo em cima, campos alinhados em grade ===== */
.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.formulario .largo { grid-column: 1 / -1; }
.formulario input, .formulario select, .formulario textarea, .ia-vencimento input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus, .ia-vencimento input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.formulario .botao-primario { justify-self: start; padding: 9px 18px; }
.recarregar { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; }
.conf-ok { color: #146C33; font-weight: 600; }
td .alerta { color: #A11E1E; font-weight: 600; }
.cartao > h2 + .formulario { border-top: none; padding-top: 0; }

/* ===== Diagnóstico da squad ===== */
.fila-diag { justify-self: end; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
.fila-diag:hover { color: var(--primary); }

.diag-cabeca { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 24px; align-items: center; margin-bottom: 16px; }
.diag-quem { display: flex; gap: 16px; align-items: flex-start; }
.diag-avatar .avatar-squad { width: 44px; height: 44px; border-radius: 10px; }
.diag-avatar .tag-squad { font-size: 13px; line-height: 44px; padding: 0 10px; border-radius: 10px; }
.diag-nome { margin: 0; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); }
.diag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 13px; color: var(--muted-foreground); }
.diag-meta strong { color: var(--foreground); }
.diag-escopo { margin: 8px 0 0; max-width: 70ch; font-size: 13px; color: var(--muted-foreground); }

.diag-sinal { border-radius: 12px; padding: 14px 16px; background: #E7F9EE; border: 1px solid #BFE9CF; color: #146C33; }
.diag-sinal.atencao { background: #FFF7E8; border-color: #F5DFA6; color: #92660A; }
.diag-sinal.alerta { background: #FBE9E9; border-color: #F5C2C2; color: #A11E1E; }
.diag-sinal-rotulo { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; }
.diag-luz { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.diag-sinal ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.diag-sinal-ok { margin: 6px 0 0; font-size: 13px; }

.diag-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.diag-kpi { display: flex; flex-direction: column; }
.diag-kpi .mm-valor { margin-top: 12px; }
.diag-kpi .mm-n { font-size: 44px; }
.diag-kpi-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted-foreground); }
.diag-kpi-vazio { margin: 12px 0 0; font-size: 13px; color: var(--muted-foreground); }
.diag-kpi-pe { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.diag-kpi-sub + .diag-kpi-pe, .diag-kpi-vazio + .diag-kpi-pe { margin-top: 14px; }
.diag-kpi-pe.alerta { color: #A11E1E; }
.diag-kpi-pe.alerta .link[data-abre] { color: #A11E1E; }
.diag-selo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.diag-selo.ok { background: #E7F9EE; color: #146C33; }
.diag-selo.alerta { background: #FBE9E9; color: #A11E1E; }

.diag-par { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.diag-par.com-equipe { grid-template-columns: 7fr 5fr; }
.diag-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.gargalos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gargalo { padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--muted-foreground); border-radius: 10px; }
.gargalo.grau-0 { border-left-color: var(--destructive); background: #FFFBFB; }
.gargalo.grau-1 { border-left-color: var(--warning); background: #FFFDF7; }
.gargalo p { margin: 0; }
.gargalo-linha1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gargalo-chave { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fonte-mono); font-size: 13px; font-weight: 600; color: var(--primary); }
.gargalo-chave:hover { color: var(--primary); text-decoration: underline; }
.gargalo-motivo { font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.grau-0 .gargalo-motivo { color: #A11E1E; }
.grau-1 .gargalo-motivo { color: #92660A; }
.gargalo-titulo { margin-top: 6px !important; font-weight: 600; color: var(--foreground); line-height: 1.35; }
.gargalo-quem { margin-top: 4px !important; font-size: 12px; color: var(--muted-foreground); }
.diag-rodape { margin: 12px 0 0; font-size: 12px; color: var(--muted-foreground); }

.pessoas-diag { list-style: none; margin: 0; padding: 0; }
.pessoa-diag { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.pessoa-diag:first-child { border-top: none; padding-top: 0; }
.pessoa-diag .avatar { width: 32px; height: 32px; font-size: 11px; }
.pessoa-diag-corpo { flex: 1; min-width: 0; }
.pessoa-diag-corpo p { margin: 0; }
.pessoa-diag-nome { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.pessoa-diag-nome strong { color: var(--foreground); }
.pessoa-diag-carga { font-size: 12px; color: var(--muted-foreground); }
.pessoa-diag .status-trilho { margin: 6px 0; }
.pessoa-diag.alerta .status-barra { background: var(--destructive); }
.pessoa-diag .alerta, .pessoa-diag .alerta .link[data-abre] { color: #A11E1E; }
.pessoa-diag-entregas { font-size: 12px; color: var(--muted-foreground); }

.composicao { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.composicao-tipo {
  --cor: var(--muted-foreground);
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline;
  padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--fundo); text-align: left;
}
.composicao-tipo:hover { border-color: var(--cor); }
.composicao-tipo.t-bug { --cor: #eb6834; }
.composicao-tipo.t-triagem { --cor: #2a78d6; }
.composicao-tipo.t-ajuste-bd { --cor: #1baf7a; }
.composicao-tipo.t-ocorrencia { --cor: #eda100; }
.composicao-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--foreground); }
.composicao-pct { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; color: var(--tinta); }
.composicao-n { grid-column: 1 / -1; font-size: 12px; color: var(--muted-foreground); }
.composicao-trilho { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; margin-top: 6px; }
.composicao-trilho span { display: block; height: 100%; min-width: 2px; background: var(--cor); border-radius: 3px; }

.diag-destaques ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.diag-destaques li { padding: 10px 14px; border-left: 3px solid var(--primary); background: #F5F8FF; border-radius: 0 8px 8px 0; font-size: 14px; }

@media (max-width: 1100px) {
  .diag-kpis { grid-template-columns: repeat(2, 1fr); }
  .diag-par.com-equipe { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .diag-cabeca { grid-template-columns: 1fr; }
  .diag-kpis, .composicao { grid-template-columns: 1fr; }
  .fila-diag { justify-self: start; padding: 0 8px 8px; }
}
.acoes-squad { text-align: right; white-space: nowrap; }
.editar-squad { display: inline-block; margin-right: 12px; text-align: left; white-space: normal; }
.editar-squad summary { display: inline; color: var(--primary); text-decoration: underline; font-size: 13px; }
.editar-squad[open] { display: block; margin: 8px 0; }
.editar-squad .formulario { border-top: none; margin-top: 8px; padding: 12px; background: var(--pagina); border-radius: 10px; }
.acoes-squad form.inline + form.inline { margin-left: 12px; }

/* ===== Manutenções: triagem e status lado a lado =====
   Mesma altura; a conta que fecha com o gráfico fica no pé do cartão da triagem. */
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.lado-a-lado > .cartao { display: flex; flex-direction: column; min-width: 0; }
.triagem-cartao .resultados { margin: 8px 0 16px; }
/* o grupo (pela triagem / direto) em destaque; os itens de cada grupo recuados embaixo */
.triagem-cartao .resultados li.grupo .resultado-rotulo, .triagem-cartao .resultados li.grupo .resultado-n { font-weight: 650; color: var(--tinta); }
.triagem-cartao .resultados li.grupo:not(:first-child) { margin-top: 6px; }
.triagem-cartao .resultados li.grupo .resultado-rotulo .rotulo { font-weight: 400; color: var(--muted-foreground); }
.triagem-cartao .resultados li.sub .resultado { padding-left: 22px; }
.triagem-cartao .resultados li.sub .resultado-rotulo { color: var(--foreground); }
.triagem-cartao .conta-fecha { margin-top: auto; padding: 12px 14px; font-size: 12px; line-height: 1.6; color: var(--muted-foreground); }
.conta-fecha p { margin: 0; }
.conta-fecha p + p { margin-top: 4px; }
.conta-fecha strong { color: var(--foreground); }
.resultado.alerta { background: #FDF1F1; }
.resultado.alerta .resultado-rotulo, .resultado.alerta .resultado-rotulo .rotulo, .resultado.alerta .resultado-pct { color: #A11E1E; }
.resultado.alerta:hover { background: #FBE6E6; }
@media (max-width: 1100px) { .lado-a-lado { grid-template-columns: 1fr; } }
.diag-rodape .link[data-abre] { color: var(--primary); font-weight: 600; }   /* é ação ("ver todas"), não número */

/* ===== Por prioridade: uma ficha por prioridade, na cor do Jira =====
   A cor vem de `--cor` (inline, da sync): o fundo é um véu dela, o número e o nome
   usam a cor escurecida para ler bem até no laranja. Zerada fica neutra. */
.prioridades { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.prioridade {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 18px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--cor) 32%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cor) 7%, var(--fundo));
}
.prioridade:hover { border-color: var(--cor); }
.prioridade-n { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
                font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--cor) 78%, #000); }
.prioridade-nome { font-family: var(--fonte-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
                   color: color-mix(in srgb, var(--cor) 78%, #000); }
.prioridade.zerada { border-color: var(--border); background: var(--pagina); }
.prioridade.zerada .prioridade-n, .prioridade.zerada .prioridade-nome { color: var(--muted-foreground); }

/* Diagnóstico com "Todas as squads": a foto de cada uma, e clicar abre a dela */
.diag-todas { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.diag-todas a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border);
                border-radius: 999px; background: var(--fundo); font-size: 13px; color: var(--foreground); }
.diag-todas a:hover { border-color: var(--primary); color: var(--primary); }
.diag-todas .avatar-squad { width: 28px; height: 28px; border-radius: 50%; }
.diag-todas .tag-squad { line-height: 28px; min-width: 28px; text-align: center; border-radius: 999px; }
/* composição na visão Evoluções / Customizações: uma cor por tipo, fixa */
.composicao-tipo.t-historia { --cor: #36b37e; }
.composicao-tipo.t-customizacao { --cor: #6554c0; }
.composicao-tipo.t-spike { --cor: #ff8b00; }
.composicao-tipo.t-migracao { --cor: #00a3bf; }

/* ===== Produtividade ===== */
.prod-tabela { width: 100%; }
.prod-tabela th { text-align: left; font-family: var(--fonte-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
                  text-transform: uppercase; color: var(--muted-foreground); padding: 8px; border-bottom: 1px solid var(--border); }
.prod-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prod-tabela .prod-mediana td { background: var(--pagina); color: var(--muted-foreground); font-weight: 600; }
.prod-nome { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--foreground); }
.prod-nome:hover { color: var(--primary); }
.prod-valor { font-weight: 600; color: var(--tinta); }
.prod-antes { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.prod-antes.seta-melhor::after { content: " ↑"; color: #146C33; }
.prod-antes.seta-pior::after { content: " ↓"; color: #A11E1E; }
.prod-pouca { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--muted-foreground); font-style: italic; }
.prod-mes { display: flex; align-items: flex-end; gap: 12px; margin: 16px 0 0; padding: 0; }
.prod-mes .trilho-mes { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 110px; }
.prod-mes li { flex: 1; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prod-mes .barra-mes { width: 100%; max-width: 48px; background: var(--primary); border-radius: 6px 6px 0 0; min-height: 2px; }
.prod-mes .rotulo-mes { font-family: var(--fonte-mono); font-size: 11px; color: var(--muted-foreground); text-transform: uppercase; }
@media (max-width: 720px) {
  .prod-tabela thead { display: none; }
  .prod-tabela tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .prod-tabela td { display: block; border: none; padding: 4px 0; }
}
.pessoa-link:hover strong { color: var(--primary); }
.prod-cabeca { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.prod-foto { width: 56px; height: 56px; font-size: 18px; }
.prod-voltar { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.prod-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 8px; }
.prod-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.prod-kpi-nome { margin: 0; font-family: var(--fonte-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--muted-foreground); }
.prod-kpi .mm-n { font-size: 36px; }
.prod-kpi .mm-n.prod-mm { font-size: 24px; }
.prod-time { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.prod-tipos { margin: 12px 0 16px; }
.prod-fases { margin-bottom: 16px; }
.prod-entregas td:nth-child(2) { max-width: 520px; }
@media (max-width: 1100px) { .prod-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .prod-kpis { grid-template-columns: 1fr; } .prod-cabeca { flex-wrap: wrap; } }
.diag-rodape .link[data-abre], .prod-entregas + .diag-rodape .link { color: var(--primary); font-weight: 600; }
.prod-fases .num-col { width: 170px; white-space: nowrap; }

/* ===== Profundidade: o que é clicável sobe um pouco no hover ===== */
.composicao-tipo, .prioridade, .diag-todas a, .prod-kpi, .gargalo {
  box-shadow: 0 1px 2px rgba(10, 22, 80, 0.05);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.composicao-tipo:hover, .prioridade:hover, .diag-todas a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}
.prod-kpi { background: var(--fundo); }
.gargalo:hover { box-shadow: var(--sombra); }
@media (prefers-reduced-motion: reduce) {
  .composicao-tipo, .prioridade, .diag-todas a, .prod-kpi, .gargalo, .menu .item, .marca .simbolo,
  .menu-marca-dagua, .rodape-menu, .rodape-menu .avatar, .menu .sair { transition: none; }
  .composicao-tipo:hover, .prioridade:hover, .diag-todas a:hover { transform: none; }
  .marca:hover .simbolo { transform: none; }
  .menu:hover .menu-marca-dagua, .rodape-menu:hover, .rodape-menu:focus-within,
  .rodape-menu:hover .avatar, .rodape-menu:focus-within .avatar,
  .rodape-menu:hover .sair, .rodape-menu:focus-within .sair { transform: none; }
  .sync-gatilho, .sync-gatilho svg, .sync-nota { transition: none; }
  .sync-flutuante.sincronizando .sync-luz, .sync-flutuante.sincronizando .sync-barra { animation: none; }
  .sync-flutuante.sincronizando .sync-gatilho::after { animation: none; }
}

/* ícones de prioridade: as cores do próprio ícone no Jira (as setas são sempre coloridas,
   mesmo na ficha zerada — é o que dá a familiaridade) */
.prio-icone { flex: none; vertical-align: -3px; }
.prio-icone.p-muito-alta { color: #ff5630; }
.prio-icone.p-alta { color: #ff7452; }
.prio-icone.p-normal { color: #ffab00; }
.prio-icone.p-baixa { color: #2684ff; }
.prio-icone.p-muito-baixa { color: #0065ff; }
.prioridade-nome { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Trabalhando agora ===== */
.agora-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.segmento { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--fundo); box-shadow: var(--sombra); }
.segmento a { padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.segmento a:hover { color: var(--foreground); }
.segmento a.ativo { background: var(--noite); color: #FFFFFF; }
a.ficha-linha { text-decoration: none; }
.agora-resumo { font-size: 13px; color: var(--muted-foreground); }
.agora-resumo strong { color: var(--tinta); }
.agora-barra .inline { margin-left: auto; }
.agora-secao { margin-bottom: 24px; }
.agora-secao > h2 { margin-bottom: 12px; font-size: 18px; }
/* um time embaixo do outro, na largura toda — lado a lado, as alturas diferentes deixavam buracos */
.agora-times { display: flex; flex-direction: column; gap: 16px; }
.agora-time-topo { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.agora-time-topo h3 { font-size: 16px; }
.agora-time-topo .rotulo { margin: 2px 0 0; font-size: 12px; color: var(--muted-foreground); }
.agora-time-topo .avatar-squad, .agora-time-topo .avatar { width: 32px; height: 32px; border-radius: 9px; }
.agora-conta { margin-left: auto; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.agora-conta strong { font-family: var(--fonte-titulo); font-size: 18px; color: var(--tinta); }
.agora-pessoas { list-style: none; margin: 0; padding: 0; }
.agora-pessoas > li { padding: 12px 0; border-top: 1px solid var(--border); }
.agora-pessoas > li:first-child { border-top: none; }
.agora-pessoa { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; }
.agora-pessoa .avatar { width: 28px; height: 28px; font-size: 11px; }
.agora-pessoa .rotulo { margin-left: auto; font-size: 12px; color: var(--muted-foreground); }
.agora-tickets { list-style: none; margin: 0 0 0 38px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agora-ticket { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: var(--pagina); }
.agora-ticket.outra { background: #FFF7E8; box-shadow: inset 3px 0 0 var(--warning); }
.agora-titulo { font-size: 13px; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.agora-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted-foreground); }
.agora-status { font-weight: 600; color: var(--foreground); }
.agora-squad.outra { font-weight: 700; color: #92660A; }
.agora-parados { margin-top: 10px; font-size: 12px; color: var(--muted-foreground); }
.agora-parados summary { cursor: pointer; }
.agora-parados p { margin: 6px 0 0; }
.agora-tabela td { vertical-align: top; }
.agora-tabela .agora-titulo { display: block; max-width: 420px; }
.agora-quem { white-space: nowrap; }
@media (max-width: 720px) {
  .agora-times { grid-template-columns: 1fr; }
  .agora-tickets { margin-left: 0; }
  .agora-barra .inline { margin-left: 0; }
}
.pagina { min-width: 0; }            /* tabela larga rola dentro do cartão, não empurra a página */
.rolagem { overflow-x: auto; }
.agora-tabela th:nth-child(1), .agora-tabela td.agora-quem { width: 200px; white-space: normal; }
.agora-tabela td:nth-child(4), .agora-tabela td:nth-child(5), .agora-tabela td:last-child { white-space: nowrap; }



/* ===== Agentes IA — credenciais (Frente 1 escreve logo abaixo) ===== */
.ia-chave { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--muted);
  font-family: var(--fonte-mono); word-break: break-all; user-select: all; }

/* ----- fim credenciais ----- */

/* ===== Agentes — mapa dos agentes: raias × etapas do Jira (Frente C, 05/10/2026) =====
   Cada agente numa raia (faixa); as etapas do Jira são as colunas, na ordem do fluxo. A grade vem
   pronta do servidor em --colunas (app/metricas/ia_mapa.py → quadro): as etapas sem agente viram
   colunas estreitas (.grupo). Cada saída é uma linha da raia: o ponto na etapa de onde o ticket sai,
   a seta até a etapa para onde vai, o anel quando fica na mesma. Cor do agente em --cor-agente
   (AGENTE_COR, só tokens daqui). Sem JavaScript; no celular rola de lado e o nome do agente e o
   detalhe ficam presos à esquerda. */
.ag-cabeca-time { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mapa-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin: 0 0 14px; font-size: 13px; }
.mapa-chave { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0; padding: 0;
  color: var(--muted-foreground); }
.mapa-chave li { display: inline-flex; align-items: center; gap: 8px; }
.mapa-chave-seta { position: relative; width: 34px; height: 2px; background: var(--muted-foreground); }
.mapa-chave-seta::before { content: ""; position: absolute; left: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-foreground); }
.mapa-chave-seta::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 8px solid var(--muted-foreground);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mapa-chave-fica { width: 14px; height: 14px; border: 2px solid var(--muted-foreground); border-right-color: transparent;
  border-radius: 50%; transform: rotate(-45deg); }
.mapa-aviso { margin: 0 0 12px; }

.mapa-rolagem { overflow-x: auto; container-type: inline-size; scrollbar-width: thin; }
.mapa-rolagem:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.mapa-quadro { position: relative; }
.mapa-guias, .mapa-etapas, .mapa-linha { display: grid; grid-template-columns: var(--colunas); }
/* os trilhos: um tracejado no meio de cada etapa, onde os pontos e as setas encostam */
.mapa-guias { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mapa-guia.etapa { background: repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 8px) center / 1px 100% no-repeat; }
.mapa-guia.grupo { background: var(--pagina); }
.mapa-etapas, .mapa-raia { position: relative; z-index: 1; }
.mapa-etapas { align-items: end; padding: 2px 0 10px; border-bottom: 1px solid var(--border); background: var(--fundo); }
.mapa-etapa { display: flex; justify-content: center; padding: 0 6px; text-align: center; }
.mapa-etapa .status-jira { white-space: normal; line-height: 1.35; padding: 3px 7px; }
.mapa-etapa.quieta .status-jira { opacity: 0.55; }
.mapa-grupo { padding: 0 3px; text-align: center; overflow-wrap: anywhere; font: 500 10px/1.3 var(--fonte-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); cursor: help; }

.mapa-raia { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.mapa-raia:last-child { border-bottom: none; }
.mapa-raia-cabeca { position: sticky; left: 0; display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
  width: 100cqi; padding: 16px 4px 6px 0; }
.mapa-inicial { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
  border-radius: 50%; background: var(--cor-agente); color: #fff; font: 600 13px/1 var(--fonte-titulo); }
.mapa-raia-texto { min-width: 0; }
.mapa-raia-texto h3 { display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 28px; }
.mapa-raia-texto h3 .ag-nota { font-family: var(--fonte-texto); }
.mapa-raia-texto p { margin: 0; max-width: 78ch; font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
.mapa-ficha { margin-left: auto; padding-top: 5px; font-size: 13px; white-space: nowrap; }

/* uma saída = uma linha da raia */
.mapa-linha { height: 46px; border-radius: 8px; color: inherit; text-decoration: none; cursor: pointer; list-style: none;
  --fundo-linha: var(--fundo); }
summary.mapa-linha::-webkit-details-marker { display: none; }
.mapa-linha:hover, .mapa-saida[open] > .mapa-linha, .mapa-saida:target > .mapa-linha {
  --fundo-linha: color-mix(in srgb, var(--cor-agente) 9%, var(--fundo)); background: var(--fundo-linha); }
.mapa-linha:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mapa-celula { position: relative; grid-row: 1; min-width: 0; }
.mapa-celula::before, .mapa-celula::after { content: ""; position: absolute; }
.mapa-meio::before, .mapa-origem::before, .mapa-destino::before { top: 32px; height: 2px; background: var(--cor-agente); }
.mapa-meio::before { left: 0; right: 0; }
.mapa-origem.mapa-frente::before { left: 50%; right: 0; }
.mapa-origem.mapa-volta::before { left: 0; right: 50%; }
.mapa-origem::after { top: 28px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--cor-agente);
  box-shadow: 0 0 0 3px var(--fundo-linha); }
.mapa-destino.mapa-frente::before { left: 0; right: calc(50% + 7px); }
.mapa-destino.mapa-frente::after { top: 27px; left: calc(50% - 8px); border-left: 9px solid var(--cor-agente);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mapa-destino.mapa-volta::before { left: calc(50% + 7px); right: 0; }
.mapa-destino.mapa-volta::after { top: 27px; left: calc(50% - 1px); border-right: 9px solid var(--cor-agente);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* fica na mesma etapa: um anel aberto com a ponta */
.mapa-fica::before { top: 24px; left: calc(50% - 9px); width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--cor-agente); border-right-color: transparent; transform: rotate(-45deg); background: var(--fundo-linha); }
.mapa-fica::after { top: 22px; left: calc(50% + 2px); border-left: 7px solid var(--cor-agente);
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transform: rotate(35deg); }
.mapa-rotulo { position: absolute; z-index: 2; top: 5px; left: calc(50% - 6px); display: inline-flex; align-items: center; gap: 8px;
  padding: 0 6px; border-radius: 6px; background: var(--fundo-linha); white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 22px; color: var(--tinta); }
.mapa-rotulo.esq { left: auto; right: calc(50% - 6px); }
.mapa-fica .mapa-rotulo { top: 22px; left: calc(50% + 14px); }
.mapa-fica .mapa-rotulo.esq { left: auto; right: calc(50% + 14px); }
.mapa-linha:hover .mapa-rotulo { color: var(--primary); }
/* quem assume depois: a inicial na cor do outro agente */
.mapa-passa { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 2px; border-radius: 999px;
  background: color-mix(in srgb, var(--cor-proximo) 13%, var(--fundo)); color: var(--tinta);
  font: 500 12px/20px var(--fonte-texto); white-space: nowrap; }
.mapa-passa-inicial { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--cor-proximo); color: #fff; font: 600 9px/1 var(--fonte-titulo); }

/* o detalhe de uma saída (abre embaixo da linha; preso à esquerda quando o quadro rola) */
.mapa-detalhe { position: sticky; left: 0; box-sizing: border-box; width: min(760px, 100cqi); margin: 4px 0 12px; padding: 14px 18px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--cor-agente); border-radius: 12px; background: var(--fundo);
  box-shadow: var(--sombra); }
.mapa-trajeto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--muted-foreground); }
.mapa-passos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 14px;
  line-height: 1.5; color: var(--foreground); }
.mapa-passos dt { font: 600 10px/21px var(--fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.mapa-passos dd { margin: 0; }
.mapa-marca { display: inline-block; margin: 0 4px 3px 0; padding: 1px 6px; border-radius: 4px; background: var(--muted);
  color: var(--muted-foreground); font: 500 11px/18px var(--fonte-mono); }
.mapa-fonte { margin: 14px 0 0; padding: 8px 12px; border-left: 2px solid var(--border); border-radius: 0 8px 8px 0;
  background: var(--pagina); font-size: 13px; line-height: 1.5; color: var(--foreground); }
.mapa-fonte-rotulo { display: block; margin-bottom: 2px; font: 600 10px/16px var(--fonte-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-foreground); }
.mapa-papel { position: sticky; left: 0; box-sizing: border-box; width: min(760px, 100cqi); margin: 0 0 8px; padding-left: 38px;
  font-size: 13px; line-height: 1.5; color: var(--foreground); }
.mapa-fora { color: var(--muted-foreground); }
.mapa-ocultas { margin: 12px 0 0; }

/* a aba Mapa da ficha do agente: a raia dele (sem o cabeçalho, que já é a ficha) e as saídas em texto */
.mapa-aba-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.mapa-aba-cabeca h3 { font-size: 15px; }
.mapa-aba-faz { margin: 4px 0 12px; max-width: 78ch; font-size: 13px; color: var(--muted-foreground); }
.mapa-aba .mapa-raia-cabeca { display: none; }
.mapa-aba .mapa-raia { padding-top: 6px; border-bottom: none; }
.mapa-texto { list-style: none; display: grid; gap: 12px; margin: 20px 0 0; padding: 0; }
.mapa-texto-saida { padding: 14px 18px 16px; border: 1px solid var(--border); border-left: 3px solid var(--cor-agente);
  border-radius: 12px; scroll-margin-top: 16px; }
.mapa-texto-saida:target { background: color-mix(in srgb, var(--cor-agente) 6%, var(--fundo)); }
.mapa-texto-saida h4 { margin: 0 0 6px; font: 600 15px/1.3 var(--fonte-texto); color: var(--tinta); }
.mapa-papel-solto { position: static; width: auto; margin: 4px 0 0; padding: 12px 16px; border-left: 3px solid var(--cor-agente);
  border-radius: 0 10px 10px 0; background: var(--pagina); }
.mapa-de-onde { margin: 14px 0 0; }
@media (max-width: 720px) {
  .mapa-raia-texto p { font-size: 12px; }
  .mapa-ficha { display: none; }
  .mapa-passos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mapa-passos dd { margin-bottom: 6px; }
}
/* ----- fim mapa ----- */

/* ===== Abas (Configuração: Geral · Agentes) =====
   Links simples, sem JavaScript; a ativa leva aria-current. A linha de base é uma sombra de
   dentro (não corta o sublinhado da aba ativa) e a fila rola de lado no celular. */
.abas { display: flex; gap: 24px; margin: -4px 0 20px; overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border); }
.abas::-webkit-scrollbar { display: none; }
.aba { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 2px 10px;
  border-bottom: 2px solid transparent; font: 500 14px/1.2 var(--fonte-texto); color: var(--muted-foreground); white-space: nowrap; }
.aba:hover { color: var(--foreground); }
.aba.ativa { font-weight: 600; color: var(--tinta); border-bottom-color: var(--primary); }
.aba:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ===== Configuração → aba Agentes ===== */
.cartao > .aviso { margin-bottom: 12px; }
/* Peças comuns da aba e das páginas ligadas */
.ia-sub { display: flex; align-items: center; margin: 22px 0 4px; font-size: 14px; }
.ia-sub-nota { margin: 0 0 8px; font-size: 12px; color: var(--muted-foreground); }
.editar-squad.ia-novo { display: block; margin: 10px 0 0; }
/* Tabelas compactas */
table.zebra.ia-compacta th, table.zebra.ia-compacta td { padding: 6px 10px; }
table.zebra.ia-compacta td { vertical-align: top; }
/* Blocos que abrem e fecham (o combinado de saída da ficha) */
.ia-bloco { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ia-bloco > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none;
  font-weight: 600; color: var(--tinta); }
.ia-bloco > summary::-webkit-details-marker { display: none; }
.ia-bloco > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 4px 0 2px;
  border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(-45deg); transition: transform 0.15s; }
.ia-bloco[open] > summary::before { transform: rotate(45deg); }
.ia-bloco > summary:hover { color: var(--primary); }
.ia-bloco[open] > summary { margin-bottom: 10px; }
.ia-bloco-nota { font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.ia-bloco > .formulario { margin-top: 0; padding: 12px; border-top: none; background: var(--pagina); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .ia-bloco > summary::before { transition: none; } }
/* Credenciais: o vencimento e a chave nova do computador */
.ia-vencimento { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; padding: 0 12px; }
.ia-vencimento label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.ia-chave-unica { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--primary); border-radius: var(--radius); font-size: 13px; }
/* Páginas próprias (ficha do agente, mapa): a volta para a aba */
.ia-volta { margin: -12px 0 8px; font-size: 13px; }

/* ===== Configuração → aba Agentes, versão enxuta (05/10/2026: os agentes trabalham no Paperclip) =====
   Quieta em volta, com uma assinatura só: o time desenhado como crachás ligados por setas — a
   esteira. Os tons (ok/alerta/ruim/andando/neutro) reaproveitam as cores do padrão. */
.ag-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ag-nota { font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.ag-tom-ok { --tom: var(--success); --tom-texto: #146C33; }
.ag-tom-alerta { --tom: var(--warning); --tom-texto: #92660A; }
.ag-tom-ruim { --tom: var(--destructive); --tom-texto: #A11E1E; }
.ag-tom-andando { --tom: var(--primary); --tom-texto: var(--primary); }
.ag-tom-neutro { --tom: var(--muted-foreground); --tom-texto: var(--muted-foreground); }
/* botão secundário: contorno, texto na cor da ação */
.ag-botao { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); color: var(--primary);
  font: 600 13px/1.3 var(--fonte-texto); white-space: nowrap; cursor: pointer; }
.ag-botao:hover { border-color: var(--primary); }

.ag-tempos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 12px 0 0; font-size: 13px; }
.ag-tempos-rotulo { display: inline-flex; align-items: center; color: var(--muted-foreground); }

/* 2. Credenciais: uma frase por credencial; o formulário abre ao clicar na linha */
.ag-sinal { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--tom) 14%, transparent); color: var(--tom-texto); font: 700 12px/1 var(--fonte-texto); }
.ag-acessos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ag-acesso { border-bottom: 1px solid var(--border); scroll-margin-top: 16px; }
.ag-acesso-linha { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; }
.ag-acesso-frase { margin: 0; }
.ag-acesso-frase strong { font-weight: 600; color: var(--tinta); }
summary.ag-acesso-linha { list-style: none; cursor: pointer; border-radius: 6px; }
summary.ag-acesso-linha::-webkit-details-marker { display: none; }
summary.ag-acesso-linha:hover { background: #F7F9FD; }
summary.ag-acesso-linha:hover .ag-botao { border-color: var(--primary); }
summary.ag-acesso-linha:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ag-acesso-abre[open] > summary .ag-botao { background: var(--muted); border-color: transparent; color: var(--tinta); }
.ag-acesso:target { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.ag-acesso-painel { margin: 0 8px 12px 44px; padding: 12px 16px; border-radius: 10px; background: var(--pagina); }
.ag-acesso-painel > .ag-nota { margin: 0; }
.ag-acesso-painel .formulario { margin-top: 10px; padding-top: 0; border-top: none; }
.ag-acesso-extras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 13px; }
.ag-acesso-extras > .ag-nota { flex-basis: 100%; margin: 0; }
.ag-acesso-extras .ia-vencimento { margin: 0; padding: 0; }
.ag-acesso-extras .ia-vencimento input { padding: 4px 8px; }
.ag-acesso-extras .link { font-size: 13px; }
.link.ag-apagar { color: var(--muted-foreground); }
.link.ag-apagar:hover { color: #A11E1E; opacity: 1; }

/* blocos que abrem (combinado de saída da ficha): o foco aparece */
.ia-bloco > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 720px) {
  .ag-acesso-linha { grid-template-columns: 24px minmax(0, 1fr); }
  .ag-acesso-linha > .ag-botao, .ag-acesso-linha > form { grid-column: 2; justify-self: start; }
  .ag-acesso-painel { margin-left: 8px; }
}

/* ===== Agentes — o Paperclip dentro do PM Business (05/10/2026; navegação de 06/10/2026) =====
   Como o Paperclip: os agentes no menu da esquerda (grupo Agentes IA); a página do agente é o
   cabeçalho + abas; /agentes (Ver todos) é uma tabela `.pc-todos`. Só peças e cores que já existem:
   a inicial do crachá, os tons (ag-tom-*) para a situação, as abas `.abas`. (.pc-lista/.pc-item: a
   coluna de agentes de antes, sem uso nas telas novas.) */
.pc-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: -12px 0 12px; }
.pc-topo .ia-volta { margin: 0; }
.pc-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; }
.pc-atalhos .ag-botao { padding: 4px 10px; }
.pc-agentes { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 20px; align-items: start; }
.pc-coluna { position: sticky; top: 16px; min-width: 0; padding: 16px 10px 10px; }
.pc-coluna > h2 { margin: 0 8px 10px; font-size: 15px; }
.pc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "ini texto" "ini sit";
  align-items: center; column-gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--foreground); }
.pc-item:hover { background: #F7F9FD; }
.pc-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pc-item.ativo { background: var(--muted); box-shadow: inset 3px 0 0 var(--primary); }
.pc-item .pc-inicial { grid-area: ini; }
.pc-item-texto { grid-area: texto; display: flex; flex-direction: column; min-width: 0; }
.pc-item-texto strong { font-weight: 600; color: var(--tinta); }
.pc-item-texto .ag-nota { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-item > .pc-situacao { grid-area: sit; }
.pc-inicial { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
  border-radius: 50%; background: #E6F0FF; color: #024FBB; font: 600 15px/1 var(--fonte-titulo); }
.pc-inicial-grande { width: 56px; height: 56px; font-size: 24px; }
.pc-situacao { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tom-texto, var(--muted-foreground)); }
.pc-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--tom, var(--muted-foreground)); }
.pc-ficha { min-width: 0; }
.pc-cabeca { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pc-cabeca-texto { min-width: 0; }
.pc-cabeca-texto > h2 { margin: 0; font-size: 22px; }
.pc-cabeca-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; font-size: 13px; }
.pc-ficha .abas { margin: 0 0 16px; }
.pc-area { margin-bottom: 14px; }                        /* a barra da área Agentes IA, igual em toda tela dela */
.pc-area + .ia-volta { margin: 0 0 10px; }
.pc-cabeca .pc-atualizar { margin-left: auto; padding: 4px 10px; font-size: 13px; }
.pc-aba { min-height: 120px; }
.pc-todos td { vertical-align: middle; }
.pc-todos-nome { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); }
.pc-todos-nome strong { font-weight: 600; }
.pc-todos-nome:hover strong { color: var(--primary); }
.pc-todos-partes { white-space: nowrap; }
.pc-todos-partes .link + .link { margin-left: 12px; }
.pc-sem > .aviso { margin-top: 8px; }
@media (max-width: 900px) {
  .pc-agentes { grid-template-columns: minmax(0, 1fr); }
  .pc-coluna { position: static; padding: 12px 8px 8px; }
  .pc-lista { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
  .pc-lista > li { flex: none; }
  .pc-item { min-width: 168px; }
  .pc-item.ativo { box-shadow: inset 0 -3px 0 var(--primary); }
}
@media (max-width: 520px) {
  .pc-ficha { padding: 16px 14px; }
  .pc-ficha .abas, .pc-skill .abas { gap: 14px; }   /* as abas cabem em 390 px */
  .pc-skill .abas { gap: 10px; }                     /* as 5 da skill (com Testar) também */
  .pc-skill .aba { padding-left: 0; padding-right: 0; font-size: 13px; }
  .pc-area { gap: 8px; }                             /* as 6 abas da área (com Squads) também */
  .pc-area .aba { font-size: 13px; }
  .pc-cabeca { align-items: flex-start; flex-wrap: wrap; }
  .pc-inicial-grande { width: 44px; height: 44px; font-size: 19px; }
  .pc-cabeca-texto > h2 { font-size: 18px; }
}
/* ----- fim Agentes (Paperclip) ----- */
/* Aba Agentes, layout de 06/10/2026 (inspirado no Stitch, no padrão do PM Business). No topo de toda tela da área:
   o título, as abas da área na mesma linha e, na aba Agentes, o selo da ligação com o Paperclip e Atualizar. Os
   quatro cartões reaproveitam o número de destaque (.mm-valor/.mm-n); a tabela ganha o endereço no Paperclip, as
   squads (fichas da tela Squads), a situação num selo e as execuções em 14 dias. Só cores que já existem. */
.topo.com-area { justify-content: flex-start; gap: 8px 40px; }
.topo.com-area .pc-area { flex: 0 1 auto; min-width: 0; margin: 0; box-shadow: none; }
.topo.com-area .pc-area .aba { padding-top: 8px; padding-bottom: 8px; }
.topo.com-area + .ia-volta { margin: -8px 0 10px; }
.pc-topo-estado { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pc-conexao { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--fundo); font-size: 12px; font-weight: 600; color: var(--tom-texto); white-space: nowrap; }
.pc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pc-kpi { display: flex; flex-direction: column; min-width: 0; }
.pc-kpi h2 { font-size: 14px; }
.pc-kpi .mm-valor { margin-top: 12px; }
.pc-kpi .mm-n { font-size: 40px; }
a.mm-valor { width: fit-content; color: inherit; text-decoration: none; }
a.mm-valor:hover .mm-n { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
a.mm-valor:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
.pc-kpi-linha { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.pc-kpi-linha .mm-valor { margin-top: 0; }
.pc-kpi-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 8px 0 14px; font-size: 13px; color: var(--muted-foreground); }
.pc-kpi-sub .pc-situacao { font-size: 13px; }
.pc-kpi-sep { margin: 0 8px; color: var(--muted-foreground); }
.pc-kpi-pe { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.pc-kpi-pe.alerta { color: #A11E1E; }
.pc-kpi-pe.alerta a.link-numero { color: #A11E1E; }
.pc-kpi-vazio { margin: 12px 0 0; font-size: 13px; color: var(--muted-foreground); }
.pc-kpi-rostos { list-style: none; display: flex; margin: 0; padding: 0; }
.pc-kpi-rostos li + li { margin-left: -6px; }
.pc-kpi-rostos .pc-inicial { width: 32px; height: 32px; font-size: 13px; text-decoration: none; }
.pc-kpi-rostos .pc-inicial:hover { position: relative; box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--primary); }
.pc-kpi-rostos .pc-inicial:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* a inicial na cor do agente (a mesma da barra do Histórico): fundo claro da cor, aro na cor, letra na tinta */
.pc-inicial-cor { background: color-mix(in srgb, var(--cor-agente) 16%, var(--fundo)); color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cor-agente) 55%, var(--fundo)); }
.pc-kpi-rostos .pc-inicial-cor { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cor-agente) 55%, var(--fundo)), 0 0 0 2px var(--fundo); }
.pc-todos-conta { margin: 0; }
.pc-todos { min-width: 1000px; }
.pc-todos th, .pc-todos td { padding-left: 10px; padding-right: 10px; }
.pc-todos-nome strong { white-space: nowrap; }
.pc-todos td { padding-top: 12px; padding-bottom: 12px; }
.pc-todos-texto { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.pc-todos-chave { font-family: var(--fonte-mono); font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.pc-todos-cargo { max-width: 180px; }
.pc-todos-squads { min-width: 230px; max-width: 330px; line-height: 2; }
.pc-todos-squads .pc-sk-ficha { margin-right: 6px; }
.pc-todos-projeto { font-family: var(--fonte-mono); font-size: 12px; }
a.pc-todos-projeto:hover { border-color: var(--primary); color: var(--primary); }
.pc-todos-mais { font-size: 13px; }
.pc-todos-sem { font-size: 12px; color: var(--muted-foreground); }
.pc-todos-sem:hover { color: var(--primary); }
.pc-pilula { padding: 2px 10px 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tom) 10%, var(--fundo));
  font-weight: 600; white-space: nowrap; }
.pc-todos .pc-todos-n { text-align: right; white-space: nowrap; }
.pc-todos-falta { display: block; font-size: 11px; color: #A11E1E; }
/* Dois Paperclips (08/10/2026): a faixa embaixo das abas da área diz qual Paperclip está sendo visto (nome, no ar,
   versão) e, com dois, o outro vira um botão que troca (formulário, sem JavaScript). Só cores que já existem. */
.topo.com-area .pc-paperclips { order: 10; flex-basis: 100%; }
.pc-paperclips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.pc-paperclips-rotulo { font-family: var(--fonte-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground); }
.pc-paperclip-troca { display: contents; }
.pc-paperclip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--fundo); color: var(--foreground);
  font: inherit; font-size: 13px; text-align: left; }
.pc-paperclip.atual { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
button.pc-paperclip { cursor: pointer; }
button.pc-paperclip:hover { border-color: var(--primary); }
button.pc-paperclip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-paperclip-nome { color: var(--tinta); font-weight: 600; }
.pc-paperclip-versao { font-size: 12px; color: var(--muted-foreground); }
.pc-paperclip-aviso { color: #92660A; }
.pc-paperclip-trocar { font-size: 12px; color: var(--primary); }
@media (max-width: 1240px) {
  .topo.com-area .pc-area { order: 3; flex-basis: 100%; box-shadow: inset 0 -1px 0 var(--border); }
}
@media (max-width: 1100px) { .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pc-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pc-kpi .mm-n { font-size: 34px; }
  .pc-topo-estado { margin-left: 0; }
}


/* --- Frente D: Skills --- */
/* Como no Paperclip: a tela Skills da empresa é uma grade de cartões (3 por linha → 2 → 1 no celular); cada
   cartão tem a inicial na cor da skill (--cor-skill: só as cores das séries, CORES_DA_SKILL em app/regras.py),
   o nome (o link cobre o cartão inteiro), de onde vem, a descrição em 2 linhas e quantos agentes do PM a usam
   (link próprio, por cima do link do cartão). A página da skill reusa o cabeçalho e as abas da ficha do agente. */
.pc-sk-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.pc-sk-cartao { position: relative; display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--fundo); }
.pc-sk-cartao:hover { border-color: var(--primary); }
.pc-sk-cartao:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-sk-inicial { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 10px; background: var(--cor-skill, var(--primary)); color: #fff; font: 600 15px/1 var(--fonte-titulo); }
.pc-sk-inicial-grande { width: 56px; height: 56px; border-radius: 14px; font-size: 24px; }
.pc-sk-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-sk-nome { margin: 0; font: 600 15px/1.3 var(--fonte-texto); color: var(--tinta); overflow-wrap: anywhere; }
.pc-sk-abrir { color: inherit; text-decoration: none; }
.pc-sk-abrir:focus-visible { outline: none; }
.pc-sk-abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* o cartão inteiro abre */
.pc-sk-origem { margin: 0; font-size: 12px; color: var(--muted-foreground); }
.pc-sk-descricao { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--foreground); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.pc-sk-pe { margin: 6px 0 0; font-size: 13px; }
.pc-sk-conta { position: relative; z-index: 1; }                      /* por cima do link do cartão */
.pc-skill .pc-cabeca { margin-bottom: 16px; }
/* Por agente (06/10/2026): uma linha por agente do PM, as skills dele como fichas com o ponto na cor da skill */
.pc-sk-por-agente th[scope="row"] { width: 160px; text-align: left; font-weight: 400; }
.pc-sk-por-agente td { line-height: 2; }
.pc-sk-ficha { display: inline-flex; align-items: center; gap: 6px; margin: 2px 10px 2px 0; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; line-height: 26px; color: var(--foreground);
  white-space: nowrap; }
a.pc-sk-ficha:hover { border-color: var(--primary); color: var(--primary); }
.pc-sk-ficha-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-skill, var(--primary)); }
.pc-skill .abas { margin: 0 0 16px; }
.pc-sk-titulo { display: flex; align-items: center; gap: 4px; margin: 16px 0 8px; font-size: 15px; }
.pc-aba > .pc-sk-titulo:first-child { margin-top: 0; }
.pc-sk-resumo { margin: 0 0 14px; font-size: 14px; color: var(--foreground); }
.pc-sk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-sk-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.pc-sk-agente { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--foreground); }
.pc-sk-agente strong { font-weight: 600; color: var(--tinta); }
.pc-sk-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-sk-texto-lido { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font: inherit; }
.pc-sk-arquivos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; font-size: 13px; }
.pc-sk-arquivos a { display: inline-block; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); }
.pc-sk-arquivos a.ativo { border-color: var(--primary); background: #E6F0FF; color: #024FBB; font-weight: 600; }
.pc-sk-editor textarea { width: 100%; box-sizing: border-box; font-family: var(--fonte-texto); resize: vertical; }
#nova-skill .formulario { border-top: none; padding-top: 0; }
#nova-skill .pc-acao > summary, .pc-sk-editor .pc-acao > summary { display: inline-flex; }
.pc-sk-versoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pc-sk-versoes > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pc-sk-versoes strong { font-weight: 600; color: var(--tinta); }
.pc-sk-adicionar fieldset { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; border: none; }
.pc-sk-adicionar legend { padding: 0; margin-bottom: 6px; }
.pc-sk-marca { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pc-sk-marca strong { font-weight: 600; color: var(--tinta); }
#confirmar .link { margin-left: 12px; font-size: 13px; }
@media (max-width: 1100px) { .pc-sk-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pc-sk-grade { grid-template-columns: minmax(0, 1fr); }
  .pc-sk-item { flex-direction: column; align-items: flex-start; }
  .pc-sk-inicial-grande { width: 44px; height: 44px; font-size: 19px; }
}

/* --- Squads dos agentes (06/10/2026) --- */
/* Agentes IA → Squads: a mesma grade e a mesma página das Skills, com a imagem da squad (avatar_squad) no lugar da
   inicial colorida e as chaves dos projetos em Geist Mono. Por agente: um bloco por agente (nome, estado do squads.md,
   Regravar), as squads como fichas e os projetos sem squad (× tira, com confirmação). Só cores e fontes que existiam. */
.pc-sq-avatar { display: inline-flex; flex: none; }
.pc-sq-avatar .avatar-squad { width: 36px; height: 36px; border-radius: 10px; }
.pc-sq-avatar .tag-squad { min-width: 36px; font-size: 11px; line-height: 36px; text-align: center; border-radius: 10px; }
.pc-sq-avatar-grande .avatar-squad { width: 56px; height: 56px; border-radius: 14px; }
.pc-sq-avatar-grande .tag-squad { min-width: 56px; font-size: 14px; line-height: 56px; border-radius: 14px; }
.pc-sq-projetos { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.pc-sq-chave { font-family: var(--fonte-mono); font-size: 12px; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0.02em; }
.pc-sq-cartao .pc-sk-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pc-sq-agentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-sq-agente { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; scroll-margin-top: 16px; }
.pc-sq-agente-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pc-sq-linhas { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin: 10px 0 0; font-size: 14px; }
.pc-sq-linhas dt { color: var(--muted-foreground); font-size: 13px; line-height: 30px; }
.pc-sq-linhas dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.pc-sq-ficha { gap: 6px; padding-left: 4px; }
.pc-sq-ficha .avatar-squad { width: 18px; height: 18px; border-radius: 50%; }
.pc-sq-avulso { display: inline-block; }
.pc-sq-avulso > summary.pc-sk-ficha { cursor: pointer; }
.pc-sq-avulso > summary.pc-sk-ficha:hover { border-color: var(--primary); color: var(--primary); }
.pc-sq-avulso[open] { flex-basis: 100%; }
.pc-sq-novo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 4px; }
.pc-sq-novo input[type="text"] { width: 90px; padding: 4px 8px; font-family: var(--fonte-mono); font-size: 13px; text-transform: uppercase; }
.pc-sq-novo input[type="text"]::placeholder { text-transform: none; }
.pc-sq-novo .ag-botao { padding: 4px 10px; font-size: 13px; }
#confirmar-avulso .link { margin-left: 12px; font-size: 13px; }
dd > .pc-confirma { flex-basis: 100%; }
.pc-sq-manual { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0 0; }
.pc-sq-manual > p { margin: 0; flex: 1 1 320px; }
.pc-sq-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-sq-botoes .pc-acao[open] { flex-basis: 100%; }
.pc-colar { margin: 12px 0; }
.pc-colar-frase { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--pagina);
  font-size: 14px; user-select: all; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pc-sq-linhas { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pc-sq-linhas dt { line-height: 1.4; margin-top: 6px; }
}

/* --- Frente A --- */
/* Credenciais em três grupos (Configuração → aba Agentes): no Paperclip, conta do Claude dos agentes,
   do PM Business. Só tokens e classes que já existiam (ag-acesso*, ag-nota, ag-botao). */
.cred-grupo { margin-top: 22px; scroll-margin-top: 16px; }
.cartao > .rotulo + .cred-grupo, .cartao > .aviso + .cred-grupo { margin-top: 8px; }
.cred-titulo { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.cred-sub { margin: 2px 0 10px; }
.cred-grupo > .aviso { margin: 8px 0 0; }
.cred-frase { margin: 4px 0 12px; max-width: 80ch; font-size: 14px; }
.cred-frase strong { font-weight: 600; color: var(--tinta); }
.cred-detalhe { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.cred-detalhe a { color: var(--primary); }
.cred-link { margin-top: 8px; }
#cred-claude > form { margin: 0; }
@media (max-width: 520px) {
  .cred-grupo .ag-acesso-linha { grid-template-columns: 24px minmax(0, 1fr); }
  .cred-grupo .ag-acesso-linha > .ag-botao { grid-column: 2; justify-self: start; }
  .cred-grupo .ag-acesso-painel { margin-left: 8px; }
}
/* ----- fim da Frente A ----- */

/* --- Frente E --- Rotinas (/agentes/rotinas; 06/10/2026: agrupadas por agente, com Sem agente no fim)
   Cada rotina é um bloco com a faixa do tom à esquerda (ligada ok, pausada alerta, arquivada neutro),
   o quando em destaque, as últimas execuções numa fila e as ações em painéis que abrem (<details>):
   nada grava no primeiro clique. Só tokens e peças que já existem. */
.pc-rotinas-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 4px 0 4px; }
.pc-rotinas-frase { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 14px; color: var(--muted-foreground); }
.pc-rotinas-pe { margin: 14px 0 0; font-size: 13px; }
.pc-rotinas-filtro { margin: 12px 0 8px; }
.pc-rotinas-filtro .aba { white-space: nowrap; }
.pc-conta { font: 400 12px/1 var(--fonte-texto); color: var(--muted-foreground); }
.pc-rotinas-grupo { margin-top: 22px; }
.pc-rotinas-grupo + .pc-rotinas-grupo { padding-top: 16px; border-top: 1px solid var(--border); }
.pc-rotinas-grupo-titulo { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 600 15px/1.3 var(--fonte-titulo);
  color: var(--tinta); }
.pc-rotinas-grupo-titulo a { color: inherit; }
.pc-rotinas-grupo-titulo a:hover { color: var(--primary); }
.pc-rotinas-grupo > .vazio { margin: 8px 0 0; }
.pc-rotina-sem { color: var(--muted-foreground); font-style: italic; }
@media (max-width: 520px) {
  .pc-rotinas-filtro { flex-wrap: wrap; gap: 0 16px; }      /* em 390 px todos os agentes aparecem, sem rolar */
}
.pc-rotina { margin-top: 12px; padding: 14px 16px 14px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--fundo); box-shadow: inset 3px 0 0 var(--tom, var(--muted-foreground)); scroll-margin-top: 16px; }
.pc-rotina:target { background: #F7F9FD; }
.pc-rotina-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.pc-rotina-cabeca h3 { min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.pc-rotina-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 4px 0 0; font-size: 13px; }
.pc-rotina-descricao { overflow-wrap: anywhere; }
.pc-gatilhos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pc-gatilhos strong { font-weight: 600; color: var(--tinta); }
.pc-execucoes { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pc-rotina-sub { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; font: 600 11px/1.3 var(--fonte-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.pc-execucoes .vazio { margin: 0; font-size: 13px; }
.pc-execucoes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pc-execucoes-lista > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pc-execucao-quando { min-width: 7.5em; color: var(--foreground); }
.pc-rotina-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.pc-acao > summary { list-style: none; }
.pc-acao > summary::-webkit-details-marker { display: none; }
.pc-acao > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-acao[open] > summary { background: var(--muted); border-color: transparent; color: var(--tinta); }
.pc-acao[open] { flex-basis: 100%; }
.pc-confirma { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--pagina); font-size: 13px; }
.pc-confirma > p { margin: 0 0 10px; }
.pc-confirma.formulario { margin-top: 8px; padding: 12px 14px; border-top: none; }
.pc-confirma.formulario > p { margin: 0; }
.pc-confirma.formulario > .botao-primario { grid-column: 1 / -1; }
.pc-nova[open] { flex-basis: 100%; }
.pc-nova > .formulario textarea { resize: vertical; }
.pc-quando { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); min-width: 0; }
.pc-quando > legend { padding: 0 4px; font-size: 12px; color: var(--muted-foreground); }
.pc-quando > .ag-nota { margin: 0; }
.pc-quando-modos { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.formulario .pc-opcao { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--foreground); }
.formulario .pc-opcao input { padding: 0; }
.pc-quando-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; }
.pc-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-dias > .ag-nota { flex-basis: 100%; }
.formulario .pc-dia { flex-direction: row; cursor: pointer; }
.pc-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-dia span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--fundo); font-size: 13px; color: var(--foreground); }
.pc-dia:hover span { border-color: var(--muted-foreground); }
.pc-dia input:checked + span { background: #E6F0FF; border-color: var(--primary); color: #024FBB; font-weight: 600; }
.pc-dia input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 720px) {
  .pc-rotina { padding: 12px 12px 12px 14px; }
  .pc-execucao-quando { min-width: 0; }
  .pc-acao, .pc-acao > summary { flex-basis: auto; }
}
/* --- fim Frente E --- */

/* --- Frente B: Instruções + Histórico ---
   A aba Instruções: a lista dos arquivos do agente (como os "Files" do Paperclip) e, embaixo, o
   arquivo aberto (lido como documento), a caixa de edição (grande, letra de código para o
   markdown) ou a diferença: só as linhas que mudaram, em vermelho o que sai e em verde o que
   entra (as cores de alerta e de ok do padrão). A aba Histórico: a tabela zebra + a mesma diferença. */
.pc-aba-titulo { font-size: 16px; }
.pc-aba-frase { margin: 4px 0 12px; }
.pc-arquivos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pc-arquivo { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--fundo); min-width: 0; }
a.pc-arquivo:hover { border-color: var(--primary); background: #F7F9FD; }
a.pc-arquivo:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pc-arquivo.ativo { border-color: var(--primary); background: var(--muted); box-shadow: inset 3px 0 0 var(--primary); }
.pc-arquivo-nome { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.pc-arquivo-grande { background: var(--pagina); border-style: dashed; }
.pc-arquivo-grande .pc-arquivo-nome { color: var(--muted-foreground); font-weight: 500; }
.pc-principal { color: var(--primary); font-weight: 600; }
.pc-arquivo-painel { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.pc-arquivo-cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.pc-arquivo-cabeca h4 { margin: 0; font-size: 15px; color: var(--tinta); overflow-wrap: anywhere; }
.pc-arquivo-cabeca p { margin: 2px 0 0; }
.pc-arquivo-painel > .aviso { margin-bottom: 12px; }

/* o arquivo lido como documento (markdown escapado de app/telas/pc_texto.py) */
.pc-md { font-size: 14px; line-height: 1.6; color: var(--foreground); overflow-wrap: anywhere; }
.pc-md > :first-child { margin-top: 0; }
.pc-md .pc-md-titulo { margin: 22px 0 6px; font-family: var(--fonte-texto); font-weight: 700; color: var(--tinta); letter-spacing: 0; }
.pc-md h3.pc-md-titulo { font-size: 19px; }
.pc-md h4.pc-md-titulo { font-size: 16px; }
.pc-md h5.pc-md-titulo, .pc-md h6.pc-md-titulo { font-size: 14px; }
.pc-md p { margin: 8px 0; }
.pc-md hr { margin: 18px 0; border: none; border-top: 1px solid var(--border); }
.pc-md code { padding: 1px 5px; border-radius: 4px; background: var(--muted); font: 12.5px/1.4 var(--fonte-mono); color: var(--tinta); }
.pc-md-codigo { margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: var(--pagina); border: 1px solid var(--border);
  overflow-x: auto; white-space: pre; }
.pc-md-codigo code { padding: 0; background: none; font-size: 12.5px; line-height: 1.5; }
.pc-md-lista { list-style: none; margin: 6px 0; padding: 0; }
.pc-md-item { display: flex; gap: 8px; margin: 3px 0; }
.pc-md-marca { flex: none; min-width: 14px; color: var(--muted-foreground); }
.pc-md-nivel-1 { padding-left: 22px; }
.pc-md-nivel-2 { padding-left: 44px; }
.pc-md-nivel-3, .pc-md-nivel-4 { padding-left: 66px; }
.pc-md-citacao { margin: 8px 0; padding: 4px 14px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
.pc-md-rola { margin: 10px 0; overflow-x: auto; }
.pc-md-tabela { font-size: 13px; width: auto; min-width: 60%; }
.pc-md-tabela th, .pc-md-tabela td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.pc-md-tabela th { background: var(--pagina); font-weight: 600; color: var(--tinta); }
.pc-md-link { color: var(--tinta); text-decoration: underline dotted; text-underline-offset: 3px; }
.pc-md-url { color: var(--muted-foreground); font-size: 12px; }
.pc-texto { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--pagina); white-space: pre-wrap;
  overflow-wrap: anywhere; font: 13px/1.6 var(--fonte-mono); color: var(--foreground); }

/* editar: a caixa grande */
.pc-editar { display: flex; flex-direction: column; gap: 8px; }
.pc-caixa { box-sizing: border-box; width: 100%; height: 70vh; min-height: 420px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); color: var(--foreground);
  font: 13px/1.55 var(--fonte-mono); tab-size: 4; }
.pc-caixa:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.pc-caixa-baixa { height: 240px; min-height: 160px; margin-top: 8px; background: var(--pagina); }
.pc-editar .acoes, .pc-gravar .acoes { margin-top: 2px; }
.pc-gravar { margin-top: 14px; }
.pc-gravar > .ag-nota, .pc-editar > .ag-nota { margin: 0; }
.pc-seu-texto { margin: 12px 0; }
.pc-seu-texto > summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 13px; }
.pc-seu-texto + .acoes { margin: 0 0 16px; }

/* a diferença: só o que mudou, com 3 linhas iguais em volta */
.pc-dif-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; font-weight: 600; color: var(--tinta); }
.pc-dif-resumo .ag-nota { font-weight: 400; }
.pc-dif { display: flex; flex-direction: column; gap: 12px; }
.pc-dif-bloco { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pc-dif-onde { margin: 0; padding: 5px 12px; background: var(--pagina); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--muted-foreground); }
.pc-dif-linhas { list-style: none; margin: 0; padding: 0; font: 12.5px/1.55 var(--fonte-mono); }
.pc-dif-linha { display: grid; grid-template-columns: 44px 18px minmax(0, 1fr); }
.pc-dif-num { padding: 1px 8px 1px 0; text-align: right; color: var(--muted-foreground); user-select: none; }
.pc-dif-sinal { text-align: center; user-select: none; font-weight: 700; }
.pc-dif-texto { padding: 1px 10px 1px 2px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.55em; }
.pc-dif-igual { color: var(--muted-foreground); }
.pc-dif-saiu { background: color-mix(in srgb, var(--destructive) 9%, transparent); color: #A11E1E; }
.pc-dif-entrou { background: color-mix(in srgb, var(--success) 12%, transparent); color: #146C33; }
.pc-dif-saiu mark { background: color-mix(in srgb, var(--destructive) 26%, transparent); color: inherit; border-radius: 2px; }
.pc-dif-entrou mark { background: color-mix(in srgb, var(--success) 32%, transparent); color: inherit; border-radius: 2px; }

/* Histórico */
/* position: relative prende o .ag-oculto (position: absolute) da tabela dentro da rolagem dela: sem
   isso ele escapa e alarga a página no celular */
.pc-rola { overflow-x: auto; position: relative; }
.pc-historico td { vertical-align: top; }
.pc-historico tr.ativo { background: var(--muted); }
.pc-hist-tipo { font-weight: 600; color: var(--tinta); }
@media (max-width: 640px) {
  .pc-arquivos { grid-template-columns: minmax(0, 1fr); }
  .pc-caixa { height: 60vh; min-height: 320px; }
  .pc-dif-linha { grid-template-columns: 34px 14px minmax(0, 1fr); }
}
/* --- fim Frente B --- */

/* --- Aba Configuração do agente (06/10/2026) ---
   Três blocos lado a lado (modelo, tempo, passos: valor de agora + campo + "Ver o que muda"), um por linha no
   celular; embaixo as credenciais (tabela zebra), os ajustes só de leitura e as versões do Paperclip. O painel de
   confirmação reaproveita .pc-arquivo-painel/.pc-confirma. Só cores e fontes que já existem. */
.pc-config-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pc-config-bloco { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--fundo); }
.pc-config-sub { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
.pc-config-valor { margin: 0; font-size: 15px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.pc-config-form { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
.pc-config-form select, .pc-config-form input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--fundo); color: var(--foreground); font: inherit; font-size: 14px; min-width: 0; }
.pc-config-form select:focus, .pc-config-form input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.pc-config-form .ag-botao { align-self: flex-start; }
.pc-config-secao { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.pc-config-secao > .pc-config-sub { margin-bottom: 10px; }
.pc-config-secao > .pc-acao { margin-top: 10px; }
.pc-config-variavel { padding: 1px 5px; border-radius: 4px; background: var(--muted); font: 12.5px/1.4 var(--fonte-mono);
  color: var(--tinta); overflow-wrap: anywhere; }
.pc-config-acao { text-align: right; white-space: nowrap; }
.pc-config-acao form { display: inline; }
.pc-config-fixos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 0; }
.pc-config-fixos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-config-fixos dt { font-size: 12px; color: var(--muted-foreground); }
.pc-config-fixos dd { margin: 0; font-size: 14px; color: var(--foreground); }
.pc-config-fixos strong { color: var(--tinta); }
.pc-config-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-versao { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--fundo); min-width: 0; }
.pc-config-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pc-config-linha > p { margin: 0; font-size: 14px; color: var(--tinta); }
.pc-config-mudancas { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--foreground); overflow-wrap: anywhere; }
.pc-config-dif { margin-top: 6px; font-size: 13px; }
.pc-config-dif > summary { cursor: pointer; display: inline-block; }
.pc-config-dif table { margin-top: 6px; }
.pc-config-dif td { overflow-wrap: anywhere; }
.pc-config-painel { margin: 0 0 16px; }
.pc-config-painel > .pc-config-sub { margin-bottom: 8px; }
.pc-config-painel .pc-config-mudancas { margin-bottom: 10px; }
@media (max-width: 720px) {
  .pc-config-grade { grid-template-columns: minmax(0, 1fr); }
  .pc-config-acao { white-space: normal; }
}
/* --- fim da aba Configuração --- */

/* --- Histórico de execuções (aba Agentes, /agentes; 06/10/2026) ---
   Os 14 dias numa lista (.pc-exec-dias), fechados; o dia aberto (?dia=) mostra uma "tabela" de <details>
   (.pc-exec-tabela: cada <summary> é uma linha em grade, o resumo abre embaixo). Rola dentro de .pc-rola no
   celular. Só peças, fontes e cores que já existem: chave de ticket em Geist Mono e azul (link do Jira). */
.pc-exec-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13px; }
.pc-exec-filtro select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--fundo); }
.pc-exec-nota { margin: 0 0 8px; }
.pc-exec-dias { list-style: none; margin: 0; padding: 0; }
.pc-exec-dia { border-top: 1px solid var(--border); }
.pc-exec-dia:last-child { border-bottom: 1px solid var(--border); }
.pc-exec-dia-linha { display: grid; grid-template-columns: 8em 8.5em minmax(0, 1fr) auto; grid-template-areas: "nome conta meio ver";
  align-items: center; gap: 6px 16px; padding: 11px 6px; font-size: 14px; }
.pc-exec-dia:not(.aberto) .pc-exec-dia-linha:hover { background: #F7F9FD; }
.pc-exec-dia-nome { grid-area: nome; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinta); text-decoration: none; }
a.pc-exec-dia-nome:hover { color: var(--primary); }
.pc-exec-sem { font-weight: 400; color: var(--muted-foreground); }
.pc-exec-seta { display: inline-block; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transform: translateY(-1px); transition: transform 0.15s; }
.pc-exec-dia.aberto .pc-exec-seta { transform: translateY(-1px) rotate(90deg); }
.pc-exec-sem .pc-exec-seta { opacity: 0.35; }
.pc-exec-sep { color: var(--muted-foreground); }
.pc-exec-ag { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); text-decoration: none; }
.pc-exec-ag .link-numero { color: var(--tinta); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(2, 109, 252, 0.35); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pc-exec-ag:hover .link-numero { color: var(--primary); text-decoration-color: var(--primary); }
.pc-exec-dia.aberto { padding-bottom: 12px; }
.pc-exec-dia.aberto > .pc-exec-dia-linha { background: var(--muted); border-radius: 6px; }
.pc-exec-tabela { min-width: 760px; margin-top: 8px; font-size: 13px; }
.pc-exec-linha { display: grid; grid-template-columns: 58px 72px 92px 130px minmax(180px, 1fr) 170px; align-items: baseline;
  gap: 10px; padding: 7px 8px; }
.pc-exec-cabeca { font-family: var(--fonte-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.pc-exec { border-bottom: 1px solid var(--border); }
.pc-exec > summary { list-style: none; border-radius: 6px; }
.pc-exec > summary::-webkit-details-marker { display: none; }
.pc-exec > summary:hover { background: #F7F9FD; }
.pc-exec > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-exec[open] > summary { background: var(--muted); }
.pc-exec-hora { font-weight: 600; color: var(--tinta); }
.pc-exec-tickets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pc-exec-chave { font-family: var(--fonte-mono); font-size: 12px; color: var(--primary); text-decoration: none; }
.pc-exec-chave:hover { text-decoration: underline; }
.pc-exec-detalhe { padding: 8px 12px 14px 76px; max-width: 110ch; }
.pc-exec-detalhe p { margin: 0 0 8px; }
.pc-exec-detalhe .ag-nota { margin-right: 6px; }
.pc-exec-resumo { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--foreground); }
.pc-exec-paginas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
@media (max-width: 640px) {
  .pc-exec-dia-nome { min-width: 0; }
  /* a linha rola de lado, mas o resumo fica na largura da tela (preso à esquerda), sem rolar para ler */
  .pc-exec-detalhe { position: sticky; left: 0; box-sizing: border-box; width: calc(100vw - 80px); padding-left: 12px; }
}
/* Linhas do dia (06/10/2026, inspiradas no Stitch): data e dia da semana, o total num selo (abre o dia), a barra
   empilhada por agente (a cor de cada um vem de AGENTE_COR; o comprimento é o total diante do dia mais cheio), o
   número de cada agente e "Ver detalhes". A faixa do topo junta o aviso do limite de 1000 e a legenda das cores. */
.pc-exec-cabeca-cartao { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; }
.pc-exec-cabeca-cartao > div { flex: 1 1 380px; min-width: 0; }
.pc-exec-cabeca-cartao .ia-sub-nota { margin: 4px 0 0; }
.pc-exec-cabeca-cartao .pc-exec-filtro { margin: 2px 0 0; }
.pc-exec-campo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pc-exec-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  margin: 14px 0 6px; padding: 8px 12px; border-radius: 8px; background: var(--muted); font-size: 12px; color: var(--muted-foreground); }
.pc-exec-faixa .pc-exec-nota { margin: 0; }
.pc-exec-faixa-notas:empty { display: none; }
.pc-exec-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 0 auto; padding: 0; color: var(--foreground); }
.pc-exec-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.pc-exec-ponto { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--cor-agente, var(--muted-foreground)); }
.pc-exec-data { display: flex; flex-direction: column; line-height: 1.2; }
.pc-exec-semana { font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.pc-exec-conta { grid-area: conta; justify-self: start; padding: 3px 10px; border-radius: 999px; background: #E6F0FF; color: #024FBB;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.pc-exec-conta:hover { background: var(--primary); color: #fff; }
a.pc-exec-conta:focus-visible, .pc-exec-ver:focus-visible, .pc-exec-ag:focus-visible, a.pc-exec-dia-nome:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.pc-exec-conta-zero { background: none; padding-left: 10px; color: var(--muted-foreground); font-weight: 400; }
.pc-exec-meio { grid-area: meio; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-exec-trilho { height: 10px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.pc-exec-dia.aberto .pc-exec-trilho { background: var(--fundo); }
.pc-exec-barra { display: flex; gap: 2px; height: 100%; min-width: 6px; border-radius: 999px; overflow: hidden; }
.pc-exec-parte { flex-basis: 0; min-width: 3px; background: var(--cor-agente); }
.pc-exec-contas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; font-size: 13px; }
.pc-exec-falta { font-size: 12px; color: #A11E1E; }
.pc-exec-ver { grid-area: ver; justify-self: end; font-size: 13px; white-space: nowrap; }
.vazio-dia .pc-exec-dia-linha { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 760px) {
  .pc-exec-dia-linha { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nome conta ver" "meio meio meio"; gap: 8px 12px; }
  .pc-exec-cabeca-cartao .pc-exec-filtro { flex-basis: 100%; }
}
/* --- fim do Histórico de execuções --- */

/* --- Testar agente (aba Testar da página do agente, 06/10/2026; refeita no mesmo dia): o campo do ticket, a
   confirmação (reaproveita .pc-arquivo-painel/.pc-confirma) e só o último teste — o comentário num cartão como o
   do Jira (.jira-comentario; o corpo vem de app/telas/adf_html.py) e o que mudaria no ticket (.jira-mudancas).
   Só cores e fontes que já existem. --- */
.pc-teste-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 0 0 16px; }
.pc-teste-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.pc-teste-form select { max-width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--foreground); background: var(--fundo); }
.pc-teste-form select:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.pc-teste-skills-erro { margin: -8px 0 16px; }
.pc-teste-skill { color: var(--muted-foreground); overflow-wrap: anywhere; }
.pc-teste-skill strong { font-weight: 600; color: var(--tinta); }
.pc-teste-form input[type="text"] { width: 12em; max-width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font: 600 14px/1.3 var(--fonte-mono); color: var(--tinta); background: var(--fundo);
  text-transform: uppercase; }
.pc-teste-form input[type="text"]::placeholder { text-transform: none; font-family: var(--fonte-texto); font-weight: 400; }
.pc-teste-form input[type="text"]:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.pc-teste-form .botao-primario { margin: 0; padding: 8px 18px; }
.pc-teste-painel { margin-bottom: 8px; }
.pc-teste-ticket { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 16px; margin: 0 0 8px;
  font-size: 13px; }
.pc-teste-ticket > div:first-child { grid-column: 1 / -1; }
.pc-teste-ticket dt { font: 10px/1.4 var(--fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.pc-teste-ticket dd { margin: 0; overflow-wrap: anywhere; }
.pc-teste-titulo-tarefa { margin: 8px 0 4px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.pc-teste-tarefa { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; border: 1px solid var(--border);
  border-radius: 8px; background: var(--pagina); font: 12px/1.5 var(--fonte-mono); color: var(--foreground);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-teste-vivo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; color: var(--tom-texto); }
.pc-teste-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; font-size: 13px; }
.pc-teste-quando { min-width: 6.5em; font-weight: 600; color: var(--tinta); }
.pc-teste-por { margin-left: auto; }
.pc-teste-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.pc-teste-comentario { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); }
.pc-teste-problemas { font-size: 12px; color: var(--muted-foreground); }
.pc-teste-decisao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0; padding: 10px 14px;
  border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; background: var(--muted); font-weight: 600;
  color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-teste-rotulo { font: 400 10px/1.4 var(--fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.pc-teste-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 14px; font-size: 13px; }

/* o comentário como o Jira desenha: avatar redondo com as iniciais, autor em negrito, "agora" em cinza e o corpo
   (14px, entrelinha folgada) — títulos, tópicos em negrito, listas, links, menções, código, painéis, tabelas */
.jira-comentario { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); }
.jira-comentario-conteudo { min-width: 0; flex: 1; }
.jira-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--primary); color: var(--fundo); font-size: 12px; font-weight: 700; flex: none; }
.jira-comentario-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; line-height: 32px; }
.jira-autor { font-size: 14px; font-weight: 600; color: var(--foreground); }
.jira-quando { font-size: 14px; color: var(--muted-foreground); }
.jira-corpo { margin-top: 2px; font-size: 14px; line-height: 1.714; color: var(--foreground);
  overflow-wrap: anywhere; }
.jira-corpo > :first-child { margin-top: 0; }
.jira-corpo > :last-child { margin-bottom: 0; }
.jira-corpo p { margin: 0.75rem 0 0; }
.jira-corpo p.jira-vazio { min-height: 1.714em; }
.jira-corpo .jira-titulo { margin: 1.4em 0 0; font-family: var(--fonte-texto); font-weight: 600; letter-spacing: 0; color: var(--foreground); line-height: 1.3; }
.jira-corpo .jira-h1 { font-size: 24px; }
.jira-corpo .jira-h2 { font-size: 20px; }
.jira-corpo .jira-h3 { font-size: 16px; }
.jira-corpo .jira-h4 { font-size: 14px; }
.jira-corpo .jira-h5 { font-size: 12px; }
.jira-corpo .jira-h6 { font-size: 11px; color: var(--muted-foreground); }
.jira-corpo strong { font-weight: 700; }
.jira-link { color: var(--primary); text-decoration: none; }
.jira-link:hover { text-decoration: underline; }
.jira-code { padding: 2px 4px; border-radius: 3px; background: var(--muted); font: 12px/1.5 var(--fonte-mono); color: var(--foreground); }
.jira-lista { margin: 0.75rem 0 0; padding-left: 24px; }
.jira-lista li { margin-top: 4px; }
.jira-lista li > p:first-child { margin-top: 0; }
.jira-lista .jira-lista { margin-top: 4px; }
.jira-citacao { margin: 0.75rem 0 0; padding-left: 16px; border-left: 2px solid var(--border); color: var(--foreground); }
.jira-bloco-codigo { margin: 0.75rem 0 0; padding: 8px 12px; border-radius: 3px; background: var(--pagina);
  font: 12px/1.5 var(--fonte-mono); color: var(--foreground); overflow-x: auto; white-space: pre; }
.jira-corpo hr { margin: 1.2em 0; border: none; border-top: 2px solid var(--border); }
.jira-painel { display: flex; gap: 10px; margin: 0.75rem 0 0; padding: 8px 12px; border-radius: 3px; }
.jira-painel-corpo { min-width: 0; flex: 1; }
.jira-painel-corpo > p:first-child { margin-top: 0; }
.jira-painel-icone { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-top: 3px; border-radius: 50%; color: var(--fundo); font-size: 11px; font-weight: 700; flex: none; }
.jira-painel-info { background: #E6F0FF; }
.jira-painel-info .jira-painel-icone { background: #024FBB; }
.jira-painel-note { background: #EFE6FF; }
.jira-painel-note .jira-painel-icone { background: #5B21B6; }
.jira-painel-warning { background: #FFF7E8; }
.jira-painel-warning .jira-painel-icone { background: #92660A; }
.jira-painel-success { background: #E7F9EE; }
.jira-painel-success .jira-painel-icone { background: #146C33; }
.jira-painel-error { background: #FBE9E9; }
.jira-painel-error .jira-painel-icone { background: #A11E1E; }
.jira-mencao { display: inline-block; padding: 0 5px; border-radius: 20px; background: var(--muted); color: var(--foreground);
  font-size: 13px; line-height: 1.5; white-space: nowrap; }
.status-jira.jira-lozenge-vermelho { background: #FBE9E9; color: #A11E1E; }
.status-jira.jira-lozenge-amarelo { background: #FFF7E8; color: #92660A; }
.status-jira.jira-lozenge-roxo { background: #EFE6FF; color: #5B21B6; }
.jira-tabela { margin: 0.75rem 0 0; border-collapse: collapse; font-size: 14px; }
.jira-tabela th, .jira-tabela td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.jira-tabela th { background: var(--pagina); font-weight: 600; }
.jira-tabela p:first-child { margin-top: 0; }
.jira-expandir { margin: 0.75rem 0 0; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--border); }
.jira-expandir > summary { cursor: pointer; font-size: 14px; color: var(--foreground); }
.jira-midia { display: inline-block; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 3px; font-size: 12px;
  color: var(--muted-foreground); }
.jira-midias { margin: 0.75rem 0 0; }

/* o que mudaria no ticket, como o Jira mostra: etiquetas cinzas, status em etiqueta da categoria, tipo com ícone */
.jira-mudancas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; max-width: 760px;
  font-size: 14px; }
.jira-mudancas > div { display: contents; }
.jira-mudancas dt { padding-top: 2px; font: 10px/1.8 var(--fonte-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground); }
.jira-mudancas dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.jira-mudancas dd.jira-campo, .jira-mudancas dd:has(.jira-tarefa-titulo) { display: block; }
.jira-etiqueta { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--muted); font-size: 12px; line-height: 20px; color: var(--foreground); }
.jira-etiqueta-sinal { font-weight: 700; }
.jira-etiqueta-entra .jira-etiqueta-sinal { color: #146C33; }
.jira-etiqueta-sai { text-decoration: line-through; color: var(--muted-foreground); }
.jira-etiqueta-sai .jira-etiqueta-sinal { color: #A11E1E; text-decoration: none; }
.jira-seta { color: var(--muted-foreground); }
.jira-tipo, .jira-pessoa { display: inline-flex; align-items: center; gap: 6px; }
.jira-avatar-pequeno { width: 24px; height: 24px; font-size: 10px; }
.jira-tarefa-titulo { margin: 0; }
.jira-tarefa-resumo { margin: 4px 0 0; color: var(--muted-foreground); white-space: pre-wrap; }
@media (max-width: 640px) {
  .pc-teste-por { margin-left: 0; flex-basis: 100%; }
  .jira-comentario { padding: 12px; column-gap: 10px; }
  .jira-mudancas { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .jira-mudancas dd { margin-bottom: 8px; }
}
/* --- fim do Testar agente --- */

/* --- Layout Skills --- */
/* Agentes IA → Skills (06/10/2026; enxugado no mesmo dia), no jeito do Stitch com o nosso Design System: um cartão
   no alto com o título, a linha de baixo (.area-sub) e a última alteração, a barra de filtros (abas em pílula com a
   contagem) com a busca e Atualizar, os cartões em coluna (inicial + nome + de onde vem, a descrição em 2 linhas, o
   pé com os agentes e Vincular), a matriz Por agente (uma linha por agente) e, embaixo, Nova skill e o Histórico
   lado a lado. Só fontes e cores que já existiam (as séries de CORES_DA_SKILL repetidas aqui para a matriz e o
   Histórico, que ficam fora da .pc-sk-grade). Escopo em .pc-sk-catalogo: a tela Squads usa a mesma grade antiga. */

/* A linha sob o título da área Agentes IA (Skills, Credenciais, Rotinas): uma frase curta; o resto fica no "?". */
.area-sub { margin: 4px 0 0; max-width: 90ch; font-size: 14px; line-height: 1.5; color: var(--muted-foreground); }

.pc-sk-matriz, .pc-sk-auditoria {          /* as mesmas séries de .grafico-linhas (as cores das skills) */
  --serie-total: #333232; --serie-triagem: #2a78d6; --serie-bug: #eb6834; --serie-ajuste-bd: #1baf7a; --serie-ocorrencia: #eda100;
}
.pc-sk-ultima { margin: 6px 0 0; font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.pc-sk-ultima .link { font-weight: 600; }
.pc-sem .area-sub { margin-bottom: 12px; }
.pc-sem .pc-sk-atualizar { margin-top: 12px; }

.pc-sk-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--border); }
.pc-sk-filtros { display: flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 10px; background: var(--muted);
  overflow-x: auto; scrollbar-width: none; }
.pc-sk-filtros::-webkit-scrollbar { display: none; }
.pc-sk-filtro { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 8px;
  font-size: 13px; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.pc-sk-filtro:hover { color: var(--tinta); }
.pc-sk-filtro.ativo { background: var(--fundo); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(10, 22, 80, 0.08); }
.pc-sk-filtro:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pc-sk-filtro-n { padding: 0 7px; border-radius: 999px; background: var(--fundo); font-size: 11px; font-weight: 600;
  line-height: 18px; color: var(--tinta); }
.pc-sk-filtro.ativo .pc-sk-filtro-n { background: #E6F0FF; color: #024FBB; }
.pc-sk-acoes { display: flex; align-items: center; gap: 8px; flex: 0 1 400px; min-width: 0; }
.pc-sk-busca { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pc-sk-busca input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--fundo); color: var(--foreground); font: inherit; font-size: 13px; }
.pc-sk-busca input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.pc-sk-cabeca h2 { margin: 0; }
.pc-sk-achadas, .pc-sk-recorte { margin: 4px 0 0; font-size: 13px; }
.pc-sk-para { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #E6F0FF; box-shadow: inset 3px 0 0 var(--primary); }
.pc-sk-para p { margin: 0; font-size: 13px; color: var(--foreground); }
.pc-sk-para strong { color: var(--tinta); }
.pc-sk-para .link { font-size: 13px; }

.pc-sk-catalogo .pc-sk-cartao { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
.pc-sk-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-sk-catalogo .pc-sk-corpo { gap: 4px; align-items: flex-start; }
.pc-sk-chip { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: #E6F0FF; color: #024FBB;
  font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.pc-sk-chip-pc { background: var(--muted); color: var(--muted-foreground); }
.pc-sk-catalogo .pc-sk-descricao { margin: 0; min-height: calc(2 * 1.45em); color: var(--muted-foreground); }
.pc-sk-catalogo .pc-sk-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin: auto 0 0;
  padding-top: 10px; border-top: 1px solid var(--border); }
.pc-sk-quem-usa { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  min-width: 0; margin: 0; font-size: 12px; }
.pc-sk-ninguem { color: var(--muted-foreground); }
.pc-sk-agente-ficha { padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; line-height: 20px;
  color: var(--foreground); text-decoration: none; }
.pc-sk-agente-ficha:hover { border-color: var(--primary); color: var(--primary); }
.pc-sk-vincular { position: relative; z-index: 1; padding: 4px 12px; font-size: 12px; }

.pc-sk-matriz { list-style: none; margin: 12px 0 0; padding: 0; }
.pc-sk-linha { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto; align-items: center; gap: 10px 20px;
  padding: 12px 0; border-top: 1px solid var(--border); }
.pc-sk-linha:first-child { border-top: none; }
.pc-sk-quem { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--foreground); text-decoration: none; }
.pc-sk-quem strong { font-weight: 600; color: var(--tinta); }
.pc-sk-quem:hover strong { color: var(--primary); }
.pc-sk-fichas { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.pc-sk-sem-skill { display: inline-flex; padding: 0 10px; border: 1px dashed var(--border); border-radius: 999px;
  font-size: 12px; line-height: 26px; color: var(--muted-foreground); }
.pc-sk-mais { padding: 4px 12px; font-size: 12px; }

.pc-sk-baixo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.pc-sk-nova-abre { margin-top: 12px; }
.pc-sk-nova-abre > summary { display: inline-flex; list-style: none; }
.pc-sk-nova-abre > summary::-webkit-details-marker { display: none; }
.pc-sk-nova-abre[open] > summary { background: var(--muted); border-color: transparent; color: var(--tinta); }
.pc-sk-nova-abre .formulario { margin-top: 12px; }
.pc-sk-auditoria { list-style: none; margin: 12px 0 0; padding: 0; }
.pc-sk-aud { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px;
  padding: 10px 8px; border-top: 1px solid var(--border); }
.pc-sk-aud:first-child { border-top: none; }
.pc-sk-aud.ativo { background: var(--muted); border-radius: 10px; }
.pc-sk-inicial-mini { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.pc-sk-aud-texto { min-width: 0; }
.pc-sk-aud-texto p { margin: 0; }
.pc-sk-aud-linha { font-size: 13px; color: var(--foreground); overflow-wrap: anywhere; }
.pc-sk-aud-linha strong { font-weight: 600; color: var(--tinta); }
.pc-sk-aud .link { font-size: 13px; }
#mudanca.cartao { margin-top: 0; border-top: 1px solid var(--borda-cartao); }

@media (max-width: 1100px) { .pc-sk-baixo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pc-sk-filtros { flex-wrap: wrap; }
  .pc-sk-acoes { flex-basis: 100%; }
  .pc-sk-linha { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pc-sk-mais { justify-self: start; }
  .pc-sk-aud { grid-template-columns: 28px minmax(0, 1fr); }
  .pc-sk-aud > .pc-situacao, .pc-sk-aud > .link { grid-column: 2; justify-self: start; }
}
/* --- fim do Layout Skills --- */

/* --- Layout Rotinas --- (06/10/2026, inspirado no Stitch, no padrão do PM Business)
   /agentes/rotinas: quatro cartões de número (o número de destaque .mm-n, que abre a lista: link ou <details>),
   a barra com o título + a linha .area-sub, as fichas por agente + busca + situação + Atualizar, um cartão por
   rotina (inicial na cor do agente, pílulas de quando roda, o texto da rotina em duas linhas corridas com "ver
   tudo", as execuções numa linha que abre os quadrinhos e as ações) e os agentes sem rotina ligada. Só fontes e cores que já existem:
   as cores dos agentes são as do mapa (AGENTE_COR → --serie-*, os mesmos valores do bloco do gráfico). */
.pc-rt-kpis, .pc-rt-lista, .pc-rt-sem { --serie-bug: #eb6834; --serie-ajuste-bd: #1baf7a; --serie-ocorrencia: #eda100; }


/* os quatro cartões */
.pc-rt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pc-rt-kpis:has(.pc-rt-abre[open]) { align-items: start; }    /* a lista aberta não estica os outros cartões */
.pc-rt-kpi { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; }
.pc-rt-kpi h2 { font-size: 14px; }
.pc-rt-kpi > :nth-last-child(2) { margin-bottom: 14px; }
.pc-rt-kpi-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.pc-rt-valor .mm-n { font-size: 40px; }
a.pc-rt-valor { width: fit-content; color: inherit; text-decoration: none; }
a.pc-rt-valor:hover .mm-n, .pc-rt-abre > summary:hover .mm-n { color: var(--primary); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 5px; }
a.pc-rt-valor:focus-visible, .pc-rt-abre > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
.pc-rt-selo { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #E6F0FF;
  color: #024FBB; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pc-rt-selo.ag-tom-ok, .pc-rt-selo.ag-tom-ruim { background: color-mix(in srgb, var(--tom) 12%, var(--fundo)); color: var(--tom-texto); }
.pc-rt-kpi-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 10px 0 0; font-size: 13px; color: var(--muted-foreground); }
.pc-rt-sep { margin: 0 8px; }
.pc-rt-kpi-rotina { font-size: 14px; }
.pc-rt-kpi-rotina .link, .pc-rt-kpi-pe .link { color: var(--tinta); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pc-rt-kpi-rotina .link:hover, .pc-rt-kpi-pe .link:hover { color: var(--primary); text-decoration: underline; opacity: 1; }
.pc-rt-kpi-pe { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.pc-rt-kpi-vazio { margin: 14px 0 0; font-size: 13px; color: var(--muted-foreground); }
.pc-rt-kpi-tipos { display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; color: var(--muted-foreground); }
.pc-rt-abre > summary { list-style: none; cursor: pointer; }
.pc-rt-abre > summary::-webkit-details-marker { display: none; }
.pc-rt-abre-seta { width: 0; height: 0; border-left: 5px solid var(--muted-foreground); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform 0.15s ease; }
.pc-rt-abre > summary:hover .pc-rt-abre-seta { border-left-color: var(--primary); }
.pc-rt-abre[open] .pc-rt-abre-seta { transform: rotate(90deg); }
.pc-rt-kpi-lista { list-style: none; display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto;
  margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--border); font-size: 12px; }
.pc-rt-kpi-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.35; }
.pc-rt-kpi-lista .link { color: var(--tinta); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pc-rt-kpi-lista .link:hover { color: var(--primary); text-decoration: underline; opacity: 1; }
.pc-rt-kpi-hora { color: var(--muted-foreground); }
.pc-rt-kpi-quando, .pc-rt-kpi-lista .pc-situacao { flex-basis: 100%; font-size: 12px; color: var(--muted-foreground); }
.pc-rt-kpi-lista .pc-situacao { color: var(--tom-texto); }

/* a barra: título (com a .area-sub) + Nova rotina; fichas por agente, busca, situação e Atualizar */
.pc-rt-barra { margin-bottom: 16px; padding: 16px 20px; }
.pc-rt-barra-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pc-rt-barra-titulo { min-width: 0; }
.pc-rotinas > .pc-rt-barra-topo + .aviso { margin-top: 12px; }
.pc-rt-nova-botao { background: var(--primary); border-color: var(--primary); color: #FFFFFF; gap: 6px; }
.pc-rt-nova-botao:hover { background: #0259CC; }
.pc-rt-barra-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pc-rt-fichas { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-rt-ficha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; color: var(--foreground);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pc-rt-ficha:hover { background: var(--muted); }
.pc-rt-ficha:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-rt-ficha .pc-conta { min-width: 20px; padding: 3px 6px; border-radius: 999px; background: var(--muted); text-align: center; }
.pc-rt-ficha.ativa { background: var(--primary); color: #FFFFFF; font-weight: 600; }
.pc-rt-ficha.ativa .pc-conta { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.pc-rt-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-rt-campo { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--pagina); color: var(--muted-foreground); }
.pc-rt-campo:focus-within { outline: 2px solid var(--primary); border-color: transparent; }
.pc-rt-campo input, .pc-rt-campo select { height: 100%; padding: 0; border: none; background: transparent; outline: none;
  font: inherit; font-size: 14px; color: var(--foreground); }
.pc-rt-campo-busca input { width: 14em; min-width: 0; }
.pc-rt-filtrando { margin: 10px 0 0; font-size: 13px; color: var(--muted-foreground); }

/* um cartão por rotina */
.pc-rt-lista { display: flex; flex-direction: column; gap: 16px; }
.pc-rotina.pc-rt-rotina { margin-top: 0; padding: 0; border: 1px solid var(--borda-cartao); border-radius: 16px;
  box-shadow: inset 3px 0 0 var(--tom, var(--muted-foreground)), var(--sombra); overflow: hidden; }
.pc-rt-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; padding: 18px 22px 0; }
.pc-rt-inicial { width: 38px; height: 38px; font-size: 16px; color: var(--tinta);
  background: color-mix(in srgb, var(--cor-agente, var(--primary)) 14%, var(--fundo));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cor-agente, var(--primary)) 50%, var(--fundo)); }
.pc-rt-inicial-sem { background: var(--muted); color: var(--muted-foreground); box-shadow: none; }
.pc-rt-quem { min-width: 0; }
.pc-rt-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pc-rt-titulo h3 { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.pc-rt-pilula { padding: 2px 10px 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tom) 12%, var(--fundo));
  font-weight: 600; white-space: nowrap; }
.pc-rt-agente { margin: 4px 0 0; font-size: 13px; color: var(--muted-foreground); }
.pc-rt-agente-nome { color: var(--tinta); font-weight: 600; text-decoration: none; }
a.pc-rt-agente-nome:hover { color: var(--primary); text-decoration: underline; }
.pc-rt-gatilhos { list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; padding: 0; }
.pc-rt-gatilho { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--fundo)); background: color-mix(in srgb, var(--primary) 5%, var(--fundo));
  font-size: 13px; color: var(--foreground); }
.pc-rt-gatilho strong { font-weight: 600; color: var(--tinta); }
.pc-rt-icone { flex: none; color: var(--primary); }
.pc-rt-gatilho.pc-rt-aviso { border-color: var(--border); background: var(--muted); }
.pc-rt-gatilho.pc-rt-aviso .pc-rt-icone { color: var(--tinta); }
.pc-rt-gatilho.pc-rt-desligado { border-style: dashed; background: var(--fundo); color: var(--muted-foreground); }
.pc-rt-gatilho-nota { color: var(--muted-foreground); }

/* o texto que a rotina manda ao agente: duas linhas de texto corrido; "ver tudo" abre o inteiro, lido como markdown */
.pc-rt-descricao { margin: 12px 22px 0; font: 400 14px/1.5 var(--fonte-texto); color: var(--muted-foreground); }
.pc-rt-descricao > summary { display: flex; align-items: flex-end; gap: 4px 12px; list-style: none; cursor: pointer; }
.pc-rt-descricao > summary::-webkit-details-marker, .pc-rt-execs-abre > summary::-webkit-details-marker { display: none; }
.pc-rt-descricao > summary:focus-visible, .pc-rt-execs-abre > summary:focus-visible { outline: 2px solid var(--primary);
  outline-offset: 2px; border-radius: 4px; }
.pc-rt-descricao-curta { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pc-rt-ver-tudo, .pc-rt-ver-menos { font: 600 13px/1.5 var(--fonte-texto); color: var(--primary); white-space: nowrap; }
.pc-rt-descricao > summary:hover :is(.pc-rt-ver-tudo, .pc-rt-ver-menos),
.pc-rt-execs-abre > summary:hover :is(.pc-rt-ver-tudo, .pc-rt-ver-menos) { text-decoration: underline; }
.pc-rt-ver-menos { display: none; }
.pc-rt-descricao[open] .pc-rt-descricao-curta, :is(.pc-rt-descricao, .pc-rt-execs-abre)[open] .pc-rt-ver-tudo { display: none; }
:is(.pc-rt-descricao, .pc-rt-execs-abre)[open] .pc-rt-ver-menos { display: inline; }
.pc-rt-descricao[open] > summary { justify-content: flex-end; }
.pc-rt-descricao-toda.pc-md { max-height: 420px; overflow-y: auto; margin-top: 6px; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--pagina); }

/* o pé: as execuções numa linha ("ver as 5 últimas" abre os quadrinhos) e as ações à direita (uma ação aberta
   ocupa a largura toda) */
.pc-rt-pe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; margin-top: 14px;
  padding: 12px 22px 14px; border-top: 1px solid var(--border); }
.pc-rt-pe:has(.pc-acao[open]) { grid-template-columns: minmax(0, 1fr); }
.pc-rt-pe:has(.pc-rt-execs-abre[open]) { align-items: start; }
.pc-execucoes.pc-rt-execucoes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 0;
  border: none; min-width: 0; }
.pc-rt-exec-linha { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-foreground); }
.pc-rt-certas { font-weight: 600; color: var(--tinta); }
.pc-rt-falhas { font-weight: 600; color: var(--tom-texto); }
.pc-rt-execs-abre > summary { list-style: none; cursor: pointer; }
.pc-rt-execs-abre[open] { flex-basis: 100%; }
.pc-execucoes-lista.pc-rt-execs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pc-rt-execs > .pc-rt-exec { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--fundo); font-size: 12px; line-height: 1.3; }
.pc-rt-execs > .pc-rt-exec.ag-tom-ruim { border-color: color-mix(in srgb, var(--destructive) 35%, var(--fundo)); }
.pc-rt-exec-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pc-rt-exec .pc-execucao-quando { min-width: 0; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.pc-rt-exec-situacao { font-weight: 500; color: var(--tom-texto); }
.pc-rt-exec-nota { color: var(--muted-foreground); overflow-wrap: anywhere; }
.pc-rotina-acoes.pc-rt-acoes { justify-content: flex-end; margin-top: 0; }
.pc-rt-pe:has(.pc-acao[open]) .pc-rt-acoes { justify-content: flex-start; }
.pc-rt-rodar > summary.ag-botao { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.pc-rt-rodar > summary.ag-botao:hover { background: #0259CC; }
.pc-rt-rodar[open] > summary.ag-botao { background: var(--muted); border-color: transparent; color: var(--tinta); }
.pc-rt-mais > summary.ag-botao { min-width: 34px; padding: 6px 10px; font-size: 16px; line-height: 1.1; color: var(--tinta); }
.pc-rt-mais-painel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px;
  border-radius: 10px; background: var(--pagina); }
.pc-rt-mais-painel .pc-confirma { background: var(--fundo); }
/* Editar instruções no cartão (07/10/2026): a caixa do editor de instruções, mais baixa */
.pc-rt-caixa { height: 320px; min-height: 180px; }
.pc-rt-vazio { margin: 0; }
.pc-rt-lista + .pc-rotinas-pe { margin: 12px 0 0; }

/* agentes sem rotina ligada */
.pc-rt-sem { margin-top: 20px; }
.pc-rt-sem-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pc-rt-sem-topo .ia-sub-nota { margin: 0; font-size: 13px; }
.pc-rt-sem-grade { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; }
.pc-rt-sem-agente { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--pagina); }
.pc-rt-sem-quem { display: flex; align-items: center; gap: 12px; }
.pc-rt-sem-nome { display: flex; flex-direction: column; min-width: 0; }
.pc-rt-sem-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.link.pc-rt-criar { font-size: 13px; font-weight: 600; text-decoration: none; }
.link.pc-rt-criar:hover { text-decoration: underline; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .pc-rt-abre-seta { transition: none; } }
@media (max-width: 1100px) { .pc-rt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pc-rt-cabeca { grid-template-columns: auto minmax(0, 1fr); }
  .pc-rt-gatilhos { grid-column: 1 / -1; align-items: flex-start; }
  .pc-rt-pe { grid-template-columns: minmax(0, 1fr); }
  .pc-rotina-acoes.pc-rt-acoes { justify-content: flex-start; }
}
@media (max-width: 720px) {
  /* os quadrinhos rolam de lado dentro do cartão, nunca a página */
  .pc-execucoes-lista.pc-rt-execs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 136px;
    overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 560px) {
  .pc-rt-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pc-rt-valor .mm-n { font-size: 34px; }
  .pc-rt-barra { padding: 14px 16px; }
  .pc-rt-busca, .pc-rt-campo-busca { width: 100%; }
  .pc-rt-campo-busca input { flex: 1; width: auto; }
  .pc-rt-cabeca { padding: 16px 16px 0; }
  .pc-rt-descricao { margin: 12px 16px 0; }
  .pc-rt-pe { padding: 12px 16px 16px; }
}
/* --- fim Layout Rotinas --- */

/* --- Layout Credenciais --- (06/10/2026; enxugado no mesmo dia) A tela Credenciais no layout do Stitch, só com
   dado real: o título com a linha de baixo (.area-sub, do bloco Layout Skills), dois cartões lado a lado
   (reaproveitam .diag-kpis; no celular, um embaixo do outro), as credenciais do Paperclip numa tabela
   (.cred-tabela, um <tbody> por credencial: a linha + o painel de Trocar, que abre pelo <details> da coluna Ações);
   no celular cada credencial vira um bloco. Só tokens que já existiam. */
.cred-topo { margin: 0 0 16px; }
.cred-topo h2 { margin: 0; }
.cred-topo .aviso { margin-top: 12px; }

/* os dois cartões: o número de destaque leva à lista; o resto é palavra, nunca número inventado */
.cred-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cred-kpis a.mm-valor { width: fit-content; margin-top: 12px; color: inherit; text-decoration: none; }
.cred-kpis a.mm-valor:hover .mm-n { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cred-kpis .diag-kpi > h2 { font-size: 14px; line-height: 1.35; }
.cred-kpis .mm-n { font-size: 40px; }
.cred-estado { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 600 20px/1.2 var(--fonte-titulo);
  color: var(--tinta); letter-spacing: -0.01em; }
.cred-estado .pc-ponto { width: 10px; height: 10px; }
.cred-kpis .diag-kpi-sub .link, .cred-kpis .diag-kpi-pe .link { color: inherit; text-decoration-color: var(--border); }
.cred-kpis .diag-kpi-sub .link:hover, .cred-kpis .diag-kpi-pe .link:hover { color: var(--primary); opacity: 1; }
.cred-kpis .diag-kpi-pe .link { color: var(--primary); }
.cred-pendencias { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--muted-foreground); }
.cred-pendencias li + li { margin-top: 2px; }
.cred-pendencias .link { color: #92660A; font-weight: 600; }

/* os grupos agora são cartões: o espaço entre eles é o dos cartões */
.cartao.cred-grupo { margin-top: 0; }
.cartao.cred-grupo > .rotulo { margin: 4px 0 12px; }
.cred-grupo > .cred-titulo { font-size: 17px; }
.cred-cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.cred-cabeca .cred-titulo { font-size: 17px; flex-wrap: wrap; }
.cred-cabeca .rotulo { margin: 4px 0 12px; color: var(--muted-foreground); font-size: 13px; }
.cred-conta { padding: 1px 10px; border-radius: 999px; background: var(--muted); font: 600 12px/1.6 var(--fonte-texto);
  color: var(--muted-foreground); letter-spacing: 0; }
.cred-nova { margin-bottom: 12px; }
.cred-nova > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.cred-nova > summary::-webkit-details-marker { display: none; }
.cred-nova > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cred-nova[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 12px; }
.cred-nova[open] > summary { background: var(--muted); color: var(--tinta); }
.cred-nova .ag-acesso-painel { align-self: stretch; margin: 10px 0 0; }

/* os recortes da lista (links: o filtro vai na URL, sem JavaScript) */
.cred-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.cred-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--fundo); font-size: 13px; color: var(--foreground); text-decoration: none; }
.cred-filtro strong { font-weight: 700; color: var(--tinta); }
.cred-filtro:hover { border-color: var(--muted-foreground); }
.cred-filtro:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cred-filtro.ativa { background: #E6F0FF; border-color: var(--primary); color: #024FBB; font-weight: 600; }
.cred-filtro.ativa strong { color: #024FBB; }

/* a tabela */
.cred-tabela { width: 100%; border-collapse: collapse; }
.cred-tabela td { vertical-align: middle; }
.cred-tabela th:last-child, .cred-acoes { width: 1%; text-align: right; white-space: nowrap; }
.cred-nome strong { display: block; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.cred-nome .ag-nota { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.cred-uso { max-width: 360px; }
.cred-agente { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 6px; background: #E6F0FF;
  color: #024FBB; font-size: 12px; font-weight: 600; line-height: 20px; text-decoration: none; }
a.cred-agente:hover { background: var(--primary); color: #FFFFFF; }
a.cred-agente:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cred-agente-fora { background: var(--muted); color: var(--foreground); }
.cred-uso-texto { display: block; font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.cred-agente + .cred-uso-texto { margin-top: 2px; }
.cred-quando { white-space: nowrap; }
.cred-trocar > summary { list-style: none; }
.cred-trocar > summary::-webkit-details-marker { display: none; }
.cred-trocar > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cred-trocar[open] > summary { background: var(--muted); border-color: transparent; color: var(--tinta); }
.cred-tabela tr.cred-painel { display: none; }
.cred-linha:has(.cred-trocar[open]) tr.cred-painel { display: table-row; }
.cred-linha:has(.cred-trocar[open]) > tr:first-child > td { border-bottom-color: transparent; }
.cred-tabela tbody tr.cred-painel:hover { background: none; }
.cred-painel > td { padding-top: 0; }
.cred-painel .ag-acesso-painel { margin: 0; }
.cred-painel .formulario { max-width: 640px; }

@media (max-width: 720px) {
  .cred-kpis { grid-template-columns: minmax(0, 1fr); }
  .cred-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cred-tabela, .cred-tabela tbody, .cred-tabela td { display: block; width: 100%; }
  .cred-tabela tr { display: block; }
  .cred-linha > tr:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px;
    padding: 12px 2px; border-bottom: 1px solid var(--border); }
  table.zebra.cred-tabela td { padding: 0; border-bottom: none; max-width: none; }
  .cred-tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font: 600 10px/1.4 var(--fonte-mono);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
  .cred-nome, .cred-uso, .cred-acoes { grid-column: 1 / -1; }
  .cred-nome::before { display: none !important; }
  .cred-quando { white-space: normal; }
  .cred-acoes { width: auto; text-align: left; }
  .cred-linha:has(.cred-trocar[open]) tr.cred-painel { display: block; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
  .cred-linha:has(.cred-trocar[open]) > tr:first-child { border-bottom-color: transparent; }
  .cred-nova[open] { align-items: stretch; }
  .cred-nova[open] > summary { align-self: flex-end; }
}
/* --- fim do Layout Credenciais --- */

/* --- Por que falharam (aba Agentes, 06/10/2026) ---
   A janela Por que falharam (abre no número de falhas do cartão Taxa de sucesso: motivo, falhas, % das falhas,
   por agente na cor dele, Ver no Histórico); no dia aberto do Histórico, o motivo embaixo da situação da execução
   que falhou. Só peças, fontes e cores que já existem. */
.pc-falhas-modal .modal-corpo { padding: 0 20px 20px; }
.pc-falhas-modal { --serie-bug: #eb6834; --serie-ajuste-bd: #1baf7a; --serie-ocorrencia: #eda100; }   /* as cores dos agentes (AGENTE_COR) */
.pc-falhas-modal { width: min(720px, calc(100vw - 32px)); }
.pc-falhas-lista { list-style: none; margin: 0; padding: 0; }
.pc-falha { padding: 14px 0; border-top: 1px solid var(--border); }
.pc-falha:first-child { border-top: none; padding-top: 4px; }
.pc-falha-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; color: var(--foreground);
  text-decoration: none; }
.pc-falha-topo:hover .pc-falha-motivo { color: var(--primary); }
.pc-falha-topo:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.pc-falha-motivo { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
.pc-falha-n { flex: none; font-size: 15px; font-weight: 600; }
.pc-falha-pct { flex: none; min-width: 3.2em; text-align: right; font-size: 12px; color: var(--muted-foreground); }
.pc-falha .pc-exec-trilho { height: 8px; }
.pc-falha .pc-exec-contas { margin-top: 8px; }
.pc-exec-situacao { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-exec-falha { font-size: 12px; line-height: 1.3; color: var(--muted-foreground); overflow-wrap: anywhere; }
.pc-exec-filtro-motivo { color: var(--foreground); }
/* --- fim de Por que falharam --- */

/* --- Testar skill (aba Testar da página da skill, 06/10/2026): o formulário (reaproveita .formulario/.pc-sk-editor),
   "Hoje no Jira" e "Com esta skill" lado a lado (empilhados em tela estreita), no cartão .jira-comentario, e as
   conferências embaixo do novo. Só cores e fontes que já existem. --- */
.pc-previa-form { margin: 0 0 8px; padding-top: 0; border-top: none; }
.pc-previa-form input[type="text"] { font: 600 14px/1.3 var(--fonte-mono); color: var(--tinta); text-transform: uppercase; }
.pc-previa-form input[type="text"]::placeholder { text-transform: none; font-family: var(--fonte-texto); font-weight: 400; }
.pc-previa-nota { margin: 0; }
.pc-previa-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pc-previa-lado { min-width: 0; }
.pc-previa-lado .pc-teste-sub { margin-top: 4px; }
.pc-previa-lado .jira-comentario { max-width: none; }
.pc-previa-conferencias { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0;
  font-size: 13px; }
.pc-previa-conferencias li { display: flex; align-items: baseline; gap: 8px; color: var(--tom-texto); }
.pc-previa-sinal { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none;
  border-radius: 50%; background: color-mix(in srgb, var(--tom) 14%, transparent); font-weight: 700; font-size: 11px; }
@media (max-width: 900px) { .pc-previa-lados { grid-template-columns: 1fr; } }
/* --- fim do Testar skill --- */

/* --- Diagnóstico de um ticket (aba Diagnóstico da área Agentes IA, 06/10/2026): à esquerda a busca, o ticket como o
   Jira desenha, o resumo do caminho, as pistas, a linha do tempo (vertical, a hora à esquerda, o ponto na cor do
   agente) e os atalhos; à direita, o lugar do chat (embaixo, em tela estreita). Só cores e fontes que já existem. --- */
.pc-diag-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pc-diag-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pc-diag-principal > .aviso, .pc-diag-principal > .vazio { margin: 0; }
.pc-diag-chat { position: sticky; top: 16px; }
.pc-diag-chat-texto { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted-foreground); }
.pc-diag-form { margin: 14px 0 0; }
.pc-diag-busca > .aviso { margin: 12px 0 0; }
.pc-diag-ticket-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.pc-diag-chave { font-size: 14px; font-weight: 600; }
.pc-diag-ticket-titulo { margin: 8px 0 14px; font: 600 18px/1.35 var(--fonte-texto); color: var(--tinta); overflow-wrap: anywhere; }
.pc-diag-projeto { color: var(--tinta); }
.pc-diag-campos { max-width: none; }
.pc-diag-passos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0; }
.pc-diag-passo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pc-diag-passo + .pc-diag-passo::before { content: "→"; color: var(--muted-foreground); }
.pc-diag-passo-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--cor-agente) 12%, var(--fundo)); color: var(--foreground); text-decoration: none; }
.pc-diag-passo-link:hover { color: var(--primary); }
.pc-diag-passo-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-diag-passo-fim { gap: 6px; }
.pc-diag-lista-pistas { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; font-size: 14px; }
.pc-diag-lista-pistas li { display: flex; align-items: baseline; gap: 8px; color: var(--foreground); }
.pc-diag-lista-pistas .pc-previa-sinal { color: var(--tom-texto); }
.pc-diag-eventos { list-style: none; margin: 12px 0 0; padding: 0; }
.pc-diag-ev { display: grid; grid-template-columns: 82px 18px minmax(0, 1fr); column-gap: 8px; position: relative; }
.pc-diag-ev::before { content: ""; position: absolute; left: 98px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.pc-diag-ev:first-child::before { top: 12px; }
.pc-diag-ev:last-child::before { bottom: calc(100% - 12px); }
.pc-diag-ev-hora { padding-top: 3px; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.pc-diag-ev-marca { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; margin-top: 6px;
  border-radius: 50%; background: var(--fundo); border: 3px solid var(--cor-agente); }
.pc-diag-ev-decisao .pc-diag-ev-marca { width: 16px; height: 16px; margin-top: 4px; background: var(--cor-agente); }
.pc-diag-ev-corpo { min-width: 0; padding-bottom: 16px; }
.pc-diag-ev-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 13px; }
.pc-diag-agente { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.pc-diag-fonte { font: 600 10px/1.6 var(--fonte-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.pc-diag-ev-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.pc-diag-ev-corpo > .ag-nota, .pc-diag-ev-corpo > .pc-exec-falha { margin: 4px 0 0; }
.pc-diag-valor { overflow-wrap: anywhere; }
.pc-diag-tarefa-titulo { margin: 2px 0 0; font-size: 14px; color: var(--foreground); overflow-wrap: anywhere; }
.pc-diag-decisao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; font-size: 14px; color: var(--tinta); }
.pc-diag-comentario { margin: 6px 0 0; max-width: 760px; }
.pc-diag-comentario > summary { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--fundo); cursor: pointer; list-style: none; }
.pc-diag-comentario > summary::-webkit-details-marker { display: none; }
.pc-diag-comentario > summary:hover { border-color: var(--primary); }
.pc-diag-comentario > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-diag-comentario[open] > summary { margin-bottom: 8px; }
.pc-diag-comentario[open] .pc-diag-abrir, .pc-diag-comentario[open] .pc-diag-comentario-resumo { display: none; }
.pc-diag-comentario-titulo { font-size: 14px; font-weight: 600; color: var(--foreground); }
.pc-diag-comentario-resumo { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); overflow-wrap: anywhere; }
.pc-diag-abrir { font-size: 13px; }
.pc-diag-agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 10px; }
.pc-diag-atalho { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
  border-top: 3px solid var(--cor-agente); }
.pc-diag-atalho .pc-config-sub { gap: 8px; }
.pc-diag-links, .pc-diag-mudancas { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; font-size: 14px; }
.pc-diag-mudancas { font-size: 13px; }
.pc-diag-desde { margin: 14px 0 0; font-size: 13px; color: var(--tinta); }
.pc-diag-atalho > .ag-nota { margin: 6px 0 0; }
@media (max-width: 1100px) {
  .pc-diag-grade { grid-template-columns: minmax(0, 1fr); }
  .pc-diag-chat { position: static; }
}
@media (max-width: 640px) {
  .pc-diag-ev { grid-template-columns: 14px minmax(0, 1fr); }
  .pc-diag-ev::before { left: 6px; }
  .pc-diag-ev-hora { grid-column: 2; grid-row: 1; padding-top: 0; }
  .pc-diag-ev-marca { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
  .pc-diag-ev-corpo { grid-column: 2; }
  .pc-diag-agentes { grid-template-columns: minmax(0, 1fr); }
}
/* --- fim do Diagnóstico --- */

/* --- Chat do diagnóstico (aba Diagnóstico, passo 2, 06/10/2026): o painel à direita fica mais largo e rola por dentro
   (embaixo do conteúdo em tela estreita); as mensagens do Eduardo à direita, as do Claude à esquerda; cada proposta
   num cartão com a borda na cor da situação, a diferença (o mesmo desenho do Histórico) e as ações; Aprovar e
   Desfazer abrem o passo "Sim" (.pc-acao/.pc-confirma). Só cores e fontes que já existem. --- */
.pc-diag-grade { grid-template-columns: minmax(0, 1fr) 420px; }
.pc-diag-chat { max-height: calc(100vh - 32px); overflow-y: auto; scroll-margin-top: 16px; }
.pc-chat-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-chat-topo h2 { margin: 0; }
.pc-chat-nova { white-space: nowrap; }
.pc-diag-chat > .aviso { margin: 12px 0 0; }
.pc-chat-depois { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--success) 10%, var(--fundo)); }
.pc-chat-depois-titulo { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #146C33; }
.pc-chat-depois ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.pc-chat-testar { display: inline-flex; text-decoration: none; }
.pc-chat-mensagens { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0; padding: 0; }
.pc-chat-msg { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 16px; }
.pc-chat-eduardo { align-items: flex-end; }
.pc-chat-quem { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--tinta); }
.pc-chat-balao { max-width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pc-chat-eduardo .pc-chat-balao { max-width: 88%; background: var(--muted); color: var(--foreground); white-space: pre-wrap; }
.pc-chat-claude .pc-chat-balao { border: 1px solid var(--border); background: var(--fundo); }
.pc-chat-claude .pc-chat-balao.pc-md p { margin: 6px 0; }
.pc-chat-pensando { margin: 0; }
.pc-chat-msg > .aviso { margin: 0; }
.pc-chat-bruto { margin-top: 6px; font-size: 13px; }
.pc-chat-bruto pre { max-height: 240px; overflow: auto; }
.pc-chat-cartao { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--tom);
  border-radius: 8px; background: var(--fundo); scroll-margin-top: 16px; }
.pc-chat-cartao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
  margin: 0; font-size: 12px; }
.pc-chat-cartao-titulo { margin: 6px 0 2px; font: 600 15px/1.35 var(--fonte-texto); color: var(--tinta); }
.pc-chat-onde { margin: 0 0 6px; overflow-wrap: anywhere; }
.pc-chat-campo { margin: 6px 0; font-size: 13px; line-height: 1.5; color: var(--foreground); }
.pc-chat-cartao .pc-dif { margin: 10px 0; }
.pc-chat-cartao .pc-dif-linha { grid-template-columns: 34px 14px minmax(0, 1fr); }
.pc-chat-cartao > .aviso { margin: 8px 0 0; }
.pc-chat-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pc-chat-acoes form { margin: 0; }
.pc-chat-acoes .pc-acao > summary.botao-primario { display: inline-flex; cursor: pointer; }
.pc-chat-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 14px; }
.pc-chat-form textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--fundo); color: var(--foreground); font: 14px/1.5 var(--fonte-texto); }
.pc-chat-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
@media (max-width: 1100px) {
  .pc-diag-grade { grid-template-columns: minmax(0, 1fr); }
  .pc-diag-chat { max-height: none; overflow: visible; }
}
/* --- fim do Chat do diagnóstico --- */