/*
 * skin-dark.css — DARK EDITORIAL / Cinematográfico
 * Variante dev-preview (capa reversible, carga después de immersive.css / glass.css)
 * Activa con: document.documentElement.dataset.skin = "dark"
 * Quitar con:  delete document.documentElement.dataset.skin
 * Scope: html[data-skin="dark"] — NO afecta producción
 * Tokens D3: redefinidos aquí; el mapa requiere recarga para tomar los valores.
 * Autor: r33 skin preview · 2026-08-01
 */

/* ─── 1. TOKENS GLOBALES ─── */
html[data-skin="dark"] {
  --po-color-horizon-blue: #0b1f2b;   /* fondo/mar del mapa cover */
  --po-color-blue:         #1e3a4a;   /* fill de países slate oscuro */
  --po-color-primary:      #37C2F3;   /* dots/accent cyan que brillan */
  --po-color-sky:          #37C2F3;   /* alias accent */
  --po-color-accent:       #37C2F3;
  --po-color-text:         #e8eef2;

  /* locales */
  --dk-bg:      #0b1620;
  --dk-cover:   #0b1f2b;
  --dk-surface: #12252f;
  --dk-sidebar: #0f2029;
  --dk-navbar:  #0d1b24;
  --dk-input:   #14303c;
  --dk-border:  rgba(255, 255, 255, 0.08);
  --dk-ink:     #e8eef2;
  --dk-muted:   #9fb0bc;
  --dk-accent:  #37C2F3;
}

/* ─── 2. FONDO DE PÁGINA ─── */
html[data-skin="dark"] body,
html[data-skin="dark"] body.homepage {
  background: var(--dk-bg) !important;
  color: var(--dk-ink) !important;
}

/* glow radial sutil arriba-centro (cine, no aurora) */
html[data-skin="dark"] body.homepage {
  background:
    radial-gradient(ellipse 70% 40% at 50% -4%,
      rgba(55, 194, 243, 0.08) 0%,
      transparent 70%),
    var(--dk-bg) !important;
}

/* ─── 3. NAVBAR ─── */
html[data-skin="dark"] .site-navbar {
  background: var(--dk-navbar) !important;
  border-bottom: 1px solid var(--dk-border) !important;
  box-shadow: none !important;
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .site-navbar a,
html[data-skin="dark"] .site-navbar .nav-link {
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .site-navbar a:hover,
html[data-skin="dark"] .site-navbar .nav-link:hover {
  color: var(--dk-accent) !important;
}

/* ─── 4. HERO / MAPA (best-effort: el D3 lee tokens al render) ─── */
html[data-skin="dark"] .homepage__cover {
  background: var(--dk-cover) !important;
  /* anula gradiente claro de immersive */
  background-image: none !important;
}

html[data-skin="dark"] .homepage__cover__header h1 {
  color: var(--dk-ink) !important;
  text-shadow: 0 0 24px rgba(55, 194, 243, 0.25);
}

/* ─── 5. FILTROS ─── */
html[data-skin="dark"] .search__box,
html[data-skin="dark"] .search-form {
  background: var(--dk-sidebar) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .form-control,
html[data-skin="dark"] input.form-control,
html[data-skin="dark"] select.filter {
  background: var(--dk-input) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .form-control::placeholder {
  color: var(--dk-muted) !important;
  opacity: 1;
}

html[data-skin="dark"] .form-control:focus,
html[data-skin="dark"] select.filter:focus {
  outline: none !important;
  border-color: var(--dk-accent) !important;
  box-shadow: 0 0 0 3px rgba(55, 194, 243, 0.2) !important;
}

html[data-skin="dark"] select.filter option {
  background: var(--dk-input);
  color: var(--dk-ink);
}

/* ─── 6. EYEBROW + H3-TITLE ─── */
html[data-skin="dark"] .gl-eyebrow {
  color: var(--dk-accent) !important;
  font-family: var(--po-font-mono, monospace) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
  border-color: var(--dk-accent) !important;   /* raya/borde decorativo */
}

html[data-skin="dark"] .h3-title {
  color: var(--dk-ink) !important;
  font-family: var(--po-font-headline, 'Chivo', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, calc(1.2rem + 1.5vw), 2.4rem) !important;
}

/* ─── 7. CARDS ─── */
html[data-skin="dark"] .homepage__main__results .card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .homepage__main__results .card:hover {
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(55, 194, 243, 0.35) !important;
  border-color: rgba(55, 194, 243, 0.35) !important;
}

html[data-skin="dark"] .homepage__main__results .card__image:empty,
html[data-skin="dark"] .homepage__main__results .card__image {
  background: var(--dk-input) !important;
}

html[data-skin="dark"] .homepage__main__results .card__title {
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .homepage__main__results .card a {
  color: var(--dk-ink) !important;
  text-decoration: none;
}

html[data-skin="dark"] .homepage__main__results .card a:hover {
  color: var(--dk-accent) !important;
}

/* ─── 8. SIDEBAR ─── */
html[data-skin="dark"] .homepage__main__sidebar {
  background: var(--dk-sidebar) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 12px;
  color: var(--dk-ink) !important;
}

html[data-skin="dark"] .sidebar__header,
html[data-skin="dark"] .sidebar__header h3 {
  background: #14303c !important;
  color: var(--dk-ink) !important;
  border-bottom: 1px solid var(--dk-border) !important;
}

/* stat numbers brillan en accent */
html[data-skin="dark"] .number {
  color: var(--dk-accent) !important;
  font-family: var(--po-font-mono, monospace) !important;
}

/* labels y párrafos: muted (#9fb0bc = 4.6:1 sobre #0f2029 ✓ AA) */
html[data-skin="dark"] .label,
html[data-skin="dark"] .paragraph {
  color: var(--dk-muted) !important;
}

/* ─── 9. BOTONES ─── */
html[data-skin="dark"] .btn-blue,
html[data-skin="dark"] #apply-filters {
  background: var(--dk-accent) !important;
  color: #0b1620 !important;
  border-color: var(--dk-accent) !important;
  font-weight: 700;
}

html[data-skin="dark"] .btn-blue:hover,
html[data-skin="dark"] #apply-filters:hover {
  background: #5dd0f7 !important;
  border-color: #5dd0f7 !important;
}

/* ─── 10. FOOTER ─── */
html[data-skin="dark"] .site-footer {
  background: var(--dk-bg) !important;
  border-top: 1px solid var(--dk-border) !important;
  color: var(--dk-muted) !important;
}

html[data-skin="dark"] .site-footer a {
  color: var(--dk-muted) !important;
}

html[data-skin="dark"] .site-footer a:hover {
  color: var(--dk-accent) !important;
}

/* ─── 11. CHIPS / BADGES ─── */
html[data-skin="dark"] .chip,
html[data-skin="dark"] [class*="chip"] {
  background: rgba(55, 194, 243, 0.1) !important;
  color: var(--dk-accent) !important;
  border: 1px solid rgba(55, 194, 243, 0.25) !important;
}

/* ─── 12. MOTION SAFETY ─── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="dark"] .homepage__main__results .card,
  html[data-skin="dark"] .homepage__main__results .card:hover,
  html[data-skin="dark"] .btn-blue,
  html[data-skin="dark"] #apply-filters {
    transition: none !important;
  }
}