/* PORTA DE ENTRADA — /login e /acesso (2026-09-17, direção do Sebastián).
   O mar não se desenha: se FILMA. Vídeo a sangue em loop, véu escuro por cima para o texto passar
   AA, e o acesso num cartão de vidro. Zero dependências externas: o vídeo, o poster e a folha são
   do próprio domínio (a CSP da porta é 'self' em default-src, que cobre media-src).
   Escopado em .lg-* e .brz-porta: nenhuma regra sai desta tela. */

/* ── O fundo ───────────────────────────────────────────────────────────────────────────────
   O poster também é fundo do palco: enquanto o vídeo não chega — ou quando nem se pede (reduced
   motion / economia de dados) — a cena já está lá, nunca um retângulo preto. */
.lg-cena {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #04121f center/cover no-repeat;
}
.lg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* VÉU (contraste): sem ele o vídeo devolve branco sobre branco em cada onda que estoura. Mais
   fundo em cima e embaixo, e um escuro extra no centro — é onde mora o cartão. */
.lg-veu {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 50%, rgba(2, 10, 18, .55) 0%, rgba(2, 10, 18, .28) 55%, rgba(2, 10, 18, .18) 100%),
        linear-gradient(180deg, rgba(2, 10, 18, .52) 0%, rgba(2, 10, 18, .22) 38%, rgba(2, 10, 18, .58) 100%);
}
html[data-theme="dark"] .lg-veu {
    background:
        radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0, 4, 10, .70) 0%, rgba(0, 4, 10, .44) 55%, rgba(0, 4, 10, .34) 100%),
        linear-gradient(180deg, rgba(0, 4, 10, .62) 0%, rgba(0, 4, 10, .38) 38%, rgba(0, 4, 10, .68) 100%);
}

/* ── Palco ─────────────────────────────────────────────────────────────────────────────────
   100dvh (não 100vh): no celular a barra do navegador comia o botão Entrar quando o teclado
   subia. dvh mede o que EXISTE agora. */
.lg-wrap {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.lg-painel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

/* ── A marca ───────────────────────────────────────────────────────────────────────────────
   Pequena e elegante: no computador ancorada no canto de cima; no celular, centrada sobre o
   cartão (o canto é onde o polegar segura o aparelho). */
.lg-marca {
    position: relative;   /* berço do selinho de ambiente, que sai do fluxo */
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .2px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.lg-marca .lg-dot { color: #5eead4; }   /* o mesmo ponto turquesa do header da app */

/* ── O cartão de vidro ─────────────────────────────────────────────────────────────────────
   Os tokens do tema são REDEFINIDOS aqui dentro: assim cada `var(--muted)`/`var(--border)` que já
   vive no HTML da porta (divisórias, links, o "OU", os campos) passa a falar branco sobre vidro,
   sem tocar uma linha da vista nem vazar para o resto da casa. */
.lg-card {
    width: 100%;
    max-width: 440px;
    --text: #fff;
    --muted: rgba(255, 255, 255, .78);
    --border: rgba(255, 255, 255, .26);
    --panel: transparent;
    --panel-2: rgba(255, 255, 255, .12);
    color: #fff;
    color-scheme: dark;               /* checkbox e autofill nativos legíveis sobre o vidro */
    background: rgba(10, 20, 30, .38);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    padding: 30px 28px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
/* Tema claro = o MESMO vidro, um pouco mais claro. Sobre vídeo não existe "fundo branco": o que
   muda é quanta luz o cartão deixa passar. */
html[data-theme="light"] .lg-card {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .34);
}
/* Sem backdrop-filter (Firefox antigo, WebView velha): o vidro vira vidro FOSCO, opaco de verdade
   — nunca texto branco flutuando sobre o vídeo cru. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .lg-card { background: rgba(8, 18, 28, .86); }
    html[data-theme="light"] .lg-card { background: rgba(16, 32, 46, .80); }
}
.lg-card h1 {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 4px;
    color: #fff;
}
.lg-card .sub { color: var(--muted); margin-bottom: 20px; }
.lg-rotulo {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 12px;
}

/* ALVO DE DEDO na PORTA (2026-08-29): é a primeira tela que um dedo molhado toca no cais, e errar
   aqui é simplesmente não entrar. 48px (subiu dos 44 em 17/09) e 16px de letra — abaixo de 16 o
   iOS dá zoom no campo ao focá-lo e a tela inteira salta. */
.brz-porta input[type="text"],
.brz-porta input[type="password"],
.brz-porta input[type="email"] {
    min-height: 48px;
    box-sizing: border-box;
    font-size: 16px;
    border-radius: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}
.brz-porta input::placeholder { color: rgba(255, 255, 255, .55); }
.brz-porta input[type="text"]:focus,
.brz-porta input[type="password"]:focus {
    outline: 2px solid #5eead4;
    outline-offset: 1px;
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .18);
}
.brz-porta label { font-size: 13px; font-weight: 600; color: var(--muted); }
.brz-porta summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); }
.brz-porta .btn { min-height: 48px; border-radius: 12px; font-size: 15px; }
.brz-porta .btn[type="submit"], .brz-porta .btn:not(.ghost) { font-weight: 700; letter-spacing: .2px; }
.brz-porta .btn:not(.ghost):hover { filter: brightness(1.10); }
/* Os secundários (passkey, código) são vidro com contorno: presentes, nunca competindo com Entrar. */
.brz-porta .btn.ghost {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .30);
    color: #fff;
}
.brz-porta .btn.ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.brz-porta button#pw-eye { min-height: 44px; background: none; border: 0; color: rgba(255, 255, 255, .75); }
.brz-porta a { color: rgba(255, 255, 255, .85); }
.brz-porta a:hover { color: #fff; text-decoration: underline; }
.brz-porta .flash.err { background: rgba(248, 113, 113, .22); border: 1px solid rgba(248, 113, 113, .5); color: #ffe0e0; }
.brz-porta .flash.ok { background: rgba(52, 211, 153, .20); border: 1px solid rgba(52, 211, 153, .45); color: #d7fbec; }
.brz-porta .btn:focus-visible,
.brz-porta a:focus-visible,
.brz-porta input:focus-visible,
.brz-porta summary:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }

/* MODO DEV plegável (17/09): o atalho local é ferramenta de quem desenvolve, não parte da porta.
   Fechado por padrão para não roubar a cena; um toque e está lá. Só existe em local. */
.lg-dev { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 10px; }
.lg-dev > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
    list-style: none;
    min-height: 34px;
    display: flex;
    align-items: center;
}
.lg-dev > summary::-webkit-details-marker { display: none; }
.lg-dev > summary strong { color: #fbbf24; }
.lg-dev-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ── Tema: o botão também é vidro, no canto de cima ────────────────────────────────────── */
.lg-tema {
    position: fixed;
    z-index: 5;
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(10, 20, 30, .38);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    padding: 3px 10px 3px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.lg-tema .btn.ghost { background: transparent; border: 0; color: #fff; }
.lg-tema .btn.ghost:hover { background: rgba(255, 255, 255, .16); }

/* ── Computador: a marca fica CENTRADA sobre o cartão, como no celular (17/09) ────────────
   Saiu do canto: a entrada é um splash que SOBE (logo no centro → logo em cima → cartão embaixo)
   e um destino no canto obrigava o logo a cruzar a tela em diagonal. Em cima do cartão, o
   movimento é uma linha reta e a porta lê como uma peça só. */
@media (min-width: 768px) {
    .lg-marca { font-size: 28px; }
    .lg-marca .lg-iso { height: 42px; }
    .lg-painel { padding: 40px 32px; gap: 22px; }
}

/* ── Celular: cartão a largura toda com 16px de margem ─────────────────────────────────── */
@media (max-width: 767px) {
    .lg-tema { padding: 2px; background: rgba(10, 20, 30, .42); }
    .lg-tema .lg-tema-txt { display: none; }
    .lg-card { padding: 24px 18px 20px; border-radius: 18px; }
    .lg-card h1 { font-size: 22px; }
    .brz-porta label { margin: 10px 0 4px; }
}
/* Celular baixo (375×667, o iPhone SE que ainda anda pelo cais): tudo cabe sem rolar. */
@media (max-width: 767px) and (max-height: 700px) {
    .lg-painel { gap: 10px; padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .lg-marca { font-size: 19px; }
    .lg-card { padding: 18px 16px 16px; }
    .lg-card h1 { font-size: 20px; margin-bottom: 2px; }
    .lg-card .sub { margin-bottom: 12px; font-size: 12px; }
}

/* A marca se revela como peça inteira (GSAP). Sem JS, lê-se exatamente igual. */
.lg-marca { margin: 0; }
/* O ponto turquesa como no cabeçalho da app: «Borazul ●» — colado ao nome e DISCRETO. Meio em de
   corpo e .18em de respiro; nada de `gap`, que aqui vale para separar isotipo | nome e ao ampliar
   na intro deixava o ponto boiando longe do «l». */
.lg-nome { display: inline-flex; align-items: center; flex: none; }
.lg-dot { display: inline-block; font-size: .5em; line-height: 1; margin-left: .18em; }

/* ── O isotipo ─────────────────────────────────────────────────────────────────────────────
   O mesmo de borazul.com. Abre a cena sozinho e aterrissa ao lado do wordmark com 34px de alto.
   O halo é sobrevivência: sobre uma onda clara do vídeo o PNG some, e o contorno branco de 20%
   o segura em qualquer frame. width/height no HTML reservam o espaço; aqui manda o CSS. */
.lg-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lg-iso {
    width: auto;
    height: 34px;
    display: block;
    flex: none;
}
@media (max-width: 767px) and (max-height: 700px) {
    .lg-iso { height: 30px; }
}

/* O berço do isotipo. SEM overflow:hidden (o recorte agora é a própria silhueta, ver .lg-brilho):
   o halo mora AQUI, não na <img>, porque dentro de um overflow:hidden a sombra saía cortada em
   retângulo e desenhava uma caixa escura em volta do logo. No wrapper ele segue o contorno do PNG. */
.lg-iso-wrap { position: relative; display: block; flex: none; line-height: 0;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .20)) drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
/* O BARRIDO DE LUZ da entrada, em duas camadas, e é de propósito:
   — a de fora (.lg-brilho) não se move e leva a MÁSCARA com o próprio isotipo: a luz só pode
     existir onde o PNG tem pixel. Era isto que faltava — o brilho aparecia como um retângulo
     cinza ao lado do logo, porque um overflow:hidden recorta a CAIXA, não a silhueta;
   — a de dentro (.lg-brilho-i) é a que viaja. Se a máscara viajasse junto, a luz voltaria a ser
     um retângulo em movimento.
   URL relativa à própria folha: funciona com qualquer BASE_URL e é do mesmo domínio (CSP 'self'). */
.lg-brilho {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;                       /* nasce invisível: fora da intro esta camada não existe */
    pointer-events: none;
    -webkit-mask-image: url("brand/borazul-isotipo.png");
            mask-image: url("brand/borazul-isotipo.png");
    -webkit-mask-size: contain;  mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.lg-brilho-i {
    position: absolute;
    top: -40%; bottom: -40%; left: 0; width: 72%;
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.55) 50%,
        rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%);
}
/* O wordmark é uma peça só: o clip-path fechado é o começo da revelação, e este é o estado FINAL
   (aberto) — sem JS, lê-se inteiro. */
.lg-letras { display: inline-block; clip-path: inset(0 0 0 0); }

/* O selinho de ambiente ("local", "staging"): fica FORA da animação de entrada e discreto — quem
   desenvolve precisa saber onde está, mas a marca que a pessoa vê é só "Borazul".
   FORA DO FLUXO (17/09): estando dentro do lockup ele somava largura mesmo invisível, e o "centro
   do logo" que a intro calcula caía uns 30% à esquerda. Agora pendura-se ao lado direito e não
   entra em nenhuma medida — nem no getBoundingClientRect da marca, nem no centrado do CSS. */
.lg-amb {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: lowercase;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 4px;
    text-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ── O telão do splash (só existe durante a entrada; quem o cria e o remove é o login.js) ─────
   Fundo LISO, como o splash de um app: branco no tema claro (o isotipo foi desenhado para branco)
   e azul-noite no escuro. O color daqui é a cor que o wordmark veste enquanto o telão está
   de pé — o JS a lê com getComputedStyle, para não duplicar a paleta em dois arquivos. */
.lg-telon { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: #fff; color: #0b2545; }
html[data-theme="dark"] .lg-telon { background: #060d16; color: #3db4ff; }

/* O NOME EM AZUL DA MARCA (Sebastián 17/09): branco não casava com o isotipo. É o azul-céu do
   próprio logo (a metade «AZUL» do wordmark oficial), que sobre o mar escuro lê bem; o azul-noite
   da outra metade sumiria no vídeo. A sombra escura segue: é ela que o segura sobre uma nuvem. */
.lg-marca { color: #3db4ff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }