/* =====================================================================
   AS PAGINAS PUBLICAS DE RESULTADO

   Folha propria e sozinha. Estas paginas nao carregam style.css nem
   arte-v35.css de proposito: quem chega do Google esta com pressa e
   muitas vezes no 4G. Uma pagina de resultado que baixa a folha inteira
   do sistema para mostrar seis numeros paga um preco que nao precisa
   pagar - e o Google mede isso.

   A cor de cada loteria entra por --cor / --claro, escritas no proprio
   HTML a partir da configuracao. Uma folha so, nove aparencias.
   ===================================================================== */

*{box-sizing:border-box}
body.pub{
  margin:0; padding:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#f6f4fa; color:#2a2035;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body.pub img{max-width:100%}
body.pub a{color:inherit}

/* ---------------------------------------------------------------------
   TOPO E RODAPE
   Enxutos de proposito. A pessoa veio ver um numero, nao um menu.
   --------------------------------------------------------------------- */
.pub-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 20px;
  background:#151027; color:#fff;
}
.pub-marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.pub-marca > span{
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:10px; background:#f0b429; color:#151027;
  font-size:14px; font-weight:800;
}
.pub-marca b{font-size:13px; font-weight:800; letter-spacing:.6px; line-height:1.15}
.pub-marca i{display:block; font-style:normal; font-weight:500; color:#b9b1cd}

.pub-nav{display:flex; align-items:center; gap:8px}
.pub-nav a{
  display:inline-flex; align-items:center; min-height:40px;
  padding:0 13px; border-radius:10px;
  font-size:13.5px; font-weight:700; text-decoration:none; color:#d8d2e4;
}
.pub-nav a:hover{background:rgba(255,255,255,.08)}
.pub-nav .pub-entrar{background:#f0b429; color:#151027}

.pub-main{max-width:840px; margin:0 auto; padding:22px 20px 50px}

.pub-migalha{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin-bottom:18px; font-size:12.5px; color:#6d6580;
}
.pub-migalha a{text-decoration:none; color:#6d6580}
.pub-migalha a:hover{text-decoration:underline}
.pub-migalha b{color:#2a2035}

.pub-rodape{
  padding:28px 20px 34px; background:#151027; color:#9b93b0;
}
.pub-rodape-linha{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px;
  max-width:840px; margin:0 auto 18px;
}
/* Alvo do tamanho do texto, nao da largura da coluna: um link invisivel de
   ponta a ponta e o que fazia a pessoa "clicar no vazio e abrir alguma
   coisa" no celular. Mesmo cuidado da pagina inicial. */
.pub-rodape-linha a{
  display:inline-flex; align-items:center; width:fit-content;
  min-height:44px; padding:0 12px;
  font-size:13.5px; font-weight:600; text-decoration:none; color:#d8d2e4;
}
.pub-isencao{
  max-width:840px; margin:0 auto; padding:15px 17px;
  border-radius:12px; background:rgba(255,255,255,.05);
  border-left:3px solid #f0b429;
  font-size:12.5px; line-height:1.7;
}
.pub-isencao b{color:#fff}
.pub-copy{max-width:840px; margin:16px auto 0; text-align:center; font-size:12px}

/* ---------------------------------------------------------------------
   A CABECA DA PAGINA - a marca, o titulo e AS DEZENAS
   --------------------------------------------------------------------- */
.res-cabeca{
  padding:26px 24px 28px; margin-bottom:18px;
  border-radius:20px; background:#fff;
  border:1px solid #e6e1ee; border-top:5px solid var(--cor,#1d4f8f);
  box-shadow:0 4px 20px rgba(40,25,60,.05);
}
.res-cabeca.sozinha{border-top-color:#f0b429}
.res-marca{margin-bottom:14px; height:44px; display:flex; align-items:center}
.res-marca img{width:auto; height:100%; max-width:190px; object-fit:contain; object-position:left center}

.res-cabeca h1{
  margin:0 0 8px; font-size:27px; line-height:1.2; font-weight:800;
  text-wrap:balance;
}
.res-cabeca h1 span{color:var(--cor,#1d4f8f)}
.res-quando{margin:0 0 20px; font-size:14px; color:#6d6580; line-height:1.6}
.res-quando b{color:var(--cor,#1d4f8f)}
.res-sub{margin:20px 0 9px; font-size:13px; font-weight:800; letter-spacing:.4px; color:#7d7590; text-transform:uppercase}

/* As dezenas. E o que a pessoa veio ver, entao sao a maior coisa da tela. */
.res-dezenas{
  display:flex; flex-wrap:wrap; gap:9px;
  margin:0; padding:0; list-style:none;
}
.res-dezenas li{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--cor,#1d4f8f); color:#fff;
  font-size:21px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
/* Lotomania sorteia 20 dezenas: no tamanho cheio elas ocupariam a tela toda.
   Menores, cabem sem virar rolagem. */
.res-dezenas.muitas li{width:44px; height:44px; font-size:16px}
.res-dezenas.trevos li{width:42px; height:42px; font-size:16px; background:#0f7a45}
.res-dezenas.pequenas li{width:34px; height:34px; font-size:13px; gap:6px}
.res-dezenas.pequenas.muitas li{width:27px; height:27px; font-size:11px}

.res-adicional{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-top:18px; padding-top:16px; border-top:1px solid #eee9f2;
}
.res-adicional > span{font-size:11.5px; font-weight:800; letter-spacing:.5px; color:#7d7590; text-transform:uppercase}
.res-adicional > b{font-size:16px}

.res-selo{
  display:block; margin-top:20px; padding:14px 16px;
  border-radius:13px; font-size:14.5px; font-weight:700; line-height:1.5;
}
.res-selo.acumulou{background:#fdf6e8; border:1px solid #eacf95; color:#8a6413}
.res-selo.saiu{background:#f2fbf6; border:1px solid #8fd6ac; color:#0f7a45}

/* ---------------------------------------------------------------------
   A PREMIACAO
   --------------------------------------------------------------------- */
.res-bloco{
  padding:22px 24px; margin-bottom:18px;
  border-radius:20px; background:#fff; border:1px solid #e6e1ee;
}
.res-bloco h2{margin:0 0 16px; font-size:18px; font-weight:800}

.res-tabela-caixa{overflow-x:auto}
.res-tabela{width:100%; border-collapse:collapse; font-size:14px}
.res-tabela th{
  padding:0 12px 10px 0; text-align:left;
  font-size:11.5px; font-weight:800; letter-spacing:.4px;
  color:#7d7590; text-transform:uppercase; white-space:nowrap;
}
.res-tabela th:last-child, .res-tabela td:last-child{text-align:right; padding-right:0}
.res-tabela td{
  padding:12px 12px 12px 0; border-top:1px solid #eee9f2;
  font-variant-numeric:tabular-nums;
}
.res-tabela tr.principal td{font-weight:800; color:var(--cor,#1d4f8f)}
.res-nota{margin:16px 0 0; font-size:12.5px; color:#7d7590; line-height:1.6}

/* ---------------------------------------------------------------------
   ANDAR ENTRE CONCURSOS
   --------------------------------------------------------------------- */
.res-passo{
  display:flex; justify-content:space-between; gap:11px; margin-bottom:22px;
}
.res-passo-item{
  flex:0 1 auto; min-width:0; padding:13px 17px;
  border-radius:14px; background:#fff; border:1px solid #e6e1ee;
  text-decoration:none;
}
.res-passo-item.direita{text-align:right; margin-left:auto}
.res-passo-item span{display:block; font-size:11.5px; font-weight:800; letter-spacing:.4px; color:#7d7590; text-transform:uppercase}
.res-passo-item b{display:block; margin-top:4px; font-size:14.5px}
.res-passo-item:hover{border-color:var(--cor,#1d4f8f)}

/* ---------------------------------------------------------------------
   O CONVITE - vem depois do que a pessoa veio buscar, nunca antes
   --------------------------------------------------------------------- */
.res-convite{
  padding:26px 24px; margin-bottom:18px;
  border-radius:20px; background:#151027; color:#c9c2da;
}
.res-convite-selo{
  display:inline-block; margin-bottom:12px; padding:5px 11px;
  border-radius:999px; background:rgba(240,180,41,.15); color:#f0b429;
  font-size:11px; font-weight:800; letter-spacing:.6px;
}
.res-convite h2{margin:0 0 12px; font-size:21px; line-height:1.3; color:#fff; text-wrap:balance}
.res-convite > p{margin:0 0 20px; font-size:14px; line-height:1.7}

.res-convite-itens{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:11px; margin-bottom:22px;
}
.res-convite-itens > div{
  min-width:0; padding:14px 15px; border-radius:13px;
  background:rgba(255,255,255,.06);
}
.res-convite-itens b{display:block; font-size:14px; color:#fff}
.res-convite-itens small{display:block; margin-top:4px; font-size:12.5px; line-height:1.5}

.res-convite-botao{
  display:inline-flex; align-items:center; min-height:50px;
  padding:0 24px; border-radius:13px;
  background:#f0b429; color:#151027;
  font-size:15px; font-weight:800; text-decoration:none;
}

/* ---------------------------------------------------------------------
   AS OUTRAS LOTERIAS
   --------------------------------------------------------------------- */
.res-outras h2{margin:0 0 14px; font-size:16px; font-weight:800}
.res-outras-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
}
.res-outras-grade a{
  display:flex; align-items:center; gap:9px; min-width:0;
  padding:13px 14px; border-radius:13px;
  background:#fff; border:1px solid #e6e1ee; text-decoration:none;
}
.res-outras-grade a:hover{border-color:var(--cor)}
.res-outras-grade i{flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--cor)}
.res-outras-grade b{display:block; font-size:13.5px; line-height:1.25}
.res-outras-grade small{display:block; margin-top:2px; font-size:11.5px; color:#7d7590}

/* ---------------------------------------------------------------------
   A LISTA DAS NOVE (pagina /resultado)
   --------------------------------------------------------------------- */
.idx-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:13px; margin-bottom:26px;
}
.idx-cartao{
  display:block; min-width:0; padding:17px 18px;
  border-radius:18px; background:#fff; text-decoration:none;
  border:1px solid #e6e1ee; border-top:4px solid var(--cor);
  box-shadow:0 3px 14px rgba(40,25,60,.05);
  transition:transform .15s ease;
}
.idx-cartao:hover{transform:translateY(-2px)}
.idx-topo{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; min-height:30px}
.idx-topo img{width:auto; height:28px; max-width:130px; object-fit:contain; object-position:left center}
.idx-topo b{font-size:14px; font-weight:800}
.idx-topo span{flex-shrink:0; font-size:12px; font-weight:800; color:#7d7590; font-variant-numeric:tabular-nums}
.idx-cartao .res-dezenas li{background:var(--cor)}
.idx-pe{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px; padding-top:12px; border-top:1px solid #eee9f2;
}
.idx-pe small{font-size:12px; color:#7d7590}
.idx-pe b{font-size:12.5px; color:#0f7a45}
.idx-pe b.acumulou{color:#8a6413}

/* ---------------------------------------------------------------------
   CELULAR
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .pub-main{padding:16px 14px 40px}
  .res-cabeca{padding:20px 17px 22px; border-radius:17px}
  .res-cabeca h1{font-size:22px}
  .res-dezenas{gap:7px}
  .res-dezenas li{width:47px; height:47px; font-size:18px}
  .res-dezenas.muitas li{width:37px; height:37px; font-size:14px}
  .res-bloco, .res-convite{padding:18px 17px; border-radius:17px}
  .res-convite h2{font-size:18px}

  /* A tabela de premiacao vira cartao: em 375px as tres colunas ficariam
     espremidas ou empurrariam a pagina para o lado. O rotulo de cada valor
     vem do data-rotulo escrito no proprio HTML. */
  .res-tabela, .res-tabela tbody, .res-tabela tr, .res-tabela td{display:block; width:100%}
  .res-tabela thead{display:none}
  .res-tabela tbody tr{
    padding:13px 14px; margin-bottom:9px;
    border:1px solid #e6e1ee; border-radius:13px;
  }
  .res-tabela tbody tr.principal{border-color:var(--cor,#1d4f8f); background:var(--claro,#eef3fb)}
  .res-tabela tbody td{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:4px 0; border:0; text-align:left;
  }
  .res-tabela tbody td::before{
    content:attr(data-rotulo);
    font-size:11.5px; font-weight:700; color:#7d7590; white-space:nowrap;
  }
  .res-tabela tbody td:last-child{text-align:right; font-weight:800}

  .res-passo{flex-direction:column}
  .res-passo-item, .res-passo-item.direita{text-align:left; margin-left:0}
  .idx-grade{grid-template-columns:1fr}
  .res-outras-grade{grid-template-columns:1fr 1fr}
}

/* O "1º sorteio / 2º sorteio" ao lado da faixa, so na Dupla Sena. Discreto:
   e uma qualificacao da linha, nao um titulo. */
.res-tabela em{
  display:inline-block; margin-left:7px; padding:2px 7px;
  border-radius:6px; background:#f1edf7;
  font-style:normal; font-size:11px; font-weight:700; color:#6d6580;
  white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   V97 - A BUSCA POR CONCURSO OU DATA, E O PROXIMO SORTEIO
   --------------------------------------------------------------------------- */
.res-busca{
  max-width:760px; margin:18px auto 0; padding:0 4px;
}
.res-busca label{
  display:block; margin:0 0 7px; font-size:12.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:#7d7590;
}
.res-busca-linha{display:flex; gap:8px}
.res-busca-linha input[type=search]{
  flex:1 1 auto; min-width:0; min-height:48px; padding:0 14px;
  border:1px solid #ded7ea; border-radius:12px; background:#fff;
  font:inherit; font-size:16px; color:#241f2e;
}
.res-busca-linha select{
  min-height:48px; padding:0 10px; border:1px solid #ded7ea; border-radius:12px;
  background:#fff; font:inherit; font-size:15px; color:#241f2e; max-width:40%;
}
.res-busca-linha input[type=search]:focus, .res-busca-linha select:focus{
  outline:none; border-color:var(--cor,#6f2aa8); box-shadow:0 0 0 3px rgba(111,42,168,.14);
}
.res-busca-linha button{
  flex:0 0 auto; min-height:48px; padding:0 20px; border:0; border-radius:12px;
  background:var(--cor,#6f2aa8); color:#fff; font:inherit; font-size:15px;
  font-weight:800; cursor:pointer;
}
.res-busca-linha button:hover{filter:brightness(1.08)}
.res-busca-recado{
  margin:9px 0 0; padding:10px 13px; border-radius:11px;
  background:#fff6e6; border:1px solid #f0dcb4;
  font-size:14px; line-height:1.5; color:#6b4e12;
}

.res-proximo{
  max-width:760px; margin:16px auto 0; padding:14px 18px;
  border:1px solid #ded7ea; border-left:4px solid var(--cor,#6f2aa8);
  border-radius:12px; background:#fff;
}
.res-proximo-selo{
  font-size:11px; font-weight:800; letter-spacing:.08em; color:#7d7590;
}
.res-proximo-linha{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-top:4px;
  font-size:17px; color:#241f2e;
}
.res-proximo-linha b{font-weight:800}
.res-proximo small{display:block; margin-top:5px; font-size:12.5px; color:#7d7590}

.idx-proximo{
  margin:8px 0 0; font-size:12.5px; line-height:1.4; color:#6b6479;
}
.idx-proximo b{color:#241f2e}

@media (max-width:640px){
  .res-busca-linha{flex-wrap:wrap}
  .res-busca-linha.com-escolha select{max-width:none; flex:1 1 100%}
  .res-busca-linha input[type=search]{flex:1 1 60%}
  .res-busca-linha button{flex:1 1 30%; padding:0 12px}
}