/* Máquina SEO: o que o painel precisa além do v4.css (kit v4-kit-2026.10.21).
   1. Componentes da casca que no kit ficam no <style> do app.html (cabeçalho, descrição, avisos, cartões, interruptor,
      sino, filtros, KPI que é link, vazio, esqueleto, mensagens de seção): copiados como estão, porque a CSP do painel
      não aceita <style> na página. A subir para o v4.css comum.
   2. Peças do painel (tabela que vira cartões com classes por papel, meta do dia, etapas, documentos, checklist).
   Só tema claro. */

/* cores de borda e de estado que o v4.css ainda não tem como token (a subir para o v4.css comum) */
:root { --atencao-borda: #F5DFA3; --atencao-forte: #E8B33A; --ok-borda: #C7E8D2; --erro-borda: #F7C9C4; --marca-borda: #CFE0FF;
  --erro-hover: #912018; --link-no-escuro: #B9D0FF; --texto-no-escuro: #E8ECF6; }

/* ---------------------------------------------------------------- 1. casca (do app.html do kit) */
.app-cab .relogio { min-width: 140px; justify-content: center; } /* o lugar do relógio já reservado: o texto entra depois da carga sem empurrar o sino */
.app-cab .conta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-m); background: var(--fundo-2); border: 1px solid var(--linha); font-size: 14px; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-cab .ico-botao { width: 40px; height: 40px; border: 0; background: none; border-radius: var(--r-m); color: var(--texto); display: grid; place-items: center; position: relative; }
.app-cab .ico-botao:hover { background: var(--fundo-2); }
.app-cab .ico-botao .ponto { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--contador); box-shadow: 0 0 0 2px #fff; }
.app-cab .sep { width: 1px; height: 20px; background: var(--linha); }
.desc, .desc-caixa .desc { color: var(--texto-2); font-size: 15px; max-width: 80ch; }
.desc-caixa { display: grid; justify-items: start; }
/* os 44 px do "Saiba mais" começam na borda de baixo do parágrafo (com -10 px, subiam 8 px sobre a 2ª linha) */
.desc-mais { display: none; align-items: center; min-height: 44px; margin-block: -2px -12px; padding: 0; border: 0; background: none; color: var(--link); font-size: 15px; font-weight: 600; }

.avisos { position: fixed; left: 24px; bottom: 24px; z-index: 100; width: min(440px, calc(100vw - 48px)); display: grid; pointer-events: none; }
/* acima da barra de baixo do menu, que vai até 767 px (celular deitado e tablet pequeno também) */
@media (max-width: 767px) { .avisos { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: auto; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 16px; border-radius: var(--r-m); background: var(--tinta); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: var(--sombra-3); animation: toast-entra .2s var(--curva); }
.toast span { flex: 1; min-width: 0; padding-block: 10px; }
.toast.erro { background: var(--erro); }
.toast button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-m); background: none; color: var(--link-no-escuro); font-size: 14px; font-weight: 700; }
.toast.erro button { color: #fff; text-decoration: underline; }
.toast button:hover { background: rgb(255 255 255 / .1); }
.toast button:focus-visible { outline-color: #fff; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }

.card { padding: 20px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--linha); display: grid; gap: 12px; min-width: 0; }
.card .lin { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.card .lin:last-child { border-bottom: 0; }
.card .lin b { color: var(--tinta); font-weight: 600; }
.campo-linha { min-height: 44px; width: 220px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; }
.campo-linha:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.segm { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 8px; background: var(--superficie-3); gap: 2px; }
.segm button { height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--tinta); font-size: 14px; font-weight: 500; }
.segm button[aria-pressed="true"] { background: #fff; color: var(--marca-forte); font-weight: 600; box-shadow: var(--sombra-1); }
/* trilho desligado em --texto-3 (3,3:1 sobre o cartão; o --borda-forte do kit dava 1,45:1, abaixo do AA 1.4.11) */
.toggle { flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--texto-3); border: 0; position: relative; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s var(--curva); }
.lin-toggle { position: relative; min-height: 56px; cursor: pointer; }
.lin-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lin-toggle input:checked + .toggle { background: var(--marca); }
.lin-toggle input:checked + .toggle::after { transform: translateX(18px); }
.lin-toggle input:focus-visible + .toggle { outline: 2px solid var(--foco); outline-offset: 2px; }
.msg-corpo { display: grid; justify-items: start; min-width: 0; }
.msg-acao { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.msg-acao + .msg-acao { margin-top: 10px; } /* dois atalhos no mesmo aviso: a área de 44 px de um não cobre o outro */
/* a partir de 768 px, os dois atalhos lado a lado embaixo do texto (empilhados, ficavam com 44 px de vão numa caixa larga) */
@media (min-width: 768px) {
  .msg-corpo:has(> .msg-acao + .msg-acao) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .msg-corpo:has(> .msg-acao + .msg-acao) > span { flex: 0 0 100%; }
  .msg-corpo > .msg-acao + .msg-acao { margin-top: 0; }
}

.notif { position: relative; }
.suspenso.notif-painel { left: auto; right: 0; min-width: 0; width: min(380px, calc(100vw - 24px)); padding: 8px; }
.notif-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; }
.notif-cab strong { font-size: 15px; color: var(--tinta); }
.notif-lidas { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-m); background: none; color: var(--link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.notif-lidas:hover { background: var(--fundo-2); text-decoration: none; }
.notif-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.notif-lista a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; align-items: start; min-height: 44px; padding: 10px; border-radius: var(--r-m); color: var(--tinta); text-decoration: none; }
.notif-lista a:hover { background: var(--fundo-2); }
.notif-lista a > i { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--atencao); }
.notif-lista a.critico > i { background: var(--erro); }
.notif-lista b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.notif-lista small { grid-column: 2; font-size: 13px; color: var(--texto-2); }
.notif-vazio { padding: 10px; font-size: 14px; color: var(--texto-2); }

.filtro.ordenar-m { display: none; }
/* filtro segmentado que rola de lado no celular: a ponta escondida esmaece, como na .subnav.rola do kit (painel.js marca
   .rola, .no-inicio e .no-fim e rola a faixa até a opção escolhida). A subir para o v4.css. */
.abas-filtro.rola { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.abas-filtro.rola:not(.no-inicio) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.abas-filtro.rola.no-fim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.abas-filtro.rola.no-fim.no-inicio { -webkit-mask-image: none; mask-image: none; }
.abas-filtro .aba .contador.erro, .abas-filtro .aba:not([aria-selected="true"]):not(.ativa) .contador.erro { background: var(--erro); color: #fff; } /* "Com erro" chama o olho quando tem alguma */
.filtros-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.filtro { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); }
.filtro > span { white-space: nowrap; }
.filtro .campo-linha { width: auto; }
@media (min-width: 720px) { form[data-busca] .campo-linha { width: 300px; } }
.tabela-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; color: var(--tinta); }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--borda-forte); background: #fff; text-decoration: none; }
/* bloco de texto (não flex): o rótulo que quebra em duas linhas leva a seta logo depois da última palavra, não na ponta
   do cartão (como inline-flex num .kpi em grade, ele virava flex e o texto, um item da largura toda) */
.kpi-ir { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--link); text-wrap: pretty; }
.kpi-ir .ico { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.vazio { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--borda); border-radius: 12px; color: var(--texto-2); }
.vazio > .ico { width: 36px; height: 36px; color: var(--texto-3); }
.vazio strong, .vazio h1 { color: var(--tinta); font-size: 16px; }
.vazio p { max-width: 60ch; }
.esqueleto { display: grid; gap: 10px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-3) 25%, var(--fundo-2) 50%, var(--superficie-3) 75%); background-size: 200% 100%; animation: esqueleto-passa 1.4s linear infinite; }
.esqueleto i:nth-child(3n+1) { width: 40%; } .esqueleto i:nth-child(3n+2) { width: 90%; } .esqueleto i:nth-child(3n) { width: 75%; }
@keyframes esqueleto-passa { to { background-position: -200% 0; } }
.msg-secao { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; align-items: flex-start; }
.msg-secao > .ico { flex: none; margin-top: 2px; }
/* tela sem tabela (Conta, Pendências, documentos): o aviso na medida das pendências e do documento, não na largura toda */
.app-conteudo:not(:has(.tabela)) > .msg-secao { max-width: 1080px; }
.msg-secao.info { background: var(--info-fundo); color: var(--tinta); } .msg-secao.erro { background: var(--erro-fundo); color: var(--erro); } .msg-secao.ok { background: var(--ok-fundo); color: var(--ok); } .msg-secao.atencao { background: var(--atencao-fundo); color: var(--atencao); }
/* o link no meio do texto do aviso vermelho ou âmbar (a pendência) no tom do aviso, sublinhado como o atalho */
.msg-secao:is(.erro, .atencao) > span a, .msg-secao:is(.erro, .atencao) .msg-corpo > span a:not(.msg-acao) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 2. painel */
body.painel { background: var(--fundo-3); }
.painel .app { min-height: 100dvh; border-radius: 0; }
.painel .app-painel { overflow: visible; overflow: clip; } /* sem rolagem própria: a barra Salvar fica presa na tela */
.app-cab { min-width: 0; }
.app-cab h1 { font-size: 26px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-cab h1:focus { outline: none; }
/* título inteiro no corpo quando o do cabeçalho sai cortado (artigo no celular); painel.js liga e desliga */
.titulo-inteiro { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; }
.cab-voltar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; margin-right: -8px; border-radius: var(--r-m); color: var(--tinta); }
.cab-voltar:hover { background: var(--fundo-2); }
.app-conteudo { grid-template-columns: minmax(0, 1fr); }
/* toda grade de uma coluna do painel encolhe até a largura da tela (palavra longa quebra, não estica a coluna) */
.app-conteudo :is(.pilha, .tabela-bloco, .doc ul, .doc ol, .padrao-lista, .juiz ul, .pendencias, .pendencia, .pendencia form, .checklist, .servicos, .card, .vazio, .msg-corpo) { grid-template-columns: minmax(0, 1fr); }
.app-conteudo:focus { outline: none; }
.app-conteudo[aria-busy="true"] > :not(.esqueleto) { opacity: .55; }
.tinta { color: var(--tinta); }
.texto-2 { color: var(--texto-2); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.quebra { overflow-wrap: anywhere; }
.texto-ok { color: var(--ok); font-weight: 600; }
.texto-erro { color: var(--erro); font-weight: 600; }
.btn.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn.perigo:hover { background: var(--erro-hover); border-color: var(--erro-hover); }

.bloco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.bloco + .bloco { margin-top: 8px; }
.grade-2 > .bloco + .bloco, .grade-3 > .bloco + .bloco { margin-top: 0; } /* a coluna da direita na altura da esquerda */
.sub-titulo { font-size: 15px; line-height: 1.35; color: var(--tinta); margin-top: 4px; }
.bloco-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.bloco-cab h2 { font-size: 18px; line-height: 1.3; }
.bloco-cab h2 .peq { font-weight: 500; color: var(--texto-2); }
/* títulos lado a lado na mesma altura (o bloco com link no cabeçalho ganha 44 px) */
.grade-2 > .bloco > .bloco-cab { min-height: 44px; }
/* botão solto no fim do bloco ("Carregar mais", "Mostrar todas") no tamanho do texto, não na largura toda */
.bloco > .btn { justify-self: start; }
.bloco-cab .linha { gap: 8px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1199px) { .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); } }
/* grade com tabela empilha até 1279 px: lado a lado, de 1024 a 1210, a coluna da direita (Nota média dos Juízes) ficava
   atrás de uma rolagem interna */
@media (max-width: 1279px) { .grade-2:has(.tabela) { grid-template-columns: minmax(0, 1fr); } }
.kpis .kpi { min-width: 0; }
.kpi { align-content: start; } /* números da mesma linha alinhados mesmo quando um cartão tem nota mais longa */
.kpi .numero { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .numero small { font-size: 15px; font-weight: 600; color: var(--texto-2); }
.kpi .kpi-nota { font-size: 13px; color: var(--texto-2); }
.kpi.atencao { background: var(--atencao-fundo); border-color: var(--atencao-borda); }
.kpi.ok { background: var(--ok-fundo); border-color: var(--ok-borda); }
.kpi.erro { background: var(--erro-fundo); border-color: var(--erro-borda); }
.lozenge.neutro { background: var(--superficie-3); color: var(--texto); }
.btn-p.btn-icone { width: 36px; padding: 0; }
.link-acao { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.link-acao:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-acao.perigo { color: var(--erro); }
.link-acao.secundaria { color: var(--texto-2); font-weight: 500; } /* Pausar do e-book: muda o funil no ar, fica atrás dos links de ver */
.link-acao .ico { width: 16px; height: 16px; }

/* tabela que vira cartões (classes por papel da coluna: c-t título, c-s situação, c-m meta, c-n número, c-a ações,
   c-o some no celular). No celular, "Ordenar por" usa a mesma ordenação do cabeçalho (v4.js). */
.tabela-bloco { display: grid; gap: 8px; min-width: 0; }
.tabela th.sem-ordem { pointer-events: none; }
.tabela th.sem-ordem::after { content: none; }
.tabela td.c-n, .tabela th.c-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a caixa que rola de lado prende o texto oculto (.vh, absoluto) das células: solto, ele alargava a página de 720 a
   937 px (o kit fez o mesmo na .subnav). A subir para o v4.css. */
.tabela-caixa { position: relative; }
.tabela td.c-a { text-align: right; white-space: nowrap; }
.tabela td.c-a .linha { justify-content: flex-end; flex-wrap: nowrap; gap: 6px 12px; }
.tabela td.c-a .btn { white-space: nowrap; } /* o text-wrap: balance do .btn (v4.css) quebrava "Ver no site" em 3 linhas */
.tabela td.c-t { min-width: 200px; color: var(--tinta); font-weight: 600; }
.tabela td.c-t a { color: var(--tinta); font-weight: 600; }
.tabela td.c-t .sub { display: block; font-size: 13px; color: var(--texto-2); font-weight: 400; margin-top: 2px; }
.tabela td.c-t .sub.texto-erro { color: var(--erro); font-weight: 600; } /* o .sub cinza vencia */
.tabela td.c-t .sub.texto-atencao { color: var(--atencao); font-weight: 600; } /* "1 serviço a confirmar" (tem padrão) */
.tabela td.c-t .sub a.texto-erro { color: var(--erro); text-decoration: underline; text-underline-offset: 3px; } /* "canal do WordPress desligado": leva à Publicação */
.tabela td.c-m { color: var(--texto-2); }
.tabela-caixa.limite { max-height: 640px; }
.mostrar-todas { justify-self: start; }
[data-acao="mais-eventos"] { justify-self: start; margin-top: 16px; } /* longe do toque de 44 px do último link da linha do tempo */
.tabela caption { text-align: left; }
.tabela tr.destaque td { background: var(--atencao-fundo); }
.tabela tr.destaque-erro td { background: var(--erro-fundo); } /* bandeja em erro: o vermelho do chip Erro da esteira, não o amarelo da parada */

/* meta do dia por cliente */
.metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
/* todos os cartões com a mesma largura: a barra ocupa o cartão, e o mesmo "1 de 3" com trilhos de comprimentos diferentes
   parecia mais adiantado no cartão largo (rodada 6 do portão R3). Tablet e notebook pequeno: 2 por linha, e o número
   ímpar de clientes (os 7 da Rodada 3) com o último centrado, na largura dos outros */
@media (min-width: 720px) and (max-width: 1279px) {
  .metas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metas > * { grid-column: span 2; }
  .metas > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
/* 7 clientes no notebook: 4 + 3 com a 2ª linha centrada (o auto-fit de 240 px deixava 4 + 3 com um vazio a 1280 e 5 + 2 a
   1440), e os 7 numa linha só no monitor grande (com a barra de rolagem do Windows, o auto-fit virava 6 + 1 a 1920) */
@media (min-width: 1280px) and (max-width: 1839px) {
  .metas:has(> :nth-child(7):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .metas:has(> :nth-child(7):last-child) > * { grid-column: span 2; }
  .metas:has(> :nth-child(7):last-child) > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1840px) { .metas:has(> :nth-child(7):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1023px) {
  .kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5 cartões: 3 na 1ª linha e 2 na 2ª, sem buraco (em 3 colunas, a 2ª linha ficava com um espaço vazio) */
  .kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis:has(> :nth-child(5):last-child) > :nth-child(-n+3) { grid-column: span 2; }
  .kpis:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}
/* align-content: start: o cartão esticado até o mais alto da linha não divide a sobra entre as linhas de dentro (a barra,
   que se compara entre os sites, descia nos cartões com menos texto) */
.meta { display: grid; align-content: start; gap: 8px; padding: 14px 16px; border-radius: var(--r-l); border: 1px solid var(--linha); background: #fff; color: inherit; text-decoration: none; min-width: 0; }
a.meta:hover { border-color: var(--borda-forte); text-decoration: none; }
.meta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.meta-cab strong { color: var(--tinta); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-num { font-size: 22px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-num small { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.barra { height: 8px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; }
.barra > i { display: block; height: 100%; width: var(--pct, 0%); border-radius: 4px; background: var(--marca); transition: width .3s var(--curva); }
.barra.ok > i { background: var(--ok); }
.barra.atencao > i { background: var(--atencao); }
.barra.erro > i { background: var(--erro); }
.meta.atrasada { border-color: var(--atencao-borda); background: var(--atencao-fundo); }
.meta.canal-fora { border-color: var(--erro-borda); background: var(--erro-fundo); } /* o canal fora no vermelho do alerta crítico, da lista de Clientes e da Publicação */
.meta.canal-fora .barra { background: var(--erro-borda); } .meta.atrasada .barra { background: var(--atencao-borda); } /* o trilho do "0 de 3" sumia no fundo do cartão */
.meta-info { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--texto-2); }

/* esteira: quantas bandejas em cada etapa */
.esteira { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.esteira li { display: grid; gap: 2px; padding: 10px 8px; border-radius: var(--r-m); background: var(--fundo-2); border: 1px solid var(--linha); text-align: center; min-width: 0; }
.esteira li b { font-size: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.esteira li span { font-size: 12.5px; color: var(--texto-2); line-height: 1.25; }
.esteira li.cheia { background: var(--marca-suave); border-color: var(--marca-borda); }
.esteira li.erro { background: var(--erro-fundo); border-color: var(--erro-borda); }
.esteira li.erro b { color: var(--erro); }
@media (max-width: 1023px) { .esteira { grid-template-columns: repeat(var(--n-m, 4), minmax(0, 1fr)); } }

/* próximas ações do Maestro e eventos */
.acoes-lista, .linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.acoes-lista li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.acoes-lista li:last-child { border-bottom: 0; }
.acoes-lista .lozenge { margin-top: 1px; justify-self: start; }
.acoes-lista p { color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.acoes-lista small { display: block; color: var(--texto-2); font-size: 13px; }
/* o comando do Maestro tirado da frase (P.paraGeraldo): detalhe embaixo, cinza */
.app-conteudo .tecnico { display: block; margin-top: 2px; color: var(--texto-2); font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
/* ângulo longo da pauta: as primeiras linhas e "Ver o ângulo inteiro" (antes era cortado em 180 caracteres, sem onde ler) */
.angulo-mais > summary { display: block; cursor: pointer; list-style: none; }
.angulo-mais > summary::-webkit-details-marker { display: none; }
.angulo-mais .ver { display: inline-flex; align-items: center; min-height: 32px; color: var(--link); font-size: 14px; font-weight: 600; }
.angulo-mais[open] .ver-abrir, .angulo-mais:not([open]) .ver-fechar, .tabela td .sub.corte:has(+ .angulo-mais[open]) { display: none; }
.acoes-lista.numerada li { grid-template-columns: auto minmax(0, 1fr); } /* número curto: o texto não fica espremido */
.acoes-lista.numerada li > .lozenge:first-child { min-width: 2.2em; justify-content: center; font-variant-numeric: tabular-nums; } /* do 10 ao 12 o texto começava 7 px mais à direita */
/* alerta: o que fazer logo abaixo do título e as ações ao lado do texto (não na outra ponta da tela larga) */
.alerta-corpo { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 16px; min-width: 0; max-width: 1080px; }
.alerta-corpo p { flex: 0 1 72ch; min-width: 0; }
.alerta-corpo .linha { gap: 8px; }
@media (max-width: 1439px) { .alerta-corpo { flex-direction: column; align-items: flex-start; } .alerta-corpo p { flex: none; max-width: 72ch; } } /* a 1280 o 1º alerta tinha os botões ao lado e o 2º embaixo */
.alerta-oque { display: block; margin-top: 2px; color: var(--texto); }
.alerta-corpo .alerta-para { margin: 0; max-width: 72ch; }
@media (min-width: 1440px) { .alerta-corpo .alerta-para { flex: 1 1 100%; } } /* o passo a passo do que pede o Geraldo fica na linha de baixo, sob o título e os botões */
.copiar-passo { margin-bottom: 24px; } /* Central › Maestri: o botão ficava a 8 px do título do passo seguinte (os outros blocos têm uns 40 px) */
.acoes-lista li:focus { outline: none; }
.acoes-lista li.destaque { background: var(--atencao-fundo); box-shadow: 0 0 0 8px var(--atencao-fundo); border-radius: 2px; }
.lista-curta + .ver-lista { margin-top: 4px; justify-self: start; }
/* O que o Maestro faz agora: automático, corta em 5 também no tablet e no computador (as 13 ações empurravam a Esteira) */
.lista-curta.sempre:not(.aberta) > li:nth-child(n+6) { display: none; }
.so-celular { display: none; }
.linha-tempo li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.linha-tempo li:last-child { border-bottom: 0; }
.linha-tempo time { color: var(--texto-2); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.linha-tempo b { color: var(--tinta); font-weight: 600; }
.linha-tempo span { min-width: 0; overflow-wrap: anywhere; }

/* agentes */
.agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 200 px deixava o número do estado sozinho na linha seguinte em 1920 */ gap: 8px; list-style: none; margin: 0; padding: 0; }
.agentes li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; align-items: center; align-content: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-m); background: #fff; }
.agentes li > i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.agentes li.parado > i { background: var(--atencao); }
.agentes li b { color: var(--tinta); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentes li small { grid-column: 2; font-size: 13px; color: var(--texto-2); }

/* rodadas de hoje */
.horarios { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.horarios li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pilula); border: 1px solid var(--borda); background: #fff; font-size: 14px; color: var(--texto); font-variant-numeric: tabular-nums; }
.horarios li.aberta { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); font-weight: 600; }
.horarios li.passou:not(.aberta) { background: var(--fundo-2); color: var(--texto-2); }
.horarios li.proxima { border-color: var(--marca); color: var(--marca-forte); font-weight: 600; }
/* as rodadas de hoje (R1, R2 e R3 encadeadas, recuperação), cada uma com o estado */
.rodadas-dia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rodadas-dia li { display: flex; flex-wrap: wrap; align-items: first baseline; gap: 4px 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-l); border: 1px solid var(--linha); background: #fff; font-size: 14px; color: var(--texto); font-variant-numeric: tabular-nums; }
.rodadas-dia li.aberta { background: var(--ok-fundo); border-color: var(--ok-borda); }
.rodadas-dia li.aberta .lozenge { background: #fff; } /* a pílula some no fundo verde da linha aberta */
.rodadas-dia li.proxima { border-color: var(--marca); }
/* a atrasada (próxima, em atenção) no tom do cartão Próxima rodada */
.rodadas-dia li.proxima:has(.lozenge.atencao) { border-color: var(--atencao-borda); background: var(--atencao-fundo); }
.rodadas-dia li.proxima:has(.lozenge.atencao) .lozenge { background: #fff; }
.rodadas-dia li.passou { background: var(--fundo-2); color: var(--texto-2); }
.rodadas-dia .rodada-quando { flex: 0 0 10.5em; }
.rodadas-dia .rodada-quando b { color: var(--tinta); }
/* nome, pílula e 1ª linha do estado na mesma linha de base (centrado, o nome ficava entre a pílula e o texto que desce) */
.rodadas-dia .rodada-estado { flex: 1 1 14em; display: flex; flex-wrap: wrap; align-items: first baseline; gap: 4px 8px; min-width: 0; }
/* no celular, o texto do estado sempre desce para baixo da pílula: as linhas vizinhas com um desenho só (a 360, a R2 descia
   e a R3 ficava ao lado) */
@media (max-width: 719px) { .rodadas-dia .rodada-estado > span:not(.lozenge) { flex: 0 0 100%; } }

/* ficha (pares rótulo e valor) */
.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; color: var(--tinta); min-width: 0; max-width: 80ch; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ficha dd { margin-bottom: 8px; }
  /* ficha de valores curtos (números da bandeja): rótulo e valor na mesma linha */
  .ficha.curta { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; } .ficha.curta dd { margin-bottom: 0; }
}

/* juízes */
.juizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.juiz { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-l); border: 1px solid var(--linha); background: #fff; min-width: 0; align-content: start; }
.juiz.aprovo { border-color: var(--ok-borda); background: var(--ok-fundo); }
.juiz.nao { border-color: var(--erro-borda); background: var(--erro-fundo); }
.juiz .lozenge { justify-self: start; } /* "Ainda não avaliou" no tamanho do texto, não uma barra */
.juiz:is(.aprovo, .nao) .lozenge { background: #fff; } /* a pílula sumia no fundo verde ou vermelho do cartão */
.juiz-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; } /* a altura da .juiz-nota: o juiz sem nota ficava com o título 5 px acima dos vizinhos */
.juiz-cab strong { color: var(--tinta); font-size: 14px; }
.juiz-nota { font-size: 20px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.juiz ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--tinta); display: grid; gap: 4px; }
.juiz small { color: var(--texto-2); font-size: 13px; }
@media (max-width: 1023px) { .juizes { grid-template-columns: minmax(0, 1fr); } }
/* imagens da bandeja (juiz de imagem): a miniatura do vencedor, a nota, o gerador e os candidatos */
.imagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; max-width: 1280px; } /* sem trilha vazia: os cartões ocupam a linha, na medida de Ativos */
@media (min-width: 720px) and (max-width: 1023px) { .imagens { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* capa + 2 numa linha, como a 1024 (a 768 ficava 2 + 1 com meia linha vazia) */
.imagem-cartao { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--r-l); border: 1px solid var(--linha); background: #fff; min-width: 0; align-content: start; }
.imagem-cartao.atencao { border-color: var(--atencao-borda); background: var(--atencao-fundo); }
.imagem-cartao img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-m); background: var(--fundo-2); }
.imagem-cartao figcaption { display: grid; gap: 6px; min-width: 0; }
.imagem-cartao .lozenge { justify-self: start; }
.imagem-cartao ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--tinta); display: grid; gap: 4px; }
.imagem-cartao small { color: var(--texto-2); font-size: 13px; }
@media (max-width: 719px) { .imagens { grid-template-columns: minmax(0, 1fr); } }
.padrao-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--tinta); }

/* documentos da Central: o texto na medida de leitura (84ch) e a tabela e o acordeão até 1080 px, a mesma medida das
   pendências, do checklist e dos construtores (a tabela de 8 colunas do RESUMO.md não cabia em 84ch e rolava por dentro) */
.doc { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.6; color: var(--tinta); min-width: 0; }
.doc :is(p, li, h1, h2, h3, h4, blockquote, pre) { max-width: 84ch; }
.bloco.medida { max-width: 1080px; }
.doc h1 { font-size: 24px; line-height: 1.25; margin-top: 8px; }
.doc h2 { font-size: 20px; line-height: 1.3; margin-top: 16px; }
.doc h3 { font-size: 17px; margin-top: 8px; }
.doc h4 { font-size: 15px; }
.doc ul, .doc ol { padding-left: 22px; display: grid; gap: 6px; }
.doc code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; padding: 1px 5px; border-radius: 4px; background: var(--superficie-3); overflow-wrap: anywhere; }
.doc pre { padding: 14px 16px; border-radius: var(--r-m); background: var(--fundo-2); border: 1px solid var(--linha); overflow-x: auto; font-size: 13.5px; line-height: 1.5; }
.doc pre code { padding: 0; background: none; overflow-wrap: normal; }
.doc blockquote { padding: 8px 16px; border-left: 3px solid var(--borda-forte); color: var(--texto); }
.doc hr { border: 0; border-top: 1px solid var(--linha); }
.doc .tabela-caixa { max-width: 100%; }
.doc .tabela td, .doc .tabela th { vertical-align: top; }
.doc-arquivo { display: flex; flex-wrap: nowrap; gap: 4px 12px; align-items: center; font-size: 14px; color: var(--texto-2); }
.doc-arquivo > .ico { flex: none; }
.doc-arquivo > span { min-width: 0; overflow-wrap: anywhere; } /* o ícone não fica sozinho numa linha no celular */
.doc-arquivo code { font-size: 13px; }

/* superprompt */
.prompt { position: relative; margin: 0; max-height: 520px; overflow: auto; padding: 16px; border-radius: var(--r-l); background: var(--tinta); color: var(--texto-no-escuro); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* o Copiar ao lado do título, não na outra ponta da tela larga. A caixa cabe a linha mais longa do SUPERPROMPT-MAESTRI.md
   (124 caracteres) mais o padding e a borda: o ch é o da própria monoespaçada, e de 1280 px para cima nenhuma linha quebra
   (com 110ch, menos o padding, sobravam 105 e quase toda linha deixava 1 ou 2 palavras sozinhas embaixo) */
.bloco.cab-junto > .bloco-cab { justify-content: flex-start; }
.bloco.cab-junto > .prompt { max-width: calc(126ch + 34px); }

/* checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checklist li { border-bottom: 1px solid var(--linha); }
.checklist li:last-child { border-bottom: 0; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--marca); }
.check.feito > span { color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.check code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; padding: 1px 5px; border-radius: 4px; background: var(--superficie-3); overflow-wrap: anywhere; }
.check a, .doc a { overflow-wrap: anywhere; } /* endereço solto que virou link quebra na borda */
.progresso { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--texto-2); }
.progresso .barra { flex: 1; max-width: 320px; }

/* pendências do Geraldo */
.pendencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pendencia { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; min-width: 0; scroll-margin-top: 16px; } /* aberta por âncora (#pendencia-6), não colada na borda */
.pendencia.aberta { border-color: var(--atencao-borda); box-shadow: inset 3px 0 0 var(--atencao-forte); }
.pendencia-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
.pendencia-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--superficie-3); color: var(--tinta); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pendencia h2 { font-size: 16px; line-height: 1.35; padding-top: 5px; }
.pendencia-detalhe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.55; color: var(--texto); min-width: 0; }
.pendencia-detalhe p { margin: 0; }
.pendencia-detalhe pre:focus-visible, .check-codigo pre:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.copiar-pre { justify-self: start; }
/* comando: uma linha por comando, como no terminal (o pre do kit quebra no meio da palavra); o que não cabe rola de lado */
.pendencia-detalhe pre, .check-codigo pre, .doc pre { white-space: pre; word-break: normal; overflow-wrap: normal; }
/* comando que rola de lado: sombra na ponta direita enquanto há mais texto (a capa "local" anda com o texto e cobre a
   sombra no fim da rolagem); o Copiar copia o comando inteiro */
.pendencia-detalhe pre, .check-codigo pre {
  background: linear-gradient(var(--fundo-2), var(--fundo-2)) right center / 20px 100% no-repeat local,
    linear-gradient(to left, rgb(11 16 51 / .16), rgb(11 16 51 / 0)) right center / 20px 100% no-repeat scroll,
    var(--fundo-2);
}
/* bloco de código do passo do Maestri, fora do rótulo do checkbox e alinhado com o texto do passo */
.check-codigo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; padding: 0 0 12px 36px; min-width: 0; }
.check-codigo pre { justify-self: stretch; margin: 0; min-height: 44px; padding: 10px 12px; overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--linha); font-size: 13.5px; line-height: 1.5; color: var(--tinta); }
.check-codigo code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.pendencia-detalhe code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; padding: 1px 4px; border-radius: 4px; background: var(--superficie-3); overflow-wrap: anywhere; }
.pendencia-detalhe pre { margin: 8px 0 0; min-height: 44px; padding: 12px; overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--linha); font-size: 13.5px; line-height: 1.5; }
.pendencia-detalhe pre code { padding: 0; background: none; overflow-wrap: normal; }
/* código dentro de pre no tamanho do pre: o .9em e o .88em do código em texto davam cerca de 12 px */
.pendencia-detalhe pre code, .doc pre code, .check-codigo pre code { font-size: inherit; }
.pendencia-texto { display: grid; gap: 12px; min-width: 0; align-content: start; }
/* o padrão de cada item à vista, logo abaixo do título, com "Vale o padrão" ao lado */
.pendencia-padrao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--marca-borda); border-radius: var(--r-m); background: var(--marca-suave); font-size: 15px; line-height: 1.45; color: var(--tinta); }
.pendencia-padrao p { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.pendencia-padrao code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; padding: 1px 4px; border-radius: 4px; background: #fff; overflow-wrap: anywhere; word-break: break-all; } /* caminho longo enche a linha, não quebra no hífen */
.pendencia-dica { font-weight: 400; color: var(--texto-2); }
.pendencia form { display: grid; gap: 12px; }
.pendencia textarea { min-height: 72px; resize: vertical; }
.pendencia .linha { justify-content: space-between; }
.pendencia-quando { font-size: 13px; color: var(--texto-2); }
@media (max-width: 719px) { .pendencia-cab { grid-template-columns: auto minmax(0, 1fr); } .pendencia-cab .lozenge { grid-column: 2; justify-self: start; } }

/* telas de Leads e da Central (B3b): contato do lead, situação da pendência, checklist, sumário e construtores */
.texto-atencao { color: var(--atencao); font-weight: 600; }
.link-acao.texto-atencao { text-decoration: underline; text-underline-offset: 3px; } /* aviso que é link ("0 de 6: abrir o PDF") */
/* aviso de texto numa coluna de número: quebra em linhas curtas, em vez de alargar a coluna (o td.c-n não quebra) */
.tabela td .celula-aviso { display: block; min-width: 22ch; max-width: 34ch; margin-left: auto; white-space: normal; text-align: left; }
.contato { display: grid; justify-items: start; gap: 0; min-width: 0; }
.contato .link-acao { gap: 6px; max-width: 100%; text-align: left; }
.situacao { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.situacao legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcao { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--borda); border-radius: var(--r-pilula); background: #fff; font-size: 14px; color: var(--tinta); cursor: pointer; }
/* o rádio fica por cima da pílula inteira (alvo de 44 px); a bolinha é desenhada */
.opcao input { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
.opcao::before { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid var(--borda-campo); border-radius: 50%; background: #fff; } /* 3:1 no branco */
.opcao:has(input:checked)::before { border: 5px solid var(--marca); }
.opcao:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-forte); font-weight: 600; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcao input:focus-visible { outline: none; }
.checklist-caixa { display: grid; gap: 12px; min-width: 0; }
.check-quando { display: inline-block; width: 100%; margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.check-quando:empty { display: none; }
.sumario ol { margin: 0; padding-left: 22px; display: grid; }
.sumario a { display: inline-block; padding: 6px 0; }
.construtor { border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; min-width: 0; max-width: 1080px; }
.construtor + .construtor { margin-top: 8px; }
/* nome e caminho empilhados na 1ª coluna, a seta sempre na 2ª (no celular ela caía sozinha numa 2ª linha) */
.construtor > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 14px 16px; color: var(--tinta); font-weight: 600; cursor: pointer; }
.construtor > summary > * { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.construtor > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.construtor > summary small { font-size: 13px; font-weight: 400; color: var(--texto-2); }
.construtor > .doc { padding: 0 16px 16px; }
.construtor > summary::after, .sumario > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); align-self: center; }
.sumario > summary::after { margin-left: 10px; }
.construtor[open] > summary::after, .sumario[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.checklist-caixa, .pendencias { max-width: 1080px; }
.tabela-bloco:has(> .tabela-caixa > .tabela.curta) { max-width: 1280px; } /* 5 colunas ou menos (P.tabela põe .curta) */
#indexacao > :is(.msg-secao, .kpis) { max-width: 1280px; } /* os avisos e os números da Indexação na medida das tabelas dela */
/* Rede: os números e os blocos de Tetos e Recusas na medida da tabela de Pares; Clientes: os avisos na medida da tabela */
#conteudo:has(#tab-pares) > :is(.kpis, .grade-2) { max-width: 1280px; }
#conteudo:has(#tab-clientes) > .msg-secao { max-width: 1280px; }
#conteudo:has(#indexacao) > .msg-secao { max-width: 1280px; } /* Desempenho: os avisos do topo na medida da Indexação, aonde levam */
#conteudo:has(#indexacao) > .kpis { max-width: 1280px; } /* e os números logo abaixo deles, sem degrau na borda direita */
/* Clientes e Rodadas: 6 a 7 colunas com um só texto; no 1920 a tabela ia a 1.760 px e o Fechar ficava a 1.000 px do nome */
.tabela-bloco:has(> .tabela-caixa > :is(#tab-clientes, #tab-rodadas)) { max-width: 1280px; }
/* Desempenho: Oportunidades e Páginas na medida de Consultas e da Indexação (a borda direita ia em zigue-zague a 1920 e 2560) */
.tabela-bloco:has(> .tabela-caixa > :is(#tab-oportunidades, #tab-paginas)), .bloco:has(#tab-oportunidades) > .msg-secao { max-width: 1280px; }
.tabela td.c-contato { white-space: nowrap; }
.tabela td:is(.c-m, .c-n) .sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--texto-2); }
#tab-sitemaps td.c-s .sub { display: block; margin-top: 2px; color: var(--texto-2); } /* embaixo da pílula, como na tabela das páginas */
.tabela td .sub.tinta { color: var(--tinta); } /* "O que fazer" da página bloqueada: é a linha para onde o aviso manda */
/* a partir de 1100 px: texto e padrão à esquerda, resposta à direita (o seletor vence a grade de uma coluna lá de cima) */
@media (min-width: 1100px) {
  .app-conteudo .pendencias > .pendencia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: start; }
  .pendencia-cab { grid-column: 1 / -1; }
}
@media (pointer: fine) and (min-width: 720px) { .contato .link-acao { min-height: 30px; } }
@media (max-width: 719px) {
  .tabela.cartoes td.c-contato { flex: 0 0 100%; }
  .contato { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .check-codigo { padding-left: 0; }
  /* as 4 situações em 2x2 (em 3+1, "Descartada" ficava sozinha e o cartão crescia) */
  .opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tabela de documento vira cartões como as outras (telas-central.js põe c-t e data-rotulo) */
  .sumario a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .construtor > summary { padding: 12px; }
  .construtor > .doc { padding: 0 12px 12px; }
}

/* formulário de configuração do cliente: na tela larga, o formulário fica na medida das pendências e do checklist
   (campo de uma linha com até 520 px, interruptor e "Confirmado" perto do rótulo) */
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grade .largo { grid-column: 1 / -1; }
@media (max-width: 719px) { .form-grade { grid-template-columns: minmax(0, 1fr); } }
/* a Publicação fecha na borda do formulário e da barra Salvar logo abaixo (a ficha, os avisos e o Conferir agora) */
#form-cliente, #publicacao { max-width: 1056px; }
#form-cliente .card:has(.lin-toggle), #form-cliente .servicos, #form-cliente #servicos > .card { max-width: 640px; } /* Novo serviço na medida da lista */
#form-cliente .form-grade:not(:has(textarea)) { max-width: 640px; } /* campo curto (metas, blog, aviso) na medida dos interruptores; texto longo vai a 1056 */
#form-cliente input[type="number"] { max-width: 200px; }
.form-grade .campo { align-content: start; }
.card h3, #indexacao h3 { font-size: 16px; line-height: 1.35; }
#indexacao h3 { margin: 4px 0 0; }
.campo textarea { min-height: 88px; resize: vertical; }
.campo .ajuda { font-size: 14px; }
.servicos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.servico { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--linha); border-radius: var(--r-m); background: #fff; }
@media (max-width: 719px) { .servico { grid-template-columns: minmax(0, 1fr); } .servico > :is(:not(span), .lozenge) { justify-self: start; } }
.servico b { color: var(--tinta); }
.servico small { display: block; color: var(--texto-2); font-size: 13px; }
.barra-salvar { position: static; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; background: #fff; border-top: 1px solid var(--linha); }
.barra-salvar .peq { margin-left: auto; }
.barra-salvar.pendente { position: sticky; box-shadow: 0 -8px 16px -12px rgb(11 16 51 / .25); } /* presa só com mudança para salvar */
/* com a barra Salvar presa, o Tab não para em campo escondido atrás dela (WCAG 2.4.11): a folga de baixo conta a barra
   Salvar e, até 767 px, também a barra de baixo do menu. O :has(.app.app-trilho:not(.app-demo)) vence a regra do kit, que só conta o menu */
@media (max-width: 767px) {
  .barra-salvar { bottom: calc(64px + env(safe-area-inset-bottom)); } /* acima da barra de baixo do menu, que vai até 767 px */
  html:has(.app.app-trilho:not(.app-demo)):has(.barra-salvar.pendente) { scroll-padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { html:has(.barra-salvar.pendente) { scroll-padding-bottom: 88px; } }
/* com a barra Salvar presa, o aviso sobe para cima dela (o "Falta salvar" e o erro ao salvar cobriam o Salvar). A barra
   tem uns 69 px: no computador o aviso termina 19 px acima dela; no celular a barra começa a 133 px do pé e o aviso a 144 */
html:has(.barra-salvar.pendente) .avisos { bottom: 88px; }
@media (max-width: 767px) { html:has(.barra-salvar.pendente) .avisos { bottom: calc(144px + env(safe-area-inset-bottom)); } }
/* "Confirmar todos" perto da lista de serviços, na medida dela (no 1440 ficava a 280 px da coluna do formulário) */
#form-cliente #servicos > .bloco-cab { max-width: 640px; }
/* no celular estreito, só "Descartar" no botão e o estado só para o leitor de tela: a barra fica numa linha */
@media (max-width: 479px) {
  .barra-salvar .so-largo { display: none; }
  .barra-salvar #cf-estado { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* lista de leads: alvo dos cartões (#lista-leads), sem contorno no foco que o rotear põe nela */
.lista-leads { display: grid; grid-template-columns: minmax(0, 1fr); gap: inherit; min-width: 0; scroll-margin-top: 8px; }
.lista-leads:focus { outline: none; }

/* diálogo (confirmar e pedir motivo) */
dialog.dialogo { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-l); box-shadow: var(--sombra-3); color: var(--texto); }
dialog.dialogo::backdrop { background: rgb(11 16 51 / .55); }
.dialogo form { display: grid; gap: 16px; padding: 20px; }
.dialogo h2 { font-size: 18px; line-height: 1.3; }
.dialogo p { font-size: 15px; }
.dialogo .linha { justify-content: flex-end; }
/* diálogo com formulário (Nova pauta): cabeçalho com Fechar, corpo que rola e o botão preso no pé */
dialog.dialogo-form { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; }
dialog.dialogo-form > form { display: flex; flex-direction: column; gap: 0; max-height: calc(100dvh - 32px); padding: 0; }
.dialogo-cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 0 20px; }
.ico-fechar { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-m); background: none; color: var(--texto); cursor: pointer; }
.ico-fechar:hover { background: var(--fundo-2); }
.dialogo-corpo { min-height: 0; overflow-y: auto; padding: 6px 20px 14px; }
.dialogo-pe { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 20px; border-top: 1px solid var(--linha); background: #fff; }
.dialogo-pe [type="submit"] { margin-left: auto; }
.grade-compacta { gap: 10px 12px; }
.grade-compacta .campo { gap: 4px; }
.grade-compacta .campo > label { line-height: 1.3; }
.grade-compacta .campo :is(input, select) { min-height: 44px; padding-block: 8px; }
.grade-compacta .campo textarea { min-height: 64px; }
.check-linha { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--tinta); cursor: pointer; }
.check-linha input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca); }

/* gráfico de colunas (uma série: cliques por dia) */
.grafico { position: relative; min-height: 200px; max-width: 1280px; } /* no 1920 e no 2560 a faixa ficava com 6:1 a 9:1 */
.grafico svg { display: block; overflow: visible; }
.grafico svg:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 4px; }
.grafico .grade { stroke: var(--linha); stroke-width: 1; }
.grafico .base { stroke: var(--borda-forte); stroke-width: 1; }
.grafico .eixo { fill: var(--texto-2); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 767px), (pointer: coarse) { .grafico .eixo { font-size: 14px; } } /* celular deitado também */
.grafico .coluna { fill: var(--marca); }
.grafico .coluna.ativa { fill: var(--marca-forte); }
.grafico-dica { position: absolute; top: 0; z-index: 2; padding: 6px 10px; border-radius: var(--r-m); background: var(--tinta); color: #fff; font-size: 14px; white-space: nowrap; pointer-events: none; box-shadow: var(--sombra-2); }
.tabela-detalhe > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-size: 14px; font-weight: 600; cursor: pointer; }
.tabela-detalhe[open] > summary { margin-bottom: 8px; }

/* resumo do e-mail */
.email-quadro { width: 100%; min-height: 640px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; }
.dias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* página simples (prévia indisponível) */
.pagina-simples { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--fundo-3); }
.sem-previa { background: #fff; max-width: 520px; }

/* ---------------------------------------------------------------- toque e celular (alvos de 44 px; 14 px no mínimo) */
@media (pointer: coarse), (max-width: 719px) {
  .app-cab .ico-botao { width: 44px; height: 44px; }
  .app .btn-p { --btn-alt: 44px; }
  .btn-p.btn-icone { width: 44px; }
  .segm button { height: 44px; }
  .link-acao { min-height: 44px; min-width: 44px; justify-content: center; } /* "Abrir" dos ativos tinha 32 px de largura */
  .toggle::before { content: ""; position: absolute; inset: -10px -2px; }
}
@media (max-width: 767px) {
  .app-cab .conta, .app-cab .sep { display: none; }
}
/* 14 px e toque de 44 px no celular, inclusive deitado (844 e 932 de largura, que passam dos 767) */
@media (max-width: 767px), (pointer: coarse) {
  .esteira li span, .meta-info, .linha-tempo time, .agentes li small, .juiz small, .imagem-cartao small, .pendencia-quando, .acoes-lista small, .kpi .kpi-nota { font-size: 14px; }
  .tabela td.c-t .sub, .doc-arquivo, .notif-lista small, .servico small, .menu-conta-botao .avatar { font-size: 14px; }
  /* link dentro de texto: 44 px de toque sem mudar o desenho (regra da v4). A área cresce para baixo: o link de baixo
     (o endereço sob o título do cartão, o "para" sob o "de") é pintado por cima e, com a área subindo 13 px, ele tomava
     a última linha do link de cima */
  .app-conteudo :is(p, small, dd, .sub, .texto-2, .linha-tempo span, .tabela td, .check > span, .msg-corpo > span) a:not(.btn):not(.link-acao):not(.msg-acao) { display: inline-block; padding-block: 2px 24px; margin-block: -2px -24px; }
  /* cabeçalho do cliente: o endereço do blog só tem o selo (que não é tocável) em cima e 16 px até o "+ Nova pauta", os
     chips ou o 7/28/90 dias embaixo. Os 24 px para baixo cobriam 8 px do botão; a área simétrica de 44 px cabe sem tocar */
  .app-conteudo .cab-cliente .texto-2 > a:not(.btn):not(.link-acao):not(.msg-acao) { padding-block: 12px; margin-block: -12px; }
  .pular { min-height: 44px; display: inline-flex; align-items: center; }
  .kpi .kpi-rotulo { font-size: 14px; }
  /* também no celular deitado (844 e 932 de largura): antes ficavam só até 719 px */
  .tabela td:is(.c-m, .c-n) .sub { font-size: 14px; }
  .check-quando, .construtor > summary small, .app-conteudo .tecnico { font-size: 14px; }
  .angulo-mais .ver { min-height: 44px; }
  .doc code, .doc pre, .check code, .pendencia-detalhe code, .pendencia-detalhe pre, .check-codigo pre, .pendencia-padrao code, .doc-arquivo code, .prompt { font-size: 14px; }
}
/* cartão de Links: o "de" e o "para" ficam a 6 px um do outro, e nenhuma área de 44 px que transborda cabe nesse passo (o
   "de" ficava com 29 px só dele e o "para" descia 17 px sobre o "Marcar quebrado"). Cada endereço ganha uma linha de 44 px
   de verdade, com o rótulo ao lado; o cartão cresce uns 40 px. A .larga vira cartão até 1279 px, daí o toque grosso até lá */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1279px) {
  .app-conteudo .tabela.cartoes.larga td.c-m[data-rotulo]:has(> a.quebra) { flex: 0 0 100%; display: flex; align-items: flex-start; column-gap: 4px; }
  /* o rótulo na altura da 1ª linha do endereço, também quando ele quebra em duas */
  .app-conteudo .tabela.cartoes.larga td.c-m[data-rotulo]:has(> a.quebra)::before { flex: none; padding-block: 12px; }
  .app-conteudo .tabela.cartoes.larga td.c-m[data-rotulo] > a.quebra { display: block; min-height: 44px; min-width: 0; padding-block: 12px; margin-block: 0; }
}
@media (max-width: 719px) {
  .app { padding: 12px; gap: 8px; }
  /* sem a Clara (sistema interno): o fim da casca reserva só a barra de baixo, não os 132 px do kit */
  .painel .app.app-trilho:not(.app-demo) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .app-cab { gap: 4px; padding: 0 8px 0 12px; min-height: 56px; position: relative; }
  .app-cab h1 { font-size: 20px; }
  .titulo-inteiro { font-size: 18px; }
  .cab-voltar { margin-left: -6px; margin-right: -4px; }
  .app-cab .notif { position: static; }
  .suspenso.notif-painel { left: 8px; right: 8px; width: auto; top: calc(100% + 4px); }
  .app-conteudo { padding: 16px 16px 24px; gap: 16px; }
  .desc-caixa:not(.aberta) .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .desc-mais { display: inline-flex; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* o 5º KPI não fica sozinho em meia linha */
  .acoes-lista li { grid-template-columns: minmax(0, 1fr); } /* selo em cima do texto: os títulos não quebram em 4 linhas */
  .acoes-lista.numerada li { grid-template-columns: auto minmax(0, 1fr); }
  .so-celular { display: inline-flex; }
  .lista-curta:not(.aberta) > li:nth-child(n+6) { display: none; }
  .form-grade.grade-compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* os pares lado a lado também no celular */
  .dialogo-cab { padding-left: 16px; }
  .dialogo-corpo { padding: 4px 16px 12px; }
  .dialogo-pe { padding: 10px 16px; }
  .kpi { padding: 12px; }
  .kpi .numero { font-size: 22px; }
  .metas { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .esteira li { padding: 8px 4px; }
  .linha-tempo li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filtros-tabela { gap: 8px; }
  .app-painel, .app-conteudo, .tabela-caixa, .tabela-bloco, .filtros-tabela, .filtro, .filtro .campo-linha { min-width: 0; }
  .filtro { flex: 1 1 100%; }
  .filtro > span { min-width: 84px; }
  .filtro .campo-linha { flex: 1; min-width: 0; width: auto; }
  .card { padding: 16px; }
  .card .lin { flex-wrap: wrap; }
  .card .lin:has(> .toggle) { flex-wrap: nowrap; }
  .ficha { font-size: 14px; }
  .barra-salvar .peq { margin-left: 0; flex: 1 1 auto; } /* "1 mudança para salvar" na mesma linha dos botões: a barra presa fica com uns 68 px */
  .prompt { max-height: 60vh; }
  .email-quadro { min-height: 520px; }
  .bloco-cab h2 { font-size: 17px; }
}
/* ---------------------------------------------------------------- tabela que vira cartões
   Até 1023 px toda tabela vira cartões; a tabela "larga" (7 colunas ou mais, P.tabela põe .larga) vira até 1279 px,
   porque no tablet e no notebook de 1024 as colunas ficavam com 55 a 90 px e as ações saíam da caixa. De 720 px para
   cima os cartões ficam em 2 colunas. "Ordenar por" aparece onde a tabela é cartão (o cabeçalho some). */
@media (max-width: 1279px) {
  .tabela-bloco:has(> .tabela-caixa > .tabela.cartoes.larga) > .filtro.ordenar-m { display: flex; }
  .tabela-caixa:has(> .tabela.cartoes.larga) { border: 0; border-radius: 0; overflow: visible; max-height: none; }
  .tabela.cartoes.larga, .tabela.cartoes.larga > tbody { display: block; }
  .tabela.cartoes.larga > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); visibility: hidden; } /* sem parada do Tab em cabeçalho invisível: o "Ordenar por" faz o papel dele */
  .tabela.cartoes.larga tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
  .tabela.cartoes.larga tr.destaque { border-color: var(--atencao-borda); background: var(--atencao-fundo); }
  .tabela.cartoes.larga tr.destaque-erro { border-color: var(--erro-borda); background: var(--erro-fundo); }
  .tabela.cartoes.larga td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; font-size: 14px; white-space: normal; }
  .tabela.cartoes.larga tbody tr:hover td, .tabela.cartoes.larga tr:is(.destaque, .destaque-erro) td { background: none; }
  .tabela.cartoes.larga td.c-t { flex: 0 0 100%; min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; font-weight: 600; color: var(--tinta); }
  .tabela.cartoes.larga td.c-m { color: var(--texto-2); }
  .tabela.cartoes.larga td.c-n { color: var(--tinta); }
  .tabela.cartoes.larga td[data-rotulo]::before { content: attr(data-rotulo) " "; color: var(--texto-2); font-weight: 400; }
  .tabela.cartoes.larga td:is(.c-a, .c-contato) { flex: 0 0 100%; }
  .tabela.cartoes.larga td:is(.c-m, .c-n):has(> .sub) { flex: 0 0 100%; } /* número com linha de apoio: linha própria */
  .tabela.cartoes.larga td.c-a .linha { justify-content: flex-start; flex-wrap: wrap; gap: 4px 16px; } /* ação que apaga longe da vizinha */
  .tabela.cartoes.larga td.c-o, .tabela.cartoes.larga td:empty { display: none; }
}
@media (min-width: 720px) and (max-width: 1279px) {
  .tabela.cartoes.larga > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .tabela.cartoes.larga tr { margin-bottom: 0; }
}
@media (max-width: 1023px) {
  .filtro.ordenar-m { display: flex; }
  .tabela-caixa:has(> .tabela.cartoes) { border: 0; border-radius: 0; overflow: visible; max-height: none; }
  .tabela.cartoes, .tabela.cartoes > tbody { display: block; }
  .tabela.cartoes > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); visibility: hidden; }
  .tabela.cartoes tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
  .tabela.cartoes tr.destaque { border-color: var(--atencao-borda); background: var(--atencao-fundo); }
  .tabela.cartoes tr.destaque-erro { border-color: var(--erro-borda); background: var(--erro-fundo); }
  .tabela.cartoes td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; font-size: 14px; white-space: normal; }
  .tabela.cartoes tbody tr:hover td, .tabela.cartoes tr:is(.destaque, .destaque-erro) td { background: none; }
  .tabela.cartoes td.c-t { flex: 0 0 100%; min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; font-weight: 600; color: var(--tinta); }
  .tabela.cartoes td.c-m { color: var(--texto-2); }
  .tabela.cartoes td.c-n { color: var(--tinta); }
  .tabela.cartoes td[data-rotulo]::before { content: attr(data-rotulo) " "; color: var(--texto-2); font-weight: 400; }
  .tabela.cartoes td:is(.c-a, .c-contato) { flex: 0 0 100%; }
  .tabela.cartoes td:is(.c-m, .c-n):has(> .sub) { flex: 0 0 100%; }
  .tabela.cartoes td.c-a .linha { justify-content: flex-start; flex-wrap: wrap; gap: 4px 16px; } /* ação que apaga longe da vizinha */
  .tabela.cartoes td.c-o, .tabela.cartoes td:empty { display: none; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .tabela.cartoes > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .tabela.cartoes tr { margin-bottom: 0; }
}
/* cartão inteiro abre o detalhe quando o título é link interno (como o .meta de Hoje); antes só o nome abria (85 x 44 px
   em "Iron Training" num cartão de 334 x 150 px). O ::after é do <a>: o clique leva pela rota do painel.js sem JS novo.
   Nenhuma td é posicionada, então ele cobre o tr; os controles das outras células (Ver no site, Fechar, Revogar,
   e-mail e WhatsApp) ficam por cima com o z-index 1. Leads, Pautas e Links não mudam: o título deles não é link. */
@media (max-width: 1023px) {
  .tabela.cartoes tr:has(> td.c-t > a[href^="/"]) { position: relative; cursor: pointer; }
  .tabela.cartoes tr:not(.destaque, .destaque-erro):has(> td.c-t > a[href^="/"]):hover { border-color: var(--borda-forte); }
  .tabela.cartoes td.c-t > a[href^="/"]:first-of-type::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
  .tabela.cartoes tr:has(> td.c-t > a[href^="/"]) :is(a, button, summary, select, input, textarea, label):not(td.c-t > a:first-of-type) { position: relative; z-index: 1; }
}
@media (max-width: 1279px) {
  .tabela.cartoes.larga tr:has(> td.c-t > a[href^="/"]) { position: relative; cursor: pointer; }
  .tabela.cartoes.larga tr:not(.destaque, .destaque-erro):has(> td.c-t > a[href^="/"]):hover { border-color: var(--borda-forte); }
  .tabela.cartoes.larga td.c-t > a[href^="/"]:first-of-type::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
  .tabela.cartoes.larga tr:has(> td.c-t > a[href^="/"]) :is(a, button, summary, select, input, textarea, label):not(td.c-t > a:first-of-type) { position: relative; z-index: 1; }
}
/* computador: a linha inteira abre o detalhe, como o cartão no celular (de 1024 px; a .larga vira tabela em 1280), e o
   mouse mostra que é link: fundo na linha e o título em azul sublinhado. O cabeçalho fixo fica por cima das linhas que
   rolam por baixo dele (o ::after delas não pega o clique de ordenar) */
@media (min-width: 1024px) {
  .tabela:not(.larga) tbody tr:has(> td.c-t > a[href^="/"]) { position: relative; cursor: pointer; }
  .tabela:not(.larga) td.c-t > a[href^="/"]:first-of-type::after { content: ""; position: absolute; inset: 0; }
  .tabela:not(.larga) tr:has(> td.c-t > a[href^="/"]) :is(a, button, summary, select, input, textarea, label):not(td.c-t > a:first-of-type) { position: relative; z-index: 1; }
  .tabela:not(.larga) tbody tr:not(.destaque, .destaque-erro):has(> td.c-t > a[href^="/"]):hover td { background: var(--fundo-2); }
  .tabela:not(.larga) tbody tr:has(> td.c-t > a[href^="/"]):hover td.c-t > a:first-of-type { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .tabela:not(.larga) thead th { z-index: 2; }
}
@media (min-width: 1280px) {
  .tabela.larga tbody tr:has(> td.c-t > a[href^="/"]) { position: relative; cursor: pointer; }
  .tabela.larga td.c-t > a[href^="/"]:first-of-type::after { content: ""; position: absolute; inset: 0; }
  .tabela.larga tr:has(> td.c-t > a[href^="/"]) :is(a, button, summary, select, input, textarea, label):not(td.c-t > a:first-of-type) { position: relative; z-index: 1; }
  .tabela.larga tbody tr:not(.destaque, .destaque-erro):has(> td.c-t > a[href^="/"]):hover td { background: var(--fundo-2); }
  .tabela.larga tbody tr:has(> td.c-t > a[href^="/"]):hover td.c-t > a:first-of-type { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .tabela.larga thead th { z-index: 2; }
}
/* Clientes › Hoje: "abaixo do ritmo" embaixo do número na tabela; no cartão, na mesma linha ("hoje 0 de 5 · abaixo do
   ritmo"), e a célula não ocupa a linha inteira do cartão */
.sep-cartao { display: none; }
@media (max-width: 1023px) {
  .tabela.cartoes td.c-n:has(> .sub.junto) { flex: 0 1 auto; }
  .tabela.cartoes td.c-n .sub.junto { display: inline; margin: 0; }
  .tabela.cartoes .sep-cartao { display: inline; }
}
/* e-books de 1280 a 1599 px: o título ficava com 221 px e linhas de até 283 px; empilhar as ações e deixar o número
   com linha de apoio quebrar devolve uns 210 px ao título (no 1440 a coluna E-book voltava a 370 px e as linhas a 184 px) */
@media (min-width: 1280px) and (max-width: 1599px) {
  #tab-ebooks td.c-a .linha { flex-direction: column; align-items: flex-end; gap: 0; }
  #tab-ebooks td.c-n, #tab-ebooks td.c-n .sub { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .esqueleto i { animation: none; }
  .barra > i, .toggle::after { transition: none; }
}