/* ============================================================================
   v3_aprendizagem.css — FASE 4 enriquecimento (Aprendizagem ativa)

   1. Self-assessment chips por bloco (✓ entendi / ⚠️ dúvida / 🚨 revisar)
   2. Modo revelar progressivo (botão 👁 oculta conteúdo do bloco)
   3. Painel resumo notas (modal aberto com tecla R)
   4. Export caderno (.md / .json) — botões dentro do painel resumo

   Sem fallback, sem pós-processamento, sem chunking, sem truncamento.
   Tudo aditivo.
   ============================================================================ */

/* ===== VIDRO ATRÁS DOS ÍCONES QUE FLUTUAM (ordem do dono, 2026-08-02) =====
   "O ícone não pode ser transparente assim, a visibilidade tá ruim, ele tem
   que ter alguma coisinha atrás, algum vidrinho atrás. Independentemente de
   qual seja o fundo."

   A receita, igual para TODOS eles (favorito ☆, ✓/⚠️/🚨, 👁, ⚡, 🔊, setas):
   fundo OPACO e tinta escura andando em par, borda de contorno e sombra curta
   para descolar da pintura. Nada aqui depende do que está atrás, então lê
   igual sobre pintura clara, pintura escura e papel limpo. Vale como classe:
   ícone flutuante novo entra nesta receita, não ganha exceção própria.
     claro : fundo #f5f8f6 · aro #9fb0a8 · tinta escura · sombra .25
     escuro: fundo #232c29 · aro branco 45% · tinta clara · sombra .45
   O par que fica no v3_uxrapida.css (favorito) e no v3_audio.css (🔊) segue a
   mesma receita, com este comentário como fonte.
   ========================================================================= */

/* ---- 1. Self-assessment chips ------------------------------------------- */
.self-assess-bar{
  display:inline-flex;gap:6px;
  position:relative;  /* dentro do footer flex */
  z-index:4;
  padding:3px;border-radius:999px;
  background:#f5f8f6;border:1px solid #9fb0a8;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  font:16px/1 -apple-system,sans-serif;
  opacity:1;
  margin-left:auto;  /* empurra pra direita do footer */
}
[data-theme="dark"] .self-assess-bar{background:#232c29;border-color:rgba(255,255,255,.45);box-shadow:0 2px 8px rgba(0,0,0,.45);}

.self-assess-btn{
  width:26px;height:26px;border:0;border-radius:50%;
  background:transparent;cursor:pointer;
  font:16px/1 -apple-system;
  color:#25332d;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s,background .15s;
  padding:0;
}
[data-theme="dark"] .self-assess-btn{color:#e3ebe7;}
.self-assess-btn:hover{transform:scale(1.18);}
.self-assess-btn[data-state="entendi"].is-active{background:#dcfce7;box-shadow:0 0 0 2px #86efac;}
.self-assess-btn[data-state="duvida"].is-active{background:#fef3c7;box-shadow:0 0 0 2px #fcd34d;}
.self-assess-btn[data-state="revisar"].is-active{background:#fee2e2;box-shadow:0 0 0 2px #fca5a5;}
[data-theme="dark"] .self-assess-btn[data-state="entendi"].is-active{background:#14532d;box-shadow:0 0 0 2px #16a34a;}
[data-theme="dark"] .self-assess-btn[data-state="duvida"].is-active{background:#451a03;box-shadow:0 0 0 2px #d97706;}
[data-theme="dark"] .self-assess-btn[data-state="revisar"].is-active{background:#450a0a;box-shadow:0 0 0 2px #dc2626;}

.amanda-study-block[data-self-assess="entendi"]{border-left:3px solid #10b981;}
.amanda-study-block[data-self-assess="duvida"]{border-left:3px solid #f59e0b;}
.amanda-study-block[data-self-assess="revisar"]{border-left:3px solid #ef4444;}

/* ---- 2. Modo revelar progressivo --------------------------------------- */
.reveal-toggle-btn{
  position:absolute;top:8px;right:48px;
  width:32px;height:32px;border-radius:50%;
  background:#f5f8f6;border:1px solid #9fb0a8;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  cursor:pointer;font:16px/1 -apple-system;
  display:inline-flex;align-items:center;justify-content:center;
  color:#25332d;
  transition:color .15s,transform .12s;
  z-index:5;
}
.reveal-toggle-btn:hover{transform:scale(1.1);color:#06b6d4;}
[data-theme="dark"] .reveal-toggle-btn{background:#232c29;border-color:rgba(255,255,255,.45);color:#e3ebe7;box-shadow:0 2px 8px rgba(0,0,0,.45);}

.amanda-study-block.is-hidden-content > *:not(.amanda-block-head):not(.block-head):not(.ib-head):not(.bookmark-btn):not(.reveal-toggle-btn):not(.self-assess-bar){
  display:none;
}
.amanda-study-block.is-hidden-content::after{
  content:"🔒 Conteúdo oculto — clique 👁 para revelar";
  display:block;margin:12px 0 4px;padding:14px;
  border:1px dashed #cbd5e1;border-radius:8px;
  text-align:center;color:#64748b;font:italic 13px/1.4 -apple-system;
  background:#f8fafc;
}
[data-theme="dark"] .amanda-study-block.is-hidden-content::after{
  background:#0f172a;border-color:#334155;color:#94a3b8;
}

/* ---- Quiz-me ⚡ — auto-teste de memória --------------------------------
   Botão aparece SÓ em blocos textuais (article.block) — restrição via JS.
   Click esconde corpo do bloco e mostra textarea + comparação determinística. */
.quiz-me-btn{
  position:absolute;top:8px;right:48px;
  width:32px;height:32px;border-radius:50%;
  background:#fdf6e6;border:1px solid #d9a441;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  cursor:pointer;font:16px/1 -apple-system;
  display:inline-flex;align-items:center;justify-content:center;
  color:#7a3806;transition:transform .12s,background .15s;
  z-index:5;
}
.quiz-me-btn:hover{transform:scale(1.1);background:#fef3c7;}
[data-theme="dark"] .quiz-me-btn{background:#33280f;border-color:#a4711d;color:#fbd77e;box-shadow:0 2px 8px rgba(0,0,0,.45);}

/* Esconde conteúdo original quando quiz-me ativo */
.amanda-study-block.is-quiz-me-hidden > *:not(.amanda-block-head):not(.block-head)
:not(.bookmark-btn):not(.quiz-me-btn):not(.self-assess-bar)
:not(.quiz-me-ui):not(.ai-tutor-btn){
  display:none;
}

.quiz-me-ui{
  margin-top:14px;padding:14px 16px;border-radius:10px;
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1px solid #fcd34d;
}
[data-theme="dark"] .quiz-me-ui{background:linear-gradient(135deg,#451a03,#7c2d12);border-color:#c2410c;}
.qmu-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.qmu-head strong{font-size:.95rem;color:#92400e;}
[data-theme="dark"] .qmu-head strong{color:#fed7aa;}
.qmu-head span{flex:1;font-size:.82rem;color:#78350f;}
[data-theme="dark"] .qmu-head span{color:#fed7aa;}
.qmu-cancel{
  background:transparent;border:0;font:18px/1 inherit;
  color:#92400e;cursor:pointer;width:24px;
}
.qmu-text{
  width:100%;padding:10px 12px;
  border:1px solid #fcd34d;border-radius:8px;
  background:#fff;color:#0f172a;
  font:14px/1.5 inherit;resize:vertical;
}
[data-theme="dark"] .qmu-text{background:#0f172a;color:#f1f5f9;border-color:#c2410c;}
.qmu-actions{display:flex;gap:8px;margin-top:10px;}
.qmu-check,.qmu-reveal,.qmu-save,.qmu-close{
  padding:7px 14px;border-radius:7px;border:0;cursor:pointer;
  font:600 12px/1 -apple-system;
}
.qmu-check{background:#7c3aed;color:#fff;}
.qmu-check:hover{background:#6d28d9;}
.qmu-reveal{background:#fed7aa;color:#9a3412;}
.qmu-save{background:#10b981;color:#fff;}
.qmu-save:hover{background:#059669;}
.qmu-save:disabled{opacity:.7;cursor:default;}
.qmu-close{background:#cbd5e1;color:#475569;margin-left:8px;}

.qmu-result{margin-top:14px;padding-top:12px;border-top:1px dashed #fcd34d;}
.qmu-pct{font-size:1.05rem;margin-bottom:8px;}
.qmu-pct[data-cat="good"]{color:#15803d;}
.qmu-pct[data-cat="mid"]{color:#ca8a04;}
.qmu-pct[data-cat="low"]{color:#dc2626;}
.qmu-hits,.qmu-misses{font-size:.85rem;margin:6px 0;line-height:1.5;}
.qmu-hits{color:#15803d;}
.qmu-misses{color:#dc2626;}
.qmu-foot{display:flex;gap:8px;margin-top:10px;}

/* ---- 3. Painel resumo notas — REMOVIDO ---------------------------------
   Tecla R agora abre o notebook lateral do study_layer (caderno único).
   Itens block-level (bookmark/entendi/duvida/revisar/oculto) compartilham
   o mesmo IndexedDB que grifos/notas/resumos/reescritas. */

/* ---- Modo revisão pré-prova (1C) --------------------------------------
   Quando body.review-mode está ativo, esconde TODOS os blocos que não
   estão marcados como favorito/dúvida/revisar/erro. Aluno vê só o que
   importa pra véspera de prova. */
body.review-mode .amanda-study-block{ display:none; }
body.review-mode .amanda-study-block.is-review-target{ display:block; }
/* Banner topo durante review-mode */
.review-banner{
  position:fixed;top:0;left:0;right:0;z-index:10006;
  background:linear-gradient(90deg,#7c3aed,#06b6d4);color:#fff;
  font:600 13px/1.4 -apple-system;padding:10px 14px;
  display:none;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.2);
}
body.review-mode .review-banner{ display:flex; }
body.review-mode{ padding-top:46px; }
.review-banner-info{flex:1;}
.review-banner-info strong{margin-right:6px;}
.review-banner-exit{
  background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4);
  padding:5px 12px;border-radius:8px;cursor:pointer;font:600 12px/1 inherit;
}
.review-banner-exit:hover{background:rgba(255,255,255,.32);}
.review-banner-empty{
  margin:80px auto;max-width:520px;padding:32px;
  text-align:center;font:14px/1.55 -apple-system;
  background:#fffbeb;border:1px dashed #fcd34d;border-radius:14px;color:#92400e;
}
[data-theme="dark"] .review-banner-empty{
  background:#451a03;border-color:#c2410c;color:#fed7aa;
}

/* ---- Toast de metacognição (1A: marcou entendi mas errou) -------------- */
.metacog-toast{
  position:fixed;bottom:88px;left:50%;
  transform:translate(-50%, 16px);
  z-index:10050;
  width:min(420px, calc(100vw - 24px));
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  border:1px solid #fdba74;
  border-radius:14px;padding:14px 16px;
  box-shadow:0 16px 40px -8px rgba(217,119,6,.35);
  font:14px/1.5 -apple-system,sans-serif;color:#1f2937;
  opacity:0;transition:opacity .25s ease, transform .25s ease;
}
.metacog-toast.is-visible{opacity:1;transform:translate(-50%, 0);}
[data-theme="dark"] .metacog-toast{
  background:linear-gradient(135deg,#451a03,#7c2d12);color:#fef3c7;border-color:#c2410c;
}
.metacog-toast-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.metacog-toast-icon{font-size:1.2rem;}
.metacog-toast-head strong{flex:1;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:#9a3412;}
[data-theme="dark"] .metacog-toast-head strong{color:#fed7aa;}
.metacog-toast-close{
  background:transparent;border:0;cursor:pointer;font:20px/1 -apple-system;color:#9a3412;padding:0 4px;
}
.metacog-toast-close:hover{color:#c2410c;}
.metacog-toast-body{margin:0 0 10px;font-size:.86rem;line-height:1.45;}
.metacog-toast-body em{font-style:italic;color:#9a3412;font-weight:600;}
[data-theme="dark"] .metacog-toast-body em{color:#fed7aa;}
.metacog-toast-actions{display:flex;gap:8px;flex-wrap:wrap;}
.metacog-toast-actions button{
  border:0;border-radius:8px;padding:7px 12px;cursor:pointer;
  font:600 12px/1 -apple-system;
}
.metacog-toast-jump{background:#7c3aed;color:#fff;}
.metacog-toast-jump:hover{background:#6d28d9;}
.metacog-toast-mark-revisar{background:#fed7aa;color:#9a3412;}
.metacog-toast-mark-revisar:hover{background:#fdba74;}
@media (max-width:720px){
  .metacog-toast{bottom:88px;}
}
@media (prefers-reduced-motion: reduce){
  .metacog-toast{transition:none;}
}

/* ---- Campo de autoavaliação no rodapé do material ---------------------- */
.self-eval{
  margin:48px auto 32px;max-width:760px;
  padding:22px 26px;border-radius:18px;
  background:linear-gradient(135deg,#fdf4ff,#f5f3ff);
  border:1px solid #e9d5ff;
}
[data-theme="dark"] .self-eval{
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  border-color:#4c1d95;
}
.self-eval-head h2{margin:0 0 4px;font-size:1.15rem;font-weight:800;}
.self-eval-sub{margin:0 0 14px;font-size:.85rem;color:#64748b;}
[data-theme="dark"] .self-eval-sub{color:#cbd5e1;}
.self-eval-mood{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
.self-eval-mood-btn{
  width:48px;height:48px;border-radius:50%;
  border:2px solid transparent;background:#fff;
  cursor:pointer;font-size:1.6rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s,border-color .15s,background .15s;
}
.self-eval-mood-btn:hover{transform:scale(1.12);}
.self-eval-mood-btn.is-selected{
  border-color:#7c3aed;background:#ede9fe;
  box-shadow:0 0 0 4px rgba(124,58,237,.15);
}
[data-theme="dark"] .self-eval-mood-btn{background:#0f172a;}
[data-theme="dark"] .self-eval-mood-btn.is-selected{background:#4c1d95;border-color:#a78bfa;}
.self-eval-text{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid #cbd5e1;background:#fff;color:#0f172a;
  font:14px/1.5 inherit;resize:vertical;
}
[data-theme="dark"] .self-eval-text{background:#0f172a;color:#f1f5f9;border-color:#475569;}
.self-eval-actions{
  display:flex;align-items:center;gap:10px;margin-top:12px;
}
.self-eval-save{
  padding:9px 16px;border-radius:8px;border:0;cursor:pointer;
  background:#7c3aed;color:#fff;font:600 13px/1 inherit;
}
.self-eval-save:hover{background:#6d28d9;}
.self-eval-save:disabled{opacity:.5;cursor:not-allowed;}
.self-eval-status{font-size:.8rem;color:#10b981;font-weight:600;}

/* ---- 4. Animação pulse-jump no 📓 do dock --------------------------------
   Toda vez que algo for salvo no caderno (bookmark/self-assess/oculto/erro/acerto)
   o botão Caderno do dock mobile faz um salto + brilho rápido pra avisar
   que tem novidade. Pode ser interrompido por novo gatilho. */
@keyframes caderno-pulse-jump{
  0%   { transform: translateY(0)    scale(1);    box-shadow: 0 0 0 rgba(124,58,237,0); }
  20%  { transform: translateY(-10px) scale(1.18); box-shadow: 0 0 24px rgba(124,58,237,.6); }
  40%  { transform: translateY(0)    scale(0.96); box-shadow: 0 0 12px rgba(124,58,237,.3); }
  60%  { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 18px rgba(124,58,237,.45); }
  100% { transform: translateY(0)    scale(1);    box-shadow: 0 0 0 rgba(124,58,237,0); }
}
[data-dock-action="caderno"].is-pulsing,
[data-dock-action="caderno"].is-pulsing .mobile-bottom-dock-icon{
  animation: caderno-pulse-jump .8s cubic-bezier(.34,1.56,.64,1);
}
[data-dock-action="caderno"].is-pulsing .mobile-bottom-dock-icon{
  display:inline-block;  /* permite transform no span */
}
/* Badge "+1" que sobe junto com o bounce */
.caderno-pulse-badge{
  position:absolute;top:-2px;right:6px;z-index:2;
  background:#7c3aed;color:#fff;
  font:800 10px/1 -apple-system,sans-serif;
  padding:3px 6px;border-radius:999px;
  pointer-events:none;
  opacity:0;transform:translateY(0) scale(.7);
  animation:caderno-pulse-badge .9s ease-out forwards;
}
@keyframes caderno-pulse-badge{
  0%   { opacity:0; transform:translateY(0)   scale(.6); }
  20%  { opacity:1; transform:translateY(-12px) scale(1); }
  80%  { opacity:1; transform:translateY(-12px) scale(1); }
  100% { opacity:0; transform:translateY(-22px) scale(.9); }
}
@media (prefers-reduced-motion: reduce){
  [data-dock-action="caderno"].is-pulsing,
  [data-dock-action="caderno"].is-pulsing .mobile-bottom-dock-icon{ animation:none; }
  .caderno-pulse-badge{ animation:none; opacity:0; }
}

/* ===== Enfeitador de tabelas (2.x): ocultar respostas + virar flashcards == */
/* A tabela nunca corta quando a coluna de conteúdo fica estreita (modo conferência,
   janela menor, zoom): rola na horizontal em vez de ser cortada. Pra a rolagem funcionar,
   a tabela dentro do wrapper mantém a largura NATURAL do conteúdo (não encolhe as células
   até vazar) — quando não cabe, o wrapper cria a barra de rolagem. */
.tbl-shell{position:relative}
.tbl-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;
  /* barra nativa também visível (Firefox/quem rola no trackpad); no macOS ela some, por
     isso as setas abaixo são a afordância principal */
  scrollbar-width:auto;scrollbar-color:var(--accent,#b4823c) rgba(180,130,50,.14)}
.tbl-scroll::-webkit-scrollbar{height:12px;-webkit-appearance:none;appearance:none}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--accent,#b4823c);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.tbl-scroll > table{min-width:min-content;max-width:none}
/* Setas de rolagem — só aparecem quando a tabela não cabe (has-overflow). São a forma
   ÓBVIA de rolar (o macOS esconde a barra nativa). Clicar rola ~80% da largura visível. */
/* Mesma correção da setinha de rolagem (.scrollnav-btn) logo abaixo: o disco
   tingido pelo accent da pintura deixava a seta branca sobre claro. Disco
   escuro cheio e opaco, seta branca, sem depender do que está atrás. */
.tbl-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:1px solid rgba(255,255,255,.45);margin:0;padding:0;
  cursor:pointer;z-index:4;display:none;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;line-height:0;color:#fff;background:#26403a;
  opacity:1;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:background .15s,transform .15s}
.tbl-shell.has-overflow .tbl-nav{display:flex}
.tbl-nav:hover{background:#16786a;transform:translateY(-50%) scale(1.06)}
.tbl-nav.is-off{opacity:0;pointer-events:none}
.tbl-nav-l{left:8px}
.tbl-nav-r{right:8px}
/* Setinhas VERTICAIS ↑ ↓ das telinhas roláveis (índice, lista de materiais, comentários,
   caderno). Ficam fixas na tela (position:fixed) sobre a borda de cima/baixo da telinha;
   o JS (attachScrollNav) posiciona e mostra/esconde. Rolam o elemento certo ao clicar. */
/* Fundo e tinta opacos e em par: a setinha fica por cima da pintura, e o
   disco translúcido tingido pelo accent deixava a seta com contraste medido de
   1,79 sobre pintura clara (branco sobre claro). Disco escuro cheio, seta
   branca, contraste alto em qualquer fundo. Discreta pelo tamanho e pela cor,
   não pela transparência. */
.scrollnav-btn{position:fixed;width:44px;height:44px;border:1px solid rgba(255,255,255,.45);margin:0;padding:0;cursor:pointer;
  z-index:100060;display:none;align-items:center;justify-content:center;
  font-size:22px;font-weight:600;line-height:0;color:#fff;
  background:#26403a;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  opacity:1;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:background .15s,transform .15s}
.scrollnav-btn:hover{background:#16786a;transform:scale(1.06)}
.scrollnav-btn.is-off{opacity:0;pointer-events:none}
.tbl-deco-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.tbl-deco-btn{border:1px solid rgba(212,168,87,.45);background:rgba(212,168,87,.10);color:inherit;border-radius:999px;padding:6px 14px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.tbl-deco-btn:hover{background:rgba(212,168,87,.22);border-color:rgba(212,168,87,.7)}
.tbl-deco-msg{font-size:16px;opacity:.85}
.tbl-cell-reveal{border:1px dashed rgba(120,120,120,.5);background:rgba(150,150,150,.10);color:inherit;border-radius:8px;padding:3px 12px;font:inherit;font-size:16px;cursor:pointer;opacity:.8}
.tbl-cell-reveal:hover{opacity:1;background:rgba(212,168,87,.16);border-color:rgba(212,168,87,.6)}
.tbl-deco-btn.is-disabled,.tbl-deco-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.6);border-style:dashed}
.tbl-deco-btn.is-disabled:hover,.tbl-deco-btn[disabled]:hover{background:rgba(212,168,87,.10);border-color:rgba(212,168,87,.45)}
/* Tabela unificada (igual à compare_matrix): ocultar ESTÁVEL + cabeçalho/lateral clicáveis */
.ib-reveal-ghost{visibility:hidden}
.ib-reveal-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent,#7c3aed);text-transform:uppercase;letter-spacing:.02em;font-size:1rem;pointer-events:none}
.tbl-unified td.ib-table-reveal{position:relative;cursor:pointer;text-align:center;vertical-align:middle;background:repeating-linear-gradient(45deg,var(--ib-surface-soft,#f3f3f0),var(--ib-surface-soft,#f3f3f0) 6px,#eef2ff 6px,#eef2ff 12px)}
[data-theme="dark"] .tbl-unified td.ib-table-reveal{background:repeating-linear-gradient(45deg,var(--ib-surface-soft,#1a1410),var(--ib-surface-soft,#1a1410) 6px,#1f2937 6px,#1f2937 12px)}
.tbl-unified thead th.ib-matrix-head,.tbl-unified tbody tr > :first-child.ib-matrix-head{cursor:pointer}
.tbl-unified thead th.ib-matrix-head:hover,.tbl-unified tbody tr > :first-child.ib-matrix-head:hover{background:var(--ib-surface,rgba(124,58,237,.08))}