/* ═══ fase 2 (protótipo): lembretes, desempenho, plano, formato da sessão, redação ═══ */

/* número grande avulso: algarismos proporcionais (tabular só onde números se alinham) */
.contagem .n, .des-hero b, .des-tile b { font-variant-numeric: proportional-nums; }
.anel { border-radius: 50%; }
.anel:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.fora-bt { justify-self: start; margin-top: calc(-1 * var(--s-3)); }

/* ── lembretes ── */
.lem-geral { min-height: 64px; }
.lem-geral b { font-size: var(--t-17); }
.lem-aviso { padding: var(--s-3) var(--s-4); border-radius: var(--r); background: color-mix(in srgb, var(--aten) 12%, var(--sup)); }
.lem-cabe { font-size: var(--t-15); line-height: 1.55; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1); }
.dia { min-height: 44px; border-radius: var(--r-s); background: var(--sup); border: 1px solid var(--sep); font: 600 var(--t-15) var(--f-display); color: var(--txt-2); transition: background var(--d-toque), color var(--d-toque), border-color var(--d-toque); }
.dia[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-txt); }
.horarios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.horario { display: grid; gap: var(--s-1); }
.horario input { min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r); border: 1px solid var(--sep); background: var(--sup); font: 600 var(--t-17) var(--f-display); font-variant-numeric: tabular-nums; }
.horario input:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.bt-link { color: var(--acc); font-weight: 600; margin-left: var(--s-1); min-height: 32px; }

/* ── desempenho ── */
#des-corpo, #pla-corpo, #red-corpo, #rn-corpo, #rc-corpo, #rr-corpo { display: grid; gap: var(--s-6); }
.des-bloco > * + * { margin-top: var(--s-3); }
.des-hero { font-size: var(--t-17); color: var(--txt-2); }
.des-hero b { font-family: var(--f-display); font-size: var(--t-34); color: var(--txt); letter-spacing: -.02em; font-weight: 700; }
.des-hero span { font-size: var(--t-15); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.des-tile { display: grid; gap: 2px; }
.des-tile b { font-family: var(--f-display); font-size: var(--t-28); line-height: 1.05; letter-spacing: -.02em; }
.des-tile span { font-size: var(--t-13); color: var(--txt-2); }
.pouco { font-size: var(--t-15); color: var(--txt-2); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--sup); }
.leitura { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.frase { text-align: left; width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--sup); font-size: var(--t-15); line-height: 1.5; border: 1.5px solid transparent; transition: border-color var(--d-toque); }
.frase.ativa { border-color: var(--acc); }
.metricas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.metrica { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-pill); background: var(--acc-soft); font-size: var(--t-13); color: var(--txt-2); }
.metrica b { color: var(--txt); font-family: var(--f-display); }
.dica-graf { min-height: 20px; }

/* gráficos: traço fino, uma cor por gráfico (o destaque do tema), grade recessiva */
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.g-eixo { stroke: var(--sep); stroke-width: 1; }
.g-grade { stroke: var(--sep); stroke-width: 1; }
.g-ref { stroke: var(--txt-3); stroke-width: 1.5; }
.g-ref.forte { stroke: var(--txt); stroke-width: 2; }
.g-rot { font: 500 11px var(--f-texto); fill: var(--txt-3); font-variant-numeric: tabular-nums; }
.g-txt { font: 500 13px var(--f-texto); fill: var(--txt); }
.g-val { font: 700 13px var(--f-display); fill: var(--txt); font-variant-numeric: tabular-nums; }
.g-trilho { fill: var(--sup-2); }
.g-barra { fill: var(--acc); }
.g-declarado { fill: color-mix(in srgb, var(--acc) 38%, var(--sup)); }
.g-faixa { fill: color-mix(in srgb, var(--acc) 30%, transparent); stroke: var(--acc); stroke-width: 2; }
.g-bigode { stroke: var(--txt); stroke-width: 1.5; }
.g-linha { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-ponto { fill: var(--acc); stroke: var(--bg); stroke-width: 2; }
.g-c0 { fill: var(--sup-2); } .g-c1 { fill: color-mix(in srgb, var(--acc) 30%, var(--sup)); }
.g-c2 { fill: color-mix(in srgb, var(--acc) 62%, var(--sup)); } .g-c3 { fill: var(--acc); }
.g-alvo { cursor: pointer; outline: none; }
.g-alvo:focus-visible .g-barra, .g-ponto:focus-visible { stroke: var(--txt); stroke-width: 2; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-13); color: var(--txt-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legenda i.g-c0 { background: var(--sup-2); } .legenda i.g-c1 { background: color-mix(in srgb, var(--acc) 30%, var(--sup)); }
.legenda i.g-c2 { background: color-mix(in srgb, var(--acc) 62%, var(--sup)); } .legenda i.g-c3, .legenda i.g-barra { background: var(--acc); }
.legenda i.g-declarado { background: color-mix(in srgb, var(--acc) 38%, var(--sup)); }
.legenda i.g-ref-i { height: 2px; border-radius: 1px; background: var(--txt); }
.legenda b { color: var(--txt); font-weight: 600; }

/* ── plano ── */
.semana { background: var(--sup); border-radius: var(--r); padding: var(--s-3) var(--s-4); }
.semana + .semana { margin-top: var(--s-2); }
.semana summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); cursor: pointer; min-height: 40px; list-style: none; }
.semana summary::-webkit-details-marker { display: none; }
.semana .barra { height: 4px; margin: var(--s-2) 0 var(--s-1); }
.blocos { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.blocos li { display: grid; gap: 2px; padding: var(--s-2) 0 var(--s-2) var(--s-3); border-left: 3px solid var(--sep); }
.blocos li b { font-weight: 500; font-size: var(--t-15); }
.blocos .tag { font-size: var(--t-11); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-3); }
.blocos .b-estudo { border-left-color: var(--acc); }
.blocos .b-revisao { border-left-color: color-mix(in srgb, var(--acc) 45%, var(--sup)); }
.blocos .b-simulado { border-left-color: var(--txt); }

/* ── formato da sessão ── */
.q-dir { display: inline-flex; align-items: center; gap: var(--s-3); }
.q-cron { font: 600 var(--t-13) var(--f-display); font-variant-numeric: tabular-nums; color: var(--txt-2); }
.q-cron.acabou { color: var(--aten); }
.ses-bt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--sup); border: 1px solid var(--sep); font-size: var(--t-13); font-weight: 600; color: var(--txt-2); margin-top: var(--s-2); }
.ses-select { width: 100%; min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r); border: 1px solid var(--sep); background: var(--sup); }
.formato { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-3); align-items: center; width: 100%; min-height: 60px; padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--sep); }
.formato:last-child { border-bottom: 0; }
.formato .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--txt-3); display: grid; place-items: center; }
.formato[aria-checked="true"] .radio { border-color: var(--acc); }
.formato[aria-checked="true"] .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); }
.formato:disabled { cursor: default; }
.formato:disabled b { color: var(--txt-3); }
.formato:disabled .radio { border-color: var(--sep); }

/* ── redação ── */
.formula { font-family: var(--f-display); font-weight: 600; font-size: var(--t-17); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--sup); font-variant-numeric: tabular-nums; }
.tema-card { display: grid; gap: var(--s-1); width: 100%; text-align: left; padding: var(--s-4); border-radius: var(--r); background: var(--sup); border: 1.5px solid transparent; transition: border-color var(--d-toque), transform var(--d-toque) var(--mola); }
.tema-card + .tema-card { margin-top: var(--s-2); }
.tema-card:active { transform: scale(.99); }
.tema-card b { font-family: var(--f-display); font-size: var(--t-17); }
.tema-card span { font-size: var(--t-13); color: var(--txt-2); line-height: 1.5; }
.tema-card.meu { background: transparent; border: 1.5px dashed var(--sep); }
.motivador { padding-left: var(--s-3); border-left: 3px solid var(--acc-line); font-size: var(--t-15); color: var(--txt-2); }
.red-area { width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r); border: 1px solid var(--sep); background: var(--sup); font-size: var(--t-15); line-height: 1.6; resize: vertical; }
.red-area:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.linhas-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.linhas-in input { width: 84px; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-s); border: 1px solid var(--sep); background: var(--sup); font: 600 var(--t-17) var(--f-display); text-align: center; }
.incerta { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); align-items: end; padding: var(--s-3) 0; border-bottom: 1px solid var(--sep); }
.recorte { min-height: 52px; display: grid; place-items: center; padding: var(--s-2); border-radius: var(--r-s); background: #FBFAF4; color: #1F2A56; font: italic 500 20px/1.2 "Segoe Script", "Bradley Hand", cursive; transform: rotate(-1.2deg);
  background-image: linear-gradient(transparent 38px, #C9D6EA 38px, #C9D6EA 39px, transparent 39px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.incerta-in { display: grid; gap: var(--s-1); }
.incerta-in input { min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r); border: 1px solid var(--sep); background: var(--sup); font-size: var(--t-17); }
.incerta-in input:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.red-texto { margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) 2.6em; border-radius: var(--r); background: var(--sup); font-size: var(--t-15); line-height: 1.9; }
.red-texto li::marker { color: var(--txt-3); font: 500 11px var(--f-display); }
.ap { display: inline; padding: 0 2px; border-radius: 3px; font: inherit; color: inherit; line-height: inherit; cursor: pointer; }
.ap-erro { background: color-mix(in srgb, var(--erro) 16%, transparent); box-shadow: inset 0 -2px 0 var(--erro); }
.ap-dica { background: color-mix(in srgb, var(--acc) 12%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--acc) 55%, transparent); }
.ap-confira { background: color-mix(in srgb, var(--aten) 16%, transparent); box-shadow: inset 0 -2px 0 var(--aten); }
.legenda i.lg-erro { background: var(--erro); } .legenda i.lg-dica { background: color-mix(in srgb, var(--acc) 55%, var(--sup)); } .legenda i.lg-confira { background: var(--aten); }
.proximos { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-2); font-size: var(--t-15); line-height: 1.5; }
.crit .item-txt span { white-space: normal; }
.ap-status { display: inline-flex; min-height: 26px; align-items: center; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--t-13); font-weight: 600; }
p.ap-status.ap-erro { color: var(--erro); } p.ap-status.ap-dica { color: var(--acc); } p.ap-status.ap-confira { color: var(--aten); }
.trecho { font-size: var(--t-17); font-family: var(--f-display); }
.sugestao { padding: var(--s-3) var(--s-4); border-radius: var(--r); background: color-mix(in srgb, var(--ok) 10%, var(--sup)); }
.sugestao p { font-size: var(--t-17); font-weight: 600; margin-top: 2px; }