/* ===========================================================================
   Tela de entrar (login): à esquerda, a história "um dia na vida dos robôs"
   em quatro capítulos (paginas/entrada_historia.js); à direita, o acesso.
   Os campos com ícone, o aviso de Caps Lock e a caixa de ajuda valem também
   para esqueci/redefinir senha. Só tokens de tokens.css.
   =========================================================================== */

/* O topo (Ajuda + tema) flutua sobre o lado do formulário; o logo fica na
   própria história. */
.pagina-login { background: var(--fundo); }
.pagina-login .simples-topo {
    position: absolute;
    top: 0; right: 0;
    max-width: none;
    margin: 0;
    padding: var(--e-5) var(--e-6);
    z-index: 2;
}
.pagina-login .simples-topo .marca { display: none; }

.login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(400px, 1fr);
}

/* ============================================================== história */
.historia {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-8);
    padding: var(--e-8) clamp(var(--e-8), 5vw, var(--e-16));
    color: var(--sobre-marca);
    background:
        radial-gradient(55% 45% at 85% 8%, color-mix(in srgb, var(--acento-500) 38%, transparent), transparent 70%),
        radial-gradient(60% 55% at 0% 100%, color-mix(in srgb, var(--primaria-400) 22%, transparent), transparent 70%),  /* era 40%: o laranja dos títulos caía para 2,1:1 */
        linear-gradient(160deg, var(--historia-fundo-1), var(--historia-fundo-2));
    isolation: isolate;
    overflow: hidden;
}
/* Malha de pontos que some em direção ao topo (só decoração). */
.historia::before {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--sobre-marca) 18%, transparent) 1px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: linear-gradient(200deg, transparent 25%, black 95%);
}
/* Brilho laranja que respira devagar, como um "sol nascendo". */
.historia::after {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    right: -180px; top: -200px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--acento-400) 30%, transparent), transparent 65%);
    animation: historia-respira 9s ease-in-out infinite alternate;
}
@keyframes historia-respira { to { transform: translate(-40px, 50px) scale(1.15); opacity: .7; } }

.historia-logo { width: 124px; height: auto; display: block; }

/* Segmentos de progresso, como stories. */
.historia-progresso { display: flex; align-items: center; gap: var(--e-2); }
.historia-segmento {
    flex: 1;
    height: 22px;
    padding: 9px 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.historia-segmento span {
    display: block;
    height: 4px;
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--sobre-marca) 22%, transparent);
    overflow: hidden;
    position: relative;
}
.historia-segmento span::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--sobre-marca);
    transform-origin: left;
    transform: scaleX(var(--avanco, 0));
}
.historia-segmento:focus-visible { outline: 2px solid var(--sobre-marca); outline-offset: 2px; border-radius: var(--raio-sm); }
.historia-pausa {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid color-mix(in srgb, var(--sobre-marca) 30%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--sobre-marca) 8%, transparent);
    color: var(--sobre-marca);
    cursor: pointer;
}
.historia-pausa:hover { background: color-mix(in srgb, var(--sobre-marca) 16%, transparent); }

.historia-capitulos { flex: 1; display: grid; align-content: center; cursor: default; }

.capitulo { display: grid; gap: var(--e-5); max-width: 620px; }
.capitulo[hidden] { display: none; }
.capitulo.ativo > * { animation: capitulo-entra .7s var(--curva) both; }
.capitulo.ativo > :nth-child(2) { animation-delay: .08s; }
.capitulo.ativo > :nth-child(3) { animation-delay: .16s; }
.capitulo.ativo > :nth-child(4) { animation-delay: .26s; }
@keyframes capitulo-entra { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }

.capitulo-hora {
    justify-self: start;
    display: inline-flex; gap: var(--e-2); align-items: center;
    margin: 0;
    padding: var(--e-1) var(--e-3);
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--sobre-marca) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--sobre-marca) 20%, transparent);
    font-size: var(--fs-xs);
    font-weight: var(--peso-forte);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.capitulo-titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: var(--peso-titulo);
    text-wrap: balance;
}
.capitulo-titulo em { font-style: normal; color: var(--historia-destaque); }
.capitulo-texto { margin: 0; max-width: 48ch; font-size: var(--fs-lg); line-height: 1.5; opacity: .88; text-wrap: pretty; }

/* "Palco": a cena de cada capítulo, num vidro sobre o fundo. */
.palco {
    margin-top: var(--e-2);
    padding: var(--e-4);
    border-radius: var(--raio-xl);
    background: color-mix(in srgb, var(--sobre-marca) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--sobre-marca) 16%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: 0 24px 60px rgb(0 0 0 / .25);
}

/* Capítulo 1: fila de robôs acordando. */
.fila { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.fila li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: var(--e-3);
    align-items: center;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--raio-md);
    background: color-mix(in srgb, var(--sobre-marca) 7%, transparent);
    font-size: var(--fs-sm);
}
.capitulo.ativo .fila li { animation: capitulo-entra .6s var(--curva) both; animation-delay: calc(.35s + var(--i) * .18s); }
.fila b { font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila small { opacity: .75; white-space: nowrap; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--sobre-marca) 45%, transparent); }
.ponto.ok { background: var(--historia-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--historia-ok) 22%, transparent); }
.ponto.erro { background: var(--historia-falha); box-shadow: 0 0 0 4px color-mix(in srgb, var(--historia-falha) 22%, transparent); }
/* Mesmo significado de cor do resto da Central: rodando = teal, deu certo =
   verde, falhou = vermelho (o laranja fica só para destaque de texto). */
.ponto.rodando { background: var(--historia-rodando); animation: ponto-pulsa 1.4s ease-in-out infinite; }
@keyframes ponto-pulsa {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--historia-rodando) 60%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--historia-rodando) 0%, transparent); }
}

/* Capítulo 2: o dia em números + ritmo por hora. */
.palco-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.numero strong {
    display: block;
    font-family: var(--fonte-numero);
    font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.numero span { font-size: var(--fs-xs); opacity: .8; }
.barras {
    grid-column: 1 / -1;
    height: 64px;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-items: end;
    gap: 3px;
}
.barras span {
    height: max(3px, calc(var(--altura) * 100%));
    border-radius: 3px 3px 1px 1px;
    background: color-mix(in srgb, var(--sobre-marca) 70%, transparent);
    transform-origin: bottom;
}
.barras span.futuro { background: color-mix(in srgb, var(--sobre-marca) 14%, transparent); }
.barras span.agora { background: var(--historia-destaque); }
.capitulo.ativo .barras span { animation: barra-sobe .6s var(--curva) both; animation-delay: calc(.3s + var(--i) * 25ms); }
@keyframes barra-sobe { from { transform: scaleY(0); } }

/* Capítulo 3: o alerta que vira uma frase simples. */
.palco:has(.alerta-demo) { display: grid; gap: var(--e-3); }
.alerta-demo {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--raio-md);
    background: color-mix(in srgb, var(--sobre-marca) 7%, transparent);
    border-left: 3px solid var(--historia-falha);
}
.alerta-demo.resolvido { border-left-color: var(--historia-ok); }
.alerta-demo p { margin: var(--e-1) 0 0; font-size: var(--fs-sm); opacity: .85; }
.alerta-icone {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--raio-md);
    background: color-mix(in srgb, var(--historia-falha) 22%, transparent);
    color: var(--historia-falha);
}
.resolvido .alerta-icone { background: color-mix(in srgb, var(--historia-ok) 20%, transparent); color: var(--historia-ok); }
.alerta-acao { display: inline-flex; gap: var(--e-1); margin-top: var(--e-2); font-size: var(--fs-xs); font-weight: var(--peso-forte); color: var(--historia-destaque); }
.capitulo.ativo .alerta-demo.resolvido { animation: capitulo-entra .6s var(--curva) both; animation-delay: 1.6s; }

/* Capítulo 4: o convite, que aponta para o formulário. */
.palco-convite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.palco-convite span {
    display: inline-flex; gap: var(--e-2); align-items: center;
    padding: var(--e-2) var(--e-4);
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--sobre-marca) 12%, transparent);
    font-weight: var(--peso-medio);
}
.palco-convite .seta { margin-left: auto; font-size: 1.6rem; color: var(--historia-destaque); animation: seta-aponta 1.2s ease-in-out infinite; }
@keyframes seta-aponta { 50% { transform: translateX(8px); } }

.historia-rodape { font-size: var(--fs-sm); }
.historia-rodape a { color: inherit; opacity: .92; text-decoration: underline; text-underline-offset: 3px; }
.historia-rodape a:hover { opacity: 1; }

/* ================================================================ acesso */
.acesso {
    display: grid;
    place-items: center;
    padding: var(--e-16) var(--e-8) var(--e-8);
    background:
        radial-gradient(70% 50% at 100% 100%, var(--primaria-suave), transparent 70%),
        var(--fundo);
}
.acesso-cartao {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--e-6);
    animation: capitulo-entra .7s var(--curva) both;
}
.acesso-cartao h1 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.acesso-cartao .secundario { margin: var(--e-2) 0 0; }
.acesso-cartao .btn-lg { width: 100%; justify-content: center; min-height: 48px; }
.acesso-selo { margin: 0; display: flex; gap: var(--e-2); justify-content: center; color: var(--texto-3); font-size: var(--fs-xs); }

/* No capítulo final, o botão Entrar chama a atenção (uma vez). */
.login-convite .acesso-cartao .btn-primaria { animation: convite-brilha 1.6s var(--curva) 2; }
@keyframes convite-brilha {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primaria-500) 25%, transparent); }
}

.campo-rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.campo-rotulo a { font-size: var(--fs-xs); }

.entrada-saudacao { margin: 0 0 var(--e-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--primaria-texto); font-weight: var(--peso-forte); }

/* ------------------------------------------- campos (também das senhas) */
.campo-icone { position: relative; }
.campo-icone > i {
    position: absolute; left: .85em; top: 50%; transform: translateY(-50%);
    color: var(--texto-3); pointer-events: none;
}
.campo-icone .entrada { padding-left: 2.5em; min-height: 48px; }
.campo-icone:focus-within > i { color: var(--primaria-texto); }
.mostrar-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.campo-icone:has(.mostrar-senha) .entrada { padding-right: 2.8em; }

.aviso-caps { display: flex; gap: var(--e-1); align-items: center; font-size: var(--fs-xs); color: var(--atencao); margin-top: var(--e-1); }
.aviso-caps[hidden] { display: none; }

.entrada-ajuda {
    display: flex; gap: var(--e-3); align-items: center;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--raio-lg);
    background: var(--superficie-2);
    border: 1px dashed var(--borda-forte);
    font-size: var(--fs-sm);
}
.entrada-ajuda > i { font-size: 1.3rem; color: var(--primaria-texto); }
.entrada-ajuda p { margin: 0; flex: 1; }

/* ============================================================ responsivo */
@media (max-width: 960px) {
    .pagina-login .simples-topo { position: static; justify-content: flex-end; padding: var(--e-3) var(--e-4); }
    .login { grid-template-columns: 1fr; min-height: 0; }
    /* No celular a história vira uma faixa: logo, progresso e o título. */
    .historia { gap: var(--e-4); padding: var(--e-6) var(--e-4); }
    .historia-capitulos { cursor: pointer; min-height: 12rem; align-content: start; }
    .capitulo { gap: var(--e-3); }
    .capitulo-titulo { font-size: clamp(1.5rem, 1.1rem + 2.5vw, 2.1rem); }
    .capitulo-texto { font-size: var(--fs-base); }
    .palco, .historia-rodape { display: none; }
    .acesso { padding: var(--e-8) var(--e-4) var(--e-12); }
    /* Celular: primeiro o formulário (é para isso que a pessoa abriu a tela);
       a história vem depois, como apresentação. */
    .acesso { order: -1; padding-top: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
    .historia::after,
    .capitulo.ativo > *,
    .capitulo.ativo .fila li,
    .capitulo.ativo .barras span,
    .capitulo.ativo .alerta-demo.resolvido,
    .palco-convite .seta,
    .ponto.rodando,
    .acesso-cartao,
    .login-convite .acesso-cartao .btn-primaria { animation: none; }
}