/* =========================================================
   DATOS · selector de grupos
   ========================================================= */

#datos-page .datos-group-select-btn {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(
    90deg,
    var(--datos-group-soft, rgba(255,255,255,.08)) 0%,
    rgba(255,255,255,0.03) 100%
  );
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

#datos-page .datos-group-select-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.32);
}

#datos-page .datos-group-select-btn.is-active {
  font-weight: 800;
  border-color: var(--datos-group-accent, rgba(255,255,255,.45));
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,0.06) 100%
  );
  box-shadow: 0 0 18px rgba(255,255,255,.10);
}


/* =========================================================
   DATOS · clasificación grid base
   ========================================================= */

#datos-page .datos-classification-grid {
  --ag-background-color: rgba(4, 7, 8, 0.34);
  --ag-header-background-color: rgba(255, 255, 255, 0.075);
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.028);
  --ag-row-hover-color: rgba(255, 255, 255, 0.085);
  --ag-border-color: rgba(255, 255, 255, 0.075);
  --ag-header-foreground-color: rgba(255,255,255,.92);
  --ag-foreground-color: rgba(255,255,255,.88);

  --ag-font-size: 12px;
  --ag-row-border-color: rgba(255,255,255,.055);
  --ag-secondary-border-color: rgba(255,255,255,.08);
  --ag-selected-row-background-color: rgba(255,255,255,.08);

  width: 100%;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 16px 34px rgba(0,0,0,.16);
}

#datos-page .datos-classification-grid .ag-root-wrapper {
  border-radius: 16px;
  overflow: hidden;
}

#datos-page .datos-classification-grid .ag-root,
#datos-page .datos-classification-grid .ag-root-wrapper,
#datos-page .datos-classification-grid .ag-body,
#datos-page .datos-classification-grid .ag-body-viewport,
#datos-page .datos-classification-grid .ag-center-cols-viewport,
#datos-page .datos-classification-grid .ag-center-cols-clipper {
  min-width: 0;
}


/* =========================================================
   DATOS · clasificación headers
   ========================================================= */

#datos-page .datos-classification-grid .ag-header {
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.045) 100%);
}

#datos-page .datos-classification-grid .ag-header-cell,
#datos-page .datos-classification-grid .ag-header-group-cell {
  font-weight: 850;
  letter-spacing: .2px;
  border-right: 1px solid rgba(255,255,255,.05);
}

#datos-page .datos-classification-grid .ag-header-cell-label,
#datos-page .datos-classification-grid .ag-header-group-cell-label {
  justify-content: center;
}

#datos-page .datos-classification-grid .datos-clasif-header-fixed {
  background: rgba(8, 10, 10, .96) !important;
}

#datos-page .datos-classification-grid .datos-clasif-group-header {
  color: rgba(255,255,255,.92);
}

#datos-page .datos-classification-grid .datos-clasif-group-general {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.045) 100%
  );
  border-left: 1px solid rgba(255,255,255,.08);
}

#datos-page .datos-classification-grid .datos-clasif-group-home {
  background: linear-gradient(
    180deg,
    rgba(34,197,94,.16) 0%,
    rgba(34,197,94,.055) 100%
  );
  border-left: 1px solid rgba(34,197,94,.22);
}

#datos-page .datos-classification-grid .datos-clasif-group-away {
  background: linear-gradient(
    180deg,
    rgba(59,130,246,.16) 0%,
    rgba(59,130,246,.055) 100%
  );
  border-left: 1px solid rgba(59,130,246,.22);
}

#datos-page .datos-classification-grid .datos-clasif-group-sanction,
#datos-page .datos-classification-grid .datos-clasif-group-extra {
  background: linear-gradient(
    180deg,
    rgba(249,115,22,.15) 0%,
    rgba(249,115,22,.045) 100%
  );
  border-left: 1px solid rgba(249,115,22,.20);
}


/* =========================================================
   DATOS · clasificación celdas base
   ========================================================= */

#datos-page .datos-classification-grid .ag-cell {
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.035);
}

#datos-page .datos-classification-grid .ag-cell-value {
  width: 100%;
}

#datos-page .datos-classification-grid .ag-pinned-left-header,
#datos-page .datos-classification-grid .ag-pinned-left-cols-container {
  border-right: 1px solid rgba(255,255,255,.13);
}

#datos-page .datos-classification-grid .ag-pinned-left-header .ag-header-cell,
#datos-page .datos-classification-grid .ag-pinned-left-cols-container .ag-cell {
  background: rgba(7, 9, 9, .96);
}


/* =========================================================
   DATOS · clasificación posición / escudo / equipo
   ========================================================= */

#datos-page .datos-classification-grid .datos-clasif-pos-cell {
  justify-content: center !important;
  font-size: 13px;
  font-weight: 950;
  color: rgba(255,255,255,.95);
}

#datos-page .datos-classification-grid .datos-clasif-logo-cell {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#datos-page .datos-classification-grid .datos-clasif-logo-cell .ag-cell-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

#datos-page .datos-classification-grid .datos-clasif-team-cell {
  justify-content: flex-start !important;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .15px;
  color: rgba(255,255,255,.94);
}

#datos-page .datos-classification-grid .datos-clasif-team-cell .ag-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   DATOS · renderers de imagen solo en datos_page
   ========================================================= */

#datos-page .datos-classification-grid .datos-img-circle-renderer,
#datos-page .datos-teams-grid .datos-img-circle-renderer,
#datos-page .datos-team-players-grid .datos-img-circle-renderer {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 12px rgba(0,0,0,.18);
}

#datos-page .datos-classification-grid .datos-img-circle-fallback,
#datos-page .datos-teams-grid .datos-img-circle-fallback,
#datos-page .datos-team-players-grid .datos-img-circle-fallback {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 15px;
  font-weight: 850;
}


/* =========================================================
   DATOS · renderer equipo con logo
   ========================================================= */

#datos-page .datos-classification-grid .datos-clasif-team-inline,
#datos-page .datos-teams-grid .datos-clasif-team-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
}

#datos-page .datos-classification-grid .datos-clasif-team-logo,
#datos-page .datos-teams-grid .datos-clasif-team-logo {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  object-fit: contain;
  border-radius: 999px;
  padding: 2px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

#datos-page .datos-classification-grid .datos-clasif-team-logo-fallback,
#datos-page .datos-teams-grid .datos-clasif-team-logo-fallback {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 11px;
  font-weight: 900;
}

#datos-page .datos-classification-grid .datos-clasif-team-name,
#datos-page .datos-teams-grid .datos-clasif-team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}


/* =========================================================
   DATOS · clasificación números y colores
   ========================================================= */

#datos-page .datos-classification-grid .datos-clasif-number-cell {
  justify-content: center !important;
  font-weight: 750;
  color: rgba(255,255,255,.86);
}

#datos-page .datos-classification-grid .datos-clasif-win-cell {
  justify-content: center !important;
  color: rgba(74, 222, 128, .98) !important;
  font-weight: 900 !important;
}

#datos-page .datos-classification-grid .datos-clasif-draw-cell {
  justify-content: center !important;
  color: rgba(250, 204, 21, .98) !important;
  font-weight: 900 !important;
}

#datos-page .datos-classification-grid .datos-clasif-loss-cell {
  justify-content: center !important;
  color: rgba(251, 146, 60, .98) !important;
  font-weight: 900 !important;
}

#datos-page .datos-classification-grid .datos-clasif-gf,
#datos-page .datos-classification-grid .datos-clasif-gf-cell {
  justify-content: center !important;
  color: rgba(74, 222, 128, .98) !important;
  font-weight: 950 !important;
}

#datos-page .datos-classification-grid .datos-clasif-gc,
#datos-page .datos-classification-grid .datos-clasif-gc-cell {
  justify-content: center !important;
  color: rgba(248, 113, 113, .98) !important;
  font-weight: 950 !important;
}

#datos-page .datos-classification-grid .datos-clasif-dg,
#datos-page .datos-classification-grid .datos-clasif-dg-cell {
  justify-content: center !important;
  font-weight: 950 !important;
}

#datos-page .datos-classification-grid .datos-clasif-dg-pos {
  color: rgba(74, 222, 128, .98) !important;
  font-weight: 950;
}

#datos-page .datos-classification-grid .datos-clasif-dg-neg {
  color: rgba(248, 113, 113, .98) !important;
  font-weight: 950;
}

#datos-page .datos-classification-grid .datos-clasif-dg-zero {
  color: rgba(255,255,255,.72) !important;
  font-weight: 850;
}

#datos-page .datos-classification-grid .datos-clasif-coef-cell {
  justify-content: center !important;
  color: rgba(216, 180, 254, .96);
  font-weight: 850;
}

#datos-page .datos-classification-grid .datos-clasif-sanction-cell {
  justify-content: center !important;
  color: rgba(248, 113, 113, .95);
  font-weight: 850;
}


/* =========================================================
   DATOS · clasificación puntos
   ========================================================= */

#datos-page .datos-classification-grid .datos-clasif-points,
#datos-page .datos-classification-grid .datos-clasif-points-cell {
  justify-content: center !important;
  color: rgba(250, 204, 21, .98);
  font-weight: 950;
}

#datos-page .datos-classification-grid .datos-clasif-points-badge {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), rgba(255,255,255,.065));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 14px rgba(0,0,0,.20);
}


/* =========================================================
   DATOS · clasificación racha
   ========================================================= */

#datos-page .datos-classification-grid .datos-clasif-racha-cell {
  justify-content: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  overflow: visible !important;
}

#datos-page .datos-classification-grid .datos-clasif-racha-cell .ag-cell-value {
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}

#datos-page .datos-classification-grid .datos-clasif-racha-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: max-content;
  padding: 0 4px;
  box-sizing: border-box;
  overflow: visible;
}

#datos-page .datos-classification-grid .datos-clasif-racha-badge {
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 10px rgba(0,0,0,.18);
}

#datos-page .datos-classification-grid .datos-clasif-racha-g {
  background: rgba(34,197,94,.26);
  border-color: rgba(74,222,128,.42);
  color: rgba(187,247,208,1);
}

#datos-page .datos-classification-grid .datos-clasif-racha-e {
  background: rgba(250,204,21,.24);
  border-color: rgba(250,204,21,.45);
  color: rgba(254,240,138,1);
}

#datos-page .datos-classification-grid .datos-clasif-racha-p {
  background: rgba(248,113,113,.24);
  border-color: rgba(248,113,113,.45);
  color: rgba(254,202,202,1);
}

#datos-page .datos-classification-grid .datos-clasif-racha-empty {
  opacity: .55;
  font-size: 12px;
}


/* =========================================================
   DATOS · clasificación filas destacadas
   ========================================================= */

#datos-page .datos-classification-grid .ag-row.datos-clasif-row-top4 .ag-cell {
  background: linear-gradient(
    90deg,
    rgba(34,197,94,.075) 0%,
    rgba(34,197,94,.030) 42%,
    rgba(255,255,255,.018) 100%
  ) !important;
}

#datos-page .datos-classification-grid .ag-row.datos-clasif-row-bottom .ag-cell {
  background: linear-gradient(
    90deg,
    rgba(248,113,113,.080) 0%,
    rgba(248,113,113,.030) 42%,
    rgba(255,255,255,.018) 100%
  ) !important;
}

#datos-page .datos-classification-grid .ag-row.datos-clasif-row-champion .ag-cell {
  background: linear-gradient(
    90deg,
    rgba(250, 204, 21, .155) 0%,
    rgba(250, 204, 21, .060) 42%,
    rgba(255,255,255,.025) 100%
  ) !important;
  border-top: 1px solid rgba(250,204,21,.22);
  border-bottom: 1px solid rgba(250,204,21,.18);
}

#datos-page .datos-classification-grid .ag-row.datos-clasif-row-champion .datos-clasif-pos-cell {
  color: rgba(250,204,21,1) !important;
}

#datos-page .datos-classification-grid .ag-row-hover .ag-cell {
  background-color: rgba(255,255,255,.075) !important;
}


/* =========================================================
   DATOS · clasificación selector modo
   ========================================================= */

#datos-page .datos-classif-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 20px rgba(0,0,0,.12);
}

#datos-page .datos-classif-mode-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.68);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

#datos-page .datos-classif-mode-btn:hover {
  color: white;
  background: rgba(255,255,255,.07);
}

#datos-page .datos-classif-mode-btn.is-active {
  color: white;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 5px 14px rgba(0,0,0,.14);
}

#datos-page .datos-classif-mode-btn:active {
  transform: translateY(1px);
}


/* =========================================================
   DATOS · clasificación scrollbars
   ========================================================= */

#datos-page .datos-classification-grid .ag-icon,
#datos-page .datos-classification-grid .ag-header-icon {
  opacity: .72;
}

#datos-page .datos-classification-grid .ag-body-horizontal-scroll,
#datos-page .datos-classification-grid .ag-body-vertical-scroll {
  background: rgba(0,0,0,.10);
}

#datos-page .datos-classification-grid ::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

#datos-page .datos-classification-grid ::-webkit-scrollbar-track {
  background: rgba(255,255,255,.025);
}

#datos-page .datos-classification-grid ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}

#datos-page .datos-classification-grid ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.24);
}














/* =========================================================
   DATOS · clasificación clicable hacia equipo
   ========================================================= */

#datos-page .datos-classification-grid .ag-row {
  cursor: pointer;
}

#datos-page .datos-classification-grid .ag-row:hover .datos-clasif-team-cell {
  color: white !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#datos-page .datos-classification-grid .ag-row:hover .datos-clasif-pos-cell,
#datos-page .datos-classification-grid .ag-row:hover .datos-clasif-logo-cell,
#datos-page .datos-classification-grid .ag-row:hover .datos-clasif-team-cell {
  background: rgba(255,255,255,.065) !important;
}

#datos-page .datos-classification-grid .ag-row.ag-row-selected .ag-cell {
  background: color-mix(
    in srgb,
    var(--datos-league-accent, rgba(255,255,255,.35)) 22%,
    rgba(255,255,255,0.06)
  ) !important;
}