/* ============================================================================ 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 paginas 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:#655840; /* secundária — 5,8:1 no papel (era #7a6c4d/4,3: morria no projetor; PESQUISA-cor-projecao.md) */ --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-certo:#3d7a3f; /* verde de ACERTO (gabarito da questão objetiva) */ --wp-certo-suave:rgba(61,122,63,.12); --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); } /* ARRASTANDO: a peça na mão fica NA FRENTE de tudo (2026-09-09) — o z de repouso fazia ela sumir por baixo de uma região ou de uma pílula maior no meio do gesto. Volta ao normal ao soltar. */ .bloco.arrastando{ z-index:99999 !important; } /* BARRA DA MULTI-SELEÇÃO (peça 1, 2026-09-09): flutua SOBRE a tela, junto da área marcada. position:fixed = tamanho fixo para os olhos (não encolhe com o zoom do mapa). */ .barra.barra-multi{ position:fixed; z-index:9500; display:none; align-items:center; gap:4px; width:max-content; max-width:calc(100vw - 16px); flex-wrap:nowrap; white-space:nowrap; background:var(--wp-cartao); border:1px solid var(--wp-borda-forte); border-radius:var(--wp-raio-bar); padding:4px 6px; box-shadow:var(--wp-alt-2); } .barra.barra-multi .arranjo{ gap:4px; } /* ═══ TAMANHO FIXO PARA OS OLHOS (peça 1b, 2026-09-09) ═══ O dono, na varredura: "vamos precisar de uma matemática para o botão ter um tamanho relativo ao usuário. Não pode ficar com letra pequena no zoom out. O tamanho das barras tem que ser fixo para os olhos" — e, no ◲ Abraçar, "isso é uma crítica a TODAS as barras que não se ajustam ao leitor". A causa: alças e barrinhas moram DENTRO da superfície, então o scale da câmera as encolhia junto com o mapa (pontinhos ilegíveis no zoom-out; botões enormes no zoom-in). A contra-escala 1/zoom devolve a cada uma o tamanho que ela tem NA TELA, seja qual for o zoom. `--zoom` é publicado pelo aplicarView do mapa; onde ele não existe (apostila) o padrão 1 não muda nada. Todas estas são position:absolute — contra-escalar não desloca o layout de ninguém. */ .superficie{ --contra-zoom: calc(1 / var(--zoom, 1)); } .superficie .bloco-alca, .superficie .bloco-alca-canto, .superficie .bloco-alca-lado, .superficie .bloco-alca-rel, .superficie .bloco-alca-data{ transform:scale(var(--contra-zoom, 1)); transform-origin:center center; } .superficie .bloco-alca-rel:hover{ transform:scale(calc(var(--contra-zoom, 1) * 1.15)); } /* a barra da LINHA é posicionada por left/top com a base 8px acima do conteúdo: a âncora é o canto INFERIOR ESQUERDO, então ela cresce pra cima, longe do texto que está sendo editado. */ .superficie .bf-tools{ transform:scale(var(--contra-zoom, 1)); transform-origin:bottom left; } /* 📋 A OFERTA DE COLAR (peça 3, 2026-09-09): nasce no ponto do clique em área vazia, e só quando há algo em mãos. Some no próximo clique, no Esc ou depois de colar. */ .chip-colar{ position:fixed; z-index:9600; font-family:var(--serif); font-size:12.5px; background:var(--wp-cartao); color:var(--wp-tinta); border:1px solid var(--wp-borda-forte); border-radius:9px; padding:6px 11px; cursor:pointer; box-shadow:var(--wp-alt-2); } .chip-colar:hover{ background:var(--wp-cartao-2); border-color:var(--wp-acento); color:var(--wp-acento); } /* ✓ PRONTO (era o cadeado, 2026-09-09): o verde é o estado. Apagado = ainda em obra. */ .barra .btn.mtt-pronto{ color:var(--wp-tinta-suave); font-weight:600; } .barra .btn.mtt-pronto.on{ color:var(--wp-certo); background:var(--wp-certo-suave); border-color:var(--wp-certo); } .barra.barra-multi .bt-multi-apagar{ margin-left: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:var(--wp-alt-2); /* passo 4: escala única de altitude */ } .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 - var(--ext-inset, 348px)))); } #painel-direito.expandido:has(.vs-raiz) .ap-alca-borda{ display:block; } /* o SLIDE NOVO (oficina.js) estende igual: mesma fórmula, mesma alça (pedido do dono 2026-10-07) */ #painel-direito.expandido:has(.oficina-raiz.oficina-estendida){ width:min(calc(100vw - 28px), max(900px, calc(100vw - var(--ext-inset, 348px)))); } #painel-direito.expandido:has(.oficina-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; flex-direction:column; align-items:stretch; gap:6px; margin:0 4px 10px; } /* o BOTÃO da paleta (2026-09-08): as bolinhas saíram do topo do painel e vivem atrás dele */ .tm-paleta-bt{ display:flex; align-items:baseline; gap:6px; 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:5px 9px; cursor:pointer; text-align:left; } .tm-paleta-bt:hover{ background:var(--wp-cartao-2); } .tm-paleta-bt[aria-expanded="true"]{ border-color:var(--wp-acento); } .tm-paleta-nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tm-paleta-seta{ font-size:10px; color:var(--wp-tinta-suave); } .tm-paleta-lista{ display:flex; flex-direction:column; gap:4px; } .tm-paleta-lista[hidden]{ display:none; } .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); } /* GRADE (2026-09-08): a paleta passou de 6 p/ 14 sementes — fileira única não cabe */ .tm-sws{ width:100%; display:grid; grid-template-columns:repeat(7, 18px); gap:6px; padding:4px 2px 2px 26px; } .tm-sw-op.usada{ opacity:.42; } .tm-sw-op.usada:hover{ opacity:.75; } .tm-aviso{ font-size:11px; line-height:1.35; color:var(--wp-tinta-suave); font-family:var(--serif); margin:-2px 4px 6px 30px; } .tm-aviso.forte{ color:#a8432f; } .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 (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). 8990, não 2000 (2026-10-01, dono: "as abas que aparecem com o uso do objeto devem estar acima de tudo"): o z de cada bloco é um contador que só sobe (↑ frente, cada bloco novo), e numa aula longa passa de 2000 — aí a vizinha cobria a barra da linha. */ .bloco.tem-folha.editando{ overflow:visible; z-index:8990 !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). --pil = ESCALA TIPOGRÁFICA DA PÍLULA (2026-07-30, pedido do dono: "as letras do mapa estão pequenas para apresentação"). UM número governa todos os tamanhos da folha — mexer aqui aumenta/diminui o conjunto sem desmanchar a hierarquia. No MAPA vale 1.15; slide e janela CK3 seguem em 1 (a folha de lá já é reescalada pela LARGURA do bloco — subir a fonte lá só roubaria linha). */ .bloco-folha:not(.bf-documento){ --pil:1; --pil-resumo:13px; --pil-crono:13px; --pil-box:13px; } /* .bloco + .bloco-folha na MESMA div = a pílula do MAPA (no slide a folha é filha de .vs-folha). Rodada 2 (2026-07-30, print do dono): resumo e cronologia +2 de base SÓ no mapa — de volta ao 17 da pesquisa que a regra "compacta" lá de baixo atropelava em silêncio. Rodada 3 (mesmo dia, "resumo assim como conceito-chave e cronologia podem ser um pouco maiores"): os TRÊS CARTÕES nivelados no degrau 16 de base ⇒ ~18.4 na tela (o box deixou de ser menor que o resumo). Slide/CK3 seguem no 13. */ .bloco.bloco-folha{ --pil:1.15; --pil-resumo:16px; --pil-crono:16px; --pil-box:16px; --pil-quote:16px; } /* rodada 4 (pesquisa cor/projeção): citação = corpo essencial lido em sala → mesmo degrau 16 */ .bloco-folha:not(.bf-documento) .ap-h1{ font-size:calc(32px * var(--pil)); font-weight:700; line-height:1.12; margin:0 0 8px; } .bloco-folha:not(.bf-documento) .ap-h2{ font-size:calc(20px * var(--pil)); font-weight:700; margin:8px 0 3px; } .bloco-folha:not(.bf-documento) .ap-sinopse-txt{ font-size:calc(var(--pil-resumo,13px) * var(--pil)); } /* mesma expressão da regra da sinopse lá embaixo (que vence por ordem) — as duas andam juntas */ .bloco-folha:not(.bf-documento) .ap-lead{ font-size:calc(14px * var(--pil)); } .bloco-folha:not(.bf-documento) .ap-p{ font-size:calc(13.5px * var(--pil)); 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:calc(var(--pil-box,13px) * var(--pil)); line-height:1.45; } .bloco-folha:not(.bf-documento) .ap-box-rot{ font-size:calc(11px * var(--pil)); } /* o rótulo do box acompanha o corpo (é CAIXA ALTA: a letra desenha maior que o corpo no mesmo px) */ .bloco-folha:not(.bf-documento) .ap-quote{ padding:1px 0 1px 13px; } .bloco-folha:not(.bf-documento) .ap-quote-txt{ font-size:calc(var(--pil-quote,14px) * var(--pil)); } .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:calc(54px * var(--pil) * 1.08); font-size:calc(var(--pil-crono,13px) * var(--pil)); } .bloco-folha:not(.bf-documento) .ap-tl-texto{ font-size:calc(var(--pil-crono,13px) * var(--pil)); padding:0 0 4px 12px; } /* a coluna da data alarga junto com a letra ("718/722" não quebra em duas linhas) */ .bloco-folha:not(.bf-documento) .ap-divisoria{ margin:4px auto; } /* ===== CRÉDITOS da pílula = o PISO tipográfico do MAPA (2026-07-30, pedido do dono) ===== Legenda de foto e fonte da citação são a MESMA coisa (crédito do que está ao lado), então têm o MESMO desenho — o do "— autor" da citação: itálico, tinta suave, discreto. E são o piso: 14px que NÃO escalam com --pil (nada no mapa fica menor que eles; o resto sobe por cima). */ .bloco-folha:not(.bf-documento) .ap-legenda{ font-style:italic; color:var(--wp-tinta-suave); margin-top:4px; } .bloco.bloco-folha .ap-legenda, .bloco.bloco-folha .ap-quote-fonte{ font-size:14px; } /* 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). Marcador dos tópicos: esq-num 1. · esq-bola • · esq-letra a. (ciclo no botão da barra); 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; } .esq-letra .esq-item.esq-n1::before{ counter-increment:esq; content:counter(esq, lower-alpha) "."; flex:0 0 auto; font-weight:700; } .esq-bola .esq-item.esq-n1::before{ content:"•"; 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:calc(20px * var(--pil)); } .bloco-folha:not(.bf-documento) .ap-esquema .esq-n2{ font-size:calc(19px * var(--pil)); } .bloco-folha:not(.bf-documento) .ap-esquema .esq-n3{ font-size:calc(16px * var(--pil)); } /* 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:-13px; width:14px; margin:0; } /* a régua ocupa o VÃO INTEIRO entre as colunas (2026-08-30): 10px deixavam duas faixas mortas onde o clique só selecionava texto */ .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; } /* LADO DA IMAGEM = ALINHAMENTO (2026-07-22, sessão de testes do dono): ◧/▭/◨ alinham a foto esquerda / centralizada / direita e o conteúdo seguinte fica SEMPRE abaixo. O CONTORNO (float de 2026-07-16) morreu: os três arranjos que ele produzia liam como bug (prints do dono), e a própria aula v8 já tinha removido o contorno ("apostila não ganha nada com contorno"). Vale nos 3 canvas (é o mesmo motor). */ .bloco-folha.bf-documento .bf-linha .ap-fig{ text-align:center; } /* ▭ (sem lado) = centralizada */ .bloco-folha .bf-linha.bf-img-esq .ap-fig{ text-align:left; } /* mesma especificidade da regra acima: a ORDEM decide (esq/dir vencem) */ .bloco-folha .bf-linha.bf-img-dir .ap-fig{ text-align:right; } .bloco-folha .bf-linha.bf-img-centro .ap-fig{ text-align:center; } /* lado='centro' (2026-08-29): centralizada NA COLUNA de texto — o ▭ não a manda mais pra coluna de fotos */ .bloco-folha .bf-linha.bf-img-esq .ap-img, .bloco-folha .bf-linha.bf-img-dir .ap-img, .bloco-folha .bf-linha.bf-img-centro .ap-img{ height:auto; max-height:none; } .bloco-folha .bf-clear{ clear:both; height:0; overflow:hidden; } /* clearfix herdado (inofensivo sem floats) */ .bf-mini.bf-lado-on{ background:var(--wp-acento); color:#fff; border-color:var(--wp-acento); } /* lado atual da foto (◧/▭/◨) em destaque */ /* cards continuam BFC (borda íntegra em qualquer vizinhança) */ .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; } /* traço de seção sempre em linha própria */ /* 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:var(--wp-tinta-suave); 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 *, .mini-link *, .visor-aba *)::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 *, .mini-link *, .visor-aba *):not(:focus){ outline:1px dashed color-mix(in srgb, var(--wp-tinta) 26%, transparent); outline-offset:2px; border-radius:3px; } /* O HOVER É A DEFINIÇÃO CURTA (2026-10-15): em Edição a janela do 🔗 é um EDITOR do motor — os placeholders e o tracejado VOLTAM dentro dela (a regra acima os tira de toda .aba-link, que até então só APRESENTAVA). */ html[data-modo="edicao"] .aba-link.editando [data-ph]:empty::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"] .aba-link.editando [data-ph]:empty:not(:focus){ outline:1px dashed color-mix(in srgb, var(--wp-tinta) 26%, transparent); outline-offset:2px; border-radius:3px; } /* ✕ DA SEÇÃO (2026-10-15, dono: "crie o botão x para fechar seções da pílula que não vou usar"): o campo OPCIONAL de uma linha (rótulo do box, fonte da citação, título da cronologia/tópicos) fecha num clique — o ✕ só aparece com o mouse em cima, em Edição (o embrulho .bf-secao só existe no editável); fora da Edição, campo vazio não desenha. */ .bf-secao{ position:relative; } .bf-secao > .bf-secao-x{ position:absolute; top:-4px; right:-4px; opacity:0; z-index:2; } .bf-secao:hover > .bf-secao-x{ opacity:.75; } .bf-secao > .bf-secao-x:hover{ opacity:1; } html:not([data-modo="edicao"]) :is(.ap-box-rot, .ap-quote-fonte, .ap-tl-titulo, .ap-resumo-tit):empty{ display:none; } .aba-link.editando{ cursor:default; } .aba-link.editando .aba-link-folha{ transform:none; } .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; } /* ══ ⇥ MESMA LINHA / ⇊ MESMA COLUNA + A COLUNA COMO LUGAR (2026-08-29) ══════════════════════════ O dono reportou três coisas na mesma sessão: não dava pra arrastar nada pra uma coluna nova, não dava pra criar dentro dela, e "Coluna"/"Lado a lado" eram dois jeitos da mesma ideia. A resposta dele: um par de botões que põe as coisas MARCADAS na mesma linha ou na mesma coluna — as mesmas duas teclas para as pílulas do mapa e para as seções de dentro do cartão. Aqui mora o visual: a faixa marcada · os dois botões (ícone = miniatura do resultado, desenhada por formatos.js) · a coluna vazia, que deixou de ter altura ZERO e virou um lugar de verdade. */ .ft-thumb.ft-mini{ width:22px; height:13px; border-radius:3px; } .ft-thumb.ft-mini .ft-cel{ border-radius:1px; } .bf-mini.bf-arranjo{ display:none; padding:0 3px; } .bloco-folha.bf-tem-sel .bf-mini.bf-arranjo{ display:inline-flex; align-items:center; } /* ⊕ agrupar as seções marcadas: mesmo gatilho dos ⇥/⇊ (2+ marcadas) */ .bf-mini.bf-so-marcadas{ display:none; } .bloco-folha.bf-tem-sel .bf-mini.bf-so-marcadas{ display:inline-flex; align-items:center; } .bf-mini.bf-desfaz{ display:inline-flex; align-items:center; padding:0 3px; } /* dentro do ▥: a volta pro fluxo fica sempre à mão */ .bloco-folha.bf-edit .bf-linha.bf-marcada > *:first-child{ outline:2px solid var(--wp-acento); outline-offset:3px; border-radius:2px; } .btn.bt-arranjo{ padding:3px 6px; line-height:0; } /* o par na barra do mapa (escala das pílulas) */ .btn.bt-arranjo .ft-thumb{ width:26px; height:16px; } .bloco-folha.bf-edit:not(.bf-documento) .bf-col-esq{ min-height:52px; } /* coluna vazia media 0px: não dava pra acertar com o mouse */ .bf-vazia{ display:none; } .bloco-folha.bf-edit:not(.bf-documento) .bf-vazia{ display:block; min-height:44px; box-sizing:border-box; padding:10px 8px; border:1.5px dashed var(--wp-borda); border-radius:6px; cursor:pointer; font-family:var(--serif); font-size:11px; line-height:1.25; color:var(--wp-tinta-suave); text-align:center; } .bloco-folha.bf-edit:not(.bf-documento) .bf-vazia:hover{ border-color:var(--wp-acento); color:var(--wp-tinta); } .bloco-folha.bf-edit:not(.bf-documento) .bf-col-esq.bf-col-ativa{ box-shadow:inset 0 -2px 0 0 var(--wp-acento); } /* a coluna que o + está mirando */ /* a BARRA DE CRIAR dentro da coluna ativa (2026-08-30): ela É o sinal de qual coluna recebe o que for criado — por isso mora lá dentro, e não num rodapé só à esquerda do cartão */ .bf-addbar.bf-addbar-col{ margin-top:8px; } /* + 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); } /* ✕ EXCLUIR O BLOCO/COLUNA (bloco-folha.js botaoExcluirColuna, 2026-10-10): no canto de cima à direita, fora do fluxo (não mexe no layout nem nas medidas do "caber"); aparece ao passar o mouse na coluna, só em Edição */ .bloco-folha .bf-col-esq > .bf-col-x, .bloco-folha .bf-col-dir > .bf-col-x{ position:absolute; top:2px; right:2px; z-index:4; width:22px; height:22px; padding:0; line-height:20px; font-size:12px; border-radius:50%; background:var(--wp-cartao); color:var(--wp-tinta-suave); border:1px solid var(--wp-borda); box-shadow:var(--wp-alt-1); visibility:hidden; } html[data-modo="edicao"] .bloco-folha .bf-col-esq:hover > .bf-col-x, html[data-modo="edicao"] .bloco-folha .bf-col-dir:hover > .bf-col-x, html[data-modo="edicao"] .bloco-folha .bf-col-x:focus-visible{ visibility:visible; } .bloco-folha .bf-col-x:hover{ color:var(--wp-tinta); border-color:var(--wp-acento); background:var(--wp-cartao-2); } /* 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:var(--wp-tinta-suave); 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: — 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:var(--wp-alt-1); } .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); } /* ➕ Data: botão da LINHA DO TEMPO selecionada (canto inferior esquerdo do eixo) — larga uma data presa à reta */ .bloco-alca-data{ position:absolute; height:22px; padding:0 10px; display:flex; align-items:center; border:1px solid var(--wp-borda); border-radius:11px; background:var(--wp-cartao); color:var(--wp-tinta); font:600 11px/1 -apple-system,system-ui,sans-serif; white-space:nowrap; cursor:pointer; z-index:8; box-shadow:var(--wp-alt-1); user-select:none; } .bloco-alca-data:hover{ border-color:var(--wp-acento); color:var(--wp-acento); } /* 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:var(--wp-alt-2); } /* passo 4: escala única de altitude */ #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:var(--wp-alt-3), 0 0 0 1px rgba(120,90,40,.30); /* passo 4: a mesma altitude da folha do mapa + o fio */ } /* barras (superfície de edição + contexto de trecho) = chrome claro, como as paginas/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"]) .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"]) .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"]) .ap-p, .bloco[data-tema]:not([data-tema="nenhum"]) .ap-sinopse-txt, .bloco[data-tema]:not([data-tema="nenhum"]) .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:var(--wp-tinta-suave); 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 do TOPO da aba (＋ página · ⤢ Estender): fixa no topo. As lentes morreram na faxina de 2026-07-21 — sobrou a barra como casa dos botões sempre-à-mão. */ .ap-topo-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-topo-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-topo-op:hover{ background:var(--wp-branco); border-color:var(--wp-borda); } .ap-topo-dir{ margin-left:auto; display:flex; gap:4px; } .ap-topo-dir .ap-topo-op{ border-color:var(--wp-borda-forte); background:var(--wp-cartao-2); } .ap-topo-dir .ap-topo-op:hover{ background:var(--wp-acento); color:#fff; } /* barra das ABAS do painel direito (2026-07-20): SÓ existe com 2+ paginas — uma aba sozinha não ganha chrome pra anunciar que está sozinha (decisão do dono). Fica ACIMA da barra da lente. */ .ap-paginas-bar{ position:sticky; top:0; z-index:8; display:flex; align-items:center; gap:4px; max-width:520px; margin:0 auto 8px; background:var(--wp-cartao); border:1px solid var(--wp-borda); border-radius:10px; padding:4px 6px; box-shadow:var(--wp-alt-2); } .ap-pagina{ display:flex; align-items:center; gap:6px; background:transparent; color:var(--wp-tinta-suave); border:1px solid transparent; border-radius:7px; font-family:var(--serif); font-size:12px; padding:3px 9px; cursor:pointer; white-space:nowrap; max-width:150px; min-width:0; } .ap-pagina .ap-pagina-nome{ overflow:hidden; text-overflow:ellipsis; } .ap-pagina:hover{ background:var(--wp-cartao-2); } .ap-pagina.on{ background:var(--wp-cartao-2); color:var(--wp-tinta); border-color:var(--wp-borda); } .ap-pagina.on .ap-pagina-nome{ box-shadow:0 2px 0 var(--wp-acento); } .ap-pagina-x{ background:transparent; border:0; color:var(--wp-tinta-suave); cursor:pointer; font-size:10px; line-height:1; padding:1px 2px; border-radius:4px; } .ap-pagina-x:hover{ background:var(--wp-acento); color:#fff; } .ap-pagina[data-arrastando="1"]{ opacity:.45; } /* setas de folhear (◀ ▶) — a navegação SEQUENCIAL das páginas, no idioma dos botões da lente */ .ap-pag-seta{ background:transparent; border:1px solid transparent; border-radius:7px; color:var(--wp-tinta-suave); font-size:11px; line-height:1; padding:4px 6px; cursor:pointer; flex:none; } .ap-pag-seta:hover:not(:disabled){ background:var(--wp-cartao-2); color:var(--wp-tinta); } .ap-pag-seta:disabled{ opacity:.28; cursor:default; } .ap-pag-conta{ font-family:var(--serif); font-size:11px; color:var(--wp-tinta-suave); margin-left:2px; flex:none; } /* ENDEREÇO da página (o acervo): discreto, no rodapé, e só quando existe */ .ap-endereco{ max-width:520px; margin:14px auto 4px; padding-top:8px; border-top:1px solid var(--wp-borda); font-family:var(--serif); font-size:11px; color:var(--wp-tinta-suave); } .ap-endereco a{ color:var(--wp-acento); text-decoration:none; } .ap-endereco a:hover{ text-decoration:underline; } .ap-endereco-lic{ opacity:.75; } .ap-raiz.folha-estendida .ap-endereco{ max-width:640px; } .ap-pagina[data-alvo="esq"]{ box-shadow:inset 2px 0 0 var(--wp-acento); } .ap-pagina[data-alvo="dir"]{ box-shadow:inset -2px 0 0 var(--wp-acento); } .ap-raiz.folha-estendida .ap-paginas-bar{ max-width:640px; } /* com a barra das paginas presente, as sticky de baixo descem (empilhamento) */ .ap-paginas-bar ~ .ap-topo-bar{ top:42px; } /* 3 classes de propósito: empata em especificidade com a regra de 2 logo abaixo e ela vence por ordem */ .ap-paginas-bar ~ .ap-topo-bar ~ .ap-enviar-bar{ top:88px; } /* a barra de envio gruda ABAIXO da barra da lente (as duas são sticky) */ .ap-topo-bar ~ .ap-enviar-bar{ top:46px; } /* ---- 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; } /* o inset é a largura VIVA do painel esquerdo (--ext-inset, publicado pelo leitura-apostila.js): com a ENTRADA recolhida a folha vai até a beira; com ela aberta, para ao lado dela */ #painel-direito.expandido:has(.ap-raiz.folha-estendida){ width:min(calc(100vw - 28px), max(900px, calc(100vw - var(--ext-inset, 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-topo-bar{ max-width:640px; } /* página de QUADRO (tipo slide): o 16:9 como um box no fluxo da coluna da apostila */ .ap-quadro{ max-width:648px; margin:0 auto 12px; } .ap-raiz.folha-estendida .ap-quadro{ max-width:820px; } /* 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:var(--wp-tinta-suave); 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:calc(var(--pil-resumo,13px) * var(--pil)); 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; } /* ----- QUESTÕES (página de questões, 2026-07-21): alternativas a)–e), gabarito e comentário ----- */ .ap-alts{ margin:2px 0; } .alt-item{ display:flex; align-items:flex-start; gap:9px; padding:3px 0; } .alt-letra{ flex:0 0 auto; min-width:24px; height:24px; line-height:22px; box-sizing:border-box; text-align:center; border:1px solid var(--wp-borda-forte); border-radius:50%; color:var(--wp-tinta-suave); font-size:12.5px; font-family:var(--serif); } .bf-edit .alt-letra{ cursor:pointer; } .bf-edit .alt-letra:hover{ border-color:var(--wp-certo); color:var(--wp-certo); } .alt-txt{ flex:1 1 auto; min-width:0; font-size:15px; line-height:1.55; color:var(--wp-tinta); padding-top:1px; } .bloco-folha:not(.bf-documento) .alt-txt{ font-size:calc(13px * var(--pil)); line-height:1.45; } .alt-rm{ opacity:0; margin-left:4px; } .alt-item:hover > .alt-rm{ opacity:.7; } .alt-add{ margin:2px 0 0 33px; } .bloco-folha:not(.bf-edit) .alt-add{ display:none; } /* a MARCA do gabarito: aparece em EDIÇÃO e na visão com gabarito — nunca na visão padrão do aluno */ .bf-edit .alt-item.alt-correta .alt-letra, .ap-raiz.ap-com-gab .alt-item.alt-correta .alt-letra{ background:var(--wp-certo); border-color:var(--wp-certo); color:var(--wp-branco); font-weight:700; } .ap-raiz.ap-com-gab .alt-item.alt-correta .alt-txt{ background:var(--wp-certo-suave); border-radius:6px; padding:1px 6px; } /* gabarito (resposta esperada) e comentário do professor: caixas irmãs do box */ .ap-box.ap-gab{ border-color:var(--wp-certo); border-style:dashed; background:var(--wp-certo-suave); } .ap-box.ap-gab .ap-box-rot{ color:var(--wp-certo); } .ap-box.ap-coment{ border-color:var(--wp-borda-forte); background:var(--wp-cartao-2); } .ap-box.ap-coment .ap-box-rot{ color:var(--wp-tinta-suave); } /* Estudo (fora da Edição): a visão padrão ESCONDE as respostas; linha vazia some nas duas visões */ .ap-raiz.ap-sem-gab .bf-linha[data-tipo="gabarito"], .ap-raiz.ap-sem-gab .bf-linha[data-tipo="comentario"]{ display:none; } .ap-raiz.ap-questoes:not(.ap-edit) .bf-linha.ap-vazia{ display:none; } /* janela CK3 do hover no ⟨Estudo⟩: ali não há toggle — as respostas ficam guardadas (anti-spoiler); linhas vazias (apoio/comentário de molde não usados) também somem do cartão. A MESMA face aberta pela miniatura (miniatura.js) e no visor da aba segue a mesma regra (revisão 2026-10-07). */ html[data-modo="estudo"] :is(.aba-link, .mini-link, .visor-aba) .bf-linha[data-tipo="gabarito"], html[data-modo="estudo"] :is(.aba-link, .mini-link, .visor-aba) .bf-linha[data-tipo="comentario"], html[data-modo="estudo"] :is(.aba-link, .mini-link, .visor-aba) .bf-linha.ap-vazia{ display:none; } /* moldes na addbar + toggle do gabarito no topo */ .ap-addbar .ap-add-molde{ font-weight:600; } .ap-topo-dir .ap-topo-op.ap-topo-gab.on{ background:var(--wp-certo); border-color:var(--wp-certo); color:#fff; } .ap-topo-dir .ap-topo-op.ap-topo-gab.on:hover{ background:var(--wp-certo); } /* 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:calc(11.5px * var(--pil,1)); margin-bottom:5px; } /* o rótulo CRONOLOGIA acompanha a escala do mapa (como o do box) */ .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) paginas Leitura/Slide no TOPO do painel direito (na guia; recolhido a guia mostra só o ⇔) */ .paginas-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); } /* a LUPA da aba esquerda é a MESMA peça das abas 📖/▭ da direita, com o traço em latão */ .painel__guia .wiki-lupa{ padding:3px 9px 3px 7px; } .painel__guia .wiki-lupa .wiki-lupa-ic{ color:var(--wp-acento); opacity:.9; } .painel__guia .wiki-lupa:hover .wiki-lupa-ic, .painel__guia .wiki-lupa.on .wiki-lupa-ic{ opacity:1; } .wiki-cab-t .wiki-lupa-ic{ color:var(--wp-acento); opacity:.85; } .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; } /* ===== CHIP E CHEVRON (2026-10-15, revisão de estética) — abas.js veste as duas guias ===== O botão de abrir/fechar é um círculo de papel sem borda com um chevron de traço fino (a seta aponta o movimento da folha; data-seta="dir" espelha o desenho). A aba RECOLHIDA não é mais a faixa até o pé da tela: é um CHIP preso à borda — a palavra (Biblioteca / Páginas / Apostila; no público Índice / Apostila) + o chevron. Aberta, a palavra some (o conteúdo já se apresenta); no público ela fica, como cabeçalho. */ .painel__guia .toggle{ width:26px; height:26px; flex:none; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--wp-tinta-suave); background:var(--wp-cartao); box-shadow:var(--wp-alt-1); cursor:pointer; font-size:0; } .painel__guia .toggle:hover{ background:var(--wp-acento-suave); color:var(--wp-tinta); } .painel__guia .toggle:focus-visible{ outline:2px solid var(--wp-acento); outline-offset:2px; } .painel__guia .toggle svg{ display:block; } .painel__guia .toggle[data-seta="dir"] svg{ transform:scaleX(-1); } .guia-rotulo{ border:0; background:transparent; cursor:pointer; padding:4px 4px; border-radius:6px; white-space:nowrap; font-family:var(--serif); font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--wp-tinta); } .guia-rotulo:hover{ color:var(--wp-acento); } .guia-rotulo:focus-visible{ outline:2px solid var(--wp-acento); outline-offset:2px; } .painel.expandido .guia-rotulo{ display:none; } html.publico .painel.expandido .guia-rotulo{ display:inline-block; } /* a ordem no chip: esquerda = "BIBLIOTECA ›" · direita = "‹ APOSTILA" */ #painel-esquerdo .painel__guia .guia-rotulo{ order:1; } #painel-esquerdo .painel__guia .toggle{ order:2; } #painel-direito .painel__guia .toggle{ order:1; } #painel-direito .painel__guia .guia-rotulo{ order:3; margin-left:auto; } #painel-esquerdo.recolhido, #painel-direito.recolhido{ width:auto; bottom:auto; border-radius:999px; } #painel-esquerdo.recolhido .painel__guia, #painel-direito.recolhido .painel__guia{ border-bottom:0; background:transparent; padding:5px 6px; gap:4px; } #painel-direito.recolhido #abas-direita{ display:none; } /* o chip é só a palavra + o chevron; 📖/▭ voltam com a aba aberta */ /* ÍCONES DE LINHA (ferramentaria.js → window.icone): traço fino em latão, no lugar do emoji dos botões principais */ .ico{ width:14px; height:14px; vertical-align:-2px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--wp-acento); flex:none; } .btn.on .ico, .btn.primaria .ico{ color:inherit; } /* chip de papel avulso (⤓ Publicar, e quem mais flutuar sozinho num canto): a mesma peça dos chips das abas */ .chip-papel{ background:var(--wp-cartao); color:var(--wp-tinta); border:1px solid var(--wp-borda); border-radius:999px; padding:5px 13px; font:600 11.5px var(--serif); letter-spacing:.07em; text-transform:uppercase; cursor:pointer; box-shadow:var(--wp-alt-2); } .chip-papel:hover{ color:var(--wp-acento); } .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); } /* ═══ ÍCONE EM VEZ DE TEXTO (REFORMA DE DESIGN, passo 6 = peça 4 do REFORMA-MAPA) ═══ O rótulo do botão (.k, e o "Tema" do kit de cor) some; o símbolo fica. Quem explica é a DICA (ferramentaria.js): um cartão com a cara das barras — o nome em negrito e a explicação — que abre no hover. */ .btn .k, .btn .kt-cor-lab{ display:none; } .dica-bar{ position:fixed; z-index:99990; display:none; max-width:300px; padding:6px 10px 7px; background:var(--wp-cartao); color:var(--wp-tinta); border:1px solid var(--wp-borda-forte); border-radius:var(--wp-raio-bar); box-shadow:var(--wp-alt-2); font-family:var(--serif); font-size:12.5px; line-height:1.35; pointer-events:none; } .dica-bar.on{ display:block; animation:wp-fade .12s ease; } .dica-bar .dica-nome{ display:block; font-weight:700; } .dica-bar .dica-nome + .dica-txt{ display:block; margin-top:2px; 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). O sufixo 🗀 da cópia em disco entra no MESMO selo (pintarSelo em dados.js) — por isso min-width, não width. */ .selo-save.pendente{ color:var(--wp-tinta); } .selo-save.erro{ color:#fff; background:#a8432f; font-weight:600; } /* acervo passando de 80% do espaço do navegador: avisa ANTES de o save falhar, não depois */ .selo-save.apertado{ color:#7a4a12; background:rgba(240,170,60,.28); } /* 🗀 cópia em disco (disco.js): a pasta existe mas está sem permissão ou falhou. Aviso brando de propósito — o trabalho ESTÁ salvo no navegador; o que parou foi a cópia. */ .selo-save.disco-alerta{ color:#7a4a12; box-shadow:inset 0 0 0 1px rgba(168,67,47,.45); } /* gaveta ilegível resgatada (auditoria 2026-08-22): mesmo tom do "apertado" — é aviso para agir, não erro de save */ .selo-save.resgate{ color:#7a4a12; background:rgba(240,170,60,.28); } /* 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-family:var(--serif); } .bloco[data-regiao="1"]:not(.tem-folha){ font-weight:700; font-size:60px; line-height:1.1; } /* rótulo CRU (região sem folha): o letreiro de sempre */ /* REGIÃO COM FOLHA (2026-07-30, pedido do dono): a região aceita o conteúdo estruturado do motor (título/resumo/esquema/citação) numa escala de LETREIRO — --pil 1.8 ⇒ título ~58px (o 60 de hoje), esquema 36/34/29, resumo/citação ~29. Os cartões (resumo/box/crono/quote) usam a MESMA base 16 do mapa; quem multiplica é a régua. A especificidade (0,3,0) vence o .bloco.bloco-folha (0,2,0). */ .bloco[data-regiao="1"].tem-folha{ padding:10px 18px 12px 14px; --pil:1.8; --pil-resumo:16px; --pil-crono:16px; --pil-box:16px; --pil-quote:16px; --bf-col:900px; } /* COLUNA DE LEITURA da região (2026-07-30, reporte do dono: "a faixa dos textos não deve seguir por toda a região"): a faixa para na coluna-padrão (~66 caracteres na letra de letreiro — a MEDIDA é que decide, DESIGN-legibilidade §2). --bf-col vem do dado folha.colW quando o dono arrasta a alça. */ .bloco[data-regiao="1"].tem-folha > .bf-linha, .bloco[data-regiao="1"].tem-folha > .bf-cols{ max-width:var(--bf-col); } /* a alça é DISCRETA E VISÍVEL em edição (mesmo idioma da régua de coluna da pílula: quem pode arrastar se anuncia) — a área de pega (12px) cai no VAZIO à direita, nunca sobre o texto */ .bf-col-alca{ display:none; } .bloco[data-regiao="1"].tem-folha.bf-edit > .bf-col-alca{ display:block; position:absolute; top:8px; bottom:8px; left:calc(var(--bf-col) + 14px); width:12px; cursor:col-resize; z-index:3; border-left:2px dashed var(--wp-borda); } .bf-col-alca:hover, .bf-col-alca.bf-div-colou{ border-left-color:var(--wp-acento); } /* 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); } /* REFORMA DE DESIGN (2026-10-14, regra C — REFORMA-DESIGN.md): o tema entra pela COR DE ACENTO, nunca pelo fundo. A região é papel e o TÍTULO dela ganha uma RÉGUA de 3px na cor do tema — no rótulo cru e no título da folha. (Pigmento sobre papel, pouca área de cor: a lição do Dictionary of Color Combinations.) */ .folha-slide{ box-sizing:border-box; overflow:hidden; } .rot-item.rot-orfa{ outline:2px dashed var(--wp-acento); outline-offset:2px; position:relative; } /* parada presa a um slide que foi apagado */ .rot-item.rot-orfa::after{ content:'⚠'; position:absolute; top:2px; right:4px; font-size:12px; color:var(--wp-acento); } .oficina-host .bt-tema{ display:none; } /* na aba ▭ Slide a pílula É o slide: o tema dela mora no 🏷 Tema da barra do topo (um controle só, não dois) */ /* a face de SLIDE fora do mapa (janela CK3, visor, vista de slide) — mesmas regras do .bloco.eh-slide acima/abaixo (REFORMA DE DESIGN, passo 3) */ .bloco[data-regiao="1"]:not([data-tema="nenhum"]):not(.tem-folha), .bloco[data-regiao="1"]:not([data-tema="nenhum"]) .ap-h1{ text-decoration:underline; text-decoration-color:var(--t-cor, currentColor); text-decoration-thickness:3px; text-underline-offset:.14em; text-decoration-skip-ink:none; } /* ===== 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. 48px (pedido do dono 2026-07-22): no zoom-out MÁXIMO do mapa (~0,38×) o ano ainda sai ~18px na tela — a linha do tempo continua legível justamente na vista em que ela serve de referência. */ .bloco[data-marco="1"]{ background:transparent; border:none; box-shadow:none; color:var(--wp-tinta); font-weight:700; font-size:48px; line-height:1.15; letter-spacing:.02em; justify-content:center; align-items:flex-start; padding:0; overflow:visible; } /* tracinho ESCURO até a reta. SEM height fixa: top+bottom mandam, então ele alcança a reta em QUALQUER tamanho de fonte. (A height de 11px vivia amarrada ao 15px E ao MARCO_OVERLAP — mexer na fonte descolava o tracinho da reta; era uma das causas de "a data solta da linha".) */ .bloco[data-marco="1"]::after{ content:""; position:absolute; left:50%; top:1.5em; bottom:0; width:3px; background:var(--wp-tinta); transform:translateX(-50%); } /* 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:0; bottom:1.5em; } /* 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:6px; transform:translateY(-50%); } /* eixo da linha do tempo: grosso o bastante p/ sobreviver ao zoom-out */ .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:var(--wp-tinta-suave); 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-bibbt{ background:var(--wp-cartao-2); color:var(--wp-tinta); border-color:var(--wp-tinta-suave); } .wiki-bibbt:hover{ background:var(--cor-primario-letreiro, var(--cor-primario)); color:#fff; } .wiki-menu{ background:var(--wp-cartao); color:var(--wp-tinta); border-color:var(--wp-borda); box-shadow:var(--wp-alt-2, 0 8px 24px rgba(0,0,0,.18)); } .wiki-menu-tit{ border-color:var(--wp-borda); } .wiki-menu-op:hover{ background:var(--wp-cartao-2); } .wiki-vazio{ color:var(--wp-tinta-suave); } /* estante da biblioteca: pastas em warm-paper */ .wiki-pasta{ color:var(--wp-tinta); } .wiki-pasta:hover{ background:var(--wp-cartao-2); } .wiki-pasta-ap, .wiki-pasta-dica{ color:var(--wp-tinta-suave); } .wiki-pasta-ren{ background:var(--wp-cartao-2); color:var(--wp-tinta); border-color:var(--wp-tinta-suave); } .wiki-nova-disc{ color:var(--wp-tinta-suave); border-color:var(--wp-borda-forte); } .wiki-nova-disc:hover{ color:var(--wp-acento); border-color:var(--wp-acento); background:var(--wp-cartao-2); } .wiki-pasta-ren:hover{ background:var(--cor-primario-letreiro, var(--cor-primario)); color:#fff; } /* busca = extensão da aba: coluna irmã da biblioteca; ⇔ retrai (o mesmo desenho do toggle da guia) */ .wiki-col-busca{ border-left-color:var(--wp-borda); } .wiki-busca-retrair{ border-color:var(--wp-borda-forte); color:var(--wp-tinta-suave); } .wiki-busca-retrair:hover{ background:var(--wp-cartao-2); color:var(--wp-tinta); } /* 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-cab .wg-link{ color:var(--wp-tinta); border-color:var(--wp-borda); background:var(--wp-cartao-2); } .wg-cab .wg-link:hover{ color:var(--wp-acento); border-color:var(--wp-acento); } /* navegador de imagens (busca embutida) na pele clara */ .wg-busca{ border-bottom:1px solid var(--wp-borda); } .wg-busca input{ background:var(--wp-branco); color:var(--wp-tinta); border:1px solid var(--wp-borda); } .wg-busca button{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda); } .wg-busca button:hover{ color:var(--wp-acento); border-color:var(--wp-acento); } .wg-res{ background:var(--wp-cartao-2); color:var(--wp-tinta); border:1px solid var(--wp-borda); } .wg-res b{ color:var(--wp-acento); } .wg-res span{ color:var(--wp-tinta-suave); } .wg-res:hover{ border-color:var(--wp-acento); } .wg-voltar{ color:var(--wp-tinta-suave); } .wg-voltar:hover{ color:var(--wp-acento); } .wg-aviso{ color:var(--wp-tinta-suave); } .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). ENQUADRAR, NÃO ROLAR (2026-07-22): conteúdo maior que o quadro é montado mais largo e ESCALADO (transform no JS, origem no canto sup-esq) — a rolagem só sobra no piso de legibilidade. */ .aba-link-folha{ box-sizing:border-box; padding:10px 14px 12px; font-family:var(--serif); overflow-y:auto; overflow-x:hidden; transform-origin:top left; } .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); } .aba-link-barra .aba-link-aprox{ font-weight:700; } /* ⤢ aproximar (entrar no hover) */ /* a alça ⟋ da janela PERDEU A ARTE em 2026-09-09 (pedido do dono, junto com os 8 pontos do mapa): quem avisa que dá pra puxar é o CURSOR. A regra do warm-paper aqui virou "não pintar nada". */ .aba-link-alca{ background:transparent; } /* ===================== 🎬 VÍDEO (fase vídeo) = cartão-fachada ===================== */ /* O cartão NUNCA é player: thumbnail + ▶ (o player nasce no telão, fora do canvas). Fundo = tinta (papel escuro de projeção); textos em branco sobre véu. */ .vs-bloco.video{ overflow:hidden; } .tl-cartao{ position:relative; width:100%; height:100%; background:var(--wp-tinta); border-radius:var(--wp-raio); overflow:hidden; } .tl-cartao img{ width:100%; height:100%; object-fit:cover; display:block; } .tl-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--wp-branco); text-shadow:0 2px 10px rgba(5,3,1,.55); pointer-events:none; } .tl-titulo{ position:absolute; left:0; right:0; bottom:0; padding:4px 8px; font:12px/1.3 var(--serif); color:var(--wp-branco); background:linear-gradient(transparent, rgba(5,3,1,.72)); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ===== LETREIROS ESTRUTURADOS (2026-08-03, pedido do dono) ===== Título de aula/mapa agora vira FOLHA ao editar (citação/resumo grudam embaixo — física de textos). SÓ a linha de título ganha a escala de letreiro; as linhas de baixo ficam na régua normal da pílula. Mesmo remédio da região (2026-07-30). */ .bloco[data-papel="titulo-aula"].tem-folha, .bloco[data-papel="titulo-mapa"].tem-folha{ font-size:var(--txt-corpo-tam, 17px); } /* mata a HERANÇA dos 110/60px do papel cru — sem isto, toda linha sem tamanho próprio sairia gigante */ .bloco[data-papel="titulo-aula"].tem-folha .ap-h1{ font-size:110px; line-height:1.05; letter-spacing:.01em; } .bloco[data-papel="titulo-mapa"].tem-folha .ap-h1{ font-size:60px; line-height:1.1; } .bloco[data-papel="titulo-aula"][data-cor="primario"].tem-folha .ap-h1, .bloco[data-papel="titulo-mapa"][data-cor="primario"].tem-folha .ap-h1{ color:var(--cor-primario-letreiro, #7c5b20); } /* link 🎬 de vídeo: a palavra anuncia que abre o telão (classe aplicada em RUNTIME pelo registro) */ a.kt-link.kt-video::after{ content:'🎬'; font-size:.78em; margin-left:2px; } a.kt-link.kt-video.kt-video-rotulado::after{ content:none; } /* "🎬 Aula em vídeo": o 🎬 já está no texto, não repete no fim */ /* — o TELÃO: janela fixa na tela (a aula se move, o vídeo fica) — NÃO é a janela CK3 — z 22 = acima do holofote (20), abaixo do roteiro/controles (26); fora do #palco no DOM. */ #telao{ position:fixed; z-index:22; right:64px; top:50%; transform:translateY(-50%); display:none; width:400px; background:var(--wp-cartao); border:1px solid var(--wp-borda-forte); border-radius:var(--wp-raio); box-shadow:var(--wp-alt-3); overflow:hidden; } #telao.tl-aberto{ display:block; } #telao.tl-vert{ width:250px; } #telao .tl-topo{ display:flex; align-items:center; gap:8px; padding:2px 2px 2px 10px; font:12px var(--serif); color:var(--wp-tinta-suave); border-bottom:1px solid var(--wp-borda); } #telao .tl-nome{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #telao .tl-x{ min-width:40px; min-height:32px; border:0; background:none; cursor:pointer; font-size:14px; color:var(--wp-tinta-suave); border-radius:var(--wp-raio-bar); } #telao .tl-x:hover{ background:var(--wp-cartao-2); color:var(--wp-tinta); } #telao .tl-corpo{ position:relative; aspect-ratio:16/9; background:var(--wp-tinta); } #telao.tl-vert .tl-corpo{ aspect-ratio:9/16; } #telao .tl-corpo iframe{ width:100%; height:100%; border:0; display:block; } /* ENCAIXADO no visor da aba (miniatura.js): o mesmo telão, sem flutuar — o visor dá o topo (↩ + nome) */ #telao.tl-doca{ position:relative; right:auto; top:auto; transform:none; z-index:auto; width:100%; box-shadow:var(--wp-alt-1); border-radius:10px; } #telao.tl-doca .tl-topo{ display:none; } #telao.tl-doca.tl-vert{ width:min(100%, 360px); margin:0 auto; } /* — a MINIATURA do link com a aba da direita RECOLHIDA (miniatura.js, 2026-10-07, pedido do dono): encosta na faixa da aba, com folga, e veste o papel da própria aba. O clique abre o conteúdo DENTRO da aba, em tamanho natural (o VISOR). z 23 = logo acima do telão, abaixo do roteiro (26). */ .mini-link{ position:fixed; z-index:23; display:none; box-sizing:border-box; background:rgba(251,247,238,.97); color:var(--wp-tinta); border:1px solid var(--wp-borda-forte); border-radius:12px; box-shadow:var(--wp-alt-3); overflow:hidden; cursor:pointer; } .mini-link.mini-aberta{ display:block; } .mini-link:hover{ border-color:var(--wp-acento); } .mini-link:focus-visible{ outline:2px solid var(--wp-acento); outline-offset:2px; } .mini-topo{ display:flex; align-items:center; gap:6px; padding:2px 2px 2px 10px; font:12px var(--serif); color:var(--wp-tinta-suave); border-bottom:1px solid var(--wp-borda); } .mini-nome{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mini-x{ min-width:32px; min-height:28px; border:0; background:none; cursor:pointer; font-size:13px; color:var(--wp-tinta-suave); border-radius:var(--wp-raio-bar); } .mini-x:hover{ background:var(--wp-cartao-2); color:var(--wp-tinta); } /* o quadro é só imagem: o clique atravessa até a miniatura (links desenhados lá dentro não disparam) */ .mini-quadro{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--wp-cartao); pointer-events:none; } .mini-palco{ position:absolute; left:0; top:0; transform-origin:top left; } .mini-palco .aba-link-folha.mini-cartao{ min-height:270px; } /* 480 × 9/16: o papel do cartão enche o quadro */ /* a face fora do mundo (abas-linkadas.montarFace): cartão de folha com altura natural; slide 16:9 inteiro */ .aba-link-folha.mini-cartao{ overflow:visible; height:auto; } .mini-slide{ position:relative; width:100%; aspect-ratio:16/9; } .mini-slide .vs-raiz{ width:100%; height:100%; } /* — o VISOR: o conteúdo do link DENTRO da aba da direita, em tamanho natural; ↩ volta ao que estava */ .visor-aba{ display:flex; flex-direction:column; gap:10px; min-height:100%; box-sizing:border-box; padding:10px 14px 18px; background:var(--wp-papel); } .visor-topo{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:4px 0 6px; background:var(--wp-papel); border-bottom:1px solid var(--wp-borda); } .visor-nome{ flex:1; font:13px var(--serif); color:var(--wp-tinta-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .visor-corpo{ position:relative; } .visor-corpo .aba-link-folha.mini-cartao{ border-radius:10px; box-shadow:var(--wp-alt-1); } .visor-corpo .mini-slide{ border-radius:10px; overflow:hidden; box-shadow:var(--wp-alt-1); background:var(--wp-cartao); } /* — a janela de TELA (trechos-link do slide da aba — abas-linkadas.criarJanelaTela): a mesma janela do hover, fixa na tela e colada no trecho, com a altura do conteúdo (rola por dentro se passar da tela). z 24 = acima da aba e do telão, abaixo do roteiro (26). Sem gestos de forma: ela é o preview do link, não o quadro dele. */ .aba-link.aba-link-tela{ position:fixed; z-index:24; max-height:calc(100vh - 80px); overflow:auto; } html[data-modo] .aba-link.aba-link-tela{ cursor:default; } .aba-link-tela .aba-link-palco{ position:relative; inset:auto; } /* ============================================================================ ⚑ 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 ===================== */ /* ===================== OFICINA — a aba ▭ Slide como FAZEDOR DE PÍLULAS (2026-10-01, oficina.js) ===================== O MESMO motor do mapa numa 2ª instância: a aba é o chão (o mesmo papel quente do mapa) e a FOLHA é o cartão limpo que flutua sobre ele — a mesma pele do #mapa-moldura, sem a mesa. */ .oficina-raiz{ position:relative; width:100%; height:100%; min-height:0; display:flex; flex-direction:column; background: var(--wp-canvas); } .oficina-host{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background: var(--wp-canvas); touch-action:none; } /* a barra de CRIAR da oficina (+ texto · 🖼 imagem · ↶ ↷) — a MESMA barra do mapa, re-parentada no topo da aba: perde a posição fixa e o cartão escuro do Paradox (igual ao que o #barra-kit faz com a do mapa) */ .oficina-criar{ flex:0 0 auto; display:flex; justify-content:center; padding:8px 10px 0; } /* — a BARRA DE SUGESTÃO (oficina.js, dono 2026-10-08): no slide VAZIO, em Edição, os formatos padronizados ACIMA do slide; a miniatura é desenhada da própria receita; o padrão vem destacado. O 💡 (no canto) religa. */ .oficina-sugestao{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:8px 10px 0; } .oficina-sugestao[hidden]{ display:none; } .of-sug-rot{ font:12px var(--serif); color:var(--wp-tinta-suave); } .of-sug{ display:flex; flex-direction:column; align-items:center; gap:3px; width:80px; padding:5px 4px 4px; box-sizing:border-box; border:1px solid var(--wp-borda); border-radius:8px; background:var(--wp-cartao); cursor:pointer; color:var(--wp-tinta); } .of-sug:hover{ border-color:var(--wp-acento); background:var(--wp-cartao-2); } .of-sug.of-sug-padrao{ border-color:var(--wp-acento); box-shadow:0 0 0 1px var(--wp-acento); } .of-sug-nome{ font:10px/1.15 var(--serif); text-align:center; } .of-sug-off{ border:0; background:none; cursor:pointer; font:11px var(--serif); color:var(--wp-tinta-suave); padding:4px 6px; border-radius:var(--wp-raio-bar); } .of-sug-off:hover{ background:var(--wp-cartao-2); color:var(--wp-tinta); } .of-mini{ width:68px; aspect-ratio:16/9; box-sizing:border-box; padding:5px; display:flex; flex-direction:column; gap:3px; background:var(--wp-papel); border:1px solid var(--wp-borda); border-radius:4px; } .of-mini-faixa{ height:5px; width:58%; border-radius:1px; background:var(--wp-tinta); opacity:.7; } .of-mini-fila{ flex:1; display:flex; gap:4px; min-height:0; } .of-mini-bloco{ display:flex; flex-direction:column; justify-content:center; gap:2px; padding:3px; min-width:0; box-sizing:border-box; border:1px dashed color-mix(in srgb, var(--wp-acento) 60%, transparent); border-radius:2px; } .of-mini.of-mini-centro .of-mini-bloco{ align-items:center; } .of-mini-t{ height:4px; width:78%; border-radius:1px; background:var(--wp-tinta); opacity:.75; } .of-mini-s{ height:3px; width:58%; border-radius:1px; background:var(--wp-tinta-suave); } .of-mini-p{ height:2px; width:88%; border-radius:1px; background:var(--wp-tinta-suave); opacity:.55; } .of-mini-p2{ width:62%; } .of-mini-img{ flex:1; min-height:8px; border-radius:2px; background:color-mix(in srgb, var(--wp-acento) 28%, transparent); } .oficina-religar{ position:absolute; top:10px; right:116px; z-index:6; font-size:13px; padding:2px 8px; } .oficina-religar[hidden]{ display:none; } .oficina-estender{ position:absolute; top:10px; right:12px; z-index:6; font-size:12px; padding:3px 9px; } /* ⤢ Estender / ⤡ Painel, no canto da aba */ .oficina-criar:empty{ display:none; } .oficina-criar .ferramentaria-host{ position:static; top:auto; left:auto; right:auto; transform:none; max-width:100%; } /* ➜ Pôr no mapa (oficina.js porNoMapa, 2026-10-10): ao lado da barra de criar, com destaque — é o "pronto, próximo" */ .oficina-criar{ align-items:center; gap:10px; } .oficina-criar .oficina-por-no-mapa{ font-size:13px; padding:4px 12px; border-color:var(--wp-acento); color:var(--wp-tinta); background:var(--wp-cartao); box-shadow:var(--wp-alt-1); } .oficina-criar .oficina-por-no-mapa:hover{ background:var(--wp-cartao-2); } .oficina-criar .oficina-por-no-mapa[hidden]{ display:none; } .oficina-criar .barra{ background:var(--wp-cartao); border:1px solid var(--wp-borda); box-shadow:var(--wp-alt-2); border-radius:10px; padding:4px 8px; } .oficina-folha{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; background: var(--wp-papel, #f9f5ee); 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 RECADO DA RESTRIÇÃO (Parte 2): algo passa da borda do slide → a folha ganha um contorno tracejado de alerta (latão) e um aviso curto embaixo. Nada é cortado: o que sobra continua à mostra, para fora. */ .oficina-folha.transborda{ outline:2px dashed var(--wp-acento); outline-offset:3px; } .oficina-aviso{ position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:5; pointer-events:none; /* no alto: o rodapé da tela tem a barra do 💾 Salvar */ max-width:calc(100% - 24px); box-sizing:border-box; text-align:center; background:var(--wp-cartao); color:var(--wp-tinta); border:1px solid var(--wp-acento); border-radius:var(--wp-raio-bar); padding:5px 12px; font-family:var(--serif, Georgia, serif); font-size:13px; line-height:1.35; box-shadow:var(--wp-alt-2); } .oficina-aviso[hidden]{ display:none; } /* a faixa "Este é o slide ANTIGO" (oficina.js conferirFaixaAntigo, 2026-10-10): só aparece quando a aba ▭ Slide mostra o antigo (?oficina=0, ou o novo desligado por uma prova que parou no meio) — gruda no alto da aba */ .slide-antigo-faixa{ position:sticky; top:0; z-index:7; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; margin:8px 12px; padding:6px 12px; box-sizing:border-box; text-align:center; background:var(--wp-cartao); color:var(--wp-tinta); border:1px solid var(--wp-acento); border-radius:var(--wp-raio-bar); font-family:var(--serif, Georgia, serif); font-size:13px; line-height:1.35; box-shadow:var(--wp-alt-2); } .slide-antigo-faixa .slide-antigo-usar{ font-size:13px; padding:3px 10px; } /* com a faixa, o slot vira coluna e o slide antigo ocupa o que sobra (sem ela ele é 100% do slot e a aba ganhava rolagem) */ .painel__slot:has(> .slide-antigo-faixa){ display:flex; flex-direction:column; } .painel__slot > .slide-antigo-faixa{ flex:0 0 auto; } .painel__slot > .slide-antigo-faixa + .vs-raiz{ flex:1 1 auto; height:auto; min-height:0; } /* os recados empilham no alto do slide (o "não cabe" e o "junte com ⊕ Agrupar") */ .oficina-avisos{ position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:5; pointer-events:none; width:calc(100% - 24px); display:flex; flex-direction:column; align-items:center; gap:6px; } .oficina-avisos .oficina-aviso{ position:static; transform:none; left:auto; top:auto; } /* BORDAS IGUAIS (dono, 2026-10-10): no slide em blocos o conteúdo fica no CENTRO do bloco — e a folga de baixo da ÚLTIMA linha de cada bloco empurrava tudo para cima (a borda de baixo ficava maior que a de cima). Ela sai; o espaço ENTRE as linhas não muda. (A faixa de título fica de fora: a folga dela é o respiro até os blocos.) */ .oficina-host.modo-blocos :is(.bloco.tem-folha, .bf-col-esq) > .bf-linha:not([data-tipo="coluna"]):not(:has(~ .bf-linha:not([data-tipo="coluna"]))), :is(:is(.bloco, .folha-slide).tem-folha.eh-slide, :is(.bloco, .folha-slide).eh-slide .bf-col-esq) > .bf-linha:not([data-tipo="coluna"]):not(:has(~ .bf-linha:not([data-tipo="coluna"]))){ margin-bottom:0 !important; } /* a ação DENTRO do recado (2026-10-10: "Apertar as bordas" / "↺ voltar ao normal") — o recado não pega o mouse, o botão sim */ .oficina-aviso .oficina-aviso-acao{ pointer-events:auto; margin-left:8px; font-size:12px; padding:2px 10px; vertical-align:baseline; } .oficina-aviso .oficina-aviso-acao[hidden]{ display:none; } .oficina-aviso-bordas{ opacity:.85; font-size:12px; } /* o aviso do slide NO MAPA (oficina.js avisoNoMapa, 2026-10-10): colado embaixo do slide, fora do fluxo (não mexe na conta do caber); só em Edição; o "bordas apertadas · ↺" só com o slide selecionado ou em edição */ :is(.bloco, .folha-slide).eh-slide > .slide-aviso-mapa{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:10px; z-index:5; white-space:nowrap; background:var(--wp-cartao); color:var(--wp-tinta); border:1px solid var(--wp-acento); border-radius:var(--wp-raio-bar); padding:5px 12px; font-family:var(--serif, Georgia, serif); font-size:13px; line-height:1.35; box-shadow:var(--wp-alt-2); text-align:center; } .slide-aviso-mapa .oficina-aviso-acao{ margin-left:8px; font-size:12px; padding:2px 10px; } html:not([data-modo="edicao"]) .slide-aviso-mapa{ display:none; } :is(.bloco, .folha-slide).eh-slide:not(.sel):not(.editando) > .slide-aviso-mapa[data-tipo="apertada"]{ display:none; } /* — SLIDE EM BLOCOS (oficina.js organizarSlide, dono 2026-10-08): a pílula do slide ocupa o slide e as colunas dela viram BLOCOS — a altura do slide, o conteúdo no CENTRO (safe: o que não cabe não some por cima), o tracejado mostra o limite em Edição. Só no slide: no mapa e na apostila as colunas seguem como sempre. */ .oficina-host.modo-blocos .bloco.tem-folha, :is(.bloco, .folha-slide).tem-folha.eh-slide{ display:flex; flex-direction:column; justify-content:safe center; overflow:visible; align-items:stretch !important; } /* stretch: a pílula herdava "centro" (do bloco de texto) e as colunas encolhiam até o conteúdo, no meio do slide (print do dono 2026-10-08) */ .oficina-host.modo-blocos .bloco.tem-folha > .bf-cols, :is(.bloco, .folha-slide).tem-folha.eh-slide > .bf-cols{ flex:1 1 auto; min-height:0; align-items:stretch; } /* a LARGURA de cada bloco vem dos encaixes do slide (--sl-g, posto pelo bloco-folha: 1, 1/2, 1/3, 2/3) e vence a do dado da coluna (que segue valendo no mapa); com base 0, os vãos entre blocos não estouram a fila */ .oficina-host.modo-blocos .bf-cols > .bf-col-esq, .oficina-host.modo-blocos .bf-cols > .bf-col-dir, :is(.bloco, .folha-slide).eh-slide .bf-cols > .bf-col-esq, :is(.bloco, .folha-slide).eh-slide .bf-cols > .bf-col-dir{ flex:var(--sl-g, 1) 1 0 !important; max-width:none !important; min-height:0 !important; display:flex; flex-direction:column; justify-content:safe center; } /* min-height !important: o PISO de altura gravado no mapa (inline) não estoura o slide */ .oficina-host.modo-blocos .bloco[data-nblocos="3"] .bf-addcol, .oficina-host.modo-blocos .bloco[data-nblocos="4"] .bf-addcol, :is(.bloco, .folha-slide).eh-slide[data-nblocos="3"] .bf-addcol, :is(.bloco, .folha-slide).eh-slide[data-nblocos="4"] .bf-addcol{ opacity:.35; cursor:not-allowed; } /* o teto: até 3 blocos */ html[data-modo="edicao"] .oficina-host.modo-blocos .bf-cols > .bf-col-esq, html[data-modo="edicao"] .oficina-host.modo-blocos .bf-cols > .bf-col-dir, html[data-modo="edicao"] .bloco.eh-slide:is(.sel, .editando, .bf-edit) .bf-cols > .bf-col-esq, html[data-modo="edicao"] .bloco.eh-slide:is(.sel, .editando, .bf-edit) .bf-cols > .bf-col-dir{ outline:1px dashed color-mix(in srgb, var(--wp-acento) 55%, transparent); outline-offset:4px; border-radius:4px; } /* REFORMA DE DESIGN, passo 4 (2026-10-14): no mapa o andaime (tracejado dos blocos) aparece SÓ na pílula selecionada ou em edição — as outras são papel limpo */ .oficina-host.modo-blocos .bf-piso, :is(.bloco, .folha-slide).eh-slide .bf-piso{ display:none; } /* a altura do bloco é a do slide: a alça de altura não tem o que fazer */ /* A LETRA DO SLIDE (dono, 2026-10-08): poucos tamanhos, tirados do slide — 414 px do mundo = 540 pt, então 1 pt = 0,7667 px. Título 44, subtítulo 32, corpo 28 pt; o resto do texto usa o corpo e os rótulos, 80% dele. O --fit (oficina.js caberSlide) encolhe TUDO junto até o corpo chegar a 24 pt; legenda de foto e fonte ficam como estão. */ .oficina-host.modo-blocos .bloco.tem-folha, :is(.bloco, .folha-slide).tem-folha.eh-slide{ --sl-pt:0.76667px; --fit:1; } .oficina-host.modo-blocos .bloco.tem-folha .ap-h1, :is(.bloco, .folha-slide).tem-folha.eh-slide .ap-h1{ font-size:calc(44 * var(--sl-pt) * var(--fit)); line-height:1.12; } .oficina-host.modo-blocos .bloco.tem-folha .ap-h2, :is(.bloco, .folha-slide).tem-folha.eh-slide .ap-h2{ font-size:calc(32 * var(--sl-pt) * var(--fit)); line-height:1.2; } .oficina-host.modo-blocos .bloco.tem-folha :is(.ap-p, .ap-lead, .ap-sinopse-txt, .ap-box-corpo, .ap-quote-txt, .ap-tl-texto, .esq-n1, .esq-n2, .esq-n3, .alt-txt), :is(.bloco, .folha-slide).tem-folha.eh-slide :is(.ap-p, .ap-lead, .ap-sinopse-txt, .ap-box-corpo, .ap-quote-txt, .ap-tl-texto, .esq-n1, .esq-n2, .esq-n3, .alt-txt){ font-size:calc(28 * var(--sl-pt) * var(--fit)); line-height:1.35; } .oficina-host.modo-blocos .bloco.tem-folha :is(.ap-box-rot, .ap-tl-data, .ap-tl-titulo), :is(.bloco, .folha-slide).tem-folha.eh-slide :is(.ap-box-rot, .ap-tl-data, .ap-tl-titulo){ font-size:calc(22.4 * var(--sl-pt) * var(--fit)); } /* não coube nem no piso: o bloco ganha a borda de alerta (o aviso "Não cabe no bloco" acende junto) */ html[data-modo="edicao"] .oficina-host.modo-blocos .bf-nao-cabe, html[data-modo="edicao"] .bloco.eh-slide.bf-nao-cabe, html[data-modo="edicao"] .bloco.eh-slide .bf-nao-cabe{ outline:2px dashed var(--wp-acento) !important; outline-offset:4px; } html[data-modo="estudo"] .oficina-avisos{ display:none; } /* — FORMATOS PADRONIZADOS (oficina.FORMATOS · FORMATOS-SLIDE.md, dono 2026-10-08) — A FAIXA DE TÍTULO atravessa os blocos no alto (bloco-folha a monta só no slide); os blocos ocupam o resto. */ .oficina-host.modo-blocos .bloco.tem-folha > .bf-cabeca, :is(.bloco, .folha-slide).tem-folha.eh-slide > .bf-cabeca{ flex:0 0 auto; margin:0 0 14px; } /* ALINHAMENTO DO MERCADO: no slide o texto corrido fica à ESQUERDA (o "justificado" padrão do mapa vira esquerda só aqui); capa e ideia principal CENTRALIZAM (frase curta). Uma escolha explícita (centro/direita/esquerda) vale. */ .oficina-host.modo-blocos .bloco.tem-folha[data-alinha="justif"], :is(.bloco, .folha-slide).tem-folha.eh-slide[data-alinha="justif"]{ text-align:left; } .oficina-host.modo-blocos .bloco.tem-folha[data-alinha="justif"]:is([data-formato="capa"], [data-formato="ideia"]), :is(.bloco, .folha-slide).tem-folha.eh-slide[data-alinha="justif"]:is([data-formato="capa"], [data-formato="ideia"]){ text-align:center; } /* capa e seção: título grande (54 pt); ideia principal: a frase em 36 pt */ .oficina-host.modo-blocos .bloco.tem-folha:is([data-formato="capa"], [data-formato="secao"]) .ap-h1, :is(.bloco, .folha-slide).tem-folha.eh-slide:is([data-formato="capa"], [data-formato="secao"]) .ap-h1{ font-size:calc(54 * var(--sl-pt) * var(--fit)); } .oficina-host.modo-blocos .bloco.tem-folha[data-formato="ideia"] :is(.ap-p, .ap-quote-txt), :is(.bloco, .folha-slide).tem-folha.eh-slide[data-formato="ideia"] :is(.ap-p, .ap-quote-txt){ font-size:calc(36 * var(--sl-pt) * var(--fit)); line-height:1.25; } /* BLOCO SÓ DE IMAGEM (oficina.caberSlide marca .bf-so-imagem): a foto enche o bloco inteiro, sem corte */ .oficina-host.modo-blocos .bf-col-esq.bf-so-imagem > .bf-linha[data-tipo="imagem"], :is(.bloco, .folha-slide).eh-slide .bf-col-esq.bf-so-imagem > .bf-linha[data-tipo="imagem"]{ flex:1 1 0; min-height:0; display:flex; } .oficina-host.modo-blocos .bf-col-esq.bf-so-imagem .ap-fig, :is(.bloco, .folha-slide).eh-slide .bf-col-esq.bf-so-imagem .ap-fig{ flex:1; display:flex; flex-direction:column; min-height:0; margin:0; width:100%; } .oficina-host.modo-blocos .bf-col-esq.bf-so-imagem .ap-img-wrap, :is(.bloco, .folha-slide).eh-slide .bf-col-esq.bf-so-imagem .ap-img-wrap{ flex:1; min-height:0; position:relative; display:block; } .oficina-host.modo-blocos .bloco.tem-folha .bf-col-esq.bf-so-imagem .ap-img, :is(.bloco, .folha-slide).tem-folha.eh-slide .bf-col-esq.bf-so-imagem .ap-img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-height:none !important; object-fit:contain; margin:0; } /* !important: vence o teto de 55% da foto no meio do texto */ /* os recados ("não cabe", "junte") são de quem MONTA — quem só lê não os vê */ /* IMAGENS SEMPRE INTEIRAS NO BLOCO (dono, 2026-10-08): na coluna de fotos a imagem enche o bloco SEM corte (contain, centrada — com ou sem texto ao lado); no meio do texto ela não passa de 55% da altura do bloco (--bl-h, medido pelo oficina.js) nem da largura dele. */ .oficina-host.modo-blocos .bf-col-dir .bf-linha, :is(.bloco, .folha-slide).eh-slide .bf-col-dir .bf-linha{ flex:1 1 0; min-height:0; display:flex; width:100%; } .oficina-host.modo-blocos .bf-col-dir .bf-fig, :is(.bloco, .folha-slide).eh-slide .bf-col-dir .bf-fig{ flex:1; display:flex; flex-direction:column; width:100%; margin:0; min-height:0; } .oficina-host.modo-blocos .bf-col-dir .ap-img-wrap, :is(.bloco, .folha-slide).eh-slide .bf-col-dir .ap-img-wrap{ flex:1; min-height:0; position:relative; display:block; } .oficina-host.modo-blocos .bf-col-dir .ap-img, :is(.bloco, .folha-slide).eh-slide .bf-col-dir .ap-img{ position:absolute; inset:0; width:100%; height:100%; max-height:none; margin:0; object-fit:contain; } .oficina-host.modo-blocos .bloco.tem-folha .bf-linha:is(.bf-img-esq, .bf-img-dir, .bf-img-centro) .ap-img, :is(.bloco, .folha-slide).tem-folha.eh-slide .bf-linha:is(.bf-img-esq, .bf-img-dir, .bf-img-centro) .ap-img{ max-width:100%; height:auto; max-height:calc(var(--bl-h, 9999px) * 0.55); object-fit:contain; } /* GRADE VISÍVEL do ímã — EXPERIMENTO (dono, 2026-10-14: "só pra eu ver se fica feio"): aparece SOBRE a folha do mapa apenas durante o arraste (superficie-editavel.js, mostrarGradeArraste). Linha de 1 px de TELA em qualquer zoom (--zoom vem da superfície); o passo e o encaixe nos múltiplos do mundo vêm do JS. */ #grade-arraste{ position:absolute; display:none; pointer-events:none; z-index:0; border-radius: var(--wp-raio); --gl: calc(1px / var(--zoom, 1)); background-image: linear-gradient(to right, var(--wp-grade) var(--gl), transparent var(--gl)), linear-gradient(to bottom, var(--wp-grade) var(--gl), transparent var(--gl)); }