/* ============================================================
   Portal de Governança — DCG/SEFA-PR
   Estilo compartilhado entre as telas do portal (login, área
   logada etc.) — tokens de cor/tipografia e componentes comuns
   (badge institucional, card, botão primário, aviso, chip).
   Cada página mantém, no próprio <style>, só o layout que é
   específico dela.
   ============================================================ */
:root{
  --navy:#1F3864; --navy-dk:#152847; --navy-lt:#2a5ba6; --gold:#BF9000; --gold-lt:#e8c84a;
  --gray-light:#F2F2F2; --gray-mid:#D9D9D9; --white:#FFFFFF; --text:#222; --muted:#6b7280;
  --ok:#1a8a3e; --card-shadow:0 24px 70px rgba(15,30,60,.18);
}
*{box-sizing:border-box;}
body{margin:0;font-family:Calibri,Arial,sans-serif;color:var(--text);}

/* ---------- badge institucional (SEFA/PR · DCG + CSU) ---------- */
.hero-id{
  display:inline-flex;flex-direction:column;gap:4px;width:fit-content;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:10px 16px;
}
.hero-id .line1{display:flex;align-items:center;gap:8px;font-size:.82em;font-weight:700;letter-spacing:.03em;color:#eef2fa;}
.hero-id .line1 .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-lt);flex:none;}
.hero-id .line2{font-size:.74em;font-weight:500;color:#9fb0cc;letter-spacing:.01em;padding-left:15px;}
.hero-id.compact{padding:6px 12px;border-radius:9px;gap:2px;}
.hero-id.compact .line1{font-size:.76em;}
.hero-id.compact .line2{font-size:.68em;padding-left:15px;}

/* ---------- chip (pílula de destaque) ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 14px;
  font-size:.86em;color:#e4eaf6;font-weight:600;
}
.chip .ic{font-size:1.05em;}

/* ---------- card branco ---------- */
.card{
  width:100%;background:var(--white);border-radius:14px;
  box-shadow:var(--card-shadow);padding:34px 34px 28px;
}
.card-badge{
  display:inline-flex;align-items:center;gap:7px;background:#eef6ef;color:var(--ok);
  font-size:.74em;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:20px;
  margin-bottom:16px;
}
.card-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);}
.card-foot{margin-top:22px;text-align:center;font-size:.76em;color:#9aa5b8;line-height:1.6;}
.card-foot b{color:#6b7280;}

/* ---------- botão primário ---------- */
button.btn-entrar, a.btn-entrar{
  background:var(--navy);color:#fff;border:none;border-radius:8px;
  padding:13px 16px;font-size:1em;font-weight:700;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s, transform .05s;text-decoration:none;
}
button.btn-entrar:hover, a.btn-entrar:hover{background:var(--navy-dk);}
button.btn-entrar:active, a.btn-entrar:active{transform:translateY(1px);}
button.btn-entrar .arrow{transition:transform .15s;}
button.btn-entrar:hover .arrow, a.btn-entrar:hover .arrow{transform:translateX(3px);}

/* ---------- botão secundário (ghost) ---------- */
button.btn-ghost, a.btn-ghost{
  background:transparent;color:var(--navy);border:1px solid var(--gray-mid);border-radius:8px;
  padding:9px 14px;font-size:.88em;font-weight:700;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:background .15s, border-color .15s;
}
button.btn-ghost:hover, a.btn-ghost:hover{background:var(--gray-light);border-color:#c3cad6;}

/* ---------- aviso (notice) ---------- */
.notice{
  margin-top:16px;padding:10px 12px;border-radius:8px;font-size:.82em;line-height:1.5;
  background:#fdf3d8;border:1px solid #f0dfa0;color:#6b5500;display:none;
}
.notice.show{display:block;}