/* CSS EMBUTIDO PARA UMA P�GINA INDEPENDENTE */ :root { /* VARI�VEIS DE COR EXISTENTES (PRESERVADAS) */ --cor-fundo: #12101a; --cor-fundo-card: #1e1b29; --cor-borda: #3a364f; --cor-texto-principal: #cbd5e1; --cor-texto-secundario: #94a3b8; --cor-destaque-primaria: #A855F7; /* Lil�s */ --cor-destaque-secundaria: #00E38C; /* Verde */ --cor-vantagem: #00E38C; --cor-desvantagem: #F43F5E; /* Vermelho/Rosa */ --cor-equilibrio: #FBBF24; /* Amarelo */ /* NOVAS VARI�VEIS GLOBAIS (KIT GUARDA-CORPO) */ --container-max: 1200px; /* largura desktop */ --gutter: 16px; /* Breakpoints (mobile-first) */ --bp-sm: 480px; /* telefones em p� */ --bp-md: 768px; /* tablets */ --bp-lg: 1024px; /* notebooks */ --bp-xl: 1280px; /* desktop amplo */ } body { font-family: 'Inter', sans-serif; background-color: var(--cor-fundo ); color: var(--cor-texto-principal); margin: 0; padding: 0; /* overflow-x: hidden; REMOVIDO - IMPEDIA STICKY */ /* MOLDURA NEON LIL�S - EFEITO LOTERIAS INTELIGENTE */ box-shadow: inset 0 0 0 3px var(--cor-destaque-primaria), inset 0 0 20px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.2); min-height: 100vh; /* position: relative; REMOVIDO - IMPEDIA STICKY */ } /* CONTAINER PADR�O (KIT GUARDA-CORPO) - COMPLEMENTAR */ .container-kit { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } /* MOLDURA NEON PARA TABLETS */ @media (max-width: 1024px) and (min-width: 769px) { body { box-shadow: inset 0 0 0 4px var(--cor-destaque-primaria), inset 0 0 25px rgba(168, 85, 247, 0.35), 0 0 50px rgba(168, 85, 247, 0.25); animation: neonPulse 4s ease-in-out infinite alternate; } .container { padding: 0; /* Elimina��o total do respiro - m�ximo espa�o horizontal */ max-width: 100%; /* overflow-x: hidden; REMOVIDO - IMPEDIA STICKY */ } .analysis-mobile-item { padding: 1.2rem 0.8rem; min-height: 70px; } /* Reduzir fontes em 20% para tablets */ .header h1 { font-size: 1.6rem; /* 2rem * 0.8 */ } .header p { font-size: 0.8rem; /* 1rem * 0.8 */ } .game-card-header h2 { font-size: 1.2rem; /* 1.5rem * 0.8 */ } .game-card-header .game-info { font-size: 0.72rem; /* 0.9rem * 0.8 */ } .prob-item .label { font-size: 0.72rem; /* 0.9rem * 0.8 */ } .prob-item .value { font-size: 0.88rem; /* 1.1rem * 0.8 */ } .analysis-table th { font-size: 0.72rem; /* 0.9rem * 0.8 */ } .analysis-table td { font-size: 0.8rem; /* 1rem * 0.8 */ } } /* MOLDURA NEON ADICIONAL PARA DISPOSITIVOS M�VEIS */ @media (max-width: 768px) { body { box-shadow: inset 0 0 0 2px var(--cor-destaque-primaria), inset 0 0 15px rgba(168, 85, 247, 0.4), 0 0 30px rgba(168, 85, 247, 0.3); animation: neonPulse 3s ease-in-out infinite alternate; } } /* ANIMA��O NEON PULSANTE */ @keyframes neonPulse { 0% { box-shadow: inset 0 0 0 3px var(--cor-destaque-primaria), inset 0 0 20px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.2); } 100% { box-shadow: inset 0 0 0 3px var(--cor-destaque-primaria), inset 0 0 25px rgba(168, 85, 247, 0.5), 0 0 60px rgba(168, 85, 247, 0.4); } } .container { max-width: 900px; margin: 0 auto; padding: 2rem 2rem; } /* GARANTIR QUE TODOS OS ELEMENTOS RESPEITEM O CONTAINER PAI */ .container * { max-width: 100%; box-sizing: border-box; } /* ESPEC�FICO PARA ELEMENTOS QUE PODEM ULTRAPASSAR */ .container table { max-width: 100%; table-layout: fixed; } .container .modal-content { max-width: 900px; } .container [class*="modal"] { max-width: 900px; } /* Cabe�alho */ .header { text-align: center; padding-bottom: 2rem; border-bottom: 1px solid var(--cor-borda); margin-bottom: 2rem; /* BRILHO NEON NO HEADER */ background: linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, transparent 50%, rgba(0, 227, 140, 0.05) 100%); border-radius: 15px; position: relative; } .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 0%, rgba(168, 85, 247, 0.1) 25%, transparent 50%, rgba(0, 227, 140, 0.1) 75%, transparent 100%); border-radius: 15px; animation: headerShimmer 4s ease-in-out infinite; z-index: -1; } @keyframes headerShimmer { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } .header .logo-link { display: inline-block; transition: all 0.3s ease; text-decoration: none; margin-bottom: 1rem; } .header .logo-link:hover { transform: scale(1.05); filter: brightness(1.1); } .header img.logo { max-width: 200px; /* Aumentado de 100px para 200px */ height: auto; cursor: pointer; transition: all 0.3s ease; } .header h1 { font-size: 1.875rem; /* Reduzido de 2.5rem (40px) para 1.875rem (30px) */ font-weight: 800; color: var(--cor-destaque-primaria); margin: 0; } .header p { font-size: 0.875rem; /* Reduzido de 1.1rem (17.6px) para 0.875rem (14px) */ color: var(--cor-texto-secundario); max-width: 600px; margin: 0.5rem auto 0; } /* Card de An�lise do Jogo */ .game-card { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; margin-bottom: 2.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden; } .game-card-header { padding: 2rem; background: linear-gradient(135deg, rgba(42,35,64,.95), rgba(30,27,41,.95)); } .game-card-header h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--cor-texto-principal); text-align: center; } .game-card-header .game-info { text-align: center; font-size: 0.9rem; color: var(--cor-texto-secundario); margin-top: 0.5rem; } /* ESCUDOS VISÍVEIS - Ajustados via media queries mobile */ /* .escudo-time { display: none !important; } */ .confronto-visual { display: flex; align-items: center; justify-content: center; margin: 15px 0 10px 0; flex-wrap: wrap; } .time-info { display: flex; flex-direction: column; align-items: center; font-size: 16px; font-weight: 600; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); } .vs-divider { font-size: 20px; font-weight: bold; margin: 0 15px; opacity: 0.9; color: var(--cor-destaque-secundaria); } @media (max-width: 768px) { /* OTIMIZADOR DE APOSTAS - MOBILE RESPONSIVE */ /* 1. T�TULO PRINCIPAL - MESMO TAMANHO DA CONCLUS�O DO ANALISTA */ .section-header h2 { font-size: 14px !important; /* Mesmo tamanho do .analyst-conclusion h4 */ color: var(--cor-destaque-primaria) !important; /* Mesma cor da conclus�o */ } .section-description { font-size: 12px !important; /* Mesmo tamanho do .analyst-conclusion p */ color: var(--cor-texto-secundario) !important; /* Mesma cor da conclus�o */ } /* TEXTO "Clique nos resultados..." - MESMO PADR�O DO "Fator Analisado" */ .table-description { font-size: 9px !important; /* Mesmo tamanho do "Fator Analisado" em mobile */ color: var(--cor-texto-secundario) !important; /* Mesma cor do "Fator Analisado" */ } /* CABE�ALHOS DA TABELA - MESMO PADR�O DO "Fator Analisado" */ .page--otimizador-aposta .optimization-table th { font-size: 9px !important; /* Mesmo tamanho do "Fator Analisado" em mobile */ color: var(--cor-texto-secundario) !important; /* Mesma cor do "Fator Analisado" */ } /* TODOS OS TEXTOS DA TABELA - MESMO PADR�O */ .page--otimizador-aposta .optimization-table td { font-size: 9px !important; /* Mesmo tamanho do "Fator Analisado" em mobile */ color: var(--cor-texto-secundario) !important; /* Mesma cor do "Fator Analisado" */ } /* PRESERVAR CORES DE CONFIAN�A NA COLUNA DE PROBABILIDADES */ .page--otimizador-aposta .optimization-table td .prob-confidence { font-size: 9px !important; /* Mesmo tamanho, mas mant�m cores de confian�a */ /* Cores de confian�a s�o preservadas via classes CSS existentes */ } /* 2. TABELA OTIMIZADOR - PADDING AJUSTADO */ .page--otimizador-aposta .optimization-table th { padding: 0.5rem 0.3rem !important; } .page--otimizador-aposta .optimization-table td { padding: 0.4rem 0.3rem !important; } /* PADDING ESPEC�FICO PARA COLUNA 4 (SUGEST�O) - MAIS COMPACTO */ .page--otimizador-aposta .optimization-table td:nth-child(4) { padding: 0.2rem 0.05rem 0.2rem 0.02rem !important; /* Padding m�nimo esquerdo para colar na borda */ } /* 3. ELEMENTOS ESPEC�FICOS - MESMO PADR�O (9px) */ .jogo-numero { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; } .confronto-times { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; line-height: 1.2 !important; } .classificacao-badge { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; padding: 0.2rem 0.4rem !important; } .sugestao-valor { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; } .escolha-buttons { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; padding: 0.2rem 0.3rem !important; } .probabilidade-percentual { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; font-weight: 700 !important; } .confianca-label { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.1rem 0.3rem !important; /* Cores de confian�a s�o preservadas via classes CSS existentes */ } .cobertura-risco { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; } /* 4. AJUSTES DE LAYOUT - SELETOR MAIS ESPEC�FICO */ .page--otimizador-aposta .optimization-table { table-layout: auto !important; /* Mudado para auto em mobile */ width: max-content !important; /* Largura baseada no conte�do */ min-width: 100% !important; /* Largura m�nima */ } /* 4.1 SCROLL HORIZONTAL PARA MOBILE */ .page--otimizador-aposta .table-responsive { overflow-x: auto !important; /* Scroll horizontal */ overflow-y: visible !important; /* Scroll vertical normal */ -webkit-overflow-scrolling: touch !important; /* Scroll suave no iOS */ scrollbar-width: thin !important; /* Scrollbar fina no Firefox */ scrollbar-color: var(--cor-destaque-primaria) var(--cor-fundo-card) !important; /* Cores da scrollbar */ } /* 4.2 ESTILIZA��O DA SCROLLBAR PARA WEBKIT (Chrome, Safari) */ .page--otimizador-aposta .table-responsive::-webkit-scrollbar { height: 8px !important; /* Altura da scrollbar horizontal */ } .page--otimizador-aposta .table-responsive::-webkit-scrollbar-track { background: var(--cor-fundo-card) !important; /* Cor do fundo */ border-radius: 4px !important; } .page--otimizador-aposta .table-responsive::-webkit-scrollbar-thumb { background: var(--cor-destaque-primaria) !important; /* Cor do indicador */ border-radius: 4px !important; border: 1px solid var(--cor-borda) !important; } .page--otimizador-aposta .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--cor-destaque-secundaria) !important; /* Cor no hover */ } /* 5. OTIMIZA��O DOS BOT�ES "SUA ESCOLHA" PARA MOBILE */ .page--otimizador-aposta .choice-buttons { display: grid !important; grid-template-columns: repeat(3, 0.8fr) !important; /* 3 colunas com largura reduzida */ grid-template-rows: repeat(2, 1fr) !important; /* 2 linhas */ gap: 0px !important; /* Eliminar gap completamente */ width: 80% !important; /* Reduzir largura total do container */ justify-content: flex-end !important; /* Alinhar � direita para ficar pr�ximo da borda */ margin-left: auto !important; /* Empurrar para a direita */ } .page--otimizador-aposta .choice-btn[data-game][data-choice] { width: 90% !important; /* Aumentar largura para reduzir respiro horizontal */ height: 80% !important; /* Reduzir altura em 20% */ transform: scale(0.8) !important; /* Reduzir dimens�es em 20% */ transform-origin: center !important; margin: 0 !important; /* Remover margem para reduzir respiro */ padding: 2px 4px !important; /* Padding m�nimo para bot�es mais compactos */ display: flex !important; align-items: center !important; justify-content: center !important; } /* 6. REMOVER TEXTO "JOGO" DA COLUNA 1 EM MOBILE */ .page--otimizador-aposta .optimization-table th:nth-child(1) { font-size: 0 !important; /* Esconder texto "Jogo" */ line-height: 0 !important; } .page--otimizador-aposta .optimization-table th:nth-child(1)::after { content: "N�" !important; /* Substituir por "N�" mais compacto */ font-size: 9px !important; color: var(--cor-texto-secundario) !important; display: block !important; } /* 7. AFASTAMENTO ENTRE PALAVRAS DOS T�TULOS */ .page--otimizador-aposta .optimization-table th:nth-child(3) { word-spacing: 0.3em !important; /* Espa�amento entre "Classifica��o" */ } .page--otimizador-aposta .optimization-table th:nth-child(4) { word-spacing: 0.3em !important; /* Espa�amento entre "Sugest�o" */ } .page--otimizador-aposta .optimization-table th:nth-child(5) { word-spacing: 0.3em !important; /* Espa�amento entre "Sua Escolha" */ } .page--otimizador-aposta .optimization-table th:nth-child(6) { word-spacing: 0.3em !important; /* Espa�amento entre "Probabilidades" */ } /* 8. AJUSTAR TAMANHO DOS BADGES DE CLASSIFICA��O */ .page--otimizador-aposta .optimization-table .status-badge { font-size: 9px !important; /* Mesmo tamanho dos outros textos */ padding: 2px 4px !important; /* Padding reduzido para mobile */ } /* 9. SUBSTITUIR T�TULOS "CLASSIFICA��O" E "SUGEST�O" POR "RECOMENDA��O" */ .page--otimizador-aposta .optimization-table th:nth-child(3) { font-size: 0 !important; /* Esconder "Classifica��o" */ line-height: 0 !important; } .page--otimizador-aposta .optimization-table th:nth-child(3)::after { content: "Recomenda��o" !important; /* Substituir por "Recomenda��o" */ font-size: 9px !important; color: var(--cor-texto-secundario) !important; display: block !important; word-spacing: 0.3em !important; /* Manter espa�amento */ } /* Esconder apenas o T�TULO da coluna "Sugest�o" em mobile */ .page--otimizador-aposta .optimization-table th:nth-child(4) { font-size: 0 !important; /* Esconder t�tulo "Sugest�o" */ line-height: 0 !important; } /* Manter o CONTE�DO da coluna "Sugest�o" vis�vel */ .page--otimizador-aposta .optimization-table td:nth-child(4) { display: table-cell !important; /* Mostrar conte�do */ } /* 10. LARGURAS M�NIMAS PARA FOR�AR SCROLL HORIZONTAL */ .page--otimizador-aposta .optimization-table th:nth-child(1), .page--otimizador-aposta .optimization-table td:nth-child(1) { min-width: 60px !important; /* N� */ } .page--otimizador-aposta .optimization-table th:nth-child(2), .page--otimizador-aposta .optimization-table td:nth-child(2) { min-width: 120px !important; /* Confronto - reduzido de 200px para 120px */ } /* ALINHAR T�TULO DA COLUNA CONFRONTO AO CENTRO */ .page--otimizador-aposta .optimization-table th:nth-child(2) { text-align: center !important; /* Centralizar t�tulo "Confronto" */ } /* QUEBRAR NOMES DOS CLUBES EM DUAS LINHAS - COLUNA CONFRONTOS */ .page--otimizador-aposta .optimization-table td:nth-child(2) { white-space: normal !important; /* Permitir quebra de linha */ line-height: 1.2 !important; /* Espa�amento entre linhas */ text-align: center !important; /* Centralizar texto */ padding: 0.3rem 0.2rem !important; /* Padding reduzido */ } /* ESTILO PARA NOMES DOS TIMES EM MOBILE - PADRONIZADO PARA TODAS AS LINHAS */ .page--otimizador-aposta .optimization-table td:nth-child(2) .time-name { display: block !important; /* Cada time em uma linha */ font-size: 9px !important; /* Fonte padronizada - mesmo tamanho da tabela */ margin: 1px 0 !important; /* Margem entre os times */ line-height: 1.1 !important; /* Espa�amento compacto */ } /* FOR�AR QUEBRA DE LINHA AP�S "vs" EM TODAS AS LINHAS */ .page--otimizador-aposta .optimization-table td:nth-child(2) { white-space: pre-line !important; /* Permitir quebra de linha for�ada */ } /* ESTILO ESPEC�FICO PARA O SEPARADOR "vs" */ .page--otimizador-aposta .optimization-table td:nth-child(2) .vs-separator { display: block !important; /* For�ar quebra ap�s vs */ margin: 2px 0 !important; /* Espa�o antes do segundo time */ font-size: 9px !important; /* Mesmo tamanho dos times */ font-weight: bold !important; /* Destaque para o vs */ color: var(--cor-destaque-secundaria) !important; /* Cor de destaque */ } /* QUEBRAR TEXTO GERAL NA COLUNA CONFRONTOS */ .page--otimizador-aposta .optimization-table td:nth-child(2) { word-break: break-word !important; /* Quebrar palavras longas */ hyphens: auto !important; /* Hifeniza��o autom�tica */ max-width: 120px !important; /* Largura m�xima para for�ar quebra */ } /* GARANTIR FONTE PADRONIZADA PARA TODAS AS LINHAS DA COLUNA CONFRONTOS */ .page--otimizador-aposta .optimization-table td:nth-child(2) { font-size: 9px !important; /* Fonte padronizada para toda a coluna */ } /* FOR�AR QUEBRA DE LINHA AP�S "vs" USANDO CSS PSEUDO-ELEMENTOS */ .page--otimizador-aposta .optimization-table td:nth-child(2):after { content: "\A"; /* Quebra de linha for�ada */ white-space: pre; /* Manter quebra de linha */ } /* ALTERNATIVA: USAR JAVASCRIPT PARA INSERIR
AP�S "vs" */ .page--otimizador-aposta .optimization-table td:nth-child(2) { line-height: 1.3 !important; /* Espa�amento adequado para duas linhas */ } /* SCRIPT JAVASCRIPT PARA FOR�AR QUEBRA DE LINHA AP�S "vs" */ /* Este script ser� executado automaticamente para todas as linhas */ .page--otimizador-aposta .optimization-table td:nth-child(2) { /* Preparar para quebra de linha for�ada */ white-space: pre-line !important; } .page--otimizador-aposta .optimization-table th:nth-child(3), .page--otimizador-aposta .optimization-table td:nth-child(3) { min-width: 80px !important; /* Recomenda��o - reduzido de 120px para 80px */ } /* ALINHAR T�TULO DA COLUNA RECOMENDA��O � DIREITA */ .page--otimizador-aposta .optimization-table th:nth-child(3) { text-align: right !important; /* Alinhar t�tulo "Recomenda��o" � direita */ } /* CENTRALIZAR TEXTOS DA COLUNA RECOMENDA��O */ .page--otimizador-aposta .optimization-table td:nth-child(3) { text-align: center !important; /* Centralizar textos */ padding: 0.4rem 0.2rem !important; /* Padding balanceado */ } .page--otimizador-aposta .optimization-table th:nth-child(4), .page--otimizador-aposta .optimization-table td:nth-child(4) { min-width: 32px !important; /* Sugest�o - reduzido em 60%: 80px * 0.4 = 32px */ } /* APROXIMAR VISUALMENTE AS COLUNAS RECOMENDA��O E SUGEST�O */ .page--otimizador-aposta .optimization-table td:nth-child(3) { padding: 0.4rem 0.2rem !important; /* Padding balanceado para centraliza��o */ text-align: center !important; /* Centralizar textos */ } .page--otimizador-aposta .optimization-table td:nth-child(4) { padding: 0.2rem 0.1rem 0.2rem 0.05rem !important; /* Padding m�nimo esquerdo */ text-align: left !important; /* Alinhar � esquerda */ font-size: 8px !important; /* Fonte menor para caber na coluna estreita */ } .page--otimizador-aposta .optimization-table th:nth-child(5), .page--otimizador-aposta .optimization-table td:nth-child(5) { min-width: 180px !important; /* Sua Escolha */ } /* REDUZIR PADDING DIREITO DA COLUNA SUA ESCOLHA PARA APROXIMAR BOT�ES DA BORDA */ .page--otimizador-aposta .optimization-table td:nth-child(5) { padding-right: 0.1rem !important; /* Padding m�nimo � direita */ } .page--otimizador-aposta .optimization-table th:nth-child(6), .page--otimizador-aposta .optimization-table td:nth-child(6) { min-width: 120px !important; /* Probabilidades */ } } /* DESKTOP - GARANTIR LAYOUT ORIGINAL DOS BOT�ES */ @media (min-width: 769px) { /* ======================================== 🎯 PADRONIZAÇÃO TOTAL - TODOS OS TEXTOS DA TABELA TAMANHO: 17px | COR: Branco #ffffff ======================================== */ .analysis-table td { font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ } .analysis-table .team-header { font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ } /* ======================================== 🎯 CÉLULAS ESPECÍFICAS: POSIÇÃO E FATOR CASA TODOS COM 17px E BRANCO ======================================== */ .analysis-table td[id^="posicao-casa-"], .analysis-table td[id^="posicao-fora-"], .analysis-table td[id^="fator-casa-"], .analysis-table td[id^="fator-fora-"], #posicao-casa-1-novo, #posicao-fora-1-novo, #posicao-casa-2-novo, #posicao-fora-2-novo, #posicao-casa-3-novo, #posicao-fora-3-novo, #posicao-casa-4-novo, #posicao-fora-4-novo, #posicao-casa-5-novo, #posicao-fora-5-novo, #posicao-casa-6-novo, #posicao-fora-6-novo, #posicao-casa-7-novo, #posicao-fora-7-novo, #posicao-casa-8-novo, #posicao-fora-8-novo, #posicao-casa-9-novo, #posicao-fora-9-novo, #posicao-casa-10-novo, #posicao-fora-10-novo, #posicao-casa-11-novo, #posicao-fora-11-novo, #posicao-casa-12-novo, #posicao-fora-12-novo, #posicao-casa-13-novo, #posicao-fora-13-novo, #posicao-casa-14-novo, #posicao-fora-14-novo, #fator-casa-1-novo, #fator-fora-1-novo, #fator-casa-2-novo, #fator-fora-2-novo, #fator-casa-3-novo, #fator-fora-3-novo, #fator-casa-4-novo, #fator-fora-4-novo, #fator-casa-5-novo, #fator-fora-5-novo, #fator-casa-6-novo, #fator-fora-6-novo, #fator-casa-7-novo, #fator-fora-7-novo, #fator-casa-8-novo, #fator-fora-8-novo, #fator-casa-9-novo, #fator-fora-9-novo, #fator-casa-10-novo, #fator-fora-10-novo, #fator-casa-11-novo, #fator-fora-11-novo, #fator-casa-12-novo, #fator-fora-12-novo, #fator-casa-13-novo, #fator-fora-13-novo, #fator-casa-14-novo, #fator-fora-14-novo { font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ } /* ======================================== 🎯 CENTRALIZAR COLUNA 3 (TIME FORA) ======================================== Apenas nas linhas "Posição na Tabela" e "Fator Casa" ======================================== */ .analysis-table td[id^="posicao-fora-"], #posicao-fora-1-novo, #posicao-fora-2-novo, #posicao-fora-3-novo, #posicao-fora-4-novo, #posicao-fora-5-novo, #posicao-fora-6-novo, #posicao-fora-7-novo, #posicao-fora-8-novo, #posicao-fora-9-novo, #posicao-fora-10-novo, #posicao-fora-11-novo, #posicao-fora-12-novo, #posicao-fora-13-novo, #posicao-fora-14-novo, .analysis-table td[id^="fator-fora-"], #fator-fora-1-novo, #fator-fora-2-novo, #fator-fora-3-novo, #fator-fora-4-novo, #fator-fora-5-novo, #fator-fora-6-novo, #fator-fora-7-novo, #fator-fora-8-novo, #fator-fora-9-novo, #fator-fora-10-novo, #fator-fora-11-novo, #fator-fora-12-novo, #fator-fora-13-novo, #fator-fora-14-novo { text-align: center !important; } /* CENTRALIZAR COLUNA 3 (TIME FORA) - JOGOS 9-14 - ESPECIFICIDADE ABSOLUTA MÁXIMA */ html body .analysis-table td.team-header#posicao-fora-9-novo, html body .analysis-table td.team-header#fator-fora-9-novo, html body .analysis-table td.team-header#posicao-fora-10-novo, html body .analysis-table td.team-header#fator-fora-10-novo, html body .analysis-table td.team-header#posicao-fora-11-novo, html body .analysis-table td.team-header#fator-fora-11-novo, html body .analysis-table td.team-header#posicao-fora-12-novo, html body .analysis-table td.team-header#fator-fora-12-novo, html body .analysis-table td.team-header#posicao-fora-13-novo, html body .analysis-table td.team-header#fator-fora-13-novo, html body .analysis-table td.team-header#posicao-fora-14-novo, html body .analysis-table td.team-header#fator-fora-14-novo { text-align: center !important; } /* Coluna "Análise" (4ª coluna) */ .analysis-table td[id^="posicao-analise-"], .analysis-table td[id^="h2h-analise-"], .analysis-table td[id^="fator-analise-"], .analysis-table td[id^="forma-analise-"] { font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ line-height: 1.4 !important; } /* ======================================== 🎯 CABEÇALHOS DA TABELA (THEAD) PADRONIZADO: 17px E BRANCO ======================================== */ .analysis-table th { font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ } .page--otimizador-aposta .choice-buttons { display: grid !important; /* Layout grid para desktop tamb�m */ grid-template-columns: repeat(3, 1fr) !important; /* 3 colunas */ grid-template-rows: repeat(2, 1fr) !important; /* 2 linhas */ gap: 4px !important; /* Espa�amento original */ width: 100% !important; } .page--otimizador-aposta .choice-btn { padding: 8px 12px !important; /* Tamanho original */ margin: 2px !important; /* Margem original */ font-size: inherit !important; /* Fonte original */ border-radius: 4px !important; /* Border radius original */ min-width: auto !important; /* Largura autom�tica */ height: auto !important; /* Altura autom�tica */ display: flex !important; align-items: center !important; justify-content: center !important; } /* RESTAURAR TEXTO "JOGO" NO DESKTOP */ .page--otimizador-aposta .optimization-table th:nth-child(1) { font-size: inherit !important; /* Tamanho original */ line-height: inherit !important; /* Altura original */ } .page--otimizador-aposta .optimization-table th:nth-child(1)::after { content: none !important; /* Remover "N�" no desktop */ } /* REMOVER ESPA�AMENTO EXTRA NO DESKTOP */ .page--otimizador-aposta .optimization-table th:nth-child(3), .page--otimizador-aposta .optimization-table th:nth-child(4), .page--otimizador-aposta .optimization-table th:nth-child(5), .page--otimizador-aposta .optimization-table th:nth-child(6) { word-spacing: normal !important; /* Espa�amento normal no desktop */ } /* RESTAURAR TAMANHO ORIGINAL DOS BADGES NO DESKTOP */ .page--otimizador-aposta .optimization-table .status-badge { font-size: inherit !important; /* Tamanho original */ padding: inherit !important; /* Padding original */ } /* RESTAURAR LAYOUT ORIGINAL DAS COLUNAS NO DESKTOP */ .page--otimizador-aposta .optimization-table th:nth-child(3) { font-size: inherit !important; /* Mostrar "Classifica��o" */ line-height: inherit !important; } .page--otimizador-aposta .optimization-table th:nth-child(3)::after { content: none !important; /* Remover "Recomenda��o" */ } .page--otimizador-aposta .optimization-table th:nth-child(4) { font-size: inherit !important; /* Mostrar t�tulo "Sugest�o" */ line-height: inherit !important; } .page--otimizador-aposta .optimization-table th:nth-child(4), .page--otimizador-aposta .optimization-table td:nth-child(4) { display: table-cell !important; /* Mostrar coluna "Sugest�o" */ } /* RESTAURAR LAYOUT ORIGINAL DA TABELA NO DESKTOP */ .page--otimizador-aposta .optimization-table { table-layout: fixed !important; /* Layout fixo no desktop */ width: 100% !important; /* Largura total no desktop */ } /* REMOVER LARGURAS M�NIMAS NO DESKTOP */ .page--otimizador-aposta .optimization-table th:nth-child(1), .page--otimizador-aposta .optimization-table td:nth-child(1), .page--otimizador-aposta .optimization-table th:nth-child(2), .page--otimizador-aposta .optimization-table td:nth-child(2), .page--otimizador-aposta .optimization-table th:nth-child(3), .page--otimizador-aposta .optimization-table td:nth-child(3), .page--otimizador-aposta .optimization-table th:nth-child(4), .page--otimizador-aposta .optimization-table td:nth-child(4), .page--otimizador-aposta .optimization-table th:nth-child(5), .page--otimizador-aposta .optimization-table td:nth-child(5), .page--otimizador-aposta .optimization-table th:nth-child(6), .page--otimizador-aposta .optimization-table td:nth-child(6) { min-width: auto !important; /* Larguras autom�ticas no desktop */ } /* REMOVER SCROLL HORIZONTAL NO DESKTOP */ .page--otimizador-aposta .table-responsive { overflow-x: visible !important; /* Sem scroll horizontal no desktop */ } } /* Reduzir logo em mobile */ .header img.logo { max-width: 150px; /* Reduzido de 200px para 150px em mobile */ } /* Reduzir textos do cabe�alho em mobile - FOR�AR COM !important */ .header h1 { font-size: 1.25rem !important; /* Reduzido para 20px (1.25rem) */ } .header p { font-size: 0.625rem !important; /* Reduzido para 10px (0.625rem) */ } .escudo-time { width: 40px; height: 40px; margin: 0 8px; } .time-info { font-size: 14px; } .vs-divider { font-size: 18px; margin: 0 10px; } .game-card-body { padding: 2rem; } /* Se��o de Probabilidades */ .probabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; text-align: center; } .prob-item { background-color: rgba(0,0,0,0.2); padding: 1rem; border-radius: 8px; border: 1px solid var(--cor-borda); } .prob-item .label { font-size: 0.9rem; font-weight: 500; color: var(--cor-texto-secundario); } .prob-item .value { font-size: 2.2rem; font-weight: 800; margin-top: 0.5rem; } .prob-item.col1 .value { color: var(--cor-destaque-secundaria); } .prob-item.colX .value { color: var(--cor-equilibrio); } .prob-item.col2 .value { color: var(--cor-destaque-primaria); } /* Loading State para Probabilidades */ .loading-spinner { animation: spin 1s linear infinite; margin-right: 0.5rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .prob-item .value.loading { color: var(--cor-texto-secundario); font-size: 1.2rem; font-weight: 500; } /* Recomenda��o */ .recommendation { background-color: rgba(0, 227, 140, 0.1); border: 1px solid var(--cor-destaque-secundaria); color: var(--cor-destaque-secundaria); padding: 1rem; border-radius: 8px; text-align: center; margin-bottom: 2rem; } .recommendation strong { font-size: 1.1rem; font-weight: 700; } /* Tabela Raio-X */ .analysis-table { width: 100%; max-width: 100%; border-collapse: collapse; margin-bottom: 2rem; table-layout: fixed; } .analysis-table th, .analysis-table td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--cor-borda); } .analysis-table th { color: var(--cor-texto-secundario); font-weight: 600; font-size: 0.9rem; } .analysis-table td { font-weight: 500; font-size: 1rem; /* ✅ PADRONIZADO PARA DESKTOP */ } .analysis-table .team-header { text-align: center; font-size: 1.05rem; /* ✅ CÉLULAS DOS TIMES LIGEIRAMENTE MAIORES */ } /* Ajuste dos chips para mobile - �ltimos Confrontos */ @media (max-width: 768px) { .analysis-table .confrontos-sequence { transform-origin: left center; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; /* 5 colunas para 2 linhas de 5 boxes */ grid-template-rows: repeat(2, 1fr) !important; /* 2 linhas */ gap: 1px !important; /* Gap muito menor para condensar */ justify-items: center !important; /* Centralizar para evitar sobreposi��o */ align-items: center !important; } /* Ajustar o conte�do do chip */ .confrontos-sequence .confronto-item { gap: 0px !important; /* Sem gap para condensar */ padding: 1px !important; /* Padding m�nimo para condensar */ font-size: 0.4rem !important; /* Fonte menor para condensar */ min-width: 0 !important; /* Remover min-width para usar toda largura dispon�vel */ width: 100% !important; /* Usar toda largura do grid */ margin: 0 !important; /* Sem margem para condensar */ justify-content: center !important; /* Centralizar horizontalmente */ align-items: center !important; /* Centralizar verticalmente */ } /* Aplicar estilos condensados APENAS em mobile - n�o afeta desktop */ .confrontos-sequence .confronto-item { min-width: 0 !important; width: 100% !important; padding: 1px !important; /* Padding condensado apenas em mobile */ margin: 0 !important; /* Sem margem apenas em mobile */ } .confrontos-sequence .confronto-data { font-size: 0.3rem !important; /* Redu��o para condensar */ line-height: 1 !important; /* Line-height menor para condensar */ } .confrontos-sequence .confronto-placar { font-size: 0.32rem !important; /* Redu��o para condensar */ line-height: 1 !important; /* Line-height menor para condensar */ font-weight: 600 !important; } .confrontos-sequence .confronto-result { width: 8px !important; /* Redu��o para condensar */ height: 8px !important; /* Redu��o para condensar */ } /* REMOVIDO - Escudos ficam visíveis em mobile */ /* .confrontos-sequence .confronto-escudo { display: none !important; } */ .confrontos-sequence .confronto-result.empate { width: 8px !important; /* 12px * 0.67 */ height: 8px !important; /* 12px * 0.67 */ font-size: 0.32rem !important; /* 0.45rem * 0.7 */ line-height: 1 !important; } } /* Redu��o de 30% + 20% adicional para elementos dos confrontos em ambientes responsivos */ @media (max-width: 768px) { /* For�ar estilos inline hardcoded a respeitarem media queries */ .confronto-item[style*="min-width: 42px"] { min-width: 34px !important; /* 42px * 0.8 */ } .confronto-item[style*="padding: 6px"] { padding: 5px !important; /* 6px * 0.83 */ } .confronto-item[style*="min-width: 34px"] { min-width: 34px !important; /* J� correto */ } .confronto-item[style*="padding: 5px"] { padding: 5px !important; /* J� correto */ } /* Estilos gerais para confrontos */ .confronto-item { min-width: 34px !important; /* 42px * 0.8 */ padding: 2px !important; /* 3px * 0.67 */ gap: 1px !important; /* 2px * 0.5 */ } .confronto-data { font-size: 0.37rem !important; /* 0.46rem * 0.8 */ } .confronto-placar { font-size: 0.39rem !important; /* 0.49rem * 0.8 */ margin-bottom: 1px !important; /* 2px * 0.5 */ border-radius: 2px !important; /* 3px * 0.67 */ padding: 1px 2px !important; /* 1px 3px * 0.67 */ } /* For�ar especificidade para confrontos dentro de tabelas */ .analysis-table .confronto-item { min-width: 34px !important; /* 42px * 0.8 */ padding: 2px !important; /* 3px * 0.67 */ gap: 1px !important; font-size: 0.36rem !important; /* 0.45rem * 0.8 */ } .analysis-table .confronto-data { font-size: 0.37rem !important; /* 0.46rem * 0.8 */ } .analysis-table .confronto-placar { font-size: 0.39rem !important; /* 0.49rem * 0.8 */ margin-bottom: 1px !important; border-radius: 2px !important; /* 3px * 0.67 */ padding: 1px 2px !important; /* 1px 3px * 0.67 */ } } @media (max-width: 1024px) { /* Condensar boxes APENAS em tablets - n�o afeta desktop */ .analysis-table .confrontos-sequence { gap: 2px !important; /* Gap menor para condensar */ justify-items: center !important; /* Centralizar para evitar sobreposi��o */ } .confrontos-sequence .confronto-item { min-width: 0 !important; /* Remover min-width para usar toda largura */ width: 100% !important; /* Usar toda largura dispon�vel */ padding: 2px !important; /* Padding menor para condensar */ margin: 0 !important; /* Sem margem para condensar */ } .confrontos-sequence .confronto-data { font-size: 0.32rem !important; /* Fonte menor para condensar */ line-height: 1 !important; /* Line-height menor para condensar */ } .confrontos-sequence .confronto-placar { font-size: 0.35rem !important; /* Fonte menor para condensar */ line-height: 1 !important; /* Line-height menor para condensar */ } .confronto-data { font-size: 0.37rem !important; /* 0.46rem * 0.8 */ } .confronto-placar { font-size: 0.39rem !important; /* 0.49rem * 0.8 */ margin-bottom: 1px !important; /* 2px * 0.5 */ border-radius: 2px !important; /* 3px * 0.67 */ padding: 1px 2px !important; /* 1px 3px * 0.67 */ } /* For�ar especificidade para confrontos dentro de tabelas */ .analysis-table .confronto-item { min-width: 34px !important; /* 42px * 0.8 */ padding: 2px !important; /* 3px * 0.67 */ gap: 1px !important; font-size: 0.36rem !important; /* 0.45rem * 0.8 */ } .analysis-table .confronto-data { font-size: 0.37rem !important; /* 0.46rem * 0.8 */ } .analysis-table .confronto-placar { font-size: 0.39rem !important; /* 0.49rem * 0.8 */ margin-bottom: 1px !important; border-radius: 2px !important; /* 3px * 0.67 */ padding: 1px 2px !important; /* 1px 3px * 0.67 */ } } .status-icon { font-size: 1.2rem; margin-right: 0.5rem; } .status-icon.vantagem { color: var(--cor-vantagem); } .status-icon.desvantagem { color: var(--cor-desvantagem); } .status-icon.equilibrio { color: var(--cor-equilibrio); } /* Conclus�o do Analista */ .analyst-conclusion { background-color: rgba(0,0,0,0.2); padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--cor-destaque-primaria); } .analyst-conclusion h4 { margin: 0 0 0.5rem 0; color: var(--cor-destaque-primaria); font-weight: 700; } .analyst-conclusion p { margin: 0; line-height: 1.6; color: var(--cor-texto-secundario); } /* Rodap� */ .footer { text-align: center; padding: 2rem 1rem; border-top: 1px solid var(--cor-borda); margin-top: 2rem; font-size: 0.9rem; /* Tamanho original do desktop */ color: var(--cor-texto-secundario); } .footer a { color: var(--cor-destaque-secundaria); text-decoration: none; font-weight: 600; } /* ESTILOS DO RODAP� CTA */ .footer-cta { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 227, 140, 0.1)); /* Fundo levemente transparente */ border: none; /* Sem borda no container pai */ border-radius: 12px; padding: 2rem; margin-bottom: 2rem; text-align: center; } .footer-cta h3 { color: var(--cor-destaque-primaria); font-size: 1.5rem; /* Tamanho original do desktop */ font-weight: 700; margin: 0 0 1rem 0; } .footer-cta p { color: var(--cor-texto-secundario); font-size: 1.1rem; /* Tamanho original do desktop */ margin: 0 0 1.5rem 0; max-width: 600px; margin-left: auto; margin-right: auto; } .footer-cta-btn { display: inline-block; background: transparent; /* Fundo transparente */ border: 1px solid #00E38C; /* Borda mais fina e discreta */ color: #00E38C !important; /* Texto verde neon */ padding: 1rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1.1rem; /* Tamanho original do desktop */ text-decoration: none !important; transition: all 0.3s ease; box-shadow: 0 0 5px rgba(0, 227, 140, 0.2); /* Sombra mais sutil */ } .footer-cta-btn:hover { transform: translateY(-2px); background: rgba(0, 227, 140, 0.1); /* Fundo sutil verde no hover */ box-shadow: 0 0 8px rgba(0, 227, 140, 0.3); /* Sombra mais sutil no hover */ filter: brightness(1.1); } .footer-legal { text-align: center; padding-top: 1rem; border-top: 1px solid var(--cor-borda); } .footer-legal p { margin-bottom: 0.5rem; } /* ESTILOS DO RODAP� DE POL�TICA DE HONESTIDADE */ .honesty-footer { background: linear-gradient(135deg, rgba(30,27,41,.95), rgba(42,35,64,.95)); border-top: 1px solid rgba(255,255,255,0.08); padding: 10px 16px; font-size: 0.84rem; /* Tamanho original do desktop */ color: #cbd5e1; margin-top: 1rem; } .honesty-row { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .honesty-footer strong { color: #A855F7; font-weight: 700; } .honesty-footer a { color: #10b981; text-decoration: none; border-bottom: 1px dotted rgba(16,185,129,.35); } .honesty-footer a:hover { color: #059669; border-bottom-color: transparent; } .honesty-text { opacity: 0.9; } .honesty-toggle { background: transparent; border: 1px solid rgba(168,85,247,.6); color: #A855F7; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: transform .15s ease, background .2s, border-color .2s; } .honesty-toggle:hover { transform: translateY(-1px); background: rgba(168,85,247,.1); } /* ESTILOS DO MODAL DE POL�TICA DE HONESTIDADE */ .honesty-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .honesty-modal .modal-content { background: linear-gradient(135deg, #1e1b29, #2a2340); border-radius: 15px; max-width: 900px; width: 100%; max-height: 80vh; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } /* Modal de Confrontos */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 20px; } .confrontos-modal-content { background: linear-gradient(135deg, #1e1b29, #2a2340); border-radius: 15px; max-width: 900px; width: 100%; max-height: 80vh; overflow-y: auto; border: 1px solid rgba(50, 205, 50, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .modal-header { padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { color: #32CD32; margin: 0; font-size: 1.3rem; } .modal-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 5px 10px; border-radius: 50%; transition: background 0.3s ease; } .modal-close:hover { background: rgba(255, 255, 255, 0.1); } .modal-body { padding: 20px; } .confrontos-lista { display: flex; flex-direction: column; gap: 12px; } .confronto-item { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 15px; border-left: 4px solid #32CD32; display: grid; grid-template-columns: 100px 1fr 80px 120px; gap: 15px; align-items: center; transition: all 0.3s ease; } .confronto-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); } .confronto-data { color: #888; font-size: 0.9rem; font-weight: 600; } .confronto-detalhes { display: flex; align-items: center; gap: 10px; font-weight: 600; } .confronto-mandante, .confronto-visitante { color: #fff; min-width: 80px; } .confronto-placar { background: linear-gradient(135deg, #32CD32, #00FF00); color: #000; padding: 4px 8px; border-radius: 6px; font-weight: 700; font-size: 0.9rem; } /* ======================================== 🎯 REDUÇÃO DE 80% DAS FONTES DOS BOXES ======================================== Aplicado apenas nos boxes de "Últimos Confrontos" dentro das tabelas de análise (desktop) ======================================== */ .analysis-table .confrontos-sequence .confronto-data { font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA */ font-weight: 500; line-height: 1 !important; /* Line-height ajustado */ } .analysis-table .confrontos-sequence .confronto-placar { font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA */ font-weight: 600; padding: 1px 2px; /* Padding mínimo */ line-height: 1 !important; /* Line-height ajustado */ } .confronto-resultado { text-align: center; font-weight: 700; padding: 4px 8px; border-radius: 6px; font-size: 0.9rem; } .confronto-resultado.v { background: #00FF00; color: #000; } .confronto-resultado.e { background: #FFD700; color: #000; } .confronto-resultado.d { background: #FF4444; color: #fff; } .confronto-competicao { color: #888; font-size: 0.85rem; text-align: right; } /* Bolinhas dos �ltimos Confrontos */ .confrontos-sequence { display: flex; gap: 6px; justify-content: center; align-items: flex-end; flex-wrap: wrap; } /* ======================================== 🎯 LAYOUT EM GRID: 2 LINHAS x 5 COLUNAS ======================================== Organiza os 10 boxes em 2 linhas com espaço ======================================== */ .analysis-table .confrontos-sequence { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; /* 5 colunas */ grid-template-rows: repeat(2, 1fr) !important; /* 2 linhas */ row-gap: 20px !important; /* ✅ Espaço entre linhas 1 e 2 */ column-gap: 6px !important; /* ✅ Espaço ajustado para boxes maiores */ justify-items: center !important; align-items: center !important; } /* CSS para grid de confrontos em linha horizontal */ .confrontos-grid { display: flex; gap: 6px; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 10px; } .confronto-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; padding: 4px; } /* ======================================== 🎯 BOXES RETANGULARES DEITADOS ======================================== Largura > Altura (formato retangular horizontal) ELEMENTOS CENTRALIZADOS para elegância ======================================== */ .analysis-table .confrontos-sequence .confronto-item { min-width: 60px !important; /* ✅ LARGURA PERFEITA */ max-width: 70px !important; /* ✅ LARGURA MÁXIMA */ height: 45px !important; /* ✅ ALTURA PERFEITA */ padding: 5px 6px !important; /* Padding confortável */ gap: 2px !important; /* Gap entre elementos */ /* ✅ CENTRALIZAÇÃO DOS ELEMENTOS INTERNOS */ display: flex !important; flex-direction: column !important; align-items: center !important; /* Centraliza horizontalmente */ justify-content: center !important; /* Centraliza verticalmente */ } /* Centralizar DATA, PLACAR e ESCUDO individualmente */ .analysis-table .confrontos-sequence .confronto-data, .analysis-table .confrontos-sequence .confronto-placar, .analysis-table .confrontos-sequence .confronto-result { text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ESCUDOS mantêm tamanho original (20px) */ .analysis-table .confrontos-sequence .confronto-result img { width: 20px !important; /* MANTIDO: Tamanho original */ height: 20px !important; /* MANTIDO: Tamanho original */ } .analysis-table .confrontos-sequence .confronto-result { width: 20px !important; /* Container do escudo */ height: 20px !important; font-size: 0.5rem !important; /* Letra "E" de empate */ } /* ======================================== 🎯 REMOVER TABLE-LAYOUT FIXED - NÃO FUNCIONOU ======================================== */ /* ======================================== 🎯 COLUNA ANÁLISE - QUEBRA EM 2 LINHAS ======================================== Formata os textos da 4ª coluna "Análise" para exibir em 2 linhas ALINHADAS À DIREITA PADRONIZADO: 17px E BRANCO ======================================== */ .analysis-table tbody td:nth-child(4) { text-align: right !important; /* ✅ ALINHADO À DIREITA */ vertical-align: middle !important; line-height: 1.3 !important; padding: 8px 12px 8px 4px !important; /* Mais espaço à direita */ font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ max-width: 200px !important; /* Largura máxima */ min-width: 150px !important; /* Largura mínima */ width: 200px !important; /* Largura fixa */ white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; /* Hifenização automática */ } /* ======================================== 🎯 CASOS ESPECIAIS: Linhas com colspan ======================================== "Últimos Confrontos" e "Confronto Direto" têm colspan=2 então precisam de regra específica para a 3ª célula PADRONIZADO: 17px E BRANCO ======================================== */ .analysis-table tbody tr td:nth-child(3):not([colspan]) { text-align: right !important; /* Para células normais da coluna 3 */ } .analysis-table tbody tr td[colspan="2"] + td { text-align: right !important; /* Para célula APÓS colspan (coluna Análise) */ vertical-align: middle !important; line-height: 1.3 !important; padding: 8px 12px 8px 4px !important; font-size: 17px !important; /* ✅ PADRONIZADO: 17px */ color: #ffffff !important; /* ✅ BRANCO PURO */ font-weight: 400 !important; /* ✅ PESO NORMAL */ letter-spacing: 0.5px !important; /* ✅ ESPAÇAMENTO */ white-space: normal !important; } .confronto-data { font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA */ color: #888; font-weight: 600; white-space: nowrap; text-align: center; line-height: 1 !important; } .confronto-placar { font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA */ font-weight: 700; white-space: nowrap; text-align: center; line-height: 1 !important; color: #fff; margin-bottom: 2px; background: rgba(0, 0, 0, 0.3); border-radius: 4px; padding: 2px 4px; } /* Modal de Estat�sticas Detalhadas */ .estatisticas-modal-content { background: linear-gradient(135deg, #1e1b29, #2a2340); border-radius: 15px; max-width: 900px; width: 100%; max-height: 85vh; overflow-y: auto; border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .stats-grid-modal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; padding: 1rem; } .stat-section { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); } .stat-section h4 { color: var(--cor-destaque-primaria); margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid rgba(168, 85, 247, 0.3); padding-bottom: 0.5rem; } .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .stat-item:last-child { border-bottom: none; } .stat-name { color: var(--cor-texto-secundario); font-size: 0.9rem; font-weight: 500; } .stat-value { color: var(--cor-texto-principal); font-weight: 600; font-size: 10px; } .stat-value.destaque { color: var(--cor-destaque-secundaria); font-weight: 700; font-size: 1.1rem; } .forma-visual { font-family: 'Courier New', monospace; background: rgba(0, 0, 0, 0.3); padding: 0.25rem 0.5rem; border-radius: 4px; letter-spacing: 1px; } /* Responsividade do Modal */ @media (max-width: 768px) { .stats-grid-modal { grid-template-columns: 1fr; gap: 1rem; padding: 0.5rem; } .stat-section { padding: 1rem; } .estatisticas-modal-content { max-width: 95%; max-height: 90vh; } } .confronto-result { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; border-radius: 4px; } .confronto-result:hover { transform: scale(1.15); filter: brightness(1.1); } /* REMOVIDO - Escudos ficam visíveis */ /* .confronto-escudo { display: none !important; } */ /* Estilo para siglas dos times (substituindo escudos) */ .confronto-direto-sigla { font-weight: bold; font-size: 12px; color: var(--cor-destaque-primaria); padding: 4px 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; border: 1px solid var(--cor-borda); } /* Empate - Letra E simples */ .confronto-result.empate { width: 24px; height: 24px; /* border-radius: 50%; ? REMOVIDO: n�o queremos c�rculo */ /* background: #FFD700; ? REMOVIDO: n�o queremos fundo */ font-weight: 700; font-size: 0.7rem; color: #ffc107; /* Cor amarela apenas para a letra */ /* border: 2px solid #FFA500; ? REMOVIDO: n�o queremos borda */ } .honesty-modal .modal-header { padding: 20px 25px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .honesty-modal .modal-header h4 { color: #A855F7; font-size: 1.2rem; margin: 0; } .honesty-modal .modal-close { background: none; border: none; color: #cbd5e1; font-size: 24px; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; } .honesty-modal .modal-close:hover { background: rgba(255, 255, 255, 0.1); } .honesty-modal .modal-body { padding: 20px 25px 25px; color: #cbd5e1; line-height: 1.6; } .honesty-modal details { margin: 15px 0; border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 8px; padding: 10px; background: rgba(168, 85, 247, 0.05); } .honesty-modal details summary { cursor: pointer; padding: 8px 0; color: #A855F7; font-weight: 600; list-style: none; } .honesty-modal details summary::-webkit-details-marker { display: none; } .honesty-modal details summary::before { content: "? "; margin-right: 8px; transition: transform 0.2s; } .honesty-modal details[open] summary::before { transform: rotate(90deg); } .honesty-modal details ul { margin: 10px 0 0 20px; padding: 0; } .honesty-modal details li { margin: 8px 0; color: #e2e8f0; } .honesty-modal a { color: #10b981; text-decoration: none; border-bottom: 1px dotted rgba(16, 185, 129, 0.5); } .honesty-modal a:hover { color: #059669; border-bottom-color: transparent; } /* ESTILOS DA ABA 3: PANORAMA DOS CAMPEONATOS */ .panorama-container { padding: 2rem 0; } /* Sub-abas */ .sub-tabs-container { margin-bottom: 2rem; } .sub-tabs-nav { display: flex; gap: 0.5rem; background-color: rgba(0,0,0,0.2); border-radius: 12px; padding: 0.5rem; margin-bottom: 2rem; max-width: 100%; margin-left: auto; margin-right: auto; } .sub-tab-btn { flex: 1; max-width: 200px; padding: 0.8rem 1.5rem; background-color: transparent; color: var(--cor-texto-secundario); border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .sub-tab-btn:hover { background-color: rgba(168, 85, 247, 0.1); color: var(--cor-destaque-primaria); } .sub-tab-btn.active { background: linear-gradient(135deg, var(--cor-destaque-secundaria), #00B377); color: white; box-shadow: 0 2px 8px rgba(0, 227, 140, 0.3); } .sub-tab-content { animation: fadeIn 0.3s ease-in-out; } /* FOR�A DOS ELENCOS - CENTRALIZA��O E LARGURA */ .forca-elenco-container { max-width: 100%; margin: 0 auto; padding: 0; width: 100%; position: relative; } .forca-elenco-container .section-header { max-width: 100%; margin: 0 auto; text-align: center; } .forca-elenco-container .sub-tabs-container { max-width: 100%; margin: 0 auto; } .forca-elenco-container .sub-tab-content { max-width: 100%; margin: 0 auto; padding: 0; } /* GARANTIR QUE TODOS OS ELEMENTOS FILHOS RESPEITEM A LARGURA DO PAI */ .forca-elenco-container * { max-width: 100%; box-sizing: border-box; } /* ESPEC�FICO PARA CONTE�DO DIN�MICO */ .forca-elenco-container .forca-elenco-dashboard { max-width: 100%; margin: 0 auto; } .forca-elenco-container .times-loteca-section { max-width: 100%; margin: 0 auto; } /* CSS espec�fico para o t�tulo da sub-aba Plantel ($) */ .forca-elenco-container .times-loteca-section .section-header { max-width: 100%; margin: 0 auto; text-align: center; padding: 0 1rem; } .forca-elenco-container .times-loteca-section .section-header h2 { color: var(--cor-destaque-primaria); font-size: 1.8rem; font-weight: 700; margin: 0 auto 0.5rem; text-align: center; max-width: 100%; } .forca-elenco-container .loading-container { max-width: 100%; margin: 0 auto; text-align: center; } /* TABELAS E GRIDS DENTRO DA ABA FOR�A DOS ELENCOS */ .forca-elenco-container table { max-width: 100%; margin: 0 auto; width: 100%; } .forca-elenco-container .grid { max-width: 100%; margin: 0 auto; } .forca-elenco-container .card { max-width: 100%; margin: 0 auto; } /* RESPONSIVIDADE ESPEC�FICA PARA FOR�A DOS ELENCOS */ @media (max-width: 768px) { /* ===== ESCONDER CAIXAS DE INFO (Resumo/Dados) EM MOBILE ===== */ .forca-elenco-container .info-box { display: none !important; /* Esconder para economizar espaço */ } /* ===== TÍTULOS DAS TABELAS (Série A, B, Top 100) - MESMO PADRÃO DO PLANTEL ===== */ .forca-elenco-container .fe-tab-content h2, .forca-elenco-dashboard h2, .forca-elenco-container #serie-a h2, .forca-elenco-container #serie-b h2, .forca-elenco-container #top100 h2 { font-size: 11px !important; /* Mesmo tamanho do Plantel ($) */ color: var(--cor-destaque-primaria) !important; /* Mesma cor */ font-weight: 700 !important; margin-bottom: 0.5rem !important; text-align: center !important; } /* APLICAR MESMAS CONFIGURA��ES DE FONTE DA ABA OTIMIZADOR DE APOSTA */ /* 1. T�TULOS DAS SE��ES - MESMO PADR�O DO OTIMIZADOR */ .forca-elenco-container .section-header h2 { font-size: 12px !important; /* Mesmo tamanho dos t�tulos do Otimizador */ color: var(--cor-destaque-primaria) !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; } .forca-elenco-container .section-header h3 { font-size: 10px !important; /* Subt�tulos menores */ color: var(--cor-texto-secundario) !important; font-weight: 600 !important; } } /* ===== LANDSCAPE: TAMBÉM ESCONDER INFO-BOXES ===== */ @media (orientation: landscape) and (max-height: 800px) { .forca-elenco-container .info-box { display: none !important; /* Esconder em landscape também */ } /* Títulos das tabelas em landscape (Mobile) */ .forca-elenco-container .fe-tab-content h2, .forca-elenco-dashboard h2, .forca-elenco-container #serie-a h2, .forca-elenco-container #serie-b h2, .forca-elenco-container #top100 h2 { font-size: 10px !important; /* Mesmo tamanho do Plantel em landscape */ color: var(--cor-destaque-primaria) !important; font-weight: 700 !important; margin-bottom: 0.4rem !important; } } /* ===== TABLET LANDSCAPE (altura maior) ===== */ @media (orientation: landscape) and (min-height: 501px) and (max-height: 800px) { .forca-elenco-container .fe-tab-content h2, .forca-elenco-dashboard h2, .forca-elenco-container #serie-a h2, .forca-elenco-container #serie-b h2, .forca-elenco-container #top100 h2 { font-size: 12px !important; /* Tamanho intermediário para tablet */ color: var(--cor-destaque-primaria) !important; font-weight: 700 !important; } } /* 2. TEXTOS DAS CAIXAS - MESMO PADR�O (9px) */ .forca-elenco-container .card h4, .forca-elenco-container .card h5 { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: #cbd5e1 !important; /* Cinza claro para melhor legibilidade */ font-weight: 600 !important; margin-bottom: 0.3rem !important; } .forca-elenco-container .card p, .forca-elenco-container .card span { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: #cbd5e1 !important; /* Cinza claro para melhor legibilidade */ line-height: 1.2 !important; } /* 3. VALORES E ESTAT�STICAS - MESMO PADR�O */ .forca-elenco-container .stat-value { font-size: 10px !important; /* Todos com 10px */ color: #e2e8f0 !important; /* Cinza claro forte para valores */ font-weight: bold !important; } .forca-elenco-container .stat-subvalue { font-size: 10px !important; /* Todos com 10px */ color: #cbd5e1 !important; /* Cinza claro para melhor legibilidade */ } /* 4. BADGES E LABELS - MESMO PADR�O */ .forca-elenco-container .time-badge, .forca-elenco-container .badge-mediano, .forca-elenco-container .badge-destaque, .forca-elenco-container .badge-elite, .forca-elenco-container .badge-forte, .forca-elenco-container .badge-desenvolvimento, .forca-elenco-container .badge-erro { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.2rem 0.4rem !important; /* Padding compacto */ } /* 5. BARRAS DE PROGRESSO - MESMO PADR�O */ .forca-elenco-container .forca-bar { height: 4px !important; /* Barra mais fina */ margin-top: 0.2rem !important; } /* 6. TABELAS E GRIDS - MESMO PADR�O */ .forca-elenco-container table th, .forca-elenco-container table td { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.3rem 0.2rem !important; /* Padding compacto */ } .forca-elenco-container table th { color: var(--cor-texto-secundario) !important; font-weight: 600 !important; } .forca-elenco-container table td { color: var(--cor-texto-principal) !important; } /* 7. BOT�ES E LINKS - MESMO PADR�O */ .forca-elenco-container .ver-detalhes-btn { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.4rem 0.8rem !important; /* Padding compacto */ } /* 8. CONTAINERS E CARDS - PADDING COMPACTO */ .forca-elenco-container .card { padding: 0.8rem !important; /* Padding menor */ } .forca-elenco-container .campo-item { padding: 1rem !important; /* Padding menor */ } /* 9. ELEMENTOS ESPEC�FICOS - MESMO PADR�O */ .forca-elenco-container .vs-divider-confronto { font-size: 12px !important; /* Tamanho adequado para mobile */ width: 40px !important; height: 40px !important; } /* 10. CAMPOS DE AN�LISE - MESMO PADR�O */ .forca-elenco-container .campo-nome { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ font-weight: 700 !important; } .forca-elenco-container .campo-explicacao, .forca-elenco-container .campo-importancia { font-size: 8px !important; /* Texto menor para mobile */ padding: 0.5rem !important; /* Padding menor */ } /* 11. ELEMENTOS ESPEC�FICOS DA FOR�A DOS ELENCOS */ .forca-elenco-container .team-name, .forca-elenco-container .team-value, .forca-elenco-container .team-stats { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; } .forca-elenco-container .team-name { font-weight: 600 !important; } .forca-elenco-container .team-value { font-weight: bold !important; color: var(--cor-texto-principal) !important; } /* 12. GRIDS E LAYOUTS - MESMO PADR�O */ .forca-elenco-container .grid { gap: 0.5rem !important; /* Gap menor */ } .forca-elenco-container .grid-item { padding: 0.5rem !important; /* Padding menor */ } /* 13. ELEMENTOS DE COMPARA��O - MESMO PADR�O */ .forca-elenco-container .comparison-item, .forca-elenco-container .comparison-value { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; } .forca-elenco-container .comparison-value { font-weight: bold !important; color: var(--cor-texto-principal) !important; } /* 14. ELEMENTOS DE AN�LISE - MESMO PADR�O */ .forca-elenco-container .analysis-item, .forca-elenco-container .analysis-text { font-size: 8px !important; /* Texto menor para mobile */ color: var(--cor-texto-secundario) !important; line-height: 1.3 !important; } /* 15. ELEMENTOS DE RESULTADO - MESMO PADR�O */ .forca-elenco-container .result-item, .forca-elenco-container .result-value { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-principal) !important; font-weight: 600 !important; } /* 16. CONTAINERS DOS TIMES - AJUSTAR PARA MOBILE */ .forca-elenco-container .team-comparison-container { display: flex !important; /* Layout flex para lado a lado */ gap: 0.5rem !important; /* Gap menor entre os times */ margin-bottom: 1rem !important; /* Espa�o entre confrontos */ } .forca-elenco-container .team-card { flex: 1 !important; /* Distribuir igualmente */ max-width: 48% !important; /* M�ximo 48% para cada time */ padding: 0.8rem !important; /* Padding menor */ margin: 0 !important; /* Remover margens */ } /* 17. ELEMENTOS DENTRO DOS CARDS DOS TIMES */ .forca-elenco-container .team-card .team-name { font-size: 10px !important; /* Nome do time menor */ font-weight: 700 !important; margin-bottom: 0.3rem !important; } .forca-elenco-container .team-card .team-badge { font-size: 8px !important; /* Badge menor */ padding: 0.2rem 0.4rem !important; /* Padding menor */ } .forca-elenco-container .team-card .team-stats { font-size: 8px !important; /* Estat�sticas menores */ margin-bottom: 0.2rem !important; /* Margem menor */ } .forca-elenco-container .team-card .team-stats .stat-label { font-size: 10px !important; /* Todos com 10px */ color: #e2e8f0 !important; /* Mesma cor dos valores - mais claro */ } .forca-elenco-container .team-card .team-stats .stat-value { font-size: 10px !important; /* Todos com 10px */ font-weight: 600 !important; color: #e2e8f0 !important; /* Cinza claro forte para valores */ } /* 18. BARRAS DE PROGRESSO DOS TIMES */ .forca-elenco-container .team-card .strength-bar { height: 3px !important; /* Barra mais fina */ margin: 0.2rem 0 !important; /* Margem menor */ } .forca-elenco-container .team-card .strength-value { font-size: 9px !important; /* Valor da for�a menor */ font-weight: bold !important; } /* 19. BOT�ES DOS TIMES */ .forca-elenco-container .team-card .team-buttons { margin-top: 0.5rem !important; /* Margem menor */ } .forca-elenco-container .team-card .team-buttons button { font-size: 7px !important; /* Bot�es menores */ padding: 0.3rem 0.5rem !important; /* Padding menor */ margin: 0.1rem 0 !important; /* Margem menor entre bot�es */ width: 100% !important; /* Largura total */ } /* 20. VS DIVIDER ENTRE OS TIMES */ .forca-elenco-container .vs-divider { width: 30px !important; /* VS menor */ height: 30px !important; font-size: 10px !important; /* Fonte do VS menor */ margin: 0 0.3rem !important; /* Margem menor */ } /* 21. CONFIGURA��ES ESPEC�FICAS PARA LAYOUT LADO A LADO */ .forca-elenco-container .game-comparison { display: flex !important; /* Layout flex para lado a lado */ align-items: center !important; /* Centralizar verticalmente */ justify-content: space-between !important; /* Distribuir espa�o */ margin-bottom: 1.5rem !important; /* Espa�o entre jogos */ } .forca-elenco-container .game-comparison .team-container { flex: 1 !important; /* Distribuir igualmente */ max-width: 45% !important; /* M�ximo 45% para cada time */ margin: 0 !important; /* Remover margens */ } /* 22. AJUSTAR ESPECIFICAMENTE PARA TELAS MUITO PEQUENAS */ @media (max-width: 480px) { .forca-elenco-container .team-card { padding: 0.6rem !important; /* Padding ainda menor */ } .forca-elenco-container .team-card .team-name { font-size: 9px !important; /* Nome ainda menor */ } .forca-elenco-container .team-card .team-stats { font-size: 7px !important; /* Estat�sticas ainda menores */ } .forca-elenco-container .team-card .team-buttons button { font-size: 6px !important; /* Bot�es ainda menores */ padding: 0.2rem 0.3rem !important; /* Padding ainda menor */ } .forca-elenco-container .vs-divider { width: 25px !important; /* VS ainda menor */ height: 25px !important; font-size: 8px !important; /* Fonte do VS ainda menor */ } } .forca-elenco-container { padding: 0 0.5rem; } .forca-elenco-container .sub-tabs-nav { flex-direction: row !important; /* Manter em linha horizontal como desktop */ gap: 0.3rem !important; /* Gap menor para mobile */ padding: 0.3rem !important; /* Padding menor */ flex-wrap: wrap !important; /* Permitir quebra se necess�rio */ justify-content: center !important; /* Centralizar */ } .forca-elenco-container .sub-tab-btn { max-width: none !important; width: auto !important; /* Largura autom�tica */ min-width: 0 !important; /* Largura m�nima flex�vel */ flex: 1 !important; /* Distribuir igualmente */ padding: 0.6rem 0.4rem !important; /* Padding menor para mobile */ font-size: 10px !important; /* Padronizado para 10px */ text-align: center !important; /* Centralizar texto */ white-space: nowrap !important; /* N�o quebrar texto */ overflow: hidden !important; /* Cortar texto se necess�rio */ text-overflow: ellipsis !important; /* ... se texto for muito longo */ } /* CONFIGURA��ES ESPEC�FICAS PARA SUB-ABAS EM MOBILE */ .forca-elenco-container .sub-tabs-nav { display: flex !important; /* Garantir display flex */ align-items: center !important; /* Centralizar verticalmente */ background-color: rgba(0,0,0,0.2) !important; /* Fundo sutil */ border-radius: 8px !important; /* Bordas arredondadas */ margin-bottom: 1rem !important; /* Espa�o abaixo */ } /* AJUSTAR ESPECIFICAMENTE PARA TELAS MUITO PEQUENAS */ @media (max-width: 480px) { .forca-elenco-container .sub-tab-btn { font-size: 10px !important; /* Padronizado para 10px */ padding: 0.5rem 0.3rem !important; /* Padding ainda menor */ } .forca-elenco-container .sub-tabs-nav { gap: 0.2rem !important; /* Gap ainda menor */ padding: 0.2rem !important; /* Padding ainda menor */ } } } /* Seletor de Campeonato */ .championship-selector { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; text-align: center; } .championship-selector h3 { color: var(--cor-destaque-primaria); margin: 0 0 1.5rem 0; font-size: 1.2rem; } .championship-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: nowrap; align-items: center; } .champ-btn { padding: 0.8rem 1.2rem; background-color: var(--cor-fundo); color: var(--cor-texto-secundario); border: 2px solid var(--cor-borda); border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; flex: 1; max-width: 120px; } .champ-btn:hover { border-color: var(--cor-destaque-primaria); color: var(--cor-destaque-primaria); } .champ-btn.active { background: linear-gradient(135deg, var(--cor-destaque-primaria), #9333EA); color: white; border-color: var(--cor-destaque-primaria); } /* === BOT�ES INTERNACIONAIS (MESMO ESTILO DOS NACIONAIS) === */ .intl-champ-btn { padding: 0.8rem 1.5rem; background-color: var(--cor-fundo); color: var(--cor-texto-secundario); border: 2px solid var(--cor-borda); border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .intl-champ-btn:hover { border-color: var(--cor-destaque-primaria); color: var(--cor-destaque-primaria); } .intl-champ-btn.active { background: linear-gradient(135deg, var(--cor-destaque-primaria), #9333EA); color: white; border-color: var(--cor-destaque-primaria); } /* === SELETOR INTERNACIONAL (MESMO LAYOUT DOS NACIONAIS) === */ .international-selector { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } /* === TABELAS INTERNACIONAIS (MESMO ESTILO DAS NACIONAIS) === */ #internacionais .classification-table { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; display: none; } #internacionais .classification-table.active { display: block; } /* T�tulo das se��es internacionais */ #current-international-title { color: var(--cor-texto-principal); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } /* Informa��es da fonte internacional */ #internacionais .table-info { display: flex; gap: 2rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cor-borda); } #internacionais .info-item { display: flex; align-items: center; gap: 0.5rem; } #internacionais .info-label { color: var(--cor-texto-secundario); font-size: 0.85rem; } #internacionais .info-value { color: var(--cor-destaque-primaria); font-weight: 600; font-size: 0.85rem; } /* Container da Tabela de Classifica��o */ .classification-table-container { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; } .table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .table-header h4 { color: var(--cor-destaque-primaria); margin: 0; font-size: 1.3rem; font-weight: 700; } /* Tabela de Classifica��o */ .classification-table { display: none; } .classification-table.active { display: block; } .brasileirao-table, .standings-table { width: 100%; max-width: 100%; border-collapse: collapse; background-color: var(--cor-fundo); border-radius: 8px; overflow: hidden; table-layout: fixed; } .brasileirao-table th, .standings-table thead, .standings-table thead { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 227, 140, 0.1)); } .brasileirao-table th, .standings-table th { padding: 1rem 0.8rem; text-align: center; color: var(--cor-texto-principal); font-weight: 600; font-size: 0.85rem; border-bottom: 1px solid var(--cor-borda); } /* ⚠️ REMOVIDO: Regras de :first-child conflitavam com nth-child específicos */ .brasileirao-table td, .standings-table td { padding: 0.8rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem; } .brasileirao-table tr, .standings-table tr:hover { background-color: rgba(168, 85, 247, 0.05); } /* Posi��o na tabela */ .team-position { color: var(--cor-destaque-primaria); font-weight: 700; margin-right: 0.8rem; } .team-name { color: var(--cor-texto-principal); font-weight: 600; } /* Cores de classifica��o - Barras verticais */ .libertadores { border-left: 6px solid #10B981; /* Verde - G4 Libertadores Direto */ background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), transparent); } .pre-libertadores { border-left: 6px solid #3B82F6; /* Azul - Pr�-Libertadores */ background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent); } .sul-americana { border-left: 6px solid #F59E0B; /* Laranja - Sul-Americana */ background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), transparent); } .meio-tabela { border-left: 6px solid #6B7280; /* Cinza - Zona Neutra */ background: linear-gradient(90deg, rgba(107, 114, 128, 0.1), transparent); } .rebaixamento { border-left: 6px solid #EF4444; /* Vermelho - Z4 Rebaixamento */ background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), transparent); } /* RODAP� COM INFORMA��ES DAS ZONAS */ .table-footer { margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(0, 227, 140, 0.05)); border-radius: 12px; border: 1px solid var(--cor-borda); } .zones-info h4 { color: var(--cor-destaque-primaria); margin: 0 0 1.5rem 0; font-size: 1.2rem; font-weight: 700; text-align: center; } .zones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .zone-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--cor-fundo-card); border-radius: 8px; border: 1px solid var(--cor-borda); transition: all 0.3s ease; } .zone-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .zone-item .zone-bar { width: 6px; height: 40px; border-radius: 3px; flex-shrink: 0; } .zone-item.libertadores .zone-bar { background: linear-gradient(180deg, #10B981, #059669); /* Verde - G4 */ } .zone-item.pre-libertadores .zone-bar { background: linear-gradient(180deg, #3B82F6, #1E40AF); /* Azul - Pr�-Libertadores */ } .zone-item.sul-americana .zone-bar { background: linear-gradient(180deg, #F59E0B, #D97706); /* Laranja - Sul-Americana */ } .zone-item.meio-tabela .zone-bar { background: linear-gradient(180deg, #6B7280, #4B5563); /* Cinza - Zona Neutra */ } .zone-item.rebaixamento .zone-bar { background: linear-gradient(180deg, #EF4444, #DC2626); /* Vermelho - Z4 */ } .zone-text { display: flex; flex-direction: column; gap: 0.25rem; } .zone-text strong { color: var(--cor-texto-principal); font-size: 0.95rem; font-weight: 600; } .zone-text span { color: var(--cor-texto-secundario); font-size: 0.85rem; } /* ESTILOS PARA S�RIE C */ .grupo-container { margin-bottom: 2rem; background: var(--cor-fundo-card); border-radius: 12px; padding: 1.5rem; border: 1px solid var(--cor-borda); } .grupo-titulo { color: var(--cor-destaque-primaria); font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem 0; text-align: center; background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 227, 140, 0.1)); padding: 0.8rem; border-radius: 8px; } .semi-final-destaque { background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), transparent) !important; border-left: 6px solid #3B82F6 !important; font-weight: 600; } .semi-final-destaque .team-name { color: #3B82F6 !important; font-weight: 700; } .table-footer { margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(0, 227, 140, 0.05)); border-radius: 12px; border: 1px solid var(--cor-borda); } .table-footer .final-info { margin-top: 0; padding: 0; } .final-info h4 { color: var(--cor-destaque-primaria); margin: 0 0 1rem 0; font-size: 1.2rem; font-weight: 700; text-align: center; } .final-match { text-align: center; color: var(--cor-texto-principal); } .final-match h5 { color: var(--cor-destaque-primaria); font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem 0; } .match-info { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .match-date { background: var(--cor-fundo-card); padding: 1rem; border-radius: 8px; border: 1px solid var(--cor-borda); min-width: 200px; } .match-date strong { color: var(--cor-destaque-primaria); display: block; margin-bottom: 0.5rem; } /* ZONAS PREMIER LEAGUE */ .champions-league { border-left: 6px solid #3B82F6; /* Azul */ background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent); } .europa-league { border-left: 6px solid #F59E0B; /* Laranja */ background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent); } .conference-league { border-left: 6px solid #F59E0B; /* Laranja */ background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent); } /* �ltimos jogos */ .ultimos-jogos { display: flex; gap: 3px; justify-content: center; align-items: center; /* ⬅️ CENTRALIZAR VERTICALMENTE */ flex-wrap: nowrap; /* ⬅️ NÃO QUEBRAR LINHA */ } .resultado { width: 8px; height: 8px; border-radius: 50%; } .resultado.vitoria { background-color: #00E38C; } .resultado.empate { background-color: #FBBF24; } .resultado.derrota { background-color: #F43F5E; } /* ✅ BOLINHAS DOS ÚLTIMOS JOGOS - TABELAS DE CLASSIFICAÇÃO (40% MENOR) */ .resultado-bolinha { display: inline-block; width: 11px; /* ⬅️ 40% menor (18px → 11px) */ height: 11px; /* ⬅️ 40% menor (18px → 11px) */ min-width: 11px; min-height: 11px; max-width: 11px; max-height: 11px; border-radius: 50%; text-align: center; font-size: 0; /* ⬅️ ESCONDE O TEXTO (V, E, D) */ line-height: 11px; margin: 0 2px; /* ⬅️ Menos espaçamento entre bolinhas */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* ⬅️ Sombra menor */ transition: all 0.3s ease; flex-shrink: 0; /* ⬅️ NÃO ENCOLHER */ } .resultado-bolinha.vitoria { background-color: #10B981; /* Verde */ } .resultado-bolinha.empate { background-color: #F59E0B; /* Amarelo */ } .resultado-bolinha.derrota { background-color: #EF4444; /* Vermelho */ } /* Efeito hover */ .resultado-bolinha:hover { transform: scale(1.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } /* ===== RESPONSIVO: REDUZIR BOLINHAS EM 40% (11px → 7px) ===== */ /* APLICADO EM: Série A, Série B, Premier League, La Liga, Ligue 1, Champions */ /* Mobile Portrait */ @media (max-width: 768px) { .resultado-bolinha, .classification-table .resultado-bolinha, #tabela-serie-a .resultado-bolinha, #tabela-serie-b .resultado-bolinha { width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; max-width: 7px !important; max-height: 7px !important; line-height: 7px !important; margin: 0 1.5px !important; /* Espaçamento proporcional */ box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; } } /* Mobile Landscape */ @media (orientation: landscape) and (max-height: 800px) { .resultado-bolinha, .classification-table .resultado-bolinha, #tabela-serie-a .resultado-bolinha, #tabela-serie-b .resultado-bolinha { width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; max-width: 7px !important; max-height: 7px !important; line-height: 7px !important; margin: 0 1.5px !important; /* Espaçamento proporcional */ box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; } } /* ===== LAYOUT ELEGANTE DAS TABELAS DE CAMPEONATOS ===== */ /* Container das tabelas com design elegante */ .classification-table-container { background: linear-gradient(135deg, rgba(30, 27, 41, 0.95), rgba(18, 16, 26, 0.95)); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(168, 85, 247, 0.2); } /* Tabela principal com design elegante */ .brasileirao-table { background: linear-gradient(135deg, rgba(30, 27, 41, 0.8), rgba(18, 16, 26, 0.8)); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); table-layout: fixed; width: 100%; max-width: 100%; } /* Cabe�alho da tabela com gradiente intenso */ .brasileirao-table th, .standings-table thead { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(0, 227, 140, 0.15)); backdrop-filter: blur(5px); } /* Hover nas linhas com efeito elegante */ .brasileirao-table tr, .standings-table tr:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(0, 227, 140, 0.08)); transform: translateY(-1px); transition: all 0.3s ease; } /* Rodap� com design elegante */ .table-footer { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(0, 227, 140, 0.08)); border-radius: 16px; padding: 2rem; margin-top: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(168, 85, 247, 0.2); } /* Barras coloridas para zonas */ .libertadores { border-left: 6px solid #10B981; /* Verde - G4 Libertadores */ background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), transparent); box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); } .pre-libertadores { border-left: 6px solid #3B82F6; /* Azul - Pr�-Libertadores */ background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent); box-shadow: 0 0 10px rgba(59, 130, 246, 0.2); } .sul-americana { border-left: 6px solid #F59E0B; /* Laranja - Sul-Americana */ background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), transparent); box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); } .meio-tabela { border-left: 6px solid #6B7280; /* Cinza - Zona Neutra */ background: linear-gradient(90deg, rgba(107, 114, 128, 0.1), transparent); box-shadow: 0 0 10px rgba(107, 114, 128, 0.2); } .rebaixamento { border-left: 6px solid #EF4444; /* Vermelho - Z4 Rebaixamento */ background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), transparent); box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); } /* Bolinhas dos �ltimos jogos - layout elegante */ .ultimos-jogos { display: flex; gap: 1px; justify-content: center; align-items: center; flex-wrap: nowrap; white-space: nowrap; } .resultado { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; flex-shrink: 0; display: inline-block; } /* ✅ AJUSTES DE LARGURA DAS COLUNAS (Pos menor, Time maior) */ .brasileirao-table th:nth-child(1), .brasileirao-table td:nth-child(1), .standings-table th:nth-child(1), .standings-table td:nth-child(1) { width: 5%; /* ⬅️ Pos: MENOR (era 25%) */ text-align: center; padding: 0.8rem 0.5rem; } .brasileirao-table th:nth-child(2), .brasileirao-table td:nth-child(2), .standings-table th:nth-child(2), .standings-table td:nth-child(2) { width: 20%; /* ⬅️ Time: MAIOR (era 6%) */ text-align: left; padding: 0.8rem 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brasileirao-table th:nth-child(3), .standings-table th:nth-child(3) { width: 5%; } .brasileirao-table th:nth-child(4), .standings-table th:nth-child(4) { width: 5%; } .brasileirao-table th:nth-child(5), .standings-table th:nth-child(5) { width: 5%; } .brasileirao-table th:nth-child(6), .standings-table th:nth-child(6) { width: 5%; } .brasileirao-table th:nth-child(7), .standings-table th:nth-child(7) { width: 5%; } .brasileirao-table th:nth-child(8), .standings-table th:nth-child(8) { width: 5%; } .brasileirao-table th:nth-child(9), .standings-table th:nth-child(9) { width: 5%; } .brasileirao-table th:nth-child(10), .standings-table th:nth-child(10) { width: 5%; } .brasileirao-table th:nth-child(11), .standings-table th:nth-child(11) { width: 5%; } .brasileirao-table th:nth-child(12), .standings-table th:nth-child(12) { width: 10%; /* ⬅️ Últimos jogos: Um pouco maior para as bolinhas */ white-space: nowrap; text-align: center; } /* ===== HOVER E NAVEGA��O ENTRE ABAS ===== */ /* Hover elegante em TODO o container da linha */ .optimization-table tbody tr { transition: all 0.3s ease; cursor: pointer; } .optimization-table tbody tr:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(0, 227, 140, 0.08)) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15) !important; border-left: 4px solid var(--cor-destaque-primaria) !important; } /* Relevo FORTE na coluna de Probabilidades com contorno grosso */ .optimization-table tbody tr td:last-child { transition: all 0.3s ease; position: relative; cursor: pointer; } .optimization-table tbody tr td:last-child:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(0, 227, 140, 0.15)) !important; transform: scale(1.05) translateY(-3px) !important; box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; border: 3px solid var(--cor-destaque-primaria) !important; } /* Texto "Ver An�lise" na �rea de destaque */ .optimization-table tbody tr td:last-child::after { content: 'Ver An�lise'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); color: white; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .optimization-table tbody tr td:last-child:hover::after { opacity: 1; visibility: visible; } /* �rea de navega��o integrada */ .analise-navegacao-area { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: linear-gradient(135deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); border-radius: 50%; color: white; font-size: 12px; cursor: pointer; transition: all 0.3s ease; margin-left: 8px; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3); } .analise-navegacao-area:hover { transform: scale(1.2); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.5); background: linear-gradient(135deg, var(--cor-destaque-secundaria), var(--cor-destaque-primaria)); } /* Tooltip integrado */ .analise-navegacao-area::after { content: 'Ver an�lise detalhada'; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1a1a1a, #2d2d2d); color: white; padding: 8px 12px; border-radius: 6px; font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border: 1px solid var(--cor-destaque-primaria); margin-bottom: 8px; } .analise-navegacao-area::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2d2d2d; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; margin-bottom: 3px; } .analise-navegacao-area:hover::after, .analise-navegacao-area:hover::before { opacity: 1; visibility: visible; } /* Destaque FORTE do �cone quando hover na coluna de probabilidades */ .optimization-table tbody tr td:last-child:hover .analise-navegacao-area { animation: pulseStrong 1.2s infinite !important; transform: scale(1.3) !important; box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6) !important; background: linear-gradient(135deg, var(--cor-destaque-secundaria), var(--cor-destaque-primaria)) !important; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes pulseStrong { 0%, 100% { transform: scale(1.3); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6); } 50% { transform: scale(1.5); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.8); } } /* Destaque do jogo na An�lise R�pida */ .destaque-navegacao { animation: destaquePulse 2s ease-in-out; border: 3px solid var(--cor-destaque-primaria) !important; box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), inset 0 0 20px rgba(168, 85, 247, 0.2) !important; transform: scale(1.02); border-radius: 12px; } /* Bot�o de retorno delicado */ .retorno-otimizador-btn { position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(0, 227, 140, 0.9)); color: white; border: none; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); backdrop-filter: blur(10px); z-index: 100; opacity: 0; transform: translateY(-10px); pointer-events: none; } .retorno-otimizador-btn.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .retorno-otimizador-btn:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 1), rgba(0, 227, 140, 1)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5); } .retorno-otimizador-btn .icon { margin-right: 6px; font-size: 14px; } /* Responsividade do bot�o */ @media (max-width: 768px) { .retorno-otimizador-btn { top: 10px; right: 10px; padding: 6px 12px; font-size: 11px; } } @keyframes destaquePulse { 0%, 100% { transform: scale(1.02); box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), inset 0 0 20px rgba(168, 85, 247, 0.2); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(168, 85, 247, 0.8), inset 0 0 30px rgba(168, 85, 247, 0.3); } } /* Responsividade para mobile */ @media (max-width: 768px) { .analise-navegacao-area { width: 20px; height: 20px; font-size: 10px; margin-left: 4px; } .analise-navegacao-area::after { font-size: 10px; padding: 6px 10px; } /* DESTAQUE FORTE DA �LTIMA COLUNA PARA MOBILE - COMO NO DESKTOP */ .optimization-table tbody tr td:last-child:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(0, 227, 140, 0.15)) !important; transform: scale(1.05) translateY(-3px) !important; /* Movimento mais acentuado */ box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.1) !important; /* Sombra dupla como desktop */ border-radius: 6px !important; } /* HOVER DO �CONE "VER AN�LISE" PARA MOBILE */ .analise-navegacao-area:hover { transform: scale(1.1) !important; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4) !important; } /* DESTAQUE FORTE DO �CONE "VER AN�LISE" QUANDO HOVER NA �LTIMA COLUNA */ .optimization-table tbody tr td:last-child:hover .analise-navegacao-area { animation: pulseStrong 1.2s infinite !important; /* Anima��o pulsante */ transform: scale(1.3) !important; /* Escala maior */ box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6) !important; /* Sombra forte */ background: linear-gradient(135deg, var(--cor-destaque-secundaria), var(--cor-destaque-primaria)) !important; /* Gradiente invertido */ } /* HOVER DAS LINHAS DA TABELA PARA MOBILE - COM DESTAQUE DA �LTIMA COLUNA */ .optimization-table tbody tr:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(0, 227, 140, 0.08)) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2) !important; } /* DESTAQUE FORTE DA �LTIMA COLUNA QUANDO HOVER NA LINHA INTEIRA */ .optimization-table tbody tr:hover td:last-child { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(0, 227, 140, 0.2)) !important; transform: scale(1.03) translateY(-2px) !important; box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3), inset 0 1px 5px rgba(255, 255, 255, 0.1) !important; border-radius: 6px !important; } /* DESTAQUE DO �CONE "VER AN�LISE" QUANDO HOVER NA LINHA */ .optimization-table tbody tr:hover .analise-navegacao-area { transform: scale(1.2) !important; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.5) !important; background: linear-gradient(135deg, var(--cor-destaque-secundaria), var(--cor-destaque-primaria)) !important; } } /* Coming Soon */ .coming-soon { text-align: center; padding: 4rem 2rem; background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; } .coming-soon h3 { color: var(--cor-destaque-primaria); font-size: 1.5rem; margin-bottom: 1rem; } .coming-soon p { color: var(--cor-texto-secundario); font-size: 1.1rem; margin-bottom: 2rem; } .table-loading { text-align: center; padding: 2rem; color: var(--cor-texto-secundario); } /* Responsividade para o rodap� de honestidade */ @media (max-width: 768px) { .honesty-footer { padding: 10px 12px; font-size: 0.8rem; } .honesty-row { grid-template-columns: 1fr; gap: 6px; } .honesty-text { font-size: 0.78rem; } .honesty-modal { padding: 10px; } .honesty-modal .modal-content { max-height: 90vh; } .honesty-modal .modal-header, .honesty-modal .modal-body { padding: 15px 20px; } .honesty-modal .modal-header h4 { font-size: 1.1rem; } } /* ESTILOS DO SISTEMA DE ABAS */ .tabs-container { margin: 2rem 0; border-bottom: 1px solid var(--cor-borda); } /* CONTAINER DAS ABAS STICKY - DESKTOP E MOBILE */ .tabs-container { position: sticky !important; top: 0 !important; z-index: 100 !important; background: linear-gradient(135deg, rgba(18, 16, 26, 0.95) 0%, rgba(30, 27, 41, 0.95) 50%, rgba(18, 16, 26, 0.95) 100%) !important; backdrop-filter: blur(8px) !important; border-bottom: 1px solid var(--cor-borda) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; } /* STICKY SIMPLES - SEM INTERFER�NCIAS */ @media (max-width: 768px) { .tabs-container { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: rgba(18, 16, 26, 0.95) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid var(--cor-borda) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } } .tabs-nav { display: flex; justify-content: center; gap: 0; background-color: var(--cor-fundo-card); border-radius: 12px 12px 0 0; padding: 0.5rem; margin-bottom: -1px; } .tab-btn { flex: 1; max-width: 250px; padding: 1rem 2rem; background-color: transparent; color: var(--cor-texto-secundario); border: none; border-radius: 8px; font-size: 0.875rem; /* 14px - Reduzido de 1rem para 0.875rem */ font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .tab-btn:hover { background-color: rgba(168, 85, 247, 0.1); color: var(--cor-destaque-primaria); transform: translateY(-2px); } .tab-btn.active { background: linear-gradient(135deg, var(--cor-destaque-primaria), #9333EA); color: white; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } .tab-btn.active:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4); } .tab-content { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ESTILOS DA ABA 2: DADOS AVAN�ADOS */ .advanced-stats-container { padding: 2rem 0; } .game-selector { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; text-align: center; } .game-selector h3 { color: var(--cor-destaque-primaria); margin: 0 0 1.5rem 0; font-size: 1.4rem; } .game-select { width: 100%; max-width: 400px; padding: 1rem; background-color: var(--cor-fundo); border: 2px solid var(--cor-borda); border-radius: 8px; color: var(--cor-texto-principal); font-size: 1rem; font-weight: 500; } .game-select:focus { outline: none; border-color: var(--cor-destaque-primaria); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); } /* BOT�O DE SINCRONIZA��O */ #sync-games-btn:hover { background: var(--cor-destaque-secundaria) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); } #sync-games-btn:active { transform: translateY(0); } /* ESTILOS DA ABA 3: TIMES LOTECA JOGOS */ .times-loteca-container { padding: 2rem 0; } .jogos-container { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; } .jogo-confronto { background: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.5rem; transition: all 0.3s ease; } .jogo-confronto:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: var(--cor-destaque-primaria); } .jogo-header { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cor-borda); } .jogo-numero { font-size: 1.2rem; font-weight: bold; color: #00e38c; /* Verde neon */ background: rgba(0, 227, 140, 0.1); padding: 0.5rem 1rem; border-radius: 8px; } .jogo-descricao { font-size: 0.9rem; color: #cbd5e1; /* Cinza claro */ margin-left: 1rem; } .times-confronto { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; } .time-container { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 1.5rem; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .time-container:hover { transform: scale(1.02); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2); border-color: var(--cor-destaque-primaria); } .time-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .time-nome { font-size: 1.1rem; font-weight: bold; color: #cbd5e1; /* Cinza claro */ } .time-abrev { font-size: 0.9rem; color: #cbd5e1; /* Cinza claro */ background: rgba(168, 85, 247, 0.1); padding: 0.2rem 0.5rem; border-radius: 4px; } .time-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0; } .stat-group { text-align: center; } .stat-label { font-size: 10px; color: #e2e8f0 !important; /* FOR�AR - Mesma cor dos outros textos principais */ text-transform: none; margin-bottom: 0.3rem; display: block; } /* FOR�AR cor espec�fica para os labels dos containers */ .stat-group .stat-label, .time-stats .stat-label, .clube-stats .stat-label { color: #e2e8f0 !important; } .stat-value { font-size: 10px; font-weight: bold; color: #e2e8f0; /* Cinza claro mais forte para valores */ } .stat-subvalue { font-size: 10px; color: #cbd5e1; /* Cinza claro */ } /* Estilos para mensagens de erro nos containers */ .erro-mensagem { padding: 1rem; text-align: center; } .erro-texto { color: #cbd5e1; /* Cinza claro */ } .erro-texto strong { color: #ef4444; /* Vermelho para destaque */ display: block; margin-bottom: 0.5rem; } .erro-texto p { color: #cbd5e1; /* Cinza claro */ margin: 0.5rem 0; } .erro-texto small { color: #94a3b8; /* Cinza mais suave */ font-size: 0.8rem; } .forca-bar { width: 100%; height: 6px; background: var(--cor-borda); border-radius: 3px; overflow: hidden; margin-top: 0.3rem; } .forca-fill { height: 100%; background: linear-gradient(90deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); border-radius: 3px; transition: width 0.5s ease; } .time-badge { margin-top: 1rem; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; text-align: center; } .badge-mediano { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); } .badge-destaque { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .badge-elite { background: rgba(6, 182, 212, 0.1); color: #06b6d4; /* Cyan */ border: 1px solid rgba(6, 182, 212, 0.3); } .badge-forte { background: rgba(245, 158, 11, 0.1); color: #f59e0b; /* Laranja/Dourado */ border: 1px solid rgba(245, 158, 11, 0.3); } .badge-desenvolvimento { background: rgba(107, 114, 128, 0.1); color: #6b7280; /* Cinza */ border: 1px solid rgba(107, 114, 128, 0.3); } .badge-erro { background: rgba(239, 68, 68, 0.1); color: #ef4444; /* Vermelho */ border: 1px solid rgba(239, 68, 68, 0.3); } .vs-divider-confronto { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: var(--cor-destaque-primaria); background: rgba(168, 85, 247, 0.1); width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--cor-destaque-primaria); } .ver-detalhes-btn { width: 100%; padding: 0.8rem; background: linear-gradient(135deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); color: white; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin-top: 1rem; } .ver-detalhes-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); } .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--cor-fundo); border-radius: 8px; border: 1px solid var(--cor-borda); } .stat-label { font-weight: 500; color: #e2e8f0 !important; /* FOR�AR - Mesma cor dos outros textos principais */ font-size: 10px; } .stat-value { font-weight: bold; color: #e2e8f0; /* Cinza claro forte */ font-size: 10px; } /* RESPONSIVIDADE */ @media (max-width: 768px) { .times-confronto { grid-template-columns: 1fr; gap: 1rem; } .vs-divider-confronto { display: none; } .time-stats { grid-template-columns: repeat(2, 1fr); } } /* AN�LISE DETALHADA */ .detailed-analysis { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; } /* CABE�ALHO DO CONFRONTO */ .match-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--cor-borda); } .team-info { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; } .team-home, .team-away { text-align: center; } .team-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cor-borda); margin-bottom: 1rem; background-color: var(--cor-borda); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .team-logo:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3); border-color: var(--cor-destaque-primaria); } .team-home h3, .team-away h3 { color: var(--cor-texto-principal); font-size: 1.2rem; margin: 0.5rem 0; } .team-position { color: var(--cor-texto-secundario); font-size: 0.9rem; font-weight: 500; } .vs-separator { text-align: center; } .vs-text { display: block; font-size: 1.5rem; font-weight: 800; color: var(--cor-destaque-primaria); margin-bottom: 0.5rem; } .match-info { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--cor-texto-secundario); } /* ESTAT�STICAS COMPARATIVAS */ .stats-comparison { margin-bottom: 2rem; } .stats-comparison h4 { color: var(--cor-destaque-primaria); margin-bottom: 1.5rem; font-size: 1.3rem; } .stats-grid { display: flex; flex-direction: column; gap: 1.5rem; } .stat-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 1rem; align-items: center; padding: 1rem; background-color: rgba(0,0,0,0.2); border-radius: 8px; } .stat-label { font-weight: 600; color: #e2e8f0 !important; /* FOR�AR - Mesma cor dos outros textos principais */ font-size: 10px; } .stat-home, .stat-away { display: flex; flex-direction: column; gap: 0.5rem; } .stat-value { font-size: 10px; font-weight: 700; color: var(--cor-texto-principal); } .stat-bar { height: 6px; background-color: var(--cor-borda); border-radius: 3px; overflow: hidden; } .stat-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } /* Barra verde - cen�rio favor�vel */ .stat-fill.favorable { background: linear-gradient(90deg, #32CD32, #00FF00); } /* Barra vermelha - cen�rio desfavor�vel */ .stat-fill.unfavorable { background: linear-gradient(90deg, #FF6B6B, #FF4444); } /* Barra padr�o (compatibilidade) */ .stat-fill:not(.favorable):not(.unfavorable) { background: linear-gradient(90deg, var(--cor-destaque-secundaria), #00B377); } .stat-bar.defensive .stat-fill:not(.favorable):not(.unfavorable) { background: linear-gradient(90deg, var(--cor-desvantagem), #DC2626); } /* FORMA RECENTE */ .form-sequence { display: flex; gap: 0.5rem; justify-content: center; } .result { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .result.win { background-color: var(--cor-vantagem); color: white; } .result.draw { background-color: var(--cor-equilibrio); color: var(--cor-fundo); } .result.loss { background-color: var(--cor-desvantagem); color: white; } /* HIST�RICO CONFRONTO DIRETO */ .h2h-section { margin-bottom: 2rem; } .h2h-section h4 { color: var(--cor-destaque-primaria); margin-bottom: 1.5rem; font-size: 1.3rem; } .h2h-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; } .h2h-summary { display: flex; flex-direction: column; gap: 1rem; } .h2h-stat { display: flex; justify-content: space-between; padding: 0.75rem; background-color: rgba(0,0,0,0.2); border-radius: 6px; } .h2h-label { color: var(--cor-texto-secundario); font-weight: 500; } .h2h-value { color: var(--cor-texto-principal); font-weight: 700; } .h2h-results { display: flex; flex-direction: column; gap: 0.75rem; } .h2h-match { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background-color: rgba(0,0,0,0.2); border-radius: 6px; } .match-date { color: var(--cor-texto-secundario); font-size: 0.85rem; } .match-result { font-weight: 600; } .match-result.home-win { color: var(--cor-vantagem); } .match-result.away-win { color: var(--cor-destaque-primaria); } .match-result.draw { color: var(--cor-equilibrio); } /* RECOMENDA��O BASEADA EM DADOS */ .data-recommendation h4 { color: var(--cor-destaque-primaria); margin-bottom: 1.5rem; font-size: 1.3rem; } .recommendation-card { background: linear-gradient(135deg, rgba(0, 227, 140, 0.1), rgba(16, 185, 129, 0.05)); border: 1px solid rgba(0, 227, 140, 0.3); border-radius: 12px; padding: 1.5rem; } .recommendation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .confidence-level { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; } .confidence-level.high { background-color: rgba(0, 227, 140, 0.2); color: var(--cor-destaque-secundaria); } .confidence-level.medium { background-color: rgba(59, 130, 246, 0.2); color: #3B82F6; } .confidence-level.low { background-color: rgba(245, 158, 11, 0.2); color: #F59E0B; } /* BOT�O CONFRONTOS DIRETOS */ .confrontos-diretos-button { position: absolute; top: 10px; right: 10px; max-width: calc(100% - 20px); background: linear-gradient(135deg, #32CD32, #00FF00); color: #000; padding: 0.6rem 1.2rem; border: none; border-radius: 25px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(50, 205, 50, 0.3); z-index: 100; } .confrontos-diretos-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(50, 205, 50, 0.4); } /* BOT�O CONFRONTOS DIRETOS CENTRALIZADO */ .confrontos-diretos-button-center { background: linear-gradient(135deg, #32CD32, #00FF00); color: #000; padding: 0.5rem 1rem; border: none; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 8px rgba(50, 205, 50, 0.3); margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto; } .confrontos-diretos-button-center:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(50, 205, 50, 0.4); } .recommended-bet { font-size: 1.2rem; font-weight: 700; color: var(--cor-destaque-secundaria); } .recommendation-reasoning { margin-bottom: 1.5rem; line-height: 1.6; } .recommendation-factors { display: flex; flex-wrap: wrap; gap: 0.75rem; } .factor { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .factor.positive { background-color: rgba(0, 227, 140, 0.2); color: var(--cor-destaque-secundaria); } .factor.negative { background-color: rgba(244, 63, 94, 0.2); color: var(--cor-desvantagem); } .factor.neutral { background-color: rgba(251, 191, 36, 0.2); color: var(--cor-equilibrio); } /* MENSAGEM SEM SELE��O */ .no-selection { text-align: center; padding: 4rem 2rem; color: var(--cor-texto-secundario); } .no-selection-content h3 { color: var(--cor-destaque-primaria); margin-bottom: 1rem; font-size: 1.5rem; } .no-selection-content p { margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6; } .features-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; max-width: 600px; margin: 0 auto; } .feature-item { padding: 1rem; background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 8px; font-weight: 500; } /* ESTILOS DO OTIMIZADOR DE APOSTAS */ .optimizer-section { margin-top: 3rem; padding: 2rem 0; border-top: 2px solid var(--cor-borda); } .optimizer-header { text-align: center; margin-bottom: 2.5rem; } .optimizer-header h2 { font-size: 2.2rem; font-weight: 800; color: var(--cor-destaque-primaria); margin: 0 0 1rem 0; } .optimizer-header p { font-size: 1.1rem; color: var(--cor-texto-secundario); max-width: 700px; margin: 0 auto; } /* Seletor de Or�amento */ .budget-selector { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 2rem; margin-bottom: 2.5rem; text-align: center; } .budget-selector h3 { color: var(--cor-destaque-secundaria); margin: 0 0 1.5rem 0; font-size: 1.4rem; } .budget-options { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; } .budget-btn { background: linear-gradient(135deg, var(--cor-destaque-primaria), #9333EA); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; } .budget-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4); } .budget-btn.active { background: var(--cor-destaque-secundaria); box-shadow: 0 8px 25px rgba(0, 227, 140, 0.4); } #custom-budget { background-color: var(--cor-fundo); border: 2px solid var(--cor-borda); color: var(--cor-texto-principal); padding: 0.8rem 1rem; border-radius: 8px; font-size: 1rem; width: 200px; text-align: center; } #custom-budget:focus { outline: none; border-color: var(--cor-destaque-primaria); } .budget-info { padding: 1rem; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; border-left: 4px solid var(--cor-destaque-secundaria); } #budget-details { color: var(--cor-texto-secundario); font-weight: 500; } /* Classifica��o dos Jogos */ .games-classification { margin-bottom: 2.5rem; } .games-classification h3 { text-align: center; color: var(--cor-texto-principal); margin-bottom: 2rem; font-size: 1.5rem; } .classification-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .classification-card { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1rem; position: relative; min-height: 120px; } .classification-card.seco { border-left: 4px solid var(--cor-destaque-secundaria); } .classification-card.duplo { border-left: 4px solid var(--cor-equilibrio); } .classification-card.triplo { border-left: 4px solid var(--cor-desvantagem); } .classification-card h4 { margin: 0 0 0.4rem 0; color: var(--cor-texto-principal); font-size: 1rem; line-height: 1.2; } .classification-card p { margin: 0 0 0.8rem 0; color: var(--cor-texto-secundario); font-size: 0.8rem; line-height: 1.3; } .classification-card ul { list-style: none; padding: 0; margin: 0; } .classification-card li { padding: 0.5rem 0; color: var(--cor-texto-principal); font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .classification-card li:last-child { border-bottom: none; } /* CSS espec�fico para container "Sua Aposta" */ .user-bet-details { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; } .bet-detail { padding: 0.8rem !important; min-height: 60px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; } .bet-label { font-size: 0.9rem !important; margin-bottom: 0.3rem !important; } .bet-value { font-size: 1.1rem !important; font-weight: bold !important; } /* Tabela de Otimiza��o */ .optimization-table-container { margin-bottom: 2.5rem; } .optimization-table-container h3 { text-align: center; color: var(--cor-texto-principal); margin-bottom: 1.5rem; font-size: 1.5rem; } .table-responsive { overflow-x: auto; background-color: var(--cor-fundo-card); border-radius: 12px; border: 1px solid var(--cor-borda); } .optimization-table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; } /* REDISTRIBUI��O DE LARGURAS DAS COLUNAS */ /* Coluna 1: Jogo (reduzida pela metade) */ .optimization-table th:nth-child(1), .optimization-table td:nth-child(1) { width: 5%; min-width: 50px; max-width: 60px; padding: 0.8rem 0.5rem; text-align: center; } /* Coluna 2: Confronto (mantida) */ .optimization-table th:nth-child(2), .optimization-table td:nth-child(2) { width: 25%; min-width: 150px; } /* APLICAR QUEBRA DE LINHA AP�S "vs" TAMB�M NO DESKTOP */ .page--otimizador-aposta .optimization-table td:nth-child(2) { white-space: pre-line !important; /* Permitir quebra de linha for�ada no desktop */ line-height: 1.4 !important; /* Espa�amento adequado para desktop */ text-align: center !important; /* Centralizar conte�do */ } /* ESTILO PARA NOMES DOS TIMES NO DESKTOP */ .page--otimizador-aposta .optimization-table td:nth-child(2) .time-name { display: block !important; /* Cada time em uma linha */ font-size: 11px !important; /* Fonte adequada para desktop */ margin: 2px 0 !important; /* Margem entre os times */ line-height: 1.2 !important; /* Espa�amento compacto */ } /* ESTILO ESPEC�FICO PARA O SEPARADOR "vs" NO DESKTOP */ .page--otimizador-aposta .optimization-table td:nth-child(2) .vs-separator { display: block !important; /* For�ar quebra ap�s vs */ margin: 3px 0 !important; /* Espa�o antes do segundo time */ font-size: 11px !important; /* Mesmo tamanho dos times */ font-weight: bold !important; /* Destaque para o vs */ color: var(--cor-destaque-secundaria) !important; /* Cor de destaque */ } /* Coluna 3: Classifica��o (mantida) */ .optimization-table th:nth-child(3), .optimization-table td:nth-child(3) { width: 15%; min-width: 100px; } /* Coluna 4: Sugest�o (mantida) */ .optimization-table th:nth-child(4), .optimization-table td:nth-child(4) { width: 10%; min-width: 80px; text-align: center; } /* Coluna 5: Sua Escolha (AMPLIADA com o espa�o ganho) */ .optimization-table th:nth-child(5), .optimization-table td:nth-child(5) { width: 25%; min-width: 200px; max-width: 300px; padding: 0.8rem 0.5rem; text-align: center; } /* Coluna 6: Probabilidades (mantida) */ .optimization-table th:nth-child(6), .optimization-table td:nth-child(6) { width: 20%; min-width: 200px; max-width: 250px; padding: 1rem 0.8rem; text-align: center; white-space: nowrap; overflow: hidden; } .optimization-table th, .optimization-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--cor-borda); } /* CSS espec�fico para coluna de probabilidades */ .optimization-table th:nth-child(6), .optimization-table td:nth-child(6) { min-width: 200px; max-width: 250px; width: 20%; padding: 1rem 0.8rem; text-align: center; white-space: nowrap; overflow: hidden; } /* CSS para elementos dentro da coluna de probabilidades */ .optimization-table td:nth-child(6) .prob-content { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; max-width: 100%; } .optimization-table td:nth-child(6) .prob-percentage { font-weight: 700; color: var(--cor-destaque-primaria); font-size: 0.9rem; } .optimization-table td:nth-child(6) .prob-confidence { font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 12px; white-space: nowrap; } .optimization-table td:nth-child(6) .prob-coverage { font-size: 0.75rem; color: var(--cor-texto-secundario); white-space: nowrap; } .optimization-table td:nth-child(6) .prob-risk { font-size: 0.75rem; color: var(--cor-texto-secundario); white-space: nowrap; } .optimization-table td:nth-child(6) .prob-icon { margin-top: 0.2rem; cursor: pointer; } .optimization-table th { background-color: rgba(0,0,0,0.2); color: var(--cor-texto-secundario); font-weight: 600; font-size: 0.9rem; } .optimization-table td { color: var(--cor-texto-principal); font-weight: 500; } .choice-buttons { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.5rem; max-width: 280px; margin: 0 auto; width: 100%; } .choice-btn { padding: 0.4rem 0.6rem; border: 1px solid var(--cor-borda); background-color: var(--cor-fundo); color: var(--cor-texto-principal); border-radius: 6px; cursor: pointer; font-size: 0.75rem; transition: all 0.3s ease; text-align: center; min-height: 32px; display: flex; align-items: center; justify-content: center; } .choice-btn.selected { background-color: var(--cor-destaque-primaria); color: white; border-color: var(--cor-destaque-primaria); } .choice-btn:hover { border-color: var(--cor-destaque-primaria); } .status-badge { padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; } .status-badge.seco { background-color: rgba(0, 227, 140, 0.2); color: var(--cor-destaque-secundaria); } .status-badge.duplo { background-color: rgba(251, 191, 36, 0.2); color: var(--cor-equilibrio); } .status-badge.triplo { background-color: rgba(244, 63, 94, 0.2); color: var(--cor-desvantagem); } .status-badge.success { background-color: rgba(0, 227, 140, 0.2); color: var(--cor-destaque-secundaria); } .status-badge.error { background-color: rgba(244, 63, 94, 0.2); color: var(--cor-desvantagem); } /* Resumo da Aposta */ .bet-summary { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 2rem; text-align: center; } /* Sub-abas para Dados Avan�ados */ .dados-avancados-container { width: 100%; } .sub-tabs-nav { display: flex; gap: 0.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--cor-borda); padding-bottom: 0.5rem; } .sub-tab-btn { padding: 0.8rem 1.5rem; border: none; background-color: transparent; color: var(--cor-texto-secundario); border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 500; font-size: 0.9rem; transition: all 0.3s ease; border-bottom: 2px solid transparent; } /* ALINHAR CATEGORIAS � ESQUERDA TAMB�M NO DESKTOP */ @media (min-width: 769px) { .page--dados-avancados .linha-tabela .coluna.categoria { text-align: left !important; /* Alinhar categorias � esquerda no desktop */ display: flex !important; /* Flexbox para centraliza��o vertical */ align-items: center !important; /* Centralizar verticalmente */ justify-content: flex-start !important; /* Alinhar � esquerda horizontalmente */ } } /* SOBRESCREVER REGRAS BASE PARA MOBILE - DADOS AVAN�ADOS */ @media (max-width: 768px) { /* SOBRESCREVER ESTILOS INLINE DA ABA DADOS AVAN�ADOS */ .page--dados-avancados h3[style*="font-size"], .page--dados-avancados h4[style*="font-size"], .page--dados-avancados p[style*="font-size"], .page--dados-avancados span[style*="font-size"], .page--dados-avancados div[style*="font-size"] { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados button[style*="font-size"], .page--dados-avancados .btn[style*="font-size"] { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.4rem 0.8rem !important; /* Padding compacto */ } .page--dados-avancados select[style*="font-size"] { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ } /* SOBRESCREVER ESTILOS INLINE ESPEC�FICOS ENCONTRADOS NO HTML */ .page--dados-avancados .game-selector h3 { font-size: 10px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .game-selector p { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .correlate-csv-btn { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.4rem 0.8rem !important; /* Padding compacto */ } .page--dados-avancados .comparacao-header h3 { font-size: 10px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .comparacao-header p { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .secao-header h4 { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .coluna { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .linha-tabela { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .info-icon { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } /* TORNAR �CONES DE INTERROGA��O MAIS DISCRETOS NO MOBILE */ .page--dados-avancados .info-icon { background: none !important; /* Remover fundo vermelho */ color: #ff4444 !important; /* Apenas interroga��o vermelha */ border: none !important; /* Remover borda */ border-radius: 0 !important; /* Remover bordas arredondadas */ padding: 0 !important; /* Remover padding */ margin: 0 0.2rem !important; /* Margem m�nima */ font-size: 10px !important; /* Tamanho menor */ font-weight: bold !important; /* Negrito para visibilidade */ text-shadow: none !important; /* Remover sombra */ box-shadow: none !important; /* Remover sombra */ width: auto !important; /* Largura autom�tica */ height: auto !important; /* Altura autom�tica */ display: inline !important; /* Display inline */ vertical-align: middle !important; /* Alinhar verticalmente */ } /* REMOVER C�RCULO VERMELHO DOS �CONES */ .page--dados-avancados .info-icon::before, .page--dados-avancados .info-icon::after { display: none !important; /* Remover pseudo-elementos */ } /* ESTILO ALTERNATIVO PARA �CONES MAIS DISCRETOS */ .page--dados-avancados .info-icon:hover { background: rgba(255, 68, 68, 0.1) !important; /* Fundo sutil no hover */ border-radius: 50% !important; /* C�rculo sutil no hover */ padding: 0.1rem !important; /* Padding m�nimo no hover */ } /* SOBRESCREVER ESTILOS INLINE DOS �CONES */ .page--dados-avancados .info-icon[style*="background"], .page--dados-avancados .info-icon[style*="border"], .page--dados-avancados .info-icon[style*="padding"] { background: none !important; /* For�ar remo��o do fundo */ border: none !important; /* For�ar remo��o da borda */ padding: 0 !important; /* For�ar remo��o do padding */ color: #ff4444 !important; /* For�ar cor vermelha */ font-size: 10px !important; /* For�ar tamanho menor */ } /* REGRAS ESPEC�FICAS PARA TELAS MUITO PEQUENAS */ @media (max-width: 480px) { .page--dados-avancados .info-icon { font-size: 8px !important; /* Ainda menor em telas pequenas */ margin: 0 0.1rem !important; /* Margem m�nima */ } } /* SOBRESCREVER ESTILOS INLINE ESPEC�FICOS ENCONTRADOS NO HTML */ .page--dados-avancados .game-selector div[style*="display: flex"] { gap: 0.5rem !important; /* Gap menor para mobile */ } .page--dados-avancados .game-select { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ min-width: 200px !important; /* Largura menor para mobile */ } .page--dados-avancados .correlate-csv-btn[style*="padding: 8px 16px"] { padding: 0.4rem 0.8rem !important; /* Padding compacto */ font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .game-selector p[style*="font-size: 0.9rem"] { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .comparacao-elegante[style*="display: block"] { padding: 0.5rem !important; /* Padding menor para mobile */ } .page--dados-avancados .nova-comparacao { padding: 0.5rem !important; /* Padding menor para mobile */ } .page--dados-avancados .container-secao { padding: 0.5rem !important; /* Padding menor para mobile */ } .page--dados-avancados .linha-titulos { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } .page--dados-avancados .tabela-secao { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ } /* LAYOUT HORIZONTAL PARA DADOS - MOBILE */ .page--dados-avancados .linha-tabela { display: flex !important; /* For�ar layout horizontal */ flex-direction: row !important; /* Dados lado a lado */ gap: 0.3rem !important; /* Espa�amento entre dados */ align-items: center !important; /* Centralizar verticalmente */ margin-bottom: 0.5rem !important; /* Espa�o entre linhas */ padding: 0.3rem !important; /* Padding interno */ background: rgba(255, 255, 255, 0.05) !important; /* Fundo sutil */ border-radius: 6px !important; /* Bordas arredondadas */ } /* AJUSTAR TAMANHO DOS BOXES DE DADOS */ .page--dados-avancados .linha-tabela .coluna { flex: 1 !important; /* Distribuir igualmente */ min-width: 0 !important; /* Permitir encolhimento */ padding: 0.2rem !important; /* Padding interno menor */ text-align: center !important; /* Centralizar texto */ font-size: 9px !important; /* Fonte maior para melhor legibilidade */ white-space: nowrap !important; /* N�o quebrar linha */ overflow: hidden !important; /* Cortar texto se necess�rio */ text-overflow: ellipsis !important; /* ... se texto for muito longo */ display: flex !important; /* Flexbox para centraliza��o vertical */ align-items: center !important; /* Centralizar verticalmente */ justify-content: center !important; /* Centralizar horizontalmente */ } /* AJUSTAR ESPECIFICAMENTE AS COLUNAS DE DADOS - NOVA DISTRIBUI��O 30-20-20-30 */ .page--dados-avancados .linha-tabela .coluna.categoria { flex: 0 0 30% !important; /* Largura 30% para categoria */ max-width: 30% !important; /* M�xima largura */ text-align: left !important; /* Alinhar categorias � esquerda */ display: flex !important; /* Flexbox para centraliza��o vertical */ align-items: center !important; /* Centralizar verticalmente */ justify-content: flex-start !important; /* Alinhar � esquerda horizontalmente */ } .page--dados-avancados .linha-tabela .coluna.mandante, .page--dados-avancados .linha-tabela .coluna.visitante { flex: 0 0 20% !important; /* Largura 20% para mandante e visitante */ max-width: 20% !important; /* M�xima largura */ } .page--dados-avancados .linha-tabela .coluna.vantagem { flex: 0 0 30% !important; /* Largura 30% para vantagem */ max-width: 30% !important; /* M�xima largura */ font-size: 9px !important; /* For�ar tamanho da fonte igual �s outras colunas */ } /* FOR�AR TAMANHO DA FONTE ESPEC�FICO PARA COLUNA VANTAGEM */ .page--dados-avancados .linha-tabela .coluna.vantagem * { font-size: 9px !important; /* For�ar tamanho para todos os elementos filhos */ } /* SOBRESCREVER ESTILOS INLINE NA COLUNA VANTAGEM */ .page--dados-avancados .linha-tabela .coluna.vantagem[style*="font-size"], .page--dados-avancados .linha-tabela .coluna.vantagem *[style*="font-size"] { font-size: 9px !important; /* For�ar tamanho correto */ } /* AJUSTAR CONTAINER PRINCIPAL */ .page--dados-avancados .tabela-secao { display: flex !important; /* Layout flex�vel */ flex-direction: column !important; /* Linhas verticais */ gap: 0.3rem !important; /* Espa�amento entre linhas */ margin: 0 !important; /* Eliminar margens */ padding: 0 !important; /* Eliminar padding */ width: 100% !important; /* Ocupar toda a largura */ } /* ELIMINAR RESPIRRO DOS CONTAINERS PRINCIPAIS */ .page--dados-avancados .comparacao-elegante, .page--dados-avancados .nova-comparacao, .page--dados-avancados .container-secao { margin: 0 !important; /* Eliminar margens */ padding: 0.2rem !important; /* Padding m�nimo */ width: 100% !important; /* Ocupar toda a largura */ } /* AJUSTAR LINHA DE T�TULOS */ .page--dados-avancados .linha-titulos { display: flex !important; /* Layout horizontal */ gap: 0.3rem !important; /* Espa�amento entre colunas */ margin-bottom: 0.5rem !important; /* Espa�o abaixo */ padding: 0.3rem !important; /* Padding interno */ background: rgba(255, 255, 255, 0.1) !important; /* Fundo mais claro */ border-radius: 6px !important; /* Bordas arredondadas */ } .page--dados-avancados .linha-titulos .coluna { flex: 1 !important; /* Distribuir igualmente */ text-align: center !important; /* Centralizar texto */ font-size: 8px !important; /* Fonte menor */ font-weight: 600 !important; /* Negrito */ color: var(--cor-texto-principal) !important; /* Cor principal */ } /* REGRAS ESPEC�FICAS PARA TELAS MUITO PEQUENAS */ @media (max-width: 480px) { .page--dados-avancados .linha-tabela { gap: 0.2rem !important; /* Espa�amento ainda menor */ padding: 0.2rem !important; /* Padding menor */ } .page--dados-avancados .linha-tabela .coluna { font-size: 8px !important; /* Fonte maior para melhor legibilidade */ padding: 0.1rem !important; /* Padding m�nimo */ } .page--dados-avancados .linha-tabela .coluna.categoria { flex: 0 0 30% !important; /* Largura 30% para categoria */ max-width: 30% !important; text-align: left !important; /* Alinhar categorias � esquerda */ display: flex !important; /* Flexbox para centraliza��o vertical */ align-items: center !important; /* Centralizar verticalmente */ justify-content: flex-start !important; /* Alinhar � esquerda horizontalmente */ } .page--dados-avancados .linha-tabela .coluna.mandante, .page--dados-avancados .linha-tabela .coluna.visitante { flex: 0 0 20% !important; /* Largura 20% para mandante e visitante */ max-width: 20% !important; } .page--dados-avancados .linha-tabela .coluna.vantagem { flex: 0 0 30% !important; /* Largura 30% para vantagem */ max-width: 30% !important; font-size: 8px !important; /* For�ar tamanho da fonte para telas pequenas */ } /* FOR�AR TAMANHO DA FONTE ESPEC�FICO PARA COLUNA VANTAGEM - TELAS PEQUENAS */ .page--dados-avancados .linha-tabela .coluna.vantagem * { font-size: 8px !important; /* For�ar tamanho para todos os elementos filhos */ } /* SOBRESCREVER ESTILOS INLINE NA COLUNA VANTAGEM - TELAS PEQUENAS */ .page--dados-avancados .linha-tabela .coluna.vantagem[style*="font-size"], .page--dados-avancados .linha-tabela .coluna.vantagem *[style*="font-size"] { font-size: 8px !important; /* For�ar tamanho correto */ } } /* ELIMINAR COMPLETAMENTE O RESPIRRO - SEGUINDO PADR�O DO DROPDOWN */ .page--dados-avancados .game-selector, .page--dados-avancados .comparacao-header, .page--dados-avancados .secao-header { margin: 0 !important; /* Eliminar margens */ padding: 0.3rem 0.2rem !important; /* Padding m�nimo */ width: 100% !important; /* Ocupar toda a largura */ } /* ELIMINAR RESPIRRO DOS CONTAINERS PAI - DIST�NCIA M�NIMA DAS LATERAIS */ .page--dados-avancados .container-secao { margin: 0 !important; /* Eliminar margens */ padding: 0.1rem 0.05rem !important; /* Padding m�nimo - quase zero */ width: 100% !important; /* Ocupar toda a largura */ max-width: 100% !important; /* M�xima largura */ } /* ELIMINAR RESPIRRO DOS HEADERS DAS SE��ES */ .page--dados-avancados .secao-header { margin: 0 !important; /* Eliminar margens */ padding: 0.2rem 0.05rem !important; /* Padding m�nimo */ width: 100% !important; /* Ocupar toda a largura */ } /* ELIMINAR RESPIRRO DAS TABELAS DE DADOS */ .page--dados-avancados .tabela-secao { margin: 0 !important; /* Eliminar margens */ padding: 0.05rem !important; /* Padding quase zero */ width: 100% !important; /* Ocupar toda a largura */ } /* ELIMINAR RESPIRRO DAS LINHAS DE DADOS */ .page--dados-avancados .linha-tabela { margin: 0 !important; /* Eliminar margens */ padding: 0.1rem 0.05rem !important; /* Padding m�nimo */ width: 100% !important; /* Ocupar toda a largura */ } /* ELIMINAR RESPIRRO DAS LINHAS DE T�TULOS */ .page--dados-avancados .linha-titulos { margin: 0 !important; /* Eliminar margens */ padding: 0.1rem 0.05rem !important; /* Padding m�nimo */ width: 100% !important; /* Ocupar toda a largura */ } /* AJUSTAR ESPA�AMENTO ENTRE SE��ES */ .page--dados-avancados .container-secao + .container-secao { margin-top: 0.5rem !important; /* Espa�o m�nimo entre se��es */ } /* ELIMINAR TODAS AS BORDAS DOS CONTAINERS E LINHAS - MOBILE */ .page--dados-avancados .container-secao, .page--dados-avancados .secao-header, .page--dados-avancados .tabela-secao, .page--dados-avancados .linha-tabela, .page--dados-avancados .linha-titulos, .page--dados-avancados .linha-tabela .coluna, .page--dados-avancados .linha-titulos .coluna { border: none !important; /* Eliminar todas as bordas */ border-top: none !important; /* Eliminar borda superior */ border-bottom: none !important; /* Eliminar borda inferior */ border-left: none !important; /* Eliminar borda esquerda */ border-right: none !important; /* Eliminar borda direita */ border-radius: 0 !important; /* Eliminar bordas arredondadas */ box-shadow: none !important; /* Eliminar sombras */ outline: none !important; /* Eliminar contornos */ } /* ELIMINAR BORDAS DOS CONTAINERS PRINCIPAIS */ .page--dados-avancados .comparacao-elegante, .page--dados-avancados .nova-comparacao, .page--dados-avancados .comparacao-header { border: none !important; /* Eliminar todas as bordas */ border-radius: 0 !important; /* Eliminar bordas arredondadas */ box-shadow: none !important; /* Eliminar sombras */ outline: none !important; /* Eliminar contornos */ } /* ELIMINAR BORDAS DOS ELEMENTOS INTERNOS */ .page--dados-avancados .linha-tabela { border: none !important; /* Eliminar bordas das linhas */ border-radius: 0 !important; /* Eliminar bordas arredondadas */ box-shadow: none !important; /* Eliminar sombras */ } /* ELIMINAR BORDAS DOS HEADERS DAS SE��ES */ .page--dados-avancados .secao-header h4, .page--dados-avancados .secao-header h3, .page--dados-avancados .secao-header h2 { border: none !important; /* Eliminar bordas dos t�tulos */ border-radius: 0 !important; /* Eliminar bordas arredondadas */ box-shadow: none !important; /* Eliminar sombras */ } /* FOR�AR CONTAINERS PAI A FICAREM COLADOS NAS LATERAIS */ .page--dados-avancados .nova-comparacao { margin: 0 !important; /* Eliminar margens */ padding: 0 !important; /* Eliminar padding */ width: 100% !important; /* Ocupar toda a largura */ max-width: 100% !important; /* M�xima largura */ } /* ELIMINAR RESPIRRO DOS CONTAINERS DE COMPARA��O */ .page--dados-avancados .comparacao-elegante { margin: 0 !important; /* Eliminar margens */ padding: 0 !important; /* Eliminar padding */ width: 100% !important; /* Ocupar toda a largura */ } /* ELIMINAR RESPIRRO DOS CONTAINERS DE CABE�ALHO */ .page--dados-avancados .comparacao-header { margin: 0 !important; /* Eliminar margens */ padding: 0.2rem 0.05rem !important; /* Padding m�nimo */ width: 100% !important; /* Ocupar toda a largura */ } /* REGRAS ESPEC�FICAS PARA TELAS MUITO PEQUENAS - RESPIRRO M�NIMO */ @media (max-width: 480px) { .page--dados-avancados .container-secao { padding: 0.05rem !important; /* Padding quase zero */ } .page--dados-avancados .secao-header { padding: 0.1rem 0.02rem !important; /* Padding m�nimo */ } .page--dados-avancados .tabela-secao { padding: 0.02rem !important; /* Padding quase zero */ } .page--dados-avancados .linha-tabela { padding: 0.05rem 0.02rem !important; /* Padding m�nimo */ } .page--dados-avancados .linha-titulos { padding: 0.05rem 0.02rem !important; /* Padding m�nimo */ } } /* FOR�AR LAYOUT HORIZONTAL EM TODAS AS LINHAS */ .page--dados-avancados .linha-tabela > * { display: inline-block !important; /* For�ar inline */ vertical-align: top !important; /* Alinhar ao topo */ } /* AJUSTAR ESPA�AMENTO ENTRE ELEMENTOS */ .page--dados-avancados .linha-tabela .coluna + .coluna { margin-left: 0.2rem !important; /* Espa�amento entre colunas */ } .page--dados-avancados .sub-tab-btn { font-size: 10px !important; /* Padronizado para 10px */ padding: 0.4rem 0.8rem !important; /* Padding compacto */ } .dados-avancados-container .section-header h2 { font-size: 12px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-principal) !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; } .dados-avancados-container .section-header h3 { font-size: 10px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; font-weight: 500 !important; margin-bottom: 0.3rem !important; } .dados-avancados-container h1, .dados-avancados-container h2, .dados-avancados-container h3, .dados-avancados-container h4, .dados-avancados-container h5, .dados-avancados-container h6 { font-size: 10px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-principal) !important; font-weight: 600 !important; margin-bottom: 0.3rem !important; } .dados-avancados-container p, .dados-avancados-container span, .dados-avancados-container div { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-principal) !important; line-height: 1.3 !important; } .dados-avancados-container .label, .dados-avancados-container .badge, .dados-avancados-container .tag { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.2rem 0.4rem !important; /* Padding compacto */ } .dados-avancados-container button, .dados-avancados-container .btn { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.4rem 0.8rem !important; /* Padding compacto */ } .dados-avancados-container table th, .dados-avancados-container table td { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ padding: 0.3rem 0.2rem !important; /* Padding compacto */ } .dados-avancados-container table th { color: var(--cor-texto-secundario) !important; font-weight: 600 !important; } .dados-avancados-container table td { color: var(--cor-texto-principal) !important; } .dados-avancados-container .card { padding: 0.8rem !important; /* Padding menor */ } .dados-avancados-content { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ } .dados-avancados-content h4, .dados-avancados-content h5, .dados-avancados-content h6 { font-size: 9px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-principal) !important; font-weight: 600 !important; } .dados-avancados-content p, .dados-avancados-content span { font-size: 8px !important; /* Mesmo padr�o do "Fator Analisado" */ color: var(--cor-texto-secundario) !important; } } .sub-tab-btn:hover { background-color: rgba(0, 227, 140, 0.1); color: var(--cor-destaque-secundaria); } .sub-tab-btn.active { background-color: var(--cor-destaque-secundaria); color: white; border-bottom: 2px solid var(--cor-destaque-secundaria); } .sub-tab-content { display: none; animation: fadeIn 0.3s ease; } .sub-tab-content.active { display: block; } /* Estilos espec�ficos para sub-abas de Dados Avan�ados */ .dados-avancados-content { display: none; animation: fadeIn 0.3s ease; } .dados-avancados-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Barra de progresso para carregamento */ .progress-info { text-align: center; padding: 2rem; background-color: var(--cor-fundo-card); border-radius: 12px; border: 1px solid var(--cor-borda); } .progress-bar { width: 100%; height: 8px; background-color: var(--cor-fundo); border-radius: 4px; margin: 1rem 0; overflow: hidden; } .progress-fill { height: 100%; background-color: var(--cor-destaque-secundaria); border-radius: 4px; transition: width 0.3s ease; } /* Mensagem de erro */ .error-message { text-align: center; padding: 2rem; background-color: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.3); border-radius: 12px; color: var(--cor-desvantagem); } .error-message h3 { margin-bottom: 1rem; color: var(--cor-desvantagem); } .error-message p { margin-bottom: 1.5rem; color: var(--cor-texto-secundario); } /* Bot�o de detalhes dos clubes */ .btn-detalhes { background: linear-gradient(135deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); border: none; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; width: 100%; } .btn-detalhes:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } .clube-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .summary-card { background-color: rgba(0,0,0,0.2); padding: 1.5rem 1rem; border-radius: 8px; border: 1px solid var(--cor-borda); } .summary-card.highlight { border-color: var(--cor-destaque-secundaria); background-color: rgba(0, 227, 140, 0.1); } .summary-value { font-size: 2rem; font-weight: 800; color: var(--cor-destaque-primaria); margin-bottom: 0.5rem; } .summary-card.highlight .summary-value { color: var(--cor-destaque-secundaria); } .summary-label { font-size: 0.9rem; color: var(--cor-texto-secundario); font-weight: 500; } /* SOBRESCREVER ESTILOS INLINE PARA MOBILE - M�XIMA ESPECIFICIDADE */ @media (max-width: 768px) { /* SOBRESCREVER ESTILOS INLINE DO CONTAINER SUA APOSTA */ .page--otimizador-aposta .user-bet-summary h4[style*="font-size: 1.3em"] { font-size: 12px !important; /* Sobrescrever inline 1.3em */ } .page--otimizador-aposta .user-bet-summary .bet-value[style*="font-size: 1.1em"] { font-size: 9px !important; /* Sobrescrever inline 1.1em */ } .page--otimizador-aposta .user-bet-summary .bet-value[style*="font-size: 1.2em"] { font-size: 10px !important; /* Sobrescrever inline 1.2em */ } .page--otimizador-aposta .user-bet-summary .bet-label { font-size: 9px !important; /* Labels menores */ } /* SOBRESCREVER GRID INLINE - 4 COLUNAS EM UMA LINHA */ .page--otimizador-aposta .user-bet-details[style*="grid-template-columns"] { grid-template-columns: repeat(4, 1fr) !important; /* 4 colunas em uma linha */ gap: 4px !important; /* Gap m�nimo para caber */ } /* SOBRESCREVER PADDING INLINE */ .page--otimizador-aposta .user-bet-summary[style*="padding: 20px"] { padding: 8px !important; /* Padding menor para caber 4 colunas */ } /* COMPACTAR CAIXAS INDIVIDUAIS */ .page--otimizador-aposta .user-bet-summary .bet-detail[style*="padding: 10px"] { padding: 4px 6px !important; /* Padding m�nimo para caber */ } /* AJUSTAR LARGURA M�NIMA DAS CAIXAS */ .page--otimizador-aposta .user-bet-summary .bet-detail { min-width: 0 !important; /* Remover largura m�nima */ flex-shrink: 1 !important; /* Permitir encolher */ flex-direction: column !important; /* Empilhar label e valor */ text-align: center !important; /* Centralizar conte�do */ } /* AJUSTAR ESPA�AMENTO DOS ELEMENTOS INTERNOS */ .page--otimizador-aposta .user-bet-summary .bet-detail .bet-label { margin-bottom: 2px !important; /* Espa�o m�nimo entre label e valor */ } } .action-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-primary, .btn-secondary { padding: 1rem 2rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background: linear-gradient(135deg, var(--cor-destaque-secundaria), #00B377); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 227, 140, 0.4); } .btn-secondary { background-color: var(--cor-fundo); color: var(--cor-texto-principal); border: 1px solid var(--cor-borda); } .btn-secondary:hover { border-color: var(--cor-destaque-primaria); color: var(--cor-destaque-primaria); } /* RESPONSIVIDADE MOBILE FORTE */ @media (max-width: 768px) { /* 1. REMOVE A MARGEM DO CORPO DA P�GINA */ body { margin: 0 !important; /* For�a a margem para zero, removendo folgas padr�o do navegador */ padding: 0 !important; } /* 2. AJUSTA O CONTAINER PRINCIPAL */ .container { padding: 2rem 0.125rem; /* 2rem no topo/fundo e apenas 0.125rem (2px) nas laterais */ max-width: 100%; /* overflow-x: hidden; REMOVIDO - IMPEDIA STICKY */ } .header h1 { font-size: 1.44rem; /* 1.8rem * 0.8 */ } .header p { font-size: 0.76rem; /* 0.95rem * 0.8 */ padding: 0 1rem; } /* Cards de Jogos - Mobile Optimized */ .game-card { margin-bottom: 1.5rem; border-radius: 8px; } .game-card-header { padding: 2rem; /* Aumento para mais respiro em mobile */ } .game-card-header h2 { font-size: 0.96rem; /* 1.2rem * 0.8 */ line-height: 1.3; } .game-card-header .game-info { font-size: 0.64rem; /* 0.8rem * 0.8 */ } /* 3. REDUZ O PADDING INTERNO DE CADA CARD DE JOGO (Jogo 1 a 14) */ .game-card { padding: 8px 5px; /* Reduz o padding interno do card para aproximar o conte�do da borda do card */ } .game-card-body { padding: 1rem; /* Reduzido para dar mais espa�o horizontal */ } /* 3. REDUZ O PADDING INTERNO DE CADA CARD DE JOGO */ .game-card { padding: 8px 5px; /* Reduz o padding interno do card para aproximar o conte�do da borda do card */ } /* Probabilidades - Stack Vertical no Mobile */ .probabilities { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; } .prob-item { padding: 0.6rem 0.4rem; text-align: center; } .prob-item .label { font-size: 0.56rem; /* 0.7rem * 0.8 */ margin-bottom: 0.2rem; display: block; } .prob-item .value { font-size: 0.88rem; /* 1.1rem * 0.8 */ font-weight: 900; } /* Tabela de An�lise - Responsiva no mobile */ .analysis-table { display: table; width: 100%; font-size: 0.72rem; /* 0.9rem * 0.8 */ table-layout: fixed; } .analysis-table th, .analysis-table td { padding: 0.8rem 0.5rem; font-size: 0.68rem; /* 0.85rem * 0.8 */ word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } .analysis-table th:first-child { min-width: 120px; max-width: 120px; } .analysis-table th.team-header { min-width: 80px; max-width: 80px; } /* 4. AJUSTE FINO NA TABELA DE AN�LISE (Para resolver o overlap, mantendo as larguras) */ .analysis-table { table-layout: fixed; width: 100%; font-size: 0.7rem; /* Reduz ligeiramente a fonte */ } .analysis-table th, .analysis-table td { padding: 0.2rem 0.1rem; /* Reduz o espa�amento interno das c�lulas ao m�nimo (1.6px) */ vertical-align: top; min-height: 40px !important; /* FOR�A altura m�nima para 40px - TESTE COM !important */ height: 40px !important; /* FOR�A altura fixa tamb�m */ } /* Distribui��o das colunas dentro da Media Query */ .analysis-table tr td:first-child { width: 30%; min-width: 60px; } .analysis-table tr td:last-child { width: 30%; min-width: 70px; text-align: right; } .analysis-table tr td[colspan="2"] { width: 40%; } .analysis-table .confrontos-sequence { display: flex; flex-wrap: nowrap; justify-content: center; gap: 1px; /* Espa�amento m�nimo entre os boxes */ } .analysis-table .confronto-item { font-size: 0.64rem; /* 0.8rem * 0.8 */ padding: 0.4rem; min-width: 40px; text-align: center; } /* Nova estrutura mobile para an�lise - Mostrar */ .analysis-mobile { display: block; background-color: rgba(0,0,0,0.1); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; } .analysis-mobile-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); } .analysis-mobile-item:last-child { border-bottom: none; } .analysis-mobile-label { font-weight: 600; color: var(--cor-texto-secundario); font-size: 0.9rem; flex: 1; } .analysis-mobile-teams { display: flex; gap: 1rem; flex: 2; justify-content: center; font-size: 0.85rem; } .analysis-mobile-result { flex: 1; text-align: right; font-size: 0.8rem; } /* Recomenda��o Mobile */ .recommendation { padding: 0.8rem; font-size: 0.75rem; margin-bottom: 1.5rem; line-height: 1.3; } .recommendation strong { font-size: 0.75rem; font-weight: 700; } /* Conclus�o Mobile */ .analyst-conclusion { padding: 1.5rem; border-radius: 8px; margin-top: 1rem; } .analyst-conclusion h4 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--cor-destaque-primaria); } .analyst-conclusion p { font-size: 1rem; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } /* Otimizador Mobile */ .optimizer-section { margin-top: 2rem; padding: 1.5rem 0; } .optimizer-header h2 { font-size: 1.8rem; } .optimizer-header p { font-size: 1rem; padding: 0 1rem; } .budget-selector { padding: 1.5rem; margin-bottom: 2rem; } .budget-options { flex-direction: column; align-items: center; gap: 0.8rem; } .budget-btn { width: 200px; padding: 1rem 1.5rem; font-size: 1.1rem; } #custom-budget { width: 200px; padding: 1rem; font-size: 1.1rem; } .classification-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .classification-card { padding: 1.2rem; } .classification-card h4 { font-size: 1rem; margin-bottom: 0.8rem; } .classification-card p { font-size: 0.85rem; } .classification-card li { font-size: 0.85rem; padding: 0.6rem 0; } /* OTIMIZAR SE��O CLASSIFICA��O ESTRAT�GICA DOS JOGOS PARA MOBILE */ .page--otimizador-aposta .games-classification h3 { font-size: 12px !important; /* T�tulo menor para mobile */ } .page--otimizador-aposta .classification-grid { grid-template-columns: repeat(3, 1fr) !important; /* 3 colunas em uma linha */ gap: 4px !important; /* Gap m�nimo */ } .page--otimizador-aposta .classification-card { padding: 6px 8px !important; /* Padding m�nimo para caber */ min-height: 80px !important; /* Altura reduzida */ } .page--otimizador-aposta .classification-card h4 { font-size: 9px !important; /* Mesmo padr�o da tabela - 9px */ margin-bottom: 2px !important; /* Margem m�nima */ } .page--otimizador-aposta .classification-card p { font-size: 8px !important; /* Fonte menor para caber */ margin-bottom: 4px !important; /* Margem m�nima */ } .page--otimizador-aposta .classification-card li { font-size: 8px !important; /* Fonte menor para caber */ padding: 2px 0 !important; /* Padding m�nimo */ } /* Tabela de Otimiza��o Mobile */ .optimization-table-container { margin-bottom: 2rem; } .table-responsive { border-radius: 8px; } .optimization-table { font-size: 0.8rem; } .optimization-table th, .optimization-table td { padding: 0.6rem 0.4rem; vertical-align: middle; } .choice-buttons { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.4rem; max-width: 250px; width: 100%; } .choice-btn { padding: 0.4rem 0.6rem; font-size: 0.75rem; min-width: 35px; } .status-badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; } /* Resumo Mobile */ .bet-summary { padding: 1.5rem; } /* AJUSTAR TAMANHOS DO CONTAINER SUA APOSTA PARA COER�NCIA COM A TABELA */ .page--otimizador-aposta .bet-summary h3 { font-size: 12px !important; /* T�tulo menor para mobile */ } .page--otimizador-aposta .bet-summary p { font-size: 9px !important; /* Mesmo padr�o da tabela - 9px */ } .page--otimizador-aposta .bet-summary h2 { font-size: 14px !important; /* T�tulo principal menor */ } .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1.5rem; } .summary-card { padding: 1rem 0.8rem; } .page--otimizador-aposta .summary-value { font-size: 1.2rem !important; /* Reduzido de 1.6rem para 1.2rem */ } .page--otimizador-aposta .summary-label { font-size: 9px !important; /* Mesmo padr�o da tabela - 9px */ } .action-buttons { flex-direction: column; gap: 0.8rem; } /* AJUSTAR BOT�ES DO CONTAINER SUA APOSTA */ .page--otimizador-aposta .action-buttons button { font-size: 9px !important; /* Mesmo padr�o da tabela - 9px */ padding: 0.4rem 0.8rem !important; /* Padding reduzido */ } .page--otimizador-aposta .action-buttons .btn { font-size: 9px !important; /* Mesmo padr�o da tabela - 9px */ padding: 0.4rem 0.8rem !important; /* Padding reduzido */ } .btn-primary, .btn-secondary { padding: 1rem; font-size: 1rem; width: 100%; } /* Footer Mobile */ .footer-cta { padding: 1.5rem; margin-bottom: 1.5rem; } .footer-cta h3 { font-size: 10px !important; /* Tamanho de fonte 10px para t�tulo do rodap� mobile */ } .footer-cta p { font-size: 10px !important; /* Tamanho de fonte 10px para par�grafos do rodap� mobile */ } .footer-cta-btn { padding: 1rem 1.5rem; font-size: 10px !important; /* Tamanho de fonte 10px para bot�o do rodap� mobile */ width: 100%; text-align: center; } /* APLICAR REDU��O DE FONTE PARA TEXTOS ESPEC�FICOS DO RODAP� - MOBILE */ .footer-legal p, .footer-legal, .honesty-footer, .honesty-footer p, .honesty-footer strong, .honesty-footer a { font-size: 10px !important; /* Tamanho de fonte 10px para textos legais do rodap� mobile */ } /* APLICAR REDU��O PARA TODOS OS ELEMENTOS DO RODAP� - MOBILE */ .footer *, .footer-cta *, .footer-legal *, .honesty-footer * { font-size: 10px !important; /* Tamanho de fonte 10px para todos os elementos do rodap� mobile */ } /* Responsividade das Abas */ .tabs-nav { padding: 0.3rem; flex-direction: row; gap: 0.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* FOR�AR STICKY MOBILE - REGRA ULTRA ESPEC�FICA */ .container .tabs-container { position: sticky !important; top: 0 !important; z-index: 999 !important; background: linear-gradient(135deg, rgba(18, 16, 26, 0.95) 0%, rgba(30, 27, 41, 0.95) 50%, rgba(18, 16, 26, 0.95) 100%) !important; backdrop-filter: blur(8px) !important; border-bottom: 1px solid var(--cor-borda) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; transform: none !important; will-change: auto !important; } .tab-btn { padding: 0.6rem 0.5rem; font-size: 10px !important; /* Padronizado para 10px */ max-width: none; flex: 1; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; } /* Aba 2 Mobile */ .advanced-stats-container { padding: 1rem 0; } /* ABA 2 - DADOS AVAN�ADOS - RESPONSIVIDADE */ .game-selector { padding: 1rem; } .game-selector h3 { font-size: 1rem; margin-bottom: 1rem; } .game-select { font-size: 0.7rem; padding: 0.5rem; max-width: 100%; } .team-info { grid-template-columns: 1fr auto 1fr; gap: 1rem; text-align: center; } .team-logo { width: 40px; height: 40px; margin-bottom: 0.5rem; } .team-home h3, .team-away h3 { font-size: 0.75rem; margin: 0.3rem 0; } .team-position { font-size: 0.7rem; } .vs-separator { order: 0; margin-bottom: 0; } .confrontos-diretos-button-center { font-size: 0.7rem; padding: 0.4rem 0.6rem; } .vs-text { font-size: 1.2rem; } .match-info { font-size: 0.6rem; } /* T�tulos das se��es - mesmo padr�o da Aba 1 */ .stats-comparison h4 { font-size: 0.75rem; margin-bottom: 1rem; } /* .analyst-conclusion h4 { font-size: 0.75rem; margin-bottom: 0.5rem; } */ .h2h-section h4 { font-size: 0.75rem; margin-bottom: 1rem; } .data-recommendation h4 { font-size: 0.75rem; margin-bottom: 1rem; } .no-selection-content h3 { font-size: 0.75rem; margin-bottom: 0.8rem; } .game-selector h3 { font-size: 0.75rem; margin-bottom: 1rem; } .stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem; text-align: center; padding: 0.8rem; align-items: stretch; } .stat-label { font-size: 0.7rem; font-weight: 600; color: var(--cor-texto-secundario); margin-bottom: 0.5rem; grid-column: 1 / -1; text-transform: none; } .stat-value { font-size: 0.7rem; font-weight: 600; color: var(--cor-texto-principal); } .stat-bar { height: 12px; background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; width: 100%; min-width: 100px; position: relative; } .stat-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; min-width: 2px; background: linear-gradient(90deg, var(--cor-destaque-secundaria), #00B377); position: absolute; top: 0; left: 0; } .stat-fill.favorable { background: linear-gradient(90deg, #32CD32, #00FF00); } .stat-fill.unfavorable { background: linear-gradient(90deg, #FF6B6B, #FF4444); } .vs-text { font-size: 0.8rem; } .team-position { font-size: 0.7rem; } .match-info { font-size: 0.6rem; } .confrontos-diretos-button-center { font-size: 0.7rem; padding: 0.4rem 0.6rem; } .stat-home, .stat-away { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; min-width: 0; flex: 1; } .h2h-grid { grid-template-columns: 1fr; gap: 1rem; } .recommendation-factors { justify-content: center; } .no-selection { padding: 2rem 1rem; } .features-preview { grid-template-columns: 1fr; } } /* PAINEL DE CLUBES BRASILEIR�O */ .clubes-brasileirao-section { margin-top: 3rem; padding: 2rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.1)); border-radius: 1rem; border: 1px solid rgba(168, 85, 247, 0.2); } .section-header { text-align: center; margin-bottom: 2rem; position: relative; } .section-header h2 { color: var(--cor-destaque-primaria); font-size: 1.8rem; margin-bottom: 0.5rem; } .section-header p { color: var(--cor-texto-secundario); font-size: 1rem; margin-bottom: 1.5rem; } .refresh-btn { background: linear-gradient(135deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); border: none; color: white; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .refresh-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3); } .refresh-icon { transition: transform 0.5s ease; } .refresh-btn:hover .refresh-icon { transform: rotate(360deg); } .loading-clubes { text-align: center; padding: 3rem; display: none; } .loading-clubes.active { display: block; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(168, 85, 247, 0.2); border-top: 4px solid var(--cor-destaque-primaria); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .clubes-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .clube-card { background: rgba(15, 10, 24, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1.5rem; transition: all 0.3s ease; } .clube-card:hover { transform: translateY(-5px); border-color: var(--cor-destaque-primaria); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2); } .clube-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .clube-name { color: var(--cor-texto-primario); font-size: 1.1rem; font-weight: 600; } .clube-abrev { color: var(--cor-texto-secundario); font-size: 0.9rem; margin-left: 0.5rem; } .clube-badge { padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; } .badge-solido { background: rgba(34, 197, 94, 0.2); color: rgb(34, 197, 94); border: 1px solid rgba(34, 197, 94, 0.4); } .badge-atencao { background: rgba(251, 191, 36, 0.2); color: rgb(251, 191, 36); border: 1px solid rgba(251, 191, 36, 0.4); } .badge-mediano { background: rgba(59, 130, 246, 0.2); color: rgb(59, 130, 246); border: 1px solid rgba(59, 130, 246, 0.4); } .clube-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; font-size: 0.85rem; } .stat-group { text-align: center; } .stat-group.left { text-align: left; } .stat-group.right { text-align: right; } .stat-label { color: var(--cor-texto-secundario); font-size: 0.75rem; text-transform: none; letter-spacing: 0.5px; margin-bottom: 0.5rem; display: block; } .stat-value { color: var(--cor-texto-primario); font-weight: 600; display: block; margin-bottom: 0.25rem; } .rating-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-top: 0.5rem; overflow: hidden; } .rating-fill { height: 100%; background: linear-gradient(90deg, var(--cor-destaque-primaria), var(--cor-destaque-secundaria)); border-radius: 4px; transition: width 0.5s ease; } .clubes-stats-summary { display: flex; justify-content: center; gap: 2rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.1); } .summary-item { text-align: center; } .summary-label { color: var(--cor-texto-secundario); font-size: 0.8rem; display: block; margin-bottom: 0.25rem; } .summary-value { color: var(--cor-destaque-primaria); font-weight: 600; font-size: 1rem; } /* RESPONSIVIDADE DO PAINEL DE CLUBES */ @media (max-width: 768px) { .clubes-brasileirao-section { margin-top: 2rem; padding: 1rem; } .section-header h2 { font-size: 1.4rem; } .clubes-container { grid-template-columns: 1fr; gap: 1rem; } .clube-stats { grid-template-columns: 1fr; gap: 1rem; text-align: center; } .stat-group.left, .stat-group.right { text-align: center; } .clubes-stats-summary { flex-direction: column; gap: 1rem; } .refresh-btn { width: 100%; justify-content: center; } } /* RESPONSIVIDADE EXTRA PARA CELULARES PEQUENOS */ @media (max-width: 480px) { /* Reduzir logo ainda mais em celulares pequenos */ .header img.logo { max-width: 120px; /* Reduzido de 150px para 120px em celulares pequenos */ } /* Reduzir textos ainda mais em celulares pequenos - FOR�AR COM !important */ .header h1 { font-size: 1.125rem !important; /* Reduzido para 18px (1.125rem) */ } .header p { font-size: 0.5625rem !important; /* Reduzido para 9px (0.5625rem) */ } .container { padding: 0; /* Elimina��o total do respiro - m�ximo espa�o horizontal */ max-width: 100%; /* overflow-x: hidden; REMOVIDO - IMPEDIA STICKY */ } .analysis-mobile-item { padding: 0.8rem 0.3rem; min-height: 50px; } .analysis-mobile-label { font-size: 0.72rem; /* 0.9rem * 0.8 */ min-width: 70px; } .analysis-mobile-teams { font-size: 0.64rem; /* 0.8rem * 0.8 */ gap: 0.3rem; } .analysis-mobile-result { font-size: 0.64rem; /* 0.8rem * 0.8 */ min-width: 50px; } /* Game Cards - Pequenos Smartphones */ .game-card-header { padding: 1.5rem; /* Respiro adequado para telas pequenas */ } .game-card-body { padding: 1.5rem; /* Respiro adequado para telas pequenas */ } .clubes-brasileirao-section { padding: 0.75rem; margin-top: 1rem; } .section-header h2 { font-size: 1.2rem; } .section-header p { font-size: 0.9rem; } .clube-card { padding: 1rem; } .header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; } .header h1 { font-size: 1.6rem; } .header p { font-size: 0.9rem; } .game-card { margin-bottom: 1rem; border-radius: 6px; } .game-card-header { padding: 1.5rem; /* Aumento de 1.2rem para 1.5rem - mais respiro */ } .game-card-header h2 { font-size: 1.1rem; } .game-card-body { padding: 1.5rem; /* Aumento de 1.2rem para 1.5rem - mais respiro */ } .prob-item { padding: 1rem 0.8rem; } .recommendation { padding: 1rem; font-size: 0.72rem; /* 0.9rem * 0.8 */ } .analyst-conclusion { padding: 1rem; } /* .analyst-conclusion h4 { font-size: 0.95rem; } .analyst-conclusion p { font-size: 0.85rem; } */ /* Otimizador Mobile Pequeno */ .optimizer-header h2 { font-size: 1.6rem; } .budget-selector { padding: 1rem; } .budget-btn { width: 180px; padding: 0.9rem 1.2rem; font-size: 1rem; } #custom-budget { width: 180px; padding: 0.9rem; } .classification-card { padding: 1rem; } .optimization-table th, .optimization-table td { padding: 0.5rem 0.3rem; font-size: 0.75rem; } .choice-btn { padding: 0.3rem 0.5rem; font-size: 0.7rem; min-width: 30px; } .summary-grid { grid-template-columns: 1fr; gap: 0.6rem; } .summary-card { padding: 0.8rem; } .summary-value { font-size: 1.4rem; } } /* OCULTAR ELEMENTOS DESKTOP NO MOBILE */ @media (max-width: 768px) { /* Removido: .analysis-table { display: none !important; } */ } /* MOSTRAR ELEMENTOS MOBILE APENAS NO MOBILE */ .analysis-mobile { display: none; } @media (max-width: 768px) { .analysis-mobile { display: block; background-color: rgba(0,0,0,0.1); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; } .analysis-mobile-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); min-height: 60px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .analysis-mobile-item:last-child { border-bottom: none; } .analysis-mobile-label { font-weight: 600; color: var(--cor-texto-secundario); font-size: 1rem; flex: 1; min-width: 80px; } .analysis-mobile-teams { display: flex; gap: 0.5rem; flex: 2; justify-content: center; font-size: 0.9rem; flex-wrap: wrap; min-width: 0; overflow: hidden; } .analysis-mobile-result { flex: 1; text-align: right; font-size: 0.9rem; min-width: 60px; } } /* MOBILE ONLY: n�o afeta desktop */ @media (max-width:520px){ /* container que hoje tem 3 colunas (e uma delas est� vazia) */ [data-rx="aba2"] .grid-3cols.barras{ display:grid; /* duas colunas: uma para cada time */ grid-template-columns: 1fr 1fr; gap: 12px; /* espa�o entre as duas barras */ align-items: center; } /* cada barra ocupa sua pr�pria coluna */ [data-rx="aba2"] .grid-3cols.barras .stat-home, [data-rx="aba2"] .grid-3cols.barras .stat-away { display: flex; flex-direction: column; align-items: center; gap: 2px; /* reduzido de 4px para 2px */ } /* o trilho da barra ocupa 100% da sua coluna */ [data-rx="aba2"] .grid-3cols.barras .progress.dual{ width: 100%; height: clamp(4px,0.85vw,5px); /* reduzido pela metade */ } /* valores ficam acima das barras */ [data-rx="aba2"] .grid-3cols.barras .stat-value { font-size: 0.7rem; font-weight: 600; margin-bottom: 1px; /* reduzido de 2px para 1px */ } /* label fica centralizado acima das duas colunas */ [data-rx="aba2"] .grid-3cols.barras .stat-label { grid-column: 1 / -1; text-align: center; margin-bottom: 4px; /* reduzido de 8px para 4px */ font-size: 0.7rem; } /* reduzir espa�amento entre as linhas das estat�sticas */ [data-rx="aba2"] .stat-row { margin: 1px 0; /* reduzido em 80% - de 4px para 1px */ } /* reduzir espa�amento entre containers de estat�sticas */ [data-rx="aba2"] .stats-grid { gap: 2px; /* reduzido drasticamente o gap entre containers */ } } /* An�lise de Desempenho Recente (4 Pilares) */ .analise-desempenho-container { margin: 2rem 0; background: rgba(255, 255, 255, 0.02); border-radius: 15px; border: 1px solid rgba(168, 85, 247, 0.2); padding: 2rem; } .pilares-analise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .pilar-card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .pilar-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15); } .pilar-header { text-align: center; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.3); padding-bottom: 1rem; } .pilar-header h5 { color: var(--cor-destaque-primaria); margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; } .pilar-subtitle { color: var(--cor-texto-secundario); font-size: 0.85rem; font-weight: 500; } .pilar-content { display: flex; flex-direction: column; gap: 1rem; } .analise-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; border-left: 3px solid var(--cor-destaque-primaria); } .analise-label { font-size: 0.85rem; color: var(--cor-texto-secundario); font-weight: 500; } .analise-valor { font-size: 0.95rem; color: var(--cor-texto-principal); font-weight: 600; font-family: 'Courier New', monospace; } .analise-resultado { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 4px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; } .analise-resultado.vantagem-alta { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); } .analise-resultado.vantagem-media { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .analise-resultado.vantagem-baixa { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } .analise-resultado.equilibrado { background: rgba(156, 163, 175, 0.2); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.3); } .analise-resultado.atencao { background: rgba(245, 101, 101, 0.2); color: #f56565; border: 1px solid rgba(245, 101, 101, 0.3); } .pilar-conclusao { margin-top: 1rem; padding: 1rem; background: rgba(168, 85, 247, 0.1); border-radius: 8px; border: 1px solid rgba(168, 85, 247, 0.2); font-size: 0.9rem; color: var(--cor-texto-principal); text-align: center; } /* Decis�o Final */ .decisao-final-container { background: rgba(168, 85, 247, 0.05); border-radius: 12px; border: 2px solid rgba(168, 85, 247, 0.3); padding: 2rem; margin-top: 2rem; } .decisao-final-container h5 { color: var(--cor-destaque-primaria); text-align: center; margin-bottom: 1.5rem; font-size: 1.2rem; font-weight: 700; } .resumo-pilares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; } .resumo-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .pilar-nome { font-size: 0.85rem; color: var(--cor-texto-secundario); font-weight: 500; } .vantagem { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 4px; text-transform: uppercase; } .palpite-final { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 10px; border: 1px solid rgba(168, 85, 247, 0.4); } .palpite-recomendado, .confianca-nivel { text-align: center; } .palpite-label, .confianca-label { display: block; font-size: 0.85rem; color: var(--cor-texto-secundario); margin-bottom: 0.5rem; font-weight: 500; } .palpite-valor { display: block; font-size: 1.1rem; color: var(--cor-destaque-primaria); font-weight: 700; } .confianca-valor { display: block; font-size: 1.1rem; font-weight: 700; } .confianca-valor.alta { color: #22c55e; } .confianca-valor.media { color: #fbbf24; } .confianca-valor.baixa { color: #ef4444; } /* Responsividade da An�lise */ @media (max-width: 768px) { .pilares-analise { grid-template-columns: 1fr; gap: 1rem; } .resumo-pilares { grid-template-columns: 1fr; } .palpite-final { grid-template-columns: 1fr; gap: 1rem; } .analise-desempenho-container { padding: 1rem; margin: 1rem 0; } } /* Recomenda��o Baseada em Estat�sticas - Nova Estrutura */ .analise-section { margin: 2rem 0; background: rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); } .section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid; text-align: center; } .section-title.forca { color: #22c55e; border-bottom-color: rgba(34, 197, 94, 0.3); } .section-title.risco { color: #f59e0b; border-bottom-color: rgba(245, 158, 11, 0.3); } .campos-analise { display: flex; flex-direction: column; gap: 1.5rem; } .campo-item { background: rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 1.5rem; border-left: 4px solid; transition: transform 0.2s ease, box-shadow 0.2s ease; } .campo-item:hover { transform: translateX(5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .campo-item.forca { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.05); } .campo-item.risco { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.05); } .campo-header { margin-bottom: 1rem; } .campo-nome { font-size: 1rem; font-weight: 700; color: var(--cor-texto-principal); display: block; } .campo-explicacao, .campo-importancia { margin-bottom: 0.75rem; padding: 0.75rem; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; } .campo-explicacao { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: var(--cor-texto-principal); } .campo-importancia { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); color: var(--cor-texto-principal); } .campo-explicacao strong, .campo-importancia strong { color: var(--cor-destaque-primaria); font-weight: 600; } /* Conclus�o Final */ .conclusao-final { margin-top: 2rem; background: rgba(168, 85, 247, 0.1); border-radius: 12px; border: 2px solid rgba(168, 85, 247, 0.3); padding: 2rem; } .conclusao-header h5 { color: var(--cor-destaque-primaria); font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; text-align: center; } .conclusao-content p { font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; color: var(--cor-texto-principal); text-align: center; } .palpite-recomendado-final { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 8px; border: 1px solid rgba(168, 85, 247, 0.4); } .palpite-recomendado-final .palpite-label { font-size: 0.9rem; color: var(--cor-texto-secundario); font-weight: 500; } .palpite-recomendado-final .palpite-valor { font-size: 1.1rem; color: var(--cor-destaque-primaria); font-weight: 700; } /* Responsividade da Nova Recomenda��o */ @media (max-width: 768px) { .analise-section { padding: 1rem; margin: 1rem 0; } .campo-item { padding: 1rem; } .conclusao-final { padding: 1rem; } .palpite-recomendado-final { flex-direction: column; gap: 0.5rem; text-align: center; } } /* Confronto Direto Resumo na Aba 1 */ .confronto-direto-resumo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem; } .confronto-direto-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; } .confronto-direto-escudo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } .confronto-direto-count { color: var(--cor-texto-principal); font-weight: 700; } .confronto-direto-separador { color: var(--cor-texto-secundario); font-weight: 500; margin: 0 0.5rem; } /* ESTILOS S�RIE C - GRUPOS */ .serie-c-container { width: 100%; } .serie-c-phase { text-align: center; padding: 1rem 0; margin-bottom: 2rem; } .serie-c-phase h4 { color: var(--cor-destaque-primaria); font-size: 1.5rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 2px; } .grupo-container { background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; } .grupo-container h5 { color: var(--cor-destaque-secundaria); font-size: 1.3rem; font-weight: 700; margin: 0 0 1.5rem 0; text-transform: uppercase; letter-spacing: 1px; } .table-header-grupo { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 227, 140, 0.1)); padding: 0.8rem; border-radius: 8px 8px 0 0; text-align: center; font-weight: 700; color: var(--cor-texto-principal); font-size: 1.1rem; } .grupo-table-content { background-color: var(--cor-fundo-card); border-radius: 0 0 8px 8px; overflow: hidden; } .grupo-row { display: grid; grid-template-columns: 30px 150px 40px 30px 30px 30px 30px 40px 40px 40px 50px 120px; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--cor-borda); align-items: center; } .grupo-row.header { background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(0, 227, 140, 0.05)); font-weight: 700; color: var(--cor-texto-secundario); font-size: 0.85rem; text-transform: uppercase; } .grupo-row:last-child { border-bottom: none; } .grupo-row .pos { text-align: center; font-weight: 700; color: var(--cor-destaque-primaria); } .grupo-row .time { font-weight: 600; color: var(--cor-texto-principal); } .grupo-row .pontos { text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--cor-destaque-secundaria); } .grupo-row .jogos, .grupo-row .vitorias, .grupo-row .empates, .grupo-row .derrotas, .grupo-row .gols-pro, .grupo-row .gols-contra, .grupo-row .saldo, .grupo-row .percentual { text-align: center; color: var(--cor-texto-secundario); } .grupo-row .ultimos { display: flex; justify-content: center; gap: 0.25rem; } .resultado-dot { width: 7.78px; /* Reduzido mais 10% de 8.64px */ height: 7.78px; /* Reduzido mais 10% de 8.64px */ border-radius: 50%; display: inline-block; } .resultado-dot.vitoria { background-color: #00E38C; } .resultado-dot.empate { background-color: #FBBF24; } .resultado-dot.derrota { background-color: #F43F5E; } .arrow-up { color: #00E38C; font-size: 1rem; margin-left: 0.25rem; } .arrow-down { color: #F43F5E; font-size: 1rem; margin-left: 0.25rem; } /* Responsividade S�rie C */ @media (max-width: 1024px) { .grupo-row { grid-template-columns: 25px 120px 35px 25px 25px 25px 25px 35px 35px 35px 45px 100px; gap: 0.3rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; } .resultado-dot { width: 6.48px; /* Reduzido mais 10% de 7.2px */ height: 6.48px; /* Reduzido mais 10% de 7.2px */ } } @media (max-width: 768px) { .grupo-row { grid-template-columns: 20px 100px 30px 20px 20px 20px 20px 30px 30px 30px 40px 80px; gap: 0.2rem; padding: 0.5rem 0.5rem; font-size: 0.75rem; } .grupo-container { padding: 1rem; } .resultado-dot { width: 5.18px; /* Reduzido mais 10% de 5.76px */ height: 5.18px; /* Reduzido mais 10% de 5.76px */ } .serie-c-phase h4 { font-size: 1.2rem; } .grupo-container h5 { font-size: 1.1rem; } } /* ===== ESTILOS PARA COMPARA��O ELEGANTE ===== */ .comparacao-elegante { background: transparent; border-radius: 0; padding: 0; margin: 0; border: none; backdrop-filter: none; box-shadow: none; } .comparacao-header { text-align: center; margin-bottom: 32px; } .comparacao-header h3 { color: var(--cor-destaque-primaria); font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; } .comparacao-header p { color: var(--cor-texto-secundario); font-size: 1rem; margin: 0; } .comparacao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px; } .comparacao-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border-radius: 12px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .comparacao-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.3); } .card-header { margin-bottom: 20px; text-align: center; } .card-header h4 { color: var(--cor-destaque-primaria); font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; } .card-subtitle { color: var(--cor-texto-secundario); font-size: 0.9rem; font-style: italic; } .bars-container { display: flex; flex-direction: column; gap: 16px; } .bar-item { display: flex; flex-direction: column; gap: 8px; } .bar-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .team-name { font-weight: 600; font-size: 0.95rem; } .team-name.flamengo { color: #ef4444; } .team-name.palmeiras { color: #10b981; } .bar-value { font-weight: 700; font-size: 1.1rem; color: var(--cor-texto-primario); } .bar-track { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; position: relative; } .bar-fill { height: 100%; border-radius: 4px; transition: all 0.6s ease; position: relative; } .bar-fill.flamengo { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); } .bar-fill.palmeiras { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ===== ESTILOS PARA TABELA DE COMPARA��O ESTILO IMAGEM ===== */ .comparacao-tabela { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); margin: 20px 0; } .tabela-comparacao { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; } .tabela-comparacao thead th { background: linear-gradient(135deg, #1e293b, #334155); color: #ffffff; font-weight: 700; padding: 16px 12px; text-align: center; border-bottom: 3px solid #A855F7; font-size: 0.95rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .categoria-col { text-align: left !important; width: 35%; } .time-col { width: 20%; font-weight: 700; text-align: center; padding: 12px 8px; border-radius: 8px; margin: 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .time-col.palmeiras { background: linear-gradient(135deg, #10b981, #047857); color: #ffffff; border: 2px solid #059669; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); } .time-col.flamengo { background: linear-gradient(135deg, #dc2626, #991b1b); color: #ffffff; border: 2px solid #b91c1c; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4); } .vencedor-col { width: 25%; text-align: center; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; font-weight: 700; border: 2px solid #d97706; border-radius: 8px; padding: 12px 8px; margin: 4px; box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .btn-computar { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #ffffff; border: 2px solid #1e40af; border-radius: 6px; padding: 4px 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; margin-top: 4px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); } .btn-computar:hover { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4); } .btn-computar:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); } /* DOT COLORIDO PARA VANTAGEM */ .dot.vermelho { background: linear-gradient(135deg, #dc2626, #991b1b); border: 2px solid #b91c1c; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4); } .dot.verde { background: linear-gradient(135deg, #10b981, #047857); border: 2px solid #059669; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4); } .dot.amarelo { background: linear-gradient(135deg, #f59e0b, #d97706); border: 2px solid #b45309; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4); } .categoria-header td { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; font-weight: 700; padding: 12px 16px; border-bottom: 1px solid #cbd5e1; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .stat-row { transition: all 0.3s ease; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-radius: 8px; margin: 4px 0; border: 1px solid #e2e8f0; } .stat-row:hover { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .stat-row td { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; font-weight: 600; } .stat-label { color: #1e293b; font-weight: 700; font-size: 0.95rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .stat-value { text-align: center; font-weight: 700; font-size: 1rem; padding: 8px 12px; border-radius: 6px; margin: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .stat-value.palmeiras { background: linear-gradient(135deg, #10b981, #047857); color: #ffffff; border: 2px solid #059669; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); } .stat-value.flamengo { background: linear-gradient(135deg, #dc2626, #991b1b); color: #ffffff; border: 2px solid #b91c1c; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3); } .stat-value.vencedor { font-weight: 700; font-size: 1rem; } .vencedor-indicator { text-align: center; font-size: 0.9rem; font-weight: 700; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; border-radius: 8px; padding: 8px 12px; border: 2px solid #d97706; box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .dot { display: inline-block; width: 5.18px; /* Reduzido mais 10% de 5.76px */ height: 5.18px; /* Reduzido mais 10% de 5.76px */ border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot.verde { background: linear-gradient(135deg, #10b981, #047857); border: 2px solid #059669; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4); } .dot.vermelho { background: linear-gradient(135deg, #dc2626, #991b1b); border: 2px solid #b91c1c; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4); } .dot.amarelo { background: linear-gradient(135deg, #f59e0b, #d97706); border: 2px solid #b45309; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4); } .dot.cinza { background: linear-gradient(135deg, #9ca3af, #6b7280); border: 2px solid #6b7280; box-shadow: 0 2px 4px rgba(156, 163, 175, 0.4); } .stat-value.vencedor { font-weight: 800; font-size: 1.1rem; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; border-radius: 8px; padding: 8px 12px; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4); border: 2px solid #d97706; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); animation: pulseVencedor 2s ease-in-out infinite alternate; } @keyframes pulseVencedor { 0% { transform: scale(1); box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4); } 100% { transform: scale(1.05); box-shadow: 0 6px 16px rgba(251, 191, 36, 0.6); } } /* Responsividade */ @media (max-width: 768px) { .tabela-comparacao { font-size: 0.8rem; } .tabela-comparacao thead th, .stat-row td, .categoria-header td { padding: 8px 6px; } .categoria-col { width: 40%; } .time-col, .vencedor-col { width: 30%; } } /* ===== NOVA ESTRUTURA ORGANIZADA ===== */ .nova-comparacao { background: transparent; border-radius: 0; padding: 0; margin: 0; box-shadow: none; border: none; } .container-secao { background: transparent; border-radius: 0; margin: 8px 0; padding: 0; border: none; box-shadow: none; } .secao-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #475569; } .secao-header h4 { color: #f1f5f9; font-size: 1.2rem; font-weight: 700; margin: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .tabela-secao { display: flex; flex-direction: column; gap: 8px; } /* LINHA DE T�TULOS */ .linha-titulos { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; padding: 16px 12px; background: linear-gradient(135deg, #1e293b, #334155); border-radius: 8px; border: 2px solid #475569; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .linha-titulos .coluna { font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; background: transparent; border: 1px solid #334155; border-radius: 6px; } .linha-tabela { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; padding: 12px; background: linear-gradient(135deg, #0f172a, #1e293b); border-radius: 8px; border: 1px solid #334155; transition: all 0.3s ease; } .linha-tabela:hover { background: rgba(148, 163, 184, 0.05); border-color: #475569; } .coluna { padding: 8px 12px; border-radius: 6px; text-align: center; font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 40px; } .coluna.categoria { background: transparent; color: #e2e8f0; font-weight: 600; border: 1px solid #334155; border-radius: 6px; } .coluna.mandante { background: transparent; color: #e2e8f0; font-weight: 600; border: 1px solid #334155; border-radius: 6px; } .coluna.visitante { background: transparent; color: #e2e8f0; font-weight: 600; border: 1px solid #334155; border-radius: 6px; } .coluna.vantagem { background: transparent; color: #e2e8f0; font-weight: 600; border: 1px solid #334155; border-radius: 6px; position: relative; } /* Badge da nova estrutura - Minimalista */ .coluna.vantagem .vantagem-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: transparent; border: none; color: #e2e8f0; font: 500 14px/1.2 Inter, system-ui; white-space: nowrap; } .coluna.vantagem .vantagem-badge::before { display: none; } .coluna.vantagem .vantagem-badge.is-flamengo::before { background: #ef4444; } .coluna.vantagem .vantagem-badge.is-palmeiras::before { background: #22c55e; } /* Responsivo */ @media (max-width: 768px) { .linha-tabela { grid-template-columns: 1fr; gap: 8px; } .coluna { min-height: 32px; font-size: 0.9rem; } } /* Estilos para os �cones de informa��o */ .info-icon { display: inline-block; width: 18px; height: 18px; background: #ef4444; color: white; border-radius: 50%; text-align: center; font-size: 11px; font-weight: bold; line-height: 18px; cursor: pointer; margin-left: 6px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3); } .info-icon:hover { background: #dc2626; transform: scale(1.15); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.5); } /* ✅ ÍCONE DE INFORMAÇÃO PARA FORÇA DOS ELENCOS */ .info-icon-elenco { display: inline-block; width: 24px; height: 24px; background: #ef4444; color: white; border-radius: 50%; text-align: center; font-size: 14px; font-weight: bold; line-height: 24px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 10; } .info-icon-elenco:hover { background: #dc2626; transform: translateX(-50%) scale(1.2); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6); } /* Ajustar vs-divider para acomodar o ícone */ .vs-divider-confronto { position: relative; padding-top: 20px; } /* Estilos para o modal */ .modal-info { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .modal-content { background-color: #1e293b; margin: 5% auto; padding: 24px; border: 1px solid #334155; border-radius: 12px; width: 80%; max-width: 600px; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #334155; } .modal-title { color: #f1f5f9; font-size: 18px; font-weight: 600; margin: 0; } .close { color: #94a3b8; font-size: 24px; font-weight: bold; cursor: pointer; transition: color 0.2s ease; } .close:hover { color: #f1f5f9; } .modal-body { color: #cbd5e1; line-height: 1.6; } .modal-body h4 { color: #f1f5f9; margin-top: 16px; margin-bottom: 8px; font-size: 14px; } .modal-body p { margin: 8px 0; font-size: 14px; } .modal-body strong { color: #60a5fa; } /* Espa�amento adicional para containers */ .game-card { margin-left: 0.5rem; margin-right: 0.5rem; } /* ======================================== PASSO 3: KIT GUARDA-CORPO - COMPONENTES ======================================== */ /* AJUSTE PARA ALINHAR TEXTO E CONTROLAR TABELA GERAL */ /* Esta regra deve ser aplicada a TODOS os tamanhos de tela (Mobile-First) */ .page--analise-rapida .analysis-table td { /* 1. Alinhamento Vertical Centralizado */ /* Garante que o texto fique no meio da linha, e n�o no topo. */ vertical-align: middle !important; /* 2. Redu��o do Padding para otimizar o espa�o */ padding: 6px 4px; /* Mais compacto que o padr�o, se for a c�lula da tabela */ } /* Garante que o container interno dos textos tamb�m ajude no alinhamento */ .page--analise-rapida .analysis-table .stat-label, .page--analise-rapida .analysis-table .stat-analise { /* Flexbox ajuda no alinhamento se o conte�do for complexo, mas vertical-align j� deve resolver */ display: flex; align-items: center; /* Alinha o conte�do ao centro vertical do seu container */ min-height: 40px; /* Aumentado de 36px para 40px - TESTE */ } /* AJUSTE NO CARD DE CADA JOGO (Container Filho) */ .game-card { /* O padding atual pode estar muito folgado. Reduza aqui. */ /* Exemplo: Reduzir para 8px laterais */ padding: 10px 8px; /* Se voc� tiver margens laterais no game-card, zere-as dentro da media query */ margin-left: 0; margin-right: 0; } /* Garante que o container principal tamb�m esteja compacto (j� fizemos antes, s� para revisar) */ .page--analise-rapida.container { padding-left: var(--gutter, 16px); /* Use a vari�vel se for Mobile-First, ou defina um valor baixo no @media */ padding-right: var(--gutter, 16px); } @media (max-width: 768px) { /* Se a folga lateral ainda estiver alta, reduza a folga do container pai */ .container { padding: 1.5rem 0.5rem; /* 8px laterais */ } /* E ajuste o padding interno do card de jogo */ .game-card { padding: 8px 5px; /* Reduzindo para 5px laterais */ } } /* AJUSTE NA TABELA DE AN�LISE (@media (max-width: 768px) ou regra base mobile) */ /* 2.1 Distribui��o das colunas da Tabela (Crucial para o Overlap) */ .page--analise-rapida .analysis-table tr td:first-child { /* Coluna "Fator Analisado" (ex: �ltimos Confrontos) */ width: 30%; min-width: 70px; /* Garante que o texto caiba, mas deixa a coluna apertada */ } .page--analise-rapida .analysis-table tr td[colspan="2"] { /* Coluna Central (os 10 boxes) - Dando um pouco mais de espa�o aqui */ width: 45%; /* Aumenta a largura para caber os boxes */ } .page--analise-rapida .analysis-table tr td:last-child { /* Coluna "An�lise" (ex: Confronto Equilibrado) */ width: 25%; /* Diminui a largura para liberar espa�o para o centro */ min-width: 60px; } /* 3.1 �ltimos Confrontos (10 pills) - FOCO APENAS NA ABA AN�LISE R�PIDA */ /* MOBILE - APENAS NA ABA AN�LISE R�PIDA */ @media (max-width: 768px) { .page--analise-rapida .confrontos-sequence{ display:grid; grid-template-columns: repeat(5, minmax(40px,1fr)); /* Ajustado para 40px */ column-gap: 4px; /* SEPARA��O HORIZONTAL entre boxes */ row-gap: 10px; /* SEPARA��O VERTICAL ENTRE AS LINHAS - MAIS ESPA�O */ justify-content:center; align-items:center; padding:4px 0; } /* FOR�AR ESTILOS INLINE A RESPEITAREM MEDIA QUERIES */ .page--analise-rapida .confrontos-sequence > div[style*="min-width: 45px"] { min-width: 40px !important; /* Aumentado de 30px para 40px */ padding: 3px 4px !important; /* Aumentado de 2px 3px para 3px 4px */ margin: 1px !important; /* Mantido 1px */ height: 22px !important; /* Mantido 22px */ } .page--analise-rapida .confrontos-sequence > div[style*="font-size: 7px"] { font-size: 6px !important; /* Mantido 6px */ margin-bottom: 1px !important; /* Mantido 1px */ } .page--analise-rapida .confrontos-sequence > div[style*="width: 16px"] { width: 12px !important; /* Aumentado de 10px para 12px */ height: 12px !important; /* Aumentado de 10px para 12px */ font-size: 6px !important; /* Mantido 6px */ } .page--analise-rapida .confrontos-sequence > .confronto-item{ display:inline-flex; align-items:center; justify-content:center; gap: 3px; /* Reduzido de 4px para 3px */ min-width: 30px; /* Reduzido de 32px para 30px */ height: 22px; /* Reduzido de 24px para 22px */ padding: 3px 5px; /* Reduzindo padding */ border-radius:6px; /* Ajuste para caixas menores */ font:600 9px/1 Inter,system-ui; /* Fonte ainda mais compacta */ } .page--analise-rapida .confrontos-sequence > .confronto-item img{ width: 9px; height: 9px; } } /* Desktop (2 linhas de 5 boxes) */ @media (min-width: 768px){ .page--analise-rapida .confrontos-sequence{ grid-template-columns: repeat(5, minmax(56px,1fr)); /* 2 linhas de 5 boxes */ grid-template-rows: repeat(2, 1fr); /* 2 linhas */ gap:10px; } .page--analise-rapida .confrontos-sequence > .confronto-item{ min-width:56px; height:36px; padding:8px 10px; border-radius:10px; font-size:12px; } .page--analise-rapida .confrontos-sequence > .confronto-item img{ width:18px; height:18px; } } /* === S20 / mobile: �ltimos Confrontos (2x5), com espa�amento vertical real === */ @media (max-width: 380px){ /* Centralizar verticalmente as c�lulas da linha dos 10 pills */ .analysis-table tr:has(.confrontos-sequence) td{ vertical-align: middle; } /* Centralizar horizontalmente os textos das colunas 1 e 4 */ .analysis-table tr:has(.confrontos-sequence) td:first-child, .analysis-table tr:has(.confrontos-sequence) td:last-child{ text-align: center; } /* A grade dos pills � 2 linhas x 5, com ROW-GAP expl�cito */ .analysis-table .confrontos-sequence{ display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(5, minmax(50px, 1fr)) !important; /* ✅ Ajustado para boxes maiores */ column-gap: 6px !important; /* espa�o entre colunas */ row-gap: 15px !important; /* ✅ Espaço aumentado entre as LINHAS */ justify-items: center !important; align-items: center !important; width: 100%; padding: 4px 0; /* d� "ar" e evita encostar no topo */ } /* Os pills - RETÂNGULO DEITADO (mais largo que alto) */ .analysis-table .confrontos-sequence .confronto-item{ min-width: 50px !important; /* ✅ LARGURA para mobile */ max-width: 60px !important; /* ✅ LARGURA MÁXIMA */ height: 45px !important; /* ✅ ALTURA PERFEITA */ padding: 5px 6px !important; border-radius: 8px !important; gap: 2px !important; font-size: 10.5px !important; line-height: 1 !important; } .analysis-table .confrontos-sequence .confronto-placar{ font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA */ line-height: 1 !important; padding: 1px 2px !important; margin-bottom: 0 !important; /* evita empurrar a segunda linha */ border-radius: 2px !important; } .analysis-table .confrontos-sequence .confronto-data{ font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA */ line-height: 1 !important; } .analysis-table .confrontos-sequence .confronto-escudo, .analysis-table .confrontos-sequence .confronto-result{ width: 12px !important; height: 12px !important; } } /* ======================================== FOR�A ALTURA 40px - APENAS LINHA �LTIMOS CONFRONTOS ======================================== */ @media (max-width: 768px) { /* APENAS a linha que cont�m os 10 boxes */ .analysis-table tr:has(.confrontos-sequence) td { min-height: 40px !important; height: 40px !important; } /* TESTE: Elemento espec�fico forma-analise-1-novo com 46px */ #forma-analise-1-novo { min-height: 46px !important; height: 46px !important; } /* REDUZIR FONTES DAS COLUNAS 1, 2, 3 E 4 PARA 9px - APENAS MOBILE */ .analysis-table tr td:first-child, /* Coluna 1 - Fator Analisado */ .analysis-table tr td:last-child { /* Coluna 4 - An�lise */ font-size: 9px !important; text-transform: none !important; /* Remove caps locks */ } /* FORCAR 9px NAS CELULAS ESPECIFICAS DA COLUNA 4 - SOBRESCREVER DESKTOP */ .analysis-table td[id^="posicao-analise-"], .analysis-table td[id^="h2h-analise-"], .analysis-table td[id^="fator-analise-"], .analysis-table td[id^="forma-analise-"] { font-size: 9px !important; line-height: 1.3 !important; } /* ALINHAR APENAS O T�TULO "AN�LISE" � DIREITA - APENAS MOBILE */ .analysis-table thead th:last-child { text-align: right !important; } /* ALINHAR CONTE�DO DAS C�LULAS DA COLUNA 4 � DIREITA - APENAS MOBILE */ .analysis-table tr td:last-child { text-align: right !important; } } /* ALINHAR T�TULO "AN�LISE" NO CENTRO - DESKTOP */ @media (min-width: 769px) { .analysis-table thead th:last-child { text-align: center !important; } } /* REDUZIR FONTES DA CONCLUS�O DO ANALISTA - APENAS MOBILE */ @media (max-width: 768px) { /* Colunas 2 e 3 - Nomes dos Times - MOVIDO PARA MOBILE */ .analysis-table tr td.team-header { font-size: 9px !important; text-transform: none !important; /* Remove caps locks */ } .analyst-conclusion h4 { font-size: 14px !important; /* Reduzido de 1.1rem (17.6px) para 14px */ } .analyst-conclusion p { font-size: 12px !important; /* Reduzido de 1rem (16px) para 12px */ } /* Outras linhas voltam ao tamanho original */ .analysis-table td { min-height: 36px !important; height: auto !important; } } /* RESTAURAR TAMANHOS ORIGINAIS DA CONCLUS�O DO ANALISTA - DESKTOP */ @media (min-width: 769px) { .analyst-conclusion h4 { font-size: 1.1rem !important; /* Restaurar tamanho original (17.6px) */ } .analyst-conclusion p { font-size: 1rem !important; /* Restaurar tamanho original (16px) */ } } /* FOR�AR TAMANHOS ORIGINAIS PARA DESKTOP AMPLO - SOBRESCREVER REGRA GLOBAL */ @media (min-width: 1025px) { .analyst-conclusion h4 { font-size: 1.1rem !important; /* For�ar tamanho original (17.6px) */ } .analyst-conclusion p { font-size: 1rem !important; /* For�ar tamanho original (16px) */ } } /* RESPONSIVIDADE ESPEC�FICA PARA PANORAMA DOS CAMPEONATOS - MOBILE */ @media (max-width: 768px) { .page--panorama-campeonatos .section-header h2 { font-size: 12px !important; color: var(--cor-destaque-primaria) !important; } /* AJUSTE DOS BOT�ES INTERNACIONAIS PARA MOBILE */ .page--panorama-campeonatos .international-selector { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.2rem !important; padding: 0.2rem !important; margin: 0 !important; justify-content: space-between !important; align-items: stretch !important; } .page--panorama-campeonatos .intl-champ-btn { flex: 1 !important; min-width: 0 !important; max-width: none !important; width: auto !important; padding: 0.4rem 0.2rem !important; font-size: 8px !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; word-break: break-word !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 50px !important; border-radius: 6px !important; } .page--panorama-campeonatos .intl-champ-btn br { display: block !important; margin: 0.1rem 0 !important; } /* FONTE E CORES - MOBILE ONLY */ .page--panorama-campeonatos .section-header p { font-size: 9px !important; color: var(--cor-texto-secundario) !important; } .page--panorama-campeonatos h3 { font-size: 10px !important; color: var(--cor-destaque-primaria) !important; } .page--panorama-campeonatos h4, .page--panorama-campeonatos h5, .page--panorama-campeonatos h6 { font-size: 9px !important; color: var(--cor-destaque-primaria) !important; } .page--panorama-campeonatos p, .page--panorama-campeonatos span, .page--panorama-campeonatos div { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .label, .page--panorama-campeonatos .badge, .page--panorama-campeonatos .tag { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos button, .page--panorama-campeonatos .btn { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos table th, .page--panorama-campeonatos table td { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .sub-tab-btn { font-size: 10px !important; /* Padronizado para 10px */ color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .championship-selector h3 { font-size: 10px !important; /* J� estava 10px - mantido */ color: var(--cor-destaque-primaria) !important; } .page--panorama-campeonatos .championship-buttons button { font-size: 10px !important; /* Padronizado para 10px */ color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .info-box h3 { font-size: 10px !important; /* J� estava 10px - mantido */ color: var(--cor-destaque-primaria) !important; } .page--panorama-campeonatos .info-box p { font-size: 8px !important; color: var(--cor-texto-secundario) !important; } .page--panorama-campeonatos .coming-soon h3 { font-size: 10px !important; /* J� estava 10px - mantido */ color: var(--cor-destaque-primaria) !important; } .page--panorama-campeonatos .coming-soon p { font-size: 8px !important; color: var(--cor-texto-secundario) !important; } .page--panorama-campeonatos .feature-item { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .refresh-btn { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .loading-container p { font-size: 8px !important; color: var(--cor-texto-secundario) !important; } .page--panorama-campeonatos .brasileirao-table th, .standings-table th, .page--panorama-campeonatos .brasileirao-table td, .standings-table td { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .zones-info h4 { font-size: 10px !important; /* Padronizado para 10px */ color: var(--cor-destaque-primaria) !important; } .page--panorama-campeonatos .zone-item strong { font-size: 8px !important; color: var(--cor-texto-principal) !important; } .page--panorama-campeonatos .zone-item span { font-size: 7px !important; color: var(--cor-texto-secundario) !important; } } @media (max-width: 480px) { .page--panorama-campeonatos .intl-champ-btn { padding: 0.3rem 0.1rem !important; font-size: 7px !important; min-height: 45px !important; } } /* REDUZIR RESPIRA��O LATERAL DAS TABELAS DE CLASSIFICA��O - MOBILE */ .page--panorama-campeonatos .classification-table-container { padding: 0.2rem !important; /* Reduzir padding lateral drasticamente */ margin: 0 !important; /* Remover margens */ } .page--panorama-campeonatos .brasileirao-table, .page--panorama-campeonatos .standings-table { margin: 0 !important; /* Remover margens da tabela */ width: 100% !important; /* Usar toda a largura dispon�vel */ } /* ===== FIX: TABELAS INTERNACIONAIS OCUPAREM MAIS ESPAÇO ===== */ /* Remover padding excessivo das tabelas internacionais em mobile */ #internacionais .classification-table { padding: 0.2rem !important; /* Reduzir de 2rem para 0.2rem */ margin: 0 !important; /* Remover margens */ border: none !important; /* Remover borda para ganhar espaço */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th, .page--panorama-campeonatos .brasileirao-table td, .standings-table td { padding: 0.2rem 0.1rem !important; /* Padding m�nimo nas c�lulas */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th:first-child, .page--panorama-campeonatos .brasileirao-table td, .standings-table td:first-child { padding-left: 0.2rem !important; /* Padding m�nimo na primeira coluna */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th:last-child, .page--panorama-campeonatos .brasileirao-table td, .standings-table td:last-child { padding-right: 0.2rem !important; /* Padding m�nimo na �ltima coluna */ } /* REDUZIR RESPIRA��O DOS CONTAINERS DE SE��O */ .page--panorama-campeonatos .championship-section { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } .page--panorama-campeonatos .championship-selector { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } .page--panorama-campeonatos .championship-buttons { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } /* REDUZIR RESPIRA��O DOS CONTAINERS DE INFO */ .page--panorama-campeonatos .info-box { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } .page--panorama-campeonatos .coming-soon { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } /* REDUZIR RESPIRA��O DOS CONTAINERS DE ZONAS */ .page--panorama-campeonatos .zones-info { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } .page--panorama-campeonatos .zone-item { padding: 0.1rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } /* FIX: Tabelas internacionais em telas pequenas (max-width: 768px) */ #internacionais .classification-table { padding: 0.1rem !important; /* Ainda menor para telas pequenas */ margin: 0 !important; border: none !important; } } /* ===== LANDSCAPE MODE: TABELAS INTERNACIONAIS OCUPAREM MAIS ESPAÇO ===== */ @media (orientation: landscape) and (max-height: 800px) { /* Remover padding excessivo das tabelas internacionais em landscape */ #internacionais .classification-table { padding: 0.2rem !important; /* Reduzir de 2rem para 0.2rem */ margin: 0 !important; /* Remover margens */ border: none !important; /* Remover borda para ganhar espaço */ } .page--panorama-campeonatos .brasileirao-table, .page--panorama-campeonatos .standings-table { margin: 0 !important; width: 100% !important; } } /* REDUZIR AINDA MAIS O RESPIRACAO PARA TELAS MUITO PEQUENAS */ @media (max-width: 480px) { /* FIX: Tabelas internacionais em telas muito pequenas */ #internacionais .classification-table { padding: 0.05rem !important; /* Quase zero para ganhar máximo espaço */ margin: 0 !important; border: none !important; } .page--panorama-campeonatos .classification-table-container { padding: 0.1rem !important; /* Padding ainda menor */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th, .page--panorama-campeonatos .brasileirao-table td, .standings-table td { padding: 0.1rem 0.05rem !important; /* Padding m�nimo nas c�lulas */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th:first-child, .page--panorama-campeonatos .brasileirao-table td, .standings-table td:first-child { padding-left: 0.1rem !important; /* Padding m�nimo na primeira coluna */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th:last-child, .page--panorama-campeonatos .brasileirao-table td, .standings-table td:last-child { padding-right: 0.1rem !important; /* Padding m�nimo na �ltima coluna */ } .page--panorama-campeonatos .championship-section, .page--panorama-campeonatos .championship-selector, .page--panorama-campeonatos .championship-buttons, .page--panorama-campeonatos .info-box, .page--panorama-campeonatos .coming-soon, .page--panorama-campeonatos .zones-info { padding: 0.1rem !important; /* Padding ainda menor */ } .page--panorama-campeonatos .zone-item { padding: 0.05rem !important; /* Padding m�nimo */ } /* OTIMIZAR ESPA�AMENTO DE TODAS AS TABELAS DE CLASSIFICA��O - MOBILE */ /* Aplicar para S�rie C e todas as tabelas internacionais */ .page--panorama-campeonatos .serie-c-container, .page--panorama-campeonatos .serie-c-phase, .page--panorama-campeonatos .grupo-container, .page--panorama-campeonatos .grupo-row, .page--panorama-campeonatos .international-table-container, .page--panorama-campeonatos .premier-league-table, .page--panorama-campeonatos .la-liga-table, .page--panorama-campeonatos .ligue1-table, .page--panorama-campeonatos .serie-a-italiana-table, .page--panorama-campeonatos .bundesliga-table, .page--panorama-campeonatos .champions-league-table { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } /* Reduzir espa�amento das c�lulas de todas as tabelas */ .page--panorama-campeonatos .serie-c-container table th, .page--panorama-campeonatos .serie-c-container table td, .page--panorama-campeonatos .grupo-container table th, .page--panorama-campeonatos .grupo-container table td, .page--panorama-campeonatos .international-table-container table th, .page--panorama-campeonatos .international-table-container table td, .page--panorama-campeonatos .premier-league-table table th, .page--panorama-campeonatos .premier-league-table table td, .page--panorama-campeonatos .la-liga-table table th, .page--panorama-campeonatos .la-liga-table table td, .page--panorama-campeonatos .ligue1-table table th, .page--panorama-campeonatos .ligue1-table table td, .page--panorama-campeonatos .serie-a-italiana-table table th, .page--panorama-campeonatos .serie-a-italiana-table table td, .page--panorama-campeonatos .bundesliga-table table th, .page--panorama-campeonatos .bundesliga-table table td, .page--panorama-campeonatos .champions-league-table table th, .page--panorama-campeonatos .champions-league-table table td { padding: 0.2rem 0.1rem !important; /* Padding m�nimo nas c�lulas */ } /* Reduzir espa�amento da primeira e �ltima coluna */ .page--panorama-campeonatos .serie-c-container table th:first-child, .page--panorama-campeonatos .serie-c-container table td:first-child, .page--panorama-campeonatos .grupo-container table th:first-child, .page--panorama-campeonatos .grupo-container table td:first-child, .page--panorama-campeonatos .international-table-container table th:first-child, .page--panorama-campeonatos .international-table-container table td:first-child, .page--panorama-campeonatos .premier-league-table table th:first-child, .page--panorama-campeonatos .premier-league-table table td:first-child, .page--panorama-campeonatos .la-liga-table table th:first-child, .page--panorama-campeonatos .la-liga-table table td:first-child, .page--panorama-campeonatos .ligue1-table table th:first-child, .page--panorama-campeonatos .ligue1-table table td:first-child, .page--panorama-campeonatos .serie-a-italiana-table table th:first-child, .page--panorama-campeonatos .serie-a-italiana-table table td:first-child, .page--panorama-campeonatos .bundesliga-table table th:first-child, .page--panorama-campeonatos .bundesliga-table table td:first-child, .page--panorama-campeonatos .champions-league-table table th:first-child, .page--panorama-campeonatos .champions-league-table table td:first-child { padding-left: 0.2rem !important; /* Padding m�nimo na primeira coluna */ } .page--panorama-campeonatos .serie-c-container table th:last-child, .page--panorama-campeonatos .serie-c-container table td:last-child, .page--panorama-campeonatos .grupo-container table th:last-child, .page--panorama-campeonatos .grupo-container table td:last-child, .page--panorama-campeonatos .international-table-container table th:last-child, .page--panorama-campeonatos .international-table-container table td:last-child, .page--panorama-campeonatos .premier-league-table table th:last-child, .page--panorama-campeonatos .premier-league-table table td:last-child, .page--panorama-campeonatos .la-liga-table table th:last-child, .page--panorama-campeonatos .la-liga-table table td:last-child, .page--panorama-campeonatos .ligue1-table table th:last-child, .page--panorama-campeonatos .ligue1-table table td:last-child, .page--panorama-campeonatos .serie-a-italiana-table table th:last-child, .page--panorama-campeonatos .serie-a-italiana-table table td:last-child, .page--panorama-campeonatos .bundesliga-table table th:last-child, .page--panorama-campeonatos .bundesliga-table table td:last-child, .page--panorama-campeonatos .champions-league-table table th:last-child, .page--panorama-campeonatos .champions-league-table table td:last-child { padding-right: 0.2rem !important; /* Padding m�nimo na �ltima coluna */ } /* Reduzir espa�amento dos t�tulos das se��es */ .page--panorama-campeonatos .serie-c-phase h4, .page--panorama-campeonatos .grupo-container h4, .page--panorama-campeonatos .international-table-container h4, .page--panorama-campeonatos .premier-league-table h4, .page--panorama-campeonatos .la-liga-table h4, .page--panorama-campeonatos .ligue1-table h4, .page--panorama-campeonatos .serie-a-italiana-table h4, .page--panorama-campeonatos .bundesliga-table h4, .page--panorama-campeonatos .champions-league-table h4 { padding: 0.2rem !important; /* Padding m�nimo nos t�tulos */ margin: 0 !important; /* Remover margens */ } /* OTIMIZAR AINDA MAIS O ESPA�AMENTO PARA TELAS MUITO PEQUENAS */ .page--panorama-campeonatos .serie-c-container, .page--panorama-campeonatos .serie-c-phase, .page--panorama-campeonatos .grupo-container, .page--panorama-campeonatos .grupo-row, .page--panorama-campeonatos .international-table-container, .page--panorama-campeonatos .premier-league-table, .page--panorama-campeonatos .la-liga-table, .page--panorama-campeonatos .ligue1-table, .page--panorama-campeonatos .serie-a-italiana-table, .page--panorama-campeonatos .bundesliga-table, .page--panorama-campeonatos .champions-league-table { padding: 0.1rem !important; /* Padding ainda menor */ } /* Reduzir ainda mais o espa�amento das c�lulas */ .page--panorama-campeonatos .serie-c-container table th, .page--panorama-campeonatos .serie-c-container table td, .page--panorama-campeonatos .grupo-container table th, .page--panorama-campeonatos .grupo-container table td, .page--panorama-campeonatos .international-table-container table th, .page--panorama-campeonatos .international-table-container table td, .page--panorama-campeonatos .premier-league-table table th, .page--panorama-campeonatos .premier-league-table table td, .page--panorama-campeonatos .la-liga-table table th, .page--panorama-campeonatos .la-liga-table table td, .page--panorama-campeonatos .ligue1-table table th, .page--panorama-campeonatos .ligue1-table table td, .page--panorama-campeonatos .serie-a-italiana-table table th, .page--panorama-campeonatos .serie-a-italiana-table table td, .page--panorama-campeonatos .bundesliga-table table th, .page--panorama-campeonatos .bundesliga-table table td, .page--panorama-campeonatos .champions-league-table table th, .page--panorama-campeonatos .champions-league-table table td { padding: 0.1rem 0.05rem !important; /* Padding ultra-m�nimo nas c�lulas */ } /* Reduzir ainda mais o espa�amento da primeira e �ltima coluna */ .page--panorama-campeonatos .serie-c-container table th:first-child, .page--panorama-campeonatos .serie-c-container table td:first-child, .page--panorama-campeonatos .grupo-container table th:first-child, .page--panorama-campeonatos .grupo-container table td:first-child, .page--panorama-campeonatos .international-table-container table th:first-child, .page--panorama-campeonatos .international-table-container table td:first-child, .page--panorama-campeonatos .premier-league-table table th:first-child, .page--panorama-campeonatos .premier-league-table table td:first-child, .page--panorama-campeonatos .la-liga-table table th:first-child, .page--panorama-campeonatos .la-liga-table table td:first-child, .page--panorama-campeonatos .ligue1-table table th:first-child, .page--panorama-campeonatos .ligue1-table table td:first-child, .page--panorama-campeonatos .serie-a-italiana-table table th:first-child, .page--panorama-campeonatos .serie-a-italiana-table table td:first-child, .page--panorama-campeonatos .bundesliga-table table th:first-child, .page--panorama-campeonatos .bundesliga-table table td:first-child, .page--panorama-campeonatos .champions-league-table table th:first-child, .page--panorama-campeonatos .champions-league-table table td:first-child { padding-left: 0.1rem !important; /* Padding ultra-m�nimo na primeira coluna */ } .page--panorama-campeonatos .serie-c-container table th:last-child, .page--panorama-campeonatos .serie-c-container table td:last-child, .page--panorama-campeonatos .grupo-container table th:last-child, .page--panorama-campeonatos .grupo-container table td:last-child, .page--panorama-campeonatos .international-table-container table th:last-child, .page--panorama-campeonatos .international-table-container table td:last-child, .page--panorama-campeonatos .premier-league-table table th:last-child, .page--panorama-campeonatos .premier-league-table table td:last-child, .page--panorama-campeonatos .la-liga-table table th:last-child, .page--panorama-campeonatos .la-liga-table table td:last-child, .page--panorama-campeonatos .ligue1-table table th:last-child, .page--panorama-campeonatos .ligue1-table table td:last-child, .page--panorama-campeonatos .serie-a-italiana-table table th:last-child, .page--panorama-campeonatos .serie-a-italiana-table table td:last-child, .page--panorama-campeonatos .bundesliga-table table th:last-child, .page--panorama-campeonatos .bundesliga-table table td:last-child, .page--panorama-campeonatos .champions-league-table table th:last-child, .page--panorama-campeonatos .champions-league-table table td:last-child { padding-right: 0.1rem !important; /* Padding ultra-m�nimo na �ltima coluna */ } /* Reduzir ainda mais o espa�amento dos t�tulos das se��es */ .page--panorama-campeonatos .serie-c-phase h4, .page--panorama-campeonatos .grupo-container h4, .page--panorama-campeonatos .international-table-container h4, .page--panorama-campeonatos .premier-league-table h4, .page--panorama-campeonatos .la-liga-table h4, .page--panorama-campeonatos .ligue1-table h4, .page--panorama-campeonatos .serie-a-italiana-table h4, .page--panorama-campeonatos .bundesliga-table h4, .page--panorama-campeonatos .champions-league-table h4 { padding: 0.1rem !important; /* Padding ultra-m�nimo nos t�tulos */ } /* OTIMIZAR ESPA�AMENTO DAS TABELAS INTERNACIONAIS - MOBILE */ /* Premier League, La Liga, Fran�a, Champions League */ .page--panorama-campeonatos #tabela-premier-league, .page--panorama-campeonatos #tabela-la-liga, .page--panorama-campeonatos #tabela-ligue1, .page--panorama-campeonatos #tabela-champions-league, .page--panorama-campeonatos .premier-league-container, .page--panorama-campeonatos .la-liga-container, .page--panorama-campeonatos .ligue1-container, .page--panorama-campeonatos .champions-league-container, .page--panorama-campeonatos .international-championship-section { padding: 0.2rem !important; /* Padding m�nimo */ margin: 0 !important; /* Remover margens */ } /* Reduzir espa�amento das c�lulas das tabelas internacionais */ .page--panorama-campeonatos #tabela-premier-league table th, .page--panorama-campeonatos #tabela-premier-league table td, .page--panorama-campeonatos #tabela-la-liga table th, .page--panorama-campeonatos #tabela-la-liga table td, .page--panorama-campeonatos #tabela-ligue1 table th, .page--panorama-campeonatos #tabela-ligue1 table td, .page--panorama-campeonatos #tabela-champions-league table th, .page--panorama-campeonatos #tabela-champions-league table td, .page--panorama-campeonatos .premier-league-container table th, .page--panorama-campeonatos .premier-league-container table td, .page--panorama-campeonatos .la-liga-container table th, .page--panorama-campeonatos .la-liga-container table td, .page--panorama-campeonatos .ligue1-container table th, .page--panorama-campeonatos .ligue1-container table td, .page--panorama-campeonatos .champions-league-container table th, .page--panorama-campeonatos .champions-league-container table td { padding: 0.2rem 0.1rem !important; /* Padding m�nimo nas c�lulas */ } /* Reduzir espa�amento da primeira e �ltima coluna das tabelas internacionais */ .page--panorama-campeonatos #tabela-premier-league table th:first-child, .page--panorama-campeonatos #tabela-premier-league table td:first-child, .page--panorama-campeonatos #tabela-la-liga table th:first-child, .page--panorama-campeonatos #tabela-la-liga table td:first-child, .page--panorama-campeonatos #tabela-ligue1 table th:first-child, .page--panorama-campeonatos #tabela-ligue1 table td:first-child, .page--panorama-campeonatos #tabela-champions-league table th:first-child, .page--panorama-campeonatos #tabela-champions-league table td:first-child, .page--panorama-campeonatos .premier-league-container table th:first-child, .page--panorama-campeonatos .premier-league-container table td:first-child, .page--panorama-campeonatos .la-liga-container table th:first-child, .page--panorama-campeonatos .la-liga-container table td:first-child, .page--panorama-campeonatos .ligue1-container table th:first-child, .page--panorama-campeonatos .ligue1-container table td:first-child, .page--panorama-campeonatos .champions-league-container table th:first-child, .page--panorama-campeonatos .champions-league-container table td:first-child { padding-left: 0.2rem !important; /* Padding m�nimo na primeira coluna */ } .page--panorama-campeonatos #tabela-premier-league table th:last-child, .page--panorama-campeonatos #tabela-premier-league table td:last-child, .page--panorama-campeonatos #tabela-la-liga table th:last-child, .page--panorama-campeonatos #tabela-la-liga table td:last-child, .page--panorama-campeonatos #tabela-ligue1 table th:last-child, .page--panorama-campeonatos #tabela-ligue1 table td:last-child, .page--panorama-campeonatos #tabela-champions-league table th:last-child, .page--panorama-campeonatos #tabela-champions-league table td:last-child, .page--panorama-campeonatos .premier-league-container table th:last-child, .page--panorama-campeonatos .premier-league-container table td:last-child, .page--panorama-campeonatos .la-liga-container table th:last-child, .page--panorama-campeonatos .la-liga-container table td:last-child, .page--panorama-campeonatos .ligue1-container table th:last-child, .page--panorama-campeonatos .ligue1-container table td:last-child, .page--panorama-campeonatos .champions-league-container table th:last-child, .page--panorama-campeonatos .champions-league-container table td:last-child { padding-right: 0.2rem !important; /* Padding m�nimo na �ltima coluna */ } /* Reduzir espa�amento dos t�tulos das se��es internacionais */ .page--panorama-campeonatos #tabela-premier-league h3, .page--panorama-campeonatos #tabela-premier-league h4, .page--panorama-campeonatos #tabela-la-liga h3, .page--panorama-campeonatos #tabela-la-liga h4, .page--panorama-campeonatos #tabela-ligue1 h3, .page--panorama-campeonatos #tabela-ligue1 h4, .page--panorama-campeonatos #tabela-champions-league h3, .page--panorama-campeonatos #tabela-champions-league h4, .page--panorama-campeonatos .premier-league-container h3, .page--panorama-campeonatos .premier-league-container h4, .page--panorama-campeonatos .la-liga-container h3, .page--panorama-campeonatos .la-liga-container h4, .page--panorama-campeonatos .ligue1-container h3, .page--panorama-campeonatos .ligue1-container h4, .page--panorama-campeonatos .champions-league-container h3, .page--panorama-campeonatos .champions-league-container h4 { padding: 0.2rem !important; /* Padding m�nimo nos t�tulos */ margin: 0 !important; /* Remover margens */ } /* OTIMIZAR AINDA MAIS O ESPA�AMENTO DAS TABELAS INTERNACIONAIS PARA TELAS MUITO PEQUENAS */ .page--panorama-campeonatos #tabela-premier-league, .page--panorama-campeonatos #tabela-la-liga, .page--panorama-campeonatos #tabela-ligue1, .page--panorama-campeonatos #tabela-champions-league, .page--panorama-campeonatos .premier-league-container, .page--panorama-campeonatos .la-liga-container, .page--panorama-campeonatos .ligue1-container, .page--panorama-campeonatos .champions-league-container, .page--panorama-campeonatos .international-championship-section { padding: 0.1rem !important; /* Padding ultra-m�nimo */ } /* Reduzir ainda mais o espa�amento das c�lulas das tabelas internacionais */ .page--panorama-campeonatos #tabela-premier-league table th, .page--panorama-campeonatos #tabela-premier-league table td, .page--panorama-campeonatos #tabela-la-liga table th, .page--panorama-campeonatos #tabela-la-liga table td, .page--panorama-campeonatos #tabela-ligue1 table th, .page--panorama-campeonatos #tabela-ligue1 table td, .page--panorama-campeonatos #tabela-champions-league table th, .page--panorama-campeonatos #tabela-champions-league table td, .page--panorama-campeonatos .premier-league-container table th, .page--panorama-campeonatos .premier-league-container table td, .page--panorama-campeonatos .la-liga-container table th, .page--panorama-campeonatos .la-liga-container table td, .page--panorama-campeonatos .ligue1-container table th, .page--panorama-campeonatos .ligue1-container table td, .page--panorama-campeonatos .champions-league-container table th, .page--panorama-campeonatos .champions-league-container table td { padding: 0.1rem 0.05rem !important; /* Padding ultra-m�nimo nas c�lulas */ } /* Reduzir ainda mais o espa�amento da primeira e �ltima coluna das tabelas internacionais */ .page--panorama-campeonatos #tabela-premier-league table th:first-child, .page--panorama-campeonatos #tabela-premier-league table td:first-child, .page--panorama-campeonatos #tabela-la-liga table th:first-child, .page--panorama-campeonatos #tabela-la-liga table td:first-child, .page--panorama-campeonatos #tabela-ligue1 table th:first-child, .page--panorama-campeonatos #tabela-ligue1 table td:first-child, .page--panorama-campeonatos #tabela-champions-league table th:first-child, .page--panorama-campeonatos #tabela-champions-league table td:first-child, .page--panorama-campeonatos .premier-league-container table th:first-child, .page--panorama-campeonatos .premier-league-container table td:first-child, .page--panorama-campeonatos .la-liga-container table th:first-child, .page--panorama-campeonatos .la-liga-container table td:first-child, .page--panorama-campeonatos .ligue1-container table th:first-child, .page--panorama-campeonatos .ligue1-container table td:first-child, .page--panorama-campeonatos .champions-league-container table th:first-child, .page--panorama-campeonatos .champions-league-container table td:first-child { padding-left: 0.1rem !important; /* Padding ultra-m�nimo na primeira coluna */ } .page--panorama-campeonatos #tabela-premier-league table th:last-child, .page--panorama-campeonatos #tabela-premier-league table td:last-child, .page--panorama-campeonatos #tabela-la-liga table th:last-child, .page--panorama-campeonatos #tabela-la-liga table td:last-child, .page--panorama-campeonatos #tabela-ligue1 table th:last-child, .page--panorama-campeonatos #tabela-ligue1 table td:last-child, .page--panorama-campeonatos #tabela-champions-league table th:last-child, .page--panorama-campeonatos #tabela-champions-league table td:last-child, .page--panorama-campeonatos .premier-league-container table th:last-child, .page--panorama-campeonatos .premier-league-container table td:last-child, .page--panorama-campeonatos .la-liga-container table th:last-child, .page--panorama-campeonatos .la-liga-container table td:last-child, .page--panorama-campeonatos .ligue1-container table th:last-child, .page--panorama-campeonatos .ligue1-container table td:last-child, .page--panorama-campeonatos .champions-league-container table th:last-child, .page--panorama-campeonatos .champions-league-container table td:last-child { padding-right: 0.1rem !important; /* Padding ultra-m�nimo na �ltima coluna */ } /* Reduzir ainda mais o espa�amento dos t�tulos das se��es internacionais */ .page--panorama-campeonatos #tabela-premier-league h3, .page--panorama-campeonatos #tabela-premier-league h4, .page--panorama-campeonatos #tabela-la-liga h3, .page--panorama-campeonatos #tabela-la-liga h4, .page--panorama-campeonatos #tabela-ligue1 h3, .page--panorama-campeonatos #tabela-ligue1 h4, .page--panorama-campeonatos #tabela-champions-league h3, .page--panorama-campeonatos #tabela-champions-league h4, .page--panorama-campeonatos .premier-league-container h3, .page--panorama-campeonatos .premier-league-container h4, .page--panorama-campeonatos .la-liga-container h3, .page--panorama-campeonatos .la-liga-container h4, .page--panorama-campeonatos .ligue1-container h3, .page--panorama-campeonatos .ligue1-container h4, .page--panorama-campeonatos .champions-league-container h3, .page--panorama-campeonatos .champions-league-container h4 { padding: 0.1rem !important; /* Padding ultra-m�nimo nos t�tulos */ } } /* AUMENTAR 20% FONTES E ESCUDOS DOS BOXES - APENAS DESKTOP */ @media (min-width: 769px) { /* SELETORES MAIS ESPEC�FICOS PARA SOBRESCREVER REGRAS MOBILE */ .analysis-table .confrontos-sequence .confronto-data { font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA - DESKTOP */ } .analysis-table .confrontos-sequence .confronto-placar { font-size: 0.6rem !important; /* ✅ TAMANHO CONFORTÁVEL PARA LEITURA - DESKTOP */ } .analysis-table .confrontos-sequence .confronto-escudo, .analysis-table .confrontos-sequence .confronto-result { width: 28.8px !important; /* 24px * 1.2 - Aumento de 20% */ height: 28.8px !important; /* 24px * 1.2 - Aumento de 20% */ } } /* ============================================ RESTAURAR TAMANHOS ORIGINAIS DAS TABELAS NO DESKTOP ============================================ */ @media (min-width: 769px) { /* TABELAS GERAIS - DESKTOP */ .page--panorama-campeonatos table th, .page--panorama-campeonatos table td { font-size: 14px !important; /* Tamanho original para desktop */ color: var(--cor-texto-principal) !important; } /* TABELAS NACIONAIS - DESKTOP */ .page--panorama-campeonatos .brasileirao-table th, .standings-table th, .page--panorama-campeonatos .brasileirao-table td, .standings-table td { font-size: 14px !important; /* Tamanho original para desktop */ color: var(--cor-texto-principal) !important; padding: 0.5rem 0.3rem !important; /* Padding original para desktop */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th:first-child, .page--panorama-campeonatos .brasileirao-table td, .standings-table td:first-child { padding-left: 0.5rem !important; /* Padding original para desktop */ } .page--panorama-campeonatos .brasileirao-table th, .standings-table th:last-child, .page--panorama-campeonatos .brasileirao-table td, .standings-table td:last-child { padding-right: 0.5rem !important; /* Padding original para desktop */ } /* TABELAS INTERNACIONAIS - DESKTOP */ .page--panorama-campeonatos .premier-league-table th, .page--panorama-campeonatos .premier-league-table td, .page--panorama-campeonatos .la-liga-table th, .page--panorama-campeonatos .la-liga-table td, .page--panorama-campeonatos .ligue1-table th, .page--panorama-campeonatos .ligue1-table td, .page--panorama-campeonatos .champions-league-table th, .page--panorama-campeonatos .champions-league-table td { font-size: 14px !important; /* Tamanho original para desktop */ color: var(--cor-texto-principal) !important; padding: 0.5rem 0.3rem !important; /* Padding original para desktop */ } /* APLICAR MESMA OTIMIZA��O DE ESPA�O LATERAL PARA TODAS AS TABELAS RESPONSIVAS */ @media (max-width: 768px) { /* S�RIE C - OTIMIZA��O DE ESPA�O LATERAL */ .page--panorama-campeonatos .serie-c-container, .page--panorama-campeonatos .serie-c-phase, .page--panorama-campeonatos .grupo-container, .page--panorama-campeonatos .grupo-row { padding: 0.2rem !important; /* Gap m�nimo nas laterais */ margin: 0 !important; } .page--panorama-campeonatos .serie-c-table th, .page--panorama-campeonatos .serie-c-table td, .page--panorama-campeonatos .grupo-table th, .page--panorama-campeonatos .grupo-table td { padding: 0.2rem 0.1rem !important; /* Padding m�nimo */ font-size: 10px !important; /* Fonte pequena mas leg�vel */ } .page--panorama-campeonatos .serie-c-table th:first-child, .page--panorama-campeonatos .serie-c-table td:first-child, .page--panorama-campeonatos .grupo-table th:first-child, .page--panorama-campeonatos .grupo-table td:first-child { padding-left: 0.2rem !important; /* Gap m�nimo esquerda */ } .page--panorama-campeonatos .serie-c-table th:last-child, .page--panorama-campeonatos .serie-c-table td:last-child, .page--panorama-campeonatos .grupo-table th:last-child, .page--panorama-campeonatos .grupo-table td:last-child { padding-right: 0.2rem !important; /* Gap m�nimo direita */ } /* PREMIER LEAGUE - OTIMIZA��O DE ESPA�O LATERAL */ .page--panorama-campeonatos #tabela-premier-league, .page--panorama-campeonatos #tabela-la-liga, .page--panorama-campeonatos #tabela-ligue1, .page--panorama-campeonatos #tabela-champions-league { padding: 0.2rem !important; /* Gap m�nimo nas laterais */ margin: 0 !important; } .page--panorama-campeonatos #tabela-premier-league table th, .page--panorama-campeonatos #tabela-premier-league table td, .page--panorama-campeonatos #tabela-la-liga table th, .page--panorama-campeonatos #tabela-la-liga table td, .page--panorama-campeonatos #tabela-ligue1 table th, .page--panorama-campeonatos #tabela-ligue1 table td, .page--panorama-campeonatos #tabela-champions-league table th, .page--panorama-campeonatos #tabela-champions-league table td { padding: 0.2rem 0.1rem !important; /* Padding m�nimo */ font-size: 10px !important; /* Fonte pequena mas leg�vel */ } .page--panorama-campeonatos #tabela-premier-league table th:first-child, .page--panorama-campeonatos #tabela-premier-league table td:first-child, .page--panorama-campeonatos #tabela-la-liga table th:first-child, .page--panorama-campeonatos #tabela-la-liga table td:first-child, .page--panorama-campeonatos #tabela-ligue1 table th:first-child, .page--panorama-campeonatos #tabela-ligue1 table td:first-child, .page--panorama-campeonatos #tabela-champions-league table th:first-child, .page--panorama-campeonatos #tabela-champions-league table td:first-child { padding-left: 0.2rem !important; /* Gap m�nimo esquerda */ } .page--panorama-campeonatos #tabela-premier-league table th:last-child, .page--panorama-campeonatos #tabela-premier-league table td:last-child, .page--panorama-campeonatos #tabela-la-liga table th:last-child, .page--panorama-campeonatos #tabela-la-liga table td:last-child, .page--panorama-campeonatos #tabela-ligue1 table th:last-child, .page--panorama-campeonatos #tabela-ligue1 table td:last-child, .page--panorama-campeonatos #tabela-champions-league table th:last-child, .page--panorama-campeonatos #tabela-champions-league table td:last-child { padding-right: 0.2rem !important; /* Gap m�nimo direita */ } } /* OTIMIZA��O ADICIONAL PARA TELAS AINDA MENORES (480px) */ @media (max-width: 480px) { /* S�RIE C - OTIMIZA��O EXTREMA */ .page--panorama-campeonatos .serie-c-container, .page--panorama-campeonatos .serie-c-phase, .page--panorama-campeonatos .grupo-container, .page--panorama-campeonatos .grupo-row { padding: 0.1rem !important; /* Gap ainda menor */ } .page--panorama-campeonatos .serie-c-table th, .page--panorama-campeonatos .serie-c-table td, .page--panorama-campeonatos .grupo-table th, .page--panorama-campeonatos .grupo-table td { padding: 0.1rem 0.05rem !important; /* Padding extremo */ font-size: 9px !important; /* Fonte ainda menor */ } .page--panorama-campeonatos .serie-c-table th:first-child, .page--panorama-campeonatos .serie-c-table td:first-child, .page--panorama-campeonatos .grupo-table th:first-child, .page--panorama-campeonatos .grupo-table td:first-child { padding-left: 0.1rem !important; /* Gap m�nimo esquerda */ } .page--panorama-campeonatos .serie-c-table th:last-child, .page--panorama-campeonatos .serie-c-table td:last-child, .page--panorama-campeonatos .grupo-table th:last-child, .page--panorama-campeonatos .grupo-table td:last-child { padding-right: 0.1rem !important; /* Gap m�nimo direita */ } /* TABELAS INTERNACIONAIS - OTIMIZA��O EXTREMA */ .page--panorama-campeonatos #tabela-premier-league, .page--panorama-campeonatos #tabela-la-liga, .page--panorama-campeonatos #tabela-ligue1, .page--panorama-campeonatos #tabela-champions-league { padding: 0.1rem !important; /* Gap ainda menor */ } .page--panorama-campeonatos #tabela-premier-league table th, .page--panorama-campeonatos #tabela-premier-league table td, .page--panorama-campeonatos #tabela-la-liga table th, .page--panorama-campeonatos #tabela-la-liga table td, .page--panorama-campeonatos #tabela-ligue1 table th, .page--panorama-campeonatos #tabela-ligue1 table td, .page--panorama-campeonatos #tabela-champions-league table th, .page--panorama-campeonatos #tabela-champions-league table td { padding: 0.1rem 0.05rem !important; /* Padding extremo */ font-size: 9px !important; /* Fonte ainda menor */ } .page--panorama-campeonatos #tabela-premier-league table th:first-child, .page--panorama-campeonatos #tabela-premier-league table td:first-child, .page--panorama-campeonatos #tabela-la-liga table th:first-child, .page--panorama-campeonatos #tabela-la-liga table td:first-child, .page--panorama-campeonatos #tabela-ligue1 table th:first-child, .page--panorama-campeonatos #tabela-ligue1 table td:first-child, .page--panorama-campeonatos #tabela-champions-league table th:first-child, .page--panorama-campeonatos #tabela-champions-league table td:first-child { padding-left: 0.1rem !important; /* Gap m�nimo esquerda */ } .page--panorama-campeonatos #tabela-premier-league table th:last-child, .page--panorama-campeonatos #tabela-premier-league table td:last-child, .page--panorama-campeonatos #tabela-la-liga table th:last-child, .page--panorama-campeonatos #tabela-la-liga table td:last-child, .page--panorama-campeonatos #tabela-ligue1 table th:last-child, .page--panorama-campeonatos #tabela-ligue1 table td:last-child, .page--panorama-campeonatos #tabela-champions-league table th:last-child, .page--panorama-campeonatos #tabela-champions-league table td:last-child { padding-right: 0.1rem !important; /* Gap m�nimo direita */ } } .page--panorama-campeonatos .premier-league-table th:first-child, .page--panorama-campeonatos .premier-league-table td:first-child, .page--panorama-campeonatos .la-liga-table th:first-child, .page--panorama-campeonatos .la-liga-table td:first-child, .page--panorama-campeonatos .ligue1-table th:first-child, .page--panorama-campeonatos .ligue1-table td:first-child, .page--panorama-campeonatos .champions-league-table th:first-child, .page--panorama-campeonatos .champions-league-table td:first-child { padding-left: 0.5rem !important; /* Padding original para desktop */ } .page--panorama-campeonatos .premier-league-table th:last-child, .page--panorama-campeonatos .premier-league-table td:last-child, .page--panorama-campeonatos .la-liga-table th:last-child, .page--panorama-campeonatos .la-liga-table td:last-child, .page--panorama-campeonatos .ligue1-table th:last-child, .page--panorama-campeonatos .ligue1-table td:last-child, .page--panorama-campeonatos .champions-league-table th:last-child, .page--panorama-campeonatos .champions-league-table td:last-child { padding-right: 0.5rem !important; /* Padding original para desktop */ } /* RESTAURAR TAMANHO DOS NOMES DOS TIMES NO DESKTOP */ .page--panorama-campeonatos .brasileirao-table td, .standings-table td:first-child, .page--panorama-campeonatos .brasileirao-table th, .standings-table th:first-child { font-size: 14px !important; /* Tamanho original para nomes dos times */ font-weight: 600 !important; /* Negrito para nomes dos times */ } .page--panorama-campeonatos .premier-league-table td:first-child, .page--panorama-campeonatos .premier-league-table th:first-child, .page--panorama-campeonatos .la-liga-table td:first-child, .page--panorama-campeonatos .la-liga-table th:first-child, .page--panorama-campeonatos .ligue1-table td:first-child, .page--panorama-campeonatos .ligue1-table th:first-child, .page--panorama-campeonatos .champions-league-table td:first-child, .page--panorama-campeonatos .champions-league-table th:first-child { font-size: 14px !important; /* Tamanho original para nomes dos times */ font-weight: 600 !important; /* Negrito para nomes dos times */ } /* RESTAURAR TAMANHO DOS ESCUDOS DOS TIMES NO DESKTOP */ .page--panorama-campeonatos .brasileirao-table img, .page--panorama-campeonatos .brasileirao-table .escudo-time, .page--panorama-campeonatos .premier-league-table img, .page--panorama-campeonatos .premier-league-table .escudo-time, .page--panorama-campeonatos .la-liga-table img, .page--panorama-campeonatos .la-liga-table .escudo-time, .page--panorama-campeonatos .ligue1-table img, .page--panorama-campeonatos .ligue1-table .escudo-time, .page--panorama-campeonatos .champions-league-table img, .page--panorama-campeonatos .champions-league-table .escudo-time { width: 24px !important; /* Tamanho original dos escudos */ height: 24px !important; /* Tamanho original dos escudos */ object-fit: contain !important; /* Manter propor��o */ border-radius: 4px !important; /* Bordas levemente arredondadas */ } } /* ======================================== RESPONSIVIDADE: FORÇA DOS ELENCOS - PLANTEL ($) ======================================== */ /* MOBILE PORTRAIT - max-width: 768px */ @media (max-width: 768px) { /* Container dos jogos */ .jogos-container { gap: 1rem; /* Reduzir de 2rem para 1rem */ } /* Container de cada jogo */ .jogo-confronto { padding: 0.75rem !important; /* Reduzir de 1.5rem (24px) para 0.75rem (12px) */ border-radius: 8px; } /* Header do jogo */ .jogo-header { margin-bottom: 0.75rem !important; /* Reduzir de 1.5rem para 0.75rem */ padding-bottom: 0.5rem !important; /* Reduzir de 1rem para 0.5rem */ flex-direction: column; /* Empilhar verticalmente */ gap: 0.25rem; } .jogo-numero { font-size: 11px !important; /* Reduzir de 1.2rem (19.2px) para 11px */ padding: 0.3rem 0.6rem !important; /* Reduzir padding */ font-weight: 700 !important; } .jogo-descricao { font-size: 9px !important; /* Reduzir de 0.9rem (14.4px) para 9px */ margin-left: 0 !important; /* Remover margin quando empilhado */ } /* Grid dos times (Casa | VS | Fora) */ .times-confronto { gap: 0.5rem !important; /* Reduzir de 2rem (32px) para 0.5rem (8px) */ } /* Container de cada time */ .time-container { padding: 0.75rem !important; /* Reduzir de 1.5rem (24px) para 0.75rem (12px) */ border-radius: 8px; } .time-container:hover { transform: scale(1.01); /* Reduzir efeito hover */ } /* Header do time (Nome e Abreviação) */ .time-header { margin-bottom: 0.5rem !important; /* Reduzir de 1rem para 0.5rem */ flex-direction: column; /* Empilhar verticalmente */ gap: 0.25rem; } .time-nome { font-size: 11px !important; /* Reduzir de 1.1rem (17.6px) para 11px */ font-weight: 700 !important; text-align: center; } .time-abrev { font-size: 9px !important; /* Reduzir de 0.9rem (14.4px) para 9px */ padding: 0.15rem 0.4rem !important; /* Reduzir padding */ } /* Grid de estatísticas (3 colunas mantidas) */ .time-stats { grid-template-columns: repeat(3, 1fr); /* Manter 3 colunas */ gap: 0.5rem !important; /* Reduzir de 1rem (16px) para 0.5rem (8px) */ margin: 0.5rem 0 !important; /* Reduzir de 1rem para 0.5rem */ } /* Grupos de estatísticas */ .stat-group { text-align: center; } .stat-label { font-size: 8px !important; /* Reduzir de 10px para 8px */ margin-bottom: 0.2rem !important; line-height: 1.2 !important; } .stat-value { font-size: 9px !important; /* Manter 9px (consistente com outros) */ font-weight: 700 !important; line-height: 1.3 !important; } .stat-subvalue { font-size: 8px !important; /* Reduzir de 10px para 8px */ line-height: 1.2 !important; } /* Barra de força */ .forca-bar { height: 4px !important; /* Reduzir de 6px para 4px */ margin-top: 0.2rem !important; } /* Badge do time */ .time-badge { margin-top: 0.5rem !important; /* Reduzir de 1rem para 0.5rem */ padding: 0.3rem 0.6rem !important; /* Reduzir padding */ font-size: 8px !important; /* Reduzir de 0.8rem (12.8px) para 8px */ font-weight: 600 !important; } /* VS Divider */ .vs-divider-confronto { font-size: 10px !important; /* Reduzir tamanho */ padding: 0.25rem 0.5rem !important; /* Reduzir padding */ font-weight: 700 !important; } /* Mensagens de erro (se houver) */ .erro-mensagem { padding: 0.5rem !important; /* Reduzir de 1rem para 0.5rem */ } .erro-icon { font-size: 20px !important; /* Reduzir ícone */ } .erro-texto strong { font-size: 10px !important; } .erro-texto p { font-size: 9px !important; } .erro-texto small { font-size: 8px !important; } } /* MOBILE LANDSCAPE - orientation: landscape AND max-height: 500px */ @media (orientation: landscape) and (max-height: 500px) { /* Container dos jogos */ .jogos-container { gap: 0.75rem; /* Ainda mais compacto em landscape */ } /* Container de cada jogo */ .jogo-confronto { padding: 0.5rem !important; /* Ainda mais compacto */ } /* Header do jogo */ .jogo-header { margin-bottom: 0.5rem !important; padding-bottom: 0.4rem !important; } .jogo-numero { font-size: 10px !important; padding: 0.25rem 0.5rem !important; } .jogo-descricao { font-size: 8px !important; } /* Grid dos times */ .times-confronto { gap: 0.4rem !important; } /* Container de cada time */ .time-container { padding: 0.5rem !important; } /* Header do time */ .time-header { margin-bottom: 0.4rem !important; gap: 0.2rem; } .time-nome { font-size: 10px !important; } .time-abrev { font-size: 8px !important; padding: 0.1rem 0.3rem !important; } /* Grid de estatísticas */ .time-stats { gap: 0.4rem !important; margin: 0.4rem 0 !important; } .stat-label { font-size: 7px !important; } .stat-value { font-size: 8px !important; } .stat-subvalue { font-size: 7px !important; } /* Barra de força */ .forca-bar { height: 3px !important; } /* Badge do time */ .time-badge { margin-top: 0.4rem !important; padding: 0.25rem 0.5rem !important; font-size: 7px !important; } /* VS Divider */ .vs-divider-confronto { font-size: 9px !important; padding: 0.2rem 0.4rem !important; } } /* TABLET LANDSCAPE - orientation: landscape AND min-height: 501px AND max-height: 800px */ @media (orientation: landscape) and (min-height: 501px) and (max-height: 800px) { /* Container dos jogos */ .jogos-container { gap: 1.25rem; } /* Container de cada jogo */ .jogo-confronto { padding: 1rem !important; } /* Header do jogo */ .jogo-header { margin-bottom: 1rem !important; padding-bottom: 0.75rem !important; } .jogo-numero { font-size: 12px !important; padding: 0.4rem 0.8rem !important; } .jogo-descricao { font-size: 10px !important; } /* Grid dos times */ .times-confronto { gap: 0.75rem !important; } /* Container de cada time */ .time-container { padding: 1rem !important; } /* Header do time */ .time-header { margin-bottom: 0.75rem !important; } .time-nome { font-size: 12px !important; } .time-abrev { font-size: 10px !important; } /* Grid de estatísticas */ .time-stats { gap: 0.75rem !important; margin: 0.75rem 0 !important; } .stat-label { font-size: 9px !important; } .stat-value { font-size: 10px !important; } .stat-subvalue { font-size: 9px !important; } /* Barra de força */ .forca-bar { height: 5px !important; } /* Badge do time */ .time-badge { margin-top: 0.75rem !important; padding: 0.35rem 0.7rem !important; font-size: 9px !important; } /* VS Divider */ .vs-divider-confronto { font-size: 11px !important; padding: 0.3rem 0.6rem !important; } } /* ============================================ 🎯 ABA ANÁLISE RÁPIDA - MOBILE RESPONSIVO AJUSTES PARA TABLETS E CELULARES NÃO AFETA DESKTOP (min-width: 769px) ============================================ */ /* TABLETS (481px - 768px) */ @media (max-width: 768px) and (min-width: 481px) { /* REDUZIR ESPACOS LATERAIS DO CONTAINER PRINCIPAL */ .page--analise-rapida .container { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .page--analise-rapida .game-card { margin-bottom: 1.5rem; padding: 1rem 0.35rem !important; /* Reduzido de 0.75rem para 0.35rem */ } .page--analise-rapida .game-card-header { padding: 1rem 0.5rem !important; } .page--analise-rapida .game-card-body { padding: 1rem 0.5rem !important; } .page--analise-rapida .game-card-header h2 { font-size: 1.1rem !important; } .page--analise-rapida .escudo-time { width: 28px !important; height: 28px !important; display: inline-block !important; } .page--analise-rapida .time-info span { font-size: 12px !important; } .page--analise-rapida .analysis-table th { font-size: 11px !important; padding: 0.6rem 0.4rem !important; } .page--analise-rapida .analysis-table td { font-size: 11px !important; padding: 0.6rem 0.4rem !important; } /* Escudos nos 10 boxes */ .page--analise-rapida .confrontos-sequence .confronto-escudo { width: 14px !important; height: 14px !important; display: inline-block !important; } .page--analise-rapida .confrontos-sequence .confronto-data { font-size: 8px !important; } .page--analise-rapida .confrontos-sequence .confronto-placar { font-size: 9px !important; } } /* CELULARES (até 480px) */ @media (max-width: 480px) { /* REDUZIR ESPACOS LATERAIS DO CONTAINER PRINCIPAL - QUASE ZERO */ .page--analise-rapida .container { padding-left: 0.15rem !important; /* ~2.4px */ padding-right: 0.15rem !important; /* ~2.4px */ } .page--analise-rapida .game-card { margin-bottom: 1rem; padding: 0.75rem 0.2rem !important; /* Reduzido de 0.5rem para 0.2rem (~3.2px) */ } .page--analise-rapida .game-card-header { padding: 0.75rem 0.3rem !important; /* ~4.8px lateral */ } .page--analise-rapida .game-card-body { padding: 0.75rem 0.3rem !important; /* ~4.8px lateral */ } /* TABELA DE ANALISE - REMOVER ESPACOS LATERAIS */ .page--analise-rapida .analysis-table { margin-left: 0 !important; margin-right: 0 !important; } .page--analise-rapida .game-card-header h2 { font-size: 0.95rem !important; } .page--analise-rapida .escudo-time { width: 24px !important; height: 24px !important; display: inline-block !important; } .page--analise-rapida .time-info span { font-size: 11px !important; } .page--analise-rapida .analysis-table th { font-size: 9px !important; padding: 0.5rem 0.15rem !important; /* Reduzido de 0.3rem para 0.15rem */ } .page--analise-rapida .analysis-table td { font-size: 9px !important; padding: 0.5rem 0.15rem !important; /* Reduzido de 0.3rem para 0.15rem */ } /* COLUNA 1 - COLAR NA BORDA ESQUERDA */ .page--analise-rapida .analysis-table td:first-child, .page--analise-rapida .analysis-table th:first-child { padding-left: 0.1rem !important; /* ~1.6px */ } /* COLUNA 4 - COLAR NA BORDA DIREITA */ .page--analise-rapida .analysis-table td:last-child, .page--analise-rapida .analysis-table th:last-child { padding-right: 0.1rem !important; /* ~1.6px */ } /* CONFRONTO DIRETO - AUMENTAR TEXTOS PARA 11px */ .page--analise-rapida .analysis-table .confronto-direto-resumo, .page--analise-rapida .analysis-table .confronto-direto-resumo * { font-size: 11px !important; } /* FORCAR 9px EM TODAS CELULAS DA COLUNA 4 ANALISE + QUEBRA DE LINHA */ /* SÓ APLICAR EM MOBILE - DESKTOP USA 17px DAS REGRAS GERAIS */ .page--analise-rapida .analysis-table td[id^="posicao-analise-"], .page--analise-rapida .analysis-table td[id^="h2h-analise-"], .page--analise-rapida .analysis-table td[id^="fator-analise-"], .page--analise-rapida .analysis-table td[id^="forma-analise-"] { font-size: 9px !important; line-height: 1.3 !important; white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Escudos nos 10 boxes */ .page--analise-rapida .confrontos-sequence .confronto-escudo { width: 12px !important; height: 12px !important; display: inline-block !important; } .page--analise-rapida .confrontos-sequence .confronto-data { font-size: 7px !important; } .page--analise-rapida .confrontos-sequence .confronto-placar { font-size: 8px !important; font-weight: 600 !important; } .page--analise-rapida .confrontos-sequence .confronto-item { min-width: 38px !important; max-width: 42px !important; padding: 3px !important; } } /* ======================================== 🖥️ DESKTOP - FORÇAR 17px NOS JOGOS 9-14 ESPECIFICIDADE MÁXIMA COM html body ======================================== */ @media (min-width: 769px) { /* COLUNAS 2 E 3 - POSIÇÃO E FATOR - JOGOS 9-14 - ESPECIFICIDADE MÁXIMA */ html body #posicao-casa-9-novo, html body #posicao-fora-9-novo, html body #fator-casa-9-novo, html body #fator-fora-9-novo, html body #posicao-casa-10-novo, html body #posicao-fora-10-novo, html body #fator-casa-10-novo, html body #fator-fora-10-novo, html body #posicao-casa-11-novo, html body #posicao-fora-11-novo, html body #fator-casa-11-novo, html body #fator-fora-11-novo, html body #posicao-casa-12-novo, html body #posicao-fora-12-novo, html body #fator-casa-12-novo, html body #fator-fora-12-novo, html body #posicao-casa-13-novo, html body #posicao-fora-13-novo, html body #fator-casa-13-novo, html body #fator-fora-13-novo, html body #posicao-casa-14-novo, html body #posicao-fora-14-novo, html body #fator-casa-14-novo, html body #fator-fora-14-novo { font-size: 17px !important; color: #ffffff !important; font-weight: 400 !important; letter-spacing: 0.5px !important; } /* CENTRALIZAR COLUNA 3 (TIME FORA) - JOGOS 9-14 - ESPECIFICIDADE ABSOLUTA MÁXIMA */ html body .analysis-table td.team-header#posicao-fora-9-novo, html body .analysis-table td.team-header#fator-fora-9-novo, html body .analysis-table td.team-header#posicao-fora-10-novo, html body .analysis-table td.team-header#fator-fora-10-novo, html body .analysis-table td.team-header#posicao-fora-11-novo, html body .analysis-table td.team-header#fator-fora-11-novo, html body .analysis-table td.team-header#posicao-fora-12-novo, html body .analysis-table td.team-header#fator-fora-12-novo, html body .analysis-table td.team-header#posicao-fora-13-novo, html body .analysis-table td.team-header#fator-fora-13-novo, html body .analysis-table td.team-header#posicao-fora-14-novo, html body .analysis-table td.team-header#fator-fora-14-novo { text-align: center !important; } /* COLUNA 4 ANÁLISE - JOGOS 9-14 - ESPECIFICIDADE MÁXIMA + QUEBRA DE LINHA */ html body #forma-analise-9-novo, html body #posicao-analise-9-novo, html body #h2h-analise-9-novo, html body #fator-analise-9-novo, html body #forma-analise-10-novo, html body #posicao-analise-10-novo, html body #h2h-analise-10-novo, html body #fator-analise-10-novo, html body #forma-analise-11-novo, html body #posicao-analise-11-novo, html body #h2h-analise-11-novo, html body #fator-analise-11-novo, html body #forma-analise-12-novo, html body #posicao-analise-12-novo, html body #h2h-analise-12-novo, html body #fator-analise-12-novo, html body #forma-analise-13-novo, html body #posicao-analise-13-novo, html body #h2h-analise-13-novo, html body #fator-analise-13-novo, html body #forma-analise-14-novo, html body #posicao-analise-14-novo, html body #h2h-analise-14-novo, html body #fator-analise-14-novo { font-size: 17px !important; color: #ffffff !important; font-weight: 400 !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: anywhere !important; word-break: normal !important; max-width: 150px !important; } } /* ======================================== 🎯 FIX FINAL - CENTRALIZAR COLUNA 3 JOGOS 9-14 REGRA ADICIONADA NO FINAL COM .page--analise-rapida PARA TER PRIORIDADE ABSOLUTA IDs CORRETOS SEM "-novo" ======================================== */ html body .page--analise-rapida .analysis-table td.team-header#posicao-fora-9, html body .page--analise-rapida .analysis-table td.team-header#fator-fora-9, html body .page--analise-rapida .analysis-table td.team-header#posicao-fora-10, html body .page--analise-rapida .analysis-table td.team-header#fator-fora-10, html body .page--analise-rapida .analysis-table td.team-header#posicao-fora-11, html body .page--analise-rapida .analysis-table td.team-header#fator-fora-11, html body .page--analise-rapida .analysis-table td.team-header#posicao-fora-12, html body .page--analise-rapida .analysis-table td.team-header#fator-fora-12, html body .page--analise-rapida .analysis-table td.team-header#posicao-fora-13, html body .page--analise-rapida .analysis-table td.team-header#fator-fora-13, html body .page--analise-rapida .analysis-table td.team-header#posicao-fora-14, html body .page--analise-rapida .analysis-table td.team-header#fator-fora-14 { text-align: center !important; } /* ======================================== 🎨 ANIMAÇÕES GLOBAIS ======================================== */ /* Animação Pulse - Usado para chamar atenção do usuário */ @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6); } } /* Animação Spin - Usado para loading */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Animação Shake - Usado para indicar erro */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }