/* Painel Geral — spec 165 · Tokens do design de referência (Direção G — Sinal).
   Prefixo .pv-* p/ classes; tokens extraídos p/ .pv-tokens (spec 168 T012) —
   assim /financeiro reusa a identidade visual sem duplicar variáveis. */

/* ============================================================
   Tokens compartilhados — aplique .pv-tokens em qualquer container-raiz
   (hoje: #painel-visual e #financeiro-app).
   ============================================================ */
.pv-tokens {
  /* Paleta */
  --pv-bg: #eaebee;             /* fundo da tela */
  --pv-surface: #ffffff;        /* cards, sidebar, header */
  --pv-surface-2: #fafbfc;      /* input, rodapé sutil */
  --pv-surface-3: #f2f3f7;      /* pill secundário, badge neutro */
  --pv-ink: #111112;            /* tinta principal */
  --pv-ink-2: #4a5162;          /* texto secundário */
  --pv-ink-3: #5a616e;          /* texto terciário */
  --pv-muted: #7b8290;
  --pv-muted-2: #8b919e;
  --pv-muted-3: #a4aab6;
  --pv-border: #e0e2e8;
  --pv-divider: #eff1f4;
  --pv-divider-2: #f4f5f8;

  /* Sinalização */
  --pv-accent: #ff6a1f;         /* laranja Pagar / call-to-action */
  --pv-accent-ink: #1a0e06;     /* texto sobre laranja */
  --pv-accent-dark: #c74a12;    /* laranja hover / número Pagar */
  --pv-accent-soft: #fffaf6;    /* hover suave laranja */
  --pv-accent-tint: #ffe6d5;    /* badge fluxo pendente */
  --pv-accent-tint-ink: #a8480f;
  --pv-danger: #b8332a;         /* Responder */
  --pv-danger-soft: #fffafa;
  --pv-success: #1f7a4d;        /* Finalizado / Aprovado */
  --pv-success-soft: #fafcfa;

  /* Elevação */
  --pv-shadow-1: 0 1px 4px rgba(17,17,18,.04);
  --pv-shadow-2: 0 2px 8px rgba(17,17,18,.05);
  --pv-shadow-3: 0 2px 6px rgba(0,0,0,.07);
  --pv-shadow-accent: 0 2px 6px rgba(255,106,31,.3);

  /* Raios */
  --pv-r-sm: 7px;
  --pv-r-md: 9px;
  --pv-r-lg: 12px;
  --pv-r-pill: 999px;

  /* Layout */
  --pv-rail-w: 56px;
  --pv-gap: 7px;

  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  line-height: 1.32;
  color: var(--pv-ink);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Layout específico do Painel Geral (não afeta /financeiro).
   ============================================================ */
#painel-visual {
  background: var(--pv-bg);
  /* Altura fixa = viewport. Sem scroll do body — as 2 metades dividem 50/50 o restante. */
  height: 100vh;
  overflow: hidden;
  padding: var(--pv-gap);
  display: flex;
  gap: var(--pv-gap);
  box-sizing: border-box;
}
#painel-visual *, #painel-visual *::before, #painel-visual *::after { box-sizing: border-box; }
body:has(#painel-visual) { margin: 0; background: var(--pv-bg); }

/* ============================================================
   Rail lateral — 56px sticky
   ============================================================ */
.pv-rail {
  width: var(--pv-rail-w);
  flex: 0 0 var(--pv-rail-w);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 0;
  position: sticky;
  top: var(--pv-gap);
  height: calc(100vh - var(--pv-gap) * 2);
  box-shadow: var(--pv-shadow-2);
}
.pv-rail-logo {
  width: 30px; height: 30px;
  border-radius: var(--pv-r-md);
  background: var(--pv-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 7px;
  color: #fff;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.pv-rail-icon {
  width: 32px; height: 32px;
  border-radius: var(--pv-r-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--pv-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.pv-rail-icon:hover { background: var(--pv-surface-3); color: var(--pv-ink); }
.pv-rail-icon.active {
  background: var(--pv-ink);
  color: var(--pv-accent);
}
.pv-rail-icon svg { width: 13px; height: 13px; }
.pv-rail-spacer { flex: 1; }
.pv-rail-avatar {
  width: 30px; height: 30px;
  border-radius: var(--pv-r-md);
  background: var(--pv-surface-3);
  color: var(--pv-ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   Main container
   ============================================================ */
.pv-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pv-gap);
  overflow: hidden;
}

/* Header topo sticky */
.pv-topbar {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-lg);
  padding: 8px 10px;
  display: flex; align-items: center; gap: 5px;
  box-shadow: var(--pv-shadow-2);
  position: sticky;
  top: var(--pv-gap);
  z-index: 6;
}
.pv-brand {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--pv-muted-3);
  margin: 0 8px 0 3px;
}
.pv-tabs-inline {
  display: flex; gap: 2px;
}
.pv-tab-inline {
  padding: 5px 9px;
  border-radius: 8px;
  color: var(--pv-ink-3);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.pv-tab-inline:hover { background: var(--pv-surface-3); color: var(--pv-ink); }
.pv-tab-inline[aria-selected="true"] {
  background: var(--pv-ink);
  color: #fff;
  font-weight: 600;
}
.pv-topbar-spacer { flex: 1; }

/* ============================================================
   Título + subtítulo
   ============================================================ */
.pv-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 2px 4px 0 4px;
}
.pv-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.pv-subtitle {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--pv-muted-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   KPIs (US6) — barra 4 cards horizontais grudados
   ============================================================ */
.pv-kpis {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-lg);
  display: flex;
  align-items: stretch;
  box-shadow: var(--pv-shadow-1);
  overflow: hidden;
}
.pv-kpi {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: default;
  border-left: 1px solid var(--pv-divider);
  transition: background .12s;
}
.pv-kpi:first-child { border-left: none; box-shadow: inset 3px 0 0 var(--pv-accent); }
.pv-kpi[data-kpi="pagar"]:hover     { background: var(--pv-accent-soft); }
.pv-kpi[data-kpi="responder"]:hover { background: var(--pv-danger-soft); }
.pv-kpi[data-kpi="aguardar"]:hover  { background: var(--pv-surface-2); }
.pv-kpi[data-kpi="aprovados"]:hover { background: var(--pv-success-soft); }
.pv-kpi-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--pv-ink);
}
.pv-kpi[data-kpi="pagar"]     .pv-kpi-num { color: var(--pv-accent-dark); }
.pv-kpi[data-kpi="responder"] .pv-kpi-num { color: var(--pv-danger); }
.pv-kpi[data-kpi="aprovados"] .pv-kpi-num { color: var(--pv-success); }
.pv-kpi-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.pv-kpi-label b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pv-ink);
}
.pv-kpi[data-kpi="aguardar"] .pv-kpi-label b { color: var(--pv-ink-3); }
.pv-kpi-hint {
  font-size: 11px;
  color: var(--pv-muted-2);
}
.pv-kpi-hint.alerta {
  color: var(--pv-accent-dark);
  font-weight: 600;
}

/* ============================================================
   Kanban — 2 metades verticais
   ============================================================ */
.pv-metade {
  display: flex;
  gap: var(--pv-gap);
  overflow-x: auto;
  overflow-y: hidden;
  /* 50/50 REAL do espaço remanescente do main (após topbar/título/KPIs).
     min-height:0 e flex-basis:0 forçam a divisão exata mesmo com conteúdo grande. */
  flex: 1 1 0;
  min-height: 0;
}

/* ============================================================
   Coluna
   ============================================================ */
.pv-coluna {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 232px;
  max-width: 260px;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--pv-shadow-2);
  position: relative;
}
.pv-coluna::before {
  /* barra vertical de sinalização (accent) — só nas colunas fixas ativas */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
}
.pv-coluna[data-tipo="pagar"]::before      { width: 3px; background: var(--pv-accent); }
.pv-coluna[data-tipo="responder"]::before  { width: 3px; background: var(--pv-danger); }
.pv-coluna[data-tipo="aguardar"]::before   { width: 3px; background: var(--pv-muted-3); }
.pv-coluna[data-tipo="finalizado"]::before { width: 3px; background: var(--pv-success); }
.pv-coluna[data-tipo="adm"]::before        { width: 3px; background: var(--pv-ink); }
.pv-coluna[data-tipo="nao_atribuido"]::before { width: 3px; background: var(--pv-muted-3); }

.pv-coluna-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 8px 15px;
  border-bottom: 1px solid var(--pv-divider);
}
.pv-coluna-titulo {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pv-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-coluna-count {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--pv-muted-2);
  padding: 2px 7px;
  background: var(--pv-surface-3);
  border-radius: var(--pv-r-pill);
  margin-left: 8px;
  flex: 0 0 auto;
}

.pv-cards {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}
.pv-cards::-webkit-scrollbar { width: 6px; }
.pv-cards::-webkit-scrollbar-thumb { background: var(--pv-border); border-radius: 3px; }
.pv-vazio {
  color: var(--pv-muted-3);
  font-size: 11px;
  padding: 8px 4px;
  text-align: center;
}

/* ============================================================
   Card
   ============================================================ */
.pv-card {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-md);
  padding: 8px 10px;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s, transform .12s;
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--pv-muted-3);
}
.pv-card:hover {
  box-shadow: var(--pv-shadow-3);
  border-color: var(--pv-ink);
}
.pv-card-topo {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pv-card-titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pv-ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.pv-card-protocolo {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--pv-muted-2);
  margin-bottom: 6px;
}
.pv-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Pill de Ação (destaque) */
.pv-pill-acao {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--pv-r-pill);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pv-pill-acao-Pagar      { background: var(--pv-accent); color: var(--pv-accent-ink); }
.pv-pill-acao-Responder  { background: var(--pv-danger); color: #fff; }
.pv-pill-acao-Aguardar   { background: var(--pv-surface-3); color: var(--pv-ink-3); }
.pv-pill-acao-Finalizado { background: var(--pv-success); color: #fff; }

/* Badge de tag (secundário) */
.pv-badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--pv-r-pill);
  font-size: 10px;
  font-weight: 500;
  background: var(--pv-surface-3);
  color: var(--pv-ink-3);
  white-space: nowrap;
}

.pv-card-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--pv-muted-2);
}
.pv-dias {
  color: var(--pv-muted-2);
  white-space: nowrap;
}
.pv-dias-alerta { color: var(--pv-accent-dark); font-weight: 600; }

/* ============================================================
   Paginação (setas em hover)
   ============================================================ */
.pv-paginacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--pv-divider);
  opacity: 0;
  transition: opacity .12s;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--pv-muted-2);
  background: var(--pv-surface-2);
}
.pv-coluna:hover .pv-paginacao { opacity: 1; }
.pv-paginacao button {
  background: transparent;
  border: 1px solid var(--pv-border);
  padding: 3px 8px;
  border-radius: var(--pv-r-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--pv-ink-3);
  transition: background .12s, border-color .12s, color .12s;
}
.pv-paginacao button:hover:not(:disabled) {
  background: var(--pv-ink);
  color: #fff;
  border-color: var(--pv-ink);
}
.pv-paginacao button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ============================================================
   Estado (loading / erro)
   ============================================================ */
.pv-loading, .pv-erro {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 14px;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  font-size: 13px;
  color: var(--pv-ink-3);
  z-index: 10000;
}
.pv-erro {
  background: #2a1215;
  color: #ff8a80;
  border-color: #5c2b2e;
}

/* ============================================================
   Fontes Geist (via Google Fonts — link no HTML)
   Fallback graceful se offline: system-ui.
   ============================================================ */