/* Telas dos produtos (Materiais): listas, leitura, cursos, prova. Usa as variáveis e classes do app.html. */
.mat{display:grid;gap:10px}
.mat-card{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border-radius:var(--raio);padding:14px;box-shadow:var(--sombra);border:1px solid #F1E8D4}
.mat-ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff}
.mat-card .corpo{flex:1;min-width:0}
.mat-card h3{font-size:17px;margin:0 0 2px;color:var(--tx)}
.mat-card .ref{font-size:13.5px;color:var(--tx2);line-height:1.35;display:block}
.mat-card .estado{flex:none;font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
.mat-card .estado.tem{background:var(--verde-cl);color:var(--verde-esc)}
.mat-card .estado.nao{background:var(--creme2);color:var(--tx2);display:flex;align-items:center;gap:4px}
.mat-card.travado .mat-ico{filter:saturate(.35)}

.camada{position:fixed;inset:0;background:var(--creme);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.camada .barra .tit{flex:1;min-width:0;text-align:right;font-family:var(--titulo);font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-corpo{padding:16px 16px 40px;max-width:720px;margin:0 auto}
.cam-corpo .leitura{padding:4px 0 16px}
.cam-acoes{position:sticky;bottom:0;z-index:2;background:#fff;border-top:1px solid var(--linha);margin:0 -16px -40px;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:center}
.cam-acoes .btn{max-width:340px;min-height:50px;font-size:16px}
.chips.sub{padding-top:0}
.chips.sub .chip{font-size:13px;padding:6px 12px}
.tag.azul{background:var(--azul-cl);color:var(--azul)}
.tag.verde{background:var(--verde-cl);color:var(--verde-esc)}
.tag.amarelo{background:var(--amarelo-cl);color:#7A5B00}
.card .trecho{display:block;font-size:14px;color:var(--tx2);margin-top:4px;line-height:1.4}
.card .ok{flex:none;margin-top:10px;color:var(--verde)}

.leitura .bloco ol,.leitura .bloco ul{margin:0;padding-left:22px}
.leitura .bloco li{margin:0 0 6px}
.leitura .bloco p+p{margin-top:10px}
.leitura .bloco.pre p{white-space:pre-line}
.leitura .meta{color:var(--tx2);font-weight:700;font-size:calc(15px * var(--f));margin:-8px 0 16px}
.leitura .sec-num{display:flex;gap:10px;align-items:flex-start}
.leitura .sec-num .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--azul);color:#fff;font-family:var(--titulo);font-weight:700;display:grid;place-items:center}
.btn-sermao{margin:4px 0 14px}

/* curso */
.progresso{background:#fff;border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra);border:1px solid #F1E8D4;margin:0 0 12px}
.progresso b{font-family:var(--titulo);font-size:18px;color:var(--azul-esc)}
.barra-prog{height:10px;border-radius:99px;background:var(--creme2);overflow:hidden;margin:8px 0 2px}
.barra-prog i{display:block;height:100%;background:var(--verde);border-radius:99px}
.cert{background:var(--amarelo-cl);border:2px solid var(--amarelo);border-radius:var(--raio);padding:14px 16px;margin:0 0 14px}
.cert h3{font-size:17px;margin:0 0 4px}
.cert p{margin:0 0 10px;font-size:14.5px;color:var(--tx2)}
.cert input{margin-bottom:10px;background:#fff}
.modulo-status{display:block;font-size:13px;font-weight:800;margin-top:4px}
.modulo-status.ap{color:var(--verde-esc)}
.modulo-status.te{color:#9A6B00}
.player{background:var(--azul);border-radius:var(--raio);padding:14px 14px 10px;margin:0 0 14px;color:#fff}
.player h2{color:var(--amarelo)!important}
.player audio{width:100%;display:block;margin-top:4px}
.player .dica{font-size:13px;color:#DCE4F7;margin:6px 0 0}
.bloco details summary{cursor:pointer;font-weight:800;color:var(--azul);list-style:none}
.bloco details summary::-webkit-details-marker{display:none}
.bloco details[open] summary{margin-bottom:10px}
.ck{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--linha);font-size:calc(16px * var(--f))}
.ck:first-of-type{border-top:0}
.ck input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--verde)}
.questao{border:0;margin:0 0 16px;padding:0}
.questao legend{font-weight:800;font-size:calc(16.5px * var(--f));line-height:1.45;margin-bottom:8px;padding:0}
.opcao{display:flex;gap:10px;align-items:flex-start;background:var(--creme);border:2px solid var(--linha);border-radius:12px;padding:10px 12px;margin:0 0 8px;font-weight:600;font-size:calc(15.5px * var(--f));line-height:1.4}
.opcao input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--azul)}
.opcao:has(input:checked){border-color:var(--azul);background:var(--azul-cl)}
.questao.certa legend::after{content:"  Certo";color:var(--verde-esc)}
.questao.errada legend::after{content:"  Errado";color:var(--vermelho)}
.opcao.gabarito{border-color:var(--verde);background:var(--verde-cl)}
.explica{font-size:14.5px;color:var(--tx2);margin:2px 0 0;background:var(--creme2);border-radius:10px;padding:8px 10px}
.resultado{border-radius:12px;padding:12px 14px;margin:0 0 12px;font-weight:700}
.resultado.ok{background:var(--verde-cl);color:#1F6B2C;border:1px solid #BFE3C5}
.resultado.nao{background:var(--vermelho-cl);color:#9E1E16;border:1px solid #F6C3BE}