/* ============================================================================
   tema.css — ⟨Tema⟩ WARM PAPER · minimalista flutuante (redesign 2026-06).
   Re-skin POR CIMA da casca (vence por ordem de carga). Mantém a alma
   pergaminho/Paradox, mas o chrome vira PAPEL CLARO + tinta escura, com
   "altitude": peças e abas FLUTUAM sobre o canvas (sombra quente suave).
   Menos é o objetivo: uma escala de raio, uma escala de sombra, serif mantida.
   Tokens de CONTEÚDO (--cor-primario/secundario/acento/neutro) NÃO mudam.
   ============================================================================ */

:root{
  /* ----- paleta warm paper (chrome) ----- */
  --wp-canvas:#e1d4b6;           /* o mapa: papel quente (fundo p/ as peças flutuarem) */
  --wp-papel:#ecdfc3;            /* a FOLHA do mapa: pergaminho pousado na mesa (lido pelo #mapa-moldura da casca) */
  --wp-grade:rgba(120,90,45,.22);
  --wp-mesa:#46301a;             /* MESA: o tampo de madeira em volta da folha = a BORDA e o lugar da SKIN */
  --wp-mesa-2:#2f1e0e;           /* sombra/beirada escura do tampo */
  --wp-cartao:#fbf7ee;           /* peças + chrome claro */
  --wp-cartao-2:#f2e9d5;         /* trilho de segmento / hover suave */
  --wp-tinta:#2c2113;            /* tinta escura principal */
  --wp-tinta-suave:#7a6c4d;      /* secundária */
  --wp-borda:#e3d7ba;            /* hairline */
  --wp-borda-forte:#cdbb92;
  --wp-acento:#9a6a2c;           /* latão de acento (chrome) */
  --wp-acento-suave:rgba(154,106,44,.14);
  --wp-raio:12px;                /* cartões / painéis-conteúdo */
  --wp-raio-bar:11px;            /* barras flutuantes */
  --wp-branco:#ffffff;
  /* ----- altitude: escala de sombra quente (o "flutuo") ----- */
  --wp-alt-1:0 1px 2px rgba(60,42,12,.10);
  --wp-alt-2:0 1px 2px rgba(60,42,12,.12), 0 10px 24px rgba(60,42,12,.16);
  --wp-alt-3:0 2px 8px rgba(60,42,12,.14), 0 18px 40px rgba(60,42,12,.20);
}

/* fundo do site = papel quente suave; serif antiga */
body{
  background: radial-gradient(125% 95% at 50% -8%, #ece2cd 0%, #e1d4b6 58%, #d4c39e 100%);
  font-family: var(--serif);
  color: var(--wp-tinta);
}

/* MOLDURA minimalista: só um fio quente + vinheta leve (sem madeira pesada) */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:36;
  box-shadow:
    inset 0 0 0 1px rgba(120,90,45,.18),
    inset 0 0 90px rgba(120,90,45,.10);
}

/* MESA (CK3) v2 — a mesa entrou no MUNDO: o tampo é o #mesa-tampo DENTRO da .superficie (sob a folha),
   então madeira e objetos PANAM e ZOOMAM junto com o mapa, como no CK3 (a câmera voa sobre mesa+mapa
   estáticos). O #dashboard (fixo) virou o CHÃO DO QUARTO: escuro, aparece em volta do móvel no zoom-out
   máximo (zoomMin com CHAO_FOLGA no JS). A cor-base segue --wp-mesa (o SLIDE veste esta cor — self-test);
   a escuridão vem das camadas de gradiente (vinheta de vela + ladrilho diagonal sutil). */
#dashboard{
  background-color: var(--wp-mesa, #46301a);
  /* chão REAL (arte v2: chao-ladrilho.jpg) sob a vinheta de vela; entre as duas, FEIXES
     de luz diagonais — a "luz de janela" da variação chao2, refeita em CSS por cima do chao1 */
  background-image:
    radial-gradient(ellipse at 50% 44%, rgba(10,6,2,.50), rgba(4,2,1,.88) 78%),
    linear-gradient(115deg, transparent 30%, rgba(255,233,190,.11) 38%, transparent 45%,
                    transparent 52%, rgba(255,233,190,.08) 60%, transparent 68%),
    url('skins/chao-mosaico.jpg');
  /* chão-MOSAICO (dono, 2026-07-14: quadrado ≈1/8 do que aparecia): ladrilho ≈20px na tela.
     chao-mosaico.jpg = chao1 com luz achatada (padding circular) + corte rejunte-a-rejunte
     → repete a cada 500px SEM emenda visível (o CK3 faz igual; a vinheta cobre o resto).
     Calibrar o tamanho do ladrilho = mexer SÓ no 500px (proporcional). */
  background-size: auto, auto, 500px auto;
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow:none;
}

/* o TAMPO no mundo (skin trocável = trocar estas urls; tile de madeira PURA sem emenda — a folha
   cresce estilo Canva e a área nova é só madeira). Beirada escura + sombra do MÓVEL no chão. */
#mesa-tampo{
  position:absolute; z-index:0; pointer-events:none;
  background-color: var(--wp-mesa, #46301a);
  /* tile ÚNICO consistente (mesa-madeira2.jpg: luz achatada + emenda na ranhura, SEM espelho).
     O experimento MESÃO-de-4-gerações foi REVERTIDO (2026-07-14): seeds diferentes = madeiras
     diferentes (largura/ritmo de tábua), lê como 4 fotos — o mesão contínuo virá de UMA imagem
     estendida (outpaint/upscale, ver PROMPT-arte-mesa-v2.md PEÇA 6).
     + véu marrom por cima pra casar o tom do tile com a arte das bordas (mais quente/escura) */
  background-image:
    linear-gradient(rgba(52,32,14,.38), rgba(52,32,14,.38)),
    url('skins/mesa-madeira2.jpg');
  background-size: auto, 1800px 1340px;
  border-radius: 14px;
  box-shadow:
    0 0 0 7px var(--wp-mesa-2, #2f1e0e),         /* a beirada/canto do tampo */
    0 30px 90px 22px rgba(0,0,0,.55),            /* o móvel assenta no chão do quarto */
    inset 0 0 130px rgba(0,0,0,.30);             /* luz de vela: beiradas do tampo mais escuras */
}
/* sombra de CONTATO da folha no tampo (o papel está ENCOSTADO, não flutuando) — o inset é a própria
   faixa da MESA (310px), então a sombra SEGUE a folha quando ela cresce; luz vem do topo-esquerda */
#mesa-tampo::after{
  content:""; position:absolute; inset:306px 296px 292px 306px;
  background: rgba(15,8,0,.36); border-radius:12px; filter: blur(11px);
}

/* objetos da BORDA (bordas FIXAS topo/esquerda, arte Leonardo com fade) — camada ACIMA da folha:
   os recortes INVADEM a beirada do papiro (profundidade CK3) e ganham PARALLAX sutil no aplicarView.
   Blocos pintam por cima (z = m.z); pointer-events:none = nunca roubam clique. */
#mesa-objetos{ position:absolute; z-index:0; pointer-events:none; }
#mesa-objetos .mo-topo, #mesa-objetos .mo-esq{ position:absolute; left:0; top:0; background-repeat:no-repeat; }
/* KIT DA MESA EXPANSÍVEL (2026-07-15): tampas FIXAS/DESLIZANTES + trilhos genéricos.
   Regra de ouro: o que é ÚNICO não estica; o que ESTICA não é único. Composição por objeto
   (curadoria do dono, compor_bordas()) em fundo TRANSPARENTE — objetos pousam no tampo real.
   Posições/tamanhos que dependem da folha são inline (dimensionarMesa). */
#mesa-objetos .mo-topo{
  width:1600px; height:380px;                    /* tampa ESQUERDA do topo (FIXA): cobre a faixa (310) e invade ~70px do papiro */
  background-image:url('skins/mesa-borda-topo3.png'); background-size:100% 100%;
}
#mesa-objetos .mo-esq{
  width:378px; height:704px;                     /* tampa ESQUERDA lateral (FIXA) */
  background-image:url('skins/mesa-borda-esq3.png'); background-size:100% 100%;
}
#mesa-objetos .mo-tampa-dir{
  width:560px; height:380px;                     /* tampa DIREITA (livro+tinteiro+velas): DESLIZA com a beirada da folha */
  background-image:url('skins/mesa-tampa-dir.png'); background-size:100% 100%;
}
/* TRILHOS: preenchem o vão quando a folha cresce — salpicos de alta frequência (selos,
   moedinhas), NENHUM objeto memorável, SEM animação; repetem sem denunciar. */
#mesa-objetos .mo-trilho-topo, #mesa-objetos .mo-trilho-baixo{
  background-image:url('skins/mesa-trilho-h.png'); background-size:auto 100%; background-repeat:repeat-x;
}
#mesa-objetos .mo-trilho-esq, #mesa-objetos .mo-trilho-dir{
  background-image:url('skins/mesa-trilho-v.png'); background-size:100% auto; background-repeat:repeat-y;
}
/* LUZ DE VELA (2 regimes: a arte carrega a MATÉRIA, o CSS carrega a LUZ): poças quentes
   ancoradas nos PONTOS FIXOS DE VELA (background-image inline no dimensionarMesa — a poça
   da direita viaja com a tampa). Miolo do papiro = ZONA MORTA (poça só lambe a margem).
   NOTA (revisor 2026-07-15): o transform do parallax ISOLA o grupo de blending → o screen
   só age sobre as peças de #mesa-objetos; sobre madeira/papiro a poça compõe como véu
   translúcido comum (é o alpha que faz o brilho). Luz "leitosa" um dia? A causa é essa. */
#mesa-objetos .mo-luz{ mix-blend-mode:screen; }

/* FOLHA = PAPIRO pousado na mesa (não "sulfite"): creme quente + manchas suaves de velino
   (gradientes em %, escalam com o zoom junto da folha) + beirada envelhecida (inset).
   Sem border (o self-test cobra folha sem fio de 3px). O MIOLO segue calmo de propósito.
   CK3 v2: o papel está ENCOSTADO na mesa (a sombra de contato mora no #mesa-tampo::after, não aqui)
   e a beirada é RASGADA — arte v2: rasgo.png (silhueta Leonardo → alfa, processar-arte-v2.py),
   recortada no bbox pra folha encher a caixa; ESTICA com a folha (mask-size 100%). */
#mapa-moldura{
  background-color: var(--wp-papel);
  /* GRÃO do pergaminho (arte v8: folha-textura.jpg, do arquivo do dono; tile discreto de
     600px sob os gradientes de velino — a repetição é invisível, grão de alta frequência).
     As manchas/vinheta seguem nos gradientes ACIMA; o miolo continua calmo (legibilidade). */
  background-image:
    radial-gradient(ellipse at 16% 12%, rgba(255,250,235,.50), transparent 55%),
    radial-gradient(ellipse at 84% 90%, rgba(170,132,74,.10), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(140,105,55,.13) 100%),
    url('skins/folha-textura.jpg');
  background-size: auto, auto, auto, 600px 600px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  border-radius:10px;
  box-shadow:
    inset 0 0 46px rgba(150,112,60,.16), inset 0 0 4px rgba(150,112,60,.22),
    inset 0 0 0 2px rgba(140,100,50,.18);
  -webkit-mask-image:url('skins/rasgo.png');
          mask-image:url('skins/rasgo.png');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* ===================== PEÇAS (blocos) = cartões que FLUTUAM ===================== */
.bloco{
  background:var(--wp-cartao);
  border:1px solid var(--wp-borda-forte);
  color:#2c2113;
  border-radius:var(--wp-raio);
  box-shadow:var(--wp-alt-2);
  font-family:var(--serif);
  white-space:pre-wrap;                 /* preserva quebras de linha (Enter no cartão) + ainda quebra linha longa */
  transition: box-shadow .18s ease, transform .18s ease;
}
.bloco:hover{ box-shadow:var(--wp-alt-3); transform:translateY(-2px); }
#dashboard.arrastando .bloco:hover{ transform:none; }   /* sem tremor ao arrastar a folha */
.bloco.tem-img{ background:var(--wp-branco); }

/* KIT: borda do bloco */
.bloco[data-borda="cartao"]   { border-radius:var(--wp-raio); }
.bloco[data-borda="pilula"]   { border-radius:999px; padding-left:18px; padding-right:18px; }
.bloco[data-borda="tracejada"]{ border-style:dashed; }
.bloco[data-borda="nenhuma"]  { border-style:none; }
/* bloco "só texto" (sem fundo nem borda) = chapado, leitura limpa; outline no hover p/ pegar */
.bloco[data-fundo="nenhum"][data-borda="nenhuma"]{ box-shadow:none; transform:none; }
.bloco[data-fundo="nenhum"][data-borda="nenhuma"]:hover{ transform:none; box-shadow:none; }
.bloco[data-borda="nenhuma"]:hover{ outline:1px dashed rgba(120,90,45,.5); outline-offset:2px; }
/* 🔒 bloco com a POSIÇÃO travada: cursor neutro (não convida a arrastar); destrava na barrinha */
.bloco[data-travado="1"]{ cursor:default; }
/* SLIDE: bloco portando a FOLHA estruturada (modelo de conteúdo unificado, 2026-07-07) —
   o miolo é o MESMO renderizador da pílula do mapa (bloco-folha.js); a caixa do slide recorta */
.vs-bloco.folha{ display:block; text-align:left; overflow:hidden; }
/* a folha renderiza na largura NATURAL e ESCALA tipo-imagem (transform) — sem barras de rolagem */
.vs-bloco.folha .vs-folha{ transform-origin:0 0; }
/* EDITANDO: as ferramentas transbordam LIVRES (nada de "janela dentro do quadrado" — reporte do dono)
   e ficam em TAMANHO NATURAL via contra-escala (--kf = escala da folha, setado pelo escalarFolhaVS) */
.vs-modo-edicao .vs-bloco.folha.editando{ overflow:visible; z-index:40; }
.vs-folha .bf-tools, .vs-folha .bf-addbar{ transform:scale(calc(1 / var(--kf, 1))); transform-origin:0 0; width:max-content; }
.vs-ctx-dica{ font-size:11px; opacity:.75; padding:0 6px; white-space:nowrap; }
/* menu do + Texto ▾ (tipos curtos primeiro) */
.vs-menu-tipos{ display:flex; flex-direction:column; gap:2px; background:var(--wp-cartao,#fffdf7); border:1px solid rgba(120,90,45,.35); border-radius:8px; padding:4px; box-shadow:0 10px 26px rgba(60,40,15,.22); }
.vs-menu-tipos .vs-btn{ text-align:left; }
/* a alça ⠿ de desmembrar linha NÃO arrasta dentro do slide (o adapter só existe no mapa) — esconder pra não prometer */
.vs-folha:not(.bf-edit) .bf-handle{ display:none; }   /* fora de edição a alça some; em EDIÇÃO o slide tem o MESMO arraste do mapa (2026-07-12) */
/* SLIDE ESTENDIDO até o centro (mesmos detents/fórmula da leitura); a alça da borda também serve a aba slide */
#painel-direito.expandido:has(.vs-raiz.slide-estendido){ width:min(calc(100vw - 28px), max(900px, calc(100vw - 348px))); }
#painel-direito.expandido:has(.vs-raiz) .ap-alca-borda{ display:block; }
.vs-bar-min{ display:flex; justify-content:flex-end; padding:4px 6px; }   /* ⤢ fora da edição (paridade com a leitura) */
/* KIT de texto: alinhamento dentro do bloco (esq/centro/dir/justif — igual nos 3 canvas) */
.bloco[data-alinha="esq"]    { justify-content:flex-start; text-align:left; }
.bloco[data-alinha="centro"] { justify-content:center; text-align:center; }
.bloco[data-alinha="dir"]    { justify-content:flex-end; text-align:right; }
.bloco[data-alinha="justif"] { justify-content:flex-start; text-align:justify; }
/* LINK/REALCE não quebram o texto: um bloco de texto com trecho rico (mark/link/b/i/u)
   passa de flex (que vira o trecho um "flex-item") para BLOCK, onde o trecho flui INLINE.
   Blocos de texto SEM trecho rico continuam flex (centralização da pílula intacta). */
.bloco:not(.tem-img):not(.tem-folha):not(.tem-cluster):not([data-regiao="1"]):not([data-marco="1"]):not([data-linha]):has(mark),
.bloco:not(.tem-img):not(.tem-folha):not(.tem-cluster):not([data-regiao="1"]):not([data-marco="1"]):not([data-linha]):has(a),
.bloco:not(.tem-img):not(.tem-folha):not(.tem-cluster):not([data-regiao="1"]):not([data-marco="1"]):not([data-linha]):has(b),
.bloco:not(.tem-img):not(.tem-folha):not(.tem-cluster):not([data-regiao="1"]):not([data-marco="1"]):not([data-linha]):has(i),
.bloco:not(.tem-img):not(.tem-folha):not(.tem-cluster):not([data-regiao="1"]):not([data-marco="1"]):not([data-linha]):has(u){ display:block; }
/* LISTA no canvas: o bloco vira um ponto de lista (bullet antes do texto) */
.bloco[data-lista="1"]::before{ content:"•"; margin-right:6px; flex:0 0 auto; }
.vs-edit.vs-lista::before{ content:"•  "; }

/* ===================== POPOVERS (kit-texto / formatos) = papel claro ===================== */
.kt-pop{ position:fixed; z-index:90; background:var(--wp-cartao); border:1px solid var(--wp-borda);
  border-radius:10px; padding:4px; display:flex; flex-direction:column; gap:1px; box-shadow:var(--wp-alt-3); }
.kt-op{ display:flex; align-items:center; gap:9px; background:none; border:none; color:var(--wp-tinta);
  font-family:var(--serif); font-size:12.5px; padding:6px 12px 6px 9px; border-radius:7px; cursor:pointer; text-align:left; white-space:nowrap; }
.kt-op:hover{ background:var(--wp-cartao-2); }
.kt-op.on{ color:var(--wp-acento); }

/* TEMA do bloco (colapso Tema+Fundo): swatch no botão + barra de grau (transparência) */
.kt-fundo-sw{ display:inline-block; width:15px; height:15px; border-radius:3px; border:1px solid rgba(0,0,0,.25); vertical-align:-2px; }
.kt-fundo-sw.kt-nenhum{ background:repeating-linear-gradient(45deg,#efe6d0,#efe6d0 3px,#cdbb92 3px,#cdbb92 6px) !important; }
.kt-fundo-opac{ display:flex; align-items:center; gap:8px; color:var(--wp-tinta); font-family:var(--serif); font-size:12px; padding:1px 2px 0; }
.kt-fundo-opac input{ flex:1; min-width:90px; accent-color:var(--wp-acento); }

/* COR (tema+borda+fundo num só pop): seções herdadas do antigo 🏷 Tema, agora perto do objeto */
.kt-pop-cor{ padding:8px; gap:6px; min-width:188px; }
.kt-sec{ font-family:var(--serif); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--wp-tinta-2,var(--wp-tinta)); opacity:.7; padding:3px 2px 1px; }
.kt-tema-grade{ display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.kt-tema-op{ display:flex; align-items:center; gap:7px; background:none; border:1px solid transparent; color:var(--wp-tinta);
  font-family:var(--serif); font-size:12px; padding:4px 7px; border-radius:7px; cursor:pointer; text-align:left; white-space:nowrap; }
.kt-tema-op:hover{ background:var(--wp-cartao-2); }
.kt-tema-op.on{ border-color:var(--wp-acento); color:var(--wp-acento); }
.kt-tema-sw{ width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.28); flex:0 0 auto; }
.kt-tema-sw.kt-nenhum{ background:repeating-linear-gradient(45deg,#efe6d0,#efe6d0 3px,#cdbb92 3px,#cdbb92 6px); }
.kt-borda-row{ display:flex; gap:4px; }
.kt-borda-op{ flex:1; background:none; border:1px solid var(--wp-borda); color:var(--wp-tinta);
  font-family:var(--serif); font-size:12px; padding:5px 4px; border-radius:7px; cursor:pointer; white-space:nowrap; }
.kt-borda-op:hover{ background:var(--wp-cartao-2); }
.kt-borda-op.on{ border-color:var(--wp-acento); color:var(--wp-acento); }

/* AGRUPAR: menu dos 9 formatos (flyout) */
.ft-menu{ position:fixed; z-index:90; background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:10px; padding:7px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; box-shadow:var(--wp-alt-3); }
.ft-op{ background:none; border:1px solid transparent; border-radius:7px; padding:5px 5px 3px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ft-op:hover{ background:var(--wp-cartao-2); border-color:var(--wp-borda); }
.ft-thumb{ position:relative; width:56px; height:40px; background:#efe6d0; border:1px solid var(--wp-borda); border-radius:5px; }
.ft-cel{ background:var(--wp-acento); border-radius:1.5px; }
.ft-lab{ font-size:10.5px; color:var(--wp-tinta-suave); font-family:var(--serif); white-space:nowrap; }
/* TEMAS DA AULA: painel da legenda (🎨 Temas na barra de cima) — lista em coluna sobre o .ft-menu */
.tm-menu{ display:block; width:252px; padding:10px; }
.tm-titulo{ font-weight:700; font-size:13px; color:var(--wp-tinta); margin:2px 4px 8px; font-family:var(--serif); }
.tm-paleta{ display:flex; align-items:center; gap:6px; margin:0 4px 10px; flex-wrap:wrap; }
.tm-paleta-lab{ font-size:11px; color:var(--wp-tinta-suave); font-family:var(--serif); }
.tm-paleta-op{ display:flex; gap:2px; padding:4px 6px; border:1px solid var(--wp-borda); border-radius:8px; background:var(--wp-cartao); cursor:pointer; }
.tm-paleta-op:hover{ background:var(--wp-cartao-2); }
.tm-paleta-op.on{ border-color:var(--wp-acento); box-shadow:0 0 0 1px var(--wp-acento); }
.tm-mini{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.tm-linha{ display:flex; align-items:center; gap:8px; padding:4px; border-radius:8px; flex-wrap:wrap; }
.tm-linha:hover{ background:var(--wp-cartao-2); }
.tm-sw{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.18); cursor:pointer; flex:0 0 auto; padding:0; }
.tm-sw-op.on{ box-shadow:0 0 0 2px var(--wp-cartao), 0 0 0 3.5px var(--wp-acento); }
.tm-nome{ flex:1; min-width:0; border:none; background:transparent; font:inherit; font-size:13px; color:var(--wp-tinta); padding:2px 4px; border-radius:6px; font-family:var(--serif); }
.tm-nome:focus{ outline:none; background:var(--wp-branco); box-shadow:inset 0 0 0 1px var(--wp-borda-forte); }
.tm-x{ border:none; background:transparent; color:var(--wp-tinta-suave); cursor:pointer; font-size:12px; padding:2px 4px; border-radius:6px; }
.tm-x:hover{ color:#a8432f; background:var(--wp-cartao-2); }
.tm-sws{ width:100%; display:flex; gap:6px; padding:4px 2px 2px 26px; }
.tm-add{ display:block; width:100%; text-align:left; border:none; background:transparent; color:var(--wp-tinta-suave); font:inherit; font-size:12.5px; padding:6px 4px 2px; cursor:pointer; font-family:var(--serif); }
.tm-add:hover{ color:var(--wp-tinta); }
/* ORNAMENTO do tema (brasão desenhado pela IA, tingido) — slot no canto da folha/pílula */
.bloco-folha{ position:relative; }
.bloco-folha .bf-orn{ position:absolute; top:7px; right:8px; z-index:3; pointer-events:none; }
.tm-orn-brasao{ position:relative; display:block; width:30px; height:34px; }
.tm-orn-brasao .tm-orn-escudo{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.tm-orn-brasao .tm-orn-svg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.tm-orn-brasao .tm-orn-svg svg{ width:58%; height:58%; display:block; }
.tm-orn-canto, .tm-orn-divisoria{ display:inline-flex; width:26px; height:26px; }
.tm-orn-canto svg, .tm-orn-divisoria svg{ width:100%; height:100%; }
/* MODELOS DE CARTÃO: mesmo flyout, rótulos maiores (quebram em 2 linhas) + thumb com proporção de card */
.mc-menu{ grid-template-columns:repeat(3, 84px); gap:5px; max-width:none; }
.mc-menu .ft-op{ width:84px; }
.mc-menu .ft-lab{ white-space:normal; text-align:center; line-height:1.12; max-width:80px; min-height:1.12em; }
.mc-cab{ grid-column:1/-1; font-size:11px; color:var(--wp-tinta-suave); padding:1px 4px 5px; text-align:center; border-bottom:1px solid var(--wp-borda); margin-bottom:3px; font-family:var(--serif); }
/* CARROSSEL de formatos: tira flutuante ◂ nome (i/n) ▸ ✓ */
.mc-carrossel{ position:fixed; z-index:92; display:flex; align-items:center; gap:4px; background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:11px; padding:4px 6px; box-shadow:var(--wp-alt-3); }
.mc-car-b{ background:var(--wp-cartao-2); border:1px solid var(--wp-borda); color:var(--wp-tinta); border-radius:7px; font-family:var(--serif); font-size:13px; padding:3px 9px; cursor:pointer; line-height:1.2; }
.mc-car-b:hover{ background:var(--wp-branco); border-color:var(--wp-acento); }
.mc-car-nome{ font-family:var(--serif); font-size:12.5px; color:var(--wp-tinta); padding:0 4px; white-space:nowrap; min-width:130px; text-align:center; }
/* laço (marquee) do slide */
.vs-laco{ position:absolute; border:1px solid #b6862f; background:rgba(182,134,47,.16); pointer-events:none; z-index:5; }

/* MARCA-TEXTO de TRECHO (apostila): a seleção vira <mark> (não o bloco todo) */
.kt-marca{ background:#f0c83c; color:#2a1e00; padding:0 3px; border-radius:2px; font-weight:600; }
.ap-folha mark, mark.ap-hl{ background:rgba(240,200,60,.62); color:#2a1e00; font-weight:inherit; padding:0 .12em; border-radius:2px; }
/* realce de trecho DENTRO de um bloco do mapa/slide: highlight suave, sem herdar o peso do swatch da barra */
.bloco mark, .bloco mark.kt-marca{ background:rgba(240,200,60,.55); color:#2a1e00; font-weight:inherit; padding:0 .12em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* conteúdo ESTRUTURADO dentro de um bloco (a coluna da leitura trazida pro mapa/slide) */
/* display:block = as linhas EMPILHAM (fluxo de coluna, igual à leitura) em vez de virar itens flex lado a lado */
.bloco.tem-folha{ display:block; text-align:left; padding:12px 14px; overflow:hidden; white-space:normal; }
/* pílula em EDIÇÃO deixa a barrinha da linha (bf-tools, a -11px do topo) TRANSBORDAR: sem isto o
   overflow a decapita na borda e ela parece "atrás" do bloco (efeito janela). Mesmo remédio do
   slide (.vs-bloco.folha.editando). O z sobe p/ a barra não mergulhar sob um vizinho (os blocos
   têm z inline = m.z, daí o !important; a janela CK3 a 9000 segue acima). */
.bloco.tem-folha.editando{ overflow:visible; z-index:2000 !important; }
.bloco-folha{ width:100%; text-align:left; }
.bf-linha{ margin:0 0 9px; }
.bf-linha:last-child{ margin-bottom:0; }
/* TÍTULO/SUBTÍTULO MAIORES no mapa (pesquisa 2026-07-09): tamanho relativo + bold fazem o topo da
   hierarquia sobreviver a mais zoom-out — o corpo cruza antes o piso de leitura. Só no .bloco-folha (mapa). */
.bloco-folha:not(.bf-documento) .ap-h1{ font-size:32px; font-weight:700; line-height:1.12; margin:0 0 8px; }
.bloco-folha:not(.bf-documento) .ap-h2{ font-size:20px; font-weight:700; margin:8px 0 3px; }
.bloco-folha:not(.bf-documento) .ap-sinopse-txt{ font-size:17px; }
.bloco-folha:not(.bf-documento) .ap-lead{ font-size:14px; }
.bloco-folha:not(.bf-documento) .ap-p{ font-size:13.5px; line-height:1.5; }
.bloco-folha:not(.bf-documento) .ap-resumo{ padding:9px 11px; }
/* designs ricos da leitura, compactos dentro do bloco do mapa (box/citação/timeline/divisória) */
.bloco-folha:not(.bf-documento) .ap-box{ padding:9px 11px; } .bloco-folha:not(.bf-documento) .ap-box-corpo{ font-size:13px; line-height:1.45; }
.bloco-folha:not(.bf-documento) .ap-quote{ padding:1px 0 1px 13px; } .bloco-folha:not(.bf-documento) .ap-quote-txt{ font-size:14px; } .bloco-folha:not(.bf-documento) .ap-quote-fonte{ font-size:12px; }
.bloco-folha:not(.bf-documento) .ap-timeline{ gap:9px; } .bloco-folha:not(.bf-documento) .ap-tl-data{ flex-basis:54px; font-size:13px; } .bloco-folha:not(.bf-documento) .ap-tl-texto{ font-size:13px; padding:0 0 4px 12px; }
.bloco-folha:not(.bf-documento) .ap-divisoria{ margin:4px auto; }

/* ESQUEMA — o roteiro + as setas num tipo só (2026-07-15): TÓPICO (n1, sem seta, tinta — o design
   do roteiro) → seta → (n2) → seta ↳ (n3). Numerada = números nos tópicos; título = card ap-resumo. */
.ap-esquema{ --esq-acc:var(--wp-acento); margin:6px 0 2px; counter-reset:esq; }
.esq-item{ display:flex; align-items:baseline; gap:9px; }
.esq-body{ min-width:0; }
.esq-n1{ margin:9px 0 0; font-weight:700; color:var(--wp-tinta); letter-spacing:-.01em; }
.esq-n2{ margin:8px 0 0 18px; font-weight:600; color:var(--wp-tinta); }
.esq-n3{ margin:5px 0 0 40px; font-weight:500; color:var(--wp-tinta-suave); }
.esq-num .esq-item.esq-n1::before{ counter-increment:esq; content:counter(esq) "."; flex:0 0 auto; font-weight:700; }
.ap-resumo > .ap-esquema{ margin:2px 0 0; }   /* esquema com título: dentro do card do roteiro */
.esq-item:first-child{ margin-top:0; }
.esq-ar-wrap{ flex:0 0 auto; align-self:center; display:inline-flex; }
.esq-ar{ display:block; width:1.15em; height:.82em; }
.esq-n3 .esq-ar{ width:1em; height:1em; }
.esq-n2 .esq-ar{ color:var(--esq-acc); }
.esq-n3 .esq-ar{ color:color-mix(in srgb, var(--esq-acc) 60%, var(--wp-tinta-suave)); }
.esq-lbl{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.6em; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--wp-tinta-suave); margin-right:5px; }
.esq-tag{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.78em; font-weight:500; color:var(--wp-tinta-suave); margin-left:5px; white-space:nowrap; }
.esq-add{ display:flex; gap:4px; margin-top:6px; }
.bloco-folha:not(.bf-edit) .esq-add{ display:none; }
.esq-rm{ opacity:0; margin-left:4px; }
.esq-item:hover > .esq-rm{ opacity:.7; }
/* tamanhos do esquema NO MAPA (pesquisa: ≤4/nível, palavra-chave, legível de longe) */
.bloco-folha:not(.bf-documento) .ap-esquema .esq-n1{ font-size:20px; }
.bloco-folha:not(.bf-documento) .ap-esquema .esq-n2{ font-size:19px; }
.bloco-folha:not(.bf-documento) .ap-esquema .esq-n3{ font-size:16px; }

/* LAYOUT HORIZONTAL do bloco-folha no MAPA: colunas de texto (tipo 'coluna' quebra) + imagem à dir (a aba segue vertical) */
.bloco-folha.bf-horizontal .bf-cols{ display:flex; gap:14px; align-items:flex-start; }
.bloco-folha.bf-horizontal .bf-col-esq{ flex:1 1 auto; min-width:0; position:relative; }
.bloco-folha.bf-horizontal .bf-col-dir{ flex:0 0 44%; max-width:44%; display:flex; flex-direction:column; gap:10px; align-items:center; }
.bloco-folha.bf-horizontal .bf-col-dir .bf-linha{ margin:0; }
/* 2+ colunas de TEXTO (bf-multi): repartem igual; a coluna de imagens estreita p/ 32% */
.bloco-folha.bf-multi .bf-col-esq{ flex:1 1 0; }
.bloco-folha.bf-multi .bf-col-dir{ flex:0 0 32%; max-width:32%; }
/* o DIVISOR de coluna (linha tipo 'coluna'): régua vertical discreta na borda direita da coluna que ele fecha;
   alvo de hover de 10px p/ as tools (trocar tipo / ✕ / arrastar); em leitura/estudo é SÓ layout (some) */
.bloco-folha:not(.bf-documento) .bf-linha[data-tipo="coluna"]{ position:absolute; top:0; bottom:0; right:-12px; width:10px; margin:0; }
.bloco-folha:not(.bf-documento) .bf-linha[data-tipo="coluna"] .bf-quebra-col{ height:100%; border-right:2px dashed var(--wp-borda); }
.bloco-folha:not(.bf-edit) .bf-linha[data-tipo="coluna"]{ display:none; }
/* v6 · divisórias ARRASTÁVEIS (só em edição): a régua redimensiona a coluna que fecha */
.bloco-folha.bf-edit:not(.bf-documento) .bf-linha[data-tipo="coluna"]{ cursor:col-resize; }
.bloco-folha .bf-linha[data-tipo="coluna"].bf-div-colou .bf-quebra-col{ border-right-color:var(--wp-acento); }
/* v6 P11 · ALÇA DE PISO: faixa na BASE da coluna (só em edição, nunca na apostila) */
.bf-piso{ display:none; }
.bloco-folha.bf-edit:not(.bf-documento) .bf-col-esq > .bf-piso,
.bloco-folha.bf-edit:not(.bf-documento) .bf-col-dir > .bf-piso{
  display:block; position:absolute; left:0; right:0; bottom:-9px; height:10px; cursor:row-resize; z-index:3; }
.bloco-folha.bf-edit .bf-col-dir{ position:relative; }
.bf-piso:hover, .bf-piso.bf-piso-colou{ border-bottom:2px dashed var(--wp-acento); }
.bf-div-img{ display:none; }
.bloco-folha.bf-edit .bf-col-dir{ position:relative; }
.bloco-folha.bf-edit .bf-col-dir .bf-div-img{ display:block; position:absolute; left:-9px; top:0; bottom:0; width:10px; cursor:col-resize; }
.bloco-folha.bf-edit .bf-col-dir .bf-div-img:hover,
.bloco-folha.bf-edit .bf-col-dir .bf-div-img.bf-div-colou{ border-left:2px dashed var(--wp-acento); }
/* imagem CENTRALIZADA (preferência do dono ao montar aulas) */
.bloco-folha:not(.bf-documento) .ap-fig{ text-align:center; }
.bloco-folha:not(.bf-documento) .ap-img{ display:block; margin:0 auto; max-height:180px; }
/* bf-fill: a coluna de imagens PREENCHE a altura da pílula (mata o vão). A imagem é ABSOLUTA no wrapper
   → contribui ZERO ao scrollHeight → a altura da coluna SEGUE a coluna de texto (sem loop com ajustarAltura). */
.bloco-folha.bf-fill .bf-cols{ align-items:stretch; }
.bloco-folha.bf-fill .bf-col-dir .bf-linha{ flex:1 1 0; min-height:70px; display:flex; width:100%; }
.bloco-folha.bf-fill .bf-col-dir .bf-fig{ flex:1; display:flex; flex-direction:column; width:100%; margin:0; }
.bloco-folha.bf-fill .bf-col-dir .ap-img-wrap{ flex:1; min-height:0; position:relative; display:block; }
.bloco-folha.bf-fill .bf-col-dir .ap-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-height:none; margin:0; }
/* IMAGEM FLUTUANTE (float, 2026-07-16): a foto é um RECORTE que o texto CONTORNA e segue embaixo —
   substitui a grade .ap-ti. O .bf-linha da foto flutua na largura imgW (cap 62% p/ sobrar coluna de
   texto); as linhas de texto seguintes encurtam ao redor. Vale nos 3 canvas (é o mesmo motor). */
.bloco-folha .bf-linha.bf-flutua{ float:right; max-width:62%; margin:2px 0 10px 18px; z-index:2; }   /* z2: a FOTO vence a hierarquia do mouse na área dela (os retângulos de texto são position:relative e passam por baixo — sem isto, clicar na foto ativava o box invisível) e TAMPA o pedaço fantasma dos pontilhados */
.bloco-folha .bf-linha.bf-flutua.bf-esq{ float:left; margin:2px 18px 10px 0; }
.bloco-folha .bf-linha.bf-flutua .ap-fig{ margin:0; text-align:left; }
.bloco-folha .bf-linha.bf-flutua .ap-img{ display:block; height:auto; max-height:none; margin:0; }
.bloco-folha .bf-clear{ clear:both; height:0; overflow:hidden; }
.bf-mini.bf-lado-on{ background:var(--wp-acento); color:#fff; border-color:var(--wp-acento); }   /* lado atual da foto (◧/▭/◨) em destaque */
/* CARDS × foto flutuante: parágrafo contorna LINHA A LINHA, mas card (box/citação/resumo/esquema/
   cronologia) é CAIXA — a borda deslizava por baixo do float. flow-root (BFC) = a caixa se RESTRINGE
   ao lado da foto (borda junto); e se a coluna ficar mais apertada que o min-width, o card DESCE
   INTEIRO pra baixo da foto (posição flexível — nada de camadas sobrepostas). */
.bloco-folha .ap-box, .bloco-folha .ap-quote, .bloco-folha .ap-resumo,
.bloco-folha .ap-esquema, .bloco-folha .ap-cronologia{ display:flow-root; min-width:min(240px,100%); }
.bloco-folha .bf-linha[data-tipo="divisoria"]{ clear:both; }   /* divisória é traço de seção: nunca ao lado da foto — limpa o float */
/* MODO DOCUMENTO (Etapa 1 da unificação 2026-07-15): o MESMO motor desenha a APOSTILA — vertical,
   tipografia da leitura (as regras compactas de pílula acima não valem aqui — :not(.bf-documento)),
   imagem no fluxo com alça/galeria; o ▥ vira régua horizontal discreta (colunas locais = Etapa 3). */
.bloco-folha.bf-documento .bf-linha{ margin:0 0 14px; }
.bloco-folha.bf-documento .bf-linha[data-tipo="coluna"]{ position:static; width:auto; margin:0 0 14px; }
.bloco-folha.bf-documento .bf-linha[data-tipo="coluna"] .bf-quebra-col{ height:0; border-top:2px dashed var(--wp-borda); }
.bloco-folha.bf-documento .ap-legenda{ font-size:12px; color:#6f6043; font-style:italic; margin-top:4px; text-align:center; }
.ap-galeria > .bf-linha{ flex:1 1 0; min-width:0; margin:0; }
.ap-galeria > .bf-linha .ap-img{ width:100%; height:170px; object-fit:cover; }
/* UNIFICAÇÃO E2: o conteúdo da APOSTILA é o motor em modo documento — gestos da página */
.ap-edit .ap-folha .bf-linha{ cursor:grab; }
.ap-edit .ap-folha [contenteditable="true"]{ cursor:text; }
/* (2026-07-16) a regra "linha com bubble docado mostra a barra" MORREU: a barra agora é POR CLIQUE
   (o clique que doca o bubble já ativa a barra perto do mouse — bf-ativa abaixo) */
.bloco-folha [contenteditable="true"]{ outline:none; }
.bloco-folha [contenteditable="true"]:focus{ outline:1px solid var(--wp-acento); outline-offset:3px; border-radius:3px; }
/* ===== TEXTOS INICIAIS (2026-07-18, pedido do dono): campo VAZIO mostra um indicativo
   (data-ph, posto pelo motor) — é ::before, NÃO caractere: some assim que se escreve, sem
   nada pra deletar. O tracejadinho dá a borda/limite do campo vazio (referência visual de
   "escreva aqui" — Citação/Data/Evento/Tópico…); o foco troca pro anel sólido padrão.
   SÓ em Edição (data-modo) e NUNCA na janela CK3 (ela APRESENTA um slide) — Estudo/público limpos. */
html[data-modo="edicao"] [data-ph]:empty:not(.aba-link *)::before{
  content:attr(data-ph);
  color:color-mix(in srgb, var(--wp-tinta) 36%, transparent);
  font-style:italic; font-weight:400;
}
html[data-modo="edicao"] [data-ph]:empty:not(.aba-link *):not(:focus){
  outline:1px dashed color-mix(in srgb, var(--wp-tinta) 26%, transparent);
  outline-offset:2px; border-radius:3px;
}
.bloco-folha .bf-linha{ position:relative; }
.bf-mini{ min-width:18px; height:18px; padding:0 4px; border:1px solid var(--wp-borda); background:var(--wp-cartao-2); color:var(--wp-tinta-suave); border-radius:4px; font-size:11px; line-height:1; cursor:pointer; }
.bf-mini:hover{ background:var(--wp-branco); color:var(--wp-tinta); }
.bf-rm{ position:absolute; top:-3px; right:-3px; display:none; }
.bloco-folha .bf-linha:hover > .bf-rm{ display:inline-flex; }
/* PAINEL da linha (tipo ▾ · ↑ · ↓ · ✕) — flutua no canto, só no hover, igual à aba leitura */
.bf-tools{ position:absolute; top:-11px; right:-2px; display:none; gap:2px; z-index:7;
  background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:7px; padding:2px 3px; box-shadow:var(--wp-alt-2); }
/* barra POR CLIQUE (2026-07-16): o hover morreu — o retângulo da linha atravessa o float e a barra
   nascia longe (sobre a foto), e o caminho do mouse até ela ativava a barra de OUTRA linha.
   bf-ativa = linha clicada; o JS posiciona a barra no TOPO do conteúdo visível, com espacinho
   (left/top inline; uma por vez). */
.bloco-folha .bf-linha.bf-ativa > .bf-tools{ display:flex; }
/* LIMITES PONTILHADOS (2026-07-16, pedido do dono): enquanto uma linha está ATIVA num bloco em
   edição, TODAS as linhas daquele bloco mostram o limite do seu conteúdo visível — referência de
   "o que é o quê" pra clicar certo. Some ao clicar fora. A linha ativa fica mais forte. */
.bloco-folha.bf-edit:has(.bf-linha.bf-ativa) .bf-linha > *:first-child{
  outline:1px dashed rgba(120,90,45,.38); outline-offset:3px; border-radius:2px; }
.bloco-folha.bf-edit .bf-linha.bf-ativa > *:first-child{
  outline:1.5px dashed rgba(120,90,45,.8); }
.bf-tools .bf-sel{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda); border-radius:5px;
  font-family:var(--serif); font-size:10.5px; padding:1px 2px; max-width:96px; cursor:pointer; }
.bf-tools .bf-mini{ height:18px; min-width:18px; }
.bf-handle{ cursor:grab; }
.bf-handle:active{ cursor:grabbing; }
.bf-addbar{ display:flex; flex-wrap:wrap; gap:3px; margin-top:9px; padding-top:7px; border-top:1px dashed var(--wp-borda); }
.bf-addbar .bf-mini{ height:20px; min-width:20px; }
/* + foto no rodapé da coluna de imagens (só em edição): discreto, tracejado */
.bloco-folha .bf-col-dir .bf-addfoto{ width:100%; height:22px; background:transparent; border-style:dashed; color:var(--wp-tinta-suave); flex:0 0 auto; }
.bloco-folha .bf-col-dir .bf-addfoto:hover{ background:var(--wp-cartao-2); color:var(--wp-tinta); }

/* CLUSTER de imagens: várias fotos justificadas (estilo Flickr) dentro do bloco */
.bloco.tem-cluster{ padding:3px; overflow:hidden; background:var(--wp-branco); }
.bloco-cluster{ position:absolute; inset:3px; }
.bc-cel{ position:absolute; display:flex; flex-direction:column; overflow:hidden; }
.bc-img{ flex:1 1 auto; min-height:0; width:100%; object-fit:cover; border-radius:4px; background:#e3dcc9; display:block; }
.bc-vazio{ flex:1 1 auto; min-height:0; width:100%; border:1.5px dashed var(--wp-borda-forte); border-radius:4px; background:rgba(120,90,45,.06); }
.bc-vazio:hover{ background:rgba(120,90,45,.12); border-color:var(--wp-acento); cursor:pointer; }
.bc-legenda{ flex:0 0 auto; text-align:center; font-size:10.5px; line-height:1.2; color:#6f6043; font-style:italic; padding:3px 2px 1px; font-family:var(--serif); }
/* alças de edição da foto (aparecem no hover da célula quando o cluster está selecionado) */
.bc-alcas{ position:absolute; top:3px; right:3px; display:flex; gap:2px; z-index:4; opacity:0; transition:opacity .12s ease; }
.bc-cel:hover > .bc-alcas{ opacity:1; }
.bc-bt{ width:19px; height:19px; padding:0; border:1px solid var(--wp-borda); background:rgba(251,247,238,.94); color:var(--wp-tinta); border-radius:4px; font-size:11px; line-height:1; cursor:pointer; box-shadow:var(--wp-alt-1); }
.bc-bt:hover{ background:var(--wp-acento); color:#fff; border-color:var(--wp-acento); }
.bloco.tem-cluster.cluster-edit{ box-shadow:0 0 0 2px var(--wp-acento), var(--wp-alt-2); }
/* alça "+" GLOBAL do cluster (só existe em edição; canto de baixo, não briga com as alças por foto) */
.bloco .bc-add-glob{ position:absolute; right:4px; bottom:4px; z-index:5; }

/* efeito LINK de trecho: <a class=kt-link> — passar o mouse abre o slide vinculado (janela CK3) */
.kt-link{ color:#2f6db3; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; cursor:pointer; }
.kt-link:hover{ background:rgba(47,109,179,.13); border-radius:2px; }
/* pulso de PROGRESSO do hover: o fundo enche da esquerda pra direita no ritmo do atraso de abertura (--abrir-ms) */
.kt-link-armando{ background-image:linear-gradient(rgba(47,109,179,.22),rgba(47,109,179,.22)); background-repeat:no-repeat; background-position:left center; border-radius:2px;
                  animation:kt-armar var(--abrir-ms,450ms) linear both; }
@keyframes kt-armar{ from{ background-size:0% 100%; } to{ background-size:100% 100%; } }
@media (prefers-reduced-motion: reduce){ .kt-link-armando{ animation:none; } }

/* ===== NASCIMENTO: fade curto e universal nas superfícies flutuantes (fim do "pipoca seco") =====
   opacity-only onde a ancoragem pode usar transform (seguro em qualquer superfície);
   o CARD do modal (flex-centrado, sem transform) ainda SOBE 6px. ~150ms; respeita reduced-motion. */
@keyframes wp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes wp-surge{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* pouso confirmado (item 9): o bloco recém-chegado (importar/enviar/arrasto/biblioteca) dá um anel curto */
@keyframes bloco-pousar{ 0%{ box-shadow:0 0 0 0 rgba(154,106,44,.55); } 70%{ box-shadow:0 0 0 10px rgba(154,106,44,0); } 100%{ box-shadow:0 0 0 0 rgba(154,106,44,0); } }
.bloco.bloco-pousado{ animation:bloco-pousar .7s ease; }
@media (prefers-reduced-motion: reduce){ .bloco.bloco-pousado{ animation:none; } }
/* item 10: troca ✎ Edição / 👁 Estudo — as barras do mapa ENTRAM com fade+slide (fim do corte seco triplo).
   Só entrada (elas nascem ao voltar pra Edição; no Estudo o display:none as tira). Reusa wp-surge. */
#barra-kit, #barra-dados{ animation:wp-surge .18s ease; }
@media (prefers-reduced-motion: reduce){ #barra-kit, #barra-dados{ animation:none; } }
/* fade nos PAINÉIS DE LINHA (bf-tools/ap-tools: tipo ▾ · ↑ · ↓ · ✕) — surgem no CLIQUE da linha; entrada curta (só opacity) */
.bf-tools, .ap-tools{ animation:wp-fade .12s ease; }
@media (prefers-reduced-motion: reduce){ .bf-tools, .ap-tools{ animation:none; } }
.kt-pop, .ft-menu, .mc-carrossel, .ap-bloco-menu, .save-pop, .vs-menu-tipos, .aba-link, .ap-import-ov, #roteiro-flutuante.aberto{ animation:wp-fade .15s ease; }
.ap-import-card{ animation:wp-surge .18s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce){
  .kt-pop, .ft-menu, .mc-carrossel, .ap-bloco-menu, .save-pop, .vs-menu-tipos, .aba-link, .ap-import-ov, #roteiro-flutuante.aberto, .ap-import-card{ animation:none; }
}

/* 🔗 RELAÇÕES: rótulo/resumo no meio da linha (fundo cor-do-papel "corta" o traço) + toolbar de direção */
.cx-rotulo{ position:absolute; transform:translate(-50%,-50%); z-index:6; display:flex; align-items:center; gap:4px; font-family:var(--serif); }
.cx-txt{ min-width:12px; font-size:12px; line-height:1.25; color:var(--wp-tinta); background:var(--wp-cartao); border:1px solid transparent;
  border-radius:6px; padding:1px 7px; white-space:nowrap; cursor:text; box-shadow:0 0 0 3px var(--wp-cartao); }
.cx-txt:focus{ outline:none; border-color:var(--wp-acento); }
.cx-rotulo.vazio .cx-txt:not(:focus)::before{ content:'+ relação'; color:var(--wp-tinta-suave); font-style:italic; }
.cx-tb{ display:flex; gap:2px; opacity:0; transition:opacity .12s; }
.cx-rotulo:hover .cx-tb{ opacity:1; }
.cx-rotulo.somente-leitura .cx-tb{ display:none; }
.cx-bt{ width:20px; height:20px; padding:0; border:1px solid var(--wp-borda); background:var(--wp-cartao); color:var(--wp-tinta);
  border-radius:5px; cursor:pointer; font-size:12px; line-height:1; }
.cx-bt:hover{ border-color:var(--wp-acento); }
.cx-rotulo.tem-slide .cx-txt{ text-decoration:underline dotted var(--wp-acento); cursor:help; }   /* resumo com slide pendurado: abre no hover */
.cx-rotulo.tem-slide .cx-slide{ color:var(--wp-acento); border-color:var(--wp-acento); }
/* alça de PUXAR relação (borda direita do bloco selecionado) */
.bloco-alca-rel{ position:absolute; width:18px; height:18px; border-radius:50%; background:var(--wp-acento); border:2px solid var(--wp-cartao);
  cursor:crosshair; z-index:8; box-shadow:0 1px 3px rgba(40,25,5,.3); }
.bloco-alca-rel::after{ content:'🔗'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:9px; }
.bloco-alca-rel:hover{ transform:scale(1.15); }

/* BARRINHAS flutuantes do mapa (texto e imagem): controles perto do objeto (com folga) */
.mapa-texto-toggle, .mapa-img-toggle{ position:fixed; z-index:92; display:flex; align-items:center; gap:3px; padding:4px 6px; max-width:96vw; flex-wrap:wrap; }
/* barra de AGRUPAMENTO: rótulo "Tema" ao lado do swatch de cor; frente/trás minimalistas; separador do dock de trecho */
.kt-cor-lab{ margin-left:4px; font-family:var(--serif); font-size:12px; }
.mapa-texto-toggle .mtt-z, .mapa-img-toggle .mtt-z{ min-width:22px; padding:0 5px; font-size:14px; line-height:1; }
.mapa-texto-toggle .mtt-sep, .mapa-img-toggle .mtt-sep{ display:inline-block; width:1px; align-self:stretch; margin:2px 3px; background:rgba(60,40,10,.18); }
.mapa-texto-toggle .mtt-trecho:empty{ display:none; }   /* sem trecho em edição, o dock não ocupa espaço */
/* bubble-menu de TRECHO (compartilhado pelos 3 canvas): flutua junto da seleção, em document.body */
#kt-bubble{ position:fixed; z-index:91; display:none; gap:2px; padding:3px; background:var(--wp-cartao,#fbf7ee);
  border:1px solid rgba(60,40,10,.22); border-radius:9px; box-shadow:0 5px 16px rgba(40,25,5,.24); }
#kt-bubble .kt-bb-btn{ min-width:27px; height:25px; padding:0 5px; border:0; background:transparent; border-radius:6px;
  cursor:pointer; font-size:13px; line-height:1; color:var(--wp-tinta,#2c2113); }
#kt-bubble .kt-bb-btn:hover{ background:rgba(60,40,10,.10); }
#kt-bubble .kt-bb-btn.on{ background:var(--wp-acento,#9a6a2c); color:#fff; }
#kt-bubble .kt-bb-btn .kt-marca{ background:rgba(240,200,60,.85); color:#2a1e00; padding:0 3px; border-radius:2px; font-weight:inherit; }
/* COLAPSO: quando docado numa barra de edição de texto, o bubble deixa de flutuar e vira um grupo inline */
#kt-bubble.kt-docked{ position:static; z-index:auto; padding:0; gap:1px; background:transparent; border:0; box-shadow:none;
  border-left:1px solid rgba(60,40,10,.18); padding-left:3px; margin-left:1px; }
/* rich por trecho no SLIDE (.vs-raiz): b/i/u nativos + marca âmbar (distinta do link .vs-hl, que tem borda) */
.vs-raiz b{ font-weight:700; } .vs-raiz i{ font-style:italic; } .vs-raiz u{ text-decoration:underline; }
.vs-raiz mark, .vs-raiz mark.kt-marca{ background:rgba(240,200,60,.55); color:#2a1e00; font-weight:inherit; padding:0 .12em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* imagem redimensionável na apostila (alça no canto) */
.ap-img-wrap{ position:relative; display:inline-block; max-width:100%; line-height:0; }
.ap-img-alca{ position:absolute; right:-5px; bottom:-5px; width:14px; height:14px; background:var(--wp-acento); border:1px solid #5a4a1a; border-radius:3px; cursor:nwse-resize; z-index:3; }

/* KIT no SLIDE: fundo = cor+transparência (pintado inline); borda abaixo */
.vs-bloco[data-borda="cartao"]   { border:1px solid rgba(40,30,10,.25); border-radius:8px; }
.vs-bloco[data-borda="pilula"]   { border:1px solid rgba(40,30,10,.25); border-radius:999px; }
.vs-bloco[data-borda="tracejada"]{ border:1px dashed rgba(40,30,10,.4); }
.vs-bloco[data-fundo]:not([data-fundo="nenhum"]),
.vs-bloco[data-tema]:not([data-tema="nenhum"]),
.vs-bloco[data-borda]:not([data-borda="nenhuma"]){ box-sizing:border-box; padding:4px 10px; }

/* ===================== VISTA DE SLIDE = warm-paper (mesa + folha) =====================
   O slide vinha com chrome escuro (placeholder "a pele entra depois via tokens"). Agora
   veste a pele: fundo na COR da mesa do mapa (--wp-mesa) — SEM a textura de madeira (o
   dono pediu o slide mais limpo). A caixa 16:9 vira a FOLHA que flutua (mesma sombra do
   #mapa-moldura) e as barras viram chrome claro (cartão), como o resto da Linha. */
.vs-raiz{ background-color: var(--wp-mesa, #46301a); font-family: var(--serif); }
.vs-palco{ background:transparent; }                     /* deixa ver o fundo atrás da caixa */
/* a caixa do slide = FOLHA pousada na mesa (mesma sombra/fio do #mapa-moldura do mapa) */
.vs-caixa{
  background:var(--wp-branco); color:var(--wp-tinta); border-radius:8px;
  box-shadow:0 16px 44px rgba(20,12,3,.45), 0 3px 10px rgba(20,12,3,.32), 0 0 0 1px rgba(120,90,40,.30);
}
/* barras (superfície de edição + contexto de trecho) = chrome claro, como as abas/barras */
.vs-surface{ background:var(--wp-cartao); border-bottom:1px solid var(--wp-borda); }
.vs-ctx{ background:var(--wp-cartao-2); border-bottom:1px solid var(--wp-borda); color:var(--wp-tinta); }
.vs-ctx-sep{ background:var(--wp-borda); }
/* botões do slide = idioma da .barra .btn (papel claro; acento latão quando ativo) */
.vs-btn{ font-family:var(--serif); background:var(--wp-cartao); border:1px solid var(--wp-borda); color:var(--wp-tinta); border-radius:9px; }
.vs-btn:hover{ background:var(--wp-cartao-2); border-color:var(--wp-borda-forte); color:var(--wp-tinta); }
.vs-ctx .vs-btn[aria-pressed="true"]{ background:var(--wp-acento); border-color:var(--wp-acento); color:#fff; }
/* seleção/alça no idioma do acento (latão), não azul; legenda em tinta suave */
.vs-bloco.sel{ outline-color:var(--wp-acento); }
.vs-modo-edicao .vs-bloco.sel{ outline-color:var(--wp-acento); }
.vs-handle{ background:var(--wp-acento); border-color:#5a4a1a; }
.vs-papel-legenda{ color:var(--wp-tinta-suave); }

/* ===================== LEITURA = MONTADOR DE APOSTILA ===================== */
.ap-raiz{ width:100%; height:100%; overflow:auto; background:#e1d5ba; padding:18px 12px; box-sizing:border-box; }
.ap-folha{
  /* largura IDEAL (pesquisa de medida): conteúdo 540px @16px ≈ 67.5 caracteres/linha (faixa boa 45–75);
     folha 540 + 2×54 padding = 648px, sempre centralizada; a aba pode alargar, a coluna não. */
  max-width:648px; margin:0 auto; background:#fbf7ee; color:#2c2113; font-family:var(--serif);
  padding:40px 54px; border-radius:var(--wp-raio); box-shadow:var(--wp-alt-3); min-height:280px; box-sizing:border-box;
}
.ap-linha{ position:relative; margin:0 0 14px; }
.ap-h1{ font-size:26px; line-height:1.2; color:var(--cor-primario); margin:0 0 8px; }
.ap-h2{ font-size:19px; line-height:1.3; color:var(--cor-secundario); margin:18px 0 4px; }
.ap-p{ font-size:16px; line-height:1.6; margin:0; }   /* corpo 16px = ponto doce da medida (era 15) */
/* ===== TEMA pinta a FOLHA por DENTRO (colapso Tema+Fundo 2026-07-17) =====
   Bloco com tema (explícito ou sugerido pela região) expõe --t-titulo/--t-tinta (inline, via
   pintarPilulaTema/blocoDom); título/subtítulo/corpo/citação da folha seguem o ESQUEMA do tema —
   o dourado da paleta base (--cor-primario/secundario) não vaza pra dentro de pílula temática. */
.bloco[data-tema]:not([data-tema="nenhum"]):not([data-regiao="1"]) .ap-h1,
.bloco[data-tema-sug="1"] .ap-h1,
.aba-link-folha[data-tema] .ap-h1,
.vs-bloco[data-tema]:not([data-tema="nenhum"]) .ap-h1{ color:var(--t-titulo, var(--cor-primario)); }
.bloco[data-tema]:not([data-tema="nenhum"]):not([data-regiao="1"]) .ap-h2,
.bloco[data-tema-sug="1"] .ap-h2,
.aba-link-folha[data-tema] .ap-h2,
.vs-bloco[data-tema]:not([data-tema="nenhum"]) .ap-h2{ color:var(--t-titulo, var(--cor-secundario)); }
.bloco[data-tema]:not([data-tema="nenhum"]):not([data-regiao="1"]) .ap-p,
.bloco[data-tema]:not([data-tema="nenhum"]):not([data-regiao="1"]) .ap-sinopse-txt,
.bloco[data-tema]:not([data-tema="nenhum"]):not([data-regiao="1"]) .ap-quote-txt,
.bloco[data-tema-sug="1"] .ap-p, .bloco[data-tema-sug="1"] .ap-sinopse-txt, .bloco[data-tema-sug="1"] .ap-quote-txt,
.aba-link-folha[data-tema] .ap-p, .aba-link-folha[data-tema] .ap-sinopse-txt, .aba-link-folha[data-tema] .ap-quote-txt,
.vs-bloco[data-tema]:not([data-tema="nenhum"]) .ap-p,
.vs-bloco[data-tema]:not([data-tema="nenhum"]) .ap-sinopse-txt,
.vs-bloco[data-tema]:not([data-tema="nenhum"]) .ap-quote-txt{ color:var(--t-tinta, inherit); }
.ap-ul{ margin:4px 0; padding-left:22px; }
.ap-ul li{ font-size:16px; line-height:1.6; margin:3px 0; }
.ap-fig{ margin:0; }
.ap-img{ display:block; max-width:100%; max-height:520px; height:auto; border-radius:8px; border:1px solid var(--wp-borda); box-shadow:var(--wp-alt-1); }
.ap-img-vazia{ min-height:90px; background:rgba(120,90,45,.10); }
.ap-cap{ font-size:12px; color:#6f6043; font-style:italic; margin-top:4px; text-align:center; }
.ap-ti{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:stretch; }
.ap-ti.esq{ grid-template-columns:auto 1fr; }
.ap-ti.inteira{ align-items:start; }
/* preencher (padrão): a coluna da imagem acompanha a ALTURA DO TEXTO (cover), sem vão embaixo; "inteira" = mostra a foto toda */
.ap-ti:not(.inteira) .ap-fig{ min-height:0; height:100%; }
.ap-ti:not(.inteira) .ap-img-wrap{ height:100%; min-height:0; display:block; }
.ap-ti:not(.inteira) .ap-img{ height:100%; width:100%; object-fit:cover; max-height:none; }
/* editor: controles só no hover (folha limpa pra ler) */
.ap-edit .ap-linha:hover{ outline:1px dashed rgba(120,90,45,.4); outline-offset:6px; }
.ap-tools{ position:absolute; top:-12px; right:-4px; display:none; gap:3px; z-index:6;
  background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:8px; padding:3px 5px; box-shadow:var(--wp-alt-2); }
.ap-edit .ap-linha:hover > .ap-tools{ display:flex; }
.ap-edit .ap-linha.ap-editando > .ap-tools{ display:flex; }   /* linha em edição: barra fica à mostra p/ o bubble docado */
.ap-tools button, .ap-tools select{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda);
  border-radius:5px; font-size:11px; padding:1px 5px; cursor:pointer; font-family:var(--serif); }
.ap-tools button:hover{ background:var(--wp-acento); color:#fff; }
.ap-edit [contenteditable]:focus{ outline:none; background:rgba(182,134,47,.12); border-radius:3px; }
/* (C3) addbar da leitura vira toolbar de TOPO (sob a barra da lente), não rodapé */
.ap-addbar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; max-width:560px; margin:0 auto 12px;
  padding:6px 10px; background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:10px; box-shadow:var(--wp-alt-1); }
.ap-addbar button{ background:var(--wp-cartao-2); color:#2c2113; border:1px solid var(--wp-borda-forte); border-radius:8px;
  font-size:12px; padding:4px 11px; cursor:pointer; font-family:var(--serif); }
.ap-addbar button:hover{ background:var(--wp-branco); border-color:var(--wp-acento); }
.ap-addbar .ap-add-mini{ min-width:26px; padding:3px 7px; }   /* botões diretos de inserção (mesmo espírito do bf-mini do mapa) */
.ap-sep{ align-self:center; color:#9b8a63; padding:0 3px; }
.ap-envia{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda-forte); border-radius:8px;
  font-size:12px; padding:4px 10px; cursor:pointer; font-family:var(--serif); }
.ap-envia:hover{ background:var(--wp-acento); color:#fff; }
/* seleção de linhas (clique+Shift) + barra de envio dos selecionados */
.ap-sel{ outline:2px solid var(--wp-acento); outline-offset:4px; border-radius:3px; }
.ap-edit .ap-linha{ cursor:grab; }
.ap-edit .ap-linha [contenteditable]{ cursor:text; }   /* o campo em edição usa cursor de texto */
/* LAÇO de seleção na leitura (Shift+arraste) */
.ap-laco{ position:fixed; z-index:9400; border:1px solid var(--wp-acento); background:rgba(154,106,44,.14); border-radius:3px; pointer-events:none; }
/* FANTASMA do arrasto leitura→mapa (segue o cursor; verde quando vai soltar no mapa) */
.ap-fantasma{ position:fixed; z-index:9500; pointer-events:none; background:var(--wp-acento); color:#fff;
  font-family:var(--serif); font-size:12px; padding:4px 10px; border-radius:8px; box-shadow:var(--wp-alt-3); opacity:.92; }
.ap-fantasma.sobre{ background:#3f7a4f; }
.ap-fantasma.mover{ background:var(--wp-acento); }   /* v6: mover DENTRO da apostila (risquinho mostra o ponto) */
/* FANTASMA do arrasto de LINHA/seção→pílula (kit-rico): mesma camada/paleta do arrasto leitura→mapa
   (nunca coexistem). Verde 'fora' = vai criar pílula nova; azul 'mesclar' = vai inserir na pílula-alvo. */
.kt-fantasma-linha{ position:fixed; z-index:9500; pointer-events:none; background:var(--wp-tinta-suave); color:#fff;
  padding:4px 10px; border-radius:6px; font-family:var(--serif); font-size:12px; max-width:220px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; box-shadow:var(--wp-alt-3); opacity:.92; }
.kt-fantasma-linha.fora{ background:#3f7a4f; }
.kt-fantasma-linha.mesclar{ background:var(--wp-acento); }
.kt-fantasma-linha.mover{ background:var(--wp-acento); }   /* mover DENTRO da própria pílula (reposição interna) */
/* risquinho de inserção do MOVER: antes da linha-alvo, ou no rodapé da coluna (soltar no fim) */
.bf-linha.bf-solta-antes{ box-shadow:0 -3px 0 0 var(--wp-acento); }
.bf-col-esq.bf-solta-fim, .bf-col-dir.bf-solta-fim, .bloco.tem-folha.bf-solta-fim{ box-shadow:inset 0 -3px 0 0 var(--wp-acento); }
/* durante o arrasto de linha as barrinhas no caminho somem — só o risquinho-alvo fala */
.kt-arrastando-linha .bf-tools, .kt-arrastando-linha .bf-rm{ display:none !important; }
/* destaque no bloco-alvo enquanto arrasta uma linha por cima (vai mesclar ali) */
.bloco.bf-alvo-mesclar{ outline:2px solid var(--wp-acento); outline-offset:2px; border-radius:8px; }
/* ── v6 · FUSÃO por arraste (motor único, fisica.js) ─────────────────────────
   alvo aceso enquanto um BLOCO INTEIRO paira por cima; faixa pontilhada lateral
   = "vira coluna nova deste lado"; risquinho antes/fim reusa o idioma do ⠿. */
.bf-alvo-fundir{ outline:2px dashed var(--wp-acento); outline-offset:3px; border-radius:8px; }
.bf-alvo-fundir.bf-solta-coluna-esq{ box-shadow:inset 4px 0 0 0 var(--wp-acento); }
.bf-alvo-fundir.bf-solta-coluna-dir{ box-shadow:inset -4px 0 0 0 var(--wp-acento); }
/* plaquinha "Fundir? ✓ ✕" no ponto do drop (anti miss-click) */
.fis-plaquinha{ position:fixed; z-index:9500; display:flex; align-items:center; gap:6px;
  background:var(--wp-cartao); border:1px solid var(--wp-borda-forte); border-radius:var(--wp-raio-bar);
  padding:5px 8px 5px 10px; box-shadow:var(--wp-alt-3); font-family:var(--serif); font-size:13px; color:var(--wp-tinta); }
.fis-plaquinha button{ border:1px solid var(--wp-borda-forte); background:var(--wp-cartao-2); color:var(--wp-tinta);
  border-radius:7px; width:26px; height:24px; line-height:1; cursor:pointer; font-size:13px; }
.fis-plaquinha .fis-sim{ background:var(--wp-acento); border-color:var(--wp-acento); color:#fff; }
.fis-plaquinha .fis-sim:hover{ filter:brightness(1.08); }
.fis-plaquinha .fis-nao:hover{ background:var(--wp-cartao); }
.ap-enviar-bar{ position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  max-width:520px; margin:0 auto 12px; background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:10px; padding:8px 12px; box-shadow:var(--wp-alt-2); }
.ap-enviar-n{ color:var(--wp-tinta); font-family:var(--serif); font-size:13px; }

/* folha EMPRESTADA (espelho de pílula): aviso fixo no topo da aba, padrão da .ap-enviar-bar */
.ap-emprestada{ position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  max-width:520px; margin:0 auto 12px; background:var(--wp-cartao); border:1px dashed var(--wp-acento); border-radius:10px; padding:8px 12px; box-shadow:var(--wp-alt-2); }
.ap-emprestada span{ flex:1; color:var(--wp-tinta-suave); font-family:var(--serif); font-size:12.5px; }
.ap-emprestada button{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda-forte); border-radius:8px;
  font-size:12px; padding:4px 11px; cursor:pointer; font-family:var(--serif); }
.ap-emprestada button:hover{ background:var(--wp-acento); color:#fff; }

/* barra da LENTE (📄 Leitura / ▤ Esquema · ✏️ Personalizar / ↺ Automático): fixa no topo da aba.
   Segmento no idioma do trilho do ⟨Modo⟩ (seg-modo); cartão no padrão da .ap-enviar-bar. */
.ap-lente-bar{ position:sticky; top:0; z-index:7; display:flex; align-items:center; gap:8px;
  max-width:520px; margin:0 auto 12px; background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:10px; padding:5px 8px; box-shadow:var(--wp-alt-2); }
.ap-lente-seg{ display:flex; gap:2px; background:var(--wp-cartao-2); border-radius:9px; padding:2px; }
.ap-lente-op{ background:transparent; color:var(--wp-tinta); border:1px solid transparent; border-radius:7px;
  font-size:12px; padding:3px 10px; cursor:pointer; font-family:var(--serif); white-space:nowrap; }
.ap-lente-op:hover{ background:var(--wp-branco); border-color:var(--wp-borda); }
.ap-lente-seg .ap-lente-op.on{ background:var(--wp-cartao); border-color:transparent; box-shadow:var(--wp-alt-1); }
.ap-lente-etq{ font-family:var(--serif); font-size:11px; color:var(--wp-tinta-suave); font-style:italic; }
.ap-lente-dir{ margin-left:auto; display:flex; gap:4px; }
.ap-lente-dir .ap-lente-op{ border-color:var(--wp-borda-forte); background:var(--wp-cartao-2); }
.ap-lente-dir .ap-lente-op:hover{ background:var(--wp-acento); color:#fff; }
/* a barra de envio gruda ABAIXO da barra da lente (as duas são sticky) */
.ap-lente-bar ~ .ap-enviar-bar{ top:46px; }
/* dica do esquema automático vazio (linha _dica, nunca persistida) */
.ap-dica .ap-p{ color:#8a7a58; font-style:italic; }

/* ---- TAMANHO da aba: folha ESTENDIDA — a MESMA aba (ancorada à direita) se estica até o centro ---- */
#painel-direito{ transition:width .22s ease; }
#painel-direito.arrastando{ transition:none; }
#painel-direito.expandido:has(.ap-raiz.folha-estendida){ width:min(calc(100vw - 28px), max(900px, calc(100vw - 348px))); }
/* formatação MAIOR de apostila (medida preservada: ~74 caracteres/linha) */
.ap-raiz.folha-estendida .ap-folha{ max-width:820px; padding:48px 76px; }
.ap-raiz.folha-estendida .ap-h1{ font-size:31px; }
.ap-raiz.folha-estendida .ap-h2{ font-size:22px; }
.ap-raiz.folha-estendida .ap-p, .ap-raiz.folha-estendida .ap-ul li{ font-size:18px; }
.ap-raiz.folha-estendida .ap-lead, .ap-raiz.folha-estendida .ap-quote-txt{ font-size:19px; }
.ap-raiz.folha-estendida .ap-box-corpo, .ap-raiz.folha-estendida .ap-sinopse-txt,
.ap-raiz.folha-estendida .ap-resumo li, .ap-raiz.folha-estendida .ap-tl-texto{ font-size:17px; }
.ap-raiz.folha-estendida .ap-lente-bar{ max-width:640px; }
/* alça de arrasto na borda esquerda (aparece só com a leitura ativa e o painel aberto) */
.ap-alca-borda{ display:none; position:absolute; left:0; top:0; bottom:0; width:9px; cursor:ew-resize; z-index:8; }
.ap-alca-borda:hover, #painel-direito.arrastando .ap-alca-borda{ background:linear-gradient(90deg, rgba(154,106,44,.30), rgba(154,106,44,0)); }
#painel-direito.expandido:has(.ap-raiz) .ap-alca-borda{ display:block; }

/* IMPORTAR Linha (JSON da IA): modal central com área de colar */
.ap-import-ov{ position:fixed; inset:0; z-index:9600; background:rgba(40,25,5,.30); display:flex; align-items:center; justify-content:center; }
.ap-import-card{ width:min(560px,92vw); background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:14px; box-shadow:var(--wp-alt-3); padding:16px 18px; }
.ap-import-tit{ font-family:var(--serif); font-size:16px; color:var(--wp-tinta); font-weight:600; }
.ap-import-dica{ font-family:var(--serif); font-size:12.5px; color:var(--wp-tinta-suave); margin:4px 0 10px; line-height:1.4; }
.ap-import-ta{ width:100%; height:200px; box-sizing:border-box; resize:vertical; background:var(--wp-branco); color:var(--wp-tinta);
  border:1px solid var(--wp-borda); border-radius:8px; padding:9px 11px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; }
.ap-import-ta:focus{ outline:2px solid var(--wp-acento); outline-offset:0; }
.ap-import-barra{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.ap-import-erro{ flex:1; color:#a8432f; font-family:var(--serif); font-size:12px; }
/* ----- novos tipos de linha da apostila (lead / box / citação / resumo / divisória / timeline) ----- */
.ap-lead{ font-size:17px; line-height:1.55; color:#2c2113; margin:0; }
.ap-box{ border:1.5px solid var(--wp-acento); border-radius:9px; padding:11px 14px; background:rgba(154,106,44,.06); }
.ap-box-rot{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wp-acento); margin-bottom:5px; }
.ap-box-corpo{ font-size:15px; line-height:1.55; color:#2c2113; }
.ap-quote{ border-left:3px solid var(--wp-acento); padding:2px 0 2px 16px; }
.ap-quote-txt{ font-size:17px; font-style:italic; line-height:1.5; color:#4a4030; }
.ap-quote-fonte{ font-size:13px; color:#7a6c4d; margin-top:5px; }
.ap-quote-fonte:not(:empty)::before{ content:"— "; }
/* RESUMO = SINOPSE curta (o que é + por que importa): caixa com acento à esquerda, texto direto */
.ap-sinopse{ background:var(--wp-cartao-2); border:1px solid var(--wp-borda); border-left:3px solid var(--wp-acento); border-radius:8px; padding:11px 14px; }
.ap-sinopse-txt{ font-size:15px; line-height:1.55; color:#2c2113; }
.bloco-folha .ap-sinopse{ padding:9px 11px; } .bloco-folha:not(.bf-documento) .ap-sinopse-txt{ font-size:13px; line-height:1.45; }
.ap-resumo{ background:var(--wp-cartao-2); border:1px solid var(--wp-borda); border-radius:10px; padding:13px 16px; }
.ap-resumo-tit{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wp-acento); margin-bottom:7px; }
.ap-resumo ul{ margin:0; padding-left:20px; } .ap-resumo li{ font-size:15px; line-height:1.5; margin:4px 0; }
.ap-divisoria{ width:40%; height:0; margin:6px auto; border:none; border-top:1px solid var(--wp-borda-forte); }
/* linha 'coluna' (quebra de coluna da PÍLULA): na apostila é só um lembrete em edição; some na leitura */
.ap-linha.ap-quebra-col .ap-quebra-regua{ border-top:2px dashed var(--wp-borda); color:var(--wp-tinta-suave); font-family:var(--serif); font-size:11px; text-align:center; padding-top:3px; }
.ap-raiz:not(.ap-edit) .ap-linha.ap-quebra-col{ display:none; }
/* GALERIA da leitura: imagens consecutivas lado a lado (fatia de largura pela proporção; altura uniforme) */
.ap-galeria{ display:flex; gap:10px; align-items:flex-start; margin:0 0 10px; }
.ap-galeria .ap-linha{ flex:1 1 0; min-width:0; margin:0; }
.ap-galeria .ap-fig{ margin:0; }
.ap-galeria .ap-img{ width:100%; height:170px; object-fit:cover; }
.ap-galeria .ap-cap{ font-size:11.5px; }
.ap-galeria .ap-img-alca{ display:none; }   /* imgW em px brigaria com o flex — fora do grupo continua */
/* CRONOLOGIA agrupada: título + entradas data→texto + add/remover entrada */
.ap-cronologia{ display:block; }
.ap-cronologia .ap-timeline{ position:relative; margin-bottom:6px; }
.ap-tl-titulo{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:13px; color:var(--wp-acento); margin-bottom:7px; }
.bloco-folha .ap-tl-titulo{ font-size:11.5px; margin-bottom:5px; }
.ap-tl-add, .bf-ent-add{ font-size:11px; color:var(--wp-tinta-suave); background:var(--wp-cartao-2); border:1px solid var(--wp-borda); border-radius:6px; padding:2px 9px; cursor:pointer; margin-top:5px; font-family:var(--serif); }
.ap-tl-add:hover, .bf-ent-add:hover{ background:var(--wp-branco); color:var(--wp-tinta); }
.ap-tl-rm{ position:absolute; top:-3px; right:-4px; display:none; background:var(--wp-cartao); color:var(--wp-tinta-suave); border:1px solid var(--wp-borda); border-radius:4px; font-size:10px; line-height:1; padding:1px 5px; cursor:pointer; font-family:var(--serif); }
.ap-edit .ap-cronologia .ap-timeline:hover > .ap-tl-rm{ display:block; }
.bf-ent-rm{ position:absolute; top:-3px; right:-3px; display:none; }
.bloco-folha .ap-cronologia .ap-timeline:hover > .bf-ent-rm{ display:inline-flex; }
.ap-timeline{ display:flex; gap:12px; }
.ap-tl-data{ flex:0 0 72px; text-align:right; font-weight:700; font-size:14px; color:var(--wp-acento); line-height:1.55; }
.ap-tl-texto{ flex:1; border-left:2px solid var(--wp-borda-forte); padding:0 0 6px 14px; font-size:15px; line-height:1.55; color:#2c2113; }
/* ▥ LADO A LADO — INTERVENÇÃO de colunas locais no meio do fluxo (não vai até o fim da página);
   cada coluna é uma sub-folha do próprio motor, com a mesma addbar e as mesmas barras de linha */
.bf-lado{ display:flex; align-items:flex-start; }
.bf-lado-col{ flex:1 1 0; min-width:0; }
.bf-lado-col + .bf-lado-col{ border-left:1px dashed var(--wp-borda); margin-left:16px; padding-left:16px; }
/* v6 · divisória ARRASTÁVEL do ▥ (só em edição): tira fina no vão entre as colunas */
.bf-lado-div{ flex:0 0 10px; align-self:stretch; margin:0 -13px 0 3px; cursor:col-resize; z-index:2; }
.bf-lado-div:hover, .bf-lado-div.bf-div-colou{ border-left:2px dashed var(--wp-acento); }
.bf-lado-col .bf-addbar{ margin-top:6px; }

/* ===================== ABAS (painéis) = papel claro que FLUTUA ===================== */
/* destacam das bordas (inset), cantos arredondados, sombra de altitude */
#painel-esquerdo, #painel-direito{
  background:rgba(251,247,238,.95); color:var(--wp-tinta);
  border:1px solid var(--wp-borda); border-radius:16px; box-shadow:var(--wp-alt-3);
  overflow:hidden;
}
#painel-esquerdo{ top:62px; bottom:14px; left:14px; }   /* abaixo do toggle Edição/Estudo (sup-esq) */
#painel-direito{ top:62px; bottom:14px; right:14px; }   /* (C3) subiu: Leitura/Slide agora vivem NA guia deste painel, não flutuando acima */
/* (C3) abas Leitura/Slide no TOPO do painel direito (na guia; recolhido a guia mostra só o ⇔) */
.abas-guia{ display:flex; gap:4px; align-items:center; }
.painel__guia .aba-btn{ font-family:var(--serif); font-size:12px; color:var(--wp-tinta); background:var(--wp-cartao);
  border:1px solid var(--wp-borda); border-radius:8px; padding:3px 9px; cursor:pointer; line-height:1.2; white-space:nowrap; }
.painel__guia .aba-btn:hover{ background:var(--wp-cartao-2); border-color:var(--wp-borda-forte); }
.painel__guia .aba-btn.on{ background:var(--wp-acento-suave); border-color:var(--wp-acento); color:var(--wp-tinta); }
.painel{ border:1px solid var(--wp-borda); color:var(--wp-tinta); }
.painel__guia,
#painel-inferior .painel__guia{
  background:var(--wp-cartao-2);
  color:var(--wp-tinta-suave); border-bottom:1px solid var(--wp-borda);
  font-family:var(--serif); letter-spacing:.03em;
}
.painel__guia .toggle{ border:1px solid var(--wp-borda-forte); color:var(--wp-tinta-suave);
  background:var(--wp-cartao); border-radius:8px; }
.painel__guia .toggle:hover{ background:var(--wp-cartao-2); color:var(--wp-tinta); }
.painel__slot:empty::after{ color:var(--wp-tinta-suave); }

/* ===================== TOGGLES / BARRAS flutuantes ===================== */
.barra{
  background:var(--wp-cartao); border:1px solid var(--wp-borda);
  border-radius:var(--wp-raio-bar); box-shadow:var(--wp-alt-2);
  color:var(--wp-tinta);
}
.barra .div{ background:var(--wp-borda); }
.barra .btn{
  font-family:var(--serif); color:var(--wp-tinta);
  background:transparent; border:1px solid transparent; border-radius:9px;
}
.barra .btn:hover{ background:var(--wp-cartao-2); border-color:var(--wp-borda); }
.barra .btn.on{ background:var(--wp-acento-suave); border-color:var(--wp-acento); color:var(--wp-tinta); }
.barra .btn .k{ color:var(--wp-tinta-suave); }
.barra .btn:focus-visible{ outline:2px solid var(--wp-acento); outline-offset:1px; }
.barra .btn.primaria{ color:#fff; background:var(--wp-acento); border-color:var(--wp-acento); font-weight:600; }
.barra .btn.primaria:hover{ filter:brightness(1.06); }
/* dropdowns (papel / paleta) claros */
.barra .menu{
  background:var(--wp-cartao); border:1px solid var(--wp-borda);
  border-radius:10px; box-shadow:var(--wp-alt-3); color:var(--wp-tinta);
}
.barra .menu .op:hover{ background:var(--wp-cartao-2); }
.barra .menu .op.ativa{ background:var(--wp-acento-suave); }
.barra .menu .sec{ color:var(--wp-tinta-suave); border-top:1px solid var(--wp-borda); }

/* ⟨Modo⟩: segmento limpo estilo "trilho" (Canva) */
.seg-modo .grp{ background:var(--wp-cartao-2); border-radius:9px; padding:2px; gap:2px; }
.seg-modo .btn{ border-radius:7px; }
.seg-modo .btn.on{ background:var(--wp-cartao); border-color:transparent; box-shadow:var(--wp-alt-1); }
.seg-modo .div{ background:transparent; }

/* ===================== BARRA ÚNICA do mapa (kit retrátil) ===================== */
/* funde Mapa/Apresentação + a barra de seleção + CRIAR/Salvar numa só barra que recolhe */
#barra-kit{ position:fixed; top:14px; left:0; right:0; margin:0 auto; width:-moz-fit-content; width:fit-content; z-index:27;
  display:flex; align-items:center; gap:10px; max-width:96vw; }
#barra-kit .kit-spine{ display:flex; align-items:center; gap:8px; }
#barra-kit .kit-corpo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#barra-kit.recolhida .kit-corpo{ display:none; }
#barra-kit .kit-toggle{ font-weight:700; min-width:26px; justify-content:center; }
/* hosts RE-PARENTADOS: perdem posição fixa e cartão próprio → viram grupos DENTRO do kit */
#barra-kit .ferramentaria-host, #barra-kit #barra-add-mapa{ position:static; top:auto; left:auto; right:auto; transform:none; }
#barra-kit .barra{ background:transparent; border:none; box-shadow:none; padding:0; border-radius:0; }

/* SAVE enxuto: 1 botão "💾 Salvar"; passar o mouse revela os 3 tipos (pílula/Linha/Aula) com leve fade */
.save-grp{ position:relative; }
.save-pop{ position:absolute; top:100%; left:0; padding-top:6px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.save-grp:hover .save-pop, .save-grp:focus-within .save-pop{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .15s ease, transform .15s ease; }
.save-pop-inner{ display:flex; gap:4px; background:var(--wp-cartao); border:1px solid var(--wp-borda);
  border-radius:10px; padding:5px; box-shadow:var(--wp-alt-3); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .save-pop, .save-grp:hover .save-pop, .save-grp:focus-within .save-pop{ transition:none; } }
/* no RODAPÉ (barra de status), o popover do 💾 abre pra CIMA (senão sairia da tela) */
#barra-dados .save-pop{ top:auto; bottom:100%; padding-top:0; padding-bottom:6px; transform:translateY(4px); }
#barra-dados .save-grp:hover .save-pop, #barra-dados .save-grp:focus-within .save-pop{ transform:translateY(0); }

/* SELO do save (Etapa 2): estado do autosave sempre à vista, ao lado do 💾 */
.selo-save{ align-self:center; font-family:var(--serif); font-size:11.5px; white-space:nowrap;
  padding:2px 8px; border-radius:8px; color:var(--wp-tinta-suave);
  display:inline-block; min-width:118px; box-sizing:border-box; text-align:center; }   /* largura fixa: os estados (salvando/salvo HH:MM/não salvo) não empurram mais os vizinhos (span é inline → precisa de inline-block p/ o min-width valer) */
.selo-save.pendente{ color:var(--wp-tinta); }
.selo-save.erro{ color:#fff; background:#a8432f; font-weight:600; }

/* FAIXA (raia/divisão): rótulo no TOPO (cabeçalho de fase ou nome da raia); mora no fundo */
/* RÓTULO da região = TÍTULO DE MAPA (2026-07-17): grande p/ ler do zoom-out, na cor-título
   do tema (pintada inline pelo aplicarTema); serif do letreiro, respeita a caligrafia ✍ */
.bloco[data-regiao="1"]{ align-items:flex-start; padding:10px 0 0 14px; font-weight:700; font-size:60px; line-height:1.1; font-family:var(--serif); }
/* divisão = faixa SEM tema: coluna limpa (contorno fino), sem o peso de cartão */
.bloco[data-regiao="1"][data-tema="nenhum"]{ border-color:var(--wp-borda); }

/* ===== BIBLIOTECA DE FORMAS — geometria de verdade (clip-path): a forma colorida que segura os blocos ===== */
.bloco[data-forma="arredondado"] { border-radius:14px; }   /* retângulo de cantos arredondados: o "cavalo de batalha" dos slides (border-radius, não corta texto) */
.bloco[data-forma="capsula"]  { border-radius:999px; }
.bloco[data-forma="losango"]  { clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.bloco[data-forma="hexagono"] { clip-path:polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%); }
.bloco[data-forma="banner"]   { clip-path:polygon(0% 0%, 100% 0%, 92% 50%, 100% 100%, 0% 100%, 8% 50%); }
.bloco[data-forma="balao"]    { clip-path:polygon(0% 0%, 100% 0%, 100% 74%, 30% 74%, 16% 100%, 15% 74%, 0% 74%); }
/* polígonos: sem borda/sombra retangular (o clip cortaria a borda feio) — a forma é a ÁREA preenchida */
.bloco[data-forma="losango"], .bloco[data-forma="hexagono"], .bloco[data-forma="banner"], .bloco[data-forma="balao"]{ border:none; box-shadow:none; }
.bloco[data-forma="losango"]:hover, .bloco[data-forma="hexagono"]:hover, .bloco[data-forma="banner"]:hover, .bloco[data-forma="balao"]:hover{ box-shadow:none; transform:none; }

/* MARCO DE DATA (régua): ano em destaque + tracinho descendo pro eixo; sem cartão */
.bloco[data-marco="1"]{ background:transparent; border:none; box-shadow:none; color:var(--wp-tinta);
  font-weight:700; font-size:15px; letter-spacing:.02em; justify-content:center; align-items:flex-start;
  padding:0; overflow:visible; }
.bloco[data-marco="1"]::after{ content:""; position:absolute; left:50%; top:1.55em; width:2px; height:11px;
  background:var(--wp-tinta); transform:translateX(-50%); }   /* tracinho ESCURO até a reta (só a linha do tempo usa data-marco) */
/* data ABAIXO da reta (arrastada pra baixo): texto embaixo + tracinho sobe pra reta (espelho de cima) */
.bloco[data-marco="1"][data-marco-lado="baixo"]{ align-items:flex-end; }
.bloco[data-marco="1"][data-marco-lado="baixo"]::after{ top:auto; bottom:1.55em; }

/* LINHA: eixo (—) ou divisor de fase (│) — só a reta, sem cartão; mora no fundo */
.bloco[data-linha]{ background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible; }
.bloco[data-linha]::before{ content:""; position:absolute; background:var(--wp-tinta); border-radius:2px; }   /* reta ESCURA (só a linha do tempo usa data-linha) */
.bloco[data-linha="h"]::before{ left:0; right:0; top:50%; height:3px; transform:translateY(-50%); }
.bloco[data-linha="v"]::before{ top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); }
.bloco[data-linha]:hover{ outline:1px dashed rgba(120,90,45,.5); outline-offset:2px; }

/* IMAGEM = FIGURA: imagem em cima + legenda embaixo (2 cliques pra editar a legenda) */
.bloco.tem-img{ flex-direction:column; padding:3px; background:var(--wp-branco); }
/* fit PADRÃO = preencher (cover): a foto enche a célula, sem faixa de papel vazia (cura-raiz) */
.bloco.tem-img img.wiki-img{ flex:1 1 auto; min-height:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; border-radius:5px; }
/* "Inteira" (contain): mostra a foto toda; as faixas viram passe-partout de pergaminho (estampa de museu) */
.bloco.tem-img[data-fit="inteira"]{ background:#fbf7ee; }
.bloco.tem-img[data-fit="inteira"] img.wiki-img{ object-fit:contain; }
/* imagem SOLTA que MOLDA à foto: a altura do bloco já vem ajustada à proporção (cover enche sem cortar) */
.bloco-legenda{ flex:0 0 auto; width:100%; font-size:11px; line-height:1.25; color:#6f6043; font-style:italic;
  text-align:center; padding:4px 5px 1px; font-family:var(--serif); }
.bloco.tem-img.editando{ box-shadow:0 0 0 2px var(--wp-acento), var(--wp-alt-2); }
.bloco.tem-img.editando .bloco-legenda{ background:rgba(182,134,47,.14); border-radius:3px; outline:none; }

/* ===================== ENTRADA (painel esquerdo) = busca + biblioteca, claro ===================== */
.wiki-raiz{ background:transparent; color:var(--wp-tinta); }
/* marca / LOGO da entrada (placeholder fácil de trocar) */
.wiki-marca{ display:flex; align-items:center; gap:10px; padding:15px 15px 10px; }
.wiki-logo{ width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--wp-acento); border-radius:10px; box-shadow:var(--wp-alt-1); }
.wiki-marca-txt{ display:flex; flex-direction:column; line-height:1.18; min-width:0; }
.wiki-marca-txt b{ font-size:17px; color:var(--wp-tinta); letter-spacing:.01em; }
.wiki-marca-txt i{ font-size:11px; color:var(--wp-tinta-suave); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wiki-cab{ color:var(--wp-tinta-suave); border-bottom:1px solid var(--wp-borda); }
.wiki-busca input{ background:var(--wp-branco); border:1px solid var(--wp-borda); color:var(--wp-tinta); }
.wiki-busca input:focus{ outline:2px solid var(--wp-acento); outline-offset:0; }
.wiki-status{ color:var(--wp-tinta-suave); }
.wiki-item{ background:var(--wp-cartao-2); border:1px solid var(--wp-borda); color:var(--wp-tinta); box-shadow:var(--wp-alt-1); }
.wiki-item:hover{ background:var(--wp-branco); border-color:var(--wp-acento); }
.wiki-item span{ color:var(--wp-tinta-suave); }
.wiki-mapa{ background:var(--wp-cartao-2); border:1px solid var(--wp-borda); color:var(--wp-tinta-suave); }
.wiki-mapa:hover{ background:var(--wp-branco); color:var(--wp-tinta); border-color:var(--wp-acento); }
.wiki-voltar{ color:var(--wp-tinta-suave); }
.wiki-voltar:hover{ color:var(--wp-acento); }
.wiki-pagina{ color:var(--wp-acento); border-bottom:1px solid var(--wp-borda); }
.wiki-sec{ color:var(--wp-tinta); }
.wiki-sec:hover{ background:var(--wp-cartao-2); }
.wiki-sec.ativa{ color:var(--wp-acento); border-left-color:var(--wp-acento); background:var(--wp-acento-suave); }
.wiki-sec.lvl2, .wiki-sec.lvl3{ color:var(--wp-tinta-suave); }
.wiki-sec-linha .wiki-mapa{ background:none; border:none; color:var(--wp-tinta-suave); }
.wiki-sec-linha .wiki-mapa:hover{ color:var(--wp-acento); background:var(--wp-acento-suave); }
.wiki-acao{ background:var(--wp-acento); color:#fff; border:1px solid var(--wp-acento); border-radius:8px;
  font-family:var(--serif); font-weight:600; font-size:12px; cursor:pointer; padding:5px 10px; }
.wiki-acao:hover{ filter:brightness(1.06); }
.wiki-cab2{ border-top:1px solid var(--wp-borda); }
.wiki-bibitem{ background:var(--wp-cartao-2); border:1px solid var(--wp-borda); box-shadow:var(--wp-alt-1); }
.wiki-bibitem span{ color:var(--wp-tinta-suave); }
.wiki-vazio{ color:var(--wp-tinta-suave); }
/* galeria de imagens (modal) clara */
.wiki-galeria{ background:var(--wp-cartao); border:1px solid var(--wp-borda); box-shadow:var(--wp-alt-3); }
.wg-cab{ border-bottom:1px solid var(--wp-borda); color:var(--wp-tinta-suave); }
.wg-cab b{ color:var(--wp-acento); }
.wg-cab .wg-x{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda); }
.wg-grid{ color:var(--wp-tinta-suave); }
.wg-img{ background:var(--wp-branco); border:1px solid var(--wp-borda); }
.wg-img:hover{ border-color:var(--wp-acento); box-shadow:var(--wp-alt-2); }

/* ===================== JANELAS LINKADAS (CK3) = cartão que flutua ===================== */
.aba-link{ background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:12px; box-shadow:var(--wp-alt-3); z-index:9000; overflow:hidden; }   /* janela CK3 ACIMA de todos os blocos (que usam z = m.z); overflow p/ o recorte respeitar os cantos */
/* FORMA LIVRE: slide do hover como CARTÃO de altura natural (16:9 é sugestão do editor);
   conteúdo maior que o teto (85% da tela) rola por DENTRO do cartão */
.aba-link-folha{ box-sizing:border-box; padding:10px 14px 12px; font-family:var(--serif); overflow-y:auto; overflow-x:hidden; }
.aba-link.travada{ border-color:var(--wp-acento); box-shadow:var(--wp-alt-3), 0 0 0 2px rgba(154,106,44,.40); }
.aba-link-barra button{ background:var(--wp-cartao-2); color:var(--wp-tinta-suave); border:1px solid var(--wp-borda); border-radius:5px; }
.aba-link-barra button:hover{ background:var(--wp-branco); color:var(--wp-tinta); }
/* alça ⟋ de mudar a forma da janela (⟨Edição⟩ só) — no warm-paper ela é discreta, não dourada */
.aba-link-alca{ background:linear-gradient(135deg, transparent 45%, var(--wp-borda-forte, var(--wp-borda)) 45%, var(--wp-borda-forte, var(--wp-borda)) 62%, transparent 62%); }
.aba-link:hover .aba-link-alca{ background:linear-gradient(135deg, transparent 45%, var(--wp-acento) 45%, var(--wp-acento) 62%, transparent 62%); }

/* ============================================================================
   ⚑ AMBIÊNCIA DA SALA — DESLIGADA PARA O MVP (2026-07-15, decisão do dono)
   ----------------------------------------------------------------------------
   A "mesa CK3" (tampo de madeira + chão de ladrilho + objetos de borda) leu como
   ERRO GRÁFICO: os objetos são RECORTES colados um a um (luz, sombra, perspectiva
   e escala inconsistentes → o olho lê ADESIVOS, não uma cena). Decisão do dono:
   ADIAR a ambiência p/ depois do lançamento e voltar ao CANVAS WARM-PAPER limpo
   ("warm-paper minimalista flutuante", a identidade-base do site).

   Este bloco é o INTERRUPTOR. Nada foi apagado: o DOM da mesa (tampo/objetos)
   continua sendo criado no index.html porque a FÍSICA de pan-limitado-ao-tampo
   depende dele — aqui ele só fica INVISÍVEL. O self-test detecta o estado sozinho
   pelo #dashboard, então reativar não exige mexer na suíte.

   >>> PARA REATIVAR A AMBIÊNCIA NO FUTURO: apague este bloco inteiro. <<<
   (post-mortem dos erros e o caminho certo p/ a próxima tentativa:
    DESIGN-mesa-ambiencia.md + STATUS.md; memória: [[mesa-ambiencia-adiada-mvp]].)
   ============================================================================ */

/* o mapa volta a ser PAPEL QUENTE plano — a mesma cor "flutuo" das peças (--wp-canvas) */
#dashboard{ background: var(--wp-canvas); box-shadow:none; }

/* o TAMPO de madeira e a sombra do "móvel" somem; o elemento FICA (física de pan) */
#mesa-tampo{ background:none; box-shadow:none; }
#mesa-tampo::after{ display:none; }

/* os OBJETOS de borda (velas/espadas/compasso/trilhos/luz) — a fonte do "erro gráfico" */
#mesa-objetos{ display:none; }

/* a FOLHA vira um CARTÃO LIMPO que FLUTUA: mantém o grão do pergaminho (folha-textura),
   perde a beirada rasgada, ganha raio + sombra quente (a mesa não a segura mais) */
#mapa-moldura{
  -webkit-mask-image:none; mask-image:none;
  border-radius: var(--wp-raio);
  box-shadow:
    inset 0 0 46px rgba(150,112,60,.14),
    inset 0 0 0 1px rgba(140,100,50,.16),
    var(--wp-alt-3);
}

/* o SLIDE veste o MESMO canvas plano (o self-test cobra: fundo do slide == #dashboard) */
.vs-raiz{ background-color: var(--wp-canvas); }
/* ===================== fim do interruptor de ambiência ===================== */