/* =====================================================================
   MEUS JOGOS

   Folha propria, carregada so nesta tela e no botao de guardar. Fica
   separada porque a style.css ja e grande e mexida por varias telas -
   arquivo novo nao tem como quebrar o que ja funciona.

   A cor de cada cartao vem de --cor, escrita no HTML a partir da
   configuracao da loteria. Uma folha so, nove aparencias.
   ===================================================================== */

.mj-secao{padding-bottom:70px}

/* ---------------------------------------------------------------------
   1. O AVISO - "seu jogo premiou"
   Vem antes de tudo e e a unica coisa verde da tela. Se tudo tivesse
   destaque, nada teria.
   --------------------------------------------------------------------- */
.mj-aviso{
  padding:22px; margin-bottom:26px; border-radius:18px;
  background:#f2fbf6; border:2px solid #8fd6ac;
}
.mj-aviso-topo{display:flex; gap:13px; align-items:flex-start; margin-bottom:16px}
.mj-aviso-topo > span{flex-shrink:0; font-size:26px; line-height:1.1}
.mj-aviso-topo > div{min-width:0}
.mj-aviso-topo b{display:block; font-size:16px; color:#0f5c36; line-height:1.4}
.mj-aviso-topo small{display:block; margin-top:5px; font-size:13px; color:#4a7a60}

.mj-aviso-lista{display:grid; gap:8px; margin-bottom:16px}
.mj-aviso-item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px;
  padding:11px 14px; border-radius:11px;
  background:#fff; border:1px solid #cfead9;
}
.mj-aviso-item b{font-size:14px; color:#2a2035}
.mj-aviso-item span{font-size:12.5px; color:#7d7590}
.mj-aviso-item em{
  margin-left:auto; font-style:normal; font-size:13.5px;
  font-weight:800; color:#0f7a45;
}
.mj-aviso button{
  min-height:44px; padding:0 18px; border:0; border-radius:11px;
  background:#0f7a45; color:#fff; font-size:14px; font-weight:800; cursor:pointer;
}

/* ---------------------------------------------------------------------
   2. A LISTA
   --------------------------------------------------------------------- */
.mj-topo-lista{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px; margin-bottom:18px;
}
.mj-periodo{display:flex; flex-direction:column; gap:5px; min-width:0}
.mj-periodo label{font-size:11.5px; font-weight:800; letter-spacing:.4px; color:#7d7590; text-transform:uppercase}
.mj-periodo select{
  min-height:44px; padding:0 12px; border-radius:11px;
  border:1.5px solid #ddd5e8; background:#fff;
  /* 16px porque abaixo disso o iPhone amplia a tela sozinho ao tocar */
  font-size:16px; font-weight:600; color:#2a2035;
}

.mj-lista{display:grid; gap:14px}

.mj-jogo{
  min-width:0; padding:19px 20px; border-radius:18px;
  background:#fff; border:1px solid #e6e1ee;
  border-left:5px solid var(--cor,#6f2aa8);
  box-shadow:0 3px 16px rgba(40,25,60,.05);
}
.mj-jogo-topo{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.mj-jogo-nome{min-width:0}
.mj-jogo-nome b{display:block; font-size:16px; color:#2a2035; overflow-wrap:anywhere}
.mj-jogo-nome span{display:block; margin-top:3px; font-size:12.5px; font-weight:700; color:var(--cor,#6f2aa8)}
.mj-apagar{
  flex-shrink:0; min-height:36px; padding:0 13px;
  border:1px solid #e6d5d5; border-radius:9px; background:#fff;
  font-size:12.5px; font-weight:700; color:#a35050; cursor:pointer;
}
.mj-apagar:hover{background:#fdf5f5; border-color:#f0b9b9}

.mj-dezenas{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none;
}
.mj-dezenas li{
  display:grid; place-items:center;
  min-width:34px; height:34px; padding:0 6px; border-radius:9px;
  background:var(--cor,#6f2aa8); color:#fff;
  font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;
}
.mj-trevos{margin:-6px 0 14px; font-size:13px; color:#6d6580}
.mj-trevos i{
  font-style:normal; display:inline-grid; place-items:center;
  width:26px; height:26px; margin-left:5px; border-radius:50%;
  background:#0f7a45; color:#fff; font-size:12px; font-weight:800;
}

.mj-resumo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px; margin-bottom:12px;
}
.mj-resumo > div{
  min-width:0; padding:12px 14px; border-radius:12px; background:#f8f6fb;
}
.mj-resumo small{display:block; font-size:11px; font-weight:800; letter-spacing:.4px; color:#7d7590; text-transform:uppercase}
.mj-resumo b{display:block; margin-top:5px; font-size:19px; color:#2a2035; font-variant-numeric:tabular-nums}
.mj-resumo span{display:block; margin-top:2px; font-size:11.5px; color:#7d7590}
/* Verde so quando entrou dinheiro - mesma regra do resto do site. */
.mj-resumo .mj-ganhou{background:#f2fbf6; border:1px solid #8fd6ac}
.mj-resumo .mj-ganhou b{color:#0f7a45}

.mj-detalhe > summary{
  cursor:pointer; padding:9px 0; font-size:13.5px; font-weight:700;
  color:var(--cor,#6f2aa8); list-style:none;
}
.mj-detalhe > summary::-webkit-details-marker{display:none}
.mj-detalhe > summary::before{content:"▸ "; display:inline-block; transition:transform .15s}
.mj-detalhe[open] > summary::before{content:"▾ "}

.mj-tabela-caixa{overflow-x:auto}
.mj-tabela{width:100%; min-width:0; border-collapse:collapse; font-size:13.5px}
.mj-tabela th{
  padding:0 12px 8px 0; text-align:left; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.4px; color:#7d7590; text-transform:uppercase;
}
.mj-tabela td{padding:9px 12px 9px 0; border-top:1px solid #eee9f2; font-variant-numeric:tabular-nums}
.mj-tabela tr.premiou td{background:#f6fdf9; font-weight:700}
.mj-tabela tr.premiou td:last-child{color:#0f7a45}

/* ---------------------------------------------------------------------
   3. QUANDO NAO HA NENHUM
   Tela vazia sem caminho e tela morta. Esta diz o que fazer e da o botao.
   --------------------------------------------------------------------- */
.mj-vazio{
  padding:38px 26px; text-align:center;
  border-radius:20px; background:#fff; border:1px dashed #d8d0e6;
}
.mj-vazio > span{display:block; font-size:44px; margin-bottom:14px}
.mj-vazio h2{margin:0 0 11px; font-size:21px; text-wrap:balance}
.mj-vazio p{max-width:520px; margin:0 auto 22px; font-size:14.5px; line-height:1.7; color:#6d6580}
.mj-vazio-links{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:9px; max-width:640px; margin:0 auto;
}
.mj-vazio-links a{
  display:flex; align-items:center; gap:9px; min-height:46px; padding:0 14px;
  border-radius:12px; background:#f8f6fb; border:1px solid #e6e1ee;
  font-size:13.5px; font-weight:700; text-decoration:none; color:#2a2035;
}
.mj-vazio-links a:hover{border-color:var(--cor)}
.mj-vazio-links i{flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--cor)}

.mj-nota{
  margin:26px 0 0; padding:15px 17px; border-radius:12px;
  background:#f4f1f8; font-size:12.5px; line-height:1.7; color:#6d6580;
}
.mj-nota b{color:#2a2035}

/* ---------------------------------------------------------------------
   O BOTAO "GUARDAR ESTE JOGO" - aparece nas telas de analise
   --------------------------------------------------------------------- */
.mj-guardar{
  display:inline-flex; align-items:center; gap:9px;
  min-height:48px; padding:0 20px; margin-top:16px;
  border:2px solid var(--accent,#6f2aa8); border-radius:12px;
  background:#fff; color:var(--accent,#6f2aa8);
  font-size:14.5px; font-weight:800; cursor:pointer;
}
.mj-guardar:hover{background:var(--soft,#f3eaf9)}
.mj-guardar[disabled]{opacity:.6; cursor:default}
.mj-guardar.pronto{background:#f2fbf6; border-color:#8fd6ac; color:#0f7a45}

/* ---------------------------------------------------------------------
   O SININHO na barra de cima
   --------------------------------------------------------------------- */
.mj-sino{position:relative}
.mj-sino .mj-conta{
  position:absolute; top:2px; right:2px;
  min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px;
  background:#0f7a45; color:#fff;
  font-size:10.5px; font-weight:800; line-height:1;
}

@media (max-width:760px){
  .mj-jogo{padding:16px 15px; border-radius:15px}
  .mj-aviso{padding:17px 15px; border-radius:15px}
  .mj-aviso-item em{margin-left:0; width:100%}
  .mj-resumo{grid-template-columns:1fr 1fr; gap:8px}
  .mj-resumo > div{padding:10px 11px}
  .mj-resumo b{font-size:17px}
  .mj-vazio{padding:28px 18px}
  .mj-topo-lista{flex-direction:column; align-items:stretch}

  /* A tabela vira cartao: em 375px as quatro colunas ficariam espremidas
     ou empurrariam a pagina para o lado. O rotulo vem do data-rotulo. */
  .mj-tabela, .mj-tabela tbody, .mj-tabela tr, .mj-tabela td{display:block; width:100%}
  .mj-tabela thead{display:none}
  .mj-tabela tbody tr{
    padding:10px 12px; margin-bottom:7px;
    border:1px solid #e6e1ee; border-radius:11px;
  }
  .mj-tabela tbody tr.premiou{border-color:#8fd6ac}
  .mj-tabela tbody td{
    display:flex; justify-content:space-between; gap:12px;
    padding:3px 0; border:0;
  }
  .mj-tabela tbody td::before{
    content:attr(data-rotulo);
    font-size:11.5px; font-weight:700; color:#7d7590;
  }
}