*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    width: 100%; height: 100%;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: #fff;
    overflow: hidden;
  }

  /* ══ LAYOUT PRINCIPAL ════════════════════════════════════════════════════ */
  #app {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }

  /* ══ BARRA DE CONTROLES (siempre visible, arriba) ════════════════════════ */
  #controls-bar {
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(4,5,12,.99) 0%, rgba(6,8,18,.95) 100%);
    padding: 9px 14px 7px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    z-index: 50;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.6);
  }

  /* ── Personas conectadas al embed ───────────────────────────────────── */
  #online-users-badge {
    position: absolute;
    top: 8px;
    right: 14px;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 3px 8px;
    border: 1px solid rgba(74, 222, 128, .22);
    border-radius: 999px;
    background: rgba(7, 18, 14, .78);
    color: rgba(220, 252, 231, .78);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15px;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
  }
  #online-users-badge.visible { display: inline-flex; }
  #online-users-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, .9);
  }
  @media (max-width: 480px) {
    #online-users-badge {
      position: fixed;
      top: auto;
      right: auto;
      bottom: 10px;
      left: 50%;
      z-index: 90;
      padding: 3px 6px;
      font-size: 8px;
      transform: translateX(-50%);
    }
  }

  /* ── Fila de idiomas ──────────────────────────────────────────────────── */
  #lang-row {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: scroll;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  #lang-row::-webkit-scrollbar { display: none; }

  /* ══ INDICADORES GUIADOS ════════════════════════════════════════════════ */
  .coachmark {
    position: absolute;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(300px, calc(100vw - 28px));
    padding: 11px 12px 11px 13px;
    border: 1px solid rgba(248, 203, 72, .62);
    border-radius: 24px 24px 24px 10px;
    background: linear-gradient(135deg, rgba(35, 27, 5, .98), rgba(12, 13, 22, .98));
    color: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px) scale(.98);
    transition: opacity .22s ease, transform .22s ease;
  }
  .coachmark.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .coachmark::before {
    content: '';
    position: absolute;
    left: 16px;
    bottom: 0;
    width: 18px;
    height: 13px;
    background: rgba(35, 27, 5, .98);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  #language-coachmark {
    top: 42px;
    left: 14px;
  }
  #language-coachmark::before {
    top: -1px;
    bottom: auto;
    transform: rotate(180deg);
  }
  #provider-coachmark {
    top: 78px;
    left: 14px;
  }
  #provider-coachmark::before {
    top: -1px;
    bottom: auto;
    transform: rotate(180deg);
  }
  .coachmark-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(250, 204, 21, .16);
    color: #facc15;
  }
  .coachmark-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .coachmark-copy strong {
    color: #facc15;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .45px;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .coachmark-copy span {
    color: rgba(255,255,255,.72);
    font-size: 10.5px;
    line-height: 1.35;
  }
  .coachmark-close {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,.58);
    cursor: pointer;
    font-size: 17px;
    line-height: 20px;
  }
  .coachmark-close:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
  }
  @media (max-width: 480px) {
    .coachmark {
      width: min(276px, calc(100vw - 24px));
      padding: 10px;
    }
    #language-coachmark,
    #provider-coachmark { left: 10px; }
    .coachmark-copy strong,
    .coachmark-copy span { font-size: 10px; }
  }

  #lang-row::before {
    content: 'Audio';
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 30px;
    margin-right: 2px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
  }

  .lang-btn {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.65);
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .16s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    white-space: nowrap;
  }
  .lang-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 3px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .lang-btn.active {
    background: linear-gradient(135deg, #e8192c 0%, #b5001a 100%);
    color: #fff;
    border-color: rgba(255,90,105,.7);
    box-shadow: 0 4px 16px rgba(229,9,20,.45), 0 1px 0 rgba(255,255,255,.08) inset;
    transform: translateY(0);
  }
  .lang-btn.active::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 6px 2px 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,.9);
  }

  /* ── Separador entre idiomas y fuentes ───────────────────────────────── */
  #controls-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
    margin: 5px 0;
  }

  /* ── Carrusel de proveedores ─────────────────────────────────────────── */
  #provider-carousel {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;       /* ocupa el espacio disponible */
    min-width: 0;  /* permite que el flex item se encoja por debajo de su contenido */
  }

  .carousel-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.6);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    padding: 0;
    user-select: none;
  }
  .carousel-arrow:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
  }
  .carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  #provider-row-wrap {
    flex: 1;
    min-width: 0;   /* necesario para que el scroll interior funcione */
    overflow: hidden;
    position: relative;
  }
  /* Indicador de scroll: fade derecho cuando hay más fuentes */
  #provider-row-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(5,7,14,.96));
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 1;
  }
  #provider-row-wrap.has-more::after { opacity: 1; }

  #provider-row {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: scroll;              /* scroll forzado (no solo auto) */
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    touch-action: pan-x;             /* activa el scroll táctil horizontal */
    overscroll-behavior-x: contain;  /* evita que el scroll escape al body */
    padding: 2px 0 2px;
  }
  #provider-row::-webkit-scrollbar { display: none; }

  /* Label "Fuente:" dentro del carousel */
  .provider-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 26px;
    margin-right: 2px;
    color: rgba(255,255,255,.38);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .provider-label::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #e50914;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(229,9,20,.9), 0 0 16px rgba(229,9,20,.4);
    flex-shrink: 0;
    animation: dotPulse 2s ease-in-out infinite;
  }
  @keyframes dotPulse {
    0%,100% { box-shadow: 0 0 6px rgba(229,9,20,.8); }
    50%      { box-shadow: 0 0 14px rgba(229,9,20,1), 0 0 24px rgba(229,9,20,.5); }
  }

  .prov-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    min-height: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(18,22,38,.85);
    color: rgba(255,255,255,.62);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all .16s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 4px rgba(0,0,0,.3);
    white-space: nowrap;
  }
  .prov-btn:hover {
    background: rgba(30,36,58,.9);
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .prov-btn.active {
    background: linear-gradient(135deg, rgba(229,9,20,.2) 0%, rgba(180,0,20,.12) 100%);
    color: #fff;
    border-color: rgba(229,9,20,.65);
    box-shadow: 0 0 0 1px rgba(229,9,20,.2), 0 4px 16px rgba(229,9,20,.25), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .prov-btn .prov-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(229,9,20,.22);
    color: #ff6575;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .8px;
    border: 1px solid rgba(229,9,20,.3);
    line-height: 1.5;
  }
  .prov-btn.active .prov-badge {
    color: #fff;
    background: rgba(0,0,0,.22);
    border-color: rgba(255,255,255,.25);
  }
  /* ── Contador de URLs en botón HLS ──────────────────────────────────── */
  .prov-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 13px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.45);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
  }

  /* ── Badge "(embed)" para proveedores iframe ────────────────────────── */
  .prov-badge-embed {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(70,120,255,.13);
    color: rgba(130,170,255,.75);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
    border: 1px solid rgba(70,120,255,.22);
    line-height: 1.6;
    text-transform: lowercase;
  }
  .prov-btn.active .prov-badge-embed {
    background: rgba(255,255,255,.16);
    color: #dde8ff;
    border-color: rgba(255,255,255,.28);
  }

  /* ── Botón tipo embed (no HLS): tono azulado para diferenciarlo ─────── */
  .prov-btn.prov-embed {
    border-color: rgba(70,120,255,.16);
    background: rgba(8,14,34,.88);
    color: rgba(185,210,255,.55);
  }
  .prov-btn.prov-embed:hover {
    background: rgba(16,28,64,.92);
    color: rgba(200,220,255,.9);
    border-color: rgba(70,120,255,.38);
    box-shadow: 0 3px 12px rgba(30,70,200,.18), inset 0 1px 0 rgba(70,120,255,.07);
    transform: translateY(-1px);
  }
  .prov-btn.prov-embed.active {
    background: linear-gradient(135deg, rgba(50,100,255,.2) 0%, rgba(25,65,195,.12) 100%);
    color: #c2d5ff;
    border-color: rgba(70,130,255,.5);
    box-shadow: 0 0 0 1px rgba(70,130,255,.15), 0 4px 14px rgba(30,80,200,.18);
  }

  /* ── Separador visual HLS | Embed en el carrusel ────────────────────── */
  .prov-separator {
    display: inline-block;
    flex-shrink: 0;
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.10);
    margin: 0 4px;
    border-radius: 1px;
    align-self: center;
  }

  /* ── Botón Full flotante sobre el vídeo ──────── */
  #float-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 50;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  /* Mostrar al pasar el cursor sobre el área de vídeo */
  #main-area:hover #float-controls {
    opacity: 1;
    pointer-events: auto;
  }
  /* En pantalla completa, ocultar siempre */
  #main-area.is-fullscreen #float-controls {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #fs-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all .18s ease;
    margin-left: 0;
  }
  /* Fullscreen — verde vivo */
  #fs-btn {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border: 1px solid rgba(34,197,94,.5);
    color: #dcfce7;
    box-shadow: 0 2px 10px rgba(22,163,74,.4), inset 0 1px 0 rgba(255,255,255,.12);
  }
  #fs-btn:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(74,222,128,.7);
    box-shadow: 0 4px 18px rgba(22,163,74,.55), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
    color: #fff;
  }
  #fs-btn:active { transform: translateY(0); }
  /* ══ ÁREA DE VIDEO (llena el espacio restante) ═══════════════════════════ */
  #main-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: 0;
  }

  /* ══ AVISO CUANDO NO HAY EMBED DISPONIBLE ═══════════════════════════════ */
  #unavailable-notice {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 30;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 20px;
    background-color: #080b15;
    background-position: center;
    background-size: cover;
    color: #fff;
    text-align: center;
    isolation: isolate;
  }
  #unavailable-notice::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(5,10,24,.28), rgba(2,4,12,.84)),
      var(--unavailable-backdrop, none);
    background-position: center;
    background-size: cover;
    /* Los estados sin enlaces o aún no estrenados usan el backdrop de TMDB
       en escala de grises para comunicar que todavía no está disponible. */
    filter: grayscale(1) saturate(.2) brightness(.76);
    transform: scale(1.03);
  }
  #unavailable-notice.visible { display: flex; }
  #unavailable-notice .unavailable-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(3,7,18,.58);
    box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.12);
    font-size: 50px;
    line-height: 1;
    animation: unavailableFaceFloat 2.2s ease-in-out infinite;
  }
  #unavailable-notice .unavailable-face::before,
  #unavailable-notice .unavailable-face::after,
  #unavailable-notice .unavailable-mouth {
    display: none;
  }
  @keyframes unavailableFaceFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  /* Mantener estas reglas inofensivas para instalaciones que aún tengan
     clases antiguas cacheadas en el navegador. */
  #unavailable-notice .unavailable-face.legacy-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.42);
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    position: relative;
  }
  #unavailable-notice .unavailable-title {
    margin: 0;
    color: #fff;
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 800;
    letter-spacing: -.3px;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  #unavailable-notice .unavailable-desc {
    max-width: 420px;
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: clamp(13px, 2.6vw, 16px);
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
  }
  #unavailable-notice .unavailable-release {
    margin: -4px 0 0;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(3,7,18,.62);
    color: #fff;
    font-size: clamp(13px, 2.6vw, 16px);
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
  }
  #unavailable-notice .unavailable-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    padding: 12px 22px;
    border: 2px solid #000;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s;
  }
  #unavailable-notice .unavailable-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-1px);
  }
  #unavailable-notice .unavailable-btn svg { flex-shrink: 0; }

  /* ══ PLYR — contenedor ══════════════════════════════════════════════════ */
  #player-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
  }
  #fluid-video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
  }
  #player-wrap .plyr,
  #player-wrap .plyr__video-wrapper,
  #player-wrap .plyr video {
    width: 100% !important;
    height: 100% !important;
  }
  #player-wrap .plyr {
    --plyr-color-main: #e50914;
    --plyr-video-control-color: #fff;
    --plyr-video-control-color-hover: #fff;
    --plyr-video-control-background-hover: rgba(229, 9, 20, .9);
    --plyr-video-control-background: rgba(0, 0, 0, .35);
    background: #000;
  }
  #player-wrap .plyr__video-wrapper {
    background: #000;
  }
  #subtitle-select {
    display: none;
    width: auto;
    min-height: 30px;
    max-width: 150px;
    padding: 4px 28px 4px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 7px;
    outline: 0;
    background: rgba(12,14,24,.96);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
  }
  #subtitle-select.visible { display: inline-flex; }

  /* ══ IFRAME ═══════════════════════════════════════════════════════════ */
  #embed-iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: none;
    background: #000;
    z-index: 5;
  }

  /* ══ AVISO SERVIDOR EXTERNO (PrimeLoad y similares) ═════════════════ */
  #external-notice {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px 20px;
    background: radial-gradient(ellipse at 50% 60%, rgba(30,14,0,.97) 0%, rgba(8,6,4,.99) 100%);
    text-align: center;
  }
  #external-notice.visible { display: flex; }
  #external-notice .ext-icon {
    font-size: 42px;
    line-height: 1;
    filter: drop-shadow(0 0 18px rgba(255,140,0,.55));
  }
  #external-notice .ext-title {
    color: #ffe8b0;
    font-size: clamp(14px, 3.2vw, 20px);
    font-weight: 800;
    letter-spacing: .4px;
    margin: 0;
    text-shadow: 0 2px 14px rgba(255,130,0,.35);
  }
  #external-notice .ext-desc {
    color: rgba(255,235,180,.65);
    font-size: clamp(11px, 2.4vw, 14px);
    font-weight: 400;
    line-height: 1.55;
    max-width: 420px;
    margin: 0;
  }
  #external-notice .ext-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 26px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #e07800, #c45a00);
    color: #fff;
    font-size: clamp(13px, 2.6vw, 15px);
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(220,100,0,.45), 0 0 0 1px rgba(255,150,40,.25);
    transition: background .18s, box-shadow .18s, transform .12s;
  }
  #external-notice .ext-btn:hover {
    background: linear-gradient(135deg, #f08a10, #d46800);
    box-shadow: 0 6px 26px rgba(220,100,0,.6), 0 0 0 1px rgba(255,160,50,.4);
    transform: translateY(-1px);
  }
  #external-notice .ext-btn:active { transform: translateY(0); }
  #external-notice .ext-btn svg { flex-shrink: 0; }

  /* ══ PAUSE OVERLAY (estilo Netflix — sólo parte inferior) ═══════════ */
  #pause-overlay {
    position: fixed;
    /* Solo cubre la zona del video (debajo de la barra de controles) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    /* Sin fondo — el frame pausado del video se ve detrás */
    background: transparent;
  }
  #pause-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Gradiente oscuro solo en la parte inferior — estilo Netflix */
  #pause-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62%;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.82) 28%,
      rgba(0,0,0,.45) 58%,
      transparent 100%
    );
    pointer-events: none;
  }

  #pause-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 36px 44px;
    max-width: 660px;
  }
  #pause-logo {
    max-width: min(260px, 52vw);
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 2px 16px rgba(0,0,0,.98));
    display: none;
  }
  #pause-logo.loaded { display: block; }
  #pause-title {
    font-size: clamp(18px, 3.8vw, 30px);
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.1;
    text-shadow: 0 2px 18px rgba(0,0,0,.98);
    display: none;
  }
  #pause-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.78);
    letter-spacing: .3px;
  }
  #pause-meta .meta-sep {
    width: 4px; height: 4px;
    background: rgba(255,255,255,.45);
    border-radius: 50%;
    flex-shrink: 0;
  }
  #pause-meta .meta-badge {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
  }
  /* Descripción / overview de la película o serie */
  #pause-desc {
    font-size: clamp(12px, 2.2vw, 14px);
    color: rgba(255,255,255,.72);
    font-weight: 400;
    line-height: 1.5;
    max-width: 520px;
    display: none;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
    /* Máximo 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #pause-ep-title {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    font-weight: 500;
    display: none;
    letter-spacing: .2px;
  }
  #pause-resume-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .2px;
    transition: background .15s, transform .12s;
    margin-top: 4px;
    flex-shrink: 0;
  }
  #pause-resume-btn:hover {
    background: rgba(255,255,255,.88);
    transform: scale(1.03);
  }
  #pause-resume-btn svg { flex-shrink: 0; }

  /* ══ LOADING OVERLAY ═════════════════════════════════════════════════ */
  #loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #08080f;
    transition: opacity .5s ease;
  }
  #loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  #loading-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(7px) brightness(.58) saturate(1.25);
    transform: scale(1.08);
    opacity: 0;
    transition: opacity .8s ease;
  }
  #loading-backdrop.visible { opacity: 1; }

  #loading-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.7) 100%);
    pointer-events: none;
  }

  #loading-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px;
    text-align: center;
  }

  /* ── Logo de marca (visible inmediatamente mientras carga) ─────────── */
  #site-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 1;
    transition: opacity .5s ease;
  }
  #site-brand.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }
  .brand-logo-img {
    max-height: clamp(56px, 14vw, 100px);
    max-width: min(280px, 70vw);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,.6));
    user-select: none;
    pointer-events: none;
    animation: heartbeat 1.5s ease-in-out infinite;
  }

  /* Animación latido del logo TMDB */
  @keyframes heartbeat {
    0%   { transform: translateY(0) scale(1);    filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)) brightness(1); }
    14%  { transform: translateY(0) scale(1.07); filter: drop-shadow(0 6px 32px rgba(0,0,0,.9)) brightness(1.12); }
    28%  { transform: translateY(0) scale(1);    filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)) brightness(1); }
    42%  { transform: translateY(0) scale(1.04); filter: drop-shadow(0 5px 28px rgba(0,0,0,.9)) brightness(1.07); }
    70%  { transform: translateY(0) scale(1);    filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)) brightness(1); }
    100% { transform: translateY(0) scale(1);    filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)) brightness(1); }
  }

  #tmdb-logo {
    max-width: min(380px, 72vw);
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.9));
    opacity: 0;
    transition: opacity .7s ease;
  }
  #tmdb-logo.visible { opacity: 1; }
  #tmdb-logo.beating { animation: heartbeat 1.5s ease-in-out infinite; }

  #tmdb-title {
    font-size: clamp(20px, 5vw, 34px);
    font-weight: 800;
    letter-spacing: -.3px;
    text-shadow: 0 2px 20px rgba(0,0,0,.95);
    opacity: 0;
    transition: opacity .6s ease;
    display: none;
  }
  #tmdb-title.visible { opacity: 1; }
  #tmdb-title.beating { animation: heartbeat 1.5s ease-in-out infinite; }

  #loading-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
  }
  #loading-msg {
    font-size: clamp(13px, 3vw, 16px);
    font-weight: 500;
    color: rgba(255,255,255,.65);
    letter-spacing: .3px;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
    text-align: center;
    max-width: 340px;
  }
  /* ── Spinner de carga ───────────────────────────────────────────────── */
  .spinner-ring {
    display: block;
    width: clamp(36px, 8vw, 48px);
    height: clamp(36px, 8vw, 48px);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.08);
    border-top-color: #e50914;
    border-right-color: rgba(229,9,20,.4);
    animation: spin 0.75s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* ══ ERROR BOX ═══════════════════════════════════════════════════════ */
  #error-box {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 200;
    max-width: min(92vw, 500px);
    padding: 11px 18px 11px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30,8,8,.97), rgba(20,4,4,.95));
    border: 1px solid rgba(255,80,80,.3);
    color: #ffb3b3;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,50,50,.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
  }
  #error-box.show { display: block; }

  /* ══ BOTÓN COLAPSAR CONTROLES (solo móvil) ═══════════════════════════ */
  #controls-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18px;
    margin-top: 4px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.28);
    cursor: pointer;
    border-radius: 4px;
    transition: color .15s, background .15s;
  }
  #controls-toggle:hover { color: rgba(255,255,255,.7); }
  #controls-toggle svg {
    transition: transform .25s ease;
  }
  #controls-bar.collapsed #controls-toggle svg {
    transform: rotate(180deg);
  }

  /* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
  @media (max-width: 600px) {
    #controls-toggle { display: flex; }
    /* ── Altura del área de video en móvil: relación 16:9 ────────────── */
    #main-area {
      flex: none;
      height: 56.25vw;
      max-height: 56.25vw;
    }

    /* Estado colapsado: solo muestra el handle */
    #controls-bar.collapsed {
      padding: 3px 0 0;
    }
    #controls-bar.collapsed #lang-row,
    #controls-bar.collapsed #controls-separator,
    #controls-bar.collapsed #bottom-controls {
      display: none;
    }

    #controls-bar { padding: 7px 10px 5px; }
    .lang-btn { min-height: 28px; font-size: 10px; padding: 4px 10px; }
    .prov-btn { min-height: 26px; font-size: 10px; padding: 4px 10px; }
    #tmdb-logo { max-height: 90px; }
    .brand-logo-img { max-height: clamp(44px, 11vw, 76px); }
    /* Pause overlay en móvil: gradiente más compacto */
    #pause-gradient { height: 70%; }
    #pause-info { padding: 0 18px 26px; gap: 8px; }
    #pause-logo { max-height: 60px; max-width: min(200px, 56vw); }
    #pause-meta { font-size: 11px; }
    #pause-desc { font-size: 11px; -webkit-line-clamp: 2; }
    #pause-resume-btn { font-size: 13px; padding: 8px 16px; }
    #float-controls { top: 10px; right: 10px; gap: 5px; opacity: 1; pointer-events: auto; }
    #main-area:hover #float-controls { opacity: 1; pointer-events: auto; }
    #fs-btn { font-size: 9.5px; padding: 4px 9px 4px 8px; margin-left: 0; }
    #subtitle-select { max-width: 125px; font-size: 9.5px; }

    /* En móvil ocultar flechas del carrusel para aprovechar el scroll táctil */
    .carousel-arrow { display: none !important; }
    #provider-row-wrap { flex: 1; }
  }

  /* ══ SELECTOR DE IDIOMA / SERVIDOR (desplegables flotantes, estilo ArtPlayer) ══ */
  #px-topbar {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 210;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 16px);
    pointer-events: none;
    transition: opacity .25s ease;
  }
  #px-topbar > * { pointer-events: auto; }
  #px-topbar.idle { opacity: 0; }
  /* Personas en vivo: arriba a la derecha (en lugar del botón Full, que se oculta) */
  #main-area > #online-users-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    z-index: 210;
    transform: none;
    transition: opacity .25s ease;
  }
  #px-topbar.idle ~ #online-users-badge { opacity: 0; }
  #fs-btn { display: none !important; }
  #float-controls { top: 44px; }

  .px-drop { position: relative; flex-shrink: 0; }
  #px-lbar { max-width: 148px; }
  #px-sbar { min-width: 0; max-width: min(220px, 52vw); }

  .px-drop-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 34px;
    padding: 5px 8px;
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,.09);
    background: rgba(12,14,20,.55);
    color: rgba(255,255,255,.82);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
  }
  .px-drop-btn:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }
  .px-drop-btn.open {
    background: rgba(229,9,20,.16);
    border-color: rgba(248,113,113,.45);
    color: #fecaca;
    box-shadow: 0 0 0 3px rgba(229,9,20,.08), 0 2px 10px rgba(0,0,0,.25);
  }
  .px-drop-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .px-drop-arrow {
    margin-left: auto;
    opacity: .45;
    font-size: 9px;
    flex-shrink: 0;
    transition: transform .18s;
  }
  .px-drop-btn.open .px-drop-arrow { transform: rotate(180deg); opacity: .7; }

  .px-flag {
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
  }
  .px-flag img { display: block; width: 20px; height: 14px; object-fit: cover; }

  .px-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
  }
  .px-ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .px-ico-fallback { background: rgba(255,255,255,.12); box-shadow: 0 1px 3px rgba(0,0,0,.35); }

  .px-drop-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    max-width: min(280px, 92vw);
    max-height: 260px;
    overflow-y: auto;
    padding: 5px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.1);
    border-top-color: rgba(255,255,255,.14);
    background: rgba(10,12,20,.99);
    box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 4px 16px rgba(0,0,0,.5);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
  }
  #px-sbar .px-drop-list { min-width: 210px; }
  .px-drop-list.open { display: block; animation: pxDropIn .18s cubic-bezier(.34,1.25,.64,1) both; }
  @keyframes pxDropIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
  }

  .px-drop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    color: rgba(255,255,255,.65);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, color .14s;
  }
  .px-drop-item:hover { background: rgba(255,255,255,.08); color: #fff; }
  .px-drop-item.act {
    background: linear-gradient(135deg, rgba(229,9,20,.28), rgba(153,27,27,.14));
    color: #fecaca;
    box-shadow: inset 0 0 0 1px rgba(248,113,113,.18);
  }
  .px-drop-item.is-failed { opacity: .45; }

  /* Sin barra superior: el vídeo ocupa todo el alto también en móvil */
  @media (max-width: 600px) {
    #main-area { flex: 1; height: auto; max-height: none; }
    #px-topbar { top: 6px; left: 6px; gap: 6px; max-width: calc(100% - 12px); }
    #px-sbar { max-width: 55vw; }
    .px-drop-btn { font-size: 11.5px; min-height: 32px; padding: 4px 7px; }
  }
  @media (max-width: 600px) {
    #main-area > #online-users-badge { top: 12px; right: 8px; }
    #float-controls { top: 40px; right: 8px; }
  }