/* =============================================================================
   ByPoint — identidade da tela de entrada
   =============================================================================
   Paleta: azul petróleo (fiorde) e brancos gelo, com bronze como único acento.
   Bronze e não um neon: é a liga que os nórdicos usavam nas ferragens sobre
   ferro, e sobre água escura ele lê como metal, não como interface.

   A marca é o eyktamark — o disco de horizonte dividido nos oito eyktir, as
   oito partes em que os escandinavos partiam o dia. Um sistema de ponto
   construído sobre a divisão nórdica do dia é a única coisa aqui que não
   poderia ser de mais ninguém, então é ela que se repete: no símbolo, e na
   linha de horizonte que atravessa a página.

   Sem fonte externa e sem foto: a tela abre numa rede local, às vezes num
   celular com sinal ruim, e nada aqui depende da internet.
   ========================================================================== */

:root {
    --bp-fiorde-950: #04161D;
    --bp-fiorde-900: #0A2A35;
    --bp-fiorde-800: #0F3543;
    --bp-fiorde-600: #175062;
    --bp-gelo-050:   #F4F8F9;
    --bp-gelo-200:   #DCE7EA;
    --bp-gelo-400:   #9DB4BC;
    --bp-bronze:     #C08A3E;
    --bp-bronze-alt: #DDA95C;

    /* A altura do campo. Vinha do tema, sem nome, e o desenho que se apoia
       nela — o ícone dentro do campo — não tinha onde ler o valor. */
    --bp-campo-altura: 3.625rem;
}

/* ---------------------------------------------------------------- estrutura */

body.bp-login {
    background: var(--bp-fiorde-950);
    color: var(--bp-gelo-050);
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
}

body.bp-login .wrapper {
    background: transparent;
    overflow: visible;
}

/* O tema dá altura de viewport a .main. Aqui quem manda na altura é a grade —
   sem zerar o min-height, a coluna do cartão fica com 100vh também no celular e
   abre um buraco de 150px entre o texto e o formulário.
   O reset é só do .main: o shell também carrega .wrapper, e zerar ali derrubaria
   a altura da grade inteira, jogando o cartão para o topo no desktop. */
body.bp-login .main {
    background: transparent;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.bp-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Anéis concêntricos saindo de um ponto fora da tela: a marca d'água do próprio
   disco de horizonte, no volume de um entalhe — perceptível, nunca protagonista. */
.bp-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle at 10% 76%,
            rgba(244, 248, 249, .04) 0 1px, transparent 1px 74px);
}

.bp-brand,
.bp-access {
    position: relative;
    z-index: 1;
}

.bp-access .modal-content {
    position: relative;
    z-index: 2;
}

.bp-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.75rem;
    padding: clamp(2rem, 4.5vw, 4.25rem);
    padding-bottom: 26vh;
}

.bp-rodape {
    position: fixed;
    left: clamp(2rem, 4.5vw, 4.25rem);
    bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bp-access {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 3rem) clamp(1rem, 4vw, 4rem);
}

/* O .content do tema se estica para ocupar a coluna inteira, e o cartão fica
   grudado no topo dela. Centrar aqui dentro é o que põe o cartão no eixo — e,
   de quebra, apoiado logo acima da linha do horizonte. */
.bp-access main.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0 !important;
}

/* Bloco, não flex: como item de flex o cartão encolhe até o conteúdo e ignora
   a largura pedida — era isso que o deixava estreito e apertado. */
.bp-access .container-fluid {
    display: block;
    padding: 0;
}

/* -------------------------------------------------------------------- marca */

.bp-marca {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.bp-marca svg {
    width: 44px;
    height: 44px;
    flex: none;
}

.bp-marca__nome {
    font-size: 1.45rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 300;
    color: var(--bp-gelo-050);
}

.bp-marca__nome b {
    font-weight: 700;
}

/* --------------------------------------------------------------- enunciado */

.bp-eyebrow {
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bp-gelo-400);
    margin: 0 0 1.1rem;
}

.bp-titulo {
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.08;
    font-weight: 300;
    letter-spacing: -.015em;
    margin: 0 0 1.25rem;
    max-width: 15ch;
}

.bp-titulo b {
    font-weight: 700;
    display: block;
}

/* Duas linhas de slogan, não um parágrafo: corpo um pouco maior e entrelinha
   mais aberta, para o bloco ter peso ao lado de um título de 3rem. */
.bp-apoio {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--bp-gelo-400);
    max-width: 42ch;
    margin: 0;
}

.bp-apoio strong {
    color: var(--bp-gelo-200);
    font-weight: 600;
}

/* ---------------------------------------------------------------- horizonte */
/* A assinatura da página: a mesma divisão do símbolo, esticada de ponta a
   ponta. Atravessa por trás do cartão, que fica apoiado nele — é o que costura
   as duas metades da tela em uma composição só, em vez de dois blocos. */

.bp-horizonte {
    position: fixed;
    left: clamp(2rem, 4.5vw, 4.25rem);
    right: clamp(2rem, 4.5vw, 4.25rem);
    bottom: 12vh;
    z-index: 0;
}

.bp-horizonte__regua {
    position: relative;
    height: 26px;
}

.bp-horizonte__linha {
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(157, 180, 188, .55), rgba(157, 180, 188, .12));
    transform-origin: left center;
}

.bp-horizonte__eyktir {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bp-horizonte__eyktir li {
    width: 1px;
    height: 9px;
    background: rgba(157, 180, 188, .5);
}

.bp-horizonte__eyktir li:nth-child(3) {
    height: 22px;
    width: 2px;
    background: var(--bp-bronze);
    box-shadow: 0 0 12px rgba(192, 138, 62, .6);
    animation: bp-brilho 6s ease-in-out infinite;
}


/* ---------------------------------------------------------- cartão de acesso */

.bp-access .modal,
.bp-access .modal-dialog {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 440px;
    width: 100%;
}

/* Vidro fosco sobre o fiorde: o fundo atravessa o cartão, mas a camada é densa
   o bastante para o texto escuro continuar legível no sol das 8h. Translúcido
   demais viraria bonito na mesa e ilegível no pátio. */
.bp-access .modal-content {
    background: linear-gradient(160deg,
        rgba(250, 253, 253, .95) 0%,
        rgba(238, 245, 247, .90) 100%);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    color: var(--bp-fiorde-950);
    border: 1px solid rgba(244, 248, 249, .3);
    border-radius: 6px !important;
    overflow: hidden;
    box-shadow:
        0 44px 96px -40px rgba(0, 0, 0, .9),
        inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Fita de bronze no topo, como a ferragem de uma peça de madeira. */
.bp-access .modal-content::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--bp-bronze) 0%, #8C6229 38%, var(--bp-bronze-alt) 50%,
        #8C6229 62%, var(--bp-bronze) 100%);
    background-size: 320% 100%;
    animation: bp-lustro 11s ease-in-out infinite;
}

/* O eyktamark girando devagar no canto do cartão: o disco de horizonte marcando
   a passagem do dia. Uma volta a cada dois minutos, quase imperceptível de
   relance e presente para quem espera. É a identidade dentro do cartão, sem
   repetir a marca que já está na coluna ao lado. */
.bp-access .modal-content::after {
    content: '';
    position: absolute;
    right: -34px;
    top: -34px;
    width: 158px;
    height: 158px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20stroke%3D%22%230F3543%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2221.5%22%20stroke-width%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%280%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%2845%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%2890%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%28135%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%28180%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%28225%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%28270%2032%2032%29%22%2F%3E%3Cpath%20d%3D%22M32%204.5v-3%22%20transform%3D%22rotate%28315%2032%2032%29%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M32%2032%20L47.2%2016.8%20A21.5%2021.5%200%200%201%2053.5%2032%20Z%22%20fill%3D%22%23C08A3E%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%223%22%20fill%3D%22%230F3543%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    opacity: .1;
    pointer-events: none;
    animation: bp-gira 120s linear infinite;
}

.bp-access .modal-header {
    display: none;
}

.bp-access .modal-body {
    position: relative;
    z-index: 1;
    padding: 2.9rem 2.6rem 2.6rem !important;
}

/* Cabeçalho do cartão. Não repete "Entrar", que é o que o botão faz. */
.bp-access .modal-body::before {
    content: 'Acesso';
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bp-fiorde-600);
    padding-left: .9rem;
    border-left: 2px solid var(--bp-bronze);
    line-height: 1.1;
    margin-bottom: 2rem;
}

/* ------------------------------------------------------------------- campos */

.bp-access label {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bp-fiorde-800);
    font-weight: 600;
    margin-bottom: .35rem;
}

.bp-access .form-control,
.bp-access .form-select {
    border-radius: 3px !important;
    border: 1px solid var(--bp-gelo-200);
    background: #fff;
    color: var(--bp-fiorde-950);
    padding: .92rem 1.05rem;
    font-size: 1.05rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bp-access .form-control:focus,
.bp-access .form-select:focus {
    border-color: var(--bp-bronze);
    box-shadow: 0 0 0 3px rgba(192, 138, 62, .22);
    outline: none;
}

/* Login e Senha vêm com rótulo comum; Unidade e Idioma, com rótulo flutuante.
   Dois sistemas no mesmo cartão brigam — e o flutuante ainda deixa os campos
   com alturas diferentes. Aqui todos viram o mesmo rótulo, acima do campo. */
.bp-access .form-floating {
    display: flex;
    flex-direction: column-reverse;
}

.bp-access .form-floating > label {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bp-fiorde-800);
    font-weight: 600;
    margin-bottom: .35rem;
    pointer-events: auto;
}

.bp-access .form-floating > .form-control,
.bp-access .form-floating > .form-select {
    padding: .92rem 1.05rem !important;
    height: auto !important;
    min-height: var(--bp-campo-altura) !important;
    line-height: 1.5;
}

/* O rótulo flutuante carrega uma máscara branca atrás de si: o retângulo que
   fura a borda do campo quando o rótulo sobe para cima dela. Aqui o rótulo
   nunca sobe, porque já nasce acima do campo. A máscara ficava solta na faixa
   entre os dois, tapando a borda de foco e mordendo a última letra do rótulo —
   e só aparecia no clique, que é o instante em que ela mais se vê. */
.bp-access .form-floating > label::after {
    display: none !important;
}

/* Ao focar, ao preencher e no combo, o tema troca a cor do rótulo pelo cinza
   dele. São quatro seletores de estado, todos mais específicos que o nosso, e
   por isso o rótulo desbotava no clique e não voltava mais. Repetir os quatro
   aqui custa menos que mais um !important num arquivo que já tem muitos. */
.bp-access .form-floating > .form-control:focus ~ label,
.bp-access .form-floating > .form-control:not(:placeholder-shown) ~ label,
.bp-access .form-floating > .form-control:-webkit-autofill ~ label,
.bp-access .form-floating > .form-select ~ label {
    color: var(--bp-fiorde-800);
}

/* ------------------------------------------------------------------ botões */

.bp-access .btn-primary {
    background: var(--bp-fiorde-900);
    border-color: var(--bp-fiorde-900);
    color: var(--bp-gelo-050);
    border-radius: 3px !important;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 1.05rem 1rem;
    transition: background .15s ease, transform .12s ease, box-shadow .2s ease;
}

.bp-access .btn-primary:hover,
.bp-access .btn-primary:focus {
    background: var(--bp-fiorde-800);
    border-color: var(--bp-fiorde-800);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(4, 22, 29, .9);
}

.bp-access .btn-primary:active {
    transform: translateY(1px);
}

.bp-access .btn:focus-visible {
    outline: 3px solid var(--bp-bronze);
    outline-offset: 2px;
    box-shadow: none;
}

.bp-access .btn-outline-secondary {
    border: 0;
    background: none;
    color: var(--bp-fiorde-600);
    text-transform: none;
    letter-spacing: 0;
    font-size: .9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: .35rem;
}

.bp-access .btn-outline-secondary:hover {
    background: none;
    color: var(--bp-fiorde-900);
}

.bp-access hr {
    border-color: var(--bp-gelo-200);
    opacity: 1;
    margin: 1.6rem 0 1rem !important;
}

/* -------------------------------------------------------------------- rodapé */

.bp-rodape {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(157, 180, 188, .6);
}

.bp-rodape::before {
    content: '';
    width: 22px;
    height: 1px;
    background: rgba(157, 180, 188, .45);
}

/* -------------------------------------------------------------------- móvel */

@media (max-width: 991.98px) {
    .bp-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .bp-brand {
        gap: 1.15rem;
        padding-bottom: .5rem;
    }

    .bp-titulo {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
        max-width: none;
    }

    .bp-apoio {
        font-size: .95rem;
    }

    .bp-brand {
        padding-bottom: .5rem;
    }

    .bp-horizonte,
    .bp-rodape {
        display: none;
    }

    /* Apertado para o cartão inteiro caber num celular comum sem rolagem: com o
       teclado aberto a tela já rola, e rolar duas vezes para achar o botão é
       atrito na hora em que a fila do relógio de ponto está andando. */
    .bp-access {
        padding-top: .25rem;
        padding-bottom: 1.15rem;
    }

    .bp-marca svg {
        width: 38px;
        height: 38px;
    }

    .bp-access .modal-body {
        padding: 1.9rem 1.6rem 1.75rem !important;
    }

    /* Aperto medido para o cartão inteiro caber num celular comum. */
    .bp-access .modal-body::before {
        margin-bottom: 1.35rem;
    }

    .bp-access .form-control,
    .bp-access .form-select,
    .bp-access .form-floating > .form-control,
    .bp-access .form-floating > .form-select {
        padding: .8rem .95rem !important;
        font-size: 1rem;
    }

    .bp-access .mb-3 {
        margin-bottom: .8rem !important;
    }

    .bp-access .btn-primary {
        padding: .95rem 1rem;
    }
}



/* ============================================================================
   Cenário
   ============================================================================
   Um horizonte de fiordes em duas camadas e um céu que muda com o período do
   dia. Tudo em contraste baixo e atrás de todo o resto: profundidade para o
   olho, sem disputar com o cartão nem com a leitura.
   ========================================================================== */

.bp-cenario {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ------------------------------------------------------------------- o céu */
/* Cada período tem uma cor e uma altura de brilho. A luz de manhã nasce rente
   ao horizonte, a da tarde fica alta e aberta, a da noite recua para o alto. */

.bp-ceu {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 62% at 50% 108%,
            var(--bp-luz, rgba(23, 80, 98, .55)) 0%, transparent 62%),
        radial-gradient(80% 50% at 18% 12%,
            rgba(23, 80, 98, .28), transparent 70%);
    animation: bp-respira 24s ease-in-out infinite alternate;
}

body.bp-manha     { --bp-luz: rgba(192, 138, 62, .38); }
body.bp-tarde     { --bp-luz: rgba(88, 156, 176, .32); }
body.bp-noite     { --bp-luz: rgba(23, 80, 98, .55); }
body.bp-madrugada { --bp-luz: rgba(16, 54, 70, .5); }

@keyframes bp-respira {
    from { opacity: .85; }
    to   { opacity: 1; }
}

/* ---------------------------------------------------------------- a aurora */
/* Só de noite e de madrugada, que é quando ela existe. Uma faixa borrada que
   ondula devagar: presente para quem espera, invisível para quem só digita. */

.bp-aurora {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 4%;
    height: 42%;
    opacity: 0;
    background:
        radial-gradient(60% 100% at 30% 50%, rgba(96, 190, 168, .22), transparent 70%),
        radial-gradient(50% 100% at 62% 40%, rgba(88, 156, 176, .18), transparent 72%);
    filter: blur(28px);
    transition: opacity 1.2s ease;
    animation: bp-ondula 38s ease-in-out infinite alternate;
}

body.bp-noite .bp-aurora,
body.bp-madrugada .bp-aurora {
    opacity: 1;
}

@keyframes bp-ondula {
    from { transform: translate3d(-3%, 0, 0) skewY(-1.2deg) scaleY(1); }
    to   { transform: translate3d(4%, 3%, 0) skewY(1.4deg) scaleY(1.18); }
}

/* --------------------------------------------------------------- os fiordes */

.bp-fiordes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 26vh;
    min-height: 150px;
    display: block;
}

/* Três planos: cada um mais escuro e mais baixo que o anterior. É a diferença
   entre um recorte e uma paisagem com distância. */
.bp-fiordes__distante { fill: rgba(16, 58, 72, .38); }
.bp-fiordes__longe    { fill: rgba(9, 40, 51, .62); }
.bp-fiordes__perto    { fill: rgba(3, 16, 22, .9); }

/* ----------------------------------------------------------------- o gelo */
/* Byfrost. Dez partículas, nada mais: o suficiente para o fundo ter vida, longe
   do globo de neve. */

.bp-gelo span {
    position: absolute;
    bottom: -12px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(244, 248, 249, .5);
    opacity: 0;
    animation: bp-flutua linear infinite;
}

.bp-gelo span:nth-child(1) { left: 8%;  animation-duration: 34s; animation-delay: 0s;   }
.bp-gelo span:nth-child(2) { left: 18%; animation-duration: 46s; animation-delay: 4s;   width: 2px; height: 2px; }
.bp-gelo span:nth-child(3) { left: 27%; animation-duration: 39s; animation-delay: 11s;  }
.bp-gelo span:nth-child(4) { left: 36%; animation-duration: 52s; animation-delay: 2s;   width: 2px; height: 2px; }
.bp-gelo span:nth-child(5) { left: 47%; animation-duration: 41s; animation-delay: 18s;  }
.bp-gelo span:nth-child(6) { left: 58%; animation-duration: 48s; animation-delay: 7s;   width: 2px; height: 2px; }
.bp-gelo span:nth-child(7) { left: 66%; animation-duration: 36s; animation-delay: 22s;  }
.bp-gelo span:nth-child(8) { left: 75%; animation-duration: 50s; animation-delay: 14s;  width: 2px; height: 2px; }
.bp-gelo span:nth-child(9) { left: 84%; animation-duration: 43s; animation-delay: 9s;   }
.bp-gelo span:nth-child(10){ left: 92%; animation-duration: 55s; animation-delay: 26s;  width: 2px; height: 2px; }

@keyframes bp-flutua {
    0%   { transform: translateY(0) translateX(0);      opacity: 0; }
    12%  { opacity: .55; }
    88%  { opacity: .45; }
    100% { transform: translateY(-102vh) translateX(26px); opacity: 0; }
}

/* ------------------------------------------------ marca que se desenha ---- */
/* O disco se traça, os oito tiques aparecem em volta e o setor gira para o
   lugar. Uma vez, na abertura, em pouco mais de um segundo e meio. */

.bp-marca__aro {
    stroke-dasharray: 136;
    stroke-dashoffset: 136;
    animation: bp-traco 1.1s .2s cubic-bezier(.4, 0, .2, 1) forwards;
}

.bp-marca__tiques path {
    opacity: 0;
    animation: bp-aparece .3s ease forwards;
}

.bp-marca__tiques path:nth-child(1) { animation-delay: .95s; }
.bp-marca__tiques path:nth-child(2) { animation-delay: 1.01s; }
.bp-marca__tiques path:nth-child(3) { animation-delay: 1.07s; }
.bp-marca__tiques path:nth-child(4) { animation-delay: 1.13s; }
.bp-marca__tiques path:nth-child(5) { animation-delay: 1.19s; }
.bp-marca__tiques path:nth-child(6) { animation-delay: 1.25s; }
.bp-marca__tiques path:nth-child(7) { animation-delay: 1.31s; }
.bp-marca__tiques path:nth-child(8) { animation-delay: 1.37s; }

.bp-marca__setor {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 32px 32px;
    transform: rotate(-40deg);
    animation: bp-setor .8s 1.2s cubic-bezier(.2, .8, .3, 1) forwards;
}

.bp-marca__centro {
    opacity: 0;
    animation: bp-aparece .4s 1.5s ease forwards;
}

@keyframes bp-traco  { to { stroke-dashoffset: 0; } }
@keyframes bp-aparece { to { opacity: 1; } }
@keyframes bp-setor  { to { opacity: 1; transform: rotate(0); } }

/* ------------------------------------------------------ ícones no campo ---- */
/* Usuário e cadeado: reconhecimento antes da leitura, que é o que se pede de
   uma tela usada com pressa. Desenhos em linha, na mesma tinta dos rótulos. */

/* Os dois primeiros seletores existem por especificidade, não por gosto: da 8.6
   em diante o template entrega Login e Senha dentro de .form-floating, e a regra
   que dá padding a esses campos (três classes, com !important) passa por cima de
   um seletor de classe + atributo. O texto ia parar em cima do ícone. */
.bp-access .form-floating > input[widget="tentry"],
.bp-access .form-floating > input[widget="tpassword"],
.bp-access input[widget="tentry"],
.bp-access input[widget="tpassword"] {
    padding-left: 2.95rem !important;
    background-repeat: no-repeat;
    background-position: left 1rem center;
    background-size: 19px 19px;
}

.bp-access input[widget="tentry"]    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23175062%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.2%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2019.5c.7-3.5%203.6-5.4%207-5.4s6.3%201.9%207%205.4%22%2F%3E%3C%2Fsvg%3E"); }
.bp-access input[widget="tpassword"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23175062%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210.4%22%20width%3D%2214%22%20height%3D%229.4%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M8.5%2010.4V7.9a3.5%203.5%200%200%201%207%200v2.5%22%2F%3E%3C%2Fsvg%3E"); }

/* A seta do combo. Os campos pedem fundo branco por atalho, e atalho zera a
   imagem de fundo: foi assim que Idioma e Empresa perderam a seta e passaram a
   parecer campos de digitar. Redesenhada na tinta dos ícones. Vem depois do
   trecho de celular de propósito, pelo mesmo motivo dos ícones acima: lá o
   padding é reescrito inteiro, com !important. */
.bp-access .form-select,
.bp-access .form-floating > .form-select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23175062%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206l5%205%205-5%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    background-size: 15px 15px;
    padding-right: 2.9rem !important;
}

/* ------------------------------------------ preenchimento do navegador ---- */
/* O que o navegador preenche sozinho, ele também pinta: fundo azul-claro e
   imagem de fundo apagada, com um !important que vem do próprio navegador e
   que nenhuma regra nossa alcança. O fundo volta por sombra interna, que ele
   não toca. O ícone não volta: ele mora justamente na imagem de fundo. Então,
   só nesse estado, o desenho renasce como camada da linha do campo, fora do
   alcance dele. Onde :has() não existe o campo fica como está hoje, sem ícone
   no preenchimento automático, que é o pior que pode acontecer aqui. */

.bp-access input:-webkit-autofill,
.bp-access input:-webkit-autofill:hover,
.bp-access input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bp-fiorde-950);
    caret-color: var(--bp-fiorde-950);
    -webkit-box-shadow: 0 0 0 100px #fff inset;
            box-shadow: 0 0 0 100px #fff inset;
}

/* A sombra interna ocupa o lugar do anel de foco, então o anel é redesenhado
   junto — senão o campo preenchido perde o foco de vista. */
.bp-access input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #fff inset, 0 0 0 3px rgba(192, 138, 62, .22);
            box-shadow: 0 0 0 100px #fff inset, 0 0 0 3px rgba(192, 138, 62, .22);
}

.bp-access .form-floating:has(> input:-webkit-autofill)::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.95rem;
    height: var(--bp-campo-altura);
    background-repeat: no-repeat;
    background-position: left 1rem center;
    background-size: 19px 19px;
    pointer-events: none;
}

.bp-access .form-floating:has(> input[widget="tentry"]:-webkit-autofill)::before    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23175062%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.2%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2019.5c.7-3.5%203.6-5.4%207-5.4s6.3%201.9%207%205.4%22%2F%3E%3C%2Fsvg%3E"); }
.bp-access .form-floating:has(> input[widget="tpassword"]:-webkit-autofill)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23175062%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210.4%22%20width%3D%2214%22%20height%3D%229.4%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M8.5%2010.4V7.9a3.5%203.5%200%200%201%207%200v2.5%22%2F%3E%3C%2Fsvg%3E"); }

/* ------------------------------------------------- empresa sob demanda ---- */
/* Uma empresa só, nenhuma escolha a fazer: o campo não existe para essa pessoa.
   Aparece sozinho quando o usuário digitado pertence a mais de uma. */

.bp-access .form-floating.bp-oculto {
    display: none;
}

/* ------------------------------------------------------------------ entrada */
/* Uma sequência só, na abertura: o horizonte se estende e o cartão sobe.
   Mais que isso vira enfeite, e enfeite numa tela que se usa às 8h da manhã
   com uma mão só é atrito. */

/* Aurora: uma deriva lenta de luz atrás de tudo. É o único movimento contínuo
   além do disco, e some inteiro com prefers-reduced-motion. */
.bp-shell::after {
    content: '';
    position: fixed;
    inset: -15%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(520px 320px at 72% 58%, rgba(192, 138, 62, .07), transparent 62%);
    animation: bp-aurora 46s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes bp-aurora {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.09); }
}

@keyframes bp-gira {
    to { transform: rotate(360deg); }
}

@keyframes bp-lustro {
    0%       { background-position: 100% 0; }
    55%, 100% { background-position: 0 0; }
}

@keyframes bp-brilho {
    0%, 100% { opacity: .7; }
    50%      { opacity: 1; }
}

@keyframes bp-sobe {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bp-estende {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.bp-marca      { animation: bp-sobe .5s .05s ease both; }
.bp-enunciado  { animation: bp-sobe .5s .16s ease both; }
.bp-horizonte  { animation: bp-sobe .5s .3s ease both; }
.bp-rodape     { animation: bp-sobe .5s .4s ease both; }
.bp-access     { animation: bp-sobe .55s .22s ease both; }
.bp-horizonte__linha { animation: bp-estende .8s .35s cubic-bezier(.2, .7, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .bp-marca, .bp-enunciado, .bp-horizonte, .bp-rodape, .bp-access,
    .bp-horizonte__linha, .bp-shell::after,
    .bp-access .modal-content::before,
    .bp-access .modal-content::after,
    .bp-horizonte__eyktir li:nth-child(3),
    .bp-marca__aro, .bp-marca__tiques path,
    .bp-marca__setor, .bp-marca__centro,
    .bp-ceu, .bp-aurora, .bp-gelo span {
        animation: none;
    }

    /* O gelo só existe em movimento: parado vira sujeira na tela. */
    .bp-gelo {
        display: none;
    }

    /* Sem animação, a marca precisa nascer inteira em vez de invisível. */
    .bp-marca__aro { stroke-dashoffset: 0; }

    .bp-marca__tiques path,
    .bp-marca__setor,
    .bp-marca__centro {
        opacity: 1;
        transform: none;
    }
}