/**
 * 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;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.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-cartorio,
.modo-split-ativo #tab-exportar {
  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);
}

/* BARRA DE PROGRESSO OCR */
.ocr-progress-container {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.ocr-progress-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.ocr-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  width: 0%;
  transition: width 0.3s ease;
}

.ocr-status-text {
  font-size: 0.8rem;
  color: var(--emerald-400);
  font-weight: 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;
}

/* 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 .notepad-textarea {
  background: #ffffff;
  color: #1e293b;
}

body.theme-light .notepad-editor-body {
  background: #ffffff;
}

body.theme-light .notepad-window-container {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

body.theme-light .notepad-statusbar {
  background: #e2e8f0;
  color: #475569;
}

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; }
.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); }

/* 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); }
.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; }
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; }

/* ==========================================
   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; }
.rd-animar .rd-ger { animation: rdLado 0.5s cubic-bezier(.2, .8, .2, 1) both; 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) both; 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; }
}

/* ==========================================
   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.2, 0.8, 0.2, 1) both; }
.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; }
}