/* ============================================================
   LEAL - Capa clara dos cursos (sobrepoe o estilo escuro)
   Carregado DEPOIS do <style> interno (antes de </head>), entao prevalece.
   Tambem inverte a ordem dos materiais de apoio para:
   Simulacao -> Flashcards -> Cola Rapida.
   ============================================================ */

/* fundo claro */
.cover{
  background:
    radial-gradient(820px 460px at 12% -6%,#fbe2ec 0%,transparent 60%),
    radial-gradient(760px 440px at 90% -4%,#efdde9 0%,transparent 58%),
    linear-gradient(180deg,#fdf8fb 0%,#f7f3f5 100%);
  color:#2b2230;
}
.cover::before{
  background-image:radial-gradient(rgba(130,6,51,.09) 1.1px,transparent 1.1px);
  background-size:26px 26px;
  opacity:.6;
}
.cover::after{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:3;
  background:linear-gradient(90deg,var(--rosa),var(--vinho),var(--leal-ouro,#a97c0a));
}

/* logo colorido (troca a imagem sem mexer no base64 do arquivo) */
.cover img.logo{content:url("logo-leal.svg");height:66px;filter:none}

/* titulo bicolor: nome em bordo, dois-pontos tambem em bordo */
.cover h1{color:#2b2230}
.cover h1 .hg{background:linear-gradient(120deg,var(--rosa),var(--vinho));-webkit-background-clip:text;background-clip:text;color:transparent}
.cover h1 .cln{color:var(--leal-acao-cor,#bb2852)}

/* subtitulo, regua e nota */
.cover .sub{color:#7c727a;opacity:1}
.cover .rule{background:linear-gradient(90deg,var(--rosa),var(--vinho))}
.cover .note{color:#a9929c;opacity:1}

/* chips claros */
.cover .chip{background:#fff;border:1px solid #f0d6e0;color:var(--leal-acao-cor,#bb2852)}

/* botao principal preenchido em bordo (o vinho fica so no pe do degrade) */
.cover .btn-main{background:var(--leal-acao,linear-gradient(135deg,#bb2852,#820633));color:#fff;box-shadow:var(--el-3,0 14px 34px rgba(130,6,51,.16))}
.cover .btn-main:hover{background:var(--leal-acao-hover,linear-gradient(135deg,#c93a62,#8f0a3b));box-shadow:var(--el-3,0 14px 34px rgba(130,6,51,.16))}

/* voltar para a Central */
/* O botão de voltar fica solto no canto de cima da capa. A capa precisa RESERVAR esse espaço,
   senão no celular a logo sobe e passa por baixo do botão. Reservar é melhor do que deixar o
   botão transparente: assim nada se sobrepõe em nenhuma altura de tela. */
.cover{padding-top:calc(78px + env(safe-area-inset-top,0px))!important}
@media (min-width:700px){.cover{padding-top:calc(88px + env(safe-area-inset-top,0px))!important}}
.cover-back{color:var(--leal-acao-cor,#bb2852)!important;background:#fff!important;border:1px solid #f0d6e0!important;box-shadow:var(--el-1,0 1px 3px rgba(40,10,25,.08))!important}
.cover-back:hover{background:#fdf2f6!important}

/* materiais de apoio (claros) */
.cover-mat-t{color:#7c727a!important;opacity:1!important}
.matlink{color:var(--leal-acao-cor,#bb2852)!important;background:#fdf2f6!important;border:1.5px solid #f0d6e0!important}
.matlink:hover{background:#f8e6ee!important;border-color:var(--rosa)!important}
.matlink.ok{color:#15803d!important;background:#e9f7ef!important;border-color:#7fd49a!important}

/* ===== ORDEM DOS MATERIAIS: Simulacao, Flashcards, Cola Rapida ===== */
.cover-mat-b{display:flex}
#matSim{order:1}
#matFlash{order:2}
#matCola{order:3}
/* mesma inversao na tela de conclusao (3 botoes na ordem Cola, Flash, Sim) */
.cert-mat-b{display:flex}
.cert-mat-b a:nth-child(1){order:3}
.cert-mat-b a:nth-child(2){order:2}
.cert-mat-b a:nth-child(3){order:1}

/* ===== Equilíbrio de cores DENTRO dos cursos (módulos) =====
   Ícones decorativos em grafite; bordô segue em botões, progresso e destaques. */
.m-ic{background:linear-gradient(135deg,#5f5f5f,#343434)}
.uicard .ic{background:linear-gradient(135deg,rgba(95,95,95,.13),rgba(52,52,52,.13));color:var(--leal-cinza,#4d4d4d)}
.kvi .ic{background:rgba(77,77,77,.10);color:var(--leal-cinza,#4d4d4d)}
/* selo/etiqueta de módulo segue bordô (igual às tags dos cards da home) */
/* subtítulos (h3.sub) seguem bordô como acento de leitura */
/* contador de pontos do topo em dourado (papel: dourado = pontos e conquistas) */
.pts{background:linear-gradient(135deg,#e0a93a,#b8862b);color:#2c2005}
.pts svg{color:#2c2005}

/* ===== Capa com entrada orquestrada (logo, titulo, chips, botao surgem em sequencia) =====
   Roda so no primeiro carregamento; voltar a capa via home() nao recria os elementos, entao nao repete. */
.cover .inner>*{animation:lealCoverIn .6s cubic-bezier(.22,.8,.3,1) backwards}
.cover .inner>*:nth-child(1){animation-delay:.05s}
.cover .inner>*:nth-child(2){animation-delay:.14s}
.cover .inner>*:nth-child(3){animation-delay:.22s}
.cover .inner>*:nth-child(4){animation-delay:.3s}
.cover .inner>*:nth-child(n+5){animation-delay:.38s}
@keyframes lealCoverIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cover .inner>*{animation:none}}
/* ===== Painel de design 11/07/2026 (portal): conforto de leitura, contraste AA, retomada, mapa de módulos ===== */
/* O teto de largura do TEXTO saiu (era 70ch no corpo e 65ch nos avisos). Ele limitava a linha
   mas não a caixa: no desktop cada aviso ficava com 615px de texto dentro de 1088px de cartão,
   e sobravam 441px de vão morto, com o texto quebrando no meio do nada. Quem manda na medida
   agora é a largura da própria caixa. */
.blk p{line-height:1.72}
.qbar-tx{color:#6d6068}
.cover .sub{color:#675d66}
.cover .note{color:#7a616f}
.cover-mat-t{color:#675d66!important}
.cover-resume{margin-top:var(--e-3,12px);font-size:var(--t-sm,13px);color:#675d66}
.quizbox .qsub .lk-refazmod{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--leal-acao-cor,#bb2852);font-weight:700;text-decoration:underline;cursor:pointer}
.quizbox .qsub .lk-refazmod:hover{color:#a02245}
/* o titulo do modulo recebe foco so para o leitor de tela anunciar a troca:
   nao mostra anel nem o halo branco do indicador de foco do portal */
.m-head h2:focus,.m-head h2:focus-visible{outline:none;box-shadow:none}
#mapPanel{position:absolute;left:0;right:0;top:100%;z-index:41;background:var(--leal-sup,#fff);border-bottom:1px solid var(--leal-linha,#e6e1e4);box-shadow:var(--el-3,0 14px 34px rgba(130,6,51,.16));padding:var(--e-3,12px) var(--e-4,16px) var(--e-4,16px);max-height:min(60vh,420px);overflow:auto}
#mapPanel .mapitem{display:flex;align-items:center;gap:var(--e-3,12px);width:100%;max-width:var(--w-app,1120px);margin:var(--e-1,4px) auto 0;text-align:left;background:var(--leal-sup,#fff);border:1.5px solid var(--leal-linha,#e6e1e4);border-radius:var(--r-2,12px);padding:var(--e-3,12px);font-family:inherit;font-size:var(--t-base,15px);color:var(--leal-tx,#2c2c2c);cursor:pointer}
#mapPanel .mapitem:hover:not(:disabled){border-color:var(--rosa);background:#fdf4f7}
/* o indicador de foco e um so no portal: vem de leal-tokens.css */
#mapPanel .mapitem .mi-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--t-sm,13px);font-variant-numeric:tabular-nums;background:#f0e4e9;color:var(--leal-acao-cor,#bb2852)}
#mapPanel .mapitem.feito .mi-n{background:#e9f7ef;color:#15803d}
#mapPanel .mapitem.atual{border-color:var(--leal-acao-cor,#bb2852);background:#fdf2f6}
#mapPanel .mapitem.atual .mi-n{background:var(--leal-acao,linear-gradient(135deg,#bb2852,#820633));color:#fff}
#mapPanel .mapitem:disabled{opacity:.55;cursor:not-allowed}
#mapPanel .mapitem .mi-t{flex:1;min-width:0}
#mapPanel .mapitem .mi-lk{flex:none;width:15px;height:15px;color:var(--leal-tx-3,#6b6b6b)}

/* ===== "Revisar os módulos": janela para escolher qual rever =====
   Reaproveita o item do menu do topo (.mapitem), agora com o numero do modulo no rotulo. */
.mr-ov{position:fixed;inset:0;z-index:9300;background:rgba(22,4,11,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:6vh var(--e-3,12px) var(--e-3,12px);overflow:auto}
.mr-card{position:relative;width:100%;max-width:520px;background:var(--leal-sup,#fff);border-radius:var(--r-4,20px);padding:var(--e-5,24px) var(--e-5,24px) var(--e-4,16px);box-shadow:var(--el-3,0 14px 34px rgba(130,6,51,.16))}
.mr-card h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:var(--t-lg,20px);color:var(--leal-tx,#2c2c2c);margin:0 34px 0 0;line-height:1.25}
.mr-sub{font-size:var(--t-base,15px);color:var(--leal-tx-3,#6b6b6b);line-height:1.5;margin:var(--e-2,8px) 0 var(--e-4,16px)}
.mr-p{font-size:var(--t-sm,13px);color:var(--leal-tx-3,#6b6b6b);text-align:center;margin:var(--e-4,16px) 0 0}
.mr-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:var(--leal-tx-3,#6b6b6b);font-size:26px;line-height:1;cursor:pointer}
.mr-x:hover{background:#f4eef1;color:var(--leal-acao-cor,#bb2852)}
.mr-lista{max-height:min(52vh,420px);overflow:auto}
.mr-lista .mapitem{display:flex;align-items:center;gap:var(--e-3,12px);width:100%;margin:var(--e-2,8px) 0 0;text-align:left;background:var(--leal-sup,#fff);border:1.5px solid var(--leal-linha,#e6e1e4);border-radius:var(--r-2,12px);padding:var(--e-3,12px);font-family:inherit;font-size:var(--t-base,15px);color:var(--leal-tx,#2c2c2c);cursor:pointer}
.mr-lista .mapitem:hover:not(:disabled){border-color:var(--rosa,#bb2852);background:#fdf4f7}
.mr-lista .mapitem .mi-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--t-sm,13px);font-variant-numeric:tabular-nums;background:#f0e4e9;color:var(--leal-acao-cor,#bb2852)}
.mr-lista .mapitem.feito .mi-n{background:#e9f7ef;color:#15803d}
.mr-lista .mapitem.atual{border-color:var(--leal-acao-cor,#bb2852);background:#fdf2f6}
.mr-lista .mapitem.atual .mi-n{background:var(--leal-acao,linear-gradient(135deg,#bb2852,#820633));color:#fff}
.mr-lista .mapitem:disabled{opacity:.55;cursor:not-allowed}
.mr-lista .mapitem .mi-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mr-lista .mapitem .mi-t b{font-family:'Poppins',sans-serif;font-size:var(--t-sm,13px);font-weight:700;color:var(--leal-acao-cor,#bb2852);letter-spacing:.2px}
.mr-lista .mapitem .mi-t span{line-height:1.35}
.mr-lista .mapitem .mi-lk{flex:none;width:15px;height:15px;color:var(--leal-tx-3,#6b6b6b)}
@media (max-width:520px){.mr-ov{padding-top:3vh}.mr-card{padding:var(--e-4,16px)}}