/* ============================================================================
   skin-common-fixes.css — correcciones cross-skin (dev, 2026-08-01, post review Fable)
   Carga DESPUÉS de los 4 skins → cierra los restos que cada skin no cubría porque
   viven en selectores compartidos (chips `stat__colors`, hero card `.im-hero`,
   labels de metadata, costura del cover) + accents AA-safe para editorial/datacraft.
   Reversible: quitar el <link> de base.html.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. COSTURA DEL COVER (Fable A4): el bg del cover matchea el del body por skin
   → aunque el mapa desborde, el área muestra el mismo color (sin franja).
   Dark ya tiene cover oscuro propio; no se toca acá.
--------------------------------------------------------------------------- */
html[data-skin="editorial"] .homepage__cover{ background:#f7f5f0 !important; }
html[data-skin="datacraft"] .homepage__cover{ background:#fbfbfa !important; }
html[data-skin="humanist"]  .homepage__cover{ background:#faf6f1 !important; }

/* ---------------------------------------------------------------------------
   2. HERO CARD `.im-hero` (Fable A5): es una card glass inyectada por immersive.js.
   Cada skin no-glass la re-viste para no dejar un vidrio fuera de tono.
--------------------------------------------------------------------------- */
html[data-skin="editorial"] .im-hero{ background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid #e5e0d7 !important; border-radius:4px !important; }
html[data-skin="editorial"] .im-hero h2{ font-family:Georgia,'Iowan Old Style','Times New Roman',serif; color:#1c1c1a; }
html[data-skin="editorial"] .im-hero .k{ color:color-mix(in srgb, var(--po-color-primary) 50%, #0a1622); }

html[data-skin="datacraft"] .im-hero{ background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid #16181d !important; border-radius:2px !important; }
html[data-skin="datacraft"] .im-hero h2{ color:#16181d; letter-spacing:-.01em; }
html[data-skin="datacraft"] .im-hero .k{ font-family:var(--po-font-mono); color:color-mix(in srgb, var(--po-color-primary) 45%, #0a0f14); }

html[data-skin="humanist"] .im-hero{ background:#fffdfa !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid #eaded1 !important; border-radius:16px !important; }
html[data-skin="humanist"] .im-hero h2{ color:#2a211b; }
html[data-skin="humanist"] .im-hero .k{ color:#B5562C; }

html[data-skin="dark"] .im-hero{ background:#12252f !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:14px !important; }
html[data-skin="dark"] .im-hero h2{ color:#e8eef2 !important; }
html[data-skin="dark"] .im-hero p{ color:#9fb0bc !important; }
html[data-skin="dark"] .im-hero .k{ color:#37C2F3 !important; }
html[data-skin="dark"] .im-hero .close{ background:#0f2029 !important; color:#9fb0bc !important; border-color:rgba(255,255,255,.12) !important; }

/* ---------------------------------------------------------------------------
   3. CHIPS de contenido (Fable M1): clase real = `stat__colors*` (immersive los
   aplana a un chip frío). Cada skin les da su tono.
--------------------------------------------------------------------------- */
html[data-skin="editorial"] [class*="stat__colors"]{ background:#f0ece6 !important; color:#3a342c !important; border:1px solid #e0d8cc !important; border-radius:3px !important; }
html[data-skin="datacraft"] [class*="stat__colors"]{ background:#fff !important; color:#16181d !important; border:1px solid #16181d !important; border-radius:2px !important; font-family:var(--po-font-mono) !important; font-size:.72rem !important; }
html[data-skin="humanist"]  [class*="stat__colors"]{ background:#f4e9de !important; color:#5a3a26 !important; border:1px solid #e7d3c2 !important; border-radius:9999px !important; }
html[data-skin="dark"]      [class*="stat__colors"]{ background:rgba(55,194,243,.10) !important; color:#cfe6f0 !important; border:1px solid rgba(55,194,243,.28) !important; border-radius:6px !important; }

/* ---------------------------------------------------------------------------
   4. METADATA dentro de cards (Fable M2): labels/valores celestes heredados.
   `.stat__label` (celeste base) + `.stat__value`.
--------------------------------------------------------------------------- */
html[data-skin="editorial"] .card .stat__label{ color:#6b6357 !important; }
html[data-skin="humanist"]  .card .stat__label{ color:#8a6a52 !important; }
html[data-skin="datacraft"] .card .stat__label{ color:#5a626c !important; font-family:var(--po-font-mono) !important; }
html[data-skin="dark"]      .card .stat__label{ color:#9fb0bc !important; }
html[data-skin="dark"]      .card .stat__value,
html[data-skin="dark"]      .card{ color:#cdd8e0 !important; }
html[data-skin="dark"]      .card a{ color:#e8eef2 !important; }

/* ---------------------------------------------------------------------------
   5. ACCENTS AA-SAFE (Fable A1/A2/A3) para editorial y datacraft. Siguen la
   PALETA (hue del token) pero oscurecidos → pasan WCAG AA sobre fondo claro.
--------------------------------------------------------------------------- */
html[data-skin="editorial"]{ --sk-a: color-mix(in srgb, var(--po-color-primary) 50%, #0a1622); }
html[data-skin="datacraft"]{ --sk-a: color-mix(in srgb, var(--po-color-primary) 45%, #0a0f14); }

/* Editorial: eyebrow, links, sidebar header (texto blanco), botones, footer, focus */
html[data-skin="editorial"] .gl-eyebrow{ color:var(--sk-a) !important; }
html[data-skin="editorial"] .sidebar__header{ background:var(--sk-a) !important; }
html[data-skin="editorial"] .btn-blue, html[data-skin="editorial"] #apply-filters, html[data-skin="editorial"] .btn-advaned-filters{ background:var(--sk-a) !important; border-color:var(--sk-a) !important; color:#fff !important; }
html[data-skin="editorial"] .site-footer{ background:var(--sk-a) !important; }
html[data-skin="editorial"] .site-footer a, html[data-skin="editorial"] .footer-list a, html[data-skin="editorial"] .footer-headline{ color:#fff !important; }   /* Fable A1: links del footer visibles */
html[data-skin="editorial"] .number{ color:var(--sk-a) !important; }

/* Data-craft: eyebrow + números + header (Fable A3) */
html[data-skin="datacraft"] .gl-eyebrow{ color:var(--sk-a) !important; }
html[data-skin="datacraft"] .number{ color:var(--sk-a) !important; }
html[data-skin="datacraft"] .sidebar__header{ background:var(--sk-a) !important; }
html[data-skin="datacraft"] .site-footer a, html[data-skin="datacraft"] .footer-list a{ color:#fff !important; }

/* Fallback si no hay color-mix: accent teal fijo AA-safe */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  html[data-skin="editorial"]{ --sk-a:#0A5876; }
  html[data-skin="datacraft"]{ --sk-a:#0A5876; }
}