* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0; background: #f4f6fb; color: #1f2937;
}
a { color: #2563eb; }
/* Largura útil do sistema. Travava em 1000px, de quando monitor de 1280 era o normal —
   sobrava meia tela vazia dos dois lados. Agora usa a tela toda, com o respiro das laterais
   entrando só a partir de 1500px: é de onde em diante há folga para devolver. Abaixo disso
   (notebook, tablet, celular) 90vw apenas encolheria o conteúdo e custaria uma coluna de
   cartões — a tela já está sendo aproveitada inteira. */
.container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1500px) { .container { max-width: 90vw; } }

/* Cabeçalho */
.topo {
    background: #1d4ed8; color: #fff; padding: 16px 0;
}
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo h1 { margin: 0; font-size: 20px; }
.topo a { color: #dbeafe; text-decoration: none; font-size: 14px; }
.topo a:hover { color: #fff; }

/* Seletor de casa lotérica (quem tem mais de uma no mesmo login) */
.topo-loja { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.troca-loja { margin: 0; display: flex; align-items: center; gap: 6px; }
.troca-loja select {
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45);
    border-radius: 8px; padding: 5px 8px; font-size: 14px; font-weight: 600; max-width: 240px; cursor: pointer;
}
.troca-loja select option { color: #111827; background: #fff; }

/* Cabeçalho "perfil da lotérica" (vitrine e demais páginas públicas).
   Faixa CLARA de propósito: a marca da casa é quase sempre uma placa colorida — e placa
   colorida sobre faixa colorida some. Vale a regra da fachada: letreiro colorido, parede
   clara. Assim a cor que o cliente vê no topo é a da lotérica, não a do sistema. */
.topo-perfil { background: #fff; padding: 12px 0;
    border-bottom: 1px solid #e4e9f2; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.topo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.topo-perfil .topo-marca { display: flex; align-items: center; gap: 12px; text-decoration: none;
    color: #1e3a8a; font-size: inherit; min-width: 0; }

/* Marca sozinha — a que o sistema gera já traz o nome desenhado dentro (ver logo_topo).
   Entra grande e sem caixa em volta: a placa já tem fundo e canto arredondado próprios,
   e outro retângulo por fora só criaria duas bordas concorrentes. */
.topo-marca-img { display: block; width: auto; height: 54px; max-width: 100%; }

/* Seção em que o visitante está ("Bolões", "Resultados") — é o que o subtítulo dizia
   antes de a marca passar a ocupar sozinha o lugar do nome. */
.topo-secao { margin-right: auto; font-size: 13px; font-weight: 700; color: #1e3a8a;
    background: #eef3ff; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }

/* Reserva: arte enviada pelo lotérico (não dá para saber se tem o nome) ou casa sem
   logo. Quadro claro + nome escrito ao lado. */
.topo-logo { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px; overflow: hidden;
    background: #f7f9fc; border: 1px solid #e4e9f2; display: flex; align-items: center;
    justify-content: center; padding: 4px; }
.topo-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topo-logo-emoji { font-size: 30px; line-height: 1; }
.topo-nome { display: flex; flex-direction: column; min-width: 0; font-size: 21px; font-weight: 800;
    line-height: 1.15; color: #101828; }
.topo-nome small { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; }

.topo-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.topo-perfil .topo-nav a { color: #1e3a8a; text-decoration: none; font-size: 14px; font-weight: 600;
    padding: 8px 13px; border-radius: 999px; white-space: nowrap; transition: background .15s, color .15s; }
.topo-perfil .topo-nav a:hover { background: #eef3ff; color: #1d4ed8; }
.topo-toggle { display: none; }

@media (max-width: 640px) {
    .topo-marca-img { height: 40px; }
    .topo-nome { font-size: 18px; }
    .topo-logo { width: 46px; height: 46px; border-radius: 11px; }
    .topo-logo-emoji { font-size: 24px; }
    .topo-secao { font-size: 12px; padding: 4px 9px; }
    .topo-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
        border-radius: 10px; color: #1e3a8a; font-size: 22px; cursor: pointer; background: #eef3ff;
        user-select: none; -webkit-tap-highlight-color: transparent; }
    .topo-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 3px; margin-top: 10px; }
    .topo-perfil .topo-nav a { padding: 12px 14px; border-radius: 10px; background: #f7f9fc; font-size: 15px; }
    .topo-toggle-cb:checked ~ .topo-nav { display: flex; }
}

/* Menu do painel com submenus */
.menu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.menu .grupo { position: relative; }
.menu .trigger, .menu > a.item {
    display: inline-block; padding: 8px 10px; border-radius: 8px; white-space: nowrap;
    color: #dbeafe; cursor: pointer; font-size: 14px; user-select: none;
}
.menu .trigger:hover, .menu > a.item:hover,
.menu .grupo:hover .trigger, .menu .grupo:focus-within .trigger { background: rgba(255,255,255,.16); color: #fff; }
.menu .caret { font-size: 9px; opacity: .75; margin-left: 4px; vertical-align: middle; }
.menu .sub {
    position: absolute; top: 100%; right: 0; min-width: 190px; margin-top: 4px;
    background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 6px; display: none; z-index: 50;
}
.menu .grupo:hover .sub, .menu .grupo:focus-within .sub { display: block; }
.menu .sub a { display: block; color: #1f2937; padding: 8px 10px; border-radius: 8px; font-size: 14px; white-space: nowrap; }
.menu .sub a:hover { background: #eff6ff; color: #1d4ed8; }
.menu .sub .sep { height: 1px; background: #e5e7eb; margin: 5px 4px; }
.menu .badge { background: #b91c1c; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; margin-left: 4px; }

/* Filtros de modalidade (vitrine) */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.chip {
    border: 1.5px solid #d1d5db; background: #fff; color: #374151;
    border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.chip:hover { border-color: #9ca3af; }
.chip.ativa { background: var(--c, #1d4ed8); color: var(--ct, #fff); border-color: var(--c, #1d4ed8); }
.chip.vazio:not(.ativa) { opacity: .45; }
.chip .chip-cnt { font-weight: 700; opacity: .8; }

/* Barra de filtros com rótulo por linha: agrupa os recortes num bloco só, em vez de
   deixar três fileiras soltas de chips sem dizer o que cada uma filtra. A ordem das
   linhas é a do afunilamento (situação → modalidade → concurso). */
.filtro-barra { border: 1px solid #e5e7eb; border-radius: 12px; background: #f8fafc;
    padding: 4px 14px; margin: 14px 0 16px; }
.filtro-linha { display: flex; align-items: center; gap: 12px; padding: 9px 0; flex-wrap: wrap; }
.filtro-linha + .filtro-linha { border-top: 1px dashed #e2e8f0; }
.filtro-rot { flex: 0 0 88px; font-size: 11px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .4px; }
.filtro-linha .filtros { flex: 1 1 auto; }
.filtro-dica { font-size: 13px; color: #9ca3af; font-style: italic; }
/* Combo com o "resto" de uma lista longa (ex.: concursos antigos), no formato do chip
   para não destoar da fileira ao lado. */
.chip-select { border: 1.5px solid #d1d5db; background: #fff; color: #374151;
    border-radius: 999px; padding: 6px 10px 6px 14px; font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all .15s; }
.chip-select:hover { border-color: #9ca3af; }
.chip-select.ativa { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
@media (max-width: 640px) { .filtro-rot { flex-basis: 100%; } }

/* Selo de modalidade no padrão da Caixa (cor da marca + texto de contraste) */
.mod-badge {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px; line-height: 1.5;
    text-transform: uppercase; vertical-align: middle;
}

/* Seções por modalidade (vitrine) — faixa de identidade da Caixa separando os grupos */
.mod-secao { margin-top: 34px; }
/* Cabeçalho de seção enxuto: título escuro com um filete na cor da modalidade
   (no lugar da faixa colorida chapada de largura total). */
.mod-titulo {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 2px 12px; border-bottom: 2px solid var(--c, #1d4ed8);
}
.mod-titulo .nome { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #0f172a; }
.mod-titulo .qtd { font-size: 13px; font-weight: 600; color: #94a3b8; margin-left: auto; }
.mod-secao .grid { margin-top: 14px; }

/* Abas de canal: "Aqui com a lotérica" × "Marketplace Caixa". Antes as duas divisões
   ficavam empilhadas e o cliente rolava por tudo — os lotéricos pediram destaque total
   para as cotas da própria casa, com a Caixa a um clique de distância. */
.abas-canal { display: flex; flex-wrap: nowrap; gap: 8px; margin: 22px 0 0; }
.aba {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 700;
    color: #64748b; background: #e9edf3; border: 1.5px solid #dfe4ea; border-bottom-color: transparent;
    border-radius: 12px 12px 0 0; padding: 11px 16px;
    transition: color .15s ease, background .15s ease;
}
/* Só a aba ATIVA avança sobre a borda do painel (é ela que se funde com o conteúdo).
   A inativa para em cima da linha, senão abre um vão na borda superior do painel. */
.aba[aria-selected="true"] { margin-bottom: -1.5px; }
.aba:hover { color: #0f172a; background: #eff2f7; }
.aba .ico { font-size: 17px; line-height: 1; flex: none; }
.aba .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aba .txt-curto { display: none; white-space: nowrap; }
/* Contador da aba inativa: precisa contrastar com o cinza recuado da própria aba
   (a aba ativa repinta este selo com a cor do canal, logo abaixo). */
.aba .n { flex: none; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
    background: #d6dde7; color: #4b5768; }
.aba[aria-selected="true"] { color: #065f46; background: #f8fafc; border-bottom-color: #f8fafc; }
.aba[aria-selected="true"] .n { background: #059669; color: #fff; }
.aba[data-canal="caixa"][aria-selected="true"] { color: #0c4a73; }
.aba[data-canal="caixa"][aria-selected="true"] .n { background: #0c4a73; color: #fff; }

/* Painel neutro: o fundo claro é só a moldura das duas divisões. O canal se identifica
   pela cor do texto e do contador — fundo colorido virava mancha atrás dos cartões. */
.aba-painel { border: 1.5px solid #dfe4ea; background: #f8fafc;
    border-radius: 0 0 14px 14px; padding: 18px; }
.aba-painel[hidden] { display: none; }
.aba-painel .mod-secao:first-of-type { margin-top: 20px; }
.painel-vazio { color: #475569; font-size: 14.5px; margin: 10px 0 2px; line-height: 1.5; max-width: 68ch; }

/* Chamada do canal, dentro do painel: sem caixa própria — o painel já dá o fundo. */
.canal-titulo { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 2px; }
.canal-titulo .ico { font-size: 24px; line-height: 1.15; flex: none; }
.canal-titulo .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.canal-titulo .tt { font-size: 16.5px; font-weight: 800; letter-spacing: .1px; }
.canal-titulo .tt .cnt { font-size: 13px; font-weight: 600; opacity: .7; }
.canal-titulo .sub { font-size: 13.5px; font-weight: 500; opacity: .9; max-width: 72ch; }
.canal-nosso .canal-titulo { color: #065f46; }
.canal-caixa .canal-titulo { color: #0c4a73; }

/* Cartões de bolão (vitrine) — Opção B "editorial": prêmio é o herói, tudo o mais
   monocromático e a cor da modalidade (--mod) entra como único acento. */
/* Piso de 300px por cartão: com a largura útil em 1600px isso dá 4 colunas folgadas
   (376px cada) em vez de 5 apertadas, onde o rodapé "Ver 5 jogos · Caixa · 7 cotas" quebrava
   em duas linhas. Em notebook (1366) continuam as mesmas 4 colunas de antes. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 20px 0 8px; }
.card { position: relative; background: #fff; border: 1px solid #eef1f0; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,32,26,.04), 0 6px 20px rgba(16,32,26,.06); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(16,32,26,.12); }

/* Maior aposta: card com contorno âmbar + selo discreto no canto superior direito
   (trevo de quatro folhas, símbolo da sorte). Vale para todas as modalidades. */
.card.destaque { outline: 2px solid #f59e0b; outline-offset: 0; box-shadow: 0 6px 20px rgba(245,158,11,.28); }
.badge-destaque { position: absolute; top: 10px; right: 10px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,.9); border: 1px solid rgba(120,90,10,.18);
    box-shadow: 0 1px 4px rgba(16,32,26,.12); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.badge-destaque .ico { font-size: 12px; line-height: 1; }
.badge-destaque .txt { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
/* Card com concurso especial: o selo desce para dentro do herói, sem cobrir a faixa do topo. */
.card.especial .badge-destaque { top: 40px; }

/* Concurso especial (Lotofácil da Independência, Mega da Virada…): faixa no topo do
   card, na cor da modalidade, para o cliente perceber de cara que é uma data especial. */
.card.especial { outline: 2px solid var(--mod, #930989); outline-offset: 0;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mod, #930989) 32%, transparent); }
.selo-especial { display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 12px; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-align: center;
    color: var(--mod-ct, #fff); background: var(--mod, #930989);
    background: linear-gradient(135deg, var(--mod, #930989), color-mix(in srgb, var(--mod, #930989) 72%, #000)); }
.selo-especial .ico { font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mj-tag-especial { background: color-mix(in srgb, var(--mod, #930989) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--mod, #930989) 35%, #fff); }
.mj-tag-especial .txt { color: color-mix(in srgb, var(--mod, #930989) 70%, #0b1a14); text-transform: none; }

/* Herói: prêmio estimado em número grande sobre um leve banho da cor da modalidade */
.card .hero { display: flex; flex-direction: column; padding: 18px 18px 14px; background: #f6faf8;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mod, #16a34a) 14%, #fff), #fff); }
.card .hero-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--mod, #16a34a); color: color-mix(in srgb, var(--mod, #16a34a) 62%, #0b1a14); }
.card .hero-val { font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.02;
    color: #0f172a; margin-top: 4px; }
.card .hero-cfg { font-size: 12.5px; font-weight: 600; color: #94a3b8; margin-top: 7px; }
/* Sem estimativa de prêmio, o nome da modalidade ocupa o lugar do número: assim a
   altura do card não varia e a grade não fica irregular. */
.card .hero-val-mod { font-size: 24px; }

/* Faixa de números: dezenas (ou partidas na Loteca / colunas no Super Sete) · jogos ·
   valor da cota. São os três dados que o cliente compara entre bolões — saem do texto
   corrido e viram números grandes; a cota, que é o que decide a compra, se destaca pela
   cor do número (sem preenchimento: caixa colorida dentro do cartão pesava). */
.card .specs { display: flex; background: #fafbfc;
    border-top: 1px solid #eef1f0; border-bottom: 1px solid #eef1f0; }
.card .spec { flex: 1 1 0; min-width: 0; padding: 11px 6px 10px; text-align: center;
    border-right: 1px solid #eef1f0; }
.card .spec:last-child { border-right: 0; flex-grow: 1.25; }
.card .spec b { display: block; font-size: 22px; font-weight: 800; line-height: 1;
    color: #0f172a; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.card .spec span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: #94a3b8; margin-top: 5px; }
.card .spec.cota b { color: #047857; font-size: 20px; }
.card .spec.cota span { color: #059669; }
.card .spec.cota s { display: block; font-size: 10.5px; font-weight: 600; color: #9ca3af; margin-bottom: 2px; }

.card .corpo { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.card h3 .cfg { font-size: 13px; font-weight: 600; color: #94a3b8; letter-spacing: 0; }
.card .meta { color: #64748b; font-size: 12.5px; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.card .idchip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
    color: #475569; background: #f1f5f9; border-radius: 6px; padding: 1px 6px; }
.card .preco { font-size: 13px; color: #64748b; }
.card .preco b { color: #0f172a; font-weight: 700; }
.card .preco s { color: #9ca3af; }
.card .preco .promo { color: #15803d; font-weight: 700; }
.card .preco small { color: #94a3b8; }

/* Valor da cota no modal de detalhes — logo abaixo do prêmio estimado */
/* Valor da cota: linha simples, sem caixa/borda (mesmo fundo do modal). */
.modal-jogos-cota { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 0; padding: 6px 2px; }
.modal-jogos-cota .rot { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.modal-jogos-cota .val { font-size: 18px; font-weight: 800; color: #0f172a; margin-left: auto; }
.modal-jogos-cota .det { font-size: 12px; color: #94a3b8; }
.modal-jogos-cota .promo { font-size: 12px; font-weight: 700; color: #15803d; }

/* Os dois caminhos de compra no modal: a nossa vitrine (Pix) e o Marketplace da Caixa.
   Cada um é um "cartão de opção" com título, legenda e o nº de cotas disponíveis. */
.modal-jogos-compra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.compra-op { flex: 1 1 230px; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 12px 14px; border-radius: 12px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
    font-family: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.compra-op:hover { transform: translateY(-2px); }
.compra-op .txt { display: flex; flex-direction: column; line-height: 1.25; }
.compra-op .txt b { font-size: 15px; font-weight: 800; }
.compra-op .txt small { font-size: 12px; opacity: .9; }
.compra-op .ico { font-size: 22px; flex: none; }

/* Nossa vitrine: chamada forte, Pix */
.compra-vitrine { background: linear-gradient(135deg, #16a34a, #0d9488); color: #fff;
    box-shadow: 0 6px 18px rgba(13, 148, 136, .28); }
.compra-vitrine:hover { box-shadow: 0 10px 24px rgba(13, 148, 136, .38); }

/* Marketplace da Caixa: opção secundária — largura fixa pelo conteúdo (não estica) */
.compra-caixa { flex: 0 0 auto; background: #f0f7fc; border-color: #cfe3f2; color: #0c4a73; }
.compra-caixa:hover { background: #e3f0fa; box-shadow: 0 6px 18px rgba(0, 112, 185, .18); }
.compra-caixa .txt b { color: #0c4a73; }
.compra-caixa .txt small { color: #3b7ba8; }

/* Prêmio estimado do concurso — chamariz do card (e do modal de detalhes) */
.premio-est { display: flex; align-items: center; gap: 7px; margin: 2px 0 10px; padding: 8px 10px;
    border-radius: 10px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fcd34d; }
.premio-est .rot { font-size: 11px; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: .03em; }
.premio-est .val { font-size: 18px; font-weight: 800; color: #b45309; line-height: 1.1; margin-left: auto; }

.barra { background: #eef1f0; border-radius: 999px; height: 6px; overflow: hidden; margin: 14px 0 8px; }
.barra > div { background: var(--mod, #16a34a); height: 100%; border-radius: 999px; }
/* A margem de cima era da .barra, que saiu do card da vitrine em 08/09/2026: sem ela
   o número encostava no título do bolão. */
.disp { font-size: 13px; color: #64748b; margin-top: 14px; }
.disp b { font-size: 15px; color: #0f172a; font-weight: 700; }
.esgotado b { color: #b91c1c; }
/* Tamanho do bolão inteiro: apoio, abaixo do número que interessa (as cotas da casa) */
.total-bolao { font-size: 11px; color: #a3aeb9; margin-top: 3px; }

/* Esgotou aqui: o card CONTINUA na aba da lotérica (é onde o cliente procura por ele),
   mas com o peso baixado e o caminho da Caixa no lugar do botão de Pix. */
.card.esgotou-aqui { box-shadow: 0 1px 2px rgba(16,32,26,.04), 0 4px 12px rgba(16,32,26,.06); }
.card.esgotou-aqui .hero-val { color: #64748b; }
.card.esgotou-aqui .spec b { color: #64748b; }
.card.esgotou-aqui .spec.cota { background: #f4f5f7; }
.card.esgotou-aqui .spec.cota b { color: #64748b; }
.card.esgotou-aqui .spec.cota span { color: #a0aab5; }
.card.esgotou-aqui .barra > div { background: #cbd5e1; }
.badge-esgotado { background: #475569; border-color: #475569; }
.badge-esgotado .txt { color: #fff; }

/* Ações do card: um único botão primário (na cor da modalidade) + WhatsApp discreto */
.card .acoes { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.card .btn-comprar { flex: 1; font-family: inherit; font-size: 13.5px; font-weight: 650;
    border: none; border-radius: 10px; padding: 11px 14px; cursor: pointer;
    background: var(--mod, #16a34a); color: var(--mod-ct, #fff);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: filter .14s ease, transform .14s ease; }
.card .btn-comprar:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* Nossas cotas acabaram, mas a Caixa ainda tem: o botão vira o caminho da Caixa. */
.card .btn-comprar-caixa { background: #0c4a73; color: #fff; text-decoration: none; }
/* Modo catálogo: a loja não vende pelo site, o WhatsApp É o botão de compra. Verde do
   WhatsApp (e não a cor da modalidade) porque o canal precisa ser reconhecido de longe. */
.card .btn-comprar-zap { background: #fff; color: #128c4a; border: 1px solid #a7e3c0; text-decoration: none;
    padding: 9px 12px; font-size: 13.5px; font-weight: 700; }
.card .btn-comprar-zap:hover { background: #f0fdf4; border-color: #4ade80; filter: none; }
.card .btn-comprar-zap img { width: 18px; height: 18px; display: block; }
/* Nota abaixo do botão do WhatsApp: explica o que acontece, sem pesar no botão. */
.card .acoes .zap-info { flex: 1 1 100%; margin: 0; text-align: center; font-size: 12px; color: #94a3b8; line-height: 1.4; }
/* Botão em duas linhas: o canal em cima ("Comprar no Pix" / "pelo WhatsApp") e, embaixo,
   o que acontece depois do clique. Os dois caminhos tinham o mesmo texto e confundiam. */
.card .acoes { flex-wrap: wrap; }
.card .btn-comprar:has(.l1) { flex-direction: column; gap: 1px; line-height: 1.2; }
.card .btn-comprar .l1 { font-size: 14px; font-weight: 750; }
.card .btn-comprar small { font-size: 11.5px; font-weight: 500; opacity: .88; }
/* Com Pix no card, o WhatsApp vira uma frase discreta embaixo, com o link na palavra. */
.card .acoes .zap-sec { flex: 1 1 100%; margin: 0; text-align: center; font-size: 12.5px; color: #6b7280; }
.card .acoes .zap-sec a { color: #128c4a; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.card .acoes .zap-sec a:hover { color: #0f7a3d; }
.card .acoes .zap-ico { width: 40px; height: 40px; flex: none; border: 1px solid #e6eae8;
    border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; transition: border-color .14s ease; }
.card .acoes .zap-ico:hover { border-color: #cbd5e1; }
.card .acoes .zap-ico img { width: 22px; height: 22px; display: block; }

/* Selo da lotérica dona do bolão, no marketplace geral da plataforma (boloes.php) — a
   loja próxima do jogo, mesmo lugar em todo card, para o cliente saber quem vende. Fundo
   na cor da MODALIDADE do card (--mod), como uma faixa de identidade — o branco puro
   ficava sem contraste com o resto do cartão. */
.card-loja { display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: var(--mod, #0c4a73); color: var(--mod-ct, #fff); }

/* Rodapé: links discretos (ver jogos, comprar na Caixa) — não competem com o CTA */
.card .rodape-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px;
    padding-top: 12px; border-top: 1px solid #f1f5f9; font-size: 12.5px; }
/* Quebra entre os links, nunca no meio de um: "Ver 2 / jogos" em duas linhas é ruído. */
.card .rl { color: #64748b; text-decoration: none; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; }
.card .rl:hover { color: #0f172a; }
.card .rl-caixa .dot { width: 6px; height: 6px; border-radius: 50%; background: #0070b9; flex: none; }

/* ------------------------------------------------------------------ *
 *  Marketplace da Caixa (aba 2): linha compacta no lugar do card. Cabe
 *  mais bolão na tela e a diferença de peso para a aba da casa fica clara.
 * ------------------------------------------------------------------ */
.mkp-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
/* Colunas de largura fixa nas duas últimas faixas: numa lista, número que dança de
   posição a cada linha fica ilegível — dezenas, jogos e cota precisam formar coluna. */
.mkp-item { display: grid; grid-template-columns: auto 1fr 132px 296px; align-items: center;
    gap: 14px; background: #fff; border: 1px solid #e3e9ef; border-radius: 12px; padding: 12px 14px; }
.mkp-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 112px; }
.mkp-mod .mod-badge { font-size: 10.5px; padding: 3px 9px; letter-spacing: .05em; }
.mkp-conc { font-size: 11.5px; color: #94a3b8; font-weight: 600; }
.mkp-premio { display: flex; flex-direction: column; min-width: 0; }
.mkp-premio b { font-size: 17px; font-weight: 800; color: #0f172a; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; }
.mkp-premio i { font-style: normal; font-size: 11px; color: #94a3b8; font-weight: 600; }
.mkp-nums { display: flex; gap: 10px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.mkp-nums span { text-align: center; min-width: 56px; }
.mkp-nums b { display: block; font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1; }
.mkp-nums i { font-style: normal; display: block; font-size: 9px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: #a0aab5; margin-top: 4px; }
.mkp-cta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mkp-cota { flex: 1 1 auto; text-align: right; line-height: 1.2; }
.mkp-cota b { font-size: 15px; font-weight: 800; color: #0f172a; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.mkp-cota small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #a0aab5; margin-top: 3px; }
.mkp-ver { width: 34px; height: 34px; flex: none; border: 1px solid #e3e9ef; background: #fff;
    border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1; color: #64748b; }
.mkp-ver:hover { border-color: #cbd5e1; }
.mkp-btn { flex: none; min-width: 140px; text-align: center; font-family: inherit; font-size: 12.5px;
    font-weight: 700; color: #fff; background: #0c4a73;
    border-radius: 9px; padding: 9px 13px; text-decoration: none; white-space: nowrap; }
.mkp-btn:hover { filter: brightness(1.08); }
.mkp-btn-off { background: #e5e7eb; color: #6b7280; }

.botoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 9px 14px; border-radius: 8px; text-decoration: none;
       font-size: 14px; font-weight: 600; border: none; cursor: pointer; }
.btn-caixa { background: #0070b9; color: #fff; }
.btn-zap  { background: #25d366; color: #fff; }
.btn-azul { background: #2563eb; color: #fff; }
.btn-cinza{ background: #e5e7eb; color: #1f2937; }
.btn-vermelho { background: #dc2626; color: #fff; }
.btn-detalhes { background: #f3f4f6; color: #1f2937; border: 1px solid #d1d5db; }
.btn:hover { opacity: .92; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* WhatsApp só com ícone (o "fale conosco" fica implícito) */
.zap-ico { display: inline-flex; align-items: center; }
.zap-ico img { width: 38px; height: 38px; display: block; }
/* Link Caixa Loterias: selo da marca + legenda "X cotas disponíveis" */
.caixa-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
              padding: 4px 9px; border-radius: 8px; border: 1px solid #cfe3f2; background: #f0f7fc; }
.caixa-link:hover { background: #e3f0fa; }
.caixa-badge { background: #0070b9; color: #fff; font-weight: 800; font-size: 12px;
               letter-spacing: 1px; padding: 3px 8px; border-radius: 5px; }
.caixa-link small { color: #0c4a73; font-weight: 600; font-size: 12px; line-height: 1.15; }

/* Grade de cotas selecionáveis (modal de reserva da vitrine) */
.cotagrade { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
             gap: 6px; max-height: 230px; overflow: auto; margin: 8px 0; padding: 2px; }
.cotatile { border: 1.5px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px;
            padding: 9px 4px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .12s;
            white-space: nowrap; }
.cotatile:hover { border-color: #16a34a; }
.cotatile.sel { background: #16a34a; color: #fff; border-color: #16a34a; }

/* Marca diagonal "VENDIDA/RESERVADA" sobre a foto da cota (estilo carimbo confidencial) */
.cota-foto { position: relative; overflow: hidden; }
.cota-foto.indisp img { filter: grayscale(.45) brightness(.9); }
.cota-carimbo { position: absolute; top: 50%; left: 50%; z-index: 2;
    transform: translate(-50%, -50%) rotate(-22deg); pointer-events: none;
    border: 4px solid currentColor; border-radius: 8px; padding: 4px 16px;
    font-weight: 900; font-size: clamp(18px, 7vw, 34px); letter-spacing: 2px;
    text-transform: uppercase; opacity: .82; background: rgba(255,255,255,.12);
    text-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; }
.cota-carimbo.vendida   { color: #b91c1c; }
.cota-carimbo.reservada { color: #b45309; }
.cota-carimbo.cancelada { color: #6b7280; }

/* Cota sem foto publicável: o recibo é documento ao portador e só sai da vitrine
   com o QR/código tapados. Sem essa versão, mostramos este aviso no lugar da foto. */
.cota-foto.sem-foto { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; height: 150px; padding: 12px; text-align: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }
.cota-foto.sem-foto .ico { font-size: 26px; line-height: 1; }
.cota-foto.sem-foto strong { font-size: 14px; color: #334155; }
.cota-foto.sem-foto small { font-size: 12px; color: #64748b; }
.cota-foto.sem-foto.indisp { filter: grayscale(.45) brightness(.97); }

/* Chip de concurso especial (Lotofácil da Independência, Mega da Virada…): dourado,
   para não se perder no meio dos concursos comuns da mesma modalidade. */
.chip.esp { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e;
    border-color: #fcd34d; font-weight: 700; }
.chip.esp:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.chip.esp.ativa { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: #b45309; }

/* Controle de cotas por número — a "planilha" do bolão (includes/cotas_controle.php).
   ~10 linhas visíveis; o resto rola com o cabeçalho fixo. */
.cota-tabela { max-height: 430px; overflow: auto; margin-top: 10px;
    border: 1px solid #e5e7eb; border-radius: 10px; }
.cota-tabela table { border-radius: 0; }
.cota-tabela th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 #e5e7eb; }
.cota-tabela td, .cota-tabela th { padding: 7px 10px; font-size: 13.5px; }
.cota-linha.livre td { color: #94a3b8; }
.cota-btn { font-weight: 700; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.cota-btn.livre          { background: #fff; color: #2563eb; border: 1px dashed #93c5fd; }
.cota-btn.livre:hover    { background: #eff6ff; }
.cota-btn.venda          { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.cota-btn.reserva        { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.cota-btn.transferencia  { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.cota-btn.vitrine        { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.cota-btn.site           { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.cota-btn.bolsa          { background: #fae8ff; color: #86198f; border: 1px solid #f0abfc; }
.cota-btn[disabled]      { opacity: .75; cursor: not-allowed; }
.tag-venda         { background: #dcfce7; color: #166534; }
.tag-reserva       { background: #fef3c7; color: #92400e; }
.tag-transferencia { background: #dbeafe; color: #1e40af; }
.tag-site          { background: #e0e7ff; color: #3730a3; }
.tag-vitrine       { background: #f1f5f9; color: #475569; }
.tag-livre         { background: #f8fafc; color: #94a3b8; }
/* Cota em negociação na bolsa entre lotéricas: nem livre, nem vendida. */
.tag-bolsa         { background: #fae8ff; color: #86198f; }
.cota-faixa-caixa { margin-top: 10px; border: 1px solid #bae6fd; border-radius: 10px;
    padding: 10px 14px; color: #075985; font-size: 13px;
    background: repeating-linear-gradient(135deg, #f0f9ff, #f0f9ff 8px, #e0f2fe 8px, #e0f2fe 16px); }

/* Botão só com ícone: quadrado e centralizado (tabela de reservas etc.) */
.btn-ico { width: 30px; height: 30px; padding: 0; display: inline-flex;
           align-items: center; justify-content: center; line-height: 1; font-size: 15px; }

/* Modal de jogos apostados (vitrine) */
.modal-jogos { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
    align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 1100; overflow: auto; }
.modal-jogos-box { background: #fff; border-radius: 14px; max-width: 700px; width: 100%; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal-jogos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; color: #fff; font-weight: 700; font-size: 15px; }
.modal-jogos-x { border: none; background: rgba(255,255,255,.25); color: #fff; font-size: 22px;
    line-height: 1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.modal-jogos-body { padding: 16px 18px 20px; }
/* Topo do modal: selo "maior aposta" + prêmio estimado no mesmo estilo do card
   (número grande escuro, rótulo discreto — sem a caixa dourada). */
.modal-jogos-topo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.mj-tag { display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px; background: #faf7ef; border: 1px solid rgba(120,90,10,.18); }
.mj-tag .ico { font-size: 12px; line-height: 1; }
.mj-tag .txt { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.mj-premio { display: flex; flex-direction: column; gap: 2px; }
.mj-premio-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.mj-premio-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: #0f172a; }
.modal-jogos-resumo { text-align: center; background: #f3f4f6; border-radius: 8px; padding: 8px;
    font-weight: 600; color: #374151; font-size: 13px; margin-bottom: 12px; }
/* Grade [rótulo | dezenas]: as dezenas quebram DENTRO da própria coluna, alinhadas
   em matriz (a 2ª fila fica sob a 1ª dezena, nunca sob o rótulo "Jogo A"). */
.jogo-linha { display: grid; grid-template-columns: 58px 1fr; align-items: start; gap: 6px; margin: 10px 0; }
.jogo-linha .jogo-rotulo { padding-top: 6px; }
.jogo-rotulo { color: #6b7280; font-size: 13px; min-width: 58px; }
.dezenas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dezenas-sep { align-self: center; color: #9ca3af; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; margin: 0 2px 0 6px; }
.dezena { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 600;
    border: 2px solid #16a34a; color: #15803d; }
.trevo { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px;
    padding: 0 6px; border-radius: 15px; font-size: 13px; font-weight: 700; background: #fbbf24; color: #1f2937; }
.time-coracao { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px;
    border-radius: 15px; font-size: 12px; font-weight: 700; background: #00a651; color: #fff; }
.modal-jogos-nota { color: #9ca3af; font-size: 12px; margin: 14px 0 0; }

/* Super Sete: cada coluna (1-7) empilha 1-3 dezenas (0-9) */
.s7-cabecalho { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.s7-coluna-num { width: 30px; text-align: center; color: #6b7280; font-size: 11px; font-weight: 700; }
.s7-coluna { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 30px; }

/* Modal de reserva online (Pix) */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex;
    align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 1000; overflow: auto; }
.modal { background: #fff; border-radius: 14px; max-width: 420px; width: 100%; padding: 22px; position: relative; }
.modal-x { position: absolute; top: 8px; right: 12px; border: none; background: none; font-size: 26px;
    line-height: 1; cursor: pointer; color: #6b7280; }
.modal h3 { margin: 0 0 12px; font-size: 18px; }
.modal label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.modal input, .modal textarea, .modal select { width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; }
.rtotal { margin: 12px 0; font-size: 15px; }
.rtotal strong { color: #15803d; font-size: 20px; }
.pixbox { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; margin: 12px 0; }
.pixbox #qr { display: flex; justify-content: center; margin: 8px 0; }
.pixbox #qr img, .pixbox #qr canvas { border: 6px solid #fff; border-radius: 6px; }
.pixbox textarea { font-family: monospace; font-size: 11px; word-break: break-all; }

/* Marca da lotérica nas modais da vitrine. Quem chega pelo link direto do jogo abre o
   modal sem passar pelo cabeçalho da página — e o print do modal é o que circula no
   WhatsApp, então é ali que a loja precisa estar assinada. */
.modal-marca { width: auto; object-fit: contain; display: block; flex-shrink: 0; }
/* Detalhes: a marca fica no alto do corpo, à direita dos selos e do prêmio. Fora da
   faixa colorida do cabeçalho ela aparece nas cores próprias, sem plaquinha branca. */
.modal-jogos-cab { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 14px; }
.modal-jogos-topo { margin-bottom: 0; }
.modal-marca-g { height: 64px; max-width: 180px; margin-left: auto; }
/* Compra: a marca assina o título, à esquerda dele. O × é absoluto no canto direito,
   daí a folga; o modal é mais largo que o padrão para o título caber numa linha. */
#modalComprar .modal { max-width: 640px; }
.modal-topo { display: flex; align-items: center; gap: 12px; padding-right: 26px; margin-bottom: 12px; }
.modal-topo h3 { margin: 0; }
.modal-marca-m { height: 40px; max-width: 120px; }
/* Título um ponto menor que o padrão do modal: com a marca ao lado é o que faz o nome
   do bolão (modalidade + concurso + configuração) caber numa linha só. */
#modalComprar .modal-topo h3 { font-size: 17px; line-height: 1.25; }
@media (max-width: 560px) {
    .modal-marca-g { height: 46px; max-width: 130px; }
    .modal-marca-m { height: 32px; max-width: 104px; }
}

/* Tabelas admin */
table { border-collapse: collapse; width: 100%; background: #fff; border-radius: 10px; overflow: hidden; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f4; font-size: 14px; }
th { background: #f3f4f6; }
.tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag-reservada { background: #fef3c7; color: #92400e; }
.tag-vendida   { background: #dcfce7; color: #166534; }
.tag-cancelada { background: #f3f4f6; color: #6b7280; }

/* Formulários */
.form { background: #fff; padding: 20px; border-radius: 12px; max-width: 620px; }
.form label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.form input, .form select, .form textarea {
    width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
}
.linha { display: flex; gap: 12px; }
.linha > div { flex: 1; }
.alerta { padding: 12px; border-radius: 8px; margin: 12px 0; font-size: 14px; }
.alerta-erro { background: #fee2e2; color: #991b1b; }
.alerta-ok { background: #dcfce7; color: #166534; }
.painel { margin: 24px 0; }
h2 { font-size: 22px; }

/* "Faça sua aposta" — construtor de volante (apostar.php) */
#formAposta label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
#formAposta input[type=text], #formAposta input[type=number], #formAposta input:not([type]) {
    width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mod-opt { border: 2px solid var(--c); background: #fff; color: var(--c); border-radius: 10px;
    padding: 12px 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: .15s; }
.mod-opt:hover { background: #f8fafc; }
.mod-opt.sel { background: var(--c); color: var(--ct); }
.vol-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; margin-top: 10px; background: #f8fafc; }
.vol-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px;
    font-weight: 700; color: #374151; margin-bottom: 8px; }
.vol-x { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #9ca3af; }
.vol-sub { font-size: 12px; font-weight: 700; color: #6b7280; margin: 10px 0 4px; }
.vol-grade { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.vol-grade.trevos { grid-template-columns: repeat(6, 1fr); max-width: 220px; }
.vol-num { aspect-ratio: 1; border: 1px solid #d1d5db; background: #fff; border-radius: 50%;
    font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; padding: 0; }
.vol-num.sel { background: #16a34a; border-color: #16a34a; color: #fff; }
.vol-hint { font-size: 12px; color: #b91c1c; margin-top: 6px; }
.vol-hint.ok { color: #15803d; font-weight: 600; }
.resumo-aposta { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px;
    padding: 12px; margin: 14px 0; font-size: 14px; color: #065f46; display: flex;
    flex-direction: column; gap: 4px; }
.resumo-aposta strong { color: #065f46; }
@media (max-width: 480px) { .vol-grade { grid-template-columns: repeat(8, 1fr); } }

/* CTA "Faça sua aposta" na vitrine */
.cta-aposta { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 14px 18px;
    border-radius: 12px; background: linear-gradient(135deg, #1d4ed8, #7c3aed); color: #fff;
    font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(29,78,216,.25); }
.cta-aposta span { font-size: 17px; font-weight: 800; }
.cta-aposta:hover { filter: brightness(1.05); }

/* ------------------------------------------------------------------ *
 *  Responsividade geral (telas pequenas / celular)
 * ------------------------------------------------------------------ */
img { max-width: 100%; }

@media (max-width: 720px) {
    /* Celular usa a tela inteira: 90vw aqui só encolheria o conteúdo. */
    .container { max-width: 100%; padding: 0 14px; }
    h2 { font-size: 19px; }
    .mod-titulo { padding: 4px 2px 10px; }
    .mod-titulo .nome { font-size: 16px; }
    .canal-titulo { gap: 10px; }
    .canal-titulo .ico { font-size: 22px; }
    .canal-titulo .tt { font-size: 15px; }
    .canal-titulo .sub { font-size: 12px; }
    /* Abas: encolhem em vez de quebrar linha (uma aba quebrada fica com a borda solta) */
    .abas-canal { gap: 5px; }
    .aba { font-size: 13px; padding: 10px 10px; gap: 6px; }
    .aba .ico { font-size: 15px; }
    .aba .n { padding: 1px 6px; font-size: 11px; }
    .aba .txt { display: none; }
    .aba .txt-curto { display: inline; }
    .aba-painel { padding: 14px 12px; border-radius: 0 0 12px 12px; }
    /* Linha do marketplace vira três faixas: identidade, números e a ação */
    .mkp-item { grid-template-columns: auto 1fr; row-gap: 10px; }
    .mkp-mod { min-width: 0; }
    .mkp-nums { grid-column: 1 / -1; justify-content: flex-start; }
    .mkp-cta { grid-column: 1 / -1; justify-content: flex-start; }
    .mkp-cota { flex: none; text-align: left; margin-right: auto; }
    .grid { gap: 12px; }
    .form { padding: 16px; }
    /* Campos lado a lado (ex.: nome/cidade do Pix) empilham no celular */
    .linha { flex-direction: column; gap: 0; }
}

@media (max-width: 520px) {
    .container { padding: 0 12px; }
    /* Grids em coluna única no celular (vence estilos inline como "1fr 2fr") */
    .grid { grid-template-columns: 1fr !important; }
    .filtros { gap: 6px; margin: 14px 0; }
    .chip { padding: 6px 12px; font-size: 12px; }
    /* Modais ocupam a tela toda com folga menor */
    .modal-bg, .modal-jogos { padding: 12px; align-items: flex-start; }
    .modal { padding: 18px; }
    .botoes .btn { flex: 1 1 auto; text-align: center; }
}

/* ------------------------------------------------------------------ *
 *  Painel admin (lotérico / dono) em telas pequenas
 * ------------------------------------------------------------------ */
.adm-toggle { display: none; }

@media (max-width: 860px) {
    /* Tabelas largas (lista de bolões, relatórios) rolam na horizontal
       em vez de espremer o texto. Fora daqui seguem 100% no desktop. */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

    /* Cabeçalho do painel: h1 + botão ☰; o menu colapsa para baixo */
    .topo .container { flex-wrap: wrap; }
    .topo h1 { font-size: 17px; }
    .adm-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
        padding: 8px 12px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600;
        cursor: pointer; background: rgba(255,255,255,.16); user-select: none;
        -webkit-tap-highlight-color: transparent; }

    .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; }
    .adm-toggle-cb:checked ~ .menu { display: flex; }

    /* Sem hover no toque: cada grupo vira um bloco com o submenu já aberto (acordeão estático) */
    .menu .grupo { position: static; }
    .menu .trigger, .menu > a.item { display: block; padding: 11px 14px; border-radius: 10px;
        background: rgba(255,255,255,.08); font-size: 15px; }
    .menu .caret { display: none; }
    .menu .sub { position: static; display: block; box-shadow: none; background: transparent;
        margin: 2px 0 6px; padding: 2px 0 2px 10px; min-width: 0; }
    .menu .sub a { color: #dbeafe; padding: 9px 12px; font-size: 14px; }
    .menu .sub a:hover { background: rgba(255,255,255,.12); color: #fff; }
    .menu .sub .sep { background: rgba(255,255,255,.18); margin: 4px 8px; }
}

/* --------------------------------------------------------------------------
 *  Bolsa de cotas — pedir cotas de uma oferta (admin/mercado.php)
 *
 *  O bloco fica colado no rodapé do card (margin-top:auto sobre o .corpo, que é
 *  flex-column) para que os cards da grade terminem alinhados mesmo com textos de
 *  alturas diferentes. Os campos herdam o desenho do .form, que não vale aqui
 *  porque o formulário mora dentro do card, não num painel de formulário.
 * ------------------------------------------------------------------------ */
.proposta { margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f5f9;
            display: flex; flex-direction: column; gap: 8px; }
.proposta .pr-linha { display: flex; align-items: center; gap: 10px; }
.proposta label { font-size: 12.5px; font-weight: 700; color: #64748b; white-space: nowrap; }
.proposta select, .proposta input[type="text"] {
    width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 13.5px; font-family: inherit; color: #0f172a; background: #fff;
}
.proposta select { flex: 1; min-width: 0; font-weight: 600; }
.proposta select:focus, .proposta input[type="text"]:focus {
    outline: 2px solid #bfdbfe; outline-offset: 0; border-color: #60a5fa;
}
.proposta input[type="text"]::placeholder { color: #94a3b8; }
.proposta .btn { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Abas de configuração (Perfil da lotérica).

   A tela reunia dez blocos numa rolagem só — vitrine, marca, Asaas, WhatsApp,
   resultados, apostas, IA, saldo do cliente, senha e token do robô — e a cada
   funcionalidade nova ela crescia mais. Agrupada em abas, cabe numa tela.

   Diferente de .aba (abas de canal da vitrine): lá são duas, com contador e cor
   de canal; aqui são cinco, de configuração, e o que importa é o sublinhado da
   ativa e o selo do que ainda falta ligar.
   --------------------------------------------------------------------------- */
.abas-cfg { display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 0;
    border-bottom: 2px solid #e5e7eb; }
.aba-cfg { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700; color: #64748b;
    background: none; border: 0; border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0; padding: 10px 14px; margin-bottom: -2px;
    transition: color .15s ease, background .15s ease; }
.aba-cfg:hover { color: #0f172a; background: #f1f5f9; }
.aba-cfg .ico { font-size: 16px; line-height: 1; flex: none; }
.aba-cfg[aria-selected="true"] { color: #1d4ed8; border-bottom-color: #1d4ed8; }
/* Configuração pela metade não pode sumir atrás de uma aba fechada — o selo é o
   que a denuncia de fora (Asaas sem webhook, WhatsApp sem QR lido). */
.aba-cfg .pend { flex: none; font-size: 11px; font-weight: 800; line-height: 1;
    background: #f59e0b; color: #fff; border-radius: 999px; padding: 3px 7px; }
.cfg-painel { padding-top: 4px; }
.cfg-painel[hidden] { display: none; }
@media (max-width: 620px) {
    .abas-cfg { gap: 0; }
    .aba-cfg { font-size: 13px; padding: 9px 9px; gap: 5px; }
}

/* ---------------------------------------------------------------------------
   CENTRAL DE DIVULGAÇÃO (admin/divulgacao.php)
   A tela junta os cartazes e a mensagem de texto em abas (.abas-cfg, acima).
   O que é próprio dela: a escolha de público no topo, a mensagem em prévia e
   a barra de disparo presa no rodapé.
   --------------------------------------------------------------------------- */
/* Público e escopo: a mesma pergunta, feita em cartão, para não virar mais um
   par de radios soltos no meio do formulário. */
.div-publico, .div-escopo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 14px; margin: 14px 0 0; }
.div-escopo { margin: 0; }
.div-publico .rot, .div-escopo .rot { font-size: 13px; font-weight: 700; color: #475569; }
.div-publico label, .div-escopo label { display: inline-flex; align-items: center; gap: 7px;
    font-weight: 400; cursor: pointer; margin: 0; }
.div-publico input[type=radio], .div-escopo input[type=radio] { width: auto; margin: 0; }
.div-publico small, .div-escopo small { color: #94a3b8; }

/* A explicação de como o cartaz é montado é leitura de uma vez só: fica
   dobrada, e quem já sabe não perde a tabela de vista. */
.div-ajuda { margin: 0 0 12px; }
.div-ajuda summary { cursor: pointer; font-size: 13px; color: #64748b; font-weight: 600; }
.div-ajuda p { color: #6b7280; font-size: 14px; margin: 8px 0 0; max-width: 78ch; }

/* A mensagem inteira empurrava a lista de clientes para fora da tela. */
.div-msg textarea { display: none; }
.div-msg.aberto textarea { display: block; }
.div-msg > small { display: none; }
.div-msg.aberto > small { display: block; }
.div-msg .cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.div-msg.aberto .previa { display: none; }
.div-msg .previa { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: #334155;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px;
    max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent); }

/* Busca + ações da lista de clientes. */
.cli-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cli-barra input[type=search] { flex: 1 1 240px; max-width: 340px; padding: 8px 10px;
    border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; font-size: 14px; }
.cli-barra .conta { font-size: 13px; font-weight: 700; color: #475569; }

/* Barra de disparo: a decisão fica sempre à mão, mesmo com a tabela longa. */
.div-acao { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center;
    gap: 14px; justify-content: flex-end; background: #fff; border-top: 2px solid #e5e7eb;
    padding: 12px 4px; margin-top: 8px; }
.div-acao[hidden] { display: none; }
.div-acao .conta { font-size: 14px; font-weight: 700; color: #475569; margin-right: auto; }

/* Contador neutro na aba (o .pend laranja continua sendo o que falta divulgar). */
.aba-cfg .cnt { flex: none; font-size: 11px; font-weight: 700; line-height: 1;
    background: #e2e8f0; color: #475569; border-radius: 999px; padding: 3px 7px; }