/* ═══════════════ Tipografia ═══════════════
   Duas famílias, hospedadas AQUI (public/fonts) — o painel roda num IP puro e
   não pode depender de CDN: se o Google não abrir, a tela não pode mudar de
   cara. IBM Plex Sans para texto e IBM Plex Mono para DINHEIRO e contagem.
   O mono não é enfeite: é a voz do livro-caixa — as colunas de valor alinham
   dígito com dígito, e o olho compara linha a linha sem reler. */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   2K Dashboard — Painel
   Sistema de design: shell com sidebar + topbar, grid de cards.

   Paleta de dados validada com o six-checks (OKLab/CVD) contra as
   duas superfícies reais deste painel:
     dark  (#0F1620): todos os checks PASS
     light (#F8FAFC): PASS; aqua fica em 2.69:1 e por isso só é usada
                      onde há rótulo visível (regra de relief).
   Séries: 1 = azul (montante) · 2 = laranja (contas R$) · 3 = aqua.
   Sequencial (heatmap): UMA hue, claro→escuro. Nunca arco-íris.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Superfícies */
  --page: #0A0F16;
  --surface: #0F1620;
  --surface-2: #141D29;
  --surface-3: #1A2432;

  /* Tinta */
  --ink: #FFFFFF;
  --ink-2: #AFBACB;
  --muted: #7C8899;

  /* Linhas */
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --grid: #1E2836;
  --axis: #2A3648;

  /* Séries categóricas (ordem fixa — nunca ciclada) */
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;

  /* Rampa sequencial (azul 100→700) — magnitude */
  --seq-100: #fdd5d2; --seq-200: #f9aca6; --seq-300: #f3827a; --seq-400: #e9554d;
  --seq-500: #cf322b; --seq-600: #a3221d; --seq-700: #731612;
  --seq-zero: #221a1c;

  /* Status (reservado — nunca vira "série 4") */
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;

  --accent: var(--s1);
  --accent-soft: rgba(57, 135, 229, .14);

  /* Selos de link repetido (âmbar = mesma pessoa, vermelho = outra). Token
     próprio porque no tema claro o âmbar de status não tem contraste em texto
     pequeno — aqui ele escurece sem mexer nos avisos do resto do painel. */
  --rep-mesma: var(--warning);
  --rep-outra: var(--critical);

  /* Serviços validados (3 passos). É parte-de-um-todo da MESMA medida
     (montante atendido), então UMA hue em dois tons + hachura — não duas
     séries categóricas. Assim não briga com o --s1/--s2 do quadro ao lado e
     a distinção sobrevive a qualquer daltonismo (tom + textura, não cor). */
  --sv-ok: var(--s3);
  /* Cor de CATEGORIA dos quadros do Painel — montante, contas e média nunca
     se confundem: o par lançado/validado de cada uma divide a mesma cor. */
  --cat-montante: var(--s1);
  --cat-contas: var(--s2);
  --cat-media: #9d6bf2;
  --sv-pend: rgba(25, 158, 112, .22);
  --sv-pend-linha: rgba(25, 158, 112, .62);
  /* Mesmo par para a coluna de CONTAS do quadro de serviços: o laranja da
     série 2 (que já significa "contas" no quadro ao lado) em dois tons. */
  --s2-claro: rgba(217, 89, 38, .22);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.5);
  --font: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Dinheiro, contagem, data e hora — tudo que se compara em coluna. */
  --font-dados: 'IBM Plex Mono', ui-monospace, "SF Mono", "Cascadia Mono", monospace;
  /* Escala de espaço (8pt): o ritmo do painel sai daqui, não de números soltos. */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem;

  /* Gradientes e brilho — usados por .glass, .text-gradient e pelo fundo.
     Cada tema redefine; aqui ficam os do tema escuro de sempre. */
  --gradient-primary: linear-gradient(135deg, var(--s1), var(--s3));
  --gradient-bg: radial-gradient(ellipse at top, #101A26 0%, #0A0F16 60%);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  --glow: rgba(57, 135, 229, .28);
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 18px 40px -22px rgba(0,0,0,.65);
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #F1F4F8;
  --surface: #F8FAFC;
  --surface-2: #FFFFFF;
  --surface-3: #EEF2F7;

  --ink: #0B1220;
  --ink-2: #445063;
  --muted: #64748B;

  --line: rgba(11, 18, 32, .10);
  --line-strong: rgba(11, 18, 32, .16);
  --grid: #E6EAF0;
  --axis: #CBD3DF;

  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;

  --seq-100: #fdd5d2; --seq-200: #f9aca6; --seq-300: #f3827a; --seq-400: #e9554d;
  --seq-500: #cf322b; --seq-600: #a3221d; --seq-700: #731612;
  --seq-zero: #E8EDF4;

  --accent-soft: rgba(42, 120, 214, .12);
  /* 4.6:1 e 5.4:1 sobre #FFFFFF — o âmbar/vermelho de status ficariam em ~2:1 */
  --rep-mesma: #8A5A00;
  --rep-outra: #B3261E;
  /* O verde claro fica em 2,7:1 sobre a superfície branca: escurece aqui para
     a barra do quadro de serviços não sumir no tema claro. */
  --sv-ok: #0f7d55;
  --cat-media: #7c4ddb;
  --sv-pend: rgba(15, 125, 85, .16);
  --sv-pend-linha: rgba(15, 125, 85, .55);
  --s2-claro: rgba(235, 104, 52, .18);
  --shadow: 0 1px 2px rgba(11,18,32,.06), 0 8px 24px -14px rgba(11,18,32,.22);
  --gradient-primary: linear-gradient(135deg, var(--s1), var(--s3));
  --gradient-bg: linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 60%);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  --glow: rgba(42, 120, 214, .18);
  --shadow-card: 0 1px 2px rgba(11,18,32,.06), 0 18px 40px -24px rgba(11,18,32,.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMAS ADICIONAIS
   Cada tema redefine os MESMOS tokens — nenhum componente conhece cor fixa,
   então trocar o atributo `data-theme` no <html> recolore o painel inteiro.

   As séries dos gráficos (--s1..--s3 e a rampa --seq-*) NÃO seguem o acento do
   tema: elas são a paleta categórica validada (contraste e daltonismo). O que
   muda entre os temas é qual VARIAÇÃO dela é usada — a de superfície escura ou
   a de superfície clara. Repintar as séries com a cor do tema quebraria a
   regra de que a cor identifica o dado, não a decoração.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Carbono & Vermelho (preto puro, marca vermelha, lucro verde-água) ─
   Camadas quase pretas separadas por borda translúcida, não por tom de fundo.
   O vermelho é a MARCA (acento); o vermelho de status fica um passo mais claro
   para erro não se confundir com "item ativo". O verde-água é o "validado". */
:root[data-theme="carbono"] {
  color-scheme: dark;
  /* Quase preto, levemente frio: preto puro chapa os cards no fundo. */
  --page: #08080a;
  --surface: #0d0d10;
  --surface-2: #131317;
  --surface-3: #1a1a1f;

  --ink: #f5f5f5;
  --ink-2: #a1a1aa;
  --muted: #8a8a94;

  --line: hsla(0, 0%, 100%, .08);
  --line-strong: hsla(0, 0%, 100%, .14);
  --grid: #1c1c21;
  --axis: #2e2e35;

  --s1: #3987e5; --s2: #d95926; --s3: #199e70;
  --seq-100: #fdd5d2; --seq-200: #f9aca6; --seq-300: #f3827a; --seq-400: #e9554d;
  --seq-500: #cf322b; --seq-600: #a3221d; --seq-700: #731612;
  --seq-zero: #17171b;

  --good: #7fffd4;
  --warning: hsl(38 92% 58%);
  --critical: #ff5a5a;
  --accent: #e53935;
  --accent-soft: rgba(229, 57, 53, .12);
  --rep-mesma: hsl(38 92% 62%);
  --rep-outra: #ff6b6b;
  --sv-ok: #7fffd4;
  --cat-montante: #3987e5;
  --cat-contas: #e8783f;
  --cat-media: #a47cf5;
  --sv-pend: rgba(127, 255, 212, .14);
  --sv-pend-linha: rgba(127, 255, 212, .5);
  --s2-claro: rgba(217, 89, 38, .22);

  --radius: 14px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 10px 26px -14px rgba(0,0,0,.9);
  --gradient-primary: linear-gradient(135deg, #e53935, #ff4444);
  --gradient-bg: radial-gradient(ellipse at top, #120a0c 0%, #08080a 60%);
  --gradient-card: linear-gradient(160deg, hsla(0,0%,100%,.04), hsla(0,0%,100%,.01));
  --glow: rgba(229, 57, 53, .22);
  --shadow-card: 0 1px 2px rgba(0,0,0,.6), 0 20px 44px -24px rgba(0,0,0,.9);
}

/* ── Base ───────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--page); background-image: var(--gradient-bg);
  background-attachment: fixed; color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Um foco visível em tudo que recebe teclado — o painel é operado às pressas. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--accent); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .78rem; margin: .35rem 0; }
.err { color: var(--critical); font-size: .82rem; min-height: 1em; }
.ok { color: var(--good); font-size: .82rem; }
code { background: var(--surface-3); padding: .1rem .3rem; border-radius: 5px; font-size: .85em; }

/* ── Login ──────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(380px, 100%); text-align: center; }
.login-card h1 { font-size: 1.3rem; margin: .9rem 0 .2rem; }
.login-card p { margin: 0 0 1.2rem; }
.brand-mark {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.brand-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ── Shell: sidebar + conteúdo ──────────────────────────── */
.shell {
  --rodape-h: 72px; /* altura do rodapé: a área de cima encolhe exatamente isso */
  display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto auto; min-height: 100vh;
}

.sidebar {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: 1.4rem;
  position: sticky; top: 0; height: calc(100vh - var(--rodape-h));
}
.brand { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem; }
.brand-mark.sm { width: 32px; height: 32px; border-radius: 9px; }
.brand-mark.sm svg { width: 17px; height: 17px; }
/* Logo 2K (imagem) no lugar do ícone: preenche o quadrado, fundo preto da própria arte */
.brand-mark.brand-logo { background: transparent; overflow: hidden; }
.brand-mark.brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-mark.sm.brand-logo { width: 40px; height: 40px; border-radius: 10px; }
.login-card .brand-mark.brand-logo { width: 72px; height: 72px; border-radius: 16px; }
.brand b { font-size: .95rem; letter-spacing: -.01em; }
/* frase alinhada pela base do ícone, em vez de centralizada nele */
.brand .brand-texto { align-self: flex-end; margin-bottom: 3px; }
.brand span.brand-sobre { font-size: .6rem; font-weight: 700; letter-spacing: .18em; color: var(--accent); line-height: 1.2; margin-bottom: .1rem; }
.brand b.brand-nome { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
.brand span { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  color: var(--muted); padding: 0 .6rem .35rem;
}
.nav-item {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left;
  padding: .55rem .6rem .55rem .75rem; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: .86rem; font-weight: 500;
  position: relative; transition: background .12s ease, color .12s ease;
}
.nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
/* Ativo: uma barra na lateral em vez do bloco inteiro pintado — o menu tem 14
   itens, e 14 blocos de cor competiriam com os dados da tela. */
.nav-item.active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item.active svg { stroke: var(--accent); }

/* ── Topbar ─────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 1rem; padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 1rem; margin: 0; font-weight: 600; letter-spacing: -.015em; }
.topbar .spacer { flex: 1; }

/* ── Rodapé ─────────────────────────────────────────────── */
/* Sempre à vista, sem rolar: a área de cima (barra lateral + conteúdo) tem
   100vh menos a altura dele, e ele gruda no pé da janela (sticky) nas telas
   em que a página rola. Duas partes alinhadas às colunas do shell: quem está
   logado embaixo da barra lateral, a assinatura do sistema embaixo do conteúdo. */
.rodape {
  grid-column: 1 / -1; display: grid; grid-template-columns: 240px 1fr;
  /* acima da barra lateral, que é sticky e senão cobriria o canto esquerdo */
  position: sticky; bottom: 0; z-index: 25;
  height: var(--rodape-h); border-top: 1px solid var(--line);
  background: var(--rodape-fundo);
  font-size: .72rem; color: var(--muted);
}
/* O que sobrar da janela abaixo do rodapé ganha a mesma cor: a barra "desce"
   até o fim da tela em vez de deixar uma faixa vazia. */
html { --rodape-fundo: color-mix(in srgb, var(--surface) 92%, var(--page)); background: var(--rodape-fundo); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html { --rodape-fundo: var(--surface); }
}
/* Quem está logado: avatar | nome + papel | Sair — numa linha só. */
.rodape-usuario {
  display: flex; align-items: center; gap: .65rem; padding: 0 .8rem 0 1rem;
  min-height: 0; border-right: 1px solid var(--line); min-width: 0;
}
.rodape-avatar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-size: .85rem; font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.rodape-avatar.viewer {
  background: var(--surface-3); border-color: var(--line); color: var(--ink-2); box-shadow: none;
}
.rodape-quem { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; line-height: 1.15; }
.rodape-quem b { color: var(--ink); font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rodape-quem span {
  align-self: flex-start; padding: .1rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.rodape-sair {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  height: 32px; padding: 0 .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); font-size: .75rem; font-weight: 500; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rodape-sair:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.rodape-sair:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rodape-sair svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.rodape-info {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.5rem; min-width: 0;
}
.rodape-info span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rodape-info span:last-child { flex: none; font-family: var(--font-dados); }
@media (max-width: 900px) {
  /* Celular: no fim da página, sem grudar — fixo, comeria a tela pequena. */
  .rodape { grid-template-columns: 1fr; height: auto; position: relative; }
  .rodape-usuario { padding: .55rem 1rem; border-right: none; border-bottom: 1px solid var(--line); }
  .rodape-info { padding: .5rem 1rem; }
}

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 500;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.open { background: var(--good); box-shadow: 0 0 0 3px rgba(12,163,12,.18); }
.dot.connecting { background: var(--warning); box-shadow: 0 0 0 3px rgba(250,178,25,.18); }
.dot.erro { background: var(--critical); box-shadow: 0 0 0 3px rgba(208,59,59,.18); }

.content { padding: 1.5rem; display: grid; gap: 1rem; align-content: start; }

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid transparent;
}
.btn { transition: filter .12s ease, transform .06s ease; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn-ghost:disabled { opacity: .45; cursor: default; filter: none; transform: none; }
.btn-ghost {
  padding: .48rem .85rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); }
.btn-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line);
}
.btn-icon:hover { color: var(--ink); }
/* Ofuscar ligado: botão aceso na cor da marca, para ninguém esquecer que está ativo */
#ofuscar-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.btn-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Ação destrutiva: cor de status critical, fora da paleta de séries. */
.btn-danger {
  padding: .55rem 1rem; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600;
  background: var(--critical); color: #fff;
}
.btn-danger:hover { filter: brightness(1.08); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--e4) 1.15rem 1.15rem; box-shadow: var(--shadow); min-width: 0;
}
/* Cabeçalho com fio: separa o rótulo do dado sem precisar de mais espaço. */
.card-head {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 -1.15rem var(--e4); padding: 0 1.15rem .7rem;
  border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: .88rem; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.card-head .sub { font-size: .74rem; color: var(--muted); font-weight: 400; }
.card-head .spacer { flex: 1; }
/* O ícone ganha um quadrado tingido: vira âncora visual da coluna de cards. */
.card-head svg.hico {
  width: 26px; height: 26px; padding: 5px; border-radius: 7px; box-sizing: border-box;
  background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 1.7; flex: none;
}
.card.danger { border-color: rgba(208, 59, 59, .35); }
.card.danger .card-head svg.hico { stroke: var(--critical); }

/* ── Grid ───────────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid.kpis { grid-template-columns: repeat(4, 1fr); }
/* 5 KPIs (aba Brogueiras, com "Links repetidos") */
.grid.kpis.k5 { grid-template-columns: repeat(5, 1fr); }
.grid.kpis.k6 { grid-template-columns: repeat(6, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.split-23 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1200px) {
  /* auto-fit: 5 KPIs viram 3+2 ou 5 numa linha, nunca 2+2+1 com um buraco. */
  .grid.kpis, .grid.kpis.k5, .grid.kpis.k6 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: .8rem; overflow-x: auto; }
  .sidebar .nav-label { display: none; }
  .nav { flex-direction: row; }
  .nav-item span { display: none; }
  .nav-item { padding: .55rem; }
  .content { padding: 1rem; }
  .grid.kpis, .grid.kpis.k5, .grid.kpis.k6, .grid.c2, .grid.c3, .grid.split-23 { grid-template-columns: 1fr; }
}

/* ── Stat tile (KPI) ────────────────────────────────────── */
.stat { display: flex; flex-direction: column; gap: .1rem; }
.stat .label {
  font-size: .68rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
}
/* Figuras proporcionais em número grande — tabular só em coluna. */
.stat .value {
  font-family: var(--font-dados); font-size: 1.55rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.3; font-variant-numeric: tabular-nums;
  margin-top: .15rem;
}
.stat .foot { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; min-height: 30px; }
.stat .spark { flex: 1; height: 30px; min-width: 0; }
.delta { font-size: .74rem; font-weight: 600; display: inline-flex; align-items: center; gap: .15rem; }
.delta.up { color: var(--good); }
.delta.down { color: var(--critical); }
.delta.flat { color: var(--muted); }
/* Não é variação, é desfecho: "18 validados · 78%" embaixo dos montantes pegos.
   Usa a MESMA cor do validado no resto do painel. */
.delta.ok { color: var(--sv-ok); }

/* ── Gráficos ───────────────────────────────────────────── */
.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .7rem; }
.legend span { display: inline-flex; align-items: center; gap: .38rem; font-size: .76rem; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.scale-legend { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--muted); margin-top: .6rem; }
.scale-legend .ramp { display: flex; gap: 2px; }
.scale-legend .ramp i { width: 15px; height: 8px; border-radius: 2px; }
/* escala esticada: ocupa toda a largura livre da legenda */
.scale-legend .ramp-cheia { flex: 1 1 auto; min-width: 0; }
.scale-legend .ramp-cheia i { flex: 1 1 0; width: auto; }

/* Tooltip compartilhado — camada de hover de verdade, não só <title>. */
#tip {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0;
  transition: opacity .1s; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .5rem .65rem; font-size: .78rem; box-shadow: var(--shadow); max-width: 260px;
}
#tip.on { opacity: 1; }
#tip .t-title { font-weight: 600; margin-bottom: .25rem; }
#tip .t-row { display: flex; align-items: center; gap: .4rem; color: var(--ink-2); }
#tip .t-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
#tip .t-row b { color: var(--ink); font-weight: 600; margin-left: auto; padding-left: .8rem; }
/* Dica do Desempenho dos Operadores (tipOperador) */
#tip:has(.t-op) { max-width: 320px; padding: .6rem .75rem; }
.t-op { display: grid; grid-template-columns: 8px auto 1fr auto; column-gap: .5rem; row-gap: .3rem; align-items: center; min-width: 230px; }
.t-op-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .2rem; }
.t-op-head .t-title { margin: 0; }
.t-pill { font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; white-space: nowrap;
  color: var(--sv-ok); background: color-mix(in srgb, var(--sv-ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sv-ok) 30%, transparent); }
.t-op-row { display: contents; }
.t-op-row i { width: 8px; height: 8px; border-radius: 2px; }
.t-op-row span { color: var(--ink-2); white-space: nowrap; }
.t-op-row b { justify-self: end; padding-left: .8rem; color: var(--ink); font-weight: 600; font-family: var(--font-dados); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-op-row em { font-style: normal; font-size: .72rem; color: var(--muted); font-family: var(--font-dados); white-space: nowrap; min-width: 4.5em; }
.t-op-foot { grid-column: 1 / -1; margin-top: .35rem; padding-top: .4rem; border-top: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
/* Alvo de hover maior que a marca (faixa/coluna inteira), com realce próprio —
   a marca fica antes no DOM, então o destaque vem do próprio alvo. */
.hit { fill: transparent; cursor: pointer; outline: none; }
.hit:hover, .hit:focus-visible { fill: rgba(127, 143, 166, .12); }

.empty { display: grid; place-items: center; min-height: 140px; color: var(--muted); font-size: .82rem; text-align: center; }

/* ── Listas / ranking ───────────────────────────────────── */
.rank { display: flex; flex-direction: column; gap: .1rem; }
.rank-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .1rem; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: none; }
.rank-n { width: 20px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-body { flex: 1; min-width: 0; }
.rank-name { font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { font-size: .73rem; color: var(--muted); }
.rank-val { font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.bar-list { display: flex; flex-direction: column; gap: .7rem; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; }
.bar-row .n { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .v { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--s1); }

.mini-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }

/* ── Funil da validação em 3 passos ─────────────────────── */
.h-sub { font-size: .82rem; color: var(--ink-2); font-weight: 600; margin: 0; }
.funil { display: flex; flex-direction: column; gap: .55rem; }
.funil-passo { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: center; }
.funil-passo .n {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--ink-2);
  background: var(--surface-3); border: 1px solid var(--line);
}
.funil-passo.ok .n { background: var(--sv-pend); border-color: var(--sv-pend-linha); color: var(--sv-ok); }
.funil-passo .l { font-size: .8rem; color: var(--ink-2); }
.funil-passo .v { font-size: .95rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.funil-barra { grid-column: 2 / -1; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.funil-barra i { display: block; height: 100%; background: var(--sv-ok); border-radius: 4px; }
.funil-perdido .v { color: var(--muted); }

/* Swatch hachurado da legenda — a textura é o encoding secundário, para a
   distinção não depender da cor. */
.legend i.hachura {
  background: var(--sv-pend);
  background-image: repeating-linear-gradient(45deg,
    var(--sv-pend-linha) 0 1.5px, transparent 1.5px 4px);
  border: 1px solid var(--sv-pend-linha);
}

/* Selos da tabela de serviços */
.tag-cas {
  display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .42rem;
  border-radius: 999px; font-size: .68rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface-3);
}
.tag-cas.citacao { color: var(--sv-ok); border-color: var(--sv-pend-linha); background: var(--sv-pend); }
.tag-cas.tempo { color: var(--rep-mesma); border-color: rgba(250, 178, 25, .35); background: rgba(250, 178, 25, .12); }
.tag-passo { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-passo.falta { color: var(--rep-mesma); }
.mini { display: flex; flex-direction: column; }
.mini .l {
  font-size: .68rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.mini .v {
  font-family: var(--font-dados); font-size: .95rem; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ── Tabelas ────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tbl th {
  text-align: left; font-weight: 600; font-size: .67rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); padding: .45rem .6rem;
  border-bottom: 1px solid var(--line); white-space: nowrap;
  /* Rolando uma tabela longa, o cabeçalho continua dizendo o que é cada coluna. */
  position: sticky; top: 0; z-index: 1; background: var(--surface);
}
.tbl td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .1s ease; }
.tbl tbody tr:hover { background: var(--surface-2); }
/* Toda coluna de número em mono: é o que faz a coluna alinhar de verdade. */
.tbl .num { text-align: right; font-family: var(--font-dados); font-variant-numeric: tabular-nums; font-size: .78rem; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .7rem; font-size: .78rem; color: var(--muted); }
.pager button {
  width: 26px; height: 26px; border-radius: 7px; background: var(--surface-3);
  border: 1px solid var(--line); color: var(--ink-2);
}
.pager button:disabled { opacity: .4; cursor: default; }

/* ── Formulários ────────────────────────────────────────── */
label { display: block; font-size: .8rem; color: var(--ink-2); margin: .7rem 0 .25rem; font-weight: 500; }
input, textarea, select {
  width: 100%; padding: .55rem .7rem; border-radius: var(--radius-sm); font: inherit; font-size: .85rem;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
input[type="file"] { padding: .45rem; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 70px; }
.chk { display: flex; align-items: center; gap: .55rem; margin: .55rem 0; font-size: .85rem; color: var(--ink); }
.chk input { width: auto; margin: 0; accent-color: var(--accent); }
.form-actions { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }

.check-list { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; margin: .5rem 0; }
.check-row {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem;
  border-radius: var(--radius-sm); font-size: .84rem; margin: 0;
}
.check-row:hover { background: var(--surface-3); }
.check-row input { width: auto; margin: 0; accent-color: var(--accent); }
.check-row .n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-row .c { font-size: .73rem; color: var(--muted); }

/* ── Brogueiras: pedidos de link ─────────────────────────── */
.seg.compacto { padding: 2px; }
.seg.compacto button { padding: .25rem .6rem; font-size: .74rem; }

#tbl-bg tbody tr { cursor: pointer; }
.tag-aviso {
  margin-left: .35rem; padding: 0 .35rem; border-radius: 999px;
  background: rgba(250, 178, 25, .16); color: var(--warning); font-size: .7rem; font-weight: 600;
}
/* Tipo do pedido: cor + rótulo (a cor sozinha não distingue para daltônicos) */
.tag-tipo {
  padding: .1rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.tag-tipo.montante { background: rgba(57, 135, 229, .14); color: var(--s1); border-color: rgba(57, 135, 229, .3); }
.tag-tipo.conta { background: rgba(217, 89, 38, .14); color: var(--s2); border-color: rgba(217, 89, 38, .3); }
.tag-tipo.media { background: rgba(25, 158, 112, .14); color: var(--sv-ok); border-color: rgba(25, 158, 112, .3); }
.tag-tipo.indefinido { background: var(--surface-3); color: var(--muted); }

.plat-row { display: flex; align-items: center; gap: .6rem; font-size: .78rem; padding: .22rem 0; }
.plat-nome { width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.plat-barra { flex: 1; height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.plat-barra i { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
.plat-qtd { width: 2.2rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Links repetidos ─────────────────────────────────────
   Duas cores de status (nunca séries): âmbar = ela reenviou o próprio link;
   vermelho = o link passou para outra Brogueira. A cor nunca carrega o
   sentido sozinha — todo selo traz "mesma"/"outra" ou a contagem escrita. */
.tag-rep {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.tag-rep.mesma { background: rgba(250, 178, 25, .16); color: var(--rep-mesma); border-color: rgba(250, 178, 25, .32); }
.tag-rep.outra { background: rgba(208, 59, 59, .16); color: var(--rep-outra); border-color: rgba(208, 59, 59, .34); }
.stat.alerta { border-color: rgba(208, 59, 59, .35); }
.stat.alerta .value { color: var(--rep-outra); }

.rep-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .5rem; background: var(--surface-2); }
.rep-item.outra { border-color: rgba(208, 59, 59, .28); }
.rep-item > summary {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  cursor: pointer; font-size: .78rem; list-style: none;
}
.rep-item > summary::-webkit-details-marker { display: none; }
.rep-item > summary::before {
  content: '▸'; color: var(--muted); font-size: .7rem; transition: transform .15s;
}
.rep-item[open] > summary::before { transform: rotate(90deg); }
.rep-link { color: var(--ink); font-weight: 600; word-break: break-all; }
.rep-quem { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 6rem; }
.rep-quando { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.rep-corpo { padding: 0 .7rem .7rem; }
/* Envio fora do período olhado: mostrado porque explica a repetição, mas em
   segundo plano — não foi ele que aconteceu "hoje". */
.rep-corpo tr.fora { opacity: .55; }
@media (max-width: 900px) {
  .rep-item > summary { flex-wrap: wrap; }
  .rep-quem { flex-basis: 100%; }
}

/* Aviso flutuante de link repetido (chega por Socket.IO em qualquer aba) */
.avisos {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(24rem, calc(100vw - 2rem));
}
.aviso-toast {
  background: var(--surface-2); border: 1px solid var(--line-strong); border-left-width: 3px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: .6rem .75rem; font-size: .8rem; color: var(--ink-2); cursor: pointer;
  animation: aviso-entra .18s ease-out;
}
.aviso-toast b { color: var(--ink); }
.aviso-toast.outra { border-left-color: var(--rep-outra); }
.aviso-toast.mesma { border-left-color: var(--rep-mesma); }
.aviso-toast.validado { border-left-color: var(--sv-ok); }
.aviso-link { color: var(--accent); word-break: break-all; font-size: .76rem; margin-top: .25rem; }
.aviso-sub { color: var(--muted); font-size: .74rem; margin-top: .15rem; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .aviso-toast { animation: none; }
  .rep-item > summary::before { transition: none; }
}

.membros-cab { font-size: .78rem; color: var(--ink-2); margin: .6rem 0 .4rem; }
.membros-lista { margin-bottom: .35rem; }
.membros-lista summary { font-size: .78rem; color: var(--muted); cursor: pointer; }
.membros-lista > .membro-row { padding: .18rem 0 .18rem .8rem; font-size: .74rem; }
.membro-row code { color: var(--ink-2); }

.dia-bloco { margin-bottom: 1.1rem; }
.dia-cab {
  font-size: .8rem; font-weight: 600; color: var(--ink); padding: .3rem 0 .45rem;
  border-bottom: 1px solid var(--line); margin-bottom: .3rem;
}
.pedido-txt { color: var(--ink-2); max-width: 16rem; }
.link-ped { color: var(--accent); text-decoration: none; word-break: break-all; font-size: .76rem; }
.link-ped:hover { text-decoration: underline; }

/* ── Indicações: ranking e lista das indicadas ───────────── */
#tbl-ind tbody tr { cursor: pointer; }
/* A posição é referência, não dado: fica recessiva para o nome e o total
   lerem primeiro. Tabular para os números não dançarem entre as linhas. */
#tbl-ind .pos { color: var(--muted); width: 2.2rem; font-variant-numeric: tabular-nums; }
/* Fora do .plat-row o flex:1 não vale — numa célula a barra precisa do
   display de bloco para ter altura e ocupar a largura da coluna. */
#tbl-ind .plat-barra { display: block; width: 100%; min-width: 4rem; }
.ind-item {
  display: flex; align-items: baseline; gap: .5rem; font-size: .78rem;
  padding: .3rem 0; border-bottom: 1px solid var(--line);
}
.ind-item:last-child { border-bottom: none; }
.ind-nome { font-weight: 600; color: var(--ink); }
.ind-por { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-quando { color: var(--muted); font-size: .72rem; white-space: nowrap; }

/* ── Agendamento: relógio, frequência e imagem ───────────── */
.clock { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .3rem 0 .2rem; }

.clock-digital { display: flex; align-items: baseline; gap: .1rem; font-variant-numeric: tabular-nums; }
.clk-seg {
  width: auto; padding: .1rem .45rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font: inherit; font-size: 2.1rem; font-weight: 600;
  letter-spacing: -.02em; cursor: pointer; line-height: 1.1;
}
.clk-seg:hover { color: var(--ink-2); }
/* O segmento ativo diz em qual modo o mostrador está — sem isso o clique no
   dial parece aleatório (ora muda a hora, ora o minuto). */
.clk-seg.active { color: var(--accent); background: var(--accent-soft); }
.clk-sep { font-size: 2.1rem; font-weight: 600; color: var(--muted); }

.clock-dial { width: min(240px, 100%); aspect-ratio: 1; touch-action: none; cursor: pointer; display: block; }
.clock-dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; }
.clk-face { fill: var(--surface-2); stroke: var(--line); }
.clk-hand { stroke: var(--accent); stroke-width: 2; }
.clk-center, .clk-knob { fill: var(--accent); }
.clk-num { fill: var(--ink-2); font-size: 13px; font-weight: 500; text-anchor: middle; dominant-baseline: central; user-select: none; }
.clk-num.inner { font-size: 11px; fill: var(--muted); }
.clk-num.sel { fill: #fff; font-weight: 600; }
.clk-tick { fill: var(--muted); opacity: .45; }

.seg { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.seg button {
  flex: 1; width: auto; padding: .4rem .3rem; border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: .78rem; font-weight: 500; border-radius: 6px; cursor: pointer;
}
.seg button:hover { color: var(--ink-2); }
.seg button.active { background: var(--accent); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chips button {
  width: auto; padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer;
}
.chips button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.inline-field { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .82rem; color: var(--ink-2); }
.inline-field input { width: 5rem; }
.inline-field select { width: auto; }

.resumo {
  margin-top: .9rem; padding: .55rem .7rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--ink); font-size: .82rem; line-height: 1.5;
}
.resumo code { color: var(--muted); font-size: .75rem; }
.resumo.erro { background: rgba(208, 59, 59, .12); }

.avancado { margin-top: .7rem; }
.avancado summary { font-size: .78rem; color: var(--muted); cursor: pointer; }
.avancado summary:hover { color: var(--ink-2); }

.img-prev { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; }
.img-prev img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.img-prev-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; font-size: .78rem; color: var(--ink-2); }
.img-prev-meta span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-prev-meta button { width: auto; }

.sch-nome { display: flex; align-items: center; }
.sch-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); margin-right: .4rem; flex: none; }
.sch-erro { color: var(--critical); cursor: help; margin-left: .3rem; }
.tag-todos {
  margin-left: .4rem; padding: .05rem .35rem; border-radius: 999px; flex: none;
  background: var(--accent-soft); color: var(--accent); font-size: .68rem; font-weight: 600;
}
.tbl td.acoes { white-space: nowrap; text-align: right; }
.tbl td.acoes button { padding: .2rem .45rem; }
.sch-quando code { font-size: .7rem; color: var(--muted); }
/* Coluna "Ativo" no começo da linha, estreita e centrada */
#tbl-sch .sch-ativo { width: 3.2rem; text-align: center; }
#tbl-sch td.sch-ativo input { margin: 0; }

/* ── Novo agendamento: formulário compacto ── */
.sch-form label { margin: .5rem 0 .2rem; }
.sch-form .hint { margin: .25rem 0; }
.sch-form .form-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.sch-form label.chk { margin-top: .45rem; cursor: help; }
/* relógio deitado: mostrador à esquerda, hora digital e dica à direita */
.sch-form .clock { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 1rem; align-items: center; justify-items: start; margin: .2rem 0 0; }
.sch-form .clock-dial { grid-column: 1; grid-row: 1 / 3; width: 136px !important; }
.sch-form .clock-digital { grid-column: 2; grid-row: 1; align-self: end; }
.sch-form #clk-hint { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
.sch-form textarea { min-height: 0; field-sizing: content; max-height: 10rem; } /* cresce com o texto */
.sch-form .form-actions { margin-top: .7rem; }

.backup-row {
  display: flex; justify-content: space-between; gap: .8rem; font-size: .75rem;
  color: var(--muted); padding: .3rem 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.backup-row:last-child { border-bottom: none; }

/* ── QR ─────────────────────────────────────────────────── */
.qr-card { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.qr-card img {
  width: 190px; height: 190px; border-radius: var(--radius-sm);
  background: #fff; padding: 9px; flex: none;
}
.qr-card .qr-text { flex: 1; min-width: 220px; }
.qr-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.qr-card ol { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .83rem; }
.qr-card li { margin: .25rem 0; }

/* Sem "skeleton flash": o render anterior fica visível, só esmaecido. */
.stale { opacity: .55; transition: opacity .15s; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ══════════════ Números (até 3 sessões de WhatsApp) ══════════════ */

/* Seletor de número no topo das abas Configurações e Grupos. */
/* ── Campo de busca (Brogueiras e Operadores) ───────────── */
.busca { position: relative; display: flex; align-items: center; margin: .2rem 0 .8rem; }
.busca.compacta { margin: 0; min-width: 220px; }
.busca-ico {
  position: absolute; left: .6rem; width: 15px; height: 15px; pointer-events: none;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round;
}
.busca input {
  width: 100%; padding: .5rem .7rem .5rem 2rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: inherit; font-size: .85rem;
}
.busca input::placeholder { color: var(--muted); }
.busca input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.busca input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }
.busca-conta {
  position: absolute; right: .6rem; font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums; pointer-events: none; background: var(--surface-2); padding-left: .4rem;
}

/* Linha da tabela que abre um detalhe */
.linha-nome { display: flex; flex-direction: column; gap: .1rem; }
.linha-num { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Segunda linha dentro de uma célula numérica (valor embaixo da quantidade) */
td.num .linha-num { display: block; margin-top: .05rem; }
.taxa-pill {
  display: inline-block; min-width: 3.1rem; padding: .1rem .4rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2);
}
.taxa-pill.alta { background: var(--sv-pend); border-color: var(--sv-pend-linha); color: var(--sv-ok); }
.taxa-pill.baixa { background: rgba(250, 178, 25, .12); border-color: rgba(250, 178, 25, .35); color: var(--rep-mesma); }

/* Linha de filtro (rótulo + segmentado) dentro de um card de cabeçalho */
/* Coluna de um quadro do Painel: o gráfico e o card de apoio dele, empilhados.
   align-content:start impede que os cards estiquem para igualar a coluna vizinha. */
.col-quadro { display: grid; gap: 1rem; align-content: start; }

.linha-filtro { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .1rem 0 .7rem; }
.rotulo-filtro { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.linha-filtro .hint { margin: 0; }
/* Coluna que está mandando na ordenação */
th.ordenando { color: var(--ink); }
th.ordenando::after { content: " ▾"; color: var(--accent); font-size: .7em; }

/* ── Operadores: seletor de DIA, medidor e barras do ranking ─────────────
   O seletor de dia e os botões de período são exclusivos: enquanto um dia
   está escolhido, nenhum botão fica aceso e a moldura do seletor acende. */
.dia-nav {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 2px;
}
.dia-nav button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: .2rem .4rem; border-radius: 6px;
}
.dia-nav button:hover:not(:disabled) { color: var(--ink); background: var(--surface-3); }
.dia-nav button:disabled { opacity: .35; cursor: default; }
.dia-nav input[type="date"] {
  background: none; border: 0; color: var(--ink-2);
  font: inherit; font-size: .74rem; padding: .22rem .3rem; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.dia-nav input[type="date"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dia-nav.ativo { border-color: var(--accent); background: var(--accent-soft); }
.dia-nav.ativo input[type="date"] { color: var(--ink); font-weight: 600; }

/* Medidor do KPI: a taxa desenhada, do tamanho de uma linha. */
.meter { display: block; height: 5px; margin-top: .45rem; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--sv-ok); transition: width .25s ease; }
.meter.vazio i { background: var(--line-strong); }

/* Barra dentro da célula/linha: a fatia do topo do período. Fica ABAIXO do
   número, nunca no lugar dele — a barra é o reforço, o valor é o dado. */
.barra-cel { display: block; height: 4px; margin-top: .25rem; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.barra-cel i { display: block; height: 100%; border-radius: 3px; background: var(--sv-ok); }
.rank-row .barra-cel { margin-top: .3rem; }

/* Posição no ranking: os 3 primeiros ganham disco; o resto fica só no número
   (medalha colorida traria hue nova e brigaria com as séries). */
.pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--muted);
}
.pos.topo { background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; }

/* Dia a dia do Operador: linha clicável que filtra a aba por aquele dia. */
.dias-lista { display: grid; gap: .35rem; margin: .9rem 0; }
.dia-linha {
  display: grid; grid-template-columns: 5.5rem minmax(3rem, 8rem) 1fr; align-items: center; gap: .7rem;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: .45rem .3rem; color: inherit; font: inherit;
}
.dia-linha:hover { background: var(--surface-2); }
.dia-linha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dia-data { font-size: .8rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dia-barra { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.dia-barra i { display: block; height: 100%; border-radius: 4px; background: var(--sv-ok); }
.dia-nums { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .dia-linha { grid-template-columns: 1fr; gap: .2rem; }
}

/* Cabeçalho da tabela grudado no topo enquanto a lista rola. */
#tbl-op thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

.sel-periodo { padding: .9rem 1rem; }
.sel-sessao { padding: .9rem 1rem; }
.sel-sessao label { display: block; margin-bottom: .35rem; }
.sel-sessao select { max-width: 340px; }

/* Filtro do cabeçalho: "de qual número são estes dados". */
.filtro-sessao {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--muted); margin: 0;
}
.filtro-sessao select {
  width: auto; min-width: 150px; margin: 0; padding: .32rem .5rem;
  font-size: .78rem; border-radius: 999px;
}

/* Marca os campos que valem para o servidor inteiro, não para um número. */
.tag-global {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
  border-radius: 999px; font-size: .64rem; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--line);
  text-transform: uppercase;
}

/* Cartão de cada número. */
.num-card.off { opacity: .72; }
.num-card .card-head { gap: .5rem; }
.num-card .num-nome {
  width: auto; flex: 1; min-width: 0; margin: 0; padding: .3rem .5rem;
  font-size: .9rem; font-weight: 600; background: transparent; border-color: transparent;
}
.num-card .num-nome:hover { border-color: var(--line); }
.num-card .num-nome:focus { background: var(--surface-2); border-color: var(--accent); }
.num-card .num-liga { margin: 0; white-space: nowrap; font-size: .8rem; color: var(--muted); }
.num-card .num-status { min-height: 1.1rem; margin: .1rem 0 .6rem; }

.num-qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.num-qr-img {
  width: 168px; height: 168px; border-radius: var(--radius-sm);
  background: #fff; padding: 8px; flex: none;
}
.num-qr-passos { margin: 0; padding-left: 1.05rem; color: var(--ink-2); font-size: .8rem; }
.num-qr-passos li { margin: .2rem 0; }

.num-recursos {
  border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .2rem;
  display: grid; gap: .05rem;
}
.num-recursos-cab {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: .35rem;
}
.num-recurso { margin: .28rem 0; font-size: .82rem; cursor: help; }

/* Aviso de pareamento no Painel (o QR em si mora na aba Números). */
.qr-aviso .qr-text h3 { margin: 0 0 .2rem; font-size: 1rem; }

/* Coluna "Número" da tabela de agendamentos. */
.sch-num { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }

/* ── Modo histórico: o painel mostrando um dia que já passou ──────────
   O aviso é a única coisa que explica por que os números pararam de se
   mexer; fica no topo do Painel, na cor de atenção, e some ao voltar. */
.hist-aviso {
  display: flex; align-items: center; gap: .7rem;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: 1rem;
}
.hist-aviso .hist-ico { font-size: 1.1rem; line-height: 1; }
.hist-aviso b { display: block; font-size: .9rem; }
.hist-aviso .muted { font-size: .78rem; }
.hist-aviso button { margin-left: auto; white-space: nowrap; }
/* Botão "hoje" do navegador de dias: só acende quando há um dia escolhido. */
#dia-nav #dia-hoje { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .45rem; }
#dia-nav:not(.ativo) #dia-hoje { display: none; }
/* Seletor de período de uma aba enquanto o dia global manda: apagado, mas visível. */
.seg.travado { opacity: .45; pointer-events: none; }

/* ═══════════════ Aba Relatórios ═══════════════ */
.rel-cabecalho { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rel-cabecalho h3 { margin: 0; }
.rel-cabecalho .sub { margin: .15rem 0 0; }
.rel-cabecalho .seg { margin-left: auto; }

.rel-form { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.rel-form label, .rel-form-grid label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.rel-form input, .rel-form select { min-width: 9rem; }
.rel-acoes { display: flex; gap: .5rem; margin-top: .8rem; }
.rel-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 700px) { .rel-form-grid { grid-template-columns: 1fr 1fr; } }

.rel-comissao { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.rel-comissao .card-head .seg { margin-left: auto; }
.rel-tiles { margin: .2rem 0 .6rem; }
.rel-tiles .mini.destaque { border-color: var(--warning); }

/* Linha expansível da tabela por usuário */
.rel-linha { cursor: pointer; }
.rel-linha .chevron { width: 1.4rem; color: var(--muted); }
.rel-linha.aberta { background: var(--surface-2); }
.rel-detalhe > td { padding: 0 0 .6rem; background: var(--surface-2); }
.rel-historico { max-height: 24rem; overflow: auto; }
.rel-historico .acoes { white-space: nowrap; }
.tbl td.vazio, .vazio { color: var(--muted); text-align: center; padding: 1.2rem; font-size: .82rem; }

.badge {
  display: inline-block; padding: .12rem .45rem; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--surface-3); color: var(--muted);
}
/* Selos de status: fundo tingido do status, texto no token que JÁ foi
   escurecido para os temas claros (--sv-ok/--rep-*) — hex fixo sumia no claro. */
.badge.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--sv-ok); }
.badge.aviso { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--rep-mesma); }
.badge.perigo { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--rep-outra); }
tr.desfeito { opacity: .6; }
.btn.danger { background: color-mix(in srgb, var(--critical) 16%, transparent); border-color: color-mix(in srgb, var(--critical) 50%, transparent); color: var(--rep-outra); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--critical) 26%, transparent); }
.btn-ghost.sm, .btn.sm { padding: .18rem .5rem; font-size: .72rem; }
.stat .value.pos { color: var(--sv-ok); } .stat .value.neg { color: var(--rep-outra); }
.meter i.cheio { background: var(--sv-ok); }

/* Modal simples (a aba precisa de formulário; o painel não tinha um) */
.rel-modal-fundo {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(6, 8, 12, .62); backdrop-filter: blur(3px);
}
.rel-modal { width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.rel-modal-corpo { overflow: auto; padding: .2rem 0 .6rem; }
.rel-modal-pe { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }

/* Comissão dos Operadores: a porcentagem é editável na própria linha. */
.rel-pct-padrao { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted); }
.rel-pct-padrao input { width: 4.2rem; text-align: right; }
input.rel-pct { width: 4.4rem; text-align: right; padding: .16rem .35rem; font-size: .78rem; }
#rel-tbl-operadores td.sub, .tbl td.sub { color: var(--muted); }

/* ═══════════ Utilitárias que acompanham os temas ═══════════ */
.glass {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
}
.glass-strong {
  background: var(--gradient-card);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.number-tabular, .num, .value { font-variant-numeric: tabular-nums; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50% { box-shadow: 0 0 22px 4px var(--glow); }
}
.anim-fade { animation: fadeIn .4s ease both; }
.anim-slide { animation: slideUp .5s ease both; }
.anim-glow { animation: glowPulse 3s ease-in-out infinite; }

/* Barra de rolagem no tom do tema */
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--page); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--page); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ═══════════ Seletor de temas ═══════════ */
.tema-wrap { position: relative; }
.tema-menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 70;
  min-width: 15rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  animation: fadeIn .16s ease both;
}
.tema-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .45rem .5rem; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: .8rem; text-align: left;
}
.tema-item:hover { background: var(--surface-2); color: var(--ink); }
.tema-item[aria-checked="true"] { background: var(--accent-soft); color: var(--ink); }
.tema-amostras { display: inline-flex; gap: 2px; flex: none; }
.tema-amostras i {
  width: 11px; height: 11px; border-radius: 3px; display: block;
  border: 1px solid rgba(127, 127, 127, .35);
}
.tema-item .nome { flex: 1; }
.tema-item .check { width: 13px; height: 13px; flex: none; opacity: 0; stroke: currentColor; fill: none; stroke-width: 2.2; }
.tema-item[aria-checked="true"] .check { opacity: 1; }

/* Faixa dos 7 dias da semana (comissão dos Operadores) */
.rel-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin: .1rem 0 .8rem; }
.rel-dia {
  display: flex; flex-direction: column; gap: .1rem; align-items: flex-start;
  padding: .45rem .5rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent; text-align: left;
}
.rel-dia:hover:not(:disabled) { border-color: var(--line-strong); }
.rel-dia .d { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rel-dia .v { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-dia .n { font-size: .66rem; color: var(--muted); }
.rel-dia[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.rel-dia.hoje .d { color: var(--accent); font-weight: 700; }
.rel-dia:disabled { opacity: .35; }
#rel-semana-nav span { font-size: .74rem; padding: 0 .35rem; font-variant-numeric: tabular-nums; }
.rel-op-nome { display: inline-flex; align-items: center; gap: .35rem; }
.rel-op-nome .apelido-btn { opacity: 0; }
tr:hover .rel-op-nome .apelido-btn { opacity: 1; }
.rel-isento-lista { display: grid; gap: .3rem; }
.rel-isento-linha { display: flex; align-items: center; gap: .6rem; padding: .35rem .1rem; border-bottom: 1px solid var(--line); }
.rel-isento-linha input[type="text"] { flex: 1; min-width: 6rem; }
.rel-isento-linha .orig { font-size: .7rem; color: var(--muted); min-width: 6rem; }

/* ═══════════════ A linha viva ═══════════════
   Vive na barra de cima, ocupando a largura toda: 24 traços, um por hora, com
   a altura contando quantas mensagens entraram. A hora corrente pulsa devagar.
   É o único enfeite da tela — e ganhou o direito de existir porque responde,
   sem texto, a pergunta que se faz o dia inteiro: "o bot está recebendo?". */
.topbar { flex-wrap: wrap; padding-bottom: .35rem; }
.linha-viva {
  flex: 0 0 100%; display: flex; align-items: flex-end; gap: 2px;
  height: 16px; margin-top: .45rem;
}
.linha-viva i {
  flex: 1; min-width: 1px; border-radius: 1px;
  background: var(--line-strong);
  transition: height .3s ease, background .3s ease;
}
.linha-viva i.vazia { background: var(--line); }
.linha-viva i.futura { background: var(--line); opacity: .45; }
.linha-viva i.agora { background: var(--accent); animation: pulsoHora 2.4s ease-in-out infinite; }
.linha-viva i.bateu { background: var(--good); }
@keyframes pulsoHora { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 700px) { .linha-viva { display: none; } }

/* ═══════════════ Acabamento ═══════════════ */
/* Números em mono onde o olho compara: paginação, faixa de dias, selos. */
.pager, .rel-dia .v, .badge, .tag-cas { font-variant-numeric: tabular-nums; }

/* Entrada da aba: UM fade curto na seção inteira.
   A primeira versão animava card a card, em cascata — bonito na primeira vez e
   cansativo na cinquentésima, que é quantas vezes por dia esta tela troca de
   aba. O movimento que sobrou é o da linha viva, que significa alguma coisa. */
.content:not(.hidden) { animation: fadeIn .22s ease both; }

/* Estado vazio com voz: diz o que fazer, não só que está vazio. */
.vazio { line-height: 1.6; }

/* Campos: mesma altura dos botões, foco no acento do tema. */
input, select, textarea {
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Barra lateral e barra de cima ficam no mesmo tom do papel do tema. */
.sidebar, .topbar { background: color-mix(in srgb, var(--surface) 92%, var(--page)); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sidebar, .topbar { background: var(--surface); }
}

/* ── "Ver mais" da comissão: o dia inteiro do Operador ──────────────────
   O verde é o MESMO --sv-ok do resto do painel (validado = fechou os 3
   passos). A linha ganha faixa à esquerda e um fundo de leve: em tabela
   comprida, só a cor do texto não se acha. */
.rel-servicos { padding: .7rem .9rem .2rem; }
.rel-servicos .mini-list { grid-template-columns: repeat(4, 1fr); margin-bottom: .5rem; }
.rel-servicos .hint { margin: .1rem 0 .6rem; }
.sv-ok { color: var(--sv-ok); }
.rel-servicos tr.sv-linha-ok > td { background: var(--sv-pend); }
.rel-servicos tr.sv-linha-ok > td:first-child { box-shadow: inset 3px 0 0 var(--sv-ok); }
.selo-sv {
  display: inline-block; font-size: .72rem; padding: .1rem .4rem; border-radius: 5px;
  color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.selo-sv.ok { color: var(--sv-ok); border-color: var(--sv-pend-linha); background: var(--sv-pend); font-weight: 600; }

/* ═══════════════ Refinamentos de layout ═══════════════ */

/* Sparkline do KPI: o <svg> tem viewBox 120×30 e preserveAspectRatio="none";
   sem altura explícita ele cresce pela proporção (card largo → spark de 60px+)
   e vaza pela borda de baixo do card. Ele ocupa exatamente a caixa do .spark. */
.stat .spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* KPI: um sinal de interação discreto — a borda acende, nada pula. */
.card.stat { transition: border-color .15s ease; }
.card.stat:hover { border-color: var(--line-strong); }
.stat .sub { font-size: .76rem; color: var(--muted); margin-top: .2rem; }

/* Ranking: o detalhe vai na linha de baixo. Inline, ele quebrava no meio
   ("R$ 0 em / contas") e empurrava o nome para o canto. */
.rank-name, .rank-sub { display: block; }
.rank-sub { margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-val { font-family: var(--font-dados); white-space: nowrap; }
.rank-n { font-family: var(--font-dados); }

/* Segmentado no cabeçalho de card: do tamanho do rótulo, nunca esticado
   ("Todos os atendidos" quebrava em duas linhas dentro do botão). */
.card-head .seg button, .linha-filtro .seg button { flex: none; white-space: nowrap; padding: .3rem .7rem; }

/* Barra lateral: o nome da marca não pode empurrar o menu. */
.brand > div { min-width: 0; }
.brand b, .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Celular: a barra de cima deixa de ser fixa (fixa, com 3 linhas de filtro,
   comia um terço da tela) e o menu vira uma faixa de ícones que rola sozinha. */
@media (max-width: 900px) {
  .sidebar {
    position: sticky; top: 0; z-index: 30; padding: .5rem .75rem; gap: .6rem;
    border-right: none; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand > div { display: none; }
  .brand { padding: 0; flex: none; }
  .nav { gap: 4px; }
  .nav-item { flex: none; width: 40px; height: 40px; justify-content: center; }
  .nav-item.active::before { left: 20%; right: 20%; top: auto; bottom: 0; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .topbar { position: static; padding: .75rem 1rem .5rem; gap: .5rem .6rem; }
  .topbar h1 { flex: 1 0 100%; font-size: 1.05rem; }
  .topbar .spacer { display: none; }
  .filtro-sessao > span { display: none; }
  .filtro-sessao select { min-width: 0; max-width: 11rem; }
  .card-head .seg { margin-left: 0; }
  .stat .value { font-size: 1.4rem; }
}
/* O valor do KPI não quebra ("R$ 12,6 / mil" em duas linhas lia como dois números). */
.stat .value { white-space: nowrap; }

/* ═══════════════ Painel em uma tela ═══════════════
   Três faixas: KPIs (altura do conteúdo), gráficos e listas (dividem o resto).
   Os gráficos se desenham no tamanho da caixa (caixa() no app.js), então a
   caixa precisa ter altura própria — o SVG fica por cima, absoluto, e nunca
   empurra o card. Fora do modo denso (tela estreita ou baixa) cada gráfico
   tem altura fixa e a página rola como antes. */
.painel-linha { display: grid; gap: var(--e3); min-width: 0; }
.painel-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.painel-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.painel-pilha { display: grid; gap: var(--e3); align-content: start; min-width: 0; }
.quadro { min-width: 0; }
.chart { position: relative; }
.chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#chart-onda, #chart-servicos { height: 220px; }
#chart-dias { height: 210px; }
#chart-heat { height: 78px; }
.rola { max-height: 360px; overflow: auto; }
.funil-cab { margin: .9rem 0 .5rem; }
.card.acum .label {
  font-size: .68rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
}
.card.acum .mini-list { margin-top: .45rem; gap: .35rem .8rem; }
.card.acum .mini .l { font-size: .6rem; }
.card.acum .mini .v { font-size: .85rem; }
.grid.kpis.painel-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 900px) {
  .painel-graficos, .painel-listas { grid-template-columns: 1fr; }
}

@media (min-width: 1280px) and (min-height: 680px) {
  /* Com o Painel aberto a coluna principal tem a altura da janela e a página
     não rola; as outras abas seguem rolando normalmente. */
  .main:has(> #tab-painel:not(.hidden)) { height: calc(100vh - var(--rodape-h)); overflow: hidden; }
  #tab-painel.painel-denso {
    display: flex; flex-direction: column; gap: var(--e3);
    flex: 1; min-height: 0; padding: var(--e3) var(--e4) var(--e4);
  }
  .painel-denso > * { flex: none; }
  .painel-denso .card { padding: .7rem .85rem .75rem; border-radius: 12px; }
  .painel-denso .card-head { margin: 0 -.85rem .55rem; padding: 0 .85rem .5rem; gap: .45rem; flex-wrap: nowrap; }
  .painel-denso .card-head h3 { font-size: .8rem; white-space: nowrap; }
  .painel-denso .card-head .sub { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .painel-denso .card-head svg.hico { width: 22px; height: 22px; padding: 4px; }
  .painel-denso .qr-aviso { padding: .5rem .85rem; }
  .painel-denso .qr-aviso .qr-text { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
  .painel-denso .qr-aviso h3 { margin: 0; font-size: .85rem; }
  .painel-denso .qr-aviso p { margin: 0 !important; }
  .painel-denso .qr-aviso .btn { margin-left: auto; padding: .3rem .8rem; font-size: .76rem; }
  .painel-denso .hist-aviso { margin: 0; padding: .45rem .8rem; }

  /* Faixa 1 — KPIs: seis KPIs + Acumulado numa linha só. */
  .painel-denso .grid.kpis.painel-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.25fr); gap: var(--e3); }
  .painel-denso .stat .label { font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .painel-denso .stat .value { font-size: 1.3rem; margin-top: 0; line-height: 1.25; }
  .painel-denso .stat .foot { margin-top: .2rem; min-height: 22px; }
  .painel-denso .stat .spark { height: 22px; }
  .painel-denso .delta { font-size: .68rem; white-space: nowrap; }
  .painel-denso .card.acum .mini-list { margin-top: .3rem; }

  /* Faixas 2 e 3 dividem o que sobra da altura. */
  .painel-denso .painel-linha { flex: 1 1 0; min-height: 0; gap: var(--e3); }
  .painel-denso .painel-listas { flex-grow: 1.15; }
  .painel-denso .painel-graficos { grid-template-columns: 1.15fr 1.25fr 1fr 1fr; }
  .painel-denso .painel-listas { grid-template-columns: 1.45fr 1.1fr .95fr .95fr; }
  .painel-denso .painel-linha > .quadro,
  .painel-denso .painel-pilha > .quadro { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .painel-denso .painel-pilha { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; min-height: 0; }
  .painel-denso .quadro-curto { max-height: 9.5rem; }
  .painel-denso .legend { margin-bottom: .35rem; gap: .6rem; }
  .painel-denso .legend span { font-size: .68rem; }
  .painel-denso .chart { flex: 1 1 0; min-height: 0; height: auto; }
  .painel-denso .scale-legend { margin-top: .35rem; font-size: .66rem; }
  .painel-denso .rola { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }

  /* Listas mais baixas: é o que faz caber sem cortar o assunto. */
  .painel-denso .tbl { font-size: .74rem; }
  .painel-denso .tbl th { font-size: .6rem; padding: .3rem .45rem; }
  .painel-denso .tbl td { padding: .32rem .45rem; }
  .painel-denso .tbl .num { font-size: .72rem; }
  .painel-denso .tag-passo { font-size: .66rem; }
  .painel-denso .pager { margin-top: .35rem; }
  .painel-denso .rank-row { padding: .35rem .1rem; gap: .55rem; }
  .painel-denso .rank-name, .painel-denso .rank-val { font-size: .78rem; }
  .painel-denso .rank-sub { font-size: .66rem; }
  .painel-denso .funil { gap: .35rem; }
  .painel-denso .funil-passo { gap: .45rem; grid-template-columns: 1.3rem 1fr auto; }
  .painel-denso .funil-passo .n { width: 1.3rem; height: 1.3rem; font-size: .62rem; }
  .painel-denso .funil-passo .l { font-size: .72rem; }
  .painel-denso .funil-passo .v { font-size: .82rem; }
  .painel-denso .funil-cab { margin: .6rem 0 .35rem; font-size: .72rem; }
  .painel-denso .mini .l { font-size: .58rem; }
  .painel-denso .mini .v { font-size: .82rem; }
  .painel-denso .bar-list { gap: .45rem; }
  .painel-denso .bar-row .n, .painel-denso .bar-row .v { font-size: .74rem; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  /* Linha de tabela numa linha só: quebrar "DB Contas e Montantes" em três
     linhas era o que mais gastava altura. O texto longo corta com reticências. */
  .painel-denso .tbl td { white-space: nowrap; }
  .painel-denso #tbl-msg td:nth-child(2), .painel-denso #tbl-servicos td:first-child b {
    display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  }
  /* Acumulado: 2×2 miúdo, para não ficar mais alto que os KPIs ao lado. */
  .painel-denso .card.acum .mini-list { gap: .15rem .7rem; margin-top: .2rem; }
  .painel-denso .card.acum .mini { min-width: 0; }
  .painel-denso .card.acum .mini .l { font-size: .54rem; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .painel-denso .card.acum .mini .v { font-size: .78rem; line-height: 1.25; white-space: nowrap; }
}

/* ═══════════════ Acabamento (Kowalski · Impeccable · Taste) ═══════════════
   Três regras guiam este bloco:
   1. A cor de destaque é de AÇÃO, SELEÇÃO e ESTADO. Onze quadrados coloridos
      nos cabeçalhos diluíam o acento — no Carbono eram onze manchas vermelhas
      competindo com o item ativo do menu e com o botão principal.
   2. Movimento só onde informa. O que se repete dezenas de vezes por dia
      (trocar de aba) não anima; o que responde ao toque é curto e forte.
   3. Sem enfeite que não diz nada: nada de brilho neon, nada de preto puro. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* 1 · Ícone de cabeçalho neutro: marca o quadro, não chama o olho. */
.card-head svg.hico {
  width: 16px; height: 16px; padding: 0; border-radius: 0;
  background: none; stroke: var(--muted); stroke-width: 1.8;
}
.card.danger .card-head svg.hico { stroke: var(--critical); }
@media (min-width: 1280px) and (min-height: 680px) {
  .painel-denso .card-head svg.hico { width: 15px; height: 15px; padding: 0; }
}

/* 2 · Resposta ao toque: o botão afunda (scale .97) em 160ms com ease-out forte,
   e só as propriedades que mudam entram na transição. */
.btn, .btn-ghost, .btn-icon, .btn-danger, .seg button, .chips button, .pager button, .nav-item, .tema-item {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease;
}
.btn:active, .btn-ghost:active, .btn-icon:active, .btn-danger:active,
.seg button:active, .chips button:active, .pager button:active:not(:disabled) { transform: scale(.97); }
.btn:disabled:active, .btn-ghost:disabled:active { transform: none; }

/* Hover só onde existe mouse: no toque ele "gruda" depois do tap. */
@media not all and (hover: hover) {
  .btn:hover { filter: none; }
  .nav-item:hover { background: none; color: var(--ink-2); }
  .nav-item.active:hover { background: var(--surface-2); color: var(--ink); }
  .tbl tbody tr:hover, .dia-linha:hover { background: none; }
  .card.stat:hover { border-color: var(--line); }
}

/* Trocar de aba acontece o dia inteiro: sem fade, a aba aparece na hora. */
.content:not(.hidden) { animation: none; }

/* Menu de temas nasce do botão (canto superior direito), não do nada. */
.tema-menu { transform-origin: top right; animation: menuEntra 180ms var(--ease-out) both; }
@keyframes menuEntra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Aviso flutuante e tooltip: entrada curta, curva forte. */
.aviso-toast { animation: aviso-entra 220ms var(--ease-out); }
#tip { transition: opacity 120ms var(--ease-out); }

/* Barras que crescem quando o dado muda: a mudança é a notícia. */
.meter i, .barra-cel i, .funil-barra i, .bar-fill, .plat-barra i, .dia-barra i {
  transition: width 300ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .tema-menu { animation: none; }
  .btn:active, .btn-ghost:active, .btn-icon:active, .btn-danger:active,
  .seg button:active, .chips button:active, .pager button:active { transform: none; }
}

/* 3 · Superfícies do navegador no tom do tema. */
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--ink); }
input, textarea { caret-color: var(--accent); }

/* ═══════════════ Todas as abas em uma tela ═══════════════
   Mesmo contrato do Painel, para o resto do site: no desktop a coluna
   principal tem a altura da janela e a PÁGINA não rola. Cada aba tem uma
   faixa que "enche" (.tela-enche) e divide o que sobra; dentro dela, lista e
   tabela longas rolam no próprio quadro, com o cabeçalho da tabela fixo.
   Detalhe de linha (Brogueira, Operador, Indicadora) abre numa gaveta à
   direita em vez de empurrar a página para baixo. Tela estreita ou baixa:
   tudo volta ao fluxo normal, com rolagem. */
@media (min-width: 1280px) and (min-height: 680px) {
  .main { height: calc(100vh - var(--rodape-h)); overflow: hidden; }
  .content {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    gap: var(--e3); padding: var(--e3) var(--e4) var(--e4); overflow: auto;
  }
  .content > * { flex: none; margin-top: 0; margin-bottom: 0; }
  .content > .tela-enche { flex: 1 1 0; min-height: 0; }

  /* Quadros compactos: o mesmo corpo de letra do Painel. */
  .content .card { padding: .75rem .9rem .8rem; border-radius: 12px; }
  .content .card-head { margin: 0 -.9rem .6rem; padding: 0 .9rem .55rem; gap: .5rem; }
  .content .card-head h3 { font-size: .82rem; }
  .content .card-head .sub { font-size: .7rem; }
  .content .hint { font-size: .74rem; margin: .2rem 0 .5rem; }
  .content .grid, .content .grid.kpis { gap: var(--e3); }
  .content .stat .label { font-size: .62rem; }
  .content .stat .value { font-size: 1.3rem; margin-top: 0; line-height: 1.25; }
  .content .stat .sub { font-size: .7rem; margin-top: .1rem; }
  .content .tbl { font-size: .76rem; }
  .content .tbl th { font-size: .6rem; padding: .35rem .5rem; }
  .content .tbl td { padding: .38rem .5rem; }
  .content .tbl .num { font-size: .73rem; }
  .content label { margin: .5rem 0 .2rem; font-size: .76rem; }
  .content input, .content select, .content textarea { padding: .45rem .6rem; font-size: .8rem; }

  /* Quadro dentro de uma faixa que enche: coluna flexível. Tabela rola por
     dentro (e o card não); formulário e lista rolam o card inteiro. */
  .tela-enche > .card, .tela-col > .card, .tela-lado > .card, .rel-consultas > .card, .tela-enche > .grid > .card {
    display: flex; flex-direction: column; min-height: 0; overflow: auto;
  }
  :is(.tela-enche, .tela-col, .tela-lado, .rel-consultas) .card > * { flex-shrink: 0; }
  :is(.tela-enche, .tela-col, .rel-consultas) .card:has(> .tbl-wrap) { overflow: hidden; }
  :is(.tela-enche, .tela-col, .rel-consultas) .card > .tbl-wrap { flex: 1 1 0; flex-shrink: 1; min-height: 0; overflow: auto; }
  .grid.tela-enche { grid-template-rows: minmax(0, 1fr); align-items: stretch; }

  /* Coluna lateral: quadros curtos ficam do tamanho deles; os longos
     encolhem até caber e rolam por dentro. */
  .tela-lado { display: flex; flex-direction: column; gap: var(--e3); min-height: 0; }
  .tela-lado > .card { flex: 0 1 auto; }

  /* ── Brogueiras e Operadores: tabela larga + coluna lateral ── */
  .grid.split-23.tela-enche { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
  .busca { margin: 0 0 .5rem; }

  /* ── Operadores: o cabeçalho de período em uma faixa só ── */
  .sel-periodo { padding: .6rem .9rem; }
  .sel-periodo .card-head { margin-bottom: .4rem; }
  .sel-periodo .hint { margin: .3rem 0 0; }

  /* ── Agendamentos: lista à esquerda, formulário rolando à direita ── */
  #tab-agendar .grid.split-23.tela-enche { grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr); }
  #tab-agendar .clock-dial { width: min(190px, 100%); }
  #tab-agendar .clk-seg, #tab-agendar .clk-sep { font-size: 1.7rem; }
  /* Formulário compacto: do tamanho do conteúdo (não estica até o fim da tela) */
  #tab-agendar .grid.split-23.tela-enche > .sch-form { align-self: start; max-height: 100%; }

  /* ── Grupos: as duas listas enchem a altura ── */
  #tab-grupos .check-list { flex: 1 1 0; flex-shrink: 1; min-height: 0; max-height: none; }

  /* ── Números: os três lado a lado, funções em duas colunas ── */
  .grid.c2.num-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .num-grade .num-qr-img { width: 150px; height: 150px; }
  .num-grade .num-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; }
  .num-grade .num-recursos-cab { grid-column: 1 / -1; }
  .num-grade .num-recurso { font-size: .78rem; margin: .18rem 0; }

  /* ── Seletor de número (Configurações e Grupos) numa linha ── */
  .sel-sessao { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; padding: .6rem .9rem; }
  .sel-sessao label { margin: 0; }
  .sel-sessao select { width: auto; min-width: 220px; }
  .sel-sessao .hint { flex: 1; margin: 0; min-width: 16rem; }
  .sel-sessao .cfg-salvar { margin: 0 0 0 auto; }

  /* ── Configurações: os nove quadros numa grade que enche a tela ── */
  .grid.c2.cfg-grade { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-template-rows: none; }
  .cfg-grade > .card { overflow: auto; }
  .cfg-grade textarea { min-height: 56px; }

  /* ── Relatórios: topo (cabeçalho, metas, filtros), totais, corpo em 2 colunas ── */
  .rel-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; }
  .rel-topo > .card { padding: .6rem .9rem; }
  .rel-topo .card-head { margin-bottom: .45rem; padding-bottom: .4rem; }
  .rel-topo .rel-form { gap: .5rem; }
  .rel-topo .rel-form label { margin: 0; }
  .rel-topo .rel-form input, .rel-topo .rel-form select { min-width: 7rem; }
  .rel-cabecalho { align-items: center; }
  .rel-cabecalho .sub { font-size: .72rem; color: var(--muted); }
  .rel-corpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e3); }
  .tela-col { display: flex; flex-direction: column; gap: var(--e3); min-height: 0; }
  .tela-col > .card { flex: 1 1 0; }
  .rel-consultas { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .45rem; }
  .rel-consultas > .seg { align-self: flex-start; flex: none; }
  .rel-consultas > .card { flex: 1 1 0; }
  .rel-comissao .card-head { flex-wrap: wrap; }
  .rel-dias { margin: 0 0 .5rem; }
  .rel-tiles { margin: 0 0 .4rem; }

  /* ── Gaveta de detalhe ── */
  .gaveta:not(.hidden) {
    position: fixed; top: var(--e3); right: var(--e3); bottom: var(--e3); z-index: 80;
    width: min(640px, 46vw); margin: 0; overflow: auto;
    background: var(--surface); border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.7);
    animation: gavetaEntra 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .gaveta .card-head { position: sticky; top: -.75rem; z-index: 2; background: var(--surface); padding-top: .75rem; margin-top: -.75rem; }
}
@keyframes gavetaEntra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gaveta:not(.hidden) { animation: none; } }
@media (min-width: 1280px) and (min-height: 680px) {
  /* Coluna lateral: altura dividida por igual (senão a lista mais longa
     engole as outras); quadro curto (seletor de grupo) fica no tamanho dele. */
  .tela-lado > .card { flex: 1 1 0; min-height: 7rem; }
  .tela-lado > .card.curto { flex: none; min-height: 0; }
  #tab-brogueiras .grid.split-23.tela-enche { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .rel-consultas .seg button { flex: none; white-space: nowrap; padding: .28rem .7rem; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  /* Tabela principal da aba: uma linha por registro. Quebrar "Todo dia às /
     11:00" e o telefone dobrava a altura de cada linha; se a tabela não couber
     na largura, ela rola para o lado dentro do quadro. */
  .grid.split-23.tela-enche .tbl td { white-space: nowrap; }
  .grid.split-23.tela-enche .tbl td .tag-passo, .grid.split-23.tela-enche .tbl td .linha-num { white-space: nowrap; }
}

/* ═══════════════ Meta da semana (Painel) ═══════════════
   Quadro de destaque: rótulo na cor da marca, título em palavras, valor grande
   em mono e uma mancha em gradiente no canto superior direito. A mancha segue
   o acento do tema (vermelho no Carbono, azul no Escuro e no Claro). */
.meta-semana {
  --meta-cor-1: color-mix(in srgb, var(--accent) 70%, #fff);
  --meta-cor-2: var(--accent);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.meta-mancha {
  position: absolute; top: 0; right: 0; width: 40%; max-width: 170px; height: auto;
  z-index: -1; pointer-events: none;
}
.meta-mancha-fundo { fill: var(--accent); opacity: .22; }
.meta-rotulo {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.meta-titulo { margin: .7rem 0 .35rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.meta-valor {
  font-family: var(--font-dados); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; color: var(--ink); white-space: nowrap;
}
.meta-sub { margin: .7rem 0 0; font-size: .74rem; color: var(--muted); max-width: 30ch; }
.meta-barra { margin-top: auto; }
.meta-semana .meta-barra { height: 6px; }
.meta-semana .meta-barra i { background: var(--accent); }
.meta-semana.batida .meta-barra i { background: var(--sv-ok); }
.meta-semana.batida .meta-titulo { color: var(--sv-ok); }
.meta-semana.sem-meta .meta-barra { display: none; }
.meta-semana > :not(.meta-mancha) { position: relative; }
#tab-painel .meta-semana { min-height: 180px; }
@media (min-width: 1280px) and (min-height: 680px) {
  .painel-denso .meta-semana { padding: .9rem 1rem 1rem; }
  .painel-denso .meta-semana .meta-barra { margin-top: auto; }
}


/* ═══════════════ KPI do Painel: série sangrando na base ═══════════════
   Rótulo e ícone numa linha, valor em sans pesado, variação logo abaixo e a
   série de 7 dias ocupando a base inteira do card, de borda a borda, com a
   área sumindo em gradiente. O ícone diz o tipo: azul = bruto (o que entrou),
   verde = validado (o que fechou os 3 passos), laranja = contas. */
.card.stat.kpi {
  position: relative; overflow: hidden; isolation: isolate;
  padding-bottom: 2.9rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--s1) 7%, var(--surface)) 0%, var(--surface) 70%);
}
.kpi-topo { display: flex; align-items: flex-start; gap: .5rem; }
.kpi-topo .label { flex: 1; min-width: 0; }
.kpi-ico { width: 15px; height: 15px; flex: none; fill: none; stroke-width: 1.8; stroke: var(--s1); margin-top: 1px; }
.kpi-ico.validado { stroke: var(--sv-ok); }
.kpi-ico.contas { stroke: var(--s2); }
.card.stat.kpi .value {
  font-family: var(--font); font-weight: 600; letter-spacing: -.035em; font-size: 1.5rem;
  margin-top: .15rem; font-variant-numeric: tabular-nums;
}
.card.stat.kpi .delta { margin-top: .05rem; min-height: 1em; }
.card.stat.kpi .kpi-spark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.6rem; z-index: -1;
  pointer-events: none;
}
.card.stat.kpi .kpi-spark svg { display: block; width: 100%; height: 100%; }
.card.stat.kpi:hover { border-color: var(--line-strong); }

/* O "Acumulado geral" veste o mesmo fundo para a fileira ler como uma peça. */
.painel-kpis .card.acum {
  background: linear-gradient(180deg, color-mix(in srgb, var(--s1) 7%, var(--surface)) 0%, var(--surface) 70%);
}

@media (min-width: 1280px) and (min-height: 680px) {
  .painel-denso .card.stat.kpi { padding-bottom: 2.5rem; }
  .painel-denso .card.stat.kpi .value { font-size: 1.35rem; }
  .painel-denso .card.stat.kpi .kpi-spark { height: 2.2rem; }
}

/* ── Fileira "desde sempre" (acima dos KPIs) ──
   Mesmo cartão dos KPIs, sem a série no rodapé: são totais acumulados. */
.grid.painel-historico { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e3); }
.card.stat.kpi.sem-serie { padding-bottom: .8rem; }
.card.stat.kpi.sem-serie .sub { font-size: .7rem; color: var(--muted); margin-top: .1rem; }
#h-salario { color: var(--sv-ok); }
@media (max-width: 1200px) { .grid.painel-historico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid.painel-historico { grid-template-columns: 1fr; } }
@media (min-width: 1280px) and (min-height: 680px) {
  .painel-denso .card.stat.kpi.sem-serie { padding: .6rem .9rem .65rem; }
  .painel-denso .card.stat.kpi.sem-serie .value { font-size: 1.25rem; }
  /* Seis KPIs (montantes, contas, médias) + Acumulado na fileira de baixo. */
  .painel-denso .grid.kpis.painel-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.25fr); }
}

/* ── Categoria do quadro ──
   Faixa colorida no topo, fundo tingido, ícone e rodapé na cor da categoria.
   O card VALIDADO (.kpi-val) da mesma categoria tem o tom mais forte e o valor
   na própria cor — lado a lado, "lançado" e "validado" leem como um par. */
.card.stat.kpi.cat-montante { --cat: var(--cat-montante); }
.card.stat.kpi.cat-contas { --cat: var(--cat-contas); }
.card.stat.kpi.cat-media { --cat: var(--cat-media); }
.card.stat.kpi[class*="cat-"] {
  border-top: 3px solid var(--cat);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 10%, var(--surface)) 0%, var(--surface) 75%);
}
.card.stat.kpi.kpi-val[class*="cat-"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 20%, var(--surface)) 0%, var(--surface) 80%);
  border-color: color-mix(in srgb, var(--cat) 35%, var(--line));
  border-top-color: var(--cat);
}
.card.stat.kpi[class*="cat-"] .label { color: color-mix(in srgb, var(--cat) 55%, var(--ink-2)); }
.card.stat.kpi[class*="cat-"] .kpi-ico { stroke: var(--cat); }
.card.stat.kpi[class*="cat-"] .delta.ok { color: var(--cat); }
.card.stat.kpi.kpi-val[class*="cat-"] .value { color: var(--cat); }


/* ═══════════════ Comissão da semana (medidor em arco) ═══════════════ */
.pilha-graficos { display: grid; gap: var(--e3); min-width: 0; align-content: start; }
.comissao-semana { display: flex; flex-direction: column; }
.gauge { position: relative; height: 150px; }
#cs-gauge { position: absolute; inset: 0; width: 100%; height: 100%; }
#cs-gauge .gomo { fill: var(--surface-3); transition: fill 300ms var(--ease-out, ease); }
.gauge-centro {
  position: absolute; left: 0; right: 0; bottom: 2px;
  display: flex; flex-direction: column; align-items: center; gap: .05rem; text-align: center;
}
#cs-valor { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
#cs-pct { font-size: .74rem; color: var(--muted); }
/* com a legenda "Comissão" o bloco ganhou uma linha: desce um pouco para o valor seguir dentro do arco */
.meta-comissao .gauge-centro { bottom: -4px; }
.meta-comissao #cs-pct { line-height: 1.2; }
.meta-comissao .gauge-centro #cs-valor { font-size: 1.02rem; }
.cs-legenda { font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); line-height: 1.2; }
.cs-rodape { margin: .45rem 0 0; font-size: .68rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-comissao.sem-dado #cs-valor { color: var(--muted); }

@media (min-width: 1280px) and (min-height: 680px) {
  /* Na linha dos gráficos a coluna 3 vira pilha: medidor em cima (um pouco
     maior), Atividade por hora embaixo. */
  .painel-denso .pilha-graficos { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); align-content: stretch; min-height: 0; }
  .painel-denso .pilha-graficos > .quadro { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .painel-denso .gauge { flex: 1 1 0; min-height: 0; height: auto; }
  .painel-denso #cs-valor { font-size: 1.15rem; }
  .painel-denso #cs-pct { font-size: .66rem; }
  .painel-denso .cs-rodape { margin-top: .3rem; font-size: .62rem; }
}
@media (min-width: 1280px) and (min-height: 680px) {
  /* Com o medidor empilhado sobre a Atividade, a linha dos gráficos precisa de
     mais altura; as listas de baixo rolam por dentro e podem ceder espaço. */
  .painel-denso .painel-graficos { flex-grow: .9; }
  .painel-denso .painel-listas { flex-grow: .85; }
  .painel-denso .comissao-semana .card-head { margin-bottom: .3rem; padding-bottom: .35rem; }
  .painel-denso .comissao-semana { padding-bottom: .55rem; }
  .painel-denso .pilha-graficos .scale-legend { margin-top: .2rem; }
}
/* Janela baixa: o rodapé do medidor sai antes do arco encolher demais. */
@media (min-width: 1280px) and (min-height: 680px) and (max-height: 860px) {
  .painel-denso .cs-rodape { display: none; }
  .painel-denso .meta-comissao .gauge { margin-bottom: .4rem; } /* sem rodapé, o arco também fica embaixo */
}
@media (min-width: 1280px) and (min-height: 680px) and (max-height: 940px) {
  /* Janela até ~940px de altura: medidor e Atividade dividem a coluna meio a
     meio, e a legenda Menos/Mais sai (a cor de cada hora segue no tooltip). */
  .painel-denso .pilha-graficos { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .painel-denso .pilha-graficos .scale-legend { display: none; }
}


/* ═══ Medidor de comissão dentro da Meta da semana ═══
   A Meta fica em cima (rótulo, título, valor, barra) e o medidor ocupa o que
   sobra do quadro, separado por um fio. */
.meta-comissao {
  display: flex; flex-direction: column; margin-top: .7rem; padding-top: .55rem;
  border-top: 1px solid var(--line); min-height: 0;
}
.meta-comissao-rotulo {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.meta-comissao-rotulo #cs-rotulo { font-weight: 500; letter-spacing: .04em; text-transform: none; margin-left: .25rem; }
.meta-comissao .gauge { height: 110px; margin-top: .3rem; }
.meta-comissao #cs-valor { font-size: 1.15rem; }
.meta-comissao #cs-pct { font-size: .68rem; }
.meta-semana .meta-barra { margin-top: .6rem; }
.meta-semana .meta-sub { margin-top: .35rem; }
.meta-semana .meta-titulo { margin: .45rem 0 .2rem; }
@media (min-width: 1280px) and (min-height: 680px) {
  .painel-denso .meta-semana { overflow: hidden; }
  .painel-denso .meta-comissao { flex: 1 1 0; }
  /* cresce com o quadro, mas só até um teto: sem ele o arco toma o quadro inteiro */
  .painel-denso .meta-comissao .gauge { flex: 1 1 0; min-height: 0; height: auto; max-height: 125px; margin-top: auto; }
  /* com o teto, sobra espaço no quadro: margin-top:auto encosta arco + rodapé embaixo, perto da barra */
  .painel-denso .meta-comissao .cs-rodape { margin-bottom: .4rem; }
  .painel-denso .meta-semana .meta-valor { font-size: 1.35rem; }
  .painel-denso .meta-semana .meta-titulo { font-size: .92rem; }
  .painel-denso .meta-semana .meta-sub { font-size: .66rem; max-width: none; }
}

/* Linha da meta (quanto falta + barra) no rodapé do quadro, abaixo do medidor. */
.meta-linha { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--line); flex: none; }
.meta-linha .meta-sub { margin: 0 0 .35rem; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-linha .meta-barra { margin-top: 0; }
.meta-semana.sem-meta .meta-linha .meta-sub { white-space: normal; }

/* ═══ Tabelas das abas: uma linha por registro, mais linhas na tela ═══
   Nome e telefone lado a lado (o telefone recua em cinza) em vez de empilhados:
   a linha cai de ~51px para ~30px e a tabela de Brogueiras mostra quase o
   dobro de gente sem rolar. */
@media (min-width: 1280px) and (min-height: 680px) {
  .grid.split-23.tela-enche .tbl td { padding-top: .3rem; padding-bottom: .3rem; vertical-align: middle; }
  .grid.split-23.tela-enche .linha-nome { flex-direction: row; align-items: baseline; gap: .55rem; }
  .grid.split-23.tela-enche .linha-nome .linha-num { font-size: .68rem; }
  .grid.split-23.tela-enche td.num .linha-num { display: inline; margin: 0 0 0 .4rem; }
  .grid.split-23.tela-enche .tag-rep { padding: 0 .4rem; font-size: .66rem; line-height: 1.5; }
  /* A barra de rolagem não passa por cima da última coluna. */
  .grid.split-23.tela-enche .tbl-wrap { scrollbar-gutter: stable; }
}
/* O campo de busca tem a lupa dentro: o recuo à esquerda é dele, não pode
   ser zerado pelo estilo compacto dos campos. */
.content .busca input { padding-left: 2rem; }

/* Barra de rolagem DENTRO de um quadro: trilho invisível (antes ele tinha a
   cor do fundo da página e aparecia como uma faixa escura cortando a borda
   direita do card) e o polegar fino, com respiro da cor do próprio quadro. */
.card ::-webkit-scrollbar-track, .card::-webkit-scrollbar-track { background: transparent; }
.card ::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb { border-color: var(--surface); }
.card ::-webkit-scrollbar-corner { background: transparent; }
/* Última coluna da tabela com folga até a barra de rolagem. */
.tbl th:last-child, .tbl td:last-child { padding-right: .9rem; }

/* ── Brogueiras: tabela estreita ──
   Os números cabem em colunas curtas; esticar a tabela até a borda só abria
   um vão entre eles. A tabela fica com ~metade da largura e a coluna da
   direita (Plataformas, Links repetidos, Membros) ganha o espaço. */
@media (min-width: 1280px) and (min-height: 680px) {
  #tab-brogueiras .grid.split-23.tela-enche { grid-template-columns: minmax(620px, 1fr) minmax(0, 1.05fr); }
}
#tbl-bg th:not(:first-child), #tbl-bg td:not(:first-child) { width: 1%; white-space: nowrap; padding-left: 1.1rem; }
#tbl-bg td:first-child { width: auto; }
/* O nome (com o telefone ao lado) cede primeiro quando falta largura: corta
   com reticências em vez de empurrar as colunas de número para fora. */
#tbl-bg td:first-child { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
#tbl-bg td:first-child .linha-nome { overflow: hidden; }
#tbl-bg td:first-child .linha-nome > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tbl-bg td:first-child .linha-nome > .linha-num { flex-shrink: 1; min-width: 0; }
#tbl-bg th:not(:first-child), #tbl-bg td:not(:first-child) { padding-left: .9rem; }

/* ═══ Acumulado geral: grade 2×2 com fios ═══
   Mesmo cabeçalho dos KPIs (rótulo + ícone). Os quatro números ficam em
   células separadas por um fio fino em cruz; valor em sans pesado, como nos
   outros cards, e o que é dinheiro em verde. */
.acum-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .45rem; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--line); gap: 1px;   /* o "fio" é o fundo aparecendo no vão */
}
.acum-item {
  display: flex; flex-direction: column; gap: .05rem; min-width: 0;
  padding: .35rem .6rem; background: color-mix(in srgb, var(--surface) 92%, var(--s1));
}
.acum-item .l {
  font-size: .56rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acum-item .v {
  font-family: var(--font); font-size: .95rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.acum-item.dinheiro .v { color: var(--sv-ok); }
@media (min-width: 1280px) and (min-height: 680px) {
  .painel-denso .card.acum { display: flex; flex-direction: column; }
  .painel-denso .acum-grade { flex: 1; margin-top: .35rem; }
  .painel-denso .acum-item { padding: .25rem .55rem; justify-content: center; }
  .painel-denso .acum-item .v { font-size: .88rem; }
}

/* ═══ Relatórios: faixa de cima (título, metas, filtros) ═══
   Três quadros da mesma altura, com os controles alinhados pela base: todo
   campo e todo botão com 36px, rótulo miúdo em caixa-alta em cima de cada um.
   "Exportar CSV" vira ação secundária (contorno + ícone): o vermelho cheio fica
   para o botão que grava algo (Salvar metas). */
.rel-topo { align-items: stretch; }
.rel-topo > .card { display: flex; flex-direction: column; }
.rel-topo .rel-form { margin-top: auto; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.rel-topo .rel-form label {
  display: flex; flex-direction: column; gap: .3rem; margin: 0;
  font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rel-topo .rel-form input, .rel-topo .rel-form select,
.rel-topo .rel-form .btn, .rel-topo .rel-form .btn-ghost {
  height: 36px; box-sizing: border-box; margin: 0;
}
.rel-topo .rel-form input, .rel-topo .rel-form select {
  padding: 0 .65rem; font-size: .82rem; font-family: var(--font-dados); color: var(--ink);
  min-width: 8.5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rel-topo .rel-form select { font-family: var(--font); min-width: 10rem; }
.rel-topo .rel-form .btn, .rel-topo .rel-form .btn-ghost { padding: 0 1rem; white-space: nowrap; }
.rel-topo .rel-form input:hover, .rel-topo .rel-form select:hover { border-color: var(--line-strong); }

/* Quadro do título: nome da tela, o que ela cobre e a exportação à direita. */
.rel-cabecalho { flex-direction: row !important; align-items: center; gap: 1rem; }
.rel-cabecalho > div { min-width: 0; }
.rel-cabecalho h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.rel-cabecalho .sub { margin: .25rem 0 0; font-size: .72rem; color: var(--muted); line-height: 1.45; }
.rel-csv {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; padding: 0 .9rem; font-weight: 600; color: var(--ink);
}
.rel-csv svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rel-csv:hover { border-color: var(--accent); color: var(--accent); }

@media (min-width: 1280px) and (min-height: 680px) {
  .rel-topo > .card { padding: .7rem .95rem .8rem; }
  .rel-topo .card-head { margin-bottom: .6rem; }
}
/* Campos dividem a largura do quadro numa linha só (sem quebrar para baixo);
   os botões ficam do tamanho do texto. */
.rel-topo .rel-form { flex-wrap: nowrap; }
.rel-topo .rel-form label { flex: 1 1 0; min-width: 0; }
.rel-topo .rel-form input, .rel-topo .rel-form select { width: 100%; min-width: 0; }
.rel-topo .rel-form .btn, .rel-topo .rel-form .btn-ghost { flex: none; }
.rel-cabecalho { flex-wrap: nowrap; }
.rel-cabecalho .rel-csv { align-self: center; }

/* ═══════════════════════════════════════════════════════════════════════
   OCORRÊNCIAS · ENTRADAS · WHATSAPP (ferramentas.js)
   ═══════════════════════════════════════════════════════════════════════ */

/* Selo de contagem no item do menu (ocorrências de hoje, fila, não lidas). */
.nav-item .nav-selo {
  margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: .66rem; font-weight: 700; font-style: normal;
  background: var(--accent); color: #fff; font-variant-numeric: tabular-nums;
}
.nav-item .nav-selo.verde { background: #00a884; }

/* Pílulas de estado do cabeçalho. */
.pill-vivo {
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px;
  font-size: .66rem; color: var(--muted); border: 1px solid var(--line); background: var(--surface-2);
}
.pill-vivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pill-vivo.on { color: var(--sv-ok); border-color: var(--sv-pend-linha); }
.pill-vivo.on::before { background: var(--sv-ok); animation: pulsoHora 1.8s ease-in-out infinite; }
.pill-desligado {
  padding: .1rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 600;
  color: var(--rep-outra); background: color-mix(in srgb, var(--critical) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--critical) 40%, transparent);
}
.sel-compacto { width: auto; min-width: 9rem; max-width: 18rem; padding: .3rem .5rem; font-size: .76rem; }
.card.stat.kpi.kpi-alerta .value { color: var(--rep-outra); }
.aviso-toast .aviso-acao { margin-top: .3rem; font-size: .72rem; font-weight: 600; color: var(--accent); }

/* ── Ocorrências ── */
.oc-log { display: flex; flex-direction: column; gap: .55rem; padding-right: .2rem; }
.oc-card {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: .55rem .75rem; font-size: .78rem; line-height: 1.5;
}
.oc-card.vermelho { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 6%, var(--surface-2)); }
.oc-card.amarelo { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 5%, var(--surface-2)); }
.oc-card header { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.oc-card p { margin: .15rem 0; }
.oc-tag { font-weight: 700; font-size: .78rem; color: var(--ink); }
.oc-card.vermelho .oc-tag { color: var(--rep-outra); }
.oc-card.amarelo .oc-tag { color: var(--rep-mesma); }
.oc-quando { margin-left: auto; font-size: .7rem; color: var(--muted); }
.oc-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.oc-msgs, .oc-ops { margin: .3rem 0 0; padding-left: 1.1rem; display: grid; gap: .15rem; }
.oc-msgs { list-style: none; padding-left: 0; }
.oc-msgs li, .oc-ops li { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.oc-val { font-family: var(--font-dados); font-size: .72rem; color: var(--ink-2); }
.oc-texto { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.oc-texto2 {
  margin: .2rem 0; padding: .35rem .55rem; border-radius: 8px; background: var(--surface-3); color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oc-pedido { margin: .3rem 0; padding: .35rem .55rem; border-radius: 8px; background: var(--surface-3); }
.oc-meio { font-size: .68rem; color: var(--muted); }
.oc-levou {
  font-size: .66rem; font-weight: 700; padding: 0 .4rem; border-radius: 999px;
  color: var(--sv-ok); background: var(--sv-pend); border: 1px solid var(--sv-pend-linha);
}
.oc-registro { font-size: .72rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: .3rem; }
.oc-vermelho { color: var(--rep-outra); }
.oc-rank tbody tr { cursor: pointer; }

/* ── Entradas ── */
.en-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.en-conversar.respondeu { background: #00a884; border-color: #00a884; color: #fff; font-weight: 600; }
.en-via {
  display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface-3); color: var(--ink-2);
}
.en-via.ok { color: var(--sv-ok); background: var(--sv-pend); border-color: var(--sv-pend-linha); }
.en-via.azul { color: var(--s1); background: color-mix(in srgb, var(--s1) 12%, transparent); border-color: color-mix(in srgb, var(--s1) 35%, transparent); }
.en-rank {
  display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; width: 100%;
  padding: .4rem .3rem; border-bottom: 1px solid var(--line); text-align: left; color: inherit;
}
.en-rank:hover, .en-rank.on { background: var(--surface-2); }
.en-rank-corpo { display: flex; flex-direction: column; min-width: 0; }
.en-rank-corpo b { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-rank-n { font-family: var(--font-dados); font-weight: 600; font-size: .9rem; }
.en-editor summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .82rem; list-style: none; }
.en-editor summary::-webkit-details-marker { display: none; }
.en-editor summary .hico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.en-editor summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.en-editor[open] summary::after { transform: rotate(90deg); }
.en-editor textarea { margin-top: .5rem; font-family: var(--font); min-height: 8rem; }
.en-chips button { font-family: var(--font-dados); }
.en-fila-nota { margin-top: .4rem; }

/* ═══════════ Cores do WhatsApp (.wa-chat) ═══════════
   Escuro por padrão; claro no tema Claro do painel. */
.wa-chat {
  --wa-bg: #0b141a; --wa-head-bg: #202c33; --wa-in: #202c33; --wa-out: #005c4b; --wa-ink: #e9edef;
  --wa-meta: #8696a0; --wa-green: #00a884; --wa-campo: #2a3942; --wa-hover: #202c33; --wa-dia: #182229;
  --wa-aviso: #182229; --wa-avatar: #6a7175; --wa-lista: #111b21; --wa-sel: #2a3942; --wa-divisa: #222d34;
  --wa-visto: #53bdeb; --wa-busca: #202c33; --wa-trama: rgba(255, 255, 255, .025);
  color: var(--wa-ink);
}
:root[data-theme="light"] .wa-chat {
  --wa-bg: #efeae2; --wa-head-bg: #f0f2f5; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-ink: #111b21;
  --wa-meta: #667781; --wa-campo: #ffffff; --wa-hover: #f5f6f6; --wa-dia: #ffffff; --wa-aviso: #ffeecd;
  --wa-avatar: #dfe5e7; --wa-lista: #ffffff; --wa-sel: #f0f2f5; --wa-divisa: #e9edef; --wa-busca: #f0f2f5;
  --wa-trama: rgba(0, 0, 0, .035);
}
.wa-fundo {
  background-color: var(--wa-bg);
  background-image: radial-gradient(var(--wa-trama) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.wa-head { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; background: var(--wa-head-bg); }
.wa-head-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-head-txt b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-head-txt span { font-size: .72rem; color: var(--wa-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--wa-avatar); color: #fff; font-weight: 600; font-size: 1rem;
}
.wa-avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Balões */
.wa-msg { display: flex; flex-direction: column; margin: 2px 0; position: relative; }
.wa-msg.eu { align-items: flex-end; }
.wa-msg.ela { align-items: flex-start; }
.wa-balao {
  position: relative; max-width: min(76%, 34rem); padding: .35rem .55rem .25rem; border-radius: 8px;
  background: var(--wa-in); color: var(--wa-ink); font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere;
  box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
}
.wa-msg.eu .wa-balao { background: var(--wa-out); }
.wa-meta { float: right; margin: .35rem 0 -.1rem .6rem; font-size: .64rem; color: var(--wa-meta); white-space: nowrap; }
.wa-visto { color: var(--wa-visto); }
.wa-autor { display: block; font-size: .74rem; margin-bottom: .1rem; }
.wa-dia { display: flex; justify-content: center; margin: .6rem 0; }
.wa-dia span { background: var(--wa-dia); color: var(--wa-meta); font-size: .68rem; padding: .25rem .6rem; border-radius: 7px; }
.wa-aviso {
  margin: .4rem auto; max-width: 30rem; text-align: center; font-size: .7rem; color: var(--wa-meta);
  background: var(--wa-aviso); padding: .35rem .7rem; border-radius: 7px;
}
.wa-cifrada, .wa-apagada { color: var(--wa-meta); }
.wa-citacao {
  display: flex; flex-direction: column; gap: .05rem; width: 100%; margin-bottom: .25rem; padding: .3rem .5rem;
  border-left: 3px solid var(--wa-green); border-radius: 6px; background: rgba(0, 0, 0, .18); text-align: left; color: inherit;
}
:root[data-theme="light"] .wa-citacao { background: rgba(0, 0, 0, .05); }
.wa-citacao b { font-size: .72rem; }
.wa-citacao span { font-size: .74rem; color: var(--wa-meta); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wa-foto {
  display: block; max-width: 100%; width: 300px; max-height: 320px; object-fit: cover; border-radius: 6px; cursor: zoom-in;
  background-size: cover; background-position: center; min-height: 80px;
}
.wa-video { display: block; max-width: 100%; width: 300px; border-radius: 6px; background: #000; }
.wa-doc { display: inline-block; padding: .4rem .6rem; border-radius: 6px; background: rgba(0, 0, 0, .15); color: inherit; }
.wa-figurinha { position: relative; }
.wa-figurinha img { width: 128px; height: 128px; object-fit: contain; display: block; }
.wa-figurinha .wa-meta { position: absolute; right: 2px; bottom: 2px; float: none; margin: 0; background: rgba(0, 0, 0, .45); color: #fff; padding: 0 .3rem; border-radius: 6px; }
.wa-reacoes {
  margin-top: -6px; z-index: 1; padding: .05rem .35rem; border-radius: 999px; font-size: .78rem;
  background: var(--wa-head-bg); border: 1px solid var(--wa-divisa); color: var(--wa-ink);
}
.wa-reacoes span { font-size: .66rem; color: var(--wa-meta); }
.wa-reacoes.minha { border-color: var(--wa-green); }
.wa-msg.destaque .wa-balao { outline: 2px solid var(--wa-green); outline-offset: 2px; }
.wa-menu-btn {
  position: absolute; top: 2px; right: 4px; width: 22px; height: 18px; border-radius: 6px; font-size: .8rem;
  color: var(--wa-meta); background: inherit; opacity: 0; transition: opacity .12s;
}
.wa-balao:hover .wa-menu-btn, .wa-figurinha:hover .wa-menu-btn { opacity: 1; }
.wa-menu {
  position: fixed; z-index: 95; min-width: 13rem; padding: .35rem; border-radius: 10px;
  background: #233138; color: #e9edef; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.wa-menu-reacoes { display: flex; gap: .15rem; padding: .15rem .1rem .35rem; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: .25rem; }
.wa-menu-reacoes button { font-size: 1.25rem; width: 2rem; height: 2rem; border-radius: 50%; }
.wa-menu-reacoes button:hover { background: rgba(255, 255, 255, .1); }
.wa-menu-item { display: block; width: 100%; text-align: left; padding: .4rem .6rem; border-radius: 6px; font-size: .82rem; }
.wa-menu-item:hover { background: rgba(255, 255, 255, .08); }

/* Barra de escrever */
.wa-escrever { display: flex; align-items: flex-end; gap: .4rem; padding: .5rem .7rem; background: var(--wa-head-bg); }
.wa-escrever textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 140px; padding: .55rem .8rem; border-radius: 10px;
  border: none; background: var(--wa-campo); color: var(--wa-ink); font: inherit; font-size: .86rem; line-height: 1.4;
}
.wa-escrever textarea:focus { box-shadow: none; outline: none; }
.wa-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; font-size: 1.2rem; color: var(--wa-meta); display: grid; place-items: center; }
.wa-btn:hover { background: rgba(127, 127, 127, .12); }
.wa-enviar { background: var(--wa-green); color: #fff; font-size: 1rem; }
.wa-enviar:hover { background: #06cf9c; }
.wa-respondendo {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; background: var(--wa-head-bg);
  border-top: 1px solid var(--wa-divisa);
}
.wa-respondendo > div { flex: 1; min-width: 0; border-left: 3px solid var(--wa-green); padding: .2rem .5rem; border-radius: 4px; background: rgba(0, 0, 0, .15); display: flex; flex-direction: column; }
.wa-respondendo b { font-size: .74rem; color: var(--wa-green); }
.wa-respondendo span { font-size: .76rem; color: var(--wa-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Painel de emoji e figurinhas */
.wa-painel-emoji { background: var(--wa-head-bg); border-top: 1px solid var(--wa-divisa); height: 250px; display: flex; flex-direction: column; }
.wa-emoji-abas { display: flex; gap: .2rem; padding: .35rem .6rem 0; }
.wa-emoji-abas button { padding: .3rem .8rem; font-size: .76rem; border-bottom: 2px solid transparent; color: var(--wa-meta); }
.wa-emoji-abas button.active { color: var(--wa-green); border-bottom-color: var(--wa-green); }
.wa-emoji-cats { display: flex; gap: .15rem; padding: .3rem .6rem; border-bottom: 1px solid var(--wa-divisa); }
.wa-emoji-cats button { font-size: 1.05rem; padding: .15rem .35rem; border-radius: 6px; opacity: .55; }
.wa-emoji-cats button.active { opacity: 1; background: rgba(127, 127, 127, .15); }
.wa-emoji-grade { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); padding: .4rem .6rem; align-content: start; }
.wa-emoji-grade button { font-size: 1.4rem; height: 36px; border-radius: 6px; }
.wa-emoji-grade button:hover { background: rgba(127, 127, 127, .15); }
.wa-emoji-grade.figs { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .3rem; }
.wa-fig-item img { width: 72px; height: 72px; object-fit: contain; }
.wa-fig-item { height: 78px; }
.wa-fig-criar { height: 78px; border: 1px dashed var(--wa-meta); border-radius: 8px; color: var(--wa-meta); font-size: 1.2rem; display: grid; place-items: center; }
.wa-fig-criar span { font-size: .62rem; }

/* ── A aba WhatsApp ── */
#tab-whatsapp { position: relative; }
.wa-app {
  display: grid; grid-template-columns: minmax(260px, 38%) minmax(0, 1fr); min-height: 70vh;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--wa-lista);
}
.wa-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--wa-divisa); background: var(--wa-lista); }
.wa-lista-topo { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem .45rem; font-size: 1rem; }
.wa-lista-topo .pill-vivo { margin-left: auto; }
.wa-busca { position: relative; padding: 0 .7rem .5rem; }
.wa-busca .busca-ico { left: 1.3rem; top: .6rem; }
.wa-busca input { width: 100%; padding: .45rem .7rem .45rem 2.1rem; border-radius: 8px; border: none; background: var(--wa-busca); color: var(--wa-ink); font-size: .8rem; }
.wa-conversas { flex: 1; min-height: 0; overflow: auto; }
.wa-lista-vazia { padding: 1rem; font-size: .78rem; color: var(--wa-meta); text-align: center; }
.wa-item { display: flex; gap: .7rem; align-items: center; width: 100%; padding: .55rem .8rem; text-align: left; color: inherit; border-bottom: 1px solid var(--wa-divisa); }
.wa-item:hover { background: var(--wa-hover); }
.wa-item.on { background: var(--wa-sel); }
.wa-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.wa-item-linha { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.wa-item-linha b { flex: 1; min-width: 0; font-size: .86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-item-hora { font-size: .68rem; color: var(--wa-meta); flex: none; }
.wa-item-hora.nova { color: var(--wa-green); }
.wa-item-previa { flex: 1; min-width: 0; font-size: .76rem; color: var(--wa-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-badge { flex: none; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--wa-green); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; }
.wa-painel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--wa-bg); }
.wa-vazio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  color: var(--wa-meta); text-align: center; border-bottom: 6px solid var(--wa-green); background: var(--wa-head-bg);
}
.wa-vazio svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .6; }
.wa-vazio h3 { margin: 0; color: var(--wa-ink); font-weight: 400; font-size: 1.4rem; }
.wa-vazio p { margin: 0; font-size: .8rem; }
.wa-conversa { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-conversa > .wa-fundo { flex: 1; min-height: 0; overflow: auto; padding: .6rem 6%; }
.wa-atalho {
  margin-left: auto; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--rep-mesma); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
}

/* Prévia, zoom e diálogo do pedido: sobre a tela inteira. */
.wa-previa, .wa-zoom, .wa-dialogo {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(6, 8, 12, .72); backdrop-filter: blur(3px);
}
.wa-previa.hidden, .wa-zoom.hidden, .wa-dialogo.hidden { display: none; }
.wa-previa-caixa { width: min(720px, 100%); max-height: 92vh; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--wa-bg); }
.wa-previa-caixa header { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; background: var(--wa-head-bg); }
.wa-previa-midia { flex: 1; min-height: 0; display: grid; place-items: center; padding: 1rem; }
.wa-previa-midia img, .wa-previa-midia video { max-width: 100%; max-height: 62vh; border-radius: 6px; }
.wa-previa-caixa footer { display: flex; gap: .5rem; padding: .6rem .8rem; background: var(--wa-head-bg); }
.wa-previa-caixa footer input { flex: 1; border: none; background: var(--wa-campo); color: var(--wa-ink); border-radius: 10px; }
.wa-zoom img { max-width: 95vw; max-height: 92vh; border-radius: 6px; }
.wa-dialogo-caixa {
  width: min(640px, 100%); height: min(760px, 92vh); display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: var(--wa-bg); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.wa-dialogo-caixa > .wa-fundo { flex: 1; min-height: 0; overflow: auto; padding: .6rem 5%; }
.pe-decisao {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; background: var(--wa-head-bg);
  border-top: 1px solid var(--wa-divisa); flex-wrap: wrap;
}
.pe-decisao .spacer { flex: 1; }
.pe-verde { background: #00a884; color: #fff; border-color: #00a884; }
.pe-vermelho { background: #ea4335; color: #fff; border-color: #ea4335; }
.pe-pergunta { font-size: .8rem; }
.pe-aprovado { font-size: .8rem; color: #00a884; font-weight: 600; }

/* Desktop: a aba WhatsApp enche a tela; Ocorrências e Entradas em 2 colunas. */
@media (min-width: 1280px) and (min-height: 680px) {
  #tab-whatsapp { padding-bottom: var(--e4); }
  .wa-app.tela-enche { min-height: 0; }
  #tab-ocorrencias .grid.split-23.tela-enche { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  #tab-entradas .grid.split-23.tela-enche { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .oc-topo .linha-filtro, .en-topo .linha-filtro { margin: 0; }
  .grid.kpis.en-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #tab-entradas .tela-col > .en-fila-card { flex: 0 1 auto; max-height: 45%; display: flex; flex-direction: column; min-height: 9rem; }
  #tab-entradas .en-fila-card .tbl-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
  #tab-entradas .en-editor textarea { min-height: 6rem; }
}
@media (max-width: 900px) {
  .wa-app { grid-template-columns: 1fr; }
  .wa-lista { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--wa-divisa); }
  .nav-item .nav-selo { position: absolute; top: 2px; right: 2px; margin: 0; }
}
#en-fila td { white-space: normal; }
#en-fila td:last-child, #en-fila td:first-child { white-space: nowrap; }
#en-fila td .linha-num { max-width: 26ch; white-space: normal; line-height: 1.25; }