/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM · Observatorio de Violencia RD
   Centro de Comando Analítico · Sistema de tokens institucionales
   ═══════════════════════════════════════════════════════════════════ */


/* ── Design tokens now in observatorio-theme.css ── */

/* ── Base resets ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ── Layout helpers ── */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 980px; }

@media (max-width: 768px) {
  .container { padding: 0 var(--space-4); }
  :root { --header-h: 56px; --nav-h: 46px; }
}

/* ── Empty states ── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3rem 1rem; text-align:center; color:var(--color-text-muted);
}
.empty-state-icon { font-size:2.5rem; margin-bottom:0.75rem; opacity:0.5; }
.empty-state-title { font-size:var(--text-sm); font-weight:600; color:var(--color-text-soft); margin-bottom:0.25rem; }
.empty-state-desc { font-size:var(--text-xs); color:var(--color-text-muted); max-width:360px; line-height:1.5; }

/* ── Badges unificados ── */
.badge {
  display:inline-block; padding:0.12rem 0.45rem; border-radius:var(--radius-xs);
  font-size:0.68rem; font-weight:600; line-height:1.4; white-space:nowrap;
}
.badge-red { background:var(--color-danger-soft); color:var(--color-danger); }
.badge-amber { background:var(--color-warning-soft); color:var(--color-warning); }
.badge-green { background:var(--color-success-soft); color:var(--color-success); }
.badge-blue { background:var(--color-accent-soft); color:var(--color-accent); }
.badge-purple { background:#f5f3ff; color:#7c3aed; }
.badge-gray { background:#f1f5f9; color:var(--color-text-muted); }

/* ── Alertas ── */
.alert {
  display:flex; gap:0.5rem; align-items:flex-start; padding:0.5rem 0.75rem;
  border-radius:var(--radius-sm); font-size:var(--text-xs); line-height:1.5;
}
.alert-icon { font-size:1rem; flex-shrink:0; }
.alert-danger { background:var(--color-danger-soft); border:1px solid #fecaca; color:var(--color-danger); }
.alert-warning { background:var(--color-warning-soft); border:1px solid #fde68a; color:var(--color-warning); }
.alert-info { background:var(--color-info-soft); border:1px solid #a5f3fc; color:var(--color-info); }
.alert-success { background:var(--color-success-soft); border:1px solid #bbf7d0; color:var(--color-success); }

/* ── Skeleton loading ── */
.skeleton {
  background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size:200% 100%; animation:skeleton-pulse 1.5s ease-in-out infinite;
  border-radius:var(--radius-xs); height:1rem; margin-bottom:0.5rem;
}
@keyframes skeleton-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { height:80px; border-radius:var(--radius-md); }
.skeleton-sm { height:0.7rem; width:60%; }

/* ── Tooltips ── */
[data-tooltip] {
  position:relative; cursor:help;
}
[data-tooltip]:hover::after {
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff;
  padding:0.25rem 0.5rem; border-radius:var(--radius-xs); font-size:0.68rem;
  white-space:nowrap; z-index:100; box-shadow:var(--shadow-md);
  pointer-events:none; animation:fadeSlideDown 0.15s ease-out;
}

/* ── KPI cards ── */
.kpi-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:1rem; text-align:center;
  transition:box-shadow var(--t-base);
}
.kpi-card:hover { box-shadow:var(--shadow-md); }
.kpi-value { font-size:var(--text-2xl); font-weight:800; line-height:1.1; }
.kpi-label { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:0.15rem; text-transform:uppercase; letter-spacing:0.03em; }

/* ── Section headers ── */
.section-title {
  font-size:var(--text-md); font-weight:700; color:var(--color-navy);
  margin:1.5rem 0 0.75rem; padding-bottom:0.35rem;
  border-bottom:2px solid var(--color-border); display:flex; align-items:center; gap:0.4rem;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--color-border-strong); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--color-text-muted); }

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f1f5f9;
    --color-text-muted: #64748b;
    --color-text-soft: #94a3b8;
    --color-text-inverse: #0f172a;
    --color-text-on-dark: #e2e8f0;
    --color-bg: #060d18;
    --color-bg-subtle: #0b1525;
    --color-bg-deep: #040b14;
    --color-surface: #0d1a2d;
    --color-surface-dark: #0b1525;
    --color-border: #1e293b;
    --color-border-strong: #334155;
    --color-border-dark: #1e3a5f;
    --color-accent-soft: rgba(30, 64, 175, 0.2);
    --color-danger-soft: rgba(185, 28, 28, 0.2);
    --color-warning-soft: rgba(180, 83, 9, 0.2);
    --color-success-soft: rgba(21, 128, 61, 0.2);
    --color-info-soft: rgba(14, 116, 144, 0.2);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
  }
}

/* ── Force dark class (optional override) ── */
body.dark {
  --color-text: #f1f5f9;
  --color-text-muted: #64748b;
  --color-text-soft: #94a3b8;
  --color-text-inverse: #0f172a;
  --color-text-on-dark: #e2e8f0;
  --color-bg: #060d18;
  --color-bg-subtle: #0b1525;
  --color-bg-deep: #040b14;
  --color-surface: #0d1a2d;
  --color-surface-dark: #0b1525;
  --color-border: #1e293b;
  --color-border-strong: #334155;
  --color-border-dark: #1e3a5f;
  --color-accent-soft: rgba(30, 64, 175, 0.25);
  --color-danger-soft: rgba(185, 28, 28, 0.25);
  --color-warning-soft: rgba(180, 83, 9, 0.25);
  --color-success-soft: rgba(21, 128, 61, 0.25);
  --color-info-soft: rgba(14, 116, 144, 0.25);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
}

@keyframes spin { to { transform: rotate(360deg); } }