/*
 * skin-datacraft.css — DATA-CRAFT / precisión aesthetic skin
 * Capa dev de preview REVERSIBLE. NO es producción.
 * Scope: html[data-skin="datacraft"] únicamente.
 * Carga después de: app.css, tokens.css, improvements.css, immersive.css, glass.css
 * Togglear: document.documentElement.setAttribute('data-skin', 'datacraft')
 * Revertir: document.documentElement.removeAttribute('data-skin')
 * Look objetivo: herramienta de datos seria — Linear / Bellingcat / ICIJ
 * Sin sombras, sin gradientes, sin blur. Hairlines 1px. Monospace protagonista.
 */

/* ─── Variables locales ──────────────────────────────────────────────────── */
html[data-skin="datacraft"] {
  --dc-ink:        #16181d;
  --dc-ink-soft:   color-mix(in srgb, var(--dc-ink) 88%, #fff);
  --dc-ink-muted:  color-mix(in srgb, var(--dc-ink) 40%, #fff);
  --dc-bg:         #fbfbfa;
  --dc-bg-white:   #ffffff;
  --dc-hairline:   color-mix(in srgb, var(--dc-ink) 14%, #fff);
}

/* ─── Fondo global ───────────────────────────────────────────────────────── */
html[data-skin="datacraft"] body.homepage {
  background: var(--dc-bg) !important;
  background-image: none !important;
  color: var(--dc-ink);
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
html[data-skin="datacraft"] .site-navbar {
  background: var(--po-color-blue) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--po-color-blue) 60%, #fff) !important;
}

/* ─── Hero / cover ───────────────────────────────────────────────────────── */
html[data-skin="datacraft"] .homepage__cover {
  background: var(--po-color-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--dc-hairline) !important;
}

html[data-skin="datacraft"] .homepage__cover__header h1 {
  font-family: var(--po-font-mono, monospace) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* ─── Sección título + eyebrow ───────────────────────────────────────────── */
html[data-skin="datacraft"] .h3-title {
  font-family: var(--po-font-headline, 'Chivo', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem) !important;
  color: var(--dc-ink) !important;
}

html[data-skin="datacraft"] .gl-eyebrow {
  font-family: var(--po-font-mono, monospace) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  color: var(--po-color-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: .6em !important;
}

html[data-skin="datacraft"] .gl-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 2em !important;
  height: 1px !important;
  background: var(--po-color-primary) !important;
  flex-shrink: 0 !important;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
html[data-skin="datacraft"] .homepage__main__results .card {
  background: var(--dc-bg-white) !important;
  border: 1px solid var(--dc-ink-soft) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: border-color .12s ease !important;
}

html[data-skin="datacraft"] .homepage__main__results .card:hover {
  border-color: var(--po-color-primary) !important;
  box-shadow: none !important;
  transform: none !important;
  outline: 1px solid var(--po-color-primary) !important;
  outline-offset: -1px !important;
}

html[data-skin="datacraft"] .card__image {
  border-bottom: 1px solid var(--dc-hairline) !important;
  box-shadow: none !important;
  filter: none !important;
  background: var(--dc-bg) !important;
}

html[data-skin="datacraft"] .card__title {
  font-family: var(--po-font-headline, 'Chivo', sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--dc-ink) !important;
}

/* ─── Filtros / búsqueda ─────────────────────────────────────────────────── */
html[data-skin="datacraft"] .search__box,
html[data-skin="datacraft"] .search-form {
  background: var(--dc-bg-white) !important;
  border: 1px solid var(--dc-ink-soft) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

html[data-skin="datacraft"] .form-control,
html[data-skin="datacraft"] select.filter {
  background: var(--dc-bg-white) !important;
  border: 1px solid var(--dc-ink-soft) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--dc-ink) !important;
}

html[data-skin="datacraft"] [type="search"].form-control,
html[data-skin="datacraft"] input[type="text"].form-control {
  font-family: var(--po-font-mono, monospace) !important;
}

html[data-skin="datacraft"] .form-control:focus,
html[data-skin="datacraft"] select.filter:focus {
  border-color: var(--po-color-primary) !important;
  outline: 2px solid var(--po-color-primary) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* ─── Botones ────────────────────────────────────────────────────────────── */
html[data-skin="datacraft"] .btn-blue,
html[data-skin="datacraft"] #apply-filters,
html[data-skin="datacraft"] .btn-advaned-filters {
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--po-font-mono, monospace) !important;
  letter-spacing: .04em !important;
}

html[data-skin="datacraft"] .btn-blue:hover,
html[data-skin="datacraft"] #apply-filters:hover,
html[data-skin="datacraft"] .btn-advaned-filters:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
html[data-skin="datacraft"] .homepage__main__sidebar {
  border: 1px solid var(--dc-ink-soft) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: var(--dc-bg-white) !important;
}

html[data-skin="datacraft"] .sidebar__header,
html[data-skin="datacraft"] .sidebar__header h3 {
  background: var(--po-color-blue) !important;
  color: #fff !important;
  border-bottom: 1px solid color-mix(in srgb, var(--po-color-blue) 60%, #fff) !important;
  box-shadow: none !important;
}

html[data-skin="datacraft"] .number {
  font-family: var(--po-font-mono, monospace) !important;
  font-feature-settings: "tnum" 1 !important;
  font-weight: 700 !important;
  color: var(--po-color-primary) !important;
}

html[data-skin="datacraft"] .label {
  font-family: var(--po-font-mono, monospace) !important;
  font-feature-settings: "tnum" 1 !important;
  font-weight: 700 !important;
  color: var(--dc-ink) !important;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
html[data-skin="datacraft"] .site-footer {
  background: var(--po-color-blue) !important;
  background-image: none !important;
  border-top: 1px solid color-mix(in srgb, var(--po-color-blue) 60%, #fff) !important;
  box-shadow: none !important;
}

/* ─── Chips / tags ───────────────────────────────────────────────────────── */
html[data-skin="datacraft"] [class*="chip"],
html[data-skin="datacraft"] [class*="badge"],
html[data-skin="datacraft"] [class*="tag"] {
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--po-font-mono, monospace) !important;
  font-size: .7rem !important;
  border: 1px solid var(--dc-hairline) !important;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="datacraft"] * {
    transition: none !important;
    animation: none !important;
  }
}