/* ═══════════════════════════════════════════════════════════════════════
   autenticacao.css — telas de entrada do Sanus (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 {
    /* Verde-petróleo da Área do Médico (_LayoutMedico.cshtml / layoutMedico.css
       --med-sidebar / --med-sidebar-fundo2), para a autenticação falar a
       mesma língua visual do resto do sistema.

       ATENÇÃO: estas telas usam Layout = null e NÃO carregam layoutMedico.css,
       onde os --sanus-* moram. Por isso TODO var() desta folha leva fallback
       com o literal claro — sem ele a declaração cai fora. Os fallbacks são
       byte-idênticos aos valores de lá, então quando o bloco compartilhado de
       autenticação existir nada muda no Light.

       --aut-navy é o mesmo tom do --sanus-barra-lateral (#13302A, aqui em minúsculas
       por herança). Já --aut-navy-esc (#0e241f) e --aut-aco (#1f4e42) NÃO são o
       --sanus-barra-lateral-2 (#1E4A3E): a faixa tem gradiente de três paradas
       próprio, e colapsá-los mudaria o Light. Viraram --sanus-entrada-faixa* . */
    --aut-navy: var(--sanus-barra-lateral, #13302a);
    --aut-navy-esc: var(--sanus-entrada-faixa, #0e241f);
    --aut-aco: var(--sanus-entrada-faixa-2, #1f4e42);
    --aut-cyan: var(--sanus-foco, #27a9e3);
    --aut-ink: var(--sanus-texto, #17222e);
    /* #6b7c8f é próprio: não é o --sanus-texto-2 (#66788b). */
    --aut-muted: var(--sanus-entrada-apoio, #6b7c8f);
    /* #e3e9ef é próprio: não é o --sanus-borda (#e7ecf1). */
    --aut-line: var(--sanus-entrada-linha, #e3e9ef);
    /* #d9412b é próprio: não é o --sanus-anormal (#a8362a). */
    --aut-erro: var(--sanus-entrada-erro, #d9412b);
}

body.aut-body {
    margin: 0;
    background: var(--sanus-superficie, #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 quando a marca for uma 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: var(--sanus-entrada-icone, #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: var(--sanus-entrada-campo, #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: var(--sanus-entrada-espera, #a9b7c4);
        }

        .aut-entrada input:hover {
            border-color: var(--sanus-entrada-campo-borda-realce, #cfd9e3);
        }

        .aut-entrada input:focus {
            outline: none;
            /* No claro o foco CLAREIA o campo (#f8fafc → #fff); no escuro esse
               gesto tem de inverter (subir um degrau de superfície, não ir ao
               branco) — ver --sanus-entrada-campo-foco. */
            background: var(--sanus-entrada-campo-foco, #fff);
            border-color: var(--aut-cyan);
            box-shadow: 0 0 0 4px var(--sanus-entrada-foco-halo, 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: var(--sanus-entrada-olho, #8fa1b1);
    font-size: 19px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

    .aut-olho:hover {
        color: var(--aut-ink);
        background: var(--sanus-entrada-olho-realce, #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: var(--sanus-entrada-campo-invalido, #fff8f7);
}

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

.aut-entrada input:-webkit-autofill,
.aut-entrada input:-webkit-autofill:hover,
.aut-entrada input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--aut-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--sanus-entrada-campo, #f8fafc) inset;
    box-shadow: 0 0 0 1000px var(--sanus-entrada-campo, #f8fafc) inset;
    caret-color: var(--aut-ink);
    border-color: var(--aut-line);
    transition: background-color 5000s ease-in-out 0s, border-color .2s ease;
}

    .aut-entrada input:-webkit-autofill:focus {
        border-color: var(--aut-cyan);
        -webkit-box-shadow: 0 0 0 1000px var(--sanus-entrada-campo-foco, #fff) inset, 0 0 0 4px var(--sanus-entrada-foco-halo, rgba(39, 169, 227, .15));
        box-shadow: 0 0 0 1000px var(--sanus-entrada-campo-foco, #fff) inset, 0 0 0 4px var(--sanus-entrada-foco-halo, rgba(39, 169, 227, .15));
    }

.aut-entrada input.input-validation-error:-webkit-autofill {
    border-color: var(--aut-erro);
    -webkit-box-shadow: 0 0 0 1000px var(--sanus-entrada-campo-invalido, #fff8f7) inset;
    box-shadow: 0 0 0 1000px var(--sanus-entrada-campo-invalido, #fff8f7) inset;
}

.aut-entrada input:autofill {
    -webkit-text-fill-color: var(--aut-ink);
    caret-color: var(--aut-ink);
}

.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 var(--sanus-entrada-alerta-borda, rgba(217, 65, 43, .25));
    background: var(--sanus-entrada-alerta-fundo, rgba(217, 65, 43, .07));
    color: var(--sanus-entrada-alerta-tinta, #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: var(--sanus-entrada-caps-tinta, #b07206);
}

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

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

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

.aut-link {
    /* Mesmo verde e mesmo escurecimento no hover do .med-btn--primario em
       layoutMedico.css — reaproveita o par já calibrado lá em vez de inventar
       um novo tom. Agora nomeado: --sanus-acao (#117d4d) /
       --sanus-acao-realce (#0d6b42). */
    color: var(--sanus-acao-link, #117d4d);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

    .aut-link:hover, .aut-link:focus-visible {
        color: var(--sanus-acao-link-realce, #0d6b42);
        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: var(--sanus-acao-tinta, #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 var(--sanus-entrada-foco-anel, rgba(39, 169, 227, .45));
        outline-offset: 2px;
    }

    .aut-botao[disabled] {
        cursor: progress;
        background: var(--sanus-entrada-botao-inativo, #587867);
    }

    /* 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 .aut-limite {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .aut-rodape p {
        margin: 0;
        font-size: .76rem;
        color: var(--sanus-texto-3, #9aa8b6);
    }

.aut-tema-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--sanus-entrada-linha, #e3e9ef);
    border-radius: 9px;
    background: transparent;
    color: var(--sanus-entrada-apoio, #6b7c8f);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

    .aut-tema-toggle:hover {
        background: var(--sanus-entrada-olho-realce, #eef3f7);
        color: var(--aut-ink);
    }

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

    .aut-tema-toggle span {
        font-size: 17px;
    }

.aut-tema-toggle .med-tema-ic-claro::before {
    content: "\F0599";
}

.aut-tema-toggle .med-tema-ic-escuro::before {
    content: "\F0594";
}

[data-tema="claro"] .aut-tema-toggle .med-tema-ic-escuro,
[data-tema="escuro"] .aut-tema-toggle .med-tema-ic-claro {
    display: none;
}

/* ═══════════════════════ 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;
    }
}

/* ---------- "É você ainda?" (Pages/ConfirmarIdentidade) ---------- */
.aut-identidade {
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid var(--aut-line);
    border-left: 4px solid var(--aut-aco);
    border-radius: 13px;
}

    .aut-identidade strong {
        display: block;
        font-size: 1.05rem;
        color: var(--aut-ink);
    }

    .aut-identidade span {
        display: block;
        font-size: .9rem;
        color: var(--aut-muted);
        overflow-wrap: anywhere;
    }

.aut-acoes {
    display: grid;
    gap: 12px;
}

    .aut-acoes form {
        margin: 0;
    }

.aut-botao-secundario {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--aut-line);
    border-radius: 13px;
    background: transparent;
    color: var(--aut-ink);
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
}

    .aut-botao-secundario:hover {
        border-color: var(--aut-aco);
    }

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