/*
 * O Desporto das Previsões por modalidade (navegação aprovada pelo dono em 30/09/2026, quadro
 * "Previsões: navegação e subcategorias", pranchas NV1 a NV8; 2ª entrega): as modalidades, as
 * competições, o "Quando" e o "Mostrar" em cima, e a lista em linhas de jogo agrupadas por
 * competição. Quem desenha é o public/js/novo/previsoes-desporto.js.
 * Usa as cores do previsoes.css (--np-*). Regra do dono: nenhum texto cortado com reticências.
 */

/* ------------------------------------------------------------------ as modalidades (segundo nível) e as competições (terceiro) */
.pd-mods, .pd-comps { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pd-pilula { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--np-linha); background: var(--np-fundo-2);
    color: var(--np-texto-2); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: border-color .15s, background .15s; }
.pd-pilula.sem-desenho { padding: 0 14px; }
.pd-pilula svg { flex: none; color: var(--np-texto-2); }
.pd-pilula b { font-weight: 700; color: var(--np-texto-4); }
.pd-pilula:hover { border-color: var(--np-linha-2); color: #fff; }
.pd-pilula.on { background: rgba(0, 255, 136, .1); border-color: rgba(0, 255, 136, .45); color: #fff; }
.pd-pilula.on svg, .pd-pilula.on b { color: var(--np-verde); }

/* O que tem um texto para a tela larga e outro, mais curto, para o celular ("Esta semana" / "Semana"). */
.pd-so-estreito { display: none; }

/* ------------------------------------------------------------------ a linha do "Mostrar", do "Quando" e da ordem */
.pd-linha { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; min-width: 0; }
/* O vão que empurra o que vem depois para a direita (o "Ordenar", a seta do grupo, o "Ver as N linhas"). */
.pd-linha > .np-vao, .pd-gcab > .np-vao, .np-tipo-cab > .np-vao { flex: 1; }
.pd-controle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-seg { display: inline-flex; padding: 3px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); border-radius: 10px; }
.pd-seg a, .pd-seg .vazio { height: 30px; padding: 0 13px; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--np-texto-2); white-space: nowrap; }
.pd-seg a b, .pd-seg .vazio b { font-weight: 800; color: var(--np-texto-4); }
/* A opção sem nada (zero): apagada e sem clique. */
.pd-seg .vazio { opacity: .42; cursor: default; }
.pd-seg a:hover { color: #fff; }
.pd-seg a.on { background: var(--np-linha); color: #fff; }
.pd-seg a.on b { color: var(--np-verde); }

/* ------------------------------------------------------------------ o grupo (uma competição) */
.pd-grupo { background: var(--np-cartao); border: 1px solid var(--np-linha); border-radius: 16px; overflow: hidden; min-width: 0; }
.pd-gcab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 6px 16px; border: 0; background: none; color: #fff; text-align: left; font: inherit; flex-wrap: wrap; row-gap: 2px; }
button.pd-gcab { cursor: pointer; }
button.pd-gcab:hover { background: rgba(255, 255, 255, .02); }
.pd-gcab b { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.pd-gcab small { font-size: 12px; font-weight: 700; color: var(--np-texto-3); }
.pd-gcab > svg { flex: none; color: var(--np-texto-3); transition: transform .2s; }
.pd-grupo.fechado .pd-gcab > svg { transform: rotate(180deg); }
.pd-gic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); display: flex; align-items: center; justify-content: center; color: #ffb38f; }
.pd-gic.relogio { color: var(--np-ambar); }
.pd-campeoes .pd-gic { color: var(--np-amarelo); }
.pd-gic.grande { background: var(--np-cartao); }
.pd-bd { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px; border-radius: 5px; background: #232930; color: var(--np-texto-2); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.pd-dia { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 16px; background: #171b20; border-top: 1px solid var(--np-linha); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--np-texto-3); }
.pd-dia.hj { color: var(--np-ambar); }
.pd-pe { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-top: 1px solid var(--np-linha); font-size: 13px; font-weight: 800; color: var(--np-verde) !important; text-align: center; }
.pd-pe:hover { background: rgba(0, 255, 136, .04); }

/* ------------------------------------------------------------------ a linha do jogo: a hora, os lados um em cima do outro, a porta e a estrela */
.pd-lin { display: grid; grid-template-columns: 70px minmax(0, 1fr) 148px 32px; gap: 16px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--np-linha); min-width: 0; }
.pd-hr { display: grid; gap: 3px; min-width: 0; }
.pd-hr small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--np-texto-3); }
.pd-hr small.hj { color: var(--np-ambar); }
.pd-hr b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pd-hr em { display: none; font-style: normal; }
.pd-lados { display: grid; gap: 5px; min-width: 0; }
.pd-sobre { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--np-texto-3); }
/* O nome do lado nunca é cortado: tem a largura dele (até 236 px) e, se for maior, quebra. */
.pd-lado { display: grid; grid-template-columns: 22px minmax(0, 236px) minmax(40px, 1fr) 92px; gap: 10px; align-items: center; min-height: 30px; }
.pd-nome { font-size: 14px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; min-width: 0; }
.pd-marca { width: var(--t, 22px); height: var(--t, 22px); flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: calc(var(--t, 22px) * .38); font-weight: 900; letter-spacing: -.02em; }
.pd-lado .np-barra { height: 4px; }
.pd-lado .np-barra i { display: block; height: 100%; border-radius: 3px; transition: width .4s ease; }
/* A chance é o botão de prever: o primeiro lado em verde, o segundo em azul, o empate neutro. */
.pd-pc { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 9px; font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .15s, border-color .15s; }
.pd-pc.a { background: rgba(0, 255, 136, .1); border: 1px solid rgba(0, 255, 136, .42); color: var(--np-verde) !important; }
.pd-pc.b { background: rgba(77, 171, 247, .1); border: 1px solid rgba(77, 171, 247, .42); color: #6bb8fb !important; }
.pd-pc.x { background: var(--np-fundo-2); border: 1px solid var(--np-linha-2); color: #e6e9ec !important; }
.pd-pc.a:hover { background: rgba(0, 255, 136, .18); border-color: rgba(0, 255, 136, .7); }
.pd-pc.b:hover { background: rgba(77, 171, 247, .18); border-color: rgba(77, 171, 247, .7); }
.pd-pc.x:hover { border-color: #5d646d; }
/* O cadeado é um aviso de que o lado está sem preço agora: continua tocável (abre o jogo; o bilhete diz a última palavra). */
.pd-pc.fechado { background: var(--np-fundo-2); border: 1px dashed var(--np-linha-2); color: #5d646d !important; }
.pd-pc.fechado:hover { color: var(--np-texto-2) !important; border-color: #5d646d; }
/* O lado que não existe: um traço, sem cadeado. */
.pd-pc.nada { color: #5d646d; }
.pd-pc.parado { color: var(--np-texto-2); }
.pd-mais { display: grid; gap: 3px; justify-items: end; text-align: right; min-width: 0; }
.pd-mais small { font-size: 11px; font-weight: 700; color: var(--np-texto-4); }
.pd-mais b { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; color: var(--np-verde); white-space: nowrap; }
.pd-mais b i { font-style: normal; }
.pd-mais.sozinha b { color: var(--np-texto-2); }
.pd-mais:hover b { text-decoration: underline; }
/* O jogo que fechou por mais tempo (começou, a casa pausou): fica na lista, apagado e sem botões, com a palavra. */
.pd-lin.fechado .pd-lado, .pd-lin.fechado .pd-hr { opacity: .55; }
.pd-lin.atualizando .pd-pc { opacity: .6; }
.pd-estado { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--np-fundo-2); border: 1px solid var(--np-linha-2);
    font-size: 12px; font-weight: 800; color: var(--np-texto-2); text-align: right; }
.pd-estado i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.pd-estado.andamento { color: var(--np-ambar); }

/* ------------------------------------------------------------------ o campeão (futuro): até quando, o nome e os 3 da frente */
.pd-fut { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 32px; gap: 16px; align-items: center; min-height: 64px; padding: 8px 16px; border-top: 1px solid var(--np-linha); min-width: 0; }
.pd-fut-nome { display: grid; gap: 4px; min-width: 0; }
.pd-fut-nome b { font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.pd-fut-nome small { font-size: 12px; font-weight: 700; color: var(--np-texto-4); }
.pd-fut-nome:hover b { color: var(--np-amarelo); }
.pd-cands { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.pd-cand { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 9px; border-radius: 8px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); font-size: 12px; font-weight: 700; color: var(--np-texto-1); }
.pd-cand b { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ dentro do jogo: os grupos por tipo (prancha NV7) */
/* Em cima do título: "Desporto · Futebol americano · NFL". Quebra em linhas; não é cortado. */
.np-cabeca-texto .np-cat.np-cat-onde { white-space: normal; overflow: visible; flex-wrap: wrap; line-height: 1.35; }
.np-conta { color: #fff; font-weight: 800; }
.np-tipo + .np-tipo .np-tipo-cab { border-top: 1px solid var(--np-linha); }
.np-tipo-cab { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 16px; background: #171b20; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--np-texto-3); }
.np-tipo-cab b { font-weight: 800; }
.np-tipo-cab > span:not(.np-vao) { color: #5d646d; }
.np-tipo-ver { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--np-verde); cursor: pointer; text-align: right; }
.np-tipo-ver:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ o Desporto no início */
.pd-inicio { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------------------ telas médias */
@media (max-width: 1100px) {
    .pd-lin { grid-template-columns: 62px minmax(0, 1fr) 120px 32px; gap: 12px; }
    .pd-lado { grid-template-columns: 22px minmax(0, 200px) minmax(30px, 1fr) 84px; }
    .pd-fut { grid-template-columns: 62px minmax(0, 1fr) 32px; grid-template-areas: "hr nome estrela" "hr cands cands"; gap: 8px 12px; }
    .pd-fut > .pd-hr { grid-area: hr; } .pd-fut > .pd-fut-nome { grid-area: nome; } .pd-fut > .pd-cands { grid-area: cands; justify-content: flex-start; } .pd-fut > .np-ic { grid-area: estrela; }
}

/* ------------------------------------------------------------------ celular (pranchas NV4, NV5 e NV6) */
@media (max-width: 700px) {
    /* As modalidades em grade de 4, como os azulejos das categorias; dentro de uma modalidade a grade some (fica a linha recolhida). */
    .pd-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .pd-mods .pd-pilula { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 74px; padding: 6px 2px; border-radius: 12px; text-align: center; white-space: normal; font-size: 11px; font-weight: 800; line-height: 1.1; color: #e6e9ec; }
    .pd-mods .pd-pilula svg, .pd-mods .pd-pilula img { width: 20px; height: 20px; }
    .pd-mods .pd-pilula span { overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }
    .pd-mods .pd-pilula b { font-size: 10px; font-weight: 800; line-height: 1; }
    .pd-mods .pd-pilula.on { background: rgba(0, 255, 136, .09); border-color: rgba(0, 255, 136, .55); }
    .np-na-modalidade > .pd-mods { display: none; }
    /* No início do celular o Desporto é só "A seguir": as modalidades ficam para a página dele (prancha NV4). */
    .pd-inicio > .pd-mods { display: none; }
    .pd-comps .pd-pilula { height: 36px; padding: 0 12px; font-size: 12.5px; }
    /* "Mostrar" e "Quando": um seletor de largura inteira cada, sem o rótulo; o "Quando" sem os números. */
    .pd-linha { display: grid; gap: 10px; }
    .pd-controle > .np-rotulo-fila { display: none; }
    .pd-controle, .pd-seg { display: grid; width: 100%; }
    .pd-mostrar .pd-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-quando .pd-seg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pd-seg a, .pd-seg .vazio { height: auto; min-height: 32px; padding: 3px 2px; font-size: 12.5px; gap: 5px; white-space: normal; text-align: center; line-height: 1.1; }
    .pd-quando .pd-seg a b, .pd-quando .pd-seg .vazio b { display: none; }
    /* No Desporto do celular a ordem é a da hora do jogo; o botão só aparece para sair de "Mais mexidas". */
    .np-com-desporto .pd-linha > .np-vao { display: none; }
    .np-com-desporto .np-ordenar { display: none; }
    .np-com-desporto .np-ordenar.escolhida { display: block; justify-self: end; }

    .np-cabeca-texto .np-cat.np-cat-onde { display: flex; font-size: 10px; }
    .np-tipo-cab { padding: 4px 14px; }
    .pd-so-largo { display: none; }
    .pd-so-estreito { display: inline; }
    .pd-gcab { min-height: 46px; padding: 6px 12px; gap: 9px; }
    .pd-gcab b { font-size: 15px; }
    .pd-gcab .pd-bd { display: none; }
    .pd-dia { padding: 4px 12px; }
    /* A linha do jogo: em cima o dia, a hora e a competição; embaixo os lados, o nome inteiro e a chance. */
    .pd-lin { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "hr mais estrela" "lados lados lados"; gap: 8px 7px; padding: 11px 12px; }
    .pd-lin > .pd-hr { grid-area: hr; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--np-texto-3); }
    .pd-lin > .pd-hr small { font-size: 11px; letter-spacing: .04em; }
    .pd-lin > .pd-hr b { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
    .pd-lin > .pd-hr em { display: inline; }
    .pd-lin > .pd-hr > * + *::before { content: '·'; margin-right: 7px; color: var(--np-linha-2); }
    .pd-lin > .pd-hr em:empty { display: none; }
    .pd-lin > .pd-lados { grid-area: lados; gap: 4px; }
    .pd-lin > .pd-mais, .pd-lin > .pd-estado { grid-area: mais; }
    .pd-lin > .np-ic { grid-area: estrela; width: 28px; height: 28px; border-color: transparent; background: transparent; }
    .pd-sobre { display: none; }
    .pd-lado { grid-template-columns: 22px minmax(0, 1fr) 84px; gap: 9px; min-height: 32px; }
    .pd-lado .np-barra { display: none; }
    .pd-mais small, .pd-mais b i { display: none; }
    .pd-mais b { font-size: 12px; }
    .pd-mais.sozinha { display: none; }
    .pd-estado { min-height: 22px; padding: 1px 8px; font-size: 11px; }
    .pd-fut { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hr estrela" "nome nome" "cands cands"; gap: 6px 8px; padding: 11px 12px; }
    .pd-fut > .pd-hr { display: flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--np-texto-3); }
    .pd-fut > .pd-hr small, .pd-fut > .pd-hr b { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
    .pd-fut > .pd-hr em { display: inline; }
    .pd-fut > .pd-hr em::before { content: '·'; margin-right: 5px; color: var(--np-linha-2); }
    .pd-fut-nome small { display: none; }
    .pd-cands .pd-cand:nth-child(n+3) { display: none; }
    .pd-fut > .np-ic { width: 28px; height: 28px; border-color: transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .pd-pilula, .pd-pc, .pd-gcab > svg, .pd-lado .np-barra i { transition: none; }
}