/* =========================================================
   Páginas de navegação: o índice das aulas e o cronograma.
   Folha comum às duas, para que a troca entre elas não
   pareça a troca de site.

   Os slides NÃO usam este arquivo. Eles têm o visual fixo
   do template do docente, em slides.css, e não trocam de tema.

   Sumário
   1. Tokens (tema escuro e tema claro)
   2. Base
   3. Barra do topo: marca, abas e botão de tema
   4. Capa: eyebrow, título, ações e números
   5. Cabeçalho de seção e rodapé
   6. Responsivo, movimento reduzido e impressão
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* tema escuro, o padrão */
  color-scheme:dark;
  --bg:
    radial-gradient(1100px 620px at 12% -8%, rgba(76,194,255,.13), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(167,139,250,.11), transparent 60%),
    #080D19;
  --ink:#080D19;
  --painel:rgba(255,255,255,.045);
  --painel-2:rgba(255,255,255,.075);
  --linha:rgba(255,255,255,.11);
  --linha-2:rgba(255,255,255,.20);
  --texto:#EAF0FB;
  --suave:#8C9AB4;
  --suave-2:#5E6B84;
  --vidro:rgba(8,13,25,.82);
  --sombra:0 18px 46px rgba(0,0,0,.5);

  --acento:#4CC2FF;
  --sobre-acento:#080D19;
  --roxo:#A78BFA;
  --vermelho:#DC2626;

  /* tipografia */
  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --corpo:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","Consolas",ui-monospace,monospace;

  --r:14px;
  --maxw:1220px;
}

[data-tema="claro"]{
  color-scheme:light;
  --bg:
    radial-gradient(1000px 560px at 10% -10%, rgba(18,115,196,.10), transparent 60%),
    radial-gradient(860px 480px at 94% 2%, rgba(124,92,240,.09), transparent 60%),
    #F6F8FC;
  --ink:#F6F8FC;
  --painel:rgba(15,23,42,.035);
  --painel-2:rgba(15,23,42,.065);
  --linha:rgba(15,23,42,.13);
  --linha-2:rgba(15,23,42,.26);
  --texto:#101B33;
  --suave:#54617A;
  --suave-2:#7E8CA5;
  --vidro:rgba(246,248,252,.86);
  --sombra:0 18px 40px rgba(16,27,51,.16);

  --acento:#2563EB;
  --sobre-acento:#FFFFFF;
  --roxo:#4F46E5;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  background-attachment:fixed;
  color:var(--texto);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.6vw,25px);letter-spacing:-.02em;margin:0}
.eyebrow{font:400 11.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--suave-2);margin:0}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ---------- 3. Barra do topo ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--vidro);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.topbar .wrap{display:flex;flex-direction:column;gap:10px;padding-top:10px;padding-bottom:10px}
/* a linha de cima é idêntica nas duas páginas e nunca quebra:
   se faltar espaço, quem encolhe é o nome da marca */
.topbar-linha{display:flex;align-items:center;gap:14px;min-height:40px}

.brand{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brand-nome{overflow:hidden;text-overflow:ellipsis}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 22%,transparent);flex:none}

/* as duas abas: a página atual leva aria-current="page" */
.abas{display:flex;flex:none;gap:3px;padding:3px;border:1px solid var(--linha);border-radius:12px;background:var(--painel);margin-right:auto}
.abas a{
  height:32px;border-radius:9px;padding:0 12px;
  display:inline-flex;align-items:center;gap:8px;
  font:600 12.5px/1 var(--corpo);color:var(--suave);text-decoration:none;white-space:nowrap;
  transition:color .15s,background .15s;
}
.abas a:hover{color:var(--texto);background:var(--painel-2)}
.abas a[aria-current="page"]{color:var(--ink);background:var(--texto)}
.abas svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.btn-tema{
  flex:none;width:38px;height:38px;border-radius:11px;cursor:pointer;
  background:var(--painel);border:1px solid var(--linha);color:var(--suave);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s;
}
.btn-tema:hover{color:var(--texto);border-color:var(--linha-2);background:var(--painel-2)}
.btn-tema svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-tema .ico-sol{display:none}
[data-tema="claro"] .btn-tema .ico-sol{display:block}
[data-tema="claro"] .btn-tema .ico-lua{display:none}

/* ---------- 4. Capa ---------- */
.hero{padding:56px 0 8px}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,6.4vw,66px);line-height:.98;letter-spacing:-.03em;
  margin:16px 0 0;
}
h1 em{font-style:normal;color:var(--acento)}
.lede{max-width:56ch;color:var(--suave);margin:16px 0 0;font-size:clamp(15px,2vw,18px)}

.acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 0}
.btn-principal{
  display:inline-flex;align-items:center;gap:10px;
  font:600 14.5px/1 var(--corpo);text-decoration:none;
  color:var(--ink);background:var(--texto);border:1px solid var(--texto);
  border-radius:12px;padding:13px 20px;cursor:pointer;
  transition:transform .16s,box-shadow .16s;
}
.btn-principal:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.btn-principal:active{transform:translateY(0)}
.btn-principal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-principal svg .pt{fill:currentColor;stroke:none}
.acoes-nota{margin:0;font:400 13px/1.4 var(--corpo);color:var(--suave);max-width:40ch}

.stats{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.stats li{border:1px solid var(--linha);background:var(--painel);border-radius:12px;padding:12px 16px;min-width:118px;flex:1 1 118px}
.stats b{display:block;font-family:var(--display);font-size:clamp(22px,3.4vw,30px);line-height:1.1;letter-spacing:-.02em}
.stats span{font:400 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--suave-2)}

/* ---------- 5. Seções e rodapé ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sec-head p{margin:4px 0 0;color:var(--suave);font-size:14px;max-width:60ch}

footer{margin-top:56px;border-top:1px solid var(--linha);padding:22px 0 44px;color:var(--suave-2);font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer code{font-family:var(--mono);font-size:12px;background:var(--painel-2);padding:1px 6px;border-radius:4px}

/* ---------- 6. Responsivo e afins ---------- */
@media (max-width:700px){
  .hero{padding-top:34px}
  .topbar .wrap{padding-top:8px;padding-bottom:8px}
  .topbar-linha{gap:10px}
  .brand{font-size:15px}
  .brand-longo{display:none}
  .abas a{padding:0 10px}
  .abas svg,.abas .aba-longo{display:none}
  .btn-principal{width:100%;justify-content:center}
  .acoes-nota{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{
  body{background:#fff;color:#111}
  .topbar,.acoes{display:none}
  .stats li{break-inside:avoid;border-color:#ccc}
}