/* Amazon Silk / Fire TV: layout estable, fichas contenidas y scroll interno. */
/* All text tracks, including native fullscreen and HLS-generated cues. */
video::cue {
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  background-color: transparent !important;
  text-shadow: -1px 0 0 rgba(0, 0, 0, .6), 1px 0 0 rgba(0, 0, 0, .6),
    0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .6) !important;
}
video::cue(*) {
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  background-color: transparent !important;
  text-shadow: -1px 0 0 rgba(0, 0, 0, .6), 1px 0 0 rgba(0, 0, 0, .6),
    0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .6) !important;
}
/* Mobile web only. Keep the native APK and desktop caption sizing unchanged. */
video[data-be-mobile-captions="1"]::cue {
  font-size: var(--be-caption-font-size) !important;
  line-height: 1.2 !important;
}
video[data-be-mobile-captions="1"]::cue(*) {
  font-size: var(--be-caption-font-size) !important;
  line-height: 1.2 !important;
}
/* Chromium/WebKit paints a separate backdrop outside the cue text. */
video::-webkit-media-text-track-display-backdrop {
  background-color: transparent !important;
}
html.blackeye-silk {
  --silk-dialog-gap: 12px;
  overflow-anchor: none;
}

html.blackeye-silk body {
  overflow-anchor: none;
}

.silk-subtitle-overlay {
  display: none;
}

html.blackeye-silk .silk-subtitle-overlay:not([hidden]) {
  position: absolute;
  z-index: 9;
  right: 7%;
  bottom: 74px;
  left: 7%;
  display: block;
  pointer-events: none;
  text-align: center;
  color: #fff;
  background: transparent;
  font-size: clamp(17px, 2.25vw, 28px);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.3;
  text-shadow: -1px 0 0 rgba(0, 0, 0, .6), 1px 0 0 rgba(0, 0, 0, .6),
    0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .6);
}

/* El video conserva los controles nativos de Silk. No se fuerzan sus pseudo
   elementos: hacerlo los enfrentaba con la animación automática del navegador
   y causaba repintados continuos. */
html.blackeye-silk #playerDialog #videoPlayer {
  pointer-events: auto;
  touch-action: manipulation;
}

/* Durante la reproducción el Firestick dedica composición y memoria al video.
   La aplicación queda detrás, disponible al cerrar, pero no se repinta. */
html.blackeye-silk.silk-playback-active #app,
html.blackeye-silk.silk-playback-active body > .ambient {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.blackeye-silk.silk-playback-active #playerDialog[open] {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: flex;
  width: 100vw;
  max-width: none;
  height: var(--silk-viewport-height, 100vh);
  max-height: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  contain: none;
  overflow: visible;
}

html.blackeye-silk.silk-playback-active #playerDialog::backdrop {
  background: #000 !important;
  backdrop-filter: none !important;
}

html.blackeye-silk.silk-playback-active #playerDialog #videoPlayer {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: calc(var(--silk-viewport-height, 100vh) - 62px);
  min-height: 0;
  max-height: none;
  object-fit: contain;
  background: transparent;
  visibility: visible;
  opacity: 1;
  transform: none;
  backface-visibility: visible;
  will-change: auto;
  contain: none;
}

html.blackeye-silk.silk-playback-active #playerDialog .player-bar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  contain: layout paint;
}

html.blackeye-silk .home-curation-scroller {
  align-items: flex-start;
  scroll-behavior: auto;
}

/* Silk no compone los carruseles que están lejos de la ventana visible. Esto
   reduce trabajo de layout y pintura sin alterar su posición al navegar. */
html.blackeye-silk .home-curation-rail {
  content-visibility: auto;
  contain-intrinsic-size: 210px 1000px;
  contain: layout style;
}

html.blackeye-silk .home-curation-card {
  flex: 0 0 clamp(126px, 10vw, 150px);
  width: clamp(126px, 10vw, 150px);
  min-width: 126px;
  transition: none !important;
  contain: layout style;
}

html.blackeye-silk .home-curation-card.is-selected {
  flex-basis: min(410px, 39vw);
  width: min(410px, 39vw);
  contain: none;
  content-visibility: visible;
}

html.blackeye-silk .home-curation-card:hover .home-curation-poster,
html.blackeye-silk .home-curation-card:focus .home-curation-poster,
html.blackeye-silk .home-curation-card.is-selected .home-curation-poster {
  transform: none;
}

html.blackeye-silk .home-card-expanded,
html.blackeye-silk .home-card-preview-video {
  animation: none !important;
  transition: none !important;
}

/* Silk compone los videos en un plano acelerado independiente. Recortes,
   filtros y paint containment dejan ese plano detrás de una superficie negra
   aunque el audio continúe. Estas reglas conservan el video visible y colocan
   la información por encima sin taparlo. */
html.blackeye-silk .home-curation-card.is-selected .home-card-expanded {
  isolation: auto;
  contain: none;
  overflow: visible;
}

html.blackeye-silk .home-curation-card.is-selected .home-card-preview-video {
  z-index: 0;
  display: block !important;
  visibility: visible !important;
  opacity: .96 !important;
  border-radius: 0;
  background: transparent;
  filter: none !important;
  transform: none !important;
  clip-path: none !important;
  contain: none;
  will-change: auto;
}

html.blackeye-silk .home-curation-card.is-selected .home-card-preview-shade {
  z-index: 1;
}

html.blackeye-silk .home-curation-card.is-selected .home-card-preview-content,
html.blackeye-silk .home-curation-card.is-selected .home-card-preview-open {
  position: relative;
  z-index: 2;
}

html.blackeye-silk #detailDialog .trailer-shell {
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  contain: none;
}

html.blackeye-silk #detailDialog .trailer-shell::after {
  display: none;
}

html.blackeye-silk #detailDialog .trailer-shell video {
  position: relative;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: 0;
  background: transparent;
  filter: none !important;
  transform: none !important;
  clip-path: none !important;
  contain: none;
  will-change: auto;
}

html.blackeye-silk #detailDialog[open] {
  position: fixed;
  z-index: 2147482000;
  inset: var(--silk-dialog-gap);
  width: min(1060px, calc(100vw - (var(--silk-dialog-gap) * 2)));
  max-width: none;
  height: auto;
  max-height: calc(var(--silk-detail-height, var(--silk-viewport-height, 100vh)) - (var(--silk-dialog-gap) * 2));
  margin: auto;
  overflow: visible !important;
  overscroll-behavior: contain;
  grid-template-columns: minmax(205px, 29%) minmax(0, 1fr);
}

html.blackeye-silk #detailDialog[open] > .detail-poster {
  min-height: 0;
  height: auto;
  align-self: stretch;
}

html.blackeye-silk #detailDialog[open] > .detail-content,
html.blackeye-silk #detailDialog.web-desktop-series-wide[open] > .detail-content,
html.blackeye-silk #detailDialog.has-trailer[open] > .detail-content {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-height: calc(var(--silk-detail-height, var(--silk-viewport-height, 100vh)) - (var(--silk-dialog-gap) * 2));
  padding: 24px 56px 30px 34px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: auto;
  scrollbar-color: #d5b15b #151515;
  touch-action: pan-y;
  cursor: grab;
}

html.blackeye-silk #detailDialog[open] > .detail-content.is-pointer-scrolling {
  cursor: grabbing;
  user-select: none;
}

html.blackeye-silk #detailDialog .detail-actions {
  position: sticky;
  z-index: 8;
  bottom: -1px;
  display: flex;
  gap: 10px;
  margin: 10px -10px -10px;
  padding: 10px;
  border-top: 1px solid #d5b15b26;
  background: linear-gradient(180deg, #0b0b0be8, #0b0b0b 38%);
}

html.blackeye-silk #detailDialog .detail-actions > button {
  min-height: 42px;
}

.silk-detail-scroll-controls {
  display: none;
}

.tv-detail-quick-play {
  display: none;
}

html.blackeye-silk .silk-detail-scroll-controls {
  position: absolute;
  z-index: 12;
  top: 50%;
  right: 10px;
  display: grid;
  gap: 6px;
  transform: translateY(-50%);
}

html.blackeye-silk .silk-detail-scroll-controls button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d5b15b72;
  border-radius: 999px;
  background: #090909e8;
  color: #edca70;
  box-shadow: 0 6px 20px #000b;
  font-size: 13px;
}

html.blackeye-silk .silk-detail-scroll-controls button:focus,
html.blackeye-silk .silk-detail-scroll-controls button:hover {
  outline: 2px solid #edca70;
  background: #2a210f;
}

html.blackeye-silk .silk-detail-scroll-controls button:disabled {
  opacity: .28;
  outline: none;
}

html.blackeye-silk #detailDialog[open] > .detail-content::-webkit-scrollbar {
  width: 11px;
}

html.blackeye-silk #detailDialog[open] > .detail-content::-webkit-scrollbar-track {
  background: #151515;
}

html.blackeye-silk #detailDialog[open] > .detail-content::-webkit-scrollbar-thumb {
  border: 2px solid #151515;
  border-radius: 999px;
  background: #d5b15b;
}

html.blackeye-silk #detailDialog[open] > #closeDetail {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  margin: 0 !important;
}

html.blackeye-silk #detailDialog .trailer-shell {
  max-height: min(32vh, 250px);
  margin-bottom: 10px;
}

html.blackeye-silk #detailDialog .detail-content h2 {
  font-size: clamp(25px, 3vw, 34px);
}

html.blackeye-silk #detailDialog .detail-content > p:not(.eyebrow) {
  margin-block: 8px;
  line-height: 1.45;
}

/* Los navegadores de Smart TV que no son Silk también deben mantener la ficha
   dentro del alto visible. El contenido es el único dueño del scroll y los
   controles permanecen accesibles aunque el navegador no entregue la rueda o
   el gesto al elemento correcto. */
html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] {
  position: fixed;
  inset: 9px;
  width: min(1120px, calc(100vw - 18px));
  max-width: none;
  height: auto;
  max-height: calc(var(--tv-detail-height, 100vh) - 18px);
  margin: auto;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-poster {
  min-height: 0;
  align-self: stretch;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-content,
html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog.web-desktop-series-wide[open] > .detail-content,
html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog.has-trailer[open] > .detail-content {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-height: calc(var(--tv-detail-height, 100vh) - 18px);
  padding-right: 58px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: auto;
  scrollbar-color: #d5b15b #151515;
  touch-action: pan-y;
  cursor: grab;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-content.is-pointer-scrolling {
  cursor: grabbing;
  user-select: none;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .detail-actions {
  position: sticky;
  z-index: 8;
  bottom: -1px;
  display: flex;
  gap: 10px;
  margin: 10px -10px -10px;
  padding: 10px;
  border-top: 1px solid #d5b15b26;
  background: linear-gradient(180deg, #0b0b0be8, #0b0b0b 38%);
}

html.blackeye-tv-browser:not(.blackeye-silk) .silk-detail-scroll-controls {
  position: absolute;
  z-index: 14;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

html.blackeye-tv-browser:not(.blackeye-silk) .silk-detail-scroll-controls button {
  display: grid;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid #d5b15b72;
  border-radius: 999px;
  background: #090909f2;
  color: #edca70;
  box-shadow: 0 6px 20px #000b;
  font-size: 13px;
  font-weight: 900;
}

html.blackeye-tv-browser:not(.blackeye-silk) .silk-detail-scroll-controls button:focus,
html.blackeye-tv-browser:not(.blackeye-silk) .silk-detail-scroll-controls button:hover {
  outline: 2px solid #edca70;
  outline-offset: 2px;
  background: #2a210f;
}

html.blackeye-tv-browser:not(.blackeye-silk) .silk-detail-scroll-controls button:disabled {
  opacity: .3;
  outline: none;
}

html.blackeye-tv-browser:not(.blackeye-silk) .silk-detail-scroll-controls .tv-detail-quick-play {
  display: grid;
  min-width: 128px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e4e7e8, #c8a45d);
  color: #08090a;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-content::-webkit-scrollbar {
  width: 11px;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-content::-webkit-scrollbar-track {
  background: #151515;
}

html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-content::-webkit-scrollbar-thumb {
  border: 2px solid #151515;
  border-radius: 999px;
  background: #d5b15b;
}

@media (max-height: 650px) and (min-width: 761px) {
  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog[open] > .detail-content,
  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog.web-desktop-series-wide[open] > .detail-content,
  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog.has-trailer[open] > .detail-content {
    padding: 17px 58px 64px 24px;
  }

  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .trailer-shell {
    max-height: 135px;
  }

  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .detail-content h2 {
    margin-block: 3px 6px;
    font-size: 24px;
  }

  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .detail-content > p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    margin-block: 6px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
  }

  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .series-control,
  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .subtitle-control,
  html.blackeye-tv-browser:not(.blackeye-silk) #detailDialog .episode-metadata {
    margin-block: 7px 3px;
  }
}

html.blackeye-silk #detailDialog .series-control,
html.blackeye-silk #detailDialog .subtitle-control,
html.blackeye-silk #detailDialog .series-continue,
html.blackeye-silk #detailDialog .episode-metadata {
  margin-block: 9px 4px;
}

html.blackeye-silk.player-scroll-locked,
html.blackeye-silk body.player-scroll-locked {
  overscroll-behavior: none;
}

@media (max-height: 650px) and (min-width: 761px) {
  html.blackeye-silk {
    --silk-dialog-gap: 8px;
  }

  html.blackeye-silk #detailDialog[open] > .detail-content,
  html.blackeye-silk #detailDialog.web-desktop-series-wide[open] > .detail-content,
  html.blackeye-silk #detailDialog.has-trailer[open] > .detail-content {
    padding: 18px 27px 24px;
  }

  html.blackeye-silk #detailDialog .trailer-shell {
    max-height: 145px;
  }

  html.blackeye-silk #detailDialog .detail-content h2 {
    margin-block: 4px 7px;
    font-size: 24px;
  }

  html.blackeye-silk #detailDialog .detail-content > p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
  }

  html.blackeye-silk #detailDialog .detail-meta,
  html.blackeye-silk #detailDialog .detail-tmdb-facts {
    margin-block: 3px;
    font-size: 9px;
  }

  html.blackeye-silk #detailDialog .detail-tmdb-facts small,
  html.blackeye-silk #detailDialog .subtitle-control small,
  html.blackeye-silk #detailDialog .series-control > small,
  html.blackeye-silk #detailDialog .episode-metadata-copy p {
    display: none;
  }

  html.blackeye-silk #detailDialog .series-control {
    gap: 8px;
    padding: 8px 10px;
  }

  html.blackeye-silk #detailDialog .series-control label span {
    margin-bottom: 3px;
  }

  html.blackeye-silk #detailDialog .series-control select,
  html.blackeye-silk #detailDialog .subtitle-control select {
    min-height: 34px;
    padding-block: 6px;
  }

  html.blackeye-silk #detailDialog .subtitle-control {
    min-height: 44px;
    padding: 7px 10px;
  }

  html.blackeye-silk #detailDialog .series-continue {
    min-height: 48px;
    padding-block: 6px;
  }

  html.blackeye-silk #detailDialog .episode-metadata {
    min-height: 76px;
    grid-template-columns: 105px minmax(0, 1fr);
    padding: 6px;
  }

  html.blackeye-silk #detailDialog .detail-actions {
    padding-block: 7px;
  }

  html.blackeye-silk #detailDialog .detail-actions > button {
    min-height: 38px;
  }
}

@media (max-height: 560px) and (min-width: 761px) {
  html.blackeye-silk #detailDialog[open] {
    grid-template-columns: minmax(155px, 24%) minmax(0, 1fr);
  }

  html.blackeye-silk #detailDialog[open] > .detail-content,
  html.blackeye-silk #detailDialog.web-desktop-series-wide[open] > .detail-content,
  html.blackeye-silk #detailDialog.has-trailer[open] > .detail-content {
    padding: 13px 54px 15px 20px;
  }

  html.blackeye-silk #detailDialog .trailer-shell {
    max-height: 118px;
  }

  html.blackeye-silk #detailDialog .detail-content h2 {
    margin-block: 2px 4px;
    font-size: 21px;
  }
}

/* Asistente universal de desplazamiento para fichas y ventanas modales. Se
   posiciona con JavaScript dentro del borde visible del dialog y nunca se
   ofrece en equipos con pantalla táctil. */
.silk-detail-scroll-controls [data-silk-detail-scroll] {
  display: none !important;
}

.dialog-scroll-assist {
  position: fixed;
  z-index: 2147483200;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 1px solid #e8c66f;
  border-radius: 999px;
  background: linear-gradient(145deg, #30240d, #090909 64%);
  color: #f2d382;
  box-shadow: 0 8px 24px #000c, 0 0 0 3px #0007;
  font: 900 18px/1 system-ui, sans-serif;
  cursor: pointer;
  opacity: .96;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.dialog-scroll-assist:hover,
.dialog-scroll-assist:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  background: linear-gradient(145deg, #5a4318, #15100a 70%);
  transform: scale(1.06);
}

.dialog-scroll-assist:active {
  transform: scale(.94);
}

.dialog-scroll-assist[hidden],
html.blackeye-touch-device .dialog-scroll-assist {
  display: none !important;
}

@media (max-height: 620px) {
  .dialog-scroll-assist {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-scroll-assist {
    transition: none;
  }
}