/* =========================================================
   SGQ Medical — Cadastro de Usuário (Passo 1 de 2)
   ========================================================= */

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Century Gothic', Arial, sans-serif;
  background-color: #1E5A7A;
  background-image:
    linear-gradient(rgba(12,31,45,0.55), rgba(12,31,45,0.55)),
    url('../shared/assets/home-bg-certifmed.png');
  background-size: cover;
  background-position: center;
  padding: 24px 16px;
}

/* ── Card ─────────────────────────────────────────────────── */

.cad_card {
  background: rgba(255,255,255,0.97);
  border-radius: 0 18px 18px 0;
  border-top: 5px solid #F28C38;
  padding: 36px 36px 30px;
  width: min(92vw, 420px);
  flex-shrink: 0;
  box-shadow: 0 20px 50px rgba(12,31,45,0.36);
}

/* ── Brand ────────────────────────────────────────────────── */

.cad_brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.cad_brand_icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 3px solid #F28C38; border-radius: 12px;
  display: grid; place-items: center;
  color: #F28C38; font-size: 22px; font-weight: 900;
}

.cad_brand_name {
  display: block;
  font-size: 20px; font-weight: 900; color: #0C1F2D; line-height: 1;
}
.cad_brand_name span { color: #F28C38; }

.cad_brand_sub {
  display: block; margin-top: 4px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.7px; color: #5E7C8E;
}

/* ── Step label ───────────────────────────────────────────── */

.cad_step_label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: #F28C38; margin: 0 0 4px;
}

.cad_divider {
  width: 40px; height: 3px;
  background: #F28C38; border-radius: 99px;
  margin-bottom: 18px;
}

/* ── sgq-field — padrão ──────────────────────────────────── */

.cad_card .sgq-field {
  margin-bottom: 12px;
}

.cad_card fieldset.sgq-field legend {
  border: none;
}

/* Vazio → amarelo */
.cad_card fieldset.sgq-field:has(input.campo-vazio) { background: #FFE98A; }
.cad_card fieldset.sgq-field:has(input.campo-vazio) legend { background: #FFE98A; }

/* Preenchido → branco */
.cad_card fieldset.sgq-field:has(input.campo-preenchido) { background: #ffffff; }
.cad_card fieldset.sgq-field:has(input.campo-preenchido) legend { background: #ffffff; }

/* ── Senha — botão mostrar/ocultar ───────────────────────── */

.cad_senha_wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cad_senha_wrap input {
  padding-right: 40px;
}

.cad_btn_ver {
  position: absolute; right: 4px;
  width: 32px; min-height: 32px; padding: 0;
  border: none; border-radius: 7px; background: transparent;
  color: #5E7C8E; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.cad_btn_ver:hover { color: #1E5A7A; background: rgba(30,90,122,0.08); }

/* ── Ações ────────────────────────────────────────────────── */

.cad_actions {
  display: flex; gap: 10px; margin-top: 20px;
}

.cad_btn_primario {
  flex: 2; min-height: 44px; border: none; border-radius: 10px;
  background: #F28C38; color: #fff;
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 15px; font-weight: 800;
  cursor: pointer; transition: filter .18s;
}
.cad_btn_primario:hover { filter: brightness(1.08); }
.cad_btn_primario:disabled { opacity: 0.6; cursor: not-allowed; filter: none; }

.cad_btn_voltar {
  flex: 1; min-height: 44px; border: none; border-radius: 10px;
  background: #E4EEF3; color: #0C1F2D;
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 14px; font-weight: 800;
  cursor: pointer; transition: filter .18s;
}
.cad_btn_voltar:hover { filter: brightness(0.95); }

/* ── Feedback ─────────────────────────────────────────────── */

.cad_mensagem {
  margin: 12px 0 0; font-size: 13px; font-weight: 600;
  color: #c62828; min-height: 18px; text-align: center;
}
.cad_mensagem.ok { color: #1a7a40; }

.cad_link_login {
  display: block; width: 100%; margin-top: 10px; padding: 0;
  border: none; background: transparent; color: #5E7C8E;
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 12px; font-weight: 600;
  text-decoration: underline; cursor: pointer; text-align: center;
}
.cad_link_login:hover { color: var(--sgq-accent); background: transparent; }

/* ── Dica de campo ────────────────────────────────────────── */
.cad_field_hint {
  display: none;
  font-size: 11px;
  color: #1E5A7A;
  margin-bottom: 6px;
  line-height: 1.4;
}
.sgq-field:focus-within .cad_field_hint {
  display: block;
}