/* ══════════════════════════════════════════════════
   RapTV — CSS Específico Android / Chrome
   Todas las reglas bajo .platform-android para no
   afectar a iOS ni a Desktop.
   ══════════════════════════════════════════════════ */

/* Sin zoom por pellizco / doble tap ni inflación de texto (la meta viewport va primero) */
html.platform-android,
html.platform-android body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

/* ── Prevenir highlight en tap ── */
.platform-android * {
  -webkit-tap-highlight-color: transparent;
}

/* ── Inputs/buttons: quitar estilo nativo ── */
.platform-android button,
.platform-android input {
  -webkit-appearance: none;
}

/* ── Aumentar bezél de la TV para look retro 4:3 ── */
.platform-android .tv-body:not(.sch-card-thumb) {
  padding: 20px 20px 0 !important;
  border-radius: 16px 16px 12px 12px !important;
}

.platform-android .screen-bezel {
  padding: 24px 24px 8px 24px !important;
  border-radius: 10px !important;
}

/* ── Pantalla: máximo ancho disponible ── */
.platform-android .screen {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 8px !important;
}

/* ── Botones físicos: mínimo 48dp (Material Design) ── */
.platform-android .ch-btn,
.platform-android .power-btn,
.platform-android .zap-btn,
.platform-android .fs-btn,
.platform-android .cinema-btn {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 8px !important;
}

/* ── Ocultar controles de cambio de canal en móvil ── */
.platform-android .channel-buttons {
  display: none !important;
}

/* ── Patas de la TV: ocultar en Android ── */
.platform-android .tv-stand {
  display: none !important;
}

/* ── Guide sidebar: ocultar en Android ── */
.platform-android .guide-container {
  display: none !important;
}

/* ── Channel list: horizontal scrollable ── */
.platform-android .channel-list-container {
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.platform-android .channel-toggle {
  display: none !important;
}

.platform-android .channel-list {
  flex-direction: row !important;
  overflow-x: auto !important;
  width: 100% !important;
  padding: 8px !important;
  gap: 6px !important;
  background: rgba(22, 13, 19, 0.98) !important;
  scrollbar-width: none !important;
}

.platform-android .channel-list::-webkit-scrollbar { display: none !important; }

.platform-android .ch-item {
  flex-shrink: 0 !important;
  min-width: 56px !important;
  width: 56px !important;
  max-width: 56px !important;
  padding: 6px !important;
}

/* ── Header: compacto; notch vía safe-area en portrait ── */
.platform-android .header {
  padding: 0 10px !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

/* ── Fullscreen real en Android/Chrome ── */
.platform-android:-webkit-full-screen .screen,
.platform-android:fullscreen .screen {
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  max-width: none !important;
}

/* ── OSD: más grande en mobile ── */
.platform-android .channel-number { font-size: 40px !important; }
.platform-android .channel-name   { font-size: 18px !important; }
.platform-android .now-playing    { font-size: 14px !important; }

/* ── Ticker ── */
.platform-android .ticker {
  font-size: 14px !important;
  padding: 3px 0 !important;
}

/* ── Overlay tap-to-start: encima de la pantalla de la tele ── */
.platform-android #ios-start {
  position: absolute !important;
  inset: 0 !important;
  z-index: 400 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* ── Swipe hint: pequeña animación de primera vez ── */
.platform-android .screen::after {
  content: '';
  display: none; /* activado por JS la primera vez */
}

@media (orientation: portrait) {
  /* Header es position:fixed; compensar alto real + hueco antes de la tele */
  html.platform-android body {
    padding-top: calc(env(safe-area-inset-top, 0px) + 96px) !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    justify-content: flex-start !important;
  }
  .platform-android .tv-wrapper {
    margin-top: 16px !important;
  }

  .platform-android .tv-body {
    display: flex !important;
    flex-direction: column !important;
  }
  .platform-android .tv-controls {
    order: 2 !important;
  }
  .platform-android .channel-list-container {
    order: 3 !important;
    flex-direction: column !important;
    margin-top: 24px !important;
  }
  .platform-android .channel-list {
    flex-direction: row !important; /* Mantenemos el scroll horizontal de canales abajo */
    background: transparent !important;
  }
  .platform-android .mobile-header-logo {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin-bottom: 2px !important;
    width: 100% !important;
    text-align: center !important;
    pointer-events: none !important;
  }
  .platform-android .header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 72px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    gap: 6px !important;
  }
  .platform-android .header .signal-info {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    gap: 6px 10px !important;
    row-gap: 4px !important;
    cursor: pointer !important;
  }
  /* Logo oculto en portrait */
  #tv-fs-logo {
    display: none !important;
  }

  /* Fullscreen Portrait Mode */
  body.tv-fullscreen {
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }
  body.tv-fullscreen .header,
  body.tv-fullscreen .channel-list-container,
  body.tv-fullscreen .guide-container {
    display: none !important;
  }
  body.tv-fullscreen .tv-wrapper {
    margin-top: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
  }
  body.tv-fullscreen .tv-body {
    margin: 0 auto !important;
    position: relative !important;
  }
}

/* ── Landscape Android: misma carcasa que portrait + pantalla 4:3 que cabe en el alto.
   IMPORTANTE: esta hoja va DESPUÉS de templates/*.css para poder ganar la cascada. ── */
@media (orientation: landscape) {
  /*
   * Alto útil pantalla 4:3. max() evita valores ≤0 si el stack es grande en un móvil bajo.
   * —android-land-chrome-x ≈ bisel 24×2 + mueble 20×2 para max-width del mueble completo.
   */
  html.platform-android {
    --android-land-stack: 118px;
    --android-land-chrome-x: 88px;
    --android-land-screen-h: max(
      140px,
      calc(
        100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--android-land-stack)
      )
    );
  }

  html.platform-android body {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    margin: 0 !important;
    background: #000 !important;
  }

  html.platform-android #main-tv-wrapper.tv-wrapper {
    margin-top: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: min(
      100%,
      calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
    ) !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Franja negra a izquierda/derecha: la tele no ocupa todo el ancho del móvil */
    padding-left: clamp(14px, 5vmin, 48px) !important;
    padding-right: clamp(14px, 5vmin, 48px) !important;
  }

  html.platform-android .header,
  html.platform-android .guide-container,
  html.platform-android .channel-list-container,
  html.platform-android .ticker {
    display: none !important;
  }

  html.platform-android .layout,
  html.platform-android .main {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* Misma estética que portrait; ancho limitado para mueble 4:3 (sin fit-content: rompía el % del .screen) */
  html.platform-android #main-tv-wrapper .tv-body:not(.sch-card-thumb) {
    padding: 20px 20px 12px !important;
    border-radius: 16px 16px 12px 12px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: min(
      100%,
      calc(var(--android-land-screen-h) * 4 / 3 + var(--android-land-chrome-x))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: linear-gradient(145deg, var(--tv-bezel-light), var(--tv-bezel), var(--bg)) !important;
    box-shadow:
      0 0 0 2px var(--tv-bezel),
      0 0 0 4px var(--bg),
      0 12px 40px rgba(0, 0, 0, 0.88),
      inset 0 2px 4px rgba(255, 255, 255, 0.06) !important;
  }

  html.platform-android #main-tv-wrapper .screen-bezel {
    padding: 24px 24px 8px 24px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    box-shadow:
      inset 0 0 40px rgba(0, 0, 0, 0.9),
      inset 0 0 2px rgba(255, 255, 255, 0.05),
      0 0 60px var(--screen-glow) !important;
  }

  /*
   * Rectángulo vídeo 4:3: el pad (.screen-bezel) ya tiene ancho; 100% aquí es estable.
   * Si el ancho disponible es mayor que (altura×4/3), centramos un bloque 4:3.
   */
  html.platform-android #main-tv-wrapper .screen {
    aspect-ratio: 4 / 3 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    width: min(
      100%,
      calc(var(--android-land-screen-h) * 4 / 3)
    ) !important;
    max-width: min(
      100%,
      calc(var(--android-land-screen-h) * 4 / 3)
    ) !important;
    max-height: var(--android-land-screen-h) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
    min-height: 80px !important;
    min-width: 0 !important;
  }

  /*
   * Quitar bandas negra tipo “YouTube letterbox”: el vídeo llena el rectángulo 4:3 (recorta sobras).
   * HTML5 Minio: cover. YouTube (16:9 en caja 4:3): iframe más ancho + centrado + overflow hidden.
   */
  html.platform-android #main-tv-wrapper .screen #video-player {
    object-fit: cover !important;
  }

  html.platform-android #main-tv-wrapper .screen #yt-container {
    overflow: hidden !important;
  }

  html.platform-android #main-tv-wrapper .screen #yt-container iframe {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 133.333% !important;
    height: 100% !important;
    max-width: none !important;
  }

  html.platform-android #main-tv-wrapper .tv-controls {
    flex-shrink: 0 !important;
    transform: scale(0.72) !important;
    transform-origin: bottom center !important;
    margin-top: -4px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  html.platform-android #tv-fs-logo,
  html.platform-android #tv-fs-signal {
    display: none !important;
  }

  html.platform-android .tv-stand {
    display: none !important;
  }

  /* Plantilla Vecteezy: tamaños fijos en px rompen el móvil — reset solo landscape */
  html.platform-android [data-template*="VecteezyTV"]#main-tv-wrapper {
    width: min(100%, 100vw) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding-left: clamp(14px, 5vmin, 48px) !important;
    padding-right: clamp(14px, 5vmin, 48px) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
  }

  html.platform-android [data-template*="VecteezyTV"] .tv-body {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  html.platform-android [data-template*="VecteezyTV"] .screen-bezel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    border-radius: 10px !important;
  }

  html.platform-android body.tv-fullscreen #main-tv-wrapper.tv-wrapper {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    justify-content: center !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: calc(env(safe-area-inset-left, 0px) + clamp(14px, 5vmin, 48px)) !important;
    padding-right: calc(env(safe-area-inset-right, 0px) + clamp(14px, 5vmin, 48px)) !important;
    background: #000 !important;
    box-sizing: border-box !important;
  }

  /*
   * Botón CINE visible en horizontal (sin esperar a fullscreen): activa cine + CRT + fullscreen vía JS.
   */
  html.platform-android #cinema-btn-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /*
   * Modo cine: pantalla completa con overlays CRT (.crt-overlay, scanlines…).
   * Mayor especificidad que las reglas 4:3 de arriba para que no colapse el vídeo.
   */
  html.platform-android body.tv-cinema #main-tv-wrapper.tv-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    flex: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
    justify-content: center !important;
    align-items: center !important;
    background: #000 !important;
    box-sizing: border-box !important;
  }

  html.platform-android body.tv-cinema #main-tv-wrapper .tv-body,
  html.platform-android body.tv-cinema #main-tv-wrapper .screen-bezel {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  html.platform-android body.tv-cinema #main-tv-wrapper .screen {
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }

  html.platform-android body.tv-cinema #main-tv-wrapper .screen .screen-glow {
    border-radius: 0 !important;
  }

  /* Salir del cine / fullscreen sin teclado físico */
  html.platform-android body.tv-fullscreen .fs-exit-overlay,
  html.platform-android body.tv-cinema .fs-exit-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    position: fixed !important;
    inset: 0 !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
    pointer-events: none !important;
    z-index: 120 !important;
    background: transparent !important;
  }

  html.platform-android body.tv-fullscreen .fs-exit-overlay > div,
  html.platform-android body.tv-cinema .fs-exit-overlay > div {
    pointer-events: auto !important;
  }
}