/* ==========================================================================
   Tela de entrada — o que é só do formulário de login.

   O palco (fundo iluminado, bloco central, marca, inclinação com o cursor) vive
   em tela-limpa.css, compartilhado com as telas de erro e com a de e-mail.
   Aqui fica o que nenhuma delas tem: campos, lembrar, entrar e os termos.
   ========================================================================== */

/* ── Campos ──────────────────────────────────────────────────────────────
   Cada um com a própria sombra: sem cartão, é ela que separa o campo do
   fundo iluminado. A borda nasce transparente e só aparece no foco e no erro,
   para o repouso ficar limpo. */
.xn-login__form {
    display: grid;
    gap: var(--occ-space-3);
}

.xn-login__field {
    position: relative;
    display: block;
}

.xn-login__field input {
    width: 100%;
    height: 44px;
    padding: 0 var(--occ-space-3) 0 38px;
    font-family: inherit;
    font-size: var(--occ-fs-base);
    color: var(--occ-ink);
    background: var(--occ-surface);
    border: 1px solid transparent;
    border-radius: var(--occ-radius-xs);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 20px -10px rgba(15, 23, 42, .18);
    transition: border-color .18s var(--occ-ease), box-shadow .18s var(--occ-ease);
}

[data-color-theme="dark"] .xn-login__field input {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .6);
}

.xn-login__field input::placeholder {
    color: var(--occ-ink-faint);
}

.xn-login__field input:focus {
    outline: none;
    border-color: var(--occ-accent);
    box-shadow: 0 0 0 3px var(--occ-accent-soft), 0 8px 20px -10px rgba(15, 23, 42, .2);
}

[data-color-theme="dark"] .xn-login__field input:focus {
    box-shadow: 0 0 0 3px var(--occ-accent-soft), 0 8px 20px -10px rgba(0, 0, 0, .6);
}

/* O ícone é decorativo e não pode roubar o clique do campo. */
.xn-login__field > i {
    position: absolute;
    left: 13px;
    top: 22px;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--occ-ink-faint);
    pointer-events: none;
    transition: color .18s var(--occ-ease);
}

.xn-login__field:focus-within > i {
    color: var(--occ-accent);
}

/* Estado de erro. O `is-invalid` no wrapper é posto pelo Thymeleaf (servidor)
   e pelo form-validacao.js (cliente) — os dois usam a mesma classe. */
.xn-login__field.is-invalid input {
    border-color: var(--occ-danger);
}

.xn-login__field.is-invalid > i {
    color: var(--occ-danger);
}

/* A mensagem sai do fluxo do ícone e ocupa a linha inteira abaixo do campo. */
.xn-login__field .xn-erro {
    padding-left: 2px;
}

/* ── Lembrar / esqueceu a senha ──────────────────────────────────────────── */
.xn-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--occ-space-3);
    font-size: var(--occ-fs-sm);
    margin-top: 2px;
}

.xn-login__remember {
    display: inline-flex;
    align-items: center;
    gap: var(--occ-space-2);
    color: var(--occ-ink-soft);
    cursor: pointer;
    margin: 0;
}

.xn-login__remember input {
    accent-color: var(--occ-accent);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.xn-login__link {
    color: var(--occ-accent);
    text-decoration: none;
}

.xn-login__link:hover {
    text-decoration: underline;
}

/* ── Entrar ──────────────────────────────────────────────────────────────── */
.xn-login__submit {
    width: 100%;
    height: 44px;
    margin-top: var(--occ-space-1);
    border: 0;
    border-radius: var(--occ-radius-xs);
    background: var(--occ-accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--occ-fs-md);
    font-weight: var(--occ-fw-semibold);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 22px -12px rgba(28, 167, 167, .7);
    transition: filter .18s var(--occ-ease), transform .12s var(--occ-ease);
}

/* No escuro o teal clareia (#3cd0d0) e texto branco em cima dele cai para
   ~2,3:1. O texto escuro sobre o mesmo fundo dá 9:1. */
[data-color-theme="dark"] .xn-login__submit {
    color: #0d2b2b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px -12px rgba(60, 208, 208, .5);
}

.xn-login__submit:hover {
    filter: brightness(1.07);
}

.xn-login__submit:active {
    transform: translateY(1px);
}

/* ── Termos ──────────────────────────────────────────────────────────────
   --occ-ink-faint daria 2,6:1 sobre a superfície clara e reprovaria AA; este
   texto é curto mas é para ler, então fica em --occ-ink-soft (4,9:1). */
.xn-login__legal {
    margin: var(--occ-space-4) 0 0;
    font-size: var(--occ-fs-xs);
    line-height: var(--occ-lh-base);
    text-align: center;
    color: var(--occ-ink-soft);
}

.xn-login__legal a {
    color: var(--occ-ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.xn-login__legal a:hover {
    color: var(--occ-ink);
}

/* ── Linha de apoio ──────────────────────────────────────────────────────
   Só a tela de e-mail (pré-login) usa. No login ela não existe: dois campos e um
   botão Entrar já dizem o que a tela é, e o texto que havia ali foi removido por
   ser redundante. Aqui o campo de e-mail está sozinho, e sem uma linha quem
   chega acha que a tela esqueceu de pedir a senha. */
.xn-login__apoio {
    margin: 0 0 var(--occ-space-5);
    text-align: center;
    font-size: var(--occ-fs-base);
    line-height: var(--occ-lh-base);
    color: var(--occ-ink-soft);
}