/* ============================================================================
   DAVARK — login.css
   Tela de acesso no mesmo estilo do portal interno (split-screen de marca).
   Depende do publico.min.css (bootstrap + shared.css), que traz tokens e base.
   ============================================================================ */

body { background: hsl(var(--canvas)); min-height: 100vh; }

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth-aside { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Painel de marca (esquerda)
   --------------------------------------------------------------------------- */
.auth-aside {
    position: relative;
    overflow: hidden;
    background: var(--grad-shell);
    color: hsl(276 40% 92%);
    display: flex;
    flex-direction: column;
    padding: clamp(1.8rem, 4vw, 3rem);
}
.auth-aside::before {
    content: "";
    position: absolute;
    top: -160px; right: -120px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, hsl(var(--accent) / .5) 0%, transparent 66%);
    pointer-events: none;
}
/* traço-assinatura na base do painel */
.auth-aside::after {
    content: "";
    position: absolute;
    left: clamp(1.8rem, 4vw, 3rem); bottom: 5.2rem;
    width: 64px; height: 5px; border-radius: 5px;
    background: var(--grad-stroke);
}

.auth-brand {
    display: flex; align-items: center; gap: .75rem;
    position: relative; z-index: 1;
    text-decoration: none;
}
.auth-brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 10px 24px -8px hsl(var(--accent) / .8); }
.auth-brand-name {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.4rem; color: #fff; line-height: 1;
    letter-spacing: .01em;
}
.auth-brand-tag {
    display: block;
    font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
    color: hsl(276 60% 82% / .75); margin-top: .28rem;
}

.auth-aside-body { margin-top: auto; margin-bottom: auto; position: relative; z-index: 1; max-width: 30ch; }
.auth-eyebrow { color: hsl(276 60% 86% / .85); }
.auth-eyebrow::before { background: hsl(var(--accent)); }

.auth-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 1rem 0 0;
}
.auth-headline-mark {
    background: var(--grad-stroke);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-lede { color: hsl(276 40% 88% / .82); margin: 1.1rem 0 0; font-size: 1.02rem; line-height: 1.55; }

.auth-points { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.auth-points li { display: flex; align-items: center; gap: .7rem; color: hsl(276 35% 90% / .9); font-weight: 500; }
.auth-points .material-symbols-outlined {
    flex: none;
    width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center;
    background: hsl(0 0% 100% / .1);
    color: hsl(var(--accent));
    font-size: 1.15rem;
}

.auth-foot { position: relative; z-index: 1; margin: 0; font-size: .76rem; color: hsl(276 40% 84% / .55); }

/* ---------------------------------------------------------------------------
   Formulário (direita)
   --------------------------------------------------------------------------- */
.auth-main {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}
.auth-card { width: 100%; max-width: 400px; }

.auth-brand--mobile { display: none; margin-bottom: 1.5rem; }
.auth-brand--mobile .auth-brand-name { color: hsl(var(--brand)); }
@media (max-width: 900px) { .auth-brand--mobile { display: inline-flex; } }

.auth-title {
    font-family: var(--font-display);
    font-weight: 800; font-size: clamp(2rem, 5vw, 2.5rem);
    letter-spacing: -0.03em; line-height: 1.05;
    margin: .5rem 0 0;
}
.auth-sub { color: hsl(var(--muted)); margin: .4rem 0 1.6rem; }

.auth-card .input-group-text { background: hsl(var(--surface)); border-right: 0; color: hsl(var(--muted)); }
.auth-card .input-group .form-control { border-left: 0; padding-left: .35rem; }
.auth-card .input-group:focus-within .input-group-text,
.auth-card .input-group:focus-within .form-control { border-color: hsl(var(--brand)); }
.auth-card .input-group:focus-within .form-control { box-shadow: none; }

.auth-switch { text-align: center; margin: 1.4rem 0 0; color: hsl(var(--muted)); font-size: .92rem; }
.auth-switch a { font-weight: 700; }