/* Central de controle | casca, login e navegação. Mesmo DS do CP Prime (ink, dourados, creme). */
:root{
  --ink:#1A1A1A; --gold-deep:#9A7B2E; --gold:#C9A227; --gold-dark:#7A5F1E; --cream:#F3EEE2;
  --ink-2:rgba(26,26,26,.76); --ink-3:rgba(26,26,26,.58); --hair:rgba(26,26,26,.13); --hair-2:rgba(26,26,26,.22);
  --panel:rgba(154,123,46,.07); --hover:rgba(201,162,39,.12); --focus:rgba(154,123,46,.55);
  --wash-2:rgba(201,162,39,.10);
  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --lado:236px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink)}
body{font-family:var(--serif);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- carregando ---------- */
.carregando{min-height:100vh;display:grid;place-items:center;color:var(--ink-3);font-size:14px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.cartao{width:100%;max-width:380px;border-top:3px solid var(--gold);background:rgba(255,255,255,.35);
  border-left:1px solid var(--hair);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:28px 26px 24px}
.cartao .brand{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;margin:0 0 6px}
.cartao h1{font-size:26px;line-height:1.1;font-weight:600;margin:0 0 20px}
.campo{display:block;margin:0 0 14px}
.campo span{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:4px}
.campo input{width:100%;padding:9px 11px;border:1px solid var(--hair-2);border-radius:4px;background:var(--cream)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
  border-radius:4px;padding:9px 16px;cursor:pointer;font-weight:600}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.largo{width:100%}
.link{border:0;background:none;padding:0;cursor:pointer;color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px;font-size:13.5px}
.rodape-login{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.msg{font-size:13.5px;margin:0 0 14px;padding:8px 10px;border-left:3px solid var(--ink);background:var(--wash-2)}
.msg.ok{border-left-color:var(--gold-dark)}

/* ---------- casca ---------- */
.casca{display:grid;grid-template-columns:var(--lado) minmax(0,1fr);min-height:100vh}
.lado{background:var(--ink);color:var(--cream);padding:22px 0 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.lado .marca{padding:0 20px 18px;border-bottom:1px solid rgba(243,238,226,.14)}
.lado .marca b{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.lado .marca span{display:block;font-size:19px;font-weight:600;margin-top:4px}
.setor{padding:14px 12px 4px}
.setor h2{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(243,238,226,.55);margin:0 8px 6px}
.setor a{display:flex;justify-content:space-between;align-items:center;padding:7px 8px;border-radius:4px;color:var(--cream);text-decoration:none;font-size:14.5px}
.setor a:hover{background:rgba(243,238,226,.08)}
.setor a[aria-current="page"]{background:rgba(201,162,39,.22);color:#fff}
.setor a .breve{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,238,226,.45)}
.lado .conta{margin-top:auto;padding:14px 20px 0;border-top:1px solid rgba(243,238,226,.14);font-size:12.5px;color:rgba(243,238,226,.7)}
.lado .conta .link{color:var(--gold);margin-top:6px}
.conteudo{min-width:0}
.topo{display:flex;align-items:center;gap:12px;padding:10px 28px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--cream);z-index:10}
.topo b{font-size:14px;font-weight:600;color:var(--ink-2)}
.b-lado{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair-2);background:transparent;border-radius:4px;padding:5px 10px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.b-lado:hover{background:var(--hover);color:var(--ink)}
/* barra escondida no computador */
.casca.lado-oculto{grid-template-columns:minmax(0,1fr)}
.casca.lado-oculto .lado{display:none}

.vazio-modulo{max-width:640px;margin:0 auto;padding:80px 28px;text-align:center;color:var(--ink-3)}
.vazio-modulo h1{color:var(--ink);font-size:26px;font-weight:600;margin:0 0 8px}

@media (max-width:860px){
  .casca{grid-template-columns:1fr}
  .lado{position:fixed;inset:0 auto 0 0;width:min(82vw,280px);z-index:20;transform:translateX(-100%);transition:transform .2s}
  .casca.menu-aberto .lado{transform:none;box-shadow:0 0 0 100vmax rgba(26,26,26,.35)}
  .casca.lado-oculto .lado{display:flex}
  .topo{padding:10px 16px}
  .wrap{padding:18px 16px 60px!important}
}