/* Carnet d’Idées — folha de estilo única.
   Identidade: gabinete de estudos antigo. Papel de arquivo (pergaminho), tinta sépia,
   terracota e ocre; placas de madeira com letras entalhadas a ouro nos pontos de honra
   (marca, títulos de página, botões de criar, ideia central do mapa).
   3.0: os temas padrão são os profissionais (Claro e Escuro, seção 18a, com cor de destaque à escolha);
   o "gabinete" acima continua nas aparências clássicas (Pergaminho, Nogueira, Couro, Mármore, Jornal).
   Organização: 1 cores e fontes · 2 base · 3 controles · 3b placas de madeira · 4 casca
   5 início e documentos · 6 diálogos, menus, avisos, painéis · 7 mapa · 8 estudo · 9 planilha
   10 texto · 11 lista · 12 ajustes e atualizações · 13 celular · 14 impressão · 16 movimento
   17 pesquisa, referências e aprendizagem · 18 sistema de design (18a temas pro · 18c camada pro · 18e casca e navegação)
   Lei da casa: quem desenha (JS) não decide se aparece; visibilidade mora aqui, por classe. */

/* ============ 1. CORES E FONTES ============ */
/* Fontes embutidas no app (funcionam sem internet). Licença SIL OFL 1.1 — uso comercial livre. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  --fonte: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --raio: 6px;
  --raio-p: 4px;
  --t: 160ms cubic-bezier(.2, .7, .2, 1);
  --topo-h: 54px;
  /* ---- 2.0: tokens centrais (todos os temas). Valores soltos repetidos no CSS devem virar um destes. ---- */
  /* espaço (escala de 4 px) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  /* cantos */
  --r-xs: 4px; --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 20px; --r-pilula: 999px;
  /* controles: alturas mínimas e área de toque */
  --ctl-h: 38px; --ctl-h-p: 32px; --toque: 44px;
  /* movimento: durações e curvas. --mov multiplica deslocamentos e escalas (1 completo, 0 suave/reduzido) */
  --d-micro: 110ms; --d-rapida: 160ms; --d-media: 240ms; --d-lenta: 360ms;
  --c-padrao: cubic-bezier(.2, .8, .2, 1); --c-saida: cubic-bezier(.4, 0, 1, 1); --c-mola: cubic-bezier(.2, 1.25, .35, 1); --c-suave: cubic-bezier(.4, 0, .2, 1);
  --mov: 1;
  /* tipografia: escala */
  --f-micro: 11px; --f-meta: 12.5px; --f-corpo: 15px; --f-sub: 17px; --f-titulo: 22px; --f-tela: 28px;
  /* breakpoints usados nos @media (CSS não aceita variável na consulta; ficam documentados aqui):
     celular ≤ 760px · tablet 761–1100px · computador > 1100px · tela pequena ≤ 380px */
  /* madeira (mesmas imagens que a exportação em PNG usa) */
  --nogueira: url("../img/madeira-nogueira.jpg");
  --carvalho: url("../img/madeira-carvalho.jpg");
  --grao: url("../img/papel-grao.png");
  --nogueira-cor: #3a2416;
  --carvalho-cor: #a8763f;
  --ouro-entalhe: #ecc97f;
  --ouro-filete: rgba(236, 201, 127, .38);
  --entalhe-escuro: #2e1a0b;
  /* faixa do topo: tinta sépia nos dois temas */
  --faixa: #1b1611;
  --faixa-texto: #efe6d5;
  --faixa-texto-2: rgba(239, 230, 213, .66);
  --faixa-sup: rgba(239, 230, 213, .09);
  --faixa-borda: rgba(239, 230, 213, .16);
}
/* Pergaminho (claro) — o padrão da casa. */
:root, :root[data-tema="claro"] {
  --fundo: radial-gradient(ellipse 120% 80% at 50% -10%, #f7f0e2 0%, #efe6d5 52%, #e5d9c1 100%);
  --fundo-solido: #efe6d5;
  --sup: rgba(27, 22, 17, .035);
  --sup-2: rgba(27, 22, 17, .065);
  --sup-3: rgba(27, 22, 17, .11);
  --borda: rgba(27, 22, 17, .16);
  --borda-forte: rgba(27, 22, 17, .32);
  --texto: #1b1611;
  --texto-2: #4a3f33;
  --texto-3: #6b5d4b;
  --painel: #f8f2e6;
  --painel-2: #ebe1cd;
  --carta: #fbf7ee;
  --realce: #a33c19;
  --realce-texto: #fff8ec;
  --ocre: #9a6f1c;
  --pinho: #2f4a3d;
  --foco: #a33c19;
  --grade: rgba(27, 22, 17, .1);
  --marca-texto: rgba(207, 159, 58, .38);
  --sombra: 0 10px 30px rgba(52, 33, 12, .18);
  --sombra-leve: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px rgba(52, 33, 12, .08);
  --link: #a33c19;
  --perigo: #a8321f;
  --ok: #3f7a52;
  --aviso: #8a5a0c;
  --c-mapa: #a33c19;
  --c-planilha: #2f5a45;
  --c-texto: #34557a;
  --c-lista: #8a5a0c;
  color-scheme: light;
}
/* Nogueira (escuro) — o gabinete à luz de vela. */
:root[data-tema="escuro"] {
  --fundo: radial-gradient(ellipse 120% 80% at 50% -10%, #262018 0%, #17140f 56%, #0f0d0a 100%);
  --fundo-solido: #16130f;
  --sup: rgba(237, 227, 208, .04);
  --sup-2: rgba(237, 227, 208, .075);
  --sup-3: rgba(237, 227, 208, .12);
  --borda: rgba(237, 227, 208, .14);
  --borda-forte: rgba(237, 227, 208, .28);
  --texto: #ede3d0;
  --texto-2: #cbbea6;
  --texto-3: #a09078;
  --painel: #1f1a14;
  --painel-2: #29221a;
  --carta: #211b15;
  --realce: #e3bd6c;
  --realce-texto: #1b1611;
  --ocre: #e3bd6c;
  --pinho: #7fb394;
  --foco: #e3bd6c;
  --grade: rgba(237, 227, 208, .08);
  --marca-texto: rgba(227, 189, 108, .3);
  --sombra: 0 12px 34px rgba(0, 0, 0, .5);
  --sombra-leve: 0 2px 8px rgba(0, 0, 0, .25);
  --link: #ee7d55;
  --perigo: #ee7d55;
  --ok: #7fb394;
  --aviso: #e3bd6c;
  --c-mapa: #ee7d55;
  --c-planilha: #7fb394;
  --c-texto: #8fb0d6;
  --c-lista: #e3bd6c;
  --faixa: #0e0c09;
  color-scheme: dark;
}

/* Couro verde (escuro) — a mesa de biblioteca: couro tingido de verde, filetes de latão. */
:root[data-tema="couro"] {
  --fundo: radial-gradient(ellipse 120% 80% at 50% -10%, #2e4b3b 0%, #1e3529 52%, #13241b 100%);
  --fundo-solido: #1d3328;
  --sup: rgba(240, 228, 200, .045);
  --sup-2: rgba(240, 228, 200, .085);
  --sup-3: rgba(240, 228, 200, .13);
  --borda: rgba(240, 228, 200, .16);
  --borda-forte: rgba(240, 228, 200, .3);
  --texto: #f0e6cc;
  --texto-2: #d4c8a8;
  --texto-3: #aca182;
  --painel: #213b2f;
  --painel-2: #2a4739;
  --carta: #233f31;
  --realce: #d9b45f;
  --realce-texto: #13241b;
  --ocre: #d9b45f;
  --pinho: #9cc7a9;
  --foco: #d9b45f;
  --grade: rgba(240, 228, 200, .09);
  --marca-texto: rgba(217, 180, 95, .3);
  --sombra: 0 12px 34px rgba(0, 0, 0, .45);
  --sombra-leve: 0 2px 8px rgba(0, 0, 0, .22);
  --link: #e8c472;
  --perigo: #f08a6c;
  --ok: #9cc7a9;
  --aviso: #d9b45f;
  --c-mapa: #f08a6c;
  --c-planilha: #9cc7a9;
  --c-texto: #9fbde0;
  --c-lista: #d9b45f;
  --faixa: #0f1c15;
  color-scheme: dark;
}
/* Mármore e bronze (claro) — pedra clara com veios suaves e metal envelhecido. */
:root[data-tema="marmore"] {
  --fundo:
    linear-gradient(118deg, transparent 38%, rgba(110, 102, 88, .06) 39.2%, transparent 41%),
    linear-gradient(162deg, transparent 58%, rgba(110, 102, 88, .05) 59.5%, transparent 61.5%),
    linear-gradient(74deg, transparent 70%, rgba(110, 102, 88, .045) 71%, transparent 72.5%),
    radial-gradient(ellipse 130% 90% at 30% -10%, #fbfaf7 0%, #efede8 50%, #e1ded7 100%);
  --fundo-solido: #eeece7;
  --sup: rgba(30, 28, 24, .035);
  --sup-2: rgba(30, 28, 24, .065);
  --sup-3: rgba(30, 28, 24, .11);
  --borda: rgba(30, 28, 24, .15);
  --borda-forte: rgba(30, 28, 24, .3);
  --texto: #1e1c19;
  --texto-2: #4a4640;
  --texto-3: #6c665c;
  --painel: #f7f6f2;
  --painel-2: #e6e3dc;
  --carta: #fcfbf8;
  --realce: #8c5a2b;
  --realce-texto: #fffaf0;
  --ocre: #9a6e2c;
  --pinho: #3d5a4a;
  --foco: #8c5a2b;
  --grade: rgba(30, 28, 24, .09);
  --marca-texto: rgba(176, 138, 62, .3);
  --sombra: 0 10px 30px rgba(40, 34, 24, .16);
  --sombra-leve: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 6px rgba(40, 34, 24, .08);
  --link: #8c5a2b;
  --perigo: #a8321f;
  --ok: #3f7a52;
  --aviso: #8a5a0c;
  --c-mapa: #8c5a2b;
  --c-planilha: #3d5a4a;
  --c-texto: #3f5877;
  --c-lista: #9a6e2c;
  --faixa: #23201b;
  color-scheme: light;
}
/* Papel de jornal (claro) — papel-imprensa com retícula, tinta preta e o vermelho das manchetes. */
:root[data-tema="jornal"] {
  --fundo: radial-gradient(rgba(0, 0, 0, .05) .55px, transparent .75px) 0 0 / 4px 4px, linear-gradient(180deg, #f2eee3, #e9e3d3);
  --fundo-solido: #ece7da;
  --sup: rgba(20, 19, 17, .035);
  --sup-2: rgba(20, 19, 17, .07);
  --sup-3: rgba(20, 19, 17, .12);
  --borda: rgba(20, 19, 17, .2);
  --borda-forte: rgba(20, 19, 17, .45);
  --texto: #161514;
  --texto-2: #3a3833;
  --texto-3: #5f5c55;
  --painel: #f5f1e7;
  --painel-2: #e2ddcf;
  --carta: #f8f5ec;
  --realce: #b3261e;
  --realce-texto: #fffaf2;
  --ocre: #7d6a3b;
  --pinho: #2f4a3d;
  --foco: #b3261e;
  --grade: rgba(20, 19, 17, .1);
  --marca-texto: rgba(240, 214, 66, .45);
  --sombra: 0 8px 22px rgba(20, 19, 17, .16);
  --sombra-leve: 0 1px 3px rgba(20, 19, 17, .1);
  --link: #b3261e;
  --perigo: #b3261e;
  --ok: #2f6b45;
  --aviso: #7d5a0c;
  --c-mapa: #b3261e;
  --c-planilha: #2f4a3d;
  --c-texto: #23395b;
  --c-lista: #7d6a3b;
  --faixa: #161514;
  color-scheme: light;
}
:root[data-tema="jornal"] h1, :root[data-tema="jornal"] h2 { letter-spacing: -.01em; }
:root[data-tema="jornal"] .cartao { box-shadow: none; border-width: 1px 1px 3px; }

/* ============ 2. BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo-solido);
  /* grão de papel por cima do degradê (some no escuro, de propósito: é sépia sobre sépia) */
  background-image: var(--grao), var(--fundo);
  background-size: 220px 220px, auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; text-wrap: balance; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
[hidden] { display: none !important; }
.oculto-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--marca-texto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :root:not([data-movimento]) *, :root:not([data-movimento]) *::before, :root:not([data-movimento]) *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ============ 3. CONTROLES ============ */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px;
  background: var(--sup-2); border: 1px solid var(--borda); border-radius: var(--raio-p);
  color: var(--texto); cursor: pointer; white-space: nowrap; font-weight: 500;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.bt:hover { background: var(--sup-3); border-color: var(--borda-forte); }
.bt:active { transform: translateY(1px); }
.bt[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.bt.prim { background: var(--realce); border-color: transparent; color: var(--realce-texto); font-weight: 600; letter-spacing: .2px; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 2px 4px rgba(52, 33, 12, .18); }
.bt.prim:hover { filter: brightness(1.07); }
.bt.perigo { color: var(--perigo); }
.bt.plano { background: transparent; border-color: transparent; }
.bt.plano:hover { background: var(--sup-2); }
.bt.ico { width: 38px; padding: 0; }
.bt.peq { min-height: 32px; padding: 0 10px; font-size: 13.5px; }
.bt.ico.peq { width: 32px; padding: 0; }
.bt.ativo { background: var(--sup-3); border-color: var(--realce); color: var(--texto); }
.grupo-bt { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-p); }
.grupo-bt .bt { border-color: transparent; background: transparent; min-height: 32px; }
.grupo-bt .bt.ativo { background: var(--sup-3); border-color: var(--borda-forte); }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.campo > span, .rotulo { font-size: 11.5px; color: var(--texto-2); font-weight: 600; letter-spacing: .9px; text-transform: uppercase; }
.campo small { color: var(--texto-3); font-size: 12px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 38px; padding: 8px 11px;
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-p);
  color: var(--texto); outline: none; transition: border-color var(--t), background var(--t);
  box-shadow: 0 1px 2px rgba(52, 33, 12, .06) inset;
}
textarea.entrada { resize: vertical; min-height: 90px; line-height: 1.5; }
.entrada:focus { border-color: var(--realce); }
select.entrada option { background: var(--painel); color: var(--texto); }
.linha { display: flex; align-items: center; gap: 8px; }
.linha.entre { justify-content: space-between; }
.linha.quebra { flex-wrap: wrap; }
.cresce { flex: 1 1 auto; min-width: 0; }
.chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave i { width: 38px; height: 22px; border-radius: 11px; background: var(--sup-3); border: 1px solid var(--borda); position: relative; transition: background var(--t); flex: none; }
.chave i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto-2); transition: transform var(--t), background var(--t); }
.chave input:checked + i { background: var(--realce); }
.chave input:checked + i::after { transform: translateX(16px); background: var(--realce-texto); }
.chave input:focus-visible + i { outline: 2px solid var(--foco); outline-offset: 2px; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 2px; font-size: 11px; letter-spacing: .5px; background: var(--sup-2); color: var(--texto-2); border: 1px solid var(--borda); }
.etiqueta.ouro { color: var(--ocre); border-color: var(--ocre); }
.sep { height: 1px; background: var(--borda); margin: 12px 0; }
.dica { color: var(--texto-3); font-size: 12.5px; }
kbd { font-family: var(--fonte-mono); font-size: 11.5px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--borda-forte); background: var(--sup-2); }

/* ============ 3b. PLACAS DE MADEIRA ============ */
/* .placa = nogueira com letras entalhadas a ouro; .placa.carvalho = carvalho claro com letras queimadas.
   Camadas: textura · filete dourado por dentro (::before) · dois parafusos de latão (::after). */
.placa {
  position: relative; isolation: isolate;
  background: var(--nogueira-cor) var(--nogueira) center / 720px auto;
  color: var(--ouro-entalhe);
  font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: .04em;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 214, 150, .16);
  border: 0; border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 182, .2),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .4),
    0 2px 0 rgba(30, 16, 6, .35),
    0 7px 16px rgba(52, 33, 12, .28);
}
.placa::before {
  content: ""; position: absolute; inset: 4px; border: 1px solid var(--ouro-filete); border-radius: 2px;
  pointer-events: none; z-index: -1;
}
.placa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(circle at 9px 50%, #f3dfae 0 1px, #b08a3e 1.6px 2.6px, rgba(0, 0, 0, .55) 3.2px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 9px) 50%, #f3dfae 0 1px, #b08a3e 1.6px 2.6px, rgba(0, 0, 0, .55) 3.2px, transparent 3.8px);
}
.placa.sem-parafuso::after { display: none; }
.placa.carvalho {
  background: var(--carvalho-cor) var(--carvalho) center / 720px auto;
  color: var(--entalhe-escuro);
  text-shadow: 0 1px 0 rgba(255, 236, 200, .42), 0 -1px 0 rgba(40, 20, 4, .35);
}
.placa.carvalho::before { border-color: rgba(46, 26, 11, .35); }

/* ============ 4. CASCA ============ */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.topo {
  flex: none; height: var(--topo-h); display: flex; align-items: center; gap: 8px;
  padding: 0 12px; padding-top: env(safe-area-inset-top);
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  height: calc(var(--topo-h) + env(safe-area-inset-top));
  background: var(--faixa); color: var(--faixa-texto);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(207, 159, 58, .55), 0 3px 10px rgba(0, 0, 0, .18);
  position: relative; z-index: 20;
}
.topo .bt { color: var(--faixa-texto); background: transparent; border-color: transparent; }
.topo .bt:hover { background: var(--faixa-sup); border-color: var(--faixa-borda); }
.topo .bt.ativo { background: var(--faixa-sup); border-color: var(--ouro-filete); }
.topo .bt.prim { background: #cf9f3a; color: #1b1611; }
.marca {
  display: flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer;
  padding: 5px 22px 5px 22px; min-height: 38px; font-size: 16px;
}
.marca .selo { display: grid; place-items: center; color: var(--ouro-entalhe); filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .7)); }
.marca .nome-marca { font-weight: 600; }
.marca .nome-marca i { font-style: italic; font-weight: 400; }
.marca:hover { filter: brightness(1.08); }
.topo .titulo-doc {
  flex: 1 1 auto; min-width: 40px; max-width: 520px;
  background: transparent; border: 1px solid transparent; border-radius: var(--raio-p);
  padding: 6px 9px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; color: var(--faixa-texto); outline: none;
  text-overflow: ellipsis; letter-spacing: .1px;
}
.topo .titulo-doc:hover { border-color: var(--faixa-borda); }
.topo .titulo-doc:focus { border-color: #cf9f3a; background: var(--faixa-sup); }
.topo .espaco { flex: 1 1 auto; }
.topo .estado-salvo { font-size: 12px; color: var(--faixa-texto-2); white-space: nowrap; }
.topo .acoes { display: flex; align-items: center; gap: 4px; }
.topo > .bt, .topo > .marca, .topo .acoes { flex: none; }
.selo-offline { display: none; align-items: center; gap: 5px; font-size: 12px; color: #e3bd6c; }
body.sem-rede .selo-offline { display: inline-flex; }
.palco { position: relative; flex: 1 1 auto; min-height: 0; }
.tela { position: absolute; inset: 0; overflow: auto; }

/* ============ 5. INÍCIO E DOCUMENTOS (3.0) ============
   Valem para todos os temas (cores pelos tokens). A camada pro (seção 18c) só afina cantos e sombras.
   Início: pesquisa, criar, continuar, "para hoje", recentes, fixados/favoritos e pastas.
   Documentos: cabeçalho com filtro, chips de tipo e a lista em linhas (padrão) ou em grade. */
.tela-bib { scroll-padding-top: 12px; }
.bib { max-width: 1120px; margin: 0 auto; padding: 24px 32px 56px; display: flex; flex-direction: column; gap: 20px; }
.titulo-tela { margin: 0; font-size: var(--f-tela); line-height: 1.2; font-weight: 650; }
.inicio-sub { margin: 4px 0 0; }
.campo-pesquisa {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 680px; min-height: 44px; padding: 0 12px 0 14px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--carta); color: var(--texto-3);
  font: inherit; font-size: 14.5px; text-align: left; cursor: text; transition: border-color var(--t), box-shadow var(--t);
}
.campo-pesquisa:hover { border-color: var(--texto-3); }
.campo-pesquisa:focus-visible { outline: none; border-color: var(--realce); box-shadow: 0 0 0 3px var(--realce-suave, var(--sup-3)); }
.campo-pesquisa kbd { margin-left: auto; }
/* criar: uma fileira de botões (não uma galeria de cartões) */
.novos { display: flex; flex-wrap: wrap; gap: 8px; }
.bt.novo { gap: 8px; padding: 0 12px; min-height: 36px; font-weight: 500; }
.bt.novo .q { display: grid; place-items: center; color: var(--texto-3); }
.bt.novo.ia .q { color: var(--realce); }
/* fichas antigas de ferramenta (gerador: modelos de mapa) */
.novo.placa {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 15px 24px 14px; text-align: left;
  cursor: pointer; transition: transform var(--t), filter var(--t);
}
.novo.placa:hover { transform: translateY(-1px); filter: brightness(1.05); }
.novo.placa .q { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: inherit; background: none !important; }
.novo.placa b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.novo.placa small { display: block; font-family: var(--fonte); font-size: 12px; letter-spacing: .2px; opacity: .85; text-shadow: none; }
/* cor por tipo de documento (os temas pro deixam neutra; os clássicos mantêm a tinta de cada tipo) */
.cor-mapa { color: var(--c-mapa); }
.cor-planilha { color: var(--c-planilha); }
.cor-texto { color: var(--c-texto); }
.cor-lista { color: var(--c-lista); }
/* continuar de onde parou */
.continuar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); }
.continuar .q { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--raio-p); background: var(--sup-2); color: var(--texto-2); flex: none; }
.continuar .cresce { min-width: 0; }
.rotulo-continuar { font-size: 12.5px; color: var(--texto-3); font-weight: 600; }
.tit-continuar { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 1px 0 2px; }
/* seções */
.sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sec-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--borda); min-height: 32px; }
.sec-cab h2 { font-family: var(--fonte); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--texto-3); margin: 0; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.sec-cab h2::after { content: ""; width: 6px; height: 6px; border: 1px solid var(--ocre); transform: rotate(45deg); flex: none; }
.link-sec { font-size: 13px; color: var(--link); text-decoration: none; font-weight: 500; }
.link-sec:hover { text-decoration: underline; text-underline-offset: 3px; }
.sec-hoje { gap: 8px; }
.revisoes-hoje {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: var(--raio); background: var(--carta); border: 1px solid var(--ocre);
}
.revisoes-hoje .num { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; color: var(--realce); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, 1fr); gap: 28px; align-items: start; }
.inicio-lado { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lista-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.item-mini { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--raio-p); color: var(--texto); text-decoration: none; font-size: 14px; }
.item-mini:hover { background: var(--sup-2); }
.item-mini .q { display: grid; color: var(--texto-3); flex: none; }
.item-mini .cresce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-mini .n { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.item-mini .marca-mini { display: grid; color: var(--texto-3); }
.item-mini .marca-mini.fav { color: var(--ocre); }
.item-mini .marca-mini.fav svg { fill: currentColor; }
.vazio-mini { margin: 4px 2px; line-height: 1.5; }
/* lista de documentos: cabeçalho */
.bib-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.cab-titulo { display: flex; align-items: baseline; gap: 12px; flex: 1 1 260px; min-width: 0; flex-wrap: wrap; }
.cab-titulo .titulo-tela { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.busca { position: relative; flex: 0 1 300px; min-width: 180px; }
.busca .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.busca .entrada { padding-left: 34px; min-height: 36px; }
.linha-ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-top: -6px; }
.chips-tipo { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-tipo .chip-filtro { display: inline-flex; align-items: center; gap: 6px; }
.faixa-lixeira { gap: 12px; flex-wrap: wrap; }
/* lista em linhas */
.lista-docs { --cols-lista: minmax(0, 1fr) 128px 160px 118px 72px; display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); overflow: hidden; }
.lista-docs .cab-lista { display: grid; grid-template-columns: var(--cols-lista); gap: 12px; padding: 8px 14px; font-size: 12.5px; color: var(--texto-3); font-weight: 600; border-bottom: 1px solid var(--borda); background: var(--sup); }
.lista-docs .cartao {
  display: grid; grid-template-columns: var(--cols-lista); align-items: center; gap: 12px; min-height: 54px; padding: 6px 14px;
  border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 55px; transition: background-color var(--t);
}
.lista-docs .cartao:last-child { border-bottom: 0; }
.lista-docs .cartao:hover { background: var(--sup); transform: none; border-color: var(--borda); }
.lista-docs .cartao:active { transform: none; background: var(--sup-2); }
.lista-docs .cartao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.lista-docs .cartao .cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lista-docs .cartao .q { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: var(--raio-p); background: var(--sup-2); }
.nome-doc { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.lista-docs .cartao h3 { font-family: var(--fonte); font-size: 14.5px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.resumo-linha { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-tipo, .col-pasta { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-docs .cartao .rod { border: 0; padding: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); min-width: 0; letter-spacing: 0; flex-wrap: wrap; }
.lista-docs .cartao .fixo { display: grid; color: var(--texto-3); flex: none; }
.acoes-doc { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cartao .acoes-doc .estrela, .cartao .acoes-doc .mais { position: static; }
.lista-docs .cartao .estrela { width: 32px; height: 32px; }
/* linhas do Início: só nome e quando */
.lista-docs.compacta { --cols-lista: minmax(0, 1fr) auto 72px; }
.lista-docs.compacta .col-tipo, .lista-docs.compacta .col-pasta { display: none; }
.lista-docs.compacta .cartao .rod { color: var(--texto-3); font-size: 12.5px; }
/* grade (fichas) */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.cartao .tipo-doc { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; margin-bottom: -2px; }
.cartao {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 136px; padding: 15px 15px 12px;
  border-radius: 2px; background: var(--carta);
  border: 1px solid var(--borda-forte);
  box-shadow: inset 0 0 0 3px var(--carta), inset 0 0 0 4px var(--borda), var(--sombra-leve);
  cursor: pointer; transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.cartoes .cartao:hover { border-color: var(--realce); transform: translateY(-2px); }
.cartao .cab { display: flex; align-items: center; gap: 9px; }
.cartao .cab .q { width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.cartao h3 { margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.cartao p { margin: 0; color: var(--texto-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; }
.cartao .rod { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 12px; letter-spacing: .2px; border-top: 1px dotted var(--borda-forte); padding-top: 7px; flex-wrap: wrap; }
.cartoes .cartao .acoes-doc { position: absolute; top: 6px; right: 6px; }
.cartao .mais { opacity: 0; transition: opacity var(--t); }
.cartao:hover .mais, .cartao:focus-within .mais, .cartao:focus .mais { opacity: 1; }
.cartao .fixo { color: var(--realce); }
.cartoes .cartao .cab { padding-right: 64px; }
.vazio-bib { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; color: var(--texto-3); border: 1px dashed var(--borda-forte); border-radius: var(--raio); font-size: 15px; }
.vazio-bib p { margin: 0; max-width: 46ch; line-height: 1.5; color: var(--texto-2); }
.vazio-bib .ic { color: var(--texto-3); }
.aviso-memoria { padding: 10px 14px; border-radius: var(--raio-p); background: var(--carta); border: 1px solid var(--aviso); color: var(--aviso); font-size: 13.5px; }
@media (max-width: 1000px) {
  .inicio-grade { grid-template-columns: minmax(0, 1fr); }
  .lista-docs { --cols-lista: minmax(0, 1fr) 140px 112px 72px; }
  .lista-docs .col-tipo { display: none; }
  .lista-docs .cab-lista span:nth-child(2) { display: none; }
}
@media (max-width: 760px) {
  .bib { padding: 16px 16px 90px; gap: 16px; }
  .lista-docs, .lista-docs.compacta { --cols-lista: minmax(0, 1fr) auto; }
  .lista-docs .cab-lista, .lista-docs .col-pasta, .lista-docs .col-tipo { display: none; }
  .lista-docs .cartao { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome acoes" "rod acoes"; row-gap: 0; padding: 8px 8px 8px 12px; }
  .lista-docs .cartao .cab { grid-area: nome; }
  .lista-docs .cartao .rod { grid-area: rod; padding-left: 38px; font-size: 12.5px; color: var(--texto-3); }
  .lista-docs .cartao .acoes-doc { grid-area: acoes; }
  .lista-docs .resumo-linha { display: none; }
  .cartao .mais { opacity: 1; }
  .busca { flex: 1 1 100%; }
  .cartoes { grid-template-columns: 1fr; }
  .continuar { flex-wrap: wrap; }
  .continuar > .bt { width: 100%; }
  .campo-pesquisa kbd, .nav-pesquisa kbd { display: none; }
  .chip-filtro { min-height: 36px; }
  .lista-docs .cartao .mais.bt.ico.peq, .lista-docs .cartao .estrela { width: 40px; height: 40px; min-height: 40px; }
}
@media (hover: none) { .cartao .mais { opacity: 1; } }

/* ============ 6. DIÁLOGOS, MENUS, AVISOS, PAINÉIS ============ */
.veu { position: fixed; inset: 0; background: rgba(20, 13, 6, .5); z-index: 100; display: grid; place-items: center; padding: 18px; animation: aparecer 140ms ease-out; }
.dialogo {
  width: 100%; max-width: 520px; max-height: calc(100vh - 36px); display: flex; flex-direction: column;
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 4px;
  box-shadow: inset 0 0 0 4px var(--painel), inset 0 0 0 5px var(--borda), var(--sombra);
  animation: subir 160ms cubic-bezier(.2, .7, .2, 1);
}
.dialogo.largo { max-width: 760px; }
.dialogo .d-cab { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.dialogo .d-cab h2 { margin: 0; font-size: 20px; font-weight: 600; flex: 1 1 auto; }
.dialogo .d-corpo { padding: 10px 20px; overflow: auto; }
.dialogo .d-corpo p { margin: 0 0 12px; color: var(--texto-2); }
.dialogo .d-rod { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--borda); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.menu {
  position: fixed; z-index: 120; min-width: 200px; max-width: 320px; padding: 5px;
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 4px; box-shadow: var(--sombra);
  animation: aparecer 100ms ease-out;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 3px; background: none; text-align: left; cursor: pointer; color: var(--texto); font-size: 14px; }
.menu button:hover, .menu button:focus-visible { background: var(--sup-2); outline: none; }
.menu button.perigo { color: var(--perigo); }
.menu button .atalho { margin-left: auto; color: var(--texto-3); font-size: 12px; }
.menu .sep { margin: 4px 2px; }
.menu .titulo-menu { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 1.2px; padding: 7px 10px 3px; font-weight: 600; }

.avisos { position: fixed; left: 12px; right: 12px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 140; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 520px);
  padding: 10px 14px; border-radius: 3px; background: var(--faixa); color: var(--faixa-texto); border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(207, 159, 58, .35) inset, var(--sombra); font-size: 14px; animation: subir 160ms ease-out;
}
.aviso .bt { color: var(--faixa-texto); background: var(--faixa-sup); border-color: var(--faixa-borda); }
.aviso.erro { box-shadow: 0 0 0 1px rgba(238, 125, 85, .7) inset, var(--sombra); }
.aviso.ok .ic { color: #9fd1af; }
.aviso.erro .ic { color: #ee7d55; }
.aviso button { margin-left: 4px; }

.painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 330px; z-index: 30;
  background: var(--painel); border-left: 1px solid var(--borda-forte); box-shadow: var(--sombra);
  display: flex; flex-direction: column; transform: translateX(105%); transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
}
.painel.aberto { transform: none; }
.painel .p-cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; border-bottom: 1px solid var(--borda); }
.painel .p-cab h3 { margin: 0; font-size: 18px; flex: 1 1 auto; }
.painel .p-corpo { padding: 14px 16px 30px; overflow: auto; flex: 1 1 auto; }
.painel .p-sec { margin-bottom: 18px; }
.painel .p-sec > .rotulo { display: block; margin-bottom: 8px; }

.carregando { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borda-forte); border-top-color: var(--realce); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.progresso { height: 6px; border-radius: 1px; background: var(--sup-3); overflow: hidden; }
.progresso > i { display: block; height: 100%; background: var(--realce); width: 0; transition: width 200ms; }

/* ============ 7. MAPA ============ */
.mapa-tela { position: absolute; inset: 0; display: flex; flex-direction: column; }
.barra {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 10px; overflow-x: auto;
  border-bottom: 1px solid var(--borda); background: var(--painel);
  scrollbar-width: none;
}
.barra::-webkit-scrollbar { display: none; }
.barra .div { width: 1px; height: 22px; background: var(--borda); margin: 0 4px; flex: none; }
.barra .bt { flex: none; }
.mapa-area {
  position: relative; flex: 1 1 auto; overflow: hidden; touch-action: none; cursor: grab;
  outline: none;
}
.mapa-area.arrastando { cursor: grabbing; }
.mapa-fundo { position: absolute; inset: 0; }
.mapa-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.mapa-mundo svg.ligacoes { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.no {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px;
  width: max-content; max-width: 300px; padding: 8px 13px; border-radius: 10px; cursor: pointer; user-select: none; -webkit-user-select: none;
  border: 2px solid transparent; transition: box-shadow 120ms, opacity 160ms;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; font-size: 14.5px; line-height: 1.3;
}
.no .rot { min-width: 8px; outline: none; }
.no .rot:empty::before { content: "\00a0"; }
.no.editando { cursor: text; user-select: text; -webkit-user-select: text; }
.no.editando .rot { cursor: text; }
.no .icn { display: inline-flex; flex: none; }
.no .img { display: block; max-width: 100%; border-radius: 3px; pointer-events: none; }
.no.com-img { flex-direction: column; align-items: stretch; }
.no.com-img .lin { display: flex; align-items: center; gap: 7px; }
.no .marca-nota { flex: none; opacity: .75; }
.no.selecionado { box-shadow: 0 0 0 3px var(--mapa-sel, #c04a22); }
.no.multi { box-shadow: 0 0 0 2px var(--mapa-sel, #c04a22); }
.no.alvo-solta { box-shadow: 0 0 0 3px #3f7a52; }
.no.fantasma { opacity: .55; pointer-events: none; z-index: 5; }
.no .recolher {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; cursor: pointer; border: 1.5px solid currentColor; background: var(--mapa-fundo-c, #efe6d5);
  top: 50%; transform: translateY(-50%); text-shadow: none; font-family: var(--fonte);
}
.no .recolher.dir { right: -26px; }
.no .recolher.esq { left: -26px; }
.no .recolher.baixo { top: auto; bottom: -26px; left: 50%; transform: translateX(-50%); }
.no.raiz { font-size: 18px; font-weight: 700; padding: 13px 20px; }
.no.n1 { font-weight: 600; font-size: 15.5px; }
/* ideia central em placa de nogueira (temas com madeira). Medidas espelhadas na exportação PNG. */
.no.m-madeira {
  border: 2px solid transparent; padding: 15px 30px; border-radius: 4px; color: var(--ouro-entalhe);
  background: var(--nogueira-cor) var(--nogueira) center / 720px auto;
  font-weight: 600; letter-spacing: .03em;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 214, 150, .16);
  box-shadow: inset 0 1px 0 rgba(255, 228, 182, .2), inset 0 -2px 5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 0 rgba(30, 16, 6, .35), 0 8px 18px rgba(52, 33, 12, .3);
}
.no.m-madeira::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--ouro-filete); border-radius: 2px; pointer-events: none;
}
.no.m-madeira::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 11px 50%, #f3dfae 0 1px, #b08a3e 1.6px 2.8px, rgba(0, 0, 0, .55) 3.4px, transparent 4px),
    radial-gradient(circle at calc(100% - 11px) 50%, #f3dfae 0 1px, #b08a3e 1.6px 2.8px, rgba(0, 0, 0, .55) 3.4px, transparent 4px);
}
.no.m-madeira.selecionado { box-shadow: 0 0 0 3px var(--mapa-sel, #c04a22), 0 8px 18px rgba(52, 33, 12, .3); }
.no.m-madeira.multi { box-shadow: 0 0 0 2px var(--mapa-sel, #c04a22), 0 8px 18px rgba(52, 33, 12, .3); }
.no.m-madeira .recolher { color: var(--mapa-texto-c, #1b1611); }
/* formatos */
.no.f-retangulo { border-radius: 3px; }
.no.f-pilula { border-radius: 999px; }
.no.f-elipse { border-radius: 50%; padding: 14px 22px; }
.no.m-sublinhado, .no.m-sem { padding: 3px 4px 5px; border-radius: 3px; }
.no.m-sublinhado.selecionado, .no.m-sem.selecionado { box-shadow: 0 0 0 2px var(--mapa-sel, #c04a22); }
.no .recolher { opacity: 0; transition: opacity 120ms; }
.no:hover .recolher, .no.selecionado .recolher, .no[aria-expanded="false"] .recolher { opacity: 1; }
.no.f-sublinhado { background: transparent !important; border-color: transparent !important; border-radius: 0; padding-bottom: 6px; }
.no.f-sem { background: transparent !important; border-color: transparent !important; }
/* estudo: ramos escondidos */
.no.estudo-escondido { opacity: 0; pointer-events: none; }
.no.estudo-capa .rot { filter: blur(6px); }
.no.estudo-revelavel { cursor: pointer; }
.mapa-mini {
  position: absolute; right: 12px; bottom: 12px; width: 180px; height: 120px; border-radius: 3px;
  background: var(--painel); border: 1px solid var(--borda-forte); overflow: hidden; z-index: 4; box-shadow: var(--sombra-leve);
}
.mapa-mini canvas { width: 100%; height: 100%; display: block; }
.mapa-zoom { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 4px; background: var(--painel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-leve); }
.mapa-zoom span { min-width: 46px; text-align: center; font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.dica-mapa { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; font-size: 12.5px; color: var(--texto-2); background: var(--painel); border: 1px solid var(--borda); padding: 6px 14px; border-radius: 2px; pointer-events: none; white-space: nowrap; font-family: var(--fonte-titulo); font-style: italic; }
.mapa-area.com-dica-oculta .dica-mapa { display: none; }
.nota-flutuante { position: absolute; z-index: 6; max-width: 280px; padding: 9px 11px; border-radius: 2px; font-size: 13px; background: var(--carta); border: 1px solid var(--borda-forte); box-shadow: var(--sombra); color: var(--texto); white-space: pre-wrap; pointer-events: none; }
/* paletas do painel de estilo */
.amostras { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.amostra { aspect-ratio: 1; border-radius: 3px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.amostra.ativa { border-color: var(--texto); }
.amostra.nenhuma { background: repeating-linear-gradient(45deg, var(--sup-3) 0 4px, transparent 4px 8px); border: 1px dashed var(--borda-forte); }
.temas-mapa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tema-op { border: 2px solid var(--borda); border-radius: 4px; padding: 8px; cursor: pointer; background: none; text-align: left; color: var(--texto); }
.tema-op.ativo { border-color: var(--realce); }
.tema-op .prev { height: 46px; border-radius: 2px; margin-bottom: 6px; position: relative; overflow: hidden; }
.tema-op .prev i { position: absolute; height: 10px; border-radius: 2px; }
.tema-op small { font-size: 12.5px; }
.grade-icones { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.grade-icones button { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; border: 1px solid transparent; background: var(--sup); cursor: pointer; color: var(--texto); }
.grade-icones button:hover { border-color: var(--borda-forte); }
.grade-icones button.ativo { border-color: var(--realce); background: var(--sup-3); }
.opcoes-forma { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opcoes-forma button { padding: 8px 4px; border-radius: 3px; border: 1px solid var(--borda); background: var(--sup); color: var(--texto); cursor: pointer; font-size: 12.5px; }
.opcoes-forma button.ativo { border-color: var(--realce); background: var(--sup-3); }

/* ---- 7b. marcadores na ideia (medidas espelhadas em 15-mapa-exportar.js) ---- */
.no .tarefa {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 3px;
  border: 1.5px solid currentColor; opacity: .85; cursor: pointer; color: inherit;
}
.no .tarefa.feita { background: #3f7a52; border-color: #3f7a52; color: #fbf7ee; opacity: 1; }
.no .tarefa:hover { box-shadow: 0 0 0 3px rgba(63, 122, 82, .25); }
.no .prio {
  width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 var(--fonte); letter-spacing: 0; color: #fbf7ee; text-shadow: none;
}
.no .prio.p1, .prio.p1 { background: #a8321f; }
.no .prio.p2, .prio.p2 { background: #b07d1a; }
.no .prio.p3, .prio.p3 { background: #34557a; }
.no .progresso-no {
  flex: none; height: 18px; padding: 0 6px; border-radius: 9px; font: 600 11px/18px var(--fonte); letter-spacing: 0; text-shadow: none;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, rgba(63, 122, 82, .32) var(--p), rgba(127, 127, 127, .12) var(--p));
}
.no .progresso-no.completo { box-shadow: inset 0 0 0 1px rgba(63, 122, 82, .6); }
.no .link-no { display: inline-flex; flex: none; cursor: pointer; opacity: .85; }
.no .link-no:hover { opacity: 1; }
.no.com-etq { flex-direction: column; align-items: stretch; }
.no.com-etq:not(.com-img) { gap: 5px; }
.no.com-etq .lin { display: flex; align-items: center; gap: 7px; }
.no .etiquetas-no { display: flex; flex-wrap: wrap; gap: 4px; }
.no .etq {
  height: 18px; padding: 0 7px; border-radius: 3px; font: 500 11px/18px var(--fonte); letter-spacing: 0; text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.no.m-madeira .etq { background: rgba(236, 201, 127, .18) !important; color: var(--ouro-entalhe) !important; }
/* busca e apresentação */
.no.achado { box-shadow: 0 0 0 2px rgba(207, 159, 58, .9), 0 0 0 6px rgba(207, 159, 58, .2); }
.no.achado-atual { box-shadow: 0 0 0 3px #cf9f3a, 0 0 0 8px rgba(207, 159, 58, .28); }
.mapa-area.apresentando .no { transition: opacity 240ms, box-shadow 240ms; }
.mapa-area.apresentando .no.apres-futuro { opacity: .12; }
.mapa-area.apresentando .no.apres-visto { opacity: .55; }
.mapa-area.apresentando .no.apres-atual { opacity: 1; box-shadow: 0 0 0 3px var(--mapa-sel, #c04a22), 0 10px 30px rgba(52, 33, 12, .25); }
.mapa-area.apresentando svg.ligacoes { opacity: .5; }
.mapa-area.apresentando .mapa-mini, .mapa-area.apresentando .mapa-zoom, .mapa-area.apresentando .dica-mapa { display: none; }

/* ---- 7c. ligações livres, molduras e o traço à mão ---- */
.mapa-mundo svg.ligacoes .lig-hit { pointer-events: stroke; cursor: pointer; }
.mapa-mundo svg.ligacoes .lig-alca { pointer-events: all; cursor: grab; }
.mapa-rotulos { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lig-rotulo {
  position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 180px; padding: 3px 9px; border-radius: 4px;
  background: var(--mapa-fundo-c, #fbf7ee); border: 1px solid currentColor; font: italic 400 13px/17px var(--fonte-titulo);
  text-align: center; white-space: normal; cursor: pointer; box-shadow: 0 2px 6px rgba(52, 33, 12, .12);
}
.lig-rotulo.sel { box-shadow: 0 0 0 3px var(--mapa-sel, #c04a22); transform: translate(-50%, calc(-100% - 14px)); }
/* com a ligação selecionada, o texto sobe para deixar livre o ponto do meio (que curva a linha) */
.moldura-titulo {
  position: absolute; left: 0; top: 0; height: 18px; padding: 0 8px; border: 1px solid; border-radius: 3px;
  background: var(--mapa-fundo-c, #fbf7ee); font: 600 11.5px/16px var(--fonte); letter-spacing: 1.2px; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
}
.traco-livre { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 6; transition: opacity 240ms; }
.traco-livre path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .85; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .4)); }
.traco-livre.sumindo { opacity: 0; }
.alca-ligar {
  position: absolute; left: 0; top: 0; z-index: 7; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: crosshair; touch-action: none; transform-origin: 0 100%;
  background: var(--nogueira-cor) var(--nogueira) center / 200px auto; color: var(--ouro-entalhe);
  border: 1.5px solid rgba(236, 201, 127, .7); box-shadow: 0 2px 6px rgba(30, 16, 6, .35);
}
.alca-ligar:hover { filter: brightness(1.15); }
.mapa-area.modo-ligar, .mapa-area.modo-ligar .no { cursor: crosshair; }
.mapa-area.desenhando { cursor: crosshair; }
.no.alvo-ligar { box-shadow: 0 0 0 3px #cf9f3a, 0 0 0 9px rgba(207, 159, 58, .25); }
.lig-barra {
  position: absolute; left: 0; top: 0; z-index: 9; display: flex; gap: 2px; padding: 3px; border-radius: 4px;
  background: var(--faixa); border: 1px solid #000; box-shadow: 0 0 0 1px rgba(207, 159, 58, .35) inset, var(--sombra);
}
.lig-barra .bt { color: var(--faixa-texto); }
.lig-barra .bt:hover { background: var(--faixa-sup); }
/* papel do mapa (o tamanho e a posição acompanham a câmera, em 12-mapa-render.js) */
.mapa-area[data-fundo="pontilhado"] .mapa-fundo { background-image: radial-gradient(circle, var(--mapa-grade-c) 1.1px, transparent 1.4px); }
.mapa-area[data-fundo="quadriculado"] .mapa-fundo { background-image: linear-gradient(var(--mapa-grade-c) 1px, transparent 1px), linear-gradient(90deg, var(--mapa-grade-c) 1px, transparent 1px); }
.mapa-area[data-fundo="pautado"] .mapa-fundo { background-image: linear-gradient(transparent calc(100% - 1px), var(--mapa-grade-c) calc(100% - 1px)); }
/* trilha do modo foco */
.trilha-foco {
  position: absolute; left: 12px; top: 12px; z-index: 8; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  max-width: calc(100% - 24px); padding: 4px 4px 4px 10px; border-radius: 4px; background: var(--painel);
  border: 1px solid var(--borda-forte); box-shadow: var(--sombra-leve); font-size: 13px;
}
.trilha-foco .rotulo-trilha { display: inline-flex; align-items: center; gap: 5px; color: var(--realce); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; font-size: 11px; margin-right: 4px; }
.trilha-foco .sep-trilha { color: var(--texto-3); }
.trilha-foco .passo-trilha { background: none; border: 0; padding: 4px 6px; border-radius: 3px; cursor: pointer; color: var(--texto-2); font-family: var(--fonte-titulo); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-foco .passo-trilha:hover { background: var(--sup-2); color: var(--texto); }
.trilha-foco .passo-trilha.atual { color: var(--texto); font-weight: 600; cursor: default; }
/* busca */
.busca-mapa {
  position: absolute; right: 12px; top: 12px; z-index: 9; display: flex; align-items: center; gap: 4px; width: min(440px, calc(100% - 24px));
  padding: 4px 4px 4px 10px; border-radius: 4px; background: var(--painel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra);
}
.busca-mapa .ic-busca { color: var(--texto-3); display: grid; }
.busca-mapa .entrada { flex: 1 1 auto; min-width: 0; min-height: 32px; border: 0; background: transparent; box-shadow: none; padding: 4px 6px; }
.busca-mapa .contador-busca { font-size: 12px; color: var(--texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.busca-mapa.sem-resultado .contador-busca { color: var(--perigo); }
/* apresentação */
.apres-barra {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10; width: min(640px, calc(100% - 24px));
  display: flex; flex-direction: column; gap: 10px;
}
.apres-cartao {
  padding: 16px 20px; border-radius: 2px; background: var(--carta); border: 1px solid var(--borda-forte);
  box-shadow: inset 0 0 0 3px var(--carta), inset 0 0 0 4px var(--borda), var(--sombra);
}
.apres-caminho { font-size: 11.5px; color: var(--texto-3); letter-spacing: .5px; margin-bottom: 4px; }
.apres-titulo { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.apres-nota { margin-top: 8px; color: var(--texto-2); font-size: 14.5px; white-space: pre-wrap; max-height: 30vh; overflow: auto; }
.apres-controles { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 4px; background: var(--faixa); border: 1px solid #000; box-shadow: var(--sombra); }
.apres-controles .bt:not(.prim) { color: var(--faixa-texto); background: transparent; border-color: transparent; }
.apres-controles .bt.prim { background: #cf9f3a; color: #1b1611; }
.apres-controles .apres-contador { color: var(--faixa-texto); font-size: 13px; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.apres-controles .progresso { flex: 1 1 auto; background: rgba(239, 230, 213, .15); }
.apres-controles .progresso > i { background: #cf9f3a; }
/* informações do mapa */
.info-mapa { display: flex; flex-direction: column; gap: 16px; }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cifra { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 2px; background: var(--carta); }
.cifra b { font-family: var(--fonte-titulo); font-size: 26px; line-height: 1.1; font-weight: 600; color: var(--realce); font-variant-numeric: tabular-nums; }
.cifra span { font-size: 12.5px; color: var(--texto); }
.cifra small { font-size: 11px; color: var(--texto-3); }
.info-sec { display: flex; flex-direction: column; gap: 8px; }
.info-sec p { margin: 0; }
.chip-info { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 3px; background: var(--sup-2); font-size: 12.5px; }
.chip-info .prio { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--fonte); color: #fbf7ee; }

/* ---- 7d. quadro livre (Miro): post-its, textos, botões +, barra de contexto, seleção por área ---- */
.mapa-elementos { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
/* post-its ficam por cima das ideias (como no Miro: o que é colado por último fica em cima) */
.elemento { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.elemento.postit {
  padding: 14px 14px 16px; font: italic 400 15px/21px var(--fonte-titulo); border-radius: 2px;
  box-shadow: 0 1px 1px rgba(52, 33, 12, .12), 0 10px 18px -8px rgba(52, 33, 12, .38);
}
/* fita adesiva no alto do post-it */
.elemento.postit::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 58px; height: 17px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 252, 240, .55); box-shadow: 0 1px 2px rgba(52, 33, 12, .12); pointer-events: none;
}
.elemento.texto { padding: 4px 2px; font: italic 400 17px/24px var(--fonte-titulo); }
.elemento .el-texto { white-space: pre-wrap; overflow-wrap: anywhere; outline: none; min-height: 1em; }
.elemento .el-texto:empty::before { content: attr(data-vazio); opacity: .5; }
.elemento.sel { outline: 2px solid var(--mapa-sel, #c04a22); outline-offset: 3px; }
.elemento.texto.sel { outline-style: dashed; }
.elemento.editando { cursor: text; user-select: text; -webkit-user-select: text; }
.elemento.editando .el-texto { cursor: text; }
.elemento.alvo-ligar { outline: 3px solid #cf9f3a; outline-offset: 4px; }
.elemento .el-redim {
  position: absolute; right: -9px; bottom: -9px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center;
  background: var(--painel); border: 1.5px solid var(--mapa-sel, #c04a22); color: var(--mapa-sel, #c04a22); cursor: nwse-resize;
}
.elemento.sel:not(.editando) .el-redim { display: grid; }
.mapa-area.modo-laco { cursor: crosshair; }
.laco { position: absolute; z-index: 9; border: 1.5px dashed var(--realce); background: rgba(207, 159, 58, .08); pointer-events: none; border-radius: 2px; }
.mais-ideia {
  position: absolute; left: 0; top: 0; z-index: 7; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; transform-origin: 0 0; cursor: pointer;
  background: var(--painel); color: var(--realce); border: 1.5px solid var(--realce); box-shadow: 0 2px 5px rgba(52, 33, 12, .25);
}
.mais-ideia:hover { background: var(--realce); color: var(--realce-texto); }
.no-barra {
  position: absolute; left: 0; top: 0; z-index: 9; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 4px;
  background: var(--faixa); border: 1px solid #000; box-shadow: 0 0 0 1px rgba(207, 159, 58, .35) inset, var(--sombra);
  max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none;
}
.no-barra::-webkit-scrollbar { display: none; }
.no-barra .bt { color: var(--faixa-texto); flex: none; }
.no-barra .bt:hover { background: var(--faixa-sup); }
.no-barra .div { width: 1px; height: 20px; background: var(--faixa-borda); margin: 0 3px; flex: none; }
.no-barra .conta-sel { color: var(--faixa-texto-2); font-size: 12px; padding: 0 8px; white-space: nowrap; }
.no-barra .amostra-barra { width: 22px; height: 22px; flex: none; margin: 0 2px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .35); cursor: pointer; padding: 0; }
.no-barra .amostra-barra:hover { outline: 2px solid #cf9f3a; }
.paleta-pop {
  position: fixed; z-index: 130; display: grid; grid-template-columns: repeat(8, 26px); gap: 6px; padding: 10px; border-radius: 4px;
  background: var(--painel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra);
}
.paleta-pop .amostra { width: 26px; height: 26px; }
/* cronômetro de estudo (relógio de bolso no canto) */
.cronometro {
  position: fixed; z-index: 90; left: max(12px, env(safe-area-inset-left)); bottom: calc(70px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto auto 1fr auto auto; grid-template-rows: auto 3px; align-items: center; column-gap: 8px;
  padding: 6px 4px 6px 10px; border-radius: 4px; background: var(--faixa); color: var(--faixa-texto); border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(207, 159, 58, .4) inset, var(--sombra); min-width: 220px;
}
.cronometro .mostrador { color: #cf9f3a; display: grid; }
.cronometro .tempo { font: 600 18px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.cronometro .rot-crono { font-size: 11.5px; color: var(--faixa-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cronometro .bt { color: var(--faixa-texto); }
.cronometro .prog-crono { grid-column: 1 / -1; height: 3px; background: rgba(239, 230, 213, .12); border-radius: 2px; overflow: hidden; margin: 4px 6px 0 0; }
.cronometro .prog-crono i { display: block; height: 100%; width: 0; background: #cf9f3a; transition: width .5s linear; }
.cronometro.pausado .tempo { opacity: .55; }
/* conversa com a IA (MyMap) */
.chat { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.chat-lista { flex: 1 1 auto; min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 6px; }
.bolha { max-width: 92%; padding: 9px 12px; border-radius: 3px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.bolha.ia { align-self: flex-start; background: var(--carta); border: 1px solid var(--borda-forte); box-shadow: inset 3px 0 0 var(--ocre); }
.bolha.voce { align-self: flex-end; background: var(--faixa); color: var(--faixa-texto); }
.bolha.esperando { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-style: italic; }
.bolha-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--borda-forte); font-size: 12.5px; color: var(--ok); }
.chat-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-sug { padding: 5px 10px; border-radius: 14px; border: 1px solid var(--borda-forte); background: var(--sup); color: var(--texto-2); font-size: 12.5px; cursor: pointer; }
.chip-sug:hover { border-color: var(--realce); color: var(--texto); }
.chat-envio { display: flex; gap: 6px; align-items: flex-end; }
.chat-campo { flex: 1 1 auto; min-height: 44px !important; resize: none; }
/* atalhos */
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px 22px; }
.grupo-atalhos h3 { margin: 0 0 8px; font-size: 16px; }
.grupo-atalhos dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; align-items: baseline; }
.grupo-atalhos dt { white-space: nowrap; }
.grupo-atalhos dd { margin: 0; color: var(--texto-2); font-size: 13.5px; }
.grupo-atalhos .ou { color: var(--texto-3); }
/* prévia dos modelos */
.novo .previa-modelo { display: block; width: 100%; margin: -4px 0 2px; padding: 4px; border-radius: 3px; background: rgba(251, 247, 238, .82); box-shadow: inset 0 1px 3px rgba(46, 26, 11, .35); }

/* ============ 8. ESTUDO ============ */
.estudo-faixa {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 16px; border-radius: 3px;
  background: var(--faixa); color: var(--faixa-texto); border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(207, 159, 58, .4) inset, var(--sombra); font-size: 13.5px; white-space: nowrap;
}
.estudo-faixa b { color: #e3bd6c; font-family: var(--fonte-titulo); }
.estudo-faixa .bt { color: var(--faixa-texto); background: var(--faixa-sup); border-color: var(--faixa-borda); }
.flash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 18px; overflow: auto; }
.flash .contagem { color: var(--texto-3); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
/* carta = ficha pautada de biblioteca: linha vermelha no alto, pauta azul-acinzentada */
.flash .carta {
  width: 100%; max-width: 620px; min-height: 280px; border-radius: 2px; padding: 22px 30px 26px;
  /* ficha pautada: a linha vermelha passa logo abaixo do título (que tem altura variável), então ela é desenhada
     no próprio título (.pergunta) e a pauta azul fica no fundo da carta */
  background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(52, 85, 122, .12) 27px 28px) 0 14px / 100% 100% var(--carta);
  border: 1px solid var(--borda-forte); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 14px;
}
.flash .caminho { font-size: 11.5px; color: var(--texto-3); letter-spacing: .4px; }
.flash .pergunta { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600; line-height: 1.3; padding-bottom: 10px; margin: 0 -30px; padding-left: 30px; padding-right: 30px; background: var(--carta); border-bottom: 1.5px solid rgba(163, 60, 25, .55); }
.flash .resposta { border-top: 1px dashed var(--borda-forte); padding-top: 14px; font-size: 16px; color: var(--texto); }
.flash .resposta ul { margin: 0; padding-left: 20px; }
.flash .resposta li { margin: 4px 0; }
.flash .nota-resp { color: var(--texto-2); font-size: 14px; white-space: pre-wrap; margin-top: 8px; font-family: var(--fonte-titulo); font-style: italic; }
.flash .botoes-nota { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 620px; }
.flash .botoes-nota .bt { flex-direction: column; min-height: 58px; gap: 2px; }
.flash .botoes-nota .bt:not(.prim) { background: var(--carta); }
.flash .botoes-nota small { color: var(--texto-3); font-size: 11.5px; font-weight: 400; }
.flash .bt.n-errei { border-color: var(--perigo); border-top-width: 3px; }
.flash .bt.n-dificil { border-color: #b07d1a; border-top-width: 3px; }
.flash .bt.n-bom { border-color: var(--ok); border-top-width: 3px; }
.flash .bt.n-facil { border-color: var(--c-texto); border-top-width: 3px; }
.flash .fim { text-align: center; max-width: 460px; }
.flash .fim h2 { margin: 6px 0; font-size: 26px; }

/* ============ 9. PLANILHA ============ */
.pl-tela { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pl-formula { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--borda); background: var(--painel); }
.pl-formula .ref { width: 70px; text-align: center; font-family: var(--fonte-mono); font-size: 13px; padding: 6px; border: 1px solid var(--borda); border-radius: 3px; background: var(--carta); }
.pl-formula .fx { color: var(--realce); font-family: var(--fonte-titulo); font-style: italic; font-weight: 600; }
.pl-formula .entrada { font-family: var(--fonte-mono); font-size: 13.5px; min-height: 34px; }
.pl-grade { flex: 1 1 auto; overflow: auto; position: relative; outline: none; }
.pl-tabela { border-collapse: separate; border-spacing: 0; font-size: 13.5px; table-layout: fixed; width: max-content; }
.pl-tabela th, .pl-tabela td { border-right: 1px solid var(--grade); border-bottom: 1px solid var(--grade); height: 28px; padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tabela th { position: sticky; background: var(--painel-2); color: var(--texto-2); font-weight: 600; font-size: 12px; z-index: 2; user-select: none; }
.pl-tabela thead th { top: 0; text-align: center; letter-spacing: .5px; }
.pl-tabela tbody th { left: 0; text-align: center; width: 46px; min-width: 46px; z-index: 1; font-variant-numeric: tabular-nums; }
.pl-tabela thead th.canto { left: 0; z-index: 3; }
.pl-tabela thead th .alca { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.pl-tabela td { cursor: cell; background: var(--carta); }
.pl-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-tabela td.erro { color: var(--perigo); }
.pl-tabela td.neg { font-weight: 700; }
.pl-tabela td.ita { font-style: italic; }
.pl-tabela td.sel-area { background: var(--marca-texto); }
.pl-tabela td.ativa { box-shadow: inset 0 0 0 2px var(--realce); }
.pl-tabela th.sel-cab { color: var(--realce); background: var(--sup-3); }
.pl-tabela td.al-esq { text-align: left; }
.pl-tabela td.al-cen { text-align: center; }
.pl-tabela td.al-dir { text-align: right; }
.pl-editor { position: absolute; z-index: 5; border: 2px solid var(--realce); background: var(--painel); color: var(--texto); padding: 0 6px; font-size: 13.5px; outline: none; font-family: inherit; }
.pl-rodape { flex: none; display: flex; gap: 16px; padding: 6px 12px; font-size: 12.5px; color: var(--texto-2); border-top: 1px solid var(--borda); min-height: 32px; align-items: center; background: var(--painel); font-variant-numeric: tabular-nums; }
.pl-rodape b { color: var(--texto); font-weight: 600; }

/* ============ 10. TEXTO ============ */
.tx-tela { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tx-rolagem { flex: 1 1 auto; overflow: auto; }
.tx-folha {
  max-width: 780px; margin: 24px auto 80px; padding: 40px 52px; min-height: calc(100% - 48px);
  background: var(--carta); border: 1px solid var(--borda-forte); border-radius: 2px; box-shadow: var(--sombra-leve);
  outline: none; font-size: 16.5px; line-height: 1.72; color: var(--texto);
}
.tx-folha:empty::before { content: attr(data-vazio); color: var(--texto-3); font-family: var(--fonte-titulo); font-style: italic; }
.tx-folha h1 { font-size: 30px; line-height: 1.2; margin: .3em 0 .5em; }
.tx-folha h2 { font-size: 22px; line-height: 1.3; margin: 1.3em 0 .5em; color: var(--texto); border-bottom: 1px solid var(--borda-forte); padding-bottom: 4px; }
.tx-folha h3 { font-size: 18px; margin: 1.1em 0 .4em; }
.tx-folha p { margin: 0 0 .85em; }
.tx-folha ul, .tx-folha ol { margin: 0 0 .9em; padding-left: 1.5em; }
.tx-folha blockquote { margin: 0 0 1em; padding: 8px 18px; border-left: 3px solid var(--realce); background: var(--sup); color: var(--texto-2); font-family: var(--fonte-titulo); font-style: italic; }
.tx-folha mark { background: var(--marca-texto); color: inherit; padding: 0 2px; border-radius: 1px; }
.tx-folha hr { border: 0; border-top: 1px solid var(--borda-forte); margin: 1.4em 0; }
.tx-folha code { font-family: var(--fonte-mono); font-size: .9em; background: var(--sup-2); padding: 1px 5px; border-radius: 2px; }
.tx-folha table { border-collapse: collapse; margin: 0 0 1em; }
.tx-folha td, .tx-folha th { border: 1px solid var(--borda-forte); padding: 4px 8px; }
.tx-contagem { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: var(--texto-3); background: var(--painel); padding: 3px 10px; border-radius: 2px; border: 1px solid var(--borda); font-variant-numeric: tabular-nums; }

/* ============ 11. LISTA ============ */
.ls-tela { position: absolute; inset: 0; overflow: auto; }
.ls-folha { max-width: 680px; margin: 20px auto 80px; padding: 0 16px; }
.ls-nova { display: flex; gap: 8px; margin-bottom: 14px; position: sticky; top: 0; padding: 10px 0; z-index: 2; background: var(--fundo-solido); }
.ls-grupo { margin-bottom: 20px; }
.ls-grupo-cab { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; color: var(--texto-2); font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; border-bottom: 1px solid var(--borda); margin-bottom: 6px; }
.ls-grupo-cab .n { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ls-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 2px; border: 1px solid transparent; background: var(--carta); margin-bottom: 4px; box-shadow: 0 1px 0 var(--borda); }
.ls-item:hover { border-color: var(--borda-forte); }
.ls-item.feito .ls-texto { text-decoration: line-through; text-decoration-color: var(--realce); color: var(--texto-3); }
.ls-marca { width: 22px; height: 22px; border-radius: 2px; border: 2px solid var(--borda-forte); background: none; cursor: pointer; display: grid; place-items: center; flex: none; padding: 0; color: transparent; }
.ls-item.feito .ls-marca { background: var(--pinho); border-color: var(--pinho); color: var(--carta); }
.ls-texto { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; padding: 5px 2px; color: var(--texto); }
.ls-qtd { width: 64px; text-align: center; background: var(--sup-2); border: 1px solid transparent; border-radius: 2px; padding: 4px; outline: none; color: var(--texto); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ls-qtd:focus, .ls-texto:focus { border-color: var(--realce); }
.ls-alca { cursor: grab; color: var(--texto-3); display: grid; place-items: center; touch-action: none; }
.ls-item.arrastado { opacity: .5; }
.ls-item.sobre { border-color: var(--realce); }
.ls-progresso { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; color: var(--texto-2); }
.ls-progresso .progresso { flex: 1 1 auto; }

/* ============ 12. AJUSTES E ATUALIZAÇÕES ============ */
.pag { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; }
.pag h1 { display: inline-block; font-size: 21px; margin: 0 0 22px; padding: 9px 30px 10px; }
.bloco { padding: 18px 20px; border-radius: 2px; border: 1px solid var(--borda-forte); background: var(--carta); margin-bottom: 16px; box-shadow: inset 0 0 0 3px var(--carta), inset 0 0 0 4px var(--borda); }
.bloco h2 { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.bloco p { color: var(--texto-2); margin: 0 0 12px; font-size: 14px; }
.status-ia { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.status-ia .bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.status-ia.ok .bolinha { background: var(--ok); }
.status-ia.erro .bolinha { background: var(--perigo); }
.novidades { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 14px; }
.novidades li { margin: 4px 0; }
.ia-saida { font-family: var(--fonte-mono); font-size: 12px; white-space: pre-wrap; max-height: 160px; overflow: auto; background: var(--sup-2); padding: 8px; border-radius: 2px; color: var(--texto-2); }

/* ============ 13. CELULAR ============ */
@media (max-width: 760px) {
  .so-largo { display: none !important; }
  .marca { padding: 5px 16px; }
  .painel { width: 100%; top: auto; height: min(70vh, 560px); border-left: 0; border-top: 1px solid var(--borda-forte); border-radius: 6px 6px 0 0; transform: translateY(105%); }
  .painel.aberto { transform: none; }
  .tx-folha { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 24px 18px; min-height: 100%; }
  .flash .pergunta { font-size: 20px; }
  .flash .botoes-nota { grid-template-columns: repeat(2, 1fr); }
  .mapa-mini { display: none; }
  .topo .estado-salvo { display: none; }
  .bt { min-height: 42px; }
  .bt.ico { width: 42px; }
  .barra .bt.ico.peq { width: 40px; min-height: 40px; }
  .mapa-zoom .bt.ico.peq { width: 40px; min-height: 40px; }
  .marca { min-height: 42px; }
  .pag h1 { font-size: 18px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apres-titulo { font-size: 19px; }
  .trilha-foco { top: 8px; left: 8px; }
  .cronometro { bottom: calc(118px + env(safe-area-inset-bottom)); min-width: 0; }
  .no-barra .bt.ico.peq, .lig-barra .bt.ico.peq { width: 40px; min-height: 40px; }
  .no-barra .amostra-barra { width: 30px; height: 30px; }
  .atalhos { grid-template-columns: 1fr; }
  .busca-mapa { top: 8px; right: 8px; }
}
@media (min-width: 761px) { .so-estreito { display: none !important; } }

/* ============ 14. IMPRESSÃO ============ */
@media print {
  body { background: #fff !important; color: #000; overflow: visible; }
  #app { position: static; }
  .topo, .barra, .painel, .avisos, .mapa-zoom, .mapa-mini, .dica-mapa, .tx-contagem, .ls-nova { display: none !important; }
  .tela, .tx-tela, .tx-rolagem, .ls-tela { position: static; overflow: visible; }
  .tx-folha { border: 0; margin: 0; padding: 0; max-width: none; background: none; color: #000; box-shadow: none; }
  .ls-item { background: none; }
}

/* ---- 7e. (1.3) síntese em chave, carimbos, documento ligado, pontas das ligações e lápis ---- */
.no .doc-no { display: inline-flex; flex: none; cursor: pointer; opacity: .85; }
.no .doc-no:hover { opacity: 1; }
/* carimbo: fora da conta do tamanho (absoluto), inclinado no canto de cima — medidas iguais a 20-mapa-extras.js */
.no .selo-no {
  position: absolute; right: -14px; top: -15px; height: 18px; padding: 0 6px; border: 1.6px solid; border-radius: 1px;
  font: 700 9.5px/14px var(--fonte); letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap; text-shadow: none;
  background: rgba(251, 247, 238, .82); transform: rotate(-8deg); pointer-events: none; opacity: .9;
  box-shadow: inset 0 0 0 1.2px rgba(251, 247, 238, .82), inset 0 0 0 2px currentColor;
}
.mapa-mundo svg.ligacoes .sintese { pointer-events: none; }
.sintese-rotulo {
  position: absolute; width: max-content; max-width: 220px; padding: 2px; font: italic 500 14px/19px var(--fonte-titulo);
  white-space: normal; cursor: pointer; border-radius: 3px;
}
.sintese-rotulo.al-centro { text-align: center; }
.sintese-rotulo.al-direita { text-align: right; }
.sintese-rotulo:hover { background: rgba(127, 127, 127, .1); }
.mapa-mundo svg.ligacoes .lig-ponta { pointer-events: all; cursor: move; }
/* lápis: os traços ficam por cima das ideias e dos post-its, sem atrapalhar os cliques */
.tracos-lapis { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; }
.tracos-lapis .traco-hit { pointer-events: none; }
.mapa-area.modo-lapis { cursor: crosshair; touch-action: none; }
.mapa-area.modo-lapis .no, .mapa-area.modo-lapis .elemento { cursor: crosshair; }
.mapa-area.modo-borracha, .mapa-area.modo-borracha .no, .mapa-area.modo-borracha .elemento { cursor: cell; }
.mapa-area.modo-lapis .alca-ligar, .mapa-area.modo-lapis .mais-ideia, .mapa-area.modo-lapis .no-barra { display: none !important; }
.lapis-barra {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 4px; background: var(--faixa); border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(207, 159, 58, .35) inset, var(--sombra);
}
.lapis-barra .bt { color: var(--faixa-texto); }
.lapis-barra .bt:hover { background: var(--faixa-sup); }
.lapis-barra .bt.ativo { background: var(--faixa-sup); box-shadow: inset 0 0 0 1.5px var(--ouro-entalhe); }
.lapis-barra .amostra { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 240, 210, .7); display: block; }
.lapis-barra .div { width: 1px; align-self: stretch; margin: 4px 3px; background: rgba(236, 201, 127, .3); }
.lapis-barra .bt.prim { margin-left: 4px; }
/* escolher o documento ligado */
.escolher-doc { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 80vw); }
.lista-docs-ligar { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto; }
.item-doc-ligar {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 3px; background: none;
  color: var(--texto); text-align: left; cursor: pointer; font: inherit;
}
.item-doc-ligar:hover, .item-doc-ligar:focus-visible { background: var(--sup-2); }
.item-doc-ligar .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fonte-titulo); }
.item-doc-ligar .s { color: var(--texto-3); font-size: 12px; }
.vazio-lista { color: var(--texto-3); font-style: italic; margin: 8px 2px; }
@media (max-width: 640px) {
  .lapis-barra .bt.ico.peq { width: 40px; min-height: 40px; }
  .lapis-barra { top: 8px; max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center; }
}

/* ---- 8b. (1.3) estudo: filtros, cartão de ligação, modo prova, mapa de calor, progresso ---- */
.filtros-revisao {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; padding: 10px 16px; background: var(--painel); border-bottom: 1px solid var(--borda); scrollbar-width: thin;
}
.filtros-revisao + .flash { top: 54px; }
.filtros-revisao .rot-filtro { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--texto-3); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; margin-right: 4px; }
.chip-filtro {
  flex: none; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--borda-forte); background: var(--carta);
  color: var(--texto-2); font: 500 13px var(--fonte); cursor: pointer; white-space: nowrap;
}
.chip-filtro:hover { background: var(--sup-2); color: var(--texto); }
.chip-filtro.ativo { background: var(--realce); border-color: var(--realce); color: var(--realce-texto); }
.carta-ligacao .pergunta, .carta-prova .pergunta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.pergunta .relacao {
  font: italic 500 15px var(--fonte-titulo); color: var(--realce); padding: 1px 10px; border: 1px dashed var(--realce); border-radius: 12px;
}
.pergunta .incognita { color: var(--texto-3); }
/* modo prova */
.tela-prova .prova { max-width: 680px; margin: 0 auto; padding: 22px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.prova .contagem { color: var(--texto-3); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; }
.barra-prova { height: 4px; border-radius: 2px; background: var(--sup-3); overflow: hidden; }
.barra-prova i { display: block; height: 100%; background: var(--realce); transition: width var(--t); }
.prova-capa { text-align: center; }
.prova-capa .selo-prova { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 2px double var(--realce); color: var(--realce); }
.prova-capa h2 { margin: 10px 0 6px; font-size: 26px; }
.prova-capa p { color: var(--texto-2); line-height: 1.55; margin: 0 auto; max-width: 520px; }
.prova-opcoes { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); }
.prova-opcoes .rot-op { font-size: 12px; color: var(--texto-3); letter-spacing: .8px; text-transform: uppercase; }
.chips-qtd { display: flex; flex-wrap: wrap; gap: 6px; }
.linha.centro { justify-content: center; }
.carta-prova {
  border-radius: 2px; padding: 22px 26px 24px; border: 1px solid var(--borda-forte); box-shadow: var(--sombra); background: var(--carta);
  display: flex; flex-direction: column; gap: 12px;
}
.carta-prova .caminho { font-size: 11.5px; color: var(--texto-3); }
.carta-prova .pergunta { font-family: var(--fonte-titulo); font-size: 23px; font-weight: 600; line-height: 1.3; padding-bottom: 10px; border-bottom: 1.5px solid rgba(163, 60, 25, .55); }
.carta-prova .dica { color: var(--texto-3); font-size: 13.5px; }
.resposta-prova { font: 400 16px/1.6 var(--fonte-titulo); resize: vertical; min-height: 96px;
  background: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(52, 85, 122, .14) 25px 26px) 0 9px var(--carta); }
.resposta-prova[readonly] { opacity: .8; }
.placar-questao { align-self: flex-start; font: 700 13px var(--fonte); letter-spacing: .6px; padding: 4px 10px; border-radius: 3px; border: 1.5px solid; transform: rotate(-2deg); }
.placar-questao.bom { color: var(--ok); }
.placar-questao.medio { color: #b07d1a; }
.placar-questao.ruim { color: var(--perigo); }
.correcao { display: flex; flex-direction: column; gap: 4px; }
.item-correcao {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: start; text-align: left; padding: 7px 8px; border-radius: 3px;
  border: 1px solid transparent; background: none; color: var(--texto); font: inherit; cursor: pointer;
}
.item-correcao:hover { background: var(--sup-2); }
.item-correcao .ic { margin-top: 2px; }
.item-correcao .esp { font-size: 15px; }
.item-correcao .voce { grid-column: 2; color: var(--texto-3); font-size: 12.5px; font-style: italic; }
.item-correcao.certo .ic { color: var(--ok); }
.item-correcao.quase .ic { color: #b07d1a; }
.item-correcao.faltou .ic { color: var(--perigo); }
.item-correcao.faltou .esp { text-decoration: underline wavy rgba(168, 50, 31, .5); text-underline-offset: 4px; }
.lista-resultado { display: flex; flex-direction: column; gap: 2px; }
.linha-resultado { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-left: 3px solid; background: var(--painel); border-radius: 2px; }
.linha-resultado .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-resultado .p { font-variant-numeric: tabular-nums; font-weight: 600; }
.linha-resultado.bom { border-color: var(--ok); }
.linha-resultado.medio { border-color: #b07d1a; }
.linha-resultado.ruim { border-color: var(--perigo); }
.prova .fim { text-align: center; }
.prova .fim h2 { font-size: 30px; margin: 6px 0; }
/* mapa de calor: contorno por fora da ideia (não briga com a seleção) */
.mapa-area.com-calor .no[data-calor] { outline: 3px solid var(--calor); outline-offset: 4px; }
.mapa-area.com-calor .no[data-calor="0"] { --calor: rgba(63, 122, 82, .75); }
.mapa-area.com-calor .no[data-calor="1"] { --calor: rgba(193, 154, 46, .85); }
.mapa-area.com-calor .no[data-calor="2"] { --calor: rgba(196, 105, 42, .9); }
.mapa-area.com-calor .no[data-calor="3"] { --calor: rgba(168, 50, 31, .95); box-shadow: 0 0 0 9px rgba(168, 50, 31, .16); }
.mapa-area.com-calor .no:not([data-calor]) { opacity: .62; }
.calor-legenda {
  position: absolute; left: 12px; bottom: 60px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 4px; background: var(--painel); border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-leve); font-size: 12.5px; color: var(--texto-2);
}
.calor-legenda b { font-family: var(--fonte-titulo); color: var(--texto); }
.item-calor { display: inline-flex; align-items: center; gap: 5px; }
.item-calor i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.item-calor.sem i { border: 1.5px dashed var(--texto-3); }
/* painel de progresso */
.tela-progresso { padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.tela-progresso > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.tiles-progresso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile-progresso {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--raio); background: var(--carta);
  border: 1px solid var(--borda); box-shadow: var(--sombra-leve); min-width: 0;
}
.tile-progresso .ic-tile { color: var(--realce); }
.tile-progresso .valor { font: 600 30px/1.1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.tile-progresso .rot-tile { color: var(--texto-2); font-size: 13px; }
.tile-progresso small { color: var(--texto-3); font-size: 12px; }
.titulo-secao { font-size: 19px; margin: 28px auto 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.caixa-grafico { padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); }
.grafico-30, .grafico-14 { display: block; width: 100%; height: 160px; }
.grafico-30 .barra, .grafico-14 .barra { fill: var(--c-texto); opacity: .75; }
.grafico-30 .barra.hoje, .grafico-14 .barra.hoje { fill: var(--realce); opacity: 1; }
.grafico-30 .grade { stroke: var(--grade); stroke-width: 1; }
.grafico-30 .eixo, .grafico-14 .eixo { fill: var(--texto-3); font-size: 10px; font-family: var(--fonte); }
.tabela-mapas { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--carta); }
.lin-mapa { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(48px, .7fr)) 92px; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.lin-mapa.cab { border-top: 0; background: var(--painel-2); font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--texto-3); }
.lin-mapa .nome-mapa { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lin-mapa .nome-mapa b { font-family: var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrinha { height: 4px; border-radius: 2px; background: var(--sup-3); overflow: hidden; }
.barrinha i { display: block; height: 100%; background: var(--ok); }
.lin-mapa .vence { color: var(--realce); font-weight: 700; }
.lin-mapa > span:last-child { display: flex; justify-content: flex-end; gap: 2px; }
.lista-esquecidas { display: flex; flex-direction: column; gap: 4px; }
.item-esquecida {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; font: inherit; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 3px; background: var(--carta); cursor: pointer;
}
.item-esquecida .ic { color: var(--perigo); }
.item-esquecida .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fonte-titulo); }
.item-esquecida .s { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.item-esquecida:hover { background: var(--sup-2); }
.nota-diario { font: 400 15px/1.6 var(--fonte-titulo); }
.estado-diario { color: var(--texto-3); min-height: 1em; }
.dias-diario { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.dia-diario { display: grid; grid-template-columns: 96px 1fr; gap: 2px 12px; padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.dia-diario b { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.dia-diario p { grid-column: 2; margin: 2px 0 0; font-family: var(--fonte-titulo); font-style: italic; color: var(--texto-2); white-space: pre-wrap; }
.carregando { text-align: center; color: var(--texto-3); margin-top: 40px; }
@media (max-width: 720px) {
  .tiles-progresso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lin-mapa { grid-template-columns: minmax(0, 1fr) repeat(3, 44px); }
  .lin-mapa > span:nth-child(3) { display: none; }
  .lin-mapa > span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .lin-mapa.cab > span:last-child { display: none; }
  .dia-diario { grid-template-columns: 1fr; }
  .dia-diario p { grid-column: 1; }
  .carta-prova { padding: 18px 16px 20px; }
}

/* ---- 8c. (1.3) IA no mapa: explicação, ligações sugeridas, revisão, questões ---- */
.ia-explicacao h3 { margin: 0 0 8px; font-size: 20px; }
.ia-explicacao p { line-height: 1.6; margin: 0 0 10px; }
.ia-explicacao .pegadinha { padding: 8px 12px; border-left: 3px solid var(--realce); background: var(--sup); }
.lista-sugestoes-lig { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sugestao-lig { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--borda); border-radius: 3px; cursor: pointer; background: var(--carta); }
.sugestao-lig input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--realce); }
.sugestao-lig .par { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-family: var(--fonte-titulo); }
.sugestao-lig .rel { font-style: italic; color: var(--realce); border-bottom: 1px dashed var(--realce); }
.sugestao-lig small { display: block; color: var(--texto-3); margin-top: 3px; }
.ia-revisao .cab-revisao { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.ia-revisao .nota-revisao {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 28px var(--fonte-titulo);
  color: var(--realce); border: 2.5px double var(--realce); transform: rotate(-6deg);
}
.ia-revisao .cab-revisao p { margin: 0; line-height: 1.55; }
.ia-revisao .fortes { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; color: var(--ok); }
.ia-revisao .fortes li { display: flex; gap: 6px; align-items: flex-start; }
.ponto-revisao { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--borda); }
.ponto-revisao .txt-rev p { margin: 3px 0 0; line-height: 1.5; }
.ponto-revisao .sug { color: var(--texto-2); font-style: italic; }
.ponto-revisao.erro .ic-rev { color: var(--perigo); }
.ponto-revisao.falta .ic-rev { color: #b07d1a; }
.ponto-revisao.organizacao .ic-rev, .ponto-revisao.clareza .ic-rev { color: var(--c-texto); }
.carta-questao .enunciado { font: 500 18px/1.55 var(--fonte-titulo); white-space: pre-wrap; }
.alternativas { display: flex; flex-direction: column; gap: 6px; }
.alternativa {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; text-align: left; padding: 10px 12px; border-radius: 3px;
  border: 1px solid var(--borda-forte); background: var(--carta); color: var(--texto); font: 400 15px/1.5 var(--fonte); cursor: pointer;
}
.alternativa:hover:not(:disabled) { background: var(--sup-2); }
.alternativa .letra { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-weight: 700; font-size: 13px; color: var(--texto-2); }
.alternativa:disabled { cursor: default; }
.alternativa.correta { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.alternativa.correta .letra { background: var(--ok); color: #fbf7ee; border-color: var(--ok); }
.alternativa.marcada-errada { border-color: var(--perigo); box-shadow: inset 4px 0 0 var(--perigo); }
.alternativa.marcada-errada .letra { background: var(--perigo); color: #fbf7ee; border-color: var(--perigo); }
.veredito { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.veredito.certo { color: var(--ok); }
.veredito.errado { color: var(--perigo); }
.carta-questao .nota-resp { color: var(--texto-2); font-family: var(--fonte-titulo); font-style: italic; white-space: pre-wrap; line-height: 1.55; }

/* ---- 5b. (1.3) biblioteca: favoritos, lixeira de 30 dias, estante, boas-vindas ---- */
.cartao .estrela {
  position: absolute; top: 8px; right: 44px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--texto-3); cursor: pointer; opacity: 0; transition: opacity var(--t), color var(--t), transform var(--t);
}
.cartao:hover .estrela, .cartao:focus-within .estrela { opacity: .8; }
.cartao .estrela:hover { color: var(--ocre); transform: scale(1.12); }
.cartao.favorito .estrela { opacity: 1; color: #c9a227; }
.cartao.favorito .estrela svg { fill: currentColor; }
@media (hover: none) { .cartao .estrela { opacity: .55; } .cartao.favorito .estrela { opacity: 1; } }
.etiqueta.vence-lixeira { color: var(--perigo); border-color: var(--perigo); }
.boas-vindas {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 18px 20px; margin-bottom: 18px;
  border: 1px solid var(--borda-forte); border-radius: 2px; background: var(--carta); box-shadow: inset 0 0 0 3px var(--carta), inset 0 0 0 4px var(--borda), var(--sombra-leve);
}
.boas-vindas .selo-bv { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--realce); border: 2px double var(--realce); transform: rotate(-8deg); }
.boas-vindas h2 { margin: 0 0 4px; font-size: 21px; }
.boas-vindas p { margin: 0; color: var(--texto-2); line-height: 1.55; }
.boas-vindas .acoes-bv { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .boas-vindas { grid-template-columns: 1fr; }
  .boas-vindas .selo-bv { display: none; }
  .aparador { display: none; }
}

/* ---- 10b. (1.3) animações: placa que balança ao nascer, carimbo que bate, tinta que seca ---- */
/* a posição vem de --tx/--ty (postas junto com o transform em 12-mapa-render.js): a placa gira em volta do próprio prego */
@keyframes balancar {
  0% { transform: translate(var(--tx), var(--ty)) rotate(-9deg) scale(.86); opacity: 0; }
  35% { transform: translate(var(--tx), var(--ty)) rotate(5deg) scale(1.02); opacity: 1; }
  60% { transform: translate(var(--tx), var(--ty)) rotate(-2.5deg); }
  82% { transform: translate(var(--tx), var(--ty)) rotate(1deg); }
  100% { transform: translate(var(--tx), var(--ty)) rotate(0deg); }
}
@keyframes estalar {
  0% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.6); opacity: 0; }
  60% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.06); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
}
@keyframes carimbar { 0% { scale: 2.1; opacity: 0; } 55% { scale: .92; opacity: .95; } 75% { scale: 1.04; } 100% { scale: 1; opacity: .9; } }
@keyframes secar { 0% { stroke-width: 3.6; opacity: .55; filter: blur(.6px); } 100% { stroke-width: 2; opacity: 1; filter: none; } }
.no.nasce { animation: balancar 620ms cubic-bezier(.3, .7, .3, 1) both; transform-origin: 50% 0; }
.elemento.nasce { animation: estalar 380ms cubic-bezier(.3, .7, .3, 1) both; }
.no .selo-no.carimbado { animation: carimbar 420ms cubic-bezier(.2, .8, .3, 1) both; }
.mapa-mundo svg.ligacoes .lig.secando path:not(.lig-hit) { animation: secar 900ms ease-out both; }
.traco-livre path { stroke: #1f2a44 !important; stroke-width: 3; filter: drop-shadow(0 0 .6px rgba(31, 42, 68, .6)); }
:root[data-tema="escuro"] .traco-livre path, :root[data-tema="couro"] .traco-livre path { stroke: #cfd8ef !important; }
@media (prefers-reduced-motion: reduce) {
  .no.nasce, .elemento.nasce, .no .selo-no.carimbado, .mapa-mundo svg.ligacoes .lig.secando path, .lombada { animation: none !important; transition: none !important; }
}

/* ============ 15. (removida na 3.0: os cenários animados saíram do app) ============ */
.rot-mov { margin: 14px 0 6px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--texto-3); }

/* ============ 16. MOVIMENTO (1.4): telas, listas, cartões e mapa entram com vida ============ */
@keyframes entrarTela { from { opacity: 0; transform: translateY(calc(10px * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes subirItem { from { opacity: 0; transform: translateY(calc(14px * var(--mov))) scale(calc(1 - .02 * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes livroSobe { from { opacity: 0; transform: translateY(calc(40px * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes surgirNo { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes menuAbre { from { opacity: 0; transform: translateY(calc(-6px * var(--mov))) scale(calc(1 - .03 * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(calc(18px * var(--mov))) scale(calc(1 - .06 * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes dialogoAbre { from { opacity: 0; transform: translateY(calc(14px * var(--mov))) scale(calc(1 - .04 * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes virarCarta { 0% { transform: perspective(900px) rotateX(0); } 45% { transform: perspective(900px) rotateX(78deg); } 100% { transform: perspective(900px) rotateX(0); } }
@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.palco > .tela, .palco > .pl-tela { animation: entrarTela 280ms cubic-bezier(.2, .8, .2, 1) backwards; }
.palco > .mapa-tela { animation: aparecer 260ms ease-out backwards; }
.menu { animation: menuAbre 150ms cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
.aviso { animation: avisoEntra 300ms cubic-bezier(.2, 1.2, .3, 1); }
.dialogo { animation: dialogoAbre 240ms cubic-bezier(.2, 1, .3, 1); }
.bt { transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform 110ms ease-out; }
.bt:active:not(:disabled) { transform: scale(.95); }
.no { transition: box-shadow 180ms ease, outline-color 180ms ease, opacity 200ms ease; }
.mapa-area.abrindo .no { animation: surgirNo 520ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--nv, 0) * 120ms); }
.mapa-area.abrindo svg.ligacoes path.ramo { stroke-dasharray: 1; animation: tracar 640ms cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(var(--nv, 1) * 120ms - 60ms); }
.flash .carta.virando { animation: virarCarta 420ms cubic-bezier(.4, 0, .2, 1); }
.grafico-30 .barra, .grafico-14 .barra { transform-box: fill-box; transform-origin: 50% 100%; animation: crescer 640ms cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 18ms); }
.item-correcao, .linha-resultado, .item-versao, .ponto-revisao, .sugestao-lig, .alternativa, .tile-progresso { animation: subirItem 360ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: aparecer 180ms ease-out; }
/* Movimento reduzido (Ajustes ou sistema): tudo para */
:root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before, :root[data-movimento="reduzido"] *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
:root[data-movimento="reduzido"]::view-transition-new(root) { animation: none; }
.lembrete-copia {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--raio);
  background: var(--carta); border: 1px solid var(--aviso); box-shadow: var(--sombra-leve);
}
.lembrete-copia .ic-lembrete { color: var(--aviso); }
.lembrete-copia .cresce { flex: 1 1 260px; min-width: 0; }
/* ideia criada logo na abertura: o balanço de "placa pendurada" vale mais que o surgir da abertura */
.mapa-area.abrindo .no.nasce { animation: balancar 620ms cubic-bezier(.3, .7, .3, 1) both; }
.aviso-envio { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--aviso); background: var(--sup); border-radius: 3px; font-size: 13.5px; color: var(--texto-2); line-height: 1.5; }
.previa-copia .lista-previa { margin: 4px 0 10px; padding-left: 20px; max-height: 180px; overflow: auto; columns: 2; font-size: 13.5px; }
.previa-copia .aviso-previa { color: var(--perigo); }
@media (max-width: 640px) { .previa-copia .lista-previa { columns: 1; } }

/* ---- 17. (1.5) cérebro central: pesquisa em tudo, ligações internas, referências e grafo ---- */
.veu-paleta { place-items: start center; padding-top: min(12vh, 96px); }
.paleta {
  width: min(680px, 100%); max-height: min(76vh, 640px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--painel); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  animation: dialogoAbre 160ms cubic-bezier(.2, .8, .2, 1);
}
.paleta-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.paleta-lupa { color: var(--texto-3); display: grid; }
.paleta-campo { flex: 1; min-width: 0; border: 0; background: none; color: var(--texto); font: 400 17px/1.4 var(--fonte); padding: 6px 2px; outline: none; }
.paleta-campo::-webkit-search-cancel-button { display: none; }
.paleta-filtros { display: flex; gap: 6px; padding: 8px 12px 4px; overflow-x: auto; scrollbar-width: none; }
.paleta-filtros .chip-filtro { height: 28px; font-size: 12.5px; }
.paleta-estado { padding: 6px 16px 4px; color: var(--texto-3); font-size: 12px; letter-spacing: .4px; min-height: 22px; }
.paleta-lista { list-style: none; margin: 0; padding: 4px 6px 8px; overflow: auto; flex: 1 1 auto; }
.paleta-item { display: grid; grid-template-columns: 26px 1fr auto; align-items: start; gap: 10px; padding: 9px 10px; border-radius: 3px; cursor: pointer; }
.paleta-item[aria-selected="true"] { background: var(--sup-2); box-shadow: inset 3px 0 0 var(--realce); }
.paleta-item .pi-ico { color: var(--texto-2); display: grid; padding-top: 1px; }
.paleta-item .pi-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paleta-item .pi-tit { font-family: var(--fonte-titulo); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item .pi-trecho { color: var(--texto-2); font-size: 13px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.paleta-item .pi-trecho b { font-weight: 600; color: var(--texto-3); }
.paleta-item mark { background: rgba(207, 159, 58, .32); color: inherit; border-radius: 2px; padding: 0 1px; }
.paleta-item .pi-selo { font-size: 11px; color: var(--texto-3); border: 1px solid var(--borda); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.paleta-item .pi-local { display: flex; align-items: center; gap: 5px; color: var(--texto-3); font-size: 12px; min-width: 0; overflow: hidden; white-space: nowrap; }
.paleta-item .pi-local .ic { flex: none; }
.paleta-item .pi-local span { overflow: hidden; text-overflow: ellipsis; }
.paleta-item .pi-sep { flex: none; }
.paleta-item .pi-dir { display: flex; align-items: center; gap: 4px; }
.paleta-item .pi-acao { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--raio-p); background: none; color: var(--texto-3); cursor: pointer; opacity: 0; }
.paleta-item[aria-selected="true"] .pi-acao, .paleta-item:hover .pi-acao { opacity: 1; }
.paleta-item .pi-acao:hover { background: var(--sup-3); color: var(--texto); }
@media (hover: none) { .paleta-item .pi-acao { opacity: 1; } }
.paleta-rodape { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: 12px; }
.paleta-rodape kbd, .paleta kbd { font: 500 11px var(--fonte-mono); border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; margin-right: 3px; background: var(--sup); }
@media (max-width: 640px) {
  .veu-paleta { padding: 8px; place-items: start stretch; }
  .paleta { max-height: calc(100dvh - 16px); }
  .paleta-rodape { display: none; }
  .paleta-item { padding: 11px 8px; }
}
/* destino aberto pela pesquisa / pelas fontes da IA: pisca uma vez para o olho achar */
@keyframes piscarDestino { 0%, 100% { box-shadow: 0 0 0 0 rgba(207, 159, 58, 0); } 30% { box-shadow: 0 0 0 4px rgba(207, 159, 58, .85), 0 0 0 10px rgba(207, 159, 58, .2); } }
.no.destacado, .ls-item.destacado { animation: piscarDestino 1600ms ease-out; }
.tx-folha .destacado { background: rgba(207, 159, 58, .22); border-radius: 2px; transition: background-color 1.6s ease-out; }
/* link interno no texto */
.tx-folha a[href^="#/d/"] { color: var(--realce); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.tx-folha a[href^="#/d/"]::before { content: "\2197"; font-size: .8em; margin-right: 2px; opacity: .7; }
/* tela de referências */
.caixa-grafo { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); overflow: hidden; }
.grafo { display: block; width: 100%; height: auto; }
.grafo .g-ref { stroke: var(--texto-2); stroke-width: 1.4; opacity: .75; }
.grafo .g-etq { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; }
.grafo .ponta { fill: var(--texto-2); }
.grafo .g-no { cursor: pointer; outline: none; }
.grafo .g-no circle { stroke: var(--carta); stroke-width: 2; }
.grafo .g-no text { font: 500 11.5px var(--fonte); fill: var(--texto); paint-order: stroke; stroke: var(--carta); stroke-width: 3px; stroke-linejoin: round; }
.grafo .g-no.solto circle { opacity: .55; }
.grafo .g-no:hover circle, .grafo .g-no:focus-visible circle { stroke: var(--realce); stroke-width: 3; }
.grafo .g-no:focus-visible text { text-decoration: underline; }
.g-mapa circle, .lg-no.g-mapa { fill: var(--realce); background: var(--realce); }
.g-texto circle, .lg-no.g-texto { fill: var(--ok); background: var(--ok); }
.g-lista circle, .lg-no.g-lista { fill: #6b5a9e; background: #6b5a9e; }
.g-planilha circle, .lg-no.g-planilha { fill: #3d6f8f; background: #3d6f8f; }
.legenda-grafo { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 0; color: var(--texto-3); font-size: 12px; }
.legenda-grafo span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-grafo i { display: inline-block; }
.legenda-grafo .lg-ref { width: 22px; height: 0; border-top: 1.5px solid var(--texto-2); }
.legenda-grafo .lg-etq { width: 22px; height: 0; border-top: 1.5px dashed var(--texto-3); }
.legenda-grafo .lg-no { width: 10px; height: 10px; border-radius: 50%; }
.lista-refs { display: flex; flex-direction: column; gap: 4px; }
.item-ref {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 9px 12px; text-align: left; font: inherit; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 3px; background: var(--carta); cursor: pointer; width: 100%;
}
.item-ref .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fonte-titulo); }
.item-ref .s { grid-column: 2; color: var(--texto-3); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-ref:hover { background: var(--sup-2); }
.item-ref.quebrada { cursor: default; color: var(--perigo); }
.lista-etq { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bloco-etq { display: flex; flex-direction: column; gap: 4px; }
.bloco-etq > b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.bloco-etq small { color: var(--texto-3); font-weight: 400; }
.painel-refs { display: flex; flex-direction: column; gap: 6px; min-width: min(460px, 80vw); max-height: 60vh; overflow: auto; }
.painel-refs h3 { margin: 10px 0 2px; font-size: 14px; color: var(--texto-2); letter-spacing: .3px; }
.painel-refs h3:first-child { margin-top: 0; }
/* aprendizagem (1.5): meta do dia, recomendações explicadas, agenda de 14 dias */
.meta-dia { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; margin: 18px auto 0; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); }
.meta-dia .meta-txt { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.meta-dia .meta-txt span { color: var(--texto-2); font-size: 13.5px; }
.meta-dia .meta-barra { grid-column: 1 / -1; grid-row: 2; height: 8px; }
.meta-dia .meta-barra > i { background: var(--ok); }
.meta-dia > .bt { grid-column: 2; grid-row: 1; }
.lista-recs { display: flex; flex-direction: column; gap: 8px; }
.rec { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); animation: subirItem 360ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.rec .ic-rec { color: var(--realce); display: grid; }
.rec .rec-txt b { font-family: var(--fonte-titulo); font-weight: 600; }
.rec .porque { margin: 3px 0 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.5; }
.rec .rot-porque { font-weight: 600; color: var(--texto-3); }
@media (max-width: 640px) { .rec { grid-template-columns: 22px minmax(0, 1fr); } .rec > .bt { grid-column: 2; justify-self: start; } }
/* perguntar aos meus materiais */
.intro-perguntar { font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.form-perguntar { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.campo-pergunta { font: 400 16px/1.5 var(--fonte); resize: vertical; }
.linha-perguntar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.linha-perguntar select { flex: 1 1 240px; min-width: 0; }
.lista-trechos { display: flex; flex-direction: column; gap: 6px; }
.trecho { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 3px; background: var(--carta); }
.trecho-marca { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding-top: 2px; }
.id-fonte { font: 600 12px var(--fonte-mono); color: var(--realce); }
.trecho-origem { color: var(--texto-3); font-size: 12px; margin-bottom: 3px; overflow-wrap: anywhere; }
.trecho-texto { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.trecho-texto mark { background: rgba(207, 159, 58, .3); color: inherit; }
.sem-evidencia { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 14px 0; border-left: 3px solid var(--aviso); background: var(--sup); border-radius: 3px; color: var(--texto); }
.sem-evidencia p { margin: 4px 0 0; color: var(--texto-2); font-size: 13.5px; }
.resposta-fontes { display: flex; flex-direction: column; gap: 8px; }
.resposta-fontes p { margin: 0; padding: 10px 12px; border-radius: 3px; line-height: 1.6; background: var(--carta); border: 1px solid var(--borda); }
.resposta-fontes .frase-inferencia { border-style: dashed; background: var(--sup); }
.tag-frase { display: inline-block; font: 600 10.5px var(--fonte); letter-spacing: .6px; text-transform: uppercase; padding: 1px 7px; border-radius: 10px; margin-right: 4px; vertical-align: 1px; }
.frase-material .tag-frase { background: var(--ok); color: var(--carta); }
.frase-inferencia .tag-frase { border: 1px solid var(--aviso); color: var(--aviso); }
.fonte { font: 600 11.5px var(--fonte-mono); color: var(--realce); background: none; border: 1px solid var(--realce); border-radius: 10px; padding: 0 7px; margin: 0 2px; cursor: pointer; }
.fonte:hover, .fonte:focus-visible { background: var(--realce); color: var(--realce-texto); }
.obs-frase { color: var(--texto-3); }
.sub-fontes { font-size: 14px; color: var(--texto-2); margin: 18px 0 6px; }
.item-ref .id-fonte { grid-row: 1 / 3; }
.grafo .g-faixa { font: 600 11px var(--fonte); letter-spacing: .6px; text-transform: uppercase; fill: var(--texto-3); }
.grafo .g-sep { stroke: var(--borda); stroke-dasharray: 2 4; }

/* ============ 18. SISTEMA DE DESIGN (2.0, revisto na 3.0) ============
   18a temas profissionais (tokens) · 18b estados de interação (todos os temas) · 18c camada "pro"
   18d sistema de movimento · 18e gaveta e painel recolhível · 18f esqueletos e carregamento
   Regra: componentes usam tokens; cor solta só onde é identidade (madeira, ouro da placa). */

/* ---- 18a. Temas profissionais (3.0): superfícies neutras + uma cor de destaque ----
   Claro: branco suave e cinzas muito claros. Escuro: grafite e carvão (nunca preto puro).
   A cor de destaque (html[data-acento], escolhida em Ajustes) marca ações principais, seleção, foco,
   progresso e a identidade; as cores de estado (ok, aviso, perigo, info) não mudam com ela.
   Contrastes medidos na bancada (tests/bancada_profissional.py): texto ≥ 4,5:1 em todas as superfícies. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }
:root[data-estilo="pro"] {
  --fonte: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --fonte-titulo: var(--fonte);
  --raio: 8px; --raio-p: 6px;
  --r-xs: 4px; --r-s: 6px; --r-m: 8px; --r-l: 10px; --r-xl: 12px;
  /* interações simples entre 100 e 220 ms */
  --d-micro: 100ms; --d-rapida: 140ms; --d-media: 180ms; --d-lenta: 220ms;
  --t: var(--d-rapida) var(--c-padrao);
  /* escala tipográfica: títulos de tela comedidos, texto auxiliar nunca abaixo de 12 px */
  --f-micro: 12px; --f-meta: 12.5px; --f-corpo: 14.5px; --f-sub: 16px; --f-titulo: 18px; --f-tela: 22px;
  --topo-h: 52px;
  /* camadas (z-index) */
  --z-nav: 30; --z-veu-nav: 29; --z-topo: 20;
  /* derivadas da cor de destaque (valem para qualquer acento) */
  --realce-suave: color-mix(in srgb, var(--realce) 11%, transparent);
  --realce-borda: color-mix(in srgb, var(--realce) 40%, transparent);
  --realce-forte: color-mix(in srgb, var(--realce) 86%, #000);
  --marca-texto: color-mix(in srgb, var(--realce) 24%, transparent);
  --foco: var(--realce);
  --link: var(--realce);
}
:root[data-tema="claro-pro"] {
  --fundo: #f7f7f5; --fundo-solido: #f7f7f5;
  --sup: rgba(31, 35, 40, .035); --sup-2: rgba(31, 35, 40, .06); --sup-3: rgba(31, 35, 40, .1);
  --borda: #e3e3df; --borda-forte: #cdcdc8;
  --texto: #1f2328; --texto-2: #4b5059; --texto-3: #676c75;
  --painel: #ffffff; --painel-2: #f1f1ef; --carta: #ffffff; --lateral: #f1f1ee;
  --ocre: #9a5b00; --pinho: #2e7a57;
  --grade: rgba(31, 35, 40, .07);
  --sombra: 0 12px 32px -8px rgba(15, 18, 22, .18), 0 2px 6px rgba(15, 18, 22, .06);
  --sombra-leve: none;
  --elev-1: none;
  --elev-2: 0 4px 12px -2px rgba(15, 18, 22, .1), 0 1px 3px rgba(15, 18, 22, .06);
  --elev-3: 0 16px 40px -10px rgba(15, 18, 22, .22), 0 2px 8px rgba(15, 18, 22, .07);
  --perigo: #c0362c; --ok: #1f7a45; --aviso: #9a5b00; --info: #2457c5;
  /* tipos de documento: o ícone já diz o tipo; a cor fica neutra para não competir com o destaque */
  --c-mapa: #4b5059; --c-planilha: #4b5059; --c-texto: #4b5059; --c-lista: #4b5059;
  --faixa: #f7f7f5; --faixa-texto: #1f2328; --faixa-texto-2: #4b5059; --faixa-sup: rgba(31, 35, 40, .06); --faixa-borda: #e3e3df;
  --aviso-fundo: #26292e; --aviso-texto: #f3f4f6; --aviso-borda: rgba(255, 255, 255, .08);
  --veu: rgba(15, 18, 22, .32);
  color-scheme: light;
}
:root[data-tema="escuro-pro"] {
  --fundo: #1c1d20; --fundo-solido: #1c1d20;
  --sup: rgba(255, 255, 255, .035); --sup-2: rgba(255, 255, 255, .06); --sup-3: rgba(255, 255, 255, .1);
  --borda: #303237; --borda-forte: #44474d;
  --texto: #e7e8ea; --texto-2: #b9bcc2; --texto-3: #8f939b;
  --painel: #242529; --painel-2: #2a2c30; --carta: #222327; --lateral: #18191b;
  --ocre: #e6ad55; --pinho: #74c79a;
  --grade: rgba(255, 255, 255, .06);
  --sombra: 0 16px 40px -10px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
  --sombra-leve: none;
  --elev-1: none;
  --elev-2: 0 6px 16px -4px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
  --elev-3: 0 20px 48px -12px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
  --perigo: #f28b82; --ok: #6fcf97; --aviso: #e6ad55; --info: #8ab4f8;
  --c-mapa: #b9bcc2; --c-planilha: #b9bcc2; --c-texto: #b9bcc2; --c-lista: #b9bcc2;
  --faixa: #1c1d20; --faixa-texto: #e7e8ea; --faixa-texto-2: #b9bcc2; --faixa-sup: rgba(255, 255, 255, .06); --faixa-borda: #303237;
  --aviso-fundo: #33363c; --aviso-texto: #eceef1; --aviso-borda: rgba(255, 255, 255, .1);
  --veu: rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* cores de destaque: claro (fundo do botão com texto branco ≥ 5:1) e escuro (tom claro com texto escuro ≥ 6:1) */
:root[data-tema="claro-pro"], :root[data-tema="claro-pro"][data-acento="azul"] { --realce: #2457c5; --realce-texto: #ffffff; }
:root[data-tema="claro-pro"][data-acento="petroleo"] { --realce: #0f6b78; --realce-texto: #ffffff; }
:root[data-tema="claro-pro"][data-acento="verde"] { --realce: #2e7a57; --realce-texto: #ffffff; }
:root[data-tema="claro-pro"][data-acento="violeta"] { --realce: #6a4fc3; --realce-texto: #ffffff; }
:root[data-tema="claro-pro"][data-acento="ambar"] { --realce: #9a5b00; --realce-texto: #ffffff; }
:root[data-tema="escuro-pro"], :root[data-tema="escuro-pro"][data-acento="azul"] { --realce: #7ea6f6; --realce-texto: #0f1a33; }
:root[data-tema="escuro-pro"][data-acento="petroleo"] { --realce: #5fbfca; --realce-texto: #062a30; }
:root[data-tema="escuro-pro"][data-acento="verde"] { --realce: #74c79a; --realce-texto: #0b2a18; }
:root[data-tema="escuro-pro"][data-acento="violeta"] { --realce: #a993f2; --realce-texto: #1d1240; }
:root[data-tema="escuro-pro"][data-acento="ambar"] { --realce: #e6ad55; --realce-texto: #2b1a00; }
/* no escuro, escurecer o destaque no hover some com ele: clareia */
:root[data-tema="escuro-pro"] { --realce-forte: color-mix(in srgb, var(--realce) 84%, #fff); }

/* ---- 18b. Estados de interação — valem em TODOS os temas ----
   normal · hover · foco · pressionado · selecionado · desativado · carregando · concluído · erro */
.bt[disabled], .bt:disabled { cursor: not-allowed; }
.bt.ocupado { position: relative; color: transparent !important; pointer-events: none; }
.bt.ocupado .ic, .bt.ocupado span { visibility: hidden; }
.bt.ocupado::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--realce-texto); border-right-color: transparent; animation: girar .7s linear infinite;
}
.bt.ocupado:not(.prim)::after { border-color: var(--texto-2); border-right-color: transparent; }
.bt.concluido { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }
.sacode { animation: sacode 380ms var(--c-suave); }
@keyframes sacode { 0%, 100% { transform: none; } 20% { transform: translateX(calc(-6px * var(--mov))); } 40% { transform: translateX(calc(5px * var(--mov))); } 60% { transform: translateX(calc(-3px * var(--mov))); } 80% { transform: translateX(calc(2px * var(--mov))); } }
.cartao:active { transform: translateY(0) scale(.988); }
.item-lado:active, .menu button:active, .item-ref:active, .item-doc-ligar:active, .paleta-item:active, .rec:active { transform: scale(.985); }
.item-lado, .item-ref, .item-doc-ligar, .menu button { transition: background-color var(--d-rapida) var(--c-padrao), color var(--d-rapida) var(--c-padrao), box-shadow var(--d-rapida) var(--c-padrao), transform var(--d-micro) ease-out; }
.cartao:focus-visible, .item-ref:focus-visible, .item-lado:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* salvamento: o estado é dito em texto; o ponto colorido só reforça */
.estado-salvo { display: inline-flex; align-items: center; gap: 6px; }
.estado-salvo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.estado-salvo[data-estado="salvo"]::before { background: var(--ok); opacity: .9; }
.estado-salvo[data-estado="salvando"]::before { animation: pulsar 900ms ease-in-out infinite alternate; }
.estado-salvo[data-estado="pendente"]::before { background: var(--aviso); opacity: .9; }
.estado-salvo[data-estado="erro"] { color: var(--perigo) !important; font-weight: 600; }
.estado-salvo[data-estado="erro"]::before { background: var(--perigo); opacity: 1; }
.estado-salvo[role="button"] { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.topo .estado-salvo[data-estado="erro"] { color: #ff9c86 !important; }
@keyframes pulsar { from { opacity: .25; } to { opacity: .9; } }
/* avisos: fechar, saída e a barra do tempo que falta (pausa com o ponteiro em cima) */
.aviso .fechar-aviso { margin-left: 2px; opacity: .7; min-height: 28px; width: 28px; }
.aviso .fechar-aviso:hover { opacity: 1; }
.aviso { position: relative; overflow: hidden; }
.aviso::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .25; transform-origin: left; animation: tempoAviso var(--duracao, 3200ms) linear forwards; }
.aviso.pausado::after { animation-play-state: paused; }
.aviso.saindo { animation: avisoSai 190ms var(--c-saida) forwards; pointer-events: none; }
@keyframes tempoAviso { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes avisoSai { to { opacity: 0; transform: translateY(calc(10px * var(--mov))) scale(calc(1 - .04 * var(--mov))); } }
.aviso.ok .ic-aviso { color: #7fd1a0; }
.aviso.erro .ic-aviso { color: #ff9c86; }
/* desempenho: cartões fora da tela não são desenhados (300 documentos: maior travada 1,4 s → 0,24 s com a CPU 4× mais lenta) */
.cartao { content-visibility: auto; contain-intrinsic-size: auto 176px; }

/* ---- 18c. Camada profissional (html[data-estilo="pro"]): componentes discretos, bordas finas, sem sombra decorativa ----
   Regras: cantos de 6–10 px (12 nos diálogos); sombra só no que flutua (menus, diálogos, avisos, painéis);
   nada de degradê, brilho ou elevação ao passar o mouse; maiúsculas só em siglas. */
:root[data-estilo="pro"] body { background: var(--fundo-solido); background-image: none; font-size: var(--f-corpo); }
:root[data-estilo="pro"] h1, :root[data-estilo="pro"] h2, :root[data-estilo="pro"] h3 { letter-spacing: -.014em; font-weight: 650; }
/* topo: cabeçalho contextual na cor da página, com uma borda fina */
:root[data-estilo="pro"] .topo { background: var(--faixa); color: var(--faixa-texto); border-bottom: 1px solid var(--faixa-borda); box-shadow: none; }
:root[data-estilo="pro"] .topo .bt { border-radius: var(--r-s); color: var(--texto-2); }
:root[data-estilo="pro"] .topo .bt:hover { color: var(--texto); }
:root[data-estilo="pro"] .topo .bt.prim { background: var(--realce); color: var(--realce-texto); }
:root[data-estilo="pro"] .topo .titulo-doc { font-family: var(--fonte); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
:root[data-estilo="pro"] .topo .titulo-doc:focus { border-color: var(--realce); background: var(--carta); box-shadow: 0 0 0 3px var(--realce-suave); }
:root[data-estilo="pro"] .topo .estado-salvo { color: var(--texto-3); font-size: var(--f-meta); }
:root[data-estilo="pro"] .topo .marca.placa { background: none; box-shadow: none; text-shadow: none; color: var(--texto); padding: 0 8px; min-height: 36px; font-family: var(--fonte); font-size: 15px; letter-spacing: -.01em; border-radius: var(--r-s); }
:root[data-estilo="pro"] .topo .marca.placa::before, :root[data-estilo="pro"] .topo .marca.placa::after { display: none; }
:root[data-estilo="pro"] .topo .marca .selo { color: var(--realce); filter: none; }
:root[data-estilo="pro"] .topo .marca:hover { background: var(--sup-2); filter: none; }
:root[data-estilo="pro"] .selo-offline { color: var(--aviso); }
/* títulos de tela: tipografia, sem placa e sem filete */
:root[data-estilo="pro"] h1.placa {
  background: none; color: var(--texto); text-shadow: none; box-shadow: none; padding: 0; font-size: var(--f-tela); line-height: 1.2; font-weight: 650; letter-spacing: -.02em; border-radius: 0;
}
:root[data-estilo="pro"] h1.placa::before, :root[data-estilo="pro"] h1.placa::after { display: none; }
:root[data-estilo="pro"] .pag h1 { padding: 0; font-size: var(--f-tela); margin-bottom: var(--e-5); }
/* botões: um desenho para todos; o destaque só no principal */
:root[data-estilo="pro"] .bt { border-radius: var(--r-s); font-weight: 500; background: var(--carta); border-color: var(--borda-forte); }
:root[data-estilo="pro"] .bt:hover { background: var(--sup-2); border-color: var(--borda-forte); }
:root[data-estilo="pro"] .bt.plano { background: transparent; border-color: transparent; }
:root[data-estilo="pro"] .bt.plano:hover { background: var(--sup-2); }
:root[data-estilo="pro"] .bt.prim { background: var(--realce); color: var(--realce-texto); border-color: transparent; box-shadow: none; font-weight: 600; letter-spacing: 0; }
:root[data-estilo="pro"] .bt.prim:hover { background: var(--realce-forte); filter: none; box-shadow: none; }
:root[data-estilo="pro"] .bt.perigo { color: var(--perigo); }
:root[data-estilo="pro"] .bt.prim.perigo { background: var(--perigo); color: #fff; }
:root[data-tema="escuro-pro"] .bt.prim.perigo { color: #2a0a07; }
:root[data-estilo="pro"] .bt.ativo { background: var(--realce-suave); border-color: var(--realce-borda); color: var(--texto); }
:root[data-estilo="pro"] .grupo-bt { border-radius: var(--r-m); padding: 3px; gap: 2px; background: var(--sup-2); border-color: transparent; }
:root[data-estilo="pro"] .grupo-bt .bt { border-radius: var(--r-s); background: transparent; border-color: transparent; }
:root[data-estilo="pro"] .grupo-bt .bt:hover { background: var(--sup-2); }
:root[data-estilo="pro"] .grupo-bt .bt.ativo { background: var(--carta); border-color: var(--borda); box-shadow: 0 1px 2px rgba(15, 18, 22, .08); color: var(--texto); }
/* campos */
:root[data-estilo="pro"] .entrada, :root[data-estilo="pro"] select.entrada, :root[data-estilo="pro"] textarea.entrada {
  border-radius: var(--r-s); background: var(--carta); border-color: var(--borda-forte); box-shadow: none;
  transition: border-color var(--d-rapida) var(--c-padrao), box-shadow var(--d-rapida) var(--c-padrao);
}
:root[data-estilo="pro"] .entrada:hover { border-color: color-mix(in srgb, var(--borda-forte) 55%, var(--texto-3)); }
:root[data-estilo="pro"] .entrada:focus { border-color: var(--realce); box-shadow: 0 0 0 3px var(--realce-suave); }
:root[data-estilo="pro"] .campo > span, :root[data-estilo="pro"] .rotulo { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texto-2); font-weight: 600; }
:root[data-estilo="pro"] .chave i { background: var(--sup-3); border-color: var(--borda-forte); }
:root[data-estilo="pro"] .etiqueta { border-radius: var(--r-pilula); padding: 1px 8px; letter-spacing: 0; font-size: 12px; }
:root[data-estilo="pro"] .etiqueta.ouro { color: var(--realce); border-color: var(--realce-borda); background: var(--realce-suave); }
:root[data-estilo="pro"] .dica { font-size: var(--f-meta); }
/* seções: título em caixa normal, sem ornamento */
:root[data-estilo="pro"] .sec-cab { border-bottom: 0; margin: 0 0 var(--e-2); padding-bottom: 0; }
:root[data-estilo="pro"] .sec-cab h2 { font-family: var(--fonte); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--texto); font-weight: 600; }
:root[data-estilo="pro"] .sec-cab h2::after { display: none; }
:root[data-estilo="pro"] .titulo-secao { border-bottom: 0; font-size: var(--f-titulo); letter-spacing: -.015em; }
/* fichas de ferramenta antigas (.novo.placa — usadas pelos modelos do gerador): sem madeira, sem elevação */
:root[data-estilo="pro"] .novo.placa {
  background: var(--carta); color: var(--texto); text-shadow: none; font-family: var(--fonte); letter-spacing: 0;
  border: 1px solid var(--borda); border-radius: var(--r-m); box-shadow: none; padding: 12px 14px; gap: 10px;
  flex-direction: row; align-items: center; transition: border-color var(--d-rapida), background-color var(--d-rapida);
}
:root[data-estilo="pro"] .novo.placa::before, :root[data-estilo="pro"] .novo.placa::after { display: none; }
:root[data-estilo="pro"] .novo.placa:hover { transform: none; border-color: var(--borda-forte); background: var(--sup); filter: none; }
:root[data-estilo="pro"] .novo.placa b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
:root[data-estilo="pro"] .novo.placa small { font-size: 12.5px; opacity: 1; color: var(--texto-3); }
/* fichas de documento (vista em grade) */
:root[data-estilo="pro"] .cartoes { gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
:root[data-estilo="pro"] .cartoes .cartao {
  border-radius: var(--r-m); border: 1px solid var(--borda); background: var(--carta); box-shadow: none; padding: 12px 14px 10px; gap: 8px; min-height: 124px;
  transition: border-color var(--d-rapida) var(--c-padrao), background-color var(--d-rapida) var(--c-padrao);
}
:root[data-estilo="pro"] .cartoes .cartao:hover { transform: none; border-color: var(--borda-forte); box-shadow: none; }
:root[data-estilo="pro"] .cartao .tipo-doc { color: var(--texto-3); letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 500; }
:root[data-estilo="pro"] .cartao .cab .q { width: 28px; height: 28px; border-radius: var(--r-s); color: var(--texto-2); background: var(--sup-2); }
:root[data-estilo="pro"] .cartao h3 { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
:root[data-estilo="pro"] .cartao p { color: var(--texto-2); line-height: 1.5; }
:root[data-estilo="pro"] .cartoes .cartao .rod { border-top: 1px solid var(--borda); padding-top: 8px; font-size: 12px; letter-spacing: 0; }
:root[data-estilo="pro"] .cartao .fixo { color: var(--texto-3); }
/* blocos de informação: um só desenho (borda fina, sem sombra) */
:root[data-estilo="pro"] .bloco, :root[data-estilo="pro"] .tile-progresso, :root[data-estilo="pro"] .caixa-grafico, :root[data-estilo="pro"] .tabela-mapas,
:root[data-estilo="pro"] .boas-vindas, :root[data-estilo="pro"] .revisoes-hoje, :root[data-estilo="pro"] .lembrete-copia, :root[data-estilo="pro"] .meta-dia,
:root[data-estilo="pro"] .rec, :root[data-estilo="pro"] .trecho, :root[data-estilo="pro"] .caixa-grafo, :root[data-estilo="pro"] .carta-prova,
:root[data-estilo="pro"] .item-esquecida, :root[data-estilo="pro"] .linha-resultado, :root[data-estilo="pro"] .resposta-fontes p, :root[data-estilo="pro"] .item-ref,
:root[data-estilo="pro"] .aviso-memoria, :root[data-estilo="pro"] .vazio-bib {
  border-radius: var(--r-l); border: 1px solid var(--borda); background: var(--carta); box-shadow: none;
}
:root[data-estilo="pro"] .vazio-bib { border-style: dashed; background: transparent; font-family: var(--fonte); font-style: normal; font-size: 14.5px; color: var(--texto-2); }
:root[data-estilo="pro"] .bloco { padding: var(--e-5) var(--e-6); margin-bottom: var(--e-4); }
:root[data-estilo="pro"] .bloco h2 { font-size: var(--f-sub); font-family: var(--fonte); }
:root[data-estilo="pro"] .bloco h2 .ic { color: var(--texto-3); }
:root[data-estilo="pro"] .tile-progresso { padding: var(--e-4); }
:root[data-estilo="pro"] .tile-progresso .ic-tile { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); background: var(--sup-2); color: var(--texto-2); }
:root[data-estilo="pro"] .revisoes-hoje { border-color: var(--realce-borda); }
:root[data-estilo="pro"] .revisoes-hoje .num { font-family: var(--fonte); color: var(--realce); font-size: 24px; }
:root[data-estilo="pro"] .lembrete-copia { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borda)); }
:root[data-estilo="pro"] .item-ref:hover, :root[data-estilo="pro"] .item-esquecida:hover { border-color: var(--borda-forte); background: var(--sup); }
:root[data-estilo="pro"] .boas-vindas { border-color: var(--realce-borda); }
/* diálogos, menus, painéis e avisos: flutuam, por isso têm sombra */
:root[data-estilo="pro"] .veu { background: var(--veu); }
:root[data-estilo="pro"] .dialogo { border-radius: var(--r-xl); border: 1px solid var(--borda); box-shadow: var(--elev-3); background: var(--painel); }
:root[data-estilo="pro"] .dialogo .d-cab { padding: 18px 20px 6px; }
:root[data-estilo="pro"] .dialogo .d-cab h2 { font-size: 17px; font-family: var(--fonte); }
:root[data-estilo="pro"] .dialogo .d-corpo { padding: 8px 20px 14px; }
:root[data-estilo="pro"] .dialogo .d-rod { border-top: 1px solid var(--borda); padding: 12px 20px 14px; background: var(--painel-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
:root[data-estilo="pro"] .menu { border-radius: var(--r-l); border: 1px solid var(--borda); box-shadow: var(--elev-3); padding: 4px; background: var(--painel); }
:root[data-estilo="pro"] .menu button { border-radius: var(--r-s); padding: 7px 10px; }
:root[data-estilo="pro"] .menu button .ic { color: var(--texto-3); }
:root[data-estilo="pro"] .menu button:hover .ic, :root[data-estilo="pro"] .menu button:focus-visible .ic { color: var(--texto); }
:root[data-estilo="pro"] .menu button:hover, :root[data-estilo="pro"] .menu button:focus-visible { background: var(--sup-2); }
:root[data-estilo="pro"] .menu button.perigo, :root[data-estilo="pro"] .menu button.perigo .ic { color: var(--perigo); }
:root[data-estilo="pro"] .menu .sep { background: var(--borda); }
:root[data-estilo="pro"] .menu .titulo-menu { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--texto-3); font-weight: 600; }
:root[data-estilo="pro"] .painel { background: var(--painel); border-left: 1px solid var(--borda); box-shadow: var(--elev-3); }
:root[data-estilo="pro"] .aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border: 1px solid var(--aviso-borda); border-radius: var(--r-l); box-shadow: var(--elev-3); padding: 10px 10px 10px 14px; }
:root[data-estilo="pro"] .aviso .bt { color: var(--aviso-texto); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
:root[data-estilo="pro"] .aviso .bt.plano { background: transparent; border-color: transparent; }
/* editores: barras, folhas e controles flutuantes */
:root[data-estilo="pro"] .barra { background: var(--painel); border-bottom: 1px solid var(--borda); gap: 2px; padding: 5px 10px; }
:root[data-estilo="pro"] .barra .bt { border-radius: var(--r-s); }
:root[data-estilo="pro"] .barra .div { background: var(--borda); }
:root[data-estilo="pro"] .mapa-zoom, :root[data-estilo="pro"] .mapa-mini, :root[data-estilo="pro"] .dica-mapa, :root[data-estilo="pro"] .trilha-foco, :root[data-estilo="pro"] .calor-legenda {
  border-radius: var(--r-l); border: 1px solid var(--borda); background: var(--painel); box-shadow: var(--elev-2);
}
:root[data-estilo="pro"] .dica-mapa { font-family: var(--fonte); font-style: normal; }
:root[data-estilo="pro"] .tx-folha { border-radius: var(--r-l); border: 1px solid var(--borda); box-shadow: none; }
:root[data-estilo="pro"] .tx-folha h2 { border-bottom-color: var(--borda); }
:root[data-estilo="pro"] .ls-item { border-radius: var(--r-m); border-color: var(--borda); box-shadow: none; padding: 7px 10px; margin-bottom: 4px; transition: border-color var(--d-rapida), background-color var(--d-rapida); }
:root[data-estilo="pro"] .ls-item:hover { border-color: var(--borda-forte); }
:root[data-estilo="pro"] .ls-marca { border-radius: var(--r-xs); transition: background-color var(--d-rapida), border-color var(--d-rapida), transform var(--d-micro) ease-out; }
:root[data-estilo="pro"] .ls-marca:active { transform: scale(.92); }
:root[data-estilo="pro"] .ls-item.feito .ls-marca .ic { animation: marcar var(--d-lenta) var(--c-padrao); }
@keyframes marcar { from { transform: scale(calc(1 - .4 * var(--mov))); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-estilo="pro"] .ls-nova { background: var(--fundo-solido); }
:root[data-estilo="pro"] .pl-tabela th { background: var(--painel-2); }
:root[data-estilo="pro"] .pl-formula .ref { border-radius: var(--r-s); }
:root[data-estilo="pro"] .flash .carta { border-radius: var(--r-xl); border-color: var(--borda); box-shadow: var(--elev-2); }
:root[data-estilo="pro"] .chip-filtro { border-color: var(--borda-forte); background: var(--carta); border-radius: var(--r-pilula); }
:root[data-estilo="pro"] .chip-filtro.ativo { background: var(--realce-suave); border-color: var(--realce-borda); color: var(--texto); font-weight: 600; }
:root[data-estilo="pro"] .progresso { border-radius: var(--r-pilula); height: 6px; }
:root[data-estilo="pro"] .progresso > i { border-radius: var(--r-pilula); background: var(--realce); }
:root[data-estilo="pro"] .paleta { border-radius: var(--r-xl); border-color: var(--borda); box-shadow: var(--elev-3); }
:root[data-estilo="pro"] .paleta-item[aria-selected="true"] { background: var(--realce-suave); box-shadow: inset 2px 0 0 var(--realce); }
:root[data-estilo="pro"] .paleta-item .pi-tit { font-family: var(--fonte); font-weight: 600; font-size: 14.5px; }
:root[data-estilo="pro"] .paleta-item mark, :root[data-estilo="pro"] .trecho-texto mark { background: var(--marca-texto); }
:root[data-estilo="pro"] .item-ref .t, :root[data-estilo="pro"] .rec .rec-txt b { font-family: var(--fonte); font-weight: 600; }
:root[data-estilo="pro"] .tag-frase { text-transform: none; letter-spacing: 0; }
:root[data-estilo="pro"] .rot-mov { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--texto); margin: 18px 0 8px; }

/* ---- Ajustes: escolha de tema com amostra de cores ---- */
.familias-tema { display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-2); }
.cab-familia { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cab-familia b { font-size: 13px; }
.cab-familia small { color: var(--texto-3); font-size: 12px; }
.grade-temas { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cartao-tema { flex-direction: column; align-items: stretch !important; gap: 6px !important; height: auto !important; padding: 6px !important; white-space: normal; }
.cartao-tema .nome-tema { display: flex; align-items: center; gap: 6px; padding: 0 2px 2px; font-size: 13px; }
.amostra-tema { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 30px; border-radius: 7px; overflow: hidden; border: 1px solid var(--borda); }
.amostra-tema i { display: block; }
.amostra-tema[data-amostra="claro"] i:nth-child(1) { background: #efe6d5; } .amostra-tema[data-amostra="claro"] i:nth-child(2) { background: #3a2416; } .amostra-tema[data-amostra="claro"] i:nth-child(3) { background: #a33c19; }
.amostra-tema[data-amostra="escuro"] i:nth-child(1) { background: #16130f; } .amostra-tema[data-amostra="escuro"] i:nth-child(2) { background: #3a2416; } .amostra-tema[data-amostra="escuro"] i:nth-child(3) { background: #e3bd6c; }
.amostra-tema[data-amostra="couro"] i:nth-child(1) { background: #1d3328; } .amostra-tema[data-amostra="couro"] i:nth-child(2) { background: #233f31; } .amostra-tema[data-amostra="couro"] i:nth-child(3) { background: #d9b45f; }
.amostra-tema[data-amostra="marmore"] i:nth-child(1) { background: #eeece7; } .amostra-tema[data-amostra="marmore"] i:nth-child(2) { background: #fcfbf8; } .amostra-tema[data-amostra="marmore"] i:nth-child(3) { background: #8c5a2b; }
.amostra-tema[data-amostra="jornal"] i:nth-child(1) { background: #ece7da; } .amostra-tema[data-amostra="jornal"] i:nth-child(2) { background: #161514; } .amostra-tema[data-amostra="jornal"] i:nth-child(3) { background: #b3261e; }
.cartao-tema.ativo .amostra-tema { box-shadow: 0 0 0 2px var(--realce); }
.cartao-tema:hover .amostra-tema { transform: translateY(calc(-1px * var(--mov))); }
.amostra-tema { transition: transform var(--d-rapida) var(--c-padrao), box-shadow var(--d-rapida); }
.dica-mov { margin: 6px 0 12px; }
.amostra-tema[data-amostra="claro-pro"] i:nth-child(1) { background: #f7f7f5; } .amostra-tema[data-amostra="claro-pro"] i:nth-child(2) { background: #ffffff; } .amostra-tema[data-amostra="claro-pro"] i:nth-child(3) { background: #2457c5; }
.amostra-tema[data-amostra="escuro-pro"] i:nth-child(1) { background: #1c1d20; } .amostra-tema[data-amostra="escuro-pro"] i:nth-child(2) { background: #2a2c30; } .amostra-tema[data-amostra="escuro-pro"] i:nth-child(3) { background: #7ea6f6; }
.amostra-tema[data-amostra="sistema"] { grid-template-columns: 1fr 1fr; } .amostra-tema[data-amostra="sistema"] i:nth-child(1) { background: #f7f7f5; } .amostra-tema[data-amostra="sistema"] i:nth-child(2) { background: #1c1d20; } .amostra-tema[data-amostra="sistema"] i:nth-child(3) { display: none; }
/* cor de destaque: bolinha com a cor do tema claro (os valores de cada tema estão na seção 18a) */
.grupo-acento { display: flex; flex-wrap: wrap; }
.grupo-acento .bt { gap: 8px; }
.grupo-acento.sem-efeito .bt { opacity: .6; }
.bola-acento { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.bola-acento[data-cor="azul"] { background: #2457c5; } .bola-acento[data-cor="petroleo"] { background: #0f6b78; } .bola-acento[data-cor="verde"] { background: #2e7a57; }
.bola-acento[data-cor="violeta"] { background: #6a4fc3; } .bola-acento[data-cor="ambar"] { background: #9a5b00; }
:root[data-tema="escuro-pro"] .bola-acento[data-cor="azul"] { background: #7ea6f6; } :root[data-tema="escuro-pro"] .bola-acento[data-cor="petroleo"] { background: #5fbfca; }
:root[data-tema="escuro-pro"] .bola-acento[data-cor="verde"] { background: #74c79a; } :root[data-tema="escuro-pro"] .bola-acento[data-cor="violeta"] { background: #a993f2; }
:root[data-tema="escuro-pro"] .bola-acento[data-cor="ambar"] { background: #e6ad55; }
.dica-acento { margin: 6px 0 4px; }
details.classicos { margin: 14px 0 4px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; }
details.classicos > summary { cursor: pointer; list-style-position: inside; }
details.classicos[open] > summary { margin-bottom: 10px; }
details.classicos small { color: var(--texto-3); }

/* ---- 18d. Sistema de movimento (entradas, revelação, gráficos, mapa) ---- */
/* níveis: completo (--mov 1) · suave (--mov 0: só esmaecimento curto) · reduzido (nada decorativo; regra da seção 16) */
:root[data-movimento="suave"] { --mov: 0; }
:root[data-movimento="suave"] .flash .carta.virando, :root[data-movimento="suave"] .no.nasce, :root[data-movimento="suave"] .sacode { animation: none; }
:root[data-movimento="suave"]::view-transition-new(root) { animation: aparecer 200ms ease-out; }
:root[data-movimento="suave"] .mapa-area.abrindo .no { animation-name: aparecer; animation-duration: 260ms; animation-delay: 0s; }
:root[data-movimento="suave"] .mapa-area.abrindo svg.ligacoes path.ramo { animation: none; }
/* estudo: a resposta se revela de cima para baixo */
.flash .resposta:not([hidden]) { animation: revelar var(--d-lenta) var(--c-padrao); }
@keyframes revelar { from { opacity: 0; transform: translateY(calc(-6px * var(--mov))); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
/* pesquisa: resultados entram em sequência curta (no máximo 8 degraus); no estilo pro, aparecem já (a resposta é o que importa) */
.paleta-item { animation: subirItem 200ms var(--c-padrao) backwards; animation-delay: calc(min(var(--i, 0), 8) * 18ms); }
.paleta.procurando .paleta-cab { background-image: linear-gradient(90deg, transparent, var(--realce-suave, var(--sup-3)), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: varrer 1s linear infinite; }
@keyframes varrer { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* progresso: barras se enchem a partir do zero */
.meta-dia .meta-barra > i, .tabela-mapas .barrinha i { transform-origin: left; animation: encher 720ms var(--c-padrao) backwards; animation-delay: 160ms; }
@keyframes encher { from { transform: scaleX(0); } to { transform: none; } }
.progresso > i { transition: width var(--d-lenta) var(--c-padrao); }
/* grafo de referências: pontos e linhas aparecem */
.grafo .g-no:nth-of-type(-n+60) { animation: aparecer var(--d-lenta) ease-out backwards; }
.grafo .g-ref, .grafo .g-etq { animation: aparecer 500ms ease-out backwards; animation-delay: 180ms; }
/* referências, recomendações e trechos entram em sequência curta */
/* só os primeiros de cada lista animam: em listas de centenas de itens, animar todos custa mais que ajuda */
.lista-refs > .item-ref:nth-child(-n+12), .rec, .trecho, .bloco-etq:nth-child(-n+8) { animation: subirItem 300ms var(--c-padrao) backwards; animation-delay: calc(min(var(--i, 0), 10) * 35ms); }
/* ajustes: o tema escolhido "acende" */
.cartao-tema.ativo { animation: acender var(--d-media) var(--c-mola); }
@keyframes acender { from { transform: scale(calc(1 - .04 * var(--mov))); } to { transform: none; } }
/* mapa: no estilo pro a ideia nova "surge" do lugar (no Gabinete ela continua balançando como placa) */
@keyframes surgeNo { from { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(calc(1 - .35 * var(--mov))); } 70% { opacity: 1; } to { opacity: 1; transform: translate(var(--tx), var(--ty)); } }
:root[data-estilo="pro"] .no.nasce, :root[data-estilo="pro"] .mapa-area.abrindo .no.nasce { animation: surgeNo 380ms var(--c-mola) both; }
.mapa-mundo svg.ligacoes path.ramo.novo { stroke-dasharray: 1; animation: tracar 420ms var(--c-suave) backwards; }
/* 3.0 (estilo pro): o movimento comunica o que aconteceu, sem chamar atenção para si.
   Sem entradas em cascata, sem molas, sem barras que crescem; telas, menus, diálogos e avisos com 140–200 ms. */
:root[data-estilo="pro"] .paleta-item, :root[data-estilo="pro"] .lista-refs > .item-ref, :root[data-estilo="pro"] .rec, :root[data-estilo="pro"] .trecho,
:root[data-estilo="pro"] .bloco-etq, :root[data-estilo="pro"] .item-correcao, :root[data-estilo="pro"] .linha-resultado, :root[data-estilo="pro"] .item-versao,
:root[data-estilo="pro"] .ponto-revisao, :root[data-estilo="pro"] .sugestao-lig, :root[data-estilo="pro"] .alternativa, :root[data-estilo="pro"] .tile-progresso,
:root[data-estilo="pro"] .painel.aberto .p-corpo > *, :root[data-estilo="pro"] .cartao-tema.ativo,
:root[data-estilo="pro"] .grafico-30 .barra, :root[data-estilo="pro"] .grafico-14 .barra, :root[data-estilo="pro"] .meta-dia .meta-barra > i, :root[data-estilo="pro"] .tabela-mapas .barrinha i { animation: none; }
:root[data-estilo="pro"] .palco > .tela, :root[data-estilo="pro"] .palco > .pl-tela, :root[data-estilo="pro"] .palco > .mapa-tela { animation: aparecer 140ms ease-out backwards; }
:root[data-estilo="pro"] .menu { animation: menuAbre 120ms var(--c-padrao); }
:root[data-estilo="pro"] .dialogo, :root[data-estilo="pro"] .paleta { animation: dialogoAbre 180ms var(--c-padrao); }
:root[data-estilo="pro"] .aviso { animation: avisoEntra 180ms var(--c-padrao); }
:root[data-estilo="pro"] .bt:active:not(:disabled) { transform: scale(.98); }
:root[data-estilo="pro"] .cartao:active { transform: none; }
:root[data-estilo="pro"] .mapa-area.abrindo .no { animation-name: aparecer; animation-duration: 200ms; animation-delay: calc(min(var(--nv, 0), 4) * 30ms); }
:root[data-estilo="pro"] .mapa-area.abrindo svg.ligacoes path.ramo { animation-duration: 220ms; animation-delay: calc(min(var(--nv, 1), 4) * 30ms); }
:root[data-estilo="pro"] .no.nasce, :root[data-estilo="pro"] .mapa-area.abrindo .no.nasce { animation: surgeNo 200ms var(--c-padrao) both; }
:root[data-estilo="pro"] .mapa-mundo svg.ligacoes path.ramo.novo { animation-duration: 200ms; }
:root[data-estilo="pro"] .flash .resposta:not([hidden]) { animation-duration: 180ms; }
:root[data-estilo="pro"] .flash .carta.virando { animation-duration: 220ms; }
/* abas e grupos de botões: a escolha muda de lugar com suavidade */
.grupo-bt .bt { transition: background-color var(--d-media) var(--c-padrao), box-shadow var(--d-media) var(--c-padrao), color var(--d-rapida), border-color var(--d-media); }
/* painéis laterais saem e entram pelo mesmo caminho; os itens de dentro sobem em sequência */
.painel.aberto .p-corpo > * { animation: subirItem 280ms var(--c-padrao) backwards; animation-delay: calc(80ms + min(var(--i, 0), 6) * 30ms); }

/* ---- 18e. Casca e navegação principal (3.0) ----
   #app é uma grade: navegação à esquerda (altura toda), topo e palco à direita.
   Telas de trabalho (body.sem-nav) ocupam a largura toda. Celular: a navegação vira gaveta. */
#app { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
#app > .topo { grid-column: 2; grid-row: 1; min-width: 0; }
#app > .palco { grid-column: 2; grid-row: 2; }
.nav-app {
  grid-column: 1; grid-row: 1 / 3; width: 248px; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 8px 8px; padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left));
  background: var(--lateral, var(--sup)); border-right: 1px solid var(--borda); position: relative; z-index: 30;
}
body.sem-nav .nav-app { display: none; }
.nav-veu { display: none; }
.nav-cab { display: flex; align-items: center; gap: 4px; padding: 0 2px 4px 4px; min-height: 40px; }
.nav-marca { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; padding: 4px 6px; border-radius: var(--raio-p); color: var(--texto); text-decoration: none; font-weight: 650; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.nav-marca:hover { background: var(--sup-2); }
.nav-marca .selo { display: grid; color: var(--realce); flex: none; }
.nav-marca .nome-marca { overflow: hidden; text-overflow: ellipsis; }
.nav-marca i { font-weight: 400; font-style: italic; }
.nav-acoes { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 6px; }
.nav-novo { justify-content: flex-start; width: 100%; }
.nav-pesquisa {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--carta); color: var(--texto-3); cursor: pointer; font: inherit; font-size: 13.5px; text-align: left; transition: border-color var(--t), color var(--t);
}
.nav-pesquisa:hover { border-color: var(--borda-forte); color: var(--texto-2); }
.nav-pesquisa .ic-lado { display: grid; flex: none; }
.nav-pesquisa kbd { font-size: 11px; }
.nav-rolagem { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 8px; scrollbar-width: thin; }
.nav-grupo { display: flex; flex-direction: column; gap: 1px; }
.nav-app .titulo-sec { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 4px 4px 2px 10px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.nav-app .titulo-sec .bt { min-height: 26px; width: 26px; }
.nav-app .item-lado {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 6px 0 10px; border: 0; border-radius: var(--raio-p);
  background: none; color: var(--texto-2); text-decoration: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; position: relative;
  transition: background-color var(--t), color var(--t);
}
.nav-app .item-lado:hover { background: var(--sup-2); color: var(--texto); }
.nav-app .item-lado.ativo { background: var(--realce-suave, var(--sup-3)); color: var(--texto); font-weight: 600; box-shadow: none; }
.nav-app .item-lado.ativo .ic-lado { color: var(--realce); }
.nav-app .item-lado:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.nav-app .ic-lado { display: grid; place-items: center; flex: none; color: var(--texto-3); }
.nav-app .item-lado .cresce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-app .item-lado .n { margin-left: auto; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.nav-app .item-lado .n.destaque { color: var(--realce-texto); background: var(--realce); border-radius: 999px; padding: 0 7px; line-height: 18px; font-weight: 600; }
.nav-app .menu-pasta { min-height: 26px; width: 26px; height: 26px; margin-right: -2px; opacity: 0; flex: none; }
.nav-app .item-lado:hover .menu-pasta, .nav-app .item-lado:focus-within .menu-pasta, .nav-app .item-lado.ativo .menu-pasta { opacity: 1; }
.nav-vazio { padding: 2px 10px 4px; }
.nav-rodape { display: flex; flex-direction: column; gap: 1px; padding: 6px 2px 0; border-top: 1px solid var(--borda); }
@media (hover: none) { .nav-app .menu-pasta { opacity: 1; } }
/* topo: com a navegação à vista, o nome e o "voltar" saem do topo (a navegação já leva a qualquer lugar) */
.bt-menu { display: none !important; }
body:not(.sem-nav) .topo .bt-voltar, body:not(.sem-nav) .topo .marca { display: none; }
/* a pesquisa já está na navegação (e no Início); no topo ela fica só nas telas de trabalho e no celular */
@media (min-width: 761px) { body:not(.sem-nav) .topo .bt-pesquisa { display: none; } }
.topo .titulo-doc { margin-right: auto; }
/* computador: navegação recolhida numa coluna de ícones (a escolha fica em "navRecolhida") */
@media (min-width: 761px) {
  .nav-app.recolhida { width: 60px; padding-left: 8px; padding-right: 8px; }
  .nav-app.recolhida .nav-cab { flex-direction: column; padding: 0 0 4px; gap: 2px; }
  .nav-app.recolhida .nav-marca { justify-content: center; padding: 6px 0; width: 100%; }
  .nav-app.recolhida .nome-marca, .nav-app.recolhida .cresce, .nav-app.recolhida .item-lado .n:not(.destaque), .nav-app.recolhida .menu-pasta,
  .nav-app.recolhida .titulo-sec, .nav-app.recolhida .nav-vazio, .nav-app.recolhida .nav-pesquisa kbd, .nav-app.recolhida .nav-novo span { display: none; }
  .nav-app.recolhida .item-lado, .nav-app.recolhida .nav-pesquisa { justify-content: center; padding: 0; }
  .nav-app.recolhida .nav-novo { justify-content: center; padding: 0; }
  .nav-app.recolhida .nav-grupo + .nav-grupo { border-top: 1px solid var(--borda); padding-top: 8px; }
  .nav-app.recolhida .item-lado .n.destaque { position: absolute; top: 5px; right: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) { .nav-app { width: 220px; } }
/* celular: gaveta pela esquerda, com véu; o botão de menu do topo abre */
@media (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #app > .topo, #app > .palco { grid-column: 1; }
  .nav-app {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); z-index: 30; background: var(--painel); box-shadow: var(--sombra);
    transform: translateX(-104%); visibility: hidden; transition: transform var(--d-media) var(--c-padrao), visibility 0s linear var(--d-media);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .nav-app.aberto { transform: none; visibility: visible; transition: transform var(--d-media) var(--c-padrao), visibility 0s; }
  .nav-veu { display: block; position: fixed; inset: 0; z-index: 29; background: var(--veu, rgba(20, 13, 6, .45)); opacity: 0; pointer-events: none; transition: opacity var(--d-media) var(--c-padrao); }
  .nav-app.aberto ~ .nav-veu { opacity: 1; pointer-events: auto; }
  .nav-app .item-lado, .nav-pesquisa { min-height: var(--toque); }
  .nav-app .menu-pasta { opacity: 1; }
  body:not(.sem-nav) .topo .bt-menu { display: inline-flex !important; }
}

/* ---- 18f. Esqueletos (forma do conteúdo que vem; sem prometer progresso) ---- */
.esqueleto-caixa { padding: 28px 32px; }
.esqueleto { display: grid; gap: 12px; }
.esqueleto.esq-cartoes { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.esqueleto.esq-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.esq-item { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-l); border: 1px solid var(--borda); background: var(--carta); min-height: 64px; }
.esq-cartoes .esq-item { min-height: 150px; }
.esq-item i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--sup-2) 0, var(--sup-3) 40%, var(--sup-2) 80%) 0 0 / 300% 100%; animation: brilhoEsq 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 60ms); }
.esq-item i:nth-child(1) { width: 40%; height: 9px; }
.esq-item i:nth-child(2) { width: 85%; height: 14px; }
.esq-item i:nth-child(3) { width: 65%; }
@keyframes brilhoEsq { from { background-position: 100% 0; } to { background-position: 0 0; } }
:root[data-movimento="reduzido"] .esq-item i { animation: none; }
@media (max-width: 760px) { .esqueleto-caixa { padding: 18px 16px; } .esqueleto.esq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* celular: nas telas com "voltar", a placa do nome sai do topo (o voltar já leva à biblioteca) e o título ganha espaço */
@media (max-width: 760px) { .topo.com-voltar .marca { display: none; } .topo { gap: 4px; } }
/* atalhos de teclado (2.0) */
.atalhos-gerais { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 26px; }
.atalhos-gerais h3 { font-size: 14px; margin: 10px 0 6px; color: var(--texto-2); }
.atalhos-gerais dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; align-items: baseline; font-size: 13.5px; }
.atalhos-gerais dt { white-space: nowrap; }
.atalhos-gerais dd { margin: 0; color: var(--texto-2); }
/* modelos de mapa no gerador: prévia em cima, nome embaixo (a ficha de ferramenta pro é em linha) */
:root[data-estilo="pro"] .novo.placa.modelo { flex-direction: column; align-items: stretch; }
:root[data-estilo="pro"] .novo.placa.modelo .q { display: none; }
:root[data-estilo="pro"] .novo .previa-modelo { margin: 0; border-radius: 10px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
/* listas longas (referências, itens de lista): o que está fora da tela não é desenhado.
   Medido: tela de referências com 300 documentos, CPU 4× mais lenta — 580 ms → 241 ms (1.5.0: 386 ms). */
/* só na tela de referências (listas de centenas); no painel/diálogo, poucos itens aparecem já no primeiro quadro */
.tela-conhecimento .lista-refs > .item-ref { content-visibility: auto; contain-intrinsic-size: auto 54px; }
.ls-item { content-visibility: auto; contain-intrinsic-size: auto 46px; }

/* ============ 19. FERRAMENTAS 3.1 ============
   19a início personalizável · 19b paleta de comandos · 19c IA (destino e tempo) · 19d texto (sumário, localizar,
   contagem, ouvir) · 19e modelos · 19f comparar versões · 19g captura e caixa de ideias · 19h tarefas (lista,
   quadro, calendário, detalhe) · 19i caderno de erros · 19j saúde do app.
   Tudo em tokens (vale nos temas Claro/Escuro e nos clássicos); estados com ícone + texto, nunca só cor. */
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pag h1.titulo-tela { display: block; padding: 0; }
.tf-chip.atrasada, .tf-chip.prazo.atrasada { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 45%, transparent); }

/* ---- 19a. Início ---- */
.inicio-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bt-personalizar { flex: none; }
.inicio-principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.inicio-grade.sem-lado, .inicio-grade.so-lado { grid-template-columns: minmax(0, 1fr); }
.inicio-grade.so-lado .inicio-lado { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.lista-tarefas-inicio .item-mini { min-height: 44px; padding: 4px 8px; }
.item-mini .tit-mini { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-mini small { display: block; color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-mini .cresce { min-width: 0; }
.item-ideia a.cresce { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-ideia a.cresce:hover { text-decoration: underline; }
.estudo-hoje { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.estudo-hoje p { margin: 0; }
.personalizar-inicio section { margin-top: 10px; }
.personalizar-inicio h3 { font-size: 13.5px; margin: 0 0 6px; color: var(--texto-2); }
.lista-modulos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.item-modulo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); }
.item-modulo label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.item-modulo small { color: var(--texto-3); font-size: 12.5px; }
.item-modulo input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--realce); }

/* ---- 19b. Paleta de comandos ---- */
.pi-kbd { font: 600 11px/1 var(--fonte); color: var(--texto-3); border: 1px solid var(--borda); border-radius: 4px; padding: 3px 5px; margin-right: 6px; white-space: nowrap; }

/* ---- 19c. IA: para onde vai, quanto saiu, há quanto tempo ---- */
.ia-espera { display: flex; flex-direction: column; gap: 12px; }
.ia-tempo { font-variant-numeric: tabular-nums; color: var(--texto-3); font-size: 13px; flex: none; }
.ia-destino:empty { display: none; }
.ia-destino { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--raio-p); background: var(--sup); color: var(--texto-2); font-size: 13px; line-height: 1.45; }
.ia-destino .ic { flex: none; margin-top: 1px; }
.ia-destino.local .ic, .ia-destino.rede .ic { color: var(--ok); }
.ia-destino.nuvem .ic { color: var(--info, var(--realce)); }

/* ---- 19d. Texto: sumário, localizar e substituir, contagem, ouvir ---- */
.tx-corpo { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
.tx-corpo .tx-rolagem { flex: 1 1 auto; min-width: 0; }
.tx-sumario { flex: 0 0 240px; overflow: auto; border-right: 1px solid var(--borda); background: var(--painel); padding: 10px 8px 24px; }
.tx-sumario-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; font-size: 13px; color: var(--texto-2); }
.tx-sumario-lista { list-style: none; margin: 0; padding: 0; }
.tx-sumario-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--texto-2); font: inherit; font-size: 13.5px; line-height: 1.35; padding: 6px 8px; border-radius: var(--raio-p); cursor: pointer; }
.tx-sumario-item.nivel-2 { padding-left: 22px; font-size: 13px; color: var(--texto-3); }
.tx-sumario-item:hover { background: var(--sup-2); color: var(--texto); }
.tx-sumario-item.atual { color: var(--texto); font-weight: 600; box-shadow: inset 2px 0 0 var(--realce); background: var(--sup); }
.tx-sumario .dica { padding: 0 6px; font-size: 12.5px; }
.tx-busca { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--borda); background: var(--painel); }
.tx-busca-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tx-busca-ic { color: var(--texto-3); display: inline-grid; }
input.entrada.tx-busca-campo { flex: 1 1 200px; min-width: 0; height: 34px; }
.tx-busca-conta { font-size: 12.5px; color: var(--texto-3); min-width: 64px; font-variant-numeric: tabular-nums; }
.tx-busca.sem-resultado .tx-busca-conta { color: var(--perigo); }
.tx-busca.sem-resultado input.entrada.tx-busca-campo[type=search] { border-color: var(--perigo); }
.tx-aa { font-weight: 700; min-width: 34px; }
.tx-aa.ativo, .tx-aa[aria-pressed="true"] { background: var(--realce); color: var(--realce-texto); }
::highlight(carnet-busca) { background-color: color-mix(in srgb, var(--realce) 22%, transparent); }
::highlight(carnet-busca-atual) { background-color: var(--realce); color: var(--realce-texto); }
button.tx-contagem { font: inherit; font-size: 12px; cursor: pointer; }
button.tx-contagem:hover { color: var(--texto); border-color: var(--borda-forte); }
.tx-medidas { display: grid; grid-template-columns: auto auto; gap: 8px 24px; margin: 0; font-size: 14px; }
.tx-medidas dt { color: var(--texto-2); }
.tx-medidas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bt.falando { background: var(--realce); color: var(--realce-texto); }
.carta { position: relative; }
.carta .bt-ouvir { position: absolute; top: 8px; right: 8px; }
@media (max-width: 760px) {
  .tx-sumario { position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: min(280px, 82vw); box-shadow: var(--sombra); }
}

/* ---- 19e. Modelos ---- */
.modelos { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; min-height: 320px; }
.modelos-lista { display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow: auto; padding: 2px; }
.item-modelo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio); border: 1px solid transparent; cursor: pointer; }
.item-modelo:hover { background: var(--sup); }
.item-modelo.ativo { border-color: var(--realce); background: var(--sup); }
.item-modelo:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.item-modelo .q { color: var(--texto-2); flex: none; }
.item-modelo .cresce { display: flex; flex-direction: column; min-width: 0; }
.item-modelo small { color: var(--texto-3); font-size: 12px; }
.modelos-lado { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rot-previa { font-size: 12px; color: var(--texto-3); }
.modelos-previa.tx-folha { margin: 0; max-width: none; max-height: 52vh; overflow: auto; font-size: 13.5px; padding: 16px 20px; min-height: 0; }
.modelos-previa.tx-folha h2 { font-size: 16px; }
.modelos-previa.tx-folha h3 { font-size: 14px; }
@media (max-width: 760px) { .modelos { grid-template-columns: minmax(0, 1fr); } .modelos-previa.tx-folha { max-height: 30vh; } }

/* ---- 19f. Comparar versões ---- */
.comparar-escolha { align-items: flex-end; gap: 10px; }
.comparar-escolha .campo { flex: 1 1 220px; min-width: 0; margin: 0; }
.seta-diff { color: var(--texto-3); padding-bottom: 10px; }
.resumo-diff { font-weight: 600; margin: 4px 0 8px; }
.diff { max-height: 50vh; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--carta); }
.diff-texto { white-space: pre-wrap; line-height: 1.7; margin: 0; font-size: 14px; }
.diff ins { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--texto); text-decoration: underline; text-decoration-color: var(--ok); text-underline-offset: 3px; }
.diff del { background: color-mix(in srgb, var(--perigo) 14%, transparent); color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--perigo); }
.diff-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.diff-itens li { display: flex; gap: 10px; align-items: flex-start; }
.diff-itens li .cresce { display: flex; flex-direction: column; min-width: 0; }
.diff-itens small { color: var(--texto-3); }
.diff-sinal { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 14px; border: 1px solid var(--borda-forte); }
.diff-mais .diff-sinal { color: var(--ok); border-color: var(--ok); }
.diff-menos .diff-sinal { color: var(--perigo); border-color: var(--perigo); }
.diff-mudou .diff-sinal { color: var(--aviso); border-color: var(--aviso); }

/* ---- 19g. Captura e Caixa de ideias ---- */
textarea.entrada.captura-campo { width: 100%; min-height: 120px; resize: vertical; font: inherit; line-height: 1.5; }
.captura-linha { align-items: flex-end; }
textarea.entrada.captura-rapida { min-height: 46px; resize: vertical; font: inherit; line-height: 1.5; }
.ideias-lista { display: flex; flex-direction: column; gap: 10px; }
.ideia-cartao { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); }
.ideia-cartao.arquivada { opacity: .78; }
.ideia-corpo { min-width: 0; flex: 1 1 auto; }
.ideia-txt { margin: 0 0 6px; white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.ideia-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--texto-3); font-size: 12.5px; }
.ideia-acoes { display: flex; align-items: center; gap: 4px; flex: none; }
textarea.entrada.ideia-texto { width: 100%; min-height: 160px; font: inherit; line-height: 1.6; resize: vertical; }
.ideia-sub { font-size: var(--f-sub); margin: 22px 0 4px; }
.ideia-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; }
.bt.ideia-destino { display: flex; align-items: flex-start; gap: 10px; text-align: left; height: auto; min-height: 56px; padding: 10px 12px; white-space: normal; }
.ideia-destino .cresce { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ideia-destino small { color: var(--texto-3); font-size: 12px; font-weight: 400; }
.ideia-destino .q { color: var(--texto-2); flex: none; }
@media (max-width: 760px) { .ideia-cartao { flex-direction: column; } .ideia-acoes { align-self: flex-end; } }

/* ---- 19h. Tarefas ---- */
.tf-pag { max-width: 1120px; margin: 0 auto; padding: 22px 28px 64px; display: flex; flex-direction: column; gap: 14px; }
.tf-cabeca { display: flex; flex-direction: column; gap: 12px; }
.tf-info { display: flex; flex-direction: column; gap: 10px; }
.tf-info-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.tf-numeros { justify-content: flex-start; color: var(--texto-2); font-size: 13.5px; }
.tf-progresso { flex: 1 1 160px; max-width: 320px; }
.tf-objetivo { flex: 1 1 320px; min-width: 0; text-align: left; border: 1px dashed transparent; background: none; font: inherit; font-size: 15px; color: var(--texto); padding: 6px 8px; border-radius: var(--raio-p); cursor: pointer; line-height: 1.45; }
.tf-objetivo:hover { border-color: var(--borda-forte); background: var(--sup); }
.tf-objetivo.vazio { color: var(--texto-3); font-style: italic; }
.tf-barra { display: flex; flex-direction: column; gap: 8px; }
.tf-linha-nova { display: flex; gap: 8px; }
input.entrada.tf-nova { height: 40px; }
.tf-dica { margin: 0; font-size: 12.5px; }
.tf-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input.entrada.tf-busca { flex: 1 1 200px; min-width: 0; max-width: 340px; height: 34px; }
select.entrada.tf-sel { height: 34px; width: auto; max-width: 100%; padding-right: 28px; }
.tf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--texto-2); cursor: pointer; min-height: 34px; }
.tf-check input { width: 17px; height: 17px; accent-color: var(--realce); }
.tf-corpo { min-width: 0; }
.tf-lista { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--carta); overflow: hidden; }
.tf-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 52px; border-bottom: 1px solid var(--borda); cursor: pointer; }
.tf-item:last-child { border-bottom: 0; }
.tf-item:hover { background: var(--sup); }
.tf-item:focus-visible, .tf-cartao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.tf-item.st-feito .tf-titulo, .tf-cartao.st-feito .tf-titulo { text-decoration: line-through; color: var(--texto-3); }
.tf-marca { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--borda-forte); background: none; display: grid; place-items: center; color: transparent; cursor: pointer; padding: 0; }
.tf-marca:hover { border-color: var(--realce); color: var(--texto-3); }
.tf-marca[aria-checked="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.tf-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tf-titulo { overflow-wrap: anywhere; line-height: 1.4; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tf-chips:empty { display: none; }
.tf-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto-2); background: var(--sup); white-space: nowrap; max-width: 100%; }
.tf-chip span { overflow: hidden; text-overflow: ellipsis; }
.tf-chip.prio-3 { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 45%, transparent); }
.tf-chip.prio-2 { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }
.tf-chip.prazo.hoje { color: var(--realce); border-color: var(--realce-borda, var(--realce)); font-weight: 600; }
.tf-chip.etq { background: none; }
.tf-status { flex: none; font-size: 12px; color: var(--texto-3); min-width: 62px; text-align: right; }
.tf-sec-concl { padding: 8px 12px; font-size: 12.5px; color: var(--texto-3); background: var(--sup); border-bottom: 1px solid var(--borda); }
.tf-quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tf-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--borda); min-width: 0; }
.tf-col-cab { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; color: var(--texto-2); }
.tf-col-cab b { color: var(--texto); font-size: 14px; }
.tf-col-cab .n { font-size: 12px; color: var(--texto-3); margin-right: auto; }
.tf-col.st-fazendo .tf-col-cab span:first-child { color: var(--realce); }
.tf-col.st-feito .tf-col-cab span:first-child { color: var(--ok); }
.tf-col-lista { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.tf-col-vazia { margin: 8px 4px; font-size: 12.5px; }
.tf-cartao { display: flex; gap: 8px; align-items: flex-start; padding: 10px 8px 10px 4px; border-radius: var(--raio); background: var(--carta); border: 1px solid var(--borda); cursor: pointer; }
.tf-cartao:hover { border-color: var(--borda-forte); }
.tf-cartao.arrastando { opacity: .35; }
.tf-alca { flex: none; color: var(--texto-3); cursor: grab; touch-action: none; padding: 2px; border-radius: 4px; display: grid; place-items: center; min-width: 24px; min-height: 32px; }
.tf-alca:active { cursor: grabbing; }
.tf-fantasma { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; box-shadow: var(--sombra); transform-origin: 0 0; opacity: .95; }
.tf-marcador { height: 3px; border-radius: 2px; background: var(--realce); margin: -2px 0; }
.tf-calendario { display: flex; flex-direction: column; gap: 10px; }
.tf-cal-cab { display: flex; align-items: center; gap: 8px; }
.tf-cal-mes { margin: 0 6px; font-size: var(--f-sub); min-width: 180px; text-align: center; }
.tf-cal { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--carta); }
.tf-cal-semana, .tf-cal-linha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tf-cal-dsem { padding: 6px 8px; font-size: 12px; color: var(--texto-3); background: var(--sup); border-bottom: 1px solid var(--borda); }
.tf-cal-dia { min-height: 96px; padding: 4px; border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tf-cal-linha .tf-cal-dia:last-child { border-right: 0; }
.tf-cal-dia.fora { background: var(--sup); }
.tf-cal-dia.passado .tf-cal-num { color: var(--texto-3); }
.tf-cal-num { align-self: flex-start; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-2); min-width: 28px; min-height: 26px; border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; }
.tf-cal-num:hover { background: var(--sup-2); }
.tf-cal-dia.hoje .tf-cal-num { background: var(--realce); color: var(--realce-texto); }
.tf-cal-tarefa { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--borda-forte); background: var(--sup); font: inherit; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 3px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tf-cal-tarefa:hover { background: var(--sup-2); }
.tf-cal-tarefa.alta { border-left-color: var(--perigo); }
.tf-cal-tarefa.atrasada { color: var(--perigo); }
.tf-cal-tarefa.st-feito { text-decoration: line-through; color: var(--texto-3); border-left-color: var(--ok); }
.tf-cal-mais { border: 0; background: none; font: inherit; font-size: 12px; color: var(--realce); text-align: left; padding: 2px 6px; cursor: pointer; }
.tf-sem-prazo { display: flex; flex-direction: column; gap: 6px; }
.tf-sem-prazo b { font-size: 13px; color: var(--texto-2); }
.tf-chips-tarefas { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-chips-tarefas .tf-cal-tarefa { width: auto; max-width: 280px; }
.tf-projetos { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-projeto { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--carta); color: var(--texto); text-decoration: none; font-size: 13px; max-width: 100%; }
.tf-projeto:hover { border-color: var(--borda-forte); }
.tf-projeto .cresce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-projeto .n { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.tf-detalhe { display: flex; flex-direction: column; gap: 4px; }
input.entrada.tf-det-titulo { font-size: 17px; font-weight: 600; height: 42px; margin-bottom: 6px; }
.tf-det-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
.tf-det-grade > .campo:first-child { grid-column: 1 / -1; }
.tf-det-grade .campo { margin-bottom: 8px; }
textarea.entrada.tf-notas { width: 100%; font: inherit; line-height: 1.5; resize: vertical; min-height: 90px; }
.tf-subs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.tf-sub { display: flex; align-items: center; gap: 8px; }
.tf-sub input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--realce); }
input.entrada.tf-sub-txt { flex: 1 1 auto; min-width: 0; height: 32px; }
.tf-sub.feita input.entrada.tf-sub-txt { text-decoration: line-through; color: var(--texto-3); }
.tf-docs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.tf-doc { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tf-doc a { color: var(--link); }
.tf-doc.quebrado { color: var(--perigo); }
.tf-hist summary { cursor: pointer; color: var(--texto-2); font-size: 13.5px; padding: 6px 0; }
.tf-hist-lista { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; font-size: 13px; }
.tf-hist-lista li { display: flex; gap: 10px; }
.tf-hist-lista time { color: var(--texto-3); flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .tf-quadro { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 6px; } }
@media (max-width: 760px) {
  .tf-pag { padding: 14px 12px 90px; }
  .tf-quadro { grid-template-columns: repeat(3, 82vw); overflow-x: auto; scroll-snap-type: x mandatory; }
  .tf-col { scroll-snap-align: start; }
  .tf-det-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tf-cal-dia { min-height: 64px; padding: 2px; }
  .tf-cal-tarefa { font-size: 11px; padding: 2px 4px; }
  .tf-cal-mes { min-width: 0; flex: 1 1 auto; }
  .tf-status { display: none; }
  .tf-item, .tf-cartao { min-height: var(--toque); }
}

/* ---- 19i. Caderno de erros ---- */
.erros-graficos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.erros-graficos h3 { font-size: 13px; color: var(--texto-2); margin: 0 0 8px; }
.erros-semanas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; padding-bottom: 18px; position: relative; }
.erros-barra { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.erros-barra i { display: block; background: var(--realce); border-radius: 3px 3px 0 0; min-height: 0; }
.erros-barra small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--texto-3); }
.erros-motivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.erros-motivos li { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--borda); }
.erros-motivos .cresce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.erros-motivos b { font-variant-numeric: tabular-nums; }
.erros-lista { display: flex; flex-direction: column; gap: 10px; }
.erro-cartao { padding: 14px 16px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--carta); display: flex; flex-direction: column; gap: 6px; box-shadow: inset 3px 0 0 var(--perigo); }
.erro-cartao.est-revisado { box-shadow: inset 3px 0 0 var(--aviso); }
.erro-cartao.est-dominado { box-shadow: inset 3px 0 0 var(--ok); }
.erro-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.erro-cab .dica { margin-left: auto; font-size: 12px; }
.erro-pergunta { margin: 0; font-weight: 600; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.erro-linha { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.erro-nota { color: var(--texto-2); }
.erro-alts { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.erro-alts li.correta { color: var(--ok); font-weight: 600; }
.erro-alts li.marcada { color: var(--perigo); text-decoration: line-through; }
.erro-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.erros-revisao { display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.erros-revisao .erro-pergunta { font-size: 17px; }
.aviso-caderno:empty { display: none; }
@media (max-width: 900px) { .erros-graficos { grid-template-columns: minmax(0, 1fr); } }

/* ---- 19j. Saúde do app ---- */
.saude { max-width: 860px; }
.saude-resumo { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 18px; }
.saude-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--carta); }
.saude-item .cresce { min-width: 0; }
.saude-item .dica { margin-top: 2px; }
.saude-ic { flex: none; display: grid; margin-top: 1px; }
.saude-item.ok .saude-ic { color: var(--ok); }
.saude-item.atencao .saude-ic { color: var(--aviso); }
.saude-item.erro { border-color: var(--perigo); }
.saude-item.erro .saude-ic { color: var(--perigo); }
.saude-item.info .saude-ic { color: var(--info, var(--realce)); }
.saude-bloco .saude-item { margin-bottom: 6px; }
.saude-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; margin: 0 0 12px; font-size: 14px; }
.saude-dl dt { color: var(--texto-2); }
.saude-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.saude-erros { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.saude-erros li { display: flex; gap: 10px; font-size: 12.5px; align-items: baseline; }
.saude-erros time { color: var(--texto-3); flex: none; font-variant-numeric: tabular-nums; }
.saude-erros code { font-family: var(--fonte-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.saude-aviso-seg { border-left: 3px solid var(--aviso); padding: 6px 10px; background: var(--sup); }
:root[data-movimento="reduzido"] .tf-fantasma { transition: none; }
input.entrada.busca-erros { flex: 1 1 200px; min-width: 0; max-width: 340px; height: 34px; }

/* ============ 20. VIVO (3.2): cor por tipo, painel do dia, resposta a cada gesto, conquistas, ilustrações ============
   20a tokens (cor de cada tipo de documento, festa) · 20b fichas e botões com profundidade · 20c painel "Seu dia" e anéis
   20d resposta imediata (visto, contagens, salvo) · 20e conquistas (aviso, pedacinhos, mural) · 20f telas vazias ilustradas
   20g tarefas (quadro e lista) · 20h estudo · 20i barra do mapa em grupos · 20j navegação.
   Regras que continuam valendo: nada infinito em tela parada; menus, diálogos e avisos entram em ≤ 220 ms; a festa é a
   única exceção de duração (≤ 900 ms) e não recebe clique; tudo respeita os três níveis de movimento. */

/* ---- 20a. Tokens ---- */
:root { --d-festa: 900ms; --vv-ouro: #f5c451; }
/* cor de cada tipo de documento (só no estilo pro; os temas clássicos já têm as suas em --c-*).
   Uso: ícone e fundo suave do ícone. A cor nunca é a única pista — o ícone e o rótulo dizem o tipo. */
:root[data-tema="claro-pro"] {
  --tp-mapa: #c2410c; --tp-texto: #2457c5; --tp-planilha: #1f7a45; --tp-lista: #a16207; --tp-tarefas: #6a4fc3; --tp-ideia: #b45309; --tp-erros: #c0362c;
  --vv-brilho: color-mix(in srgb, var(--realce) 45%, transparent); --vv-c5: #6a4fc3;
}
:root[data-tema="escuro-pro"] {
  --tp-mapa: #f59e6b; --tp-texto: #8ab4f8; --tp-planilha: #6fcf97; --tp-lista: #e6c25a; --tp-tarefas: #b39cf5; --tp-ideia: #f4b860; --tp-erros: #f28b82;
  --vv-brilho: color-mix(in srgb, var(--realce) 55%, transparent); --vv-c5: #b39cf5; --vv-ouro: #f5c451;
}
:root[data-estilo="pro"] .cor-mapa { --tp: var(--tp-mapa); }
:root[data-estilo="pro"] .cor-texto { --tp: var(--tp-texto); }
:root[data-estilo="pro"] .cor-planilha { --tp: var(--tp-planilha); }
:root[data-estilo="pro"] .cor-lista { --tp: var(--tp-lista); }
:root[data-estilo="pro"] .cor-tarefas { --tp: var(--tp-tarefas); }
:root[data-estilo="pro"] .cor-ideia { --tp: var(--tp-ideia); }
:root[data-estilo="pro"] .cor-erros { --tp: var(--tp-erros); }
:root[data-estilo="pro"] .bt.novo[data-novo="mapa"] { --tp: var(--tp-mapa); }
:root[data-estilo="pro"] .bt.novo[data-novo="texto"] { --tp: var(--tp-texto); }
:root[data-estilo="pro"] .bt.novo[data-novo="planilha"] { --tp: var(--tp-planilha); }
:root[data-estilo="pro"] .bt.novo[data-novo="lista"] { --tp: var(--tp-lista); }
:root[data-estilo="pro"] .bt.novo[data-novo="tarefas"] { --tp: var(--tp-tarefas); }
:root[data-estilo="pro"] .bt.novo[data-novo="ia"] { --tp: var(--realce); }

/* ---- 20b. Fichas, botões e blocos com profundidade (estilo pro) ---- */
/* o ícone do tipo ganha uma pastilha na cor do tipo */
:root[data-estilo="pro"] .cartao .cab .q[class*="cor-"], :root[data-estilo="pro"] .continuar .q[class*="cor-"],
:root[data-estilo="pro"] .item-mini .q[class*="cor-"] {
  color: var(--tp, var(--texto-2)); background: color-mix(in srgb, var(--tp, var(--texto-3)) 13%, transparent);
}
:root[data-estilo="pro"] .item-mini .q[class*="cor-"] { width: 26px; height: 26px; border-radius: var(--r-s); display: grid; place-items: center; flex: none; }
:root[data-estilo="pro"] .cartoes .cartao .tipo-doc { color: var(--tp, var(--texto-3)); }
:root[data-estilo="pro"] .cartao.tipo-mapa { --tp: var(--tp-mapa); } :root[data-estilo="pro"] .cartao.tipo-texto { --tp: var(--tp-texto); }
:root[data-estilo="pro"] .cartao.tipo-planilha { --tp: var(--tp-planilha); } :root[data-estilo="pro"] .cartao.tipo-lista { --tp: var(--tp-lista); }
:root[data-estilo="pro"] .cartao.tipo-tarefas { --tp: var(--tp-tarefas); } :root[data-estilo="pro"] .cartao.tipo-ideia { --tp: var(--tp-ideia); }
/* ficha em grade: um filete na cor do tipo aparece no topo ao passar o mouse; a ficha sobe 2 px (só movimento completo) */
:root[data-estilo="pro"] .cartoes .cartao { position: relative; overflow: hidden; }
:root[data-estilo="pro"] .cartoes .cartao::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tp, var(--realce));
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-media) var(--c-padrao);
}
:root[data-estilo="pro"] .cartoes .cartao:hover::before, :root[data-estilo="pro"] .cartoes .cartao:focus-visible::before { transform: scaleX(1); }
:root[data-estilo="pro"] .cartoes .cartao { transition: border-color var(--d-rapida) var(--c-padrao), background-color var(--d-rapida) var(--c-padrao), transform var(--d-media) var(--c-padrao), box-shadow var(--d-media) var(--c-padrao); }
:root[data-estilo="pro"][data-movimento="completo"] .cartoes .cartao:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
:root[data-estilo="pro"] .lista-docs .cartao.linha-doc { transition: background-color var(--d-rapida) var(--c-padrao); }
/* botões de criar: ícone na cor do tipo, numa pastilha; ao passar o mouse a pastilha acende */
:root[data-estilo="pro"] .bt.novo .q { width: 24px; height: 24px; margin-left: -4px; border-radius: var(--r-s); color: var(--tp, var(--texto-2)); background: color-mix(in srgb, var(--tp, var(--texto-3)) 12%, transparent); transition: background-color var(--d-rapida), color var(--d-rapida), transform var(--d-media) var(--c-padrao); }
:root[data-estilo="pro"] .bt.novo:hover .q { background: var(--tp, var(--realce)); color: var(--carta); }
:root[data-estilo="pro"][data-movimento="completo"] .bt.novo:hover .q { transform: rotate(-6deg) scale(1.06); }
:root[data-estilo="pro"] .bt.novo.plano .q { background: none; }
/* botão principal: um leve relevo (luz de cima) e, ao passar o mouse, a sombra na cor do destaque */
:root[data-estilo="pro"] .bt.prim {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(15, 18, 22, .14);
  transition: background-color var(--d-rapida) var(--c-padrao), box-shadow var(--d-media) var(--c-padrao), transform var(--d-micro) ease-out;
}
:root[data-estilo="pro"] .bt.prim:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px -6px color-mix(in srgb, var(--realce) 70%, transparent); }
:root[data-estilo="pro"] .bt.prim:active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
:root[data-tema="escuro-pro"] .bt.prim { background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%); }
/* "Continuar de onde parou": a ficha mais importante da tela ganha uma faixa na cor do tipo */
:root[data-estilo="pro"] .continuar { position: relative; overflow: hidden; border-radius: var(--r-l); }
:root[data-estilo="pro"] .continuar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tp-texto); }
:root[data-estilo="pro"] .continuar:has(.cor-mapa)::before { background: var(--tp-mapa); } :root[data-estilo="pro"] .continuar:has(.cor-planilha)::before { background: var(--tp-planilha); }
:root[data-estilo="pro"] .continuar:has(.cor-lista)::before { background: var(--tp-lista); } :root[data-estilo="pro"] .continuar:has(.cor-tarefas)::before { background: var(--tp-tarefas); }
:root[data-estilo="pro"] .continuar .q[class*="cor-"] { width: 44px; height: 44px; border-radius: var(--r-m); }
/* barras de progresso: o preenchimento leva um degradê do destaque para o verde e anda ao mudar */
:root[data-estilo="pro"] .progresso > i { background: linear-gradient(90deg, var(--realce), color-mix(in srgb, var(--realce) 55%, var(--ok))); transition: width 520ms var(--c-padrao); }
:root[data-estilo="pro"][data-movimento="completo"] .meta-dia .meta-barra > i { animation: encher 760ms var(--c-padrao) 120ms backwards; }

/* ---- 20c. Painel "Seu dia" e anéis ---- */
.painel-dia {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: center;
  padding: var(--e-5) var(--e-6); border: 1px solid var(--borda); border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--realce) 11%, var(--carta)) 0%, var(--carta) 58%), var(--carta);
}
.painel-dia::after { content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tp-tarefas, var(--realce)) 10%, transparent), transparent 70%); pointer-events: none; }
.dia-cab { min-width: 0; position: relative; z-index: 1; }
.dia-data { color: var(--texto-3); font-size: 13px; font-weight: 500; }
.dia-ola { margin: 2px 0 4px; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.dia-frase { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.45; max-width: 64ch; }
.dia-aneis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); position: relative; z-index: 1; }
.dia-item {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: var(--r-l); color: var(--texto); text-decoration: none;
  transition: background-color var(--d-rapida) var(--c-padrao), transform var(--d-media) var(--c-padrao);
}
.dia-item:hover { background: var(--sup-2); }
:root[data-movimento="completo"] .dia-item:hover { transform: translateY(-1px); }
.dia-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.dia-txt { display: flex; flex-direction: column; min-width: 0; }
.dia-rot { font-size: 12.5px; color: var(--texto-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia-det { font-size: 13px; color: var(--texto-2); line-height: 1.3; }
.dia-num { font-size: 20px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-right: 1px; }
.dia-chama { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sup-2); color: var(--texto-3); }
.dia-chama.acesa { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 16%, transparent); }
:root[data-movimento="completo"] .dia-chama.acesa .ic { animation: vvAcender 700ms var(--c-mola) 300ms backwards; transform-origin: 50% 90%; }
@keyframes vvAcender { from { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } to { transform: none; } }
.d-meta { --anel: var(--realce); } .d-tarefas { --anel: var(--tp-tarefas, var(--realce)); } .d-revisoes { --anel: var(--ok); }
.vv-anel { position: relative; flex: none; display: grid; place-items: center; }
.vv-anel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vv-anel-fundo { fill: none; stroke: var(--sup-3); }
.vv-anel-arco { fill: none; stroke: var(--anel, var(--realce)); stroke-linecap: round; }
.vv-anel-centro { position: relative; display: grid; place-items: center; color: var(--anel, var(--realce)); font-weight: 700; font-variant-numeric: tabular-nums; }
.vv-anel.cheio .vv-anel-arco { stroke: var(--ok); }
.vv-anel.cheio .vv-anel-centro { color: var(--ok); }
.dia-item .vv-anel { width: 56px !important; height: 56px !important; }
.dia-item.cheio .dia-num { color: var(--ok); }
.anel-fim { margin: 0 auto 6px; --anel: var(--realce); }
.anel-fim .vv-anel-n { font-size: 22px; color: var(--texto); }
/* com o painel do dia à vista, o subtítulo do Início repetiria a saudação */
.inicio:has(.painel-dia) .inicio-sub { display: none; }

@media (max-width: 760px) {
  .painel-dia { padding: var(--e-4); gap: var(--e-3); }
  .dia-aneis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia-item { padding: 6px; gap: 8px; }
  .dia-item .vv-anel, .dia-chama { width: 46px !important; height: 46px !important; }
  .dia-ola { font-size: 21px; }
  .dia-rot { white-space: normal; }
}

/* ---- 20d. Resposta imediata ---- */
/* o visto se desenha ao concluir (tarefa, item de lista); o anel verde se espalha uma vez */
@keyframes vvVisto { to { stroke-dashoffset: 0; } }
@keyframes vvOnda { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 0%, transparent); } }
.vv-feito .ic path, .vv-feito .ic polyline { stroke-dasharray: 24; stroke-dashoffset: 24; animation: vvVisto 300ms var(--c-padrao) 40ms forwards; }
.tf-marca.vv-feito, .ls-marca.vv-feito { animation: vvOnda 560ms ease-out; }
:root[data-tema="escuro-pro"] .tf-marca[aria-checked="true"] { color: #0b2a18; }
/* o aviso de sucesso: o visto do ícone se desenha */
.aviso.ok .ic-aviso svg path { stroke-dasharray: 10; stroke-dashoffset: 10; animation: vvVisto 280ms var(--c-padrao) 120ms forwards; }
/* "Salvo": o ponto verde acusa a gravação */
@keyframes vvSalvo { 0% { transform: scale(1); } 40% { transform: scale(1.9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); } 100% { transform: scale(1); } }
:root[data-movimento="completo"] .estado-salvo.acabou::before { animation: vvSalvo 520ms var(--c-padrao); }
:root[data-movimento="suave"] .estado-salvo.acabou::before { animation: aparecer 300ms ease-out; }
/* contagem da navegação que mudou */
@keyframes vvContagem { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
:root[data-movimento="completo"] .nav-app .item-lado .n.mudou { animation: vvContagem 420ms var(--c-mola); display: inline-block; }

/* ---- 20e. Conquistas ---- */
.vv-camada { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; contain: strict; }
.vv-p { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 2px; will-change: transform, opacity; }
.vv-p.ponto { width: 9px; height: 9px; border-radius: 50%; }
.vv-p.risco { width: 4px; height: 14px; border-radius: 2px; }
.vv-voo { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--realce); color: var(--realce-texto); box-shadow: var(--elev-2, var(--sombra)); }
.vv-fantasma { position: fixed; margin: 0 !important; z-index: 9998; pointer-events: none; box-sizing: border-box; background: var(--carta); border-radius: var(--r-m); }
.vv-fantasma .tf-titulo, .vv-fantasma .ls-texto { text-decoration: line-through; text-decoration-color: var(--ok); color: var(--texto-3); }
.vv-fantasma .tf-marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.aviso.conquista { background: linear-gradient(100deg, color-mix(in srgb, var(--vv-ouro) 22%, var(--aviso-fundo, var(--painel))) 0%, var(--aviso-fundo, var(--painel)) 62%); }
.aviso.conquista .ic-aviso { color: var(--vv-ouro); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--vv-ouro) 18%, transparent); flex: none; }
.aviso.conquista .cresce { font-weight: 600; }
:root[data-movimento="completo"] .aviso.conquista .ic-aviso { animation: vvTrofeu 620ms var(--c-mola) 80ms backwards; }
@keyframes vvTrofeu { from { transform: scale(.3) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } to { transform: none; } }
:root[data-estilo="pro"] .aviso.conquista { border-color: color-mix(in srgb, var(--vv-ouro) 40%, transparent); }
/* mural do Progresso */
.mural-conquistas { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-2); }
.conquista-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r-l); background: var(--carta); }
.cq-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #8a5a00; background: color-mix(in srgb, var(--vv-ouro) 26%, transparent); }
:root[data-tema="escuro-pro"] .cq-ic, :root[data-tema="escuro"] .cq-ic, :root[data-tema="couro"] .cq-ic { color: var(--vv-ouro); }
.cq-txt { display: flex; flex-direction: column; min-width: 0; }
.cq-txt b { font-size: 14px; }
.cq-txt span { font-size: 12.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cq-quando { font-size: 12px; color: var(--texto-3); white-space: nowrap; align-self: start; }
:root[data-movimento="completo"] .conquista-item { animation: subirItem 300ms var(--c-padrao) backwards; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }

/* ---- 20f. Telas vazias ilustradas ---- */
.vazio-desenho { display: grid; place-items: center; color: var(--texto-3); }
.ilustracao { width: 160px; height: auto; max-width: 100%; overflow: visible; }
.ilustracao .il-traco { stroke: var(--texto-3); stroke-width: 2; }
.ilustracao .il-fraco { opacity: .5; }
.ilustracao .il-grosso { stroke-width: 3; }
.ilustracao .il-pontos { stroke-dasharray: 3 6; }
.ilustracao .il-papel { fill: var(--carta); }
.ilustracao .il-acento { stroke: var(--realce); stroke-width: 2; }
.ilustracao .il-acento-f { fill: var(--realce-suave, color-mix(in srgb, var(--realce) 12%, transparent)); }
.ilustracao .il-sombra { fill: var(--sup-2); stroke: none; }
.ilustracao .il-brilho { fill: var(--vv-ouro); stroke: none; transform-box: fill-box; transform-origin: center; }
:root[data-tema="claro-pro"] .ilustracao .il-brilho, :root[data-tema="claro"] .ilustracao .il-brilho, :root[data-tema="marmore"] .ilustracao .il-brilho, :root[data-tema="jornal"] .ilustracao .il-brilho { fill: #e0a526; }
:root[data-movimento="completo"] .vazio-desenho .ilustracao { animation: vvSurgir 480ms var(--c-padrao) backwards; }
:root[data-movimento="completo"] .vazio-desenho .il-brilho { animation: vvBrilho 700ms var(--c-mola) backwards; }
:root[data-movimento="completo"] .vazio-desenho .il-brilho:nth-of-type(2) { animation-delay: 140ms; }
:root[data-movimento="completo"] .vazio-desenho .il-brilho:nth-of-type(3) { animation-delay: 260ms; }
@keyframes vvSurgir { from { opacity: 0; transform: translateY(calc(10px * var(--mov))); } to { opacity: 1; transform: none; } }
@keyframes vvBrilho { from { transform: scale(0) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }
.vazio-bib .vazio-desenho { margin-bottom: 2px; }
:root[data-estilo="pro"] .vazio-bib:has(.vazio-desenho) { border-style: solid; border-color: var(--borda); background: var(--carta); padding: 28px 20px 30px; }
.vazio-bib.tudo-feito p { color: var(--texto); font-weight: 500; }
.vazio-ilustrado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 16px 24px; }
.vazio-ilustrado .vazio-titulo { margin: 4px 0 0; font-size: 17px; }
.vazio-ilustrado .vazio-texto { margin: 0; max-width: 52ch; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.vazio-ilustrado .vazio-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.vazio-compacto { border: 1px dashed var(--borda-forte); border-radius: var(--r-l); margin-bottom: var(--e-4); }
.vazio-compacto .ilustracao { width: 120px; }

/* ---- 20g. Tarefas ---- */
/* quadro: cada coluna tem a cor da sua situação no topo; o cartão sobe ao passar o mouse */
:root[data-estilo="pro"] .tf-col { border-top: 3px solid var(--borda-forte); }
:root[data-estilo="pro"] .tf-col.st-fazendo { border-top-color: var(--info, var(--realce)); }
:root[data-estilo="pro"] .tf-col.st-feito { border-top-color: var(--ok); }
:root[data-estilo="pro"] .tf-col.st-fazendo .tf-col-cab .ic { color: var(--info, var(--realce)); }
:root[data-estilo="pro"] .tf-col.st-feito .tf-col-cab .ic { color: var(--ok); }
:root[data-estilo="pro"] .tf-cartao { transition: border-color var(--d-rapida), box-shadow var(--d-media) var(--c-padrao), transform var(--d-media) var(--c-padrao); }
:root[data-estilo="pro"][data-movimento="completo"] .tf-cartao:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
:root[data-estilo="pro"] .tf-cartao.st-feito { opacity: .78; }
/* marca de concluir: maior alvo visual, o visto aparece ao passar o mouse */
.tf-marca { transition: background-color var(--d-rapida) var(--c-padrao), border-color var(--d-rapida) var(--c-padrao), color var(--d-rapida), transform var(--d-micro) ease-out; }
.tf-marca:active { transform: scale(.88); }
.tf-marca:hover:not([aria-checked="true"]) { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: var(--ok); color: var(--ok); }
/* progresso do projeto: o número ganha peso */
:root[data-estilo="pro"] .tf-progresso { height: 8px; }

/* ---- 20h. Estudo ---- */
.sessao-progresso { width: min(560px, 100%); margin: 0 auto 10px; height: 6px; }
.sessao-progresso > i { transition: width 420ms var(--c-padrao); }
:root[data-estilo="pro"] .flash .bt[data-nota] { transition: background-color var(--d-rapida), border-color var(--d-rapida), transform var(--d-micro) ease-out, box-shadow var(--d-media); }
:root[data-estilo="pro"] .flash .bt.n-errei:hover { background: color-mix(in srgb, var(--perigo) 10%, var(--carta)); }
:root[data-estilo="pro"] .flash .bt.n-dificil:hover { background: color-mix(in srgb, var(--aviso) 12%, var(--carta)); }
:root[data-estilo="pro"] .flash .bt.n-bom:hover { background: color-mix(in srgb, var(--ok) 12%, var(--carta)); }
:root[data-estilo="pro"] .flash .bt.n-facil:hover { background: color-mix(in srgb, var(--info, var(--realce)) 12%, var(--carta)); }
.veredito.certo .ic { color: var(--ok); }
:root[data-movimento="completo"] .veredito.certo { animation: vvSurgir 260ms var(--c-padrao); }
.alternativa.correta { transition: background-color var(--d-media), border-color var(--d-media); }

/* ---- 20i. Barra do mapa em grupos ---- */
.barra-grupo { display: flex; align-items: center; gap: 2px; flex: none; }
.barra-grupo + .barra-grupo { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--borda); }
.barra-grupo.recolhido { display: none; }
.barra:not(.com-mais) .bt-mais-barra { display: none; }
.barra .bt-mais-barra { margin-left: 4px; }
.menu button.marcado { font-weight: 600; }
.menu button .visto-menu { margin-left: auto; color: var(--realce); display: grid; }
.menu button:disabled { opacity: .45; cursor: not-allowed; }
.menu button:disabled:hover { background: none; }

/* ---- 20j. Navegação ---- */
/* o item ativo ganha um filete na cor do destaque, que cresce ao chegar */
.nav-app .item-lado.ativo::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--realce); }
:root[data-movimento="completo"] .nav-app .item-lado.ativo::before { animation: vvFilete var(--d-lenta) var(--c-padrao); transform-origin: 50% 50%; }
@keyframes vvFilete { from { transform: scaleY(0); } to { transform: none; } }
.nav-app.recolhida .item-lado.ativo::before { top: 9px; bottom: 9px; }
:root[data-estilo="pro"] .nav-app .item-lado:hover .ic-lado { color: var(--texto-2); }

/* movimento reduzido: nada da camada de festa aparece; o visto já nasce desenhado */
:root[data-movimento="reduzido"] .vv-camada { display: none; }
:root[data-movimento="reduzido"] .vv-feito .ic path, :root[data-movimento="reduzido"] .aviso.ok .ic-aviso svg path { stroke-dasharray: none; animation: none; }
@media print { .vv-camada, .painel-dia::after { display: none !important; } }

/* ============ 21. MAPA: PONTOS DE LIGAÇÃO (3.3, 19-mapa-pontos.js) ============
   Bolinhas nas bordas da ideia: tocar cria; puxar desenha a linha — soltar em outra ideia liga, no vazio cria ali.
   A bolinha tem o mesmo tamanho na tela em qualquer zoom (o JS aplica a escala) e no toque nunca fica menor que 32 px. */
.ponto-ligar, .ponto-ligar.mais-ideia {
  position: absolute; left: 0; top: 0; z-index: 8; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; transform-origin: 11px 11px; cursor: pointer; touch-action: none;
  background: var(--carta, #fff); color: var(--realce); border: 2px solid var(--realce);
  box-shadow: 0 1px 3px rgba(15, 18, 22, .18); transition: background-color var(--d-rapida, 140ms), color var(--d-rapida, 140ms), box-shadow var(--d-rapida, 140ms), opacity var(--d-rapida, 140ms);
}
.ponto-ligar .ic { pointer-events: none; }
.ponto-ligar:hover, .ponto-ligar.mais-ideia:hover, .ponto-ligar:focus-visible { background: var(--realce); color: var(--realce-texto); box-shadow: 0 0 0 5px color-mix(in srgb, var(--realce) 22%, transparent); }
.ponto-ligar.de-passagem { opacity: .62; }
.ponto-ligar.de-passagem:hover { opacity: 1; }
@keyframes pontoSurge { from { opacity: 0; } to { opacity: 1; } }
.ponto-ligar:not([hidden]) { animation: pontoSurge var(--d-rapida, 140ms) ease-out; }
.ponto-ligar.de-passagem:not([hidden]) { animation-name: pontoSurgeLeve; }
@keyframes pontoSurgeLeve { from { opacity: 0; } to { opacity: .62; } }
.ponto-linha { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 7; }
.ponto-linha path { fill: none; stroke: var(--realce); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ponto-linha circle { fill: var(--realce); }
.ponto-linha.sobre-alvo path { stroke-dasharray: none; }
.ponto-fantasma {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; transform-origin: 0 0; white-space: nowrap;
  padding: 8px 18px; border: 2px dashed var(--realce); border-radius: 10px; font-weight: 600; font-size: 14px;
  background: color-mix(in srgb, var(--realce) 9%, var(--carta, #fff)); color: var(--texto-2);
}
.ponto-dica {
  position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; white-space: nowrap; padding: 4px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; background: var(--aviso-fundo, #26292e); color: var(--aviso-texto, #f3f4f6); box-shadow: var(--elev-2, 0 4px 12px rgba(0, 0, 0, .2));
}
.mapa-area.puxando-ponto, .mapa-area.puxando-ponto .no { cursor: crosshair; }
.mapa-area.modo-lapis .ponto-ligar { display: none !important; }
.mapa-area .no.alvo-ligar { box-shadow: 0 0 0 3px var(--realce), 0 0 0 9px color-mix(in srgb, var(--realce) 22%, transparent); }
/* a pena (só post-its e textos livres) no estilo pro: o destaque da casa, sem madeira */
:root[data-estilo="pro"] .alca-ligar { background: var(--realce); color: var(--realce-texto); border: 2px solid var(--carta); box-shadow: var(--elev-2); }
@media print { .ponto-ligar, .ponto-linha, .ponto-fantasma, .ponto-dica { display: none !important; } }

/* ---- 21b. Estudo opcional (3.3): html[data-estudo] = "ativo" | "oculto" (ainda não estudou) | "nunca" (Ajustes) ---- */
:root[data-estudo="oculto"] .nav-app .nav-estudo, :root[data-estudo="nunca"] .nav-app .nav-estudo { display: none; }
:root[data-estudo="nunca"] .mapa-tela .barra-grupo[data-grupo="estudar"], :root[data-estudo="nunca"] .topo .bt[aria-label="Modo estudo"] { display: none; }
/* painel do dia de quem produz e organiza: três marcadores */
.dia-aneis.sem-estudo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dia-icone { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sup-2); color: var(--texto-2); }
.d-mexidos .dia-icone { color: var(--tp-texto, var(--realce)); background: color-mix(in srgb, var(--tp-texto, var(--realce)) 13%, transparent); }
.d-ideias .dia-icone { color: var(--tp-ideia, var(--aviso)); background: color-mix(in srgb, var(--tp-ideia, var(--aviso)) 14%, transparent); }
@media (max-width: 760px) {
  .dia-aneis.sem-estudo { grid-template-columns: minmax(0, 1fr); }
  .dia-icone { width: 46px; height: 46px; }
}
/* arrastar uma ideia: o alvo acende na cor de "ok" (vai virar ramo dele) */
.mapa-area .no.alvo-solta { box-shadow: 0 0 0 3px var(--ok), 0 0 0 9px color-mix(in srgb, var(--ok) 22%, transparent); }
/* a dica do mapa ficou maior na 3.3: em tela estreita ela quebra em linhas (e sobe acima do zoom) em vez de sair da tela */
@media (max-width: 760px) {
  .dica-mapa { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 24px); bottom: 64px; line-height: 1.45; }
}

/* ============ 22. CONFIABILIDADE E TRABALHO (3.4) ============ */
/* ---- 22a. Prévia da restauração: os dois modos lado a lado (um embaixo do outro no celular) ---- */
.previa-copia .previa-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0; }
.previa-copia .previa-modo { border: 1px solid var(--borda); border-radius: var(--r-m, 8px); padding: 10px 12px; background: var(--sup); min-width: 0; }
.previa-copia .previa-modo h3 { margin: 0 0 6px; font-size: var(--f-corpo, 14.5px); font-weight: 600; }
.previa-copia .previa-modo .lista-previa { columns: 1; max-height: none; margin: 0; padding-left: 18px; }
.previa-copia .previa-modo .lista-previa li + li { margin-top: 3px; }
.previa-copia .previa-modo:last-child { border-color: color-mix(in srgb, var(--perigo) 35%, var(--borda)); }
@media (max-width: 640px) { .previa-copia .previa-modos { grid-template-columns: minmax(0, 1fr); } }
/* ---- 22b. Saúde: resultado da conferência da cópia do app ---- */
.linha-copia.ruim { color: var(--perigo); }
/* ---- 22c. Início como centro de trabalho (3.4) ---- */
/* anotar uma ideia na hora: campo largo com o ícone da caixa e o botão de guardar */
.anotar-inicio { display: flex; align-items: center; gap: var(--e-2, 8px); padding: 6px 6px 6px 12px; border: 1px solid var(--borda); border-radius: var(--r-l, 10px); background: var(--carta); }
.anotar-inicio:focus-within { border-color: var(--realce-borda, var(--realce)); box-shadow: 0 0 0 3px var(--realce-suave, transparent); }
.anotar-inicio .anotar-ic { color: var(--tp-ideia, var(--aviso)); display: grid; place-items: center; flex: none; }
.anotar-inicio .anotar-campo { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 8px 4px; font-size: var(--f-corpo, 14.5px); }
.anotar-inicio .anotar-campo:focus { outline: none; box-shadow: none; }
.anotar-inicio .bt-anotar { flex: none; }
/* alerta da cópia do app incompleta, no bloco "Para hoje" */
.alerta-copia-app { display: flex; align-items: center; gap: var(--e-2, 8px); padding: 10px 12px; border-radius: var(--r-m, 8px); border: 1px solid color-mix(in srgb, var(--perigo) 40%, var(--borda)); color: var(--texto); background: color-mix(in srgb, var(--perigo) 7%, var(--carta)); }
.alerta-copia-app .q { color: var(--perigo); display: grid; }
/* "Seu dia" no celular: os marcadores lado a lado e compactos (antes ocupavam a primeira tela inteira) */
@media (max-width: 640px) {
  .painel-dia { gap: var(--e-2, 8px); padding: 14px 14px 10px; }
  .dia-frase { font-size: 13px; }
  .dia-aneis, .dia-aneis.sem-estudo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .dia-aneis:not(.sem-estudo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia-aneis.sem-estudo .dia-item { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 2px; }
  .dia-aneis.sem-estudo .dia-item .vv-anel, .dia-aneis.sem-estudo .dia-icone { width: 38px !important; height: 38px !important; }
  .dia-aneis.sem-estudo .dia-icone .ic { width: 18px; height: 18px; }
  .dia-aneis.sem-estudo .dia-txt { align-items: center; }
  .dia-aneis.sem-estudo .dia-rot { font-size: 12px; white-space: normal; line-height: 1.2; }
  .dia-aneis.sem-estudo .dia-det { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
  .dia-aneis.sem-estudo .dia-num { font-size: 18px; }
  /* o número fala por si ao lado do rótulo; a frase completa continua no nome acessível do item */
  .dia-aneis.sem-estudo .dia-det > span { display: none; }
}
/* ---- 22d. Integração: voltar ao documento de onde veio; "Citado em N" ---- */
.topo .bt-voltar.para-doc { display: inline-flex; align-items: center; gap: 2px; max-width: 220px; padding-inline: 6px 10px; }
.topo .bt-voltar.para-doc .voltar-doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--texto-2); }
.topo .bt-citado { white-space: nowrap; }
@media (max-width: 640px) { .topo .bt-citado span { display: none; } }
/* ---- 22e. Listas longas (3.4): o navegador só calcula e pinta as linhas que estão à vista ----
   content-visibility: auto pula layout e pintura das linhas fora da tela (continuam no DOM, na leitura de tela,
   na busca do navegador e no foco por teclado); "auto" no tamanho guarda a altura real de cada linha já vista. */
.tf-lista > .tf-item { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.lista-docs > .cartao { content-visibility: auto; contain-intrinsic-size: auto 56px; }
@media print { .tf-lista > .tf-item, .lista-docs > .cartao { content-visibility: visible; } }
/* ---- 22f. Mapas grandes (3.4): a posição de cada ideia não é herdada pelos filhos dela ----
   --tx/--ty/--rot só servem à animação da própria ideia (ou post-it). Registradas como não herdadas, mudar a
   posição de uma ideia não obriga o navegador a recalcular o estilo de tudo o que está dentro dela.
   Navegador sem @property: continua funcionando como antes (só mais devagar em mapas grandes). */
@property --tx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ty { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* ---- 22g. Mapa: mover uma ideia pelo teclado (Ctrl+M) ---- */
.mapa-area .no.movendo-origem { outline: 2px dashed var(--realce); outline-offset: 3px; }
.mapa-area.movendo-ideia .no:not(.movendo-origem) { cursor: copy; }
/* ---- 22h. Contraste (3.4): teclas de atalho herdavam a cor apagada do campo e ficavam abaixo de 4,5:1 no escuro ---- */
.campo-pesquisa kbd, .nav-pesquisa kbd { color: var(--texto-2); }
/* ---- 22i. Áreas roláveis alcançáveis pelo teclado (3.4): o anel aparece só para quem chega pelo teclado ---- */
.tx-rolagem:focus { outline: none; }
.tx-rolagem:focus-visible, .tela[role="region"]:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.mapa-nos { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* ---- 23. Editor de mapas no nível do Miro (3.5) ---- */
/* 23a. largura dada pela pessoa (a largura em si vem do estilo da ideia; aqui só sai o limite de 300 px) */
.no.com-largura { max-width: none; }
/* 23b. travada: cadeado no canto (posição absoluta — não muda o tamanho medido da ideia) */
.no .trava-no { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
  background: var(--painel); color: var(--texto-2); border: 1px solid var(--borda-forte); box-shadow: 0 1px 2px rgba(15, 18, 22, .15); pointer-events: none; }
.no.travado { cursor: default; }
/* 23c. arrastar ao vivo: a ideia e o ramo andam por cima; quem fica não reage ao ponteiro */
.mapa-area .no.arrastando-no, .mapa-area .elemento.arrastando-no { z-index: 6; opacity: .92; box-shadow: 0 10px 26px rgba(15, 18, 22, .22); transition: none; }
/* a mãozinha fechada fica só na ideia pega: mudar o cursor da área (propriedade herdada) ou uma regra "área com
   classe X → toda .no" faria o navegador recalcular o estilo das mil ideias de um mapa grande ao começar e ao
   terminar o arrasto (medido: ~100 ms por troca, com a CPU normal) */
.mapa-area .no.arrastando-no { cursor: grabbing; }
/* durante o arrasto somem os controles presos à posição antiga (barra de contexto, alças, bolinhas, nota) */
.mapa-area.arrastando-ideias .no-barra, .mapa-area.arrastando-ideias .alca-largura, .mapa-area.arrastando-ideias .ponto-ligar,
.mapa-area.arrastando-ideias .alca-ligar, .mapa-area.arrastando-ideias .nota-flutuante { visibility: hidden; }
/* 23d. guias de alinhamento (linha fina no tom do destaque, sempre com 1 px na tela) */
.guias-mapa { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 9; opacity: 0; }
.guias-mapa.ativa { opacity: 1; }
.guias-mapa path { fill: none; stroke: var(--realce); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
/* 23e. contorno do grupo selecionado */
.ligacoes .grupo-caixa { stroke: var(--realce); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; opacity: .75; }
/* 23f. alça de largura (canto de baixo à direita da ideia selecionada) */
.alca-largura {
  position: absolute; left: 0; top: 0; z-index: 8; width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 0;
  display: grid; place-items: center; border-radius: 5px; transform-origin: 10px 10px; cursor: ew-resize; touch-action: none;
  background: var(--carta, #fff); color: var(--realce); border: 1.5px solid var(--realce); box-shadow: 0 1px 3px rgba(15, 18, 22, .18);
}
.alca-largura .ic { pointer-events: none; }
.alca-largura:hover, .alca-largura:focus-visible { background: var(--realce); color: var(--realce-texto); }
.mapa-area.modo-lapis .alca-largura { display: none !important; }
@media (pointer: coarse) { .alca-largura { width: 30px; height: 30px; margin: -15px 0 0 -15px; transform-origin: 15px 15px; } }
/* 23g. zoom: o número é um botão (100%) */
.mapa-zoom .zoom-pct { min-width: 46px; padding: 4px 2px; border: 0; background: transparent; border-radius: 4px; text-align: center; font: inherit; font-size: 12.5px;
  color: var(--texto-2); font-variant-numeric: tabular-nums; cursor: pointer; }
.mapa-zoom .zoom-pct:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); }
.mapa-zoom .zoom-pct:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
@media (max-width: 640px) { .mapa-zoom .bt[aria-label="Centralizar a ideia central"], .mapa-zoom .bt[aria-label="Voltar à vista anterior"] { display: none; } }
/* 23h. ligação: nome do tipo de relação no meio da linha (quando ela não tem texto próprio) */
.lig-rotulo.do-tipo { font-size: 12px; opacity: .9; }
/* 23i. painel Tópicos (árvore navegável) */
.topicos { display: flex; flex-direction: column; gap: 10px; }
.topicos-ajuda { margin: 0; font-size: 12px; color: var(--texto-2); }
.topicos-arvore, .topicos-arvore ul { list-style: none; margin: 0; padding: 0; }
.topicos-arvore ul { padding-left: 16px; border-left: 1px solid var(--borda); margin-left: 7px; }
.topico { outline: none; }
.topico > .topico-linha { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; line-height: 1.35; }
.topico > .topico-linha:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.topico[aria-selected="true"] > .topico-linha { background: color-mix(in srgb, var(--realce) 14%, transparent); }
.topico:focus-visible > .topico-linha { outline: 2px solid var(--foco); outline-offset: -2px; }
.topico-seta { flex: none; width: 12px; color: var(--texto-2); font-size: 11px; }
.topico-texto { min-width: 0; overflow-wrap: anywhere; }
.topico[aria-level="1"] > .topico-linha .topico-texto { font-weight: 700; }
.topico[aria-level="2"] > .topico-linha .topico-texto { font-weight: 600; }
.topico-conta, .topico-marca { flex: none; font-size: 11px; color: var(--texto-2); border: 1px solid var(--borda); border-radius: 999px; padding: 0 6px; }
.topicos-postits h4 { margin: 6px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.topicos-soltos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.topicos-soltos .bt { width: 100%; justify-content: flex-start; text-align: left; }
@media print { .guias-mapa, .alca-largura, .no .trava-no { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mapa-area .no.arrastando-no { box-shadow: none; } }
/* 23j. celular: o "100%" também com 40 px para o dedo; a barra da ligação (agora com tipo e forma) quebra em duas
   linhas em vez de passar da borda (mesmo corte de largura do bloco "celular" da casa) */
@media (max-width: 760px) {
  .mapa-zoom .zoom-pct { min-height: 40px; }
  .lig-barra, .no-barra { flex-wrap: wrap; max-width: calc(100vw - 16px); }
}

/* ============ 24. CARNET 4.0 — painel de trabalho (Início em cartões, rascunho, agenda, fichas, painel do documento) ============
   Referência pedida: um painel de produtividade (notas em leque, bloco de rascunho, calendário do dia, notas presas,
   tarefas com abas) e um editor com coluna de tipos à esquerda e "sobre o documento" à direita — com a identidade
   do Carnet: a serifa Fraunces (a do caderno clássico) nos títulos, papel pautado no rascunho, cor por tipo.
   Tudo no estilo "pro" (o clássico de madeira continua como estava). Regras:
   · cartões brancos de canto largo sobre um fundo neutro quente; borda fina, SEM sombra decorativa (regra 18c);
   · nada sobe nem ganha sombra ao passar o mouse; as fichas inclinadas só se endireitam (contrato 3.0 do hover);
   · nenhuma classe em ancestral muda propriedade herdada (lei 23c) — o painel do documento só muda margem;
   · contrastes: texto ≥ 4,5:1 nas superfícies novas (medido em tests/bancada_40.py).
   24a tokens · 24b grade do Início · 24c cartões · 24d abas · 24e fichas em leque · 24f notas presas · 24g agenda
   24h tarefas · 24i anotar + rascunho · 24j painel "Sobre este documento" · 24k navegação por tipo · 24l celular/tablet */

/* ---- 24a. Tokens ---- */
:root[data-estilo="pro"] { --fonte-serifa: "Fraunces", Georgia, "Times New Roman", serif; --r-cartao: 18px; --r-cartao-p: 12px; --painel-doc-w: 320px; }
:root[data-tema="claro-pro"] {
  --fundo: #eeede9; --fundo-solido: #eeede9; --lateral: #f7f6f3; --borda: #e2e0db; --texto-3: #5f646d;
  --faixa: #eeede9; --faixa-borda: #e2e0db; --ls-pauta: rgba(36, 87, 197, .13);
}
:root[data-tema="escuro-pro"] {
  --fundo: #17181a; --fundo-solido: #17181a; --lateral: #1b1c1f; --faixa: #17181a; --ls-pauta: rgba(138, 180, 248, .12);
}

/* ---- 24b. Grade do Início ---- */
:root[data-estilo="pro"] .bib.inicio { max-width: 1260px; gap: 18px; }
:root[data-estilo="pro"] .inicio .titulo-tela { font-family: var(--fonte-serifa); font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.inicio-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.inicio-topo > * { min-width: 0; }
/* a coluna da esquerda (pesquisa, criar, continuar, para hoje) e o "Anotar e rascunho" à direita, na altura dela */
.inicio-topo-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.inicio-topo.com-rascunho { grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); column-gap: 18px; align-items: stretch; }
.inicio-topo.com-rascunho > .inicio-topo-col { grid-column: 1; grid-row: 1; }
.inicio-topo.com-rascunho > [data-modulo="capturar"] { grid-column: 2; grid-row: 1; }
:root[data-estilo="pro"] .inicio-grade:not(.sem-lado):not(.so-lado) { grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: 18px; }
:root[data-estilo="pro"] .inicio .novos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root[data-estilo="pro"] .inicio .bt.novo { padding: 0 10px; gap: 8px; justify-content: flex-start; min-width: 0; }
:root[data-estilo="pro"] .inicio .bt.novo > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inicio-principal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.inicio-principal > * { grid-column: 1 / -1; }
.inicio-principal > .meia { grid-column: auto; }
:root[data-estilo="pro"] .inicio-lado { gap: 18px; }
:root[data-estilo="pro"] .inicio .campo-pesquisa { max-width: none; min-height: 48px; border-radius: 14px; border-color: var(--borda); }

/* ---- 24c. Cartões ---- */
:root[data-estilo="pro"] .inicio .sec, :root[data-estilo="pro"] .inicio .continuar {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: none;
}
:root[data-estilo="pro"] .inicio .sec { padding: 16px 18px 14px; gap: 10px; }
:root[data-estilo="pro"] .inicio .sec-cab { border: 0; margin: 0; padding: 0; min-height: 34px; flex-wrap: wrap; row-gap: 6px; }
:root[data-estilo="pro"] .inicio .sec-cab h2 { font-family: var(--fonte-serifa); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--texto); text-transform: none; }
:root[data-estilo="pro"] .inicio .continuar { padding: 14px 16px; }
:root[data-estilo="pro"] .inicio .painel-dia { border-radius: 20px; }
:root[data-estilo="pro"] .dia-ola { font-family: var(--fonte-serifa); font-weight: 600; font-size: 30px; letter-spacing: -.01em; }
:root[data-estilo="pro"] .inicio .bt.novo { border-radius: 10px; min-height: 38px; }
:root[data-estilo="pro"] .inicio .bt.novo.plano { border-color: transparent; }
:root[data-estilo="pro"] .inicio .sec .lista-mini .item-mini { border-radius: 10px; }
.sec-extra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-recuperar .lembrete { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--aviso) 45%, var(--borda)); background: color-mix(in srgb, var(--aviso) 6%, var(--carta)); }
.sec-recuperar .lembrete .q { color: var(--aviso); display: grid; flex: none; }
.sec-recuperar .lembrete .cresce { min-width: 0; }

/* ---- 24d. Abas de texto ---- */
.abas { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sup-2); max-width: 100%; }
.aba {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--texto-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-rapida, 140ms) var(--c-padrao, ease), color var(--d-rapida, 140ms) var(--c-padrao, ease);
}
.aba:hover { color: var(--texto); }
.aba.ativa { background: var(--carta); color: var(--texto); box-shadow: 0 0 0 1px var(--borda); }
.aba:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.aba-n { font-size: 11.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.aba-painel { min-width: 0; }
.aba-painel:focus { outline: none; }

/* ---- 24e. Fichas em leque (documentos) ----
   A ficha inclina pela variável --giro e se endireita ao passar o mouse ou receber o foco; NÃO sobe nem ganha sombra.
   Quantas cabem depende da largura do próprio leque (consulta de contêiner): 6, 5, 4 ou 3. */
.leque { display: flex; align-items: stretch; padding: 8px 6px 6px 2px; container-type: inline-size; isolation: isolate; min-width: 0; }
:root .leque .cartao.papel {
  flex: 1 1 0; min-width: 0; max-width: 210px; min-height: 200px; margin: 0 0 0 -10px; padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--borda); border-radius: 14px; background: var(--carta); box-shadow: none;
  transform: rotate(var(--giro, 0deg)); transform-origin: 50% 90%; position: relative; z-index: var(--ordem, 1); content-visibility: visible;
  transition: transform var(--d-media, 180ms) var(--c-padrao, ease), background-color var(--d-rapida, 140ms) var(--c-padrao, ease), border-color var(--d-rapida, 140ms);
}
:root .leque .cartao.papel:first-child { margin-left: 0; }
:root .leque .cartao.papel:hover, :root .leque .cartao.papel:focus-visible, :root .leque .cartao.papel:focus-within {
  transform: none; z-index: 30; box-shadow: none; background: color-mix(in srgb, var(--tp, var(--realce)) 6%, var(--carta)); border-color: color-mix(in srgb, var(--tp, var(--realce)) 35%, var(--borda));
}
:root .leque .cartao.papel:active { transform: none; }
.leque .cartao.papel .cab { flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 0; flex: 1 1 auto; min-height: 0; }
.leque .cartao.papel .nome-doc { gap: 6px; width: 100%; }
.leque .cartao.papel h3 { font-family: var(--fonte-serifa); font-size: 16px; line-height: 1.25; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.leque .cartao.papel .resumo-linha { white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; }
.leque .cartao.papel .col-tipo, .leque .cartao.papel .col-pasta { display: none; }
.leque .cartao.papel .rod { margin-top: auto; border-top: 1px solid var(--borda); padding-top: 8px; font-size: 12px; letter-spacing: 0; color: var(--texto-3); gap: 6px; }
.leque .cartao.papel .acoes-doc { position: absolute; top: 6px; right: 6px; }
.leque .cartao.papel .acoes-doc .bt, .leque .cartao.papel .estrela { width: 30px; height: 30px; min-height: 30px; }
.leque .cartao.papel .q { width: 30px; height: 30px; border-radius: 9px; }
.leque .cartao.papel .fixo { position: absolute; top: 12px; left: 48px; }
.leque .motivo { flex-basis: 100%; color: var(--realce); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 900px) { .leque .cartao.papel:nth-child(n+6) { display: none; } }
@container (max-width: 720px) { .leque .cartao.papel:nth-child(n+5) { display: none; } }
@container (max-width: 560px) { .leque .cartao.papel:nth-child(n+4) { display: none; } }
:root[data-movimento="reduzido"] .leque .cartao.papel { transition: none; }

/* ---- 24f. Notas presas (fixados e favoritos) ---- */
.notas-presas { list-style: none; margin: 0; padding: 4px 2px 2px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.notas-presas li { transform: rotate(var(--giro, 0deg)); transition: transform var(--d-media, 180ms) var(--c-padrao, ease); min-width: 0; }
.notas-presas li:hover, .notas-presas li:focus-within { transform: none; }
.nota-presa {
  display: flex; flex-direction: column; gap: 6px; min-height: 104px; height: 100%; padding: 10px 10px 12px; border-radius: 12px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--tp, var(--texto-3)) 22%, var(--borda)); background: color-mix(in srgb, var(--tp, var(--texto-3)) 7%, var(--carta));
}
.nota-presa:hover { border-color: color-mix(in srgb, var(--tp, var(--texto-3)) 45%, var(--borda)); }
.nota-presa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.nota-topo { display: flex; align-items: center; gap: 4px; }
.nota-topo .q { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--tp, var(--texto-2)); background: color-mix(in srgb, var(--tp, var(--texto-3)) 14%, transparent); margin-right: auto; }
.nota-topo .marca-mini { display: grid; color: var(--texto-3); }
.nota-topo .marca-mini.fav { color: var(--ocre); }
.nota-topo .marca-mini.fav svg { fill: currentColor; }
.nota-tit { font-family: var(--fonte-serifa); font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--texto); overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nota-res { font-size: 12.5px; line-height: 1.45; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-movimento="reduzido"] .notas-presas li { transition: none; }

/* ---- 24g. Agenda ---- */
.ag-corpo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-rolagem { max-height: 344px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--borda); background: var(--carta); scrollbar-width: thin; }
.ag-rolagem:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ag-grade { position: relative; height: calc(var(--horas) * var(--ph)); }
.ag-hora { height: var(--ph); border-top: 1px solid var(--borda); position: relative; box-sizing: border-box; }
.ag-hora:first-child { border-top: 0; }
.ag-hora span { position: absolute; top: 4px; left: 10px; font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ag-eventos { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; bottom: 0; left: 46px; right: 8px; }
.ag-ev {
  position: absolute; top: calc(var(--ini) * var(--ph) / 60 + 1px); height: max(26px, calc(var(--dur) * var(--ph) / 60 - 3px));
  left: calc(100% / var(--pistas) * var(--pista)); width: calc(100% / var(--pistas) - 4px); min-width: 0;
}
.ag-link {
  display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 4px 9px; border-radius: 9px; overflow: hidden; text-decoration: none; color: var(--texto);
  background: color-mix(in srgb, var(--tp-tarefas, var(--realce)) 11%, var(--carta)); border-left: 3px solid var(--tp-tarefas, var(--realce));
}
.ag-link:hover { background: color-mix(in srgb, var(--tp-tarefas, var(--realce)) 18%, var(--carta)); }
.ag-link:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.ag-linha1 { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-2); min-width: 0; }
.ag-h { font-variant-numeric: tabular-nums; font-weight: 600; }
.ag-falta { margin-left: auto; white-space: nowrap; font-weight: 600; }
.ag-tit { font-weight: 600; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-proj { font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev.curta .ag-link { flex-direction: row; align-items: center; gap: 8px; }
.ag-ev.curta .ag-proj, .ag-ev.media .ag-proj { display: none; }
.ag-ev.curta .ag-linha1 { flex: none; }
.ag-ev.feita .ag-link { background: var(--sup); border-left-color: var(--borda-forte); color: var(--texto-3); }
.ag-ev.feita .ag-tit { text-decoration: line-through; font-weight: 500; }
.ag-ev.agora .ag-link { background: color-mix(in srgb, var(--ok) 15%, var(--carta)); border-left-color: var(--ok); }
.ag-ev.agora .ag-falta { color: color-mix(in srgb, var(--ok) 72%, var(--texto)); }
.ag-ev.passou .ag-falta { color: var(--perigo); }
.ag-agora { position: absolute; left: 44px; right: 0; top: calc(var(--ini) * var(--ph) / 60); height: 0; border-top: 2px solid var(--perigo); z-index: 3; pointer-events: none; }
.ag-agora::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--perigo); }
.ag-agora span { position: absolute; left: -42px; top: -9px; padding: 0 3px; font-size: 10.5px; font-weight: 700; color: var(--perigo); background: var(--carta); font-variant-numeric: tabular-nums; }
.ag-sem h3 { margin: 2px 2px 4px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.ag-sem-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-sem-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 10px; color: var(--texto); text-decoration: none; }
.ag-sem-item:hover { background: var(--sup-2); }
.ag-sem-item:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.ag-sem-item .q { display: grid; color: var(--texto-3); flex: none; }
.ag-sem-item .cresce { min-width: 0; display: flex; flex-direction: column; }
.ag-sem-item small { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sem-item.feita .ag-tit { text-decoration: line-through; color: var(--texto-3); }
.ag-dica { margin: 0 2px; }
.ponto-prio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--texto-3); vertical-align: middle; }
.ponto-prio.p3 { background: var(--perigo); } .ponto-prio.p2 { background: var(--aviso); } .ponto-prio.p1 { background: var(--info); }

/* ---- 24h. Tarefas (abas) ---- */
.lista-tarefas-inicio .item-mini small { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lista-tarefas-inicio .item-mini small > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lista-tarefas-inicio .item-mini.feita .tit-mini { text-decoration: line-through; color: var(--texto-3); }
.lista-tarefas-inicio .item-mini.feita .q { color: var(--ok); }
.tf-chip.prazo.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tf-chips { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.tf-chips:empty { display: none; }
/* lado a lado com a Agenda (coluna estreita): as fichas descem para baixo do título */
.sec-tarefas.meia .lista-tarefas-inicio .item-mini { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: start; padding: 8px; }
.sec-tarefas.meia .lista-tarefas-inicio .item-mini .q { grid-row: 1 / span 2; padding-top: 2px; }
.sec-tarefas.meia .lista-tarefas-inicio .tf-chips { grid-column: 2; justify-self: start; flex-wrap: wrap; }
.sec-tarefas .abas { align-self: flex-start; }

/* ---- 24i. Anotar + rascunho ---- */
.captura { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.inicio-topo.com-rascunho > .captura { height: 100%; }
:root[data-estilo="pro"] .inicio .anotar-inicio { border-radius: 14px; border-color: var(--borda); min-height: 48px; }
.rascunho {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; min-height: 210px; padding: 14px 16px 12px;
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--r-cartao, 12px);
  transition: border-color var(--d-rapida, 140ms), box-shadow var(--d-rapida, 140ms);
}
.rascunho:focus-within { border-color: var(--realce-borda, var(--realce)); box-shadow: 0 0 0 3px var(--realce-suave, transparent); }
.rasc-cab { display: flex; align-items: center; gap: 4px; min-height: 34px; }
.rasc-cab h2 { margin: 0 auto 0 0; font-family: var(--fonte-serifa, var(--fonte-titulo)); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.rasc-folhas { display: flex; align-items: center; }
.rasc-ponto { width: 24px; height: 24px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.rasc-ponto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--borda-forte); transition: background-color var(--d-rapida, 140ms), transform var(--d-rapida, 140ms); }
.rasc-ponto:hover::before { background: var(--texto-3); }
.rasc-ponto.atual::before { background: var(--texto); transform: scale(1.2); }
.rasc-ponto:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; }
.rasc-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12px; color: var(--texto-3); }
.rasc-meta span + span::before { content: "·"; margin-right: 8px; }
/* papel pautado (o "carnet"): linhas finas na altura de cada linha de texto, que rolam junto */
.rasc-campo {
  flex: 1 1 auto; width: 100%; min-height: 104px; resize: none; border: 0; padding: 4px 0 0; margin: 0; border-radius: 4px;
  font: inherit; font-size: 15px; line-height: 24px; color: var(--texto); background-color: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, var(--ls-pauta, var(--grade)) 23px, var(--ls-pauta, var(--grade)) 24px);
  background-position: 0 4px; background-attachment: local;
}
.rasc-campo::placeholder { color: var(--texto-3); opacity: 1; }
.rasc-campo:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.rasc-rod { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-3); min-height: 22px; }
.rasc-rod .estado-salvo { font-size: 12px; color: var(--texto-3); }

/* ---- 24j. Painel "Sobre este documento" ---- */
.painel-doc {
  position: fixed; right: 0; bottom: 0; top: calc(var(--topo-h, 52px) + env(safe-area-inset-top, 0px)); width: var(--painel-doc-w, 320px); z-index: 18;
  display: flex; flex-direction: column; background: var(--painel); border-left: 1px solid var(--borda);
  padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.painel-doc[hidden] { display: none; }
@media (min-width: 1200px) { body.com-painel-doc #app > .palco { margin-right: var(--painel-doc-w, 320px); } }
@media (max-width: 1199px) { .painel-doc { width: min(340px, 92vw); box-shadow: var(--elev-3, var(--sombra)); } }
.pd-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--borda); }
.pd-cab h2 { margin: 0; font-family: var(--fonte-serifa, var(--fonte-titulo)); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pd-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 12px 28px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.pd-doc-cab { display: flex; align-items: center; gap: 10px; padding: 2px 6px 10px; }
.pd-doc-cab .q { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--tp, var(--texto-2)); background: color-mix(in srgb, var(--tp, var(--texto-3)) 13%, transparent); }
.pd-doc-cab .cresce { min-width: 0; display: flex; flex-direction: column; }
.pd-titulo { font-family: var(--fonte-serifa, var(--fonte-titulo)); font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pd-sec { border-top: 1px solid var(--borda); padding: 4px 0; }
.pd-sec > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: var(--texto); cursor: pointer;
}
.pd-sec > summary::-webkit-details-marker { display: none; }
.pd-sec > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(-45deg); transition: transform var(--d-rapida, 140ms); margin: 0 3px; }
.pd-sec[open] > summary::before { transform: rotate(45deg); }
.pd-sec > summary:hover { background: var(--sup-2); }
.pd-sec > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.pd-sec-corpo { padding: 2px 0 8px; }
.pd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.pd-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--texto-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; text-decoration: none;
}
.pd-item:hover { background: var(--sup-2); color: var(--texto); }
.pd-item:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.pd-item.nivel-2 { padding-left: 24px; font-size: 13px; }
.pd-item .cresce { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-item .q { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; color: var(--tp, var(--texto-2)); background: color-mix(in srgb, var(--tp, var(--texto-3)) 13%, transparent); }
.pd-n { flex: none; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pd-itens li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px; font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.pd-itens li .q { display: grid; color: var(--texto-3); flex: none; margin-top: 1px; }
.pd-itens li.feito > span:last-child { text-decoration: line-through; color: var(--texto-3); }
.pd-sub { margin: 8px 8px 2px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.pd-dica { margin: 2px 8px 6px; line-height: 1.45; }
.pd-quebradas { display: flex; align-items: flex-start; gap: 6px; margin: 6px 8px; font-size: 12.5px; color: var(--aviso); }
.pd-quebradas .ic { flex: none; margin-top: 1px; }
.pd-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 4px; }
.pd-ref { margin: 6px 4px 0; }
.pd-estat { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 2px 4px 4px; }
.pd-par { padding: 8px 10px; border-radius: 10px; background: var(--sup); min-width: 0; }
.pd-par dt { font-size: 11.5px; color: var(--texto-2); font-weight: 500; }
.pd-par dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }
.topo .bt-painel-doc.ativo { color: var(--realce); }

/* ---- 24k. Navegação por tipo ---- */
.nav-tipos { display: flex; gap: 2px; padding: 2px 0 2px 4px; }
.nav-app .nav-tipos .item-lado.tipo-mini { flex: 1 1 0; width: auto; min-width: 0; min-height: 32px; justify-content: center; gap: 4px; padding: 0 2px; }
.nav-app .nav-tipos .n-tipo { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.nav-app .nav-tipos .item-lado.ativo .n-tipo { color: var(--texto); font-weight: 600; }
:root[data-estilo="pro"] .nav-app .nav-tipos .ic-lado[class*="cor-"] { color: var(--tp, var(--texto-3)); }
@media (min-width: 761px) { .nav-app.recolhida .nav-tipos { display: none; } }

/* ---- 24l. Tablet e celular ---- */
@media (max-width: 1100px) {
  :root[data-estilo="pro"] .inicio-grade:not(.sem-lado):not(.so-lado) { grid-template-columns: minmax(0, 1fr); }
  :root[data-estilo="pro"] .inicio-grade .inicio-lado { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; align-items: start; }
  .inicio-topo.com-rascunho { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .inicio-topo.com-rascunho > [data-modulo="capturar"] { grid-column: 1; grid-row: 2; }
  .rascunho { min-height: 220px; }
}
@media (max-width: 760px) {
  :root[data-estilo="pro"] .inicio .titulo-tela { font-size: 26px; }
  :root[data-estilo="pro"] .dia-ola { font-size: 23px; }
  :root[data-estilo="pro"] .inicio .sec { padding: 14px 14px 12px; border-radius: 16px; }
  .inicio-principal { grid-template-columns: minmax(0, 1fr); }
  :root[data-estilo="pro"] .inicio .novos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio-principal > .meia { grid-column: 1 / -1; }
  .aba { min-height: 36px; }
  /* fichas: uma embaixo da outra, retas, as 4 primeiras */
  .leque { flex-direction: column; gap: 8px; padding: 0; }
  :root .leque .cartao.papel { flex: none; max-width: none; min-height: 0; margin: 0; transform: none; }
  .leque .cartao.papel:nth-child(n+5) { display: none; }
  .leque .cartao.papel .cab { flex-direction: row; align-items: center; padding-right: 64px; }
  .leque .cartao.papel .resumo-linha { -webkit-line-clamp: 2; }
  .leque .cartao.papel .fixo { position: static; }
  .notas-presas li { transform: none; }
  /* agenda: a linha do tempo vira lista em ordem de horário */
  .ag-rolagem { max-height: none; overflow: visible; border: 0; border-radius: 0; background: none; }
  .ag-grade { height: auto; }
  .ag-hora, .ag-agora { display: none; }
  .ag-eventos { position: static; display: flex; flex-direction: column; gap: 6px; }
  .ag-ev { position: static; height: auto; width: auto; }
  .ag-link { min-height: 44px; }
  .ag-ev.curta .ag-link { flex-direction: column; align-items: stretch; }
  .ag-ev.curta .ag-proj, .ag-ev.media .ag-proj { display: block; }
  .rasc-ponto { width: 32px; height: 32px; }
  .pd-par dd { font-size: 14px; }
}
@media (max-width: 420px) { .notas-presas { grid-template-columns: minmax(0, 1fr); } }
/* telas muito estreitas (≤ 360 px): o topo do editor não comporta mais um botão — o painel continua pela
   pesquisa (Ctrl+K › "Sobre este documento") e por Alt+I */
@media (max-width: 360px) { .topo .bt-painel-doc { display: none; } }
@media print { .painel-doc { display: none !important; } }

/* ============ 25. CARNET 4.1 — prévia da IA, arquivados ============ */
/* a IA propõe; a pessoa marca e aplica (nada muda antes) */
.ia-previa-tit { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--texto-2); }
.ia-previa-tit .ic { flex: none; margin-top: 2px; color: var(--realce); }
.ia-previa-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ia-previa-lista li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--sup); font-size: 13px; line-height: 1.4; color: var(--texto); }
.ia-previa-lista input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--realce); }
.ia-previa-lista label { cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.ia-previa-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.bolha-acoes.ia-previa { display: block; }
.ia-previa-texto { max-height: min(52vh, 460px); overflow: auto; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 10px; background: var(--carta); font-size: 14.5px; line-height: 1.6; color: var(--texto); }
.ia-previa-texto:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ia-previa-texto h3 { font-size: 16px; margin: 6px 0; }
.ia-previa-texto hr { border: 0; border-top: 1px solid var(--borda); }
.ia-previa .dica { margin-top: 8px; }
/* documento arquivado: uma etiqueta discreta, com ícone e texto (não só cor) */
.etiqueta.arquivado { color: var(--texto-2); border-color: var(--borda-forte); }
.pi-local .ic { vertical-align: -2px; }

/* ---- 26. Marca Map&Map (4.2) — símbolo e nome em vetor (src/js/02-marca.js, gerado por tools/gerar_marca.py) ----
   O nome usa a cor do texto (currentColor) e o "&" usa --marca-e: âmbar mais fundo no claro, aceso no escuro.
   O símbolo é sempre o quadro escuro com o rosto: é o mesmo ícone do celular. */
:root { --marca-e: #c98512; }
:root[data-tema="claro-pro"] { --marca-e: #b9770a; }
:root[data-tema="escuro-pro"] { --marca-e: #f5b93e; }
.mm-e { fill: var(--marca-e); }
.mm-simbolo, .mm-nome { display: block; flex: none; }
.nav-marca .selo, .marca .selo { line-height: 0; }
.nav-marca .nome-marca, .marca .nome-marca { line-height: 0; display: block; }
:root[data-estilo="pro"] .topo .marca .selo, .marca .selo { filter: none; }