/* E12 — Previsões — módulo de tela do protótipo V2 (frente portal-v2, 21/10/2026).
   Releitura da bet365: tudo pousa no chão (--bg), grupo = título + filete + espaço; sem caixa, sombra, degradê nem vidro.
   Só variáveis do :root (ficha DESIGN_BET365); o valor depois da vírgula é a reserva da ficha. Prefixo .pv- */

.pv {
  --pv-sim: var(--up, #3FD08C);
  --pv-nao: var(--dn, #FF6B6B);
  font-family: var(--ui, 'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);
  color: var(--ink, #F3F5F4);
  font-size: 14px;
  line-height: 1.4;
  padding: 0 10px 32px;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }
:where(.pv) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
:where(.pv) a { color: inherit; text-decoration: none; touch-action: manipulation; }
:where(.pv) h1, :where(.pv) h2, :where(.pv) h3, :where(.pv) p, :where(.pv) ul, :where(.pv) figure { margin: 0; }
:where(.pv) ul { list-style: none; padding: 0; }
.pv :focus-visible { outline: 2px solid var(--amarelo, #FFDF1B); outline-offset: 2px; }

/* ── cabeçalho ── */
.pv-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px;
  padding: 18px 2px 4px;
}
.pv-titulo { font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: 0; }
.pv-sub { margin-top: 3px; font-size: 14px; color: var(--ink2, rgba(255,255,255,.86)); }
.pv-janela { font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }

/* ── pílulas das categorias ── */
.pv-pilulas {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -10px; padding: 12px 10px 14px;
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 10px;
  border-bottom: 1px solid var(--fil, rgba(255,255,255,.11));
}
.pv-pilulas::-webkit-scrollbar { display: none; }
.pv-pilula {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--veu, rgba(255,255,255,.075)); color: var(--ink2, rgba(255,255,255,.86));
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.pv-pilula-n { font-size: 12px; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-pilula[aria-pressed="true"] { background: var(--ink, #F3F5F4); color: var(--bg, #202423); }
.pv-pilula[aria-pressed="true"] .pv-pilula-n { color: inherit; opacity: .6; }

.pv-meta { font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-meta-cat { color: var(--acc, #3FD08C); }

/* ── destaque ── */
.pv-dest {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cab" "graf" "corpo";
  gap: 14px; padding: 20px 2px 26px; border-bottom: 1px solid var(--fil, rgba(255,255,255,.11));
}
.pv-dest-cab { grid-area: cab; }
.pv-dest-corpo { grid-area: corpo; }
.pv-dest .pv-graf { grid-area: graf; }
.pv-dest-tit { margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.pv-dest-pct { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-dest-pct b { font-size: 40px; font-weight: 900; line-height: 1; color: var(--ink, #F3F5F4); }
.pv-dest .pv-mais { margin-top: 4px; }

/* ── gráfico grande ── */
.pv-graf { min-width: 0; }
.pv-graf-area { width: 100%; min-width: 0; }
.pv-graf-svg { display: block; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.pv-graf-grade { stroke: var(--fil2, rgba(255,255,255,.065)); stroke-width: 1; }
.pv-graf-base { stroke: var(--fil, rgba(255,255,255,.11)); stroke-width: 1; }
.pv-graf-eixo { fill: var(--ink3, rgba(255,255,255,.66)); font-size: 11px; font-weight: 700; font-family: inherit; }
.pv-graf-l { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pv-graf-l.pv-s1 { stroke: var(--acc, #3FD08C); stroke-width: 2.5; }
.pv-graf-l.pv-s2 { stroke: var(--ink2, rgba(255,255,255,.86)); }
.pv-graf-l.pv-s3 { stroke: var(--ink3, rgba(255,255,255,.66)); stroke-dasharray: 5 4; }
.pv-graf-p.pv-s1 { fill: var(--acc, #3FD08C); }
.pv-graf-p.pv-s2 { fill: var(--ink2, rgba(255,255,255,.86)); }
.pv-graf-p.pv-s3 { fill: var(--ink3, rgba(255,255,255,.66)); }
.pv-graf-regua { stroke: var(--ink3, rgba(255,255,255,.66)); stroke-width: 1; stroke-dasharray: 2 3; }

.pv-leg { margin-top: 10px; }
.pv-leg-cab { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-leg-hora { color: var(--ink2, rgba(255,255,255,.86)); }
.pv-leg-lista { margin-top: 6px; }
.pv-leg-i { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 28px; }
.pv-leg-tr { height: 0; border-top: 2.5px solid var(--acc, #3FD08C); }
.pv-leg-i.pv-s2 .pv-leg-tr { border-top: 2px solid var(--ink2, rgba(255,255,255,.86)); }
.pv-leg-i.pv-s3 .pv-leg-tr { border-top: 2px dashed var(--ink3, rgba(255,255,255,.66)); }
.pv-leg-n { font-size: 13px; color: var(--ink2, rgba(255,255,255,.86)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-leg-v { font-size: 14px; font-weight: 900; }

/* ── grupos e grade de cartões ── */
.pv-grupo { margin-top: 26px; }
.pv-grupo-tit {
  display: flex; align-items: baseline; gap: 8px; padding: 0 2px 10px;
  border-bottom: 1px solid var(--fil, rgba(255,255,255,.11));
  font-size: 17px; font-weight: 900; line-height: 1.2;
}
.pv-grupo-n { font-size: 13px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-grade { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 36px; }

.pv-card {
  display: flex; flex-direction: column; min-width: 0; padding: 16px 2px 12px;
  border-bottom: 1px solid var(--fil2, rgba(255,255,255,.065)); cursor: pointer;
}
.pv-card-tit {
  font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-card-tit a { transition: color .12s ease; }

.pv-bin { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pv-bin-pct { display: flex; flex-direction: column; gap: 3px; }
.pv-bin-pct b { font-size: 32px; font-weight: 900; line-height: 1; }
.pv-bin-pct > span { font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-bin-pct > .pv-dv { font-size: 11.5px; }
.pv-spark { display: block; flex: 0 0 auto; overflow: visible; }
.pv-spark-l { fill: none; stroke: var(--acc, #3FD08C); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pv-spark-p { fill: var(--acc, #3FD08C); }
.pv-bin-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }

.pv-linhas { display: flex; flex-direction: column; }
.pv-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 6px;
  min-height: 52px; padding: 4px 0;
}
.pv-linha + .pv-linha { border-top: 1px solid var(--fil2, rgba(255,255,255,.065)); }
.pv-linha-n {
  font-size: 13.5px; color: var(--opcao-nome, #D9D9D9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-linha-pct { min-width: 46px; padding-right: 4px; text-align: right; font-size: 15px; font-weight: 900; white-space: nowrap; }

.pv-dv { font-size: 10.5px; font-weight: 700; margin-right: 5px; letter-spacing: 0; }
.pv-sobe { color: var(--up, #3FD08C); }
.pv-desce { color: var(--dn, #FF6B6B); }

.pv-card-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 10px; min-height: 40px;
  font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66));
}
.pv-mais { display: inline-flex; align-items: center; min-height: 44px; color: var(--acc, #3FD08C); font-size: 13px; font-weight: 700; }

/* ── botão Sim/Não (odd amarela, lado em verde/vermelho discretos) ── */
.pv-bt {
  border-radius: 6px; background: var(--veu, rgba(255,255,255,.075));
  transition: background-color .12s ease, color .12s ease;
}
.pv-bt-largo { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 46px; padding: 0 12px; }
.pv-bt-esq { display: inline-flex; align-items: baseline; gap: 6px; }
.pv-bt-largo .pv-bt-lado { font-size: 13.5px; font-weight: 700; }
.pv-bt-pct { font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-bt-largo .pv-bt-odd { font-size: 15px; }
.pv-bt-compacto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 44px; }
.pv-bt-compacto .pv-bt-lado { font-size: 11px; font-weight: 700; line-height: 1.1; }
.pv-bt-odd { font-size: 14.5px; font-weight: 700; line-height: 1.15; color: var(--amarelo, #FFDF1B); font-variant-numeric: tabular-nums; }
.pv-sim .pv-bt-lado { color: var(--pv-sim); }
.pv-nao .pv-bt-lado { color: var(--pv-nao); }
.pv-bt[aria-pressed="true"] { background: var(--amarelo, #FFDF1B); }
.pv-bt[aria-pressed="true"] .pv-bt-lado,
.pv-bt[aria-pressed="true"] .pv-bt-odd,
.pv-bt[aria-pressed="true"] .pv-bt-pct { color: var(--amarelo-ink, #141414); }
.pv-bt[aria-pressed="true"] .pv-bt-pct { opacity: .65; }

@media (hover: hover) {
  .pv-pilula:not([aria-pressed="true"]):hover { background: var(--veu-hover, rgba(255,255,255,.13)); }
  .pv-bt:not([aria-pressed="true"]):hover { background: var(--veu-hover, rgba(255,255,255,.13)); }
  .pv-card:hover .pv-card-tit a, .pv-dest-tit a:hover { color: var(--acc, #3FD08C); }
  .pv-mais:hover, .pv-volta:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ── página do evento ── */
.pv-ev-topo { padding: 6px 2px 16px; border-bottom: 1px solid var(--fil, rgba(255,255,255,.11)); }
.pv-volta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--acc, #3FD08C); font-size: 13.5px; font-weight: 700;
}
.pv-volta svg { width: 8px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pv-volta-pe { margin-top: 18px; }
.pv-ev-topo .pv-meta { margin-top: 2px; }
.pv-ev-tit { margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.2; text-wrap: balance; }

.pv-ev-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 44px; }
.pv-ev-princ, .pv-ev-lado { min-width: 0; }
.pv-ev-lider { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 2px 12px; }
.pv-ev-lider b { font-size: 36px; font-weight: 900; line-height: 1; }
.pv-ev-lider-n { flex-basis: 100%; font-size: 15px; font-weight: 700; color: var(--ink2, rgba(255,255,255,.86)); }
.pv-ev-lider-r { font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }

.pv-sec-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 50px; margin-top: 22px; padding: 14px 2px 10px; border-bottom: 1px solid var(--fil, rgba(255,255,255,.11));
}
.pv-sec-tit { font-size: 15px; font-weight: 700; }
.pv-sec-dir { display: none; font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }

.pv-merc-i {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt pct" "bts bts";
  align-items: center; gap: 8px 12px; padding: 12px 2px; border-bottom: 1px solid var(--fil2, rgba(255,255,255,.065));
}
.pv-merc-txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-merc-n { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pv-merc-vol { font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-merc-pct { grid-area: pct; text-align: right; font-size: 20px; font-weight: 900; white-space: nowrap; }
.pv-merc-bts { grid-area: bts; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.pv-regra p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink2, rgba(255,255,255,.86)); text-wrap: pretty; }
.pv-como { padding: 4px 2px 0; }
.pv-como li {
  padding: 10px 0; border-bottom: 1px solid var(--fil2, rgba(255,255,255,.065));
  font-size: 13.5px; line-height: 1.45; color: var(--ink2, rgba(255,255,255,.86));
}

.pv-nota { margin: 26px 2px 0; font-size: 12px; font-weight: 700; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-vazio, .pv-carrega { padding: 40px 2px 16px; font-size: 14px; color: var(--ink3, rgba(255,255,255,.66)); }
.pv-tenta {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--acc, #3FD08C); color: var(--gold-ink, #06281A); font-weight: 900;
}

/* ── larguras ── */
@media (min-width: 560px) {
  .pv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-card-tit { min-height: 2.6em; }
  .pv-merc-i { grid-template-columns: minmax(0, 1fr) 64px minmax(280px, 320px); grid-template-areas: "txt pct bts"; }
  .pv-sec-dir { display: inline; }
}
@media (min-width: 901px) {
  .pv { padding: 0 12px 40px; }
  .pv-pilulas { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .pv-pilula { min-height: 40px; }
  .pv-mais { min-height: 36px; }
  .pv-dest {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cab graf" "corpo graf";
    grid-template-rows: auto 1fr; column-gap: 44px; row-gap: 16px; align-items: start; padding-top: 24px;
  }
  .pv-dest-tit { font-size: 24px; }
  .pv-ev-tit { font-size: 24px; }
  .pv-linha { min-height: 50px; }
}
@media (min-width: 1100px) {
  .pv-ev-corpo { grid-template-columns: minmax(0, 1fr) 360px; }
  .pv-ev-lado { padding-top: 2px; }
}
@media (min-width: 1241px) {
  .pv-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .pv-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
}
/* ── vitrine (22/10): botão da opção (só a odd do Sim) e o aviso "Em breve" ── */
.pv-bt-opcao { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 10px; }
.pv-merc-bts > .pv-bt-opcao { grid-column: 1 / -1; }
.pv-aviso {
  position: fixed; left: 50%; bottom: 84px; z-index: 60; transform: translate(-50%, 8px);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 6px;
  background: var(--sup3, #2b2b2b); color: var(--ink1, #fff); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.pv-aviso.pv-aviso-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .pv * { transition: none !important; }
  .pv-aviso { transition: none; }
}