:root{
  --blue:#0066cc; --blue-focus:#0071e3; --blue-soft:#eef3fb; --blue-line:#d3e3f6;
  --ink:#1d1d1f; --ink-80:#333333; --ink-48:#7a7a7a; --ink-30:#8b97a5;
  --canvas:#ffffff; --parchment:#f4f6f9; --pearl:#fafbfd;
  --hairline:#e0e0e0; --divider:#f0f0f0;
  --tile1:#1e2a3b; --tile2:#223040; --tile-line:#334155;
  --ok:#0b7a4b; --ok-bg:#e9f7f0; --err:#b3261e; --err-bg:#fdecea;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);letter-spacing:-.015em;line-height:1.47;background:var(--parchment);
  display:flex;justify-content:center;min-height:100%;padding:40px 20px;
}
button,input{font-family:inherit;letter-spacing:inherit}

/* ══ o cartão ═════════════════════════════════════════════════════════════ */
.painel{width:100%;max-width:428px;margin:auto}
.forma{background:var(--canvas);border:1px solid var(--hairline);border-radius:22px;
  padding:38px 34px 30px;box-shadow:0 24px 60px -28px rgba(18,59,115,.28)}
.marca{display:block;height:34px;width:auto;margin:0 auto 26px}
.forma header{margin-bottom:24px;text-align:center}
.forma h2{font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.forma .sub{margin-top:8px;color:var(--ink-48);font-size:15px;line-height:1.5}
.assinatura{margin-top:18px;text-align:center;font-size:11.5px;color:var(--ink-30);line-height:1.6}

label{display:block;font-size:13px;font-weight:600;color:var(--ink-80);margin-bottom:7px}
.campo{margin-bottom:16px}
.entrada{
  width:100%;height:48px;background:var(--canvas);border:1px solid var(--hairline);border-radius:12px;
  padding:0 15px;font-size:16px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;
}
.entrada::placeholder{color:var(--ink-30)}
.entrada:focus{border-color:var(--blue-focus);box-shadow:0 0 0 3px rgba(29,92,176,.18)}
.entrada[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.13)}

/* combobox do município */
.combo{position:relative}
.combo .status{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.combo .status svg{width:18px;height:18px}
.giro{width:16px;height:16px;border:2px solid var(--blue-line);border-top-color:var(--blue);border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.lista{
  position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:264px;overflow-y:auto;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:14px;
  box-shadow:0 18px 44px -14px rgba(18,59,115,.24);padding:6px;display:none;
}
.lista.on{display:block}
.lista li{list-style:none;padding:10px 12px;border-radius:9px;font-size:14.5px;cursor:pointer;line-height:1.35}
.lista li small{display:block;color:var(--ink-30);font-size:12px;margin-top:2px}
.lista li[aria-selected="true"],.lista li:hover{background:var(--blue-soft)}
.lista .vazio{color:var(--ink-48);cursor:default;font-size:13.5px}
.lista .vazio:hover{background:none}

.confirmado{
  display:none;align-items:center;gap:9px;background:var(--ok-bg);color:var(--ok);
  border-radius:11px;padding:11px 14px;font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:16px;
}
.confirmado.on{display:flex}
.confirmado svg{width:16px;height:16px;flex:0 0 auto}
.confirmado button{margin-left:auto;background:none;border:0;color:var(--ok);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;padding:2px;flex:0 0 auto}

/* botões */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:9999px;
  padding:15px 20px;font-size:15.5px;font-weight:700;letter-spacing:0;cursor:pointer;text-decoration:none;
  transition:background .15s,transform .1s,opacity .15s;
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn.primario{background:var(--blue);color:#fff;box-shadow:0 10px 24px -8px rgba(18,59,115,.45)}
.btn.primario:hover{background:var(--blue-focus)}
.btn.primario:active{transform:scale(.985)}
.btn.secundario{background:var(--parchment);color:var(--ink);border:1px solid var(--hairline);box-shadow:none}
.btn.secundario:hover{background:var(--divider)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn .giro{border-color:rgba(255,255,255,.35);border-top-color:#fff}

.dica{margin-top:10px;font-size:12.5px;color:var(--ink-48);text-align:center;line-height:1.5}

.depois{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.depois.on{max-height:760px;opacity:1}
.ou{display:flex;align-items:center;gap:12px;margin:24px 0 20px;color:var(--ink-30);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--hairline)}

  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 17px;font-size:14.5px;font-weight:600;color:var(--ink-80);
}

.lembrar{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-80);margin:2px 0 16px;cursor:pointer}
.lembrar input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}

.aviso{border-radius:11px;padding:11px 14px;font-size:13.5px;line-height:1.45;margin-bottom:16px;display:none}
.aviso.on{display:block}
.aviso.erro{background:var(--err-bg);color:var(--err)}
.aviso.info{background:var(--blue-soft);color:var(--blue)}

.rodape{margin-top:28px;padding-top:22px;border-top:1px solid var(--divider);text-align:center}
.rodape .verso{font-style:italic;color:var(--ink-80);font-size:14px;line-height:1.6}
.rodape .verso cite{display:block;margin-top:8px;font-style:normal;font-weight:600;color:var(--ink-30);font-size:11.5px;letter-spacing:.3px}
.rodape .equipe{margin-top:18px;font-size:12px;color:var(--ink-30)}
.rodape .equipe a{color:var(--ink-48);font-weight:600;text-decoration:none;border-bottom:1px solid var(--hairline)}
.rodape .equipe a:hover{color:var(--blue)}

/* ══ cartão do convite (chegou pelo SICC, é só confirmar) ═══════════════ */
.convite{display:none}
.convite.on{display:block}
.forma.tem-convite .padrao{display:none}

/* ══ cartão da credencial (e-mail e senha emitidos pela INFOCO) ═════════ */
[hidden]{display:none !important}
.credencial{display:none}
.credencial.on{display:block}
.forma.tem-credencial .padrao,
.forma.tem-credencial .so-padrao{display:none}
.voltar{margin-top:10px}
.retrato{display:flex;align-items:center;gap:14px;background:var(--pearl);border:1px solid var(--hairline);border-radius:16px;padding:16px;margin-bottom:20px}
.retrato .iniciais{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:700;letter-spacing:.5px;flex:0 0 auto}
.retrato .quem{min-width:0}
.retrato .quem b{display:block;font-size:16px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.retrato .quem span{display:block;font-size:13px;color:var(--ink-48);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══ responsivo ════════════════════════════════════════════════════════ */
@media (max-width:520px){
  body{padding:22px 14px}
  .forma{padding:30px 22px 24px;border-radius:18px}
  .forma h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .giro{animation-duration:1.6s}
}