/* =========================================================
   Geometria Dinâmica — estilos (Educa.gente Lab)
   Roxo como cor principal, branco e lavanda nas superfícies, amarelo
   (--amarelo-apoio) para destaques e controles. Usa os tokens de style.css
   e os componentes de laboratorio.css.
   ========================================================= */
.gd-topo { background: radial-gradient(circle at 88% 20%, rgba(255, 201, 77, .28), transparent 38%), linear-gradient(180deg, var(--lilas, #E9E4F7), #fff); }
.gd-topo__grade { display: grid; grid-template-columns: 1.5fr .7fr; gap: 24px; align-items: center; }
.gd-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: .92rem; }
.gd-trilha .fer-voltar { margin: 0; }
.gd-trilha a:not(.fer-voltar) { color: var(--roxo); }
.gd-apresentacao { max-width: 46em; color: var(--texto-suave); }
.gd-topo__arte { position: relative; justify-self: center; width: min(240px, 100%); }
.gd-topo__arte svg { width: 100%; height: auto; display: block; }
.gd-topo__rotulo { position: absolute; right: -6px; top: 4px; background: var(--amarelo-apoio, #FFC94D); color: var(--grafite); font: 800 .95rem var(--fonte-titulo); padding: 6px 12px; border-radius: 999px; box-shadow: var(--sombra); }
@media (max-width: 760px) { .gd-topo__grade { grid-template-columns: 1fr; } .gd-topo__arte { display: none; } }

/* ---------- Lume como guia (mesmo padrão do Laboratório de Frações) ---------- */
.gd-guia-secao { position: sticky; top: 80px; z-index: 20; margin-top: 4px; }
.gd-guia { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--lilas, #E9E4F7); border-radius: 22px; padding: 10px 16px; box-shadow: var(--sombra); }
.gd-guia__avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--lilas, #E9E4F7); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--roxo); }
.gd-guia__balao { position: relative; flex: 1; background: var(--roxo-claro); border-radius: 16px; padding: 8px 14px; }
.gd-guia__balao::before { content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-right-color: var(--roxo-claro); border-left: 0; }
.gd-guia__nome { margin: 0; font: 700 .8rem var(--fonte-texto); color: var(--roxo); }
.gd-guia__nome span { font-weight: 500; color: var(--texto-suave); }
.gd-guia__texto { margin: 2px 0 0; font-weight: 500; color: var(--grafite); }
.gd-guia--fala .gd-guia__avatar { animation: gd-aceno .7s ease 1; }
.gd-guia--fala .gd-guia__balao { animation: gd-surge .35s ease 1; }
@keyframes gd-aceno { 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
@keyframes gd-surge { from { opacity: .3; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .gd-guia-secao { top: 76px; }
  .gd-guia { padding: 6px 10px; gap: 10px; border-radius: 16px; }
  .gd-guia__avatar { width: 40px; height: 40px; border-width: 2px; }
  .gd-guia__nome { display: none; }
  .gd-guia__balao { padding: 6px 10px; }
  .gd-guia__texto { font-size: .84rem; line-height: 1.35; margin: 0; }
}

/* o atributo hidden vence os display dos componentes (.botao, .lab-controle) */
.gd-simulador [hidden] { display: none !important; }

/* ---------- abas ---------- */
.gd-modulos { margin-top: 16px; }
.gd-abas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.gd-aba { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-height: 52px; background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 8px 10px; font: 700 .92rem var(--fonte-titulo); color: var(--grafite); transition: border-color .2s, box-shadow .2s, transform .2s; }
.gd-aba:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.gd-aba[aria-selected="true"] { border-color: var(--roxo); background: linear-gradient(160deg, #fff 55%, var(--roxo-claro)); box-shadow: 0 0 0 4px rgba(112, 55, 168, .14); color: var(--roxo-escuro, #4A2172); }
.gd-aba:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 1080px) { .gd-abas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gd-abas { grid-template-columns: 1fr 1fr; } .gd-aba { font-size: .85rem; min-height: 46px; } }

/* ---------- área de trabalho: ferramentas | quadro | informações ---------- */
.gd-area { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 14px; align-items: start; margin-top: 14px; padding-bottom: 40px; }
.gd-painel, .gd-info { padding: 14px; max-height: 760px; overflow: auto; }
.gd-painel__h, .gd-info__h { font-size: 1.05rem; margin: 0 0 8px; color: var(--roxo-escuro, #4A2172); }
.gd-info h3, .gd-painel h3 { font-size: .9rem; margin: 14px 0 6px; color: var(--roxo); }
.gd-info__titulo { font-weight: 700; margin: 0 0 6px; }
@media (max-width: 1180px) {
  .gd-area { grid-template-columns: 220px minmax(0, 1fr); }
  .gd-info { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 820px) {
  .gd-area { grid-template-columns: 1fr; }
  .gd-centro { order: -1; }   /* quadro primeiro, depois as ferramentas e as informações */
  .gd-painel { max-height: none; }
}

/* ferramentas */
.gd-cat { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.gd-cat legend { font: 700 .78rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: 6px; padding: 0; }
.gd-ferrs { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-ferr { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 10px; border: 2px solid var(--borda); border-radius: 12px; background: #fff; color: var(--grafite); font: 600 .84rem var(--fonte-texto); cursor: pointer; text-align: left; }
.gd-ferr span[aria-hidden] { min-width: 1.2em; text-align: center; color: var(--roxo); font-weight: 800; }
.gd-ferr:hover { border-color: var(--roxo); }
.gd-ferr[aria-pressed="true"] { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.gd-ferr[aria-pressed="true"] span[aria-hidden] { color: var(--amarelo-apoio, #FFC94D); }
.gd-ferr:focus-visible, .gd-acao:focus-visible, .gd-objeto:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.gd-campo { display: grid; gap: 4px; font-weight: 600; font-size: .88rem; margin: 6px 0 10px; }
.gd-campo input, .gd-campo select { font: inherit; padding: 6px 10px; border: 2px solid var(--borda); border-radius: 10px; min-height: 38px; max-width: 160px; }
.gd-painel .lab-controle { margin: 8px 0 10px; }
.gd-painel .lab-dica { font-size: .88rem; }

/* barra de ações */
.gd-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.gd-barra__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gd-acao { min-width: 40px; min-height: 40px; padding: 4px 10px; border: 2px solid var(--borda); border-radius: 12px; background: #fff; color: var(--roxo-escuro, #4A2172); font: 800 1.1rem var(--fonte-titulo); cursor: pointer; }
.gd-acao--texto { font-size: .85rem; }
.gd-acao:hover:not(:disabled) { border-color: var(--roxo); }
.gd-acao:disabled { opacity: .45; cursor: not-allowed; }
.gd-chave { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; font-weight: 600; cursor: pointer; min-height: 32px; }
.gd-chave input { width: 18px; height: 18px; accent-color: var(--roxo); }
.gd-chave--bloco { display: flex; }

/* quadro */
.gd-quadro-caixa { background: #fff; border: 2px solid var(--lilas, #E9E4F7); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); }
.gd-quadro { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.gd-quadro--mover { cursor: default; }
.gd-quadro:focus-visible { outline: 3px solid var(--laranja); outline-offset: -3px; }
.gd-status { min-height: 1.5em; margin: 8px 2px 2px; font-weight: 600; color: var(--roxo-escuro, #4A2172); font-size: .92rem; }
.gd-ajuda { margin: 2px; font-size: .82rem; color: var(--texto-suave); }
.gd-ajuda kbd { font: 700 .78rem var(--fonte-texto); background: var(--lilas, #E9E4F7); border-radius: 5px; padding: 1px 5px; }

/* elementos do SVG */
.gd-fundo { fill: #fff; }
.gd-grade { stroke: #EEE8F6; stroke-width: 1; }
.gd-eixo { stroke: #B9A7D3; stroke-width: 1.5; }
.gd-eixo-num { fill: #8A7BA3; font: 600 11px var(--fonte-texto, sans-serif); }
.gd-poligono { fill: rgba(112, 55, 168, .13); stroke: #7037A8; stroke-width: 2.5; stroke-linejoin: round; }
.gd-poligono--imagem { fill: rgba(217, 27, 112, .12); stroke: #B3145B; stroke-dasharray: 7 4; }
.gd-circulo { fill: rgba(112, 55, 168, .05); stroke: #7037A8; stroke-width: 2.5; }
.gd-arco { fill: none; stroke: #D91B70; stroke-width: 3.5; }
.gd-arco--destaque { stroke-width: 5; }
.gd-linha { stroke: #4A2172; stroke-width: 2.5; stroke-linecap: round; }
.gd-linha--reta, .gd-linha--semirreta { stroke: #4A2172; }
.gd-linha--paralela, .gd-linha--perpendicular, .gd-linha--mediatriz { stroke: #0F6E78; stroke-dasharray: 8 5; }
.gd-linha--tangente { stroke: #0F6E78; stroke-width: 2.5; }
.gd-linha--raio { stroke: #D91B70; stroke-width: 3; }
.gd-linha--diametro { stroke: #F58220; stroke-width: 3; }
.gd-linha--corda { stroke: #0F6E78; stroke-width: 3; }
.gd-linha--eixo { stroke: #F58220; stroke-width: 2.5; stroke-dasharray: 10 6; }
.gd-sel.gd-poligono, .gd-sel.gd-circulo, .gd-sel.gd-linha, .gd-sel.gd-arco { stroke: #F58220; stroke-width: 4; }
.gd-angulo { fill: rgba(255, 201, 77, .45); stroke: #C98A00; stroke-width: 1.5; }
.gd-angulo--1 { fill: rgba(217, 27, 112, .2); stroke: #D91B70; }
.gd-angulo--2 { fill: rgba(15, 110, 120, .2); stroke: #0F6E78; }
.gd-angulo--aux { fill: none; stroke: #4A2172; }
.gd-angulo--rot { fill: rgba(217, 27, 112, .12); stroke: #B3145B; }
.gd-angulo--reto { fill: none; stroke-width: 2; }
.gd-aux { stroke-width: 2; stroke-linecap: round; }
.gd-aux--altura { stroke: #D91B70; stroke-dasharray: 6 4; }
.gd-aux--prolong { stroke: #D91B70; stroke-width: 1; stroke-dasharray: 2 4; }
.gd-aux--mediana { stroke: #0F6E78; stroke-dasharray: 6 4; }
.gd-aux--bissetriz { stroke: #F58220; stroke-dasharray: 6 4; }
.gd-aux--diagonal { stroke: #0F6E78; stroke-dasharray: 6 4; }
.gd-aux--eixo { stroke: #F58220; stroke-dasharray: 10 6; }
.gd-aux--fino { stroke: #8A7BA3; stroke-width: 1.2; stroke-dasharray: 4 4; }
.gd-aux--corresp { stroke: #B9A7D3; stroke-width: 1.2; stroke-dasharray: 3 4; }
.gd-aux-pt { fill: #0F6E78; }
.gd-centro { fill: #7037A8; }
.gd-distancia { stroke: #F58220; stroke-width: 1.5; stroke-dasharray: 4 3; }
.gd-vetor { stroke: #B3145B; stroke-width: 3; }
.gd-previa { stroke: #7037A8; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; pointer-events: none; }
.gd-rotulo { font: 700 14px var(--fonte-texto, sans-serif); fill: #2B2340; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.gd-rotulo--nome { fill: #4A2172; font-size: 15px; }
.gd-rotulo--medida { font-size: 12.5px; fill: #5A4D70; font-weight: 600; }
.gd-rotulo--angulo { font-size: 12px; fill: #2B2340; }
.gd-rotulo--figura { fill: #B3145B; font-size: 13px; }
.gd-rotulo--imagem { fill: #B3145B; }
.gd-pt { cursor: grab; outline: none; }
.gd-pt:active { cursor: grabbing; }
.gd-pt__alvo { fill: transparent; }
.gd-pt circle:not(.gd-pt__alvo), .gd-pt rect { fill: #fff; stroke: #7037A8; stroke-width: 2.5; }
.gd-pt--livre circle:not(.gd-pt__alvo) { fill: #7037A8; stroke: #fff; }
.gd-pt--preso circle:not(.gd-pt__alvo) { fill: #D91B70; stroke: #fff; }
.gd-pt--derivado circle:not(.gd-pt__alvo) { fill: #2B2340; stroke: #fff; stroke-width: 1.5; }
.gd-pt--fixo circle:not(.gd-pt__alvo) { fill: #8A7BA3; stroke: #fff; }
.gd-pt--alca rect { fill: #FFC94D; stroke: #8A5A00; stroke-width: 2; }
.gd-controle circle:not(.gd-pt__alvo) { fill: #FFC94D; stroke: #8A5A00; }
.gd-pt-imagem { fill: #fff; stroke: #B3145B; stroke-width: 2; }
.gd-pt:hover .gd-pt__alvo, .gd-pt--coletado .gd-pt__alvo { fill: rgba(255, 201, 77, .45); }
.gd-pt.gd-sel .gd-pt__alvo { fill: rgba(245, 130, 32, .3); }
.gd-pt:focus-visible .gd-pt__alvo { fill: rgba(245, 130, 32, .25); stroke: #F58220; stroke-width: 3; }

/* painel de informações */
.gd-dados { display: grid; gap: 4px; margin: 4px 0; }
.gd-dado { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: #F8F5FC; font-size: .9rem; }
.gd-dado strong { font-family: var(--fonte-titulo); color: var(--roxo-escuro, #4A2172); white-space: nowrap; }
.gd-dado--destaque { background: rgba(255, 201, 77, .35); margin: 6px 0; }
.gd-classe { margin: 4px 0; font-size: 1rem; }
.gd-classe strong { color: var(--roxo); }
.gd-porque { margin: 4px 0; font-size: .88rem; color: var(--texto-suave); }
.gd-aviso { background: #FFF4E5; border-left: 4px solid var(--laranja); border-radius: 8px; padding: 8px 10px; font-size: .9rem; }
.gd-vazio { color: var(--texto-suave); font-size: .9rem; }
.gd-props { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 4px; font-size: .88rem; }
.gd-selo { display: inline-block; min-width: 2.2em; padding: 1px 7px; border-radius: 999px; font-weight: 700; font-size: .78rem; margin-right: 4px; }
.gd-selo--sim { background: #DDF3EC; color: #0B5D3E; }
.gd-selo--nao { background: #F1ECF6; color: #6B5F7E; }
.gd-selo--info { background: rgba(255, 201, 77, .45); color: #5A3D00; }
.gd-formula { background: var(--roxo-claro); border-radius: 12px; padding: 8px 12px; margin: 8px 0; font-size: .92rem; }
.gd-formula p { margin: 2px 0; }
.gd-legenda { font-size: .82rem; display: flex; flex-wrap: wrap; gap: 10px; }
.gd-leg--altura { color: #D91B70; } .gd-leg--mediana { color: #0F6E78; } .gd-leg--bissetriz { color: #C26100; }
.gd-objetos { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.gd-objeto { width: 100%; text-align: left; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; font: 500 .84rem var(--fonte-texto); color: var(--grafite); cursor: pointer; }
.gd-objeto--sel { border-color: var(--laranja); background: #FFF4E5; }
.gd-tabela { font-size: .84rem; }
.gd-tabela td { text-align: center; }
.gd-comparar { margin-top: 10px; }
.gd-comparar summary { cursor: pointer; font-weight: 700; color: var(--roxo); }

/* desafios */
.gd-trilha-desafios { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.gd-trilha-desafios button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; font: 800 .9rem var(--fonte-titulo); color: var(--roxo); cursor: pointer; }
.gd-trilha-desafios .atual button { border-color: var(--roxo); background: var(--roxo); color: #fff; }
.gd-trilha-desafios .feito button { border-color: #0B7A52; background: #DDF3EC; color: #0B5D3E; }
.gd-trilha-desafios .atual.feito button { background: #0B7A52; color: #fff; }
.gd-desafio__titulo { font-size: 1.05rem !important; color: var(--roxo-escuro, #4A2172) !important; margin-top: 4px !important; }
.gd-desafio__instr { font-size: .9rem; }
.gd-desafio__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.gd-feedback { border-radius: 14px; padding: 10px 12px; margin: 8px 0; font-size: .9rem; }
.gd-feedback p { margin: 4px 0; }
.gd-feedback__titulo { font: 800 1rem var(--fonte-titulo); }
.gd-feedback--ok { background: #DDF3EC; border: 2px solid #0B7A52; }
.gd-feedback--erro { background: #FFF4E5; border: 2px solid var(--laranja); }
.gd-feedback__explica { border-top: 1px dashed #0B7A52; padding-top: 6px; }

/* investigue e descubra */
.gd-investigacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gd-inv { background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.gd-inv h3 { font-size: 1rem; margin: 0; }
.gd-inv__num { margin: 0; font: 700 .75rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .05em; color: var(--magenta); }
.gd-inv__rot { font-weight: 600; font-size: .85rem; }
.gd-inv textarea { width: 100%; }
.gd-inv .botao { align-self: flex-start; }
.gd-inv summary { cursor: pointer; font-weight: 700; color: var(--roxo); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .gd-guia--fala .gd-guia__avatar, .gd-guia--fala .gd-guia__balao { animation: none; }
  .gd-aba { transition: none; }
}