/* ============================================================================
   KAIRO · Design tokens
   ----------------------------------------------------------------------------
   ANGULAR 21 → copiar tal cual a `src/styles/_tokens.css` e importarlo en
   `styles.css` (global, NO dentro de un componente: los tokens tienen que
   vivir en :root para que los componentes standalone los hereden).
   Regla del sistema: ningún color hex/oklch crudo fuera de este archivo.
   ============================================================================ */

:root {
  /* --- superficies: paleta fría, sin beige/crema/dorado -------------------- */
  --bg: #060c20;
  --bg: oklch(16% 0.045 268);
  --bg-deep: #01020f;
  --bg-deep: oklch(10% 0.036 268);
  --surface: #131c33;
  --surface: oklch(23% 0.048 268);
  --surface-2: #222a44;
  --surface-2: oklch(29% 0.050 270);
  --surface-3: #313955;
  --surface-3: oklch(35% 0.050 272);
  --fg: #f2f5fb;
  --fg: oklch(97% 0.008 260);
  --muted: #9fa8ba;
  --muted: oklch(73% 0.028 265);
  --border: #3b445e;
  --border: oklch(39% 0.045 270);
  --border-soft: #262d42;
  --border-soft: oklch(30% 0.040 270);

  /* --- acción -------------------------------------------------------------- */
  --accent: #00d7ea;
  --accent: oklch(80% 0.145 205);   /* cian eléctrico: color primario     */
  --accent-hi: #64eff7;
  --accent-hi: oklch(88% 0.120 200);
  --accent-ink: #001428;
  --accent-ink: oklch(18% 0.060 235);   /* texto sobre cian                   */
  --accent-2: #a1ea5a;
  --accent-2: oklch(86% 0.190 132);   /* lima: acento secundario / premio   */

  /* --- la hoja del álbum ---------------------------------------------------
     Referencia: página de álbum impreso. Fondo de página saturado, slots casi
     blancos, tinta oscura. Azul, no crema: mantiene la piel fría del producto. */
  --sheet: #016abe;
  --sheet: oklch(52% 0.155 252);
  --sheet-2: #0051a2;
  --sheet-2: oklch(44% 0.150 254);
  --sheet-ink: #f4f9ff;
  --sheet-ink: oklch(98% 0.010 250);
  --slot: #f2f5f9;
  --slot: oklch(97% 0.006 250);
  --slot-2: #e0e5eb;
  --slot-2: oklch(92% 0.010 250);
  --slot-line: #ccd5e0;
  --slot-line: oklch(87% 0.018 250);
  --ink: #182437;
  --ink: oklch(26% 0.040 258);
  --ink-soft: #5e6a7b;
  --ink-soft: oklch(52% 0.030 258);

  /* --- los tres metales ------------------------------------------------------
     La rareza de una lámina se lee como MONEDA: bronce, plata y oro. Es lo único
     cálido de la paleta y está bien que lo sea — son metales, y el oro ya vivía
     en el álbum desde que entraron los trofeos. La regla de «paleta fría» habla
     del CHROME (fondos, paneles, acentos), no de los objetos que la app muestra.

     Cada metal viene en tres: el `--…` para el trazo y el relleno de la moneda,
     el `--…-luz` para el brillo que la hace parecer metal y no un círculo de
     color, y el `--…-sombra` para el canto. Sin los tres, una moneda de oro es
     un círculo amarillo.

     No se dan vuelta con el tema: una medalla de bronce es de bronce de día y
     de noche, igual que el papel de la hoja y el cartón de la vitrina.

     El `-luz` del bronce está corrido dos veces sobre el píxel medido, y las dos
     correcciones son del papel azul de la hoja, no del metal:

       · **de 76% a 83% de luz**, porque el papel está en ~53% y el bronce a su
         tono base cae justo encima: el punteado del hueco daba **1,09:1** y no
         se veía. El oro sí se veía, y eso hacía parecer que sólo las
         legendarias tenían borde. Ahora da 2,35:1.
       · **de tono 68 a 46**, porque al aclararlo se acercó al oro: quedaban a
         **16° uno del otro** —el mismo color para un chico de seis—. Corrido al
         cobre son 26° y el píxel promedio de cada moneda sale (180,111,79)
         contra (196,165,68).

     EL ORO SE ACLARÓ HASTA SER AMARILLO. Estaba en oklch(72% .135 88) y en
     pantalla daba rgb(196,165,68): una mostaza. No hace falta que sea el color
     del metal —lo que tiene que pasar es que se LEA como oro—, así que subió a
     80% de luz y .165 de croma: rgb(217,185,49), un amarillo. De paso se
     separó más del cobre (26° → **30°** de tono) y el punteado del hueco subió
     de 3,15 a 3,57:1.

     Las tres se miden con `scripts/verificar-rarezas.mjs`. */
  --metal-bronce: #aa5830;
  --metal-bronce: oklch(55% 0.120 45);
  --metal-bronce-luz: #feb390;
  --metal-bronce-luz: oklch(83% 0.100 46);
  --metal-bronce-sombra: #643318;
  --metal-bronce-sombra: oklch(38% 0.080 48);
  --metal-plata: #999fa6;
  --metal-plata: oklch(70% 0.012 250);
  --metal-plata-luz: #dadee3;
  --metal-plata-luz: oklch(90% 0.008 250);
  --metal-plata-sombra: #5e646b;
  --metal-plata-sombra: oklch(50% 0.014 255);
  --metal-oro: #e8bb1f;
  --metal-oro: oklch(80% 0.165 92);
  --metal-oro-luz: #ffe98a;
  --metal-oro-luz: oklch(92% 0.145 98);
  --metal-oro-sombra: #97690a;
  --metal-oro-sombra: oklch(56% 0.125 82);

  /* --- rarezas ------------------------------------------------------------- */
  --r-common: #8b939f;
  --r-common: oklch(66% 0.020 260);
  --r-rare: #00cfe8;
  --r-rare: oklch(78% 0.140 210);
  --r-epic: #a671f3;
  --r-epic: oklch(66% 0.190 300);
  --r-legend-a: #00e9e0;
  --r-legend-a: oklch(84% 0.150 190);
  --r-legend-b: #d36dea;
  --r-legend-b: oklch(70% 0.200 320);
  --r-legend-c: #afee65;
  --r-legend-c: oklch(88% 0.180 130);

  /* --- estado -------------------------------------------------------------- */
  --ok: #75d87a;
  --ok: oklch(80% 0.160 145);
  --warn: #f4c947;
  --warn: oklch(85% 0.150 90);
  --danger: #f4595e;
  --danger: oklch(67% 0.190 22);

  /* --- tipografía (sin Google Fonts: stacks del sistema) ------------------- */
  --font-display: ui-rounded, 'SF Pro Rounded', 'Baloo 2', 'Nunito', 'Poppins',
                  'Segoe UI Variable', system-ui, sans-serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(0.94rem, 0.91rem + 0.18vw, 1.02rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.40vw, 2.60rem);
  --step-4:  clamp(2.10rem, 1.55rem + 2.75vw, 3.80rem);

  /* --- forma --------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --shadow-1: 0 1px 2px oklch(8% 0.04 268 / .5), 0 4px 14px oklch(8% 0.04 268 / .35);
  --shadow-2: 0 8px 30px oklch(8% 0.04 268 / .55);
  --shadow-glow: 0 0 0 1px oklch(80% 0.145 205 / .35), 0 0 28px oklch(80% 0.145 205 / .28);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* --- el chrome, como tokens ----------------------------------------------
     La barra, el rail, el fondo del panel y el velo del modal estaban escritos
     con oklch crudo adentro de components.css. Mientras hubo un solo tema eso
     era sólo una regla rota; con dos temas es un bug: son exactamente las
     cuatro superficies que tienen que darse vuelta. */
  --bg-blur: rgba(6, 12, 32, 0.78);
  --bg-blur: oklch(16% 0.045 268 / .78);   /* barra superior, translúcida */
  --rail-bg: rgba(3, 7, 24, 0.92);
  --rail-bg: oklch(13% 0.042 268 / .92);   /* rail y tab bar              */
  --panel-2: #0f172d;
  --panel-2: oklch(21% 0.046 268);         /* fondo bajo del panel        */
  --scrim: rgba(1, 1, 8, 0.78);
  --scrim: oklch(8% 0.03 268 / .78);     /* velo detrás del modal       */

  /* Tinta de los chips que SIEMPRE son papel claro — el avatar de un jugador es
     un pastel al 78% de luminancia en los dos temas. Por eso este token es el
     único que NO se redefine abajo: darlo vuelta con el tema es justo el bug
     que arregla. */
  --chip-ink: #0d1a32;
  --chip-ink: oklch(22% 0.050 262);

  --appbar-h: 62px;          /* alto de la barra superior          */
  --nav-h: 68px;             /* alto de la tab bar en móvil        */
  --rail-w: 236px;           /* rail expandido en desktop          */
  --rail-w-collapsed: 76px;  /* rail contraído: sólo iconos        */
  --maxw: 1240px;
}

/* ── Tema claro ───────────────────────────────────────────────────────────────
   SE DA VUELTA EL CHROME, NO EL ÁLBUM. La hoja, los huecos y las figuritas son
   papel impreso: un álbum de kiosco no cambia de color porque afuera sea de
   día. Lo que se invierte es lo que rodea al álbum —fondo, barra, rail,
   paneles, modales, texto—, que es la parte que de verdad molesta a las 3 de la
   tarde contra una ventana. Por eso acá no aparecen `--sheet`, `--slot`,
   `--ink` ni las rarezas: son los mismos tokens en los dos temas, y esa
   ausencia es la decisión de diseño.

   EL ACENTO SÍ CAMBIA, y no por gusto: el cian a 80% de luz es perfecto sobre
   índigo y es ilegible sobre blanco (2,1:1). En claro baja a 52% —mismo tono,
   otra luz— y pasa a 6:1 como texto y a 8:1 como botón con tinta blanca.

   Lo escribe `js/tema.js` en <html data-tema>, antes del primer pintado. */
[data-tema="claro"] {
  --bg: #f0f4f7;
  --bg: oklch(96.5% 0.006 250);
  --bg-deep: #fafcfe;
  --bg-deep: oklch(99% 0.003 250);
  --surface: #ffffff;
  --surface: oklch(100% 0 0);
  --surface-2: #f4f7fa;
  --surface-2: oklch(97.5% 0.005 250);
  --surface-3: #e6ecf2;
  --surface-3: oklch(94% 0.010 252);
  --fg: #1b2435;
  --fg: oklch(26% 0.035 262);
  --muted: #535b69;
  --muted: oklch(47% 0.025 262);
  --border: #cfd5dc;
  --border: oklch(87% 0.012 255);
  --border-soft: #e1e5ea;
  --border-soft: oklch(92% 0.008 255);

  --accent: #0070b3;

  --accent: oklch(52% 0.145 240);
  --accent-hi: #005b9f;
  --accent-hi: oklch(45% 0.150 240);
  --accent-ink: #fafcfe;
  --accent-ink: oklch(99% 0.004 250);
  --accent-2: #007324;
  --accent-2: oklch(48% 0.150 148);

  --bg-blur: rgba(255, 255, 255, 0.82);

  --bg-blur: oklch(100% 0 0 / .82);
  --rail-bg: rgba(250, 252, 254, 0.94);
  --rail-bg: oklch(99% 0.003 250 / .94);
  --panel-2: #f2f5f9;
  --panel-2: oklch(97% 0.006 252);
  --scrim: rgba(38, 45, 62, 0.42);
  --scrim: oklch(30% 0.03 262 / .42);

  /* En claro la sombra no puede ser negro al 55%: sobre papel eso es un manchón.
     Misma forma, tinta azulada y mucha menos opacidad. */
  --shadow-1: 0 1px 2px oklch(30% 0.03 262 / .10), 0 4px 14px oklch(30% 0.03 262 / .10);
  --shadow-2: 0 8px 30px oklch(30% 0.03 262 / .16);
  --shadow-glow: 0 0 0 1px oklch(52% 0.145 240 / .30), 0 0 24px oklch(52% 0.145 240 / .18);
}

/* El estado del menú vive en <html> para que el ancho del rail esté resuelto
   antes del primer pintado (sin salto de layout). Lo escribe Kairo.initNavState(). */
html[data-nav-state="collapsed"] { --rail-w: var(--rail-w-collapsed); }

/* --- reset mínimo ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` gana siempre. El estilo del navegador es `display:none` con
   especificidad cero, así que cualquier `.clase { display:flex }` lo pisa y el
   elemento queda visible aunque el JS le haya puesto `hidden`. Nos pasó con la
   barra de pendientes y con el paginador del álbum. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 620px at 78% -8%,  oklch(34% 0.09 258 / .55), transparent 62%),
    radial-gradient(900px 540px at 6% 104%,   oklch(31% 0.10 300 / .40), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  text-wrap: pretty;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* scrollbar fría */
* { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }

/* --- utilidades ------------------------------------------------------------ */
.sr-only {
  position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.stack { display: grid; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.hide-mobile { display: none; }
@media (min-width: 960px) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }

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