/* ═══════════════════════════════════════════════════════════════
   DARK THEME PREMIUM — Intelligence Terminal Style
   Bloomberg Terminal · Power BI Dark · Tableau Dark · ArcGIS
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties — Dark Theme ─── */
:root {
  --dark-bg-primary: #0a0f1a;
  --dark-bg-secondary: #0d1525;
  --dark-bg-card: #111a2e;
  --dark-bg-card-hover: #162035;
  --dark-bg-elevated: #1a2540;
  --dark-bg-input: #0e1628;
  --dark-border: rgba(59, 130, 246, 0.12);
  --dark-border-subtle: rgba(255, 255, 255, 0.06);
  --dark-border-accent: rgba(59, 130, 246, 0.3);
  --dark-text-primary: #e8edf5;
  --dark-text-secondary: #94a3b8;
  --dark-text-muted: #64748b;
  --dark-text-accent: #60a5fa;
  --dark-glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);
  --dark-glow-blue-strong: 0 0 30px rgba(59, 130, 246, 0.25);
  --dark-glow-red: 0 0 20px rgba(239, 68, 68, 0.15);
  --dark-glow-green: 0 0 20px rgba(34, 197, 94, 0.15);
  --dark-glow-amber: 0 0 20px rgba(245, 158, 11, 0.15);
  --dark-glow-purple: 0 0 20px rgba(168, 85, 247, 0.15);
  --dark-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --dark-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ─── Base — Body & Background ─── */
html, body {
  background: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ─── App Shell — Header ─── */
.app-header {
  background: rgba(10, 15, 26, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  box-shadow: var(--dark-glow-blue) !important;
}

.app-brand-title {
  color: var(--dark-text-primary) !important;
}

.app-brand-sub {
  color: var(--dark-text-secondary) !important;
}

.app-header-meta {
  color: var(--dark-text-secondary) !important;
}

.dot {
  background: var(--dark-text-accent) !important;
}

/* ─── Navigation ─── */
.app-nav {
  background: rgba(13, 21, 37, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.app-nav-link {
  color: var(--dark-text-secondary) !important;
  transition: all 0.2s ease;
}

.app-nav-link:hover {
  color: var(--dark-text-primary) !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

.app-nav-link.active {
  color: var(--dark-text-accent) !important;
  background: rgba(59, 130, 246, 0.15) !important;
  border-bottom: 2px solid var(--dark-text-accent) !important;
}

/* ─── Hero Section ─── */
.home-hero {
  background: transparent !important;
}

.page-title {
  color: var(--dark-text-primary) !important;
}

.page-desc {
  color: var(--dark-text-secondary) !important;
}

/* ─── Status Bar ─── */
.status-bar {
  background: rgba(17, 26, 46, 0.8) !important;
  border: 1px solid var(--dark-border-subtle) !important;
  border-radius: 10px !important;
}

.status-bar-item {
  color: var(--dark-text-secondary) !important;
}

.status-dot {
  box-shadow: 0 0 8px currentColor !important;
}

/* ─── Section Cards ─── */
.section-card {
  background: var(--dark-bg-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--dark-shadow) !important;
  transition: all 0.3s ease !important;
}

.section-card:hover {
  border-color: var(--dark-border-accent) !important;
  box-shadow: var(--dark-glow-blue) !important;
  transform: translateY(-2px);
}

.section-card-head {
  background: rgba(26, 37, 64, 0.5) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
  border-radius: 16px 16px 0 0 !important;
}

.section-card-title {
  color: var(--dark-text-primary) !important;
}

.section-card-subtitle {
  color: var(--dark-text-secondary) !important;
}

.section-card-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
}

.section-card-body {
  color: var(--dark-text-secondary) !important;
}

.section-card-foot {
  background: rgba(26, 37, 64, 0.3) !important;
  border-top: 1px solid var(--dark-border-subtle) !important;
  color: var(--dark-text-muted) !important;
}

/* ─── KPI Cards ─── */
.kpi-card {
  background: var(--dark-bg-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--dark-shadow) !important;
  transition: all 0.3s ease !important;
}

.kpi-card:hover {
  border-color: var(--dark-border-accent) !important;
  box-shadow: var(--dark-glow-blue) !important;
}

.kpi-card-label {
  color: var(--dark-text-secondary) !important;
}

.kpi-card-value {
  color: var(--dark-text-primary) !important;
}

.kpi-card-desc {
  color: var(--dark-text-muted) !important;
}

.kpi-card-icon {
  color: var(--dark-text-accent) !important;
  opacity: 0.7;
}

/* KPI Color Variants */
.kpi-primary { border-top: 3px solid #3b82f6 !important; }
.kpi-info { border-top: 3px solid #06b6d4 !important; }
.kpi-success { border-top: 3px solid #22c55e !important; }
.kpi-gold { border-top: 3px solid #f59e0b !important; }
.kpi-danger { border-top: 3px solid #ef4444 !important; }
.kpi-purple { border-top: 3px solid #a855f7 !important; }
.kpi-sexo { border-top: 3px solid #8b5cf6 !important; }
.sexo-bar { background: var(--dark-border-subtle) !important; }
.sexo-legend { color: var(--dark-text-secondary) !important; }

/* ─── Insight Panel ─── */
.insight-panel {
  background: var(--dark-bg-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--dark-shadow) !important;
}

.insight-panel-title {
  color: var(--dark-text-primary) !important;
}

.insight-panel-sub {
  color: var(--dark-text-secondary) !important;
}

.insight-item {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.insight-item-text strong {
  color: var(--dark-text-primary) !important;
}

.insight-item-text span {
  color: var(--dark-text-secondary) !important;
}

/* ─── Feminicidios Banner ─── */
.fem-banner {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.1)) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: var(--dark-glow-purple) !important;
}

.fem-banner-title {
  color: var(--dark-text-primary) !important;
}

.fem-banner-desc {
  color: var(--dark-text-secondary) !important;
}

.fem-banner-action {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 10px !important;
}

.fem-banner-action:hover {
  background: rgba(168, 85, 247, 0.3) !important;
}

/* ─── Charts — SVG Text ─── */
svg text {
  fill: var(--dark-text-secondary) !important;
}

/* ─── Ranking List ─── */
.ranking-premium {
  background: transparent !important;
}

.ranking-row-premium {
  background: rgba(17, 26, 46, 0.5) !important;
  border: 1px solid var(--dark-border-subtle) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.ranking-row-premium:hover {
  background: rgba(26, 37, 64, 0.8) !important;
  border-color: var(--dark-border-accent) !important;
}

.rr-num {
  color: var(--dark-text-muted) !important;
}

.rr-num.gold {
  color: #fbbf24 !important;
}

.rr-num.top {
  color: var(--dark-text-accent) !important;
}

.rr-name {
  color: var(--dark-text-primary) !important;
}

.rr-track {
  background: rgba(59, 130, 246, 0.15) !important;
}

.rr-fill {
  background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4) !important;
}

.rr-val {
  color: var(--dark-text-primary) !important;
}

/* ─── Chips & Badges ─── */
.chip {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.chip-blue {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

.chip-green {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

.chip-gold {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

.chip-red {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

.badge-modern {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.badge-modern.red {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.badge-modern.purple {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.badge-modern.amber {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.badge-modern.green {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.badge-modern.gray {
  background: rgba(148, 163, 184, 0.15) !important;
  color: var(--dark-text-secondary) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Level Badges */
.lvl-badge {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* ─── Buttons ─── */
.btn {
  transition: all 0.2s ease !important;
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  color: #fff !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.btn-secondary:hover {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

/* ─── Empty States ─── */
.empty-premium {
  background: rgba(17, 26, 46, 0.5) !important;
  border: 1px dashed var(--dark-border) !important;
  border-radius: 14px !important;
}

.empty-premium .empty-icon {
  color: var(--dark-text-muted) !important;
}

.empty-premium .empty-title {
  color: var(--dark-text-primary) !important;
}

.empty-premium .empty-desc {
  color: var(--dark-text-secondary) !important;
}

/* ─── Case Cards — Intelligence Terminal ─── */
.case-card-intel {
  background: var(--dark-bg-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--dark-shadow) !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
}

.case-card-intel:hover {
  border-color: var(--dark-border-accent) !important;
  box-shadow: var(--dark-glow-blue) !important;
  transform: translateY(-2px);
}

.cc-intel-header {
  background: rgba(26, 37, 64, 0.6) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.cc-intel-id {
  color: var(--dark-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.cc-intel-ubication {
  background: rgba(17, 26, 46, 0.5) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
  color: var(--dark-text-secondary) !important;
}

.cc-intel-resumen {
  color: var(--dark-text-secondary) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.cc-intel-chip {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--dark-text-secondary) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.cc-intel-chip-more {
  background: rgba(59, 130, 246, 0.2) !important;
  color: var(--dark-text-accent) !important;
}

.cc-intel-multi-toggle {
  background: rgba(17, 26, 46, 0.5) !important;
  color: var(--dark-text-secondary) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.cc-intel-multi-toggle:hover {
  background: rgba(26, 37, 64, 0.8) !important;
}

.cc-intel-multi-list {
  background: rgba(10, 15, 26, 0.6) !important;
}

.cc-intel-fuente {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.cc-intel-fuente-medio {
  color: var(--dark-text-accent) !important;
}

.cc-intel-fuente-titulo {
  color: var(--dark-text-secondary) !important;
}

.cc-intel-metrics {
  background: rgba(17, 26, 46, 0.6) !important;
  border-top: 1px solid var(--dark-border-subtle) !important;
}

.cc-intel-metric {
  border-right: 1px solid var(--dark-border-subtle) !important;
}

.cc-intel-metric:last-child {
  border-right: none !important;
}

.cc-intel-metric-val {
  color: var(--dark-text-primary) !important;
}

.cc-intel-metric-lbl {
  color: var(--dark-text-muted) !important;
}

.cc-intel-actions {
  background: rgba(17, 26, 46, 0.4) !important;
  border-top: 1px solid var(--dark-border-subtle) !important;
}

/* ─── MiMo Panel ─── */
.mimo-panel {
  background: linear-gradient(135deg, #0d1525, #111a2e) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--dark-shadow-lg), var(--dark-glow-blue) !important;
}

.mimo-header {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.mimo-title {
  color: var(--dark-text-primary) !important;
}

.mimo-disclaimer {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

.mimo-stat {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.mimo-stat-label {
  color: var(--dark-text-muted) !important;
}

.mimo-stat-value {
  color: var(--dark-text-primary) !important;
}

.mimo-stat-sub {
  color: var(--dark-text-secondary) !important;
}

.mimo-section {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
}

.mimo-section-title {
  color: var(--dark-text-secondary) !important;
}

.mimo-quality-bar {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.mimo-quality-label {
  color: var(--dark-text-secondary) !important;
}

.mimo-bar-track {
  background: rgba(59, 130, 246, 0.1) !important;
}

.mimo-bar-fill {
  background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) !important;
}

.mimo-bar-label {
  color: var(--dark-text-secondary) !important;
}

.mimo-bar-val {
  color: var(--dark-text-primary) !important;
}

.mimo-context-item {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.mimo-context-header {
  color: var(--dark-text-secondary) !important;
}

.mimo-context-val {
  color: var(--dark-text-primary) !important;
}

/* ─── Modal — Premium Glass Dark ─── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.pdmodal {
  background: var(--dark-bg-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--dark-shadow-lg), var(--dark-glow-blue-strong) !important;
  max-width: 900px !important;
}

.pdmodal-header {
  background: linear-gradient(135deg, #0d1525, #1a2540) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

.pdmodal-title {
  color: var(--dark-text-primary) !important;
}

.pdmodal-id {
  color: var(--dark-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.pdmodal-date {
  color: var(--dark-text-secondary) !important;
}

.pdmodal-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--dark-text-secondary) !important;
}

.pdmodal-close:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

.pdmodal-body {
  background: var(--dark-bg-secondary) !important;
  color: var(--dark-text-secondary) !important;
}

.pdmodal-tabs {
  background: rgba(17, 26, 46, 0.8) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-tab {
  color: var(--dark-text-muted) !important;
  border-bottom: 2px solid transparent !important;
}

.pdmodal-tab:hover {
  color: var(--dark-text-primary) !important;
}

.pdmodal-tab.active {
  color: var(--dark-text-accent) !important;
  border-bottom-color: var(--dark-text-accent) !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

.pdmodal-tab-panel {
  color: var(--dark-text-secondary) !important;
}

.pdmodal-section {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-section-title {
  color: var(--dark-text-secondary) !important;
}

.pdmodal-sinopsis {
  color: var(--dark-text-secondary) !important;
}

.pdmodal-kpi-row {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-kpi {
  border-right: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-kpi:last-child {
  border-right: none !important;
}

.pdmodal-kpi-val {
  color: var(--dark-text-primary) !important;
}

.pdmodal-kpi-lbl {
  color: var(--dark-text-muted) !important;
}

.pdmodal-var-item {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-var-label {
  color: var(--dark-text-muted) !important;
}

.pdmodal-var-value {
  color: var(--dark-text-primary) !important;
}

.pdmodal-territorial {
  background: rgba(17, 26, 46, 0.5) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-terr-label {
  color: var(--dark-text-muted) !important;
}

.pdmodal-persona {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
}

.pdmodal-persona-role {
  color: var(--dark-text-muted) !important;
}

.pdmodal-persona-info {
  color: var(--dark-text-primary) !important;
}

.pdmodal-footer {
  background: rgba(17, 26, 46, 0.6) !important;
  border-top: 1px solid var(--dark-border-subtle) !important;
}

.pd-badge {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
}

.pd-badge-red {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

.pd-badge-green {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

.pd-badge-gold {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

.pd-badge-purple {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
}

.pd-badge-gray {
  background: rgba(148, 163, 184, 0.15) !important;
  color: var(--dark-text-secondary) !important;
}

.pd-badge-blue {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

/* ─── Modal Timeline ─── */
.pdmodal-timeline {
  border-left: 2px solid var(--dark-border) !important;
}

.pdmodal-timeline-dot {
  box-shadow: 0 0 8px currentColor !important;
}

.pdmodal-timeline-date {
  color: var(--dark-text-muted) !important;
}

.pdmodal-timeline-title {
  color: var(--dark-text-primary) !important;
}

.pdmodal-timeline-desc {
  color: var(--dark-text-secondary) !important;
}

/* ─── Modal Fuentes ─── */
.mfont {
  background: rgba(17, 26, 46, 0.5) !important;
  border: 1px solid var(--dark-border-subtle) !important;
  border-radius: 12px !important;
}

.mfont-note {
  color: var(--dark-text-muted) !important;
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.mfont-item {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

.mfont-item:last-child {
  border-bottom: none !important;
}

.mfont-medio {
  color: var(--dark-text-accent) !important;
}

.mfont-url a {
  color: var(--dark-text-accent) !important;
}

.mfont-url a:hover {
  color: #93c5fd !important;
}

.mfont-link {
  color: var(--dark-text-accent) !important;
}

.mfont-meta {
  color: var(--dark-text-muted) !important;
}

.mfont-date {
  color: var(--dark-text-muted) !important;
}

.mfont-no-source {
  color: var(--dark-text-muted) !important;
}

/* ─── Scrollbar Dark ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5);
}

/* ─── Selection ─── */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

/* ─── Links ─── */
a {
  color: var(--dark-text-accent) !important;
}

a:hover {
  color: #93c5fd !important;
}

/* ─── Tables ─── */
table {
  background: var(--dark-bg-card) !important;
  color: var(--dark-text-secondary) !important;
}

th {
  background: rgba(26, 37, 64, 0.6) !important;
  color: var(--dark-text-primary) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

td {
  border-bottom: 1px solid var(--dark-border-subtle) !important;
}

/* ─── Forms ─── */
input, select, textarea {
  background: var(--dark-bg-input) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--dark-text-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  outline: none !important;
}

/* ─── Tooltips ─── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: var(--dark-bg-elevated);
  color: var(--dark-text-primary);
  border: 1px solid var(--dark-border);
  border-radius: 8px;
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
  box-shadow: var(--dark-shadow);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ─── Principles Grid ─── */
.principio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.principio-item {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
}

.principio-title {
  color: var(--dark-text-primary) !important;
}

.principio-desc {
  color: var(--dark-text-secondary) !important;
}

/* ─── Connection Cards ─── */
.connection-card {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

.connection-card:hover {
  border-color: var(--dark-border-accent) !important;
  box-shadow: var(--dark-glow-blue) !important;
}

.connection-title {
  color: var(--dark-text-primary) !important;
}

.connection-desc {
  color: var(--dark-text-secondary) !important;
}

.connection-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
}

/* ─── Export Items ─── */
.export-item {
  background: rgba(17, 26, 46, 0.6) !important;
  border: 1px solid var(--dark-border-subtle) !important;
  border-radius: 12px !important;
}

.export-item:hover {
  border-color: var(--dark-border-accent) !important;
}

.export-item-title {
  color: var(--dark-text-primary) !important;
}

.export-item-desc {
  color: var(--dark-text-secondary) !important;
}

.export-badge {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--dark-text-accent) !important;
}

/* ─── Footer ─── */
.app-footer {
  background: rgba(10, 15, 26, 0.95) !important;
  border-top: 1px solid var(--dark-border) !important;
}

.app-footer h4 {
  color: var(--dark-text-primary) !important;
}

.app-footer p {
  color: var(--dark-text-secondary) !important;
}

.app-footer a {
  color: var(--dark-text-accent) !important;
}

/* ─── Responsive Adjustments ─── */
@media (max-width: 1024px) {
  .grid-kpi-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-kpi-6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .grid-kpi-4 {
    grid-template-columns: 1fr !important;
  }
  .grid-kpi-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .principio-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Loading Animation ─── */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
  }
}

.loading {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ─── Premium Enhancements Dark Overrides ─── */

/* Ranking items - ejecutivo/dashboard */
.pd-ranking-item:hover { background: rgba(59, 130, 246, 0.08) !important; }
.pd-ranking-num {
  background: rgba(59, 130, 246, 0.12) !important;
  color: var(--dark-text-primary) !important;
}
.pd-ranking-num-top { background: rgba(59, 130, 246, 0.25) !important; color: var(--dark-text-accent) !important; }
.pd-ranking-name { color: var(--dark-text-primary) !important; }
.pd-ranking-bar-wrap { background: rgba(255, 255, 255, 0.06) !important; }
.pd-ranking-val { color: var(--dark-text-primary) !important; }

/* Bar tracks and fills */
.pd-bar-track { background: rgba(255, 255, 255, 0.06) !important; }
.pd-bar-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa) !important; }
.pd-bar-label { color: var(--dark-text-secondary) !important; }
.pd-bar-value { color: var(--dark-text-primary) !important; }

/* Sexo bars */
.sexo-bar { background: rgba(59, 130, 246, 0.15) !important; }

/* Heatmap badges */
.pd-heatmap-empty-badge { background: rgba(239, 68, 68, 0.15) !important; color: #fda4af !important; }

/* Section titles in dark context */
.section-title, .card-title, .panel-title {
  color: var(--dark-text-primary) !important;
}

/* Table improvements for dark */
table th { background: rgba(10, 15, 26, 0.95) !important; color: var(--dark-text-muted) !important; }
table td { color: var(--dark-text-secondary) !important; }
table tr:hover td { background: rgba(59, 130, 246, 0.06) !important; }

/* Filter inputs */
.filter-input, .filter-select, input[type="text"], select {
  background: var(--dark-bg-input) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

/* Calendar heatmap dark */
.cal-premium-day.lvl-0 { background: rgba(59, 130, 246, 0.08) !important; color: var(--dark-text-muted) !important; }

/* Modal dark */
.modal-content, .modal-header, .modal-body { background: var(--dark-bg-card) !important; color: var(--dark-text-primary) !important; }
.modal-footer { background: var(--dark-bg-card) !important; border-top-color: var(--dark-border) !important; }
.modal-title { color: var(--dark-text-primary) !important; }
.close { color: var(--dark-text-secondary) !important; }

/* Tooltip dark */
.tooltip, .chart-tooltip, [class*="tooltip"] {
  background: rgba(10, 15, 26, 0.95) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* Badge/Chip dark */
.chip, .badge {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--dark-text-secondary) !important;
}

/* Progress bars */
.progress, .progress-bar {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Empty states */
.empty-state, .no-data, [class*="empty"] {
  color: var(--dark-text-muted) !important;
}

/* Decrease opacity on charts without data */
.chart-container canvas { opacity: 1; }
.echarts-instance canvas { opacity: 1; }