/* ============================================================
   UniFin — tela de login
   Escala proporcional ao viewport (tudo em rem), mesma tecnica do
   Portal Interno (TechVision.InternalPortal.Web/wwwroot/css/login.css).
   Arquivo carregado SÓ na pagina de login (Login.razor, via
   <HeadContent>) — nao deve ser referenciado em App.razor, senao o
   font-size fluido do <html> abaixo mudaria a escala do app inteiro.
   ============================================================ */

/* `rem` sempre resolve contra <html>, nunca contra o ancestral mais proximo — por isso o
   font-size responsivo precisa ficar em `html`, nao em `.unifin-login-page`. Formula identica ao
   Portal Interno (aprovada): mais peso na ALTURA (gargalo em monitores baixos) que na largura, com
   piso e teto para nunca ficar ilegivel nem gigante. */
html {
    font-size: clamp(12.5px, calc(7.5px + 0.55vh + 0.25vw), 16.5px);
}

.unifin-login-page {
    position: relative;
    /* z-index proprio (nao so position:relative) obriga o navegador a abrir um novo contexto de
       empilhamento aqui. Sem isso, o z-index:-1 do ::after do anel (abaixo) "escapava" para tras
       do <main> (.unifin-public-shell, fundo opaco claro) em vez de ficar so atras dos irmaos
       .login-brand/.login-panel — o anel ficava tecnicamente presente mas invisivel. */
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(27rem, 34.5rem);
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    font-size: 1rem;
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--unifin-primary) 32%, transparent), transparent 30%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, #01fa54 22%, transparent), transparent 32%),
        linear-gradient(145deg, #062b12 0%, #085923 55%, var(--unifin-primary) 130%);
    color: #ffffff;
}

.unifin-login-brand { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2.25rem; overflow: hidden; padding: clamp(1.125rem, 2.8vw, 2.75rem) clamp(3rem, 9vw, 7.5rem); background: transparent; color: #ffffff; }
.unifin-login-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(135deg, #000 0%, transparent 76%); }

/* Anel decorativo — arte fornecida pelo dono do produto (nao desenhavel fielmente em CSS puro:
   tracos irregulares tipo circuito, muitos nos em angulos variados). WebP com alpha real,
   652x634, ~97KB — peso adequado ao tamanho de exibicao, sem upscaling forte. Fica em
   .unifin-login-page (nao em .unifin-login-brand) de proposito: o overflow:hidden do brand
   cortava o desenho de forma abrupta bem na borda da coluna do formulario. Preso na pagina
   inteira, ele "entra" por baixo do painel de vidro do formulario (que fica na frente, z-index
   1, com backdrop-filter:blur) em vez de ser cortado de repente — o painel deixa passar so um
   brilho difuso do anel atras dele, coerente com o glow que ja existe no box-shadow do painel. */
.unifin-login-page::after { content: ""; position: absolute; z-index: -1; right: 16rem; bottom: -14rem; width: 40rem; height: 40rem; background-image: url('/img/brand/unifin-login-ring.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: .08; }

.unifin-login-mark { position: relative; z-index: 1; width: 7rem; height: 7rem; display: grid; place-items: center; }
.unifin-login-mark .unifin-brand-mark { width: 100%; height: 100%; object-fit: contain; }

.unifin-login-copy { position: relative; z-index: 1; max-width: 38rem; }
.unifin-login-copy > p:first-child { margin: 0 0 1.125rem; color: #8fffb4; font-size: .8125rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; }
.unifin-login-copy h1 { position: relative; margin: 0 0 1.25rem; padding-bottom: .875rem; font-size: 3.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.unifin-login-copy h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #55ff8e 0%, #55ff8e 55%, transparent 100%); }
.unifin-login-copy p:last-child { max-width: 32rem; margin: 0; color: rgba(236,255,242,.76); font-size: 1.125rem; line-height: 1.55; }

.unifin-login-panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-self: center; justify-content: center; max-height: calc(100dvh - 1.25rem); margin: clamp(.625rem, 2.2vw, 2rem) clamp(1.5rem, 4vw, 3rem); padding: clamp(1.375rem, 2.8vw, 2rem); gap: .5rem; overflow: hidden; border: 1px solid rgba(119,255,164,.28); border-radius: 1.25rem; background: rgba(5,51,20,.76); box-shadow: 0 1.875rem 5.625rem rgba(2,12,28,.48), 0 0 4rem rgba(34,255,108,.12), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(1.375rem); -webkit-backdrop-filter: blur(1.375rem); }
.unifin-login-panel header span { color: #80ffaa; font-size: .8125rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.unifin-login-panel h2 { margin: .25rem 0 .375rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; color: #ffffff; }
.unifin-login-panel header p, .unifin-login-support { font-size: .9375rem; color: rgba(236,255,242,.62); }
.unifin-login-panel .unifin-form-error { margin: 0 0 .25rem; border: 1px solid rgba(225,72,72,.4); border-radius: .625rem; background: rgba(225,72,72,.14); padding: .5rem .75rem; color: #ffb4b4; font-size: .8125rem; }

.unifin-login-form { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; font-size: 1rem; }
.unifin-login-form label { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.8); }
.unifin-login-form input { min-height: 2.75rem; font-size: .9375rem; border: 1px solid rgba(255,255,255,.17); border-radius: .625rem; background-color: rgba(255,255,255,.07); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.unifin-login-form input::placeholder { color: rgba(255,255,255,.4); }
.unifin-login-form input:focus { border-color: #75ffa3; box-shadow: 0 0 0 .1875rem rgba(77,255,136,.2); }

.unifin-login-field { position: relative; }
.unifin-login-field > .unifin-icon { position: absolute; left: .875rem; top: 50%; width: 1.0625rem; height: 1.0625rem; color: rgba(255,255,255,.4); pointer-events: none; transform: translateY(-50%); }
.unifin-login-field input { width: 100%; padding-left: 2.625rem; }

.unifin-password-field { position: relative; display: flex; }
.unifin-password-field > .unifin-icon:first-child { position: absolute; left: .875rem; top: 50%; width: 1.0625rem; height: 1.0625rem; color: rgba(255,255,255,.4); pointer-events: none; transform: translateY(-50%); z-index: 1; }
.unifin-password-field input { flex: 1 1 auto; padding-left: 2.625rem; padding-right: 2.75rem; }
.unifin-password-field button { position: absolute; right: .25rem; top: 50%; min-width: auto; padding: .5rem; border: 0; border-radius: .625rem; background: transparent; color: rgba(255,255,255,.56); cursor: pointer; transform: translateY(-50%); }
.unifin-password-field button:hover { background: rgba(117,255,163,.1); color: #80ffaa; }
.unifin-password-field button .unifin-icon { width: 1.25rem; height: 1.25rem; }

.unifin-login-form .unifin-checkbox { margin: .125rem 0; font-size: .875rem; color: rgba(255,255,255,.68); }
.unifin-login-form .unifin-checkbox input { accent-color: #2fea6d; }
.unifin-login-form .loading-label { display: none; }
.unifin-login-form.is-submitting .ready-label { display: none; }
.unifin-login-form.is-submitting .loading-label { display: inline; }
.unifin-login-form.is-submitting button[type=submit] { opacity: .58; pointer-events: none; }
.unifin-login-form > button[type=submit] { margin-top: .375rem; min-height: 2.875rem; font-size: 1rem; border: 0; border-radius: .625rem; background: linear-gradient(135deg, #1fd05a, #15b54a); box-shadow: 0 .75rem 1.625rem rgba(21,181,74,.24); }
.unifin-login-form > button[type=submit]:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 .9375rem 1.875rem rgba(21,181,74,.3); transform: translateY(-1px); }

.unifin-login-support { margin: .75rem 0 0; line-height: 1.5; }

@media (max-width: 1023px) {
    .unifin-login-page { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; min-height: 100dvh; overflow: hidden; }
    .unifin-login-brand { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem clamp(1.5rem, 6vw, 3.25rem) .5rem; text-align: left; }
    .unifin-login-mark { flex: 0 0 auto; width: 3.75rem; height: 3.75rem; margin: 0; }
    .unifin-login-copy { text-align: left; }
    .unifin-login-copy > p:first-child { display: none; }
    .unifin-login-copy h1 { font-size: 1.9rem; }
    .unifin-login-copy p:last-child { display: none; }
    .unifin-login-panel { width: auto; max-width: none; margin: .5rem 1rem 1rem; padding: 1rem; }
    .unifin-login-panel h2 { font-size: 1.5rem; }
}

@media (max-width: 380px) {
    .unifin-login-copy h1 { font-size: 1.4rem; }
    .unifin-login-panel header p { display: none; }
}