/* =====================================================================
   Telas de autenticação — login, criação/recuperação de senha, bloqueio
   v3 (2026-06-17): usa os DESIGN TOKENS (var(--gradient-hero) / --color-*
   / --shadow-* / --radius-*) — respeita o white-label por conta e a
   identidade Evelyn. Layout blindado: painéis preenchem 100% da altura
   (align-items: stretch + minmax(0,1fr)) — sem o vão branco embaixo.
   Mantém TODAS as classes usadas por login/senha/bloqueio.
   ===================================================================== */

.auth {
    height: 100vh;                             /* trava na altura da tela — sem barra de rolagem no 100% */
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;   /* faixa dos painéis ocupa toda a altura; rodapé embaixo */
    align-items: stretch;                      /* << garante que o painel rosa estique até o rodapé */
    overflow: hidden;                          /* a página não rola; quem rola (se precisar) é o painel do form */
    background: var(--color-bg);
}

/* ---------- Painel lateral (hero) ---------- */
.auth__aside {
    grid-row: 1; grid-column: 1;
    position: relative; isolation: isolate; overflow: hidden; color: var(--color-on-primary);
    display: flex; flex-direction: column; justify-content: safe center; gap: clamp(24px, 3.5vh, 36px);
    padding: clamp(32px, 4.5vw, 56px);
    background:
        radial-gradient(130% 130% at 6% -8%, rgba(255,255,255,.22) 0%, transparent 44%),
        radial-gradient(120% 120% at 108% 112%, rgba(80,6,45,.42) 0%, transparent 55%),
        var(--gradient-hero);
}
/* textura pontilhada bem sutil sobre o gradiente */
.auth__aside::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, transparent 75%);
            mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, transparent 75%);
}
/* brilho suave flutuante */
.auth__aside::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    width: 520px; height: 520px; top: -160px; right: -160px;
    background: radial-gradient(circle at center, rgba(255,255,255,.22), transparent 64%);
    animation: authFloat 16s ease-in-out infinite;
}

.auth__brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.auth__brand img { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-card); padding: 7px;
    object-fit: contain; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.auth__brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.32rem; line-height: 1.15; letter-spacing: -.01em; color: var(--color-on-primary); }

.auth__hero { position: relative; z-index: 2; }
.auth__hero h1 { color: var(--color-on-primary); font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.07; letter-spacing: -.03em;
    max-width: 12ch; font-weight: 800; text-shadow: 0 2px 30px rgba(80,6,45,.25); }
.auth__hero p { opacity: .92; margin-top: var(--space-5); max-width: 44ch; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.6; }

.auth__features { list-style: none; margin-top: clamp(20px, 3vh, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
    position: relative; z-index: 2; padding: 0; }
.auth__features li { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 1.02rem; line-height: 1.3;
    background: rgba(255,255,255,.12); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.20); border-radius: var(--radius-md); padding: 13px 16px;
    box-shadow: 0 6px 20px rgba(80,6,45,.12);
    transition: transform var(--t-base), background var(--t-base), border-color var(--t-base); }
.auth__features li:hover { transform: translateX(5px); background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.34); }
.auth__features i { width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center; font-size: 1.32rem;
    color: var(--color-on-primary); background: linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.12));
    border: 1px solid rgba(255,255,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* entrada animada (escalonada) */
.auth__brand, .auth__hero h1, .auth__hero p, .auth__features li { animation: authUp .6s cubic-bezier(.2,.7,.3,1) both; }
.auth__hero h1 { animation-delay: .05s; } .auth__hero p { animation-delay: .12s; }
.auth__features li:nth-child(1){animation-delay:.18s} .auth__features li:nth-child(2){animation-delay:.24s}
.auth__features li:nth-child(3){animation-delay:.30s} .auth__features li:nth-child(4){animation-delay:.36s}

/* ---------- Painel do formulário ---------- */
.auth__main { grid-row: 1; grid-column: 2; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px);
    position: relative; overflow-y: auto;
    background:
        radial-gradient(90% 70% at 100% 0%, var(--color-primary-soft) 0%, transparent 58%),
        radial-gradient(80% 60% at 0% 100%, var(--color-bg-alt) 0%, transparent 60%),
        var(--color-bg); }
.auth__card { width: 100%; max-width: 432px; position: relative; background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: clamp(30px, 4vw, 46px); box-shadow: var(--shadow-float);
    animation: authUp .6s cubic-bezier(.2,.7,.3,1) both; overflow: hidden; }
/* acento em gradiente no topo do card */
.auth__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); }
.auth__card-head { margin-bottom: var(--space-6); }
.auth__card-head h2 { font-size: 1.85rem; letter-spacing: -.02em; font-weight: 800; }
.auth__card-head p { color: var(--color-muted); margin-top: 6px; }
.auth__mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: var(--space-6); }
.auth__mobile-brand img { width: 48px; height: 48px; border-radius: var(--radius-md); }
.auth__mobile-brand span { font-family: var(--font-heading); font-weight: 800; }

.auth__form .field { margin-bottom: var(--space-4); }
.auth__form .label { font-weight: 600; }
.auth__form .input { height: 52px; border-radius: var(--radius-md); font-size: 1rem; background: var(--color-card);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.auth__form .input:hover { border-color: var(--color-border-strong); }
.auth__form .input:focus { border-color: var(--color-primary); box-shadow: var(--ring); }
.auth__row-between { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; gap: 12px; flex-wrap: wrap; }

/* g-recaptcha: centraliza e dá respiro */
.auth__form .g-recaptcha { margin: 2px 0 16px; display: flex; justify-content: center; }

/* botão Entrar */
.auth__form .btn--primary { height: 54px; font-size: 1.04rem; border-radius: var(--radius-md); font-weight: 700;
    background: var(--gradient-primary); box-shadow: var(--shadow-primary);
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); }
.auth__form .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(224,33,138,.42); filter: saturate(1.06) brightness(1.02); }
.auth__form .btn--primary:active { transform: translateY(0); }
.auth__form .btn--primary i { transition: transform var(--t-fast); }
.auth__form .btn--primary:hover i { transform: translateX(4px); }

.auth__foot { margin-top: var(--space-6); text-align: center; color: var(--color-muted); font-size: .82rem; line-height: 1.5; }
.auth__foot a { font-weight: 600; }

/* campo de senha */
.password-field { position: relative; }
.password-field .input { padding-right: 46px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
    border: 0; background: none; color: var(--color-muted); display: grid; place-items: center; border-radius: var(--radius-sm);
    transition: background var(--t-fast), color var(--t-fast); }
.password-toggle:hover { background: var(--color-bg-alt); color: var(--color-text); }

.pw-meter { height: 6px; border-radius: var(--radius-pill); background: var(--color-bg-alt); overflow: hidden; margin-top: 8px; }
.pw-meter__bar { height: 100%; width: 0; transition: width var(--t-base), background var(--t-base); border-radius: var(--radius-pill); }

/* ---------- Rodapé assinatura (full-width, linha 2 do grid) ---------- */
.auth-foot { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; margin-top: -1px; /* cobre qualquer fresta de 1px entre painel e rodapé */
    display: flex; align-items: center; justify-content: center;
    padding: 14px var(--space-5); background: var(--color-secondary); }

/* tela de conta bloqueada */
.blocked { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); background:
    radial-gradient(90% 60% at 50% 0%, var(--color-primary-soft) 0%, transparent 60%), var(--color-bg); }
.blocked__card { max-width: 460px; width: 100%; text-align: center; padding: var(--space-8); }
.blocked__icon { width: 84px; height: 84px; border-radius: var(--radius-xl); background: var(--color-warning-soft); color: var(--color-warning);
    display: grid; place-items: center; font-size: 2.4rem; margin: 0 auto var(--space-5); }

/* animações */
@keyframes authUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes authFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px, 20px); } }

@media (prefers-reduced-motion: reduce) {
    .auth__aside::after, .auth__brand, .auth__hero h1, .auth__hero p, .auth__features li, .auth__card { animation: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
    .auth__aside { display: none; }
    .auth__main { grid-column: 1; overflow: visible; }
    .auth__mobile-brand { display: flex; }
    .auth__card { box-shadow: var(--shadow-card); }
}