/*
  Clarix Admin — telas de autenticação.

  Estrutura: fundo navy ocupando a página, recorte claro no canto superior
  esquerdo com a marca, e um cartão flutuante dividido em dois — painel de
  marca à esquerda, formulário à direita.

  Para trocar o painel esquerdo por uma fotografia, basta definir
  `--auth-painel-imagem` com uma url(); o gradiente vira overlay por cima.
*/

.auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background: #050d1e;
    background-image:
        radial-gradient(900px 520px at 80% -15%, rgba(0, 184, 217, .16), transparent 62%),
        linear-gradient(150deg, #050d1e 0%, #08142c 55%, #0a1937 100%);
    color: var(--cx-fg-body);
}

/* ── Recorte claro do canto, com a marca ────────────────────────────── */

.auth-canto {
    position: fixed;
    top: 0;
    left: 0;
    width: 360px;
    height: 365px;
    z-index: 0;
    pointer-events: none;
}

.auth-canto-forma {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.auth-canto-logo {
    position: absolute;
    top: 30px;
    left: 34px;
    width: 218px;
    height: auto;
}

/* ── Cartão ─────────────────────────────────────────────────────────── */

.auth-cartao {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1024px;
    min-height: 710px;
    /* margin auto em vez de align-items:center: em telas baixas o cartão
       rola normalmente, em vez de ser cortado no topo pelo flex. */
    margin: auto;
    border-radius: var(--cx-radius-lg);
    box-shadow:
        var(--cx-shadow-lg),
        0 0 0 1px rgba(255, 255, 255, .08);
}

/* ── Painel de marca (esquerda) ─────────────────────────────────────── */

.auth-painel-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3rem;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background-color: var(--clarix-navy);
    background-image:
        var(--auth-painel-imagem, none),
        linear-gradient(160deg, rgba(15, 41, 94, .94) 0%, rgba(26, 58, 110, .92) 55%, rgba(33, 72, 133, .90) 100%);
    background-size: cover;
    background-position: center;
    border-radius: var(--cx-radius-lg) 0 0 var(--cx-radius-lg);
}

.auth-arcos {
    position: absolute;
    right: -150px;
    bottom: -150px;
    width: 460px;
    height: 460px;
    opacity: .20;
    pointer-events: none;
}

.auth-ilustracao {
    position: relative;
    width: 100%;
    max-width: 440px;
    /* margens automáticas em cima e embaixo: a ilustração se centraliza
       no espaço que sobra, e o bloco de texto fica no rodapé do painel. */
    margin-block: auto;
}

.auth-ilustracao svg {
    width: 100%;
    height: auto;
    display: block;
}

.auth-painel-texto {
    position: relative;
    max-width: 22rem;
}

.auth-painel-titulo {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.6px;
    margin: 0 0 .75rem;
    color: #ffffff;
}

.auth-painel-titulo > span {
    color: var(--clarix-cyan);
}

.auth-painel-apoio {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

/* ── Painel do formulário (direita) ─────────────────────────────────── */

.auth-painel-form {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 3rem 2rem;
    background: var(--cx-bg-surface);
    border-radius: 0 var(--cx-radius-lg) var(--cx-radius-lg) 0;
}

.auth-form-topo {
    display: flex;
    justify-content: flex-end;
}

.auth-form-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 22rem;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
}

.auth-form-rodape {
    text-align: center;
    font-size: .75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cx-fg-faint);
}

/* ── Tipografia do formulário ───────────────────────────────────────── */

.auth-titulo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clarix-navy);
    margin: 0 0 .25rem;
}

.auth-subtitulo {
    font-size: .9375rem;
    color: var(--cx-fg-muted);
    margin: 0 0 1.5rem;
}

/* ── Campos ─────────────────────────────────────────────────────────── */

/* O espaço entre um campo e o próximo vem quase todo da linha reservada para a
   mensagem de erro, logo abaixo do input. Somar 1rem de margem a ela dava uns
   45px entre campos e deixava o cartão de entrada com cara de rascunho. */
.auth-campo {
    margin-bottom: .375rem;
}

/* No login existe a `.auth-linha` entre o último campo e o botão; na troca de
   senha o botão vem direto, e sem isto encostaria na mensagem de validação. */
.auth-campo + .auth-botao {
    margin-top: .875rem;
}

.auth-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--clarix-cyan-ink);
    margin-bottom: .375rem;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-icone {
    position: absolute;
    top: 50%;
    left: .875rem;
    transform: translateY(-50%);
    color: var(--cx-fg-faint);
    font-size: 1rem;
    pointer-events: none;
}

.auth-input.form-control {
    height: 48px;
    padding-left: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--cx-border);
    background: var(--cx-bg-surface);
    color: var(--cx-fg-body);
    font-size: .9375rem;
}

.auth-input.form-control::placeholder {
    color: var(--cx-fg-faint);
}

.auth-input.form-control:focus {
    border-color: var(--clarix-cyan);
    box-shadow: 0 0 0 3px rgba(0, 184, 217, .18);
}

.auth-input-senha.form-control {
    padding-right: 2.75rem;
}

.auth-olho {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cx-fg-muted);
    cursor: pointer;
}

.auth-olho:hover {
    color: var(--clarix-navy);
    background: var(--cx-bg-sunken);
}

/* Reserva a linha do erro — sem ela o cartão sobe entre o mousedown e o mouseup
   e o clique erra o botão. Mas reserva o mínimo: o `min-height: 1.5em` global do
   site.css é largo demais para um formulário de três campos empilhados.
   Vence por vir depois: o auth.css é carregado após o site.css. */
.auth-validacao {
    display: block;
    margin-top: .25rem;
    min-height: 1.15rem;
    line-height: 1.15rem;
    font-size: .8125rem;
    color: #b4232a;
}

/* ── Linha de apoio ─────────────────────────────────────────────────── */

.auth-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 1.25rem;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    color: var(--cx-fg-muted);
    cursor: pointer;
    margin: 0;
}

.auth-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--clarix-cyan-ink);
    cursor: pointer;
}

/* ── Botão ──────────────────────────────────────────────────────────── */

.auth-botao {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--clarix-navy);
    color: #ffffff;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease;
}

.auth-botao:hover:not(:disabled) {
    background: var(--clarix-navy-2);
}

.auth-botao:active:not(:disabled) {
    transform: translateY(1px);
}

.auth-botao:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.auth-botao[data-carregando="true"] {
    background: var(--clarix-navy);
    opacity: 1;
    cursor: progress;
}

.auth-botao-seta {
    position: absolute;
    right: .375rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clarix-cyan);
    color: var(--clarix-navy);
    font-size: 1.05rem;
}

.auth-link-secundario {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-size: .875rem;
    color: var(--cx-fg-muted);
    text-decoration: none;
}

.auth-link-secundario:hover {
    color: var(--clarix-navy);
    text-decoration: underline;
}

/* Irmão do secundário, para quando o link divide a linha com outro controle:
   o `.auth-link-secundario` é block com margem no topo e desalinharia dentro
   do `.auth-linha`, que centraliza os itens. */
.auth-link-inline {
    font-size: .875rem;
    color: var(--cx-fg-muted);
    text-decoration: none;
    white-space: nowrap;
}

.auth-link-inline:hover {
    color: var(--clarix-navy);
    text-decoration: underline;
}

/* ── Erro global ────────────────────────────────────────────────────── */

.auth-erro:not(:empty) {
    display: flex;
    gap: .5rem;
    padding: .75rem .875rem;
    margin-bottom: 1rem;
    border-radius: var(--cx-radius);
    background: #fdeaea;
    border: 1px solid #f3c2c2;
    color: #8f1c22;
    font-size: .875rem;
}

.auth-erro ul {
    margin: 0;
    padding-left: 1rem;
}

/* ── Responsivo ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .auth-cartao {
        grid-template-columns: 1fr;
        min-height: 0;
        max-width: 460px;
    }

    .auth-painel-marca {
        gap: 1.25rem;
    }

    .auth-painel-marca {
        min-height: 190px;
        padding: 1.75rem;
        border-radius: var(--cx-radius-lg) var(--cx-radius-lg) 0 0;
    }

    .auth-painel-titulo {
        font-size: 1.4rem;
    }

    .auth-painel-apoio {
        display: none;
    }

    .auth-arcos {
        right: -190px;
        bottom: -190px;
    }

    .auth-painel-form {
        padding: 1.5rem 1.5rem 1.25rem;
        border-radius: 0 0 var(--cx-radius-lg) var(--cx-radius-lg);
    }

    .auth-canto {
        display: none;
    }

    .auth-form-topo {
        justify-content: center;
    }

    .auth-ilustracao {
        max-width: 320px;
        margin: 0 auto;
    }

    .auth-painel-marca {
        justify-content: center;
    }
}