/*
 * skin-editorial.css — Variante estética "EDITORIAL / papel denso"
 * Capa dev de preview REVERSIBLE — NO es producción.
 * Scope exclusivo: html[data-skin="editorial"]
 * Carga después de app.css, tokens.css, improvements.css, immersive.css, glass.css.
 * Para activar: document.documentElement.dataset.skin = 'editorial'
 * Para revertir: delete document.documentElement.dataset.skin
 */

/* ── FONDO PAPEL ─────────────────────────────────────────────────────────── */
html[data-skin="editorial"] body.homepage {
  background: #f7f5f0 !important;
  background-image: none !important;
}

/* ── NAVBAR — sólido, sin blur, sin sombra flotante ─────────────────────── */
html[data-skin="editorial"] .site-navbar {
  background: #1f2a30 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ── HERO / MAPA ─────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .homepage__cover {
  background: #f7f5f0 !important;
  background-image: none !important;
}

html[data-skin="editorial"] .homepage__cover__header h1 {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  color: #1c1c1a !important;
  text-shadow: none !important;
}

/* ── EYEBROW (kicker inyectado por JS) ───────────────────────────────────── */
html[data-skin="editorial"] .gl-eyebrow {
  font-family: var(--po-font-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: color-mix(in srgb, var(--po-color-text) 60%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

html[data-skin="editorial"] .gl-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 26px !important;
  height: 2px !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
}

/* ── TÍTULO DE SECCIÓN "Media profiles" ──────────────────────────────────── */
html[data-skin="editorial"] .h3-title {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem) !important;
  line-height: 1.05 !important;
  color: #1c1c1a !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* ── FILTROS ─────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .search__box {
  background: #fbf9f5 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e5e0d7 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html[data-skin="editorial"] .search-form {
  background: transparent !important;
}

html[data-skin="editorial"] .form-control,
html[data-skin="editorial"] select.filter {
  background: #ffffff !important;
  border: 1px solid #ccc8c0 !important;
  border-radius: 3px !important;
  color: #1c1c1a !important;
  box-shadow: none !important;
}

html[data-skin="editorial"] .form-control:focus,
html[data-skin="editorial"] select.filter:focus {
  border-color: var(--po-color-primary) !important;
  outline: 2px solid color-mix(in srgb, var(--po-color-primary) 30%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* ── BOTONES ─────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .btn-blue,
html[data-skin="editorial"] #apply-filters,
html[data-skin="editorial"] .btn-advaned-filters {
  background: var(--po-color-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--po-color-primary) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

html[data-skin="editorial"] .btn-blue:hover,
html[data-skin="editorial"] #apply-filters:hover,
html[data-skin="editorial"] .btn-advaned-filters:hover {
  background: color-mix(in srgb, var(--po-color-primary) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--po-color-primary) 85%, #000) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── CARDS — separación por aire y línea, no sombra ─────────────────────── */
html[data-skin="editorial"] .homepage__main__results .card {
  background: #ffffff !important;
  border: 1px solid #e5e0d7 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color 0.15s ease !important;
}

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

html[data-skin="editorial"] .card__image {
  background: #ede9e2 !important;
  background-image: none !important;
}

html[data-skin="editorial"] .card__title {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  color: #1c1c1a !important;
}

html[data-skin="editorial"] .card__title a,
html[data-skin="editorial"] .card a {
  color: #1c1c1a !important;
  text-decoration: none !important;
}

html[data-skin="editorial"] .card__title a:hover,
html[data-skin="editorial"] .card a:hover {
  color: var(--po-color-primary) !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .homepage__main__sidebar {
  background: #ffffff !important;
  border: 1px solid #e5e0d7 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-skin="editorial"] .sidebar__header,
html[data-skin="editorial"] .sidebar__header h3 {
  background: var(--po-color-primary) !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

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

html[data-skin="editorial"] .label {
  color: color-mix(in srgb, var(--po-color-text) 70%, transparent) !important;
}

/* ── FOOTER — sólido, sin blur ───────────────────────────────────────────── */
html[data-skin="editorial"] .site-footer {
  background: var(--po-color-primary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-top: none !important;
}

/* ── ACCENT ÚNICO — links sueltos ────────────────────────────────────────── */
html[data-skin="editorial"] a {
  color: var(--po-color-primary) !important;
}

html[data-skin="editorial"] a:hover {
  color: color-mix(in srgb, var(--po-color-primary) 80%, #000) !important;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="editorial"] *,
  html[data-skin="editorial"] *::before,
  html[data-skin="editorial"] *::after {
    transition: none !important;
    animation: none !important;
  }
}