/* Shared design tokens — Apple Sports claro direction.
   Keeps existing variable names used across docs/app + docs/index so no
   call-site rewrite is needed; values updated to match the design handoff.
   New tokens (accent-soft, tier-*, radii, etc.) are additive. */

:root {
  color-scheme: light;

  --bg: #f5f5f7;
  --bg2: #ececed;
  --panel: #ffffff;
  --panel2: #f2f2f4;
  /* --panel3 / --line / --ink2 / --faint / --faint2 nacieron SOLO en el bloque
     oscuro; 30+ usos quedaban sin fallback en claro y la jerarquía se rompía
     (el navegador caía al valor heredado o a `unset`). Aquí van los
     equivalentes claros. Ratios medidos con la fórmula WCAG 2.1 (relative
     luminance) contra --bg #f5f5f7 / --panel #ffffff / --panel2 #f2f2f4. */
  --panel3: #e8e8ea;       /* superficie de tracks/barras — no lleva texto */
  --border: #e2e2e5;
  --line: #ededf0;         /* divisor sutil — no-texto, sin requisito de 4.5:1 */
  --ink: #1d1d1f;
  --ink2: #2c2c2e;         /* secundario fuerte — 12.80 / 13.94 / 12.47 : AAA */
  --mute: #515154;
  --faint: #57575b;        /* terciario/labels —  6.61 /  7.19 /  6.43 : AA  */
  --faint2: #6e6e73;       /* placeholder      —  4.66 /  5.07 /  4.54 : AA  */
  --placeholder: #6e6e73;

  --bet: #12b981;
  --bet2: #0a7a55;
  --accent-from: #12b981;
  --accent-to: #0e9f6e;
  --accent-soft: #e7f7f0;
  --accent-soft2: #eafaf3;
  --accent-border: #b8ecd5;

  --fade: #dc2626;
  --skip: #8a8a8e;
  /* Confianza alta/media/baja. Los valores previos fallaban como TEXTO en tema
     claro; se oscurecieron conservando tono y saturación hasta pasar 4.5:1 en
     la superficie más exigente (--panel2 #f2f2f4). Ratios --bg / --panel / --panel2:
       --alta  #0891b2 → 3.38 / 3.68 / 3.29  ✗   #077894 → 4.68 / 5.09 / 4.56 ✓
       --media #d97706 → 2.93 / 3.19 / 2.85  ✗   #a65b05 → 4.68 / 5.10 / 4.56 ✓
       --baja  #94a3b8 → 2.35 / 2.56 / 2.29  ✗   #5d708b → 4.64 / 5.05 / 4.52 ✓ */
  --alta: #077894;
  --media: #a65b05;
  --baja: #5d708b;
  --live: #cb1c55;   /* AA: 5.1:1 on --bg as small text ("EN VIVO", live minute) */

  --info: #2a6fdb;
  --info-bg: #eef4ff;
  --pending-text: #a04407;
  --pending-bg: #fff4e5;
  --warn: #a04407;

  --tier-pro: #12b981;
  --tier-admin: #7c5cff;
  --draw-bar: #c9c9ce;
  --draw-ink: #04170f;
  --bet-ink: #04170f;
  --bet2-ink: #ffffff;   /* text ON a bet2 background — bet2 flips light/dark, so its ink must too */
  --prob-red: #c53030;   /* long-shot probability red — AA (>=4.5:1) on white/panel2 */
  --ui-black: #111;
  --ui-black-ink: #ffffff;

  --shadow: rgba(0, 0, 0, 0.06);
  --shadow-card: 0 10px 30px -22px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 24px 60px -30px rgba(0, 0, 0, 0.35);

  /* Superficie "siempre oscura" (tarjeta Pro, banda del historial). Antes eran
     #111 neutro puro: tres negros distintos conviviendo con el marino #0a0e1a.
     Jurado de diseño 2026-08-24 (C3, 3-0): un solo negro, de la familia marina. */
  --panel-inverse: #0d1322;
  --panel-inverse-border: #232d43;

  --radius-card: 16px;
  --radius-large: 20px;
  --radius-chip: 9px;
  --radius-pill: 999px;

  --content-app: 760px;
  --content-landing: 1080px;
  --nav-height: 64px;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* kini v2 dark — EXACT values from design_handoff_kini_v2 (README "Color — tema
     oscuro, por defecto"). This is the product-web default now; the light block above
     survives only for the toggle and the social "ficha clara" export. */
  --bg: #0a0e1a;
  --bg2: #0e1728;          /* gradient top of the header wash */
  --panel: #111827;
  --panel2: #1a2233;
  --panel3: #0c1220;       /* NEW — inner bars/tracks */
  --border: #1f2937;
  --line: #141c2e;         /* NEW — subtle dividers */
  --ink: #f2f5f9;
  --ink2: #e5e7eb;         /* NEW — strong secondary */
  --mute: #9aa3b2;
  /* Se subieron: como texto no llegaban a AA sobre ninguna superficie oscura.
     Ratios --bg #0a0e1a / --panel #111827 / --panel2 #1a2233:
       --faint  #6b7684 → 4.17 / 3.84 / 3.45 ✗   #8d97a6 → 6.52 / 6.01 / 5.38 ✓
       --faint2 #4b5567 → 2.56 / 2.36 / 2.12 ✗   #7c89a0 → 5.45 / 5.02 / 4.50 ✓
     Se mantiene la jerarquía (faint más claro que faint2). */
  --faint: #8d97a6;        /* labels/tertiary */
  --faint2: #7c89a0;       /* placeholder */
  /* #6b7684 daba 4.17 / 3.84 / 3.45 sobre --bg/--panel/--panel2: por debajo del
     4.5:1 de AA en los tres. Este mismo fichero ya lo documenta unas lineas mas
     arriba para --faint y alli se subio a #8d97a6; --placeholder se quedo con el
     valor viejo. Y no se usa solo en placeholders de input: hay 22 usos de
     var(--placeholder) en app.js como texto de contenido —la fecha de cada
     partido, el % de empate, etiquetas del feed— a 9-11px. #8d97a6 da
     6.52 / 6.01 / 5.38. */
  --placeholder: #8d97a6;

  --bet: #10b981;
  --bet2: #34d399;
  --accent-from: #10b981;
  --accent-to: #0e9f6e;
  --accent-soft: rgba(16, 185, 129, 0.14);
  --accent-soft2: rgba(16, 185, 129, 0.18);
  --accent-border: rgba(16, 185, 129, 0.35);

  --fade: #ef4444;
  --skip: #6b7684;
  /* --alta VUELVE A NO SER VERDE, como en el tema claro.
     En claro es #077894, un azul-verdoso elegido a propósito para que la escala
     de confianza (alta/media/baja) no se confunda con el verde de apuesta. El
     oscuro de la app la había puesto en #10b981, que es EXACTAMENTE --bet: en
     el historial convivían «confianza alta» y los ✓ de acierto en el mismo
     verde, con otro verde casi igual al lado (--bet2 #34d399). Medido el 26 ago
     2026: dos verdes de texto en la misma lista, 6,99:1 y 9,23:1. Los dos pasan
     AA, así que no era contraste — era que decían cosas distintas con el mismo
     color.
     #22d3ee sobre --bg #111827 = 9,77:1, y la escala queda legible de un
     vistazo: verde (apuesta) · cian (confianza) · ámbar · gris. */
  --alta: #22d3ee;
  --media: #f0a35c;
  --baja: #9aa3b2;
  --live: #ff5d7e;         /* the design's single use of pink = live only */

  --info: #5b8def;         /* blue = information / away side */
  --info-bg: rgba(91, 141, 239, 0.12);
  --pending-text: #f0a35c;
  --pending-bg: rgba(240, 163, 92, 0.12);
  --warn: #f0a35c;         /* amber = warning / high commission */

  --tier-pro: #16c98d;
  --tier-admin: #a389ff;
  --draw-bar: #414d63;
  --draw-ink: #eef1f6;
  --bet-ink: #04120c;
  --bet2-ink: #04120c;   /* green-on-CTA text, handoff */
  --prob-red: #f26d6d;   /* lighter red for AA on dark panels */
  --ui-black: #dfe4ec;
  --ui-black-ink: #141a24;

  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-card: 0 40px 90px -50px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 48px 110px -40px rgba(0, 0, 0, 0.7);
}

/* ── Motion + depth tokens (redesign-skill 2026 pass) — additive, shared by
   docs/index + docs/app. Spring easing for physical feel; a cool-tinted lift
   shadow (not pure black) that reads richer; a subtle fractal-noise grain to
   break digital flatness. ── */
:root {
  /* Display face with character (Bricolage Grotesque) for headlines — replaces
     generic Manrope on big type so the brand doesn't read as templated. Body
     stays Manrope, data stays JetBrains Mono. Loaded via the Google Fonts link
     in docs/index.html + docs/app/index.html. */
  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  /* Curva ease-out-quint: sale rápido, frena suave y no pasa de 1. Sin rebote: un objeto
     real desacelera y para; el rebote se lee como decoración, no como respuesta del sistema.
     Antes se llamaba --ease-spring; el nombre cambió porque la curva ya no rebota. */
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --shadow-lift: 0 22px 48px -28px rgba(12, 22, 43, .5);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --shadow-lift: 0 28px 64px -30px rgba(0, 0, 0, .75);
}

/* ── Utilidades de accesibilidad (WCAG 2.1 AA) — compartidas por docs/index y
   docs/app. Son utilidades, NO parches por elemento: cualquier control táctil
   nuevo (icono/botón cuadrado) se marca con .tap-44. Los controles que ya
   tienen clase de componente propia (.seg-btn, .picks-sub-btn, .lang-seg,
   .lang-pill, .footer-lang-pill) llevan el min-height:44px dentro de esa
   clase, no repetido elemento por elemento.
   Referencia: 2.5.5 Target Size, 2.4.1 Bypass Blocks.
   Deliberadamente NO fija `display`: varios de estos controles llevan
   `sm:hidden` / `hidden` de Tailwind y un display en la utilidad los volvería
   a mostrar. Solo tamaño mínimo; el layout lo pone quien la usa. ── */
.tap-44 {
  min-width: 44px;
  min-height: 44px;
}

/* Skip link — primer hijo de <body>, invisible hasta recibir foco de teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--bet2);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* El destino del skip link recibe foco programático: sin outline propio. */
#main:focus { outline: none; }

/* Anillo de foco de teclado global (WCAG 2.4.7 AA). Varios inputs traen un
   `outline:none` inline, así que esto usa !important pero SOLO en :focus-visible
   — un clic de ratón/tap (:focus a secas) no muestra nada, el anillo aparece
   solo para navegación por teclado/switch. #main conserva su foco silencioso
   arriba; el skip-link su propio anillo. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="option"], [role="tab"]):focus-visible {
  outline: 2px solid var(--bet2) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── RETRATOS: el encuadre de cada fuente de fotos ──────────────────────────
   Una sola clase para toda cara de la app; la pinta retrato() de app.js, que
   pone `data-fuente` y el lado de la caja en --lado. Aquí vive CÓMO se encuadra
   cada fuente, con lo medido el 2026-09-28:

   · Por defecto: cover, centrada y algo arriba (50% 20%).
   · Transfermarkt: 139x181 ya cerrada en cabeza y hombros. En un círculo cabe
     el 77% del alto y la cara no entra entera. Medido a ojo sobre 14 fotos el
     28-sep: el nacimiento del pelo cae del 14% del alto hacia abajo y la
     barbilla, entre el 77% y el 93% (mediana 88%). Anclada arriba (0%) la
     ventana acaba en el 77% y se cortaba la barbilla; al 60% va del 14% al 91%:
     se pierde la coronilla y quedan la frente y la barbilla. En la carta 4:5
     cabe el 96% del alto, así que ahí va arriba y no se corta nada de la cabeza.
   · ESPN: 600x436 con aire propio; con cover llena por el alto y se centra.
   · Wikimedia: planos de cuerpo entero o de jugada, con la cara casi siempre en
     el tercio de arriba. Sin detector de caras, sesgo arriba (50% 10%).
   · Fotmob: PNG RECORTADO de 192x192 con la coronilla pegada al borde. Con cover
     se salían pelo y barbilla, como con zoom. Se pinta entera
     (contain), apoyada abajo y con un 14% de aire encima de la cabeza.

   Ninguna regla escala la foto: el encuadre es object-fit y object-position.
   El padding del recorte se calcula sobre --lado y no en %, porque en un <img>
   el % de padding se mide sobre el ancho del PADRE, no sobre el suyo. */
.retrato {
  box-sizing: border-box;
  flex: none;
  width: var(--lado, 26px);
  height: var(--lado, 26px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--retrato-fondo, var(--panel2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.retrato[data-fuente="transfermarkt"] { object-position: 50% 60%; }
.retrato[data-fuente="espn"] { object-position: 50% 0%; }
.retrato[data-fuente="wikimedia"] { object-position: 50% 10%; }
.retrato[data-fuente="fotmob"] {
  object-fit: contain;
  object-position: 50% 100%;
  padding-top: calc(var(--lado, 26px) * .14);
}
.retrato--borde { border: 1px solid var(--border); }
.retrato--iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--lado, 26px) * .38);
  font-weight: 700;
  line-height: 1;
  color: var(--mute);
}
/* La carta del jugador: la foto llena su caja 4:5 (la pone _playerPhotoBox).
   El aire de Fotmob sale de --lado, que ahí vale el ancho de la caja: 150 px,
   que es lo que mide también a 360 px de pantalla. */
.retrato--carta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.retrato--carta[data-fuente="transfermarkt"] { object-position: 50% 0%; }

/* ── LANDING PÚBLICA: TEMA OSCURO ÚNICO ────────────────────────────────────
   La portada solo tiene tema oscuro. La APP conserva los dos, así que este bloque va
   colgado de `html[data-landing]` y no toca ni un valor de :root ni de [data-theme].
   Quien abra la app sigue viendo exactamente lo de siempre.
   
   Va aquí y no en un <style> de index.html porque todo color vive en este fichero:
   en el HTML no se escribe ni un hexadecimal, para no acabar con grises escritos a mano
   de familias distintas.
   
   Contrastes medidos con la fórmula WCAG 2.1 sobre --bg #0a0e1a:
     --ink   #f2f5f9 → 16,9:1   ·  --ink-3 #b6bfcd →  8,9:1
     --mute  #8b94a3 →  6,6:1   ·  --faint #5c6779 →  3,2:1 (sólo metadatos,
     nunca texto de lectura)     ·  --bet-2 #34d399 →  9,8:1
   Y --bet-ink #04140b sobre --bet #10b981 = 9,4:1. NUNCA blanco sobre --bet:
   da 2,5:1, que no pasa ni como texto grande. */
html[data-landing] {
  color-scheme: dark;

  --bg: #0a0e1a;
  --surface: #111827;      /* tarjetas, fichas de recibo */
  --surface-2: #161f31;    /* cajas dentro de una tarjeta */
  --surface-3: #0d1424;    /* banda del pase de día */

  --line: #1f2937;         /* bordes y filetes */
  --line-2: #253044;       /* borde de tarjeta elevada */
  --line-3: #2c3a4f;       /* borde de botón fantasma */
  --border: #1f2937;       /* nombre heredado: lo usan utilidades ya compiladas */

  --ink: #f2f5f9;
  --ink-2: #dbe2ea;        /* texto sobre tarjeta destacada */
  --ink-3: #b6bfcd;        /* texto secundario */
  --mute: #8b94a3;
  /* El handoff traía #5c6779 y lo describía como "sólo metadatos", pero da
     3,37:1 sobre --bg y axe lo cazó en 15 nodos: fechas de recibo, la regla de
     los cinco últimos, los pies de las tarjetas de precio. WCAG 1.4.3 no tiene
     excepción por "es metadato" — si es texto, son 4,5:1. Subido a #737e90 =
     4,69:1 — y volvió a fallar en las fechas de los recibos, que van sobre
     --surface (#111827), no sobre el fondo: ahí eran 4,32:1. El token tiene que
     pasar sobre las TRES superficies donde se pinta, así que #7f8998:
     5,44 sobre --bg · 5,01 sobre --surface · 4,66 sobre --surface-2. Sigue por
     debajo de --mute (6,29 / 5,80 / 5,38) y la jerarquía se mantiene. */
  --faint: #7f8998;        /* metadatos, fechas — ≥4,5:1 en las tres superficies */

  --bet: #10b981;
  --bet2: #34d399;         /* nombre heredado, mismo valor que --bet-2 */
  --bet-2: #34d399;
  --bet-ink: #04140b;
  --bet2-ink: #04140b;
  --bet-soft: rgba(16, 185, 129, .12);
  --bet-line: rgba(16, 185, 129, .30);
  --loss: #f87171;
  --tile: #eef2f7;         /* ficha clara del cilindro: los escudos de ESPN
                              están hechos para fondo claro y sobre oscuro
                              desaparecía la mitad */

  /* Nombres HEREDADOS que sigue pintando el código compartido de landing.js.
     Sin estas declaraciones caían al valor CLARO de :root sobre un fondo oscuro: la chapa
     con las iniciales de un equipo sin escudo pintaba #34d399 sobre #e7f7f0, o sea 1,73:1.
     Se declaran apuntando al token nuevo que les corresponde, no a otro valor, para no
     tener dos verdes distintos. */
  --panel: #111827;
  --accent-soft: rgba(16, 185, 129, .12);
  --accent-border: rgba(16, 185, 129, .30);
  --alta: #34d399;         /* confianza alta — 9,8:1 sobre --bg */
  --media: #f0a35c;
  --baja: #8b94a3;

  --sombra-panel: 0 40px 90px -40px rgba(0, 0, 0, .9);
  --sombra-ficha: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --sombra-verde: 0 40px 90px -46px rgba(16, 185, 129, .45);

  /* Cuatro radios y no ocho: 8 chip · 14 botón y tarjeta pequeña · 24 panel ·
     999 pastilla. */
  --r-chip: 8px;
  --r-boton: 14px;
  --r-panel: 24px;
  --r-pastilla: 999px;
}

/* ── LOGOTIPO EN TEXTO ────────────────────────────────────────────────────
   «kini●stats» para las páginas que cargan Bricolage Grotesque 800. Las medidas
   van en em: cada sitio solo pone su font-size. Balón de .24em, con .13em delante
   y .09em detrás, subido .14em sobre la línea base. Va sin caja ni relleno: la
   cabecera ya es un fondo liso.
   Los colores son los del logotipo y no --ink ni --bet: de noche #f2f5f9 y
   #34d399, de día #0a0e1a y #0e9f6e. */
:root { --logo-tinta: #0a0e1a; --logo-balon: #0e9f6e; }
[data-theme="dark"], html[data-landing] { --logo-tinta: #f2f5f9; --logo-balon: #34d399; }
.logo-ks {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
  color: var(--logo-tinta);
}
.logo-ks__balon {
  display: inline-block;
  width: .24em;
  height: .24em;
  border-radius: 50%;
  background: var(--logo-balon);
  margin: 0 .09em 0 .13em;
  vertical-align: .14em;
}