/* SWC — Telas publicas de autenticacao
   Consome tokens globais (swc-tokens.css) e componentes globais (swc-components.css)
   ja carregados antes deste arquivo. Sem gradientes saturados, sem glassmorphism,
   sem #fff/#000 hardcoded. Identidade violeta sutil. */

.auth-body {
    min-height: 100vh;
    background: var(--swc-bg-app);
    color: var(--swc-ink-1);
    font-family: var(--swc-font-sans);
    /* Glow violeta muito sutil no canto. Nao eh glassmorphism: e radial gradient. */
    background-image:
        radial-gradient(900px circle at 12% -10%, var(--swc-violet-tint) 0%, transparent 55%),
        radial-gradient(700px circle at 95% 110%, var(--swc-blue-tint) 0%, transparent 60%);
    background-attachment: fixed;
}

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-shell {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Brand mark acima do card */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--swc-violet-700);
    font-weight: var(--swc-fw-semibold);
    letter-spacing: 0.02em;
    font-size: var(--swc-fs-sm);
    text-decoration: none;
}

.auth-brand i {
    font-size: 1.1rem;
    color: var(--swc-violet);
}

.auth-brand:hover { color: var(--swc-violet-700); text-decoration: underline; }

/* Card principal */
.auth-card {
    position: relative;
    background: var(--swc-surface);
    border: 1px solid var(--swc-line);
    border-radius: var(--swc-radius-lg);
    box-shadow: var(--swc-shadow-3);
    padding: 2.25rem 2rem 2rem;
    overflow: hidden;
}

/* Faixa superior identitaria. Nao eh decoracao gratuita: marca a entrada do produto. */
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--swc-violet) 0%,
        var(--swc-blue) 60%,
        var(--swc-orange) 100%);
    border-radius: var(--swc-radius-lg) var(--swc-radius-lg) 0 0;
}

@media (max-width: 540px) {
    .auth-card { padding: 1.75rem 1.4rem 1.6rem; border-radius: var(--swc-radius); }
}

/* Cabecalho da tela (eyebrow + titulo + lede) */
.auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.auth-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--swc-violet-tint);
    color: var(--swc-violet-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 0.5rem;
}

.auth-icon[data-tom="blue"]   { background: var(--swc-blue-tint);   color: var(--swc-blue-700); }
.auth-icon[data-tom="orange"] { background: var(--swc-orange-tint); color: var(--swc-orange-700); }
.auth-icon[data-tom="ok"]     { background: var(--swc-ok-tint);     color: var(--swc-ok); }

.auth-eyebrow {
    font-size: var(--swc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-violet-700);
}

.auth-title {
    font-size: var(--swc-fs-2xl);
    font-weight: var(--swc-fw-bold);
    color: var(--swc-ink-1);
    margin: 0;
    line-height: var(--swc-lh-tight);
    letter-spacing: -0.015em;
}

.auth-lede {
    margin: 0.15rem 0 0;
    font-size: var(--swc-fs-sm);
    color: var(--swc-ink-2);
    max-width: 38ch;
    line-height: var(--swc-lh-normal);
}

/* Form */

.auth-form { display: flex; flex-direction: column; gap: 1.05rem; }

.auth-field { display: flex; flex-direction: column; gap: 0.35rem; }

.auth-field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--swc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--swc-fw-semibold);
    color: var(--swc-ink-2);
}

.auth-field__label a {
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--swc-fw-medium);
    font-size: var(--swc-fs-xs);
    color: var(--swc-violet-700);
    text-decoration: none;
}

.auth-field__label a:hover { text-decoration: underline; }

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input {
    width: 100%;
    padding: 0.7rem 0.85rem 0.7rem 2.55rem;
    font-size: var(--swc-fs-md);
    line-height: 1.3;
    color: var(--swc-ink-1);
    background: var(--swc-surface-2);
    border: 1px solid var(--swc-line);
    border-radius: 10px;
    outline: none;
    transition:
        border-color var(--swc-duration-fast) var(--swc-ease),
        box-shadow var(--swc-duration-fast) var(--swc-ease),
        background var(--swc-duration-fast) var(--swc-ease);
    font-family: var(--swc-font-sans);
}

.auth-input::placeholder { color: var(--swc-ink-3); }

.auth-input:focus {
    border-color: var(--swc-violet);
    background: var(--swc-surface);
    box-shadow: 0 0 0 3px var(--swc-violet-tint);
}

.auth-input.is-error {
    border-color: var(--swc-danger);
    box-shadow: 0 0 0 3px var(--swc-danger-tint);
}

.auth-input--with-toggle { padding-right: 2.8rem; }

.auth-icon-left {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--swc-ink-3);
    font-size: 1rem;
    pointer-events: none;
}

.auth-input:focus + .auth-icon-left,
.auth-input-wrap:focus-within .auth-icon-left { color: var(--swc-violet-700); }

.auth-toggle {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--swc-ink-3);
    font-size: 1.05rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: color var(--swc-duration-fast) var(--swc-ease), background var(--swc-duration-fast) var(--swc-ease);
}

.auth-toggle:hover { color: var(--swc-violet-700); background: var(--swc-violet-tint); }

/* Barra de forca da senha */
.auth-strength {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.auth-strength__track {
    height: 4px;
    background: var(--swc-bg-deep);
    border-radius: var(--swc-radius-pill);
    overflow: hidden;
}

.auth-strength__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--swc-danger);
    transition: width var(--swc-duration) var(--swc-ease), background var(--swc-duration-fast) var(--swc-ease);
}

.auth-strength__bar[data-nivel="1"] { width: 20%;  background: var(--swc-danger); }
.auth-strength__bar[data-nivel="2"] { width: 40%;  background: var(--swc-orange); }
.auth-strength__bar[data-nivel="3"] { width: 60%;  background: oklch(0.78 0.15 95); }
.auth-strength__bar[data-nivel="4"] { width: 80%;  background: var(--swc-blue); }
.auth-strength__bar[data-nivel="5"] { width: 100%; background: var(--swc-ok); }

.auth-strength__text {
    font-size: var(--swc-fs-xs);
    color: var(--swc-ink-3);
    min-height: 1em;
}

.auth-strength__text[data-nivel="1"] { color: var(--swc-danger); }
.auth-strength__text[data-nivel="2"] { color: var(--swc-orange-700); }
.auth-strength__text[data-nivel="3"] { color: oklch(0.45 0.13 95); }
.auth-strength__text[data-nivel="4"] { color: var(--swc-blue-700); }
.auth-strength__text[data-nivel="5"] { color: var(--swc-ok); }

/* Submit */
.auth-actions { margin-top: 0.35rem; }

.auth-submit {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: var(--swc-fs-md);
    border-radius: 10px;
}

/* Avisos (erro / sucesso) */
.auth-alert {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    font-size: var(--swc-fs-sm);
    line-height: var(--swc-lh-normal);
    margin-bottom: 1rem;
    border: 1px solid var(--swc-line);
}

.auth-alert i { font-size: 1.05rem; flex: none; margin-top: 0.05rem; }

.auth-alert--error {
    background: var(--swc-danger-tint);
    border-color: oklch(0.80 0.14 25);
    color: oklch(0.34 0.18 25);
}
.auth-alert--error i { color: var(--swc-danger); }

.auth-alert--ok {
    background: var(--swc-ok-tint);
    border-color: oklch(0.82 0.10 155);
    color: oklch(0.30 0.13 155);
}
.auth-alert--ok i { color: var(--swc-ok); }

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.4rem 0 1rem;
    color: var(--swc-ink-3);
    font-size: var(--swc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--swc-line);
}

/* Link secundario */
.auth-foot {
    text-align: center;
    font-size: var(--swc-fs-sm);
    color: var(--swc-ink-2);
}

.auth-foot a {
    color: var(--swc-violet-700);
    text-decoration: none;
    font-weight: var(--swc-fw-semibold);
}

.auth-foot a:hover { text-decoration: underline; }

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--swc-violet-700);
    text-decoration: none;
    font-size: var(--swc-fs-sm);
    font-weight: var(--swc-fw-semibold);
}

.auth-back:hover { text-decoration: underline; }

/* Copyright */
.auth-copyright {
    text-align: center;
    font-size: var(--swc-fs-xs);
    color: var(--swc-ink-3);
    margin: 0;
}

/* Animacao de entrada (motion suave, ease-out exponencial) */
@keyframes authReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-card { animation: authReveal 380ms var(--swc-ease) both; }

@media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none; }
    .auth-input, .auth-toggle, .auth-strength__bar { transition: none; }
}