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

/* ---------- Lume como guia ---------- */
.fr-guia-secao { margin-top: 4px; }
.fr-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); }
.fr-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); }
.fr-guia__balao { position: relative; flex: 1; background: var(--roxo-claro); border-radius: 16px; padding: 8px 14px; }
.fr-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; }
.fr-guia__nome { margin: 0; font: 700 .8rem var(--fonte-texto); color: var(--roxo); }
.fr-guia__nome span { font-weight: 500; color: var(--texto-suave); }
.fr-guia__texto { margin: 2px 0 0; font-weight: 500; color: var(--grafite); }
.fr-guia--fala .fr-guia__avatar { animation: fr-aceno .7s ease 1; }
.fr-guia--fala .fr-guia__balao { animation: fr-surge .35s ease 1; }
@keyframes fr-aceno { 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
@keyframes fr-surge { from { opacity: .3; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .fr-guia { padding: 8px 10px; gap: 10px; } .fr-guia__avatar { width: 48px; height: 48px; } .fr-guia__texto { font-size: .9rem; } }

/* ---------- abas ---------- */
.fr-modulos { margin-top: 16px; }
.fr-abas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fr-aba { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; min-height: 64px; background: #fff; border: 2px solid var(--borda); border-radius: 18px; padding: 10px 12px; font: inherit; color: var(--grafite); transition: border-color .2s, box-shadow .2s, transform .2s; }
.fr-aba strong { display: block; font-family: var(--fonte-titulo); font-size: .95rem; line-height: 1.2; }
.fr-aba small { display: block; font-size: .78rem; color: var(--texto-suave); }
.fr-aba__num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem var(--fonte-titulo); background: var(--lilas, #E9E4F7); color: var(--roxo); }
.fr-aba:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.fr-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); }
.fr-aba[aria-selected="true"] .fr-aba__num { background: var(--roxo); color: #fff; }
.fr-aba:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 1080px) { .fr-abas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .fr-abas { grid-template-columns: 1fr 1fr; } .fr-aba small { display: none; } .fr-aba { min-height: 52px; padding: 8px 10px; } }
.fr-forma { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.fr-forma[hidden] { display: none; }
.fr-forma__rotulo { font-weight: 700; font-size: .88rem; margin-right: 4px; }
.fr-forma__botao { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--roxo); background: #fff; color: var(--roxo); font: 700 .88rem var(--fonte-texto); cursor: pointer; }
.fr-forma__botao[aria-pressed="true"] { background: var(--roxo); color: #fff; }
.fr-forma__botao:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

/* ---------- layout dos módulos ---------- */
.fr-painel { padding-top: 16px; }
.fr-grade { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 18px; align-items: start; }
.fr-grade--ops { grid-template-columns: minmax(260px, .9fr) 1.1fr; margin: 18px 0; }
.fr-grade--desafios { grid-template-columns: 1fr minmax(240px, 300px); }
@media (max-width: 900px) { .fr-grade, .fr-grade--ops, .fr-grade--desafios { grid-template-columns: 1fr; } }
.fr-principal { display: grid; gap: 16px; min-width: 0; }
.fr-controles { display: grid; gap: 16px; }
.fr-controles h2 { margin: 0; }

/* seletor numérico */
.fr-seletor { display: grid; gap: 6px; }
.fr-seletor__rotulo { font-weight: 700; font-size: .92rem; }
.fr-seletor__rotulo small { font-weight: 500; color: var(--texto-suave); }
.fr-seletor__linha { display: flex; align-items: center; gap: 6px; }
.fr-seletor input[type="number"] { width: 4.4em; min-height: 44px; text-align: center; font: 800 1.25rem var(--fonte-titulo); color: var(--roxo-escuro); border: 2px solid var(--borda); border-radius: 12px; background: #fff; -moz-appearance: textfield; }
.fr-seletor input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.fr-seletor input[type="number"]:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(112, 55, 168, .2); }
.fr-passo { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--roxo); color: #fff; font: 800 1.4rem/1 var(--fonte-titulo); cursor: pointer; transition: transform .15s; }
.fr-passo:hover:not(:disabled) { transform: scale(1.08); }
.fr-passo:disabled { background: #CFC5DC; cursor: not-allowed; }
.fr-passo:focus-visible { outline: 3px solid var(--amarelo-apoio, #FFC94D); outline-offset: 2px; }
.fr-seletor__barra { width: 100%; accent-color: var(--roxo); min-height: 30px; }

/* editor de fração (numerador sobre denominador) */
.fr-editor { display: inline-grid; justify-items: center; gap: 6px; }
.fr-editor .fr-seletor { justify-items: center; }
.fr-editor .fr-seletor__rotulo { font-size: .78rem; color: var(--texto-suave); }
.fr-editor__traco { display: block; width: 100%; min-width: 150px; height: 4px; border-radius: 2px; background: var(--roxo-escuro); }

/* palco e figuras */
.fr-palco { display: grid; gap: 12px; }
.fr-palco__topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fr-leitura { font: 700 1.2rem var(--fonte-titulo); color: var(--roxo); margin: 0; }
.fr-figura { display: grid; justify-items: center; gap: 6px; }
.fr-figura[hidden] { display: none; }
.fr-svg { display: block; width: 100%; height: auto; }
.fr-svg--circ { margin: 0 auto; }
.fr-svg__n { font: 700 15px var(--fonte-texto); fill: #fff; pointer-events: none; }
.fr-svg__eixo { font: 700 14px var(--fonte-texto); fill: #4A2172; }
.fr-svg__ponto { font: 800 14px var(--fonte-texto); }
.fr-parte { transition: fill .2s; }
.fr-parte--clicavel { cursor: pointer; }
.fr-parte--clicavel:hover { fill-opacity: .8; }
.fr-marca { stroke: var(--amarelo-apoio, #FFC94D); stroke-width: 5; stroke-dasharray: 8 4; }
.fr-reta { max-width: 720px; width: 100%; justify-self: center; }
.fr-nota { font-size: .9rem; color: var(--texto-suave); margin: 0; }
.fr-dados { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fr-dados .lab-leitura { border-left-color: var(--roxo); }
.fr-dados .lab-leitura strong { font-size: 1.02rem; }

/* fração "de pé" */
.fr-empilhada { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font: 800 1.6rem var(--fonte-titulo); color: var(--roxo-escuro); }
.fr-empilhada__c { display: inline-grid; justify-items: center; line-height: 1.05; }
.fr-empilhada__c span:first-child { border-bottom: 3px solid currentColor; padding: 0 6px 2px; }
.fr-empilhada__c span:last-child { padding-top: 2px; }
.fr-grande .fr-empilhada { font-size: 3rem; }
.fr-num { font: 800 1.6rem var(--fonte-titulo); color: var(--roxo-escuro); vertical-align: middle; }
.fr-sinal-grande { font: 800 1.8rem var(--fonte-titulo); color: var(--magenta-escuro); margin: 0 8px; vertical-align: middle; }
.fr-frase-texto { display: block; font-weight: 600; margin-top: 8px; color: var(--grafite); }

/* comparar */
.fr-par { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.fr-par--mini { grid-template-columns: 1fr 1fr; }
.fr-lado { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.fr-lado__titulo { font-size: 1rem !important; margin: 0; }
.fr-simbolo { align-self: center; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--amarelo-apoio, #FFC94D); color: var(--grafite); font: 800 2.4rem var(--fonte-titulo); box-shadow: var(--sombra); }
.fr-resultado-comp { text-align: center; background: var(--roxo-claro); border-radius: 16px; padding: 14px; margin: 16px 0; }
.fr-resultado-comp p { margin: 4px 0; }
.fr-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 12px; }
@media (max-width: 700px) { .fr-par { grid-template-columns: 1fr; } .fr-simbolo { justify-self: center; } .fr-par--mini { grid-template-columns: 1fr; } }

/* equivalentes */
.fr-equacao { text-align: center; margin: 0; }
.fr-escada { display: grid; gap: 8px; }
.fr-degrau { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; }
.fr-degrau__rotulo { font: 800 1.05rem var(--fonte-titulo); color: var(--roxo-escuro); text-align: right; }
.fr-cadeia-eq { font: 700 1.1rem var(--fonte-titulo); color: var(--roxo); text-align: center; margin: 12px 0 6px; word-break: break-word; }

/* operações */
.fr-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.fr-op { min-height: 48px; border-radius: 14px; border: 2px solid var(--borda); background: #fff; font: 700 .95rem var(--fonte-texto); color: var(--grafite); cursor: pointer; }
.fr-op span { font: 800 1.3rem var(--fonte-titulo); color: var(--roxo); margin-right: 4px; }
.fr-op[aria-checked="true"] { border-color: var(--roxo); background: var(--roxo); color: #fff; }
.fr-op[aria-checked="true"] span { color: var(--amarelo-apoio, #FFC94D); }
.fr-op:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 600px) { .fr-ops { grid-template-columns: 1fr 1fr; } }
.fr-simbolo--op { background: var(--roxo); color: #fff; }
.fr-res { border-top: 6px solid var(--amarelo-apoio, #FFC94D); }
.fr-expressao { margin: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.fr-expressao-texto { font-weight: 600; color: var(--texto-suave); margin: 0 0 10px; }
.fr-res-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fr-res-dados p { margin: 0; background: var(--roxo-claro); border-radius: 12px; padding: 8px 10px; }
.fr-res-dados span { display: block; font-size: .78rem; font-weight: 700; color: var(--texto-suave); }
.fr-res-dados strong { font: 800 1.05rem var(--fonte-titulo); }
.fr-erro { background: #FFF6E5; border: 1px solid #F5C77E; border-radius: 12px; padding: 12px 14px; margin: 0; }
.fr-passos { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.fr-passos li::marker { font-weight: 800; color: var(--roxo); }
.fr-detalhes { margin-top: 12px; }
.fr-detalhes summary { cursor: pointer; font-weight: 700; color: var(--roxo); min-height: 36px; display: flex; align-items: center; }
.fr-detalhes[hidden] { display: none; }
.fr-linhas-op { display: grid; gap: 14px; }
.fr-linha-op__rotulo { font: 700 1rem var(--fonte-titulo); color: var(--roxo-escuro); margin: 0 0 4px; }
.fr-linha-op__rotulo--res { color: var(--magenta-escuro); }
.fr-area { display: grid; grid-template-columns: minmax(200px, 360px) 1fr; gap: 18px; align-items: center; }
.fr-legenda-area { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fr-legenda-area li { display: flex; align-items: center; gap: 10px; }
.fr-legenda-area .q { width: 22px; height: 22px; border: 2px solid #4A2172; border-radius: 4px; flex: none; }
.q1 { background: #E7DBF5; } .q2 { background: #FDE3EF; } .q3 { background: #7037A8; }
@media (max-width: 600px) { .fr-area { grid-template-columns: 1fr; } }

/* desafios */
.fr-desafio { border-top: 6px solid var(--roxo); display: grid; gap: 12px; }
.fr-desafio h2 { font-size: 1.3rem; outline: none; margin: 0; }
.fr-desafio__topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.fr-desafio__tipo { margin: 0; font: 700 .78rem var(--fonte-texto); text-transform: uppercase; letter-spacing: .08em; color: var(--magenta-escuro); }
.fr-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; cursor: pointer; min-height: 36px; }
.fr-check input { width: 20px; height: 20px; accent-color: var(--roxo); }
.fr-desafio .fr-figura { max-width: 520px; width: 100%; justify-self: center; }
.fr-resposta__rotulo { font-weight: 600; margin: 0 0 6px; }
.fr-resposta__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fr-campo-fracao { display: inline-grid; justify-items: center; gap: 6px; }
.fr-campo-fracao input, .fr-campo-fracao__fixo { width: 5em; min-height: 48px; text-align: center; font: 800 1.35rem var(--fonte-titulo); color: var(--roxo-escuro); border: 2px solid var(--borda); border-radius: 12px; }
.fr-campo-fracao input:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(112, 55, 168, .2); }
.fr-campo-fracao__fixo { display: grid; place-items: center; background: var(--roxo-claro); }
.fr-campo-fracao .fr-editor__traco { min-width: 90px; }
.fr-escolhas { display: flex; flex-wrap: wrap; gap: 10px; }
.fr-feedback { border-radius: 14px; padding: 12px 14px; }
.fr-feedback p { margin: 0 0 4px; }
.fr-feedback__titulo { font: 800 1.1rem var(--fonte-titulo); }
.fr-feedback--ok { background: #EEF8F1; border: 1px solid #9BC8A8; }
.fr-feedback--erro { background: #FFF6E5; border: 1px solid #F5C77E; }
.fr-feedback[hidden] { display: none; }
.fr-acoes [hidden] { display: none; }
.fr-placar { border-top: 6px solid var(--amarelo-apoio, #FFC94D); display: grid; gap: 12px; }
.fr-placar__numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fr-placar__numeros p { margin: 0; text-align: center; background: var(--roxo-claro); border-radius: 12px; padding: 8px 4px; }
.fr-placar__numeros strong { display: block; font: 800 1.6rem var(--fonte-titulo); color: var(--roxo); }
.fr-placar__numeros span { font-size: .72rem; font-weight: 600; color: var(--texto-suave); }
.fr-placar--oculto .fr-placar__numeros { display: none; }
.fr-tipos { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.fr-tipos legend { font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.fr-tipos label { display: flex; align-items: center; gap: 8px; font-size: .88rem; min-height: 34px; cursor: pointer; }
.fr-tipos input { width: 18px; height: 18px; accent-color: var(--roxo); }

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

/* o guia (Lume) acompanha o estudante enquanto ele usa o simulador */
.fr-guia-secao { position: sticky; top: 80px; z-index: 20; }
@media (max-width: 600px) {
  .fr-guia-secao { top: 76px; }
  .fr-guia { padding: 6px 10px; border-radius: 16px; }
  .fr-guia__avatar { width: 40px; height: 40px; border-width: 2px; }
  .fr-guia__nome { display: none; }
  .fr-guia__balao { padding: 6px 10px; }
  .fr-guia__texto { font-size: .84rem; line-height: 1.35; margin: 0; }
}

/* telas estreitas (módulos 1 e 3): figura primeiro, depois os controles e, por fim, os dados,
   para que o estudante veja a figura mudar enquanto mexe nos controles */
@media (max-width: 900px) {
  #painel-explorar .fr-principal, #painel-equivalentes .fr-principal { display: contents; }
  #painel-explorar .fr-palco, #painel-equivalentes .fr-palco { order: -1; }
  #painel-explorar .fr-controles, #painel-equivalentes .fr-controles { order: 0; }
  #painel-explorar .fr-dados, #painel-equivalentes .fr-principal > .lab-card:not(.fr-palco) { order: 1; }
}