/**
 * SKOOLY Geradores — base visual compartilhada.
 *
 * Os valores NÃO foram inventados: saíram da medição das 48 ferramentas. As cores
 * abaixo são as mais usadas no site hoje (#2c3e50 em 236 ocorrências, #3498db em 136,
 * #4caf50 em 130...), e as medidas de formulário vieram do Planejamento Anual, que já
 * era o módulo mais bem estruturado. O objetivo é que padronizar pareça arrumação, não
 * troca de identidade.
 *
 * ADESÃO POR FERRAMENTA — a regra mais importante deste arquivo:
 *
 * Tokens, botões, barra de exportação e rodapé valem para TODAS as ferramentas. São
 * classes NOVAS (.sg-btn, .sg-export, .sg-rodape), que não existiam em lugar nenhum —
 * não têm como colidir com o que já está no ar.
 *
 * Já o estilo dos CAMPOS (caixa, seção, label, input, select, textarea) só entra em
 * quem tiver a classe .sg-tool--ok no invólucro. Sem ela, a ferramenta continua com
 * exatamente a aparência de hoje. Cada uma ganha essa classe quando o dono do site
 * aprovar o visual dela.
 *
 * É isso que torna a padronização gradual e reversível: tirar a classe devolve a
 * ferramenta ao estado anterior, sem tocar em uma linha de HTML.
 */

.sg-tool {
	/* ---- Cor ---- */
	--sg-texto:            #2c3e50;
	--sg-texto-suave:      #66747a;   /* 4,83:1 no branco; era #7f8c8d = 3,48:1 */
	--sg-rotulo:           #34495e;
	--sg-fundo:            #ffffff;
	--sg-fundo-sutil:      #f8f9fa;
	--sg-campo-fundo:      #fafafa;
	--sg-borda:            #e0e0e0;
	--sg-borda-sutil:      #e9ecef;

	--sg-acao:             #3498db;
	--sg-acao-escura:      #2980b9;
	/*
	 * As variantes FORTES existem para carregar TEXTO BRANCO com 4,5:1.
	 * O azul, o verde, o laranja e o vermelho de cima continuam sendo a identidade
	 * (filete, borda, halo); quem recebe letra branca em cima usa a variante forte.
	 */
	--sg-acao-forte:       #2874a6;   /* branco: 5,07:1 (era 3,15:1) */
	--sg-acao-forte-hover: #1f618d;   /* branco: 6,66:1 */
	--sg-acao-halo:        rgba(52, 152, 219, .3);
	--sg-confirma:         #27ae60;
	--sg-confirma-escura:  #1e8449;
	--sg-confirma-forte:   #1e8449;   /* branco: 4,72:1 (era 2,87:1) */
	--sg-confirma-forte-hover: #196f3d;
	--sg-atencao:          #e67e22;
	--sg-atencao-escura:   #d35400;
	--sg-atencao-forte:    #b35309;   /* branco: 5,05:1 (era 2,85:1) */
	--sg-atencao-forte-hover: #a84300;
	--sg-alerta:           #e74c3c;
	--sg-alerta-escura:    #c0392b;
	--sg-alerta-forte:     #c0392b;   /* branco: 5,44:1 (era 3,82:1) */
	--sg-alerta-forte-hover: #a93226;

	/* ---- Forma ---- */
	--sg-raio:             8px;
	--sg-raio-caixa:       15px;
	--sg-sombra-caixa:     0 5px 25px rgba(0,0,0,.1);
	--sg-sombra-acao:      0 5px 20px var(--sg-acao-halo);

	/* ---- Ritmo ---- */
	--sg-gap:              20px;
	--sg-gap-secao:        32px;
	--sg-caixa-padding:    45px;

	/* ---- Texto ---- */
	--sg-fonte:            Arial, Helvetica, sans-serif;
	--sg-corpo:            15px;
	--sg-titulo:           30px;   /* título do material acima das seções (h2 = 28px) */
	--sg-nota:             14px;

	--sg-transicao:        all .3s ease;

	color: var(--sg-texto);
	font-family: var(--sg-fonte);
}

/* ------------------------------------------------------------------ *
 * Caixa da ferramenta
 * ------------------------------------------------------------------ */
.sg-tool--ok .sg-caixa {
	max-width: 1000px;
	margin: 40px auto;
	background: var(--sg-fundo);
	padding: var(--sg-caixa-padding);
	border-radius: var(--sg-raio-caixa);
	box-shadow: var(--sg-sombra-caixa);
}

.sg-tool--ok .sg-secao {
	margin-bottom: var(--sg-gap-secao);
}

/* ------------------------------------------------------------------ *
 * Campos — seletores de ELEMENTO de propósito: qualquer formulário
 * copiado do plugin antigo é atendido sem precisar reescrever o HTML.
 * ------------------------------------------------------------------ */
/*
 * Rótulo de campo — mas NÃO um label que envolve o próprio controle.
 *
 * Muitas ferramentas usam <label> como CARTÃO clicável, com o input dentro e
 * layout em flex (as caixas de Necessidades Especiais, os checkboxes da BNCC).
 * Um `display:block` aqui tem especificidade maior que a classe própria delas e
 * desmontava esses cartões. O :has() separa os dois casos: label que contém um
 * controle mantém o layout que a ferramenta deu; label que só nomeia o campo
 * recebe o padrão.
 */
.sg-tool--ok label:not(:has(input)):not(:has(select)):not(:has(textarea)) {
	display: block;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--sg-rotulo);
	font-size: var(--sg-corpo);
}

.sg-tool--ok input[type="text"],
.sg-tool--ok input[type="number"],
.sg-tool--ok input[type="email"],
.sg-tool--ok input[type="url"],
.sg-tool--ok input[type="date"],
.sg-tool--ok select,
.sg-tool--ok textarea {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid var(--sg-borda);
	border-radius: var(--sg-raio);
	font-size: var(--sg-corpo);
	font-family: inherit;
	background: var(--sg-campo-fundo);
	color: var(--sg-texto);
	transition: var(--sg-transicao);
	box-sizing: border-box;
}

.sg-tool--ok input:not([type="checkbox"]):not([type="radio"]):focus,
.sg-tool--ok select:focus,
.sg-tool--ok textarea:focus {
	outline: none;
	border-color: var(--sg-acao);
	background: var(--sg-fundo);
}

.sg-tool--ok textarea {
	min-height: 110px;
	resize: vertical;
}

/* Caixas de seleção mantêm o comportamento nativo: largura total quebraria o layout. */
.sg-tool--ok input[type="checkbox"],
.sg-tool--ok input[type="radio"] {
	width: auto;
	margin-right: 8px;
	accent-color: var(--sg-acao);
}

.sg-tool--ok input[type="checkbox"] + span,
.sg-tool--ok label > input[type="checkbox"] {
	vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * Botões
 * ------------------------------------------------------------------ */
.sg-tool .sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: var(--sg-raio);
	padding: 14px 32px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--sg-acao);
	cursor: pointer;
	transition: var(--sg-transicao);
	text-decoration: none;
}

/* Ícone SVG dentro do botão. Ferramentas que usam <svg> em vez de emoji (planos-aula)
   tinham a regra de tamanho na própria classe; ao aposentá-la, o ícone virava gigante. */
.sg-tool .sg-btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.sg-tool .sg-btn:hover  { background: var(--sg-acao-escura); transform: translateY(-2px); }
.sg-tool .sg-btn:active { transform: translateY(0); }
/* Foco do teclado à vista (revisão final de 02/10/2026): o contorno do botão era o halo claro (1,38:1 contra o branco) e a
   caixa de marcar e a bolinha perdiam o contorno pelo "outline:none" dos campos de texto. */
.sg-tool .sg-btn:focus-visible { outline: 3px solid var(--sg-acao-forte); outline-offset: 2px; }
/* ---- painel do "Compartilhar", embaixo da barra de exportação (sg-export.js, 05/10/2026) ---- */
/* "✏️ Ajustar" (SG_Ajuste::caixa): o mesmo quadro amarelo que as quatro ferramentas de plano já usavam. */
.sg-ajuste { margin: 18px 0 0; padding: 22px 24px; border: 2px solid #f9a825; border-left-width: 6px; border-radius: 14px; background: linear-gradient(135deg, #fff8e1, #fff3c4); color: #2c3e50; text-align: left; font-size: 15px; line-height: 1.5; }
.sg-ajuste .sg-ajuste__titulo { margin: 0 0 12px; color: #b45309; font-size: 19px; font-weight: 700; line-height: 1.3; }
.sg-ajuste__rotulo { display: block; margin: 0 0 6px; font-weight: 600; color: #2c3e50; }
.sg-ajuste .sg-ajuste__pedido { display: block; width: 100%; box-sizing: border-box; min-height: 84px; padding: 12px 14px; border: 2px solid #e0e0e0; border-radius: 10px; background: #fff; color: #2c3e50; font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.sg-ajuste .sg-ajuste__pedido:focus { outline: none; border-color: #f9a825; box-shadow: 0 0 0 4px rgba(249,168,37,0.2); }
.sg-ajuste .sg-ajuste__pedido[readonly] { background: #f6f6f6; color: #5f6b72; }
.sg-ajuste__ajuda { margin: 8px 0 0; color: #5f6b72; font-size: 14px; }
.sg-ajuste__recado { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.sg-ajuste__recado--erro { background: #fdecea; border: 1px solid #f5b7b1; color: #922b21; }
.sg-ajuste__recado--ok { background: #e8f8f0; border: 1px solid #a9dfbf; color: #1e6b3f; }
.sg-ajuste__botoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.sg-ajuste .sg-ajuste__enviar { background: #f57f17; background: linear-gradient(135deg, #f9a825, #f57f17); border-color: #f57f17; color: #fff; min-height: 46px; padding: 12px 26px; font-size: 16px; font-weight: 700; }
.sg-ajuste .sg-ajuste__enviar:hover, .sg-ajuste .sg-ajuste__enviar:focus-visible { background: #e65100; color: #fff; }
.sg-ajuste .sg-ajuste__enviar[disabled] { opacity: .75; cursor: progress; }
@media (max-width: 600px) { .sg-ajuste { padding: 16px 14px; } .sg-ajuste .sg-ajuste__enviar { width: 100%; } .sg-ajuste .sg-ajuste__titulo { font-size: 17px; } }
@media print { .sg-ajuste { display: none !important; } }

.sg-link-painel { margin: 14px 0 0; padding: 16px; border: 1px solid var(--sg-borda); border-radius: 12px; background: var(--sg-fundo-sutil); color: var(--sg-texto); text-align: left; font-size: 15px; line-height: 1.5; }
.sg-link-painel p { margin: 0 0 12px; }
.sg-link-painel__erro { color: #b3261e; font-weight: 600; }
.sg-link-painel__linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.sg-link-painel__url { flex: 1 1 240px; min-width: 0; padding: 11px 12px; border: 1px solid #b8c0c8; border-radius: 8px; font-size: 16px; font-family: monospace; background: #fff; color: var(--sg-texto); }
.sg-link-painel__opcoes { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.sg-link-painel__opcoes legend { padding: 0; margin: 0 0 6px; font-weight: 700; }
.sg-link-painel__opcoes label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.sg-link-painel__opcoes input { margin-top: 4px; flex: 0 0 auto; }
.sg-tool .sg-link-painel .sg-btn { width: auto; margin: 0; padding: 11px 18px; text-decoration: none; }
.sg-mat .sg-link-painel { margin-top: 10px; }
@media (max-width: 600px) {
	.sg-tool .sg-link-painel .sg-btn { flex: 1 1 100%; text-align: center; }
	.sg-link-painel__desativar { width: 100% !important; }
}
/* o que era só de mouse e agora recebe o foco (sg-form.js, alcancarPeloTeclado) */
.sg-tool [role="button"][tabindex]:focus-visible { outline: 3px solid var(--sg-acao-forte); outline-offset: 2px; }
.sg-tool input[type="checkbox"]:focus-visible,
.sg-tool input[type="radio"]:focus-visible { outline: 3px solid var(--sg-acao-forte); outline-offset: 2px; }
.sg-tool--ok .sg-form .sg-cartao:has( input:focus-visible ) { outline: 3px solid var(--sg-acao-forte); outline-offset: 2px; }
.sg-tool .sg-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.sg-tool .sg-btn--gerar {
	width: 100%;
	font-size: 18px;
	padding: 18px 35px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--sg-acao), var(--sg-acao-escura));
	/* Reserva por baixo do degradê: o Elementor apaga o degradê (background-image) até o bloco aparecer na tela, e a
	   letra branca sumia no branco (botão Filtrar da biblioteca, 29/09/2026). */
	background-color: var(--sg-acao-escura);
	box-shadow: var(--sg-sombra-acao);
}

.sg-tool .sg-btn--pdf       { background: var(--sg-confirma-forte); }
.sg-tool .sg-btn--pdf:hover { background: var(--sg-confirma-forte-hover); }
.sg-tool .sg-btn--word      { background: var(--sg-acao-forte); }
.sg-tool .sg-btn--word:hover{ background: var(--sg-acao-forte-hover); }
.sg-tool .sg-btn--imprimir      { background: var(--sg-atencao-forte); }
.sg-tool .sg-btn--imprimir:hover{ background: var(--sg-atencao-forte-hover); }
.sg-tool .sg-btn--copiar        { background: var(--sg-texto-suave); }
.sg-tool .sg-btn--copiar:hover  { background: var(--sg-rotulo); }

/* Ações que NÃO são exportação (visualizar, personalizar): tom neutro, para não
   competir com as quatro ações principais nem inventar mais uma cor no sistema. */
.sg-tool .sg-btn--secundario {
	background: transparent;
	color: var(--sg-rotulo);
	border: 2px solid var(--sg-borda);
	padding: 12px 30px;
}
.sg-tool .sg-btn--secundario:hover { background: var(--sg-fundo-sutil); border-color: var(--sg-texto-suave); }

/* Baixar imagem é download, como o PDF — mesma cor de confirmação. */
.sg-tool .sg-btn--imagem       { background: var(--sg-confirma-forte); }
.sg-tool .sg-btn--imagem:hover { background: var(--sg-confirma-forte-hover); }

/* PowerPoint (Slides Pro) também é download: a mesma cor, sem inventar outra.
   A vistoria já procura por esta classe (sg-modo-teste.js, apelidos de 'ppt'). */
.sg-tool .sg-btn--ppt       { background: var(--sg-confirma-forte); }   /* branco: 4,72:1 (era 2,87:1) */
.sg-tool .sg-btn--ppt:hover { background: var(--sg-confirma-forte-hover); }

/* ------------------------------------------------------------------ *
 * Barra de exportação — a mesma nas 48 ferramentas
 * ------------------------------------------------------------------ */
.sg-tool .sg-export {
	margin: 28px 0 0;
	padding: 24px;
	background: var(--sg-fundo-sutil);
	border: 1px solid var(--sg-borda-sutil);
	border-radius: var(--sg-raio-caixa);
	text-align: center;
}

.sg-tool .sg-export__titulo {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--sg-rotulo);
}

.sg-tool .sg-export__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/*
 * A segunda fileira da barra: as ações que NÃO são exportação.
 *
 * "Criar Nova", "Compartilhar", "Editar Questões", "Modo Aula". As barras
 * escritas à mão já separavam essas dos botões de arquivo, e com razão: são
 * o que o professor faz DEPOIS de salvar. A separação fica, agora num lugar
 * só.
 */
.sg-tool .sg-export__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e9ecef;
}

.sg-tool .sg-export__nota {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
	color: #66747a;
}

/* ------------------------------------------------------------------ *
 * Rodapé do material gerado — idêntico em todas as ferramentas
 * ------------------------------------------------------------------ */
.sg-rodape {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 2px solid var(--sg-borda-sutil, #e9ecef);
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #66747a;
}

.sg-rodape__marca  { font-weight: 700; color: #2c3e50; }
.sg-rodape__aviso  { display: block; margin-top: 4px; }
.sg-rodape__site   { display: block; margin-top: 4px; color: #66747a; }   /* 4,83:1; era #95a5a6 = 2,56:1 */

/* ------------------------------------------------------------------ *
 * Aviso e estados
 * ------------------------------------------------------------------ */
.sg-tool .sg-nota {
	font-size: var(--sg-nota);
	color: var(--sg-texto-suave);
	text-align: center;
	margin-top: var(--sg-gap);
}

/* Uma nota por ferramenta. O formulário do motor já traz a sua; o rodapé que
   algumas ferramentas têm (o "Feito com ❤️" do original, hoje a mesma nota)
   aparecia junto — duas vezes na tela no Mapa Mental e na Consulta BNCC
   (13/09/2026). O rodapé não sai do HTML: no rollback o formulário volta a ser o
   antigo, sem nota, e ele passa a ser o único lugar dela. */
.sg-tool:has(.sg-form .sg-nota) .sg-nota:not(.sg-form .sg-nota) {
	display: none;
}
/* …e a caixa que só embrulhava essa nota some junto. Ela tem fundo e margem próprios
   (.geja-footer-note { background:#ecf0f1; padding:20px }): sem isto sobrava uma faixa
   cinza vazia debaixo da barra de exportação (Atividades EJA, teste manual, 14/09/2026). */
.sg-tool:has(.sg-form .sg-nota) :not(.sg-form):has(> .sg-nota:only-child:not(.sg-form .sg-nota)) {
	display: none;
}

.sg-tool .sg-aviso {
	padding: 16px 20px;
	border-radius: var(--sg-raio);
	border-left: 4px solid var(--sg-atencao);
	background: #fff8ee;
	color: var(--sg-texto);
	margin: var(--sg-gap) 0;
}

.sg-tool .sg-aviso--erro { border-left-color: var(--sg-alerta); background: #fdecea; }
/* "Voltar ao formulário": aparece quando a ferramenta escondeu o formulário para mostrar o material (sg-export.js) */
.sg-tool .sg-voltar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.sg-tool .sg-voltar__nota { font-size: 15px; color: var(--sg-texto-suave, #4a5560); }
@media (max-width: 600px) { .sg-tool .sg-voltar__botao { width: 100%; } }
@media print { .sg-tool .sg-voltar { display: none !important; } }
/* quem não pode usar a ferramenta: a frase e o caminho (SG_UI::sem_acesso) */
.sg-tool.sg-acesso .sg-caixa p { margin: 0; font-size: 17px; line-height: 1.6; }
.sg-tool.sg-acesso .sg-acesso__link { font-weight: 600; white-space: nowrap; }
/* a ferramenta grátis, para quem não entrou: o convite para criar a conta (SG_UI::convite_conta, 26/10/2026) — legível
   de longe (o dono pediu): selo, título grande, uma frase, botão grande; tudo centrado numa caixa estreita */
.sg-tool.sg-acesso--gratis .sg-caixa.sg-convite { max-width: 620px; text-align: center; padding: 36px 32px 30px; border: 1px solid #d6e3f1; }
.sg-tool.sg-acesso--gratis .sg-convite__selo,
.sg-tool.sg-cadastro .sg-convite__selo { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #1a6e3c; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.sg-tool.sg-acesso--gratis .sg-convite__titulo { margin: 14px 0 0; padding: 0; border: 0; color: #1b2a3a; font-size: 28px; font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: normal; }
.sg-tool.sg-acesso--gratis .sg-caixa p.sg-convite__texto { margin: 10px auto 0; max-width: 30em; color: #33475b; font-size: 19px; line-height: 1.55; }
.sg-tool.sg-acesso--gratis .sg-caixa p.sg-acesso__botoes { display: flex; justify-content: center; margin: 24px 0 0; }
.sg-tool.sg-acesso--gratis .sg-acesso__criar { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 36px; border-radius: 12px; background-color: var(--sg-acao-forte); color: #fff; font-size: 19px; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: 0 2px 6px rgba(20, 70, 122, .25); }
.sg-tool.sg-acesso--gratis .sg-acesso__criar:hover,
.sg-tool.sg-acesso--gratis .sg-acesso__criar:focus { background-color: var(--sg-acao-forte-hover, var(--sg-acao-escura)); color: #fff; text-decoration: none; }
.sg-tool.sg-acesso--gratis .sg-acesso__criar:focus-visible { outline: 3px solid var(--sg-acao-forte); outline-offset: 3px; }
.sg-tool.sg-acesso--gratis .sg-caixa p.sg-convite__entrar { margin: 16px 0 0; color: #33475b; font-size: 17px; }
.sg-tool.sg-acesso--gratis .sg-convite__entrar .sg-acesso__link { color: var(--sg-acao-forte); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
	.sg-tool.sg-acesso--gratis .sg-caixa.sg-convite { padding: 28px 20px 24px; }
	.sg-tool.sg-acesso--gratis .sg-convite__titulo { font-size: 24px; }
	.sg-tool.sg-acesso--gratis .sg-caixa p.sg-convite__texto { font-size: 18px; }
	.sg-tool.sg-acesso--gratis .sg-acesso__criar { width: 100%; }
}
/* "Criar conta grátis" (SG_Cadastro, 26/10/2026): nome, e-mail, telefone, senha e o aceite — campos grandes, legíveis */
.sg-tool.sg-cadastro .sg-caixa.sg-cadastro__caixa { max-width: 560px; padding: 34px 32px 28px; border: 1px solid #d6e3f1; text-align: center; }
.sg-tool.sg-cadastro .sg-cadastro__titulo { margin: 14px 0 0; padding: 0; border: 0; color: #1b2a3a; font-size: 28px; font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: normal; }
.sg-tool.sg-cadastro .sg-caixa p.sg-cadastro__sub { margin: 8px 0 0; color: #33475b; font-size: 18px; line-height: 1.5; }
.sg-tool.sg-cadastro .sg-cadastro__aviso { margin: 20px 0 0; padding: 12px 16px; border: 1px solid #f1b8b4; border-radius: 10px; background: #fdecea; color: #7f1d1d; text-align: left; }
.sg-tool.sg-cadastro .sg-cadastro__aviso p { margin: 0; font-size: 16px; line-height: 1.5; }
.sg-tool.sg-cadastro .sg-cadastro__aviso p + p { margin-top: 6px; }
.sg-tool.sg-cadastro .sg-cadastro__aviso a { color: #7f1d1d; font-weight: 700; text-decoration: underline; }
.sg-tool.sg-cadastro .sg-cadastro__form { margin: 22px 0 0; text-align: left; }
.sg-tool.sg-cadastro .sg-caixa p.sg-cadastro__campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.sg-tool.sg-cadastro .sg-cadastro__campo label { color: #1b2a3a; font-size: 16px; font-weight: 700; }
.sg-tool.sg-cadastro .sg-cadastro__campo input { width: 100%; min-height: 50px; margin: 0; padding: 10px 14px; border: 1px solid #b9c7d6; border-radius: 10px; background: #fff; color: #1b2a3a; font-size: 18px; line-height: 1.3; box-sizing: border-box; }
.sg-tool.sg-cadastro .sg-cadastro__campo input:focus { outline: 3px solid rgba(40, 116, 166, .35); outline-offset: 1px; border-color: var(--sg-acao-forte); }
.sg-tool.sg-cadastro .sg-cadastro__campo input[aria-invalid="true"] { border-color: #c0392b; }
.sg-tool.sg-cadastro .sg-cadastro__erro { color: #b42318; font-size: 15px; line-height: 1.4; }
.sg-tool.sg-cadastro .sg-cadastro__dica { color: #4c5b70; font-size: 14px; }
.sg-tool.sg-cadastro .sg-cadastro__senha { display: flex; gap: 8px; }
.sg-tool.sg-cadastro .sg-cadastro__senha input { flex: 1 1 auto; min-width: 0; }
.sg-tool.sg-cadastro .sg-cadastro__ver { flex: 0 0 auto; min-height: 50px; padding: 0 14px; border: 1px solid #b9c7d6; border-radius: 10px; background: #f3f7fb; color: #1b2a3a; font-size: 15px; font-weight: 700; cursor: pointer; }
.sg-tool.sg-cadastro .sg-caixa p.sg-cadastro__marca { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #1b2a3a; }
.sg-tool.sg-cadastro .sg-cadastro__marca label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }
.sg-tool.sg-cadastro .sg-cadastro__marca input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; }
.sg-tool.sg-cadastro .sg-cadastro__marca .sg-cadastro__erro { display: block; margin-top: 4px; }
.sg-tool.sg-cadastro .sg-cadastro__marca a { color: var(--sg-acao-forte); text-decoration: underline; }
.sg-tool.sg-cadastro .sg-caixa p.sg-cadastro__acao { margin: 20px 0 0; }
.sg-tool.sg-cadastro .sg-cadastro__enviar { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 14px 24px; border: 0; border-radius: 12px; background-color: var(--sg-acao-forte); color: #fff; font-size: 19px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 70, 122, .25); }
.sg-tool.sg-cadastro .sg-cadastro__enviar:hover,
.sg-tool.sg-cadastro .sg-cadastro__enviar:focus { background-color: var(--sg-acao-forte-hover, var(--sg-acao-escura)); color: #fff; text-decoration: none; }
.sg-tool.sg-cadastro .sg-caixa p.sg-convite__entrar { margin: 18px 0 0; color: #33475b; font-size: 17px; }
.sg-tool.sg-cadastro .sg-convite__entrar .sg-acesso__link { color: var(--sg-acao-forte); text-decoration: underline; text-underline-offset: 3px; }
.sg-tool.sg-cadastro .sg-cadastro__isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
	.sg-tool.sg-cadastro .sg-caixa.sg-cadastro__caixa { padding: 26px 18px 22px; }
	.sg-tool.sg-cadastro .sg-cadastro__titulo { font-size: 24px; }
}
/* o aviso do grupo obrigatório, escrito junto do grupo (sg-form.js) */
.sg-tool .sg-aviso--no-campo { margin: 8px 0 0; }

/*
 * "Gerou, mas não guardou." Fica em vermelho e com peso: é o único aviso que
 * pede uma AÇÃO do professor agora — baixar antes de fechar a página.
 */
.sg-tool .sg-aviso--guardar {
	border-left-color: var(--sg-alerta);
	background: #fdecea;
	font-weight: 600;
}

/*
 * "O nome ficou só neste navegador" (LGPD). Informa, não alarma: azul da ação, e só na tela
 * (data-sg-so-tela) — no PDF, no Word e na cópia ele não sai.
 */
.sg-tool .sg-aviso--local {
	border-left-color: var(--sg-acao);
	background: #eef6fc;
	font-size: 0.95em;
}

/* ------------------------------------------------------------------ *
 * Telas estreitas
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.sg-tool { --sg-caixa-padding: 25px; }
	.sg-tool--ok .sg-caixa { margin: 20px auto; border-radius: 10px; }
	.sg-tool .sg-export__grid { flex-direction: column; }
	.sg-tool .sg-export__acoes { flex-direction: column; }
	.sg-tool .sg-btn { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Impressão — o professor imprime o material, não a ferramenta
 * ------------------------------------------------------------------ */
@media print {
	.sg-tool .sg-export,
	.sg-tool form,
	.sg-tool .sg-btn { display: none !important; }
	.sg-tool--ok .sg-caixa { box-shadow: none; padding: 0; margin: 0; max-width: none; }
	.sg-rodape { page-break-inside: avoid; }
}

/* ------------------------------------------------------------------ *
 * Modo Teste — barra do administrador.
 * Só é impressa para quem tem manage_options e com o modo ligado.
 * ------------------------------------------------------------------ */
#sg-teste-barra {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #16211f;
	color: #e6eae7;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	box-shadow: 0 6px 24px rgba(0,0,0,.28);
	/* no celular a barra passava da borda e o 3º botão ficava cortado (revisão de 30/10/2026): cabe na tela e quebra a linha */
	max-width: calc(100vw - 32px);
	flex-wrap: wrap;
}

#sg-teste-barra .sg-teste-tag {
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .12em;
	padding: 3px 8px;
	border-radius: 3px;
	background: #e67e22;
	color: #fff;
}

#sg-teste-barra .sg-teste-nome { color: #9fb0aa; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#sg-teste-barra button,
#sg-teste-barra a {
	font: inherit;
	border: 1px solid #3a4b46;
	background: #22322e;
	color: #e6eae7;
	padding: 7px 12px;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
}

#sg-teste-barra button:hover,
#sg-teste-barra a:hover { background: #2c3f3a; }

#sg-teste-contador {
	display: none;
	min-width: 18px;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 9px;
	background: #e74c3c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

@media print { #sg-teste-barra { display: none !important; } }

/* ------------------------------------------------------------------ *
 * Caixa do material gerado
 *
 * Os valores vêm da ferramenta de referência (Planejamento Anual): cartão
 * branco, cantos de 10px, sombra leve e a barra azul à esquerda. Era essa
 * barra que o dono notou faltando no Plano Mensal — a caixa era de cada
 * ferramenta, então cada uma tinha a sua.
 * ------------------------------------------------------------------ */

.sg-tool .sg-resultado {
	background: var(--sg-fundo, #fff);
	padding: 30px;
	border-radius: 10px;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-left: 5px solid var(--sg-acao, #3498db);
}

/* Antes de gerar a caixa está vazia, e o cartão acima desenhava uma faixa branca
   sem nada abaixo do formulário, em 47 das 48 (achado no teste completo de
   13/09/2026). O original era uma div sem estilo. Com o material dentro, volta. */
.sg-tool .sg-resultado:empty {
	display: none;
}

/* No celular e no tablet o respiro de 30px come a largura útil da tela.
   768px é a mesma quebra que as ferramentas já usavam. */
@media (max-width: 768px) {
	.sg-tool .sg-resultado { padding: 18px 14px; border-radius: 8px; }
}

/*
 * As caixas de resultado PRÓPRIAS das ferramentas, no celular. Passada das 48 (25/09/2026), Reforço Escolar a
 * 390px: a caixa de fora (.pre-resultado-box) e a de dentro (#pre-plano-gerado) com 40px de cada lado deixavam o
 * material com 206px — umas 25 letras por linha, e a tabela do cronograma rolando de lado. O mesmo par de 40px
 * (ou 30–50px) em outras 22 ferramentas, nenhuma com regra de celular. Aqui ficam no respiro do .sg-resultado.
 * Preso a .sg-tool:not([data-sg-casca]): o PDF e a impressão do núcleo remontam o invólucro em volta do clone
 * (as "cascas", com as mesmas classes) e o papel não pode mudar. Ficam de fora a Atividade Inclusiva (#gai-gerado)
 * e a Prova por Texto (.sptx-resultado), que desenham a imagem/PDF da caixa viva, e as que já tinham regra
 * (Plano de Aula .gpa-rx, Prova .conteudo-prova, SAEB, Vídeo, Resumo de Vídeo).
 * Guarda: tests/js/respiro-do-resultado-no-celular.js (lista todas as caixas de resultado com 30px ou mais).
 */
@media screen and (max-width: 768px) {
	.sg-tool:not([data-sg-casca]) .gaat-resultado-box,
	.sg-tool:not([data-sg-casca]) .geja-resultado,
	.sg-tool:not([data-sg-casca]) .giaa-resultado-box,
	.sg-tool:not([data-sg-casca]) .gae-resultado-box,
	.sg-tool:not([data-sg-casca]) .gaa-resultado-box,
	.sg-tool:not([data-sg-casca]) .gad-resultados,
	.sg-tool:not([data-sg-casca]) .gbi-result-box,
	.sg-tool:not([data-sg-casca]) .gce-resultado-box,
	.sg-tool:not([data-sg-casca]) .gda-resultado-box,
	.sg-tool:not([data-sg-casca]) .ghs-resultado-box,
	.sg-tool:not([data-sg-casca]) .gic-resultado-box,
	.sg-tool:not([data-sg-casca]) #gje-resultado,
	.sg-tool:not([data-sg-casca]) .glv-resultado-box,
	.sg-tool:not([data-sg-casca]) .mpe-resultado-box,
	.sg-tool:not([data-sg-casca]) .gpb-resultado-box,
	.sg-tool:not([data-sg-casca]) .gpei-resultado-box,
	.sg-tool:not([data-sg-casca]) .gpi-resultado-box,
	.sg-tool:not([data-sg-casca]) .gpv-resultado-box,
	.sg-tool:not([data-sg-casca]) .gpa-prova-resultados,
	.sg-tool:not([data-sg-casca]) .gqs-resultado-box,
	.sg-tool:not([data-sg-casca]) .gqt-resultado-box,
	.sg-tool:not([data-sg-casca]) .pre-resultado-box,
	.sg-tool:not([data-sg-casca]) .gri-resultado-box,
	.sg-tool:not([data-sg-casca]) .gta-resultado-box,
	.sg-tool:not([data-sg-casca]) .gtadapt-resultado-box {
		padding: 18px 14px;
	}
	.sg-tool:not([data-sg-casca]) #gaat-atividade-gerada,
	.sg-tool:not([data-sg-casca]) #giaa-adaptacoes-geradas,
	.sg-tool:not([data-sg-casca]) #gae-planejamento-gerado,
	.sg-tool:not([data-sg-casca]) #gaa-sugestoes-geradas,
	.sg-tool:not([data-sg-casca]) #gbi-conteudo,
	.sg-tool:not([data-sg-casca]) #gce-charadas-geradas,
	.sg-tool:not([data-sg-casca]) #gda-dinamica-gerada,
	.sg-tool:not([data-sg-casca]) #ghs-historia-gerada,
	.sg-tool:not([data-sg-casca]) #gic-intervencao-gerada,
	.sg-tool:not([data-sg-casca]) #glv-vocabulario-gerado,
	.sg-tool:not([data-sg-casca]) #mpe-musica-gerada,
	.sg-tool:not([data-sg-casca]) #gpb-parecer-gerado,
	.sg-tool:not([data-sg-casca]) #gpei-plano-gerado,
	.sg-tool:not([data-sg-casca]) #gpi-projeto-gerado,
	.sg-tool:not([data-sg-casca]) #gpv-aula-gerada,
	.sg-tool:not([data-sg-casca]) #gqt-questoes-geradas,
	.sg-tool:not([data-sg-casca]) #pre-plano-gerado,
	.sg-tool:not([data-sg-casca]) #gri-resumo-gerado,
	.sg-tool:not([data-sg-casca]) #gta-tabela-gerada,
	.sg-tool:not([data-sg-casca]) #gtadapt-tarefa-gerada {
		padding: 16px 12px;
	}
}

/* No papel o cartão não faz sentido: sombra, barra e cantos viram tinta à toa.
   Cada ferramenta resolvia isso do seu jeito (ou não resolvia). */
@media print {
	.sg-tool .sg-resultado {
		padding: 0;
		margin: 0 0 12px;
		border-left: none;
		border-radius: 0;
		box-shadow: none;
		/* não partir o cartão no meio de uma página */
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

/* A tabela larga rola dentro da própria caixa em vez de estourar a tela.
   O estilo também vai embutido no material (SG_Blocos), porque ele viaja
   para o post salvo, onde esta folha não é carregada. */
.sg-material__rolagem {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
/* A caixa que rola entra no Tab (sg-export.js, rolagemPeloTeclado): o foco aparece como nos botões. */
.sg-material__rolagem[data-sg-rola]:focus-visible { outline: 3px solid var(--sg-acao-forte, #1565c0); outline-offset: 2px; }

/* O emoji do rótulo do cabeçalho vira <img class="emoji"> (wp-emoji) e o tema dá max-width:100% a toda imagem:
   na conta da largura mínima da coluna ele "encolhe" e, no celular, o "📖 Disciplina" invadia a borda do rótulo.
   Junto com o <span nowrap> de SG_Blocos::rotulo_inteiro (24/09/2026). */
.sg-material__cabecalho img.emoji { max-width: none !important; }
/* Palavra sem ponto de quebra no valor do cabeçalho (o link do vídeo, nas Questões sobre Vídeo) quebra onde precisar: no
   celular a tabela passava de 375 para 409 px. Aqui e não no estilo embutido: o kses tira overflow-wrap do rascunho salvo
   (passada das 48, 25/09/2026). */
.sg-material__cabecalho td { overflow-wrap: anywhere; word-break: break-word; }

@media print {
	.sg-material__rolagem { overflow: visible !important; }
	.sg-material table { width: 100%; table-layout: fixed; word-wrap: break-word; }
}

/* ------------------------------------------------------------------ *
 * Caixa de carregamento
 *
 * Extraída do Planejamento Anual, a ferramenta que o dono escolheu como
 * padrão: os valores abaixo são os dele, copiados. Antes cada uma das 48
 * tinha o seu jeito de dizer "estou gerando".
 *
 * São duas peças, usadas juntas ou separadas:
 *   .sg-progresso  — a trilha horizontal de etapas (só faz sentido em
 *                    ferramenta com geração progressiva, como o Anual)
 *   .sg-carregando — a caixa com bolinhas, título, lista de etapas,
 *                    barra de porcentagem e tempo
 * ------------------------------------------------------------------ */

/* --- trilha horizontal de etapas --- */
.sg-tool .sg-progresso {
	display: flex;
	justify-content: space-between;
	max-width: 900px;
	margin: 0 auto 40px;
	padding: 30px;
	background: var(--sg-fundo-sutil, #f8f9fa);
	border-radius: 10px;
}

.sg-tool .sg-progresso__etapa {
	text-align: center;
	flex: 1;
	position: relative;
}

.sg-tool .sg-progresso__etapa:not(:last-child)::after {
	content: '→';
	position: absolute;
	right: -20px;
	top: 20px;
	font-size: 24px;
	color: var(--sg-borda-sutil, #ddd);
}

.sg-tool .sg-progresso__icone {
	font-size: 40px;
	margin-bottom: 10px;
	opacity: 0.3;
	transition: all 0.3s;
}

.sg-tool .sg-progresso__rotulo {
	font-size: 14px;
	color: var(--sg-texto-suave, #666);
	font-weight: 600;
}

.sg-tool .sg-progresso__etapa.is-feita .sg-progresso__icone { opacity: 1; filter: grayscale(0); }
.sg-tool .sg-progresso__etapa.is-feita .sg-progresso__rotulo { color: var(--sg-confirma, #27ae60); }
.sg-tool .sg-progresso__etapa.is-ativa .sg-progresso__icone { opacity: 1; animation: sg-pulsa 1.5s ease-in-out infinite; }
.sg-tool .sg-progresso__etapa.is-ativa .sg-progresso__rotulo { color: var(--sg-acao, #3498db); }

@keyframes sg-pulsa {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.1); }
}

/* --- a caixa --- */
.sg-tool .sg-carregando {
	margin: 40px auto;
	max-width: 600px;
}

.sg-tool .sg-carregando__caixa {
	background: var(--sg-fundo, #fff);
	padding: 50px;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.sg-tool .sg-carregando__pontos {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
}

.sg-tool .sg-carregando__ponto {
	width: 15px;
	height: 15px;
	background: var(--sg-acao, #3498db);
	border-radius: 50%;
	animation: sg-pula 1.4s ease-in-out infinite;
}

.sg-tool .sg-carregando__ponto:nth-child(1) { animation-delay: -0.32s; }
.sg-tool .sg-carregando__ponto:nth-child(2) { animation-delay: -0.16s; }

@keyframes sg-pula {
	0%, 80%, 100% { transform: scale(0.8) translateY(0);    opacity: 0.5; }
	40%           { transform: scale(1.2) translateY(-10px); opacity: 1; }
}

.sg-tool .sg-carregando__titulo {
	color: var(--sg-texto, #2c3e50);
	font-size: 24px;
	margin-bottom: 15px;
	font-weight: 600;
}

.sg-tool .sg-carregando__mensagem {
	color: var(--sg-texto-suave, #7f8c8d);
	font-size: 16px;
	margin-bottom: 30px;
}

/* --- lista de etapas dentro da caixa --- */
.sg-tool .sg-carregando__etapas {
	margin: 25px 0;
	text-align: left;
	background: var(--sg-fundo-sutil, #f8f9fa);
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid var(--sg-acao, #3498db);
}

.sg-tool .sg-etapa {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	font-size: 14px;
	color: var(--sg-texto-suave, #555);
	transition: all 0.3s ease;
}

.sg-tool .sg-etapa__icone { font-size: 18px; min-width: 25px; text-align: center; }
.sg-tool .sg-etapa__texto { flex: 1; font-weight: 500; }

.sg-tool .sg-etapa.is-espera { opacity: 0.5; }
.sg-tool .sg-etapa.is-ativa  { color: var(--sg-acao, #3498db); font-weight: 600; animation: sg-pulsa-etapa 1.5s ease-in-out infinite; }
.sg-tool .sg-etapa.is-feita  { color: var(--sg-confirma, #27ae60); font-weight: 500; }

@keyframes sg-pulsa-etapa {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}

/* --- barra de porcentagem ---
 * O número fica LOGO ABAIXO da barra. Ele morava dentro dela, centrado, e a barra tem 8 px com overflow
 * hidden: da letra de 14 px só o miolo aparecia, escuro sobre o azul (passada das 48, Planejamento Anual,
 * 23/09/2026). A barra não esconde mais o que passa dela; o preenchimento tem o próprio arredondamento. */
.sg-tool .sg-carregando__barra {
	position: relative;
	width: 100%;
	height: 8px;
	background: var(--sg-borda, #ecf0f1);
	border-radius: 10px;
	overflow: visible;
	margin-bottom: 28px;
}

.sg-tool .sg-carregando__preenchimento {
	height: 100%;
	background: linear-gradient(90deg, var(--sg-acao, #3498db), var(--sg-acao-escura, #2980b9));
	background-color: var(--sg-acao, #3498db);   /* reserva: o Elementor apaga o degradê até o bloco aparecer */
	border-radius: 10px;
	width: 0%;
	transition: width 0.5s ease;
}

.sg-tool .sg-carregando__percentual {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 6px);
	font-weight: 700;
	color: var(--sg-texto, #2c3e50);
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	z-index: 10;
}

/* --- tempo decorrido e estimativa --- */
.sg-tool .sg-carregando__tempo {
	margin-top: 20px;
	padding: 15px;
	background: #e3f2fd;
	border: 1px solid #2196f3;
	border-radius: 8px;
	text-align: left;
}

.sg-tool .sg-carregando__tempo p { margin: 0 0 8px; font-size: 14px; color: #1565c0; }
/* a dica: #42a5f5 no fundo #e3f2fd dava 2,3:1 (auditoria de 03/10/2026); o azul das outras linhas dá 5,3:1 */
.sg-tool .sg-carregando__tempo p:last-child { margin-bottom: 0; font-size: 12px; color: #1565c0; font-style: italic; }

@media (max-width: 768px) {
	.sg-tool .sg-carregando__caixa { padding: 26px 18px; border-radius: 12px; }
	.sg-tool .sg-progresso { padding: 18px 10px; }
	.sg-tool .sg-progresso__icone { font-size: 28px; }
	.sg-tool .sg-progresso__rotulo { font-size: 12px; }
	.sg-tool .sg-progresso__etapa:not(:last-child)::after { display: none; }
}

@media print { .sg-tool .sg-carregando, .sg-tool .sg-progresso { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
 * Formulário desenhado pelo núcleo (SG_Formulario)
 *
 * Os valores vêm do Planejamento Anual — gpa-frontend.css — porque o padrão
 * combinado é o "anual limpo". Copiar em vez de aproximar evita que o piloto
 * fique "parecido": ele É o anual.
 *
 * Todo seletor é prefixado por .sg-form, classe que só o renderizador emite.
 * Sem isso as regras cairiam nas 46 ferramentas já marcadas .sg-tool--ok, que
 * ainda desenham o próprio formulário.
 * ══════════════════════════════════════════════════════════════════════ */

.sg-tool--ok .sg-form .sg-form__titulo {
	text-align: center;
	margin: 0 0 24px;
	color: var(--sg-texto, #2c3e50);
}

.sg-tool--ok .sg-form .sg-secao {
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-bottom: 2px solid #f0f0f0;
}
.sg-tool--ok .sg-form .sg-secao:last-of-type { border-bottom: none; }

.sg-tool--ok .sg-form .sg-secao__titulo {
	color: var(--sg-texto, #2c3e50);
	font-size: 22px;
	margin-bottom: 20px;
}

.sg-tool--ok .sg-form .sg-linha {
	display: flex;
	gap: 25px;
	margin-bottom: 20px;
}
.sg-tool--ok .sg-form .sg-linha > .sg-campo { flex: 1; margin-bottom: 0; }
/* Botão ao lado de um campo com rótulo ("🔍 Verificar" do link do vídeo): na altura da CAIXA, não do
   rótulo (22,5px de linha + 10px de margem), e do tamanho dele — a caixa do link fica com o resto e
   não corta o exemplo. Era meia linha para cada, com o botão 32px acima (teste manual, 15/09/2026). */
.sg-tool--ok .sg-form .sg-linha:has(> .sg-campo > label) > .sg-campo:not(:has(> label)):has(> .sg-btn--acao) {
	flex: 0 0 auto;
	padding-top: calc(22.5px + 10px);
}
/* Linha em que todos os campos estão escondidos (condicionais) não deixa o espaço dela
   sobrando — no Planos de Aula eram 20px a mais entre Etapa e Descrição (14/09/2026). */
.sg-tool--ok .sg-form .sg-linha:not(:has(> .sg-campo:not(.hid):not([style*="none"]))) { margin-bottom: 0; }

.sg-tool--ok .sg-form .sg-campo { margin-bottom: 25px; }

.sg-tool--ok .sg-form .sg-campo > label {
	display: block;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--sg-rotulo, #34495e);
	font-size: 15px;
}

.sg-tool--ok .sg-form .sg-obrig { color: var(--sg-alerta, #e74c3c); }
/* Rótulo que só o leitor de tela e a mensagem de erro leem ('rotulo_escondido'). */
.sg-tool--ok .sg-form .sg-campo > label.sg-rotulo--escondido {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sg-tool--ok .sg-form .sg-campo__ajuda {
	margin: 6px 0 0;
	/* 14px = --sg-nota: a dica do campo é lida pelo professor, muitas vezes no celular.
	   Estava em 13px, abaixo do mínimo de texto da ferramenta (medido em 17/09/2026). */
	font-size: var(--sg-nota, 14px);
	color: var(--sg-texto-suave, #7f8c8d);
}
/* Dica de SEÇÃO (a frase logo abaixo do título): perto do título e com folga do primeiro campo.
   Com a margem da dica de campo ela colava no rótulo de baixo — 0px (Aulas Eletivas, 16/09/2026). */
.sg-tool--ok .sg-form .sg-secao__titulo + .sg-campo__ajuda { margin: -8px 0 20px; }

/* Caixa única: o rótulo é a própria etiqueta, ao lado do controle. */
.sg-tool--ok .sg-form .sg-marcar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

/* Grupo simples de caixas ou bolinhas. */
.sg-tool--ok .sg-form .sg-grupo { display: flex; flex-direction: column; gap: 10px; }
.sg-tool--ok .sg-form .sg-grupo__item {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Grade de cartões clicáveis — o desenho do Anual. */
.sg-tool--ok .sg-form .sg-cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 15px;
	margin-top: 15px;
}
.sg-tool--ok .sg-form .sg-cartao {
	display: flex;
	/* flex-start, não center: com o rótulo quebrando em duas ou três linhas, a
	   caixa ficava flutuando no meio da altura do cartão. */
	align-items: flex-start;
	gap: 10px;
	padding: 15px;
	background: var(--sg-fundo-sutil, #f8f9fa);
	border: 2px solid var(--sg-borda-sutil, #e9ecef);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
}
.sg-tool--ok .sg-form .sg-cartao:hover {
	background: var(--sg-borda-sutil, #e9ecef);
	transform: translateY(-2px);
}
.sg-tool--ok .sg-form .sg-cartao input[type="checkbox"],
.sg-tool--ok .sg-form .sg-cartao input[type="radio"] {
	flex: 0 0 auto;      /* nunca encolhe, mesmo com rótulo comprido */
	margin: 2px 0 0;     /* alinha com a primeira linha do texto */
	width: 18px;
	height: 18px;
}
/* O rótulo simples (um <span> só) também encolhe e quebra a palavra comprida dentro do cartão: "Autoavaliação/Reflexão"
   não tem onde quebrar, e com uma fonte mais larga passava 11 px da borda da Lista (Vistoria de 25/10/2026). Era o
   min-width:auto do item flex — o mesmo que o .sg-cartao__texto já resolve. */
.sg-tool--ok .sg-form .sg-cartao > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * Cartão marcado.
 *
 * Sem isto, marcado e desmarcado ficam idênticos e a escolha do professor não
 * aparece. Os valores são os do seletor de bimestres do Planejamento Anual
 * (.bimestre-checkbox-label), que é o cartão selecionado do padrão.
 */
.sg-tool--ok .sg-form .sg-cartao:has( input:checked ) {
	background: linear-gradient( 135deg, #e3f2fd 0%, #f0f8ff 100% );
	border-color: var(--sg-acao);
	font-weight: 600;
}
.sg-tool--ok .sg-form .sg-cartao:has( input:checked ):hover {
	background: linear-gradient( 135deg, #bbdefb 0%, #e3f2fd 100% );
}

/*
 * A armadilha sai da tela, e não some com display:none.
 * A sonda ignora o que não tem caixa (offsetParent nulo), e fora da tela o campo
 * continua existindo para o robô que lê o HTML — que é a razão dele existir.
 */
.sg-form .sg-armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 768px) {
	/* Empilhada, a linha não soma margem própria aos 25px de cada campo: eram 45px entre
	   linhas e 25px dentro delas, visível em todo formulário de duas colunas no celular. */
	.sg-tool--ok .sg-form .sg-linha { flex-direction: column; gap: 0; margin-bottom: 0; }
	.sg-tool--ok .sg-form .sg-linha > .sg-campo { margin-bottom: 25px; }
	/* empilhada, o botão vem logo abaixo da caixa: sem o degrau do rótulo */
	.sg-tool--ok .sg-form .sg-linha:has(> .sg-campo > label) > .sg-campo:not(:has(> label)):has(> .sg-btn--acao) { padding-top: 0; }
	.sg-tool--ok .sg-form .sg-cartoes { grid-template-columns: 1fr; }
	.sg-tool--ok .sg-form .sg-secao { margin-bottom: 28px; padding-bottom: 20px; }
	.sg-tool--ok .sg-form .sg-secao__titulo { font-size: 19px; }
	/*
	 * Campo com 16px no celular (17/09/2026). Com menos que isso o Safari do iPhone dá
	 * ZOOM na página ao tocar no campo, e o professor tem de desfazer o zoom a cada
	 * campo. Medido: 44 das 48 telas tinham campo de 15px a 390px. Só controles de
	 * formulário — nada disto alcança o material nem o papel.
	 *
	 * !important de propósito: duas ferramentas (Prova por Texto e Prova e Avaliação)
	 * dão 15px por ID (#sptx-container textarea), que vence qualquer classe. No celular
	 * os 16px são função, não gosto — nenhuma regra de ferramenta deve desfazer.
	 */
	.sg-tool--ok .sg-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	.sg-tool--ok .sg-form select,
	.sg-tool--ok .sg-form textarea { font-size: 16px !important; }
}

/* Cartão de duas linhas: nome em cima, explicação embaixo.
   Valores copiados do .checkbox-content do Gerador de Atividades Adaptadas —
   16px no nome, 13px em #666 na explicação — que era o cartão que o professor
   já conhecia antes da unificação. */
.sg-tool--ok .sg-form .sg-cartao__texto {
	display: block;
	min-width: 0;            /* deixa o texto quebrar dentro do flex */
}
.sg-tool--ok .sg-form .sg-cartao__texto strong {
	display: block;
	font-size: 16px;
	margin-bottom: 2px;
	font-weight: 600;
	line-height: 1.3;
}
.sg-tool--ok .sg-form .sg-cartao__texto small {
	display: block;
	color: #666;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 400;        /* o cartão marcado engrossa o nome, não a explicação */
}

/* ------------------------------------------------------------------ *
 * Fora do padrão, por declaração: data-sg-cru
 *
 * O padrão veste TODO campo dentro de .sg-tool--ok, e isso é certo para
 * formulário. Mas algumas ferramentas têm campo que não é de formulário:
 * a caixa de busca de uma paleta, o campo de URL de um diálogo, a barra
 * de um editor. Ali o tamanho grande do padrão atrapalha em vez de ajudar.
 *
 * Em vez de exceção por ferramenta na folha — que espalharia o nome de
 * cada uma aqui dentro —, a ferramenta MARCA o pedaço com data-sg-cru e
 * o padrão se retira dele. Uma convenção, não um remendo.
 * ------------------------------------------------------------------ */
.sg-tool--ok [data-sg-cru] input,
.sg-tool--ok [data-sg-cru] select,
.sg-tool--ok [data-sg-cru] textarea {
	width: auto;
	padding: revert;
	border: revert;
	border-radius: revert;
	font-size: revert;
	font-family: revert;
	background: revert;
	box-shadow: none;
	transition: none;
}

/* ==================================================================
 * A BIBLIOTECA DO PROFESSOR E A PÁGINA DE UM MATERIAL
 *
 * Tudo com os tokens de cima: o professor sai da ferramenta e chega aqui
 * sem sentir que trocou de produto.
 * ================================================================== */

/* ---- filtros ---- */
.sg-materiais__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: var(--sg-gap);
}
.sg-materiais__filtros input[type="search"] { flex: 1 1 220px; }
.sg-materiais__filtros select { flex: 0 1 240px; }
/* 16px: com letra menor o iPhone dá zoom na página ao tocar na lista (visto em 390 px, 05/10/2026) */
.sg-materiais__filtros input[type="search"],
.sg-materiais__filtros select { font-size: 16px; }
.sg-materiais__filtros .sg-btn--gerar { flex: 0 0 auto; width: auto; margin: 0; padding: 12px 22px; }
/* No celular a lista das ferramentas divide a linha com o "Filtrar" (ficava pela metade, com o botão sozinho embaixo). */
@media (max-width: 640px) {
	/* margem menor: com os 18px de cada lado o "Todas as ferramentas" saía cortado em 390 px (revisão final de 01/11/2026) */
	.sg-materiais__filtros select { flex: 1 1 160px; padding-left: 10px; padding-right: 6px; }
}

.sg-materiais__contagem {
	margin: 0 0 var(--sg-gap);
	color: var(--sg-texto-suave);
	font-size: var(--sg-nota);
}
.sg-materiais__vazio {
	margin: 0;
	padding: 30px;
	text-align: center;
	color: var(--sg-texto-suave);
	background: var(--sg-fundo-sutil);
	border-radius: var(--sg-raio);
}

/* ---- um material na lista ---- */
.sg-materiais__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.sg-mat {
	background: var(--sg-fundo);
	border: 1px solid var(--sg-borda);
	border-left: 4px solid var(--sg-acao);
	border-radius: var(--sg-raio);
	padding: 18px 20px;
}
.sg-mat__topo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 6px;
	font-size: 12.5px;
	color: var(--sg-texto-suave);
}
/* texto azul na cor forte: a escura dava 4,3:1 no branco (axe na página do material, revisão final de 01/11/2026) */
.sg-mat__ferramenta { font-weight: 600; color: var(--sg-acao-forte); }
.sg-mat__marca,
.sg-material__marca {
	background: var(--sg-fundo-sutil);
	border: 1px solid var(--sg-borda-sutil);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11.5px;
}
.sg-mat__titulo { margin: 0 0 12px; font-size: 17px; line-height: 1.35; color: var(--sg-texto); }
.sg-mat__titulo a { color: inherit; text-decoration: none; }
.sg-mat__titulo a:hover { color: var(--sg-acao-forte); text-decoration: underline; }

.sg-mat__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-mat__acoes .sg-btn { width: auto; margin: 0; padding: 9px 16px; font-size: 13.5px; }
/* fundo no azul mais escuro da ação: o claro dava 3,15:1 com a letra branca (axe na biblioteca, revisão final de 01/11/2026);
   o Word, ao lado, fica no azul forte — os dois continuam diferentes. Com .sg-tool na frente: o .sg-tool .sg-btn (azul
   claro) vencia o .sg-btn--abrir sozinho */
.sg-tool .sg-btn--abrir {
	background: var(--sg-acao-forte-hover);
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	border-radius: var(--sg-raio);
}
.sg-tool .sg-btn--abrir:hover { background: #1a5276; color: #fff; }

/*
 * A caixa onde o conteúdo cai no primeiro clique de exportar.
 *
 * Fora da tela, mas COM LARGURA: o PDF é desenhado a partir do que está no
 * documento, e um elemento com display:none tem altura zero — sairia em branco.
 */
.sg-mat__conteudo {
	position: absolute;
	left: -10000px;
	top: 0;
	width: 800px;
}

.sg-materiais__paginas {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-top: var(--sg-gap);
}
.sg-materiais__paginas .sg-btn { width: auto; margin: 0; padding: 9px 16px; }
.sg-materiais__pagina { color: var(--sg-texto-suave); font-size: var(--sg-nota); }

/* ---- a página de um material ---- */
.sg-material__origem {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--sg-texto-suave);
}
.sg-material__ferramenta { font-weight: 600; color: var(--sg-acao-forte); }
/* O caminho de volta para a biblioteca (29/09/2026): antes só o voltar do navegador. */
.sg-material__voltar { font-size: 14px; font-weight: 600; color: var(--sg-acao-forte); text-decoration: none; margin-right: 8px; }
.sg-material__voltar:hover { text-decoration: underline; }
/* o contorno do foco na cor escura da ação: o halo claro dava 1,4:1 no fundo branco (auditoria de 03/10/2026) */
.sg-material__voltar:focus-visible { outline: 3px solid var(--sg-acao-escura); outline-offset: 2px; }
.sg-material__titulo {
	margin: 0 0 var(--sg-gap);
	font-size: var(--sg-titulo);
	line-height: 1.3;
	color: var(--sg-texto);
}
.sg-material__conteudo { margin-top: var(--sg-gap); }

/* ---- a folha da Caligrafia e da Matemática Básica no celular ----
 *
 * A folha é desenhada para A4: cabeçalho em grade de 3 colunas com linhas de
 * largura fixa (280px / 50mm), fileiras de letras sem quebra, palavras com
 * min-width. No celular ela estourava a tela — 187px na Caligrafia a 390px e 108px
 * na Matemática a 320px (teste completo, 13/09/2026). Medidos os 8 tipos da
 * Caligrafia e os 9 da Matemática: com estas regras, nenhum estoura a 320px.
 *
 * SÓ NA TELA, e presas ao invólucro da ferramenta (.sg-tool--…): o PDF, a imagem
 * PNG, a impressão e a pré-visualização delas CLONAM a folha para fora desse
 * invólucro (html2pdf num contêiner no <body>, a imagem num clone no <body>, a
 * janela nova com o innerHTML). O PDF e a impressão do NÚCLEO (Matemática) refazem
 * o invólucro em volta do clone — as "cascas" de sg-export.js, com as mesmas
 * classes —, por isso o :not([data-sg-casca]): sem ele o seletor casava com o clone
 * do PDF (conferido no navegador, 13/09/2026). Nenhum clone de exportação casa com
 * estes seletores; o papel sai igual ao de antes, no computador e no celular.
 * A grade da busca matemática é CSS grid: o flex-wrap não a alcança.
 *
 * O CABEÇALHO FICA EM 3 COLUNAS (só encolhem). Empilhar numa coluna ficava mais
 * bonito no celular, mas foi medido pixel a pixel (13/09/2026, iframe de 390px): com
 * ele, a imagem PNG da Matemática mudava 5.751 pixels (contorno das letras de
 * "Escola:", "Aluno:" e dos sinais +) — o html2canvas copia a página inteira e a
 * grade da tela interfere. Com as 3 colunas encolhendo, PDF, PNG e Word saem
 * idênticos aos de antes. Não trocar sem refazer essa medida.
 */
@media screen and (max-width: 600px) {
	.sg-tool--caligrafia:not([data-sg-casca]) #gcp-atividade-gerada .atividade-completa,
	.sg-tool--matematica-basica:not([data-sg-casca]) #gmb-atividade-gerada .atividade-completa {
		padding: 16px 12px !important;
	}
	.sg-tool--caligrafia:not([data-sg-casca]) #gcp-atividade-gerada .cabecalho-atividade [style*="grid-template-columns"],
	.sg-tool--matematica-basica:not([data-sg-casca]) #gmb-atividade-gerada .cabecalho-atividade [style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
		gap: 8px !important;
	}
	.sg-tool--caligrafia:not([data-sg-casca]) #gcp-atividade-gerada .cabecalho-atividade span[style*="inline-block"][style*="width:"],
	.sg-tool--matematica-basica:not([data-sg-casca]) #gmb-atividade-gerada .cabecalho-atividade span[style*="inline-block"][style*="width:"] {
		width: 100% !important;
		box-sizing: border-box;
	}
	.sg-tool--caligrafia:not([data-sg-casca]) #gcp-atividade-gerada .conteudo-atividade [style*="display:flex"],
	.sg-tool--matematica-basica:not([data-sg-casca]) #gmb-atividade-gerada .conteudo-atividade [style*="display:flex"] {
		flex-wrap: wrap !important;
	}
	.sg-tool--caligrafia:not([data-sg-casca]) #gcp-atividade-gerada .conteudo-atividade [style*="min-width"],
	.sg-tool--matematica-basica:not([data-sg-casca]) #gmb-atividade-gerada .conteudo-atividade [style*="min-width"] {
		min-width: 0 !important;
		max-width: 100%;
	}
}

/*
 * O player do vídeo na rota do material, no celular (Questões sobre Vídeo e Resumo de
 * Vídeo). O material guarda o iframe com height="450"; a caixa 16:9 que o encolhe é
 * CSS da página da ferramenta, que a rota /meu-material/ não carrega — no celular
 * sobrava um retângulo de 450 px de altura com o vídeo espremido (teste completo,
 * 13/09/2026). Preso a .sg-material: na página da ferramenta o player fica fora do
 * material e a regra dela continua valendo sozinha. O papel não sente: PDF,
 * impressão e cópia tiram o iframe (tirarControles) e o Word também (SG_Word).
 */
@media screen and (max-width: 600px) {
	.sg-material .gqy-video-container iframe[src*="youtube.com/embed/"],
	.sg-material .rvy-video-container iframe[src*="youtube.com/embed/"] {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/*
 * Títulos do material no celular. O tema desenha o h2 com 35px e o h3 do material tem 24px:
 * numa tela de 390px, "QUESTÕES DISSERTATIVAS" e "ORIENTAÇÕES AO ALUNO" não cabiam e a palavra
 * quebrava no meio ("DISSERTATI / VAS" — Avaliações Diagnósticas, teste manual, 15/09/2026).
 * Só na TELA: a cópia que vira PDF ou impressão leva [data-sg-alvo-papel] no alvo, e o material
 * dentro dela fica como antes — PDF feito no celular sai igual ao feito no computador.
 */
@media screen and (max-width: 600px) {
	.sg-material:not([data-sg-alvo-papel]):not([data-sg-alvo-papel] *) h1 { font-size: 24px !important; }
	.sg-material:not([data-sg-alvo-papel]):not([data-sg-alvo-papel] *) h2 { font-size: 22px !important; }
	.sg-material:not([data-sg-alvo-papel]):not([data-sg-alvo-papel] *) h3 { font-size: 18px !important; }
	/* o h4 acompanha: ficava com os 20px do computador, MAIOR que o h3 de cima (Vistoria em 390 px, Charadas, 05/10/2026) */
	.sg-material:not([data-sg-alvo-papel]):not([data-sg-alvo-papel] *) h4 { font-size: 17px !important; }
}

/*
 * A linha do material no computador: o texto ocupa a largura do cartão, como os títulos, as tabelas
 * e o papel. De 18 a 23/09/2026 parágrafo e item de lista paravam em 38em (~80 caracteres); na tela
 * de verdade isso deixava a metade direita do cartão vazia ao lado de títulos e tabelas de largura
 * toda — "os textos parecem alinhados à esquerda" (o dono, 23/09/2026, no Anual, no PEI e no Parecer).
 * Decisão dele: largura do cartão. Não pôr de volta limite só no texto.
 */

/*
 * A página do material guardado (/meu-material/ID/) ocupa a largura toda. O tema põe o conteúdo
 * numa caixa flexível que mede pelo conteúdo: eram os parágrafos longos que a esticavam, e com a
 * linha limitada a ~80 caracteres ela encolheu para 736 px, encostada à esquerda (olhado no
 * navegador, 18/09/2026).
 */
.sg-material--pagina {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/*
 * Ctrl+P na página do material guardado: sai o material, não o site em volta. Com a folha da ferramenta (o Anual, a
 * Lista, o Mensal… põem a delas nesta página) saía PIOR que isso: a regra de impressão delas esconde tudo menos a caixa
 * da tela da ferramenta, que aqui não existe — o papel saía em branco (revisão final de 02/10/2026). Sai da folha tudo o
 * que não é o material nem o contém (:has; sem ele, vale só a segunda regra); o material fica à vista por cima das
 * regras das ferramentas (a classe ganha do "body *").
 */
@media print {
	body:has(.sg-material--pagina) *:not(:has(.sg-material--pagina)):not(.sg-material--pagina):not(.sg-material--pagina *) { display: none !important; }
	.sg-material--pagina, .sg-material--pagina * { visibility: visible !important; }
	.sg-material--pagina .sg-material__origem { display: none !important; }
}

/* ---- aviso na página, no lugar do alert() (SG.avisar, sg-carregando.js, 24/09/2026) ----
 * Fora do .sg-tool: a lista mora no <body>, no alto da tela, acima de tudo (a barra do WordPress incluída). */
.sg-avisos {
	position: fixed;
	top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
	left: 50%;
	transform: translateX(-50%);
	/* acima do editor do Slides (z-index 999999): "URL inválida" e os erros de envio de imagem saíam borrados atrás
	 * da cortina dele (auditoria de 03/10/2026) */
	z-index: 1000001;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(560px, calc(100vw - 32px));
	pointer-events: none;
}
.sg-aviso-flutuante {
	position: relative;
	pointer-events: auto;
	margin: 0;
	padding: 12px 44px 12px 16px;
	border-left: 5px solid #e67e22;
	border-radius: 8px;
	background: #fff4e5;
	color: #1f2d3d;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	font: 15px/1.45 Arial, Helvetica, sans-serif;
}
.sg-aviso-flutuante--erro { border-left-color: #c0392b; background: #fdecea; }
.sg-aviso-flutuante--ok   { border-left-color: #27ae60; background: #eafaf1; }
.sg-aviso-flutuante__texto { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sg-aviso-flutuante__fechar {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #1f2d3d;
	font: 22px/1 Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.sg-aviso-flutuante__fechar:hover,
.sg-aviso-flutuante__fechar:focus-visible { background: rgba(0, 0, 0, 0.08); outline: 2px solid #1a73e8; outline-offset: 1px; }

/*
 * Fórmula larga no celular (revisão final de 02/10/2026). O MathJax 3 não quebra fórmula em linhas: uma conta de 411 px
 * fazia a página inteira rolar 80 px para o lado numa tela de 390. A fórmula que não cabe na coluna (marcada pelo
 * sg-formula-larga.js) e a fórmula em bloco rolam dentro delas mesmas. Só na tela: o papel e o PDF não mudam.
 * inline-grid, e não inline-block: o inline-block com rolagem levanta a fórmula (a base vira a borda de baixo).
 */
@media screen {
	mjx-container.sg-formula-larga {
		display: inline-grid;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		vertical-align: middle;
	}
	mjx-container[display="true"] {
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.katex-display {
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
	}
}