/* =================================================================
   BASE.CSS  Variï¿½veis globais, reset, estrutura e layout
   Edite aqui: cores, fontes, topbar, tabs, grid principal
   ================================================================= */

/* FASE 42.24: FONTE ULTRA-LEGï¿½VEL (Inter + system stack) */
body, html, button, input, select, textarea, .st, .vip-card, span, div {

  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: -0.01em !important;
}


*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:    #09111e;
  --bg2:   #0d1b2e;
  --bg3:   #122038;
  --bg4:   #172540;
  --y:     #f5c800;        /* Amarelo Ouro (Destaque Master, TÃ­tulos) */
  --y-glow: rgba(245,200,0,0.4);
  --bdr:   rgba(255,255,255,.07);
  --t:     #ecf0f8;
  --t2:    #8fa3bc;
  --t3:    #4a6480;
  --g:     #00E676;        /* Verde Neon (EV+, A Favor, Over) */
  --r:     #FF3D71;        /* Vermelho Neon (Risco, Contra, Under) */
  --c:     #00F0FF;        /* Azul Ciano (xG, Poisson, Probabilidades) */
  --p:     #B388FF;        /* Roxo Claro (Destaques Especiais) */
  /* FASE 47.11 (UI Gemini): tipografia */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-tech: 'Chakra Petch', 'Rajdhani', 'Inter', sans-serif;
  --font-score: 'Oswald', 'Chakra Petch', sans-serif;
}

html, body {
  background: var(--bg);
  color: var(--t);
  
  overflow-x: hidden;
}

body {
  padding-left: 48px;
}


/* FASE 47.11: FONTES DA MARCA (Gemini UI Upgrade) */
.tech-title { font-family: 'Chakra Petch', 'Rajdhani', 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.tech-sub   { font-family: 'Chakra Petch', 'Rajdhani', 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tech-body  { font-family: 'Chakra Petch', 'Rajdhani', 'Inter', sans-serif; font-weight: 500; }
.glow-gold   { text-shadow: 0 0 8px rgba(245,200,0,0.6); }
.glow-green  { text-shadow: 0 0 8px rgba(0,230,118,0.6); }
.glow-red    { text-shadow: 0 0 8px rgba(255,61,113,0.6); }
.glow-cyan   { text-shadow: 0 0 8px rgba(0,240,255,0.6); }
.glow-purple { text-shadow: 0 0 8px rgba(179,136,255,0.6); }

/* ---------- TOPBAR ---------- */
.topbar {
  height: 60px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.logo-ic {
  width: 40px; height: 40px;
  background: var(--y);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: bold; color: #000;
  object-fit: cover;
  border: 2px solid var(--y);
  box-shadow: 0 0 12px rgba(245,200,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.logo-ic:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(245,200,0,0.7);
}
.logo-nm {
  color: var(--y);
  text-shadow: 0 0 8px rgba(245,200,0,0.3);
}
.logo-nm {
  
  font-size: 18px; font-weight: 700;
}
.tbr { display: flex; align-items: center; gap: 10px; }

/*    Botï¿½o ACESSAR  topbar                                       
   Estado logado: JS substitui conteï¿½do via _setUsuarioLogado()   */
#btn-acessar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 8px 20px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-left: 8px;
  transition: background 0.2s, border-color 0.2s;
}
#btn-acessar:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
}

/*    Liga com dados reais  dourado permanente                    
   .liga-ativa-dados = tem dados para exibir
   Aplicado via JS em _marcarLigaAtiva() e _marcarPaisAtivo()
   Para ativar nova liga: chame _marcarLigaAtiva('id-do-item')    */
.liga-ativa-dados .liga-nome {
  color: var(--y) !important;
  opacity: 1 !important;
}
.liga-ativa-dados .liga-badge {
  border-color: rgba(245,200,0,0.7) !important;
  box-shadow: 0 0 8px rgba(245,200,0,0.2);
}
.liga-ativa-dados {
  opacity: 1 !important;
}

/*    Paï¿½s selecionado  borda esquerda persiste com sidebar fechada
   Visï¿½vel nos 52px colapsados como indicador de contexto ativo   */
.pais-selecionado {
  border-left: 3px solid var(--y) !important;
  background: rgba(245,200,0,0.06) !important;
}
.pais-selecionado .liga-nome {
  color: var(--y) !important;
  opacity: 1 !important;
}

/* ---------- STATUS DA API  oculto visualmente, existe sï¿½ no DOM
   Usado internamente pelo JS para controle de estado             */
.api-status {
  display: none;
}

/* ---------- LEAGUE TABS ---------- */
.ltabs {
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  padding: 0 20px;
}
.ltab {
  padding: 12px 16px;
  font-size: 11px; font-weight: 600;
  color: var(--t3);
  cursor: pointer;
}
.ltab.active { color: var(--y); border-bottom: 2px solid var(--y); }

/* ---------- Pï¿½GINAS ---------- */
.page {
  display: none;
  padding: 16px 0;
  min-height: calc(100vh - 120px);
}
.page.active { display: block; }

/* ---------- GRID PRINCIPAL ---------- */
.hgrid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
}

/* ---------- SIDEBAR ---------- */
.sidebar { display: flex; flex-direction: column; gap: 15px; }

/* ---------- RESPONSIVIDADE MOBILE ---------- */
@media (max-width: 768px) {
  .hgrid { grid-template-columns: 1fr !important; }
  .team-hero { flex-direction: column !important; text-align: center; gap: 20px; padding: 25px 15px !important; }
  .team-hero > div { flex-direction: column !important; }
  .team-tabs { flex-wrap: wrap; justify-content: center; gap: 5px !important; }

/* FASE 42.27: containers de abas do clube */
.tab-content { display: none; width: 100%; }
.tab-content.active { display: block !important; }
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  div[style*="repeat(6"], div[style*="repeat(5"], div[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .sel-row { grid-template-columns: 1fr 30px 1fr !important; }
  div[style*="align-items:flex-start"],
  div[style*="align-items: flex-start"],
  div[style*="align-items: stretch"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  div[style*="width:340px"], div[style*="width: 300px"] {
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
  }
  div[style*="height:150px"], div[style*="height:120px"] {
    flex-direction: row !important; height: auto !important; padding-top: 20px !important;
  }
  .card { overflow-x: auto; }
  .st   { min-width: 650px; }
}

/* FASE 42.8: VIEWPORTS MENORES  PUBLICIDADE MANTIDA (ï¿½ o ganha-pï¿½o!).
   Em vez de esconder blocos, aplicamos rolagem horizontal INTELIGENTE
   nos containers de conteï¿½do para que a publicidade fique FIXA na extrema
   direita e o usuï¿½rio possa arrastar a tabela lateralmente. */
@media (max-width: 1599px) {
  /*  PUBLICIDADE NUNCA SOME  Lucas ï¿½ claro: display:none ï¿½ proibido */
  #ads-col,
  div[id="ads-col"] {
    display: block !important;  /* sempre visï¿½vel */
  }
  /* Container principal: rolagem horizontal quando faltar espaï¿½o */
  .layout-wrapper,
  .main-content-wrapper,
  .table-container {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  /* Tabela de classificaï¿½ï¿½o: scroll horizontal em telas estreitas */
  .st {
    overflow-x: auto !important;
    max-width: 100% !important;
    min-width: 720px;
    display: block;  /* permite que o wrapper pai controle o scroll */
  }
  /* Cards de Raio-X / Perfil FM com scroll horizontal */
  .sel-block,
  div[class*="raio-x"],
  div[class*="perfil-fm"] {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* FASE 42.3: viewport intermediï¿½ria (sidebar 210px + ads 260px + main).
   Empilha verticalmente grids inline com 3 colunas (Resumo Geral, Desempenho)
   para impedir overflow lateral e esmagamento de componentes. */
@media (max-width: 1300px) {
  /* Resumo Geral do Campeonato: grid 1fr 1fr 1fr ï¿½ 1fr */
  .resumo-geral-grid,
  div[style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:20px"] {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Cards de Desempenho (Geral | Casa | Fora)  repeat(3,1fr) ï¿½ 1fr */
  #desemp-dados,
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Tabela de classificaï¿½ï¿½o ganha scroll horizontal em viewport estreita */
  .st { min-width: 700px; }
}
/* FASE 42.3: transiï¿½ï¿½o suave do padding do body quando sidebar abre
   (evita "pulo" brusco do conteï¿½do). */
body {
  transition: padding-left 0.3s ease;
}

/* FASE 42.8: ROLAGEM HORIZONTAL INTELIGENTE  publicidades ficam FIXAS
   na extrema direita; tabelas e cards arrastam lateralmente quando
   faltar espaï¿½o. Aplica-se em TODAS as resoluï¿½ï¿½es, nï¿½o sï¿½ <1600px. */
.main-content-wrapper,
.table-container,
.st,
.sel-block {
  overflow-x: auto !important;
  max-width: 100% !important;
}
/* Scroll suave (UX premium) */
.main-content-wrapper,
.table-container,
.st {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ---------- TICKER ANIMAï¿½ï¿½O ---------- */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#ticker-inner:hover { animation-play-state: paused; }

/* ============================================================
   FASE 42.10: SIDEBAR VIP UNLOCKED
   Quando o master (lucasgavioli) autentica, a classe .vip-unlocked
   ï¿½ adicionada ao #liga-sidebar. As abas VIP saem do estado
   "em breve" e ficam clicï¿½veis.
   ============================================================ */
#liga-sidebar.vip-unlocked .liga-item[data-requires-vip="1"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
  border-left: 2px solid var(--y) !important;
  background: rgba(245, 200, 0, 0.05) !important;
}
#liga-sidebar.vip-unlocked .liga-item[data-requires-vip="1"]::before {
  content: "=";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  opacity: 0.6;
}
/* Quando Nï¿½O unlocked, as abas VIP ficam bloqueadas e com cadeado */
#liga-sidebar:not(.vip-unlocked) .liga-item[data-requires-vip="1"] {
  opacity: 0.38;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
#liga-sidebar:not(.vip-unlocked) .liga-item[data-requires-vip="1"]::before {
  content: "=";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  opacity: 0.5;
}