/* styles.css — Agente Tef.Net (PRD-TECNICA-0004 / TASK-0002 / UI#5-M)
 * Design tokens, layout grid (sidebar + main + bottom-nav mobile),
 * responsivo, prefers-reduced-motion, focus-visible.
 */

/* ============ TOKENS ============ */
/* UI#7-M (06/05/2026 turno noite): tema light alinhado newportaltefnet (Bootstrap 3).
 * Substituiu o dark-mode original do UI#5-M. Estrutura/grid permanece. */
:root {
  /* paleta light — espelha newportaltefnet Bootstrap 3 */
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #e2e2e2;        /* sidebar */
  --border: #dddddd;
  --border-strong: #cccccc;

  --text: #333333;
  --text-muted: #777777;
  --text-subtle: #999999;
  --text-inverse: #ffffff;

  --accent: #337ab7;            /* primary Bootstrap 3 */
  --accent-hover: #286090;
  --accent-darker: #204d74;
  --ok: #5cb85c;
  --warn: #f0ad4e;
  --rejected: #d9534f;
  --partial: #f0ad4e;

  /* Cores semânticas extras pro dashboard v2 (REL#2) */
  --premium: #337ab7;
  --premium-soft: #d9e6f5;
  --standard: #777777;
  --standard-soft: #e7e7e7;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);

  /* UI#49 (13/05/2026 madrugada): App Shell refactor — header 84px + sidebar
   * 253px (+15% vs legado 72/220). Aliases --app-* expostos pro mockup canônico
   * de UI#49 e pra futuras telas que queiram consumir variáveis "App Shell"
   * (em vez de --header-h, que é genérico e hoje é o mesmo valor).
   * Mudança visual: header acomoda futura barra de informação central +
   * brand maior; sidebar ganha espaço pra labels em 2 linhas. */
  --header-h: 84px;
  --app-header-h: 84px;
  --sidebar-w: 253px;
  --app-sidebar-w: 253px;
  --sidebar-w-collapsed: 64px;
  --bottom-nav-h: 64px;
  --footer-h: 32px;
  --app-footer-h: 32px;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
  --font-base: 14px;
  --line-base: 1.5;

  /* DOC#9 — Glass Banking tokens (paleta Tef.Net Brand)
   * Aplicados inicialmente no Dashboard (tela piloto). Outras telas migram em onda 2. */
  --gl-surface: rgba(255,255,255,.72);
  --gl-surface-strong: rgba(255,255,255,.85);
  --gl-border: rgba(255,255,255,.55);
  --gl-blur: blur(22px) saturate(180%);
  --gl-radius: 18px;
  --gl-radius-sm: 14px;
  --gl-shadow-sm: 0 6px 18px -8px rgba(10,14,39,.18);
  --gl-shadow-md: 0 10px 30px -12px rgba(10,14,39,.16);
  --gl-shadow-lg: 0 18px 44px -16px rgba(10,14,39,.22);
  --gl-brand: #337ab7;
  --gl-brand-light: #4c9aff;
  --gl-brand-deep: #1e6091;
  --gl-brand-pale: #eff6ff;
  --gl-mesh:
    radial-gradient(at 12% 18%, rgba(76,154,255,.55) 0, transparent 45%),
    radial-gradient(at 88% 12%, rgba(96,165,250,.45) 0, transparent 45%),
    radial-gradient(at 70% 95%, rgba(56,189,248,.55) 0, transparent 50%),
    radial-gradient(at 18% 92%, rgba(51,122,183,.45) 0, transparent 50%),
    linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);

  /* ============================================================================
   * DOC#9 — design tokens canonicos (glass banking + tef.net brand)
   * Camada `--ag-*` — alias dos legados + tokens novos (spacing, status).
   * Decisao: D-DOC9-TEC-01 (docs/PRDs/PRD-0009-design-system/decisoes-tecnicas.md).
   * Coexiste com `--accent`, `--surface`, `--gl-*`. NAO remover legados nesta onda.
   * ============================================================================ */

  /* Brand */
  --ag-brand: var(--gl-brand, #337ab7);
  --ag-brand-soft: var(--gl-brand-light, #4c9aff);
  --ag-brand-deep: var(--gl-brand-deep, #1e6091);
  --ag-brand-glass: rgba(51, 122, 183, 0.15);

  /* Status semanticos */
  --ag-success: #4caf7d;
  --ag-warn: #f0b94e;
  --ag-alert: #e57373;
  --ag-info: #64b5f6;

  /* F7-UI (12/05/2026 — Variante A) — Status de resgate por competencia
     no heatmap UI#30 V5. Valores deliberadamente mais saturados que os
     legados acima pra dar contraste suficiente em borda 2px sobre fundo
     teal-l1..l4. */
  --ag-status-resgate-nenhum:       #ef4444; /* red-500   — 0 lotes ativos */
  --ag-status-resgate-em-andamento: #f59e0b; /* amber-500 — algum nao liquidado */
  --ag-status-resgate-todos-pagos:  #16a34a; /* green-600 — todos liquidados */
  --ag-status-resgate-sem-dado:     #cbd5e1; /* slate-300 — competencia sem valor */
  --ag-status-resgate-disponivel:   #2563eb; /* blue-600  — B#31 badge "Disponivel para resgate" */

  /* Surface (alias dos legados + camada glass) */
  --ag-bg: var(--bg, #f5f5f5);
  --ag-bg-elev: var(--surface-2, #fafafa);
  --ag-bg-glass: var(--gl-surface, rgba(255, 255, 255, 0.72));
  --ag-border: var(--border, #dddddd);
  --ag-border-glass: var(--gl-border, rgba(51, 122, 183, 0.18));

  /* Text */
  --ag-text: var(--text, #333333);
  --ag-text-muted: var(--text-muted, #777777);
  --ag-text-on-brand: #ffffff;

  /* Effects */
  --ag-blur-glass: var(--gl-blur, blur(12px) saturate(180%));
  --ag-shadow-glass: var(--gl-shadow-md, 0 8px 32px rgba(31, 38, 135, 0.12));
  --ag-radius-sm: var(--radius-sm, 4px);
  --ag-radius-md: var(--radius, 6px);
  --ag-radius-lg: var(--radius-lg, 8px);

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32) */
  --ag-spc-1: 4px;
  --ag-spc-2: 8px;
  --ag-spc-3: 12px;
  --ag-spc-4: 16px;
  --ag-spc-5: 24px;
  --ag-spc-6: 32px;
}

/* DOC#9 — override dark (alvo futuro pro tema unificado).
 * Hoje so `.glass-dark` em pontos especificos do dashboard. */
[data-theme="dark"] {
  --ag-bg: #0b1220;
  --ag-bg-elev: #0f1d33;
  --ag-bg-glass: rgba(20, 30, 50, 0.72);
  --ag-border: rgba(100, 181, 246, 0.18);
  --ag-border-glass: rgba(100, 181, 246, 0.18);
  --ag-text: #e2e8f0;
  --ag-text-muted: #94a3b8;
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--font-base)/var(--line-base) var(--font-sans);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ============ A11Y ============ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--accent);
  color: var(--text-inverse);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  z-index: 9999;
}
.skip-link:focus { top: 8px; color: var(--text-inverse); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ LAYOUT GRID ============
 * UI#49 (13/05/2026 madrugada): App Shell refactor — replica grid do mockup
 * docs/mockups/UI-0049-layout-app-shell.html. Decisão dura:
 *   - body é container grid: html/body 100vh + overflow:hidden;
 *   - sidebar OCUPA AS LINHAS 2 e 3 (vai até o footer-row), header e footer
 *     em linhas próprias;
 *   - SCROLL INDEPENDENTE: só .app-main e .app-sidebar têm overflow-y:auto;
 *     header e footer ficam fixos por natureza (grid + body overflow:hidden);
 *   - header/sidebar NÃO precisam mais de position:fixed/sticky (B#12 antigo
 *     virou obsoleto — o grid + body overflow:hidden faz o serviço).
 *
 * Grid-template-areas:
 *   header  header
 *   sidebar main
 *   sidebar footer
 *
 * Footer fica ao lado da sidebar (alinha visual com o mockup). Se desejar
 * footer full-width no futuro, basta trocar a área pra "footer footer".
 */
html, body { height: 100vh; }
body {
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
  grid-template-columns: var(--app-sidebar-w, var(--sidebar-w)) 1fr;
  grid-template-rows: var(--app-header-h, var(--header-h)) 1fr var(--app-footer-h, var(--footer-h));
}

/* ============================================================================
 * UI#55 — modo "pré-app": a tela de login e a tela de escolher parceiro
 * ocupam a janela inteira. O JS (app.js → setPreApp) adiciona/remove a classe
 * body.pre-app. Colapsa o grid do shell para uma célula só e esconde
 * header/sidebar/rodapé enquanto o usuário ainda não está dentro do painel.
 * ============================================================================ */
body.pre-app {
  grid-template-areas: "main";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
body.pre-app .app-header,
body.pre-app .app-sidebar,
body.pre-app .app-footer { display: none; }
body.pre-app .app-main {
  grid-area: main;
  padding: 0;
  overflow-y: auto;
}

.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  /* Padding interno mais generoso pra acomodar brand maior + futura barra de info */
  padding: 0 24px;
  gap: 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  /* Altura controlada pelo grid (--app-header-h). Sem position:fixed porque
     o body overflow:hidden + grid faz o header ficar naturalmente fixo. */
  height: var(--app-header-h, var(--header-h));
  z-index: 10;
}
/* Brand maior (UI#49 → ampliado 21/05 a pedido do dono) */
.brand { display: inline-flex; align-items: center; gap: 12px; }
/* Logo maior. O margin-block negativo (-2px topo / -22px base) faz a
   margin-box envolver só o conteúdo VISÍVEL do PNG 800x800 da marca (que
   tem ~2px de vazio no topo e ~22px na base quando renderizado a 72px) —
   assim a logo centraliza certinho no eixo vertical do header. */
.brand img { height: 72px; width: auto; margin-block: -2px -22px; }
/* UI#55 — slogan da marca ao lado da logo no header. O "Painel do Agente"
   foi removido a pedido do dono (21/05); o slogan ficou 30% maior. */
.brand-slogan {
  font-size: 18px; font-weight: 600; color: #337ab7; white-space: nowrap;
  position: relative; top: 12px;   /* baixa o slogan (pedido do dono 21/05) */
}
@media (max-width: 1180px) { .brand-slogan { display: none; } }
/* Espaço central reservado pra futura barra de informação (placeholder no
 * shell — preenchido em entregas posteriores). Hoje fica vazio, ocupa o
 * espaço entre brand e header-nav. */
.app-header > .header-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; }
.header-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.header-link:hover { color: var(--text); background: var(--surface-2); }
/* B#41: versão do manual abaixo do label "Manual" — mesma cor herdada, menor. */
.header-link-stack { display: inline-flex; flex-direction: column; line-height: 1.05; align-items: flex-start; }
.header-link-label { line-height: 1.1; }
.header-link-version { font-size: 0.7em; font-weight: 400; opacity: 0.75; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 1px; }
.header-link-version:empty { display: none; }
.user-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.user-menu:hover { background: var(--surface-3); }
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ok));
  display: inline-block;
}
.user-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
 * UI#58 — Menu lateral (sidebar) — direção Glass (21/05/2026)
 * Sidebar azul em gradiente; item ativo = cartão azul-claro elevado.
 * ============================================================================ */
.app-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1e6091 0%, #2b6fa8 100%);
  border-right: 1px solid rgba(255,255,255,0.10);
  /* UI#49: scroll independente — sidebar pode rolar sem afetar header/main */
  overflow-y: auto;
  overflow-x: hidden;
  /* z-index:50 mantido caso algum overlay (modal/toast) calcule ordem. */
  z-index: 50;
  position: relative;
}
/* mesh sutil de luz sobre o azul */
.app-sidebar::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(at 50% 0%, rgba(255,255,255,0.13) 0, transparent 45%),
    radial-gradient(at 85% 100%, rgba(56,189,248,0.16) 0, transparent 55%);
}
.app-sidebar > * { position: relative; z-index: 1; }
.app-sidebar nav { display: flex; flex-direction: column; gap: 0; flex: 1; padding: 6px 0; }

/* === NAV ITEM (UI#49) ===
 * Comporta ícone + label (até 2 linhas) + `?` inline.
 *
 * Regras duras (mockup UI#49):
 *   - flex-wrap:nowrap — ícone e `?` NUNCA quebram de linha; só o label;
 *   - min-height:44px — alinha visualmente items de 1 e 2 linhas (acessível:
 *     touch target ≥44px);
 *   - NÃO usar white-space:nowrap nem text-overflow:ellipsis: regra antiga
 *     (memória 18 do CLAUDE.md "Sidebar labels ≤ 22 chars") fica obsoleta —
 *     labels longos ("Histórico de lotes") aparecem em 2 linhas via line-clamp.
 *
 * Layout interno do <a class="nav-item">:
 *   [icon]  [nav-label (até 2 linhas)]  [help-trigger ?]
 */
.nav-item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 11px 14px;
  margin: 0 10px 5px;
  border-radius: 10px;
  min-height: 44px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  position: relative;
}
/* B#33 (22/05/2026) — hover com destaque real. O realce antigo
 * (rgba(255,255,255,.12), sem troca de cor de texto) sumia sob o mesh de luz
 * do topo da sidebar. Agora: leve clareada translúcida + barra azul-clara de
 * 6px na borda esquerda (box-shadow inset) — sinal inequívoco de "item sob o
 * cursor". `:not(.active)` garante que o item ativo nunca reaja ao hover.
 * O `color` é REDECLARADO de propósito: o `.nav-item` é um <a>, e a regra
 * global `a:hover` (linha ~169, color: var(--accent-hover)) tem especificidade
 * maior que a cor-base do `.nav-item` — sem esta linha o nome e o ícone
 * escureceriam no hover. Mantém o branco, igual ao estado sem hover. */
.nav-item:not(.active):hover {
  background: rgba(255,255,255,0.10);
  box-shadow: inset 6px 0 0 0 #9ecbf0;
  color: rgba(255,255,255,0.85);
}
/* B#33 (smoke do dono, 22/05/2026) — outline de foco do item da sidebar
 * escurecido 30%. O `:focus-visible` global (linha ~183) desenha um contorno
 * de 2px var(--accent) #337ab7 ao redor do item inteiro ao receber foco; o
 * dono pediu esse contorno mais escuro. #337ab7 com cada canal RGB x0,70 =
 * #245580. Escopo restrito à sidebar — o foco do resto do app não muda. */
.nav-item:focus-visible { outline-color: #245580; }
/* item ativo — cartão azul-claro elevado (decisão do dono, UI#58) */
.nav-item.active {
  background: #eaf3fb;
  color: #1f6aa8;
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.18);
}
.nav-item [class^="icon-"] {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.80);
}
.nav-item.active [class^="icon-"] { color: #337ab7; }
/* Label da sidebar — pode quebrar em ATÉ 2 linhas via -webkit-line-clamp.
 * NÃO usar ellipsis — perde info. Se a label for ainda maior, vai mostrar
 * 2 linhas truncadas e o tooltip do `?` complementa.
 * line-height:1.25 + 2 linhas + font-size:14px = ~35px de altura útil,
 * cabe no min-height:44px do nav-item (com padding vertical 10px). */
.nav-item .nav-label {
  flex: 1;
  min-width: 0; /* permite quebrar em flex container */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  word-break: break-word;
  white-space: normal;
  font-size: 14px;
}
/* Help-trigger (?) injetado pelo manual/src/trigger.js — inline depois do label.
 * Crítico (UI#49): display:inline-flex (não block), flex-shrink:0, tamanho fixo.
 * Em outros lugares do app o `?` é inserido como sibling do <a> (fora do nav-item)
 * — pra sidebar, trigger.js detecta `<a class="nav-item">` e insere DENTRO do <a>
 * (depois do .nav-label). Click no `?` é interceptado pelo trigger.js com
 * preventDefault+stopPropagation, então a navegação do <a> não dispara. */
.nav-item .help-trigger {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-item .help-trigger:hover {
  background: rgba(255,255,255,0.32);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
/* no item ativo (cartão claro) o "?" inverte pra azul */
.nav-item.active .help-trigger {
  background: #dceaf6;
  color: #337ab7;
  border-color: #c2d9ec;
}
/* Mantém compatibilidade com regra genérica antiga ([data-help] + .help-trigger)
 * que não se aplica mais em sidebar (`?` agora vive DENTRO do <a class="nav-item">),
 * mas continua valendo pra KPIs/labels fora da sidebar. */
.nav-item .nav-label + .help-trigger {
  margin-left: 2px;
}

/* ============================================================================
 * UI#11-M — Sidebar recolhível
 * ============================================================================ */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-cap {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.sidebar-toggle {
  width: 28px;
  height: 28px;
  margin-left: auto;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.30); border-color: rgba(255,255,255,0.5); }
.sidebar-toggle-icon { display: inline-block; transition: transform 0.2s; }

/* Estado colapsado: largura mínima, esconde labels/(?)/rótulos, centraliza ícones */
body.sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
  --app-sidebar-w: var(--sidebar-w-collapsed);
}
body.sidebar-collapsed .sidebar-header { justify-content: center; }
body.sidebar-collapsed .sidebar-cap { display: none; }
body.sidebar-collapsed .sidebar-toggle { margin: 0 auto; }
body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 11px 0;
  margin: 0 12px 6px;
  gap: 0;
}
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-item .help-trigger { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }

/* UI#58 — rodapé do sidebar: avatar + usuário + versão */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.92);
  color: #1f6aa8;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}
.sidebar-user {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sidebar-user-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-sub { font-size: 10px; color: rgba(255,255,255,0.65); }
.sidebar-version {
  font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 4px 0 8px;
}
body.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 11px 0; }
body.sidebar-collapsed .sidebar-user,
body.sidebar-collapsed .sidebar-version { display: none; }

.app-main {
  grid-area: main;
  padding: 20px 24px;
  /* UI#49: SCROLL INDEPENDENTE — só esse container rola; header/sidebar/footer
     ficam fixos via grid + body overflow:hidden. min-height:0 (não auto) é
     necessário pra que o overflow funcione dentro do grid row 1fr. */
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  /* UI#58 (smoke) — `position:relative; z-index:1` faz o .app-main virar um
     stacking context próprio: TODO o conteúdo de página (cards, dropdowns
     internos como .comp-list/.seletor-comp-card que têm z-index 20~100) fica
     CONTIDO nesta camada z=1, abaixo do header (z=10). Sem isto, o
     .seletor-comp-card (z=20) competia direto no contexto raiz e cobria o
     dropdown de parceiros aberto a partir do header (bug "dropdown por baixo").
     Modais/toasts não são afetados — vivem fora do .app-main (#modal-region /
     #toast-region são filhos do <body>). */
  position: relative;
  z-index: 1;
}

.app-footer {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-subtle);
}

/* ============ ICONES (mascaras CSS sobre SVG) ============ */
[class^="icon-"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}
.icon-home { -webkit-mask-image: url(assets/icons/home.svg); mask-image: url(assets/icons/home.svg); }
.icon-list { -webkit-mask-image: url(assets/icons/list.svg); mask-image: url(assets/icons/list.svg); }
.icon-user { -webkit-mask-image: url(assets/icons/user.svg); mask-image: url(assets/icons/user.svg); }
.icon-book { -webkit-mask-image: url(assets/icons/book.svg); mask-image: url(assets/icons/book.svg); }
/* UI#58 — ícones da seção DEV (substituem os emojis 📊 🗂️) */
.icon-database { -webkit-mask-image: url(assets/icons/database.svg); mask-image: url(assets/icons/database.svg); }
.icon-folder { -webkit-mask-image: url(assets/icons/folder.svg); mask-image: url(assets/icons/folder.svg); }

/* ============ LOADING / SPINNER ============ */
.loading-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ COMPONENTES BASE ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { color: var(--rejected); border-color: rgba(239,68,68,0.4); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.1); }

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
/* Label inline pra que o help-trigger sibling fique colado, sem quebrar linha */
.kpi-card .kpi-label { display: inline; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card .help-trigger { vertical-align: baseline; }
.kpi-card .kpi-value { display: block; font-size: 24px; font-weight: 700; margin-top: 6px; }
.kpi-card .kpi-trend { display: block; font-size: 12px; margin-top: 4px; color: var(--text-subtle); }

/* DOC#9 — KPI piloto com icone Phosphor (opt-in via prop `icon`).
 * Mantem compat: sem `icon`, layout identico ao legado.
 * Decisao: D-DOC9-TEC-03 (ver docs/PRDs/PRD-0009-design-system/decisoes-tecnicas.md). */
.kpi-card--with-icon {
  position: relative;
  padding-right: 52px;
}
.kpi-card--with-icon .kpi-ico {
  position: absolute;
  top: var(--ag-spc-3);
  right: var(--ag-spc-3);
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--ag-radius-md);
  background: linear-gradient(135deg, var(--ag-brand) 0%, var(--ag-brand-soft) 100%);
  color: var(--ag-text-on-brand);
  box-shadow: 0 6px 14px -6px var(--ag-brand-glass);
}
.kpi-card--with-icon .kpi-ico i { font-size: 17px; line-height: 1; }
/* Quando o KPI piloto carrega [hidden], anula display do grid (regra do projeto:
 * feedback_hidden_attr_vs_display_flex.md). Aqui usamos display:inline-grid,
 * entao [hidden] precisa de !important pra cancelar. */
.kpi-card--with-icon .kpi-ico[hidden] { display: none !important; }

/* Tabela */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.data-table thead { background: var(--surface-2); }
.data-table th, .data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.data-table th { font-weight: 600; color: var(--text-muted); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* Badge */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.badge-disponivel { background: rgba(76,154,255,0.12); color: var(--accent); border-color: rgba(76,154,255,0.3); }
.badge-em_lote   { background: rgba(245,158,11,0.12); color: var(--warn); border-color: rgba(245,158,11,0.3); }
.badge-estornado { background: rgba(239,68,68,0.12); color: var(--rejected); border-color: rgba(239,68,68,0.3); }
.badge-aberto    { background: rgba(76,154,255,0.12); color: var(--accent); border-color: rgba(76,154,255,0.3); }
/* RES#2 Sprint B (10/05/2026) — novos estados de lote (Migration 035). */
.badge-pendente_aprovacao   { background: rgba(245,158,11,0.14); color: var(--warn); border-color: rgba(245,158,11,0.4); }
.badge-aguardando_pagamento { background: rgba(76,154,255,0.12); color: var(--accent); border-color: rgba(76,154,255,0.3); }
.badge-aprovado_parcial     { background: rgba(192,132,252,0.16); color: #6b21a8; border-color: rgba(192,132,252,0.4); }
.badge-pago                 { background: rgba(34,197,94,0.12); color: var(--ok); border-color: rgba(34,197,94,0.3); }
.badge-reprovado_tef_net    { background: rgba(239,68,68,0.16); color: var(--rejected); border-color: rgba(239,68,68,0.5); cursor: help; }
.badge-reprovado_tef_net:focus { outline: 2px solid var(--rejected); outline-offset: 2px; }

/* Skeleton (loading placeholder) */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s infinite linear;
  display: inline-block;
}
.skeleton-line { height: 14px; width: 100%; margin: 4px 0; }
.skeleton-block { height: 80px; width: 100%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted);
}
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s;
}
.form-control:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(76,154,255,0.18); }
.form-control:disabled { background: var(--surface-2); color: var(--text-subtle); cursor: not-allowed; }
.form-help { font-size: 12px; color: var(--text-subtle); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--rejected); margin-top: 4px; }

/* RES#2 R5 — span read-only do bloco "Dados bancários (resgate)" do perfil.
   Visual igual a `.form-control:disabled`, mas semanticamente NÃO é input
   editável (não há ataque de change/submit). */
.readonly-value {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  min-height: 1.5em;
  word-break: break-all;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* Page heading */
.page-header { margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.page-subtitle { color: var(--text-muted); margin: 0; }
.page-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

/* ============ TOAST ============ */
.toast-region {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  max-width: 360px;
  font-size: 13.5px;
  animation: toast-in 0.2s ease-out;
}
.toast-success { border-left: 3px solid var(--ok); }
.toast-error { border-left: 3px solid var(--rejected); }
.toast-info { border-left: 3px solid var(--accent); }
.toast-warn { border-left: 3px solid var(--warn); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============ MODAL ============ */
.modal-region:not([aria-hidden="false"]) { display: none; }
.modal-region[aria-hidden="false"] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  padding: 16px;
  animation: modal-in 0.18s ease-out;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* ============ ERROR / EMPTY / RESTRITO ============ */
.empty-card, .error-card, .restricted-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  max-width: 480px;
  margin: 32px auto;
}
.empty-card .icon, .error-card .icon, .restricted-card .icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
.empty-card h3, .error-card h3, .restricted-card h3 { margin: 0 0 8px; }
.empty-card p, .error-card p, .restricted-card p { color: var(--text-muted); margin: 0 0 16px; }

/* ============ RESPONSIVO MOBILE ============ */
@media (max-width: 768px) {
  body {
    grid-template-areas:
      "header"
      "main"
      "bottom-nav";
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr var(--bottom-nav-h);
  }
  .app-sidebar {
    grid-area: bottom-nav;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
  }
  /* UI#58 — em bottom-nav o mesh radial não faz sentido; mantém só o azul */
  .app-sidebar::before { display: none; }
  .app-sidebar nav { flex-direction: row; justify-content: space-around; gap: 0; padding: 0 !important; }
  .nav-item { flex: 1; flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; font-size: 11px; min-height: auto; margin: 0; }
  .nav-item.active { box-shadow: none; border-radius: 0; }
  /* B#33 — em bottom-nav (tabs horizontais) a barra lateral esquerda do hover
     não faz sentido; cancela o box-shadow inset herdado do desktop. */
  .nav-item:not(.active):hover { box-shadow: none; }
  /* Em bottom-nav mobile o label volta a ser inline-flex 1 linha
     (cancelando o -webkit-box de UI#49 desktop). Texto curto + ícone empilhado. */
  .nav-item .nav-label { font-size: 11px; display: inline-flex; -webkit-line-clamp: initial; -webkit-box-orient: initial; line-height: 1.2; }
  /* Toggle/header de colapsar é desktop-only — em mobile sidebar já é bottom-nav */
  .sidebar-header { display: none; }
  /* UI#58 — rótulos de seção e rodapé não cabem no bottom-nav */
  .nav-section-header, .sidebar-footer, .sidebar-version { display: none; }
  /* Anula estado colapsado em mobile (sidebar vira bottom-nav full-width) */
  body.sidebar-collapsed .nav-label { display: inline-flex; }
  body.sidebar-collapsed .nav-item { justify-content: center; padding: 8px 4px; gap: 4px; }
  .app-footer { display: none; }
  .app-main { padding: 16px; padding-bottom: calc(var(--bottom-nav-h) + 16px); }
  .user-name { display: none; }
  /* tabela vira lista de cards */
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border-bottom: 1px solid var(--border); padding: 12px 0; }
  .data-table td { border: none; padding: 4px 14px; }
  .data-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text-muted); }
}

/* ============ UTILIDADES ============ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.flex-row { display: flex; gap: 12px; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }
.flex-1 { flex: 1; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.hidden { display: none !important; }

/* ============================================================================
 * UI#7-M (06/05/2026 turno noite) — Dashboard v2 components
 * ============================================================================ */

/* Banner de competência (topo) */
.banner-comp {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  box-shadow: var(--shadow-md);
}
.banner-titulo { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; }
.banner-titulo small { display: block; font-size: 12px; opacity: 0.85; font-weight: 400; margin-top: 4px; }

/* Seletor de competência (dropdown checkbox) */
.seletor-comp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.seletor-comp-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.seletor-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 16px 18px;
}
/* UI#30 v0.7.42 (10/05/2026 noite — Lucas-Frontend + Júlia-UX):
   Layout 2 colunas — Competência fica compacta (220–320px) e Resgate Disponível
   ganha o espaço protagonista (3x maior). Coluna 3 "Em breve" removida.
   `minmax(220px, 320px)` evita esticar Competência demais em telas wide. */
.seletor-comp-grid-2col {
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}
.seletor-col { padding: 0 16px; min-width: 0; }
.seletor-col:first-child { padding-left: 0; }
.seletor-col:last-child { padding-right: 0; }
.seletor-col-divider { border-left: 1px solid var(--border); }
.seletor-col-placeholder { opacity: 0.7; }
/* Coluna 2 (Resgate) ganha respiro extra à esquerda do divider */
.seletor-col-resgate { padding-left: 20px; }

.seletor-comp-head-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.resgate-total-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: linear-gradient(135deg, var(--ok), #4cae4c);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius);
  line-height: 1.1;
  white-space: nowrap;
}
.resgate-total-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.9;
  font-weight: 700;
}
.resgate-total-valor { font-size: 14px; font-weight: 700; }

/* FIX A (10/05/2026 noite — Lucas-Frontend): wrapper das ações do head da
   coluna 2. Mantém o badge "Total" + botão "Limpar" alinhados em coluna,
   com o botão acima do badge e o conjunto colado à direita. */
.seletor-col-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* REL#6 — botão Panorama na legenda do heatmap */
.btn-panorama-rel {
  background: transparent;
  border: 1px solid #2b4a6e;
  color: var(--accent2, #5aa9ec);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: .15s;
}
.btn-panorama-rel:hover {
  background: rgba(91, 169, 236, 0.12);
  border-color: #5aa9ec;
}

.btn-limpar-mes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.10);
  border: 1.5px solid var(--rejected, #ef4444);
  color: var(--rejected, #ef4444);
  padding: 7px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.12);
}
.btn-limpar-mes:hover {
  background: var(--rejected, #ef4444);
  color: #fff;
  border-color: var(--rejected, #ef4444);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}
.btn-limpar-mes:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.20);
}

.meses-disponiveis-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* UI#30 v0.7.42 — sem max-height: agora que o bloco ocupa ~75% da largura
     e o grid v2b é 4×3 fixo, não precisa scroll vertical interno. */
}
.mes-disponivel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
}
.mes-disponivel:hover { background: rgba(51,122,183,0.08); border-color: var(--accent); }
.mes-disponivel.ativo {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-darker);
}
.mes-disponivel.ativo .mes-disponivel-valor { color: #fff; }
.mes-disponivel-label { font-weight: 600; text-transform: capitalize; }
.mes-disponivel-valor { color: var(--ok); font-weight: 700; font-size: 13px; }

@media (max-width: 900px) {
  .seletor-comp-grid,
  .seletor-comp-grid-2col { grid-template-columns: 1fr; }
  .seletor-col { padding: 16px 0; }
  .seletor-col-divider { border-left: 0; border-top: 1px solid var(--border); }
  .seletor-col-resgate { padding-left: 0; }
}
.comp-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 24px;
}
.comp-chip {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.2px;
  text-transform: capitalize;
  white-space: nowrap;
}
.comp-dropdown { position: relative; display: inline-block; }
.comp-trigger {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  min-width: 240px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-family: inherit;
}
.comp-trigger:hover { border-color: var(--accent); }
.comp-trigger .caret { color: var(--text-muted); margin-left: 12px; }
.comp-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  z-index: 100;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
}
.comp-list-actions {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  z-index: 1;
}
.comp-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.15s;
}
/* Limpar tudo (default) — vermelho no hover (ação destrutiva) */
.comp-action-btn:hover {
  background: var(--rejected);
  color: #fff;
  border-color: var(--rejected);
}
/* Selecionar tudo — azul brand no hover (ação construtiva) */
.comp-action-btn.comp-action-select:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.comp-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.comp-option:hover { background: var(--surface-2); }
.comp-option input { accent-color: var(--accent); cursor: pointer; }

/* Blocos de cards */
.bloco-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 24px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  display: inline-block;
}
.bloco-titulo-primary { border-bottom-color: var(--accent); }
.bloco-titulo-success { border-bottom-color: var(--ok); }
.bloco-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }

/* Grid 5 colunas (bloco gerencial) */
.kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}

/* Grid 4 colunas (bloco carteira após UI#32) */
.kpi-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}

/* Grid 3 colunas (bloco resgate após UI#33) */
.kpi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}

/* KPI Card v2 */
/* Card é block (não flex column) pra que .kpi-label fique inline com o
 * help-trigger que o módulo manual injeta como sibling. Senão o (?) vira
 * uma linha própria embaixo do label. */
.kpi-card-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  min-height: 120px;
}
.kpi-card-v2 > .kpi-label { display: inline; }
.kpi-card-v2 > .help-trigger { vertical-align: baseline; }
.kpi-card-v2 > .kpi-value,
.kpi-card-v2 > .kpi-sub,
.kpi-card-v2 > .kpi-duo {
  display: block;
}
.kpi-card-v2 .kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.kpi-card-v2 .kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 0;
  line-height: 1.1;
}
.kpi-card-v2 .kpi-value-primary { color: var(--accent); }
.kpi-card-v2 .kpi-value-success { color: var(--ok); }
.kpi-card-v2 .kpi-value-danger { color: var(--rejected); }
.kpi-card-v2 .kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}
.kpi-card-v2.kpi-card-pendente { opacity: 0.7; }

/* KPI Duo (2 valores num card só) */
.kpi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.kpi-duo-item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.kpi-duo-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.kpi-duo-value { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 2px; }
.kpi-duo-item.danger .kpi-duo-value { color: var(--rejected); }

/* Pills inline (Premium / Standard) */
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-right: 4px;
  vertical-align: middle;
}
.pill-premium { background: var(--premium-soft); color: var(--accent-darker); }
.pill-standard { background: var(--standard-soft); color: var(--text); }

/* Badge pendente */
.badge-pendente {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--text-muted);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 1100px) {
  .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .banner-comp { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 600px) {
  .kpi-grid-5 { grid-template-columns: 1fr; }
  .kpi-grid-4 { grid-template-columns: 1fr; }
  .kpi-grid-3 { grid-template-columns: 1fr; }
  .comp-trigger, .comp-list { min-width: 200px; }
}

/* ============================================================================
 * UI#7-M — Resumo geral da página de lotes (topo)
 * ============================================================================ */
.lotes-resumo-geral {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.lotes-resumo-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.lotes-resumo-item.lotes-resumo-provisao { border-left-color: var(--accent); }
.lotes-resumo-item.lotes-resumo-liberado { border-left-color: var(--accent); background: var(--surface-2, #f3f7fc); }
.lotes-resumo-item.lotes-resumo-pago { border-left-color: var(--ok); }
.lotes-resumo-item.lotes-resumo-aberto { border-left-color: var(--warn); }
.lotes-resumo-item.lotes-resumo-cliente-aberto { border-left-color: var(--danger, #d33); }
.lotes-resumo-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.lotes-resumo-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  line-height: 1.1;
}
.lotes-resumo-pago .lotes-resumo-valor { color: var(--ok); }
.lotes-resumo-aberto .lotes-resumo-valor { color: var(--warn); }
.lotes-resumo-cliente-aberto .lotes-resumo-valor { color: var(--danger, #d33); }

@media (max-width: 1300px) {
  .lotes-resumo-geral { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .lotes-resumo-geral { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
 * UI#7-M — Filtros por coluna (lotes)
 * ============================================================================ */
.filtros-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.filtro-col { display: flex; flex-direction: column; gap: 4px; }
.filtro-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.filtro-col-actions { justify-content: flex-end; }

/* ============================================================================
 * UI#7-M — Lotes agrupados por competência (visual de blocos destacados)
 * ============================================================================ */
.lotes-grupos { display: flex; flex-direction: column; gap: 16px; }
.lote-grupo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.lote-grupo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  z-index: 1;
}
.lote-grupo-head {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-darker) 100%);
  color: #fff;
  padding: 10px 18px 10px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
/* Some o marker default do <summary> */
.lote-grupo-head::-webkit-details-marker { display: none; }
.lote-grupo-head::marker { content: ''; }
.lote-grupo-head:hover { filter: brightness(1.05); }

/* Toggle ▸ / ▾ */
.lote-grupo-toggle {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  position: relative;
  flex-shrink: 0;
}
.lote-grupo-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid #fff;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}
.lote-grupo[open] .lote-grupo-toggle::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Bloco esquerdo do header: título + macros (Provisão + Liberado) */
.lote-grupo-titulo-bloco {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 auto;
  min-width: 0;
}
.lote-grupo-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lote-grupo-titulo::before {
  content: '📦';
  font-size: 14px;
}
/* Macros (Provisão · Liberado) — totais grandes da competência, ao lado do título */
.lote-grupo-macros {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.lote-grupo-total-macro {
  font-size: 14px;
  font-weight: 800;
}
.lote-grupo-resumo {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lote-grupo-resumo-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.lote-grupo-resumo-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  font-weight: 600;
}
.lote-grupo-total {
  font-size: 13px;
  font-weight: 700;
}
.lote-grupo-qtd {
  font-size: 12px;
  font-weight: 700;
}
.lote-grupo-body { padding: 0; background: var(--surface-2); }
.lote-grupo-body table { margin: 0; border: 0; background: transparent; }
.lote-grupo-body table thead { background: transparent; }
.lote-grupo-body table th {
  font-size: 10px;
  letter-spacing: 0.6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.lote-grupo-body table td {
  background: var(--surface);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.lote-grupo-body table tr:last-child td { border-bottom: 0; }

/* Em mobile, header e tabela colapsam pra leitura por linha */
@media (max-width: 600px) {
  .lote-grupo-titulo-bloco { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .lote-grupo-macros { padding-left: 0; border-left: 0; gap: 14px; }
  .lote-grupo-resumo { width: 100%; justify-content: space-between; }
  .lote-grupo-body table thead { display: none; }
  .lote-grupo-body table tbody tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .lote-grupo-body table td { display: flex; justify-content: space-between; padding: 4px 0; border: 0; }
  .lote-grupo-body table td::before {
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
  }
}

/* Sidebar: mobile vira bottom-nav — UI#58 mantém o azul Glass na faixa */
@media (max-width: 768px) {
  .app-sidebar { border-right: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .nav-item { padding: 8px 12px; flex-direction: column; gap: 4px; font-size: 11px; }
  .nav-item.active { background: #eaf3fb; box-shadow: none; border-radius: 0; }
  /* B#33 — bottom-nav: sem barra lateral de hover (ver media query acima). */
  .nav-item:not(.active):hover { box-shadow: none; }
}

/* ============================================================================
 * UI#10-M — Agent Switcher (impersonação no header, só pra interno Tef.Net)
 * ============================================================================ */
.agent-switcher { position: relative; }
.agent-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  max-width: 280px;
  transition: background 0.15s, border-color 0.15s;
}
.agent-switcher-trigger:hover { background: var(--surface-3); border-color: var(--accent); }
.agent-switcher-trigger[aria-expanded="true"] { border-color: var(--accent); }
.agent-switcher-icon { font-weight: 700; color: var(--accent); }
.agent-switcher-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.agent-switcher .caret { font-size: 10px; opacity: 0.6; }

.agent-switcher-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 320px;
  max-width: 380px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
/* CRÍTICO: a regra .agent-switcher-list { display: flex } acima sobrescreve o
   [hidden]{display:none} default do user agent. Sem essa regra abaixo, o JS
   faz list.hidden=true mas o CSS continua mostrando a lista. (Bug 07/05/2026) */
.agent-switcher-list[hidden] { display: none !important; }
.agent-switcher-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.agent-switcher-search .form-control { font-size: 13px; padding: 6px 10px; }
.agent-switcher-options {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 4px 0;
}
.agent-switcher-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 13px;
}
.agent-switcher-option:hover { background: var(--surface-2); }
.agent-switcher-option.selecionado {
  border-left-color: var(--accent);
  background: var(--surface-2);
  font-weight: 600;
}
.agent-switcher-option.inativo {
  color: var(--danger, #d33);
  border-left-color: var(--danger, #d33);
}
.agent-switcher-option.inativo .agent-switcher-option-meta { color: var(--danger, #d33); opacity: 0.85; }
.agent-switcher-option-nome { font-weight: 600; line-height: 1.2; }
.agent-switcher-option-meta { font-size: 11px; color: var(--text-muted); }
.agent-switcher-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.agent-switcher-actions {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}
.agent-switcher-clear {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.agent-switcher-clear:hover { border-color: var(--danger, #d33); color: var(--danger, #d33); }

@media (max-width: 700px) {
  .agent-switcher-trigger { max-width: 180px; padding: 6px 10px; }
  .agent-switcher-label { max-width: 110px; font-size: 12px; }
  .agent-switcher-list { min-width: 280px; right: -8px; }
}

/* ============================================================================
 * UI#55 — Tela de escolher parceiro (interno Tef.Net), redesenhada.
 * Substitui o dropdown UI#14 por uma lista com busca em destaque sobre um
 * fundo de marca (mesh glass DOC#9). Usada tanto no bypass DEV quanto no login
 * real de usuário interno Tef.Net. O shell fica oculto via body.pre-app.
 * Mantém o prefixo de classe `.entry-*` (telas de entrada do sistema).
 * ============================================================================ */
.entry-screen {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  overflow: auto;
}
.entry-screen::before {                      /* fundo mesh da marca */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(at 16% 14%, rgba(76, 154, 255, 0.55) 0, transparent 48%),
    radial-gradient(at 86% 8%, rgba(34, 197, 94, 0.30) 0, transparent 44%),
    radial-gradient(at 74% 92%, rgba(30, 96, 145, 0.65) 0, transparent 56%),
    linear-gradient(150deg, #1e6091 0%, #337ab7 56%, #4c9aff 100%);
}
.entry-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  background: var(--gl-surface-strong, rgba(255, 255, 255, 0.9));
  backdrop-filter: var(--gl-blur, blur(20px) saturate(160%));
  -webkit-backdrop-filter: var(--gl-blur, blur(20px) saturate(160%));
  border: 1px solid var(--gl-border, rgba(255, 255, 255, 0.6));
  border-radius: var(--gl-radius, 18px);
  box-shadow: var(--gl-shadow-lg, 0 22px 56px -18px rgba(10, 14, 39, 0.55));
}
.entry-head { display: flex; align-items: center; gap: 10px; }
.entry-logo { height: 44px; width: auto; }
.entry-role-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--premium-soft, #d9e6f5);
  color: var(--accent-darker, #204d74);
}
.entry-title {
  margin: 16px 0 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.entry-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.entry-sub strong { color: var(--text); }

.entry-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.entry-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.14);
}
.entry-search-icon { font-size: 15px; opacity: 0.6; }
.entry-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px;
  margin: -2px;
}
.entry-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.entry-item:hover { border-color: var(--gl-brand-light, #4c9aff); }
.entry-item.selecionado {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.14);
}
.entry-item.inativo .entry-item-nome { color: var(--rejected); }
.entry-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(130deg, var(--accent), var(--accent-darker));
}
.entry-item.inativo .entry-avatar { filter: grayscale(0.8); }
.entry-item-info { flex: 1; min-width: 0; }
.entry-item-nome {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-item-razao {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-cod-pill {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-darker, #204d74);
  background: var(--premium-soft, #d9e6f5);
  border-radius: 7px;
  padding: 3px 9px;
}
.entry-item.inativo .entry-cod-pill {
  background: rgba(217, 83, 79, 0.12);
  color: var(--rejected);
}
.entry-empty {
  padding: 26px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

.entry-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.entry-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-subtle);
}
.entry-enter {
  flex: none;
  height: 42px;
  padding: 0 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(120deg, var(--accent), var(--accent-darker));
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  transition: filter 0.15s, transform 0.05s;
}
.entry-enter:hover:not(:disabled) { filter: brightness(1.07); }
.entry-enter:active:not(:disabled) { transform: scale(0.99); }
.entry-enter:disabled { opacity: 0.5; cursor: not-allowed; }

/* UI#68 (28/05/2026): botão "Continuar sem escolher parceiro — Bandeja consolidada".
   Atalho de entrada direta na Bandeja Tef.Net. Separado visualmente do botão
   "Entrar →" por padding superior maior e cor secundária (azul mais leve). */
.entry-bandeja-shortcut {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border, #e2e8f0);
  justify-content: center;
}
.entry-bandeja-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-700, #1d4ed8);
  background: rgba(41, 98, 255, 0.08);
  border: 1px solid rgba(41, 98, 255, 0.35);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.entry-bandeja-btn:hover:not(:disabled) {
  background: rgba(41, 98, 255, 0.14);
  border-color: var(--brand-500, #2962ff);
}
.entry-bandeja-btn:active:not(:disabled) { transform: scale(0.99); }
.entry-bandeja-btn:disabled { opacity: 0.6; cursor: progress; }

/* Anchor invisível pra trigger.js (UI#6-M) injetar o botão `?` ao lado.
   Padrão: span vazio com [data-help] — trigger.js cria o `?` como nextSibling. */
.entry-bandeja-help-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.entry-error {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 28px;
  text-align: center;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 22px 56px -18px rgba(10, 14, 39, 0.55);
}

@media (max-width: 540px) {
  .entry-card { padding: 20px 18px 18px; max-height: calc(100vh - 36px); }
  .entry-foot { flex-direction: column-reverse; align-items: stretch; }
  .entry-enter { width: 100%; }
  .entry-hint { text-align: center; }
}

/* ============================================================================
 * UI#16 + UI#17 (08/05/2026 noite) — Seção DEV no sidebar + páginas internas
 * (Faturamento iframe + Gestão de Desenvolvimento com abas).
 * Visível APENAS pra tpUser='Tef.Net' (body.is-tefnet).
 * ============================================================================ */

/* Defesa em profundidade tripla:
   (1) atributo `hidden` no HTML — UA mostra display:none por default;
   (2) JS só remove o atributo `hidden` quando AppState.user.tpUser === 'Tef.Net'
       e adiciona body.is-tefnet — sem JS, seção fica oculta pelo (1);
   (3) Mesmo se algo escapar do (1)+(2), a regra abaixo força ocultação
       quando body.is-tefnet não está presente. */
body:not(.is-tefnet) .nav-section.dev-only { display: none !important; }
.nav-section.dev-only { display: block; }

/* ============================================================================
 * UI#69 (28/05/2026) — Renderização condicional de sub-seções do manual.
 * Sub-seções com `.manual-tefnet-only` (regra dura §37 + decisão MAN-0017 v1)
 * só aparecem quando body.is-tefnet está presente. Parceiro externo abre o
 * mesmo cap-12.html no modal de help e o bloco "🔒 VISÃO TEF.NET" some via
 * display:none — sem render condicional server-side, sem duplicar conteúdo.
 *
 * Defesa em profundidade dupla:
 *   (1) Regra CSS abaixo — força ocultação quando body.is-tefnet ausente.
 *   (2) `.manual-tefnet-only` está dentro de `.help-modal-content` (escopo do
 *       manual no modal), garantindo que a regra só age dentro do modal.
 * ============================================================================ */
body:not(.is-tefnet) .help-modal-content .manual-tefnet-only { display: none !important; }

/* UI#58 — rótulos de seção do sidebar Glass ("Principal" / "Desenvolvimento") */
.nav-section-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 20px 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.nav-section-badge {
  background: rgba(255,255,255,0.92);
  color: #0f7a52;
  font-size: 8.5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Sidebar minimizado: rótulo de seção vira um traço divisor sutil */
body.sidebar-collapsed .nav-section-header {
  padding: 0;
  margin: 6px 14px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,0.14);
}
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-section-badge { display: none; }

/* Página #faturamento e #gestao-dev — iframe full-height na área principal */
.iframe-wrapper {
  width: 100%;
  height: calc(100vh - var(--header-h) - 140px); /* desconta header app + page-header */
  min-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Toolbar da iframe quando viewing doc dentro da Gestão de Dev */
.dev-iframe-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 8px;
}
.dev-iframe-toolbar .dev-iframe-title {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Abas da Gestão de Desenvolvimento */
.dev-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.dev-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.dev-tab:hover { color: var(--text); background: var(--surface-2); }
.dev-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.dev-tab-icon { font-size: 14px; }
.dev-tab-count {
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.dev-tab.active .dev-tab-count { background: var(--premium-soft); color: var(--accent); }

/* ============ UI#19 (09/05/2026) — PageTabs componente reutilizável ============
   Tabs no estilo underline minimal (Variante A), aceitam variant via classe
   .level-l1 (default) ou .level-l2. Usado em #faturamento; preparado pra reuso. */
.page-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-top: 14px;
  margin-bottom: 16px;
}
.page-tabs.level-l2 {
  margin-top: 8px;
  margin-bottom: 12px;
}
.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.page-tabs.level-l2 .page-tab { padding: 8px 12px; font-size: 12px; }
.page-tab:hover { color: var(--text); background: var(--surface-2); }
.page-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.page-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}
.page-tab-icon { font-size: 14px; }
.page-tab-count {
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.page-tab.active .page-tab-count { background: var(--premium-soft); color: var(--accent); }

/* page-faturamento — itens auxiliares do header */
.page-faturamento .page-title-tag {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.page-faturamento .page-tab-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

/* Empty state pra abas L1 sem conteúdo (Aba 2/3 enquanto não há nada construído) */
.empty-tab-state {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
}
.empty-tab-state .empty-tab-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.empty-tab-state .empty-tab-desc {
  color: var(--text-muted);
  margin: 0 0 18px;
  font-size: 13px;
}
.empty-tab-state .empty-tab-hint {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  display: inline-block;
  text-align: left;
  line-height: 1.6;
}
.empty-tab-state .empty-tab-hint code {
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text);
}

/* UI#20 — host L2 dentro de L1 (page-tabs-host-l2) */
.page-tabs-host-l2 { margin-bottom: 0; }
.page-tab-content-l2 { margin-top: 0; }

/* Grid de docs */
.dev-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}
.dev-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.dev-doc-link:hover {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(2px);
}
.dev-doc-link .icon {
  font-size: 15px;
  color: var(--accent);
  width: 18px;
  text-align: center;
}
.dev-doc-link .nome {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-doc-link .ext {
  font-size: 10px;
  color: var(--text-subtle);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ============================================================================
 * DOC#9 — Glassmorphism Banking · Dashboard piloto (08/05/2026 noite)
 * Paleta Tef.Net Brand · Phosphor Duotone · backdrop-filter blur saturate
 * Escopado a .page-dashboard-v2 — outras telas seguem padrão antigo até onda 2
 * ============================================================================ */

.page-dashboard-v2 {
  position: relative;
  min-height: 100%;
  padding: 4px;
  background: var(--gl-mesh);
  background-attachment: fixed;
  border-radius: var(--gl-radius);
}

/* Banner glass */
.page-dashboard-v2 .banner-comp {
  background: linear-gradient(135deg, var(--gl-brand-deep) 0%, var(--gl-brand) 60%, var(--gl-brand-light) 100%);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-md);
  position: relative;
  overflow: hidden;
}
.page-dashboard-v2 .banner-titulo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.page-dashboard-v2 .banner-icon {
  font-size: 38px;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}
.page-dashboard-v2 .banner-comp::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  pointer-events: none;
}

/* Seletor card com surface translúcida.
 * z-index elevado: quando o dropdown de competência abre, ele precisa ficar
 * ACIMA dos KPI cards (que também têm backdrop-filter e criam stacking context
 * próprio). Sem isso, em stacking contexts irmãos o que vem depois no DOM
 * (KPIs) fica por cima — bug visual reportado em 09/05/2026. */
.page-dashboard-v2 .seletor-comp-card {
  background: var(--gl-surface-strong);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  position: relative;
  z-index: 20;
}

/* KPI cards Glass */
.page-dashboard-v2 .kpi-card-v2 {
  background: var(--gl-surface-strong);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.page-dashboard-v2 .kpi-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--gl-shadow-lg);
}
/* Orb decorativo no canto superior direito (cor varia por kind) */
.page-dashboard-v2 .kpi-card-v2::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--gl-brand);
  opacity: .22;
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}
.page-dashboard-v2 .kpi-card-v2 > * { position: relative; z-index: 1; }
.page-dashboard-v2 .kpi-card-v2 .kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gl-brand-deep);
  font-weight: 700;
  /* sem padding-right — antes o gap criado entre nome e (?) ficava grande demais.
   * Agora o card inteiro reserva espaço pro ícone via padding-right (regra abaixo). */
}
/* Reserva espaço pra ícone do canto superior direito sem afetar fluxo do label/help-trigger */
.page-dashboard-v2 .kpi-card-v2 {
  padding-right: 56px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
  box-shadow: 0 6px 16px -6px rgba(51,122,183,.5);
  flex-shrink: 0;
  position: absolute;
  top: 14px; right: 14px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-ico i { font-size: 18px; }
.page-dashboard-v2 .kpi-card-v2 .kpi-value { color: var(--gl-brand-deep); }
.page-dashboard-v2 .kpi-card-v2 .kpi-value-success { color: #047857; }
.page-dashboard-v2 .kpi-card-v2 .kpi-value-primary { color: var(--gl-brand); }

/* KPI duo (cards 2 valores) com superfície sutil */
.page-dashboard-v2 .kpi-duo-item {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
}

/* Trigger do seletor + chips com leve translucidez */
.page-dashboard-v2 .comp-trigger {
  background: rgba(255,255,255,.9);
  border-color: rgba(51,122,183,.25);
}
.page-dashboard-v2 .comp-trigger:hover { border-color: var(--gl-brand); }
.page-dashboard-v2 .comp-chip {
  background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-light));
  box-shadow: 0 3px 8px -3px rgba(51,122,183,.4);
}

/* Botão primário (Resgatar) com gradient brand */
.page-dashboard-v2 .btn-primary {
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-deep) 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(51,122,183,.55);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.page-dashboard-v2 .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(51,122,183,.7);
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-deep) 100%);
  border: 0;
}
.page-dashboard-v2 .btn-primary:disabled {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  box-shadow: none;
  cursor: not-allowed;
}

/* Mes-disponivel com hover glass */
.page-dashboard-v2 .mes-disponivel {
  background: rgba(255,255,255,.65);
  border-color: rgba(51,122,183,.18);
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.page-dashboard-v2 .mes-disponivel:hover {
  background: rgba(255,255,255,.9);
  transform: translateX(2px);
  border-color: var(--gl-brand);
}
.page-dashboard-v2 .mes-disponivel.ativo {
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
  border-color: var(--gl-brand-deep);
}

/* Badge resgate-total com brand */
.page-dashboard-v2 .resgate-total-badge {
  background: linear-gradient(135deg, var(--gl-brand-deep), var(--gl-brand));
  box-shadow: 0 6px 18px -6px rgba(30,96,145,.5);
}

/* Bloco título sublinhado com brand */
.page-dashboard-v2 .bloco-titulo-primary { border-bottom-color: var(--gl-brand); }
.page-dashboard-v2 .bloco-titulo-success { border-bottom-color: #14b8a6; }

/* Pendente: opacidade preservada */
.page-dashboard-v2 .kpi-card-v2.kpi-card-pendente { opacity: 0.65; }
.page-dashboard-v2 .kpi-card-v2.kpi-card-pendente::before { opacity: 0.1; }
/* Badge PENDENTE escondido no Glass: estava desalinhando o card.
 * Os sinais que mantemos como evidência de "pendente":
 *   1. opacity 0.65 (fade visível)
 *   2. valores "—" (em vez de número)
 * (o footer "regra a definir" foi removido em v0.7.131 a pedido do dono.)
 * Card volta a alinhar-se com os outros do bloco. */
.page-dashboard-v2 .kpi-card-v2.kpi-card-pendente .badge-pendente {
  display: none;
}

/* Variação de orb: card success (provisionamento) usa teal */
.page-dashboard-v2 .kpi-card-v2.kpi-success::before { background: #14b8a6; }
.page-dashboard-v2 .kpi-card-v2.kpi-success .kpi-ico {
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  box-shadow: 0 6px 16px -6px rgba(20,184,166,.5);
}

/* Pills Premium/Standard ajustados pra glass */
.page-dashboard-v2 .pill-premium {
  background: linear-gradient(135deg, rgba(51,122,183,.18), rgba(76,154,255,.22));
  color: var(--gl-brand-deep);
  font-weight: 700;
}
.page-dashboard-v2 .pill-standard {
  background: rgba(119,119,119,.15);
  color: #4b5563;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1100px) {
  .page-dashboard-v2 .kpi-card-v2 .kpi-ico {
    width: 30px; height: 30px;
  }
}

/* ============================================================================
 * DOC#9 — Glass Dark Mode (inversão de cores) — toggle via ?dark=1 na URL
 * Vibe: Midnight Pro do v5 com brand Tef.Net mantida em pontos de destaque
 * ============================================================================ */
.page-dashboard-v2.glass-dark {
  background:
    radial-gradient(at 12% 18%, rgba(76,154,255,.35) 0, transparent 45%),
    radial-gradient(at 88% 12%, rgba(99,102,241,.30) 0, transparent 45%),
    radial-gradient(at 70% 95%, rgba(56,189,248,.32) 0, transparent 50%),
    radial-gradient(at 18% 92%, rgba(51,122,183,.40) 0, transparent 50%),
    linear-gradient(135deg, #0b1220 0%, #0f1d33 50%, #0b1220 100%);
  color: #e2e8f0;
}

/* Banner permanece com gradient brand (continua azul vibrante destaca-se no dark) */
.page-dashboard-v2.glass-dark .banner-comp {
  background: linear-gradient(135deg, #1e3a5f 0%, var(--gl-brand) 60%, var(--gl-brand-light) 100%);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}

/* Seletor card translúcido escuro */
.page-dashboard-v2.glass-dark .seletor-comp-card {
  background: rgba(15,29,51,.6);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 22px -8px rgba(0,0,0,.5);
  color: #cbd5e1;
}
.page-dashboard-v2.glass-dark .seletor-comp-head strong { color: #f1f5f9; }
.page-dashboard-v2.glass-dark .text-muted { color: #94a3b8 !important; }

/* KPI cards Glass Dark */
.page-dashboard-v2.glass-dark .kpi-card-v2 {
  background: rgba(15,29,51,.55);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
}
.page-dashboard-v2.glass-dark .kpi-card-v2:hover {
  background: rgba(15,29,51,.7);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(76,154,255,.25);
}
.page-dashboard-v2.glass-dark .kpi-card-v2::before {
  background: var(--gl-brand-light);
  opacity: .35;
}
.page-dashboard-v2.glass-dark .kpi-card-v2.kpi-success::before { background: #2dd4bf; opacity: .35; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-label {
  color: #93c5fd;
}
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-value { color: #f8fafc; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-value-success { color: #6ee7b7; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-value-primary { color: #93c5fd; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-sub { color: #cbd5e1; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-ico {
  box-shadow: 0 0 22px -2px rgba(76,154,255,.5);
}

/* KPI duo dark */
.page-dashboard-v2.glass-dark .kpi-duo-item {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
.page-dashboard-v2.glass-dark .kpi-duo-label { color: #94a3b8; }
.page-dashboard-v2.glass-dark .kpi-duo-value { color: #f1f5f9; }
.page-dashboard-v2.glass-dark .kpi-duo-item.danger .kpi-duo-value { color: #fca5a5; }

/* Trigger + chips + dropdown */
.page-dashboard-v2.glass-dark .comp-trigger {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #e2e8f0;
}
.page-dashboard-v2.glass-dark .comp-trigger:hover { border-color: var(--gl-brand-light); }
.page-dashboard-v2.glass-dark .comp-trigger .caret { color: #94a3b8; }
.page-dashboard-v2.glass-dark .comp-list {
  background: rgba(15,29,51,.95);
  border-color: rgba(255,255,255,.15);
  color: #e2e8f0;
}
.page-dashboard-v2.glass-dark .comp-list-actions {
  background: rgba(15,29,51,.95);
  border-bottom-color: rgba(255,255,255,.1);
}
.page-dashboard-v2.glass-dark .comp-action-btn {
  background: transparent;
  border-color: rgba(255,255,255,.15);
  color: #cbd5e1;
}
.page-dashboard-v2.glass-dark .comp-option:hover { background: rgba(255,255,255,.05); }

/* Mes-disponivel dark */
.page-dashboard-v2.glass-dark .mes-disponivel {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}
.page-dashboard-v2.glass-dark .mes-disponivel:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--gl-brand-light);
}
.page-dashboard-v2.glass-dark .mes-disponivel.ativo {
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 20px -2px rgba(76,154,255,.5);
}
.page-dashboard-v2.glass-dark .mes-disponivel-valor { color: #6ee7b7; }
.page-dashboard-v2.glass-dark .mes-disponivel.ativo .mes-disponivel-valor { color: #fff; }

/* Bloco título dark */
.page-dashboard-v2.glass-dark .bloco-titulo {
  color: #e2e8f0;
  border-bottom-color: rgba(255,255,255,.1);
}
.page-dashboard-v2.glass-dark .bloco-titulo-primary { border-bottom-color: var(--gl-brand-light); }
.page-dashboard-v2.glass-dark .bloco-titulo-success { border-bottom-color: #2dd4bf; }
.page-dashboard-v2.glass-dark .bloco-sub { color: #94a3b8; }

/* Pills no dark */
.page-dashboard-v2.glass-dark .pill-premium {
  background: rgba(76,154,255,.2);
  color: #93c5fd;
}
.page-dashboard-v2.glass-dark .pill-standard {
  background: rgba(148,163,184,.2);
  color: #cbd5e1;
}

/* Botão primário no dark mantém gradient brand mas com glow */
.page-dashboard-v2.glass-dark .btn-primary {
  background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
  box-shadow: 0 0 22px -2px rgba(76,154,255,.55);
}
.page-dashboard-v2.glass-dark .btn-primary:disabled {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  opacity: 0.6;
}

/* Tabela placeholder texto */
.page-dashboard-v2.glass-dark #tabela-container p { color: #94a3b8; }

/* ============================================================================
 * Aba "Logs DEV" em Gestão de Desenvolvimento (09/05/2026)
 * Substitui o botão flutuante 🪲 Logs (removido) por um painel inline.
 * ============================================================================ */
.dev-logs-panel { margin-top: 16px; }
.dev-logs-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.dev-logs-toolbar strong { color: var(--text); font-size: 15px; }
.dev-logs-body {
  background: #0d1117;
  color: #c9d1d9;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 8px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 12px;
  max-height: 540px;
  overflow-y: auto;
}
.dev-logs-body .empty-card {
  background: transparent;
  color: #8b949e;
  border: 0;
}
.dev-log-row {
  padding: 6px 10px;
  border-bottom: 1px solid #21262d;
  display: grid;
  grid-template-columns: 80px 100px 1fr;
  gap: 10px;
  align-items: start;
}
.dev-log-row:last-child { border-bottom: 0; }
.dev-log-row .dev-log-time { color: #58a6ff; white-space: nowrap; }
.dev-log-row .dev-log-tag { color: #d2a8ff; font-weight: 600; }
.dev-log-row .dev-log-msg { color: #c9d1d9; word-break: break-word; }
.dev-log-row .dev-log-data {
  grid-column: 1 / -1;
  margin: 4px 0 0 0;
  padding: 6px 10px;
  background: rgba(255,255,255,.04);
  border-left: 2px solid #58a6ff;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  color: #8b949e;
  font-size: 11px;
}
.dev-log-row.dev-log-warn .dev-log-msg { color: #d29922; }
.dev-log-row.dev-log-error .dev-log-msg { color: #f85149; }
.dev-log-row.dev-log-error .dev-log-data { border-left-color: #f85149; }

@media (max-width: 600px) {
  .dev-log-row { grid-template-columns: 1fr; }
  .dev-log-row .dev-log-time, .dev-log-row .dev-log-tag { font-size: 10px; }
}

/* ============================================================================
 * Help-trigger alinhamento global (09/05/2026)
 * Garante que o (?) sempre fique no FINAL do nome, alinhado e sem quebrar
 * sozinho em linha nova (orphan). Aplica em todos os data-help do app.
 * ============================================================================ */
[data-help] {
  /* "Cola" o (?) no fim do nome via white-space — última palavra + (?) ficam
   * juntos como bloco indivisível, evita órfão em quebras de linha. */
  hyphens: none;
}
[data-help] + .help-trigger {
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ============================================================================
 * Responsivo Dashboard (09/05/2026) — corrigir sobreposições em mobile
 * Sintomas: ícone Phosphor invadindo o label longo em telas estreitas;
 * banner empilhando errado; KPIs em 5 colunas estourando.
 * ============================================================================ */

/* Tablet (<1100px) — KPIs em 5 colunas viram 2x3 (já tinha mas reforçado aqui) */
@media (max-width: 1100px) {
  .page-dashboard-v2 .kpi-card-v2 {
    min-height: 110px; /* permite encolher um pouco */
    padding-right: 50px;
  }
  /* Banner empilha em coluna pra não cortar texto */
  .page-dashboard-v2 .banner-comp {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Mobile (<700px) — tudo em 1 coluna, ícone menor */
@media (max-width: 700px) {
  .page-dashboard-v2 .kpi-card-v2 {
    padding-right: 44px;
  }
  .page-dashboard-v2 .kpi-card-v2 .kpi-ico {
    width: 28px; height: 28px;
    top: 10px; right: 10px;
  }
  .page-dashboard-v2 .kpi-card-v2 .kpi-ico i { font-size: 14px; }
  .page-dashboard-v2 .kpi-card-v2 .kpi-label {
    font-size: 10px;
  }
  .page-dashboard-v2 .kpi-card-v2 .kpi-value {
    font-size: 22px; /* era 28px */
  }
  /* Pills de Premium/Standard quebram linha em mobile */
  .page-dashboard-v2 .pill { display: inline-block; margin-bottom: 2px; }
}

/* Mobile estrito (<480px) — ainda mais compacto */
@media (max-width: 480px) {
  .page-dashboard-v2 {
    padding: 0;
  }
  .page-dashboard-v2 .banner-comp {
    padding: 14px 16px;
  }
  .page-dashboard-v2 .banner-titulo { font-size: 18px; }
  .page-dashboard-v2 .seletor-comp-card {
    padding: 12px 14px;
  }
  .page-dashboard-v2 .kpi-card-v2 {
    padding: 12px 14px;
    min-height: 96px;
  }
  .page-dashboard-v2 .kpi-card-v2 .kpi-value { font-size: 20px; }
  /* KPI duo (2 valores num card) — colunas mais apertadas */
  .page-dashboard-v2 .kpi-duo-value { font-size: 16px; }
}

/* Selector de competência — coluna 2 e 3 com badge total não invadem coluna 1 */
@media (max-width: 900px) {
  .page-dashboard-v2 .seletor-comp-head { flex-wrap: wrap; gap: 8px; }
  .page-dashboard-v2 .resgate-total-badge { align-self: flex-start; }
}

/* ============================================================================
 * DOC#9 ONDA 2 — Chrome harmonizado + 5 KPIs diferenciados (09/05/2026)
 * Header e sidebar alinhados com o tema atual (light) ganham polidura do v7:
 *   • brand mark com sombra brand sutil
 *   • nav-item.active com gradient brand-soft + glow lateral
 *   • dev-only badge com gradient emerald→teal
 *   • 5 KPIs ganham cores diferenciadas dentro da família brand (k1..k5)
 * ============================================================================ */

/* Header — fundo gradient brand-pale + borda inferior brand sutil
 * Casa com o mesh do conteúdo. Mantém legibilidade light mas sai do branco "morto". */
.app-header {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  border-bottom: 1px solid #d8e6f5;
  box-shadow: 0 2px 12px -6px rgba(51,122,183,.18);
  position: relative;
}
.app-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(76,154,255,.5) 50%, transparent 100%);
}
.brand img {
  filter: drop-shadow(0 2px 6px rgba(51,122,183,.25));
}

/* UI#58 (21/05/2026) — o sidebar passou a ser Glass (azul em gradiente);
 * todos os estilos foram consolidados no bloco base (~linha 308).
 * O bloco DOC#9 antigo do sidebar (tema claro) foi removido aqui. */

/* User-menu / agent-switcher: leve refinamento de borda em hover */
.user-menu:hover {
  background: rgba(51,122,183,.08);
}

/* ============================================================================
 * KPI cards — 5 cores diferenciadas dentro da família brand
 * Usa --orb / --ico-1 / --ico-2 / --ico-shadow / --label-color
 * As classes k1..k5 sobrescrevem as variáveis no escopo do card.
 * ============================================================================ */
.page-dashboard-v2 .kpi-card-v2.k1 {
  --orb: var(--accent);
}
.page-dashboard-v2 .kpi-card-v2.k1 .kpi-ico {
  background: linear-gradient(135deg, var(--accent) 0%, #4c9aff 100%);
  box-shadow: 0 6px 16px -6px rgba(51,122,183,.5);
}

.page-dashboard-v2 .kpi-card-v2.k2 {
  --orb: #4c9aff;
}
.page-dashboard-v2 .kpi-card-v2.k2 .kpi-ico {
  background: linear-gradient(135deg, #4c9aff 0%, #6cb3ff 100%);
  box-shadow: 0 6px 16px -6px rgba(76,154,255,.5);
}
.page-dashboard-v2 .kpi-card-v2.k2 .kpi-label { color: #1e6091; }

.page-dashboard-v2 .kpi-card-v2.k3 {
  --orb: #0ea5e9;
}
.page-dashboard-v2 .kpi-card-v2.k3 .kpi-ico {
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  box-shadow: 0 6px 16px -6px rgba(14,165,233,.5);
}
.page-dashboard-v2 .kpi-card-v2.k3 .kpi-label { color: #0369a1; }
.page-dashboard-v2 .kpi-card-v2.k3 .kpi-value { color: #075985; }

.page-dashboard-v2 .kpi-card-v2.k4 {
  --orb: #64748b;
  opacity: 0.85;
}
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-ico {
  background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
  box-shadow: 0 6px 16px -6px rgba(100,116,139,.45);
}
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-label { color: #64748b; }
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-value { color: #334155; }

.page-dashboard-v2 .kpi-card-v2.k5 {
  --orb: #14b8a6;
  border: 1px solid rgba(20,184,166,.25);
  box-shadow: 0 12px 30px -12px rgba(20,184,166,.28), inset 0 0 0 1px rgba(20,184,166,.06);
}
.page-dashboard-v2 .kpi-card-v2.k5 .kpi-ico {
  background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
  box-shadow: 0 6px 16px -6px rgba(20,184,166,.5);
}
.page-dashboard-v2 .kpi-card-v2.k5 .kpi-label { color: #0e7490; }
.page-dashboard-v2 .kpi-card-v2.k5 .kpi-value { color: #115e59; }

/* ============================================================================
 * 🧪 EXPERIMENTAL — DOC#9 ONDA 4 — Tint de fundo nos KPIs especiais
 * Pedido em 09/05/2026 madrugada: Provisionamento (k5) com tint verde-teal,
 * Cancelados (k4) com tint rose/red. Mantém Glass mas reforça a semântica.
 *
 * 🔄 PARA REVERTER: deletar este bloco inteiro (entre EXPERIMENTAL → FIM EXPERIMENTAL).
 *    Cards voltam ao fundo branco translúcido padrão.
 * ============================================================================ */

/* k5 Provisionamento — tint teal (success) */
.page-dashboard-v2 .kpi-card-v2.k5 {
  background: linear-gradient(
    135deg,
    rgba(204, 251, 241, .92) 0%,    /* teal-100 quase opaco */
    rgba(153, 246, 228, .82) 100%   /* teal-200 */
  );
  border: 1px solid rgba(20, 184, 166, .35);
  box-shadow:
    0 14px 32px -14px rgba(20, 184, 166, .35),
    inset 0 0 0 1px rgba(20, 184, 166, .08);
}
.page-dashboard-v2 .kpi-card-v2.k5::before {
  background: #14b8a6;
  opacity: 0.4; /* orb mais forte sobre fundo já tintado */
}

/* k4 Cancelados — tint rose/red (danger pendente) */
.page-dashboard-v2 .kpi-card-v2.k4 {
  background: linear-gradient(
    135deg,
    rgba(254, 226, 226, .92) 0%,    /* red-100 */
    rgba(254, 205, 211, .82) 100%   /* rose-200 */
  );
  border: 1px solid rgba(239, 68, 68, .28);
  box-shadow:
    0 14px 32px -14px rgba(239, 68, 68, .25),
    inset 0 0 0 1px rgba(239, 68, 68, .06);
}
.page-dashboard-v2 .kpi-card-v2.k4::before {
  background: #ef4444;
  opacity: 0.32;
}
/* Ícone de Cancelados ganha tom red pra acompanhar o tint do fundo */
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-ico {
  background: linear-gradient(135deg, #ef4444 0%, #fca5a5 100%);
  box-shadow: 0 6px 14px -4px rgba(239, 68, 68, .55);
}
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-label { color: #991b1b; }
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-duo-item.danger .kpi-duo-value { color: #991b1b; }
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-duo-label { color: #b91c1c; }

/* k4 cancelado mantém opacidade (regra anterior) — não ofuscar o tint */
.page-dashboard-v2 .kpi-card-v2.k4.kpi-card-pendente { opacity: 0.85; }

/* ============================================================================
 * FIM EXPERIMENTAL — DOC#9 ONDA 4
 * ============================================================================ */



/* ============================================================================
 * UI#20 — Padrão "Explodir" (09/05/2026)
 * KPIs ganham comportamento clicável + painel detalhado abaixo do bloco.
 * ============================================================================ */

.kpi-explodivel {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.kpi-explodivel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .15);
}
.kpi-explodivel:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 2px;
}
.kpi-explodivel::after {
  content: '▾';
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  transition: transform .2s ease;
}
.kpi-explodivel.explodir-aberto::after {
  transform: rotate(180deg);
}

.explodir-detail {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
}
.explodir-detail[hidden] { display: none; }
.explodir-loading {
  padding: 12px;
  text-align: center;
  color: var(--text-muted, #64748b);
}
.explodir-error {
  padding: 12px;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 6px;
}
.explodir-table-wrap {
  overflow-x: auto;
  background: white;
  border-radius: 6px;
}
.explodir-table-wrap .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.explodir-table-wrap th,
.explodir-table-wrap td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  text-align: left;
}
.explodir-table-wrap th {
  background: var(--bg-soft, #f1f5f9);
  font-weight: 600;
  color: var(--text-muted, #475569);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.explodir-table-wrap td.col-num,
.explodir-table-wrap th.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.explodir-table-wrap tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   UI#50 (14/05/2026) — Desmembrar "Comissão Não-Pgs" em "Comissão Pendente".
   Mockup aprovado: docs/mockups/UI-0050-v1-comissao-nao-pgs-desmembrar-2-opcoes.html
   - Subtítulo inline no card com 2 dots coloridos (repasse / cliente)
   - Sub-tabs no drill com filtragem JS-only (data-bucket)
   ========================================================================== */

/* Subtítulo do card "Comissão Pendente" */
.ind-sub-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.3;
}
.cnpg-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cnpg-dot-repasse { background: var(--warn, #f3b04a); }
.cnpg-dot-cliente { background: var(--text-muted, #8b95b3); }
.cnpg-sub-sep { color: var(--border, #cbd5e1); margin: 0 2px; }
.cnpg-sub-label { white-space: nowrap; }
.cnpg-sub-empty {
  color: var(--success, #3fc78a);
  font-weight: 500;
  white-space: nowrap;
}

/* B#18 (18/05/2026 — Etapa 2): sub-label do card "Vr. à Resgatar" que mostra
 * o "R$ X apurado total" quando há valor em lote (= aResgApurado > aResg).
 * Tom muted pra hierarquia visual: disponível REAL é destaque grande, apurado
 * total é info secundária pequena.
 */
.vra-sub-label {
  color: var(--text-muted, #8b95b3);
  font-size: 0.85em;
  font-weight: 400;
  white-space: nowrap;
}

/* Sub-tabs do drill de Comissão Pendente */
.cnpg-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--bg-soft, #f1f5f9);
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  flex-wrap: wrap;
}
.cnpg-subtab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #475569);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cnpg-subtab:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--text, #0f172a);
}
.cnpg-subtab.active {
  background: white;
  border-color: var(--border, #cbd5e1);
  color: var(--text, #0f172a);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.cnpg-subtab.active.cnpg-subtab-repasse {
  border-color: rgba(243, 176, 74, .5);
  background: rgba(243, 176, 74, .08);
}
.cnpg-subtab.active.cnpg-subtab-cliente {
  border-color: rgba(139, 149, 179, .5);
  background: rgba(139, 149, 179, .08);
}
.cnpg-subtab-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-soft, #f1f5f9);
  color: var(--text-muted, #64748b);
  font-weight: 500;
}
.cnpg-subtab.active .cnpg-subtab-count {
  background: var(--border, #e2e8f0);
  color: var(--text, #0f172a);
}

/* Pill por natureza nas linhas da tabela do drill */
.cnpg-row-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.cnpg-row-pill-repasse {
  background: rgba(243, 176, 74, .14);
  color: #b67a1d;
  border: 1px solid rgba(243, 176, 74, .4);
}
.cnpg-row-pill-cliente {
  background: rgba(139, 149, 179, .14);
  color: var(--text-muted, #475569);
  border: 1px solid rgba(139, 149, 179, .4);
}

/* DT#25 (16/05/2026) — Pills extras pra split "Aguardando Cliente Final"
   em A Vencer (azul) e Vencido (vermelho). Vivem dentro da MESMA aba
   "Aguardando Cliente Final" no drill da Comissão Pendente — cada linha
   da tabela carrega uma destas pills na coluna Natureza. As pills antigas
   (.cnpg-row-pill-repasse / .cnpg-row-pill-cliente) ficam preservadas
   pra retrocompat (caso o backend ainda devolva linha agregada
   data-bucket="cliente" — render mantém a pill cinza legada). */
.cnpg-row-pill-aver {
  background: rgba(43, 182, 199, 0.12);
  color: #00838f;
  border: 1px solid rgba(43, 182, 199, 0.35);
}
.cnpg-row-pill-venc {
  background: rgba(217, 83, 79, 0.12);
  color: #a02622;
  border: 1px solid rgba(217, 83, 79, 0.35);
}

/* DT Eduardo-2 (14/05/2026) — Coordenação sub-tab × filtro coluna.
   Sub-tab usa esta classe para esconder linhas por bucket; o filtro de coluna
   do explodir.js usa atributo [hidden] no mesmo <tr>. Ambos resolvem pra
   `display:none` — a linha só fica visível quando passa em AMBOS critérios
   (intersecção natural). Evita o filtro coluna sobrescrever a decisão da
   sub-tab quando o usuário digita após chavear bucket. */
tr.cnpg-hidden-bucket { display: none !important; }

/* UI#20 — Sub-seções dentro do explodir (espelha duo do KPI) */
.explodir-secao + .explodir-secao { margin-top: 18px; }
.explodir-secao-titulo {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.explodir-secao-titulo b { color: var(--text, #0f172a); font-size: 13px; letter-spacing: 0; }

/* UI#20 v2 — header do painel explodir com título + ações (filtro + fechar).
   PRD-0014-EXT-03 / UI#45: align-items baseline (era center) pra que o
   subtitulo inline alinhe com o titulo no mesmo eixo de texto. */
.explodir-detail .explodir-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px 4px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 12px;
}
.explodir-detail .explodir-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
  min-width: 0;
  /* PRD-0014-EXT-03 / UI#45: flex 0 0 auto (era 1 1 auto) — o titulo nao
     mais consome todo o espaco; .explodir-header-text envolve titulo+subtitulo
     e e quem tem flex: 1. */
  flex: 0 0 auto;
}
.explodir-detail .explodir-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.explodir-detail .explodir-filter {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  background: white;
  width: 200px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.explodir-detail .explodir-filter:focus {
  border-color: var(--accent, #337ab7);
  box-shadow: 0 0 0 2px rgba(51, 122, 183, .18);
}
.explodir-detail .explodir-close {
  appearance: none;
  border: 1px solid var(--border, #e2e8f0);
  background: white;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.explodir-detail .explodir-close:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.explodir-detail .explodir-close:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 2px;
}

/* duo-item clicável fica um bocado destacado quando ativo */
.kpi-duo-item.kpi-explodivel {
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s ease;
  position: relative;
  padding: 6px 8px;
}
.kpi-duo-item.kpi-explodivel:hover {
  background: rgba(51, 122, 183, .08);
}
.kpi-duo-item.kpi-explodivel:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 1px;
}
.kpi-duo-item.kpi-explodivel::after {
  content: '▾';
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 10px;
  color: var(--text-muted, #64748b);
  transition: transform .2s ease;
}
.kpi-duo-item.kpi-explodivel.explodir-aberto::after { transform: rotate(180deg); }
.kpi-duo-item.kpi-explodivel.explodir-aberto {
  background: rgba(51, 122, 183, .12);
}

/* UI#20 v3 — filtros por coluna (linha extra sob o thead) */
.explodir-table-wrap .explodir-filter-row th {
  background: #fafafa;
  padding: 4px 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}
.explodir-col-filter {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  font-family: inherit;
  background: white;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  box-sizing: border-box;
}
.explodir-col-filter:focus {
  border-color: var(--accent, #337ab7);
  box-shadow: 0 0 0 2px rgba(51, 122, 183, .18);
}
.explodir-col-filter::placeholder { color: #94a3b8; font-style: italic; }

/* --- RES#2 Sprint D (10/05/2026) — Drill com tabs (Opção C) --- */
/* Tabs sobre painel explodir: separa "Por modalidade" (Premium/Standard)
   de "Por cliente" (lista detalhada via agente_kpi_clientes_listar.php).
   Tokens DOC#9 glassmorphism — borda discreta, hover suave. */
.explodir-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: transparent;
}
.explodir-tabs[hidden] { display: none; }
.explodir-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  margin-bottom: -1px; /* alinha com a borda do tabs */
}
.explodir-tab:hover {
  color: var(--accent, #337ab7);
  background: rgba(51, 122, 183, .06);
}
.explodir-tab:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 2px;
}
.explodir-tab.active {
  color: var(--accent, #337ab7);
  background: var(--surface, #fff);
  border-color: var(--border, #e2e8f0);
  border-bottom-color: var(--surface, #fff);
  font-weight: 600;
}

/* Tabela "Por cliente" dentro do explodir-tabs */
.explodir-tabela-clientes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.explodir-tabela-clientes th,
.explodir-tabela-clientes td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.explodir-tabela-clientes th {
  background: var(--surface-2, #f8fafc);
  font-weight: 600;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.explodir-tabela-clientes td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.explodir-tabela-clientes tfoot td {
  font-weight: 700;
  background: var(--surface-2, #f8fafc);
  border-top: 2px solid var(--border, #e2e8f0);
}
.explodir-modalidade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
.explodir-mod-card {
  padding: 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.explodir-mod-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  margin-bottom: 6px;
}
.explodir-mod-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent, #337ab7);
}
.explodir-mod-prem .explodir-mod-card-label { color: #ec4899; }
.explodir-mod-std  .explodir-mod-card-label { color: var(--text-muted, #64748b); }

/* UI#20 v4 — filtros maiores (~30%) + dropdown nativo pra colunas de domínio fixo */
.explodir-col-filter {
  /* +30% no padding/font-size em relação ao v3 */
  padding: 6px 9px;
  font-size: 13px;
  height: 30px;
  line-height: 1.3;
}
.explodir-col-filter-select {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted, #64748b) 50%),
    linear-gradient(135deg, var(--text-muted, #64748b) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 13px,
    calc(100% - 9px) 13px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
}
.explodir-col-filter-select:focus {
  background-image:
    linear-gradient(45deg, var(--accent, #337ab7) 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, var(--accent, #337ab7) 50%);
}

/* UI#20 — Triggers explodir no card "Parceiros vinculados" (kpiV2) */

/* Número grande do KPI vira clicável quando tem data-explodir-key */
.kpi-card-v2 .kpi-value[data-explodir-key] {
  cursor: pointer;
  display: inline-block;
  border-radius: 6px;
  padding: 0 6px;
  margin-left: -6px;
  transition: background .12s ease;
  position: relative;
}
.kpi-card-v2 .kpi-value[data-explodir-key]:hover {
  background: rgba(51, 122, 183, .08);
}
.kpi-card-v2 .kpi-value[data-explodir-key]:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 1px;
}
.kpi-card-v2 .kpi-value[data-explodir-key].explodir-aberto {
  background: rgba(51, 122, 183, .12);
}
.kpi-card-v2 .kpi-value[data-explodir-key]::after {
  content: '▾';
  font-size: 10px;
  color: var(--text-muted, #64748b);
  margin-left: 4px;
  vertical-align: middle;
  transition: transform .2s ease;
}
.kpi-card-v2 .kpi-value[data-explodir-key].explodir-aberto::after {
  transform: rotate(180deg);
}

/* Pills PREMIUM/STANDARD clicáveis e número ao lado também */
.pill-explodivel,
.explodivel-num {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background .12s ease, box-shadow .12s ease;
}
.pill-explodivel:hover,
.explodivel-num:hover {
  background: rgba(51, 122, 183, .12);
}
.pill-explodivel:focus-visible,
.explodivel-num:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 1px;
}
.pill-explodivel.explodir-aberto,
.explodivel-num.explodir-aberto {
  box-shadow: 0 0 0 2px var(--accent, #337ab7) inset;
}

/* Linha "+ N parceiros não vinculados" */
.explodivel-linha-nao-vinc {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  transition: background .12s ease;
}
.explodivel-linha-nao-vinc:hover {
  background: rgba(51, 122, 183, .08);
  color: var(--accent, #337ab7) !important;
}
.explodivel-linha-nao-vinc:focus-visible {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 1px;
}
.explodivel-linha-nao-vinc.explodir-aberto {
  background: rgba(51, 122, 183, .12);
  color: var(--accent, #337ab7) !important;
}
.explodivel-linha-nao-vinc::after {
  content: ' ▾';
  font-size: 10px;
  opacity: .6;
}
.explodivel-linha-nao-vinc.explodir-aberto::after {
  content: ' ▴';
}

/* UI#22 — Seletor ano → mês no card "Resgate disponível" */
.anos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--border, #e2e8f0);
  margin-top: 6px;
}
.ano-pill {
  appearance: none;
  border: 1.5px solid var(--brand-pale, #e8f1f9);
  background: var(--brand-pale, #e8f1f9);
  color: var(--brand-dark, #285a87);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  position: relative;
  text-align: center;
}
.ano-pill:hover {
  border-color: var(--brand, #337ab7);
  background: white;
  box-shadow: 0 4px 12px -4px rgba(51, 122, 183, .3);
}
.ano-pill.ativo {
  background: var(--brand, #337ab7);
  color: white;
  border-color: var(--brand, #337ab7);
  box-shadow: 0 4px 12px -4px rgba(51, 122, 183, .5);
}
.ano-pill::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok, #14b8a6);
  box-shadow: 0 0 0 2px white;
}
.ano-pill.ativo::before { box-shadow: 0 0 0 2px var(--brand, #337ab7); }

.meses-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
.meses-vertical-label {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  font-weight: 600;
}
.anos-vazio {
  padding: 12px;
  background: var(--brand-soft, #f4f9fc);
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-style: italic;
}

/* ========================================================================
   UI#30 — Variante 5 (10/05/2026 noite — Lucas-Frontend + Júlia-UX)
   Calendário heatmap multi-ano + painel de detalhe lateral.
   Substitui visualmente a Variante B (dropdown ano + grid 4×3).
   Cor da célula = intensidade do R$ disponível (l1..l4) — paleta verde
   alinhada ao mockup canônico docs/mockups/UI-0030-v2.
   Tokens: --brand-* / --ok / --border / --text-muted (DOC#9).
   Regra dura: valor R$ DENTRO do chip (feedback_dono_prefere_informacoes_completas).
   ======================================================================== */
.resgate-heatmap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e2e8f0);
  margin-top: 6px;
}

.resgate-heatmap-body {
  display: grid;
  /* Heatmap precisa de ~600px pra 12 cells caberem com label de mês.
     Painel lateral fica fluido entre 220-280px. */
  grid-template-columns: minmax(560px, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
}

/* ---- Grid principal: cabeçalho + N linhas de ano ---- */
.resgate-heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rh-row {
  display: grid;
  /* UI#30 V5 ajuste 1 — colunas dos meses 65px mínimo (era 36px) pra comportar "9.999" sem vazar. */
  grid-template-columns: 44px repeat(12, minmax(65px, 1fr));
  gap: 4px;
  align-items: center;
}
.rh-row-header .rh-col-mes-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--text-muted, #64748b);
  text-align: center;
  padding-bottom: 2px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.rh-col-ano-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  letter-spacing: .04em;
  text-align: right;
  padding-right: 4px;
}

/* ---- Célula (chip do mês) ----
   UI#30 V5 ajuste 1 (10/05/2026 noite): largura mínima 65px (era ~50px) pra
   comportar valores truncados pt-BR como "9.999" sem vazar. fmtChip agora
   trunca + separador pt-BR ao invés de arredondar/compactar com "k". */
.rh-cell {
  appearance: none;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 4px 2px;
  min-height: 44px;
  min-width: 65px; /* UI#30 V5 ajuste 1 — 65px pra "9.999" caber */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  color: var(--text-muted, #64748b);
  /* Valor truncado pt-BR (fmtChip): "208" / "1.234" / "9.999" / "1,2M" */
  font-size: 11px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
}
.rh-cell:hover:not(.zero) {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(51, 122, 183, .35);
  z-index: 2;
}
.rh-cell:focus-visible {
  outline: 2px solid var(--brand, #337ab7);
  outline-offset: 1px;
  z-index: 2;
}
.rh-cell-valor {
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

/* Escala heatmap (verde Tef.Net — alinhada ao --ok / --success) */
.rh-cell.zero {
  background: var(--neutral-soft, #f4f5f7);
  border-style: dashed;
  cursor: default;
  opacity: 0.7;
}
.rh-cell.zero .rh-cell-valor { color: var(--text-muted, #94a3b8); font-weight: 400; }
.rh-cell.l1 {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(20, 184, 166, 0.25);
  color: var(--text, #2d3748);
}
.rh-cell.l2 {
  background: rgba(20, 184, 166, 0.35);
  border-color: rgba(20, 184, 166, 0.45);
  color: var(--text, #2d3748);
}
.rh-cell.l3 {
  background: rgba(20, 184, 166, 0.58);
  border-color: rgba(20, 184, 166, 0.65);
  color: #0f3a35;
  font-weight: 700;
}
.rh-cell.l4 {
  background: rgba(20, 184, 166, 0.82);
  border-color: rgba(20, 184, 166, 0.92);
  color: #fff;
  font-weight: 700;
}
.rh-cell.selected {
  outline: 2px solid var(--brand, #337ab7);
  outline-offset: 1px;
  box-shadow: 0 4px 12px -4px rgba(51, 122, 183, .5);
  z-index: 3;
}

/* F7-UI (Variante A — 12/05/2026) — Borda colorida + bolinha por status_resumo.
   Substitui a borda 1px padrao do .rh-cell por borda 2px na cor do status.
   Bolinha 8px no canto sup. direito reforca a comunicacao (colorblind-safe).
   Convive com .selected (outline-brand fica POR FORA da borda — sem conflito). */
.rh-cell.rh-cell-status-nenhum        { border: 2px solid var(--ag-status-resgate-nenhum, #ef4444); }
.rh-cell.rh-cell-status-em-andamento  { border: 2px solid var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-cell.rh-cell-status-todos-pagos   { border: 2px solid var(--ag-status-resgate-todos-pagos, #16a34a); }

.rh-cell.rh-cell-status-nenhum::after,
.rh-cell.rh-cell-status-em-andamento::after,
.rh-cell.rh-cell-status-todos-pagos::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--surface, #fff);
  pointer-events: none;
}
.rh-cell.rh-cell-status-nenhum::after        { background: var(--ag-status-resgate-nenhum, #ef4444); }
.rh-cell.rh-cell-status-em-andamento::after  { background: var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-cell.rh-cell-status-todos-pagos::after   { background: var(--ag-status-resgate-todos-pagos, #16a34a); }

/* B#31 (21/05/2026) — Badge "Disponivel para resgate".
   Overlay INDEPENDENTE do status_resumo (decisao Q1=C + Q2=C do mockup
   B-0031-v1): aparece sempre que a competencia tem valor disponivel nunca
   solicitado pelo parceiro, esteja o chip verde "Todos pagos", laranja
   "Em andamento" ou qualquer outro. Moeda azul (#2563eb) no canto SUPERIOR
   ESQUERDO — o canto direito e da bolinha de status (.rh-cell-status-*::after
   e .rh-cell.wait::after), entao nao ha colisao. Fica dentro do
   overflow:hidden do .rh-cell (inset 2px), igual a bolinha de status.
   NAO toca dimensao da celula (regra dura do dono — paridade pixel com
   os demais chips): position:absolute + pointer-events:none. */
.rh-cell-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ag-status-resgate-disponivel, #2563eb);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px var(--surface, #fff);
  pointer-events: none;
  z-index: 1;
}
/* Modo glass-dark — moeda levemente clareada (blue-500) pra manter contraste
   sobre as celulas escuras; o anel usa o --surface escuro do tema. */
.page-dashboard-v2.glass-dark .rh-cell-badge {
  background: #3b82f6;
}

/* UI#54 (16/05/2026 — Lucas-Frontend) — Celula "Aguardando pagamentos".
   Faturamento > 0 e comissao = 0 (mar/2026 do cod=417 e o caso canonico).
   REGRA DURA do dono: mesma largura/altura/font/padding que warn/ok/bad —
   so cor muda. Por isso aqui SOMENTE background/border/color sao tocados;
   nenhuma propriedade dimensional. Bolinha 8px no canto superior direito
   herda do padrao .rh-cell.rh-cell-status-*::after (mesma posicao e size).
   Refino visual rodada 2 (16/05/2026 noite — smoke do dono): paleta roxa
   clareada (era #241638/#5b3aa3/#d6c5ff). Mantem identidade roxa mas
   ganha legibilidade. Dot lilas (#b388ff) inalterado — ja contrastava bem. */
.rh-cell.wait {
  background: #3d2960;
  border: 2px solid #8c6cdc;
  color: #ede0ff;
}
.rh-cell.wait::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b388ff;
  box-shadow: 0 0 0 1.5px var(--surface, #fff);
  pointer-events: none;
}
/* UI#54 refino rodada 2 — destacar o numero dentro da celula wait.
   `.wait-icon` (ampulheta ⏳) fica levemente mais discreto pra o numero
   saltar. `.wait-count` ganha font-weight 700 + cor branca quase pura.
   gap: 4px entre icone e numero, inline-flex herda do .rh-cell-valor. */
.rh-cell.wait .rh-cell-valor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rh-cell.wait .wait-icon {
  color: #d4c0ff;
  font-weight: 400;
}
.rh-cell.wait .wait-count {
  color: #ffffff;
  font-weight: 700;
}
/* Modo glass-dark do dashboard mantem a mesma paleta clareada. */
.page-dashboard-v2.glass-dark .rh-cell.wait {
  background: #3d2960;
  border-color: #8c6cdc;
  color: #ede0ff;
}

/* ---- Painel lateral de detalhe ---- */
.resgate-heatmap-detalhe {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rh-detalhe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-muted, #94a3b8);
  font-size: 12.5px;
  text-align: center;
  gap: 8px;
}
.rh-detalhe-empty-ico {
  font-size: 28px;
  opacity: 0.5;
}
.rh-detalhe-empty p { margin: 0; line-height: 1.4; }

.rh-detalhe-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rh-detalhe-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.rh-detalhe-mes {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #2d3748);
  margin-bottom: 2px;
}
.rh-detalhe-big {
  font-size: 24px;
  font-weight: 800;
  color: var(--ok, #14b8a6);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.rh-detalhe-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border, #e2e8f0);
  color: var(--text-muted, #64748b);
}
.rh-detalhe-row b {
  color: var(--text, #2d3748);
  font-weight: 600;
}
.rh-status-ok   { color: var(--ok, #14b8a6) !important; }
.rh-status-warn { color: var(--warning-dark, #b97a23) !important; }
.rh-status-muted{ color: var(--text-muted, #94a3b8) !important; }

.rh-detalhe-action {
  margin-top: 10px;
  width: 100%;
  font-size: 12.5px;
}

/* ---- Legenda ---- */
.resgate-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  flex-wrap: wrap;
  padding: 6px 2px 0;
}
.rh-leg-sw {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border, #e2e8f0);
}
.rh-leg-sw.zero { background: var(--neutral-soft, #f4f5f7); border-style: dashed; }
.rh-leg-sw.l1 { background: rgba(20, 184, 166, 0.18); border-color: rgba(20, 184, 166, 0.30); }
.rh-leg-sw.l2 { background: rgba(20, 184, 166, 0.35); border-color: rgba(20, 184, 166, 0.45); }
.rh-leg-sw.l3 { background: rgba(20, 184, 166, 0.58); border-color: rgba(20, 184, 166, 0.65); }
.rh-leg-sw.l4 { background: rgba(20, 184, 166, 0.82); border-color: rgba(20, 184, 166, 0.92); }
.rh-leg-pico {
  font-weight: 600;
  color: var(--text, #2d3748);
}

/* ---- Legenda em 3 zonas (UI#30 V5 ajuste 3 — 10/05/2026 noite) ---------
   Rodapé do heatmap distribui:
     [zona esquerda: swatches "menos → mais"] | [zona centro: Total + Pico] | [zona direita: botão Limpar mês]
   Mantém wrap em telas estreitas (mobile empilha cada zona).
   ----------------------------------------------------------------------- */
.resgate-heatmap-legend-3zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rh-leg-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rh-leg-zone-left { flex: 0 0 auto; }
.rh-leg-zone-center {
  flex: 1 1 auto;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text, #2d3748);
}
.rh-leg-zone-right { flex: 0 0 auto; }
.rh-leg-total {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.rh-leg-total-label {
  font-weight: 600;
  color: var(--text-muted, #64748b);
}
.rh-leg-total .resgate-total-valor {
  font-size: 13px;
  font-weight: 700;
  color: var(--ok, #14b8a6);
}
.rh-leg-sep {
  opacity: 0.5;
  margin: 0 2px;
}
/* Dark mode mantém contraste — Total verde forte continua, label cinza claro. */
.page-dashboard-v2.glass-dark .rh-leg-zone-center { color: #e6ecff; }
.page-dashboard-v2.glass-dark .rh-leg-total-label { color: #9aa6c7; }
.page-dashboard-v2.glass-dark .rh-leg-total .resgate-total-valor { color: #6ee7b7; }

/* ---- F7-UI (12/05/2026 — Variante A) — Legenda nova "Status do resgate" -----
   Bloco separado embaixo da legenda 3-zonas (intensidade R$). 4 chips:
   nenhum / em_andamento / todos_pagos / sem_dado. Cada chip tem swatch
   replicando o estilo do .rh-cell (borda 2px colorida + bolinha) pro operador
   bater olho e entender o codigo visual sem precisar do tooltip.
   Layout: flex centralizado, wrap em telas estreitas. */
.resgate-heatmap-legend-status {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--brand-soft, #f4f9fc);
  border: 1px solid var(--brand-pale, #e8f1f9);
  border-radius: 8px;
  font-size: 12px;
}
.rh-leg-status-titulo {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  align-self: center;
  margin-right: 4px;
}
.rh-leg-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  font-weight: 600;
  color: var(--text, #2d3748);
}
.rh-leg-status-sample {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(20, 184, 166, 0.35);
  position: relative;
}
.rh-leg-status-sample.st-nenhum        { border: 2px solid var(--ag-status-resgate-nenhum, #ef4444); }
.rh-leg-status-sample.st-em-andamento  { border: 2px solid var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-leg-status-sample.st-todos-pagos   { border: 2px solid var(--ag-status-resgate-todos-pagos, #16a34a); }
.rh-leg-status-sample.st-nenhum::after,
.rh-leg-status-sample.st-em-andamento::after,
.rh-leg-status-sample.st-todos-pagos::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--surface, #fff);
}
.rh-leg-status-sample.st-nenhum::after       { background: var(--ag-status-resgate-nenhum, #ef4444); }
.rh-leg-status-sample.st-em-andamento::after { background: var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-leg-status-sample.st-todos-pagos::after  { background: var(--ag-status-resgate-todos-pagos, #16a34a); }
.rh-leg-status-sample.st-sem-dado {
  background: var(--neutral-soft, #f4f5f7);
  border: 1px dashed var(--ag-status-resgate-sem-dado, #cbd5e1);
}
/* UI#54 — swatch roxo da legenda do 5o chip "Aguardando pagamentos".
   Mesma logica visual da celula .rh-cell.wait: fundo roxo + borda lilas
   + bolinha lilas clara no canto. Paleta clareada na rodada 2 (16/05/2026)
   pra acompanhar o refino do chip principal. */
.rh-leg-status-sample.st-aguardando-pagamentos {
  background: #3d2960;
  border: 2px solid #8c6cdc;
}
.rh-leg-status-sample.st-aguardando-pagamentos::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b388ff;
  box-shadow: 0 0 0 1px var(--surface, #fff);
}
/* B#31 — swatch da legenda do badge "Disponivel para resgate".
   Diferente dos outros samples (borda + bolinha de status no canto direito):
   aqui o sample replica um chip normal (fundo teal) com a moeda azul no
   canto SUPERIOR ESQUERDO — exatamente como o badge aparece sobre o chip. */
.rh-leg-status-sample.st-disponivel {
  background: rgba(20, 184, 166, 0.35);
  border: 1px solid var(--border, #e2e8f0);
}
.rh-leg-status-sample.st-disponivel::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ag-status-resgate-disponivel, #2563eb);
  box-shadow: 0 0 0 1px var(--surface, #fff);
}

/* Pill colorida usada no painel detalhe lateral (renderDetalhe) e
   defensivamente em outros pontos. */
.rh-detalhe-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rh-detalhe-status-pill::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.rh-detalhe-status-pill.st-nenhum {
  background: rgba(239, 68, 68, .12);
  color: var(--ag-status-resgate-nenhum, #ef4444);
  border: 1px solid rgba(239, 68, 68, .32);
}
.rh-detalhe-status-pill.st-nenhum::before { background: var(--ag-status-resgate-nenhum, #ef4444); }
.rh-detalhe-status-pill.st-em-andamento {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .32);
}
.rh-detalhe-status-pill.st-em-andamento::before { background: var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-detalhe-status-pill.st-todos-pagos {
  background: rgba(22, 163, 74, .12);
  color: var(--ag-status-resgate-todos-pagos, #16a34a);
  border: 1px solid rgba(22, 163, 74, .32);
}
.rh-detalhe-status-pill.st-todos-pagos::before { background: var(--ag-status-resgate-todos-pagos, #16a34a); }
/* UI#54 refino rodada 3 (16/05/2026 noite — smoke do dono v2):
   pill lilas pra "Aguardando pagamentos" no painel lateral #rh-detalhe.
   Mesma paleta usada na legenda (.st-aguardando-pagamentos do rodape)
   adaptada ao formato pill (fundo translucido + texto + dot). */
.rh-detalhe-status-pill.st-aguardando-pagamentos {
  background: rgba(179, 136, 255, .14);
  color: #6b46c1;
  border: 1px solid rgba(179, 136, 255, .38);
}
.rh-detalhe-status-pill.st-aguardando-pagamentos::before { background: #b388ff; }
/* B#31 — pill azul "Disponivel para resgate" no painel "Mes focado".
   Mostra o VALOR (R$) em destaque — chamada pra acao do parceiro. Mesma
   estrutura dos demais pills (fundo translucido + texto + dot azul). */
.rh-detalhe-status-pill.st-disponivel {
  background: rgba(37, 99, 235, .12);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, .34);
}
.rh-detalhe-status-pill.st-disponivel::before { background: var(--ag-status-resgate-disponivel, #2563eb); }

/* UI#54 refino rodada 2 (16/05/2026 noite — smoke do dono):
   Bloco extra "Faturamento aguardando pagamento" REMOVIDO do painel
   lateral. O dono pediu pra voltar ao padrao visual anterior (sem bloco
   roxo extra), porque as 3 infos (boletos pagos X/X, Premium, Standard,
   Status do resgate) ja sao mostradas no resumo padrao do mes focado.
   Classes `.rh-detalhe-wait-block` / `.rh-detalhe-wait-title` /
   `.rh-detalhe-card-wait` foram removidas (dead code).
   Markup correspondente removido em dashboard.js (renderDetalhe). */

/* ---- Responsivo ---- */
@media (max-width: 1024px) {
  /* Painel detalhe vai pra baixo (empilha) em telas estreitas */
  .resgate-heatmap-body {
    grid-template-columns: 1fr;
  }
}
/* UI#30 V5 rodada 2 — AJUSTE 1 (v0.7.45, 10/05/2026):
   Responsivo mobile do heatmap. Layout column + scroll horizontal no grid +
   painel detalhe full-width embaixo + legenda 3-zone empilhada. Testado
   visualmente em iPhone SE (375px) e mantém grid 12-col com scroll. */
@media (max-width: 768px) {
  /* Body vira coluna — painel detalhe fica embaixo do grid (já era assim no 1024 mas reforça). */
  .resgate-heatmap-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Grid principal ganha scroll horizontal — 12 cells continuam, basta arrastar.
     Min-width garante que cells não comprimem demais. */
  .resgate-heatmap-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Padding-bottom dá respiro pra scrollbar nativa de mobile */
    padding-bottom: 4px;
  }
  /* Cell reduzida pra 50px — cabe + chips no viewport sem comprimir valor pt-BR. */
  .rh-row {
    grid-template-columns: 40px repeat(12, minmax(50px, 1fr));
    gap: 3px;
  }
  .rh-cell {
    font-size: 10px;
    min-width: 50px;
    min-height: 36px;
    padding: 3px 1px;
  }
  .rh-col-ano-label { font-size: 10px; padding-right: 2px; }
  .rh-row-header .rh-col-mes-label { font-size: 8px; }
  /* Painel detalhe vai full-width embaixo */
  .resgate-heatmap-detalhe {
    width: 100%;
    min-height: auto;
  }
  /* Legenda 3 zonas vira coluna — empilha menos→mais / total+pico / limpar mês */
  .resgate-heatmap-legend-3zone {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .rh-leg-zone {
    justify-content: center;
  }
  .rh-leg-zone-right {
    justify-content: center;
  }
}
@media (max-width: 720px) {
  /* Fallback antigo (mantido pra não quebrar layout em testes existentes) */
  .rh-col-ano-label { font-size: 10px; padding-right: 2px; }
  .rh-row-header .rh-col-mes-label { font-size: 8px; }
}

/* ---- Dark mode (DOC#9 .glass-dark) ---- */
.page-dashboard-v2.glass-dark .resgate-heatmap-detalhe {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.page-dashboard-v2.glass-dark .rh-col-ano-label,
.page-dashboard-v2.glass-dark .rh-row-header .rh-col-mes-label,
.page-dashboard-v2.glass-dark .rh-detalhe-title,
.page-dashboard-v2.glass-dark .rh-detalhe-row { color: #9aa6c7; }
.page-dashboard-v2.glass-dark .rh-cell {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #c2cce0;
}
.page-dashboard-v2.glass-dark .rh-cell.zero { background: rgba(255,255,255,0.02); }
.page-dashboard-v2.glass-dark .rh-cell.l1 { background: rgba(34,197,94,0.18); color: #c2cce0; }
.page-dashboard-v2.glass-dark .rh-cell.l2 { background: rgba(34,197,94,0.35); color: #e6ecff; }
.page-dashboard-v2.glass-dark .rh-cell.l3 { background: rgba(34,197,94,0.55); color: #fff; }
.page-dashboard-v2.glass-dark .rh-cell.l4 { background: rgba(34,197,94,0.78); color: #fff; }
.page-dashboard-v2.glass-dark .rh-detalhe-mes,
.page-dashboard-v2.glass-dark .rh-detalhe-row b { color: #e6ecff; }
.page-dashboard-v2.glass-dark .rh-detalhe-big { color: #6ee7b7; }
.page-dashboard-v2.glass-dark .rh-leg-pico { color: #e6ecff; }

/* ========================================================================
   UI#30 V5 rodada 2 — info-tooltip glass (v0.7.45, 10/05/2026)
   Tooltip custom genérico (chip do heatmap, X/Y do painel detalhe, etc.).
   Coexiste com .help-tooltip (UI#29) — singletons separados no DOM.
   Visual idêntico ao help-tooltip (glass Banking DOC#9, paleta brand).
   ======================================================================== */
.info-tooltip {
  position: fixed;
  background: rgba(20, 30, 50, 0.92);
  color: #e8ecf3;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(51, 122, 183, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 10000;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
  /* Default position antes do JS posicionar — fica fora da tela */
  top: -9999px;
  left: -9999px;
}
.info-tooltip[data-open] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}
.info-tooltip-body {
  font-size: 12.5px;
  color: #e8ecf3;
}
.info-tooltip-body strong {
  display: block;
  font-weight: 700;
  color: #64b5f6; /* accent — alinhado ao .help-tooltip-title */
  font-size: 13px;
  margin-bottom: 4px;
}
.info-tooltip-body div {
  margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .info-tooltip {
    transition: opacity 0s !important;
    transform: none !important;
  }
}

/* ========================================================================
   UI#30 V5 rodada 2 — seletor-comp UNIFICADO (v0.7.45, 10/05/2026)
   AJUSTE 5: dropdown competência movido pra dentro do bloco "Resgate
   disponível". Layout column full-width — header + actions row + chips +
   heatmap + legenda. Substitui seletor-comp-grid-2col que partia em colunas.
   ======================================================================== */
.seletor-comp-unified {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}
.seletor-comp-unified .comp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.seletor-comp-unified .comp-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #2d3748);
  margin: 0;
  letter-spacing: -0.01em;
}
.seletor-comp-unified .comp-subtitulo {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-weight: 400;
}
.seletor-comp-unified .comp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seletor-comp-unified .comp-actions .comp-dropdown {
  position: relative;
  flex: 0 0 auto;
}
.seletor-comp-unified .comp-meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.seletor-comp-unified .comp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
/* Mobile: header/actions empilham natural */
@media (max-width: 768px) {
  .seletor-comp-unified {
    padding: 14px 14px;
  }
  .seletor-comp-unified .comp-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .seletor-comp-unified .comp-meta {
    text-align: center;
  }
}

/* ========================================================================
   UI#23 — Conta da Competência + Histórico (09/05/2026)
   Componente conta-da-competencia.js + bloco histórico no dashboard.
   Tokens: usa --brand-* / --success / --warning / --danger / --border (DOC#9 v8).
   ======================================================================== */

/* Toolbar do bloco Conta */
.conta-toolbar {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.conta-toolbar-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conta-toolbar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft, #9aa3b2);
  font-weight: 500;
}
.conta-toolbar-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #2d3748);
}
.conta-toolbar-value.brand {
  color: var(--brand, #337ab7);
  font-size: 15px;
}
.conta-toolbar-divider {
  width: 1px;
  height: 32px;
  background: var(--border, #e5e9f0);
}
.conta-toolbar-spacer { flex: 1; }
.badge-multi {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warning-soft, #fff8e1);
  color: var(--warning-dark, #b97a23);
  font-size: 9px;
  font-weight: 700;
  margin-left: 6px;
  letter-spacing: .04em;
}

/* Toggle Tudo/Premium/Standard (E-08) */
.modalidade-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--neutral-soft, #f1f3f5);
  padding: 3px;
  border-radius: 6px;
}
.modalidade-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  transition: all .12s;
}
.modalidade-toggle button.active {
  background: var(--surface, #fff);
  color: var(--brand, #337ab7);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.modalidade-toggle button:not(.active):hover { color: var(--text, #2d3748); }

.btn-reapurar {
  border: 1px solid var(--brand, #337ab7);
  color: var(--brand, #337ab7);
  background: var(--brand-soft, #e8f1fb);
}
.btn-reapurar:hover {
  background: var(--brand, #337ab7);
  color: #fff;
}

/* UI#23 Onda 5 — Botão Fechar competência + estados */
.btn-fechar {
  border: 1px solid var(--success, #5cb85c);
  color: var(--success-dark, #3d8b3d);
  background: var(--success-soft, #e8f5e9);
}
.btn-fechar:hover {
  background: var(--success, #5cb85c);
  color: #fff;
}
.badge-fechada {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--success-soft, #e8f5e9);
  color: var(--success-dark, #3d8b3d);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #c5e6c5;
  cursor: help;
}
.badge-aguarda-apurar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--neutral-soft, #f1f3f5);
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border, #e5e9f0);
  font-style: italic;
  cursor: help;
}

/* Banner info de reapuração auto */
.conta-banner-info {
  background: var(--info-soft, #e3f4fb);
  border: 1px solid #bee5f0;
  color: #1e6585;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.conta-banner-info i {
  font-size: 18px;
  color: var(--info, #5bc0de);
}

/* Bloco principal */
.bloco-conta-host { /* container */ }
.bloco-conta-skel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 0;
}
.conta-bloco {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.bloco-titulo-info { color: var(--brand-dark, #286090); }

.conta-group-sub {
  margin: 8px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft, #9aa3b2);
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border, #e5e9f0);
}
.conta-group-sub:first-child { margin-top: 0; }

/* Grid de cards — 4 colunas em desktop, 2 em tablet, 1 em mobile */
.conta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 1100px) {
  .conta-grid { grid-template-columns: repeat(2, 1fr); }
  .bloco-conta-skel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .conta-grid { grid-template-columns: 1fr; }
  .bloco-conta-skel { grid-template-columns: 1fr; }
}

/* Card individual */
.ind-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 6px;
  padding: 12px 14px;
  transition: all .12s;
  position: relative;
}
.ind-card-split {
  cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.ind-card-split:hover {
  border-color: var(--brand, #337ab7);
  background: var(--brand-soft, #e8f1fb);
}
.ind-card-split:focus-visible {
  outline: 2px solid var(--brand, #337ab7);
  outline-offset: 2px;
}
.ind-card-split.expanded {
  border-color: var(--brand, #337ab7);
  background: var(--brand-soft, #e8f1fb);
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
.ind-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.ind-value {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #2d3748);
  margin: 4px 0 0;
}
.ind-value-muted { color: var(--text-soft, #9aa3b2); font-weight: 600; }
.ind-value-success { color: var(--success-dark, #3d8b3d); }
.ind-value-warn { color: var(--warning-dark, #b97a23); }
.ind-value-alert { color: var(--danger, #d9534f); }
.ind-sub {
  font-size: 11px;
  color: var(--text-soft, #9aa3b2);
  margin-top: 2px;
}

/* FIX B-UX (10/05/2026 noite — Lucas-Frontend): dica inline no card KPI
   "Vr. à Resgatar". Aparece quando há valor disponível mas o ciclo ainda
   não está fechado (apurada/null). Explica por que o botão Solicitar
   Resgate fica desabilitado. */
.kpi-dica {
  font-size: 0.78rem;
  color: var(--warn, #d97706);
  margin-top: 4px;
  font-weight: 500;
  background: rgba(240, 185, 78, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid var(--warn, #d97706);
}

/* Breakdown Premium/Standard (E-08) */
.ind-breakdown {
  display: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border, #e5e9f0);
  font-size: 11px;
}
.ind-card-split.expanded .ind-breakdown { display: block; }
.ind-bp {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  font-family: "SF Mono", "Menlo", monospace;
}
.ind-bp-prem { color: #8b5cf6; font-weight: 600; }
.ind-bp-std { color: var(--brand, #337ab7); font-weight: 600; }
.ind-arrow {
  position: absolute;
  right: 10px;
  top: 12px;
  font-size: 9px;
  color: var(--text-soft, #9aa3b2);
  transition: transform .15s;
}
.ind-card-split.expanded .ind-arrow {
  transform: rotate(180deg);
  color: var(--brand, #337ab7);
}

/* Filtro Premium/Standard via classe no .conta-bloco (E-08) */
.conta-bloco.mod-premium .ind-bp-std,
.conta-bloco.mod-premium .ind-bp:has(.ind-bp-std) { opacity: .35; }
.conta-bloco.mod-standard .ind-bp-prem,
.conta-bloco.mod-standard .ind-bp:has(.ind-bp-prem) { opacity: .35; }
.conta-bloco.mod-premium .ind-card-split:not(.expanded) .ind-value::after {
  content: ' (Premium)';
  font-size: 10px;
  color: #8b5cf6;
  font-weight: 500;
}
.conta-bloco.mod-standard .ind-card-split:not(.expanded) .ind-value::after {
  content: ' (Standard)';
  font-size: 10px;
  color: var(--brand, #337ab7);
  font-weight: 500;
}

/* Negativos (vermelho — paridade conta.php) */
.conta-negativos {
  background: var(--danger-soft, #fde8e7);
  border: 1px solid #f5c2bf;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.conta-negativos .ind-card {
  background: transparent;
  border: 0;
  padding: 0;
}
.conta-negativos .ind-card:hover { background: transparent; }
.conta-negativos .ind-label { color: #8a2c28; }
.conta-negativos .ind-value { color: #8a2c28; }
@media (max-width: 800px) {
  .conta-negativos { grid-template-columns: 1fr; }
}

/* Stats extras (E-10) */
.conta-stats-extra {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .conta-stats-extra { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .conta-stats-extra { grid-template-columns: 1fr; }
}
.stat-pill {
  background: var(--neutral-soft, #f1f3f5);
  border-radius: 6px;
  padding: 10px 12px;
}
.stat-pill.stat-pp {
  background: linear-gradient(135deg, var(--brand-soft, #e8f1fb), #f0f6fc);
}
.stat-pill-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}
.stat-pill-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #2d3748);
  margin-top: 2px;
}
.stat-pill-value.success { color: var(--success-dark, #3d8b3d); }
.stat-pill-value.warn { color: var(--warning-dark, #b97a23); }
.stat-pill-value.alert { color: var(--danger, #d9534f); }

.barra-pgs {
  background: var(--surface, #fff);
  border-radius: 6px;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e9f0);
}
.barra-pgs-label {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
}
.barra-stack {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--neutral-soft, #f1f3f5);
}
.barra-pgs-fill { background: var(--success, #5cb85c); }
.barra-npg-fill { background: var(--warning, #f0ad4e); }
.barra-canc-fill { background: var(--danger, #d9534f); }
.barra-pgs-leg {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  flex-wrap: wrap;
}
.barra-pgs-leg span::before { content: "■ "; }
.barra-pgs-leg .lg-pgs { color: var(--success-dark, #3d8b3d); }
.barra-pgs-leg .lg-npg { color: var(--warning-dark, #b97a23); }
.barra-pgs-leg .lg-canc { color: var(--danger, #d9534f); }

/* CTA contextual de Resgatar (E-07: 2º botão dentro do bloco Conta) */
.conta-cta-resgate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--success-soft, #e8f5e9), #f0fbef);
  border: 1px solid #c5e6c5;
  border-radius: 6px;
  flex-wrap: wrap;
  gap: 12px;
}
.conta-cta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conta-cta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--success-dark, #3d8b3d);
  font-weight: 500;
}
.conta-cta-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--success-dark, #3d8b3d);
  font-family: "SF Mono", "Menlo", monospace;
}
.btn-resgatar-conta {
  white-space: nowrap;
}

/* Help footer */
.conta-help-foot {
  font-size: 11px;
  color: var(--text-soft, #9aa3b2);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e5e9f0);
}
.conta-help-foot strong { color: var(--text-muted, #6b7280); }
.conta-help-foot code {
  background: var(--neutral-soft, #f1f3f5);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--text, #2d3748);
}

/* ========================================================================
   Histórico (sparkline + YTD + delta) — UI#23
   ======================================================================== */
.bloco-historico-host { /* container */ }
.hist-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .hist-grid { grid-template-columns: 1fr; }
}
.hist-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.hist-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  margin-bottom: 8px;
}
.hist-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #2d3748);
  font-family: "SF Mono", "Menlo", monospace;
}
.hist-card-value.brand { color: var(--brand-dark, #286090); }
.hist-card-meta {
  font-size: 11px;
  color: var(--text-soft, #9aa3b2);
  margin-top: 4px;
}

.hist-spark { /* primeira coluna 2x */ }
.hist-spark-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 60px;
  margin-top: 8px;
}
.hist-spark-bars .spark-bar,
.hist-spark-bars .spark-bar-atual,
.hist-spark-bars .spark-bar-min {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: opacity .12s;
  cursor: help;
  min-height: 4px;
}
.hist-spark-bars .spark-bar { background: var(--brand, #337ab7); opacity: .85; }
.hist-spark-bars .spark-bar:hover { opacity: 1; }
.hist-spark-bars .spark-bar-atual {
  background: var(--success, #5cb85c);
}
.hist-spark-bars .spark-bar-min {
  background: var(--brand-soft, #e8f1fb);
  border: 1px solid var(--brand, #337ab7);
}
.hist-spark-meses {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-soft, #9aa3b2);
  text-transform: uppercase;
}
.hist-spark-meses span {
  flex: 1;
  text-align: center;
}
.hist-spark-meses span.atual {
  color: var(--success-dark, #3d8b3d);
  font-weight: 600;
}

.hist-delta-up { color: var(--success-dark, #3d8b3d); }
.hist-delta-down { color: var(--danger, #d9534f); }
.hist-delta-neutral { color: var(--text-muted, #6b7280); }

/* =================================================================
   AUTH#3 Opção C — Gestão de Dev: Cron Manual + Backup & Rollback
   v0.7.33 (10/05/2026 tarde)
   ================================================================= */
.page-tabs-host { margin-bottom: 16px; }
.page-tabs-content { min-height: 300px; }

.dev-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dev-info-card,
.dev-action-card {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 16px 20px;
}

.dev-info-title,
.dev-action-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #111827);
}

.dev-info-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted, #4b5563);
}
.dev-info-list code {
  background: var(--surface-2, #f3f4f6);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.dev-info-hint,
.dev-action-hint {
  margin: 8px 0;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}
.dev-action-hint code {
  background: var(--surface-2, #f3f4f6);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.dev-code-block {
  background: var(--surface-2, #1f2937);
  color: var(--text-on-dark, #e5e7eb);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  overflow-x: auto;
  margin: 8px 0 0;
}
.dev-code-block code { color: inherit; background: none; padding: 0; }

.dev-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.dev-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.dev-form-row label { font-size: 13px; color: var(--text-muted, #4b5563); min-width: 0; }

.dev-input,
.dev-select {
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 13px;
  background: var(--surface-1, #fff);
  color: var(--text, #111827);
}
.dev-input:focus,
.dev-select:focus {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 1px;
}

.dev-badge-pending {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  vertical-align: middle;
}

/* FIX C (10/05/2026 noite — Lucas-Frontend): cron manual — picker ano+mês
   substitui input "AAAA-MM" + caixa explicativa substitui badge "Aguarda AUTH#3". */
.dev-comp-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dev-comp-picker .dev-select { min-width: 110px; }
.dev-comp-preview {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
}
.dev-comp-preview code {
  background: var(--surface-2, #f3f4f6);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--accent, #337ab7);
  font-weight: 600;
}
.dev-cli-hint {
  margin-top: 12px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 3px solid var(--warn, #f59e0b);
  border-radius: 6px;
  padding: 10px 14px;
}
.dev-cli-hint-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #111827);
  margin-bottom: 8px;
}
.dev-cli-hint-body {
  font-size: 13px;
  color: var(--text-muted, #4b5563);
}
.dev-cli-cmd {
  background: #1f2937;
  color: #e5e7eb;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  overflow-x: auto;
  margin: 6px 0 8px;
  white-space: pre;
}
.dev-cli-cmd code { color: inherit; background: none; padding: 0; }
.btn.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* Tabela de backups */
.dev-backup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dev-backup-table th,
.dev-backup-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  text-align: left;
}
.dev-backup-table th {
  font-weight: 600;
  color: var(--text-muted, #4b5563);
  background: var(--surface-2, #f9fafb);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dev-backup-table code {
  font-size: 12px;
  background: var(--surface-2, #f3f4f6);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Diagnóstico de Rollback — 3 cards lado a lado */
.dev-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.dev-diag-card {
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 12px 14px;
}
.dev-diag-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
}
.dev-diag-card.dev-diag-a { border-left-color: #10b981; }
.dev-diag-card.dev-diag-b { border-left-color: #f59e0b; }
.dev-diag-card.dev-diag-c { border-left-color: #ef4444; }
.dev-diag-stat {
  font-size: 13px;
  color: var(--text, #111827);
  margin: 4px 0;
}
.dev-diag-stat strong {
  font-size: 15px;
  color: var(--accent, #337ab7);
}
.dev-diag-meta {
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  margin-top: 6px;
  word-break: break-word;
}
.dev-diag-meta code {
  background: var(--surface-1, #fff);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* Botões de Rollback (todos disabled enquanto AUTH#3 não aprovar) */
.dev-rollback-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.btn-rb-a:not(:disabled) { color: #047857; border-color: rgba(16, 185, 129, 0.4); }
.btn-rb-b:not(:disabled) { color: #b45309; border-color: rgba(245, 158, 11, 0.4); }
.btn-rb-c:not(:disabled) { color: #b91c1c; border-color: rgba(239, 68, 68, 0.4); }

.dev-warn-card {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text, #111827);
  line-height: 1.55;
}

/* =================================================================
   UI#33 — Editor de Diretrizes NF (Gestão Dev → aba Diretrizes NF)
   v0.7.48 (10/05/2026 madrugada virada 2)
   ================================================================= */
.diretrizes-nf-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.diretrizes-nf-status {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
.diretrizes-nf-status-dirty {
  color: #b45309;
  font-weight: 600;
  font-style: normal;
}

.diretrizes-nf-editor-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .diretrizes-nf-editor-cols {
    grid-template-columns: 1fr;
  }
}

.diretrizes-nf-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* permite shrink em grid */
}
.diretrizes-nf-col-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
}

.diretrizes-nf-textarea {
  width: 100%;
  min-height: 500px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-1, #fff);
  color: var(--text, #111827);
  resize: vertical;
  box-sizing: border-box;
  tab-size: 2;
}
.diretrizes-nf-textarea:focus {
  outline: 2px solid var(--accent, #337ab7);
  outline-offset: 1px;
  border-color: var(--accent, #337ab7);
}

.diretrizes-nf-charcount {
  margin-top: 6px;
  font-size: 11.5px;
  text-align: right;
}
.diretrizes-nf-charcount-over {
  color: var(--danger, #d9534f);
  font-weight: 700;
}

.diretrizes-nf-preview {
  min-height: 500px;
  padding: 12px 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--surface-2, #f9fafb);
  color: var(--text, #111827);
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  box-sizing: border-box;
}
.diretrizes-nf-preview h1,
.diretrizes-nf-preview h2,
.diretrizes-nf-preview h3 {
  margin: 14px 0 8px;
  font-weight: 600;
  color: var(--text, #111827);
}
.diretrizes-nf-preview h1 { font-size: 20px; border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 6px; }
.diretrizes-nf-preview h2 { font-size: 16px; }
.diretrizes-nf-preview h3 { font-size: 14px; color: var(--text-muted, #4b5563); }
.diretrizes-nf-preview h1:first-child,
.diretrizes-nf-preview h2:first-child,
.diretrizes-nf-preview h3:first-child { margin-top: 0; }
.diretrizes-nf-preview p { margin: 8px 0; }
.diretrizes-nf-preview ul {
  margin: 8px 0;
  padding-left: 22px;
}
.diretrizes-nf-preview li { margin: 3px 0; }
.diretrizes-nf-preview blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--accent, #337ab7);
  background: rgba(51, 122, 183, 0.06);
  color: var(--text, #111827);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}
.diretrizes-nf-preview code {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.diretrizes-nf-preview strong { font-weight: 700; }

/* ============================================================================
   RES#2 Sprint B — Bandeja de Resgates (workflow Tef.Net aprovar/reprovar)
   Tokens DOC#9: --warn / --rejected / --ok / --accent / --border / --surface-*
============================================================================ */
.bandeja-resgates-card .dev-card-header { align-items: center; }
.bandeja-resgates-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bandeja-resgates-contador {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.bandeja-resgates-contador strong {
  color: var(--text, #111827);
  font-size: 15px;
}
.bandeja-resgates-table {
  width: 100%;
  border-collapse: collapse;
}
.bandeja-resgates-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-2, #f9fafb);
}
.bandeja-resgates-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: middle;
  font-size: 13px;
}
.bandeja-resgates-table tbody tr:hover {
  background: var(--surface-2, #f9fafb);
}
.bandeja-parceiro-nome {
  font-weight: 500;
  color: var(--text, #111827);
  /* máximo de 2 linhas, com elipse */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 280px;
}
.bandeja-resgates-table .btn-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--ok, #22c55e);
  border-color: rgba(34, 197, 94, 0.35);
  margin-right: 4px;
}
.bandeja-resgates-table .btn-success:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.2);
}
.bandeja-resgates-table .btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--rejected, #d9534f);
  border-color: rgba(239, 68, 68, 0.35);
}
.bandeja-resgates-table .btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
}
.bandeja-resgates-table .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.diretrizes-nf-preview em { font-style: italic; }

/* ============================================================================
   RES#2 Sprint C — Modal "Solicitar Resgate" (solicitar-resgate-modal.js)
   Tokens DOC#9: --accent / --ok / --rejected / --warn / --border / --surface-*
   Layout vertical em sections; uploads em drop-zone visual.
============================================================================ */

.srm-body { display: flex; flex-direction: column; gap: 18px; }

.srm-cabecalho {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
}
.srm-resumo { display: flex; flex-direction: column; }
.srm-resumo-label { font-size: 11px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.4px; }
.srm-resumo-valor { font-size: 15px; color: var(--text, #111827); margin-top: 2px; }
.srm-valor-destaque { color: var(--ok, #22c55e); font-size: 18px; }

.srm-section {
  padding: 0;
}
.srm-section-titulo {
  font-size: 14px; font-weight: 600; color: var(--text, #111827);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.srm-section-hint { font-size: 12px; color: var(--text-muted, #6b7280); margin: 0 0 8px 0; }
.srm-required {
  font-size: 10px; color: var(--rejected, #d9534f);
  background: rgba(239, 68, 68, 0.1);
  padding: 2px 8px; border-radius: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.srm-optional {
  font-size: 10px; color: var(--text-muted, #6b7280);
  background: var(--surface-2, #f9fafb); border: 1px solid var(--border, #e5e7eb);
  padding: 2px 8px; border-radius: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* --- Diretrizes (Markdown) --- */
.srm-diretrizes-wrap {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: rgba(51, 122, 183, 0.04);
}
.srm-diretrizes-wrap .srm-section-titulo {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin: 0;
}
.srm-diretrizes-status { font-size: 11px; color: var(--text-muted, #6b7280); font-weight: 400; text-transform: none; letter-spacing: 0; }
.srm-diretrizes {
  padding: 8px 14px;
  max-height: 200px; overflow-y: auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text, #111827);
}
.srm-diretrizes h1, .srm-diretrizes h2, .srm-diretrizes h3 {
  margin: 10px 0 6px 0; color: var(--accent, #337ab7);
}
.srm-diretrizes h1 { font-size: 16px; }
.srm-diretrizes h2 { font-size: 15px; }
.srm-diretrizes h3 { font-size: 14px; }
.srm-diretrizes p  { margin: 6px 0; }
.srm-diretrizes ul { margin: 6px 0; padding-left: 22px; }
.srm-diretrizes li { margin: 2px 0; }
.srm-diretrizes blockquote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid var(--accent, #337ab7);
  background: rgba(51, 122, 183, 0.07);
  border-radius: 0 4px 4px 0;
  font-style: italic;
}
.srm-diretrizes code {
  background: var(--surface-1, #fff); border: 1px solid var(--border, #e5e7eb);
  padding: 1px 5px; border-radius: 3px; font-size: 12px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.srm-diretrizes strong { font-weight: 700; }
.srm-diretrizes em { font-style: italic; }

/* --- Radio group (forma de pagamento) --- */
.srm-radio-group {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 4px 0;
  display: flex; flex-direction: column;
  margin: 0;
}
.srm-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.srm-radio:last-child { border-bottom: none; }
.srm-radio:hover { background: var(--surface-2, #f9fafb); }
.srm-radio input[type="radio"] { margin: 0; cursor: pointer; }
.srm-radio-text { font-size: 13px; color: var(--text, #111827); line-height: 1.4; }
.srm-radio-text strong { color: var(--accent, #337ab7); }
.srm-radio-mark {
  /* placeholder pra customização futura; hoje usa o radio nativo */
  display: none;
}

/* --- Upload (drop-zone visual) --- */
.srm-upload-wrap {
  border: 1.5px dashed var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  background: rgba(51, 122, 183, 0.02);
  transition: border-color 0.15s, background 0.15s;
}
.srm-upload-wrap:hover { border-color: var(--accent, #337ab7); background: rgba(51, 122, 183, 0.05); }
.srm-upload-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--accent, #337ab7); color: #fff;
  border-radius: 5px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  border: none;
  transition: background 0.15s;
}
.srm-upload-trigger:hover { background: #2a6396; }
.srm-upload-icon { font-size: 14px; }
.srm-upload-preview { margin-top: 10px; min-height: 0; }
.srm-upload-preview:empty { margin-top: 0; }

.srm-file-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 18px;
  max-width: 100%;
}
.srm-file-name {
  font-size: 13px; color: var(--text, #111827);
  font-weight: 500;
  max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srm-file-size { font-size: 11px; color: var(--text-muted, #6b7280); }
.srm-file-remove {
  background: rgba(239, 68, 68, 0.1); color: var(--rejected, #d9534f);
  border: none; border-radius: 50%;
  width: 22px; height: 22px;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.srm-file-remove:hover { background: rgba(239, 68, 68, 0.2); }

/* --- Textarea de observação --- */
.srm-textarea {
  width: 100%;
  font-family: inherit; font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  resize: vertical;
  min-height: 60px;
}
.srm-textarea:focus { outline: 2px solid var(--accent, #337ab7); outline-offset: 1px; border-color: var(--accent, #337ab7); }

.srm-charcount {
  font-size: 11px; text-align: right; margin-top: 4px;
}

/* --- Erro de submit --- */
.srm-err {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 5px;
  color: var(--rejected, #d9534f);
  font-size: 13px;
}

/* Bloco do boleto quando hidden via [hidden] — feedback_hidden_attr_vs_display_flex.md */
.srm-section[hidden] { display: none !important; }

/* RES#2 Sprint C — Coluna Anexos na bandeja Tef.Net (gestao-dev). */
.bandeja-anexos-col { white-space: nowrap; }
.bandeja-anexo-link {
  display: inline-block;
  padding: 3px 8px;
  margin-right: 4px;
  font-size: 12px;
  text-decoration: none;
  color: var(--accent, #337ab7);
  background: rgba(51, 122, 183, 0.08);
  border: 1px solid rgba(51, 122, 183, 0.2);
  border-radius: 3px;
  transition: background 0.12s;
}
.bandeja-anexo-link:hover {
  background: rgba(51, 122, 183, 0.18);
  text-decoration: none;
}

/* --- RES#2 Sprint D — Bandeja Tef.Net em #lotes --- */
/* Sub-totals no header (cards por status) */
.bandeja-tefnet-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bandeja-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.bandeja-total-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  /* UI#51 (14/05/2026): cards viram filtros clicáveis. */
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.bandeja-total-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.bandeja-total-card[aria-pressed="true"] {
  border-color: var(--brand-500, #2962ff);
  box-shadow: 0 0 0 2px rgba(41,98,255,.18);
}
.bandeja-total-card:focus-visible {
  outline: 2px solid var(--brand-500, #2962ff);
  outline-offset: 2px;
}
.bandeja-total-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.bandeja-total-body { flex: 1; min-width: 0; }
.bandeja-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.bandeja-total-qtd {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.bandeja-total-valor {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0f172a);
}
.bandeja-total-warn    { border-left: 4px solid #f59e0b; }
.bandeja-total-info    { border-left: 4px solid #3b82f6; }
.bandeja-total-success { border-left: 4px solid #10b981; }
.bandeja-total-danger  { border-left: 4px solid #ef4444; }
.bandeja-total-muted   { border-left: 4px solid #94a3b8; }
/* AP#12 (14/05/2026): cor "parcial" pra status aprovado_parcial (Em correção). */
.bandeja-total-parcial { border-left: 4px solid #c084fc; }
/* UI#68 (28/05/2026): 3 cards splitted de motivo derivado.
   Cores semânticas: amarelo (NF faltando) → laranja (comprov atrasado) → vermelho (>X dias). */
.bandeja-total-amarelo  { border-left: 4px solid #eab308; }
.bandeja-total-laranja  { border-left: 4px solid #f97316; }
.bandeja-total-vermelho { border-left: 4px solid #dc2626; }
/* Variante de motivo — fundo levemente tingido pra diferenciar dos cards de status. */
.bandeja-total-motivo {
  background: linear-gradient(180deg, var(--surface, #fff) 0%, rgba(0,0,0,.015) 100%);
}
.bandeja-total-amarelo[aria-pressed="true"]  { box-shadow: 0 0 0 2px rgba(234,179,8,.22);  border-color: #eab308; }
.bandeja-total-laranja[aria-pressed="true"]  { box-shadow: 0 0 0 2px rgba(249,115,22,.22); border-color: #f97316; }
.bandeja-total-vermelho[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(220,38,38,.22);  border-color: #dc2626; }

/* ============================================================
 * UI#68 — excel-filter (components/excel-filter.js)
 * Filtro multissel reusável: trigger + chips + popover sticky.
 * ============================================================ */
.xf-root {
  position: relative;
  display: inline-block;
  width: 100%;
}
.xf-host { width: 100%; }
.xf-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.xf-trigger:hover { border-color: var(--brand-500, #2962ff); }
.xf-trigger[aria-expanded="true"] {
  border-color: var(--brand-500, #2962ff);
  box-shadow: 0 0 0 2px rgba(41,98,255,.15);
}
.xf-trigger-label {
  flex: 0 0 auto;
  font-weight: 600;
}
.xf-trigger-label.xf-trigger-empty {
  font-weight: 400;
  color: var(--text-muted, #64748b);
}
.xf-trigger-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.xf-trigger-caret {
  flex-shrink: 0;
  font-size: 10px;
  opacity: .6;
}
.xf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(41,98,255,.10);
  color: var(--brand-700, #1d4ed8);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.xf-chip-more {
  background: rgba(0,0,0,.06);
  color: var(--text-muted, #64748b);
}
.xf-chip-x {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: inherit;
  opacity: .7;
}
.xf-chip-x:hover { opacity: 1; }

/* Popover (sticky head + scroll body) */
.xf-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 240px;
  max-width: 360px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}
.xf-popover[hidden] { display: none; }
.xf-popover-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.xf-search {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
}
.xf-sort { display: flex; gap: 4px; }
.xf-sort-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text-muted, #64748b);
  border-radius: 4px;
  cursor: pointer;
}
.xf-sort-btn.is-active {
  background: rgba(41,98,255,.10);
  color: var(--brand-700, #1d4ed8);
  border-color: var(--brand-500, #2962ff);
}
.xf-opts {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.xf-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.xf-opt:hover { background: rgba(0,0,0,.04); }
.xf-opt.is-checked { background: rgba(41,98,255,.06); }
.xf-opt input[type="checkbox"] { margin: 0; }
.xf-opt-label { flex: 1; }
.xf-count {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  background: rgba(0,0,0,.06);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.xf-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 12px;
}

/* Período (modo='periodo') — shortcuts pills + 2 inputs date */
.xf-popover-periodo {
  min-width: 280px;
  padding: 10px;
}
.xf-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.xf-shortcut-pill {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  cursor: pointer;
}
.xf-shortcut-pill:hover { border-color: var(--brand-500, #2962ff); }
.xf-shortcut-pill.is-active {
  background: rgba(41,98,255,.10);
  color: var(--brand-700, #1d4ed8);
  border-color: var(--brand-500, #2962ff);
}
.xf-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.xf-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.xf-range-row span { flex: 0 0 36px; color: var(--text-muted, #64748b); }
.xf-range-row input {
  flex: 1;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
}
.filtro-col-wide { grid-column: span 2; }
@media (max-width: 768px) {
  .filtro-col-wide { grid-column: span 1; }
  .xf-popover { max-width: 100vw; left: 0; right: 0; }
}

/* Status badge na coluna Status da tabela bandeja */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-warn    { background: rgba(245,158,11,.12);  color: #b45309; }
.status-info    { background: rgba(59,130,246,.12); color: #1d4ed8; }
.status-success { background: rgba(16,185,129,.12); color: #047857; }
.status-danger  { background: rgba(239,68,68,.12);  color: #b91c1c; }
.status-muted   { background: rgba(148,163,184,.16); color: #475569; }

/* Tabs do #lotes (mesmo estilo de page-tabs L1) */
.lotes-tabs-host { margin-bottom: 16px; }
.bandeja-filtros { margin-bottom: 12px; }

/* ============================================================
   RES#2 — Política de resgate (11/05/2026)
   Chip rente ao botão de Resgatar + modal do 3º automático.
   ============================================================ */

/* Chip rente — sempre visível ao lado do botão "Solicitar resgate".
   Decisão direta do dono: "tanto o botão como ele do lado, não custa nada". */
.conta-cta-resgate {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.resgate-chip-rente {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  min-width: 220px;
  max-width: 360px;
}
.resgate-chip-rente .rcr-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.resgate-chip-rente .rcr-text { display: flex; flex-direction: column; gap: 1px; }
.resgate-chip-rente strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.resgate-chip-rente small {
  font-size: 11.5px;
  line-height: 1.35;
  opacity: 0.85;
}
.resgate-chip-rente.unlocked {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #15803d;
}
.resgate-chip-rente.unlocked-extra {
  background: rgba(76, 154, 255, 0.14);
  border: 1px solid rgba(76, 154, 255, 0.45);
  color: #1d4ed8;
}
.resgate-chip-rente.locked {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #b45309;
}

/* Modal RES#2 — popup do "último resgate automático".
   Glass DOC#9 espelhando o mockup canônico
   (docs/mockups/RES-0002-v1-politica-resgate-popup-config-card.html). */
.res2-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.res2-modal {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 22px;
  box-shadow:
    0 18px 44px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(245, 158, 11, 0.45);
  max-width: 560px;
  width: 100%;
  color: #e6ecff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.res2-modal-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(245, 158, 11, 0.14);
}
.res2-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  flex-shrink: 0;
  background: #f59e0b;
  color: #1a1410;
}
.res2-modal-headtext h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #e6ecff;
}
.res2-modal-headtext p {
  margin: 0;
  color: #9aa6c7;
  font-size: 13px;
}
.res2-modal-body { padding: 18px 24px 22px; }
.res2-resume {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.res2-resume-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 13.5px;
}
.res2-resume-row:last-child { border-bottom: none; }
.res2-resume-row.highlight {
  background: rgba(34, 197, 94, 0.14);
  border-top: 1px solid rgba(34, 197, 94, 0.45);
  border-bottom: 1px solid rgba(34, 197, 94, 0.45);
}
.res2-resume-row .r-lbl { color: #9aa6c7; }
.res2-resume-row.highlight .r-lbl { color: #e6ecff; font-weight: 600; }
.res2-resume-row .r-val {
  font-weight: 600;
  color: #e6ecff;
  font-variant-numeric: tabular-nums;
}
.res2-resume-row .r-val.ok { color: #22c55e; font-size: 15px; }
.res2-alert {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.res2-alert strong {
  color: #f59e0b;
  font-size: 13.5px;
  font-weight: 600;
}
.res2-alert small {
  color: #9aa6c7;
  font-size: 12px;
  line-height: 1.5;
}
.res2-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.res2-modal-footer .btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.res2-modal-footer .btn-primary {
  background: #337ab7;
  color: #fff;
  border-color: #1e6091;
}
.res2-modal-footer .btn-primary:hover { background: #4c9aff; }
.res2-modal-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #e6ecff;
  border-color: rgba(255, 255, 255, 0.18);
}
.res2-modal-footer .btn-secondary:hover { background: rgba(255, 255, 255, 0.07); }

/* RES#2 F4 — tooltip dos lotes anteriores no popup do 3o resgate */
.r-lbl-hover {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #6b7596;
}
.r-info-icon {
  display: inline-block;
  margin-left: 4px;
  color: #4c9aff;
  font-size: 11px;
}
.r-tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #161e3d;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  min-width: 320px;
  max-width: 420px;
  z-index: 10000;
  font-size: 11.5px;
  white-space: nowrap;
}
.r-lbl-hover:hover .r-tooltip,
.r-lbl-hover:focus-within .r-tooltip {
  display: block;
}
.r-tt-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.r-tt-row:last-child { border-bottom: none; }
.r-tt-row code {
  font-family: 'Menlo', 'Monaco', monospace;
  color: #4c9aff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.r-tt-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.r-tt-status-pendente_aprovacao { background: rgba(76,154,255,0.18); color: #4c9aff; }
.r-tt-status-aguardando_pagamento { background: rgba(245,158,11,0.18); color: #f59e0b; }
.r-tt-status-pago { background: rgba(34,197,94,0.18); color: #22c55e; }
.r-tt-data {
  color: #9aa6c7;
  font-size: 10.5px;
}

/* RES#2 F6 — Pix cadastrado + Boleto data no popup upload (solicitar-resgate-modal) */
.srm-pix-row .srm-pix-box { padding: 4px 0; }
.srm-pix-loading { color: var(--text-muted, #6b7596); font-size: 12.5px; padding: 8px; }
.srm-pix-vazio {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.srm-pix-vazio strong { color: #b45309; display: block; margin-bottom: 4px; }
.srm-pix-vazio p { margin: 0; color: #6b7596; font-size: 12.5px; line-height: 1.5; }
.srm-pix-vazio code,
.srm-pix-aviso-diferente code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 12px;
}
.srm-pix-info {
  background: rgba(76, 154, 255, 0.08);
  border: 1px solid rgba(76, 154, 255, 0.32);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.srm-pix-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}
.srm-pix-linha .srm-pix-lbl {
  font-weight: 600;
  color: var(--text-muted, #6b7596);
  min-width: 70px;
}
.srm-pix-valor {
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 13px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  flex: 1;
}
.srm-pix-copy {
  background: var(--brand, #337ab7);
  color: #fff;
  border: 1px solid var(--brand-deep, #1e6091);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.srm-pix-copy:hover { background: var(--brand-light, #4c9aff); }

.srm-pix-confirma {
  border: none;
  padding: 0;
  margin: 8px 0 0;
}
.srm-pix-confirma legend {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
  color: var(--text, #e6ecff);
}
.srm-pix-aviso-diferente {
  margin-top: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.srm-pix-aviso-diferente strong { color: #b91c1c; display: block; margin-bottom: 4px; }
.srm-pix-aviso-diferente p { margin: 0; color: #6b7596; font-size: 12.5px; line-height: 1.5; }

/* Boleto data */
.srm-input-date {
  width: 240px;
  background: rgba(255,255,255,0.07);
  color: var(--text, #e6ecff);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-family: inherit;
}
.srm-boleto-data-hint {
  font-size: 12px;
  color: var(--text-muted, #6b7596);
  margin-top: 6px;
}

/* ============================================================
 * UI#37-39 — Histórico & Tendências (sparkline 4 camadas, YTD vs YTD-1, Δ YoY)
 * Adicionado em 12/05/2026 — PRD-0013
 * ============================================================ */

/* Variáveis de cor das 4 camadas */
:root {
  --spark-aguard:  #6c757d;  /* aguardando — cinza neutro */
  --spark-disp:    #0d6efd;  /* disponível — brand azul   */
  --spark-lote:    #fd7e14;  /* em lote    — laranja      */
  --spark-liquid:  #198754;  /* liquidado  — verde        */
}

/* Container das barras stacked */
.hist-spark-bars-stacked {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
}

/* Barra stacked (container vertical — segmentos empilham de baixo pra cima via column-reverse) */
.hist-spark-stacked {
  flex: 1;
  display: flex;
  flex-direction: column-reverse; /* liquidado na base, aguardando no topo */
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  cursor: default;
  transition: opacity 0.15s;
}
.hist-spark-stacked:hover,
.hist-spark-stacked:focus {
  opacity: 0.85;
  outline: 2px solid var(--spark-disp);
  outline-offset: 1px;
}
.hist-spark-stacked-atual {
  box-shadow: 0 0 0 1px var(--spark-disp);
}

/* Segmento individual */
.hist-spark-segmento {
  width: 100%;
  min-height: 2px;
  transition: height 0.2s ease;
}

/* Barra monocromática (Opção B — retrocompat com estilo anterior) */
.hist-spark-bar {
  flex: 1;
  background: var(--spark-disp, #0d6efd);
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
  cursor: default;
}
.hist-spark-bar:hover  { opacity: 0.75; }
.hist-spark-bar-atual  { box-shadow: 0 0 0 1px var(--spark-disp); }
.hist-spark-bar-min    { background: var(--color-border, #dee2e6); min-height: 3px; }

/* Regra obrigatória — [hidden] vs display:flex|column-reverse
   (feedback_hidden_attr_vs_display_flex.md) */
.hist-spark-stacked[hidden],
.hist-spark-bar[hidden],
.hist-spark-segmento[hidden],
.hist-spark-bars-stacked[hidden] { display: none !important; }

/* Toggle A/B */
.hist-spark-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.hist-toggle-btn {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted, #6c757d);
  transition: background 0.15s, color 0.15s;
}
.hist-toggle-btn.active {
  background: var(--spark-disp, #0d6efd);
  color: #fff;
  border-color: var(--spark-disp, #0d6efd);
}
.hist-toggle-btn[hidden]     { display: none !important; }
.hist-spark-toggle[hidden]   { display: none !important; }

/* Legenda das camadas */
.hist-spark-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--color-text-muted, #6c757d);
}
.hist-leg-item { display: flex; align-items: center; gap: 3px; }
.hist-leg-cor  { display: inline-block; width: 8px; height: 8px; border-radius: 1px; }
.hist-spark-legenda[hidden] { display: none !important; }

/* YTD comparativo (UI#38) — Bug 1 fix + legibilidade (PRD-0013 12/05/2026 noite) */
/* Estrutura: bloco-atual (valor+badge+período) → divisor → bloco-anterior (rótulo+valor+período) */
.hist-ytd-bloco-atual {
  margin-bottom: 8px;
}
.hist-ytd-inline {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.hist-ytd-inline[hidden] { display: none !important; }
.hist-ytd-inline .hist-card-value {
  display: inline-block !important;
  font-size: 22px;
  line-height: 1.1;
}
.hist-ytd-periodo-atual {
  font-size: 12px;
  color: var(--text-soft, #9aa3b2);
  margin-top: 4px;
  font-weight: 500;
}
.hist-ytd-divisor {
  border-top: 1px dashed var(--border-soft, rgba(120, 130, 145, 0.25));
  margin: 10px 0;
}
.hist-ytd-bloco-anterior {
  /* respiro vertical e hierarquia clara — valor histórico visível, não escondido */
}
.hist-ytd-ant-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  margin-bottom: 2px;
}
.hist-ytd-ant-valor {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #2d3748);
  font-family: "SF Mono", "Menlo", monospace;
  line-height: 1.2;
}
.hist-ytd-ant-periodo {
  font-size: 12px;
  color: var(--text-soft, #9aa3b2);
  margin-top: 2px;
  font-weight: 500;
}
.hist-ytd-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.hist-ytd-badge-up      { background: rgba(25, 135, 84, 0.12); color: #198754; }
.hist-ytd-badge-down    { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.hist-ytd-badge-neutral { background: var(--color-surface-2, #f8f9fa); color: var(--color-text-muted, #6c757d); }

/* Δ MoM + YoY — hierarquia legível (PRD-0013 12/05/2026 noite) */
/* Estrutura por seção: label · percentual GRANDE · valores médios · período menor */
.hist-delta-pct {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  margin: 4px 0;
  font-family: "SF Mono", "Menlo", monospace;
}
.hist-delta-up      { color: #198754; }
.hist-delta-down    { color: #dc3545; }
.hist-delta-neutral { color: var(--text-soft, #9aa3b2); }
.hist-delta-valores {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #2d3748);
  font-family: "SF Mono", "Menlo", monospace;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  margin: 2px 0;
}
.hist-delta-ant-num {
  color: var(--text-muted, #6b7280);
}
.hist-delta-arrow {
  color: var(--text-soft, #9aa3b2);
  font-weight: 400;
}
.hist-delta-atual-num {
  color: var(--text, #2d3748);
}
.hist-delta-periodos {
  font-size: 11px;
  color: var(--text-soft, #9aa3b2);
  margin-top: 2px;
  font-weight: 500;
}
.hist-ytd-comparativo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  flex-wrap: wrap;
}
.hist-ytd-ant {
  font-size: 11px;
  color: var(--color-text-muted, #6c757d);
}
.hist-ytd-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
}
.hist-ytd-badge-up      { background: rgba(25, 135, 84, 0.12); color: #198754; }
.hist-ytd-badge-down    { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.hist-ytd-badge-neutral { background: var(--color-surface-2, #f8f9fa); color: var(--color-text-muted, #6c757d); }
.hist-ytd-comparativo[hidden] { display: none !important; }

/* Delta MoM + YoY (UI#39) — Bug 2 fix (PRD-0013 12/05/2026) */
/* Padronizado com YTD em 12/05/2026 noite: reusa .hist-ytd-bloco-atual/anterior/inline. */
/* .hist-delta-secao: agrupa MoM e YoY com divisor MAIOR entre seções. */
.hist-delta-secao {
  margin-bottom: 12px;
}
.hist-delta-secao:last-child { margin-bottom: 0; }
.hist-delta-secao[hidden] { display: none !important; }
.hist-delta-divisor {
  border-top: 1px solid var(--color-border, #dee2e6);
  margin: 8px 0;
}
.hist-delta-divisor[hidden] { display: none !important; }
.hist-card-meta-sm {
  font-size: 10px;
  color: var(--color-text-muted, #6c757d);
  margin-top: 2px;
}
/* Mantém compatibilidade com hist-delta-bloco/rotulo/separador (código legado) */
.hist-delta-bloco {
  margin-bottom: 4px;
}
.hist-delta-rotulo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted, #6c757d);
  margin-bottom: 2px;
}
.hist-delta-valor {
  font-size: 1.25rem;
  font-weight: 700;
}
.hist-delta-meta {
  font-size: 11px;
  color: var(--color-text-muted, #6c757d);
}
.hist-delta-separador {
  border-top: 1px solid var(--color-border, #dee2e6);
  margin: 8px 0;
}
.hist-delta-up      { color: #198754; }
.hist-delta-down    { color: #dc3545; }
.hist-delta-neutral { color: var(--color-text-muted, #6c757d); }
.hist-delta-bloco[hidden]     { display: none !important; }
.hist-delta-separador[hidden] { display: none !important; }

/* tooltip-rico — HTML formatado no tooltip custom (Bug 3 fix, PRD-0013 12/05/2026) */
/* Usado dentro do singleton #info-tooltip-singleton/.info-tooltip-body */
.tooltip-rico {
  font-size: 12px;
  line-height: 1.6;
  min-width: 160px;
}
.tooltip-rico strong {
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}
.tooltip-rico hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}

/* ============================================================
 * UI#40 (PRD-0014) — Drill direto: oculta barra de tabs com 1 único item.
 * Quando explodirAttachTabs recebe apenas 1 tab, a barra de tabs
 * não agrega valor visual — ocultá-la deixa o drill mais limpo.
 * Compatibilidade: Chrome 105+, Firefox 121+, Safari 15.4+, Edge Chromium.
 * Fallback gracioso: browsers sem :has() mostram a barra com 1 botão (funcional).
 * ============================================================ */
.explodir-tabs:has(.explodir-tab:only-child) {
  display: none;
}

/* [hidden] override: explodir.js pode setar painel.querySelector('.explodir-tabs').hidden */
/* Regra feedback_hidden_attr_vs_display_flex.md: elemento com display controlado por CSS */
/* deve ter [hidden]{display:none !important} para evitar conflito. */
.explodir-tabs[hidden] {
  display: none !important;
}

/* PRD-0014-EXT-03 / UI#45 (12/05/2026 noite — pos UI#44) — subtitulo inline
   do drill ("Por cliente"). Substitui o formato pills empilhadas (UI#43) pelo
   formato compacto "— STD: R$ X | PRE: R$ Y" rente ao titulo (decisao do dono
   no screenshot anotado). Header agora e flex BASELINE (row), nao column.
   Regra [hidden]{display:none !important} obrigatoria pra coexistir com flex
   (feedback_hidden_attr_vs_display_flex.md).
   PRD-0014-EXT-04 / UI#46 (12/05/2026 noite — pos UI#45): texto agora e POR
   EXTENSO ("Standard"/"Premium") + Grupo Cobertura mostra "N clientes / R$ X"
   (string mais longa). flex-wrap+gap ja cobrem a quebra de linha quando o
   espaco horizontal e insuficiente — classes .exsub-* mantidas. */
.explodir-header-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.explodir-titulo {
  font-weight: 600;
  font-size: 14px;
}
.explodir-subtitulo {
  font-size: 13px;
  color: var(--ag-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.explodir-subtitulo[hidden] {
  display: none !important;
}
/* Standard = neutro muted (mesmo cinza do subtitulo). */
.explodir-subtitulo .exsub-std {
  color: var(--ag-text-muted, #6b7280);
}
/* Premium = destaque dourado (alinhado a .pill-premium / warning-dark). */
.explodir-subtitulo .exsub-pre {
  color: var(--warning-dark, #b97a23);
  font-weight: 600;
}
/* Separador "|" entre STD e PRE — tom mais discreto que os valores. */
.explodir-subtitulo .exsub-sep {
  color: var(--border-strong, var(--ag-border, #cfd6e0));
  margin: 0 4px;
}

/* ============================================================================
   PRD-0017 / UI#48 (12/05/2026 noite) — Bloco Inadimplencia da competencia.
   Espelha o mockup DT-0017-v2 usando tokens canonicos do projeto
   (--danger*, --warning*, --age-*). Os tokens --age-* sao NOVOS pra cobrir
   os 4 buckets de aging (1-30, 31-60, 61-90, 90+) com gradacao visual.
   ============================================================================ */

/* Tokens de aging (4 buckets) — declarados em :root pra reuso futuro
   (REL#5 timeline, ind-card de outras telas, etc.) */
:root {
  --age-1-30:   var(--warning, #f0ad4e);     /* amarelo: ate 30 dias  */
  --age-31-60:  #ec7c1d;                     /* laranja: ate 60       */
  --age-61-90:  var(--danger, #d9534f);      /* vermelho: ate 90      */
  --age-90mais: #8b1a17;                     /* vermelho escuro: 90+  */
}

/* Container principal do bloco (visualmente "section em vermelho leve"). */
.secao-inadimplencia.bloco-inadimplencia {
  background: linear-gradient(180deg, #fff8f7 0%, var(--surface, #ffffff) 100%);
  border: 1px solid #f0c3c1;
  border-radius: var(--radius, 10px);
  box-shadow: 0 1px 2px rgba(217, 83, 79, 0.08);
  padding: 16px 18px;
  margin: 16px 0;
}

.bloco-inadimplencia-header {
  border-bottom: 1px solid var(--border, #e5e9f0);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.bloco-titulo-inadimplencia {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--danger-dark, #b73a36);
  display: flex;
  align-items: center;
  gap: 10px;
}

.bloco-inadimplencia .bloco-sub {
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  margin: 6px 0 0;
}

/* Grid dos 6 cards em UMA linha em desktop (>=1024). Mobile/tablet quebra. */
.cards-grid-inadimplencia {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1280px) {
  .cards-grid-inadimplencia { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cards-grid-inadimplencia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cards-grid-inadimplencia { grid-template-columns: 1fr; }
}

/* Variante "danger" do .ind-card pro tema vermelho do bloco.
   Reusa .ind-card base (padding, border, hover) ja definido no styles.css. */
.cards-grid-inadimplencia .ind-card.ind-card-danger {
  cursor: pointer;
  transition: all .15s ease;
}
.cards-grid-inadimplencia .ind-card-danger:hover {
  border-color: var(--danger, #d9534f);
  box-shadow: 0 4px 16px rgba(217, 83, 79, 0.12);
  transform: translateY(-1px);
}
.cards-grid-inadimplencia .ind-card-danger.explodir-aberto {
  border-color: var(--danger, #d9534f);
  box-shadow: 0 0 0 2px var(--danger-soft, #fde8e7);
  background: #fff8f7;
}

/* Host do drill compartilhado (explodirGroup faz appendChild aqui). */
.bloco-inadimplencia-drill-host {
  margin-top: 14px;
}
.bloco-inadimplencia-drill-host .explodir-detail {
  background: #fafbfc;
  border: 1px solid var(--border, #e5e9f0);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
}

/* Drill: secao interna (aging, top 5, insight). */
.bloco-inadimplencia .drill-secao {
  margin-bottom: 14px;
}
.bloco-inadimplencia .drill-secao:last-child {
  margin-bottom: 0;
}
.bloco-inadimplencia .drill-secao-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Aging stacked bar */
.bloco-inadimplencia .aging-barra {
  display: flex;
  height: 28px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border, #e5e9f0);
  background: var(--neutral-soft, #f1f3f5);
}
.bloco-inadimplencia .aging-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}
.bloco-inadimplencia .aging-seg.aging-1-30   { background: var(--age-1-30); }
.bloco-inadimplencia .aging-seg.aging-31-60  { background: var(--age-31-60); }
.bloco-inadimplencia .aging-seg.aging-61-90  { background: var(--age-61-90); }
.bloco-inadimplencia .aging-seg.aging-90mais { background: var(--age-90mais); }
.bloco-inadimplencia .aging-empty {
  width: 100%;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  padding: 6px 0;
}

.bloco-inadimplencia .aging-leg {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  flex-wrap: wrap;
}
.bloco-inadimplencia .aging-leg span { display: inline-flex; align-items: center; gap: 4px; }
.bloco-inadimplencia .aging-leg .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.bloco-inadimplencia .aging-leg .aging-1-30-swatch   { background: var(--age-1-30); }
.bloco-inadimplencia .aging-leg .aging-31-60-swatch  { background: var(--age-31-60); }
.bloco-inadimplencia .aging-leg .aging-61-90-swatch  { background: var(--age-61-90); }
.bloco-inadimplencia .aging-leg .aging-90mais-swatch { background: var(--age-90mais); }
.bloco-inadimplencia .aging-leg .aging-critico {
  color: var(--danger-dark, #b73a36);
  font-weight: 700;
}

/* Top 5 tabela */
.bloco-inadimplencia .top-tabela-wrap { overflow-x: auto; }
.bloco-inadimplencia .top-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bloco-inadimplencia .top-tabela th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e5e9f0);
}
.bloco-inadimplencia .top-tabela td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border, #e5e9f0);
}
.bloco-inadimplencia .top-tabela tr:last-child td { border-bottom: 0; }
.bloco-inadimplencia .top-tabela .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.bloco-inadimplencia .top-tabela .col-num-strong { color: var(--danger-dark, #b73a36); font-weight: 600; }
.bloco-inadimplencia .top-tabela .top-empty {
  text-align: center;
  color: var(--text-muted, #6b7280);
  padding: 16px;
}

.bloco-inadimplencia .dias-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}
.bloco-inadimplencia .dias-1-30   { background: var(--warning-soft, #fff8e1); color: var(--age-1-30); }
.bloco-inadimplencia .dias-31-60  { background: #ffe8d4; color: var(--age-31-60); }
.bloco-inadimplencia .dias-61-90  { background: var(--danger-soft, #fde8e7); color: var(--age-61-90); }
.bloco-inadimplencia .dias-90mais { background: #f0c3c1; color: var(--age-90mais); }

/* Insight nota */
.bloco-inadimplencia .nota-inadimplencia {
  background: #fff8f7;
  border-left: 3px solid var(--danger, #d9534f);
  padding: 10px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  margin-top: 14px;
}
.bloco-inadimplencia .nota-inadimplencia strong { color: var(--danger-dark, #b73a36); }

/* Tokens de pill — reaproveita classes ja definidas em styles.css
   (.pill-danger, .pill-premium, .pill-standard). Sem necessidade de
   redeclarar aqui. */

/* =====================================================================
   PRD-0047 / UI#47 — Card "Competência Selecionada" (Variante C aprovada)
   ---------------------------------------------------------------------
   Substitui o duplo Δ MoM + Δ YoY antigo. 1 card único:
   - Header com label + "mes/AAAA · R$ valor" (destaque 22px)
   - 2 linhas empilhadas (vs Mês Anterior + vs Mesmo Mês Ano Anterior)
     separadas por divisor tracejado.
   - Cada linha tem badge de delta colorido (up/down/neutral/aguardando).

   Mockup: docs/mockups/UI-0047-historico-cards-comparativos-v1-variantes.html
   Decisão dono: 13/05/2026 madrugada (aprovou Variante C inline).
   ===================================================================== */
.hist-comp-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #dddddd);
  border-radius: var(--radius, 10px);
  padding: 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.hist-comp-card[hidden] { display: none !important; }

.hist-comp-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #dddddd);
}
.hist-comp-header-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hist-comp-header-mes {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-dark, #286090);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.hist-comp-header-sep {
  color: var(--text-soft, #9aa3b2);
  margin: 0 6px;
  font-weight: 400;
}
.hist-comp-header-valor { color: var(--text, #2d3748); }

.hist-comp-linha {
  padding: 10px 0;
}
.hist-comp-linha + .hist-comp-linha {
  border-top: 1px dashed var(--border-soft, rgba(120,130,145,0.25));
}
.hist-comp-linha-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.hist-comp-linha-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.hist-comp-linha-valor {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #2d3748);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hist-comp-linha-mes {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}
.hist-comp-delta {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hist-comp-delta.up {
  background: rgba(25, 135, 84, 0.12);
  color: var(--success-dark, #3d8b3d);
}
.hist-comp-delta.down {
  background: rgba(220, 53, 69, 0.12);
  color: var(--danger-dark, #b73a36);
}
.hist-comp-delta.neutral {
  background: var(--surface-2, #fafafa);
  color: var(--text-muted, #6b7280);
}
.hist-comp-delta.aguardando {
  background: rgba(240, 173, 78, 0.18);
  color: var(--warning-dark, #b97a23);
}

/* B-historico-provisao-unificada (13/05/2026):
   "sem movimentação" substitui "R$ 0,00" quando provisão é null/zero.
   Discreto, itálico, fonte normal (não pesada como valor monetário).
   Aplicado tanto no valor central do header quanto nas linhas comparativas
   e no card Provisão Acumulada (YTD). */
.hist-comp-sem-mov {
  color: var(--text-muted, #6b7280);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95em;
  letter-spacing: 0.01em;
}
/* Quando "sem movimentação" aparece como hist-card-value (no card YTD),
   reduz a tipografia pra não competir com o valor monetário em outras competências. */
.hist-card-value.hist-comp-sem-mov {
  font-size: 1.15rem;
  font-weight: 400;
}

/* Nota discreta em multisseleção (>1 mês) — substitui card por placeholder. */
.hist-comp-multi-nota {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Título "Provisão Acumulada · jan~mai 2026" — período em destaque secundário.
   O ícone 📅 + "Provisão Acumulada" mantém o styling de .hist-card-label;
   o período herda mas ganha cor brand pra reforçar contexto temporal. */
.hist-ytd-titulo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 15px;
}
.hist-ytd-titulo-base {
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hist-ytd-titulo-periodo {
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-dark, #286090);
  font-weight: 700;
}

/* ============================================================================
   AP#11 — Tela única de validação de resgate (PRD-0007-EXT · 13/05/2026)
   ============================================================================
   Substitui os 2 modais antigos (Aprovar / Reprovar) por modal único com 3
   ações no footer (Reprovar / Parcial / Total). Visual reaproveita tokens
   DOC#9 do design system; classes `lvm-` (lote-validar-modal), `cadm-`
   (cadastro-motivo), `lcm-` (lote-correcao), `ciente-` (popup ciente parceiro).

   REGRA DURA — feedback_hidden_attr_vs_display_flex: toda classe com
   `display: flex|grid|block` que pode receber `[hidden]` em runtime declara
   explicitamente `[hidden]{display:none !important}`. Senão o atributo é
   silenciosamente ignorado.
   ============================================================================ */

/* ── Bandeja Tef.Net — chips de período (AP#11) ─────────────────────────────── */
.bandeja-chips-periodo {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.chip-periodo {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text, #2d3748);
  border: 1px solid var(--border-strong, #cfd6e0);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.chip-periodo:hover {
  background: var(--neutral-soft, #f1f3f5);
}
.chip-periodo[aria-pressed="true"] {
  background: var(--brand-soft, #e8f1fb);
  border-color: var(--brand, #337ab7);
  color: var(--brand-dark, #286090);
  font-weight: 600;
}
.chip-periodo-limpar {
  border-style: dashed;
  color: var(--text-muted, #6b7280);
}

/* ── Modal de validação (lvm-*) ─────────────────────────────────────────────── */
.lvm-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lvm-body[hidden] { display: none !important; }

/* Resumo (parceiro / competência / forma / valor) */
.lvm-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 12px 16px;
  background: var(--brand-soft, #e8f1fb);
  border: 1px solid var(--brand, #337ab7);
  border-radius: 6px;
}
.lvm-resumo[hidden] { display: none !important; }
.lvm-resumo-item { display: flex; flex-direction: column; }
.lvm-resumo-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
  margin-bottom: 2px;
}
.lvm-resumo-valor { font-size: 14px; font-weight: 700; color: var(--text, #2d3748); }
.lvm-brand { color: var(--brand-dark, #286090); }

/* Seções (anexos, data prev, status) */
.lvm-section { display: flex; flex-direction: column; gap: 8px; }
.lvm-section[hidden] { display: none !important; }
.lvm-section-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft, #9aa3b2);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lvm-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong, #cfd6e0);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  flex-shrink: 0;
}
.lvm-help-trigger:hover { background: var(--neutral-soft, #f1f3f5); }

/* Grid de 3 cards de check (NF / Pix-Boleto / Valor) */
.lvm-anexos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lvm-anexos-grid[hidden] { display: none !important; }
.lvm-anexo-card {
  border: 2px solid var(--border, #e5e9f0);
  border-radius: 6px;
  padding: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.lvm-anexo-card:hover { border-color: var(--brand, #337ab7); }
.lvm-anexo-card:focus-visible {
  outline: 2px solid var(--brand, #337ab7);
  outline-offset: 2px;
}
.lvm-anexo-card.lvm-checked {
  border-color: var(--ok, #5cb85c);
  background: rgba(92, 184, 92, 0.08);
}
.lvm-anexo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.lvm-anexo-titulo { font-size: 13px; font-weight: 600; }
.lvm-anexo-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong, #cfd6e0);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  color: transparent;
  transition: all .15s;
  font-weight: 700;
}
.lvm-anexo-card.lvm-checked .lvm-anexo-check {
  background: var(--ok, #5cb85c);
  border-color: var(--ok, #5cb85c);
  color: #fff;
}
.lvm-anexo-body {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  word-break: break-word;
}
.lvm-pix-chave {
  display: inline-block;
  padding: 2px 6px;
  background: var(--neutral-soft, #f1f3f5);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  word-break: break-all;
}
.lvm-anexo-link {
  display: inline-block;
  margin-right: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--brand, #337ab7);
  text-decoration: none;
}
.lvm-anexo-link:hover { text-decoration: underline; }
.lvm-anexo-extra { margin-top: 6px; }
.lvm-anexo-hint { font-style: italic; }

/* Data prevista */
.lvm-data-prev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 6px;
  flex-wrap: wrap;
}
.lvm-data-prev[hidden] { display: none !important; }
.lvm-input-date {
  border: 1px solid var(--border-strong, #cfd6e0);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.lvm-data-hint { font-size: 12px; }
.lvm-alerta-finde {
  background: rgba(240, 173, 78, 0.12);
  border-left: 3px solid var(--warning, #f0ad4e);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--warning-dark, #b97a23);
}
.lvm-alerta-finde[hidden] { display: none !important; }

/* Status bar dinâmica */
.lvm-modal-status {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  display: block;
}
.lvm-modal-status[hidden] { display: none !important; }
.lvm-status-info {
  background: var(--brand-soft, #e8f1fb);
  color: var(--brand-dark, #286090);
}
.lvm-status-success {
  background: rgba(92, 184, 92, 0.12);
  color: var(--ok, #5cb85c);
}
.lvm-status-warning {
  background: rgba(240, 173, 78, 0.12);
  color: var(--warning-dark, #b97a23);
}

/* Formulários inline (revelados ao escolher Reprovar/Parcial) */
.lvm-secao-decisao {
  display: block; /* override [hidden] OK no body */
  padding: 14px;
  border-radius: 6px;
  border-left: 4px solid;
  margin-top: 8px;
}
.lvm-secao-decisao[hidden] { display: none !important; }
.lvm-decisao-reprovar {
  background: rgba(217, 83, 79, 0.06);
  border-left-color: var(--rejected, #d9534f);
}
.lvm-decisao-parcial {
  background: rgba(240, 173, 78, 0.10);
  border-left-color: var(--warning, #f0ad4e);
}
.lvm-secao-decisao-titulo {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.lvm-decisao-reprovar .lvm-secao-decisao-titulo { color: var(--rejected, #d9534f); }
.lvm-decisao-parcial .lvm-secao-decisao-titulo { color: var(--warning-dark, #b97a23); }

.lvm-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.lvm-form-row[hidden] { display: none !important; }
.lvm-form-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
}
.lvm-form-inline { display: flex; align-items: center; gap: 8px; }
.lvm-form-inline[hidden] { display: none !important; }
.lvm-select, .lvm-textarea {
  border: 1px solid var(--border-strong, #cfd6e0);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface, #fff);
  width: 100%;
}
.lvm-textarea { min-height: 70px; resize: vertical; }
.lvm-btn-add-motivo {
  background: transparent;
  border: 1px dashed var(--brand, #337ab7);
  color: var(--brand-dark, #286090);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.lvm-btn-add-motivo:hover { background: var(--brand-soft, #e8f1fb); }
.lvm-form-footrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.lvm-form-footrow[hidden] { display: none !important; }
.lvm-err {
  color: var(--rejected, #d9534f);
  font-size: 12px;
}
.lvm-err-submit {
  background: rgba(217, 83, 79, 0.08);
  border-left: 3px solid var(--rejected, #d9534f);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  display: block;
}
.lvm-err-submit[hidden] { display: none !important; }
.lvm-cc { font-size: 11px; }
.lvm-aviso-1chance {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(240, 173, 78, 0.15);
  border: 1px solid var(--warning, #f0ad4e);
  border-radius: 4px;
  font-size: 12px;
  color: var(--warning-dark, #b97a23);
}

/* Footer customizado do modal (substitui o slot padrão de Modal) */
.lvm-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 0 0;
  border-top: 1px solid var(--border, #e5e9f0);
  margin-top: 8px;
}
.lvm-footer-actions[hidden] { display: none !important; }
.lvm-footer-left, .lvm-footer-right {
  display: flex;
  gap: 8px;
}
.lvm-footer-left[hidden], .lvm-footer-right[hidden] { display: none !important; }

.lvm-btn-reprovar {
  background: var(--surface, #fff);
  color: var(--rejected, #d9534f);
  border: 1px solid var(--rejected, #d9534f);
}
.lvm-btn-reprovar:hover:not(:disabled) { background: rgba(217, 83, 79, 0.08); }

.lvm-btn-parcial {
  background: var(--warning, #f0ad4e);
  color: #fff;
  border: 1px solid var(--warning-dark, #b97a23);
}
.lvm-btn-parcial:hover:not(:disabled) { background: var(--warning-dark, #b97a23); }

.lvm-btn-total {
  background: var(--ok, #5cb85c);
  color: #fff;
  border: 1px solid var(--success-dark, #3d8b3d);
}
.lvm-btn-total:hover:not(:disabled) { background: var(--success-dark, #3d8b3d); }

.lvm-btn-confirma-rep {
  background: var(--rejected, #d9534f);
  color: #fff;
  border: 1px solid var(--rejected, #d9534f);
}
.lvm-btn-confirma-rep[hidden] { display: none !important; }
.lvm-btn-confirma-rep:hover:not(:disabled) { background: #b73a36; }

.lvm-btn-confirma-parc {
  background: var(--warning-dark, #b97a23);
  color: #fff;
  border: 1px solid var(--warning-dark, #b97a23);
}
.lvm-btn-confirma-parc[hidden] { display: none !important; }
.lvm-btn-confirma-parc:hover:not(:disabled) { background: #8c5a18; }

/* Responsivo — abaixo de 700px, resumo vira 2 cols + anexos viram coluna */
@media (max-width: 700px) {
  .lvm-resumo { grid-template-columns: repeat(2, 1fr); }
  .lvm-anexos-grid { grid-template-columns: 1fr; }
  .lvm-footer-actions { flex-direction: column; align-items: stretch; }
  .lvm-footer-left, .lvm-footer-right { flex-direction: column; }
}

/* ── Modal de cadastro de motivo (cadm-*) ───────────────────────────────────── */
.cadm-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cadm-body[hidden] { display: none !important; }
.cadm-help {
  font-size: 12px;
  margin: 0;
}
.cadm-form-row { display: flex; flex-direction: column; gap: 4px; }
.cadm-form-row[hidden] { display: none !important; }
.cadm-form-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
}
.cadm-input {
  border: 1px solid var(--border-strong, #cfd6e0);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface, #fff);
}
.cadm-form-footrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.cadm-form-footrow[hidden] { display: none !important; }
.cadm-err { color: var(--rejected, #d9534f); font-size: 12px; }
.cadm-cc { font-size: 11px; }

/* ── Popup "Ciente" obrigatório (ciente-*) ──────────────────────────────────── */
.ciente-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
}
.ciente-body[hidden] { display: none !important; }
.ciente-intro { line-height: 1.5; }
.ciente-bloco {
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--neutral-soft, #f1f3f5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ciente-bloco[hidden] { display: none !important; }
.ciente-tom-danger .ciente-bloco {
  background: rgba(217, 83, 79, 0.06);
  border-left: 3px solid var(--rejected, #d9534f);
}
.ciente-tom-warning .ciente-bloco {
  background: rgba(240, 173, 78, 0.10);
  border-left: 3px solid var(--warning, #f0ad4e);
}
.ciente-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ciente-row[hidden] { display: none !important; }
.ciente-row-obs { flex-direction: column; }
.ciente-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
}
.ciente-obs { font-size: 13px; line-height: 1.5; }

/* ── Modal de correção (lcm-*) ──────────────────────────────────────────────── */
.lcm-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lcm-body[hidden] { display: none !important; }
.lcm-aviso {
  padding: 10px 14px;
  background: rgba(240, 173, 78, 0.15);
  border: 1px solid var(--warning, #f0ad4e);
  border-radius: 4px;
  color: var(--warning-dark, #b97a23);
  font-size: 13px;
}
.lcm-section { display: flex; flex-direction: column; gap: 6px; }
.lcm-section[hidden] { display: none !important; }
.lcm-section-titulo {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-soft, #9aa3b2);
  font-weight: 600;
}
.lcm-upload-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface, #fff);
  border: 1px dashed var(--brand, #337ab7);
  border-radius: 4px;
  color: var(--brand-dark, #286090);
  font-size: 13px;
  cursor: pointer;
  width: fit-content;
}
.lcm-upload-trigger[hidden] { display: none !important; }
.lcm-upload-trigger:hover { background: var(--brand-soft, #e8f1fb); }
.lcm-upload-preview { font-size: 12px; color: var(--text-muted, #6b7280); }
.lcm-file-pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--neutral-soft, #f1f3f5);
  border-radius: 999px;
  font-size: 12px;
}
.lcm-textarea {
  border: 1px solid var(--border-strong, #cfd6e0);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.lcm-cc { font-size: 11px; }
.lcm-err {
  color: var(--rejected, #d9534f);
  font-size: 12px;
  padding: 8px 12px;
  background: rgba(217, 83, 79, 0.08);
  border-left: 3px solid var(--rejected, #d9534f);
  border-radius: 4px;
  display: block;
}
.lcm-err[hidden] { display: none !important; }

/* ── Botão btn-warning (faltava no design system pra "Ver correção") ────────── */
.btn-warning {
  background: var(--warning, #f0ad4e);
  color: #fff;
  border: 1px solid var(--warning-dark, #b97a23);
}
.btn-warning:hover:not(:disabled) { background: var(--warning-dark, #b97a23); }
.btn-warning[hidden] { display: none !important; }



/* ════════════════════════════════════════════════════════════════════════════
 * AP#12 / UI#52 (14/05/2026 — Bloco 2)
 * Botão "📬 Pendências" do header + Modal-lista de pendências do parceiro.
 * Substitui o popup-fila do AP#11 (lote-notificacao-parceiro popup-por-popup).
 * Decisão do dono via mockup docs/mockups/UI-0052-v3-bloco2-final.html.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Botão header "Pendências" + badge contador ─────────────────────────── */
.header-pendencias-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong, #cfd6e0);
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
}
.header-pendencias-btn:hover {
  border-color: var(--brand-500, #2962ff);
  color: var(--brand-500, #2962ff);
}
.header-pendencias-btn:focus-visible {
  outline: 2px solid var(--brand-500, #2962ff);
  outline-offset: 2px;
}
.header-pendencias-btn[hidden] { display: none !important; }

.header-pendencias-icon { font-size: 15px; }
.header-pendencias-label { font-size: 13px; }

.header-pendencias-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border: 2px solid var(--surface, #fff);
  min-width: 18px;
  text-align: center;
  line-height: 1;
}
.header-pendencias-badge[hidden] { display: none !important; }

/* ─── Modal-lista (.pml-*) ───────────────────────────────────────────────── */
.pml-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pml-subtitulo {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
}
.pml-lembrete {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 3px solid #d97706;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #78350f;
}

.pml-itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pml-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #64748b);
}
.pml-empty-icon { font-size: 42px; margin-bottom: 8px; }
.pml-empty h3 { margin: 0 0 4px; color: var(--text, #1f2937); }
.pml-empty p { margin: 0; font-size: 13px; }

/* Item individual da lista — visual da v1 (cards diretos, tudo inline) */
.pml-item {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.pml-item:hover {
  border-color: var(--brand-500, #2962ff);
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.pml-item-lido {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
/* B#29 (20/05/2026) — card no estado "lido" fica RISCADO (strikethrough),
   como um item concluido de checklist: comunica de relance "voce ja deu
   ciencia nesta reprovacao". O risco + o cinza pegam SO o conteudo
   informativo (numero, badge, competencia, valor, motivo, detalhes); os
   botoes (.pml-acoes) ficam de FORA — "+ Solicitar novo resgate" e a acao
   que ainda falta, nao pode parecer concluida. Os descendentes sao listados
   explicitamente (`... *`) porque .pml-row1 e' flex e a propagacao de
   text-decoration atraves de flex items nao e' confiavel entre browsers. */
.pml-item-lido .pml-row1,
.pml-item-lido .pml-row1 *,
.pml-item-lido .pml-motivo-line,
.pml-item-lido .pml-motivo-line * {
  text-decoration-line: line-through;
}
.pml-item-lido .pml-row1,
.pml-item-lido .pml-motivo-line {
  color: #8a93a3;
}

.pml-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pml-numero {
  font-weight: 700;
  font-family: -apple-system, ui-monospace, monospace;
  font-size: 14px;
  color: var(--text, #1f2937);
}
.pml-competencia {
  color: var(--text-muted, #64748b);
  font-size: 12px;
}
.pml-valor {
  margin-left: auto;
  font-weight: 700;
  color: var(--text, #1f2937);
  font-variant-numeric: tabular-nums;
}

.pml-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.pml-badge-danger  { background: #fee2e2; color: #b91c1c; }
.pml-badge-parcial { background: #f3e8ff; color: #6b21a8; }

.pml-lido-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.pml-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}
.pml-motivo-line {
  flex: 1;
  min-width: 240px;
  color: var(--text, #1f2937);
  font-size: 12.5px;
  line-height: 1.5;
}
.pml-motivo-label {
  color: var(--text-muted, #64748b);
  font-weight: 500;
}
.pml-obs {
  margin-top: 4px;
  font-size: 12.5px;
}

.pml-acoes {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pml-btn {
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-strong, #cfd6e0);
  background: var(--surface, #fff);
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.pml-btn:hover:not(:disabled) {
  border-color: var(--brand-500, #2962ff);
  color: var(--brand-500, #2962ff);
}
.pml-btn:disabled,
.pml-btn-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pml-btn-primary {
  background: var(--brand-500, #2962ff);
  border-color: var(--brand-500, #2962ff);
  color: #fff;
}
.pml-btn-primary:hover:not(:disabled) {
  background: var(--brand-600, #1d4ed8);
  color: #fff;
}
.pml-btn-warning {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.pml-btn-warning:hover:not(:disabled) {
  background: #d97706;
  color: #fff;
}
.pml-btn-ghost {
  background: transparent;
  color: var(--text-muted, #64748b);
}
.pml-btn-ghost:hover:not(:disabled) {
  background: #f8fafc;
  color: var(--text, #1f2937);
  border-color: var(--border-strong, #cfd6e0);
}

/* Mobile — colapsa botões abaixo da linha de motivo */
@media (max-width: 640px) {
  .pml-row2 { flex-direction: column; }
  .pml-acoes { width: 100%; }
  .pml-btn { flex: 1; min-width: 0; }
}

/* === B#14 — Dedup por competência (16/05/2026 noite) ====================
   Quando NÃO existe lote sucessor ativo, agrupa tentativas anteriores da
   mesma competência num acordeon fechado por default. Q1 do dono: card
   destaque visível + histórico minimizado. */

.pml-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .2s, border-color .2s, padding .2s;
  border: 2px solid transparent;
  border-radius: 14px;
}

/* v0.7.98 (16/05/2026 noite) — Refino visual escolhido pelo dono via mockup
   B-0014-v2: Preset C (Laranja amber #d97706) + 2px + texto do toggle vira
   "Recolher histórico" quando aberto. Engloba pai + histórico num
   "container destacado" pra deixar o agrupamento óbvio quando expandido. */
.pml-grupo.pml-grupo-aberto {
  background: #fef3c7;
  border-color: #d97706;
  padding: 8px;
}
.pml-grupo.pml-grupo-aberto .pml-item {
  border-color: #d97706;
}

/* v0.7.94 — wrap do toggle DENTRO do card destaque (pedido dono 16/05/2026
   noite). Border-top sutil pra separar do conteúdo principal. */
.pml-historico-toggle-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e9f0);
}

/* v0.7.98 — Toggle chamativo Preset C: outline laranja chamativo no estado
   fechado, vira sólido laranja quando aberto. Bold + padding maior pra
   sinalizar visualmente que é clicável. */
.pml-historico-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff7ed;
  border: 2px solid #d97706;
  border-radius: 8px;
  color: #9a3412;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pml-historico-toggle:hover {
  background: #d97706;
  color: #fff;
}
.pml-historico-toggle.pml-historico-aberto {
  background: #d97706;
  color: #fff;
}
.pml-historico-chevron {
  display: inline-block;
  transition: transform .15s ease;
  font-size: 11px;
  line-height: 1;
}
.pml-historico-toggle.pml-historico-aberto .pml-historico-chevron {
  transform: rotate(90deg);
}

.pml-historico-itens {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0 16px;
  padding-left: 12px;
  border-left: 2px solid #d97706;
}
/* CLAUDE.md item 14 — `[hidden]` precisa de !important pra vencer display:flex */
.pml-historico-itens[hidden] {
  display: none !important;
}

/* v0.7.98 — Card interno (histórico) com destaque amber sutil pra manter
   coerência visual com a borda externa. Bg #fde68a + border laranja sólido. */
.pml-item-historico {
  background: #fde68a;
  border: 1px solid #d97706;
  border-style: solid;
  padding: 10px 14px;
  font-size: 12.5px;
  opacity: 0.95;
}
.pml-item-historico:hover {
  opacity: 1;
  transform: none;
  box-shadow: none;
}
.pml-item-historico .pml-numero {
  font-size: 13px;
}

/* === AP#13 — Marcar pago (MarcarPagoModal) =============================== */
/* Modal "Marcar como pago" — substitui placeholder textual em
   `aguardando_pagamento` por form completo (data + forma + comprovante
   opcional + observação). Reusa modal-card/modal-body/modal-footer do
   sistema (DOC#9 glass). Estilos abaixo só pra elementos internos. */

.mpm-body { font-size: 14px; }

.mpm-resumo {
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.mpm-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
}
.mpm-resumo-cell { display: flex; flex-direction: column; gap: 2px; }
.mpm-resumo-lbl {
  font-size: 11px;
  color: var(--text-muted, #6b7596);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mpm-resumo-val { font-size: 14px; color: var(--text); }
.mpm-resumo-val code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-3, rgba(255, 255, 255, 0.04));
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}
.mpm-valor-destaque { color: var(--ok, #22c55e); font-weight: 700; }

.mpm-section { margin-bottom: 16px; }
.mpm-section-titulo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.mpm-section-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted, #6b7596);
}
.mpm-required {
  display: inline-block;
  font-size: 10px;
  color: var(--rejected, #d9534f);
  background: rgba(217, 83, 79, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.mpm-optional {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted, #6b7596);
  background: var(--surface-3, rgba(255, 255, 255, 0.04));
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.mpm-input-date { width: 100%; max-width: 200px; }

/* Radios de forma_pag — espelha layout das radios do srm (solicitar-resgate) */
.mpm-radio-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mpm-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2, rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mpm-radio:hover { border-color: var(--accent, #4c9aff); }
.mpm-radio input[type="radio"] { margin: 0; cursor: pointer; }
.mpm-radio-mark { display: none; /* visual via input nativo — suficiente */ }
.mpm-radio-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text); }
.mpm-radio-text strong { font-weight: 600; }
.mpm-radio:has(input:checked) {
  border-color: var(--accent, #4c9aff);
  background: rgba(76, 154, 255, 0.08);
}

/* Upload de comprovante */
.mpm-upload-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mpm-upload-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px dashed var(--border-strong, rgba(255, 255, 255, 0.18));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2, rgba(255, 255, 255, 0.02));
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  align-self: flex-start;
}
.mpm-upload-trigger:hover {
  border-color: var(--accent, #4c9aff);
  background: rgba(76, 154, 255, 0.06);
}
.mpm-upload-icon { font-size: 16px; }
.mpm-upload-preview { display: flex; flex-direction: column; gap: 6px; }
.mpm-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md, 8px);
  font-size: 12px;
  color: var(--text);
  align-self: flex-start;
  max-width: 100%;
}
.mpm-file-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.mpm-file-size {
  font-size: 11px;
  color: var(--text-muted, #6b7596);
}
.mpm-file-remove {
  background: none;
  border: none;
  color: var(--text-muted, #6b7596);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.mpm-file-remove:hover { color: var(--rejected, #d9534f); }

.mpm-textarea {
  width: 100%;
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
  font-size: 13px;
}
.mpm-charcount {
  font-size: 11px;
  text-align: right;
  margin-top: 4px;
}

.mpm-err {
  background: rgba(217, 83, 79, 0.1);
  border: 1px solid rgba(217, 83, 79, 0.35);
  color: var(--rejected, #d9534f);
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  margin-top: 8px;
}
/* Regra dura: classe usa `display: flex` em elementos que podem receber
   [hidden] — memória feedback_hidden_attr_vs_display_flex.md.
   `.mpm-err[hidden]` precisa ser invisível mesmo com display computado.
   (Browsers modernos respeitam [hidden] por default, mas adicionamos a
   regra explícita pra blindar caso uma cascata futura sobrescreva.) */
.mpm-err[hidden] { display: none !important; }

@media (max-width: 540px) {
  .mpm-resumo-grid { grid-template-columns: 1fr 1fr; }
  .mpm-input-date { max-width: 100%; }
}

/* === AUTH#4 / PRD-0021 — Tela de login local (#login) ==================== */

/* ============================================================================
 * UI#55 — Tela de login redesenhada (split-screen + identidade Tef.Net).
 * Esquerda: painel de marca com fundo mesh (glass DOC#9). Direita: formulário.
 * O shell (header/sidebar/rodapé) fica oculto via body.pre-app.
 * ============================================================================ */
.login-page {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  position: relative; /* ancora .login-version-pill e .login-diag-corner */
}

/* Refino UI#55 (23/05/2026) — versão no canto inferior esquerdo da página
   de login + botão de diagnóstico minimalista no canto inferior direito.
   Ambos com a menor letra legível (10px) e baixa opacidade pra não roubar
   atenção do formulário. O botão de diagnóstico copia o log silenciosamente
   ao clicar (sem painel, sem expandir nada — só feedback temporário do
   próprio texto do botão via copiarLog). */
.login-version-pill {
  /* Refino UI#55 23/05/2026 — 3ª rodada: dono pediu "100% visível".
     Branco sólido sobre o painel-marca escuro do login. */
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 11px;
  color: #fff;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: .02em;
  font-family: var(--font-mono, monospace);
  z-index: 2;
}
.login-diag-corner {
  position: absolute;
  right: 12px;
  bottom: 8px;
}
/* Refino UI#55 (23/05/2026 — 3ª rodada) — o dono confirmou o branco quase
   imperceptível em repouso (opacity .08); fonte subiu de 10px → 20px
   (+100%) a pedido dele. Hover/focus revelam pra acessibilidade. Ao
   clicar, JS aplica a classe `.is-copied` por 3s (verde de sucesso +
   background contrastante) — feedback visual claro de que o log foi
   copiado, somado ao "✓ Copiado!" no próprio texto (timeout do
   copiarLog também subiu pra 3s). */
.login-diag-btn-min {
  font-size: 20px;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
  opacity: .08;                        /* quase invisível em repouso */
  letter-spacing: .02em;
  border-radius: 8px;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.login-diag-btn-min:hover,
.login-diag-btn-min:focus-visible {
  opacity: .95;
  outline: none;
}
.login-diag-btn-min:active {
  opacity: 1;
  background-color: rgba(255, 255, 255, .18);
}
.login-diag-btn-min.is-copied {
  opacity: 1;
  color: #4ade80;                              /* verde de sucesso */
  background-color: rgba(74, 222, 128, .22);
}

/* --- painel de marca (esquerda) --- */
.login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 52px;
  color: #fff;
  overflow: hidden;
}
.login-brand::before {                       /* fundo mesh da marca */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 16% 14%, rgba(76, 154, 255, 0.55) 0, transparent 48%),
    radial-gradient(at 86% 8%, rgba(34, 197, 94, 0.30) 0, transparent 44%),
    radial-gradient(at 74% 92%, rgba(30, 96, 145, 0.65) 0, transparent 56%),
    linear-gradient(150deg, #1e6091 0%, #337ab7 56%, #4c9aff 100%);
}
.login-brand > * { position: relative; z-index: 1; }
.login-brand-logo { width: 450px; max-width: 82%; height: auto; }
.login-brand-sub {
  /* O PNG da marca (1000x1000) tem ~275px transparentes na base — a 450px
     de largura isso renderiza ~124px de vazio. O margin negativo puxa o
     bloco "Painel do Agente" + tagline para junto da marca.
     Refino UI#55 23/05/2026 — font-size subiu 15px → 21px (+40%) a pedido
     do dono. */
  margin-top: -100px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.login-brand-tagline {
  margin-top: 22px;
  max-width: 440px;
  font-size: 18px;
  line-height: 1.65;
  opacity: 0.92;
}

/* --- painel do formulário (direita) --- */
.login-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--surface);
}
.login-form-card { width: 100%; max-width: 332px; }
.login-form-title {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.login-banner {
  background: var(--rejected-bg, #fef2f2);
  color: var(--rejected, #b91c1c);
  border: 1px solid #fecaca;
  padding: 11px 13px;
  border-radius: 9px;
  margin-bottom: 15px;
  font-size: 13px;
  line-height: 1.5;
}
/* CLAUDE.md item 14 — display:block com [hidden] precisa de !important */
.login-banner[hidden] { display: none !important; }

.login-form-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.login-form-card .form-group label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.login-form-card .form-group input {
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form-card .form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.14);
}

.login-submit {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(120deg, var(--accent), var(--accent-darker));
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  transition: filter 0.15s, transform 0.05s;
}
.login-submit:hover:not(:disabled) { filter: brightness(1.07); }
.login-submit:active:not(:disabled) { transform: scale(0.99); }
.login-submit:disabled { opacity: 0.65; cursor: progress; }

.login-enter-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-subtle);
}
.login-enter-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}

/* --- Diagnóstico de entrada (recolhido) --- */
.login-diag {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.login-diag > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-subtle);
  text-align: center;
  padding: 4px;
}
.login-diag > summary::-webkit-details-marker { display: none; }
.login-diag > summary:hover { color: var(--text-muted); }
.login-diag-inner {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.login-diag-inner p { margin: 0 0 8px; line-height: 1.45; }
.login-diag-list {
  margin: 8px 0;
  padding-left: 18px;
  list-style: none;
  font-size: 11.5px;
}
.login-diag-list code { font-family: var(--font-mono); }
.login-diag-actions { display: flex; gap: 8px; margin-top: 10px; }
.login-diag-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.login-diag-btn:hover { background: var(--surface-3); }
.login-diag-btn--ghost { flex: 0 0 auto; background: transparent; }
/* AUTH#6 — o Diagnóstico aparece também na tela de escolher parceiro. Lá o
   rodapé (.entry-foot) já tem o separador, então o painel dispensa a borda. */
.entry-card .login-diag { margin-top: 6px; border-top: 0; padding-top: 0; }

/* --- responsivo: empilha em telas estreitas --- */
@media (max-width: 760px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 24px 26px;
  }
  .login-brand-logo { width: 84px; max-width: 30%; }
  .login-brand-sub { margin-top: 0; font-size: 11px; }
  .login-brand-tagline { display: none; }
  .login-form-pane { padding: 30px 20px 48px; align-items: flex-start; }
}

/* ============================================================================
   DT#26 — Aba "Motivos de Reprovação" na Gestão Dev (Lucas-Frontend Trilha B).
   Decisões P4=B (tela dedicada) + P6=B (drill clicável "Em uso") do mockup
   UI-0053-v3-correcao-adaptativa-gestao-dev.html.
   ============================================================================ */

.mr-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
}
.mr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface, #fff);
}
.mr-table thead th {
  background: var(--surface-2, #f9fafb);
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mr-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  vertical-align: middle;
}
.mr-table tbody tr:last-child td {
  border-bottom: none;
}
.mr-row-inactive td {
  opacity: 0.55;
  font-style: italic;
}
.mr-desc {
  font-weight: 500;
  color: var(--text, #111827);
}

/* Badges de tipo_correcao — cores casam com mockup UI-0053-v3 */
.mr-tipo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.mr-badge-anexo {
  background: #fef3c7;
  color: #92400e;
}
.mr-badge-cadastro {
  background: #dbeafe;
  color: #1e40af;
}
.mr-badge-livre {
  background: #ede9fe;
  color: #5b21b6;
}

/* Toggle ativo (botão circular) */
.mr-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.mr-toggle:hover:not(:disabled) {
  transform: scale(1.1);
}
.mr-toggle:disabled {
  cursor: wait;
  opacity: 0.6;
}
.mr-toggle-on {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}
.mr-toggle-off {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* Badge "Em uso" — clicável quando > 0, estático quando 0 */
.mr-em-uso-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
  background: var(--brand-50, #eff6ff);
  color: var(--brand-700, #1d4ed8);
  border: 1px solid var(--brand-200, #bfdbfe);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
button.mr-em-uso-badge:hover {
  background: var(--brand-100, #dbeafe);
  transform: scale(1.05);
}
.mr-em-uso-badge.mr-em-uso-zero {
  background: transparent;
  color: var(--text-muted, #9ca3af);
  border-color: transparent;
  cursor: default;
}
.mr-em-uso-badge.mr-em-uso-open {
  background: var(--brand-600, #2563eb);
  color: #fff;
  border-color: var(--brand-700, #1d4ed8);
}

/* Drill panel (linha expandida abaixo da linha do motivo) */
.mr-drill-row td {
  padding: 0 !important;
  border-bottom: none !important;
  background: var(--surface-2, #f9fafb);
}
.mr-drill-cell {
  padding: 0 !important;
}
.mr-drill-panel {
  margin: 0;
  padding: 14px 18px 18px 18px;
  background: linear-gradient(180deg, rgba(59,130,246,0.05), transparent);
  border-left: 3px solid var(--brand-500, #3b82f6);
}
.mr-drill-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-700, #1d4ed8);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mr-drill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--brand-600, #2563eb);
  color: #fff;
  font-size: 11px;
}
.mr-drill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mr-drill-item {
  display: grid;
  grid-template-columns: 180px 1fr 110px 110px auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface, #fff);
  border-radius: 6px;
  border: 1px solid var(--border-soft, #e5e7eb);
  font-size: 12px;
}
.mr-drill-num {
  color: var(--brand-700, #1d4ed8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.mr-drill-parceiro {
  color: var(--text, #111827);
  overflow-wrap: anywhere;
}
.mr-drill-valor {
  text-align: right;
  font-weight: 700;
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
}
.mr-drill-data {
  color: var(--text-muted, #6b7280);
  font-size: 11.5px;
  white-space: nowrap;
}
.mr-drill-tags {
  display: inline-flex;
  gap: 6px;
}
.mr-status-pill,
.mr-uso-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: lowercase;
  white-space: nowrap;
}
.mr-status-pendente {
  background: #fef3c7;
  color: #92400e;
}
.mr-status-parcial {
  background: #fed7aa;
  color: #9a3412;
}
.mr-uso-reprovado {
  background: #fee2e2;
  color: #991b1b;
}
.mr-uso-correcao {
  background: #dcfce7;
  color: #166534;
}

/* Responsivo: empilha drill em <=720px */
@media (max-width: 720px) {
  .mr-drill-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .mr-drill-valor,
  .mr-drill-data {
    text-align: left;
  }
}

/* ============ B#19 (18/05/2026) — "Clientes ativos no mês" semântica corrigida ============ */
/* Rodapé do kpi-card duo: linha pequena cinza embaixo do par de valores
   (ex.: "↳ 2 pagaram no mês"). Aparece só quando há ativos no mês. */
.kpi-duo-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft, #eef0f3);
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  line-height: 1.3;
}
.kpi-duo-foot strong {
  color: var(--text, #2d3748);
  font-weight: 700;
}

/* Toggle Todos / Só pagaram no drill: alinha à direita do header, espacinho extra. */
[data-clientes-toggle] {
  margin: 8px 0 10px;
}

/* Filtro do toggle: esconde linhas que não pagaram quando "Só pagaram" está ativo. */
.explodir-table-wrap[data-show-only="pagaram"] tbody tr.cliente-nao-pagou {
  display: none;
}

/* Chips Pagou / Aguardando da coluna nova. */
.pill.pill-ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.pill.pill-warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* UI#63 smoke (24/05/2026) — 4 estados da coluna "Pagou da competência".
   Hierarquia visual (mais grave = mais quente): pill-aguard-venc (vermelho)
   > pill-pagou-atraso (laranja) > pill-aguard-prazo (azul) > pill-pagou-dia
   (verde). Backend retorna `pagou_estado` por linha. */
.pill.pill-pagou-dia {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.pill.pill-pagou-atraso {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.pill.pill-aguard-prazo {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.pill.pill-aguard-venc {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* UI#64 v2 (24/05/2026 noite) — Pills do drill de lotes (Bloco 2 — Resgate
   da competência). Rodada 2 da squad consolidou ENUM canônico de 5 estados
   visíveis (Migration 056 removeu 'liquidado'; D3=b mantém 'reprovado_tef_net'
   fora — só na Bandeja UI#28):
     - pendente_aprovacao  (amarelo claro) — default, todo lote nasce aqui
     - aguardando_pagamento (laranja claro) — Tef.Net aprovou, esperando pgto
     - aprovado_parcial    (laranja escuro) — parceiro em correção (NF/Boleto)
     - pago                (verde)         — ciclo financeiro completo
     - estornado           (vermelho)      — devolução pós-pgto
   Gradiente visual do "calor" do estado segue cronologia do ciclo.
   Cores espelham mockup-v3-FINAL (DASH-bloco-2-resgate-competencia-v3-FINAL.html). */
.pill.pill-lote-pendente         { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pill.pill-lote-aguardando       { background: #fed7aa; color: #9a3412; border: 1px solid #fdba74; }
.pill.pill-lote-aprovado-parcial { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.pill.pill-lote-pago             { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.pill.pill-lote-estornado        { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.pill.pill-lote-outros           { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.pill.pill-forma-pix       { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.pill.pill-forma-ted       { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.pill.pill-forma-boleto    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pill.pill-forma-outros    { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.pill.pill-sla-ok          { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; font-size: 9px; padding: 0 5px; }
.pill.pill-sla-atras       { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; font-size: 9px; padding: 0 5px; }

/* Coluna "Data agendamento" — calculada (data_resgate + 6 dias). Fundo azul
   claro pra sinalizar que é derivada, não persistida no banco. */
.data-table th.col-calc-head,
.data-table td.col-calc {
  background: #eff6ff;
  color: #1e40af;
}
.data-table tbody tr:hover td.col-calc {
  background: #dbeafe;
}
.data-table th.col-calc-head {
  border-bottom-color: #bfdbfe;
}

/* Célula vazia por natureza (colunas forma_pgto/data_pgto/comprovante no
   modo "em_lote"). Cinza claro itálico. */
.data-table td .col-empty {
  color: #94a3b8;
  font-style: italic;
}

/* QA-1 Fernanda — UI#64 rodada 2 (24/05/2026):
   linha de lote estornado fica visualmente esmaecida pra distinguir de PAGO.
   Hover restaura opacidade total pro usuário ler valores sem fadiga visual. */
.data-table tr.row-lote-estornado td { opacity: 0.7; }
.data-table tr.row-lote-estornado:hover td { opacity: 1; }

/* QA-2 Fernanda — UI#64 rodada 2 (dono escolheu opção C):
   sufixo "(estornado)" em vermelho ao lado do valor original (auditável). */
.val-estornado-sufixo {
  color: #991b1b;
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  margin-left: 4px;
}

/* Contador entre parênteses no botão do toggle ("(31)"). */
.modalidade-toggle-count {
  font-weight: 400;
  opacity: .85;
  margin-left: 3px;
}

/* =================================================================
   AP#14 — Popup Forçado de Pendências (`.ppf-*`)
   Bloqueio de novo resgate quando há reprovado_tef_net não-lido na
   competência. Mockup canônico: docs/mockups/AP-0014-v1-bloqueio-
   resgate-popup-forcado.html. Cores adaptadas aos tokens do app
   (light theme — `--ag-*` + `--surface` + `--rejected`).
   ================================================================= */

.ppf-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ppf-aviso {
  background: linear-gradient(135deg, #fee2e2 0%, #fef3c7 100%);
  border-left: 4px solid var(--rejected, #d9534f);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #333);
}
.ppf-aviso strong {
  font-weight: 700;
}

.ppf-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.ppf-card {
  background: var(--surface, #fff);
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  padding: 12px 14px;
  transition: background .15s, border-color .15s;
}
.ppf-card-lido {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
/* B#29 (20/05/2026) — card "lido" RISCADO no modo forcado (mesma regra do
   .pml-item-lido). No modo forcado o card lido nao tem botoes de acao,
   entao o risco cobre row1 + motivo (todo o conteudo informativo). */
.ppf-card-lido .ppf-row1,
.ppf-card-lido .ppf-row1 *,
.ppf-card-lido .ppf-motivo,
.ppf-card-lido .ppf-motivo * {
  text-decoration-line: line-through;
}
.ppf-card-lido .ppf-row1,
.ppf-card-lido .ppf-motivo {
  color: #8a93a3;
}

.ppf-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ppf-numero {
  font-weight: 700;
  font-family: -apple-system, ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--text, #333);
}
.ppf-compet {
  color: var(--text-muted, #777);
  font-size: 11.5px;
}
.ppf-vlr {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--text, #333);
}

.ppf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.ppf-badge-rep {
  background: #fee2e2;
  color: #b91c1c;
}
.ppf-badge-lido {
  background: #d1fae5;
  color: #065f46;
}
.ppf-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
}
.ppf-dot-rep  { background: var(--rejected, #d9534f); }
.ppf-dot-lido { background: #16a34a; }

.ppf-motivo {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #333);
}
.ppf-motivo-lbl {
  color: var(--text-muted, #777);
  font-weight: 500;
}
.ppf-obs {
  margin-top: 4px;
}

.ppf-acoes {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ppf-btn-lido {
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #cccccc);
  color: var(--text, #333);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, border-color .12s;
}
.ppf-btn-lido:hover:not(:disabled) {
  background: var(--surface-2, #fafafa);
  border-color: var(--accent, #337ab7);
  color: var(--accent, #337ab7);
}
.ppf-btn-lido:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.ppf-footer {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #dddddd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}
.ppf-progresso {
  color: var(--text-muted, #777);
}
.ppf-progresso strong {
  color: var(--text, #333);
  font-weight: 700;
}
.ppf-btn-finalizar {
  background: #cbd5e1;
  color: #475569;
  border: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
  transition: background .12s, color .12s;
}
.ppf-btn-finalizar-ativo {
  background: #16a34a;
  color: #fff;
  cursor: pointer;
}
.ppf-btn-finalizar-ativo:hover {
  background: #15803d;
}

/* === Aviso visual no botão Solicitar resgate quando há reprovado não-lido === */
/* Aplicado em `.btn-resgatar-conta.ppf-com-aviso` via JS no dashboard. */
.btn-resgatar-conta.ppf-com-aviso {
  position: relative;
}
.btn-resgatar-conta.ppf-com-aviso::after {
  content: "⚠";
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--warn, #f0ad4e);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid var(--surface, #fff);
  line-height: 1;
}

.ppf-hint-trava {
  margin-top: 10px;
  background: #fef3c7;
  border: 1px solid #f0ad4e;
  color: #78350f;
  padding: 9px 13px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ppf-hint-trava strong {
  font-weight: 700;
}

/* Mobile — empilha contador e botão */
@media (max-width: 640px) {
  .ppf-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .ppf-btn-finalizar { width: 100%; }
}

/* ============================================================================
 * UI#60 (22/05/2026) — Header do usuário: dropdown do usuário + chip de revenda.
 * Decisões do mockup UI-0060-v2: Q1=A menu ao clicar no nome · Q2=B identidade +
 * "Meu perfil" + "Sair" · Q3=A chip no header · Q5=B razão social + código.
 * ========================================================================== */
.user-menu-wrap { position: relative; display: inline-flex; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(20, 40, 70, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
}
/* CRÍTICO (feedback_hidden_attr_vs_display_flex): o display:flex acima venceria
   o atributo [hidden] do user agent; suprimir explicitamente. */
.user-dropdown[hidden] { display: none !important; }

.user-dropdown-id {
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.user-dropdown-nome { font-weight: 600; font-size: 14px; }
.user-dropdown-papel { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.user-dropdown-item:hover { background: var(--surface-2); }
.user-dropdown-ic { width: 18px; text-align: center; }
.user-dropdown-sair {
  color: var(--danger, #c62828);
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.user-dropdown-sair:hover { background: rgba(198, 40, 40, 0.08); }

/* Chip informativo da revenda — parceiro/agente logado direto (somente leitura,
   sem caret, sem clique). Espelha o visual do .agent-switcher-trigger. */
.revenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  max-width: 280px;
}
.revenda-chip-ic { color: var(--accent); }
.revenda-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

/* === UI#65 — Drills do Bloco 3 (Conta da Competência) — 24/05/2026 ============
 * Decisão do dono (24/05/2026, sessão Bloco 3): drill por cliente ganha colunas
 * extras conforme o KPI — Revenda (subordinada do agente), Vencimento, Pgto
 * Cliente, Pgto Comissão, Prev. Pgto, Lote, Motivo, Faixa. CNPJ formatado
 * (00.000.000/0000-00) sempre como PRIMEIRA coluna. Hierarquia conceitual:
 * Agente (logado) > Revenda (Factory/Digicom/etc) > Cliente final. Memória:
 * project_hierarquia_agente_revenda_cliente.md.
 *
 * Inadimplência: 6 cards continuam no painel, mas compartilham UM drill com
 * a LISTA COMPLETA + coluna "Faixa" (1-30/31-60/61-90/90+) — em vez dos 6
 * mini-drills idênticos com Top 5.
 * ========================================================================= */

/* Coluna CNPJ — largura fixa pra alinhar valores monoespaçados em todos os
 * drills do Bloco 3 (CNPJ formatado tem 18 chars; CPF tem 14; mantém largura
 * suficiente pra ambos sem quebrar layout). */
.explodir-tabela-clientes td.col-cnpj,
.explodir-tabela-clientes th.col-cnpj,
.top-tabela td.col-cnpj,
.top-tabela th.col-cnpj {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text-muted, #6c757d);
}

/* Colunas de data — tabular-nums + alinhamento à esquerda, largura suficiente
 * pra DD/MM/YYYY (10 chars). */
.explodir-tabela-clientes td.col-data,
.explodir-tabela-clientes th.col-data,
.top-tabela td.col-data,
.top-tabela th.col-data {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  text-align: left;
}

/* Coluna Lote — exibe número humano do lote (ex: LRA-417-001). Mono opcional
 * pra dar peso visual de identificador. */
.explodir-tabela-clientes td.col-lote,
.explodir-tabela-clientes th.col-lote {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--accent, #245580);
}

/* Coluna Motivo — badge colorido por categoria (3 motivos canônicos definidos
 * pelo dono em 24/05/2026: Cortesia, Cancelado, Contrato inativo). Backend
 * envia exatamente um desses 3 valores por linha; classes geradas via slug
 * normalizado (sem acento, lowercase). */
.explodir-tabela-clientes td.col-motivo,
.explodir-tabela-clientes th.col-motivo {
  white-space: nowrap;
}
.badge-motivo {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
/* Cancelado — vermelho mais forte (motivo mais grave) */
.badge-motivo-cancelado {
  background: #fde2e2;
  color: #9b1c1c;
  border: 1px solid #f5b6b6;
}
/* Cortesia (= "Boleto Não Cobrado - Negociado" sub_status_boleto=12) — laranja */
.badge-motivo-cortesia {
  background: #fdecd0;
  color: #8a4b00;
  border: 1px solid #f5cf95;
}
/* Contrato inativo — cinza (contexto neutro) */
.badge-motivo-contrato-inativo {
  background: #e9edf2;
  color: #4a5568;
  border: 1px solid #cbd5e0;
}

/* Coluna Faixa (drill Inadimplência) — badge por faixa de atraso, mesma
 * paleta dos buckets aging do bloco-inadimplencia (--age-1-30 etc, definidos
 * em :root no início do styles.css). */
.badge-faixa {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
  color: #fff;
}
.badge-faixa.badge-faixa-1-30   { background: var(--age-1-30,   #fbbf24); color: #4a3a04; }
.badge-faixa.badge-faixa-31-60  { background: var(--age-31-60,  #fb923c); }
.badge-faixa.badge-faixa-61-90  { background: var(--age-61-90,  #f97316); }
.badge-faixa.badge-faixa-90mais { background: var(--age-90mais, #dc2626); }

/* ===========================================================
   UI#66 — Modal Solicitar resgate ampliado + caixa de
   diretrizes maior (2,5x do tamanho original).
   Card 640 → 860px. Tipografia das diretrizes sobe pra 14px /
   line-height 1.7. min-height da caixa de markdown (UI#33) sobe
   ~2,5x pra leitura confortável.
   2ª rodada do smoke (25/05/2026): blocos "Como preencher a NF"
   e "Dados Tef.Net com botões de copiar" REMOVIDOS — dono
   preferiu manter só o markdown editável da Tef.Net.
   =========================================================== */
.modal-card.srm-wide { max-width: 860px; }
.srm-wide .srm-diretrizes {
  font-size: 14px;
  line-height: 1.7;
  padding: 18px 20px;
  /* UI#66 v2 — caixa ~2,5x da altura natural. Altura original era ~140-170px
     (5 bullets curtos); subir pra 420px dá ~2,5x e sobra fôlego pro markdown
     completo da Tef.Net com 3 seções (Boleto/PIX + Emissão NF + Dados). */
  min-height: 420px;
  max-height: 60vh;
  overflow-y: auto;
}
.srm-wide .srm-diretrizes p { margin: 8px 0; }
.srm-wide .srm-diretrizes ul { padding-left: 24px; margin: 8px 0; }
.srm-wide .srm-diretrizes li { margin: 4px 0; }

@media (max-width: 700px) {
  .modal-card.srm-wide { max-width: 100%; }
  /* Em telas baixas, min-height fixa de 420px sobra demais — ajusta pra 320px */
  .srm-wide .srm-diretrizes { min-height: 320px; }
}

/* ============================================================================
   UI#67 — Drill inline na Bandeja Tef.Net + Meus Lotes (Variante C)
   ============================================================================
   Linha <tr.drill-inline-row> injetada após a linha do lote clicado.
   Paleta v4 da capa REL#1-M (#0B3DD9) pra coesão visual entre tela e
   impressão.
   PRD: docs/PRDs/PRD-0028-drill-lote-inline-bandeja/
   Mockup: docs/mockups/UI-0067-v1-drill-lote-na-bandeja.html
*/

:root {
  --drill-primary: #0B3DD9;
  --drill-primary-dark: #0829A8;
  --drill-bg: rgba(11, 61, 217, 0.04);
  --drill-success: #16a34a;
}

/* Linha do lote ativo recebe leve destaque */
.lote-row-active > td {
  background: var(--drill-bg);
  border-bottom: none;
}

.drill-inline-row {
  background: var(--drill-bg);
}

/* Memória 14 CLAUDE.md — display em elemento [hidden] precisa do reset */
.drill-inline-row[hidden] { display: none !important; }

.drill-inline-row > td {
  padding: 18px 22px 24px;
  border-top: 2px solid var(--drill-primary);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.drill-inline-body {
  max-width: 100%;
}

.drill-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.drill-cards-grid {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  min-width: 0;
}

.drill-card {
  background: var(--paper, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}

.drill-card-label {
  font-size: 11px;
  color: var(--text-muted, #475569);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.drill-card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0F172A);
  word-break: break-word;
}

.drill-card-value small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #475569);
  margin-top: 2px;
}

.drill-capa-btn {
  background: var(--drill-primary);
  color: #fff !important;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.drill-capa-btn:hover {
  background: var(--drill-primary-dark);
}

/* Tabela de boletos dentro do drill — herda estilos da data-table existente,
   só ajusta densidade pra caber mais. */
.drill-inline-row .data-table {
  font-size: 13px;
}

.drill-inline-row .data-table td,
.drill-inline-row .data-table th {
  padding: 6px 10px;
}

/* Font mono pra IDs/CNPJs/datas dentro do drill */
.drill-inline-row .font-mono,
.drill-card-value .font-mono {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
}

/* Timeline opcional */
.drill-timeline {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #e2e8f0);
}

.drill-timeline h4 {
  font-size: 12px;
  color: var(--text-muted, #475569);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

.drill-timeline ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

.drill-timeline li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
}

.drill-timeline li:last-child {
  border-bottom: none;
}

.tl-data {
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--text-muted, #475569);
}

.tl-acao {
  font-weight: 600;
  color: var(--text, #0F172A);
}

/* Estados de erro/vazio do drill */
.drill-empty, .drill-error {
  text-align: center;
  padding: 32px 16px;
}

.drill-empty .icon, .drill-error .icon {
  font-size: 32px;
  margin-bottom: 8px;
}

/* Banner amarelo de deep-link com lote fora da visão (TASK-0004) */
.drill-deeplink-miss {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  background: #FEF3C7;
  border-left: 4px solid #D97706;
  border-radius: 6px;
  margin-bottom: 16px;
}

.drill-deeplink-miss .icon {
  font-size: 24px;
  flex-shrink: 0;
}

.drill-deeplink-miss strong {
  display: block;
  color: #92400E;
  margin-bottom: 4px;
}

.drill-deeplink-miss p {
  margin: 0 0 8px;
  font-size: 13px;
  color: #78350F;
}

/* Mobile — empilha vertical abaixo de 720px */
@media (max-width: 720px) {
  .drill-header {
    flex-direction: column;
  }
  .drill-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .drill-capa-btn {
    align-self: stretch;
    text-align: center;
  }
  .drill-inline-row > td {
    padding: 14px 12px 18px;
  }
}

/* ============ DEV-0004 — Panorama do Cliente ============ */

/* Badges semânticos reutilizáveis (usados tb pelo panorama) */
.badge-ok       { background: rgba(34,197,94,0.12);   color: var(--ok, #22c55e);       border-color: rgba(34,197,94,0.3); }
.badge-warn     { background: rgba(245,158,11,0.12);   color: var(--warn, #f59e0b);     border-color: rgba(245,158,11,0.3); }
.badge-err      { background: rgba(239,68,68,0.12);    color: var(--rejected, #ef4444); border-color: rgba(239,68,68,0.3); }
.badge-muted    { background: rgba(148,163,184,0.1);   color: #94a3b8;                  border-color: rgba(148,163,184,0.2); }
.badge-fechado  { background: rgba(139,92,246,0.12);   color: #8b5cf6;                  border-color: rgba(139,92,246,0.3); }
.badge-premium  { background: rgba(245,158,11,0.15);   color: #b45309;                  border-color: rgba(245,158,11,0.4); }
.badge-standard { background: rgba(99,102,241,0.12);   color: #4f46e5;                  border-color: rgba(99,102,241,0.3); }

.panorama-wrap {
  padding: 16px 20px;
  min-height: 200px;
}

.panorama-form-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.panorama-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-subtle);
  white-space: nowrap;
}

.panorama-input {
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font: inherit;
  width: 180px;
  outline: none;
  transition: border-color 0.15s;
}
.panorama-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,154,255,0.18); }
.panorama-input-sm { width: 100px; }

.panorama-sep {
  font-size: 12px;
  color: var(--text-subtle);
}

.panorama-btn { padding: 7px 16px; font-size: 13px; }

.panorama-err {
  font-size: 12px;
  color: var(--rejected);
  display: inline-block;
}

/* Regra 14 (feedback_hidden_attr_vs_display_flex): classe com display vence o
   [hidden] do user-agent em especificidade. Sem isto, o span de erro inline
   continua visivel mesmo apos errInline.hidden = true (reset pos-busca). */
.panorama-err[hidden] { display: none !important; }

/* DEV-0004 (painel completo): comissão realizada (paga) x potencial (não paga). */
.panorama-kpi-ok  { color: var(--ok, #5cb85c); }
.panorama-kpi-pot { color: var(--text-subtle); }
/* Célula/valor de comissão potencial: atenuado, para diferenciar do que é devido. */
.panorama-comissao-pot { color: var(--text-subtle); font-style: italic; }
.panorama-pot-tag {
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
/* Linha de fatura não paga: leve realce de fundo para leitura em bloco. */
.panorama-tr-naopago > td { background: rgba(245,158,11,0.05); }

.panorama-err-box {
  color: var(--rejected);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.06);
}

.panorama-loading {
  padding: 20px;
  font-size: 13px;
  color: var(--text-subtle);
}

.panorama-empty {
  padding: 24px;
  font-size: 13px;
  color: var(--text-subtle);
  text-align: center;
}

.panorama-cliente-card {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.panorama-cliente-razao {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.panorama-cliente-cnpj {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 2px;
}

.panorama-kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.panorama-kpi {
  flex: 1;
  min-width: 130px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.panorama-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: 4px;
}
.panorama-kpi-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.panorama-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.panorama-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.panorama-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.panorama-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.panorama-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.panorama-td-nome { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.panorama-tr-group-header td {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

.panorama-tr-sep td {
  background: rgba(245,158,11,0.04);
  font-size: 11px;
  font-style: italic;
  color: var(--warn, #f59e0b);
  padding: 5px 12px;
  border-top: 1px dashed rgba(245,158,11,0.35);
}

.panorama-tr-subtotal td {
  background: var(--surface-2);
  font-size: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
}

.panorama-tr-total td {
  background: var(--surface-2);
  font-size: 13px;
  padding: 10px 12px;
  border-top: 2px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

.panorama-tr-data:hover td {
  background: var(--surface-2);
}