/* Telas do app BJJ VIA reproduzidas em HTML (refeitas em 20/10/2026 a partir do
   código do app). Medidas, cores e textos vêm de: src/ui/tema.ts (tokens),
   via.tsx (ViaCard e aba), padrao.tsx (Trilho, Rotulo, LinhaPessoa, ItemMenu),
   componentes.tsx (Texto, Botao, Campo), CartaoAula.tsx, Avatar.tsx,
   PontasFaixas.tsx e (abas)/_layout.tsx (barra de abas). Tela de iPhone em pt:
   390 × 844. --ac é a cor de destaque (faixa do aluno; azul do logo na equipe). */

.phone-fit { position:relative; width:100%; height:100%; min-height:0; }
.phone-fit > .phone { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--s,1)); transform-origin:center; }

.phone {
  --ac:#A06BF2; --ac-txt:#FFFFFF; --fundo:#0B0D0F; --sup:#121518; --supA:#1A1F23; --borda:#2A3035;
  --texto:#F5F5F7; --suave:#9A9AA2; --div:#262B30; --ok:#3DDC84; --perigo:#FF6B6B;
  position:relative; width:390px; height:844px; overflow:hidden; border-radius:56px; background:var(--fundo); color:var(--texto);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif; font-size:16px; line-height:1.5;
  letter-spacing:-.011em; text-align:left; -webkit-font-smoothing:antialiased;
  box-shadow:0 0 0 9px #17191c,0 0 0 10.5px #ffffff30,0 40px 90px #000d,0 0 60px color-mix(in srgb,var(--ac) 22%,transparent);
}
.phone * { box-sizing:border-box; }
.phone [hidden] { display:none !important; }
:where(.phone,.mini) :where(b,strong) { font-weight:inherit; } /* sem peso zero de especificidade, as classes de título perdiam o negrito */
.phone p { margin:0; }

/* Ícones (mesma fonte Ionicons do app). */
.phone .ion { font-size:var(--t,22px); }

/* Barra de status, ilha e cabeçalho nativo do iOS (Voltar em cápsula, título no meio). */
.a-ilha { position:absolute; z-index:9; top:11px; left:50%; width:124px; height:36px; border-radius:20px; background:#000; transform:translateX(-50%); }
.a-sb { position:relative; z-index:3; display:flex; height:54px; align-items:center; justify-content:space-between; padding:6px 30px 0 46px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.a-sb-dir { display:flex; align-items:center; gap:7px; }
.a-sinal { display:flex; align-items:flex-end; gap:2px; height:12px; }
.a-sinal i { display:block; width:3px; border-radius:1px; background:#fff; }
.a-sinal i:nth-child(1) { height:4px; } .a-sinal i:nth-child(2) { height:6.5px; } .a-sinal i:nth-child(3) { height:9px; } .a-sinal i:nth-child(4) { height:12px; }
.a-bat { position:relative; width:27px; height:13px; border:1.5px solid #ffffff8c; border-radius:4px; }
.a-bat::before { position:absolute; inset:1.5px 4px 1.5px 1.5px; border-radius:1.5px; background:#fff; content:""; }
.a-bat::after { position:absolute; top:3px; right:-4px; width:2px; height:4px; border-radius:0 1px 1px 0; background:#ffffff8c; content:""; }
.a-hd { position:relative; z-index:3; display:grid; height:56px; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:0 16px; }
.a-hd-t { overflow:hidden; font-size:17px; font-weight:600; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.a-voltar { display:inline-flex; height:44px; align-items:center; gap:1px; justify-self:start; padding:0 16px 0 9px; border:1px solid #ffffff24; border-radius:22px; background:#ffffff12; font-size:17px; }
.a-voltar .ion { --t:26px; }
.a-hd-btn { display:grid; width:44px; height:44px; place-items:center; justify-self:end; border:1px solid #ffffff24; border-radius:50%; background:#ffffff12; }
.a-hd-btn .ion { --t:22px; }

/* Tela (componentes.tsx: Tela) */
.a-tela { position:relative; display:flex; flex-direction:column; gap:16px; padding:24px 16px 110px; }
.a-tela--sem { padding-top:14px; }
.a-titulo { font-size:30px; font-weight:800; line-height:37px; letter-spacing:-.7px; }
.a-subtitulo { font-size:18px; font-weight:700; line-height:25px; letter-spacing:-.25px; }
.a-corpo { font-size:16px; line-height:24px; }
.a-suave { color:var(--suave); font-size:14px; line-height:21px; }
.a-rotulo { color:var(--suave); font-size:11px; font-weight:700; line-height:14px; letter-spacing:.8px; text-transform:uppercase; }
.a-centro { text-align:center; }
.a-dest { color:var(--ac); }

/* ViaCard: degradê, cantos 3/22 (superior direito e inferior esquerdo redondos), borda fina dupla e aba opcional. */
.a-card { position:relative; display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid #ffffff29; border-radius:3px 22px 3px 22px;
  background:linear-gradient(135deg,#232327,#16191D); box-shadow:inset 0 0 0 1px #0000008c; }
.a-card.aba-on { padding-top:26px; }
.a-card.redondo { border-radius:22px; }
.a-card.cima { border-radius:22px 22px 3px 3px; }
.a-card.quadrado { border-radius:3px; }
.a-card.baixo { border-radius:3px 3px 22px 22px; }
.a-card.marcada { border-color:var(--ac); background:linear-gradient(color-mix(in srgb,var(--ac) 22%,transparent),color-mix(in srgb,var(--ac) 22%,transparent)),linear-gradient(135deg,#232327,#16191D); box-shadow:none; }
.a-card.perigo { border-color:var(--perigo); box-shadow:none; }
.a-aba { position:absolute; z-index:2; top:-1px; right:-1px; display:flex; min-width:38px; height:32px; align-items:center; justify-content:center; gap:4px; padding:0 10px;
  border-radius:0 22px 0 12px; background:var(--ac); color:var(--ac-txt); }
.a-aba .ion { --t:17px; }
.a-aba svg { display:block; width:24px; height:auto; overflow:visible; }

/* Botões (componentes.tsx: Botao). */
.a-btn { display:grid; min-height:54px; place-items:center; padding:0 16px; border:1px solid var(--ac); border-radius:16px; background:var(--ac); color:#fff; font-size:15px; font-weight:700; letter-spacing:.1px; text-align:center; line-height:1.25; }
.a-btn.sec { border-color:var(--borda); background:transparent; color:var(--texto); }

/* Avatar: anel na cor da faixa, iniciais quando não há foto, selo ★ perto do grau. */
.a-av { --s:48px; position:relative; display:grid; flex:none; width:var(--s); height:var(--s); place-items:center; border:2px solid var(--fx,#6B7280); border-radius:50%;
  background:var(--supA); color:var(--texto); font-size:16px; line-height:1; }
.a-av.g { font-size:30px; font-weight:800; letter-spacing:-.7px; }
.a-av.perto::after { position:absolute; right:calc(var(--e) * -.18); bottom:calc(var(--e) * -.18); display:grid; width:var(--e); height:var(--e); place-items:center; border:2px solid var(--fundo);
  border-radius:50%; background:var(--ac); color:var(--ac-txt); font-size:calc(var(--e) * .6); font-weight:800; line-height:1; content:"★"; }

/* Trilho (sub-abas e segmentado). */
.a-trilho { display:flex; padding:4px; border:1px solid var(--borda); border-radius:999px; background:var(--sup); }
.a-trilho > span { display:flex; flex:1; height:36px; align-items:center; justify-content:center; gap:6px; padding:0 4px; border-radius:999px; color:var(--suave); font-size:14px; font-weight:700; white-space:nowrap; }
.a-trilho.baixo > span { height:32px; font-size:13px; }
.a-trilho > span.on { background:color-mix(in srgb,var(--ac) 20%,transparent); box-shadow:inset 0 0 0 1px var(--ac); color:var(--texto); }
.a-trilho .n { display:grid; min-width:19px; height:18px; place-items:center; padding:0 5px; border-radius:999px; background:var(--supA); color:var(--suave); font-size:11px; }
.a-trilho .on .n { background:var(--ac); color:var(--ac-txt); }

/* Linha de pessoa e item de menu. */
.a-lp { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--div); background:var(--fundo); }
.a-lp.sem-risco { border-bottom:0; }
.a-lp-t { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.a-lp-t > b { overflow:hidden; font-size:16px; line-height:24px; text-overflow:ellipsis; white-space:nowrap; }
.a-lp-t > b.forte { font-weight:700; }
.a-lp-t > small { color:var(--suave); font-size:14px; line-height:21px; }
.a-chev { --t:18px; color:var(--suave); }
.a-item { flex-direction:row; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px; }
.a-item > .ion { --t:22px; }
.a-item > span { flex:1; font-size:16px; line-height:24px; }
.a-cont { display:flex; align-items:center; gap:8px; }
.a-cont > i { display:grid; min-width:28px; height:24px; place-items:center; padding:0 8px; border-radius:12px; color:var(--suave); font-size:15px; font-style:normal; font-weight:800; }
.a-cont > i.forte { background:var(--ac); color:var(--ac-txt); }
.a-cont > i.perigo { background:var(--perigo); color:#fff; }
.a-etq { padding:4px 10px; border:1px solid var(--c); border-radius:12px; background:color-mix(in srgb,var(--c) 15%,transparent); color:var(--c); font-size:12px; font-weight:800; }

/* Barra de abas (cápsula de 360 com a moldura no degradê das faixas, sem o preto). */
.a-tab { position:absolute; z-index:5; bottom:26px; left:50%; width:360px; padding:1.5px; border-radius:999px; background:linear-gradient(90deg,#F2F2F4,#2F6BFF,#8B3FE4,#9A6338,#C62828); transform:translateX(-50%); }
.a-tab > div { display:flex; padding:8px 10px; border-radius:999px; background:var(--sup); }
.a-tab span { position:relative; display:grid; flex:1; height:36px; place-items:center; color:var(--suave); }
.a-tab span.on { color:var(--ac); }
.a-tab .ion { --t:26px; }
.a-tab em { position:absolute; top:-2px; left:calc(50% + 4px); display:grid; min-width:16px; height:16px; place-items:center; padding:0 4px; border-radius:8px; background:var(--perigo); color:#fff; font-size:10px; font-style:normal; font-weight:800; }
.a-home { position:absolute; z-index:6; bottom:8px; left:50%; width:134px; height:5px; border-radius:3px; background:#fff; transform:translateX(-50%); }

/* Agenda (telas/Agenda.tsx): faixa de dias da semana. */
.a-dias { display:flex; justify-content:space-between; }
.a-dias > span { display:flex; width:44px; flex-direction:column; align-items:center; gap:4px; }
.a-dias small { color:var(--suave); font-size:14px; line-height:21px; }
.a-dias i { display:grid; width:40px; height:40px; place-items:center; border-radius:20px; font-size:16px; font-style:normal; }
.a-dias .pass i { color:var(--suave); }
.a-dias .hoje i { box-shadow:inset 0 0 0 1px var(--ac); }
.a-dias .on i { background:var(--ac); box-shadow:none; color:var(--ac-txt); }
.a-dias b { width:6px; height:6px; border-radius:3px; }
.a-dias .tem b { background:var(--ac); }

/* Cartão da aula (CartaoAula.tsx). */
.a-aula { gap:8px; }
.a-aula-topo { display:flex; gap:12px; margin-top:-10px; }
.a-hora { display:flex; min-width:58px; flex-direction:column; align-items:flex-start; }
.a-hora > b { color:var(--ac); font-size:22px; font-weight:800; letter-spacing:-.5px; line-height:1.25; }
.a-hora > small { color:var(--suave); font-size:13px; font-weight:600; line-height:1.3; }
.a-aula-nome { display:flex; flex:1; flex-direction:column; gap:4px; padding-top:2px; min-width:0; }
.a-aula-nome > b { font-size:17px; font-weight:700; line-height:1.3; }
.a-aula .a-av { align-self:center; margin-right:40px; }
.a-infos { display:flex; gap:8px; }
.a-info { display:flex; flex:1; flex-direction:column; align-items:center; gap:2px; padding:8px 0; border:1px solid #ffffff40; border-radius:12px; background:var(--supA); }
.a-info > small { color:var(--suave); font-size:14px; line-height:21px; }
.a-info > b { font-size:16px; line-height:24px; }
.a-pontas { display:flex; height:24px; align-items:center; justify-content:center; gap:4.5px; padding:0 4px; }
.a-ponta { display:block; flex:none; width:9px; height:28.8px; border:1px solid #111114; border-radius:1px 1px 2.25px 2.25px;
  background:linear-gradient(180deg,var(--f) 0 58.5%,var(--p,#111) 58.5% 88.3%,var(--f) 88.3%); transform:scale(.84); }

/* Chamada (instrutor/chamada.tsx). */
.a-ch-topo { position:relative; isolation:isolate; display:flex; flex-direction:column; gap:16px; margin:-24px -16px 0; padding:24px 16px 8px; }
.a-ch-topo::before { position:absolute; z-index:-1; top:-110px; right:0; left:0; height:calc(100% + 200px); background:var(--foto) center/cover; opacity:.3; content:""; }
.a-ch-topo::after { position:absolute; z-index:-1; top:-110px; right:0; left:0; height:calc(100% + 200px); background:linear-gradient(180deg,#0B0D0F00 0%,#0B0D0F66 70%,#0B0D0F 100%); content:""; }
.a-ch-topo ~ * { position:relative; } /* a foto do topo desce por trás do começo da lista, sem cobri-la */
.a-ch-aula { display:flex; align-items:center; gap:12px; }
.a-ch-hora { display:flex; flex-direction:column; align-items:flex-start; color:var(--ac); }
.a-ch-hora > b { font-size:20px; font-weight:800; line-height:1.25; }
.a-ch-hora > small { font-size:13px; font-weight:700; }
.a-ch-nome { display:flex; flex:1; flex-direction:column; gap:2px; }
.a-ch-nome > b { font-size:20px; font-weight:800; line-height:1.25; }
.a-ch-prof { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.a-placar { display:flex; gap:8px; }
.a-placar > div { display:flex; flex:1; flex-direction:column; align-items:center; gap:2px; padding:8px 0; border:1px solid #ffffff40; border-radius:14px; background:var(--supA); }
.a-placar > div > span { display:flex; align-items:center; gap:5px; color:var(--c); font-size:20px; font-weight:800; line-height:1.3; }
.a-placar .ion { --t:16px; }
.a-placar small { color:var(--suave); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.a-grau-aviso { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid color-mix(in srgb,var(--ac) 40%,transparent); border-radius:14px; background:color-mix(in srgb,var(--ac) 12%,transparent); }
.a-grau-aviso > b { flex:1; font-size:16px; font-weight:700; line-height:1.35; }
.a-arraste { position:relative; overflow:hidden; }
.a-arraste-fundo { position:absolute; inset:0; display:flex; align-items:center; gap:8px; padding:0 16px; background:var(--ok); color:#fff; font-size:15px; font-weight:800; }
.a-arraste-fundo .ion { --t:22px; }
.a-arraste .a-lp { position:relative; animation:a-arrastar 3.8s ease-in-out infinite; }
@keyframes a-arrastar { 0%,22% { transform:translateX(0); } 45%,72% { transform:translateX(150px); } 90%,100% { transform:translateX(0); } }

/* Painel (telas/PainelAdmin.tsx). */
.a-painel-topo { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; }
.a-logo-vazio { display:grid; width:84px; height:84px; place-items:center; border-radius:19px; background:var(--supA); color:var(--suave); }
.a-logo-vazio .ion { --t:34px; }
.a-alerta { flex-direction:row; align-items:center; gap:12px; }
.a-alerta > .ion { --t:26px; color:var(--perigo); }
.a-alerta > div { display:flex; flex:1; flex-direction:column; gap:2px; }
.a-alerta b { font-size:16px; font-weight:700; line-height:1.35; }

/* Página da aula (aula.tsx). */
.a-aula-foto { position:relative; aspect-ratio:1.2; margin:-24px -16px -16px; background:var(--foto) center/cover; }
.a-aula-foto::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,#00000059 72%,var(--fundo) 100%); content:""; }
.a-aula-foto > b { position:absolute; z-index:1; right:16px; bottom:12px; left:16px; color:#fff; font-size:28px; font-weight:800; line-height:1.2; }
.a-quando { display:flex; align-items:baseline; gap:8px; }
.a-quando > b { color:var(--ac); font-size:28px; font-weight:800; line-height:1.2; }
.a-dias-aula { display:flex; flex-wrap:wrap; gap:8px; }
.a-dias-aula > span { padding:6px 12px; border:1px solid var(--ac); border-radius:999px; background:color-mix(in srgb,var(--ac) 12%,transparent); font-size:13px; font-weight:700; }
.a-local { display:flex; align-items:center; gap:6px; color:var(--suave); font-size:14px; }
.a-local .ion { --t:16px; }
.a-grade3 { display:flex; gap:8px; }
.a-menu { flex:1; height:100px; justify-content:flex-start; gap:8px; padding:8px 12px 12px; }
.a-menu > small { margin-right:36px; color:var(--suave); font-size:11px; font-weight:700; line-height:14px; letter-spacing:.6px; text-transform:uppercase; }
.a-menu > b { font-size:22px; font-weight:800; line-height:1.2; }
.a-menu .a-pontas { justify-content:flex-start; padding:0; }

/* Regras de graduação (admin/graduacao.tsx). */
.a-seletor,.a-campo { display:flex; min-height:54px; align-items:center; padding:0 12px; border:1px solid var(--borda); border-radius:15px; background:var(--sup); font-size:16px; }
.a-seletor > span { flex:1; }
.a-faixa-reg { display:flex; align-items:center; gap:12px; }
.a-faixa-bar { position:relative; display:flex; width:120px; height:18px; overflow:hidden; border:1px solid #ffffff24; border-radius:6px; background:var(--f); }
.a-faixa-bar::before { position:absolute; top:4px; right:0; left:0; height:1px; background:#0000001f; box-shadow:0 4px 0 #0000001f,0 8px 0 #0000001f; content:""; }
.a-faixa-bar > i { position:absolute; top:0; right:12.6px; bottom:0; width:46.8px; background:var(--p,#141414); }
.a-col2 { display:flex; gap:12px; }
.a-col2 > div { display:flex; flex:1; flex-direction:column; gap:4px; }
.a-col2 .a-valor { display:flex; min-height:54px; align-items:center; }

/* Perfil "Eu" ((abas)/perfil.tsx). */
.a-eu-topo { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.a-ponta-cima { position:absolute; top:0; left:-56px; width:160px; transform:rotate(-8deg); pointer-events:none; }
.a-eu-nome { font-size:30px; font-weight:800; line-height:37px; letter-spacing:-.7px; }
.a-faixa-eu { position:relative; width:358px; transform:translateX(-25px); }
.a-faixa-eu img { display:block; width:100%; height:auto; }
.a-faixa-eu .graus { position:absolute; top:38%; left:75.2%; display:flex; flex-direction:row-reverse; gap:6%; width:21%; height:47%; padding-right:9%; transform:rotate(2.5deg); }
.a-faixa-eu .graus i { display:block; width:8%; height:100%; border-radius:1px; background:#F5F5F7; box-shadow:0 0 2px #0008; }
.a-cart3 { display:flex; gap:8px; }
.a-cart3 > .a-card { flex:1; min-height:104px; gap:8px; padding:10px 12px 12px; }
.a-cart3 small { min-height:28px; margin-right:36px; color:var(--suave); font-size:11px; font-weight:700; line-height:14px; letter-spacing:.6px; text-align:center; text-transform:uppercase; white-space:nowrap; }
.a-cart3 b { font-size:19px; font-weight:800; text-align:center; text-transform:uppercase; }
.a-linha-tit { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.a-exame { position:relative; height:26px; }
.a-exame-barra { position:absolute; top:4px; right:0; left:0; height:18px; overflow:hidden; border-radius:4px; background:linear-gradient(90deg,var(--de) 0%,var(--de) 85%,var(--para) 95%,var(--para) 100%); }
.a-exame-barra > i { position:absolute; top:0; bottom:0; left:80%; display:flex; width:15%; justify-content:space-evenly; padding:0 3px; background:var(--tarja,#111114); }
.a-exame-barra > i > u { display:block; width:3px; background:transparent; }
.a-exame-barra > i > u.on { background:#F4F4F4; }
.a-exame-barra > s { position:absolute; top:0; bottom:0; left:0; width:var(--pct); background:linear-gradient(180deg,#ffffff73 0%,#ffffff14 55%,#ffffff2e 100%); }
.a-exame > em { position:absolute; top:0; left:var(--pct); width:6px; height:26px; margin-left:-3px; border-radius:3px; background:#fff; box-shadow:0 1px 2px #0008; }
.a-jornada { display:flex; flex-direction:column; }
.a-marco { display:flex; gap:12px; }
.a-marco > span { display:flex; width:14px; flex-direction:column; align-items:center; }
.a-marco > span > i { display:block; width:14px; height:14px; margin-top:4px; border:1.5px solid #ffffff59; border-radius:7px; background:var(--f); }
.a-marco.grau > span > i { width:10px; height:10px; border-color:#F4F4F4; }
.a-marco > span > u { display:block; width:2px; flex:1; margin:2px 0; background:#ffffff1f; }
.a-marco > div { display:flex; flex:1; flex-direction:column; padding-bottom:12px; }
.a-marco:last-child > div { padding-bottom:0; }
.a-marco b { font-size:15px; font-weight:700; line-height:1.35; }
.a-marco.grau b { font-weight:500; }
.a-marco small { color:var(--suave); font-size:12px; }
.a-camp { display:flex; align-items:center; gap:12px; padding:4px 0; border-top:1px solid var(--div); }
.a-camp:first-of-type { border-top:0; }
.a-camp > div { display:flex; flex:1; flex-direction:column; gap:2px; }
.a-camp > div > b { font-size:15px; font-weight:700; line-height:1.3; }
.a-camp > div > small { color:var(--suave); font-size:12px; }
.a-medalhas { display:flex; gap:12px; }
.a-medalhas > span { display:flex; align-items:center; gap:2px; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }

/* Treinos: semana e ano. */
.a-semana { display:flex; justify-content:space-between; }
.a-semana > span { display:flex; flex:1; flex-direction:column; align-items:center; gap:4px; }
.a-semana > span > i { display:grid; width:30px; height:30px; place-items:center; border:2px solid var(--borda); border-radius:15px; color:var(--ok); }
.a-semana > span > i::before { width:4px; height:4px; border-radius:2px; background:var(--suave); content:""; }
.a-semana > span.fut > i::before { background:var(--borda); }
.a-semana > span.foi > i { border-color:var(--ok); background:color-mix(in srgb,var(--ok) 20%,transparent); }
.a-semana > span.foi > i::before,.a-semana > span.hoje > i::before { display:none; }
.a-semana > span.hoje > i { border-color:var(--ac); background:color-mix(in srgb,var(--ac) 20%,transparent); color:var(--ac); }
.a-semana .ion { --t:16px; }
.a-semana small { color:var(--suave); font-size:12px; font-weight:500; line-height:1.3; }
.a-semana small + small { font-size:11px; font-weight:400; }
.a-semana .hoje small { color:var(--texto); font-weight:800; }
.a-semana .hoje small + small { font-weight:700; }
.a-ano { display:flex; height:110px; align-items:flex-end; gap:2px; border-bottom:1px solid var(--borda); }
.a-ano > i { display:flex; height:100%; flex:1; align-items:flex-end; justify-content:center; }
.a-ano > i::before { width:62%; height:var(--h); border-radius:4px 4px 0 0; background:var(--ac); opacity:.55; content:""; }
.a-ano > i.sel::before { opacity:1; }
.a-ano > i.fut::before { background:var(--borda); }
.a-meses { display:flex; gap:2px; }
.a-meses > i { flex:1; color:var(--suave); font-size:10px; font-style:normal; font-weight:500; text-align:center; }
.a-meses > i.sel { color:var(--texto); font-weight:800; }

/* Ranking (ranking.tsx). */
.a-filtros { display:flex; height:38px; align-items:center; gap:6px; padding:0 14px; border:1px solid var(--borda); border-radius:19px; font-size:16px; font-weight:700; }
.a-filtros .ion { --t:18px; color:var(--ac); }
.a-mes-nav { display:flex; align-items:center; justify-content:space-between; padding:8px; border:1px solid #ffffff40; border-radius:18px; background:var(--supA); }
.a-mes-nav > .ion { --t:22px; padding:6px; color:var(--ac); }
.a-mes-nav > .ion.off { opacity:.25; }
.a-mes-nav > div { display:flex; flex-direction:column; align-items:center; }
.a-mes-nav small { color:var(--ac); font-size:12px; font-weight:700; }
.a-podio { flex-direction:row; align-items:flex-end; justify-content:center; gap:8px; padding-top:22px; }
.a-podio > div { display:flex; flex:1; flex-direction:column; align-items:center; gap:6px; }
.a-podio > div.p1 { padding-bottom:12px; }
.a-podio .ion { --t:20px; }
.a-podio .a-av { --s:64px; }
.a-podio .p1 .a-av { --s:84px; }
.a-podio .pos { position:absolute; bottom:-8px; left:50%; display:grid; min-width:26px; height:26px; place-items:center; padding:0 6px; border:2px solid #16191D; border-radius:13px; background:var(--med); color:#111114; font-size:13px; font-weight:900; transform:translateX(-50%); }
.a-podio .wrap { position:relative; }
.a-podio b { margin-top:6px; font-size:13px; font-weight:800; line-height:1.25; text-align:center; }
.a-podio .p1 b { font-size:15px; }
.a-podio small { color:var(--suave); font-size:12px; font-weight:700; }
.a-rk { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--div); }
.a-rk > em { width:34px; color:var(--suave); font-size:17px; font-style:normal; font-weight:800; text-align:center; }
.a-rk > div { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.a-rk > div > b { font-size:15px; font-weight:600; line-height:1.35; }
.a-rk > div > small { color:var(--suave); font-size:14px; }
.a-rk > span:last-child { display:flex; min-width:44px; flex-direction:column; align-items:flex-end; }
.a-rk > span:last-child > b { font-size:20px; font-weight:800; line-height:1.2; }
.a-rk > span:last-child > small { color:var(--suave); font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.a-rk.eu { margin:8px 0; padding:12px 16px; border:1px solid var(--ac); border-radius:22px; background:color-mix(in srgb,var(--ac) 12%,#1a1c20); }
.a-rk.eu > em,.a-rk.eu > span:last-child > b { color:var(--ac); }
.a-rk.eu > div > b { font-weight:800; }

/* Notificações (telas/AvisosAluno.tsx). */
.a-aviso { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--div); }
.a-aviso > div { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.a-aviso-topo { display:flex; justify-content:space-between; gap:8px; }
.a-aviso-topo > span { display:flex; flex-direction:column; align-items:flex-end; color:var(--suave); font-size:13px; font-weight:600; line-height:1.2; }
.a-aviso-topo > span > small { font-size:11px; font-weight:400; }

/* Medalha do VIA (MedalhaVia.tsx): placa quadrada de metal, disco escuro com o logo e a fita azul em V. */
.medalha { --s:30px; position:relative; display:block; flex:none; width:var(--s); height:calc(var(--s) * 1.3); }
.medalha .fita { position:absolute; top:0; right:0; left:0; height:calc(var(--s) * .55); }
.medalha .fita::before,.medalha .fita::after { position:absolute; top:0; width:calc(var(--s) * .26); height:100%; border-radius:1px; background:linear-gradient(90deg,#2F6BFF 0 39%,#ffffffd9 39% 61%,#2F6BFF 61%); content:""; transform-origin:top center; }
.medalha .fita::before { left:calc(50% - var(--s) * .13 - var(--s) * .17); transform:rotate(18deg); }
.medalha .fita::after { left:calc(50% - var(--s) * .13 + var(--s) * .17); transform:rotate(-18deg); }
.medalha .placa { position:absolute; top:calc(var(--s) * .3); left:0; display:grid; width:var(--s); height:var(--s); place-items:center; border-radius:calc(var(--s) * .16); background:linear-gradient(135deg,var(--m1) 0%,var(--m2) 35%,var(--m3) 75%,var(--m4) 100%); box-shadow:0 calc(var(--s) * .03) calc(var(--s) * .06) #00000073; }
.medalha .placa::before,.medalha .placa::after { position:absolute; content:""; }
.medalha .placa::before { inset:calc(var(--s) * .07); border:max(1px,calc(var(--s) * .03)) solid #ffffff73; border-radius:calc(var(--s) * .11); }
.medalha .placa::after { inset:calc(var(--s) * .1); border:max(.5px,calc(var(--s) * .015)) solid #00000040; border-radius:calc(var(--s) * .09); }
.medalha .disco { position:relative; z-index:1; width:62%; height:62%; border:max(1px,calc(var(--s) * .025)) solid var(--m3); border-radius:50%; background:#111114 url(assets/web/marca-v.webp) center/80% auto no-repeat; }
.medalha--ouro { --m1:#FFF2B0; --m2:#D9B23C; --m3:#9C7414; --m4:#F5D66B; }
.medalha--prata { --m1:#FFFFFF; --m2:#C9CDD2; --m3:#7E848B; --m4:#E9ECEF; }
.medalha--bronze { --m1:#F6C79A; --m2:#C27A3C; --m3:#7A4419; --m4:#E3A06A; }

/* Mini telas nos cartões flutuantes das cenas Kids e Adulto: o mesmo cartão do app, menor. */
.mini { --ac:#A06BF2; --ac-txt:#FFFFFF; --fundo:#0B0D0F; --sup:#121518; --supA:#1A1F23; --borda:#2A3035; --texto:#F5F5F7; --suave:#9A9AA2; --div:#262B30; --ok:#3DDC84; --perigo:#FF6B6B;
  display:flex; flex-direction:column; gap:12px; width:358px; color:var(--texto); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.5; letter-spacing:-.011em; zoom:var(--z,.72); }
.mini .ion { font-size:var(--t,22px); }
.mini p { margin:0; }

@media (prefers-reduced-motion:reduce) { .a-arraste .a-lp { animation:none; transform:translateX(150px); } }