/*
|--------------------------------------------------------------------------
| Páginas de acesso (login, sessão expirada, sem permissão)
|--------------------------------------------------------------------------
|
| Página inteira fora do layout. À esquerda o painel da marca (grafite +
| flor COMEPI, o único elemento gráfico); à direita a tarefa (formulário).
| Abaixo de 992 px o painel vira uma faixa no topo.
|
| Carregado só nessas páginas (não entra na lista global do layout).
|
*/

body:has(> .ds-auth) {
    margin: 0;

    background: var(--ds-color-surface);
}

.ds-auth {
    display: grid;
    grid-template-columns: minmax(360px, 44%) minmax(0, 1fr);

    min-height: 100vh;
}

/* Painel da marca */

.ds-auth__marca {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: var(--ds-space-12);

    padding: var(--ds-space-10);

    overflow: hidden;

    background: var(--ds-color-nav-bg);

    color: var(--ds-graphite-300);
}

.ds-auth__marca .ds-brand {
    position: relative;
    z-index: 1;
}

/* A flor grande, cortada pela borda: o gesto de marca da página */
.ds-auth__flor {
    position: absolute;
    right: -24%;
    bottom: -18%;

    width: 72%;
    max-width: 520px;

    fill: var(--ds-color-brand);

    pointer-events: none;
}

.ds-auth__frase {
    position: relative;
    z-index: 1;

    max-width: 30ch;

    color: var(--ds-graphite-0);

    font: 600 26px/34px var(--ds-font);
    letter-spacing: -0.02em;
}

.ds-auth__rodape {
    position: relative;
    z-index: 1;

    max-width: 40ch;
    margin-top: auto;

    color: var(--ds-graphite-400);

    font: var(--ds-text-caption);
}

/* Área do formulário */

.ds-auth__area {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--ds-space-10) var(--ds-space-6);
}

.ds-auth__caixa {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-6);

    width: 100%;
    max-width: 380px;
}

.ds-auth__titulo {
    margin: 0;

    font: var(--ds-text-display);
    letter-spacing: var(--ds-text-display-tracking);
}

.ds-auth__subtitulo {
    margin: var(--ds-space-1) 0 0;

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body);
}

.ds-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.ds-auth__ajuda {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-body-sm);
}

/* Botão da conta Microsoft (logo oficial de quatro quadrados) */
.ds-auth__microsoft svg {
    width: 18px;
    height: 18px;
}

/* Campo de senha com botão de mostrar/ocultar */
.ds-auth .ds-input-wrap > .ds-input {
    padding-right: 44px;
}

.ds-auth__olho {
    position: absolute;
    top: 50%;
    right: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    padding: 0;

    border: 0;
    border-radius: var(--ds-radius-md);

    background: transparent;

    color: var(--ds-color-text-muted);

    font-size: 18px;

    transform: translateY(-50%);

    cursor: pointer;
}

.ds-auth__olho:hover {
    background: var(--ds-color-secondary);

    color: var(--ds-color-text);
}

.ds-auth__olho:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: 0;
}

@media (max-width: 991.98px) {
    .ds-auth {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .ds-auth__marca {
        padding: var(--ds-space-5) var(--ds-space-6);
    }

    .ds-auth__frase,
    .ds-auth__rodape {
        display: none;
    }

    .ds-auth__flor {
        top: -60%;
        right: -8%;
        bottom: auto;

        width: 180px;
    }

    .ds-auth__area {
        align-items: flex-start;

        padding-top: var(--ds-space-8);
    }
}