/* =========================================
   TV ATUALIZA — MULTIMIDIA (ISOLADO)
   ⚠ NÃO modifica header / topbar do site
========================================= */

/* =========================================================
   BASE MULTIMÍDIA (TOTALMENTE ISOLADA)
========================================================= */
body.mm-page{
  --mm-bg:#0f1e2e;
  --mm-card:#112240;
  --mm-text:#ffffff;
  --mm-muted:#b9c7d6;
  --mm-border:rgba(14,165,233,.22);
  --mm-accent:#0ea5e9;
  --mm-accent-2:#38bdf8;
  --mm-green:#22c55e;
  --mm-shadow:0 18px 40px rgba(0,0,0,.35);

  background: var(--mm-bg);
  color: var(--mm-text);
}

body.mm-page .mm-wrap * { box-sizing:border-box; }
#tvMod, #tvMod * { box-sizing:border-box; }


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */
body.mm-page .mm-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

body.mm-page .mm-head{
  display:flex;
  gap:12px;
  padding:14px;
  border:none;                     /* remove a borda */
  background: transparent;         /* opcional: remove fundo */
  border-radius:0;                 /* opcional */
  box-shadow:none;                 /* remove brilho */
}



body.mm-page .mm-title{
  margin:0;
  font-size:60px;
}

body.mm-page .mm-sub{
  margin:4px 0 0;
  color:var(--mm-muted);
  font-size:15px;
}

/* =========================================================
   TABS
========================================================= */
body.mm-page .mm-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

body.mm-page .mm-tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--mm-border);
  background: rgba(17,34,64,.45);
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

body.mm-page .mm-tab.is-active{
  border-color: rgba(56,189,248,.55);
  background: rgba(2,132,199,.18);
}

/* =========================================================
   CONTEÚDO
========================================================= */
body.mm-page .mm-content{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--mm-border);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(17,34,64,.70), rgba(15,30,46,.65));
  min-height:260px;
  box-shadow: var(--mm-shadow);
}

/* =========================================================
   TV MOD — CARDS + MODAL (ISOLADO)
========================================================= */
#tvMod,
#tvMod *{
  box-sizing:border-box;
}

#tvMod{
  color:var(--mm-text);
  overflow-x:hidden;
}

/* ===============================
   GRID
================================ */
#tvMod .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}

@media (max-width:980px){
  #tvMod .grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px){
  #tvMod .grid{
    grid-template-columns:1fr;
  }
}

/* ===============================
   CARD
================================ */
#tvMod .card{
  background:linear-gradient(180deg, rgba(17,34,64,.92), rgba(15,30,46,.92));
  border:1px solid var(--mm-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--mm-shadow);
  transition:transform .15s ease, border-color .15s ease;
  text-decoration:none;
  color:inherit;
  display:block;
  cursor:pointer;
}

#tvMod .card:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.45);
}

/* ===============================
   THUMB
================================ */
#tvMod .thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#081424;
  overflow:hidden;
}

#tvMod .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===============================
   PLAY (FIX)
================================ */
#tvMod .play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

#tvMod .play span{
  width:56px;
  height:56px;
  border-radius:999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(56,189,248,.45);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
#tvMod .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(160px 160px at 50% 50%, rgba(0,0,0,.22), transparent 60%);
  pointer-events:none;
}


/* o triângulo do play */
#tvMod .play span::before{
  content:"▶";
  font-size:18px;
  line-height:1;
  color: rgba(255,255,255,.95);
  transform: translateX(1px);
}

/* ===============================
   TAG
================================ */
#tvMod .tag{
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(14,165,233,.16);
  border:1px solid rgba(14,165,233,.35);
  color:#d9f3ff;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}

/* ===============================
   CONTENT
================================ */
#tvMod .content{
  padding:12px 12px 14px;
}

#tvMod .h{
  margin:0;
  font-size:15px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================
   MODAL YOUTUBE (NÃO depende do header)
========================================================= */
#tvMod .yt-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

#tvMod .yt-modal.is-open{
  display:block;
}

#tvMod .yt-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

#tvMod .yt-box{
  position:relative;
  width:min(980px,94vw);
  margin:12vh auto 0;
  background:rgba(17,34,64,.95);
  border:1px solid rgba(56,189,248,.35);
  border-radius:16px;
  overflow:hidden;
}

#tvMod .yt-top{
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

#tvMod .yt-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#e8f7ff;
}

#tvMod .yt-frame{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
  background:#000;
}

  #tvMod{color:#fff;}
  #tvMod .wrap{max-width:1200px;margin:0 auto;padding:16px;}
  #tvMod .topo{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:10px;}
  #tvMod .title{margin:0;font-size:28px;font-weight:900;letter-spacing:.4px;}
  #tvMod .subtitle{margin:6px 0 0 0;color:#b9c7d6;font-size:13px;}

  /* nave horizontal */
  #tvNav{display:flex;gap:10px;overflow:auto;padding:6px 2px 10px 2px;justify-content:center;}
  #tvNav .tv-pill{
    white-space:nowrap;padding:10px 14px;border-radius:999px;text-decoration:none;
    font-weight:900;font-size:14px;display:inline-flex;align-items:center;gap:8px;
    color:#cfe7ff;background:rgba(17,34,64,.55);
    border:1px solid rgba(14,165,233,.22);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    transition:.18s ease;
  }
  #tvNav .tv-pill.is-active{color:#fff;background:rgba(14,165,233,.20);border:1px solid rgba(14,165,233,.55);}
  #tvMod section[id^="sec-"]{ scroll-margin-top: 110px; }

  /* cards */
  .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  @media (max-width: 980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width: 620px){.grid{grid-template-columns:1fr;}}
  .card{background:rgba(17,34,64,.55);border:1px solid rgba(14,165,233,.22);border-radius:18px;overflow:hidden;cursor:pointer;}
  .thumb{position:relative;aspect-ratio:16/9;background:#000;}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .tag{
    position:absolute;top:10px;left:10px;
    padding:6px 10px;border-radius:999px;
    font-size:12px;font-weight:900;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
  }
  .play{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
  }
  .play span{
    width:64px;height:64px;border-radius:999px;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.25);
    position:relative;
    backdrop-filter: blur(6px);
  }
  .play span:after{
    content:"";
    position:absolute;left:50%;top:50%;
    transform:translate(-35%,-50%);
    width:0;height:0;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    border-left:18px solid rgba(255,255,255,.92);
  }
  .content{padding:12px 12px 14px;}
  .h{margin:0 0 10px 0;font-size:16px;line-height:1.2;}
  .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .small{color:#b9c7d6;font-size:12px;}
  .btn{font-size:12px;font-weight:900;color:#cfe7ff;}

  /* modal */
  .yt-modal{display:none;}
  .yt-modal.is-open{display:block;}
  .yt-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:999;}
  .yt-box{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(980px,92vw);
    background:#0b1626;border-radius:18px;
    border:1px solid rgba(14,165,233,.22);
    z-index:1000;overflow:hidden;
  }
  .yt-top{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
  .yt-title{margin:0;font-weight:900;}
  .yt-frame{width:100%;aspect-ratio:16/9;border:0;display:block;}

/* =========================================================
   TV Atualiza — Centralização TOTAL do cabeçalho
   (sem alterar classes no PHP)
========================================================= */

/* Centraliza o container que envolve o mm-head */
#tvMod .topo{
  justify-content: center !important;
  align-items: center !important;
}

/* Centraliza o bloco visual */
#tvMod .topo .mm-head{
  width: min(980px, 100%);
  margin: 0 auto;
  justify-content: center;
}

/* 🔥 Centraliza TODO o texto */
#tvMod .topo .mm-head > div{
  width: 100%;
  text-align: center;
}

/* Título */
#tvMod .mm-title{
  text-align: center;
  width: 100%;
}

/* Subtítulo */
#tvMod .mm-sub{
  text-align: center;
  width: 100%;
}

/* Ajuste fino no mobile */
@media (max-width:560px){
  #tvMod .mm-title{
    font-size: 18px;
  }
  #tvMod .mm-sub{
    font-size: 12px;
  }
}
/* =========================================================
   FIX DEFINITIVO — CENTRALIZAR PLAYER NO MODAL
   (cola no FINAL do CSS para sobrescrever tudo)
========================================================= */

#tvMod .yt-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;       /* evita colar nas bordas no mobile */
}

#tvMod .yt-modal.is-open{
  display: flex !important;       /* ✅ flex de verdade */
}

#tvMod .yt-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.65) !important;
}

/* ✅ O BOX do player CENTRALIZADO (zera qualquer regra velha) */
#tvMod .yt-box{
  position: relative !important;
  width: min(980px, 94vw) !important;

  margin: 0 !important;           /* ❌ remove 12vh auto 0 */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;     /* ❌ remove translate(-50%,-50%) */

  background: rgba(17,34,64,.95) !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  z-index: 100000 !important;
}

/* =========================================================
   FIX — Header/Footer com espaçamento igual ao site
   (TV Atualiza não deve limitar o header/footer)
========================================================= */

/* remove limitação/padding do wrapper geral (que afeta a sensação do header/footer) */
body.mm-page .mm-wrap{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* cria container só pro conteúdo (mantém seu layout 1200px) */
body.mm-page .mm-content{
  max-width: 1200px;
  margin: 14px auto 0 auto; /* mantém respiro igual ao site */
  padding: 14px;
}

/* se o #tvMod já tem wrap, garante o alinhamento consistente */
#tvMod .wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* garante que não exista “gap” estranho entre header e conteúdo */
body.mm-page main.mm-wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* opcional: se o footer estiver com “margem” indesejada nessa tela */
body.mm-page .footer-fixo,
body.mm-page footer{
  margin-top: 0 !important;
}
/* =====================================================
   TV ATUALIZA — não deixar o topo “cortado” pelo header fixo
===================================================== */
body.mm-page{
  padding-top: calc(var(--aa-header-h, 120px) + 12px) !important;
}


/* ✅ RESPIRO antes do footer (só na página mm-page) */
body.mm-page .mm-content{
  margin-bottom: 26px !important;   /* separa do footer */
  padding-bottom: 26px !important;  /* garante espaço mesmo se o conteúdo for curto */
}

/* ✅ Se o grid for o último elemento, reforça o espaço */
body.mm-page #tvMod .grid{
  margin-bottom: 26px !important;
}

/* ❌ Não zere o topo do footer nessa página */
body.mm-page footer{
  margin-top: 26px !important;
}

/* =========================================
   CARROSSEL (linha única) — VÍDEOS
========================================= */
#tvMod .mm-row{
  position: relative;
  width: 100%;
}

#tvMod .mm-row__track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 6px 10px 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
#tvMod .mm-row__track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

#tvMod .mm-row__track .card{
  flex: 0 0 360px;
  scroll-snap-align: start;
}

/* responsivo */
@media (max-width: 900px){
  #tvMod .mm-row__track .card{ flex-basis: 320px; }
}
@media (max-width: 520px){
  #tvMod .mm-row__track .card{ flex-basis: 86vw; }
}

/* Botões (setas) - só aparecem se tiver overflow (JS controla) */
#tvMod .mm-row__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: none; /* começa escondido */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

#tvMod .mm-row__btn--prev{ left: -6px; }
#tvMod .mm-row__btn--next{ right: -6px; }

#tvMod .mm-row.has-overflow .mm-row__btn{
  display: inline-flex;
}

#tvMod .mm-row .mm-row__btn.is-hidden{
  display: none !important;
}

/* no mobile: swipe (sem setas) */
@media (max-width: 768px){
  #tvMod .mm-row__btn{ display:none !important; }
  #tvMod .mm-row.has-overflow .mm-row__btn{ display:none !important; }
}

/* Banner do topo (substitui o título) */
#tvMod .mm-head { text-align: center; }

#tvMod .mm-head__inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#tvMod .mm-logo-tv{
  width: 100%;
  height: auto;           /* ✅ não estica */
  max-width: 1200px;      /* respeita o tamanho original */
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 18px;    /* combina com seu layout */
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
/* =========================================
   FIX: header fixed “descolado” do topo
   (remove transform dos wrappers da TV)
========================================= */

html, body { margin: 0 !important; padding: 0 !important; }

/* wrappers do seu módulo */
.mm-page,
.mm-wrap,
.mm-content,
#tvMod,
#tvMod .wrap,
#tvMod .topo{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* garante topo 0 real */
#aaHeader.header-fixo{
  top: 0 !important;
  margin-top: 0 !important;
}
#aaHeader{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
/* === FIX: evita “padding duplicado” do header fixo na TV === */
body.mm-page{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.mm-page .mm-wrap{
  padding-top: var(--aa-header-h, 0px) !important;
}

/* segurança extra caso algum container esteja empurrando também */
body.mm-page .mm-content,
body.mm-page #tvMod,
body.mm-page #tvMod .wrap{
  margin-top: 0 !important;
}
#tvMod .tag{
  display:none;
}
/* =========================================
   Marca d'água TV Atualiza no topo esquerdo
========================================= */

#tvMod .thumb{
  position: relative;
}

#tvMod .thumb::after{
  content:"";
  position:absolute;

  top:10px;
  left:10px;

  width:110px;
  height:70px;

  background:url('/multimidia/marcaDagua.png') no-repeat center;
  background-size:contain;

  opacity:0.9;
  pointer-events:none;
  z-index:15;
}
/* =========================================
   Remover botão de play dos cards
========================================= */

#tvMod .play{
  display:none !important;
}
/* =========================================
   Marca d'água dentro do player (modal)
========================================= */

#tvMod .yt-box{
  position: relative;
}

/* logo enquanto o vídeo está aberto */
#tvMod .yt-box::after{
  content:"";
  position:absolute;

  top:-5px;
  right:14px;

  width:120px;
  height:60px;

  background:url('/multimidia/marcaDagua.png') no-repeat center;
  background-size:contain;

  opacity:.9;
  pointer-events:none;
  z-index:9999;
}
/* =========================================
   Player sempre acima do header
========================================= */

#tvMod .yt-modal{
  z-index: 999999 !important;
}

#tvMod .yt-box{
  z-index: 1000000 !important;
}

#tvMod .yt-backdrop{
  z-index: 999998 !important;
}