/* =====================================================================
   Estilo compartilhado das telas públicas de autenticação e avisos
   (login, cadastro, recuperar senha, confirmações, erros).
   Layout split-screen moderno. Carregado por header_public.html.
   ===================================================================== */

.auth-wrap {
    display: flex;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    background: #eef0f7;
}

/* min-width:0 impede que o conteúdo de um lado esmague o outro (flexbox). */
.auth-brand,
.auth-panel {
    flex: 1 1 50%;
    min-width: 0;
}

/* ---------- Painel de marca (lateral) ---------- */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    overflow: hidden;
    background: linear-gradient(140deg, var(--bs-primary, #1D74CC) 0%, color-mix(in srgb, var(--bs-primary, #1D74CC) 60%, #10152e) 100%);
}
/* Todo texto do painel é branco (evita herança do heading-color do Bootstrap). */
.auth-brand,
.auth-brand h1,
.auth-brand p,
.auth-brand div,
.auth-brand span,
.auth-brand a { color: #fff; }

.auth-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--auth-brand-img, none);
    background-size: cover;
    background-position: center;
    opacity: .10;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-brand .brand-logo img { height: 34px; filter: brightness(0) invert(1); }
.auth-brand h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.12; margin: 0 0 18px; letter-spacing: -.5px; }
.auth-brand .lead { font-size: 1.05rem; opacity: .92; max-width: 44ch; margin: 0 0 24px; }

.auth-brand .feat { display: flex; align-items: center; gap: 13px; margin-top: 14px; font-weight: 500; }
.auth-brand .feat i {
    width: 38px; height: 38px; border-radius: 11px; display: inline-flex;
    align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); font-size: 16px;
}
.auth-brand .brand-foot { font-size: .84rem; opacity: .78; }

/* Stepper do onboarding (cadastro) */
.ob-steps { list-style: none; margin: 0 0 28px; padding: 0; }
.ob-steps li { display: flex; align-items: flex-start; gap: 15px; padding: 8px 0; }
.ob-steps .dot {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; border: 2px solid rgba(255, 255, 255, .55);
}
.ob-steps li.active .dot { background: #fff; color: var(--bs-primary, #1D74CC); border-color: #fff; }
.ob-steps li.next .dot { opacity: .65; }
.ob-steps .st-title { font-weight: 600; }
.ob-steps .st-desc { font-size: .86rem; opacity: .82; }
.ob-steps li.next .st-title, .ob-steps li.next .st-desc { opacity: .78; }

.ob-templates .cap { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; opacity: .8; margin-bottom: 11px; }
.ob-templates .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-templates .chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    border-radius: 30px; background: rgba(255, 255, 255, .16); font-size: .84rem; font-weight: 500;
}

/* ---------- Painel do formulário / aviso ---------- */
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 26px; }
.auth-card { width: 100%; max-width: 412px; margin: 0 auto; }

.auth-card .mobile-logo { display: none; margin-bottom: 26px; }
.auth-card .mobile-logo img { height: 34px; }

.auth-card h2 { font-size: 1.72rem; font-weight: 700; color: #1c1f2e; margin: 0 0 7px; }
.auth-card .sub { color: #8a8fa3; margin-bottom: 28px; font-size: .96rem; }

.auth-card .step-pill {
    display: inline-flex; align-items: center; gap: 8px; font-size: .77rem; font-weight: 700;
    color: var(--bs-primary, #1D74CC); background: color-mix(in srgb, var(--bs-primary, #1D74CC) 12%, #fff);
    padding: 6px 13px; border-radius: 30px; margin-bottom: 16px;
}

.auth-card .fld { margin-bottom: 18px; }
.auth-card .fld > label { display: block; font-size: .84rem; font-weight: 600; color: #464b60; margin-bottom: 7px; }

.auth-card .form-control {
    height: 49px; border-radius: 12px; border: 1.5px solid #e2e4ee; background: #fff;
    color: #1c1f2e !important; padding: 0 16px; font-size: .97rem;
    transition: border-color .15s, box-shadow .15s; width: 100%;
}
.auth-card .form-control::placeholder { color: #b3b7c7; }
.auth-card .form-control:focus {
    border-color: var(--bs-primary, #1D74CC);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary, #1D74CC) 15%, transparent); outline: none;
}

.auth-card .pw-field { position: relative; }
.auth-card .pw-field .form-control { padding-right: 48px; }
.auth-card .pw-toggle {
    position: absolute; top: 0; right: 0; height: 49px; width: 46px; border: 0; background: transparent;
    color: #9aa0b4; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.auth-card .pw-toggle:hover { color: var(--bs-primary, #1D74CC); }

#forcePassword { margin-top: 8px; }
#forcePassword > div { border-radius: 6px; overflow: hidden; height: 22px; }
#forcePassword > div > div { height: 22px; line-height: 22px; font-size: .72rem; }

.auth-card .btn-auth {
    height: 51px; border: 0; border-radius: 12px; font-weight: 700; font-size: 1.01rem; color: #fff; width: 100%;
    background: var(--bs-primary, #1D74CC); box-shadow: 0 8px 20px color-mix(in srgb, var(--bs-primary, #1D74CC) 32%, transparent);
    transition: filter .15s, transform .05s;
    /* Centraliza o rótulo tanto em <button> quanto em <a> (usado nos avisos). */
    display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
}
.auth-card .btn-auth:hover { filter: brightness(.95); }
.auth-card .btn-auth:active { transform: translateY(1px); }
.auth-card .btn-auth:disabled { opacity: .6; cursor: not-allowed; }
.auth-card .btn-auth.outline {
    background: #fff; color: var(--bs-primary, #1D74CC);
    border: 1.5px solid #e2e4ee; box-shadow: none;
}

.auth-card .forgot { text-align: right; margin: -4px 0 22px; }
.auth-card .forgot a { color: var(--bs-primary, #1D74CC); text-decoration: none; font-size: .86rem; font-weight: 600; }

.auth-card .helper { font-size: .85rem; color: #8a8fa3; margin: 8px 0 18px; }

.auth-card .terms { font-size: .82rem; color: #8a8fa3; text-align: center; margin: 16px 0 6px; }
.auth-card .terms a { color: var(--bs-primary, #1D74CC); text-decoration: none; font-weight: 600; }

/* Linha "Não tem conta? / Já tem conta?" — nunca quebra por palavra. */
/* Anula o componente global ".switch" (toggle 60x34px do style.css), que
   estava forçando width:60px e quebrando o texto "Não tem conta?". */
.auth-card .switch { display: block; width: auto; height: auto; position: static; text-align: center; margin-top: 26px; color: #8a8fa3; font-size: .93rem; white-space: normal; word-break: normal; overflow-wrap: normal; }
.auth-card .switch a { color: var(--bs-primary, #1D74CC); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Caixa de erro: oculta por padrão; o framework (utility.setPostForm) faz
   .show()/.hide() no #campo_error apenas quando há mensagem. */
.auth-card .invalid-feedback, .auth-card .error { font-size: .82rem; color: #dc3545; display: none; margin-top: 6px; }

/* ---------- Aviso / mensagem / erro ---------- */
.auth-note { text-align: center; }
.auth-note .ico {
    width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: 32px; margin-bottom: 20px;
}
.auth-note .ico.success { background: #e6f6ec; color: #2e9e57; }
.auth-note .ico.info    { background: color-mix(in srgb, var(--bs-primary, #1D74CC) 14%, #fff); color: var(--bs-primary, #1D74CC); }
.auth-note .ico.warning { background: #fff4e0; color: #e6910f; }
.auth-note .ico.danger  { background: #fdeaea; color: #d64545; }
.auth-note .code { font-size: 3.2rem; font-weight: 800; color: #1c1f2e; line-height: 1; margin-bottom: 6px; }
.auth-note h2 { font-size: 1.6rem; font-weight: 700; color: #1c1f2e; margin: 0 0 10px; }
.auth-note p { color: #7d8298; margin: 0 0 22px; font-size: .97rem; }
.auth-note .actions { display: flex; flex-direction: column; gap: 10px; }
.auth-note .actions a { text-decoration: none; }

@media (max-width: 991px) {
    .auth-brand { display: none; }
    .auth-card .mobile-logo { display: block; }
}