/* ===== BEPIE — sistema de ranking e campeonatos ===== */
:root{
  --bg:#0e1512; --bg2:#141d19; --card:#18231e; --card2:#1e2b25;
  --line:#2a3a32; --line2:#384c42;
  --txt:#e8f0ec; --txt2:#9db0a7; --txt3:#6e8479;
  --acc:#2fbf71; --acc2:#25a35e; --accSoft:#2fbf7122;
  --gold:#e3b341; --silver:#b8c2c8; --bronze:#c9814b;
  --warn:#e5a13a; --bad:#e2574c; --info:#4aa3df;
  --r:12px; --sh:0 2px 10px #0006;
  --ff:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
:root[data-tema="claro"]{
  --bg:#f2f5f3; --bg2:#e8ede9; --card:#fff; --card2:#f6f9f7;
  --line:#dbe4de; --line2:#c4d2ca;
  --txt:#16211c; --txt2:#4c5d54; --txt3:#5f7168;
  --acc:#1c9e57; --acc2:#157a43; --accSoft:#1c9e5718;
  --sh:0 1px 4px #0000001a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--ff);
  font-size:15px; line-height:1.45; -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--acc)}

/* ---------- layout ---------- */
#topo{
  position:sticky; top:0; z-index:40; background:var(--bg2);
  border-bottom:1px solid var(--line); box-shadow:var(--sh);
}
.topo-in{display:flex;align-items:center;gap:14px;padding:10px 16px;max-width:1500px;margin:0 auto}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.marca .bola{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,#fff 0 32%,var(--acc) 33% 100%);
  border:2px solid var(--acc2);
}
.marca small{display:block;font-weight:400;font-size:11px;color:var(--txt2);letter-spacing:0}
nav#abas{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
nav#abas::-webkit-scrollbar{display:none}
nav#abas button{
  background:none;border:0;border-radius:9px;padding:8px 13px;cursor:pointer;
  color:var(--txt2);font-weight:600;font-size:14px;white-space:nowrap;transition:.15s;
}
nav#abas button:hover{background:var(--card);color:var(--txt)}
nav#abas button.on{background:var(--accSoft);color:var(--acc)}
#tema{background:none;border:1px solid var(--line2);border-radius:9px;padding:6px 10px;cursor:pointer;color:var(--txt2)}
main{max-width:1500px;margin:0 auto;padding:18px 16px 90px}

/* ---------- componentes ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.card+.card{margin-top:16px}
/* dentro de um grid quem separa é o gap: a margem esticava o 1º card da fileira */
.grid > .card+.card{margin-top:0}
.card h2{margin:0 0 4px;font-size:17px}
.card h3{margin:18px 0 8px;font-size:15px;color:var(--txt2);text-transform:uppercase;letter-spacing:.6px}
.sub{color:var(--txt2);font-size:13px;margin:0 0 14px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.espaco{flex:1}

.btn{
  background:var(--acc);color:#04120a;border:0;border-radius:9px;padding:9px 15px;
  font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--acc2);color:#fff}
.btn.sec{background:var(--card2);color:var(--txt);border:1px solid var(--line2)}
.btn.sec:hover{background:var(--line);color:var(--txt)}
.btn.peq{padding:5px 10px;font-size:13px;border-radius:7px}
.btn.perigo{background:var(--bad);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.excluir{
  background:none;border:0;color:var(--txt3);cursor:pointer;font-size:15px;line-height:1;
  padding:3px 7px;border-radius:7px;transition:.15s;flex:none;
}
.excluir:hover{background:#e2574c22;color:var(--bad)}
.excluir:focus-visible{outline:2px solid var(--bad);outline-offset:1px}

input[type=text],input[type=number],input[type=time],input[type=date],select,textarea{
  background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accSoft);border-color:var(--acc)}
label.campo{display:block;margin-bottom:10px}
label.campo span{display:block;font-size:12px;color:var(--txt2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--txt2);
  padding:8px 8px;border-bottom:1px solid var(--line2);font-weight:700;white-space:nowrap;
}
td{padding:8px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--card2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.cen{text-align:center}
.tab-rol{overflow-x:auto;-webkit-overflow-scrolling:touch}

.kpi{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi .rot{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt2)}
.kpi .val{font-size:24px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .obs{font-size:12px;color:var(--txt3);margin-top:2px}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;background:var(--card2);border:1px solid var(--line2);color:var(--txt2)}
.tag.ok{background:var(--accSoft);color:var(--acc);border-color:transparent}
.tag.al{background:#e5a13a22;color:var(--warn);border-color:transparent}
.tag.ru{background:#e2574c22;color:var(--bad);border-color:transparent}
.tag.in{background:#4aa3df22;color:var(--info);border-color:transparent}

.escudo{width:26px;height:26px;border-radius:6px;object-fit:contain;background:#fff2;flex:none}
.escudo-txt{
  width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center;
  font-size:10px;font-weight:800;background:var(--card2);border:1px solid var(--line2);color:var(--txt2);
}
.jog{display:flex;align-items:center;gap:9px;min-width:0}
.jog b{font-weight:600}
.jog small{color:var(--txt3);display:block;font-size:11px;line-height:1.1}

.pos{font-weight:800;font-variant-numeric:tabular-nums;width:34px;text-align:right;color:var(--txt2)}
tr.p1 .pos{color:var(--gold)} tr.p2 .pos{color:var(--silver)} tr.p3 .pos{color:var(--bronze)}
.delta{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.delta.up{color:var(--acc)} .delta.dn{color:var(--bad)} .delta.eq{color:var(--txt3)}

.barra{height:6px;border-radius:4px;background:var(--line);overflow:hidden;min-width:60px}
.barra i{display:block;height:100%;background:var(--acc);border-radius:4px}

.vazio{color:var(--txt3);text-align:center;padding:26px;font-size:14px}
.aviso{background:#e5a13a15;border:1px solid #e5a13a44;border-radius:9px;padding:10px 12px;font-size:13px;color:var(--txt2)}

/* modal */
.modal{position:fixed;inset:0;background:#000a;display:none;z-index:100;padding:16px;overflow-y:auto}
.modal.on{display:flex;align-items:flex-start;justify-content:center}
.modal .box{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:20px;width:100%;max-width:560px;margin:auto;box-shadow:0 10px 40px #000a}
.modal .box.larga{max-width:900px}
.modal h2{margin:0 0 14px}

/* chips de seleção */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line2);background:var(--card2);border-radius:20px;padding:5px 11px;
  font-size:13px;cursor:pointer;user-select:none;transition:.12s;display:flex;align-items:center;gap:6px;
}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#04120a;font-weight:700}

/* jogos */
.jogo{
  display:grid;grid-template-columns:1fr 46px 14px 46px 1fr;gap:6px 6px;align-items:center;
  padding:7px 9px;border-bottom:1px solid var(--line);
}
/* quem apita o jogo, numa segunda linha discreta */
.jogo .arbitro{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;color:var(--txt3);margin-top:-2px;
}
.jogo .arbitro b{color:var(--txt2);font-weight:600}
.rot-arb{text-transform:uppercase;letter-spacing:.7px;font-size:9px;opacity:.75}
.btn-arb{
  background:none;border:1px solid var(--line);border-radius:20px;padding:1px 7px;cursor:pointer;
  color:var(--txt3);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;transition:.15s;
}
.btn-arb:hover{border-color:var(--acc);color:var(--acc)}
.jogo:hover{background:var(--card2)}
.jogo .casa{text-align:right} .jogo .fora{text-align:left}
.jogo .casa,.jogo .fora{display:flex;align-items:center;gap:7px;min-width:0;font-size:14px}
.jogo .casa{flex-direction:row-reverse}
.jogo .casa span,.jogo .fora span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jogo input{
  text-align:center;padding:5px 2px;font-weight:700;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield;
}
/* as setinhas do campo numérico empurram o algarismo para a esquerda */
.jogo input::-webkit-outer-spin-button,
.jogo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jogo input:focus{background:var(--card);border-color:var(--acc)}
.jogo .x{text-align:center;color:var(--txt3);font-size:12px}
.jogo.feito .casa b,.jogo.feito .fora b{color:var(--acc)}
.jogo .vs{font-size:11px;color:var(--txt3)}
.grupo-selo{color:var(--txt3);font-weight:700}

.fase-tit{
  display:flex;align-items:center;gap:10px;margin:22px 0 6px;font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;color:var(--acc);
}
.fase-tit:before,.fase-tit:after{content:"";height:1px;background:var(--line2);flex:1}

svg.graf{width:100%;height:auto;display:block;overflow:visible}
svg.graf text{fill:var(--txt2);font-size:10px;font-family:var(--ff)}
/* nome na ponta da linha: contorno da cor do fundo para não sumir sobre as outras */
svg.graf text.rotulo-linha{
  font-size:10px;font-weight:700;stroke:var(--card);stroke-width:2.5px;
  paint-order:stroke fill;stroke-linejoin:round;
}
svg.graf .eixo{stroke:var(--line);stroke-width:1}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  body{font-size:14px}
  .topo-in{padding:8px 10px;gap:8px}
  .marca small{display:none}
  main{padding:12px 10px 80px}
  .card{padding:12px}
  nav#abas{
    position:fixed;left:0;right:0;bottom:0;top:auto;background:var(--bg2);
    border-top:1px solid var(--line);padding:5px 6px;z-index:50;justify-content:flex-start;
  }
  nav#abas button{font-size:12px;padding:7px 10px}
  .kpi .val{font-size:20px}
  th,td{padding:6px 5px;font-size:13px}
  .jogo{grid-template-columns:1fr 38px 10px 38px 1fr;gap:4px;font-size:13px}
  .esconde-mob{display:none}
}
@media print{
  #topo,nav,.btn,#tema{display:none}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc;box-shadow:none;break-inside:avoid}
}

/* ---------- cards de grupo: todos do mesmo tamanho, sem rolagem ---------- */
.grid > .card-grupo{display:flex;flex-direction:column}
.card-grupo table{table-layout:fixed;width:100%}
.card-grupo th,.card-grupo td{padding:6px 3px}
.card-grupo th:nth-child(1),.card-grupo td:nth-child(1){width:26px}
.card-grupo th:nth-child(n+3),.card-grupo td:nth-child(n+3){width:34px}
.card-grupo .escudo,.card-grupo .escudo-txt{width:22px;height:22px}
.card-grupo .jog{gap:7px}
/* nome e time numa linha só: é o que mantinha os cards com alturas diferentes */
.jog b,.jog small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* quem não tem time cadastrado não renderiza o <small> e a linha encolhe:
   reservar a altura das duas linhas mantém todos os cards iguais */
.card-grupo .jog > div:last-child{display:flex;flex-direction:column;justify-content:center;min-height:30px}

/* prévia do escudo no cadastro do participante */
.rot-campo{display:block;font-size:12px;color:var(--txt2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.escudo-prev{
  width:60px;height:60px;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--card2);border:1px solid var(--line2);color:var(--txt2);font-size:19px;font-weight:800;
}
.escudo-prev img{width:100%;height:100%;object-fit:contain}

/* colocação dividida por empate total */
.pos-igual{font-size:10px;font-weight:700;color:var(--txt3);margin-left:2px;vertical-align:2px}

/* ---------- mata-mata: time e escudo no lugar do nome da pessoa ---------- */
.chip-time{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.chip-time .escudo,.chip-time .escudo-txt{width:18px;height:18px;border-radius:4px;font-size:8px}
.tag .chip-time b{font-weight:700}
.penaltis{margin-top:10px;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
/* o jogo dos piores é disputado entre os dois jogos da final */
.encaixe{margin:10px -6px;padding:10px 10px 4px;border:1px dashed var(--line2);border-radius:10px;background:var(--bg2)}
.encaixe-tit{display:flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt2);margin-bottom:6px}
.encaixe .card{background:transparent;border:0;box-shadow:none;padding:0}

/* nota de desempate embaixo da tabela */
.nota-desempate{margin:10px 0 0;padding:0 0 0 16px;font-size:12px;color:var(--txt2);line-height:1.6}
.nota-desempate .nota-tit{list-style:none;margin-left:-16px;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--txt3);margin-bottom:2px}
.pos-crit{color:var(--acc);font-size:12px;margin-left:2px;cursor:help;vertical-align:1px}
.nota-desempate b{color:var(--txt)}
/* colocações ainda não definidas na classificação final */
tr.provisorio td{opacity:.55}
tr.provisorio .pos{font-weight:600}
/* abas do campeonato grudadas no topo (só no desktop, onde a rolagem é longa) */
@media (min-width:861px){
  .abas-torneio{position:sticky;top:var(--topo-h,48px);z-index:35}
}

/* painel de ritmo e previsão de término */
.ritmo{padding:12px 16px}
.ritmo-num b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.ritmo-num small{display:block;font-size:11px;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px}
.campo-campos{display:flex;flex-direction:column;font-size:10px;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px}
.campo-campos input{width:52px;padding:4px 6px;text-align:center;font-weight:700;margin-top:2px}
.campo-campos input.demais{border-color:var(--warn);color:var(--warn)}
.ritmo-fases{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line);font-size:11px;color:var(--txt3)}

/* apagar resultados de uma fase */
.fase-tit .btn-limpar{
  background:none;border:1px solid var(--line2);border-radius:20px;padding:2px 10px;cursor:pointer;
  color:var(--txt3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  transition:.15s;white-space:nowrap;
}
.fase-tit .btn-limpar:hover{border-color:var(--bad);color:var(--bad);background:#e2574c14}

/* modo consulta: campo travado não convida ao clique */
input[readonly]{cursor:default;opacity:.92}
.jogo input[readonly]{border-color:transparent;background:transparent}
.jogo input[readonly]:focus{outline:none;border-color:transparent;background:transparent}