/* Tamanhos de fonte (e a largura do balão) proporcionais a
   --fonte-simulador-px, a variável dos botões A−/A+ (mainApp.js): o balão e a
   lista no gerador crescem e diminuem junto com o resto do simulador. */

/* Atividades guiadas (assets/problemas/js/atividadeGuiada.js,
   docs/atividades-guiadas.md): balão que acompanha o aluno passo a passo e
   contorno pulsante no alvo. Sem fundo escurecido: o simulador continua
   utilizável durante a atividade. z-index abaixo dos modais do Bootstrap
   (1040/1050), acima do canvas e das leituras flutuantes (1001). */

.ag-balao {
	position: fixed;
	z-index: 1030;
	width: min(calc(var(--fonte-simulador-px, 17.05px) * 20), calc(100vw - 16px));   /* 340px na fonte padrão */
	max-height: 72vh;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: #0f172a;
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
	font-family: inherit;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .88);
	line-height: 1.5;
	text-align: left;
}

.ag-cabecalho {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 8px 8px 14px;
	border-bottom: 1px solid #e2e8f0;
}
.ag-titulo {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .82);
	color: #1e3a5f;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ag-contador {
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .7);
	color: #64748b;
	white-space: nowrap;
}
.ag-cabecalho button {
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #64748b;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * 1.06);
	line-height: 1;
	cursor: pointer;
}
.ag-cabecalho button:hover { background: #f1f5f9; color: #0f172a; }

/* Balão sem alvo: arrasta-se pelo cabeçalho */
.ag-livre .ag-cabecalho { cursor: move; touch-action: none; user-select: none; }
.ag-livre .ag-cabecalho button { cursor: pointer; }
.ag-alca { margin-left: -4px; color: #94a3b8; font-size: calc(var(--fonte-simulador-px, 17.05px) * .76); }
.ag-arrastando { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.36); }

.ag-corpo {
	padding: 12px 14px 4px;
	overflow-y: auto;
	min-height: 0;
}
.ag-texto p { margin: 0 0 8px; }

.ag-campo {
	display: block;
	margin: 10px 0 4px;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .76);
	font-weight: 600;
	color: #334155;
}
.ag-campo span { display: block; margin-bottom: 3px; }
.ag-campo input,
.ag-campo textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 9px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font: inherit;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .82);
	font-weight: 400;
	color: #0f172a;
	background: #f8fafc;
	resize: vertical;
}
.ag-campo input:focus,
.ag-campo textarea:focus {
	outline: none;
	border-color: #2B78C5;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(43, 120, 197, 0.18);
}

.ag-feito {
	margin-top: 8px;
	color: #15803d;
	font-weight: 600;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .82);
}

.ag-campo input[readonly],
.ag-campo textarea[readonly] { background: #f1f5f9; color: #475569; resize: none; }
/* Anotações à vista na pergunta final */
.ag-anotacoes {
	margin: 8px 0 4px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #f1f5f9;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .76);
}
.ag-anotacoes summary { font-weight: 700; color: #334155; cursor: pointer; }
.ag-anotacoes ul { margin: 4px 0 2px; padding-left: 18px; }
.ag-anotacoes li { margin: 1px 0; }
.ag-aviso { margin: 4px 0 8px; font-size: calc(var(--fonte-simulador-px, 17.05px) * .7); color: #64748b; }

/* Tela de conclusão */
.ag-concluida {
	margin-bottom: 8px;
	color: #15803d;
	font-weight: 700;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .82);
}

.ag-resumo ul { margin: 4px 0 10px; padding-left: 18px; }
.ag-resumo li { margin: 2px 0; }
.ag-resumo p { margin: 4px 0 10px; }

.ag-rodape {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #e2e8f0;
}
.ag-btn {
	flex: 0 0 auto;
	padding: 6px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #ffffff;
	color: #334155;
	font: inherit;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .82);
	font-weight: 600;
	cursor: pointer;
}
.ag-btn:hover:not(:disabled) { border-color: #2B78C5; color: #2B78C5; }
.ag-btn:disabled { opacity: 0.45; cursor: default; }
.ag-btn-primario {
	margin-left: auto;
	background: #2B78C5;
	border-color: #2B78C5;
	color: #ffffff;
}
.ag-btn-primario:hover:not(:disabled) { background: #22649f; color: #ffffff; }
.ag-btn-primario.ag-pulsar { animation: ag-pulso-botao 1.2s ease-in-out infinite; }
/* Ainda falta algo no passo (ação ou anotação): o motivo vai no title */
.ag-btn-primario.ag-indisponivel,
.ag-btn-primario.ag-indisponivel:hover { opacity: 0.45; cursor: not-allowed; background: #2B78C5; color: #ffffff; }
.ag-campo .ag-falta { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

.ag-minimizado .ag-corpo,
.ag-minimizado .ag-rodape,
.ag-minimizado .ag-seta { display: none; }

/* Seta do balão: quadrado girado na borda voltada para o alvo */
.ag-seta {
	position: absolute;
	width: 14px;
	height: 14px;
	background: #ffffff;
	transform: rotate(45deg);
	display: none;
}
.ag-seta-baixo { display: block; top: -7px; }      /* balão abaixo do alvo */
.ag-seta-cima { display: block; bottom: -7px; }    /* balão acima do alvo */
.ag-seta-direita { display: block; left: -7px; }   /* balão à direita do alvo */
.ag-seta-esquerda { display: block; right: -7px; } /* balão à esquerda do alvo */

.ag-contorno {
	position: fixed;
	z-index: 1029;
	pointer-events: none;
	border: 3px solid #2B78C5;
	border-radius: 10px;
	animation: ag-pulso 1.4s ease-in-out infinite;
}

/* Anel branco por dentro da borda: sem ele, o contorno azul sumia sobre o
   oceano (ex.: número da mistura entre as camadas, no ciclo do carbono) */
@keyframes ag-pulso {
	0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(43, 120, 197, 0.35); }
	50% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 9px rgba(43, 120, 197, 0); }
}
/* Clique no botão indisponível num passo com ação: o contorno pisca */
.ag-contorno.ag-lembrar { animation: ag-lembrar 0.25s ease-in-out 4; }
@keyframes ag-lembrar {
	0%, 100% { border-color: #2B78C5; }
	50% { border-color: #f59e0b; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(245, 158, 11, 0.35); }
}
@keyframes ag-pulso-botao {
	0%, 100% { box-shadow: 0 0 0 0 rgba(43, 120, 197, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(43, 120, 197, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ag-contorno, .ag-contorno.ag-lembrar, .ag-btn-primario.ag-pulsar { animation: none; }
	.ag-contorno { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
}

/* Lista de atividades no Gerador de Problemas (filtro "Atividade guiada") */
.ag-lista .ag-item,
.ag-proxima .ag-item {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #ffffff;
	color: #0f172a;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
/* Na janela do gerador, mesmo tamanho das opções dos filtros (.janelaOpcao) */
.ag-lista .ag-item,
.ag-lista .ag-vazio { font-size: calc(var(--fonte-simulador-px, 17.05px) * .88); }
.ag-lista .ag-item:hover,
.ag-lista .ag-item:focus-visible,
.ag-proxima .ag-item:hover,
.ag-proxima .ag-item:focus-visible {
	border-color: #2B78C5;
	background: #f1f7fd;
	outline: none;
}
.ag-lista .ag-item small,
.ag-proxima .ag-item small {
	display: block;
	margin-top: 2px;
	color: #64748b;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .7);
}
.ag-lista .ag-vazio { margin: 6px 0 0; color: #64748b; }


/* "Próxima atividade" no fim do resumo */
.ag-proxima {
	margin: 4px 0 10px;
	padding-top: 10px;
	border-top: 1px solid #e2e8f0;
}
.ag-proxima > span { font-size: calc(var(--fonte-simulador-px, 17.05px) * .76); font-weight: 700; color: #334155; }
.ag-proxima .ag-item { margin-top: 6px; }


/* Tour do simulador: botão #btn-tour logo abaixo da mãozinha (#help-cursor,
   redesign.css: top 66px no desktop, 16px no celular), no mesmo estilo */
body.sf3-redesign #btn-tour {
	position: absolute;
	top: 116px;
	right: 16px;
	z-index: 5;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	border: 1px solid var(--sf3-border, #e2e8f0);
	box-shadow: 0 2px 8px rgba(15,23,42,.08);
	color: #334155;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
body.sf3-redesign #btn-tour:hover { color: var(--sf3-accent, #2B78C5); }
body.sf3-redesign #btn-tour:focus-visible { outline: 2px solid #2B78C5; outline-offset: 2px; }
body.sf3-redesign.sf3-mobile #btn-tour { top: 66px; }
/* Primeira visita: pulsa até ser usado */
body.sf3-redesign #btn-tour.ag-tour-novo {
	color: #2B78C5;
	animation: ag-tour-novo 1.6s ease-out infinite;
}
@keyframes ag-tour-novo {
	0%   { box-shadow: 0 0 0 0 rgba(43,120,197,.55); }
	70%  { box-shadow: 0 0 0 12px rgba(43,120,197,0); }
	100% { box-shadow: 0 0 0 0 rgba(43,120,197,0); }
}
@media (prefers-reduced-motion: reduce) {
	body.sf3-redesign #btn-tour.ag-tour-novo { animation: none; box-shadow: 0 0 0 3px rgba(43,120,197,.45); }
}

/* Confirmação (confirmar() de atividadeGuiada.js, no lugar do confirm() do
   navegador): <dialog> modal no visual do balão. Fica na camada do topo do
   navegador, acima de tudo, com o fundo escurecido. */
.ag-dialogo {
	width: min(calc(var(--fonte-simulador-px, 17.05px) * 22), calc(100vw - 32px));   /* 375px na fonte padrão */
	padding: 0;
	border: none;
	border-radius: 14px;
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
	font-family: inherit;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * .88);
	line-height: 1.5;
	text-align: left;
}
.ag-dialogo::backdrop { background: rgba(15, 23, 42, 0.35); }
.ag-dialogo[open] { animation: ag-dialogo-entra .16s ease-out; }
@keyframes ag-dialogo-entra {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
}
.ag-dialogo-corpo {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 18px 18px 16px;
}
.ag-dialogo-corpo i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #d97706;
	font-size: calc(var(--fonte-simulador-px, 17.05px) * 1.06);
}
.ag-dialogo-corpo p { margin: 0; }
.ag-dialogo .ag-rodape { justify-content: flex-end; }
.ag-dialogo .ag-btn-primario { margin-left: 0; }
.ag-dialogo .ag-btn:focus-visible { outline: 2px solid #2B78C5; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.ag-dialogo[open] { animation: none; }
}