/* =====================================================================
   METAVIA - DESIGN SYSTEM v8 (direcao D "Trilha Clean", identidade oficial)
   Arquivo unico para a implementacao. Dono: karen-ops. 2026-10-26.
   Origem das cores: logo Metavia (wordmark verde trilha #087F55 + losango ambar #F5A524).
   Cor forte so dessas duas; o resto e neutro. Fontes locais (OFL), sem CDN.
   Icones: design/sistema/icones.svg (grade 24, traco 1.75, ponta redonda), usados com
   <svg class="ic"><use href="icones.svg#i-NOME"/></svg> (em file:// colar o sprite inline).
   Estados: cada componente tem :hover/:focus-visible/:active/:disabled e as classes
   espelho .is-hover/.is-foco/.is-ativo/.is-desat/.is-erro (so para a galeria e prints).
   ===================================================================== */

@font-face{font-family:'Bricolage Grotesque';src:url('../fontes/BricolageGrotesque-Variable.woff2') format('woff2');font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fontes/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- 1. TOKENS ---------- */
:root{
  /* marca (da logo) */
  --marca-1:#087F55;        /* verde trilha do wordmark: primario, ativo, hoje, estudou */
  --marca-1-forte:#06603F;  /* verde trilha escurecido: hover do primario, texto verde sobre claro */
  --marca-1-suave:#E6F4EC;  /* verde trilha bem claro: secundario, item ativo, fundo de hoje */
  --marca-1-suave-2:#D3EBDD;/* verde trilha claro: hover do secundario */
  --marca-2:#F5A524;        /* ambar do losango: SO conquista (nivel, XP, moedas, sequencia) */
  --marca-2-texto:#8F5A00;  /* ambar escurecido: texto/icone de conquista sobre claro */
  --marca-2-suave:#FEF5E3;  /* ambar bem claro: trilho do XP, fundo de icone de conquista */
  --xp:#B86E00;             /* ambar um tom abaixo: fim do degrade da barra de XP */
  --escuro:#0B2A1E;         /* verde trilha bem escuro: fundo de toast e tooltip */
  /* perigo (carmim, afastado do ambar) */
  --perigo:#C62A2F; --perigo-forte:#A11F24; --perigo-suave:#FDEBEC;
  /* neutros */
  --fundo:#F5F7F6; --superficie:#FFFFFF; --tinta:#121A16; --tinta-2:#55605A;
  --linha:#E4E9E6; --linha-forte:#C9D1CC; /* linha-forte: contorno de campo (3:1 nao exigido, mas legivel) */
  --desat-fundo:#EEF1EF; --desat-texto:#6F7873; /* desativado: isento de AA (WCAG 1.4.3), mas escurecido para ~4:1 e continuar legivel (v8, vision achou apagado) */
  --foco:#087F55; --veu:rgba(11,42,30,.48);   /* veu: fundo atras do modal */
  /* codigos visuais (sempre cor + icone + texto, nunca so cor) */
  --cod-ok:#06603F; --cod-ok-suave:#E6F4EC;           /* cumprida / acima da meta: check */
  --cod-atraso:#C62A2F; --cod-atraso-suave:#FDEBEC;   /* atrasada / abaixo da meta: relogio */
  --cod-perdido:#7D4F55; --cod-perdido-suave:#F3ECEC; /* dia perdido: X em circulo rosado neutro */
  --cod-alta:#C62A2F; --cod-alta-suave:#FDEBEC;       /* gravidade alta: pilula carmim CHEIA + triangulo */
  --cod-media:#A11F24; --cod-media-suave:#FDEBEC;     /* gravidade media: pilula clara + losango */
  --cod-baixa:#4A5866; --cod-baixa-suave:#EDF1F4;     /* gravidade baixa: ardosia + circulo i */
  --cod-folga:#5B6470; --cod-folga-suave:#F1F3F5;     /* folga: UNICO tracejado do sistema + lua */
  --cod-estudo:#2457C5; --cod-estudo-suave:#EAF0FC;   /* tipo Estudo: livro */
  --cod-resumo:#A3326A; --cod-resumo-suave:#FBEBF3;   /* tipo Resumo: folha pautada */
  --cod-revisao:#6B3FD4; --cod-revisao-suave:#F1ECFD; /* tipo Revisao: setas em ciclo */
  --cod-exercicio:#0A6C8C; --cod-exercicio-suave:#E4F3F8; /* tipo Exercicio: lapis */
  --cod-programada:#4B525C; --cod-programada-suave:#EEF0F2; /* programada: relogio cinza */
  --cod-hoje:var(--marca-1);
  /* tipografia */
  --fonte-titulo:'Bricolage Grotesque',system-ui,sans-serif;
  --fonte-texto:'Inter',system-ui,sans-serif;
  --peso-titulo:650;
  --t-display:44px; --t-h1:30px; --t-h2:20px; --t-h3:17px; --t-corpo:16px; --t-peq:14px; --t-micro:12px;
  --lh-titulo:1.1; --lh-corpo:1.55;
  /* espaco (base 4) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px;
  /* grid: 12 col / 1200 / calha 24 no computador; 4 col / calha 16 / margem 16 no celular */
  --grid-max:1200px; --grid-calha:24px; --grid-calha-mob:16px;
  --menu-larg:248px; --menu-recolhido:72px; --topo-alt:72px; --inferior-alt:68px;
  /* forma: nada de canto reto */
  --raio-btn:14px; --raio-campo:12px; --raio-card:22px; --raio-bloco:28px; --raio-chip:999px; --raio-icone:14px; --raio-peq:8px;
  /* sombra suave puxada ao verde; sem borda dura entre areas */
  --sombra-1:0 1px 2px rgba(12,40,28,.04),0 6px 20px rgba(12,40,28,.06);
  --sombra-2:0 2px 6px rgba(12,40,28,.05),0 16px 40px rgba(12,40,28,.10);
  --sombra-3:0 8px 24px rgba(12,40,28,.12),0 32px 72px rgba(12,40,28,.20); /* modal e folha */
  --sombra-btn:0 1px 2px rgba(8,127,85,.18),0 6px 16px rgba(8,127,85,.22);
  --anel-foco:0 0 0 2px var(--superficie),0 0 0 4px var(--foco);
  /* toque e altura */
  --alvo-toque:44px; --alt-btn:46px; --alt-btn-peq:38px; --alt-campo:46px;
  /* movimento */
  --mov-rapido:140ms; --mov-medio:220ms; --mov-lento:360ms; --curva:cubic-bezier(.2,.7,.2,1); --curva-saida:cubic-bezier(.4,0,1,1);
  /* camadas */
  --z-topo:20; --z-inferior:30; --z-pop:40; --z-veu:50; --z-toast:60;
}
@media (prefers-reduced-motion:reduce){:root{--mov-rapido:0ms;--mov-medio:0ms;--mov-lento:0ms}}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font:400 var(--t-corpo)/var(--lh-corpo) var(--fonte-texto);-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
h1,h2,h3,.titulo{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);font-variation-settings:'opsz' 32,'wdth' 96;letter-spacing:-.015em;line-height:var(--lh-titulo);margin:0;color:var(--tinta)}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
p{margin:0}
a{color:var(--marca-1-forte)}
button,input,select,textarea{font:inherit;color:inherit}
/* icone: o traco vem daqui (o sprite nao tem estilo proprio), entao --traco engrossa onde precisa */
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:var(--traco,1.75);stroke-linecap:round;stroke-linejoin:round}
.ic.forte,.dia .ic,.ck .ic,.chip.alta .ic,.inf-item .ic{--traco:2.2}
.dia.estudou .ic,.ck .ic{--traco:2.6}
.num{font-variant-numeric:tabular-nums}
.sub{font-size:var(--t-peq);color:var(--tinta-2)}
.rotulo{font:600 var(--t-micro)/1.3 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:none;box-shadow:var(--anel-foco)}

/* ---------- 3. ESTRUTURA DA TELA ---------- */
/* computador: topo fixo + menu lateral + conteudo (max 1200). celular (<=760): topo compacto + menu inferior */
.app{display:grid;grid-template-columns:var(--menu-larg) minmax(0,1fr);min-height:100vh}
.app-conteudo{min-width:0;padding:var(--e-6) var(--e-6) var(--e-7)}
.app-conteudo>.miolo{max-width:var(--grid-max);margin:0 auto;display:grid;gap:var(--e-5)}
.grade{display:grid;gap:var(--grid-calha)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.g-8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.cabeca-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap}
.cabeca-pagina h1{font-size:var(--t-h1)}
.cabeca-pagina .sub{margin-top:6px}

/* ---------- 4. MENU LATERAL ---------- */
.menu-lateral{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--superficie);box-shadow:1px 0 0 var(--linha);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.menu-lateral .marca{display:flex;align-items:center;height:44px;padding:0 10px;margin-bottom:18px}
.menu-lateral .marca img{height:28px;width:auto;display:block}
.menu-grupo{font:600 11px/1.2 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);padding:16px 12px 6px}
.menu-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--raio-btn);color:var(--tinta-2);font:500 15px/1.2 var(--fonte-texto);text-decoration:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer;transition:background var(--mov-rapido) var(--curva),color var(--mov-rapido) var(--curva)}
.menu-item .ic{width:22px;height:22px}
.menu-item .conta{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--fundo);color:var(--tinta);font:700 12px/22px var(--fonte-texto);text-align:center}
.menu-item .seta{margin-left:auto;width:18px;height:18px;transition:transform var(--mov-medio) var(--curva)}
.menu-item:hover,.menu-item.is-hover{background:var(--fundo);color:var(--tinta)}
.menu-item[aria-current="page"],.menu-item.is-ativo{background:var(--marca-1-suave);color:var(--marca-1-forte);font-weight:650}
.menu-item[aria-current="page"] .conta,.menu-item.is-ativo .conta{background:var(--marca-1);color:#fff}
.menu-item:focus-visible,.menu-item.is-foco{box-shadow:inset 0 0 0 2px var(--foco)}
.menu-item[aria-disabled="true"],.menu-item.is-desat{color:var(--desat-texto);background:transparent;cursor:not-allowed}
.menu-item[aria-expanded="true"] .seta{transform:rotate(180deg)}
.submenu{display:grid;gap:2px;padding:2px 0 6px 46px}
.submenu a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:12px;color:var(--tinta-2);font:500 14px/1.2 var(--fonte-texto);text-decoration:none}
.submenu a:hover{background:var(--fundo);color:var(--tinta)}
.submenu a[aria-current="page"]{color:var(--marca-1-forte);font-weight:650;background:var(--marca-1-suave)}
.menu-rodape{margin-top:auto;padding-top:12px}
/* recolhido: 72 px, so icones, nome em dica ao passar */
.menu-lateral.recolhido{width:var(--menu-recolhido);padding:20px 12px;align-items:center}
.menu-lateral.recolhido .menu-item{width:48px;justify-content:center;padding:0;position:relative}
.menu-lateral.recolhido .menu-item span,.menu-lateral.recolhido .menu-item .seta,.menu-lateral.recolhido .menu-grupo{display:none}
.menu-lateral.recolhido .menu-item .conta{position:absolute;top:2px;right:0;min-width:18px;height:18px;line-height:18px;padding:0 4px;font-size:11px;margin:0}
.dica{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--escuro);color:#fff;font:600 13px/1 var(--fonte-texto);padding:8px 10px;border-radius:10px;white-space:nowrap;box-shadow:var(--sombra-2);pointer-events:none}

/* ---------- 5. CABECALHO (topo) ---------- */
.topo{position:sticky;top:0;z-index:var(--z-topo);display:flex;align-items:center;gap:var(--e-5);height:var(--topo-alt);padding:0 var(--e-6);background:rgba(245,247,246,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topo .marca-mob{display:none}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:var(--e-2)}
.topo-busca{flex:0 1 420px}
/* pilula de nivel e XP (conquista = ambar) */
.nivel-pilula{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px 0 6px;border-radius:var(--raio-chip);background:var(--superficie);box-shadow:var(--sombra-1);text-decoration:none;color:var(--tinta)}
.nivel-pilula .selo-nivel{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--marca-2-suave);color:var(--marca-2-texto);font:800 14px/1 var(--fonte-texto)}
.nivel-pilula .info{display:grid;gap:5px;min-width:150px}
.nivel-pilula .l1{display:flex;justify-content:space-between;gap:10px;font:600 13px/1 var(--fonte-texto)}
.nivel-pilula .l1 small{font:600 12px/1 var(--fonte-texto);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.nivel-pilula .moedas{display:inline-flex;align-items:center;gap:6px;padding-left:12px;margin-left:2px;box-shadow:-1px 0 0 var(--linha);font:700 14px/1 var(--fonte-texto);color:var(--marca-2-texto);font-variant-numeric:tabular-nums}
.nivel-pilula .moedas .ic{width:20px;height:20px}
.nivel-pilula:hover{box-shadow:var(--sombra-2)}

/* ---------- 6. MENU INFERIOR (celular) ---------- */
.menu-inferior{display:none}
.menu-inferior{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-inferior);height:calc(var(--inferior-alt) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);background:var(--superficie);box-shadow:0 -1px 0 var(--linha),0 -8px 24px rgba(12,40,28,.06);grid-template-columns:repeat(5,1fr);align-items:center}
.inf-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;margin:0 2px;border-radius:16px;color:var(--tinta-2);font:600 11.5px/1 var(--fonte-texto);text-decoration:none;transition:color var(--mov-rapido) var(--curva),background var(--mov-rapido) var(--curva)}
.inf-item .ic{width:24px;height:24px}
.inf-item[aria-current="page"],.inf-item.is-ativo{color:var(--marca-1-forte)}
.inf-item[aria-current="page"] .ic,.inf-item.is-ativo .ic{background:var(--marca-1-suave);border-radius:999px;width:48px;height:28px;padding:2px 12px}
.inf-item:active{background:var(--fundo)}
.inf-item:focus-visible{box-shadow:inset 0 0 0 2px var(--foco)}
.inf-item.centro .bolha{width:52px;height:52px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:var(--marca-1);color:#fff;box-shadow:var(--sombra-btn),0 0 0 5px var(--superficie)}
.inf-item.centro .bolha .ic{width:26px;height:26px}
.inf-item.centro{color:var(--marca-1-forte)}

/* ---------- 7. CARDS ---------- */
.card{background:var(--superficie);border-radius:var(--raio-card);box-shadow:var(--sombra-1);padding:var(--e-5)}
.card-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);margin-bottom:var(--e-4);flex-wrap:wrap}
.card-cab h2{font-size:var(--t-h2)}
.card-cab .sub{margin-top:4px}
.card.clicavel{cursor:pointer;transition:box-shadow var(--mov-medio) var(--curva),transform var(--mov-medio) var(--curva)}
.card.clicavel:hover,.card.clicavel.is-hover{box-shadow:var(--sombra-2);transform:translateY(-2px)}
.card.clicavel:focus-visible,.card.clicavel.is-foco{box-shadow:var(--sombra-1),var(--anel-foco)}
.card.destaque{background:linear-gradient(160deg,var(--superficie) 55%,var(--marca-1-suave))}
.card.recuo{background:var(--fundo);box-shadow:none}
/* card de numero (KPI) */
.kpi-card{display:grid;gap:4px;align-content:start}
.kpi-card .kpi-ic{width:40px;height:40px;border-radius:var(--raio-icone);display:grid;place-items:center;background:var(--marca-1-suave);color:var(--marca-1-forte);margin-bottom:8px}
.kpi-card .kpi-ic.conquista{background:var(--marca-2-suave);color:var(--marca-2-texto)}
.kpi-card .kpi-n{font:700 26px/1.1 var(--fonte-texto);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi-card .kpi-n small{font-size:16px;font-weight:600}
.kpi-card .kpi-r{font:600 14px/1.3 var(--fonte-texto);color:var(--tinta)}
.kpi-card .kpi-a{font-size:13px;line-height:1.4;color:var(--tinta-2)}

/* ---------- 8. BOTOES (4 tipos x 4 estados) ---------- */
/* hover escurece 1 tom (primario sobe 1 px com sombra verde); foco = anel verde 2 px com folga branca 2 px;
   desativado = cinza sem sombra; botao texto sem sublinhado (ganha fundo verde-claro). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--alt-btn);padding:0 20px;border-radius:var(--raio-btn);border:0;font:600 15px/1 var(--fonte-texto);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--mov-rapido) var(--curva),color var(--mov-rapido) var(--curva),box-shadow var(--mov-rapido) var(--curva),transform var(--mov-rapido) var(--curva)}
.btn .ic{width:18px;height:18px}
.btn:active,.btn.is-ativo{transform:translateY(0) scale(.98)}
.btn-primario{background:var(--marca-1);color:#fff;box-shadow:0 1px 2px rgba(8,127,85,.16)}
.btn-primario:hover,.btn-primario.is-hover{background:var(--marca-1-forte);box-shadow:var(--sombra-btn);transform:translateY(-1px)}
.btn-secundario{background:var(--marca-1-suave);color:var(--marca-1-forte)}
.btn-secundario:hover,.btn-secundario.is-hover{background:var(--marca-1-suave-2)}
.btn-perigo{background:var(--perigo-suave);color:var(--perigo-forte)}
.btn-perigo:hover,.btn-perigo.is-hover{background:var(--perigo);color:#fff}
.btn-perigo.cheio{background:var(--perigo);color:#fff}
.btn-perigo.cheio:hover,.btn-perigo.cheio.is-hover{background:var(--perigo-forte)}
.btn-texto{background:transparent;color:var(--marca-1-forte);padding:0 12px}
.btn-texto:hover,.btn-texto.is-hover{background:var(--marca-1-suave)}
.btn:focus-visible,.btn.is-foco{outline:none;box-shadow:var(--anel-foco)}
.btn:disabled,.btn.is-desat,.btn[aria-disabled="true"]{background:var(--desat-fundo);color:var(--desat-texto);box-shadow:none;transform:none;cursor:not-allowed}
.btn-texto:disabled,.btn-texto.is-desat{background:transparent}
.btn-peq{height:var(--alt-btn-peq);padding:0 14px;font-size:14px;border-radius:12px}
.btn-bloco{width:100%}
.btn .carregando{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:gira 700ms linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.icone-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--raio-icone);border:0;background:transparent;color:var(--tinta);cursor:pointer;transition:background var(--mov-rapido) var(--curva)}
.icone-btn.fundo{background:var(--superficie);box-shadow:var(--sombra-1)}
.icone-btn:hover,.icone-btn.is-hover{background:var(--marca-1-suave);color:var(--marca-1-forte)}
.icone-btn:focus-visible,.icone-btn.is-foco{box-shadow:var(--anel-foco)}
.icone-btn:disabled,.icone-btn.is-desat{color:var(--desat-texto);background:transparent;cursor:not-allowed}
.icone-btn .ic{width:22px;height:22px}
.badge{position:absolute;top:3px;right:2px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--perigo);color:#fff;font:700 11px/19px var(--fonte-texto);text-align:center;box-shadow:0 0 0 2px var(--superficie)}
.grupo-btn{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- 9. CAMPOS DE FORMULARIO ---------- */
.campo{display:grid;gap:6px;min-width:0}
.campo>label,.campo .rot{font:600 14px/1.3 var(--fonte-texto);color:var(--tinta)}
.campo .ajuda{font-size:13px;line-height:1.4;color:var(--tinta-2)}
.campo .msg-erro{display:flex;gap:6px;align-items:flex-start;font:500 13px/1.4 var(--fonte-texto);color:var(--perigo-forte)}
.campo .msg-erro .ic{width:16px;height:16px;margin-top:1px}
.entrada{position:relative;display:flex;align-items:center}
.entrada>.ic{position:absolute;left:14px;width:20px;height:20px;color:var(--tinta-2);pointer-events:none}
.input,.select{width:100%;height:var(--alt-campo);padding:0 14px;border:0;border-radius:var(--raio-campo);background:var(--superficie);box-shadow:inset 0 0 0 1.5px var(--linha-forte);color:var(--tinta);font:400 16px/1 var(--fonte-texto);transition:box-shadow var(--mov-rapido) var(--curva),background var(--mov-rapido) var(--curva);-webkit-appearance:none;appearance:none}
.entrada>.ic~.input{padding-left:44px}
.entrada .input.com-acao{padding-right:52px}
.entrada .acao{position:absolute;right:1px;top:1px;width:44px;height:44px;border-radius:11px;border:0;background:transparent;display:grid;place-items:center;color:var(--tinta-2);cursor:pointer}
.entrada .acao:hover{color:var(--marca-1-forte);background:var(--marca-1-suave)}
.entrada .acao .ic{width:20px;height:20px}
.input::placeholder{color:#6B746F}
.input:hover,.select:hover,.input.is-hover,.select.is-hover{box-shadow:inset 0 0 0 1.5px var(--tinta-2)}
.input:focus,.select:focus,.input.is-foco,.select.is-foco{outline:none;box-shadow:inset 0 0 0 2px var(--foco),0 0 0 4px var(--marca-1-suave)}
.input:disabled,.select:disabled,.input.is-desat,.select.is-desat{background:var(--desat-fundo);color:var(--desat-texto);box-shadow:none;cursor:not-allowed}
.input[aria-invalid="true"],.select[aria-invalid="true"],.input.is-erro{box-shadow:inset 0 0 0 2px var(--perigo);background:#FFFCFC}
.input[aria-invalid="true"]:focus,.input.is-erro.is-foco{box-shadow:inset 0 0 0 2px var(--perigo),0 0 0 4px var(--perigo-suave)}
.select{padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355605A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px}
.input[type="date"]{padding-right:12px}
.input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;width:20px;height:20px}
.textarea{height:auto;min-height:104px;padding:12px 14px;line-height:1.5;resize:vertical}
.busca .input{border-radius:var(--raio-chip);background:var(--superficie)}
.form-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4) var(--e-5)}

/* ---------- 10. CHECKBOX, RADIO, SWITCH ---------- */
.opcao{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font:500 15px/1.3 var(--fonte-texto);color:var(--tinta)}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.ck,.rd{flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--superficie);box-shadow:inset 0 0 0 1.75px var(--linha-forte);color:#fff;transition:background var(--mov-rapido) var(--curva),box-shadow var(--mov-rapido) var(--curva)}
.ck{border-radius:7px}
.rd{border-radius:50%}
.ck .ic{width:16px;height:16px;opacity:0;stroke-width:2.6}
.opcao:hover .ck,.opcao:hover .rd,.opcao.is-hover .ck,.opcao.is-hover .rd{box-shadow:inset 0 0 0 1.75px var(--marca-1)}
.opcao input:checked+.ck,.ck.on{background:var(--marca-1);box-shadow:none}
.opcao input:checked+.ck .ic,.ck.on .ic{opacity:1}
.ck.meio{background:var(--marca-1);box-shadow:none}
.ck.meio::after{content:"";width:10px;height:2.5px;border-radius:2px;background:#fff}
.opcao input:checked+.rd,.rd.on{box-shadow:inset 0 0 0 7px var(--marca-1)}
.opcao input:focus-visible+.ck,.opcao input:focus-visible+.rd,.opcao input:focus-visible+.sw,.opcao.is-foco .ck,.opcao.is-foco .rd,.opcao.is-foco .sw{box-shadow:inset 0 0 0 1.75px var(--marca-1),var(--anel-foco)}
.opcao.is-foco .ck.on{box-shadow:var(--anel-foco)}
.opcao input:disabled~*,.opcao.is-desat{color:var(--desat-texto);cursor:not-allowed}
.opcao.is-desat .ck,.opcao.is-desat .rd,.opcao input:disabled+.ck{background:var(--desat-fundo);box-shadow:inset 0 0 0 1.75px var(--linha)}
.opcao.is-erro .ck{box-shadow:inset 0 0 0 2px var(--perigo)}
.sw{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:#B8C1BC;transition:background var(--mov-medio) var(--curva)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(12,40,28,.25);transition:transform var(--mov-medio) var(--curva)}
.opcao input:checked+.sw,.sw.on{background:var(--marca-1)}
.opcao input:checked+.sw::after,.sw.on::after{transform:translateX(18px)}
.opcao.is-desat .sw{background:var(--desat-fundo)}

/* ---------- 11. ABAS ---------- */
.abas{display:flex;gap:4px;padding:4px;border-radius:16px;background:#E9EEEB;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.aba{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:12px;background:transparent;color:var(--tinta-2);font:600 14.5px/1 var(--fonte-texto);white-space:nowrap;cursor:pointer;transition:background var(--mov-rapido) var(--curva),color var(--mov-rapido) var(--curva)}
.aba .conta{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:rgba(18,26,22,.08);font:700 12px/22px var(--fonte-texto);color:var(--tinta)}
.aba:hover,.aba.is-hover{color:var(--tinta);background:rgba(255,255,255,.6)}
.aba[aria-selected="true"],.aba.is-ativo{background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra-1)}
.aba[aria-selected="true"] .conta,.aba.is-ativo .conta{background:var(--marca-1);color:#fff}
.aba:focus-visible,.aba.is-foco{box-shadow:var(--anel-foco)}
.aba:disabled,.aba.is-desat{color:var(--desat-texto);cursor:not-allowed;background:transparent}

/* ---------- 12. TABELA E LISTA COM LOTE ---------- */
.tabela-caixa{overflow-x:auto;border-radius:var(--raio-card)}
.tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.tabela th{font:600 12px/1.3 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-2);text-align:left;padding:10px 14px;background:var(--fundo)}
.tabela th:first-child{border-radius:12px 0 0 12px}.tabela th:last-child{border-radius:0 12px 12px 0}
.tabela td{padding:14px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr{transition:background var(--mov-rapido) var(--curva)}
.tabela tbody tr:hover td,.tabela tbody tr.is-hover td{background:#FAFBFA}
.tabela tbody tr.sel td{background:var(--marca-1-suave)}
.tabela .n{text-align:right;font-variant-numeric:tabular-nums}
.lista{display:grid;gap:8px}
.lista-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:64px;padding:8px 10px 8px 6px;border-radius:16px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linha);transition:background var(--mov-rapido) var(--curva),box-shadow var(--mov-rapido) var(--curva)}
.lista-item:hover,.lista-item.is-hover{box-shadow:inset 0 0 0 1px var(--linha-forte)}
.lista-item.sel{background:var(--marca-1-suave);box-shadow:inset 0 0 0 1px var(--marca-1-suave-2)}
.lista-item .nome{font:650 15.5px/1.25 var(--fonte-texto)}
.lista-item .nome small{display:block;font:500 13px/1.3 var(--fonte-texto);color:var(--tinta-2);margin-top:2px}
.lista-item .meta-dado{font-size:14px;color:var(--tinta-2);white-space:nowrap}
.lista-item .opcao{min-width:44px;justify-content:center}
.lista-todos{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 10px 4px 6px;flex-wrap:wrap}
.barra-lote{position:sticky;bottom:16px;z-index:var(--z-pop);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px;border-radius:18px;background:var(--escuro);color:#fff;box-shadow:var(--sombra-3)}
.barra-lote b{font:700 15px/1.2 var(--fonte-texto)}
.barra-lote .btn-texto{color:#fff;margin-left:auto}
.barra-lote .btn-texto:hover{background:rgba(255,255,255,.12)}
.barra-lote .btn-primario{background:#fff;color:var(--marca-1-forte)}
.barra-lote .btn-primario:hover{background:var(--marca-1-suave)}
.barra-lote .btn:focus-visible{box-shadow:0 0 0 2px var(--escuro),0 0 0 4px #fff}

/* ---------- 13. SELOS E CHIPS ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:var(--raio-chip);font:600 13px/1 var(--fonte-texto);white-space:nowrap}
.chip .ic{width:16px;height:16px}
.chip.estudo{color:var(--cod-estudo);background:var(--cod-estudo-suave)}
.chip.resumo{color:var(--cod-resumo);background:var(--cod-resumo-suave)}
.chip.revisao{color:var(--cod-revisao);background:var(--cod-revisao-suave)}
.chip.exercicio{color:var(--cod-exercicio);background:var(--cod-exercicio-suave)}
.chip.cumprida,.chip.acima{color:var(--cod-ok);background:var(--cod-ok-suave)}
.chip.atrasada,.chip.abaixo{color:var(--cod-atraso);background:var(--cod-atraso-suave)}
.chip.hoje{color:var(--marca-1-forte);background:var(--superficie);box-shadow:inset 0 0 0 2px var(--cod-hoje)}
.chip.programada{color:var(--cod-programada);background:var(--cod-programada-suave)}
.chip.folga{color:var(--cod-folga);background:transparent;box-shadow:inset 0 0 0 1.5px var(--cod-folga);border:0;outline:1.5px dashed var(--cod-folga);outline-offset:-1.5px;box-shadow:none}
.chip.alta{color:#fff;background:var(--cod-alta)}
.chip.media{color:var(--cod-media);background:var(--cod-media-suave)}
/* baixa: o fundo ardosia-claro quase some sobre o fundo da pagina (1,06:1), entao o contorno fino desenha o chip */
.chip.baixa{color:var(--cod-baixa);background:var(--cod-baixa-suave);box-shadow:inset 0 0 0 1px rgba(74,88,102,.38)}
.chip.neutro{color:var(--tinta-2);background:var(--fundo)}
.chip.conquista{color:var(--marca-2-texto);background:var(--marca-2-suave)}
/* chip de filtro (clicavel): 44 px de alvo */
.filtro{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--raio-chip);border:0;background:var(--superficie);box-shadow:inset 0 0 0 1.5px var(--linha-forte);color:var(--tinta);font:600 14px/1 var(--fonte-texto);cursor:pointer;transition:background var(--mov-rapido) var(--curva),box-shadow var(--mov-rapido) var(--curva)}
.filtro .ic{width:18px;height:18px}
.filtro:hover,.filtro.is-hover{box-shadow:inset 0 0 0 1.5px var(--tinta-2)}
.filtro[aria-pressed="true"],.filtro.is-ativo{background:var(--marca-1-suave);color:var(--marca-1-forte);box-shadow:inset 0 0 0 1.5px var(--marca-1)}
.filtro:focus-visible,.filtro.is-foco{box-shadow:inset 0 0 0 1.5px var(--marca-1),var(--anel-foco)}
.filtro:disabled,.filtro.is-desat{color:var(--desat-texto);background:var(--desat-fundo);box-shadow:none;cursor:not-allowed}
.titulo-grav{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
.titulo-grav .linha-g{flex:1;height:1px;background:var(--linha)}

/* ---------- 14. BARRA DE PROGRESSO ---------- */
.progresso{display:grid;gap:8px}
.progresso .topo-p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 14px/1.2 var(--fonte-texto)}
.progresso .topo-p b{font:700 18px/1 var(--fonte-texto);font-variant-numeric:tabular-nums}
.trilho{height:10px;border-radius:999px;background:var(--marca-1-suave);overflow:hidden}
.trilho>span{display:block;height:100%;border-radius:999px;background:var(--marca-1);transition:width var(--mov-lento) var(--curva)}
.trilho.grosso{height:14px}
.trilho.fino{height:6px}
.trilho.xp{background:var(--marca-2-suave)}
.trilho.xp>span{background:linear-gradient(90deg,var(--marca-2),var(--xp))}
.trilho.risco>span{background:var(--perigo)}
.trilho.risco{background:var(--perigo-suave)}
.trilho.indet>span{width:35%;animation:indet 1.4s var(--curva) infinite}
@keyframes indet{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

/* ---------- 15. MINI-SEMANA (sequencia de dias) ---------- */
/* estudou = verde cheio + check; nao estudou = rosado neutro + X; folga = UNICO tracejado + lua; hoje = maior, anel verde.
   Sempre com a letra do dia embaixo (S T Q Q S S D) ou legenda. */
.semana-mini{display:flex;gap:4px;align-items:flex-end}
.semana-mini .d{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 3px 5px;border-radius:999px;min-width:36px}
.semana-mini .d .l{font:600 11px/1 var(--fonte-texto);color:var(--tinta-2)}
.semana-mini .d.d-hoje{background:var(--marca-1-suave)}
.semana-mini .d.d-hoje .l{color:var(--marca-1-forte);font-weight:800}
.dia{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%}
.dia .ic{width:16px;height:16px}
.dia.estudou{background:var(--marca-1);color:#fff}
.dia.nao{background:var(--cod-perdido-suave);color:var(--cod-perdido)}
.dia.folga{background:transparent;color:var(--cod-folga);border:1.75px dashed var(--cod-folga)}
.dia.hoje{width:34px;height:34px;background:var(--marca-1-suave);color:var(--cod-hoje);box-shadow:inset 0 0 0 2.5px var(--cod-hoje)}
.dia.hoje .ic{width:18px;height:18px}
.dia.vazio{background:var(--fundo);color:var(--tinta-2)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 13px/1.3 var(--fonte-texto);color:var(--tinta-2)}
.legenda>span{display:inline-flex;align-items:center;gap:7px}
.legenda .dia{width:18px;height:18px}
.legenda .dia .ic{width:11px;height:11px}
.legenda .dia.hoje{width:18px;height:18px;box-shadow:inset 0 0 0 2px var(--cod-hoje)}
.legenda .dia.folga{border-width:1.5px}

/* ---------- 16. CRONOGRAMA (blocos de meta por tipo) ---------- */
.cronograma{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cron-dia{display:grid;align-content:start;gap:8px;padding:8px;border-radius:18px;background:var(--fundo);min-height:200px}
.cron-dia .cab{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 2px;font:650 13px/1.2 var(--fonte-texto);color:var(--tinta-2)}
.cron-dia.hoje{background:var(--marca-1-suave);box-shadow:inset 0 0 0 2px var(--marca-1)}
.cron-dia.hoje .cab{color:var(--marca-1-forte)}
.cron-dia.folga-dia{background:transparent;outline:1.75px dashed var(--cod-folga);outline-offset:-1.75px;place-content:center;justify-items:center;color:var(--cod-folga);font:600 13px/1.3 var(--fonte-texto)}
.bloco{display:grid;gap:4px;padding:9px 10px 10px;border-radius:12px;background:var(--superficie);box-shadow:inset 3px 0 0 var(--cor,var(--tinta-2)),0 1px 2px rgba(12,40,28,.05);font-size:13px;line-height:1.3}
.bloco .tp{display:flex;align-items:center;gap:5px;font:700 11.5px/1 var(--fonte-texto);color:var(--cor)}
.bloco .tp .ic{width:14px;height:14px}
.bloco .tp .est{margin-left:auto;display:inline-flex}
.bloco .tp .est .ic{width:15px;height:15px}
.bloco b{font-weight:650;color:var(--tinta)}
.bloco small{color:var(--tinta-2);font-size:12px}
.bloco.estudo{--cor:var(--cod-estudo)}
.bloco.resumo{--cor:var(--cod-resumo)}
.bloco.revisao{--cor:var(--cod-revisao)}
.bloco.exercicio{--cor:var(--cod-exercicio)}
.bloco.feito{background:#FBFCFB}
.bloco.feito b{color:var(--tinta-2)}
.bloco.feito .est{color:var(--cod-ok)}
.bloco.atraso{box-shadow:inset 3px 0 0 var(--cor),inset 0 0 0 1.5px var(--perigo)}
.bloco.atraso .est{color:var(--cod-atraso)}

/* ---------- 17. GRAFICOS (so estilo; dados vem da implementacao) ---------- */
/* barras verticais com linha de meta; barra abaixo da meta = carmim + seta para baixo */
.graf-barras{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;align-items:end;height:200px;padding:0 4px;border-bottom:1.5px solid var(--linha-forte)}
.graf-barras .b{position:relative;height:var(--v);border-radius:10px 10px 4px 4px;background:var(--marca-1);transition:height var(--mov-lento) var(--curva)}
.graf-barras .b.abaixo{background:var(--perigo)}
.graf-barras .b>span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font:700 13px/1 var(--fonte-texto);font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap;display:inline-flex;gap:3px;align-items:center}
.graf-barras .b.abaixo>span{color:var(--perigo-forte)}
.graf-barras .b>span .ic{width:13px;height:13px}
.graf-barras .meta{position:absolute;left:0;right:0;bottom:var(--v);border-top:2px dotted var(--tinta);z-index:1;pointer-events:none}
.graf-barras .meta em{position:absolute;right:0;top:-22px;font:700 12px/1 var(--fonte-texto);font-style:normal;background:var(--superficie);padding:3px 6px;border-radius:6px;color:var(--tinta)}
.graf-rotulos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;padding:8px 4px 0;font:500 12.5px/1.3 var(--fonte-texto);color:var(--tinta-2);text-align:center}
/* barras horizontais (celular) */
.graf-h{display:grid;gap:12px}
.graf-h .lh{display:grid;grid-template-columns:110px minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:14px}
.graf-h .tr{position:relative;height:12px;border-radius:999px;background:var(--fundo)}
.graf-h .tr>b{display:block;height:100%;width:var(--v);border-radius:999px;background:var(--marca-1)}
.graf-h .tr>b.abaixo{background:var(--perigo)}
.graf-h .tr>i{position:absolute;top:-4px;bottom:-4px;left:var(--meta);border-left:2px dotted var(--tinta)}
.graf-h em{font-style:normal;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.graf-h em.abaixo{color:var(--perigo-forte)}
/* linha (svg): .gl-grade linhas guia, .gl-linha serie, .gl-area preenchimento, .gl-ponto */
.graf-linha{width:100%;height:auto;display:block;overflow:visible}
.graf-linha .gl-grade{stroke:var(--linha);stroke-width:1}
.graf-linha .gl-linha{fill:none;stroke:var(--marca-1);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.graf-linha .gl-linha.b{stroke:var(--tinta-2);stroke-dasharray:1 5}
.graf-linha .gl-area{fill:var(--marca-1);opacity:.10}
.graf-linha .gl-ponto{fill:var(--superficie);stroke:var(--marca-1);stroke-width:2.5}
.graf-linha text{font:500 11px var(--fonte-texto);fill:var(--tinta-2)}
/* rosca (svg 120x120): trilho + fatias; centro com o numero */
.graf-rosca{position:relative;width:140px;height:140px;flex:none}
.graf-rosca svg{width:100%;height:100%;transform:rotate(-90deg)}
.graf-rosca .gr-trilho{fill:none;stroke:var(--fundo);stroke-width:14}
.graf-rosca .gr-fatia{fill:none;stroke-width:14;stroke-linecap:round}
.graf-rosca .centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.graf-rosca .centro b{font:700 24px/1 var(--fonte-texto)}
.graf-rosca .centro small{font-size:12px;color:var(--tinta-2)}
.spark{display:flex;align-items:flex-end;gap:3px;height:44px}
.spark i{flex:1;min-width:5px;height:var(--v);border-radius:3px 3px 1px 1px;background:var(--marca-1)}
.spark i.z{height:4px;background:var(--linha-forte)}
.spark.risco i{background:var(--perigo)}
.spark.risco i.z{background:var(--linha-forte)}

/* ---------- 18. MENU SUSPENSO (outras acoes) ---------- */
.pop{position:relative}
.pop-menu{min-width:260px;padding:6px;border-radius:16px;background:var(--superficie);box-shadow:var(--sombra-3);display:grid;gap:2px;z-index:var(--z-pop)}
.pop-menu a,.pop-menu button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:var(--tinta);font:500 14.5px/1.2 var(--fonte-texto);text-decoration:none;text-align:left;cursor:pointer}
.pop-menu .ic{width:19px;height:19px;color:var(--tinta-2)}
.pop-menu a:hover,.pop-menu button:hover,.pop-menu .is-hover{background:var(--fundo)}
.pop-menu a:focus-visible,.pop-menu button:focus-visible{box-shadow:inset 0 0 0 2px var(--foco)}
.pop-menu .perigo{color:var(--perigo-forte)}.pop-menu .perigo .ic{color:var(--perigo)}

/* ---------- 19. MODAL E CONFIRMACAO DESTRUTIVA ---------- */
.veu{position:fixed;inset:0;z-index:var(--z-veu);background:var(--veu);display:grid;place-items:center;padding:16px;animation:aparece var(--mov-medio) var(--curva)}
.modal{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--superficie);border-radius:var(--raio-bloco);box-shadow:var(--sombra-3);padding:28px;display:grid;gap:16px;animation:sobe var(--mov-medio) var(--curva)}
.modal .modal-cab{display:flex;align-items:flex-start;gap:14px}
.modal .modal-cab .icone-btn{margin:-8px -10px 0 auto}
.modal h2{font-size:22px}
.modal .rodape{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.modal .selo-ic{flex:none;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--perigo-suave);color:var(--perigo)}
.modal .selo-ic .ic{width:24px;height:24px}
/* confirmacao destrutiva em linha (dentro do card, sem cobrir o resto) */
.confirma{display:grid;gap:12px;padding:16px;border-radius:18px;background:#FFF8F8;box-shadow:inset 0 0 0 1.5px #F2C9CB}
.confirma .cab-c{display:flex;gap:10px;align-items:flex-start}
.confirma .cab-c .ic{color:var(--perigo);width:22px;height:22px;margin-top:1px}
.confirma b{font:700 15.5px/1.3 var(--fonte-texto)}
.confirma .rodape{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes sobe{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- 20. TOAST ---------- */
.toasts{position:fixed;right:24px;bottom:24px;z-index:var(--z-toast);display:grid;gap:10px;width:min(400px,calc(100vw - 32px))}
.toast{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 14px;border-radius:16px;background:var(--escuro);color:#fff;box-shadow:var(--sombra-3);font:500 14.5px/1.4 var(--fonte-texto);animation:sobe var(--mov-medio) var(--curva)}
.toast .t-ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.toast .t-ic .ic{width:20px;height:20px}
.toast.ok .t-ic{color:#7FD9AE}
.toast.erro .t-ic{color:#FF9A9E}
.toast.info .t-ic{color:#C9D6CF}
.toast .btn-texto{color:#fff;margin-left:auto;height:40px}
.toast .btn-texto:hover{background:rgba(255,255,255,.12)}
.toast .icone-btn{color:#C9D6CF;width:40px;height:40px}
.toast .icone-btn:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- 21. ESTADO VAZIO ---------- */
.vazio{display:grid;justify-items:center;text-align:center;gap:10px;padding:36px 20px;border-radius:var(--raio-card);background:var(--fundo)}
.vazio .v-ic{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--superficie);color:var(--marca-1);box-shadow:var(--sombra-1);margin-bottom:4px}
.vazio .v-ic .ic{width:30px;height:30px}
.vazio h3{font-size:18px}
.vazio p{max-width:380px;color:var(--tinta-2);font-size:15px}
.vazio .btn{margin-top:6px}

/* ---------- 22. CARREGANDO (skeleton) ---------- */
.esq{display:block;border-radius:10px;background:linear-gradient(90deg,#EBEFED 0%,#F6F8F7 40%,#EBEFED 80%);background-size:300% 100%;animation:brilho 1.6s linear infinite}
.esq.linha{height:12px}
.esq.titulo{height:20px;width:55%}
.esq.circ{width:44px;height:44px;border-radius:50%}
.esq.bloco-e{height:96px;border-radius:16px}
@keyframes brilho{from{background-position:100% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.esq,.trilho.indet>span,.btn .carregando{animation:none}}

/* ---------- 23. PAGINACAO ---------- */
.paginacao{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pag{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border:0;border-radius:12px;background:transparent;color:var(--tinta);font:600 14.5px/1 var(--fonte-texto);font-variant-numeric:tabular-nums;cursor:pointer;text-decoration:none}
.pag .ic{width:20px;height:20px}
.pag:hover,.pag.is-hover{background:var(--marca-1-suave);color:var(--marca-1-forte)}
.pag[aria-current="page"],.pag.is-ativo{background:var(--marca-1);color:#fff}
.pag:focus-visible,.pag.is-foco{box-shadow:var(--anel-foco)}
.pag:disabled,.pag.is-desat{color:var(--desat-texto);background:transparent;cursor:not-allowed}
.paginacao .reticencia{min-width:28px;text-align:center;color:var(--tinta-2)}
.paginacao .total{margin-left:12px;font-size:14px;color:var(--tinta-2)}

/* ---------- 24. AVATAR ---------- */
.avatar{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--marca-1-suave);color:var(--marca-1-forte);font:700 16px/1 var(--fonte-titulo);overflow:visible}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar.p{width:32px;height:32px;font-size:13px}
.avatar.g{width:56px;height:56px;font-size:21px}
.avatar.risco{background:var(--cod-atraso-suave);color:var(--cod-atraso)}
.avatar.neutro{background:#E9EEEB;color:var(--tinta-2)}
.avatar .st{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:var(--marca-1);box-shadow:0 0 0 2.5px var(--superficie)}
.avatar .st.off{background:#B8C1BC}
.pilha-av{display:flex}
.pilha-av .avatar{box-shadow:0 0 0 2.5px var(--superficie);margin-left:-6px} /* sobreposicao curta: as iniciais continuam legiveis (v8, vision) */
.pilha-av .avatar:first-child{margin-left:0}
.perfil-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 4px;border:0;border-radius:var(--raio-chip);background:transparent;cursor:pointer;font:600 14.5px/1 var(--fonte-texto);color:var(--tinta)}
.perfil-btn:hover{background:var(--superficie);box-shadow:var(--sombra-1)}
.perfil-btn .ic{width:18px;height:18px;color:var(--tinta-2)}

/* ---------- 25. NOTIFICACAO ---------- */
.notif-painel{width:380px;max-width:calc(100vw - 32px);border-radius:var(--raio-card);background:var(--superficie);box-shadow:var(--sombra-3);padding:8px;display:grid;gap:2px}
.notif-painel .cab-n{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 12px}
.notif-painel .cab-n h3{font-size:17px}
.notif{display:grid;grid-template-columns:40px minmax(0,1fr) 10px;gap:12px;align-items:start;padding:12px;border-radius:14px;text-decoration:none;color:var(--tinta);cursor:pointer}
.notif:hover,.notif.is-hover{background:var(--fundo)}
.notif:focus-visible{box-shadow:inset 0 0 0 2px var(--foco)}
.notif .n-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--fundo);color:var(--tinta-2)}
.notif .n-ic.verde{background:var(--marca-1-suave);color:var(--marca-1-forte)}
.notif .n-ic.conquista{background:var(--marca-2-suave);color:var(--marca-2-texto)}
.notif .n-ic.risco{background:var(--perigo-suave);color:var(--perigo)}
.notif p{font-size:14px;line-height:1.4}
.notif small{display:block;margin-top:3px;font-size:12.5px;color:var(--tinta-2)}
.notif .ponto{width:10px;height:10px;border-radius:50%;background:var(--marca-1);margin-top:6px}
.notif.lida .ponto{background:transparent}
.notif.lida p{color:var(--tinta-2)}
/* faixa de aviso dentro da pagina (mural, orientacao do mentor) */
.aviso{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--fundo)}
.aviso .a-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--superficie);color:var(--marca-1-forte)}
.aviso p{font-size:15px}
.aviso small{display:block;margin-top:4px;font-size:13px;color:var(--tinta-2)}

/* ---------- 26. CARD DE ALERTA (fila do mentor) ---------- */
.alerta{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px 28px;padding:22px 24px;border-radius:var(--raio-card);background:var(--superficie);box-shadow:var(--sombra-1)}
.alerta .quem{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alerta .quem h3{font-size:19px}
.alerta .motivo{margin-top:10px;font-size:15.5px;line-height:1.5}
.alerta .texto-pronto{margin-top:10px;padding:10px 14px;border-radius:14px;background:var(--fundo);font-size:14px;color:var(--tinta-2)}
.alerta .texto-pronto b{color:var(--tinta);font-weight:600}
.alerta .acoes{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;border-radius:16px;background:var(--fundo)}
.alerta .acoes .descartar{margin-left:auto;color:var(--perigo-forte)}
.alerta .acoes .descartar:hover{background:var(--perigo-suave)}
.alerta .grafico-a{display:grid;gap:8px;align-content:start}
.alerta .grafico-a .ga-t{font:600 12.5px/1.3 var(--fonte-texto);color:var(--tinta-2)}
.alerta .grafico-a .ga-e{display:flex;justify-content:space-between;font-size:12px;color:var(--tinta-2)}
.alerta.so-texto{grid-template-columns:minmax(0,1fr) 240px}
.alerta>.full{grid-column:1/-1}
.alerta>.pop-menu{width:max-content;max-width:100%;margin-top:-6px}
.alerta .grafico-a .sub{display:flex;align-items:center;gap:6px}

/* ---------- 27. BARRA DO CRONOMETRO (celular) ---------- */
.crono-barra{display:none}
.app-coluna{min-width:0}
/* mostrar so no computador / so no celular */
@media (min-width:761px){.so-cel{display:none!important}}

/* ---------- 28. CELULAR (<=760 px): 4 col, calha 16, margem 16 ---------- */
@media (max-width:1024px){
  .app{grid-template-columns:var(--menu-recolhido) minmax(0,1fr)}
  .app .menu-lateral{width:var(--menu-recolhido);padding:20px 12px;align-items:center}
  .app .menu-lateral .menu-item{width:48px;justify-content:center;padding:0;position:relative}
  .app .menu-lateral .menu-item span,.app .menu-lateral .menu-item .seta,.app .menu-lateral .menu-grupo,.app .menu-lateral .submenu,.app .menu-lateral .marca img.wm{display:none}
  .app .menu-lateral .menu-item .conta{position:absolute;top:2px;right:0;min-width:18px;height:18px;line-height:18px;padding:0 4px;font-size:11px;margin:0}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cronograma{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--t-h1:26px;--t-h2:18px}
  body{font-size:15.5px}
  .app{display:block}
  .app .menu-lateral{display:none}
  .app-conteudo{padding:16px 16px calc(var(--inferior-alt) + 32px)}
  .app-conteudo.com-crono{padding-bottom:calc(var(--inferior-alt) + 96px)}
  .app-conteudo>.miolo{gap:16px}
  .grade{gap:var(--grid-calha-mob)}
  .g2,.g3,.g-7-5,.g-8-4{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grade{grid-template-columns:minmax(0,1fr)}
  .topo{height:60px;padding:0 12px 0 16px;gap:10px;background:var(--superficie);box-shadow:0 1px 0 var(--linha)}
  .topo .marca-mob{display:block}
  .topo .marca-mob img{height:24px;width:auto;display:block}
  .topo .so-desk,.so-desk{display:none!important}
  .nivel-pilula{height:40px;padding:0 10px 0 4px;gap:8px;box-shadow:none;background:var(--marca-2-suave)}
  .nivel-pilula .selo-nivel{width:32px;height:32px;font-size:13px;background:var(--superficie)}
  .nivel-pilula .info{min-width:0;gap:4px}
  /* wireframe v4: no celular a pilula mostra nivel + XP; o numero do nivel ja esta no selo, entao sai o rotulo e fica o XP. Moedas ficam na tela de Conquistas */
  .nivel-pilula .info .l1>span:first-child,.nivel-pilula .moedas{display:none}
  .nivel-pilula .info .l1 small{display:block;font:700 11.5px/1 var(--fonte-texto);color:var(--tinta-1);font-variant-numeric:tabular-nums;white-space:nowrap}
  .nivel-pilula .trilho{width:56px;background:rgba(255,255,255,.8)}
  .menu-inferior{display:grid}
  .card{padding:18px 16px;border-radius:20px}
  .kpi-card .kpi-n{font-size:22px}
  .kpi-card .kpi-ic{width:36px;height:36px;margin-bottom:4px}
  .btn{height:48px}
  .btn-peq{height:var(--alvo-toque)}
  .acoes-mob-bloco .btn{width:100%}
  .abas{width:100%}
  .aba{flex:1 0 auto;justify-content:center}
  .cronograma{grid-template-columns:minmax(0,1fr)}
  .alerta{grid-template-columns:minmax(0,1fr);padding:18px 16px;gap:12px}
  .alerta .acoes{flex-direction:column;align-items:stretch;padding:10px}
  .alerta .acoes .btn{width:100%}
  .alerta .acoes .descartar{margin-left:0}
  .lista-item{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .lista-item .avatar,.lista-item .meta-dado{display:none}
  .barra-lote{position:fixed;left:12px;right:12px;bottom:calc(var(--inferior-alt) + 10px + env(safe-area-inset-bottom));padding:8px 8px 8px 16px;gap:8px}
  .barra-lote .btn-texto{padding:0 10px}
  .barra-lote .btn{height:44px;padding:0 14px}
  .toasts{right:16px;left:16px;width:auto;bottom:calc(var(--inferior-alt) + 16px)}
  .modal{padding:22px 18px;border-radius:24px}
  .veu{align-items:end;padding:0}
  .veu .modal{border-radius:24px 24px 0 0;width:100%;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .modal .rodape{flex-direction:column-reverse}
  .modal .rodape .btn{width:100%}
  .tabela-caixa.vira-cards .tabela thead{display:none}
  .tabela-caixa.vira-cards .tabela,.tabela-caixa.vira-cards .tabela tbody,.tabela-caixa.vira-cards .tabela tr,.tabela-caixa.vira-cards .tabela td{display:block}
  .tabela-caixa.vira-cards .tabela tr{padding:12px 14px;border-radius:16px;background:var(--fundo);margin-bottom:8px}
  .tabela-caixa.vira-cards .tabela td{border:0;padding:3px 0}
  .tabela-caixa.vira-cards .tabela td[data-r]::before{content:attr(data-r) ": ";color:var(--tinta-2);font-size:13px}
  .crono-barra{position:fixed;left:12px;right:12px;bottom:calc(var(--inferior-alt) + 10px + env(safe-area-inset-bottom));z-index:var(--z-pop);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:18px;background:var(--escuro);color:#fff;box-shadow:var(--sombra-3);font:600 14px/1.2 var(--fonte-texto)}
  .crono-barra .ic{width:20px;height:20px;color:#7FD9AE}
  .crono-barra .btn{margin-left:auto;height:44px;background:#fff;color:var(--marca-1-forte)}
  /* nome da disciplina por extenso, quebrando em 2 linhas se precisar (nada de abreviacao cortada) */
  .graf-h .lh{grid-template-columns:104px minmax(0,1fr) 42px}
  .graf-h .lh>span{font-size:13px;line-height:1.2}
  /* barrinha de XP ocupa a largura da pilula, embaixo do numero */
  .nivel-pilula .trilho{width:100%;min-width:56px}
  .semana-mini{justify-content:space-between;width:100%}
  .semana-mini .d{min-width:0;flex:1}
  .notif-painel{width:100%}
}
@media (max-width:380px){
  .g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kpi-card .kpi-n{font-size:20px}
  .inf-item{font-size:11px}
}

/* ---------- 29. REGRAS DE SEGURANCA DO LAYOUT (vindas da medicao v8) ----------
   - coluna de grade nunca cresce pelo conteudo (evita rolagem lateral no celular)
   - rotulo de valor do grafico tem fundo proprio: fica legivel sobre a linha da meta
   - todo alvo de toque com 44 px no minimo, inclusive dentro do toast e da pilula de nivel */
.app-conteudo>.miolo{grid-template-columns:minmax(0,1fr)}
.miolo>*,.grade>*{min-width:0}
code{white-space:nowrap}
.graf-barras .b>span{background:var(--superficie);padding:3px 6px;border-radius:7px;z-index:2}
.icone-btn{flex:none}
.toast .icone-btn,.toast .btn-texto{height:44px}
.toast .icone-btn{width:44px}
@media (max-width:760px){
  .nivel-pilula{height:44px}
  /* barra de lote numa linha so (cobre menos da tela): contagem | limpar (so icone, 44 px, com fundo para parecer botao) | aprovar com rotulo curto */
  .barra-lote{flex-wrap:nowrap}
  .barra-lote{gap:8px}
  /* contagem numa linha so; o rotulo do botao encurta para 'Aprovar' (a contagem ja esta ao lado) */
  .barra-lote b{min-width:0;font-size:14px;line-height:1.15;white-space:nowrap}
  .barra-lote .limpar{width:44px;padding:0;justify-content:center;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);border-radius:999px;flex:none}
  /* subtitulo de pagina: o periodo vira a 1a linha, as contagens a 2a (nada de separador sobrando) */
  .sub .quebra-cel{display:block}
  .barra-lote .btn-primario{flex:none;white-space:nowrap}
  .app-conteudo.com-lote{padding-bottom:calc(var(--inferior-alt) + 110px + env(safe-area-inset-bottom))}
  /* abas que rolam de lado: a ultima esmaece na borda para mostrar que tem mais */
  /* v12: so as abas que rolam (classe .rola, ex.: dias da semana do aluno) esmaecem na borda; as da fila cabem inteiras */
  .abas.rola{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:28px}
}

/* ---------- 30. AJUSTES v12 (missao design v12) ----------
   item 2: abas da fila com rotulo curto do json (Precisam / Resultados / No ritmo) e folga menor no celular: as 3 cabem inteiras em 360.
   item 4: menu inferior do aluno: so o item ativo tem preenchimento verde cheio; o Cronometro continua como acao central elevada, mas neutra (branco, icone e contorno cinza): verde so no ativo.
   item 5: pilula de nivel: o selo vira icone de trofeu e o rotulo 'Nivel 14' (MOLD_ALUNO.topo.nivel) aparece tambem no celular. */
@media (max-width:760px){
  .abas:not(.rola){gap:2px}
  .abas:not(.rola) .aba{flex:1 1 auto;padding:0 8px;gap:6px}
  .barra-lote b{display:none}
  .nivel-pilula .info .l1>span:first-child{display:block;font:700 12px/1 var(--fonte-texto);color:var(--tinta);white-space:nowrap}
  .nivel-pilula .info .l1 small{display:none}
}
.nivel-pilula .selo-nivel .ic{width:20px;height:20px}
.inf-item[aria-current="page"] .ic,.inf-item.is-ativo .ic{background:var(--marca-1);color:#fff}
.inf-item[aria-current="page"],.inf-item.is-ativo{font-weight:800}
.inf-item.centro{color:var(--tinta-2)}
.inf-item.centro .bolha{background:var(--superficie);color:var(--tinta-2);box-shadow:inset 0 0 0 1.5px var(--linha-forte),var(--sombra-1),0 0 0 5px var(--superficie)}
/* v12: dados que antes iam na mesma linha com ' · ' ou ':' quebravam no meio e se sobrepunham; cada um ganha linha propria */
.linhas>span,.linhas>b{display:block}
.alerta .motivo.linhas>span{color:var(--tinta-2);font-size:14.5px;margin-top:2px}
.alerta .texto-pronto.linhas>span{font:700 12px/1.3 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:4px}
p.sub.linhas>span+span{margin-top:2px}

/* ---------- 31. AJUSTES v16 (missao design v16, pacote da Etapa 1 aprovado em 2026-10-27) ----------
   item 1: a barra fixa 'Meta atual' (.crono-barra) sai do rodape e vira o 1o card do painel Hoje (.card.meta-atual),
           com o mesmo visual dela (fundo escuro, icone verde-claro, botao branco). A unica barra fixa no celular e o menu inferior.
           .crono-barra continua no arquivo so para nao quebrar quem ainda usa; nao entra em tela nova.
   item 2: primeira tela compacta no celular (390x844 e 360x780): KPI com icone ao lado do numero, plano com o botao ao lado das datas,
           e o bloco seguinte aos KPI comeca abaixo da tela (nenhum texto fica atras do menu inferior).
   item 4: botao desativado ganha contorno fino de 1.5px linha-forte (parece bloqueado, nao quebrado). Botao de texto segue sem contorno.
   item 5: estado 'Em breve' (.vazio.em-breve) para aba ainda nao construida. */
.card.meta-atual{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 16px 16px 18px;background:var(--escuro);color:#fff;box-shadow:var(--sombra-2)}
.meta-atual .ma-ic{width:44px;height:44px;border-radius:var(--raio-icone);display:grid;place-items:center;background:rgba(255,255,255,.1);color:#7FD9AE}
.meta-atual .ma-ic .ic{width:22px;height:22px}
.meta-atual .ma-txt{display:grid;gap:2px;min-width:0}
.meta-atual .ma-rot{font:600 12.5px/1.25 var(--fonte-texto);letter-spacing:.02em;color:rgba(255,255,255,.76)}
.meta-atual .ma-tit{font:700 16px/1.25 var(--fonte-texto);color:#fff}
.meta-atual .ma-sub{font:500 13.5px/1.3 var(--fonte-texto);color:rgba(255,255,255,.76);white-space:nowrap}
.meta-atual .btn{background:#fff;color:var(--marca-1-forte)}
.meta-atual .btn:hover,.meta-atual .btn.is-hover{background:var(--marca-1-suave)}
.plano-rodape{margin-top:14px}
.plano-rodape .grupo-btn{margin-top:18px}
.btn:disabled,.btn.is-desat,.btn[aria-disabled="true"]{box-shadow:inset 0 0 0 1.5px var(--linha-forte)}
.btn-texto:disabled,.btn-texto.is-desat,.btn-texto[aria-disabled="true"]{box-shadow:none}
.vazio.em-breve{padding:40px 24px 36px;background:var(--superficie);box-shadow:var(--sombra-1)}
.vazio.em-breve .v-ic{background:var(--marca-1-suave);color:var(--marca-1-forte);box-shadow:none}
.vazio.em-breve p{max-width:340px}
/* a tela Em breve ocupa a area util (sem meia tela vazia embaixo) e centraliza o conteudo */
.vazio.em-breve{min-height:clamp(360px,calc(100svh - 200px),640px);align-content:center}
@media (max-width:760px){.vazio.em-breve{min-height:calc(100svh - var(--inferior-alt) - 145px)}} /* celular: o card vai ate 24px acima do menu inferior */
@media (max-width:760px){
  .card.meta-atual{gap:12px;padding:14px 14px 14px 16px}
  .meta-atual .btn{padding:0 16px}
  .plano-rodape{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
  .plano-rodape .grupo-btn{margin-top:0;flex:none}
  .plano-rodape .sub{font-size:13.5px}
  .grade.g4 .kpi-card{grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;padding:12px}
  .grade.g4 .kpi-card .kpi-ic{grid-row:1 / span 2;margin:0}
  .grade.g4 .kpi-card .kpi-r{font-size:13px;line-height:1.25}
  .vazio.em-breve{padding:32px 18px 28px}
}
/* item 2 (celular): .dobra = primeira tela. Regra: tudo dentro dela termina acima do menu inferior e o bloco seguinte
   comeca abaixo da tela (min-height = altura da tela - topo do miolo (76px) - gap do miolo (16px)).
   Assim nenhum texto fica atras do menu em nenhuma altura de tela; a sobra fica atras do menu. No computador a .dobra nao existe (display:contents). */
.dobra{display:contents}
@media (max-width:760px){
  .dobra{display:grid;gap:12px;align-content:start;min-height:calc(100svh - 92px)}
  .dobra .grade{gap:12px}
  .card.meta-atual{gap:10px;padding:12px 12px 12px 14px}
  .meta-atual .ma-ic{width:36px;height:36px}
  .meta-atual .ma-ic .ic{width:20px;height:20px}
  .meta-atual .ma-tit{font-size:15px}
  .meta-atual .btn{padding:0 12px}
  .plano-rodape .sub{font-size:13px;white-space:nowrap}
  .plano-rodape .sub>span{white-space:nowrap}
  .card.sequencia .card-cab{margin-bottom:8px!important}
  .card.sequencia .seq-legenda{margin-top:10px!important;font-size:12px;gap:4px 12px}
  .card.sequencia .seq-frase{margin-top:8px!important;font-size:13px}
  .grade.g4 .kpi-card{padding:10px 12px}
  .grade.g4 .kpi-card .kpi-ic{width:32px;height:32px}
  .grade.g4 .kpi-card .kpi-n{font-size:20px}
  .grade.g4 .kpi-card .kpi-r{font-size:12.5px}
}
@media (max-width:380px){
  /* 360px: os icones dos dias ja falam sozinhos (check, x, lua, alvo) e cada dia tem aria-label; a legenda completa fica nas telas maiores e na galeria */
  .card.sequencia .seq-legenda{display:none}
  .meta-atual .ma-ic{display:none}
  .card.meta-atual{grid-template-columns:minmax(0,1fr) auto}
  /* 360x780: a 2a linha de KPI tem de terminar o texto acima da bolha do cronometro (topo 697) */
  .dobra,.dobra .grade{gap:10px}
  .dobra .card.destaque,.dobra .card.sequencia{padding-top:14px;padding-bottom:14px}
}

/* ---------- 32. AJUSTES v24 (karen-ops): linha 'Seu plano' + 'Sequencia' no computador ----------
   A Sequencia (densa) define a altura da linha; em 5 colunas a legenda e a frase quebram em 2 linhas e a linha fica alta,
   sobrando vazio no Seu plano. Proporcao invertida: Seu plano 5 col, Sequencia 7 col. Na Sequencia larga a legenda e a
   frase cabem numa linha so, a linha baixa e as alturas dos dois cards quase se igualam, sem texto nem dado novo.
   Seu plano: progresso no topo; datas + botao juntos no fim do card (a sobra pequena fica entre a barra e as datas).
   Sequencia: os 7 dias ocupam a largura do card, como no celular (alinhados com a legenda embaixo).
   Celular (<=760) nao muda: a linha vira 1 coluna, igual a g-7-5. So tokens do sistema; nada de cor, fonte ou componente novo.
   (aplicado pela fernanda-dev na v26) */
.g-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:760px){.g-5-7{grid-template-columns:minmax(0,1fr)}}
@media (min-width:761px){
  .grade.g-5-7>.card.destaque{display:flex;flex-direction:column}
  .grade.g-5-7>.card.destaque .plano-rodape{margin-top:auto;padding-top:var(--e-4)}
  .grade.g-5-7>.card.destaque .plano-rodape .grupo-btn{margin-top:var(--e-4)}
  .grade.g-5-7>.card.sequencia .semana-mini{justify-content:space-between}
}

/* ---------- 33. v29 (karen-ops): primeira linha do painel em 3 colunas no computador ----------
   Seu plano | Sequencia | 4 numeros empilhados, numa linha so (>= 1025px, menu lateral com nomes).
   HTML: a grade de KPIs (.grade.g4) passa a ser o 3o filho da .grade.g-5-7, que ganha a classe .linha-3.
   <= 1024px: o g4 ocupa a linha inteira embaixo -> mesmo desenho de hoje (tablet 5/7 + KPIs 2x2; celular igual).
   So tokens e medidas que o sistema ja usa (26px = .kpi-n, 22px/36px = KPI do celular); nenhuma cor, fonte ou componente novo. */
@media (min-width:1025px){
  .grade.g-5-7.linha-3{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}

  /* Seu plano: 3 blocos (.progresso = titulo+percentual+trilho, datas, botao) com a sobra dividida por igual.
     DOM real: .progresso > .topo-p > h2 + b("48% concluido"). O percentual desce para baixo do titulo no
     tamanho do .kpi-n (700 26px/1.1 --fonte-texto): o progresso vira o dado principal do card.
     Prefixo .grade.g-5-7.linha-3 para vencer a regra da secao 32 (.grade.g-5-7>.card.destaque .plano-rodape .grupo-btn). */
  .grade.g-5-7.linha-3>.card.destaque{justify-content:space-between}
  .grade.g-5-7.linha-3>.card.destaque .topo-p{flex-direction:column;align-items:flex-start;gap:var(--e-1)}
  .grade.g-5-7.linha-3>.card.destaque .topo-p b{font:700 26px/1.1 var(--fonte-texto);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .grade.g-5-7.linha-3>.card.destaque .plano-rodape{display:contents}
  .grade.g-5-7.linha-3>.card.destaque .plano-rodape .sub,.grade.g-5-7.linha-3>.card.destaque .plano-rodape .grupo-btn{margin-top:0}

  /* Sequencia: mesmos blocos, respiro de 8px entre eles; legenda em 2x2 (os 4 rotulos inteiros, nenhum texto novo) */
  .linha-3>.card.sequencia .card-cab{margin-bottom:var(--e-2)!important}
  .linha-3>.card.sequencia .seq-legenda{display:grid;grid-template-columns:repeat(2,max-content);gap:var(--e-2) var(--e-4);margin-top:var(--e-2)!important}
  .linha-3>.card.sequencia .seq-frase{margin-top:var(--e-2)!important}

  /* 4 numeros empilhados: icone ao lado do numero (mesmo desenho do KPI do celular), altura dividida por igual */
  .linha-3>.grade.g4{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--e-2)}
  .linha-3>.grade.g4 .kpi-card{grid-template-columns:auto minmax(0,1fr);column-gap:var(--e-3);row-gap:2px;align-items:center;align-content:center;padding:var(--e-1) var(--e-4)}
  .linha-3>.grade.g4 .kpi-card .kpi-ic{grid-row:1 / span 2;margin:0;width:36px;height:36px}
  .linha-3>.grade.g4 .kpi-card .kpi-n{font-size:22px}
  .linha-3>.grade.g4 .kpi-card .kpi-r{font-size:13px;line-height:1.25;white-space:nowrap}
}
@media (max-width:1024px){
  .grade.g-5-7.linha-3>.grade.g4{grid-column:1 / -1}
}