/* =====================================================================
   legacy-webview.css — compatibilidade para WebView ANTIGO
   ---------------------------------------------------------------------
   Alvo: TV box Android 7.x cujo System WebView e o Chrome ~55 (2016),
   onde CSS Grid (Chrome 57), flex `gap` (84), `aspect-ratio` (88) e
   `clamp()` (79) sao IGNORADOS silenciosamente -> capas gigantes, grades
   colapsadas, categorias ocupando a tela toda, espacamentos somindo.
   (`var()` funciona desde o Chrome 49, entao o tema ambar/tinta se mantem.)

   PRINCIPIO: cada bloco e gated por `@supports not (<feature>)`. Em
   navegador/WebView MODERNO a feature existe -> o bloco e PULADO ->
   este arquivo e um NO-OP (zero regressao em Mac/Windows/iPhone/APK
   moderno). So no engine antigo (sem a feature) o fallback entra.

   Carregado por ULTIMO no header (depois de roda-theme.css). Kill-switch:
   `IPTV_LEGACY_WEBVIEW=0` no ambiente (ver header.php) desliga a inclusao.

   Chrome 55 SUPORTA flexbox sem prefixo (desde Chrome 29) e calc()
   (Chrome 26) -> os fallbacks usam flex/calc, que rodam la.
   Pente-fino TV box 2026-06-21.
   ===================================================================== */

/* =====================================================================
   1) `display:grid; place-items:center` (so centragem) -> flex centering
   Logos de canal/chip, disco do player, icone de erro, botao favoritar.
   ===================================================================== */
@supports not (display: grid) {
  .rh-lc-logo,
  .rh-chip-logo,
  .sp-logo,
  .sp-fav,
  .chip,
  .stage,
  .overlay.error .err-icon,
  .account-head .ico {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* =====================================================================
   2) Grades 2D (`display:grid` + minmax/repeat) que COLAPSAM -> flexbox
   Sem grid, cada item vira bloco full-width (o "bagunçado"). Reconstrui
   com flex-wrap + largura por item (aproxima o minmax do grid moderno).
   ===================================================================== */
@supports not (display: grid) {

  /* --- Catalogo Filmes/Series (.rcat-grid -> cards de poster) --- */
  .rcat-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .rcat-grid > .rcat-card,
  .rcat-grid > .rcat-skel {
    flex: 0 0 auto;
    width: 200px; /* capas maiores no catálogo (Chrome 55 das boxes; par do tvapp vc153) */
    margin: 0 10px 24px 0;
    box-sizing: border-box;
  }
  /* Coleções (Continuar/Favoritos/Recentes) mantêm a densidade clássica. */
  .rcat-grid--compact > .rcat-card,
  .rcat-grid--compact > .rcat-skel { width: 160px; }
  .rcat-grid > .rcat-empty { width: 100%; }

  /* --- TV ao Vivo / Esportes: layout 2 colunas (categorias | conteudo) --- */
  .sp-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .sp-cats { flex: 0 0 252px; width: 252px; box-sizing: border-box; }
  .sp-content { flex: 1 1 auto; min-width: 0; }

  /* --- Grade de canais (.sp-grid) -> "botoes de canal" em colunas --- */
  .sp-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .sp-grid > * {
    flex: 1 1 260px;
    min-width: 260px;
    margin: 0 12px 12px 0;
    box-sizing: border-box;
  }

  /* --- Home: lancador (.rh-launch 4 col) + busca (.search-results) --- */
  .rh-launch { display: flex; flex-wrap: wrap; }
  .rh-launch > .rh-tile {
    flex: 0 0 auto;
    width: calc(25% - 12px);
    margin: 0 6px 12px;
    box-sizing: border-box;
  }
  .search-results { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .search-results > * {
    flex: 1 1 250px;
    min-width: 250px;
    margin: 0 16px 16px 0;
    box-sizing: border-box;
  }
}

/* Colapso responsivo do fallback (mobile/WebView antigo estreito) */
@supports not (display: grid) {
  @media (max-width: 820px) {
    .sp-layout { flex-direction: column; }
    .sp-cats { flex: none; width: 100%; }
  }
  @media (max-width: 900px) {
    .rh-launch > .rh-tile { width: calc(50% - 12px); }
  }
  @media (max-width: 560px) {
    .rcat-grid > .rcat-card,
    .rcat-grid > .rcat-skel { width: calc(50% - 10px); }
  }
}

/* =====================================================================
   3) `aspect-ratio` -> padding-hack (a CAUSA das capas gigantes)
   Sem aspect-ratio o .rcat-poster fica sem altura e a <img> estoura no
   tamanho natural. padding-bottom:150% recria a proporcao 2:3 e a img
   passa a preencher (absolute). .rcat-poster ja e position:relative.
   ===================================================================== */
@supports not (aspect-ratio: 2 / 3) {
  .rcat-poster {
    height: 0;
    padding-bottom: 150%; /* 3/2 = 1.5 -> proporcao 2:3 (retrato) */
  }
  .rcat-poster > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* =====================================================================
   4) `clamp()` -> valores fixos (hero e titulos). Sem clamp, a propriedade
   e invalida e NAO seta: hero fica sem altura/padding e titulos sem
   tamanho. Fixa um valor proximo do "meio" do clamp.
   ===================================================================== */
@supports not (width: clamp(1px, 1px, 1px)) {
  .rh-top h1     { font-size: 26px; }
  .rh-hero       { min-height: 340px; }
  .rh-hero-body  { padding: 30px; }
  .rh-hero-title { font-size: 40px; }
  .sp-head h1    { font-size: 26px; }
  .st h1         { font-size: 24px; }
  .meta h1       { font-size: 22px; }
}

/* =====================================================================
   5) flex `gap` -> margens (Chrome <84). Sem gap os filhos colam. Aqui so
   os pontos VISIVEIS (metadata do hero, card de canal logo|texto, listas,
   poster|titulo, rails, nav). Owl `> * + *` espaca entre irmaos sem mexer
   no primeiro. Direcao: row -> margin-left; column -> margin-top.
   ===================================================================== */
@supports not (gap: 1px) {
  /* Hero da Home (metadata colada / corpo / icones dos botoes) */
  .rh-hero-meta > *        { margin: 0 16px 6px 0; }
  .rh-hero-body > * + *    { margin-top: 11px; }
  .rh-hero-kicker > i,
  .rh-hero-cta > i         { margin-right: 8px; }
  .rh-top > * + *          { margin-left: 18px; }

  /* Card de canal (TV ao Vivo / Esportes): logo | info */
  .sp-card > * + *         { margin-left: 13px; }
  .sp-info > * + *         { margin-top: 2px; }
  .sp-cat-item > * + *     { margin-left: 12px; }
  .sp-bar > * + *          { margin-left: 14px; }

  /* Listas/colunas (categorias do catalogo e da TV) */
  .rcat-cat-list > * + *,
  .rcat-cats > * + *,
  .sp-cats > * + *         { margin-top: 6px; }
  .rcat-cat > * + *        { margin-left: 9px; }

  /* Card de catalogo (poster | titulo) */
  .rcat-card > * + *       { margin-top: 10px; }

  /* Rails horizontais e rail de navegacao */
  .rh-rail > * + *         { margin-left: 13px; }
  .rcat-rail > * + *       { margin-top: 6px; }

  /* Nav do header */
  .navbar .nav-links > * + * { margin-left: 18px; }

  /* Player: barra de controles / overlay / xbar */
  .sp-player-bar > * + *   { margin-left: 14px; }
  .overlay > * + *         { margin-top: 16px; }
  .xbar > * + *            { margin-left: 8px; }
}

/* =====================================================================
   6) `:focus-visible` -> `:focus` (FOCO do D-pad / controle remoto)
   `:focus-visible` so existe no Chrome 86; no Chrome 55 o anel ambar de
   foco (definido em roda-theme.css e nas paginas via :focus-visible) NAO
   aparece -> navegar com controle remoto fica SEM foco visivel = TV
   inutilizavel. roda-nav.js move o foco com el.focus() (roda-nav.js:129),
   entao `:focus` (suportado no Chrome 55) recria o anel. Gated por
   not(display:grid): so no engine antigo; no moderno o :focus-visible
   cuida (sem mostrar anel no clique de mouse, comportamento preservado).
   ===================================================================== */
@supports not (display: grid) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus,
  [tabindex]:focus, .rcat-card:focus, .rcat-cat:focus, .rcat-link:focus,
  .rcat-refresh:focus, .sp-card:focus, .sp-cat-item:focus, .sp-back:focus,
  .grid-item:focus, .result-item:focus, .channel-item:focus, .movie-card:focus {
    outline: 3px solid var(--roda-amber);
    outline-offset: 3px;
    border-radius: 12px;
  }
}

/* =====================================================================
   7) login.php: showcase decorativo (poster-wall em GRID 3D animado) colapsa
   no Chrome 55 -> os `.movie-card` empilham em COLUNA full-width e VAZAM atras
   do card de login (a "bagunca" de titulos no canto esquerdo da foto da TV
   box). `.movie-grid` usa display:grid + minmax (Chrome 57), aspect-ratio
   (88) e a animacao 3D (preserve-3d/rotateX) que o engine antigo nao compoe.
   E PURAMENTE decorativo (opacity:.08, position:fixed) -> no engine antigo
   esconde, deixando o login limpo sobre o fundo escuro. O foco do D-pad nos
   campos do login vem do bloco 6 acima (input/button :focus). NO-OP no moderno.
   ===================================================================== */
@supports not (display: grid) {
  .movie-showcase { display: none; }
}