/* Champions Style · base compartida
   Tema: oscuro por defecto, claro con el sistema o con el botón (guarda la elección en el navegador). */
:root {
  --ink: #0a0a0b;
  --carbon: #111113;
  --graphite: #1a1a1d;
  --steel: #232327;
  --line: #2b2b30;
  --line-2: #4a4a52;
  --text: #f3f3f1;
  --text-2: #c9c9cf;
  --mute: #a3a3ac;
  --dim: #5b5b63;
  --red: #e8171c;
  --red-d: #b80f13;
  --red-h: #ff2429;
  --red-t: #ff8083;
  --red-b: #5a1214;
  --on-red: #ffffff;
  --gold: #ffc83d;
  --ok: #35c46b;
  --ok-b: #1d5a37;
  --warn: #ffb020;
  --warn-b: #5e4510;
  --bad: #ff7b7e;
  --bad-b: #5a1a1c;
  --nav-bg: rgba(10, 10, 11, .84);
  --veil: rgba(0, 0, 0, .72);
  --art-hi: #2a2a30;
  --art-line: rgba(255, 255, 255, .22);
  --row-hover: #151518;
  --login-glow: #2a0a0c;
  --streak: 236, 238, 240;
  --f-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f5f5f3; --carbon: #ffffff; --graphite: #ececea; --steel: #dededa; --line: #dadad5; --line-2: #b2b2ac;
    --text: #101012; --text-2: #3b3b42; --mute: #5f5f68; --dim: #9a9aa2;
    --red: #d90f15; --red-d: #b00c11; --red-h: #f01a20; --red-t: #c4161b; --red-b: #f0b0b2;
    --gold: #b27800; --ok: #168a46; --ok-b: #9bd3b3; --warn: #a85f00; --warn-b: #e5c48a; --bad: #c4161b; --bad-b: #eab0b2;
    --nav-bg: rgba(245, 245, 243, .86); --veil: rgba(16, 16, 18, .55); --art-hi: #efefeb; --art-line: rgba(0, 0, 0, .3);
    --row-hover: #f0f0ed; --login-glow: #f9d9da; --streak: 16, 16, 18;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink: #f5f5f3; --carbon: #ffffff; --graphite: #ececea; --steel: #dededa; --line: #dadad5; --line-2: #b2b2ac;
  --text: #101012; --text-2: #3b3b42; --mute: #5f5f68; --dim: #9a9aa2;
  --red: #d90f15; --red-d: #b00c11; --red-h: #f01a20; --red-t: #c4161b; --red-b: #f0b0b2;
  --gold: #b27800; --ok: #168a46; --ok-b: #9bd3b3; --warn: #a85f00; --warn-b: #e5c48a; --bad: #c4161b; --bad-b: #eab0b2;
  --nav-bg: rgba(245, 245, 243, .86); --veil: rgba(16, 16, 18, .55); --art-hi: #efefeb; --art-line: rgba(0, 0, 0, .3);
  --row-hover: #f0f0ed; --login-glow: #f9d9da; --streak: 16, 16, 18;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.6 var(--f-body);
  letter-spacing: -.005em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}
img, svg, canvas { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.mono { font-family: var(--f-mono); letter-spacing: .02em; }
.disp { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: .005em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 46px; padding: 0 1.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--graphite); color: var(--text);
  font-weight: 600; letter-spacing: 0; text-decoration: none;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { border-color: var(--line-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.red { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn.red:hover { background: var(--red-h); border-color: var(--red-h); box-shadow: 0 8px 28px -8px var(--red); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 38px; padding: 0 1rem; font-size: .92rem; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); transition: background .2s, border-color .2s; }
.icon-btn:hover { background: var(--graphite); border-color: var(--line-2); }
.icon-btn svg { width: 19px; height: 19px; }
[data-theme-toggle] .i-moon { display: none; }
[data-theme-toggle][data-mode="light"] .i-sun { display: none; }
[data-theme-toggle][data-mode="light"] .i-moon { display: block; }

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text);
  font-weight: 500; font-size: .95rem; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--line-2); }
.chip.on { background: var(--text); border-color: var(--text); color: var(--ink); }
.chip[disabled] { opacity: .35; text-decoration: line-through; pointer-events: none; }
.chip .ct { font-family: var(--f-mono); font-size: .74rem; opacity: .6; }

.field { display: grid; gap: .4rem; min-width: 0; }
.field > span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.inp {
  width: 100%; min-height: 46px; padding: 0 .95rem;
  background: var(--carbon); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text);
  transition: border-color .2s, background .2s;
}
textarea.inp { padding: .7rem .95rem; min-height: 90px; resize: vertical; }
.inp:focus { border-color: var(--text); outline: none; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}