:root {
  --azul: #2563eb; --azul-esc: #1d4ed8; --indigo: #6366f1; --navy: #0b1437; --navy2: #121c4a;
  --txt: #0f172a; --txt2: #475569; --txt3: #94a3b8; --borda: #e2e8f0; --fundo: #f1f5f9; --branco: #fff;
  --verde: #16a34a; --laranja: #ea580c; --vermelho: #dc2626; --amarelo: #f59e0b;
  --raio: 14px; --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--txt); background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { min-height: 100dvh; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .62em 1.1em; border-radius: 10px; border: 1px solid var(--borda); background: var(--branco); cursor: pointer; font-weight: 600; text-decoration: none; color: var(--txt); white-space: nowrap; transition: background .15s, transform .05s; }
.btn:hover { background: #f8fafc; }
.btn:active { transform: translateY(1px); }
.btn-azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-esc); }
.btn-vermelho { color: var(--vermelho); border-color: #fecaca; }
.btn-vermelho:hover { background: #fef2f2; }
.btn-fino { padding: .4em .8em; font-size: .88rem; }
.btn-grande { width: 100%; padding: .85em; font-size: 1.02rem; }
.btn:disabled { opacity: .6; cursor: default; }
.erro { color: var(--vermelho); font-size: .92rem; margin: .4rem 0; }
.ok { color: var(--verde); font-size: .92rem; margin: .4rem 0; }
.vazio { color: var(--txt3); text-align: center; padding: 1.5rem; margin: 0; }
.carregando { min-height: 60vh; display: grid; place-items: center; color: var(--txt2); gap: 1rem; text-align: center; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-marca { background: radial-gradient(1200px 600px at 10% 10%, #1e3a8a 0%, var(--navy) 55%), var(--navy); color: #e2e8f0; padding: clamp(2rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-marca::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -200px; background: radial-gradient(circle, rgba(99, 102, 241, .45), transparent 65%); }
.login-logo { width: 64px; height: 64px; margin-bottom: 1.4rem; }
.login-marca h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff; }
.login-marca h1 span, .topo-marca b span { color: #60a5fa; }
.login-marca p { font-size: 1.15rem; color: #cbd5e1; margin: .6rem 0 1.6rem; }
.login-marca ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; position: relative; z-index: 1; }
.login-marca li::before { content: "✓"; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .6em; border-radius: 50%; background: rgba(96, 165, 250, .18); color: #93c5fd; font-weight: 700; font-size: .85em; }
.login-form { display: grid; place-items: center; padding: 2rem; background: var(--branco); }
.login-form form { width: min(380px, 100%); display: grid; gap: 1rem; }
.login-form h2 { font-size: 1.8rem; }
.sub { color: var(--txt2); margin: .2rem 0 .4rem; }
label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; color: var(--txt2); }
label input { padding: .75em .9em; border: 1px solid var(--borda); border-radius: 10px; background: #f8fafc; font-weight: 500; color: var(--txt); }
label input:focus { outline: 2px solid #bfdbfe; border-color: var(--azul); background: #fff; }

/* ---------- topo e páginas ---------- */
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem clamp(1rem, 3vw, 2rem); background: var(--navy); color: #fff; }
.topo-marca { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.topo-marca img { width: 34px; height: 34px; }
.topo-marca b { font-size: 1.15rem; }
.topo-marca small { color: #94a3b8; border-left: 1px solid #334155; padding-left: .6rem; }
.topo-user { display: flex; align-items: center; gap: .7rem; }
.topo-user .btn { background: transparent; color: #e2e8f0; border-color: #334155; }
.topo-user .btn:hover { background: #1e293b; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); font-weight: 700; font-size: .85rem; }
.pagina { width: min(1180px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); display: grid; gap: 1.4rem; }
.ola { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ola h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.ola p { color: var(--txt2); margin: .35rem 0 0; }
.voltar { display: inline-block; margin-bottom: .5rem; font-weight: 600; text-decoration: none; }
.anel { --p: 0; flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--fundo) 78%, transparent 80% 100%), conic-gradient(var(--azul) calc(var(--p) * 1%), #dbeafe 0); }
.anel b { font-size: 1.4rem; } .anel small { color: var(--txt2); font-size: .78rem; }

.trilha h2 { font-size: 1.25rem; }
.modulos { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; counter-reset: m; }
.modulo { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.modulo-num { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; background: #eff6ff; color: var(--azul); }
.modulo.st-done .modulo-num { background: #dcfce7; color: var(--verde); }
.modulo.st-locked { opacity: .7; } .modulo.st-locked .modulo-num { background: #f1f5f9; }
.modulo h3 { font-size: 1.06rem; } .modulo p { margin: .25rem 0 .5rem; color: var(--txt2); font-size: .94rem; }
.modulo-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .84rem; color: var(--txt2); align-items: center; }
.trava { color: var(--txt3); font-weight: 600; font-size: .9rem; }
.tag { display: inline-block; padding: .18em .6em; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.tag-done { background: #dcfce7; color: #15803d; } .tag-in_progress { background: #dbeafe; color: #1d4ed8; }
.tag-available { background: #fef3c7; color: #b45309; } .tag-locked { background: #f1f5f9; color: #64748b; }
.tag-breve { background: #ede9fe; color: #6d28d9; }
.modulo.st-breve { opacity: .75; border-style: dashed; } .modulo.st-breve .modulo-num { background: #f5f3ff; }

/* ---------- painel da empresa ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
.kpi { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; box-shadow: var(--sombra); border-top: 4px solid var(--indigo); }
.kpi small { color: var(--txt2); font-weight: 600; } .kpi b { display: block; font-size: 1.9rem; margin-top: .2rem; }
.kpi.verde { border-top-color: var(--verde); } .kpi.azul { border-top-color: var(--azul); } .kpi.cinza { border-top-color: #94a3b8; } .kpi.laranja { border-top-color: var(--laranja); }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.cartao-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--borda); }
.cartao-topo h2 { font-size: 1.1rem; } .cartao-topo small { color: var(--txt3); }
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabela th { text-align: left; font-size: .75rem; letter-spacing: .04em; color: var(--txt2); padding: .7rem 1.2rem; background: #f8fafc; white-space: nowrap; }
.tabela td { padding: .8rem 1.2rem; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela .bloco { display: block; color: var(--txt3); font-size: .8rem; margin-top: .15rem; }
.tabela .acoes { text-align: right; }
.mini-barra { width: 140px; max-width: 100%; height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; margin-bottom: .3rem; }
.mini-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--indigo), var(--azul)); }
.form-linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .9rem; align-items: end; padding: 1.2rem; }
.form-linha .erro, .form-linha .ok { grid-column: 1 / -1; margin: 0; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: .8rem; padding: 1.2rem; }

/* ---------- player do treinamento ---------- */
.player { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #0b1020; }
.pl-topo { display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; background: var(--navy); color: #e2e8f0; }
.pl-sair { background: transparent; border: 1px solid #334155; color: #e2e8f0; border-radius: 9px; padding: .4em .8em; cursor: pointer; font-weight: 600; }
.pl-sair:hover { background: #1e293b; }
.pl-titulo { display: grid; line-height: 1.2; min-width: 0; }
.pl-titulo small { color: #94a3b8; font-size: .75rem; } .pl-titulo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-prog { margin-left: auto; display: grid; gap: .3rem; width: min(260px, 34vw); }
.pl-prog small { color: #cbd5e1; font-size: .78rem; text-align: right; }
.barra { height: 7px; border-radius: 99px; background: #1e293b; overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #818cf8, #60a5fa); transition: width .4s; }
.pl-erros { background: #1e293b; border-radius: 9px; padding: .35em .7em; color: #fbbf24; font-size: .9rem; }
.pl-erros.pulsa { animation: pulsa .5s; }
@keyframes pulsa { 40% { transform: scale(1.18); background: #7f1d1d; } }

.pl-sim { position: relative; min-height: 0; overflow: hidden; background: #f1f5f9; }
.pl-sim-root { position: absolute; inset: 0; }

.pl-legenda { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); background: #0f172a; color: #f8fafc; border-top: 3px solid #6366f1; min-height: 96px; }
.pl-legenda.treme { animation: treme .35s; }
@keyframes treme { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.pl-texto { min-width: 0; }
.pl-frase { margin: 0; font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.45; font-weight: 500; }
.pl-extra { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin-top: .45rem; align-items: center; }
.pl-digite { background: #1e3a8a; border: 1px solid #3b82f6; color: #dbeafe; padding: .25em .65em; border-radius: 8px; font-size: .95rem; }
.pl-digite b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; color: #fff; }
.pl-nota { color: #94a3b8; font-size: .88rem; }
.pl-ou { color: #94a3b8; font-size: .85rem; font-weight: 600; }
.pl-feedback { color: #fca5a5; font-weight: 700; font-size: .92rem; }
.pl-feedback.leve { color: #fcd34d; font-weight: 600; }
.pl-dir { display: flex; gap: .5rem; }
.pl-btn { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 10px; padding: .6em .9em; cursor: pointer; font-weight: 600; white-space: nowrap; }
.pl-btn:hover:not(:disabled) { background: #273449; }
.pl-btn:disabled { opacity: .35; cursor: default; }
.pl-legenda.fim .pl-btn { display: none; }

.pl-fim { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); z-index: 50; padding: 1rem; animation: aparece .3s; }
@keyframes aparece { from { opacity: 0; } }
.pl-fim-card { background: #fff; border-radius: 20px; padding: 2rem; width: min(440px, 100%); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.pl-fim-icone { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); }
.pl-fim-card p { color: var(--txt2); margin: .4rem 0 1.2rem; }
.pl-fim-icone.azul { background: linear-gradient(135deg, #6366f1, #2563eb); font-size: 1.8rem; padding-left: .2rem; }
.pl-fim-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
.pl-fim-kpis div { background: #f8fafc; border-radius: 12px; padding: .7rem .3rem; }
.pl-fim-kpis b { display: block; font-size: 1.2rem; } .pl-fim-kpis small { color: var(--txt2); }
.pl-fim-acoes { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { padding: 2rem 1.5rem; }
  .login-marca ul { display: none; }
  .form-linha { grid-template-columns: 1fr 1fr; }
  .col-m { display: none; }
}
@media (max-width: 640px) {
  .topo-marca small, .topo-nome { display: none; }
  .ola { flex-direction: column; align-items: flex-start; }
  .modulo { grid-template-columns: auto 1fr; }
  .modulo-acao { grid-column: 1 / -1; } .modulo-acao .btn { width: 100%; }
  .form-linha { grid-template-columns: 1fr; }
  .pl-topo { gap: .6rem; padding: .5rem .7rem; }
  .pl-sair span, .pl-titulo small { display: none; }
  .pl-legenda { grid-template-columns: auto 1fr; grid-template-areas: "texto texto" "voltar dir"; gap: .6rem; padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom)); }
  .pl-texto { grid-area: texto; } [data-acao="voltar"] { grid-area: voltar; } .pl-dir { grid-area: dir; justify-content: flex-end; }
  .pl-btn span { display: none; }
  .pl-btn { padding: .55em .8em; font-size: 1.05rem; }
}

/* =====================================================================
   Área do aluno — painel de aprendizagem
   ===================================================================== */
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.14em; }
.painel { width: min(1240px, 100%); margin: 0 auto; padding: clamp(1rem, 2.6vw, 2rem) clamp(1rem, 3vw, 2rem) 3rem; display: grid; gap: 1.25rem; }
.anima { animation: entra .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .anima, .barra-prog i { animation: none !important; transition: none !important; } }

/* barra de progresso */
.barra-prog { height: 8px; border-radius: 99px; background: #e9eef6; overflow: hidden; }
.barra-prog i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--indigo)); animation: enche .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0ms) + 120ms); }
.barra-prog.verde i { background: linear-gradient(90deg, #16a34a, #22c55e); }
.barra-prog.claro { background: rgba(255, 255, 255, .22); } .barra-prog.claro i { background: #fff; }
@keyframes enche { from { width: 0; } }

/* boas-vindas + progresso geral */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 1.5rem; align-items: center; background: var(--branco); border: 1px solid var(--borda); border-radius: 18px; padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.8rem); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(99, 102, 241, .10), transparent 65%); pointer-events: none; }
.hero h1 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.hero p { margin: .35rem 0 0; color: var(--txt2); }
.hero-prog { position: relative; z-index: 1; display: grid; gap: .55rem; background: #f8fafc; border: 1px solid var(--borda); border-radius: 14px; padding: .9rem 1rem; }
.hero-prog-cab { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--txt2); font-size: .9rem; }
.hero-prog-cab b { font-size: 1.5rem; color: var(--txt); letter-spacing: -.02em; }
.hero-kpis { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .86rem; color: var(--txt2); }
.hero-kpis span { display: inline-flex; align-items: center; gap: .35rem; } .hero-kpis b { color: var(--txt); }
.hero-kpis .i { color: var(--azul); }

/* continue de onde parou + desempenho */
.painel-linha { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 1.25rem; }
.cont { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; border-radius: 18px; padding: clamp(1.1rem, 2.4vw, 1.5rem); color: #fff; background: linear-gradient(125deg, var(--navy) 0%, #1e3a8a 55%, #4338ca 100%); position: relative; overflow: hidden; }
.cont::after { content: ""; position: absolute; right: -90px; bottom: -130px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(96, 165, 250, .28), transparent 65%); pointer-events: none; }
.cont-ic { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: 28px; }
.cont-txt { min-width: 0; display: grid; gap: .35rem; position: relative; z-index: 1; }
.cont-txt small { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #93c5fd; }
.cont-txt h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.cont-txt p { margin: 0; color: #cbd5e1; font-size: .92rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.chips span { display: inline-flex; align-items: center; gap: .35rem; padding: .28em .7em; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); font-size: .8rem; color: #e2e8f0; }
.cont-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; max-width: 360px; font-size: .85rem; }
.btn-branco { background: #fff; border-color: #fff; color: var(--navy); }
.btn-branco:hover { background: #eef2ff; }
.btn-cta { position: relative; z-index: 1; padding: .8em 1.2em; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.btn-cta .i, .tc .btn .i { transition: transform .2s; } .btn-cta:hover .i, .tc .btn:hover .i { transform: translateX(3px); }
.cont-fim { background: linear-gradient(125deg, #064e3b, #047857 60%, #0d9488); grid-template-columns: auto minmax(0, 1fr); }
.cont-fim .cont-txt small { color: #a7f3d0; }
.desemp { background: var(--branco); border: 1px solid var(--borda); border-radius: 18px; padding: 1.1rem 1.2rem; display: grid; gap: .8rem; align-content: start; }
.desemp h2 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; } .desemp h2 .i { color: var(--azul); }
.desemp-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .55rem; }
.desemp-grade > div { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: .65rem .7rem; display: grid; gap: .1rem; }
.desemp-grade b { font-size: 1.25rem; letter-spacing: -.02em; } .desemp-grade b small { font-size: .8rem; color: var(--txt3); font-weight: 600; }
.desemp-grade span { font-size: .76rem; color: var(--txt2); font-weight: 600; }
.desemp-nota { margin: 0; font-size: .74rem; color: var(--txt3); }

/* módulos */
.secao-cab { margin-top: .4rem; } .secao-cab h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; } .secao-cab h2 .i { color: var(--indigo); }
.secao-cab p { margin: .25rem 0 0; color: var(--txt2); font-size: .9rem; }
.mod { background: var(--branco); border: 1px solid var(--borda); border-radius: 18px; padding: 1.1rem; display: grid; gap: 1rem; }
.mod-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 280px); gap: 1rem; align-items: center; }
.mod-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: var(--indigo); background: #eef2ff; }
.mod-txt small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); }
.mod-txt h3 { font-size: 1.08rem; margin-top: .1rem; } .mod-txt p { margin: .2rem 0 0; color: var(--txt2); font-size: .88rem; }
.mod-prog { display: grid; gap: .4rem; } .mod-prog-txt { display: flex; justify-content: space-between; font-size: .82rem; color: var(--txt2); } .mod-prog-txt b { color: var(--txt); }

/* cards de treinamento: linhas horizontais compactas (no celular viram cartões empilhados) */
.tc-grade { display: grid; gap: .6rem; }
.tc { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto); gap: 1rem; align-items: center; background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: .9rem 1rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tc:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -20px rgba(15, 23, 42, .4); border-color: #cbd5e1; }
.tc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: #eff6ff; color: var(--azul); }
.tc-corpo { min-width: 0; display: grid; gap: .25rem; }
.tc-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.tc h4 { margin: 0; font-size: 1rem; } .tc p { margin: 0; color: var(--txt2); font-size: .86rem; line-height: 1.45; }
.tc-meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .8rem; color: var(--txt3); } .tc-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.tc-rodape { display: grid; justify-items: end; gap: .45rem; text-align: right; }
.tc-nota { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--txt2); } .tc-nota.destaque { color: var(--azul); font-weight: 600; }
.tc-andamento { width: 100%; min-width: 180px; display: grid; gap: .3rem; } .tc-andamento small { font-size: .76rem; color: var(--txt2); }
.st { display: inline-flex; align-items: center; gap: .3rem; padding: .2em .62em; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.st-done { background: #dcfce7; color: #15803d; } .st-in_progress { background: #dbeafe; color: #1d4ed8; } .st-available { background: #e0e7ff; color: #4338ca; }
.st-locked { background: #f1f5f9; color: #64748b; } .st-breve { background: #ede9fe; color: #6d28d9; }
.tc-done .tc-ic { background: #dcfce7; color: #16a34a; } .tc-done .tc-nota .i { color: #16a34a; }
.tc-available, .tc-in_progress { border-color: #bfdbfe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.tc-available .tc-ic, .tc-in_progress .tc-ic { background: var(--azul); color: #fff; }
.tc-locked, .tc-breve { background: #fafbfc; } .tc-locked:hover, .tc-breve:hover { transform: none; box-shadow: none; border-color: var(--borda); }
.tc-locked h4, .tc-breve h4 { color: var(--txt2); } .tc-locked .tc-ic, .tc-breve .tc-ic { background: #f1f5f9; color: var(--txt3); }
.tc .btn { gap: .35rem; }
.carregando-btn { opacity: .7; pointer-events: none; }
@media (max-width: 760px) {
  .tc { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .tc-rodape { grid-column: 1 / -1; justify-items: stretch; text-align: left; padding-top: .6rem; border-top: 1px solid #eef2f7; }
}
/* carregando (esqueleto) */
.sk { border-radius: 18px; background: linear-gradient(90deg, #e9eef6 25%, #f4f7fb 45%, #e9eef6 65%) 0 0 / 300% 100%; animation: brilho 1.3s linear infinite; }
.sk-hero { height: 128px; } .sk-card { height: 190px; } .sk-modulo { height: 260px; }
@keyframes brilho { to { background-position: -150% 0; } }

/* responsivo */
@media (max-width: 1024px) {
  .painel-linha { grid-template-columns: minmax(0, 1fr); }
  .mod-cab { grid-template-columns: auto minmax(0, 1fr); } .mod-prog { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .cont { grid-template-columns: minmax(0, 1fr); } .cont-ic { width: 52px; height: 52px; font-size: 24px; }
  .btn-cta { width: 100%; min-height: 48px; }
  .tc-rodape .btn { width: 100%; min-height: 44px; }
  .tc-andamento { min-width: 0; }
  .mod { padding: .9rem; }
}

/* ---- ajustes ao padrão visual da Área do aluno ---- */
.topo { min-height: 50px; padding-top: .4rem; padding-bottom: .4rem; }
.topo-marca img { width: 32px; height: 32px; } .avatar { width: 32px; height: 32px; }
.painel { width: min(1080px, 100%); gap: 1.1rem; }
.hero, .desemp, .mod, .tc { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.hero { min-height: 145px; border-radius: 16px; }
.desemp, .mod { border-radius: 16px; }
/* barras de progresso sempre verdes */
.barra-prog i { background: linear-gradient(90deg, #16a34a, #22c55e); }
.barra-prog.claro i { background: #fff; }
/* destaque: degradê verde escuro → esmeralda, também para o próximo treinamento */
.cont, .cont-fim { background: linear-gradient(125deg, #064e3b 0%, #047857 55%, #0d9488 100%); border-radius: 16px; }
.cont::after { background: radial-gradient(circle, rgba(52, 211, 153, .25), transparent 65%); }
.cont-txt small { color: #a7f3d0; }
.cont-txt p { color: #d1fae5; }
.cont-ic { border-radius: 14px; font-size: 26px; }
.btn-branco { color: #065f46; } .btn-branco:hover { background: #ecfdf5; }
/* indicadores do desempenho com ícone pequeno */
.desemp-grade > div { gap: .15rem; }
.kpi-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; margin-bottom: .2rem; }
.kpi-ic.verde { background: #dcfce7; color: #16a34a; } .kpi-ic.azul { background: #dbeafe; color: var(--azul); }
.kpi-ic.lilas { background: #ede9fe; color: #7c3aed; } .kpi-ic.vermelho { background: #fee2e2; color: #dc2626; } .kpi-ic.ambar { background: #fef3c7; color: #d97706; }
/* ícones: traço fino, tamanho uniforme */
.painel .i { stroke-width: 1.8; }
.mod-ic { width: 44px; height: 44px; font-size: 21px; border-radius: 12px; }
.tc-ic { width: 42px; height: 42px; font-size: 19px; }
.tc-available .tc-ic, .tc-in_progress .tc-ic { background: #dbeafe; color: var(--azul); }

/* ---- elementos da imagem de referência ---- */
/* topo: saudação + ilustração; abaixo, card branco com anel, barra e indicadores */
.hero2 { display: grid; gap: .9rem; border-radius: 18px; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2vw, 1.2rem); background: linear-gradient(120deg, #f8faff 0%, #eef2ff 55%, #e0e7ff 100%); border: 1px solid #e3e8f4; position: relative; overflow: hidden; }
.hero2-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 110px; }
.hero2-topo h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.hero2-topo p { margin: .3rem 0 0; color: var(--txt2); }
.hero2-ilu svg { width: clamp(190px, 26vw, 300px); height: auto; display: block; margin: -.4rem -.2rem -.6rem 0; }
.hero2-prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.anel2 { --p: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#16a34a calc(var(--p) * 1%), #e7ecf3 0); }
.anel2 > div { width: 78px; height: 78px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; }
.anel2 b { font-size: 1.25rem; letter-spacing: -.02em; } .anel2 small { font-size: .7rem; color: var(--txt2); }
.hero2-barra { display: grid; gap: .4rem; } .hero2-barra h3 { font-size: 1.02rem; } .hero2-barra p { margin: 0; color: var(--txt2); font-size: .88rem; }
.hero2-kpi { display: flex; align-items: center; gap: .6rem; padding-left: 1.2rem; border-left: 1px solid var(--borda); }
.hero2-kpi .kpi-ic { width: 34px; height: 34px; font-size: 18px; margin: 0; border-radius: 10px; }
.hero2-kpi b { display: block; font-size: 1.1rem; letter-spacing: -.01em; } .hero2-kpi small { font-size: .76rem; color: var(--txt2); }
/* destaque: azul/roxo para o próximo treinamento; verde só para "tudo concluído" */
.cont.cont-azul { background: linear-gradient(125deg, #1e3a8a 0%, #3b4fd8 50%, #6d4ce6 100%); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; }
.cont.cont-azul::after { background: radial-gradient(circle, rgba(167, 139, 250, .35), transparent 65%); }
.cont-azul .cont-cab { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; position: relative; z-index: 1; }
.cont-azul .cont-cab b { font-size: 1.05rem; }
.cont-play { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 15px; }
.cont-play .i { fill: currentColor; }
.cont-azul .cont-ic { width: 92px; height: 92px; border-radius: 16px; font-size: 40px; background: linear-gradient(160deg, #e0e7ff, #c7d2fe); color: #4338ca; border: 0; }
.cont-azul .cont-txt small { color: #c7d2fe; } .cont-azul .cont-txt p { color: #e0e7ff; }
.cont-azul .btn-branco { color: #1e3a8a; } .cont-azul .btn-branco:hover { background: #eef2ff; }
.cont-fim { background: linear-gradient(125deg, #064e3b 0%, #047857 55%, #0d9488 100%); }
/* módulos em grade; o módulo aberto mostra os treinamentos logo abaixo da linha dele */
.mc-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; }
.mc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "topo topo" "corpo seta" "prog prog"; gap: .55rem .5rem; text-align: left; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 1rem 1.05rem; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .2s, box-shadow .2s, border-color .2s; }
.mc:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .4); border-color: #cbd5e1; }
.mc:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; }
.mc.on { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.mc-topo { grid-area: topo; display: flex; justify-content: space-between; align-items: flex-start; }
.mc-corpo { grid-area: corpo; min-width: 0; } .mc-corpo small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); }
.mc-corpo h4 { margin: .1rem 0 .2rem; font-size: 1.02rem; } .mc-corpo p { margin: 0; color: var(--txt2); font-size: .85rem; line-height: 1.45; }
.mc-seta { grid-area: seta; align-self: center; color: var(--txt3); font-size: 20px; transition: transform .2s; } .mc.on .mc-seta { transform: rotate(90deg); color: var(--azul); }
.mc-prog { grid-area: prog; display: grid; gap: .35rem; padding-top: .25rem; }
.mc-locked { background: #fafbfc; } .mc-locked .mod-ic { background: #f1f5f9; color: var(--txt3); } .mc-locked h4 { color: var(--txt2); }
.mc-done .mod-ic { background: #dcfce7; color: #16a34a; }
.mod-det { grid-column: 1 / -1; background: var(--branco); border: 1px solid #bfdbfe; border-radius: 16px; padding: 1rem; display: grid; gap: .8rem; animation: entra .3s ease-out both; }
.mod-det > header { display: flex; align-items: center; gap: .8rem; } .mod-det > header > div { flex: 1; }
.mod-det small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); } .mod-det h3 { font-size: 1.02rem; }
@media (max-width: 1024px) { .mc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero2-prog { grid-template-columns: auto minmax(0, 1fr); } .hero2-kpi { padding-left: 0; border-left: 0; } }
@media (max-width: 760px) {
  .hero2-topo { grid-template-columns: minmax(0, 1fr); } .hero2-ilu { display: none; }
  .hero2-prog { grid-template-columns: 80px minmax(0, 1fr); gap: .8rem .9rem; } .anel2 { width: 80px; height: 80px; } .anel2 > div { width: 64px; height: 64px; } .anel2 b { font-size: 1.05rem; }
  .hero2-kpi { grid-column: 1 / -1; padding-top: .7rem; border-top: 1px solid var(--borda); }
  .cont.cont-azul { grid-template-columns: minmax(0, 1fr); } .cont-azul .cont-ic { width: 56px; height: 56px; font-size: 26px; }
  .mc-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---- menu lateral (Área do aluno) ---- */
.aluno-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
.lateral { position: sticky; top: 50px; height: calc(100dvh - 50px); background: linear-gradient(180deg, var(--navy) 0%, #101a4a 60%, #1e1b6b 100%); color: #cbd5e1; padding: 1rem .8rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; z-index: 4; }
.lateral nav { display: grid; gap: .25rem; }
.lat-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 11px; color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: .92rem; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; transition: background .15s, color .15s; }
.lat-item .i { font-size: 18px; stroke-width: 1.8; color: #a5b4fc; }
.lat-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lat-item.on { background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff; box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .9); } .lat-item.on .i { color: #fff; }
.lat-curso { margin-top: auto; display: flex; gap: .7rem; padding: .9rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.lat-curso > .i { font-size: 30px; color: #93c5fd; stroke-width: 1.6; flex: none; }
.lat-curso b { color: #fff; font-size: .92rem; } .lat-curso p { margin: .25rem 0 0; font-size: .8rem; color: #a5b4fc; line-height: 1.4; }
.aluno-layout .painel { margin: 0 auto; }
.topo-menu { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #334155; background: transparent; color: #e2e8f0; place-items: center; font-size: 18px; cursor: pointer; }
.topo:has(.topo-menu) .topo-marca { margin-right: auto; }
.lat-fundo { display: none; }
/* ajuda */
.ajuda-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .5); display: grid; place-items: center; padding: 1rem; animation: entra .2s ease-out; }
.ajuda { width: min(520px, 100%); max-height: 90dvh; overflow: auto; background: #fff; border-radius: 18px; padding: 1.2rem; display: grid; gap: .9rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); }
.ajuda header { display: flex; align-items: center; gap: .7rem; } .ajuda header h3 { flex: 1; font-size: 1.05rem; }
.ajuda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ajuda li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--txt2); line-height: 1.45; } .ajuda li > .i { font-size: 18px; color: var(--indigo); margin-top: .1rem; }
.ajuda li b { color: var(--txt); } .ajuda-nota { margin: 0; font-size: .8rem; color: var(--txt3); }
@media (max-width: 1024px) {
  .aluno-layout { grid-template-columns: minmax(0, 1fr); }
  .topo-menu { display: grid; }
  .lateral { position: fixed; top: 50px; left: 0; bottom: 0; height: auto; width: 260px; transform: translateX(-105%); transition: transform .25s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  body.lateral-aberta .lateral { transform: none; }
  body.lateral-aberta .lat-fundo { display: block; position: fixed; inset: 50px 0 0; background: rgba(15, 23, 42, .45); z-index: 3; }
}
[id^="sec-"] { scroll-margin-top: 66px; }

/* ===== Painel da empresa (admin.js) — mesmo visual da Área do aluno ===== */
.adm .voltar { color: var(--azul); font-weight: 600; text-decoration: none; font-size: .9rem; }
.adm-alerta { display: flex; align-items: center; gap: .8rem; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 14px; padding: .8rem 1rem; }
.adm-alerta > .i { width: 26px; height: 26px; color: #d97706; flex: none; } .adm-alerta div { flex: 1; display: grid; } .adm-alerta span { color: #92400e; font-size: .88rem; }
.adm-cta { align-self: center; position: relative; z-index: 1; }
.adm-lista { display: grid; gap: .35rem; }
.adm-pessoa { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid transparent; }
a.adm-pessoa:hover { background: #f8fafc; border-color: #eef2f7; } .adm-pessoa > div { flex: 1; display: grid; min-width: 0; } .adm-pessoa b { font-size: .9rem; } .adm-pessoa small { color: var(--txt3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-pessoa > .i { color: var(--txt3); width: 16px; }
.adm-pessoa .kpi-ic { margin: 0; flex: none; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul), var(--indigo)); color: #fff; font-weight: 800; font-size: .8rem; }
.avatar.grande { width: 64px; height: 64px; font-size: 1.3rem; }
.adm-vazio { color: var(--txt3); font-size: .9rem; margin: 0; }
.adm-barra { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.adm-busca { flex: 1 1 260px; display: flex; align-items: center; gap: .5rem; background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: .1rem .8rem; } .adm-busca .i { width: 17px; color: var(--txt3); } .adm-busca input { border: 0; outline: 0; flex: 1; padding: .65rem 0; font: inherit; background: none; }
.adm-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .adm-chips button { border: 1px solid var(--borda); background: var(--branco); border-radius: 99px; padding: .45em .9em; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--txt2); } .adm-chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.adm-alunos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.adm-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; padding: 1rem; display: grid; gap: .6rem; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; } .adm-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(15,23,42,.45); }
.adm-card-topo { display: flex; gap: .65rem; align-items: center; text-decoration: none; color: inherit; } .adm-card-topo div { display: grid; min-width: 0; } .adm-card-topo small { color: var(--txt3); font-size: .8rem; }
.adm-selos { display: flex; flex-wrap: wrap; gap: .3rem; } .adm-selos .i { width: 12px; height: 12px; }
.adm-card-prog .mod-prog-txt { display: flex; justify-content: space-between; font-size: .8rem; color: var(--txt2); margin-bottom: .3rem; }
.adm-card-atual { margin: 0; font-size: .82rem; color: var(--txt2); display: flex; gap: .35rem; align-items: center; } .adm-card-atual .i { width: 14px; color: var(--azul); flex: none; }
.adm-card-rodape { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eef2f7; padding-top: .6rem; } .adm-card-rodape small { color: var(--txt3); display: flex; gap: .3rem; align-items: center; } .adm-card-rodape small .i { width: 13px; } .adm-card-rodape > div { display: flex; gap: .35rem; }
.adm-form { padding: 1.2rem; } .adm-form form { display: grid; gap: 1rem; max-width: 720px; }
.adm-campo { display: grid; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--txt2); } .adm-campo input { border: 1px solid var(--borda); border-radius: 10px; padding: .7rem .8rem; font: inherit; font-size: .95rem; color: var(--txt); background: #fff; } .adm-campo input:focus { outline: 2px solid #bfdbfe; border-color: var(--azul); }
.adm-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.adm-modos { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .adm-modos legend { font-size: .85rem; font-weight: 700; color: var(--txt2); margin-bottom: .35rem; }
.adm-modo { display: flex; gap: .7rem; align-items: flex-start; text-align: left; border: 2px solid var(--borda); background: #fff; border-radius: 14px; padding: .8rem; cursor: pointer; font: inherit; color: inherit; } .adm-modo .kpi-ic { flex: none; margin: 0; } .adm-modo div { display: grid; gap: .2rem; } .adm-modo small { color: var(--txt2); font-size: .8rem; }
.adm-modo em { font-style: normal; font-size: .7rem; background: #dcfce7; color: #15803d; border-radius: 99px; padding: .1em .5em; margin-left: .3rem; vertical-align: 2px; }
.adm-modo.on { border-color: var(--azul); background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.adm-check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; } .adm-check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--azul); } .adm-check span { display: grid; } .adm-check small { color: var(--txt2); font-size: .8rem; }
.adm-ok { padding: 1.1rem 1.2rem; display: grid; gap: .8rem; border-color: #86efac; } .adm-ok header { display: flex; gap: .7rem; align-items: center; } .adm-ok h3 { margin: 0; } .adm-ok p { margin: .15rem 0 0; color: var(--txt2); font-size: .9rem; } .adm-ok .kpi-ic { margin: 0; flex: none; }
.adm-link { display: grid; gap: .6rem; }
.adm-link-url { display: flex; align-items: center; gap: .5rem; background: #f8fafc; border: 1px dashed #93c5fd; border-radius: 12px; padding: .2rem .7rem; } .adm-link-url .i { width: 16px; color: var(--azul); } .adm-link-url input { flex: 1; border: 0; background: none; font: inherit; font-size: .85rem; padding: .55rem 0; color: var(--txt); min-width: 0; }
.adm-link-bts { display: flex; flex-wrap: wrap; gap: .45rem; }
.adm-zap { color: #15803d; border-color: #86efac; } .adm-zap:hover { background: #f0fdf4; }
.adm-nota { margin: 0; font-size: .78rem; color: var(--txt2); display: flex; gap: .35rem; align-items: flex-start; } .adm-nota .i { width: 14px; flex: none; margin-top: .1rem; color: var(--azul); }
.adm-mini { display: flex; gap: .5rem; align-items: flex-end; } .adm-mini .adm-campo { flex: 1; } .adm-mini .btn { margin-bottom: 1px; }
.adm-aluno-cab { display: flex; gap: .9rem; align-items: center; } .adm-aluno-cab p { margin: .25rem 0 .45rem; }
.adm-perigo { border-color: #fecaca; }
.adm-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50; display: flex; gap: .5rem; align-items: center; background: var(--navy); color: #fff; padding: .75rem 1rem; border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.5); font-size: .9rem; max-width: min(420px, 90vw); animation: admEntra .3s ease-out; transition: opacity .4s, transform .4s; }
.adm-toast .i { width: 18px; color: #4ade80; flex: none; } .adm-toast.erro .i { color: #f87171; } .adm-toast.sai { opacity: 0; transform: translateY(10px); }
@keyframes admEntra { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 760px) { .adm-dois, .adm-modos { grid-template-columns: minmax(0, 1fr); } .adm-mini { flex-direction: column; align-items: stretch; } .adm-alerta { flex-wrap: wrap; } }
.adm-modos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .desemp .adm-modos.tres { grid-template-columns: minmax(0, 1fr); } @media (max-width: 760px) { .adm-modos.tres { grid-template-columns: minmax(0, 1fr); } }