/* Telas de conta do SIGAL: entrar, cadastro, recuperar senha e minha conta.
   Campos com o mesmo tamanho e arredondamento; etapas (wizard) com transição suave. */
:root {
  --sc-raio: 14px;
  --sc-altura: 52px;
  --sc-borda: #d5ddd9;
  --sc-foco: rgba(6, 55, 31, .14);
  --sc-texto: #1e2923;
  --sc-suave: #5b6b73;
}

.sc-wrap { min-height: calc(100vh - 160px); display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px 48px; }
.sc-card { width: 100%; max-width: 520px; background: #fff; border-radius: 22px; box-shadow: 0 18px 50px rgba(6, 55, 31, .12);
           overflow: hidden; }
.sc-card.largo { max-width: 680px; }
.sc-topo { background: linear-gradient(135deg, var(--sigal-primary), var(--sigal-primary2)); color: #fff; padding: 28px 32px 24px;
           position: relative; overflow: hidden; }
.sc-topo::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
                  background: radial-gradient(circle, rgba(0, 155, 214, .25), transparent 70%); }
.sc-topo h1 { font-size: 1.45rem; font-weight: 800; margin: 0 0 4px; position: relative; z-index: 1; }
.sc-topo p { margin: 0; color: rgba(255, 255, 255, .75); font-size: .92rem; position: relative; z-index: 1; }
.sc-corpo { padding: 26px 32px 32px; }
@media (max-width: 575.98px) { .sc-topo { padding: 22px 20px 20px; } .sc-corpo { padding: 22px 20px 26px; } }

/* campos: tamanho e arredondamento padronizados */
.sc-campo { margin-bottom: 16px; }
.sc-label { display: block; font-size: .86rem; font-weight: 600; color: #33474e; margin-bottom: 6px; }
.sc-label .opc { font-weight: 400; color: var(--sc-suave); }
.sc-input, .sc-corpo .form-control, .sc-corpo .form-select {
  height: var(--sc-altura); border-radius: var(--sc-raio); border: 1.5px solid var(--sc-borda); padding: 0 16px;
  font-size: 1rem; color: var(--sc-texto); background-color: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.sc-corpo textarea.form-control { height: auto; padding: 12px 16px; }
.sc-input:focus, .sc-corpo .form-control:focus, .sc-corpo .form-select:focus { border-color: var(--sigal-primary); box-shadow: 0 0 0 4px var(--sc-foco); }
.sc-corpo .form-control.is-invalid, .sc-input.is-invalid { border-color: #c62828; }
.sc-corpo .form-control.is-valid, .sc-input.is-valid { border-color: #2e7d32; }
.sc-ajuda { font-size: .78rem; color: var(--sc-suave); margin-top: 5px; }
.sc-erro { font-size: .8rem; color: #c62828; font-weight: 600; margin-top: 5px; }
.sc-senha { position: relative; }
.sc-senha .sc-input, .sc-senha .form-control { padding-right: 52px; }
.sc-olho { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px;
           color: var(--sc-suave); font-size: 1.15rem; }
.sc-olho:hover { background: #f1f5f3; }

/* botões */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--sc-altura); padding: 0 24px;
          border-radius: 999px; border: 0; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform .15s, background .15s; text-decoration: none; }
.sc-btn-primario { background: var(--sigal-primary); color: #fff; box-shadow: 0 6px 16px rgba(6, 55, 31, .22); }
.sc-btn-primario:hover { background: var(--sigal-primary2); color: #fff; transform: translateY(-1px); }
.sc-btn-primario:disabled { opacity: .6; transform: none; cursor: wait; }
.sc-btn-leve { background: #fff; color: var(--sc-texto); border: 1.5px solid var(--sc-borda); }
.sc-btn-leve:hover { border-color: var(--sigal-primary); color: var(--sigal-primary); }
.sc-btn-bloco { width: 100%; }
.sc-acoes { display: flex; gap: 10px; margin-top: 22px; }
.sc-acoes .sc-btn { flex: 1; }
.sc-link { color: var(--sigal-primary); font-weight: 700; text-decoration: none; }
.sc-link:hover { text-decoration: underline; }
.sc-rodape { text-align: center; margin-top: 20px; font-size: .9rem; color: var(--sc-suave); }

/* etapas (wizard) */
.sc-passos { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.sc-passos li { flex: 1; text-align: center; font-size: .72rem; font-weight: 600; color: #93a1a8; }
.sc-passos li::before { content: ""; display: block; height: 5px; border-radius: 99px; background: #e3e9e6; margin-bottom: 6px;
                        transition: background .3s; }
.sc-passos li.feito::before, .sc-passos li[aria-current="step"]::before { background: var(--sigal-primary); }
.sc-passos li[aria-current="step"] { color: var(--sigal-primary); }
@media (max-width: 420px) { .sc-passos li span { display: none; } }
.sc-etapa { display: none; }
.sc-etapa.ativa { display: block; animation: sc-entra .32s ease both; }
.sc-etapa.ativa.volta { animation-name: sc-volta; }
@keyframes sc-entra { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes sc-volta { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.sc-etapa h2 { font-size: 1.12rem; font-weight: 800; color: var(--sc-texto); margin: 0 0 4px; }
.sc-etapa .sc-sub { font-size: .9rem; color: var(--sc-suave); margin: 0 0 18px; }
.sem-js .sc-etapa { display: block; }                       /* sem JavaScript: tudo visível, formulário comum */
.sem-js .sc-passos, .sem-js [data-avancar], .sem-js [data-voltar] { display: none; }

/* escolhas em cartão (PF/PJ etc.) */
.sc-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sc-opcao { position: relative; }
.sc-opcao input { position: absolute; opacity: 0; inset: 0; }
.sc-opcao label { display: flex; align-items: center; gap: 10px; min-height: var(--sc-altura); padding: 10px 14px; border-radius: var(--sc-raio);
                  border: 1.5px solid var(--sc-borda); cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
.sc-opcao label i { font-size: 1.3rem; color: var(--sigal-primary); }
.sc-opcao input:checked + label { border-color: var(--sigal-primary); background: #f1f8f4; box-shadow: 0 0 0 3px var(--sc-foco); }
.sc-opcao input:focus-visible + label { outline: 2px solid var(--sigal-primary); outline-offset: 2px; }

/* identidade confirmada no passo da senha do login */
.sc-quem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--sc-raio); background: #f4f8f6;
           border: 1px solid #e3ebe7; margin-bottom: 16px; }
.sc-quem i { font-size: 1.4rem; color: var(--sigal-primary); }
.sc-quem strong { display: block; font-size: .98rem; }
.sc-quem small { color: var(--sc-suave); }
.sc-quem button { margin-left: auto; border: 0; background: none; color: var(--sigal-primary); font-weight: 700; font-size: .85rem; }

.sc-alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--sc-raio); font-size: .9rem; margin-bottom: 16px; }
.sc-alerta.erro { background: #fff4f4; color: #7b1a1a; border-left: 4px solid #c62828; }
.sc-alerta.info { background: #eef6f9; color: #0b3d45; border-left: 4px solid #009bd6; }
.sc-alerta.ok { background: #eef8f1; color: #14532d; border-left: 4px solid #2e7d32; }

/* força e regras da senha */
.sc-regras { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: .8rem; color: var(--sc-suave); }
.sc-regras li::before { content: "○"; display: inline-block; width: 18px; color: #b3bfc4; }
.sc-regras li.ok { color: #2e7d32; }
.sc-regras li.ok::before { content: "✓"; color: #2e7d32; font-weight: 800; }

/* revisão */
.sc-revisao { display: grid; gap: 10px; }
.sc-revisao div { padding: 10px 12px; border-radius: 12px; background: #f6f9f7; font-size: .92rem; }
.sc-revisao dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-suave); margin-bottom: 2px; }
.sc-revisao dd { margin: 0; font-weight: 600; white-space: pre-line; }

/* minha conta: abas */
.sc-abas { display: flex; gap: 4px; border-bottom: 1px solid #e3e9e6; margin: -6px 0 20px; overflow-x: auto; }
.sc-abas a { padding: 10px 14px; font-weight: 700; font-size: .9rem; color: var(--sc-suave); text-decoration: none; white-space: nowrap;
             border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sc-abas a.ativa { color: var(--sigal-primary); border-color: var(--sigal-accent); }
.sc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sc-info div { padding: 10px 12px; border-radius: 12px; background: #f6f9f7; }
.sc-info small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-suave); }
.sc-info strong { font-size: .95rem; word-break: break-word; }

@media (prefers-reduced-motion: reduce) { .sc-etapa.ativa { animation: none; } }