/* =========================================================
   EVENTOS V2 — design system mobile-first
   Página nova (futebol/eventos_v2). Não afeta css-front/eventos.css.
   ========================================================= */
:root{
  --ev2-bg:#0b0e13;
  --ev2-card:#161b26;
  --ev2-border:rgba(255,255,255,.08);
  --ev2-border-strong:rgba(255,255,255,.18);
  --ev2-text:#eef2f8;
  --ev2-muted:#93a0b4;
  --ev2-brand:#4bb4ff;
  --ev2-brand-2:#00d18f;
  --ev2-gold:#ffc233;
  --ev2-danger:#ff5d5d;
  --ev2-home:#22c55e;
  --ev2-draw:#94a3b8;
  --ev2-away:#3b82f6;
  --ev2-shadow:0 12px 28px rgba(0,0,0,.35);
}

body.ev2-body{
  background:var(--ev2-bg);
  color:var(--ev2-text);
}

.ev2-shell{
  max-width:1080px;
  margin:0 auto;
  padding:0 14px 48px;
}

/* ---------- Hero / cabeçalho ---------- */
.ev2-hero{
  padding:20px 2px 12px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.ev2-hero h1{
  margin:0;
  font-size:clamp(22px,5vw,32px);
  font-weight:800;
  letter-spacing:-.01em;
}
.ev2-hero .ev2-sub{
  margin:4px 0 0;
  color:var(--ev2-muted);
  font-size:13.5px;
}
.ev2-classic-link{
  color:var(--ev2-muted);
  font-size:11.5px;
  text-decoration:underline;
}

.ev2-push-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.ev2-push-btn{
  border-radius:999px;
  padding:9px 16px;
  font-size:12.5px;
  font-weight:700;
  border:1px solid var(--ev2-border-strong);
  background:rgba(255,255,255,.04);
  color:var(--ev2-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:.15s ease;
}
.ev2-push-btn.on{
  background:linear-gradient(135deg,var(--ev2-brand-2),#00b37e);
  color:#02150f;
  border-color:transparent;
}
.ev2-push-btn:hover{ transform:translateY(-1px); }

/* ---------- Tabs em pílula rolável ---------- */
.ev2-tabs-wrap{
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(var(--ev2-bg) 78%, rgba(11,14,19,0));
  padding-top:8px;
  margin:0 -14px;
}
.ev2-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:4px 14px 12px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.ev2-tabs::-webkit-scrollbar{ display:none; }
.ev2-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:999px;
  background:var(--ev2-card);
  border:1px solid var(--ev2-border);
  color:var(--ev2-muted);
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
  transition:.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.ev2-tab:hover{ border-color:rgba(75,180,255,.35); }
.ev2-tab.active{
  color:#03131d;
  background:linear-gradient(135deg,var(--ev2-brand),var(--ev2-brand-2));
  border-color:transparent;
  box-shadow:0 8px 18px rgba(75,180,255,.28);
}
.ev2-tab:focus-visible{ outline:2px solid var(--ev2-brand); outline-offset:2px; }

/* ---------- Painéis ---------- */
.ev2-panel{ display:none; }
.ev2-panel.active{ display:block; animation:ev2fade .25s ease; }
@keyframes ev2fade{ from{opacity:.4; transform:translateY(4px);} to{opacity:1; transform:none;} }

.ev2-panel-head{ margin:6px 0 14px; }
.ev2-panel-head h2{ font-size:18px; margin:0 0 2px; font-weight:800; }
.ev2-panel-head p{ margin:0; color:var(--ev2-muted); font-size:13px; }

/* ---------- Busca ---------- */
.ev2-search{ position:relative; margin-bottom:14px; }
.ev2-search input{
  width:100%;
  background:var(--ev2-card);
  border:1px solid var(--ev2-border);
  color:var(--ev2-text);
  border-radius:999px;
  padding:11px 16px 11px 40px;
  font-size:14px;
}
.ev2-search input:focus{ outline:none; border-color:var(--ev2-brand); }
.ev2-search input::placeholder{ color:var(--ev2-muted); }
.ev2-search i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ev2-muted); pointer-events:none;
}

.ev2-legend-inline{
  display:flex; flex-wrap:wrap; gap:14px;
  color:var(--ev2-muted); font-size:12px; margin-bottom:12px;
}

/* ---------- Card de evento (unificado) ---------- */
.ev2-card{
  background:linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--ev2-card);
  border:1px solid var(--ev2-border);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:12px;
  box-shadow:var(--ev2-shadow);
  transition:border-color .15s ease;
}
.ev2-card:hover{ border-color:rgba(75,180,255,.35); }

.ev2-card-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
}
.ev2-event-name{
  color:var(--ev2-gold);
  font-weight:800;
  font-size:14.5px;
  text-transform:uppercase;
  line-height:1.25;
  text-decoration:none;
  display:block;
}
a.ev2-event-name:hover{ text-decoration:underline; }
.ev2-event-meta{
  color:var(--ev2-muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; margin-top:3px;
}
.ev2-event-date{
  color:var(--ev2-muted); font-size:11px; text-align:right; white-space:nowrap;
}
.ev2-event-date strong{ display:block; color:#cfd8e6; font-weight:700; font-size:12.5px; }

/* ---------- Chips ---------- */
.ev2-chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.ev2-chip{
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.02em; border:1px solid var(--ev2-border); background:rgba(255,255,255,.04); color:#cbd5e1;
}
.ev2-chip.primary{ background:rgba(75,180,255,.14); border-color:rgba(75,180,255,.4); color:#9cd4ff; }
.ev2-chip.beta{ background:rgba(255,194,51,.12); border-color:rgba(255,194,51,.4); color:#ffd873; border-style:dashed; }
.ev2-chip.muted{ opacity:.7; }

.ev2-conclusion{
  background:rgba(255,255,255,.04);
  border:1px solid var(--ev2-border);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  color:#dbe4f3;
  margin-bottom:10px;
}

/* ---------- Grid de modelos (badges compactos) ---------- */
.ev2-models{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  gap:6px;
  margin:10px 0;
}
.ev2-model{
  text-align:center; background:rgba(255,255,255,.03); border:1px solid var(--ev2-border);
  border-radius:10px; padding:6px 4px;
}
.ev2-model-name{
  font-size:9px; text-transform:uppercase; color:var(--ev2-muted); font-weight:700;
  letter-spacing:.04em; margin-bottom:3px;
}
.ev2-model-badge .badge{ font-size:10px; padding:.3em .5em; }
.ev2-model-placar{ font-size:10px; color:var(--ev2-muted); margin-top:2px; }

/* ---------- Barra de odds (Correct Score) ---------- */
.ev2-odds-bar{
  height:10px; border-radius:999px; overflow:hidden; display:flex;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); margin:8px 0 6px;
}
.ev2-odds-bar span{ height:100%; }
.ev2-odds-legend{ display:flex; flex-wrap:wrap; gap:5px 12px; font-size:11.5px; color:#cbd5e1; margin-bottom:4px; }
.ev2-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; translate:0 1px; }

/* ---------- Expandir detalhes ---------- */
.ev2-expand-btn{
  margin-top:8px; width:100%;
  background:rgba(255,255,255,.04);
  border:1px dashed var(--ev2-border-strong);
  color:var(--ev2-brand);
  border-radius:10px;
  padding:9px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.ev2-expand-btn i{ transition:transform .2s ease; }
.ev2-expand-btn[aria-expanded="true"] i{ transform:rotate(180deg); }
.ev2-expand-body{ display:none; margin-top:10px; padding-top:10px; border-top:1px dashed var(--ev2-border); }
.ev2-expand-body.open{ display:block; animation:ev2fade .2s ease; }

.ev2-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}
.ev2-detail-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--ev2-border);
  border-radius:10px;
  padding:10px;
}
.ev2-detail-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; font-weight:700; color:#cbd5e1; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:8px; padding-bottom:6px;
  border-bottom:1px solid var(--ev2-border);
}
.ev2-matrix-scroll{ font-size:11.5px; color:#cbd5e1; overflow-x:auto; }
.ev2-matrix-scroll table{ width:100%; border-collapse:collapse; margin-top:4px; }
.ev2-matrix-scroll th, .ev2-matrix-scroll td{
  border:1px solid rgba(255,255,255,.15); padding:3px 5px; text-align:center; font-size:10.5px; color:#dbe4f3;
}
.ev2-matrix-scroll .erros, .ev2-matrix-scroll .prob, .ev2-matrix-scroll .top-placares{ margin-bottom:6px; }
.ev2-matrix-scroll ul, .ev2-matrix-scroll ol{ margin:4px 0 0 16px; padding:0; }

/* ---------- Acesso limitado ---------- */
.ev2-locked{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,93,93,.08); border:1px solid rgba(255,93,93,.3);
  color:#ffb4b4; border-radius:12px; padding:10px 14px; font-size:12.5px;
  font-weight:600; text-decoration:none; margin-top:4px;
}
.ev2-locked:hover{ background:rgba(255,93,93,.14); color:#ffb4b4; }

/* ---------- Cards simples (Tab ChatGPT) ---------- */
.ev2-simple-card{
  display:flex; align-items:center; gap:10px;
  background:var(--ev2-card); border:1px solid var(--ev2-border);
  border-radius:14px; padding:12px 14px; margin-bottom:8px; text-decoration:none;
}
.ev2-simple-card:hover{ border-color:rgba(75,180,255,.35); }
.ev2-simple-text strong{
  display:block; color:var(--ev2-gold); font-size:13px; text-transform:uppercase; line-height:1.3;
}
.ev2-simple-text small{ color:var(--ev2-muted); font-size:10.5px; text-transform:uppercase; }

/* ---------- Estado vazio ---------- */
.ev2-empty{
  background:rgba(255,255,255,.03); border:1px dashed var(--ev2-border-strong);
  border-radius:14px; padding:18px; color:var(--ev2-muted); text-align:center; font-size:13px;
}

/* ---------- Sobre (rodapé SEO) ---------- */
.ev2-about{
  background:var(--ev2-card); border:1px solid var(--ev2-border);
  border-radius:16px; padding:22px; margin-top:30px; color:#c9d3e0;
}
.ev2-about h3{ color:var(--ev2-text); font-weight:800; margin-bottom:12px; font-size:17px; }
.ev2-about p{ font-size:13.5px; line-height:1.55; }
.ev2-about strong{ color:var(--ev2-brand); }
.ev2-about a{ color:var(--ev2-brand-2); }

@media (max-width:480px){
  .ev2-card{ padding:12px 13px; border-radius:14px; }
  .ev2-event-name{ font-size:13.5px; }
  .ev2-models{ grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); }
}