/* Aprovato, componentes (BEM simplificado). Superfícies sólidas, sem bordas decorativas, cantos generosos. */
/* Ícones proprietários (sprite em assets/img/icons/icones.svg) */
.ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--p { width: 18px; height: 18px; }
.ic--g { width: 28px; height: 28px; }
/* Botões: sempre pill. Primário verde com tinta grafite nos dois temas. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--apr-e-2);
height: 48px; padding: 0 var(--apr-e-6); border-radius: var(--apr-raio-pill);
font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap;
background: var(--apr-superficie-2); color: var(--apr-tinta);
transition: transform var(--apr-trans), background var(--apr-trans), opacity var(--apr-trans);
user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primario { background: var(--apr-verde); color: var(--apr-grafite); }
.btn--primario:hover { background: var(--apr-verde-300); }
/* Secundário (167): era uma pastilha branca sobre fundo claro, que sumia na página. Agora é tinta sobre fundo,
então no tema claro fica grafite com texto claro e no escuro se inverte sozinho, sem sumir no fundo. */
.btn--secundario { background: var(--apr-tinta); color: var(--apr-fundo); }
.btn--secundario:hover { background: var(--apr-n-850); color: var(--apr-papel); }
[data-tema="escuro"] .btn--secundario:hover { background: var(--apr-n-000); color: var(--apr-grafite); }
.btn--fantasma { background: transparent; color: var(--apr-tinta-2); }
.btn--fantasma:hover { background: var(--apr-superficie-2); }
.btn--perigo { background: var(--apr-erro); color: #fff; }
.btn--p { height: 36px; padding: 0 var(--apr-e-4); font-size: 14px; }
.btn--g { height: 56px; padding: 0 var(--apr-e-8); font-size: 17px; }
.btn--bloco { width: 100%; }
.btn--icone { width: 44px; height: 44px; padding: 0; border-radius: var(--apr-raio-pill); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn.esta-carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn.esta-carregando::after {
content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
border: 2px solid rgba(19,19,19,0.25); border-top-color: var(--apr-grafite); animation: girar 0.8s linear infinite;
}
.btn--fantasma.esta-carregando::after { border-color: var(--apr-n-300); border-top-color: var(--apr-tinta); }
.btn--secundario.esta-carregando::after { border-color: rgba(241,241,243,0.3); border-top-color: var(--apr-fundo); }
[data-tema="escuro"] .btn--secundario.esta-carregando::after { border-color: rgba(19,19,19,0.25); border-top-color: var(--apr-grafite); }
@keyframes girar { to { transform: rotate(360deg); } }
.link { color: var(--apr-verde-texto); font-weight: 500; }
.link:hover { text-decoration: underline; }
.link--discreto { color: var(--apr-tinta-3); font-size: var(--apr-small); }
/* Navegação em pílulas (o elemento mais reconhecível da interface) */
.pilulas { display: flex; gap: var(--apr-e-1); align-items: center; }
.pilulas__item {
display: inline-flex; align-items: center; gap: var(--apr-e-2); height: 40px; padding: 0 var(--apr-e-4);
border-radius: var(--apr-raio-pill); font-weight: 500; font-size: 15px; color: var(--apr-tinta-2);
transition: background var(--apr-trans), color var(--apr-trans);
/* Rótulo de pílula nunca quebra: "Mapas mentais" em duas linhas dentro da pílula desalinha a linha
inteira e é o que deixava o submenu do admin com cara de bagunça. Sobrou? A faixa rola. */
white-space: nowrap;
}
.pilulas__item:hover { background: var(--apr-superficie-2); color: var(--apr-tinta); }
.pilulas__item.esta-ativo { background: var(--apr-verde); color: var(--apr-grafite); }
.pilulas__item .ic { width: 18px; height: 18px; }
/* Navegação (--nav) x filtro. Decisão do proprietário em 17/09/2026: no MENU, TODA aba é uma etiqueta
cinza. Antes só a ativa tinha fundo e as demais flutuavam soltas sobre o branco, o que numa linha de
onze itens (Conteúdo) parecia bagunça, não menu. Cinza em todas dá uma linha só, legível, e deixa o
verde para os dois estados que importam: passar o mouse (verde suave) e onde você está (verde cheio).
No FILTRO, "ativo" quer dizer O QUE VOCÊ ESCOLHEU, e ali a pílula cheia continua como estava. */
.pilulas--nav .pilulas__item { background: var(--apr-superficie-2); color: var(--apr-tinta-2); }
.pilulas--nav .pilulas__item:hover { background: var(--apr-verde-suave); color: var(--apr-verde-texto); }
.pilulas--nav .pilulas__item.esta-ativo { background: var(--apr-verde); color: var(--apr-grafite); box-shadow: none; }
.pilulas--nav .pilulas__item.esta-ativo:hover { background: var(--apr-verde); color: var(--apr-grafite); }
/* Linha de abas mais larga que a tela: rola para o lado, nunca quebra em duas linhas. O componente
completo, com setas, sombra e arrastar, é .rolavel, logo abaixo; isto aqui é o mínimo para quem
ainda usa só a classe. */
/* A pílula também é usada como botão (as abas das Configurações trocam de painel por JS, não navegam).
Botão não herda fonte nem tira a borda sozinho. */
button.pilulas__item { border: 0; cursor: pointer; font: inherit; font-size: 15px; }
.pilulas--rolavel { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.pilulas--rolavel > li { flex: 0 0 auto; min-width: max-content; }
/* Categorias pessoais de cadernos (12/09/2026): a faixa que rola é o .rolavel da casa desde 17/09/2026
— as 18 regras que havia aqui eram cópia literal dele. Fica só o que é mesmo de Cadernos. */
.cadernos-subnav .pilulas__item { width: auto; max-width: none; overflow: visible; }
/* Botão fixo: verde para ler como ação; a linha vertical à esquerda separa a faixa que rola do botão. */
.pilulas__item--nova { flex: 0 0 auto; border: 0; background: var(--apr-verde); color: var(--apr-grafite); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; position: relative; }
.cadernos-subnav__divisor { flex: 0 0 auto; width: 2px; height: 26px; border-radius: 2px; background: var(--apr-tinta-3, var(--apr-borda)); opacity: .6; }
.menu-contexto { position: fixed; z-index: 60; min-width: 150px; padding: 6px; border-radius: 12px; background: var(--apr-superficie); border: 1px solid var(--apr-borda); box-shadow: 0 10px 30px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.menu-contexto button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--apr-tinta); font: inherit; font-size: 14px; cursor: pointer; }
.menu-contexto button .ic { width: 16px; height: 16px; }
.menu-contexto button:hover { background: var(--apr-superficie-2); }
.menu-contexto button:focus { outline: none; }
.menu-contexto__perigo { color: var(--apr-erro, #c0392b); }
.pilulas__item--nova:hover { background: var(--apr-verde-suave); color: var(--apr-grafite); }
.pilulas__item--nova .ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .pilulas__item--nova span { display: none; } .pilulas__item--nova { padding-inline: 12px; } }
.pilulas__item span.esta-editando { outline: none; display: inline-block; min-width: 150px; border-bottom: 2px solid var(--apr-verde); }
.cadernos-subnav .rolavel__trilho:has(.esta-editando)::after { display: none; }
.pilulas__item span.esta-editando:empty::before { content: attr(data-placeholder); color: var(--apr-tinta-3, #999); }
.pilulas__item--nova-aba { border: 1px dashed var(--apr-verde); }
.seletor-categoria { position: fixed; z-index: 60; width: 260px; padding: 8px; border-radius: 16px; background: var(--apr-superficie); border: 1px solid var(--apr-borda); box-shadow: 0 10px 30px rgba(0,0,0,.15); display: flex; flex-direction: column; gap: 6px; }
.seletor-categoria__busca { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--apr-borda); border-radius: var(--apr-raio-pill); background: var(--apr-superficie-2); color: var(--apr-tinta); font: inherit; font-size: 14px; outline: none; }
.seletor-categoria__busca:focus { border-color: var(--apr-verde); }
.seletor-categoria__lista { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.seletor-categoria__item { text-align: left; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--apr-tinta); font: inherit; font-size: 14px; cursor: pointer; }
.seletor-categoria__item:hover { background: var(--apr-superficie-2); }
.seletor-categoria__item.esta-selecionado { background: var(--apr-verde); color: var(--apr-grafite); font-weight: 600; }
.seletor-categoria__item--neutro { color: var(--apr-tinta-2); }
.seletor-categoria__vazio { padding: 8px 12px; margin: 0; color: var(--apr-tinta-2); font-size: 13px; }
.seletor-categoria__nova { padding: 8px 12px; border: 0; border-top: 1px solid var(--apr-borda); border-radius: 0 0 10px 10px; background: transparent; color: var(--apr-verde-escuro, var(--apr-tinta)); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.seletor-categoria__nova:hover { background: var(--apr-superficie-2); }
.pilulas--rolavel::-webkit-scrollbar { display: none; }
/* Faixa de abas rolável (rolagem.js). NÃO confundir com .faixa, que é a tarja de aviso amarela lá em cima. Abas que não cabem na linha rolam para o lado em vez de quebrar em duas linhas ou de
ficar cortadas sem aviso: sombra na borda enquanto há mais para aquele lado, setas no computador, arrastar com o
mouse, e no celular a rolagem nativa do toque. Nasceu nas categorias de Cadernos e agora é o padrão da casa. */
.rolavel { display: flex; align-items: center; gap: var(--apr-e-2); position: relative; }
.rolavel__trilho { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rolavel__trilho::-webkit-scrollbar { display: none; }
.rolavel__trilho > .pilulas { flex-wrap: nowrap; padding-bottom: 2px; }
.rolavel__trilho > .pilulas > li { flex: 0 0 auto; min-width: max-content; }
.rolavel__trilho .pilulas__item { flex: 0 0 auto; white-space: nowrap; }
.rolavel__seta { flex: 0 0 auto; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--apr-borda); background: var(--apr-superficie); color: var(--apr-tinta); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rolavel__seta:hover { background: var(--apr-superficie-2); }
.rolavel__seta .ic { width: 16px; height: 16px; }
/* A sombra fica no botão, e não no trilho: dentro do trilho ela rolaria junto com as abas. */
.rolavel__trilho.tem-mais + .rolavel__seta::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 40px; pointer-events: none; background: linear-gradient(to right, transparent, var(--apr-fundo)); }
.rolavel__trilho.e-arrastavel, .rolavel__trilho.e-arrastavel .pilulas__item { user-select: none; }
.rolavel__trilho.esta-arrastando, .rolavel__trilho.esta-arrastando .pilulas__item { cursor: grabbing; scroll-behavior: auto; }
.rolavel__trilho.esta-arrastando .pilulas__item { pointer-events: none; }
/* Celular: sem setas (o dedo arrasta) e abas mais justas, para caber mais de uma de cada vez. */
@media (max-width: 720px) {
.rolavel__seta { display: none; }
.rolavel__trilho .pilulas__item { padding-inline: 12px; gap: 6px; font-size: 13px; }
}
/* Chips de filtro */
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
border-radius: var(--apr-raio-pill); background: var(--apr-superficie-2); color: var(--apr-tinta); font-size: 14px; font-weight: 500;
max-width: 100%; white-space: nowrap;
}
/* Nome longo (uma disciplina inteira, por exemplo) corta com reticências em vez de quebrar a linha
e desalinhar o X. Só corta quando não cabe, em tela larga continua inteiro. */
.chip__rotulo, .chip__fechar { flex: 0 0 auto; }
.chip__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip--verde { background: var(--apr-verde-suave); color: var(--apr-verde-texto); }
.chip__fechar { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; color: var(--apr-tinta-3); }
.chip__fechar:hover { background: var(--apr-superficie-3); color: var(--apr-tinta); }
/* Cabeçalho */
.cabecalho { background: var(--apr-fundo); position: sticky; top: 0; z-index: 30; }
.cabecalho__linha { display: flex; align-items: center; gap: var(--apr-e-6); height: 72px; }
.cabecalho__marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -0.03em; }
.cabecalho__marca img { width: 32px; height: 32px; }
.cabecalho__nav { flex: 1; display: flex; justify-content: center; }
.cabecalho__acoes { display: flex; align-items: center; gap: var(--apr-e-2); }
.faixa { background: var(--apr-atencao); color: var(--apr-grafite); font-size: 14px; font-weight: 500; }
.faixa--info { background: var(--apr-verde); }
.faixa__conteudo { display: flex; align-items: center; justify-content: center; gap: var(--apr-e-3); min-height: 40px; padding: 6px 0; flex-wrap: wrap; text-align: center; }
/* A faixa é sempre colorida (verde ou amarela): todo texto e link dentro dela é grafite nos dois temas,
senão o link some no tema escuro, que pinta .link de verde. */
.faixa a, .faixa .link, .faixa button { color: var(--apr-grafite); text-decoration: underline; font-weight: 600; }
/* Menu do avatar */
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--apr-verde); color: var(--apr-grafite); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; letter-spacing: 0; }
.avatar--g { width: 64px; height: 64px; font-size: 22px; }
/* Com foto o círculo vira moldura: a imagem preenche sem distorcer, seja retrato ou paisagem. */
.avatar--foto { overflow: hidden; background: var(--apr-superficie-2); }
.avatar--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-foto { display: flex; align-items: flex-start; gap: var(--apr-e-4); }
.perfil-foto .campo { flex: 1; min-width: 0; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--apr-raio-pill); }
.menu > summary::-webkit-details-marker { display: none; }
.menu__lista { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--apr-superficie); border-radius: var(--apr-raio-card); padding: var(--apr-e-2); box-shadow: var(--apr-sombra-2); z-index: 40; }
[data-tema="escuro"] .menu__lista { background: var(--apr-superficie-2); }
.menu__cabeca { padding: var(--apr-e-3) var(--apr-e-4); }
.menu__item { display: flex; align-items: center; gap: var(--apr-e-3); width: 100%; padding: 10px var(--apr-e-4); border-radius: var(--apr-raio-input); font-size: 15px; font-weight: 500; text-align: left; }
.menu__item:hover { background: var(--apr-superficie-2); }
[data-tema="escuro"] .menu__item:hover { background: var(--apr-superficie-3); }
.menu__sep { height: 1px; background: var(--apr-linha); margin: var(--apr-e-2) var(--apr-e-3); }
/* Barra de abas (mobile) */
.abas { display: none; }
@media (max-width: 720px) {
.cabecalho__nav { display: none; }
.cabecalho__linha { height: 60px; }
.abas {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(56px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom); background: var(--apr-superficie); box-shadow: var(--apr-sombra-2);
}
[data-tema="escuro"] .abas { background: var(--apr-superficie-2); }
.abas__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--apr-tinta-3); min-height: 44px; }
.abas__item.esta-ativo { color: var(--apr-verde-texto); }
.abas__item.esta-ativo .ic { stroke: var(--apr-verde-texto); }
}
/* Cards */
.card { background: var(--apr-superficie); border-radius: var(--apr-raio-card); padding: var(--apr-e-6); box-shadow: var(--apr-sombra-1); }
.card--painel { border-radius: var(--apr-raio-painel); padding: var(--apr-e-8); }
.card--verde { background: var(--apr-verde); color: var(--apr-grafite); box-shadow: none; }
.card--verde .tinta-2, .card--verde .tinta-3, .card--verde .label, .card--verde .metrica__nota, .card--verde .numero__unidade, .card--verde .vazio__texto, .card--verde .lista__meta, .card--verde .campo__rotulo, .card--verde .campo__ajuda { color: rgba(19,19,19,0.7); }
.card--verde .h1, .card--verde .h2, .card--verde .h3, .card--verde .card__titulo, .card--verde .numero, .card--verde .vazio__titulo { color: var(--apr-grafite); }
.card--verde .link { color: var(--apr-grafite); text-decoration: underline; }
.card--verde .btn--primario { background: var(--apr-grafite); color: var(--apr-papel); }
.card--verde .btn--primario:hover { background: var(--apr-n-850); }
/* Botões secundário e fantasma sobre o verde: grafite com contorno, senão sumiam no tema escuro (só apareciam no hover). */
.card--verde .btn--secundario, .card--verde .btn--fantasma { background: transparent; color: var(--apr-grafite); box-shadow: inset 0 0 0 1.5px rgba(19,19,19,0.3); }
.card--verde .btn--secundario:hover, .card--verde .btn--fantasma:hover { background: rgba(19,19,19,0.1); box-shadow: inset 0 0 0 1.5px rgba(19,19,19,0.5); }
.card--plano { box-shadow: none; background: var(--apr-superficie-2); }
.card--compacto { padding: var(--apr-e-4); }
.card--central { margin-left: auto; margin-right: auto; }
.card--clicavel { transition: transform var(--apr-trans), box-shadow var(--apr-trans); display: block; }
.card--clicavel:hover { transform: translateY(-2px); box-shadow: var(--apr-sombra-2); }
.card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--apr-e-3); margin-bottom: var(--apr-e-4); }
/* Ação do card: círculo no canto que leva ao detalhe daquele número. É atalho, nunca a única saída,
todo card com ela tem também um caminho em texto em algum lugar da tela. */
.card__acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--apr-e-3); }
.acao-circulo {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 36px; height: 36px; border-radius: 50%; margin: -4px -4px 0 0;
background: var(--apr-superficie-2); color: var(--apr-tinta-2);
transition: background var(--apr-trans), color var(--apr-trans), transform var(--apr-trans);
}
.acao-circulo:hover { background: var(--apr-verde); color: var(--apr-grafite); transform: translateY(-1px); }
.acao-circulo .ic { width: 18px; height: 18px; }
.card--verde .acao-circulo { background: rgba(19,19,19,0.12); color: var(--apr-grafite); }
.card--verde .acao-circulo:hover { background: var(--apr-grafite); color: var(--apr-verde); }
.card__titulo { font-size: var(--apr-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.card__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--apr-e-3); margin-top: var(--apr-e-4); flex-wrap: wrap; }
.metrica { display: flex; flex-direction: column; gap: var(--apr-e-3); }
.metrica__valor { display: flex; align-items: baseline; }
.metrica__nota { font-size: var(--apr-small); color: var(--apr-tinta-2); }
.tendencia { font-weight: 600; color: var(--apr-verde-texto); }
.card--verde .tendencia { color: var(--apr-grafite); }
/* Formulários: campos de 56px, raio 16, rótulo acima, foco em anel verde */
.form { display: flex; flex-direction: column; gap: var(--apr-e-4); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__rotulo { font-size: 14px; font-weight: 500; color: var(--apr-tinta-2); }
/* Campos lado a lado numa grade: o rótulo cresce para ocupar a sobra, e os controles ficam alinhados
entre si mesmo quando um rótulo ocupa duas linhas e o vizinho só uma, era o que desalinhava o
mapeamento de colunas da importação. Quando todos os rótulos têm a mesma altura, não muda nada. */
.grade > .campo > .campo__rotulo { flex: 1 0 auto; }
.campo__entrada, .campo__select, .campo__area {
width: 100%; height: 56px; padding: 0 var(--apr-e-4); border: 0; border-radius: var(--apr-raio-input);
background: var(--apr-superficie-2); color: var(--apr-tinta); font-size: 16px; outline: none;
transition: box-shadow var(--apr-trans), background var(--apr-trans);
}
[data-tema="escuro"] .campo__entrada, [data-tema="escuro"] .campo__select, [data-tema="escuro"] .campo__area { background: var(--apr-superficie-2); }
.card .campo__entrada, .card .campo__select, .card .campo__area { background: var(--apr-fundo); }
[data-tema="escuro"] .card .campo__entrada, [data-tema="escuro"] .card .campo__select, [data-tema="escuro"] .card .campo__area { background: var(--apr-superficie-2); }
.campo__entrada::placeholder, .campo__area::placeholder { color: var(--apr-tinta-3); }
.campo__entrada:focus, .campo__select:focus, .campo__area:focus { box-shadow: 0 0 0 3px var(--apr-verde); }
.campo__area { height: auto; min-height: 140px; padding: var(--apr-e-4); line-height: 1.5; resize: vertical; }
.campo__area--codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; min-height: 320px; }
.campo__select { appearance: none; -webkit-appearance: none; padding-right: 44px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; }
/* Campo de arquivo: sem caixa de fundo; só o botão pill do sistema e o nome do arquivo ao lado */
.campo__entrada[type="file"], .card .campo__entrada[type="file"], [data-tema="escuro"] .campo__entrada[type="file"], [data-tema="escuro"] .card .campo__entrada[type="file"] {
display: flex; align-items: center; height: 44px; padding: 0; background: transparent; border-radius: var(--apr-raio-pill);
cursor: pointer; color: var(--apr-tinta-3); font-size: 15px; line-height: 44px;
}
.campo__entrada[type="file"]:focus { box-shadow: none; }
.campo__entrada[type="file"]:focus-visible::file-selector-button { outline: 3px solid var(--apr-verde); outline-offset: 2px; }
.campo__entrada[type="file"]::file-selector-button {
height: 44px; margin: 0 14px 0 0; padding: 0 20px; border: 0; border-radius: var(--apr-raio-pill);
background: var(--apr-grafite); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 44px; cursor: pointer;
transition: background var(--apr-trans), color var(--apr-trans);
}
.campo__entrada[type="file"]:hover::file-selector-button { background: var(--apr-verde); color: var(--apr-grafite); }
[data-tema="escuro"] .campo__entrada[type="file"]::file-selector-button { background: var(--apr-verde); color: var(--apr-grafite); }
[data-tema="escuro"] .campo__entrada[type="file"]:hover::file-selector-button { background: var(--apr-verde-300); }
.campo__ajuda { font-size: 13px; color: var(--apr-tinta-3); }
/* Aviso que responde a uma ação da pessoa (ex.: foto escolhida): mesma dica, com peso para ser notada. */
.campo__ajuda--destaque { color: var(--apr-tinta); font-weight: 500; }
.campo__erro { font-size: 13px; color: var(--apr-erro); font-weight: 500; }
.campo.tem-erro .campo__entrada, .campo.tem-erro .campo__select, .campo.tem-erro .campo__area { box-shadow: 0 0 0 3px var(--apr-erro); }
.campo--senha { position: relative; }
.campo--senha .campo__entrada { padding-right: 52px; }
.campo__olho { position: absolute; right: 12px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--apr-tinta-3); }
.campo__olho:hover { background: var(--apr-superficie-3); color: var(--apr-tinta); }
.campo--p .campo__entrada, .campo--p .campo__select { height: 44px; font-size: 15px; }
.form__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--apr-e-4); }
.form__linha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form__acoes { display: flex; gap: var(--apr-e-3); align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: var(--apr-e-2); }
@media (max-width: 720px) { .form__linha, .form__linha--3 { grid-template-columns: minmax(0, 1fr); } .form__acoes .btn { width: 100%; } }
/* Medidor de força da senha: quatro segmentos */
.medidor { display: flex; flex-direction: column; gap: 6px; }
.medidor__barras { display: flex; gap: 6px; }
.medidor__barra { flex: 1; height: 6px; border-radius: 3px; background: var(--apr-superficie-3); transition: background var(--apr-trans); }
.medidor[data-nivel="1"] .medidor__barra:nth-child(-n+1) { background: var(--apr-erro); }
.medidor[data-nivel="2"] .medidor__barra:nth-child(-n+2) { background: var(--apr-atencao); }
.medidor[data-nivel="3"] .medidor__barra:nth-child(-n+3) { background: var(--apr-verde-300); }
.medidor[data-nivel="4"] .medidor__barra:nth-child(-n+4) { background: var(--apr-verde); }
.medidor__texto { font-size: 13px; color: var(--apr-tinta-2); display: flex; gap: var(--apr-e-3); flex-wrap: wrap; }
.medidor__req { display: inline-flex; align-items: center; gap: 4px; }
.medidor__req.esta-ok { color: var(--apr-verde-texto); }
/* Dica ao passar o mouse (176). Era uma regra solta no CSS do admin, só no botão de "visualizar como usuário", e por
isso o resto do produto ficava mudo. Virou componente, e o balão é UM elemento no fim da página, posicionado por
dica.js: dentro do botão ele era cortado por qualquer container que rola (painel de anotações, lista do popup do dia).
Tinta sobre fundo, então se inverte sozinho no tema escuro. */
.dica {
position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
background: var(--apr-tinta); color: var(--apr-fundo);
font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
padding: 6px 8px; border-radius: 6px; box-shadow: var(--apr-sombra-1);
opacity: 0; transition: opacity var(--apr-trans);
}
.dica.esta-visivel { opacity: 1; }
@media (hover: none) { .dica { display: none; } }
/* Checkbox e switch */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; min-height: 44px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__caixa { width: 22px; height: 22px; border-radius: 7px; background: var(--apr-superficie-3); display: inline-flex; align-items: center; justify-content: center; transition: background var(--apr-trans); flex: 0 0 auto; }
.check__caixa .ic { width: 14px; height: 14px; stroke: var(--apr-grafite); stroke-width: 3; opacity: 0; }
.check input:checked + .check__caixa { background: var(--apr-verde); }
.check input:checked + .check__caixa .ic { opacity: 1; }
.check input:focus-visible + .check__caixa { outline: 3px solid var(--apr-verde); outline-offset: 2px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; font-size: 15px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__trilho { width: 48px; height: 28px; border-radius: 14px; background: var(--apr-superficie-3); position: relative; transition: background var(--apr-trans); flex: 0 0 auto; }
.switch__trilho::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--apr-n-000); transition: transform var(--apr-trans); }
.switch input:checked + .switch__trilho { background: var(--apr-verde); }
.switch input:checked + .switch__trilho::after { transform: translateX(20px); background: var(--apr-grafite); }
.switch input:focus-visible + .switch__trilho { outline: 3px solid var(--apr-verde); outline-offset: 2px; }
/* Status, progresso */
.selo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--apr-raio-pill); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; background: var(--apr-superficie-2); color: var(--apr-tinta-2); white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--ok { background: var(--apr-verde-suave); color: var(--apr-verde-texto); }
.selo--atencao { background: rgba(255,182,39,0.18); color: #855700; }
[data-tema="escuro"] .selo--atencao { color: var(--apr-atencao); }
.selo--erro { background: rgba(255,82,82,0.14); color: #C62828; }
[data-tema="escuro"] .selo--erro { color: #FF7A7A; }
.selo--info { background: rgba(77,155,255,0.14); color: #1E5FB3; }
[data-tema="escuro"] .selo--info { color: var(--apr-info); }
.selo--neutro { background: var(--apr-superficie-2); color: var(--apr-tinta-3); }
.barra { display: block; height: 10px; border-radius: 5px; background: var(--apr-superficie-2); overflow: hidden; }
[data-tema="escuro"] .barra { background: var(--apr-superficie-3); }
.card--verde .barra { background: rgba(19,19,19,0.15); }
.barra__preenchimento { display: block; height: 100%; border-radius: 5px; background: var(--apr-verde); transition: width var(--apr-trans-lenta); }
.card--verde .barra__preenchimento { background: var(--apr-grafite); }
.barra--fina { height: 6px; }
/* Trilho hachurado: o "quanto ainda dá para subir" fica desenhado em vez de ser um cinza chapado.
A hachura é do próprio CSS (sem imagem), então acompanha o tema. */
.barra--textura { background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--apr-superficie) 3px 6px); }
[data-tema="escuro"] .barra--textura { background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--apr-superficie) 3px 6px); }
.barra-rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--apr-e-3); margin-bottom: 6px; font-size: 14px; }
.barra-rotulo strong { font-weight: 600; }
/* Listas e tabelas */
.tabela-wrap { overflow-x: auto; border-radius: var(--apr-raio-card); background: var(--apr-superficie); box-shadow: var(--apr-sombra-1); }
.tabela th, .tabela td { padding: 14px var(--apr-e-4); text-align: left; font-size: 15px; vertical-align: middle; }
.tabela th { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--apr-tinta-3); white-space: nowrap; }
.tabela th a { display: inline-flex; align-items: center; gap: 4px; }
.tabela tbody tr { border-top: 1px solid var(--apr-linha); transition: background var(--apr-trans); }
.tabela tbody tr:hover { background: var(--apr-fundo); }
.tabela tbody tr[data-href] { cursor: pointer; }
.tabela tbody tr[data-href]:hover td:first-child, .tabela tbody tr[data-href]:hover .tabela__id { color: var(--apr-verde-texto); }
[data-tema="escuro"] .tabela tbody tr:hover { background: var(--apr-superficie-2); }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela--clicavel tbody tr { cursor: pointer; }
.tabela__vazio td { text-align: center; padding: var(--apr-e-12) var(--apr-e-4); color: var(--apr-tinta-3); }
.lista { display: flex; flex-direction: column; gap: var(--apr-e-2); }
.lista__item { display: flex; align-items: center; gap: var(--apr-e-4); padding: var(--apr-e-4); background: var(--apr-superficie); border-radius: var(--apr-raio-input); transition: transform var(--apr-trans), box-shadow var(--apr-trans); }
.lista__item--clicavel { position: relative; cursor: pointer; }
.lista__item--clicavel:hover { transform: translateY(-1px); box-shadow: var(--apr-sombra-1); }
/* O item inteiro é o clique, inclusive o respiro nas bordas: o link de dentro se estica por cima de
tudo. Assim a lista dispensa o "ver mais" no fim da linha, que só existia para ter onde clicar.
Só vale para item que CONTÉM um link, quando o próprio item já é o , não há filho a esticar. */
.lista__item--clicavel > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lista__conteudo { flex: 1; min-width: 0; }
.lista__titulo { font-weight: 600; }
.lista__meta { font-size: 14px; color: var(--apr-tinta-3); display: flex; gap: var(--apr-e-2); flex-wrap: wrap; }
.ferramentas { display: flex; gap: var(--apr-e-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--apr-e-4); }
.ferramentas .campo { flex: 1 1 200px; }
.ferramentas .campo--busca { flex: 2 1 260px; }
.filtros-ativos { display: flex; gap: var(--apr-e-2); flex-wrap: wrap; margin-bottom: var(--apr-e-4); }
/* Paginação */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--apr-e-3); flex-wrap: wrap; margin-top: var(--apr-e-4); font-size: 14px; color: var(--apr-tinta-2); }
.paginacao__por { display: flex; align-items: center; gap: var(--apr-e-2); }
.paginacao__por select { height: 36px; border-radius: var(--apr-raio-pill); padding: 0 32px 0 14px; }
.paginacao__paginas { display: flex; gap: 4px; align-items: center; }
.paginacao__pagina { min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--apr-raio-pill); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; color: var(--apr-tinta-2); }
.paginacao__pagina:hover { background: var(--apr-superficie-2); }
.paginacao__pagina.esta-ativo { background: var(--apr-verde); color: var(--apr-grafite); }
/* Avisos (toast) e mensagens */
.avisos { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: var(--apr-e-2); width: min(560px, calc(100% - 40px)); }
@media (max-width: 720px) { .avisos { bottom: calc(72px + env(safe-area-inset-bottom)); } }
.aviso { display: flex; align-items: center; gap: var(--apr-e-3); padding: 14px var(--apr-e-4); border-radius: var(--apr-raio-input); background: var(--apr-grafite); color: var(--apr-papel); box-shadow: var(--apr-sombra-2); font-size: 15px; animation: subir var(--apr-trans-lenta); }
[data-tema="escuro"] .aviso { background: var(--apr-n-000); color: var(--apr-grafite); }
.aviso--sucesso { background: var(--apr-verde); color: var(--apr-grafite); }
.aviso--erro { background: var(--apr-erro); color: #fff; }
.aviso--atencao { background: var(--apr-atencao); color: var(--apr-grafite); }
.aviso__acao { margin-left: auto; font-weight: 600; text-decoration: underline; white-space: nowrap; }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.nota { padding: var(--apr-e-4); border-radius: var(--apr-raio-input); background: var(--apr-superficie-2); font-size: 15px; display: flex; gap: var(--apr-e-3); align-items: flex-start; }
.nota--erro { background: rgba(255,82,82,0.12); color: var(--apr-tinta); }
.nota--sucesso { background: var(--apr-verde-suave); }
.nota--atencao { background: rgba(255,182,39,0.16); }
/* Dentro de uma nota colorida o verde de link perde contraste: escurece um tom no tema claro. */
.nota--atencao .link, .nota--erro .link { color: var(--apr-verde-900); }
[data-tema="escuro"] .nota--atencao .link, [data-tema="escuro"] .nota--erro .link { color: var(--apr-verde-300); }
.nota .ic { margin-top: 2px; }
/* Estado vazio */
.vazio { text-align: center; padding: var(--apr-e-12) var(--apr-e-6); display: flex; flex-direction: column; align-items: center; gap: var(--apr-e-3); }
.vazio__icone { width: 64px; height: 64px; border-radius: 20px; background: var(--apr-verde-suave); color: var(--apr-verde-texto); display: grid; place-items: center; }
.vazio__titulo { font-size: var(--apr-h3); font-weight: 600; letter-spacing: -0.02em; }
.vazio__texto { color: var(--apr-tinta-2); max-width: 420px; }
/* Diálogo de confirmação */
.dialogo { border: 0; padding: 0; background: transparent; max-width: min(480px, calc(100% - 40px)); }
.dialogo::backdrop { background: rgba(19,19,19,0.6); }
.dialogo__caixa { background: var(--apr-superficie); border-radius: var(--apr-raio-painel); padding: var(--apr-e-8); display: flex; flex-direction: column; gap: var(--apr-e-4); }
[data-tema="escuro"] .dialogo__caixa { background: var(--apr-superficie-2); }
.dialogo__titulo { font-size: var(--apr-h3); font-weight: 600; letter-spacing: -0.02em; }
.dialogo__texto { color: var(--apr-tinta-2); }
.dialogo__acoes { display: flex; gap: var(--apr-e-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--apr-e-2); }
@media (max-width: 720px) { .dialogo__acoes { flex-direction: column-reverse; } .dialogo__acoes .btn { width: 100%; } }
/* Esqueleto de carregamento */
.esqueleto { background: linear-gradient(90deg, var(--apr-superficie-2) 25%, var(--apr-superficie-3) 50%, var(--apr-superficie-2) 75%); background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: var(--apr-raio-chip); min-height: 16px; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Alternativas de questão */
.alternativas { display: flex; flex-direction: column; gap: var(--apr-e-2); }
.alternativa { display: flex; align-items: flex-start; gap: var(--apr-e-3); width: 100%; padding: 14px var(--apr-e-4); border-radius: var(--apr-raio-input); background: var(--apr-superficie-2); text-align: left; transition: background var(--apr-trans), transform var(--apr-trans); cursor: pointer; line-height: 1.5; }
[data-tema="escuro"] .alternativa { background: var(--apr-superficie-2); }
.card .alternativa { background: var(--apr-fundo); }
[data-tema="escuro"] .card .alternativa { background: var(--apr-superficie-2); }
.alternativa:hover { transform: translateX(2px); }
.alternativa__letra { width: 32px; height: 32px; border-radius: 10px; background: var(--apr-superficie); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: 0 0 auto; }
[data-tema="escuro"] .alternativa__letra { background: var(--apr-superficie-3); }
.alternativa.esta-selecionada { background: var(--apr-verde-suave); }
.alternativa.esta-selecionada .alternativa__letra { background: var(--apr-verde); color: var(--apr-grafite); }
.alternativa.esta-correta { background: var(--apr-verde-suave); }
.alternativa.esta-correta .alternativa__letra { background: var(--apr-verde); color: var(--apr-grafite); }
.alternativa.esta-errada { background: rgba(255,82,82,0.12); }
.alternativa.esta-errada .alternativa__letra { background: var(--apr-erro); color: #fff; }
.alternativa:disabled { cursor: default; transform: none; }
.enunciado { font-size: 17px; line-height: 1.65; white-space: pre-line; }
.enunciado img { border-radius: var(--apr-raio-input); margin-top: var(--apr-e-3); }
.comentario { padding: var(--apr-e-4); border-radius: var(--apr-raio-input); background: var(--apr-verde-suave); white-space: pre-line; line-height: 1.6; }
/* Grade de navegação de questões do simulado */
.grade-questoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.grade-questoes__item { height: 40px; border-radius: 12px; background: var(--apr-superficie-2); font-weight: 600; font-size: 13px; color: var(--apr-tinta-2); display: grid; place-items: center; position: relative; }
.grade-questoes__item.esta-respondida { background: var(--apr-verde-suave); color: var(--apr-verde-texto); }
.grade-questoes__item.esta-atual { outline: 3px solid var(--apr-verde); outline-offset: -3px; }
.grade-questoes__item.esta-marcada::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--apr-atencao); }
.grade-questoes__item.esta-certa { background: var(--apr-verde); color: var(--apr-grafite); }
.grade-questoes__item.esta-errada { background: var(--apr-erro); color: #fff; }
/* Flashcard */
.carta { perspective: 1200px; min-height: 280px; width: 100%; }
.carta__face { position: relative; background: var(--apr-superficie); border-radius: var(--apr-raio-painel); padding: var(--apr-e-12) var(--apr-e-8); min-height: 280px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--apr-sombra-1); text-align: center; font-size: 24px; line-height: 1.45; white-space: pre-line; transition: transform var(--apr-trans-lenta), opacity var(--apr-trans-lenta); }
.carta__face--verso { display: none; background: var(--apr-verde-suave); }
/* O que a carta é (pergunta ou resposta) e o convite a virar ficam nos cantos, fora do caminho do
texto: a carta deixa de ser um retângulo branco com uma frase no meio, sem virar enfeite. */
.carta__selo { position: absolute; top: var(--apr-e-6); left: var(--apr-e-8); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--apr-tinta-3); }
.carta__face--verso .carta__selo { color: var(--apr-verde-texto); }
/* No alto, ao lado do selo: embaixo ele encostaria na última linha de uma carta com texto longo. */
.carta__virar { position: absolute; right: var(--apr-e-6); top: var(--apr-e-4); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--apr-superficie-2); color: var(--apr-tinta-3); }
.carta:hover .carta__virar { background: var(--apr-verde); color: var(--apr-grafite); }
/* Baralho: as bordas das cartas seguintes aparecem por baixo. Diz "tem mais carta aí" com o desenho,
em vez de mais um texto, e é o que tira o vazio do fundo branco. */
.carta-baralho { position: relative; }
.carta-baralho .carta { position: relative; z-index: 2; }
.carta-baralho::before, .carta-baralho::after {
content: ""; display: none; position: absolute; left: 0; right: 0; top: var(--apr-e-8); bottom: -9px;
margin-inline: 14px; border-radius: var(--apr-raio-painel); background: var(--apr-superficie); box-shadow: var(--apr-sombra-1);
}
.carta-baralho.tem-1 { margin-bottom: 14px; } /* espaço para a borda de baixo não encostar na dica */
.carta-baralho.tem-1::before { display: block; z-index: 1; }
.carta-baralho.tem-2 { margin-bottom: 24px; }
.carta-baralho.tem-2::after { display: block; z-index: 0; margin-inline: 30px; bottom: -18px; opacity: 0.6; }
/* Atalhos de teclado: existiam desde sempre no JS e ninguém sabia. */
.tecla { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--apr-superficie-2); color: var(--apr-tinta-2); font-weight: 600; font-size: 12px; }
.carta.esta-virada .carta__face--frente { display: none; }
.carta.esta-virada .carta__face--verso { display: flex; animation: virar var(--apr-trans-lenta); }
/* A volta é espelhada (-90 em vez de +90): a carta desvira pelo lado por onde virou, em vez de
simplesmente trocar. Só depois do primeiro clique (.ja-virou), senão toda carta entraria girando
na tela, animação de entrada que ninguém pediu. */
.carta.ja-virou:not(.esta-virada) .carta__face--frente { animation: desvirar var(--apr-trans-lenta); }
@keyframes virar { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes desvirar { from { transform: rotateY(-90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
/* Mapa mental */
.mapa { overflow: auto; padding: var(--apr-e-4); }
.mapa__no { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--apr-raio-input); background: var(--apr-superficie); box-shadow: var(--apr-sombra-1); font-weight: 500; font-size: 15px; line-height: 1.35; max-width: 360px; }
.mapa__no--central { background: var(--apr-verde); color: var(--apr-grafite); font-weight: 700; font-size: 18px; border-radius: var(--apr-raio-card); padding: 14px 22px; }
.mapa__no--ramo { background: var(--apr-superficie-2); font-weight: 600; }
.mapa__no--folha { background: var(--apr-superficie); font-weight: 400; }
.mapa__lista { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.mapa__lista::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--apr-superficie-3); border-radius: 1px; }
.mapa__item { position: relative; padding: 6px 0; }
.mapa__item::before { content: ""; position: absolute; left: -18px; top: 26px; width: 18px; height: 2px; background: var(--apr-superficie-3); }
.mapa__raiz { padding-left: 0; }
.mapa__raiz::before { display: none; }
.mapa__raiz > .mapa__item::before { display: none; }
.mapa__alternar { width: 22px; height: 22px; border-radius: 50%; background: var(--apr-superficie-3); display: inline-grid; place-items: center; font-size: 12px; flex: 0 0 auto; }
.mapa__item.esta-recolhido > .mapa__lista { display: none; }
/* Cronômetro e barra do simulado */
.cronometro { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.simulado-barra { display: flex; align-items: center; gap: var(--apr-e-4); flex-wrap: wrap; }
.tela-pausa { text-align: center; padding: var(--apr-e-16) var(--apr-e-6); }
/* Passos (importação e checkout) */
.passos { display: flex; gap: var(--apr-e-2); margin-bottom: var(--apr-e-6); flex-wrap: wrap; }
.passo { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--apr-raio-pill); background: var(--apr-superficie-2); font-size: 14px; font-weight: 500; color: var(--apr-tinta-3); }
.passo.esta-ativo { background: var(--apr-verde); color: var(--apr-grafite); }
.passo.esta-feito { color: var(--apr-verde-texto); background: var(--apr-verde-suave); }
.passo__num { width: 22px; height: 22px; border-radius: 50%; background: rgba(19,19,19,0.10); color: var(--apr-tinta-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
[data-tema="escuro"] .passo__num { background: rgba(255,255,255,0.14); }
.passo.esta-ativo .passo__num, .passo.esta-feito .passo__num { color: inherit; }
/* Cartão de oferta (checkout) */
.oferta { display: flex; align-items: center; gap: var(--apr-e-4); padding: var(--apr-e-4); border-radius: var(--apr-raio-card); background: var(--apr-superficie-2); cursor: pointer; transition: background var(--apr-trans); }
.oferta input { position: absolute; opacity: 0; width: 0; height: 0; }
.oferta.esta-selecionada { background: var(--apr-verde); color: var(--apr-grafite); }
.ofertas { display: flex; flex-direction: column; gap: var(--apr-e-2); }
.oferta:has(input:checked) { background: var(--apr-verde); color: var(--apr-grafite); }
.oferta--atual { background: var(--apr-verde); color: var(--apr-grafite); cursor: default; }
.oferta__tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--apr-raio-pill); background: var(--apr-grafite); color: var(--apr-verde); font-size: 11px; font-weight: 600; vertical-align: middle; }
.oferta__nome { font-weight: 600; }
.oferta__valor { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; white-space: nowrap; }
.oferta__valor small { font-size: 13px; font-weight: 500; opacity: 0.7; }
.oferta__nota { font-size: 13px; opacity: 0.75; }
/* Código (ids de transação etc.) */
.codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: var(--apr-superficie-2); padding: 2px 8px; border-radius: 6px; }
.bloco-codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: var(--apr-superficie-2); padding: var(--apr-e-4); border-radius: var(--apr-raio-input); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
/* Gráfico de barras horizontal (desempenho por disciplina) */
.barras-h { display: flex; flex-direction: column; gap: var(--apr-e-3); }
.barras-h__linha { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: var(--apr-e-3); font-size: 14px; }
.barras-h__valor { font-weight: 600; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
/* Gráfico de colunas (cartas por dia / atividade) */
/* Gráficos desenhados em SVG no servidor (app/nucleo/graficos.php).
Todos escalam inteiros (height: auto), então nada de canto oval nem traço esticado. */
.grafico { display: block; width: 100%; height: auto; }
.grafico--rosca { width: 132px; max-width: 100%; margin-inline: auto; }
.grafico__num { font-size: 34px; font-weight: 300; letter-spacing: -0.04em; fill: var(--apr-tinta); }
.grafico__uni { font-size: 13px; font-weight: 600; fill: var(--apr-tinta-3); }
.card--verde .grafico__num { fill: var(--apr-grafite); }
.card--verde .grafico__uni { fill: rgba(19,19,19,0.7); }
/* Sobre o card verde o trilho precisa de outro tom: o cinza claro sumiria. */
.card--verde .grafico { --apr-grafico-trilho: rgba(19,19,19,0.18); --apr-verde: var(--apr-grafite); }
.grafico__rotulos { display: flex; margin-top: 8px; }
.grafico__rotulo { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: var(--apr-tinta-3); letter-spacing: 0.01em; }
.grafico__rotulo.esta-foco { color: var(--apr-verde-texto); }
.grafico__area { position: relative; }
/* Balão do último ponto: HTML por cima do SVG, para ficar no tamanho da fonte e não escalar junto. */
.grafico__balao {
position: absolute; right: 0; transform: translateY(-150%);
background: var(--apr-verde); color: var(--apr-grafite);
font-size: 12px; font-weight: 600; line-height: 1;
padding: 5px 9px; border-radius: var(--apr-raio-pill); white-space: nowrap; pointer-events: none;
}
/* Barras de incidência com largura por atributo (sem estilo inline no HTML) */
.incidencia-item .barra { display: block; }
.incidencia-disc > summary { list-style: none; cursor: pointer; }
.incidencia-disc > summary::-webkit-details-marker { display: none; }
.incidencia-item--sub2 { padding-left: var(--apr-e-12); }
.check--p .check__caixa { width: 18px; height: 18px; border-radius: 5px; }
.campo__select--p { height: 36px; border-radius: var(--apr-raio-pill); padding: 0 32px 0 14px; font-size: 14px; }
/* Layout detalhe: coluna principal + lateral (usado no admin e no aluno) */
.detalhe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--apr-e-4); align-items: start; }
@media (max-width: 960px) { .detalhe { grid-template-columns: minmax(0, 1fr); } }
/* Filtros de seleção múltipla (estilo banco de questões): botão-pílula que abre painel com busca e checkboxes */
.filtros { display: flex; flex-direction: column; gap: var(--apr-e-3); }
.filtros__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--apr-e-2); }
.filtro { position: relative; }
.filtro > summary { list-style: none; }
.filtro > summary::-webkit-details-marker { display: none; }
.filtro__botao {
display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 16px; border-radius: var(--apr-raio-pill);
background: var(--apr-superficie-2); color: var(--apr-tinta); font-size: 15px; cursor: pointer; user-select: none; max-width: 320px;
transition: background var(--apr-trans), box-shadow var(--apr-trans);
}
.filtro__botao:hover { background: var(--apr-superficie-3); }
.filtro[open] .filtro__botao { box-shadow: 0 0 0 3px var(--apr-verde); }
.filtro.esta-ativo .filtro__botao { background: var(--apr-verde-suave); color: var(--apr-verde-texto); }
/* Enquanto a lista vem da API: pílula esmaecida, para o filtro parecer bloqueado em vez de vazio. */
/* Revisão da sessão de flashcards: lista carta a carta, com filtro "só as que errei" em CSS puro. */
/* O card da revisão declarava gap sem ser flex, gap em display:block não faz nada, e era por isso
que a primeira carta encostava no filtro. Agora é coluna de verdade, com 24px (o filtro em
pílulas é alto; 16px ainda parecia colado). */
.revisao { display: flex; flex-direction: column; gap: var(--apr-e-6); }
.revisao__lista { display: flex; flex-direction: column; gap: var(--apr-e-3); }
.revisao__item { padding: var(--apr-e-3) var(--apr-e-4); border-radius: var(--apr-raio-input); background: var(--apr-superficie-2); display: flex; flex-direction: column; gap: 6px; }
.revisao__topo { display: flex; align-items: center; gap: var(--apr-e-2); flex-wrap: wrap; }
.revisao__frente { font-weight: 600; }
.revisao__verso { color: var(--apr-tinta-2); }
[data-revisao-vazio] { display: none; }
.revisao:has(input[value="errei"]:checked) .revisao__item:not([data-resultado="errei"]) { display: none; }
.revisao:has(input[value="errei"]:checked):not(:has(.revisao__item[data-resultado="errei"])) [data-revisao-vazio] { display: block; }
.filtro.esta-carregando .filtro__botao { opacity: .55; }
.filtro.esta-carregando .filtro__lista { opacity: .4; }
.filtro__rotulo { font-weight: 600; }
.filtro__rotulo::after { content: ":"; }
.filtro__resumo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro__botao .ic { color: var(--apr-tinta-3); transition: transform var(--apr-trans); }
.filtro[open] .filtro__botao .ic { transform: rotate(180deg); }
.filtro__painel {
position: absolute; left: 0; top: calc(100% + 8px); z-index: 45; width: 340px; max-width: calc(100vw - 40px);
background: var(--apr-superficie); border-radius: var(--apr-raio-card); box-shadow: var(--apr-sombra-2); padding: var(--apr-e-3);
}
[data-tema="escuro"] .filtro__painel { background: var(--apr-superficie-2); }
.filtro__topo { display: flex; align-items: center; gap: var(--apr-e-2); margin-bottom: var(--apr-e-2); }
.filtro__busca { flex: 1; height: 40px; padding: 0 14px; border: 0; border-radius: var(--apr-raio-input); background: var(--apr-superficie-2); color: var(--apr-tinta); font-size: 14px; outline: none; }
[data-tema="escuro"] .filtro__busca { background: var(--apr-superficie-3); }
.filtro__busca:focus { box-shadow: 0 0 0 3px var(--apr-verde); }
.filtro__lista { max-height: 300px; overflow: auto; display: flex; flex-direction: column; }
.filtro__opcao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--apr-raio-input); font-size: 14px; cursor: pointer; line-height: 1.3; }
.filtro__opcao:hover { background: var(--apr-superficie-2); }
[data-tema="escuro"] .filtro__opcao:hover { background: var(--apr-superficie-3); }
.filtro__opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.filtro__opcao input:checked + .check__caixa { background: var(--apr-verde); }
.filtro__opcao input:checked + .check__caixa .ic { opacity: 1; }
.filtro__opcao input:focus-visible + .check__caixa { outline: 3px solid var(--apr-verde); outline-offset: 2px; }
.filtro__grupo { display: block; font-size: 12px; color: var(--apr-tinta-3); }
.filtro__vazio { padding: var(--apr-e-2) var(--apr-e-2) 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chip__rotulo { color: var(--apr-tinta-3); font-size: 12px; font-weight: 500; }
/* Barra de filtros padrão das listas: busca + segmentos + ações em cima, dropdowns embaixo, tags no fim */
.filtros--barra { padding: var(--apr-e-4); margin-bottom: var(--apr-e-4); border-radius: var(--apr-raio-card); }
.filtros__topo { display: flex; align-items: center; gap: var(--apr-e-3); flex-wrap: wrap; }
.filtros__topo .campo--busca { flex: 1 1 260px; }
/* Busca dentro da LINHA de pílulas (Minhas anotações): cresce e ocupa a linha toda no celular. */
.filtros__linha .campo--busca { flex: 1 1 280px; min-width: 0; }
@media (max-width: 720px) { .filtros__linha .campo--busca { flex: 1 1 100%; } }
/* 17/09/2026: o botão Filtrar caía sozinho na segunda linha, encostado na direita, sempre que os
filtros enchiam a primeira — parecia tela quebrada. Sem o margin-left:auto ele acompanha o último
filtro: mesma linha quando cabe, logo abaixo e à esquerda quando não cabe. */
.filtros__acoes { display: flex; align-items: center; gap: var(--apr-e-2); }
.filtros__data { flex: 0 0 170px; }
/* Campos curtos da barra de filtro: id não precisa de mais que isso, e tipo é uma palavra. Sem largura fixa eles
esticavam para preencher a linha e empurravam as datas para os cantos, com um buraco enorme no meio. */
.filtros__id { flex: 0 0 130px; }
.filtros__tipo { flex: 0 1 230px; }
.filtros__id .campo__entrada, .filtros__tipo .campo__entrada { height: 44px; border-radius: var(--apr-raio-pill); padding: 0 16px; font-size: 14px; }
@media (max-width: 720px) { .filtros__id, .filtros__tipo, .filtros__data { flex: 1 1 140px; } }
.filtros__data .campo__entrada { height: 44px; border-radius: var(--apr-raio-pill); padding: 0 16px; font-size: 14px; }
.contagem { font-size: 15px; color: var(--apr-tinta-2); }
.contagem strong { font-size: 28px; font-weight: 300; letter-spacing: -0.03em; color: var(--apr-tinta); margin-right: 4px; font-variant-numeric: tabular-nums; }
.tags .chip { cursor: pointer; height: 30px; }
/* Segmentos: grupo de opções exclusivas em pílulas (situação, quantidades rápidas) */
.segmentos { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--apr-raio-pill); background: var(--apr-superficie-2); flex-wrap: wrap; }
.segmento { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: var(--apr-raio-pill); font-size: 14px; font-weight: 500; color: var(--apr-tinta-2); cursor: pointer; transition: background var(--apr-trans), color var(--apr-trans); }
.segmento input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmento:hover { color: var(--apr-tinta); }
.segmento.esta-ativo, .segmento:has(input:checked) { background: var(--apr-superficie); color: var(--apr-tinta); box-shadow: var(--apr-sombra-1); }
[data-tema="escuro"] .segmento.esta-ativo, [data-tema="escuro"] .segmento:has(input:checked) { background: var(--apr-superficie-3); }
.segmento:has(input:focus-visible) { outline: 3px solid var(--apr-verde); outline-offset: 2px; }
.campo__entrada--curta { width: 110px; }
/* Data precisa caber dd/mm/aaaa + o ícone do calendário: com a largura de campo numérico, o ano ficava cortado.
Regra por tipo (não por classe) para valer em qualquer tela que use data, agora e depois. */
.campo__entrada[type="date"], .campo__entrada[type="datetime-local"] { width: 210px; max-width: 100%; }
.filtro__dica { padding: var(--apr-e-2) var(--apr-e-2) 0; }
/* Notificações: ação circular junto ao avatar, sem faixa ou destaque no conteúdo. */
.notificacoes-sino { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--apr-superficie-2); color: var(--apr-tinta); }
.notificacoes-sino:hover { background: var(--apr-superficie-3); }
.notificacoes-sino__ponto { display: none; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--apr-verde); }
.notificacoes-sino.tem-novas .notificacoes-sino__ponto { display: block; }
/* Prévia presa ao sino; a central completa permanece em /app/notificacoes. */
.notificacoes-previa { position: fixed; width: min(400px, calc(100vw - 32px)); z-index: 45; background: var(--apr-superficie); color: var(--apr-tinta); border-radius: var(--apr-raio-card); box-shadow: var(--apr-sombra-2); display: flex; flex-direction: column; overflow: hidden; }
[data-tema="escuro"] .notificacoes-previa { background: var(--apr-superficie-2); }
.notificacoes-previa__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--apr-e-2); padding: var(--apr-e-4); }
.notificacoes-previa__filtros { padding: 0 var(--apr-e-4) var(--apr-e-3); }
.notificacoes-previa__lista { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 var(--apr-e-2); }
.notificacoes-previa__item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--apr-e-3); padding: var(--apr-e-4) var(--apr-e-2); width: 100%; text-align: left; border-radius: var(--apr-raio-input); font-weight: 400; }
.notificacoes-previa__item:hover { background: var(--apr-superficie-3); }
.notificacoes-previa__item > span:last-child { display: flex; flex-direction: column; gap: var(--apr-e-2); overflow-wrap: anywhere; }
.notificacoes-previa__ponto { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: transparent; }
.notificacoes-previa__item.nao-lida .notificacoes-previa__ponto { background: var(--apr-verde); }
.notificacoes-previa__resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notificacoes-previa__estado { padding: var(--apr-e-6) var(--apr-e-4); text-align: center; }
.notificacoes-previa__todas { padding: var(--apr-e-4); text-align: center; border-top: 1px solid var(--apr-linha); flex-shrink: 0; color: var(--apr-verde-texto); }
/* Assistente Aprovato: avatar vetorial e conversa discreta, sem interferir no estudo. */
.ia__avatar { visibility: hidden; border: 0; display: grid; place-items: center; padding: 0; flex-shrink: 0; position: fixed; z-index: 46; right: 16px; bottom: 24px; width: 60px; height: 60px; border-radius: 0; background: transparent; box-shadow: none; touch-action: none; cursor: grab; color: var(--apr-grafite); }
.ia--pronta .ia__avatar { visibility: visible; }
.ia__avatar:active { cursor: grabbing; }
.ia__avatar svg { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ia__olhos { fill: none; transform-origin: 80px 74px; }
.ia--ocupada .ia__olhos { animation: ia-piscar 1.6s ease-in-out infinite; }
@keyframes ia-piscar { 0%,70%,100% { transform: scaleY(1); } 80% { transform: scaleY(.2); } }
.ia__painel { position: fixed; z-index: 47; display: flex; flex-direction: column; min-height: 0; width: min(400px,calc(100vw - 24px)); height: min(640px,calc(100dvh - 100px)); border-radius: var(--apr-raio-card); box-shadow: var(--apr-sombra-2); background: var(--apr-superficie); color: var(--apr-tinta); overflow: visible; }
[data-tema="escuro"] .ia__painel { background: var(--apr-superficie-2); }
.ia__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; flex-shrink: 0; }
.ia__acoes { display: flex; gap: 16px; padding: 0 16px 12px; flex-wrap: wrap; }
.ia__mensagens { flex: 1; min-height: 40px; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.ia__mensagem { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; margin: 0 0 14px; padding: 12px; border-radius: 16px; background: var(--apr-superficie-2); }
.ia__mensagem--aluno { background: var(--apr-verde-suave); color: var(--apr-verde-texto); margin-left: 24px; }
[data-tema="escuro"] .ia__mensagem--assistente { background: var(--apr-superficie-3); }
.ia__status { padding: 0 16px; font-size: 12px; }
.ia__status:empty { display: none; }
.ia__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; }
.ia__form textarea { flex: 1; min-width: 0; min-height: 64px; max-height: 140px; resize: vertical; font-size: 16px; }
@media(max-width:960px) { .ia__avatar { right: 16px; bottom: calc(106px + env(safe-area-inset-bottom)); } }
@media(max-width:600px) { .ia__acoes { gap: 12px; } .ia__topo { padding: 12px 16px; } }
@media(prefers-reduced-motion:reduce) { .ia--ocupada .ia__olhos { animation: none; } }
.ia { --ia-safe-top: env(safe-area-inset-top, 0px); --ia-safe-bottom: env(safe-area-inset-bottom, 0px); }
.ia__painel--compacto .ia__topo { padding-top: 8px; padding-bottom: 8px; }
.ia__painel--compacto .ia__acoes { padding-bottom: 6px; }
.ia__painel--compacto .ia__form textarea { min-height: 44px; max-height: 80px; }
.ia__painel::after { content: ''; position: absolute; left: calc(var(--ia-ponta, 85%) - 8px); bottom: -8px; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.ia__painel--abaixo::after { bottom: auto; top: -8px; }
.ia__lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.ia__conversa { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; margin-bottom: 8px; border-radius: var(--apr-raio-input); background: var(--apr-superficie-2); text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.ia__conversa > span:first-child { font-size: var(--apr-small); }
.ia__conversa:hover { background: var(--apr-verde-suave); }
.ia__anteriores { padding: 0 16px 12px; flex-shrink: 0; }
.ia__painel--compacto .ia__form { padding-top: 6px; padding-bottom: 8px; }
.ia__mensagens { min-height: 0; }
.ia__conversa-linha{display:flex;align-items:flex-start;background:var(--apr-superficie-2);border-radius:var(--apr-raio-input);margin-bottom:8px;overflow:hidden}.ia__conversa-linha .ia__conversa{flex:1;min-width:0;width:auto;margin:0;background:transparent}.ia__excluir{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;margin:4px;color:var(--apr-tinta-3);border-radius:50%;background:transparent}.ia__excluir:hover{color:var(--apr-tinta);background:var(--apr-verde-suave)}
/* Central compacta: título, resumo e data com hierarquia própria. */
.notificacoes-previa__item { padding: 10px 8px; font-size: 14px; line-height: 1.4; }
.notificacoes-previa__item > span:last-child { gap: 4px; }
.notificacoes-previa__item > span:last-child > span:first-child { font-size: 14px; font-weight: 500; }
.notificacoes-previa__resumo { font-size: 13px; line-height: 1.45; }
.notificacoes-previa__item > span:last-child > span:last-child { font-size: 11px; line-height: 1.4; }
/* Chat: fantasma verde e indicador de resposta. */
.ia__avatar .ia__fantasma{width:44px;height:47px;animation:none}
.ia__status--digitando{display:flex;align-items:center;gap:8px;min-height:22px;color:var(--apr-verde-texto)}
.ia__status--digitando::after{content:'•••';letter-spacing:3px;animation:ia-digitando 1.2s ease-in-out infinite}
@keyframes ia-digitando{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ia__status--digitando::after{animation:none}}
.ia__avatar .ia__fantasma{border-radius:0;overflow:visible}
/* Campo de seleção com busca (selecao.js). O