/**
 * CHEFE PRO - SISTEMA DE DESIGN & ESTILOS PREMIUM
 * Paleta Esmeralda Dark Fintech, Glassmorphism e Micro-animações
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-primary: #070a10;
  --bg-secondary: #0c121e;
  --bg-card: rgba(18, 25, 41, 0.75);
  --bg-card-hover: rgba(26, 36, 58, 0.85);
  --bg-glass: rgba(15, 23, 42, 0.65);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(16, 185, 129, 0.35);

  --emerald-500: #10b981;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --emerald-900: #064e3b;
  --emerald-glow: rgba(16, 185, 129, 0.25);

  --gold-500: #f59e0b;
  --gold-glow: rgba(245, 158, 11, 0.2);
  --rose-500: #f43f5e;
  --blue-500: #3b82f6;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', 'Segoe UI Mono', monospace;

  --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-glow: 0 0 25px -5px var(--emerald-glow);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  background-image: 
    radial-gradient(circle at 15% 10%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 40%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ==========================================
   HEADER & BARRA DE NAVEGAÇÃO PRINCIPAL
   ========================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 16, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1.5rem;
}

.header-content {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-logo-badge {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #10b981, #047857);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: var(--shadow-glow);
}

.brand-titles h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pro-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.brand-titles p {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.desktop-nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.nav-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-tab-btn.active {
  background: var(--emerald-500);
  color: #022c22;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.header-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-toggle-split {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-toggle-split:hover, .btn-toggle-split.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--emerald-500);
  color: var(--emerald-400);
}

/* ==========================================
   ESTRUTURA PRINCIPAL & MODO DIVIDIDO
   ========================================== */
.main-wrapper {
  max-width: 1600px;
  margin: 1.5rem auto 5rem;
  padding: 0 1.5rem;
  position: relative;
}

/* MODO SPLIT (LADO A LADO) */
.modo-split-ativo {
  display: grid;
  /* minmax(0, …): cada tela fica com metade de verdade (com 1fr o Bloco de Notas esticava a coluna e a página rolava de lado) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}
.modo-split-ativo > .tab-view-content { min-width: 0; }

.modo-split-ativo #tab-jogar-comprovantes,
.modo-split-ativo #tab-bloco-notas {
  display: block !important;
}

.modo-split-ativo #tab-visao-geral,
.modo-split-ativo #tab-cadastros,
.modo-split-ativo #tab-mercadorias,
.modo-split-ativo #tab-chefe,
.modo-split-ativo #tab-destinos,
.modo-split-ativo #tab-cartorio,
.modo-split-ativo #tab-exportar,
.modo-split-ativo #tab-assistente-ia {
  display: none !important;
}
/* Com a gaveta de comprovantes aberta nos Cadastros: Cadastros à esquerda, Bloco de Notas à direita (Etapa 9) */
.modo-split-ativo.modo-split-cadastros #tab-cadastros { display: block !important; order: -1; }
.modo-split-ativo.modo-split-cadastros #tab-jogar-comprovantes { display: none !important; }

/* Telas normais */
.tab-view-content {
  display: none;
  animation: fadeIn 0.25s ease-out;
}

.tab-view-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   METRICAS BANNER (VISÃO GERAL)
   ========================================== */
.metrics-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.metric-card.card-bruto::before { background: var(--blue-500); }
.metric-card.card-recolhido::before { background: var(--emerald-500); }
.metric-card.card-receber::before { background: var(--gold-500); }
.metric-card.card-status::before { background: #8b5cf6; }

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.metric-header span {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric-icon {
  font-size: 1.25rem;
}

.metric-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.metric-card.card-recolhido .metric-value {
  color: var(--emerald-400);
}

.metric-card.card-receber .metric-value {
  color: #fbbf24;
}

.metric-footer {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* ==========================================
   UPLOAD DE COMPROVANTES (JOGAR COMPROVANTES)
   ========================================== */
.comprovantes-upload-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .comprovantes-upload-container {
    grid-template-columns: 1fr;
  }
}

.upload-panel-card, .lote-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}

.panel-title-area {
  margin-bottom: 1.25rem;
}

.panel-title-area h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-title-area p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.dropzone-box {
  border: 2px dashed rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.03);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.dropzone-box:hover, .dropzone-box.dragover {
  border-color: var(--emerald-400);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: var(--shadow-glow);
}

.dropzone-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  display: block;
}

.dropzone-box h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.dropzone-box p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.dropzone-actions-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-upload-primary {
  background: var(--emerald-500);
  color: #022c22;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-upload-primary:hover {
  background: var(--emerald-400);
  transform: translateY(-1px);
}

.btn-upload-whatsapp {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-upload-whatsapp:hover {
  background: rgba(37, 211, 102, 0.15);
  border-color: #25d366;
  color: #25d366;
}

.dropzone-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

.quick-demo-action {
  margin-top: 1rem;
  text-align: center;
}

.btn-load-demo {
  background: transparent;
  border: 1px dashed rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-load-demo:hover {
  background: rgba(245, 158, 11, 0.1);
}

/* FORMULÁRIO DE LOTE */
.lote-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-field-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-field-group input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  color: #fff;
  font-family: var(--font-main);
  transition: border-color 0.2s;
}

.form-field-group input:focus {
  outline: none;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.btn-apply-lote {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: #fff;
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.btn-apply-lote:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--emerald-500);
}

/* ==========================================
   CARD DE REVISÃO E CONFERÊNCIA DE COMPROVANTE
   ========================================== */
.comprovante-review-card {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.comprovante-review-card.card-duplicado {
  border-color: var(--rose-500);
  box-shadow: 0 0 30px rgba(244, 63, 94, 0.25);
}

/* BANNER ALERTA DE DUPLICIDADE */
.alerta-duplicidade-banner {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.alerta-icon {
  font-size: 2rem;
  line-height: 1;
}

.alerta-conteudo h4 {
  color: #fb7185;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.alerta-conteudo p {
  font-size: 0.85rem;
  color: #fecdd3;
  margin-bottom: 0.35rem;
}

.alerta-aviso {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: rgba(244, 63, 94, 0.4);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.comp-icon-badge {
  font-size: 1.75rem;
}

.header-left h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

.sub-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.btn-ver-original {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ver-original:hover {
  background: rgba(255, 255, 255, 0.15);
}

.review-grid-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.input-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.input-group input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.8rem;
  font-size: 0.9rem;
  color: #fff;
  font-family: var(--font-main);
}

.input-group input:focus {
  outline: none;
  border-color: var(--emerald-500);
}

/* "Vincular a um gerente cadastrado" embaixo do Responsável / Apelido */
.select-gerente-rapido {
  width: 100%;
  min-width: 0;
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.55);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--emerald-400);
  font-family: var(--font-main);
  cursor: pointer;
  text-overflow: ellipsis;
}
.select-gerente-rapido:focus { outline: none; border-style: solid; border-color: var(--emerald-500); }
.select-gerente-rapido option { background: #0f172a; color: #f8fafc; font-weight: 500; }
body.theme-light .select-gerente-rapido, body.theme-light .gerente-rapido-info { color: #047857; }
body.theme-light .select-gerente-rapido option { background: #fff; color: #0f172a; }
.gerente-rapido-info { font-size: 0.75rem; color: var(--emerald-400); line-height: 1.35; overflow-wrap: anywhere; }
.gerente-rapido-info:empty { display: none; }

.input-destaque-valor {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--emerald-400) !important;
}

.input-readonly {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
}

/* ID do Pix digitado pelo dono (a leitura não achou): conferência do formato e da data na hora */
#compIdPix:not([readonly]), #corrIdPix { font-family: var(--font-mono); font-size: 0.8rem; }
.id-pix-aviso { display: block; font-size: 0.72rem; line-height: 1.35; margin-top: 0.2rem; color: var(--text-muted); }
.id-pix-aviso:empty { display: none; }
.id-pix-ok { color: #34d399; }
.id-pix-erro { color: #f87171; }
body.theme-light .id-pix-ok { color: #059669; }
body.theme-light .id-pix-erro { color: #dc2626; }

/* SELEÇÃO DO VÍNCULO COM DIVIDENDO */
.vinculo-selector-box {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.vinculo-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.vinculo-title .icon {
  font-size: 1.5rem;
}

.vinculo-title strong {
  display: block;
  font-size: 0.95rem;
  color: #fff;
}

.vinculo-title .hint {
  font-size: 0.75rem;
  color: var(--emerald-400);
}

.select-and-memory {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.select-dividendo-destaque {
  background: #0f172a;
  border: 2px solid var(--emerald-500);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  outline: none;
}

.checkbox-lembrar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-lembrar input {
  accent-color: var(--emerald-500);
  width: 16px;
  height: 16px;
}

.review-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-cancelar {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancelar:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.btn-salvar-cartorio {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-salvar-cartorio:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-vincular-confirmar {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #022c22;
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
  transition: all 0.2s;
}

.btn-vincular-confirmar:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* ==========================================
   CADASTROS DE DIVIDENDOS (CARDS)
   ========================================== */
.cadastros-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-and-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex: 1;
}

.search-box {
  position: relative;
  min-width: 280px;
  flex: 1;
  max-width: 450px;
}

.search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-box input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 0.65rem 2.2rem 0.65rem 2.4rem;
  color: #fff;
  font-size: 0.85rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--emerald-500);
}

.btn-clear-search {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.filter-pills {
  display: flex;
  gap: 0.35rem;
}

.pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.pill-btn.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--emerald-500);
  color: var(--emerald-400);
  font-weight: 700;
}

.cadastros-resumo-rapido {
  display: flex;
  gap: 0.75rem;
}

.resumo-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.resumo-chip .label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.resumo-chip .val {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.chip-recolhido .val { color: var(--emerald-400); }
.chip-falta .val { color: #fbbf24; }

/* GRID DE DIVIDENDOS */
.dividendos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
}

.dividendo-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.2s, border-color 0.2s;
}

.dividendo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.15);
}

.card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.div-emoji-badge {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-md);
}

.div-nome {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.div-ref {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* STATUS BADGE */
.badge-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.status-quitado { background: rgba(16, 185, 129, 0.2); color: var(--emerald-400); border: 1px solid rgba(16, 185, 129, 0.4); }
.status-bom { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.status-parcial { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.status-zerado { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }

/* BARRA DE PROGRESSO */
.progress-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.pct-text {
  font-weight: 700;
  color: #fff;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.progress-fill.status-quitado { background: linear-gradient(90deg, #10b981, #34d399); }
.progress-fill.status-bom { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.progress-fill.status-parcial { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-fill.status-zerado { background: #ef4444; }

/* VALORES GRID */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.val-box {
  display: flex;
  flex-direction: column;
}

.v-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.v-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.val-pago .v-num { color: var(--emerald-400); }
.val-falta .v-num { color: #f87171; }

/* LISTA DE RECOLHES NO CARD */
.recolhes-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.btn-micro-action {
  background: none;
  border: none;
  color: var(--emerald-400);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-micro-action:hover {
  text-decoration: underline;
}

.recolhes-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 120px;
  overflow-y: auto;
}

.recolhe-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.r-data { color: var(--text-muted); }
.r-desc { color: #fff; font-weight: 500; }
.r-hora { color: var(--text-muted); font-size: 0.7rem; }
.r-val { color: var(--emerald-400); font-weight: 700; }

.no-recolhes-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem;
  text-align: center;
}

.card-footer-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.btn-card-action {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 0.55rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-card-action:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-card-action.primary {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--emerald-500);
  color: var(--emerald-400);
}

.btn-card-action.primary:hover {
  background: var(--emerald-500);
  color: #022c22;
}

/* ==========================================
   CARTÓRIO DE COMPROVANTES & AUDITORIA
   ========================================== */
.cartorio-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.cartorio-info-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.c-icon {
  font-size: 2.2rem;
}

.cartorio-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-cartorio-action {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cartorio-action:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-cartorio-action.primary {
  background: var(--emerald-500);
  color: #022c22;
  border: none;
  font-weight: 700;
}

.btn-cartorio-action.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.btn-cartorio-action.danger:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fff;
}

.cartorio-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.c-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.cs-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

.cs-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.cartorio-table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}

.cartorio-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}

.cartorio-table th {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.85rem 1rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

.cartorio-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.cartorio-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.chip-banco {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.chip-dividendo {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-400);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.75rem;
}

.code-id-pix {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
}

.btn-thumb-preview {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-table-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
}

.btn-table-del:hover {
  opacity: 1;
}

/* ==========================================
   PAINEL DE GRÁFICOS ANALÍTICOS (DASHBOARD)
   ========================================== */
.charts-grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .charts-grid-container {
    grid-template-columns: 1fr;
  }
}

.chart-box-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.chart-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.chart-canvas-wrapper {
  position: relative;
  height: 280px;
  width: 100%;
}

/* ==========================================
   CENTRAL DE EXPORTAÇÃO
   ========================================== */
.export-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.export-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.2s, border-color 0.2s;
}

.export-card:hover {
  transform: translateY(-4px);
  border-color: var(--emerald-500);
}

.export-card-icon {
  font-size: 2.5rem;
}

.export-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.export-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex: 1;
}

.btn-export-action {
  background: var(--emerald-500);
  color: #022c22;
  border: none;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-export-action:hover {
  background: var(--emerald-400);
}

/* ==========================================
   MODAL DE VISUALIZAÇÃO DE IMAGEM ORIGINAL
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 2rem;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.modal-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-header-bar h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.btn-close-modal {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-body-preview {
  padding: 1.5rem;
  overflow-y: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
}

.modal-body-preview img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-md);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   TOASTS NOTIFICAÇÕES FLUTUANTES
   ========================================== */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast-item {
  background: #0f172a;
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s ease;
}

.toast-item.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-sucesso { border-color: var(--emerald-500); }
.toast-erro { border-color: var(--rose-500); }
.toast-alerta { border-color: var(--gold-500); }

/* ==========================================
   BARRA DE NAVEGAÇÃO MOBILE (ESTILO APP CLIENTE)
   ========================================== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(12, 18, 30, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-color);
  z-index: 100;
  padding: 0.4rem 0.5rem;
  justify-content: space-around;
}

@media (max-width: 768px) {
  .desktop-nav-tabs { display: none; }
  .mobile-bottom-nav { display: flex; }
  .main-wrapper { margin-bottom: 5.5rem; }
}

.mobile-tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mobile-tab-btn span.icon {
  font-size: 1.15rem;
}

.mobile-tab-btn.active {
  color: var(--emerald-400);
}

/* ==========================================
   SIMULADOR DE ABATIMENTO RÁPIDO NOS CARDS
   ========================================== */
.simulador-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
}

.simulador-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.simulador-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.simulador-inputs input {
  width: 90px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.sim-resultado {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sim-resultado strong {
  color: #34d399;
}

/* ==========================================
   TEMA CLARO (LIGHT THEME SUPPORT)
   ========================================== */
body.theme-light {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(241, 245, 249, 0.85);
  --border-color: rgba(0, 0, 0, 0.08);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body.theme-light .app-header {
  background: rgba(255, 255, 255, 0.9);
}

body.theme-light .brand-titles h1,
body.theme-light .metric-value,
body.theme-light .div-nome,
body.theme-light .cs-num {
  color: #0f172a;
}

body.theme-light .cartorio-table th {
  background: #e2e8f0;
  color: #334155;
}

body.theme-light .valores-grid {
  background: #f8fafc;
}

body.theme-light .v-num {
  color: #0f172a;
}

/* ==========================================
   BARRA DE PROGRESSO GLOBAL NO HEADER
   ========================================== */
.header-progress-bar {
  border-top: 1px solid var(--border-color);
  padding: 0.45rem 1.5rem;
  background: rgba(0, 0, 0, 0.15);
}
.hpb-inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hpb-track {
  position: relative;
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* A largura é animada pelo app.js (quadro a quadro, junto com o número): sem transition aqui */
.hpb-fill {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #047857 0%, #10b981 45%, #34d399 80%, #a7f3d0 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.55), 0 0 2px rgba(167, 243, 208, 0.6);
}
/* Listras andando: sensação de movimento */
.hpb-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.16) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
  animation: hpbListras 0.9s linear infinite;
}
/* Brilho que passa correndo por dentro da barra */
.hpb-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: hpbBrilho 3.2s ease-in-out infinite;
}
/* Ponta acesa na frente da barra */
.hpb-ponta {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #d1fae5 35%, #34d399 70%);
  box-shadow: 0 0 8px 2px rgba(52, 211, 153, 0.8), 0 0 18px 4px rgba(16, 185, 129, 0.45);
  animation: hpbPonta 1.6s ease-in-out infinite;
  pointer-events: none;
}
.hpb-ponta[hidden] { display: none; }
@keyframes hpbListras { from { background-position: 0 0; } to { background-position: 16px 0; } }
@keyframes hpbBrilho { 0% { left: -45%; } 55%, 100% { left: 110%; } }
@keyframes hpbPonta { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.85; } }
/* Entrou pagamento: a barra acende e o valor "+R$" sobe */
.header-progress-bar .hpb-fill.hpb-pulso { animation: hpbPulso 1.3s ease-out; }
@keyframes hpbPulso {
  0% { filter: brightness(1); box-shadow: 0 0 10px rgba(16, 185, 129, 0.55); }
  25% { filter: brightness(1.7); box-shadow: 0 0 22px 4px rgba(52, 211, 153, 0.9); }
  100% { filter: brightness(1); box-shadow: 0 0 10px rgba(16, 185, 129, 0.55); }
}
.hpb-ganho {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 2;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(6, 78, 59, 0.95);
  border: 1px solid #34d399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: #d1fae5;
  white-space: nowrap;
  pointer-events: none;
  animation: hpbSobe 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes hpbSobe {
  0% { opacity: 0; transform: translateY(14px) scale(0.85); }
  15% { opacity: 1; transform: translateY(0) scale(1.08); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}
.hpb-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--emerald-400);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hpb-pct { font-size: 0.95rem; font-weight: 800; color: #6ee7b7; text-shadow: 0 0 12px rgba(16, 185, 129, 0.55); }
.hpb-falta { color: #fbbf24; }
body.theme-light .header-progress-bar { background: rgba(0,0,0,0.04); }
body.theme-light .hpb-track { background: rgba(15, 23, 42, 0.08); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.15); }
body.theme-light .hpb-label { color: #047857; }
body.theme-light .hpb-pct { color: #065f46; text-shadow: none; }
body.theme-light .hpb-falta { color: #b45309; }
body.theme-light .hpb-ganho { background: #ecfdf5; color: #047857; border-color: #10b981; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
/* Windows com "mostrar animações" desligado: barra parada, sem brilho nem listras */
@media (prefers-reduced-motion: reduce) {
  .hpb-fill::before, .hpb-ponta, .header-progress-bar .hpb-fill.hpb-pulso, .header-progress-bar .hpb-fill.alta-quitacao { animation: none; }
  .hpb-fill::after { display: none; }
}

/* ==========================================
   MODAL LANCAMENTO RAPIDO PREMIUM
   ========================================== */
.modal-lancamento { max-width: 500px !important; }
.modal-header-left { display: flex; align-items: center; gap: 0.75rem; }
.modal-icon { font-size: 2rem; line-height: 1; }
.modal-lancamento-body { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.mlb-field-group { display: flex; flex-direction: column; gap: 0.4rem; }
.mlb-field-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.mlb-input { background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.95rem; color: var(--text-primary); font-family: var(--font-main); transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
.mlb-input:focus { outline: none; border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.mlb-input-destaque { background: rgba(16,185,129,0.06); border: 2px solid rgba(16,185,129,0.35); border-radius: var(--radius-md); padding: 0.9rem 1rem; font-size: 1.5rem; font-weight: 800; color: var(--emerald-400); font-family: var(--font-display); width: 100%; transition: border-color 0.2s, box-shadow 0.2s; }
.mlb-input-destaque:focus { outline: none; border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.mlb-simulacao { background: rgba(16,185,129,0.07); border: 1px dashed rgba(16,185,129,0.3); border-radius: var(--radius-md); padding: 0.85rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sim-label { font-size: 0.8rem; color: var(--text-secondary); }
.sim-valor { font-weight: 800; font-size: 1rem; color: var(--emerald-400); font-family: var(--font-display); }
.modal-lancamento-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 0.75rem; }

/* ==========================================
   MODAL PREVIEW WHATSAPP
   ========================================== */
.modal-whatsapp { max-width: 600px !important; }
.wpp-preview-body { padding: 1.5rem; background: #0b1014; min-height: 250px; max-height: 55vh; overflow-y: auto; }
body.theme-light .wpp-preview-body { background: #ece5dd; }
.wpp-bubble-container { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.wpp-bubble { background: #1f2c34; color: #e9edef; border-radius: 0 12px 12px 12px; padding: 0.75rem 1rem; max-width: 90%; font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); box-shadow: 0 2px 8px rgba(0,0,0,0.4); border-left: 3px solid #00a884; }
body.theme-light .wpp-bubble { background: #ffffff; color: #111b21; border-left-color: #00a884; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

/* ==========================================
   PAINEL EXPORTACAO MELHORADO
   ========================================== */
.export-resumo-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-card); }
.erb-item { display: flex; flex-direction: column; gap: 0.2rem; }
.erb-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.erb-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.erb-val-green { color: var(--emerald-400); }
.erb-val-gold { color: #fbbf24; }
/* "📅 Mês do fechamento": o mês que os botões exportam (a planilha aberta no Bloco de Notas) */
.erb-select { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-primary); background: var(--bg-input, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border-highlight, var(--border-color)); border-radius: var(--radius-md); padding: 0.35rem 0.5rem; min-height: 40px; max-width: 100%; cursor: pointer; }
.erb-select:focus { outline: 2px solid var(--emerald-400); outline-offset: 1px; }
.export-card-actions { display: flex; gap: 0.5rem; flex-direction: column; }
.btn-export-secondary { background: rgba(255,255,255,0.08) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
.btn-export-secondary:hover { background: rgba(255,255,255,0.15) !important; }
.export-card-wpp { border-color: rgba(37, 211, 102, 0.3); }
.export-card-wpp:hover { border-color: #25d366 !important; box-shadow: 0 8px 30px rgba(37, 211, 102, 0.15); }

/* helpers */
.text-strong { font-weight: 600; } .text-muted { color: var(--text-muted); } .font-bold { font-weight: 700; } .text-center { text-align: center; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .text-slate-400 { color: #94a3b8; } .text-emerald-400 { color: var(--emerald-400); } .text-xs { font-size: 0.75rem; }

/* ==========================================
   ANIMACOES
   ========================================== */
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 50% { box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.25); } 100% { box-shadow: var(--shadow-card); } }
.dividendo-card.recebeu-recolhe { animation: pulseGreen 1s ease; }
.metric-card { background: linear-gradient(135deg, rgba(18, 25, 41, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%); }
body.theme-light .metric-card { background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%); }
@keyframes shimmer { 0% { filter: brightness(1); } 50% { filter: brightness(1.3); } 100% { filter: brightness(1); } }
.hpb-fill.alta-quitacao { animation: shimmer 2s ease-in-out infinite; }

@media (max-width: 768px) {
  .hpb-label { display: none; }
  .export-resumo-bar { grid-template-columns: repeat(2, 1fr); }
  .modal-lancamento, .modal-whatsapp, .modal-nova-planilha { max-width: 95vw !important; }
}

/* ==========================================
   MODAL NOVA PLANILHA IDENTIFICADA & READEQUAÇÃO
   ========================================== */
.modal-nova-planilha { max-width: 780px !important; }
.modal-nova-planilha-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}
.mnp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.mnp-metric-item { display: flex; flex-direction: column; gap: 0.25rem; }
.mnp-metric-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.mnp-metric-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.mnp-alert-novos {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
}
.man-icon { font-size: 1.8rem; }
.man-text strong { color: #f59e0b; font-size: 0.95rem; display: block; margin-bottom: 2px; }
.man-text p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
.mnp-dividendos-section h4 {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mnp-dividendos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 180px;
  overflow-y: auto;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.mnp-div-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.mnp-div-pill.novo {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.mnp-opcoes-card {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mnp-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.4;
}
.mnp-checkbox-label input {
  margin-top: 3px;
  accent-color: var(--emerald-500);
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.mnp-checkbox-label strong { color: var(--text-primary); }

/* ==========================================
   METRIC CARDS INTERATIVOS & HOVER
   ========================================== */
.metric-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}
.metric-card[onclick]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
}
.metric-card[onclick]:active {
  transform: translateY(-1px) !important;
}

/* ==========================================
   FOLHA DE ESTILOS PARA IMPRESSÃO (PDF / AUDITORIA)
   ========================================== */
@media print {
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 11pt;
  }
  .app-header,
  .mobile-bottom-nav,
  .win-window-header,
  .notepad-menu-bar,
  .notepad-toolbar,
  .notepad-status-bar,
  .btn-export-action,
  .btn-cartorio-action,
  .btn-cad-action,
  .btn-apply-lote,
  .toast-container,
  .modal-overlay,
  .tab-nav-bar,
  .app-header-right {
    display: none !important;
  }
  .main-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .tab-view-content {
    display: block !important;
  }
  .cartorio-table,
  .table-dividendos-geral {
    border-collapse: collapse !important;
    width: 100% !important;
    color: #000000 !important;
    margin-top: 1rem !important;
  }
  .cartorio-table th,
  .cartorio-table td,
  .table-dividendos-geral th,
  .table-dividendos-geral td {
    border: 1px solid #cbd5e1 !important;
    padding: 6px 8px !important;
    color: #000000 !important;
    background: transparent !important;
  }
  .cartorio-header-bar,
  .panel-title-area {
    color: #000000 !important;
  }
  .cartorio-header-bar h3,
  .panel-title-area h2 {
    color: #000000 !important;
  }
  .badge-status,
  .chip-banco,
  .chip-dividendo {
    border: 1px solid #94a3b8 !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
  }
}

/* ========================================================
   AUDITORIA & CONFERÊNCIA RIGOROSA DE COMPROVANTES (SKILL)
   ======================================================== */
.input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.badge-auditoria-sit {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.badge-auditoria-sit.sit-ok {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.badge-auditoria-sit.sit-divergente {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  animation: pulseAviso 1.8s ease-in-out infinite;
}

.badge-auditoria-sit.sit-invalido {
  background: rgba(225, 29, 72, 0.18);
  border: 1px solid rgba(225, 29, 72, 0.5);
  color: #fb7185;
}

.badge-auditoria-sit.sit-aviso {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.origem-trecho-doc {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-mono, monospace);
  margin-top: 0.25rem;
  word-break: break-all;
  opacity: 0.85;
  cursor: help;
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.input-alerta-divergente {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
}

.input-alerta-invalido {
  border-color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.08) !important;
}

.input-alerta-aviso {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.07) !important;
}

.alerta-auditoria-box {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
}

.aab-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #f87171;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.aab-icon {
  font-size: 1.15rem;
}

.aab-lista {
  margin: 0;
  padding-left: 1.35rem;
  font-size: 0.78rem;
  color: #e2e8f0;
  line-height: 1.55;
}

.aab-lista li {
  margin-bottom: 0.2rem;
}

.aab-rodape {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: #fca5a5;
  font-weight: 600;
}

@keyframes pulseAviso {
  0% { opacity: 0.9; }
  50% { opacity: 0.5; }
  100% { opacity: 0.9; }
}

body.theme-light .origem-trecho-doc {
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
}

body.theme-light .aab-lista {
  color: #334155;
}

/* ========================================================
   SKILL: ENTRADA DE COMPROVANTES (FILA DE LOTE & ESTEIRA)
   ======================================================== */
.dropzone-box {
  transition: border-color 0.25s, background-color 0.25s, transform 0.2s, box-shadow 0.25s;
}

.dropzone-box.drag-over {
  border-color: var(--emerald-400) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.35) !important;
  transform: scale(1.015);
}

.lote-actions-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.lote-actions-row .btn-apply-lote {
  flex: 1;
}

.btn-limpar-lote {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
}

.btn-limpar-lote:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.btn-disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
}

/* BARRA DE RESUMO DO LOTE */
.lote-resumo-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 1rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-card);
}

.lrb-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
}

.lrb-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.lrb-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.text-emerald { color: #34d399 !important; }
.text-amber { color: #fbbf24 !important; }
.text-rose { color: #f87171 !important; }
.text-cyan { color: #38bdf8 !important; }

/* FILA DE COMPROVANTES DO LOTE */
.fila-comprovantes-container {
  margin: 1rem 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fila-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.25rem;
}

.fila-header-bar h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-iniciar-conferencia {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #022c22;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-iniciar-conferencia:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.fila-items-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.item-fila-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  transition: border-color 0.2s, background-color 0.2s, transform 0.15s;
}

.item-fila-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
}

.item-fila-card.item-conferindo-ativo {
  border-color: var(--emerald-400);
  background: rgba(16, 185, 129, 0.06);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
}

.item-fila-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}

.item-fila-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
}

.item-fila-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-fila-thumb-placeholder {
  font-size: 1.4rem;
}

.item-fila-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.item-fila-topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.item-fila-nome {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.badge-estado-fila {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-fila-pronto { background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.45); color: #34d399; }
.badge-fila-atencao { background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.45); color: #fbbf24; }
.badge-fila-duplicado { background: rgba(239, 68, 68, 0.18); border: 1px solid rgba(239, 68, 68, 0.45); color: #f87171; }
.badge-fila-conferido { background: rgba(99, 102, 241, 0.18); border: 1px solid rgba(99, 102, 241, 0.45); color: #818cf8; }
.badge-fila-erro { background: rgba(225, 29, 72, 0.18); border: 1px solid rgba(225, 29, 72, 0.45); color: #fb7185; }
.badge-fila-lendo { background: rgba(56, 189, 248, 0.18); border: 1px solid rgba(56, 189, 248, 0.45); color: #38bdf8; animation: pulseAviso 1.5s infinite; }
.badge-fila-neutro { background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.3); color: #cbd5e1; }

.item-dados-resumo {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.item-dados-resumo strong {
  color: var(--emerald-400);
}

.item-fila-msg {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-fila-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.btn-fila-acao {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-fila-acao:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-fila-acao.conferir {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.btn-fila-acao.conferir:hover {
  background: var(--emerald-500);
  color: #022c22;
}

.btn-fila-acao.excluir {
  color: #f87171;
}

.btn-fila-acao.excluir:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

/* STEPPER HEADER NO CARD DE CONFERÊNCIA */
.stepper-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(99, 102, 241, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  margin-bottom: 1.25rem;
}

.stepper-badge {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--emerald-400);
  letter-spacing: 0.5px;
}

.stepper-arquivo-nome {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

.stepper-nav-btns {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--emerald-400);
}

.btn-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

body.theme-light .lrb-item {
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .item-fila-card {
  background: #ffffff;
}

body.theme-light .item-fila-thumb {
  background: #f1f5f9;
}

/* ==========================================
   COMPROVANTES VINCULADOS EM CADASTROS
   ========================================== */
.comprovantes-vinculados-box {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}

.no-comprovantes-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.35rem 0;
}

.comprovantes-vinculados-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.comp-vinc-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-sm);
  gap: 0.5rem;
}

.comp-vinc-dados {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
}

.comp-vinc-pagador {
  color: var(--emerald-400);
}

.comp-vinc-val {
  font-weight: 700;
  color: #ffffff;
}

.btn-micro-action.btn-ver-comp {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid var(--emerald-500);
  color: #ffffff;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.btn-micro-action.btn-ver-comp:hover {
  background: var(--emerald-500);
  color: #000000;
}

.tag-comp-vinculado {
  color: var(--emerald-400);
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.35rem;
  background: rgba(16, 185, 129, 0.15);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* ==========================================
   ALERTA DE RECOLHES ÓRFÃOS / FORA DO BLOCO
   ========================================== */
.area-alertas-orfaos {
  margin-bottom: 1.25rem;
}

.alerta-orfaos-box {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.aob-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.aob-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.aob-titles strong {
  color: var(--amber-400);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.25rem;
}

.aob-titles p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.aob-lista {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}

.aob-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.aob-item:last-child {
  border-bottom: none;
}

.aob-linha code {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.8rem;
}

.aob-destino {
  color: var(--emerald-400);
}

.aob-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-corrigir-orfaos {
  background: var(--amber-500);
  color: #000000;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-corrigir-orfaos:hover {
  background: #fbbf24;
  transform: translateY(-1px);
}

.btn-dispensar-orfaos {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-dispensar-orfaos:hover {
  color: #ffffff;
  border-color: #ffffff;
}





/* Escolha da conta para cada linha de recolhe solta (aviso em Cadastros) */
.aob-select {
  margin: 0 0.4rem;
  padding: 0.35rem 0.6rem;
  max-width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md, 8px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.aob-select:focus {
  border-color: var(--emerald-500, #10b981);
}

/* ==========================================================================
   VÁRIOS MESES: filtro de mês, Visão Geral, Cadastros por pessoa, Cartório
   ========================================================================== */

/* Chips de mês (Visão Geral, Cadastros, Cartório) */
.mes-filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mes-chip {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font: 600 0.85rem var(--font-main);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mes-chip:hover { color: var(--text-primary); border-color: var(--border-highlight); }
.mes-chip.active {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
  color: #04130d;
}
.mes-chip:focus-visible, .tg-linha:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }

/* Visão Geral */
.visao-filtro-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.visao-atualizado { color: var(--text-muted); font-size: 0.82rem; }
.visao-atualizado strong { color: var(--text-secondary); }

.metric-meter {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(57, 135, 229, 0.18);
  overflow: hidden;
  margin: 0.4rem 0 0.2rem;
}
.metric-meter-fill { height: 100%; border-radius: var(--radius-full); background: #3987e5; }
.metric-card.tem-pendencia::before { background: var(--gold-500); }
.metric-card.tem-pendencia .metric-value { color: var(--gold-500); }
#metricPendencias { font-size: 1.35rem; }

.gerentes-card { margin-bottom: 1.5rem; }
.tabela-gerentes { display: flex; flex-direction: column; font-size: 0.9rem; }
.tg-cabecalho, .tg-linha {
  display: grid;
  grid-template-columns: minmax(170px, 1.6fr) repeat(3, minmax(110px, 1fr)) minmax(140px, 1.2fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
}
.tg-cabecalho {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
}
.tg-cabecalho div:not(:first-child) { text-align: right; }
.tg-cabecalho div:last-child { text-align: left; }
.tg-linha {
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.tg-linha:hover { background: var(--bg-card-hover); }
.tg-nome { font-weight: 700; color: var(--text-primary); min-width: 0; }
.tg-nome small { display: block; font-weight: 500; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }
.tg-cod {
  display: inline-block;
  min-width: 1.8rem;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-align: center;
}
.tg-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.tg-falta { color: var(--text-primary); font-weight: 700; }
.tg-rot { display: none; }
.tg-meter { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tg-track { flex: 1; height: 8px; border-radius: var(--radius-full); background: rgba(57, 135, 229, 0.16); overflow: hidden; }
.tg-fill { height: 100%; border-radius: var(--radius-full); background: #3987e5; }
.tg-meter span { min-width: 2.6rem; text-align: right; }
.tg-total { cursor: default; border-bottom: none; border-top: 2px solid var(--border-color); }
.tg-total:hover { background: transparent; }

.chart-canvas-wrapper { position: relative; }
.charts-grid-container > *, .metrics-banner-grid > *, .dividendos-grid > * { min-width: 0; }
.chart-canvas-wrapper canvas { max-width: 100%; }
.chart-canvas-wrapper.chart-alto { height: auto; min-height: 280px; }
.vazio-visao {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}
.vazio-visao.sobreposto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medidor-mes { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.25rem; }
.mm-pct { font: 800 3rem/1 var(--font-display); color: var(--text-primary); }
.mm-rot { color: var(--text-secondary); font-size: 0.9rem; }
.mm-track { height: 12px; border-radius: var(--radius-full); background: rgba(217, 89, 38, 0.85); overflow: hidden; margin: 0.6rem 0; }
.mm-fill { height: 100%; background: #3987e5; border-right: 2px solid var(--bg-secondary); }
.mm-linhas { display: flex; flex-direction: column; gap: 0.35rem; color: var(--text-secondary); font-size: 0.9rem; }
.mm-linhas strong { color: var(--text-primary); margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.mm-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.45rem; vertical-align: -1px; }
.mm-ponto-vazio { border: 1px solid var(--text-muted); }

/* Cadastros: cartão por pessoa com o bloco de cada mês */
.cadastros-header-bar .mes-filtro-chips { width: 100%; margin-bottom: 0.25rem; }
.blocos-mes-lista { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0; }
.bloco-mes {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  overflow: hidden;
}
.bloco-mes[open] { border-color: var(--border-highlight); }
.bloco-mes-resumo {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  font-size: 0.88rem;
}
.bloco-mes-resumo::-webkit-details-marker { display: none; }
.bloco-mes-resumo::before { content: '▸'; color: var(--text-muted); transition: transform 0.15s; }
.bloco-mes[open] > .bloco-mes-resumo::before { transform: rotate(90deg); }
.bm-mes { font-weight: 700; color: var(--text-primary); }
.bm-valores { color: var(--text-secondary); flex: 1; min-width: 180px; }
.bm-valores strong { color: var(--text-primary); }
.bloco-mes-resumo .badge-status { margin-left: auto; }
.bloco-mes-corpo { padding: 0 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bloco-mes-corpo > .progress-track { height: 6px; }
.bloco-mes-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.comp-sem-imagem { color: var(--text-muted); font-size: 0.75rem; }

/* Aviso de linhas soltas: mês de cada linha */
.aob-mes {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--gold-glow);
  color: var(--gold-500);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Conferência: conta e mês escolhidos para o vínculo */
.destino-vinculo-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.dvi-nome { font-weight: 700; color: var(--text-primary); margin-right: 0.25rem; }
.dvi-mes {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}
.dvi-mes.escolhido { border-color: var(--emerald-500); color: var(--emerald-400); font-weight: 700; }
.dvi-aviso { color: var(--gold-500); }
/* Combinado com o gerente (⭐): uma linha própria embaixo dos meses */
.dvi-comb { flex: 1 1 100%; padding: 0.35rem 0.6rem; border-radius: var(--radius-md); background: rgba(245, 158, 11, 0.1); border: 1px dashed rgba(245, 158, 11, 0.45); color: #fcd34d; font-size: 0.78rem; line-height: 1.4; }
body.theme-light .dvi-comb { color: #92400e; background: rgba(245, 158, 11, 0.08); }

/* Cartório */
.cartorio-filtros { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.c-stat-card.cs-alerta { border-color: rgba(245, 158, 11, 0.45); }
.c-stat-card.cs-alerta .cs-num { color: var(--gold-500); }
.cartorio-acoes { white-space: nowrap; }
.cartorio-table .badge-status { display: inline-block; white-space: nowrap; line-height: 1.3; }
.cartorio-acoes .btn-micro-action { margin-right: 0.35rem; }

/* Tema claro */
body.theme-light .mes-chip.active { color: #ffffff; }
body.theme-light .metric-meter, body.theme-light .tg-track { background: rgba(42, 120, 214, 0.16); }
body.theme-light .metric-meter-fill, body.theme-light .tg-fill, body.theme-light .mm-fill { background: #2a78d6; }
body.theme-light .mm-track { background: rgba(235, 104, 52, 0.85); }
body.theme-light .mm-fill { border-right-color: #ffffff; }

/* Celular */
@media (max-width: 768px) {
  .dividendos-grid { grid-template-columns: 1fr; }
  .visao-filtro-bar { flex-direction: column; align-items: flex-start; }
  .mes-filtro-chips { max-width: 100%; }
  .mes-chip { white-space: nowrap; }
  .search-and-filters { flex-direction: column; align-items: stretch; width: 100%; }
  .search-box { min-width: 0; width: 100%; }
  .filter-pills, .cartorio-actions { flex-wrap: wrap; }
  .cadastros-resumo-rapido { flex-wrap: wrap; width: 100%; }
  .cadastros-resumo-rapido .resumo-chip { flex: 1 1 140px; min-width: 0; }
  .tg-cabecalho { display: none; }
  .tg-linha {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem 0.6rem;
    padding: 0.75rem 0.5rem;
  }
  .tg-nome { grid-column: 1 / -1; }
  .tg-meter { grid-column: 1 / -1; }
  .tg-num { text-align: left; white-space: nowrap; font-size: 0.8rem; }
  .tg-rot { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
  .mm-pct { font-size: 2.4rem; }

  /* Tabela do Cartório vira cartões empilhados */
  .cartorio-table thead { display: none; }
  .cartorio-table, .cartorio-table tbody, .cartorio-table tr, .cartorio-table td { display: block; width: 100%; }
  .cartorio-table tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
  }
  .cartorio-table td { padding: 0.3rem 0; border: none; }
  .cartorio-table td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .cartorio-table-container { overflow-x: visible; }
}

/* Corrigir lançamento */
.correcao-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.correcao-aviso-id {
  display: none;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: var(--gold-glow);
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.5;
}
.correcao-aviso-id .btn-micro-action { margin-left: 0.4rem; }
.correcao-linha-atual { color: var(--text-muted); font-size: 0.8rem; word-break: break-word; }
.tag-data-divergente {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 0.35rem;
  border-radius: var(--radius-full);
  background: var(--gold-glow);
  color: var(--gold-500);
  font-size: 0.72rem;
  font-weight: 700;
}
.comp-vinc-btn-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; justify-content: flex-end; }

/* Identificação automática na conferência */
.identificacao-auto {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-highlight);
  background: rgba(16, 185, 129, 0.06);
  color: var(--text-secondary);
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.identificacao-auto strong { color: var(--text-primary); }

/* ==========================================================================
   CADASTROS: QUADRADOS POR MÊS + CAIXA AMPLIADA
   ========================================================================== */
.dividendo-card[data-cad] { gap: 1rem; }
.cad-meses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.65rem;
}
.mes-quadrado {
  --anel-cor: var(--emerald-500);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.75rem 0.8rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mes-quadrado:hover, .mes-quadrado:focus-visible {
  transform: translateY(-2px);
  border-color: var(--anel-cor);
  box-shadow: 0 6px 18px -8px var(--anel-cor);
  outline: none;
}
.mes-quadrado.status-quitado { --anel-cor: #10b981; }
.mes-quadrado.status-bom { --anel-cor: #3b82f6; }
.mes-quadrado.status-parcial { --anel-cor: #f59e0b; }
.mes-quadrado.status-zerado { --anel-cor: #ef4444; }
/* o fundo colorido de .status-* (selos) não vale para o quadrado */
.mes-quadrado.status-quitado, .mes-quadrado.status-bom, .mes-quadrado.status-parcial, .mes-quadrado.status-zerado {
  background: var(--bg-glass);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.mq-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.mq-mes { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.mq-cod {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--anel-cor);
  border: 1px solid var(--anel-cor);
  border-radius: var(--radius-full);
  padding: 0 0.45rem;
}
.mq-anel {
  --pct: 0;
  align-self: center;
  width: 74px;
  height: 74px;
  margin: 0.2rem 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--anel-cor) calc(var(--pct) * 1%), var(--border-color) 0);
}
.mq-anel > span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-secondary);
  font-weight: 800;
  font-size: 0.95rem;
}
.mq-linha { font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-linha strong { color: var(--text-primary); font-weight: 700; }
.mq-pago strong { color: var(--emerald-400); }
.mq-falta strong { color: #fbbf24; }
.mq-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 0.35rem;
  margin-top: 0.1rem;
}
.mq-ampliar { font-size: 0.9rem; color: var(--anel-cor); }

.cad-ultimo {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  min-width: 0;
}
.cad-ultimo-rot { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cad-ultimo-data { font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.cad-ultimo-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.cad-ultimo-val { color: var(--emerald-400); white-space: nowrap; }

/* Caixa ampliada */
.modal-bloco-mes { z-index: 990; padding: 1.25rem; }
body.modal-aberto { overflow: hidden; }
.bm-janela {
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bm-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.bm-id { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.bm-codigo {
  flex: none;
  min-width: 52px;
  height: 52px;
  padding: 0 0.6rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.35rem;
  color: #04120c;
  background: var(--emerald-400);
}
.bm-titulos { min-width: 0; }
.bm-titulos h3 { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-titulos span { font-size: 0.82rem; color: var(--text-muted); }
.bm-meses {
  display: flex;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: thin;
}
.bm-mes-pill {
  flex: none;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  opacity: 0.75;
}
.bm-mes-pill.ativo { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }
.bm-visoes { display: flex; gap: 0.25rem; padding: 0.6rem 1.25rem 0; }
.bm-visoes button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.bm-visoes button.ativo { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-highlight); }
.bm-corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bm-visual { display: flex; flex-direction: column; gap: 1rem; }
.bm-visual[hidden], .bm-texto[hidden] { display: none; }
.bm-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.bm-anel {
  --pct: 0;
  --anel-cor: #10b981;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--anel-cor) calc(var(--pct) * 1%), var(--border-color) 0);
  border: none;
}
.bm-anel.status-quitado { --anel-cor: #10b981; }
.bm-anel.status-bom { --anel-cor: #3b82f6; }
.bm-anel.status-parcial { --anel-cor: #f59e0b; }
.bm-anel.status-zerado { --anel-cor: #ef4444; }
.bm-anel > div {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--bg-card);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bm-anel strong { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.bm-anel span { font-size: 0.72rem; color: var(--text-muted); }
.bm-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.bm-num { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); background: var(--bg-glass); min-width: 0; }
.bm-num span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.bm-num strong { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); overflow-wrap: anywhere; }
.bm-pago strong { color: var(--emerald-400); }
.bm-falta strong { color: #fbbf24; }
.bm-secao h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding-bottom: 0.45rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}
.bm-secao h4 > span { font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.bm-secao h4 .btn-micro-action { margin-left: auto; }
.bm-merc { display: grid; grid-template-columns: 1.8rem 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.35rem 0.2rem; font-size: 0.9rem; }
.bm-merc-q { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }
.bm-merc-v { font-weight: 700; white-space: nowrap; }
.bm-recolhes { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.bm-rec {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid transparent;
}
.bm-rec.recolhe-com-comprovante { border-color: var(--border-highlight); }
.bm-rec-data { display: flex; flex-direction: column; font-size: 0.84rem; line-height: 1.25; }
.bm-rec-data span { font-size: 0.74rem; color: var(--text-muted); }
.bm-rec-desc { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.bm-rec-comp { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.bm-rec-valor { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.bm-rec-valor strong { color: var(--emerald-400); white-space: nowrap; }
.bm-rec-valor span { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.bm-texto-ajuda { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.bm-pre {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: #0b141a;
  color: #e9edef;
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bm-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-glass);
}
.bm-acoes .btn-card-action { flex: 1 1 auto; justify-content: center; }
.bm-acoes .bm-wpp { border-color: rgba(37, 211, 102, 0.5); color: #25d366; }

@media (max-width: 640px) {
  .cad-meses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cad-ultimo { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .cad-ultimo-rot { display: none; }
  .modal-bloco-mes { padding: 0; align-items: stretch; }
  .bm-janela { max-width: none; max-height: none; height: 100%; border-radius: 0; border: none; }
  .bm-cabecalho, .bm-meses, .bm-visoes, .bm-corpo, .bm-acoes { padding-left: 1rem; padding-right: 1rem; }
  .bm-hero { grid-template-columns: 1fr; justify-items: center; }
  .bm-numeros { width: 100%; grid-template-columns: 1fr; }
  .bm-num { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .bm-rec { grid-template-columns: minmax(0, 1fr) auto; }
  .bm-rec-data { flex-direction: row; gap: 0.5rem; grid-column: 1 / -1; }
  .bm-acoes .btn-card-action { flex: 1 1 45%; }
  .bm-acoes { padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
}

body.theme-light .mq-anel > span, body.theme-light .bm-anel > div { background: #ffffff; }
body.theme-light .mq-falta strong, body.theme-light .bm-falta strong { color: #b45309; }
body.theme-light .mq-pago strong, body.theme-light .bm-pago strong, body.theme-light .bm-rec-valor strong, body.theme-light .cad-ultimo-val { color: #047857; }
.bm-cabecalho, .bm-meses, .bm-visoes, .bm-acoes { flex: none; }

/* Topo em qualquer tela: 1ª linha = marca + botões; 2ª linha = abas.
   Marca, abas e botões juntos precisam de ~2.100 px, então numa linha só estouravam até em monitor de 1.920 px
   (o 🌙 e o Modo Dividido sumiam). As abas nunca ficam escondidas: se não couberem, quebram em mais uma linha. */
.header-content { flex-wrap: wrap; row-gap: 0.6rem; }
/* Mesma largura do conteúdo (1.600 px menos o recuo de 24 px de cada lado): as bordas do topo e das telas alinham */
.header-content, .hpb-inner { max-width: 1552px; }
.brand-section { flex: none; min-width: 0; }
.brand-titles h1 { white-space: nowrap; }
.header-quick-actions { flex: none; }
.btn-toggle-split { white-space: nowrap; }
.desktop-nav-tabs {
  order: 3;
  flex: 1 1 100%;
  max-width: max-content;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 24px;
}
.nav-tab-btn { flex: none; }
@media (max-width: 1280px) {
  .nav-tab-btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}
/* Notebook pequeno e tablet: os botões do topo ficam só com o ícone (o nome aparece ao passar o mouse) */
@media (max-width: 1024px) {
  .header-quick-actions .btn-projeto-rotulo, .header-quick-actions .btn-rotulo { display: none; }
}
/* Modo Dividido: abaixo de 1.100 px as duas telas ficam uma embaixo da outra */
@media (max-width: 1100px) {
  .modo-split-ativo { grid-template-columns: minmax(0, 1fr); }
}
/* Celular: sem Modo Dividido (o botão some, então o modo também não pode ficar preso ligado) */
@media (max-width: 768px) {
  #btnToggleModoDividido { display: none; }
  #appMainContainer.modo-split-ativo { display: block; }
  #appMainContainer.modo-split-ativo > .tab-view-content:not(.active) { display: none !important; }
  #appMainContainer.modo-split-ativo > .tab-view-content.active { display: block !important; }
}
.cad-codigo { font-family: var(--font-mono); font-weight: 800; font-size: 1.25rem; color: var(--emerald-400); min-width: 3rem; text-align: center; }

/* Botões de mês em Cadastros */
.cad-acoes-mes { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.mes-chip-acao { border-style: solid; }
.mes-chip-novo { border-style: dashed; border-color: var(--border-highlight); color: var(--emerald-400); }

/* Indicador do projeto salvo */
.btn-projeto {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.btn-projeto:hover { border-color: var(--border-highlight); color: var(--text-primary); }
.btn-projeto.projeto-sem-arquivo, .btn-projeto.projeto-sem-permissao { border-color: rgba(245, 158, 11, 0.5); color: #fbbf24; }
.btn-projeto.projeto-salvo { border-color: var(--border-highlight); color: var(--emerald-400); }
/* Online: o chip mostra o servidor (Etapa 14). Salvo = verde e quieto; "pausado" (cópia no PC esperando um clique, nada novo) = neutro */
.btn-projeto.projeto-nuvem { border-color: var(--border-highlight); color: var(--emerald-400); }
.btn-projeto.projeto-salvando { color: var(--text-secondary); }
.btn-projeto.projeto-pausado { color: var(--text-secondary); }
body.theme-light .btn-projeto.projeto-nuvem { color: #047857; }
.btn-projeto.projeto-erro { border-color: rgba(239, 68, 68, 0.6); color: #f87171; }
.projeto-status { display: block; font-size: 0.78rem; color: var(--text-muted); margin: -0.25rem 0 0.6rem; overflow-wrap: anywhere; }
.btn-link-projeto { margin-top: 0.5rem; background: none; border: none; color: var(--text-muted); font: inherit; font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
body.theme-light .btn-projeto.projeto-sem-arquivo, body.theme-light .btn-projeto.projeto-sem-permissao { color: #b45309; }
body.theme-light .btn-projeto.projeto-salvo { color: #047857; }

/* Abrir novo mês */
.nm-janela { max-width: 760px; }
.nm-icone { background: var(--bg-glass); color: var(--text-primary); font-size: 1.4rem; }
.nm-controles {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.nm-controles label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.nm-controles select, .nm-controles input, .nm-item input {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-width: 0;
}
.nm-mes-ano { display: flex; gap: 0.4rem; }
.nm-mes-ano input { width: 5.5rem; }
.nm-botoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.nm-aviso {
  flex: none;
  margin: 0.6rem 1.25rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: var(--gold-glow);
  font-size: 0.84rem;
}
.nm-aviso[hidden] { display: none; }
.nm-corpo { gap: 0.45rem; }
.nm-conta { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-glass); }
.nm-conta[open] { border-color: var(--border-highlight); }
.nm-conta.nm-fora { opacity: 0.5; }
.nm-conta summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
}
.nm-conta summary::-webkit-details-marker { display: none; }
.nm-incluir { width: 1.1rem; height: 1.1rem; accent-color: var(--emerald-500); }
.nm-cod { font-family: var(--font-mono); font-weight: 800; color: var(--emerald-400); min-width: 1.8rem; }
.nm-nome { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-total { font-weight: 700; white-space: nowrap; }
.nm-itens { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0.8rem 0.8rem; }
.nm-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) 4.5rem; gap: 0.5rem; align-items: center; }
.nm-merc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-size: 0.86rem; }
.nm-merc small { color: var(--text-muted); font-size: 0.7rem; }
.nm-prev { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.nm-rodape { align-items: center; }
.nm-resumo { flex: 1 1 100%; font-size: 0.88rem; color: var(--text-secondary); }
.nm-rodape .btn-card-action { flex: 0 1 auto; }
.nm-rodape .btn-card-action:disabled { opacity: 0.45; cursor: not-allowed; }
.pm-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .header-quick-actions .btn-projeto-rotulo { display: none; }
  .nm-controles { padding: 0.75rem 1rem; }
  .nm-botoes { margin-left: 0; width: 100%; }
  .nm-botoes .btn-card-action { flex: 1; }
  .nm-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nm-merc { grid-column: 1 / -1; }
  .nm-prev { grid-column: 1 / -1; }
  .pm-numeros { grid-template-columns: 1fr; }
  .nm-rodape .btn-card-action { flex: 1; }
}
.mnp-alert-novos.mnp-alerta-mes { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.1); }

/* Celular: o topo cabe na tela (Modo Dividido não serve em tela pequena) e a barra do Bloco de Notas quebra linha */
@media (max-width: 640px) {
  #btnToggleModoDividido { display: none; }
  .notepad-menubar { flex-wrap: wrap; row-gap: 6px; }
  .menu-actions-right { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 400px) {
  .tg-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem 0.4rem; }
  .tg-num { font-size: 0.74rem; white-space: normal; overflow-wrap: anywhere; }
}
.nm-botoes .btn-card-action { white-space: nowrap; }
.nm-item-cab { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
@media (max-width: 640px) { .nm-item-cab { display: none; } .nm-botoes .btn-card-action { white-space: normal; } }
.bm-mes-pill:not([class*="status-"]) { background: var(--bg-glass); border: 1px solid var(--border-color); color: var(--text-secondary); }
.bm-mes-pill:not([class*="status-"]).ativo { color: var(--emerald-400); border-color: var(--border-highlight); box-shadow: none; }
.nav-tab-btn { white-space: nowrap; }

/* Tema claro: botões dos cartões e selos legíveis */
body.theme-light .btn-card-action { color: var(--text-primary); background: rgba(15, 23, 42, 0.04); }
body.theme-light .btn-card-action.primary, body.theme-light .tag-comp-vinculado, body.theme-light .btn-micro-action { color: #047857; }
body.theme-light .bm-acoes .bm-wpp { color: #128c4b; }
body.theme-light .mes-chip-novo { color: #047857; }
body.theme-light .bm-codigo { color: #04120c; }

/* ==========================================================================
   DESTINOS
   ========================================================================== */
.dest-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.dest-novo { flex: 0 0 auto; padding: 0.6rem 1rem; font-size: 0.85rem; }
.dest-meses-chips { margin: 0.5rem 0 1rem; }
.dest-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.65rem; margin-bottom: 1.25rem; }
.dest-grupo {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem 0.9rem; border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border-color); min-width: 0;
}
.dest-grupo-rot { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-grupo strong { font-size: 1.05rem; color: var(--text-primary); }
.dest-grupo small { font-size: 0.7rem; color: var(--text-muted); }
.dest-grupo-pct { height: 5px; border-radius: var(--radius-full); background: var(--border-color); overflow: hidden; }
.dest-grupo-pct > span { display: block; height: 100%; background: var(--emerald-500); border-radius: inherit; }
.dest-grupo-sem { border-style: dashed; border-color: rgba(245, 158, 11, 0.5); }
.dest-grupo-sem .dest-grupo-pct > span { background: #f59e0b; }

.dest-pendentes {
  margin-bottom: 1.25rem; padding: 1rem 1.1rem;
  border-radius: var(--radius-lg); border: 1px dashed rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.06);
}
.dest-pendentes h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.dest-ajuda { font-size: 0.82rem; color: var(--text-secondary); margin: 0.5rem 0; }
.dest-sem-lista { display: flex; flex-direction: column; gap: 0.45rem; }
.dest-sem-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-color);
}
.dest-sem-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 260px; }
.dest-sem-info code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-primary); overflow-wrap: anywhere; }
.dest-sem-info span { font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.dest-sem-info small { font-size: 0.72rem; color: var(--text-muted); }
.dest-sem-acoes { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.dest-sem-acoes .btn-card-action { flex: 0 0 auto; padding: 0.45rem 0.8rem; }
.dest-juntar, .dest-form select, .dest-form input[type="text"] {
  font: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); min-width: 0;
}

.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.dest-card {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 1.2rem;
  border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); min-width: 0;
}
.dest-topo { display: flex; align-items: center; gap: 0.75rem; }
.dest-emoji { font-size: 1.6rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 12px; background: var(--bg-glass); flex: none; }
.dest-nomes { flex: 1; min-width: 0; }
.dest-nomes h3 { font-family: var(--font-display); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest-nomes span { font-size: 0.76rem; color: var(--text-muted); }
.dest-total { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dest-total strong { font-size: 1.4rem; font-weight: 800; color: var(--emerald-400); }
.dest-total span { font-size: 0.8rem; color: var(--text-muted); }
.dest-linha { display: flex; flex-direction: column; gap: 0.3rem; }
.dest-rot { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.dest-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dest-chips code { font-family: var(--font-mono); font-size: 0.76rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-color); overflow-wrap: anywhere; }
.dest-chips code.dest-padrao { border-color: var(--border-highlight); color: var(--emerald-400); }
.dest-rec { font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-full); background: var(--bg-glass); overflow-wrap: anywhere; }
.dest-vazio { font-size: 0.78rem; color: var(--text-muted); }
.dest-gerentes { display: flex; flex-direction: column; gap: 0.3rem; }
.dest-ger { display: grid; grid-template-columns: minmax(0, 7.5rem) 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.78rem; }
.dest-ger-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.dest-ger-barra { height: 6px; border-radius: var(--radius-full); background: var(--border-color); overflow: hidden; }
.dest-ger-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--emerald-500); }
.dest-ger-val { white-space: nowrap; font-weight: 600; }
.dest-meses { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.76rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.5rem; }
.dest-meses strong { color: var(--text-secondary); }
.dest-velho .dest-emoji { background: rgba(168, 85, 247, 0.14); }
.dest-caixa .dest-emoji { background: rgba(16, 185, 129, 0.14); }
.dest-em-maos .dest-emoji { background: rgba(245, 158, 11, 0.16); }

/* Formulário do destino */
.dest-form { max-width: 640px; }
.dest-form-corpo { gap: 0.9rem; }
.dest-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dest-form label, .dest-form legend { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.dest-form label small { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
.dest-form fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.6rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; }
.dest-form legend { padding: 0 0.3rem; }
.dest-form .dest-check { flex-direction: row; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--text-secondary); }
.dest-form .dest-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--emerald-500); flex: none; }
.dest-form .dest-check code { font-family: var(--font-mono); font-size: 0.8rem; overflow-wrap: anywhere; }
.dest-outras { max-height: 220px; overflow-y: auto; }
.dest-rec-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
.dest-excluir { color: #f87171 !important; border-color: rgba(239, 68, 68, 0.45) !important; flex: 0 0 auto !important; margin-right: auto; }

/* Selo do destino em cada recolhe (caixa ampliada) */
.bm-dest-tag { display: inline-block; margin-left: 0.35rem; font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
.bm-dest-sem { margin-left: 0.35rem; font: inherit; font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-full); border: 1px dashed rgba(245, 158, 11, 0.6); background: transparent; color: #fbbf24; cursor: pointer; }
.ident-sem-destino { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ident-pagador-suspeito { padding: 0.5rem 0.65rem; border-radius: var(--radius-md); border: 1px solid rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); color: #fbbf24; line-height: 1.45; overflow-wrap: anywhere; }
.ident-fraude { padding: 0.55rem 0.7rem; border-radius: var(--radius-md); border: 1px solid rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.1); color: #fca5a5; line-height: 1.45; overflow-wrap: anywhere; }
.ident-conta-propria { padding: 0.5rem 0.65rem; border-radius: var(--radius-md); border: 1px solid rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.08); color: #bfdbfe; line-height: 1.45; overflow-wrap: anywhere; }
body.theme-light .ident-fraude { color: #b91c1c; }
body.theme-light .ident-conta-propria { color: #1d4ed8; }
/* Por que este mês (⭐ combinado / 🗓️ mais antigo) e as outras dívidas abertas do gerente */
.ident-regra-mes { padding: 0.5rem 0.65rem; border-radius: var(--radius-md); border: 1px dashed rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.07); color: #fde68a; line-height: 1.45; overflow-wrap: anywhere; }
body.theme-light .ident-regra-mes { color: #92400e; }
body.theme-light .ident-pagador-suspeito { color: #b45309; }

/* Lançar sem comprovante / em mãos */
.mlb-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.mlb-modo-btn { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.55rem 0.6rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-glass); color: var(--text-secondary); cursor: pointer; }
.mlb-modo-btn.ativo { border-color: var(--border-highlight); color: var(--emerald-400); background: rgba(16, 185, 129, 0.1); }
.mlb-linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.mlb-nota { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.dividendo-card[data-cad] .card-footer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .dest-grid { grid-template-columns: 1fr; }
  .dest-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest-form-grid { grid-template-columns: 1fr; }
  .dest-sem-acoes { width: 100%; }
  .dest-sem-acoes > * { flex: 1 1 auto; }
  .mobile-tab-btn { padding: 0.35rem 0.3rem; }
}
body.theme-light .dest-total strong, body.theme-light .dest-chips code.dest-padrao { color: #047857; }
body.theme-light .bm-dest-sem { color: #b45309; }
.tag-manual { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
body.theme-light .tag-manual { color: #b45309; }

/* ==========================================
   PLANILHA IDENTIFICADA: contas separadas (bruto, pago, a receber) e avisos
   ========================================== */
.mnp-val-receber { color: #fbbf24; }
.mnp-resumo-linha { font-size: 0.82rem; color: var(--text-secondary); margin: 0.4rem 0 0; }
.mnp-resumo-linha:empty { display: none; }
.mnp-origem-ia {
  margin-top: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.45);
  color: #c7d2fe;
  font-size: 0.82rem;
  line-height: 1.5;
}
.mnp-origem-ia[hidden], .mnp-avisos[hidden] { display: none; }
.mnp-avisos {
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-size: 0.8rem;
  line-height: 1.5;
}
.mnp-avisos strong { color: #fbbf24; display: block; margin-bottom: 0.35rem; }
.mnp-avisos ul { margin: 0; padding-left: 1.1rem; }
.mnp-avisos li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.mnp-contas-tabela { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.mnp-conta-linha {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
}
.mnp-conta-linha.mnp-cabecalho { background: transparent; border: none; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding-top: 0; padding-bottom: 0; }
.mnp-conta-linha.novo { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
.mnp-conta-linha.com-aviso { box-shadow: inset 3px 0 0 #fbbf24; }
.mnp-conta-nome { font-weight: 700; overflow-wrap: anywhere; }
.mnp-conta-nome small { display: block; font-weight: 500; font-size: 0.68rem; color: var(--text-muted); }
.mnp-conta-num { text-align: right; font-family: var(--font-mono); font-size: 0.76rem; white-space: nowrap; }
.mnp-conta-num.pago { color: var(--emerald-400); }
.mnp-conta-num.falta { color: #fbbf24; }
.mnp-conta-selo { font-size: 0.66rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.mnp-conta-selo.quitado { background: rgba(16, 185, 129, 0.18); color: var(--emerald-400); }
.mnp-conta-selo.novo { background: #f59e0b; color: #000; }
.mnp-conta-selo.aberto { background: rgba(148, 163, 184, 0.16); color: var(--text-secondary); }
body.theme-light .mnp-avisos strong, body.theme-light .mnp-conta-num.falta, body.theme-light .mnp-val-receber { color: #b45309; }
body.theme-light .mnp-conta-num.pago, body.theme-light .mnp-conta-selo.quitado { color: #047857; }
body.theme-light .mnp-origem-ia { color: #3730a3; }
@media (max-width: 700px) {
  .mnp-conta-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .mnp-conta-linha .mnp-conta-num { grid-column: 1 / -1; text-align: left; }
  .mnp-conta-linha.mnp-cabecalho { display: none; }
}
#modalPlanilhaListaDividendos { max-height: 360px; }

/* Mesma pessoa com outro nome: sugestão ao jogar a planilha e nome antigo no cartão de Cadastros */
.mnp-mesma-pessoa {
  display: block;
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-md);
  background: rgba(99, 102, 241, 0.12);
  border: 1px dashed rgba(129, 140, 248, 0.55);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.mnp-mesma-pessoa.forte { border-style: solid; }
.mnp-mesma-pessoa strong { color: var(--text-primary); }
.mnp-juntar, .cad-separar {
  margin-left: 0.35rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(129, 140, 248, 0.7);
  background: rgba(99, 102, 241, 0.25);
  color: var(--text-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  min-height: 26px;
}
.mnp-juntar:hover, .cad-separar:hover { background: rgba(99, 102, 241, 0.4); }
.mnp-juntar:focus-visible, .cad-separar:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.cad-outro-nome { display: block; color: #a5b4fc; }
.cad-separar { font-size: 0.66rem; font-weight: 600; background: transparent; border-color: var(--border-color); color: var(--text-muted); min-height: 22px; }
body.theme-light .mnp-mesma-pessoa { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; }
body.theme-light .mnp-juntar { background: #e0e7ff; border-color: #6366f1; color: #312e81; }
body.theme-light .cad-outro-nome { color: #4338ca; }

/* ⭐ Combinado com o gerente (para qual dívida vão os Pix de agora) e 💼 anotação da dívida */
.cad-combinado { display: inline-block; margin-top: 0.2rem; padding: 1px 8px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; color: #fcd34d; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.45); }
.cad-combinado-revisar { color: #fdba74; border-style: dashed; }
.mq-topo .mq-mes { margin-right: auto; }
.mq-selo { font-size: 0.85rem; line-height: 1; }
.bm-combinado { border: 1px dashed rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.05); border-radius: var(--radius-md); padding: 0.75rem 0.9rem; }
.bm-comb-ajuda { margin: 0.3rem 0 0.6rem; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }
.bm-comb-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
.bm-comb-campos label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); }
.bm-comb-campos select, .bm-comb-campos input { min-width: 0; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.85rem; font-weight: 500; }
.bm-comb-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.bm-comb-obs { display: block; margin-top: 0.4rem; font-size: 0.7rem; color: var(--text-muted); }
body.theme-light .cad-combinado { color: #92400e; background: rgba(245, 158, 11, 0.1); }
body.theme-light .bm-comb-campos select, body.theme-light .bm-comb-campos input { background: #ffffff; color: #0f172a; }
@media (max-width: 700px) { .bm-comb-campos select, .bm-comb-campos input { font-size: 16px; } }

/* ==========================================
   CELULAR: TOPO E BARRA DE BAIXO CABEM NA TELA
   ========================================== */
@media (max-width: 768px) {
  .app-header { padding: 0.6rem 1rem; }
  .brand-section { gap: 0.6rem; }
  .brand-logo-badge { width: 36px; height: 36px; font-size: 1.15rem; }
  .brand-titles h1 { font-size: 1.1rem; }
  .brand-titles p { display: none; }
  .header-quick-actions { gap: 0.4rem; }
  .header-quick-actions .btn-toggle-split, .header-quick-actions .btn-projeto { padding: 0.5rem 0.6rem; }
  /* A barra de progresso mostra o número também no celular, embaixo da barrinha */
  .header-progress-bar { padding: 0.35rem 1rem; }
  .hpb-inner { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .hpb-track { flex: none; }
  /* min-width com !important: a largura reservada pela animação (medida numa tela mais larga) não pode empurrar a página */
  .hpb-label { display: block; min-width: 0 !important; white-space: normal; text-align: center; font-size: 0.68rem; }
  /* Bloco de Notas: a barra de status quebra linha em vez de cortar "Ln 1, Col 1" na esquerda */
  .notepad-statusbar { flex-wrap: wrap; justify-content: flex-start; gap: 2px 12px; }
  /* 8 abas embaixo: cada uma com a mesma largura; nome longo quebra em duas linhas (com hífen) */
  .mobile-bottom-nav { gap: 2px; padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom)); }
  .mobile-tab-btn { flex: 1 1 0; min-width: 0; padding: 0.3rem 0.1rem; font-size: 0.62rem; line-height: 1.15; text-align: center; }
  .mobile-tab-btn span.icon { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .pro-badge { display: none; }
  /* Fechamento: um número por linha (nome à esquerda, valor à direita), sem "R$" quebrado */
  .export-resumo-bar { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.15rem; gap: 0.6rem; }
  .erb-item { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
  .erb-val { white-space: nowrap; }
  /* Cartório: os 4 números em 2 por linha, em vez de 4 quadros enormes um embaixo do outro */
  .cartorio-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .c-stat-card { padding: 0.8rem 0.9rem; }
  .cs-num { font-size: 1.15rem; overflow-wrap: anywhere; }
  .notepad-statusbar .status-cell:nth-child(n+4) { display: none; }
}
/* Celular estreito (360 px): marca e botões do topo continuam na mesma linha */
@media (max-width: 400px) {
  .header-content { column-gap: 0.6rem; }
  .brand-logo-badge { width: 32px; height: 32px; font-size: 1rem; }
  .brand-titles h1 { font-size: 1rem; }
  .header-quick-actions { gap: 0.3rem; }
  .header-quick-actions .btn-toggle-split, .header-quick-actions .btn-projeto { padding: 0.45rem 0.5rem; }
}

/* ==========================================
   RAIO-X DO DESTINO (toque no cartão em Destinos)
   ========================================== */
.dest-clicavel { cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.dest-clicavel:hover { transform: translateY(-2px); border-color: var(--border-highlight); box-shadow: 0 14px 34px -12px rgba(16, 185, 129, 0.35); }
.dest-clicavel:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }
.dest-abrir { font-size: 0.75rem; color: var(--emerald-400); text-align: center; padding-top: 0.35rem; border-top: 1px dashed var(--border-color); opacity: 0.85; }
.dest-clicavel:hover .dest-abrir { opacity: 1; }

.raio-janela { max-width: 920px; }
.raio-cab { background: linear-gradient(120deg, rgba(16, 185, 129, 0.14), transparent 60%); }
.raio-cab.raio-velho { background: linear-gradient(120deg, rgba(236, 72, 153, 0.16), transparent 60%); }
.raio-cab.raio-em-maos { background: linear-gradient(120deg, rgba(34, 197, 94, 0.16), transparent 60%); }
.raio-cab.raio-saida { background: linear-gradient(120deg, rgba(245, 158, 11, 0.16), transparent 60%); }
.raio-cab.raio-mercadoria { background: linear-gradient(120deg, rgba(168, 85, 247, 0.16), transparent 60%); }
.raio-emoji { font-size: 1.9rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 16px; background: var(--bg-glass); flex: none; }
.raio-corpo { gap: 1.1rem; }

.raio-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.raio-num { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 0.85rem; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-color); }
.raio-num span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.raio-num strong { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.raio-num i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--emerald-400); }
.raio-num-destaque strong { color: var(--emerald-400); font-size: 1.3rem; }

.raio-insights { list-style: none; margin: 0; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.45rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.06)); border: 1px solid rgba(16, 185, 129, 0.25); font-size: 0.88rem; line-height: 1.5; }
.raio-insights strong { color: var(--text-primary); }

.raio-sec { display: flex; flex-direction: column; gap: 0.55rem; }
.raio-sec h4 { margin: 0; font-family: var(--font-display); font-size: 0.95rem; }
.raio-sec h4 small { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.raio-sub { margin-top: 0.4rem !important; }

.raio-tempo { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding: 0.5rem 0.25rem 0; overflow-x: auto; border-bottom: 1px solid var(--border-color); scrollbar-width: thin; }
.raio-barra { flex: 1 0 14px; max-width: 34px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.raio-barra span { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #34d399, #059669); transition: filter 0.15s; }
.raio-barra:hover span { filter: brightness(1.25); }
.raio-barra small { font-size: 0.58rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.raio-tempo-legenda, .raio-horas-legenda { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); }

.raio-horas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.raio-hora { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; background: rgba(16, 185, 129, calc(0.06 + var(--a) * 0.85)); border: 1px solid rgba(16, 185, 129, calc(0.15 + var(--a) * 0.5)); }
.raio-hora b { font-size: 0.6rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.raio-gers { display: flex; flex-direction: column; gap: 0.3rem; }
.raio-ger { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0.5rem; border-radius: 6px; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.raio-ger:hover { background: rgba(255, 255, 255, 0.05); }
.raio-ger-nome { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raio-ger-barra { height: 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.raio-ger-barra span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #059669, #34d399); }
.raio-ger-val { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.raio-ger-val small { font-size: 0.68rem; font-weight: 400; color: var(--text-muted); }

.raio-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.raio-chips > span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); font-size: 0.78rem; color: var(--text-secondary); }
.raio-chips b { color: var(--text-primary); }
.raio-chips code { font-family: var(--font-mono); font-size: 0.75rem; color: var(--emerald-400); }

.raio-busca { display: flex; gap: 0.5rem; align-items: center; }
.raio-busca input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); }
.raio-busca span { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.raio-lista { display: flex; flex-direction: column; gap: 0.3rem; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.raio-linha { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.raio-linha[hidden] { display: none; }
.raio-linha:hover { border-color: var(--border-highlight); }
.raio-linha small { display: block; font-size: 0.7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raio-l-data strong { font-family: var(--font-mono); font-size: 0.85rem; }
.raio-l-ger { min-width: 0; }
.raio-l-ger strong { font-size: 0.85rem; }
.raio-l-val { text-align: right; font-weight: 700; color: var(--emerald-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.raio-acoes { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; padding: 0.85rem 1.25rem; border-top: 1px solid var(--border-color); }

body.theme-light .raio-ger:hover { background: rgba(15, 23, 42, 0.05); }
body.theme-light .raio-ger-barra { background: rgba(15, 23, 42, 0.08); }
body.theme-light .raio-num-destaque strong, body.theme-light .raio-l-val, body.theme-light .raio-chips code { color: #047857; }

@media (max-width: 640px) {
  .raio-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raio-ger { grid-template-columns: minmax(0, 1fr) auto; }
  .raio-ger-barra { grid-column: 1 / -1; grid-row: 2; }
  .raio-horas { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .raio-horas-legenda { display: none; }
  .raio-linha { grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 0.5rem; }
  .raio-lista { max-height: none; }
  .raio-acoes .btn-card-action { flex: 1 1 45%; }
  .raio-acoes { padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
}

/* Arquivo do projeto sem permissão depois de recarregar: chama atenção até o dono clicar */
.btn-projeto.projeto-sem-permissao { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.75); color: #fbbf24; animation: projetoPulsa 1.6s ease-in-out infinite; }
@keyframes projetoPulsa { 50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); } }
@media (prefers-reduced-motion: reduce) { .btn-projeto.projeto-sem-permissao { animation: none; } }

/* Raio-X: enviar / exportar */
.raio-export { padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-color); }
.raio-formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.raio-fmt { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-secondary); color: inherit; font: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.raio-fmt:hover { border-color: var(--emerald-400); transform: translateY(-2px); }
.raio-fmt b { font-size: 0.82rem; }
.raio-fmt small { font-size: 0.7rem; color: var(--text-muted); }
.raio-fmt-prev { width: 100%; height: 130px; border-radius: 8px; background: #0a0f1a center top / cover no-repeat; border: 1px solid var(--border-color); }
.raio-fmt-story { background-size: contain; background-position: center; }
.raio-fmt-quad { background-size: contain; background-position: center; }
.raio-export-acoes { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.raio-export-acoes .btn-card-action { flex: 1 1 auto; padding: 0.55rem 0.8rem; font-size: 0.82rem; }
.raio-export-acoes [hidden] { display: none; }
@media (max-width: 640px) {
  .raio-formatos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .raio-fmt-prev { height: 96px; }
  .raio-fmt b { font-size: 0.72rem; text-align: center; }
  .raio-export-acoes .btn-card-action { flex: 1 1 45%; min-height: 42px; }
}

/* ==========================================
   CARTÓRIO: cobertura de comprovantes (a planilha é a verdade; o Cartório guarda as provas)
   ========================================== */
.cart-filtro-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cart-select {
  background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary);
  border-radius: var(--radius-full); padding: 0.45rem 0.9rem; font: 600 0.85rem var(--font-main);
  max-width: 100%; min-width: 0; cursor: pointer;
}
.cart-select:focus { outline: none; border-color: var(--emerald-500); }
.cart-select option { background: #0f172a; color: #f8fafc; }
.c-stat-card.cs-ok .cs-num { color: var(--emerald-400); }
.c-stat-card.cs-erro { border-color: rgba(239, 68, 68, 0.45); }
.c-stat-card.cs-erro .cs-num { color: #f87171; }
.cart-cobertura .cs-num small { font: 600 0.72rem var(--font-main); color: var(--text-secondary); margin-left: 0.3rem; }
.cart-barra { height: 6px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); margin: 0.45rem 0 0.4rem; overflow: hidden; }
.cart-barra-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emerald-600), var(--emerald-400)); transition: width 0.6s ease; }
.pill-btn.pill-alerta { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }
.pill-btn.pill-alerta.active { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.7); color: #fff; }
.cart-nota { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 0.75rem; line-height: 1.45; }
.cart-subpills { margin-bottom: 0.75rem; }
.cart-vazio { padding: 2rem 1rem; text-align: center; color: var(--text-secondary); background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }
.cart-soltas { padding: 0.65rem 0.9rem; margin-bottom: 0.75rem; border-radius: var(--radius-md); border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); color: #fbbf24; font-size: 0.85rem; line-height: 1.45; }

/* Grupos "falta comprovar": uma conta num mês, com as linhas sem comprovante */
.cart-grupos { display: flex; flex-direction: column; gap: 0.85rem; }
.cart-grupo { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.cart-grupo-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 1rem; background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid var(--border-color); }
.cart-grupo-id { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.cart-grupo-id strong { font-family: var(--font-display); font-size: 1rem; overflow-wrap: anywhere; }
.cart-grupo-id small { display: block; color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.15rem; }
.cart-cod { font-family: var(--font-mono); font-weight: 700; color: var(--emerald-400); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; flex: none; }
.btn-cart-anexar { background: var(--emerald-500); color: #022c22; border: none; border-radius: var(--radius-md); padding: 0.5rem 0.9rem; font: 700 0.82rem var(--font-main); cursor: pointer; white-space: nowrap; }
.btn-cart-anexar:hover { background: var(--emerald-400); }
.cart-linha { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.55rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.85rem; }
.cart-linha:last-child { border-bottom: none; }
.cart-linha:hover { background: rgba(255, 255, 255, 0.02); }
.cl-data { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-data small { display: block; color: var(--text-muted); font-weight: 500; font-size: 0.72rem; }
.cl-valor { font-weight: 700; color: var(--emerald-400); font-variant-numeric: tabular-nums; }
.cl-desc { color: var(--text-secondary); overflow-wrap: anywhere; }
.cl-desc .bm-dest-tag, .cartorio-table .bm-dest-tag { margin-left: 0.4rem; }
.cl-acoes { white-space: nowrap; display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Zona de perigo: fechada; só o que apaga ou substitui tudo */
.zona-perigo { margin-top: 1.5rem; border: 1px dashed rgba(239, 68, 68, 0.4); border-radius: var(--radius-lg); background: rgba(239, 68, 68, 0.04); }
.zona-perigo summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 700; font-size: 0.88rem; color: #fca5a5; list-style: none; user-select: none; }
.zona-perigo summary::-webkit-details-marker { display: none; }
.zona-perigo summary::before { content: '▸ '; }
.zona-perigo[open] summary::before { content: '▾ '; }
.zona-perigo-corpo { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.zona-perigo-corpo p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; }

body.theme-light .cart-select option { background: #fff; color: #0f172a; }
body.theme-light .zona-perigo summary { color: #b91c1c; }
body.theme-light .cart-soltas { color: #b45309; }
body.theme-light .cart-grupo-topo { background: rgba(0, 0, 0, 0.04); }

@media (max-width: 768px) {
  .cart-filtro-linha { flex-direction: column; align-items: stretch; }
  .cart-select { width: 100%; }
  .cart-grupo-topo { align-items: flex-start; }
  .btn-cart-anexar { width: 100%; }
  .cart-linha { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.6rem; }
  .cl-valor { text-align: right; }
  .cl-desc, .cl-acoes { grid-column: 1 / -1; }
  .cl-acoes { justify-content: flex-start; }
}

/* Cartório v2: histórico confirmado, busca e grupos que abrem e fecham */
.cart-barra { display: flex; }
.cart-barra-fill { flex: none; }
.cart-barra-hist { flex: none; height: 100%; background: repeating-linear-gradient(45deg, rgba(96, 165, 250, 0.75) 0 6px, rgba(96, 165, 250, 0.5) 6px 12px); transition: width 0.6s ease; }
.cart-historico-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.6rem 0.9rem; margin: -0.4rem 0 0.25rem; border-radius: var(--radius-md); border: 1px solid rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.07); color: #bfdbfe; font-size: 0.83rem; line-height: 1.45; }
.cart-historico-faixa span { flex: 1 1 260px; min-width: 0; }
.cart-busca-linha { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cart-busca { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-full); padding: 0.45rem 0.9rem; font: 500 0.85rem var(--font-main); width: 300px; max-width: 100%; min-width: 0; }
.cart-busca:focus { outline: none; border-color: var(--emerald-500); }
details.cart-grupo > summary { list-style: none; cursor: pointer; }
details.cart-grupo > summary::-webkit-details-marker { display: none; }
details.cart-grupo:not([open]) > summary { border-bottom: none; }
.cart-grupo-dir { display: flex; align-items: center; gap: 0.6rem; }
.cart-seta { color: var(--text-secondary); font-size: 0.9rem; transition: transform 0.2s; }
details.cart-grupo:not([open]) .cart-seta { transform: rotate(-90deg); }
body.theme-light .cart-historico-faixa { color: #1d4ed8; }
@media (max-width: 768px) {
  .cart-busca-linha { flex-direction: column; align-items: stretch; }
  .cart-busca { width: 100%; }
  .cart-grupo-dir { width: 100%; justify-content: space-between; }
}

/* ==========================================
   RADAR DO DONO (Visão Geral, abaixo dos gráficos) — js/radar-dono.js
   ========================================== */
.radar-dono { margin-top: 1.5rem; gap: 1rem; --rd-cel: 20px; }
.radar-dono:empty { display: none; }
.rd-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; }
.rd-cabeca h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.2rem; }
.rd-hoje { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.rd-frases { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.95rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(59, 130, 246, 0.06)); border: 1px solid rgba(16, 185, 129, 0.25); font-size: 0.88rem; line-height: 1.5; }
.rd-frases strong { color: var(--emerald-400); }
.rd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; }
.rd-kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border-color); min-width: 0; }
.rd-kpi small { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.rd-kpi b { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rd-kpi span { font-size: 0.75rem; color: var(--text-muted); }
.rd-kpi-destaque { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.08); }
.rd-kpi-destaque b { color: var(--emerald-400); }
.rd-up { color: var(--emerald-400); font-weight: 700; }
.rd-down { color: #f87171; font-weight: 700; }
.rd-bloco { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.18); border: 1px solid var(--border-color); min-width: 0; }
.rd-bloco-topo h4 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.15rem; }
.rd-bloco-topo .sub-text { font-size: 0.75rem; line-height: 1.4; }
.rd-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }

/* Previsão por gerente */
.rd-gers { display: flex; flex-direction: column; }
.rd-ger { display: grid; grid-template-columns: 28px minmax(150px, 1.6fr) repeat(3, minmax(100px, 1fr)) 96px; gap: 0.6rem; align-items: center; padding: 0.55rem 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; border-radius: var(--radius-sm); }
.rd-ger:last-child { border-bottom: none; }
.rd-ger:hover { background: rgba(255, 255, 255, 0.03); }
.rd-ger-status { font-size: 1rem; text-align: center; }
.rd-ger-nome { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rd-ger-nome b { font-family: var(--font-mono); color: var(--emerald-400); margin-right: 0.2rem; }
.rd-ger-nome small, .rd-ger-num small { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }
.rd-ger-num { font-variant-numeric: tabular-nums; font-size: 0.86rem; min-width: 0; }
.rd-ger-num i { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.rd-dias { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.rd-parado .rd-ger-num:nth-of-type(1) { color: #fca5a5; }
.rd-quitado { opacity: 0.6; }
.rd-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.rd-spark-barra { flex: 1; background: rgba(16, 185, 129, 0.45); border-radius: 2px 2px 0 0; min-height: 2px; }
.rd-spark-barra.atual { background: var(--emerald-400); }

/* Mapa de calor */
.rd-mapa-rolagem { overflow-x: auto; padding-bottom: 0.25rem; }
.rd-mapa { display: inline-flex; flex-direction: column; gap: 4px; }
.rd-mapa-meses { display: grid; gap: 3px; margin-left: 30px; font-size: 0.68rem; color: var(--text-muted); }
.rd-mapa-meses span { white-space: nowrap; overflow: visible; }
.rd-mapa-corpo { display: flex; gap: 6px; }
.rd-mapa-dias { display: grid; grid-template-rows: repeat(7, var(--rd-cel)); gap: 3px; width: 24px; font-size: 0.62rem; color: var(--text-muted); line-height: var(--rd-cel); }
.rd-mapa-grade { display: grid; grid-template-rows: repeat(7, var(--rd-cel)); grid-auto-flow: column; grid-auto-columns: var(--rd-cel); gap: 3px; }
.rd-cel { display: inline-block; width: var(--rd-cel); height: var(--rd-cel); border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.rd-cel.n-1 { background: transparent; }
.rd-cel.n1 { background: rgba(16, 185, 129, 0.28); }
.rd-cel.n2 { background: rgba(16, 185, 129, 0.5); }
.rd-cel.n3 { background: rgba(16, 185, 129, 0.75); }
.rd-cel.n4 { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.5); }
.rd-legenda { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); }

/* Quando o dinheiro entra */
.rd-horas { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: 0.25rem; }
.rd-hbar { flex: 1; min-width: 4px; background: rgba(59, 130, 246, 0.45); border-radius: 3px 3px 0 0; }
.rd-hbar.pico { background: linear-gradient(180deg, #34d399, #10b981); }
.rd-horas-eixo { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-muted); }
.rd-semana { display: flex; flex-direction: column; gap: 4px; margin-top: 0.4rem; }
.rd-sem { display: grid; grid-template-columns: 34px minmax(0, 1fr) 110px; gap: 0.5rem; align-items: center; font-size: 0.78rem; }
.rd-sem-rot { grid-column: 1; grid-row: 1; color: var(--text-secondary); font-weight: 600; }
.rd-sem-barra { grid-column: 2; grid-row: 1; height: 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rd-sem-barra span { display: block; height: 100%; background: rgba(59, 130, 246, 0.6); border-radius: inherit; }
.rd-sem.pico .rd-sem-barra span { background: var(--emerald-400); }
.rd-sem-val { grid-column: 3; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.rd-sem.pico .rd-sem-rot, .rd-sem.pico .rd-sem-val { color: var(--emerald-400); }

body.theme-light .rd-kpi, body.theme-light .rd-bloco { background: rgba(255, 255, 255, 0.7); }
body.theme-light .rd-cel { background: rgba(15, 23, 42, 0.07); }
body.theme-light .rd-cel.n-1 { background: transparent; }
body.theme-light .rd-frases strong, body.theme-light .rd-kpi-destaque b { color: #047857; }

@media (max-width: 768px) {
  .radar-dono { --rd-cel: 13px; padding: 1rem; }
  .rd-kpis { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .rd-kpi { padding: 0.65rem 0.7rem; }
  .rd-kpi b { font-size: 1.02rem; }
  .rd-kpi small { font-size: 0.64rem; }
  .rd-hoje { white-space: normal; }
  .rd-dupla { grid-template-columns: 1fr; }
  .rd-ger { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); gap: 0.25rem 0.5rem; padding: 0.6rem 0.2rem; }
  .rd-ger-status { grid-row: span 2; align-self: start; }
  .rd-ger-nome { grid-column: 2 / 4; }
  .rd-ger-num { grid-column: auto; }
  .rd-ger-prev { grid-column: 2 / 4; }
  .rd-spark { grid-column: 2 / 4; height: 22px; }
  .rd-sem { grid-template-columns: 30px minmax(0, 1fr) 92px; }
}

/* ==========================================
   RADAR DO DONO v2: IA de olho, exportar, selo na aba e animações
   ========================================== */
.rd-cabeca-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.rd-btn-exportar { background: var(--emerald-500); color: #022c22; border: none; border-radius: var(--radius-full); padding: 0.5rem 1rem; font: 700 0.85rem var(--font-main); cursor: pointer; box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.6); transition: transform 0.15s, box-shadow 0.15s; }
.rd-btn-exportar:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(16, 185, 129, 0.7); }
.rd-export { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); border: 1px dashed rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.05); animation: rdEntrar 0.35s ease both; }
.rd-export[hidden] { display: none; }
.rd-export .raio-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.rd-export .raio-export-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Ícone do radar girando no título */
.rd-radar-ic { display: inline-block; width: 14px; height: 14px; margin-right: 0.45rem; border-radius: 50%; vertical-align: middle; background: conic-gradient(from 0deg, rgba(52, 211, 153, 0) 0deg, rgba(52, 211, 153, 0.95) 70deg, rgba(52, 211, 153, 0) 90deg); border: 1.5px solid rgba(52, 211, 153, 0.6); animation: rdGirar 2.4s linear infinite; }

/* IA de olho */
.rd-ia { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 1rem; border-radius: var(--radius-md); border: 1px solid rgba(96, 165, 250, 0.35); background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(16, 185, 129, 0.06)); position: relative; overflow: hidden; }
.rd-ia:empty { display: none; }
.rd-ia.rd-ia-alerta { border-color: rgba(239, 68, 68, 0.55); animation: rdBorda 2.2s ease-in-out infinite; }
.rd-ia.rd-ia-analisando::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.07) 45%, transparent 70%); animation: rdVarrer 1.3s linear infinite; pointer-events: none; }
.rd-ia-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.rd-ia-titulo { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.rd-ia-olho { display: inline-block; animation: rdOlhar 3.5s ease-in-out infinite; }
.rd-ia-status { font-size: 0.75rem; color: var(--text-muted); flex: 1 1 200px; }
.rd-ia-pensando { color: #93c5fd; }
.rd-ia-erro { color: #fbbf24; }
.rd-ia-resumo { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; }
.rd-ia-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.5rem; }
.rd-ia-vazio { font-size: 0.85rem; color: var(--text-secondary); }
.rd-alerta { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.6rem 0.7rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-color); animation: rdEntrar 0.45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); min-width: 0; }
.rd-alerta[onclick] { cursor: pointer; }
.rd-alerta[onclick]:hover { border-color: var(--border-highlight); }
.rd-alerta-ic { font-size: 1.15rem; line-height: 1.2; }
.rd-alerta-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rd-alerta-txt b { font-size: 0.88rem; overflow-wrap: anywhere; }
.rd-alerta-txt small { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; overflow-wrap: anywhere; }
.rd-alerta-alto { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }
.rd-alerta-alto b { color: #fca5a5; }
.rd-alerta-medio b { color: #fcd34d; }
.rd-alerta-info b { color: var(--emerald-400); }

/* Selo de alertas na aba Visão Geral (PC e celular) */
.nav-tab-btn, .mobile-tab-btn { position: relative; }
.rd-selo { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font: 800 0.68rem/18px var(--font-main); text-align: center; box-shadow: 0 0 0 2px var(--bg-primary); animation: rdSelo 1.8s ease-in-out infinite; pointer-events: none; }

/* Sempre: gerente parado chama a atenção; a data final brilha de leve */
.rd-parado .rd-ger-status { position: relative; }
.rd-parado .rd-ger-status::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, 0.7); animation: rdPulso 1.6s ease-out infinite; }
.rd-kpi-destaque { animation: rdBrilho 3.2s ease-in-out infinite; }

/* Entrada (uma vez por visita, quando o radar aparece na tela) */
.rd-animar .rd-kpi, .rd-animar .rd-bloco, .rd-animar .rd-ia { animation: rdEntrar 0.6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.rd-animar .rd-kpi-destaque { animation: rdEntrar 0.6s cubic-bezier(.2, .8, .2, 1) both, rdBrilho 3.2s ease-in-out 1s infinite; animation-delay: 270ms, 1.2s; }
/* "backwards", não "both": depois da entrada a linha volta ao estilo dela (com "both" a animação segurava
   opacity: 1 e o foco num gerente não apagava as outras linhas do Radar; revisão 10/10/2026) */
.rd-animar .rd-ger { animation: rdLado 0.5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(250ms + var(--i, 0) * 55ms); }
.rd-animar .rd-spark-barra, .rd-animar .rd-hbar { transform-origin: bottom; animation: rdCrescer 0.7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(350ms + var(--i, 0) * 28ms); }
.rd-animar .rd-sem-barra span { transform-origin: left; animation: rdLargura 0.8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(500ms + var(--i, 0) * 70ms); }
.rd-animar .rd-mapa-grade .rd-cel { animation: rdCelula 0.45s ease-out both; animation-delay: calc(300ms + var(--i, 0) * 5ms); }

@keyframes rdEntrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rdLado { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes rdCrescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rdLargura { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rdCelula { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes rdPulso { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes rdBrilho { 0%, 100% { box-shadow: 0 0 0 rgba(52, 211, 153, 0); } 50% { box-shadow: 0 0 22px -4px rgba(52, 211, 153, 0.45); } }
@keyframes rdBorda { 0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 20px -4px rgba(239, 68, 68, 0.5); } }
@keyframes rdVarrer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes rdGirar { to { transform: rotate(360deg); } }
@keyframes rdOlhar { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-18deg); } 90% { transform: rotate(14deg); } }
@keyframes rdSelo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .radar-dono *, .rd-selo { animation: none !important; transition: none !important; }
}
body.theme-light .rd-ia { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.05)); }
body.theme-light .rd-alerta { background: rgba(255, 255, 255, 0.75); }
body.theme-light .rd-alerta-alto b { color: #b91c1c; }
body.theme-light .rd-alerta-medio b { color: #b45309; }
body.theme-light .rd-alerta-info b { color: #047857; }
@media (max-width: 768px) {
  .rd-cabeca-dir { align-items: stretch; width: 100%; }
  .rd-btn-exportar { width: 100%; }
  .rd-ia-lista { grid-template-columns: 1fr; }
  .rd-selo { top: 0; right: 10%; }
}

/* Cartão do gerente (Cadastros): nome comprido não espreme a linha "meses · recolhes · 📎"; o selo desce quando não cabe */
.dividendo-card .card-top-bar { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.dividendo-card .card-title-group { flex: 1 1 170px; min-width: 0; }
.dividendo-card .div-titles { min-width: 0; }
.dividendo-card .badge-status { margin-left: auto; max-width: 100%; }

/* ==========================================
   VISÃO GERAL VIVA (js/visao-viva.js)
   ========================================== */
/* "ao vivo" ao lado da data */
.visao-atualizado { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; }
.vv-aovivo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: var(--radius-full); border: 1px solid rgba(52, 211, 153, 0.35); background: rgba(16, 185, 129, 0.08); color: var(--emerald-400); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: help; }
.vv-aovivo i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.vv-aovivo i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #34d399; animation: vvRadar 1.8s ease-out infinite; }
.vv-aovivo.vv-piscou { animation: vvPiscou 1.4s ease-out; }
body.theme-light .vv-aovivo { color: #047857; background: rgba(16, 185, 129, 0.1); border-color: rgba(4, 120, 87, 0.35); }

/* Cartões: número contando, barra enchendo, minigráfico embaixo */
.metrics-banner-grid > .metric-card { display: flex; flex-direction: column; }
.metric-value { font-variant-numeric: tabular-nums; }
.metric-meter-fill { transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vv-spark { margin-top: auto; padding-top: 0.75rem; }
.vv-barras { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.vv-barras span { flex: 1 1 0; min-width: 2px; max-width: 26px; height: var(--h); border-radius: 3px 3px 1px 1px; background: currentColor; opacity: 0.5; transform-origin: bottom; transition: opacity 0.15s; }
.vv-barras span:hover, .vv-barras span.vv-dest { opacity: 1; }
.vv-barras span.vv-apagada { opacity: 0.22; }
.vv-azul { color: #60a5fa; }
.vv-verde { color: #34d399; }
.vv-ouro { color: #fbbf24; }
body.theme-light .vv-azul { color: #2a78d6; }
body.theme-light .vv-verde { color: #059669; }
body.theme-light .vv-ouro { color: #d97706; }
.vv-spark.vv-animar .vv-barras span { animation: rdCrescer 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(250ms + var(--i, 0) * 35ms); }
.vv-spark-rot { display: block; margin-top: 5px; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-anel { display: flex; align-items: center; gap: 0.65rem; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.3; }
.vv-anel b { color: var(--text-primary); font-size: 0.95rem; }
.vv-anel svg { flex: none; transform: rotate(-90deg); }
.vv-anel circle { fill: none; stroke-width: 5; }
.vv-anel-fundo { stroke: rgba(139, 92, 246, 0.2); }
.vv-anel-cheio { stroke: #a78bfa; stroke-linecap: round; stroke-dashoffset: var(--vazio); }
.vv-spark.vv-animar .vv-anel-cheio { animation: vvAnel 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; }
body.theme-light .vv-anel-cheio { stroke: #7c3aed; }

/* Entrou dinheiro: o cartão do recolhido brilha e sobe "+R$" */
.metric-card .vv-ganho { position: absolute; top: 2.6rem; right: 1rem; z-index: 2; padding: 2px 10px; border-radius: var(--radius-full); background: rgba(6, 78, 59, 0.95); border: 1px solid #34d399; box-shadow: 0 0 16px rgba(16, 185, 129, 0.6); font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; color: #d1fae5; white-space: nowrap; pointer-events: none; animation: hpbSobe 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
body.theme-light .metric-card .vv-ganho { background: #ecfdf5; color: #047857; border-color: #10b981; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
.metric-card.vv-brilho::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: vvBrilho 1.8s ease-out forwards; }

/* 💸 Pix ao vivo */
.pix-ao-vivo { margin: -0.5rem 0 1.5rem; padding: 0.8rem 0 0.9rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-card); overflow: hidden; }
.pav-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.75rem; padding: 0 1.1rem 0.2rem; }
.pav-titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.92rem; color: var(--text-primary); }
.pav-ponto { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: vvPonto 1.6s ease-out infinite; }
.pav-cabeca small { color: var(--text-muted); font-size: 0.75rem; }
.pav-janela { overflow: hidden; padding-left: 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.pav-trilho { display: flex; width: max-content; animation: pavRolar var(--dur, 90s) linear infinite; }
.pav-janela:hover .pav-trilho, .pav-janela:focus-within .pav-trilho, .pav-janela:active .pav-trilho { animation-play-state: paused; }
.pav-lista { display: flex; gap: 0.6rem; padding: 0.7rem 0.6rem 0.15rem 0; }
.pav-item { position: relative; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 0.6rem; row-gap: 2px; padding: 0.5rem 0.8rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-glass); color: var(--text-secondary); font: inherit; font-size: 0.8rem; text-align: left; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.pav-item:hover, .pav-item:focus-visible { border-color: rgba(52, 211, 153, 0.6); background: rgba(16, 185, 129, 0.08); transform: translateY(-2px); outline: none; }
.pav-quando { grid-column: 1 / -1; font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pav-nome { color: var(--text-primary); font-weight: 700; }
.pav-valor { color: var(--emerald-400); font-weight: 800; font-variant-numeric: tabular-nums; }
.pav-dest { grid-column: 1 / -1; font-size: 0.7rem; color: var(--text-muted); }
.pav-novo { border-color: rgba(52, 211, 153, 0.8); animation: vvNovo 2s ease-in-out infinite; }
.pav-selo { position: absolute; top: 0; right: 10px; transform: translateY(-50%); padding: 1px 7px; border-radius: var(--radius-full); background: #047857; color: #ffffff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; }
body.theme-light .pav-valor { color: #047857; }
body.theme-light .pav-item { background: rgba(255, 255, 255, 0.85); }
@media (hover: none) { .pav-dica { display: none; } }

/* Tabela de gerentes: entrada em sequência, quem pagou agora pisca, bolinha do Radar */
.tabela-gerentes.vv-entrar .tg-linha { animation: rdEntrar 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.tabela-gerentes.vv-entrar .tg-fill { transform-origin: left; animation: rdLargura 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(180ms + var(--i, 0) * 45ms); }
.tg-linha.vv-subiu { animation: vvSubiu 2.4s ease-out; }
.tg-st { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--text-muted); }
.tg-st-ritmo { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.55); }
.tg-st-lento { background: #fbbf24; }
.tg-st-parado { background: #ef4444; animation: vvParado 1.8s ease-in-out infinite; }
.tg-st-quitado { background: transparent; box-shadow: inset 0 0 0 2px #34d399; }
body.theme-light .tg-st-ritmo { background: #059669; box-shadow: none; }
body.theme-light .tg-st-lento { background: #d97706; }
body.theme-light .tg-st-parado { background: #dc2626; }
body.theme-light .tg-st-quitado { box-shadow: inset 0 0 0 2px #059669; }
.tg-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; padding: 0.7rem 0.75rem 0; color: var(--text-muted); font-size: 0.74rem; }
.tg-legenda span { display: inline-flex; align-items: center; }
.tg-legenda-fonte { opacity: 0.8; }

/* Recolhido acumulado: legenda da linha do futuro */
.vv-legenda-futuro { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.7rem; font-size: 0.76rem; color: var(--text-muted); }
.vv-legenda-futuro:empty { display: none; }
.vv-legenda-futuro b { color: var(--text-primary); }
.vv-legenda-futuro i { display: inline-block; width: 20px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid #3987e5; }
.vv-legenda-futuro i.vv-leg-futuro { border-top: 2px dashed #34d399; }
.vv-leg-chegada { color: #34d399; font-weight: 600; }
.vv-leg-chegada b { color: inherit; }
body.theme-light .vv-legenda-futuro i { border-top-color: #2a78d6; }
body.theme-light .vv-legenda-futuro i.vv-leg-futuro { border-top-color: #047857; }
body.theme-light .vv-leg-chegada { color: #047857; }
.mm-fill { animation: vvEncher 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Cabeçalho dos gráficos quebra a linha quando não cabe (título nunca espremido) */
.chart-header { flex-wrap: wrap; gap: 0.25rem 1rem; }
.chart-header h3 { white-space: nowrap; }
/* Recolhido acumulado ocupa a altura do cartão ao lado (o gráfico não deixa sobra embaixo) */
.chart-canvas-wrapper.chart-cresce { flex: 1 1 auto; height: auto; min-height: 280px; }
.chart-canvas-wrapper.chart-cresce > canvas { position: absolute; inset: 0; }

@keyframes vvRadar { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
@keyframes vvPiscou { 0% { background: rgba(52, 211, 153, 0.5); box-shadow: 0 0 18px rgba(52, 211, 153, 0.6); } 100% { background: rgba(16, 185, 129, 0.08); box-shadow: 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes vvPonto { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
@keyframes vvNovo { 0%, 100% { box-shadow: 0 0 0 rgba(52, 211, 153, 0); } 50% { box-shadow: 0 0 16px -2px rgba(52, 211, 153, 0.6); } }
@keyframes vvAnel { from { stroke-dashoffset: var(--c); } }
@keyframes vvBrilho { 0% { background: rgba(52, 211, 153, 0.25); box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0.9); } 100% { background: rgba(52, 211, 153, 0); box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0); } }
@keyframes vvSubiu { 0%, 35% { background: rgba(52, 211, 153, 0.18); box-shadow: inset 3px 0 0 #34d399; } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
@keyframes vvParado { 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25); } }
@keyframes vvEncher { from { width: 0; } }
@keyframes pavRolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 768px) {
  .pix-ao-vivo { margin-top: -0.25rem; }
  .pav-item { font-size: 0.76rem; padding: 0.45rem 0.7rem; }
  .tg-legenda-fonte { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vv-aovivo i::after, .vv-aovivo.vv-piscou, .pav-ponto, .pav-novo, .tg-st-parado, .tg-linha.vv-subiu,
  .vv-spark.vv-animar .vv-barras span, .vv-spark.vv-animar .vv-anel-cheio,
  .tabela-gerentes.vv-entrar .tg-linha, .tabela-gerentes.vv-entrar .tg-fill,
  .metric-card.vv-brilho::after, .metric-card .vv-ganho, .mm-fill, .pav-trilho { animation: none !important; }
  .metric-meter-fill, .pav-item { transition: none !important; }
  .pav-janela { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pav-copia, .pav-dica { display: none !important; }
}

/* ==========================================
   VISÃO GERAL INTEGRADA (10/10/2026)
   Foco: o mesmo gerente (ou mês) aceso em todos os blocos (VisaoViva.focar).
   Caminho do Pix: o Pix que acabou de entrar chega na faixa.
   Profundidade leve, inspirada na versão 3D (regra de ouro dela: nenhum tamanho muda; só cor de borda e sombra
   por dentro). Sem luz que segue o mouse e sem inclinação: a cada movimento do mouse o navegador refaria a página.
   ========================================== */
.tg-linha[data-pessoa], .rd-ger { transition: opacity 0.2s ease, background-color 0.2s ease; }
#tab-visao-geral.vv-focando .tg-linha[data-pessoa]:not(.vv-foco),
#tab-visao-geral.vv-focando .rd-ger:not(.vv-foco) { opacity: 0.55; }
.tg-linha.vv-foco, .rd-ger.vv-foco { background-color: rgba(52, 211, 153, 0.07); box-shadow: inset 3px 0 0 #34d399; }
.pav-item.vv-foco { border-color: rgba(52, 211, 153, 0.9); background: rgba(16, 185, 129, 0.12); }
.vv-barras span.vv-foco { opacity: 1; filter: brightness(1.25); }
.mes-chip.vv-foco { border-color: rgba(52, 211, 153, 0.7); }
/* O chip do mês ATIVO (fundo verde) mantém a letra escura dele: clara em cima do verde ficava ilegível (2,4:1) */
.mes-chip.vv-foco:not(.active) { color: var(--text-primary); }
body.theme-light .tg-linha.vv-foco, body.theme-light .rd-ger.vv-foco { background-color: rgba(5, 150, 105, 0.07); box-shadow: inset 3px 0 0 #059669; }
body.theme-light .pav-item.vv-foco { border-color: #059669; background: rgba(5, 150, 105, 0.08); }
body.theme-light .mes-chip.vv-foco { border-color: #059669; }

.pav-item.pav-chegou { animation: pavChegar 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, vvNovo 2s ease-in-out 0.7s infinite; }
@keyframes pavChegar { from { opacity: 0; transform: translateX(-28px) scale(0.92); } }
.mm-fill { transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Voltou para a aba depois de mudanças com ela fechada (o motor leve não redesenhou nada): até o desenho da visita
   (~100 ms) o que ainda mostra número velho fica escondido, sem mudar de tamanho (VisaoViva.novaVisita / _velha) */
#tab-visao-geral.vv-velha #metricBrutoDetalhe, #tab-visao-geral.vv-velha #metricPctGeral, #tab-visao-geral.vv-velha #metricPctBarra,
#tab-visao-geral.vv-velha #metricReceberDetalhe, #tab-visao-geral.vv-velha #metricPendencias, #tab-visao-geral.vv-velha #metricPendenciasIcone,
#tab-visao-geral.vv-velha #metricPendenciasDetalhe, #tab-visao-geral.vv-velha #metricDataAlteracao, #tab-visao-geral.vv-velha .vv-spark,
#tab-visao-geral.vv-velha #pixAoVivo, #tab-visao-geral.vv-velha #tabelaGerentes { visibility: hidden; }

#tab-visao-geral .metric-card,
#tab-visao-geral .chart-box-card,
#tab-visao-geral .pix-ao-vivo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.35), var(--shadow-card); }
#tab-visao-geral .metric-card[onclick]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.5) !important; }
#tab-visao-geral .metric-card.card-bruto[onclick]:hover { border-color: rgba(59, 130, 246, 0.55) !important; }
#tab-visao-geral .metric-card.card-recolhido[onclick]:hover { border-color: rgba(16, 185, 129, 0.55) !important; }
#tab-visao-geral .metric-card.card-receber[onclick]:hover { border-color: rgba(245, 158, 11, 0.55) !important; }
#tab-visao-geral .metric-card.card-status[onclick]:hover { border-color: rgba(139, 92, 246, 0.55) !important; }
#tab-visao-geral .chart-box-card { transition: border-color 0.25s ease; }
#tab-visao-geral .chart-box-card:hover { border-color: var(--border-highlight); }
body.theme-light #tab-visao-geral .metric-card,
body.theme-light #tab-visao-geral .chart-box-card,
body.theme-light #tab-visao-geral .pix-ao-vivo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(15, 23, 42, 0.06), var(--shadow-card); }
body.theme-light #tab-visao-geral .metric-card[onclick]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.14) !important; }

/* Cartão que vira janela (js/visao-detalhe.js, "transição de visão" do navegador). A janela não roda a entrada
   própria enquanto o cartão cresce (vd-vt) nem depois, enquanto ficar aberta (vd-sem-entrada, tirada ao fechar):
   antes, quando a vd-vt saía no fim da morfose, a entrada começava do zero e a janela piscava (revisão 10/10/2026) */
html.vd-vt .vd-modal.active, html.vd-vt .vd-modal.active .vd-caixa,
.vd-modal.vd-sem-entrada, .vd-modal.vd-sem-entrada .vd-caixa { animation: none !important; }
::view-transition-group(vd-cartao) { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-image-pair(vd-cartao) { overflow: hidden; border-radius: 22px; }
::view-transition-old(vd-cartao), ::view-transition-new(vd-cartao) { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
::view-transition-old(vd-cartao) { animation: vdVtSair 0.2s ease-out both; }
::view-transition-new(vd-cartao) { animation: vdVtEntrar 0.3s ease-out 0.06s both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
@keyframes vdVtSair { to { opacity: 0; } }
@keyframes vdVtEntrar { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tg-linha[data-pessoa], .rd-ger, .mm-fill, #tab-visao-geral .chart-box-card { transition: none !important; }
  .pav-item.pav-chegou { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================
   DETALHE DOS CARTÕES (js/visao-detalhe.js)
   PC: janela no meio, gráfico ao lado da lista · tablet: um embaixo do outro · celular: folha que sobe de baixo
   ========================================== */
.metrics-banner-grid > .metric-card:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 3px; }

.vd-modal { position: fixed; inset: 0; z-index: 1050; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(2, 6, 23, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vd-modal.active { display: flex; animation: vdFundo 0.25s ease-out; }
body.theme-light .vd-modal { background: rgba(15, 23, 42, 0.45); }
.vd-caixa { position: relative; width: min(1060px, 100%); max-height: min(800px, calc(100vh - 48px)); display: flex; flex-direction: column; background: radial-gradient(120% 80% at 0% 0%, rgba(59, 130, 246, 0.1), transparent 55%), linear-gradient(160deg, #0f1729 0%, #0a101c 100%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85); overflow: hidden; animation: vdEntrar 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vd-caixa.vd-recolhido { background: radial-gradient(120% 80% at 0% 0%, rgba(16, 185, 129, 0.12), transparent 55%), linear-gradient(160deg, #0f1729 0%, #0a101c 100%); }
.vd-caixa.vd-receber { background: radial-gradient(120% 80% at 0% 0%, rgba(245, 158, 11, 0.1), transparent 55%), linear-gradient(160deg, #0f1729 0%, #0a101c 100%); }
.vd-caixa.vd-pendencias { background: radial-gradient(120% 80% at 0% 0%, rgba(139, 92, 246, 0.12), transparent 55%), linear-gradient(160deg, #0f1729 0%, #0a101c 100%); }
body.theme-light .vd-caixa { background: linear-gradient(160deg, #ffffff 0%, #f6f8fb 100%); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.35); }

.vd-topo { display: flex; align-items: center; gap: 12px; padding: 18px 18px 10px 22px; }
.vd-icone { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--bg-glass); border: 1px solid var(--border-color); font-size: 1.35rem; }
.vd-titulos { flex: 1; min-width: 0; }
.vd-titulos h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.vd-sub { margin-top: 2px; font-size: 0.8rem; color: var(--text-muted); }
.vd-zoom-fora { margin-left: 4px; padding: 2px 10px; border-radius: var(--radius-full); border: 1px solid rgba(52, 211, 153, 0.45); background: rgba(16, 185, 129, 0.1); color: var(--emerald-400); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
body.theme-light .vd-zoom-fora { color: #047857; }
.vd-fechar { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-glass); color: var(--text-secondary); font-size: 1rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.2s; }
.vd-fechar:hover { color: var(--text-primary); border-color: rgba(148, 163, 184, 0.45); transform: rotate(90deg); }

.vd-abas { display: flex; gap: 6px; padding: 0 22px 12px; overflow-x: auto; scrollbar-width: none; }
.vd-abas::-webkit-scrollbar { display: none; }
.vd-aba { flex: none; padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.vd-aba:hover { color: var(--text-primary); border-color: rgba(148, 163, 184, 0.35); }
.vd-aba.active { background: var(--emerald-500); border-color: var(--emerald-500); color: #03140d; }

.vd-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 6px 22px 20px; }
.vd-corpo.vd-troca { animation: vdTroca 0.32s ease-out; }
.vd-corpo { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
.vd-corpo::-webkit-scrollbar { width: 8px; }
.vd-corpo::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(148, 163, 184, 0.35); }
.vd-corpo::-webkit-scrollbar-track { background: transparent; }
.vd-visual { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; margin: 0 auto; container-type: inline-size; }
.vd-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vd-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30%; text-align: center; pointer-events: none; }
.vd-c-rot { font-size: 0.66rem; font-size: max(0.62rem, 2.5cqw); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: anywhere; }
.vd-c-num { margin: 2px 0; font-family: var(--font-display); font-size: 1.15rem; font-size: 4.1cqw; font-weight: 800; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-c-sub { font-size: 0.72rem; font-size: max(0.66rem, 2.8cqw); line-height: 1.35; color: var(--text-secondary); }
.vd-c-gigante { font-size: 3rem; font-size: 13cqw; color: #ffffff; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55); }

.vd-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: start; padding-top: 6px; }
.vd-bloco h3 { margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.vd-linha { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 5px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.84rem; text-align: left; }
button.vd-linha { cursor: pointer; transition: background 0.15s; }
button.vd-linha:hover, .vd-linha.vd-ativa { background: var(--bg-glass); }
.vd-linha > i { width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.vd-linha > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.vd-linha > span { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vd-linha > span small { margin-left: 4px; font-size: 0.74rem; color: var(--text-muted); }
.vd-trilho { grid-column: 2 / -1; height: 5px; border-radius: 99px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.vd-trilho > em { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--cor); transform-origin: left; animation: rdLargura 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.3s + var(--i, 0) * 60ms); }
.vd-mais { display: block; padding: 4px 10px 0; font-size: 0.75rem; color: var(--text-muted); }
.vd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vd-kpis > div { min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-glass); }
.vd-kpis small { display: block; font-size: 0.72rem; color: var(--text-muted); }
.vd-kpis b { display: block; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.vd-kpis em { display: block; font-style: normal; font-size: 0.74rem; color: var(--text-secondary); }
.vd-sobe { color: var(--emerald-400) !important; }
.vd-desce { color: #f87171 !important; }
body.theme-light .vd-sobe { color: #047857 !important; }
body.theme-light .vd-desce { color: #b91c1c !important; }

.vd-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 22px 16px; border-top: 1px solid var(--border-color); }
.vd-dica { flex: 1 1 260px; min-width: 0; font-size: 0.75rem; color: var(--text-muted); }
.vd-dica-cel { display: none; }
@media (hover: none) { .vd-dica-pc { display: none; } .vd-dica-cel { display: inline; } }
.vd-botao { padding: 9px 16px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-glass); color: var(--text-primary); font: inherit; font-size: 0.84rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.vd-botao:hover { border-color: rgba(52, 211, 153, 0.55); transform: translateY(-1px); }
.vd-botao-forte { background: var(--emerald-500); border-color: var(--emerald-500); color: #03140d; }
.vd-vazio { grid-column: 1 / -1; padding: 48px 12px; text-align: center; font-size: 1rem; color: var(--text-secondary); }

/* 💼 Sol (bruto) */
.vd-sol-halo { fill: none; stroke: rgba(148, 163, 184, 0.12); stroke-width: 1; stroke-dasharray: 2 5; }
.vd-sol-nucleo { transform-box: fill-box; transform-origin: center; animation: vdPulsar 3.2s ease-in-out infinite; }
.vd-fatia { fill: var(--cor); stroke: #0b1220; stroke-width: 1.2; cursor: pointer; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, filter 0.2s; }
body.theme-light .vd-fatia { stroke: #ffffff; }
.vd-mes { fill-opacity: 0.96; }
.vd-ger { fill-opacity: var(--op, 0.8); }
.vd-svg.vd-foco .vd-fatia { opacity: 0.3; }
.vd-svg.vd-foco .vd-fatia.vd-acesa { opacity: 1; filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 255, 255, 0.16)); }
.vd-varre { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: vdVarrer 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.1s forwards; }

/* 🏦 Tanque (recolhido) */
.vd-tanque-orbita { fill: none; stroke: rgba(52, 211, 153, 0.28); stroke-width: 1.5; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; animation: rdGirar 40s linear infinite; }
.vd-tanque-aro { fill: none; stroke: rgba(52, 211, 153, 0.45); stroke-width: 3; filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.35)); }
.vd-tanque-fundo { fill: #071a16; }
.vd-tanque-reflexo { fill: #ffffff; opacity: 0.1; pointer-events: none; }
.vd-nivel { animation: vdEncher 1.8s cubic-bezier(0.33, 1, 0.68, 1) both; }   /* mesma curva da contagem do %: a água e o número sobem juntos */
.vd-onda-frente { animation: vdOnda 3.6s linear infinite; }
.vd-onda-tras { animation: vdOnda 6s linear infinite reverse; }
.vd-gota { fill: rgba(236, 253, 245, 0.55); animation: vdGota var(--d, 4s) ease-in var(--a, 0s) infinite; }
.vd-recolhido .vd-centro { padding: 0 18%; }
.vd-recolhido .vd-c-rot, .vd-recolhido .vd-c-sub { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.vd-recolhido .vd-c-sub b { color: #ffffff; }

/* 👤 Bolhas (a receber) */
.vd-bolhas-campo { fill: rgba(148, 163, 184, 0.035); stroke: rgba(148, 163, 184, 0.14); stroke-width: 1; stroke-dasharray: 2 6; }
.vd-bolha { cursor: pointer; transition: opacity 0.2s; }
.vd-svg.vd-foco .vd-bolha { opacity: 0.4; }
.vd-svg.vd-foco .vd-bolha.vd-acesa { opacity: 1; }
.vd-flutua { animation: vdFlutuar var(--d, 4s) ease-in-out var(--a, 0s) infinite alternate; }
.vd-bolha-corpo { transform-box: fill-box; transform-origin: center; animation: vdBrotar 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(0.1s + var(--i, 0) * 70ms); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vd-bolha:hover .vd-bolha-corpo, .vd-bolha.vd-acesa .vd-bolha-corpo { transform: scale(1.07); }
.vd-bolha-esfera { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.vd-st-parado .vd-bolha-esfera { animation: vdAlarme 1.8s ease-in-out infinite; }
.vd-bolha-reflexo { fill: rgba(255, 255, 255, 0.38); pointer-events: none; }
.vd-bolha-nome, .vd-bolha-valor { fill: #ffffff; text-anchor: middle; font-family: var(--font-display); font-weight: 800; paint-order: stroke; stroke: rgba(0, 0, 0, 0.28); stroke-width: 2px; stroke-linejoin: round; pointer-events: none; }
.vd-bolha-valor { font-weight: 600; fill: rgba(255, 255, 255, 0.94); }
.vd-balao { position: absolute; z-index: 3; min-width: 120px; max-width: 210px; padding: 8px 12px; border-radius: 12px; background: rgba(2, 6, 23, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); color: #e2e8f0; font-size: 0.78rem; line-height: 1.35; text-align: center; white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity 0.15s; }
.vd-balao.vd-embaixo { transform: translate(-50%, 10px); }
.vd-balao.vd-on { opacity: 1; }
.vd-balao b { display: block; font-size: 0.86rem; color: #ffffff; }
.vd-balao small { display: block; font-size: 0.72rem; color: #94a3b8; }
.vd-legenda-st { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--text-secondary); }
.vd-legenda-st span { display: inline; white-space: nowrap; }
.vd-legenda-st b { margin-left: 3px; color: var(--text-primary); }
.vd-escolhido { padding: 14px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-glass); }
.vd-esc-topo { display: flex; align-items: center; gap: 4px; }
.vd-esc-topo b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.vd-esc-nav { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.vd-esc-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.vd-esc-nav button:hover { border-color: rgba(148, 163, 184, 0.45); }
.vd-esc-nav small { min-width: 3.6em; text-align: center; font-size: 0.72rem; color: var(--text-muted); }
.vd-esc-num { margin: 8px 0 6px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: #fbbf24; font-variant-numeric: tabular-nums; }
.vd-esc-num small { display: block; font-family: var(--font-main); font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }
body.theme-light .vd-esc-num { color: #b45309; }
.vd-esc-barra { height: 7px; border-radius: 99px; background: rgba(148, 163, 184, 0.16); overflow: hidden; }
.vd-esc-barra em { display: block; height: 100%; border-radius: inherit; background: #3987e5; }
.vd-esc-linha { margin-top: 6px; font-size: 0.78rem; color: var(--text-secondary); }
.vd-esc-sit { margin-top: 8px; padding: 7px 10px; border-radius: 10px; font-size: 0.78rem; background: rgba(148, 163, 184, 0.08); color: var(--text-secondary); }
.vd-st-txt-parado { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.vd-st-txt-lento { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.vd-st-txt-ritmo { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
body.theme-light .vd-st-txt-parado { color: #b91c1c; }
body.theme-light .vd-st-txt-lento { color: #b45309; }
body.theme-light .vd-st-txt-ritmo { color: #047857; }
.vd-esc-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* 🛡️ Escudo (pendências) */
.vd-escudo-halo { fill: none; stroke-width: 1.5; stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; animation: rdGirar 50s linear infinite reverse; }
.vd-escudo-halo.vd-ok { stroke: rgba(52, 211, 153, 0.38); }
.vd-escudo-halo.vd-atencao { stroke: rgba(245, 158, 11, 0.5); }
.vd-anel-fundo { fill: none; stroke: rgba(148, 163, 184, 0.14); stroke-width: 10; }
.vd-anel-prog { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--fim, 0); animation: vdAnelProg 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s backwards; }
.vd-pendencias .vd-centro { padding: 0 24%; }
.vd-pendencias .vd-c-num { font-size: 2rem; font-size: 8cqw; }
.vd-escudo-icone { margin-bottom: 2px; font-size: 2.4rem; font-size: 9cqw; line-height: 1; animation: vdEscudo 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards; }
.vd-check { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vd-check-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.84rem; text-align: left; }
.vd-check-item em { margin-left: auto; font-style: normal; font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
button.vd-check-item { cursor: pointer; }
button.vd-check-item:hover { background: var(--bg-glass); }
.vd-check-sinal { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 0.78rem; font-weight: 800; background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.vd-check-ok { background: rgba(16, 185, 129, 0.16); color: var(--emerald-400); animation: vdCheck 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.vd-check li:nth-child(1) .vd-check-ok { animation-delay: 0.5s; }
.vd-check li:nth-child(2) .vd-check-ok { animation-delay: 0.62s; }
.vd-check li:nth-child(3) .vd-check-ok { animation-delay: 0.74s; }
.vd-check li:nth-child(4) .vd-check-ok { animation-delay: 0.86s; }
.vd-check-alerta em { color: #fbbf24; }
body.theme-light .vd-check-ok { color: #047857; }
body.theme-light .vd-check-sinal:not(.vd-check-ok), body.theme-light .vd-check-alerta em { color: #b45309; }

/* Celular: o arrastar para o lado é da janela (troca de quadro), não do navegador (voltar de página) */
.vd-topo, .vd-corpo, .vd-rodape { touch-action: pan-y; }
html.vd-sem-gesto, html.vd-sem-gesto body { overscroll-behavior-x: none; }

@keyframes vdFundo { from { opacity: 0; } }
@keyframes vdEntrar { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes vdSubir { from { transform: translateY(100%); } }
@keyframes vdTroca { from { opacity: 0; transform: translateY(8px); } }
@keyframes vdVarrer { to { stroke-dashoffset: 0; } }
@keyframes vdEncher { from { transform: translateY(300px); } }
@keyframes vdOnda { to { transform: translateX(-300px); } }
@keyframes vdGota { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(var(--sobe, -120px)); opacity: 0; } }
@keyframes vdFlutuar { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes vdBrotar { from { transform: scale(0); opacity: 0; } }
@keyframes vdAlarme { 0%, 100% { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); } 50% { filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.8)); } }
@keyframes vdPulsar { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes vdAnelProg { from { stroke-dashoffset: 100; } }
@keyframes vdEscudo { from { transform: scale(0.3); opacity: 0; } }
@keyframes vdCheck { from { transform: scale(0); } }

/* Tablet: gráfico em cima, lista embaixo em duas colunas */
@media (max-width: 1023px) {
  .vd-caixa { width: min(760px, 100%); }
  .vd-corpo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vd-visual { max-width: 380px; }
  .vd-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding-top: 0; }
  .vd-lado > .vd-kpis, .vd-lado > .vd-largo, .vd-lado > .vd-legenda-st, .vd-lado > .vd-vazio { grid-column: 1 / -1; }
}
/* Celular: folha que sobe de baixo, ocupando a tela */
@media (max-width: 640px) {
  .vd-modal { padding: 0; align-items: flex-end; }
  .vd-caixa { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 22px 22px 0 0; border-bottom: 0; animation: vdSubir 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .vd-caixa::before { content: ""; display: block; flex: none; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 99px; background: rgba(148, 163, 184, 0.35); }
  .vd-topo { gap: 10px; padding: 8px 12px 8px 16px; }
  .vd-icone { width: 38px; height: 38px; border-radius: 12px; font-size: 1.15rem; }
  .vd-titulos h2 { font-size: 1.1rem; }
  .vd-abas { padding: 0 16px 10px; }
  .vd-corpo { gap: 14px; padding: 2px 16px 14px; }
  .vd-visual { max-width: 310px; }
  .vd-lado { grid-template-columns: minmax(0, 1fr); }
  .vd-rodape { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .vd-rodape .vd-botao { flex: 1 1 auto; }
  .vd-dica { flex-basis: 100%; }
  .vd-kpis b { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-modal, .vd-modal * { animation: none !important; transition: none !important; }
  .vd-varre { stroke-dashoffset: 0; }
}


/* Relatório de impressão do Fechamento (ExportUtils.imprimirRelatorioGeral): só aparece no papel/PDF */
#relatorioImpressao { display: none; }
@media print {
  body.imprimindo-relatorio { background: #fff !important; }
  body.imprimindo-relatorio > *:not(#relatorioImpressao) { display: none !important; }
  body.imprimindo-relatorio #relatorioImpressao { display: block !important; }
  #relatorioImpressao .ri { color: #0f172a; font-family: 'Segoe UI', Arial, sans-serif; font-size: 10pt; }
  #relatorioImpressao h1 { font-size: 17pt; margin: 0 0 2pt; color: #065f46; }
  #relatorioImpressao h2 { font-size: 12.5pt; margin: 14pt 0 5pt; color: #065f46; border-bottom: 1.5pt solid #10b981; padding-bottom: 2pt; }
  #relatorioImpressao h3 { font-size: 11pt; margin: 10pt 0 4pt; }
  #relatorioImpressao p { margin: 0; color: #475569; }
  #relatorioImpressao .ri-resumo { display: flex; gap: 6pt; margin: 10pt 0 4pt; }
  #relatorioImpressao .ri-resumo div { flex: 1; border: 1pt solid #cbd5e1; border-radius: 6pt; padding: 6pt 8pt; }
  #relatorioImpressao .ri-resumo span { display: block; font-size: 8.5pt; color: #64748b; text-transform: uppercase; }
  #relatorioImpressao .ri-resumo b { font-size: 12.5pt; }
  #relatorioImpressao .ri-resumo .destaque { border-color: #f59e0b; background: #fffbeb; }
  #relatorioImpressao table { width: 100%; border-collapse: collapse; margin-top: 3pt; }
  #relatorioImpressao th, #relatorioImpressao td { border: 0.6pt solid #cbd5e1; padding: 2.5pt 5pt; text-align: left; vertical-align: top; }
  #relatorioImpressao th { background: #ecfdf5; font-size: 9pt; }
  #relatorioImpressao td.n { text-align: right; white-space: nowrap; }
  #relatorioImpressao td.pq { font-size: 8.5pt; color: #475569; }
  #relatorioImpressao tfoot td { background: #f1f5f9; font-weight: 700; }
  #relatorioImpressao tr, #relatorioImpressao .ri-mes { break-inside: avoid; }
  #relatorioImpressao .ri-rodape { margin-top: 12pt; font-size: 8.5pt; color: #64748b; border-top: 0.6pt solid #cbd5e1; padding-top: 4pt; }
}

/* ==========================================
   CONFLITO ENTRE APARELHOS (planilha editada à mão aqui mudou em outro aparelho)
   ========================================== */
.modal-conflito { max-width: 980px; }
.modal-conflito-body { padding: 1rem 1.25rem; overflow: auto; }
.modal-conflito-body p { margin: 0 0 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.conflito-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.conflito-colunas h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--text-secondary); }
.conflito-colunas pre { margin: 0; max-height: 38vh; overflow: auto; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.25); font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.srv-dot.srv-conflito { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); }
#srvConflito { color: #fbbf24; font-weight: 700; }
body.theme-light .conflito-colunas pre { background: rgba(15, 23, 42, 0.04); }
@media (max-width: 700px) {
  .conflito-colunas { grid-template-columns: 1fr; }
  .modal-conflito .modal-lancamento-footer { flex-wrap: wrap; }
}

/* ===================================================================
   ETAPA 5 (07/10/2026): Pix dividido entre dívidas + saldo na casa
   .cad-saldo-casa (cartão dos Cadastros), .tg-saldo (Visão Geral, fora de .tg-num), .ld-divisao (proposta de divisão
   no cartão de conferência e no Em mãos), .cart-saldos (Cartório), .bm-saldo (Ampliar), .erb-item-saldo (Fechamento)
   =================================================================== */
.cad-saldo-casa, .tg-saldo { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; color: #93c5fd; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.45); white-space: nowrap; }
.cad-saldo-casa { margin-top: 0.2rem; }
.tg-saldo { margin-left: 0.4rem; font-size: 0.66rem; vertical-align: middle; }
.bm-saldo strong, .erb-val-blue { color: #93c5fd !important; }
.ld-divisao { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.35rem 0 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); border: 1px dashed rgba(59, 130, 246, 0.55); background: rgba(59, 130, 246, 0.07); color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.ld-titulo { color: var(--text-primary); }
.ld-titulo strong { color: #93c5fd; }
.ld-opcao { display: flex; align-items: flex-start; gap: 0.45rem; cursor: pointer; }
.ld-opcao input { margin-top: 0.2rem; accent-color: var(--blue-500); flex: 0 0 auto; }
.ld-partes { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; padding-left: 1.6rem; }
.ld-parte { display: grid; grid-template-columns: auto auto; gap: 0 0.5rem; align-items: center; padding: 0.3rem 0.55rem; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid rgba(148, 163, 184, 0.25); }
.ld-parte-mes { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.ld-parte-rs { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }
.ld-parte-valor { width: 7.5rem; font: inherit; font-size: 16px; padding: 0.15rem 0.4rem; border-radius: var(--radius-md); border: 1px solid rgba(148, 163, 184, 0.4); background: transparent; color: var(--text-primary); text-align: right; }
.ld-parte small { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.68rem; }
.ld-saldo { padding-left: 1.6rem; color: var(--text-primary); }
.ld-saldo strong { color: #93c5fd; }
.ld-erro { padding-left: 1.6rem; color: #fca5a5; }
.ld-puladas { padding-left: 1.6rem; color: var(--text-muted); }
.ld-divisao.ld-tudo .ld-titulo { opacity: 0.85; }
.cart-saldos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin: 0.5rem 0 0.75rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-md); border: 1px solid rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.08); color: var(--text-secondary); font-size: 0.85rem; }
.cart-saldo-chip { display: inline-flex; gap: 0.3rem; align-items: baseline; padding: 1px 9px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid rgba(59, 130, 246, 0.45); color: var(--text-primary); white-space: nowrap; }
.cart-saldo-chip strong { color: #93c5fd; }
.cart-parte { font-size: 0.66rem; white-space: nowrap; }
body.theme-light .cad-saldo-casa, body.theme-light .tg-saldo, body.theme-light .cart-saldo-chip strong, body.theme-light .ld-titulo strong, body.theme-light .ld-saldo strong, body.theme-light .bm-saldo strong, body.theme-light .erb-val-blue { color: #1d4ed8 !important; }
body.theme-light .ld-erro { color: #b91c1c; }
@media (max-width: 700px) {
  .ld-partes { padding-left: 0; }
  .ld-saldo, .ld-erro, .ld-puladas { padding-left: 0; }
  .ld-parte { width: 100%; grid-template-columns: 1fr auto; }
  .ld-parte-valor { width: 6.5rem; }
}

/* ===================================================================
   ETAPA 6 (07/10/2026): 📦 Mercadorias — a dívida nasce da mercadoria; custo do fornecedor só no app
   =================================================================== */
.mc-topo { margin-bottom: 0.6rem; }
.mc-meses { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mc-meses .cad-acoes-mes { margin-left: auto; }
.mc-secao { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 14px); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.mc-secao h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 0.7rem; font-size: 1rem; color: var(--text-primary); }
.mc-secao h3 > span { font-weight: 500; font-size: 0.8rem; color: var(--text-muted); }
.mc-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mc-tabela { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mc-tabela th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.mc-tabela td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.12); vertical-align: top; color: var(--text-secondary); }
.mc-tabela tfoot td { border-top: 1px solid var(--border-color); border-bottom: 0; color: var(--text-primary); font-weight: 700; }
.mc-tabela td strong { color: var(--text-primary); }
.mc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-emoji { font-size: 1.1rem; }
.mc-ok { color: var(--emerald-400); font-weight: 700; }
.mc-dif { color: #fbbf24; font-weight: 700; }
.mc-lucro { color: var(--emerald-400); }
.mc-prejuizo { color: #fca5a5; }
.mc-parcial { color: #fbbf24; }
.mc-casa { color: #93c5fd; }
.mc-avisos { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: #fde68a; }
.mc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem 0.8rem; }
.mc-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.mc-form select, .mc-form input, .mc-tabela input, .mc-tabela select { font: inherit; font-size: 16px; padding: 0.45rem 0.6rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-glass, rgba(255, 255, 255, 0.04)); color: var(--text-primary); min-width: 0; width: 100%; }
.mc-tabela input.mc-mini { width: 3.2rem; text-align: center; }
.mc-tabela input.mc-custo, .mc-tabela input.mc-preco { width: 8rem; text-align: right; }
.mc-previa { margin-top: 0.8rem; }
.mc-previa .lp-np { margin-bottom: 0.5rem; }
.mc-linha-casa { border-left: 3px solid #3b82f6; }
.mc-acoes { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.bm-merc-n { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bm-merc-c { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.bm-merc-btn { margin-top: 0.5rem; }
/* Novo mês: coluna do custo do fornecedor (opcional) ao lado do valor */
.nm-item { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) 4rem; }
@media (max-width: 640px) {
  .nm-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nm-item .nm-merc { grid-column: 1 / -1; }
  .nm-item .nm-prev { grid-column: 1 / -1; }
  .mc-tabela { font-size: 0.8rem; }
  .mc-tabela input.mc-custo, .mc-tabela input.mc-preco { width: 6.5rem; }
}
body.theme-light .mc-dif, body.theme-light .mc-parcial { color: #b45309; }
body.theme-light .mc-prejuizo { color: #b91c1c; }
body.theme-light .mc-casa { color: #1d4ed8; }
body.theme-light .mc-avisos { color: #92400e; }


/* ========== 💼 Chefe (Etapa 7) ========== */
.ch-topo { margin-bottom: 0.6rem; }
.ch-meses { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ch-meses .cad-acoes-mes { margin-left: auto; }
.ch-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.ch-num { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ch-num > span { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ch-num > strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ch-num > small { font-size: 0.74rem; color: var(--text-secondary); }
.ch-num-salario { border-color: rgba(251, 191, 36, 0.45); }
.ch-num-salario > strong { color: #fbbf24; }
.ch-falta { color: #fbbf24; font-weight: 700; }
.ch-amais { color: #93c5fd; font-weight: 700; }
.ch-ok { color: var(--emerald-400); font-weight: 700; }
.ch-regra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.7rem; font-size: 0.86rem; }
.ch-regra label { display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); flex-wrap: wrap; }
.ch-regra input.ch-pct { width: 3.6rem; text-align: right; }
.ch-regra select, .ch-regra input, .ch-definir input, .ch-exp-gerente select { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.55rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); }
.ch-proposta { flex: 1 1 260px; color: var(--text-secondary); }
.ch-proposta strong { color: var(--text-primary); font-size: 1rem; }
.ch-definir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.ch-definir label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; min-width: 200px; }
.ch-definir input { font-size: 1.05rem; font-weight: 700; text-align: right; }
.ch-abatimento { margin-top: 0.7rem; font-size: 0.9rem; color: var(--text-secondary); }
.ch-abatimento strong { color: var(--text-primary); }
.ch-desc { font-family: var(--font-mono); font-size: 0.78rem; background: rgba(148, 163, 184, 0.12); padding: 0.1rem 0.35rem; border-radius: 6px; }
.ch-pag-destino td { color: var(--text-secondary); font-weight: 600; }
.ch-pag-total td { border-top: 1px solid var(--border-color); }
.ch-onde { display: flex; flex-direction: column; gap: 0.55rem; }
.ch-onde-rot { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.88rem; }
.ch-onde-rot span { flex: 1 1 auto; color: var(--text-secondary); }
.ch-onde-rot strong { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-onde-rot small { color: var(--text-muted); min-width: 3.2rem; text-align: right; }
.ch-onde-barra { height: 7px; border-radius: 4px; background: rgba(148, 163, 184, 0.16); overflow: hidden; }
.ch-onde-barra i { display: block; height: 100%; border-radius: 4px; background: var(--emerald-400); transition: width 0.5s ease; }
.ch-onde-item[data-grupo="em-maos"] .ch-onde-barra i { background: #60a5fa; }
.ch-onde-item[data-grupo="saida"] .ch-onde-barra i { background: #f87171; }
.ch-onde-item[data-grupo="velho"] .ch-onde-barra i { background: #fbbf24; }
.ch-onde-item[data-grupo="mercadoria"] .ch-onde-barra i { background: #c084fc; }
.ch-onde-item[data-grupo="outro"] .ch-onde-barra i, .ch-onde-item[data-grupo="sem-destino"] .ch-onde-barra i { background: #94a3b8; }
.ch-saldos { margin: 0; }
.ch-saldo { display: inline-flex; gap: 0.35rem; align-items: baseline; padding: 0.3rem 0.6rem; border-radius: 999px; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.35); font-size: 0.84rem; color: #93c5fd; }
.ch-saldo strong { color: var(--text-primary); }
.ch-exp-acoes, .ch-exp-gerente { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.ch-exp-gerente { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--border-color); }
.ch-exp-gerente label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; min-width: 220px; }
/* 🧾 Planilha do velho (12/10/2026): controle por corte de data */
.ch-secao-controle { border-color: rgba(251, 191, 36, 0.35); }
.ch-ctl-chips { margin-bottom: 0.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ch-ctl-chips .cad-acoes-mes { margin-left: auto; }
.ch-ctl-novo, .ch-ctl-cab, .ch-ctl-caixa-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; margin-bottom: 0.8rem; font-size: 0.86rem; color: var(--text-secondary); }
.ch-ctl-novo { padding: 0.7rem 0.8rem; border: 1px dashed var(--border-color); border-radius: 10px; }
.ch-ctl-novo[hidden] { display: none; }
.ch-ctl-novo label, .ch-ctl-cab label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.ch-ctl-novo input, .ch-ctl-novo select, .ch-ctl-cab input, .ch-ctl-caixa-form input, .ch-ctl-definir input { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.55rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); min-width: 0; }
.ch-ctl-cab input { min-width: 240px; font-weight: 700; }
.ch-ctl-periodo { flex: 1 1 260px; }
.ch-ctl-periodo strong { color: var(--text-primary); }
.ch-ctl-caixa { background: rgba(16, 185, 129, 0.06); }
.ch-ctl-ok { text-align: center; white-space: nowrap; }
.ch-ctl-origem td { color: var(--text-secondary); font-weight: 600; }
.ch-ctl-total td { border-top: 1px solid var(--border-color); font-weight: 700; }
.ch-ctl-titulo-origem td { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); padding-top: 0.6rem; }
.ch-adef { color: #fbbf24; font-style: normal; font-weight: 700; }
.ch-ctl-fecha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem 1rem; align-items: start; margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.3); }
.ch-ctl-fecha > div > span { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.2rem; }
.ch-ctl-fecha > div > strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); }
.ch-ctl-definir { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ch-ctl-definir input { width: 190px; font-weight: 700; text-align: right; }
.ch-ctl-teto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; font-size: 0.86rem; color: var(--text-secondary); padding-top: 0.5rem; border-top: 1px dashed rgba(251, 191, 36, 0.35); }
.ch-ctl-teto strong { color: var(--text-primary); }
.ch-ctl-mesteto { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.ch-ctl-mesteto select { font: inherit; font-size: 0.85rem; text-transform: none; padding: 0.3rem 0.45rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); }
.ch-ctl-caixa-form strong { flex: 0 0 100%; font-size: 0.84rem; color: var(--text-primary); }
.ch-ctl-caixa-form input#chGastoValor { width: 110px; text-align: right; }
.ch-ctl-caixa-form input#chGastoDesc { min-width: 180px; }
.ch-ctl-caixa-form input#chGastoOrigem { width: 130px; }
.ch-ficou-saiu { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--border-color); font-size: 0.86rem; color: var(--text-secondary); }
.ch-ficou-saiu strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ch-ficou-saiu small { color: var(--text-muted); }
/* 📌 pré-lançamentos (12/10/2026) */
.pre-lanc-box { margin: 0 0 0.8rem; }
.tag-saldo-comp { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: rgba(56, 189, 248, 0.12); color: #7dd3fc; }
body.theme-light .tag-saldo-comp { color: #0369a1; }
/* 📌 Pré-lançamentos na barra de cima (12/10/2026) */
.pre-topo { position: relative; }
.btn-pre-topo { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.btn-pre-topo.pre-topo-off { opacity: 0.7; }
.pre-topo-badge { min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: #f59e0b; color: #1c1917; font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pre-topo-badge[hidden] { display: none; }
.pre-topo-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 900; width: min(440px, 92vw); padding: 0.75rem; border-radius: 12px; background: var(--bg-card, #0f1b2d); border: 1px solid var(--border-color); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.pre-topo-menu[hidden] { display: none; }
.pre-topo-menu .pre-lanc-box { margin: 0; }
body.theme-light .pre-topo-menu { background: #ffffff; }
/* 📝 Para cadastrar com a sugestão de cada nome (12/10/2026) */
.dest-pend-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.dest-pend-todas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.4rem 0 0.8rem; }
.dest-pend-todas small { color: var(--text-muted); }
.dest-sug { margin-top: 0.35rem; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; }
.dest-sug small { color: var(--text-muted); }
.dest-sug-conferir, .dest-sug-corrigir { color: #fbbf24; }
body.theme-light .dest-sug-conferir, body.theme-light .dest-sug-corrigir { color: #b45309; }
.dest-comps { margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-secondary); }
.dest-comps summary { cursor: pointer; }
.dest-comps ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.dest-comps li { margin: 0.15rem 0; }
.pre-lanc-pilula { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: rgba(251, 191, 36, 0.08); border: 1px dashed rgba(251, 191, 36, 0.4); font-size: 0.86rem; color: var(--text-secondary); }
.pre-lanc-pilula strong { color: var(--text-primary); }
.pre-lanc-pilula small { flex: 0 0 100%; }
.pre-lanc-chave { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem 0.2rem 0.3rem; border-radius: 999px; border: 1px solid rgba(101, 229, 181, 0.55); background: transparent; color: var(--text-primary); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.pre-lanc-chave .voz-orbe-ia-chave { position: relative; display: inline-block; width: 28px; height: 16px; border-radius: 999px; background: #65e5b5; }
.pre-lanc-chave .voz-orbe-ia-chave i { position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #0b1a2c; transition: left 0.2s ease; }
.pre-lanc-off .pre-lanc-chave { border-color: rgba(148, 163, 184, 0.5); color: var(--text-muted); }
.pre-lanc-off .pre-lanc-chave .voz-orbe-ia-chave { background: #64748b; }
.pre-lanc-off .pre-lanc-chave .voz-orbe-ia-chave i { left: 2px; background: #e2e8f0; }
.pre-lanc-off > span { opacity: 0.6; }
.pre-lanc-oque { flex: 0 0 100%; font-size: 0.82rem; color: var(--text-secondary); }
.pre-lanc-oque summary { cursor: pointer; color: var(--text-primary); font-weight: 600; }
.pre-lanc-oque p { margin: 0.35rem 0 0; }
.ident-pre { margin-top: 0.35rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(251, 191, 36, 0.09); border: 1px solid rgba(251, 191, 36, 0.35); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.ident-mesma-linha { margin-top: 0.35rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.35); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.ident-mesma-linha code { font-size: 0.78rem; }
.ident-pre-ja { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.4); }
.ident-pre-onde { flex: 0 0 100%; font-size: 0.84rem; }
.ident-pre-aviso { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.4); }
.pre-tabela tr.pre-usado td { opacity: 0.6; }
.pre-tabela tr.pre-atencao td { background: rgba(248, 113, 113, 0.06); }
/* 🙋 memória de nomes no cartão do comprovante (12/10/2026) */
.ident-confirmar, .ident-escolher { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.35rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(251, 191, 36, 0.09); border: 1px solid rgba(251, 191, 36, 0.35); }
.ident-escolher .ident-opcao-atual { outline: 2px solid var(--emerald-400); }
/* 🌳 Árvore do Caixa Peste (12/10/2026) */
.dest-arvore { margin: 0 0 1.2rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); }
.dest-arvore h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 1rem; }
.dest-arvore h3 > span { font-weight: 500; font-size: 0.8rem; color: var(--text-muted); }
.arv-raiz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.4); margin: 0.6rem 0 0.4rem; }
.arv-raiz > span { font-weight: 700; color: var(--text-primary); }
.arv-raiz > strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-primary); }
.arv-raiz > small { flex: 0 0 100%; color: var(--text-secondary); }
.arv-galhos { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid rgba(16, 185, 129, 0.35); display: flex; flex-direction: column; gap: 0.55rem; }
.arv-galho { position: relative; padding-left: 0.6rem; }
.arv-galho::before { content: ''; position: absolute; left: -1.1rem; top: 0.75rem; width: 1.3rem; border-top: 2px solid rgba(16, 185, 129, 0.35); }
.arv-linha { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.9rem; }
.arv-nome { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); }
.arv-tipo { color: var(--text-muted); margin-left: 0.3rem; }
.arv-valor { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arv-pct { color: var(--text-muted); min-width: 3rem; text-align: right; }
.arv-barra { height: 6px; border-radius: 4px; background: rgba(148, 163, 184, 0.16); overflow: hidden; margin: 0.2rem 0; }
.arv-barra i { display: block; height: 100%; border-radius: 4px; background: #94a3b8; }
.arv-cx .arv-barra i { background: var(--emerald-400, #34d399); }
.arv-maos .arv-barra i { background: #60a5fa; }
.arv-direto .arv-barra i { background: #f59e0b; }
.arv-conta .arv-barra i { background: #2dd4bf; }
.arv-det { color: var(--text-muted); font-size: 0.76rem; }
.arv-sub { list-style: none; margin: 0.35rem 0 0; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgba(251, 191, 36, 0.07); border: 1px dashed rgba(251, 191, 36, 0.4); font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.2rem; }
.arv-sub li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline; color: var(--text-secondary); }
.arv-sub li > span { flex: 1 1 auto; }
.arv-sub li > strong { color: var(--text-primary); }
.arv-fica { border-top: 1px solid var(--border-color); padding-top: 0.2rem; }
@media (max-width: 768px) { .arv-linha { flex-wrap: wrap; } .arv-tipo { display: block; margin-left: 0; } }
/* 🎯 Destinos: ficou × saiu */
.dest-ficou-saiu { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.2rem 0 1rem; font-size: 0.86rem; color: var(--text-secondary); }
.dest-ficou-saiu strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dest-ficou-saiu small { color: var(--text-muted); }
body.theme-light .ch-adef { color: #b45309; }
body.theme-light .ch-ctl-caixa { background: rgba(16, 185, 129, 0.09); }
/* ✍️ Gasto do velho como frase (12/10/2026): igual ao Bloco de Notas, o app tira valor e data; em mãos × Pix */
/* 🔎 De onde vem o valor (12/10/2026): o chip 📲 Pix / 💵 em mãos abre o detalhe */
.ch-forma-btn { border: 0; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700; }
.ch-forma-btn:hover, .ch-forma-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ch-det-pop { position: absolute; z-index: 980; width: 420px; max-width: calc(100vw - 24px); padding: 0.7rem 0.8rem; border-radius: 12px; background: #0f1b2d; border: 1px solid var(--border-color); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); font-size: 0.84rem; line-height: 1.5; color: var(--text-secondary); }
.ch-det-pop[hidden] { display: none; }
.ch-det-pop { max-height: calc(100vh - 24px); overflow: auto; }
body.theme-light .ch-det-pop { background: #ffffff; }
.ch-det-cab { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.ch-det-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; }
.ch-det-sec { padding: 0.4rem 0; border-top: 1px solid var(--border-color); }
.ch-det-sec small { display: block; color: var(--text-muted); }
.ch-det-rot { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem; }
.ch-det-linha, .ch-det-id { display: block; font-size: 0.74rem; word-break: break-all; margin-top: 0.15rem; }
.ch-det-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.ch-det-aviso { color: #fbbf24; }
.ch-det-alerta { color: #fbbf24; }
body.theme-light .ch-det-aviso, body.theme-light .ch-det-alerta { color: #b45309; }
.ch-det-parte { margin-top: 0.2rem; color: #7dd3fc; }
body.theme-light .ch-det-parte { color: #0369a1; }
.ch-fora-lista { margin: 0.6rem 0; padding: 0.45rem 0.7rem; border: 1px dashed var(--border-color); border-radius: 10px; font-size: 0.82rem; }
.ch-fora-lista > div { margin-top: 0.2rem; }
/* Bloco de Notas do velho (13/10/2026) */
.ch-notas { margin-top: 0.9rem; border: 1px solid var(--border-color); border-radius: 12px; padding: 0.6rem 0.8rem; }
.ch-notas > summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
.ch-notas > summary small { font-weight: 400; color: var(--text-muted); }
.ch-notas-texto { width: 100%; box-sizing: border-box; margin-top: 0.5rem; font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; line-height: 1.45; background: var(--bg-input, rgba(0,0,0,0.2)); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.5rem; resize: vertical; }
.ch-notas-res { margin-top: 0.5rem; font-size: 0.84rem; }
.ch-notas-topo { font-weight: 600; margin-bottom: 0.35rem; }
.ch-notas-lista { list-style: none; margin: 0.3rem 0; padding: 0; }
.ch-notas-lista li { padding: 0.3rem 0.4rem; border-left: 3px solid transparent; margin-bottom: 0.2rem; word-break: break-word; }
.ch-notas-lista li > div { font-size: 0.78rem; margin-top: 0.15rem; }
.ch-notas-ok { border-left-color: #34d399 !important; color: var(--text-secondary); }
.ch-notas-quase { border-left-color: #7dd3fc !important; }
.ch-notas-dif { border-left-color: #fbbf24 !important; }
.ch-notas-falta { border-left-color: #fb7185 !important; }
.ch-notas-sobra { border-left-color: #a78bfa !important; }
.ch-notas-n { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); margin-right: 0.25rem; }
.ch-notas-origens { margin: 0.4rem 0; }
.ch-notas-tdif td { color: #fbbf24; }
body.theme-light .ch-notas-tdif td { color: #b45309; }
/* Detalhe do comprovante da fila (13/10/2026) */
.item-fila-main { cursor: help; }
.fila-det-pop { width: 440px; }
.fila-det-fala { margin-top: 0.15rem; }
.fila-det-erro { color: #fb7185; }
body.theme-light .fila-det-erro { color: #be123c; }
.fila-det-conferir { margin-bottom: 0.3rem; font-weight: 600; }
.fila-det-dividas { margin: 0.15rem 0 0.2rem 1.2rem; padding: 0; font-size: 0.78rem; }
.fila-det-dividas li.escolhida { font-weight: 700; color: var(--text-primary); }
html.modo-celular .ch-det-pop { position: fixed; left: 8px !important; right: 8px; top: 104px !important; bottom: auto; width: auto !important; max-height: calc(100vh - 220px); overflow: auto; }
/* ✏️ Planilha do velho editável na própria linha (12/10/2026) */
.ch-tabela-ctl .ch-ed, .ch-tabela-ctl code.ch-desc { cursor: text; border-radius: 4px; }
.ch-tabela-ctl tr:hover .ch-ed, .ch-tabela-ctl tr:hover code.ch-desc { outline: 1px dashed rgba(251, 191, 36, 0.6); outline-offset: 2px; }
.ch-ed-lapis { opacity: 0; margin-left: 0.3rem; transition: opacity 0.15s; }
.ch-tabela-ctl tr:hover .ch-ed-lapis, .ch-ed-lapis:focus-visible { opacity: 1; }
html.modo-celular .ch-ed-lapis { opacity: 1; }
.ch-ctl-editando td { background: rgba(251, 191, 36, 0.08); }
.ch-ctl-editando input { font: inherit; font-size: 0.86rem; padding: 0.3rem 0.4rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); width: 100%; min-width: 0; margin: 0.1rem 0; }
.ch-ed-ok { color: var(--emerald-400, #34d399); font-weight: 800; }
.ch-ed-x { color: #f87171; font-weight: 800; margin-left: 0.25rem; }
.ch-ref { margin-top: 0.3rem; font-size: 0.76rem; color: #fbbf24; line-height: 1.45; }
body.theme-light .ch-ref { color: #b45309; }
.ch-frase { margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px dashed rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.04); }
.ch-frase-rot { display: block; font-weight: 700; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.ch-frase-rot small { font-weight: 400; color: var(--text-muted); margin-left: 0.3rem; }
.ch-frase-linha { display: flex; gap: 0.5rem; align-items: center; }
.ch-frase-linha input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.95rem; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); }
.correcao-juntar { display: none; margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.07); font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); }
.correcao-juntar .btn-micro-action { margin: 0.15rem 0.2rem 0.15rem 0; }
.ch-frase-linha .btn-card-action { flex: 0 0 auto; width: auto; white-space: nowrap; }
.ch-frase-previa { margin-top: 0.45rem; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; }
.ch-frase-ajustar { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-muted); }
.ch-frase-ajustar summary { cursor: pointer; }
.ch-frase-ajustar .ch-ctl-caixa-form { margin: 0.5rem 0 0; }
.ch-frase-ajustar select { font: inherit; font-size: 0.88rem; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); }
.ch-forma { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; white-space: nowrap; }
.ch-forma-maos { background: rgba(16, 185, 129, 0.16); color: #34d399; }
.ch-forma-pix { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; }
body.theme-light .ch-forma-maos { color: #047857; }
body.theme-light .ch-forma-pix { color: #0369a1; }
/* 🧾 Fechamento do velho nasce com a mercadoria (12/10/2026): a faixa de proposta e a janela */
.ch-ctl-proposta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.07); font-size: 0.88rem; color: var(--text-secondary); }
.ch-ctl-proposta > div { flex: 0 0 100%; color: var(--text-primary); }
.ch-ctl-proposta small { flex: 0 0 100%; }
.ch-ctl-proposta input, .ch-prop-corpo input { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.55rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, rgba(255,255,255,0.04)); color: var(--text-primary); }
.ch-prop-corpo { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
.ch-prop-corpo p { flex: 0 0 100%; margin: 0 0 0.3rem; color: var(--text-secondary); }
.ch-mais { margin-top: 1rem; }
.ch-mais > summary { cursor: pointer; list-style: none; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid var(--border-color); font-weight: 700; color: var(--text-primary); }
.ch-mais > summary::-webkit-details-marker { display: none; }
.ch-mais > summary::before { content: '▸ '; color: var(--text-muted); }
.ch-mais[open] > summary::before { content: '▾ '; }
.ch-mais > summary small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 0.15rem; }
.ch-mais[open] > summary { margin-bottom: 0.8rem; }
@media (max-width: 768px) {
  .ch-ctl-cab input { min-width: 0; width: 100%; }
  .ch-ctl-caixa-form input { flex: 1 1 45%; }
}
.export-card-chefe { border-color: rgba(251, 191, 36, 0.35); }
.export-card-chefe:hover { border-color: #fbbf24 !important; box-shadow: 0 8px 30px rgba(251, 191, 36, 0.12); }
body.theme-light .ch-num-salario > strong, body.theme-light .ch-falta { color: #b45309; }
body.theme-light .ch-amais, body.theme-light .ch-saldo { color: #1d4ed8; }
body.theme-light .ch-saldo { background: rgba(59, 130, 246, 0.08); }
@media (max-width: 768px) {
  .ch-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-num > strong { font-size: 1rem; }
  .ch-definir label, .ch-exp-gerente label { min-width: 100%; }
  .ch-definir input, .ch-exp-gerente select { font-size: 16px; }
  .ch-regra input.ch-pct { font-size: 16px; }
}

/* Etapa 8: janelas dos cartões no tema claro (o tanque e as bolhas eram fixos do escuro) */
body.theme-light .vd-tanque-fundo { fill: #ccfbf1; }
body.theme-light .vd-tanque-aro { stroke: rgba(5, 150, 105, 0.5); filter: drop-shadow(0 0 8px rgba(5, 150, 105, 0.25)); }
body.theme-light .vd-tanque-orbita { stroke: rgba(5, 150, 105, 0.35); }
body.theme-light .vd-c-gigante { color: #ffffff; text-shadow: 0 2px 10px rgba(6, 95, 70, 0.75); }
body.theme-light .vd-bolhas-campo { fill: rgba(15, 23, 42, 0.03); stroke: rgba(15, 23, 42, 0.14); }
body.theme-light .vd-bolha-esfera { filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.3)); }

/* Etapa 9: tema claro de verdade nos pontos que ficavam escuros */
body.theme-light .nav-tab-btn:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); }
body.theme-light .mobile-bottom-nav { background: rgba(255, 255, 255, 0.96); }
body.theme-light .mlb-input { background: #ffffff; color: #0f172a; }
body.theme-light .metric-card.card-receber .metric-value { color: #b45309; }

/* Etapa 10: aviso da prova real na janela do Resumo para o chefe */
.rc-prova-aviso { margin: 0 0 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); border: 1px solid rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); color: #fbbf24; font-size: 0.82rem; line-height: 1.5; }
body.theme-light .rc-prova-aviso { color: #92400e; background: rgba(251, 191, 36, 0.12); }

/* Cartório — ⚡ lançado sozinho pelo leitor (Etapa 11): chip na coluna Comprovante, ↩ por linha e o filtro próprio
   (fora das .filter-pills; os 4 cartões do topo não mudam) */
.cart-chip-auto { display: inline-block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 800; padding: 1px 7px; border-radius: var(--radius-full); border: 1px solid rgba(250, 204, 21, 0.55); background: rgba(250, 204, 21, 0.12); color: #fde68a; white-space: nowrap; }
.cart-sozinho-btn { font: inherit; font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: var(--radius-full); border: 1px solid rgba(250, 204, 21, 0.45); background: transparent; color: #fde68a; cursor: pointer; white-space: nowrap; }
.cart-sozinho-btn.active { background: rgba(250, 204, 21, 0.18); border-color: #fbbf24; }
.cart-desfazer-auto { border-color: rgba(250, 204, 21, 0.5) !important; color: #fde68a !important; }
body.theme-light .cart-chip-auto, body.theme-light .cart-sozinho-btn, body.theme-light .cart-desfazer-auto { color: #92400e !important; border-color: rgba(217, 119, 6, 0.55); }
body.theme-light .cart-sozinho-btn.active, body.theme-light .cart-chip-auto { background: rgba(250, 204, 21, 0.18); }

/* ==========================================================================
   FOTOS DO COMPROVANTE, LINHA DO BLOCO DE NOTAS E LADO A LADO (Etapa 13, 07/10/2026)
   ========================================================================== */
.modal-body-preview .fotos-comp-pdf { width: 100%; height: 70vh; border: 0; border-radius: var(--radius-md); background: #fff; }
.fotos-comp-pdf-link { display: inline-block; margin: 8px 0; color: var(--emerald-400); font-weight: 600; }
.fotos-comp-legenda { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.fotos-comp-legenda:empty, .fotos-comp-lista:empty { display: none; }
.fotos-comp-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.fotos-comp-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding: 6px; border-radius: var(--radius-md);
  border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-size: 0.7rem; }
.fotos-comp-btn img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.fotos-comp-btn .fotos-comp-ic { font-size: 2rem; line-height: 80px; }
.fotos-comp-btn.atual { border-color: var(--emerald-500); box-shadow: 0 0 0 2px var(--emerald-glow); color: var(--text-primary); }
.fotos-comp-tirar { margin-left: 8px; padding: 2px 10px; border-radius: var(--radius-full); border: 1px solid var(--rose-500); background: transparent; color: var(--rose-500); cursor: pointer; font-size: 0.75rem; }
.np-fotos-linha { border: 0; background: rgba(16, 185, 129, 0.15); color: var(--emerald-400); cursor: pointer; border-radius: var(--radius-sm); font: inherit; padding: 0 8px; }
.np-fotos-linha.sem-foto { background: rgba(245, 158, 11, 0.12); color: var(--gold-500); }
.np-fotos-linha[hidden] { display: none; }

.lal-card { max-width: 1000px; width: 96vw; }
.lal-corpo { padding: 14px 18px 18px; overflow-y: auto; max-height: 82vh; }
.lal-resumo { padding: 10px 14px; border-radius: var(--radius-md); font-weight: 600; margin-bottom: 12px; }
.lal-resumo-ok { background: rgba(16, 185, 129, 0.14); color: var(--emerald-400); border: 1px solid var(--border-highlight); }
.lal-resumo-diverge { background: rgba(244, 63, 94, 0.16); color: #fecdd3; border: 2px solid var(--rose-500); animation: lal-alerta 1.2s ease-in-out infinite; }
.lal-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lal-col { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px; background: var(--bg-secondary); min-width: 0; }
.lal-col h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-primary); }
.lal-foto-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.lal-img { display: block; width: 100%; max-height: 46vh; object-fit: contain; border-radius: var(--radius-sm); background: #fff; }
.lal-semfoto, .lal-pdf { padding: 28px 10px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: var(--radius-sm); }
.lal-linha { display: block; margin-top: 8px; padding: 6px 8px; font-family: var(--font-mono); font-size: 0.78rem; background: rgba(0, 0, 0, 0.25); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.lal-quem { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 0.75rem; overflow-wrap: anywhere; }
.lal-tabela-wrap { overflow-x: auto; margin-top: 12px; }
.lal-tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.lal-tabela th, .lal-tabela td { padding: 7px 8px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.lal-tabela thead th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; }
.lal-igual td.lal-sit { color: var(--emerald-400); font-weight: 600; white-space: nowrap; }
.lal-falta { color: var(--text-muted); }
.lal-diverge { background: rgba(244, 63, 94, 0.18); }
.lal-diverge th, .lal-diverge td { color: #fecdd3; }
.lal-diverge td.lal-sit { color: #fff; font-weight: 800; white-space: nowrap; }
.lal-diverge:not(.lal-detalhe) { box-shadow: inset 4px 0 0 var(--rose-500); animation: lal-alerta 1.2s ease-in-out infinite; }
.lal-detalhe td { font-size: 0.8rem; font-style: italic; }
.lal-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.lal-acao { padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-weight: 600; }
.lal-acao.lal-principal { background: var(--emerald-600); border-color: var(--emerald-500); color: #fff; }
.lal-acao.lal-perigo { border-color: var(--rose-500); color: var(--rose-500); }
@keyframes lal-alerta { 0%, 100% { background-color: rgba(244, 63, 94, 0.18); } 50% { background-color: rgba(244, 63, 94, 0.42); } }
@media (max-width: 700px) {
  .lal-colunas { grid-template-columns: minmax(0, 1fr); }
  .lal-corpo { padding: 10px; }
  .lal-img { max-height: 34vh; }
  .fotos-comp-btn { width: 76px; }
  .fotos-comp-btn img { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .lal-resumo-diverge, .lal-diverge:not(.lal-detalhe) { animation: none; } }
body.theme-light .lal-col { background: #f8fafc; }
body.theme-light .lal-linha { background: #eef2f7; color: #0f172a; }
body.theme-light .lal-resumo-diverge { color: #9f1239; }
body.theme-light .lal-diverge th, body.theme-light .lal-diverge td { color: #881337; }
body.theme-light .lal-diverge td.lal-sit { color: #be123c; }
body.theme-light .fotos-comp-btn { background: #f1f5f9; color: #334155; }
@media print { #modalLadoALado, .np-fotos-linha { display: none !important; } }

/* Conferência do lote do gerente e "📅 O dia" no Cartório (Etapa 13, 07/10/2026) */
.lote-conferir { grid-column: 1 / -1; }
.lote-conferir-rot { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.lote-conferir-rot input { width: 18px; height: 18px; accent-color: var(--gold-500); }
.lote-conferir-ajuda { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }
.conferencia-lote { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.06); }
.conferencia-lote[hidden] { display: none; }
.conf-lote-cab h4 { margin: 0 0 4px; font-size: 1rem; }
.conf-lote-cab small { color: var(--text-secondary); }
.conf-lote-ger { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; }
.conf-lote-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.conf-lote-item { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-secondary); }
.conf-lote-item.conf-ok { box-shadow: inset 4px 0 0 var(--emerald-500); }
.conf-lote-item.conf-nao { box-shadow: inset 4px 0 0 var(--rose-500); background: rgba(244, 63, 94, 0.08); }
.conf-lote-topo { font-size: 0.85rem; overflow-wrap: anywhere; }
.conf-arquivo { color: var(--text-muted); margin-left: 4px; }
.conf-incerta { color: var(--gold-500); font-size: 0.75rem; }
.conf-lote-texto { margin: 4px 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.conf-lote-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-fila-dia { padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--blue-500); background: transparent; color: var(--blue-500); cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-fila-acao.lado-a-lado, .btn-fila-acao.foto-extra { white-space: nowrap; }
.cart-dia-chip-linha { margin: 8px 0; }
.cart-dia-chip { padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--blue-500); background: rgba(59, 130, 246, 0.12); color: var(--text-primary); cursor: pointer; font-weight: 600; }
.cart-dia { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-md); border: 2px solid var(--blue-500); background: rgba(59, 130, 246, 0.06); }
.cart-dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cart-dia-cab h4 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.cart-dia-sair { padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.cart-dia-nota { margin: 6px 0; font-size: 0.8rem; color: var(--text-secondary); }
.cart-dia-veredito { margin: 8px 0; padding: 8px 10px; border-radius: var(--radius-sm); font-weight: 700; }
.cart-dia-ok { background: rgba(16, 185, 129, 0.14); color: var(--emerald-400); }
.cart-dia-nao { background: rgba(244, 63, 94, 0.16); color: #fecdd3; border: 1px solid var(--rose-500); }
.cart-dia-secao h5 { margin: 12px 0 6px; font-size: 0.85rem; color: var(--text-primary); }
.cart-dia-secao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cart-dia-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: 0.82rem; }
.cart-dia-linha.cart-dia-e-este { border-color: var(--emerald-500); }
.cart-dia-linha.cart-dia-quase { border-color: var(--gold-500); }
.cart-dia-quem { font-weight: 600; }
.cart-dia-txt { font-family: var(--font-mono); font-size: 0.78rem; overflow-wrap: anywhere; }
.cart-dia-sit { color: var(--text-secondary); }
.cart-dia-bate { color: var(--emerald-400); }
.cart-dia-bate-quase { color: var(--gold-500); }
.cart-dia-acoes { display: inline-flex; gap: 4px; margin-left: auto; }
.cart-dia-dica { padding: 6px 8px; border-radius: var(--radius-sm); background: rgba(245, 158, 11, 0.12); font-size: 0.82rem; }
body.theme-light .cart-dia-nao { color: #9f1239; }
body.theme-light .conf-lote-item, body.theme-light .cart-dia-linha { background: #f8fafc; }
@media (max-width: 700px) { .cart-dia-acoes { margin-left: 0; } .cart-dia, .conferencia-lote { padding: 10px; } }
@media print { .conferencia-lote, .cart-dia, .cart-dia-chip-linha { display: none !important; } }
/* Galeria: com várias fotos, a foto encolhe para as miniaturas caberem na tela; no celular o PDF é um botão grande */
#fotosModalLista:not(:empty) ~ #imgModalPreview { max-height: calc(90vh - 260px); }
#fotosModalLista:not(:empty) ~ .fotos-comp-pdf { height: calc(90vh - 260px); }
.fotos-comp-lista { margin: 0 0 8px; }
.fotos-comp-legenda { margin: 0 0 8px; }
.fotos-comp-pdf-link.fotos-comp-pdf-grande { display: block; padding: 18px; text-align: center; border-radius: var(--radius-md); border: 2px solid var(--emerald-500); background: rgba(16, 185, 129, 0.12); font-size: 1.05rem; }
.fotos-comp-pdf-link[hidden], .modal-body-preview .fotos-comp-pdf[hidden], #imgModalPreview[hidden] { display: none !important; }

/* Cartório: ID do Pix fora do formato (Etapa 14) — o ID inteiro em vermelho e a sugestão do conserto embaixo */
.code-id-pix.cart-id-invalido { color: #f87171; word-break: break-all; }
.cart-id-sugestao { color: #fbbf24; }
.cart-id-sugestao code { color: #34d399; word-break: break-all; }
body.theme-light .code-id-pix.cart-id-invalido { color: #b91c1c; }
body.theme-light .cart-id-sugestao { color: #92400e; }
body.theme-light .cart-id-sugestao code { color: #047857; }

/* Cartão de conferência: o app corrigiu o ID do Pix lido com tamanho errado (Etapa 14) */
.id-pix-consertado { display: block; margin-top: 0.35rem; color: #fbbf24; line-height: 1.5; }
.id-pix-consertado code { word-break: break-all; color: var(--text-secondary); }
body.theme-light .id-pix-consertado { color: #92400e; }

/* ==========================================
   MEDIDOR DE ESPAÇO DAS FOTOS (Etapa 14.3): o navegador guarda uns 5 MB por site e as fotos são quase tudo.
   Linha no Cartório (fora dos 4 cartões), linha no menu 👤 e, com 85% ou mais, um aviso que não some sozinho.
   ========================================== */
.cart-espaco { margin: 0.6rem 0 0; padding: 0.45rem 0.8rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); font-size: 0.82rem; color: var(--text-secondary); }
.cart-espaco-laranja { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); color: #fbbf24; }
.cart-espaco-vermelho { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.1); color: #fca5a5; font-weight: 700; }
body.theme-light .cart-espaco-laranja { color: #b45309; }
body.theme-light .cart-espaco-vermelho { color: #b91c1c; }
.cart-foto-nao-coube { font-size: 0.75rem; font-weight: 700; color: #fbbf24; }
body.theme-light .cart-foto-nao-coube { color: #b45309; }
.srv-espaco { font-size: 0.78rem; color: var(--text-secondary); padding: 0.2rem 0 0.3rem; }
.srv-espaco:empty { display: none; }
.srv-espaco-laranja { color: #fbbf24; }
.srv-espaco-vermelho { color: #fca5a5; font-weight: 700; }
.aviso-espaco-fotos {
  position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 985;
  display: flex; align-items: flex-start; gap: 0.75rem; width: max-content; max-width: min(720px, calc(100vw - 2rem));
  padding: 0.75rem 0.9rem; border-radius: var(--radius-md); border: 1px solid rgba(239, 68, 68, 0.7);
  background: #3b0d0d; color: #fee2e2; font-size: 0.86rem; line-height: 1.45; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
}
.aviso-espaco-fotos button { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(254, 226, 226, 0.35); background: transparent; color: inherit; cursor: pointer; }
body.theme-light .aviso-espaco-fotos { background: #fef2f2; color: #7f1d1d; border-color: #fca5a5; }
@media print { .aviso-espaco-fotos { display: none !important; } }

/* ==========================================================================
   TEMA CLARO: botões com letra branca fixa (11/10/2026, revisão com prints)
   "📝 Colar Texto", "💾 Backup JSON" e a pílula "🚨 Problemas" ficavam com a letra branca no fundo claro (invisíveis).
   ========================================================================== */
body.theme-light .btn-upload-whatsapp,
body.theme-light .btn-cartorio-action:not(.primary):not(.danger) { color: var(--text-primary); }
body.theme-light .btn-cartorio-action:not(.primary):not(.danger):hover { background: rgba(15, 23, 42, 0.06); }
body.theme-light .pill-btn.pill-alerta { color: #b91c1c; }
body.theme-light .pill-btn.pill-alerta.active { color: #7f1d1d; background: rgba(239, 68, 68, 0.18); }

/* Selo AM/PM ao lado da hora (11/10/2026, pedido do dono: "00 é meia-noite"; hora-br.js) */
.hora-ampm { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; vertical-align: middle; white-space: nowrap; border: 1px solid rgba(148, 163, 184, 0.45); color: #cbd5e1; background: rgba(148, 163, 184, 0.12); cursor: help; }
.hora-ampm.hora-madrugada { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.6); background: rgba(139, 92, 246, 0.16); }
.hora-ampm.hora-manha { color: #fde68a; border-color: rgba(250, 204, 21, 0.5); background: rgba(250, 204, 21, 0.1); }
body.theme-light .hora-ampm { color: #334155; background: rgba(100, 116, 139, 0.1); }
body.theme-light .hora-ampm.hora-madrugada { color: #5b21b6; background: rgba(139, 92, 246, 0.12); }
body.theme-light .hora-ampm.hora-manha { color: #92400e; background: rgba(250, 204, 21, 0.18); }

/* Selo "🖥️ Espelho do site" no computador (11/10/2026, espelho-local.js) */
.espelho-selo { display: inline-flex; align-items: center; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; color: #7dd3fc; background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.45); cursor: help; }
body.theme-light .espelho-selo { color: #075985; background: rgba(14, 165, 233, 0.1); }
@media (max-width: 700px) { .espelho-selo { font-size: 0.7rem; padding: 0.25rem 0.5rem; } }

/* Janela "🖥️ Espelho no PC" no menu 👤 (11/10/2026, servidor.js) */
.srv-esp-fundo { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 23, 0.6); }
.srv-esp-fundo[hidden] { display: none; }
.srv-esp { width: min(520px, 100%); display: flex; flex-direction: column; gap: 0.75rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.srv-esp h3 { margin: 0; font-size: 1.1rem; }
.srv-esp p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.srv-esp-estado { font-size: 0.9rem; font-weight: 600; }
.srv-esp-chave { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-md); border: 1px dashed rgba(16, 185, 129, 0.6); background: rgba(16, 185, 129, 0.08); }
.srv-esp-chave[hidden] { display: none; }
.srv-esp-chave code { font-size: 0.85rem; word-break: break-all; user-select: all; }
.srv-esp-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.espelho-selo--parado { color: #fecaca; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.6); }
body.theme-light .espelho-selo--parado { color: #991b1b; background: rgba(239, 68, 68, 0.1); }
.espelho-faixa { position: sticky; top: 0; z-index: 1250; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: #7f1d1d; color: #fff; font-size: 0.9rem; font-weight: 600; }
.espelho-faixa span { flex: 1 1 280px; min-width: 0; }
.espelho-faixa .btn-micro-action { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* Menu 👤: ▶ Tutorial em vídeo (11/10/2026, tutorial.html) */
.srv-pop .srv-tutorial { display: block; padding: 0.6rem 0.7rem; border-radius: 6px; font-size: 0.85rem; color: var(--emerald-400, #34d399); text-decoration: none; font-weight: 600; }
.srv-pop .srv-tutorial:hover { background: rgba(255, 255, 255, 0.07); }

/* "🧹 Limpar Tudo" (Fechamento): o vermelho do botão vinha num style= na página e no tema claro ficava rosa-claro
   sobre branco, quase invisível (11/10/2026). Agora é classe, com a cor certa em cada tema. */
.btn-export-perigo { background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.5); color: #fca5a5; }
body.theme-light .btn-export-perigo { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.45); color: #b91c1c; }

/* Tema claro (11/10/2026): a busca, os totais do resumo e o "%" dos cartões eram #fff fixo (sumiam no branco), e as
   variáveis --amber-* eram usadas sem existir (o botão "Mover para a conta" ficava sem fundo). */
:root { --amber-500: #f59e0b; --amber-400: #fbbf24; }
body.theme-light .search-box input, body.theme-light .resumo-chip .val, body.theme-light .pct-text { color: #0f172a; }
body.theme-light .aob-titles strong { color: #b45309; }
/* Cartório no tema claro (11/10/2026, achado na rodada do celular): o "👁️ Ver" era #fff fixo (invisível no branco), a
   caixinha do ID do Pix e o verde dos valores tinham pouco contraste. */
body.theme-light .btn-thumb-preview { color: var(--text-primary); }
body.theme-light .code-id-pix { background: rgba(15, 23, 42, 0.06); color: #475569; }
body.theme-light .pill-btn.active, body.theme-light .cartorio-table .text-emerald-400 { color: #047857; }

/* 🔄 Ao vivo no Bloco de Notas (13/10/2026) */
.notepad-ao-vivo { padding: 0.45rem 0.75rem; border-top: 1px solid var(--border-color); font-size: 0.8rem; line-height: 1.45; background: rgba(16, 185, 129, 0.06); color: var(--text-secondary); max-height: 34vh; overflow: auto; }
.notepad-ao-vivo[hidden] { display: none; }
.notepad-ao-vivo.av-pendente { background: rgba(251, 191, 36, 0.08); }
.av-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin-bottom: 0.2rem; }
.av-tit { font-weight: 800; color: var(--text-primary); min-width: 9rem; }
.av-num small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text-muted); }
.av-num s { opacity: 0.6; }
.av-mudou strong { color: #fbbf24; }
body.theme-light .av-mudou strong { color: #b45309; }
.av-status { margin-top: 0.2rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.av-lista { margin: 0.25rem 0 0 1rem; padding: 0; }
.av-lista s { opacity: 0.6; }
.av-ir { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline dotted; cursor: pointer; font: inherit; }
.av-ir:disabled { text-decoration: none; cursor: default; }

/* 💼 Saída para o chefe (14/10/2026): de onde saiu, cartão do Chefe em Cadastros e o bloco no cartão de conferência */
.ch-saida { margin-top: 0.2rem; font-size: 0.74rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; }
.ch-saida-btn { font-size: 0.7rem; padding: 0.05rem 0.4rem; }
.ch-saida-falta { color: #fbbf24; }
body.theme-light .ch-saida-falta { color: #b45309; }
.ch-origem-linha td { background: rgba(56, 189, 248, 0.06); }
.ch-origem { padding: 0.4rem 0.2rem; font-size: 0.82rem; }
.ch-or-cab { margin-bottom: 0.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.ch-or-aviso { color: #fbbf24; margin: 0.2rem 0; }
body.theme-light .ch-or-aviso { color: #b45309; }
.ch-or-lista { list-style: none; margin: 0.3rem 0; padding: 0; display: grid; gap: 0.3rem; }
.ch-or-cand { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border-color); border-radius: 8px; }
.ch-or-cand > span { flex: 1 1 auto; min-width: 0; }
.ch-or-cand small { display: block; color: var(--text-muted); word-break: break-word; }
.ch-or-vazio { margin: 0.3rem 0; color: var(--text-muted); }
.ch-cartao-chefe { border-color: rgba(167, 139, 250, 0.55); }
.ch-cartao-chefe .div-nome small { font-weight: 500; color: var(--text-muted); }
.ch-cc-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ch-cc-numeros > div { border: 1px solid var(--border-color); border-radius: 10px; padding: 0.45rem 0.55rem; min-width: 0; }
.ch-cc-numeros span { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; color: var(--text-muted); }
.ch-cc-numeros strong { display: block; font-size: 1rem; color: var(--text-primary); word-break: break-word; }
.ch-cc-numeros small { display: block; font-size: 0.7rem; color: var(--text-muted); }
.ch-cc-saidas { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.8rem; color: var(--text-secondary); }
.ch-cc-rot { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); width: 100%; }
.ch-cc-aviso { font-size: 0.8rem; color: #fbbf24; }
body.theme-light .ch-cc-aviso { color: #b45309; }
.ch-cc-ctls { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ident-chefe { margin-top: 0.4rem; padding: 0.5rem 0.6rem; border: 1px solid rgba(167, 139, 250, 0.55); border-radius: 10px; }
.ident-chefe-op { margin-top: 0.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.ident-chefe-op small { color: var(--text-muted); }
.ident-chefe-sugerida { font-weight: 600; }
.ident-chefe-btn-principal { border-color: #34d399; }
.ident-chefe-obs { display: block; margin-top: 0.35rem; color: var(--text-muted); }
@media (max-width: 560px) { .ch-cc-numeros { grid-template-columns: 1fr; } }

/* 💼 Cartório: visão "Saídas para o chefe" (14/10/2026) — comprovantes do caixa para o velho e os Pix dele sem comprovante */
.cart-chefe-tit { margin: 1rem 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.cart-chefe-tit small { font-weight: 500; color: var(--text-secondary); }
.cart-chefe-falta { margin-bottom: 0.5rem; }
.cart-chefe-papel { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); border: 1px solid var(--border-color); white-space: nowrap; }
.cart-chefe-linha { border-color: rgba(167, 139, 250, 0.55); background: rgba(167, 139, 250, 0.12); color: #c4b5fd; }
.cart-chefe-prova { border-color: rgba(52, 211, 153, 0.55); background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }
.cart-chefe-fora { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.cart-chefe-aviso { color: #fbbf24; }
.linha-chefe-fora td { background: rgba(245, 158, 11, 0.05); }
body.theme-light .cart-chefe-linha { color: #6d28d9; }
body.theme-light .cart-chefe-prova { color: #047857; }
body.theme-light .cart-chefe-fora, body.theme-light .cart-chefe-aviso { color: #b45309; }

/* 💼 Chefe na Visão Geral (14/10/2026, js/charts-manager.js htmlChefe): faixa abaixo dos 4 cartões com o controle mais
   recente da Planilha do velho — JÁ PEGOU, FALTA PEGAR, de onde saiu e as saídas por Pix sem comprovante. Toca = aba Chefe */
.vg-chefe-faixa { margin: -0.5rem 0 1.5rem; padding: 0.85rem 1.1rem; border: 1px solid rgba(167, 139, 250, 0.45); border-left: 4px solid #a78bfa; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-card); cursor: pointer; display: grid; gap: 0.55rem; transition: border-color 0.2s ease; }
.vg-chefe-faixa:hover { border-color: rgba(167, 139, 250, 0.8); }
.vg-chefe-faixa:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 3px; }
.vg-chefe-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.vg-chefe-tit { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); min-width: 0; }
.vg-chefe-tit small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); word-break: break-word; }
.vg-chefe-ir { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.vg-chefe-nums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 0.6rem; }
.vg-chefe-nums > div { min-width: 0; }
.vg-chefe-nums span { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; color: var(--text-muted); }
.vg-chefe-nums strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); word-break: break-word; }
.vg-chefe-nums strong.vg-chefe-adef { font-style: italic; color: var(--text-secondary); }
.vg-chefe-nums small { display: block; font-size: 0.7rem; color: var(--text-muted); }
.vg-chefe-saiu { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.15rem 0.9rem; font-size: 0.8rem; color: var(--text-secondary); }
.vg-chefe-saiu > span { width: 100%; }
.vg-chefe-saiu em { font-style: normal; }
.vg-chefe-saiu b { color: var(--text-primary); }
.vg-chefe-saiu small { display: inline; }
.vg-chefe-rodape { font-size: 0.8rem; }
.vg-chefe-aviso { color: #fbbf24; }
.vg-chefe-ok { color: var(--text-muted); }
body.theme-light .vg-chefe-aviso { color: #b45309; }
body.theme-light .vg-chefe-faixa { border-color: rgba(124, 58, 237, 0.35); border-left-color: #7c3aed; }
#tab-visao-geral.vv-velha .vg-chefe-faixa { visibility: hidden; }
@media (max-width: 720px) { .vg-chefe-nums { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vg-chefe-saiu { grid-column: 1 / -1; } }
@media (max-width: 420px) { .vg-chefe-nums { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vg-chefe-faixa { transition: none; } }