/* ═══════════════════════════════════════════════════════════════════════════
   PERGOR PORTAL · folha única
   Manual de marca v2 · agosto 2026 (grafite + azul)

   Substitui `portal.css` (direção Signal: azul-noite/violeta/lima, Inter) e
   `design-system.css` (azul #4F7CFF, Plus Jakarta Sans), que se sobrepunham em
   cascata dupla. Aqui os dois conjuntos de seletores foram unificados sobre os
   tokens oficiais — nenhum id ou nome de classe mudou, portal.js e
   report-views.js continuam encontrando os mesmos ganchos.

   Superfícies desta tela, conforme o manual:
     · sidebar  → grafite-950 #20262A (institucional)
     · conteúdo → campo claro (slate-50 na página, branco no cartão)

   MIGRAÇÃO v1 → v2 (agosto 2026): institucional saiu de petróleo #072530 para
   grafite #20262A, e a ação saiu do âmbar para o azul #1461A8 (acento #3D9BF0
   sobre grafite). O âmbar não é mais cor de marca — sobrou como semântica de
   Foco no par suave da tag de atenção (foco-150 + foco-500).

   Os nomes `--pg-petroleo-*` continuam existindo como apelido dos tokens
   grafite: são centenas de ocorrências no resto da folha, e reescrever todas
   arriscaria mais do que ganharia. Regra nova usa o nome novo.

   Elevação é borda, não sombra. Sem gradiente, sem glow. Raio quase reto:
   0/2/4, 8 só em alvo de toque, pílula só no indicador de gravação.
   Serifa (IBM Plex Serif) é exclusiva de fala humana transcrita.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── GRAFITE · institucional · rampa slate da v2 ──────────────────────── */
  --pg-grafite-950: #20262A;   /* slate-950 · superfície institucional     */
  --pg-grafite-900: #2B3439;   /* slate-900 · cartão dentro do escuro      */
  --pg-grafite-800: #3F4750;   /* slate-800 · borda e hover sobre escuro   */
  --pg-grafite-700: #4C545D;   /* slate-700 · texto secundário no claro    */
  --pg-grafite-350: #B9C2CC;   /* slate-350 · texto secundário no escuro   */
  --pg-grafite-050: #F5F7F9;   /* slate-50  · fundo de tela                */

  /* ── AZUL · ação ──────────────────────────────────────────────────────── */
  --pg-azul-700: #0E4A80;      /* número sobre o fundo suave de acento     */
  --pg-azul-600: #1461A8;      /* ação sobre claro: botão, link, seleção   */
  --pg-azul-500: #2170BD;      /* ação pressionada                         */
  --pg-azul-400: #3D9BF0;      /* acento sobre grafite (e o ponto da marca)*/
  --pg-azul-300: #9FD0F7;      /* hover do acento sobre grafite            */
  --pg-azul-100: #E2E9F3;      /* fundo suave de seleção                   */

  /* ── NEUTROS · uma escala só ──────────────────────────────────────────── */
  --pg-neutro-000: #FFFFFF;
  --pg-neutro-050: #F5F7F9;
  --pg-neutro-200: #DEE3EA;
  --pg-neutro-400: #8B939C;
  --pg-neutro-600: #4C545D;
  --pg-neutro-950: #20262A;

  /* Nomes da v1 mantidos como apelido: 700+ ocorrências no resto da folha
     apontam para eles. O valor é o da v2 — trocar aqui move o app inteiro. */
  --pg-petroleo-950: var(--pg-grafite-900);
  --pg-petroleo-900: var(--pg-grafite-950);
  --pg-petroleo-700: var(--pg-grafite-800);
  --pg-petroleo-300: var(--pg-grafite-350);
  --pg-petroleo-050: var(--pg-grafite-050);

  /* ── SEMÂNTICAS ───────────────────────────────────────────────────────── */
  /* Âmbar saiu da marca na v2 e só continua como semântica de Foco. */
  --pg-foco-300: #E3CF9F;      /* amber-200 · foco sobre grafite           */
  --pg-foco-500: #B5871F;      /* amber-600 · foco sobre claro (AA)        */
  --pg-foco-150: #FDF6E6;      /* amber-50                                 */
  --pg-objecao:    #3D3F8F;
  --pg-objecao-bg: #E4E4F4;
  --pg-coberto:    #1F5D3F;
  --pg-coberto-bg: #DCEEE4;
  --pg-falha:      #A33327;    /* clay-600 · falha de sistema              */
  --pg-falha-bg:   #ECD8D5;    /* clay-200                                 */

  /* Anel de foco de teclado: é ação, então é azul — não a semântica âmbar
     de "Foco" do negócio, que ficou pálida demais para servir de anel. */
  --pg-anel-foco:         var(--pg-azul-600);
  --pg-anel-foco-inverso: var(--pg-azul-300);

  /* ── TIPOGRAFIA ───────────────────────────────────────────────────────── */
  --pg-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pg-serif: "IBM Plex Serif", Georgia, serif;
  --pg-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── ESPAÇO · múltiplos de 4 ──────────────────────────────────────────── */
  --pg-espaco-1: 4px;  --pg-espaco-2: 8px;  --pg-espaco-3: 12px;
  --pg-espaco-4: 16px; --pg-espaco-6: 24px; --pg-espaco-8: 32px;
  --pg-espaco-12: 48px;

  /* ── RAIO · quase reto ────────────────────────────────────────────────── */
  --pg-raio-0: 0;
  --pg-raio-2: 2px;
  --pg-raio-4: 4px;
  --pg-raio-8: 8px;
  --pg-raio-pilula: 999px;

  /* ── PAPÉIS DE SUPERFÍCIE E TEXTO (derivados dos tokens acima) ─────────── */
  --surface-page:    var(--pg-neutro-050);
  --surface-card:    var(--pg-neutro-000);
  --surface-sunken:  var(--pg-neutro-050);
  --surface-inverse: var(--pg-petroleo-900);

  --text-primary:     var(--pg-neutro-950);
  --text-secondary:   var(--pg-neutro-600);
  --text-tertiary:    var(--pg-neutro-400);
  --text-on-inverse:  var(--pg-petroleo-050);
  --text-dim-inverse: var(--pg-petroleo-300);

  --border-subtle:  var(--pg-neutro-200);
  --border-default: var(--pg-neutro-200);
  --border-strong:  var(--pg-neutro-400);
  --border-inverse: var(--pg-petroleo-700);

  /* Elevação do manual: borda, nunca sombra. O filete de 3px em petróleo-900
     marca o cartão de destaque (hero, painel executivo). */
  --pg-borda: 1px solid var(--pg-neutro-200);
  --pg-borda-escura: 1px solid var(--pg-petroleo-700);
  --pg-topo-cartao: 3px solid var(--pg-petroleo-900);

  /* Layout */
  --container-max: 1200px;
  --sidebar-width: 264px;
  --sidebar-collapsed-width: 88px;

  --duration-fast: 120ms;
  --duration-md: 200ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ═══ BASE ════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box }

html { background: var(--surface-page) }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: 400 15px/1.55 var(--pg-sans);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit }

button, a, input, select, textarea, summary {
  transition:
    color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

/* `hidden` precisa vencer os `display` dos componentes: a navegação por papel e
   os avisos condicionais dependem dele, e um item que deveria sumir para o
   vendedor não pode continuar visível por causa de um `display:flex`. */
[hidden] { display: none !important }

:focus-visible {
  outline: 2px solid var(--pg-anel-foco);
  outline-offset: 2px;
}

/* Âncoras de tempo, métricas e identificadores são sempre mono. */
.mono,
#record-timer,
.updated,
.audit-row time,
.map-note {
  font-family: var(--pg-mono);
  font-variant-numeric: tabular-nums;
}

/* ═══ SIDEBAR · superfície petróleo ═══════════════════════════════════════ */

/* A barra é fixa e nunca rola: `overflow: hidden` mata a barra de rolagem do
   próprio aside. O que absorve tela curta é a navegação, que rola por dentro
   sem mostrar barra (regra mais abaixo) — assim cabeçalho, ações, contexto e
   rodapé ficam sempre no lugar em vez de saírem do campo de visão. */
body > aside {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-width);
  overflow: hidden;
  padding: var(--pg-espaco-4) var(--pg-espaco-3) var(--pg-espaco-3);
  display: flex;
  flex-direction: column;
  gap: var(--pg-espaco-3);
  color: var(--text-on-inverse);
  background: var(--surface-inverse);
  border-right: 1px solid var(--border-inverse);
  transition:
    width var(--duration-md) var(--ease-out),
    padding var(--duration-md) var(--ease-out);
}

.sidebar-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--pg-espaco-2);
}

/* Respiro do símbolo = uma haste (15% da altura). O gap do lockup vem da
   proporção oficial do manual: 14/46 = .304 da altura do símbolo. */
.brand {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(36px * .304);
  min-height: 40px;
  padding: 0;
  color: var(--text-on-inverse);
  text-decoration: none;
}

body > aside .brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 0;
  box-shadow: none;
}

.brand-copy { min-width: 0 }

/* O nome nunca é imagem: texto em Plex Sans 700, caixa alta = barriga. */
body > aside .brand-wordmark,
.brand b {
  display: block;
  font-family: var(--pg-sans);
  font-size: calc(36px * .652);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.brand small {
  display: block;
  margin-top: .3em;
  overflow: hidden;
  color: var(--text-dim-inverse);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-inverse);
  border-radius: var(--pg-raio-4);
  color: var(--text-dim-inverse);
  background: transparent;
  cursor: pointer;
}

.sidebar-toggle:hover {
  border-color: var(--pg-petroleo-300);
  color: var(--text-on-inverse);
  background: var(--pg-petroleo-700);
}

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-md) var(--ease-out);
}

.sidebar-label {
  display: block;
  margin: var(--pg-espaco-1) var(--pg-espaco-2) calc(var(--pg-espaco-2) * -1);
  color: var(--text-dim-inverse);
  font-family: var(--pg-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Grupo recolhível de configuração ─────────────────────────────────────
   `<details>` nativo: abre e fecha sem JS e sem estado para sincronizar.    */
.sidebar-group { border-top: 1px solid var(--border-inverse); padding-top: var(--pg-espaco-2) }

.sidebar-group > summary {
  min-height: 36px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--pg-raio-4);
  color: var(--text-dim-inverse);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sidebar-group > summary::-webkit-details-marker { display: none }
.sidebar-group > summary:hover { color: var(--text-on-inverse); background: var(--pg-petroleo-700) }
.sidebar-group > summary svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-group-chev { margin-left: auto; width: 16px; height: 16px; display: block }
.sidebar-group-chev svg { width: 100%; height: 100% }
.sidebar-group[open] > summary { color: var(--text-on-inverse) }
.sidebar-group[open] .sidebar-group-chev { transform: rotate(180deg) }
.sidebar-group-body { display: grid; gap: var(--pg-espaco-1); margin-top: var(--pg-espaco-1) }

/* ── Contexto (espaço de trabalho + copiloto), fixado acima do rodapé ───── */
.sidebar-context {
  margin-top: auto;
  display: grid;
  gap: var(--pg-espaco-1);
  padding-top: var(--pg-espaco-2);
  border-top: 1px solid var(--border-inverse);
}

.workspace {
  min-height: 40px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-inverse);
  border-radius: var(--pg-raio-4);
  background: var(--pg-petroleo-950);
}

.ws-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--pg-raio-2);
  color: var(--pg-petroleo-050);
  background: var(--pg-petroleo-700);
  font-size: 10px;
  font-weight: 600;
}

.ws-name {
  min-width: 0;
  flex: 1;
  color: var(--text-on-inverse);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-name small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-dim-inverse);
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hoje só o copiloto Comercial existe no DOM — os outros três saíram por
   serem placeholder. A faixa é `flex` para que, quando um segundo copiloto
   entrar, eles dividam a linha em vez de empilhar: quem não estiver ativo
   fica só no ícone, com o nome no `title` e no aria-label. */
.copilots { display: flex; gap: var(--pg-espaco-1) }

.copilot {
  min-height: 36px;
  padding: 7px 8px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--pg-raio-4);
  color: var(--text-dim-inverse);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Só o copiloto ativo carrega texto; o resto é ícone. */
.copilot:not(.active) .sidebar-item-label,
.copilot:not(.active) small { display: none }
.copilot.active { flex: 1 1 auto; min-width: 0 }

.copilot svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.copilot.active {
  color: var(--text-on-inverse);
  background: var(--pg-petroleo-700);
  border-color: var(--pg-petroleo-700);
}

.copilot small {
  margin-left: auto;
  color: var(--text-dim-inverse);
  font-size: 9px;
  font-weight: 400;
}

/* A navegação é a parte elástica da barra: em tela baixa ela encolhe e rola
   por dentro, sem barra visível, em vez de empurrar contexto e rodapé para
   fora. `min-height: 0` é o que permite um filho flex encolher abaixo do
   conteúdo — sem isso o `overflow` nunca entra em ação. */
body > aside nav {
  display: grid;
  gap: var(--pg-espaco-1);
  margin-top: 0;
  min-height: 0;
  flex: 0 1 auto;
  overflow-y: auto;
  scrollbar-width: none;
}
body > aside nav::-webkit-scrollbar { display: none }

.nav {
  min-height: 36px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--pg-raio-4);
  color: var(--text-dim-inverse);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.nav svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.nav:hover {
  color: var(--text-on-inverse);
  background: var(--pg-petroleo-700);
}

/* Item ativo: fundo grafite-800 + filete azul à esquerda. O filete é o que
   separa "ativo" de "hover", que compartilham o mesmo fundo — e seleção é
   azul na v2. Usa borda, não sombra: elevação nesta folha é sempre borda. */
.nav.active {
  color: var(--text-on-inverse);
  background: var(--pg-grafite-800);
  border-color: var(--pg-grafite-800);
  border-left: 2px solid var(--pg-azul-400);
  box-shadow: none;
}
.nav.active svg { stroke: var(--pg-azul-400) }

.nav:hover svg { stroke: currentColor }
.nav:focus-visible { outline-color: var(--pg-anel-foco-inverso); outline-offset: -2px }

/* As ações vêm logo abaixo da marca: gravar é o que o produto faz, então é o
   primeiro item da barra, não o último. */
.sidebar-actions { display: grid; gap: var(--pg-espaco-2) }

/* ── A AÇÃO DA TELA ───────────────────────────────────────────────────────
   Botão principal: azul-400 sobre grafite, texto grafite-950.             */
.add-btn {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* v2: a ação é azul. Sobre grafite o manual pede o acento blue-400, com
     texto grafite por cima — blue-600 se apagaria contra o fundo escuro. */
  border: 1px solid var(--pg-azul-400);
  border-radius: var(--pg-raio-4);
  color: var(--pg-grafite-950);
  background: var(--pg-azul-400);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.add-btn:hover, .add-btn:active {
  border-color: var(--pg-azul-300);
  background: var(--pg-azul-300);
  color: var(--pg-grafite-950);
}

.add-btn .plus {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--pg-raio-2);
  color: currentColor;
  background: rgba(32, 38, 42, .14);
  font-size: 17px; font-weight: 700; line-height: 1;
}

.add-btn .plus svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.add-btn small {
  display: block;
  margin-top: 2px;
  color: rgba(32, 38, 42, .68);
  font-size: 9px;
  font-weight: 400;
}

/* Importar é ação secundária: contorno, sem consumir âmbar. */
#import.add-btn {
  border-color: var(--border-inverse);
  color: var(--text-on-inverse);
  background: transparent;
}
#import.add-btn:hover {
  border-color: var(--pg-petroleo-300);
  background: var(--pg-petroleo-700);
  color: var(--text-on-inverse);
}
#import.add-btn .plus { background: rgba(245, 247, 249, .12) }
#import.add-btn small { color: var(--text-dim-inverse) }

.nav-foot {
  padding: var(--pg-espaco-3) var(--pg-espaco-2) 0;
  display: flex;
  align-items: center;
  gap: var(--pg-espaco-2);
  border-top: 1px solid var(--border-inverse);
}

.connection {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  color: var(--text-dim-inverse);
  font-family: var(--pg-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .04em;
}

.connection i {
  width: 7px; height: 7px;
  margin-right: 7px;
  display: inline-block;
  border-radius: var(--pg-raio-pilula);
  background: var(--pg-coberto);
  box-shadow: none;
}

.connection > span, .connection span { display: block; min-width: 0; color: var(--text-dim-inverse) }
.connection small { display: block; margin-top: 2px; color: var(--text-dim-inverse); font: inherit }
.connection a { color: var(--pg-petroleo-300); text-decoration: none }

.logout {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--pg-raio-4);
  color: var(--text-dim-inverse);
  text-decoration: none;
}
.logout:hover { color: var(--text-on-inverse); background: var(--pg-petroleo-700); text-decoration: none }
.logout svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.logout .sidebar-item-label { display: none }

/* ═══ ÁREA PRINCIPAL ══════════════════════════════════════════════════════ */

main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: 0 clamp(24px, 5vw, 72px) 72px;
}

main > header, main > .view {
  width: 100%;
  max-width: var(--container-max);
  margin-right: auto;
  margin-left: auto;
}

main > header, header {
  position: sticky;
  top: 0;
  z-index: 10;
  /* 96px de cabeçalho fixo custava um oitavo da tela em notebook antes do
     primeiro dado aparecer. 72px continua confortável para o alvo de toque
     do botão de atualizar e sobe todo o conteúdo. */
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

header p, .hero p, .section-heading p {
  margin: 0 0 7px;
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.015em }
h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em }

.header-actions { display: flex; align-items: center; gap: 12px }

.updated {
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.refresh {
  width: 34px; height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--pg-raio-4);
  background: var(--surface-card);
  color: var(--pg-petroleo-700);
  cursor: pointer;
  display: inline-grid; place-items: center;
  font-size: 15px; line-height: 1;
}
.refresh:hover { background: var(--surface-sunken); border-color: var(--border-strong) }
.refresh:disabled { cursor: default; opacity: .65 }
.refresh svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.refresh.spin svg, .refresh.spin i { animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

#source {
  padding: 6px 10px;
  border-radius: var(--pg-raio-2);
  color: var(--pg-coberto);
  background: var(--pg-coberto-bg);
  font-family: var(--pg-mono);
  font-size: 11px;
  white-space: nowrap;
}

.view { display: none; padding-top: 18px }
.view.active { display: block }

.viewer-badge {
  padding: 5px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--pg-raio-2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.view-note { margin: -6px 0 18px; font-size: 13px; color: var(--text-secondary); max-width: 70ch }

.section-heading {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 13px;
}

.link-button, .back {
  border: 0;
  background: transparent;
  color: var(--pg-petroleo-700);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.back { margin-bottom: 15px }
.link-button:hover, .back:hover { color: var(--pg-petroleo-900) }
.link-button svg, .back svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══ HERO E STATS ════════════════════════════════════════════════════════ */

/* Banner "Pulso ao vivo": superfície campo (cartão branco com filete petróleo
   no topo), texto à esquerda e a onda de áudio ambiente no canto inferior
   direito. Sem gradiente e sem sombra — a elevação é a borda. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: var(--pg-topo-cartao);
  border-radius: var(--pg-raio-4);
  color: var(--text-primary);
  /* Fechando a tela em vez de abrindo, o hero não precisa de 232px de altura:
     é assinatura, não conteúdo. */
  padding: 22px 26px;
  min-height: 168px;
  margin-top: var(--pg-espaco-6);
  display: flex;
  align-items: center;
  box-shadow: none;
}
.hero::after { display: none }

.hero-text { position: relative; z-index: 2; max-width: 46ch }
.hero p {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: -.015em;
  font-weight: 700;
}
.hero em { color: var(--pg-petroleo-700); font-style: normal }
.hero span {
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 44ch;
  display: block;
  font-size: 14px;
}

/* A onda é textura de fundo: fica atrás do texto e não recebe ponteiro. */
.hero-wave {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  height: 76%;
  z-index: 1;
  pointer-events: none;
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 34px }

/* ── Topo da Visão geral: indicadores + mapa lado a lado ──────────────────
   Os indicadores mandam na largura; o mapa é apoio, numa coluna fixa à
   direita — e não a peça principal da tela.

   O empilhado é o padrão e as duas colunas entram só acima de 1040px, por
   `min-width`. Escrito ao contrário, `.home-top .stats` venceria por
   especificidade as media queries de tela estreita que já governam `.stats`,
   e os tiles ficariam presos numa contagem de colunas errada no celular. */
.home-top {
  display: grid;
  gap: var(--pg-espaco-4);
  /* Sobe: o topo da tela não precisa de respiro de 22px antes do primeiro
     dado, ainda mais com o cabeçalho logo acima já dando o seu. */
  margin: 10px 0 22px;
}
.home-top .stats, .home-top .map-section { margin: 0 }
.home-top .map-note { margin: 8px 2px 0; font-size: 11px }

/* Cabeçalho do mapa na mesma régua do tile de indicador: título curto à
   esquerda, contagem à direita, uma linha só. */
.map-head {
  min-height: 22px;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.map-head h2 { margin: 0; font-size: 15px; font-weight: 600 }
.map-head #map-count {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 11px;
}

@media (min-width: 1041px) {
  .home-top {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    /* `stretch` (o padrão) em vez de `start`: é o que faz a coluna do mapa
       ter exatamente a altura da coluna dos indicadores. */
    align-items: stretch;
  }
  /* Em meia largura os quatro tiles não cabem em linha: viram 2x2. */
  .home-top .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  /* O mapa cresce para preencher o que sobra depois do cabeçalho, então a
     base da coluna casa com a base do último tile em vez de depender de uma
     altura fixa adivinhada. */
  .home-top .map-section { display: flex; flex-direction: column }
  .home-top #recordings-map { flex: 1; min-height: 170px; height: auto }
}

.stats article, .card, .panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  padding: 16px;
}
/* Os indicadores abrem a tela, então precisam ter peso de dado, não de
   cartão de texto: filete azul no topo e número grande. O primeiro tile
   (VISITAS) é o que resume o trabalho e ganha fundo de acento. */
.stats article {
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--pg-azul-600);
}
.stats article::before { display: none }
.stats article:first-child { background: var(--pg-azul-100) }
.stats article:first-child b { color: var(--pg-azul-700) }
.stats small {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.stats b {
  display: block;
  margin: 6px 0 2px;
  font-family: var(--pg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.stats span { font-size: 11px; color: var(--text-secondary) }

/* ═══ CARDS E LISTA DE VISITAS ════════════════════════════════════════════ */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px }

/* O cartão de visita empilhava cinco linhas — selo, cliente, vendedor,
   termômetro e rodapé — e três deles ocupavam a largura inteira para dizer
   pouco. Vira grade de duas colunas: o termômetro sobe para a direita, na
   altura do selo, e some uma linha inteira de cada cartão. Numa grade de
   três cartões isso é o que faz a Visão geral fechar sem rolagem. */
.card {
  cursor: pointer;
  text-align: left;
  color: inherit;
  display: flex;
  flex-direction: column;
  font: inherit;
}

/* Duas colunas só na GRADE (Visão geral). A fila de Visitas continua `flex`
   em linha: ela depende de `flex-direction: row` e de `order` nos filhos, e
   trocar o `display` do `.card` para grid transformava cada linha da fila
   numa caixa alta de duas colunas. */
.cards:not(.list) .card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 10px;
}
.cards:not(.list) .card > .badge { grid-column: 1; grid-row: 1; justify-self: start }
.cards:not(.list) .card > .termo { grid-column: 2; grid-row: 1; justify-self: end }
.cards:not(.list) .card > h3,
.cards:not(.list) .card > p,
.cards:not(.list) .card > footer { grid-column: 1 / -1 }
.card:hover { border-color: var(--pg-petroleo-700); box-shadow: none; transform: none }

.badge {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: var(--pg-raio-2);
  background: var(--pg-foco-150);
  color: var(--pg-foco-500);
  font-size: 12px;
  font-weight: 600;
}
.badge.ready { background: var(--pg-coberto-bg); color: var(--pg-coberto) }
.badge.syncing { background: var(--pg-objecao-bg); color: var(--pg-objecao) }

.card h3 { font-size: 15px; margin: 9px 0 2px; font-weight: 600; letter-spacing: -.01em }
.card p, .card footer, .panel p { font-size: 12px; color: var(--text-secondary); line-height: 1.5 }
.card footer { border-top: 1px solid var(--border-subtle); padding-top: 8px; margin-top: 8px }

/* Dentro do cartão o termômetro é indicador, não legenda: ficam as barras e o
   rótulo vai para o `title`. Sai da tela sem sair do documento — `display:
   none` levaria junto o leitor de tela, e aí o cartão perderia a leitura de
   interesse para quem não enxerga as barras.

   Vale só na grade: na fila de Visitas o cartão é uma linha larga e o rótulo
   cabe ao lado das barras sem custar altura. */
.cards:not(.list) .card .termo .txt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Termômetro de interesse (App do Vendedor v4) ─────────────────────────
   Três barras crescentes e três estados. Nunca porcentagem: o contrato
   entrega `purchase_intent` como categoria, e uma barra proporcional daria
   uma precisão que o dado não tem. */
.termo { display: flex; align-items: center; gap: 7px; flex: 0 0 auto }
.termo .barras { display: flex; align-items: flex-end; gap: 3px; height: 18px }
.termo .barras i {
  width: 6px;
  display: block;
  border-radius: var(--pg-raio-2);
  background: var(--pg-neutro-200);
}
.termo .barras i:nth-child(1) { height: 8px }
.termo .barras i:nth-child(2) { height: 13px }
.termo .barras i:nth-child(3) { height: 18px }
.termo.alto  .barras i { background: var(--pg-azul-600) }
.termo.medio .barras i:nth-child(-n+2) { background: var(--pg-azul-600) }
.termo.baixo .barras i:nth-child(1) { background: var(--text-tertiary) }
.termo .txt { color: var(--text-secondary); font-size: 12px; white-space: nowrap }

/* ── Fita do roteiro no cartão (padrão `.blocos` do App do Vendedor v4) ────
   Oito marcas para as oito etapas: cheia = realizada, clara = parcial, vazia
   = ausente. É a condução da visita lida de relance. Fica só na fila, que
   tem largura sobrando; na grade a Visão geral perderia a altura que foi
   justamente o motivo de comprimir o cartão. */
.mini-roteiro { display: none }
.cards.list .card .mini-roteiro {
  order: 3;
  display: flex;
  gap: 3px;
  flex: none;
}
.mini-roteiro i {
  width: 9px; height: 14px;
  display: block;
  border-radius: 1px;
  background: var(--pg-neutro-200);
}
.mini-roteiro i.feita { background: var(--pg-azul-600) }
.mini-roteiro i.meio { background: var(--pg-azul-300) }

.cards.list .card .termo { order: 4 }

/* ── Fila de visitas em blocos de mês ─────────────────────────────────────
   Cada mês é um `<details>`: o mais recente abre, os anteriores ficam
   recolhidos. A contagem fica no cabeçalho para o mês fechado ainda dizer
   quanto tem dentro. */
.visit-months { display: grid; gap: var(--pg-espaco-2) }

.month-group { border-bottom: 1px solid var(--border-subtle) }
.month-group:last-child { border-bottom: 0 }

.month-group > summary {
  min-height: 40px;
  padding: 10px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.month-group > summary::-webkit-details-marker { display: none }
.month-group > summary:hover { color: var(--pg-azul-600) }
.month-group > summary b {
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.month-group > summary span:not(.month-chev) {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 11px;
}
.month-chev {
  margin-left: auto; width: 16px; height: 16px;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) ease;
}
.month-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.month-group[open] .month-chev { transform: rotate(180deg) }
.month-group > .cards { padding-bottom: var(--pg-espaco-3) }

.cards.list { grid-template-columns: 1fr; gap: 9px }
.cards.list .card { flex-direction: row; align-items: center; gap: 18px; padding: 14px 18px }
.cards.list .card .badge { order: 5; margin-left: auto }
.cards.list .card h3 { order: 1; margin: 0; flex: none; min-width: 190px }
.cards.list .card p { order: 2; margin: 0 }
.cards.list .card footer { order: 6; border: 0; padding: 0; margin: 0; text-align: right; flex: none; min-width: 150px }

.empty {
  grid-column: 1/-1;
  margin: 0;
  padding: 48px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.empty::before {
  content: "";
  width: 46px; height: 46px;
  margin: 0 auto var(--pg-espaco-3);
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  background: var(--surface-sunken);
}

.skeleton-card {
  height: 112px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  background: var(--surface-sunken);
  animation: pg-skeleton 1.4s ease-in-out infinite;
}
@keyframes pg-skeleton { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

/* ═══ TOOLBAR, FILTROS E CAMPOS ═══════════════════════════════════════════ */

.toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center }

.search-field { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center }
.search-field svg {
  position: absolute; left: 12px; width: 16px; height: 16px;
  fill: none; stroke: var(--text-tertiary);
  stroke-width: 1.8; stroke-linecap: round; pointer-events: none;
}

.toolbar input,
.record-fields input,
.admin-form select,
.source-policy select,
.source-token-import textarea,
.review-dialog textarea,
.login-card input,
.import-file-field input[type="file"] {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--pg-raio-4);
  color: var(--text-primary);
  background: var(--surface-card);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}
.toolbar input { padding-left: 36px }
.source-toolbar .search-field input { padding-left: 12px }

.toolbar input:hover,
.record-fields input:hover,
.source-policy select:hover,
.source-token-import textarea:hover,
.review-dialog textarea:hover,
.login-card input:hover,
.import-file-field input[type="file"]:hover { border-color: var(--border-strong) }

.toolbar input:focus,
.record-fields input:focus,
.source-policy select:focus,
.source-token-import textarea:focus,
.review-dialog textarea:focus,
.login-card input:focus,
.import-file-field input[type="file"]:focus {
  border-color: var(--pg-petroleo-700);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--pg-petroleo-700);
}

.filters {
  display: flex; gap: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  border-radius: var(--pg-raio-4);
}
.filters button {
  border: 0;
  border-radius: var(--pg-raio-2);
  padding: 8px 13px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.filters button.active {
  background: var(--pg-petroleo-900);
  color: var(--pg-petroleo-050);
  box-shadow: none;
}

/* ═══ RELATÓRIO ═══════════════════════════════════════════════════════════ */

.report { display: grid; grid-template-columns: 1fr 1fr; gap: 13px }
.full-width, .transcript-panel { grid-column: 1/-1 }

.executive-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 13px; margin: 0 0 13px }
.executive-grid .panel { min-height: 132px }
.executive-grid small,
.source-connection > div > small,
.source-import-form > small {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.executive { border-top: 3px solid var(--pg-petroleo-900) }
.next-step {
  background: var(--pg-coberto-bg);
  border-color: var(--pg-coberto);
  border-top: 3px solid var(--pg-coberto);
}
.next-step small { color: var(--pg-coberto) }

.quality-banner {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 13px; padding: 12px 14px;
  border: 1px solid var(--pg-foco-500);
  border-radius: var(--pg-raio-4);
  background: var(--pg-foco-150);
  color: var(--pg-foco-500);
}
.quality-banner b { flex: none; font-size: 12px }
.quality-banner span { font-size: 12px; line-height: 1.55 }
.quality-banner.low { background: var(--pg-falha-bg); border-color: var(--pg-falha); color: var(--pg-falha) }
.quality-banner.unknown {
  background: var(--surface-sunken);
  border-color: var(--border-default);
  color: var(--text-secondary);
}
.low-confidence .metrics { opacity: .72 }

.summary-list { display: grid; gap: 10px; margin: 0 }
.summary-list div { border-top: 1px solid var(--border-subtle); padding-top: 9px }
.summary-list div:first-child { border: 0; padding-top: 0 }
.summary-list dt {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.summary-list dd { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-primary) }

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px }
.panel-head h3, .panel h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600 }

.route-progress {
  padding: 4px 8px;
  border-radius: var(--pg-raio-2);
  color: var(--pg-petroleo-700);
  background: var(--surface-sunken);
  font-family: var(--pg-mono);
  font-size: 11px;
  white-space: nowrap;
}

.intent { background: var(--pg-coberto-bg); border-color: var(--pg-coberto) }
.intent h2 { font-size: 27px; color: var(--pg-coberto); margin: 4px 0 }
.intent-result { display: flex; align-items: center; gap: 8px; margin: 0 0 8px }
.intent-result > span:not(.intent-label) { font-size: 11px; color: var(--text-secondary) }
.intent-label {
  display: inline-block;
  background: var(--pg-coberto-bg);
  color: var(--pg-coberto);
  border-radius: var(--pg-raio-2);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Citação literal: serifa. É a única voz humana da tela. */
.panel blockquote, .evidence blockquote, .route-row blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 2px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--pg-serif);
  font-size: 15px;
  line-height: 1.6;
}

.honest-empty {
  padding: 11px;
  border-radius: var(--pg-raio-4);
  background: var(--surface-sunken);
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.5;
}
.honest-empty.compact { padding: 7px 9px }

.metrics { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px }
.metrics b {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  padding: 6px 8px;
  border-radius: var(--pg-raio-2);
  font-family: var(--pg-mono);
  font-size: 11px;
  font-weight: 500;
}

.route { display: flex; justify-content: space-between; border-top: 1px solid var(--border-subtle); padding: 9px 0 0 }
.route b { font-family: var(--pg-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em }
.route b.status { display: inline-flex; align-items: center; gap: 6px }
.route b.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
b.status.realized, .realized { color: var(--pg-coberto) }
b.status.partial, .partial { color: var(--pg-foco-500) }
b.status.absent, .absent { color: var(--pg-objecao) }

/* Etapa ausente é uma linha, não um bloco: sem evidência para mostrar, o
   respiro de parágrafo só empurra para baixo o que tem conteúdo. */
.route-row.is-absent { padding: 6px 0 }
.route-row.is-absent .route span,
.route-row.is-absent .route b { color: var(--text-tertiary) }

/* Roteiro inteiro ausente: uma frase e os nomes como etiquetas. */
.route-none { margin: 0 0 10px; color: var(--text-secondary); font-size: 13px }
.route-chips { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none }
.route-chips li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-pilula);
  color: var(--text-tertiary);
  font-size: 11px;
}

/* Número da etapa: mono, para a sequência ser lida como ordem e não como
   parte do nome. */
.route-n {
  color: var(--text-tertiary);
  font-family: var(--pg-mono);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
.route-chips .route-n { margin-right: 0 }
.route-row .route span { display: inline-flex; align-items: baseline }

.route-row { border-top: 1px solid var(--border-subtle); padding: 10px 0 }
.route-row:first-of-type { border-top: 0 }
.route-row .route { border: 0; padding: 0; gap: 14px }
.route-row blockquote { margin-bottom: 7px }

.opportunity-list { display: grid; gap: 8px; margin-top: 14px }
.opportunity { padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--pg-raio-2); background: var(--surface-sunken) }
.opportunity p { margin: 4px 0 0 }

.pending-group { border-top: 1px solid var(--border-subtle); margin-top: 14px; padding-top: 12px }
.pending-group h4 {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.pending-group ul { padding-left: 19px; color: var(--text-secondary); font-size: 12px; line-height: 1.6 }

/* Objeção tem cor semântica própria — índigo, nunca vermelho. */
.objection {
  border-radius: var(--pg-raio-2);
  border-left: 3px solid var(--pg-objecao);
  background: var(--pg-objecao-bg);
  padding: 10px;
  margin-top: 8px;
}
.objection p { margin: 7px 0 0 }
.action-item p span { color: var(--text-secondary) }

/* ═══ ÁUDIO, EVIDÊNCIAS E REVISÃO ═════════════════════════════════════════ */

.audio-player {
  margin: 18px 0;
  padding: 15px;
  background: var(--surface-inverse);
  border: 1px solid var(--border-inverse);
  border-radius: var(--pg-raio-4);
  color: var(--text-on-inverse);
}
.audio-player small {
  color: var(--text-dim-inverse);
  display: block;
  margin-bottom: 9px;
  font-family: var(--pg-mono);
  font-size: 11px;
}
.audio-player audio { width: 100%; height: 36px }

.evidence-list { border-top: 1px solid var(--border-subtle); margin-top: 18px; padding-top: 12px }
.evidence-list h4 {
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.evidence, .action-item { border-top: 1px solid var(--border-subtle); padding: 7px 0; display: grid; gap: 4px }
.evidence b { font-size: 13px; line-height: 1.4; font-weight: 600 }

/* ── Evidência em três linhas curtas ──────────────────────────────────────
   Rótulo, pontos de confiança e âncora de tempo dividem a primeira linha; a
   citação vem embaixo com a largura inteira do painel; as ações fecham o item.
   Nada de coluna lateral: quando os botões viravam a segunda coluna, sobravam
   102px de largura para a citação e cada item passava de 160px de altura — o
   contrário do que se queria. Aqui a citação é o único bloco que cresce, e
   cresce na direção certa. */
.evidence-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 18px;
}
/* Âncora de tempo encostada na direita da própria linha do rótulo: não é ação
   de revisão, é referência, e assim não custa linha nenhuma. */
.evidence-head .seek { margin-left: auto; align-self: center }
.evidence-head small { color: var(--text-tertiary); font-family: var(--pg-mono); font-size: 11px }

/* A citação continua em serifa (fala humana transcrita), só que na medida de
   leitura de lista, não de destaque. */
/* `min-width: 0` porque item de grade não encolhe abaixo do próprio conteúdo
   mínimo: numa coluna estreita a citação vazava 24px para fora do painel. */
.evidence blockquote { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.45 }

/* Âncora de tempo: sempre mono. */
.seek {
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--pg-petroleo-700);
  border-radius: var(--pg-raio-2);
  padding: 5px 8px;
  font-family: var(--pg-mono);
  font-size: 11px;
  cursor: pointer;
}
.seek:hover { border-color: var(--pg-petroleo-700); background: var(--surface-sunken) }

/* Ações de revisão: linha própria embaixo do item, os três sempre lado a lado.
   Ocupam uma linha de 22px e não disputam largura com a citação. */
/* Sem `nowrap`: numa coluna estreita os três botões travados numa linha só
   davam 265px de largura mínima dentro de um painel de 241px e empurravam a
   citação para fora. Deixando quebrar, eles ficam lado a lado sempre que cabe
   e o item nunca vaza. */
.review-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.review-actions button {
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-secondary);
  border-radius: var(--pg-raio-2);
  padding: 3px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.review-actions button:hover { border-color: var(--pg-petroleo-700); color: var(--pg-petroleo-700) }

.review-state { border-radius: var(--pg-raio-2); padding: 4px 8px; font-size: 11px; font-weight: 600 }
.review-state.confirmed { background: var(--pg-coberto-bg); color: var(--pg-coberto) }
.review-state.corrected { background: var(--pg-objecao-bg); color: var(--pg-objecao) }
.review-state.discarded { background: var(--surface-sunken); color: var(--text-secondary) }
.is-discarded { opacity: .55; text-decoration-color: var(--text-tertiary) }

/* ═══ ESTADOS DE PROCESSAMENTO ════════════════════════════════════════════ */

.stage-stepper { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 18px }
.stage-stepper li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-2);
  padding: 6px 12px;
}
.stage-stepper li i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default) }
.stage-stepper li.done { color: var(--pg-coberto); border-color: var(--pg-coberto) }
.stage-stepper li.done i { background: var(--pg-coberto) }
.stage-stepper li.current {
  color: var(--pg-petroleo-700);
  border-color: var(--pg-petroleo-700);
  background: var(--surface-sunken);
}
.stage-stepper li.current i { background: var(--pg-petroleo-700); animation: pulse-dot 1.6s infinite }
.stage-stepper.failed li.current { color: var(--pg-falha); border-color: var(--pg-falha); background: var(--pg-falha-bg) }
.stage-stepper.failed li.current i { background: var(--pg-falha); animation: none }
@keyframes pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* Alerta de segundo fator no cabeçalho: um ícone, não uma tarja.
   O aviso é recorrente — quem não ativou vê todo dia — e ocupava o topo da
   Visão geral com duas frases que ninguém relê. Aqui ele fica ao lado do
   crachá, em âmbar (a semântica de Foco da v2), e leva a Minha conta. */
.totp-alert {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--pg-foco-500);
  border-radius: var(--pg-raio-4);
  color: var(--pg-foco-500);
  background: var(--pg-foco-150);
  cursor: pointer;
}
.totp-alert svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.totp-alert:hover { color: var(--pg-neutro-000); background: var(--pg-foco-500) }

.report-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 18px;
}
.report-exports { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.report-exports a { text-decoration: none; display: inline-flex; align-items: center }
.report-modes button { white-space: nowrap }

/* ═══ TRANSCRIÇÃO SINCRONIZADA ════════════════════════════════════════════ */

.transcript-panel { margin-top: 18px }
.transcript-follow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary) }
.transcript-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 }
.revision-note {
  font-size: 12px; color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-2);
  padding: 10px 12px; margin: 8px 0;
}
.transcript-scroll {
  max-height: 460px; overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  padding: 6px;
  background: var(--surface-sunken);
}
.transcript-line {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 12px; align-items: start;
  width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: var(--pg-raio-2);
  padding: 9px 12px; font: inherit; cursor: pointer; color: var(--text-primary);
}
.transcript-line:hover { background: var(--surface-card) }
.transcript-line.active { background: var(--surface-card); box-shadow: inset 3px 0 0 var(--pg-petroleo-900) }
.transcript-line.active .transcript-text { font-weight: 500 }
.transcript-line.corrected .transcript-meta b::after {
  content: " · corrigido"; color: var(--pg-objecao); font-weight: 600;
}
/* Falante e minutagem são âncora → mono. */
.transcript-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--pg-mono); font-size: 11px; color: var(--text-secondary);
}
.transcript-meta b { font-size: 11px; color: var(--text-primary); font-weight: 600 }
/* A fala em si é humana → serifa. */
.transcript-text, .transcript-plain {
  font-family: var(--pg-serif);
  font-size: 15px;
  line-height: 1.6;
}
.transcript-plain { padding: 12px }
.transcript-edit {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--pg-raio-2);
  padding: 3px 8px; align-self: center; white-space: nowrap;
  background: var(--surface-card); cursor: pointer;
}
.transcript-edit:hover { color: var(--pg-petroleo-700); border-color: var(--pg-petroleo-700) }

/* ═══ BLOCOS AVANÇADOS DO RELATÓRIO ═══════════════════════════════════════ */

.panel-note { font-size: 12px; color: var(--text-secondary); margin: 0 0 12px; max-width: 70ch }

.inference-tag {
  font-family: var(--pg-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--pg-foco-150); color: var(--pg-foco-500);
  border-radius: var(--pg-raio-2); padding: 3px 8px; margin-left: 8px;
}

.confidence-band { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; cursor: help }
.conf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--border-default) }
.conf-dot.conf-baixa { background: var(--pg-falha) }
.conf-dot.conf-media { background: var(--pg-foco-500) }
.conf-dot.conf-alta { background: var(--pg-coberto) }
.conf-dot.conf-indefinida { background: var(--border-default) }

.reading-row .confidence-band {
  display: inline-block; font-size: 11px; font-weight: 500; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--pg-raio-2);
  padding: 2px 8px; cursor: auto;
}
.reading-row .confidence-band.baixa { color: var(--pg-falha); border-color: var(--pg-falha); background: var(--pg-falha-bg) }
.reading-row .confidence-band.media { color: var(--pg-foco-500); border-color: var(--pg-foco-500); background: var(--pg-foco-150) }
.reading-row .confidence-band.alta { color: var(--pg-coberto); border-color: var(--pg-coberto); background: var(--pg-coberto-bg) }

.qualification-row, .risk-row, .reading-row, .inconsistency-row {
  border-top: 1px solid var(--border-subtle); padding: 12px 0;
}
.qualification-row:first-of-type, .risk-row:first-of-type,
.reading-row:first-of-type, .inconsistency-row:first-of-type { border-top: 0 }
.qualification-row b, .risk-row b, .reading-row b, .inconsistency-row b { display: inline-block; font-size: 14px }

/* ── Qualificação com selo de três estados (App do Vendedor v4) ────────────
   A pergunta direta é o título; o nome técnico do campo fica de apoio, para
   quem procura pelo termo do contrato. O selo faz a coluna ser lida de
   relance, em vez de linha a linha pelo texto de estado. */
.qualification-row { padding-left: 26px; position: relative }
.qualification-selo {
  position: absolute; left: 0; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pg-azul-600);
}
.qualification-selo.cheio { background: var(--pg-azul-600) }
.qualification-selo.meio {
  background: linear-gradient(to right, var(--pg-azul-600) 50%, transparent 50%);
}
.qualification-selo.vazio { border-color: var(--border-strong); background: transparent }
.qualification-row b small {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-family: var(--pg-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.qualification-row p, .risk-row p, .inconsistency-row p { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary) }
.qualification-state, .risk-severity {
  float: right; font-size: 11px; font-weight: 600;
  border-radius: var(--pg-raio-2); padding: 3px 10px;
  background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.qualification-row.forte .qualification-state { color: var(--pg-coberto); background: var(--pg-coberto-bg); border-color: var(--pg-coberto) }
.qualification-row.parcial .qualification-state { color: var(--pg-foco-500); background: var(--pg-foco-150); border-color: var(--pg-foco-500) }
.qualification-row.fraca_ausente .qualification-state { color: var(--pg-falha); background: var(--pg-falha-bg); border-color: var(--pg-falha) }
.risk-row.alto .risk-severity { color: var(--pg-falha); background: var(--pg-falha-bg); border-color: var(--pg-falha) }
.risk-row.medio .risk-severity { color: var(--pg-foco-500); background: var(--pg-foco-150); border-color: var(--pg-foco-500) }
.verification-note { font-size: 12px; color: var(--text-secondary); margin-top: 14px }

.chapter { border: 1px solid var(--border-subtle); border-radius: var(--pg-raio-4); padding: 10px 14px; margin-bottom: 10px }
.chapter > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; font-size: 14px; list-style: none }
.chapter > summary::-webkit-details-marker { display: none }
.chapter-time, .chapter-share, .chapter-count {
  font-family: var(--pg-mono); font-size: 11px; color: var(--text-secondary);
}
.chapter-count { margin-left: auto }
.unclassified-panel { background: var(--surface-sunken) }

.participation-list { display: flex; flex-direction: column; gap: 10px }
.participation-row { display: grid; grid-template-columns: 150px 1fr 130px; gap: 12px; align-items: center; font-size: 13px }
.participation-bar { display: block; height: 8px; border-radius: var(--pg-raio-2); background: var(--surface-sunken); border: 1px solid var(--border-subtle); overflow: hidden }
.participation-bar i { display: block; height: 100%; background: var(--pg-petroleo-700) }
.participation-row span { font-family: var(--pg-mono); font-size: 12px; color: var(--text-secondary) }

.negotiation-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--border-subtle) }
.timeline-step { position: relative; padding: 0 0 18px 18px }
.timeline-step::before {
  content: ""; position: absolute; left: -27px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface-card); border: 2px solid var(--pg-petroleo-700);
}
.timeline-step.objecao::before { border-color: var(--pg-objecao) }
.timeline-step.compromisso_proximo_passo::before { border-color: var(--pg-coberto) }
.timeline-stage {
  display: inline-block; font-family: var(--pg-mono); font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 4px;
}
.timeline-step b { display: block; font-size: 14px; margin-bottom: 4px }

.munition-panel { border-top: 3px solid var(--pg-petroleo-900) }
.seller-next { border-top: 3px solid var(--pg-coberto) }

/* ═══ GESTÃO, FONTES E MAPA ═══════════════════════════════════════════════ */

.manager {
  background: var(--surface-inverse);
  border: 1px solid var(--border-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--pg-raio-4);
  padding: 26px 28px;
  margin-bottom: 28px;
  overflow: hidden;
}
.manager p { color: var(--text-dim-inverse) }
.manager b {
  font-family: var(--pg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 48px; font-weight: 600;
  display: block; letter-spacing: -.02em; margin: 2px 0;
}
.manager span { color: var(--pg-petroleo-050) }

.source-connection { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center }
.source-connection h3, .source-import-form h3 { margin: 5px 0; font-size: 20px; font-weight: 600 }
.source-connection p { color: var(--text-secondary); font-size: 13px; max-width: 590px; line-height: 1.55 }
.source-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.source-token-import { flex-basis: 100%; font-size: 12px; color: var(--text-secondary) }
.source-token-import summary { cursor: pointer; color: var(--text-primary); font-weight: 600 }
.source-token-import textarea { margin: 8px 0; font-family: var(--pg-mono); font-size: 12px }
.source-policy { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--text-primary) }
.source-policy select { display: block; margin-top: 7px }
.source-toolbar { margin-top: 22px }
.plaud-file { display: flex; justify-content: space-between; gap: 18px; align-items: center }
.plaud-file p { color: var(--text-secondary); font-size: 13px; margin: 4px 0 }
.plaud-file small { font-family: var(--pg-mono); font-size: 11px; color: var(--text-secondary) }
.plaud-file button { white-space: nowrap }

.map-section .section-heading > span {
  padding: 5px 8px;
  border-radius: var(--pg-raio-2);
  color: var(--pg-coberto);
  background: var(--pg-coberto-bg);
  font-family: var(--pg-mono);
  font-size: 11px;
}
#recordings-map {
  height: 330px; overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  background: var(--surface-sunken);
  box-shadow: none;
}
.map-note { color: var(--text-secondary); font: 500 11px/1.5 var(--pg-mono) }
.leaflet-popup-content { font: 400 13px/1.55 var(--pg-sans) }

/* ═══ CONTAS ══════════════════════════════════════════════════════════════ */

.accounts-list { display: grid; gap: 14px }
.account-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  padding: 18px 20px;
  box-shadow: none;
}
/* O `header` global do app fixa altura e posição; dentro do card ele é só uma
   linha de título e precisa voltar ao fluxo normal. */
.account-card header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; height: auto; position: static;
  padding: 0; background: none; border: 0;
}
.account-card header h3 { margin: 0; font-size: 17px; font-weight: 600 }
.account-card header span { font-size: 12px; color: var(--text-secondary) }

/* ── Cliente: o que pede atenção aparece antes de ler as colunas ───────────
   A lista vem ordenada por atenção (objeção pesa mais que compromisso, e as
   duas pesam mais que volume de visitas). O filete à esquerda e o selo dizem
   em que estado a conta está sem obrigar a percorrer os três blocos. */
.account-card { border-left: 3px solid var(--border-subtle) }
.account-card.tem-objecao { border-left-color: var(--pg-falha) }
.account-card.tem-pendencia { border-left-color: var(--pg-foco-500) }
.account-card.em-dia { border-left-color: var(--pg-coberto) }

.account-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0 }
.account-flag {
  padding: 3px 8px;
  border-radius: var(--pg-raio-pilula);
  color: var(--pg-falha);
  background: var(--pg-falha-bg);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.account-card.tem-pendencia .account-flag { color: var(--pg-foco-500); background: var(--pg-foco-150) }
.account-flag.is-ok { color: var(--pg-coberto); background: var(--pg-coberto-bg) }

.account-body .termo { margin-top: 8px }
.account-more {
  align-self: center;
  color: var(--text-tertiary);
  font-family: var(--pg-mono);
  font-size: 11px;
}
.account-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.account-body small {
  display: block; font-family: var(--pg-mono); font-size: 10px;
  letter-spacing: .09em; color: var(--text-secondary);
  text-transform: uppercase; margin-bottom: 4px;
}
.account-body b { display: block; font-size: 14px; margin-bottom: 2px }
.account-body span { font-size: 12px; color: var(--text-secondary) }
.account-card footer {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
  border-top: 1px solid var(--border-subtle); padding-top: 12px;
}
.account-visit {
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--pg-raio-2);
  padding: 5px 12px; cursor: pointer; color: var(--text-primary);
}
.account-visit:hover { border-color: var(--pg-petroleo-700); color: var(--pg-petroleo-700) }

/* ═══ DIGEST, ADMINISTRAÇÃO E TRILHA ══════════════════════════════════════ */

.digest-row, .admin-row, .audit-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle); padding: 11px 0; font-size: 13px;
}
.digest-row:first-child, .admin-row:first-child, .audit-row:first-child { border-top: 0 }
.digest-row b, .admin-row b { font-size: 14px }

/* Contagem ao lado do título do grupo, para o tamanho da fila ser lido antes
   de percorrer as linhas. */
.panel-count {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--pg-raio-pilula);
  background: var(--pg-azul-100);
  color: var(--pg-azul-700);
  font-family: var(--pg-mono);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}

/* A linha de pendência é uma fila de trabalho: o nome da conta ancora à
   esquerda com largura fixa, o contexto ocupa o meio e a ação fica sempre na
   mesma coluna à direita — assim o olho desce em coluna em vez de caçar o
   botão em posições diferentes a cada linha. */
@media (min-width: 721px) {
  .digest-row { flex-wrap: nowrap }
  .digest-row b { flex: 0 0 clamp(160px, 22%, 260px); min-width: 0 }
  .digest-row button { flex: none }
}
.digest-row span, .admin-row span, .audit-row span {
  font-size: 12px; color: var(--text-secondary); flex: 1; min-width: 200px;
}
.digest-row button { margin-left: auto }
.digest-preview { margin-top: 18px }
.digest-preview pre {
  white-space: pre-wrap; font-family: var(--pg-mono); font-size: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  padding: 14px; overflow-x: auto;
}
.admin-list, .audit-list {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-4);
  padding: 6px 18px;
  box-shadow: none;
}
.admin-row.inactive { opacity: .55 }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto }
/* O grid de .record-fields foi desenhado para o diálogo de gravação (três
   campos); nos formulários de administração cada campo ocupa a própria coluna
   e o botão fecha a linha inteira. */
.admin-form label { grid-column: auto !important }
.admin-form select { font-size: 14px; font-weight: 500 }
.admin-form button { grid-column: 1/-1; justify-self: start }
.audit-row time { font-size: 11px; color: var(--text-secondary); min-width: 120px }
.audit-row b { font-family: var(--pg-mono); font-size: 12px; color: var(--pg-petroleo-700) }

.dialog-note { font-size: 12px; color: var(--text-secondary); margin: 6px 0 12px; line-height: 1.5 }
#share-url { width: 100%; font-family: var(--pg-mono); font-size: 12px }
#totp-secret {
  font-family: var(--pg-mono); font-size: 14px;
  background: var(--surface-sunken); padding: 4px 8px; border-radius: var(--pg-raio-2);
}

/* ═══ TOAST ═══════════════════════════════════════════════════════════════ */

#toast {
  position: fixed; right: 25px; bottom: 25px;
  background: var(--surface-inverse);
  border: 1px solid var(--border-inverse);
  color: var(--text-on-inverse);
  padding: 12px 15px;
  border-radius: var(--pg-raio-4);
  opacity: 0; transform: translateY(50px);
  transition: .2s; box-shadow: none; font-weight: 500;
}
/* Vermelho só fala de falha de sistema. */
#toast.error { background: var(--pg-falha); border-color: var(--pg-falha); color: var(--pg-neutro-000) }
.show { opacity: 1 !important; transform: none !important }

/* ═══ DIÁLOGOS ════════════════════════════════════════════════════════════
   Cada diálogo é uma superfície própria: tem o seu único âmbar no botão
   principal.                                                               */

.review-dialog, .record-dialog {
  border: 1px solid var(--border-default);
  border-radius: var(--pg-raio-4);
  padding: 0;
  background: var(--surface-card);
  box-shadow: none;
}
.review-dialog { max-width: 480px; width: calc(100% - 32px) }
.record-dialog { width: min(610px, calc(100% - 28px)); max-height: calc(100vh - 28px) }
.review-dialog::backdrop, .record-dialog::backdrop { background: rgba(32, 38, 42, .62) }

.review-dialog form { padding: 25px; position: relative }
.review-dialog p, .dialog-kicker {
  margin: 0 0 7px;
  color: var(--text-secondary);
  font-family: var(--pg-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.review-dialog h2 { margin-bottom: 18px }
.review-dialog label { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 7px }
.review-dialog textarea { resize: vertical }

.dialog-close {
  position: absolute; right: 16px; top: 13px;
  border: 1px solid transparent; background: none;
  font-size: 22px; line-height: 1;
  color: var(--text-secondary); cursor: pointer;
  border-radius: var(--pg-raio-2); padding: 2px 6px;
}
.dialog-close:hover { border-color: var(--border-subtle); color: var(--text-primary); background: var(--surface-sunken) }
.dialog-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }

.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px }
.dialog-actions button {
  border: 1px solid var(--pg-foco-500);
  border-radius: var(--pg-raio-4);
  background: var(--pg-foco-500);
  color: var(--pg-petroleo-950);
  padding: 10px 16px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.dialog-actions button:hover { background: var(--pg-foco-300); border-color: var(--pg-foco-300) }
.dialog-actions .secondary {
  background: transparent; color: var(--text-secondary);
  border-color: var(--border-default);
}
.dialog-actions .secondary:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--surface-sunken) }

/* ═══ CAPTURA WEB ═════════════════════════════════════════════════════════
   Setup explícito, estado vivo e retry sem perder o Blob local.            */

.record-shell { position: relative; padding: 30px }
.record-stage[hidden] { display: none }
.record-stage h2 { font-size: 26px; margin: 0 0 9px }
.record-intro, .record-result p { display: block; color: var(--text-secondary); font-size: 13px; line-height: 1.65 }

.record-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 23px 0 17px }
.record-fields label:first-child { grid-column: 1/2 }
.record-fields label:nth-child(2) { grid-column: 2/3 }
.record-fields label:last-child { grid-column: 1/-1 }
.record-fields label { font-size: 12px; font-weight: 600; color: var(--text-primary) }
.record-fields label small { color: var(--text-secondary); font-weight: 400 }
.record-fields input, .import-file-field input[type="file"] { display: block; margin-top: 7px }

.import-file-field { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); margin: 6px 0 4px }
.import-file-field small { display: block; margin-top: 6px; color: var(--text-secondary); font-weight: 400 }

.record-check {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  border-radius: var(--pg-raio-4);
  padding: 12px 13px; margin-top: 10px;
  color: var(--text-secondary); cursor: pointer;
}
.record-check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--pg-petroleo-700); flex: none }
.record-check span { font-size: 12px; line-height: 1.5 }
.record-check b { display: block; color: var(--text-primary); font-size: 12px }
.record-check.compact { background: var(--surface-card) }

.record-note {
  margin: 16px 0; color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--pg-raio-2);
  padding: 10px 12px; font-size: 11px; line-height: 1.55;
}

.record-primary, .record-secondary, .record-stop {
  border: 1px solid transparent;
  border-radius: var(--pg-raio-4);
  padding: 12px 16px;
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: 44px;
}
/* `.record-primary` também é usada em formulários soltos das views Fontes,
   Administração e Segurança. Ali o âmbar da tela já pertence ao CTA da sidebar,
   então o botão é petróleo; o âmbar só aparece quando ele está dentro de um
   diálogo, que é uma superfície própria. */
.record-primary {
  background: var(--pg-petroleo-900);
  border-color: var(--pg-petroleo-900);
  color: var(--pg-petroleo-050);
}
.record-primary:hover { background: var(--pg-petroleo-700); border-color: var(--pg-petroleo-700) }

dialog .record-primary {
  background: var(--pg-foco-500);
  border-color: var(--pg-foco-500);
  color: var(--pg-petroleo-950);
}
dialog .record-primary:hover { background: var(--pg-foco-300); border-color: var(--pg-foco-300) }

.record-primary:disabled { cursor: wait; opacity: .65 }
.record-setup > .record-primary { width: 100%; display: flex; justify-content: center; align-items: center; gap: 9px }
.mic-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: none }

.record-secondary { background: transparent; border-color: var(--border-default); color: var(--text-secondary) }
.record-secondary:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--surface-sunken) }

/* Parar gravação: vermelho é legítimo aqui (par do indicador de gravação). */
.record-stop { background: var(--pg-falha); border-color: var(--pg-falha); color: var(--pg-neutro-000); display: flex; align-items: center; gap: 8px }
.record-stop:hover { background: var(--pg-falha) }
.record-stop span { display: block; width: 9px; height: 9px; border-radius: var(--pg-raio-2); background: var(--pg-neutro-000) }
.record-controls { display: flex; justify-content: center; gap: 9px; margin-top: 23px }

#record-live { text-align: center; padding: 12px 0 5px }

/* Onda de áudio oficial: 44 barras, uma focal âmbar, fase própria por barra.
   É decorativa (aria-hidden no template) e respeita reduced-motion. */
.record-visual {
  width: auto; height: auto; border-radius: 0;
  margin: 12px auto 18px; display: grid; place-items: center;
  position: relative; background: transparent;
}
.record-pulse { display: none }
.record-bars {
  position: relative; z-index: 1;
  height: 64px; display: flex; align-items: center; gap: 3px;
}
.record-bars i {
  display: block; width: 4px; height: 52%;
  border-radius: var(--pg-raio-2);
  background: var(--pg-neutro-400);
  animation: pg-onda 1.1s ease-in-out infinite;
}
.record-bars i.focal { background: var(--pg-foco-500) }
@keyframes pg-onda { 0%, 100% { height: 18% } 50% { height: 100% } }
@media (prefers-reduced-motion: reduce) {
  .record-bars i { animation: none; height: 52% }
}

#record-timer {
  display: block;
  font-family: var(--pg-mono);
  font-variant-numeric: tabular-nums;
  font-size: 42px; font-weight: 500; letter-spacing: -.02em;
}
#record-live h2 { font-size: 20px; margin: 7px 0 3px }
#record-live-meta { color: var(--text-secondary); font-size: 12px; margin: 0 0 17px }

/* A pílula é exclusiva do indicador de gravação. */
.record-status {
  display: inline-block;
  background: var(--pg-falha); color: var(--pg-neutro-000);
  border-radius: var(--pg-raio-pilula);
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
}
.record-status.paused { background: var(--pg-foco-150); color: var(--pg-foco-500) }

#record-result { text-align: center; padding: 20px 0 8px }
.result-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: var(--pg-raio-4); display: grid; place-items: center;
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 26px; font-weight: 600;
}
.result-icon.success { background: var(--pg-coberto-bg); border-color: var(--pg-coberto); color: var(--pg-coberto) }
.result-icon.error { background: var(--pg-falha-bg); border-color: var(--pg-falha); color: var(--pg-falha) }
.result-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
#record-result-message { max-width: 430px; margin: 0 auto }

.upload-progress {
  height: 5px; overflow: hidden;
  border-radius: var(--pg-raio-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  margin: 22px auto 4px; max-width: 360px;
}
.upload-progress i {
  display: block; height: 100%; width: 38%;
  background: var(--pg-petroleo-700);
  animation: upload-moving 1.2s ease-in-out infinite;
}
.upload-progress.done i { width: 100%; animation: none; background: var(--pg-coberto) }
.upload-progress.error i { width: 100%; animation: none; background: var(--pg-falha) }
@keyframes upload-moving { 50% { transform: translateX(165%) } }
#record-done { margin-top: 23px }

/* ═══ LOGIN ═══════════════════════════════════════════════════════════════
   Superfície própria: âmbar único no botão de entrar → logo em uma cor.    */

.login-page { min-height: 100vh; background: var(--pg-petroleo-900) }
.login-shell { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 22px }
.login-card {
  width: min(430px, 100%);
  /* Superfície campo, não branco puro: o corte do símbolo na versão de uma cor
     é #f2f4f5 e precisa casar com o fundo do cartão, senão a barriga do P
     fecha e a marca vira um borrão. */
  background: var(--pg-neutro-050);
  border: 1px solid var(--border-default);
  border-radius: var(--pg-raio-4);
  padding: 34px;
  box-shadow: none;
}
.login-card > .login-brand {
  margin-bottom: var(--pg-espaco-8);
  display: flex; align-items: center;
  gap: calc(44px * .304);
}
.login-card img, .login-card .login-brand img { width: 44px; height: 44px; border-radius: 0; box-shadow: none }
.login-wordmark {
  display: block; color: var(--text-primary);
  font-family: var(--pg-sans);
  font-size: calc(44px * .652); font-weight: 700;
  line-height: 1; letter-spacing: .01em;
}
.login-card > p {
  margin: 0 0 6px; color: var(--text-secondary);
  font-family: var(--pg-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.login-card h1 { font-size: 28px; margin-bottom: 10px }
.login-card > span { display: block; color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--pg-espaco-6) }
.login-card form { display: grid; gap: 15px }
.login-card label { font-size: 12px; font-weight: 600; color: var(--text-primary) }
.login-card input { display: block; margin-top: 7px }
.login-card form button {
  border: 1px solid var(--pg-foco-500);
  border-radius: var(--pg-raio-4);
  background: var(--pg-foco-500);
  color: var(--pg-petroleo-950);
  padding: 13px; min-height: 44px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.login-card form button:hover { background: var(--pg-foco-300); border-color: var(--pg-foco-300) }
.login-error {
  background: var(--pg-falha-bg); color: var(--pg-falha);
  border: 1px solid var(--pg-falha);
  border-radius: var(--pg-raio-2);
  padding: 10px; margin-bottom: 15px; font-size: 13px;
}

/* ═══ SIDEBAR RECOLHIDA ═══════════════════════════════════════════════════ */

@media (min-width: 901px) {
  html.sidebar-collapsed body > aside {
    width: var(--sidebar-collapsed-width);
    padding-right: var(--pg-espaco-3);
    padding-left: var(--pg-espaco-3);
  }
  html.sidebar-collapsed main { margin-left: var(--sidebar-collapsed-width) }
  html.sidebar-collapsed .sidebar-head { gap: var(--pg-espaco-1) }
  html.sidebar-collapsed .brand { min-width: 32px; flex: 0 0 32px; justify-content: center }
  html.sidebar-collapsed body > aside .brand-mark { width: 32px; height: 32px }
  html.sidebar-collapsed .sidebar-toggle { width: 28px; height: 28px }
  html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg) }
  html.sidebar-collapsed .brand-copy,
  html.sidebar-collapsed .sidebar-label,
  html.sidebar-collapsed .sidebar-item-label,
  html.sidebar-collapsed .sidebar-group-chev,
  html.sidebar-collapsed .copilot small,
  html.sidebar-collapsed .ws-name { display: none }
  html.sidebar-collapsed .copilot,
  html.sidebar-collapsed .workspace,
  html.sidebar-collapsed .nav,
  html.sidebar-collapsed .add-btn,
  html.sidebar-collapsed .sidebar-group > summary {
    justify-content: center;
    padding-right: var(--pg-espaco-2);
    padding-left: var(--pg-espaco-2);
  }
  html.sidebar-collapsed .workspace { min-height: 40px }
  html.sidebar-collapsed .add-btn { min-height: 40px }
  html.sidebar-collapsed .add-btn .plus { background: transparent }
  html.sidebar-collapsed .nav-foot { justify-content: center; padding-right: 0; padding-left: 0 }
  html.sidebar-collapsed .connection { flex: 0 }
  html.sidebar-collapsed .connection i { margin-right: 0 }
}

/* ═══ RESPONSIVO ══════════════════════════════════════════════════════════ */

/* Com a barra lateral ocupando 236px, o relatório em duas colunas deixava cada
   painel com 241px numa janela de 1024px: a citação da evidência caía para
   quatro linhas e os botões de revisão quebravam em duas — 173px por item.
   Numa coluna só o mesmo item fecha em 94px. */
@media (max-width: 1120px) {
  .report, .executive-grid { grid-template-columns: 1fr }
}

@media (max-width: 1040px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 900px) {
  .report, .executive-grid { grid-template-columns: 1fr }
  .account-body { grid-template-columns: 1fr }
  .transcript-line { grid-template-columns: 1fr; gap: 4px }
  .transcript-meta { flex-direction: row; gap: 8px }
  .participation-row { grid-template-columns: 1fr }
  .viewer-badge { display: none }
  .cards.list .card { flex-wrap: wrap; gap: 8px 14px }
  .cards.list .card h3 { min-width: 0; flex: 1 1 100% }
  .cards.list .card footer { min-width: 0; text-align: left }
}

/* Tablet e telas estreitas: a sidebar deixa de ser coluna fixa e vira uma
   barra superior — e fica de fato fixa (não sticky), sempre alcançável sem
   rolar até o topo. Só o essencial sobrevive — marca, as duas ações e a
   navegação em ícones. Configuração e contexto saem da barra e voltam pelo
   rodapé da página, para não empurrar o conteúdo para baixo da dobra.

   `position: fixed` tira a barra do fluxo, então sua altura precisa ser
   previsível: uma linha só (nowrap), com a navegação rolando na horizontal
   se não couber, e `main` ganha `padding-top` equivalente via
   `--pg-barra-superior`. */
@media (max-width: 900px) {
  :root { --pg-barra-superior: 61px }

  body > aside {
    position: fixed; top: 0; right: 0; left: 0; inset: 0 0 auto 0;
    z-index: 30;
    width: auto; height: var(--pg-barra-superior);
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    gap: 10px; padding: 0 16px;
    border-right: 0; border-bottom: 1px solid var(--border-inverse);
    overflow: hidden;
  }
  .brand { padding: 0; flex: none; min-width: 0 }
  body > aside .brand-mark { width: 32px; height: 32px }
  .brand small, .sidebar-toggle { display: none }
  .sidebar-group, .sidebar-context, .nav-foot { display: none }

  .sidebar-actions { order: 3; flex: none; flex-direction: row; margin-left: auto; gap: 8px }
  .add-btn { width: auto; min-height: 44px; padding: 9px 12px }
  .add-btn small { display: none }
  .add-btn .sidebar-item-label { font-size: 0 }

  /* A navegação rola na horizontal em vez de quebrar linha — é o que mantém
     a barra numa altura fixa e previsível. */
  body > aside nav {
    order: 2;
    flex: 0 1 auto; min-width: 0;
    display: flex; flex-wrap: nowrap; gap: 4px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body > aside nav::-webkit-scrollbar { display: none }
  .nav { flex: none; min-width: 44px; padding: 9px; justify-content: center }
  .nav .sidebar-item-label { font-size: 0 }
  .nav svg { margin: 0 }

  /* Compensa a barra fixa: sem isto o topo da página fica coberto por ela. */
  main { margin: 0; padding: var(--pg-barra-superior) 18px 40px }
  main > header, header {
    position: sticky; top: var(--pg-barra-superior);
    height: auto; min-height: 72px; padding: 12px 0;
    background: var(--surface-page);
  }
  .hero { min-height: 0; padding: 22px 24px; display: block }
  .hero-text { max-width: none }
  .hero h2 { font-size: 30px }
  /* Onda entra no fluxo, como faixa abaixo do texto — sem ela sobrepondo a
     leitura numa caixa estreita. */
  .hero-wave {
    position: static;
    width: 100%; height: 76px;
    display: block;
    margin-top: 18px;
  }
  .stats, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .header-actions { gap: 8px; flex-wrap: wrap }
  .source-connection, .plaud-file { align-items: flex-start; flex-direction: column }
  .source-actions { justify-content: flex-start }
  .updated { display: none }
}

@media (max-width: 560px) {
  body > aside { padding: 0 14px }

  main { padding: var(--pg-barra-superior) 14px 32px }
  .stats, .cards { grid-template-columns: 1fr }
  #source { display: none }
  .hero { padding: 20px }
  .hero h2 { font-size: 26px }
  .hero span { font-size: 13px }
  .hero-wave { height: 60px }
  .filters { width: 100% }
  .filters button { flex: 1 }
  .toolbar { gap: 8px }
  .search-field { max-width: none; flex-basis: 100% }
  .report-toolbar { gap: 8px }
  .record-shell { padding: 24px 18px }
  .record-fields { grid-template-columns: 1fr }
  .record-fields label:first-child,
  .record-fields label:nth-child(2),
  .record-fields label:last-child { grid-column: 1 }
  .record-controls { flex-direction: column }
  .record-controls button { width: 100%; justify-content: center }
  .cards.list .card footer { min-width: 0; text-align: left }
  .account-card, .admin-list, .audit-list { padding: 14px }
  #recordings-map { height: 220px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}