/* =========================================================
   Modo oscuro automatico: se activa solo cuando el movil u
   ordenador esta en modo oscuro (prefers-color-scheme).
   Se carga la ultima para poder sobrescribir al resto.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --page: #080d16;
    --shell: #0f1623;
    --surface: #151e2e;
    --ink: #e9eef6;
    --ink-2: #c6cfdc;
    --muted: #9aa5b7;
    --muted-2: #8792a5;
    --line: #2a3549;
    --line-soft: #1e2839;
    --head: #1a2436;
    --navy: #2c4373;

    --gold-ink: #e8b84a;
    --gold-bg: linear-gradient(135deg, #261f12 0%, #362a10 100%);
    --gold-line: #6b5317;
    --gold-row: #2a2314;

    --silver-ink: #b7c0cd;
    --silver-bg: linear-gradient(135deg, #182131 0%, #222c3d 100%);
    --silver-line: #3a4558;
    --silver-row: #1f2939;

    --bronze-ink: #e48d5c;
    --bronze-bg: linear-gradient(135deg, #271912 0%, #362217 100%);
    --bronze-line: #6e3f26;
    --bronze-row: #2c1d16;

    --c-int: #6d8ff0;
    --c-loc: #3cbfae;
    --c-kls: #8fa3c7;
  }

  /* ---------- Estructura ---------- */
  .shell { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 70px -20px rgba(0, 0, 0, .6); }
  .topbar { background: rgba(15, 22, 35, .9); }
  .logo { color: #a9b4c6; }
  .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }

  /* ---------- Cabecera con foto ---------- */
  .hero__media img { filter: saturate(.4) brightness(.6) contrast(.95); }
  .hero__media::after { background: linear-gradient(180deg, rgba(15, 22, 35, .45), rgba(15, 22, 35, .25)); }
  .eyebrow { color: var(--muted); }
  .hero__title { color: var(--ink); }
  .hero__tagline { color: var(--muted); }
  .hero__tagline::after { background: var(--line); }

  .pts-open { background: rgba(21, 30, 46, .85); border-color: rgba(255, 255, 255, .12); }
  .pts-open:hover { background: var(--surface); }

  /* ---------- Podio y tabla ---------- */
  .pod__head, .pod__stat + .pod__stat { border-color: rgba(255, 255, 255, .08); }
  .pod .avatar { border-color: var(--surface); }
  .pod--2 .pod__score strong { color: var(--silver-ink); }

  .search:focus-within { border-color: #3d4a61; box-shadow: 0 0 0 4px rgba(255, 255, 255, .05); }
  .select select:hover, .chip:hover { border-color: #3d4a61; }
  .select select:focus-visible { border-color: #4a5870; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
  .more:hover { border-color: #3d4a61; }

  .ranking tbody tr:hover td { background: #1b2537; }
  .ranking td.is-zero { color: #4d586b; }
  .ranking tr.top-3 td.c-rank { color: var(--bronze-ink); }
  .ranking tbody tr:hover td.c-player,
  .ph__rk.ph__tlist li[data-tid]:hover strong,
  .ph__rk.th__players li:hover strong,
  .ncard.is-link:hover .ncard__title { text-decoration-color: #4d586b; }

  /* ---------- Ficha de jugador / equipo (popup) ---------- */
  .ph::backdrop { background: rgba(0, 0, 0, .6); }
  .ph__inner { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
  .ph__close { background: rgba(21, 30, 46, .9); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5); }
  .ph__close:hover { background: var(--surface); }
  .ph__hero { border-bottom-color: rgba(255, 255, 255, .07); }
  .ph__bg img { filter: saturate(.4) brightness(.6) contrast(.95); }
  .ph__avatar { border-color: var(--surface); }
  .ph__rank-chip { border-color: var(--shell); }
  .ph__rankbox { background: rgba(21, 30, 46, .8); border-color: rgba(255, 255, 255, .08); }
  .ph__name { color: var(--ink); }
  .ph--silver { --medal-ink: var(--silver-ink); }
  .ph--none { --medal-ink: var(--ink); --hero-bg: linear-gradient(135deg, #151e2e 0%, #1c2638 100%); --medal-row: #1d2738; }
  .ph__t-main em { color: var(--gold-ink); }
  .ph__t-pos.is-silver, .th__rank.is-silver { color: var(--silver-ink); }
  .ph__rk.ph__tlist li.is-off .ph__t-pts { color: #4d586b; }

  /* ---------- Torneos ---------- */
  .tbadge--international { --b-bg: #1c2a4d; --b-ink: #9db6ff; }
  .tbadge--special       { --b-bg: #3a2218; --b-ink: #f2a57c; }
  .tbadge--national      { --b-bg: #352a10; --b-ink: #f0c662; }
  .tbadge--local         { --b-bg: #12322e; --b-ink: #6fd4c4; }
  .tdetail__name { color: var(--ink); }
  .tdetail__pending { background: #2a2312; border-color: #6b5317; color: #f0d48c; }
  .titem--upcoming, .tupcoming { border-color: var(--line); }

  /* ---------- Equipos ---------- */
  .crest, .th__av { border-color: var(--surface); }
  .tcard__best { border-top-color: rgba(255, 255, 255, .07); }
  .ph__team-link { text-decoration-color: rgba(255, 255, 255, .25); }

  /* ---------- Noticias ---------- */
  .ncard__tag { background: rgba(21, 30, 46, .92); }
  .npod__row--1 .npod__pos { color: var(--gold-ink); }
  .npod__row--3 .npod__pos { color: var(--bronze-ink); }

  /* ---------- Organize ---------- */
  .org-points tbody tr:first-child td { color: var(--gold-ink); }

  /* Texto oscuro sobre botones dorados: --navy se aclara en modo oscuro, aqui se fija */
  .ncard--result .ncard__tag,
  .org-cta,
  .tbracket__go { color: #13213b; }

  /* Sombras de tarjetas: en fondo oscuro, negras en vez de azuladas */
  .table-card, .tlist-card, .teams-head, .org-card, .ncard {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -26px rgba(0, 0, 0, .7);
  }
  .tcard { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -24px rgba(0, 0, 0, .7); }
}