/* =========================================================================
   Fluxo Edu — folha compartilhada
   Vocabulário visual: ficha clínica impressa. Papel, régua, tinta.
   ========================================================================= */
:root{
  --ink:#11201E;
  --ink-soft:#48605C;
  --ink-faint:#7C918C;
  --paper:#F4F6F5;
  --card:#FFFFFF;
  --line:#D6DFDB;
  --line-strong:#A9BAB5;
  --teal:#2A5F6B;
  --teal-dark:#1D454E;
  --quiz:#2A5F6B;
  --osce:#7A5320;
  --alert:#A93A34;
  --radius:10px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--teal)}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ---------- barra dos módulos ---------- */
.fx-bar{
  position:sticky;top:0;z-index:60;
  background:var(--teal-dark);color:#fff;
  display:flex;align-items:center;gap:14px;
  padding:9px 16px;font-size:13.5px;
}
.fx-bar a,.fx-bar button{font:inherit}
.fx-back{
  color:#fff;text-decoration:none;opacity:.85;
  border:1px solid rgba(255,255,255,.32);border-radius:7px;padding:4px 10px;
}
.fx-back:hover{opacity:1;background:rgba(255,255,255,.1)}
.fx-bar-title{font-weight:600;letter-spacing:-.01em}
.fx-bar-user{margin-left:auto;opacity:.75}
.fx-bar-out{
  background:transparent;color:#fff;border:0;cursor:pointer;
  opacity:.75;padding:4px 2px;text-decoration:underline;text-underline-offset:3px;
}
.fx-bar-out:hover{opacity:1}

/* ---------- hub ---------- */
.hub{max-width:820px;margin:0 auto;padding:0 20px 80px}

.hub-head{padding:44px 0 0}
.hub-mark{display:flex;align-items:baseline;gap:10px}
.hub-mark .nome{
  font-family:var(--serif);font-size:27px;font-weight:400;
  letter-spacing:-.015em;color:var(--ink);
}
.hub-mark .selo{
  font-size:12.5px;color:var(--ink-faint);
  border-left:1px solid var(--line-strong);padding-left:10px;
}
.trace{display:block;width:100%;height:22px;margin:16px 0 0}
.trace path{fill:none;stroke:var(--line-strong);stroke-width:1.25}

.hub-lead{
  font-family:var(--serif);font-size:20px;line-height:1.55;
  color:var(--ink-soft);max-width:34em;margin:26px 0 0;font-weight:400;
}

/* ---------- módulos ---------- */
.mods{margin:38px 0 0;border-top:1px solid var(--line)}
.mod{
  display:block;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
  padding:24px 20px 24px 21px;margin-left:-24px;
  transition:background .14s ease,border-left-color .14s ease;
}
.mod:hover,.mod:focus-visible{background:var(--card)}
.mod.quiz:hover,.mod.quiz:focus-visible{border-left-color:var(--quiz)}
.mod.osce:hover,.mod.osce:focus-visible{border-left-color:var(--osce)}
.mod h2{
  font-size:19px;margin:0 0 5px;font-weight:600;letter-spacing:-.01em;
}
.mod p{margin:0;color:var(--ink-soft);font-size:14.5px;max-width:46em}
.mod .stat{
  margin:11px 0 0;font-size:13px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.mod .stat b{color:var(--ink-soft);font-weight:600}

/* ---------- entrada do aluno ---------- */
.aluno-nota{
  margin:34px 0 0;padding:18px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  font-size:14px;color:var(--ink-soft);
}
.aluno-nota h3{margin:0 0 6px;font-size:14.5px;color:var(--ink);font-weight:600}
.aluno-nota a{font-weight:600}

/* ---------- login ---------- */
.entrar{max-width:394px;margin:0 auto;padding:64px 20px 90px}
.entrar .hub-mark{justify-content:flex-start;margin-bottom:8px}
.entrar h1{
  font-family:var(--serif);font-weight:400;font-size:23px;
  margin:30px 0 4px;letter-spacing:-.01em;
}
.entrar .sub{color:var(--ink-soft);font-size:14.5px;margin:0 0 26px}

label{display:block;font-size:13px;color:var(--ink-soft);margin:0 0 5px;font-weight:500}
input[type=text],input[type=email],input[type=password]{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line-strong);border-radius:8px;
  padding:11px 12px;margin:0 0 16px;
}
input:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}

.btn{
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  background:var(--teal);color:#fff;border:1px solid var(--teal);
  border-radius:8px;padding:11px 18px;
}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--teal);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--card);color:var(--teal-dark)}
.btn.link{background:none;border:0;color:var(--teal);padding:0;font-weight:500;font-size:14px;text-decoration:underline;text-underline-offset:3px}

.aviso{
  font-size:14px;border-radius:8px;padding:10px 12px;margin:0 0 16px;
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);
}
.aviso.erro{border-color:#E3B7B4;background:#F8E6E4;color:#7E2B26}
.aviso.ok{border-color:#B3D8C4;background:#E4F2EA;color:#0E5A3B}
.aviso:empty{display:none}

.alt{margin:22px 0 0;font-size:14px;color:var(--ink-soft);text-align:center}

.rodape{
  max-width:820px;margin:0 auto;padding:26px 20px 40px;
  border-top:1px solid var(--line);
  color:var(--ink-faint);font-size:12px;line-height:1.7;
}

@media (max-width:560px){
  .hub{padding:0 16px 60px}
  .hub-head{padding-top:30px}
  .hub-mark .nome{font-size:23px}
  .hub-lead{font-size:17.5px}
  .mod{margin-left:-19px;padding:20px 14px 20px 16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}