/* Estudos: celular primeiro, claro/escuro pelo sistema. */
:root {
  --fundo: #f6f7f9; --cartao: #ffffff; --linha: #e4e7eb; --texto: #14181d; --texto2: #4b5563; --mudo: #6b7280;
  --acento: #0f5c63; --acento-claro: #e3f1f2; --acento-texto: #ffffff;
  --serie: #2a78d6; --grade: #e9ebee;
  --bom: #0ca30c; --bom-texto: #067a06; --ruim: #d03b3b; --ruim-texto: #b42626; --atencao: #b7791f;
  --raio: 14px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111315; --cartao: #1a1c1f; --linha: #2c3035; --texto: #eef0f2; --texto2: #c3c7cd; --mudo: #9aa1a9;
    --acento: #3fb0b9; --acento-claro: #16363a; --acento-texto: #08191b;
    --serie: #3987e5; --grade: #2a2d31;
    --bom-texto: #4cc94c; --ruim-texto: #f07070; --atencao: #e0a640;
    --sombra: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo);
  color: var(--texto); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
a { color: var(--acento); }
h1 { font-size: 1.45rem; line-height: 1.25; margin: .2rem 0 .2rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
p { margin: .4rem 0; }
small, .mudo { color: var(--mudo); }
.carregando { text-align: center; color: var(--mudo); padding: 3rem 0; }

#topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: calc(.55rem + env(safe-area-inset-top)) 1rem .55rem; background: var(--fundo);
  border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.marca img { width: 26px; height: 26px; }
#vendo { font-size: .8rem; background: var(--acento-claro); color: var(--texto); padding: .2rem .6rem; border-radius: 99px; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }

#abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; background: var(--cartao);
  border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
#abas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .45rem 0 .5rem;
  font-size: .72rem; color: var(--mudo); text-decoration: none; position: relative; }
#abas a .ic { font-size: 1.25rem; line-height: 1.2; }
#abas a.ativa { color: var(--acento); font-weight: 600; }
#abas b { position: absolute; top: .2rem; left: 54%; background: var(--ruim); color: #fff; font-size: .65rem;
  border-radius: 99px; padding: 0 .38rem; min-width: 1.1rem; text-align: center; }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem;
  margin: 0 0 .9rem; box-shadow: var(--sombra); }
.cartao.destaque { border-color: var(--acento); }
.titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.saudacao small { display: block; }

button, .botao { font: inherit; border: 0; border-radius: 10px; padding: .7rem 1rem; background: var(--acento);
  color: var(--acento-texto); font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: .35rem; min-height: 44px; }
button.sec, .botao.sec { background: var(--acento-claro); color: var(--texto); }
button.leve { background: transparent; color: var(--acento); padding: .4rem .6rem; min-height: 36px; }
button:disabled { opacity: .5; cursor: default; }
.largo { width: 100%; }
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.botoes > * { flex: 1 1 auto; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--cartao); border: 1px solid var(--linha);
  border-radius: 10px; padding: .6rem .7rem; width: 100%; min-height: 44px; }
label { display: block; font-size: .9rem; color: var(--texto2); margin: .7rem 0 .25rem; }
.dias { display: flex; gap: .3rem; flex-wrap: wrap; }
.dias label { margin: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px;
  border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; color: var(--texto); font-size: .85rem; }
.dias input { display: none; }
.dias label:has(input:checked) { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }

/* plano do dia */
.plano { list-style: none; margin: 0; padding: 0; }
.plano li { display: flex; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--linha); align-items: flex-start; }
.plano li:first-child { border-top: 0; padding-top: .2rem; }
.plano .marca-item { flex: 0 0 30px; height: 30px; border-radius: 50%; border: 2px solid var(--linha); display: grid;
  place-items: center; font-size: .9rem; color: var(--mudo); }
.plano li.feito .marca-item { background: var(--bom); border-color: var(--bom); color: #fff; }
.plano li.feito .item-titulo { color: var(--mudo); }
.plano .corpo { flex: 1; min-width: 0; }
.item-titulo { font-weight: 600; }
.item-detalhe { font-size: .9rem; color: var(--texto2); }
.item-acao { margin-top: .45rem; }
.item-acao button, .item-acao .botao { padding: .45rem .9rem; min-height: 38px; font-size: .9rem; }
.progresso { height: 6px; background: var(--grade); border-radius: 99px; overflow: hidden; margin-top: .35rem; }
.progresso i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.numeros div { background: var(--fundo); border-radius: 10px; padding: .6rem .3rem; }
.numeros b { display: block; font-size: 1.35rem; line-height: 1.2; }
.numeros span { font-size: .75rem; color: var(--mudo); }

/* edital */
.disc { padding: .7rem 0; border-top: 1px solid var(--linha); }
.disc:first-of-type { border-top: 0; }
.disc summary { list-style: none; cursor: pointer; }
.disc summary::-webkit-details-marker { display: none; }
.disc-topo { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
.disc-topo small { font-weight: 400; }
.barra { position: relative; height: 10px; background: var(--grade); border-radius: 99px; margin: .4rem 0 .1rem; }
.barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--serie); border-radius: 99px; }
.barra .corte { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--mudo); left: 50%; }
.topicos { list-style: none; padding: 0; margin: .4rem 0 0; }
.topicos a { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem .2rem; text-decoration: none;
  color: var(--texto); border-top: 1px dashed var(--linha); font-size: .93rem; }
.topicos a small { white-space: nowrap; }
.etiqueta { display: inline-block; font-size: .72rem; padding: .05rem .45rem; border-radius: 99px; background: var(--acento-claro);
  color: var(--texto); vertical-align: middle; font-weight: 500; }
.etiqueta.alerta { background: #fdf0d5; color: #6b4a07; }
@media (prefers-color-scheme: dark) { .etiqueta.alerta { background: #3a2e12; color: #f2d48c; } }

/* resumo */
.resumo { font-size: 1rem; }
.resumo h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; color: var(--acento); }
.resumo table { border-collapse: collapse; width: 100%; font-size: .88rem; margin: .6rem 0; display: block; overflow-x: auto; }
.resumo th, .resumo td { border: 1px solid var(--linha); padding: .35rem .5rem; text-align: left; vertical-align: top; }
.resumo th { background: var(--fundo); }
.resumo ul, .resumo ol { padding-left: 1.2rem; }
.resumo li { margin: .2rem 0; }

/* questões */
.q-meta { font-size: .8rem; color: var(--mudo); display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.q-texto { background: var(--fundo); border-radius: 10px; padding: .2rem .9rem; margin: .4rem 0 .7rem; font-size: .95rem; }
.q-texto summary { cursor: pointer; padding: .5rem 0; color: var(--texto2); font-weight: 600; }
.q-enunciado { font-weight: 500; }
.q-enunciado p:first-child { margin-top: 0; }
.alts { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.alts button { width: 100%; text-align: left; justify-content: flex-start; align-items: flex-start; background: var(--cartao);
  color: var(--texto); border: 1.5px solid var(--linha); font-weight: 400; padding: .65rem .75rem; line-height: 1.4; }
.alts button b { flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo); font-size: .85rem; margin-right: .3rem; }
.alts button.escolhida { border-color: var(--acento); background: var(--acento-claro); }
.alts button.certa { border-color: var(--bom); }
.alts button.certa b { background: var(--bom); color: #fff; }
.alts button.errada { border-color: var(--ruim); }
.alts button.errada b { background: var(--ruim); color: #fff; }
.veredito { font-weight: 700; margin: .9rem 0 .2rem; }
.veredito.ok { color: var(--bom-texto); }
.veredito.nao { color: var(--ruim-texto); }
.comentario { background: var(--fundo); border-radius: 10px; padding: .3rem .9rem; font-size: .95rem; }
.contador { font-size: .85rem; color: var(--mudo); }

/* cartões (flashcards) */
.flash { min-height: 180px; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 1.08rem; }
.flash .verso { border-top: 1px solid var(--linha); margin-top: .8rem; padding-top: .8rem; color: var(--texto2); }
.notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .8rem; }
.notas button { padding: .55rem .2rem; font-size: .85rem; flex-direction: column; gap: 0; }
.notas button small { color: inherit; opacity: .75; font-weight: 400; font-size: .7rem; }
.notas .n0 { background: #fde8e8; color: #8a1c1c; } .notas .n1 { background: #fdf0d5; color: #6b4a07; }
.notas .n2 { background: var(--acento-claro); color: var(--texto); } .notas .n3 { background: #e3f4e3; color: #145214; }
@media (prefers-color-scheme: dark) {
  .notas .n0 { background: #3b1d1d; color: #f5b5b5; } .notas .n1 { background: #3a2e12; color: #f2d48c; }
  .notas .n3 { background: #183418; color: #a8e2a8; }
}
.lista-cartoes details { border-top: 1px solid var(--linha); padding: .5rem 0; }
.lista-cartoes summary { cursor: pointer; }
.lista-cartoes p { color: var(--texto2); }

/* simulado */
.cronometro { font-variant-numeric: tabular-nums; font-weight: 600; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: .3rem; margin: .6rem 0; }
.mapa button { min-height: 36px; padding: 0; background: var(--fundo); color: var(--texto); font-weight: 500; font-size: .85rem;
  border: 1px solid var(--linha); }
.mapa button.respondida { background: var(--acento-claro); border-color: var(--acento); }
.mapa button.atual { outline: 2px solid var(--acento); }
.mapa button.certa { background: #e3f4e3; border-color: var(--bom); color: #145214; }
.mapa button.errada { background: #fde8e8; border-color: var(--ruim); color: #8a1c1c; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { padding: .45rem .3rem; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela td.n, .tabela th.n { text-align: right; font-variant-numeric: tabular-nums; }
.status { font-weight: 600; white-space: nowrap; }
.status.ok { color: var(--bom-texto); } .status.nao { color: var(--ruim-texto); }

/* gráficos (uma série; mínimo em cinza) */
.grafico { position: relative; margin-top: .4rem; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { font-size: 10px; fill: var(--mudo); }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .ref { stroke: var(--mudo); stroke-width: 1; }
.grafico .ref-txt { font-size: 10px; fill: var(--texto2); }
.grafico .serie { fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .ponto { fill: var(--serie); stroke: var(--cartao); stroke-width: 2; }
.grafico .ponto.ativo { r: 6; }
.grafico .rotulo { font-size: 11px; fill: var(--texto); font-weight: 600; }
.dica { position: absolute; pointer-events: none; background: var(--texto); color: var(--fundo); font-size: .78rem;
  padding: .3rem .5rem; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -115%); }

/* podcast */
.player audio { width: 100%; margin-top: .4rem; }
.velocidades { display: flex; gap: .3rem; margin-top: .4rem; }
.velocidades button { padding: .3rem .6rem; min-height: 32px; font-size: .8rem; background: var(--fundo); color: var(--texto); font-weight: 500; }
.velocidades button.ativa { background: var(--acento); color: var(--acento-texto); }
.roteiro { white-space: pre-wrap; font-size: .95rem; color: var(--texto2); }

.menu a { display: flex; justify-content: space-between; align-items: center; padding: .9rem .2rem; border-top: 1px solid var(--linha);
  color: var(--texto); text-decoration: none; }
.menu a:first-child { border-top: 0; }
.menu a::after { content: "›"; color: var(--mudo); font-size: 1.3rem; }
.senha-nova { font: 600 1.2rem ui-monospace, monospace; background: var(--fundo); padding: .5rem .8rem; border-radius: 8px; display: inline-block; }

.entrar { max-width: 380px; margin: 8vh auto 0; }
.entrar .marca { justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; }
.entrar .marca img { width: 44px; height: 44px; }
.erro { color: var(--ruim-texto); font-size: .9rem; }

#aviso { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--texto); color: var(--fundo); padding: .55rem 1rem; border-radius: 10px; font-size: .9rem; z-index: 9;
  max-width: 92vw; }
@media (min-width: 800px) { main { padding: 1.5rem 1rem; } }