/* ═══════════════════════════════════════════════════════════════════════
   autenticacao.css — telas de entrada do iASO (Login e afins)

   Disposição: faixa escura no topo com a marca e o traçado de ECG, e abaixo
   o formulário numa coluna estreita. Logo, título, campos e rodapé ficam
   todos no mesmo eixo vertical — é isso que dá ar de formulário de sistema
   em vez de tela de captura.

   Sem tela dividida, sem card flutuante, sem gradiente animado nem brilho
   radial: o único movimento é o ECG, e ele é o detalhe da tela justamente
   por estar sozinho.

   Usada hoje pelo Pages/Login.cshtml. As classes são genéricas de propósito
   (prefixo .aut-) para as outras telas de autenticação reaproveitarem.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --aut-navy: #16283c;
    --aut-navy-esc: #0d1a26;
    --aut-aco: #1d4763;
    --aut-cyan: #27a9e3;
    --aut-ink: #17222e;
    --aut-muted: #6b7c8f;
    --aut-line: #e3e9ef;
    --aut-erro: #d9412b;
}

body.aut-body {
    margin: 0;
    background: #fff;
    color: var(--aut-ink);
    font-family: "Nunito Sans", sans-serif;
}

/* ═══════════════════════ Estrutura ═══════════════════════ */

.aut-tela {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* a coluna que alinha tudo: logo, título, campos e rodapé */
.aut-limite {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
}

/* telas de lista (seleção de acesso) precisam de mais largura que um formulário
   de dois campos: o nome da PJ e o da clínica moram na mesma linha */
.aut-limite--largo {
    max-width: 560px;
}

/* duas colunas (lista + outros acessos) */
.aut-limite--painel {
    max-width: 980px;
}

/* ── Faixa da marca ── */

.aut-cabeca {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex: 0 0 auto;
    padding: 32px clamp(20px, 6vw, 64px) 62px;
    color: #fff;
    background: linear-gradient(118deg, var(--aut-navy-esc) 0%, var(--aut-navy) 56%, var(--aut-aco) 100%);
}

/* traçado de ECG atravessando a base da faixa */
.aut-ecg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 8px;
    width: 100%;
    height: 68px;
    opacity: .22;
    pointer-events: none;
}

    .aut-ecg path {
        fill: none;
        stroke: #fff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1400;
        stroke-dashoffset: 1400;
        animation: aut-ecg 6s ease-in-out .5s infinite;
    }

@keyframes aut-ecg {
    0% {
        stroke-dashoffset: 1400;
    }

    55%, 100% {
        stroke-dashoffset: 0;
    }
}

/* ── Lockup do logo ── */

.aut-lockup {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Faixa com a marca centralizada — para telas em que o lockup é só o wordmark,
   sem o emblema para ancorar o eixo do conteúdo. Aí encostado na esquerda o
   texto lê como sobra; no centro, lê como cabeçalho. */
.aut-cabeca--centro .aut-lockup {
    justify-content: center;
}

    .aut-cabeca--centro .aut-marca-nome {
        text-align: center;
    }

.aut-logo {
    flex: 0 0 auto;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

    /* Recorta o emblema e deixa de fora o ".iASO" que vem no pé da imagem —
       ele já aparece ao lado, em texto, e nesse tamanho ficaria ilegível.
       Tamanho em px de propósito: com height:100% o item de grid entra em
       ciclo de medida (a linha é auto, resolve pelo tamanho natural) e a
       imagem estoura. */
    .aut-logo img {
        display: block;
        width: 52px;
        height: 52px;
        object-fit: cover;
        object-position: center top;
    }

.aut-marca-nome {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.1;
}

    .aut-marca-nome span {
        display: block;
        margin-top: 1px;
        font-size: .82rem;
        font-weight: 400;
        opacity: .68;
    }

/* ── Corpo ── */

.aut-corpo {
    flex: 1 1 auto;
    padding: clamp(34px, 6vh, 60px) clamp(20px, 6vw, 64px) 40px;
}

/* telas de lista têm mais coisa na vertical que um formulário de dois campos:
   o respiro do topo encolhe para a lista e o rodapé caberem na mesma tela */
.aut-corpo--lista {
    padding-top: clamp(26px, 3vh, 38px);
}

.aut-form-titulo {
    margin: 0 0 26px;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.6px;
}

/* ═══════════════════════ Campos ═══════════════════════ */

.aut-campo {
    margin-bottom: 18px;
}

.aut-label {
    display: block;
    margin-bottom: 7px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aut-muted);
}

.aut-entrada {
    position: relative;
    display: flex;
    align-items: center;
}

    .aut-entrada > i {
        position: absolute;
        left: 15px;
        font-size: 19px;
        color: #9fb0bf;
        pointer-events: none;
        transition: color .2s ease;
    }

    .aut-entrada input {
        width: 100%;
        height: 52px;
        padding: 0 16px 0 46px;
        border: 1.5px solid var(--aut-line);
        border-radius: 13px;
        background: #f8fafc;
        font-size: .95rem;
        color: var(--aut-ink);
        transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

        .aut-entrada input::placeholder {
            color: #a9b7c4;
        }

        .aut-entrada input:hover {
            border-color: #cfd9e3;
        }

        .aut-entrada input:focus {
            outline: none;
            background: #fff;
            border-color: var(--aut-cyan);
            box-shadow: 0 0 0 4px rgba(39, 169, 227, .15);
        }

        /* o ícone vem depois do input no HTML justamente para este seletor
           funcionar; visualmente ele fica à esquerda, posicionado */
        .aut-entrada input:focus ~ i {
            color: var(--aut-cyan);
        }

/* senha tem espaço à direita para o botão de mostrar/ocultar */
.aut-entrada--senha input {
    padding-right: 50px;
}

.aut-olho {
    position: absolute;
    right: 6px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8fa1b1;
    font-size: 19px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

    .aut-olho:hover {
        color: var(--aut-ink);
        background: #eef3f7;
    }

    .aut-olho:focus-visible {
        outline: 2px solid var(--aut-cyan);
        outline-offset: 1px;
    }

/* ── Mensagens ── */

/* classe que o ASP.NET põe no input quando o ModelState reprova o campo */
.aut-entrada input.input-validation-error {
    border-color: var(--aut-erro);
    background: #fff8f7;
}

    .aut-entrada input.input-validation-error:focus {
        border-color: var(--aut-erro);
        box-shadow: 0 0 0 4px rgba(217, 65, 43, .15);
    }

.aut-erro {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--aut-erro);
}

    .aut-erro:empty {
        display: none;
    }

.aut-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(217, 65, 43, .25);
    background: rgba(217, 65, 43, .07);
    color: #a8321f;
    font-size: .85rem;
}

    .aut-alerta i {
        font-size: 18px;
        line-height: 1.2;
    }

/* aviso de Caps Lock ligado */
.aut-caps {
    display: none;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: #b07206;
}

    .aut-caps.is-on {
        display: flex;
    }

/* ── Ações ── */

.aut-linha-acao {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 22px;
}

.aut-link {
    color: #1b7fb0;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

    .aut-link:hover, .aut-link:focus-visible {
        color: #0f5d84;
        text-decoration: underline;
    }

.aut-botao {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 13px;
    background: var(--aut-aco);
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease;
}

    .aut-botao:hover {
        background: var(--aut-navy);
    }

    .aut-botao:active {
        background: var(--aut-navy-esc);
    }

    .aut-botao:focus-visible {
        outline: 3px solid rgba(39, 169, 227, .45);
        outline-offset: 2px;
    }

    .aut-botao[disabled] {
        cursor: progress;
        background: #56718c;
    }

    /* o <i> nasce sem classe e só aparece quando o JS o vira spinner; o
       display:none também o tira do flex, senão o gap deixaria um vão */
    .aut-botao i {
        display: none;
    }

        .aut-botao i.mdi {
            display: inline-block;
            font-size: 20px;
        }

        .aut-botao .mdi-loading {
            animation: aut-girar 1s linear infinite;
        }

@keyframes aut-girar {
    to {
        transform: rotate(360deg);
    }
}

.aut-registro {
    margin: 20px 0 0;
    font-size: .88rem;
    color: var(--aut-muted);
}

/* ── Aviso de primeiro acesso ──
   Aqui não cabe discurso de venda: quem chega nesta tela já é cliente e só
   quer entrar. O que falta explicar é por que a conta recém-criada ainda não
   abre nada — é a dúvida que trava as pessoas neste ponto. */

.aut-nota {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--aut-line);
}

    .aut-nota h2 {
        margin: 0 0 6px;
        font-size: .88rem;
        font-weight: 700;
    }

    .aut-nota p {
        margin: 0;
        font-size: .85rem;
        line-height: 1.55;
        color: var(--aut-muted);
    }

/* ── Rodapé ── */

.aut-rodape {
    flex: 0 0 auto;
    padding: 0 clamp(20px, 6vw, 64px) 26px;
}

    .aut-rodape p {
        margin: 0;
        font-size: .76rem;
        color: #9aa8b6;
    }

/* ═══════════════════════ Responsivo ═══════════════════════ */

@media (max-width: 575.98px) {
    .aut-cabeca {
        padding-bottom: 52px;
    }

    .aut-logo {
        width: 56px;
        height: 56px;
        border-radius: 15px;
    }

        .aut-logo img {
            width: 44px;
            height: 44px;
        }

    .aut-marca-nome {
        font-size: 1.2rem;
    }

    .aut-ecg {
        height: 56px;
    }
}

/* ═══════════════════════ Acessibilidade ═══════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .aut-tela * {
        animation: none !important;
        transition: none !important;
    }

    .aut-ecg path {
        stroke-dashoffset: 0;
    }
}