/*
 * Fórum da E4T — editor completo, anexos, emojis, incorporações, código e visualizador de imagens (0.3.0).
 * Carregado no fórum e no painel (o painel também usa o editor). Só variáveis de base.css.
 */


/* Editor básico (antes ficava em forum.css; agora serve também ao painel) */
/* ---------- Editor ---------- */
.editor { border: 1px solid color-mix(in srgb, var(--cor-texto) 28%, transparent); border-radius: var(--raio-design); background: var(--fundo-entrada); transition: border-color .15s, box-shadow .15s; }
.editor:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent); }
.editor--erro { border-color: var(--negativo); }
.editor__barra { display: flex; flex-wrap: wrap; gap: 2px; padding: .4em; border-bottom: 1px solid var(--fundo-4); background: var(--fundo-2); border-radius: var(--raio-design) var(--raio-design) 0 0; position: sticky; top: 0; z-index: 2; }
.editor__botao { width: 34px; height: 32px; display: grid; place-items: center; border-radius: 5px; color: var(--cor-texto); font-size: 14px; }
.editor__botao:hover { background: var(--fundo-hover); color: var(--cor-forte); }
.editor__botao.ativo { background: var(--fundo-4); color: var(--cor-forte); }
.editor__separador { width: 1px; background: var(--fundo-4); margin: 4px 4px; }
.editor__area { min-height: 180px; max-height: 70vh; overflow-y: auto; padding: 1em 1.2em; outline: none; cursor: text; }
.editor__area:empty::before { content: attr(data-placeholder); color: var(--cor-suave); opacity: .7; pointer-events: none; }
.editor__area--grande { min-height: 320px; }
.editor__texto { min-height: 180px; padding: 1em; border: 0; background: transparent; }
.editor__rodape { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .4em .8em; border-top: 1px solid var(--fundo-3); font-size: .85em; color: var(--cor-suave); }
.emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: .4em; width: 300px; }
.emojis button { font-size: 22px; padding: .2em; border-radius: 5px; }
.emojis button:hover { background: var(--fundo-hover); }

/* Cores e tamanhos do editor (classes no lugar de estilos embutidos, por causa da CSP) */
.cor-1 { color: #e03131; } .cor-2 { color: #f76707; } .cor-3 { color: #f59f00; } .cor-4 { color: #2f9e44; }
.cor-5 { color: #0ca678; } .cor-6 { color: #1098ad; } .cor-7 { color: #1c7ed6; } .cor-8 { color: #4263eb; }
.cor-9 { color: #7048e8; } .cor-10 { color: #ae3ec9; } .cor-11 { color: #d6336c; } .cor-12 { color: #868e96; }
.cor-13 { color: #495057; } .cor-14 { color: #212529; } .cor-15 { color: #ffffff; } .cor-16 { color: #c8a26a; }
[data-esquema="escuro"] .cor-13 { color: #adb5bd; }
[data-esquema="escuro"] .cor-14 { color: #e9ecef; }
.cor-fundo-1 { background: #e03131; } .cor-fundo-2 { background: #f76707; } .cor-fundo-3 { background: #f59f00; } .cor-fundo-4 { background: #2f9e44; }
.cor-fundo-5 { background: #0ca678; } .cor-fundo-6 { background: #1098ad; } .cor-fundo-7 { background: #1c7ed6; } .cor-fundo-8 { background: #4263eb; }
.cor-fundo-9 { background: #7048e8; } .cor-fundo-10 { background: #ae3ec9; } .cor-fundo-11 { background: #d6336c; } .cor-fundo-12 { background: #868e96; }
.cor-fundo-13 { background: #495057; } .cor-fundo-14 { background: #212529; } .cor-fundo-15 { background: #ffffff; } .cor-fundo-16 { background: #c8a26a; }
.tam-1 { font-size: .75em; } .tam-2 { font-size: .875em; } .tam-4 { font-size: 1.3em; } .tam-5 { font-size: 1.7em; line-height: 1.3; }

/* Editor: menus, menções, tabelas */
.editor { position: relative; }
.editor__menu { top: 0; left: 0; z-index: 35; max-width: min(360px, calc(100vw - 2em)); }
.editor__menu--rolavel { max-height: 300px; overflow-y: auto; }
.editor__cores { display: grid; grid-template-columns: repeat(8, 28px); gap: 6px; padding: .4em; }
.editor__cor { width: 28px; height: 28px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--cor-texto) 25%, transparent); transition: transform .1s; }
.editor__cor:hover { transform: scale(1.15); }
.editor__previa-titulo { margin: 0; }
h2.editor__previa-titulo { font-size: 1.3em; font-weight: 600; }
h3.editor__previa-titulo { font-size: 1.15em; font-weight: 600; }
h4.editor__previa-titulo { font-weight: 600; }
.editor__mencoes { min-width: 220px; }
.editor__mencoes .menu__item.ativo { background: var(--fundo-hover); color: var(--cor-forte); }
.editor--soltando { border-color: var(--primaria); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 25%, transparent); }
.editor__area .mencao, .texto-rico .mencao { background: color-mix(in srgb, var(--primaria) 12%, transparent); color: var(--cor-primaria-texto); padding: 0 .3em; border-radius: 4px; text-decoration: none; font-weight: 600; }
.editor__area table, .texto-rico table { width: 100%; border: 1px solid var(--fundo-4); border-collapse: collapse; }
.editor__area th, .editor__area td, .texto-rico th, .texto-rico td { border: 1px solid var(--fundo-4); padding: .5em .7em; text-align: left; vertical-align: top; }
.editor__area th, .texto-rico th { background: var(--fundo-2); font-weight: 600; }
.editor__area img { max-width: 100%; }
.editor__area h2 { font-size: 1.45em; font-weight: 600; }
.editor__area h3 { font-size: 1.25em; font-weight: 600; }
.editor__area h4 { font-size: 1.1em; font-weight: 600; }
.editor__area blockquote { border-left: 4px solid var(--primaria); background: var(--fundo-2); padding: .6em 1em; margin: .5em 0; border-radius: 4px; }
.editor__area pre { background: var(--fundo-2); border: 1px solid var(--fundo-4); padding: .8em; border-radius: 6px; font-family: var(--fonte-codigo); white-space: pre-wrap; }
.editor__area details { border: 1px solid var(--fundo-4); border-radius: 6px; padding: .5em .8em; }
.editor__area ul { list-style: disc; padding-left: 1.6em; }
.editor__area ol { list-style: decimal; padding-left: 1.6em; }

/* Seletor de emojis */
.editor__menu--emojis { width: 340px; padding: .5em; }
.emojis-seletor { display: grid; gap: .5em; }
.emojis-seletor .entrada { padding: .5em .8em; }
.emojis-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--fundo-4); padding-bottom: .4em; overflow-x: auto; }
.emojis-abas button { width: 34px; height: 30px; border-radius: 6px; color: var(--cor-suave); flex: 0 0 auto; }
.emojis-abas button:hover, .emojis-abas button.ativa { background: var(--fundo-3); color: var(--cor-forte); }
.emojis-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; }
.emojis-grade button { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-size: 24px; line-height: 1; }
.emojis-grade button:hover { background: var(--fundo-hover); }
.emojis-grade img { width: 28px; height: 28px; }

/* Área de anexos do editor */
.editor__anexos { border-top: 1px solid var(--fundo-3); padding: .7em; display: grid; gap: .6em; background: var(--fundo-2); }
.editor__soltar { display: flex; align-items: center; gap: .7em; padding: .9em 1em; border: 2px dashed var(--fundo-5); border-radius: 8px; color: var(--cor-suave); font-size: .92em; }
.editor__soltar i { font-size: 1.2em; }
.link-botao { color: var(--cor-primaria-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.editor__lista-anexos { display: grid; gap: .4em; }
.editor__lista-anexos:empty { display: none; }
.editor__anexo { display: flex; align-items: center; gap: .7em; padding: .4em .6em; background: var(--fundo-1); border: 1px solid var(--fundo-4); border-radius: 8px; }
.editor__anexo-previa { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; background: var(--fundo-3); }
.editor__anexo-icone { display: grid; place-items: center; color: var(--cor-suave); font-size: 1.2em; }
.editor__anexo-info { flex: 1 1 auto; display: grid; line-height: 1.3; min-width: 0; }
.editor__anexo-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-forte); font-weight: 500; }
.editor__progresso { height: 5px; background: var(--fundo-4); border-radius: 5px; overflow: hidden; margin-top: .3em; }
.editor__progresso span { display: block; height: 100%; width: 0; background: var(--primaria); transition: width .2s; }

/* Emojis e emoticons no texto e nas reações */
img.emoji { width: 1.35em; height: 1.35em; vertical-align: -.3em; display: inline-block; margin: 0 .05em; border-radius: 0; }
.reacoes img.emoji, .reacoes__contagem img.emoji { width: 20px; height: 20px; vertical-align: middle; margin: 0; }
.reacoes__botao img.emoji { width: 22px; height: 22px; }
.reacoes__opcao img.emoji { width: 32px; height: 32px; }
.texto-rico img.emoticon, .editor__area img.emoticon { max-height: 2em; width: auto; vertical-align: middle; border-radius: 0; }
.texto-rico img.anexo { cursor: zoom-in; }
.texto-rico a.link-anexo { text-decoration: none; }

/* Incorporações */
.video-incorporado { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.video-incorporado iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cartao-interno { display: flex; gap: .9em; align-items: flex-start; max-width: 620px; padding: .9em 1.1em; border: 1px solid var(--fundo-4); border-left: 4px solid var(--primaria); border-radius: 8px; background: var(--fundo-2); font-size: .95em; }
.cartao-interno > i { font-size: 1.4em; color: var(--cor-primaria-texto); margin-top: .1em; }
.cartao-interno div { display: grid; gap: .2em; }
.cartao-interno a { font-weight: 600; text-decoration: none; color: var(--cor-forte); }
.cartao-interno span { color: var(--cor-suave); font-size: .9em; }

/* Código: nome da linguagem e cores */
.texto-rico pre[data-linguagem] { position: relative; padding-top: 2em; }
.texto-rico pre[data-linguagem]::before { content: attr(data-linguagem); position: absolute; top: .45em; right: .8em; font-size: .72em; font-family: var(--fonte); font-weight: 700; text-transform: uppercase; color: var(--cor-suave); letter-spacing: .05em; }
.cod-comentario { color: #6a737d; font-style: italic; }
.cod-texto { color: #22863a; }
.cod-numero { color: #005cc5; }
.cod-palavra { color: #d73a49; font-weight: 600; }
.cod-variavel { color: #e36209; }
[data-esquema="escuro"] .cod-comentario { color: #8b949e; }
[data-esquema="escuro"] .cod-texto { color: #a5d6ff; }
[data-esquema="escuro"] .cod-numero { color: #79c0ff; }
[data-esquema="escuro"] .cod-palavra { color: #ff7b72; }
[data-esquema="escuro"] .cod-variavel { color: #ffa657; }

/* Anexos no fim do post */
.anexos-post { margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed var(--fundo-4); display: grid; gap: .7em; }
.anexos-post__titulo { font-size: .85em; font-weight: 700; text-transform: uppercase; color: var(--cor-suave); letter-spacing: .03em; }
.anexos-post__imagens { display: flex; flex-wrap: wrap; gap: .5em; }
.anexos-post__imagem img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--fundo-4); transition: transform .15s; }
.anexos-post__imagem:hover img { transform: scale(1.03); }
.anexos-post__arquivos { display: grid; gap: .4em; max-width: 520px; }
.anexos-post__arquivo { display: flex; align-items: center; gap: .8em; padding: .6em .8em; border: 1px solid var(--fundo-4); border-radius: 8px; background: var(--fundo-2); color: var(--cor-forte); }
.anexos-post__arquivo:hover { border-color: var(--fundo-6); color: var(--cor-forte); }
.anexos-post__icone { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--cor-primaria-texto); font-size: 1.15em; flex: 0 0 auto; }
.anexos-post__info { flex: 1 1 auto; display: grid; min-width: 0; line-height: 1.35; }
.anexos-post__info strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visualizador de imagens */
.lightbox { position: fixed; inset: 0; z-index: 80; background: hsl(0 0% 0% / .9); display: grid; place-items: center; padding: 3.5em 4em; animation: lightbox-fundo .2s; }
.lightbox__imagem { max-width: 100%; max-height: calc(100vh - 7em); object-fit: contain; border-radius: 4px; box-shadow: 0 10px 50px #000; animation: lightbox-abre .2s ease-out; }
.lightbox__legenda { position: absolute; bottom: 1em; left: 0; right: 0; text-align: center; color: #ddd; font-size: .9em; }
.lightbox__botao { position: absolute; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: hsl(0 0% 100% / .12); font-size: 18px; }
.lightbox__botao:hover { background: hsl(0 0% 100% / .25); color: #fff; }
.lightbox__fechar { top: 1em; right: 1em; }
.lightbox__abrir { top: 1em; right: 4.2em; }
.lightbox__anterior { left: 1em; top: 50%; transform: translateY(-50%); }
.lightbox__proxima { right: 1em; top: 50%; transform: translateY(-50%); }
@keyframes lightbox-fundo { from { opacity: 0; } }
@keyframes lightbox-abre { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 760px) { .lightbox { padding: 3.5em .5em; } }

/* Botão "Citar seleção" */
.citar-selecao { position: absolute; z-index: 30; box-shadow: var(--sombra-menu); }

/* Prévias do painel */
.previa-reacao img.emoji { width: 30px; height: 30px; }
.previa-reacao .emoji { font-size: 26px; }
.previa-emoticon { max-height: 36px; width: auto; }
.previa-emojis { display: inline-flex; gap: 4px; margin-left: .8em; vertical-align: middle; }
.previa-emojis img { width: 22px; height: 22px; }
.entrada-arquivo-pequena { font-size: .85em; max-width: 190px; }

/* ===================== 0.39.0: editor no estilo do Invision 5 / XenForo ===================== */
/* Balões (link, imagem, mídia, texto alternativo): abrem junto do botão ou do texto, não no topo da página */
.editor__menu--balao { width: min(340px, calc(100vw - 2em)); padding: .8em; }
.editor__balao { display: grid; gap: .6em; }
.editor__balao-titulo { font-size: .95em; color: var(--cor-forte); }
.editor__balao-campo { display: grid; gap: .25em; font-size: .85em; color: var(--cor-suave); }
.editor__balao-campo .entrada { padding: .45em .7em; font-size: 1.05em; }
.editor__balao-botoes { display: flex; justify-content: flex-end; gap: .4em; }
.editor__balao-previa { max-height: 140px; overflow: hidden; border-radius: 6px; border: 1px solid var(--fundo-4); background: var(--fundo-2); display: grid; place-items: center; }
.editor__balao-previa[hidden] { display: none; }
.editor__balao-previa img { max-height: 140px; width: auto; }
.editor__menu-icone { width: 1.2em; text-align: center; opacity: .75; }
.editor__menu .menu__item { display: flex; align-items: center; gap: .5em; }

/* Barra de contexto (imagem, link, tabela, caixa) e bolha de formatação da seleção */
.editor__flutuante { position: absolute; z-index: 34; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: max-content; max-width: 100%; padding: .3em;
  background: var(--fundo-1); border: 1px solid var(--fundo-4); border-radius: 10px; box-shadow: var(--sombra-menu); }
.editor__flutuante[hidden] { display: none; }
.editor__flutuante .editor__separador { align-self: stretch; }
.editor__bolha { animation: editor-surge .12s ease-out; }
.editor__botao--texto { width: auto; min-width: 34px; padding: 0 .55em; font-size: 12px; font-weight: 700; }
.editor__contexto-rotulo { font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-suave); padding: 0 .5em; }
.editor__contexto-link { display: inline-flex; align-items: center; gap: .3em; max-width: 260px; padding: 0 .6em; font-size: .85em; color: var(--cor-primaria-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes editor-surge { from { opacity: 0; transform: translateY(4px); } }
.editor__area img:not(.emoji):not(.emoticon) { cursor: pointer; }
.editor__area img.editor__img-selecionada { outline: 3px solid var(--primaria); outline-offset: 2px; }
.editor__barra--previa .editor__botao:not([data-comando="previa"]) { opacity: .35; pointer-events: none; }
.editor__previa { min-height: 180px; padding: 1em 1.2em; border-top: 1px dashed var(--fundo-4); }
@media (max-width: 760px) { .editor__dicas { display: none; } }

/* Itens de caixa colorida no menu "Inserir" e na barra da caixa: ícone na cor da caixa */
.editor__item-caixa i { color: var(--fundo-6); }
.editor__item-caixa.caixa-texto--info i { color: #1c7ed6; }
.editor__item-caixa.caixa-texto--sucesso i { color: #2f9e44; }
.editor__item-caixa.caixa-texto--aviso i { color: #e8a200; }
.editor__item-caixa.caixa-texto--perigo i { color: #e03131; }
.editor__item-caixa.caixa-texto--destaque i { color: var(--cor-primaria-texto); }
.editor__cores--marca { grid-template-columns: repeat(6, 34px); }
.editor__cores--marca .editor__cor { width: 34px; height: 30px; font-size: 12px; font-weight: 700; }

/* Imagem no texto: posição (com o texto ao lado, como o "Wrap" do Invision) e tamanho */
.texto-rico, .editor__area { display: flow-root; } /* o texto ao lado de uma imagem não "vaza" para fora do post */
.texto-rico[hidden], .editor__area[hidden] { display: none; }
.editor__area > * + * { margin-top: .9em; } /* mesmo espaço entre parágrafos do post publicado */
:is(.texto-rico, .editor__area) img.img-esquerda { float: left; margin: .25em 1.2em .6em 0; max-width: 60%; }
:is(.texto-rico, .editor__area) img.img-direita { float: right; margin: .25em 0 .6em 1.2em; max-width: 60%; }
:is(.texto-rico, .editor__area) img.img-centro { display: block; margin-inline: auto; }
:is(.texto-rico, .editor__area) img.img-tam-p { width: 25%; height: auto; max-height: none; }
:is(.texto-rico, .editor__area) img.img-tam-m { width: 50%; height: auto; max-height: none; }
:is(.texto-rico, .editor__area) img.img-tam-g { width: 75%; height: auto; max-height: none; }
:is(.texto-rico, .editor__area) img.img-tam-t { width: 100%; height: auto; max-height: none; }
:is(.texto-rico, .editor__area) img:is(.img-esquerda, .img-direita):not([class*="img-tam-"]):not([width]) { max-width: min(60%, 360px); }
:is(.texto-rico, .editor__area) img:is(.img-esquerda, .img-direita)[width] { max-width: 75%; }
.editor__area img[width] { height: auto; }
/* Seletor de GIFs do GIPHY (0.39.1) */
.editor__menu--gifs { width: min(380px, calc(100vw - 2em)); padding: .6em; }
.gifs-seletor { display: grid; gap: .5em; }
.gifs-seletor .entrada { padding: .5em .8em; }
.gifs-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; max-height: 320px; overflow-y: auto; overflow-x: hidden; }
.gifs-item { display: block; width: 100%; border-radius: 6px; overflow: hidden; background: var(--fundo-3); }
.gifs-item img { display: block; width: 100%; height: auto; }
.gifs-item:hover, .gifs-item:focus-visible { outline: 3px solid var(--primaria); outline-offset: -3px; }
.gifs-mais { justify-self: center; }
.gifs-mais[hidden], .gifs-aviso[hidden] { display: none; }
.gifs-giphy { margin: 0; text-align: right; font-size: .72em; color: var(--cor-suave); letter-spacing: .02em; }
/* Alça de redimensionar a imagem (0.39.1) */
.editor__flutuante.editor__alca { width: 16px; height: 16px; padding: 0; border-radius: 4px; background: var(--primaria); border: 2px solid #fff;
  cursor: nwse-resize; touch-action: none; display: block; }
.editor__alca--esquerda { cursor: nesw-resize; }
/* 1.0.9: área de pegar maior que o quadradinho (mais fácil de acertar), e o cursor de redimensionar durante todo o arrasto */
.editor__alca::before { content: ''; position: absolute; inset: -10px; }
.editor--redimensionando, .editor--redimensionando * { cursor: nwse-resize !important; user-select: none; }
.editor--redimensionando:has(.editor__alca--esquerda), .editor--redimensionando:has(.editor__alca--esquerda) * { cursor: nesw-resize !important; }
.editor__alca-medida { position: absolute; bottom: 22px; right: -6px; padding: 2px 7px; border-radius: 5px; background: hsl(0 0% 0% / .8); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.editor__alca--esquerda .editor__alca-medida { right: auto; left: -6px; }
.editor__alca-medida[hidden] { display: none; }
@media (max-width: 560px) {
  /* No celular, imagem com texto ao lado fica menor (senão o texto vira uma coluna estreita demais) */
  :is(.texto-rico, .editor__area) img:is(.img-esquerda, .img-direita) { max-width: 45%; }
  :is(.texto-rico, .editor__area) img:is(.img-esquerda, .img-direita):is(.img-tam-g, .img-tam-t) { float: none; display: block; width: 100%; max-width: 100%; margin: .5em 0; }
}

/* Caixa colorida (como a "Box" do Invision 5) */
:is(.texto-rico, .editor__area) aside { border: 1px solid var(--fundo-4); border-left-width: 4px; border-radius: 8px; padding: .9em 1.1em; background: var(--fundo-2); }
:is(.texto-rico, .editor__area) aside > * + * { margin-top: .6em; }
:is(.texto-rico, .editor__area) aside.caixa-texto--info { border-color: #1c7ed6; background: color-mix(in srgb, #1c7ed6 9%, var(--fundo-1)); }
:is(.texto-rico, .editor__area) aside.caixa-texto--sucesso { border-color: #2f9e44; background: color-mix(in srgb, #2f9e44 9%, var(--fundo-1)); }
:is(.texto-rico, .editor__area) aside.caixa-texto--aviso { border-color: #e8a200; background: color-mix(in srgb, #f59f00 12%, var(--fundo-1)); }
:is(.texto-rico, .editor__area) aside.caixa-texto--perigo { border-color: #e03131; background: color-mix(in srgb, #e03131 9%, var(--fundo-1)); }
:is(.texto-rico, .editor__area) aside.caixa-texto--destaque { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 11%, var(--fundo-1)); }

/* Marca-texto (cor de fundo do texto) — tons claros no tema claro, escuros no escuro */
.destaque-1 { background: #fff3a3; } .destaque-2 { background: #c9f7c5; } .destaque-3 { background: #cfe6ff; }
.destaque-4 { background: #ffd6e8; } .destaque-5 { background: #ffe0bf; } .destaque-6 { background: #e5d9ff; }
.destaque-1, .destaque-2, .destaque-3, .destaque-4, .destaque-5, .destaque-6 { border-radius: 3px; padding: 0 .12em; color: #1a1a1a; }
[data-esquema="escuro"] .destaque-1 { background: #6b5d00; } [data-esquema="escuro"] .destaque-2 { background: #1f5e2a; }
[data-esquema="escuro"] .destaque-3 { background: #1d4a7a; } [data-esquema="escuro"] .destaque-4 { background: #6e2448; }
[data-esquema="escuro"] .destaque-5 { background: #7a4210; } [data-esquema="escuro"] .destaque-6 { background: #4a3480; }
[data-esquema="escuro"] :is(.destaque-1, .destaque-2, .destaque-3, .destaque-4, .destaque-5, .destaque-6) { color: #fff; }

/* Fontes */
.fonte-serifa { font-family: Georgia, "Times New Roman", serif; }
.fonte-mono { font-family: var(--fonte-codigo, ui-monospace, Consolas, monospace); }
.fonte-manuscrita { font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; }
.fonte-titulo { font-family: Impact, "Arial Narrow", "Roboto Condensed", sans-serif; letter-spacing: .02em; }

/* Recuo de parágrafo */
:is(.texto-rico, .editor__area) .recuo-1 { padding-left: 2em; }
:is(.texto-rico, .editor__area) .recuo-2 { padding-left: 4em; }
:is(.texto-rico, .editor__area) .recuo-3 { padding-left: 6em; }

/* Spoiler no meio do texto: escondido até clicar */
.spoiler-texto { background: var(--cor-forte); color: transparent; border-radius: 3px; cursor: pointer; transition: color .15s, background .15s; }
.spoiler-texto * { visibility: hidden; }
.spoiler-texto.revelado { background: var(--fundo-3); color: inherit; cursor: auto; }
.spoiler-texto.revelado * { visibility: visible; }
.editor__area .spoiler-texto { background: var(--fundo-3); color: inherit; outline: 1px dashed var(--fundo-6); }
.editor__area .spoiler-texto * { visibility: visible; }
.editor__area code { background: var(--fundo-3); padding: .1em .35em; border-radius: 4px; font-family: var(--fonte-codigo); }
.editor__area hr { border: 0; border-top: 2px solid var(--fundo-4); margin-block: 1em; }
.editor__descartar { border: 0; background: none; padding: 0; font: inherit; color: var(--cor-link, var(--primaria)); text-decoration: underline; cursor: pointer; }
.editor__descartar:hover { color: var(--negativo); }

/* ---------- Biblioteca de imagens (1.0.34, biblioteca.js) ----------
   Janela de tamanho fixo (só o miolo rola), filtros presos no alto, esqueletos enquanto carrega: nada salta. */
dialog.biblioteca {
  margin: auto; padding: 0; width: min(1080px, calc(100vw - 1.5em)); height: min(820px, calc(100dvh - 1.5em)); max-height: none; max-width: none;
  border: 1px solid var(--borda-caixa); border-radius: var(--raio-design); background: var(--fundo-caixa); color: var(--cor-texto); overflow: hidden;
  box-shadow: 0 10px 60px hsl(0 0% 0% / 45%);
}
dialog.biblioteca[open] { display: flex; flex-direction: column; animation: biblioteca-abre .26s cubic-bezier(.2, .8, .2, 1); }
dialog.biblioteca::backdrop { background: hsl(220 30% 6% / .6); backdrop-filter: blur(3px); animation: biblioteca-fundo .26s ease-out; }
dialog.biblioteca.fechando { animation: biblioteca-fecha .18s ease-in forwards; }
dialog.biblioteca.fechando::backdrop { animation: biblioteca-fundo-sai .18s ease-in forwards; }
@keyframes biblioteca-abre { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes biblioteca-fecha { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes biblioteca-fundo { from { opacity: 0; } }
@keyframes biblioteca-fundo-sai { to { opacity: 0; } }
.biblioteca__barra { display: flex; align-items: center; gap: .6em; padding: .7em 1em .7em 1.2em; border-bottom: 1px solid var(--borda-caixa); flex: none; }
.biblioteca__icone { color: var(--primaria); font-size: 1.15em; }
.biblioteca__titulo { margin: 0; font-size: 1.08em; flex: 1; min-width: 0; }
.biblioteca__fechar { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; color: var(--cor-suave); transition: background .15s ease, color .15s ease; }
.biblioteca__fechar:hover { background: var(--fundo-hover); color: var(--cor-texto); }
.biblioteca__filtros { flex: none; display: grid; gap: .6em; padding: .8em 1.2em; border-bottom: 1px solid var(--borda-caixa); background: color-mix(in srgb, var(--fundo-caixa) 92%, var(--primaria)); }
.biblioteca__abas { display: inline-flex; justify-self: start; max-width: 100%; border: 1px solid var(--borda-caixa); border-radius: var(--raio-design); overflow: hidden; background: var(--fundo-caixa); }
.biblioteca__abas[hidden] { display: none; }
.biblioteca__abas > button { padding: .42em .9em; font-size: .9em; color: var(--cor-texto); border-left: 1px solid var(--borda-caixa); white-space: nowrap; transition: background .15s ease, color .15s ease; }
.biblioteca__abas > button:first-child { border-left: 0; }
.biblioteca__abas > button:hover { background: var(--fundo-hover); }
.biblioteca__abas > button[aria-selected="true"] { background: var(--primaria); color: #fff; }
.biblioteca__linha { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.biblioteca__busca-caixa { position: relative; flex: 1 1 240px; min-width: 0; }
.biblioteca__busca-caixa > i { position: absolute; left: .8em; top: 50%; transform: translateY(-50%); color: var(--cor-suave); pointer-events: none; }
.biblioteca__busca { width: 100%; padding-left: 2.3em; }
.biblioteca__selecao { width: auto; flex: 0 1 200px; min-width: 0; }
.biblioteca__trilha { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; }
.biblioteca__trilha[hidden] { display: none; }
.biblioteca__trilha-sep { color: var(--cor-suave); }
.biblioteca__album-nome { font-weight: 600; }
.biblioteca__trilha-acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4em; }
.biblioteca__corpo { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; padding: 1em 1.2em 1.2em; }
.biblioteca__subtitulo { margin: 0 0 .6em; font-size: .82em; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-suave); }
.biblioteca__bloco-albuns { margin-bottom: 1.2em; }
.biblioteca__albuns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8em; }
.bib-album { display: grid; gap: .2em; width: 100%; text-align: left; padding: .45em; border: 1px solid var(--borda-caixa); border-radius: var(--raio-design); background: var(--fundo-caixa); transition: border-color .15s ease, box-shadow .15s ease, transform .2s ease; }
.bib-album:hover, .bib-album:focus-visible { border-color: var(--primaria); box-shadow: 0 4px 14px -6px hsl(0 0% 0% / .35); transform: translateY(-1px); }
.bib-album__capa { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--raio-design) - 2px); background: var(--fundo-hover); }
.bib-album__capa--vazia { display: grid; place-items: center; color: var(--cor-suave); font-size: 1.6em; }
.bib-album__nome { font-weight: 600; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-album__info { font-size: .78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biblioteca__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8em; }
.bib-celula { min-width: 0; }
.bib-item { position: relative; display: grid; gap: .15em; width: 100%; text-align: left; padding: .4em; border: 2px solid transparent; border-radius: var(--raio-design); background: none; transition: background .15s ease, border-color .15s ease; }
.bib-item:hover { background: var(--fundo-hover); }
.bib-item:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.bib-item[aria-selected="true"] { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 10%, var(--fundo-caixa)); }
.bib-item__foto { display: block; aspect-ratio: 1; border-radius: calc(var(--raio-design) - 2px); overflow: hidden;
  background: var(--fundo-hover) repeating-conic-gradient(hsl(0 0% 50% / .08) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.bib-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.bib-item:hover .bib-item__foto img { transform: scale(1.04); }
.bib-item__marca { position: absolute; top: .75em; right: .75em; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font-size: .78em;
  background: hsl(0 0% 100% / .9); color: transparent; border: 2px solid hsl(0 0% 100% / .95); box-shadow: 0 1px 4px hsl(0 0% 0% / .35); opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .18s ease, background .15s ease; }
.bib-item:hover .bib-item__marca { opacity: .9; transform: none; }
.bib-item[aria-selected="true"] .bib-item__marca { opacity: 1; transform: none; background: var(--primaria); color: #fff; }
.bib-item__nome { font-size: .84em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-item__onde { font-size: .74em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-celula--esqueleto { padding: .4em; display: grid; gap: .35em; }
.bib-celula--esqueleto .bib-item__foto, .bib-album--esqueleto .bib-album__capa, .bib-esqueleto-linha { background: var(--fundo-hover); animation: biblioteca-pulsa 1.1s ease-in-out infinite alternate; }
.bib-esqueleto-linha { display: block; height: .8em; width: 70%; border-radius: 4px; }
.bib-album--esqueleto { display: grid; gap: .35em; padding: .45em; border: 1px solid var(--borda-caixa); border-radius: var(--raio-design); }
@keyframes biblioteca-pulsa { to { opacity: .45; } }
.biblioteca__vazio { text-align: center; padding: 3em 1em; }
.biblioteca__sentinela { height: 1px; }
.biblioteca__rodape { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .6em; padding: .75em 1.2em; border-top: 1px solid var(--borda-caixa); background: var(--fundo-caixa); }
.biblioteca__contador { font-size: .88em; color: var(--cor-suave); min-width: 0; }
.biblioteca__espaco { flex: 1; }
@media (max-width: 700px) {
  dialog.biblioteca { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .biblioteca__filtros { padding: .7em .8em; }
  .biblioteca__abas { overflow-x: auto; scrollbar-width: none; }
  .biblioteca__corpo { padding: .8em; }
  .biblioteca__grade { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4em; }
  .biblioteca__albuns { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .biblioteca__contador { flex-basis: 100%; }
  .biblioteca__trilha-acoes { margin-left: 0; }
  .biblioteca__busca-caixa { flex-basis: 100%; }
  .biblioteca__selecao { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.biblioteca[open], dialog.biblioteca::backdrop, dialog.biblioteca.fechando, .bib-celula--esqueleto .bib-item__foto, .bib-esqueleto-linha { animation: none; }
}

/* Campo de imagem de capa: "Escolher da biblioteca" e a imagem escolhida */
.biblioteca-capa { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .5em; }
.biblioteca-capa__escolhida { display: inline-flex; align-items: center; gap: .5em; padding: .25em .3em .25em .25em; border: 1px solid var(--borda-caixa); border-radius: var(--raio-design); background: var(--fundo-caixa); max-width: 100%; }
.biblioteca-capa__escolhida[hidden] { display: none; }
.biblioteca-capa__escolhida img { width: 56px; height: 36px; object-fit: cover; border-radius: 4px; flex: none; }
.biblioteca-capa__nome { font-size: .86em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Cartão de um álbum da Galeria dentro do texto (inserido pela biblioteca) */
a.cartao-album { display: inline-grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8em; align-items: center; max-width: min(100%, 420px);
  padding: .55em .9em .55em .55em; border: 1px solid var(--borda-caixa); border-radius: var(--raio-design); background: var(--fundo-caixa); color: var(--cor-texto); text-decoration: none;
  box-shadow: 0 2px 10px -6px hsl(0 0% 0% / .35); transition: border-color .15s ease, box-shadow .15s ease, transform .2s ease; vertical-align: middle; }
a.cartao-album:hover { border-color: var(--primaria); box-shadow: 0 6px 18px -8px hsl(0 0% 0% / .4); transform: translateY(-1px); }
a.cartao-album .cartao-album__capa { grid-row: 1 / 3; width: 96px; height: 64px; object-fit: cover; border-radius: calc(var(--raio-design) - 2px); margin: 0; }
.cartao-album__nome { font-weight: 700; align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-album__info { font-size: .82em; color: var(--cor-suave); align-self: start; }
.cartao-album__info::before { content: "\f302"; font-family: "Font Awesome 6 Free"; font-weight: 400; margin-right: .35em; }