/* ── OddsIQ V2 · cupom (E2) — IDÊNTICO ao da bet365 clássica (ficha DESIGN_BET365.md, medido na referência 07/10):
   painel #F0F0F0, Helvetica, cabeçalho 111 px, UM cartão branco r3 com linhas de 94 px, caixa "Aposta" 92×40, botão de
   71 px em degradê 90° #63F2BF→#AEF4A4; barra recolhida #282828. É a única caixa clara da página (ordem do dono) e não
   muda com o tema. Computador (≥901, dono 21/10 ~23h35 "igual é no nosso sistema em produção"): o FLUTUANTE do Clássico
   (classico.css @media ≥901) — barra #282828 de 440 px no pé da tela, ao centro, só com seleção; o cupom sobe dali com
   440 px, sem véu (a página segue clicável). Celular: barra e gaveta sobre a barra de baixo. ── */
.slip,.betbar{--c-bg:#F0F0F0;--c-card:#FFFFFF;--c-borda:#DCDCDC;--c-linha:#ECECEC;--c-verde:#2E7F66;--c-verde-tx:#26705A;--c-link:#27D8A1;--c-ink:#1E1E1E;--c-ink2:#333333;
  --c-ink3:#555555;--c-caixa:#8F8F8F;--c-erro:#C62828;--c-msg:#B3122F;--c-botao:linear-gradient(90deg,#63F2BF,#AEF4A4);--c-botao-ink:#16382B;
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
.slip{position:fixed;left:0;right:0;bottom:calc(62px + var(--sb));z-index:60;display:flex;flex-direction:column;max-height:calc(100% - 96px - var(--sb));background:#F0F0F0;color:#1E1E1E;border-radius:10px 10px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);transform:translateY(calc(100% + 80px));transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.slip.open{transform:none;visibility:visible}
.slip.empty:not(.open){box-shadow:none}
.cp-veu{position:fixed;inset:0;z-index:55;background:rgba(3,5,12,.6)}
.cp-veu[hidden]{display:none}
.slip button{color:inherit}
.slip .sh{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"cnt t sal" "cnt l2 l2" "cnt l3 l3";column-gap:12px;align-items:start;padding:14px 16px 10px;min-height:111px;border-bottom:1px solid #DCDCDC;background:#F0F0F0;border-radius:10px 10px 0 0;flex:none}
.slip .sh.so-titulo{min-height:0;border-bottom:0;grid-template-areas:"cnt t sal"}
.slip .sh .cnt{grid-area:cnt;width:28px;height:28px;margin-top:2px;border-radius:50%;background:#2E7F66;color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center}
.slip .sh .t{grid-area:t;display:block;font-size:18px;line-height:23px;font-weight:700;color:#1E1E1E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip .sh .sal{grid-area:sal;text-align:right;line-height:15px;margin:0;padding-right:92px;white-space:nowrap}
.slip .sh .sal small{display:block;font-size:12px;color:#555}
.slip .sh .sal b{display:block;margin-top:2px;font-size:13px;font-weight:700;color:#1E1E1E}
.slip .sh .l2{grid-area:l2;display:flex;align-items:center;gap:16px;margin-top:2px;height:20px}
/* revisão 21/10: o verde da referência (#2E7F66 4,2:1 · #1F9E78 3,0:1 no #F0F0F0) não passa o AA em 12–13 px — texto pequeno
   do cabeçalho usa --c-verde-tx (5,2:1). Alvos de 44 pela área do ::after, sem mudar o desenho. */
.slip .sh .comp{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--c-verde-tx);height:20px;white-space:nowrap}
.slip .sh .comp::after,.slip .sh .limpa::after,.slip .acob::after{content:"";position:absolute;inset:-13px -6px}
.slip .sh .comp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.slip .sh .limpa{position:relative;height:20px;font-size:13px;font-weight:400;color:#555;display:inline-flex;align-items:center;white-space:nowrap}
.slip .sh .limpa.arm{color:#C62828;font-weight:700}
.slip .sh .l3{grid-area:l3;display:flex;align-items:center;gap:6px;margin-top:6px}
.slip .sh .aco{font-size:12px;line-height:18px;color:#555}
.slip .acob{position:relative;font-size:12px;line-height:18px;font-weight:400;color:var(--c-verde-tx);white-space:nowrap}
.slip .fechar{position:absolute;top:14px;width:32px;height:32px;display:grid;place-items:center;color:#444}
.slip .fechar::after{content:"";position:absolute;inset:-6px}
.slip .fechar.min{right:60px}
.slip .fechar.fxx{right:16px}
.slip .fechar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbody{padding:12px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.cardsel{background:#fff;border-radius:3px}
.slip .sel{display:grid;grid-template-columns:16px minmax(0,1fr) auto 92px;grid-template-areas:"rm info ov st" "err err err err";column-gap:12px;align-items:start;padding:14px 16px;border-bottom:1px solid #ECECEC;min-height:94px}
.slip .sel .rm{grid-area:rm;width:16px;height:16px;margin-top:2px;color:#555;display:grid;place-items:center;position:relative}
.slip .sel .rm::after{content:"";position:absolute;inset:-14px}
.slip .sel .rm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.slip .sel .info{grid-area:info;min-width:0}
.slip .sel .pk{font-size:16px;line-height:20px;font-weight:700;color:#2E7F66;overflow-wrap:anywhere}
.slip .sel .mt{margin-top:2px;font-size:14px;line-height:21px;font-weight:600;color:#333}
.slip .sel .evn{margin-top:2px;font-size:13px;line-height:19.5px;color:#555}
.slip .sel .tg{display:inline-block;margin-right:6px;font-size:11px;font-weight:700;color:#C62828;text-transform:uppercase;letter-spacing:.03em}
.slip .sel .ov{grid-area:ov;font-size:16px;line-height:16px;font-weight:700;color:#1E1E1E;white-space:nowrap}
.slip .sel .ov .old{display:block;margin-top:4px;color:#777;font-size:12px;font-weight:400;text-decoration:line-through}
.slip .sel .stake{grid-area:st}
.slip .sel .verr{grid-area:err;margin:6px 0 0 28px;font-size:12px;color:#B3122F}
/* (r123) Criar Aposta cotando: barra carregando antes da frase "Calculando cotação…" (parada com movimento reduzido) */
.slip .fca.carrega{display:flex;align-items:center;gap:8px;color:#555}
.slip .fca .barra{position:relative;flex:none;width:44px;height:4px;border-radius:2px;background:#E3E3E3;overflow:hidden}
.slip .fca .barra i{position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:2px;background:#2E7F66;animation:cp-barra 1.1s ease-in-out infinite}
@keyframes cp-barra{to{left:100%}}
@media (prefers-reduced-motion:reduce){.slip .fca .barra i{animation:none;left:0;width:100%;opacity:.55}}
/* (r122) seleção de jogo que já começou: suspensa (sem valor), como a bet365 */
.slip .sel.comecou .pk{color:#777}
.slip .sel.comecou .ov .cad{color:#999;font-weight:400}
/* crítica C5: "Mesmo jogo" numa linha própria abaixo do mercado (antes ia colado ao palpite com um "·" pendurado) */
.slip .sel .cf{margin-top:2px;font-size:12px;line-height:18px;font-weight:400;color:#B3122F}
.slip .pernas{margin:6px 0 0;padding:0}
.slip .pernas li{position:relative;padding-left:14px;font-size:13px;line-height:19px;color:#333}
.slip .pernas li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:#2E7F66}
/* Criar Aposta montado no cupom (dono 23/10, itens 4 e 10): o cartão `.bb` da V1 — título verde e o jogo embaixo, odd à
   direita, caixa do valor só com odd; uma perna por linha (mercado pequeno em cima, seleção em negrito), Regra e X de 20 px
   (alvo de 44 pela área do ::after). Recusa do servidor em #B3122F (o mesmo da mensagem do rodapé). */
.slip .sel.ca{grid-template-areas:"rm info ov st" "rm pl pl pl" "rm err err err";row-gap:2px}
.slip .sel.ca .pk{font-size:16px;line-height:20px}
.slip .sel.ca .evn{margin-top:0;font-size:13px;line-height:20px}
.slip .sel.ca .ov{min-width:44px;text-align:right}
.slip .sel.ca .ca-cot,.slip .sel.ca .ca-sem{font-size:13px;font-weight:400;color:#555}
.slip .sel.ca .pernas{grid-area:pl;margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.slip .sel.ca .pernas li{display:flex;align-items:flex-start;gap:8px;padding-left:14px}
.slip .sel.ca .ca-pn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.slip .sel.ca .ca-pn small{font-size:12px;line-height:16px;color:#555;overflow-wrap:anywhere}
.slip .sel.ca .ca-pn b{font-size:13px;line-height:18px;font-weight:600;color:#333;overflow-wrap:anywhere}
.slip .sel.ca .rmp{position:relative;flex:none;width:20px;height:20px;margin-top:6px;display:grid;place-items:center;color:#555}
.slip .sel.ca .rmp::after{content:"";position:absolute;inset:-12px}
.slip .sel.ca .rmp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.slip .sel.ca .rmp:focus-visible{outline:2px solid #2E7F66;outline-offset:2px}
.slip .sel.ca .ca-m{grid-area:err;margin:6px 0 0;font-size:12px;line-height:18px;color:#555}
.slip .sel.ca .ca-m.err{color:#B3122F}
.slip .foot .fca{margin:0;padding:6px 12px 0;font-size:12px;line-height:17px;color:#B3122F}
.slip .stake{width:92px;height:40px;border-radius:2px;background:#fff;border:1px solid #8F8F8F;padding:0 8px;display:flex;align-items:center}
.slip .stake input{width:100%;border:0;outline:0;background:none;text-align:right;font:600 15px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#1E1E1E;padding:0}
.slip .stake input::placeholder{color:#1E1E1E;font-weight:600;opacity:1}
.slip .stake:focus-within{border-color:#2E7F66;box-shadow:inset 0 0 0 1px #2E7F66}
.slip .stake.err{border-color:#C62828;box-shadow:inset 0 0 0 1px #C62828}
.slip .mult{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;grid-template-areas:"nm odd st" "nt nt nt";column-gap:12px;align-items:center;padding:18px 16px 0}
.slip .mult .nm{grid-area:nm;font-size:17px;line-height:26px;font-weight:700;color:#2E7F66}
.slip .mult .oddp{grid-area:odd;font-size:16px;font-weight:700;color:#1E1E1E;white-space:nowrap}
.slip .mult .stake{grid-area:st}
.slip .mult .nt{grid-area:nt;margin-top:6px;font-size:12px;color:#555}
/* múltipla indisponível: aviso neutro em tinta (verde é a cor de "deu certo") */
.slip .mult.off{padding-bottom:4px}
.slip .mult.off .nm{color:#1E1E1E;font-size:15px;line-height:22px}
.slip .retl{display:grid;justify-items:end;padding:15px 16px;text-align:right}
.slip .retl span{font-size:13px;line-height:18px;color:#333}
.slip .retl b{font-size:14px;line-height:18px;font-weight:700;color:#1E1E1E}
.slip .retl.zero b{color:#555}
/* vazio: cabeçalho + uma linha (o cupom aberto vazio fica com ~80 px) */
.slip .sbody.vz-b{padding:0 16px 14px 56px;flex:none}
.slip .vz-l{margin:0;font-size:13px;line-height:18px;color:#555}
.slip .recibo{padding:20px 16px;display:grid;gap:8px;text-align:center}
.slip .recibo b{font-size:18px;color:#2E7F66}
.slip .recibo small{font-size:13px;color:#555}
.slip .recibo .ref{font-size:13px;color:#1E1E1E;font-weight:700}
.slip .recibo button{justify-self:center;height:40px;padding:0 18px;border-radius:3px;border:1px solid #2E7F66;color:#2E7F66;font-weight:700;font-size:14px}
.slip .foot{background:#F0F0F0;flex:none}
.slip .fmsg{margin:0;padding:6px 12px 8px;color:#B3122F;font-size:12px}
.slip .fmsg:empty{display:none}
.slip .go{width:100%;height:71px;padding:12px 0;border-radius:0;background:linear-gradient(90deg,#63F2BF,#AEF4A4);color:#16382B;display:grid;justify-items:center;align-content:start;font-weight:700}
.slip .go b{font-size:19px;line-height:29px;font-weight:700}
.slip .go small{font-size:12px;line-height:18px;font-weight:600;color:#16382B}
.slip .go:disabled{background:#DCDCDC;color:#8A8A8A;cursor:default}
.slip .go:disabled small{color:#8A8A8A}
/* barra recolhida */
.betbar{position:fixed;left:0;right:0;bottom:calc(62px + var(--sb));z-index:50;display:grid;grid-template-rows:auto 58px;background:#282828;border-radius:8px 8px 0 0;color:#fff;box-shadow:0 -8px 24px rgba(0,0,0,.45);text-align:left;cursor:pointer;animation:cp-sobe .35s cubic-bezier(.2,.8,.2,1)}
.betbar[hidden]{display:none}
@keyframes cp-sobe{from{transform:translateY(100%)}to{transform:none}}
.betbar .bb1{display:grid;grid-template-columns:16px minmax(0,1fr) auto 18px;grid-template-areas:"x t od ch" "x s od ch";align-items:center;column-gap:12px;row-gap:1px;padding:12px 16px 8px}
.betbar button{font:inherit;text-align:inherit}
.betbar .bb1 .x{grid-area:x;width:16px;height:16px;color:#8E8E8E;display:grid;place-items:center;align-self:start;margin-top:3px;position:relative}
.betbar .bb1 .x::after{content:"";position:absolute;inset:-14px}
.betbar svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.betbar .bb1 .x svg{width:16px;height:16px}
.betbar .bb1 b{grid-area:t;font-size:16px;line-height:20px;font-weight:700;color:#fff}
.betbar .bb1 small{grid-area:s;font-size:13px;line-height:20px;font-weight:700;color:#27D8A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.betbar .bb1 .od{grid-area:od;font-size:16px;line-height:20px;font-weight:700;color:#fff;align-self:start}
.betbar .bb1 .ch{grid-area:ch;color:#A8A8A8;display:grid;place-items:center;align-self:start;margin-top:2px}
.betbar .bb1 .ch svg{width:18px;height:18px}
.betbar .bb2{display:grid;grid-template-columns:minmax(0,1fr) auto 150px;align-items:stretch}
.betbar .bb2 .ap{padding:8px 16px;display:grid;align-content:center;gap:2px}
.betbar .bb2 .ap small{font-size:12px;line-height:14px;color:rgba(255,255,255,.7)}
.betbar .bb2 .ap b{font-size:19px;line-height:24px;font-weight:700;color:#27D8A1}
.betbar .lem{display:grid;justify-items:center;align-content:center;gap:4px;padding:0 14px;font-size:11px;line-height:17px;color:rgba(255,255,255,.62)}
.betbar .lem i{width:34px;height:18px;border-radius:9px;background:#4A4A4A;position:relative;display:block;transition:background .2s}
.betbar .lem i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.betbar .lem[aria-checked="true"] i{background:#27D8A1}
.betbar .lem[aria-checked="true"] i::after{transform:translateX(16px)}
.betbar .bb2 .r{height:58px;padding:8px 10px;background:linear-gradient(90deg,#63F2BF,#AEF4A4);color:#16382B;display:grid;justify-items:center;align-content:center}
.betbar .bb2 .r b{font-size:15px;line-height:18px;font-weight:700}
.betbar .bb2 .r small{font-size:11px;line-height:14px;font-weight:600;white-space:nowrap}
@media (max-width:420px){
  .slip .sh .t{font-size:17px}
  .slip .sh .sal{padding-right:72px}
  .slip .fechar{width:28px;height:28px;top:13px}
  .slip .fechar::after{inset:-8px}
  .slip .fechar.min{right:52px}
  .slip .fechar.fxx{right:8px}
}
@media (max-width:374px){.slip .sh .sal{visibility:hidden;width:0;padding-right:72px}}
/* computador: igual ao Clássico — 440 px no pé da tela, ao centro; o cupom sobe da barra */
@media (min-width:901px){
  .slip{left:50%;right:auto;bottom:0;width:440px;max-height:calc(100vh - 110px);border-radius:8px 8px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.55);transform:translate(-50%,calc(100% + 40px))}
  .slip.open{transform:translate(-50%,0)}
  .slip .sh{border-radius:8px 8px 0 0}
  .betbar{left:50%;right:auto;bottom:0;width:440px;transform:translateX(-50%);animation:cp-sobe-c .35s cubic-bezier(.2,.8,.2,1)}
  .betbar .bb2{grid-template-columns:minmax(0,1fr) auto 190px}
  .cp-veu{display:none!important}
  @keyframes cp-sobe-c{from{transform:translate(-50%,100%)}to{transform:translateX(-50%)}}
}
/* tema claro: o cupom aberto (#F0F0F0) ganha um filete para não sumir no chão claro */
html[data-theme="claro"] .slip{box-shadow:0 10px 40px rgba(0,0,0,.22),0 0 0 1px var(--fil)}
@media (prefers-reduced-motion:reduce){.slip,.betbar{transition:none;animation:none}}