/* ============================================================
   COPA DASHBOARD — componentes novos (M28.2)
   Tokens reaproveitados de style.css; zero cor solta fora de token,
   exceto as cores formais de status de jogo da spec §1.6.
   ============================================================ */

/* ---- status de jogo (spec §1.6 — categoria separada das badges editoriais) ---- */
.match-status{display:inline-flex; align-items:center; gap:6px; font:600 10.5px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:4px}
.match-status--live{background:rgba(46,204,88,.14); color:#1E9C42}
[data-theme="dark"] .match-status--live{color:#3FD968; background:rgba(46,204,88,.16)}
.match-status--live i{width:6px; height:6px; border-radius:50%; background:#2ECC58; box-shadow:0 0 0 0 rgba(46,204,88,.6); animation:mc-pulse 1.5s infinite}
@keyframes mc-pulse{0%{box-shadow:0 0 0 0 rgba(46,204,88,.55)}70%{box-shadow:0 0 0 6px rgba(46,204,88,0)}100%{box-shadow:0 0 0 0 rgba(46,204,88,0)}}
.match-status--ended{color:#555555; background:transparent; border:1px solid transparent; padding-left:0}
[data-theme="dark"] .match-status--ended{color:var(--text-mut)}
.match-status--scheduled{color:var(--text-mut); border:1px solid #E0E0E0; background:transparent}
[data-theme="dark"] .match-status--scheduled{border-color:var(--border-str)}

/* ---- destaques editoriais (2 colunas, posts reais do pipeline) ---- */
.copa-destaques{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.destaque-card{display:grid; grid-template-columns:160px 1fr; gap:18px; text-decoration:none; border:1px solid var(--border); border-radius:8px; padding:14px; transition:border-color .18s ease, box-shadow .18s ease}
.destaque-card:hover{border-color:var(--gold); box-shadow:var(--shadow-sm)}
.destaque-card img{width:160px; height:110px; object-fit:cover; border-radius:6px; background:var(--bg-alt)}
.destaque-body{display:flex; flex-direction:column; gap:6px; min-width:0}
.destaque-body h3{font-family:var(--font-display); font-weight:600; font-size:16.5px; line-height:1.25; color:var(--text); margin:0}
.destaque-body p{font-size:13px; line-height:1.5; color:var(--text-mut); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.destaque-link{font:600 11.5px/1 var(--font-body); color:var(--green); margin-top:2px}
[data-theme="dark"] .destaque-link{color:var(--gold-bright)}

@media (max-width:680px){
  .copa-destaques{grid-template-columns:1fr}
  .destaque-card{grid-template-columns:120px 1fr}
  .destaque-card img{width:120px; height:90px}
}

/* ---- faixa de estatísticas (contador animado) ---- */
.copa-statbar{border-top:1px solid rgba(255,255,255,.16); margin-top:30px; padding-top:24px; display:flex; gap:46px; flex-wrap:wrap}
.copa-stat{display:flex; flex-direction:column; gap:5px}
.copa-stat .num{font-family:var(--font-display); font-weight:700; font-size:38px; line-height:1; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.copa-stat .num .u{font-size:20px; color:var(--gold-bright); margin-left:2px}
.copa-stat .lab{font:600 11px/1.3 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58)}

/* ---- section heads do dashboard ---- */
.copa-sec{margin-bottom:46px}
.copa-sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--text)}
[data-theme="dark"] .copa-sec-head{border-bottom-color:var(--gold)}
.copa-sec-head h2{font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.01em; margin:0; color:var(--text)}
.copa-sec-head .hint{font:500 12.5px/1 var(--font-body); color:var(--text-mut)}

/* ---- carrossel de jogos — ponta a ponta (fora do container/grid) ---- */
.copa-sec--full{margin-bottom:46px}
.copa-sec--full .copa-sec-head{margin-bottom:18px}
.cat-main{min-width:0}
.matches{position:relative; min-width:0}
.matches-track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 max(24px, calc((100% - 1180px) / 2 + 24px)) 4px}
.matches-track::-webkit-scrollbar{display:none}
.match-card{flex:0 0 290px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px 18px; display:flex; flex-direction:column; gap:14px; transition:border-color .18s ease, box-shadow .18s ease}
.match-card:hover{border-color:var(--gold); box-shadow:var(--shadow-sm)}
.mc-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mc-phase{font:600 10.5px/1.3 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep)}
[data-theme="dark"] .mc-phase{color:var(--gold)}
.mc-teams{display:flex; flex-direction:column; gap:11px}
.mc-team{display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:11px}
.mc-team .mc-name{font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--text)}
.mc-team .mc-score{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text); font-variant-numeric:tabular-nums}
.mc-team.win .mc-name,.mc-team.win .mc-score{color:var(--green)}
[data-theme="dark"] .mc-team.win .mc-name,[data-theme="dark"] .mc-team.win .mc-score{color:var(--gold-bright)}
.mc-team .mc-score.pending{color:var(--text-mut); font-size:15px; font-family:var(--font-body); font-weight:500}
.mc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:11px; border-top:1px solid var(--hairline); font-size:12px; color:var(--text-mut)}
.mc-foot .mc-venue{display:flex; align-items:center; gap:6px; text-align:right}

/* escudo/bandeira (vem da API — crest do football-data) */
.flag{width:30px; height:30px; border-radius:50%; flex:none; border:1px solid var(--border); background:var(--bg-alt); box-shadow:inset 0 0 0 2px var(--surface); object-fit:cover}
.flag.sm{width:26px; height:26px}

/* setas do carrossel — inline no head da seção, sem overlap com texto */
.m-nav{display:flex; gap:8px; flex:none}
.m-nav button{width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:all .16s ease}
.m-nav button:hover{border-color:var(--gold); color:var(--green)}
[data-theme="dark"] .m-nav button:hover{color:var(--gold-bright)}
.m-nav button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---- classificação com seta de movimento ---- */
.copa-groups{display:grid; grid-template-columns:1fr 1fr; gap:30px 44px}
.copa-group .g-name{font:700 12px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin:0 0 12px; display:flex; align-items:center; gap:9px}
.copa-group .g-name::before{content:""; width:13px; height:13px; border-radius:3px; background:var(--gold)}
.copa-table{width:100%; border-collapse:collapse; font-size:13.5px}
.copa-table thead th{font:600 10px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--text-mut); text-align:center; padding:0 0 9px}
.copa-table thead th.team{text-align:left; padding-left:2px}
.copa-table tbody td{padding:9px 0; border-bottom:1px solid var(--hairline); text-align:center; color:var(--text-sec); font-variant-numeric:tabular-nums}
.copa-table tbody tr:last-child td{border-bottom:none}
.copa-table .pos{width:30px; position:relative; font-weight:700; color:var(--text); display:flex; align-items:center; gap:5px; justify-content:center}
.copa-table tr.q .pos::before{content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--green); border-radius:2px}
[data-theme="dark"] .copa-table tr.q .pos::before{background:var(--gold)}
.copa-table td.team{text-align:left}
.copa-table .tcell{display:flex; align-items:center; gap:9px}
.copa-table .tcell .tn{font-weight:600; color:var(--text); font-size:13.5px}
.copa-table td.pts{font-weight:700; color:var(--text)}
.mov{display:inline-grid; place-items:center; width:14px; height:14px}
.mov svg{width:11px; height:11px}
.mov.up{color:#1E9C42}.mov.down{color:var(--badge-breaking)}.mov.same{color:var(--text-mut)}
.q-legend{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12px; color:var(--text-mut)}
.q-legend::before{content:""; width:3px; height:14px; background:var(--green); border-radius:2px}
[data-theme="dark"] .q-legend::before{background:var(--gold)}

/* ---- artilheiros ---- */
.scorers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.scorer{display:grid; grid-template-columns:30px 26px 1fr auto auto; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--hairline)}
.scorer:last-child{border-bottom:none}
.scorer .sc-rank{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text-mut); text-align:center; font-variant-numeric:tabular-nums}
.scorer:nth-child(1) .sc-rank{color:var(--gold-deep)}
[data-theme="dark"] .scorer:nth-child(1) .sc-rank{color:var(--gold)}
.scorer .sc-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.scorer .sc-info b{font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--text)}
.scorer .sc-info span{font-size:12px; color:var(--text-mut)}
.scorer .sc-goals{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text); font-variant-numeric:tabular-nums}
.scorer .sc-goals small{font:600 10px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-mut); display:block; text-align:center; margin-top:2px}
.scorer .sc-assists{font-size:12.5px; color:var(--text-sec); white-space:nowrap; text-align:right}

/* ---- próximos jogos (sidebar) ---- */
.copa-upcoming-row{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--hairline)}
.copa-upcoming-row:last-child{border-bottom:none}
.copa-upcoming-row .un{font-weight:600; font-size:13.5px; color:var(--text)}
.copa-upcoming-row .ux{color:var(--text-mut); font-size:12px}
.copa-upcoming-row .ut{margin-left:auto; font-size:11.5px; color:var(--text-mut); white-space:nowrap}

@media (max-width:980px){
  .copa-groups{grid-template-columns:1fr}
  .copa-statbar{gap:30px}
  .copa-stat .num{font-size:32px}
}