/* ==========================================================================
   EMCASH ACADEMY — folha principal
   Ordem: reset · tipografia · primitivos · acesso · shell · telas · movimento
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--r-2);
}
.vault :focus-visible { outline-color: var(--metal-bright); }

::selection { background: var(--cofre-200); color: var(--cofre-900); }

/* ------------------------------- tipografia ------------------------------ */
h1, h2, h3, h4, .display { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: var(--lh-snug); }
h2 { font-size: var(--t-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
p { margin: 0; }
a { color: var(--action-ink); text-decoration-color: var(--action-line); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num  { font-variant-numeric: tabular-nums; }

.label {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  font-family: var(--font-sans);
}
.label--metal { color: var(--metal-ink); }
.label--onvault { color: var(--vault-ink-2); }

.lede { font-size: 1.02rem; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.measure { max-width: var(--measure); }
.scroll-x { overflow-x: auto; }

/* filete de latão — assinatura gráfica do sistema */
.rule-brass {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--metal) 0%, var(--rule-brass) 42%, transparent 100%);
}
.rule-hair { height: 1px; border: 0; margin: 0; background: var(--rule); }

/* ------------------------------- primitivos ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-muted); }
.btn:active { transform: translateY(1px); }
.btn__ico { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: var(--action); border-color: var(--action); color: var(--on-action);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }

.btn--vault {
  background: var(--cofre-600); border-color: var(--cofre-600); color: #f2fbf9;
}
.btn--vault:hover { background: var(--cofre-700); border-color: var(--cofre-700); color: #f2fbf9; }

.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); border-color: var(--rule); color: var(--ink); }

.btn--sm { padding: 6px 13px; font-size: var(--t-xs); }
.btn--lg { padding: 13px 24px; font-size: var(--t-body); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.iconbtn {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r-3);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--rule-strong); }
.iconbtn svg { width: 17px; height: 17px; }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
}
.card--raised { box-shadow: var(--sh-2); }
.card--pad { padding: var(--s-6); }
.card--flush { padding: 0; overflow: hidden; }

/* selo de estado — cor nunca sozinha: sempre marcador + rótulo */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px;
  border: 1px solid var(--rule); border-radius: var(--r-2);
  background: var(--surface-2);
  font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.pill--ok { background: var(--st-ok-wash); border-color: transparent; color: var(--st-ok-ink); }
.pill--ok .pill__dot { background: var(--st-ok); }
.pill--atencao { background: var(--st-atencao-wash); border-color: transparent; color: var(--st-atencao-ink); }
.pill--atencao .pill__dot { background: var(--st-atencao); }
.pill--critico { background: var(--st-critico-wash); border-color: transparent; color: var(--st-critico-ink); }
.pill--critico .pill__dot { background: var(--st-critico); }
.pill--accent { background: var(--accent-wash); border-color: transparent; color: var(--accent-ink); }
.pill--accent .pill__dot { background: var(--accent); }
.pill--metal { background: transparent; border-color: var(--rule-brass); color: var(--metal-ink); }
.pill--metal .pill__dot { background: var(--metal); }

.serial {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: .08em; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* barra de progresso (cobre = progresso, dentro dos 30%) */
.meter { height: 6px; border-radius: var(--r-1); background: var(--surface-inset); border: 1px solid var(--rule-soft); overflow: hidden; }
.meter__fill { height: 100%; background: var(--action); border-radius: var(--r-1) 0 0 var(--r-1); transition: width var(--dur-4) var(--ease-out); }
.meter__fill--done { background: var(--st-ok); }
.meter--tall { height: 9px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.field__hint { font-size: var(--t-xs); color: var(--ink-muted); }
.field__err { font-size: var(--t-xs); color: var(--st-critico-ink); font-weight: 600; }

.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.input::placeholder, textarea::placeholder { color: var(--ink-muted); }
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-wash);
}
textarea { min-height: 96px; resize: vertical; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 680px) { .grid-2 { grid-template-columns: 1fr; } }

/* cabeçalho de seção com filete */
.sec {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-4); flex-wrap: wrap;
}
.sec:first-child { margin-top: 0; }
.sec__title { display: flex; flex-direction: column; gap: 2px; }
.sec__title h2 { font-size: var(--t-h2); }

/* ==========================================================================
   BRASÃO E SELOS
   ========================================================================== */
.crest { display: block; flex: none; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .01em; color: inherit;
}
.brand__sub {
  font-size: .61rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 4px; font-weight: 600;
}
.vault .brand__sub { color: var(--vault-ink-2); }

/* selo circular com texto curvo */
.stamp { position: relative; display: grid; place-items: center; flex: none; }
.stamp__ring { position: absolute; inset: 0; }
.stamp__core { display: grid; place-items: center; text-align: center; }

/* ==========================================================================
   TELA DE ACESSO ("cofre") — sempre em teal profundo, em qualquer tema
   ========================================================================== */
.vault {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% -20%, #0b3c34 0%, transparent 60%),
    radial-gradient(80% 60% at 85% 110%, #0a332c 0%, transparent 55%),
    var(--vault-bg);
  color: var(--vault-ink);
  overflow: hidden;
  isolation: isolate;
}
.vault__guilloche {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  /* vinheta: nenhuma gravura encosta na borda, nada aparece "cortado" */
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 46%, #000 26%, rgba(0,0,0,.45) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 46%, #000 26%, rgba(0,0,0,.45) 66%, transparent 100%);
}
.vault__grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
}

.vault__top {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) clamp(var(--s-5), 4vw, var(--s-9));
  border-bottom: 1px solid var(--vault-rule);
}
.vault__topmeta { display: flex; align-items: center; gap: var(--s-5); }
.vault__topmeta .label { color: var(--vault-ink-2); }
.vault .iconbtn {
  background: rgba(255,255,255,.04); border-color: var(--vault-rule); color: var(--vault-ink-2);
}
.vault .iconbtn:hover { background: rgba(255,255,255,.09); color: var(--vault-ink); border-color: rgba(220,192,105,.4); }

.vault__body {
  position: relative; z-index: 1;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(var(--s-5), 3.5vh, var(--s-8)) clamp(var(--s-4), 4vw, var(--s-9));
}
.vault__inner { width: 100%; max-width: 1080px; }

.vault__foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) clamp(var(--s-5), 4vw, var(--s-9));
  border-top: 1px solid var(--vault-rule);
  font-size: var(--t-xs); color: var(--vault-ink-2); flex-wrap: wrap;
}
.vault__foot .mono { letter-spacing: .06em; }

/* ---- headline do acesso ---- */
.acs__head { text-align: center; max-width: 780px; margin: 0 auto var(--s-7); }
.acs__mote {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-label); letter-spacing: .26em; text-transform: uppercase;
  color: var(--metal-bright); font-weight: 600; margin-bottom: var(--s-4);
}
.acs__mote span { white-space: nowrap; }
.acs__mote i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.acs__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-display-1);
  line-height: var(--lh-tight); letter-spacing: -.015em; color: #f3faf8; margin: 0;
}
.acs__title em { font-style: italic; color: var(--latao-300); }
.acs__rule {
  width: 132px; height: 1px; margin: var(--s-4) auto var(--s-4);
  background: linear-gradient(90deg, transparent, var(--metal-bright), transparent);
  transform-origin: center;
}
.acs__sub { color: var(--vault-ink-2); font-size: 1rem; max-width: 60ch; margin: 0 auto; }

/* ---- as duas placas de acesso ---- */
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 820px) { .plates { grid-template-columns: 1fr; } }

.plate {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--vault-rule); border-radius: var(--r-5);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 40%, rgba(0,0,0,.14) 100%),
    #06302a;
  color: var(--vault-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -32px rgba(0,0,0,.9);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.plate::after {                      /* filete de latão que corre na borda superior */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--metal-bright), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
.plate:hover, .plate:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(220,192,105,.34);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 32px 56px -30px rgba(0,0,0,.95);
}
.plate:hover::after, .plate:focus-visible::after { transform: scaleX(1); }

/* slot de fotografia (opcional) — ver README */
.plate__photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--plate-photo, none);
  background-size: cover; background-position: center;
  opacity: var(--plate-photo-opacity, .22);
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(200deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 55%, transparent 88%);
}
.plate__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--s-4); flex: 1;
}

/* gravura ampla, diferente em cada placa — dá identidade sem depender de foto */
.plate__engraving {
  position: absolute; z-index: 0; pointer-events: none;
  right: -70px; top: -58px; width: 290px; height: 290px;
  opacity: .85;
  -webkit-mask-image: radial-gradient(closest-side at 58% 34%, #000 10%, rgba(0,0,0,.5) 58%, transparent 100%);
  mask-image: radial-gradient(closest-side at 58% 34%, #000 10%, rgba(0,0,0,.5) 58%, transparent 100%);
  transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}
.plate:hover .plate__engraving { transform: rotate(-7deg) scale(1.05); opacity: 1; }

.plate__medalwrap { display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: var(--s-1); }
.plate__medal {
  grid-area: 1 / 1; width: 92px; height: 92px;
  transition: transform var(--dur-4) var(--ease-out);
}
.plate__glyph {
  grid-area: 1 / 1; display: grid; place-items: center; color: var(--latao-300);
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle, #06302a 62%, transparent 100%);
}
.plate__glyph svg { width: 24px; height: 24px; }
.plate:hover .plate__medal { transform: rotate(14deg); }
.plate__eyebrow { color: var(--metal-bright); }
.plate__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; color: #f3faf8; }
.plate__desc { color: var(--vault-ink-2); font-size: var(--t-sm); max-width: 40ch; }
.plate__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--vault-rule); }
.plate__metaitem { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--vault-ink-2); }
.plate__metaitem svg { width: 14px; height: 14px; flex: none; opacity: .85; }
.plate__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: #f3faf8;
}
.plate__cta svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.plate:hover .plate__cta svg { transform: translateX(4px); }

/* ---- painel de credenciais ---- */
.creds { max-width: 460px; margin: 0 auto; }
.creds__id {
  display: flex; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--vault-rule);
}
.creds__id canvas { width: 60px; height: 60px; flex: none; }
.creds__idtext { display: flex; flex-direction: column; gap: 3px; }
.creds__idtext strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: #f3faf8; }
.creds__card {
  padding: var(--s-6);
  border: 1px solid var(--vault-rule); border-radius: var(--r-5);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)), #06302a;
  box-shadow: 0 24px 48px -32px rgba(0,0,0,.9);
}
.creds__card .field > label { color: var(--vault-ink-2); }
.creds__card .input {
  background: rgba(3,26,22,.6); border-color: var(--vault-rule); color: var(--vault-ink);
}
.creds__card .input::placeholder { color: rgba(157,189,181,.55); }
.creds__card .input:focus { border-color: var(--metal-bright); box-shadow: 0 0 0 3px rgba(201,162,39,.16); }
.creds__stack { display: flex; flex-direction: column; gap: var(--s-4); }
.creds__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.creds__aside { text-align: center; margin-top: var(--s-4); font-size: var(--t-xs); color: var(--vault-ink-2); }
.creds__aside button { background: none; border: 0; padding: 0; color: var(--latao-300); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.creds__alert {
  display: flex; gap: var(--s-3); padding: 11px 13px; border-radius: var(--r-3);
  background: rgba(180,35,31,.16); border: 1px solid rgba(241,139,134,.32);
  color: #ffd9d7; font-size: var(--t-xs);
}
.creds__note {
  display: flex; gap: var(--s-3); padding: 11px 13px; border-radius: var(--r-3);
  background: rgba(255,255,255,.045); border: 1px solid var(--vault-rule);
  color: var(--vault-ink-2); font-size: var(--t-xs);
}
.creds__note svg, .creds__alert svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* cunhagem no login bem-sucedido */
.mint {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(4,33,29,.94); backdrop-filter: blur(3px);
}
.mint__seal { display: grid; place-items: center; }
.mint__label { margin-top: var(--s-5); text-align: center; color: var(--latao-300); }

/* ==========================================================================
   SHELL DO APP
   ========================================================================== */
.shell {
  display: grid;
  grid-template-columns: var(--shell-nav) minmax(0, 1fr);
  grid-template-rows: var(--shell-top) minmax(0, 1fr);
  grid-template-areas: "nav top" "nav main";
  min-height: 100vh;
}

.nav {
  grid-area: nav;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--vault-bg);
  color: var(--vault-ink);
  border-right: 1px solid rgba(0,0,0,.4);
}
.nav__brand { padding: 0 var(--s-2) var(--s-6); }
.nav__brand .brand__name { color: #f2fbf9; }
.nav__group { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-6); }
.nav__grouplabel { padding: 0 var(--s-2) var(--s-2); color: rgba(157,189,181,.75); }
.nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-3); border: 0; border-radius: var(--r-3);
  background: transparent; color: var(--vault-ink-2);
  font-size: var(--t-sm); font-weight: 500; text-align: left; cursor: pointer;
  position: relative;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav__item svg { width: 18px; height: 18px; flex: none; }
.nav__item:hover { background: rgba(255,255,255,.06); color: var(--vault-ink); }
.nav__item.is-active { background: rgba(255,255,255,.09); color: #f2fbf9; font-weight: 600; }
.nav__item.is-active::before {
  content: ""; position: absolute; left: -6px; top: 7px; bottom: 7px;
  width: 2px; background: var(--metal-bright); border-radius: 2px;
}
.nav__count { margin-left: auto; font-size: var(--t-label); color: var(--vault-ink-2); font-family: var(--font-mono); }
.nav__foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--vault-rule); }

.nav__me { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-2) var(--s-4); }
.nav__mename { display: block; font-size: var(--t-sm); font-weight: 600; color: #f2fbf9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__meband { display: block; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--latao-300); margin-top: 2px; }

.top {
  grid-area: top; position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0 clamp(var(--s-4), 3vw, var(--s-7));
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.top__crumbs { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.top__crumb { font-size: var(--t-sm); color: var(--ink-muted); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.top__crumb:hover { color: var(--ink); }
.top__sep { color: var(--rule-strong); }
.top__here { font-family: var(--font-display); font-size: 1.06rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__actions { display: flex; align-items: center; gap: var(--s-2); }

.main { grid-area: main; padding: clamp(var(--s-5), 3vw, var(--s-7)) clamp(var(--s-4), 3vw, var(--s-7)) var(--s-11); min-width: 0; }
.main__inner { max-width: 1140px; }

@media (max-width: 1040px) {
  .shell { grid-template-columns: 74px minmax(0, 1fr); }
  .nav { padding-left: var(--s-2); padding-right: var(--s-2); align-items: center; }
  .nav .label, .nav .nav__mename, .nav .nav__meband, .nav .nav__count, .nav .brand__word { display: none; }
  .nav__brand { padding: 0 0 var(--s-6); }
  .nav__item { justify-content: center; padding: 10px; width: 44px; }
  .nav__item.is-active::before { left: -8px; }
  .nav__me { justify-content: center; }
  .nav__group { width: 100%; align-items: center; }
}
@media (max-width: 620px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "nav"; grid-template-rows: var(--shell-top) 1fr auto; }
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; height: auto; z-index: 30;
    flex-direction: row; justify-content: space-around; padding: var(--s-2);
    border-right: 0; border-top: 1px solid rgba(0,0,0,.4);
  }
  .nav__brand, .nav__foot, .nav__grouplabel { display: none; }
  .nav__group { flex-direction: row; margin: 0; }
  .nav__item.is-active::before { display: none; }
  .main { padding-bottom: var(--s-11); }
}

/* ==========================================================================
   PAINEL DO COLABORADOR
   ========================================================================== */

/* --- cabeçalho de matrícula (ficha) --- */
.ficha {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border: 1px solid var(--rule); border-radius: var(--r-4);
  background:
    linear-gradient(135deg, var(--accent-wash) 0%, transparent 46%),
    var(--surface);
  box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
}
.ficha__guilloche { position: absolute; right: -40px; top: -30px; opacity: .5; pointer-events: none; }
.ficha__id { display: flex; align-items: center; gap: var(--s-4); }
.ficha__name { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; }
.ficha__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: 6px; font-size: var(--t-xs); color: var(--ink-muted); }
.ficha__ic { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ficha__icval { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; text-align: left; }
  .ficha__ic { align-items: flex-start; text-align: left; }
}

/* --- faixa de aferição (Em formação → Referência) --- */
.faixa { display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.faixa__track { display: flex; gap: 3px; }
.faixa__seg { height: 5px; flex: 1; border-radius: var(--r-1); background: var(--surface-inset); border: 1px solid var(--rule-soft); }
.faixa__seg.is-on { background: var(--action); border-color: transparent; }
.faixa__seg.is-top { background: var(--metal); border-color: transparent; }
.faixa__legend { display: flex; justify-content: space-between; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* --- próximo passo --- */
.nextup {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--action-line); border-radius: var(--r-4);
  background: linear-gradient(120deg, var(--action-wash) 0%, transparent 70%), var(--surface);
}
.nextup__body { flex: 1; min-width: 220px; }
.nextup__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; margin-top: 3px; }

/* --- extrato de formação (linhas, como extrato bancário) --- */
.extrato { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.extrato th {
  text-align: left; padding: 10px var(--s-4);
  font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.extrato td { padding: 12px var(--s-4); border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.extrato tbody tr:last-child td { border-bottom: 0; }
.extrato tbody tr:hover { background: var(--surface-2); }
.extrato .num, .extrato .mono { text-align: right; }
.extrato__nota { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- cartões de trilha --- */
.trilhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: var(--s-5); }
.trilha {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-4);
  box-shadow: var(--sh-1); cursor: pointer; text-align: left; overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.trilha::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--trilha-color, var(--accent));
}
.trilha:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--rule-strong); }
.trilha__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.trilha__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; }
.trilha__desc { font-size: var(--t-sm); color: var(--ink-2); flex: 1; }
.trilha__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.trilha__stats { display: flex; gap: var(--s-4); font-size: var(--t-xs); color: var(--ink-muted); }
.trilha__stats span { display: inline-flex; align-items: center; gap: 5px; }
.trilha__stats svg { width: 13px; height: 13px; }

/* --- detalhe da trilha: ementa + módulos --- */
.programa { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); align-items: start; }
@media (max-width: 980px) { .programa { grid-template-columns: minmax(0, 1fr); } }

.ementa { display: flex; flex-direction: column; gap: var(--s-3); }
.ementa__list { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: var(--t-sm); display: flex; flex-direction: column; gap: 6px; }

.modulos { display: flex; flex-direction: column; }
.modulo {
  display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: var(--s-4);
  align-items: center; padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--rule-soft); background: none; border-left: 0; border-right: 0; border-top: 0;
  text-align: left; cursor: pointer; width: 100%;
  transition: background var(--dur-1) var(--ease-out);
}
.modulo:hover { background: var(--surface-2); }
.modulo:last-child { border-bottom: 0; }
.modulo__idx {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2);
}
.modulo.is-done .modulo__idx { background: var(--st-ok-wash); border-color: transparent; color: var(--st-ok-ink); }
.modulo__title { font-weight: 600; font-size: var(--t-sm); }
.modulo__meta { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 2px; display: flex; gap: var(--s-3); flex-wrap: wrap; }

.aside-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.dl { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.dl__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); }
.dl__row dt { color: var(--ink-muted); font-size: var(--t-xs); }
.dl__row dd { margin: 0; font-weight: 600; text-align: right; }

/* --- leitor de módulo --- */
.leitor { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: var(--s-7); align-items: start; }
@media (max-width: 980px) { .leitor { grid-template-columns: minmax(0,1fr); } }
.prosa { font-size: 1rem; line-height: 1.75; color: var(--ink-2); max-width: var(--measure); display: flex; flex-direction: column; gap: var(--s-4); }
.prosa h3 { font-size: 1.12rem; color: var(--ink); margin-top: var(--s-3); }
.prosa strong { color: var(--ink); }
.prosa ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 6px; }
.prosa__drop::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.1rem; line-height: .82;
  padding: 4px 10px 0 0; color: var(--accent);
}
.embed { border: 1px solid var(--rule); border-radius: var(--r-4); overflow: hidden; background: var(--surface-2); }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed--doc { aspect-ratio: 4 / 3; }
.embed--video { aspect-ratio: 16 / 9; }
.embed--empty { display: grid; place-items: center; padding: var(--s-9) var(--s-5); text-align: center; color: var(--ink-muted); border-style: dashed; gap: var(--s-2); }
.embed--empty svg { width: 30px; height: 30px; opacity: .55; }
.leitor__nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); flex-wrap: wrap; }

/* --- aferição --- */
.afer { display: grid; grid-template-columns: minmax(0,1fr) 236px; gap: var(--s-7); align-items: start; }
@media (max-width: 980px) { .afer { grid-template-columns: minmax(0,1fr); } }
.afer__panel { position: sticky; top: calc(var(--shell-top) + var(--s-5)); }
.questao { padding: var(--s-6); border: 1px solid var(--rule); border-radius: var(--r-4); background: var(--surface); margin-bottom: var(--s-4); }
.questao__num { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.questao__enun { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; line-height: 1.4; }
.opts { display: flex; flex-direction: column; gap: var(--s-2); }
.opt {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: 11px var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-3);
  cursor: pointer; background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.opt:hover { background: var(--surface-2); border-color: var(--rule-strong); }
.opt__key {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted);
}
.opt__text { font-size: var(--t-sm); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.is-picked { border-color: var(--action); background: var(--action-wash); }
.opt.is-picked .opt__key { border-color: var(--action); background: var(--action); color: var(--on-action); }
.opt.is-right { border-color: var(--st-ok); background: var(--st-ok-wash); }
.opt.is-right .opt__key { border-color: var(--st-ok); background: var(--st-ok); color: #fff; }
.opt.is-wrong { border-color: var(--st-critico); background: var(--st-critico-wash); }
.opt.is-wrong .opt__key { border-color: var(--st-critico); background: var(--st-critico); color: #fff; }
.questao__fb { margin-top: var(--s-4); padding: 11px var(--s-4); border-radius: var(--r-3); background: var(--surface-2); border: 1px solid var(--rule); font-size: var(--t-xs); color: var(--ink-2); }
.afer__ledger { display: flex; flex-wrap: wrap; gap: 5px; }
.afer__tick {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--r-2);
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted);
  background: var(--surface); cursor: pointer;
}
.afer__tick.is-filled { border-color: var(--action); color: var(--action-ink); background: var(--action-wash); font-weight: 600; }

/* --- resultado --- */
.result { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-9) var(--s-6); text-align: center; }
.result__score { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 4.6rem); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.result__seal { margin-bottom: var(--s-2); }

/* --- certificado --- */
.cert-wrap { display: flex; justify-content: center; padding: var(--s-4) 0 var(--s-7); }
.cert {
  position: relative; width: 100%; max-width: 820px; aspect-ratio: 1.414 / 1;
  padding: clamp(var(--s-6), 4vw, var(--s-9));
  background: #fdfcf7; color: #14201c; overflow: hidden;
  border: 1px solid var(--rule-brass);
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cert__guilloche {
  position: absolute; inset: 0; z-index: 0; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 74% 66% at 50% 50%, rgba(0,0,0,.28) 0%, #000 62%, #000 100%);
  mask-image: radial-gradient(ellipse 74% 66% at 50% 50%, rgba(0,0,0,.28) 0%, #000 62%, #000 100%);
}
.cert__frame { position: absolute; inset: 14px; border: 1px solid rgba(176,138,30,.5); z-index: 1; pointer-events: none; }
.cert__frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(176,138,30,.24); }
.cert > *:not(.cert__guilloche):not(.cert__frame) { position: relative; z-index: 2; }
.cert__brand { display: flex; align-items: center; gap: var(--s-3); align-self: flex-start; }
.cert__kicker { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: #7a6a3c; font-weight: 600; }
.cert__mid { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto 0; padding: var(--s-5) 0 var(--s-4); }
.cert__title { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 400; color: #40514a; letter-spacing: .02em; }
.cert__name { font-family: var(--font-display); font-size: clamp(1.7rem, 1.1rem + 2.9vw, 2.9rem); font-style: italic; font-weight: 400; line-height: 1.1; padding-bottom: 10px; border-bottom: 1px solid rgba(176,138,30,.55); }
.cert__prog { font-family: var(--font-display); font-size: clamp(1.05rem, .9rem + .8vw, 1.35rem); font-weight: 600; }
.cert__body { color: #40514a; font-size: var(--t-sm); max-width: 56ch; }
.cert__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); width: 100%; margin-top: auto; }
.cert__sig { text-align: left; font-size: var(--t-xs); color: #5b6a63; }
.cert__sigline { width: 168px; border-top: 1px solid rgba(20,32,28,.35); margin-bottom: 6px; }
.cert__serial { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: #7a6a3c; }

/* --- estados vazios --- */
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-9) var(--s-5); text-align: center; color: var(--ink-muted);
  border: 1px dashed var(--rule-strong); border-radius: var(--r-4);
}
.vazio svg { width: 34px; height: 34px; opacity: .55; }

/* --- avatar --- */
.avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink);
  font-weight: 700; font-size: var(--t-xs); letter-spacing: .04em;
  border: 1px solid var(--accent-line);
}
.nav .avatar { background: rgba(255,255,255,.08); color: #f2fbf9; border-color: var(--vault-rule); }
.avatar--lg { width: 56px; height: 56px; font-size: 1rem; }

/* --- avisos --- */
.aviso {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 12px var(--s-4); border-radius: var(--r-3);
  border: 1px solid var(--rule); background: var(--surface-2);
  font-size: var(--t-xs); color: var(--ink-2);
}
.aviso svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.aviso--metal { border-color: var(--rule-brass); background: transparent; }
.aviso--metal svg { color: var(--metal-ink); }

/* --- toasts --- */
.toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 80; display: flex; flex-direction: column; gap: var(--s-2); max-width: 340px; }
.toast {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 12px var(--s-4);
  background: var(--vault-bg-2); color: var(--vault-ink);
  border: 1px solid var(--vault-rule); border-left: 2px solid var(--metal);
  border-radius: var(--r-3); box-shadow: var(--sh-3); font-size: var(--t-sm);
  animation: toast-in var(--dur-3) var(--ease-out) both;
}
.toast.is-out { animation: toast-out var(--dur-2) var(--ease-in-out) both; }
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--metal-bright); }

/* --- modal --- */
.modal-bg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding: 6vh var(--s-4); background: rgba(4,33,29,.5); backdrop-filter: blur(2px); overflow-y: auto; animation: fade-in var(--dur-2) var(--ease-out) both; }
.modal { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-5); box-shadow: var(--sh-3); animation: rise var(--dur-3) var(--ease-out) both; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); }
.modal__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--rule); }

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes stamp {
  0%   { opacity: 0; transform: scale(1.45) rotate(-7deg); }
  60%  { opacity: 1; transform: scale(.97) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes stamp-ring {
  0%   { opacity: .55; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* sequência de abertura do acesso — cada peça entra a partir de um estado quase final */
.anim-in     { animation: rise-sm var(--dur-3) var(--ease-out) both; }
.anim-rule   { animation: draw-x var(--dur-4) var(--ease-out) both; }
.anim-stamp  { animation: stamp var(--dur-4) var(--ease-stamp) both; }
.d-1 { animation-delay: 60ms; }
.d-2 { animation-delay: 130ms; }
.d-3 { animation-delay: 210ms; }
.d-4 { animation-delay: 300ms; }
.d-5 { animation-delay: 390ms; }
.d-6 { animation-delay: 480ms; }

.stamp-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--metal-bright);
  animation: stamp-ring 900ms var(--ease-out) both;
}
.is-shaking { animation: shake 420ms var(--ease-in-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .plate::after { transform: scaleX(1); }
}

/* selo de série no canto da placa de acesso */
.plate__body .plate__stamp {
  position: absolute; top: 2px; right: 0; z-index: 2;
  font-size: .62rem; letter-spacing: .2em; color: rgba(220, 192, 105, .62);
  padding: 3px 8px; border: 1px solid var(--vault-rule); border-radius: var(--r-1);
  line-height: 1;
}

/* ==========================================================================
   MVP — TELA DE ACESSO EM DUAS COLUNAS
   ========================================================================== */
.porta {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(var(--s-6), 5vw, var(--s-10));
  align-items: center;
}
@media (max-width: 900px) {
  .porta { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .porta__texto { text-align: center; }
  .porta__texto .acs__title, .porta__texto .acs__sub { text-align: center !important; }
  .porta__texto .acs__rule { margin-left: auto !important; }
  .porta__numeros { justify-content: center; }
}

.porta__texto .acs__title { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
.porta__numeros { display: flex; gap: var(--s-7); margin-top: var(--s-7); flex-wrap: wrap; }
.porta__numero { display: flex; flex-direction: column; gap: 2px; }
.porta__numero strong {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 500;
  color: var(--latao-300); line-height: 1; font-variant-numeric: tabular-nums;
}
.porta__numero span { font-size: var(--t-xs); color: var(--vault-ink-2); }

.porta__cartao {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid var(--vault-rule); border-radius: var(--r-5);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.14)), #06302a;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 28px 56px -34px rgba(0,0,0,.92);
}
.porta__cartao::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--metal-bright), transparent);
}
.porta__medalwrap { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: var(--s-2); }
.porta__medalwrap .plate__medal { grid-area: 1 / 1; width: 76px; height: 76px; }
.porta__medalwrap .plate__glyph { grid-area: 1 / 1; width: 36px; height: 36px; }
.porta__titulo { font-family: var(--font-display); font-size: 1.42rem; font-weight: 500; color: #f3faf8; }
.porta__ajuda { font-size: var(--t-sm); color: var(--vault-ink-2); margin-bottom: var(--s-2); }
.porta__cartao .field > label { color: var(--vault-ink-2); }
.porta__cartao .input {
  background: rgba(3,26,22,.6); border-color: var(--vault-rule); color: var(--vault-ink);
}
.porta__cartao .input::placeholder { color: rgba(157,189,181,.55); }
.porta__cartao .input:focus { border-color: var(--metal-bright); box-shadow: 0 0 0 3px rgba(201,162,39,.16); }
.porta__lembrar {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--vault-ink-2); margin: 2px 0 var(--s-2);
}
.porta__lembrar input { accent-color: var(--latao-400); }
.porta__rodape { font-size: var(--t-xs); color: var(--vault-ink-2); text-align: center; margin-top: var(--s-2); }
.porta__cartao .plate__stamp { top: var(--s-5); right: var(--s-5); }

/* ==========================================================================
   VISUALIZADOR DE MATERIAL
   ========================================================================== */
.materiais { display: flex; flex-direction: column; gap: var(--s-7); margin-bottom: var(--s-7); }
.material__cab { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.material__tipo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-wash);
  padding: 4px 9px; border-radius: var(--r-2);
}
.material__tipo svg { width: 14px; height: 14px; }
.material__titulo { font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; }

.visor { margin: 0; border: 1px solid var(--rule); border-radius: var(--r-4); overflow: hidden; background: var(--surface-2); }
.visor__quadro { width: 100%; background: var(--surface-inset); }
.visor__iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.visor__media { width: 100%; display: block; background: #000; }
.visor--audio .visor__faixa { padding: var(--s-5) var(--s-5) var(--s-4); background: var(--surface-2); }
.visor--audio .visor__media { background: transparent; }
.visor__pe {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 9px var(--s-4); border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--ink-muted); background: var(--surface);
}
.visor__abrir { font-weight: 600; white-space: nowrap; }
.visor--link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); background: var(--surface); flex-wrap: wrap;
}
.visor__titulo { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; margin-top: 2px; }
.visor--vazio { padding: var(--s-8) var(--s-5); text-align: center; border-style: dashed; }
.visor__aviso { color: var(--ink-muted); font-size: var(--t-sm); }

/* sumário lateral do módulo */
.sumario__item {
  display: flex; align-items: flex-start; gap: var(--s-2);
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px var(--s-3); border: 0; border-radius: var(--r-3);
  background: transparent; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.4;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.sumario__item:hover { background: var(--surface-2); color: var(--ink); }
.sumario__item.is-atual { background: var(--accent-wash); color: var(--ink); font-weight: 600; }
.sumario__n { width: 18px; flex: none; font-size: .7rem; }

/* ==========================================================================
   ÍNDICE DE CONHECIMENTO — explicação para o aluno
   ========================================================================== */
.ic-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 680px) { .ic-topo { grid-template-columns: 1fr; } }
.ic-valor { display: flex; align-items: baseline; gap: 4px; }
.ic-valor__n {
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.ic-valor__de { font-size: var(--t-sm); color: var(--ink-muted); }
.ic-explica { font-size: var(--t-sm); color: var(--ink-2); max-width: 62ch; }

.ic-parcelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-4); }
.ic-parcela {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--surface-2);
}
.ic-parcela__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.ic-parcela__cab strong { font-size: var(--t-sm); }
.ic-parcela__n { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.ic-parcela__pe { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-muted); }
.ic-parcela__falta { color: var(--action-ink); font-weight: 600; }
.ic-parcela__ok { color: var(--st-ok-ink); font-weight: 600; }

/* ==========================================================================
   CENTRAL DE REGISTRO
   ========================================================================== */
.nav__txt { font-size: var(--t-sm); }
@media (max-width: 1040px) { .nav .nav__txt { display: none; } }

.acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.barra-busca { margin-bottom: var(--s-4); max-width: 460px; }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }

.linha-aluno {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 12px var(--s-5); border: 0; border-bottom: 1px solid var(--rule-soft);
  background: none; text-align: left; cursor: pointer;
}
.linha-aluno:last-child { border-bottom: 0; }
.linha-aluno:hover { background: var(--surface-2); }
.linha-aluno__txt { flex: 1; display: flex; flex-direction: column; }
.linha-aluno__txt strong { font-size: var(--t-sm); }
.linha-aluno__txt span { font-size: var(--t-xs); color: var(--ink-muted); }
.linha-log { padding: 12px var(--s-5); border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm); }
.linha-log:last-child { border-bottom: 0; }

.check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.check input { accent-color: var(--action); width: 16px; height: 16px; }

.lista-check { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.lista-check__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-3); cursor: pointer;
}
.lista-check__item:hover { background: var(--surface-2); }
.lista-check__item input { accent-color: var(--action); width: 16px; height: 16px; flex: none; }
.lista-check__item > span { flex: 1; font-size: var(--t-sm); }

.editor { display: flex; flex-direction: column; }

.materiais-edit { display: flex; flex-direction: column; gap: var(--s-3); }
.material-edit { border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-4); background: var(--surface-2); }
.material-edit__cab { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.material-edit__cab strong { flex: 1; font-size: var(--t-sm); min-width: 140px; }
.material-edit__tipo {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--ink-muted);
}
.material-edit__tipo svg { width: 13px; height: 13px; }
.material-edit__url { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 6px; word-break: break-all; }
.material-edit__previa:not(:empty) { margin-top: var(--s-4); }

.q-edit { border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-4); margin-bottom: var(--s-3); background: var(--surface-2); }
.q-edit__cab { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.q-edit__cab strong { flex: 1; font-size: var(--t-sm); min-width: 160px; }
.q-edit__alts { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); }

.alt-linha { display: flex; align-items: center; gap: var(--s-3); }
.alt-linha input[type="radio"] { accent-color: var(--st-ok); width: 17px; height: 17px; flex: none; }

.modal-topo .modal-bg { z-index: 90; }
.modal.wide { max-width: 780px; }

.stat-tile .eyebrow { margin-bottom: 8px; display: block; }

@media print { .visor__pe, .visor__abrir { display: none !important; } }

/* selo de série do cartão de acesso */
.porta__cartao .plate__stamp {
  position: absolute; top: var(--s-5); right: var(--s-5); z-index: 2;
  font-size: .62rem; letter-spacing: .2em; color: rgba(220, 192, 105, .62);
  padding: 3px 8px; border: 1px solid var(--vault-rule); border-radius: var(--r-1); line-height: 1;
}