/* ==========================================================================
   RADAR MUNICIPAL CAMPINAS — COCKPIT DE INTELIGÊNCIA PRIVADA & ESCUTA SOCIAL
   Design: 100vh (Zero Rolagem Global), Dark Tech, Leaflet Map na Tela, Live Post Pop
   ========================================================================== */

:root {
  --bg-dark: #070a12;
  --bg-card: #0d1424;
  --bg-card-hover: #131c33;
  --bg-surface: #18233c;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-bright: rgba(255, 255, 255, 0.16);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --accent-orange: #f97316;
  --accent-red: #ef4444;
  --accent-yellow: #eab308;
  --accent-emerald: #10b981;
  --accent-cyan: #06b6d4;
  --accent-blue: #3b82f6;

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

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

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

html, body.radar-body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  background-image: 
    radial-gradient(circle at 10% 5%, rgba(249, 115, 22, 0.06) 0%, transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(6, 182, 212, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(239, 68, 68, 0.05) 0%, transparent 50%);
}

/* ==========================================================================
   1. CABEÇALHO EXECUTIVO
   ========================================================================== */
.radar-header {
  height: 50px;
  flex-shrink: 0;
  background: rgba(10, 15, 26, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-shield {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.brand-title .highlight {
  color: var(--accent-orange);
}

.brand-sub {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.live-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-emerald);
  box-shadow: 0 0 6px var(--accent-emerald);
  animation: pulse-dot 1.2s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.6; }
}

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

.stream-control-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.3);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fdba74;
}

.stream-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 8px var(--accent-orange);
  animation: pulse-dot 1s infinite;
}

.btn-toggle-stream {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-toggle-stream:hover { background: rgba(255, 255, 255, 0.15); }

.role-selector-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.role-selector-box select {
  background: var(--bg-surface);
  color: #fff;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  outline: none;
}

.btn-export-pdf {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: 0.15s;
}

.btn-export-pdf:hover { background: rgba(255, 255, 255, 0.15); }

/* ==========================================================================
   2. CARDS GRANDES DE MÉTRICAS (FIXOS NO TOPO)
   ========================================================================== */
.top-metric-cards-bar {
  flex-shrink: 0;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.6) 0%, rgba(7, 10, 18, 0) 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.metric-card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-card-box.highlight-card {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(145deg, #181119, #0d1424);
}

.metric-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.metric-val-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2px 0;
}

.metric-val {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  transition: transform 0.2s, color 0.2s;
}

.metric-val.pulse-flash {
  color: var(--accent-orange);
  transform: scale(1.12);
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
}

.metric-val.font-semibold {
  font-size: 1.05rem;
  font-weight: 700;
}

.metric-footnote {
  font-size: 0.65rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-growth {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.badge-growth.positive { color: #86efac; background: rgba(16, 185, 129, 0.15); }
.badge-growth.negative { color: #fca5a5; background: rgba(239, 68, 68, 0.15); }
.badge-growth.neutral { color: #67e8f9; background: rgba(6, 182, 212, 0.15); }

.badge-status-danger {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.badge-status-orange {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(249, 115, 22, 0.25);
  color: #fdba74;
}

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

.progress-bar-danger {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #ef4444);
}

.text-red { color: var(--accent-red) !important; }
.text-cyan { color: var(--accent-cyan) !important; }
.text-orange { color: var(--accent-orange) !important; }
.text-emerald { color: var(--accent-emerald) !important; }

/* ==========================================================================
   3. BARRA DE ABAS & CONTROLES DO RADAR
   ========================================================================== */
.cockpit-tabs-bar {
  height: 40px;
  flex-shrink: 0;
  background: rgba(10, 15, 26, 0.7);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 12px;
}

.tabs-list {
  display: flex;
  gap: 4px;
}

.nav-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.15s;
}

.nav-tab:hover { color: #fff; }

.nav-tab.active {
  color: #fff;
  border-bottom-color: var(--accent-orange);
}

.counter-badge {
  background: var(--accent-orange);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--radius-full);
}

.tab-filters-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-live-test {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
  transition: transform 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-live-test:hover { transform: scale(1.04); }

.tab-filters-row select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  outline: none;
}

.view-mode-buttons {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.btn-view-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.15s;
}

.btn-view-toggle:hover { color: #fff; }

.btn-view-toggle.active {
  background: var(--accent-orange);
  color: #fff;
}

/* ==========================================================================
   4. VIEWPORT COM ABAS (SEM ROLAGEM GERAL)
   ========================================================================== */
.cockpit-content-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.tab-view-panel {
  display: none;
  height: 100%;
  padding: 10px 18px 14px 18px;
  overflow: hidden;
}

.tab-view-panel.active {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   ABA 1: COCKPIT DIVIDIDO (FEED AO VIVO + MAPA DO MUNICÍPIO NA TELA)
   ========================================================================== */
.radar-split-cockpit {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* Modos de visualização (Dividido, Só Feed, Só Mapa) */
.radar-split-cockpit.mode-feed {
  grid-template-columns: 1fr 0fr;
  gap: 0;
}
.radar-split-cockpit.mode-feed .cockpit-col-map {
  display: none;
}

.radar-split-cockpit.mode-map {
  grid-template-columns: 0fr 1fr;
  gap: 0;
}
.radar-split-cockpit.mode-map .cockpit-col-feed {
  display: none;
}

/* Coluna 1: Feed de Menções ao Vivo */
.cockpit-col-feed {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.col-header-bar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.col-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-header-title h3 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.4px;
}

.live-signal-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 8px var(--accent-orange);
  animation: pulse-dot 1s infinite;
}

.badge-auto-update {
  font-size: 0.58rem;
  font-weight: 800;
  color: #86efac;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.col-header-hint {
  font-size: 0.65rem;
  color: var(--text-dim);
}

/* Container Rolável de Posts */
.posts-scroll-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.posts-scroll-container::-webkit-scrollbar { width: 5px; }
.posts-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
}

/* Card Social com Animação Flaviômetro de Chegada ao Vivo */
.social-post-card {
  background: #090e1a;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.social-post-card.newly-arrived {
  animation: slideInPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 22px rgba(249, 115, 22, 0.5);
  background: linear-gradient(145deg, #1f1418, #090e1a);
}

@keyframes slideInPop {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }
  60% {
    transform: translateY(3px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.newly-arrived-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg, #f97316, #ef4444);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  animation: pulse-dot 1s infinite;
}

.social-post-card:hover {
  border-color: var(--border-bright);
  background: #0f172a;
}

.social-post-card.critical { border-left: 3px solid var(--accent-red); }
.social-post-card.high { border-left: 3px solid var(--accent-orange); }

.post-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-src-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.net-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 4px;
}

.net-pill.insta { background: rgba(225, 48, 108, 0.2); color: #f472b6; border: 1px solid rgba(225, 48, 108, 0.4); }
.net-pill.x-net { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid var(--border-bright); }
.net-pill.fb { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
.net-pill.news { background: rgba(234, 179, 8, 0.2); color: #fef08a; border: 1px solid rgba(234, 179, 8, 0.4); }

.neighborhood-tag {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}

.post-time {
  font-size: 0.62rem;
  color: var(--text-dim);
}

.post-content-text {
  font-size: 0.78rem;
  color: #e2e8f0;
  line-height: 1.35;
}

.post-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
  font-size: 0.65rem;
  color: var(--text-dim);
  gap: 8px;
}

.author-handle {
  color: #94a3b8;
  font-weight: 700;
}

.post-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-pill {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.62rem;
}

.btn-open-network {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-bright);
  color: #fff;
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-open-network:hover {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.45);
}

.btn-open-network .link-arrow {
  font-size: 0.7rem;
  font-weight: 900;
}

/* Coluna 2: Mapa de Campinas ao Vivo */
.cockpit-col-map {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.badge-mini-geo {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.map-mini-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  color: var(--text-dim);
}

.lg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot-critical { background: var(--accent-red); box-shadow: 0 0 5px var(--accent-red); }
.dot-high { background: var(--accent-orange); }
.dot-medium { background: var(--accent-yellow); }
.dot-low { background: var(--accent-emerald); }

.live-map-viewport-container {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #070b14;
}

.leaflet-map-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #090d16;
}

/* Card Flutuante de Raio-X do Distrito Selecionado sobre o Mapa */
.map-floating-district-card {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(13, 20, 36, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  z-index: 1000;
  transition: all 0.25s ease;
}

.floating-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.dist-badge {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: 0.5px;
  display: block;
}

.floating-card-head h4 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.dist-score-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-num {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 900;
}

.score-tag-pill {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.floating-card-details {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr;
  gap: 8px;
  font-size: 0.7rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
  margin-bottom: 6px;
}

.f-detail-item {
  display: flex;
  flex-direction: column;
}

.f-lbl {
  font-size: 0.58rem;
  color: var(--text-dim);
}

.f-detail-item strong {
  font-size: 0.74rem;
  color: #fff;
}

.f-detail-item span {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-card-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-filter-this-district {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.15s;
}

.btn-filter-this-district:hover {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

/* Tooltips do Leaflet em Dark Mode */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #0d1424 !important;
  color: #fff !important;
  border: 1px solid var(--border-bright);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  font-family: var(--font-body);
}

.dark-map-tooltip {
  background: #0d1424 !important;
  color: #fff !important;
  border: 1px solid var(--border-bright) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  font-family: var(--font-body) !important;
  padding: 4px 8px !important;
}

/* Marcador HTML customizado no mapa */
.custom-map-pin {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  background: rgba(13, 20, 36, 0.94);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 3px 8px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.custom-map-pin:hover {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: #60a5fa;
}

/* ==========================================================================
   ABA 2: SALA DE SITUAÇÃO & SECRETARIAS
   ========================================================================== */
.situation-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.situation-left-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.kpi-quad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.kpi-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.kpi-mini-title {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-dim);
}

.kpi-mini-value {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 2px 0;
}

.kpi-mini-sub {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.summary-table-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.box-head h4 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.issue-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.rank-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
  color: #fff;
  flex-shrink: 0;
}

.issue-details { flex: 1; }
.issue-details strong {
  display: block;
  font-size: 0.74rem;
  color: #fff;
}
.issue-details p {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.situation-right-col {
  height: 100%;
  min-height: 0;
}

.chart-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.chart-panel-header h4 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}

.badge-mini {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.chart-canvas-container {
  flex: 1;
  position: relative;
  min-height: 200px;
}

/* ==========================================================================
   ABA 3: COPILOTO IA
   ========================================================================== */
.copilot-panel-layout {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.copilot-head { margin-bottom: 12px; }

.badge-ai-model {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.15);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.copilot-head h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.copilot-head p {
  font-size: 0.74rem;
  color: var(--text-muted);
}

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

.copilot-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.copilot-action-card:hover { border-color: var(--accent-cyan); }

.card-pill-tag {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent-cyan);
  margin-bottom: 6px;
}

.copilot-action-card h4 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.copilot-action-card p {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 12px;
}

.card-foot-gain {
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  font-size: 0.7rem;
  color: var(--accent-emerald);
  font-weight: 700;
}

/* ==========================================================================
   ABA 4: SIMULADOR PREDITIVO
   ========================================================================== */
.sim-panel-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.sim-card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 780px;
  width: 100%;
}

.sim-card-box h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin: 4px 0;
}

.sim-card-box p {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.sim-input-group {
  display: flex;
  gap: 10px;
}

.sim-input-group input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: #fff;
  font-size: 0.78rem;
  outline: none;
}

.btn-execute-sim {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.sim-output-box {
  margin-top: 14px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.sim-output-box.hidden { display: none; }

/* ==========================================================================
   NOTIFICAÇÃO FLUTUANTE ESTILO FLAVIÔMETRO
   ========================================================================== */
.live-toast-alert {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(13, 20, 36, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--accent-orange);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 18px rgba(249, 115, 22, 0.45);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  z-index: 3000;
  max-width: 440px;
  transform: translateY(120px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.live-toast-alert.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.live-toast-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 10px var(--accent-orange);
  flex-shrink: 0;
  margin-top: 4px;
  animation: pulse-dot 0.8s infinite;
}

.live-toast-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.live-toast-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
}

.live-toast-tag {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: 0.4px;
}

.live-toast-src {
  font-weight: 800;
  color: #fdba74;
}

.live-toast-author {
  color: var(--text-dim);
}

.live-toast-text {
  font-size: 0.76rem;
  color: #fff;
  line-height: 1.3;
}

.live-toast-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.toast-reg-tag {
  font-size: 0.62rem;
  color: var(--accent-cyan);
  font-weight: 700;
}

.toast-open-btn {
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: rgba(249, 115, 22, 0.25);
  border: 1px solid var(--accent-orange);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.toast-open-btn:hover {
  background: var(--accent-orange);
  color: #fff;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

/* ==========================================================================
   5. AMBIENTE MASTER SAAS & MULTI-TENANT (GERENCIAMENTO DE PREFEITURAS/CANDIDATOS)
   ========================================================================== */

/* Barra Superior Master */
.master-saas-top-bar {
  height: 38px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #0c1222 0%, #111a33 100%);
  border-bottom: 1px solid rgba(249, 115, 22, 0.35);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}

.master-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.master-crown-icon {
  font-size: 16px;
  animation: pulse-dot 1.5s infinite;
}

.master-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.master-brand-txt {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.badge-master-role {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.master-nav-tabs {
  display: flex;
  gap: 4px;
  margin-left: 12px;
  border-left: 1px solid var(--border-bright);
  padding-left: 12px;
}

.master-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.master-nav-btn.active {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.4);
  color: #fdba74;
}

.master-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tenant-selector-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--text-dim);
}

.tenant-selector-pill select {
  background: rgba(13, 20, 36, 0.9);
  color: #fff;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  outline: none;
}

.btn-saas-action {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-saas-action.primary {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
}

.btn-saas-action.primary:hover {
  transform: scale(1.02);
}

.btn-saas-action.outline {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-bright);
  color: #fff;
}

.btn-saas-action.outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-back-master {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fdba74;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-back-master:hover {
  background: var(--accent-orange);
  color: #fff;
}

/* Container de Alternância entre Visão Master e Visão Cliente */
.view-panel-container {
  display: none;
  flex: 1;
  flex-direction: column;
  height: calc(100vh - 38px);
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.view-panel-container.active {
  display: flex;
}

/* Painel Master SaaS Dashboard */
#viewMasterSaas {
  padding: 16px 22px;
  display: none;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  background: radial-gradient(circle at 10% 10%, rgba(249, 115, 22, 0.06) 0%, transparent 40%),
              radial-gradient(circle at 90% 90%, rgba(6, 182, 212, 0.05) 0%, transparent 40%);
}

#viewMasterSaas.active {
  display: flex;
}

.saas-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.saas-header-info h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.saas-header-info p {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.saas-system-pulse {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  color: #86efac;
}

/* KPIs SaaS Grid */
.saas-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.saas-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.saas-kpi-title {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.saas-kpi-val {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 4px 0;
}

.saas-kpi-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Tabela de Clientes SaaS */
.saas-clients-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.4);
}

.table-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-head-left h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

.table-head-right input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.72rem;
  color: #fff;
  outline: none;
  width: 240px;
}

.table-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
}

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

.saas-table th {
  background: rgba(10, 15, 26, 0.95);
  color: var(--text-dim);
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 5;
}

.saas-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: #cbd5e1;
  vertical-align: middle;
}

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

.cell-city-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.city-avatar-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.city-name-box strong {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: #fff;
  display: block;
}

.city-name-box span {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.tag-account-type {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.tag-account-type.prefeitura {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.tag-account-type.candidato {
  background: rgba(249, 115, 22, 0.15);
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.robot-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #86efac;
}

.cred-code-badge {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-subtle);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  color: var(--accent-cyan);
}

.actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.btn-table-action {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-table-action.launch {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
}

.btn-table-action.launch:hover {
  transform: scale(1.03);
}

.btn-table-action.keys {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: #cbd5e1;
}

.btn-table-action.keys:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Modais do SaaS */
.saas-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 20px;
  overflow-y: auto;
}

.hidden {
  display: none !important;
}

.saas-modal-backdrop.hidden {
  display: none !important;
}

.saas-modal-box {
  background: #0d1424;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(249, 115, 22, 0.2);
  max-width: 780px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.saas-modal-box.modal-box-sm {
  max-width: 480px;
}

.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.6);
}

.modal-head-title {
  display: flex;
  gap: 12px;
  align-items: center;
}

.modal-head-title .icon {
  font-size: 24px;
}

.modal-head-title h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.modal-head-title p {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
}

.btn-close-modal:hover { color: #fff; }

#newTenantForm {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 80vh;
  overflow-y: auto;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-field label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
}

.form-field input, .form-field select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: #fff;
  font-size: 0.76rem;
  outline: none;
}

.form-field input:focus, .form-field select:focus {
  border-color: var(--accent-orange);
}

.form-divider {
  display: flex;
  align-items: center;
  margin: 6px 0;
}

.form-divider span {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.input-with-action {
  display: flex;
  gap: 6px;
}

.input-with-action input {
  flex: 1;
}

.btn-copy-gen {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-geocode-action {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--accent-cyan);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-geocode-action:hover {
  background: var(--accent-cyan);
  color: #000;
}

.modal-geocoding-preview {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.mini-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-map-title {
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.mini-map-hint {
  font-size: 0.62rem;
  color: var(--text-dim);
}

.modal-mini-map {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #090d16;
  overflow: hidden;
}

.districts-coords-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 85px;
  overflow-y: auto;
}

.district-coord-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.district-coord-pill strong {
  color: #fff;
}

.district-coord-pill .pill-coords {
  color: var(--accent-cyan);
  font-family: monospace;
  font-size: 0.62rem;
}

.district-coord-pill .pill-status {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #86efac;
}

.modal-mini-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.modal-mini-pin:active {
  cursor: grabbing;
}

/* Seleção Automática de Bairros Oficiais */
.city-preset-picker-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.neighborhoods-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.sub-label-helper {
  display: block;
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.neighborhoods-quick-actions {
  display: flex;
  gap: 6px;
}

.btn-micro-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-micro-action:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.official-neighborhoods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.official-nb-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.official-nb-tag:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

.official-nb-tag.selected {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.5);
}

.official-nb-tag input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  cursor: pointer;
  width: 14px;
  height: 14px;
  margin: 0;
}

.official-nb-tag .nb-tag-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.official-nb-tag .nb-tag-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.official-nb-tag .nb-tag-coords {
  font-size: 0.56rem;
  color: var(--accent-cyan);
  font-family: monospace;
}

.add-custom-neighborhood-bar {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.add-custom-neighborhood-bar input {
  flex: 1;
  font-size: 0.70rem;
  padding: 6px 10px;
}

.btn-add-extra-nb {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.btn-add-extra-nb:hover {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

.neighborhoods-sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.input-filter-nb {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.65rem;
  color: #fff;
  width: 210px;
  outline: none;
}

.input-filter-nb:focus {
  border-color: var(--accent-cyan);
}

.nb-count-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.bulk-paste-modal-box {
  background: #090e1a;
  border: 1px dashed var(--accent-cyan);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-paste-textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.68rem;
  color: #fff;
  font-family: inherit;
  resize: vertical;
  min-height: 65px;
  outline: none;
}

.bulk-paste-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.city-search-box-wrap {
  display: flex;
  gap: 6px;
}

.city-search-box-wrap input {
  flex: 1;
}

.btn-load-city-now {
  background: var(--accent-cyan);
  color: #000;
  font-weight: 800;
  font-size: 0.70rem;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-load-city-now:hover {
  background: #38bdf8;
  transform: translateY(-1px);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-confirm-save {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.4);
}

/* Modal de Credenciais */
.credentials-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
}

.cred-label {
  color: var(--text-dim);
  font-weight: 700;
}

.cred-row code {
  color: var(--accent-cyan);
  font-family: monospace;
  font-size: 0.76rem;
}

.btn-copy-full-access {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-go-radar {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  border: none;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Modal de Login Institucional */
.login-modal-box {
  max-width: 420px;
  padding: 28px;
  text-align: center;
}

.login-brand {
  margin-bottom: 20px;
}

.login-shield {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 10px auto;
}

.login-brand h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}

.login-brand p {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  font-weight: 700;
}

.login-form-container form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.btn-submit-login {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.login-demo-shortcuts {
  margin-top: 18px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.demo-lbl {
  display: block;
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.demo-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-demo-acc {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-bright);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.btn-demo-acc:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: var(--accent-orange);
}

.btn-close-login {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-top: 14px;
  cursor: pointer;
}
.btn-close-login:hover { color: #fff; }

/* ==========================================================================
   6. CENTRAL DE CONECTORES & APIS DE REDES SOCIAIS (MODAL & DADOS REAIS)
   ========================================================================== */

/* Botão de Sincronização ao Vivo */
.btn-live-sync-real {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(16, 185, 129, 0.2));
  border: 1px solid rgba(6, 182, 212, 0.6);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

.btn-live-sync-real:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.35), rgba(16, 185, 129, 0.35));
  border-color: #22d3ee;
  color: #fff;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.4);
  transform: translateY(-1px);
}

.btn-live-sync-real.syncing {
  opacity: 0.8;
  pointer-events: none;
  border-color: #f59e0b;
  color: #fcd34d;
}

.live-dot-mini {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 1.2s infinite;
}

/* Badge de Dado Real no Card do Post */
.real-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.5);
  color: #38bdf8;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.social-post-card.real-news {
  border-left-width: 4px;
  border-left-color: #38bdf8 !important;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.05) 0%, rgba(15, 23, 42, 0.8) 100%);
}

/* Modal de Conectores & APIs */
.modal-box-api {
  max-width: 900px;
  width: 94%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.api-modal-scroll {
  overflow-y: auto;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.api-connector-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all 0.2s ease;
}

.api-connector-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.85);
}

.connector-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.connector-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connector-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 1px solid var(--border-bright);
}

.connector-title-box h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.connector-title-box p {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.connector-badge-status {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.status-active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.status-waiting {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.connector-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.connector-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.connector-field-group label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #cbd5e1;
}

.connector-field-group input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-bright);
  color: #fff;
  font-size: 0.72rem;
  font-family: monospace;
  padding: 7px 10px;
  border-radius: 6px;
}

.connector-field-group input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.connector-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
}

.btn-test-conn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-bright);
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-test-conn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

.test-result-feedback {
  font-size: 0.68rem;
  font-weight: 700;
}

.test-result-feedback.ok { color: #6ee7b7; }
.test-result-feedback.err { color: #f87171; }

.api-help-link {
  font-size: 0.65rem;
  color: #94a3b8;
  text-decoration: underline;
}
.api-help-link:hover { color: #38bdf8; }

/* ==========================================================================
   7. CONTROLE DE ACESSO POR PAPEL (RBAC) & ISOLAMENTO DO CLIENTE
   ========================================================================== */

/* Barra Institucional do Cliente (Exibida quando logado como Prefeito/Candidato) */
.client-institutional-bar {
  height: 46px;
  background: linear-gradient(90deg, #090d16 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}

.client-inst-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-inst-shield {
  font-size: 1.2rem;
}

.client-inst-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.client-inst-title span {
  color: #38bdf8;
}

.badge-inst-role {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.client-inst-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-logged-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.user-avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-client-logout {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-client-logout:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
  border-color: #ef4444;
}

/* Banner de Inspeção do SuperAdmin */
.admin-inspection-banner {
  background: linear-gradient(90deg, #1e1b4b 0%, #172554 100%);
  border-bottom: 1px solid rgba(99, 102, 241, 0.4);
  padding: 6px 20px;
  font-size: 0.72rem;
  color: #c7d2fe;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-inspection-banner strong {
  color: #fff;
}

.btn-banner-return {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-banner-return:hover {
  background: #f97316;
  border-color: #f97316;
}

/* ==========================================================================
   8. MÓDULO DE RADAR DE CONCORRENTES & OPOSIÇÃO POLÍTICA
   ========================================================================== */

.competitors-viewport {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  height: calc(100vh - 215px);
}

.comp-header-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.comp-banner-title h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-banner-title p {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 3px;
}

.btn-add-comp {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
  transition: all 0.2s ease;
}

.btn-add-comp:hover {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  transform: translateY(-1px);
}

/* Grids e Métricas do Radar de Oposição */
.comp-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.comp-card-box {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.comp-card-box:hover {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.comp-card-box.alert-high {
  border-left: 4px solid #ef4444;
}

.comp-card-box.alert-medium {
  border-left: 4px solid #f97316;
}

.comp-card-box.alert-low {
  border-left: 4px solid #10b981;
}

.comp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.comp-profile-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comp-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 1px solid var(--border-bright);
}

.comp-name-details h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.comp-party-badge {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
}

.comp-influence-pill {
  text-align: right;
}

.comp-influence-score {
  font-size: 1.25rem;
  font-weight: 900;
  color: #38bdf8;
  font-family: var(--font-heading);
}

.comp-influence-lbl {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Indicador de Tendência na Opinião Pública */
.comp-trend-row {
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 800;
}

.trend-growth {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.trend-growth-pulse {
  animation: pulse-dot 1.2s infinite;
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
  margin-right: 4px;
}

.trend-drop {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.trend-stable {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: #cbd5e1;
}

/* Termômetro de Sentimento Segmentado */
.comp-sentiment-meter {
  margin-bottom: 12px;
}

.sentiment-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  margin-bottom: 4px;
  color: var(--text-dim);
}

.sentiment-bar-multi {
  height: 8px;
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  background: #1e293b;
}

.seg-pos { background: #10b981; }
.seg-neu { background: #64748b; }
.seg-neg { background: #ef4444; }

/* Pautas e Ataques Mais Explorados */
.comp-issues-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 14px;
  flex: 1;
}

.comp-issues-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.comp-issue-tag {
  font-size: 0.68rem;
  color: #e2e8f0;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  margin-bottom: 4px;
  display: block;
}

/* Botão de Ver O que Falam Dele */
.btn-listen-candidate {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-listen-candidate:hover {
  background: #0284c7;
  color: #fff;
  border-color: #0284c7;
}

/* Feed Especializado da Oposição */
.comp-split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .comp-split-view {
    grid-template-columns: 1fr;
  }
}

/* Badge de Pauta / Serviço Público Municipal */
.civic-topic-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.2px;
}
.civic-topic-badge.topic-saude {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}
.civic-topic-badge.topic-transporte {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.civic-topic-badge.topic-obras {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.35);
  color: #fb923c;
}
.civic-topic-badge.topic-seguranca {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.35);
  color: #22d3ee;
}
.civic-topic-badge.topic-educacao {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  color: #c084fc;
}
.civic-topic-badge.topic-politica {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.35);
  color: #facc15;
}


/* ==========================================================================
   NOVA ARQUITETURA: ONEPAGE LANDING, LOGIN UNIFICADO E PAINEL GERENCIAL MASTER
   ========================================================================== */

/* 1. Reset para os containers de visão */
.view-panel-container.landing-view {
  display: none;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #070a12;
  position: relative;
}

.view-panel-container.landing-view.active {
  display: block !important;
}

.view-panel-container.login-view {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 25%, rgba(56, 189, 248, 0.12) 0%, transparent 60%), #070a12;
  position: relative;
  padding: 30px 16px;
}

.view-panel-container.login-view.active {
  display: flex;
}

.view-panel-container.master-manager-view {
  height: 100vh;
  overflow: hidden;
  display: none;
  background: #070a12;
}

.view-panel-container.master-manager-view.active {
  display: flex;
}

.view-panel-container.client-clean-view {
  height: 100vh;
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.view-panel-container.client-clean-view.active {
  display: flex;
}

/* ==========================================================================
   PORTAL EXCLUSIVO DO CLIENTE CONTRATANTE DA PESQUISA (SEM SIDEBAR MUNICIPAL)
   ========================================================================== */
.view-panel-container.client-pesquisas-portal {
  height: 100vh;
  overflow: hidden;
  display: none;
  flex-direction: column;
  background: #080c15;
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.view-panel-container.client-pesquisas-portal.active {
  display: flex !important;
}

.portal-pesq-header {
  height: 68px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  flex-shrink: 0;
  z-index: 50;
}

.portal-pesq-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.portal-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.portal-brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
}

.portal-brand-sub {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-tenant-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #34d399;
}

.portal-pesq-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 12px;
  border-radius: 8px;
}

.portal-user-avatar {
  font-size: 1.15rem;
}

.portal-user-info {
  display: flex;
  flex-direction: column;
}

.portal-user-role {
  font-size: 0.64rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-user-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f1f5f9;
}

.btn-portal-logout {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-portal-logout:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.portal-pesq-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 60px 32px;
  background: radial-gradient(circle at top left, #0f172a 0%, #080c15 100%);
}

.portal-screen-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.portal-screen-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.portal-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.portal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}

.portal-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

.portal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.portal-kpi-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease;
}

.portal-kpi-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
}

.portal-kpi-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portal-kpi-content {
  display: flex;
  flex-direction: column;
}

.portal-kpi-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.portal-kpi-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.portal-kpi-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 3px;
  font-weight: 500;
}

.portal-survey-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.portal-survey-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
}

.portal-survey-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.portal-survey-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.portal-survey-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.portal-survey-grid-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.portal-survey-info-item {
  display: flex;
  flex-direction: column;
}

.portal-survey-info-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
}

.portal-survey-info-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-top: 2px;
}

.portal-survey-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
}

.btn-portal-primary {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
}

.btn-portal-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
}

.btn-portal-sec {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-portal-sec:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.portal-charts-topbar {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-portal-back {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #38bdf8;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-portal-back:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

.portal-charts-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.portal-charts-meta {
  font-size: 0.74rem;
  color: #94a3b8;
  margin-top: 2px;
}

.btn-portal-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-portal-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-portal-action-primary {
  background: #0284c7;
  border: 1px solid #38bdf8;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-portal-action-primary:hover {
  background: #0369a1;
}

.portal-topline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.portal-topline-pill {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.topline-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.topline-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 3px 0 1px 0;
}

.topline-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}

/* ==========================================================================
   ONEPAGE INSTITUCIONAL / LANDING PAGE
   ========================================================================== */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 44px;
  background: rgba(7, 10, 18, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
}

.landing-brand-shield {
  font-size: 1.8rem;
}

.landing-brand-text h1 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.landing-brand-text p {
  font-size: 0.65rem;
  color: #38bdf8;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.landing-nav-links {
  display: flex;
  gap: 32px;
}

.landing-nav-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.2s;
}

.landing-nav-links a:hover {
  color: #38bdf8;
}

.btn-nav-login {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4);
  transition: all 0.2s;
}

.btn-nav-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.55);
}

.landing-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 50px;
  text-align: center;
  position: relative;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-main-title {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  max-width: 960px;
  margin: 0 auto 22px;
  letter-spacing: -0.025em;
}

.hero-main-title .gradient-text {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #f43f5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub-text {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 760px;
  margin: 0 auto 36px;
}

.hero-actions-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.btn-hero-main {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  padding: 15px 36px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.6);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-hero-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px -5px rgba(37, 99, 235, 0.75);
}

.btn-hero-demo {
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-hero-demo:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Mockup Visual Interativo da Hero */
.hero-cockpit-mockup {
  background: rgba(13, 20, 36, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  position: relative;
  text-align: left;
  max-width: 1080px;
  margin: 0 auto;
}

.mockup-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.mockup-dots {
  display: flex;
  gap: 6px;
}

.mockup-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.mockup-dot.red { background: #ef4444; }
.mockup-dot.yellow { background: #eab308; }
.mockup-dot.green { background: #10b981; }

.mockup-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.mockup-kpi {
  background: rgba(7, 10, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}

.mockup-kpi span {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
}

.mockup-kpi strong {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  margin-top: 4px;
}

.mockup-feed-preview {
  display: flex;
  gap: 14px;
}

.mockup-feed-col {
  flex: 1;
  background: rgba(7, 10, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
}

.mockup-post-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: #cbd5e1;
}

/* Grid de Diferenciais */
.landing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}

.section-badge-center {
  text-align: center;
  margin-bottom: 12px;
}

.section-badge-center span {
  font-size: 0.75rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-headline-center {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  max-width: 780px;
  margin: 0 auto 16px;
}

.section-desc-center {
  font-size: 1rem;
  color: #94a3b8;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
}

.features-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.feature-glass-card {
  background: rgba(13, 20, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 34px 28px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.feature-glass-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 35px -10px rgba(0, 0, 0, 0.6);
}

.feature-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.feature-glass-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 10px;
}

.feature-glass-card p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* Planos & Segmentos */
.segments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.segment-card {
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.8) 0%, rgba(7, 10, 18, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 36px 30px;
  position: relative;
}

.segment-card.highlight {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.2);
}

.segment-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.segment-badge.gov {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.segment-badge.eleicoes {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.35);
}

.segment-card h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 12px;
}

.segment-card p {
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 22px;
}

.segment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.segment-list li {
  font-size: 0.86rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.segment-list li span.check {
  color: #10b981;
  font-weight: bold;
}

/* CTA Final da Landing */
.landing-cta-banner {
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 50px 30px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  text-align: center;
  backdrop-filter: blur(12px);
}

.landing-cta-banner h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 12px;
}

.landing-cta-banner p {
  color: #94a3b8;
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto 28px;
}

.landing-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 34px 24px;
  text-align: center;
  color: #64748b;
  font-size: 0.82rem;
}

/* ==========================================================================
   TELA DE LOGIN DEDICADA & UNIFICADA
   ========================================================================== */
.login-card-container {
  width: 100%;
  max-width: 460px;
  background: rgba(13, 20, 36, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  position: relative;
}

.login-card-head {
  text-align: center;
  margin-bottom: 24px;
}

.login-shield-icon {
  font-size: 2.6rem;
  margin-bottom: 10px;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.4));
}

.login-card-head h2 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.login-card-head p {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 5px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.login-field label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #cbd5e1;
}

.login-field input {
  width: 100%;
  background: rgba(7, 10, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 11px 14px;
  color: #fff;
  font-size: 0.88rem;
  transition: all 0.2s;
}

.login-field input:focus {
  border-color: #38bdf8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.btn-submit-unified-login {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.btn-submit-unified-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.6);
}

.login-or-divider {
  display: flex;
  align-items: center;
  margin: 20px 0 16px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.login-or-divider::before,
.login-or-divider::after {
  content: ;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.login-or-divider span {
  padding: 0 10px;
}

.quick-demo-accounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-demo-quick-acc {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px 10px;
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.2s;
}

.btn-demo-quick-acc:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
  color: #fff;
}

.btn-demo-quick-acc strong {
  color: #fff;
  font-size: 0.76rem;
}

.btn-demo-quick-acc span {
  color: #38bdf8;
  font-size: 0.64rem;
}

.login-back-btn {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: #94a3b8;
  font-size: 0.78rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  width: 100%;
}

.login-back-btn:hover {
  color: #fff;
}

/* ==========================================================================
   PAINEL GERENCIAL DO SUPERADMIN MASTER (COM SIDEBAR ESQUERDA)
   ========================================================================== */
.master-sidebar-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.master-sidebar {
  width: 275px;
  min-width: 275px;
  background: #080d1a;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  z-index: 20;
}

.sidebar-scrollable-content {
  padding: 20px 16px;
  overflow-y: auto;
  flex: 1;
}

.master-sidebar-brand-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.master-sidebar-brand-box .brand-crown {
  font-size: 1.6rem;
}

.master-sidebar-brand-box h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.master-sidebar-brand-box span.badge-root {
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fb923c;
  font-weight: 700;
}

/* Card de Usuário Master */
.master-user-info-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.master-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f97316, #ef4444);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.master-user-details strong {
  display: block;
  font-size: 0.8rem;
  color: #fff;
}

.master-user-details span {
  font-size: 0.66rem;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Seletor de Município de Trabalho */
.master-city-context-selector {
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 18px;
}

.master-city-context-selector label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.master-city-context-selector select {
  width: 100%;
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  padding: 7px 9px;
  color: #fff;
  font-size: 0.76rem;
  cursor: pointer;
}

/* Menus de Navegação Lateral */
.master-sidebar-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.master-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  width: 100%;
}

.master-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
}

.master-sidebar-item.active {
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  font-weight: 700;
  border-left: 3px solid #38bdf8;
}

.master-sidebar-item span.icon {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
}

/* Rodapé da Sidebar */
.master-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #060912;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-sidebar-client-preview {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-sidebar-client-preview:hover {
  background: rgba(16, 185, 129, 0.22);
}

.btn-sidebar-logout-system {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-sidebar-logout-system:hover {
  background: rgba(239, 68, 68, 0.18);
}

/* Área Principal de Conteúdo do Master */
.master-main-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: #070a12;
}

.master-content-header {
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(9, 14, 26, 0.75);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.master-header-text h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #fff;
  font-weight: 800;
}

.master-header-text p {
  font-size: 0.76rem;
  color: #94a3b8;
  margin-top: 3px;
}

.master-sections-container {
  padding: 24px 28px;
}

.master-module-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.master-module-panel.active {
  display: flex;
}

/* ==========================================================================
   PAINEL DO CLIENTE (COCKPIT LIMPO & DESPOLUÍDO)
   ========================================================================== */
.client-clean-header {
  height: 64px;
  background: rgba(9, 14, 26, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}

.client-header-brand-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client-official-seal {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.client-official-titles h2 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.client-official-titles p {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
}

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

.client-live-indicator-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 700;
}

.btn-client-export {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-client-export:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-client-exit-session {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-client-exit-session:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Banner de Inspeção Master Discreto no Cockpit do Cliente */
.master-preview-strip {
  background: linear-gradient(90deg, #1e293b, #0f172a);
  border-bottom: 1px solid rgba(249, 115, 22, 0.4);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #fb923c;
  flex-shrink: 0;
}

.master-preview-strip strong {
  color: #fff;
}

.btn-return-master-strip {
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fff;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-return-master-strip:hover {
  background: rgba(249, 115, 22, 0.35);
}


/* ==========================================================================
   REORGANIZAÇÃO DA BARRA DE ABAS & SUB-BARRA DE FILTROS
   ========================================================================== */

/* 1. Barra de Abas Principal (Mais alta, espaçada e elegante) */
.cockpit-tabs-bar {
  height: 48px !important;
  flex-shrink: 0;
  background: rgba(10, 15, 26, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
}

.tabs-list {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #94a3b8;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

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

.nav-tab.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15);
}

.nav-tab .tab-icon {
  font-size: 0.95rem;
}

.nav-tab .counter-badge {
  background: var(--accent-orange);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
}

.cockpit-bar-right-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-live-sync-real {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  padding: 6px 14px;
  border-radius: 7px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-live-sync-real:hover {
  background: rgba(56, 189, 248, 0.22);
  transform: translateY(-1px);
}

/* 2. Sub-Barra de Filtros Contextuais (Dedicada ao Feed e Mapa) */
#tab-social-stream {
  display: none;
  flex-direction: column;
  padding: 10px 18px 14px 18px;
  height: 100%;
  overflow: hidden;
}

#tab-social-stream.active {
  display: flex !important;
}

.radar-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(13, 20, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.filters-left-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.filter-pill-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-pill-item label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-pill-item select {
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  max-width: 220px;
}

.filter-pill-item select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}

.filters-right-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  padding: 6px 12px;
  width: 240px;
  transition: border-color 0.2s;
}

.filter-search-box:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}

.filter-search-box .search-icon {
  font-size: 0.8rem;
  opacity: 0.7;
}

.filter-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.78rem;
  width: 100%;
}

.filter-search-box input::placeholder {
  color: #64748b;
}

.btn-clear-filters {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-clear-filters:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

/* Ajuste do container dividido com a nova sub-barra */
.radar-split-cockpit {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
  overflow: hidden;
}


/* ==========================================================================
   FIX DEFINITIVO: VISIBILIDADE DAS ABAS & PROPORÇÃO AMPLIADA DO MAPA (62%)
   ========================================================================== */

/* Todas as abas começam ocultas */
.cockpit-content-viewport > .tab-view-panel {
  display: none !important;
  height: 100%;
  padding: 10px 18px 14px 18px;
  overflow: hidden;
  flex-direction: column;
}

/* Apenas a aba ativa é exibida em tela cheia */
.cockpit-content-viewport > .tab-view-panel.active {
  display: flex !important;
}

#tab-social-stream.active {
  display: flex !important;
  flex-direction: column;
}

#tab-repercussion.active,
#tab-situation.active,
#tab-copilot.active,
#tab-simulator.active,
#tab-competitors.active {
  display: flex !important;
  flex-direction: column;
  overflow-y: auto !important;
}

/* PROPORÇÃO: MAPA MAIOR (62%) E FEED MAIS COMPACTO (38%) */
.radar-split-cockpit {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 38% calc(62% - 14px) !important;
  gap: 14px !important;
  height: 100% !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.radar-split-cockpit.mode-feed {
  grid-template-columns: 1fr 0fr !important;
  gap: 0 !important;
}
.radar-split-cockpit.mode-feed .cockpit-col-map {
  display: none !important;
}

.radar-split-cockpit.mode-map {
  grid-template-columns: 0fr 1fr !important;
  gap: 0 !important;
}
.radar-split-cockpit.mode-map .cockpit-col-feed {
  display: none !important;
}

.cockpit-col-feed {
  width: 100% !important;
  min-width: 0 !important;
}

.cockpit-col-map {
  width: 100% !important;
  min-width: 0 !important;
}


/* ==========================================================================
   NOVO: BOTÃO DE ACESSO AO PAINEL GERENCIAL DO GABINETE NO CABEÇALHO
   ========================================================================== */
.btn-client-manager-portal {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.22));
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  padding: 7px 15px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.12);
}

.btn-client-manager-portal:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.35));
  border-color: #38bdf8;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
}


/* ==========================================================================
   NOVO: BARRA DE SELEÇÃO DE PERÍODO DOS DADOS (24H, 7D, 15D, 30D)
   ========================================================================== */
.time-period-selector-bar {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  z-index: 10;
}

.period-selector-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.period-icon {
  font-size: 0.95rem;
}

.period-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #94a3b8;
  text-transform: uppercase;
}

.period-pills-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.period-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.period-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.2);
}

.period-pill-btn.active {
  background: rgba(56, 189, 248, 0.16);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

.period-pill-btn.active .period-dot {
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

.period-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
  display: inline-block;
  transition: all 0.2s;
}

.period-selector-right {
  display: flex;
  align-items: center;
}

.period-timestamp-indicator {
  font-size: 0.7rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.period-timestamp-indicator .live-dot-mini {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}


/* ==========================================================================
   NOVO: AMBIENTE DE REPERCUSSÃO & FOCOS DE TENSÃO (COCKPIT E GERENCIAL)
   ========================================================================== */
.repercussion-viewport {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.rep-header-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0.6));
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rep-banner-left {
  max-width: 650px;
}

.rep-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.badge-period-active {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.rep-banner-left h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.rep-banner-left p {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}

.rep-banner-filters {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.rep-filter-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rep-severity-filters,
.group-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-rep-filter,
.btn-group-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

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

.btn-rep-filter.active,
.btn-group-pill.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

.btn-rep-filter.sev-crit.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
}

.btn-rep-filter.sev-high.active {
  background: rgba(249, 115, 22, 0.2);
  border-color: #f97316;
  color: #fb923c;
}

.btn-rep-filter.sev-med.active {
  background: rgba(234, 179, 8, 0.2);
  border-color: #eab308;
  color: #fde047;
}

.btn-rep-filter.sev-low.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.btn-group-pill.pill-oposicao.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
}

.btn-group-pill.pill-situacao.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* LISTAGEM DE CARDS DE REPERCUSSÃO */
.repercussion-list-container,
.mgr-repercussion-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rep-item-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.rep-item-card:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.rep-item-card.sev-critical {
  border-left: 5px solid #ef4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.rep-item-card.sev-high {
  border-left: 5px solid #f97316;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.05) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.rep-item-card.sev-medium {
  border-left: 5px solid #eab308;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.05) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.rep-item-card.sev-low {
  border-left: 5px solid #10b981;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, rgba(15, 23, 42, 0.8) 100%);
}

/* Coluna de Rank */
.rep-rank-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rep-rank-num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.rep-rank-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 2px;
}

/* Conteúdo do Card */
.rep-card-main-content {
  flex: 1;
  min-width: 0;
}

.rep-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.rep-topic-title {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rep-badges-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-sev-tag {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.badge-sev-tag.critical {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
}

.badge-sev-tag.high {
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: #fb923c;
}

.badge-sev-tag.medium {
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.45);
  color: #fde047;
}

.badge-sev-tag.low {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.badge-sec-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.rep-summary-text {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 10px;
}

/* Linha de métricas e atores */
.rep-metrics-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-bottom: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rep-metric-entry strong {
  color: #fff;
}

.rep-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rep-suggestion-box {
  font-size: 0.72rem;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  flex: 1;
}

.rep-suggestion-box strong {
  color: #38bdf8;
}

.rep-card-action-btns {
  display: flex;
  gap: 8px;
}

.btn-rep-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.btn-rep-action:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.btn-rep-action.copilot {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.btn-rep-action.copilot:hover {
  background: rgba(168, 85, 247, 0.3);
  color: #fff;
}

.btn-rep-action.map {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.btn-rep-action.map:hover {
  background: rgba(56, 189, 248, 0.3);
  color: #fff;
}


/* ==========================================================================
   NOVO: PAINEL GERENCIAL DO CLIENTE / GABINETE (LAYOUT COMPLETO)
   ========================================================================== */
.client-manager-view {
  display: none;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #040812;
}

.client-manager-view.active {
  display: flex !important;
}

.client-manager-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.client-manager-sidebar {
  width: 285px;
  min-width: 285px;
  background: #070d1c;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  z-index: 20;
}

@media (max-width: 900px) {
  .btn-toggle-client-sidebar.mobile-only {
    display: inline-flex !important;
  }
  .client-manager-sidebar {
    position: fixed;
    left: -290px;
    top: 0;
    bottom: 0;
    width: 285px;
    min-width: 285px;
    z-index: 99999;
    transition: left 0.25s ease-in-out;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.85);
  }
  .client-manager-sidebar.mobile-open {
    left: 0 !important;
  }
}

@media (min-width: 901px) {
  .btn-toggle-client-sidebar.mobile-only {
    display: none !important;
  }
}

.client-mgr-brand-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.client-mgr-seal {
  font-size: 1.6rem;
}

.client-mgr-brand-box h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.badge-client-type {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.client-mgr-user-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-mgr-avatar {
  font-size: 1.4rem;
}

.client-mgr-user-details strong {
  display: block;
  font-size: 0.82rem;
  color: #fff;
}

.client-mgr-user-details span {
  font-size: 0.68rem;
  color: #34d399;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-return-cockpit {
  width: 100%;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(99, 102, 241, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  transition: all 0.2s;
}

.btn-return-cockpit:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.35));
  border-color: #38bdf8;
  color: #fff;
}

.client-mgr-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.client-mgr-nav-item {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.client-mgr-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.client-mgr-nav-item.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.client-mgr-nav-item .icon {
  font-size: 1.15rem;
}

.client-mgr-nav-item .nav-text span {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
}

.client-mgr-nav-item .nav-text small {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
}

.client-mgr-nav-item.active .nav-text small {
  color: #7dd3fc;
}

.client-mgr-sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-mgr-logout {
  width: 100%;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-mgr-logout:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* ÁREA PRINCIPAL DO CLIENTE */
.client-manager-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #030712;
}

.client-mgr-top-header {
  height: 64px;
  background: rgba(10, 15, 26, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.mgr-breadcrumb {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}

.client-mgr-top-header h1 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

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

.btn-client-primary-action {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: 1px solid #38bdf8;
  color: #fff;
  border-radius: 7px;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
}

.btn-client-primary-action:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
  transform: translateY(-1px);
}

.btn-quick-back-radar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-quick-back-radar:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.client-mgr-content-viewport {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.client-mgr-section {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.client-mgr-section.active {
  display: flex !important;
}

.mgr-section-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mgr-section-intro .intro-left h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.mgr-section-intro .intro-left p {
  font-size: 0.78rem;
  color: #94a3b8;
  max-width: 650px;
}

/* CARDS DE POLÍTICOS NO PAINEL GERENCIAL */
.client-politicians-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.pol-card-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pol-card-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pol-card-box.group-oposicao {
  border-top: 4px solid #ef4444;
}

.pol-card-box.group-situacao {
  border-top: 4px solid #38bdf8;
}

.pol-card-box.group-neutro {
  border-top: 4px solid #eab308;
}

.pol-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pol-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pol-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.pol-name-details h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.pol-group-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}

.pol-group-badge.oposicao {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.pol-group-badge.situacao {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.pol-group-badge.neutro {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #fde047;
}

.pol-score-pill {
  text-align: right;
}

.pol-score-val {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.pol-score-lbl {
  font-size: 0.58rem;
  color: #64748b;
  text-transform: uppercase;
}

.pol-issue-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pol-issue-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 3px;
}

.pol-issue-content {
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.35;
}

.pol-actions-footer {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-pol-action {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.btn-pol-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-pol-action.delete {
  flex: 0 0 34px;
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-pol-action.delete:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* HUB DE RELATÓRIOS */
.reports-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1100px) {
  .reports-hub-grid {
    grid-template-columns: 1fr;
  }
}

.report-export-options-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.report-action-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
}

.report-action-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(15, 23, 42, 0.85);
}

.rep-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.rep-card-info h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.rep-card-info p {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 6px;
}

.rep-card-meta {
  font-size: 0.68rem;
  color: #38bdf8;
  font-weight: 600;
}

.rep-card-actions {
  display: flex;
  gap: 8px;
}

.btn-export-primary {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: 1px solid #38bdf8;
  color: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-export-primary:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
}

.btn-export-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-export-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* FOLHA DE PRÉ-VISUALIZAÇÃO DE RELATÓRIO EXECUTIVO */
.report-live-preview-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: center;
}

.preview-paper-sheet {
  background: #f8fafc;
  color: #0f172a;
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--font-body);
}

.paper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.paper-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paper-seal {
  font-size: 1.8rem;
}

.paper-brand h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.paper-brand p {
  font-size: 0.62rem;
  font-weight: 700;
  color: #475569;
}

.paper-date-badge {
  background: #0f172a;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.paper-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 16px;
  text-align: center;
}

.paper-kpi-item .kpi-l {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  color: #64748b;
}

.paper-kpi-item .kpi-v {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 900;
  color: #0f172a;
}

.paper-kpi-item .kpi-v.text-cyan {
  color: #0284c7;
}

.paper-kpi-item .kpi-v.text-red {
  color: #dc2626;
}

.paper-section-block {
  margin-bottom: 14px;
}

.paper-sec-heading {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 4px;
}

.paper-crises-list,
.paper-actors-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paper-crisis-entry {
  font-size: 0.68rem;
  color: #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dotted #e2e8f0;
}

.paper-crisis-entry strong {
  font-weight: 800;
}

.paper-footer-legal {
  margin-top: 18px;
  border-top: 1px solid #cbd5e1;
  padding-top: 8px;
  font-size: 0.58rem;
  color: #64748b;
  text-align: center;
}

.report-period-selector-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.report-period-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
}

.report-period-pills {
  display: flex;
  gap: 4px;
}

.btn-rep-period-pill {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-rep-period-pill:hover {
  color: #fff;
}

.btn-rep-period-pill.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}


/* =============================================================================
   14. ESTILOS DO MÓDULO ELEITORAL 2026 & DADOS DO TSE
   ============================================================================= */

.electoral-term-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.electoral-term-badge > span:first-child {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c084fc;
}

.badge-mandate-warning {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: pulseWarning 2.5s infinite;
}

@keyframes pulseWarning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.electoral-dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1200px) {
  .electoral-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD DE DADOS OFICIAIS TSE */
.tse-official-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.tse-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tse-title-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tse-seal-mini {
  font-size: 1.8rem;
}

.tse-title-wrap h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.tse-sub-date {
  font-size: 0.72rem;
  color: #94a3b8;
}

.btn-tse-change {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c084fc;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tse-change:hover {
  background: rgba(139, 92, 246, 0.3);
  color: #fff;
}

.tse-kpi-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .tse-kpi-quad {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tse-kpi-item {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.tse-kpi-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.tse-kpi-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  font-family: var(--font-heading);
}

.tse-kpi-sub {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* TABELA DE RESULTADOS TSE */
.tse-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tse-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: left;
}

.tse-results-table th {
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 12px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tse-results-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

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

.badge-status-tse {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
}

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

.badge-status-tse.second {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

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

.badge-status-tse.other {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

/* CARDS DE VIABILIDADE DOS 2º COLOCADOS & LIDERANÇAS */
.electoral-candidates-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.badge-ipe-calc {
  font-size: 0.65rem;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.electoral-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.candidate-electoral-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.candidate-electoral-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
}

.candidate-electoral-card.highlight-second {
  border-left: 4px solid #38bdf8;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.cand-elec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.cand-elec-profile {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cand-elec-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cand-elec-info h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.cand-elec-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}

.cand-ipe-score {
  text-align: right;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cand-ipe-number {
  font-size: 1.25rem;
  font-weight: 900;
  color: #38bdf8;
  font-family: var(--font-heading);
}

.cand-ipe-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
}

.cand-projection-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.cand-target-role {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.75rem;
}

.viability-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.viability-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cand-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.7rem;
  margin-top: 10px;
}

.cand-detail-entry {
  background: rgba(255, 255, 255, 0.02);
  padding: 8px;
  border-radius: 6px;
}

.cand-detail-entry strong {
  display: block;
  font-size: 0.72rem;
  color: #f1f5f9;
  margin-top: 2px;
}

/* SIMULADOR DE SUCESSÃO (COLUNA DIREITA) */
.sim-whatif-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: sticky;
  top: 10px;
}

.sim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-title-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sim-icon {
  font-size: 1.6rem;
}

.sim-title-group h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.sim-title-group p {
  font-size: 0.68rem;
  color: #94a3b8;
}

.btn-sim-reset {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-sim-reset:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sim-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.sim-slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
}

.slider-val-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

.sim-slider-row input[type="range"] {
  width: 100%;
  accent-color: #38bdf8;
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
}

.slider-hints {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: #64748b;
}

.sim-control-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-control-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
}

.sim-control-field select {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  outline: none;
}

/* SAÍDA DE PROJEÇÃO CALCULADA */
.sim-projection-output {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
}

.output-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.output-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

.output-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.proj-bars-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.proj-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proj-bar-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
}

.proj-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}

.proj-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
}

.ai-strategic-verdict {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.ai-strategic-verdict strong {
  color: #38bdf8;
}

/* ESTILOS DA ABA NO COCKPIT AO VIVO */
.electoral-cockpit-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  width: 100%;
}

.electoral-banner-strip {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.badge-electoral-live {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #c084fc;
}

.banner-strip-left h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 4px 0;
}

.banner-strip-left p {
  font-size: 0.75rem;
  color: #cbd5e1;
  max-width: 720px;
}

.banner-strip-right {
  display: flex;
  gap: 10px;
}

.btn-tse-open-modal {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #e9d5ff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tse-open-modal:hover {
  background: rgba(139, 92, 246, 0.4);
  color: #fff;
}

.btn-open-mgr-electoral {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-open-mgr-electoral:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.electoral-cockpit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 992px) {
  .electoral-cockpit-grid {
    grid-template-columns: 1fr;
  }
}

.cockpit-electoral-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
}

.tse-sub-tag {
  font-size: 0.6rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

.cockpit-electoral-card h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.tse-live-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.tse-summary-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.tse-summary-chip span {
  font-size: 0.6rem;
  color: var(--text-dim);
}

.tse-summary-chip strong {
  font-size: 0.85rem;
  color: #fff;
  margin-top: 2px;
}

.cockpit-candidates-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-cand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  font-size: 0.72rem;
}

.mini-cand-row.elected {
  border-left: 3px solid #10b981;
}

.mini-cand-row.second {
  border-left: 3px solid #38bdf8;
}

.mini-cand-left {
  display: flex;
  gap: 8px;
  align-items: center;
}

.electoral-projections-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.cockpit-proj-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

.cockpit-proj-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.75rem;
}

.badge-viab-pill {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
}

.badge-viab-pill.very-high {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.badge-viab-pill.high {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

/* SIMULADOR EXPRESS */
.electoral-simulator-express {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
}

.express-sim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.badge-sim-tag {
  font-size: 0.6rem;
  font-weight: 800;
  color: #f59e0b;
}

.express-sim-head h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

.sim-quick-toggles {
  display: flex;
  gap: 8px;
}

.btn-sim-quick-preset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sim-quick-preset:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.express-sim-body {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: center;
}

@media (max-width: 868px) {
  .express-sim-body {
    grid-template-columns: 1fr;
  }
}

.express-sim-analysis {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #94a3b8;
}

/* MODAL DE IMPORTAÇÃO DO TSE */
.modal-box-tse {
  max-width: 860px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.tse-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tse-fast-presets-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px;
}

.presets-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.68rem;
}

.presets-title {
  font-weight: 800;
  color: #38bdf8;
}

.presets-sub {
  color: #94a3b8;
}

.presets-buttons-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .presets-buttons-row {
    grid-template-columns: 1fr;
  }
}

.btn-preset-tse {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.btn-preset-tse:hover,
.btn-preset-tse.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
}

.btn-preset-tse .preset-icon {
  font-size: 1.4rem;
}

.btn-preset-tse strong {
  display: block;
  font-size: 0.78rem;
  color: #fff;
}

.btn-preset-tse small {
  font-size: 0.62rem;
  color: #94a3b8;
  display: block;
  margin-top: 2px;
}

.tse-uploader-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uploader-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
}

.btn-download-sample {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.tse-dropzone-box {
  background: rgba(0, 0, 0, 0.25);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tse-dropzone-box:hover,
.tse-dropzone-box.drag-over {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.05);
}

.dropzone-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.dropzone-content strong {
  display: block;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 4px;
}

.dropzone-content p {
  font-size: 0.68rem;
  color: #94a3b8;
}

.dropzone-content code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 4px;
  border-radius: 4px;
  color: #cbd5e1;
}

.tse-file-badge-preview {
  margin-top: 10px;
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.tse-preview-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
}

.preview-count-tag {
  font-size: 0.65rem;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 800;
}

.tse-preview-table-wrap {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.tse-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  text-align: left;
}

.tse-preview-table th {
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 10px;
  color: #94a3b8;
  font-size: 0.65rem;
  font-weight: 800;
  position: sticky;
  top: 0;
}

.tse-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

/* REGRAS DE IMPRESSÃO LIMPA (PRINT-READY) */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
    height: auto !important;
  }

  .client-clean-header,
  .cockpit-tabs-bar,
  .client-manager-sidebar,
  .client-mgr-top-header,
  .btn-client-manager-portal,
  .btn-client-export,
  .btn-client-exit-session,
  .time-period-selector-bar,
  .report-action-card,
  .btn-quick-back-radar {
    display: none !important;
  }

  .client-manager-main,
  .client-mgr-content-viewport {
    padding: 0 !important;
    background: #fff !important;
  }

  .preview-paper-sheet {
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}



/* =============================================================================
   ESTILOS DO NOVO AMBIENTE DO CLIENTE (MENUS & SUBMENUS INTELIGENTES)
   ============================================================================= */

/* Banner de Inspeção Master no Ambiente do Cliente */
#masterClientManagerStrip {
  background: linear-gradient(90deg, #7c2d12, #991b1b);
  border-bottom: 1px solid #f87171;
  color: #fff;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#masterClientManagerStrip.hidden {
  display: none !important;
}

.btn-return-client-mgr-strip {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-return-client-mgr-strip:hover {
  background: rgba(56, 189, 248, 0.4);
}

/* Subnavegação por Abas dentro das Seções do Cliente */
.client-subnav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}

.client-subnav-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.client-subnav-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.client-subnav-tab.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.2));
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.2);
}

.badge-sub-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Painéis de Conteúdo dos Submenus */
.client-sub-panel {
  display: none;
  animation: fadeInPanel 0.25s ease-in-out;
}

.client-sub-panel.active {
  display: block;
}

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

/* Badges e Pílulas de Arrobas (@) de Redes Sociais */
.handle-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  margin: 2px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
}

.handle-badge.insta {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.3);
}

.handle-badge.twitter {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
}

.handle-badge.tiktok {
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.3);
}

.handle-badge.facebook {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
}

.btn-test-handle {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-test-handle:hover {
  background: rgba(16, 185, 129, 0.3);
  color: #fff;
  border-color: #34d399;
}

.btn-edit-handle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-edit-handle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Credenciais do Gabinete */
.credentials-cabinet-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  margin-top: 14px;
}

.cred-cabinet-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 22px;
}

.cred-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cred-field-row:last-child {
  border-bottom: none;
}

.cred-field-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #94a3b8;
}

.cred-val-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: monospace;
  font-size: 0.85rem;
  color: #38bdf8;
  font-weight: 700;
}

.btn-copy-cred {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy-cred:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #fff;
}

/* Conectores no Cliente */
.connectors-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.api-connector-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
}

.connector-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.connector-badge-status.status-connected {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.connector-badge-status.status-waiting {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
}

/* Overview KPIs */
.overview-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.kpi-sub-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
}

.kpi-sub-card .lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.kpi-sub-card .val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}


/* =============================================================================
   ESTILOS PARA O RADAR INTEGRADO AO AMBIENTE DO CLIENTE & TELAS INDEPENDENTES
   ============================================================================= */

/* Botão Acessar Ambiente do Cliente na tabela do SuperAdmin */
.btn-table-action.client-view-btn {
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.btn-table-action.client-view-btn:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Seção do Radar Embutido no Ambiente do Cliente */
#clientSecRadar {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  display: none;
  flex-direction: column !important;
  overflow: hidden !important;
}

#clientSecRadar.active {
  display: flex !important;
}

.radar-embedded-header-bar {
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.reh-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reh-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reh-title-box h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  margin: 0;
}

.reh-beacon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-dot 1.2s infinite;
  display: inline-block;
}

.badge-live-tag {
  font-size: 0.62rem;
  font-weight: 800;
  color: #86efac;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 12px;
}

.reh-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0;
}

.reh-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-external-screen {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-external-screen:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.btn-launch-popout {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-launch-popout:hover {
  background: rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

.radar-embedded-workspace {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}

.client-radar-master-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* FIX DEFINITIVO: MAPA NUNCA CORTA E PREENCHE TODA A ALTURA */
.cockpit-column-map,
.cockpit-col-map {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 480px !important;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  position: relative !important;
  overflow: hidden !important;
}

#campinasMap,
#map,
.cockpit-leaflet-map-element,
.leaflet-map-wrapper {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 440px !important;
  position: relative !important;
  z-index: 1 !important;
  background: #090d16 !important;
}

/* FIX DEFINITIVO: TAB DE FOCOS CRÍTICOS ROLA E CARREGA CARDS PERFEITAMENTE */
#tab-repercussion {
  height: 100% !important;
  overflow-y: auto !important;
  padding: 16px 22px 30px 22px !important;
}

#tab-repercussion.active {
  display: flex !important;
  flex-direction: column !important;
}

.cockpit-reperc-cards-grid,
.repercussion-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 14px !important;
  padding-bottom: 24px !important;
}

/* Toast Global de Notificação */
.saas-toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid #38bdf8;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.35);
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 99999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s ease-in-out;
  pointer-events: none;
}

.saas-toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   MELHORIAS VISUAIS: TERMÔMETRO DE SECRETARIAS, ELEIÇÕES 2026 E BOTÕES DE RADAR
   ========================================================================== */

/* 1. Header do Radar e Botões de Compartilhamento */
.client-header-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-header-link {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-header-link:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.btn-header-popout {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-header-popout:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #fff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Oculta tab redundante do portal quando já estiver dentro do clientSecRadar */
#clientSecRadar .nav-tab-client-portal {
  display: none !important;
}

/* 2. Aba 3: Termômetro de Secretarias */
#tab-situation {
  height: 100% !important;
  overflow-y: auto !important;
  padding: 16px 20px 30px 20px !important;
}

#tab-situation.active {
  display: flex !important;
  flex-direction: column !important;
}

.situation-room-cockpit-container {
  width: 100%;
}

.situation-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.situation-summary-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.situation-summary-card p {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-bottom: 18px;
}

.situation-grid-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .situation-grid-layout {
    grid-template-columns: 1fr;
  }
}

.situation-chart-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 18px;
}

.secretarias-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sec-list-header {
  display: flex;
  justify-content: space-between;
  padding: 0 4px 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.sec-cards-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.secretaria-perf-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.secretaria-perf-card:hover {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(3px);
}

.secretaria-perf-card.critical { border-left: 4px solid #ef4444; }
.secretaria-perf-card.warning { border-left: 4px solid #f97316; }
.secretaria-perf-card.attention { border-left: 4px solid #3b82f6; }
.secretaria-perf-card.moderate { border-left: 4px solid #06b6d4; }
.secretaria-perf-card.stable { border-left: 4px solid #8b5cf6; }
.secretaria-perf-card.good { border-left: 4px solid #eab308; }

.sec-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sec-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #fff;
}

.sec-card-badge-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-status-badge {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.sec-status-badge.critical { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.sec-status-badge.warning { background: rgba(249, 115, 22, 0.2); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.4); }
.sec-status-badge.attention { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.sec-status-badge.moderate { background: rgba(6, 182, 212, 0.2); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.4); }
.sec-status-badge.stable { background: rgba(139, 92, 246, 0.2); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.4); }
.sec-status-badge.good { background: rgba(234, 179, 8, 0.2); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.4); }

.sec-pct-tag {
  font-size: 0.82rem;
  font-weight: 800;
}

.sec-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.sec-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.sec-card-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.72rem;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.sec-issue-text {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  line-height: 1.35;
}

.sec-meta-info {
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.7rem;
}

.sec-meta-info strong {
  color: #fff;
}

.sec-action-recommendation {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.68rem;
  display: flex;
  gap: 6px;
  align-items: center;
  border-left: 2px solid var(--accent-cyan);
}

.rec-label {
  color: var(--accent-cyan);
  font-weight: 700;
  white-space: nowrap;
}

.rec-text {
  color: #94a3b8;
}

/* 3. Eleições 2026 & Matriz de Sucessão */
.electoral-grid-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 16px;
}

.electoral-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.electoral-card.highlight-succession {
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.6) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.electoral-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.electoral-card-head .icon {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.electoral-card-head h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.electoral-card-head span {
  font-size: 0.72rem;
  color: #94a3b8;
}

.succession-profile-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  border: 2px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.profile-info strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.profile-info span {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 6px;
}

.approval-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
}

.transfer-potential-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px;
}

.transfer-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.transfer-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.transfer-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #10b981 100%);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.transfer-metrics {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #94a3b8;
}

.electoral-cards-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   DOSSIÊ EXECUTIVO EM PAPEL TIMBRADO (RELATÓRIOS & DOSSIÊS)
   ========================================================================== */
.report-paper-container {
  display: flex;
  justify-content: center;
  padding: 24px 10px 60px 10px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 700px;
  overflow-x: auto;
}

.report-paper-sheet {
  background: #ffffff !important;
  color: #0f172a !important;
  width: 100%;
  max-width: 860px;
  min-height: 1000px;
  padding: 44px 50px;
  border-radius: 4px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.paper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 18px;
  margin-bottom: 24px;
  gap: 16px;
}

.paper-seal {
  font-size: 2.8rem;
  line-height: 1;
}

.paper-titles {
  flex: 1;
}

.paper-titles h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 2px 0;
  letter-spacing: 0.5px;
}

.paper-titles p {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.paper-doc-badge {
  display: inline-block;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.paper-meta {
  text-align: right;
  font-size: 0.75rem;
  color: #334155;
  line-height: 1.4;
}

.paper-executive-summary {
  margin-bottom: 26px;
}

.paper-section-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
  border-left: 4px solid #0284c7;
  padding-left: 10px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.paper-kpis-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.paper-kpi-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.paper-kpi-cell .lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.paper-kpi-cell .val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.paper-kpi-cell .sub {
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 4px;
}

.paper-section-block {
  margin-bottom: 26px;
}

.paper-reperc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paper-crisis-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #ef4444;
  border-radius: 4px;
  padding: 12px 16px;
}

.pci-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pci-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #0f172a;
}

.pci-rank {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
}

.pci-bairro {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.pci-severity {
  font-size: 0.68rem;
  font-weight: 800;
  color: #b91c1c;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: 12px;
}

.pci-desc {
  font-size: 0.76rem;
  color: #334155;
  line-height: 1.45;
  margin: 0 0 8px 0;
}

.pci-footer {
  display: flex;
  gap: 16px;
  font-size: 0.7rem;
  color: #64748b;
  border-top: 1px dashed #cbd5e1;
  padding-top: 6px;
}

.pci-footer strong {
  color: #0f172a;
}

.paper-comp-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.paper-comp-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px 14px;
}

.comp-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.comp-id {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-avatar {
  font-size: 1.3rem;
}

.comp-id strong {
  display: block;
  font-size: 0.85rem;
  color: #0f172a;
}

.comp-id small {
  color: #64748b;
  font-size: 0.7rem;
}

.comp-score {
  text-align: right;
  font-size: 0.72rem;
  color: #334155;
}

.comp-sentiment-tag {
  display: block;
  font-size: 0.65rem;
  color: #dc2626;
  font-weight: 700;
}

.comp-issue-quote {
  font-size: 0.72rem;
  color: #334155;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  line-height: 1.35;
}

.paper-footer {
  margin-top: 24px;
  border-top: 1px solid #cbd5e1;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #64748b;
}

/* =============================================================================
   TIMBRE OFICIAL, BRASÃO MUNICIPAL & CHANCELA EXECUTIVA (A4 HD)
   ============================================================================= */

.paper-official-timbre-header {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 22px;
}

.paper-timbre-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.paper-protocol-tag {
  background: #f1f5f9;
  color: #0f172a;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.62rem;
  border: 1px solid #cbd5e1;
}

.paper-official-brasao-svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.paper-gov-entity {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #1e3a8a;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.paper-badges-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.paper-doc-tag-micro {
  font-size: 0.62rem;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.paper-hash-seal {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6rem;
  color: #64748b;
}

/* Bloco de Assinaturas Executivas */
.paper-signatures-block {
  margin-top: 28px;
  border-top: 2px solid #0f172a;
  padding-top: 16px;
  page-break-inside: avoid;
  break-inside: avoid;
}

.paper-sig-intro {
  margin-bottom: 18px;
  text-align: center;
}

.paper-sig-intro-title {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #0f172a;
  text-transform: uppercase;
}

.paper-sig-intro-sub {
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 2px;
}

.paper-signatures-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 16px;
  align-items: end;
}

.paper-sig-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.paper-sig-cursive-preview {
  font-family: 'Brush Script MT', 'Segoe Script', 'Great Vibes', cursive, sans-serif;
  font-size: 1.25rem;
  color: #1e3a8a;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.85;
}

.paper-sig-line {
  width: 90%;
  height: 1px;
  background: #0f172a;
  margin: 4px 0 6px 0;
}

.paper-sig-name {
  font-size: 0.76rem;
  color: #0f172a;
  letter-spacing: 0.3px;
}

.paper-sig-role {
  font-size: 0.68rem;
  color: #334155;
  font-weight: 600;
}

.paper-sig-dep {
  font-size: 0.62rem;
  color: #64748b;
}

.paper-sig-digital-mark {
  font-size: 0.58rem;
  font-weight: 700;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 6px;
}

.paper-sig-validation {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px;
}

.paper-qr-box {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.paper-qr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.64rem;
}

.paper-qr-text .qr-title {
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.5px;
}

.paper-qr-text .qr-hash code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  color: #1e40af;
  font-size: 0.6rem;
}

.paper-qr-text .qr-date {
  color: #64748b;
}

.paper-qr-text .qr-url {
  color: #2563eb;
  font-weight: 600;
}

/* @media print de Alta Definição A4 */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 14mm 14mm 14mm;
  }
  
  html, body {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  body.is-printing-report * {
    visibility: hidden;
  }
  
  body.is-printing-report #reportPaperSheet,
  body.is-printing-report #reportPaperSheet * {
    visibility: visible;
  }
  
  #reportPaperSheet {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }
  
  .paper-section-block,
  .paper-executive-summary,
  .paper-chapas-comparison,
  .paper-table-battleground,
  .paper-signatures-block,
  .paper-directives-grid,
  .paper-card-highlight,
  .paper-profile-card {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .paper-table-battleground thead {
    display: table-header-group;
  }

  .paper-table-battleground tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .crisis-alerts-drawer,
  .crisis-alerts-backdrop,
  .live-crisis-toast,
  .header-right-actions,
  .report-engine-toolbar,
  .report-dynamic-filters-row,
  .client-subnav-container,
  .client-master-header,
  .header {
    display: none !important;
    visibility: hidden !important;
  }
}

/* =============================================================================
   ESTILOS - INTELIGÊNCIA VEREADORES 2024 (TSE OFICIAL)
   ============================================================================= */

.vereadores-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
}

.tse-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 18px;
}

.tse-view-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tse-view-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tse-view-pill:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.tse-view-pill.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0.4) 100%);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.tse-search-filter-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tse-input-search {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 12px;
  color: #fff;
  font-size: 0.82rem;
  min-width: 210px;
  outline: none;
  transition: border-color 0.2s;
}

.tse-input-search:focus {
  border-color: #38bdf8;
}

.tse-select-filter {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 12px;
  color: #cbd5e1;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
}

/* Zonas Eleitorais Grid */
.ze-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.ze-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.ze-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.ze-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}

.ze-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.ze-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.ze-sub {
  font-size: 0.74rem;
  color: #94a3b8;
}

.ze-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  text-align: center;
}

.ze-metric-item .val {
  font-size: 0.9rem;
  font-weight: 800;
  color: #f8fafc;
}

.ze-metric-item .lbl {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.ze-top-candidate {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 10px;
}

.ze-top-candidate .champ-lbl {
  font-size: 0.65rem;
  color: #34d399;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ze-top-candidate .champ-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ze-card-pauta {
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid #38bdf8;
}

/* Demografia Split Grid */
.demo-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 992px) {
  .demo-split-grid {
    grid-template-columns: 1fr;
  }
}

.demo-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.demo-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}

/* Sexo / Gênero Split */
.gender-bar-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gender-split-track {
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.gender-female-fill {
  background: linear-gradient(90deg, #ec4899 0%, #f43f5e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  transition: width 0.6s ease;
}

.gender-male-fill {
  background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  transition: width 0.6s ease;
}

.gender-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gender-stat-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.gender-stat-box.female {
  border-top: 3px solid #ec4899;
}

.gender-stat-box.male {
  border-top: 3px solid #0ea5e9;
}

.gender-stat-box .g-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 4px;
}

.gender-stat-box .g-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.gender-stat-box .g-desc {
  font-size: 0.7rem;
  color: #cbd5e1;
  margin-top: 4px;
}

/* Faixa Etária Rows */
.age-pyramid-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.age-row-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.age-row-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
}

.age-row-header .age-lbl {
  color: #fff;
}

.age-row-header .age-pct {
  color: #38bdf8;
  font-weight: 800;
}

.age-bar-track {
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.age-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
  border-radius: 4px;
}

.age-row-foco {
  font-size: 0.68rem;
  color: #94a3b8;
}

/* Regiões / Macrorregiões Grid */
.region-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.region-elec-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  border-top: 3px solid #38bdf8;
}

.region-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.region-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.region-votes-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.region-councils-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.region-council-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
}

/* Badges de Classificação & Alinhamento */
.badge-qp {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.badge-sobra {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.badge-gov {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.badge-opos {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.badge-indep {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Quociente Eleitoral Explanation Box */
.qe-explainer-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 20px;
}

.qe-formula-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
  border: 1px dashed rgba(56, 189, 248, 0.3);
}

.qe-formula-item {
  text-align: center;
}

.qe-formula-item .f-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: #38bdf8;
}

.qe-formula-item .f-lbl {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.qe-operator {
  font-size: 1.4rem;
  font-weight: 900;
  color: #64748b;
}

.bancadas-bars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.bancada-item-card {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.bancada-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.bancada-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.bancada-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* =============================================================================
   DRILLDOWN & CRUZAMENTO DINÂMICO DE DADOS ELEITORAIS
   ============================================================================= */

.saas-modal-box.modal-box-xl {
  max-width: 1080px;
  width: 95vw;
  height: 90vh;
  max-height: 90vh;
  background: #090e1a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 25px 60px rgba(0,0,0,0.95), 0 0 30px rgba(56, 189, 248, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.drilldown-modal-body {
  padding: 20px 24px;
  overflow-y: auto !important;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(15, 23, 42, 0.7);
}

.drilldown-modal-body::-webkit-scrollbar,
.table-responsive-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.drilldown-modal-body::-webkit-scrollbar-track,
.table-responsive-wrapper::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 4px;
}

.drilldown-modal-body::-webkit-scrollbar-thumb,
.table-responsive-wrapper::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.8);
}

.drilldown-modal-body::-webkit-scrollbar-thumb:hover,
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.85);
}

/* Tabela de Candidatos e Suplentes com Rolagem e Header Sticky */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 520px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(15, 23, 42, 0.7);
}

.drilldown-modal-body .saas-clients-table-card {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.85);
  border-radius: 10px;
}

.drilldown-modal-body .table-responsive-wrapper {
  max-height: 480px;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

.vereadores-dashboard .table-responsive-wrapper {
  max-height: 600px;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

.table-responsive-wrapper .saas-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #0f172a !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.drilldown-nav-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -6px;
}

.btn-drilldown-back {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #38bdf8;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.btn-drilldown-back:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
}

.drilldown-hero-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.7) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.drilldown-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.drilldown-avatar-huge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  border: 2px solid rgba(56, 189, 248, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.drilldown-hero-info h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px 0;
}

.drilldown-hero-info .meta {
  font-size: 0.8rem;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.drilldown-kpi-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .drilldown-kpi-quad {
    grid-template-columns: repeat(2, 1fr);
  }
}

.drilldown-kpi-box {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.drilldown-kpi-box .icon {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 1.2rem;
  opacity: 0.4;
}

.drilldown-kpi-box .lbl {
  font-size: 0.68rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 4px;
}

.drilldown-kpi-box .val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.drilldown-kpi-box .sub {
  font-size: 0.72rem;
  color: #38bdf8;
  margin-top: 4px;
  font-weight: 600;
}

/* Gráficos / Barras de Cruzamento */
.drilldown-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .drilldown-section-grid {
    grid-template-columns: 1fr;
  }
}

.drilldown-card-panel {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 16px;
}

.drilldown-card-panel h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drilldown-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.2s;
  cursor: pointer;
}

.drilldown-bar-item:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
}

.drilldown-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 700;
}

.drilldown-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.drilldown-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #38bdf8 0%, #10b981 100%);
}

.clickable-interactive {
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.clickable-interactive:hover {
  transform: translateY(-2px);
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25) !important;
}

.click-hint-pill {
  font-size: 0.65rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* =============================================================================
   MÓDULO PREFEITO TSE 360º & SIMULADOR DE CHAPAS 2028
   ============================================================================= */

.mayor-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
}

.cenarios-simulador-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 16px;
}

.cenario-const-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.cenario-const-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.cenario-const-text h4 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 4px 0;
}

.cenario-const-text p {
  color: #cbd5e1;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
}

.chapas-builder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px) {
  .chapas-builder-grid {
    grid-template-columns: 1fr;
  }
}

.chapa-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.chapa-card.oposicao {
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.08);
}

.chapa-card.situacao {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.08);
}

.chapa-card.terceira {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08);
}

.chapa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapa-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chapa-title h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.chapa-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.chapa-badge.badge-opos {
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
}

.chapa-badge.badge-gov {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.chapa-badge.badge-third {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.chapa-synergy-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chapa-select-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chapa-select-row label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
}

.sim-select {
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  width: 100%;
}

.sim-select:focus {
  border-color: #38bdf8;
}

/* Seletor de Partidos e Pills de Coligação */
.chapa-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-party-select {
  max-width: 110px;
  background: #0f172a;
  border-color: rgba(56, 189, 248, 0.4);
  font-weight: 800;
  color: #38bdf8;
  cursor: pointer;
}

.chapa-card.oposicao .sim-party-select {
  border-color: rgba(236, 72, 153, 0.4);
  color: #f472b6;
}

.chapa-card.terceira .sim-party-select {
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

.chapa-coalition-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

.party-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.party-pill-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.party-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.party-pill-btn.active.opos {
  background: rgba(236, 72, 153, 0.25);
  border-color: #ec4899;
  color: #f472b6;
  font-weight: 900;
}

.party-pill-btn.active.gov {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 900;
}

.party-pill-btn.active.terc {
  background: rgba(251, 191, 36, 0.25);
  border-color: #fbbf24;
  color: #fbbf24;
  font-weight: 900;
}

.chapa-kpi-summary {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapa-kpi-item {
  display: flex;
  flex-direction: column;
}

.chapa-kpi-item .k-lbl {
  font-size: 0.65rem;
  color: #94a3b8;
}

.chapa-kpi-item .k-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
}

/* Arena de Batalha Eleitoral 2028 */
.battle-arena-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.75) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.battle-arena-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.battle-arena-head h3 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Probabilidade de Vitoria Gauge */
.prob-win-gauge-card {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.prob-win-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.prob-track {
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  position: relative;
}

.prob-bar-opos {
  background: linear-gradient(90deg, #ec4899 0%, #f43f5e 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  transition: width 0.4s ease;
}

.prob-bar-gov {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  transition: width 0.4s ease;
}

/* Grid de Inteligencia Estrategica SWOT */
.swot-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px) {
  .swot-intelligence-grid {
    grid-template-columns: 1fr;
  }
}

.swot-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.swot-box.box-opos {
  border-left: 4px solid #ec4899;
}

.swot-box.box-gov {
  border-left: 4px solid #38bdf8;
}

.swot-box.box-battle {
  border-left: 4px solid #f59e0b;
}

.swot-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}

.swot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.swot-list li {
  display: block;
  font-size: 0.80rem;
  color: #cbd5e1;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.2s ease;
}

.swot-list li:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.swot-list li strong {
  color: #f8fafc;
  font-weight: 700;
}

.swot-list li strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 0.84rem;
  color: #ffffff;
}

.swot-box.box-opos .swot-list li strong:first-child {
  color: #f472b6;
}

.swot-box.box-gov .swot-list li strong:first-child {
  color: #38bdf8;
}

.swot-box.box-battle .swot-list li strong:first-child {
  color: #fbbf24;
}

/* =============================================================================
   ESTILOS - DOSSIÊS ESTRATÉGICOS TIMBRADOS (CAMPINAS 2028 & TSE 360º)
   ============================================================================= */

.paper-alert-ineligibility {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  color: #7f1d1d;
  line-height: 1.5;
}

.paper-alert-ineligibility strong {
  color: #991b1b;
}

.paper-chapas-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.paper-chapa-card {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paper-chapa-card.oposicao {
  border-top: 4px solid #ef4444;
}

.paper-chapa-card.situacao {
  border-top: 4px solid #3b82f6;
}

.paper-chapa-card.terceira {
  border-top: 4px solid #f59e0b;
}

.paper-chapa-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}

.paper-chapa-badge.opos { background: #fee2e2; color: #991b1b; }
.paper-chapa-badge.gov { background: #dbeafe; color: #1e40af; }
.paper-chapa-badge.terc { background: #fef3c7; color: #92400e; }

.paper-chapa-names {
  margin: 0;
}

.paper-chapa-names h4 {
  margin: 0 0 2px 0;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

.paper-chapa-names p {
  margin: 0;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 600;
}

.paper-chapa-vice-box {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  padding: 10px;
  font-size: 0.75rem;
  color: #334155;
  line-height: 1.45;
}

.paper-chapa-vice-box strong {
  color: #0f172a;
}

.paper-prob-meter {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
}

.paper-prob-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.paper-prob-head span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}

.paper-prob-track {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 8px;
}

.paper-prob-fill-gov {
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  transition: width 0.3s ease;
}

.paper-prob-fill-opos {
  background: #dc2626;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  transition: width 0.3s ease;
}

.paper-table-battleground {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 0.78rem;
}

.paper-table-battleground th {
  background: #f1f5f9;
  color: #0f172a;
  text-align: left;
  padding: 8px 10px;
  font-weight: 800;
  border-bottom: 2px solid #cbd5e1;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.paper-table-battleground td {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

.paper-directives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.paper-directive-col {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px;
  background: #fafafa;
}

.paper-directive-col.opos { border-top: 3px solid #ef4444; }
.paper-directive-col.gov { border-top: 3px solid #3b82f6; }

.paper-directive-col h4 {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.paper-directive-list {
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.74rem;
  color: #334155;
  line-height: 1.45;
}

.paper-directive-list strong {
  color: #0f172a;
}

.paper-methodology-note {
  font-size: 0.68rem;
  color: #64748b;
  border-top: 1px solid #cbd5e1;
  padding-top: 12px;
  margin-top: 16px;
  line-height: 1.4;
}

/* =============================================================================
   MOTOR DE RELATÓRIOS DINÂMICOS & BARRA DE PARÂMETROS
   ============================================================================= */

.report-engine-toolbar {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report-engine-main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.report-model-select-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 320px;
}

.report-model-select-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.report-model-select {
  flex: 1;
  background: #0f172a;
  border: 1px solid #38bdf8;
  color: #f8fafc;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

.report-engine-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-report-recalc {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-report-recalc:hover {
  background: #38bdf8;
  color: #0f172a;
}

.report-dynamic-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.report-filter-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 8px;
}

.report-filter-pill label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
}

.report-filter-pill select {
  background: #1e293b;
  border: 1px solid #475569;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.report-sync-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #4ade80;
  font-weight: 700;
  margin-left: auto;
  background: rgba(34, 197, 94, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

/* Elementos Visuais das Folhas Timbradas dos Relatórios */
.paper-badge-risk {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}
.paper-badge-risk.critical { background: #fee2e2; color: #991b1b; }
.paper-badge-risk.high { background: #ffedd5; color: #c2410c; }
.paper-badge-risk.medium { background: #fef9c3; color: #854d0e; }
.paper-badge-risk.low { background: #dcfce7; color: #166534; }

.paper-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.paper-grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.paper-card-highlight {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #3b82f6;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.76rem;
  color: #1e293b;
  line-height: 1.45;
}

.paper-card-highlight.danger { border-left-color: #ef4444; }
.paper-card-highlight.warning { border-left-color: #f59e0b; }
.paper-card-highlight.success { border-left-color: #10b981; }

.paper-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin-bottom: 16px;
}

.paper-profile-avatar {
  font-size: 2.2rem;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paper-profile-info {
  flex: 1;
}

.paper-profile-info h4 {
  margin: 0 0 2px 0;
  font-size: 1.1rem;
  color: #0f172a;
  font-weight: 800;
}

.paper-profile-info p {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

.paper-profile-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.paper-stats-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.paper-stat-pill {
  flex: 1;
  min-width: 120px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

.paper-stat-pill .lbl {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

.paper-stat-pill .val {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  margin-top: 2px;
}

.paper-quote-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.74rem;
  color: #334155;
  line-height: 1.45;
}

.paper-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.68rem;
  color: #64748b;
}

.paper-quote-head strong {
  color: #0f172a;
}

/* ==========================================================================
   MÓDULO: 645 MUNICÍPIOS DO ESTADO DE SÃO PAULO — CONTROLES E SELETORES
   ========================================================================== */

.master-city-search-box input {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.master-city-search-box input:focus {
  border-color: #38bdf8 !important;
  outline: none;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.sp-category-chips-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 18px 4px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.sp-category-chip {
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sp-category-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.sp-category-chip.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.sp-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.4);
}

.sp-page-info {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 500;
}

.sp-pagination-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sp-page-btn {
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-page-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}

.sp-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.1);
  color: #64748b;
}

.sp-current-page-label {
  font-size: 0.74rem;
  color: #cbd5e1;
  font-weight: 600;
  min-width: 90px;
  text-align: center;
}

.btn-city-switcher-badge {
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  margin-top: 2px;
  display: inline-block;
  transition: opacity 0.2s;
}

.btn-city-switcher-badge:hover {
  opacity: 0.85;
}

/* Modal de Troca Rápida de Município (645 SP) */
.switch-city-search-box input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.switch-city-search-box input:focus {
  border-color: #38bdf8;
  outline: none;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.95);
}

.switch-city-fast-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px 0;
}

.tag-quick-city {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tag-quick-city:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.switch-city-results-container {
  max-height: 380px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding-right: 4px;
}

.switch-city-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.switch-city-card:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.switch-city-card-left strong {
  display: block;
  color: #ffffff;
  font-size: 0.85rem;
}

.switch-city-card-left span {
  font-size: 0.7rem;
  color: #94a3b8;
}

.switch-city-card-right .badge-city-select {
  font-size: 0.68rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}


/* =============================================================================
   FILTRO DE ESTADO ANTES DO MUNICÍPIO (SaaS Master & Toolbar)
   ============================================================================= */
.table-state-filter-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 10px;
  height: 36px;
  box-sizing: border-box;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.08);
  transition: all 0.2s ease;
}

.table-state-filter-box:hover,
.table-state-filter-box:focus-within {
  border-color: #38bdf8;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.22);
}

.state-filter-lbl {
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.state-filter-pin {
  font-size: 0.82rem;
  animation: pulsePin 2s infinite ease-in-out;
}

@keyframes pulsePin {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.table-state-select {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  padding: 2px 4px;
  min-width: 185px;
}

.table-state-select option {
  background: #0f172a;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.8rem;
}

.table-municipio-search-box {
  display: flex;
  align-items: center;
}

.table-municipio-search-box input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 12px;
  font-size: 0.75rem;
  color: #fff;
  outline: none;
  width: 250px;
  height: 36px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.table-municipio-search-box input:focus {
  border-color: #38bdf8;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

/* ==========================================================================
   CENTRAL DE ALERTAS DE CRISE, PUSH NOTIFICATIONS & DRAWER LATERAL
   ========================================================================== */

/* 1. Botão do Sino no Header do Gabinete */
.btn-crisis-alerts-trigger {
  position: relative;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-crisis-alerts-trigger:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}

.btn-crisis-alerts-trigger .bell-icon {
  font-size: 1.15rem;
  line-height: 1;
  animation: bellWobble 4s infinite ease-in-out;
}

@keyframes bellWobble {
  0%, 85%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(14deg); }
  91% { transform: rotate(-14deg); }
  94% { transform: rotate(10deg); }
  97% { transform: rotate(-6deg); }
}

.crisis-badge-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid #0b1120;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

.crisis-pulse-glow {
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 2px solid rgba(239, 68, 68, 0.6);
  animation: pulseCrisisRing 2s infinite ease-out;
  pointer-events: none;
}

@keyframes pulseCrisisRing {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 2. Backdrop e Drawer Lateral de Alertas */
.crisis-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99998;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.crisis-drawer-backdrop.hidden {
  display: none;
  opacity: 0;
}

.crisis-alerts-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 95vw;
  height: 100vh;
  background: #0b1120;
  border-left: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  z-index: 99999;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.crisis-alerts-drawer.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.crisis-drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(239, 68, 68, 0.04);
}

.crisis-drawer-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.crisis-drawer-header h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.crisis-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
  display: block;
  margin-top: 2px;
}

.btn-close-drawer {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-close-drawer:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fff;
  border-color: #ef4444;
}

/* 3. Controles do Drawer */
.crisis-drawer-controls {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.crisis-control-switches {
  display: flex;
  gap: 8px;
}

.btn-crisis-toggle {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-crisis-toggle.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

.btn-crisis-action-quick {
  flex: 1;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-crisis-action-quick.test {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.btn-crisis-action-quick.test:hover {
  background: rgba(56, 189, 248, 0.25);
}

.btn-crisis-action-quick.clear {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.btn-crisis-action-quick.clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* 4. Filtros de Alerta */
.crisis-drawer-filter-bar {
  display: flex;
  padding: 10px 20px;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: #090e1a;
}

.crisis-filter-tab {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.crisis-filter-tab:hover {
  color: #fff;
}

.crisis-filter-tab.active {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* 5. Lista de Alertas */
.crisis-alerts-scroll-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crisis-alert-item-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.crisis-alert-item-card.severity-high {
  border-left-color: #f97316;
}

.crisis-alert-item-card.severity-opposition {
  border-left-color: #a855f7;
}

.crisis-alert-item-card.is-read {
  opacity: 0.6;
  border-left-color: #64748b;
}

.crisis-alert-item-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.crisis-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
}

.crisis-tag-pill {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.crisis-tag-pill.critical {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.crisis-tag-pill.high {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

.crisis-tag-pill.opposition {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.crisis-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

.crisis-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.68rem;
  color: #94a3b8;
}

.crisis-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.btn-card-act {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-card-act.primary {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

.btn-card-act.primary:hover {
  background: rgba(16, 185, 129, 0.25);
}

.btn-card-act:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 6. Toast Flutuante de Alerta em Tempo Real */
.live-crisis-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: rgba(11, 17, 32, 0.96);
  border: 1px solid #ef4444;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.35);
  z-index: 100001;
  overflow: hidden;
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-crisis-toast.hidden {
  transform: translateY(40px);
  opacity: 0;
  pointer-events: none;
}

.toast-crisis-glow {
  height: 3px;
  background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
  background-size: 200% 100%;
  animation: glowMove 2s infinite linear;
}

@keyframes glowMove {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.toast-crisis-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.toast-crisis-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.btn-close-toast {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
}

.btn-close-toast:hover {
  color: #fff;
}

.toast-crisis-text {
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.4;
  margin: 0;
}

.toast-crisis-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-toast-act {
  flex: 1;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: all 0.15s ease;
}

.btn-toast-act.primary {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.btn-toast-act.primary:hover {
  background: rgba(16, 185, 129, 0.3);
}

/* =============================================================================
   RBAC - CONTROLE DE ACESSO MULTI-NÍVEL & PERFIS DE GABINETE
   ============================================================================= */

.rbac-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.rbac-profile-chip:hover {
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(30, 41, 59, 0.95);
}

.rbac-chip-icon {
  font-size: 1.15rem;
}

.rbac-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rbac-chip-sub {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.rbac-role-select {
  background: transparent;
  color: #38bdf8;
  border: none;
  font-size: 0.75rem;
  font-weight: 800;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.rbac-role-select option {
  background: #0f172a;
  color: #fff;
  padding: 6px;
}

/* =============================================================================
   MAPA GEOESPACIAL DE CALOR (HEATMAP POR BAIRRO)
   ============================================================================= */

.heatmap-main-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .heatmap-main-layout {
    grid-template-columns: 1fr;
  }
}

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

.heatmap-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 10px;
}

.heatmap-search-box input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.75rem;
  outline: none;
  width: 170px;
}

.heatmap-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.legend-chip {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.legend-chip.crit {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.legend-chip.warn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.legend-chip.stable {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.heatmap-svg-viewport {
  width: 100%;
  min-height: 480px;
  height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heatmap-tile {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  stroke-width: 1.5;
}

.heatmap-tile:hover {
  filter: brightness(1.25) drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
  stroke: #fff !important;
  stroke-width: 2.5;
  transform: scale(1.03);
  transform-origin: center;
}

.heatmap-tile.active-selected {
  stroke: #38bdf8 !important;
  stroke-width: 3;
  filter: brightness(1.3) drop-shadow(0 0 16px rgba(56, 189, 248, 0.8));
}

.heatmap-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.district-gauge-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.district-gauge-val {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 4px 0;
  display: block;
}

.district-meta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.district-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.district-meta-label {
  color: #94a3b8;
}

.district-meta-value {
  color: #fff;
  font-weight: 700;
}

/* =============================================================================
   MÓDULOS DO SISTEMA & HIERARQUIA RADAR 360
   ============================================================================= */

.sidebar-module-group {
  margin-bottom: 8px;
}

.sidebar-module-group.standalone {
  margin-top: 6px;
}

.sidebar-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sidebar-module-header:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.45);
}

.sidebar-module-header.active {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0%, rgba(14, 165, 233, 0.08) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

.mod-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mod-header-left .mod-icon {
  font-size: 1.1rem;
}

.mod-header-left .mod-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #38bdf8;
}

.mod-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mod-header-right .mod-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mod-header-right .mod-arrow {
  font-size: 0.75rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.sidebar-module-header.collapsed .mod-arrow {
  transform: rotate(-90deg);
}

.sidebar-submodule-tree {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 2px solid rgba(56, 189, 248, 0.22);
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.25s ease;
}

.sidebar-submodule-tree.collapsed {
  display: none;
}

.module-top-level {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.module-top-level:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.module-top-level.active {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

.badge-module-status {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-left: 6px;
}

.badge-module-status.ready {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-module-status.plan {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-module-status.live {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

/* =============================================================================
   PAINÉIS DE PESQUISA & DISPAROS
   ============================================================================= */

.module-intro-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.7) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.module-intro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.module-intro-title-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.module-intro-icon {
  font-size: 2.2rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 10px;
  border-radius: 12px;
}

.module-intro-title-box h3 {
  font-size: 1.35rem;
  color: #fff;
  font-weight: 800;
  margin-bottom: 4px;
}

.module-intro-title-box p {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0;
}

.disparos-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
}

@media (max-width: 900px) {
  .disparos-mode-grid {
    grid-template-columns: 1fr;
  }
}

.disparos-mode-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.disparos-mode-card.official {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.disparos-mode-card.direct {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.mode-badge-tag {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}

.mode-badge-tag.official-tag {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.mode-badge-tag.direct-tag {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.disparos-mode-card h4 {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 8px;
}

.disparos-mode-card p {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 16px;
}

.mode-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
  margin-top: auto;
}

.mode-spec-table td {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mode-spec-table td:first-child {
  color: #94a3b8;
  font-weight: 600;
}

.mode-spec-table td:last-child {
  text-align: right;
  color: #fff;
  font-weight: 700;
}

.disparos-pipeline-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

@media (max-width: 1024px) {
  .disparos-pipeline-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pipeline-step-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
}

.pipeline-step-box .step-num {
  font-size: 0.7rem;
  font-weight: 800;
  color: #38bdf8;
  display: block;
  margin-bottom: 4px;
}

.pipeline-step-box strong {
  font-size: 0.82rem;
  color: #fff;
  display: block;
  margin-bottom: 6px;
}

.pipeline-step-box p {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

/* =============================================================================
   MÓDULO DE PESQUISAS ELEITORAIS (PESQUISA 360)
   ============================================================================= */

.pesquisa-subnav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pesquisa-subnav-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.pesquisa-subnav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.pesquisa-subnav-btn.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.pesquisa-tab-content {
  display: none;
}

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

/* Status das Pesquisas */
.pesquisa-badge-status {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
}

.pesquisa-badge-status.criando {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.pesquisa-badge-status.aprovacao {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.pesquisa-badge-status.em_coleta {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  animation: pulse-emerald-border 2s infinite;
}

.pesquisa-badge-status.encerrada {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

/* Banner de Aprovação do Contratante */
.pesquisa-approval-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.approval-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.approval-banner-left .banner-icon {
  font-size: 1.8rem;
}

.approval-banner-left strong {
  color: #fbbf24;
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.approval-banner-left p {
  color: #cbd5e1;
  font-size: 0.78rem;
  margin: 0;
}

/* Tabela de Cruzamento NxN (Pivot Table) */
.pivot-controls-bar {
  display: flex;
  gap: 16px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.pivot-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pivot-select-group label {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
}

.pivot-select-group select {
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #fff;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.pivot-table-wrapper {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
}

.pivot-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  text-align: right;
}

.pivot-matrix-table th,
.pivot-matrix-table td {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pivot-matrix-table th {
  background: rgba(30, 41, 59, 0.8);
  color: #38bdf8;
  font-weight: 700;
  text-align: center;
}

.pivot-matrix-table td.pivot-row-header {
  text-align: left;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
  min-width: 140px;
}

.pivot-matrix-table td.pivot-total {
  font-weight: 800;
  background: rgba(56, 189, 248, 0.08);
  color: #7dd3fc;
}

.pivot-matrix-table tr.pivot-total-row td {
  font-weight: 800;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-top: 2px solid #38bdf8;
}

/* Auditoria & Equipe de Campo */
.auditor-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.auditor-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.auditor-card.has-anomaly {
  border-color: rgba(245, 158, 11, 0.4);
}

.auditor-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auditor-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auditor-avatar-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.auditor-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

.auditor-metric-item small {
  display: block;
  font-size: 0.62rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.auditor-metric-item strong {
  display: block;
  font-size: 0.88rem;
  color: #fff;
}

.auditor-pix-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.72rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auditor-actions-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

/* Simulador do App da Pesquisadora (PWA Mobile) */
.mobile-app-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mobile-app-modal-overlay.hidden {
  display: none !important;
}

.mobile-phone-frame {
  width: 400px;
  max-width: 95vw;
  height: 740px;
  max-height: 92vh;
  background: #090d16;
  border: 4px solid #334155;
  border-radius: 36px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 25px rgba(56, 189, 248, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.mobile-phone-notch {
  width: 140px;
  height: 18px;
  background: #1e293b;
  border-radius: 0 0 14px 14px;
  margin: 0 auto 6px;
}

.mobile-app-header {
  padding: 10px 18px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-app-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-live-timer {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  align-self: center;
}

.mobile-question-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.mobile-opt-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-opt-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

.mobile-opt-btn.selected {
  background: #0284c7;
  border-color: #38bdf8;
  color: #fff;
  font-weight: 700;
}

.mobile-app-footer {
  padding: 12px 16px;
  background: #060912;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Question Drag and Drop & Order Styles */
.pesquisa-question-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
}

.pesquisa-question-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(56, 189, 248, 0.3);
}

.pesquisa-question-card.dragging {
  opacity: 0.45;
  border: 2px dashed #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

.pesquisa-question-card.drag-over {
  border-top: 3px solid #38bdf8 !important;
  background: rgba(56, 189, 248, 0.06);
}

.drag-handle-btn {
  cursor: grab;
  color: #64748b;
  font-size: 1.15rem;
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
}

.drag-handle-btn:hover {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

.drag-handle-btn:active {
  cursor: grabbing;
}

.order-arrow-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 4px;
  font-size: 0.65rem;
  width: 22px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.order-arrow-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.5);
}

/* ID Tag Monospace */
.pesquisa-id-tag {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.76rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  display: inline-block;
}

/* Despesa ID Tag */
.despesa-id-tag {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.74rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}

/* Option Preview Chips */
.opcao-preview-chip {
  font-size: 0.72rem;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.opcao-preview-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
  color: #fff;
}

/* Status Pipeline Stepper */
.pesquisa-pipeline-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 20px 0 25px;
  padding: 0 10px;
}

.pesquisa-pipeline-track::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 30px;
  right: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.pipeline-step-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.pipeline-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.pipeline-step-node.active .pipeline-step-dot {
  background: #0284c7;
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
  transform: scale(1.1);
}

.pipeline-step-node.completed .pipeline-step-dot {
  background: #065f46;
  border-color: #10b981;
  color: #fff;
}

.pipeline-step-title {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
  text-align: center;
  max-width: 90px;
}

.pipeline-step-node.active .pipeline-step-title {
  color: #38bdf8;
  font-weight: 800;
}

/* Folha Oficial de Questionário para Impressão/PDF (A4 Paper View) */
.pdf-preview-sheet {
  background: #ffffff;
  color: #0f172a;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 44px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
}

.pdf-preview-sheet h2,
.pdf-preview-sheet h3,
.pdf-preview-sheet h4 {
  color: #0f172a;
  margin: 0;
}

.pdf-header-box {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pdf-question-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: #f8fafc;
}

.pdf-option-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 0.85rem;
  color: #1e293b;
}

.pdf-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid #64748b;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

/* Impressão A4 Limpa */
@media print {
  body.is-printing-preview * {
    visibility: hidden;
  }
  body.is-printing-preview #modalPesquisaPdfPreview,
  body.is-printing-preview #modalPesquisaPdfPreview * {
    visibility: visible;
  }
  #modalPesquisaPdfPreview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .pdf-preview-sheet {
    box-shadow: none !important;
    padding: 20px !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .no-print {
    display: none !important;
  }
}

/* Simulador Mobile Mockup Frame */
.modal-mobile-interactive-wrapper {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.modal-mobile-info-col {
  flex: 1;
  min-width: 280px;
}

.modal-mobile-phone-col {
  width: 320px;
  flex-shrink: 0;
}

.mini-phone-mockup {
  width: 100%;
  height: 540px;
  background: #090d16;
  border-radius: 32px;
  border: 8px solid #1e293b;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.mini-phone-notch {
  width: 110px;
  height: 18px;
  background: #1e293b;
  margin: 0 auto;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Numeric ID Tag (Requisito 2) */
.pesquisa-id-tag-num {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

/* Compact Icon Action Buttons with Tooltips (Requisito 2) */
.table-icon-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  align-items: center;
}

.btn-icon-action {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  font-size: 0.85rem;
  padding: 0;
}

.btn-icon-action:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

.btn-icon-action.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

/* Tooltip nativo personalizado via data-tooltip */
.btn-icon-action[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  right: 50%;
  transform: translateX(50%);
  background: #0f172a;
  color: #f1f5f9;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

.btn-icon-action[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: 110%;
  right: 50%;
  transform: translateX(50%);
  border-width: 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.btn-icon-action:hover[data-tooltip]::before,
.btn-icon-action:hover[data-tooltip]::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(-2px);
}

/* Planilha Operacional de Custos & Carro Próprio (Requisito 1) */
.op-cost-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.op-pesquisadora-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.op-pesquisadora-row.has-car {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.04);
}

.badge-carro-proprio {
  font-size: 0.68rem;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Cadastro de Pessoas & Tipos (Requisito 4) */
.pessoa-type-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pessoa-type-badge.pesquisadora {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.pessoa-type-badge.coordenador {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pessoa-type-badge.contratante {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.pessoa-type-badge.fiscal {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Sugestões de Perguntas Cards (Requisito 3) */
.suggestion-card-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggestion-card-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(56, 189, 248, 0.4);
}

.suggestion-card-item.selected {
  background: rgba(56, 189, 248, 0.06);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.sugestoes-batch-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  margin: 12px 20px 0 20px;
  flex-wrap: wrap;
  gap: 10px;
}

/* Dashboard de Gráficos e Resultados de Pesquisas */
.results-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .results-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.results-chart-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.results-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chart-bar-item {
  margin-bottom: 10px;
}

.chart-bar-item:last-child {
  margin-bottom: 0;
}

.chart-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  margin-bottom: 4px;
}

.chart-bar-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.chart-bar-progress {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 14px;
  flex: 1;
  min-width: 140px;
}

/* =============================================================================
   COCKPIT EXECUTIVO AO VIVO DE PESQUISAS ELEITORAIS (TELA COMPLETA DO CLIENTE)
   ============================================================================= */

.live-cockpit-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}

/* Barra de Telemetria e Ficha Técnica ao Vivo */
.live-telemetry-bar {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.telemetry-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 10px #ef4444;
  animation: pulse-dot-anim 1.5s infinite;
}

@keyframes pulse-dot-anim {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #ef4444; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.telemetry-meta-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  color: #cbd5e1;
  flex-wrap: wrap;
}

.telemetry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Faixa de Auditoria e Média de Coleta */
.live-audit-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.audit-metric-pill {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.audit-metric-pill:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
}

.audit-metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.audit-metric-content {
  display: flex;
  flex-direction: column;
}

.audit-metric-label {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.audit-metric-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 2px 0;
}

.audit-metric-sub {
  font-size: 0.65rem;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Barra de Filtros Cruzados Multidimensionais */
.live-cross-filters-bar {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.filters-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

.filters-bar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #fff;
  font-weight: 700;
}

.filters-selects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  align-items: center;
}

.live-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.live-filter-item label {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.live-filter-item select {
  width: 100%;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.live-filter-item select:focus,
.live-filter-item select.filter-active {
  border-color: #38bdf8;
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

/* Grid Principal: Gráficos à esquerda + Mapa à direita */
.live-cockpit-main-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1180px) {
  .live-cockpit-main-grid {
    grid-template-columns: 1fr;
  }
}

/* Coluna de Gráficos Executivos */
.live-charts-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.live-charts-2col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .live-charts-2col-row {
    grid-template-columns: 1fr;
  }
}

/* Coluna do Mapa Espacial & Telemetria Georreferenciada */
.live-map-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.geo-map-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.geo-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.geo-map-wrapper {
  position: relative;
  width: 100%;
  height: 480px;
  background: #050811;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.geo-map-radar-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.geo-map-neighborhood-tag {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.geo-map-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, opacity 0.3s ease;
  z-index: 5;
}

.geo-map-pin:hover {
  transform: translate(-50%, -50%) scale(2.2);
  z-index: 20;
}

.geo-map-pin.pulsing-recent {
  animation: pin-pulse 1.8s infinite;
}

@keyframes pin-pulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.8); }
  70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

.geo-map-pin.dimmed {
  opacity: 0.15;
  filter: grayscale(1);
}

/* Card Popup Flutuante do Ponto de GPS */
.geo-pin-popup {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
  z-index: 30;
  backdrop-filter: blur(10px);
  animation: popup-fade-in 0.25s ease;
}

@keyframes popup-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Feed Ticker ao Vivo de Entrevistas */
.live-feed-ticker {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-feed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.live-feed-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 10px;
  border-radius: 6px;
  animation: feed-item-fade 0.4s ease;
}

@keyframes feed-item-fade {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Modo Tela Cheia / Sala de Guerra */
.cockpit-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #090d16 !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

/* =============================================================================
   1. SISTEMA DINÂMICO DE PILHA DE FILTROS CRUZADOS (ATÉ 20+ PERGUNTAS)
   ============================================================================= */
.live-filter-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.live-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  animation: filter-row-slide 0.25s ease-out;
}

@keyframes filter-row-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.filter-row-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-weight: 800;
  font-size: 0.7rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.filter-question-select {
  flex: 1.2;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.76rem;
  font-weight: 600;
}

.filter-value-select {
  flex: 1.5;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.76rem;
  font-weight: 700;
}

.filter-remove-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.filter-remove-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fff;
  transform: scale(1.05);
}

.filter-stack-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.btn-add-filter-stack {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 7px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-filter-stack:hover {
  background: rgba(56, 189, 248, 0.3);
  color: #fff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

/* =============================================================================
   2. LINHA POR PERGUNTA COM TRIO DE GRÁFICOS (PIZZA, COLUNA E BARRAS)
   ============================================================================= */
.live-questions-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 16px;
}

.question-result-row {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s;
}

.question-result-row:hover {
  border-color: rgba(56, 189, 248, 0.3);
}

.question-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 12px;
}

.question-row-title-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.question-badge-num {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
  flex-shrink: 0;
}

.question-row-title {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.question-row-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  display: block;
  margin-top: 4px;
}

.question-charts-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .question-charts-trio {
    grid-template-columns: 1fr;
  }
}

.trio-chart-card {
  background: rgba(10, 15, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.trio-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trio-chart-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Gráfico 1: Pizza / Donut */
.donut-chart-container {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}

.donut-svg-box {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.donut-svg-box svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.donut-center-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.donut-center-total {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.donut-center-sub {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 2px;
}

.donut-legend-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  max-height: 210px;
  overflow-y: auto;
  font-size: 0.7rem;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #cbd5e1;
}

.donut-legend-color-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Gráfico 2: Coluna Vertical */
.column-chart-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  height: 190px;
  padding: 10px 4px 0 4px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.column-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.column-bar-pct {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
}

.column-bar-stick {
  width: 100%;
  max-width: 38px;
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease-out;
  min-height: 4px;
}

.column-bar-label {
  font-size: 0.62rem;
  color: #94a3b8;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48px;
  margin-top: 6px;
}

/* Gráfico 3: Ranking em Barras Horizontais */
.horizontal-bars-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 4px;
}

.h-bar-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.h-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
}

.h-bar-name {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.h-bar-val {
  font-weight: 800;
}

.h-bar-track {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.h-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease-out;
}

/* =============================================================================
   3. DIAGNÓSTICO DAS PESQUISADORAS DE CAMPO (ANTES DO MAPA)
   ============================================================================= */
.researcher-diagnosis-section {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 18px;
}

.researcher-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .researcher-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.researcher-card-btn {
  background: rgba(10, 15, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.researcher-card-btn:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.researcher-card-btn.selected-researcher {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

.researcher-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.researcher-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.researcher-kpis-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
  border-radius: 6px;
  font-size: 0.7rem;
}

/* Gaveta / Tabela de Coletas da Pesquisadora Selecionada */
.researcher-detail-drawer {
  margin-top: 16px;
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  padding: 16px;
  animation: drawer-fade-down 0.25s ease-out;
}

@keyframes drawer-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.researcher-detail-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.researcher-coletas-table-wrap {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.researcher-coletas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.researcher-coletas-table th {
  background: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.researcher-coletas-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.researcher-coletas-table tr:hover {
  background: rgba(56, 189, 248, 0.08);
}

/* =============================================================================
   4. MAPA NO FINAL EM PREENCHIMENTO COMPLETO DO ESPAÇO DA TELA
   ============================================================================= */
.live-full-map-section {
  margin-top: 22px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.full-space-map-wrapper {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 650px;
  background: #070b14;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   5. DOSSIÊ COMPLETO DE CRUZAMENTOS PARA IMPRESSÃO (PDF)
   ============================================================================= */
.modal-dossie-print-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}

.modal-dossie-print-box {
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 12px;
  width: 95vw;
  max-width: 1200px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.modal-dossie-header {
  padding: 14px 20px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-dossie-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #ffffff;
  color: #0f172a;
}

/* Estilos de Impressão e Livro de Dados A4 Multi-páginas */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm 15mm 10mm;
  }

  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    position: static !important;
    background: #ffffff !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.is-printing-dossie > *:not(#modalDossieImpressao) {
    display: none !important;
    visibility: hidden !important;
  }

  body.is-printing-dossie #modalDossieImpressao,
  body.is-printing-dossie #modalDossieImpressao *,
  #modalDossieImpressao,
  #modalDossieImpressao * {
    visibility: visible !important;
  }

  #modalDossieImpressao {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    z-index: auto !important;
  }

  .modal-dossie-print-box {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .modal-dossie-header {
    display: none !important;
    visibility: hidden !important;
  }

  .modal-dossie-body, #printableDossieContent {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-page-break {
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 20px !important;
    display: block !important;
    clear: both !important;
  }

  .no-print {
    display: none !important;
    visibility: hidden !important;
  }
}

.dossie-print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
  margin-bottom: 16px;
  color: #1e293b;
}

.dossie-print-table th {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 5px 6px;
  font-weight: 700;
  text-align: center;
}

.dossie-print-table td {
  border: 1px solid #cbd5e1;
  padding: 4px 6px;
  text-align: center;
}

.dossie-print-table td.text-left {
  text-align: left;
  font-weight: 600;
}

.dossie-print-table tr:nth-child(even) td {
  background: #f8fafc;
}

.dossie-section-heading {
  font-size: 13pt;
  font-weight: 800;
  color: #0f172a;
  border-bottom: 2px solid #0284c7;
  padding-bottom: 4px;
  margin: 20px 0 10px 0;
}

/* =============================================================================
   6. ESTILOS INTERATIVOS DOS GRÁFICOS (TOOLTIP HOVER) & TABELA AO VIVO
   ============================================================================= */

.chart-hover-popover {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 18px rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.74rem;
  color: #fff;
  backdrop-filter: blur(10px);
  min-width: 170px;
  transform: translate(-50%, -125%);
  transition: opacity 0.12s ease, transform 0.12s ease;
  line-height: 1.4;
}

.donut-slice-interactive {
  cursor: pointer;
  transition: stroke-width 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.donut-slice-interactive:hover {
  stroke-width: 19px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px currentColor);
}

.column-bar-item {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.column-bar-item:hover {
  transform: translateY(-4px);
  filter: brightness(1.25);
}

.column-bar-item:hover .column-bar-pct {
  font-weight: 800;
  transform: scale(1.1);
}

.h-bar-item {
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  padding: 3px 6px;
  border-radius: 4px;
}

.h-bar-item:hover {
  background: rgba(56, 189, 248, 0.12);
  transform: translateX(3px);
}

.h-bar-item:hover .h-bar-val {
  font-weight: 800;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Tabela de Stream de Coletas Transmitidas */
.live-stream-coletas-table {
  width: 100%;
  border-collapse: collapse;
}

.live-stream-coletas-table th {
  background: rgba(15, 23, 42, 0.98);
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-stream-coletas-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.live-stream-coletas-table tr:hover {
  background: rgba(56, 189, 248, 0.08);
}

/* Componentes de Impressão (Gráficos e IA) */
.dossie-print-chart-box {
  margin: 12px 0 16px 0;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.dossie-print-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 8pt;
}

.dossie-print-bar-label {
  width: 28%;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dossie-print-bar-track {
  flex: 1;
  height: 14px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.dossie-print-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 3px;
}

.dossie-print-bar-val {
  width: 18%;
  text-align: right;
  font-weight: 700;
  color: #0f172a;
}

.dossie-ai-analysis-box {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #16a34a;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0 20px 0;
  font-size: 8pt;
  line-height: 1.5;
  color: #14532d;
}

.dossie-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #16a34a;
  color: #ffffff;
  font-size: 6.8pt;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* =============================================================================
   10. TABELA DE MICRODADOS REAIS SAAS & DASHBOARD DA COORDENADORA
   ============================================================================= */
.master-microdados-table th {
  padding: 10px 14px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  text-align: left;
  color: #38bdf8;
  position: sticky;
  top: 0;
  z-index: 10;
}
.master-microdados-table td {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 0.72rem;
  color: #e2e8f0;
}
.master-microdados-table tr:hover td {
  background: rgba(56, 189, 248, 0.08);
}
.master-microdados-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

/* Painel da Coordenadora de Campo */
.coord-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.coord-kpi-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 10px;
}
.coord-kpi-title {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
}
.coord-kpi-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #38bdf8;
  margin: 2px 0;
}
.coord-kpi-sub {
  font-size: 0.62rem;
  color: #34d399;
}

.coord-section-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  margin: 14px 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 4px;
}

.coord-bairro-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 5px;
  font-size: 0.7rem;
}
.coord-pesquisadora-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

/* =============================================================================
   MAPA DE CALOR & GEOESPACIAL DO PORTAL DO CLIENTE
   ============================================================================= */
.btn-portal-map-mode {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-portal-map-mode:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #fff !important;
}
.btn-portal-map-mode.active {
  background: #0284c7 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}
.portal-district-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.portal-district-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  background: rgba(15, 23, 42, 0.95);
}
.portal-district-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.portal-district-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.portal-district-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}
.portal-district-card-kpis {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.45;
}

/* =============================================================================
   APLICATIVO MOBILE DE CAMPO (PWA OFFLINE-FIRST) - TELA DE COLETA & SIMULADOR
   ============================================================================= */

.mobile-field-app-view {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 20%, #0f172a 0%, #030712 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Barra de Ferramentas do Simulador Desktop */
.mobile-app-sim-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
  max-width: 900px;
  width: 100%;
}

.sim-toolbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}

.sim-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sim-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-sim-action:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.btn-sim-action.active-mode {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

/* Moldura Realista do Smartphone (iPhone 15 Pro Titanium Frame) */
.mobile-app-device-wrapper {
  width: 412px;
  max-width: 100%;
  height: 840px;
  max-height: 94vh;
  background: #020617;
  border: 8px solid #1e293b;
  border-radius: 46px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 35px rgba(2, 132, 199, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

@media (max-width: 480px) {
  .mobile-field-app-view {
    padding: 0;
  }
  .mobile-app-sim-toolbar {
    display: none;
  }
  .mobile-app-device-wrapper {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Dynamic Island & Barra de Status do Sistema */
.mobile-status-bar {
  height: 38px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #020617;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  z-index: 50;
  flex-shrink: 0;
}

.mobile-dynamic-island {
  width: 110px;
  height: 24px;
  background: #000;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.island-camera-dot {
  width: 9px;
  height: 9px;
  background: #1e1e24;
  border-radius: 50%;
  border: 1px solid #2d3748;
}

.island-sensor-dot {
  width: 6px;
  height: 6px;
  background: #111827;
  border-radius: 50%;
}

/* Topo do Aplicativo da Pesquisadora */
.mobile-app-topbar {
  background: #090e1f;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.mobile-researcher-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.mobile-researcher-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
  flex-shrink: 0;
}

.mobile-researcher-meta {
  min-width: 0;
  flex: 1;
}

.mobile-researcher-meta h5 {
  margin: 0;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-researcher-meta span {
  font-size: 0.64rem;
  color: #38bdf8;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-connection-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  flex-shrink: 0;
}

.mobile-connection-pill.offline {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* Barra de Telemetria e Anti-Fraude ao Vivo */
.mobile-coleta-telemetry-bar {
  background: rgba(2, 6, 23, 0.95);
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mobile-gps-pill {
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mobile-gps-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGpsDot 1.5s infinite;
}

@keyframes pulseGpsDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.mobile-timer-badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: monospace;
  font-size: 0.74rem;
}

.mobile-timer-badge.normal-pace {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

/* Indicador de Gravação de Áudio para Auditoria */
.mobile-audio-audit-strip {
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.audio-waveform-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.waveform-bar {
  width: 2px;
  background: #38bdf8;
  border-radius: 1px;
  animation: waveAnim 1s ease-in-out infinite alternate;
}

.waveform-bar:nth-child(1) { height: 4px; animation-delay: 0.1s; }
.waveform-bar:nth-child(2) { height: 10px; animation-delay: 0.3s; }
.waveform-bar:nth-child(3) { height: 7px; animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { height: 12px; animation-delay: 0.4s; }
.waveform-bar:nth-child(5) { height: 6px; animation-delay: 0.15s; }

@keyframes waveAnim {
  0% { transform: scaleY(0.4); opacity: 0.5; }
  100% { transform: scaleY(1.2); opacity: 1; }
}

/* Barra de Progresso Segmentada por Pergunta */
.mobile-progress-steps-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  width: 100%;
  flex-shrink: 0;
}

.progress-step-fill {
  background: linear-gradient(90deg, #38bdf8, #10b981);
  height: 100%;
  transition: width 0.3s ease;
}

/* Corpo Principal da Coleta (Scrollável) */
.mobile-coleta-content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

/* Banner Anti-Viés da Pergunta */
.mobile-anti-bias-tag {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #c084fc;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Card do Enunciado da Pergunta */
.mobile-question-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.mobile-question-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mobile-q-step-badge {
  font-size: 0.64rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.mobile-q-category-badge {
  font-size: 0.62rem;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.mobile-question-statement {
  font-family: 'Outfit', sans-serif;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
}

/* Cartela de Respostas (Touch-Target 54px+) */
.mobile-cartela-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.mobile-touch-option {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background: rgba(30, 41, 59, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #f1f5f9;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.mobile-touch-option:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.mobile-touch-option.selected {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(37, 99, 235, 0.9));
  border-color: #38bdf8;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.5);
  transform: scale(1.01);
}

.option-radio-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.15s;
}

.mobile-touch-option.selected .option-radio-dot {
  background: #fff;
  border-color: #fff;
  color: #0284c7;
  font-weight: 900;
}

/* Cartela de Opções para Escala Likert */
.mobile-likert-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-likert-btn {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.8);
  transition: all 0.15s;
}

.mobile-likert-btn.otima { border-left: 5px solid #10b981; }
.mobile-likert-btn.boa { border-left: 5px solid #38bdf8; }
.mobile-likert-btn.regular { border-left: 5px solid #f59e0b; }
.mobile-likert-btn.ruim { border-left: 5px solid #f97316; }
.mobile-likert-btn.pessima { border-left: 5px solid #ef4444; }

.mobile-likert-btn.selected {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
}

/* Campo de Resposta Espontânea com Sugestões Rápidas */
.mobile-free-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-free-textarea {
  width: 100%;
  padding: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  color: #fff;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
}

.mobile-free-textarea:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.mobile-quick-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.mobile-quick-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.mobile-quick-chip:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* Barra Inferior Fixa para Alcance do Polegar */
.mobile-fixed-footer-actions {
  position: absolute;
  bottom: 58px;
  left: 0;
  right: 0;
  background: rgba(11, 19, 41, 0.98);
  border-top: 1px solid rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(14px);
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 60;
  box-sizing: border-box;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.7);
}

.btn-mobile-nav-prev {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 12px 18px;
  min-width: 95px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-mobile-nav-prev:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.btn-mobile-nav-next {
  flex: 1;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: none;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  transition: all 0.2s;
}

.btn-mobile-nav-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.6);
}

.btn-mobile-nav-next.finish-btn {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
}

/* Alerta de Validação de Resposta Obrigatória */
.mobile-validation-alert {
  position: absolute;
  bottom: 70px;
  left: 14px;
  right: 14px;
  background: rgba(220, 38, 38, 0.96);
  border: 1px solid #ef4444;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 70;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  animation: shakeAlert 0.4s ease;
}

@keyframes shakeAlert {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.mobile-card-shake-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important;
  animation: shakeAlert 0.4s ease;
}

/* Tabela De-Para */
.depara-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s;
}
.depara-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.depara-badge-auto {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.depara-badge-manual {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.depara-badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =============================================================================
   ESTILOS AVANÇADOS DO APLICATIVO MOBILE: ROLES, MENUS, OFFLINE, COORDENAÇÃO & CRACHÁ
   ============================================================================= */

/* Role Selector no Simulador */
.sim-role-selector {
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}

.btn-sim-role {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sim-role:hover {
  color: #fff;
}

.btn-sim-role.active {
  background: #0284c7;
  color: #fff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.mobile-role-pill {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Barra de Navegação Inferior (Bottom Navigation) */
.mobile-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: #090e1f;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 70;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: none;
  position: relative;
  transition: all 0.18s ease;
  user-select: none;
}

.mobile-nav-item .nav-icon {
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}

.mobile-nav-item:hover {
  color: #94a3b8;
}

.mobile-nav-item.active {
  color: #38bdf8;
}

.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 3px;
  background: #38bdf8;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.6);
}

.mobile-nav-item.active .nav-icon {
  transform: scale(1.15);
}

.mobile-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  background: #f59e0b;
  color: #020617;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.1;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Cards da Tela Inicial da Pesquisadora */
.mobile-view-scroll-body {
  flex: 1;
  min-height: 100%;
  padding: 14px 14px 74px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn 0.25s ease-out;
  overflow-y: auto;
  box-sizing: border-box;
}

.mobile-hero-survey-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Botões de Ação para Cards do Mobile */
.btn-mobile-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  line-height: 1.2;
  user-select: none;
  box-sizing: border-box;
}

.btn-mobile-card-action.primary {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

.btn-mobile-card-action.primary:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
}

.btn-mobile-card-action.secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}

.btn-mobile-card-action.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-mobile-card-action .card-action-icon {
  font-size: 0.88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-hero-survey-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-badge-survey-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  margin-bottom: 8px;
}

.mobile-survey-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.mobile-survey-subinfo {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Card de Metas da Pesquisadora */
.mobile-goal-kpi-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.mobile-goal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mobile-goal-head h6 {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.mobile-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.mobile-goal-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}

.mobile-goal-box-num {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
  display: block;
}

.mobile-goal-box-label {
  font-size: 0.62rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}

.mobile-progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.mobile-progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.mobile-progress-meta-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #94a3b8;
}

/* Botão Iniciar Coleta */
.btn-mobile-start-interview {
  width: 100%;
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-mobile-start-interview:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.55);
}

/* Fila Offline */
.mobile-offline-head-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-offline-item-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-mobile-sync-now {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

/* Cards Coordenadora */
.mobile-coord-researcher-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.coord-researcher-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coord-researcher-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coord-pace-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}

.coord-pace-tag.normal {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.coord-pace-tag.fast {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Mapa Vetorial da Coordenadora */
.mobile-map-container {
  background: #020617;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

/* Card do Crachá Digital Oficial */
.mobile-badge-container {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%);
  border: 2px solid rgba(56, 189, 248, 0.5);
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.25);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.badge-lanyard-hole {
  width: 44px;
  height: 10px;
  background: #020617;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin: 0 auto 14px auto;
}

.badge-photo-frame {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  border: 3px solid #38bdf8;
  padding: 3px;
  background: rgba(2, 6, 23, 0.8);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
  position: relative;
  overflow: hidden;
}

.badge-photo-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.badge-official-seal {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border: 2px solid #0f172a;
}