/* FDN: cabeceras de competiciones. Usa las clases reales de la plantilla. */

html[data-theme] .competition-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 240px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html[data-theme="dark"] .competition-hero .competition-hero-overlay {
  min-height: 240px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 30px 24px !important;
  background: linear-gradient(90deg,rgba(3,8,18,.30),rgba(3,8,18,.04)) !important;
}

html[data-theme="light"] .competition-hero .competition-hero-overlay {
  min-height: 240px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 30px 24px !important;
  background: linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.01)) !important;
}

html[data-theme] .competition-hero .crumb {
  align-self: flex-start !important;
  text-align: left !important;
  margin: 0 0 20px !important;
  position: static !important;
  background: transparent !important;
}

html[data-theme] .competition-hero .competition-hero-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

html[data-theme] .competition-hero .hero-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
}

html[data-theme] .competition-hero .hero-right {
  flex: 0 0 190px !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  margin-left: auto !important;
  background: transparent !important;
}

html[data-theme] .competition-hero .hero-season-box {
  width: 100% !important;
  background: transparent !important;
}

html[data-theme] .competition-hero .hero-season-box label {
  display: block !important;
  margin: 0 0 5px !important;
  background: transparent !important;
}

html[data-theme] .competition-hero .competition-season-value {
  box-sizing: border-box !important;
  width: 100% !important;
  background: rgba(10,22,40,.94) !important;
  color: #fff !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

html[data-theme="dark"] .competition-hero .crumb,
html[data-theme="dark"] .competition-hero .competition-kicker,
html[data-theme="dark"] .competition-hero .hero-text h1,
html[data-theme="dark"] .competition-hero .hero-text p,
html[data-theme="dark"] .competition-hero .hero-season-box label {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.75) !important;
}

html[data-theme="light"] .competition-hero .crumb,
html[data-theme="light"] .competition-hero .competition-kicker,
html[data-theme="light"] .competition-hero .hero-text h1,
html[data-theme="light"] .competition-hero .hero-text p,
html[data-theme="light"] .competition-hero .hero-season-box label {
  color: #102442 !important;
  text-shadow: 0 1px 3px rgba(255,255,255,.65) !important;
}

html[data-theme="dark"] .competition-hero-laliga-ea-sports {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_1_1.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-laliga-hypermotion {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_1_2.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-copa-del-rey {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_2_1.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-champions-league {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_2_2.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-europa-league {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_3_1.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-conference-league {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_3_2.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-resto-categorias,
html[data-theme="dark"] .competition-hero-resto-de-categorias {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_4_1.jpg?v=fix20261021101926") !important;
}

html[data-theme="dark"] .competition-hero-otras-competiciones {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_4_2.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-laliga-ea-sports {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_1_3.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-laliga-hypermotion {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_1_4.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-copa-del-rey {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_2_3.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-champions-league {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_2_4.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-europa-league {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_3_3.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-conference-league {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_3_4.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-resto-categorias,
html[data-theme="light"] .competition-hero-resto-de-categorias {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_4_3.jpg?v=fix20261021101926") !important;
}

html[data-theme="light"] .competition-hero-otras-competiciones {
  background-image: url("/static/images/competition-backgrounds-wide/fondo_4_4.jpg?v=fix20261021101926") !important;
}


@media (max-width: 700px) {
  html[data-theme] .competition-hero .competition-hero-overlay {
    padding: 16px !important;
  }
  html[data-theme] .competition-hero .competition-hero-content {
    gap: 10px !important;
  }
  html[data-theme] .competition-hero .hero-right {
    flex-basis: 125px !important;
    width: 125px !important;
    max-width: 125px !important;
  }
}

/* FDN: usar los banners completos en la plantilla actual */
html[data-theme="dark"] .competition-hero-laliga-ea-sports {
}
html[data-theme="dark"] .competition-hero-laliga-hypermotion {
}
html[data-theme="dark"] .competition-hero-copa-del-rey {
}
html[data-theme="dark"] .competition-hero-champions-league {
}
html[data-theme="dark"] .competition-hero-europa-league {
}
html[data-theme="dark"] .competition-hero-conference-league {
}
html[data-theme="dark"] .competition-hero-resto-categorias {
}
html[data-theme="dark"] .competition-hero-otras-competiciones {
}

html[data-theme="light"] .competition-hero-laliga-hypermotion {
}
html[data-theme="light"] .competition-hero-copa-del-rey {
}
html[data-theme="light"] .competition-hero-champions-league {
}
html[data-theme="light"] .competition-hero-europa-league {
}
html[data-theme="light"] .competition-hero-conference-league {
}
html[data-theme="light"] .competition-hero-resto-categorias {
}
html[data-theme="light"] .competition-hero-otras-competiciones {
}

/* Los banners completos ya contienen título, temporada y composición. */
html[data-theme] .competition-hero {
}

html[data-theme] .competition-hero > .competition-hero-overlay > .crumb,
html[data-theme] .competition-hero > .competition-hero-overlay > .competition-hero-content {
}
/* FDN: corrección de cabecera basada en la estructura real de competition.html */
html[data-theme] body .competition-hero {
  position: relative !important;
  min-height: 240px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html[data-theme] body .competition-hero > .competition-hero-overlay {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 240px !important;
  height: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 30px 24px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, rgba(4,8,18,.42), rgba(4,8,18,.05)) !important;
}

html[data-theme] body .competition-hero > .competition-hero-overlay > .crumb {
  position: relative !important;
  inset: auto !important;
  align-self: flex-start !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  z-index: 2 !important;
}

html[data-theme] body .competition-hero .competition-hero-content {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  z-index: 2 !important;
}

html[data-theme] body .competition-hero .hero-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
}

html[data-theme] body .competition-hero .hero-right {
  flex: 0 0 190px !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  margin-left: auto !important;
  background: transparent !important;
}

html[data-theme] body .competition-hero .hero-season-box {
  width: 100% !important;
  background: transparent !important;
}

html[data-theme] body .competition-hero .competition-season-value {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(10,22,40,.94) !important;
  color: #fff !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

@media (max-width: 700px) {
  html[data-theme] body .competition-hero > .competition-hero-overlay {
    padding: 16px !important;
  }
  html[data-theme] body .competition-hero .hero-right {
    flex-basis: 125px !important;
    width: 125px !important;
    max-width: 125px !important;
  }
}

/* FDN: cabeceras gráficas por competición */
html[data-theme] body .competition-hero {
  min-height: 250px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html[data-theme] body .competition-hero > .competition-hero-overlay {
  min-height: 250px !important;
  padding: 22px 32px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: linear-gradient(
    90deg,
    rgba(4,8,18,.72) 0%,
    rgba(4,8,18,.35) 55%,
    rgba(4,8,18,.08) 100%
  ) !important;
}

html[data-theme="light"] body .competition-hero > .competition-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.68) 0%,
    rgba(255,255,255,.25) 55%,
    rgba(255,255,255,.05) 100%
  ) !important;
}

html[data-theme] body .competition-hero .competition-hero-content {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-theme] body .competition-hero .hero-text h1 {
  font-size: clamp(30px, 3.2vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -.6px !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  margin: 8px 0 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.65) !important;
}

html[data-theme] body .competition-hero .hero-text p {
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.75) !important;
}

html[data-theme] body .competition-hero .hero-season-box {
  background: transparent !important;
  text-align: right !important;
}

html[data-theme] body .competition-hero .hero-season-box label {
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.8) !important;
}

html[data-theme] body .competition-hero .competition-season-value {
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  text-align: right !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}

html[data-theme] body .competition-hero .hero-right {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 700px) {
  html[data-theme] body .competition-hero,
  html[data-theme] body .competition-hero > .competition-hero-overlay {
    min-height: 220px !important;
  }

  html[data-theme] body .competition-hero > .competition-hero-overlay {
    padding: 18px !important;
  }

  html[data-theme] body .competition-hero .competition-hero-content {
    gap: 12px !important;
  }

  html[data-theme] body .competition-hero .hero-text h1 {
    font-size: clamp(24px, 6vw, 34px) !important;
  }

  html[data-theme] body .competition-hero .competition-season-value {
    font-size: 18px !important;
  }
}
/* FDN: logotipos de competición junto al título */
html[data-theme] body .competition-hero .hero-left {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

html[data-theme] body .competition-hero .competition-brand-mark {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  max-width: 18vw !important;
  min-height: 60px !important;
  background: transparent !important;
}

html[data-theme] body .competition-hero .competition-brand-mark img {
  display: block !important;
  width: 100% !important;
  max-width: 120px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)) !important;
}

@media (max-width: 700px) {
  html[data-theme] body .competition-hero .hero-left {
    gap: 12px !important;
  }
  html[data-theme] body .competition-hero .competition-brand-mark {
    width: 66px !important;
    max-width: 22vw !important;
    min-height: 44px !important;
  }
  html[data-theme] body .competition-hero .competition-brand-mark img {
    max-width: 66px !important;
    max-height: 48px !important;
  }
}

/* FDN: contraste refinado de cabeceras en modo claro */
html[data-theme="light"] body .competition-hero > .competition-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(245,248,252,.72) 0%,
    rgba(245,248,252,.38) 38%,
    rgba(10,20,38,.12) 100%
  ) !important;
}

html[data-theme="light"] body .competition-hero .crumb,
html[data-theme="light"] body .competition-hero .competition-kicker,
html[data-theme="light"] body .competition-hero .hero-text h1,
html[data-theme="light"] body .competition-hero .hero-text p {
  color: #10233d !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.45) !important;
}

html[data-theme="light"] body .competition-hero .hero-text h1 {
  font-weight: 900 !important;
  letter-spacing: -.7px !important;
}

html[data-theme="light"] body .competition-hero .hero-season-box label,
html[data-theme="light"] body .competition-hero .competition-season-value {
  color: #fff !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.85) !important;
}

html[data-theme="light"] body .competition-hero .competition-brand-mark img {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.22)) !important;
}

/* FDN: acabado de Champions League en modo claro */
html[data-theme="light"] body .competition-hero-champions-league > .competition-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(245,248,255,.90) 0%,
    rgba(235,242,255,.78) 30%,
    rgba(225,237,255,.42) 48%,
    rgba(8,25,75,.08) 72%,
    rgba(8,25,75,.04) 100%
  ) !important;
}

html[data-theme="light"] body .competition-hero-champions-league .hero-text h1,
html[data-theme="light"] body .competition-hero-champions-league .hero-text p,
html[data-theme="light"] body .competition-hero-champions-league .competition-kicker,
html[data-theme="light"] body .competition-hero-champions-league .crumb {
  color: #102653 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.65) !important;
}

html[data-theme="light"] body .competition-hero-champions-league .competition-brand-mark img {
  filter: drop-shadow(0 2px 3px rgba(10,30,75,.12)) !important;
}

/* FDN: equilibrio definitivo entre color y legibilidad en modo claro */
html[data-theme="light"] body .competition-hero > .competition-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(245,248,252,.28) 0%,
    rgba(245,248,252,.12) 38%,
    rgba(10,20,38,.22) 100%
  ) !important;
}

/* FDN: Champions conserva el azul en modo claro */
html[data-theme="light"] body .competition-hero-champions-league > .competition-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(245,248,255,.42) 0%,
    rgba(235,242,255,.26) 30%,
    rgba(225,237,255,.12) 48%,
    rgba(8,25,75,.20) 72%,
    rgba(8,25,75,.16) 100%
  ) !important;
}