/* Controlo de Estudantes — folha de estilo única (sem dependências externas) */

:root {
  --azul: #1f3864;
  --azul-claro: #2c5282;
  --acento: #2563eb;
  --acento-suave: #dbeafe;
  --verde: #059669;
  --verde-suave: #d1fae5;
  --ambar: #d97706;
  --ambar-suave: #fef3c7;
  --vermelho: #dc2626;
  --vermelho-suave: #fee2e2;
  --roxo: #7c3aed;
  --cinza-0: #f6f8fb;
  --cinza-1: #eef2f7;
  --cinza-2: #dde3ec;
  --cinza-3: #94a3b8;
  --texto: #1e293b;
  --texto-suave: #64748b;
  --branco: #fff;
  --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px -12px rgba(15, 23, 42, .18);
  --raio: 12px;
}

/* ---------- modo escuro (a impressão mantém-se sempre clara) ---------- */
[data-tema="escuro"] {
  --acento: #60a5fa;
  --acento-suave: #1e3a5f;
  --verde: #34d399;
  --verde-suave: #064e3b;
  --ambar: #fbbf24;
  --ambar-suave: #451a03;
  --vermelho: #f87171;
  --vermelho-suave: #450a0a;
  --roxo: #a78bfa;
  --cinza-0: #0f172a;
  --cinza-1: #1e293b;
  --cinza-2: #334155;
  --cinza-3: #64748b;
  --texto: #e2e8f0;
  --texto-suave: #94a3b8;
  --branco: #1e293b;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .5);
}

/* Ajustes de legibilidade só para o modo escuro (fundos claros fixos). */
[data-tema="escuro"] table.tabela tbody tr:hover,
[data-tema="escuro"] table.caderneta tbody tr:hover td:first-child { background: #1e293b; }
[data-tema="escuro"] .linha-risco { background: #450a0a !important; }
[data-tema="escuro"] .linha-aviso { background: #451a03 !important; }
[data-tema="escuro"] .etiqueta.verde { color: #a7f3d0; }
[data-tema="escuro"] .etiqueta.vermelha { color: #fecaca; }
[data-tema="escuro"] .etiqueta.ambar { color: #fde68a; }
[data-tema="escuro"] .etiqueta.azul { color: #bfdbfe; }
[data-tema="escuro"] .etiqueta.roxa { background: #4c1d95; color: #ddd6fe; }
[data-tema="escuro"] tr.hoje td,
[data-tema="escuro"] tr.hoje th.dia { background: #172554; }
[data-tema="escuro"] tr.dia-foco { background: #172554; }
[data-tema="escuro"] table.horario td.alvo-livre .bloco.vazio { background: #1e3a5f; }
[data-tema="escuro"] table.caderneta input.nota.excluido { background: #1e293b; }
[data-tema="escuro"] .passo.feito { background: #064e3b; border-color: #065f46; }
[data-tema="escuro"] .botao:hover { background: #3b82f6; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  color: var(--texto);
  background: var(--cinza-0);
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

/* ---------- ecrã de carregamento ---------- */
.ecra-carregamento {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; background: var(--azul); color: #fff;
}
.roda {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: rodar .9s linear infinite;
}
@keyframes rodar { to { transform: rotate(360deg); } }

/* ---------- estrutura ---------- */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: 252px; flex: 0 0 252px; background: var(--azul); color: #e2e8f0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; gap: 12px; align-items: center; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.marca-icone {
  width: 40px; height: 40px; border-radius: 10px; background: var(--acento);
  display: grid; place-items: center; font-weight: 800; color: #fff; letter-spacing: .5px;
}
.marca strong { display: block; font-size: 14px; line-height: 1.25; color: #fff; }
.marca small { color: #93a7c6; font-size: 11.5px; }

.navegacao { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #7f95b8; padding: 14px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  color: #cbd5e1; cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; transition: background .13s, color .13s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.ativo { background: var(--acento); color: #fff; font-weight: 600; }
.nav-item .ico { width: 18px; text-align: center; }
/* Ícones lógicos (icones.js): herdam tamanho do texto, salvo indicação. */
.ico-svg { display: inline-flex; vertical-align: -0.18em; }
.ico-svg svg { width: 1.1em; height: 1.1em; }
.nav-item .ico-svg svg { width: 18px; height: 18px; }
.passo-icone .ico-svg svg { width: 40px; height: 40px; }
.nav-item .selo {
  margin-left: auto; background: var(--vermelho); color: #fff; border-radius: 20px;
  font-size: 10.5px; padding: 1px 7px; font-weight: 700;
}
.nav-item.ativo .selo { background: rgba(255,255,255,.3); }

.lateral-rodape { padding: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.rodape-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #e2e8f0; border-radius: 10px; padding: 7px 10px; cursor: pointer;
  font: inherit; text-align: left;
}
.rodape-toggle:hover { background: rgba(255,255,255,.14); }
.rodape-toggle:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.rodape-resumo-avatar { flex: 0 0 auto; display: inline-flex; }
.rodape-resumo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rodape-resumo-texto strong {
  font-size: 12.5px; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rodape-resumo-texto small {
  font-size: 11px; color: #93a7c6; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rodape-resumo-ponto { color: #6ee7b7; font-size: 12px; flex: 0 0 auto; }
.rodape-resumo-ponto.erro { color: #fca5a5; }
.rodape-chev {
  color: #fff; font-size: 15px; font-weight: 800;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border-radius: 50%;
  flex: 0 0 auto; transition: transform .15s, background .13s;
}
.rodape-toggle:hover .rodape-chev { background: rgba(255,255,255,.28); }
.rodape-toggle[aria-expanded="true"] .rodape-chev { transform: rotate(180deg); }
.rodape-corpo { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.lateral-rodape.recolhido .rodape-corpo { display: none; }
.rodape-eu-linha { display: flex; gap: 9px; align-items: center; }
.rodape-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.rodape-botoes .botao-fantasma { margin-left: 0 !important; }
.estado-servidor { margin-top: 8px; font-size: 11px; color: #6ee7b7; }
.estado-servidor.erro { color: #fca5a5; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 28px 14px; background: var(--branco); border-bottom: 1px solid var(--cinza-2);
  position: sticky; top: 0; z-index: 20;
}
.topo h1 { margin: 0; font-size: 21px; letter-spacing: -.2px; }
.subtitulo { margin: 3px 0 0; color: var(--texto-suave); font-size: 13px; }
.topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.vista { padding: 22px 28px 60px; flex: 1; }

/* ---------- botões ----------
   Hierarquia: .botao (primário) = UMA ação principal por bloco/barra;
   .botao-fantasma = secundárias e navegação; .botao-perigo = destrutivo,
   sempre com trava (pré-visualização/confirmação/Anular). Botões só com
   ícone levam sempre title + aria-label. */
button, .botao { font: inherit; }
.botao, .botao-fantasma, .botao-perigo {
  border: 1px solid transparent; border-radius: 9px; padding: 8px 14px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
  transition: background .13s, border-color .13s, color .13s;
}
.botao { background: var(--acento); color: #fff; }
.botao:hover { background: #1d4ed8; }
.botao-fantasma { background: var(--branco); color: var(--texto); border-color: var(--cinza-2); }
.botao-fantasma:hover { background: var(--cinza-1); }
.botao-perigo { background: var(--branco); color: var(--vermelho); border-color: #fecaca; }
.botao-perigo:hover { background: var(--vermelho-suave); }
.botao.pequeno, .botao-fantasma.pequeno, .botao-perigo.pequeno { padding: 5px 10px; font-size: 12.5px; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao-icone {
  border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--texto-suave);
  width: 30px; height: 30px; border-radius: 8px;
}
.botao-icone:hover { background: var(--cinza-1); color: var(--texto); }

/* ---------- cartões ---------- */
.cartao {
  background: var(--branco); border: 1px solid var(--cinza-2); border-radius: var(--raio);
  box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden;
}
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--cinza-1); flex-wrap: wrap;
}
.cartao-topo h3 { margin: 0; font-size: 15px; }
.cartao-topo .dica { color: var(--texto-suave); font-size: 12.5px; font-weight: 400; }
.cartao-corpo { padding: 16px 18px; }
.cartao-corpo.sem-espaco { padding: 0; }

.grelha { display: grid; gap: 16px; }
.grelha.k2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grelha.k3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grelha.k4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- KPI ---------- */
.kpi { background: var(--branco); border: 1px solid var(--cinza-2); border-radius: var(--raio); padding: 15px 17px; box-shadow: var(--sombra); }
.kpi .rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 600; }
.kpi .valor { font-size: 27px; font-weight: 700; margin-top: 4px; letter-spacing: -.6px; }
.kpi .nota { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.kpi.bom .valor { color: var(--verde); }
.kpi.mau .valor { color: var(--vermelho); }
.kpi.aviso .valor { color: var(--ambar); }
.kpi.acento .valor { color: var(--acento); }

/* ---------- tabelas ---------- */
.tabela-envolvente { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabela th, table.tabela td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cinza-1); vertical-align: middle; }
table.tabela th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave);
  background: var(--cinza-0); position: sticky; top: 0; white-space: nowrap; font-weight: 700;
}
table.tabela tbody tr:hover { background: #f8fafc; }
table.tabela td.num, table.tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela td.centro, table.tabela th.centro { text-align: center; }
table.tabela tfoot td { font-weight: 700; background: var(--cinza-0); }
.linha-risco { background: #fff5f5 !important; }
.linha-risco td:first-child { border-left: 3px solid var(--vermelho); }
.linha-aviso { background: #fffbeb !important; }
.linha-aviso td:first-child { border-left: 3px solid var(--ambar); }

/* ---------- etiquetas ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 2px 9px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.etiqueta.verde { background: var(--verde-suave); color: #065f46; }
.etiqueta.vermelha { background: var(--vermelho-suave); color: #991b1b; }
.etiqueta.ambar { background: var(--ambar-suave); color: #92400e; }
.etiqueta.azul { background: var(--acento-suave); color: #1e40af; }
.etiqueta.cinza { background: var(--cinza-1); color: var(--texto-suave); }
.etiqueta.roxa { background: #ede9fe; color: #5b21b6; }

.ponto-cor { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- barras ---------- */
.barra { background: var(--cinza-1); border-radius: 20px; height: 8px; overflow: hidden; min-width: 70px; }
.barra > span { display: block; height: 100%; background: var(--acento); border-radius: 20px; transition: width .3s; }
.barra.verde > span { background: var(--verde); }
.barra.ambar > span { background: var(--ambar); }
.barra.vermelha > span { background: var(--vermelho); }
.celula-barra { display: flex; align-items: center; gap: 8px; }
.celula-barra small { font-variant-numeric: tabular-nums; color: var(--texto-suave); min-width: 42px; text-align: right; }

/* ---------- formulários ---------- */
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--cinza-2); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--branco); color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }

/* ---------- foco por teclado (acessibilidade) ---------- */
.botao:focus-visible, .botao-fantasma:focus-visible, .botao-perigo:focus-visible,
.nav-item:focus-visible, .aba:focus-visible, .pill:focus-visible, .opcao:focus-visible,
.ferramenta-rico:focus-visible, .editor-rico:focus-visible,
.botao-icone:focus-visible, .pesquisa-resultados button:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}

/* ---------- utilitários de espaçamento ---------- */
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mt6 { margin-top: 6px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb12 { margin-bottom: 12px !important; }
.mb14 { margin-bottom: 14px !important; }
.mb16 { margin-bottom: 16px !important; }
.mt8 { margin-top: 8px !important; }
.mt12 { margin-top: 12px !important; }
.centro { text-align: center !important; }
.flex1 { flex: 1 !important; }
.fs12 { font-size: 12px !important; }
.fs13 { font-size: 12.5px !important; }
.texto-vermelho { color: var(--vermelho) !important; }
.borda-aviso { border-color: var(--ambar) !important; }
textarea { resize: vertical; min-height: 66px; }

/* ---------- editor rico do sumário (só texto, sem dependências) ---------- */
.editor-rico-barra { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; }
.ferramenta-rico {
  border: 1px solid var(--cinza-2); background: var(--branco); color: var(--texto);
  border-radius: 7px; min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
.ferramenta-rico:hover { background: var(--cinza-1); }
.ferramenta-rico:disabled { opacity: .45; cursor: not-allowed; }
.editor-rico-modelos {
  width: auto; flex: 1 1 160px; padding: 5px 8px; font-size: 12.5px;
  border: 1px solid var(--cinza-2); border-radius: 7px; background: var(--branco); color: var(--texto);
}
.editor-rico {
  border: 1px solid var(--cinza-2); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; background: var(--branco); color: var(--texto);
  min-height: 88px; max-height: 320px; overflow-y: auto;
}
.editor-rico:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
.editor-rico[contenteditable="false"] { opacity: .6; background: var(--cinza-1); }
.editor-rico:empty::before { content: attr(data-placeholder); color: var(--texto-suave); }
.editor-rico ul, .editor-rico ol { margin: 4px 0; padding-left: 22px; }
.editor-rico li { margin: 2px 0; }
.editor-rico p, .editor-rico div { margin: 2px 0; }
/* Leitura do sumário formatado nas listas e tabelas. */
.texto-rico ul, .texto-rico ol { margin: 4px 0 4px 18px; padding: 0; }
.texto-rico li { margin: 1px 0; }
.texto-rico p { margin: 2px 0; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin: 0; min-width: 150px; }
.caixa { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.caixa input { width: auto; }

/* ---------- grelha do horário ---------- */
.horario-envolvente { overflow-x: auto; border-radius: var(--raio); }
table.horario { border-collapse: separate; border-spacing: 3px; min-width: 100%; }
table.horario th {
  font-size: 10.5px; color: var(--texto-suave); font-weight: 700; padding: 4px 2px;
  text-align: center; line-height: 1.25; white-space: nowrap;
}
table.horario th.dia { text-align: left; font-size: 12px; color: var(--texto); min-width: 108px; padding-left: 8px; }
table.horario th { position: sticky; top: 0; }
table.horario th.dia, table.horario thead th.dia { position: sticky; left: 0; z-index: 2; background: var(--branco); }
table.horario td { padding: 0; }
tr.hoje td { background: #f0f7ff; border-radius: 8px; }
tr.hoje th.dia { color: var(--acento); border-left: 3px solid var(--acento); background: #f0f7ff; }
.etiqueta-hoje { font-size: 10.5px; font-weight: 700; color: var(--acento); white-space: nowrap; }
.bloco {
  border-radius: 8px; padding: 6px 4px; min-height: 76px;
  overflow: hidden; cursor: pointer; color: #fff;
  font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid transparent; transition: transform .1s, box-shadow .1s;
}
.bloco:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.25); }
.bloco small { font-weight: 500; opacity: .85; font-size: 10px; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco .sigla { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco .sala { font-weight: 700; opacity: .95; }
.bloco .sala.em-branco { font-weight: 500; opacity: .75; font-style: italic; }
.bloco.vazio { background: var(--cinza-1); cursor: default; border-radius: 8px; height: 64px; min-height: 64px; }
.bloco.vazio.bloco-livre { cursor: pointer; width: 100%; border: none; font: inherit;
  font-size: 20px; font-weight: 700; color: var(--texto-suave); }
.bloco.vazio.bloco-livre:hover, .bloco.vazio.bloco-livre:focus-visible { background: #dbeafe; color: var(--acento);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.25); outline: 2px solid var(--acento); outline-offset: -2px; }
.bloco.sem-turma { background: repeating-linear-gradient(45deg, #94a3b8, #94a3b8 6px, #7c8ea6 6px, #7c8ea6 12px); }
.bloco.vazio:hover { transform: none; box-shadow: none; }
tr.dia-foco { background: #eff6ff; }
tr.dia-foco th.dia { color: var(--acento); }
.bloco.destacado { border-color: #0f172a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acento); }
.bloco[draggable="true"] { cursor: grab; }
.bloco.arrastando { opacity: .45; }
table.horario td.alvo-livre { outline: 2px dashed var(--acento); outline-offset: -2px; border-radius: 8px; }
table.horario td.alvo-livre .bloco.vazio { background: #dbeafe; }
.alerta-periodo { color: var(--vermelho); font-weight: 800; }

/* ---------- agenda ---------- */
.dia-grupo { border-left: 3px solid var(--cinza-2); padding-left: 14px; margin-bottom: 18px; }
.dia-grupo h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.dia-grupo h4 .rotulo-dia { color: var(--texto-suave); font-weight: 500; font-size: 12.5px; }
.sessao {
  display: flex; gap: 12px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--cinza-2);
  border-radius: 10px; margin-bottom: 7px; background: var(--branco); border-left-width: 4px;
}
.sessao .hora { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; min-width: 92px; color: var(--texto-suave); }
.sessao .info { flex: 1; min-width: 0; }
.sessao .info strong { font-size: 13.5px; }
.sessao .info p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-suave); }
.sessao .acoes { display: flex; gap: 5px; }

/* ---------- listas de presenças ---------- */
.lista-alunos { display: flex; flex-direction: column; gap: 6px; }
.linha-aluno {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--cinza-2);
  border-radius: 10px; background: var(--branco);
}
.linha-aluno .nome { flex: 1; min-width: 0; }
.linha-aluno .nome strong { display: block; font-size: 13.5px; }
.linha-aluno .nome small { color: var(--texto-suave); font-size: 12px; }
.grupo-botoes { display: flex; gap: 4px; }
.opcao {
  border: 1px solid var(--cinza-2); background: var(--branco); border-radius: 8px; padding: 5px 9px;
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--texto-suave); min-width: 38px;
}
.opcao:hover { background: var(--cinza-1); }
.opcao.on[data-v="Presente"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.opcao.on[data-v="Atrasado"] { background: var(--ambar); border-color: var(--ambar); color: #fff; }
.opcao.on[data-v="Justificado"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.opcao.on[data-v="Ausente"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

/* ---------- caderneta ---------- */
table.caderneta td, table.caderneta th { padding: 5px 7px; }
table.caderneta input.nota {
  width: 62px; padding: 4px 6px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600;
}
table.caderneta input.nota.excluido { background: #f1f5f9; color: var(--cinza-3); }
table.caderneta tbody tr td:first-child { position: sticky; left: 0; background: var(--branco); z-index: 2; }
table.caderneta tbody tr:hover td:first-child { background: #f8fafc; }
table.caderneta thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--cinza-0); }
table.caderneta th.girar { max-width: 92px; white-space: normal; line-height: 1.2; }

/* ---------- gaveta lateral ---------- */
.gaveta { position: fixed; inset: 0; z-index: 60; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.gaveta-corpo {
  position: absolute; top: 0; right: 0; height: 100%; width: min(620px, 96vw);
  background: var(--branco); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(15,23,42,.3);
  animation: entrar .18s ease-out;
}
@keyframes entrar { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--cinza-1); }
.gaveta-topo h2 { margin: 0; font-size: 17px; }
.gaveta-conteudo { padding: 18px; overflow-y: auto; flex: 1; }
.gaveta-rodape { padding: 14px 18px; border-top: 1px solid var(--cinza-1); display: flex; gap: 10px; justify-content: flex-end; background: var(--cinza-0); }

/* ---------- avisos (toast) ---------- */
.avisos { position: fixed; bottom: 20px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--azul); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(15,23,42,.3); animation: entrar .18s ease-out; max-width: 380px;
}
.toast.erro { background: var(--vermelho); }
.toast.ok { background: var(--verde); }

/* ---------- pesquisa global ---------- */
.pesquisa-global { position: relative; min-width: 220px; flex: 0 1 320px; }
.pesquisa-global input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--cinza-2); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--branco); color: var(--texto);
}
.pesquisa-resultados {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, 80vw); max-height: 380px;
  overflow-y: auto; background: var(--branco); border: 1px solid var(--cinza-2); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15,23,42,.2); z-index: 80; padding: 6px;
}
.pesquisa-resultados.oculto { display: none; }
.pesquisa-seccao { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); padding: 8px 10px 4px; }
.pesquisa-resultados button {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px; color: var(--texto);
}
.pesquisa-resultados button.ativo, .pesquisa-resultados button:hover { background: var(--cinza-1); }

/* ---------- avatares e perfil ---------- */
.avatar-pilha { position: relative; display: inline-flex; flex: 0 0 auto; border-radius: 50%; }
.avatar {
  border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 auto; overflow: hidden;
}
.avatar-iniciais {
  background: var(--acento-suave); color: var(--acento); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; user-select: none;
}
.avatar-foto { position: absolute; inset: 0; width: 100% !important; height: 100% !important; background: var(--branco); }
.perfil-topo { display: flex; gap: 14px; align-items: center; }
.perfil-topo h3 { font-size: 17px; }
.celula-pessoa { display: flex; gap: 9px; align-items: center; min-width: 0; }

/* ---------- diversos ---------- */
.em-branco { color: var(--texto-suave); font-style: italic; }

/* ---------- estado vazio ilustrado ---------- */
.vazio-estado { text-align: center; padding: 44px 20px; }
.vazio-figura { color: var(--texto-suave); margin-bottom: 6px; }
.vazio-texto { font-size: 15px; margin: 0 0 14px; }
.vazio-estado .botao { margin-top: 4px; }

/* ---------- esqueleto de carregamento ---------- */
.esqueleto {
  height: 14px; border-radius: 7px; background: var(--cinza-1);
  animation: esqueleto-pulso 1.4s ease-in-out infinite;
}
.esqueleto.esq-40 { width: 40%; }
.esqueleto.esq-60 { width: 60%; }
.esqueleto.esq-80 { width: 80%; }
@keyframes esqueleto-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
}
.texto-suave { color: var(--texto-suave); }
.rodape-nota { font-size: 12px; color: var(--texto-suave); margin-top: 10px; }
.lista-def { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13.5px; }
.lista-def dt { color: var(--texto-suave); }
.lista-def dd { margin: 0; font-weight: 600; }
.pilha { display: flex; flex-direction: column; gap: 10px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.separador { border: 0; border-top: 1px solid var(--cinza-1); margin: 16px 0; }
.selo-sev { font-weight: 800; font-size: 11.5px; }
.alerta-item { border-left: 4px solid var(--cinza-2); padding: 10px 14px; background: var(--branco); border-radius: 8px; margin-bottom: 8px; }
.alerta-item.alta { border-left-color: var(--vermelho); }
.alerta-item.media { border-left-color: var(--ambar); }
.alerta-item.baixa { border-left-color: var(--cinza-3); }
.alerta-item h4 { margin: 0 0 3px; font-size: 13.5px; }
.alerta-item p { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.alerta-item .meta { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.mini-barras { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.mini-barras div { flex: 1; background: var(--acento); border-radius: 3px 3px 0 0; min-height: 2px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--cinza-2); margin-bottom: 16px; flex-wrap: wrap; }
.aba { border: 0; background: none; padding: 9px 14px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--texto-suave); border-bottom: 2px solid transparent; font-weight: 600; }
.aba.ativo { color: var(--acento); border-bottom-color: var(--acento); }

/* ---------- modal de pendências ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: entrar .15s ease-out;
}
.modal-caixa {
  background: var(--branco); border-radius: 12px; padding: 20px 22px; max-width: 560px; width: 100%;
  box-shadow: 0 24px 60px rgba(15,23,42,.35);
}
.lista-pendencias { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-pendencias li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cinza-1); border-left: 4px solid var(--ambar); border-radius: 8px;
  padding: 9px 12px; font-size: 13px;
}

/* ---------- guia de primeiros passos ---------- */
.guia-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.passo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  background: var(--cinza-1); border: 1px solid transparent; }
.passo.feito { background: #ecfdf5; border-color: #a7f3d0; }
.passo.feito .passo-icone svg { opacity: .55; }
.passo-icone { flex: 0 0 auto; }
.passo-corpo { font-size: 12.5px; }
.passo-corpo strong { display: block; font-size: 13px; margin-bottom: 2px; }
.passo-corpo .estado { color: var(--texto-suave); }
.passo.feito .passo-corpo .estado { color: var(--verde); font-weight: 600; }
.passo-corpo button { margin-top: 6px; }
.guia-progresso { height: 8px; background: var(--cinza-1); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.guia-progresso span { display: block; height: 100%; background: var(--verde); border-radius: 6px; transition: width .3s; }
.pill { border: 1px solid var(--cinza-2); border-radius: 20px; padding: 4px 11px; cursor: pointer; font-size: 12.5px; background: var(--branco); font-weight: 600; }
.pill.ativo { background: var(--acento); border-color: var(--acento); color: #fff; }

@media (max-width: 980px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; flex: none; height: auto; position: static; }
  .navegacao { display: flex; overflow-x: auto; }
  .nav-grupo { display: none; }
  .nav-item { white-space: nowrap; }
  .nav-item .selo { margin-left: 6px; }
  .vista, .topo { padding-left: 14px; padding-right: 14px; }
}

@media print {
  .lateral, .topo-acoes, .nav-item, .avisos { display: none !important; }
  .app { display: block; }
  .cartao { box-shadow: none; break-inside: avoid; }
}

:root { color-scheme: light dark; }
:focus-visible {
  outline: 2px solid var(--acento, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}
.leitor-nota:focus { outline: 2px solid var(--acento, #2563eb); outline-offset: 1px; }

@media print {
  /* C1 — impressão limpa: só conteúdo, sempre claro e sem controlos. */
  .lateral, .topo, .topo-acoes, .avisos, .leitor-ferramentas, .leitor-form,
  .leitor-ia-barra, .leitor-nota-acoes, .abas, .botoes, .grupo-botoes,
  button, .botao, .botao-fantasma, .botao-perigo, .botao-icone,
  input, select, textarea, .facil-anular, #facil-toggle,
  .pesquisa-global, .leitor-realcar, .leitor-barra-area, .leitor-localizador { display: none !important; }
  .app, .vista, .leitor-corpo, .leitor-painel { display: block; }
  body { background: #fff !important; color: #000 !important; }
  .cartao, .leitor-nota, .leitor-ia-resp { box-shadow: none; break-inside: avoid;
    background: #fff !important; color: #000 !important; border-color: #999 !important; }
  a { color: #000 !important; text-decoration: none; }
}

/* ---------- Modo Fácil ("O Meu Dia") ---------- */
.facil-heroi {
  background: var(--branco); border: 1px solid var(--cinza-2); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px;
}
.facil-progresso { height: 8px; background: var(--cinza-1); border-radius: 6px; overflow: hidden; margin: 12px 0 6px; }
.facil-progresso span { display: block; height: 100%; background: var(--verde); border-radius: 6px; transition: width .3s; }
.facil-passo .facil-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.facil-passo .facil-cab strong { font-size: 15.5px; }
.facil-icone {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento);
}
.facil-efeito {
  background: var(--cinza-0); border: 1px solid var(--cinza-2); border-left: 4px solid var(--acento);
  border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 13px;
}
.facil-efeito p { line-height: 1.45; }
.facil-detalhe { margin-top: 10px; border: 1px solid var(--cinza-2); border-radius: 8px; padding: 8px 12px; }
.facil-detalhe summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 4px 0; }
.facil-faixa {
  border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px;
  background: var(--cinza-1); border-left: 4px solid var(--cinza-3);
}
.facil-faixa.ok { background: var(--verde-suave); border-left-color: var(--verde); }
.facil-faixa.aviso { background: var(--ambar-suave); border-left-color: var(--ambar); }
.facil-travalinha { display: flex; gap: 12px; align-items: center; color: var(--texto); }
.facil-travalinha .facil-anim { color: var(--ambar); flex: 0 0 auto; }
.nav-item.facil-destaque { background: rgba(255,255,255,.12); color: #fff; font-weight: 700; margin-bottom: 4px; }
.nav-item.facil-destaque.ativo { background: var(--verde); }
.facil-lateral { width: 100%; justify-content: center; margin-bottom: 8px; }

/* ---------- barra "Anular" (trava das resoluções rápidas) ---------- */
.facil-anular {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: 12px;
  background: var(--azul); color: #fff; border-radius: 12px; padding: 10px 12px 16px 16px;
  font-size: 13.5px; box-shadow: 0 16px 40px rgba(15,23,42,.35);
  max-width: min(560px, 92vw); animation: entrar .18s ease-out;
}
.facil-anular-msg { flex: 1; }
.facil-anular .botao { flex: 0 0 auto; }
.facil-anular-tempo {
  position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px;
  background: rgba(255,255,255,.25); border-radius: 3px; overflow: hidden;
}
.facil-anular-tempo > span { display: block; height: 100%; width: 100%; background: #fff; border-radius: 3px; }
@media print {
  .facil-anular, #facil-toggle { display: none !important; }
}

/* Animações leves das ilustrações (só movimento subtil, sem distração). */
.facil-anim { color: var(--acento); }
.facil-anim .facil-pisca { animation: facil-pisca 2.2s ease-in-out infinite; }
.facil-anim .facil-ponteiro { transform-origin: 24px 24px; animation: facil-girar 8s linear infinite; }
.facil-anim .facil-risco { stroke-dasharray: 20; stroke-dashoffset: 20; animation: facil-riscar 2.6s ease forwards infinite; }
.facil-anim .facil-barra { stroke-dasharray: 24; animation: facil-crescer 2.4s ease-in-out infinite alternate; }
@keyframes facil-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes facil-girar { to { transform: rotate(360deg); } }
@keyframes facil-riscar { 0% { stroke-dashoffset: 20; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes facil-crescer { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .facil-anim .facil-pisca, .facil-anim .facil-ponteiro,
  .facil-anim .facil-risco, .facil-anim .facil-barra { animation: none; }
  .roda, .gaveta-corpo, .toast, .modal-fundo { animation: none !important; }
  .barra > span, .guia-progresso span, .facil-progresso span { transition: none !important; }
}

@media (max-width: 640px) {
  /* alvos tácteis maiores no telemóvel */
  .opcao { padding: 9px 12px; min-width: 46px; }
  .nav-item { padding: 11px; }
  .linha-aluno { gap: 8px; }
}
[data-tema="escuro"] .facil-icone { background: var(--acento-suave); }

/* ---------- Sala de Leitura (leitor fullscreen de materiais) ---------- */
.leitor {
  position: fixed; inset: 0; z-index: 120;
  background: var(--cinza-0); color: var(--texto);
  display: flex; flex-direction: column;
  animation: entrar .16s ease-out;
}
.leitor-topo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--branco); border-bottom: 1px solid var(--cinza-2);
}
.leitor-titulo-bloco { display: flex; align-items: center; gap: 10px; min-width: 220px; flex: 1 1 260px; }
.leitor-titulos strong { display: block; font-size: 15px; line-height: 1.2; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leitor-titulos small { font-size: 12px; }
.leitor-ferramentas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 2 1 auto; justify-content: center; }
.leitor-navpag, .leitor-zoom, .leitor-temas, .leitor-modo, .leitor-busca-doc, .leitor-localizar { display: flex; align-items: center; gap: 6px; }
.leitor-busca-doc input[type="search"] { width: 170px; padding: 5px 8px; }
.leitor-busca-doc .botao-fantasma.pequeno { padding: 5px 8px; }
.leitor-indice { border: 1px solid var(--cinza-2); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.leitor-indice summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.leitor-indice-pags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.leitor-pagina .camada-texto span.leitor-busca { background: rgba(250, 204, 21, .55); border-radius: 2px; }
.leitor-pagina .camada-texto span.leitor-busca-atual { background: rgba(249, 115, 22, .75); border-radius: 2px; outline: 1px solid #c2410c; }
.leitor-modo-btn.ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
.leitor-paglabel { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.leitor-paglabel input { width: 64px; text-align: center; padding: 5px 6px; }
.leitor-temas select { width: auto; padding: 5px 8px; font-size: 12.5px; }
.leitor-acoes { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.leitor-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; }
.leitor-viewer {
  position: relative; overflow-y: auto; padding: 22px 18px 60px;
  background: var(--leitor-fundo, #e8edf3);
  outline: none;
}
.leitor[data-tema-leitura="claro"] { --leitor-fundo: #e8edf3; --leitor-pagina: #ffffff; --leitor-texto: #1e293b; }
.leitor[data-tema-leitura="sepia"] { --leitor-fundo: #e9dfc9; --leitor-pagina: #faf3e3; --leitor-texto: #433422; }
.leitor[data-tema-leitura="escuro"] { --leitor-fundo: #0b1220; --leitor-pagina: #1e293b; --leitor-texto: #e2e8f0; }
.leitor[data-tema-leitura="contraste"] { --leitor-fundo: #000; --leitor-pagina: #fff; --leitor-texto: #000; }
.leitor-paginas { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.leitor-pagina {
  position: relative; background: var(--leitor-pagina, #fff); color: var(--leitor-texto, #1e293b);
  border-radius: 8px; box-shadow: var(--sombra); overflow: hidden;
  max-width: 100%;
}
.leitor-pagina canvas { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.leitor-pagina .camada-texto {
  position: absolute; left: 0; top: 0; overflow: hidden; line-height: 1;
  opacity: 1; color: transparent; z-index: 3;
}
.leitor-pagina .camada-texto span { position: absolute; white-space: pre; transform-origin: 0 0; }
.leitor-pagina .camada-texto ::selection { background: rgba(37, 99, 235, .28); color: transparent; }
/* Modo área: a camada de texto não intercepta o arrasto; o contentor dita a caixa. */
.leitor-pagina.modo-area { cursor: crosshair; }
.leitor-pagina.modo-area .camada-texto { pointer-events: none; user-select: none; -webkit-user-select: none; }
.leitor-rotulo-pag {
  position: absolute; top: 8px; left: 8px; z-index: 4; display: inline-block;
  font-size: 11px; font-weight: 700; color: var(--texto-suave);
  background: var(--branco); border: 1px solid var(--cinza-2); border-radius: 12px; padding: 1px 8px;
  pointer-events: none;
}
.leitor-realce {
  position: absolute; z-index: 4; cursor: pointer;
  border: 0; padding: 0;
  /* Tinta chapada ao redor do texto (sem textura nem picotado):
     fundo cheio na cor do marcador com respiro para fora
     das letras; o texto original do canvas continua 100% legível por baixo (multiply). */
  --cor-realce: #fbbf24;
  background-color: var(--cor-realce);
  background-image: none;
  border-radius: 2px;
  opacity: .85;
  mix-blend-mode: multiply;
  box-shadow:
    2px 0 0 0 var(--cor-realce),
    -2px 0 0 0 var(--cor-realce);
  transition: outline .15s ease, box-shadow .15s ease, filter .15s ease;
}
/* No modo área, os realces não intercetam o arrasto da nova caixa */
.leitor-pagina.modo-area .leitor-realce { pointer-events: none; }
/* Pré-visualização do trecho acabado de selecionar (antes de guardar):
   tracejado para distinguir do realce já fixo, sem interceptar cliques. */
.leitor-realce.pendente {
  pointer-events: none; opacity: .85;
  outline: 2px dashed currentColor; outline-offset: 0;
}
.leitor-pagina .camada-texto span.com-realce {
  color: #1e293b !important;
  cursor: pointer;
}
.leitor-pagina .camada-texto span.com-realce.previa {
  outline-width: 2px;
  outline-style: dashed;
}
.leitor-pagina .camada-texto span.com-realce.selecionado {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
.leitor-area-draft {
  position: absolute; z-index: 3; border: 2px dashed var(--acento); border-radius: 3px;
  background: rgba(37, 99, 235, .14); pointer-events: none;
}
.leitor-aviso-texto {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: var(--ambar-suave); color: var(--texto); border-left: 4px solid var(--ambar);
}
.leitor-barra-area {
  position: sticky; bottom: 18px; z-index: 5; display: flex; gap: 8px; align-items: center; justify-content: center;
  margin: 10px auto 0; width: fit-content; max-width: 92%;
  background: var(--azul); color: #fff; border-radius: 12px; padding: 8px 10px 8px 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.35); font-size: 13px;
}
.leitor[data-tema-leitura="escuro"] .leitor-realce { mix-blend-mode: screen; opacity: .8 !important; }
.leitor-realce:hover {
  cursor: pointer;
  filter: brightness(0.92);
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
.leitor-realce.selecionado,
.leitor-realce.marcado {
  outline: 2.5px solid var(--acento);
  outline-offset: 1.5px;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .3),
    2px 0 0 0 var(--cor-realce),
    -2px 0 0 0 var(--cor-realce);
}
.leitor-pin {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  cursor: pointer; transform: translate(-50%, -50%); padding: 0;
  font-size: 12px; font-weight: 800; color: #fff; line-height: 1;
}
.leitor-pin:hover,
.leitor-pin.selecionado {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 3px var(--acento), 0 4px 12px rgba(0,0,0,.4);
}
/* Localizador de realce: contorno exato sobre o texto + etiqueta colada. */
.leitor-localizar { display: flex; align-items: center; gap: 6px; }
.leitor-localizar select { padding: 5px 6px; font-size: 12.5px; }
#leitor-loc-toggle.desligado { opacity: .55; }
.leitor-pagina .leitor-localizador {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 6;
  pointer-events: none;
}
.leitor-localizador-rect {
  position: absolute; border-radius: 4px;
  border: 3px solid var(--cor-loc, #f59e0b);
  background: color-mix(in srgb, var(--cor-loc, #f59e0b) 14%, transparent);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .55), 0 0 18px rgba(245, 158, 11, .45);
  animation: leitor-loc-pulso 1.6s ease-out infinite;
}
.leitor-localizador-pino {
  position: absolute; width: 24px; height: 24px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--cor-loc, #f59e0b); border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .55);
  animation: leitor-loc-pulso 1.6s ease-out infinite;
}
.leitor-localizador-etiqueta {
  position: absolute; white-space: nowrap; max-width: 230px; overflow: hidden;
  text-overflow: ellipsis; font-size: 12px; font-weight: 700;
  background: rgba(30, 41, 59, .92); color: #fff; border-radius: 999px; padding: 3px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  pointer-events: auto; cursor: pointer;
  transition: opacity .8s ease;
}
.leitor-localizador-etiqueta.suave { opacity: .55; }
.leitor-localizador-etiqueta:hover { opacity: 1; }
.leitor-localizador-etiqueta.acima { transform: translateY(calc(-100% - 8px)); }
.leitor-localizador-etiqueta.abaixo { transform: translateY(8px); }
@keyframes leitor-loc-pulso {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55), 0 0 18px rgba(245, 158, 11, .45); }
  70% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0), 0 0 18px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 18px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .leitor-localizador-rect, .leitor-localizador-pino { animation: none; }
  .leitor-localizador-rect { box-shadow: 0 0 0 2px #1e293b; }
  .leitor-localizador-pino { box-shadow: 0 0 0 3px #1e293b; }
  .leitor-localizador-etiqueta { transition: none; }
}
.leitor-img-zoom { max-width: 100%; border-radius: 8px; box-shadow: var(--sombra); background: #fff; }
.leitor-estado { text-align: center; padding: 30px; }
.leitor-realcar { position: sticky; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; box-shadow: 0 10px 30px rgba(15,23,42,.35); }
.leitor-painel {
  border-left: 1px solid var(--cinza-2); background: var(--branco);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.leitor-painel .abas { padding: 8px 12px 0; margin: 0; }
.leitor-aba { padding: 12px 14px 20px; overflow-y: auto; flex: 1; }
.leitor-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.leitor-filtros input[type="search"] { width: 100%; }
.leitor-notas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.leitor-nota {
  border: 1px solid var(--cinza-2); border-left: 5px solid var(--nota-cor, #fbbf24);
  border-radius: 10px; padding: 9px 11px; background: var(--branco); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.leitor-nota:hover { background: var(--cinza-0); }
.leitor-nota.marcada,
.leitor-nota.selecionada {
  border-color: var(--acento);
  border-left-width: 6px;
  background: rgba(37, 99, 235, .05);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .35), var(--sombra);
}
.leitor-nota.em-edicao {
  border-color: var(--ambar);
  border-left-color: var(--ambar);
  background: var(--ambar-suave);
  box-shadow: 0 0 0 2px var(--ambar);
}
.leitor-nota.pulso-marcada {
  animation: leitorPulsoMarcada 1.2s ease-out;
}
@keyframes leitorPulsoMarcada {
  0% { transform: scale(1.025); box-shadow: 0 0 0 5px rgba(37, 99, 235, .45); }
  50% { transform: scale(1.01); box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }
  100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }
}
.badge-marcada {
  font-size: 11px;
  font-weight: 700;
  color: var(--acento);
  background: rgba(37, 99, 235, .12);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: auto;
}
/* Balão/Alerta flutuante ao pairar o rato sobre texto realçado */
.leitor-alerta-realce {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: #0f172a;
  color: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 340px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -100%);
  margin-top: -12px;
  transition: opacity .15s ease;
  opacity: 0;
  display: none;
}
.leitor-alerta-realce.visivel {
  display: block;
  opacity: 1;
}
.leitor-alerta-realce .alerta-titulo {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  margin-bottom: 3px;
  font-size: 12px;
}
.leitor-alerta-realce .alerta-desc {
  color: #cbd5e1;
  font-size: 11.5px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leitor-alerta-realce .alerta-dica {
  color: #94a3b8;
  font-size: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 4px;
}
.leitor-alerta-realce .alerta-dica strong {
  color: #f8fafc;
}
.leitor-alerta-realce .alerta-dica em {
  color: #93c5fd;
  font-style: normal;
  display: block;
  margin-top: 2px;
}
.leitor-nota-topo { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 3px; flex-wrap: wrap; }
.leitor-nota blockquote { margin: 4px 0; padding: 6px 9px; border-radius: 7px; background: var(--cinza-1); font-size: 12.5px; color: var(--texto); border: 0; }
.leitor-nota p { margin: 4px 0 0; font-size: 13px; }
.leitor-nota-acoes { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.leitor-ia-barra { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.leitor-ia-aviso { margin: 8px 0; padding: 9px 11px; border-radius: 8px; background: var(--cinza-1);
  border: 1px solid var(--ambar); font-size: 13px; line-height: 1.45; }
.leitor-ia-aviso .botao { margin-top: 6px; }
.leitor-ia-resp { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--cinza-1); font-size: 13px; }
.leitor-ia-resp strong { display: block; margin-bottom: 4px; }
.leitor-ia-perg { border-top: 1px solid var(--cinza-1); margin-top: 12px; padding-top: 10px; }
.leitor-cores { display: flex; gap: 6px; align-items: center; }
.leitor-cor {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.leitor-cor[aria-checked="true"] { border-color: var(--texto); box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--acento); }
.leitor-form { border-top: 1px solid var(--cinza-1); padding-top: 12px; }
.leitor body { overscroll-behavior: contain; }
.leitor-foco .leitor-corpo { grid-template-columns: minmax(0, 1fr) 0; }
.leitor-foco .leitor-painel { display: none; }
kbd { background: var(--cinza-1); border: 1px solid var(--cinza-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: 11px; font-family: inherit; }
@media (max-width: 980px) {
  .leitor-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(40vh, 52vh) 1fr; }
  .leitor-viewer { padding: 12px 10px 50px; }
  .leitor-painel { border-left: 0; border-top: 1px solid var(--cinza-2); }
  .leitor-titulos strong { max-width: 60vw; }
  .leitor-topo { gap: 8px; }
}

/* ---------- texto colado (digitalizados) ---------- */
.leitor-ia-colado { margin: 6px 0 2px; }
.leitor-ia-colado summary { cursor: pointer; }

/* ---------- índice local + citações (P1) ---------- */
.leitor-ia-citacoes { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 7px; }
.leitor-ia-citacoes .citacao {
  border: 1px solid var(--acento); background: var(--branco); color: var(--texto);
  border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer;
}
.leitor-ia-citacoes .citacao:hover { background: var(--ambar); }
.citacao-inline {
  border: 1px solid var(--cinza-2); background: var(--cinza-1); color: var(--texto);
  border-radius: 5px; padding: 0 4px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.citacao-inline:hover { border-color: var(--acento); background: var(--ambar); }
.leitor-ia-aviso-trunc {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--cinza-1);
  border: 1px solid var(--ambar); font-size: 13px; line-height: 1.45;
}
.leitor-ia-aviso-trunc .botao { margin-left: 6px; }
#leitor-ia-indice-estado { max-width: 34ch; }
#leitor-ia-indice .botao { vertical-align: baseline; }

/* ---------- cartão de perguntas (quiz em modal, estilo jogo) ---------- */
.quiz-fundo {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(120% 120% at 50% 0%, rgba(76, 29, 149, .55), rgba(15, 23, 42, .72));
  background-color: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: entrar .16s ease-out;
}
@supports (backdrop-filter: blur(3px)) {
  .quiz-fundo { backdrop-filter: blur(3px); }
}
.quiz-caixa {
  width: min(640px, 96vw); max-height: 88vh; overflow-y: auto;
  background: var(--branco); border-radius: 20px;
  border: 1px solid var(--cinza-2);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .45), 0 0 0 6px rgba(124, 58, 237, .08);
  display: flex; flex-direction: column;
  animation: quiz-chegada .22s ease-out;
}
@keyframes quiz-chegada {
  from { transform: translateY(14px) scale(.985); opacity: .5; }
  to { transform: none; opacity: 1; }
}
/* Faixa de jogo: gradiente fixo (legível nos dois temas), texto sempre claro. */
.quiz-topo-jogo {
  background: linear-gradient(120deg, #4c1d95, #7c3aed 55%, #2563eb);
  color: #f8fafc; padding: 14px 16px 12px;
  border-radius: 20px 20px 0 0;
  position: sticky; top: 0; z-index: 2;
}
.quiz-topo-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.quiz-titulo { font-weight: 800; font-size: 15px; }
.quiz-topo-meta { font-size: 12px; color: #ddd6fe; margin-top: 2px; }
.quiz-num-grande {
  font-size: 26px; font-weight: 800; letter-spacing: .02em; line-height: 1;
}
.quiz-num-grande small { font-size: 13px; font-weight: 600; color: #ddd6fe; }
.quiz-placar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.quiz-selo {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: #f8fafc; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700;
}
.quiz-selo.fogo { background: rgba(249, 115, 22, .35); border-color: rgba(251, 191, 36, .6); }
.quiz-selo-pontos { background: rgba(5, 150, 105, .2); border-color: var(--verde); }
.quiz-topo-jogo .botao-icone { color: #f8fafc; }
/* Anel do temporizador. */
.quiz-tempo { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.quiz-tempo svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.quiz-tempo .anel-fundo { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 4; }
.quiz-tempo .anel-valor { fill: none; stroke: #fbbf24; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear, stroke .3s; }
.quiz-tempo b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #f8fafc; }
.quiz-tempo.quiz-urgente .anel-valor { stroke: #f87171; }
.quiz-tempo.quiz-urgente { animation: quiz-urgente .5s ease infinite; }
@keyframes quiz-urgente {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
/* Entrada deslizante ao avançar/voltar. */
.quiz-desliza-esq { animation: quiz-slide-esq .22s ease-out; }
.quiz-desliza-dir { animation: quiz-slide-dir .22s ease-out; }
@keyframes quiz-slide-esq {
  from { transform: translateX(46px); opacity: .3; }
  to { transform: none; opacity: 1; }
}
@keyframes quiz-slide-dir {
  from { transform: translateX(-46px); opacity: .3; }
  to { transform: none; opacity: 1; }
}
/* Escolha de nível + desafio. */
.quiz-nivel {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 1.5px solid var(--cinza-2); background: var(--branco); color: var(--texto);
  border-radius: 14px; padding: 13px 14px; margin-bottom: 10px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.quiz-nivel:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-suave); transform: translateY(-1px); }
.quiz-nivel:disabled { opacity: .55; cursor: not-allowed; }
.quiz-nivel-nome { font-weight: 800; font-size: 15px; }
.quiz-nivel.quiz-desafio { border-style: dashed; border-color: var(--roxo); font-weight: 700; justify-content: center; }
.quiz-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--cinza-1);
  position: sticky; top: 0; background: var(--branco); border-radius: 20px 20px 0 0;
}
.quiz-progresso { height: 8px; background: var(--cinza-1); }
.quiz-progresso span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #2563eb); border-radius: 0 4px 4px 0; transition: width .2s; }
.quiz-pontos { display: flex; gap: 5px; padding: 10px 16px 0; font-size: 11px; }
.quiz-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cinza-2); }
.quiz-ponto.feito-ok { background: var(--verde); }
.quiz-ponto.feito-mau { background: var(--vermelho); }
.quiz-corpo { padding: 16px; }
.quiz-enunciado { font-size: 15.5px; font-weight: 600; margin: 0 0 12px; line-height: 1.45; }
.quiz-opcoes { display: flex; flex-direction: column; gap: 10px; }
.quiz-opcao {
  display: flex; gap: 12px; align-items: center; text-align: left;
  border: 1.5px solid var(--cinza-2); background: var(--branco); color: var(--texto);
  border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 14px; cursor: pointer;
  min-height: 52px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.quiz-opcao:hover:not(:disabled) {
  border-color: var(--acento); background: var(--acento-suave);
  transform: translateY(-1px); box-shadow: var(--sombra);
}
.quiz-opcao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.quiz-opcao:disabled { cursor: default; opacity: .95; }
.quiz-opcao.escolhida { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 2px var(--acento-suave); }
.quiz-opcao.certa { border-color: var(--verde); background: var(--verde-suave); animation: quiz-certa .45s ease; }
.quiz-opcao.errada { border-color: var(--vermelho); background: var(--vermelho-suave); animation: quiz-erro .4s ease; }
@keyframes quiz-certa {
  0% { transform: scale(1); }
  40% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes quiz-erro {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}
.quiz-letra {
  flex: 0 0 30px; height: 30px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, var(--cinza-1), var(--cinza-2)); color: var(--texto);
}
.quiz-opcao.escolhida .quiz-letra { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; }
.quiz-opcao.certa .quiz-letra { background: var(--verde); color: #fff; }
.quiz-opcao.errada .quiz-letra { background: var(--vermelho); color: #fff; }
.quiz-feedback {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; padding: 12px; border-radius: 12px; font-size: 13.5px;
  animation: entrar .16s ease-out;
}
.quiz-feedback .quiz-icone { font-size: 22px; line-height: 1.2; }
.quiz-feedback.ok { background: var(--verde-suave); border: 1px solid var(--verde); }
.quiz-feedback.mau { background: var(--vermelho-suave); border: 1px solid var(--vermelho); }
.quiz-rodape {
  display: flex; gap: 8px; align-items: center; padding: 12px 16px;
  border-top: 1px solid var(--cinza-1); background: var(--cinza-0); border-radius: 0 0 20px 20px;
  position: sticky; bottom: 0; flex-wrap: wrap;
}
.quiz-verificar-destaque {
  background: linear-gradient(120deg, #7c3aed, #2563eb) !important;
  border-color: transparent !important; color: #fff !important;
}
/* Resultado de festa. */
.quiz-festa { text-align: center; padding: 8px 0 4px; position: relative; overflow: hidden; }
.quiz-nota-gigante { font-size: 46px; font-weight: 800; line-height: 1; margin: 4px 0; }
.quiz-barra-pct { height: 10px; border-radius: 999px; background: var(--cinza-1); overflow: hidden; margin: 10px 0 4px; }
.quiz-barra-pct span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #2563eb, #059669); transition: width .8s ease; }
.quiz-nota { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.quiz-revisao { margin: 10px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.quiz-confete { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .9;
  animation: quiz-confete-cair 2.6s ease-in infinite; pointer-events: none; }
@keyframes quiz-confete-cair {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(260px) rotate(340deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-caixa { animation: none; }
  .quiz-opcao { transition: none; }
  .quiz-opcao.certa, .quiz-opcao.errada, .quiz-feedback { animation: none; }
  .quiz-barra-pct span { transition: none; }
  .quiz-tempo .anel-valor { transition: none; }
  .quiz-tempo.quiz-urgente, .quiz-desliza-esq, .quiz-desliza-dir { animation: none; }
  .quiz-confete { display: none; }
}
@media (max-width: 560px) {
  .quiz-caixa { width: 100%; max-height: 92vh; }
  .quiz-enunciado { font-size: 14.5px; }
  .quiz-num-grande { font-size: 22px; }
  .quiz-nota-gigante { font-size: 38px; }
}