/*
 * "As minhas previsões" (/previsoes/minhas), pranchas MP1 a MP7 aprovadas pelo dono em 29/09/2026.
 * O dinheiro das Previsões é o saldo em dólar: azul. Ganho em verde-claro, perda em rosado; o verde
 * forte continua só para os botões. Quem desenha é public/js/novo/previsoes-minhas.js.
 */
.np-minhas .np-lado { display: none; }
.np-minhas .np-corpo { grid-template-columns: minmax(0, 1fr); }

.mp-pagina { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* A folha de vender mora fora da página (no body): leva as mesmas cores e os botões. */
.mp-folha-raiz { --np-verde: var(--nv-verde, #00ff88); --np-linha: var(--nv-linha, #2a3037); --np-linha-2: var(--nv-linha-2, #3a424b);
    --np-fundo-2: var(--nv-fundo-2, #15181c); color: #fff; }
.mp-folha-raiz .azul { color: #8cc8ff; }
.mp-folha-raiz .ganho { color: #4ade80; }
.mp-folha-raiz .perda { color: #ff9a9a; }
.mp-folha-raiz .zero { color: #b9bec5; }
.mp-pagina .azul { color: #8cc8ff; }
.mp-pagina .ganho { color: #4ade80; }
.mp-pagina .perda { color: #ff9a9a; }
.mp-pagina .zero { color: #b9bec5; }
.mp-pagina .apagado { color: #8b929b; }
.mp-el { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mp-espaco { flex: 1; }
.mp-fraco { color: #8b929b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mp-rot { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b929b; }
.mp-sub { font-size: 11.5px; font-weight: 600; color: #8b929b; white-space: nowrap; }
.mp-sub.pequena { font-size: 10.5px; }
.mp-num { font-weight: 900; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-num.m { font-size: 15px; }
.mp-num.g { font-size: 19px; }
.mp-grande { font-size: 36px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-enorme { font-size: 46px; font-weight: 900; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-pilha { display: grid; gap: 3px; min-width: 0; }
/* O número do boletim e o "Preciso de ajuda" de cada previsão (01/10/2026). */
.mp-boletim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mp-boletim .bol-selo { min-height: 30px; font-size: 12px; }
.mp-boletim .bol-ajuda { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.mp-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #b9bec5; }
.mp-linha b { color: #fff; }
.mp-card { background: #1b1f24; border: 1px solid #2a3037; border-radius: 16px; overflow: hidden; min-width: 0; }

/* O topo: onde está, o título, as abas e a ordem. */
.mp-trilha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #8b929b; }
.mp-trilha a { color: inherit; text-decoration: none; }
.mp-trilha a:hover { color: #d5d9de; }
.mp-trilha b { color: #d5d9de; }
.mp-titulo { display: flex; align-items: center; gap: 14px; min-height: 44px; flex-wrap: wrap; }
.mp-titulo h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.mp-abas { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: #15181c; border: 1px solid #2a3037; }
.mp-abas button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #b9bec5; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.mp-abas button b { color: #737a83; margin-left: 4px; }
.mp-abas button.on { background: #232930; color: #fff; }
.mp-abas button.on b { color: #b9bec5; }
.mp-ordem select { height: 36px; padding: 0 30px 0 12px; border-radius: 999px; border: 1px solid #2a3037; background: #15181c; color: #d5d9de; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* O resumo (MP1): três números, os acertos, onde está o dinheiro e os 7 dias. */
.mp-resumo { display: grid; grid-template-columns: minmax(0, 1fr) 470px; }
.mp-resumo-esq { display: grid; grid-template-rows: auto auto; border-right: 1px solid #2a3037; min-width: 0; }
.mp-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 200px; }
.mp-numeros > div { padding: 16px 18px; display: grid; gap: 6px; align-content: center; border-right: 1px solid #2a3037; min-width: 0; }
.mp-numeros > div.mp-lateral { border-right: 0; gap: 10px; }
.mp-acertos { display: flex; align-items: center; gap: 10px; }
.mp-acertos > span { display: grid; gap: 2px; min-width: 0; }
.mp-acertos .mp-sub { white-space: normal; line-height: 1.35; }
.mp-onde { padding: 14px 22px; display: grid; gap: 10px; border-top: 1px solid #2a3037; }
.mp-onde-barra { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; }
.mp-onde-barra i { display: block; height: 100%; }
.mp-onde-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; color: #b9bec5; }
.mp-onde-legenda > span { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; min-width: 0; }
.mp-onde-legenda i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.mp-onde-legenda b { color: #fff; }
.mp-7d { padding: 16px 20px 14px; display: grid; gap: 8px; align-content: start; background: #171b1f; min-width: 0; }
.mp-7d-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-7d-desenho { position: relative; min-height: 64px; }
.mp-7d-desenho svg { display: block; overflow: visible; font-family: Inter, system-ui, sans-serif; }
.mp-7d-vazio { display: block; padding: 20px 0; white-space: normal; }
.mp-7d-desde { position: absolute; top: 0; right: 0; }
.mp-legenda { display: flex; gap: 14px; font-size: 11px; font-weight: 700; color: #8b929b; }
.mp-legenda > span { display: inline-flex; align-items: center; gap: 5px; }
.mp-legenda i.valor { width: 14px; height: 3px; border-radius: 2px; background: #8cc8ff; }
.mp-legenda i.jogo { width: 14px; height: 0; border-top: 2px dashed #8b929b; }
.mp-anel { display: block; flex: none; font-family: Inter, system-ui, sans-serif; }

/* As faixas: a confirmar, não entrou, vendida, sem ligação. */
.mp-faixa, .mp-aviso { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.mp-faixa.conf, .mp-aviso.conf { background: rgba(77, 171, 247, .08); border: 1px solid #1f4a6b; }
.mp-faixa.nao { background: rgba(255, 154, 154, .07); border: 1px solid rgba(255, 154, 154, .3); }
.mp-faixa svg, .mp-aviso svg { flex: none; }
.mp-aviso.certo { background: rgba(0, 255, 136, .07); border: 1px solid rgba(0, 255, 136, .32); color: #d5f7e6; }
.mp-aviso.certo svg { color: #00ff88; }
.mp-aviso.rede, .mp-aviso.amarelo { background: rgba(255, 212, 59, .07); border: 1px solid rgba(255, 212, 59, .3); color: #f3e6b0; }
.mp-aviso.erro { background: rgba(255, 90, 90, .08); border: 1px solid rgba(255, 90, 90, .35); color: #ffc9c9; }
.mp-aviso.neutro { background: #15181c; border: 1px solid #2a3037; color: #b9bec5; font-size: 12px; }
.mp-roda { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(140, 200, 255, .3); border-top-color: #8cc8ff; flex: none; animation: mp-girar .9s linear infinite; }
.mp-roda.pequena { width: 11px; height: 11px; }
@keyframes mp-girar { to { transform: rotate(360deg); } }

/* A tabela das abertas (MP1). */
.mp-cab, .mp-lin { display: grid; grid-template-columns: minmax(0, 1fr) 124px 180px 150px 116px 104px 92px 100px; gap: 14px; align-items: center; padding: 0 18px; }
.mp-cab { height: 34px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #737a83; text-transform: uppercase; }
.mp-lin { min-height: 84px; border-top: 1px solid #2a3037; }
.mp-lin > span { display: grid; gap: 3px; min-width: 0; }
.mp-lin > span.mp-prev { display: flex; align-items: center; gap: 9px; }
.mp-lin > span > .mp-est { justify-self: start; }
.mp-lin .mp-el { font-size: 14px; }
.mp-lin .mp-acao { justify-items: end; }
.mp-cab.enc, .mp-lin.enc { grid-template-columns: minmax(0, 1fr) 150px 110px 150px 110px; }
.mp-grupo { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; background: #171b1f; border-top: 1px solid #2a3037; }
.mp-grupo b { font-size: 14.5px; }
.mp-ver { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: #b9bec5; text-decoration: none; white-space: nowrap; }
.mp-ver:hover { color: #fff; }
.mp-chance { gap: 2px !important; }
.mp-chance-desenho svg { display: block; overflow: visible; font-family: Inter, system-ui, sans-serif; }
.mp-vender { height: 36px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.mp-vender[disabled] { opacity: .45; cursor: default; }
.mp-prazo-txt { font-size: 13.5px; }
.mp-nota { margin: 0; font-size: 11.5px; font-weight: 600; color: #8b929b; }
.mp-pisca { animation: mp-pisca 1.2s ease-out 1; }
@keyframes mp-pisca { 0% { background: rgba(140, 200, 255, .22); } 100% { background: transparent; } }

/* As etiquetas. */
.mp-lado { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: .02em; flex: none; text-transform: uppercase; }
.mp-lado.sim { background: rgba(0, 255, 136, .13); color: #00ff88; }
.mp-lado.nao { background: rgba(255, 138, 106, .14); color: #ff9f85; }
.mp-lado.nomeado { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.mp-lado.nao.nomeado { background: rgba(77, 171, 247, .14); color: #8cc8ff; }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-est { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.mp-est.pausa { background: rgba(255, 181, 71, .15); color: #ffc266; }
.mp-est.espera { background: #232930; color: #b9bec5; }
.mp-est.parte, .mp-est.conf { background: rgba(77, 171, 247, .14); color: #8cc8ff; }
.mp-est.ganhou { background: rgba(74, 222, 128, .14); color: #4ade80; }
.mp-est.perdeu { background: rgba(255, 154, 154, .12); color: #ff9a9a; }
.mp-est.neutro { background: #232930; color: #d5d9de; }
.mp-prazo { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255, 212, 59, .12); color: #ffd43b; font-size: 11.5px; font-weight: 800; white-space: nowrap; flex: none; }
.mp-prazo.longe { background: #232930; color: #b9bec5; }

/* Os estados da página (MP4): carregando, vazia, com erro. */
.mp-carregando { display: grid; gap: 10px; padding: 22px; justify-items: start; }
.mp-fantasma { display: block; max-width: 100%; border-radius: 8px; background: linear-gradient(90deg, #1b1f24, #232930, #1b1f24); background-size: 200% 100%; animation: mp-brilho 1.4s linear infinite; }
@keyframes mp-brilho { to { background-position: -200% 0; } }
.mp-estado { display: grid; justify-items: center; align-content: center; gap: 12px; padding: 40px 20px; text-align: center; }
.mp-estado svg { color: #8b929b; }
.mp-estado b { font-size: 16px; }
.mp-estado span { font-size: 13px; line-height: 1.5; color: #b9bec5; max-width: 360px; }

/* As encerradas (MP2): os 30 dias e a lista por dia. */
.mp-30d { padding: 14px 18px; display: grid; gap: 10px; }
.mp-30d-topo { display: flex; align-items: center; gap: 12px; }
.mp-30d .mp-grande { font-size: 30px; }
.mp-barras { display: block; width: 100%; height: 64px; }
.mp-dia { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b929b; margin-bottom: -8px; }
.mp-mais { align-self: center; }
.mp-cc-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #b9bec5; }
.mp-cc-linha b { color: #fff; }

/* O celular (MP2): um cartão por previsão. */
.mp-grupo-cel { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.mp-grupo-cel b { font-size: 13.5px; }
.mp-cc { background: #1b1f24; border: 1px solid #2a3037; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-cc-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mp-cc-topo b { font-size: 14px; }
.mp-cc-perg { font-size: 12.5px; line-height: 1.4; color: #b9bec5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-cc-valor { display: flex; align-items: flex-end; gap: 10px; }
.mp-cc-valor > span:first-child { display: grid; gap: 2px; }
.mp-cc-valor .mp-grande { font-size: 32px; }
.mp-var { display: grid; gap: 1px; padding-bottom: 3px; }
.mp-cc-chance { display: grid; gap: 3px; }
.mp-porque { font-size: 11.5px; line-height: 1.35; color: #b9bec5; }
.mp-porque.pausa { color: #ffc266; }
.mp-cc-botoes { display: flex; gap: 8px; }
.mp-cc-botoes > * { flex: 1; height: 38px; justify-content: center; }
.mp-ver-cel { display: inline-flex; align-items: center; justify-content: center; background: transparent; text-decoration: none; }
.mp-resumo.cel { display: grid; gap: 8px; padding: 14px; grid-template-columns: minmax(0, 1fr); }
.mp-resumo-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mp-resumo-topo > span:first-child { display: grid; gap: 3px; }
.mp-resumo.cel .mp-grande { font-size: 40px; }
.mp-resumo-topo .mp-var { text-align: right; padding-bottom: 4px; }
.mp-enc-cel { display: grid; gap: 6px; padding: 11px 12px; border-top: 1px solid #2a3037; }
.mp-enc-cel:first-child { border-top: 0; }
.mp-perg-enc { font-size: 13px; font-weight: 700; flex: 1; }

/* Vender (MP3): a folha. No computador, uma janela no meio; no celular, sobe de baixo. */
body.mp-com-folha { overflow: hidden; }
.mp-folha-raiz { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.mp-folha-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.mp-folha { position: relative; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; background: #16191d; border: 1px solid #2f363e; border-radius: 22px; display: flex; flex-direction: column; }
.mp-folha-pega { display: none; width: 44px; height: 5px; border-radius: 3px; background: #3a424b; align-self: center; margin: 10px 0 4px; }
.mp-folha header { display: flex; align-items: center; min-height: 52px; padding: 0 16px; }
.mp-folha header b { font-size: 17px; flex: 1; }
.mp-fechar { border: 0; background: transparent; color: #8b929b; cursor: pointer; padding: 6px; border-radius: 8px; }
.mp-fechar:hover { color: #fff; background: #232930; }
.mp-folha-corpo { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mp-folha-prev { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #1b1f24; border: 1px solid #2a3037; min-width: 0; }
.mp-folha-prev b { font-size: 13.5px; }
.mp-folha-bloco { display: grid; gap: 7px; }
.mp-partes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mp-chip { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; border: 1px solid #2a3037; background: #15181c; font: inherit; font-size: 14px; font-weight: 800; color: #b9bec5; cursor: pointer; }
.mp-chip.on { border-color: #00ff88; background: rgba(0, 255, 136, .1); color: #fff; }
.mp-divisao { display: grid; gap: 6px; }
.mp-divisao-barra { display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; }
.mp-divisao-barra i { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11px; font-weight: 900; font-style: normal; white-space: nowrap; }
.mp-divisao-barra i.vende { background: #4dabf7; color: #0e1013; }
.mp-divisao-barra i.fica { flex: 1; background: #232930; color: #b9bec5; }
.mp-recebe { display: grid; justify-items: center; gap: 4px; padding: 2px 0; text-align: center; }
.mp-recebe-var { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.mp-folha-linhas { border-radius: 12px; background: #1b1f24; border: 1px solid #2a3037; display: grid; }
.mp-folha-linhas .mp-cc-linha { padding: 10px 14px; font-size: 12.5px; }
.mp-folha-linhas .mp-cc-linha + .mp-cc-linha { border-top: 1px solid #2a3037; }
.mp-folha-botao { height: 50px; font-size: 15px; width: 100%; justify-content: center; }

@media (max-width: 1180px) {
    .mp-resumo { grid-template-columns: minmax(0, 1fr); }
    .mp-resumo-esq { border-right: 0; border-bottom: 1px solid #2a3037; }
    .mp-cab, .mp-lin { grid-template-columns: minmax(0, 1fr) 110px 150px 130px 100px 96px 80px 96px; gap: 10px; }
}
@media (max-width: 760px) {
    .mp-titulo h1 { font-size: 20px; }
    .mp-titulo { gap: 8px; }
    .mp-abas button { height: 30px; padding: 0 10px; font-size: 12.5px; }
    .mp-ordem { width: 100%; }
    .mp-ordem select { width: 100%; }
    .mp-pagina { gap: 10px; }
    .mp-trilha { display: none; }
    .mp-folha-raiz { align-items: flex-end; }
    .mp-folha { width: 100%; max-height: calc(100vh - 54px); border-radius: 22px 22px 0 0; border-bottom: 0; }
    .mp-folha-pega { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-roda, .mp-fantasma, .mp-pisca { animation: none; }
}

/* MP8: "Desde que entrou" (a chance mexendo) separado da diferença de compra e venda (a margem, cinza). */
.mp-margem-pc { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.mp-margem-pc svg { color: #737a83; }
.mp-quebra { white-space: normal; line-height: 1.35; }
.mp-dupla { display: grid; gap: 5px; padding: 9px 11px; border-radius: 10px; background: #15181c; border: 1px solid #2a3037; }
.mp-dupla .mp-cc-linha { font-size: 12.5px; }
.mp-dupla b i { font-style: normal; font-weight: 700; font-size: 11.5px; }
.mp-dupla .zero, .mp-pagina .mp-dupla .zero { color: #b9bec5; }
.mp-margem summary { list-style: none; cursor: pointer; }
.mp-margem summary::-webkit-details-marker { display: none; }
.mp-margem summary .mp-fraco { display: inline-flex; align-items: center; gap: 5px; }
.mp-margem summary svg { color: #737a83; }
.mp-margem[open] > .mp-sub { display: block; margin-top: 6px; white-space: normal; line-height: 1.4; }
.mp-resumo.cel .mp-linha { flex-wrap: wrap; row-gap: 4px; }
.mp-resumo.cel .mp-linha > span { white-space: nowrap; }