/* EcomSmart Clientes na identidade v4 (kit v4-kit-2026.10.20 em v4/, que não se edita aqui). Só o que é do Clientes:
   apelidos dos tokens antigos (o painel da marca troca --azul e as cores dos gráficos pela marca do cliente no <main>),
   a casca com o menu de 5 posições (MENU.md: trilho de 80 px, barra de 5 itens no celular, painel ao lado ou folha),
   os componentes das telas e as tabelas que viram cartões abaixo de 720 px com "Ordenar por". Sempre claro. */

/* ---------------------------------------------------------------- apelidos dos tokens antigos (v3) para os da v4 */
:root {
  --ink: var(--tinta); --ink-2: var(--texto); --muted: var(--texto-2); --faint: var(--texto-3);
  --bg: #FFFFFF; --painel: var(--fundo-2); --nevoa: var(--superficie-3); --borda-2: var(--borda-forte);
  --azul: var(--marca); --azul-600: var(--marca-hover); --azul-700: var(--marca-forte);
  --ceu-50: #F5F8FF; --ceu-100: #EEF4FF; --ceu-200: #D3E2FF; --ceu-300: #B5CEFF; --ceu-400: #9DBEFF; --ceu-500: #7FA8FB;
  --ok-bg: var(--ok-fundo); --atencao-bg: var(--atencao-fundo); --erro-bg: var(--erro-fundo);
  --r-input: var(--r-m); --r-card: var(--r-l); --r-card-lg: var(--r-l); --r-painel: var(--r-xl); --r-pill: var(--r-pilula);
  --sombra-modal: var(--sombra-3); --sombra-chip: var(--sombra-1);
  --font: var(--fonte); --ease-out: var(--curva); --dur-1: 140ms; --dur-2: 200ms; --dur-3: 320ms;
  --anel: 0 0 0 3px rgb(10 91 240 / .28);
}
body { background: var(--fundo-3); }
.oculto { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.erro-carga { margin: 40px auto; max-width: 480px; padding: 16px; border-radius: var(--r-l); background: var(--erro-fundo); color: var(--erro); font-weight: 600; }

/* ---------------------------------------------------------------- casca: trilho + painel */
.app.app-trilho { min-height: 100dvh; border-radius: 0; font-size: 15px; }
.app-painel { overflow: clip; }
.app-cab { gap: 12px; position: relative; }
.cab-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.cab-raiz { color: var(--texto-2); font-weight: 600; white-space: nowrap; }
.cab-tela { min-width: 0; }
.cab-curto { display: none; }
.cab-titulo:focus { outline: none; }
.cab-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.app-cab .app-cab-acoes { flex: none; gap: 12px; }
.cab-cliente { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cab-cliente-rot { font-size: 14px; color: var(--texto-2); }
.cab-cliente select { min-height: 44px; max-width: 280px; padding: 0 34px 0 12px; border: 1px solid var(--borda); border-radius: var(--r-m); background: #fff no-repeat right 12px center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer; }
.cab-cliente select:hover { border-color: var(--borda-forte); }
.cab-conta { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--marca-suave); color: var(--marca-forte); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cab-conta:hover, .cab-conta[aria-expanded="true"] { background: var(--marca-suave-2); }
.app-conteudo { padding: 20px 24px 32px; }
.app-conteudo > * { min-width: 0; }
#conteudo-painel, #conteudo-sub, #cs-conteudo { display: grid; gap: 14px; align-content: start; min-width: 0; }
#conteudo-painel > *, #conteudo-sub > *, #cs-conteudo > * { min-width: 0; }
button.trilho-item { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.trilho-item[aria-expanded="true"] { background: var(--fundo-2); color: var(--tinta); }
/* posição sem cliente escolhido (lista): fica no lugar, mais apagada, e pede o cliente ao toque (UX-11) */
.trilho-item.sem-cliente { color: var(--texto-2); }
.trilho-item.sem-cliente .ico { opacity: .55; }
.trilho-item.ativo[aria-expanded="true"] { background: #EEF4FF; color: var(--marca); }

/* ---------------------------------------------------------------- barra lateral (teste de 21/10/2026, referência Z-API)
   A barra do kit (.app-menu, .app-item, .app-secao, .contador), larga e presa no computador, com o seletor de cliente
   no topo; abaixo de 1280 px vira gaveta, aberta pelo botão de menu do cabeçalho, com véu (menu.js) */
.app.app-lateral { --app-menu: 248px; min-height: 100dvh; border-radius: 0; font-size: 15px; gap: 12px; align-items: start; }
.app-lateral > .app-menu { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }
.app-lateral > .app-painel { min-height: calc(100dvh - 24px); }
.app-lateral .app-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-lateral .app-menu ul[hidden] { display: none; }
.app-lateral .app-secao { margin: 0; }
.lateral-linha { display: flex; align-items: center; gap: 2px; }
.lateral-linha > .app-item { flex: 1 1 auto; min-width: 0; }
.lateral-abrir { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-m); background: none; color: var(--texto-2); cursor: pointer; }
.lateral-abrir:hover { background: var(--fundo-2); color: var(--tinta); }
.lateral-abrir .ico { width: 18px; height: 18px; transition: transform .15s var(--curva); }
.lateral-abrir[aria-expanded="true"] .ico { transform: rotate(180deg); }
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-lateral .lateral-logo { justify-content: flex-start; gap: 10px; min-height: 44px; padding: 4px 8px 8px; color: var(--tinta); font-size: 16px; font-weight: 600; white-space: nowrap; }
.app-lateral .lateral-logo:hover { text-decoration: none; }
.lateral-logo .ico { width: 26px; height: 26px; flex: none; color: var(--marca); }
.lateral-logo b { font-weight: 800; }
.lateral-fechar { display: none; }
.lateral-cliente { display: grid; gap: 6px; padding: 8px 8px 4px; }
.lateral-cliente-rot { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.lateral-cliente select { width: 100%; min-width: 0; min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--borda); border-radius: var(--r-m); background: #fff no-repeat right 12px center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer; }
.lateral-cliente select:hover { border-color: var(--borda-forte); }
.app-lateral .app-item { position: relative; height: auto; min-height: 44px; text-decoration: none; }
.app-lateral .app-item span { min-width: 0; overflow-wrap: anywhere; }
.app-lateral .app-item.aberta { font-weight: 600; }
.app-lateral .app-item.ativo { font-weight: 600; }
.app-lateral button.app-item { width: 100%; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.app-lateral button.app-item:hover { background: var(--fundo-2); }
.app-lateral .app-menu .lateral-sub { margin: 2px 0 6px 20px; padding-left: 10px; border-left: 1px solid var(--borda); }
.lateral-sub .app-item { min-height: 44px; font-size: 14px; }
.lateral-sub .app-item .ico { width: 16px; height: 16px; }
.lateral-rodape { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--linha); }
.lateral-quem { display: grid; gap: 2px; padding: 10px 10px 2px; font-size: 13px; color: var(--texto-2); }
.lateral-quem b { color: var(--tinta); font-size: 14px; }
.lateral-quem span { overflow-wrap: anywhere; }
.cab-menu { display: none; flex: none; place-items: center; width: 44px; height: 44px; margin-left: -6px; padding: 0; border: 0; border-radius: var(--r-m); background: none; color: var(--tinta); cursor: pointer; }
.cab-menu .ico { width: 22px; height: 22px; }
.cab-menu:hover { background: var(--fundo-2); }
.cab-sobre { display: none; }
.cab-cliente-nome { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.lateral-fundo { display: none; }
@media (max-width: 1279px) {
  .app.app-lateral { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .app-lateral > .app-menu { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(304px, 86vw); max-height: none; height: 100dvh; border-radius: 0 16px 16px 0; box-shadow: var(--sombra-3); transform: translateX(-105%); visibility: hidden; transition: transform .2s var(--curva), visibility 0s linear .2s; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .app-lateral > .app-menu.aberta { transform: none; visibility: visible; transition: transform .2s var(--curva); }
  .lateral-fundo { display: block; position: fixed; inset: 0; z-index: 79; background: rgb(11 16 51 / .32); }
  .lateral-fechar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-m); background: none; color: var(--texto-2); cursor: pointer; }
  .lateral-fechar .ico { width: 20px; height: 20px; }
  .lateral-fechar:hover { background: var(--fundo-2); }
  .cab-menu { display: grid; }
  .app-lateral .app-item, .app-lateral button.app-item { min-height: 48px; font-size: 16px; }
  .lateral-sub .app-item { min-height: 44px; font-size: 15px; }
  .app-lateral .app-secao, .lateral-cliente-rot, .lateral-quem { font-size: 14px; }
  .lateral-abrir { width: 44px; height: 44px; }
  /* o cliente aberto e a seção na linha pequena do título (portão r1, UX-2 e VIS-7) */
  .app-lateral .cab-sobre { display: block; flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--texto-2); }
  .app-lateral .cab-raiz { display: none; }
  /* o cabeçalho com o botão de menu acompanha a rolagem: sem a barra de baixo, trocar de tela não exige voltar ao topo
     (portão r2, UX2-8) */
  .app-lateral .app-cab { position: sticky; top: 0; z-index: 30; background: #fff; border-radius: var(--r-l) var(--r-l) 0 0; }
  .lateral-cliente select { font-size: 16px; }
  .cab-cliente-nome { display: none; }
  html:has(.app-menu.aberta) .clara-fab { opacity: 0; pointer-events: none; }
}
/* no computador o rodapé da barra fica só com quem está logado: o resto está no menu do avatar (portão r1, VIS-13) */
@media (min-width: 1280px) {
  .app-lateral .lateral-rodape > .app-secao, .app-lateral .lateral-rodape > ul { display: none; }
  .lateral-rodape { padding-top: 10px; }
}
@media (min-width: 1280px) and (pointer: fine) { .app-lateral .app-item { min-height: 40px; } }
@media (max-width: 767px) {
  /* o fim da página não fica sob o botão da ajuda */
  .app.app-lateral { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .app-lateral .contador, .pg-grupo-tit .contador { min-width: 24px; height: 24px; font-size: 14px; }
  .app-lateral .app-cab { min-height: 56px; padding: 6px 8px; gap: 6px; }
  .app-lateral .cab-menu { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-lateral > .app-menu { transition: none !important; } }

/* ---------------------------------------------------------------- submenu: painel ao lado (computador) e folha (celular) */
.menu-sub { position: fixed; z-index: 70; background: #fff; border: 1px solid var(--borda); border-radius: var(--r-l); box-shadow: var(--sombra-3); }
.menu-sub.suspenso-lado { width: 240px; padding: 6px; }
.menu-sub.menu-conta.suspenso-lado { width: 280px; }
.menu-sub-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-sub-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; }
.menu-sub-item .ico { width: 20px; height: 20px; color: var(--texto-2); }
.menu-sub-item:hover { background: var(--fundo-2); text-decoration: none; }
.menu-sub-item.atual { background: #EEF4FF; color: var(--marca); font-weight: 600; }
.menu-sub-item.atual .ico { color: var(--marca); }
.menu-sub-item:focus-visible { outline-offset: -2px; }
.menu-conta-quem { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); }
.menu-conta-quem b { color: var(--tinta); font-size: 15px; }
.menu-conta-quem span { color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.menu-sub-fundo { position: fixed; inset: 0; z-index: 58; background: rgb(11 16 51 / .32); }
.menu-sub.menu-folha { left: 8px; right: 8px; top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 150px); overflow-y: auto; padding: 4px 8px 10px; border-radius: 16px; }
.menu-sub.menu-folha .menu-sub-item { min-height: 56px; font-size: 16px; }
.menu-sub.menu-folha .menu-sub-item .ico { width: 22px; height: 22px; }
.menu-sub-cab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 4px 6px 12px; }
.menu-sub-puxador { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--borda-forte); }
.menu-sub-titulo { font-size: 16px; color: var(--tinta); }
.menu-sub-fechar { min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: none; color: var(--link); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }

/* ---------------------------------------------------------------- celular: barra de baixo com as 5 raízes, sem rolar de lado */
@media (max-width: 767px) {
  .app.app-trilho { padding: 8px 8px calc(132px + env(safe-area-inset-bottom)); gap: 8px; }
  .app-trilho > .trilho { overflow: visible; padding: 0 2px env(safe-area-inset-bottom); -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; }
  .app-trilho > .trilho .trilho-grupo { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-right: 0; }
  .app-trilho > .trilho .trilho-item { width: auto; min-width: 0; flex: none; margin: 4px 1px; padding: 7px 0 6px; }
  .app-trilho > .trilho .trilho-item .rot { overflow: visible; text-overflow: clip; letter-spacing: -0.02em; }
  .app.app-trilho.trilho-mais::before { content: none; }
  .app-cab { min-height: 56px; padding: 6px 8px 6px 12px; gap: 8px; }
  .cab-titulo { display: block; flex: 1 1 auto; min-width: 0; font-size: 18px; }
  .cab-tela { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cab-longo { display: none; }
  .cab-curto { display: inline; }
  .cab-raiz { display: block; font-size: 14px; line-height: 1.25; }
  .cab-raiz span[aria-hidden] { display: none; }
  .cab-cliente-rot { display: none; }
  .cab-cliente { min-width: 0; flex: 0 1 auto; }
  /* seletor de cliente mais largo e título um pouco menor: Roos Custom e os rótulos de até 11 letras inteiros em 360
     (portão r2, VIS-11); nomes mais longos que isso continuam com reticências */
  .cab-cliente select { min-height: 44px; max-width: 38vw; font-size: 16px; padding: 0 26px 0 10px; background-position: right 9px center; }
  .cab-conta { width: 44px; height: 44px; }
  .app-conteudo { padding: 14px 12px 24px; gap: 14px; }
  html.menu-sub-aberto .clara-fab { opacity: 0; pointer-events: none; }
}
@media (max-width: 380px) { .cab-titulo { font-size: 17px; } }
/* celular deitado (844x390): o trilho lateral cabe sem cortar o Conectar e a frase ao lado da ajuda some (VIS-12, UX-16) */
@media (min-width: 768px) and (max-height: 460px) {
  .app-trilho > .trilho { padding-top: 8px; padding-bottom: 6px; }
  .app-trilho > .trilho .trilho-logo { width: 40px; height: 40px; margin-bottom: 6px; }
  .app-trilho > .trilho .trilho-item { min-height: 46px; padding: 4px 2px 3px; gap: 3px; }
}
@media (max-height: 480px) { .clara-fab .clara-rotulo { display: none; } }

/* ---------------------------------------------------------------- textos e cabeçalho do conteúdo */
.t-rotulo { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.desc { color: var(--texto-2); font-size: 15px; max-width: 80ch; }
.titulo-sec { font-size: 20px; line-height: 1.3; }
.cabeca-tela { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.cabeca-tela > div:not(.acoes) { display: grid; gap: 4px; min-width: 0; flex: 1 1 260px; }
.cabeca-tela > .acoes { flex: 0 1 auto; gap: 8px; }
.cabeca-cliente { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cabeca-cliente > div { min-width: 0; display: grid; gap: 2px; }
.cabeca-nome { font-size: 26px; line-height: 1.2; color: var(--m-escuro, var(--tinta)); overflow-wrap: anywhere; }
.cabeca-periodo { color: var(--texto-2); font-size: 14px; }
/* logo com altura fixa e a proporção dos atributos width/height: o espaço fica reservado antes de o arquivo chegar e o
   texto ao lado não o espreme (portão r2, VIS-01) */
.pc-cabeca .pc-logo { flex: none; height: 56px; width: auto; max-width: min(320px, 42vw); object-fit: contain; object-position: left center; }
.pc-cabeca .pc-logo.quadrado, .pc-cabeca .pc-logo.redondo { width: 56px; height: 56px; max-width: none; border-radius: 14px; }
.pc-cabeca .pc-logo.redondo { border-radius: 50%; }
.pc-cabeca .pc-logo-txt { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; flex: none; background: linear-gradient(135deg, var(--m-hero-de, #0B1033), var(--m-hero-para, #0A5BF0)); color: #fff; font-size: 20px; font-weight: 800; }
.pm-selo-encerrado { display: inline-flex; align-items: center; white-space: nowrap; height: 22px; padding: 0 8px; border-radius: var(--r-s); background: var(--superficie-3); color: var(--texto); font-size: 13px; }
.so-celular { display: none !important; }
@media (max-width: 719px) {
  .so-largo { display: none !important; }
  .so-celular { display: inline-flex !important; }
  .cabeca-nome { font-size: 22px; }
  .pc-cabeca .pc-logo { height: 44px; max-width: 52vw; }
  .pc-cabeca .pc-logo.quadrado, .pc-cabeca .pc-logo.redondo, .pc-cabeca .pc-logo-txt { width: 48px; height: 48px; }
}

/* ---------------------------------------------------------------- período e ações da tela */
.barra-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--superficie-3); }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg button:hover { background: rgb(255 255 255 / .6); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--marca-forte); font-weight: 600; box-shadow: var(--sombra-1); }
.campo-periodo select, .datas input { min-height: 44px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; }
.campo-periodo select { min-width: 160px; }
.datas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.datas label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texto-2); }
.atualizado { font-size: 14px; color: var(--texto-2); }
/* o rótulo "Dados de 10:00" nasce vazio e era preenchido depois, levando o botão de atualizar para outra linha no celular
   (salto de layout de 0,26 a 0,33 em 360 px, portão r2, VIS-01): o espaço dele fica reservado desde o primeiro desenho */
.atualizado:empty::before { content: "Dados de 00:00"; visibility: hidden; }
.icone-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--borda); border-radius: var(--r-m); background: #fff; color: var(--texto); cursor: pointer; }
.icone-btn:hover { border-color: var(--borda-forte); color: var(--tinta); }
.icone-btn svg { width: 20px; height: 20px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
/* o "Pular para o conteúdo" do kit com 44 px de altura quando aparece no foco (UX-10) */
.pular { display: inline-flex; align-items: center; min-height: 44px; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn .ico { width: 18px; height: 18px; }
/* celular: período, "Dados de 10:00" e o botão de atualizar numa grade de 3 colunas que não quebra linha (com a fonte
   ainda carregando ou o texto da hora mais largo, a linha flexível passava para duas e o painel pulava, VIS-01) */
@media (max-width: 719px) {
  .barra-periodo { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 8px 10px; }
  .barra-periodo .campo-periodo { grid-column: 1; grid-row: 1; min-width: 0; }
  .barra-periodo .atualizado { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .barra-periodo .icone-btn { grid-column: 3; grid-row: 1; }
  .barra-periodo .datas { grid-column: 1 / -1; grid-row: 2; }
  .campo-periodo select { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------- lista de clientes */
.grade-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cartao-cliente { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; color: var(--tinta); transition: border-color var(--dur) var(--curva); min-width: 0; }
.cartao-cliente:hover { border-color: var(--borda-forte); text-decoration: none; }
.cartao-cliente .topo-cartao { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cartao-cliente .topo-cartao > div { min-width: 0; }
.cartao-cliente h2 { font-size: 18px; line-height: 1.3; }
/* o endereço do cliente numa linha só, sem quebrar no meio da palavra (portão r2, VIS-13) */
.cartao-cliente small { display: block; color: var(--texto-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladrilho { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: #EEF4FF; color: var(--marca-forte); font-size: 17px; font-weight: 700; }
/* uma linha de selos já reservada: os cartões da lista não crescem tanto quando os selos chegam (VIS-01, lista) */
.selos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.selo { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border-radius: var(--r-s); background: var(--superficie-3); color: var(--tinta); font-size: 13px; font-weight: 600; line-height: 1.3; }
.selo .p { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--texto-3); }
.selo.ok { background: var(--ok-fundo); color: var(--ok); } .selo.ok .p { background: var(--ok); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); } .selo.atencao .p { background: var(--atencao); }
.selo.erro, .selo.rep-erro { background: var(--erro-fundo); color: var(--erro); } .selo.erro .p { background: var(--erro); }

/* ---------------------------------------------------------------- atalhos (Rotinas) e estados vazios */
.lista-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.atalho { display: flex; align-items: flex-start; gap: 14px; min-height: 72px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; color: var(--tinta); }
.atalho:hover { border-color: var(--borda-forte); text-decoration: none; }
.atalho .ico { color: var(--marca); margin-top: 2px; }
.atalho span { display: grid; gap: 2px; }
.atalho b { font-size: 16px; }
.atalho small { color: var(--texto-2); font-size: 14px; }
.vazio-tela { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--borda); border-radius: var(--r-l); background: #fff; text-align: center; color: var(--texto-2); }
.vazio-tela h2 { font-size: 18px; color: var(--tinta); }
.vazio-tela p { max-width: 56ch; font-size: 15px; }
.vazio-tela .acoes { justify-content: center; }
.vazio { color: var(--texto-2); font-size: 15px; padding: 12px 0; }
/* :where(:not(.selo)): o selo "erro" (Acabou, falhou) fica do tamanho dos outros selos (portão do saldo r1, VIS-1) */
.erro:where(:not(.selo)) { padding: 12px 14px; border-radius: var(--r-m); background: var(--erro-fundo); color: var(--erro); font-size: 15px; font-weight: 500; }
.aviso-origem { padding: 10px 14px; border-radius: var(--r-m); background: var(--atencao-fundo); color: var(--atencao); font-size: 14px; }
.carregando { display: grid; place-items: center; min-height: 200px; color: var(--texto-2); }
.esqueleto { border-radius: var(--r-l); 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; }
@keyframes esqueleto-passa { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ---------------------------------------------------------------- números (KPIs) e blocos */
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.kpi { min-height: 112px; align-content: start; }
.kpi .t-rotulo { color: var(--texto-2); }
.kpi .valor { font-size: clamp(24px, 2vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .base { font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.kpi.esqueleto { min-height: 112px; border: 0; }
a.kpi-fonte { color: inherit; border: 1px solid var(--linha); }
a.kpi-fonte:hover { border-color: var(--borda-forte); background: #fff; text-decoration: none; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--texto); }
.delta.sobe::before { content: "▲"; font-size: 10px; color: var(--ok); }
.delta.desce::before { content: "▼"; font-size: 10px; color: var(--erro); }
.delta.sobe.ruim::before { color: var(--erro); }
.delta.desce.bom::before { color: var(--ok); }
.blocos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.bloco { min-width: 0; padding: 18px 20px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; }
.blocos > .bloco { grid-column: span 12; }
.blocos > .bloco.meio { grid-column: span 6; }
.bloco > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.bloco h2 { font-size: 17px; line-height: 1.3; }
.bloco header small { color: var(--texto-2); font-size: 13px; }
.alternar { font-size: 14px; }
@media (max-width: 900px) { .blocos > .bloco.meio { grid-column: span 12; } }

/* ---------------------------------------------------------------- gráficos (SVG) e barras */
.colunas { display: block; width: 100%; height: 220px; }
.colunas .barra { fill: var(--azul); transition: fill var(--dur); }
.colunas .alvo:hover + .barra { fill: var(--azul-700); }
.colunas .eixo { stroke: var(--borda); stroke-width: 1; }
.colunas .grade { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 2 4; }
.colunas text { fill: var(--texto-2); font-size: 12px; font-family: var(--fonte); }
.colunas { touch-action: pan-y; }
.linha-g .linha { fill: none; stroke: var(--azul); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.linha-g .area { fill: var(--ceu-100); opacity: .8; }
.linha-g .pt { fill: var(--azul); stroke: #fff; stroke-width: 2; opacity: 0; pointer-events: none; }
.linha-g .alvo:hover + .pt { opacity: 1; }
.colunas.es-g { height: 240px; }
.es-g .barra-sai { fill: var(--erro); opacity: .7; }
.legenda-g { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--texto-2); }
.legenda-g span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-g i { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); }
.legenda-g .cor-entra { background: var(--azul); }
.legenda-g .cor-sai { background: var(--erro); opacity: .7; }
.legenda-g .cor-membros { background: var(--texto-2); }
.graf-g { min-height: 220px; overflow: hidden; }
.barras { display: flex; flex-direction: column; gap: 10px; }
.barras .item { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 14px; }
.barras .rot { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista { display: block; height: 10px; overflow: hidden; border-radius: var(--r-pilula); background: var(--superficie-3); }
.pista .cheio { display: block; height: 100%; min-width: 2px; border-radius: var(--r-pilula); background: var(--azul); }
.barras .val { text-align: right; font-weight: 600; color: var(--tinta); }
.dica { position: fixed; z-index: 95; pointer-events: none; width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 8px 10px; border-radius: var(--r-m); background: var(--tinta); color: #fff; font-size: 14px; line-height: 1.35; box-shadow: var(--sombra-3); transform: translate(-50%, -110%); }
@media (max-width: 520px) {
  .barras .item { grid-template-columns: minmax(0, 1fr) 48px; }
  .barras .pista { grid-column: 1 / -1; order: 3; }
}

/* ---------------------------------------------------------------- tabelas (v4) e cartões no celular */
.tabela td small.sub, .tabela td .sub { display: block; margin-top: 2px; color: var(--texto-2); font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover td { background: var(--fundo-2); }
.tabela tbody tr.clicavel:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.tabela tr.total td { font-weight: 700; border-top: 2px solid var(--borda); }
/* o nome da coluna pode quebrar em duas linhas: a coluna fica da largura do número, não do título (VIS-06) */
th[data-ordenavel] { cursor: pointer; user-select: none; white-space: normal; padding-top: 12px; padding-bottom: 12px; }
th[data-ordenavel]::after { content: "\2195"; margin-left: 6px; color: var(--texto-3); font-size: 11px; }
th[data-ordenavel][aria-sort="ascending"]::after { content: "\2191"; color: var(--marca); }
th[data-ordenavel][aria-sort="descending"]::after { content: "\2193"; color: var(--marca); }
th[data-ordenavel]:hover { color: var(--tinta); }
th[data-ordenavel]:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.rolagem-tabela, .pm-rolagem, .pc-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ordenar-celular { display: none; }
.tabela-meta td { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .tabela-meta .col-imp, .tabela-meta .col-cpm, .tabela-meta .col-freq { display: none; } }
@media (min-width: 1280px) and (max-width: 1439px) { .tabela-meta .col-freq { display: none; } }
.tabela-meta td:first-child { white-space: normal; min-width: 180px; }
.ad-nome { display: flex; align-items: center; gap: 10px; }
.ad-nome img, .ad-sem { flex: none; width: 44px; height: 44px; border-radius: var(--r-m); object-fit: cover; background: var(--superficie-3); }
.ad-nome small { display: block; color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.selo.rec-escalar { background: var(--ok-fundo); color: var(--ok); }
.selo.rec-manter { background: #EEF4FF; color: var(--marca-forte); }
.selo.rec-revisar { background: var(--atencao-fundo); color: var(--atencao); }
.selo.rec-pausar { background: var(--erro-fundo); color: var(--erro); }
.selo.rec-teste { background: var(--superficie-3); color: var(--texto); }
.sugestao { border-color: var(--marca-suave-2); background: linear-gradient(180deg, #F5F8FF, #fff); }
.sug-corpo { display: flex; align-items: flex-start; gap: 20px; }
.sug-img { flex: none; width: 120px; height: 120px; border-radius: var(--r-l); object-fit: cover; }
.sug-texto { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--tinta); }
.sug-corpo .t-corpo { margin-top: 8px; font-size: 15px; color: var(--texto); }
.dica-campo { margin-top: 6px; font-size: 13px; color: var(--texto-2); }
.tabela-etapas .col-barra { width: 40%; min-width: 120px; }
.tabela-etapas tr.final td { color: var(--texto); }
.tabela-etapas tr.final .cheio { background: var(--ceu-500); }
.tabela-etapas tr.grupo td { padding-top: 16px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.tabela-grupos th, .tabela-grupos td { white-space: nowrap; }
.tabela-grupos td:first-child { white-space: normal; min-width: 170px; }
.tabela-grupos .grupo-nome { font-weight: 600; color: var(--tinta); }
.tabela-grupos tr:hover .grupo-nome { color: var(--marca); }
.tabela-grupos .neg { color: var(--erro); }
.tabela-grupos .cheio-alerta { color: var(--atencao); font-weight: 600; }
.grupo-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.grupo-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.grupo-titulo h2 { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.grupo-titulo small { color: var(--texto-2); font-size: 14px; }
@media (min-width: 720px) {
  .tabela-grupos { min-width: 920px; }
  .tabela-grupos th:first-child, .tabela-grupos td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
}
@media (max-width: 600px) { .sug-corpo { flex-direction: column; } .sug-img { width: 100%; height: auto; aspect-ratio: 1; } }

/* Abaixo de 1024 px (celular e tablet) toda tabela .tabela vira uma lista de cartões: a 1ª coluna é o título e as
   outras viram linhas "rótulo: valor" (ordenar.js põe o data-rotulo em cada célula e o "Ordenar por" acima da tabela).
   No tablet as tabelas largas (Meta, campanhas, Entrada, Formulários) rolavam de lado (portão r2, VIS-06). */
@media (max-width: 1023px) {
  .ordenar-celular { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--texto-2); }
  .ordenar-celular select { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; }
  .rolagem-tabela, .pm-rolagem, .pc-rolagem, .tabela-caixa { overflow: visible; }
  .app-conteudo table.tabela:not(.sem-cartao), .app-conteudo table.tabela:not(.sem-cartao) tbody { display: block; width: 100%; min-width: 0; }
  .app-conteudo table.tabela:not(.sem-cartao) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app-conteudo table.tabela:not(.sem-cartao) tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; }
  .app-conteudo table.tabela:not(.sem-cartao) tr[hidden] { display: none; }
  .app-conteudo table.tabela:not(.sem-cartao) td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 2px 0; border: 0; white-space: normal; text-align: right; font-size: 15px; position: static; }
  .app-conteudo table.tabela:not(.sem-cartao) td::before { content: attr(data-rotulo); flex: none; max-width: 55%; color: var(--texto-2); font-size: 14px; font-weight: 500; text-align: left; }
  .app-conteudo table.tabela:not(.sem-cartao) td:first-child { display: block; padding-bottom: 6px; text-align: left; font-weight: 600; font-size: 16px; }
  .app-conteudo table.tabela:not(.sem-cartao) td:first-child::before { content: none; }
  .app-conteudo table.tabela:not(.sem-cartao) td:empty, .app-conteudo table.tabela:not(.sem-cartao) td.col-barra { display: none; }
  .app-conteudo table.tabela:not(.sem-cartao) td > * { min-width: 0; }
  .app-conteudo table.tabela:not(.sem-cartao) .cel-valor { min-width: 0; overflow-wrap: anywhere; }
  .app-conteudo table.tabela:not(.sem-cartao) tbody tr:hover td { background: none; }
  .app-conteudo table.tabela:not(.sem-cartao) tr.total { background: var(--fundo-2); }
  .tabela-meta td:first-child { min-width: 0; }
  .tabela-grupos { min-width: 0; }
}

/* ---------------------------------------------------------------- Resultados › Entrada */
.aviso-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: var(--r-l); background: var(--info-fundo); color: var(--tinta); font-size: 15px; }
.aviso-mais { flex-basis: 100%; font-size: 15px; }
.aviso-mais > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--link, var(--marca)); }
.aviso-mais > p { margin-top: 4px; }
.aviso-faixa p { flex: 1 1 320px; }
.aviso-faixa.atencao { background: var(--atencao-fundo); }
.origem-dias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
/* uma marca por dia; com muitos dias as marcas encostam (sem vão nem largura mínima) e a faixa nunca passa do cartão
   (portão r2, UX-05: com 365 dias ela media 1.093 px) */
.origem-faixa { display: flex; gap: 2px; height: 12px; min-width: 0; overflow: hidden; }
.origem-faixa.densa { gap: 0; }
.origem-faixa.densa i { border-radius: 0; }
.origem-faixa i { flex: 1 1 0; min-width: 0; border-radius: var(--r-xs); background: var(--superficie-3); }
.origem-ao_vivo, .origem-legenda .origem-ao_vivo { background: var(--ok) !important; }
.origem-importado, .origem-legenda .origem-importado { background: var(--marca) !important; }
.origem-misto, .origem-legenda .origem-misto { background: var(--ceu-500) !important; }
/* sem dado com 3,5:1 contra o branco (era 1,5:1, portão r2, VIS-04) */
.origem-sem, .origem-legenda .origem-sem { background: var(--texto-3) !important; }
.origem-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--texto-2); }
.origem-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.origem-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); }
.origem-legenda b { flex: 1 1 100%; min-width: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.tabela-entrada .neg, .tabela .neg { color: var(--erro); }

/* ---------------------------------------------------------------- Resultados › Funis */
.lista-funis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.cartao-funil { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; color: var(--texto); font-size: 15px; min-width: 0; }
.cartao-funil:hover { border-color: var(--borda-forte); text-decoration: none; }
.cartao-funil h2 { font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.cartao-funil p { overflow-wrap: anywhere; }
.cartao-funil b { color: var(--tinta); font-weight: 600; }
.funil-def { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; color: var(--texto); }
.funil-def span { overflow-wrap: anywhere; }
.funil-def b { color: var(--tinta); font-weight: 600; }
/* cartões alinhados pelo topo: o mais longo não estica os vizinhos (portão r2, VIS-18) */
.funil-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: start; }
.etapa-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px 18px; border: 1px solid var(--linha); border-radius: var(--r-l); background: var(--fundo-2); min-width: 0; }
.etapa-card h3 { font-size: 16px; line-height: 1.3; }
/* o título nunca passa por baixo do número da etapa no canto (VIS-14) */
.etapa-card:has(> .etapa-n) h3 { padding-right: 34px; }
.etapa-n { position: absolute; top: 14px; right: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--borda); color: var(--texto-2); font-size: 14px; font-weight: 700; }
.etapa-valor { font-size: clamp(26px, 2.2vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); }
.etapa-linha { font-size: 15px; color: var(--texto); }
.etapa-linha b { color: var(--tinta); }
.etapa-aviso { font-size: 14px; color: var(--atencao); }
/* funil: cartão que leva à tela de onde vem o número (CRO-06) no padrão v4 de cartão-link: a última linha é o link com
   seta, esticado pelo ::before até cobrir o cartão (portão r2, VIS-14 e VIS-17). O número da etapa fica no canto e os
   botões de dentro (Importar o histórico) ficam por cima do link */
.etapa-card--link { transition: border-color .15s, box-shadow .15s; }
.etapa-card--link:hover { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.etapa-card--link .etapa-ir { justify-self: start; margin-top: 2px; }
.etapa-card--link .etapa-ir::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.etapa-card--link .etapa-ir:focus-visible { outline: none; }
.etapa-card--link:has(.etapa-ir:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.etapa-card--link .btn { position: relative; z-index: 1; }
.etapa-card--vazio { background: var(--fundo); border-style: dashed; }
.etapa-card--vazio h3 { color: var(--texto); }
.funil-taxa--cresce { color: var(--texto-2); }
.funil-nota-rodape { font-size: 14px; color: var(--texto-2); }
/* funil só de grupos: o que é do período todo (saídas e quem ficou) fica num bloco à parte, com a conta escrita (CRO-10) */
.funil-periodo { display: grid; gap: 12px; }
.funil-periodo > header { margin-bottom: 0; }
.funil-periodo-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.funil-periodo-nums > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: var(--r-l); background: var(--fundo-2); }
.funil-periodo-nums dt { font-size: 14px; color: var(--texto-2); }
.funil-periodo-nums dd { margin: 0; font-size: 22px; font-weight: 700; color: var(--tinta); }
.funil-periodo-conta { font-size: 15px; color: var(--texto); }
.funil-periodo .link-seta { justify-self: start; }
.dialogo fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.lista-campanhas { display: grid; gap: 0; max-height: 240px; overflow-y: auto; margin-top: 8px; padding: 4px 10px; border: 1px solid var(--borda); border-radius: var(--r-m); background: #fff; }
.opcao-campanha { align-items: flex-start; padding: 6px 0; }
.opcao-campanha input { margin-top: 3px; }
.opcao-campanha span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.opcao-campanha[hidden] { display: none; }
.linha-add { display: flex; gap: 8px; margin-top: 8px; }
.linha-add .input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- aba CS (Tarefas) */
.cs-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cs-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-lista { list-style: none; margin: 0; padding: 0; }
.cs-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.cs-item:last-child { border-bottom: 0; }
.cs-item.atrasada { box-shadow: inset 3px 0 0 var(--erro); padding-left: 12px; }
/* título da tarefa com 44 px de alvo sem mudar o desenho da linha (portão r2, UX-10, VIS-09 e CRO-19) */
.cs-titulo { display: block; padding: 11px 0; margin: -11px 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.cs-item.feita .cs-titulo { font-weight: 500; }
.cs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--texto-2); }
.cs-prazo.atrasada { color: var(--erro); font-weight: 600; }
.cs-prazo.hoje { color: var(--atencao); font-weight: 600; }
.cs-urg-urgente { background: var(--erro-fundo) !important; color: var(--erro) !important; }
.cs-urg-alta { background: var(--atencao-fundo) !important; color: var(--atencao) !important; }
.cs-mes + .cs-mes { margin-top: 6px; border-top: 1px solid var(--linha); }
.cs-mes summary { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; border-radius: var(--r-m); }
.cs-mes summary::-webkit-details-marker { display: none; }
.cs-mes summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(-45deg); transition: transform .2s var(--curva); }
.cs-mes[open] summary::before { transform: rotate(45deg); }
.cs-mes h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
.cs-mes h3 small { font-weight: 500; color: var(--texto-2); }

/* ---------------------------------------------------------------- Integrações e Visão 360 */
.int-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
.int-grupo h2 { margin-bottom: 10px; }
.int-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.int-card { position: relative; display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 16px 18px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; }
.int-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--borda-forte); }
.int-card.int-ok::before { background: var(--ok); } .int-card.int-atencao::before { background: var(--atencao); } .int-card.int-erro::before { background: var(--erro); }
.int-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.int-card header b { font-size: 15px; color: var(--tinta); }
.int-card p { flex: 1; font-size: 14px; color: var(--texto); }
.int-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
/* de onde vem a informação: texto simples (parecia botão e não clicava, portão r2, CRO-13) */
.int-onde { font-size: 14px; color: var(--texto-2); }
.int-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-pede { font-size: 14px; color: var(--texto-2); }
.s360-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.s360-card { position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.s360-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--borda-forte); }
.s360-card.s360-ok::before { background: var(--ok); } .s360-card.s360-indisponivel::before { background: var(--atencao); }
.s360-card > header { margin-bottom: 0; align-items: center; }
.s360-meta { font-size: 14px; color: var(--texto-2); }
.s360-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.s360-num { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--r-l); background: var(--fundo-2); }
.s360-num .valor { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); overflow-wrap: anywhere; }
.s360-num small { font-size: 13px; color: var(--texto-2); }
.s360-alerta { padding: 10px 14px; border-radius: var(--r-m); background: var(--fundo-2); color: var(--texto); font-size: 14px; }
.s360-alerta.nivel-atencao { background: var(--atencao-fundo); color: var(--atencao); }
.s360-alerta.nivel-erro { background: var(--erro-fundo); color: var(--erro); }
.s360-alerta.nivel-ok { background: var(--ok-fundo); color: var(--ok); }
.s360-serie .t-rotulo, .s360-lista .t-rotulo { margin-bottom: 8px; }
.s360-barras { display: flex; align-items: flex-end; gap: 2px; height: 72px; padding: 0 2px; border-bottom: 1px solid var(--borda); }
.s360-barra { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--azul); opacity: .85; }
.s360-eixo { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; color: var(--texto-2); }
.s360-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
/* Rotinas › Saldo Meta: o cartão da Visão 360 com a cor do estado na faixa da esquerda; o espaço entre os blocos é o
   da grade do #conteudo-sub (portão r3, VIS-18) */
.s360-card.sm-acabou::before { background: var(--erro); }
.s360-card.sm-acabando::before, .s360-card.sm-cega::before { background: var(--atencao); }
/* uma conta (o caso comum) ocupa a linha inteira; o auto-fill guardava trilhas vazias (VIS-2) */
.sm-contas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
/* saldo e gasto lado a lado só quando cabem; o número nunca quebra nem encosta na borda (VIS-3; portão r2, VIS-10 e
   UX-9; portão r3, VIS-17: 200 px empilha em 1366, onde cinco dígitos ficavam a 1 px da caixa) */
.sm-contas .s360-nums { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sm-contas .s360-num .valor { white-space: nowrap; overflow-wrap: normal; }
.sm-contas .sm-saldo .valor { font-size: 28px; }  /* o número da tela é o saldo (VIS-4) */
.sm-contas .sm-saldo .valor.longo { font-size: 24px; }  /* seis dígitos */
.sm-atrasada { color: var(--atencao); font-weight: 600; }  /* leitura que passou da hora (portão r3, UX-15) */
.s360-card.sm-acabou .sm-saldo .valor { color: var(--erro); }
.s360-card.sm-acabando .sm-saldo small { color: var(--atencao); font-weight: 600; }
.sm-aviso { display: grid; gap: 10px; }
.sm-aviso > header { margin-bottom: 4px; }
.sm-aviso .check input { flex: none; }
.sm-acoes-destino { gap: 10px; margin-bottom: 8px; }
.sm-acoes { margin-top: 12px; }
.sm-acoes + .sm-lista-contas { margin-top: 16px; }
.sm-lista-contas { max-height: none; }
.sm-nowrap { white-space: nowrap; }
.opcao-campanha .sm-nowrap { display: inline; }  /* o span da opção vira grid; este fica na linha (VIS-11) */
.sm-regras > summary, .sm-detalhe > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; color: var(--link); font-weight: 600; cursor: pointer; }
/* a seta de abrir do .cs-mes: sem ela o summary parece um link para outra tela (VIS-14) */
.sm-regras > summary::-webkit-details-marker, .sm-detalhe > summary::-webkit-details-marker { display: none; }
.sm-regras > summary::before, .sm-detalhe > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--curva); }
.sm-regras[open] > summary::before, .sm-detalhe[open] > summary::before { transform: rotate(45deg); }
.sm-regras ul { display: grid; gap: 6px; margin: 4px 0 8px; padding-left: 18px; font-size: 14px; }
.sm-detalhe code { display: block; padding: 8px 10px; border-radius: var(--r-m); background: var(--fundo-2); font-size: 14px; overflow-wrap: anywhere; }
.tabela-saldos td.num { white-space: nowrap; }
.tabela-saldos .sm-seta { color: var(--texto-2); }
.dialogo .sm-seg > button { flex: 1 1 0; }  /* três partes iguais (VIS-8) */
/* número inválido: a borda e o anel de foco na cor do erro, que fica logo abaixo (portão r3, UX-12) */
.sm-numero .input[aria-invalid="true"], .sm-numero .input[aria-invalid="true"]:focus { border-color: var(--erro); outline-color: var(--erro); }
@media (min-width: 768px) {
  .sm-aviso .check { align-items: center; }
}
@media (max-width: 767px) {
  .sm-acoes-destino > .btn { flex: 1 1 auto; }
  .sm-contas .s360-acoes > .btn-pri { flex: 1 1 100%; }
  .sm-contas .s360-acoes > .btn-contorno { flex: 1 1 auto; }
  .sm-aviso .check { align-items: flex-start; }  /* legenda de 3 linhas: a caixa no começo da frase (VIS-12) */
  .sm-aviso .check input { margin-top: 2px; }
}
/* do computador grande para cima: o estado da conta à esquerda e a configuração à direita (VIS-2) */
@media (min-width: 1200px) {
  #conteudo-sub.sm-tela { display: grid; grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
  #conteudo-sub.sm-tela > .sm-contas { grid-row: span 2; grid-template-columns: minmax(0, 1fr); }
  #conteudo-sub.sm-tela > section:last-child { grid-column: 1 / -1; }  /* Avisos mandados na largura toda */
}
.sm-tela .dica-campo { max-width: 80ch; }
.dialogo .sm-previa { overflow-wrap: anywhere; }  /* o link da cobrança não tem espaço: quebra em qualquer ponto */
.tabela-reports td, .tabela-tokens td { vertical-align: top; }
.tabela-reports tr.rep-pausado td, .tabela-tokens tr.tk-revogado td { color: var(--texto-2); }
/* Administração › Grupos internos do WhatsApp e o grupo do cliente em Relatórios */
.gi-situacao { margin: 0 0 12px; font-size: 14px; }
.gi-acoes { gap: 8px; margin: 0 0 14px; }
.gi-cliente { margin: 0; font-size: 14px; }
.gi-cliente b { color: var(--tinta); }
/* no cartão do celular o GUID só quebra a linha (precisa vencer o .tabela td small.sub, que é display:block) */
@media (max-width: 719px) { .tabela.tabela-grupos-internos td small.gi-guid { display: none; } }
@media (min-width: 720px) { .tabela-tokens th:last-child, .tabela-tokens td:last-child { position: sticky; right: 0; z-index: 1; background: #fff; } }

/* ---------------------------------------------------------------- diálogo (formulários) e aviso embaixo */
.dialogo-fundo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(11 16 51 / .5); }
.dialogo { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sombra-3); }
.dialogo.dialogo-largo { max-width: 880px; }
.dialogo h2 { font-size: 22px; }
.dialogo h2:focus { outline: none; }
/* diálogos em passos (Novo funil, Ajustes do cliente): cada passo cabe no celular sem rolar (portão r2, UX-06 e VIS-07) */
.dlg-passo-n { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.dlg-passo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dlg-passo[hidden], .check[hidden] { display: none; }
.dialogo details > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--link, var(--marca)); }
.fn-exato .linha-add { margin-top: 4px; }
.conexao { border-top: 1px solid var(--linha); }
.dialogo .conexao > summary { justify-content: space-between; color: var(--tinta); }
.conexao > summary b { font-size: 16px; }
.conexao-campos { display: grid; gap: 12px; padding: 4px 0 12px; }
#fn-datas .dica-campo { grid-column: 1 / -1; margin-top: -6px; }
.dialogo h2:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.dialogo h3 { font-size: 16px; }
.dialogo small { font-size: 13px; }
.dialogo .acoes { justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dialogo .campo { gap: 6px; }
.input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; }
.input:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.input[readonly] { background: var(--fundo-2); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--tinta); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--marca); }
.opcoes-check { display: flex; flex-wrap: wrap; gap: 0 16px; }
.dialogo .grupo-int { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linha); }
.grupo-int[hidden] { display: none; }
.fontes-cliente { margin: 0; padding: 0; border: 0; }
.fontes-cliente legend, .dialogo fieldset legend { margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.fontes-cliente .check { display: inline-flex; margin-right: 16px; }
.dialogo .rep-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialogo .rep-previa { flex: none; min-height: 120px; max-height: min(340px, 50dvh); overflow: auto; scroll-margin-bottom: 136px; padding: 14px; border-radius: var(--r-l); background: var(--fundo-2); font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.dialogo .token-caixa { padding: 14px; border-radius: var(--r-l); background: var(--fundo-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; word-break: break-all; user-select: all; }
.aviso { position: fixed; left: 24px; bottom: 24px; z-index: 100; max-width: min(440px, calc(100vw - 48px)); padding: 14px 16px; border-radius: var(--r-m); background: var(--tinta); color: #fff; font-size: 15px; line-height: 1.4; box-shadow: var(--sombra-3); }
@media (max-width: 767px) {
  .dialogo-fundo { padding: 0; align-items: end; }
  .dialogo { max-width: none; max-height: calc(100dvh - 24px); padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .dialogo .acoes { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 0 -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linha); }
  .dialogo .acoes .btn { flex: 1 1 auto; }
  .dialogo .rep-linha { grid-template-columns: 1fr; }
  .dialogo, .dlg-passo { gap: 12px; }
  /* fontes do cliente em 2 colunas e as datas do funil lado a lado: o passo cabe em 360x640 */
  .dialogo .fontes-cliente { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .dialogo .fontes-cliente .dica-campo { grid-column: 1 / -1; }
  .dialogo #fn-datas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-campanhas { max-height: 150px; }
  .aviso { left: 16px; right: 16px; bottom: calc(144px + env(safe-area-inset-bottom)); max-width: none; }
}

/* ---------------------------------------------------------------- ajuda (Clara do kit no modo sem IA) */
.ajuda-fab .ajuda-fab-ico { width: 28px; height: 28px; color: #fff; fill: #fff; }
.ajuda-cab-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.ajuda-cab-ico .ico { fill: currentColor; }
.ajuda-painel .clara-msgs { align-content: start; }
.ajuda-painel .clara-msg p + p { margin-top: 6px; }
.ajuda-painel a.clara-humano, .ajuda-painel a.clara-humano:hover { text-decoration: none; }
html.dialogo-aberto .clara-fab { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- painel completo (Dreams, completo.js): números, grade, gráficos,
   rosca, origem e anúncios. Cores da marca chegam no <main> (marcas.js). */
/* Números principais */
.pc-tiles{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.pc-tile{position:relative;background:var(--bg);border:1px solid var(--borda);border-radius:var(--r-card-lg);padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-height:118px;overflow:hidden}
.pc-tile[style*="--tile"]::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tile)}
.pc-tile-rot{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted)}
.pc-ponto{width:8px;height:8px;border-radius:50%;background:var(--tile)}
.pc-tile-val{font-size:clamp(24px,2vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--ink);white-space:nowrap}
.pc-tile-sub{font-size:12.5px;color:var(--muted);line-height:1.35}
.pc-tile-hero{grid-row:span 2;justify-content:center;background:linear-gradient(135deg,var(--m-marinho,#0F2949) 0%,color-mix(in srgb,var(--m-marinho,#0F2949) 60%,var(--m-azul,#2C78D6)) 70%,var(--m-azul,#2C78D6) 130%);border:0;color:#fff}
.pc-tile-hero .pc-tile-rot,.pc-tile-hero .pc-tile-sub{color:rgba(255,255,255,.78)}
.pc-tile-hero .pc-tile-val{color:#fff;font-size:clamp(30px,2.8vw,40px)}
.pc-tile-hero .delta{color:#fff}
.pc-divisao{display:flex;gap:2px;height:8px;border-radius:var(--r-pill);overflow:hidden;margin-top:6px;background:rgba(255,255,255,.15)}
.pc-divisao i{display:block;height:100%}
.pc-divisao-leg{display:flex;gap:14px;font-size:12.5px;color:rgba(255,255,255,.85)}
.pc-divisao-leg i,.pc-leg-linha i,.pc-orig i{display:inline-block;flex:none;width:9px;height:9px;border-radius:var(--r-xs);margin-right:6px;vertical-align:baseline}
.pc-divisao-leg i{outline:1.5px solid rgba(255,255,255,.7)}

/* Grade de blocos */
.pc-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.pc-bloco{grid-column:span var(--span,12);background:var(--bg);border:1px solid var(--borda);border-radius:var(--r-card-lg);padding:18px 20px;min-width:0}
.pc-bloco header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.pc-bloco h2{font-size:16px;font-weight:650;letter-spacing:-.01em}
.pc-bloco header small{color:var(--muted);font-size:12.5px}
.pc-sub{margin:10px 0 8px}
.pc-rolagem{overflow-x:auto}

/* Gráficos SVG */
.pc-graf{width:100%;height:auto;display:block}
.pc-graf text{font-size:11px;fill:var(--muted)}
.pc-graf .grade{stroke:var(--borda);stroke-width:1}
.pc-graf .eixo{stroke:var(--borda-2);stroke-width:1}
.pc-leg-linha{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2);margin-bottom:8px}
.pc-leg-linha b{color:var(--ink);margin-left:2px}

/* Rosca */
.pc-rosca{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:16px}
.pc-rosca svg{width:150px;height:150px}
.pc-arco{transition:stroke-width var(--dur-2,.18s)}
.pc-arco:hover{stroke-width:32}
.pc-rosca-num{font-size:21px;font-weight:700;fill:var(--ink)}
.pc-rosca-sub{font-size:11.5px;fill:var(--muted)}
.pc-legenda{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px;min-width:0}
.pc-legenda li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 46px;align-items:center;gap:8px}
.pc-legenda li i{width:10px;height:10px;border-radius:var(--r-xs)}
.pc-leg-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.pc-legenda b{color:var(--ink);font-weight:600;text-align:right}
.pc-leg-pct{color:var(--muted);text-align:right}

/* Funil */
.pc-ver-todas{margin-top:12px;font-size:14px}

/* Tabela "Como conheceu" */
.pc-tab-origem .col-barra{width:28%;min-width:90px}
.pc-tab-origem .pista{display:block;height:9px;background:var(--nevoa);border-radius:var(--r-pill);overflow:hidden}
.pc-tab-origem .cheio{display:block;height:100%;border-radius:var(--r-pill);min-width:2px}
.pc-tab-origem td{padding:9px 12px}
.pc-tab-origem tr.total td{font-weight:700;border-top:2px solid var(--borda)}
.pc-orig{display:flex;align-items:center;max-width:300px;white-space:nowrap}
.pc-orig span{overflow:hidden;text-overflow:ellipsis}
.pc-rastreio{display:flex;gap:14px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:var(--r-card);background:color-mix(in srgb,var(--m-rosa,#F33D66) 9%,transparent);font-size:13px;color:var(--ink-2)}
.pc-rastreio-num{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.pc-rastreio b{color:var(--ink)}

/* Anúncios */
.pc-sugestao{background:var(--nevoa);border-radius:var(--r-card);padding:10px 14px;font-size:14px;margin-bottom:14px;color:var(--ink-2)}
.pc-sugestao b{color:var(--ink)}
.pc-ads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pc-ad{border:1px solid var(--borda);border-radius:var(--r-card);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pc-ad-topo{display:grid;grid-template-columns:22px 48px minmax(0,1fr);gap:10px;align-items:center}
.pc-ad-pos{font-weight:700;color:var(--muted);font-size:14px}
.pc-ad-topo img,.pc-ad-sem{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--nevoa)}
.pc-ad-topo b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-ad-topo small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-ad-nums{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.pc-ad-nums b{color:var(--ink);font-size:14px}
.pc-ad .pista{display:block;height:6px;background:var(--nevoa);border-radius:var(--r-pill);overflow:hidden}
.pc-ad .cheio{display:block;height:100%;border-radius:var(--r-pill)}
.pc-ad .selo{align-self:flex-start;height:22px;font-size:12px}

@media (max-width:1180px){
  .pc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pc-tile-hero{grid-row:auto;grid-column:1 / -1}
  .pc-ads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-bloco[style*="--span:4"]{grid-column:span 6}
  .pc-bloco[style*="--span:8"]{grid-column:span 12}
}
@media (max-width:720px){
  .pc-bloco{grid-column:span 12 !important;padding:16px}
  .pc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-ads{grid-template-columns:1fr}
  .pc-tile-hero{grid-column:1 / -1}
  .pc-cabeca .pc-logo{height:44px}
  .pc-rosca{grid-template-columns:120px minmax(0,1fr)}
  .pc-rosca svg{width:120px;height:120px}
  .pc-tab-origem .col-barra{display:none}
}

.pc-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--borda)}
.pc-mini dt{font-size:12px;color:var(--muted);letter-spacing:0}
.pc-mini dd{font-size:17px;font-weight:700;color:var(--ink)}
.pc-tile-un{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.pc-tile-val2{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-top:2px}
.pc-filtro{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;font-size:12.5px;color:var(--muted)}
.pc-filtro select{flex:1;min-width:0;height:34px;border:1px solid var(--borda-2);border-radius:var(--r-input);background:var(--bg);padding:0 10px;font-size:13.5px;color:var(--ink)}
.pc-insights{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pc-insights li{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 16px;border-radius:var(--r-card);background:var(--nevoa);min-width:0;overflow:hidden}
.pc-insights li::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ins)}
.pc-ins-rot{font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted)}
.pc-ins-val{font-size:16px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-ins-det{font-size:12.5px;color:var(--ink-2);line-height:1.35}
@media (max-width:720px){.pc-insights{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- funil comum (funil.js): completo, painel da marca e Funis */
.funil { display: grid; gap: 6px; }
.funil-nota { font-size: 13px; color: var(--texto-2); text-align: center; }
.funil-lista { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; gap: 2px; }
.funil-etapa { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 4px 0; }
.funil-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; font-size: 15px; color: var(--tinta); text-align: center; }
.funil-linha b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
/* barra do funil com a cor cheia (a opacidade de .9 deixava o laranja da Roos em 2,78:1, portão r2, VIS-04) */
.funil-barra { display: block; height: 14px; min-width: 24px; border-radius: var(--r-pilula); background: var(--fcor); }
.funil-det { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 14px; color: var(--texto-2); text-align: center; }
.funil-taxa { font-size: 14px; font-weight: 600; color: var(--texto-2); padding: 2px 0; text-align: center; }

/* ---------------------------------------------------------------- celular: texto de 14 px e alvos de 44 px */
@media (max-width: 767px) {
  .t-rotulo, .kpi .base, .bloco header small, .tabela td small.sub, .tabela td .sub, .ad-nome small, .dica-campo,
  .s360-num small, .s360-eixo, .int-onde, .selo, .cs-meta, .legenda-g, .cabeca-periodo, .atualizado { font-size: 14px; }
  .colunas text { font-size: 14px; }
  .app-conteudo small, .dialogo small { font-size: 14px; }
  .pc-tile-rot, .pc-tile-sub, .pc-divisao-leg, .pc-leg-linha, .pc-legenda, .pc-ad-topo small,
  .pc-ad-nums, .pc-mini dt, .pc-filtro, .pc-ins-rot, .pc-ins-det, .pc-rastreio, .pc-bloco header small, .pc-sugestao, .funil-nota { font-size: 14px; }
  .btn-p { --btn-alt: 44px; }
  .seg button { min-height: 44px; }
  .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .bloco { padding: 16px 14px; }
  .kpi .valor { font-size: 22px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 8px; }
  .kpi { min-height: 0; padding: 12px; }
  .tabela td a:not(.btn), .vazio-tela p a, .desc a { display: inline-block; padding: 11px 0; margin: -11px 0; }
}
/* tablet (toque, até 1024 px): os mesmos 44 px nos alvos menores */
@media (pointer: coarse), (max-width: 1024px) {
  .btn-p { --btn-alt: 44px; }
  .seg button { min-height: 44px; }
  .link-btn, .alternar { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .app-conteudo .tabela td { padding-top: 12px; padding-bottom: 12px; }
  .tabela td a:not(.btn) { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .app-conteudo .pm-nav a, .app-conteudo .pm-filtro-canal button { height: auto; min-height: 44px; }
  .app-conteudo .pm-ver-mais { min-height: 44px; }
  .app-conteudo .pc-filtro select { min-height: 44px; }
}

/* legenda das fontes nos Ajustes: a dica vai na mesma linha, em texto comum (portão r3, UX-22) */
.dica-legenda { font-weight: 400; color: var(--texto-2); }

/* abaixo de 400 px a linha de ações do funil cabe numa linha: a hora dos dados sem o "Dados de" na tela (portão r3, VIS-21) */
@media (max-width: 399px) {
  .atualizado .rot-dados { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .atualizado:empty::before { content: "00:00"; }
}

/* ---------------------------------------------------------------- Painel geral (superadmin, pedido de 21/10/2026)
   Cards de demanda e atenção (barra da cor do tom à esquerda, como os de Integrações) e uma tabela por objetivo com o
   índice de acompanhamento numa pílula da cor da faixa; o extrato do índice abre num diálogo */
.aviso-faixa.erro { background: var(--erro-fundo); }
.pg-resumo { font-size: 15px; color: var(--texto); }
.pg-resumo b { color: var(--tinta); }
.pg-resumo.esqueleto { max-width: 360px; min-height: 22px; border-radius: 6px; }
.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
/* em coluna: o número no topo (alinhado entre vizinhos), o "Ver" no pé (portão r1, VIS-5); background-color para o
   degradê do esqueleto continuar (VIS-8) */
.pg-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; padding: 14px 16px 12px 18px; border: 1px solid var(--linha); border-radius: var(--r-l); background-color: #fff; }
.pg-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--borda-forte); }
.pg-card.pg-critico::before { background: var(--erro); }
.pg-card.pg-atencao::before { background: var(--atencao); }
.pg-card.pg-ok::before { background: var(--ok); }
.pg-card.esqueleto { min-height: 150px; border: 0; }
.pg-card.esqueleto::before { content: none; }
.pg-card-tit { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--tinta); }
.pg-card-valor { order: -1; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); }
.pg-card.pg-critico .pg-card-valor { color: var(--erro); }
.pg-card-det { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.pg-card-lista { list-style: none; display: grid; gap: 0; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--linha); }
.pg-cli { display: grid; gap: 1px; width: calc(100% + 16px); min-height: 44px; margin: 0 -8px; padding: 6px 8px; border: 0; border-radius: var(--r-m); background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.pg-cli:hover { background: var(--fundo-2); }
a.pg-cli:hover { text-decoration: none; }  /* o item do card do saldo do Meta é link para a tela dele */
.pg-cli b { font-size: 14px; font-weight: 600; }
.pg-cli span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.pg-um .pg-cli span { display: block; overflow: visible; }
.pg-card-lista-toda { margin: 0; padding: 0; border-top: 0; }
.pg-card-lista-toda .pg-cli span { display: block; overflow: visible; }
.pg-mais { align-self: flex-start; margin-top: auto; padding-top: 4px; }
.pg-indice { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: var(--r-pilula); background: var(--superficie-3); color: var(--tinta); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-indice.pg-ok { background: var(--ok-fundo); color: var(--ok); }
.pg-indice.pg-atencao { background: var(--atencao-fundo); color: var(--atencao); }
.pg-indice.pg-critico { background: var(--erro-fundo); color: var(--erro); }
.pg-grupo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ordenar-celular select { width: 100%; min-width: 0; }
.pg-grupo-tit { display: flex; align-items: center; gap: 8px; }
.tabela-painel td { vertical-align: top; }
.pg-nome { padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pg-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-nome:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse), (max-width: 1279px) { .pg-nome { display: inline-flex; align-items: center; min-height: 44px; } }
.pg-cpa.acima { color: var(--erro) !important; font-weight: 600 !important; }
.pg-cpa.margem { color: var(--atencao) !important; font-weight: 600 !important; }
.tabela-painel th, .tabela-painel td { padding-left: 8px; padding-right: 8px; }
.tabela-painel th:first-child, .tabela-painel td:first-child { padding-left: 12px; }
/* o valor principal não quebra; as linhas pequenas (conversões, CPA, referência) quebram dentro da coluna: texto que
   estoura a célula vai para a direita mesmo alinhado à direita e invadia a coluna ao lado (referência sob o CPA alvo) */
.tabela-painel td.num { white-space: normal; }
.tabela-painel td.num b, .tabela-painel .pg-cpa { white-space: nowrap; }
.tabela-painel td:first-child { min-width: 140px; }
.tabela-painel .pg-obs { min-width: 160px; max-width: 300px; font-size: 14px; color: var(--texto); }
.tabela-painel .col-ind { text-align: center; white-space: nowrap; }
.tabela-painel td.col-ind small.sub { white-space: nowrap; }
.pg-meta { white-space: nowrap; }
.pg-barra { position: relative; display: block; width: 112px; height: 6px; margin: 7px 0 3px; border-radius: var(--r-pilula); background: var(--superficie-3); }
.pg-barra .cheio { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pilula); background: var(--marca); }
.pg-barra.fora .cheio { background: var(--atencao); }
.pg-barra .ritmo { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tinta); }
@media (min-width: 1024px) {
  /* E-commerce e Leads com as mesmas colunas, alinhadas uma embaixo da outra (portão r1, VIS-4) */
  .tabela-painel:not(.tabela-hub) { min-width: 920px; table-layout: fixed; }
  .tabela-painel:not(.tabela-hub) th:nth-child(1) { width: 132px; }
  .tabela-painel:not(.tabela-hub) th:nth-child(2) { width: 72px; }
  .tabela-painel:not(.tabela-hub) th:nth-child(3), .tabela-painel:not(.tabela-hub) th:nth-child(4),
  .tabela-painel:not(.tabela-hub) th:nth-child(5) { width: 96px; }
  .tabela-painel:not(.tabela-hub) th:nth-child(6) { width: 88px; }
  .tabela-painel:not(.tabela-hub) th:nth-child(7) { width: 132px; }
  .tabela-painel:not(.tabela-hub) th:nth-child(8) { width: 76px; }
  .tabela-painel:not(.tabela-hub) td { overflow-wrap: anywhere; }
  .tabela-painel:not(.tabela-hub) td.num { overflow-wrap: normal; }
  .tabela-painel th:first-child, .tabela-painel td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
  .tabela-painel th:first-child { z-index: 2; background: var(--fundo-2); }
}
.pg-extrato-cab { display: flex; align-items: center; gap: 12px; }
.pg-extrato-cab .pg-indice { min-width: 56px; height: 40px; font-size: 20px; }
.pg-extrato-cab small.sub { display: block; margin-top: 2px; color: var(--texto-2); font-size: 13px; }
.pg-extrato td, .pg-extrato-num td { vertical-align: top; }
.pg-extrato tr.pg-zero td { color: var(--texto-2); }
.pg-info { font-size: 15px; line-height: 1.5; color: var(--texto); }
.mc-dica-churn { margin-top: -10px; }

/* ---------------------------------------------------------------- Integrações principais e Rotinas › WhatsApp */
.int-grade-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.int-card p small.sub { display: block; margin-top: 4px; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.nt-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.nt-destino p { font-size: 15px; color: var(--tinta); }
.nt-destino .sub { display: block; margin-top: 2px; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.nt-usam { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--linha); }
.nt-reports { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.nt-reports li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--tinta); }
.nt-reports .sub, .nt-usam > p.sub { color: var(--texto-2); font-size: 14px; }
.nt-reports li > .sub { flex: none; white-space: nowrap; }
.nt-avulsos h2 { margin-bottom: 8px; font-size: 15px; color: var(--tinta); }
.nt-reports li > span:first-child { min-width: 0; }
.nt-reports li small.sub { display: block; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.int-principais .int-card header { flex-wrap: wrap; }
.int-principais .selo { white-space: nowrap; }

@media (max-width: 767px) {
  .pg-card-det, .pg-cli span, .pg-extrato-cab small.sub, .int-card p small.sub, .nt-destino .sub, .nt-reports li small.sub, .dialogo .tabela th { font-size: 14px; }
}
@media (max-width: 719px) {
  .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pg-card { padding: 12px 12px 8px 14px; }
  .pg-card-valor { font-size: 24px; }
  /* no celular, o primeiro cliente de cada card; os outros em "Ver os N" (portão r1, CRO-9) */
  .pg-cards .pg-card-lista li + li { display: none; }
  .pg-cards .pg-cli span { -webkit-line-clamp: 2; }
  .tabela-painel .pg-obs { max-width: none; min-width: 0; }
}

/* celular e tablet: o cartão de cada cliente com nome e índice no alto, ontem / 3 dias / 7 dias lado a lado e o resto em
   linhas "rótulo  valor" (a tabela vira cartões abaixo de 1024 px, como as outras) */
@media (max-width: 1023px) {
  .app-conteudo table.tabela.tabela-painel tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
  .app-conteudo table.tabela-painel td { grid-column: 1 / -1; }
  .app-conteudo table.tabela-painel td:first-child { grid-column: 1 / 3; align-self: center; padding-bottom: 0; }
  .app-conteudo table.tabela-painel td.col-ind { grid-column: 3; justify-content: flex-end; align-self: start; }
  .app-conteudo table.tabela-painel td.col-ind::before { content: none; }
  .app-conteudo table.tabela-painel td.col-ind .cel-valor { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
  .app-conteudo table.tabela-painel td.col-ind small.sub { margin: 0; }
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(3),
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(4),
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(5) { grid-column: auto; display: grid; align-content: start; gap: 2px; padding: 8px 0 4px; border-top: 1px solid var(--linha); text-align: left; }
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(3)::before,
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(4)::before,
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(5)::before { max-width: none; }
  .app-conteudo table.tabela-painel td.pg-obs { display: grid; gap: 2px; max-width: none; min-width: 0; text-align: left; }
  /* o porquê logo abaixo do nome, antes dos números (portão r1, CRO-9); CPA numa linha só */
  .app-conteudo table.tabela-painel td:first-child, .app-conteudo table.tabela-painel td.col-ind { order: -2; }
  .app-conteudo table.tabela-painel td.pg-obs { order: -1; padding-bottom: 6px; }
  .app-conteudo table.tabela-painel .pg-cpa { white-space: nowrap; }
  .app-conteudo table.tabela-painel td.pg-obs::before { max-width: none; }
  .app-conteudo table.tabela-painel td.pg-obs:empty { display: none; }
  .pg-barra { margin-left: auto; }
}

/* ---------------------------------------------------------------- portão r1 (21/10/2026): diálogos, campos e o resto */
/* a barra de ações presa no pé do diálogo também no computador (VIS-9) */
@media (min-width: 768px) {
  .dialogo > .acoes:last-child { position: sticky; bottom: -24px; z-index: 1; margin: 0 -24px -24px; padding: 12px 24px 16px; background: #fff; border-top: 1px solid var(--linha); }
}
/* rádio e caixa de marcar dentro de .campo com o tamanho delas, sem os 46 px dos campos de texto (VIS-6, VIS-10) */
.campo input[type="radio"], .campo input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; }
.mc-endereco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; color: var(--texto); overflow-wrap: anywhere; }
.mc-endereco > span { font-weight: 600; color: var(--tinta); }
.gi-uso { color: var(--atencao) !important; font-weight: 600 !important; }
.pg-canais { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 14px; color: var(--texto); }
.pg-abrir { font-weight: 700; }
/* sem barra embaixo, o botão da ajuda desce para o pé no celular (VIS-12) */
@media (max-width: 719px) { body:has(.app-lateral) .clara-fab { bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* ---------------------------------------------------------------- portão r2 (21/10/2026) */
/* a barra de ações presa não cobre o campo que recebe o foco pelo Tab (WCAG 2.4.11, UX2-3) */
.dialogo { scroll-padding-bottom: 96px; }
/* setas da barra com 44 px também no computador com toque (UX2-12) */
@media (pointer: coarse) { .lateral-abrir { width: 44px; height: 44px; } }
/* caixa de marcar com rótulo de duas linhas não encolhe (VIS2-4) */
.check input { flex: none; }
/* cartão do cliente: nome e índice alinhados pelo centro (VIS2-8) */
@media (max-width: 1023px) {
  .app-conteudo table.tabela-painel td.col-ind { align-self: center; }
  .app-conteudo table.tabela-painel td:first-child .pg-nome { overflow-wrap: anywhere; }
}
/* 320 px: ontem, 3 e 7 dias empilhados (VIS2-6) */
@media (max-width: 339px) {
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(3), .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(4),
  .app-conteudo table.tabela-painel:not(.tabela-hub) td:nth-child(5) { grid-column: 1 / -1; }
}
/* menu da conta no celular: sem a barra de baixo, a folha encosta no pé (VIS2-9) */
@media (max-width: 767px) {
  html:has(.app-lateral) .menu-sub.menu-folha { bottom: calc(8px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 88px); }
}

/* ---------------------------------------------------------------- portão r3 (21/10/2026) */
/* esqueleto da data do painel com o texto que chega ("Dados de 21/10, 13:01"): os botões não pulam (VIS3-6) */
/* algarismos de largura igual: "21/10, 17:01" ocupa o mesmo que "00/00, 00:00" */
.atualizado.pg-quando { font-variant-numeric: tabular-nums; }
.atualizado.pg-quando:empty::before { content: "Dados de 00/00, 00:00"; }
@media (max-width: 399px) { .atualizado.pg-quando:empty::before { content: "00/00, 00:00"; } }
/* cartão do cliente abaixo de 375: o rótulo da faixa embaixo da pílula, para o nome não passar por cima (VIS3-1) */
@media (max-width: 374px) {
  .app-conteudo table.tabela-painel td.col-ind .cel-valor { flex-direction: column; align-items: flex-end; gap: 2px; }
}
/* extrato abaixo de 360: a tabela de anúncios cabe na folha; nada arrasta a folha de lado (VIS3-2) */
.dialogo { overflow-x: hidden; }
@media (max-width: 359px) {
  .dialogo .pg-extrato-num th, .dialogo .pg-extrato-num td { padding-left: 6px; padding-right: 6px; }
  .dialogo .pg-extrato-num th { white-space: normal; }
}
/* computador: Cliente e CPA alvo mais largos a partir de 1440, a referência numa linha (VIS3-7); o cabeçalho da tabela
   preso à página ao rolar, abaixo do cabeçalho fixo da tela até 1279 (VIS3-8) */
@media (min-width: 1440px) {
  .tabela-painel:not(.tabela-hub) th:nth-child(1) { width: 172px; }
  .tabela-painel:not(.tabela-hub) th:nth-child(6) { width: 128px; }
}
@media (min-width: 1024px) {
  .pg-grupo .rolagem-tabela { overflow: visible; }
  .tabela-painel thead th { top: 0; z-index: 3; }
  .tabela-painel thead th:first-child { z-index: 4; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .tabela-painel thead th { top: var(--pg-cab, 72px); }
}
/* o botão da ajuda (60 px a 20 px do pé; 52 px a 16 px no celular) não cobre a última linha no fim da rolagem
   (VIS-19 do portão da tela do Saldo do Meta) */
body:has(.clara-fab) .app-lateral .app-conteudo { padding-bottom: 96px; }
/* Editar relatório: prévia e remover no corpo, a barra presa só com Cancelar e Salvar (portão r3, UX3-3) */
.rep-extras { display: flex; flex-wrap: wrap; gap: 8px; }
/* Notificações: o diário que já vai para outro destino, numa linha inteira acima do botão (portão r5, CRO5-5) */
.nt-diario-fora { flex-basis: 100%; margin: 0; color: var(--texto-2); font-size: 14px; }
@media (max-width: 719px) { body:has(.clara-fab) .app-lateral .app-conteudo { padding-bottom: 84px; } }