/* Portal TJPB IA. Visual herdado do FlaRadar: página branca, cabeçalho vermelho com
   filete preto, Libre Franklin na interface e Source Serif 4 na leitura.
   Cores de situação (vermelho/laranja/amarelo/verde) sempre vêm com ícone e rótulo. */
@font-face { font-family: "Libre Franklin"; src: url("/static/fonts/libre-franklin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --vermelho: #c8102e;        /* cabeçalho; texto branco sobre ele: 5,9:1 */
  --vermelho-texto: #b00d27;  /* chapéus e links sobre branco: 6,6:1 */
  --preto: #111;
  --texto: #262626;
  --cinza: #686868;           /* 5,5:1 sobre branco */
  --borda: #e4e4e4;
  --suave: #f5f5f5;
  --fundo: #fff;
  --cartao: #fff;
  --sans: "Libre Franklin", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --largura: 76rem;
  /* situação (fixas, nunca usadas como série) */
  --bom: #0ca30c; --atencao: #fab219; --serio: #ec835a; --critico: #d03b3b;
  /* gráficos */
  --serie-1: #2a78d6; --grade: #e1e0d9; --eixo: #c3c2b7; --rotulo: #6b6a65;
  --seq-0: #f0efec; --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #5598e7; --seq-4: #256abf; --seq-5: #104281;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vermelho-texto: #ff8a9a; --preto: #f0efec; --texto: #dcdbd6; --cinza: #a9a8a2; --borda: #2f2f2d; --suave: #232322;
    --fundo: #121211; --cartao: #1a1a19;
    --serie-1: #3987e5; --grade: #2c2c2a; --eixo: #383835; --rotulo: #a9a8a2;
    --seq-0: #262625; --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #9ec5f4;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--preto); font-family: var(--sans); text-wrap: balance; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; }
.pular { position: absolute; left: -999px; top: .5rem; z-index: 50; background: #fff; color: #111; padding: .5rem 1rem; font-weight: 600; }
.pular:focus { left: 1rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envelope { max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }
.principal { padding-bottom: 4rem; min-height: 70vh; }

/* ---------- Cabeçalho ---------- */
.topo { background: var(--vermelho); color: #fff; border-bottom: 4px solid #000; }
.topo a { text-decoration: none; }
.topo__linha { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.marca { display: flex; align-items: center; gap: .55rem; flex: none; color: #fff; }
.marca svg { width: 2rem; height: 2rem; }
.marca__nome { font: 800 1.5rem/1 var(--sans); letter-spacing: -.04em; }
.marca__nome span { font-weight: 400; }
.menu { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu ul { display: flex; gap: .1rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.menu a { display: block; padding: .45rem .6rem; border-radius: 3px; font-weight: 600; font-size: .9rem; color: #fff; }
.menu a:hover { background: rgba(0, 0, 0, .14); }
.menu a[aria-current="page"] { background: rgba(0, 0, 0, .28); }
.topo__acoes { display: flex; align-items: center; gap: .75rem; flex: none; }
.busca-topo input { width: 9rem; padding: .4rem .7rem; border: 0; border-radius: 999px; font: 500 .875rem var(--sans); background: rgba(255, 255, 255, .92); color: #111; }
.contagem { padding: .3rem .7rem; border-radius: 999px; background: #000; color: #fff; font: 600 .8125rem/1.2 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) {
  .topo__linha { flex-wrap: wrap; gap: .5rem 1rem; padding-top: .7rem; }
  .menu { order: 3; flex-basis: 100%; margin: 0 -1.25rem; padding: 0 .75rem .5rem; }
  .topo__acoes { margin-left: auto; }
  .busca-topo input { width: 7rem; }
}

/* ---------- Peças comuns ---------- */
.chapeu { display: inline-block; font: 700 .8125rem/1.3 var(--sans); color: var(--vermelho-texto); }
.chapeu a { color: inherit; text-decoration: none; }
.chapeu a:hover { text-decoration: underline; }
.selo { display: inline-block; padding: .18rem .4rem; border-radius: 2px; background: var(--preto); color: var(--fundo); font: 700 .625rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: .15em; }
.selo--oficial { background: var(--vermelho); color: #fff; }
.meta { font: 400 .8125rem/1.45 var(--sans); color: var(--cinza); font-variant-numeric: tabular-nums; }
.id { font: 700 .8125rem/1 var(--sans); color: var(--vermelho-texto); font-variant-numeric: tabular-nums; text-decoration: none; }
.vazio { color: var(--cinza); font-style: italic; }
.vazio--grande { padding: 4rem 0; text-align: center; font-style: normal; }
.erro { padding: .7rem 1rem; border-left: 4px solid var(--critico); background: color-mix(in srgb, var(--critico) 10%, var(--fundo)); color: var(--preto); }
.destaque { padding: .7rem 1rem; border-left: 4px solid var(--serie-1); background: var(--suave); }
.pagina-cabeca { padding: 1.75rem 0 1.25rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.25rem; }
.pagina-cabeca h1 { margin: .3rem 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -.026em; }
.linha-fina { margin: 0; font: 400 1.0625rem/1.5 var(--serif); color: var(--texto); }
.edital { margin: 0 0 .5rem; font: 400 .9375rem/1.5 var(--serif); color: var(--cinza); }
.secao-titulo { display: flex; align-items: center; gap: .5rem; margin: 2rem 0 .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--preto); font-size: 1.0625rem; font-weight: 800; }
.secao-titulo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--vermelho); flex: none; }
.duas-colunas { display: grid; gap: 0 2.5rem; }
@media (min-width: 60rem) { .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.com-lado { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .com-lado { grid-template-columns: minmax(0, 1fr) 20rem; } .lado--fixo .caixa { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } }
.caixa { padding: 1rem 1.15rem; border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); border-radius: 4px; background: var(--cartao); margin-bottom: 1.25rem; }
.caixa h2 { margin-bottom: .6rem; font-size: 1rem; font-weight: 800; }
.caixa--antes { border-top-color: var(--serie-1); }
.caixa--depois { border-top-color: var(--bom); margin-top: 1.5rem; }
.lista-curta { margin: 0; padding-left: 1.1rem; }
.lista-curta li { margin: .3rem 0; }

/* Botões em pílula */
.botao { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1.05rem; border: 1px solid var(--vermelho); border-radius: 999px; background: var(--vermelho); color: #fff; font: 700 .875rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.botao:hover { background: #a50d26; border-color: #a50d26; }
.botao--sec { background: transparent; color: var(--vermelho-texto); }
.botao--sec:hover { background: color-mix(in srgb, var(--vermelho) 10%, transparent); color: var(--vermelho-texto); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.link { padding: 0; border: 0; background: none; color: var(--vermelho-texto); font: inherit; text-decoration: underline; cursor: pointer; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.barra-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
form.inline { display: inline; }
.fechar { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cinza); }

/* Abas */
.abas { display: flex; gap: .25rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: thin; }
.abas a { padding: .6rem .8rem; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; font-size: .9375rem; color: var(--cinza); text-decoration: none; white-space: nowrap; }
.abas a:hover { color: var(--preto); }
.abas a[aria-current="page"] { color: var(--preto); border-bottom-color: var(--vermelho); }

/* Formulários */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: 0 0 1.25rem; padding: .9rem 1rem; background: var(--suave); border-radius: 4px; }
.filtros label { display: grid; gap: .25rem; font: 600 .8125rem var(--sans); color: var(--cinza); }
input, select, textarea { font: 400 1rem/1.4 var(--sans); color: var(--texto); background: var(--cartao); border: 1px solid #bdbdbd; border-radius: 4px; padding: .5rem .6rem; max-width: 100%; }
textarea { width: 100%; resize: vertical; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; }
label { font-weight: 600; font-size: .875rem; }

/* Situação */
.status { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem .12rem .35rem; border-radius: 999px; font: 600 .78rem/1.35 var(--sans); white-space: nowrap; border: 1px solid transparent; color: var(--preto); }
.status__icone { font-weight: 800; }
.status--vermelho { background: color-mix(in srgb, var(--critico) 16%, var(--fundo)); border-color: color-mix(in srgb, var(--critico) 55%, var(--fundo)); }
.status--vermelho .status__icone, .status--vermelho > span:first-child { color: var(--critico); }
.status--laranja { background: color-mix(in srgb, var(--serio) 18%, var(--fundo)); border-color: color-mix(in srgb, var(--serio) 60%, var(--fundo)); }
.status--amarelo { background: color-mix(in srgb, var(--atencao) 20%, var(--fundo)); border-color: color-mix(in srgb, var(--atencao) 70%, var(--fundo)); }
.status--verde { background: color-mix(in srgb, var(--bom) 14%, var(--fundo)); border-color: color-mix(in srgb, var(--bom) 55%, var(--fundo)); }
.status--verde > span:first-child { color: var(--bom); }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 1rem; }
.barra { display: inline-block; width: 4.5rem; height: .45rem; border-radius: 999px; background: var(--suave); vertical-align: middle; overflow: hidden; border: 1px solid var(--borda); }
.barra > span { display: block; height: 100%; background: var(--serie-1); border-radius: 999px; }

/* Painel */
.hoje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--borda); font-size: .875rem; color: var(--cinza); }
.hoje strong { color: var(--preto); }
.hoje a { text-decoration: none; }
.cartoes-hoje { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.cartao-acao { display: grid; gap: .15rem; padding: 1rem 1.1rem; border: 1px solid var(--borda); border-left: 4px solid var(--serie-1); border-radius: 4px; text-decoration: none; background: var(--cartao); }
.cartao-acao:hover { border-color: var(--preto); }
.cartao-acao--vermelho { border-left-color: var(--critico); }
.cartao-acao__num { font: 800 2rem/1 var(--sans); color: var(--preto); letter-spacing: -.03em; }
.cartao-acao__rot { font-weight: 700; color: var(--preto); }
.numeros { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin: 0 0 1rem; }
.numero { display: grid; gap: .1rem; padding: .9rem 1rem; background: var(--suave); border-radius: 4px; }
.numero__valor { font: 800 1.6rem/1.1 var(--sans); color: var(--preto); letter-spacing: -.02em; }
.numero__rot { font-weight: 600; font-size: .875rem; }
.pilulas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.pilula { display: inline-flex; gap: .3rem; padding: .25rem .65rem; border-radius: 999px; font: 700 .8125rem/1.3 var(--sans); text-decoration: none; color: var(--preto); border: 1px solid var(--borda); }
.pilula--vermelho { background: color-mix(in srgb, var(--critico) 16%, var(--fundo)); border-color: color-mix(in srgb, var(--critico) 55%, var(--fundo)); }
.pilula--laranja { background: color-mix(in srgb, var(--serio) 18%, var(--fundo)); }
.pilula--amarelo { background: color-mix(in srgb, var(--atencao) 22%, var(--fundo)); }
.pilula--verde { background: color-mix(in srgb, var(--bom) 14%, var(--fundo)); }
.ranking { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.ranking li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.ranking a { text-decoration: none; font-weight: 600; }
.ranking a:hover { color: var(--vermelho-texto); }

/* Mapa de calor dos tópicos */
.calor { display: grid; gap: .3rem; }
.calor__linha { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .5rem; align-items: center; }
.calor__materia { font: 800 .8125rem var(--sans); text-decoration: none; color: var(--preto); }
.calor__celulas { display: flex; flex-wrap: wrap; gap: 2px; }
.celula { display: grid; place-items: center; width: 2.35rem; height: 2.1rem; border-radius: 3px; text-decoration: none; font: 700 .7rem/1 var(--sans); color: var(--preto); border: 1px solid var(--borda); position: relative; }
.celula small { font: 600 .6rem/1 var(--sans); color: var(--cinza); }
.celula--vermelho { background: color-mix(in srgb, var(--critico) 22%, var(--fundo)); border-color: color-mix(in srgb, var(--critico) 60%, var(--fundo)); color: var(--critico); }
.celula--laranja { background: color-mix(in srgb, var(--serio) 30%, var(--fundo)); }
.celula--amarelo { background: color-mix(in srgb, var(--atencao) 35%, var(--fundo)); }
.celula--verde { background: color-mix(in srgb, var(--bom) 25%, var(--fundo)); color: var(--bom); }
.celula:hover { outline: 2px solid var(--preto); outline-offset: 1px; }

/* Gráficos */
.grafico { width: 100%; height: auto; display: block; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .eixo { stroke: var(--eixo); stroke-width: 1; }
.grafico .rotulo-y { fill: var(--rotulo); font: 500 11px var(--sans); text-anchor: end; font-variant-numeric: tabular-nums; }
.grafico .rotulo-x, .calendario .rotulo-x { fill: var(--rotulo); font: 500 11px var(--sans); text-anchor: middle; }
.calendario .rotulo-x.esq { text-anchor: start; }
.calendario .rotulo-y { fill: var(--rotulo); font: 500 10px var(--sans); text-anchor: end; }
.serie-1 { fill: var(--serie-1); }
.grafico .linha { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .ponto { stroke: var(--fundo); stroke-width: 2; }
.grafico .meta { stroke: var(--rotulo); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico .rotulo-meta { fill: var(--rotulo); font: 600 11px var(--sans); text-anchor: end; }
.grafico .alvo, .calendario .alvo { fill: transparent; }
.grafico .alvo:hover { fill: color-mix(in srgb, var(--serie-1) 8%, transparent); }
.calendario { width: 100%; max-width: 30rem; height: auto; display: block; }
.calendario .dia { stroke: var(--fundo); stroke-width: 1; }
.dia.n0, .dia-ex.n0 { fill: var(--seq-0); background: var(--seq-0); }
.dia.n1, .dia-ex.n1 { fill: var(--seq-1); background: var(--seq-1); }
.dia.n2, .dia-ex.n2 { fill: var(--seq-2); background: var(--seq-2); }
.dia.n3, .dia-ex.n3 { fill: var(--seq-3); background: var(--seq-3); }
.dia.n4, .dia-ex.n4 { fill: var(--seq-4); background: var(--seq-4); }
.dia.n5, .dia-ex.n5 { fill: var(--seq-5); background: var(--seq-5); }
.calendario .dia:hover { stroke: var(--preto); }
.legenda-cal { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--cinza); }
.dia-ex { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; }
.dica { position: fixed; z-index: 60; max-width: 22rem; padding: .45rem .65rem; border-radius: 4px; background: var(--preto); color: var(--fundo); font: 500 .8125rem/1.4 var(--sans); pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }

/* Tabelas */
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: .55rem .5rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela thead th { font-size: .75rem; color: var(--cinza); font-weight: 700; white-space: nowrap; }
.tabela tbody th { font-weight: 600; }
.tabela tbody th a { text-decoration: none; }
.tabela tbody th a:hover { color: var(--vermelho-texto); }
.tabela .num { text-align: right; white-space: nowrap; }
.paginas { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.paginas a { padding: .3rem .6rem; border: 1px solid var(--borda); border-radius: 3px; text-decoration: none; }
.paginas a[aria-current="page"] { background: var(--preto); color: var(--fundo); }

/* Matérias */
.grade-materias, .grade-cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.cartao-materia, .cartao-opcao { display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.15rem; border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); border-radius: 4px; text-decoration: none; background: var(--cartao); }
.cartao-materia:hover, a.cartao-opcao:hover { border-color: var(--preto); border-top-color: var(--vermelho); }
.cartao-materia h2, .cartao-opcao h2, .cartao-opcao h3 { font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -.012em; }
.cartao-opcao p { margin: 0; font: 400 .9375rem/1.5 var(--serif); }
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .3rem 0; }
.mini dt { font-size: .6875rem; color: var(--cinza); font-weight: 600; }
.mini dd { margin: 0; font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.doc-recolhido { margin: 1.5rem 0; border: 1px solid var(--borda); border-radius: 4px; }
.doc-recolhido > summary { padding: .8rem 1rem; cursor: pointer; font-weight: 700; }
.doc-recolhido > .texto, .doc-recolhido > .rolagem { padding: 0 1rem 1rem; }
.lab { margin: .5rem 0; } .lab pre { overflow-x: auto; padding: 1rem; background: var(--suave); border-radius: 4px; }

/* Texto longo (Markdown) */
.texto { font: 400 1.0625rem/1.65 var(--serif); color: var(--texto); overflow-wrap: anywhere; }
.texto h1 { font-size: 1.6rem; margin: 1.5rem 0 .75rem; }
.texto h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; font-weight: 800; }
.texto h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; font-weight: 800; }
.texto h4 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.texto p, .texto ul, .texto ol { margin: 0 0 .9rem; }
.texto a { color: var(--vermelho-texto); }
.texto table { width: 100%; border-collapse: collapse; margin: 1rem 0; font: 400 .9rem/1.45 var(--sans); display: block; overflow-x: auto; }
.texto th, .texto td { padding: .45rem .55rem; border: 1px solid var(--borda); text-align: left; vertical-align: top; }
.texto th { background: var(--suave); }
.texto pre { overflow-x: auto; padding: .9rem 1rem; background: var(--suave); border-radius: 4px; line-height: 1.45; }
.texto :not(pre) > code { padding: .1rem .3rem; background: var(--suave); border-radius: 3px; }
.texto blockquote { margin: 1rem 0; padding: .3rem 1rem; border-left: 4px solid var(--vermelho); color: var(--cinza); }
.texto details { margin: .75rem 0; padding: .6rem .9rem; border: 1px solid var(--borda); border-radius: 4px; }
.texto summary { cursor: pointer; font: 700 .9375rem var(--sans); }
.apostila h3 { scroll-margin-top: 1rem; }
.apostila h3.lendo { color: var(--vermelho-texto); }
.subassuntos { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.subassuntos li { display: block; padding: .35rem 0 .35rem .6rem; border-left: 3px solid var(--borda); margin: .15rem 0; }
.subassuntos li.lida { border-left-color: var(--bom); }
.subassuntos li.lida::after { content: " ✓"; color: var(--bom); font-weight: 800; }
.subassuntos li.atual { border-left-color: var(--vermelho); background: var(--suave); }
.sub__num { font-weight: 700; font-variant-numeric: tabular-nums; }
.flashcards-lista { padding-left: 1.2rem; }
.flashcards-lista details { padding: .5rem 0; border-bottom: 1px solid var(--borda); }
.flashcards-lista summary { cursor: pointer; font-weight: 600; }
.itens-fgv { padding-left: 1.1rem; } .itens-fgv li { margin: .55rem 0; }
.ficha-dados { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin: 1.5rem 0; }
.ficha-dados dt { font-size: .75rem; color: var(--cinza); font-weight: 600; } .ficha-dados dd { margin: 0; font-weight: 700; }

/* Quiz */
.quiz, .simulado { margin: 0 0 1.5rem; }
.questao { padding: 1.25rem 1.3rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--cartao); }
.questao__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .75rem; }
.questao__enunciado { margin-bottom: 1rem; }
.alternativas { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.alt { display: flex; gap: .25rem; align-items: stretch; }
.alternativa { flex: 1; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .6rem; align-items: start; padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: 6px; cursor: pointer; font: 400 1rem/1.5 var(--serif); background: var(--fundo); text-align: left; width: 100%; color: var(--texto); }
.alternativa:hover { border-color: var(--preto); }
.alternativa__letra { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--cinza); font: 800 .875rem var(--sans); }
.alternativa.escolhida { border-color: var(--preto); box-shadow: inset 0 0 0 1px var(--preto); }
.alternativa.escolhida .alternativa__letra { background: var(--preto); color: var(--fundo); }
.alt.riscada .alternativa__texto { text-decoration: line-through; opacity: .45; }
.alternativa.certa { border-color: var(--bom); background: color-mix(in srgb, var(--bom) 10%, var(--fundo)); }
.alternativa.certa .alternativa__letra { background: var(--bom); color: #fff; border-color: var(--bom); }
.alternativa.errada { border-color: var(--critico); background: color-mix(in srgb, var(--critico) 9%, var(--fundo)); }
.alternativa.errada .alternativa__letra { background: var(--critico); color: #fff; border-color: var(--critico); }
.riscar { border: 0; background: none; color: var(--cinza); font: 600 .75rem var(--sans); cursor: pointer; padding: .2rem .3rem; }
.riscar:hover { color: var(--preto); }
.confianca { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .25rem; padding: .7rem .9rem; background: var(--suave); border-radius: 6px; }
.confianca button[aria-pressed="true"] { background: var(--preto); color: var(--fundo); border-color: var(--preto); }
.feedback { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 6px; border-left: 4px solid var(--cinza); background: var(--suave); }
.feedback--certa { border-left-color: var(--bom); }
.feedback--errada { border-left-color: var(--critico); }
.feedback h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.progresso-quiz { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; font: 600 .875rem var(--sans); }
.cronometro { font: 800 1.35rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--preto); }
.cronometro--grande { font-size: clamp(3rem, 2rem + 6vw, 5.5rem); letter-spacing: -.03em; margin: .5rem 0; }
.cronometro.acabando { color: var(--critico); }
.resumo-final { padding: 1.5rem; border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); border-radius: 6px; }
.resumo-final h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.grade-simulado { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: .3rem; margin: 1rem 0; }
.grade-simulado button { padding: .4rem 0; border: 1px solid var(--borda); border-radius: 4px; background: var(--fundo); color: var(--texto); font: 700 .8125rem var(--sans); cursor: pointer; }
.grade-simulado button.respondida { background: var(--suave); border-color: var(--cinza); }
.grade-simulado button.marcada { box-shadow: inset 0 -3px 0 var(--atencao); }
.grade-simulado button.atual { outline: 2px solid var(--vermelho); }
.correcao { padding: 0; list-style: none; }
.correcao li { border-bottom: 1px solid var(--borda); padding: .5rem 0; }
.correcao summary { cursor: pointer; }
.outros-modos { margin: 2rem 0 0; font-size: .875rem; color: var(--cinza); }
.outros-modos a { color: var(--vermelho-texto); }

/* Flashcards (SRS) */
.cartao-srs { min-height: 15rem; display: grid; align-content: start; gap: 1rem; padding: 1.5rem; border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); border-radius: 6px; background: var(--cartao); }
.cartao-srs__frente { font: 600 1.25rem/1.45 var(--serif); color: var(--preto); }
.cartao-srs__verso { padding-top: 1rem; border-top: 1px dashed var(--borda); font: 400 1.0625rem/1.6 var(--serif); }
.notas-srs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.notas-srs button { display: grid; gap: .1rem; padding: .7rem .5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: var(--texto); font: 700 .9375rem var(--sans); cursor: pointer; }
.notas-srs button:hover { border-color: var(--preto); }
.notas-srs small { font-weight: 500; color: var(--cinza); }
.notas-srs .n1 { border-bottom: 3px solid var(--critico); } .notas-srs .n2 { border-bottom: 3px solid var(--serio); }
.notas-srs .n3 { border-bottom: 3px solid var(--serie-1); } .notas-srs .n4 { border-bottom: 3px solid var(--bom); }
@media (max-width: 30rem) { .notas-srs { grid-template-columns: repeat(2, 1fr); } }

/* Lacunas, associação, relâmpago */
.frase-lacuna { font: 400 1.2rem/1.7 var(--serif); padding: 1.25rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--cartao); }
.frase-lacuna input { font: 600 1.1rem var(--serif); min-width: 9rem; padding: .2rem .4rem; }
.frase-lacuna .certo { border-color: var(--bom); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bom) 40%, transparent); }
.frase-lacuna .errado { border-color: var(--critico); box-shadow: 0 0 0 2px color-mix(in srgb, var(--critico) 40%, transparent); }
.colunas-assoc { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .colunas-assoc { grid-template-columns: 1fr 1fr; } }
.colunas-assoc ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.item-assoc { width: 100%; text-align: left; padding: .7rem .85rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: var(--texto); font: 400 .975rem/1.45 var(--serif); cursor: pointer; }
.item-assoc:hover { border-color: var(--preto); }
.item-assoc.selecionado { border-color: var(--preto); box-shadow: inset 0 0 0 1px var(--preto); }
.item-assoc.feito { border-color: var(--bom); background: color-mix(in srgb, var(--bom) 10%, var(--fundo)); cursor: default; }
.item-assoc.errou { animation: tremer .3s; border-color: var(--critico); }
@keyframes tremer { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .item-assoc.errou { animation: none; } }
.afirmacao { padding: 1.5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--cartao); }
.afirmacao__p { font: 600 1.1rem/1.45 var(--serif); color: var(--preto); margin-bottom: .75rem; }
.afirmacao__r { font: 400 1.05rem/1.6 var(--serif); padding-top: .75rem; border-top: 1px dashed var(--borda); }
.placar { font: 700 1rem var(--sans); }

/* Pegadinhas */
.pegadinhas ol { padding: 0; list-style: none; display: grid; gap: .9rem; }
.pegadinha { padding: 1rem 1.1rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--cartao); }
.pegadinha__texto { font: 400 1.0625rem/1.6 var(--serif); margin-top: .35rem; }
.borrado strong { filter: blur(6px); user-select: none; transition: filter .2s; }
.pegadinha.revelada .borrado strong { filter: none; }
.pegadinha.sabia { border-left: 4px solid var(--bom); } .pegadinha.caiu { border-left: 4px solid var(--critico); }

/* Mapas */
.lista-mapas { columns: 2 18rem; padding-left: 1.1rem; } .lista-mapas li { margin: .35rem 0; break-inside: avoid; }
.arvore, .arvore ul { list-style: none; margin: 0; padding-left: 1.1rem; border-left: 1px solid var(--borda); }
.arvore { padding-left: 0; border-left: 0; }
.arvore li { margin: .25rem 0; }
.arvore summary { cursor: pointer; font-weight: 700; padding: .15rem 0; }
.arvore .folha { display: inline-block; padding: .1rem .3rem; border-radius: 3px; font: 400 .975rem/1.45 var(--serif); }
.no-status { display: inline-block; padding: 0 .3rem; border-radius: 999px; font-size: .75rem; text-decoration: none; border: 1px solid var(--borda); }
.mapa--completar .folha:not(.revelada) .no-texto { filter: blur(6px); cursor: pointer; user-select: none; }
.mapa--completar .folha:not(.revelada) { background: var(--suave); cursor: pointer; }
.folha.lembrou { box-shadow: inset 3px 0 0 var(--bom); } .folha.esqueceu { box-shadow: inset 3px 0 0 var(--critico); }
.autoav { margin-left: .4rem; } .autoav button { font-size: .75rem; padding: .1rem .45rem; }

/* Tutor e agentes */
.tutor { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; }
.tutor__abrir { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: var(--preto); color: var(--fundo); font: 700 .9375rem var(--sans); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.tutor__abrir span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--vermelho); color: #fff; font-size: .8rem; }
.tutor__painel { position: absolute; right: 0; bottom: 3.6rem; width: min(26rem, calc(100vw - 2rem)); max-height: min(75vh, 44rem); overflow: auto; padding: 1rem 1.1rem; border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); border-radius: 6px; background: var(--cartao); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.tutor__cab { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.tutor__nome { margin: .1rem 0 0; font-weight: 700; color: var(--preto); }
.tutor__form { display: grid; gap: .35rem; }
.agente { margin: .5rem 0; }
.agente__saida:empty, .tutor__saida:empty { display: none; }
.agente__saida, .tutor__saida { margin-top: .6rem; }
.espera { display: flex; align-items: center; gap: .5rem; color: var(--cinza); font-size: .875rem; }
.espera::before { content: ""; width: .9rem; height: .9rem; border: 2px solid var(--borda); border-top-color: var(--vermelho); border-radius: 50%; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .espera::before { animation: none; } }
.resposta-agente { padding: .9rem 1rem; border: 1px solid var(--borda); border-left: 4px solid var(--serie-1); border-radius: 4px; background: var(--fundo); font: 400 .975rem/1.6 var(--serif); }
.resposta-agente h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.resposta-agente h4 { font-size: .9375rem; margin: .9rem 0 .3rem; }
.resposta-agente ul, .resposta-agente ol { padding-left: 1.2rem; }
.checagem details { margin: .2rem 0 .6rem; }
.criadas { padding-left: 1.1rem; } .criadas li { margin: .4rem 0; }
.mnemonico { padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.mnemonico__texto { font: 700 1.05rem/1.45 var(--sans); color: var(--preto); margin: .2rem 0; }

/* Dúvidas, notas, pendentes */
.duvidas, .notas, .pendentes, .achados, .agenda-lista { padding: 0; list-style: none; }
.duvida, .notas > li, .pendentes > li, .agenda-lista > li { padding: 1rem 0; border-bottom: 1px solid var(--borda); }
.duvida header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; }
.duvida__pergunta { font: 600 1.05rem/1.45 var(--serif); color: var(--preto); margin: .4rem 0; }
.duvida details > summary { cursor: pointer; font-weight: 700; margin: .4rem 0; }
.achados li { padding: .7rem 0; border-bottom: 1px solid var(--borda); }
.achados a { font-weight: 700; }
.texto-aluno { white-space: pre-wrap; font: 400 1rem/1.6 var(--serif); background: var(--suave); padding: .8rem 1rem; border-radius: 4px; }

/* Discursiva */
.discursiva__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0 .5rem; position: sticky; top: 0; z-index: 5; padding: .5rem 0; background: var(--fundo); }
.linhas { font: 700 .9375rem var(--sans); font-variant-numeric: tabular-nums; }
.linhas.estourou { color: var(--critico); }
.folha { background-image: repeating-linear-gradient(transparent, transparent 1.65rem, var(--borda) 1.65rem, var(--borda) calc(1.65rem + 1px)); line-height: 1.7rem; }
.espelho { margin-top: 1.5rem; } .espelho summary { cursor: pointer; font-weight: 700; }
.enunciado-disc { padding: 1rem 1.2rem; background: var(--suave); border-radius: 6px; }
.folha-prova { white-space: normal; }

/* Recordação, pomodoro, cronograma */
.chaves { columns: 2 12rem; padding-left: 1.1rem; }
.chaves .achou { color: var(--bom); font-weight: 700; } .chaves .achou::before { content: "✓ "; }
.chaves .faltou { color: var(--critico); } .chaves .faltou::before { content: "✕ "; }
.pomodoro { text-align: center; padding: 1.5rem; border: 1px solid var(--borda); border-top: 3px solid var(--vermelho); border-radius: 6px; max-width: 36rem; margin: 0 auto; }
.pomodoro .acoes { justify-content: center; }
.pomodoro__fase { font: 800 1rem var(--sans); color: var(--vermelho-texto); text-transform: uppercase; letter-spacing: .08em; margin: 1rem 0 0; }
.semanas { padding: 0; list-style: none; display: grid; gap: .9rem; }
.semana { padding: .9rem 1rem; border: 1px solid var(--borda); border-radius: 4px; }
.semana h2 { font-size: 1rem; margin: .15rem 0 .5rem; }
.semana--atual { border-color: var(--vermelho); border-width: 2px; }
.semana--passada { opacity: .9; }
.materia-prog { border-bottom: 1px solid var(--borda); }
.materia-prog > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem 0; cursor: pointer; font-weight: 700; }
.passos { padding-left: 1.2rem; }

/* Login */
.entrar { max-width: 26rem; padding-top: 3rem; padding-bottom: 4rem; }
.entrar h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.form-entrar { display: grid; gap: .45rem; margin-top: 1.5rem; }
.form-entrar input { padding: .7rem .8rem; }
.form-entrar .botao { justify-self: start; margin-top: .75rem; }

/* Rodapé */
.rodape { border-top: 4px solid #000; background: var(--suave); }
.rodape__linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.1rem; padding-bottom: 5rem; font-size: .8125rem; color: var(--cinza); }
.rodape a { color: inherit; }
.carregando { color: var(--cinza); }

@media print { .topo, .tutor, .rodape, .barra-acoes, .abas { display: none; } }