/* Login OPERIS v15 — cuadrícula visible + LED fuerte + sin sombra azul */

.login-page {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.login-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-ambient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    opacity: 0.48;
    will-change: transform;
    animation: loginOrbDrift 20s ease-in-out infinite alternate;
}

.login-ambient__orb--1 {
    width: min(52vw, 460px);
    height: min(52vw, 460px);
    top: -14%;
    left: -10%;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.85) 0%, transparent 70%);
}

.login-ambient__orb--2 {
    width: min(42vw, 380px);
    height: min(42vw, 380px);
    bottom: -12%;
    right: -8%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.55) 0%, transparent 70%);
    animation-duration: 24s;
    animation-delay: -6s;
}

.login-ambient__orb--3 {
    width: min(30vw, 260px);
    height: min(30vw, 260px);
    top: 38%;
    left: 46%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%);
    animation-duration: 16s;
    animation-delay: -3s;
}

.login-ambient__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.55;
    animation: loginGridPulse 10s ease-in-out infinite;
}

[data-theme="light"] .login-ambient__grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
}

.login-ambient__shine {
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 48%,
        transparent 62%
    );
    animation: loginShineSweep 14s ease-in-out infinite;
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    max-height: min(620px, calc(100dvh - 2rem));
    border-radius: 20px;
    padding: 4px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    background: #1e1b4b;
    box-shadow:
        0 0 0 1px rgba(196, 181, 253, 0.55),
        0 0 18px rgba(167, 139, 250, 0.65),
        0 0 42px rgba(99, 102, 241, 0.45),
        0 0 72px rgba(118, 75, 162, 0.35),
        0 20px 50px -22px rgba(0, 0, 0, 0.55);
}

.login-page.is-ready .login-shell {
    animation: loginShellIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-shell__led {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.login-shell__led::before {
    content: '';
    position: absolute;
    inset: -70%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 160deg,
        rgba(99, 102, 241, 0.35) 190deg,
        #6366f1 220deg,
        #a78bfa 245deg,
        #ffffff 262deg,
        #e9d5ff 278deg,
        #818cf8 300deg,
        #4f46e5 325deg,
        transparent 360deg
    );
    animation: loginLedSpin 5.5s linear infinite;
    filter: blur(1px);
}

.login-shell__led::after {
    display: none;
}

.login-theme-toggle {
    z-index: 3;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.login-theme-toggle--panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(145deg, #1a1a1a 0%, #000 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.login-theme-toggle--panel:hover {
    background: linear-gradient(145deg, #2a2a2a 0%, #111 100%);
    color: #fff;
    transform: scale(1.06);
}

[data-theme="light"] .login-theme-toggle--panel {
    background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%);
    color: #111;
    border-color: rgba(0, 0, 0, 0.75);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .login-theme-toggle--panel:hover {
    background: linear-gradient(145deg, #fff 0%, #f0f0f0 100%);
    color: #111;
}

.login-theme-toggle--mobile {
    display: none;
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: linear-gradient(145deg, #1a1a1a 0%, #000 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.login-theme-toggle--mobile:hover {
    background: linear-gradient(145deg, #2a2a2a 0%, #111 100%);
    color: #fff;
    transform: scale(1.05);
}

[data-theme="light"] .login-theme-toggle--mobile {
    background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%);
    color: #111;
    border-color: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .login-theme-toggle--mobile:hover {
    background: linear-gradient(145deg, #fff 0%, #f0f0f0 100%);
    color: #111;
}

.login-container {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-height: inherit;
    height: 100%;
    margin: 0;
    border-radius: 17px;
    overflow: hidden;
    background: var(--bg-card);
    color: var(--text-primary);
    border: none;
    box-shadow: none;
}

.login-page.is-ready .login-shell .login-container {
    animation: none;
}

[data-theme="light"] .login-shell {
    background: #312e81;
    box-shadow:
        0 0 0 1px rgba(196, 181, 253, 0.5),
        0 0 18px rgba(167, 139, 250, 0.5),
        0 0 40px rgba(99, 102, 241, 0.35),
        0 16px 40px -18px rgba(15, 23, 42, 0.3);
}

.login-card {
    flex: 1 1 52%;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 1.5rem 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.login-header {
    position: relative;
    text-align: center;
    margin-bottom: 0.65rem !important;
}

.login-logo--operis {
    margin: 0 auto 0.35rem !important;
    animation: loginLogoFloat 5.5s ease-in-out infinite;
}

.brand-logo-img--operis-login {
    max-height: 168px !important;
    max-width: min(480px, 96%) !important;
    padding: 8px 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.login-form .login-field,
.login-form .login-remember,
.login-form .btn-login,
.login-footer {
    opacity: 0;
    transform: translateY(10px);
}

.login-page.is-ready .login-form .login-field:nth-of-type(1) { animation: loginFadeUp 0.4s ease 0.28s forwards; }
.login-page.is-ready .login-form .login-field:nth-of-type(2) { animation: loginFadeUp 0.4s ease 0.34s forwards; }
.login-page.is-ready .login-form .login-field:nth-of-type(3) { animation: loginFadeUp 0.4s ease 0.4s forwards; }
.login-page.is-ready .login-form .login-remember { animation: loginFadeUp 0.4s ease 0.46s forwards; }
.login-page.is-ready .login-form .btn-login { animation: loginFadeUp 0.4s ease 0.52s forwards; }
.login-page.is-ready .login-footer { animation: loginFadeUp 0.4s ease 0.58s forwards; }

.login-form .form-label {
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.login-field.is-focused .input-group {
    box-shadow: 0 0 0 3px var(--primary-light, rgba(99, 102, 241, 0.25));
    border-radius: var(--radius-sm, 8px);
}

.login-field.is-focused .input-group-text {
    color: var(--primary, #6366f1);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.28);
}

[data-theme="light"] .login-remember {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
}

.login-remember .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--primary, #6366f1);
    background-color: var(--bg-card);
    flex-shrink: 0;
}

.login-remember .form-check-input:checked {
    background-color: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
}

.login-remember .form-check-label {
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
}

#togglePassword.is-revealed { color: var(--primary, #6366f1); }

.btn-login {
    position: relative;
    overflow: hidden;
    padding: 0.7rem 0.85rem !important;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-login::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    transform: translateX(-120%);
}

.btn-login:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(99, 102, 241, 0.65);
}

.btn-login:hover:not(:disabled)::after { animation: loginBtnShine 0.85s ease; }

.btn-login.is-loading { pointer-events: none; opacity: 0.9; }
.btn-login.is-loading .login-btn-label { opacity: 0; }

.btn-login .login-btn-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.05rem;
    height: 1.05rem;
    margin: -0.525rem 0 0 -0.525rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
}

.btn-login.is-loading .login-btn-spinner {
    opacity: 1;
    animation: loginSpin 0.7s linear infinite;
}

.login-footer {
    text-align: center;
    margin-top: 0.75rem !important;
}

.login-footer small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Panel derecho: mismo sistema de tema que el form */
.login-decoration {
    flex: 1 1 48%;
    background: var(--bg-body, #0b1220);
    color: var(--text-primary);
    padding: 1.75rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-left: 1px solid var(--border-color, rgba(148, 163, 184, 0.22));
}

.decoration-content {
    width: 100%;
    max-width: 360px;
    position: relative;
    z-index: 1;
    padding-top: 0.35rem;
    padding-right: 2.5rem;
}

.decoration-slogan {
    font-size: 1rem;
    margin-bottom: 0.75rem !important;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(8px);
}

.decoration-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary) !important;
    margin-bottom: 1.15rem !important;
    opacity: 0;
    transform: translateY(8px);
}

.login-page.is-ready .decoration-slogan { animation: loginFadeUp 0.45s ease 0.32s forwards; }
.login-page.is-ready .decoration-desc { animation: loginFadeUp 0.45s ease 0.4s forwards; }

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.feature-list div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.login-page.is-ready .feature-list div:nth-child(1) { animation: loginFeatureIn 0.4s ease 0.5s forwards; }
.login-page.is-ready .feature-list div:nth-child(2) { animation: loginFeatureIn 0.4s ease 0.58s forwards; }
.login-page.is-ready .feature-list div:nth-child(3) { animation: loginFeatureIn 0.4s ease 0.66s forwards; }

.feature-list div:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateX(3px);
}

.feature-list i {
    color: var(--success, #22c55e);
    font-size: 1rem;
}

@keyframes loginOrbDrift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(28px, -22px) scale(1.1); }
}

@keyframes loginGridPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.7; }
}

@keyframes loginShineSweep {
    0%, 100% { transform: translateX(-12%) rotate(0.001deg); opacity: 0.35; }
    50% { transform: translateX(12%) rotate(0.001deg); opacity: 0.55; }
}

@keyframes loginShellIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loginLedSpin {
    to { transform: rotate(360deg); }
}

@keyframes loginCardIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loginFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes loginFeatureIn {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes loginLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes loginBtnShine {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

@keyframes loginSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .login-ambient__orb,
    .login-ambient__grid,
    .login-ambient__shine,
    .login-logo--operis,
    .btn-login::after,
    .login-shell__led::before,
    .login-shell__led::after {
        animation: none !important;
    }
    .login-shell,
    .login-container,
    .login-form .login-field,
    .login-form .login-remember,
    .login-form .btn-login,
    .login-footer,
    .decoration-slogan,
    .decoration-desc,
    .feature-list div {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 860px) {
    .login-decoration { display: none; }
    .login-shell { max-width: 460px; }
    .login-theme-toggle--mobile { display: inline-flex; }
}

@media (max-height: 700px) {
    .brand-logo-img--operis-login {
        max-height: 120px !important;
        padding: 8px 12px !important;
    }
    .login-card { padding: 1.1rem 1.25rem; }
}