/*FIGMA*/
:root {
  --black: #000000;
  --white: #FFFFFF;
  --quaternary: #666666;
  --primary: #E30613;
  --background-lightGrey: #F2F2F2;
  --background-mediumGrey: #CCCCCC;
  --color-league-1: #4285F4;
  --color-league-2: #FA7B17;
  --color-league-3: #34A853;
  --color-relegation: var(--primary);
  --font-regular:'RobotoRegular', 'ArizonaSans', 'CommonsRegular', sans-serif;
  --font-bold: 'RobotoBold', 'ArizonaText', CommonsDemiBold2, sans-serif;
  /* --font-regular:'RobotoRegular', 'CommonsRegular', 'Inter', 'Heebo-Regular', 'ArizonaSans', sans-serif;
  --font-bold: 'RobotoBold', CommonsDemiBold2, 'Inter', 'ArizonaText', 'Heebo-Bold', sans-serif; */
}

/* Utility Classes */
.table-hidden {
  display: none;
}
/* / Utility Classes */

/* Table Ranking (Clasificación) */
.table-header,
.table-ranking,
.table-footer {
  font-family: var(--font-regular);
}

.table-header img,
.table-ranking img,
.table-footer img {
  width: auto;
}

.table-header {
  margin-bottom: 20px;
}

.table-header__league-pretitle {
  margin: 16px 0;
  font-family: var(--font-bold);
  font-size: 32px;
}

.table-header__menu {
  display: flex;
  margin: 10px 0;
  border-bottom: 1px solid var(--background-mediumGrey);
  overflow-x: auto;
}

.table-header__menu-link {
  display: inline-block;
  padding: 10px 14px;
  color: var(--quaternary);
  font-family: var(--font-bold);
  font-size: 16px;
  text-decoration: none;
  transition: all .3s ease;
}

.table-header__menu-link:hover,
.table-header__menu-link--active {
  color: var(--c-sport-brand, var(--c-brand, var(--c-epe-brand, var(--primary))));
  border-bottom: 4px solid var(--c-sport-brand, var(--c-brand, var(--c-epe-brand, var(--primary))));

}

.table-header__index {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/*
  --- AVISO ---
  Añadimos !important en los bloques del select, ya que las medias tienen
  varios estilos aplicados a los formularios que chafan los valores por defecto.
*/
.table-header__selector {
  padding: 0 !important;
  padding-right: 30px !important;
  color: var(--black) !important;
  border: 0 !important;
  font-family: var(--font-regular) !important;
  font-size: 14px !important;
  font-weight: normal !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2014%2014'%3E%3Cpath%20d%3D'M7,10.9c-0.2,0-0.5-0.1-0.7-0.3l-6-5.9c-0.4-0.4-0.4-0.9,0-1.3l0,0c0.4-0.3,1-0.3,1.3,0L7,8.8l5.4-5.3%20c0.4-0.4,0.9-0.4,1.3,0l0,0c0.4,0.4,0.4,0.9,0,1.3l-6,5.9C7.5,10.8,7.2,10.9,7,10.9L7,10.9z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}

.table-header__selector option {
  padding: 10px 0 !important;
  font-family: var(--font-regular) !important;
  font-size: 14px !important;
}
/*
  Fin de bloques select con !important
*/

.table-header__title {
  margin: 8px 0 !important;
  font-size: 24px !important;
}

.table-header__date {
  font-size: 14px;
  color: var(--quaternary);
}

.table-header__live {
  margin-right: 6px;
  position: relative;
  color: var(--primary);
}

.table-header__live-icon {
  display: inline-block;
  margin-right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  -webkit-animation: blink 1.5s infinite;
  animation: blink 1.5s infinite;
}

.table-header__sorter {
  margin: 14px 0;
  display: flex;
  gap: 16px;
}

.table-header__sorter-item {
  cursor: pointer;
  padding: 5px 15px;
  font-family: var(--font-regular);
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  border: 1px solid var(--background-mediumGrey);
  border-radius: 5px;
  transition: all .3s ease;
}

.table-header__sorter-item:hover {
  color: var(--c-sport-brand, var(--c-brand, var(--c-epe-brand, var(--primary))));
  border-color: var(--c-sport-brand, var(--c-brand, var(--c-epe-brand, var(--primary))));
}
.table-header__sorter-item--active {
  color: var(--c-sport-brand, var(--c-brand, var(--c-epe-brand, var(--primary))));
  font-family: var(--font-bold);
  border-color: var(--c-sport-brand, var(--c-brand, var(--c-epe-brand, var(--primary))));
}

.table-ranking-container {
  position: relative;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.table-ranking {
  width: 100%;
  font-size: 14px;
  text-align: center;
  color: var(--quaternary);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.table-ranking,
.table-ranking__body-cell {
  border-collapse: collapse;
}

.table-ranking__body .table-ranking__row {
  position: relative;
  border-left: 1px solid var(--background-lightGrey);
  border-right: 1px solid var(--background-lightGrey);
  border-bottom: 1px solid var(--background-lightGrey);
}

.table-ranking__head-cell,
.table-ranking__body-cell {
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
}

.table-ranking__head-cell {
  background-color: var(--background-lightGrey);
  border-bottom: 1px solid var(--background-mediumGrey);
}

.table-ranking__body-cell {
  vertical-align: middle;
}


.table-ranking__teams,
.table-ranking__position,
.table-ranking__team {
  text-align: left;
}

.table-ranking__teams {
  border-right: 1px solid var(--background-mediumGrey);
}

.table-ranking__position,
.table-ranking__points,
.table-ranking__team-link,
.table-ranking__team-score,
.table-last-five__title {
  color: var(--black);
  font-family: var(--font-bold);
}

.table-ranking__position {
  width: 17px;
}

.table-ranking__position--league-1::before,
.table-ranking__position--league-2::before,
.table-ranking__position--league-3::before,
.table-ranking__position--relegation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
}

.table-ranking__position--league-1::before {
  background-color: var(--color-league-1);
}

.table-ranking__position--league-2::before {
  background-color: var(--color-league-2);
}

.table-ranking__position--league-3::before {
  background-color: var(--color-league-3);
}

.table-ranking__position--relegation::before {
  background-color: var(--color-relegation);
}

.table-ranking__team-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.table-ranking__team-link {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.table-ranking__team-text {
  font-size: 14px;
  white-space: nowrap;
}

.table-ranking__team-shield {
  display: inline-block;
  width: 20px !important;
  height: 20px;
}

.table-ranking__team-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.table-ranking__team-situation {
  margin-right: 6px;
}

.table-ranking__team-score {
  display: flex;
  align-items: center;
  padding: 2px 5px;
  background-color: var(--background-mediumGrey);
  border-radius: 5px;
}

.table-ranking__team-score--win {
  color: var(--white);
  background-color: #00852C;
}

.table-ranking__team-score--lose {
  color: var(--white);
  background-color: #E30613;
}

.table-ranking__body-cell.table-ranking__last-five {
  /* Ocultamos este elemento de forma temporal */
  /* display: none; */
  /* Modificamos el padding superior para no alterar más
  el flujo de tabla ni añadir divs adicionales */
  padding: 13px 10px 10px;
  display: flex;
  gap: 2px;
  justify-content: center;
}

.table-ranking__last-five-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  width: 16px;
  background-color: #9AA0A6;
  border-radius: 50%;
}

.table-ranking__last-five-icon--win {
  background-color: #3AA757;
}

.table-ranking__last-five-icon--lose {
  background-color: #EA4335;
}

.table-ranking__last-five-icon--pending {
  background-color: #FFFFFF;
  border: 2px solid #9AA0A6;
}

.table-ranking__last-five-icon--pending img {
  display: none;
}

.table-footer {
  display: flex;
  gap: 40px;
  margin-top: 20px;
  font-family: var(--font-regular);
  font-size: 14px;
}

.table-legend__item {
  margin-top: 0;
  margin-bottom: 4px;
  position: relative;
  padding-left: 20px;
  line-height: 22px;
}

.table-legend__item::before {
  position: absolute;
  left: 0;
  top: 2px;
  content: '';
  height: 12px;
  width: 12px;
  border-radius: 50%;
}

.table-legend__item--league-1::before {
  background-color: var(--color-league-1);
}

.table-legend__item--league-2::before {
  background-color: var(--color-league-2);
}

.table-legend__item--league-3::before {
  background-color: var(--color-league-3);
}

.table-legend__item--relegation::before {
  background-color: var(--color-relegation);
}

.table-last-five__title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 14px;
}
 
.table-last-five__item {
  display: flex;
  gap: 5px;
  margin-bottom: 4px;
  line-height: 22px;
}
/* / Table Ranking (Clasificación) */

/* Media Queries */
@media screen and (max-width: 480px) {
  .table-ranking-container {
    overflow-y: auto;
  }

  .table-header__league-pretitle {
    font-size: 24px;
  }

  .table-header__title {
    font-size: 20px;
  }

  .table-header__date,
  .table-footer {
    font-size: 12px;
  }  

  .table-header__menu-link {
    padding: 10px 8px;
  }

  .table-ranking__teams,
  .table-ranking__team {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .table-ranking__team-wrapper {
    width: 150px;
  }

  .table-ranking__team-link {
    overflow: hidden;
  }

  .table-ranking__body-cell {
    background-color: var(--white);

  }

  .table-ranking__team-text {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .table-footer {
    flex-direction: column;
    gap: 10px;
  }

  .table-legend__item,
  .table-last-five__item {
    line-height: 20px;
  }
}
/* / Media Queries */

/* Keyframes */
@keyframes blink {
  0% {
    background-color: #fff;
  }
  49% {
    background-color: #fff;
  }
  50% {
    background-color: #E00025;
  }
  100% {
    background-color: #E00025;
  }
}
/* / Keyframes */