/* Desempenho Atendentes (spec docs/superpowers/specs/2026-09-15-desempenho-
   atendentes-design.md). Mesmos tokens SEMANTICOS de dashboard.css
   (--bc-*), classes proprias (`.desempenho__*`) em vez de reusar
   `.dashboard__*` -- as duas telas evoluem de forma independente, e uma
   classe partilhada acoplaria as duas sem necessidade. */

.desempenho button { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
.desempenho a { text-decoration: none; color: inherit; }

.desempenho__topo { margin-bottom: 1.5rem; }
.desempenho__topo h1 { font-size: 1.5rem; margin: 0; }
.desempenho__legenda { color: var(--bc-ink-mut); font-size: .9rem; margin: .3rem 0 0; }

/* ── filtros (mesmo layout do dashboard de BI, classes proprias) ── */
.desempenho__filtros { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--bc-line); }
.desempenho__filtros form { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.desempenho__filtro-grupo { display: flex; align-items: center; gap: .6rem; }
.desempenho__filtro-rotulo { font-size: .75rem; color: var(--bc-ink-mut); }
.desempenho__filtros select { font: inherit; font-size: .85rem; color: var(--bc-ink);
  background: var(--bc-surface); border: 1px solid var(--bc-line); border-radius: 8px;
  padding: 0 .7rem; }
/* Select, data e botao na MESMA altura: com o padding de cada um eles saiam com
   36, 40 e 40 px, e a linha de filtros ficava desalinhada nas bordas. */
.desempenho__filtros select, .desempenho__data, button.desempenho__aplicar { box-sizing: border-box; height: 2.5rem; }
.desempenho__periodo { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.desempenho__aviso { font-size: .75rem; font-weight: 600; color: var(--bc-warn); }
.desempenho__data { font: inherit; font-size: .85rem; color: var(--bc-ink);
  background: var(--bc-surface); border: 1px solid var(--bc-line); border-radius: 8px;
  padding: 0 .7rem; }
button.desempenho__aplicar { font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  color: var(--bc-primary-ink); background: var(--bc-primary); border: 1px solid transparent;
  border-radius: 8px; padding: 0 1.1rem; transition: background .18s; }
button.desempenho__aplicar:hover { background: var(--bc-primary-hover); }

/* ── voltar (so aparece com atendente selecionado) ── */
.desempenho__voltar { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
  color: var(--bc-ink-mut); margin-bottom: 1rem; }

/* ── KPIs (cards) ── */
.desempenho__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 1.5rem; }
.desempenho__kpis--cinco { grid-template-columns: repeat(5, 1fr); }
.desempenho__kpi { padding: 1.3rem 1.4rem; background: var(--bc-surface);
  border: 1px solid var(--bc-line); border-radius: var(--bc-raio); }
.desempenho__kpi-rotulo { font-size: .75rem; color: var(--bc-ink-mut); }
.desempenho__kpi-valor { display: block; font-size: 1.9rem; font-weight: 700;
  letter-spacing: -.02em; margin-top: .35rem; }
.desempenho__kpi-legenda { font-size: .72rem; color: var(--bc-ink-mut); margin-top: .3rem; }

/* ── tabela de motivos (detalhe de UM atendente) ──
 *
 * `.desempenho__tabela` ja foi tambem a tabela comparativa; desde o redesenho
 * de 01/10 a comparativa tem classe propria (`.desempenho__comparativo`,
 * abaixo) e esta aqui so veste a tabela "Encerramentos por motivo" do
 * detalhe. O desenho dela nao mudou: mesma grade, mesma divisa a direita da
 * primeira coluna. */
.desempenho__tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.desempenho__tabela th, .desempenho__tabela td { padding: .7rem .75rem; text-align: left;
  border-bottom: 1px solid var(--bc-line); white-space: nowrap; }
.desempenho__tabela td { font-variant-numeric: tabular-nums; }
.desempenho__tabela th { font-size: .72rem; color: var(--bc-ink-mut); font-weight: 600; }
.desempenho__tabela th:first-child,
.desempenho__tabela td:first-child { box-shadow: 1px 0 0 var(--bc-line); }
.desempenho__tabela tbody tr:last-child td { border-bottom: 0; }
.desempenho__tabela tbody tr:hover { background: var(--bc-surface-2); }

/* ── tabela comparativa (sem atendente selecionado): UMA LINHA POR PESSOA ──
 *
 * Redesenho de 01/10. A versao anterior punha embaixo de cada atendente uma
 * faixa de texto corrido com o detalhamento; o dono viu em producao e achou
 * ilegivel. Agora o detalhamento mora DENTRO das colunas: o numero em cima e,
 * embaixo, a parcela que ele e da base (porcentagem). Quatro familias de
 * colunas, cada uma fechando a propria conta.
 *
 * TUDO AQUI CONSOME TOKEN (`--bc-*`): as unicas cores "feitas" sao `color-mix`
 * sobre token, entao claro e escuro acompanham sozinhos. Nenhuma animacao: a
 * tela se recarrega a cada 30 s.
 *
 * LARGURA. A tabela tem de caber SEM rolagem lateral no quadro de ~930px (a
 * janela do dono: 1283px com a barra lateral aberta; medido em 10/11/2026 com
 * as 15 colunas: quadro 929px, tabela 929px). Por isso o respiro lateral das
 * celulas e curto e o cabecalho quebra em duas linhas. Em quadro
 * menor, quem rola e `.desempenho__tabela-rolagem`, com a coluna do nome
 * fixa. */
.desempenho__quadro { border: 1px solid var(--bc-line); border-radius: var(--bc-raio);
  background: var(--bc-surface); overflow: hidden; }
.desempenho__quadro .desempenho__vazio { margin: 0; }
.desempenho__tabela-rolagem { overflow-x: auto; }
.desempenho__tabela-rolagem:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: -2px; }

.desempenho__comparativo {
  /* a parte "aguardando o lead" da barra, e o fundo da linha de Total */
  --desempenho-resto: color-mix(in srgb, var(--bc-primary) 30%, var(--bc-surface));
  --desempenho-total: color-mix(in srgb, var(--bc-primary) 9%, var(--bc-surface));
  --desempenho-nome: 5.75rem;
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .84375rem; line-height: 1.3; font-variant-numeric: tabular-nums;
}
/* `border-collapse: separate` de proposito: com `collapse` a borda pertence a
   TABELA, nao a celula, e nao viaja junto com a celula congelada -- a linha
   de baixo some ou pisca ao rolar. Com `border-spacing: 0` o desenho e o
   mesmo, e cada celula carrega a propria borda. */
.desempenho__comparativo th,
.desempenho__comparativo td {
  /* .1rem de cada lado (eram .28rem, depois .2rem): com a coluna "Taxa de entrega" (22/10) eram 14 colunas e a tabela passava 29 px do quadro do
     dono; com "Aguardando o atendente" (10/11/2026) sao 15, e a tabela passava 72 px de um quadro de 946 px. Respiro menor nas celulas, nome
     de 5,75rem (o nome QUEBRA em duas linhas, nao corta) e divisa de familia de .4rem trouxeram a tabela de volta a 929 px, sem rolagem. */
  padding: .6rem .1rem; text-align: right; vertical-align: top; white-space: nowrap;
  font-weight: 400; border-bottom: 1px solid var(--bc-line);
}
.desempenho__comparativo tr > :last-child { padding-right: .7rem; }

/* cabecalho em duas linhas: familia em cima, coluna embaixo */
.desempenho__comparativo thead th {
  vertical-align: bottom; padding-block: .3rem .55rem;
  font-size: .6875rem; line-height: 1.25; color: var(--bc-ink-mut);
}
.desempenho__comparativo .desempenho__familias th {
  padding-block: .75rem 0; border-bottom: 0; text-align: left;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bc-ink);
}
/* o nome da familia acompanha a rolagem lateral enquanto a familia esta na tela */
.desempenho__familia-rotulo { display: inline-block; position: sticky;
  left: calc(var(--desempenho-nome) + 1.7rem); }
.desempenho__unidade { font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--bc-ink-mut); }

/* ── ordenar pelo titulo da coluna (20/10) ──
 * O titulo vira link (quem ordena e o servidor) e herda a cara de titulo. A
 * setinha da coluna que ordena e `::after`, para o TEXTO do titulo nao mudar.
 * O do "Atendente" desfaz o estilo do link do nome das linhas, que mora na
 * mesma classe `desempenho__col-nome` (por isso o seletor mais forte). */
.desempenho__comparativo thead .desempenho__ordenar,
.desempenho__comparativo thead .desempenho__col-nome a.desempenho__ordenar {
  display: inline; width: auto; font: inherit; color: inherit; text-decoration: none;
}
.desempenho__comparativo thead .desempenho__ordenar:hover,
.desempenho__comparativo thead .desempenho__ordenar:focus-visible { color: var(--bc-ink); text-decoration: underline; }
.desempenho__comparativo thead .desempenho__ordenada--asc,
.desempenho__comparativo thead .desempenho__ordenada--desc { color: var(--bc-ink); font-weight: 700; }
.desempenho__ordenada--asc .desempenho__ordenar::after { content: "\a0\25B2"; font-size: .85em; }
.desempenho__ordenada--desc .desempenho__ordenar::after { content: "\a0\25BC"; font-size: .85em; }

/* Onde uma familia comeca: BORDA, e nao cor de fundo -- a primeira coluna e
   `position: sticky` e um fundo proprio brigaria com o fundo opaco que o
   congelamento exige. */
.desempenho__comparativo .desempenho__inicio-familia { border-left: 1px solid var(--bc-line);
  padding-left: .4rem; }

/* ── a coluna do nome fica congelada ao rolar de lado ──
 *
 * `position: sticky` EXIGE fundo opaco: sem ele o conteudo que rola passa por
 * baixo e aparece atraves da celula. O fundo sai dos tokens do tema.
 *
 * A divisa que diz "daqui para la, rola" e `box-shadow`, e nao `border-right`:
 * sombra nao ocupa espaco no layout, e uma borda empurraria as outras colunas.
 *
 * O NOME QUEBRA EM LINHAS (duas, nos nomes de hoje), SEM reticencias: nome
 * cortado numa tela de comparar gente e pior que linha mais alta. A largura e
 * do LINK, nao da celula: celula de tabela ignora `width` menor que o
 * conteudo. */
.desempenho__comparativo .desempenho__col-nome {
  position: sticky; left: 0; z-index: 1; text-align: left; padding-left: .8rem;
  background: var(--bc-surface); box-shadow: 1px 0 0 var(--bc-line);
}
.desempenho__comparativo .desempenho__col-nome a {
  display: block; width: var(--desempenho-nome);
  white-space: normal; overflow-wrap: break-word; text-wrap: balance;
  font-size: .8125rem; font-weight: 700; color: var(--bc-primary);
}
.desempenho__comparativo .desempenho__col-nome a:hover { text-decoration: underline; }
/* a primeira familia nao tem borda (a divisa e a sombra do nome), mas respira igual */
.desempenho__comparativo .desempenho__col-nome + * { padding-left: .4rem; }

/* ── numero em cima, parcela (porcentagem) embaixo ──
 *
 * A PORCENTAGEM E O QUE O DONO PEDIU, entao ela nao pode ser o menor texto da
 * tela: 12px, negrito, na cor do texto principal. O que fica apagado e a base
 * do Retorno ("de 111"), que vem ANTES da porcentagem para o % cair no mesmo
 * x em toda linha. */
.desempenho__valor { display: block; color: var(--bc-ink); }
.desempenho__valor--zero { color: var(--bc-ink-mut); }
.desempenho__parte { display: block; margin-top: .15rem; font-size: .75rem; color: var(--bc-ink); }
.desempenho__parte b { font-weight: 700; }
.desempenho__parte-base { color: var(--bc-ink-mut); }
/* base zero: so o traco, apagado -- nunca "0%" */
.desempenho__parte--sem-base { color: var(--bc-ink-faint); }
.desempenho__todas .desempenho__valor { font-weight: 700; }

/* ── a barra: com conversa + aguardando o lead = em aberto ──
 * SVG com a largura como ATRIBUTO (`<rect width="..">`), nunca `style=""`: a
 * CSP do app (`style-src 'self'`) bloqueia estilo inline. So a cor vem daqui. */
.desempenho__comparativo .desempenho__celula-barra { position: relative; vertical-align: middle;
  padding-left: .15rem; }
.desempenho__barra { display: block; width: 2rem; height: 6px; border-radius: 3px; overflow: hidden; }
.desempenho__barra-parte { fill: var(--bc-primary); }
.desempenho__barra-resto { fill: var(--desempenho-resto); }
/* a legenda da barra, no cabecalho das duas colunas que ela compara */
.desempenho__chave { display: inline-block; width: .5rem; height: .5rem; margin-right: .3rem;
  border-radius: 2px; }
.desempenho__chave--com { background: var(--bc-primary); }
.desempenho__chave--aguardando { background: var(--desempenho-resto); }

/* O destaque ao passar o mouse pinta as CELULAS, e nao a linha: a do nome tem
   fundo opaco (congelamento) e precisa acompanhar, senao denuncia o truque
   bem na linha que a pessoa esta olhando. */
.desempenho__comparativo tbody tr:hover > * { background: var(--bc-surface-2); }

/* ── a linha de Total ──
 * Fundo proprio (verde claro, `color-mix` sobre o token da marca) e numeros em
 * negrito. E opaco, entao a celula congelada do nome pode usar o mesmo. A
 * legenda pequena diz quantas pessoas a linha soma -- TODAS, inclusive as da
 * lista "Sem conversas no periodo". */
.desempenho__comparativo tfoot .desempenho__col-nome,
.desempenho__comparativo tfoot td { border-bottom: 0; background: var(--desempenho-total); }
.desempenho__comparativo tfoot .desempenho__col-nome,
.desempenho__comparativo tfoot .desempenho__valor { font-weight: 700; color: var(--bc-ink); }
.desempenho__total-legenda { display: block; margin-top: .15rem; font-size: .6875rem;
  font-weight: 400; color: var(--bc-ink-mut); }

/* ── quem nao teve movimento: uma linha discreta embaixo do Total ──
 * Fora do contentor que rola: e uma frase, quebra na largura VISIVEL. */
.desempenho__sem-movimento { margin: 0; padding: .6rem .8rem; border-top: 1px solid var(--bc-line);
  font-size: .75rem; line-height: 1.6; color: var(--bc-ink-mut); }
.desempenho__sem-movimento-rotulo { font-weight: 700; }
/* o ponto que separa anda junto com o nome: nunca sobra sozinho no fim da linha */
.desempenho__sem-movimento-item { white-space: nowrap; }
.desempenho .desempenho__sem-movimento a { color: var(--bc-primary); }
.desempenho .desempenho__sem-movimento a:hover { text-decoration: underline; }

/* ── embaixo: as contas que fecham (sempre a vista) e a explicacao (recolhida) ── */
/* O aviso de arrastar nasce RECOLHIDO e so aparece quando o contentor da
   tabela rola de verdade (ver "o aviso de arrastar", no fim). Recolhido por
   altura e `visibility`, e nao por `display: none`: elemento sem caixa nao
   recebe a regra que o faz aparecer. */
.desempenho__arraste { margin: 0; height: 0; overflow: hidden; visibility: hidden;
  font-size: .72rem; color: var(--bc-ink-mut); }
.desempenho__contas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.4rem;
  margin: .9rem 0 0; font-size: .75rem; color: var(--bc-ink-mut); }
.desempenho__contas ul { display: contents; margin: 0; padding: 0; list-style: none; }
.desempenho__contas-rotulo { font-weight: 700; color: var(--bc-ink); }
.desempenho__contas li { white-space: nowrap; }

/* O `<details>` fica FORA de `#desempenho-conteudo` (index.html.erb): aquele
   elemento e trocado inteiro a cada 30 s, e a ajuda fecharia sozinha. */
.desempenho__ajuda { margin-top: .9rem; border: 1px solid var(--bc-line); border-radius: var(--bc-raio);
  background: var(--bc-surface); font-size: .8rem; }
/* Por ficar fora do que e trocado, a ajuda esta SEMPRE na pagina, e quem diz
   se ela aparece e o que o servidor acabou de mandar: so ha o que explicar
   quando ha o quadro da tabela (`.desempenho__quadro`, que so `_tabela`
   escreve). Sem ele -- grupo sem atendente, detalhe de um atendente --, some;
   se a troca de 30 s trouxer o quadro, volta sozinha.
   A regra e NEGADA de proposito: navegador sem `:has()` descarta a regra
   inteira e a ajuda fica a vista -- melhor sobrando que faltando. */
.desempenho:not(:has(.desempenho__quadro)) > .desempenho__ajuda { display: none; }
.desempenho__ajuda summary { padding: .7rem .95rem; cursor: pointer; font-weight: 700; color: var(--bc-ink); }
.desempenho__ajuda summary:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: 2px;
  border-radius: var(--bc-raio); }
.desempenho__ajuda dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem;
  margin: 0; padding: .2rem .95rem 1.1rem; }
.desempenho__ajuda dt { font-weight: 700; color: var(--bc-ink); margin-bottom: .15rem; }
.desempenho__ajuda dd { margin: 0; color: var(--bc-ink-mut); line-height: 1.5; }
.desempenho__ajuda dd strong { color: var(--bc-ink); }

.desempenho__subtitulo { font-size: .95rem; margin: 0 0 .8rem; }
.desempenho__vazio { padding: 2rem; text-align: center; color: var(--bc-ink-mut); font-size: .85rem; }

/* ── graficos e motivos (detalhe do atendente) ── */
.desempenho__graficos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  margin-bottom: 1.5rem; }
.desempenho__grafico-card { background: var(--bc-surface); border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio); padding: 1rem 1.2rem 1.3rem; }
.desempenho__grafico-card h2 { font-size: .85rem; font-weight: 700; margin: 0 0 .8rem; }
.desempenho__tela { height: 160px; position: relative; }

.desempenho__motivos { background: var(--bc-surface); border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio); padding: 1.2rem 1.3rem; }
.desempenho__motivos h2 { font-size: .95rem; margin: 0 0 .9rem; }

/* ── "Por que os disparos nao foram entregues" (detalhe de UM atendente) ──
 *
 * Reaproveita o cartao e a tabela dos motivos (`.desempenho__motivos`,
 * `.desempenho__tabela`); aqui so o que muda: o texto do rotulo QUEBRA (o nome
 * de um codigo da Meta e comprido e no celular a tabela nao rola), os numeros
 * ficam a direita, as linhas filhas entram um degrau, e o total fecha embaixo.
 * So token `--bc-*`: claro e escuro acompanham sozinhos. A especificidade dupla
 * (`.desempenho__tabela.desempenho__perda`) e para vencer o `nowrap` da regra
 * geral sem depender da ordem dos arquivos. */
.desempenho__perda-bloco { margin-bottom: 1.5rem; }
.desempenho__perda-ajuda { color: var(--bc-ink-mut); font-size: .8rem; line-height: 1.45; margin: 0 0 .9rem; }
.desempenho__tabela.desempenho__perda th,
.desempenho__tabela.desempenho__perda td { white-space: normal; }
.desempenho__tabela.desempenho__perda th + th,
.desempenho__tabela.desempenho__perda td + td { text-align: right; white-space: nowrap; }
.desempenho__perda-grupo td { font-weight: 600; }
.desempenho__tabela .desempenho__perda-sub td:first-child { padding-left: 1.8rem; }
.desempenho__perda-codigo { display: inline-block; margin-left: .4rem; font-size: .72rem; color: var(--bc-ink-mut); }
.desempenho__tabela.desempenho__perda tfoot td { font-weight: 700; border-bottom: 0;
  border-top: 2px solid var(--bc-line); }

@media (max-width: 900px) {
  .desempenho__kpis { grid-template-columns: repeat(2, 1fr); }
  .desempenho__graficos { grid-template-columns: 1fr; }
}

/* ── tabela comparativa em quadro estreito: o aviso de arrastar ──
 *
 * O aviso aparece quando o contentor da tabela ROLA DE VERDADE, e so entao.
 * Limite fixo de largura nao acerta: a largura natural da tabela muda com os
 * numeros (894px num grupo de uma pessoa, 937px na visao geral de hoje, ~990px
 * no volume-alvo com tempos longos), e qualquer limite deixa uma faixa em que
 * o aviso aparece sem haver o que arrastar, ou a tabela rola sem aviso.
 *
 * QUEM SABE SE ROLA E O NAVEGADOR, e a pergunta e feita em CSS, sem
 * JavaScript: `scroll-timeline` da um nome a linha do tempo de rolagem do
 * contentor, e essa linha do tempo so esta ATIVA quando ha o que rolar. O
 * aviso se liga a ela; os quadros-chave tem inicio e fim IGUAIS, entao nada se
 * move -- eles so valem (aviso a vista) ou nao valem (aviso recolhido).
 * `timeline-scope` leva o nome ate `#desempenho-conteudo`, porque o aviso e
 * vizinho do contentor, nao filho dele. Depois da troca de 30 s o elemento
 * novo ja nasce com tudo isso: nao ha estado para perder.
 *
 * "REDUZIR MOVIMENTO" desliga `animation` no painel inteiro com `!important`
 * (z_refinamento.css, marca_tokens.css) -- e levaria o aviso junto. Como aqui
 * nada se move, a regra e repetida com `!important` e seletor mais forte. */
@keyframes desempenho-arraste {
  from, to { height: auto; margin-top: .6rem; visibility: visible; }
}
@supports (animation-timeline: scroll()) and (timeline-scope: --x) {
  #desempenho-conteudo { timeline-scope: --desempenho-rolagem; }
  .desempenho__tabela-rolagem { scroll-timeline: --desempenho-rolagem inline; }
  .desempenho__arraste { animation: desempenho-arraste linear both;
    animation-timeline: --desempenho-rolagem; }
  @media (prefers-reduced-motion: reduce) {
    .desempenho .desempenho__arraste { animation: desempenho-arraste linear both !important;
      animation-timeline: --desempenho-rolagem !important; }
  }
}
/* Navegador sem linha do tempo de rolagem (Firefox, Safari anterior ao 26): o
   limite fixo de antes, pela largura do QUADRO (`@container`), que e
   aproximado -- no celular acerta sempre, porque la a tabela nunca cabe. */
@supports not ((animation-timeline: scroll()) and (timeline-scope: --x)) {
  #desempenho-conteudo { container-type: inline-size; }
  @container (max-width: 59rem) {
    .desempenho__arraste { height: auto; margin-top: .6rem; visibility: visible; }
  }
}

@media (max-width: 760px) {
  /* Celular: a tabela rola de lado com o nome fixo; a coluna do nome estreita
     (o nome quebra em mais linhas) para sobrar espaco de dado. */
  .desempenho__comparativo { --desempenho-nome: 6.6rem; }
  .desempenho__comparativo .desempenho__col-nome { padding-left: .7rem; }
  .desempenho__comparativo .desempenho__col-nome a { font-size: .75rem; text-wrap: wrap; }
  .desempenho__contas li { white-space: normal; }
  .desempenho__ajuda dl { grid-template-columns: 1fr; }
  /* Os campos de data passam para a linha de baixo em vez de estourar a
     largura da pagina. */
  .desempenho__filtro-grupo { flex-wrap: wrap; }
}