/* Tela de login — One Design System v1 (25/09/2026).
   Escopo: tudo sob .one-login; não altera nenhuma outra tela.
   Os valores abaixo são os tokens do design system (nome do token no comentário). */

.one-login {
    --one-blue: var(--cor-primaria);          /* blue */
    --one-blue-hover: var(--cor-primaria-texto);    /* blue-hover */
    --one-blue-text: var(--cor-primaria-texto);     /* blue-text */
    --one-navy: var(--cor-sombra);          /* navy */
    --one-orange: var(--cor-secundaria);        /* orange */
    --one-sky: var(--cor-terciaria);           /* sky */
    --one-rail: #0A2A6C;          /* rail */
    --one-rail-ink: #C9D5F0;      /* rail-ink */
    --one-rail-step: #2A4486;     /* rail-step */
    --one-bg: var(--cor-fundo);            /* bg */
    --one-surface: var(--cor-superficie);       /* surface */
    --one-line: var(--cor-borda);          /* line */
    --one-ink: var(--cor-texto);           /* ink */
    --one-ink-muted: var(--cor-texto-secundario);     /* ink-muted */
    --one-danger: #C2261D;        /* danger */
    --one-display: var(--fonte-titulo);
    --one-ui: var(--fonte-principal);

    display: grid;
    grid-template-columns: minmax(360px, 5fr) 7fr;
    min-height: 100vh;
    background: var(--one-bg);
    color: var(--one-ink);
    font-family: var(--one-ui);
    -webkit-font-smoothing: antialiased;
}

/* Painel da marca */
.one-login__marca {
    background: var(--one-rail);
    color: var(--one-rail-ink);
    padding: 48px 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    overflow: hidden;
}
.one-login__logo { display: block; height: 48px; width: auto; margin: 0; align-self: flex-start; }

.one-login__regua { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.one-login__regua span { display: flex; gap: 6px; }
.one-login__regua i { width: 36px; height: 10px; border-radius: 2px; background: var(--one-rail-step); }
.one-login__regua i.f { background: var(--one-sky); }
.one-login__regua i.p { background: var(--one-orange); }

.one-login__rodape { display: flex; flex-direction: column; gap: 28px; }
.one-login__tese {
    margin: 0;
    max-width: 30ch;
    font: 600 24px/32px var(--one-display);
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-wrap: balance;
}
.one-login__assinatura {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--one-rail-step);
    font-size: 13px;
    color: var(--one-rail-ink);
}
.one-login__assinatura img { display: block; height: 22px; width: auto; }

/* Formulário */
.one-login__acesso { display: grid; place-items: center; padding: 48px 24px; }
.one-login__form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.one-login__form h1 {
    margin: 0;
    font: 600 26px/32px var(--one-display);
    letter-spacing: -0.02em;
    color: var(--one-ink);
}
.one-login__sub { margin: -10px 0 6px; font-size: 14px; line-height: 20px; color: var(--one-ink-muted); }

.one-login__campo { display: flex; flex-direction: column; gap: 6px; }
.one-login__campo label { font: 600 13px/16px var(--one-ui); color: var(--one-ink); }
.one-login__campo input {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--one-line);
    border-radius: 8px;
    background: var(--one-surface);
    color: var(--one-ink);
    font: 400 14px/20px var(--one-ui);
    margin: 0;
    box-shadow: none;
}
.one-login__campo input:hover { border-color: #B7C2D6; }
.one-login__campo input:focus { outline: 2px solid var(--one-ink); outline-offset: 2px; border-color: var(--one-ink); }
.one-login__campo.tem-erro input { border-color: var(--one-danger); }

.one-login__senha { position: relative; }
.one-login__senha input { padding-right: 44px; }
.one-login__senha button {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--one-ink-muted); padding: 0;
}
.one-login__senha button:hover { color: var(--one-blue-text); background: #E8F0FF; }
.one-login__senha button:focus-visible { outline: 2px solid var(--one-ink); outline-offset: 1px; }
.one-login__senha button svg { width: 16px; height: 16px; }

.one-login__erro {
    padding: 10px 12px;
    border: 1px solid var(--one-danger);
    border-radius: 8px;
    background: var(--one-surface);
    color: var(--one-danger);
    font-size: 13px;
    line-height: 18px;
}
.one-login__erro-campo { font-size: 12.5px; line-height: 16px; color: var(--one-danger); }

.one-login__entrar {
    margin-top: 6px;
    height: 42px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: var(--one-blue);
    color: #FFFFFF;
    font: 600 14px/1 var(--one-ui);
    cursor: pointer;
}
.one-login__entrar:hover { background: var(--one-blue-hover); }
.one-login__entrar:focus-visible { outline: 2px solid var(--one-ink); outline-offset: 2px; }

.one-login__esqueci {
    align-self: center;
    font: 500 13px/18px var(--one-ui);
    color: var(--one-blue-text);
    text-decoration: none;
}
.one-login__esqueci:hover { text-decoration: underline; }
.one-login__esqueci:focus-visible { outline: 2px solid var(--one-ink); outline-offset: 2px; border-radius: 4px; }

/* Tela estreita: a marca vira uma faixa curta no topo */
@media (max-width: 860px) {
    .one-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .one-login__marca { padding: 20px 24px; gap: 0; }
    .one-login__logo { height: 32px; }
    .one-login__regua, .one-login__rodape { display: none; }
    .one-login__acesso { place-items: start center; padding: 32px 16px 48px; }
}

@media (prefers-reduced-motion: no-preference) {
    .one-login__entrar, .one-login__senha button, .one-login__campo input { transition: background-color .12s, border-color .12s, color .12s; }
}