/* El Contraataque · Unified Header + Module Tabs v69
   HEADER → TABS PEGADAS → CONTENIDO → GLOBAL FOOTER */
:root{
  --ec69-header-height:5.85rem;
  --ec69-tabs-height:5.05rem;
  --ec69-gold:#ad6b08;
  --ec69-gold-soft:#fff0cf;
  --ec69-gray:#67625b;
  --ec69-line:rgba(62,49,32,.09);
}

/* ---------- HEADER GLOBAL ÚNICO ---------- */
.phone-frame>.mobile-header{
  position:relative!important;
  z-index:var(--z-header,50)!important;
  flex:0 0 var(--ec69-header-height)!important;
  width:100%!important;
  min-height:var(--ec69-header-height)!important;
  height:var(--ec69-header-height)!important;
  margin:0!important;
  padding:.68rem .82rem!important;
  display:grid!important;
  grid-template-columns:3.05rem minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:.62rem!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.phone-frame>.mobile-header .mobile-header-title{
  min-width:0!important;
  text-align:center!important;
  justify-self:stretch!important;
}
.phone-frame>.mobile-header .mobile-header-title .eyebrow{
  margin:0 0 .12rem!important;
  color:var(--ec69-gold)!important;
  font-size:clamp(.58rem,2.25vw,.68rem)!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.phone-frame>.mobile-header .mobile-header-title h2{
  margin:0!important;
  overflow:hidden!important;
  color:#15120f!important;
  font-size:clamp(.98rem,4vw,1.16rem)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
  text-overflow:ellipsis!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.phone-frame>.mobile-header .header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.38rem!important;
}
.phone-frame>.mobile-header .icon-button{
  width:3.02rem!important;
  height:3.02rem!important;
  min-width:3.02rem!important;
  min-height:3.02rem!important;
  margin:0!important;
  border:1px solid rgba(173,107,8,.18)!important;
  border-radius:50%!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  color:var(--ec69-gold)!important;
  background:#fff!important;
  box-shadow:0 .28rem .8rem rgba(61,45,20,.055)!important;
}
.phone-frame>.mobile-header #backButton{
  justify-self:start!important;
  font-size:0!important;
}
.phone-frame>.mobile-header .header-back-svg{
  width:1.35rem!important;
  height:1.35rem!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.phone-frame>.mobile-header .real-madrid-shortcut img{
  width:1.72rem!important;
  height:1.72rem!important;
  object-fit:contain!important;
}
.phone-frame>.mobile-header .header-icon-svg,
.phone-frame>.mobile-header .whatsapp-header-button svg{
  width:1.62rem!important;
  height:1.62rem!important;
}
.phone-frame>.mobile-header .header-icon-svg{
  fill:none!important;
  stroke:var(--ec69-gold)!important;
  stroke-width:1.8!important;
}
.phone-frame>.mobile-header .whatsapp-header-button svg{
  fill:var(--ec69-gold)!important;
  color:var(--ec69-gold)!important;
}

/* ---------- PANTALLAS CON NAVEGACIÓN INTERNA ---------- */
body[data-screen="community"] .mobile-content,
body[data-screen="events"] .mobile-content,
body[data-screen="draws"] .mobile-content,
body[data-screen="predictions"] .mobile-content,
body[data-screen="tickets"] .mobile-content{
  padding-top:0!important;
}

/* Una sola geometría para las barras de navegación secundaria. */
#communityModuleTabs,
#screen-events>.module-tabs--events,
.module-tabs--draws,
.module-tabs--predictions,
#screen-tickets>.module-tabs--tickets{
  position:sticky!important;
  top:0!important;
  z-index:var(--z-module-tabs,30)!important;
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  min-height:var(--ec69-tabs-height)!important;
  height:var(--ec69-tabs-height)!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:.18rem!important;
  margin:0 0 .72rem!important;
  padding:.32rem .3rem!important;
  overflow-x:auto!important;
  border:0!important;
  border-top:1px solid rgba(71,57,36,.045)!important;
  border-bottom:1px solid var(--ec69-line)!important;
  border-radius:0 0 1rem 1rem!important;
  color:var(--ec69-gray)!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 .55rem 1.15rem rgba(47,36,20,.045)!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}
#communityModuleTabs::-webkit-scrollbar,
#screen-events>.module-tabs--events::-webkit-scrollbar,
.module-tabs--draws::-webkit-scrollbar,
.module-tabs--predictions::-webkit-scrollbar,
#screen-tickets>.module-tabs--tickets::-webkit-scrollbar{display:none!important}

#communityModuleTabs>button,
#screen-events>.module-tabs--events>button,
.module-tabs--draws>button,
.module-tabs--predictions>button,
#screen-tickets>.module-tabs--tickets>button{
  position:relative!important;
  flex:1 0 auto!important;
  min-width:max-content!important;
  min-height:4.35rem!important;
  height:4.35rem!important;
  margin:0!important;
  border:0!important;
  border-radius:.95rem!important;
  padding:.42rem .72rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42rem!important;
  color:var(--ec69-gray)!important;
  background:transparent!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:clamp(.7rem,2.85vw,.82rem)!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  touch-action:manipulation!important;
}
#communityModuleTabs>button>span,
.module-tabs--draws>button>span,
.module-tabs--predictions>button>span{
  display:grid!important;
  width:1.35rem!important;
  height:1.35rem!important;
  flex:0 0 1.35rem!important;
  place-items:center!important;
  color:inherit!important;
}
#communityModuleTabs>button svg,
.module-tabs--draws>button svg,
.module-tabs--predictions>button svg{
  width:1.28rem!important;
  height:1.28rem!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}
#communityModuleTabs>button small,
.module-tabs--draws>button small,
.module-tabs--predictions>button small{
  color:inherit!important;
  font:inherit!important;
  line-height:1!important;
}
#communityModuleTabs>button.is-active,
#communityModuleTabs>button[aria-current="page"],
#screen-events>.module-tabs--events>button.is-selected,
#screen-events>.module-tabs--events>button[aria-current="page"],
.module-tabs--draws>button.is-active,
.module-tabs--draws>button[aria-current="page"],
.module-tabs--predictions>button.is-active,
.module-tabs--predictions>button[aria-current="page"],
#screen-tickets>.module-tabs--tickets>button.is-selected,
#screen-tickets>.module-tabs--tickets>button[aria-current="page"]{
  color:var(--ec69-gold)!important;
  background:linear-gradient(180deg,#fff5dd,#ffedc5)!important;
}

/* Header + tabs se leen como una sola pieza; no hay espacio entre ambos. */
body[data-screen="community"] #screen-community,
body[data-screen="events"] #screen-events,
body[data-screen="draws"] #screen-draws,
body[data-screen="predictions"] #screen-predictions,
body[data-screen="tickets"] #screen-tickets{
  padding-top:0!important;
  margin-top:0!important;
}

/* ---------- COMUNIDAD: CONTENIDO SIN TÍTULOS DUPLICADOS ---------- */
body[data-screen="community"] #communityList{
  margin-top:0!important;
  padding-top:0!important;
}
body[data-screen="community"] .community-v42-channels,
body[data-screen="community"] .community-v48-topics,
body[data-screen="community"] .community-v60-activity,
body[data-screen="community"] .community-v48-ranking{
  padding-top:0!important;
  margin-top:0!important;
}

/* Defensivo para cachés antiguas; v69 también elimina estos bloques del markup final. */
body[data-screen="community"] .community-v42-channels-hero,
body[data-screen="community"] .community-v48-head,
body[data-screen="community"] .community-v48-ranking-hero{
  display:none!important;
}

/* Actividad conserva Marcar leído sin repetir un hero. */
.community-v69-activity-actions{
  display:flex!important;
  justify-content:flex-end!important;
  min-height:2.25rem!important;
  margin:0!important;
  padding:.04rem .08rem 0!important;
}
.community-v69-activity-actions button{
  min-height:2.2rem!important;
  border:1px solid rgba(173,107,8,.15)!important;
  border-radius:999px!important;
  padding:.42rem .75rem!important;
  color:var(--ec69-gold)!important;
  background:#fff7e6!important;
  font-size:.61rem!important;
  font-weight:900!important;
}
.community-v69-activity-actions button:disabled{opacity:.42!important}

/* Crear tema sigue disponible, pero ya no necesita una tarjeta TEMAS redundante. */
.community-v69-topic-head-actions{
  display:flex!important;
  align-items:center!important;
  gap:.48rem!important;
}
.community-v69-topic-create{
  min-height:2rem!important;
  border:1px solid rgba(173,107,8,.15)!important;
  border-radius:999px!important;
  padding:.36rem .62rem!important;
  color:var(--ec69-gold)!important;
  background:#fff7e6!important;
  font-size:.57rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.community-v69-topic-head-actions .community-v48-live{white-space:nowrap!important}

/* El primer contenido de Temas es el buscador. */
body[data-screen="community"] .community-v48-sticky{
  margin-top:0!important;
  padding-top:0!important;
}
body[data-screen="community"] .community-v48-search-row{
  margin-top:0!important;
}

/* Footer global: esta capa no modifica geometría ni posición. */
body[data-screen="community"] .phone-frame>.bottom-nav[data-global-footer],
body[data-screen="events"] .phone-frame>.bottom-nav[data-global-footer],
body[data-screen="draws"] .phone-frame>.bottom-nav[data-global-footer],
body[data-screen="predictions"] .phone-frame>.bottom-nav[data-global-footer]{
  display:grid!important;
}

@media(max-width:430px){
  :root{--ec69-header-height:5.55rem;--ec69-tabs-height:4.8rem}
  .phone-frame>.mobile-header{
    grid-template-columns:2.75rem minmax(0,1fr) auto!important;
    gap:.42rem!important;
    padding-inline:.58rem!important;
  }
  .phone-frame>.mobile-header .icon-button{
    width:2.72rem!important;
    height:2.72rem!important;
    min-width:2.72rem!important;
    min-height:2.72rem!important;
  }
  .phone-frame>.mobile-header .header-actions{gap:.22rem!important}
  .phone-frame>.mobile-header .mobile-header-title .eyebrow{font-size:.55rem!important;letter-spacing:.12em!important}
  .phone-frame>.mobile-header .mobile-header-title h2{font-size:.92rem!important}
  #communityModuleTabs>button,
  #screen-events>.module-tabs--events>button,
  .module-tabs--draws>button,
  .module-tabs--predictions>button,
  #screen-tickets>.module-tabs--tickets>button{
    min-height:4.08rem!important;
    height:4.08rem!important;
    padding-inline:.5rem!important;
    font-size:.69rem!important;
  }
}

@media(max-width:370px){
  .phone-frame>.mobile-header .mobile-header-title .eyebrow{font-size:.5rem!important}
  .phone-frame>.mobile-header .mobile-header-title h2{font-size:.84rem!important}
  .phone-frame>.mobile-header .real-madrid-shortcut img{width:1.5rem!important;height:1.5rem!important}
  .phone-frame>.mobile-header .header-icon-svg,
  .phone-frame>.mobile-header .whatsapp-header-button svg{width:1.45rem!important;height:1.45rem!important}
  #communityModuleTabs>button,
  .module-tabs--draws>button,
  .module-tabs--predictions>button{padding-inline:.38rem!important;gap:.28rem!important;font-size:.64rem!important}
}