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

/* Complemento a viewport: evitar inflación de texto que parece zoom */
html.platform-ios {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

/* ── Prevenir highlight azul en tap ── */
.platform-ios * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ── Inputs/buttons: quitar estilo nativo iOS ── */
.platform-ios button,
.platform-ios input {
  -webkit-appearance: none;
  border-radius: 0;
}

/* ── Safe area: soporte para notch, Dynamic Island y Home Indicator ── */
.platform-ios body {
  padding-top: calc(75px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.platform-ios .header {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

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

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

/* ── Pantalla: usa casi todo el ancho disponible ── */
.platform-ios .screen {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 8px !important;
}

/* ── Botones físicos: mínimo 44×44pt (Apple HIG) ── */
.platform-ios .ch-btn,
.platform-ios .power-btn,
.platform-ios .zap-btn,
.platform-ios .fs-btn,
.platform-ios .cinema-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 8px !important;
}

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

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

/* ── Guide sidebar: ocultar en iOS (posición fixed tapa la pantalla) ── */
.platform-ios .guide-container {
  display: none !important;
}

/* ── Channel list sidebar: ocultar toggle, mostrar lista horizontal ── */
.platform-ios .channel-list-container {
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

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

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

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

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

/* ── Header: compacto ── */
.platform-ios .header {
  padding: 0 10px !important;
  height: 44px !important;
}

/* ── iOS Fullscreen: cuando el <video> está en fullscreen webkit ── */
.platform-ios video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
}

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

/* ── Ticker: texto más visible en pantalla pequeña ── */
.platform-ios .ticker {
  font-size: 14px !important;
  padding: 3px 0 !important;
}

/* ── Indicador de "modo móvil" fullscreen: ── */
/* En iOS no existe fullscreen de página, usamos un overlay visual */
.platform-ios .fs-exit-overlay { display: none !important; }

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

@media (orientation: portrait) {
  .platform-ios .tv-body {
    display: flex !important;
    flex-direction: column !important;
  }
  .platform-ios .tv-controls {
    order: 2 !important;
  }
  .platform-ios .channel-list-container {
    order: 3 !important;
    flex-direction: column !important;
    margin-top: 24px !important;
  }
  .platform-ios .channel-list {
    flex-direction: row !important;
    background: transparent !important;
  }
  .platform-ios .mobile-header-logo {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin-bottom: 4px !important;
  }
  .platform-ios .header {
    flex-direction: column !important;
    justify-content: center !important;
    height: 75px !important;
    padding-bottom: 8px !important;
    gap: 6px !important;
  }
  /* Logo oculto en portrait */
  #tv-fs-logo {
    display: none !important;
  }

  /* Fullscreen Portrait Mode */
  body.tv-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important; /* Quitar safe area la padding en FS */
  }
  body.tv-fullscreen .header,
  body.tv-fullscreen .channel-list-container,
  body.tv-fullscreen .guide-container {
    display: none !important;
  }
  body.tv-fullscreen .tv-wrapper {
    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;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  /* ... (mantener reglas anteriores de body y .platform-ios .header etc) ... */
  
  /* Cuerpo: fondo negro, sin scroll */
  body {
    background: #000 !important;
    overflow: hidden !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ocultar elementos que no son la tele y resetear contenedores */
  .platform-ios .header,
  .platform-ios .channel-list-container,
  .platform-ios .guide-container {
    display: none !important;
  }
  .platform-ios .layout,
  .platform-ios .main {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }
  
  /* Wrapper en modo Fullscreen Landscape */
  body.tv-fullscreen .tv-wrapper {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 2px !important;
    background: #000 !important;
    width: auto !important;
    overflow: visible !important;
  }

  /* Carcasa: márgenes mínimos para aprovechar el espacio */
  .platform-ios .tv-body {
    padding: 12px 16px 6px !important;
    border-radius: 18px !important;
  }
  
  /* Bisel: mínimo */
  .platform-ios .screen-bezel {
    padding: 6px !important;
    border-radius: 12px !important;
  }
  
  /* Pantalla: la clave. Alto máximo calculado para dejar espacio a controles */
  body.tv-fullscreen .platform-ios .screen {
    height: calc(100dvh - 160px) !important;
    width: auto !important;
    aspect-ratio: 4/3 !important;
    max-width: 90vw !important;
  }
  
  /* Controles: compactos y sin transformaciones que causen overflow */
  .platform-ios .tv-controls {
    transform: scale(0.75) !important;
    transform-origin: top center !important;
    margin-top: -10px !important;
    width: 100% !important;
  }
  
  /* Logo y Señal en vivo ocultos en landscape */
  #tv-fs-logo,
  #tv-fs-signal {
    display: none !important;
  }
  
  /* Stand de la tele: ocultar para ganar espacio */
  .platform-ios .tv-stand {
    display: none !important;
  }
}