/* ====================================================================
   DREAM TAEKWONDO — estilo do app
   Paleta provisória (preto / vermelho / branco) até a logo oficial.
   ==================================================================== */

/* Cores oficiais tiradas do escudo da Dream Taekwondo:
   azul #2154A5 · vermelho #EE292E · laranja #F15025 · branco #FFFFFF
   O app usa fundo claro; os neutros puxam levemente para o azul da marca. */
:root {
  --fundo:        #F2F5F9;   /* fundo da tela */
  --superficie:   #FFFFFF;   /* cartões */
  --superficie-2: #EAEFF6;   /* campos e blocos de destaque */
  --borda:        #D8E0EB;

  --vermelho:     #EE292E;   /* vermelho da chama */
  --vermelho-2:   #C41F24;   /* vermelho mais escuro, para texto e links */
  --laranja:      #F15025;   /* laranja da chama */
  --azul-marca:   #2154A5;   /* azul do escudo */

  --texto:        #12233F;   /* texto principal */
  --texto-2:      #566A87;   /* texto secundário */
  --texto-3:      #8394AC;   /* texto de apoio */

  --ouro:         #E39A00;   /* estrelas */
  --estrela-vazia:#D3DBE6;
  --verde:        #17A05A;
  --acerto:       #0E7A45;   /* texto de acerto no gabarito */
  --erro-texto:   #C41F24;   /* texto de erro no gabarito */
  --azul:         #2154A5;

  --raio:   14px;
  --raio-g: 18px;
  --sombra: 0 1px 2px rgba(18,35,63,.06), 0 6px 18px rgba(18,35,63,.07);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(72px + var(--safe-bottom)); }
body.sem-nav { padding-bottom: 0; }

h1,h2,h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.18rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--vermelho-2); text-decoration: none; }

/* ------------------------------ tela inicial ---------------------- */
.carregando-inicial {
  min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 24px;
}
.logo-marca { text-align: center; }
.logo-marca img { width: 132px; height: auto; display: block; margin: 0 auto; }
.logo-marca.pequena img { width: 84px; }
.spinner {
  width: 28px; height: 28px; border: 3px solid var(--superficie-2);
  border-top-color: var(--vermelho); border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------ layout ---------------------------- */
.tela { max-width: 780px; margin: 0 auto; padding: 16px 16px 24px; }

.cabecalho {
  position: sticky; top: 0; z-index: 20;
  background: rgba(242,245,249,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-conteudo {
  max-width: 780px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.cabecalho .titulo { font-weight: 800; font-size: 1.05rem; flex: 1; }
.cabecalho .sub { font-size: .76rem; color: var(--texto-2); font-weight: 500; }

.voltar {
  background: none; border: 0; color: var(--texto); font-size: 1.4rem;
  padding: 0 4px; cursor: pointer; line-height: 1;
}

/* ------------------------------ cartões --------------------------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 16px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(18,35,63,.05);
}
.cartao.clicavel { cursor: pointer; transition: border-color .15s, transform .1s; }
.cartao.clicavel:active { transform: scale(.99); }
.cartao.clicavel:hover { border-color: var(--vermelho); }

.lista-linhas { display: grid; gap: 10px; }

.linha {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 14px; cursor: pointer;
}
.linha:hover { border-color: #BFCDDE; }
.linha:active { background: var(--superficie-2); }
.linha .crescer { flex: 1; min-width: 0; }
.linha .nome { font-weight: 700; }
.linha .detalhe { font-size: .8rem; color: var(--texto-2); }
.linha .seta { color: var(--texto-3); }

/* ------------------------------ faixa ----------------------------- */
.faixa-tira {
  width: 42px; height: 14px; border-radius: 4px; position: relative;
  border: 1px solid rgba(18,35,63,.28); flex: 0 0 auto;
}
.faixa-tira i {
  position: absolute; right: 0; top: 0; bottom: 0; width: 34%;
  border-radius: 0 3px 3px 0; display: block;
}
.faixa-etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--texto-2);
}

/* ------------------------------ botões ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--vermelho); color: #fff; border: 0;
  border-radius: 12px; padding: 13px 18px; font-size: 1rem; font-weight: 700;
  font-family: inherit; cursor: pointer; width: 100%;
}
.btn:active { filter: brightness(.9); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secundario { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); }
.btn.fantasma { background: var(--superficie); color: var(--texto-2); border: 1px solid var(--borda); }
.btn.verde { background: var(--verde); }
.btn.pequeno { padding: 11px 14px; font-size: .85rem; width: auto; min-height: 42px; }
/* Em tela estreita os botões descem de linha em vez de estourar a borda */
.botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.botoes .btn { flex: 1 1 auto; min-width: 0; }

/* ------------------------------ formulário ------------------------ */
.campo { margin-bottom: 14px; }
.campo label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--texto-2); margin-bottom: 6px;
}
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

.campo input, .campo select, .campo textarea {
  width: 100%; background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 12px;
  padding: 13px 14px; font-size: 1rem; font-family: inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--vermelho);
}
.campo textarea { min-height: 90px; resize: vertical; }
.campo .ajuda { font-size: .75rem; color: var(--texto-3); margin-top: 5px; }
.campo-lado { display: flex; gap: 10px; }
.campo-lado .campo { flex: 1; }

.campo-calculado {
  background: var(--superficie-2); border: 1px dashed var(--borda);
  border-radius: 12px; padding: 13px 14px; color: var(--texto-2);
}
.campo-calculado b { color: var(--texto); }

/* ------------------------------ abas ------------------------------ */
/* A fileira de abas rola de lado no celular. A sombrinha da direita avisa
   que ainda tem coisa para o lado. */
.abas {
  display: flex; gap: 6px; margin-bottom: 14px; padding-bottom: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.abas::-webkit-scrollbar { display: none; }
.abas button { scroll-snap-align: start; }
.abas button {
  flex: 0 0 auto; background: var(--superficie); border: 1px solid var(--borda);
  color: var(--texto-2); border-radius: 999px; padding: 11px 16px;
  font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer;
  min-height: 42px;
}
.abas button.ativa { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

/* ------------------------------ navegação ------------------------- */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px);
  border-top: 1px solid var(--borda);
  padding-bottom: var(--safe-bottom);
  display: flex;
}
.nav-inferior button {
  flex: 1; background: none; border: 0; color: var(--texto-3);
  padding: 9px 2px 8px; font-family: inherit; font-size: .66rem; font-weight: 600;
  display: grid; gap: 3px; justify-items: center; cursor: pointer;
}
.nav-inferior button .icone { font-size: 1.28rem; line-height: 1; }
.nav-inferior button.ativa { color: var(--vermelho-2); }

/* ------------------------------ estrelas -------------------------- */
.estrelas { display: flex; gap: 4px; }
.estrelas button {
  background: none; border: 0; padding: 2px; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--estrela-vazia);
  transition: transform .1s;
}
.estrelas button.acesa { color: var(--ouro); }
.estrelas button:active { transform: scale(1.2); }
.estrelas.somente-leitura button { pointer-events: none; font-size: 1.05rem; }

/* ------------------------------ diversos -------------------------- */
.etiqueta {
  display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--superficie-2); color: var(--texto-2);
  border: 1px solid var(--borda);
}
.etiqueta.ok     { background: #E3F5EB; color: var(--acerto);     border-color: #B9E4CE; }
.etiqueta.alerta { background: #FCF1DA; color: #9A6A00;           border-color: #F0DCAF; }
.etiqueta.erro   { background: #FCE7E8; color: var(--erro-texto); border-color: #F3C4C6; }

.vazio { text-align: center; color: var(--texto-3); padding: 40px 20px; }
.vazio .icone { font-size: 2.6rem; display: block; margin-bottom: 10px; opacity: .6; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }

.numero-grande { font-size: 2rem; font-weight: 900; line-height: 1; }
.rotulo { font-size: .72rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }

.barra { height: 8px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--vermelho); border-radius: 99px; }

.video-quadro {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--raio); overflow: hidden; background: #000;
}
.video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.medalha {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 6px;
}
.medalha .icone { font-size: 1.9rem; }
.medalha .nome { font-size: .68rem; color: var(--texto-2); font-weight: 600; line-height: 1.25; }
.medalha-selo { line-height: 0; }
.recentes { cursor: pointer; }

.pódio-1 { color: var(--ouro); }

/* ------------------------------ toasts ---------------------------- */
#toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-bottom)); z-index: 90;
  pointer-events: none;
  display: grid; gap: 8px; width: min(92vw, 420px);
}
.toast {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-left: 3px solid var(--vermelho);
  border-radius: 12px; padding: 12px 14px; font-size: .9rem;
  box-shadow: var(--sombra); animation: subir .2s ease;
}
.toast.ok  { border-left-color: var(--verde); }
.toast.erro{ border-left-color: var(--vermelho); }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------ modal ----------------------------- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 70; background: rgba(18,35,63,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--superficie); border-top: 1px solid var(--borda);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  width: min(100%, 560px); max-height: 88dvh; overflow-y: auto;
  padding: 18px 16px calc(20px + var(--safe-bottom));
  animation: subir-modal .2s ease;
}
@keyframes subir-modal { from { transform: translateY(24px); opacity: .5; } }
.modal h2 { margin-bottom: 14px; }

@media (min-width: 640px) {
  .modal-fundo { align-items: center; }
  .modal { border-radius: var(--raio-g); border: 1px solid var(--borda); }
}

/* ------------------------- jogos infantis ------------------------- */
.jogo-cena {
  position: relative; border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; background: #fff; margin-bottom: 10px;
}
.jogo-cena img { display: block; width: 100%; height: auto; }
.jogo-rotulo {
  position: absolute; left: 10px; top: 10px; font-weight: 700; font-size: .78rem;
  background: rgba(255,255,255,.92); border-radius: 999px; padding: 3px 12px;
  color: var(--azul-marca);
}
.jogo-rotulo.marca { color: var(--vermelho); }
.jogo-alvo { position: absolute; cursor: pointer; border-radius: 12px; }
.jogo-alvo.achado { border: 4px solid var(--vermelho); background: rgba(238,41,46,.12); }

.jogo-placar {
  font-weight: 700; font-size: .95rem; text-align: center; margin-top: 12px;
  color: var(--texto);
}

.jogo-memoria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jogo-carta {
  aspect-ratio: 1; border-radius: var(--raio); border: 2px solid var(--borda);
  background: var(--azul-marca); display: grid; place-items: center;
  cursor: pointer; overflow: hidden;
}
.jogo-carta .verso { font-size: 1.5rem; }
.jogo-carta img { width: 100%; height: 100%; object-fit: contain; padding: 5px;
  background: #fff; display: none; }
.jogo-carta.aberta { background: #fff; }
.jogo-carta.aberta .verso { display: none; }
.jogo-carta.aberta img { display: block; }
.jogo-carta.parceada { border-color: var(--verde); background: #E9F8F0; }
.jogo-carta.parceada img { background: #E9F8F0; }

.jogo-cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jogo-item {
  border: 2px solid var(--borda); border-radius: var(--raio); background: #fff;
  padding: 6px; cursor: pointer;
}
.jogo-item img { display: block; width: 100%; height: auto; border-radius: 8px; }
.jogo-item span { display: block; text-align: center; font-size: .74rem;
  color: var(--texto-2); margin-top: 2px; }
.jogo-item.certa  { border-color: var(--verde); background: #E9F8F0; }
.jogo-item.errada { border-color: var(--vermelho); background: #FCE7E8; }

.jogo-partes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jogo-parte {
  border: 2px dashed var(--borda); border-radius: var(--raio); padding: 7px;
  text-align: center; min-height: 100px; display: grid; place-items: center;
  gap: 2px; cursor: pointer;
}
.jogo-parte.preenchida { border-style: solid; border-color: var(--verde); background: #E9F8F0; }
.jogo-parte img { width: 100%; max-width: 62px; height: auto; }
.jogo-parte .mais { font-size: 1.6rem; color: var(--texto-3); }
.jogo-parte span { font-size: .76rem; color: var(--texto-2); }
.jogo-pecas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; justify-content: center; }
.jogo-peca {
  border: 2px solid var(--borda); border-radius: 12px; padding: 4px; width: 82px;
  cursor: pointer; background: #fff;
}
.jogo-peca img { display: block; width: 100%; height: auto; }
.jogo-peca.usada { opacity: .3; pointer-events: none; }
.jogo-peca.ativa { border-color: var(--vermelho); background: #FFF4F4; }

/* O caça-palavras cabe inteiro na tela: as letras encolhem junto com o
   aparelho, sem barra de rolagem escondida. */
.jogo-caca-rolagem { padding-bottom: 4px; max-width: 100%; }
.jogo-caca {
  display: grid; gap: 2px; margin: 0 auto; width: 100%;
  max-width: min(100%, 420px);
  grid-template-columns: repeat(var(--caca-colunas, 10), minmax(0, 1fr));
}
.jogo-letra {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px;
  font-weight: 700; background: var(--superficie-2);
  font-size: clamp(.55rem, calc(62vw / var(--caca-colunas, 10)), .9rem);
  color: var(--texto); cursor: pointer; user-select: none;
}
.jogo-letra.inicio  { background: var(--laranja); color: #fff; }
.jogo-letra.marcada { background: var(--verde); color: #fff; }
.jogo-palavras { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.jogo-palavras span {
  font-weight: 700; font-size: .8rem; border: 1px solid var(--borda);
  border-radius: 999px; padding: 4px 12px; color: var(--texto-2);
}
.jogo-palavras span.ok {
  background: #E9F8F0; border-color: var(--verde); color: var(--acerto);
  text-decoration: line-through;
}

/* ---------------------------- impressão --------------------------- */
@media print {
  .nav-inferior, .cabecalho, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------------------- pirâmide de faixas pretas ------------------ */
.piramide-nivel {
  margin: 0 auto 12px; min-width: 220px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 12px 14px 14px;
  box-shadow: 0 1px 2px rgba(18,35,63,.05);
}
.piramide-selo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: #111111; color: #fff; border-radius: 999px; padding: 4px 12px;
  margin-bottom: 10px;
}
.piramide-selo span {
  background: rgba(255,255,255,.22); border-radius: 999px;
  padding: 0 7px; font-size: .68rem; letter-spacing: 0;
}
.piramide-nomes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.piramide-nome {
  font-size: .8rem; font-weight: 600; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 999px; padding: 4px 11px;
}
.piramide-nome[data-editar] { cursor: pointer; }
.piramide-nome[data-editar]:hover { border-color: var(--vermelho); color: var(--vermelho-2); }

/* ------------------ texto com lacunas (completar) ------------------ */
.texto-lacunas {
  font-size: 1rem; line-height: 2.2; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px;
}
.texto-lacunas select.lacuna {
  /* No celular a caixa fica estreita para o texto continuar fluindo.
     A lista completa aparece inteira quando o aluno abre a caixa. */
  display: inline-block; width: auto; max-width: min(48%, 148px);
  padding: 5px 6px; margin: 0 2px; vertical-align: baseline;
  font-size: .88rem; font-weight: 700;
  color: var(--vermelho-2); background: var(--superficie);
  border: 1px solid var(--vermelho); border-radius: 8px;
}
.texto-lacunas select.lacuna:invalid { color: var(--texto-3); }

/* ====================================================================
   GAMIFICAÇÃO — sequência, passaporte e estante de conquistas
   ==================================================================== */

/* -------------------------------------------------------- sequência */
.bloco-sequencia { text-align: center; }
.seq-numero {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.seq-chama { font-size: 1.6rem; line-height: 1; }
.seq-numero b {
  font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--vermelho);
}
.seq-unidade { font-size: .95rem; color: var(--texto-2); }
.seq-linha {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-top: 10px; font-size: .86rem; color: var(--texto-2);
}
.seq-linha b { color: var(--texto); }
.seq-alvo {
  margin-top: 12px; font-size: .84rem; color: var(--texto-2);
  border-top: 1px solid var(--borda); padding-top: 11px;
}
.seq-protetor {
  margin-top: 9px; font-size: .78rem; color: var(--texto-3);
  background: var(--superficie-2); border-radius: var(--raio);
  padding: 8px 11px; text-align: left;
}

/* ------------------------------------------------------- passaporte */
.passaporte-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.passaporte-barra {
  height: 10px; border-radius: 999px; background: var(--superficie-2);
  overflow: hidden;
}
.passaporte-barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--laranja), var(--vermelho));
  transition: width .3s ease;
}
.passaporte-conta {
  font-size: .78rem; color: var(--texto-3); margin-top: 6px; text-align: right;
}
.passaporte-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.passaporte-lista li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-top: 1px solid var(--borda);
}
.passaporte-lista li:first-child { border-top: 0; }
.carimbo {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 2px dashed var(--borda-forte, #C3CFDE); color: transparent;
  display: grid; place-items: center; font-weight: 800;
}
.carimbado .carimbo {
  border: 2px solid var(--verde); background: var(--verde); color: #fff;
}
.carimbo-texto { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.carimbo-texto i {
  display: block; font-style: normal; font-size: .76rem; color: var(--texto-3);
}
.carimbado .carimbo-texto b { color: var(--texto); }
.passaporte-lista li:not(.carimbado) .carimbo-texto b { color: var(--texto-2); }
.selo-pronto {
  margin-top: 14px; text-align: center; font-weight: 800; letter-spacing: .02em;
  color: var(--verde); background: rgba(23,160,90,.12);
  border: 1px solid rgba(23,160,90,.35); border-radius: var(--raio);
  padding: 12px;
}

/* ---------------------------------------------------------- posição */
.bloco-posicao { text-align: center; }
.pos-divisao {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}
.pos-frase { font-size: 1.05rem; margin-top: 4px; }
.pos-frase b { color: var(--vermelho); font-size: 1.5rem; }
.pos-detalhe { font-size: .82rem; color: var(--texto-2); margin-top: 4px; }

/* ---------------------------------------------------------- estante */
.estante-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 26px 0 4px; flex-wrap: wrap;
}
.estante-topo h3 { margin: 0; }
.estante-topo span { font-size: .78rem; color: var(--texto-3); }

.prateleira { margin-top: 18px; }
.prateleira-nome {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-2); display: flex; align-items: center; gap: 8px;
}
.prateleira-nome span {
  font-size: .68rem; letter-spacing: 0; background: var(--superficie-2);
  border-radius: 999px; padding: 1px 7px; color: var(--texto-3);
}
.prateleira-ajuda {
  font-size: .78rem; color: var(--texto-3); margin: 3px 0 0;
}
.prateleira-grade {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.conquista {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 11px; text-align: center;
}
.conquista.rara { border-color: var(--ouro); }
/* A escada é comum → rara → épica → lendária. A borda acompanha a
   POSIÇÃO do degrau, não a palavra: o terceiro continua vermelho e o
   quarto continua roxo, exatamente como estavam antes da troca de nome. */
.conquista.epica {
  border-color: var(--vermelho);
  box-shadow: 0 0 0 1px rgba(238,41,46,.18), var(--sombra);
}
.conquista-icone { font-size: 1.7rem; line-height: 1; }
.conquista-nome {
  font-weight: 700; font-size: .84rem; margin-top: 7px; line-height: 1.25;
}
.conquista-desc {
  font-size: .72rem; color: var(--texto-3); margin-top: 4px; line-height: 1.35;
}
.conquista-pontos {
  font-size: .68rem; color: var(--texto-3); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* O selo que ainda falta: mesma peça, sem o metal. A borda tracejada diz
   "lugar reservado" — a prateleira já tem o espaço dele. */
.conquista.travada {
  background: var(--fundo);
  border: 1px dashed var(--borda);
  box-shadow: none;
}
.conquista.travada .conquista-nome { color: var(--texto-2); font-weight: 600; }
.conquista-como {
  font-size: .7rem; color: var(--texto-3); margin-top: 4px; line-height: 1.35;
}

/* ------------------------------------------------------- chamada */
.chamada-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--borda);
}
.chamada-linha:first-child { border-top: 0; }
.chamada-nome {
  flex: 1 1 auto; min-width: 0; font-size: .92rem;
  overflow-wrap: anywhere;          /* nome comprido quebra em vez de estourar */
}
.chamada-nome small {
  display: block; color: var(--texto-3); font-size: .74rem;
  overflow-wrap: anywhere;
}
/* Com quatro botões por aluno (selo, dobok, camiseta e presença), a
   linha fica apertada: em tela de celular os botões descem para a linha
   de baixo e o nome fica inteiro. */
@media (max-width: 430px) {
  .chamada-linha { flex-wrap: wrap; }
  .chamada-nome { flex: 1 1 100%; }
  .chamada-botoes { margin-left: auto; }
  .btn-presenca { min-width: 52px; }
}
.chamada-botoes { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-presenca {
  min-height: 42px; min-width: 46px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-2); font-size: 1rem; cursor: pointer;
}
.btn-presenca[aria-pressed="true"] {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.btn-uniforme[aria-pressed="true"] {
  background: var(--azul-marca); border-color: var(--azul-marca); color: #fff;
}

.chamada-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.espirito-opcoes { display: grid; gap: 6px; }
.espirito-opcao {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; min-height: 44px;
}
.espirito-opcao input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--vermelho); }
.espirito-opcao span { display: block; font-size: .88rem; }
.espirito-opcao i { display: block; font-style: normal; font-size: .74rem; color: var(--texto-3); }
.espirito-opcao:has(input:checked) { border-color: var(--vermelho); background: var(--superficie-2); }

/* ------------------------------------------------- meta e desafio */
.meta-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.meta-rotulo {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}
.meta-parte {
  font-size: 1.7rem; font-weight: 800; color: var(--vermelho);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.meta-barra {
  height: 14px; border-radius: 999px; background: var(--superficie-2);
  overflow: hidden;
}
.meta-barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-marca), var(--vermelho));
  transition: width .4s ease;
}
.meta-numeros {
  font-size: .84rem; color: var(--texto-2); margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.meta-numeros b { color: var(--texto); }
.meta-premio {
  margin-top: 11px; font-size: .88rem; background: var(--superficie-2);
  border-radius: var(--raio); padding: 10px 12px;
}
.chip-pontos {
  flex: 0 0 auto; background: var(--vermelho); color: #fff;
  border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .85rem;
}
.desafio-placar {
  margin-top: 12px; font-size: .82rem; color: var(--texto-3);
  border-top: 1px solid var(--borda); padding-top: 10px;
}
.desafio-meu {
  margin-top: 12px; border-radius: var(--raio); padding: 11px 13px;
  font-size: .88rem; background: var(--superficie-2);
}
.desafio-meu.confirmado {
  background: rgba(23,160,90,.12); color: var(--acerto);
}
.desafio-meu.recusado { background: rgba(196,31,36,.1); color: var(--erro-texto); }
.desafio-lista { margin-top: 12px; }

/* ------------------------------------------------------------ sunbae */
.sunbae-placar { list-style: none; margin: 0; padding: 0; }
.sunbae-placar li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-top: 1px solid var(--borda);
}
.sunbae-placar li:first-child { border-top: 0; }
.sunbae-pos {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--superficie-2); color: var(--texto-2);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.sunbae-placar li:first-child .sunbae-pos {
  background: var(--ouro); color: #fff;
}
.sunbae-nome { flex: 1 1 auto; min-width: 0; font-size: .92rem; }
.sunbae-votos {
  flex: 0 0 auto; font-size: .78rem; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------- vídeo: progresso e perguntas */
.video-quadro > div { width: 100%; aspect-ratio: 16/9; }
.assistido { margin-top: 10px; font-size: .8rem; color: var(--texto-2); }
.assistido-barra {
  height: 6px; border-radius: 999px; background: var(--superficie-2);
  overflow: hidden; margin-bottom: 6px;
}
.assistido-barra i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--vermelho); transition: width .4s linear;
}
.quiz {
  margin-top: 16px; border-top: 1px solid var(--borda); padding-top: 14px;
}
.quiz h4 { margin: 0 0 12px; font-size: .95rem; }
.quiz-pergunta { margin-bottom: 16px; }
.quiz-enunciado { font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.quiz-opcao {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; min-height: 44px; margin-bottom: 6px;
  font-size: .89rem;
}
.quiz-opcao input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--vermelho); }
.quiz-opcao:has(input:checked) { border-color: var(--vermelho); background: var(--superficie-2); }
.quiz-opcao.certa {
  border-color: var(--verde); background: rgba(23,160,90,.12);
}
.quiz-opcao.errada {
  border-color: var(--vermelho-2); background: rgba(196,31,36,.1);
}
.quiz-fim {
  border-radius: var(--raio); padding: 12px 14px; font-size: .9rem;
  background: var(--superficie-2); margin-bottom: 12px;
}
.quiz-fim.bom { background: rgba(23,160,90,.12); color: var(--acerto); font-weight: 600; }
.quiz-fim.quase { background: rgba(227,154,0,.14); }

/* ------------------------------------- aceite de termos (LGPD) */
.aceite { max-width: 640px; margin: 0 auto; padding: 8px 0 30px; }
.aceite-topo { margin-bottom: 20px; }
.aceite-marca {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vermelho); font-weight: 700; margin-bottom: 8px;
}
.aceite-topo h2 { margin: 0 0 8px; }
.aceite-topo p { margin: 0; font-size: .92rem; color: var(--texto-2); }

.aceite-doc {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: 12px; overflow: hidden;
}
.aceite-cabeca {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: none; border: 0; padding: 15px 16px; min-height: 52px;
  cursor: pointer; text-align: left; color: var(--texto); font: inherit;
}
.aceite-cabeca b { display: block; font-size: .95rem; }
.aceite-cabeca i {
  display: block; font-style: normal; font-size: .76rem; color: var(--texto-3);
}
.aceite-seta { color: var(--texto-3); flex: 0 0 auto; }
.aceite-texto {
  max-height: 300px; overflow-y: auto; padding: 0 16px 12px;
  font-size: .85rem; line-height: 1.55; color: var(--texto-2);
  border-top: 1px solid var(--borda);
}
.aceite-texto h3 { font-size: 1rem; color: var(--texto); margin: 14px 0 6px; }
.aceite-texto h4 { font-size: .88rem; color: var(--texto); margin: 14px 0 4px; }
.aceite-texto h5 { font-size: .82rem; color: var(--texto); margin: 10px 0 3px; }
.aceite-texto p { margin: 0 0 8px; }
.aceite-texto ul { margin: 0 0 8px; padding-left: 18px; }
.aceite-texto li { margin-bottom: 3px; }
.aceite-texto b { color: var(--texto); }

.aceite-marcar {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 13px 16px; min-height: 52px; border-top: 1px solid var(--borda);
  background: var(--superficie-2); font-size: .9rem; font-weight: 600;
}
.aceite-marcar input {
  width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--vermelho);
}
.aceite-nota {
  font-size: .8rem; color: var(--texto-3); margin: 14px 0 18px;
  background: var(--superficie-2); border-radius: var(--raio); padding: 12px 14px;
}

/* ====================================================================
   A FAIXA DO ALUNO NA TELA
   Uma tira no alto e o cartão do aluno. Só isso — o app continua sendo
   o mesmo app, muda o sinal de quem está usando.
   ==================================================================== */

/* A tira: a própria faixa, atravessando o topo. Quando a graduação tem
   ponta ou é partida ao meio, a tira mostra as duas cores. */
.cabecalho::after {
  content: ""; display: block; height: 4px;
  background: linear-gradient(to right,
    var(--faixa-cor, transparent) 0 62%,
    var(--faixa-cor-2, transparent) 62% 100%);
}
/* Faixa branca: quase nada, como a graduação. */
body.faixa-clara .cabecalho::after {
  background: var(--borda);
  height: 3px;
}

/* O cartão do aluno ganha um toque da cor da faixa, sem virar bandeira. */
.cartao-aluno {
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.cartao-aluno::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(to bottom,
    var(--faixa-cor, transparent) 0 55%,
    var(--faixa-cor-2, transparent) 55% 100%);
}
.aluno-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 2px var(--faixa-cor, transparent);
}

/* ---------------------------------------------------------- PRIME
   Faixa preta. Fundo escuro e dourado, com parcimônia: quem chegou aqui
   levou anos, e o excesso estragaria. */
body.prime .cartao-aluno {
  background: linear-gradient(160deg, #14171C 0%, #0B0D10 100%);
  border-color: #2A2E36;
  color: #F3EFE6;
}
body.prime .cartao-aluno::before {
  background: linear-gradient(to bottom, #D9B65F, #8A6E2F);
  width: 3px;
}
body.prime .cartao-aluno .aluno-nome { color: #F7F2E6; }
body.prime .cartao-aluno .aluno-detalhe { color: #A9A294; }
body.prime .aluno-avatar {
  background: #1B1F26;
  box-shadow: inset 0 0 0 2px #D9B65F, 0 0 18px rgba(217,182,95,.18);
}
body.prime .cabecalho::after {
  background: linear-gradient(to right, #0B0D10 0 62%, #D9B65F 62% 100%);
  height: 4px;
}
body.prime .aluno-dan {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: #D9B65F; font-weight: 700; margin-top: 5px;
}

/* Candidato à Preta: o degrau antes. Escurece, mas o dourado ainda não
   é dele — é o que falta conquistar. */
body.quase-prime .cartao-aluno {
  background: linear-gradient(160deg, var(--superficie) 0%, var(--superficie-2) 100%);
}
body.quase-prime .cartao-aluno::before {
  background: linear-gradient(to bottom, #111111 0 50%, #D8232A 50% 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .cabecalho::after, .cartao-aluno::before { transition: background .4s ease; }
}

/* No cartão escuro, a tira preta sumia no fundo: ganha um contorno claro. */
body.prime .cartao-aluno .faixa-tira {
  box-shadow: inset 0 0 0 1px rgba(217,182,95,.55);
}
body.prime .cartao-aluno .aluno-detalhe { color: #BDB5A6; }

/* ------------------------------------------- permissões do professor */
.permissoes-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-permissao {
  font-size: .74rem; background: var(--superficie-2); color: var(--texto-2);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.chip-permissao.apagado { color: var(--texto-3); font-style: italic; }

/* Código de liberação da conta do aluno */
.codigo-convite {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.1rem; font-weight: 800; letter-spacing: .22em;
  text-align: center; padding: 18px 10px; border-radius: var(--raio);
  background: var(--superficie-2); border: 2px dashed var(--borda-forte, #C3CFDE);
  color: var(--texto); user-select: all;
}

/* Faixa da versão de teste (piloto) */
.faixa-piloto {
  background: #123F6B; color: #DCEAF7; display: flex; gap: 10px;
  align-items: center; justify-content: center; flex-wrap: wrap;
  font-size: .72rem; padding: 7px 12px; text-align: center;
  border-bottom: 1px solid #1D5A94;
}
.faixa-piloto b { color: #fff; letter-spacing: .06em; }
.faixa-piloto button {
  font: inherit; font-weight: 700; color: #DCEAF7; background: transparent;
  border: 1px solid #3D7BB5; border-radius: 999px; padding: 4px 12px;
  min-height: 32px; cursor: pointer; white-space: nowrap;
}
.faixa-piloto button:hover { background: #1D5A94; }

/* ------------------------------------------------------------------
   CADASTRO NA FEDERAÇÃO (só aparece na Faixa Branca, no primeiro exame)
   ------------------------------------------------------------------ */
.bloco-federacao {
  background: var(--superficie-2);
  border-left: 4px solid var(--ouro, #C79A2E);
  margin: 16px 0;
}
.federacao-titulo { font-weight: 800; font-size: .98rem; margin-bottom: 6px; }
.federacao-texto {
  font-size: .84rem; color: var(--texto-2); margin: 0 0 14px; line-height: 1.5;
}
.federacao-aviso {
  font-size: .78rem; color: var(--texto-2); line-height: 1.5;
  background: var(--superficie); border-radius: 10px; padding: 10px 12px;
  margin-top: 6px;
}

/* Quem participa do evento: grade de faixas marcáveis */
.grade-faixas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
}
.faixa-escolha {
  display: flex; align-items: center; gap: 7px; font-size: .82rem;
  background: var(--superficie-2); border-radius: 8px; padding: 8px 10px;
  min-height: 40px; cursor: pointer; overflow-wrap: anywhere;
}
.faixa-escolha input { width: 17px; height: 17px; accent-color: var(--vermelho); flex: 0 0 auto; }
.marca-linha {
  display: flex; align-items: center; gap: 8px; font-size: .88rem;
  min-height: 40px; cursor: pointer;
}
.marca-linha input { width: 18px; height: 18px; accent-color: var(--vermelho); }

/* Cadastro de federação incompleto — RG/CPF são opcionais */
.nota-federacao {
  background: var(--superficie-2); border-left: 4px solid var(--ouro, #C79A2E);
  border-radius: 10px; padding: 11px 13px; font-size: .82rem;
  color: var(--texto-2); line-height: 1.5; margin-bottom: 14px;
}
.sem-dado { color: var(--texto-3); font-weight: 600; font-style: italic; }

/* Vídeo que não abre — explicação no lugar da tela preta */
.video-falhou {
  /* Preenche o quadro inteiro do vídeo: nada de tarja preta sobrando
     em volta da explicação — a tarja preta é justamente o sintoma. */
  position: absolute; inset: 0; display: grid; place-items: center;
  align-content: center; gap: 10px; background: var(--superficie-2);
  color: var(--texto-2); font-size: .88rem; text-align: center;
  padding: 18px; line-height: 1.5;
}
.video-falhou-icone { font-size: 2rem; opacity: .55; }
.aviso-video {
  display: flex; flex-direction: column; gap: 9px; margin-top: 12px;
  background: var(--superficie-2); border-left: 4px solid var(--ouro, #C79A2E);
  border-radius: 10px; padding: 13px 15px; font-size: .85rem;
  color: var(--texto-2); line-height: 1.5;
}
.aviso-video b { color: var(--texto); font-size: .92rem; }
.aviso-video .btn { align-self: flex-start; }
.aviso-video-saida { font-size: .78rem; color: var(--texto-3); }

/* ------------------------------------------------------------------
   SELOS — a arte do mestre por cima, o desenho como rede de proteção.
   Quando o arquivo de imagem não existe, o <img> se remove sozinho e
   o seletor irmão deixa de casar, revelando o SVG. Sem JavaScript.
   ------------------------------------------------------------------ */
.selo-par { position: relative; display: inline-grid; place-items: center; }
.selo-par > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.selo-par > img + .selo-desenho { display: none; }
.selo-par > .selo-desenho { display: grid; place-items: center; }
.selo-par > .selo-desenho svg { width: 100%; height: 100%; }
.selo-par.selo-travado > img { filter: grayscale(1) opacity(.42); }
.selo { display: block; }

/* Selo dentro do cartão de conquista */
.conquista-selo { line-height: 0; margin-bottom: 2px; position: relative;
  display: inline-block; }

/* Conquistado mais de uma vez: uma peça só, com a contagem no canto.
   Três medalhas iguais lado a lado pareciam erro; ×3 parece façanha. */
.conquista-vezes {
  position: absolute; right: -2px; bottom: 4px; z-index: 2;
  min-width: 26px; padding: 2px 6px; border-radius: 999px;
  font-weight: 700; font-size: .78rem; line-height: 1.25;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: #fff; background: #1B2836;
  border: 2px solid var(--superficie, #fff);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5);
}
.conquista.rara     .conquista-vezes { background: #1D4E89; }
.conquista.epica    .conquista-vezes { background: #8A6A12; }
.conquista.lendaria .conquista-vezes { background: #5B4394; }
.conquista.lendaria {
  border-color: #8E7BC0;
  box-shadow: 0 0 0 1px #8E7BC033, 0 6px 20px -12px #6E4FA870;
}

/* ------------------------------------------------------------------
   PÁGINA DE ESTUDO — Os dois significados
   Vive dentro do Aprender. Feita para ser lida no celular em pé, então
   tudo empilha e nada depende de largura.
   ------------------------------------------------------------------ */
.estudo { display: flex; flex-direction: column; gap: 22px; }
.estudo h2 { font-size: 1.5rem; margin: 0 0 6px; }
.estudo h3 { font-size: 1.12rem; margin: 0 0 4px; }
.estudo p { margin: 0; line-height: 1.55; }
.estudo-capa p { color: var(--texto-2); }

.estudo-par { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .estudo-par { grid-template-columns: 1fr 1fr; } }
.estudo-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 15px 16px;
}
.estudo-caixa p { font-size: .93rem; color: var(--texto-2); }
.estudo-eti {
  display: block; font-size: .7rem; letter-spacing: .1em; font-weight: 700;
  text-transform: uppercase; color: var(--vermelho); margin-bottom: 7px;
}

.estudo-destaque {
  background: var(--superficie-2); border-left: 4px solid var(--vermelho);
  border-radius: var(--raio); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.estudo-destaque > b { font-size: .95rem; }
.estudo-destaque p { font-size: .95rem; }

.estudo-bloco { display: flex; flex-direction: column; gap: 12px; }
.estudo-nota { font-size: .87rem; color: var(--texto-2); }

/* as seis cores */
.sig-grade { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .sig-grade { grid-template-columns: 1fr 1fr; } }
.sig-cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 13px 15px;
}
.sig-topo { display: flex; align-items: center; gap: 9px; }
.sig-cor {
  width: 34px; height: 13px; border-radius: 3px; flex: 0 0 auto;
  background: var(--c); border: 1px solid rgba(0, 0, 0, .22);
  box-shadow: inset 0 -3px 5px -3px rgba(0, 0, 0, .35);
}
.sig-valor {
  font-weight: 700; color: var(--vermelho); margin: 7px 0 3px;
  font-size: .97rem;
}
.sig-cartao p { font-size: .88rem; color: var(--texto-2); }

/* os oito trigramas */
.tri-grade { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tri-grade { grid-template-columns: 1fr 1fr; } }
.tri-cartao {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 13px 15px;
}
.tri-desenho {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--texto); background: var(--superficie-2); border-radius: 10px;
}
.tri-desenho svg { display: block; }
.tri-texto { min-width: 0; }
.tri-texto b { display: block; font-size: .95rem; }
.tri-nome {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--vermelho); margin: 2px 0 4px;
}
.tri-texto p { font-size: .87rem; color: var(--texto-2); }

.estudo-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.estudo-tabela th {
  text-align: left; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-2); font-weight: 700;
  padding: 9px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.estudo-tabela td {
  padding: 9px 12px; border-bottom: 1px solid var(--borda);
  color: var(--texto-2);
}
.estudo-tabela tbody tr:last-child td { border-bottom: none; }
.tri-mini {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 26px; height: 26px; color: var(--texto); margin-right: 5px;
}

/* A tabela é a única coisa da página de estudo que pode ser mais larga
   que a tela; ela rola sozinha, o corpo da página não. */
.rolagem {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* ------------------------------------------------------------------
   RECADOS — o canal do aluno com o mestre
   ------------------------------------------------------------------ */
.recados { margin-top: 14px; display: grid; gap: 9px; }
.recados-titulo {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--texto-3);
}
.recado {
  background: var(--superficie-2); border-radius: 12px; padding: 11px 13px;
  border-left: 3px solid var(--texto-3);
}
.recado.aberto { border-left-color: var(--ouro); }
.recado.resolvido { border-left-color: var(--verde); }
.recado-topo {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; margin-bottom: 5px;
}
.recado-topo span { font-weight: 700; font-size: .87rem; }
.recado-topo i {
  font-style: normal; font-size: .72rem; color: var(--texto-3);
  white-space: nowrap;
}
.recado p { margin: 0; font-size: .89rem; color: var(--texto-2); }
.recado-resposta {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borda);
  font-size: .89rem;
}
.recado-resposta b { color: var(--vermelho); }
.recado-tecnico {
  margin-top: 8px; font-size: .72rem; color: var(--texto-3);
  display: flex; flex-wrap: wrap; gap: 4px 10px; word-break: break-word;
}
.recado-tecnico code { font-size: .72rem; }

/* ------------------------------------------------------ títulos */
/* O quadro de medalhas: posição, atleta e as três colunas de metal,
   alinhadas em grade para os números ficarem um embaixo do outro. */
.quadro-medalhas { padding-bottom: 8px; }
.qm-cabeca, .qm-linha {
  display: grid; grid-template-columns: 24px 1fr 34px 34px 34px;
  align-items: center; gap: 6px;
}
.qm-cabeca { font-size: .8rem; color: var(--texto-3); padding: 0 0 6px;
  border-bottom: 1px solid var(--borda); text-align: center; }
.qm-cabeca span:nth-child(2) { text-align: left; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.qm-linha { padding: 9px 0; border-bottom: 1px solid var(--borda); }
.qm-linha:last-child { border-bottom: 0; }
.qm-pos { font-weight: 800; color: var(--texto-3); font-size: .85rem;
  font-variant-numeric: tabular-nums; }
.qm-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qm-nome b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.qm-n { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.titulo-atleta .ta-medalha { font-size: 1.7rem; line-height: 1; }
.titulo-atleta .nome { font-size: 1rem; font-weight: 800; }
.ta-colocacao { font-size: .84rem; color: var(--texto); font-weight: 600; margin-top: 2px; }

/* Miniatura de vídeo que não carregou (troca feita pelo app.js) */
.imagem-faltando { width: 56px; text-align: center; font-size: 1.4rem; flex: 0 0 auto; }

/* ------------------------------------------------------ modal: o X */
.modal-topo { display: flex; align-items: flex-start; gap: 12px; }
.modal-topo h2 { flex: 1; min-width: 0; }
.modal-fechar {
  flex: 0 0 auto; width: 40px; height: 40px; margin: -6px -6px 0 0;
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.modal-fechar:active { background: var(--borda); }

/* ====================================================================
   O INÍCIO DO MESTRE
   O cartão do mestre é a própria faixa preta: fundo de pano escuro, um
   brilho dourado vindo do canto, e a faixa atravessando a base com uma
   barra dourada por Dan na ponta — como se borda na faixa de verdade.
   ==================================================================== */
.mestre-heroi {
  position: relative; overflow: hidden;
  border-radius: 22px; margin-bottom: 14px;
  padding: 20px 20px 0;
  color: #F3EFE6;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(217,182,95,.18), transparent 60%),
    linear-gradient(165deg, #191C22 0%, #0A0C0F 100%);
  border: 1px solid #2A2E36;
  box-shadow: 0 14px 30px -18px rgba(10,12,15,.8);
}
.mh-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mh-hangul { color: #D9B65F; font-size: 1.05rem; letter-spacing: .28em; font-weight: 700; }
.mh-data { font-size: .72rem; color: #8E8778; }
.mh-titulo {
  margin-top: 16px; font-size: .66rem; font-weight: 800;
  letter-spacing: .32em; text-transform: uppercase; color: #D9B65F;
}
.mh-nome {
  margin: 4px 0 8px; color: #F7F2E6; font-weight: 800;
  font-size: clamp(1.45rem, 6.2vw, 2rem); line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;
}
.mh-grau { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.mh-grau b { font-size: 1.3rem; font-weight: 900; color: #E8C977; letter-spacing: -.01em; }
.mh-grau span { font-size: .82rem; color: #A9A294; }
.mh-desde { margin-top: 4px; font-size: .8rem; color: #8E8778; }
.mh-editar {
  margin-top: 14px; background: transparent; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(217,182,95,.45); color: #D9B65F;
  border-radius: 999px; padding: 7px 14px; font-size: .76rem; font-weight: 700;
}
.mh-editar:active { background: rgba(217,182,95,.12); }

/* A faixa: corpo costurado e a ponta com as barras de Dan. */
.mh-faixa { display: flex; height: 36px; margin: 20px -20px 0; }
.mh-faixa-corpo {
  flex: 1;
  background:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255,255,255,.05) 7px 8px),
    linear-gradient(to bottom, #1C1C1C, #060606);
}
.mh-faixa-ponta {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-width: 34%; padding: 0 18px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255,255,255,.04) 7px 8px),
    linear-gradient(to bottom, #111, #020202);
  border-left: 2px solid #000;
}
.mh-faixa-ponta i {
  display: block; width: 6px; height: 22px; border-radius: 1px;
  background: linear-gradient(to bottom, #F4DA92, #B08934);
  box-shadow: 0 0 6px rgba(232,201,119,.35);
}

/* Números do dia */
.mestre-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mestre-numero {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px;
  padding: 14px 8px; text-align: center; display: grid; gap: 2px;
}
.mestre-numero b { font-size: 1.6rem; font-weight: 900; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.mestre-numero span { font-size: .7rem; color: var(--texto-2); line-height: 1.2; }

.mestre-rotulo {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); margin: 18px 0 8px;
}
.mestre-em-dia { color: var(--verde); font-weight: 700; font-size: .9rem; }
.mestre-exame { display: flex; align-items: center; gap: 12px; }
.mestre-exame .btn { width: auto; flex: 0 0 auto; }

.mestre-atalhos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 18px;
}
.mestre-atalho { margin: 0; }
.ma-icone { font-size: 1.6rem; line-height: 1; }
.ma-nome { font-weight: 800; margin-top: 8px; }
.ma-detalhe { font-size: .74rem; color: var(--texto-2); }
@media (min-width: 560px) { .mestre-atalhos { grid-template-columns: repeat(3, 1fr); } }

/* Estante do mestre */
.mestre-estante {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 22px; padding: 18px 16px 20px; margin-bottom: 12px;
}
.me-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.me-cabeca h2 { margin: 0; }
.me-cabeca span { font-size: .74rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.me-ajuda { font-size: .82rem; color: var(--texto-2); margin: 6px 0 4px; }
.legado-linha {
  display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--borda);
}
.legado-linha:first-of-type { border-top: 0; }
.legado-rotulo b { font-size: .9rem; }
.legado-rotulo span { display: block; font-size: .74rem; color: var(--texto-3); }
.legado-selos { display: flex; gap: 8px; }
.legado-selo { line-height: 0; }
@media (min-width: 520px) {
  .legado-linha { grid-template-columns: 180px 1fr; align-items: center; }
}
.me-poomses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px 8px; margin-top: 12px;
}
.me-poomse { text-align: center; line-height: 0; }
.me-poomse span {
  display: block; line-height: 1.25; font-size: .68rem; font-weight: 700;
  color: var(--texto-2); margin-top: 4px;
}
.me-poomse.apagado span { color: var(--texto-3); font-weight: 600; }

/* ------------------------------------------------ passaporte da equipe */
.passa-topo { display: grid; gap: 10px; }
.passa-resumo { font-size: .95rem; color: var(--texto-2); }
.passa-resumo b { font-size: 1.3rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.passa-topo input[type="search"] {
  width: 100%; background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px;
  font-size: 1rem; font-family: inherit;
}
.passa-filtro { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.passa-filtro input { width: 20px; height: 20px; accent-color: var(--vermelho); }
.passa-ajuda { font-size: .76rem; color: var(--texto-3); margin: 0; }

.passa-faixa { margin-bottom: 12px; }
.passa-faixa > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 4px; position: sticky; top: 62px; z-index: 5;
  background: var(--fundo);
}
.passa-faixa > summary::-webkit-details-marker { display: none; }
.passa-faixa > summary b { font-size: 1rem; }
.passa-faixa > summary span { font-size: .78rem; color: var(--texto-3); margin-left: auto; }
.passa-faixa > summary::after { content: "▾"; color: var(--texto-3); }
.passa-faixa:not([open]) > summary::after { content: "▸"; }

.passa-lista { display: grid; gap: 8px; }
.passa-aluno {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 11px 12px;
}
.passa-aluno.pronto { border-color: #9ED9B8; background: #F4FBF7; }
.passa-nome { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.passa-nome b { font-size: .95rem; flex: 1; min-width: 0; }
.passa-conta { font-size: .78rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.passa-pronto {
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--verde); border-radius: 999px; padding: 3px 9px;
}
.passa-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.passa-item {
  font-family: inherit; font-size: .8rem; font-weight: 700; line-height: 1;
  padding: 10px 12px; min-height: 38px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto);
  cursor: pointer; display: inline-flex; align-items: center;
}
button.passa-item:active { transform: scale(.97); }
button.passa-item.feito { background: var(--verde); border-color: var(--verde); color: #fff; }
.passa-item.auto {
  cursor: default; background: transparent; border-style: dashed;
  color: var(--texto-3); font-weight: 600;
}
.passa-item.auto.feito { color: var(--acerto); border-color: #9ED9B8; border-style: solid; }

/* ------------------------------------------------ cartão do faixa preta
   Um degrau abaixo do cartão do mestre: mesmo pano, sem o brilho dourado
   do canto, nome menor e dourado mais contido. */
.dan-heroi {
  position: relative; overflow: hidden;
  border-radius: 18px; margin-bottom: 12px; padding: 16px 16px 0;
  color: #EDE8DC;
  background: linear-gradient(165deg, #16191E 0%, #0B0D10 100%);
  border: 1px solid #2A2E36;
}
.dh-topo { display: flex; justify-content: space-between; align-items: center; }
.dh-hangul { color: #C9A85A; font-size: .9rem; letter-spacing: .26em; font-weight: 700; }
.dh-trofeus { font-size: .8rem; color: #BDB5A6; }
.dh-titulo {
  margin-top: 10px; font-size: .62rem; font-weight: 800; letter-spacing: .3em;
  text-transform: uppercase; color: #C9A85A;
}
.dh-nome { margin: 2px 0 6px; font-size: 1.2rem; font-weight: 800; color: #F3EFE6;
  line-height: 1.2; text-wrap: balance; }
.dh-grau { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.dh-grau b { font-size: 1.05rem; font-weight: 900; color: #D9BD73; }
.dh-grau span { font-size: .78rem; color: #A9A294; }
.dh-faixa { display: flex; height: 26px; margin: 14px -16px 0; }
.dh-faixa-corpo {
  flex: 1;
  background:
    repeating-linear-gradient(to bottom, transparent 0 6px, rgba(255,255,255,.045) 6px 7px),
    linear-gradient(to bottom, #1A1A1A, #060606);
}
.dh-faixa-ponta {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  min-width: 30%; padding: 0 14px; border-left: 2px solid #000;
  background: linear-gradient(to bottom, #111, #030303);
}
.dh-faixa-ponta i {
  display: block; width: 5px; height: 16px; border-radius: 1px;
  background: linear-gradient(to bottom, #E6CB84, #A07D34);
}

/* ------------------------------------------------------ ranking duplo */
.ranking-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ranking-duplo > div {
  background: var(--superficie-2); border-radius: 14px; padding: 12px;
  display: grid; gap: 2px;
}
.ranking-duplo b { font-size: 1.9rem; font-weight: 900; line-height: 1.05;
  font-variant-numeric: tabular-nums; }
.rd-rotulo { font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-3); }
.rd-sub { font-size: .78rem; color: var(--texto-2); }
.rd-pontos { font-size: .82rem; color: var(--texto-2); margin-top: 8px; }
.ranking-legenda { font-size: .78rem; color: var(--texto-3); margin: -6px 0 10px; }
.ranking-pos { width: 32px; text-align: center; font-weight: 800; font-size: .9rem;
  color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ranking-pos.podio { font-size: 1.3rem; }

/* ------------------------------------------ boas-vindas: duas entradas */
.boas-vindas-opcoes { display: grid; gap: 10px; }
.opcao-entrada {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; text-align: left;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 14px;
  padding: 14px; cursor: pointer; font-family: inherit; color: var(--texto);
}
.opcao-entrada:active { transform: scale(.99); }
.opcao-entrada span { grid-row: 1 / 3; font-size: 1.7rem; text-align: center; }
.opcao-entrada b { font-size: .95rem; }
.opcao-entrada i { font-style: normal; font-size: .8rem; color: var(--texto-2); }
.aviso-codigo {
  font-size: .82rem; color: var(--texto-2); background: var(--superficie-2);
  border-radius: 12px; padding: 10px 12px;
}

/* ------------------------------------------------------ aniversário */
.aniversario {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 20px; margin-bottom: 12px; padding: 20px 18px 18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(241,80,37,.16) 0 18%, transparent 19%),
    radial-gradient(circle at 88% 26%, rgba(33,84,165,.14) 0 14%, transparent 15%),
    radial-gradient(circle at 78% 88%, rgba(227,154,0,.18) 0 12%, transparent 13%),
    linear-gradient(160deg, #FFF8EC 0%, #FFFFFF 70%);
  border: 1px solid #F3D9A6;
}
.aniv-bolo { font-size: 2.4rem; line-height: 1; }
.aniv-titulo { font-size: 1.35rem; font-weight: 900; margin-top: 8px; letter-spacing: -.02em;
  text-wrap: balance; }
.aniv-idade { font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--laranja); margin-top: 2px; }
.aniv-recado { font-size: .92rem; color: var(--texto-2); margin: 12px auto 10px;
  max-width: 36ch; line-height: 1.55; }
.aniv-assinatura { font-weight: 800; font-style: italic; color: var(--texto); }
.aniv-assinatura::before { content: "— "; }

.mestre-aniversarios { padding: 14px 16px; }
.ma-aniv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  font-size: .9rem; border-top: 1px solid var(--borda); }
.ma-aniv:first-of-type { border-top: 0; }
.ma-aniv span { color: var(--texto-2); font-size: .82rem; white-space: nowrap; }
.ma-aniv.hoje b { color: var(--laranja); }
.ma-aniv-nota { font-size: .74rem; color: var(--texto-3); margin-top: 8px; }

/* botão de copiar confirma no próprio botão */
.btn.copiado { background: var(--verde); border-color: var(--verde); color: #fff; }
.codigo-convite { user-select: all; -webkit-user-select: all; }

/* ------------------- desafio Criança Prodígio ------------------- */
.desafio-prodigio {
  border: 1.5px solid #E2B84A;
  background: linear-gradient(160deg, #FFF9E8 0%, var(--superficie) 60%);
}
.dp-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dp-selo { flex: none; }
.dp-rotulo { font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #A67C00; }
.dp-texto { font-size: .88rem; color: var(--texto-2); margin: 6px 0 10px; line-height: 1.45; }
.dp-regras { font-size: .85rem; color: var(--texto-2); margin: 0 0 14px; padding-left: 18px;
  line-height: 1.45; }
.dp-regras li { margin-bottom: 4px; }

/* ------------------- valor do exame por faixa ------------------- */
.tabela-valores { display: grid; gap: 6px; }
.campo label.tv-linha { display: flex; align-items: center; gap: 10px; font-size: .88rem;
  font-weight: 600; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 10px; padding: 6px 8px; margin: 0; }
.tv-linha .faixa-tira { flex: none; }
.tv-nome { flex: 1; min-width: 0; }
.campo .tv-linha input { width: 120px; flex: none; margin: 0; padding: 8px 10px; background: var(--superficie); }
.tv-linha input:placeholder-shown { font-style: italic; }

/* ------------------------ avisos do mestre ------------------------ */
.aviso-mestre {
  position: relative; margin-bottom: 14px; padding: 14px 16px;
  border-radius: 16px; background: linear-gradient(150deg, #12233F 0%, #1C3761 100%);
  color: #fff; box-shadow: var(--sombra); border-left: 4px solid var(--vermelho);
}
.am-topo { display: flex; align-items: center; gap: 8px; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.am-selo { font-size: 1rem; }
.am-rotulo { font-weight: 800; }
.am-data { margin-left: auto; opacity: .75; text-transform: none; letter-spacing: 0; }
.am-titulo { font-weight: 800; font-size: 1.05rem; margin-top: 8px; }
.am-texto { white-space: pre-line; font-size: .92rem; line-height: 1.5; margin: 6px 0 10px; }
.am-rodape { display: flex; align-items: center; gap: 10px; }
.am-assinatura { font-style: italic; font-size: .85rem; opacity: .85; }
.aviso-mestre .btn { margin-left: auto; background: rgba(255,255,255,.12);
  color: #fff; border-color: rgba(255,255,255,.35); width: auto; }
.aviso-publico { margin-bottom: 0; flex-wrap: wrap; }
.aviso-alcance { font-size: .88rem; background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 12px; padding: 10px 12px; margin: 4px 0 14px; }
.aviso-alcance.zerado { border-color: var(--vermelho); color: var(--vermelho); }
.aviso-linha .am-texto { color: var(--texto); }
.aviso-linha.encerrado { opacity: .6; }
.aviso-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .78rem; color: var(--texto-2); }

/* ---------------------------- selo ampliado ---------------------------- */
.conquista[data-peca], .medalha[data-recente] { cursor: pointer; }
.conquista[data-peca]:active, .medalha[data-recente]:active { transform: scale(.96); }
.selo-grande { text-align: center; padding: 4px 0 6px; }
.sg-arte { position: relative; display: grid; place-items: center; width: fit-content;
  margin: 4px auto 10px; animation: sg-entra .35s cubic-bezier(.2,1.4,.4,1); }
.sg-arte > .selo-par { position: relative; z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(18,35,63,.28)); }
.sg-brilho { position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(255,215,110,.55) 0%, rgba(255,215,110,0) 70%);
  animation: sg-pulsa 2.6s ease-in-out infinite; }
.rar-comum .sg-brilho { background: radial-gradient(circle, rgba(140,160,190,.35) 0%, transparent 70%); }
.rar-rara .sg-brilho { background: radial-gradient(circle, rgba(70,140,255,.45) 0%, transparent 70%); }
.rar-epica .sg-brilho { background: radial-gradient(circle, rgba(170,90,255,.45) 0%, transparent 70%); }
.sg-vezes { position: absolute; right: 2%; bottom: 6%; z-index: 2; background: var(--vermelho);
  color: #fff; font-size: 1.05rem; border-radius: 999px; padding: 4px 11px;
  box-shadow: var(--sombra); }
.sg-raridade { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 12px;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.sg-raridade.rar-rara { color: #1B5FD1; border-color: #9CC0F5; background: #EEF4FF; }
.sg-raridade.rar-epica { color: #7A2FD0; border-color: #CFAEF3; background: #F6EEFF; }
.sg-raridade.rar-lendaria { color: #9A6B00; border-color: #E8C766; background: #FFF7DE; }
.sg-texto { font-size: .92rem; color: var(--texto-2); line-height: 1.5; margin: 12px 4px 10px; }
.sg-fatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  font-size: .82rem; color: var(--texto-3); }
.selo-grande.apagado .sg-texto { color: var(--texto); font-weight: 600; }
@keyframes sg-entra { from { transform: scale(.6); opacity: 0; } }
@keyframes sg-pulsa { 0%,100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sg-arte, .sg-brilho { animation: none; } }

/* -------------------- provas: campos e alternativas -------------------- */
/* As caixas de escrever acompanham a largura da tela. */
#corpo-questao textarea, #corpo-questao input, #corpo-questao select {
  width: 100%; box-sizing: border-box; background: var(--superficie-2);
  color: var(--texto); border: 1px solid var(--borda); border-radius: 12px;
  padding: 13px 14px; font-size: 1rem; font-family: inherit;
}
#corpo-questao textarea { min-height: 140px; resize: vertical; line-height: 1.45; }
#corpo-questao textarea:focus, #corpo-questao input:focus, #corpo-questao select:focus {
  outline: none; border-color: var(--vermelho);
}
#corpo-questao .lacuna { width: auto; display: inline-block; padding: 6px 8px; }
/* Alternativa escrita em lista (uma promessa por linha) mantém as quebras. */
#corpo-questao .linha .crescer { white-space: pre-line; line-height: 1.45; }
.pa-desafio { font-size: 1.1rem; width: 18px; text-align: center; flex: none; }

/* --------------------------- grade de aulas --------------------------- */
.ga-hoje { background: linear-gradient(155deg, #12233F 0%, #1C3761 100%); color: #fff; }
.ga-hoje h2 { color: #fff; }
.ga-hoje-rotulo { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ga-lista { display: grid; gap: 8px; }
.ga-turma {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda);
  border-left: 4px solid var(--azul-marca);
}
.ga-hoje .ga-turma { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.ga-infantil { border-left-color: var(--ouro, #E2B84A); }
.ga-adulto   { border-left-color: var(--vermelho); }
.ga-misto    { border-left-color: var(--verde); }
.ga-hora { font-weight: 900; font-size: 1.02rem; line-height: 1.1; min-width: 56px; }
.ga-hora i { display: block; font-style: normal; font-weight: 600; font-size: .78rem; opacity: .65; }
.ga-quem { flex: 1; min-width: 0; }
.ga-quem b { display: block; font-size: .92rem; }
.ga-quem span { font-size: .78rem; opacity: .7; }
.ga-sua { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--verde); color: #fff; border-radius: 999px; padding: 3px 9px; }
.ga-outra { opacity: .62; }
.ga-dia { padding: 12px 14px; }
.ga-dia-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ga-dia-nome { font-weight: 800; }
.ga-dia-hoje { border-color: var(--vermelho); }

/* --------------- questionários que pedem atenção --------------- */
.atencao-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ------------------ passaporte no Início do aluno ------------------ */
.passaporte-inicio { cursor: pointer; }
.pi-faltam { margin: 10px 0 0; padding-left: 18px; font-size: .85rem; color: var(--texto-2);
  line-height: 1.5; }
.pi-link { margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--vermelho); }

/* ---------------------------- a comemoração ---------------------------- */
.festa-fundo {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(10, 20, 38, .72); padding: 18px; animation: festa-entra .25s ease;
}
.festa {
  position: relative; overflow: hidden; width: min(100%, 420px); text-align: center;
  background: linear-gradient(170deg, #FFF9E8 0%, var(--superficie) 55%);
  border: 2px solid #E2B84A; border-radius: 22px; padding: 22px 18px 18px;
  box-shadow: 0 24px 60px rgba(10,20,38,.45);
}
.festa-rotulo { font-size: .8rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: #A67C00; }
.festa-selo { display: grid; place-items: center; margin: 10px 0 4px;
  animation: festa-selo .5s cubic-bezier(.2,1.5,.4,1); }
.festa-selo .selo-par { filter: drop-shadow(0 12px 22px rgba(18,35,63,.3)); }
.festa-titulo { margin: 6px 0 2px; font-size: 1.35rem; }
.festa-texto { font-size: .9rem; color: var(--texto-2); margin: 6px 4px 10px; line-height: 1.45; }
.festa-fatos { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  font-size: .82rem; color: var(--texto-3); margin-bottom: 14px; }
.festa-nota { font-size: .76rem; color: var(--texto-3); margin-top: 10px; }
/* Papel picado: uns quadradinhos caindo, feitos só de CSS. */
.festa-papel { position: absolute; inset: 0; pointer-events: none; }
.festa-papel i {
  position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px;
  left: calc(var(--i) * 7.2%);
  background: hsl(calc(var(--i) * 47), 85%, 58%);
  animation: festa-cai 2.6s linear infinite;
  animation-delay: calc(var(--i) * .18s);
  opacity: .9;
}
@keyframes festa-cai {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translateY(420px) rotate(420deg); opacity: 0; }
}
@keyframes festa-entra { from { opacity: 0; } }
@keyframes festa-selo { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .festa-papel { display: none; }
  .festa-selo { animation: none; }
}
.btn-presenca.btn-equipe[aria-pressed="true"] { background: var(--azul-marca); color: #fff;
  border-color: var(--azul-marca); }

/* ---------------------- avisos no celular ---------------------- */
.aviso-celular { font-size: .85rem; color: var(--texto-2); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; line-height: 1.45; }

/* ------------------ convite para ligar os avisos ------------------ */
.convite-aviso {
  background: var(--superficie); border: 1px solid var(--azul-marca);
  border-left: 4px solid var(--azul-marca); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 14px;
}
.ca-topo { display: flex; gap: 12px; align-items: flex-start; }
.ca-sino { font-size: 1.5rem; line-height: 1.2; }
.convite-aviso b { font-size: .98rem; }
.convite-aviso p { margin: 4px 0 0; font-size: .86rem; color: var(--texto-2); line-height: 1.45; }
.ca-passos { margin: 12px 0 4px; padding-left: 20px; font-size: .86rem; color: var(--texto-2);
  line-height: 1.5; }
.convite-aviso .botoes { margin-top: 12px; }
.convite-aviso.pronto { border-color: var(--verde); border-left-color: var(--verde);
  font-size: .9rem; }

/* ---------------------- equipes de competição ---------------------- */
.equipes-contas { display: flex; gap: 18px; }
.equipes-contas div { display: flex; flex-direction: column; }
.equipes-contas b { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.equipes-contas span { font-size: .76rem; color: var(--texto-2); }
.equipe-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--borda); }
.equipe-linha:first-child { border-top: 0; }
.equipe-botoes { display: flex; gap: 6px; margin-left: auto; }
.equipe-botoes .btn { margin: 0; white-space: nowrap; }
@media (max-width: 430px) {
  .equipe-botoes { width: 100%; margin-left: 0; }
  .equipe-botoes .btn { flex: 1; }
}

/* ------------------------- central de avisos ------------------------ */
.novidade { align-items: flex-start; }
.nv-icone { font-size: 1.3rem; line-height: 1.4; }
.nv-corpo { font-size: .85rem; color: var(--texto-2); margin: 2px 0 4px; line-height: 1.4;
  white-space: pre-line; }
.novidade.nova { border-left: 3px solid var(--vermelho); padding-left: 9px; }
.novidade.nova .nome::after { content: "novo"; font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; background: var(--vermelho); color: #fff;
  border-radius: 999px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; }

/* -------------------- bancada do professor -------------------- */
.bancada { border-color: var(--azul-marca); }
.bancada-topo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.bancada-topo span { font-size: 1.5rem; }
.bancada-topo b { font-size: 1rem; }
.bancada-topo p { margin: 2px 0 0; font-size: .82rem; color: var(--texto-2); }
.novidades-atalho { border-color: var(--azul-marca); }