/* Variables */
:root {
  --color-button-active: rgb(103, 232, 249);
  --color-button-hover: rgb(181, 239, 245);
  --color-letters: rgb(242, 237, 178);
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);

  --color-good: rgb(46, 217, 217);
  --color-fair: rgb(80, 134, 139);
  --color-moderate: rgb(252, 186, 3);
  --color-poor: rgb(239, 97, 85);
  --color-very-poor: rgb(139, 44, 52);
  --color-extremely-poor: rgb(94, 48, 217);
}

/***********************************/
/******** Estilos generales ********/
/***********************************/
html,
body {
  max-width: 1440px;
  margin: 0 auto;
  background: transparent !important;
}

body {
  font-family: "Poppins", sans-serif;
}

button.btn {
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/***********************************/
/************ Contenido ************/
/***********************************/
.content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 2em;
  margin-top: 3em;
  padding: 2em 0;
}

.left-half {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, auto);
  row-gap: 2em;
  justify-content: end;
}

.right-half {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, auto);
  row-gap: 2em;
  justify-content: center;
}

/***********************************/
/************* Iconos **************/
/***********************************/
.team-logo {
  width: 4rem;
}

.header-icon {
  height: 5rem;
}

/***********************************/
/******** Botones de Gases *********/
/***********************************/
.gas-button-group {
  display: flex;
  gap: 24px;
  z-index: 10;
  justify-self: center;
}

.gas-filter-button {
  width: 6rem;
  height: 4.5rem;
  background-color: var(--color-white);
  border: 8px solid black;
  border-radius: 20px;
  font-weight: 700;
  transition:
    background-color 1.2s ease,
    transform 1.2s ease;
  font-size: larger;
  padding: 0;
}

.gas-filter-button:not(.active):hover {
  background-color: var(--color-button-hover);
  transform: scale(1.1);
}

.gas-filter-button.active {
  background: var(--color-button-active);
  transform: scale(1.1);
}

.gas-filter-button:focus-visible {
  outline: 2px dashed #000;
  outline-offset: 3px;
}

.gas-filter-button:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}

.gas-filter-button:disabled:hover {
  background-color: var(--color-white);
  transform: none;
}

.gas-filter-button:disabled:focus-visible {
  outline: none;
}

/***********************************/
/******** Título champions *********/
/***********************************/
.champions-title {
  font-family: "SwungNote";
  font-size: 67px;
  line-height: 1;
  color: var(--color-letters);
  text-shadow:
    -6px -6px 0 #000,
    6px -6px 0 #000,
    -6px 6px 0 #000,
    6px 6px 0 #000,
    -6px 0px 0 #000,
    6px 0px 0 #000,
    0px -6px 0 #000,
    0px 6px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000,
    3px 3px 0 #000 !important;
  letter-spacing: -0.64px;
  align-items: center;
  justify-self: center;
}

/***********************************/
/************ Leyenda **************/
/***********************************/
.floating-legend {
  position: relative;
  overflow: visible;
  width: 24rem;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  z-index: 10;
  border: 8px solid black;
  border-radius: 20px;
  background: var(--color-white);
  justify-self: center;
  align-self: start;
}

.floating-legend::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 33.6px;
  width: 124.8px;
  height: 16px;
  background: var(--color-white);
  z-index: 15;
}

.legend-table {
  margin-top: 1rem;
  display: grid;
  grid-template-rows: repeat(2, 2fr);
  grid-template-columns: repeat(3, 1fr);
}

.legend-title {
  font-size: 1.2em;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-item img {
  width: 2rem;
}

.legend-item span {
  font-size: 1rem;
  font-weight: 700;
}

.legend-tooltip {
  position: absolute;
  padding: 4.8px 9.6px;
  bottom: -20.8px;
  right: 38.4px;
  z-index: 20;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 1rem;
  border-radius: 20px;
  font-weight: 700;
  transition: transform 1.2s ease;
}

.legend-tooltip:hover {
  transform: scale(1.1);
}

/***********************************/
/********** Nube flotante **********/
/***********************************/
.floating-logo {
  height: 5rem;
  position: absolute;
  bottom: 2em;
}

/***********************************/
/************** Tabla **************/
/***********************************/
#table-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 0fr auto;
  transition: grid-template-rows 0.3s ease;
  width: 100%;
}

#table-wrapper>* {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
}

#table-wrapper.is-detailed {
  grid-template-rows: 0fr auto auto;
}

#table-body {
  width: 100%;
}

.table-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 96px 220px 220px 160px;
  align-items: stretch;
  border: 3px solid transparent;
  justify-self: stretch;
  align-self: stretch;
  column-gap: 16px;
}

.table-row-normal {
  opacity: 0;
  transform: translateY(0px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.table-row-normal.visible {
  opacity: 1;
  transform: translateY(8px);
}

#table-wrapper.is-detailed .table-row-normal {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.table-row-normal:hover {
  border: 3px solid var(--color-black);
  border-radius: 20px;
}

.table-row .cell {
  padding: 4px 0px;
}

.table-row.detailed {
  grid-template-columns: 60px 96px 600px;
}

.table-row.detailed .detailed-cell {
  grid-column: 3 / 6;
  justify-content: flex-start;
}

#table-body .table-row.detailed {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#table-wrapper.is-detailed .table-row.detailed {
  opacity: 1;
  transform: translateY(0);
}

/***********************************/
/********** Cabecera Tabla *********/
/***********************************/
#table-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

#table-wrapper.is-detailed #table-header {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

#stadium-header {
  border-top: 0.2rem solid transparent;
  border-left: 0.2rem solid transparent;
}

#community-header {
  border-top: 0.2rem solid transparent;
}

#aqi-header {
  border-top: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
}

#table-header-detailed {
  text-align: center;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-8px);

  transition: opacity 0.3s ease, transform 0.3s ease;
}

#table-wrapper.is-detailed #table-header-detailed {
  opacity: 1;
  transform: translateY(0);
}

/***********************************/
/********** View all weeks *********/
/***********************************/
.view-all-weeks {
  border: 4px solid black;
  border-radius: 20px;
  padding: 8px;
  transition: transform 1.2s ease;
}

.view-all-weeks:hover {
  transform: scale(1.1);
}


/***********************************/
/************** Celdas *************/
/***********************************/
.cell {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.cell-header {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cell-subheader {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  margin-top: 2rem;
}

/***********************************/
/** Botón cierre tabla detallada ***/
/***********************************/
#close-detailed-panel {
  position: absolute;
  top: 0;
  right: 2rem;
  font-size: 3rem;
  font-weight: bold;
  color: var(--color-black);
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  transition: transform 0.2s ease;
}

#close-detailed-panel:hover {
  transform: scale(1.2);
}

/***********************************/
/*********** Iconos AQI ************/
/***********************************/
.cell .aqi-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  pointer-events: auto;
}

.cell .aqi-cell .aqi-icon {
  display: block;
  width: 44px;
  height: 44px;
  transition: none;
  transform: none;
  cursor: default;
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
  will-change: transform;
}

.cell .aqi-cell .aqi-icon:hover {
  cursor: pointer;
  transform: scale(1.12) rotate(-72deg);
}

.cell .aqi-cell:last-child .aqi-icon {
  width: 66px;
  height: 66px;
}


/***********************************/
/************** Weeks **************/
/***********************************/
.weeks-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.weeks-track {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.weeks-track span {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1rem;
  width: 64px;
  gap: 4px;
}

.weeks-track> :last-child {
  font-weight: 700;
  width: 66px;
}

.weeks-track small {
  display: block;
  font-size: 0.6em;
}

/***********************************/
/***** Recuadro tabla detallada ****/
/***********************************/
#detailed-column-overlay {
  position: absolute;
  border: 8px solid var(--color-black);
  border-radius: 20px;
  pointer-events: none;
  z-index: 10;

  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);

  transition:
    opacity 1s ease,
    transform 1s ease,
    visibility 0s linear;

  transition-delay:
    0s,
    0s,
    0.3s;

  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}

#detailed-column-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);

  transition-delay:
    0s,
    0s,
    0s;
}

/***********************************/
/************* Slider **************/
/***********************************/
#slider-table-wrapper {
  position: absolute;
  bottom: 1em;
  left: 0;
  width: 100%;
  padding: 0 2em;

  pointer-events: auto;
  z-index: 20;

  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#table-wrapper.is-detailed #slider-table-wrapper {
  opacity: 1;
  transform: translateY(0);
}

.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

/* La bolita que se arrastra */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3.5rem;
  height: 1rem;
  margin-top: -0.3rem;
  background: var(--color-black);
  cursor: pointer;
  border-radius: 2rem;
  position: relative;
}

/* La bolita que se arrastra (Firefox) */
.slider::-moz-range-thumb {
  width: 3.5rem;
  height: 1rem;
  background: var(--color-black);
  cursor: pointer;
  border-radius: 2rem;
  border: none;
}

/* La pista (track) */
.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: var(--color-black);
  border-radius: 3px;
}

/* La pista (track) (Firefox) */
.slider::-moz-range-track {
  width: 100%;
  height: 6px;
  background: var(--color-black);
  border-radius: 3px;
}

#slider-detailed-view-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  padding-right: 2rem;
}

.slider-arrow {
  font-size: 20px;
  color: var(--color-black);
  cursor: pointer;
  user-select: none;
}

/***********************************/
/************ Tooltip **************/
/***********************************/
#aqi-tooltip {
  position: absolute;
  background: white;
  border: 6px solid black;
  border-radius: 20px;
  padding: 1.2rem 1.5rem;
  z-index: 100000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}

#aqi-tooltip.show {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
}

.aqi-tooltip-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.p-row {
  display: contents;
}

.p-row.col-pol {
  font-size: small;
}

.p-row.header span {
  font-weight: 700;
  font-size: small;
  text-transform: uppercase;
}

.p-row:not(:first-child) span {
  font-size: small;
}

.col-pol {
  justify-content: flex-start;
  display: flex;
  align-items: center;
}

.col-aqi {
  justify-content: center;
  text-align: center;
}

.col-val {
  justify-content: flex-end;
  display: flex;
  align-items: center;
}

.aqi-icon-tooltip {
  width: 2rem;
}

.aqi-tooltip-arrow-white {
  position: absolute;
  width: 0;
  height: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--color-white);
  z-index: 50;
}

.aqi-tooltip-arrow-black {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--color-black);
}

/***********************************/
/********* Legend Overlay **********/
/***********************************/
#legend-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#legend-overlay.show {
  display: grid !important;
}

#legend-modal {
  background: var(--color-white);
  border: 10px solid black;
  border-radius: 20px;
  padding: 1rem;
  overflow-y: auto;
  position: relative;
  width: clamp(320px, 58vw, 1024px);
  height: clamp(440px, 58vh, 840px);
}

#legend-modal .calculations-content table td {
  white-space: nowrap;
}

.legend-header {
  display: flex;
  justify-content: space-between;
}

.legend-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--color-black);
}

.legend-tab {
  padding: 0.8rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: -3px;
}

.legend-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}

.legend-tab.active {
  border-bottom-color: var(--color-button-active);
  color: var(--color-black);
}

.legend-close {
  position: absolute;
  top: 0;
  right: 0.4rem;
  font-size: 3rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.calculations-container .explanation-pollutants tr {
  border-bottom: 1px solid;
}

#legend-modal::-webkit-scrollbar {
  width: 10px;
}

#legend-modal::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

#legend-modal::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom,
      transparent 0%,
      transparent 35%,
      rgba(120, 120, 120, 0.6) 35%,
      rgba(120, 120, 120, 0.6) 65%,
      transparent 65%,
      transparent 100%);
  border-radius: 999px;
}

#legend-modal::-webkit-scrollbar-thumb:hover,
#legend-modal::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(to bottom,
      transparent 0%,
      transparent 28%,
      rgba(90, 90, 90, 0.8) 28%,
      rgba(90, 90, 90, 0.8) 72%,
      transparent 72%,
      transparent 100%);
}

/***********************************/
/************* Spinner *************/
/***********************************/
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ddd;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/***********************************/
/************* MEDIAS **************/
/***********************************/
@media (max-width: 1023px) {}

@media (max-width: 767px) {

  /***********************************/
  /************ Tooltip **************/
  /***********************************/
  #aqi-tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1.6rem 1.6rem;
    background: rgba(255, 255, 255, 0.97);
  }

  /* Ocultar flechas */
  .aqi-tooltip-arrow-white,
  .aqi-tooltip-arrow-black {
    display: none;
  }

}

@media (max-width: 479px) {
  .content {
    position: unset;
    padding: 1rem;
    grid-template-columns: 1fr;
    max-width: 100%;
    box-sizing: border-box;
  }

  .left-half {
    justify-content: center;
  }

  .floating-legend {
    width: 20rem;
    margin-top: 16em;
  }

  .floating-legend::after {
    width: 88.8px;
  }

  .gas-button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    column-gap: 46px;
    row-gap: 1em;
    margin-top: 1em;
  }

  .gas-filter-button {
    width: 5em;
    font-size: medium;
  }

  .champions-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    align-items: center;
    justify-self: center;
  }

  .legend-title {
    font-size: 0.8em;
  }

  .legend-item span {
    font-size: 0.6em;
  }

  .legend-tooltip {
    font-size: 0.6em;
  }

  /***********************************/
  /************** Tabla **************/
  /***********************************/
  #table-wrapper {
    margin-top: 2em;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #table-wrapper table {
    width: max-content;
  }

  /***********************************/
  /************ Leyenda **************/
  /***********************************/
  #legend-modal {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;

    border-radius: 0;
    border: none;

    padding: 1rem;
  }

  .legend-tabs {
    margin: 18px 12px;
  }

  .legend-close {
    right: 0rem;
    font-size: 2.2rem;
  }

  #legend-modal-content {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .calculations-text {
    position: sticky;
    padding-bottom: 1rem;
  }

  .legend-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .legend-table-wrapper table {
    width: max-content;
    min-width: 700px;
  }


}