/* =========================================================
   A24 PROGRAMACIÓN WIDGET
   Versión 4.0
   ========================================================= */

#a24-programacion {
  --a24-red: #ed1c24;
  --a24-ink: #262626;
  --a24-muted: #8d8d8d;
  --a24-line: #dedede;
  --a24-live-bg: #fff7f7;

  width: 100%;

  margin-top: 32px;

  color: var(--a24-ink);
  background: transparent;

  font-family:
    "Roboto",
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   AISLAMIENTO
   ========================================================= */

#a24-programacion *,
#a24-programacion *::before,
#a24-programacion *::after {
  box-sizing: border-box;
}


/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

#a24-programacion .a24p-inner {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
}


/* =========================================================
   TÍTULO
   ========================================================= */

#a24-programacion .a24p-title {
  margin: 0;

  color: var(--a24-ink);

  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}


/* =========================================================
   BAJADA
   ========================================================= */

#a24-programacion .a24p-intro {
  margin: 14px 0 0;

  color: var(--a24-ink);

  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
}


/* =========================================================
   SELECTOR DE DÍAS
   ========================================================= */

#a24-programacion .a24p-days {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(90px, 1fr));

  gap: 30px;

  width: 100%;

  margin-top: 48px;

  overflow-x: auto;
  overflow-y: hidden;

  border-bottom:
    1px solid var(--a24-line);

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
}


#a24-programacion .a24p-days::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   BOTÓN DE CADA DÍA
   ========================================================= */

#a24-programacion .a24p-day {
  position: relative;

  min-width: 0;

  margin: 0;

  padding:
    0
    0
    24px;

  border: 0;
  border-radius: 0;

  outline: 0;

  background: transparent;

  color: #929292;

  font-family: inherit;

  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;

  text-align: left;

  text-transform: uppercase;

  white-space: nowrap;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}


#a24-programacion .a24p-day:hover {
  color: #555555;
}


#a24-programacion .a24p-day:focus-visible {
  outline:
    2px solid var(--a24-red);

  outline-offset: 3px;
}


/* =========================================================
   DÍA ACTIVO
   ========================================================= */

#a24-programacion .a24p-day.active {
  color: var(--a24-red);
}


#a24-programacion .a24p-day.active::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 50px;
  height: 2px;

  background: var(--a24-red);
}


/* =========================================================
   LISTADO DE PROGRAMACIÓN
   ========================================================= */

#a24-programacion .a24p-list {
  width: 100%;
}


/* =========================================================
   FILA DE PROGRAMA
   ========================================================= */

#a24-programacion .a24p-row {
  position: relative;

  display: grid;

  grid-template-columns:
    105px
    minmax(0, 1fr)
    auto;

  align-items: center;

  width: 100%;

  min-height: 69px;

  padding: 0;

  border-bottom:
    1px solid var(--a24-line);

  background: transparent;
}


/* =========================================================
   HORARIO
   ========================================================= */

#a24-programacion .a24p-time {
  color: var(--a24-muted);

  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}


/* =========================================================
   NOMBRE DEL PROGRAMA
   ========================================================= */

#a24-programacion .a24p-name {
  min-width: 0;

  color: var(--a24-ink);

  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;

  text-transform: uppercase;
}


/* =========================================================
   COLUMNA DERECHA
   ========================================================= */

#a24-programacion .a24p-meta {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  padding-left: 20px;

  white-space: nowrap;
}


/* =========================================================
   PROGRAMA EN VIVO
   ========================================================= */

#a24-programacion .a24p-row.live {
  background:
    linear-gradient(
      90deg,
      var(--a24-live-bg) 0%,
      #ffffff 100%
    );
}


/*
 * Línea roja lateral del programa en vivo
 */
#a24-programacion .a24p-row.live::before {
  content: "";

  position: absolute;

  left: -17px;
  top: 0;
  bottom: 0;

  width: 3px;

  background: var(--a24-red);
}


/* =========================================================
   LINK EN VIVO
   ========================================================= */

#a24-programacion .a24p-live {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  /*
   * Separación respecto del borde derecho
   */
  margin-right: 1rem;

  padding: 8px 0;

  border: 0;

  color: var(--a24-red);

  background: transparent;

  font-family: inherit;

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

  letter-spacing: 0.04em;

  text-decoration: none;

  text-transform: uppercase;

  cursor: pointer;
}


/*
 * Punto rojo EN VIVO
 */
#a24-programacion .a24p-live::before {
  content: "";

  display: block;

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--a24-red);
}


#a24-programacion .a24p-live:hover {
  color: #c90008;

  text-decoration: underline;
}


#a24-programacion .a24p-live:focus-visible {
  outline:
    2px solid var(--a24-red);

  outline-offset: 3px;
}


/* =========================================================
   ESTADOS DE CARGA / ERROR
   ========================================================= */

#a24-programacion .a24p-status {
  padding: 28px 0;

  color: #777777;

  font-size: 14px;
  line-height: 1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

  #a24-programacion .a24p-days {
    gap: 22px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

  /*
   * Espaciado general.
   *
   * Evita que el contenido quede
   * pegado a los bordes del teléfono.
   */
  #a24-programacion {
    padding:
      24px
      20px
      32px;
  }


  /* Título */

  #a24-programacion .a24p-title {
    font-size: 27px;
  }


  /* Bajada */

  #a24-programacion .a24p-intro {
    max-width: 360px;

    font-size: 16px;
  }


  /* =====================================================
     CARRUSEL DE DÍAS MOBILE
     ===================================================== */

  #a24-programacion .a24p-days {
    display: flex;

    gap: 32px;

    width: 100%;

    margin-top: 38px;

    /*
     * Scroll exclusivamente horizontal.
     */
    overflow-x: auto;
    overflow-y: hidden;

    /*
     * Prioriza el gesto horizontal cuando
     * el usuario toca esta barra.
     */
    touch-action: pan-x;

    /*
     * Evita propagar el rebote horizontal
     * hacia el resto de la página.
     */
    overscroll-behavior-x: contain;

    /*
     * Scroll fluido en Safari/iOS.
     */
    -webkit-overflow-scrolling: touch;

    /*
     * Los días se acomodan suavemente
     * al terminar el desplazamiento.
     */
    scroll-snap-type: x proximity;

    /*
     * Oculta scrollbar.
     */
    scrollbar-width: none;
  }


  #a24-programacion .a24p-days::-webkit-scrollbar {
    display: none;
  }


  #a24-programacion .a24p-day {
    flex: 0 0 auto;

    padding-bottom: 20px;

    font-size: 14px;

    /*
     * Punto de ajuste del scroll horizontal.
     */
    scroll-snap-align: start;
  }


  /* =====================================================
     FILAS MOBILE
     ===================================================== */

  #a24-programacion .a24p-row {
    grid-template-columns:
      72px
      minmax(0, 1fr);

    align-items: center;

    min-height: 66px;

    padding:
      10px
      0;
  }


  /* Horario */

  #a24-programacion .a24p-time {
    font-size: 14px;
  }


  /* Programa */

  #a24-programacion .a24p-name {
    font-size: 14px;
  }


  /*
   * En mobile EN VIVO aparece
   * debajo del nombre del programa.
   */
  #a24-programacion .a24p-meta {
    grid-column: 2;

    justify-content: flex-start;

    padding:
      4px
      0
      0;
  }


  #a24-programacion .a24p-live {
    margin-right: 1rem;

    padding:
      2px
      0;

    font-size: 11px;
  }


  /*
   * Línea roja dentro del padding
   * lateral del widget.
   */
  #a24-programacion .a24p-row.live::before {
    left: -10px;
  }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

  #a24-programacion {
    padding:
      22px
      16px
      30px;
  }


  #a24-programacion .a24p-title {
    font-size: 25px;
  }


  #a24-programacion .a24p-intro {
    font-size: 15px;
  }


  #a24-programacion .a24p-days {
    gap: 28px;
  }


  #a24-programacion .a24p-row {
    grid-template-columns:
      64px
      minmax(0, 1fr);
  }


  #a24-programacion .a24p-time {
    font-size: 13px;
  }


  #a24-programacion .a24p-name {
    font-size: 13px;
  }

}