/*
 * nexkb-login.css - o card de entrada, no enquadramento do portal oficial.
 *
 * Substitui o login.css, que vestia o formulario de 2016: bg.jpg de fundo, caixa cinza #f2f2f2,
 * raio de 10px e o logotipo como imagem. O desenho daqui foi medido em
 * https://nexkb.com.br/login em 2026-09-14 - fundo #F1F5F9, card branco de raio 14px, input de
 * raio 10px com borda #E2E8F0, botao de raio 12px e 48px de altura.
 *
 * Este arquivo veste APENAS a tela de login e a de recuperacao de senha, que sao as duas views
 * com Layout = null. Ele nao entra no _Layout e nao alcanca o resto da aplicacao.
 *
 * Nenhum hexadecimal de marca aqui. Cor vem de nexkb-tokens.css.
 */

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px 16px;
    background: var(--nexkb-bg);
    font-family: var(--nexkb-font-body);
    color: var(--nexkb-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- o card ---------- */

.nexkb-auth {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 56px auto;
}

.nexkb-auth__card {
    background: var(--nexkb-surface);
    border: 1px solid var(--nexkb-border);
    border-radius: var(--nexkb-radius-xl);
    box-shadow: var(--nexkb-shadow-card);
    padding: 32px 28px;
}

.nexkb-auth__logo {
    text-align: center;
    margin-bottom: 20px;
}

.nexkb-auth__logo .nexkb-logo {
    font-size: 36px;
}

.nexkb-auth__title {
    margin: 0 0 6px;
    font-family: var(--nexkb-font-title);
    font-size: 20px;
    font-weight: 700;
    color: var(--nexkb-ink);
    text-align: center;
}

.nexkb-auth__subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--nexkb-muted);
    text-align: center;
}

/* ---------- campos ---------- */

.nexkb-field {
    margin-bottom: 16px;
}

.nexkb-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nexkb-text);
}

.nexkb-field__input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-family: var(--nexkb-font-body);
    font-size: 15px;
    color: var(--nexkb-ink);
    background: var(--nexkb-surface);
    border: 1px solid var(--nexkb-border);
    border-radius: var(--nexkb-radius);
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.nexkb-field__input::-webkit-input-placeholder { color: #94A3B8; }
.nexkb-field__input::-moz-placeholder          { color: #94A3B8; opacity: 1; }
.nexkb-field__input:-ms-input-placeholder      { color: #94A3B8; }
.nexkb-field__input::placeholder               { color: #94A3B8; }

.nexkb-field__input:focus {
    outline: none;
    border-color: var(--nexkb-primary);
    box-shadow: 0 0 0 3px rgba(29, 79, 215, .14);
}

/* ---------- botao ---------- */

.nexkb-auth__submit {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 8px;
    font-family: var(--nexkb-font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--nexkb-on-dark);
    background: var(--nexkb-primary-hover);
    border: 0;
    border-radius: var(--nexkb-radius-lg);
    box-shadow: var(--nexkb-shadow-btn);
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.nexkb-auth__submit:hover,
.nexkb-auth__submit:focus {
    background: var(--nexkb-primary);
}

/* ---------- alerta e rodape do card ---------- */

.nexkb-alert {
    margin-top: 16px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nexkb-danger);
    background: var(--nexkb-danger-soft);
    border: 1px solid rgba(182, 29, 29, .22);
    border-radius: var(--nexkb-radius);
    text-align: center;
}

.nexkb-auth__links {
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
}

.nexkb-auth__links a {
    color: var(--nexkb-primary);
    font-weight: 600;
    text-decoration: none;
}

.nexkb-auth__links a:hover {
    text-decoration: underline;
}

.nexkb-auth__foot {
    margin-top: 20px;
    font-size: 12px;
    color: var(--nexkb-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .nexkb-auth {
        margin: 24px auto;
    }

    .nexkb-auth__card {
        padding: 24px 18px;
    }
}