/* ==========================================================================
   Novidades do sistema — painel lateral + conteúdo da nota.

   Fica em arquivo próprio, não no componentes.css: é uma peça de UMA
   funcionalidade, não um componente do design system. Se um dia outra tela
   precisar de um painel lateral igual, aí sim ele vira peça do sistema (e aí
   com protótipo e aviso antes, como combinado).

   Cor, raio, sombra, fonte do texto e espaçamento da escala vêm de token.
   O que sobra em px é medida da PEÇA, sem degrau equivalente no design
   system: largura do painel (440px) e da coluna de leitura (760px), a
   escala dos títulos da nota (21/18/16px, entre os degraus de --fonte-*),
   o recuo da lista (22px) e ajustes óticos de 1 a 6px.
   ========================================================================== */

/* ---- 1. Fundo escuro e painel ------------------------------------------ */
.nv-fundo {
  position: fixed;
  /* começa abaixo das barras fixas do topo (banner da Senior, impersonação,
     status): elas ficam por cima de tudo (z 9998) e cobririam o painel */
  inset: var(--top-bars-offset, 0px) 0 0 0;
  background: var(--cor-texto);
  opacity: 0;
  transition: opacity var(--transicao);
  z-index: var(--z-modal-fundo);
}
.nv-fundo.nv-aberto { opacity: .45; }

.nv-painel {
  position: fixed;
  top: var(--top-bars-offset, 0px); right: 0; bottom: 0;
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border-left: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-lg);
  transform: translateX(100%);
  transition: transform var(--transicao);
  z-index: var(--z-modal);
}
.nv-painel.nv-aberto { transform: translateX(0); }

.nv-painel-cab {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}
.nv-painel-cab > i { color: var(--cor-primaria); }
.nv-painel-titulo { flex: 1; margin: 0; font-size: var(--fonte-lg); font-weight: var(--peso-forte); color: var(--cor-texto); }
.nv-painel-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-3) var(--esp-4); }

/* ---- 2. Item da lista --------------------------------------------------- */
.nv-item {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--esp-3);
  margin-bottom: var(--esp-3);
}
/* a não lida ganha uma faixa à esquerda — sem depender só de cor, o rótulo
   "Nova" diz a mesma coisa em texto */
.nv-item-nova { border-left: 3px solid var(--cor-primaria); }
.nv-item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.nv-item-titulo { margin: 0; font-size: var(--fonte-md); font-weight: var(--peso-forte); color: var(--cor-texto); line-height: 1.3; flex: 1 1 100%; }
.nv-item-data { font-size: var(--fonte-xs); color: var(--cor-texto-suave); flex: 1 1 100%; }
.nv-item-resumo { margin: var(--esp-2) 0 0; font-size: var(--fonte-sm); color: var(--cor-texto-medio); }

/* ---- 3. Corpo da nota (vale no painel e no aviso do meio da tela) ------- */
.nv-corpo { margin-top: var(--esp-2); }
.nv-corpo p { margin: 0 0 var(--esp-2); font-size: var(--fonte-md); color: var(--cor-texto-medio); line-height: 1.5; }
.nv-corpo p:last-child { margin-bottom: 0; }
.nv-figura { margin: var(--esp-2) 0 var(--esp-3); }
/* print nunca é ESTICADO além do tamanho real (borraria); o grande encolhe na coluna */
.nv-figura img { width: auto; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); display: block; }
/* enquanto o print vem do R2, um espaço reservado — sem ele só a borda de 1px
   aparecia (parecia um traço solto) e o texto pulava quando a imagem chegava */
.nv-figura img:not(.nv-carregada) { width: 100%; min-height: 160px; background: var(--cor-superficie-alt); }
.nv-figura figcaption { margin-top: var(--esp-1); font-size: var(--fonte-xs); color: var(--cor-texto-suave); }
/* quem escreveu (A3): avatar + nome completo, quebra de linha se forem muitos */
.nv-autores { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); margin-bottom: var(--esp-3); }
.nv-autor { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fonte-sm); color: var(--cor-texto-medio); }
.nv-detalhe-resumo { font-size: var(--fonte-lg); color: var(--cor-texto); margin-bottom: var(--esp-3); }
/* a dica fica à esquerda e o botão à direita (o rodapé do sistema ordena
   por `order`, então a dica precisa vir antes de tudo) */
.nv-rodape-dica { font-size: var(--fonte-sm); color: var(--cor-texto-suave); order: -2; }
.modal-footer > .nv-rodape-dica { margin-right: auto; }
.nv-leitura-aviso { font-size: var(--fonte-sm); color: var(--cor-aviso-texto); font-weight: var(--peso-medio); margin-right: auto; order: -2; }
.btn.nv-travado { opacity: .65; cursor: not-allowed; }
/* leitura obrigatória: barra fina no topo do rodapé, com o quanto já foi lido */
.nv-progresso { flex-basis: 100%; order: -3; height: 3px; margin: 0 calc(var(--esp-4) * -1) var(--esp-2); background: var(--cor-borda); overflow: hidden; }
.nv-progresso-barra { height: 100%; width: 0; background: var(--cor-primaria); transition: width var(--transicao-rapida); }
/* "1 de 2" no lugar da dica, quando há mais de um destaque na fila */
.nv-leitura-passo { order: -2; font-size: var(--fonte-sm); font-weight: var(--peso-medio); color: var(--cor-texto-medio); }
.modal-footer > .nv-leitura-passo { margin-right: auto; }

/* ---- 3b. Pé do item e leitura ------------------------------------------ */
.nv-item-pe { display: flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-2); }
.nv-item-sinal { font-size: var(--fonte-xs); color: var(--cor-texto-suave); }
.nv-item-pe .nv-ler { margin-left: auto; }

/* coluna de leitura: linha longa cansa — 760px é o limite confortável */
.nv-leitura-coluna { max-width: 760px; margin: 0 auto; }
.nv-leitura .nv-corpo p { font-size: var(--fonte-lg); }
.nv-leitura .nv-figura { margin: var(--esp-3) 0 var(--esp-4); }

/* print clicável: o cursor e o anel de foco dizem que dá para ampliar */
.nv-print-zoom { cursor: zoom-in; }
.nv-print-zoom:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

/* ---- 3c. Blocos da nota ------------------------------------------------- */
/* quatro níveis de título (o título da nota é o primeiro) */
.nv-titulo-secao { font-size: 21px; font-weight: var(--peso-forte); color: var(--cor-texto); line-height: 1.3; margin: var(--esp-4) 0 var(--esp-2); }
.nv-titulo-3 { font-size: 18px; }
.nv-titulo-4 { font-size: 16px; }
.nv-titulo-5 { font-size: var(--fonte-md); color: var(--cor-texto-medio); }
.nv-lista { padding-left: 22px; margin: 0 0 var(--esp-3); color: var(--cor-texto-medio); line-height: 1.5; }
.nv-lista li { margin-bottom: var(--esp-1); }
.nv-lista .nv-lista { margin: var(--esp-1) 0 0; }
.nv-leitura .nv-lista,
.nv-leitura .nv-tarefas { font-size: var(--fonte-lg); }

/* recuo de bloco (o Tab do ClickUp) */
.nv-recuo-1 { margin-left: var(--esp-5); }
.nv-recuo-2 { margin-left: calc(var(--esp-5) * 2); }
.nv-recuo-3 { margin-left: calc(var(--esp-5) * 3); }
.nv-recuo-4 { margin-left: calc(var(--esp-5) * 4); }

/* print com tamanho escolhido no editor (% da coluna) e o lado dele; com
   tamanho, a imagem enche a moldura — é o que quem escreveu viu no editor */
.nv-figura[style] img { width: 100%; }
/* duas classes: precisa vencer a margem de `.nv-leitura .nv-figura` */
.nv-figura.nv-figura-centro { margin-left: auto; margin-right: auto; }
.nv-figura.nv-figura-dir { margin-left: auto; margin-right: 0; }
.nv-figura-esq img { margin-left: 0; }
.nv-figura-dir img { margin-right: 0; }
.nv-figura-dir figcaption { text-align: right; }
@media (max-width: 767.98px) {
  /* no celular a coluna já é estreita: print pequeno ficaria ilegível */
  .nv-figura[style] { min-width: min(60%, 100%); }
}

/* cor de texto e marca-texto: a cor diz o significado, como no resto do sistema */
.nv-cor-perigo  { color: var(--cor-perigo-texto); }
.nv-cor-aviso   { color: var(--cor-aviso-texto); }
.nv-cor-sucesso { color: var(--cor-sucesso-texto); }
.nv-cor-info    { color: var(--cor-link); }
.nv-cor-suave   { color: var(--cor-texto-suave); }
mark.nv-marca-perigo,
mark.nv-marca-aviso,
mark.nv-marca-sucesso,
mark.nv-marca-info { padding: 1px 4px; border-radius: var(--raio-sm); color: var(--cor-texto); }
mark.nv-marca-perigo  { background: var(--cor-perigo-suave); }
mark.nv-marca-aviso   { background: var(--cor-aviso-suave); }
mark.nv-marca-sucesso { background: var(--cor-sucesso-suave); }
mark.nv-marca-info    { background: var(--cor-primaria-suave); }
.nv-destaque {
  border-left: 3px solid var(--cor-primaria);
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  margin: var(--esp-3) 0;
}
.nv-destaque p { margin: 0; color: var(--cor-texto-medio); }
.nv-destaque-assina { display: block; margin-top: var(--esp-1); font-size: var(--fonte-sm); color: var(--cor-texto-suave); }
.nv-separador { border-color: var(--cor-borda); margin: var(--esp-4) 0; }
.nv-tabela { margin-bottom: var(--esp-3); }
.nv-botao { margin: var(--esp-2) 0 var(--esp-3); }

/* tarefas, código e aviso ------------------------------------------------- */
.nv-tarefas { list-style: none; padding: 0; margin: 0 0 var(--esp-3); color: var(--cor-texto-medio); font-size: var(--fonte-md); }
.nv-tarefas li { display: flex; align-items: baseline; gap: var(--esp-2); margin-bottom: var(--esp-1); }
.nv-tarefas i { color: var(--cor-texto-suave); }
.nv-tarefa-feita span { text-decoration: line-through; color: var(--cor-texto-suave); }
.nv-codigo {
  background: var(--cor-superficie-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  font-size: var(--fonte-sm);
  color: var(--cor-texto);
  overflow-x: auto;
  margin-bottom: var(--esp-3);
}
/* cores do código: só tokens de texto do sistema (todos passam de 4,5:1 sobre
   a superfície clara), para o realce não destoar da nota */
.nv-codigo .token.comment,
.nv-codigo .token.prolog,
.nv-codigo .token.doctype { color: var(--cor-texto-suave); font-style: italic; }
.nv-codigo .token.keyword,
.nv-codigo .token.important,
.nv-codigo .token.selector { color: var(--cor-perigo-texto); }
.nv-codigo .token.string,
.nv-codigo .token.attr-value,
.nv-codigo .token.char { color: var(--cor-sucesso-texto); }
.nv-codigo .token.function,
.nv-codigo .token.tag,
.nv-codigo .token.class-name,
.nv-codigo .token.property { color: var(--cor-link); }
.nv-codigo .token.number,
.nv-codigo .token.boolean,
.nv-codigo .token.constant,
.nv-codigo .token.attr-name { color: var(--cor-aviso-texto); }
.nv-codigo .token.punctuation,
.nv-codigo .token.operator { color: var(--cor-texto-medio); }

/* a cor do aviso vem do SIGNIFICADO (informação, atenção, cuidado) e o ícone
   repete o recado — quem não distingue cor continua entendendo */
.nv-aviso {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  border-left: 3px solid var(--cor-primaria);
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-md);
  padding: var(--esp-3);
  margin: var(--esp-3) 0;
  color: var(--cor-texto-medio);
  font-size: var(--fonte-md);
}
.nv-aviso > i { margin-top: 3px; color: var(--cor-primaria); }
.nv-aviso-atencao { border-left-color: var(--cor-aviso); background: var(--cor-aviso-suave); }
.nv-aviso-atencao > i { color: var(--cor-aviso-texto); }
.nv-aviso-cuidado { border-left-color: var(--cor-perigo); background: var(--cor-perigo-suave); }
.nv-aviso-cuidado > i { color: var(--cor-perigo-texto); }

/* ---- 4. Pontinho no ícone do cabeçalho --------------------------------- */
/* o contador reaproveita a .navbar-badge do AdminLTE (igual ao sininho), por
   isso aqui só mora o estado "sem nada novo" */
.nv-contador:empty { display: none; }

/* "Marcar tudo como lido": no computador, o texto; no celular, só o ícone */
.nv-marcar-todas > i { display: none; }

/* fim da lista: o sentinela que puxa a próxima página (e o "Carregar mais"
   quando o navegador não sabe observar a rolagem) */
.nv-mais { display: flex; justify-content: center; padding: var(--esp-2) 0; }

/* ---- 5. Celular --------------------------------------------------------- */
@media (max-width: 767.98px) {
  .nv-painel { width: 100%; border-left: 0; }
  .nv-painel-cab { padding: var(--esp-3); }
  /* sem espaço para o texto: vira botão-ícone (o rótulo continua no aria-label) */
  .nv-painel-cab .nv-marcar-todas > i { display: inline-block; }
  .nv-painel-cab .nv-marcar-todas-texto { display: none; }
  .nv-painel-corpo { padding: var(--esp-3); }
}

/* faixa da pré-visualização (o mesmo bloco de aviso da nota) */
.nv-previa-faixa { margin-bottom: var(--esp-3); }

/* código no meio da frase (o `+55…` das notas) */
.nv-corpo code {
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: var(--raio-sm);
  background: var(--cor-superficie-alt);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}
.nv-corpo pre code { padding: 0; border: 0; background: none; font-size: inherit; }

/* ---- 6. Leitura de verdade: pergunta, quem leu, vídeo -------------------- */
/* pergunta de confirmação (opção A, 23/10/2026): no fim da nota, o Entendi
   só libera com a resposta certa */
.nv-pergunta { border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); padding: var(--esp-3); margin-top: var(--esp-4); background: var(--cor-superficie-alt); }
.nv-pergunta-rotulo { font-size: var(--fonte-xs); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: .04em; color: var(--cor-primaria); margin-bottom: var(--esp-1); }
.nv-pergunta-texto { font-size: var(--fonte-lg); font-weight: var(--peso-forte); color: var(--cor-texto); margin-bottom: var(--esp-2); }
.nv-opcao { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: 10px 12px; margin-bottom: var(--esp-2); font-size: var(--fonte-md); color: var(--cor-texto); cursor: pointer; }
.nv-opcao:hover:not([disabled]) { border-color: var(--cor-primaria); }
.nv-opcao:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.nv-opcao[disabled] { cursor: default; }
.nv-opcao-marca { width: 18px; height: 18px; border-radius: var(--raio-circulo); border: 2px solid var(--cor-borda); flex: 0 0 auto; }
.nv-opcao-errada { border-color: var(--cor-perigo); background: var(--cor-perigo-suave); color: var(--cor-perigo-texto); }
.nv-opcao-errada .nv-opcao-marca { border-color: var(--cor-perigo); background: var(--cor-perigo); }
.nv-opcao-certa { border-color: var(--cor-sucesso); background: var(--cor-sucesso-suave); color: var(--cor-sucesso-texto); }
.nv-opcao-certa .nv-opcao-marca { border-color: var(--cor-sucesso); background: var(--cor-sucesso); }
.nv-pergunta-retorno { font-size: var(--fonte-sm); color: var(--cor-perigo-texto); }
.nv-pergunta-retorno-certa, .nv-pergunta-feita { color: var(--cor-sucesso-texto); }
.nv-pergunta-feita { margin: 0; font-size: var(--fonte-sm); }

/* quem leu (opção B): avatares no canto inferior esquerdo do rodapé, no
   lugar da dica do megafone. O rodapé do sistema zera a margem dos filhos,
   por isso o seletor com .modal-footer (como a dica) */
.nv-leitores-fila { order: -2; display: inline-flex; align-items: center; gap: var(--esp-2); background: none; border: 0; padding: 4px 6px; border-radius: var(--raio-md); color: var(--cor-texto-medio); font-size: var(--fonte-sm); cursor: pointer; }
.modal-footer > .nv-leitores-fila { margin-right: auto; }
.nv-leitores-fila:hover { background: var(--cor-superficie-alt); }
.nv-leitores-fila:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
.nv-leitores-seta { font-size: 11px; }
.nv-leitores-fila[aria-expanded="true"] .nv-leitores-seta { transform: rotate(180deg); }
.nv-leitores-mais { background: var(--cor-superficie-alt); color: var(--cor-texto-medio); }
#nvLeitores:not([hidden]) ~ .nv-rodape-dica { display: none; }
/* com o aviso de leitura ou o "1 de 2" na tela, os avatares ficam colados à
   esquerda e o aviso logo depois; quem empurra o botão para a direita é o aviso */
.modal-footer > .nv-leitura-aviso { margin-right: auto; }
.modal-footer:has(> .nv-leitura-aviso:not([hidden])) > .nv-leitores-fila,
.modal-footer:has(> .nv-leitura-passo:not([hidden])) > .nv-leitores-fila { margin-right: 0; order: -3; }
.nv-leitura .modal-content { position: relative; }
.nv-leitores-painel { position: absolute; left: var(--esp-3); bottom: 68px; width: 360px; max-width: calc(100% - 2 * var(--esp-3)); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-lg); padding: var(--esp-3); z-index: 5; }
.nv-leitores-cab { display: flex; align-items: baseline; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.nv-leitores-cab .close { margin-left: auto; font-size: var(--fonte-md); }
.nv-leitores-estimado { font-size: var(--fonte-xs); color: var(--cor-texto-suave); }
.nv-leitores-lista { list-style: none; padding: 0; margin: var(--esp-2) 0 0; max-height: 260px; overflow-y: auto; }
.nv-leitor { display: flex; align-items: center; gap: var(--esp-2); padding: 6px 0; border-bottom: 1px solid var(--cor-borda); font-size: var(--fonte-sm); }
.nv-leitor:last-child { border-bottom: 0; }
.nv-leitor-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto); }
.nv-leitor-tempo { font-size: var(--fonte-xs); color: var(--cor-texto-suave); white-space: nowrap; }
.nv-leitor .hrs-etiqueta { font-size: 11px; white-space: nowrap; }
.nv-leitor-acertou { color: var(--cor-sucesso); }
.nv-leitores-vazio { padding: var(--esp-2) 0; font-size: var(--fonte-sm); color: var(--cor-texto-suave); }

/* vídeo na nota: ocupa a coluna, nunca maior que ela */
.nv-figura-video video { display: block; width: 100%; max-height: 70vh; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-texto); }

@media (max-width: 767.98px) {
  .nv-leitores-painel { left: var(--esp-2); right: var(--esp-2); width: auto; max-width: none; }
  .nv-opcao { min-height: var(--mob-alvo-toque, 48px); }
}

/* coluna "Leitura" da lista em Configurações › Novidades */
.nv-cfg-leitura { min-width: 90px; font-size: var(--fonte-sm); color: var(--cor-texto-medio); }
.nv-cfg-leitura-barra { height: 4px; margin-top: 4px; border-radius: var(--raio-pilula); background: var(--cor-borda); overflow: hidden; }
.nv-cfg-leitura-barra > div { height: 100%; background: var(--cor-primaria); }