/* =========================================================
   DATOS · Tab Partidos · estilo tipo clasificación
   ========================================================= */


/* =========================================================
   CARD CONTENEDORA
   ========================================================= */

#datos-page .datos-league-matches-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: white;
}

#datos-page .datos-league-matches-card,
#datos-page .datos-league-matches-card * {
  box-sizing: border-box;
}


/* =========================================================
   AG GRID BASE
   ========================================================= */

#datos-page .datos-matches-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;

  /* Separación respecto a la barra de jornadas */
  margin-top: 14px;

  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-matches-grid .ag-root-wrapper {
  border-radius: 16px;
  overflow: hidden;
  border: none;
  background: rgba(255,255,255,.025);
}

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


/* =========================================================
   HEADERS
   ========================================================= */

#datos-page .datos-matches-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-matches-grid .ag-header-cell,
#datos-page .datos-matches-grid .ag-header-group-cell {
  font-weight: 850;
  letter-spacing: .2px;
  border-right: 1px solid rgba(255,255,255,.05);
}

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

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

#datos-page .datos-matches-grid .datos-match-group-match {
  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-matches-grid .datos-match-group-local {
  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-matches-grid .datos-match-group-score {
  background:
    linear-gradient(
      180deg,
      rgba(250,204,21,.16) 0%,
      rgba(250,204,21,.055) 100%
    );
  border-left: 1px solid rgba(250,204,21,.22);
}

#datos-page .datos-matches-grid .datos-match-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-matches-grid .datos-match-group-context {
  background:
    linear-gradient(
      180deg,
      rgba(168,85,247,.14) 0%,
      rgba(168,85,247,.045) 100%
    );
  border-left: 1px solid rgba(168,85,247,.18);
}

#datos-page .datos-matches-grid .datos-match-group-code {
  background:
    linear-gradient(
      180deg,
      rgba(148,163,184,.13) 0%,
      rgba(148,163,184,.040) 100%
    );
  border-left: 1px solid rgba(148,163,184,.16);
}


/* =========================================================
   CELDAS BASE
   ========================================================= */

#datos-page .datos-matches-grid .ag-row {
  cursor: default;
}

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

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

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

#datos-page .datos-matches-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;
}


/* =========================================================
   PARTIDO · JORNADA / FECHA / HORA
   ========================================================= */

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

#datos-page .datos-matches-grid .datos-match-jornada-name-cell {
  justify-content: center !important;
  color: rgba(255,255,255,.70);
  font-size: 11px;
  font-weight: 750;
}

#datos-page .datos-matches-grid .datos-match-date-cell {
  justify-content: center !important;
  color: rgba(255,255,255,.90);
  font-size: 12px;
  font-weight: 850;
}

#datos-page .datos-matches-grid .datos-match-time-cell {
  justify-content: center !important;
  color: rgba(125,211,252,.96);
  font-size: 12px;
  font-weight: 900;
}


/* =========================================================
   ESCUDOS
   ========================================================= */

#datos-page .datos-matches-grid .datos-match-logo-cell {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

#datos-page .datos-matches-grid .datos-match-logo-cell .ag-cell-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

#datos-page .datos-matches-grid .datos-img-circle-renderer,
#datos-page .datos-matches-grid .datos-match-logo-cell img {
  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);

  display: block !important;
}

#datos-page .datos-matches-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);

  color: white;
  font-size: 15px;
  font-weight: 850;
}


/* =========================================================
   EQUIPOS
   ========================================================= */

#datos-page .datos-matches-grid .datos-match-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-matches-grid .datos-match-team-cell .ag-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#datos-page .datos-matches-grid .datos-match-team-local-cell {
  color: rgba(220,252,231,.98) !important;
}

#datos-page .datos-matches-grid .datos-match-team-away-cell {
  color: rgba(219,234,254,.98) !important;
}


/* =========================================================
   GOLES / RESULTADO
   ========================================================= */

#datos-page .datos-matches-grid .datos-match-goals-cell {
  justify-content: center !important;

  font-size: 14px;
  font-weight: 950 !important;

  color: rgba(255,255,255,.94);
}

#datos-page .datos-matches-grid .datos-match-goals-local-cell {
  color: rgba(74,222,128,.98) !important;
}

#datos-page .datos-matches-grid .datos-match-goals-away-cell {
  color: rgba(96,165,250,.98) !important;
}

#datos-page .datos-matches-grid .datos-match-result-cell {
  justify-content: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#datos-page .datos-matches-grid .datos-match-result-cell .ag-cell-value {
  width: auto;

  min-width: 62px;
  min-height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;

  border-radius: 999px;

  color: white;

  font-size: 13px;
  font-weight: 950;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.20);

  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,.14),
    0 5px 14px rgba(0,0,0,.18);
}


/* =========================================================
   CONTEXTO · CAMPO / ÁRBITRO
   ========================================================= */

#datos-page .datos-matches-grid .datos-match-field-cell,
#datos-page .datos-matches-grid .datos-match-ref-cell {
  justify-content: flex-start !important;

  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 650;
}

#datos-page .datos-matches-grid .datos-match-field-cell .ag-cell-value,
#datos-page .datos-matches-grid .datos-match-ref-cell .ag-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#datos-page .datos-matches-grid .datos-match-field-cell {
  color: rgba(255,255,255,.82);
}

#datos-page .datos-matches-grid .datos-match-ref-cell {
  color: rgba(255,255,255,.66);
}


/* =========================================================
   ESTADO
   ========================================================= */

#datos-page .datos-matches-grid .datos-match-status-cell {
  justify-content: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#datos-page .datos-matches-grid .datos-match-status-cell .ag-cell-value {
  width: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 86px;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  line-height: 1;

  color: rgba(255,255,255,.78);

  background: rgba(255,255,255,.060);
  border: 1px solid rgba(255,255,255,.12);
}

#datos-page .datos-matches-grid .ag-row.datos-match-row-finalizado .datos-match-status-cell .ag-cell-value {
  color: rgba(187,247,208,1);
  background: rgba(34,197,94,.18);
  border-color: rgba(74,222,128,.32);
}

#datos-page .datos-matches-grid .ag-row.datos-match-row-pendiente .datos-match-status-cell .ag-cell-value {
  color: rgba(254,240,138,1);
  background: rgba(250,204,21,.16);
  border-color: rgba(250,204,21,.30);
}


/* =========================================================
   CÓDIGOS / ACTA
   ========================================================= */

#datos-page .datos-matches-grid .datos-match-code-cell {
  justify-content: center !important;

  color: rgba(255,255,255,.56);

  font-size: 11px;
  font-weight: 750;
}

#datos-page .datos-matches-grid .datos-match-acta-cell {
  color: rgba(216,180,254,.92);
  font-weight: 850;
}


/* =========================================================
   FILAS DESTACADAS
   ========================================================= */

#datos-page .datos-matches-grid .ag-row.datos-match-row-finalizado .ag-cell {
  background:
    linear-gradient(
      90deg,
      rgba(34,197,94,.040) 0%,
      rgba(34,197,94,.018) 42%,
      rgba(255,255,255,.010) 100%
    );
}

#datos-page .datos-matches-grid .ag-row.datos-match-row-pendiente .ag-cell {
  background:
    linear-gradient(
      90deg,
      rgba(250,204,21,.045) 0%,
      rgba(250,204,21,.018) 42%,
      rgba(255,255,255,.010) 100%
    );
}

#datos-page .datos-matches-grid .ag-row-hover .datos-match-team-cell {
  color: white !important;
}

#datos-page .datos-matches-grid .ag-row-hover .datos-match-result-cell .ag-cell-value {
  border-color: rgba(255,255,255,.32);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px rgba(0,0,0,.22),
    0 0 16px rgba(255,255,255,.05);
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

#datos-page .datos-matches-grid .ag-paging-panel {
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.030);
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
}

#datos-page .datos-matches-grid .ag-paging-button {
  color: rgba(255,255,255,.78);
}

#datos-page .datos-matches-grid .ag-paging-button:hover {
  color: white;
}


/* =========================================================
   ICONOS / SCROLLBARS
   ========================================================= */

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

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

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

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

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

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


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  #datos-page .datos-matches-grid {
    --ag-font-size: 11px;
    margin-top: 12px;
  }

  #datos-page .datos-matches-grid .datos-match-result-cell .ag-cell-value {
    min-width: 56px;
    padding: 6px 8px;
    font-size: 12px;
  }

  #datos-page .datos-matches-grid .datos-match-status-cell .ag-cell-value {
    min-width: 78px;
    padding: 6px 8px;
    font-size: 10px;
  }
}











#datos-page .datos-matches-grid .datos-match-team-cell,
#datos-page .datos-matches-grid .datos-match-logo-cell {
  cursor: pointer;
}

#datos-page .datos-matches-grid .datos-match-team-cell:hover {
  color: white !important;
  text-decoration: underline;
}

#datos-page .datos-matches-grid .datos-match-logo-cell:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.22));
}





.datos-match-click-team-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.datos-match-click-team-btn:hover {
    color: white;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.datos-match-click-logo-btn {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.datos-match-click-logo-btn:hover {
    transform: scale(1.08);
}

.datos-match-click-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 999px;
}

.datos-match-click-logo-fallback {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 10px;
    font-weight: 900;
}