@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Sora:wght@700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap'); :root { /* ── Identidade EI PLACAR ── */ --verde: #00A344; /* variação mais escura do verde EI, usada em fundos sólidos */ --verde2: #00C853; /* Verde EI — cor principal da marca */ --gramado: #101114; /* header/nav agora seguem o grafite oficial da marca */ --ouro: #FFC400; /* Dourado EI — destaques e indicadores */ --branco: #FFFFFF; /* Branco oficial */ --c1: #101114; /* Preto Grafite — fundo principal do app */ --c2: #18191d; /* variação do grafite p/ cards */ --c3: #2b2d33; /* variação do grafite p/ bordas */ --texto: #FFFFFF; --texto2: #6B7280; /* Cinza — informações secundárias */ --perigo: #e05c3a; --azul: #3a8ee0; /* ── Tipografia ── */ --fonte-logo: 'Space Grotesk', sans-serif; --fonte-titulo:'Sora', sans-serif; --fonte-texto: 'Inter', system-ui, sans-serif; --fonte-stat: 'JetBrains Mono', monospace; } /* Tema claro — ativado via , alternado em Conta → Configurações */ :root[data-theme="light"] { --branco: #101114; --c1: #f5f7f5; --c2: #ffffff; --c3: #d8ded8; --texto: #101114; --texto2: #6B7280; } :root[data-theme="light"] body { color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--fonte-texto); background: var(--c1); color: var(--texto); min-height: 100vh; display: flex; flex-direction: column; color-scheme: dark; } /* Títulos e nome da marca usam as fontes da identidade */ .logo-text strong, .auth-logo strong, h1, h2, h3 { font-family: var(--fonte-titulo); } .card-title, .sec-title, .sel-card-title { font-family: var(--fonte-titulo); } .stat-box .num, .pb-pct, .seb-val, .fb-val, .num, .mb-pct, .pe-pct { font-family: var(--fonte-stat); } /* HEADER */ header { background: var(--gramado); border-bottom: 3px solid var(--ouro); padding: 8px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: sticky; top: 0; z-index: 100; min-height: 60px; box-sizing: border-box; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 34px; height: 34px; background: var(--ouro); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .logo-text strong { font-size: 18px; color: #fff; letter-spacing: .3px; } .logo-text span { display: block; font-size: 10px; color: var(--ouro); letter-spacing: 2px; text-transform: uppercase; } .logo-text strong { font-size: 18px; font-weight: 800; color: #fff; } .header-badge { background: var(--c2); border: 1px solid var(--c3); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--texto2); } /* SYNC STATUS */ .sync-bar { background: var(--c2); border-bottom: 1px solid var(--c3); padding: 4px 16px; display: flex; align-items: center; gap: 8px; font-size: 10.5px; min-height: 28px; box-sizing: border-box; } .sync-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sync-dot.ok { background: var(--verde2); } .sync-dot.erro { background: var(--perigo); } .sync-dot.config { background: var(--ouro); } .sync-dot.sync { background: var(--azul); animation: pulse 1s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } .sync-msg { flex: 1; color: var(--texto2); } .btn-config-supa { background: none; border: 1px solid var(--c3); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--texto2); font-size: 13px; cursor: pointer; flex-shrink: 0; padding: 0; } .btn-config-supa:hover { border-color: var(--ouro); color: var(--ouro); } /* MODAL CONFIGURAÇÃO */ .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; align-items:center; justify-content:center; padding:16px; } .modal-overlay.open { display:flex; } .modal { background:var(--c2); border:1px solid var(--c3); border-radius:14px; padding:24px; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; } .modal h2 { font-size:17px; font-weight:800; color:var(--ouro); margin-bottom:6px; } .modal p { font-size:12px; color:var(--texto2); margin-bottom:16px; line-height:1.6; } .modal label { display:block; font-size:11px; color:var(--texto2); margin-bottom:4px; font-weight:600; text-transform:uppercase; } .modal input { width:100%; background:var(--c1); border:1px solid var(--c3); border-radius:8px; padding:9px 11px; color:var(--texto); font-size:13px; margin-bottom:12px; outline:none; } .modal input:focus { border-color:var(--verde2); } .modal-btns { display:flex; gap:8px; margin-top:4px; } .btn-salvar-cfg { flex:1; background:var(--verde); color:#fff; border:none; border-radius:8px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; } .btn-salvar-cfg:hover { background:var(--verde2); } .btn-fechar-cfg { background:none; border:1px solid var(--c3); border-radius:8px; padding:11px 16px; color:var(--texto2); font-size:14px; cursor:pointer; } .btn-fechar-cfg:hover { border-color:var(--perigo); color:var(--perigo); } .modal-steps { background:var(--c1); border-radius:8px; padding:12px; margin-bottom:16px; font-size:12px; color:var(--texto2); line-height:2; } .modal-steps a { color:var(--ouro); text-decoration:none; } .modal-steps a:hover { text-decoration:underline; } /* MENU HAMBÚRGUER (abre a sidebar) */ .btn-hamb { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 6px 8px; line-height: 1; border-radius: 8px; } .btn-hamb:hover { background: rgba(255,255,255,.1); } /* SIDEBAR */ .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:400; } .sidebar-overlay.open { display:block; } .sidebar { position:fixed; top:0; left:0; bottom:0; width:260px; max-width:82vw; background:var(--c2); border-right:1px solid var(--c3); z-index:401; transform:translateX(-100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:8px 0 24px rgba(0,0,0,.4); } .sidebar.open { transform:translateX(0); } .sidebar-head { background:var(--gramado); border-bottom:3px solid var(--ouro); padding:18px 16px; display:flex; align-items:center; gap:10px; } .sidebar-head .logo-icon { width:38px; height:38px; background:var(--ouro); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; } .sidebar-head strong { font-size:16px; color:#fff; font-weight:800; } .sidebar-nav { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:2px; } .nav-tab { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; text-align:left; cursor:pointer; border:none; background:transparent; color:var(--texto2); font-size:14px; font-weight:600; border-radius:9px; border-left:3px solid transparent; transition: all .15s; } .nav-tab .nav-ic { font-size:19px; line-height:1; width:22px; text-align:center; flex-shrink:0; } .nav-tab:hover { color: var(--branco); background: var(--c3); } .nav-tab.active { color: var(--ouro); background: rgba(245,197,24,.1); border-left-color: var(--ouro); } /* SUBABAS */ .sub-nav { display: flex; gap: 0; margin-bottom: 14px; background: var(--c2); border-radius: 10px; padding: 4px; border: 1px solid var(--c3); } .sub-tab { flex: 1; padding: 9px 12px; text-align: center; cursor: pointer; border: none; background: transparent; color: var(--texto2); font-size: 13px; font-weight: 600; border-radius: 7px; transition: all .2s; } .sub-tab:hover { color: var(--branco); } .sub-tab.active { background: var(--gramado); color: var(--ouro); } .sub-page { display: none; } .sub-page.active { display: block; } /* MAIN */ main { flex: 1; padding: 16px; max-width: 900px; width: 100%; margin: 0 auto; padding-bottom: 78px; } /* NAVEGAÇÃO RÁPIDA (barra fixa embaixo) — atalho pras 4 abas mais usadas no dia a dia */ .quicknav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--c2); border-top: 1px solid var(--c3); display: flex; box-shadow: 0 -6px 18px rgba(0,0,0,.35); padding-bottom: env(safe-area-inset-bottom, 0); } .quicknav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px 8px; background: none; border: none; color: var(--texto2); font-size: 10.5px; font-weight: 700; cursor: pointer; border-top: 2px solid transparent; } .quicknav-btn:hover { color: var(--texto); } .quicknav-btn.active { color: var(--ouro); border-top-color: var(--ouro); } .page { display: none; } .page.active { display: block; } /* CARD */ .card { background: var(--c2); border: 1px solid var(--c3); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ouro); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* STATS */ .stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 14px; } @media(min-width:480px){ .stats-grid { grid-template-columns: repeat(4,1fr); } } .stat-box { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 12px; text-align: center; } .stat-box .num { font-size: 26px; font-weight: 800; color: var(--ouro); line-height: 1; } .stat-box .lbl { font-size: 10px; color: var(--texto2); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; } .stat-box .stat-ic { font-size: 18px; margin-bottom: 2px; opacity: .85; } /* LISTA DE CAMPEONATOS (Geral) — cards em lista, com destaque dourado ao passar o mouse/tocar */ /* GRADE DE CAMPEONATOS (Geral) — cartões compactos em 2 colunas, número de jogos em destaque */ .camp-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } .camp-row { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; transition: all .15s; } .camp-row:hover, .camp-row:active { border-color: var(--ouro); background: rgba(245,197,24,.06); } .camp-ic { font-size: 18px; margin-bottom: 4px; } .camp-nome { font-weight: 700; font-size: 12.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .camp-sub { font-size: 10px; color: var(--ouro); font-weight: 700; margin-top: 4px; } @media(max-width:479px){ .stat-box { padding: 14px 10px; } .stat-box .num { font-size: 30px; } .stat-box .lbl { font-size: 10.5px; } } /* MATCH ROW */ .match-row { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; } .match-row .comp { font-size: 10px; color: var(--verde2); font-weight: 600; display: none; } .btn-ver-mais { width: 100%; background: var(--c2); border: 1px solid var(--c3); border-radius: 8px; padding: 10px; color: var(--ouro); font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 4px; } .btn-ver-mais:hover { background: var(--c3); } .match-teams { display: grid; grid-template-columns: 32px 1fr auto 1fr 32px; align-items: center; gap: 8px; } .match-teams .nome-casa { text-align: right; } .match-teams .nome-vis { text-align: left; } .match-teams .nome { font-weight:700; font-size:12.5px; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .match-teams-simple .team-casa { font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .match-teams-simple .team-vis { font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .escudo-mini { width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid var(--c3); flex-shrink:0; padding:2px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; overflow:hidden; } .escudo-mini img { width:100%; height:100%; object-fit:contain; display:block; } .escudo-upload { width:64px; height:64px; border-radius:50%; background:var(--c1); border:2px dashed var(--c3); display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; margin:0 auto 6px; overflow:hidden; transition:border-color .15s; padding:4px; box-sizing:border-box; } .escudo-upload:hover { border-color: var(--ouro); } .escudo-upload img { width:100%; height:100%; object-fit:contain; border-radius:50%; background:#fff; display:block; } .escudo-sel { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--c3); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; padding:4px; box-sizing:border-box; } .escudo-sel img { width:100%; height:100%; object-fit:contain; display:block; } .match-teams .placar { background: var(--gramado); border: 1px solid var(--verde2); border-radius: 8px; padding: 4px 10px; font-weight: 900; font-size: 15px; color: #fff; white-space: nowrap; text-align: center; flex-shrink: 0; } .match-teams-simple { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; } .match-teams-simple .placar { background: var(--gramado); border: 1px solid var(--verde2); border-radius: 8px; padding: 4px 10px; font-weight: 900; font-size: 15px; color: #fff; white-space: nowrap; text-align: center; } .match-camp { font-size: 10px; color: var(--verde2); font-weight: 600; grid-column: 1/-1; margin-bottom: 4px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; } .match-camp .mc-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; } .badge-result { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .badge-v { background: rgba(37,163,82,.25); color: var(--verde2); } .badge-e { background: rgba(245,197,24,.2); color: var(--ouro); } .badge-d { background: rgba(224,92,58,.2); color: var(--perigo); } /* FORM */ .fg { display: grid; gap: 10px; margin-bottom: 12px; } .fg2 { grid-template-columns: 1fr 1fr; } @media(max-width:479px){ .fg2 { grid-template-columns: 1fr; } } label { display: block; font-size: 11px; color: var(--texto2); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } input, select, textarea { width: 100%; background: var(--c1); border: 1px solid var(--c3); border-radius: 8px; padding: 9px 11px; color: var(--texto); font-size: 14px; outline: none; transition: border-color .2s; font-family: inherit; color-scheme: dark; } input:focus, select:focus { border-color: var(--verde2); } select option { background: var(--c1); } /* PLACAR */ .placar-area { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 12px; } .placar-area .t-name { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--texto2); line-height:1.25; overflow: hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .placar-area input { text-align: center; font-size: 28px; font-weight: 800; padding: 6px; width: 64px; flex-shrink: 0; } .vs-label { font-size: 18px; font-weight: 800; color: var(--texto2); } /* TIMELINE */ .timeline-box { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 14px; margin-bottom: 14px; } /* Dados Avançados (opcional) — seção recolhível no formulário de jogo */ .adv-details { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 0; overflow: hidden; } .adv-summary { padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ouro); list-style: none; user-select: none; } .adv-summary::-webkit-details-marker { display: none; } .adv-content { padding: 4px 14px 14px; } .adv-group-title { font-size: 11px; color: var(--texto2); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; margin: 14px 0 6px; } .adv-group-title:first-child { margin-top: 4px; } .tl-header { font-size: 12px; font-weight: 700; color: var(--ouro); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; } .gol-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .gol-form > div { flex: 1; min-width: 100px; } .gol-form input { font-size: 20px; font-weight: 800; text-align: center; padding: 8px; } .btn-time { flex: 1; padding: 10px 8px; border: 2px solid var(--c3); border-radius: 8px; background: var(--c2); color: var(--texto); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-time.casa-btn:hover, .btn-time.casa-btn.sel { background: rgba(37,163,82,.2); border-color: var(--verde2); color: var(--verde2); } .btn-time.vis-btn:hover, .btn-time.vis-btn.sel { background: rgba(224,92,58,.2); border-color: var(--perigo); color: var(--perigo); } .campo { background: linear-gradient(180deg,#0e4a22,#145c2d); border-radius: 10px; border: 1px solid #1e7a3a; overflow: hidden; margin-bottom: 10px; } .campo-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 36px; } .campo-row:last-child { border-bottom: none; } .periodo-label { width: 52px; flex-shrink: 0; font-size: 9px; color: rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,.08); padding: 4px; text-align: center; line-height: 1.3; } .periodo-gols { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 5px 8px; } .gol-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .15s; user-select: none; } .gol-chip:hover { opacity: .65; } .gol-chip.casa { background: rgba(37,163,82,.25); color: #4dd87a; border: 1px solid #25a352; } .gol-chip.vis { background: rgba(224,92,58,.25); color: #f08060; border: 1px solid #e05c3a; } .legenda { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--texto2); align-items: center; } .legenda-item { display: flex; align-items: center; gap: 5px; } .dot { width: 9px; height: 9px; border-radius: 50%; } .dot-c { background: #4dd87a; } .dot-v { background: #f08060; } .gols-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 160px; overflow-y: auto; } .gol-item { display: flex; align-items: center; gap: 8px; background: var(--c2); border-radius: 6px; padding: 6px 10px; } .gi-min { font-weight: 900; color: var(--ouro); min-width: 28px; font-size: 13px; } .gi-time { flex: 1; font-size: 13px; font-weight: 600; } .gi-time.casa { color: #4dd87a; } .gi-time.vis { color: #f08060; } .gi-del { background: none; border: none; color: var(--c3); cursor: pointer; font-size: 14px; } .gi-del:hover { color: var(--perigo); } /* BOTÕES */ .btn-primary { background: var(--verde); color: #fff; width: 100%; border: none; border-radius: 8px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s; } .btn-primary:hover { background: var(--verde2); } .btn-danger { background: rgba(224,92,58,.15); color: var(--perigo); border: 1px solid var(--perigo); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; } .btn-danger:hover { background: var(--perigo); color: #fff; } /* TABELA DADOS */ .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .filtros input, .filtros select { flex: 1; min-width: 120px; font-size: 12px; padding: 8px 10px; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 520px; } #page-dados tbody td:nth-child(6), #page-dados tbody td:nth-child(8), #page-dados thead th:nth-child(6), #page-dados thead th:nth-child(8) { min-width: 110px; } th { background: var(--c1); color: var(--ouro); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; padding: 9px 10px; text-align: left; border-bottom: 2px solid var(--c3); white-space: nowrap; } td { padding: 9px 10px; border-bottom: 1px solid var(--c3); vertical-align: middle; } tr:hover td { background: rgba(255,255,255,.03); } .td-c { font-weight: 800; text-align: center; color: #fff; } .td-r { font-weight: 700; text-align: center; color: var(--ouro); } .minutos-cell { font-size: 11px; line-height: 1.8; } .min-casa { color: #4dd87a; font-weight: 700; } .min-vis { color: #f08060; font-weight: 700; } /* SELETOR ANÁLISE */ .sel-card { background: var(--c2); border: 1px solid var(--c3); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .sel-card-title { font-size: 11px; font-weight: 700; color: var(--ouro); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; } .time-select-box { background: var(--c1); border: 2px solid var(--c3); border-radius: 10px; padding: 12px; transition: border-color .2s; } .time-select-box:focus-within { border-color: var(--verde2); } .time-select-box select { font-size: 17px; font-weight: 800; color: var(--texto); background: transparent; border: none; padding: 4px 0; margin-bottom: 10px; } .time-select-box select:focus { outline: none; } .local-btns { display: flex; gap: 6px; margin-bottom: 10px; } .local-btn { flex: 1; padding: 7px 6px; border: 1px solid var(--c3); border-radius: 7px; background: var(--c2); color: var(--texto2); font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: all .2s; } .local-btn.active-all { background: rgba(58,142,224,.2); border-color: var(--azul); color: var(--azul); } .local-btn.active-casa { background: rgba(37,163,82,.2); border-color: var(--verde2); color: var(--verde2); } .local-btn.active-fora { background: rgba(224,92,58,.2); border-color: var(--perigo); color: var(--perigo); } .qty-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .qty-label { font-size: 11px; color: var(--texto2); white-space: nowrap; flex-shrink: 0; } .qty-input { width: 70px; background: var(--c2); border: 1px solid var(--c3); border-radius: 7px; padding: 6px 10px; color: var(--ouro); font-size: 15px; font-weight: 800; text-align: center; outline: none; transition: border-color .2s; } .qty-input:focus { border-color: var(--verde2); } .qty-input::placeholder { color: var(--c3); font-size: 12px; font-weight: 400; } .qty-hint { font-size: 10px; color: var(--texto2); } .ctx-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(37,163,82,.12); border: 1px solid var(--verde2); border-radius: 20px; padding: 4px 10px; font-size: 11px; color: var(--verde2); font-weight: 600; margin-top: 8px; } .vs-divider { display: flex; align-items: center; justify-content: center; padding: 8px 0; } .vs-divider span { font-size: 22px; font-weight: 900; color: var(--texto2); background: var(--c2); border: 2px solid var(--c3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } /* ANÁLISE RESULTADO */ .sec { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .sec-title { font-size: 11px; font-weight: 700; color: var(--texto2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .prob-resultado { display: flex; gap: 8px; margin-bottom: 12px; } .prob-box { flex: 1; background: var(--c2); border: 1px solid var(--c3); border-radius: 10px; padding: 12px; text-align: center; } .pb-label { font-size: 11px; color: var(--texto2); margin-bottom: 6px; font-weight: 600; } .pb-pct { font-size: 22px; font-weight: 900; } .pb-sub { font-size: 9px; color: var(--texto2); margin-top: 3px; } .bar-wrap { margin-top: 8px; } .bar-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--texto2); margin-bottom: 3px; } .bar-track { height: 6px; background: var(--c2); border-radius: 3px; display: flex; overflow: hidden; } .bs { height: 100%; } .bs.v { background: var(--verde2); } .bs.e { background: var(--ouro); } .bs.d { background: var(--perigo); } .gol-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .gr-label { width: 132px; flex-shrink: 0; font-size: 12px; line-height: 1.3; } .gr-bar { flex: 1; height: 8px; background: var(--c2); border-radius: 4px; overflow: hidden; } .gr-fill { height: 100%; border-radius: 4px; transition: width .5s; } .gr-pct { min-width: 36px; text-align: right; font-size: 12px; font-weight: 700; color: var(--ouro); } .btts-row { display: flex; gap: 8px; } .btts-box { flex: 1; background: var(--c2); border: 1px solid var(--c3); border-radius: 8px; padding: 10px; text-align: center; } .bb-lbl { font-size: 10px; color: var(--texto2); margin-bottom: 4px; } .bb-pct { font-size: 18px; font-weight: 800; } .momento-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } @media(min-width:480px){ .momento-grid { grid-template-columns: repeat(4,1fr); } } .momento-box { background: var(--c2); border: 1px solid var(--c3); border-radius: 8px; padding: 10px; text-align: center; position: relative; } .momento-box.pico { border-color: var(--ouro); background: rgba(245,197,24,.08); } .momento-box.baixo { opacity: .7; } .mb-ico { font-size: 18px; margin-bottom: 4px; } .mb-per { font-size: 10px; color: var(--texto2); margin-bottom: 4px; } .mb-pct { font-size: 16px; font-weight: 800; } .mb-gols { font-size: 10px; color: var(--texto2); margin-top: 2px; } .pico-tag { position: absolute; top: 4px; right: 6px; font-size: 8px; font-weight: 700; color: var(--ouro); text-transform: uppercase; } .placar-exact-list { display: flex; flex-direction: column; gap: 6px; } .pe-item { display: flex; align-items: center; gap: 10px; } .pe-placar { font-size: 13px; font-weight: 800; min-width: 50px; } .pe-venc { font-size: 11px; color: var(--texto2); min-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pe-bar { flex: 1; height: 7px; background: var(--c2); border-radius: 4px; overflow: hidden; } .pe-fill { height: 100%; background: var(--verde2); border-radius: 4px; } .pe-pct { font-size: 12px; font-weight: 700; color: var(--ouro); min-width: 38px; text-align: right; } .lambda-note { font-size: 10px; color: var(--texto2); margin-top: 10px; line-height: 1.6; } .conf-wrap { margin-top: 12px; } .conf-label { font-size: 11px; color: var(--texto2); display:flex; justify-content:space-between; margin-bottom:4px; } .conf-bar { height: 7px; background: var(--c2); border-radius: 4px; overflow: hidden; } .conf-fill { height: 100%; border-radius: 4px; transition: width .5s; } .paginacao { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:14px; } .pg-btn { background:var(--c2); border:1px solid var(--c3); color:var(--texto); border-radius:7px; padding:6px 11px; font-size:12px; cursor:pointer; } .pg-btn:hover { border-color:var(--verde2); } .pg-btn.ativo { background:var(--verde2); color:#fff; border-color:var(--verde2); font-weight:700; } .pg-btn:disabled { opacity:.4; cursor:default; } .pg-info { font-size:11px; color:var(--texto2); margin:0 8px; } .forca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .forca-box { background: var(--c2); border: 1px solid var(--c3); border-radius: 8px; padding: 10px 12px; } .fb-label { font-size: 10px; color: var(--texto2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .fb-stat { font-size: 13px; font-weight: 700; margin-bottom: 2px; } .fb-val { color: var(--ouro); } .fb-jogos { font-size: 10px; color: var(--texto2); } .cal-list { display: flex; flex-direction: column; gap: 5px; } .cal-item { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .cal-dot.facil { background: var(--azul); } .cal-dot.medio { background: var(--verde2); } .cal-dot.dificil { background: var(--perigo); } .cal-resumo { margin-top: 8px; font-size: 11px; color: var(--texto2); } .min-table { width: 100%; border-collapse: collapse; font-size: 12px; } .min-table th { background: var(--c2); color: var(--texto2); font-size: 10px; text-transform: uppercase; padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--c3); } .min-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); } .min-table .label-col { text-align: left; font-weight: 600; color: var(--texto2); } .min-table .total-col { font-weight: 800; color: var(--ouro); } .cell-n { font-weight: 700; } .cell-n.alto { background: rgba(37,163,82,.2); color: #4dd87a; border-radius: 4px; } .min-insight { margin-top: 8px; font-size: 11px; color: var(--texto2); line-height: 1.6; } /* MOMENTO DE ENTRADA */ .entrada-card { background: var(--c2); border: 1px solid var(--c3); border-radius: 10px; padding: 12px; margin-bottom: 8px; } .entrada-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .entrada-titulo { font-size: 12px; font-weight: 800; color: var(--ouro); text-transform: uppercase; letter-spacing: .8px; } .entrada-jogos { font-size: 10px; color: var(--texto2); } .gol-seq { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .gol-seq-item { background: var(--c1); border: 1px solid var(--c3); border-radius: 8px; padding: 8px 10px; text-align: center; flex: 1; min-width: 52px; } .gsi-num { font-size: 9px; color: var(--texto2); text-transform: uppercase; margin-bottom: 4px; } .gsi-min { font-size: 18px; font-weight: 900; } .gsi-min.marc { color: #4dd87a; } .gsi-min.sofr { color: #f08060; } .gsi-min.comb { color: var(--ouro); } .gsi-min.null { color: var(--c3); font-size: 14px; } .gsi-sub { font-size: 9px; color: var(--texto2); margin-top: 2px; } .over-entrada { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 10px; } @media(min-width:480px){ .over-entrada { grid-template-columns: repeat(4,1fr); } } .oe-box { background: var(--c1); border-radius: 10px; padding: 10px; text-align: center; border: 1px solid var(--c3); } .oe-box.verde { border-color: var(--verde2); background: rgba(37,163,82,.08); } .oe-box.amarelo{ border-color: var(--ouro); background: rgba(245,197,24,.06); } .oe-box.laranja{ border-color: #e08030; background: rgba(224,128,48,.08); } .oe-box.perigo { border-color: var(--perigo); background: rgba(224,92,58,.06); } .oe-market { font-size: 11px; font-weight: 800; color: var(--texto2); margin-bottom: 5px; } .oe-min { font-size: 22px; font-weight: 900; } .oe-label { font-size: 9px; color: var(--texto2); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; } .oe-seguro { display: inline-block; font-size: 9px; font-weight: 700; background: rgba(37,163,82,.2); color: var(--verde2); border-radius: 10px; padding: 2px 7px; margin-top: 4px; } .aviso-entrada { background: rgba(58,142,224,.1); border: 1px solid var(--azul); border-radius: 8px; padding: 10px 12px; font-size: 11px; color: var(--azul); line-height: 1.7; margin-top: 8px; } /* CARDS DE PERÍODO — substitui tabela no mobile */ .periodo-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } @media(min-width:480px){ .periodo-cards { grid-template-columns: repeat(4,1fr); } } .periodo-card { background: var(--c2); border: 1px solid var(--c3); border-radius: 10px; padding: 10px; text-align: center; } .periodo-card.pico-marc { border-color: #25a352; background: rgba(37,163,82,.1); } .periodo-card.pico-sofr { border-color: var(--perigo); background: rgba(224,92,58,.08); } .pc-label { font-size: 11px; font-weight: 800; color: var(--ouro); margin-bottom: 8px; } .pc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px; } .pc-ico { font-size: 13px; } .pc-val { font-weight: 800; font-size: 15px; } .pc-val.marc { color: #4dd87a; } .pc-val.sofr { color: #f08060; } .pc-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; margin-top: 5px; color: var(--texto2); } .empty { text-align: center; padding: 30px 20px; color: var(--texto2); } .empty .icon { font-size: 38px; margin-bottom: 8px; } .empty p { font-size: 13px; line-height: 1.6; } .stats-extra { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 14px; } @media(min-width:480px){ .stats-extra { grid-template-columns: repeat(4,1fr); } } .stat-extra-box { background: var(--c2); border: 1px solid var(--c3); border-radius: 10px; padding: 10px 12px; } .seb-label { font-size: 10px; color: var(--texto2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; } .seb-val { font-size: 18px; font-weight: 800; color: var(--ouro); } .seb-sub { font-size: 10px; color: var(--texto2); margin-top: 2px; } .top-times { display: flex; flex-direction: column; gap: 6px; } .tt-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .tt-rank { font-size: 11px; color: var(--texto2); min-width: 20px; font-weight: 700; } .tt-nome { flex: 1; font-weight: 700; } .tt-bar { width: 80px; height: 6px; background: var(--c3); border-radius: 3px; overflow: hidden; } .tt-fill { height: 100%; background: var(--verde2); border-radius: 3px; } .tt-val { font-size: 12px; font-weight: 700; color: var(--ouro); min-width: 28px; text-align: right; } /* CALCULADORA */ .calc-linha { background: var(--c1); border: 1px solid var(--c3); border-radius: 10px; padding: 12px; margin-bottom: 8px; } .calc-linha-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .calc-mercado-input { flex: 1; background: var(--c2); border: 1px solid var(--c3); border-radius: 7px; padding: 7px 10px; color: var(--texto); font-size: 13px; font-weight: 700; outline: none; } .calc-mercado-input:focus { border-color: var(--verde2); } .calc-del { background: none; border: none; color: var(--c3); font-size: 16px; cursor: pointer; padding: 4px; } .calc-del:hover { color: var(--perigo); } .calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .calc-field label { display: block; font-size: 10px; color: var(--texto2); margin-bottom: 4px; font-weight: 700; text-transform: uppercase; } .calc-field input { width: 100%; background: var(--c2); border: 1px solid var(--c3); border-radius: 7px; padding: 8px 10px; color: var(--ouro); font-size: 18px; font-weight: 900; text-align: center; outline: none; } .calc-field input:focus { border-color: var(--verde2); } .calc-ev { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; } .calc-ev.valor { background: rgba(37,163,82,.15); border: 1px solid var(--verde2); } .calc-ev.semvalor{ background: rgba(224,92,58,.12); border: 1px solid var(--perigo); } .calc-ev.neutro { background: var(--c2); border: 1px solid var(--c3); } .cev-left { font-size: 12px; } .cev-ev { font-size: 20px; font-weight: 900; } .cev-odd { font-size: 11px; color: var(--texto2); margin-top: 2px; } .cev-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; } .cev-badge.v { background: rgba(37,163,82,.25); color: #4dd87a; } .cev-badge.s { background: rgba(224,92,58,.2); color: #f08060; } /* BANCA PARTICIPANTES */ .btn-pct { background:var(--c2); border:1px solid var(--c3); border-radius:6px; padding:7px 12px; color:var(--texto2); font-size:13px; font-weight:700; cursor:pointer; } .btn-pct:hover, .btn-pct.ativo { background:var(--gramado); border-color:var(--verde2); color:var(--ouro); } .painel-banca { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } @media(min-width:480px){ .painel-banca { grid-template-columns:repeat(4,1fr); } } .pb-box { background:var(--c1); border:1px solid var(--c3); border-radius:10px; padding:12px; text-align:center; } .pb-box .pb-num { font-size:20px; font-weight:900; color:var(--ouro); } .pb-box .pb-lbl { font-size:10px; color:var(--texto2); text-transform:uppercase; margin-top:4px; } .part-card { background:var(--c1); border:1px solid var(--c3); border-radius:10px; padding:14px; margin-bottom:10px; } .part-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .part-nome { font-size:16px; font-weight:900; color:var(--texto); } .part-cota { font-size:12px; font-weight:700; color:var(--ouro); background:rgba(245,197,24,.1); border:1px solid var(--ouro); border-radius:20px; padding:3px 10px; } .part-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } @media(min-width:400px){ .part-stats { grid-template-columns:repeat(4,1fr); } } .ps-box { background:var(--c2); border-radius:8px; padding:8px; text-align:center; } .ps-val { font-size:16px; font-weight:800; } .ps-lbl { font-size:9px; color:var(--texto2); text-transform:uppercase; margin-top:2px; } .ps-val.pos { color:#4dd87a; } .ps-val.neg { color:#f08060; } .ps-val.neu { color:var(--ouro); } .entrada-item { display:flex; align-items:center; gap:10px; background:var(--c1); border-radius:8px; padding:10px 12px; margin-bottom:6px; font-size:12px; } .ei-resultado { font-size:16px; flex-shrink:0; } .ei-desc { flex:1; font-weight:600; } .ei-val { font-weight:800; white-space:nowrap; } .ei-val.pos { color:#4dd87a; } .ei-val.neg { color:#f08060; } #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--verde); color: #fff; padding: 11px 22px; border-radius: 30px; font-size: 13px; font-weight: 600; z-index: 999; transition: transform .3s; pointer-events: none; } #toast.show { transform: translateX(-50%) translateY(0); } #toast.erro { background: var(--perigo); } footer { background: var(--c2); border-top: 1px solid var(--c3); text-align: center; padding: 10px; font-size: 11px; color: var(--texto2); margin-bottom: 58px; } /* AUTH — tela de login/cadastro */ #authScreen { display:none; position:fixed; inset:0; background:var(--c1); z-index:500; align-items:center; justify-content:center; padding:20px; overflow-y:auto; } #authScreen.open { display:flex; } .auth-box { background:var(--c2); border:1px solid var(--c3); border-radius:14px; padding:28px 24px; width:100%; max-width:380px; } .auth-logo { text-align:center; margin-bottom:20px; } .auth-logo .logo-icon { width:56px; height:56px; font-size:28px; margin:0 auto 10px; } .auth-logo strong { display:block; font-size:20px; font-weight:800; color:#fff; } .auth-tabs { display:flex; gap:0; margin-bottom:20px; background:var(--c1); border-radius:10px; padding:4px; border:1px solid var(--c3); } .auth-tab { flex:1; padding:9px 12px; text-align:center; cursor:pointer; border:none; background:transparent; color:var(--texto2); font-size:13px; font-weight:700; border-radius:7px; } .auth-tab.active { background:var(--gramado); color:var(--ouro); } .auth-form { display:none; } .pwd-wrap { position:relative; } .pwd-wrap input { padding-right:40px !important; width:100%; box-sizing:border-box; } .pwd-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:16px; opacity:.6; user-select:none; background:none; border:none; padding:4px; line-height:1; } .pwd-eye:hover { opacity:1; } .auth-link { display:block; text-align:right; font-size:12px; color:var(--verde2); cursor:pointer; margin-top:4px; margin-bottom:18px; padding:2px 0; } .auth-link:hover { text-decoration:underline; } .auth-voltar { display:block; text-align:center; font-size:12px; color:var(--texto2); cursor:pointer; margin-top:14px; } .auth-voltar:hover { color:var(--texto); } .auth-form.active { display:block; } .auth-msg { font-size:12px; padding:10px 12px; border-radius:8px; margin-bottom:14px; display:none; line-height:1.5; } .auth-msg.show { display:block; } .auth-msg.erro { background:rgba(224,92,58,.15); border:1px solid var(--perigo); color:var(--perigo); } .auth-msg.info { background:rgba(58,142,224,.15); border:1px solid var(--azul); color:var(--azul); } .auth-msg.ok { background:rgba(37,163,82,.18); border:1px solid var(--verde2); color:#4dd87a; } /* Tela de espera de aprovação / acesso restrito */ #waitScreen, #blockScreen { display:none; position:fixed; inset:0; background:var(--c1); z-index:480; align-items:center; justify-content:center; padding:20px; text-align:center; } #waitScreen.open, #blockScreen.open { display:flex; } .wait-box { max-width:340px; } .wait-box .icon { font-size:48px; margin-bottom:14px; } .wait-box h2 { font-size:18px; font-weight:800; color:var(--ouro); margin-bottom:8px; } .wait-box p { font-size:13px; color:var(--texto2); line-height:1.6; margin-bottom:18px; } /* Painel de aprovação (organizador) */ .aprov-card { background:var(--c1); border:1px solid var(--c3); border-radius:10px; padding:12px 14px; margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .aprov-info { flex:1; min-width:140px; } .aprov-nome { font-weight:700; font-size:14px; } .aprov-email { font-size:11px; color:var(--texto2); } .aprov-btns { display:flex; gap:6px; } .btn-aprovar { background:var(--verde); border:none; border-radius:7px; padding:7px 12px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; } .btn-rejeitar { background:none; border:1px solid var(--perigo); border-radius:7px; padding:7px 12px; color:var(--perigo); font-size:12px; font-weight:700; cursor:pointer; } /* Indicador de usuário logado no header */ .user-badge { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--texto2); cursor:pointer; } .user-badge:hover { color:var(--ouro); } /* Elementos visíveis só para o organizador — escondidos por padrão até confirmar o papel */ .so-organizador { display:none !important; } body.papel-organizador button.so-organizador, body.papel-organizador .sub-tab.so-organizador { display:inline-flex !important; } body.papel-organizador .nav-tab.so-organizador { display:flex !important; } body.papel-organizador .card.so-organizador { display:block !important; } body.papel-organizador .sync-bar.so-organizador { display:flex !important; } /* page.so-organizador só fica visível quando também está .active (segue a navegação normal) */ body.papel-organizador .page.so-organizador.active { display:block !important; }