/* =====================================================================
   SKINS COMPARTIDAS — toda la apariencia sale de estas variables.
   Crear una skin nueva:
     1. Copia un bloque :root[data-skin="…"] y cambia nombre y colores.
     2. Añádela a core/theme/skins.js (nombre, categoría y 3 colores de muestra).
   "clasico" usa los colores propios de cada app y sigue el modo claro/oscuro del sistema.
   Variables: --bg --surface --surface-2 --text --muted --line --grid --accent --on-accent
              --c1 --c2 (series A/B) --p1 --px --p2 (1·X·2) --good --good-bg --good-grad
              --hot --hot-bg --hot-grad --up --bad --shadow [--font] [--radius]
   ===================================================================== */

/* ---------- Valores comunes por defecto ---------- */
:root {
  --on-accent: #fff; --on-good: #fff;
  --c1: #0a84ff; --c2: #ff7a1a;
  --p1: #1f8f5c; --px: #8e8e98; --p2: #d9662b;
  --good: #17a05d; --good-bg: #eaf8f0; --good-grad: linear-gradient(90deg, #17a05d, #3ccf86);
  --hot: #ff5a1f; --hot-bg: #fff1ea; --hot-grad: linear-gradient(135deg, #ff8a1f, #ff4a1f);
  --up: #17a05d; --bad: #d64545;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-skin]), :root[data-skin="clasico"]:not([data-theme="light"]) {
    --good-bg: #0f2a1c; --hot-bg: #3a1a0e; --shadow: none;
  }
}

/* ========================= BÁSICAS ========================= */
:root[data-skin="noche"] {
  color-scheme: dark; --on-good: #111;
  --bg: #0b1220; --surface: #121b2e; --surface-2: #1b2640; --text: #e8eefc; --muted: #8b98b8; --line: #24304d; --grid: #22304a;
  --accent: #38d4ff; --on-accent: #06202b; --c1: #38d4ff; --c2: #ffb547; --p1: #38d4ff; --px: #5b6a8c; --p2: #ffb547;
  --good: #2ee6a6; --good-bg: #0e2a2a; --good-grad: linear-gradient(90deg, #12b886, #2ee6a6);
  --hot: #ff6b6b; --hot-bg: #2e1720; --hot-grad: linear-gradient(135deg, #ff9f43, #ff6b6b); --up: #2ee6a6; --shadow: none;
}
:root[data-skin="neon"] {
  color-scheme: dark; --on-good: #111;
  --bg: #050507; --surface: #111116; --surface-2: #1c1c24; --text: #fafaff; --muted: #9a9ab0; --line: #2a2a36; --grid: #24242e;
  --accent: #d4ff3a; --on-accent: #111; --c1: #ff3ad4; --c2: #3ad4ff; --p1: #d4ff3a; --px: #555566; --p2: #ff3ad4;
  --good: #d4ff3a; --good-bg: #20260a; --good-grad: linear-gradient(90deg, #8cff3a, #d4ff3a);
  --hot: #ff3ad4; --hot-bg: #2a0c24; --hot-grad: linear-gradient(135deg, #ff3a7a, #ff3ad4); --up: #d4ff3a; --shadow: 0 0 0 1px #2a2a36;
}
:root[data-skin="papel"] {
  color-scheme: light;
  --bg: #f4efe6; --surface: #fffdf8; --surface-2: #efe8db; --text: #2b2620; --muted: #7d7365; --line: #e2d9c8; --grid: #e6dfd1;
  --accent: #b5462b; --c1: #2f5d8a; --c2: #b5462b; --p1: #2f5d8a; --px: #a39a8a; --p2: #b5462b;
  --good: #3f7d4a; --good-bg: #e6efdf; --good-grad: linear-gradient(90deg, #3f7d4a, #6ea86f);
  --hot: #c4471f; --hot-bg: #f7e1d4; --hot-grad: linear-gradient(135deg, #e07a2e, #c4471f); --up: #3f7d4a;
  --shadow: 0 1px 2px rgba(60, 40, 20, .08); --font: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
:root[data-skin="oceano"] {
  color-scheme: dark; --on-good: #111;
  --bg: #04212e; --surface: #082f41; --surface-2: #0d3d54; --text: #e6f7ff; --muted: #86b4c8; --line: #134a63; --grid: #124660;
  --accent: #4fe3d0; --on-accent: #02262b; --c1: #4fe3d0; --c2: #ffd166; --p1: #4fe3d0; --px: #4f7d92; --p2: #ffd166;
  --good: #4fe3d0; --good-bg: #0a3f45; --good-grad: linear-gradient(90deg, #1fb5c9, #4fe3d0);
  --hot: #ff8c61; --hot-bg: #3a2a24; --hot-grad: linear-gradient(135deg, #ffd166, #ff8c61); --up: #4fe3d0; --shadow: none;
}

/* ========================= ESTACIONES ========================= */
:root[data-skin="primavera"] {
  color-scheme: light;
  --bg: #f3faf1; --surface: #ffffff; --surface-2: #eaf5e6; --text: #1f3320; --muted: #6b8a6c; --line: #d6ead2; --grid: #e0efdc;
  --accent: #4caf50; --c1: #4caf50; --c2: #ec6fa6; --p1: #4caf50; --px: #a8bfa6; --p2: #ec6fa6;
  --good: #3fa34d; --good-bg: #e3f4e0; --good-grad: linear-gradient(90deg, #8bd17c, #3fa34d);
  --hot: #ec6fa6; --hot-bg: #fde8f1; --hot-grad: linear-gradient(135deg, #ffb3d1, #ec6fa6); --up: #3fa34d;
}
:root[data-skin="verano"] {
  color-scheme: light;
  --bg: #fff8ec; --surface: #ffffff; --surface-2: #fdeed3; --text: #2d2416; --muted: #8c7a5c; --line: #f3dfb9; --grid: #f6e6c6;
  --accent: #00a6b4; --c1: #00a6b4; --c2: #ff8a00; --p1: #00a6b4; --px: #c9b38e; --p2: #ff8a00;
  --good: #00a6b4; --good-bg: #dff5f5; --good-grad: linear-gradient(90deg, #00c2c7, #008fa3);
  --hot: #ff6a00; --hot-bg: #ffe9d1; --hot-grad: linear-gradient(135deg, #ffc400, #ff6a00); --up: #00968f;
}
:root[data-skin="otono"] {
  color-scheme: dark; --on-good: #111;
  --bg: #23170f; --surface: #2f2016; --surface-2: #3d2a1c; --text: #fbefe2; --muted: #c4a385; --line: #4d3624; --grid: #4a3423;
  --accent: #f29b38; --on-accent: #2a1504; --c1: #f29b38; --c2: #d9534f; --p1: #f2c14e; --px: #7e6650; --p2: #d9534f;
  --good: #c9d45c; --good-bg: #3b3a1c; --good-grad: linear-gradient(90deg, #9fb83c, #e0d65c);
  --hot: #ff6b35; --hot-bg: #4a2214; --hot-grad: linear-gradient(135deg, #f29b38, #d9431f); --up: #e0d65c; --shadow: none;
}
:root[data-skin="invierno"] {
  color-scheme: light;
  --bg: #eef4fa; --surface: #ffffff; --surface-2: #e3edf7; --text: #16263a; --muted: #6a7f98; --line: #d3e1ef; --grid: #dbe6f1;
  --accent: #2e6fd8; --c1: #2e6fd8; --c2: #7a5cff; --p1: #2e6fd8; --px: #a3b4c9; --p2: #7a5cff;
  --good: #1f9bd1; --good-bg: #e0f1fa; --good-grad: linear-gradient(90deg, #7cc8f0, #1f9bd1);
  --hot: #7a5cff; --hot-bg: #ece8ff; --hot-grad: linear-gradient(135deg, #a593ff, #6a45ff); --up: #1f84c4;
}

/* ========================= SUPERHÉROES (genéricos) ========================= */
:root[data-skin="heroe"] {        /* clásico: azul, rojo y oro */
  color-scheme: dark; --on-good: #111;
  --bg: #0c1a3d; --surface: #13265a; --surface-2: #1b3270; --text: #f5f8ff; --muted: #a3b3df; --line: #284184; --grid: #253d7c;
  --accent: #ffcc33; --on-accent: #2a1d00; --c1: #e53935; --c2: #ffcc33; --p1: #e53935; --px: #5b6da3; --p2: #ffcc33;
  --good: #ffcc33; --good-bg: #2a3354; --good-grad: linear-gradient(90deg, #ff9f1a, #ffcc33);
  --hot: #e53935; --hot-bg: #3b1a2e; --hot-grad: linear-gradient(135deg, #ff5f52, #c62828); --up: #ffcc33; --shadow: none;
}
:root[data-skin="sombra"] {       /* vigilante nocturno: negro y amarillo */
  color-scheme: dark; --on-good: #111;
  --bg: #0a0a0c; --surface: #16161a; --surface-2: #222228; --text: #f2f2f2; --muted: #8e8e98; --line: #2c2c33; --grid: #26262c;
  --accent: #ffd400; --on-accent: #111; --c1: #ffd400; --c2: #7f8c9a; --p1: #ffd400; --px: #4a4a52; --p2: #7f8c9a;
  --good: #ffd400; --good-bg: #2a260a; --good-grad: linear-gradient(90deg, #c9a800, #ffd400);
  --hot: #ff7b00; --hot-bg: #2c1a08; --hot-grad: linear-gradient(135deg, #ffd400, #ff7b00); --up: #ffd400; --shadow: none;
}
:root[data-skin="titan"] {        /* fuerza bruta: púrpura y verde */
  color-scheme: dark; --on-good: #111;
  --bg: #1a0f2b; --surface: #26173d; --surface-2: #32204f; --text: #f4ecff; --muted: #b19cd3; --line: #3e2a60; --grid: #3a285a;
  --accent: #6bff6b; --on-accent: #0b2a0b; --c1: #6bff6b; --c2: #c77dff; --p1: #6bff6b; --px: #6c5a8c; --p2: #c77dff;
  --good: #6bff6b; --good-bg: #1f3a24; --good-grad: linear-gradient(90deg, #2ecc71, #6bff6b);
  --hot: #c77dff; --hot-bg: #3a1f55; --hot-grad: linear-gradient(135deg, #e0aaff, #9d4edd); --up: #6bff6b; --shadow: none;
}
:root[data-skin="relampago"] {    /* velocista: rojo y rayo amarillo */
  color-scheme: dark; --on-good: #111;
  --bg: #2a0606; --surface: #3b0b0b; --surface-2: #4d1111; --text: #fff4e6; --muted: #e0a49a; --line: #5e1a1a; --grid: #571717;
  --accent: #ffde21; --on-accent: #2a1d00; --c1: #ffde21; --c2: #ff5b5b; --p1: #ffde21; --px: #8a4a4a; --p2: #ff5b5b;
  --good: #ffde21; --good-bg: #4a3a0c; --good-grad: linear-gradient(90deg, #ffb703, #ffde21);
  --hot: #ff5b5b; --hot-bg: #5a1414; --hot-grad: linear-gradient(135deg, #ffde21, #ff3b3b); --up: #ffde21; --shadow: none;
}

/* ========================= DEPORTES ========================= */
:root[data-skin="cesped"] {
  color-scheme: dark; --on-good: #111;
  --bg: #0d2b1a; --surface: #12391f; --surface-2: #1a4a2a; --text: #f1fff4; --muted: #9cc9a8; --line: #22573a; --grid: #215a37;
  --accent: #ffe14d; --on-accent: #1f2a00; --c1: #ffe14d; --c2: #ffffff; --p1: #ffe14d; --px: #6f9c7c; --p2: #ffffff;
  --good: #7dff9b; --good-bg: #1c5a32; --good-grad: linear-gradient(90deg, #3ddc6b, #b6ff7d);
  --hot: #ff8a3d; --hot-bg: #4a3a12; --hot-grad: linear-gradient(135deg, #ffd23d, #ff8a3d); --up: #b6ff7d; --shadow: none;
}
:root[data-skin="baloncesto"] {
  color-scheme: dark; --on-good: #111;
  --bg: #1c120b; --surface: #2a1a10; --surface-2: #3a2416; --text: #fff3e8; --muted: #c9a283; --line: #4a2f1d; --grid: #452c1b;
  --accent: #ff7a1a; --on-accent: #241000; --c1: #ff7a1a; --c2: #e8c9a0; --p1: #ff7a1a; --px: #7a5a42; --p2: #e8c9a0;
  --good: #ffb35c; --good-bg: #3f2a12; --good-grad: linear-gradient(90deg, #ff7a1a, #ffb35c);
  --hot: #ff4d2e; --hot-bg: #4a1c12; --hot-grad: linear-gradient(135deg, #ff9a3c, #ff4d2e); --up: #ffb35c; --shadow: none;
}
:root[data-skin="tenis"] {
  color-scheme: light;
  --bg: #f6ece4; --surface: #fffaf6; --surface-2: #f1dfd2; --text: #3a2318; --muted: #8f6a58; --line: #ecd3c3; --grid: #efdacd;
  --accent: #c8553d; --c1: #c8553d; --c2: #2e7d32; --p1: #c8553d; --px: #b89a8a; --p2: #2e7d32;
  --good: #8ab800; --good-bg: #eef6d8; --good-grad: linear-gradient(90deg, #c6e83a, #8ab800);
  --hot: #c8553d; --hot-bg: #f8dfd6; --hot-grad: linear-gradient(135deg, #e07a5f, #c8553d); --up: #6d9400;
}
:root[data-skin="formula"] {
  color-scheme: dark; --on-good: #111;
  --bg: #0e0e10; --surface: #1a1a1d; --surface-2: #26262a; --text: #f5f5f5; --muted: #9b9ba3; --line: #303035; --grid: #2a2a2f;
  --accent: #e10600; --c1: #e10600; --c2: #c0c0c0; --p1: #e10600; --px: #55555c; --p2: #c0c0c0;
  --good: #00d26a; --good-bg: #0f2a1c; --good-grad: linear-gradient(90deg, #00a855, #00d26a);
  --hot: #e10600; --hot-bg: #2e0d0c; --hot-grad: linear-gradient(135deg, #ff4d2e, #e10600); --up: #00d26a; --shadow: none;
}
:root[data-skin="golf"] {
  color-scheme: light;
  --bg: #f1f6ef; --surface: #ffffff; --surface-2: #e6efe2; --text: #1d2b1f; --muted: #6c806e; --line: #d5e3d1; --grid: #dde9da;
  --accent: #1e6b3a; --c1: #1e6b3a; --c2: #c9a227; --p1: #1e6b3a; --px: #a6b8a6; --p2: #c9a227;
  --good: #2f8f4e; --good-bg: #e2f1e6; --good-grad: linear-gradient(90deg, #5cb877, #2f8f4e);
  --hot: #c9a227; --hot-bg: #f7efd4; --hot-grad: linear-gradient(135deg, #e5c35c, #b88a12); --up: #2f8f4e;
}

/* ========================= OTRAS ========================= */
:root[data-skin="retro"] {        /* recreativa de los 80 */
  color-scheme: dark; --on-good: #111;
  --bg: #120024; --surface: #1d0638; --surface-2: #2a0b4f; --text: #f8f0ff; --muted: #b394d6; --line: #3b1468; --grid: #36125f;
  --accent: #00f0ff; --on-accent: #001a1c; --c1: #00f0ff; --c2: #ff2bd6; --p1: #00f0ff; --px: #6b4a91; --p2: #ff2bd6;
  --good: #39ff14; --good-bg: #13301a; --good-grad: linear-gradient(90deg, #00f0ff, #39ff14);
  --hot: #ff2bd6; --hot-bg: #3a0a3a; --hot-grad: linear-gradient(135deg, #ffb800, #ff2bd6); --up: #39ff14; --shadow: none;
  --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-skin="bosque"] {
  color-scheme: dark; --on-good: #111;
  --bg: #101a12; --surface: #18261b; --surface-2: #213325; --text: #eef6ec; --muted: #9fb8a1; --line: #2b4130; --grid: #283d2c;
  --accent: #d9a55b; --on-accent: #2a1a05; --c1: #8fc46a; --c2: #d9a55b; --p1: #8fc46a; --px: #5b7560; --p2: #d9a55b;
  --good: #8fc46a; --good-bg: #22361f; --good-grad: linear-gradient(90deg, #5e9c47, #a7d77c);
  --hot: #e0763c; --hot-bg: #3c2516; --hot-grad: linear-gradient(135deg, #e8b25c, #d4602a); --up: #a7d77c; --shadow: none;
}