/* ===========================================================================
   FACULDADE 7 — a faculdade de gestão digital da 7CONSULTORIA
   Estilo: mesmo molde dos jogos da 7CONSULTORIA (Otto, Fefe, Helena e Luna).
   Botão com sombra sólida, cronômetro, confete, explicação do erro.
   Paleta de obra: papel de projeto, laranja de segurança, asfalto, azul de
   engenharia. Cada bloco troca --cor e o fundo inteiro muda junto.
=========================================================================== */
:root{
  --fundo1:#f4f1ea; --fundo2:#eae5da; --fundo3:#f0efe8;
  --papel:#fffef9; --tinta:#1c1f26; --tinta2:#6b7280;
  --cor:#e8871a; --cor-esc:#b3630c;          /* acento do bloco atual */
  --verde:#12a06a; --verde-esc:#0b7a50;
  --vermelho:#d93b3b; --ouro:#f2b705; --azul:#2563c9; --asfalto:#2b2f36;
  --linha:#ddd7c9;
  --fonte:'Archivo','Trebuchet MS',system-ui,-apple-system,sans-serif;
  --num:'DIN Alternate','Avenir Next Condensed','Archivo',ui-rounded,system-ui,sans-serif;
  --sombra:0 8px 0 rgba(28,31,38,.10), 0 16px 36px rgba(28,31,38,.13);
}
/* A cor do módulo é aplicada em variável inline por app.js (--cor / --cor-esc),
   não por classe: graduação nova entra sem tocar neste arquivo. */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:var(--fonte); color:var(--tinta);
  background:linear-gradient(165deg,var(--fundo1) 0%,var(--fundo2) 55%,var(--fundo3) 100%);
  overflow:hidden;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;transition:background .5s
}
button{font-family:inherit;font-size:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font-family:inherit}
.tela{position:fixed;inset:0;display:none;flex-direction:column}
.tela.ativa{display:flex}
.rola{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- botões ---------- */
.bt{background:var(--papel);border-radius:14px;padding:11px 17px;font-weight:700;
  box-shadow:0 4px 0 rgba(28,31,38,.18);display:inline-flex;align-items:center;gap:8px;
  transition:transform .08s,box-shadow .08s;white-space:nowrap}
.bt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(28,31,38,.18)}
.bt.grande{font-size:clamp(17px,2.2vw,23px);padding:15px 28px;border-radius:20px}
.bt.cor{background:var(--cor);color:#fff;box-shadow:0 5px 0 var(--cor-esc)}
.bt.verde{background:var(--verde);color:#fff;box-shadow:0 5px 0 var(--verde-esc)}
.bt.ouro{background:var(--ouro);color:#4a3600;box-shadow:0 5px 0 #c99400}
.bt.fantasma{background:#ffffffaa;box-shadow:0 3px 0 var(--linha)}
.bt[disabled]{opacity:.4;pointer-events:none}

/* ---------- capa ---------- */
#tela-capa{align-items:center;justify-content:center;text-align:center;gap:14px;padding:20px;overflow-y:auto}
.bento{font-size:clamp(66px,11vw,124px);line-height:1;animation:bica 3.6s ease-in-out infinite}
@keyframes bica{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}
#tela-capa h1{font-size:clamp(25px,4.6vw,48px);color:var(--cor-esc);letter-spacing:-1px;line-height:1.08}
#tela-capa .sub{font-size:clamp(14px,1.8vw,20px);color:var(--tinta2);max-width:660px;line-height:1.55}
#tela-capa .bt{max-width:92vw;white-space:normal;text-align:center;justify-content:center}
.tres-blocos{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:940px}
.tres-blocos div{background:#ffffffb8;border-radius:14px;padding:10px 15px;font-size:clamp(12px,1.45vw,15px);
  color:var(--tinta2);box-shadow:0 3px 0 rgba(28,31,38,.07);max-width:280px;line-height:1.45;text-align:left}
.tres-blocos b{display:block;color:var(--cor-esc);font-size:1.1em;margin-bottom:2px}
.selo-obra{font-family:var(--num);letter-spacing:3px;text-transform:uppercase;font-size:clamp(10px,1.2vw,13px);
  color:var(--tinta2);background:#ffffffcc;border-radius:9px;padding:6px 13px;box-shadow:0 2px 0 var(--linha)}

/* ---------- barra do topo ---------- */
.barra{display:flex;align-items:center;gap:7px;padding:9px 11px;z-index:3;
  background:#fffffFa8;backdrop-filter:blur(6px);border-bottom:2px solid #ffffffdd}
.barra .bt{padding:8px 12px;font-size:clamp(13px,1.5vw,16px)}
.chip{background:var(--cor);color:#fff;border-radius:12px;padding:7px 13px;font-weight:700;
  font-size:clamp(12px,1.45vw,16px);display:flex;align-items:center;gap:7px;min-width:0}
.chip .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw}
.chip .frac{background:#ffffff33;border-radius:8px;padding:2px 7px;font-size:.85em;font-family:var(--num)}
.crono{margin-left:auto;font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(16px,2.2vw,24px);color:var(--tinta);background:#fff;border-radius:12px;
  padding:6px 12px;box-shadow:0 3px 0 var(--linha);min-width:84px;text-align:center}
.crono.correndo{color:var(--cor-esc)}
.crono.estourou{color:var(--vermelho)}
.placar{font-weight:700;font-size:clamp(13px,1.6vw,18px);background:#fff8e2;border-radius:12px;
  padding:7px 12px;box-shadow:0 3px 0 #f0dfa8;white-space:nowrap;color:#8a6b00;font-family:var(--num)}
@media (max-width:470px){
  .barra{gap:5px;padding:8px 8px}
  .barra .bt{padding:8px 10px}
  .placar{display:none}
  .crono{min-width:68px;padding:6px 9px}
  /* Em tela estreita o nome da aula nao cabe numa linha so: truncar com
     reticencia comia metade do titulo ("A rotina digital de cada..."). Aqui
     ele ocupa o espaco que sobra e quebra em ate duas linhas. A barra cresce
     alguns pixels e o aluno passa a ler o nome inteiro do que esta fazendo. */
  .chip{flex:1;min-width:0}
  .chip .nome{
    max-width:none; white-space:normal; overflow:hidden; text-overflow:clip;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    line-height:1.25; word-break:break-word;
  }
  .chip .frac{flex:none}
}
.trilha{height:7px;background:#ffffffaa;z-index:3}
.trilha i{display:block;height:100%;background:linear-gradient(90deg,var(--verde),var(--cor));width:0;transition:width .35s}

/* ---------- palco (aula e questão) ---------- */
#palco{flex:1;display:flex;flex-direction:column;align-items:center;gap:11px;padding:12px;
  overflow-y:auto;z-index:1;justify-content:safe center}
.cartao{background:var(--papel);border-radius:22px;box-shadow:var(--sombra);
  padding:clamp(14px,2.2vw,26px) clamp(16px,3vw,36px);max-width:min(94vw,820px);
  display:flex;flex-direction:column;gap:11px;width:100%}
.cartao.certo{box-shadow:0 0 0 5px var(--verde),var(--sombra);animation:pula .45s}
.cartao.errado{box-shadow:0 0 0 5px var(--vermelho),var(--sombra);animation:treme .4s}
@keyframes pula{0%,100%{transform:scale(1)}40%{transform:scale(1.03)}}
@keyframes treme{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.rotulo{font-size:clamp(10px,1.3vw,14px);color:var(--tinta2);font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.cartao h3{font-size:clamp(19px,2.6vw,30px);color:var(--cor-esc);line-height:1.2}
.cartao p,.cartao li{font-size:clamp(15px,1.9vw,20px);line-height:1.62;-webkit-user-select:text;user-select:text}
.cartao ul,.cartao ol{padding-left:22px;display:flex;flex-direction:column;gap:7px}
.cartao b{color:var(--cor-esc)}
.cartao .nota{background:#f6f3ea;border-left:4px solid var(--cor);border-radius:0 12px 12px 0;
  padding:11px 14px;font-size:clamp(13px,1.7vw,18px);line-height:1.55;color:var(--tinta)}
.cartao .obra{background:#fff8e2;border-left:4px solid var(--ouro);border-radius:0 12px 12px 0;
  padding:11px 14px;font-size:clamp(13px,1.7vw,18px);line-height:1.55}
.cartao .perigo{background:#fdecec;border-left:4px solid var(--vermelho);border-radius:0 12px 12px 0;
  padding:11px 14px;font-size:clamp(13px,1.7vw,18px);line-height:1.55}
.cartao table{border-collapse:collapse;width:100%;font-size:clamp(12px,1.6vw,17px)}
.cartao th,.cartao td{border:1px solid var(--linha);padding:7px 9px;text-align:left}
.cartao th{background:#f2efe6;font-weight:700;color:var(--cor-esc)}
.cartao td.n{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums}
.figura{display:flex;justify-content:center;padding:4px 0}
.figura svg{max-width:100%;height:auto}

.pergunta{font-size:clamp(17px,2.3vw,26px);font-weight:700;line-height:1.4;max-width:720px;
  -webkit-user-select:text;user-select:text}
.enunciado{font-size:clamp(15px,1.9vw,20px);line-height:1.6;max-width:720px;
  -webkit-user-select:text;user-select:text;color:var(--tinta)}
.enunciado b{color:var(--cor-esc)}

/* resposta numérica */
.visor{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:min(clamp(32px,6.4vw,62px),9vh);
  font-weight:700;color:var(--tinta);background:#f1eee4;border-radius:14px;min-width:min(78vw,300px);
  padding:6px 18px;min-height:1.35em;border:3px solid var(--linha);text-align:center;align-self:center}
.visor:empty:before{content:'?';color:#c3bda9}
.visor .un{font-size:.48em;color:var(--tinta2);margin-right:6px}
.visor.cursor:after{content:'|';animation:pisca 1s steps(2) infinite;color:var(--cor)}
@keyframes pisca{50%{opacity:0}}

/* opções */
.opcoes{display:flex;flex-direction:column;gap:9px;width:100%;max-width:min(94vw,720px)}
.opcoes button{background:var(--papel);border-radius:15px;box-shadow:0 4px 0 rgba(28,31,38,.14);
  padding:12px 17px;font-weight:600;font-size:clamp(14px,1.8vw,19px);color:var(--tinta);
  text-align:left;line-height:1.42;transition:transform .08s;display:flex;gap:11px;align-items:flex-start}
.opcoes button .letra{font-family:var(--num);font-weight:700;background:#f1eee4;border-radius:8px;
  min-width:27px;height:27px;display:flex;align-items:center;justify-content:center;color:var(--cor-esc);flex:none}
.opcoes button:active{transform:translateY(3px)}
.opcoes button.certa{background:var(--verde);color:#fff;box-shadow:0 4px 0 var(--verde-esc)}
.opcoes button.certa .letra{background:#ffffff30;color:#fff}
.opcoes button.errada{background:#fbe1e1;color:#8f1f1f;box-shadow:0 4px 0 #ecb9b9}
.opcoes button.errada .letra{background:#ffffff70;color:#8f1f1f}
.opcoes.vf{flex-direction:row;justify-content:center}
.opcoes.vf button{flex:1;justify-content:center;text-align:center;font-size:clamp(17px,2.4vw,24px);padding:16px}

/* ordenar */
.ordenar{display:flex;flex-direction:column;gap:8px;width:100%;max-width:min(94vw,720px)}
.ordenar .item{background:var(--papel);border-radius:14px;box-shadow:0 4px 0 rgba(28,31,38,.14);
  padding:11px 14px;display:flex;align-items:center;gap:11px;font-size:clamp(14px,1.75vw,19px);line-height:1.4}
.ordenar .item .pos{font-family:var(--num);font-weight:700;background:var(--cor);color:#fff;border-radius:8px;
  min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none}
.ordenar .item .setas{margin-left:auto;display:flex;gap:5px;flex:none}
.ordenar .item .setas button{background:#f1eee4;border-radius:8px;width:32px;height:32px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 var(--linha)}
.ordenar .item .setas button[disabled]{opacity:.25;pointer-events:none}
.ordenar .item.ok{box-shadow:0 0 0 3px var(--verde),0 4px 0 rgba(28,31,38,.14)}
.ordenar .item.nok{box-shadow:0 0 0 3px var(--vermelho),0 4px 0 rgba(28,31,38,.14)}

/* explicação do erro — o coração pedagógico */
.explica{background:#fffaf0;border:3px solid #f5dfae;border-radius:18px;padding:clamp(12px,2vw,20px);
  text-align:left;max-width:min(94vw,720px);width:100%;display:flex;flex-direction:column;gap:9px}
.explica.ok{background:#eef9f3;border-color:#a8e0c6}
.explica h4{font-size:clamp(15px,2vw,21px);color:var(--cor-esc);display:flex;align-items:center;gap:8px}
.explica ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.explica li,.explica p{font-size:clamp(13px,1.75vw,18px);line-height:1.55;-webkit-user-select:text;user-select:text}
.explica li b,.explica .fecho b{color:var(--cor-esc);font-family:var(--num)}
.explica .fecho{font-size:clamp(13px,1.75vw,18px);background:#fff;border-radius:12px;padding:9px 13px;
  border-left:4px solid var(--verde);line-height:1.55;-webkit-user-select:text;user-select:text}
.explica .termo{font-size:clamp(12px,1.6vw,16px);color:var(--tinta2);line-height:1.5;-webkit-user-select:text;user-select:text}

/* ---------- teclado numérico ---------- */
#teclado{padding:min(8px,1vh) 10px calc(min(10px,1.2vh) + env(safe-area-inset-bottom));z-index:3;
  background:#ffffffa8;backdrop-filter:blur(6px);border-top:2px solid #ffffffdd;
  display:flex;flex-direction:column;align-items:center;gap:min(7px,.9vh)}
#teclas{width:min(96vw,440px);display:flex;flex-direction:column;gap:7px}
.linha-teclas{display:flex;gap:7px;justify-content:center;width:100%}
.tecla{flex:1;background:var(--papel);border-radius:12px;box-shadow:0 4px 0 rgba(28,31,38,.18);
  font-family:var(--num);font-weight:700;font-size:min(clamp(20px,3.8vw,30px),4.4vh);
  padding:min(clamp(7px,1.3vw,12px),1.5vh) 0;transition:transform .06s,box-shadow .06s;color:var(--tinta)}
.tecla:active,.tecla.apertada{transform:translateY(3px);box-shadow:0 1px 0 rgba(28,31,38,.18);background:#f1eee4}
.tecla.acao{font-family:var(--fonte);font-size:min(clamp(14px,2vw,20px),3.2vh)}
.tecla.ok{background:var(--verde);color:#fff;box-shadow:0 4px 0 var(--verde-esc);flex:1.6}
.tecla.apagar{background:#fbe1e1;color:#8f1f1f;box-shadow:0 4px 0 #ecb9b9}

/* rodapé de ação (aula) */
.pe{padding:10px 12px calc(12px + env(safe-area-inset-bottom));display:flex;gap:9px;justify-content:center;
  align-items:center;background:#ffffffa8;backdrop-filter:blur(6px);border-top:2px solid #ffffffdd;z-index:3;flex-wrap:wrap}
.pontinhos{display:flex;gap:5px;align-items:center}
.pontinhos i{width:8px;height:8px;border-radius:50%;background:var(--linha);display:block;transition:.2s}
.pontinhos i.on{background:var(--cor);transform:scale(1.4)}

/* ---------- mapa / campus ---------- */
.campus{max-width:min(96vw,1000px);margin:0 auto;padding:16px 12px 40px;display:flex;flex-direction:column;gap:14px}
.cab-aluno{background:var(--papel);border-radius:20px;box-shadow:var(--sombra);padding:16px 18px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cab-aluno .capacete{font-size:clamp(34px,5vw,54px);line-height:1}
.cab-aluno .quem{flex:1;min-width:170px}
.cab-aluno .quem b{font-size:clamp(18px,2.4vw,26px);display:block;line-height:1.2}
.cab-aluno .quem span{display:block;font-size:clamp(12px,1.5vw,16px);color:var(--tinta2);line-height:1.45}
.medidores{display:flex;gap:9px;flex-wrap:wrap}
.medidor{background:#f6f3ea;border-radius:14px;padding:9px 14px;min-width:88px;text-align:center;
  box-shadow:0 3px 0 var(--linha)}
.medidor b{display:block;font-family:var(--num);font-size:clamp(19px,2.6vw,28px);color:var(--cor-esc);
  font-variant-numeric:tabular-nums;line-height:1.1}
.medidor span{font-size:clamp(9px,1.15vw,12px);color:var(--tinta2);text-transform:uppercase;letter-spacing:1px}
.barra-xp{height:12px;background:#eae5da;border-radius:8px;overflow:hidden;width:100%;box-shadow:inset 0 2px 0 #00000010}
.barra-xp i{display:block;height:100%;background:linear-gradient(90deg,var(--ouro),var(--cor));width:0;transition:width .5s}

.bloco-cab{display:flex;align-items:center;gap:11px;margin-top:8px;padding:0 4px;flex-wrap:wrap}
.bloco-cab .bolha{font-size:clamp(24px,3.2vw,34px)}
.bloco-cab h2{font-size:clamp(17px,2.3vw,25px);color:var(--cor-esc);line-height:1.15}
.bloco-cab .quem-faz{font-size:clamp(11px,1.35vw,14px);color:var(--tinta2);width:100%;line-height:1.45}
.bloco-cab .etiq{font-family:var(--num);font-size:clamp(10px,1.2vw,13px);letter-spacing:1.5px;text-transform:uppercase;
  background:#ffffffcc;border-radius:8px;padding:4px 10px;color:var(--tinta2);box-shadow:0 2px 0 var(--linha)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:10px}
.pastilha{background:var(--papel);border-radius:16px;box-shadow:0 4px 0 rgba(28,31,38,.12);padding:12px 14px;
  display:flex;gap:11px;align-items:flex-start;text-align:left;transition:transform .08s;width:100%}
.pastilha:active{transform:translateY(3px)}
.pastilha .ico{font-size:clamp(22px,2.8vw,30px);line-height:1;flex:none}
.pastilha .txt{flex:1;min-width:0}
.pastilha .txt b{display:block;font-size:clamp(14px,1.75vw,18px);line-height:1.25;margin-bottom:3px}
.pastilha .txt span{font-size:clamp(11px,1.35vw,14px);color:var(--tinta2);line-height:1.4;display:block}
.pastilha .estado{font-family:var(--num);font-size:clamp(11px,1.3vw,14px);font-weight:700;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--tinta2)}
.pastilha.feito{box-shadow:0 0 0 2px var(--verde),0 4px 0 rgba(28,31,38,.12)}
.pastilha.feito .estado{color:var(--verde-esc)}
.pastilha.travado{opacity:.55}
.pastilha .estrelas{letter-spacing:-1px;font-size:.95em}
.cartao-prova{background:linear-gradient(135deg,var(--cor),var(--cor-esc));color:#fff;border-radius:18px;
  padding:14px 17px;box-shadow:0 5px 0 rgba(28,31,38,.2);display:flex;gap:13px;align-items:center;
  text-align:left;width:100%;transition:transform .08s}
.cartao-prova:active{transform:translateY(3px)}
.cartao-prova .ico{font-size:clamp(26px,3.4vw,38px);flex:none}
.cartao-prova b{display:block;font-size:clamp(15px,1.95vw,20px);line-height:1.25}
.cartao-prova span{font-size:clamp(11px,1.4vw,15px);opacity:.9;line-height:1.4}
.cartao-prova.aprovado{background:linear-gradient(135deg,var(--verde),var(--verde-esc))}

/* ---------- fim de série / resultado ---------- */
#tela-fim{align-items:center;justify-content:center;text-align:center;gap:14px;padding:20px;overflow-y:auto}
.faixa{font-size:clamp(54px,10vw,104px);line-height:1;animation:gira 1.7s ease-in-out infinite}
@keyframes gira{0%,100%{transform:rotate(-7deg) scale(1)}50%{transform:rotate(7deg) scale(1.1)}}
#tela-fim h2{font-size:clamp(24px,4.4vw,46px);color:var(--cor-esc);line-height:1.15}
.numeros{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.numeros div{background:var(--papel);border-radius:15px;padding:11px 17px;box-shadow:var(--sombra);min-width:100px}
.numeros b{display:block;font-family:var(--num);font-size:clamp(22px,3.6vw,36px);color:var(--cor-esc);
  font-variant-numeric:tabular-nums;line-height:1.1}
.numeros span{font-size:clamp(10px,1.25vw,13px);color:var(--tinta2);text-transform:uppercase;letter-spacing:1px}
.recado{font-size:clamp(14px,1.85vw,20px);color:var(--tinta2);max-width:600px;line-height:1.55}
.lista-erros{display:flex;flex-direction:column;gap:6px;max-width:min(94vw,640px);width:100%}
.lista-erros div{background:#fff6f6;border-radius:11px;padding:9px 12px;font-size:clamp(12px,1.6vw,16px);
  text-align:left;border-left:4px solid var(--vermelho);-webkit-user-select:text;user-select:text;line-height:1.45}

/* confete
   overflow:hidden nao e enfeite: a particula nasce em `left` sorteado ate
   100vw e tem 11px de largura, entao a que cai perto da borda direita
   empurrava a largura da pagina e o celular passava a rolar de lado — a
   pagina "dancando" no meio da comemoracao. Aqui ela e recortada e nao
   mexe mais no layout. */
#confete{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.cfp{position:absolute;width:11px;height:11px;border-radius:2px;animation:cai linear forwards}
@keyframes cai{to{transform:translateY(105vh) rotate(720deg);opacity:0}}

/* ---------- diálogos ---------- */
/* o reset `*{margin:0}` mata o margin:auto que centraliza o dialog nativo —
   por isso ele volta explicitamente aqui */
dialog{border:0;border-radius:20px;padding:0;background:var(--papel);color:var(--tinta);
  max-width:min(94vw,680px);width:100%;box-shadow:0 24px 60px #1c1f2655;margin:auto}
dialog::backdrop{background:#1c1f2688;backdrop-filter:blur(3px)}
.dlg-cab{display:flex;align-items:center;gap:10px;padding:15px 19px;border-bottom:2px solid var(--linha)}
.dlg-cab h3{font-size:clamp(16px,2.1vw,23px);color:var(--cor-esc);flex:1;line-height:1.2}
.dlg-corpo{padding:15px 19px;max-height:68vh;overflow-y:auto;display:flex;flex-direction:column;gap:13px}
.dlg-pe{padding:11px 19px 17px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:clamp(14px,1.7vw,18px)}
.linha label{font-weight:700;min-width:112px}
.linha input,.linha select{flex:1;min-width:130px;border:2px solid var(--linha);border-radius:10px;
  padding:9px 11px;font-size:inherit;background:#fff;outline:0;color:var(--tinta);font-weight:600;
  -webkit-user-select:text;user-select:text}
.linha input:focus,.linha select:focus{border-color:var(--cor)}
.nota-dlg{font-size:clamp(12px,1.5vw,15px);color:var(--tinta2);line-height:1.55;background:#f6f3ea;
  border-radius:12px;padding:10px 13px;-webkit-user-select:text;user-select:text}
.segm{display:flex;gap:6px;flex-wrap:wrap}
.segm button{background:#f1eee4;border-radius:11px;padding:8px 12px;font-weight:700;font-size:.94em;
  box-shadow:0 2px 0 var(--linha)}
.segm button.on{background:var(--cor);color:#fff;box-shadow:0 2px 0 var(--cor-esc)}

/* mapa dentro do diálogo e boletim */
.mapa{display:flex;flex-direction:column;gap:7px}
.mapa .cab-bloco{font-size:clamp(11px,1.4vw,14px);font-weight:700;color:var(--tinta2);
  text-transform:uppercase;letter-spacing:1.4px;margin-top:8px;padding-left:4px}
.tabela-boletim{width:100%;border-collapse:collapse;font-size:clamp(12px,1.5vw,16px)}
.tabela-boletim th,.tabela-boletim td{border-bottom:1px solid var(--linha);padding:7px 6px;text-align:left}
.tabela-boletim th{color:var(--tinta2);text-transform:uppercase;font-size:.8em;letter-spacing:1px}
.tabela-boletim td.n{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums}
.tabela-boletim tr.aprov td{color:var(--verde-esc);font-weight:700}

/* certificado */
.certificado{background:#fffdf5;border:3px double var(--cor-esc);border-radius:8px;padding:clamp(18px,3vw,34px);
  text-align:center;display:flex;flex-direction:column;gap:11px;line-height:1.5}
.certificado .marca{font-family:var(--num);letter-spacing:5px;text-transform:uppercase;font-size:clamp(10px,1.3vw,13px);color:var(--tinta2)}
.certificado h2{font-size:clamp(20px,3.2vw,34px);color:var(--cor-esc);letter-spacing:-.5px}
.certificado .aluno{font-size:clamp(19px,2.9vw,30px);font-weight:700;border-bottom:2px solid var(--linha);
  padding-bottom:6px;margin:6px auto;max-width:90%}
.certificado p{font-size:clamp(12px,1.6vw,17px)}
.certificado .cod{font-family:var(--num);letter-spacing:2px;font-size:clamp(11px,1.4vw,14px);color:var(--tinta2)}
.certificado .curso-livre{font-size:clamp(10px,1.15vw,12.5px);line-height:1.5;color:var(--tinta2);
  border-top:1px solid var(--linha);padding-top:9px;margin-top:4px;max-width:44ch;margin-left:auto;margin-right:auto}
@media print{
  body{overflow:visible;background:#fff}
  .tela{position:static;display:none}
  dialog{position:static;box-shadow:none;max-width:100%}
  .dlg-cab,.dlg-pe{display:none}
}


/* ===========================================================================
   FACULDADE 7 — capa, graduações, trilha e vitrine
=========================================================================== */
.capa-dentro{max-width:min(96vw,1000px);margin:0 auto;padding:22px 14px 40px;
  display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
#tela-capa h1{font-family:var(--num);font-size:clamp(30px,6vw,64px);letter-spacing:2px;
  color:var(--cor-esc);line-height:1}
#tela-capa .lema{font-size:clamp(16px,2.3vw,25px);font-weight:700;color:var(--tinta)}
.frase{font-family:var(--num);letter-spacing:1px;font-size:clamp(13px,1.7vw,18px);color:var(--tinta2);
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:11px 0;max-width:620px;width:100%}
.rodape-capa{font-size:12px;color:var(--tinta2);max-width:600px;line-height:1.6;text-align:center;margin:0 auto}
.etiq-mono{font-family:var(--num);letter-spacing:1.6px;text-transform:uppercase;
  font-size:clamp(10px,1.2vw,12.5px);color:var(--tinta2);display:block}
.etiq-mini{font-family:var(--num);letter-spacing:1px;text-transform:uppercase;font-size:10px;
  background:var(--ouro);color:#4a3600;border-radius:5px;padding:2px 6px}

/* as três portas */
.portas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:11px;width:100%;max-width:940px}
.porta{background:var(--papel);border-radius:18px;box-shadow:0 5px 0 rgba(28,31,38,.14);
  padding:17px 18px;display:flex;flex-direction:column;gap:7px;text-align:left;
  transition:transform .08s,box-shadow .08s}
.porta:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(28,31,38,.14)}
.porta .ico{font-size:clamp(26px,3.4vw,36px);line-height:1}
.porta b{font-size:clamp(15px,1.95vw,20px);line-height:1.25;color:var(--tinta)}
.porta span:not(.ico):not(.cta){font-size:clamp(12.5px,1.55vw,16px);color:var(--tinta2);line-height:1.5}
.porta .cta{margin-top:auto;padding-top:7px;font-weight:700;color:var(--cor-esc);
  font-size:clamp(13px,1.6vw,17px)}
.porta.destaque{box-shadow:0 0 0 3px var(--ouro),0 5px 0 rgba(28,31,38,.14);background:#fffdf4}

/* escolha da graduação */
.titulo-tela{font-size:clamp(21px,3.2vw,34px);color:var(--cor-esc);line-height:1.15;text-align:center}
.sub-tela{font-size:clamp(13px,1.75vw,18px);color:var(--tinta2);line-height:1.6;text-align:center;
  max-width:680px;margin:0 auto}
.lista-grad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:11px}
.cartao-grad{background:var(--papel);border-radius:18px;box-shadow:0 5px 0 rgba(28,31,38,.14);
  padding:15px 17px;display:flex;gap:13px;align-items:flex-start;text-align:left;transition:transform .08s;
  border-left:6px solid var(--cor)}
.cartao-grad:active{transform:translateY(3px)}
.cartao-grad .ico{font-size:clamp(28px,3.6vw,40px);line-height:1;flex:none}
.cartao-grad .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cartao-grad b{font-size:clamp(16px,2.1vw,22px);line-height:1.2;color:var(--cor-esc)}
.cartao-grad .res{font-size:clamp(12.5px,1.55vw,16px);color:var(--tinta2);line-height:1.5}
.cartao-grad .num{font-family:var(--num);font-size:clamp(11px,1.35vw,14px);color:var(--tinta2);letter-spacing:.5px}

/* trilha do cargo */
.nota-trilha{width:100%;background:#f6f3ea;border-left:4px solid var(--cor);border-radius:0 12px 12px 0;
  padding:10px 13px;font-size:clamp(12.5px,1.6vw,16px);line-height:1.55}
.nota-trilha.ok{background:#eef9f3;border-left-color:var(--verde)}
.fora-da-trilha{opacity:.82}

/* faixa de ação (exame de admissão) */
.faixa-acao{width:100%;background:var(--asfalto);color:#fff;border-radius:18px;padding:15px 18px;
  display:flex;gap:13px;align-items:center;text-align:left;box-shadow:0 5px 0 rgba(28,31,38,.25);
  transition:transform .08s;margin-top:14px}
.faixa-acao:active{transform:translateY(3px)}
.faixa-acao .ico{font-size:clamp(26px,3.4vw,38px);flex:none}
.faixa-acao b{display:block;font-size:clamp(15px,1.95vw,20px);line-height:1.25}
.faixa-acao span span{font-size:clamp(12px,1.5vw,15.5px);opacity:.85;line-height:1.5;display:block;margin-top:3px}

/* aprenda conosco — os jogos */
.jogos{margin-top:18px;width:100%}
.jogos .rotulo{margin-bottom:8px}
.capa-jogos{max-width:940px}
.grade-jogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:9px}
.jogo{background:var(--papel);border-radius:14px;box-shadow:0 3px 0 var(--linha);padding:11px 13px;
  display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;text-align:left;
  transition:transform .08s}
.jogo:active{transform:translateY(2px)}
.jogo .ico{font-size:26px;line-height:1;flex:none}
.jogo b{display:block;font-size:clamp(13px,1.6vw,16px);line-height:1.2}
.jogo span span{font-size:clamp(11px,1.3vw,13.5px);color:var(--tinta2);line-height:1.4;display:block}

/* consentimento da vitrine */
.check{display:flex;gap:9px;align-items:flex-start;font-size:clamp(12px,1.5vw,15px);
  line-height:1.55;margin-top:9px;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--cor)}

/* Tabela larga rola dentro do proprio conteiner, nunca a pagina.
   Mas rolagem sem aviso e pior que rolagem nenhuma: o aluno arrasta, a
   tabela anda, e ele conclui que a PAGINA esta bamba. Por isso, quando a
   tabela realmente nao cabe, o app marca .rolavel e ela ganha duas coisas:
   um esmaecido na borda direita, que mostra que continua, e uma linha
   dizendo o que fazer. */
.rola-tabela{overflow-x:auto;max-width:100%;position:relative;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rola-tabela table{min-width:min(100%,420px)}
.rola-tabela.rolavel{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
}
.rola-tabela.fim{-webkit-mask-image:none;mask-image:none}
.dica-rolar{font-size:clamp(11px,1.4vw,13px);color:var(--tinta2);letter-spacing:.3px;
  margin-top:5px;display:flex;align-items:center;gap:6px}
.dica-rolar b{font-family:var(--num);color:var(--cor-esc)}


/* Celula mais justa no celular. Precisa ficar DEPOIS da regra de .cartao td
   la de cima: as duas tem a mesma especificidade, entao quem vence e a
   ultima do arquivo. Colocada na secao da barra, a regra nao pegava. */
@media (max-width:470px){
  .cartao th,.cartao td{padding:5px 6px}
}