/*
 * Caixas no texto da notícia (websg/ckeditor/plugins/wjcaixas): checagem, errata/atualização, citação e "entenda o caso".
 * Site: TextoHtml::ckeditor carrega este arquivo só no texto que tem caixa (fora do render.css, que fica em cache).
 * Editor: o plugin carrega o mesmo arquivo. Mudou aqui = trocar a versão em TextoHtml::CAIXAS_CSS e CSS_VER do plugin.
 * Sem <p> dentro das caixas: TextoHtml::bannerMeio conta os <p> do texto e colocaria o banner dentro delas.
 */
.wj-caixa { box-sizing: border-box; margin: 24px 0; line-height: 1.5; }

/* Box de checagem */
.wj-check { scroll-margin-top: 100px; display: flex; align-items: stretch; border: 1px solid rgba(128,128,128,.3); border-radius: 12px; overflow: hidden; }
.wj-check__selo { flex: 0 0 112px; width: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 16px 4px; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--wj-check-cor); background: var(--wj-check-fundo); }
.wj-check__selo::before { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--wj-check-cor); color: #fff; font-size: 18px; font-weight: 700; line-height: 36px; letter-spacing: 0; text-align: center; }
.wj-check__corpo { flex: 1; min-width: 0; align-self: center; padding: 18px 22px; }
.wj-check__origem { margin-bottom: 6px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.wj-check__alegacao { font-size: 1.1em; font-weight: 700; line-height: 1.3; }
.wj-check__texto { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(128,128,128,.25); font-size: .88em; line-height: 1.5; }
.wj-check__apuracao { margin-top: 8px; font-size: .75em; opacity: .7; }
.wj-check--falso { --wj-check-cor: #dc2626; --wj-check-fundo: rgba(220,38,38,.1); }
.wj-check--falso .wj-check__selo::before { content: "\2715"; }
.wj-check--enganoso { --wj-check-cor: #b45309; --wj-check-fundo: rgba(217,119,6,.12); }
.wj-check--enganoso .wj-check__selo::before { content: "!"; }
.wj-check--contexto { --wj-check-cor: #2563eb; --wj-check-fundo: rgba(37,99,235,.1); }
.wj-check--contexto .wj-check__selo::before { content: "?"; }
.wj-check--verdadeiro { --wj-check-cor: #15803d; --wj-check-fundo: rgba(22,163,74,.11); }
.wj-check--verdadeiro .wj-check__selo::before { content: "\2713"; }

.wj-check a,
.wj-citacao a { text-decoration: underline; }

/* Errata / atualização */
.wj-nota { padding: 12px 16px; border-left: 4px solid; font-size: .9em; }
.wj-nota--correcao { border-color: #d97706; background: rgba(217,119,6,.1); }
.wj-nota--correcao strong { color: #b45309; }
.wj-nota--atualizacao { border-color: #2563eb; background: rgba(37,99,235,.08); }
.wj-nota--atualizacao strong { color: #2563eb; }

/* Citação em destaque: vence .pageNews blockquote do tema */
blockquote.wj-citacao,
.pageNews blockquote.wj-citacao { margin: 24px 0; padding: 4px 0 4px 20px; border: 0; border-left: 4px solid var(--main-theme-color, var(--main-theme, #333)); background: none; color: inherit; font-family: inherit; font-size: inherit; font-style: normal; }
.wj-citacao__texto { font-size: 1.35em; font-weight: 700; line-height: 1.3; }
.wj-citacao__autor { margin-top: 8px; font-size: .85em; opacity: .75; }

/* Entenda o caso */
.wj-entenda { padding: 18px 20px; border-radius: 12px; background: rgba(128,128,128,.1); }
.wj-entenda__titulo { margin-bottom: 8px; font-weight: 700; }
.wj-entenda__titulo::before { content: "i"; display: inline-block; width: 1.25em; height: 1.25em; margin-right: 8px; border-radius: 50%; background: var(--main-theme-color, var(--main-theme, #333)); color: #fff; font-size: .8em; line-height: 1.25em; text-align: center; vertical-align: .1em; }
.wj-entenda ul { margin: 0; padding: 0 0 0 20px; }
.wj-entenda li,
.pageNews #texto_release_format .wj-entenda li { margin: 4px 0; list-style-position: outside; }

/* No editor a caixa fica sobre um bloco do mesmo tamanho: a margem é a do bloco */
#wj-ck-caixas .wj-caixa { margin: 0; }

@media (max-width: 480px) {
    /* no celular o selo vira uma faixa em cima: a coluna tiraria largura do texto */
    .wj-check { flex-direction: column; }
    .wj-check__selo { flex: none; width: auto; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 16px; }
    .wj-check__selo::before { width: 26px; height: 26px; font-size: 14px; line-height: 26px; }
    .wj-check__corpo { align-self: stretch; padding: 14px 16px 16px; }
    .wj-citacao__texto { font-size: 1.2em; }
}