/**
 * components.css — Tarjetas KPI, badges, filtros, modal, chart cards,
 *                  tarjetas de eventos, timeline, chips, estados vacios,
 *                  responsive, modo oscuro
 */

/* ═══ KPI Cards ═══ */
.kpi-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* ═══ Chart Cards ═══ */
.chart-card {
  background: var(--bg-card);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: background .3s ease, box-shadow .3s ease;
}

/* ═══ Filter pills ═══ */
.filter-pill { transition: all .15s ease; }
.filter-pill:hover { background: var(--brand-light); }
.filter-pill.active { background: var(--brand); color: #fff; }

/* ═══ Tabs ═══ */
.tab-btn { transition: all .2s ease; }
.tab-btn.active { color: var(--brand); border-color: var(--brand); }

/* ═══ Leaflet ═══ */
.leaflet-container { border-radius: 1rem; }

/* ═══ AG Grid overrides ═══ */
.ag-theme-alpine {
  --ag-border-radius: 0.75rem;
  --ag-row-hover-color: #f0f5ff;
  --ag-selected-row-background-color: #dce6fb;
  font-family: 'DM Sans', sans-serif;
}
.ag-theme-alpine .ag-header { background: #f8fafc; }

.dark .ag-theme-alpine {
  --ag-background-color: var(--bg-card);
  --ag-header-background-color: #151a28;
  --ag-odd-row-background-color: #151a28;
  --ag-row-hover-color: #1e2740;
  --ag-selected-row-background-color: #1e3a5f;
  --ag-foreground-color: var(--text-primary);
  --ag-header-foreground-color: var(--text-secondary);
  --ag-border-color: var(--border-color);
}

/* ═══ Modal overlay ═══ */
.modal-overlay { backdrop-filter: blur(6px); }

/* ═══ Upload modal ═══ */
.upload-modal {
  background: var(--bg-card);
  color: var(--text-primary);
}

.upload-dropzone {
  border: 1.5px dashed var(--border-color);
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(53,99,216,.05), rgba(53,99,216,0));
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.upload-dropzone:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.upload-file-card {
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: var(--bg-body);
}

.upload-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148,163,184,.18);
}

.upload-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3563d8, #3ec9a7);
  transition: width .25s ease;
}

.upload-status {
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}

.upload-status-success {
  background: #ecfdf5;
  color: #065f46;
}

.upload-status-error {
  background: #fef2f2;
  color: #991b1b;
}

.dark .upload-dropzone {
  background: linear-gradient(180deg, rgba(53,99,216,.14), rgba(53,99,216,0));
}

.dark .upload-file-card {
  background: #151a28;
}

.dark .upload-progress-track {
  background: rgba(42,48,68,.95);
}

.dark .upload-status-success {
  background: rgba(5,150,105,.16);
  color: #a7f3d0;
}

.dark .upload-status-error {
  background: rgba(220,38,38,.14);
  color: #fecaca;
}

/* ═══ Fade up animation ═══ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .4s ease forwards; }

/* ═══ Badges ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-identidad     { background: #E8E2F8; color: #5B21B6; }
.badge-colaboracion  { background: #FDE2D2; color: #9C4221; }
.badge-anticipacion  { background: #D6EAF8; color: #1B4F72; }
.badge-cohesion      { background: #FEF0C7; color: #854D0E; }
.badge-sindefinir    { background: #f1f5f9; color: #64748b; }

.badge-flow-si           { background: #d1fae5; color: #065f46; }
.badge-flow-no           { background: #fee2e2; color: #991b1b; }
.badge-flow-seleccionada { background: #fef3c7; color: #92400e; }
.badge-flow-pendiente    { background: #e0e7ff; color: #3730a3; }

/* ═══ Active filter chips ═══ */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: #dce6fb;
  color: #1e44b0;
  cursor: pointer;
  transition: all .15s ease;
}
.filter-chip:hover { background: #b8cdf7; }
.filter-chip svg { width: 12px; height: 12px; }
.dark .filter-chip { background: #1e3a5f; color: #8aabf0; }
.dark .filter-chip:hover { background: #254a70; }

/* ═══ Event cards (card view) ═══ */
.event-card {
  background: var(--bg-card);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.event-card .event-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.event-card .event-meta {
  font-size: .75rem;
  color: var(--text-secondary);
}

/* ═══ Empty state ═══ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; margin-bottom: .75rem; opacity: .5; }
.empty-state p { font-size: .85rem; margin-bottom: .75rem; }
.empty-state button {
  font-size: .75rem;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: all .15s ease;
  background: transparent;
  cursor: pointer;
}
.empty-state button:hover { background: var(--brand-light); color: var(--brand); }

/* ═══ View toggle buttons ═══ */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  overflow: hidden;
}
.view-toggle button {
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s ease;
  display: flex;
  align-items: center;
}
.view-toggle button.active {
  background: var(--brand);
  color: #fff;
}
.view-toggle button:not(.active):hover {
  background: var(--bg-body);
}

/* ═══ Mobile filter panel ═══ */
/* Botón mobile y botón cerrar: ocultos (filtros siempre visibles) */
.mobile-filter-btn { display: none !important; }
.filter-close-btn { display: none !important; }

/* ═══ Responsive layout ═══ */
@media (max-width: 767px) {
  .detail-panel {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ═══ Dark mode helpers ═══ */
.dark .bg-white { background: var(--bg-card) !important; }
.dark .bg-white\/80, .dark .bg-white\/90 { background: var(--bg-header) !important; }
.dark .border-surface-200 { border-color: var(--border-color) !important; }
.dark .text-brand-900 { color: #b8cdf7 !important; }
.dark .text-slate-400 { color: var(--text-muted) !important; }
.dark .text-slate-500 { color: var(--text-secondary) !important; }
.dark .text-slate-600 { color: var(--text-secondary) !important; }
.dark .text-slate-700 { color: var(--text-primary) !important; }
.dark .text-slate-900 { color: var(--text-primary) !important; }
.dark .bg-surface-100, .dark .bg-surface-50 { background: #151a28 !important; }
.dark .border-surface-300 { border-color: #2a3044 !important; }
.dark .hover\:bg-surface-50:hover { background: #1e2740 !important; }
.dark .hover\:bg-surface-100:hover { background: #1e2740 !important; }
.dark .hover\:bg-brand-50:hover { background: #1e3a5f !important; }
.dark .bg-brand-50 { background: #1e3a5f !important; }
.dark input, .dark select {
  background: #151a28 !important;
  color: var(--text-primary) !important;
  border-color: #2a3044 !important;
}
.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; }
.dark .shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,.5) !important; }
.dark .bg-black\/30 { background: rgba(0,0,0,.5) !important; }