/* ============================================================
   INVIZTUS — SHARED DESIGN SYSTEM
   _shared.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── VARIABLES ──────────────────────────────────────────── */
:root {
  /* Colors */
  --bg:          #080b10;
  --surface:     rgba(13,17,23,0.74);
  --surface-2:   rgba(17,24,32,0.72);
  --surface-solid:   #0d1117;
  --surface-2-solid: #111820;
  --border:      #1a2030;
  --border-2:    #243040;
  --text:        #e0e6f0;
  --text-2:      #6e7f96;
  --text-3:      #3d4f63;
  --red:         #dc143c;
  --red-dim:     rgba(220,20,60,0.12);
  --red-glow:    rgba(220,20,60,0.20);
  --orange:      #FF6B00;
  --orange-dim:  rgba(255,107,0,0.12);
  --gold:        #c9a84c;
  --gold-dim:    rgba(201,168,76,0.12);
  --green:       #22c55e;
  --green-dim:   rgba(34,197,94,0.12);
  --amber:       #e8a020;

  /* Modalidad border colors */
  --c-501-par:   #3b82f6;
  --c-cricket-i: #14b8a6;
  --c-501-ind:   #ec4899;
  --c-cricket-p: #a855f7;

  /* Sidebar */
  --sidebar-w:   64px;
  --header-h:    60px;

  /* Spacing */
  --gap:         16px;
  --gap-sm:      8px;
  --gap-lg:      24px;

  /* Radius */
  --r:           8px;
  --r-sm:        5px;
  --r-lg:        12px;

  /* Transitions */
  --t:           0.18s ease;
}

/* ── RESET + BASE ───────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
.bbq {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-red    { color: var(--red); }
.text-gold   { color: var(--gold); }
.text-green  { color: var(--green); }
.text-2      { color: var(--text-2); }
.text-3      { color: var(--text-3); }
.text-11     { font-size: 11px; }
.text-12     { font-size: 12px; }
.text-13     { font-size: 13px; }
.text-sm     { font-size: 13px; }
.text-lg     { font-size: 18px; }
.fw-700      { font-weight: 700; }
.fw-800      { font-weight: 800; }

/* ── LAYOUT SHELL ───────────────────────────────────────── */
.shell {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: #040c18;
  border-right: 2px solid var(--border-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 16px;
  z-index: 100;
  gap: 4px;
  overflow: hidden;
}

/* Franja dorada de acento en el borde izquierdo — guiño al escudo InViZtus */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--red) 55%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* Panel superior tipo "escudo": degradado rojo + leon tenue + filo dorado */
.sidebar-logo {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  background: linear-gradient(155deg, rgba(220,20,60,0.30), rgba(220,20,60,0.04) 75%);
  border-bottom: 1px solid rgba(201,168,76,0.35);
}

.sidebar-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/leon.png') center/62% no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.sidebar-logo .logo-text {
  position: relative;
  z-index: 1;
}

.sidebar-logo svg {
  width: 32px;
  height: 32px;
}

.sidebar-logo .logo-text {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text);
}

.sidebar-logo .logo-z {
  color: var(--red);
}

.nav-item {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  color: var(--text-3);
  transition: background var(--t), color var(--t);
  position: relative;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active {
  background: var(--red-dim);
  color: var(--red);
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
  z-index: 200;
}

.nav-item:hover .nav-tooltip {
  opacity: 1;
}

.sidebar-divider {
  width: 32px;
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* ── MAIN AREA ──────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── FONDO ESCENARIO ────────────────────────────────────────
   Fondo sitewide sustituido: ya no es el león, sino una imagen tipo
   diana/escenario PDC (assets/fondo-diana.jpg). En cuanto esa imagen
   exista en el proyecto, este bloque la muestra automáticamente con
   la misma animación de "respiración" sutil que tenía antes. */
body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98vmin;
  height: 98vmin;
  background: url('assets/fondo-diana.jpg') center/contain no-repeat;
  opacity: 0.20;
  pointer-events: none;
  z-index: 0;
  animation: bgSceneBreathe 7s ease-in-out infinite;
}

@keyframes bgSceneBreathe {
  0%, 100% { opacity: 0.16; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.24; transform: translate(-50%, -50%) scale(1.015); }
}

.shell, .app { position: relative; z-index: 1; }

/* ── CRISTAL ────────────────────────────────────────────────
   --surface/--surface-2 pasaron a ser semi-transparentes para que
   el león del fondo se note a través de las tarjetas; este blur
   mantiene el texto legible sobre el degradado, sea cual sea la
   página o el bloque <style> local que use estas clases. */
:where(.player-card, .table-wrap, .summary-card, .bracket-card,
  .rank-card, .jornada-card, .stat-card, .rival-card, .trg-row,
  .equipo-table-wrap, .partida-card, .pos-tab-card, .pareja-card,
  .exp-card, .mod-card, .header-search, .nav-tooltip, .podium-bar,
  .podium-crest, .mi-jornada-card, .jm-col, .jornada-modal) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── FONDO: TEXTURA DE GRANO ────────────────────────────────
   Complementa al leon: le da cuerpo al navy plano sin distraer. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* ── FONDO: DIANA + DARDO ────────────────────────────────────
   Segundo motivo de fondo (esquina opuesta al leon), con una
   entrada animada de un solo disparo al cargar la pagina. */
.dart-scene {
  position: fixed;
  right: -90px;
  bottom: -90px;
  width: 520px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
}

.dart-scene .board { position: absolute; inset: 0; opacity: 0.07; }

.dart-scene .dart {
  position: absolute;
  width: 120px;
  height: 14px;
  left: -160px;
  top: 30%;
  opacity: 0;
  transform: rotate(24deg);
  animation: dartFlyIn 1.4s cubic-bezier(.25,.6,.35,1) 0.4s both;
}

@keyframes dartFlyIn {
  0%   { left: -160px; top: 6%;  opacity: 0; }
  12%  { opacity: 0.32; }
  72%  { left: calc(50% - 108px); top: calc(50% - 10px); opacity: 0.32; }
  80%  { left: calc(50% - 100px); top: calc(50% - 7px); }
  88%  { left: calc(50% - 104px); top: calc(50% - 8px); }
  100% { left: calc(50% - 102px); top: calc(50% - 8px); opacity: 0.28; }
}

.dart-scene .impact {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 2px solid #4ade80;
  opacity: 0;
  transform: scale(.2);
  animation: impactOnce 1.4s ease-out 0.4s both;
}

@keyframes impactOnce {
  0%, 62% { opacity: 0; transform: scale(.2); }
  76%     { opacity: 0.5; transform: scale(.6); }
  100%    { opacity: 0; transform: scale(1.3); }
}

@media (max-width: 1000px) {
  .dart-scene { width: 360px; height: 360px; right: -120px; bottom: -120px; }
}

/* ── HEADER TITLE ───────────────────────────────────────── */
.header-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 1;
  color: #fff;
}

.header-title .logo-z {
  color: var(--red);
}

/* Override: toda la palabra INVIZTUS blanca, solo Z roja */
.header-title span { color: #fff; }
.header-title .text-red { color: var(--red); }

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 12px;
  transition: border-color var(--t);
}

.header-search:focus-within {
  border-color: var(--border-2);
}

.header-search svg {
  width: 15px;
  height: 15px;
  color: var(--text-3);
  flex-shrink: 0;
}

.header-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  width: 160px;
}

.header-search input::placeholder {
  color: var(--text-3);
}

.header-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--red-dim);
  border: 1px solid var(--red-glow);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
}

.header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── CONTENT ─────────────────────────────────────────────── */
.content {
  flex: 1;
  min-width: 0;
  padding: var(--gap-lg);
  overflow-y: auto;
}

/* En móvil, la barra lateral (position:fixed, 64px) no debe quitar
   ancho útil de más: por debajo de 640px pasa a ser más estrecha,
   y el contenido nunca debe forzar scroll horizontal. */
/* ============================================================
   MÓVIL VERTICAL — sidebar como barra de navegación inferior
   ============================================================ */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 4px;
    border-right: none;
    border-top: 2px solid var(--border-2);
    gap: 0;
    z-index: 500;
  }

  .sidebar::before { display: none; }
  .sidebar-logo { display: none; }
  .sidebar-divider { display: none; }
  .sidebar-stripes { display: none; }

  .nav-item {
    width: auto;
    height: 44px;
    flex: 1;
    max-width: 56px;
  }

  .nav-item .nav-tooltip { display: none; }

  .sidebar-logout {
    position: static;
    margin: 0;
  }

  .main {
    margin-left: 0;
    padding-bottom: 60px;
  }

  .topbar {
    padding: 0 var(--space-md);
  }

  .content {
    padding: var(--space-md);
  }
}

/* Sidebar de escritorio: ancho fijo que ya NO vuelve a cambiar por
   encima de este punto de corte (antes saltaba de 64px a 216px a partir
   de 1600px, lo que desplazaba todo el contenido principal al cambiar
   de monitor). A partir de 1024px el sidebar muestra siempre el mismo
   ancho, con el nombre de cada seccion junto al icono; por debajo de
   1024px (tablet/movil) se queda en el rail solo-iconos. */
@media (min-width: 1024px) {
  :root { --sidebar-w: 190px; }
  .sidebar { align-items: stretch; padding: 0 10px 16px; }
  .nav-item:not(.sidebar-logout) {
    width: 100%; justify-content: flex-start; gap: 12px; padding: 0 12px;
  }
  .nav-item:not(.sidebar-logout) .nav-tooltip {
    position: static; opacity: 1; pointer-events: auto;
    background: none; border: none; padding: 0;
    font-size: 13px; font-weight: 700; color: inherit;
    white-space: nowrap;
  }
  .sidebar-divider { width: calc(100% - 20px); }
}

/* ── TABS ───────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px;
  width: fit-content;
  margin-bottom: var(--gap-lg);
}

.tab-btn {
  padding: 6px 16px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: background var(--t), color var(--t);
}

.tab-btn.active {
  background: var(--orange);
  color: #fff;
}

.tab-btn:hover:not(.active) {
  background: var(--surface-2);
  color: var(--text);
}

/* ── SECTION HEADER ─────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
}

.section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--red);
  border-radius: 2px;
}

.section-count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
}

/* ── PLAYER CARD ─────────────────────────────────────────── */
.player-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color var(--t), box-shadow var(--t);
}

.player-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Player card top row */
.player-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 14px;
}

.player-pos {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  flex-shrink: 0;
}

.player-pos.pos-1 {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.player-pos.pos-2 {
  background: rgba(160,160,160,0.12);
  border-color: #888;
  color: #aaa;
}
.player-pos.pos-3 {
  background: rgba(180,90,40,0.12);
  border-color: #c47a3a;
  color: #c47a3a;
}

.player-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange-dim);
  border: 2px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  flex-shrink: 0;
}

.player-info {
  flex: 1;
  min-width: 0;
}

.player-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.01em;
}

.player-subtitle {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.player-kpis {
  display: flex;
  gap: 20px;
  align-items: center;
}

.kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.kpi-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.kpi-val.kpi-green { color: var(--green); }
.kpi-val.kpi-red   { color: var(--red); }

.kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.kpi-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

/* Global pct bar */
.pct-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.pct-bar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.pct-bar-track {
  flex: 1;
  height: 5px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.pct-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red), #ff4060);
  transition: width 0.6s ease;
}

.pct-bar-fill.gold {
  background: linear-gradient(90deg, var(--gold), #e8c870);
}

.pct-bar-fill.green {
  background: linear-gradient(90deg, var(--green), #4ade80);
}

.pct-bar-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  min-width: 46px;
  text-align: right;
}

/* ── PLAYER CARD DIVIDER ─────────────────────────────────── */
.card-divider {
  height: 1px;
  background: var(--border);
}

/* ── MODALIDAD CARDS ROW ─────────────────────────────────── */
.modalidad-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 20px;
}

.mod-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  border-left-width: 3px;
  transition: transform var(--t);
}

.mod-card:hover {
  transform: translateY(-1px);
}

.mod-card.c-501-par   { border-left-color: var(--c-501-par); }
.mod-card.c-cricket-i { border-left-color: var(--c-cricket-i); }
.mod-card.c-501-ind   { border-left-color: var(--c-501-ind); }
.mod-card.c-cricket-p { border-left-color: var(--c-cricket-p); }

.mod-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}

.mod-card.c-501-par   .mod-label { color: var(--c-501-par); }
.mod-card.c-cricket-i .mod-label { color: var(--c-cricket-i); }
.mod-card.c-501-ind   .mod-label { color: var(--c-501-ind); }
.mod-card.c-cricket-p .mod-label { color: var(--c-cricket-p); }

.mod-score {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.mod-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  margin-top: 2px;
}

/* ── RECENT MATCHES ──────────────────────────────────────── */
.recent-section {
  padding: 0 20px 16px;
}

.recent-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.recent-title::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--border-2);
}

.recent-matches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.match-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 42px;
}

.match-jornada {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-3);
  text-transform: uppercase;
}

.match-result-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.match-result-circle.win {
  background: rgba(34,197,94,0.15);
  border: 1.5px solid var(--green);
  color: var(--green);
}

.match-result-circle.loss {
  background: rgba(220,20,60,0.12);
  border: 1.5px solid var(--red);
  color: var(--red);
}

.match-rival {
  font-size: 8px;
  color: var(--text-3);
  text-align: center;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Streak badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  margin-top: 4px;
}

.streak-badge.loss-streak {
  background: rgba(220,20,60,0.08);
  border-color: rgba(220,20,60,0.25);
  color: var(--red);
}

/* ── CLASSIFICATION TABLE ─────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead tr {
  border-bottom: 1px solid var(--border);
}

.data-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.data-table th:not(:first-child) {
  text-align: center;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table td {
  padding: 12px 16px;
  font-size: 13px;
}

.data-table td:not(:first-child) {
  text-align: center;
}

.table-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--text-3);
}

.table-pos.pos-1 { background: rgba(201,168,76,0.2); color: var(--gold); }
.table-pos.pos-2 { background: rgba(160,160,160,0.1); color: #aaa; }
.table-pos.pos-3 { background: rgba(180,90,40,0.1); color: #c47a3a; }

.team-name-inviztus {
  font-weight: 800;
  color: var(--red);
}

.result-win  { color: var(--green); font-weight: 700; }
.result-loss { color: var(--red); font-weight: 700; }

/* ── STAT BADGE ──────────────────────────────────────────── */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.stat-pill.green {
  background: var(--green-dim);
  color: var(--green);
}

.stat-pill.red {
  background: var(--red-dim);
  color: var(--red);
}

.stat-pill.gold {
  background: var(--gold-dim);
  color: var(--gold);
}

/* ── GRID LAYOUTS ────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

/* ── SUMMARY CARD ────────────────────────────────────────── */
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--gap);
}

.summary-card-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-3);
  gap: 12px;
  text-align: center;
}

.empty-state svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

/* ── LOADING ──────────────────────────────────────────────── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-3);
  gap: 10px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── JORNADA CARD ────────────────────────────────────────── */
.jornada-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t);
  cursor: pointer;
}

.jornada-card:hover {
  border-color: var(--border-2);
}

.jornada-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.jornada-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.jornada-resultado {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.jornada-resultado.win  { color: var(--green); }
.jornada-resultado.loss { color: var(--red); }

.jornada-rival {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 10px 16px;
}

.jornada-rival span {
  color: var(--text-3);
  font-weight: 400;
  font-size: 12px;
}

.jornada-fecha {
  font-size: 11px;
  color: var(--text-3);
  padding: 0 16px 14px;
}

/* Partidas detalle */
.partidas-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 16px 14px;
}

.partida-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.partida-mini-label {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.partida-mini-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
}

.partida-mini-dot.win {
  background: rgba(34,197,94,0.15);
  border: 1px solid var(--green);
  color: var(--green);
}

.partida-mini-dot.loss {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
}

/* ── PLAYOFF BRACKET ─────────────────────────────────────── */
.bracket-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--gap);
  margin-bottom: 12px;
}

.bracket-fase {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.bracket-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bracket-team {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bracket-team.winner {
  color: var(--green);
}

.bracket-team.loser {
  color: var(--text-3);
}

.bracket-score {
  font-size: 22px;
  font-weight: 900;
  min-width: 60px;
  text-align: center;
  letter-spacing: 0.05em;
}

.bracket-seed {
  font-size: 9px;
  font-weight: 800;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 6px;
  color: var(--text-3);
  letter-spacing: 0.05em;
}

/* Franja de rayas diagonales rojo/dorado, previa al boton de salir */
.sidebar-stripes {
  margin-top: auto;
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    135deg,
    var(--gold) 0 6px,
    var(--red) 6px 9px,
    transparent 9px 20px
  );
  opacity: 0.38;
  border-top: 1px solid rgba(201,168,76,0.3);
  pointer-events: none;
}

/* Logout btn en sidebar — al final, sobre la franja de rayas */
.sidebar-logout {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(220,20,60,0.4);
  background: rgba(4,12,24,0.6);
  color: var(--red);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  position: relative;
  margin-top: -58px;
  margin-bottom: 8px;
}
.sidebar-logout:hover { background: var(--red-dim); border-color: var(--red); }
.sidebar-logout svg { width: 20px; height: 20px; }
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

/* ── UTILITY ──────────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.align-center { align-items: center; }
.gap-sm       { gap: var(--gap-sm); }
.gap          { gap: var(--gap); }
.gap-lg       { gap: var(--gap-lg); }
.mb-sm        { margin-bottom: var(--gap-sm); }
.mb           { margin-bottom: var(--gap); }
.mb-lg        { margin-bottom: var(--gap-lg); }
.mt-sm        { margin-top: var(--gap-sm); }
.mt           { margin-top: var(--gap); }
.hidden       { display: none !important; }
.relative     { position: relative; }
.pointer      { cursor: pointer; }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-in-delay-1 { animation-delay: 0.05s; opacity: 0; }
.fade-in-delay-2 { animation-delay: 0.10s; opacity: 0; }
.fade-in-delay-3 { animation-delay: 0.15s; opacity: 0; }
.fade-in-delay-4 { animation-delay: 0.20s; opacity: 0; }

/* ============================================================
   INTERFAZ PARAMÉTRICA — DESIGN TOKENS (Fase 0)
   ------------------------------------------------------------
   Para las pantallas Jugadores (estadisticas.html) y Jornada
   (jornadas.html), a partir de la especificación de interfaz
   paramétrica. NINGÚN archivo HTML usa todavía estas variables:
   este bloque no cambia el aspecto de ninguna pantalla existente
   por sí solo. Los componentes de fases posteriores (PlayerCard,
   Avatar, RatingRing, Sparkline, MatchRow, MatchLineup, PlayerSlot,
   Crest) leerán estos tokens en vez de repetir valores sueltos.

   Dos tipos de valor conviven aquí, y se etiquetan como tales:

   PROMOVIDO = ya está en producción hoy, en algún archivo real.
   Se centraliza tal cual está. Si una fase posterior conecta un
   selector existente (p.ej. .jug-pcard, .jug-pavatar) a uno de
   estos tokens, el resultado visual es idéntico al actual — es
   ordenar, no rediseñar.

   PROPUESTO (a validar) = pieza que hoy no existe en ningún
   archivo (rating ring como componente propio, sparkline, crest,
   match row...). Lleva un valor inicial razonable. Se ajusta una
   sola vez, aquí, al construir esa pieza y compararla con la
   imagen de referencia en su fase correspondiente — nunca
   archivo por archivo.
   ============================================================ */
:root {

  /* ---- Escala de espaciado compartida ----
     PROMOVIDO desde el bloque :root local de mi-perfil.html
     (líneas 25-30 de ese archivo). Mismos nombres, mismos
     valores: se centraliza para que estadisticas.html y
     jornadas.html puedan usar la misma escala sin volver a
     declararla — hoy solo existía dentro de mi-perfil.html.
     mi-perfil.html conserva su copia local por ahora (incluida
     esta fase; ver nota de duplicidad al final del análisis) y
     no cambia de aspecto: los valores son iguales. */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* ---- Radio adicional ----
     --r (8px) / --r-sm (5px) / --r-lg (12px) ya existían arriba.
     PROMOVIDO: .jug-pcard usa border-radius:16px hoy sin ningún
     token asociado — se formaliza ese valor real como --r-xl. */
  --r-xl: 16px;

  /* ---- CARD genérica (PlayerCard, MatchRow y similares) ----
     PROMOVIDO desde .jug-pcard (estadisticas.html): radio,
     borde y padding son exactamente los que esa tarjeta ya usa
     en producción hoy. */
  --card-radius:        var(--r-xl);   /* = 16px, igual que .jug-pcard */
  --card-border-color:  var(--border-2);
  --card-border-width:  1px;
  --card-padding-y:     20px;          /* igual que .jug-pcard */
  --card-padding-x:     22px;          /* igual que .jug-pcard */
  --card-gap-inner:     14px;          /* igual que .jug-pcard-top (gap entre avatar/nombre) */
  --card-gap-grid:      18px;          /* igual que .jug-grid2 (gap entre tarjetas de la rejilla) */

  /* ---- AVATAR cuadrado/redondeado (foto o iniciales) ----
     PROMOVIDO desde .jug-pavatar (estadisticas.html): caja fija,
     esquinas redondeadas (no círculo). Es el avatar que ya usa
     hoy la tarjeta de Jugadores. */
  --avatar-size:    52px;
  --avatar-radius:  12px;

  /* ---- AVATAR circular con anillo (mi-perfil.html) ----
     PROMOVIDO desde .perfil-ava-wrap / .perfil-ava-ring: mismo
     concepto que Avatar, forma distinta — se centraliza aparte
     para no forzar una única forma de avatar en todo el proyecto. */
  --avatar-round-size:   92px;
  --avatar-ring-stroke:  3px;

  /* ---- RATING RING (anillo circular de rendimiento en PlayerCard) ----
     PROPUESTO (a validar en Fase 3). No existe todavía como
     pieza independiente — hoy el % de victorias solo aparece
     como texto (.jug-pstat). Reutiliza la técnica SVG que ya
     funciona en mi-perfil.html (viewBox cuadrado, círculo con
     stroke-dasharray como progreso), a un tamaño mayor porque
     aquí es la pieza principal y no un adorno alrededor del
     avatar. */
  --rating-ring-size:     64px;
  --rating-ring-stroke:   4px;
  --rating-ring-viewbox:  50;   /* mismo sistema de coordenadas 0 0 50 50 que mi-perfil.html */

  /* ---- SPARKLINE (mini-gráfica de tendencia en PlayerCard) ----
     PROPUESTO (a validar en Fase 3). Distinto de .jug-streakdots
     (puntos de victoria/derrota, se mantiene tal cual). */
  --sparkline-width:   64px;
  --sparkline-height:  22px;

  /* ---- Franja de color por rendimiento (tier) ----
     PROMOVIDO: mismos umbrales/colores que ya usa la función
     pctColor() en mi-perfil.html y estadisticas.html
     (≥70 verde · ≥50 ámbar · resto rojo). No es una paleta nueva. */
  --tier-good: var(--green);
  --tier-warn: var(--amber);
  --tier-bad:  var(--red);

  /* ---- MATCH ROW ("Partidos de la temporada", jornadas.html) ----
     PROPUESTO (a validar en Fase 6). El carrusel actual
     (.jornada-card) no tiene una fila lineal equivalente;
     valor inicial pensado para caber jornada + fecha + escudo +
     rival + resultado + goleadores + acción en una sola línea. */
  --match-row-height: 56px;
  --match-row-gap:    var(--space-sm);
  --match-row-radius: var(--r);

  /* ---- CRESTS (escudo propio o rival) ----
     PROPUESTO (a validar en Fase 7). No existe ningún asset de
     escudo en el proyecto todavía — misma lógica que Avatar:
     caja fija, imagen si existe, iniciales si no. */
  --crest-size:    32px;
  --crest-radius:  var(--r-sm);

  /* ---- PLAYER SLOT (una posición P1-P7 dentro de MatchLineup) ----
     PROPUESTO (a validar en Fase 7). */
  --slot-avatar-size: 40px;
  --slot-height:      48px;
  --slot-gap:         var(--space-sm);

  /* ---- Icono de acción pequeño dentro de una tarjeta ---- */
  --action-icon-size: 28px;
}

/* ---- Responsive: mismos tokens, valores más compactos ----
   Mismo patrón que ya se validó en mi-perfil.html: en vez de
   reescribir cada regla por breakpoint, se sobreescribe el VALOR
   de los tokens — el componente que los consuma (en fases
   posteriores) se adapta solo. Por ahora esto no afecta a ninguna
   pantalla porque nada usa aún estos tokens. */
@media (max-width: 820px) {
  :root {
    --avatar-size:      46px;
    --card-padding-y:   16px;
    --card-padding-x:   16px;
    --rating-ring-size: 58px;
  }
}

@media (max-width: 480px) {
  :root {
    --avatar-size:      42px;
    --card-padding-y:   var(--space-md);
    --card-padding-x:   var(--space-md);
    --rating-ring-size: 52px;
    --match-row-height: 64px; /* en móvil la fila probablemente pasa a 2 líneas — se valida en Fase 9 */
  }
}

/* ============================================================
   MÓVIL — CAPA FINAL (auditoría responsive 2026-09-23)
   Va al final del fichero y con prefijo `body` a propósito:
   algunas páginas redefinen .sidebar/.main en su <style> propio
   y había reglas globales posteriores (.sidebar-logout) que
   anulaban el bloque móvil de arriba. Aquí se garantiza que en
   ≤768px la navegación sea SIEMPRE la barra inferior.
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }

  body .sidebar {
    display: flex;
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    border-right: none;
    border-top: 2px solid var(--border-2, #253044);
    background: #040c18;
    overflow: visible;
    z-index: 500;
  }
  body .sidebar::before,
  body .sidebar .sidebar-logo,
  body .sidebar .sidebar-divider,
  body .sidebar .sidebar-stripes { display: none; }

  body .sidebar .nav-item {
    flex: 1 1 0;
    width: auto;
    max-width: 56px;
    height: 44px;
    margin: 0;
  }
  body .sidebar .nav-item .nav-tooltip { display: none; }

  body .sidebar .sidebar-logout {
    position: static;
    flex: 0 0 38px;
    width: 38px; height: 38px;
    margin: 0 0 0 4px;
  }
  body .sidebar .sidebar-logout svg { width: 18px; height: 18px; }

  body .main {
    margin-left: 0;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* =====================================================================
   SISTEMA MÓVIL "POR PANTALLAS" (scroll-snap nativo) — reutilizable
   Uso: <html class="iz-snap"> + marcar cada bloque principal con
   .snap-screen (o agrupar varios con <section class="snap-group
   snap-screen">). En escritorio/tablet nada cambia: .snap-group es
   display:contents y todo lo demás solo existe en ≤700px.
   Altura de pantalla = viewport (svh) − cabecera − barra − safe areas.
   Cada página fija su cabecera con --iz-head-base (por defecto 52px).
   ===================================================================== */
.snap-group{ display:contents; }
.snap-hint, .iz-mhead{ display:none; }

@media (max-width:700px){
  html.iz-snap{
    --iz-safe-t: env(safe-area-inset-top, 0px);
    --iz-safe-b: env(safe-area-inset-bottom, 0px);
    --iz-head-h: calc(var(--iz-head-base, 52px) + var(--iz-safe-t));
    --iz-nav-h:  calc(60px + var(--iz-safe-b));
    --iz-gap: 12px;
    --iz-vh: 100vh;
    height:auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--iz-head-h);
    scroll-padding-bottom: var(--iz-nav-h);
    overflow-x: clip;
  }
  @supports (height: 100svh){ html.iz-snap{ --iz-vh: 100svh; } }
  html.iz-snap{ --iz-screen: calc(var(--iz-vh) - var(--iz-head-h) - var(--iz-nav-h)); }
  /* El documento es el único contenedor de scroll (algunas páginas
     tenían html,body{height:100%} y hacían scroll dentro de <body>). */
  html.iz-snap body{ height:auto; min-height:0; overflow:visible; overflow-x:clip; }

  html.iz-snap .iz-mhead{
    display:flex; align-items:center; gap:10px;
    position:sticky; top:0; z-index:400;
    height:calc(var(--iz-mhead-base, 52px) + var(--iz-safe-t)); box-sizing:border-box;
    padding: var(--iz-safe-t) 16px 0;
    background: rgba(4,12,24,.9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-2, #253044);
  }
  html.iz-snap .iz-mhead-logo{ font-size:19px; font-weight:900; letter-spacing:.04em; color:#fff; }
  html.iz-snap .iz-mhead-logo span{ color:var(--red, #dc143c); }
  html.iz-snap .iz-mhead-title{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2, #9fb0c6); }
  html.iz-snap .iz-mhead-season{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--gold, #c9a84c); }

  html.iz-snap body .main{ padding-bottom: var(--iz-nav-h); }
  /* .content no puede ser contenedor de scroll: rompería los sticky y el snap */
  html.iz-snap .content{ overflow:visible; }

  html.iz-snap .snap-screen{
    min-height: calc(var(--iz-screen) - 2 * var(--iz-gap));
    margin: var(--iz-gap) 0 !important;
    scroll-margin-top: var(--iz-gap);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    box-sizing: border-box;
  }
  html.iz-snap .snap-group{ display:flex; flex-direction:column; justify-content:center; gap: var(--iz-gap); }
  /* Páginas con listas largas: snap "suave" (proximity) y cada bloque o
     tarjeta de la lista es un punto de parada, sin forzar pantalla completa. */
  html.iz-snap.iz-snap-soft{ scroll-snap-type: y proximity; }
  html.iz-snap .snap-point{ scroll-snap-align:start; scroll-margin-top: var(--iz-gap); }
  /* Barra secundaria fija bajo la cabecera (pestañas de sección) */
  html.iz-snap .iz-subbar{
    position:sticky; top:calc(var(--iz-mhead-base, 52px) + var(--iz-safe-t)); z-index:390;
    margin-left:-12px !important; margin-right:-12px !important; border-radius:0 !important;
    background: rgba(4,12,24,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-left:none !important; border-right:none !important; border-top:none !important;
    border-bottom:1px solid var(--border-2, #253044) !important;
  }

  html.iz-snap .snap-hint{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3, #6e7f96);
  }
  html.iz-snap .snap-hint svg{ width:20px; height:20px; color:var(--gold, #c9a84c); animation: izHint 1.8s ease-in-out infinite; }
  @keyframes izHint{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(5px); opacity:1 } }
  @media (max-height:660px){ html.iz-snap .snap-hint{ font-size:9.5px; } }
}
@media (prefers-reduced-motion: reduce){ .snap-hint svg{ animation:none !important; } }
/* Móvil en horizontal: sin snap (las pantallas no caben en ~390px de alto) */
@media (max-width:700px) and (max-height:500px) and (orientation:landscape){
  html.iz-snap{ scroll-snap-type:none; }
}