/* ===========================================================================
   imperium-entrada.css — a tela de entrada do Imperium

   Carregado depois do imperium-tokens.css: usa os mesmos tokens do admin
   (antes eram cópias por valor, porque o admin ainda vivia sobre o tema do
   .iASO). Com isso o Login ganha a fonte do sistema e o tema escuro, e um
   token que muda lá muda aqui junto.

   O painel da marca é escuro nos dois temas (primitivos grafite); o painel
   do acesso segue o tema (tokens semânticos).
   =========================================================================== */

:root {
    /* A costura entre os dois painéis: a .imp-marca-barra do cabeçalho do
       admin (3px, petróleo) esticada até a altura toda. */
    --imp-costura: var(--imp-regua);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body.imp-ent-corpo {
    margin: 0;
    background: var(--imp-grafite-850);
    color: var(--imp-texto);
    font-family: var(--imp-fonte);
    -webkit-font-smoothing: antialiased;
}

/* =========================== Composição =========================== */

/* 58/42 em vez de 50/50: os dois painéis não têm a mesma função. O escuro
   apresenta o produto e precisa de espaço para a geometria respirar; o claro
   é a transação e quer foco, não largura. */
.imp-ent-tela {
    display: grid;
    grid-template-columns: 1.38fr var(--imp-costura) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

.imp-ent-costura {
    background: var(--imp-petroleo-500);
}

/* =========================== Painel da marca =========================== */

.imp-ent-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 64px 72px var(--imp-e6);
    overflow: hidden;
    /* Fora de centro de propósito: levanta o canto onde fica o wordmark e
       deixa o rodapé recuar, sem virar enfeite. */
    background: radial-gradient(118% 82% at 12% 22%, var(--imp-grafite-800) 0%, var(--imp-grafite-850) 58%, var(--imp-grafite-900) 100%);
}

.imp-ent-arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.imp-ent-lockup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A mesma barra do cabeçalho do admin: 3px, raio 2px, petróleo. */
.imp-ent-lockup-barra {
    flex: 0 0 auto;
    width: var(--imp-regua);
    height: 30px;
    border-radius: 2px;
    background: var(--imp-petroleo-500);
}

.imp-ent-lockup-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.imp-ent-lockup-nome {
    font-family: var(--imp-fonte-titulo);
    font-size: 1.375rem;
    font-weight: var(--imp-peso-forte);
    letter-spacing: .04em;
    color: #ffffff;
}

.imp-ent-lockup-desc {
    margin-top: 3px;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .62);
}

.imp-ent-rodape-marca {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--imp-e4);
    padding-top: var(--imp-e4);
    border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: var(--imp-t-1);
    color: rgba(255, 255, 255, .58);
}

/* Fio no lugar do ponto médio: o separador vira estrutura, não pontuação. */
.imp-ent-rodape-fio {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .22);
}

/* =========================== Painel do acesso =========================== */

.imp-ent-acesso {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width: 0 porque item de grid não encolhe abaixo do conteúdo por
       padrão — sem isso a coluna do formulário estoura a tela no celular. */
    min-width: 0;
    padding: var(--imp-e7);
    background: var(--imp-superficie);
}

.imp-ent-coluna {
    width: 100%;
    max-width: 380px;
}

.imp-ent-titulo {
    margin: 0;
    font-family: var(--imp-fonte-titulo);
    font-size: 1.375rem;
    font-weight: var(--imp-peso-forte);
    letter-spacing: -.02em;
    color: var(--imp-texto);
}

.imp-ent-apoio {
    margin: var(--imp-e2) 0 var(--imp-e6);
    font-size: var(--imp-t-2);
    color: var(--imp-texto-2);
}

/* =========================== Aviso de erro =========================== */

/* Texto em tinta, não em vermelho: a mensagem de erro é justamente a que
   precisa ser lida sem esforço. A régua de 3px rima com a costura e com a
   barra da marca. */
.imp-ent-alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--imp-e2);
    margin-bottom: var(--imp-e5);
    padding: var(--imp-e3);
    border-radius: var(--imp-raio-p);
    border-left: var(--imp-regua) solid var(--imp-negativo);
    background: var(--imp-negativo-sutil);
    font-size: var(--imp-t-3);
    color: var(--imp-texto);
}

    .imp-ent-alerta svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-top: 1px;
        color: var(--imp-negativo);
    }

/* =========================== Botão =========================== */

.imp-ent-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--imp-e2);
    width: 100%;
    height: var(--imp-e7);
    margin-top: var(--imp-e5);
    padding: 0 var(--imp-e4);
    border: 0;
    border-radius: var(--imp-raio-p);
    /* Petróleo 700 e não o da marca: branco sobre #1f6359 dá 7,03 contra 4,79.
       Os dois passam AA; o escuro tem mais autoridade e deixa o petróleo da
       marca livre como acento. Igual nos dois temas. */
    background: var(--imp-petroleo-700);
    color: #ffffff;
    font-family: inherit;
    font-size: var(--imp-t-4);
    font-weight: var(--imp-peso-forte);
    cursor: pointer;
    transition: background-color var(--imp-mov-rapido) ease, transform .05s ease;
}

    .imp-ent-botao:hover {
        background: var(--imp-petroleo-800);
    }

    .imp-ent-botao:active {
        transform: translateY(1px);
    }

    /* Anel petróleo sobre botão petróleo some: o vão na cor do painel resolve. */
    .imp-ent-botao:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--imp-superficie), 0 0 0 5px var(--imp-petroleo-400);
    }

    .imp-ent-botao[disabled] {
        opacity: .62;
        cursor: not-allowed;
    }

/* O escudo marca que o destino da entrada é o Arthen ID, não esta tela. Sai
   de cena quando o giro entra, para o botão nunca mostrar os dois. */
.imp-ent-escudo {
    flex: none;
    width: 18px;
    height: 18px;
}

.imp-ent-botao--enviando .imp-ent-escudo {
    display: none;
}

.imp-ent-girando {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;
}

.imp-ent-botao--enviando .imp-ent-girando {
    display: block;
    animation: imp-ent-girar .64s linear infinite;
}

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

.imp-ent-rodape-acesso {
    margin: var(--imp-e5) 0 0;
    padding-top: var(--imp-e5);
    border-top: 1px solid var(--imp-borda);
    font-size: var(--imp-t-1);
    color: var(--imp-texto-2);
}

/* =========================== A arte =========================== */

.imp-ent-arte-grade line {
    stroke: #ffffff;
    stroke-width: 1;
}

.imp-ent-arte-fluxo path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-opacity: .085;
}

/* A única linha de cor do desenho: a consolidada, chegando na costura. */
.imp-ent-arte-fluxo path.imp-ent-arte-final {
    stroke: var(--imp-petroleo-500);
    stroke-width: 1.75;
    stroke-opacity: .55;
}

.imp-ent-arte-no {
    fill: #ffffff;
}

.imp-ent-arte-no--fim {
    fill: var(--imp-petroleo-500);
    fill-opacity: .9;
}

.imp-ent-arte-anel {
    fill: none;
    stroke: var(--imp-petroleo-500);
    stroke-width: 1;
    stroke-opacity: .28;
}

/* Desenha uma vez e para. É o laço que faz movimento virar enfeite. */
@media (prefers-reduced-motion: no-preference) {
    .imp-ent-arte-fluxo path {
        stroke-dasharray: 1200;
        stroke-dashoffset: 1200;
        animation: imp-ent-tracar 2.2s cubic-bezier(.22, .61, .36, 1) forwards;
    }

    .imp-ent-arte-fluxo path[data-estagio="2"] {
        animation-delay: .18s;
    }

    .imp-ent-arte-fluxo path[data-estagio="3"] {
        animation-delay: .36s;
    }

    .imp-ent-arte-no,
    .imp-ent-arte-anel {
        opacity: 0;
        animation: imp-ent-surgir .5s ease forwards .9s;
    }
}

@keyframes imp-ent-tracar {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes imp-ent-surgir {
    to {
        opacity: 1;
    }
}

/* =========================== Tablet =========================== */

@media (max-width: 1199.98px) {
    .imp-ent-tela {
        grid-template-columns: .92fr var(--imp-costura) 1fr;
    }

    .imp-ent-marca {
        padding: var(--imp-e7) var(--imp-e6);
    }
}

/* =========================== Celular =========================== */

/* Empilha. O painel escuro vira faixa de 168px, não tela cheia: um herói de
   altura total empurraria o botão de entrada para fora da dobra. */
@media (max-width: 767.98px) {
    .imp-ent-tela {
        grid-template-columns: 1fr;
        grid-template-rows: 168px var(--imp-costura) 1fr;
    }

    .imp-ent-marca {
        justify-content: center;
        padding: var(--imp-e5);
    }

    .imp-ent-rodape-marca {
        display: none;
    }

    .imp-ent-acesso {
        align-items: flex-start;
        padding: var(--imp-e6) var(--imp-e5) var(--imp-e5);
    }

    .imp-ent-arte-grade {
        display: none;
    }
}

@media (max-width: 767.98px) and (max-height: 560px) {
    .imp-ent-tela {
        grid-template-rows: 88px var(--imp-costura) 1fr;
    }

    .imp-ent-lockup-desc {
        display: none;
    }
}