/* Estudos — mobile primeiro; barra de navegação embaixo no celular e no topo no computador. */
/* Cores de destaque (claro / escuro) escolhidas em Opções → Aparência (html[data-cor]) */
:root { --pri-l: #4f46e5; --pri-d: #7c76f5; }
:root[data-cor="azul"] { --pri-l: #2563eb; --pri-d: #60a5fa; }
:root[data-cor="verde"] { --pri-l: #0f8a4f; --pri-d: #4ade80; }
:root[data-cor="rosa"] { --pri-l: #db2777; --pri-d: #f472b6; }
:root[data-cor="laranja"] { --pri-l: #c2410c; --pri-d: #fb923c; }
:root[data-cor="grafite"] { --pri-l: #475569; --pri-d: #a3b1c6; }

:root {
  color-scheme: light dark;
  --bg: #f5f6fa; --card: #ffffff; --tx: #1b1d2a; --mudo: #6b7080; --borda: #e2e4ee; --vazio: #e7e9f2;
  --pri: var(--pri-l); --pri-tx: #ffffff; --perigo: #dc2626; --ok: #16a34a; --aviso: #fff4d6; --aviso-tx: #6b4e00;
  --sombra: 0 1px 3px rgba(20, 20, 50, .08);
}
:root[data-tema="claro"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #12131a; --card: #1c1e2a; --tx: #eceef8; --mudo: #9aa0b4; --borda: #2c2f40; --vazio: #262a3b;
    --pri: var(--pri-d); --pri-tx: #0e0f18; --perigo: #f87171; --ok: #4ade80; --aviso: #3a2f10; --aviso-tx: #ffd98a;
    --sombra: none;
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #12131a; --card: #1c1e2a; --tx: #eceef8; --mudo: #9aa0b4; --borda: #2c2f40; --vazio: #262a3b;
  --pri: var(--pri-d); --pri-tx: #0e0f18; --perigo: #f87171; --ok: #4ade80; --aviso: #3a2f10; --aviso-tx: #ffd98a;
  --sombra: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: var(--pri); }
h1, h2 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; margin-bottom: .6rem; }
p { margin: .4rem 0 .7rem; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 1rem 0; }
.mudo { color: var(--mudo); font-size: .88rem; }
.centro { text-align: center; }

/* Cabeçalho + navegação */
.cabeca { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .7rem; background: var(--card); border-bottom: 1px solid var(--borda); padding: .7rem 1rem; padding-top: calc(.7rem + env(safe-area-inset-top)); }
#pilula { margin-left: auto; font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 600; text-decoration: none; color: var(--pri); background: color-mix(in srgb, var(--pri) 15%, transparent); padding: .3rem .7rem; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
#pilula[hidden] { display: none; }
.cabeca h1 { font-size: 1.2rem; }
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--card);
  border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom);
}
#nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .45rem; font-size: .72rem; color: var(--mudo); text-decoration: none; }
#nav a .ico { font-size: 1.35rem; line-height: 1; }
#nav a.on { color: var(--pri); font-weight: 600; }

main { max-width: 760px; margin: 0 auto; padding: .8rem 1rem 1rem; }
.rodape { text-align: center; color: var(--mudo); font-size: .78rem; padding: 0 1rem 1rem; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 1rem; margin-bottom: .8rem; box-shadow: var(--sombra); }
.card.destaque { border-left: 6px solid var(--c, var(--pri)); }
.grande-h { font-size: 1.5rem; margin: .1rem 0 .3rem; }
.aviso { background: var(--aviso); color: var(--aviso-tx); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .8rem; }
.aviso a { color: inherit; font-weight: 600; }

/* Botões e formulários */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .5rem 1.1rem; border: 0; border-radius: 12px; background: var(--pri); color: var(--pri-tx); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; width: 100%; }
.btn.sec { background: transparent; color: var(--pri); border: 1.5px solid var(--pri); }
.btn.perigo { background: var(--perigo); color: #fff; }
.btn.grande { min-height: 56px; font-size: 1.1rem; margin-top: .5rem; }
.btn.desat { opacity: .45; }
.btn-mini { min-height: 34px; padding: .2rem .7rem; border: 1px solid var(--borda); border-radius: 9px; background: transparent; color: var(--tx); font: inherit; font-size: .85rem; cursor: pointer; }
.btn-mini.perigo { color: var(--perigo); }
input, select, textarea { width: 100%; font: inherit; color: var(--tx); background: var(--bg); border: 1px solid var(--borda); border-radius: 10px; padding: .6rem .7rem; min-height: 44px; }
textarea { resize: vertical; }
input[type=color] { padding: 2px; width: 46px; min-width: 46px; }
input[type=radio] { width: auto; min-height: 0; }
label { display: block; font-size: .85rem; color: var(--mudo); }
label > input, label > select, label > textarea { margin-top: .25rem; color: var(--tx); }
.form { display: grid; gap: .7rem; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 420px) { .duas { grid-template-columns: 1fr; } }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg); border-radius: 12px; padding: 4px; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: .55rem; border-radius: 9px; color: var(--tx); cursor: pointer; }
.seg input:checked + span { background: var(--pri); color: var(--pri-tx); font-weight: 600; }
.arquivo { margin-top: .8rem; }
.lote { margin-top: .9rem; }
.lote summary { cursor: pointer; color: var(--pri); }

/* Listas */
.item-lista { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; padding: .65rem 0; border-top: 1px solid var(--borda); }
.item-lista:first-of-type { border-top: 0; }
.item-lista .corpo { min-width: 0; flex: 1; }
.item-lista .acoes { display: flex; flex-direction: column; gap: 4px; }
.texto-item { margin: .15rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .55rem; border-radius: 99px; background: color-mix(in srgb, var(--c, var(--mudo)) 20%, transparent); color: var(--tx); border: 1px solid var(--c, var(--borda)); }
.tag.neutra { --c: var(--mudo); }
.filtros { display: grid; gap: .5rem; margin-bottom: .6rem; }
.bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .45rem; }

/* Barras de progresso por matéria */
.linha-barra { margin-bottom: .8rem; }
.linha-barra .topo { position: static; display: flex; justify-content: space-between; gap: .5rem; padding: 0; border: 0; background: none; font-size: .95rem; margin-bottom: 3px; }
.barra { height: 9px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.barra > div { height: 100%; border-radius: 99px; }

/* Resumo do dia */
.grade-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
.num { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: .6rem .3rem; text-align: center; }
.num b { display: block; font-size: 1.1rem; }
.num span { font-size: .68rem; color: var(--mudo); }
@media (max-width: 420px) { .grade-resumo { grid-template-columns: repeat(2, 1fr); } }

/* Cronômetro */
.relogio { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: .4rem 0 .8rem; }

/* Revisão */
.progresso { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.revisao { min-height: 220px; }
.rot { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mudo); margin: .8rem 0 .2rem; }
.texto-rev { font-size: 1.15rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.nota { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62px; border-radius: 12px; border: 0; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; color: #fff; }
.nota small { font-weight: 400; font-size: .72rem; opacity: .9; }
.n1 { background: #dc2626; } .n2 { background: #d97706; } .n3 { background: #16a34a; } .n4 { background: #2563eb; }

/* Configuração de matérias */
.mat-linha { display: flex; gap: .4rem; align-items: center; margin-bottom: .55rem; flex-wrap: wrap; }
.mat-linha input[name=nome] { flex: 1; min-width: 130px; }
.mat-linha .curto { width: 64px; text-align: center; }

#toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: #222; color: #fff; padding: .6rem 1rem; border-radius: 12px; opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw; z-index: 20; font-size: .9rem; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Computador: navegação no topo */
@media (min-width: 800px) {
  body { padding-bottom: 0; }
  .cabeca { gap: 1.2rem; padding: .6rem max(1rem, calc((100vw - 760px) / 2)); }
  #pilula { margin-left: 0; }
  #nav { position: static; border: 0; padding: 0; background: none; margin-left: auto; gap: .2rem; }
  #nav a { flex-direction: row; gap: .4rem; padding: .45rem .8rem; font-size: .9rem; border-radius: 10px; }
  #nav a .ico { font-size: 1rem; }
  #nav a.on { background: color-mix(in srgb, var(--pri) 14%, transparent); }
  #toast { bottom: 24px; }
}

/* ===== v2.0: Progresso, gráficos, Aprender, conquistas ===== */
h3 { font-size: .95rem; margin: 1.1rem 0 .45rem; }
.seg4 { grid-template-columns: repeat(4, 1fr); margin-bottom: .8rem; }
.seg4 span { padding: .5rem .2rem; font-size: .9rem; }
.info { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--mudo); color: var(--mudo); font-size: .7rem; font-weight: 700; text-decoration: none; vertical-align: middle; margin-left: .2rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .55rem; }
.kpi { background: var(--bg); border-radius: 12px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-size: 1.15rem; }
.kpi span { font-size: .75rem; color: var(--mudo); }
.delta { font-size: .7rem; color: var(--mudo); }
.delta.sobe { color: var(--ok); } .delta.desce { color: var(--perigo); }
.grande-num { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.grande-num b { font-size: 2.2rem; line-height: 1; color: var(--pri); }
.grande-num span { color: var(--mudo); font-size: .9rem; }

.graf { width: 100%; height: auto; display: block; }
.graf .gt { fill: var(--mudo); font-size: 9px; }
.graf .gl { stroke: var(--borda); stroke-width: 1; }
.graf .gm { stroke: var(--mudo); stroke-width: 1; stroke-dasharray: 4 3; }
.graf .gb { fill: var(--c, var(--pri)); }
.graf .gline { fill: none; stroke: var(--pri); stroke-width: 2; stroke-linejoin: round; }
.graf .gdot { fill: var(--pri); stroke: var(--card); stroke-width: 1.5; }
.h0 { fill: var(--vazio); background: var(--vazio); }
.h1 { fill: color-mix(in srgb, var(--pri) 25%, var(--vazio)); background: color-mix(in srgb, var(--pri) 25%, var(--vazio)); }
.h2 { fill: color-mix(in srgb, var(--pri) 50%, var(--vazio)); background: color-mix(in srgb, var(--pri) 50%, var(--vazio)); }
.h3 { fill: color-mix(in srgb, var(--pri) 75%, var(--vazio)); background: color-mix(in srgb, var(--pri) 75%, var(--vazio)); }
.h4 { fill: var(--pri); background: var(--pri); }
.legenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--mudo); margin: .5rem 0; }
.cal-leg { align-items: center; justify-content: flex-end; gap: .25rem; }
.q { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pilha { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--vazio); }
.pilha > div { min-width: 3px; }

.anel { width: 104px; height: 104px; flex: none; }
.anel-fundo { fill: none; stroke: var(--vazio); stroke-width: 9; }
.anel-prog { fill: none; stroke: var(--pri); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .4s; }
.anel-t { fill: var(--tx); font-size: 14px; font-weight: 700; }
.anel-s { fill: var(--mudo); font-size: 8px; }
.hoje-anel { display: flex; align-items: center; gap: 1rem; }
.hoje-anel h2 { margin-bottom: .2rem; }
.hoje-anel p { margin: .2rem 0 .4rem; }

.festa { display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: color-mix(in srgb, var(--pri) 14%, var(--card)); }
.conceito-dia p { margin-bottom: .5rem; }
.sacada { display: flex; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--borda); }
.sacada:first-of-type { border-top: 0; }
.sacada .ico { font-size: 1.2rem; }

.conq { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--borda); opacity: .6; }
.conq:first-of-type { border-top: 0; }
.conq.on { opacity: 1; }
.conq .ico { font-size: 1.6rem; }
.conq .corpo { flex: 1; min-width: 0; }
.conq .barra { height: 6px; margin-top: 4px; }
.conq .barra > div { background: var(--pri); }
.conq .nivel { font-size: .8rem; font-weight: 700; color: var(--pri); }

.atalho { display: flex; align-items: center; gap: 1rem; color: inherit; text-decoration: none; }
.atalho .ico { font-size: 1.8rem; }

/* Aprender */
.receita ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.conceito { border-top: 1px solid var(--borda); padding: .6rem 0; }
.conceito summary { cursor: pointer; display: flex; flex-direction: column; gap: .25rem; list-style: none; }
.conceito summary::-webkit-details-marker { display: none; }
.conceito .tit { font-weight: 600; }
.corpo-conceito { padding-top: .4rem; }
.corpo-conceito .rot { margin-top: .7rem; }
.fontes { margin: .2rem 0; padding-left: 1.1rem; font-size: .82rem; color: var(--mudo); }
.selo { align-self: flex-start; display: inline-block; font-size: .68rem; font-weight: 700; padding: .1rem .55rem; border-radius: 99px; border: 1px solid; }
.ev-alta { color: #15803d; background: #dcfce7; border-color: #86efac; }
.ev-moderada { color: #a16207; background: #fef3c7; border-color: #fcd34d; }
.ev-limitada { color: #475569; background: #e2e8f0; border-color: #cbd5e1; }
.ev-mito { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ev-alta { background: #14351f; color: #86efac; border-color: #1f6b3a; }
  :root:not([data-tema="claro"]) .ev-moderada { background: #3a2f10; color: #fcd34d; border-color: #7a5d14; }
  :root:not([data-tema="claro"]) .ev-limitada { background: #272d3a; color: #cbd5e1; border-color: #3d4658; }
  :root:not([data-tema="claro"]) .ev-mito { background: #3d1717; color: #fca5a5; border-color: #7a2a2a; }
}
:root[data-tema="escuro"] .ev-alta { background: #14351f; color: #86efac; border-color: #1f6b3a; }
:root[data-tema="escuro"] .ev-moderada { background: #3a2f10; color: #fcd34d; border-color: #7a5d14; }
:root[data-tema="escuro"] .ev-limitada { background: #272d3a; color: #cbd5e1; border-color: #3d4658; }
:root[data-tema="escuro"] .ev-mito { background: #3d1717; color: #fca5a5; border-color: #7a2a2a; }

/* Escolha de cor */
.cores { display: flex; gap: .6rem; flex-wrap: wrap; }
.cores label { margin: 0; }
.cores input { position: absolute; opacity: 0; }
.cores span { display: block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.cores input:checked + span { border-color: var(--tx); }
.cores input:focus-visible + span { outline: 2px solid var(--pri); outline-offset: 2px; }

@media (max-width: 380px) { #nav a { font-size: .66rem; } }