/* ====== Pantalla de acceso ====== */
.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}
.auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.auth-bg .blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
    animation: float 14s ease-in-out infinite;
}
.blob-1 { width: 460px; height: 460px; background: #6366f1; top: -120px; left: -100px; }
.blob-2 { width: 420px; height: 420px; background: #0ea5e9; bottom: -140px; right: -120px; animation-delay: -4s; }
.blob-3 { width: 360px; height: 360px; background: #8b5cf6; top: 40%; left: 55%; animation-delay: -8s; }
@keyframes float {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(30px,-40px) scale(1.08); }
}

.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 20px; }
.auth-card { padding: 38px 34px; }

.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-logo {
    width: 64px; height: 64px; margin: 0 auto 14px;
    display: grid; place-items: center;
    background: var(--grad-primary); color: #fff;
    border-radius: 18px; font-size: 1.7rem;
    box-shadow: 0 12px 30px rgba(99,102,241,.45);
}
.auth-brand h1 { font-size: 1.4rem; font-weight: 800; margin: 0; }

/* ====== Campos "cool" con icono + label flotante ====== */
.field {
    position: relative;
    margin-bottom: 20px;
}
.field-input {
    width: 100%;
    height: 58px;
    padding: 22px 46px 8px 46px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-size: .98rem;
    outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.field-input:focus {
    border-color: var(--c-primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(99,102,241,.18), 0 8px 22px rgba(99,102,241,.12);
}
/* Label flotante */
.field label {
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .98rem;
    pointer-events: none;
    transition: all .2s ease;
}
.field-input:focus + label,
.field-input:not(:placeholder-shown) + label {
    top: 14px;
    transform: translateY(0);
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-primary);
}
/* Icono */
.field-icon {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    transition: color .25s, transform .25s;
    z-index: 3;
}
.field-input:focus ~ .field-icon { color: var(--c-primary); transform: translateY(-50%) scale(1.12); }
/* Línea degradada animada bajo el campo */
.field-line {
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    height: 2px;
    background: var(--grad-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.field-input:focus ~ .field-line { transform: scaleX(1); }

/* Recuérdame + olvidé */
.remember { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-soft); cursor: pointer; user-select: none; margin: 0; }
.remember input { display: none; }
.remember span {
    width: 38px; height: 20px; border-radius: 999px; background: var(--border);
    position: relative; transition: background .25s; flex: 0 0 38px;
}
.remember span::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s;
}
.remember input:checked + span { background: var(--c-primary); }
.remember input:checked + span::after { transform: translateX(18px); }
.forgot { font-size: .82rem; color: var(--c-primary); font-weight: 600; }
.forgot:hover { text-decoration: underline; }

.btn-eye {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted); cursor: pointer; z-index: 5;
    transition: color .2s;
}
.btn-eye:hover { color: var(--c-primary); }

.auth-hint {
    margin-top: 20px; text-align: center; font-size: .8rem;
    color: var(--text-soft);
    background: var(--surface-2); border: 1px dashed var(--border);
    padding: 10px; border-radius: 12px;
}